/* ============================================================
   conciergya.css — design system Conciergya (déploiement progressif)
   v1 — appliqué d'abord sur personnel/acces.aspx
   ============================================================ */

/* Polices Google */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

/* Tabler Icons webfont (5800+ icônes outline) — utilisable via <i class="ti ti-{name}">.
   Pattern : <i class="ti ti-spray"> pour propreté, ti-truck pour livreur, etc.
   En cas d'indisponibilité du CDN, fallback gracieux : pas d'icône mais le fond coloré reste. */
@import url('https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/dist/tabler-icons.min.css');

/* ----- Variables (au :root pour etre dispo dans header/footer hors .cy-page) ----- */
:root{
    --navy:#0F172A;
    --navy-2:#1E293B;
    --slate:#475569;
    --slate-2:#64748B;
    --slate-3:#94A3B8;
    --gold:#C9A965;
    --gold-dark:#B08F4D;
    --gold-soft:#F5EBD3;
    --gold-pale:#FBF6E8;
    --bg:#FAFAF7;
    --bg-card:#FFFFFF;
    --border:#E5E7EB;
    --border-soft:#F1F0EC;
    --success:#16A34A;
    --danger:#DC2626;
    --warning:#F59E0B;
    --radius:14px;
    --radius-sm:10px;
    --shadow-sm:0 1px 2px rgba(15,23,42,.04);
    --shadow:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 6px rgba(15,23,42,.04);
    --t:cubic-bezier(0.16, 1, 0.3, 1);
}

/* ----- Wrapper de page ----- */
.cy-page,
.cy-page *{
    box-sizing:border-box;
}

/* ----- Wrapper fiche (architecture cy-fiche / cy-header / cy-layout) ----- */
/* Force la typographie Conciergya sur l'ensemble de la fiche pour neutraliser
   les éventuelles polices par défaut héritées de Style.css legacy. */
.cy-fiche,
.cy-fiche * {
    box-sizing:border-box;
}
.cy-fiche {
    font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    font-size:15px;
    line-height:1.55;
    color:var(--navy);
}
.cy-fiche input,
.cy-fiche select,
.cy-fiche textarea,
.cy-fiche button {
    font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
.cy-fiche h1,
.cy-fiche h2,
.cy-fiche h3,
.cy-fiche h4 {
    font-family:'Fraunces',Georgia,serif;
    color:var(--navy);
    font-weight:600;
}
.cy-page{
    font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    font-size:15px;
    line-height:1.6;
    color:var(--navy-2);
    background:var(--bg);
    max-width:880px;
    margin:0 auto;
    padding:32px;
}

/* ----- Welcome card (bandeau d'accueil) ----- */
.cy-page .welcome-card{
    background:linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
    color:#fff;
    border-radius:var(--radius);
    padding:28px 32px;
    margin-bottom:28px;
    box-shadow:var(--shadow);
    position:relative;
    overflow:hidden;
}
.cy-page .welcome-card::before{
    content:"";
    position:absolute;inset:0;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    pointer-events:none;
}
.cy-page .welcome-card::after{
    content:"";
    position:absolute;
    top:-40px;right:-40px;
    width:200px;height:200px;
    background:radial-gradient(circle, rgba(201,169,101,0.20) 0%, transparent 70%);
    pointer-events:none;
}
.cy-page .welcome-content{position:relative;z-index:1}
.cy-page .welcome-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:22px;
}
.cy-page .welcome-greeting{
    font-family:'Fraunces',serif;
    font-size:26px;
    font-weight:500;
    letter-spacing:-.01em;
}
.cy-page .welcome-greeting strong{
    font-weight:700;
    color:var(--gold);
}
.cy-page .power-btn{
    width:42px;height:42px;
    border-radius:999px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.12);
    color:#fff;
    display:grid;place-items:center;
    cursor:pointer;
    transition:all .2s var(--t);
    padding:0;
}
.cy-page .power-btn:hover{
    background:rgba(220,38,38,0.18);
    border-color:rgba(220,38,38,0.35);
    transform:rotate(-15deg);
}
.cy-page .power-btn img,
.cy-page .power-btn svg{width:18px;height:18px;filter:brightness(0) invert(1)}

/* Welcome-card client : 2 widgets info (Prochaine intervention / Dernière facture) */
.cy-page .welcome-info-row {
    display:flex; flex-wrap:wrap; gap:32px;
    padding-top:18px;
    border-top:1px solid rgba(255,255,255,0.08);
}
.cy-page .welcome-info-block {
    display:flex; flex-direction:column; gap:4px;
    min-width:0;
}
.cy-page .welcome-info-label {
    font-size:11px; font-weight:600;
    color:rgba(255,255,255,0.55);
    text-transform:uppercase; letter-spacing:.06em;
}
.cy-page .welcome-info-value {
    font-size:15px; font-weight:500;
    color:#fff;
    font-family:'Inter', sans-serif;
}
/* Si la requête ne renvoie rien (Repeater vide), on cache toute la cellule
   pour ne pas afficher juste le label tout seul */
.cy-page .welcome-info-block:has(.welcome-info-value:empty) {
    display:none;
}
/* Si AUCUN bloc n'a de valeur, cacher la row entière (pas de border-top inutile) */
.cy-page .welcome-info-row:not(:has(.welcome-info-value:not(:empty))) {
    display:none;
}

/* Évaluation client (échelle 5 segments) */
.cy-page .evaluation{
    display:flex;
    align-items:center;
    gap:16px;
    padding-top:18px;
    border-top:1px solid rgba(255,255,255,0.10);
}
.cy-page .evaluation-label{
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:rgba(255,255,255,0.65);
    font-weight:500;
}
.cy-page .scale{
    display:flex;
    align-items:center;
    gap:14px;
    margin-left:auto;
}
.cy-page .scale-dots{
    display:flex;
    gap:5px;
    align-items:center;
}
.cy-page .scale .dot{
    width:10px;height:10px;
    border-radius:999px;
    background:rgba(255,255,255,0.18);
    transition:all .25s var(--t);
}
.cy-page .scale .dot.filled{background:var(--gold)}
.cy-page .scale .dot.active{
    width:14px;height:14px;
    background:#22C55E;
    box-shadow:0 0 0 3px rgba(34,197,94,0.25);
}
.cy-page .scale-label{
    font-size:13.5px;
    font-weight:600;
    color:#fff;
}
.cy-page .scale-label small{
    display:block;
    font-weight:400;
    font-size:11.5px;
    color:rgba(255,255,255,0.55);
    text-transform:uppercase;
    letter-spacing:.06em;
    margin-top:1px;
}

/* ----- Sections (cartes blanches) ----- */
.cy-page .section{
    background:var(--bg-card);
    border-radius:var(--radius);
    padding:24px 28px 22px;
    margin-bottom:18px;
    box-shadow:var(--shadow-sm);
    border:1px solid var(--border-soft);
}
.cy-page .section h1,
.cy-page .section .section-title{
    font-family:'Fraunces',serif;
    font-size:21px;
    font-weight:600;
    letter-spacing:-.01em;
    color:var(--navy);
    margin:0 0 16px 0;
    padding:0;
    display:flex;
    align-items:center;
    gap:10px;
    text-transform:none;
    text-shadow:none;
}
.cy-page .section h1::before,
.cy-page .section .section-title::before{
    content:"";
    width:3px;height:20px;
    background:var(--gold);
    border-radius:2px;
}
/* Force le style sur les <span>/<asp:Label> wrappes dans h1 (panel_commun et panel_document)
   qui auraient sinon les styles inline xx-large injectes par ASP.NET */
.cy-page .section h1 span,
.cy-page .section h1 .auto-style14{
    font-family:'Fraunces',serif !important;
    font-size:21px !important;
    font-weight:600 !important;
    color:var(--navy) !important;
    text-transform:none !important;
    padding:0 !important;
    line-height:inherit !important;
}

/* ----- Boutons (override des anciens .bouton, .sousbouton...) ----- */
.cy-page .btn,
.cy-page input.btn,
.cy-page button.btn{
    display:flex;
    align-items:center;
    gap:12px;
    font-family:inherit;
    font-size:14.5px;
    font-weight:500;
    border-radius:var(--radius-sm);
    cursor:pointer;
    border:0;
    transition:all .18s var(--t);
    width:100%;
    text-align:left;
    margin:0 0 8px 0;
    position:relative;

    /* override des anciennes regles .bouton */
    -webkit-appearance:none;
    appearance:none;
    height:auto;
    background-color:transparent;
    color:var(--navy-2);
    text-transform:none;
    line-height:1.4;
}

/* Niveau 1 - sections principales */
.cy-page .btn-primary,
.cy-page input.btn-primary,
.cy-page button.btn-primary{
    background:#fff;
    color:var(--navy) !important; /* override l'inline style "color:white" pose par le code-behind Sub alerte() */
    font-weight:600;
    font-size:15px;
    padding:14px 18px 14px 50px;
    border:1px solid var(--border-soft);
    border-left:4px solid var(--gold);
    box-shadow:var(--shadow-sm);
    background-repeat:no-repeat;
    background-position:18px center;
    background-size:18px 18px;
    text-align:left;
    height:auto;
}
/* Si une alerte est presente (code-behind set color:red, JS la convertit en class has-alert) */
.cy-page .btn-primary.has-alert{
    color:var(--danger) !important;
    border-left-color:var(--danger);
}
.cy-page .btn-secondary.has-alert{
    color:var(--danger) !important;
    border-color:var(--danger);
}
.cy-page .btn-tertiary.has-alert{
    color:var(--danger) !important;
}
.cy-page .btn-primary:hover{
    border-color:var(--gold);
    border-left-color:var(--gold-dark);
    background-color:var(--gold-pale);
    transform:translateX(2px);
    color:var(--navy);
}

/* Icônes spécifiques par data-icon (SVG en data URI, couleur gold-dark) */
.cy-page .btn-primary[data-icon="bureau"]{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B08F4D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/></svg>");
}
.cy-page .btn-primary[data-icon="systeme"]{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B08F4D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/></svg>");
}
.cy-page .btn-primary[data-icon="terrain"]{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B08F4D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>");
}
.cy-page .btn-primary[data-icon="commerce"]{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B08F4D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/><circle cx='8.5' cy='7' r='4'/><path d='M20 8v6'/><path d='M23 11h-6'/></svg>");
}
.cy-page .btn-primary[data-icon="personnel"]{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B08F4D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M23 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>");
}
.cy-page .btn-primary[data-icon="plannings"]{
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B08F4D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
    background-position:18px center, right 18px center;
    background-size:18px 18px, 14px 14px;
    background-repeat:no-repeat, no-repeat;
    padding-right:40px;
}

/* Niveau 2 - sous-boutons (feuilles, pas de sous-menu) */
.cy-page .btn-secondary,
.cy-page input.btn-secondary,
.cy-page button.btn-secondary{
    background-color:transparent;
    color:var(--navy-2) !important; /* override inline color:white du code-behind */
    border:1px solid var(--border);
    padding:11px 16px;
    font-size:14px;
    font-weight:500;
    margin-left:0;
    width:100%;
    height:auto;
    text-align:left;
}
/* Quand le btn-secondary est dans un menu deroulant (div_*), on l'indente */
.cy-page [id^="div_"] .btn-secondary,
.cy-page [id^="div_"] input.btn-secondary{
    margin-left:20px;
    width:calc(100% - 20px);
}
.cy-page .btn-secondary:hover{
    background-color:#fff;
    border-color:var(--gold);
    color:var(--navy) !important;
    transform:translateX(2px);
}
.cy-page .btn-secondary:hover{
    background-color:#fff;
    border-color:var(--gold);
    color:var(--navy);
    transform:translateX(2px);
}
/* Boutons niveau 2 qui ouvrent un sous-menu : icone via data-icon */
.cy-page .btn-secondary[data-icon="personnel"]{
    padding-left:42px;
    background-repeat:no-repeat;
    background-position:14px center;
    background-size:18px 18px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B08F4D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/><circle cx='8.5' cy='7' r='4'/><line x1='20' y1='8' x2='20' y2='14'/><line x1='23' y1='11' x2='17' y2='11'/></svg>");
}

/* === ICONES ESPACE CONCIERGE (btn-secondary, gold-dark) === */
.cy-page .btn-secondary[data-icon="planning_perso"],
.cy-page input.btn-secondary[data-icon="planning_perso"]{
    padding-left:42px;
    background-repeat:no-repeat;
    background-position:14px center;
    background-size:18px 18px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B08F4D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/><polyline points='9 16 11 18 15 14'/></svg>");
}
.cy-page .btn-secondary[data-icon="chantiers"],
.cy-page input.btn-secondary[data-icon="chantiers"]{
    padding-left:42px;
    background-repeat:no-repeat;
    background-position:14px center;
    background-size:18px 18px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B08F4D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/></svg>");
}
.cy-page .btn-secondary[data-icon="covoiturage"],
.cy-page input.btn-secondary[data-icon="covoiturage"]{
    padding-left:42px;
    background-repeat:no-repeat;
    background-position:14px center;
    background-size:18px 18px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B08F4D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 17h14M7 17v-3M17 17v-3M5 14h14'/><path d='M3 14l2-5a2 2 0 0 1 2-1h10a2 2 0 0 1 2 1l2 5'/><circle cx='7' cy='17' r='2'/><circle cx='17' cy='17' r='2'/></svg>");
}
.cy-page .btn-secondary[data-icon="methodes"],
.cy-page input.btn-secondary[data-icon="methodes"]{
    padding-left:42px;
    background-repeat:no-repeat;
    background-position:14px center;
    background-size:18px 18px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B08F4D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/><path d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/></svg>");
}
.cy-page .btn-secondary[data-icon="acces"],
.cy-page input.btn-secondary[data-icon="acces"]{
    padding-left:42px;
    background-repeat:no-repeat;
    background-position:14px center;
    background-size:18px 18px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B08F4D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>");
}
.cy-page .btn-secondary[data-icon="reseau"],
.cy-page input.btn-secondary[data-icon="reseau"]{
    padding-left:42px;
    background-repeat:no-repeat;
    background-position:14px center;
    background-size:18px 18px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B08F4D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.55a11 11 0 0 1 14.08 0'/><path d='M1.42 9a16 16 0 0 1 21.16 0'/><path d='M8.53 16.11a6 6 0 0 1 6.95 0'/><line x1='12' y1='20' x2='12.01' y2='20'/></svg>");
}
.cy-page .btn-secondary[data-icon="travail"],
.cy-page input.btn-secondary[data-icon="travail"]{
    padding-left:42px;
    background-repeat:no-repeat;
    background-position:14px center;
    background-size:18px 18px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B08F4D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='8' y='2' width='8' height='4' rx='1' ry='1'/><path d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/></svg>");
}
.cy-page .btn-secondary[data-icon="commande"],
.cy-page input.btn-secondary[data-icon="commande"]{
    padding-left:42px;
    background-repeat:no-repeat;
    background-position:14px center;
    background-size:18px 18px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B08F4D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/><polyline points='3.27 6.96 12 12.01 20.73 6.96'/><line x1='12' y1='22.08' x2='12' y2='12'/></svg>");
}
.cy-page .btn-secondary[data-icon="validation"],
.cy-page input.btn-secondary[data-icon="validation"]{
    padding-left:42px;
    background-repeat:no-repeat;
    background-position:14px center;
    background-size:18px 18px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B08F4D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 11 12 14 22 4'/><path d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/></svg>");
}
.cy-page .btn-secondary[data-icon="frais"],
.cy-page input.btn-secondary[data-icon="frais"]{
    padding-left:42px;
    background-repeat:no-repeat;
    background-position:14px center;
    background-size:18px 18px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B08F4D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2'/><path d='M18 14h-8'/><path d='M15 18h-5'/><path d='M10 6h8v4h-8V6z'/></svg>");
}
.cy-page .btn-secondary[data-icon="manuels"],
.cy-page input.btn-secondary[data-icon="manuels"]{
    padding-left:42px;
    background-repeat:no-repeat;
    background-position:14px center;
    background-size:18px 18px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B08F4D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/><path d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/></svg>");
}
/* "Channel Manager" — globe (synchronisation multi-canaux Airbnb / Booking / etc.) */
.cy-page .btn-secondary[data-icon="channel_manager"],
.cy-page button.btn-secondary[data-icon="channel_manager"]{
    padding-left:42px;
    background-repeat:no-repeat;
    background-position:14px center;
    background-size:18px 18px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B08F4D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='2' y1='12' x2='22' y2='12'/><path d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/></svg>");
}

/* === BOUTONS "BIENTÔT DISPONIBLE" (état désactivé visible) ===
   Pour les fonctionnalités annoncées dans la roadmap mais pas encore actives.
   Le bouton reste visible (signale la fonctionnalité au prospect) mais non
   cliquable et grisé. */
.cy-page .btn.cy-btn-disabled,
.cy-page input.btn.cy-btn-disabled,
.cy-page button.btn.cy-btn-disabled {
    opacity:0.55;
    cursor:not-allowed;
    pointer-events:none;
    box-shadow:none;
}
.cy-page .btn.cy-btn-disabled:hover,
.cy-page input.btn.cy-btn-disabled:hover,
.cy-page button.btn.cy-btn-disabled:hover {
    transform:none;
    background-color:transparent;
    border-left-color:var(--gold);
}
/* Suffixe « (bientôt disponible) » placé inline après le label du bouton */
.cy-page .cy-btn-soon {
    font-size:11px;
    font-style:italic;
    font-weight:400;
    color:var(--slate);
    margin-left:6px;
    text-transform:none;
}

/* === ICONES ESPACE CLIENT (btn-secondary, gold-dark) === */
/* "Notes et remarques" — icône étoile */
.cy-page .btn-secondary[data-icon="notes"],
.cy-page input.btn-secondary[data-icon="notes"]{
    padding-left:42px;
    background-repeat:no-repeat;
    background-position:14px center;
    background-size:18px 18px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B08F4D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/></svg>");
}
/* "Facturation" — icône facture/reçu */
.cy-page .btn-secondary[data-icon="facturation"],
.cy-page input.btn-secondary[data-icon="facturation"]{
    padding-left:42px;
    background-repeat:no-repeat;
    background-position:14px center;
    background-size:18px 18px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B08F4D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/><line x1='16' y1='13' x2='8' y2='13'/><line x1='16' y1='17' x2='8' y2='17'/><polyline points='10 9 9 9 8 9'/></svg>");
}
/* "Devis et CGV" — icône signature/contrat */
.cy-page .btn-secondary[data-icon="cgv"],
.cy-page input.btn-secondary[data-icon="cgv"]{
    padding-left:42px;
    background-repeat:no-repeat;
    background-position:14px center;
    background-size:18px 18px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B08F4D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/><path d='M9 18c.5-1 1.5-1.5 2.5-1.5s2 .5 2.5 1.5'/><path d='M9 14h6'/></svg>");
}

/* Niveau 3 - sub-sub (anciens .soussousbouton) */
.cy-page .btn-tertiary,
.cy-page input.btn-tertiary,
.cy-page button.btn-tertiary{
    background-color:transparent;
    color:var(--slate) !important; /* override inline color:white du code-behind */
    font-weight:500;
    font-size:13.5px;
    padding:9px 14px;
    border:0;
    margin-left:20px;
    width:calc(100% - 20px);
    height:auto;
    text-align:left;
}
/* Si le btn-tertiary est imbrique dans un sous-menu de menu (div_admin > div_personnel par ex.), on l'indente plus */
.cy-page [id^="div_"] [id^="div_"] .btn-tertiary,
.cy-page [id^="div_"] [id^="div_"] input.btn-tertiary{
    margin-left:40px;
    width:calc(100% - 40px);
}
.cy-page .btn-tertiary:hover{
    background-color:var(--gold-pale);
    color:var(--navy);
}

/* Bouton "action" (Pointer) - héro doré */
.cy-page .btn-action,
.cy-page input.btn-action{
    background:linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
    color:#fff;
    font-weight:700;
    font-size:16px;
    letter-spacing:-.01em;
    padding:16px 22px 16px 52px;
    box-shadow:0 6px 20px -6px rgba(176,143,77,0.45);
    justify-content:center;
    text-align:center;
    border:0;
    height:auto;
    background-repeat:no-repeat;
    background-position:22px center;
    background-size:20px 20px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>");
}
.cy-page .btn-action:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 28px -8px rgba(176,143,77,0.55);
    background-color:transparent;
    color:#fff;
}
.cy-page .btn-action:disabled,
.cy-page .btn-action[disabled]{
    background:#E5E7EB;
    color:var(--slate-3);
    cursor:not-allowed;
    box-shadow:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>");
    background-repeat:no-repeat;
    background-position:22px center;
    background-size:20px 20px;
}

/* Espacement entre groupes de boutons */
.cy-page .section h1 + .btn,
.cy-page .section .section-title + .btn{
    margin-top:0;
}
.cy-page .section .btn + .sub{
    margin-top:0;
}

/* Neutralise les <br /> qui creaient des gaps inegaux entre boutons.
   On laisse le margin-bottom des .btn gerer un spacing uniforme. */
.cy-page br{
    display:none;
}

/* Documents (footer) */
.cy-page .section.documents{
    background:linear-gradient(180deg, #fff 0%, var(--gold-pale) 100%);
}

/* Override des styles legacy de Site.css dans la zone documents (auto-style1, auto-style2, auto-style14) */
.cy-page .section.documents .auto-style1,
.cy-page .section.documents .auto-style2,
.cy-page .section.documents .auto-style14,
.cy-page .section.documents span.auto-style1,
.cy-page .section.documents span.auto-style2,
.cy-page .section.documents span.auto-style14{
    font-size:14px;
    color:var(--slate);
    text-decoration:none;
    font-weight:400;
}
/* Le mot "Contacts" en accent dore, separe visuellement des boutons par un espace + ligne pointillee */
.cy-page .section.documents .auto-style2{
    display:inline-block;
    color:var(--gold-dark);
    font-weight:600;
    text-transform:uppercase;
    font-size:12.5px;
    letter-spacing:.06em;
    margin-top:24px;
    padding-top:18px;
    border-top:1px dashed var(--border);
    width:100%;
}
/* Liens telephone : doré, sans underline, semi-bold */
.cy-page .section.documents a{
    color:var(--gold-dark);
    font-weight:600;
    text-decoration:none;
    font-size:14px;
}
.cy-page .section.documents a:hover{
    text-decoration:underline;
}
/* La ligne pointillee est portee par le label Contacts, pas besoin de la repeter sur le bloc contacts */

/* ----- Reinitialise les styles existants pour ne pas casser ----- */
.cy-page .labelpersonnel{
    display:block !important;
    font-family:'Inter',sans-serif !important;
    font-size:12.5px !important;
    color:var(--slate-2) !important;
    font-weight:600 !important;
    text-transform:uppercase !important;
    letter-spacing:.06em !important;
    margin:18px 0 8px 0 !important;
    padding:0 !important;
}
/* Drapeaux de selection de langue : compacts */
.cy-page .flag-section{
    margin:18px 0 8px 0;
    padding:14px 0 10px 0;
    border-top:1px dashed var(--border);
}
.cy-page .flag-section .labelpersonnel{
    margin-top:0 !important;
}
.cy-page .flag{
    display:flex;
    gap:10px;
    align-items:center;
    margin:0;
}
.cy-page .flag .flag_link{
    display:inline-flex;
    text-decoration:none;
    border-radius:4px;
    overflow:hidden;
    border:1px solid var(--border);
    transition:all .15s var(--t);
    cursor:pointer;
}
.cy-page .flag .flag_link:hover{
    border-color:var(--gold);
    transform:translateY(-1px);
    box-shadow:var(--shadow-sm);
}
.cy-page .flag .flag_link img,
.cy-page .flag .flag_link svg{
    width:36px !important;
    height:24px !important;
    border:0 !important;
    margin:0 !important;
    display:block;
    object-fit:cover;
}
.cy-page .general{
    font-family:'Inter',sans-serif;
    font-size:15px;
    width:100%;
    padding:11px 14px;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    margin:6px 0;
}
.cy-page .general:focus{
    outline:none;
    border-color:var(--gold);
    box-shadow:0 0 0 3px var(--gold-pale);
}

/* ============================================================
   MASTERPAGE — Header sticky + footer minimal (Conciergya)
   ============================================================ */

.cy-header{
    position:sticky;
    top:0;z-index:50;
    background:rgba(250,250,247,0.92);
    backdrop-filter:saturate(180%) blur(14px);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
    border-bottom:1px solid var(--border-soft);
    font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
.cy-header-inner{
    max-width:880px;
    margin:0 auto;
    padding:14px 32px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}
.cy-logo{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    color:var(--navy);
}
.cy-logo-mark{
    width:36px;height:36px;
    border-radius:9px;
    background:linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
    display:grid;place-items:center;
    color:var(--gold);
    font-family:'Fraunces',serif;
    font-weight:700;
    font-size:20px;
    box-shadow:inset 0 -2px 0 rgba(255,255,255,0.06), 0 4px 12px -2px rgba(15,23,42,0.18);
    flex-shrink:0;
}
.cy-logo-text{
    font-family:'Fraunces',serif;
    font-weight:600;
    font-size:22px;
    letter-spacing:-.01em;
    color:var(--navy);
}
.cy-call{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 16px 10px 14px;
    border-radius:999px;
    border:1px solid var(--border);
    background:#fff;
    color:var(--navy);
    font-size:14px;
    font-weight:500;
    text-decoration:none;
    transition:all .18s var(--t);
    box-shadow:var(--shadow-sm);
}
.cy-call:hover{
    border-color:var(--gold);
    background:var(--gold-pale);
    transform:translateY(-1px);
    box-shadow:var(--shadow);
}
.cy-call-icon{
    width:32px;height:32px;
    border-radius:999px;
    background:linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
    display:grid;place-items:center;
    color:#fff;
    flex-shrink:0;
}
.cy-call-icon svg{width:15px;height:15px}
.cy-call-label{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}
.cy-call-label small{
    font-size:11.5px;
    color:var(--slate-2);
    text-transform:uppercase;
    letter-spacing:.06em;
    font-weight:500;
    line-height:1;
    margin-bottom:2px;
}
.cy-call-label strong{
    font-weight:600;
    font-size:13.5px;
    letter-spacing:-.005em;
    color:var(--navy);
}
.cy-footer{
    border-top:1px solid var(--border-soft);
    margin-top:60px;
    padding:24px 32px;
    text-align:center;
    font-size:12.5px;
    color:var(--slate-2);
    font-family:'Inter',sans-serif;
}
.cy-footer a{
    color:var(--gold-dark);
    text-decoration:none;
}
.cy-footer a:hover{text-decoration:underline}

/* ============================================================
   Google Translate : masquer le bandeau et neutraliser le top:40px
   ============================================================ */
#google_translate_element{display:none !important}
.goog-te-banner-frame.skiptranslate{display:none !important}
.skiptranslate{display:none !important}
body{top:0 !important}

/* ============================================================ */
/* ADMIN FICHE (migrated from administration.aspx redesign)     */
/* Generic page scope: .cy-fiche                                */
/* ============================================================ */
                      /* Polices alignees sur conciergya.css (Fraunces remplace l'ancien Cormorant Garamond) */
                      @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

                      /* Reset du html/body/form pour que le header sticky touche le haut du viewport (pas de marge legacy de Style.css) */
                      html, body { margin: 0 !important; padding: 0 !important; }
                      body > form { margin: 0; padding: 0; }
                      body > form > div:first-of-type { margin: 0; padding: 0; }

                      /* ===== Variables alignees sur conciergya.css ===== */
                      .cy-fiche {
                          --navy: #0F172A;
                          --navy-2: #1E293B;
                          --navy-soft: #1E293B;
                          --gold: #C9A965;
                          --gold-dark: #B08F4D;
                          --gold-soft: #F5EBD3;
                          --gold-pale: #FBF6E8;
                          --slate: #475569;
                          --slate-2: #64748B;
                          --slate-3: #94A3B8;
                          --bg: #FAFAF7;
                          --bg-card: #FFFFFF;
                          --border: #E5E7EB;
                          --border-soft: #F1F0EC;
                          --success: #16A34A;
                          --danger: #DC2626;
                          /* Aliases pour compat avec mes anciennes references */
                          --gray-50: var(--bg);
                          --gray-100: var(--border-soft);
                          --gray-200: var(--border);
                          --shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -8px rgba(15,23,42,.10);
                          font-family: 'Inter', system-ui, sans-serif;
                          color: var(--navy);
                          font-size: 14px;
                          line-height: 1.5;
                          background: var(--bg);
                          padding: 0;
                      }

                      /* ===== Titres ===== */
                      .cy-fiche h1 {
                          font-family: 'Fraunces', serif;
                          font-size: 28px;
                          font-weight: 600;
                          color: var(--navy);
                          margin: 0 0 18px 0;
                          padding-bottom: 10px;
                          border-bottom: 2px solid var(--gold);
                          display: inline-block;
                      }
                      .cy-fiche h3 {
                          font-size: 12px;
                          font-weight: 700;
                          color: var(--gold);
                          text-transform: uppercase;
                          letter-spacing: 1.2px;
                          margin: 18px 0 10px 0;
                      }
                      .cy-fiche .cy-toolbar-block h3 {
                          margin-top: 0;
                      }

                      /* ===== Inputs / selects / textareas ===== */
                      .cy-fiche input[type="text"],
                      .cy-fiche input[type="email"],
                      .cy-fiche input[type="date"],
                      .cy-fiche input[type="number"],
                      .cy-fiche input:not([type]),
                      .cy-fiche select,
                      .cy-fiche textarea {
                          padding: 7px 10px;
                          height: 36px;
                          box-sizing: border-box;
                          border: 1px solid var(--gray-200);
                          border-radius: 6px;
                          font-family: inherit;
                          font-size: 13px;
                          color: var(--navy);
                          background: white;
                          margin: 2px 4px 2px 0;
                          transition: border-color .12s, box-shadow .12s;
                      }
                      .cy-fiche input:focus,
                      .cy-fiche select:focus,
                      .cy-fiche textarea:focus {
                          outline: none;
                          border-color: var(--gold);
                          box-shadow: 0 0 0 3px rgba(201,169,101,.18);
                      }
                      .cy-fiche input[type="checkbox"],
                      .cy-fiche input[type="radio"] {
                          accent-color: var(--gold);
                          margin: 0 4px 0 0;
                          cursor: pointer;
                      }
                      .cy-fiche input[readonly] {
                          background: var(--gray-100);
                          color: var(--slate);
                      }

                      /* ===== Modern dropdown (validé 2026-05-15) =====
                         Tous les <select> sauf les .cy-pill-picker (cachés et remplacés par des
                         pills). Override partiel de la règle générique input/select/textarea
                         ci-dessus pour ajouter :
                           - chevron SVG inline custom (couleur slate, taille 14px, position fixe)
                           - appearance: none → retire le rendu natif du navigateur
                           - padding-right étendu pour aérer le chevron
                           - hover state explicite (border gold-soft + fond crème léger)
                         Hauteur 36px inchangée pour rester aligné avec les <input> du même form. */
                      .cy-fiche select:not(.cy-pill-picker) {
                          padding: 7px 36px 7px 12px;
                          border-color: rgba(15, 23, 42, 0.12);
                          border-radius: 8px;
                          font-weight: 500;
                          background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
                          background-repeat: no-repeat;
                          background-position: right 12px center;
                          background-size: 14px 14px;
                          appearance: none;
                          -webkit-appearance: none;
                          -moz-appearance: none;
                          cursor: pointer;
                          transition: border-color .14s, box-shadow .14s, background-color .14s;
                      }
                      .cy-fiche select:not(.cy-pill-picker):hover {
                          border-color: rgba(176, 143, 77, 0.5);
                          background-color: #FCFAF3;
                      }

                      /* =====================================================
                         Inputs date / time — neutralise le rendu Safari natif
                         qui colorise les chiffres en bleu lavande (accent OS).
                         On force la couleur navy + typo cohérente avec selects.
                         Pseudo-elements WebKit nécessaires pour cibler chaque
                         segment (jj, mm, aaaa, hh, mm) sinon Safari ignore.
                         ===================================================== */
                      .cy-fiche input[type="date"],
                      .cy-fiche input[type="time"] {
                          color: var(--navy) !important;
                          -webkit-text-fill-color: var(--navy) !important;
                          font-weight: 500;
                          font-size: 14px;
                          letter-spacing: 0;
                          background-color: #fff;
                      }
                      .cy-fiche input[type="date"]::-webkit-datetime-edit,
                      .cy-fiche input[type="time"]::-webkit-datetime-edit,
                      .cy-fiche input[type="date"]::-webkit-datetime-edit-fields-wrapper,
                      .cy-fiche input[type="time"]::-webkit-datetime-edit-fields-wrapper,
                      .cy-fiche input[type="date"]::-webkit-datetime-edit-day-field,
                      .cy-fiche input[type="date"]::-webkit-datetime-edit-month-field,
                      .cy-fiche input[type="date"]::-webkit-datetime-edit-year-field,
                      .cy-fiche input[type="date"]::-webkit-datetime-edit-text,
                      .cy-fiche input[type="time"]::-webkit-datetime-edit-hour-field,
                      .cy-fiche input[type="time"]::-webkit-datetime-edit-minute-field,
                      .cy-fiche input[type="time"]::-webkit-datetime-edit-text {
                          color: var(--navy) !important;
                          -webkit-text-fill-color: var(--navy) !important;
                          font-weight: 500;
                      }
                      /* Picker indicator (icone calendrier/horloge à droite) :
                         opacité harmonisée, hover = pleine opacité. */
                      .cy-fiche input[type="date"]::-webkit-calendar-picker-indicator,
                      .cy-fiche input[type="time"]::-webkit-calendar-picker-indicator {
                          cursor: pointer;
                          opacity: 0.45;
                          transition: opacity .12s;
                      }
                      .cy-fiche input[type="date"]:hover::-webkit-calendar-picker-indicator,
                      .cy-fiche input[type="time"]:hover::-webkit-calendar-picker-indicator,
                      .cy-fiche input[type="date"]:focus::-webkit-calendar-picker-indicator,
                      .cy-fiche input[type="time"]:focus::-webkit-calendar-picker-indicator {
                          opacity: 0.85;
                      }
                      /* Hover bord cohérent avec les selects */
                      .cy-fiche input[type="date"]:hover,
                      .cy-fiche input[type="time"]:hover {
                          border-color: rgba(176, 143, 77, 0.5);
                          background-color: #FCFAF3;
                      }

                      /* ===== Boutons ===== */
                      .cy-fiche input[type="submit"],
                      .cy-fiche input[type="button"] {
                          padding: 9px 20px;
                          background: var(--gold);
                          color: var(--navy);
                          border: none;
                          border-radius: 8px;
                          font-family: inherit;
                          font-weight: 700;
                          font-size: 13px;
                          cursor: pointer;
                          letter-spacing: .3px;
                          transition: background .12s, transform .06s;
                          margin: 8px 4px 8px 0;
                      }
                      .cy-fiche input[type="submit"]:hover,
                      .cy-fiche input[type="button"]:hover {
                          background: var(--gold-soft);
                      }
                      .cy-fiche input[type="submit"]:active,
                      .cy-fiche input[type="button"]:active {
                          transform: translateY(1px);
                      }

                      /* ===== Liens (HyperLink, LinkButton) ===== */
                      /* Liens actifs (avec href non-vide) : style lien clair, soulignement, hover gold */
                      .cy-fiche a[href]:not([href=""]):not([href="#"]) {
                          color: var(--navy-soft);
                          text-decoration: underline;
                          text-underline-offset: 2px;
                          font-weight: 500;
                          cursor: pointer;
                      }
                      .cy-fiche a[href]:not([href=""]):not([href="#"]):hover {
                          color: var(--gold);
                      }
                      /* Liens inactifs (sans href / href vide) : on les degrise pour signaler "non-cliquable" */
                      .cy-fiche a:not([href]),
                      .cy-fiche a[href=""],
                      .cy-fiche a[href="#"] {
                          color: var(--slate);
                          text-decoration: none;
                          font-weight: 500;
                          cursor: default;
                      }

                      /* ===== File upload — modern look aligné sur les selects (validé 2026-05-15) =====
                         Même border, radius, hover que les selects modernes : crée une famille
                         d'inputs visuellement homogène (text inputs, selects, file uploads). */
                      .cy-fiche input[type="file"] {
                          padding: 0;
                          background: white;
                          border: 1px solid rgba(15, 23, 42, 0.12);
                          border-radius: 8px;
                          font-size: 12px;
                          font-family: inherit;
                          color: var(--slate);
                          height: 36px;
                          box-sizing: border-box;
                          width: 100%;
                          line-height: 34px;
                          transition: border-color .14s, background-color .14s;
                          overflow: hidden;
                      }
                      .cy-fiche input[type="file"]:hover {
                          border-color: rgba(176, 143, 77, 0.5);
                          background-color: #FCFAF3;
                      }
                      .cy-fiche input[type="file"]::file-selector-button,
                      .cy-fiche input[type="file"]::-webkit-file-upload-button {
                          padding: 0 14px;
                          height: 100%;
                          background: var(--gold);
                          color: var(--navy);
                          border: none;
                          border-right: 1px solid var(--gold-soft);
                          font-family: inherit;
                          font-size: 12px;
                          font-weight: 600;
                          cursor: pointer;
                          margin-right: 10px;
                          transition: background .12s;
                      }
                      .cy-fiche input[type="file"]::file-selector-button:hover,
                      .cy-fiche input[type="file"]::-webkit-file-upload-button:hover {
                          background: var(--gold-soft);
                      }
                      .cy-fiche input[type="file"]:disabled {
                          background: var(--gray-100);
                          color: var(--gray-200);
                      }
                      .cy-fiche input[type="file"]:disabled::file-selector-button,
                      .cy-fiche input[type="file"]:disabled::-webkit-file-upload-button {
                          background: var(--gray-200);
                          color: var(--slate);
                          cursor: not-allowed;
                      }

                      /* ===== Form grid (etape 2.3) ===== */
                      .cy-fiche .cy-form-grid {
                          display: grid;
                          grid-template-columns: repeat(2, 1fr);
                          gap: 14px 22px;
                      }
                      .cy-fiche .cy-form-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
                      .cy-fiche .cy-form-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
                      .cy-fiche .cy-field {
                          display: flex;
                          flex-direction: column;
                          gap: 4px;
                          min-width: 0;
                      }
                      .cy-fiche .cy-field-wide { grid-column: 1 / -1; }
                      .cy-fiche .cy-field-narrow { max-width: 140px; }
                      .cy-fiche .cy-field > label {
                          font-size: 11px;
                          color: var(--slate);
                          text-transform: uppercase;
                          letter-spacing: .5px;
                          font-weight: 600;
                      }
                      .cy-fiche .cy-field > input,
                      .cy-fiche .cy-field > select {
                          margin: 0;
                          width: 100%;
                          box-sizing: border-box;
                          height: 36px;
                      }
                      /* Quand l'input est wrappé dans cy-inline-row (à cause d'un tooltip
                         ou pour la cohérence visuelle d'une grille), il perd la règle
                         .cy-field > input ci-dessus. On rattrape la hauteur ici pour que
                         tous les inputs/selects de formulaire restent harmonisés à 36px
                         quelle que soit la profondeur du wrapping. */
                      .cy-fiche .cy-inline-row > input[type="date"],
                      .cy-fiche .cy-inline-row > input[type="time"],
                      .cy-fiche .cy-inline-row > input[type="number"],
                      .cy-fiche .cy-inline-row > input:not([type]),
                      .cy-fiche .cy-inline-row > select {
                          height: 36px;
                          box-sizing: border-box;
                          padding: 7px 10px;
                      }
                      /* Largeur fixe pour les inputs date (sinon largeur native variable selon navigateur) */
                      .cy-fiche .cy-input-fixed { width: 170px !important; }
                      /* Largeur compacte pour les inputs time (cohérence visuelle multi-cellules) */
                      .cy-fiche .cy-inline-row > input[type="time"] { width: 110px; }

                      /* Wrapper iframe (PDF, page intégrée — ex : onglet CGV de commande.aspx) */
                      .cy-fiche .cy-card.cy-embed-card { padding: 0; overflow: hidden; }
                      .cy-fiche .cy-embed-iframe { width: 100%; height: calc(100vh - 220px); border: 0; display: block; }

                      /* Tooltip positionné en coin haut-droit de la card (à côté du h2 cy-card-title).
                         Utilisé quand un tooltip dépend du panel actif rendu par le .vb : on en met
                         un dans chaque panel mais ils s'affichent visuellement au même endroit. */
                      .cy-fiche .cy-card { position: relative; }
                      .cy-fiche .cy-tooltip-corner {
                          position: absolute;
                          top: 18px;
                          right: 18px;
                          z-index: 5;
                      }

                      /* Textarea pour l'édition inline dans un grid (EditItemTemplate).
                         Auto-resize en hauteur géré par JS au load et à l'input (cf. conciergya.js
                         ou snippet inline page). Bien plus lisible que la TextBox legacy width:95%. */
                      .cy-fiche .cy-edit-textarea {
                          width: 100%;
                          min-height: 60px;
                          padding: 8px 12px;
                          font-family: 'Inter', sans-serif;
                          font-size: 14px;
                          line-height: 1.4;
                          color: var(--navy);
                          background: white;
                          border: 1px solid var(--border);
                          border-radius: 6px;
                          resize: vertical;
                          overflow: hidden;
                          box-sizing: border-box;
                          transition: border-color 0.15s var(--t), box-shadow 0.15s var(--t);
                      }
                      .cy-fiche .cy-edit-textarea:focus {
                          outline: none;
                          border-color: var(--gold);
                          box-shadow: 0 0 0 3px rgba(201,169,101,.15);
                      }

                      /* FileUpload stylé : bouton "Choisir le fichier" en accents Conciergya
                         au lieu du rendu natif moche du browser. Le nom de fichier sélectionné
                         est tronqué proprement via max-width sur le wrapper. */
                      .cy-fiche input[type="file"] {
                          max-width: 100%;
                          font-family: 'Inter', sans-serif;
                          font-size: 12px;
                          color: var(--slate);
                      }
                      .cy-fiche input[type="file"]::file-selector-button {
                          margin-right: 10px;
                          padding: 6px 14px;
                          font-family: 'Inter', sans-serif;
                          font-size: 12px;
                          font-weight: 500;
                          color: white;
                          background: var(--gold);
                          border: 0;
                          border-radius: 6px;
                          cursor: pointer;
                          transition: background 0.15s var(--t);
                      }
                      .cy-fiche input[type="file"]::file-selector-button:hover {
                          background: var(--gold-dark);
                      }
                      /* Dans un grid (.cy-table), masquer le nom de fichier tronqué qui s'affiche
                         à droite du bouton "Choisir le fichier". Trick : font-size:0 sur l'input
                         cache le texte tronqué, mais ::file-selector-button restaure sa propre taille. */
                      .cy-fiche .cy-table input[type="file"] {
                          font-size: 0;
                          color: transparent;
                      }
                      .cy-fiche .cy-table input[type="file"]::file-selector-button {
                          font-size: 12px;
                          color: white;
                      }

                      /* Bouton icône (modifier / supprimer / monter / descendre dans les grids).
                         Pattern : <asp:LinkButton CssClass="cy-icon-btn"><svg .../></asp:LinkButton>
                         Réutilisable partout — remplace les ImageButton legacy avec ImageUrl PNG/JPG. */
                      .cy-fiche .cy-icon-btn {
                          display: inline-flex;
                          align-items: center;
                          justify-content: center;
                          width: 30px;
                          height: 30px;
                          padding: 0;
                          margin: 0 2px;
                          color: var(--slate);
                          background: transparent;
                          border: 1px solid transparent;
                          border-radius: 6px;
                          cursor: pointer;
                          text-decoration: none;
                          transition: all 0.15s var(--t);
                      }
                      .cy-fiche .cy-icon-btn:hover {
                          color: var(--navy);
                          background: var(--gold-pale);
                          border-color: var(--gold);
                      }
                      .cy-fiche .cy-icon-btn-danger:hover {
                          color: #b91c1c;
                          background: #fef2f2;
                          border-color: #fecaca;
                      }
                      .cy-fiche .cy-icon-btn svg { display: block; }
                      .cy-fiche .cy-field > textarea {
                          margin: 0;
                          width: 100%;
                          box-sizing: border-box;
                      }
                      /* Le RadioButtonList ASP.NET rend une <table> ; on aligne sa hauteur visuelle */
                      .cy-fiche .cy-field > table.radiobl,
                      .cy-fiche .cy-field > table {
                          margin: 0;
                          height: 36px;
                          border-collapse: collapse;
                      }
                      /* Alignement radio <-> libellé dans le RadioButtonList ASP.NET (rend <table><tr><td><input><label></td></tr>) */
                      .cy-fiche .radiobl td {
                          padding: 0 18px 0 0;
                          vertical-align: middle;
                          white-space: nowrap;
                      }
                      .cy-fiche .radiobl td:last-child { padding-right: 0; }
                      .cy-fiche .radiobl input[type="radio"] {
                          margin: 0 6px 0 0;
                          vertical-align: middle;
                          width: 14px;
                          height: 14px;
                          accent-color: var(--gold);
                          cursor: pointer;
                      }
                      .cy-fiche .radiobl label {
                          font-size: 13px;
                          color: var(--navy);
                          vertical-align: middle;
                          cursor: pointer;
                          line-height: 1;
                      }

                      /* ===== Cards (etape 2.2) ===== */
                      .cy-fiche .cy-card {
                          background: white;
                          border: 1px solid var(--gray-200);
                          border-radius: 10px;
                          padding: 14px 20px 16px;
                          margin-bottom: 8px;
                          box-shadow: var(--shadow);
                      }
                      .cy-fiche .cy-card h3 {
                          margin-top: 0;
                      }
                      /* Compteur a cote du titre (utilise pour Absences/Acomptes) */
                      .cy-fiche .cy-card h3 .cy-card-count {
                          font-family: 'Inter', sans-serif;
                          font-size: 11px;
                          font-weight: 400;
                          text-transform: none;
                          letter-spacing: 0;
                          margin-left: 8px;
                      }
                      /* Le HyperLink dans h3 conserve son style de lien (souligne si actif, sinon slate) */
                      .cy-fiche .cy-card h3 a[href]:not([href=""]):not([href="#"]) {
                          font-family: 'Inter', sans-serif;
                          letter-spacing: 1.2px;
                          text-transform: uppercase;
                      }
                      .cy-fiche .cy-card h3 a:not([href]),
                      .cy-fiche .cy-card h3 a[href=""],
                      .cy-fiche .cy-card h3 a[href="#"] {
                          color: var(--gold);
                          font-family: 'Inter', sans-serif;
                          font-weight: 700;
                          text-transform: uppercase;
                          letter-spacing: 1.2px;
                      }
                      /* ===== Doc tiles (etape 2.4) ===== */
                      .cy-fiche .cy-doc-grid {
                          display: grid;
                          grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
                          gap: 12px;
                          margin-top: 14px;
                      }
                      .cy-fiche .cy-doc-tile {
                          border: 1px dashed var(--gray-200);
                          border-radius: 8px;
                          padding: 14px 12px;
                          display: flex;
                          flex-direction: column;
                          align-items: center;
                          gap: 8px;
                          text-align: center;
                          transition: border-color .15s, background .15s;
                          min-height: 130px;
                          background: white;
                      }
                      .cy-fiche .cy-doc-tile:hover {
                          border-color: var(--gold);
                          background: var(--gray-50);
                      }
                      .cy-fiche .cy-doc-tile .cy-doc-icon {
                          width: 28px;
                          height: 28px;
                          color: var(--slate);
                          flex-shrink: 0;
                      }
                      .cy-fiche .cy-doc-tile .cy-doc-name {
                          font-size: 13px;
                          font-weight: 600;
                          color: var(--navy);
                          text-align: center;
                          text-decoration: none;
                      }
                      .cy-fiche .cy-doc-tile .cy-doc-name:hover {
                          color: var(--gold);
                          text-decoration: underline;
                      }
                      .cy-fiche .cy-doc-tile .cy-doc-action {
                          margin-top: auto;
                          cursor: pointer;
                          font-size: 11px;
                          color: var(--slate);
                          padding: 6px 8px;
                          border: 1px solid var(--gray-200);
                          border-radius: 4px;
                          background: white;
                          width: 100%;
                          box-sizing: border-box;
                          text-align: center;
                          transition: background .12s, color .12s, border-color .12s;
                          display: block;
                      }
                      .cy-fiche .cy-doc-tile .cy-doc-action:hover {
                          background: var(--gold);
                          color: var(--navy);
                          border-color: var(--gold);
                      }
                      /* "sr-only" : on cache l'input sans le desactiver (sinon le file picker peut ne pas s'ouvrir et le change event ne pas fire selon les navigateurs) */
                      .cy-fiche .cy-doc-tile .cy-doc-input {
                          position: absolute;
                          width: 1px;
                          height: 1px;
                          padding: 0;
                          margin: -1px;
                          overflow: hidden;
                          clip: rect(0, 0, 0, 0);
                          border: 0;
                          opacity: 0;
                      }
                      .cy-fiche .cy-doc-tile .cy-doc-filename {
                          font-size: 11px;
                          color: var(--success);
                          font-weight: 500;
                          word-break: break-all;
                          line-height: 1.3;
                          min-height: 14px;
                          margin-top: -4px;
                      }
                      .cy-fiche .cy-doc-tile.cy-doc-selected {
                          border-style: solid;
                          border-color: var(--success);
                          background: linear-gradient(180deg, rgba(46,139,94,.05), white);
                      }
                      .cy-fiche .cy-doc-tile.cy-doc-selected .cy-doc-action {
                          background: var(--success);
                          color: white;
                          border-color: var(--success);
                      }
                      .cy-fiche .cy-doc-tile.cy-doc-selected .cy-doc-action:hover {
                          background: var(--gold);
                          color: var(--navy);
                          border-color: var(--gold);
                      }
                      /* Etat "fichier deja uploade sur le serveur" (detecte par JS au load via href du HyperLink) */
                      .cy-fiche .cy-doc-tile.cy-doc-uploaded {
                          border-style: solid;
                          border-color: var(--success);
                          background: linear-gradient(180deg, rgba(46,139,94,.04), white);
                      }
                      .cy-fiche .cy-doc-tile.cy-doc-uploaded .cy-doc-icon {
                          color: var(--success);
                      }

                      /* Sub-cards (utilisees pour Absences CP/VM/AM/AT et Archives Acompte/Archives diverses) */
                      .cy-fiche .cy-sub-card {
                          background: white;
                          border: 1px solid var(--gray-200);
                          border-left: 4px solid var(--gold);
                          border-radius: 6px;
                          padding: 16px 20px;
                          margin-bottom: 14px;
                      }
                      .cy-fiche .cy-sub-card .cy-sub-card-title {
                          margin: 0 0 12px 0;
                          font-size: 17px;
                          font-weight: 600;
                          color: var(--navy);
                          font-family: 'Fraunces', serif;
                          display: flex;
                          align-items: baseline;
                          gap: 10px;
                          flex-wrap: wrap;
                      }
                      .cy-fiche .cy-sub-card .cy-sub-card-title .cy-sub-count {
                          font-family: 'Inter', sans-serif;
                          font-size: 12px;
                          color: var(--slate);
                          font-weight: 400;
                      }

                      .cy-fiche .cy-action-bar {
                          display: flex;
                          justify-content: flex-start;
                          padding: 0;
                          margin-top: 6px;
                          margin-bottom: 28px;
                      }
                      /* Boutons d'action homogenes (override Font-Size/Font-Bold inline d'ASP.NET) */
                      .cy-fiche .cy-action-bar input[type="submit"],
                      .cy-fiche .cy-action-bar input[type="button"] {
                          min-width: 260px;
                          height: 42px !important;
                          font-family: inherit !important;
                          font-size: 13px !important;
                          font-weight: 700 !important;
                          margin: 0;
                          text-align: center;
                      }

                      /* ===== Header riche (avatar + nom + statut, sticky) ===== */
                      .cy-fiche .cy-header {
                          background: white;
                          border-bottom: 1px solid var(--gray-200);
                          padding: 14px 24px;
                          display: flex;
                          align-items: center;
                          gap: 18px;
                          position: sticky;
                          top: 0;
                          z-index: 20;
                          margin: 0;
                          box-shadow: 0 1px 0 rgba(14,42,77,.04);
                      }
                      .cy-fiche .cy-back-btn {
                          width: 36px; height: 36px;
                          border-radius: 8px;
                          border: 1px solid var(--gray-200);
                          background: white;
                          cursor: pointer;
                          color: var(--slate);
                          font-size: 18px;
                          display: inline-flex; align-items: center; justify-content: center;
                          flex-shrink: 0;
                          font-family: inherit;
                          padding: 0;
                          margin: 0;
                          height: 36px !important;
                          min-width: 0;
                      }
                      .cy-fiche .cy-back-btn:hover { background: var(--gray-100) !important; }
                      .cy-fiche .cy-avatar {
                          width: 44px; height: 44px;
                          border-radius: 50%;
                          background: linear-gradient(135deg, var(--navy), var(--navy-soft));
                          color: white;
                          display: inline-flex; align-items: center; justify-content: center;
                          font-weight: 600; font-size: 15px; letter-spacing: .5px;
                          flex-shrink: 0;
                          font-family: 'Inter', sans-serif;
                      }
                      .cy-fiche .cy-header-info {
                          display: flex;
                          flex-direction: column;
                          flex: 1;
                          min-width: 0;
                      }
                      .cy-fiche .cy-header-name {
                          font-family: 'Fraunces', serif;
                          font-size: 22px;
                          font-weight: 600;
                          line-height: 1.1;
                          color: var(--navy);
                      }
                      .cy-fiche .cy-header-role {
                          color: var(--slate);
                          font-weight: 400;
                          font-size: 14px;
                          font-style: italic;
                          font-family: 'Fraunces', serif;
                      }
                      .cy-fiche .cy-header-status {
                          display: inline-flex;
                          align-items: center;
                          gap: 6px;
                          font-size: 12px;
                          color: var(--slate);
                          margin-top: 3px;
                          font-family: 'Inter', sans-serif;
                      }
                      .cy-fiche .cy-status-dot {
                          width: 8px; height: 8px;
                          border-radius: 50%;
                          background: var(--success);
                      }
                      .cy-fiche .cy-note-client {
                          color: var(--gold);
                          font-weight: 500;
                          font-size: 12px;
                          letter-spacing: 1px;
                          margin-left: 10px;
                          padding-left: 10px;
                          border-left: 1px solid var(--gray-200);
                      }
                      .cy-fiche .cy-note-client:empty { display: none; }
                      /* 3 selecteurs employe dans le header (toujours a droite, meme quand l'info gauche est cache) */
                      .cy-fiche .cy-header-selectors {
                          display: flex;
                          gap: 10px;
                          flex-shrink: 0;
                          align-items: flex-end;
                          margin-left: auto;
                      }
                      .cy-fiche .cy-header-selector {
                          display: flex;
                          flex-direction: column;
                          gap: 3px;
                          min-width: 0;
                      }
                      .cy-fiche .cy-header-selector > label {
                          font-size: 10px;
                          color: var(--slate);
                          text-transform: uppercase;
                          letter-spacing: .5px;
                          font-weight: 600;
                          white-space: nowrap;
                      }
                      .cy-fiche .cy-header-selector > select {
                          height: 32px !important;
                          padding: 4px 8px;
                          font-size: 12px;
                          margin: 0;
                          max-width: 180px;
                      }
                      .cy-fiche .cy-hidden-input { display: none !important; }

                      /* ===== Toolbar haut (selecteurs employe + contrat) ===== */
                      .cy-toolbar {
                          display: grid;
                          grid-template-columns: 1fr 1fr;
                          gap: 18px;
                          background: white;
                          border: 1px solid #dde1e8;
                          border-radius: 8px;
                          padding: 14px 18px;
                          margin-bottom: 16px;
                      }
                      .cy-toolbar .cy-toolbar-block { min-width: 0; }
                      .cy-toolbar .cy-toolbar-block + .cy-toolbar-block {
                          border-left: 1px solid #dde1e8;
                          padding-left: 18px;
                      }
                      .cy-toolbar h3 {
                          margin: 0 0 8px 0;
                          font-size: 13px;
                          color: #4a5867;
                          text-transform: uppercase;
                          letter-spacing: .8px;
                      }
                      .cy-layout {
                          display: flex;
                          align-items: flex-start;
                          gap: 0;
                          margin-top: 0;
                      }
                      .cy-fiche .cy-sidebar { width: 220px; flex-shrink: 0; }
                      .cy-fiche .cy-content { flex: 1; min-width: 0; }
                      /* Sidebar fixe : vraiment immobile en bas du header, ne bouge jamais avec le scroll.
                         Tient compte du brand bar sticky en haut (48px) ajouté en mai 2026 — sans
                         cette compensation, le premier onglet de la sidebar passe sous le header. */
                      .cy-sidebar {
                          background: #FFFFFF;
                          padding: 0;
                          position: fixed;
                          top: calc(var(--cy-brand-bar-h, 48px) + var(--cy-header-h, 76px));
                          left: 0;
                          width: 220px;
                          height: calc(100vh - var(--cy-brand-bar-h, 48px) - var(--cy-header-h, 76px));
                          z-index: 10;
                          margin: 0;
                          overflow-y: auto;
                          border-right: 1px solid var(--border-soft, #F1F0EC);
                          box-shadow: 1px 0 2px rgba(15,23,42,0.03);
                      }
                      /* Le content compense la sidebar fixe par un margin-left */
                      .cy-fiche .cy-content { margin-left: 220px; }
                      .cy-sidebar .cy-nav-item {
                          display: block;
                          padding: 10px 18px;
                          color: #4a5867;
                          text-decoration: none;
                          border-left: 3px solid transparent;
                          font-weight: 500;
                          font-family: inherit;
                          cursor: pointer;
                      }
                      .cy-sidebar .cy-nav-item:hover {
                          background: #f7f8fa;
                          color: #0e2a4d;
                      }
                      .cy-sidebar .cy-nav-item.active {
                          color: #0e2a4d;
                          background: linear-gradient(90deg, rgba(201,169,101,.14), transparent);
                          border-left-color: #c9a965;
                          font-weight: 600;
                      }
                      .cy-content {
                          min-width: 0;
                          background: var(--gray-50);
                          padding: 18px 22px;
                      }
                      .cy-fiche .cy-layout { background: var(--gray-50); }
                      .cy-section { display: none; }
                      .cy-section.active { display: block; }


/* === TABLE / GRIDVIEW ===
   NB : on évite overflow:hidden ici, sinon les tooltips qui dépassent les bords
   du tableau (ex. preview photo) seraient clippés. À la place, on rapatrie les
   coins arrondis directement sur le thead (cf. règle thead th plus bas). */
.cy-fiche .cy-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    border: 1px solid var(--border);
    border-radius: 10px;
    margin: 8px 0 12px;
    box-shadow: var(--shadow);
    font-size: 13px;
}
.cy-fiche .cy-table th {
    background: var(--gold-pale);
    color: var(--navy);
    font-weight: 500;
    text-align: left;
    vertical-align: middle;
    padding: 11px 14px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--border);
}
/* Coins arrondis du tableau : appliqués sur le premier/dernier th du header,
   et sur les td correspondants de la dernière row si pas de footer.
   Compense le retrait de overflow:hidden du parent (cf. .cy-fiche .cy-table). */
.cy-fiche .cy-table > tbody > tr:first-child > th:first-child,
.cy-fiche .cy-table > thead > tr:first-child > th:first-child {
    border-top-left-radius: 10px;
}
.cy-fiche .cy-table > tbody > tr:first-child > th:last-child,
.cy-fiche .cy-table > thead > tr:first-child > th:last-child {
    border-top-right-radius: 10px;
}
.cy-fiche .cy-table > tbody > tr:last-child > td:first-child {
    border-bottom-left-radius: 10px;
}
.cy-fiche .cy-table > tbody > tr:last-child > td:last-child {
    border-bottom-right-radius: 10px;
}
/* Rattrape les <th align="center"> rendus par <HeaderStyle HorizontalAlign="Center" />
   que les navigateurs modernes ignorent au profit du text-align CSS. */
.cy-fiche .cy-table th[align="center"] { text-align: center; }
.cy-fiche .cy-table th[align="right"]  { text-align: right; }
.cy-fiche .cy-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-soft);
    color: var(--navy);
    vertical-align: middle;
}
.cy-fiche .cy-table tr:last-child td { border-bottom: none; }
.cy-fiche .cy-table tr:hover td { background: var(--bg); }
.cy-fiche .cy-table input[type="image"] { width: 22px; height: 22px; cursor: pointer; }

/* Colonne Actions des grids (icônes Corriger/Ignorer/Supprimer).
   - width:1% : la colonne se rétrécit au strict minimum, les autres prennent le reste
   - white-space:nowrap : empêche les icônes de passer à la ligne quand l'écran rétrécit
   - text-align:right : aligne les boutons à droite
   - padding réduit pour densité icônes
   En cas d'écran très étroit, ce sont les colonnes longues (ex: Prestation)
   qui wrap, jamais Actions. */
.cy-fiche .cy-table th.cy-table-actions,
.cy-fiche .cy-table td.cy-table-actions {
    width: 1%;
    white-space: nowrap;
    text-align: right;
    padding-left: 8px;
    padding-right: 8px;
}

/* === GRID DESIGN 2026-05-14 — chips & avatars colorés (cf. feedback_design_avatar_metier.md) === */

/* Cadence chip — rend la fréquence d'une tâche en pastille color-coded.
   Classes appliquées via Eval("cadence") dans l'ItemTemplate du GridView. */
.cy-fiche .cy-cadence-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
    white-space: nowrap;
    line-height: 1.4;
}
.cy-fiche .cy-cadence-0 { background: #D1FAE5; color: #065F46; }  /* À chaque intervention — vert */
.cy-fiche .cy-cadence-1 { background: #FEF3C7; color: #854F0B; }  /* 1 fois sur 2 semaine impaire — ambre */
.cy-fiche .cy-cadence-2 { background: #FEF3C7; color: #854F0B; }  /* 1 fois sur 2 semaine paire — ambre */
.cy-fiche .cy-cadence-3 { background: #FBF6E8; color: #B08F4D; }  /* 1 fois par mois — gold */
.cy-fiche .cy-cadence-4 { background: #FBF6E8; color: #B08F4D; }  /* 1 fois tous les 3 mois — gold */
.cy-fiche .cy-cadence-5 { background: #F1F5F9; color: #64748B; }  /* 1 fois tous les 6 mois — slate */
.cy-fiche .cy-cadence-6 { background: #F1F5F9; color: #64748B; }  /* 1 fois par an — slate */

/* Chip Oui/Non générique — pour toute colonne booléenne (ex : Fiche habituelle Oui/Non,
   prestation acceptée, etc.). Convention : la valeur INT (0/1) est concaténée au nom de
   classe via Eval(field, "cy-yesno-chip cy-yesno-{0}"). */
.cy-fiche .cy-yesno-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}
.cy-fiche .cy-yesno-1 { background: #D1FAE5; color: #065F46; }  /* Oui / true / 1 — vert */
.cy-fiche .cy-yesno-0 { background: #F1F5F9; color: #64748B; }  /* Non / false / 0 — slate neutre */

/* ===== Cellule Service riche dans les grids (mockup planning 2026-05-15) =====
   Structure HTML attendue :
     <div class="cy-service-cell">
       <div class="cy-service-row">
         <span class="cy-metier-avatar cy-metier-{key}">P</span>
         <div class="cy-service-text">
           <div class="cy-service-metier">Agent de propreté</div>
           <span class="cy-prest-chip cy-prest-{key}">Ménage</span>
         </div>
       </div>
       <div class="cy-service-consigne">Texte consigne du jour...</div>  ← optionnel
     </div>
   Le {key} vient du SQL CASE (slug : prop, liv, jard, concierge, accueil, vitre, secu, tech, default). */

.cy-fiche .cy-service-cell {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 320px;
}
.cy-fiche .cy-service-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cy-fiche .cy-metier-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    color: white;
    font-size: 18px;
    line-height: 1;
}
.cy-fiche .cy-metier-avatar i {
    line-height: 1;
}
.cy-fiche .cy-service-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.cy-fiche .cy-service-metier {
    font-weight: 500;
    color: var(--navy);
    line-height: 1.25;
    font-size: 13px;
}
.cy-fiche .cy-prest-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    width: fit-content;
}
.cy-fiche .cy-service-consigne {
    font-size: 12px;
    color: #64748B;
    font-style: italic;
    line-height: 1.4;
    margin-left: 42px;  /* aligne sous le texte du métier, après l'avatar 32px + gap 10px */
}

/* Couleurs + icônes par famille de métier — slugs en SQL CASE.
   Avatar : background solide vif + icône Tabler inline (SVG data URL, stroke blanc).
   Chip prestation : background pastel + texte foncé même teinte.
   Icônes choisies pour REPRÉSENTER LE MÉTIER, pas la prestation (cf. feedback_design_avatar_metier.md). */

/* Couleurs de fond par famille de métier — l'icône Tabler arrive du <i class="ti ti-X">
   injecté dans le span avatar côté ASPX (cf. metier_icon depuis SQL). */
.cy-fiche .cy-metier-prop      { background-color: #3B82F6; }
.cy-fiche .cy-prest-prop       { background: #DBEAFE; color: #1D4ED8; }
.cy-fiche .cy-metier-liv       { background-color: #EC4899; }
.cy-fiche .cy-prest-liv        { background: #FCE7F3; color: #9D174D; }
.cy-fiche .cy-metier-jard      { background-color: #10B981; }
.cy-fiche .cy-prest-jard       { background: #D1FAE5; color: #065F46; }
.cy-fiche .cy-metier-concierge { background-color: #B08F4D; }
.cy-fiche .cy-prest-concierge  { background: #FEF3C7; color: #92400E; }
.cy-fiche .cy-metier-accueil   { background-color: #06B6D4; }
.cy-fiche .cy-prest-accueil    { background: #CFFAFE; color: #0E7490; }
.cy-fiche .cy-metier-vitre     { background-color: #0EA5E9; }
.cy-fiche .cy-prest-vitre      { background: #E0F2FE; color: #075985; }
.cy-fiche .cy-metier-secu      { background-color: #64748B; }
.cy-fiche .cy-prest-secu       { background: #F1F5F9; color: #334155; }
.cy-fiche .cy-metier-tech      { background-color: #F59E0B; }
.cy-fiche .cy-prest-tech       { background: #FEF3C7; color: #854F0B; }
.cy-fiche .cy-metier-admin     { background-color: #4F46E5; }
.cy-fiche .cy-prest-admin      { background: #E0E7FF; color: #3730A3; }
.cy-fiche .cy-metier-gouv      { background-color: #8B5CF6; }
.cy-fiche .cy-prest-gouv       { background: #EDE9FE; color: #5B21B6; }
.cy-fiche .cy-metier-default   { background-color: #94A3B8; }
.cy-fiche .cy-prest-default    { background: #F1F5F9; color: #64748B; }

/* Quand / Date limite chip — sous la date prévue dans la colonne Quand */
.cy-fiche .cy-when-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}
.cy-fiche .cy-when-date {
    font-weight: 500;
    color: var(--navy);
    line-height: 1.25;
    white-space: nowrap;
}
/* Variante sur cellule entière (BoundField) pour cgv.aspx où on ne peut pas
   wrapper la valeur dans un <span> (le .vb lit row.Cells(6).Text). */
.cy-fiche td.cy-when-date-cell {
    font-style: italic;
    color: var(--slate-2);
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
}
.cy-fiche .cy-when-limite {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    background: #FEF3C7;
    color: #D97706;
    white-space: nowrap;
}
.cy-fiche .cy-when-limite svg { width: 11px; height: 11px; flex-shrink: 0; }

/* Horaire monospace */
.cy-fiche .cy-horaire {
    font-family: 'JetBrains Mono', SFMono-Regular, ui-monospace, monospace;
    font-size: 12.5px;
    color: var(--navy);
    white-space: nowrap;
}

/* Photo thumbnail rond — utilisé dans les grids (ex. check_list).
   Sur Image control ASP.NET : ajouter CssClass="cy-photo-thumb" et Width="32px". */
.cy-fiche .cy-photo-thumb {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50%;
    object-fit: cover;
    border: 0.5px solid rgba(15, 23, 42, 0.12);
    vertical-align: middle;
}
/* Masque le placeholder rond vide quand le src ne pointe pas vers un fichier image valide
   (ex. : checklist.photo NULL côté DB → src = "" ou "/personnel/modele/" sans filename).
   Le ":not([src$=...])" en cascade ne matche QUE les <img> avec une vraie extension d'image. */
.cy-fiche .cy-photo-thumb:not([src$=".jpg" i]):not([src$=".jpeg" i]):not([src$=".png" i]):not([src$=".heic" i]):not([src$=".webp" i]) {
    display: none;
}

/* Action group dans les grids — consolide plusieurs LinkButton SVG en une seule colonne.
   Le séparateur ".cy-action-divider" sépare les groupes fonctionnels (ex: réordonner | éditer). */
.cy-fiche .cy-action-group {
    display: inline-flex;
    gap: 1px;
    align-items: center;
    justify-content: center;
}
.cy-fiche .cy-action-divider {
    display: inline-block;
    width: 1px;
    height: 18px;
    background: rgba(15, 23, 42, 0.10);
    margin: 0 5px;
}
/* Bouton kebab ⋮ — UNIQUEMENT visible sur mobile (cf. @media plus bas).
   Sur desktop, les actions sont déjà toutes visibles dans .cy-action-group. */
.cy-fiche .cy-kebab-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0.5px solid rgba(15, 23, 42, 0.10);
    border-radius: 8px;
    background: white;
    color: var(--slate, #5F5E5A);
    cursor: pointer;
    transition: background 100ms ease;
}
.cy-fiche .cy-kebab-btn:hover {
    background: var(--bg, #FAFAF7);
}
.cy-fiche .cy-kebab-btn i { font-size: 18px; }

/* =========================================================================
   Cards Absence / Présence (controle_presence.aspx — Option A validée).
   Card par ligne avec border-left rouge (absences) ou vert (présences),
   avatar circulaire à gauche, bloc info au centre, bouton d'appel à droite.
   Pour les absences, séparateur pointillé + bloc client / gestionnaire
   en dessous avec son propre bouton d'appel.
   ========================================================================= */
.cy-presence-card {
    background: #FFFFFF;
    border: 0.5px solid rgba(15, 27, 60, 0.10);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 10px;
}
.cy-presence-card-absent {
    border-left: 4px solid #DC2626;
}
.cy-presence-card-present {
    border-left: 4px solid #16A34A;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
}

/* Avatar circulaire pastel */
.cy-presence-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
}
.cy-presence-avatar-absent {
    background: #FCE7E7;
    color: #A22D2D;
}
.cy-presence-avatar-present {
    width: 32px;
    height: 32px;
    background: #D1FADF;
    color: #0E7C44;
}

/* Bloc head (avatar + info + bouton intervenant) */
.cy-presence-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.cy-presence-info {
    flex: 1;
    min-width: 0;
}
.cy-presence-nom {
    font-size: 14px;
    font-weight: 500;
    color: var(--navy, #0F1B3C);
    line-height: 1.4;
}
.cy-presence-meta {
    font-size: 12px;
    color: var(--slate, #6B6F7E);
    margin-top: 2px;
    line-height: 1.4;
}
.cy-presence-statut {
    font-size: 11px;
    font-weight: 500;
    margin-top: 4px;
}
.cy-presence-statut-absent { color: #DC2626; }

/* Séparateur pointillé entre intervenant et client */
.cy-presence-sep {
    margin: 10px 0;
    border-top: 0.5px dashed rgba(15, 27, 60, 0.15);
}

/* Bloc client/gestionnaire */
.cy-presence-client {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cy-presence-client > i {
    font-size: 18px;
    color: var(--slate, #6B6F7E);
    flex-shrink: 0;
}
.cy-presence-client-info {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    line-height: 1.5;
}
.cy-presence-client-row {
    color: var(--slate, #6B6F7E);
}
.cy-presence-client-row span,
.cy-presence-client-row strong {
    color: var(--navy, #0F1B3C);
    font-weight: 400;
}
.cy-presence-client-row strong {
    font-weight: 500;
}

/* Bouton d'appel — primaire (intervenant, gold soft) et secondaire (gestionnaire, blanc bordé) */
.cy-call-btn-primary {
    background: #F5EBD3;
    color: #8B6F2E;
}
.cy-call-btn-primary:hover,
.cy-call-btn-primary:focus-visible {
    background: var(--gold, #C8A458);
    color: #FFFFFF;
}
.cy-call-btn-secondary {
    background: #FFFFFF;
    color: var(--navy, #0F1B3C);
    border: 0.5px solid rgba(15, 27, 60, 0.15);
}
.cy-call-btn-secondary:hover,
.cy-call-btn-secondary:focus-visible {
    background: rgba(15, 27, 60, 0.04);
    color: var(--navy, #0F1B3C);
}

/* Présence : ligne info compacte */
.cy-presence-line {
    font-size: 14px;
    color: var(--navy, #0F1B3C);
    line-height: 1.4;
}
.cy-presence-line strong { font-weight: 500; }
.cy-presence-sep-dot { color: var(--slate, #6B6F7E); margin: 0 4px; }
.cy-presence-adresse { color: var(--slate, #6B6F7E); font-weight: 400; }

/* Chip heure de pointage */
.cy-presence-chip {
    font-size: 12px;
    font-weight: 500;
    color: #0E7C44;
    padding: 4px 10px;
    border-radius: 8px;
    background: #F0FDF4;
    flex-shrink: 0;
}

/* Responsive mobile : compactage léger des paddings */
@media (max-width: 600px) {
    .cy-presence-card { padding: 12px; }
    .cy-presence-meta { font-size: 11px; }
    .cy-presence-client-info { font-size: 11px; }
}

/* =========================================================================
   commande_admin.aspx — refonte cards (tabs + Besoin + À commander + Livraisons)
   Pattern inspiré de cy-planning-card (planning_admin.aspx).
   Onglets : cy-planning-view-tabs (segmented control).
   ========================================================================= */

/* Badge compteur dans les onglets cy-planning-view-tab */
.cy-fiche .cy-planning-view-tab .cy-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    margin-left: 6px;
    border-radius: 999px;
    background: #E24B4A;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 600;
}
.cy-fiche .cy-planning-view-tab .cy-tab-badge-neutral {
    background: rgba(15, 27, 60, 0.10);
    color: #0F1B3C;
}
.cy-fiche .cy-planning-view-tab.is-active .cy-tab-badge-neutral {
    background: rgba(255, 255, 255, 0.20);
    color: #FFFFFF;
}

/* Layout sans sidebar (commande_admin.aspx) — content prend toute la largeur */
.cy-fiche .cy-layout-no-sidebar {
    display: block;
}
.cy-fiche .cy-layout-no-sidebar .cy-content {
    margin-left: 0;
    padding: 24px 32px 60px;
}

/* ============ MOBILE (<600px) pour commande_admin.aspx ============
   Tailles confortables pour tactile (≥44px hauteur cliquable, font ≥14px). */
@media (max-width: 600px) {
    .cy-fiche .cy-layout-no-sidebar .cy-content { padding: 16px 14px 60px; }
    .cy-fiche .cy-layout-no-sidebar .cy-card { padding: 18px 16px 20px; }
    .cy-fiche .cy-layout-no-sidebar .cy-card-title {
        font-size: 17px;
        margin-bottom: 14px;
    }

    /* Tabs : assez gros pour être tappables, font lisible */
    .cy-fiche .cy-planning-view-tabs { padding: 4px; gap: 2px; }
    .cy-fiche .cy-planning-view-tab {
        padding: 10px 8px;
        font-size: 13px;
        gap: 5px;
    }
    .cy-fiche .cy-planning-view-tab > i { font-size: 15px; }
    .cy-fiche .cy-planning-view-tab .cy-tab-badge,
    .cy-fiche .cy-planning-view-tab .cy-tab-badge-neutral {
        min-width: 18px;
        height: 18px;
        font-size: 11px;
        padding: 0 6px;
        margin-left: 4px;
    }

    /* Section Besoin : 1 card par ligne */
    .cy-fiche .cy-besoin-grid { grid-template-columns: 1fr; }
    .cy-fiche .cy-besoin-card { padding: 16px; }
    .cy-fiche .cy-besoin-desig { font-size: 16px; }
    .cy-fiche .cy-besoin-meta { font-size: 13px; gap: 12px; }
    .cy-fiche .cy-besoin-validation-pill { font-size: 14px; padding: 10px; }
    .cy-fiche .cy-besoin-delete { width: 42px; height: 42px; }

    /* Section À commander : tailles confortables, footer en colonne */
    .cy-fiche .cy-commander-card { margin-bottom: 12px; }
    .cy-fiche .cy-commander-frs-head {
        padding: 14px 16px;
        gap: 10px;
        flex-wrap: wrap;
    }
    .cy-fiche .cy-commander-frs-name { font-size: 16px; }
    .cy-fiche .cy-commander-frs-count {
        font-size: 12px;
        padding: 3px 8px;
    }
    .cy-fiche .cy-commander-row {
        padding: 14px 16px;
        gap: 10px;
    }
    .cy-fiche .cy-commander-desig { font-size: 15px; }
    .cy-fiche .cy-commander-ref { font-size: 12px; margin-top: 3px; }
    .cy-fiche .cy-commander-qty {
        padding: 5px 12px;
        font-size: 14px;
    }
    .cy-fiche .cy-commander-frs-footer {
        padding: 14px 16px;
        flex-direction: column;
        gap: 8px;
    }
    .cy-fiche .cy-commander-frs-send,
    .cy-fiche .cy-commander-frs-print {
        width: 100%;
        justify-content: center;
        padding: 12px;
        font-size: 15px;
    }
    .cy-fiche .cy-commander-frs-send span,
    .cy-fiche .cy-commander-frs-print span {
        display: inline;
    }
    .cy-fiche .cy-commander-frs-send i,
    .cy-fiche .cy-commander-frs-print i {
        font-size: 16px;
    }

    /* Section Livraisons : items lisibles et boutons tappables */
    .cy-fiche .cy-livraison-row {
        flex-wrap: wrap;
        gap: 10px;
        padding: 14px 16px;
    }
    .cy-fiche .cy-livraison-avatar {
        width: 38px;
        height: 38px;
        font-size: 18px;
    }
    .cy-fiche .cy-livraison-info {
        flex-basis: calc(100% - 48px);
    }
    .cy-fiche .cy-livraison-desig { font-size: 15px; }
    .cy-fiche .cy-livraison-meta { font-size: 12px; }
    .cy-fiche .cy-livraison-btn {
        flex: 1;
        padding: 12px;
        font-size: 14px;
    }
    .cy-fiche .cy-livraison-btn i { font-size: 16px; }
}

/* ============ BESOIN — megacards "Sites" / "Personnels" ============ */
.cy-fiche .cy-besoin-megacard {
    background: #FFFFFF;
    border: 0.5px solid rgba(15, 27, 60, 0.10);
    border-radius: 14px;
    padding: 18px 16px;
    margin-bottom: 18px;
}
.cy-fiche .cy-besoin-megacard-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(200, 164, 88, 0.30);
}
.cy-fiche .cy-besoin-megacard-head > i {
    color: var(--navy, #0F1B3C);
    font-size: 20px;
}
.cy-fiche .cy-besoin-megacard-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 18px;
    font-weight: 500;
    color: var(--navy, #0F1B3C);
    margin: 0;
}
.cy-fiche .cy-besoin-megacard-personnels .cy-besoin-megacard-head > i { color: #1E40AF; }
.cy-fiche .cy-besoin-megacard-personnels .cy-besoin-megacard-head {
    border-bottom-color: rgba(30, 64, 175, 0.30);
}

/* ============ LIVRAISONS — toggle iOS Livré + bouton X Non livré ============ */
.cy-fiche .cy-livraison-row-grp { position: relative; }
/* Pas de couleur de fond sur la row, juste un badge subtil pour l'état */

/* Switch "Non livré ⇄ Livré" : labels gris/vert autour du toggle iOS */
.cy-fiche .cy-livraison-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.cy-fiche .cy-livraison-switch-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--slate, #6B6F7E);
    transition: color 140ms ease;
    white-space: nowrap;
}
/* État OFF (gris/non livré actif) : label "Non livré" en gras rouge */
.cy-fiche .cy-livraison-row-grp:not(.is-livre) .cy-livraison-switch-label-non {
    color: #991B1B;
    font-weight: 600;
}
/* État ON (vert/livré actif) : label "Livré" en gras vert */
.cy-fiche .cy-livraison-row-grp.is-livre .cy-livraison-switch-label-livre {
    color: #0E7C44;
    font-weight: 600;
}

/* Variant toggle pour la couleur ON (vert au lieu de navy par défaut Besoin) */
.cy-fiche .cy-livraison-toggle-livre-only .cy-besoin-toggle-cb:checked + .cy-besoin-toggle-track {
    background: #0E7C44;
}

.cy-fiche .cy-besoin-qty-static {
    background: #F5EBD3;
    color: #8B6F2E;
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    flex-shrink: 0;
    white-space: nowrap;
}

.cy-fiche .cy-livraison-toggle {
    cursor: pointer;
    flex-shrink: 0;
}
.cy-fiche .cy-livraison-toggle-cb { display: none !important; }
.cy-fiche .cy-livraison-toggle-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    transition: all 140ms ease;
    border: 0.5px solid transparent;
}
.cy-fiche .cy-livraison-toggle-pill i { font-size: 14px; }

/* Livré : pill vert pâle par défaut, plein vert quand coché */
.cy-fiche .cy-livraison-toggle-livre .cy-livraison-toggle-pill {
    background: rgba(14, 124, 68, 0.10);
    color: #0E7C44;
}
.cy-fiche .cy-livraison-toggle-livre .cy-livraison-toggle-cb:checked + .cy-livraison-toggle-pill {
    background: #0E7C44;
    color: #FFFFFF;
}

/* Non livré : pill rouge pâle par défaut, plein rouge quand coché */
.cy-fiche .cy-livraison-toggle-non .cy-livraison-toggle-pill {
    background: rgba(177, 66, 66, 0.08);
    color: #991B1B;
}
.cy-fiche .cy-livraison-toggle-non .cy-livraison-toggle-cb:checked + .cy-livraison-toggle-pill {
    background: #991B1B;
    color: #FFFFFF;
}

/* Footer de sous-card avec bouton Valider à droite */
.cy-fiche .cy-livraison-grp-footer {
    display: flex;
    justify-content: flex-end;
    padding: 12px 16px;
    background: rgba(15, 27, 60, 0.02);
}
.cy-fiche .cy-livraison-grp-valider,
.cy-fiche .cy-livraison-grp-valider:link,
.cy-fiche .cy-livraison-grp-valider:visited {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 999px;
    background: #C8A458;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: background 140ms ease;
}
.cy-fiche .cy-livraison-grp-valider:hover { background: #8B6F2E; color: #FFFFFF; }

@media (max-width: 600px) {
    .cy-fiche .cy-livraison-row-grp { flex-wrap: wrap; gap: 8px; }
    .cy-fiche .cy-livraison-row-grp .cy-besoin-row-info { flex-basis: 100%; }
    .cy-fiche .cy-livraison-toggle { flex: 1; }
    .cy-fiche .cy-livraison-toggle-pill { width: 100%; justify-content: center; padding: 10px; font-size: 13px; }
}
/* Marges réduites pour les card-grp et effet-grp à l'intérieur d'une megacard */
.cy-fiche .cy-besoin-megacard .cy-besoin-card-grp:last-child,
.cy-fiche .cy-besoin-megacard .cy-besoin-effet-grp:last-child {
    margin-bottom: 0;
}
.cy-fiche .cy-besoin-card-grp {
    background: #FFFFFF;
    border: 0.5px solid rgba(15, 27, 60, 0.10);
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
}
/* Effets : pas de card avec bordure/fond — juste un header + lignes flottantes.
   Le wrap reste utile pour le margin-bottom et pour scoper le grouping. */
.cy-fiche .cy-besoin-effet-grp {
    margin-bottom: 18px;
}
.cy-fiche .cy-besoin-effet-grp .cy-besoin-site-head {
    background: transparent;
    border-bottom: 0.5px solid rgba(15, 27, 60, 0.15);
    padding: 8px 4px;
}
.cy-fiche .cy-besoin-effet-grp .cy-besoin-site-head > i { color: #1E40AF; }
.cy-fiche .cy-besoin-effet-grp .cy-besoin-row {
    padding-left: 4px;
    padding-right: 4px;
    border-bottom: 0.5px solid rgba(15, 27, 60, 0.06);
}
.cy-fiche .cy-besoin-site-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #FFF9EE;
    border-bottom: 2px solid #C8A458;
}
.cy-fiche .cy-besoin-site-head > i {
    color: #8B6F2E;
    font-size: 18px;
}
.cy-fiche .cy-besoin-site-name {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--navy, #0F1B3C);
}
.cy-fiche .cy-besoin-site-count {
    margin-left: auto;
    background: rgba(15, 27, 60, 0.08);
    color: var(--navy, #0F1B3C);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}
.cy-fiche .cy-besoin-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 0.5px solid rgba(15, 27, 60, 0.08);
    position: relative;
}
.cy-fiche .cy-besoin-row:last-child { border-bottom: 0; }
.cy-fiche .cy-besoin-row-info { flex: 1; min-width: 0; }
.cy-fiche .cy-besoin-row-desig {
    font-size: 14px;
    color: var(--navy, #0F1B3C);
    line-height: 1.4;
}
.cy-fiche .cy-besoin-row-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--slate, #6B6F7E);
    margin-top: 3px;
}
/* Badge "accepté" en haut à droite quand le toggle est ON.
   Apparaît pour tous types de lignes (sites ET effets). Pas de fond vert
   sur la row pour rester sobre. */
.cy-fiche .cy-besoin-row.is-marked::after {
    content: "✓ Validé";
    position: absolute;
    top: 6px;
    right: 12px;
    background: rgba(14, 124, 68, 0.10);
    color: #0E7C44;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    pointer-events: none;
}

/* Stepper quantité */
.cy-fiche .cy-besoin-qty-stepper {
    display: inline-flex;
    align-items: center;
    background: #FFFFFF;
    border: 1px solid rgba(15, 27, 60, 0.15);
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}
.cy-fiche .cy-besoin-row.is-marked .cy-besoin-qty-stepper {
    opacity: 0.6;
    pointer-events: none;
}
.cy-fiche .cy-besoin-qty-btn {
    width: 28px;
    height: 32px;
    border: 0;
    background: transparent;
    color: var(--navy, #0F1B3C);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
}
.cy-fiche .cy-besoin-qty-btn:hover { background: rgba(15, 27, 60, 0.04); }
.cy-fiche .cy-besoin-qty-input {
    width: 50px;
    height: 32px;
    border: 0;
    background: transparent;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--navy, #0F1B3C);
    outline: none;
    padding: 0;
    -moz-appearance: textfield;
}
.cy-fiche .cy-besoin-qty-input::-webkit-outer-spin-button,
.cy-fiche .cy-besoin-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Toggle switch type iOS */
.cy-fiche .cy-besoin-toggle {
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}
.cy-fiche .cy-besoin-toggle-cb {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.cy-fiche .cy-besoin-toggle-track {
    display: inline-block;
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: rgba(15, 27, 60, 0.15);
    position: relative;
    transition: background 200ms ease;
}
.cy-fiche .cy-besoin-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: left 200ms ease;
}
.cy-fiche .cy-besoin-toggle-cb:checked + .cy-besoin-toggle-track { background: #0E7C44; }
.cy-fiche .cy-besoin-toggle-cb:checked + .cy-besoin-toggle-track .cy-besoin-toggle-thumb { left: 20px; }

/* Bouton supprimer (icône poubelle) */
.cy-fiche .cy-besoin-delete,
.cy-fiche .cy-besoin-delete:link,
.cy-fiche .cy-besoin-delete:visited {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 8px;
    background: #FFFFFF;
    border: 0.5px solid rgba(15, 27, 60, 0.15);
    color: #B14242;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
}
.cy-fiche .cy-besoin-delete > i {
    font-size: 18px;
    line-height: 1;
}
.cy-fiche .cy-besoin-delete:hover { background: #FEE2E2; color: #B14242; }
.cy-fiche .cy-besoin-row.is-marked .cy-besoin-delete {
    opacity: 0.4;
    pointer-events: none;
}

/* Sticky banner "Transférer les X validés" */
.cy-fiche .cy-besoin-sticky {
    position: sticky;
    bottom: 18px;
    margin-top: 24px;
    background: var(--navy, #0F1B3C);
    border-radius: 14px;
    padding: 14px 18px;
    display: none;
    align-items: center;
    gap: 12px;
    box-shadow: 0 8px 24px -8px rgba(15, 27, 60, 0.40);
    z-index: 40;
}
.cy-fiche .cy-besoin-sticky.is-visible { display: flex; }
.cy-fiche .cy-besoin-sticky-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.10);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.cy-fiche .cy-besoin-sticky-text {
    flex: 1;
    min-width: 0;
    color: #FFFFFF;
}
.cy-fiche .cy-besoin-sticky-count { font-size: 14px; font-weight: 500; }
.cy-fiche .cy-besoin-sticky-sub { font-size: 11px; opacity: 0.7; margin-top: 1px; }
.cy-fiche .cy-besoin-sticky-btn,
.cy-fiche .cy-besoin-sticky-btn:link,
.cy-fiche .cy-besoin-sticky-btn:visited {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 999px;
    background: #C8A458;
    color: #FFFFFF;
    border: 0;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background 140ms ease;
}
.cy-fiche .cy-besoin-sticky-btn:hover { background: #8B6F2E; color: #FFFFFF; }

/* Toast de succès après transfert. Apparaît centré-bas, fade-out automatique
   au bout de 3s (animation forwards). Le .vb le re-injecte à chaque clic. */
.cy-fiche .cy-besoin-notif-success {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    background: #0E7C44;
    color: #FFFFFF;
    padding: 12px 20px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 10px 30px -8px rgba(14, 124, 68, 0.45), 0 4px 8px rgba(0, 0, 0, 0.08);
    animation: cyToastFade 3s ease-out forwards;
    pointer-events: none;
}
.cy-fiche .cy-besoin-notif-success > i {
    background: rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
@keyframes cyToastFade {
    0% { opacity: 0; transform: translateX(-50%) translateY(20px); }
    10%, 80% { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-10px); visibility: hidden; }
}

/* Mobile compactage */
@media (max-width: 600px) {
    .cy-fiche .cy-besoin-row { padding: 12px 14px; gap: 8px; flex-wrap: wrap; }
    .cy-fiche .cy-besoin-row-info { flex-basis: 100%; }
    .cy-fiche .cy-besoin-qty-input { width: 30px; font-size: 14px; }
    .cy-fiche .cy-besoin-sticky { padding: 12px 14px; }
    .cy-fiche .cy-besoin-sticky-count { font-size: 13px; }
    .cy-fiche .cy-besoin-sticky-btn { padding: 9px 14px; font-size: 12px; }
}

/* === LEGACY (transition) : ancienne grid kept for backward compat — à supprimer === */
.cy-fiche .cy-besoin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 10px;
}
.cy-fiche .cy-besoin-card {
    background: #FFFFFF;
    border: 0.5px solid rgba(15, 27, 60, 0.10);
    border-radius: 12px;
    padding: 16px;
}
.cy-fiche .cy-besoin-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 0.5px solid rgba(15, 27, 60, 0.08);
    margin-bottom: 12px;
}
.cy-fiche .cy-besoin-qty {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #F0FDF4;
    color: #0E7C44;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
}
.cy-fiche .cy-besoin-qty i { font-size: 14px; }
.cy-fiche .cy-besoin-desig {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--navy, #0F1B3C);
    margin: 0 0 8px;
    line-height: 1.4;
}
.cy-fiche .cy-besoin-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: var(--slate, #6B6F7E);
    margin-bottom: 12px;
}
.cy-fiche .cy-besoin-meta-it { display: inline-flex; align-items: center; gap: 4px; }
.cy-fiche .cy-besoin-actions {
    display: flex;
    gap: 6px;
    padding-top: 12px;
    border-top: 0.5px dashed rgba(15, 27, 60, 0.12);
    align-items: center;
}

/* Validation toggle : la CheckBox native ASP.NET est masquée, on stylise la pill. */
.cy-fiche .cy-besoin-validation { flex: 1; cursor: pointer; }
.cy-fiche .cy-besoin-validation-cb input { display: none !important; }
.cy-fiche .cy-besoin-validation-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    border-radius: 8px;
    background: #D1FADF;
    color: #0E7C44;
    font-size: 13px;
    font-weight: 500;
    transition: background 120ms ease;
}
.cy-fiche .cy-besoin-validation-pill i { font-size: 16px; }
.cy-fiche .cy-besoin-validation:hover .cy-besoin-validation-pill {
    background: #A7F3D0;
}
/* État cochée : on grise la pill (la validation est faite, l'item va passer en "À commander") */
.cy-fiche .cy-besoin-validation-cb input:checked + span,
.cy-fiche .cy-besoin-validation-cb:has(input:checked) ~ .cy-besoin-validation-pill {
    background: #0F1B3C;
    color: #FFFFFF;
}

/* ============ À COMMANDER — une card par fournisseur ============ */
.cy-fiche .cy-commander-list {
    /* Plus de wrap stylé : chaque card.cy-commander-card est autonome. */
    display: block;
}
.cy-fiche .cy-commander-card {
    background: #FFFFFF;
    border: 0.5px solid rgba(15, 27, 60, 0.10);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
}
.cy-fiche .cy-commander-card:last-child { margin-bottom: 0; }
/* Header fournisseur : bandeau crème + bordure gold (style accordéon plié) */
.cy-fiche .cy-commander-frs-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #FFF9EE;
    border-top: 0.5px solid rgba(200, 164, 88, 0.30);
    border-bottom: 2px solid #C8A458;
}
.cy-fiche .cy-commander-frs-head:first-of-type { border-top: 0; }
.cy-fiche .cy-commander-frs-head > i {
    color: #C8A458;
    font-size: 18px;
}
.cy-fiche .cy-commander-frs-name {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--navy, #0F1B3C);
}
.cy-fiche .cy-commander-frs-count {
    margin-left: auto;
    background: rgba(15, 27, 60, 0.08);
    color: var(--navy, #0F1B3C);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}
/* Footer fournisseur : barre d'actions sous les lignes produits du groupe.
   Boutons Envoyer (gold) + Imprimer (blanc bordé) alignés à droite. */
.cy-fiche .cy-commander-frs-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(15, 27, 60, 0.02);
    border-bottom: 0.5px solid rgba(15, 27, 60, 0.08);
}
.cy-fiche .cy-commander-frs-footer:last-child { border-bottom: 0; }

/* Bouton "Envoyer" individuel par fournisseur. Pill gold compacte. */
.cy-fiche .cy-commander-frs-send,
.cy-fiche .cy-commander-frs-send:link,
.cy-fiche .cy-commander-frs-send:visited {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    background: #C8A458;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background 140ms ease;
}
.cy-fiche .cy-commander-frs-send i { font-size: 14px; }
.cy-fiche .cy-commander-frs-send:hover {
    background: #8B6F2E;
    color: #FFFFFF;
}
/* Bouton "Imprimer" individuel — variant secondaire (blanc bordé). */
.cy-fiche .cy-commander-frs-print,
.cy-fiche .cy-commander-frs-print:link,
.cy-fiche .cy-commander-frs-print:visited {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--navy, #0F1B3C);
    border: 0.5px solid rgba(15, 27, 60, 0.15);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background 140ms ease;
}
.cy-fiche .cy-commander-frs-print i { font-size: 14px; }
.cy-fiche .cy-commander-frs-print:hover {
    background: rgba(15, 27, 60, 0.04);
}
@media (max-width: 600px) {
    .cy-fiche .cy-commander-frs-send,
    .cy-fiche .cy-commander-frs-print {
        padding: 5px 8px;
        font-size: 11px;
    }
    .cy-fiche .cy-commander-frs-send span,
    .cy-fiche .cy-commander-frs-print span { display: none; }
}
/* Row produit : 2 colonnes (désignation/ref à gauche, qté à droite) */
.cy-fiche .cy-commander-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 0.5px solid rgba(15, 27, 60, 0.08);
}
.cy-fiche .cy-commander-row:last-child { border-bottom: 0; }
.cy-fiche .cy-commander-prod { min-width: 0; }
.cy-fiche .cy-commander-desig {
    font-size: 14px;
    color: var(--navy, #0F1B3C);
    line-height: 1.4;
}
.cy-fiche .cy-commander-ref {
    font-size: 11px;
    color: var(--slate, #6B6F7E);
    margin-top: 2px;
}
.cy-fiche .cy-commander-qty {
    background: #F5EBD3;
    color: #8B6F2E;
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

/* ============ LIVRAISONS — items avec boutons Livré/Non livré ============ */
.cy-fiche .cy-livraison-list {
    background: #FFFFFF;
    border: 0.5px solid rgba(15, 27, 60, 0.10);
    border-radius: 12px;
    overflow: hidden;
}
.cy-fiche .cy-livraison-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 0.5px solid rgba(15, 27, 60, 0.08);
}
.cy-fiche .cy-livraison-row:last-child { border-bottom: 0; }

.cy-fiche .cy-livraison-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
}
.cy-fiche .cy-livraison-avatar-materiel { background: #DBEAFE; color: #1E40AF; }
.cy-fiche .cy-livraison-avatar-produit  { background: #FCE7E7; color: #A22D2D; }
.cy-fiche .cy-livraison-avatar-effet    { background: #D1FADF; color: #0E7C44; }

.cy-fiche .cy-livraison-info { flex: 1; min-width: 0; }
.cy-fiche .cy-livraison-desig {
    font-size: 13px;
    font-weight: 500;
    color: var(--navy, #0F1B3C);
    line-height: 1.4;
}
.cy-fiche .cy-livraison-meta {
    font-size: 11px;
    color: var(--slate, #6B6F7E);
    margin-top: 2px;
}

/* Boutons Livré / Non livré — CheckBox native masquée, pill stylisée. */
.cy-fiche .cy-livraison-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms ease;
    flex-shrink: 0;
}
.cy-fiche .cy-livraison-cb input { display: none !important; }
.cy-fiche .cy-livraison-btn i { font-size: 14px; }
.cy-fiche .cy-livraison-btn-livre {
    background: #D1FADF;
    color: #0E7C44;
}
.cy-fiche .cy-livraison-btn-livre:hover { background: #A7F3D0; }
.cy-fiche .cy-livraison-btn-non {
    background: #FFFFFF;
    border: 0.5px solid #FEE2E2;
    color: #991B1B;
}
.cy-fiche .cy-livraison-btn-non:hover { background: #FEE2E2; }

@media (max-width: 600px) {
    .cy-fiche .cy-livraison-row {
        flex-wrap: wrap;
        gap: 8px;
    }
    .cy-fiche .cy-livraison-info { flex-basis: calc(100% - 44px); }
    .cy-fiche .cy-livraison-btn { flex: 1; }
}

/* =========================================================================
   Bouton d'appel — icône téléphone cliquable (tel: lien).
   Utilisé dans controle_presence.aspx (grid Absences) pour appeler
   directement l'intervenant ou le client au tap depuis mobile.
   Réutilisable partout où on a un numéro de téléphone à afficher.
   ========================================================================= */
.cy-call-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--gold-soft, #F5EBD3);
    color: var(--gold-strong, #8B6F2E);
    text-decoration: none;
    transition: background 140ms ease, transform 80ms ease;
    -webkit-tap-highlight-color: transparent;
    border: 0;
    cursor: pointer;
}
.cy-call-btn:hover,
.cy-call-btn:focus-visible {
    background: var(--gold, #C8A458);
    color: #FFFFFF;
    outline: 0;
}
.cy-call-btn:active {
    transform: scale(0.94);
}
.cy-call-btn i {
    font-size: 18px;
}
.cy-call-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.cy-call-row-label {
    color: var(--navy, #0F1B3C);
    font-size: 14px;
}

/* =========================================================================
   Photo lightbox — overlay plein écran avec image centrée + bouton X.
   Utilisée par le JS de check_list.aspx (et réutilisable ailleurs).
   Tap sur backdrop, bouton X ou touche Escape pour fermer.
   ========================================================================= */
.cy-photo-lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: cyLightboxFadeIn 160ms ease-out;
    cursor: zoom-out;
}
.cy-photo-lightbox-img {
    max-width: 100%;
    max-height: 90vh;
    border-radius: 8px;
    object-fit: contain;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    cursor: default;
    animation: cyLightboxZoomIn 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cy-photo-lightbox-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.15);
    border: 0;
    border-radius: 50%;
    color: #FFFFFF;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 140ms ease;
    -webkit-tap-highlight-color: transparent;
}
.cy-photo-lightbox-close:hover,
.cy-photo-lightbox-close:focus-visible {
    background: rgba(255, 255, 255, 0.28);
    outline: 0;
}
.cy-photo-lightbox-close i {
    font-size: 22px;
}
@keyframes cyLightboxFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes cyLightboxZoomIn {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}

/* =========================================================================
   .cy-table-fiche — transformation responsive (téléphone < 600px)
   Le GridView legacy reste un <table> sur desktop ET tablette portrait
   (iPad 768px garde le tableau). En dessous de 600px (téléphones réels :
   iPhone 14 jusqu'à 430, Galaxy S 360, iPhone SE 375), chaque <tr> devient
   une card empilée via CSS Grid + grid-template-areas (layout validé
   Option 1 — Cards stackées du 2026-06-05) :

     [Zone (label fin)        ]  [Photo mini]
     [Tâche en gros texte   ...                ]
     [Chip cadence  ]            [Actions →]

   Le scope est volontairement GLOBAL (pas sous .cy-fiche) car .cy-table-fiche
   n'est utilisé que dans client/check_list.aspx et la page n'a pas le wrapper
   .cy-fiche. Pattern "responsive data table → cards" sans toucher au markup
   ASP.NET (GridView).
   ========================================================================= */
@media (max-width: 600px) {
    /* Cacher l'en-tête de colonnes (peut être <thead><tr><th> OU <tr><th> OU <tr><td>) */
    table.cy-table-fiche thead,
    .cy-table-fiche thead,
    .cy-table-fiche tr.cy-table-header,
    .cy-table-fiche tbody tr:first-child:has(th),
    .cy-table-fiche tbody tr th { display: none !important; }

    /* Reset table-y sur le table ET son tbody.
       Sélecteurs avec et sans `table.` + descendant pour gérer les cas
       où ASP.NET met la classe sur un wrapper <div> au lieu du <table>.
       !important pour battre les styles legacy de /Style.css. */
    table.cy-table-fiche,
    .cy-table-fiche,
    .cy-table-fiche table,
    table.cy-table-fiche tbody,
    .cy-table-fiche tbody {
        display: block !important;
        width: 100% !important;
        border-collapse: separate !important;
    }

    /* Chaque ligne = 1 card en grid 2 colonnes. Photo (32px) en haut à droite
       à côté de Zone. Au tap, JS ouvre la photo en grand dans un nouvel onglet
       (le tooltip 300px legacy qui débordait est neutralisé via display:none). */
    table.cy-table-fiche tbody tr,
    .cy-table-fiche tbody tr {
        display: grid !important;
        grid-template-columns: 1fr 40px !important;
        grid-template-areas:
            "zone photo"
            "tache tache"
            "cadence actions" !important;
        column-gap: 12px !important;
        row-gap: 8px !important;
        background: white !important;
        border: 0.5px solid var(--border, #E5E7EB) !important;
        border-radius: 12px !important;
        padding: 14px !important;
        margin-bottom: 10px !important;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    }

    /* Reset cell-level table styles */
    table.cy-table-fiche tbody tr td,
    .cy-table-fiche tbody tr td {
        display: block !important;
        padding: 0 !important;
        border: none !important;
        margin: 0 !important;
        text-align: left !important;
        white-space: normal !important;
    }

    /* Placement via grid-template-areas
       Ordre HTML : 1:Zone 2:Tâche 3:Cadence 4:Photo 5:Actions */
    .cy-table-fiche tbody tr td:nth-child(1) { grid-area: zone !important; align-self: center !important; }
    .cy-table-fiche tbody tr td:nth-child(2) { grid-area: tache !important; }
    .cy-table-fiche tbody tr td:nth-child(3) { grid-area: cadence !important; align-self: center !important; }
    .cy-table-fiche tbody tr td:nth-child(4) { grid-area: photo !important; align-self: start !important; justify-self: end !important; }
    .cy-table-fiche tbody tr td:nth-child(5) { grid-area: actions !important; align-self: center !important; justify-self: end !important; }

    /* Zone = label fin uppercase (style mockup) */
    .cy-table-fiche tbody tr td:nth-child(1) {
        font-size: 11px !important;
        font-weight: 500 !important;
        color: var(--slate, #6B6F7E) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.4px !important;
    }

    /* Tâche = titre principal en texte navy */
    .cy-table-fiche tbody tr td:nth-child(2) {
        font-size: 15px !important;
        color: var(--navy, #0F1B3C) !important;
        line-height: 1.4 !important;
    }

    /* Photo cell : 40px width fixe, contenu centré, overflow hidden anti-débordement */
    .cy-table-fiche tbody tr td:nth-child(4) {
        width: 40px !important;
        max-width: 40px !important;
        overflow: hidden !important;
        text-align: center !important;
    }
    /* Tooltip preview 300px (hover desktop) totalement neutralisé sur mobile :
       display:none + visibility + pointer-events pour battre tout JS legacy. */
    .cy-table-fiche .tooltiptext,
    .cy-table-fiche tbody tr td:nth-child(4) .tooltiptext {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    /* Mini photo 32px arrondie, cliquable (le JS injecte cy-photo-tap pour ouvrir
       la photo en grand au tap). */
    .cy-table-fiche tbody tr td:nth-child(4) img,
    .cy-table-fiche tbody tr td:nth-child(4) .cy-photo-thumb {
        width: 32px !important;
        height: 32px !important;
        max-width: 32px !important;
        max-height: 32px !important;
        border-radius: 6px !important;
        object-fit: cover !important;
        cursor: pointer !important;
    }
    /* Placeholder icône quand pas de photo (injecté par JS si img broken) */
    .cy-table-fiche tbody tr td:nth-child(4) .cy-photo-empty {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 32px !important;
        height: 32px !important;
        border-radius: 6px !important;
        background: rgba(15, 27, 60, 0.05) !important;
        color: rgba(15, 27, 60, 0.3) !important;
        font-size: 16px !important;
    }

    /* Actions : toujours visibles en bas à droite (pas de kebab — Option 1 mockup) */
    .cy-table-fiche .cy-action-group {
        display: inline-flex !important;
        gap: 4px !important;
    }
    .cy-table-fiche .cy-kebab-btn { display: none !important; }
}

/* Cellules tarif fusionnées (prix + unité empilés à droite).
   "Tarif num" en monospace pour aligner les décimales.
   "Unit chip" : pastille indigo pastel, sémantique "unité de tarif" — couleur
   distincte des chips métier/cadence/statut pour ne pas créer de collision visuelle. */
.cy-fiche .cy-tarif-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    line-height: 1.2;
}
.cy-fiche .cy-table .cy-tarif-num {
    font-family: 'JetBrains Mono', SFMono-Regular, ui-monospace, monospace;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--navy);
    /* Padding-right égal au padding-right de .cy-unit-chip ci-dessous → aligne
       visuellement le bord droit du "€" avec le bord droit du texte de la chip. */
    padding-right: 9px;
}
.cy-fiche .cy-unit-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    background: #EEF2FF;
    color: #3730A3;
    line-height: 1.4;
    white-space: nowrap;
}

/* === Site picker en pills (variante A : 1 à 8 sites) =======================
   Overlay non destructif au-dessus d'une <asp:DropDownList AutoPostBack="True">.
   La DropDownList reçoit CssClass="cy-pill-picker" → cachée en CSS.
   Le JS (cf. bas de planning.aspx ou conciergya.js partagé) génère un <div>
   de pills <button> à la place. Click pill → select.value = ... + dispatch
   "change" → AutoPostBack ASP.NET → comportement identique au dropdown natif. */
.cy-fiche select.cy-pill-picker { display: none !important; }

/* Auto-élargissement : tout .cy-field qui contient un pill picker prend toute la largeur
   de la cy-form-grid (sinon les pills wrappent inutilement). :has() supporté Safari 15.4+
   et Chrome 105+ → OK pour la démo et la prod 2025. */
.cy-fiche .cy-form-grid .cy-field:has(select.cy-pill-picker) {
    grid-column: 1 / -1;
}

.cy-fiche .cy-site-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}
.cy-fiche .cy-site-pill {
    padding: 8px 18px;
    border: 0.5px solid rgba(15, 23, 42, 0.14);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--navy);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background .14s, border-color .14s, color .14s;
    white-space: nowrap;
    line-height: 1.2;
    font-family: inherit;
}
.cy-fiche .cy-site-pill:hover {
    background: var(--gold-pale);
    border-color: var(--gold-soft);
}
.cy-fiche .cy-site-pill.active {
    background: var(--gold);
    border-color: var(--gold-dark);
    color: #FFFFFF;
}

/* =========================================================================
   cy-pill-picker-rich : <select> transformé en pills + popover "Voir X autres"
   Pills visibles = options dont le libellé commence par "* " (= avec tâches
   définies pour ce site/prestation). Autres options → popover avec recherche.
   Le <select> natif reste dans le DOM (caché) pour conserver le PostBack ASP.NET.
   ========================================================================= */
.cy-fiche select.cy-pill-picker-rich {
    display: none;
}
.cy-fiche .cy-pills-rich-wrap {
    position: relative;
    margin-top: 6px;
}
.cy-fiche .cy-pills-rich {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
/* Pill standard (Prestation/Zone non-active). Taille alignée sur cy-site-pill
   (Cadence/Site historiques) pour cohérence globale : 14px / 8px 18px. */
.cy-fiche .cy-pill-rich {
    padding: 8px 18px;
    border: none;
    border-radius: 999px;
    background: #F1EFE8;
    color: #2C2C2A;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 100ms ease, color 100ms ease, transform 100ms ease;
    white-space: nowrap;
    line-height: 1.2;
    font-family: inherit;
}
.cy-fiche .cy-pill-rich:hover {
    background: #E5E2D5;
}
.cy-fiche .cy-pill-rich.active {
    background: var(--navy, #0F172A);
    color: #FFFFFF;
}
/* Pill "Voir X autres" : accent BLEU info (mockup validé) pour signaler
   un déclencheur de popover distinct des pills de sélection. */
.cy-fiche .cy-pill-rich.cy-pill-rich-more {
    background: #E6F1FB;
    color: #185FA5;
    border: 0.5px solid #B5D4F4;
}
.cy-fiche .cy-pill-rich.cy-pill-rich-more:hover {
    background: #D4E7F6;
}
.cy-fiche .cy-pill-rich.cy-pill-rich-more.is-open {
    background: #185FA5;
    color: white;
}
/* Sous-titre gris italique au-dessus des pills Zone (mockup) */
.cy-fiche .cy-pills-rich-subtitle {
    font-size: 12px;
    color: var(--slate, #5F5E5A);
    font-style: italic;
    margin: 0 0 6px;
}

/* =========================================================================
   Modale standard (cy-modal-overlay + cy-modal) — pattern réutilisable.
   Utilisé d'abord par panel_edit_zone (édition d'une zone d'intervention).
   À étendre à panel_new_zone et panel_delete_zone en cas de validation.
   ========================================================================= */
.cy-fiche .cy-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: cyModalFadeIn 160ms ease-out;
}
@keyframes cyModalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.cy-fiche .cy-modal {
    background: white;
    border-radius: 14px;
    width: 100%;
    max-width: 480px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.40), 0 6px 12px rgba(15, 23, 42, 0.08);
    animation: cyModalSlideIn 200ms ease-out;
}
@keyframes cyModalSlideIn {
    from { transform: translateY(10px) scale(0.98); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}
.cy-fiche .cy-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px 12px;
    border-bottom: 0.5px solid rgba(15, 23, 42, 0.08);
}
.cy-fiche .cy-modal-title {
    margin: 0;
    font-size: 17px;
    font-weight: 500;
    color: var(--navy);
    display: flex;
    align-items: center;
    gap: 8px;
}
.cy-fiche .cy-modal-title i.ti {
    color: var(--gold-dark, #B08F4D);
    font-size: 20px;
}
.cy-fiche .cy-modal-close,
.cy-fiche .cy-modal-close:link,
.cy-fiche .cy-modal-close:visited,
.cy-fiche .cy-modal-close:hover {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--slate, #5F5E5A);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 100ms ease, color 100ms ease;
}
.cy-fiche .cy-modal-close:hover {
    background: var(--bg, #FAFAF7);
    color: var(--navy);
}
.cy-fiche .cy-modal-close i.ti {
    font-size: 18px;
}
.cy-fiche .cy-modal-body {
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.cy-fiche .cy-modal-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cy-fiche .cy-modal-field label {
    font-size: 12px;
    font-weight: 500;
    color: var(--slate, #5F5E5A);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.cy-fiche .cy-modal-input,
.cy-fiche .cy-modal-select {
    width: 100%;
    padding: 10px 12px;
    border: 0.5px solid var(--border, #E5E7EB);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    color: var(--navy);
    background: white;
    box-sizing: border-box;
}
.cy-fiche .cy-modal-select:focus,
.cy-fiche .cy-modal-input:focus {
    outline: none;
    border-color: var(--gold-dark, #B08F4D);
    box-shadow: 0 0 0 3px rgba(176, 143, 77, 0.16);
}
.cy-fiche .cy-modal-radios {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cy-fiche .cy-modal-radios label {
    font-size: 13px;
    font-weight: 400;
    color: var(--navy);
    text-transform: none;
    letter-spacing: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.cy-fiche .cy-modal-radios input[type="radio"] {
    margin: 0;
}
.cy-fiche .cy-modal-alerte {
    background: #FCEBEB;
    color: #A32D2D;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    border-left: 3px solid #A32D2D;
}
.cy-fiche .cy-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 22px 18px;
    border-top: 0.5px solid rgba(15, 23, 42, 0.08);
}
@media (max-width: 720px) {
    .cy-fiche .cy-modal { max-width: 100%; border-radius: 14px 14px 0 0; align-self: flex-end; }
    .cy-fiche .cy-modal-overlay { align-items: flex-end; padding: 0; }
}

/* =========================================================================
   Modale globale (hors .cy-fiche) — overlay injecté en racine de body par
   le JS de commande_admin.aspx. Mêmes styles que .cy-fiche .cy-modal-*
   mais sans le scope, pour garantir le centrage viewport même si un
   ancêtre crée un containing block (transform/filter/will-change).
   ========================================================================= */
body > .cy-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: cyModalFadeIn 160ms ease-out;
}
body > .cy-modal-overlay .cy-modal {
    background: white;
    border-radius: 14px;
    width: 100%;
    max-width: 480px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.40), 0 6px 12px rgba(15, 23, 42, 0.08);
    animation: cyModalSlideIn 200ms ease-out;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
body > .cy-modal-overlay .cy-modal-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 18px 22px 14px;
    border-bottom: 0.5px solid rgba(15, 23, 42, 0.08);
}
body > .cy-modal-overlay .cy-modal-title {
    flex: 1;
    margin: 0;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 17px;
    font-weight: 500;
    color: #0F1B3C;
}
body > .cy-modal-overlay .cy-modal-close {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: rgba(15, 23, 42, 0.05);
    color: #5F5E5A;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
body > .cy-modal-overlay .cy-modal-close:hover { background: rgba(15, 23, 42, 0.12); }
body > .cy-modal-overlay .cy-modal-body {
    padding: 18px 22px;
    font-size: 14px;
    line-height: 1.55;
    color: #0F1B3C;
}
body > .cy-modal-overlay .cy-modal-body p { margin: 0; }
body > .cy-modal-overlay .cy-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 22px 18px;
    border-top: 0.5px solid rgba(15, 23, 42, 0.08);
}
body > .cy-modal-overlay .cy-btn {
    padding: 9px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 0;
    transition: background 140ms ease;
}
body > .cy-modal-overlay .cy-btn-secondary {
    background: #FFFFFF;
    color: #0F1B3C;
    border: 0.5px solid rgba(15, 27, 60, 0.18);
}
body > .cy-modal-overlay .cy-btn-secondary:hover { background: rgba(15, 27, 60, 0.04); }
body > .cy-modal-overlay .cy-btn-primary {
    background: #C8A458;
    color: #FFFFFF;
}
body > .cy-modal-overlay .cy-btn-primary:hover { background: #8B6F2E; }

@media (max-width: 720px) {
    body > .cy-modal-overlay { align-items: flex-end; padding: 0; }
    body > .cy-modal-overlay .cy-modal { max-width: 100%; border-radius: 14px 14px 0 0; }
}

/* === Cadence : on garde la taille originale de cy-site-pill (14px / 8px 18px).
   On change UNIQUEMENT le style des pills inactives (beige fond plein, no border)
   et de la pill active (vert pâle au lieu de gold). === */
.cy-fiche .cy-field-cadence .cy-site-pill {
    border: none;
    background: #F1EFE8;
    color: #2C2C2A;
}
.cy-fiche .cy-field-cadence .cy-site-pill:hover {
    background: #E5E2D5;
}
.cy-fiche .cy-field-cadence .cy-site-pill.active {
    background: #EAF3DE !important;
    color: #173404 !important;
    border-color: transparent !important;
}

/* === Row Tâche + Photo : split 1fr / 220px sur desktop.
   align-items: stretch (default grid) → les 2 colonnes prennent la même hauteur.
   Le label de chaque colonne a la même hauteur (flex pour aligner les labels en haut),
   et l'input/card prend tout le reste de l'espace pour visuellement aligner les bas. === */
.cy-fiche .cy-tache-photo-row {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 14px;
    align-items: stretch;
}
@media (max-width: 720px) {
    .cy-fiche .cy-tache-photo-row {
        grid-template-columns: 1fr;
    }
}
.cy-fiche .cy-tache-photo-row .cy-tache-col,
.cy-fiche .cy-tache-photo-row .cy-photo-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* Le textarea et la card photo prennent toute la hauteur restante de leur cellule grid */
.cy-fiche .cy-tache-photo-row .cy-tache-input {
    flex: 1 1 auto;
    width: 100%;
    min-height: 120px;
    padding: 10px 12px;
    border: 0.5px solid var(--border, #E5E7EB);
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    color: var(--navy);
    resize: vertical;
    box-sizing: border-box;
}
.cy-fiche .cy-tache-photo-row .cy-photo-upload {
    flex: 1 1 auto;
    min-height: 120px;
}

/* === Photo card upload (mockup) === */
/* On cache l'input file natif ASP.NET — le label custom devient la zone cliquable. */
.cy-fiche .cy-photo-input {
    display: none !important;
}
.cy-fiche .cy-photo-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg, #FAFAF7);
    border: 1px dashed var(--border, #E5E7EB);
    border-radius: 10px;
    padding: 22px 14px;
    cursor: pointer;
    transition: background 100ms ease, border-color 100ms ease;
    text-align: center;
}
.cy-fiche .cy-photo-upload:hover {
    background: var(--gold-pale, #FBF6E8);
    border-color: var(--gold-dark, #B08F4D);
}
.cy-fiche .cy-photo-upload i.ti {
    font-size: 26px;
    color: var(--gold-dark, #B08F4D);
    margin-bottom: 6px;
}
.cy-fiche .cy-photo-upload-label {
    display: block;
    font-size: 12px;
    color: var(--navy);
    font-weight: 500;
}
.cy-fiche .cy-photo-upload-hint {
    display: block;
    font-size: 10px;
    color: var(--slate, #5F5E5A);
    margin-top: 2px;
}
/* État "fichier choisi" : on affiche le nom via JS (data-file-name) */
.cy-fiche .cy-photo-upload.has-file {
    background: #EAF3DE;
    border-color: #97C459;
    border-style: solid;
}
.cy-fiche .cy-photo-upload.has-file::after {
    content: attr(data-file-name);
    display: block;
    font-size: 11px;
    color: #173404;
    margin-top: 4px;
    word-break: break-all;
}

/* Popover de recherche au clic sur "Voir X autres".
   Position absolute sous le picker. z-index élevé pour passer au-dessus du form. */
.cy-fiche .cy-rich-popover {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 100;
    width: 320px;
    max-width: 100%;
    background: white;
    border-radius: 10px;
    border: 0.5px solid rgba(15, 23, 42, 0.10);
    box-shadow: 0 10px 28px -8px rgba(15, 23, 42, 0.25), 0 2px 6px rgba(15, 23, 42, 0.06);
    padding: 8px;
    animation: cyChipPopFadeIn 120ms ease-out;
}
.cy-fiche .cy-rich-popover-search {
    position: relative;
    margin-bottom: 6px;
}
.cy-fiche .cy-rich-popover-search input {
    width: 100%;
    padding: 8px 10px;
    border: 0.5px solid var(--border, #E5E7EB);
    border-radius: 6px;
    font-size: 12px;
    background: white;
    color: var(--navy);
    font-family: inherit;
    box-sizing: border-box;
}
.cy-fiche .cy-rich-popover-list {
    max-height: 260px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.cy-fiche .cy-rich-popover-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 8px 10px;
    font-size: 12px;
    color: var(--navy);
    cursor: pointer;
    border-radius: 6px;
    font-family: inherit;
    transition: background 80ms ease;
}
.cy-fiche .cy-rich-popover-item:hover,
.cy-fiche .cy-rich-popover-item:focus {
    background: var(--bg, #FAFAF7);
    outline: none;
}

/* Popover enrichi : header section + items en row (label + badge + actions) */
.cy-fiche .cy-rich-popover-section {
    font-size: 10px;
    font-weight: 500;
    color: var(--slate, #5F5E5A);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 8px 10px 4px;
}
.cy-fiche .cy-rich-popover-item-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
}
.cy-fiche .cy-rich-popover-item-label {
    flex: 1;
    text-align: left;
    background: transparent;
    border: none;
    padding: 4px 4px;
    font-size: 12px;
    color: var(--navy);
    font-family: inherit;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.cy-fiche .cy-rich-popover-item-label:hover {
    background: var(--bg, #FAFAF7);
}
.cy-fiche .cy-rich-badge {
    display: inline-block;
    font-size: 9px;
    padding: 1px 6px;
    border-radius: 99px;
    font-weight: 500;
    flex-shrink: 0;
}
.cy-fiche .cy-rich-badge-generique {
    background: #F1EFE8;
    color: var(--slate, #5F5E5A);
}
.cy-fiche .cy-rich-badge-mes-sites,
.cy-fiche .cy-rich-badge-ce-site {
    background: var(--gold-soft, #F5EBD3);
    color: var(--gold-dark, #B08F4D);
}
.cy-fiche .cy-rich-popover-actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}
.cy-fiche .cy-rich-popover-action {
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--slate, #5F5E5A);
    border-radius: 4px;
    line-height: 1;
    transition: background 100ms ease;
    font-family: inherit;
}
.cy-fiche .cy-rich-popover-action i {
    font-size: 14px;
}
.cy-fiche .cy-rich-popover-action:hover {
    background: var(--bg, #FAFAF7);
    color: var(--navy);
}
.cy-fiche .cy-rich-popover-footer {
    border-top: 0.5px solid rgba(15, 23, 42, 0.08);
    margin-top: 6px;
    padding-top: 6px;
}
.cy-fiche .cy-rich-popover-create {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    background: transparent;
    border: none;
    padding: 8px 10px;
    font-size: 12px;
    color: var(--gold-dark, #B08F4D);
    cursor: pointer;
    border-radius: 6px;
    font-family: inherit;
    font-weight: 500;
}
.cy-fiche .cy-rich-popover-create:hover {
    background: var(--gold-pale, #FBF6E8);
}

/* Mobile : le popover prend toute la largeur du wrapper (préparation responsive).
   La version "vraiment mobile" (bottom sheet plein écran) sera vue en passe suivante. */
@media (max-width: 720px) {
    .cy-fiche .cy-rich-popover {
        width: 100%;
        left: 0;
        right: 0;
    }
}

/* === Devise : pill statique indigo (cgv.aspx > Tarifs en vigueur) ===
   Pattern réutilisable si on ajoute USD/GBP plus tard : ajouter d'autres
   .cy-devise-pill côte à côte, gérer .is-active comme pour cy-site-pill. */
.cy-fiche .cy-devise-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0 18px 0;
    flex-wrap: wrap;
}
.cy-fiche .cy-devise-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--slate);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.cy-fiche .cy-devise-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: #E0E7FF;
    color: #3730A3;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
}
.cy-fiche .cy-devise-pill.is-active {
    border-color: #6366F1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.18);
}
.cy-fiche .cy-devise-rbl-hidden { display: none !important; }

/* === Grid devis (cgv.aspx > Tarifs en vigueur) ===
   La colonne Unité (3e position) est conservée physiquement dans le DOM pour
   préserver row.Cells(2).Text si le .vb la lit, mais cachée visuellement —
   son contenu est déjà rendu en chip dans la cellule Tarif via cy-tarif-stack. */
.cy-fiche .cy-tarifs-grid th:nth-child(3),
.cy-fiche .cy-tarifs-grid td:nth-child(3) {
    display: none !important;
}
/* Sur cgv.aspx, Tarif est aligné à gauche (différent du grid devis de
   commande.aspx où il reste à droite). Override ciblé via .cy-tarifs-grid. */
.cy-fiche .cy-tarifs-grid .cy-tarif-stack {
    align-items: flex-start;
}
.cy-fiche .cy-tarifs-grid .cy-tarif-num {
    padding-right: 0;
}

/* === CGV : hiérarchie typographique du Literal HTML généré par cgv.aspx.vb ===
   Le .vb construit titres + sous-titres + parties + articles dans une suite
   de h2/h3/h4 + p. On force ici une hiérarchie Fraunces / Inter cohérente
   avec le reste du design language. Pas de modif du code-behind nécessaire. */
.cy-fiche .cy-cgv-content {
    max-width: 880px;
    color: var(--navy);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 14.5px;
    line-height: 1.65;
    padding: 4px 4px 16px 4px;
}
.cy-fiche .cy-cgv-content h1,
.cy-fiche .cy-cgv-content h2,
.cy-fiche .cy-cgv-content h3,
.cy-fiche .cy-cgv-content h4 {
    font-family: 'Fraunces', Georgia, serif;
    color: var(--navy);
    font-weight: 600;
    margin: 0;
    line-height: 1.25;
    letter-spacing: -0.005em;
}
.cy-fiche .cy-cgv-content h1 {
    font-size: 24px;
    margin: 32px 0 14px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--gold);
}
.cy-fiche .cy-cgv-content h2 {
    font-size: 20px;
    margin: 28px 0 12px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.10);
}
.cy-fiche .cy-cgv-content h3 {
    font-size: 17px;
    margin: 22px 0 10px 0;
    color: var(--gold-dark);
}
.cy-fiche .cy-cgv-content h4 {
    font-size: 15px;
    margin: 18px 0 8px 0;
    font-weight: 600;
    font-family: 'Inter', system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--slate);
}
.cy-fiche .cy-cgv-content p {
    margin: 0 0 12px 0;
    text-align: justify;
    hyphens: auto;
}
.cy-fiche .cy-cgv-content strong,
.cy-fiche .cy-cgv-content b {
    color: var(--navy);
    font-weight: 600;
}
.cy-fiche .cy-cgv-content ul,
.cy-fiche .cy-cgv-content ol {
    margin: 8px 0 14px 0;
    padding-left: 24px;
}
.cy-fiche .cy-cgv-content li {
    margin: 4px 0;
}
.cy-fiche .cy-cgv-content a {
    color: var(--gold-dark);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.cy-fiche .cy-cgv-content a:hover {
    color: var(--gold);
}
/* Bloc article : numérotation décalée avec couleur gold pour repérer
   visuellement la structure "Titre.Sous-titre.Partie" si .vb l'inclut */
.cy-fiche .cy-cgv-content .cgv-num,
.cy-fiche .cy-cgv-content .numero {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--gold-dark);
    font-weight: 600;
    margin-right: 6px;
}

/* === PAIE_ADMIN-SPECIFIC === */
/* Only paie-unique selectors. Form/card/table styles inherited from admin section above. */
.cy-fiche .cy-header-title {
                font-family: 'Fraunces', serif;
                font-size: 22px;
                font-weight: 600;
                color: var(--navy);
                flex: 1;
                display: block;
                margin: 0;
                line-height: 1.2;
                /* Trait or signature Conciergya, présent sous le titre des
                   pages clientes (planning, commande, note, cgv, presence,
                   check_list, facturation, acces). */
                padding-bottom: 8px;
                border-bottom: 2px solid var(--gold);
            }
.cy-fiche .cy-period-selectors {
                display: flex;
                gap: 10px;
                align-items: flex-end;
                flex-shrink: 0;
            }
.cy-fiche .cy-period-selector { display: flex; flex-direction: column; gap: 3px; }
.cy-fiche .cy-period-selector > label {
                font-size: 10px;
                color: var(--slate);
                text-transform: uppercase;
                letter-spacing: .5px;
                font-weight: 600;
            }
.cy-fiche .cy-period-selector > select {
                height: 32px;
                padding: 4px 10px;
                font-size: 13px;
                font-family: inherit;
                border: 1px solid var(--border);
                border-radius: 6px;
                color: var(--navy);
                background: white;
                font-weight: normal !important;
                min-width: 120px;
            }
.cy-fiche .cy-nav-item {
                display: block;
                padding: 12px 24px;
                color: var(--slate);
                text-decoration: none;
                border-left: 3px solid transparent;
                font-weight: 500;
                cursor: pointer;
                user-select: none;
                font-family: inherit;
            }
.cy-fiche .cy-nav-item:hover { background: var(--bg); color: var(--navy); }
.cy-fiche .cy-nav-item.active {
                color: var(--navy);
                background: linear-gradient(90deg, rgba(201,169,101,.14), transparent);
                border-left-color: var(--gold);
                font-weight: 600;
            }

/* === POINTER STATES === */
/* Sans scope parent : applicable aussi bien sur .cy-page (acces.aspx via masterpage)
   que sur les pages standalone redesignées en .cy-fiche */
.btn-action.btn-disabled-action,
input.btn-action.btn-disabled-action,
input.btn-action[disabled] {
    background: #F1F0EC !important;
    color: #94A3B8 !important;
    border: 1px dashed #D3D1C7 !important;
    cursor: not-allowed !important;
}
.cy-pointage-info-actif {
    display: block !important;
    text-align: center !important;
    color: #94A3B8 !important;
    font-size: 12px !important;
    font-style: italic !important;
    margin-top: 8px !important;
}
.cy-pointage-info-inactif {
    display: block !important;
    margin-top: 10px !important;
    padding: 12px 14px !important;
    background: #FBF6E8 !important;
    border: 1px solid #F5EBD3 !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    color: #475569 !important;
}
.cy-pointage-info-inactif .cy-info-label {
    display: block !important;
    text-transform: uppercase !important;
    font-size: 10px !important;
    letter-spacing: 0.06em !important;
    color: #94A3B8 !important;
    margin-bottom: 6px !important;
}
.cy-pointage-info-inactif .cy-info-line {
    display: block !important;
    margin-top: 4px !important;
    color: #0F172A !important;
}
.cy-pointage-info-inactif .cy-info-line svg.cy-info-icon {
    color: #C9A965 !important;
    width: 14px !important;
    height: 14px !important;
    margin-right: 8px !important;
    vertical-align: -2px !important;
}
.cy-pointage-info-inactif .cy-info-line:first-of-type {
    font-weight: 500 !important;
    font-size: 14px !important;
}
.cy-fiche .cy-nav-item { text-decoration: none !important; }

/* === ESPACE CONCIERGE WORKFLOW === */
.cy-workflow-separator {
    height: 1px !important;
    background: #E5E7EB !important;
    margin: 22px 0 14px 0 !important;
    display: block !important;
}
.cy-workflow-label {
    display: block !important;
    font-size: 11px !important;
    color: #94A3B8 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-weight: 500 !important;
    margin-bottom: 12px !important;
}

/* =========================================================== */
/* === FACTURATION-SPECIFIC ================================== */
/* Page-scoped rules used only by facturation.aspx.            */
/* Generic .cy-fiche/.cy-header/.cy-toolbar/.cy-card/.cy-table  */
/* are already defined above.                                   */
/* =========================================================== */

/* Hide all section/card headings inside .cy-section (charte uniforme).
   Le titre du panneau est porté par .cy-header en haut de page ;
   les sous-titres explicatifs (.cy-card-subtitle) restent visibles. */
.cy-fiche .cy-section h1,
.cy-fiche .cy-section h2 { display:none !important; }

/* Header right-side filters (period dropdown + radio group) */
.cy-fiche .cy-fact-filters {
    margin-left:auto;
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.cy-fiche .cy-fact-filters select,
.cy-fiche .cy-fact-filters .cy-fact-radio {
    font-family:'Inter', sans-serif !important;
    font-size:13px !important;
    height:36px;
    padding:0 12px;
    border:1px solid var(--border);
    border-radius:8px;
    background:#FFFFFF;
    color:var(--navy);
}
.cy-fiche .cy-fact-filters select:focus { outline:none; border-color:var(--gold); }

/* Inline radio list rendered in header (traitement_consultation) */
.cy-fiche .cy-fact-radio {
    display:inline-flex; align-items:center; gap:6px;
    padding:0 12px;
    background:#FFFFFF;
    border:1px solid var(--border);
    border-radius:8px;
    height:36px;
}
.cy-fiche .cy-fact-radio table { border-collapse:collapse; }
.cy-fiche .cy-fact-radio td { padding:0 8px; vertical-align:middle; }
.cy-fiche .cy-fact-radio label {
    font-family:'Inter', sans-serif !important;
    font-size:13px !important;
    color:var(--navy);
    margin-left:4px;
}
.cy-fiche .cy-fact-radio input[type="radio"] { accent-color:var(--gold); margin:0; }

/* Color legend (current vs late invoices) */
.cy-fiche .cy-fact-legend {
    display:flex; gap:20px; margin-top:8px;
    font-size:12px; color:var(--slate);
}
.cy-fiche .cy-fact-legend .lg-current { color:var(--success); font-weight:600; }
.cy-fiche .cy-fact-legend .lg-late    { color:var(--danger);  font-weight:600; }

/* Facturation-specific toolbar (renamed from cy-toolbar to avoid grid conflict) */
.cy-fiche .cy-fact-toolbar {
    display:flex; align-items:center; gap:12px;
    margin-bottom:18px; flex-wrap:wrap;
}
.cy-fiche .cy-fact-toolbar select {
    height:36px; padding:0 12px;
    border:1px solid var(--border); border-radius:8px;
    background:#FFFFFF; font-size:13px;
    font-family:'Inter', sans-serif !important;
    color:var(--navy);
    min-width:280px;
}

/* Embedded report iframe (emises section) */
.cy-fiche iframe {
    width:100%;
    border:1px solid var(--border);
    border-radius:8px;
    background:#FFFFFF;
}

/* ASP.NET legacy inline overrides (auto-style classes + Font-Size attrs) */
.cy-fiche .auto-style1 { color:var(--success) !important; }
.cy-fiche .auto-style2 { color:var(--danger)  !important; }
.cy-fiche span[style*="X-Large"],
.cy-fiche span[style*="x-large"] { font-size:13px !important; }
.cy-fiche [Font-Names="Arial"],
.cy-fiche [face="Arial"] { font-family:'Inter', sans-serif !important; }
.cy-fiche select[style*="X-Large"],
.cy-fiche select[style*="x-large"],
.cy-fiche table[style*="X-Large"],
.cy-fiche table[style*="x-large"] {
    font-size:13px !important;
    font-family:'Inter', sans-serif !important;
}


/* === SHARED — STANDALONE PAGE COMPONENTS === */
/* Composants génériques utilisés par les pages standalone (admin, paie, facturation, baux, etc.).
   Première migration : extracted from gestion_baux.aspx (mai 2026). */

.cy-fiche .cy-card-title { font-family:'Fraunces', Georgia, serif; font-weight:500; font-size:18px; color:var(--navy); margin:0 0 6px 0; display:flex; align-items:center; gap:8px; }
.cy-fiche .cy-card-title > svg { color: var(--gold-dark); flex-shrink: 0; width: 18px; height: 18px; }
.cy-fiche .cy-card-title > i  { color: var(--gold-dark); flex-shrink: 0; font-size: 18px; line-height: 1; }
.cy-fiche .cy-card-subtitle { font-size:12px; color:var(--slate); margin:0 0 22px 0; font-style:italic; }

/* Filtres dans le header (à droite, après le titre). Pattern générique : un ou plusieurs <select> côté droit. */
.cy-fiche .cy-header-filters {
    margin-left:auto;
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.cy-fiche .cy-header-filters > label {
    font-size:11px; color:var(--slate); font-weight:600;
    text-transform:uppercase; letter-spacing:0.04em;
}
.cy-fiche .cy-header-filters select {
    font-family:'Inter', sans-serif !important;
    font-size:13px !important;
    height:36px;
    padding:0 12px;
    border:1px solid var(--border);
    border-radius:8px;
    background:#FFFFFF;
    color:var(--navy);
    min-width:200px;
    cursor:pointer;
}
.cy-fiche .cy-header-filters select:focus { outline:none; border-color:var(--gold); }
.cy-fiche .cy-section-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:6px; }
.cy-fiche .cy-field-full { grid-column:1 / -1; }
.cy-fiche .cy-field-label { font-size:12px; color:var(--slate); font-weight:600; text-transform:uppercase; letter-spacing:0.04em; }
.cy-fiche .cy-field-hint { font-size:11px; color:var(--slate); font-style:italic; text-transform:none; letter-spacing:0; }
.cy-fiche .cy-field-readonly {
    height:38px; padding:0 12px; border:1px dashed var(--border); border-radius:8px;
    background:var(--bg); color:var(--navy); display:inline-flex; align-items:center; font-size:14px; min-width:80px;
}
.cy-fiche .cy-inline-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cy-fiche .cy-inline-row .cy-suffix { color:var(--slate); font-size:13px; }

/* ===== cy-range-row — 1 conteneur unique pour 2 inputs (date->date, time->time) =====
   Bordure + radius + hover + focus appliqués au WRAPPER, pas aux inputs internes
   qui deviennent transparents avec border:0. Icone Tabler à gauche, séparateur
   "→" entre les 2 inputs. Utilisé sur planning_admin.aspx (Date prévue → butoir,
   Heure début → fin). Conserve les <asp:TextBox> ASP.NET pour ne pas casser le .vb. */
.cy-fiche .cy-range-row {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 8px;
    background: #fff;
    transition: border-color .12s, box-shadow .12s, background-color .12s;
}
.cy-fiche .cy-range-row:hover {
    border-color: rgba(176, 143, 77, 0.5);
    background-color: #FCFAF3;
}
.cy-fiche .cy-range-row:focus-within {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(201, 169, 101, 0.18);
    background-color: #fff;
}
.cy-fiche .cy-range-row > i.ti {
    color: var(--gold-dark, #8A6F3A);
    font-size: 16px;
    flex-shrink: 0;
}
.cy-fiche .cy-range-row .cy-range-sep {
    color: var(--slate, #888780);
    font-size: 14px;
    flex-shrink: 0;
    padding: 0 4px;
}
/* Les inputs date/time à l'intérieur perdent leur bordure et fond — le wrapper porte le style */
.cy-fiche .cy-range-row input[type="date"],
.cy-fiche .cy-range-row input[type="time"] {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 36px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--navy) !important;
    -webkit-text-fill-color: var(--navy) !important;
    flex: 1 1 0;
    min-width: 0;
    outline: none;
}
.cy-fiche .cy-range-row input[type="date"]:hover,
.cy-fiche .cy-range-row input[type="time"]:hover {
    background: transparent !important;
}

/* Selects HH/mm dans une cy-range-row : compact, transparent, chevron léger
   (hérité de cy-fiche select:not(.cy-pill-picker)). Le wrapper porte le style. */
.cy-fiche .cy-range-row select.cy-time-select {
    border: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
    margin: 0 !important;
    height: 36px;
    min-width: auto;
    width: auto;
    padding: 0 16px 0 4px;
    color: var(--navy);
    font-weight: 500;
    font-size: 14px;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    background-position: right 2px center;
    background-size: 10px 10px;
    outline: none;
}
.cy-fiche .cy-range-row select.cy-time-select:hover {
    background-color: transparent !important;
}
.cy-fiche .cy-range-row .cy-time-colon {
    color: var(--navy);
    font-size: 14px;
    font-weight: 500;
    flex-shrink: 0;
    padding: 0 1px;
}

/* ===== cy-notif-success — badge vert pâle après "Ajouter au planning" =====
   Remplace le <asp:Label ForeColor="Green"> brut par un badge pill avec icone
   check inline. Le texte est posé par le .vb : "Programmée — N notification(s)
   envoyée(s)". Si le label est vide (initial), le badge ne s'affiche pas. */
.cy-fiche .cy-notif-success {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 300;
    display: flex;
    width: max-content;
    max-width: calc(100% - 32px);
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #EAF3DE;
    color: #3B6D11;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    border: 0.5px solid #C0DD97;
    line-height: 1.3;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
    animation: cyToastIn 0.25s ease-out;
}
@keyframes cyToastIn {
    from { opacity: 0; transform: translate(-50%, 20px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
.cy-fiche .cy-notif-success::before {
    content: '✓';
    font-size: 14px;
    font-weight: 600;
    color: #3B6D11;
    flex-shrink: 0;
}
.cy-fiche .cy-notif-success:empty {
    display: none;
}

/* ===== cy-notif-danger — pendant rouge pour les suppressions =====
   Même structure que cy-notif-success mais rouge. Le ::before utilise
   un ✕ (caractère plus large que ✓ pour suggérer la suppression). */
.cy-fiche .cy-notif-danger {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 300;
    display: flex;
    width: max-content;
    max-width: calc(100% - 32px);
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #FCEBEB;
    color: #A32D2D;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    border: 0.5px solid #F7C1C1;
    line-height: 1.3;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
    animation: cyToastIn 0.25s ease-out;
}
.cy-fiche .cy-notif-danger::before {
    content: '✕';
    font-size: 14px;
    font-weight: 600;
    color: #A32D2D;
    flex-shrink: 0;
}
.cy-fiche .cy-notif-danger:empty {
    display: none;
}

/* L'espace entre notif et contenu suivant est géré par margin-bottom
   sur les classes .cy-notif-success/danger (passées en display: flex). */
.cy-fiche .cy-action-row { display:flex; align-items:center; gap:14px; margin-top:24px; flex-wrap:wrap; }
.cy-fiche .cy-action-row img { vertical-align:middle; }
.cy-fiche .cy-action-row .alert-label { color:var(--danger); font-size:13px; font-weight:500; }
.cy-fiche .cy-btn,
.cy-fiche input[type="submit"].cy-btn,
.cy-fiche input[type="button"].cy-btn,
.cy-fiche a.cy-btn {
    display:inline-flex; align-items:center; justify-content:center;
    height:38px; min-width:140px; padding:0 18px; border-radius:8px;
    font-family:'Inter', sans-serif; font-size:13px; font-weight:500;
    cursor:pointer; border:none; text-decoration:none; line-height:1;
    -webkit-appearance:none; appearance:none;
}
.cy-fiche .cy-btn-primary { background:var(--gold); color:#FFFFFF; }
.cy-fiche .cy-btn-primary:hover { background:#B89958; }
.cy-fiche .cy-btn-secondary { background:var(--gold-pale); color:var(--navy); }
.cy-fiche .cy-btn-secondary:hover { background:#F3E9CD; }
.cy-fiche a.cy-link, .cy-fiche .cy-link { color:var(--gold); text-decoration:none; font-size:13px; font-style:italic; cursor:pointer; font-weight:400; }
.cy-fiche a.cy-link:hover, .cy-fiche .cy-link:hover { text-decoration:underline; }

/* === FILTER CHIPS (boutons à bascule horizontaux pour filtrer une grille) === */
.cy-fiche .cy-filter-chips {
    display:flex; flex-wrap:wrap; gap:8px;
    margin:0 0 18px 0;
    padding:0 0 14px 0;
    border-bottom:1px solid var(--border);
}
.cy-fiche .cy-filter-chip,
.cy-fiche input[type="submit"].cy-filter-chip,
.cy-fiche input[type="button"].cy-filter-chip {
    display:inline-flex; align-items:center; justify-content:center;
    height:34px; padding:0 16px; border-radius:999px;
    font-family:'Inter', sans-serif; font-size:13px; font-weight:500;
    color:var(--navy-2);
    background:#FFFFFF;
    border:1px solid var(--border);
    cursor:pointer; line-height:1;
    -webkit-appearance:none; appearance:none;
    transition:all .18s var(--t);
    text-decoration:none;
}
.cy-fiche .cy-filter-chip:hover {
    background:var(--gold-pale);
    border-color:var(--gold);
    color:var(--navy);
}
.cy-fiche .cy-filter-chip.active,
.cy-fiche input[type="submit"].cy-filter-chip.active,
.cy-fiche input[type="button"].cy-filter-chip.active {
    background:var(--gold);
    border-color:var(--gold);
    color:#FFFFFF;
    font-weight:600;
}
.cy-fiche .cy-filter-chip.active:hover {
    background:#B89958;
    border-color:#B89958;
    color:#FFFFFF;
}

/* === SUCCESS LABEL (confirmation discrète à côté d'un bouton d'action) === */
.cy-fiche .cy-success-label {
    color:#15803D;
    background:#ECFDF5;
    border:1px solid #BBF7D0;
    padding:8px 14px;
    border-radius:8px;
    font-size:13px;
    font-weight:500;
}

/* === CHECKLIST WRAPPER (cadre clair autour d'une CheckBoxList/RadioButtonList) === */
.cy-fiche .cy-rapport-checklist-wrapper {
    margin:14px 0 4px 0;
    padding:14px 18px;
    background:#FFFFFF;
    border:1px solid var(--border);
    border-radius:10px;
    min-height:80px;
}

/* === SIDEBAR NAV ITEM via asp:Button (postback préservé) ===
   Pattern utilisé sur client/commande.aspx : les onglets de sidebar sont des
   asp:Button stylés en cy-nav-item pour préserver le postback du .vb tout en
   ressemblant aux nav-items <a> classiques. Le .vb met BackColor inline sur
   l'actif (#82652F) — on neutralise via !important pour garder le rendu nav-item. */
.cy-fiche .cy-sidebar .cy-nav-item-btn,
.cy-fiche .cy-sidebar input[type="submit"].cy-nav-item-btn,
.cy-fiche .cy-sidebar input[type="button"].cy-nav-item-btn {
    display:block !important;
    width:100% !important;
    padding:12px 24px !important;
    color:var(--slate) !important;
    background:transparent !important;
    border:0 !important;
    border-left:3px solid transparent !important;
    border-radius:0 !important;
    text-align:left !important;
    text-decoration:none !important;
    font-weight:500 !important;
    font-size:14px !important;
    font-family:inherit !important;
    cursor:pointer;
    -webkit-appearance:none; appearance:none;
    transition:all .15s var(--t);
    box-shadow:none !important;
    height:auto !important;
    line-height:1.35 !important;
    margin:0 !important;
    /* Permettre le wrap des libellés longs sur 2 lignes (sinon troncature native du <input>) */
    white-space:normal !important;
    word-break:break-word !important;
    overflow:visible !important;
    text-overflow:clip !important;
}
.cy-fiche .cy-sidebar .cy-nav-item-btn:hover,
.cy-fiche .cy-sidebar input[type="submit"].cy-nav-item-btn:hover,
.cy-fiche .cy-sidebar input[type="button"].cy-nav-item-btn:hover {
    background:var(--bg) !important;
    color:var(--navy) !important;
}
.cy-fiche .cy-sidebar .cy-nav-item-btn.cy-nav-item-active,
.cy-fiche .cy-sidebar input[type="submit"].cy-nav-item-btn.cy-nav-item-active,
.cy-fiche .cy-sidebar input[type="button"].cy-nav-item-btn.cy-nav-item-active {
    color:var(--navy) !important;
    background:linear-gradient(90deg, rgba(201,169,101,.14), transparent) !important;
    border-left-color:var(--gold) !important;
    font-weight:600 !important;
}

/* Point rouge de notification sur un nav-item (action en attente).
   Astuce : background radial-gradient en pseudo-positionnement (les <input type="submit">
   ne supportent pas ::after). À combiner avec le fond actif via background-blend-mode si besoin. */
.cy-fiche .cy-sidebar .cy-nav-item-btn.cy-has-notif,
.cy-fiche .cy-sidebar input[type="submit"].cy-nav-item-btn.cy-has-notif,
.cy-fiche .cy-sidebar input[type="button"].cy-nav-item-btn.cy-has-notif {
    background-image: radial-gradient(circle 5px at calc(100% - 16px) 50%, #dc2626 5px, transparent 6px) !important;
    background-repeat: no-repeat !important;
    background-position: 0 0 !important;
    padding-right: 36px !important;
}
.cy-fiche .cy-sidebar .cy-nav-item-btn.cy-has-notif.cy-nav-item-active,
.cy-fiche .cy-sidebar input[type="submit"].cy-nav-item-btn.cy-has-notif.cy-nav-item-active,
.cy-fiche .cy-sidebar input[type="button"].cy-nav-item-btn.cy-has-notif.cy-nav-item-active {
    /* Quand le bouton est actif ET a une notif, on cumule le gradient gold + le point rouge */
    background:
        radial-gradient(circle 5px at calc(100% - 16px) 50%, #dc2626 5px, transparent 6px),
        linear-gradient(90deg, rgba(201,169,101,.14), transparent) !important;
    background-repeat: no-repeat, repeat !important;
}


/* === TABS (vrais onglets — utilisé dans client/commande.aspx pour les 3 toggles
   "Mes services disponibles / en attente / Ajouter des services") === */
.cy-fiche .cy-tab-row {
    display:flex; flex-wrap:wrap; gap:2px;
    margin:14px 0 0 0;
    padding-bottom:0;
}
.cy-fiche .cy-tab-btn,
.cy-fiche input[type="submit"].cy-tab-btn,
.cy-fiche input[type="button"].cy-tab-btn {
    display:inline-flex; align-items:center; justify-content:center;
    height:40px;
    padding:0 22px;
    font-family:'Inter', sans-serif !important; font-size:13px !important; font-weight:600 !important;
    color:#FFFFFF !important;
    background:var(--gold);
    border:0;
    border-top-left-radius:10px; border-top-right-radius:10px;
    border-bottom-left-radius:0; border-bottom-right-radius:0;
    cursor:pointer;
    margin:0;
    -webkit-appearance:none; appearance:none;
    transition:all .18s var(--t);
    text-decoration:none;
    line-height:1;
}
.cy-fiche .cy-tab-btn:hover { background:var(--gold-dark); }
/* État actif : badge "active" géré par le .vb via BackColor inline = #82652F (gold-dark).
   Si le .vb migre vers CssClass active, cette règle prend le relais. */
.cy-fiche .cy-tab-btn.cy-tab-active,
.cy-fiche input[type="submit"].cy-tab-btn.cy-tab-active,
.cy-fiche input[type="button"].cy-tab-btn.cy-tab-active {
    background:var(--gold-dark);
}

/* Zone de contenu sous les tabs — bordure qui "se prolonge" depuis l'onglet actif */
.cy-fiche .cy-tab-content {
    background:#FFFFFF;
    border:1px solid var(--border);
    border-top:1px solid var(--gold-dark);
    border-radius:0 10px 10px 10px;
    padding:18px 20px;
    margin:0 0 14px 0;
}
/* Quand le contenu d'un onglet est masqué (Visible="False" côté .vb), il n'est pas rendu —
   donc cy-tab-content n'apparaît que pour le panel actif. */

/* === ERROR LABEL (message d'erreur — pendant rouge du success) === */
.cy-fiche .cy-error-label {
    color:#B91C1C;
    background:#FEF2F2;
    border:1px solid #FECACA;
    padding:8px 14px;
    border-radius:8px;
    font-size:13px;
    font-weight:500;
}


/* === GESTION_BAUX-SPECIFIC === */
/* Rules truly unique to personnel/baux/gestion_baux.aspx — do not migrate to other pages. */

.cy-fiche .cy-file-row { display:grid; grid-template-columns:240px 1fr; align-items:center; gap:16px; padding:12px 0; border-bottom:1px dashed var(--border); }
.cy-fiche .cy-file-row:last-of-type { border-bottom:none; }
.cy-fiche .cy-file-label { font-size:13px; color:var(--navy); font-weight:500; }
.cy-fiche .cy-file-label .cy-file-ext { color:var(--slate); font-style:italic; font-size:11px; margin-left:6px; font-weight:400; }
.cy-fiche .cy-file-row input[type="file"] {
    height:36px; padding:6px; border:1px solid var(--border); border-radius:8px;
    background:#FFFFFF; font-family:'Inter', sans-serif; font-size:12px; color:var(--navy);
}
.cy-fiche .cy-file-row a { color:var(--gold) !important; font-size:13px !important; text-decoration:underline !important; font-style:normal !important; }
.cy-fiche .auto-style3 { color:var(--slate) !important; font-style:italic; font-size:11px; }
.cy-fiche .labelpersonnel { font-family:inherit !important; }
.cy-fiche em { color:var(--slate); font-size:11px; font-style:italic; }
.cy-fiche input[type="image"][src*="ico_update"] { width:22px !important; height:22px !important; vertical-align:middle; cursor:pointer; opacity:0.65; }
.cy-fiche input[type="image"][src*="ico_update"]:hover { opacity:1; }
.cy-fiche input[type="image"][src*="visualiser"] { width:38px !important; height:38px !important; vertical-align:middle; }
.cy-fiche input[type="image"][src*="valide"],
.cy-fiche img[src*="valide"] { width:24px !important; height:auto !important; vertical-align:middle; }
.cy-fiche img[src*="echec"] { width:20px !important; height:auto !important; vertical-align:middle; }


/* === SHARED — placeholder vide pour sections sans données === */
.cy-fiche .cy-placeholder {
    text-align:center; padding:48px 24px;
    color:var(--slate); font-size:14px; font-style:italic;
}

/* Variante "page stub / en construction" : contenu structuré avec liste + statut.
   Détection via :has(ul) — quand le placeholder a une liste, on lève l'italique
   et on aligne à gauche pour rester lisible. */
.cy-fiche .cy-placeholder:has(ul) {
    text-align: left;
    font-style: normal;
    max-width: 560px;
    margin: 0 auto;
    padding: 32px 24px;
}
.cy-fiche .cy-placeholder ul {
    list-style: none;
    padding: 0;
    margin: 12px 0 24px;
}
.cy-fiche .cy-placeholder ul li {
    position: relative;
    padding: 8px 0 8px 28px;
    color: var(--ink);
    font-size: 14px;
    border-bottom: 1px solid var(--line-soft, rgba(0,0,0,.06));
}
.cy-fiche .cy-placeholder ul li:last-child { border-bottom: none; }
.cy-fiche .cy-placeholder ul li::before {
    content: "";
    position: absolute;
    left: 0; top: 12px;
    width: 18px; height: 18px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a86b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: .75;
}
.cy-fiche .cy-placeholder-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 8px 14px;
    background: rgba(201, 168, 107, .12);
    color: var(--gold-deep, #8a6f3a);
    border: 1px solid rgba(201, 168, 107, .35);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    font-style: normal;
}
.cy-fiche .cy-placeholder-status i { font-size: 16px; }

/* Petit texte d'annotation inline (ex. labels d'aide à côté d'un bouton ou d'une case) */
.cy-fiche .cy-helper-text { font-size:13px; color:var(--slate); }

/* === SHARED — input en lecture seule (style "info figée", pas un input désactivé)
   Utilisé par les User Controls client_form / site_form / societe_form en mode self
   ou quand un champ est admin-only (fiscalité, statut, etc.). === */
.cy-fiche .cy-input-readonly,
.cy-fiche input[readonly].cy-input-readonly,
.cy-fiche input[readonly] {
    background: var(--cream, #FAF7F2);
    color: var(--ink);
    cursor: default;
    border-color: var(--line-soft, rgba(0,0,0,.08));
}
.cy-fiche .cy-input-readonly:focus,
.cy-fiche input[readonly]:focus {
    outline: none;
    box-shadow: none;
}

/* === SHARED — card "création" (formulaire dépliable de création d'entité)
   Ex : "Nouvelle société", "Nouveau site" dans mon_profil.aspx. Visuellement
   un peu différenciée (fond crème + bordure or pâle) pour signaler que c'est
   un nouvel élément en cours de saisie, pas la consultation d'un existant. === */
.cy-fiche .cy-create-card {
    background: var(--cream, #FAF7F2);
    border: 1px solid var(--gold-pale, #E8D9B4);
    box-shadow: 0 1px 0 0 rgba(201, 168, 107, .08);
    margin-top: 16px;
}
.cy-fiche .cy-create-card .cy-card-title {
    color: var(--gold-deep, #8a6f3a);
}
.cy-fiche .cy-create-card .cy-card-title i { color: var(--gold-deep, #8a6f3a); }

/* === SHARED — sous-section dans un formulaire long (titre intermédiaire)
   Ex : "Paramètres administratifs" sous la fiche client en mode admin. === */
.cy-fiche .cy-subsection {
    grid-column: 1 / -1;
    margin: 16px 0 -4px 0;
    padding-top: 16px;
    border-top: 1px solid var(--line-soft, rgba(0,0,0,.08));
}
.cy-fiche .cy-subsection-title {
    font-family: 'Fraunces', serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--slate);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* Tooltip d'aide contextuelle (icône ?)
   Modernisation 2026-05 : on cache l'image legacy aide.jpg et on la remplace
   par une icône SVG ti-help-circle générée en CSS (data URI). La bulle passe
   en navy moderne avec flèche et fade-in au hover. Le markup HTML d'origine
   <span class="tooltip"><img class="disableSave"/><span class="tooltiptext"></span></span>
   reste inchangé — modification 100% CSS, applicable à toutes les pages. */
.cy-fiche .tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    cursor: help;
    vertical-align: middle;
    color: var(--slate-3);
    transition: color .15s;
}
.cy-fiche .tooltip:hover { color: var(--gold-dark); }

/* Cache UNIQUEMENT l'<img src="aide.jpg"> legacy à l'intérieur du span.tooltip.
   On préserve les vraies images (ex : cy-photo-thumb 32px utilisée comme
   miniature cliquable dans la cellule Photo des grids — voir check_list.aspx).
   Critère : img.disableSave QUI N'A PAS la classe cy-photo-thumb = icône aide. */
.cy-fiche .tooltip > img.disableSave:not(.cy-photo-thumb) {
    display: none !important;
}

/* Icône ? générée en CSS via SVG inline (ti-help-circle Tabler outline).
   Affichée UNIQUEMENT si le tooltip ne contient pas de vraie miniature photo —
   sinon la pastille ronde de la photo joue déjà ce rôle visuel. */
.cy-fiche .tooltip::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 17h.01'/%3E%3Cpath d='M12 13.5a1.5 1.5 0 0 1 1 -2.5a2 2 0 1 0 -3 -2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 17h.01'/%3E%3Cpath d='M12 13.5a1.5 1.5 0 0 1 1 -2.5a2 2 0 1 0 -3 -2'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
/* Si le tooltip contient une miniature photo VALIDE (src qui finit par une
   extension d'image), on masque l'icône ? et on libère la taille du wrapper.
   Si la photo est absente (src vide), .cy-photo-thumb est elle-même masquée
   par les règles existantes [src$=".jpg"] etc. → l'icône ? reste visible. */
.cy-fiche .tooltip:has(img.cy-photo-thumb[src$=".jpg"]),
.cy-fiche .tooltip:has(img.cy-photo-thumb[src$=".jpeg"]),
.cy-fiche .tooltip:has(img.cy-photo-thumb[src$=".png"]),
.cy-fiche .tooltip:has(img.cy-photo-thumb[src$=".heic"]),
.cy-fiche .tooltip:has(img.cy-photo-thumb[src$=".webp"]) {
    width: auto;
    height: auto;
}
.cy-fiche .tooltip:has(img.cy-photo-thumb[src$=".jpg"])::before,
.cy-fiche .tooltip:has(img.cy-photo-thumb[src$=".jpeg"])::before,
.cy-fiche .tooltip:has(img.cy-photo-thumb[src$=".png"])::before,
.cy-fiche .tooltip:has(img.cy-photo-thumb[src$=".heic"])::before,
.cy-fiche .tooltip:has(img.cy-photo-thumb[src$=".webp"])::before {
    display: none;
}

/* Bulle navy moderne avec flèche, fade-in au hover */
.cy-fiche .tooltip .tooltiptext {
    visibility: hidden;
    opacity: 0;
    width: 280px;
    background: var(--navy);
    color: #FFFFFF;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
    border: 0;
    border-radius: 8px;
    text-align: left;
    padding: 10px 14px;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    z-index: 50;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.20);
    transition: opacity .15s, transform .15s, visibility 0s linear .15s;
    pointer-events: none;
    white-space: normal;
}
.cy-fiche .tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    transition: opacity .15s, transform .15s, visibility 0s linear 0s;
}
/* Flèche pointant vers l'icône ? sous la bulle */
.cy-fiche .tooltip .tooltiptext::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--navy);
}

/* Variante "preview image" : quand le tooltip contient une vraie image (et
   non un texte d'aide), on libère le container — l'image fait elle-même le
   visuel, pas de fond navy ni de padding qui rognent.
   width:max-content garantit que le container prend la largeur naturelle de
   l'image (300px) même quand il est positionné absolute avec right:calc(),
   où width:auto fait du shrink-to-fit qui peut clipper l'image. */
.cy-fiche .tooltip .tooltiptext:has(img) {
    width: max-content;
    max-width: none;
    background: transparent;
    padding: 0;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.22);
}
.cy-fiche .tooltip .tooltiptext:has(img)::after {
    display: none;
}
.cy-fiche .tooltip .tooltiptext:has(img) img {
    display: block;
    margin: 0;
    max-width: none;
    border-radius: 8px;
}

/* Dans les grids, le preview image hérite de la règle parent
   `.cy-fiche .cy-table .tooltip .tooltiptext` qui le positionne à GAUCHE de
   l'icône, centré verticalement. Pas d'override spécifique image — comme
   convenu : ouverture à gauche, centrée en hauteur sur le bouton. */
/* Image dans un tooltip (ex : aperçu photo 300px du grid checklist) : ne pas déborder
   du tooltip de 320px, se contraindre à la largeur dispo, et se centrer pour
   éviter l'asymétrie visuelle (text-align: left du parent décalait l'image à gauche). */
.cy-fiche .tooltip .tooltiptext img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}
/* Tooltips DANS les grids : s'ouvrent à GAUCHE plutôt qu'au-dessus pour ne pas
   être tronqués (colonne Photo souvent à droite). Override du nouveau style :
   on annule le bottom + le translateX, et on positionne en horizontal à gauche
   avec une flèche pointant à droite vers l'icône. */
.cy-fiche .cy-table .tooltip .tooltiptext {
    right: calc(100% + 10px);
    left: auto;
    bottom: auto;
    top: 50%;
    margin: 0;
    transform: translateY(-50%) translateX(4px);
}
.cy-fiche .cy-table .tooltip:hover .tooltiptext {
    transform: translateY(-50%) translateX(0);
}
.cy-fiche .cy-table .tooltip .tooltiptext::after {
    top: 50%;
    left: 100%;
    margin: -6px 0 0 0;
    border-left: 6px solid var(--navy);
    border-right: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}
.cy-fiche .disableSave {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    width: 22px;
    vertical-align: middle;
}


/* =========================================================== */
/* === ETAT-SPECIFIC ========================================= */
/* Page-scoped rules used only by comptabilite/etat.aspx.      */
/* Generic .cy-fiche/.cy-header/.cy-card/.cy-table/.cy-btn      */
/* sont dans la section SHARED ci-dessus.                       */
/* =========================================================== */

/* Bandeau total en bas de la grille des factures émises */
.cy-fiche .cy-etat-total {
    display:flex; align-items:center; justify-content:flex-end;
    gap:12px;
    margin-top:16px; padding:14px 18px;
    background:var(--gold-pale); border:1px solid var(--gold-soft); border-radius:8px;
    font-size:14px;
}
.cy-fiche .cy-etat-total .cy-total-label { color:var(--slate); font-weight:500; }
.cy-fiche .cy-etat-total .cy-total-value {
    font-family:'Fraunces', Georgia, serif; font-weight:600; font-size:18px; color:var(--navy);
}

/* Texte d'alerte (« Décochez les factures non-payées ») hérité auto-style14 */
.cy-fiche .auto-style14 {
    color:var(--danger) !important;
    font-size:13px; font-weight:500; font-style:italic;
    margin:6px 0 14px 0;
}


/* === ACCES_SITE-SPECIFIC === */
/* Page personnel/acces_site.aspx — fiche d'accès à un lieu de travail (codes,
   wifi, contacts). Composants spécifiques : itinéraire GPS, codes en grille,
   blocs read-only formatés. */

/* ============================================================
   ACCES_SITE — CTA itinéraire moderne (cy-itineraire-cta)
   Remplace l'ancien pattern .cy-acces-itineraire (label slate +
   img PNG bleu) par un vrai CTA mobile-natif : bouton pleine
   largeur navy, icône Tabler à gauche, titre + adresse au centre,
   chevron à droite. Comportement tappable iOS/Android via
   cyItineraire() qui détecte la plateforme.
   ============================================================ */
.cy-fiche .cy-itineraire-cta {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    margin: 0 0 18px 0;
    background: var(--navy, #0F172A);
    border-radius: 14px;
    color: #FFFFFF !important;
    text-decoration: none !important;
    transition: transform .15s ease, background .15s ease;
    box-sizing: border-box;
    min-height: 68px;
    -webkit-tap-highlight-color: transparent;
}
.cy-fiche .cy-itineraire-cta:active {
    transform: scale(0.98);
    background: #1a2330;
}
.cy-fiche .cy-itineraire-cta-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cy-fiche .cy-itineraire-cta-icon > i {
    font-size: 22px;
    color: var(--gold, #C9A87D);
}
.cy-fiche .cy-itineraire-cta-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cy-fiche .cy-itineraire-cta-text > strong {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    color: #FFFFFF;
}
.cy-fiche .cy-itineraire-cta-addr {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cy-fiche .cy-itineraire-cta-chevron {
    flex-shrink: 0;
    font-size: 22px;
    color: rgba(255, 255, 255, 0.5);
}

/* Itinéraire legacy (gros bouton Maps émis par le code-behind) — conservé
   pour les autres pages qui l'utilisent encore. */
.cy-fiche .cy-acces-itineraire {
    display:flex; align-items:center; gap:16px; flex-wrap:wrap;
    margin:0 0 18px 0;
}
.cy-fiche .cy-acces-itineraire .cy-acces-label {
    font-size:13px; color:var(--slate); font-weight:500;
    text-transform:uppercase; letter-spacing:.04em;
}
.cy-fiche .cy-acces-gps-btn img {
    width:64px !important; height:auto !important; vertical-align:middle;
    transition:transform .2s var(--t);
}
.cy-fiche .cy-acces-gps-btn a { display:inline-block; }
.cy-fiche .cy-acces-gps-btn a:hover img { transform:scale(1.06); }

/* Photo de l'entrée du site */
.cy-fiche .cy-acces-photo {
    display:flex; align-items:center; gap:14px; flex-wrap:wrap;
    margin:0 0 20px 0;
    padding:14px;
    background:var(--gold-pale);
    border:1px solid var(--gold-soft, #E8DCB8);
    border-radius:10px;
}
.cy-fiche .cy-acces-photo .cy-acces-label {
    font-size:13px; color:var(--slate); font-weight:500;
}
.cy-fiche .cy-acces-photo-img {
    border:1px solid var(--border) !important;
    border-radius:6px;
    cursor:pointer;
    box-shadow:var(--shadow-sm);
}

/* Champ libellé/valeur en lecture seule (adresse postale, alarmes, info) */
.cy-fiche .cy-field-readonly {
    display:block;
    width:100%;
    margin:0 0 16px 0;
}
.cy-fiche span.cy-readonly-label,
.cy-fiche label.cy-readonly-label {
    display:block !important;
    width:100% !important;
    font-size:13px; color:var(--slate); font-weight:500;
    text-transform:uppercase; letter-spacing:.04em;
    margin:0 0 6px 0 !important;
    float:none !important;
}
.cy-fiche input[type="text"].cy-readonly-value,
.cy-fiche textarea.cy-readonly-value {
    display:block !important;
    width:100% !important;
    max-width:none !important;
    padding:10px 12px !important;
    border:1px solid var(--border) !important;
    border-radius:8px !important;
    background:#FFFFFF !important;
    font-family:'Inter', sans-serif !important;
    font-size:15px !important;
    color:var(--navy) !important;
    box-sizing:border-box !important;
    resize:none !important;
    float:none !important;
}
.cy-fiche textarea.cy-readonly-multi {
    min-height:54px;
    line-height:1.5;
}

/* Grille de codes (portail/immeuble/keybox, wifi, cadenas) — texte du code en grand,
   facile à copier-coller depuis mobile */
.cy-fiche .cy-code-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:14px;
    margin:0 0 16px 0;
}
.cy-fiche .cy-code-cell {
    display:flex; flex-direction:column; gap:6px;
    padding:14px 16px;
    background:var(--gold-pale);
    border:1px solid var(--gold-soft, #E8DCB8);
    border-radius:10px;
}
.cy-fiche .cy-code-label {
    font-size:12px; color:var(--slate); font-weight:600;
    text-transform:uppercase; letter-spacing:.05em;
}
.cy-fiche input[type="text"].cy-code-value,
.cy-fiche textarea.cy-code-value {
    width:100%;
    padding:6px 0;
    border:0 !important;
    background:transparent !important;
    font-family:'Inter', sans-serif !important;
    font-size:22px !important;
    font-weight:600 !important;
    color:var(--navy) !important;
    letter-spacing:.02em;
    line-height:1.3;
    box-sizing:border-box;
    resize:none;
}
.cy-fiche input[type="text"].cy-code-value:focus,
.cy-fiche textarea.cy-code-value:focus {
    outline:none;
    background:#FFFFFF !important;
    border-radius:4px;
}

/* Variante : grille forcée 2 colonnes (alarmes, codes cadenas) — auto-fit avec
   minmax plus large pour éviter de se compresser sur des textes longs. */
.cy-fiche .cy-code-grid.cy-code-grid-2 {
    grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
}

/* Variante : cellule pour texte procédural (alarmes, codes cadenas, autres
   infos) — police plus petite. Désormais les valeurs sont rendues en asp:Label
   (= <span class="cy-code-value">) qui s'adapte naturellement au contenu.
   Le sélecteur cible donc à la fois les <span> (Label) et les anciens
   <textarea> (TextBox MultiLine) pour rétro-compat.
   white-space: pre-wrap préserve les sauts de ligne du texte. */
.cy-fiche .cy-code-cell.cy-code-cell-text span.cy-code-value,
.cy-fiche .cy-code-cell.cy-code-cell-text textarea.cy-code-value {
    display: block;
    font-family: 'Inter', sans-serif !important;
    font-size:14.5px !important;
    font-weight:500 !important;
    line-height:1.55;
    padding:6px 0;
    white-space:pre-wrap;
    word-wrap: break-word;
    color: var(--navy, #0F172A);
}

/* Cellules autonomes (enfant direct d'une cy-card, hors d'un cy-code-grid) :
   ajout d'un margin-bottom pour les séparer de l'élément suivant — sinon
   "Autres informations" colle au cy-code-grid des alarmes. Les cellules dans
   un grid gardent leur espacement géré par le gap du grid. */
.cy-fiche .cy-card > .cy-code-cell {
    margin-bottom: 14px;
}

/* ============================================================
   FUSION VISUELLE DE 2 CARDS (faux-merge sans couture)
   Utilisé quand 2 cy-card consécutives doivent paraître être 1 seule.
   Sur acces_site.aspx : "Aller jusqu'au lieu" + "Aides complémentaires"
   (structurellement séparées par le Repeater, visuellement unifiées).
   Approche moderne : pas de trait de séparation, paddings ajustés pour
   que les 2 cellules cy-code-cell-text à l'intérieur s'enchaînent
   naturellement avec leur gap habituel. L'œil ne voit qu'une seule
   card avec plusieurs éléments empilés.
   ============================================================ */
.cy-fiche .cy-card.cy-card-merge-bottom {
    margin-bottom: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom: none !important;
    /* Padding-bottom légèrement réduit : la cy-code-cell suivante a son
       propre padding-top qui équilibre l'espacement entre les 2 sections. */
    padding-bottom: 12px !important;
}
.cy-fiche .cy-card.cy-card-merge-top {
    margin-top: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-top: none !important;
    padding-top: 0 !important;
}

/* Variante : champ multi-ligne plus haut (« Autres informations » plein largeur) */
.cy-fiche textarea.cy-readonly-multi-tall {
    min-height:90px;
}

/* Bloc Contacts */
.cy-fiche .cy-acces-contact {
    display:flex; align-items:center; gap:14px; flex-wrap:wrap;
    font-size:15px;
}
.cy-fiche .cy-acces-contact-name {
    font-weight:600; color:var(--navy);
}
.cy-fiche .cy-acces-contact-tel {
    color:var(--gold) !important;
    font-weight:600;
    text-decoration:none;
    padding:4px 10px;
    border:1px solid var(--gold);
    border-radius:6px;
    transition:all .2s var(--t);
}
.cy-fiche .cy-acces-contact-tel:hover {
    background:var(--gold);
    color:#FFFFFF !important;
}


/* === RAPPORT-SPECIFIC === */
/* Page personnel/rapport.aspx — fiche compte-rendu d'intervention. Filtres
   3 dropdowns en barre, checklist avec checkbox, textarea commentaires,
   upload photo, radio Oui/Non, bouton d'envoi. */

/* Barre de 3 filtres en haut (site / métier / date) */
.cy-fiche .cy-rapport-filters {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    gap:12px;
    padding:14px 32px;
    background:#FFFFFF;
    border-bottom:1px solid var(--border);
}
.cy-fiche .cy-rapport-filter {
    display:flex; flex-direction:column; gap:4px;
}
.cy-fiche .cy-rapport-filter > label {
    font-size:11px; font-weight:600; color:var(--slate);
    text-transform:uppercase; letter-spacing:.05em;
}
.cy-fiche .cy-rapport-filter select {
    height:38px;
    padding:0 12px;
    border:1px solid var(--border);
    border-radius:8px;
    background:#FFFFFF;
    font-family:'Inter', sans-serif;
    font-size:14px;
    color:var(--navy);
    cursor:pointer;
}
.cy-fiche .cy-rapport-filter select:focus {
    outline:none; border-color:var(--gold);
    box-shadow:0 0 0 3px rgba(201,169,101,.15);
}

/* Texte riche émis par .vb (Literal client / message_gouvernant) */
.cy-fiche .cy-rapport-richtext {
    font-size:15px; line-height:1.55; color:var(--navy);
}
.cy-fiche .cy-rapport-richtext a {
    color:var(--gold); text-decoration:none; font-weight:500;
}
.cy-fiche .cy-rapport-richtext a:hover { text-decoration:underline; }
.cy-fiche .labelmessage { /* hérité du .vb sur message_gouvernant */
    background:var(--gold-pale);
    border-left:3px solid var(--gold);
    padding:14px 16px;
    border-radius:0 8px 8px 0;
}

/* Section "obligatoire" badge */
.cy-fiche .cy-card-required {
    color:var(--danger);
    font-size:12px; font-weight:600;
    text-transform:none;
    margin-left:6px;
}
.cy-fiche .cy-card-subtitle {
    font-family:'Fraunces', Georgia, serif;
    font-size:17px; font-weight:600; color:var(--navy);
    margin:24px 0 12px 0;
    text-transform:none;
    letter-spacing:0;
    font-style:normal;
}

/* Petit complément discret en italique placé inline à la suite d'un cy-card-title
   (par exemple : « Notez vos intervenants <span class=cy-title-hint>(info confidentielle…)</span> ») */
.cy-fiche .cy-title-hint {
    font-family:'Inter', sans-serif;
    font-size:12px; font-weight:400; font-style:italic;
    color:var(--slate);
    margin-left:8px;
    text-transform:none;
    letter-spacing:0;
}

/* Inventaire linges */
.cy-fiche .cy-rapport-identifiant {
    display:block; font-size:18px; font-weight:600; color:var(--navy);
    margin-bottom:8px;
}
.cy-fiche .cy-rapport-info {
    color:var(--slate); font-size:13px; font-style:italic;
    margin:0 0 14px 0;
}

/* Bannière "mode consultation" sur rapport.aspx — affichée uniquement
   quand l'utilisateur arrive depuis le bouton "Travail" de planning.aspx
   (Visible=True activé par sub ActiverModeConsultation côté .vb). */
.cy-fiche .cy-card-consultation {
    border-left: 4px solid var(--gold, #C9A87D);
    background: var(--cream, #FAF7F2);
}
.cy-fiche .cy-card-consultation .cy-card-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--navy, #0F172A);
}
.cy-fiche .cy-card-consultation .cy-card-title > i {
    color: var(--gold-dark, #B08F4D);
    font-size: 22px;
}
.cy-fiche .cy-card-consultation .cy-rapport-info {
    font-style: normal;  /* override italic pour cette bannière info */
    color: var(--navy, #0F172A);
    font-size: 14px;
}
.cy-fiche input[type="text"].cy-rapport-qty {
    width:60px !important; height:36px;
    padding:6px 8px;
    border:1px solid var(--border);
    border-radius:6px;
    text-align:center;
    font-size:16px; font-weight:600;
    color:var(--navy);
}
.cy-fiche .cy-rapport-qty-btn,
.cy-fiche input[type="submit"].cy-rapport-qty-btn {
    min-width:60px !important;
    height:36px !important;
    padding:0 12px !important;
    font-weight:600 !important;
}

/* Checklist (CheckBoxList rendu en <table> par ASP.NET) — pattern card-pill.
   Chaque <tr><td><input><label></td></tr> devient une card cliquable :
   native checkbox cachée, label stylé en card, état .is-done (posé par JS)
   applique fond crème + bordure or + check badge + line-through. */
.cy-fiche .cy-rapport-checklist {
    width:100%;
    border:0;
    border-collapse:separate;
    border-spacing:0 8px;
    margin:0 0 4px 0;
}
.cy-fiche .cy-rapport-checklist tr {
    display:block;
    margin:0 0 8px 0;
}
.cy-fiche .cy-rapport-checklist tr:last-child {
    margin-bottom:0;
}
.cy-fiche .cy-rapport-checklist td {
    display:block;
    padding:0;
    vertical-align:initial;
}

/* Native checkbox caché (gardé en DOM pour le postback côté ASP.NET) */
.cy-fiche .cy-rapport-checklist input[type="checkbox"] {
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    opacity:0 !important;
    pointer-events:none !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
}

/* Label = card cliquable. Le for="" du label déclenche le checkbox quand cliqué. */
.cy-fiche .cy-rapport-checklist label {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    background:#FFFFFF;
    border:1px solid var(--border);
    border-left:3px solid var(--border);
    border-radius:10px;
    padding:13px 16px;
    cursor:pointer;
    user-select:none;
    font-size:16px;
    font-weight:400;
    line-height:1.4;
    color:var(--navy);
    transition:background 220ms ease, border-color 220ms ease, color 220ms ease;
    width:100%;
    box-sizing:border-box;
}
.cy-fiche .cy-rapport-checklist label:hover {
    border-color:var(--gold);
}

/* Badge check à droite — créé via ::after pour ne pas toucher au markup */
.cy-fiche .cy-rapport-checklist label::after {
    content:"";
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
    border-radius:50%;
    border:1px solid var(--border);
    background:#FFFFFF;
    flex-shrink:0;
    transition:all 220ms ease;
    font-size:14px;
    color:#FFFFFF;
    font-weight:600;
}

/* État done : fond crème + bordure or + texte ambre dim + line-through + check.
   PHASE 1 MULTI-USER : le line-through est déplacé du label vers .cy-task-text
   (span ajouté par JS qui n'enveloppe que le texte du libellé) afin de ne PAS
   barrer visuellement la bulle .cy-task-author ni le ✓ pseudo-element. */
.cy-fiche .cy-rapport-checklist tr.is-done label {
    background:#FFF9EE;
    border-color:#E8D9B5;
    border-left-color:var(--gold);
    color:#94774F;
}
.cy-fiche .cy-rapport-checklist tr.is-done label .cy-task-text {
    text-decoration:line-through;
    text-decoration-color:rgba(148,119,79,0.4);
    text-decoration-thickness:1.5px;
}
.cy-fiche .cy-rapport-checklist tr.is-done label::after {
    content:"✓";
    background:var(--gold);
    border-color:var(--gold);
}

/* ===================================================================
   PROGRESS intégré dans le bouton accordion sticky :
   - Compteur "X/Y" à droite du titre (inline, 0px vertical)
   - Ligne 3px tout en bas du bouton (remplace le border-bottom or)
   Le compteur + la barre restent visibles pendant le scroll grâce au
   position:sticky du bouton ancestor. Injectés par JS dans setupChecklist.
   =================================================================== */

/* Le bouton doit être position:relative pour que la barre absolute s'ancre */
.cy-fiche .cy-acc-btn {
    position:relative;
}

/* Compteur "X/Y" inline avant le chevron */
.cy-fiche .cy-acc-counter {
    font-family:'Inter', system-ui, sans-serif;
    font-size:13px;
    font-weight:500;
    color:#94A3B8;
    font-variant-numeric:tabular-nums;
    margin-right:8px;
    flex-shrink:0;
    letter-spacing:0.2px;
}
.cy-fiche .cy-acc-counter b {
    font-weight:600;
    color:var(--gold);
}

/* Barre progress 3px collée tout en bas du bouton */
.cy-fiche .cy-acc-progress-line {
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:3px;
    background:#F1F5F9;
    display:block;
    pointer-events:none;
}
.cy-fiche .cy-acc-progress-line-fill {
    display:block;
    height:100%;
    background:var(--gold);
    width:0%;
    transition:width 320ms ease;
}

/* Quand le bouton contient déjà une barre progress, on supprime son
   border-bottom gold (sinon doublon — la barre fait office d'indicateur). */
.cy-fiche .cy-acc-item.open > .cy-acc-btn:has(.cy-acc-progress-line) {
    border-bottom:0;
}

/* Message « Rien à réaliser aujourd'hui dans cette rubrique » */
.cy-fiche .cy-rapport-empty {
    display:block;
    font-style:italic; color:var(--slate);
    padding:14px 0;
    font-size:14px;
}

/* Textarea commentaires client */
.cy-fiche textarea.cy-rapport-textarea {
    width:100% !important;
    min-height:160px;
    padding:14px 16px !important;
    border:1px solid var(--border) !important;
    border-radius:8px !important;
    background:#FFFFFF !important;
    font-family:'Inter', sans-serif !important;
    font-size:16px !important;
    color:var(--navy) !important;
    line-height:1.55;
    resize:vertical !important;
    box-sizing:border-box !important;
}
.cy-fiche textarea.cy-rapport-textarea:focus {
    outline:none;
    border-color:var(--gold) !important;
    box-shadow:0 0 0 3px rgba(201,169,101,.15);
}

/* PHASE 1 MULTI-USER — Auteur sous-titre sur une tâche cochée par l'équipe.
   Le line-through du label "done" est désormais sur .cy-task-text (sibling),
   donc la bulle est naturellement non-barrée. */
.cy-fiche .cy-rapport-checklist .cy-task-author {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    margin-top: 4px;
    font-style: normal;
    background: rgba(201, 169, 101, 0.22);
    padding: 4px 12px;
    border-radius: 12px;
    vertical-align: middle;
    white-space: nowrap;
    line-height: 1.3;
}
/* Mobile (≤ 600px) : bulle plus grosse pour cible tactile correcte */
@media (max-width: 600px) {
    .cy-fiche .cy-rapport-checklist .cy-task-author {
        font-size: 14px;
        padding: 5px 14px;
    }
}

/* PHASE 1 MULTI-USER — Commentaires d'équipe (lecture seule, peuplé par JS) */
.cy-fiche .cy-team-comments {
    margin: 0 0 18px 0;
    padding: 14px 16px;
    background: #FAF8F2;
    border: 1px solid var(--border);
    border-radius: 8px;
}
.cy-fiche .cy-team-comments .cy-card-subtitle {
    margin: 0 0 10px 0;
    color: var(--navy);
}
.cy-fiche .cy-team-comments-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.cy-fiche .cy-team-comments-list li {
    padding: 8px 0;
    border-bottom: 1px dashed var(--border);
    font-size: 15px;
    color: var(--navy);
}
.cy-fiche .cy-team-comments-list li:last-child {
    border-bottom: none;
}
.cy-fiche .cy-team-comments-list .cy-team-comment-author {
    font-weight: 600;
    color: var(--gold);
    margin-right: 6px;
}

/* PHASE 1 MULTI-USER — Bannière de verrouillage post-envoi du compte-rendu.
   Affichée en haut de la fiche quand boot.is_sent=true, signale que le rapport
   est figé et inmodifiable. Sélecteur sans préfixe .cy-fiche pour matcher
   partout où le JS insère la bannière. */
.cy-lock-banner {
    background: linear-gradient(180deg, #FFFBEB 0%, #FEF3C7 100%) !important;
    border: 1px solid #FCD34D !important;
    border-left: 4px solid #D97706 !important;
    color: #92400E !important;
    padding: 14px 18px !important;
    margin: 0 0 16px 0 !important;
    border-radius: 8px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}
.cy-lock-banner i {
    font-size: 20px !important;
    color: #D97706 !important;
}
.cy-lock-banner strong {
    color: #92400E !important;
    font-weight: 700 !important;
}

/* PHASE 1 MULTI-USER — Retours d'équipe (refactor : carte par retour) */
.cy-fiche .cy-team-retours {
    margin: 0 0 18px 0;
    padding: 14px 16px;
    background: #FAF8F2;
    border: 1px solid var(--border);
    border-radius: 8px;
}
.cy-fiche .cy-team-retours .cy-card-subtitle {
    margin: 0 0 12px 0;
    color: var(--navy);
}
.cy-fiche .cy-team-retours-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cy-fiche .cy-retour {
    background: #FFFFFF;
    border: 1px solid #E8DFC8;
    border-left: 3px solid var(--gold);
    border-radius: 6px;
    padding: 10px 12px;
}
.cy-fiche .cy-retour-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    gap: 10px;
}
.cy-fiche .cy-retour-author {
    font-size: 13px;
    font-weight: 600;
    color: var(--gold-dark);
}
.cy-fiche .cy-retour-delete {
    background: transparent;
    border: none;
    color: #B23838;
    font-size: 12px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
}
.cy-fiche .cy-retour-delete:hover {
    background: rgba(178, 56, 56, 0.08);
}
.cy-fiche .cy-retour-text {
    font-size: 14px;
    color: var(--navy);
    line-height: 1.45;
    white-space: pre-wrap;
}
.cy-fiche .cy-retour-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
    gap: 6px;
    margin-top: 8px;
}
.cy-fiche .cy-retour-photo {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: #FFF;
    text-decoration: none;
    transition: transform .15s ease, border-color .15s ease;
}
.cy-fiche .cy-retour-photo:hover {
    border-color: var(--gold);
    transform: translateY(-1px);
}
.cy-fiche .cy-retour-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cy-fiche .cy-retour-photo-broken {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 11px;
    color: var(--slate);
    padding: 4px;
    text-align: center;
    word-break: break-all;
}
.cy-fiche .cy-retour-photo-broken i {
    font-size: 22px;
    margin-bottom: 2px;
    color: var(--gold);
}

/* Bouton "Ajouter une photo" qui remplace le file input natif moche.
   Le file input réel est caché via .cy-visually-hidden, le label cliquable
   ci-dessous déclenche le picker (Photothèque / Appareil photo / Fichiers
   sur iOS, Finder sur macOS). */
.cy-fiche .cy-btn-photo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 18px;
    background: var(--gold-pale, #F3E9CD);
    color: var(--navy);
    border: 1px dashed var(--gold);
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s var(--t), border-color .18s var(--t), color .18s var(--t);
    user-select: none;
    -webkit-user-select: none;
}
.cy-fiche .cy-btn-photo:hover {
    background: var(--gold);
    color: #FFFFFF;
    border-color: var(--gold);
}
.cy-fiche .cy-btn-photo:active {
    background: #B89958;
}
.cy-fiche .cy-btn-photo i {
    font-size: 18px;
    line-height: 1;
}

/* Prévisualisation des fichiers sélectionnés (avant clic Enregistrer) */
.cy-fiche .cy-photo-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 6px;
    margin-top: 8px;
}
.cy-fiche .cy-photo-preview-item {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 6px;
    border: 1px dashed var(--gold);
    background: rgba(201, 169, 101, 0.06);
}
.cy-fiche .cy-photo-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cy-fiche .cy-photo-preview-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    color: #FFFFFF;
    border: none;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-appearance: none;
    appearance: none;
}
.cy-fiche .cy-photo-preview-remove:hover {
    background: rgba(0, 0, 0, 0.85);
}

/* Bouton Enregistrer ce retour : marge top pour distinguer du fileupload */
.cy-fiche .cy-btn-enregistrer-retour {
    margin-top: 12px;
}
.cy-fiche .cy-nouveau-retour-titre {
    margin-top: 18px;
}

/* Upload photo */
.cy-fiche .cy-rapport-upload-row {
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    margin:0 0 14px 0;
}
.cy-fiche .cy-rapport-fileupload input[type="file"] {
    height:38px;
    padding:6px;
    border:1px solid var(--border);
    border-radius:8px;
    background:#FFFFFF;
    font-family:'Inter', sans-serif;
    font-size:13px;
    color:var(--navy);
    cursor:pointer;
}
.cy-fiche .cy-rapport-photos {
    display:flex; flex-wrap:wrap; gap:12px;
    margin:0 0 16px 0;
}
.cy-fiche .cy-rapport-photos img {
    max-width:140px; height:auto;
    border:1px solid var(--border);
    border-radius:6px;
    cursor:pointer;
    box-shadow:var(--shadow-sm);
    transition:transform .18s var(--t);
}
.cy-fiche .cy-rapport-photos img:hover { transform:scale(1.04); }

/* Bloc « Confirmez l'envoi » avec radio inline */
.cy-fiche .cy-rapport-confirm {
    display:flex; align-items:center; gap:18px; flex-wrap:wrap;
    padding:14px 16px;
    background:var(--gold-pale);
    border:1px solid var(--gold-soft);
    border-radius:10px;
    margin:0 0 18px 0;
    font-size:15px;
}
.cy-fiche .cy-rapport-radio-inline {
    border:0;
}
.cy-fiche .cy-rapport-radio-inline td {
    padding:0 14px 0 0;
}
.cy-fiche .cy-rapport-radio-inline input[type="radio"] {
    width:18px; height:18px;
    margin:0 6px 0 0;
    accent-color:var(--gold);
    cursor:pointer;
    vertical-align:middle;
}
.cy-fiche .cy-rapport-radio-inline label {
    font-size:15px; font-weight:500; color:var(--navy);
    cursor:pointer; vertical-align:middle;
}

/* Variante : bouton plus large pour action principale (envoyer rapport) */
.cy-fiche .cy-btn.cy-btn-large,
.cy-fiche input[type="submit"].cy-btn-large,
.cy-fiche input[type="button"].cy-btn-large {
    height:48px !important;
    min-width:240px !important;
    padding:0 32px !important;
    font-size:15px !important;
    font-weight:600 !important;
}

/* ===================================================================
   ENVOI DU COMPTE-RENDU : toggle iOS-style + CTA pleine largeur
   Utilisé dans rapport.aspx > panel_envoi (passe 2).
   Le toggle .cy-toggle sync via JS le RadioButtonList caché.
   =================================================================== */

/* Utilitaire d'accessibilité : masque visuellement mais reste accessible
   au lecteur d'écran et au DOM (le RadioButtonList caché en est l'usage
   principal — le .vb continue à lire SelectedValue). */
.cy-visually-hidden {
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
    border:0 !important;
}

/* Toggle iOS-style. Structure :
   <label class="cy-toggle">
     <input type="checkbox" />
     <span class="cy-toggle-slider"></span>
     <span class="cy-toggle-label">Texte</span>
   </label>
*/
.cy-fiche .cy-toggle {
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 16px;
    margin:0 0 20px 0;
    background:#F8FAFC;
    border:1px solid var(--border);
    border-radius:12px;
    cursor:pointer;
    user-select:none;
    transition:background 160ms ease, border-color 160ms ease;
}
.cy-fiche .cy-toggle:hover {
    background:#F1F5F9;
}

/* Input checkbox réel : caché mais reste source de vérité */
.cy-fiche .cy-toggle input[type="checkbox"] {
    position:absolute;
    opacity:0;
    pointer-events:none;
    width:0; height:0;
    margin:0;
}

/* Slider visuel : 44x24 piste avec pastille 20x20 qui glisse */
.cy-fiche .cy-toggle-slider {
    position:relative;
    display:inline-block;
    width:44px;
    height:24px;
    flex:0 0 44px;
    background:#CBD5E1;
    border-radius:999px;
    transition:background 200ms ease;
}
.cy-fiche .cy-toggle-slider::after {
    content:"";
    position:absolute;
    top:2px;
    left:2px;
    width:20px;
    height:20px;
    background:#FFFFFF;
    border-radius:50%;
    box-shadow:0 1px 3px rgba(0,0,0,0.2);
    transition:left 200ms ease;
}

/* État checked : piste devient gold, pastille glisse à droite */
.cy-fiche .cy-toggle input[type="checkbox"]:checked + .cy-toggle-slider {
    background:var(--gold);
}
.cy-fiche .cy-toggle input[type="checkbox"]:checked + .cy-toggle-slider::after {
    left:22px;
}

/* Focus visible (clavier/accessibilité) */
.cy-fiche .cy-toggle input[type="checkbox"]:focus-visible + .cy-toggle-slider {
    box-shadow:0 0 0 3px rgba(208,176,112,0.35);
}

/* Label texte à droite du slider */
.cy-fiche .cy-toggle-label {
    flex:1 1 auto;
    font-size:15px;
    font-weight:600;
    color:var(--navy);
    line-height:1.35;
}

/* Variant : card envoi — padding un peu plus aéré, et on cache le RBL
   d'origine (rendu en <span><input radio><label>...) pour ne laisser
   visible que le toggle. */
.cy-fiche .cy-card.cy-card-envoi {
    padding-bottom:22px;
}
.cy-fiche .cy-card.cy-card-envoi .cy-rapport-radio-inline {
    /* RadioButtonList masqué : remplace par le toggle. */
    display:none !important;
}

/* Bouton pleine largeur — variante du cy-btn-large pour CTA primaire
   en bas de formulaire mobile. */
.cy-fiche .cy-btn.cy-btn-block,
.cy-fiche input[type="submit"].cy-btn-block,
.cy-fiche input[type="button"].cy-btn-block {
    display:block;
    width:100%;
    height:52px !important;
    min-width:0 !important;
    padding:0 24px !important;
    font-size:16px !important;
    font-weight:700 !important;
    letter-spacing:0.2px;
}

/* Variante encore plus marquée pour le bouton "Envoyer le compte-rendu" :
   shadow gold subtile pour souligner l'importance de l'action. */
.cy-fiche .cy-btn.cy-btn-envoi {
    box-shadow:0 4px 14px rgba(208,176,112,0.35);
}
.cy-fiche .cy-btn.cy-btn-envoi:hover {
    box-shadow:0 6px 18px rgba(208,176,112,0.45);
    transform:translateY(-1px);
}
.cy-fiche .cy-btn.cy-btn-envoi:active {
    transform:translateY(0);
    box-shadow:0 2px 8px rgba(208,176,112,0.3);
}

/* ===================================================================
   ACCORDION (rapport.aspx) : 7 cards stackées en boutons-titres
   - .cy-acc-stack : conteneur des items
   - .cy-acc-item  : un item (toujours = un asp:Panel.cy-card)
   - .cy-acc-btn   : titre cliquable, sticky en haut quand item ouvert
   - .cy-acc-content : contenu, hidden par défaut, visible si .open
   Quand un item est .open, les autres items (closed) sont display:none
   via le sélecteur :has() — donc la card ouverte occupe tout l'écran
   et son titre reste collé au top au scroll.
   =================================================================== */

/* Conteneur de la stack : wrap autour de toutes les cards.
   On retire le margin-bottom des cards individuelles (cy-card en a
   normalement) et on regroupe sous un seul cadre arrondi. */
.cy-fiche .cy-acc-stack {
    display:flex;
    flex-direction:column;
    background:#FFFFFF;
    border:1px solid var(--border);
    border-radius:14px;
    overflow:hidden;
    margin:0 0 24px 0;
}

/* Override cy-card sur les items accordion : pas de padding, pas de
   margin, pas de border individuelle (la stack a déjà la sienne). */
.cy-fiche .cy-card.cy-acc-item {
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    background:#FFFFFF;
    border-bottom:1px solid var(--border);
}
.cy-fiche .cy-acc-stack > .cy-acc-item:last-child {
    border-bottom:0;
}

/* Bouton-titre : cliquable, sticky quand l'item est ouvert */
.cy-fiche .cy-acc-btn {
    width:100%;
    background:#FFFFFF;
    border:0;
    padding:16px 20px;
    text-align:left;
    font-family:var(--font-serif, 'Fraunces', serif);
    font-size:18px;
    font-weight:500;
    color:var(--navy);
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    transition:background 160ms ease, color 160ms ease;
    margin:0;
    line-height:1.3;
}
.cy-fiche .cy-acc-btn:hover {
    background:#F8FAFC;
}
.cy-fiche .cy-acc-btn:focus-visible {
    outline:2px solid var(--gold-soft, rgba(208,176,112,0.5));
    outline-offset:-2px;
}

.cy-fiche .cy-acc-btn-text {
    flex:1 1 auto;
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

/* Chevron Tabler (ti-chevron-down) : pointe vers le bas quand fermé,
   rotation 180° (vers le haut) quand l'item est ouvert. Couleur navy
   fort pour bonne visibilité ; gold quand ouvert (cohérent avec la
   barre de progression du même bouton). */
.cy-fiche .cy-acc-chev {
    color:var(--navy);
    font-size:22px;
    line-height:1;
    transition:transform 220ms ease, color 220ms ease;
    flex-shrink:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
}

/* Contenu : caché par défaut, visible quand item .open
   padding-top:18px = breathing room sous le bouton sticky pour éviter
   que la 1re ligne du contenu soit collée au border-bottom or du bouton. */
.cy-fiche .cy-acc-content {
    display:none;
    padding:18px 20px 22px 20px;
    background:#FFFFFF;
}

/* État ouvert : content visible, bouton accent gold + sticky en haut */
.cy-fiche .cy-acc-item.open > .cy-acc-content {
    display:block;
}
.cy-fiche .cy-acc-item.open > .cy-acc-btn {
    background:#FFF9EE;
    border-bottom:2px solid var(--gold);
    box-shadow:0 1px 3px rgba(0,0,0,0.04);
    position:sticky;
    /* Bouton collé tout en haut de l'écran (UX focus : on masque brand-bar +
       header de page quand un item est ouvert pour maximiser l'espace de
       travail, voir règle .cy-fiche:has(.cy-acc-item.open) ci-dessous). */
    top:0;
    z-index:50;
}
.cy-fiche .cy-acc-item.open > .cy-acc-btn .cy-acc-chev {
    transform:rotate(180deg);
    /* On garde navy même en open : le gold sur fond crème (#FFF9EE) manquait
       de contraste sur écran téléphone. La rotation 180° suffit à signaler
       visuellement que l'item est déroulé. */
    color:var(--navy);
}

/* CASCADE :has — quand UN item est ouvert, on cache les AUTRES items
   complètement. Du coup la stack n'affiche QUE la card ouverte avec
   son titre sticky. */
.cy-fiche .cy-acc-stack:has(.cy-acc-item.open) .cy-acc-item:not(.open) {
    display:none !important;
}

/* Quand un item est ouvert, on cache TOUT ce qui n'est pas la card ouverte :
   - brand-bar Conciergya (gain 48px) + header de page (back-btn + h1)
   - badge "En activité" (panel_presta_active)
   - bannière mode consultation
   - padding-top:24px et padding-bottom:60px du <main class="cy-content">
     (inline style, donc !important obligatoire pour override)
   Résultat : le bouton sticky de la card vient se coller à top:0 du viewport,
   et le concierge a 100% de l'écran pour saisir son compte-rendu. À la
   fermeture, tout réapparaît automatiquement. */
.cy-fiche:has(.cy-acc-item.open) .cy-brand-bar,
.cy-fiche:has(.cy-acc-item.open) .cy-header,
.cy-fiche:has(.cy-acc-item.open) .cy-presta-active-badge,
.cy-fiche:has(.cy-acc-item.open) .cy-card-consultation {
    display:none !important;
}
/* NB : le badge "En activité" (panel_presta_active) est désormais déplacé
   APRÈS la cy-acc-stack et transformé en bouton dépointage. La règle ci-
   dessus continue de le masquer quand un item est ouvert (cohérent avec
   le focus saisie). À la fermeture, il réapparaît en bas comme bouton. */
.cy-fiche:has(.cy-acc-item.open) main.cy-content {
    padding-top:0 !important;
    padding-bottom:0 !important;
}

/* Quand un item est ouvert :
   - stack pleine largeur (margin négatif négatif les padding du main)
   - plus de border-radius / borders top/left/right
   - **overflow:visible** ← CRITIQUE : sans ça, position:sticky du bouton
     se calcule par rapport au cadre de la stack (overflow:hidden = nouveau
     contexte de positionnement) et le titre disparaît au scroll. */
.cy-fiche .cy-acc-stack:has(.cy-acc-item.open) {
    border-radius:0;
    border-left:0;
    border-right:0;
    border-top:0;
    margin-left:-32px;
    margin-right:-32px;
    margin-top:0;
    overflow:visible;
}

/* Fallback navigateurs sans :has() — l'accordion fonctionne quand même,
   mais sans le hide-others. Cible Chrome 105+, Firefox 121+, Safari 15.4+.
   Sur navigateurs anciens, on a juste tous les titres visibles + l'item
   ouvert développé en dessous (UX dégradée mais fonctionnelle). */

/* ===================================================================
   TRAVAIL À RÉALISER — filtre par zone (pills)
   Pills horizontales en haut de la checklist. Tap = filtre par zone.
   Le JS extrait les zones du préfixe des libellés (chapitre - libelle).
   =================================================================== */
.cy-fiche .cy-zone-filter-wrap {
    margin:0 0 12px 0;
}
.cy-fiche .cy-zone-pills {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    padding:0 0 12px 0;
    margin:0 0 12px 0;
    border-bottom:1px solid var(--border);
}
.cy-fiche .cy-zone-pill {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:7px 14px;
    border:1px solid var(--border);
    background:#FFFFFF;
    color:var(--navy);
    font-family:'Inter', system-ui, sans-serif;
    font-size:13px;
    font-weight:500;
    border-radius:999px;
    cursor:pointer;
    user-select:none;
    transition:all 140ms ease;
    -webkit-tap-highlight-color:transparent;
}
.cy-fiche .cy-zone-pill:hover {
    border-color:var(--gold);
}
.cy-fiche .cy-zone-pill.is-active {
    background:var(--navy);
    color:#FFFFFF;
    border-color:var(--navy);
}
.cy-fiche .cy-zone-pill .cy-zone-count {
    display:inline-block;
    min-width:18px;
    padding:1px 6px;
    background:rgba(15,27,60,0.08);
    color:var(--navy);
    border-radius:999px;
    font-size:11px;
    font-weight:600;
    text-align:center;
}
.cy-fiche .cy-zone-pill.is-active .cy-zone-count {
    background:rgba(255,255,255,0.20);
    color:#FFFFFF;
}

/* Items filtrés (masqués) */
.cy-fiche .cy-rapport-checklist tr.is-hidden {
    display:none;
}

/* ===================================================================
   APERÇU FICHE COMPLÈTE (check_list.aspx)
   Pas d'accordéon — contenu directement visible quand le toggle est ON.
   Reprend le rendu de rapport.aspx (pills zone + cy-rapport-checklist).
   =================================================================== */
.cy-apercu-card {
    padding:18px 20px 22px 20px;
    background:#FFFFFF;
    border:1px solid var(--border);
    border-radius:8px;
    margin-top:14px;
}
.cy-apercu-card .cy-apercu-title {
    margin:0 0 16px 0;
    font-family:'Fraunces',Georgia,serif;
    font-size:18px;
    font-weight:600;
    color:var(--navy);
}
.cy-apercu-card .cy-apercu-hint {
    display:flex;
    align-items:flex-start;
    gap:8px;
    margin:18px 0 0 0;
    padding:10px 14px;
    background:rgba(15,27,60,0.04);
    border-left:3px solid var(--gold);
    border-radius:6px;
    color:var(--navy);
    font-size:13px;
    line-height:1.5;
    font-style:italic;
}
.cy-apercu-card .cy-apercu-hint i {
    flex-shrink:0;
    margin-top:2px;
    color:var(--gold);
    font-size:16px;
}

/* ===================================================================
   INVENTAIRE DES LINGES — stepper-row (refactor 20/05/2026)
   Remplace le GridView 4-colonnes par une ligne par linge :
     [Nom du linge]                       [−]  delta  [+]
     [X en stock]
   Le delta (signé) est posé dans une TextBox cachée, et un Button
   caché (cy-linge-commit-btn) est cliqué par JS après 1s d'inactivité
   pour postback vers ajouter_deduire_Click (qui fait quantite0 + delta).
   =================================================================== */

/* Le GridView lui-même : on neutralise la table look-and-feel
   (ASP.NET rend <table><tr><td>) pour avoir un visuel de liste. */
.cy-fiche .cy-linge-grid,
.cy-fiche .cy-linge-grid tbody,
.cy-fiche .cy-linge-grid tr,
.cy-fiche .cy-linge-grid td {
    display:block;
    width:100%;
    border:0;
    padding:0;
    margin:0;
}

.cy-fiche .cy-linge-grid tr + tr td {
    border-top:1px solid #F1F5F9;
}

.cy-fiche .cy-linge-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 4px;
    transition:background 160ms ease;
}

.cy-fiche .cy-linge-info {
    flex:1 1 auto;
    min-width:0;
}
.cy-fiche .cy-linge-name {
    font-size:16px;
    font-weight:500;
    color:var(--navy);
    line-height:1.3;
}
.cy-fiche .cy-linge-stock {
    font-size:13px;
    color:#94A3B8;
    font-weight:500;
    margin-top:3px;
}
/* État modifié : badge "stock → nouveau" en or */
.cy-fiche .cy-linge-row.is-changed {
    background:#FFF9EE;
    border-radius:8px;
}
.cy-fiche .cy-linge-row.is-changed .cy-linge-stock {
    color:#D0B070;
    font-weight:600;
}

/* Stepper : 3 éléments inline */
.cy-fiche .cy-linge-stepper {
    display:flex;
    align-items:center;
    gap:8px;
    flex-shrink:0;
}
.cy-fiche .cy-linge-btn {
    width:36px;
    height:36px;
    border-radius:50%;
    border:1px solid var(--border);
    background:#FFFFFF;
    color:var(--navy);
    font-size:18px;
    font-weight:500;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    line-height:1;
    transition:all 140ms ease;
    user-select:none;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
}
.cy-fiche .cy-linge-btn:hover {
    background:var(--navy);
    color:#FFFFFF;
    border-color:var(--navy);
}
.cy-fiche .cy-linge-btn:active {
    transform:scale(0.94);
}
.cy-fiche .cy-linge-btn:disabled {
    opacity:0.35;
    cursor:not-allowed;
    background:#FFFFFF;
    color:var(--navy);
    border-color:var(--border);
    transform:none;
}
.cy-fiche .cy-linge-btn:disabled:hover {
    background:#FFFFFF;
    color:var(--navy);
    border-color:var(--border);
}

.cy-fiche .cy-linge-delta {
    min-width:36px;
    text-align:center;
    font-size:17px;
    font-weight:600;
    color:var(--navy);
    font-variant-numeric:tabular-nums;
    line-height:1;
}
.cy-fiche .cy-linge-row.is-changed .cy-linge-delta {
    color:var(--gold);
}

/* État "committing" : le timer debounce attend de poster le delta —
   ajoute un petit indicateur pour que l'utilisateur sache que le commit
   arrive (sinon il pourrait recliquer en pensant que rien ne se passe). */
.cy-fiche .cy-linge-row.is-committing .cy-linge-stock::after {
    content:" · enregistrement…";
    color:var(--gold);
    font-weight:600;
}

/* Bloc poubelle (info pratique en bas, conditionnel) */
.cy-fiche .cy-rapport-poubelle {
    margin-top:32px;
    padding:16px 18px;
    background:#F8FAFC;
    border:1px dashed var(--border);
    border-radius:10px;
}
.cy-fiche .cy-rapport-poubelle-intro {
    color:var(--slate); font-size:13px; font-style:italic;
    margin:0 0 10px 0;
}

/* Label semaine masqué (legacy) — pas affiché mais conservé pour le .vb */
.cy-fiche .cy-rapport-semaine { display:none; }


/* === MES_RAPPORTS-SPECIFIC (consultation client) ============================
   Page client/mes_rapports.aspx — affiche un rapport d'intervention envoyé
   par un concierge depuis personnel/rapport.aspx (page mobile concierge).
   Différent de la page concierge : ici on est en pure lecture, structuré
   pour la consultation : meta en chips, tâches en liste check/cross,
   commentaire en bloc, photos en grille. */

/* Bandeau métadonnées du rapport (chips intervenant, date, prestation) */
.cy-fiche .cy-rapport-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 24px 0;
}

/* Titres de section dans le détail du rapport */
.cy-fiche .cy-rapport-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 24px 0 12px 0;
}
.cy-fiche .cy-rapport-section-title > i { font-size: 18px; color: var(--gold); }

/* Listes de tâches (cochées / non cochées) */
.cy-fiche .cy-rapport-task-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.cy-fiche .cy-rapport-task-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line-soft, rgba(0,0,0,.06));
    font-size: 14px;
    color: var(--ink);
}
.cy-fiche .cy-rapport-task-list li:last-child { border-bottom: none; }
.cy-fiche .cy-rapport-task-list li > i { font-size: 18px; flex-shrink: 0; }
.cy-fiche .cy-rapport-task-list.is-done li > i { color: #2ea66c; }            /* vert */
.cy-fiche .cy-rapport-task-list.is-undone li > i { color: #c14242; }          /* rouge */
.cy-fiche .cy-rapport-task-list.is-undone li { color: var(--slate); }

/* Bloc commentaire (texte libre de l'intervenant) */
.cy-fiche .cy-rapport-comment {
    padding: 16px 18px;
    background: var(--cream, #FAF7F2);
    border-left: 3px solid var(--gold);
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink);
    white-space: pre-wrap;
}

/* Grille de photos */
.cy-fiche .cy-rapport-photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 8px;
}
.cy-fiche .cy-rapport-photo {
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--cream, #FAF7F2);
    position: relative;
    transition: transform .15s, box-shadow .15s;
    text-decoration: none;
}
.cy-fiche .cy-rapport-photo:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,.10);
}
.cy-fiche .cy-rapport-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.cy-fiche .cy-rapport-photo-fallback,
.cy-fiche .cy-rapport-photo-placeholder {
    width: 100%;
    aspect-ratio: 4 / 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--slate);
    background: var(--cream, #FAF7F2);
    border: 1px dashed var(--border);
    border-radius: 8px;
    font-size: 12px;
}
.cy-fiche .cy-rapport-photo-fallback i,
.cy-fiche .cy-rapport-photo-placeholder i { font-size: 28px; opacity: .5; }


/* === PAIE_PERSONNEL-SPECIFIC === */
/* Page personnel/paie_personnel.aspx — pointage et feuilles de paie. */

/* Bloc validation : astérisque + checkbox + bouton sur une ligne, encadré gold-pale */
.cy-fiche .cy-paie-validation {
    display:flex; align-items:center; gap:14px; flex-wrap:wrap;
    padding:14px 16px;
    background:var(--gold-pale);
    border:1px solid var(--gold-soft);
    border-radius:10px;
    margin:6px 0 14px 0;
}
.cy-fiche .cy-paie-validation-asterisk {
    color:var(--danger); font-weight:700; font-size:18px;
    margin-right:-6px;
}
.cy-fiche .cy-paie-checkbox input[type="checkbox"] {
    width:18px; height:18px;
    margin-right:8px;
    accent-color:var(--gold);
    cursor:pointer;
    vertical-align:middle;
}
.cy-fiche .cy-paie-checkbox label {
    font-size:14.5px; font-weight:500; color:var(--navy);
    cursor:pointer; vertical-align:middle;
}

/* Lien d'aide téléphonique en bas de card */
.cy-fiche .cy-paie-help {
    font-size:13px; color:var(--slate);
    margin:18px 0 0 0;
}
.cy-fiche .cy-paie-help a {
    color:var(--gold); text-decoration:none; font-weight:600;
}
.cy-fiche .cy-paie-help a:hover { text-decoration:underline; }

/* === PDF VIEWER (réutilisable pour wrappers de documents) === */
/* Bloc d'actions à droite dans le header (téléchargement, partage, etc.) */
.cy-fiche .cy-header-actions {
    margin-left:auto;
    display:flex; align-items:center; gap:10px;
}
.cy-fiche .cy-btn-icon-download {
    display:inline-flex; align-items:center; gap:8px;
    text-decoration:none;
}
.cy-fiche .cy-btn-icon-download svg { flex-shrink:0; }

/* Variante : card sans padding interne (utile quand le contenu doit toucher
   les bords, par exemple un iframe PDF en pleine surface) */
.cy-fiche .cy-card.cy-card-flush {
    padding:0;
    overflow:hidden;
}

/* Iframe PDF — full-width, hauteur viewport généreuse */
.cy-fiche .cy-pdf-frame {
    display:block;
    width:100%;
    height:calc(100vh - 220px);
    min-height:600px;
    border:0;
    background:#F8FAFC;
}

/* Phrase de secours (si le navigateur ne sait pas afficher le PDF en iframe) */
.cy-fiche .cy-pdf-fallback {
    text-align:center;
    color:var(--slate);
    font-size:13px;
    margin:14px 0 0 0;
}
.cy-fiche .cy-pdf-fallback a {
    color:var(--gold);
    text-decoration:none;
    font-weight:500;
}
.cy-fiche .cy-pdf-fallback a:hover { text-decoration:underline; }


/* === RATING LIST (curseur de note 1-5 avec pastilles colorées rouge→vert) ===
   Réutilise la palette de NoteBadge() (satisfaction_client.aspx.vb) mais en version
   interactive (RadioButtonList ASP.NET). Pour préserver le rendu .vb, on style un
   <table> rendu par RadioButtonList avec 5 cellules (une par valeur 1-5).
   Le radio natif est masqué, le label est cliquable et change visuellement à la
   sélection. */
.cy-fiche table.cy-rating-list {
    border:0; border-collapse:separate; border-spacing:6px 0;
    margin:0;
}
.cy-fiche table.cy-rating-list td {
    padding:0;
    text-align:center;
    vertical-align:middle;
}
.cy-fiche table.cy-rating-list input[type="radio"] {
    position:absolute;
    opacity:0;
    width:0; height:0;
    pointer-events:none;
}
.cy-fiche table.cy-rating-list label {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:44px; height:30px;
    padding:0 12px;
    border-radius:15px;
    font-size:14px; font-weight:600;
    font-family:'Inter', sans-serif;
    cursor:pointer;
    border:2px solid transparent;
    transition:all .15s var(--t);
    user-select:none;
    line-height:1;
}
.cy-fiche table.cy-rating-list label:hover {
    transform:scale(1.06);
}
/* Couleurs gradient rouge→vert (palette NoteBadge satisfaction_client) */
.cy-fiche table.cy-rating-list td:nth-child(1) label { background:#FCEBEB; color:#791F1F; }
.cy-fiche table.cy-rating-list td:nth-child(2) label { background:#FAEEDA; color:#633806; }
.cy-fiche table.cy-rating-list td:nth-child(3) label { background:#F1EFE8; color:#5F5E5A; }
.cy-fiche table.cy-rating-list td:nth-child(4) label { background:#EAF3DE; color:#27500A; }
.cy-fiche table.cy-rating-list td:nth-child(5) label { background:#E1F5EE; color:#085041; }
/* État sélectionné : pastille mise en valeur (border + ombrage) */
.cy-fiche table.cy-rating-list input[type="radio"]:checked + label {
    border-color:currentColor;
    box-shadow:0 2px 8px rgba(15,23,42,.12);
    transform:scale(1.05);
}

/* Bouton envoi (image) à côté de la rating list ou de la textarea */
.cy-fiche input[type="image"].cy-rating-send-btn {
    width:30px !important; height:auto !important;
    cursor:pointer;
    opacity:0.85;
    transition:opacity .15s var(--t), transform .15s var(--t);
    vertical-align:middle;
    margin-left:8px;
}
.cy-fiche input[type="image"].cy-rating-send-btn:hover {
    opacity:1;
    transform:translateX(2px);
}

/* GridView "rating" — table sans en-tête, lignes avec rating + envoi */
.cy-fiche .cy-rating-grid {
    margin:14px 0;
}
.cy-fiche .cy-rating-grid td {
    padding:10px 12px;
    border-bottom:1px solid var(--border);
    vertical-align:middle;
}
.cy-fiche .cy-rating-grid tr:last-child td { border-bottom:0; }


/* === CGV-SPECIFIC === */
/* Page client/cgv.aspx — le .vb injecte du HTML structuré (titres, sous-titres,
   parties, articles) dans un Literal. On harmonise la typographie. */
.cy-fiche .cy-cgv-content {
    text-align:justify;
    font-size:14px;
    line-height:1.65;
    color:var(--navy-2);
}
.cy-fiche .cy-cgv-content h1,
.cy-fiche .cy-cgv-content h2,
.cy-fiche .cy-cgv-content h3,
.cy-fiche .cy-cgv-content h4 {
    font-family:'Fraunces', Georgia, serif;
    color:var(--navy);
    font-weight:600;
    margin:24px 0 10px 0;
    text-transform:none;
    letter-spacing:0;
}
.cy-fiche .cy-cgv-content h1 { font-size:22px; border-bottom:1px solid var(--gold-soft); padding-bottom:6px; }
.cy-fiche .cy-cgv-content h2 { font-size:18px; }
.cy-fiche .cy-cgv-content h3 { font-size:15px; color:var(--gold-dark); }
.cy-fiche .cy-cgv-content h4 { font-size:14px; color:var(--slate); }
.cy-fiche .cy-cgv-content p { margin:0 0 10px 0; }
.cy-fiche .cy-cgv-content strong { color:var(--navy); font-weight:600; }
.cy-fiche .cy-cgv-content em { color:var(--slate); font-style:italic; }


/* === FACTURATION-SPECIFIC === */
/* Total provisoire mis en valeur (utilisé sur client/facturation.aspx) */
.cy-fiche .cy-fact-total {
    font-family:'Fraunces', Georgia, serif;
    font-size:20px;
    font-weight:600;
    color:var(--gold-dark);
    padding:6px 14px;
    background:var(--gold-pale);
    border-radius:8px;
    border:1px solid var(--gold-soft);
}


/* === PRESENCE-SPECIFIC === */
/* Page client/presence.aspx — bouton refresh dans le header. */
.cy-fiche .cy-presence-refresh-label {
    font-size:13px;
    color:var(--slate);
}
.cy-fiche input[type="image"].cy-presence-refresh-btn {
    width:24px !important; height:24px !important;
    cursor:pointer;
    opacity:0.7;
    transition:opacity .18s var(--t), transform .3s var(--t);
    vertical-align:middle;
}
.cy-fiche input[type="image"].cy-presence-refresh-btn:hover {
    opacity:1;
    transform:rotate(180deg);
}


/* === CONFIDENTIALITE-SPECIFIC === */
/* Page personnel/confidentialite.aspx — règles de confidentialité texte statique */
.cy-fiche .cy-confidentialite-list {
    list-style:decimal;
    padding-left:24px;
    margin:8px 0 0 0;
    counter-reset:cy-conf;
}
.cy-fiche .cy-confidentialite-list li {
    font-size:15px;
    color:var(--navy);
    line-height:1.65;
    margin-bottom:14px;
    padding-left:6px;
}
.cy-fiche .cy-confidentialite-list li::marker {
    color:var(--gold);
    font-weight:600;
}
.cy-fiche .cy-confidentialite-list a {
    color:var(--gold);
    text-decoration:none;
    font-weight:500;
}
.cy-fiche .cy-confidentialite-list a:hover { text-decoration:underline; }


/* === MANUEL-SPECIFIC === */
/* Page personnel/manuel.aspx — grille de vignettes manuels d'utilisation
   (panel_manuel rempli dynamiquement par le .vb : ImageButton + Label). */
.cy-fiche .cy-manuel-grid {
    display:flex; flex-wrap:wrap; gap:18px;
    margin:14px 0 8px 0;
}
/* Le .vb fait Style.Add('width', '100px') sur chaque ImageButton — on ne peut
   pas modifier sa taille sans toucher au .vb, mais on peut harmoniser le cadre,
   les labels et le hover. */
.cy-fiche .cy-manuel-grid input[type="image"] {
    border:1px solid var(--border) !important;
    border-radius:8px;
    cursor:pointer;
    box-shadow:var(--shadow-sm);
    transition:transform .18s var(--t), box-shadow .18s var(--t);
    width:120px !important; /* override l'inline style 100px du .vb pour un meilleur rendu */
    height:auto;
    margin:0 !important;
    padding:0 !important;
    background:#FFFFFF;
}
.cy-fiche .cy-manuel-grid input[type="image"]:hover {
    transform:translateY(-2px);
    box-shadow:0 8px 18px rgba(15,23,42,0.10);
    border-color:var(--gold);
}
.cy-fiche .cy-manuel-grid > span {
    /* Le .vb wrappe les Label et Literal dans des span (ASP.NET) — on les place
       sous l'image en colonne associée. Faute de wrapper, on les laisse flotter
       inline et compter sur le <br/> que le .vb émet pour la rupture. */
    display:inline-block;
    font-size:13px; color:var(--navy);
    padding:6px 10px;
    line-height:1.5;
}

/* Image feuille de paie cliquable (lienfichierpaie) */
.cy-fiche .cy-paie-fiche-wrapper {
    text-align:center;
    padding:14px 0;
}
.cy-fiche .cy-paie-fiche-img,
.cy-fiche input[type="image"].cy-paie-fiche-img {
    max-width:280px;
    height:auto;
    border:1px solid var(--border) !important;
    border-radius:10px;
    box-shadow:var(--shadow-sm);
    cursor:pointer;
    transition:transform .18s var(--t), box-shadow .18s var(--t);
}
.cy-fiche .cy-paie-fiche-img:hover,
.cy-fiche input[type="image"].cy-paie-fiche-img:hover {
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(15, 23, 42, 0.12);
}

/* =========================================================================
   CY-METIER-CARDS — Cards radios/checkboxes pour choisir un ou plusieurs
   métiers, avec avatar coloré + icône Tabler à gauche. Pattern utilisé pour
   le CheckBoxList "Ajouter des services" de commande.aspx, peut être réutilisé
   ailleurs (ex : choix prestation, choix intervenant…).
   Construites en JS à partir d'un CBL ASP.NET caché — voir commande.aspx.
   ========================================================================= */
.cy-fiche .cy-metier-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
    margin: 6px 0 4px 0;
}
.cy-fiche .cy-metier-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 0.5px solid rgba(15, 23, 42, 0.14);
    border-radius: 10px;
    background: #FFFFFF;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    font-family: 'Inter', sans-serif;
    color: var(--navy);
    user-select: none;
}
.cy-fiche .cy-metier-card:hover {
    background: var(--gold-pale);
    border-color: var(--gold-soft);
}
.cy-fiche .cy-metier-card.is-active {
    background: var(--gold-pale);
    border: 2px solid var(--gold);
    padding: 9px 11px;   /* compense le +1px de border pour ne pas faire bouger le layout */
}
.cy-fiche .cy-metier-card .cy-metier-card-label {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
}
.cy-fiche .cy-metier-card .cy-metier-card-check {
    font-size: 16px;
    color: var(--gold-dark);
    flex-shrink: 0;
    opacity: 0;
    transition: opacity .15s;
}
.cy-fiche .cy-metier-card.is-active .cy-metier-card-check {
    opacity: 1;
}
/* L'avatar utilise les classes existantes cy-metier-avatar cy-metier-XXX
   définies plus haut dans le fichier (palette par famille de métier). */

/* =========================================================================
   CY-TIME-SELECT — Dropdown créneaux 30min pour saisie heure au clic.
   Remplace input[type=time] sur Safari macOS qui n'a pas de picker visuel.
   Hérite de .cy-fiche select:not(.cy-pill-picker) pour le chevron + style,
   on n'ajoute ici que des largeurs/alignements spécifiques.
   ========================================================================= */
.cy-fiche select.cy-time-select {
    min-width: 110px;
    font-variant-numeric: tabular-nums;
    text-align: left;
}

/* =========================================================================
   INPUTS DATE / TIME / DATETIME-LOCAL — Pickers natifs HTML5 stylés Conciergya.
   Le rendu reste 100% natif (pas de JS), on customise juste padding, bordure,
   focus or, et la couleur du calendar-picker-indicator (icône à droite).
   ========================================================================= */
.cy-fiche input[type="date"],
.cy-fiche input[type="time"],
.cy-fiche input[type="datetime-local"],
.cy-fiche input[type="month"],
.cy-fiche input[type="week"] {
    padding: 10px 14px;
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: 10px;
    background: #FFFFFF;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background .15s;
    box-sizing: border-box;
    min-width: 140px;
    line-height: 1.3;
    appearance: none;
    -webkit-appearance: none;
}
.cy-fiche input[type="date"]:hover,
.cy-fiche input[type="time"]:hover,
.cy-fiche input[type="datetime-local"]:hover {
    border-color: rgba(15, 23, 42, 0.22);
    background: var(--gold-pale);
}
.cy-fiche input[type="date"]:focus,
.cy-fiche input[type="time"]:focus,
.cy-fiche input[type="datetime-local"]:focus,
.cy-fiche input[type="month"]:focus,
.cy-fiche input[type="week"]:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(201, 169, 101, 0.18);
    background: #FFFFFF;
}

/* Picker indicator (la petite icône à droite qui ouvre le sélecteur natif) :
   coloré en or-dark via filter pour s'aligner sur le design Conciergya.
   Fonctionne sur Chrome/Edge/Safari. Firefox a son propre rendu. */
.cy-fiche input[type="date"]::-webkit-calendar-picker-indicator,
.cy-fiche input[type="time"]::-webkit-calendar-picker-indicator,
.cy-fiche input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.7;
    filter: invert(62%) sepia(28%) saturate(605%) hue-rotate(8deg) brightness(88%) contrast(85%);
    transition: opacity .15s;
}
.cy-fiche input[type="date"]:hover::-webkit-calendar-picker-indicator,
.cy-fiche input[type="time"]:hover::-webkit-calendar-picker-indicator,
.cy-fiche input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator {
    opacity: 1;
}

/* Texte interne du picker (chiffres) en Inter tabulaire */
.cy-fiche input[type="time"]::-webkit-datetime-edit,
.cy-fiche input[type="date"]::-webkit-datetime-edit {
    font-family: 'Inter', system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    color: var(--navy);
}
.cy-fiche input[type="time"]::-webkit-datetime-edit-fields-wrapper,
.cy-fiche input[type="date"]::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
}
.cy-fiche input[type="time"]::-webkit-datetime-edit-text,
.cy-fiche input[type="date"]::-webkit-datetime-edit-text {
    padding: 0 2px;
    color: var(--slate-2);
}

/* Variante "input avec icône à gauche" — pour les pages qui veulent
   un picto horloge devant l'heure. Wrap : <span class="cy-input-time">
   <i class="ti ti-clock"></i><input type="time" ...></span>
   À utiliser ponctuellement, le rendu de base reste compact. */
.cy-fiche .cy-input-time,
.cy-fiche .cy-input-date {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.cy-fiche .cy-input-time > i,
.cy-fiche .cy-input-date > i {
    position: absolute;
    left: 12px;
    font-size: 16px;
    color: var(--gold-dark);
    pointer-events: none;
}
.cy-fiche .cy-input-time > input[type="time"],
.cy-fiche .cy-input-date > input[type="date"] {
    padding-left: 36px;
}

/* =========================================================================
   PILLS GÉNÉRIQUE — Boutons côte à côte pour remplacer un RadioButtonList,
   un CheckBoxList, ou une paire de RadioButton individuels.
   3 variantes :
     - .cy-pills-bar.is-exclusive   → un seul actif (radio behavior)
     - .cy-pills-bar.is-multi       → plusieurs peuvent être actifs (checkbox)
     - .cy-pills-bar.is-binary      → 2 modes équivalents (ex. Ponctuelle/Récurrente)
   Le contrôle ASP.NET (RBL/CBL/2 radios) reste dans le DOM via .cy-rbl-hidden
   pour préserver les .vb.Checked / .SelectedValue / les ControlParameter.
   Le JS cy_pills_init lit les data-* et synchronise les états.
   ========================================================================= */
.cy-fiche .cy-pills-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 0 4px 0;
    align-items: center;
}
.cy-fiche .cy-pills-bar .cy-pill-btn {
    padding: 8px 18px;
    border: 0.5px solid rgba(15, 23, 42, 0.14);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--navy);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background .14s, border-color .14s, color .14s;
    white-space: nowrap;
    line-height: 1.2;
}
.cy-fiche .cy-pills-bar .cy-pill-btn:hover {
    background: var(--gold-pale);
    border-color: var(--gold-soft);
}
.cy-fiche .cy-pills-bar .cy-pill-btn.is-active {
    background: var(--gold);
    border-color: var(--gold-dark);
    color: #FFFFFF;
}
.cy-fiche .cy-pills-bar .cy-pill-btn.is-active:hover {
    background: var(--gold-dark);
}
/* Variante compact (utile pour les 7 jours de la semaine) */
.cy-fiche .cy-pills-bar.is-compact .cy-pill-btn {
    padding: 6px 12px;
    min-width: 40px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
}

/* =========================================================================
   TOGGLE BINAIRE — Switch moderne pour remplacer un RadioButtonList à 2 valeurs.
   Le RadioButtonList ASP.NET reste dans le DOM (caché via .cy-rbl-hidden) pour
   préserver l'AutoPostBack et les ControlParameter référencés par les SqlDataSource.
   Le JS (cy_toggle_binary_init) synchronise le visuel HTML avec le RBL caché.
   Usage : <div class="cy-toggle-binary" data-rbl-id="..." data-on-value="..."
            data-off-value="..."><span class="cy-toggle-binary-label">…</span>
            <span class="cy-toggle-binary-switch"></span></div>
   ========================================================================= */
/* Masquage visuellement-only (vs display:none) : garde les <input> RBL cliquables
   par script pour que .click() déclenche bien le onclick AutoPostBack généré
   par ASP.NET. Sinon Safari ignore les events sur les éléments display:none. */
.cy-fiche .cy-rbl-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    pointer-events: none !important;
}
.cy-fiche .cy-toggle-binary {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    background: #FAFAF7;
    border: 0.5px solid rgba(15, 23, 42, 0.08);
    border-radius: 10px;
    cursor: pointer;
    max-width: 100%;
    margin: 6px 0 18px 0;
    transition: background .15s, border-color .15s;
    user-select: none;
}
.cy-fiche .cy-toggle-binary:hover {
    background: #FFFFFF;
    border-color: rgba(15, 23, 42, 0.14);
}
.cy-fiche .cy-toggle-binary-label {
    font-size: 13.5px;
    color: var(--navy);
    font-weight: 500;
    line-height: 1.35;
    flex: 1;
    min-width: 0;
}
.cy-fiche .cy-toggle-binary-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.18);
    flex-shrink: 0;
    transition: background .2s;
}
.cy-fiche .cy-toggle-binary-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    transition: left .2s;
}
.cy-fiche .cy-toggle-binary.is-on { background: var(--gold-pale); border-color: var(--gold-soft); }
.cy-fiche .cy-toggle-binary.is-on .cy-toggle-binary-switch { background: var(--gold); }
.cy-fiche .cy-toggle-binary.is-on .cy-toggle-binary-switch::after { left: 22px; }

/* =========================================================================
   BRAND BAR — Bandeau marque Conciergya en haut de chaque page cliente.
   Logo carré navy + C or (en pseudo-élément CSS, pas besoin de SVG inline
   dans chaque markup) + wordmark "Conciergya" en Fraunces navy + tagline.
   Sticky en haut, fin (~48px). Sa hauteur est exposée via la variable
   --cy-brand-bar-h pour que le header de page (.cy-header) sache se
   positionner juste en dessous quand il est lui-même sticky.
   ========================================================================= */
:root { --cy-brand-bar-h: 48px; }

.cy-brand-bar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--navy);
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.15);
    padding: 8px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Inter', system-ui, sans-serif;
    height: var(--cy-brand-bar-h);
    box-sizing: border-box;
}

/* Neutralise les marges/paddings hérités du Site.css legacy qui créent une
   bande blanche entre le top du viewport et le brand-bar sur les pages qui
   utilisent la masterpage aide_a_domicile_vierge.master (body > form > div).
   Le sélecteur :has(.cy-brand-bar) limite l'effet aux pages Conciergya. */
body:has(.cy-brand-bar) {
    margin: 0 !important;
    padding: 0 !important;
}
body:has(.cy-brand-bar) > form,
body:has(.cy-brand-bar) > form > div {
    margin: 0 !important;
    padding: 0 !important;
}

/* Override : quand le brand bar est présent, le header de page se cale juste
   en dessous (sans ça, les deux se chevauchent et le back-btn devient caché).
   IMPORTANT : limité aux pages QUI ONT un brand-bar (acces.aspx), sinon les
   autres pages se retrouvent avec 48px d'espace vide au-dessus du header. */
body:has(.cy-brand-bar) .cy-fiche .cy-header {
    top: var(--cy-brand-bar-h) !important;
    z-index: 30 !important;  /* sous le brand bar (40) mais au-dessus du contenu */
}
/* Logo : carré arrondi or + lettre "C" navy en Fraunces (généré en CSS
   uniquement, pas de SVG inline ni image à servir). Inversion par rapport
   à la version blanche : fond gold + lettre navy = bien visible sur le navy
   de fond. */
.cy-brand-bar::before {
    content: "C";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: var(--gold);
    border-radius: 7px;
    color: var(--navy);
    font-family: 'Fraunces', Georgia, serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    flex-shrink: 0;
}
.cy-brand-bar .cy-brand-name {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 19px;
    font-weight: 600;
    color: #FFFFFF;
    letter-spacing: -0.005em;
    line-height: 1;
}
.cy-brand-bar .cy-brand-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--gold);
    margin: 0 2px;
}
.cy-brand-bar .cy-brand-tagline {
    font-size: 11px;
    color: var(--gold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 500;
}

/* =========================================================================
   MENU CLIENT (personnel/acces.aspx > panel_client)
   Design Conciergya 2026 : tableau de bord d'accueil client.
   Le sélecteur racine ".cy-client-menu" matche le Panel ASP.NET. Les anciens
   boutons "bouton" du Panel sont masqués via .cy-client-menu-legacy pour
   préserver les références éventuelles dans acces.aspx.vb.
   ========================================================================= */
/* Le menu client utilise désormais l'infrastructure cy-fiche / cy-header /
   cy-card commune aux autres pages (planning, commande, note, etc.).
   On ne garde ici que les overrides spécifiques (legacy buttons, info lines,
   notifs, tiles). */
.cy-client-menu .cy-client-menu-legacy { display: none !important; }
.cy-client-menu .cy-client-menu-legacy .bouton { display: none !important; }

/* Le menu client n'a pas de sidebar (à la différence de cgv.aspx) : on annule
   le margin-left: 220px appliqué globalement à .cy-fiche .cy-content pour
   compenser la sidebar. Sans ça, les cards sont décalées vers la droite
   pendant que le header reste collé à gauche. */
.cy-client-menu .cy-content { margin-left: 0 !important; }

/* Wrapper de carte legacy (.cy-client-card / .cy-client-header / .cy-client-footer)
   n'est plus utilisé. On force display:none au cas où le markup historique
   serait redéployé temporairement. */
.cy-client-menu .cy-client-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

/* === Header === */
.cy-client-menu .cy-client-header {
    background: linear-gradient(180deg, var(--gold-pale) 0%, #FFFFFF 100%);
    padding: 24px 28px 26px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.cy-client-menu .cy-client-header-main {
    flex: 1 1 360px;
    min-width: 0;
}
.cy-client-menu .cy-client-hello,
.cy-client-menu .cy-client-hello .auto-style14 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 24px;
    font-weight: 600;
    color: var(--navy);
    line-height: 1.15;
    margin: 0 0 12px 0;
    border-bottom: none;
    display: block;
    text-transform: none;
}
.cy-client-menu .cy-client-hello label { font-weight: inherit; }
.cy-client-menu .cy-client-info-line {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--slate);
    padding: 8px 0;
    flex-wrap: wrap;
    border-top: 1px solid rgba(15, 23, 42, 0.04);
}
.cy-client-menu .cy-client-info-line:first-of-type { border-top: 0; padding-top: 4px; }
.cy-client-menu .cy-client-info-line:last-child   { padding-bottom: 4px; }
.cy-client-menu .cy-client-info-line > i {
    font-size: 16px;
    color: var(--gold-dark);
    width: 18px;
    flex-shrink: 0;
}
.cy-client-menu .cy-client-info-line strong,
.cy-client-menu .cy-client-info-line label[id*="lbl_nb_sites"],
.cy-client-menu .cy-client-info-line span[id*="lbl_nb_sites"] {
    color: var(--navy);
    font-weight: 500;
}
.cy-client-menu .cy-client-info-sub { color: var(--slate); font-weight: 400; }

/* Chip statut facture */
.cy-client-menu .cy-client-pay-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    margin-left: 6px;
    line-height: 1.4;
}
.cy-client-menu .cy-client-pay-chip.is-paid    { background: #DCFCE7; color: #166534; }
.cy-client-menu .cy-client-pay-chip.is-unpaid  { background: #FEE2E2; color: #991B1B; }
.cy-client-menu .cy-client-pay-chip.is-pending { background: #FEF3C7; color: #92400E; }

/* Header aside : pill live + bouton aide + power */
.cy-client-menu .cy-client-header-aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}
.cy-client-menu .cy-client-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    background: #FFFFFF;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    color: var(--navy);
}
.cy-client-menu .cy-client-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}
/* Bouton "Besoin d'aide" dans le header du menu — utilisable dans n'importe
   quel espace (client, concierge, coordination, direction).
   !important sur color/text-decoration au hover : nécessaire pour battre une
   règle générique a:hover du legacy Style.css qui sinon repassait le texte
   en gold sur fond gold (invisible). */
.cy-client-menu .cy-client-help-btn,
.cy-concierge-menu .cy-client-help-btn,
.cy-client-menu a.cy-client-help-btn:link,
.cy-client-menu a.cy-client-help-btn:visited,
.cy-concierge-menu a.cy-client-help-btn:link,
.cy-concierge-menu a.cy-client-help-btn:visited {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: transparent;
    color: var(--gold-dark);
    border: 1px solid var(--gold);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none !important;
    transition: background .15s, color .15s;
}
.cy-client-menu .cy-client-help-btn:hover,
.cy-concierge-menu .cy-client-help-btn:hover,
.cy-client-menu a.cy-client-help-btn:hover,
.cy-client-menu a.cy-client-help-btn:active,
.cy-client-menu a.cy-client-help-btn:focus,
.cy-concierge-menu a.cy-client-help-btn:hover,
.cy-concierge-menu a.cy-client-help-btn:active,
.cy-concierge-menu a.cy-client-help-btn:focus {
    background: var(--gold);
    color: #FFFFFF !important;
    text-decoration: none !important;
}
.cy-client-menu .cy-client-help-btn > i,
.cy-concierge-menu .cy-client-help-btn > i {
    font-size: 14px;
    color: inherit !important;
}
.cy-client-menu .cy-client-power,
.cy-concierge-menu .cy-client-power {
    display: inline-flex;
    align-items: center;
}
.cy-client-menu .cy-client-power input[type="image"],
.cy-concierge-menu .cy-client-power input[type="image"] {
    width: 32px;
    height: 32px;
    padding: 5px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 50%;
    background: #FFFFFF;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.cy-client-menu .cy-client-power input[type="image"]:hover,
.cy-concierge-menu .cy-client-power input[type="image"]:hover {
    border-color: #DC2626;
    background: #FEE2E2;
}

/* === ESPACE CONCIERGE — bouton Pointer/Dépointer (mini-tile cliquable) =====
   Remplace l'encart "Prochaine intervention" dans la card "Situation du jour".
   Format mini-tile (même footprint qu'Appréciation à gauche).
   2 états mutuellement exclusifs, basculés en CSS via aspNetDisabled :
     - Actif (.vb : Enabled=True)   : fond vert pâle, pastille pulsée, lieu + heure en cours
     - Inactif (.vb : Enabled=False, aspNetDisabled rendu par ASP.NET) :
                                     fond crème, icône play, prochaine intervention à venir */
.cy-fiche a.cy-pointage-btn,
.cy-fiche a.cy-pointage-btn:link,
.cy-fiche a.cy-pointage-btn:visited,
.cy-fiche span.cy-pointage-btn,
.cy-fiche span.cy-pointage-btn:link,
.cy-fiche span.cy-pointage-btn:visited,
.cy-fiche div.cy-pointage-btn {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    background: #E0F2EA;
    color: var(--ink) !important;
    border: 1px solid #B9E0CB;
    border-radius: 8px;
    padding: 12px 14px;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .15s;
    text-decoration: none !important;
    font-family: inherit;
}
.cy-fiche a.cy-pointage-btn:hover {
    background: #C8E8D5;
    border-color: #9DD2B5;
    transform: translateY(-1px);
    color: var(--ink) !important;
    text-decoration: none !important;
}

/* Bascule des 2 états — par défaut visible = ACTIF */
.cy-fiche .cy-pointage-state-actif,
.cy-fiche .cy-pointage-state-inactif {
    display: none;
    flex-direction: column;
    gap: 2px;
}
.cy-fiche a.cy-pointage-btn .cy-pointage-state-actif,
.cy-fiche span.cy-pointage-btn:not(.aspNetDisabled) .cy-pointage-state-actif {
    display: flex;
}
/* État inactif : visible quand aspNetDisabled (Enabled=False) ou rendu <span> ou <div> (Panel) */
.cy-fiche a.cy-pointage-btn.aspNetDisabled .cy-pointage-state-actif,
.cy-fiche span.cy-pointage-btn.aspNetDisabled .cy-pointage-state-actif,
.cy-fiche div.cy-pointage-btn.aspNetDisabled .cy-pointage-state-actif {
    display: none;
}
.cy-fiche a.cy-pointage-btn.aspNetDisabled .cy-pointage-state-inactif,
.cy-fiche span.cy-pointage-btn.aspNetDisabled .cy-pointage-state-inactif,
.cy-fiche div.cy-pointage-btn.aspNetDisabled .cy-pointage-state-inactif {
    display: flex;
}

/* Bascule du fond selon état inactif (crème neutre) */
.cy-fiche a.cy-pointage-btn.aspNetDisabled,
.cy-fiche span.cy-pointage-btn.aspNetDisabled,
.cy-fiche div.cy-pointage-btn.aspNetDisabled {
    background: var(--cream, #FAF7F2);
    border-color: rgba(0,0,0,.08);
    cursor: not-allowed;
    pointer-events: none;
}

/* Header : ligne titre avec dot ou icône */
.cy-fiche .cy-pointage-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.cy-fiche .cy-pointage-header > i {
    font-size: 16px;
    color: var(--gold-dark);
}

/* CTA prominent : bandeau "bouton" en haut du tile pointage.
   Icône fingerprint grosse + label majuscule semi-bold. Le visuel donne
   bien l'impression d'un bouton actionnable même quand disabled. */
.cy-fiche .cy-pointage-cta {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin: -4px -4px 8px -4px;
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(15,23,42,0.08);
    border-radius: 6px;
}
.cy-fiche .cy-pointage-cta > i {
    font-size: 22px;
    color: var(--gold-dark);
    flex-shrink: 0;
}
.cy-fiche .cy-pointage-cta-label {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--navy);
    flex: 1;
}
/* État actif : le bouton CTA prend une teinte verte vibrante */
.cy-fiche a.cy-pointage-btn:not(.aspNetDisabled) .cy-pointage-cta,
.cy-fiche span.cy-pointage-btn:not(.aspNetDisabled) .cy-pointage-cta {
    background: #2ea66c;
    border-color: #248B5A;
}
.cy-fiche a.cy-pointage-btn:not(.aspNetDisabled) .cy-pointage-cta > i,
.cy-fiche a.cy-pointage-btn:not(.aspNetDisabled) .cy-pointage-cta-label,
.cy-fiche span.cy-pointage-btn:not(.aspNetDisabled) .cy-pointage-cta > i,
.cy-fiche span.cy-pointage-btn:not(.aspNetDisabled) .cy-pointage-cta-label {
    color: #FFFFFF;
}

/* Pastille verte pulsée (état actif) */
.cy-fiche .cy-pointage-dot {
    width: 9px; height: 9px;
    background: #2ea66c;
    border-radius: 50%;
    flex-shrink: 0;
    animation: cy-pointage-pulse 1.8s ease-in-out infinite;
}
@keyframes cy-pointage-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(46,166,108,.5); }
    50%      { box-shadow: 0 0 0 6px rgba(46,166,108,0); }
}

.cy-fiche .cy-pointage-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.cy-fiche .cy-pointage-sub-label {
    font-size: 11px;
    color: var(--slate);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 2px;
}
.cy-fiche .cy-pointage-site {
    font-size: 14px;
    font-weight: 500;
    color: var(--navy);
    line-height: 1.2;
}
.cy-fiche .cy-pointage-time {
    font-size: 12px;
    color: var(--slate);
    margin-top: 2px;
}

/* === ESPACE CONCIERGE — mini-tiles dans la card "Situation du jour" =========
   Sous-cards crème pour afficher des infos clés (appréciation, prochaine
   intervention, etc.) à l'intérieur d'une cy-card "Situation du jour". */
.cy-fiche .cy-mini-tile {
    padding: 12px 14px;
    background: var(--cream, #FAF7F2);
    border-radius: 8px;
}

/* Rating étoiles unicode (★) — utilisé dans la mini-tile "Appréciation clients".
   Les étoiles remplies sont en or, les vides en gris neutre.
   En démo : 4/5 hardcodé. En prod : à brancher sur la note réelle. */
.cy-fiche .cy-stars-rating {
    font-size: 22px;
    letter-spacing: 4px;
    line-height: 1;
    margin: 6px 0 8px 0;
    user-select: none;
}
.cy-fiche .cy-stars-rating .cy-star {
    color: #D3D1C7;
}
.cy-fiche .cy-stars-rating .cy-star.is-filled {
    color: var(--gold);
}
.cy-fiche .cy-mini-label {
    font-size: 11px;
    color: var(--slate);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 6px;
    font-weight: 500;
}
.cy-fiche .cy-mini-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--navy);
    margin-bottom: 4px;
}
.cy-fiche .cy-mini-sub {
    font-size: 12px;
    color: var(--slate);
}

/* === Notifications === */
.cy-client-menu .cy-client-notifs {
    padding: 18px 28px 8px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.cy-client-menu .cy-client-notif {
    flex: 1 1 220px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    border-left-width: 3px;
    border-left-style: solid;
    min-width: 0;
}
.cy-client-menu .cy-client-notif > i { font-size: 18px; flex-shrink: 0; }
.cy-client-menu .cy-client-notif-body { flex: 1; min-width: 0; }
.cy-client-menu .cy-client-notif-title { font-size: 12px; font-weight: 600; line-height: 1.2; }
.cy-client-menu .cy-client-notif-sub { font-size: 11px; margin-top: 2px; }
.cy-client-menu .cy-notif-warn { background: #FEF3C7; border-left-color: #F59E0B; }
.cy-client-menu .cy-notif-warn > i,
.cy-client-menu .cy-notif-warn .cy-client-notif-title { color: #92400E; }
.cy-client-menu .cy-notif-warn .cy-client-notif-sub   { color: #78350F; }
.cy-client-menu .cy-notif-info { background: #E0E7FF; border-left-color: #4F46E5; }
.cy-client-menu .cy-notif-info > i,
.cy-client-menu .cy-notif-info .cy-client-notif-title { color: #3730A3; }
.cy-client-menu .cy-notif-info .cy-client-notif-sub   { color: #4338CA; }
.cy-client-menu .cy-notif-ok { background: #DCFCE7; border-left-color: #10B981; }
.cy-client-menu .cy-notif-ok > i,
.cy-client-menu .cy-notif-ok .cy-client-notif-title { color: #166534; }
.cy-client-menu .cy-notif-ok .cy-client-notif-sub   { color: #15803D; }

/* === Grid Tiles ============================================================
   Composant réutilisable dans tous les espaces (client, concierge, etc.).
   Le pattern de markup attendu :
       <div class="cy-client-tiles">
           <a class="cy-tile" href="...">
               <div class="cy-tile-head">
                   <div class="cy-tile-icon cy-tile-icon-gold"><i class="ti ti-..."></i></div>
                   <i class="ti ti-arrow-up-right cy-tile-arrow"></i>
               </div>
               <div class="cy-tile-title">...</div>
               <div class="cy-tile-sub">...</div>
           </a>
       </div>
   Note historique : ces sélecteurs étaient scopés à .cy-client-menu uniquement.
   Élargis à .cy-concierge-menu en mai 2026 pour partager le composant avec
   l'espace concierge. À élargir aux espaces coordination/direction en phase 4. */
.cy-client-menu .cy-client-tiles,
.cy-concierge-menu .cy-client-tiles {
    padding: 20px 28px 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
@media (max-width: 760px) {
    .cy-client-menu .cy-client-tiles,
    .cy-concierge-menu .cy-client-tiles {
        grid-template-columns: repeat(2, 1fr);
        padding: 8px 8px 16px;
        gap: 10px;
    }
    /* Tiles agrandies sur mobile : plus de padding, polices plus grandes */
    .cy-client-menu .cy-tile,
    .cy-concierge-menu .cy-tile {
        padding: 20px 18px;
    }
    .cy-client-menu .cy-tile-icon,
    .cy-concierge-menu .cy-tile-icon {
        width: 48px;
        height: 48px;
    }
    .cy-client-menu .cy-tile-icon > i,
    .cy-concierge-menu .cy-tile-icon > i {
        font-size: 24px;
    }
    .cy-client-menu .cy-tile-title,
    .cy-concierge-menu .cy-tile-title {
        font-size: 17px;
    }
    .cy-client-menu .cy-tile-sub,
    .cy-concierge-menu .cy-tile-sub {
        font-size: 13px;
    }
}
@media (max-width: 360px) {
    .cy-client-menu .cy-client-tiles,
    .cy-concierge-menu .cy-client-tiles {
        gap: 8px;
        padding: 8px 8px 14px;
    }
    .cy-client-menu .cy-tile,
    .cy-concierge-menu .cy-tile {
        padding: 16px 14px;
    }
}

/* ============================================================
   MOBILE : compacter les paddings du content + cy-card sur acces.aspx
   et autres pages avec menu concierge/client. L'objectif est de
   récupérer la largeur perdue par les paddings cumulés (cy-content
   32px + cy-card 20px = 52px/côté sur les pages avec wrapper card).
   ============================================================ */
@media (max-width: 760px) {
    /* Force le content du menu concierge/client à un padding compact */
    .cy-fiche.cy-concierge-menu .cy-content,
    .cy-fiche.cy-client-menu .cy-content {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    /* Card moins de padding intérieur sur mobile */
    .cy-fiche.cy-concierge-menu .cy-card,
    .cy-fiche.cy-client-menu .cy-card {
        padding: 12px 12px 14px;
        margin-bottom: 10px;
    }
    /* Card "Situation du jour" : son grid 2 cols (Appréciation + Pointage)
       passe en 1 col sur mobile pour que chaque mini-tile soit plus large */
    .cy-fiche.cy-concierge-menu .cy-form-grid.cols-2 {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   ACCES.ASPX PANEL_COMMUN — Glissement naturel des headers + pointage sticky
   Approche simple : le wrapper headers est dans le flux normal (position:relative).
   Au scroll, il sort PROGRESSIVEMENT de l'écran (comportement natif du browser,
   pas de toggle binaire via class JS). Le pointage est sticky top:0 et reste
   collé en haut quand les headers sont sortis. Z-index élevé pour qu'aucun
   contenu (appréciation, etc.) ne passe par-dessus.
   ============================================================ */
.cy-fiche.cy-concierge-menu .cy-mobile-headers {
    position: relative;
    z-index: 1;
    background: var(--bg, #FAFAF7);
    /* IMPORTANT — Override de la règle générique scrolling-down
       (cf. plus bas dans ce fichier : body.cy-scrolling-down .cy-fiche .cy-mobile-headers
       { transform: translateY(-100%) }) qui sinon faisait disparaître brutalement
       header + appréciation pendant le scroll. Sur cy-concierge-menu on veut le
       glissement NATUREL du scroll, pas un toggle binaire. */
    transform: none !important;
    transition: none !important;
}
body.cy-scrolling-down .cy-fiche.cy-concierge-menu .cy-mobile-headers {
    transform: none !important;
}

/* Padding pour la card Situation à respirer sous le header */
.cy-fiche.cy-concierge-menu .cy-mobile-headers-content {
    padding: 12px 10px 4px;
}
.cy-fiche.cy-concierge-menu .cy-mobile-headers-content .cy-card {
    margin-bottom: 0;
}

/* Pointage sticky : juste après les headers. S'accroche au top:0 quand on
   scroll. Z-index élevé pour rester au-dessus de tout (jamais masqué par
   la card "appréciation client" qui glisse au-dessus pendant le scroll). */
.cy-fiche.cy-concierge-menu .cy-pointage-sticky {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--bg, #FAFAF7);
    padding: 8px 10px 12px;
    border-bottom: 1px solid var(--border-soft, #F1F0EC);
    /* Petite ombre vers le bas quand collé en haut, pour bien le détacher
       du contenu qui glisse en-dessous */
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}

.cy-client-menu .cy-tile,
.cy-concierge-menu .cy-tile {
    position: relative;
    background: #FFFFFF;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    padding: 18px 16px;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s, border-color .15s;
    text-decoration: none;
    color: inherit;
    display: block;
}
.cy-client-menu .cy-tile:hover,
.cy-concierge-menu .cy-tile:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.07);
    border-color: rgba(15, 23, 42, 0.14);
}
.cy-client-menu .cy-tile.is-action,
.cy-concierge-menu .cy-tile.is-action {
    border: 2px solid var(--gold);
}
.cy-client-menu .cy-tile.cy-tile-disabled,
.cy-concierge-menu .cy-tile.cy-tile-disabled {
    opacity: 0.55;
    cursor: default;
}
.cy-client-menu .cy-tile.cy-tile-disabled:hover,
.cy-concierge-menu .cy-tile.cy-tile-disabled:hover {
    transform: none;
    box-shadow: none;
    border-color: rgba(15, 23, 42, 0.08);
}

.cy-client-menu .cy-tile-head,
.cy-concierge-menu .cy-tile-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.cy-client-menu .cy-tile-icon,
.cy-concierge-menu .cy-tile-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cy-client-menu .cy-tile-icon > i,
.cy-concierge-menu .cy-tile-icon > i { font-size: 20px; }
.cy-client-menu .cy-tile-icon-gold,
.cy-concierge-menu .cy-tile-icon-gold   { background: var(--gold-pale); }
.cy-client-menu .cy-tile-icon-gold > i,
.cy-concierge-menu .cy-tile-icon-gold > i   { color: var(--gold-dark); }
.cy-client-menu .cy-tile-icon-indigo,
.cy-concierge-menu .cy-tile-icon-indigo { background: #E0E7FF; }
.cy-client-menu .cy-tile-icon-indigo > i,
.cy-concierge-menu .cy-tile-icon-indigo > i { color: #4F46E5; }
.cy-client-menu .cy-tile-icon-amber,
.cy-concierge-menu .cy-tile-icon-amber  { background: #FEF3C7; }
.cy-client-menu .cy-tile-icon-amber > i,
.cy-concierge-menu .cy-tile-icon-amber > i  { color: #B45309; }

.cy-client-menu .cy-tile-arrow,
.cy-concierge-menu .cy-tile-arrow {
    font-size: 16px;
    color: var(--slate-3);
    margin-left: auto;
}
.cy-client-menu .cy-tile-badge,
.cy-concierge-menu .cy-tile-badge {
    margin-left: auto;
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    line-height: 1.5;
    white-space: nowrap;
}
.cy-client-menu .cy-tile-badge-dark,
.cy-concierge-menu .cy-tile-badge-dark   { background: var(--navy); color: #FFFFFF; }
.cy-client-menu .cy-tile-badge-green,
.cy-concierge-menu .cy-tile-badge-green  { background: #10B981; color: #FFFFFF; }
.cy-client-menu .cy-tile-badge-orange,
.cy-concierge-menu .cy-tile-badge-orange { background: #F59E0B; color: #FFFFFF; }
.cy-client-menu .cy-tile-badge-soon,
.cy-concierge-menu .cy-tile-badge-soon   { background: rgba(15, 23, 42, 0.08); color: var(--slate); }

.cy-client-menu .cy-tile-title,
.cy-concierge-menu .cy-tile-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--navy);
    line-height: 1.2;
    margin: 0;
}
.cy-client-menu .cy-tile-sub,
.cy-concierge-menu .cy-tile-sub {
    font-size: 12px;
    color: var(--slate-2);
    margin-top: 3px;
}
.cy-client-menu .cy-tile-sub-warn,
.cy-concierge-menu .cy-tile-sub-warn { color: #92400E; font-weight: 500; }

/* === Footer === */
.cy-client-menu .cy-client-footer {
    padding: 12px 28px 14px;
    border-top: 1px solid rgba(15, 23, 42, 0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    color: var(--slate-3);
}

/* =========================================================================
   LOGIN (personnel/acces.aspx > panel_connexion)
   Carte centrée Conciergya. Préserve tous les ID ASP.NET (identifiant,
   motdepasse, jyvais, mdpoublie, mdpchange, connexion, etc.). Override
   ciblé pour neutraliser les CssClass legacy "labelpersonnel" / "general"
   / "bouton" qui restent dans le markup pour compatibilité .vb.
   ========================================================================= */
.cy-login-wrap {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: linear-gradient(180deg, var(--gold-pale) 0%, #FFFFFF 80%);
}
.cy-login-wrap .cy-login-card {
    width: 100%;
    max-width: 440px;
    background: #FFFFFF;
    border-radius: 16px;
    border: 0.5px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.08);
    padding: 28px 28px 24px;
    position: relative;
}

/* === Drapeaux i18n === */
.cy-login-wrap .cy-login-flags {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-bottom: 18px;
}
.cy-login-wrap .cy-login-flags .flag_link {
    display: inline-flex;
    width: 26px;
    height: 18px;
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.10);
    opacity: 0.75;
    transition: opacity .15s, transform .15s;
}
.cy-login-wrap .cy-login-flags .flag_link:hover {
    opacity: 1;
    transform: translateY(-1px);
}
.cy-login-wrap .cy-login-flags img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 0 !important;
    margin: 0 !important;
}
.cy-login-wrap #google_translate_element { display: none; }

/* === Header de marque === */
.cy-login-wrap .cy-login-header {
    text-align: center;
    margin-bottom: 24px;
}
.cy-login-wrap .cy-login-brand {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--gold-pale);
    color: var(--gold-dark);
    font-family: 'Fraunces', Georgia, serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-bottom: 14px;
}
.cy-login-wrap .cy-login-brand > i { font-size: 14px; }
.cy-login-wrap .cy-login-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 26px;
    font-weight: 600;
    color: var(--navy);
    margin: 0 0 6px 0;
    line-height: 1.15;
    border-bottom: none;
    display: block;
    text-transform: none;
}
.cy-login-wrap .cy-login-subtitle {
    font-size: 13px;
    color: var(--slate);
    margin: 0;
}

/* === Champs : label + input === */
.cy-login-wrap .cy-login-field {
    margin-bottom: 14px;
}
.cy-login-wrap .cy-login-label,
.cy-login-wrap .labelpersonnel {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--slate);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 6px;
    font-family: 'Inter', sans-serif;
}
.cy-login-wrap .cy-login-input,
.cy-login-wrap input.general {
    width: 100% !important;
    box-sizing: border-box;
    padding: 11px 14px;
    background: #FFFFFF;
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--navy);
    font-style: normal !important;
    transition: border-color .15s, box-shadow .15s;
}
.cy-login-wrap .cy-login-input::placeholder,
.cy-login-wrap input.general::placeholder {
    color: var(--slate-3);
    font-style: normal;
    opacity: 1;
}
.cy-login-wrap .cy-login-input:focus,
.cy-login-wrap input.general:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(201, 169, 101, 0.18);
}

/* === Feedback (label connexion) ===
   Le .vb fait connexion.ForeColor = Drawing.Color.Red/Green, ce qui rend
   un attribut style="color:Red;" inline. On override via couleur de fond
   pour offrir un look "alerte" cohérent quel que soit le ForeColor inline. */
.cy-login-wrap .cy-login-feedback {
    display: block;
    margin: 4px 0 16px 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--navy);
    min-height: 1.4em;
}
.cy-login-wrap .cy-login-feedback:not(:empty) {
    padding: 10px 14px;
    border-radius: 10px;
    background: #FEF3C7;
    border-left: 3px solid #F59E0B;
    color: #78350F;
}
/* Si le .vb met ForeColor vert (succès) → style success */
.cy-login-wrap .cy-login-feedback[style*="Green"]:not(:empty),
.cy-login-wrap .cy-login-feedback[style*="green"]:not(:empty) {
    background: #DCFCE7;
    border-left-color: #10B981;
    color: #166534;
}
/* ForeColor rouge → style danger */
.cy-login-wrap .cy-login-feedback[style*="Red"]:not(:empty),
.cy-login-wrap .cy-login-feedback[style*="red"]:not(:empty),
.cy-login-wrap .cy-login-feedback[style*="Firebrick"]:not(:empty) {
    background: #FEE2E2;
    border-left-color: #DC2626;
    color: #991B1B;
}

/* === Boutons === */
.cy-login-wrap .cy-login-btn,
.cy-login-wrap input.bouton {
    width: 100% !important;
    box-sizing: border-box;
    padding: 12px 18px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .12s;
    border: 1px solid transparent;
    line-height: 1.2;
}
.cy-login-wrap .cy-login-btn-primary {
    background: var(--gold);
    color: #FFFFFF;
    border-color: var(--gold-dark);
    margin-bottom: 10px;
}
.cy-login-wrap .cy-login-btn-primary:hover {
    background: var(--gold-dark);
}
.cy-login-wrap .cy-login-btn-outline {
    background: transparent;
    color: var(--gold-dark);
    border-color: var(--gold);
    margin-bottom: 10px;
}
.cy-login-wrap .cy-login-btn-outline:hover {
    background: var(--gold-pale);
}
.cy-login-wrap .cy-login-btn-link {
    width: auto !important;
    background: transparent;
    color: var(--slate);
    border: none;
    padding: 4px 6px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: rgba(15, 23, 42, 0.20);
    text-underline-offset: 3px;
}
.cy-login-wrap .cy-login-btn-link:hover {
    color: var(--gold-dark);
    text-decoration-color: var(--gold);
}
.cy-login-wrap .cy-login-btn:active {
    transform: scale(0.99);
}

/* === Liens utilitaires en bas === */
.cy-login-wrap .cy-login-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.cy-login-wrap .cy-login-sep {
    color: var(--slate-3);
    font-size: 12px;
}

/* === Footer === */
.cy-login-wrap .cy-login-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    font-size: 11px;
    color: var(--slate-3);
}
.cy-login-wrap .cy-login-footer > i { font-size: 13px; color: var(--gold-dark); }

/* ============================================================
   CONTACTS OBLIGATOIRES — /personnel/contacts_obligatoires.aspx
   3 cards : Responsable interne, Inspecteur du travail, Numéros d'urgence.
   Avatars circulaires + numéros cliquables (tel:) pour le concierge mobile.
   ============================================================ */
.cy-fiche .cy-contact-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 8px 0;
}
.cy-fiche .cy-contact-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 22px;
}
.cy-fiche .cy-contact-avatar-navy {
    background: var(--navy);
    color: var(--gold);
}
.cy-fiche .cy-contact-avatar-gold {
    background: var(--gold-soft, #F5EBD3);
    color: var(--gold-dark);
}
.cy-fiche .cy-contact-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cy-fiche .cy-contact-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--navy);
}
.cy-fiche .cy-contact-tel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    color: var(--gold-dark);
    text-decoration: none;
    font-weight: 500;
    width: fit-content;
}
.cy-fiche .cy-contact-tel:hover {
    color: var(--navy);
    text-decoration: underline;
}
.cy-fiche .cy-contact-tel > i { font-size: 16px; }
.cy-fiche .cy-contact-address {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 13px;
    color: var(--slate);
}
.cy-fiche .cy-contact-address > i { font-size: 14px; margin-top: 2px; flex-shrink: 0; }

/* Grid des tiles numéros d'urgence : 2 ou 3 colonnes selon largeur */
.cy-fiche .cy-urgence-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}
.cy-fiche .cy-urgence-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 12px;
    background: var(--bg-card, #FFFFFF);
    border: 1px solid var(--border-soft, #F1F0EC);
    border-radius: 10px;
    text-decoration: none;
    color: var(--navy);
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.cy-fiche .cy-urgence-tile:hover {
    transform: translateY(-2px);
    border-color: var(--gold);
    box-shadow: 0 4px 12px -4px rgba(15,23,42,.12);
    text-decoration: none;
}
.cy-fiche .cy-urgence-num {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 28px;
    font-weight: 600;
    color: var(--gold-dark);
    line-height: 1;
    margin-bottom: 4px;
}
.cy-fiche .cy-urgence-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--navy);
    font-weight: 600;
    text-align: center;
}
.cy-fiche .cy-urgence-nom {
    font-size: 11px;
    color: var(--slate);
    text-align: center;
    margin-top: 2px;
}
.cy-fiche .cy-urgence-nom:empty { display: none; }

/* ============================================================
   INTERDICTION DE FUMER — /personnel/interdiction_fumer.aspx
   Panneau visuel standard du décret n°2006-1386. Pictogramme grand
   en rouge barré, texte légal centré.
   ============================================================ */
.cy-fiche .cy-interdiction-card {
    background: var(--bg-card, #FFFFFF);
    border: 1px solid var(--border-soft, #F1F0EC);
    border-radius: 12px;
    padding: 40px 32px;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -8px rgba(15,23,42,.08);
}
.cy-fiche .cy-interdiction-picto {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: #FEE2E2;
    color: #DC2626;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 96px;
    margin: 0 auto 24px auto;
    border: 6px solid #DC2626;
}
.cy-fiche .cy-interdiction-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 28px;
    font-weight: 600;
    color: #DC2626;
    text-transform: uppercase;
    letter-spacing: .02em;
    margin-bottom: 6px;
}
.cy-fiche .cy-interdiction-subtitle {
    font-size: 16px;
    color: var(--slate);
    margin-bottom: 28px;
}
.cy-fiche .cy-interdiction-legal {
    font-size: 14px;
    line-height: 1.6;
    color: var(--navy);
    text-align: left;
    background: var(--bg, #FAFAF7);
    padding: 18px 22px;
    border-radius: 8px;
    border-left: 3px solid var(--gold);
    margin-bottom: 18px;
}
.cy-fiche .cy-interdiction-sanction {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: #92400E;
    background: #FEF3C7;
    padding: 12px 16px;
    border-radius: 8px;
    border-left: 3px solid #F59E0B;
    text-align: left;
}
.cy-fiche .cy-interdiction-sanction > i {
    font-size: 18px;
    color: #F59E0B;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ============================================================
   MÉTHODE DE TRAVAIL — contenu HTML brut (rendu employé + preview admin)
   Le contenu de la table methode_travail est du HTML libre (h2, h4, p,
   ul, ol, table, img, strong). Ces règles harmonisent le style sur la
   typographie Conciergya (Fraunces + Inter) sans imposer de format au
   contenu.
   ============================================================ */
.cy-fiche .cy-methode-content {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--navy);
}
.cy-fiche .cy-methode-content h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--gold-dark);
    margin: 24px 0 12px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-soft, #F1F0EC);
}
.cy-fiche .cy-methode-content h2:first-child { margin-top: 0; }
.cy-fiche .cy-methode-content h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--navy);
    margin: 22px 0 10px 0;
}
.cy-fiche .cy-methode-content h4 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--navy);
    margin: 18px 0 8px 0;
}
.cy-fiche .cy-methode-content p { margin: 0 0 12px 0; }
.cy-fiche .cy-methode-content ul,
.cy-fiche .cy-methode-content ol { margin: 0 0 12px 0; padding-left: 22px; }
.cy-fiche .cy-methode-content li { margin-bottom: 4px; }
.cy-fiche .cy-methode-content strong { font-weight: 600; color: var(--navy); }
.cy-fiche .cy-methode-content table {
    margin: 12px 0 18px 0;
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--border-soft, #F1F0EC);
    border-radius: 8px;
    overflow: hidden;
}
.cy-fiche .cy-methode-content table td {
    border: 1px solid var(--border-soft, #F1F0EC);
    padding: 10px 14px;
    vertical-align: top;
}
.cy-fiche .cy-methode-content table img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    display: block;
}
.cy-fiche .cy-methode-content img {
    max-width: 100%;
    height: auto;
}

/* ============================================================
   PLANNING CONCIERGE — cards mobile-first
   /personnel/planning.aspx > Repeater DGV_planning
   Cards empilées en 1 colonne sur mobile, 2 colonnes ≥768px.
   Conçu pour usage terrain : badges horaires lisibles, avatar
   métier coloré (via metier.icon_name + metier.couleur_hex),
   boutons d'action tactiles (Itinéraire 44px+).
   ============================================================ */
.cy-fiche .cy-planning-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 8px;
}
@media (min-width: 768px) {
    .cy-fiche .cy-planning-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}
.cy-fiche .cy-planning-card {
    background: var(--bg-card, #FFFFFF);
    border: 1px solid var(--border-soft, #F1F0EC);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cy-fiche .cy-planning-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.cy-fiche .cy-planning-time-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    background: #DCFCE7;
    color: #166534;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 500;
}
.cy-fiche .cy-planning-time-badge > i {
    font-size: 16px;
    color: #166534;
}
.cy-fiche .cy-planning-duration {
    color: var(--slate, #475569);
    font-weight: 400;
    margin-left: 4px;
    font-size: 13px;
}
.cy-fiche .cy-planning-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #FFFFFF;  /* icône blanche sur fond saturé (cohérent espace client) */
}
.cy-fiche .cy-planning-avatar > i {
    font-size: 18px;
}
.cy-fiche .cy-planning-site {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 19px;
    font-weight: 600;
    color: var(--navy, #0F172A);
    margin: 4px 0 0 0;
    line-height: 1.25;
}
.cy-fiche .cy-planning-location {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    color: var(--slate, #475569);
}
.cy-fiche .cy-planning-location > i {
    font-size: 16px;
    color: var(--gold-dark, #B08F4D);
}
.cy-fiche .cy-planning-team {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--slate, #475569);
}
.cy-fiche .cy-planning-team > i {
    font-size: 16px;
}
.cy-fiche .cy-planning-actions {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}
.cy-fiche .cy-planning-btn {
    flex: 1;
    min-height: 44px;
    min-width: 0;  /* permet le shrink propre si 3 boutons */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px 8px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none !important;
    cursor: pointer;
    transition: transform .12s ease, background .12s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cy-fiche .cy-planning-btn:hover {
    transform: translateY(-1px);
}
.cy-fiche .cy-planning-btn > i {
    font-size: 17px;
}
.cy-fiche .cy-planning-btn-primary {
    background: var(--navy, #0F172A);
    color: #FFFFFF !important;
    border: 0;
}
.cy-fiche .cy-planning-btn-outline {
    background: #FFFFFF;
    color: var(--navy, #0F172A) !important;
    border: 1px solid var(--border-soft, #F1F0EC);
}
/* Date en haut de card (au lieu d'un footer) : scan rapide du jour avant
   les autres infos. Police plus marquée pour qu'elle ressorte. */
.cy-fiche .cy-planning-date-header {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 17px;
    font-weight: 600;
    color: var(--navy, #0F172A);
    letter-spacing: 0;
    border-bottom: 1px solid var(--border-soft, #F1F0EC);
    padding-bottom: 10px;
    margin-bottom: 8px;
    width: 100%;
}
.cy-fiche .cy-planning-date-header > i {
    font-size: 18px;
    color: var(--gold-dark, #B08F4D);
}

/* État vide (panel_planning_vide / panel_missions_vide en .vb) */
.cy-fiche .cy-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--slate, #475569);
}
.cy-fiche .cy-empty-state .cy-empty-sub {
    /* Sous-texte explicatif (critères, contexte) — sous le message principal */
    font-size: 13px;
    color: var(--slate-3, #94A3B8);
    margin-top: 10px;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}
.cy-fiche .cy-empty-state > i {
    font-size: 40px;
    color: var(--slate-3, #94A3B8);
    display: block;
    margin-bottom: 8px;
}

/* ============================================================
   PLANNING CONCIERGE — MINI-ROWS PAR JOUR (Option 1, densité max)
   /personnel/planning.aspx > Repeater DGV_planning (nouveau markup)

   Pattern : sections par jour (h3 .cy-planning-day-header émis par
   ItemDataBound côté .vb quand la date change) + mini-rows compactes
   (avatar + heure début bold + nom du site + ville + chevron).
   Tap sur une row → modal full-screen (.cy-planning-detail-overlay)
   qui révèle la card détaillée existante (avec les 3 boutons
   Itinéraire / Fiche / Covoiturage).
   ============================================================ */
.cy-fiche .cy-planning-rows {
    display: flex;
    flex-direction: column;
    margin-top: 4px;
    background: #FFFFFF;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    overflow: hidden;
}

/* Section header par jour : "LUNDI 18 MAI" en Inter petite, navy
   atténué, fond légèrement teinté pour séparer visuellement les
   journées sans alourdir. */
.cy-fiche .cy-planning-day-header {
    margin: 0;
    padding: 14px 16px 8px 16px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--slate, #475569);
    background: var(--bg, #FAFAF7);
    border-top: 1px solid var(--border-soft, #F1F0EC);
}
/* Premier section header : pas de border-top (on est déjà après les filtres) */
.cy-fiche .cy-planning-rows > .cy-planning-day-header:first-child {
    border-top: 0;
}

/* Mini-row : avatar (44px) | content (heure+site / ville) | chevron */
.cy-fiche .cy-planning-row {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    text-decoration: none !important;
    color: inherit;
    cursor: pointer;
    border-top: 1px solid var(--border-soft, #F1F0EC);
    background: #FFFFFF;
    transition: background .12s ease;
    -webkit-tap-highlight-color: transparent;
}
/* La row qui suit immédiatement un section header n'a pas besoin de border-top
   (le header a déjà une border-top, pas de double-trait). */
.cy-fiche .cy-planning-day-header + .cy-planning-row {
    border-top: 0;
}
.cy-fiche .cy-planning-row:hover,
.cy-fiche .cy-planning-row:active {
    background: var(--bg, #FAFAF7);
}
.cy-fiche .cy-planning-row .cy-planning-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* Override de la border carrée éventuelle héritée de la card détaillée :
       sur la row on veut une pastille ronde nette. */
    border: 0;
}
.cy-fiche .cy-planning-row .cy-planning-avatar > i {
    color: #FFFFFF;
    font-size: 22px;
    line-height: 1;
}
.cy-fiche .cy-planning-row-content {
    min-width: 0;  /* permet le truncate des longs noms de sites */
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cy-fiche .cy-planning-row-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 16px;
    line-height: 1.3;
    color: var(--navy, #0F172A);
    /* Permet le wrap sur 2 lignes max pour les longs noms, plutôt qu'un
       truncate brutal qui cacherait le nom du site. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cy-fiche .cy-planning-row-title > strong {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 700;
    margin-right: 4px;
}
.cy-fiche .cy-planning-row-sub {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    color: var(--slate, #475569);
}
.cy-fiche .cy-planning-row-chevron {
    color: var(--slate-3, #94A3B8);
    font-size: 20px;
    flex-shrink: 0;
}

/* ============================================================
   MODAL DÉTAIL PRESTATION — fullscreen overlay (mobile-first)
   Affichée par cyPlanningOpen(id) au tap sur une mini-row.
   Contient la card détaillée (.cy-planning-card existante) avec
   les 3 boutons Itinéraire / Fiche / Covoiturage.
   ============================================================ */
.cy-fiche .cy-planning-detail-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: flex-end;  /* sheet-style sur mobile (slide depuis le bas) */
    justify-content: center;
    /* Padding-bottom = max(safe-area-inset-bottom, 12px).
       Sur iPhone vrai, l'inset retourne ~34px (zone home indicator) donc la
       sheet est décollée pile de la safe-area. Sur Mac fenêtre réduite en
       mode démo, fallback 12px → la sheet ne colle pas au bord du viewport
       (sinon elle paraît "coupée" en bas). */
    padding: 0 0 max(env(safe-area-inset-bottom, 0), 12px) 0;
    /* Anim d'entrée légère, override par class .is-open ajoutée en JS */
    opacity: 0;
    transition: opacity 0.2s ease;
}
.cy-fiche .cy-planning-detail-overlay.is-open {
    opacity: 1;
}
/* hidden HTML attribute → display:none (overrides display:flex ci-dessus) */
.cy-fiche .cy-planning-detail-overlay[hidden] {
    display: none;
}

.cy-fiche .cy-planning-detail-modal {
    position: relative;
    background: var(--bg, #FAFAF7);
    width: 100%;
    max-width: 560px;
    /* Max-height ajustée pour tenir compte du padding-bottom de l'overlay
       (safe-area iPhone OU 12px fallback Mac) — la modal ne touche jamais
       les bords du viewport. */
    max-height: calc(95vh - max(env(safe-area-inset-bottom, 0), 12px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* 4 coins arrondis : depuis qu'on a ajouté un padding-bottom à l'overlay
       (safe-area iPhone ou 12px Mac), la modal flotte décollée du bord bas
       et mérite donc des coins arrondis en bas aussi (avant : 18px 18px 0 0
       = sheet collée). */
    border-radius: 18px;
    padding: 18px 14px 22px;
    box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.18);
    transform: translateY(20px);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.cy-fiche .cy-planning-detail-overlay.is-open .cy-planning-detail-modal {
    transform: translateY(0);
}

/* Croix de fermeture en haut à droite (touch target 40px, navy sur clair) */
.cy-fiche .cy-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 0;
    background: #FFFFFF;
    color: var(--navy, #0F172A);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.10);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 1;
}
.cy-fiche .cy-modal-close:hover {
    background: var(--bg, #FAFAF7);
}

/* La card à l'intérieur de la modal : pas de margin-bottom (la modal gère
   le padding), et l'avatar reprend son look carré arrondi (différent de
   la version pastille de la row). */
.cy-fiche .cy-planning-detail-modal .cy-planning-card {
    margin: 0;
}

/* Desktop ≥768px : la modal devient centrée (au lieu de sheet bas) */
@media (min-width: 768px) {
    .cy-fiche .cy-planning-detail-overlay {
        align-items: center;
        padding: 24px;
    }
    .cy-fiche .cy-planning-detail-modal {
        border-radius: 18px;
        transform: scale(0.96);
    }
    .cy-fiche .cy-planning-detail-overlay.is-open .cy-planning-detail-modal {
        transform: scale(1);
    }
}

/* Quand une modal est ouverte, on lock le scroll body (la class est
   ajoutée par cyPlanningOpen côté JS). */
body.cy-planning-modal-open {
    overflow: hidden;
}

/* ============================================================
   MODAL "TRAVAIL" — iframe rapport.aspx en consultation
   Singleton (un seul élément #cy-travail-overlay, src changé au runtime).
   Z-index 200 pour passer au-dessus de la modal détail prestation (100).
   Sur mobile : sheet plein écran (95vw × 95vh). Sur desktop ≥768px :
   modale centrée avec coins arrondis tout autour.
   ============================================================ */
.cy-fiche .cy-travail-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 0 max(env(safe-area-inset-bottom, 0), 12px) 0;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.cy-fiche .cy-travail-overlay.is-open {
    opacity: 1;
}
.cy-fiche .cy-travail-overlay[hidden] {
    display: none;
}

.cy-fiche .cy-travail-modal {
    position: relative;
    background: var(--bg, #FAFAF7);
    width: 100%;
    max-width: 720px;
    height: calc(95vh - max(env(safe-area-inset-bottom, 0), 12px));
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.18);
    transform: translateY(20px);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}
.cy-fiche .cy-travail-overlay.is-open .cy-travail-modal {
    transform: translateY(0);
}

/* Bouton X : position absolute au-dessus de l'iframe, z-index élevé pour
   rester cliquable même si l'iframe affiche son propre header. */
.cy-fiche .cy-modal-close.cy-travail-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    /* hérite des styles de .cy-modal-close (taille, forme, ombre) */
}

/* L'iframe remplit tout l'espace restant du modal */
.cy-fiche .cy-travail-iframe {
    flex: 1;
    width: 100%;
    border: 0;
    /* iOS Safari : scroll fluide dans l'iframe */
    -webkit-overflow-scrolling: touch;
}

/* Desktop ≥768px : modale centrée verticalement, plus petite */
@media (min-width: 768px) {
    .cy-fiche .cy-travail-overlay {
        align-items: center;
        padding: 24px;
    }
    .cy-fiche .cy-travail-modal {
        height: 88vh;
        transform: scale(0.96);
    }
    .cy-fiche .cy-travail-overlay.is-open .cy-travail-modal {
        transform: scale(1);
    }
}

/* ============================================================
   MODAL "COVOITURAGE" — liste compacte des coéquipiers
   Singleton (#cy-covoit-overlay). Z-index 200 (au-dessus de la modal
   détail prestation). Sheet style mobile, modale centrée desktop.
   ============================================================ */
.cy-fiche .cy-covoit-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 0 max(env(safe-area-inset-bottom, 0), 12px) 0;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.cy-fiche .cy-covoit-overlay.is-open {
    opacity: 1;
}
.cy-fiche .cy-covoit-overlay[hidden] {
    display: none;
}

.cy-fiche .cy-covoit-modal {
    position: relative;
    background: var(--bg, #FAFAF7);
    width: 100%;
    max-width: 560px;
    max-height: calc(85vh - max(env(safe-area-inset-bottom, 0), 12px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 18px;
    padding: 22px 18px 26px;
    box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.18);
    transform: translateY(20px);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.cy-fiche .cy-covoit-overlay.is-open .cy-covoit-modal {
    transform: translateY(0);
}

/* Titre "Équipe" en haut de la modal, icône users + Fraunces */
.cy-fiche .cy-covoit-title {
    margin: 0 0 16px 0;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--navy, #0F172A);
    display: flex;
    align-items: center;
    gap: 10px;
}
.cy-fiche .cy-covoit-title > i {
    color: var(--gold-dark, #B08F4D);
    font-size: 24px;
}

/* Liste des coéquipiers : stack vertical avec séparateurs subtils */
.cy-fiche .cy-covoit-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Section headers dans la modal Covoit — utilisés depuis le bouton Covoit
   des missions (où l'on affiche 2 sections "Déjà positionnés" et
   "Disponibles à proximité"). Inter petit uppercase navy + icône or. */
.cy-fiche .cy-covoit-section-title {
    margin: 4px 0 4px 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--navy, #0F172A);
    display: flex;
    align-items: center;
    gap: 8px;
}
.cy-fiche .cy-covoit-section-title > i {
    color: var(--gold-dark, #B08F4D);
    font-size: 16px;
}
/* La 2ème section "Disponibles à proximité" a un peu plus d'air au-dessus
   pour séparer visuellement des coéquipiers déjà positionnés. */
.cy-fiche .cy-covoit-section-title-second {
    margin-top: 16px;
}
/* Ligne italique "Aucun coéquipier pour l'instant" quand la section
   "Déjà positionnés" est vide (mission encore sans personne). */
.cy-fiche .cy-covoit-empty-line {
    margin: 0 0 4px 0;
    padding: 6px 2px;
    font-size: 13px;
    font-style: italic;
    color: var(--slate, #475569);
}
.cy-fiche .cy-covoit-card {
    background: #FFFFFF;
    border: 1px solid var(--border-soft, #F1F0EC);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cy-fiche .cy-covoit-name {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--navy, #0F172A);
}
.cy-fiche .cy-covoit-meta {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    color: var(--slate, #475569);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.cy-fiche .cy-covoit-meta > i {
    color: var(--gold-dark, #B08F4D);
    font-size: 16px;
}

/* Ligne info "numéro de téléphone" — affichée au-dessus des boutons d'action.
   Hérite du look .cy-covoit-meta (icône or + gris) avec un peu plus d'air. */
.cy-fiche .cy-covoit-tel {
    margin-top: 2px;
    font-size: 14px;
}

/* Container des 2 boutons d'action (Appeler / SMS) — flex row 50/50. */
.cy-fiche .cy-covoit-actions {
    margin-top: 8px;
    display: flex;
    gap: 8px;
}

/* Bouton téléphone (Appeler) : navy plein, tappable. Quand dans .cy-covoit-actions
   il prend 50 % de la largeur (flex:1). En standalone (état "pas de téléphone"),
   il prend toute la largeur. */
.cy-fiche .cy-covoit-phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--navy, #0F172A);
    color: #FFFFFF !important;
    text-decoration: none !important;
    border-radius: 10px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    min-height: 44px;
    transition: transform .12s ease, opacity .12s ease;
}
.cy-fiche .cy-covoit-actions > .cy-covoit-phone {
    flex: 1;  /* 50/50 dans le row d'actions */
    min-width: 0;
}
.cy-fiche .cy-covoit-phone:hover {
    transform: translateY(-1px);
}
.cy-fiche .cy-covoit-phone > i {
    font-size: 18px;
}

/* Bouton SMS : variante outline blanche pour différencier visuellement
   de "Appeler" (navy plein). Même taille / tap target. */
.cy-fiche .cy-covoit-phone-sms {
    background: #FFFFFF;
    color: var(--navy, #0F172A) !important;
    border: 1px solid var(--border-soft, #F1F0EC);
}
.cy-fiche .cy-covoit-phone-sms:hover {
    background: var(--bg, #FAFAF7);
}

/* État "pas de téléphone" : gris, non cliquable, pleine largeur */
.cy-fiche .cy-covoit-phone.is-empty {
    margin-top: 6px;
    background: var(--bg, #FAFAF7);
    color: var(--slate, #475569) !important;
    border: 1px dashed var(--border-soft, #F1F0EC);
}

/* Desktop ≥768px : modale centrée */
@media (min-width: 768px) {
    .cy-fiche .cy-covoit-overlay {
        align-items: center;
        padding: 24px;
    }
    .cy-fiche .cy-covoit-modal {
        transform: scale(0.96);
    }
    .cy-fiche .cy-covoit-overlay.is-open .cy-covoit-modal {
        transform: scale(1);
    }
}

/* Bouton générique en état "disabled" — utilisé par le bouton Covoiturage
   quand la mission est en solo (pas de coéquipiers à afficher). */
.cy-fiche .cy-planning-btn.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;  /* belt + suspenders : le JS guard early-return aussi */
}

/* ============================================================
   ACCES_SITE — Pills sélecteur de site du jour (RadioButtonList)
   /personnel/acces_site.aspx > #cy-site-pills-nav contient un
   RadioButtonList rendu en <span> avec <input type="radio"> + <label>
   en série. On styling chaque <label> en pill, et on utilise le
   sélecteur input:checked + label pour l'état actif.
   Note : la classe générique .cy-site-pills (lignes 2000+) est réservée
   à un autre usage (button-based). Ici on cible #cy-site-pills-nav
   pour ne pas entrer en conflit.
   ============================================================ */
.cy-fiche .cy-site-pills-nav {
    background: var(--bg, #FAFAF7);
    padding: 12px 10px 14px 10px;
    border-bottom: 1px solid var(--border-soft, #F1F0EC);
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.cy-fiche .cy-site-pills-nav::-webkit-scrollbar {
    display: none;
}

/* Le RadioButtonList ASP.NET rendu en <span> contient une suite de
   <input type="radio"> immédiatement suivis de <label>. On rend les
   inputs invisibles (mais accessibles) et on style chaque label en
   pill cliquable. */
.cy-fiche .cy-site-pills-nav > span input[type="radio"],
.cy-fiche .cy-site-pills-nav > input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.cy-fiche .cy-site-pills-nav label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #FFFFFF;
    border: 1px solid var(--border-soft, #F1F0EC);
    color: var(--navy, #0F172A);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
    min-height: 36px;
    box-sizing: border-box;
}
.cy-fiche .cy-site-pills-nav label:hover {
    background: var(--bg, #FAFAF7);
    border-color: var(--slate-3, #94A3B8);
}
/* État actif : le label qui suit immédiatement un input:checked.
   ASP.NET rend <input id="site_0" .../> <label for="site_0">...</label>
   en succession directe, donc le sélecteur + (adjacent sibling) marche. */
.cy-fiche .cy-site-pills-nav input[type="radio"]:checked + label {
    background: var(--navy, #0F172A);
    color: #FFFFFF;
    border-color: var(--navy, #0F172A);
    font-weight: 600;
}

/* Focus accessibilité : ring or visible quand on tab dans la liste. */
.cy-fiche .cy-site-pills-nav input[type="radio"]:focus-visible + label {
    box-shadow: 0 0 0 3px var(--gold-pale, rgba(176, 143, 77, 0.25));
}

/* Pills picker prestations sur rapport.aspx — variante <a> (Repeater) avec
   gestion d'état is-active côté serveur (Eval comparison). Identique
   visuellement aux pills label-based d'acces_site.aspx. */
.cy-fiche .cy-presta-pill {
    display: inline-flex;
    align-items: center;
    margin-right: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #FFFFFF;
    border: 1px solid var(--border-soft, #F1F0EC);
    color: var(--navy, #0F172A);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none !important;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
    min-height: 36px;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}
.cy-fiche .cy-presta-pill:hover {
    background: var(--bg, #FAFAF7);
    border-color: var(--slate-3, #94A3B8);
}
.cy-fiche .cy-presta-pill.is-active {
    background: var(--navy, #0F172A);
    color: #FFFFFF;
    border-color: var(--navy, #0F172A);
    font-weight: 600;
}

/* ============================================================
   RAPPORT.ASPX — Badge "En activité chez X depuis HH:MM"
   Affiché en haut de la page, rappelle à l'employé sur quelle
   presta il est en train de saisir. Fond vert clair (même palette
   que le bouton Dépointer actif d'acces.aspx).
   ============================================================ */
.cy-fiche .cy-presta-active-badge {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 12px 10px 16px 10px;
    padding: 12px 16px;
    background: #DCFCE7;
    border: 1px solid #86EFAC;
    border-radius: 12px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    color: #166534;
}
.cy-fiche .cy-presta-active-badge > i {
    color: #166534;
    font-size: 18px;
    margin-right: 4px;
}
.cy-fiche .cy-presta-active-badge .cy-presta-active-label {
    font-weight: 500;
}
.cy-fiche .cy-presta-active-badge strong {
    font-weight: 700;
    color: #0F4A24;
}
.cy-fiche .cy-presta-active-badge .cy-presta-active-since {
    margin-left: auto;
    font-size: 13px;
    color: #166534;
    font-weight: 500;
}

/* ============================================================
   Variante "action" du badge : maintenant en BOUTON DÉPOINTAGE en bas de
   rapport.aspx. Le badge devient interactif : hover lift, cursor pointer,
   sous-titre "Terminer ma prestation →".
   ============================================================ */
.cy-fiche .cy-presta-active-badge.cy-presta-active-action {
    margin-top: 24px;
    padding: 0;
    transition: box-shadow 180ms ease, transform 180ms ease;
    /* Important : conserve flex pour layout mais via le LinkButton interne */
    display: block;
}
.cy-fiche .cy-presta-active-action:hover {
    box-shadow: 0 6px 18px rgba(22, 101, 52, 0.18);
    transform: translateY(-1px);
}
.cy-fiche .cy-presta-active-action:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(22, 101, 52, 0.14);
}

/* Lien interne (asp:LinkButton rend un <a>) : prend toute la largeur,
   reprend le layout flex de l'ancien badge, ajoute le hint d'action. */
.cy-fiche .cy-presta-action-link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 14px 18px;
    color: #166534 !important;
    text-decoration: none !important;
    font-size: 14px;
    font-family: 'Inter', system-ui, sans-serif;
}
.cy-fiche .cy-presta-action-link > i {
    color: #166534;
    font-size: 18px;
    margin-right: 4px;
}
.cy-fiche .cy-presta-action-link .cy-presta-active-label { font-weight: 500; }
.cy-fiche .cy-presta-action-link strong {
    font-weight: 700;
    color: #0F4A24;
}
.cy-fiche .cy-presta-action-link .cy-presta-active-since {
    font-size: 13px;
    color: #166534;
    font-weight: 500;
}

/* Hint "→ Terminer ma prestation" en pleine largeur sous le texte d'état */
.cy-fiche .cy-presta-action-link .cy-presta-action-hint {
    flex-basis: 100%;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px dashed rgba(22, 101, 52, 0.25);
    font-size: 13px;
    font-weight: 600;
    color: #0F4A24;
    letter-spacing: 0.2px;
}

/* ============================================================
   Card "warning" (panel_pointage_requis) — message d'invitation
   quand l'employé n'a pas pointé. Bordure ambre, fond crème léger.
   ============================================================ */
.cy-fiche .cy-card.cy-card-warning {
    border-left: 4px solid var(--gold, #C9A87D);
    background: var(--cream, #FAF7F2);
}
.cy-fiche .cy-card.cy-card-warning .cy-card-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--navy, #0F172A);
}
.cy-fiche .cy-card.cy-card-warning .cy-card-title > i {
    color: #B45309;
    font-size: 22px;
}

/* ============================================================
   ACCES_SITE — Bouton "Copier le mot de passe" Wi-Fi (CTA navy)
   + indication d'aide + toast de confirmation.
   Pattern visuel cohérent avec les autres CTA de l'app.
   La connexion Wi-Fi directe depuis le navigateur n'est pas possible
   (restriction sécurité iOS/Android), on offre le compromis le plus
   pragmatique : copier le mdp dans le presse-papier + instructions.
   ============================================================ */
.cy-fiche .cy-wifi-connect-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    margin-top: 14px;
    background: var(--navy, #0F172A);
    color: #FFFFFF !important;
    border-radius: 12px;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none !important;
    min-height: 44px;
    box-sizing: border-box;
    transition: transform .12s ease;
}
.cy-fiche .cy-wifi-connect-btn:active {
    transform: translateY(1px);
}
.cy-fiche .cy-wifi-connect-btn > i {
    font-size: 20px;
}
.cy-fiche .cy-wifi-hint {
    margin: 10px 2px 0 2px;
    /* Aligné sur l'échelle de l'app : 13px Inter slate (idem cy-rapport-info,
       cy-section-intro-sub, et autres notes contextuelles). */
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    color: var(--slate, #475569);
    line-height: 1.5;
}
.cy-fiche .cy-wifi-hint strong {
    color: var(--navy, #0F172A);
    font-weight: 600;
}
.cy-fiche .cy-wifi-hint em {
    /* Le nom du réseau dans la phrase d'aide : pas d'italique réel, juste
       une mise en exergue navy + weight 500 pour le distinguer sans casser
       la lecture (l'app évite l'italique sauf cy-link). */
    font-style: normal;
    color: var(--navy, #0F172A);
    font-weight: 500;
}

/* Toast — singleton, slide depuis le bas, masqué par défaut.
   .is-visible activé en JS pendant 2.5s. */
.cy-fiche .cy-toast {
    position: fixed;
    left: 50%;
    bottom: max(24px, env(safe-area-inset-bottom, 16px));
    transform: translate(-50%, 20px);
    z-index: 300;
    background: var(--navy, #0F172A);
    color: #FFFFFF;
    padding: 12px 18px;
    border-radius: 999px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.32);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.cy-fiche .cy-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}
.cy-fiche .cy-toast > i {
    color: #5DCAA5;  /* teal pour le check */
    font-size: 18px;
}

/* ============================================================
   MISSIONS À POURVOIR — intro de section (clarifie ce que liste l'onglet)
   Posé juste sous la rangée de pills filtres dates, avant la liste de
   mini-rows. Style aéré, navy + slate, icône or.
   ============================================================ */
.cy-fiche .cy-section-intro {
    padding: 14px 4px 12px 4px;
}
.cy-fiche .cy-section-intro-title {
    margin: 0 0 4px 0;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--navy, #0F172A);
    display: flex;
    align-items: center;
    gap: 8px;
}
.cy-fiche .cy-section-intro-title > i {
    color: var(--gold-dark, #B08F4D);
    font-size: 22px;
}
.cy-fiche .cy-section-intro-sub {
    margin: 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    color: var(--slate, #475569);
    line-height: 1.5;
}

/* ============================================================
   MISSIONS À POURVOIR — badges info dans la modal détail
   3 mini-cards horizontales : Distance, Note client, Équipe (places).
   Insertées dans .cy-planning-card (réutilisée pour la modal mission).
   ============================================================ */
.cy-fiche .cy-mission-badges {
    /* Flex au lieu de grid 3-col fixe : s'adapte au nombre de badges
       (2 actuellement après retrait de "Note client"). Chaque badge prend
       une part égale via flex:1 plus bas. */
    display: flex;
    gap: 8px;
    margin: 4px 0 6px 0;
}
.cy-fiche .cy-mission-badge {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 6px;
    background: var(--bg, #FAFAF7);
    border: 1px solid var(--border-soft, #F1F0EC);
    border-radius: 10px;
    text-align: center;
    /* Le contenu peut wrapper sur mobile étroit, on garde une min-height
       constante pour aligner visuellement les 3 badges. */
    min-height: 76px;
    justify-content: center;
}
.cy-fiche .cy-mission-badge > i {
    font-size: 20px;
    color: var(--gold-dark, #B08F4D);
}
.cy-fiche .cy-mission-badge-label {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: var(--slate, #475569);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
}
.cy-fiche .cy-mission-badge > strong {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--navy, #0F172A);
}

/* ============================================================
   MISSIONS — Actions (Mockup B, mai 2026)
   3 chips compacts (Itinéraire / Travail / Covoiturage) sur une
   rangée flex 3-colonnes, puis CTA pleine largeur "Je me positionne".
   Chacun ≥44px de touch target.
   ============================================================ */
.cy-fiche .cy-mission-actions-chips {
    display: flex;
    gap: 6px;
    margin: 0 0 8px 0;
}
.cy-fiche .cy-mission-actions-chips > a {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 4px;
    background: #FFFFFF;
    border: 1px solid var(--border-soft, #F1F0EC);
    border-radius: 10px;
    text-decoration: none !important;
    color: var(--navy, #0F172A);
    min-height: 54px;
    transition: transform .12s ease, background .12s ease;
    -webkit-tap-highlight-color: transparent;
}
.cy-fiche .cy-mission-actions-chips > a:hover {
    transform: translateY(-1px);
    background: var(--bg, #FAFAF7);
}
.cy-fiche .cy-mission-actions-chips > a > i {
    font-size: 18px;
    color: var(--navy, #0F172A);
}
.cy-fiche .cy-mission-actions-chips > a > span {
    font-size: 11px;
    font-weight: 500;
    color: var(--slate, #475569);
    line-height: 1.1;
    text-align: center;
}

/* CTA principal "Je me positionne" : navy plein, pleine largeur. */
.cy-fiche .cy-mission-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px;
    background: var(--navy, #0F172A);
    color: #FFFFFF !important;
    border-radius: 12px;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none !important;
    min-height: 44px;
    box-sizing: border-box;
    transition: transform .12s ease;
}
.cy-fiche .cy-mission-cta:hover {
    transform: translateY(-1px);
}
.cy-fiche .cy-mission-cta > i {
    font-size: 18px;
}

/* ============================================================
   TABS HORIZONTAUX — remplacent la sidebar sur l'espace concierge
   (100% mobile en pratique). Pills scrollable, icône + label.
   La pill active est en navy plein.
   ============================================================ */
.cy-fiche .cy-tabs {
    display: flex;
    gap: 8px;
    padding: 10px 16px 14px 16px;
    background: var(--bg-card, #FFFFFF);
    border-bottom: 1px solid var(--border-soft, #F1F0EC);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: sticky;
    top: calc(var(--cy-brand-bar-h, 48px) + var(--cy-header-h, 76px));
    z-index: 20;
}
.cy-fiche .cy-tabs::-webkit-scrollbar { display: none; }
.cy-fiche .cy-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    text-decoration: none !important;
    color: var(--slate, #475569);
    background: transparent;
    border: 1px solid var(--border-soft, #F1F0EC);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.cy-fiche .cy-tab:hover {
    background: var(--bg, #FAFAF7);
    color: var(--navy, #0F172A);
}
.cy-fiche .cy-tab.active {
    background: var(--navy, #0F172A);
    color: #FFFFFF;
    border-color: var(--navy, #0F172A);
}
.cy-fiche .cy-tab > i {
    font-size: 15px;
}

/* Quand le content n'a plus de sidebar (espace concierge tabs), annule
   le margin-left:220px appliqué globalement à .cy-fiche .cy-content.
   On réduit aussi le padding horizontal pour gagner en largeur sur mobile
   (où chaque pixel compte) : 10px de marge L/R seulement. */
.cy-fiche .cy-content-no-sidebar {
    margin-left: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    /* Sur les pages mobile-first (cy-content-no-sidebar = espace concierge),
       on compacte le padding-top hérité de .cy-content (18px par défaut) :
       sinon avec les pills filtres déjà espacées de 12px en bas, on cumule
       30+px de vide entre les filtres et le premier section header
       "MARDI 19 MAI" — ce qui paraît "choquant" sur smartphone. */
    padding-top: 4px !important;
}

/* ============================================================
   MOBILE HEADERS GROUP — wrapper qui contient brand-bar + header + tabs.
   APPROCHE GLISSEMENT NATUREL (cf. fix appliqué à cy-concierge-menu plus
   haut, étendu ici à toutes les pages cy-fiche).
   Le wrapper est dans le flux normal (position:relative). Au scroll, il
   sort progressivement de l'écran via le scroll natif du navigateur —
   plus de toggle binaire via la class cy-scrolling-down (qui faisait
   un translateY(-100%) brutal et "subit" à mi-glissement).
   Les enfants restent statiques pour ne pas créer de sticky individuels
   conflictuels.
   ============================================================ */
.cy-fiche .cy-mobile-headers {
    position: relative;
    z-index: 1;
    background: var(--bg, #FAFAF7);
}

/* Override explicite de la règle scrolling-down : on neutralise tout
   transform pour empêcher la disparition brutale (cf. comportement
   désormais identique à cy-concierge-menu). */
body.cy-scrolling-down .cy-fiche .cy-mobile-headers {
    transform: none !important;
}

/* Les enfants du wrapper restent statiques (le wrapper est désormais
   en position:relative, mais on garde l'annulation des sticky individuels
   héritées de .cy-brand-bar/.cy-header/.cy-tabs pour éviter qu'ils se
   "collent" en haut pendant que le wrapper sort de l'écran). */
.cy-fiche .cy-mobile-headers .cy-brand-bar,
.cy-fiche .cy-mobile-headers .cy-header,
.cy-fiche .cy-mobile-headers .cy-tabs {
    position: static !important;
    top: auto !important;
}

/* Pills filtres dates intégrés dans le wrapper headers : look cohérent
   avec les tabs (scrollable horizontalement, padding inline, pas de
   border-bottom redondante avec le séparateur du content).
   Padding-bottom réduit de 12px → 6px : combiné au padding-top:4px sur
   cy-content-no-sidebar, on a un espace total ~10-12px entre les pills
   et le premier section header — assez aéré sans paraître vide. */
.cy-fiche .cy-mobile-headers .cy-planning-filters {
    margin: 0 !important;
    padding: 8px 10px 6px 10px !important;
    gap: 6px !important;
    border-bottom: none !important;
    background: var(--bg, #FAFAF7);
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.cy-fiche .cy-mobile-headers .cy-planning-filters::-webkit-scrollbar {
    display: none;
}
.cy-fiche .cy-mobile-headers .cy-planning-filters .cy-filter-chip {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 0 12px !important;  /* compacter les pills sur mobile */
}

/* ============================================================
 * Pills "contexte verrouillé" — site/métier auto-déduits du pointage
 * actif (commande.aspx). Aspect non-interactif, fond doré clair.
 * ============================================================ */
.cy-context-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, #FAF1DC, #F5E6BC);
    border: 1px solid #C9A965;
    color: #0F172A;
    font-size: 14px;
    font-weight: 600;
    cursor: default;
    user-select: none;
}
.cy-context-pill i.ti {
    color: #A88450;
    font-size: 16px;
}

/* ============================================================
 * paie_personnel.aspx — validation par ligne + grille feuilles de paie
 * ============================================================ */
/* Badge "Validé" vert dans la colonne Validation */
.cy-paie-badge-ok {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 999px;
    background: #DCFCE7;
    color: #166534;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.cy-paie-badge-ok i.ti { font-size: 15px; }

/* Variante compacte du bouton primaire (validation par ligne) */
.cy-btn.cy-btn-sm {
    padding: 6px 16px !important;
    font-size: 13px !important;
}

/* Grille de cartes "feuille de paie" (icône PDF + label période) */
.cy-paie-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
.cy-paie-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 120px;
    padding: 18px 12px;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    background: #FFFFFF;
    color: #0F172A;
    text-decoration: none;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.cy-paie-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.1);
    border-color: #C9A965;
}
.cy-paie-card-icon {
    font-size: 38px;
    color: #C0392B;
}
.cy-paie-card-label {
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

/* paie_personnel : badge "Erreur signalée" + bouton ghost + actions empilées */
.cy-paie-badge-err {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 999px;
    background: #FEF3C7;
    color: #92400E;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.cy-paie-badge-err i.ti { font-size: 15px; }

.cy-paie-actions {
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
}

/* Bouton secondaire discret (Signaler une erreur) */
.cy-btn.cy-btn-ghost {
    background: transparent !important;
    color: #92400E !important;
    border: 1px solid #E5C97B !important;
    box-shadow: none !important;
}
.cy-btn.cy-btn-ghost:hover {
    background: #FEF3C7 !important;
}

/* ============================================================
 * paie_personnel : refonte en cartes (metric cards + cartes pointage)
 * ============================================================ */
.cy-paie-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
.cy-paie-metric {
    background: #F8F6F0;
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cy-paie-metric-label { font-size: 13px; color: #64748B; }
.cy-paie-metric-value { font-size: 22px; font-weight: 600; color: #0F172A; }

.cy-pt-list { display: flex; flex-direction: column; gap: 10px; }
.cy-pt-card {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 14px 16px;
}
.cy-pt-head { display: flex; align-items: flex-start; gap: 14px; }
.cy-pt-datebox {
    width: 48px; height: 48px;
    flex-shrink: 0;
    border-radius: 8px;
    background: #F8F6F0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    line-height: 1.1;
}
.cy-pt-dow { font-size: 11px; color: #64748B; text-transform: lowercase; }
.cy-pt-day { font-size: 18px; font-weight: 700; color: #0F172A; }
.cy-pt-info { flex: 1; min-width: 0; }
.cy-pt-site { font-size: 15px; font-weight: 600; color: #0F172A; }
.cy-pt-sub { font-size: 13px; color: #64748B; margin-top: 2px; }
.cy-pt-sub i.ti { font-size: 14px; vertical-align: -2px; }
.cy-pt-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.cy-pt-hours { font-size: 18px; font-weight: 700; color: #0F172A; white-space: nowrap; }
.cy-pt-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; font-weight: 600;
    padding: 2px 9px; border-radius: 999px; white-space: nowrap;
}
.cy-pt-badge i.ti { font-size: 13px; }
.cy-pt-badge-dim { background: #E6F1FB; color: #185FA5; }
.cy-pt-badge-ferie { background: #FAEEDA; color: #854F0B; }
.cy-pt-foot {
    margin-top: 12px; padding-top: 12px;
    border-top: 1px solid #F1EFE8;
}
.cy-pt-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cy-pt-actions .cy-btn { flex: 1; min-width: 150px; text-align: center; }

@media (max-width: 600px) {
    .cy-paie-metrics { grid-template-columns: 1fr; }
    .cy-pt-actions .cy-btn { min-width: 100%; }
}

/* paie_personnel : correctifs — récap sur 1 ligne + boutons non soulignés */
.cy-fiche .cy-paie-metrics {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.cy-pt-actions .cy-btn,
.cy-paie-actions .cy-btn {
    text-decoration: none !important;
}
@media (max-width: 600px) {
    .cy-fiche .cy-paie-metrics { grid-template-columns: 1fr !important; }
}

/* paie_personnel : badge compteur "X à valider" sur le titre de la card */
.cy-pt-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 10px;
    padding: 3px 12px;
    border-radius: 999px;
    background: #FAEEDA;
    color: #854F0B;
    font-size: 13px;
    font-weight: 600;
    vertical-align: middle;
}
.cy-pt-count-badge.cy-pt-count-ok {
    background: #DCFCE7;
    color: #166534;
}
.cy-pt-count-badge i.ti { font-size: 14px; }

/* paie_personnel : badge "Heures normales" (jour ouvré, ni dimanche ni férié) */
.cy-pt-badge-normal { background: #F1EFE8; color: #5F5E5A; }

/* paie_personnel : badges sous l'horaire (libère la largeur du titre sur mobile) */
.cy-pt-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cy-pt-badges:empty { display: none; }

/* ============================================================
   paie_gouvernant : sélecteur de périmètre (Direction uniquement)
   Visuellement distinct des filtres standards pour signaler la
   notion de "polyvalence n-1" — la Direction consulte l'équipe
   d'un gouvernant choisi.
   ============================================================ */
.cy-gouv-scope {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    border: 1px solid #C9B68A;
    background: #FBF5E6;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
}
.cy-gouv-scope-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6B5418;
    white-space: nowrap;
}
.cy-gouv-scope select {
    border: none;
    background: transparent;
    font-weight: 600;
    color: #2A2620;
    padding: 2px 4px;
    cursor: pointer;
}
.cy-gouv-scope select:focus {
    outline: 2px solid #C9B68A;
    outline-offset: 1px;
    border-radius: 4px;
}

/* ============================================================
   paie_gouvernant : encart "Signalements à traiter"
   (validation='Erreur'). Visuellement orange = alerte douce.
   ============================================================ */
.cy-card.cy-card-alert {
    border-left: 4px solid #E07F2F;
    background: linear-gradient(180deg, #FFF7EC 0%, #FFFFFF 60%);
}
.cy-card.cy-card-alert .cy-card-title .ti-alert-triangle {
    color: #E07F2F;
}
.cy-card.cy-card-alert .cy-card-title .cy-pt-count-badge {
    background: #FAEEDA;
    color: #854F0B;
    margin-left: 6px;
}
.cy-signal-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cy-signal-card {
    border: 1px solid #E8D8B9;
    background: #FFFFFF;
    border-radius: 10px;
    padding: 14px 16px;
}
.cy-signal-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}
.cy-signal-who {
    font-weight: 600;
    color: #2A2620;
}
.cy-signal-who i.ti { color: #8C7A4D; }
.cy-signal-when {
    color: #6B6359;
    font-size: 13px;
    text-transform: capitalize;
}
.cy-signal-site {
    margin-top: 4px;
    color: #5F5E5A;
    font-size: 14px;
}
.cy-signal-site i.ti { color: #8C7A4D; }
.cy-signal-motif {
    margin: 10px 0;
    padding: 10px 14px;
    border-left: 3px solid #E07F2F;
    background: #FFF7EC;
    color: #4A2E0E;
    font-style: italic;
    border-radius: 4px;
}
.cy-signal-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.cy-signal-meta {
    color: #8A8378;
    font-size: 12px;
}
@media (max-width: 600px) {
    .cy-signal-foot {
        flex-direction: column;
        align-items: stretch;
    }
    .cy-signal-foot .cy-btn { text-align: center; }
}

/* ============================================================
   acces.aspx (panneau gouvernant) : badge inline à côté du
   bouton "Pointage et note de frais". Compte des signalements
   à traiter (validation='Erreur').
   ============================================================ */
.cy-menu-badge-inline {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 10px;
    border-radius: 999px;
    background: #FAEEDA;
    color: #854F0B;
    font-size: 12px;
    font-weight: 700;
    vertical-align: middle;
    box-shadow: inset 0 0 0 1px #E8D8B9;
}
.cy-menu-badge-inline::before {
    content: "⚠ ";
}

/* ============================================================
   note_de_frais.aspx — refonte design (mai 2026)
   ============================================================ */

/* Ligne titre + total cumulé alignés à droite (card "en cours") */
.cy-card-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.cy-card-title-row .cy-card-title { margin: 0; }

.cy-frais-total {
    display: inline-block;
    padding: 4px 12px;
    background: #FBF5E6;
    color: #854F0B;
    border: 1px solid #E8D8B9;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

/* Type de frais en pills (RadioButtonList RepeatLayout=Flow) */
.cy-type-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.cy-type-pills label {
    display: inline-flex;
    align-items: center;
    padding: 9px 16px;
    border: 1px solid #E8E2D0;
    border-radius: 8px;
    background: #fff;
    color: #6B6359;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.cy-type-pills label:hover { border-color: #C9A856; }
.cy-type-pills input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}
.cy-type-pills input[type="radio"]:checked + label {
    background: #C9A856;
    color: #1F1B12;
    border-color: #B8973F;
    font-weight: 600;
}

/* Select-with-other : dropdown + champ texte révélé quand "Autre…" choisi */
.cy-select-other { position: relative; }
.cy-select-other-trigger { width: 100%; }
.cy-select-other-input { margin-top: 8px; }
.cy-select-other-input input[type="text"],
.cy-select-other-input input:not([type]) {
    width: 100%;
    border: 1px solid #C9A856;
    background: #FBF5E6;
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 13px;
    color: #1F1B12;
}

/* Liste des frais en cours : cards compactes (icône + ligne + montant + del) */
.cy-frais-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 12px 0 0 0;
}
.cy-frais-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #E8E2D0;
    border-radius: 8px;
    background: #fff;
}
.cy-frais-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 7px;
    background: #FBF5E6;
    color: #BA7517;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cy-frais-icon .ti { font-size: 18px; }
.cy-frais-body { flex: 1; min-width: 0; }
.cy-frais-line {
    font-size: 13px;
    color: #1F1B12;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cy-frais-sub {
    font-size: 11px;
    color: #7B7367;
    margin-top: 2px;
}
.cy-frais-amount {
    font-size: 14px;
    font-weight: 600;
    color: #1F1B12;
    white-space: nowrap;
}
.cy-frais-del {
    flex-shrink: 0;
    color: #C0392B;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.12s;
}
.cy-frais-del:hover { background: #FCEBEB; }
.cy-frais-del .ti { font-size: 16px; }
@media (max-width: 540px) {
    .cy-frais-card { flex-wrap: wrap; }
    .cy-frais-body { flex: 1 1 100%; order: 2; }
    .cy-frais-icon { order: 1; }
    .cy-frais-amount { order: 3; margin-left: auto; }
    .cy-frais-del { order: 4; }
}

/* Footer validation : question + toggle Oui/Non + bouton Envoyer */
.cy-frais-validation {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #EFE9D6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.cy-frais-validation-q {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #1F1B12;
}
.cy-frais-validation-q .ti { color: #BA7517; font-size: 17px; }
.cy-frais-validation-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Mini toggle Oui/Non (style segmented control) */
.cy-mini-toggle {
    display: inline-flex;
    border: 1px solid #E8E2D0;
    border-radius: 6px;
    overflow: hidden;
}
.cy-mini-toggle label {
    display: inline-block;
    padding: 5px 14px;
    background: #fff;
    color: #6B6359;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    border-left: 1px solid #E8E2D0;
    transition: background 0.12s, color 0.12s;
}
.cy-mini-toggle label:first-of-type { border-left: none; }
.cy-mini-toggle input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}
.cy-mini-toggle input[type="radio"]:checked + label {
    background: #F5F0E0;
    color: #1F1B12;
    font-weight: 600;
}

/* Historique : grid de cards PDF */
.cy-historique-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    margin-top: 6px;
}
.cy-historique-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid #E8E2D0;
    border-radius: 8px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: background 0.12s, border-color 0.12s;
}
.cy-historique-card:hover {
    background: #FBF5E6;
    border-color: #C9A856;
}
.cy-historique-icon {
    flex-shrink: 0;
    color: #C0392B;
    font-size: 24px;
}
.cy-historique-meta { flex: 1; min-width: 0; }
.cy-historique-numero {
    font-size: 13px;
    color: #1F1B12;
    font-weight: 600;
}
.cy-historique-date {
    font-size: 11px;
    color: #7B7367;
    text-transform: capitalize;
    margin-top: 1px;
}
.cy-historique-arrow {
    flex-shrink: 0;
    color: #7B7367;
    font-size: 15px;
}

/* ============================================================
   note_de_frais (refonte 2026-05-28) — layout sans sidebar :
   les 3 cards (saisie, en cours, historique) s'empilent en
   pleine largeur. .cy-layout-stack neutralise le margin-left
   réservé à la sidebar et impose un gap vertical entre cards.
   ============================================================ */
.cy-fiche .cy-layout-stack { display: block; }
.cy-fiche .cy-layout-stack .cy-content {
    margin-left: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* note_de_frais : pas de styling local pour .cy-success-label —
   on s'appuie sur le standard défini ligne 2502 (.cy-fiche .cy-success-label).
   Le "✓" est intégré directement dans le texte côté .vb. */

/* ============================================================
   note_de_frais : file upload moderne (facture PDF)
   Pattern parallèle à .cy-btn-photo : <asp:FileUpload> caché
   via .cy-visually-hidden, <label for=...> stylé en bouton.
   Le nom du fichier choisi apparaît à droite (#cyFactureName).
   ============================================================ */
.cy-file-upload-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.cy-btn-file {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid #E8E2D0;
    background: #fff;
    color: #1F1B12;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s, border-color 0.12s;
}
.cy-btn-file:hover {
    background: #FBF5E6;
    border-color: #C9A856;
}
.cy-btn-file .ti { font-size: 17px; color: #BA7517; }
.cy-file-upload-name {
    font-size: 12px;
    color: #7B7367;
    font-style: italic;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cy-file-upload-name.is-set {
    color: #166534;
    font-style: normal;
    font-weight: 500;
}
.cy-file-upload-name.is-set::before {
    content: "✓ ";
}

/* note_de_frais : cy-toggle-binary à l'intérieur de cy-frais-validation
   neutralise la margin par défaut (6px 0 18px 0) du toggle pour éviter
   un espacement déséquilibré dans la flex row [toggle | Envoyer]. */
.cy-fiche .cy-frais-validation > .cy-toggle-binary {
    margin: 0;
}

/* note_de_frais : bannière info "fenêtre d'envoi 1-5 du mois" (cy-envoi-window-info).
   Apparaît dans panel_validation, force sa propre ligne (width:100%) pour ne pas
   se mélanger au toggle + bouton Envoyer. */
.cy-envoi-window-info {
    display: block;
    width: 100%;
    padding: 10px 14px;
    background: #FFF7EC;
    color: #4A2E0E;
    border: 1px solid #E8D8B9;
    border-left: 3px solid #E07F2F;
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.45;
    margin-bottom: 6px;
}
.cy-envoi-window-info::before {
    content: "ⓘ ";
    color: #E07F2F;
    font-weight: 700;
}

/* ====================================================================
   ESPACE COORDINATION — landing pages (coordination_*.aspx)
   + nouveaux variants tile-icon pour la card Coordination dans acces.aspx
   Ajouté 2026-05-29 (refactor Espace coordination Option B)
   ==================================================================== */

/* Avatars colorés pour les 4 tuiles de la card Coordination dans acces.aspx */
.cy-client-menu .cy-tile-icon-green,
.cy-concierge-menu .cy-tile-icon-green        { background: #EAF3DE; }
.cy-client-menu .cy-tile-icon-green > i,
.cy-concierge-menu .cy-tile-icon-green > i    { color: #27500A; }

.cy-client-menu .cy-tile-icon-purple,
.cy-concierge-menu .cy-tile-icon-purple       { background: #EEEDFE; }
.cy-client-menu .cy-tile-icon-purple > i,
.cy-concierge-menu .cy-tile-icon-purple > i   { color: #3C3489; }

.cy-client-menu .cy-tile-icon-coral,
.cy-concierge-menu .cy-tile-icon-coral        { background: #FAECE7; }
.cy-client-menu .cy-tile-icon-coral > i,
.cy-concierge-menu .cy-tile-icon-coral > i    { color: #993C1D; }

.cy-client-menu .cy-tile-icon-orange,
.cy-concierge-menu .cy-tile-icon-orange       { background: #FAEEDA; }
.cy-client-menu .cy-tile-icon-orange > i,
.cy-concierge-menu .cy-tile-icon-orange > i   { color: #854F0B; }

/* Card titrée Espace coordination / intervention dans acces.aspx */
.cy-fiche .cy-acces-card {
    margin: 0 0 16px 0;
    padding: 14px 14px 8px 14px;
    background: var(--cream-soft, #FBF7EE);
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.06);
}
.cy-fiche .cy-acces-card > .cy-card-title {
    padding: 0 4px;
    margin-bottom: 12px;
}

/* === LANDING PAGES coordination_*.aspx === */

/* Bouton flèche retour dans la brand-bar */
.cy-brand-bar .cy-brand-back {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    margin-right: 4px;
    transition: background 0.15s;
}
.cy-brand-bar .cy-brand-back:hover,
.cy-brand-bar .cy-brand-back:focus { background: rgba(255, 255, 255, 0.12); }
.cy-brand-bar .cy-brand-back i { font-size: 18px; }

/* Wrapper main de la page coordination */
.cy-coord-page {
    background: var(--cream-soft, #FBF7EE);
    min-height: calc(100vh - 56px);
}

/* Titre + sous-titre */
.cy-coord-title {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 500;
    font-size: 28px;
    color: var(--navy, #0F172A);
    margin: 4px 0 4px 0;
    line-height: 1.15;
}
.cy-coord-sub {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    color: rgba(15, 23, 42, 0.55);
    margin: 0 0 20px 0;
}

/* Grid des pills — mobile first, 1 colonne large par défaut */
.cy-coord-pills {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
@media (min-width: 480px) {
    .cy-coord-pills { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 720px) {
    .cy-coord-pills { grid-template-columns: 1fr 1fr 1fr; }
}

/* Pill = grand bouton plein, lisible au pouce sur mobile */
.cy-coord-pill {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: #FFFFFF;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    text-decoration: none;
    color: var(--navy, #0F172A);
    transition: border-color 0.15s, transform 0.06s, box-shadow 0.15s;
    min-height: 56px;
    position: relative;
}
.cy-coord-pill:hover,
.cy-coord-pill:focus {
    border-color: var(--gold-dark, #8A6F3A);
    box-shadow: 0 2px 8px rgba(138, 111, 58, 0.12);
}
.cy-coord-pill:active { transform: scale(0.985); }

.cy-coord-pill-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--gold-pale, #F6EFD9);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cy-coord-pill-icon i {
    font-size: 20px;
    color: var(--gold-dark, #8A6F3A);
    line-height: 1;
}

.cy-coord-pill-name {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: var(--navy, #0F172A);
    flex: 1;
}

/* Badge compteur (signalements à traiter, etc.) */
.cy-coord-pill-badge {
    background: #E24B4A;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 600;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ====================================================================
   COORDINATION — liste_clients.aspx + bandeau coordinateur mon_profil
   Ajouté 2026-05-29 (refactor Espace coordination Option B / sélecteur)
   ==================================================================== */

/* Bandeau "Vous éditez le profil de [client]" dans mon_profil.aspx */
.cy-coord-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #FAEEDA;
    border-left: 4px solid #BA7517;
    padding: 12px 16px;
    margin: 0 0 8px 0;
    font-size: 14px;
    color: #633806;
    border-radius: 0;
}
.cy-coord-banner > i {
    font-size: 18px;
    color: #BA7517;
    flex-shrink: 0;
}
.cy-coord-banner-text {
    flex: 1;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 400;
}
.cy-coord-banner-text strong {
    font-weight: 500;
    color: #412402;
}
.cy-coord-banner-back {
    background: rgba(186, 117, 23, 0.15);
    color: #633806;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    transition: background 0.15s;
}
.cy-coord-banner-back:hover,
.cy-coord-banner-back:focus {
    background: rgba(186, 117, 23, 0.28);
    color: #412402;
}
.cy-coord-banner-back i { font-size: 14px; }

/* Barre de recherche dans liste_clients.aspx */
.cy-clients-search {
    position: relative;
    margin-bottom: 16px;
}
.cy-clients-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: rgba(15, 23, 42, 0.45);
    pointer-events: none;
}
.cy-clients-search input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px 12px 44px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 12px;
    background: #FFFFFF;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 15px;
    color: var(--navy, #0F172A);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.cy-clients-search input:focus {
    outline: none;
    border-color: var(--gold-dark, #8A6F3A);
    box-shadow: 0 0 0 3px rgba(138, 111, 58, 0.15);
}

/* Liste des cards client */
.cy-clients-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cy-client-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #FFFFFF;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    text-decoration: none;
    color: var(--navy, #0F172A);
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.06s;
}
.cy-client-card:hover,
.cy-client-card:focus {
    border-color: var(--gold-dark, #8A6F3A);
    box-shadow: 0 2px 8px rgba(138, 111, 58, 0.12);
}
.cy-client-card:active { transform: scale(0.99); }

.cy-client-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--gold-pale, #F6EFD9);
    color: var(--gold-dark, #8A6F3A);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 500;
    font-size: 14px;
    flex-shrink: 0;
}

.cy-client-info {
    flex: 1;
    min-width: 0;
}
.cy-client-name {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: var(--navy, #0F172A);
    margin: 0 0 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cy-client-meta {
    font-size: 12px;
    color: rgba(15, 23, 42, 0.55);
}
.cy-client-chev {
    font-size: 18px;
    color: rgba(15, 23, 42, 0.35);
    flex-shrink: 0;
}

.cy-clients-empty {
    text-align: center;
    padding: 32px 16px;
    color: rgba(15, 23, 42, 0.5);
    font-size: 14px;
}

/* ====================================================================
   COORDINATION 2026-05-29 (refactor 2+D variante 1 : 3 axes accordéon
   sur acces.aspx + barre pills persistante via master page)
   ==================================================================== */

/* === ACCORDÉON SUR ACCES.ASPX (Option D) === */

.cy-coord-acc-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cy-coord-acc {
    background: var(--color-background-primary, #FFFFFF);
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.15s;
}
.cy-coord-acc.is-open {
    border-color: var(--gold-dark, #8A6F3A);
}

.cy-coord-acc-head {
    width: 100%;
    background: transparent;
    border: none;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-family: 'Inter', system-ui, sans-serif;
    text-align: left;
    transition: background 0.15s;
}
.cy-coord-acc-head:hover { background: rgba(138, 111, 58, 0.06); }

.cy-coord-acc-dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 15px;
}
.cy-coord-dot-terrain  { background: #639922; }
.cy-coord-dot-equipe   { background: #534AB7; }
.cy-coord-dot-commerce { background: #BA7517; }

.cy-coord-acc-name {
    flex: 1;
    font-weight: 500;
    font-size: 15px;
    color: var(--navy, #0F172A);
}
.cy-coord-acc-count {
    font-size: 12px;
    color: rgba(15, 23, 42, 0.5);
    margin-right: 6px;
}

.cy-coord-acc-badge {
    background: #E24B4A;
    color: white;
    font-size: 11px;
    font-weight: 500;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
}
/* Badge pill (pour les pills d'outils dans un accordéon).
   Plus petit que cy-coord-acc-badge, sans margin-right. */
.cy-pill-badge {
    background: #E24B4A;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 600;
    min-width: 16px;
    height: 16px;
    border-radius: 999px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    vertical-align: middle;
}

.cy-coord-acc-chev {
    color: rgba(15, 23, 42, 0.35);
    font-size: 18px;
    transition: transform 0.15s, color 0.15s;
}
.cy-coord-acc.is-open .cy-coord-acc-chev {
    transform: rotate(180deg);
    color: var(--gold-dark, #8A6F3A);
}

.cy-coord-acc-body {
    display: none;
    padding: 4px 14px 14px;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.cy-coord-acc.is-open .cy-coord-acc-body { display: flex; }

.cy-coord-acc-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--color-background-secondary, #F1EFE8);
    border: 0.5px solid rgba(15, 23, 42, 0.06);
    border-radius: 999px;
    text-decoration: none;
    color: var(--navy, #0F172A);
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s, border-color 0.15s, transform 0.06s;
}
.cy-coord-acc-pill:hover,
.cy-coord-acc-pill:focus {
    background: var(--color-background-primary, #FFFFFF);
    border-color: var(--gold-dark, #8A6F3A);
}
.cy-coord-acc-pill:active { transform: scale(0.985); }
.cy-coord-acc-pill i {
    font-size: 14px;
    color: var(--gold-dark, #8A6F3A);
    flex-shrink: 0;
}

.cy-coord-acc-sep {
    font-size: 18px;
    color: rgba(15, 23, 42, 0.25);
    padding: 0 6px;
    user-select: none;
    align-self: center;
}


/* === BARRE PILLS PERSISTANTE (Piste 2, injectée par le master) === */

/* Barre coordination — homogène charte Conciergya : fond cream-soft,
   bordure subtile en bas, pills cohérentes avec le pattern accordéon. */
.cy-coord-pillsbar {
    background: var(--cream-soft, #FBF7EE);
    color: var(--navy, #0F172A);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 90;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-bottom: 0.5px solid rgba(15, 23, 42, 0.10);
}

.cy-coord-pillsbar-home {
    color: var(--navy, #0F172A);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    flex-shrink: 0;
    transition: background 0.15s;
}
.cy-coord-pillsbar-home:hover,
.cy-coord-pillsbar-home:focus { background: rgba(15, 23, 42, 0.06); }
.cy-coord-pillsbar-home i { font-size: 16px; }

.cy-coord-pillsbar-axe {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 14px;
    color: rgba(15, 23, 42, 0.6);
    margin-right: 4px;
    flex-shrink: 0;
}

.cy-coord-pillsbar-pills {
    display: flex;
    gap: 6px;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

/* Pill de la barre master — même look que cy-coord-acc-pill (accordéon) :
   fond gris secondary, texte navy, active en navy. Préfixe distinct pour
   éviter conflit avec .cy-coord-pill du landing coordination_*.aspx legacy.
   flex-shrink:0 empêche la compression (sinon les pills se chevauchent
   au lieu de scroller horizontalement quand il y en a trop). */
.cy-coord-pillsbar-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: var(--color-background-primary, #FFFFFF);
    border: 0.5px solid rgba(15, 23, 42, 0.10);
    border-radius: 999px;
    text-decoration: none;
    color: var(--navy, #0F172A);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
    min-height: 0;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.cy-coord-pillsbar-pill:hover,
.cy-coord-pillsbar-pill:focus {
    background: var(--color-background-primary, #FFFFFF);
    border-color: var(--gold-dark, #8A6F3A);
}
.cy-coord-pillsbar-pill.is-active {
    background: var(--navy, #0F172A);
    color: #FFFFFF;
    border-color: var(--navy, #0F172A);
}

.cy-coord-pillsbar-sep {
    color: rgba(15, 23, 42, 0.25);
    padding: 0 2px;
    user-select: none;
    font-size: 16px;
    flex-shrink: 0;
}

/* Badge compteur sur un pill d'accordéon (ex : Pointage signalements à traiter) */
.cy-coord-acc-pill-badge {
    background: #E24B4A;
    color: white;
    font-size: 11px;
    font-weight: 500;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    line-height: 1;
}

/* ====================================================================
   PLANNING_ADMIN modernisation (chunk B)
   Pills picker (1-5 pers.) + toggle binaire (Oui/Non) via RadioButtonList
   ==================================================================== */

/* Cache les inputs radio natifs et stylise le label adjacent en pill */
.cy-rbl-pills,
.cy-rbl-toggle {
    display: inline-flex;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.cy-rbl-pills input[type="radio"],
.cy-rbl-toggle input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.cy-rbl-pills label,
.cy-rbl-toggle label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

/* === Pills picker (1-5 personnes) === */
.cy-rbl-pills label {
    min-width: 40px;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--color-background-secondary, #F1EFE8);
    border: 0.5px solid rgba(15, 23, 42, 0.10);
    color: var(--navy, #0F172A);
    font-weight: 500;
    font-size: 14px;
}
.cy-rbl-pills label:hover {
    background: var(--color-background-primary, #FFFFFF);
    border-color: var(--gold-dark, #8A6F3A);
}
.cy-rbl-pills input[type="radio"]:checked + label {
    background: var(--navy, #0F172A);
    color: white;
    border-color: var(--navy, #0F172A);
}

/* === Toggle binaire (Oui/Non) — pattern inspiré cy-toggle-binary === */
.cy-rbl-toggle {
    background: var(--color-background-secondary, #F1EFE8);
    border-radius: 999px;
    padding: 3px;
    gap: 0;
}
.cy-rbl-toggle label {
    padding: 6px 18px;
    border-radius: 999px;
    background: transparent;
    color: var(--color-text-secondary, #5F5E5A);
    font-size: 13px;
    font-weight: 500;
}
.cy-rbl-toggle input[type="radio"]:checked + label {
    background: var(--color-background-primary, #FFFFFF);
    color: var(--navy, #0F172A);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
/* Valeur "Oui" (Value=1) en vert quand actif, "Non" (Value=0) en gris neutre */
.cy-rbl-toggle input[type="radio"][value="1"]:checked + label {
    background: #639922;
    color: white;
    box-shadow: none;
}

/* ====================================================================
   PLANNING_ADMIN chunk C1 — cards mobile-friendly
   Remplace le GridView 15 colonnes par cards verticales
   ==================================================================== */

.cy-planning-card {
    background: var(--color-background-primary, #FFFFFF);
    border: 0.5px solid rgba(15, 23, 42, 0.10);
    border-radius: var(--border-radius-md, 8px);
    padding: 12px 14px;
    margin-bottom: 10px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.cy-planning-card:hover {
    border-color: var(--gold-dark, #8A6F3A);
    box-shadow: 0 2px 8px rgba(138, 111, 58, 0.08);
}

.cy-planning-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
/* =====================================================================
   Planning_admin — Toggle d'onglets de vues (Liste / Calendrier / Équipe)
   ===================================================================== */
.cy-fiche .cy-planning-view-tabs {
    display: flex;
    background: #F1EFE8;
    border-radius: 99px;
    padding: 3px;
    gap: 2px;
    margin: 0 0 14px;
    /* Sticky tabs : restent visibles en haut de l'écran quand on scrolle
       dans la liste, donc 1 clic pour rebasculer Calendrier / Équipe
       depuis n'importe quelle position (utile notamment après clic
       d'un event du calendrier qui centre la card cible en plein milieu
       d'une longue liste). Top = hauteur du .cy-header sticky.
       z-index < 50 (header) pour passer dessous, mais > contenu cards. */
    position: sticky;
    top: 56px;
    z-index: 30;
    box-shadow: 0 6px 12px -8px rgba(15, 23, 42, 0.18);
}
@media (max-width: 720px) {
    .cy-fiche .cy-planning-view-tabs { top: 48px; }
}
.cy-fiche .cy-planning-view-tab,
.cy-fiche .cy-planning-view-tab:link,
.cy-fiche .cy-planning-view-tab:visited,
.cy-fiche .cy-planning-view-tab:hover,
.cy-fiche .cy-planning-view-tab:focus,
.cy-fiche .cy-planning-view-tab:active {
    flex: 1;
    text-align: center;
    padding: 7px 8px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 500;
    color: var(--slate, #5F5E5A);
    background: transparent;
    text-decoration: none !important;
    cursor: pointer;
    transition: background .12s, color .12s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.cy-fiche .cy-planning-view-tab > i {
    font-size: 14px;
}
.cy-fiche .cy-planning-view-tab:hover {
    background: rgba(255,255,255,0.6);
    color: var(--navy, #1A2942);
}
.cy-fiche .cy-planning-view-tab.is-active,
.cy-fiche .cy-planning-view-tab.is-active:link,
.cy-fiche .cy-planning-view-tab.is-active:visited,
.cy-fiche .cy-planning-view-tab.is-active:hover,
.cy-fiche .cy-planning-view-tab.is-active:focus {
    background: var(--navy, #1A2942);
    color: #fff !important;
}

/* =====================================================================
   Planning_admin — Vue Calendrier (semaine, scroll horizontal mobile)
   ===================================================================== */
.cy-fiche .cy-cal-wknav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border: 0.5px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: 6px 8px;
    margin-bottom: 10px;
    /* Sticky sous les onglets de vue : on cumule top du .cy-header (~56px)
       + hauteur effective des .cy-planning-view-tabs (~42px + margin 14px).
       Ça maintient le bandeau jour/semaine toujours visible pendant le scroll
       vertical de la timeline. */
    position: sticky;
    top: 112px;
    z-index: 20;
    box-shadow: 0 6px 12px -10px rgba(15, 23, 42, 0.20);
}
@media (max-width: 720px) {
    .cy-fiche .cy-cal-wknav { top: 100px; }
}
.cy-fiche .cy-cal-wknav-arrow,
.cy-fiche .cy-cal-wknav-arrow:link,
.cy-fiche .cy-cal-wknav-arrow:visited,
.cy-fiche .cy-cal-wknav-arrow:hover {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #F1EFE8;
    color: var(--slate, #5F5E5A);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    text-decoration: none !important;
}
.cy-fiche .cy-cal-wknav-arrow:hover {
    background: var(--navy, #1A2942);
    color: #fff;
}
.cy-fiche .cy-cal-wknav-center {
    text-align: center;
}
.cy-fiche .cy-cal-wknav-lbl {
    font-weight: 600;
    color: var(--navy, #1A2942);
    font-size: 13px;
}
.cy-fiche .cy-cal-wknav-sub {
    font-size: 11px;
    color: var(--slate, #888780);
}

.cy-fiche .cy-cal-scroll-wrap {
    background: #fff;
    border-radius: 10px;
    padding: 8px;
}
.cy-fiche .cy-cal-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
}
.cy-fiche .cy-cal-scroll::-webkit-scrollbar {
    height: 4px;
}
.cy-fiche .cy-cal-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 99px;
}

/* Grille calendrier — min-width 660px → déborde sur mobile, swipe-able */
.cy-fiche .cy-cal-grid {
    min-width: 660px;
    display: grid;
    grid-template-columns: 48px repeat(7, 1fr);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    overflow: hidden;
}
.cy-fiche .cy-cal-grid .cy-cal-h {
    background: #F8F6EF;
    padding: 8px 4px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--slate, #5F5E5A);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.cy-fiche .cy-cal-grid .cy-cal-h.today {
    background: var(--navy, #1A2942);
    color: #fff;
}
.cy-fiche .cy-cal-grid .cy-cal-t {
    background: #F8F6EF;
    padding: 14px 4px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--slate, #5F5E5A);
    border-right: 1px solid rgba(0, 0, 0, 0.06);
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.04);
}
.cy-fiche .cy-cal-grid .cy-cal-c {
    padding: 6px 4px;
    border-right: 0.5px solid rgba(0, 0, 0, 0.04);
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.04);
    min-height: 50px;
}
/* Event de base — chunk 1 : couleur unique neutre (une presta peut intégrer
   les 3 statuts donc le codage couleur par statut n'a pas de sens côté
   calendrier). On garde uniquement la variante .warn pour sous-effectif.
   Rendu en <a> au lieu de <div> pour permettre clic clavier + accessibilité. */
.cy-fiche .cy-cal-ev,
.cy-fiche a.cy-cal-ev,
.cy-fiche a.cy-cal-ev:link,
.cy-fiche a.cy-cal-ev:visited,
.cy-fiche a.cy-cal-ev:hover,
.cy-fiche a.cy-cal-ev:focus,
.cy-fiche a.cy-cal-ev:active {
    display: block;
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.25;
    margin-bottom: 3px;
    cursor: pointer;
    text-decoration: none;
    background: #F1ECDE;            /* beige doré pâle, neutre, contraste navy OK */
    color: var(--navy);
    border: 0.5px solid rgba(176, 143, 77, 0.18);
    transition: transform 120ms var(--t), box-shadow 120ms var(--t);
}
.cy-fiche a.cy-cal-ev:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.10);
}
.cy-fiche a.cy-cal-ev:focus-visible {
    outline: 2px solid var(--gold-dark, #B08F4D);
    outline-offset: 1px;
}
/* Variante sous-effectif : rouge pâle, prime sur la base. */
.cy-fiche a.cy-cal-ev.warn,
.cy-fiche a.cy-cal-ev.warn:link,
.cy-fiche a.cy-cal-ev.warn:visited,
.cy-fiche a.cy-cal-ev.warn:hover,
.cy-fiche a.cy-cal-ev.warn:focus,
.cy-fiche a.cy-cal-ev.warn:active {
    background: #FCEBEB;
    color: #A32D2D;
    border-color: #F7C1C1;
}
/* Sous-éléments d'un event calendrier : heure / site / pill sous-effectif */
.cy-fiche .cy-cal-ev-h {
    display: block;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.2px;
}
.cy-fiche .cy-cal-ev-s {
    display: block;
    font-size: 10px;
    opacity: 0.82;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 1px;
}
/* Label "Sous-effectif" — remplace l'ancien compteur "N/M" */
.cy-fiche .cy-cal-ev-w {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-top: 3px;
    padding: 1px 6px;
    border-radius: 99px;
    background: rgba(163, 45, 45, 0.14);
    color: #A32D2D;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.cy-fiche .cy-cal-ev-w i {
    font-size: 10px;
}

/* =========================================================================
   Planning_admin — Vue Équipe (Option 2 — Timeline JOUR)
   1 ligne par intervenant ayant ≥1 planning sur la semaine du jour cible.
   Axe horaire 6h→21h, barres positionnées en % selon heure_debut/heure_fin
   réelles. Permet de voir qui est libre (track vide), qui est surchargé
   (plusieurs barres), et les chevauchements visuellement.
   Couleurs vives texte blanc — distinctes des chips card Liste (pastels).
   ========================================================================= */
/* Wrapper externe : flex 2 colonnes (labels fixe à gauche + zone scroll à droite).
   Aucun padding horizontal sur ce conteneur — chaque sous-zone gère le sien.
   Pas de min-width ici : le min-width est porté par .cy-eq-tl-scroll-inner pour
   que SEULE la zone droite scrolle horizontalement (les labels restent fixes). */
.cy-fiche .cy-eq-tl {
    background: white;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 10px;
    padding: 14px 0 18px;
    display: flex;
    align-items: stretch;
    overflow: hidden;
}
/* Colonne gauche : labels intervenants, NON scrollable horizontalement.
   width fixe pour rester aligné avec les tracks à droite. */
.cy-fiche .cy-eq-tl-labels-col {
    flex-shrink: 0;
    width: 152px;
    display: flex;
    flex-direction: column;
    padding-left: 16px;
    padding-right: 8px;
    border-right: 1px solid rgba(15, 23, 42, 0.06);
    background: white;
}
/* Spacer en tête de la colonne labels — aligne avec la zone axe horaire */
.cy-fiche .cy-eq-tl-labels-head {
    height: 18px;
    margin-bottom: 6px;
}
/* Zone droite scrollable horizontalement.
   overflow-x: auto active le scroll ; min-width: 0 empêche flex de l'élargir. */
.cy-fiche .cy-eq-tl-scroll-area {
    flex: 1;
    overflow-x: auto;
    min-width: 0;
    padding: 0 16px;
    -webkit-overflow-scrolling: touch;
}
/* Inner = contenu de largeur réelle (force le scroll quand viewport étroit) */
.cy-fiche .cy-eq-tl-scroll-inner {
    min-width: 880px;
    display: flex;
    flex-direction: column;
}
/* Axe horaire (header) : ticks 6h / 9h / 12h / 15h / 18h / 21h en absolute */
.cy-fiche .cy-eq-tl-axis {
    position: relative;
    height: 18px;
    margin-bottom: 6px;
    border-bottom: 1px dashed rgba(15, 23, 42, 0.10);
}
.cy-fiche .cy-eq-tl-tick {
    position: absolute;
    transform: translateX(-50%);
    top: 0;
    font-size: 11px;
    color: var(--slate, #5F5E5A);
    white-space: nowrap;
}
/* Lignes / labels : hauteur fixe identique pour aligner verticalement
   colonne labels et zone tracks (chaque ligne = 46px + 6px margin) */
.cy-fiche .cy-eq-tl-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    height: 46px;
    margin-bottom: 6px;
    min-width: 0;
}
/* Nom = portion ellipsis-able si trop long. Couleur = couleur de statut
   (alignée sur la légende), appliquée via la classe modificatrice
   sal/int/pre sur le parent .cy-eq-tl-label. */
.cy-fiche .cy-eq-tl-label-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.cy-fiche .cy-eq-tl-label.sal .cy-eq-tl-label-name { color: #7C6AC8; }
.cy-fiche .cy-eq-tl-label.int .cy-eq-tl-label-name { color: #C18A2E; }
.cy-fiche .cy-eq-tl-label.pre .cy-eq-tl-label-name { color: #C04A30; }
/* Suffixe statut = jamais tronqué, reste lisible quoi qu'il arrive. */
.cy-fiche .cy-eq-tl-label-st {
    font-weight: 500;
    flex-shrink: 0;
    white-space: nowrap;
}
.cy-fiche .cy-eq-tl-label-st.int { color: #B97615; }
.cy-fiche .cy-eq-tl-label-st.pre { color: #B5402A; }
/* Track : zone où les barres sont positionnées en absolute. Le fond pâle
   matérialise visuellement la journée 6h-21h disponible.
   Hauteur identique au label (46px + 6px margin) pour alignement vertical
   entre les 2 colonnes (labels fixe + zone scrollable). */
.cy-fiche .cy-eq-tl-track {
    position: relative;
    height: 46px;
    margin-bottom: 6px;
    background: #F1ECDE;
    border-radius: 8px;
}
/* Barre = créneau cliquable, positionné en % sur l'axe 6h-21h.
   left + width sont injectés en style inline par le .vb. flex column
   pour empiler site + nature presta sur 2 lignes. */
.cy-fiche a.cy-eq-tl-bar,
.cy-fiche a.cy-eq-tl-bar:link,
.cy-fiche a.cy-eq-tl-bar:visited,
.cy-fiche a.cy-eq-tl-bar:hover,
.cy-fiche a.cy-eq-tl-bar:focus,
.cy-fiche a.cy-eq-tl-bar:active {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    color: white;
    overflow: hidden;
    padding: 4px 8px;
    text-decoration: none;
    cursor: pointer;
    transition: transform 120ms var(--t), box-shadow 120ms var(--t);
    line-height: 1.15;
    text-align: center;
}
/* Ligne 1 = nom du site (gras, taille normale) */
.cy-fiche .cy-eq-tl-bar-site {
    font-size: 12px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Ligne 2 = nature presta (plus petit, opacité réduite) */
.cy-fiche .cy-eq-tl-bar-presta {
    font-size: 10px;
    font-weight: 400;
    opacity: 0.88;
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Fallback couleurs barres (par statut) — seulement utilisé si .vb n'a
   pas appliqué de background inline (ex: erreur). En usage normal, la
   couleur du fond vient d'un style inline calculé en .vb par site
   (palette stable hash-based, cf. ColorForSite_Internal). */
.cy-fiche a.cy-eq-tl-bar.sal { background: #7C6AC8; }
.cy-fiche a.cy-eq-tl-bar.int { background: #C18A2E; }
.cy-fiche a.cy-eq-tl-bar.pre { background: #C04A30; }
.cy-fiche a.cy-eq-tl-bar:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px -4px rgba(15, 23, 42, 0.30);
    filter: brightness(1.05);
}
.cy-fiche a.cy-eq-tl-bar:focus-visible {
    outline: 2px solid var(--gold-dark, #B08F4D);
    outline-offset: 2px;
}
/* Légende swatches — couleurs alignées sur les barres */
.cy-fiche .cy-eq-sw-sal { background: #7C6AC8; }
.cy-fiche .cy-eq-sw-int { background: #C18A2E; }
.cy-fiche .cy-eq-sw-pre { background: #C04A30; }
/* Titre de groupe-site : sépare visuellement les blocs d'intervenants
   travaillant sur le même site. La couleur du titre matche celle des
   barres du site (style inline calculé en .vb via ColorForSite_Internal). */
.cy-fiche .cy-eq-tl-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 4px;
    padding: 4px 10px 4px 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.cy-fiche .cy-eq-tl-group-title .cy-eq-tl-group-sw {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}
.cy-fiche .cy-eq-tl-group-title.libre {
    color: var(--slate, #5F5E5A);
    text-transform: none;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0;
}
.cy-fiche .cy-eq-tl-group-title.libre .cy-eq-tl-group-sw {
    background: #D6D2C5;
}
/* Espacement réduit entre lignes d'un même groupe */
.cy-fiche .cy-eq-tl-group + .cy-eq-tl-row,
.cy-fiche .cy-eq-tl-row + .cy-eq-tl-row {
    margin-top: 2px;
}

/* Empty state quand 0 intervenant sur la semaine */
.cy-fiche .cy-eq-tl-empty {
    padding: 28px 16px;
    text-align: center;
    color: var(--slate, #5F5E5A);
    font-style: italic;
    font-size: 13px;
}
@media (max-width: 720px) {
    /* Mobile : la colonne labels reste fixe à gauche, la zone droite scrolle
       horizontalement. Colonne labels rétrécie pour laisser place aux barres. */
    .cy-fiche .cy-eq-tl { padding: 12px 0 14px; }
    .cy-fiche .cy-eq-tl-labels-col { width: 128px; padding-left: 10px; padding-right: 6px; }
    .cy-fiche .cy-eq-tl-scroll-area { padding: 0 10px; }
    .cy-fiche .cy-eq-tl-scroll-inner { min-width: 760px; }
    .cy-fiche .cy-eq-tl-label { font-size: 12px; height: 42px; }
    .cy-fiche a.cy-eq-tl-bar { padding: 3px 6px; }
    .cy-fiche .cy-eq-tl-bar-site { font-size: 11px; }
    .cy-fiche .cy-eq-tl-bar-presta { font-size: 9px; }
    .cy-fiche .cy-eq-tl-track { height: 42px; }
}

/* Highlight de retour Liste — quand on clique un event du calendrier,
   la card est centrée à l'écran ET flashée pendant ~2s pour la repérer. */
@keyframes cy-card-pulse {
    0%   { box-shadow: 0 0 0 3px rgba(176, 143, 77, 0.55); }
    100% { box-shadow: 0 0 0 0   rgba(176, 143, 77, 0); }
}
.cy-fiche .cy-planning-card.cy-highlight {
    animation: cy-card-pulse 1.6s ease-out 1;
}

.cy-fiche .cy-cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    font-size: 11px;
    color: var(--slate, #5F5E5A);
}
.cy-fiche .cy-cal-legend-it {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.cy-fiche .cy-cal-legend-it .sw {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
}

/* =====================================================================
   Planning_admin — Pillsbar de filtre (Plannings programmés)
   4 pills temporelles : jour / demain / tout / historique.
   ===================================================================== */
.cy-fiche .cy-planning-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 14px;
}
/* Note : on couvre toutes les pseudo-classes des LinkButton (rendu <a>)
   pour neutraliser l'underline et la couleur par défaut du browser. */
.cy-fiche .cy-planning-filter-pill,
.cy-fiche .cy-planning-filter-pill:link,
.cy-fiche .cy-planning-filter-pill:visited,
.cy-fiche .cy-planning-filter-pill:hover,
.cy-fiche .cy-planning-filter-pill:focus,
.cy-fiche .cy-planning-filter-pill:active {
    padding: 6px 14px;
    border-radius: 999px;
    border: 0.5px solid rgba(15, 23, 42, 0.14);
    background: #fff;
    color: var(--navy, #1A2942);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none !important;
    transition: background .12s, border-color .12s, color .12s;
    outline: none;
}
.cy-fiche .cy-planning-filter-pill:hover,
.cy-fiche .cy-planning-filter-pill:focus {
    background: #FCFAF3;
    border-color: rgba(176, 143, 77, 0.5);
    color: var(--navy, #1A2942);
}
.cy-fiche .cy-planning-filter-pill.is-active,
.cy-fiche .cy-planning-filter-pill.is-active:link,
.cy-fiche .cy-planning-filter-pill.is-active:visited,
.cy-fiche .cy-planning-filter-pill.is-active:hover,
.cy-fiche .cy-planning-filter-pill.is-active:focus,
.cy-fiche .cy-planning-filter-pill.is-active:active {
    background: var(--navy, #1A2942);
    color: #fff !important;
    border-color: var(--navy, #1A2942);
}

/* =====================================================================
   Planning_admin — Modale d'édition (chunk C2 — Option A overlay)
   Le wrapper #cy-fec contient la bannière + les 3 cards de saisie.
   En mode création (par défaut), c'est un container transparent neutre.
   En mode édition (body.is-modal-edit set par le .vb au handler Edit),
   le wrapper passe en position fixed centré + le body a un overlay
   sombre derrière. Au save/cancel, on retire la classe → retour au layout normal.
   ===================================================================== */
.cy-fec {
    /* Mode création : neutre, n'affecte pas le layout normal */
}
body.cy-modal-edit {
    overflow: hidden; /* bloque le scroll de l'arrière-plan */
}
body.cy-modal-edit::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 100;
}
body.cy-modal-edit #cy-fec {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 101;
    width: calc(100% - 32px);
    max-width: 720px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: var(--bg, #FAF8F1);
    padding: 18px;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
/* Mobile : modale en plein écran (pas de gap autour, pas de border-radius). */
@media (max-width: 720px) {
    body.cy-modal-edit #cy-fec {
        top: 0;
        left: 0;
        right: 0;
        transform: none;
        width: 100%;
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
        padding: 12px;
    }
    body.cy-modal-edit #cy-fec .cy-edit-banner {
        margin: -12px -12px 14px;
        border-radius: 0;
    }
    /* Mobile — réduire les marges latérales du content et des cards
       pour mieux utiliser l'écran (le style inline du <main> impose
       padding 16px 24px ; on override avec spécificité + !important). */
    body .cy-fiche main.cy-content,
    body main.cy-content {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    body .cy-fiche .cy-card {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    /* Mobile — augmenter légèrement la typo et les zones tactiles pour
       lisibilité et confort tactile. */
    .cy-fiche .cy-planning-meta {
        font-size: 14px;
        gap: 10px 14px;
    }
    .cy-fiche .cy-planning-meta-it i {
        font-size: 16px;
    }
    .cy-fiche .cy-planning-team-h {
        font-size: 11px;
    }
    .cy-fiche .cy-fiche-row {
        font-size: 14px;
        padding: 6px 14px;
    }
    .cy-fiche .cy-planning-consigne {
        font-size: 14px;
    }
    .cy-fiche .cy-planning-time-badge {
        font-size: 16px;
        padding: 6px 14px;
    }
    .cy-fiche .cy-planning-duration {
        font-size: 14px;
    }
    /* Icônes d'action : zones tactiles ~44px (Apple HIG min) */
    .cy-fiche .cy-icon-btn {
        width: 42px;
        height: 42px;
        font-size: 19px;
    }
    .cy-fiche .cy-planning-actions {
        gap: 8px;
        padding-top: 14px;
    }
    .cy-fiche .cy-planning-contact-row,
    .cy-fiche .cy-planning-admin-row {
        gap: 8px;
    }
    /* Chips équipe légèrement plus lisibles */
    .cy-fiche .cy-planning-chip {
        font-size: 12px;
        padding: 4px 10px;
    }
}
/* Bannière "Modification en cours" : sticky en haut de la modale pour
   rester visible quand l'user scrolle dans le form long. Le z-index la
   pose au-dessus des cards. Padding/margin ajustés pour qu'elle colle
   au bord du wrapper (visuellement intégrée). */
body.cy-modal-edit #cy-fec .cy-edit-banner {
    position: sticky;
    top: 0;
    z-index: 5;
    margin: -18px -18px 14px;
    border-radius: 14px 14px 10px 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* =====================================================================
   Planning_admin — Bannière "Modification en cours" (chunk C2)
   Visible quand le coordinateur clique "Modifier" sur une card planning.
   Le .vb met Panel.Visible=True + pré-remplit les contrôles du formulaire.
   ===================================================================== */
.cy-fiche .cy-edit-banner {
    background: #FAEEDA;
    border: 0.5px solid #FAC775;
    border-radius: 10px;
    padding: 12px 16px;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.cy-fiche .cy-edit-banner-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cy-fiche .cy-edit-banner-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #FAC775;
    color: #5C3A06;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.cy-fiche .cy-edit-banner-txt {
    font-size: 13px;
    color: #5C3A06;
    line-height: 1.4;
}
.cy-fiche .cy-edit-banner-txt strong {
    display: block;
    font-size: 14px;
    color: #412402;
    font-weight: 600;
    margin-bottom: 1px;
}
.cy-fiche .cy-edit-banner-cancel {
    background: transparent;
    border: 0.5px solid #BA7517;
    color: #5C3A06;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    white-space: nowrap;
}
.cy-fiche .cy-edit-banner-cancel:hover {
    background: #fff;
}

/* =====================================================================
   Planning_admin — refonte 2026-06-03 (alignée sur le détail intervenant)
   Structure d'une card :
     date (icône or + texte navy) → trait fin
     card-top (badge horaire vert ↔ avatar métier coloré)
     site (h3) + meta (ville, métier, nb pers)
     équipe (label + chips colorés sal/int/presta)
     fiche-row (badge vert ou gris)
     consigne (bloc accent or si présent)
     actions (4 icônes client ↔ 2 icônes admin)
   ===================================================================== */
.cy-fiche .cy-planning-card-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    color: var(--navy, #1A2942);
    font-weight: 600;
    margin-bottom: 12px;
}
.cy-fiche .cy-planning-card-date > i {
    color: var(--gold-dark, #B08F4D);
    font-size: 16px;
}
.cy-fiche .cy-planning-card-sep {
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
    margin: 0 -20px 14px;
}
.cy-fiche .cy-planning-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 13px;
    color: var(--slate, #5F5E5A);
    margin: 6px 0 12px;
}
.cy-fiche .cy-planning-meta-it {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.cy-fiche .cy-planning-meta-it > i {
    color: #888780;
    font-size: 14px;
}
.cy-fiche .cy-planning-team-h {
    font-size: 10px;
    font-weight: 600;
    color: #888780;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 4px 0 6px;
}
/* cy-planning-team (chips container) hérite déjà du flex wrap existant */

/* Badge fiche habituelle */
.cy-fiche .cy-fiche-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    margin: 4px 0 4px;
}
.cy-fiche .cy-fiche-row > i {
    font-size: 14px;
}
.cy-fiche .cy-fiche-on {
    background: #EAF3DE;
    color: #3B6D11;
    border: 0.5px solid #C0DD97;
}
.cy-fiche .cy-fiche-off {
    background: #F1EFE8;
    color: #888780;
    border: 0.5px solid rgba(0, 0, 0, 0.06);
}

/* Actions row : icônes client (gauche) + icônes admin (droite) */
.cy-fiche .cy-planning-card .cy-planning-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border-top: 0.5px solid rgba(0, 0, 0, 0.06);
    padding-top: 12px;
    margin-top: 8px;
}
.cy-fiche .cy-planning-contact-row,
.cy-fiche .cy-planning-admin-row {
    display: flex;
    gap: 6px;
}
.cy-fiche .cy-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #fff;
    border: 0.5px solid rgba(15, 23, 42, 0.12);
    color: var(--slate, #5F5E5A);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: border-color .12s, background .12s, color .12s;
    text-decoration: none;
    padding: 0;
}
.cy-fiche .cy-icon-btn:hover {
    border-color: rgba(176, 143, 77, 0.5);
    background: #FCFAF3;
    color: var(--navy, #1A2942);
}
/* Variantes hover par fonction */
.cy-fiche .cy-icon-btn.ic-phone:hover { color: #0F766E; border-color: #0F766E; }
.cy-fiche .cy-icon-btn.ic-sms:hover   { color: #3B82F6; border-color: #3B82F6; }
.cy-fiche .cy-icon-btn.ic-mail:hover  { color: #185FA5; border-color: #185FA5; }
.cy-fiche .cy-icon-btn.ic-map:hover   { color: #A32D2D; border-color: #A32D2D; }
.cy-fiche .cy-icon-btn.ic-edit:hover  { color: var(--navy, #1A2942); border-color: var(--navy, #1A2942); background: #F1EFE8; }
.cy-fiche .cy-icon-btn.ic-trash:hover { color: #A32D2D; border-color: #A32D2D; background: #FCEBEB; }

/* =====================================================================
   Classes legacy conservées (cy-planning-date) — utilisées ailleurs.
   ===================================================================== */
.cy-planning-date {
    background: #B5D4F4;
    color: #042C53;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}
.cy-planning-site {
    flex: 1;
    font-weight: 500;
    font-size: 14px;
    color: var(--navy, #0F172A);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cy-planning-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.cy-planning-btn {
    background: var(--color-background-secondary, #F1EFE8);
    border: 0.5px solid rgba(15, 23, 42, 0.08);
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 13px;
    color: var(--color-text-secondary, #5F5E5A);
    cursor: pointer;
    line-height: 1;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.cy-planning-btn:hover {
    background: var(--color-background-primary, #FFFFFF);
    color: var(--navy, #0F172A);
    border-color: var(--gold-dark, #8A6F3A);
}
.cy-planning-btn-danger:hover {
    color: #A32D2D;
    border-color: #A32D2D;
}

.cy-planning-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 12px;
    color: var(--color-text-secondary, #5F5E5A);
    margin-bottom: 8px;
}
.cy-planning-meta strong {
    color: var(--color-text-primary, #2C2C2A);
    font-weight: 500;
}
.cy-planning-meta span:not(:last-child)::after {
    content: '';
}

.cy-planning-team {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
    min-height: 22px;
}
.cy-planning-chip {
    background: #EEEDFE;
    color: #3C3489;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}
/* === Variantes par statut intervenant (planning_admin) ===
   - sal (salarie)     : lavande/violet  (idem fallback .cy-planning-chip)
   - int (interimaire) : ambre clair / ambre fonce  (nouveau)
   - presta            : saumon / rouille  (existant)
   Le binding aspx applique "cy-planning-chip cy-planning-chip-{0}" via Eval("TypeN")
   ou ajoute la classe -presta cote serveur pour les chips prestataires. */
.cy-planning-chip-sal {
    background: #EEEDFE;
    color: #3C3489;
}
.cy-planning-chip-int {
    background: #FAC775;
    color: #5C3A06;
}
.cy-planning-chip-presta {
    background: #FAECE7;
    color: #993C1D;
}

/* Chip rendu en <a> cliquable (popover contact au clic).
   On override les pseudo-classes link pour neutraliser le bleu/underline navigateur. */
a.cy-planning-chip,
a.cy-planning-chip:link,
a.cy-planning-chip:visited,
a.cy-planning-chip:hover,
a.cy-planning-chip:focus,
a.cy-planning-chip:active {
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    transition: transform 100ms ease, box-shadow 100ms ease;
}
a.cy-planning-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.10);
    filter: brightness(1.02);
}
a.cy-planning-chip.cy-planning-chip-sal,
a.cy-planning-chip.cy-planning-chip-sal:link,
a.cy-planning-chip.cy-planning-chip-sal:visited,
a.cy-planning-chip.cy-planning-chip-sal:hover { color: #3C3489; }
a.cy-planning-chip.cy-planning-chip-int,
a.cy-planning-chip.cy-planning-chip-int:link,
a.cy-planning-chip.cy-planning-chip-int:visited,
a.cy-planning-chip.cy-planning-chip-int:hover { color: #5C3A06; }
a.cy-planning-chip.cy-planning-chip-presta,
a.cy-planning-chip.cy-planning-chip-presta:link,
a.cy-planning-chip.cy-planning-chip-presta:visited,
a.cy-planning-chip.cy-planning-chip-presta:hover { color: #993C1D; }

/* Popover contact ouvert au clic d'un chip intervenant.
   Position absolute calculée en JS (sous le chip), z-index élevé pour
   passer au-dessus du contenu environnant. */
.cy-chip-popover {
    position: absolute;
    background: white;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 10px;
    padding: 5px;
    box-shadow: 0 10px 24px -6px rgba(15, 23, 42, 0.20), 0 2px 6px rgba(15, 23, 42, 0.08);
    display: inline-flex;
    gap: 2px;
    z-index: 1000;
    animation: cyChipPopFadeIn 120ms ease-out;
}
@keyframes cyChipPopFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.cy-chip-popover-action,
.cy-chip-popover-action:link,
.cy-chip-popover-action:visited,
.cy-chip-popover-action:hover,
.cy-chip-popover-action:focus,
.cy-chip-popover-action:active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: var(--bg, #FAFAF7);
    color: var(--navy, #0F172A);
    text-decoration: none;
    transition: background 100ms ease, transform 100ms ease;
    font-size: 18px;
}
.cy-chip-popover-action:hover {
    background: var(--gold-soft, #F5EBD3);
    transform: scale(1.05);
}
.cy-chip-popover-action i {
    font-size: 18px;
}
.cy-chip-popover-empty {
    padding: 8px 12px;
    color: var(--slate, #5F5E5A);
    font-style: italic;
    font-size: 12px;
}

.cy-planning-consigne {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    padding: 8px 12px;
    background: var(--color-background-secondary, #F8F6EF);
    border-left: 3px solid var(--gold-dark, #B08F4D);
    border-radius: 8px;
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary, #5F5E5A);
    line-height: 1.5;
}
.cy-planning-consigne i {
    color: var(--gold-dark, #B08F4D);
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ====================================================================
   AFFECTATION (planning_admin) — 3 colonnes Personnel / Intérim / Presta
   Auto-affichage (plus de bouton "Voir disponible"), look moderne.
   ==================================================================== */

.cy-affect-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 8px;
}
@media (min-width: 720px) {
    .cy-affect-grid { grid-template-columns: repeat(3, 1fr); }
}

.cy-affect-col {
    background: var(--color-background-secondary, #F1EFE8);
    border-radius: var(--border-radius-md, 8px);
    padding: 12px 14px;
    border: 0.5px solid rgba(15, 23, 42, 0.06);
}
.cy-affect-col-title {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-secondary, #5F5E5A);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.cy-affect-col-title i {
    font-size: 14px;
    color: var(--gold-dark, #8A6F3A);
}

/* CheckBoxList rendue en RepeatLayout=Flow → suite de <input> + <label> inline */
.cy-chk-list {
    display: block;
    line-height: 1.7;
}
.cy-chk-list input[type="checkbox"] {
    margin: 0 6px 0 0;
    vertical-align: -2px;
    accent-color: var(--gold-dark, #8A6F3A);
    cursor: pointer;
}
.cy-chk-list label {
    display: inline-block;
    padding: 4px 0;
    font-size: 13px;
    color: var(--navy, #0F172A);
    cursor: pointer;
    margin-right: 12px;
}
.cy-chk-list label:hover {
    color: var(--gold-dark, #8A6F3A);
}
.cy-chk-list br { display: none; }
.cy-chk-list input[type="checkbox"]:not(:first-of-type) {
    margin-top: 2px;
}

/* Force chaque paire input+label sur sa propre ligne (lecture verticale) */
.cy-chk-list input[type="checkbox"] {
    margin-bottom: 4px;
}
.cy-chk-list label::after {
    content: '';
    display: block;
    margin-bottom: 2px;
}

/* =====================================================================
   Card Affectation — CheckBoxList modernisées en "pills multi"
   - cy-aff-pills          : conteneur flex-wrap (span rendu par CheckBoxList)
   - cy-aff-pills-sal/-int/-pre : variante de couleur par statut
   - cy-aff-pill-av        : avatar circulaire (initiales) injecté par JS
   - cy-aff-col-counter    : "X / Y sélectionnés" dans le header de colonne
   Scaling : conçu pour ~15 pills par section sans débordement.
   ===================================================================== */
.cy-aff-col-counter {
    margin-left: auto;
    font-size: 10px;
    font-weight: 400;
    color: var(--color-text-secondary, #888780);
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
}

.cy-aff-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    line-height: 1;
}
/* checkbox natif masqué (accessible via label[for]) */
.cy-aff-pills input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    margin: 0;
}
.cy-aff-pills label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 4px;
    border-radius: 999px;
    border: 0.5px solid transparent;
    background: #fff;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.05s, background 0.1s, border-color 0.1s;
    user-select: none;
    margin: 0;
}
.cy-aff-pills label:hover {
    transform: translateY(-0.5px);
}
.cy-aff-pills label:active {
    transform: scale(0.96);
}
.cy-aff-pills input[type="checkbox"]:focus-visible + label {
    outline: 2px solid var(--gold-dark, #8A6F3A);
    outline-offset: 1px;
}
.cy-aff-pill-av {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    transition: background 0.1s, color 0.1s;
}

/* === Variante Salarié — lavande / violet === */
.cy-aff-pills-sal label { background: #EEEDFE; color: #3C3489; border-color: #CECBF6; }
.cy-aff-pills-sal .cy-aff-pill-av { background: #CECBF6; color: #3C3489; }
.cy-aff-pills-sal input[type="checkbox"]:checked + label {
    background: #CECBF6; color: #26215C; border-color: #3C3489;
}
.cy-aff-pills-sal input[type="checkbox"]:checked + label .cy-aff-pill-av {
    background: #3C3489; color: #fff;
}

/* === Variante Intérim — ambre clair / brun doré === */
.cy-aff-pills-int label { background: #FAEEDA; color: #5C3A06; border-color: #FAC775; }
.cy-aff-pills-int .cy-aff-pill-av { background: #FAC775; color: #5C3A06; }
.cy-aff-pills-int input[type="checkbox"]:checked + label {
    background: #FAC775; color: #412402; border-color: #5C3A06;
}
.cy-aff-pills-int input[type="checkbox"]:checked + label .cy-aff-pill-av {
    background: #5C3A06; color: #fff;
}

/* === Variante Prestataire — saumon / rouille === */
.cy-aff-pills-pre label { background: #FAECE7; color: #993C1D; border-color: #F5C4B3; }
.cy-aff-pills-pre .cy-aff-pill-av { background: #F5C4B3; color: #993C1D; }
.cy-aff-pills-pre input[type="checkbox"]:checked + label {
    background: #F5C4B3; color: #4A1B0C; border-color: #993C1D;
}
.cy-aff-pills-pre input[type="checkbox"]:checked + label .cy-aff-pill-av {
    background: #993C1D; color: #fff;
}

/* RepeatLayout=Flow peut insérer des <br> entre paires — on les neutralise */
.cy-aff-pills br { display: none; }

/* =====================================================================
   Locataires axe Terrain — 3 prochains jours (locataire.aspx)
   ===================================================================== */

.cy-fiche .cy-header-sub {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--slate, #6B6F7E);
    margin-left: 8px;
    letter-spacing: 0;
    text-transform: none;
}

.cy-fiche .cy-loc-intro {
    margin: 0 0 18px;
    padding: 12px 16px;
    background: #FBF7EE;
    border-left: 3px solid #C9A961;
    border-radius: 6px;
    color: var(--navy, #0F1B3C);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cy-fiche .cy-loc-intro i { font-size: 18px; color: #C9A961; flex-shrink: 0; }

/* ----- Filtres sites en pills ----- */
.cy-fiche .cy-loc-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
    padding-bottom: 4px;
}

.cy-fiche .cy-loc-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    background: #FFFFFF;
    border: 1px solid rgba(15, 27, 60, 0.14);
    color: var(--navy, #0F1B3C);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all 140ms ease;
    white-space: nowrap;
}
.cy-fiche .cy-loc-pill > i { font-size: 14px; opacity: 0.7; }
.cy-fiche .cy-loc-pill:hover {
    background: #FBF7EE;
    border-color: #C9A961;
}
/* Etat actif : marche pour <a> ET pour <button> */
.cy-fiche .cy-loc-pill.is-active,
.cy-fiche a.cy-loc-pill.is-active:link,
.cy-fiche a.cy-loc-pill.is-active:visited,
.cy-fiche a.cy-loc-pill.is-active:hover,
.cy-fiche a.cy-loc-pill.is-active:active,
.cy-fiche button.cy-loc-pill.is-active,
.cy-fiche button.cy-loc-pill.is-active:hover,
.cy-fiche button.cy-loc-pill.is-active:focus {
    background: var(--navy, #0F1B3C);
    color: #FFFFFF;
    border-color: var(--navy, #0F1B3C);
    font-weight: 600;
    text-decoration: none;
}
.cy-fiche .cy-loc-pill.is-active > i { opacity: 1; color: #FFFFFF; }
.cy-fiche .cy-loc-pill.is-active .cy-loc-pill-city { color: rgba(255,255,255,0.75); }
.cy-fiche .cy-loc-pill-city {
    color: #6B6F7E;
    font-weight: 400;
    font-size: 12px;
    margin-left: 4px;
}

.cy-fiche .cy-loc-megacard {
    background: #FFFFFF;
    border: 1px solid rgba(15, 27, 60, 0.08);
    border-radius: 12px;
    margin-bottom: 18px;
    overflow: hidden;
}
.cy-fiche .cy-loc-megacard-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: #FBF7EE;
    border-bottom: 2px solid #C9A961;
}
.cy-fiche .cy-loc-megacard-head > i {
    font-size: 22px;
    color: #0F1B3C;
    flex-shrink: 0;
}
.cy-fiche .cy-loc-megacard-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 20px;
    font-weight: 500;
    color: #0F1B3C;
    line-height: 1.2;
    flex: 1;
}
.cy-fiche .cy-loc-megacard-count {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #6B6F7E;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(15, 27, 60, 0.06);
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.cy-fiche .cy-loc-cards { display: block; }

.cy-fiche .cy-loc-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(15, 27, 60, 0.06);
    transition: background 140ms ease;
}
.cy-fiche .cy-loc-card:last-child { border-bottom: none; }
.cy-fiche .cy-loc-card:hover { background: rgba(201, 169, 97, 0.04); }

.cy-fiche .cy-loc-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(15, 27, 60, 0.06);
    color: #0F1B3C;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}
.cy-fiche .cy-loc-card-icon i { font-size: 18px; }

.cy-fiche .cy-loc-card-body { flex: 1; min-width: 0; }

.cy-fiche .cy-loc-card-name {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 17px;
    font-weight: 500;
    color: #0F1B3C;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cy-fiche .cy-loc-lang {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 999px;
    line-height: 1.4;
}
.cy-fiche .cy-loc-lang-1 { background: rgba(13, 71, 161, 0.10); color: #0D47A1; }
.cy-fiche .cy-loc-lang-2 { background: rgba(14, 124, 68, 0.10); color: #0E7C44; }

.cy-fiche .cy-loc-card-site {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    color: #6B6F7E;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.cy-fiche .cy-loc-card-site > i { font-size: 14px; }
.cy-fiche .cy-loc-card-hour {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    color: #0F1B3C;
    background: rgba(15, 27, 60, 0.04);
    padding: 2px 8px;
    border-radius: 4px;
}
.cy-fiche .cy-loc-card-hour > i { font-size: 13px; }

.cy-fiche .cy-loc-card-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
}
.cy-fiche .cy-loc-tel,
.cy-fiche .cy-loc-mail {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 6px;
    text-decoration: none;
    background: #FFFFFF;
    border: 1px solid rgba(15, 27, 60, 0.12);
    transition: all 140ms ease;
}
.cy-fiche .cy-loc-tel { color: #0E7C44; border-color: rgba(14, 124, 68, 0.25); }
.cy-fiche .cy-loc-tel:hover { background: rgba(14, 124, 68, 0.06); }
.cy-fiche .cy-loc-mail { color: #0F1B3C; }
.cy-fiche .cy-loc-mail:hover { background: rgba(15, 27, 60, 0.04); }
.cy-fiche .cy-loc-tel > i,
.cy-fiche .cy-loc-mail > i { font-size: 14px; }

.cy-fiche .cy-loc-empty {
    text-align: center;
    padding: 60px 20px;
    color: #6B6F7E;
    font-family: 'Inter', system-ui, sans-serif;
}
.cy-fiche .cy-loc-empty > i { font-size: 48px; color: rgba(15, 27, 60, 0.18); display: block; margin-bottom: 12px; }
.cy-fiche .cy-loc-empty > p { font-size: 14px; margin: 0; }

@media (max-width: 640px) {
    .cy-fiche .cy-loc-card-site { flex-direction: column; align-items: flex-start; gap: 4px; }
    .cy-fiche .cy-loc-card-hour { margin-left: 0; }
    .cy-fiche .cy-loc-tel,
    .cy-fiche .cy-loc-mail { font-size: 12.5px; }
    .cy-fiche .cy-loc-megacard-title { font-size: 18px; }
    .cy-fiche .cy-loc-card { padding: 12px 14px; }
}

/* =====================================================================
   Satisfaction (satisfaction_client.aspx) — tabs + cards + remarques
   ===================================================================== */

.cy-fiche .cy-sat-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding-bottom: 4px;
}
.cy-fiche .cy-sat-tab-count {
    display: inline-block;
}

.cy-fiche .cy-sat-section { display: block; }

.cy-fiche .cy-sat-subpill-count {
    font-size: 11px;
    background: rgba(15,27,60,0.08);
    padding: 1px 6px;
    border-radius: 999px;
    margin-left: 4px;
}
.cy-fiche .cy-loc-pill.is-active .cy-sat-subpill-count {
    background: rgba(255,255,255,0.18);
}

/* Liste cards satisfaction (clients / intervenants) */
.cy-fiche .cy-sat-list-wrap { margin-bottom: 16px; }
.cy-fiche .cy-sat-list {
    background: #FFFFFF;
    border: 0.5px solid rgba(15,27,60,0.08);
    border-radius: 12px;
    overflow: hidden;
}

.cy-fiche .cy-sat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 0.5px solid rgba(15,27,60,0.06);
    transition: background 140ms ease;
}
.cy-fiche .cy-sat-card:last-child { border-bottom: none; }
.cy-fiche .cy-sat-card:hover { background: rgba(201, 169, 97, 0.04); }

.cy-fiche .cy-sat-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 500;
    font-size: 13px;
    flex-shrink: 0;
}

.cy-fiche .cy-sat-body { flex: 1; min-width: 0; }

.cy-fiche .cy-sat-name {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 16px;
    font-weight: 500;
    color: #0F1B3C;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cy-fiche .cy-sat-badge {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 7px;
    border-radius: 999px;
    line-height: 1.4;
}
.cy-fiche .cy-sat-badge-SAL { background: #E6F1FB; color: #0C447C; }
.cy-fiche .cy-sat-badge-INT { background: #FAEEDA; color: #854F0B; }
.cy-fiche .cy-sat-badge-PRE { background: #EEEDFE; color: #3C3489; }

.cy-fiche .cy-sat-sub {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12.5px;
    color: #6B6F7E;
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.cy-fiche .cy-sat-sub > i { font-size: 12px; }
.cy-fiche .cy-sat-nb { color: #444; }

.cy-fiche .cy-sat-note-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 26px;
    padding: 0 11px;
    border-radius: 999px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}
.cy-fiche .cy-sat-note-pill > i {
    font-size: 12px;
    margin-right: 4px;
}

/* Legende */
.cy-fiche .cy-sat-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    align-items: center;
    margin-top: 16px;
    padding: 10px 14px;
    background: rgba(15,27,60,0.03);
    border-radius: 8px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11.5px;
    color: #6B6F7E;
}
.cy-fiche .cy-sat-legend-label {
    font-weight: 600;
    color: #0F1B3C;
}
.cy-fiche .cy-sat-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.cy-fiche .cy-sat-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}
.cy-fiche .cy-sat-legend-sep { color: #ccc; }

/* === REMARQUES — megacards par mois + cards remarque === */

.cy-fiche .cy-sat-rem-megacard {
    background: #FFFFFF;
    border: 1px solid rgba(15, 27, 60, 0.08);
    border-radius: 12px;
    margin-bottom: 18px;
    overflow: hidden;
}
.cy-fiche .cy-sat-rem-megacard-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: #FBF7EE;
    border-bottom: 2px solid #C9A961;
}
.cy-fiche .cy-sat-rem-megacard-head > i {
    font-size: 20px;
    color: #0F1B3C;
    flex-shrink: 0;
}
.cy-fiche .cy-sat-rem-megacard-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 17px;
    font-weight: 500;
    color: #0F1B3C;
    line-height: 1.2;
    flex: 1;
}
.cy-fiche .cy-sat-rem-megacard-count {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #6B6F7E;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(15,27,60,0.06);
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

.cy-fiche .cy-sat-rem-list { display: block; }

.cy-fiche .cy-sat-rem-card {
    padding: 14px 18px;
    border-bottom: 0.5px solid rgba(15,27,60,0.06);
}
.cy-fiche .cy-sat-rem-card:last-child { border-bottom: none; }

.cy-fiche .cy-sat-rem-head {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.cy-fiche .cy-sat-rem-head > i { font-size: 13px; color: #6B6F7E; }
.cy-fiche .cy-sat-rem-site {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12.5px;
    color: #0F1B3C;
    font-weight: 500;
}
.cy-fiche .cy-sat-rem-meta {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    color: #6B6F7E;
    margin-left: auto;
}

.cy-fiche .cy-sat-rem-text {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    color: #444;
    font-size: 14px;
    line-height: 1.5;
    margin: 8px 0;
    padding-left: 12px;
    border-left: 2px solid #C9A961;
}

.cy-fiche .cy-sat-rem-equipe {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.cy-fiche .cy-sat-rem-chip {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(15,27,60,0.03);
    color: #6B6F7E;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.cy-fiche .cy-sat-rem-chip-chef {
    background: rgba(15,27,60,0.06);
    color: #0F1B3C;
    font-weight: 500;
}
.cy-fiche .cy-sat-rem-chip > i { font-size: 11px; }

/* =====================================================================
   Tab Alertes clients (satisfaction_client.aspx v3)
   ===================================================================== */

.cy-fiche .cy-sat-alert-banner {
    background: #FCEBEB;
    border-left: 3px solid #791F1F;
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #791F1F;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
}
.cy-fiche .cy-sat-alert-banner > i { font-size: 18px; flex-shrink: 0; }

.cy-fiche .cy-sat-alert-filtres {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 16px;
}
.cy-fiche .cy-sat-alert-filtre-label {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12.5px;
    color: #6B6F7E;
    font-weight: 500;
}
.cy-fiche .cy-sat-alert-filtre-label-sep { margin-left: 12px; }
.cy-fiche .cy-sat-alert-pill {
    font-size: 12px !important;
    padding: 5px 11px !important;
}

.cy-fiche .cy-sat-alert-card {
    background: #FFFFFF;
    border: 1px solid rgba(15,27,60,0.10);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 12px;
    box-shadow: 0 1px 0 rgba(15,27,60,0.03);
}
.cy-fiche .cy-sat-alert-card-crit {
    border-color: #F09595;
    box-shadow: 0 1px 0 rgba(153,27,27,0.06);
}
.cy-fiche .cy-sat-alert-card-warn {
    border-color: #FAC775;
    box-shadow: 0 1px 0 rgba(133,79,11,0.04);
}

.cy-fiche .cy-sat-alert-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 10px;
}
.cy-fiche .cy-sat-alert-pastille {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 28px;
    padding: 0 11px;
    border-radius: 999px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}
.cy-fiche .cy-sat-alert-pastille > i {
    font-size: 12px;
    margin-right: 4px;
}
.cy-fiche .cy-sat-alert-meta { flex: 1; min-width: 0; }
.cy-fiche .cy-sat-alert-client {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 16px;
    font-weight: 500;
    color: #0F1B3C;
    line-height: 1.2;
}
.cy-fiche .cy-sat-alert-sub {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12.5px;
    color: #6B6F7E;
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
.cy-fiche .cy-sat-alert-sub > i { font-size: 12px; margin-right: 2px; }

.cy-fiche .cy-sat-alert-verbatim {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    color: #444;
    font-size: 13.5px;
    line-height: 1.5;
    margin: 10px 0;
    padding-left: 12px;
    border-left: 2px solid #C9A961;
}

.cy-fiche .cy-sat-alert-equipe {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 10px 0;
}
.cy-fiche .cy-sat-alert-equipe-label {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11.5px;
    color: #6B6F7E;
    font-weight: 500;
}
.cy-fiche .cy-sat-alert-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px 2px 2px;
    border-radius: 999px;
    background: rgba(15,27,60,0.04);
    border: 0.5px solid rgba(15,27,60,0.10);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #0F1B3C;
}

.cy-fiche .cy-sat-alert-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

/* === Pills compteurs dans le header === */
.cy-fiche .cy-sat-header-pills {
    margin-left: auto;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.cy-fiche .cy-sat-header-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}
.cy-fiche .cy-sat-header-pill > i { font-size: 13px; }
.cy-fiche .cy-sat-header-pill-crises {
    background: rgba(153,27,27,0.10);
    color: #791F1F;
}
.cy-fiche .cy-sat-header-pill-equipe {
    background: rgba(133,79,11,0.10);
    color: #854F0B;
}

/* === Tab Equipe : bandeau + badge tendance + sparkline === */
.cy-fiche .cy-sat-equipe-banner {
    background: #FAEEDA;
    border-left: 3px solid #854F0B;
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #854F0B;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
}
.cy-fiche .cy-sat-equipe-banner > i { font-size: 18px; flex-shrink: 0; }

.cy-fiche .cy-sat-tendance-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 999px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-left: 4px;
}
.cy-fiche .cy-sat-tendance-badge > i { font-size: 11px; }

.cy-fiche .cy-sat-sparkline {
    display: inline-block;
    margin-top: 4px;
    vertical-align: middle;
}

/* Card intervenant en alerte : fond legerement rouge */
.cy-fiche .cy-sat-card.cy-sat-card-tend-baisse {
    background: rgba(252,235,235,0.35);
}

/* Variante bouton client en crise : fond rouge plein */
.cy-fiche .cy-sat-call-btn.cy-sat-call-crit {
    background: #791F1F !important;
    color: #FFFFFF !important;
    border-color: #791F1F !important;
    font-weight: 600;
}
.cy-fiche .cy-sat-call-btn.cy-sat-call-crit:hover {
    background: #5C1818 !important;
    border-color: #5C1818 !important;
}

/* === Chip metier : mini-avatar rond coloré + libellé === */
.cy-fiche .cy-sat-metier-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px 2px 2px;
    border-radius: 999px;
    background: rgba(15,27,60,0.03);
    border: 0.5px solid rgba(15,27,60,0.08);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11.5px;
    font-weight: 500;
    color: #444;
    white-space: nowrap;
}
.cy-fiche .cy-sat-metier-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cy-fiche .cy-sat-metier-avatar > i {
    font-size: 13px;
    color: #FFFFFF;
}
.cy-fiche .cy-sat-metier-label {
    font-family: 'Inter', system-ui, sans-serif;
}

/* Sur la card Intervenants, l'avatar principal est plus grand (38px) avec icone blanche */
.cy-fiche .cy-sat-card .cy-sat-avatar > i {
    color: #FFFFFF;
}

/* === Boutons d'appel sur cards (satisfaction + remarques) === */
.cy-fiche .cy-sat-call-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
    align-items: center;
}
.cy-fiche .cy-sat-call-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    text-decoration: none;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    background: #FFFFFF;
    border: 0.5px solid rgba(15,27,60,0.18);
    transition: all 140ms ease;
}
.cy-fiche .cy-sat-call-btn > i { font-size: 13px; }
.cy-fiche .cy-sat-call-client {
    color: #854F0B;
    border-color: rgba(133,79,11,0.30);
}
.cy-fiche .cy-sat-call-client:hover {
    background: rgba(250,238,218,0.5);
    border-color: #854F0B;
}
.cy-fiche .cy-sat-call-int {
    color: #0E7C44;
    border-color: rgba(14,124,68,0.30);
}
.cy-fiche .cy-sat-call-int:hover {
    background: rgba(225,245,238,0.5);
    border-color: #0E7C44;
}
.cy-fiche .cy-sat-call-btn.is-disabled {
    color: #B4B2A9;
    border-color: rgba(15,27,60,0.10);
    background: rgba(15,27,60,0.02);
    cursor: not-allowed;
}
.cy-fiche .cy-sat-call-btn.is-disabled > i {
    opacity: 0.6;
}

@media (max-width: 640px) {
    .cy-fiche .cy-sat-card { padding: 12px 14px; gap: 10px; }
    .cy-fiche .cy-sat-name { font-size: 15px; }
    .cy-fiche .cy-sat-rem-head { flex-direction: column; align-items: flex-start; gap: 4px; }
    .cy-fiche .cy-sat-rem-meta { margin-left: 0; }
    .cy-fiche .cy-sat-legend { font-size: 10.5px; }
}

/* =====================================================================
   besoin.aspx — Besoins en intervenants (vue liste + calendrier)
   ===================================================================== */

.cy-fiche .cy-bes-filtres {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 16px;
}
.cy-fiche .cy-bes-filtre-label {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12.5px;
    color: #6B6F7E;
    font-weight: 500;
}
.cy-fiche .cy-bes-pill {
    font-size: 12px !important;
    padding: 5px 11px !important;
}

.cy-fiche .cy-bes-megacard {
    background: #FFFFFF;
    border: 1px solid rgba(15, 27, 60, 0.08);
    border-radius: 12px;
    margin-bottom: 18px;
    overflow: hidden;
}
.cy-fiche .cy-bes-megacard-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: #FBF7EE;
    border-bottom: 2px solid #C9A961;
}
.cy-fiche .cy-bes-megacard-head > i {
    font-size: 20px;
    color: #0F1B3C;
    flex-shrink: 0;
}
.cy-fiche .cy-bes-megacard-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 17px;
    font-weight: 500;
    color: #0F1B3C;
    line-height: 1.2;
    flex: 1;
}
.cy-fiche .cy-bes-megacard-count {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #6B6F7E;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(15, 27, 60, 0.06);
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

.cy-fiche .cy-bes-cards { display: block; }

.cy-fiche .cy-bes-card {
    padding: 14px 18px;
    border-bottom: 0.5px solid rgba(15,27,60,0.06);
    border-left: 3px solid transparent;
}
.cy-fiche .cy-bes-card:last-child { border-bottom: none; }
.cy-fiche .cy-bes-card-crit { border-left-color: #791F1F; background: rgba(252,235,235,0.30); }
.cy-fiche .cy-bes-card-warn { border-left-color: #FAC775; }

.cy-fiche .cy-bes-card-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 10px;
}
.cy-fiche .cy-bes-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cy-fiche .cy-bes-meta { flex: 1; min-width: 0; }
.cy-fiche .cy-bes-site {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 16px;
    font-weight: 500;
    color: #0F1B3C;
}
.cy-fiche .cy-bes-sub {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12.5px;
    color: #6B6F7E;
    margin-top: 2px;
}
.cy-fiche .cy-bes-sub > i { font-size: 12px; margin-right: 2px; }

.cy-fiche .cy-bes-slots-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
}
.cy-fiche .cy-bes-slots-dots {
    display: inline-flex;
    gap: 3px;
}
.cy-fiche .cy-bes-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.cy-fiche .cy-bes-dot-empty {
    background: rgba(15,27,60,0.06);
    border-width: 1px;
    border-style: solid;
}

.cy-fiche .cy-bes-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.cy-fiche .cy-bes-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 11px;
    border-radius: 999px;
    text-decoration: none;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    background: #FFFFFF;
    border: 0.5px solid rgba(15,27,60,0.14);
    transition: all 140ms ease;
    white-space: nowrap;
}
.cy-fiche .cy-bes-btn > i { font-size: 13px; }
.cy-fiche .cy-bes-btn-sal { color: #185FA5; border-color: rgba(24,95,165,0.30); }
.cy-fiche .cy-bes-btn-sal:hover { background: rgba(230,241,251,0.50); }
.cy-fiche .cy-bes-btn-pre { color: #3C3489; border-color: rgba(60,52,137,0.30); }
.cy-fiche .cy-bes-btn-pre:hover { background: rgba(238,237,254,0.50); }
.cy-fiche .cy-bes-btn-int { color: #854F0B; border-color: rgba(133,79,11,0.30); }
.cy-fiche .cy-bes-btn-int:hover { background: rgba(250,238,218,0.50); }
.cy-fiche .cy-bes-btn-rec { color: #0E7C44; border-color: rgba(14,124,68,0.30); }
.cy-fiche .cy-bes-btn-rec:hover { background: rgba(225,245,238,0.50); }

/* === Calendrier (heatmap) === */
.cy-fiche .cy-bes-cal-wrap {
    background: white;
    border: 1px solid rgba(15,27,60,0.08);
    border-radius: 12px;
    padding: 16px;
}
.cy-fiche .cy-bes-cal-mois { margin-bottom: 20px; }
.cy-fiche .cy-bes-cal-mois:last-child { margin-bottom: 0; }
.cy-fiche .cy-bes-cal-mois-titre {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 18px;
    font-weight: 500;
    color: #0F1B3C;
    margin-bottom: 10px;
}
.cy-fiche .cy-bes-cal-headers {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 6px;
}
.cy-fiche .cy-bes-cal-headers > div {
    text-align: center;
    font-size: 11px;
    color: #6B6F7E;
    font-weight: 500;
    font-family: 'Inter', system-ui, sans-serif;
}
.cy-fiche .cy-bes-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.cy-fiche .cy-bes-cal-cell {
    aspect-ratio: 1;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
}
.cy-fiche .cy-bes-cal-empty { background: transparent; }
.cy-fiche .cy-bes-cal-today {
    box-shadow: 0 0 0 2px #C9A961;
}
.cy-fiche .cy-bes-cal-jour { line-height: 1; }
.cy-fiche .cy-bes-cal-nb {
    font-size: 9px;
    opacity: 0.7;
    margin-top: 1px;
    line-height: 1;
}
.cy-fiche .cy-bes-cal-legende {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 14px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11.5px;
    color: #6B6F7E;
}

@media (max-width: 640px) {
    .cy-fiche .cy-bes-card { padding: 12px 14px; }
    .cy-fiche .cy-bes-site { font-size: 15px; }
}

/* =========================================================================
   DEMANDE_RECRUTEMENT v2 — workflow + cards FileUpload + range slider
   ========================================================================= */

/* --- Liste "Mes demandes" --- */
.cy-rec-list { display: flex; flex-direction: column; gap: 10px; }
.cy-rec-card {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 14px;
    border: 1px solid #E8E9EE;
    border-radius: 10px;
    background: #FFFFFF;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.cy-rec-card:hover { border-color: #C8CBD3; box-shadow: 0 1px 3px rgba(15,18,28,.06); }
.cy-rec-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 18px;
}
.cy-rec-body { flex: 1; min-width: 0; }
.cy-rec-name {
    font-family: "Inter", sans-serif; font-weight: 600;
    font-size: 15px; color: #0F121C;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.cy-rec-sub {
    font-size: 13px; color: #6B6F7E;
    margin-top: 3px;
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.cy-rec-sub i { font-size: 14px; margin-right: 2px; }
.cy-rec-meta-date { color: #8A8E9D; }

/* --- Badge statut (6 variantes) --- */
.cy-rec-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11.5px; font-weight: 600; font-family: "Inter", sans-serif;
    line-height: 1.2;
}
.cy-rec-badge i { font-size: 13px; }
.cy-rec-badge-brouillon { background: #F2F3F6; color: #6B6F7E; }
.cy-rec-badge-soumise { background: #E6F1FB; color: #0C447C; }
.cy-rec-badge-entretien { background: #FAEEDA; color: #854F0B; }
.cy-rec-badge-validee { background: #EAF3DE; color: #27500A; }
.cy-rec-badge-rejetee { background: #FCEBEB; color: #791F1F; }
.cy-rec-badge-embauchee {
    background: #0E7C44; color: #FFFFFF;
}

/* --- Compteur badge a cote du titre --- */
.cy-rec-count {
    display: inline-block;
    background: #1E3A5F; color: #FFF;
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 12px; font-weight: 600;
    margin-left: 6px;
    vertical-align: 2px;
}

/* --- Bandeau contexte (demande depuis besoin) --- */
.cy-rec-contexte {
    display: flex; align-items: center; gap: 14px;
    border-left: 4px solid #1E3A5F;
    background: linear-gradient(90deg, #F4F7FB 0%, #FFFFFF 100%);
}
.cy-rec-contexte-icon {
    width: 38px; height: 38px; border-radius: 10px;
    background: #1E3A5F; color: #FFF;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
}
.cy-rec-contexte-body { flex: 1; }
.cy-rec-contexte-title {
    font-family: "Inter", sans-serif; font-weight: 600; font-size: 14px;
    color: #0F121C;
}
.cy-rec-contexte-sub { font-size: 13px; color: #6B6F7E; margin-top: 2px; }

/* --- Liste documents avec cards modernes --- */
.cy-rec-fileslist {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 10px;
}
.cy-rec-fileitem {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    border: 1px solid #E8E9EE;
    border-radius: 10px;
    background: #FFFFFF;
}
.cy-rec-fileitem-icon {
    width: 36px; height: 36px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
}
.cy-rec-fileitem-meta { flex: 1; min-width: 0; }
.cy-rec-fileitem-title {
    font-family: "Inter", sans-serif; font-weight: 600;
    font-size: 14px; color: #0F121C;
}
.cy-rec-fileitem-sub {
    font-size: 12.5px; color: #6B6F7E;
    margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cy-rec-fileitem-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 7px 12px;
    border: 1px solid #1E3A5F;
    background: #FFFFFF; color: #1E3A5F;
    border-radius: 8px;
    font-family: "Inter", sans-serif; font-weight: 500; font-size: 13px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
    flex-shrink: 0;
}
.cy-rec-fileitem-btn:hover { background: #1E3A5F; color: #FFFFFF; }
.cy-rec-fileitem-btn i { font-size: 15px; }
/* Le <input type=file> reste accessible mais visuellement cache */
.cy-rec-fileinput {
    position: absolute !important;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* --- Textarea commentaire --- */
.cy-rec-textarea {
    width: 100%;
    min-height: 80px;
    padding: 10px 12px;
    border: 1px solid #E8E9EE;
    border-radius: 8px;
    font-family: "Inter", sans-serif; font-size: 14px;
    color: #0F121C;
    resize: vertical;
    transition: border-color .15s ease;
}
.cy-rec-textarea:focus { border-color: #1E3A5F; outline: none; }

/* --- Range slider double poignee --- */
.cy-rec-slider-wrap {
    padding: 0 12px;
}
.cy-rec-slider-readout {
    display: flex; align-items: center; justify-content: center;
    gap: 12px;
    font-family: "Fraunces", serif;
    font-size: 28px; font-weight: 500;
    color: #1E3A5F;
    margin-bottom: 14px;
}
.cy-rec-slider {
    position: relative;
    height: 28px;
    margin: 0 8px;
}
.cy-rec-slider-track {
    position: absolute; top: 50%; left: 0; right: 0;
    height: 4px; background: #E8E9EE; border-radius: 4px;
    transform: translateY(-50%);
}
.cy-rec-slider-range {
    position: absolute; top: 50%;
    height: 4px; background: #1E3A5F; border-radius: 4px;
    transform: translateY(-50%);
}
.cy-rec-slider-input {
    position: absolute; top: 0; left: 0; right: 0;
    width: 100%; height: 28px;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}
.cy-rec-slider-input::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 2.5px solid #1E3A5F;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 1px 4px rgba(15,18,28,.18);
    transition: transform .12s ease;
}
.cy-rec-slider-input::-webkit-slider-thumb:hover { transform: scale(1.1); }
.cy-rec-slider-input::-moz-range-thumb {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 2.5px solid #1E3A5F;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 1px 4px rgba(15,18,28,.18);
}
.cy-rec-slider-input::-webkit-slider-runnable-track { background: transparent; }
.cy-rec-slider-ticks {
    display: flex; justify-content: space-between;
    margin: 10px 8px 0;
    font-size: 11px; color: #8A8E9D;
    font-family: "Inter", sans-serif;
}

/* --- Empty state --- */
.cy-empty {
    text-align: center;
    padding: 28px 16px;
    color: #6B6F7E;
}

/* --- Helper text dans labels --- */
.cy-helper-text { font-weight: 400; color: #8A8E9D; font-size: 12px; }

/* --- Action row --- */
.cy-action-row {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.cy-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 18px;
    border-radius: 8px;
    font-family: "Inter", sans-serif; font-weight: 500; font-size: 14px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .15s ease, color .15s ease;
}
.cy-btn-primary {
    background: #1E3A5F; color: #FFFFFF; border-color: #1E3A5F;
}
.cy-btn-primary:hover { background: #16294A; }
.cy-btn-secondary {
    background: #FFFFFF; color: #1E3A5F; border-color: #1E3A5F;
}
.cy-btn-secondary:hover { background: #F2F3F6; }

/* --- Form grid --- */
.cy-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
}
.cy-form-grid .cy-field-full { grid-column: 1 / -1; }
.cy-form-grid .cy-field label {
    display: block;
    font-family: "Inter", sans-serif; font-weight: 500; font-size: 13px;
    color: #0F121C;
    margin-bottom: 4px;
}
.cy-form-grid .cy-field input,
.cy-form-grid .cy-field select,
.cy-form-grid .cy-field textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #E8E9EE;
    border-radius: 8px;
    font-family: "Inter", sans-serif; font-size: 14px;
    color: #0F121C;
    background: #FFFFFF;
    transition: border-color .15s ease;
    box-sizing: border-box;
}
.cy-form-grid .cy-field input:focus,
.cy-form-grid .cy-field select:focus,
.cy-form-grid .cy-field textarea:focus { border-color: #1E3A5F; outline: none; }

@media (max-width: 720px) {
    .cy-form-grid { grid-template-columns: 1fr; }
    .cy-rec-fileitem-btn span { display: none; }
}

/* =========================================================================
   INTERIMAIRE v2 — cards, dashboard agences, alerte fin proche
   ========================================================================= */

/* --- Bandeau alerte fin proche --- */
.cy-int-alerte {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #FCEBEB;
    border-left: 4px solid #791F1F;
    margin-bottom: 18px;
}
.cy-int-alerte-icon {
    width: 38px; height: 38px; border-radius: 50%;
    background: #791F1F; color: #FFF;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
}
.cy-int-alerte-title {
    font-family: "Inter", sans-serif; font-weight: 600;
    font-size: 15px; color: #791F1F;
}
.cy-int-alerte-sub {
    font-size: 13px; color: #6B252B;
    margin-top: 3px;
}

/* --- Dashboard agences (grid mini-cards) --- */
.cy-int-agences-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}
.cy-int-agence-card {
    padding: 14px 16px;
    border: 1px solid #E8E9EE;
    border-radius: 10px;
    background: #FFFFFF;
}
.cy-int-agence-name {
    font-family: "Inter", sans-serif; font-weight: 600; font-size: 14px;
    color: #0F121C;
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 10px;
}
.cy-int-agence-name i { font-size: 16px; }
.cy-int-agence-stats {
    display: flex; gap: 16px; flex-wrap: wrap;
}
.cy-int-agence-stat { line-height: 1.2; }
.cy-int-agence-stat-value {
    font-family: "Fraunces", serif; font-size: 22px; font-weight: 500;
    color: #1E3A5F;
    display: flex; align-items: center; gap: 3px;
}
.cy-int-agence-stat-future { color: #854F0B; }
.cy-int-agence-stat-label {
    font-size: 11.5px; color: #6B6F7E;
    margin-top: 1px;
}
.cy-int-agence-foot {
    font-size: 12px; color: #8A8E9D;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed #E8E9EE;
}

/* --- Form toggle saisie nouveau contrat --- */
.cy-int-form-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
}
.cy-int-form-toggle {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid #E8E9EE;
    background: #FFFFFF;
    color: #6B6F7E;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    transition: background .15s ease, color .15s ease;
}
.cy-int-form-toggle:hover { background: #F2F3F6; color: #1E3A5F; }
.cy-int-form-body { animation: fadeIn .15s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.cy-int-msg {
    font-size: 13px;
    font-family: "Inter", sans-serif;
}
.cy-int-msg-ok { color: #0E7C44; font-weight: 500; }
.cy-int-msg-err { color: #791F1F; font-weight: 500; }

/* --- Liste cards interim --- */
.cy-int-list { display: flex; flex-direction: column; gap: 10px; }
.cy-int-list-compact { gap: 6px; }

.cy-int-card {
    display: flex; align-items: center; gap: 14px;
    padding: 14px;
    border: 1px solid #E8E9EE;
    border-left: 4px solid #E8E9EE;
    border-radius: 10px;
    background: #FFFFFF;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.cy-int-card:hover { box-shadow: 0 1px 4px rgba(15,18,28,.06); }
.cy-int-card-urgent { border-left-color: #791F1F; }
.cy-int-card-soon { border-left-color: #854F0B; }
.cy-int-card-compact { padding: 10px 14px; }

.cy-int-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 19px;
}
.cy-int-body { flex: 1; min-width: 0; }
.cy-int-name {
    font-family: "Inter", sans-serif; font-weight: 600;
    font-size: 15px; color: #0F121C;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.cy-int-sub {
    font-size: 13px; color: #6B6F7E;
    margin-top: 3px;
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.cy-int-sub i { font-size: 14px; margin-right: 2px; }

/* --- Chips intérim --- */
.cy-int-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11.5px; font-weight: 500;
    font-family: "Inter", sans-serif;
    line-height: 1.4;
}
.cy-int-chip i { font-size: 12px; }
.cy-int-chip-agence { background: #F2F3F6; color: #4A4F62; }
.cy-int-chip-note {
    font-weight: 600;
}
.cy-int-chip-note-good { background: #EAF3DE; color: #27500A; }
.cy-int-chip-note-med { background: #FAEEDA; color: #854F0B; }
.cy-int-chip-note-bad { background: #FCEBEB; color: #791F1F; }

.cy-int-actions {
    margin-top: 8px;
    display: flex; gap: 12px; flex-wrap: wrap;
}
.cy-int-action {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12.5px; color: #1E3A5F;
    text-decoration: none;
    font-family: "Inter", sans-serif; font-weight: 500;
}
.cy-int-action:hover { text-decoration: underline; }
.cy-int-action i { font-size: 14px; }

/* --- Jours restants (côté droit card) --- */
.cy-int-right {
    flex-shrink: 0;
    text-align: right;
}
.cy-int-jours {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 11px;
    border-radius: 999px;
    font-family: "Inter", sans-serif; font-weight: 600; font-size: 12.5px;
    line-height: 1.2;
}
.cy-int-jours i { font-size: 14px; }
.cy-int-jours-ok { background: #EAF3DE; color: #27500A; }
.cy-int-jours-soon { background: #FAEEDA; color: #854F0B; }
.cy-int-jours-urgent { background: #FCEBEB; color: #791F1F; }
.cy-int-jours-future {
    background: #E6F1FB; color: #0C447C;
    padding: 5px 11px;
    border-radius: 999px;
    font-family: "Inter", sans-serif; font-weight: 600; font-size: 12.5px;
}

/* Pill bandeau bad (header) - reutilise existing cy-sat-pill --- */
.cy-sat-pill-bad { background: #FCEBEB; color: #791F1F; }

@media (max-width: 720px) {
    .cy-int-card { flex-wrap: wrap; }
    .cy-int-right { width: 100%; text-align: left; margin-top: 6px; }
    .cy-int-actions { width: 100%; }
}

/* --- Pill CTA (action primaire dans onglets) --- */
.cy-loc-pill-cta {
    background: #1E3A5F !important;
    color: #FFFFFF !important;
    border-color: #1E3A5F !important;
}
.cy-loc-pill-cta:hover { background: #16294A !important; }
.cy-loc-pill-cta.is-active { background: #16294A !important; }

/* --- Panels onglets interim --- */
.cy-int-panel { animation: fadeIn .15s ease; }

/* =========================================================================
   INTERIMAIRE : Bouton Renouveler + modal
   ========================================================================= */
.cy-int-btn-renew {
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 8px;
    padding: 6px 11px;
    border: 1px solid #1E3A5F;
    background: #FFFFFF; color: #1E3A5F;
    border-radius: 8px;
    font-family: "Inter", sans-serif; font-weight: 500; font-size: 12.5px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.cy-int-btn-renew:hover { background: #1E3A5F; color: #FFFFFF; }
.cy-int-btn-renew i { font-size: 14px; }

/* Modal overlay */
.cy-int-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(15, 18, 28, 0.55);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000;
    animation: fadeIn .15s ease;
}
.cy-int-modal-card {
    background: #FFFFFF;
    border-radius: 14px;
    width: min(520px, 92vw);
    max-height: 90vh;
    overflow: auto;
    box-shadow: 0 16px 48px rgba(15,18,28,.28);
    animation: modalIn .18s ease;
}
@keyframes modalIn {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.cy-int-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid #E8E9EE;
}
.cy-int-modal-title {
    font-family: "Fraunces", serif; font-weight: 500; font-size: 19px;
    color: #0F121C; margin: 0;
}
.cy-int-modal-close {
    background: none; border: none;
    font-size: 26px; line-height: 1;
    color: #6B6F7E; cursor: pointer;
    padding: 0 4px;
}
.cy-int-modal-close:hover { color: #0F121C; }
.cy-int-modal-body { padding: 16px 20px; }
.cy-int-modal-recap {
    background: #F4F7FB;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 16px;
    font-size: 13.5px; color: #0F121C;
    line-height: 1.7;
}
.cy-int-modal-foot {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 20px 16px;
    border-top: 1px solid #E8E9EE;
}

/* =========================================================================
   REGISTRE PRESTATAIRES — filtres + chip société + dashboard métiers
   ========================================================================= */
.cy-pre-filters {
    display: flex; gap: 10px; flex-wrap: wrap;
    align-items: center;
}
.cy-pre-search-wrap {
    position: relative;
    flex: 1; min-width: 220px;
}
.cy-pre-search-wrap i {
    position: absolute; top: 50%; left: 12px;
    transform: translateY(-50%);
    color: #8A8E9D; font-size: 16px;
    pointer-events: none;
    z-index: 1;
}
.cy-pre-search {
    width: 100%;
    padding: 9px 12px 9px 38px !important;
    border: 1px solid #E8E9EE;
    border-radius: 8px;
    font-family: "Inter", sans-serif; font-size: 14px;
    color: #0F121C; background: #FFFFFF;
    transition: border-color .15s ease;
    box-sizing: border-box;
}
.cy-pre-search:focus { border-color: #1E3A5F; outline: none; }
.cy-pre-filtre-select {
    padding: 9px 12px;
    border: 1px solid #E8E9EE;
    border-radius: 8px;
    font-family: "Inter", sans-serif; font-size: 14px;
    color: #0F121C; background: #FFFFFF;
    min-width: 180px;
}

/* Chip société (variante de cy-int-chip) */
.cy-pre-chip-societe { background: #EEEDFE; color: #3C3489; }

/* Card métier cliquable (dashboard) */
.cy-pre-metier-card { cursor: pointer; }
.cy-pre-metier-card:hover { box-shadow: 0 2px 6px rgba(15,18,28,.08); }

/* =========================================================================
   PAIE GOUVERNANT — cards équipe + bandeau salarié actif
   ========================================================================= */
.cy-paie-equipe-card {
    cursor: pointer;
    transition: box-shadow .15s ease, transform .12s ease;
}
.cy-paie-equipe-card:hover {
    box-shadow: 0 2px 8px rgba(15,18,28,.1);
    transform: translateY(-1px);
}
.cy-paie-actif-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
}
.cy-paie-actif-info {
    display: flex; align-items: center; gap: 12px;
}
.cy-paie-actif-info .cy-int-avatar { width: 40px; height: 40px; font-size: 20px; }
.cy-paie-actif-nom {
    font-family: "Inter", sans-serif; font-weight: 600; font-size: 16px;
    color: #0F121C;
}
.cy-paie-actif-sub {
    font-size: 13px; color: #6B6F7E;
    margin-top: 1px;
}

/* =========================================================================
   PAIE GOUVERNANT v4 — Pills colorés + boutons d'action contestés
   ========================================================================= */
.cy-loc-pill-danger { background: #FCEBEB !important; color: #791F1F !important; border-color: #F09595 !important; }
.cy-loc-pill-danger.is-active { background: #791F1F !important; color: #FFFFFF !important; border-color: #791F1F !important; }
.cy-loc-pill-warning { background: #FAEEDA !important; color: #854F0B !important; border-color: #FAC775 !important; }
.cy-loc-pill-warning.is-active { background: #854F0B !important; color: #FFFFFF !important; border-color: #854F0B !important; }
.cy-sat-tab-count-danger, .cy-sat-tab-count-warning {
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 11.5px;
    font-weight: 600;
    margin-left: 4px;
    color: #FFFFFF !important;
}
.cy-sat-tab-count-danger { background: #791F1F; }
.cy-sat-tab-count-warning { background: #854F0B; }

/* Boutons action sur cards contestés */
.cy-paie-btn-info, .cy-paie-btn-warn, .cy-paie-btn-danger {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 7px 14px;
    border-radius: 8px;
    font-family: "Inter", sans-serif; font-weight: 500; font-size: 13px;
    background: #FFFFFF; cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.cy-paie-btn-info { color: #0C447C; border: 1px solid #0C447C; }
.cy-paie-btn-info:hover { background: #0C447C; color: #FFFFFF; }
.cy-paie-btn-warn { color: #854F0B; border: 1px solid #854F0B; }
.cy-paie-btn-warn:hover { background: #854F0B; color: #FFFFFF; }
.cy-paie-btn-danger { color: #791F1F; border: 1px solid #791F1F; }
.cy-paie-btn-danger:hover { background: #791F1F; color: #FFFFFF; }
.cy-paie-btn-info i, .cy-paie-btn-warn i, .cy-paie-btn-danger i { font-size: 14px; }

/* Barre filtres dans onglets historique */
.cy-paie-filters {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 14px !important;
}
.cy-paie-filters-label {
    font-size: 11px; color: #8A8E9D; font-weight: 600; letter-spacing: 0.5px;
}

/* Barre filtres dédiée aux onglets historiques (paie_gouvernant) */
.cy-paie-histo-bar {
    background: #FFFFFF;
    border: 1px solid #E8E9EE;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.cy-paie-histo-bar select {
    padding: 7px 10px;
    border: 1px solid #E8E9EE;
    border-radius: 8px;
    font-family: "Inter", sans-serif; font-size: 13.5px;
    color: #0F121C; background: #FFFFFF;
}

/* Bouton "Valider" vert pour NDF */
.cy-paie-btn-success {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 7px 14px;
    border-radius: 8px;
    font-family: "Inter", sans-serif; font-weight: 500; font-size: 13px;
    background: #FFFFFF; color: #0E7C44; border: 1px solid #0E7C44;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.cy-paie-btn-success:hover { background: #0E7C44; color: #FFFFFF; }
.cy-paie-btn-success i { font-size: 14px; }

/* =========================================================================
   NDF À VALIDER — Card détaillée
   ========================================================================= */
.cy-ndf-card { padding: 14px 16px; }
.cy-ndf-chip-type {
    background: #FAEEDA; color: #854F0B;
    padding: 4px 10px; font-size: 12px; font-weight: 500;
}
.cy-ndf-details {
    background: #F4F7FB;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 10px;
    font-size: 13.5px;
}
.cy-ndf-row {
    display: flex; gap: 10px;
    padding: 4px 0;
}
.cy-ndf-row + .cy-ndf-row { border-top: 1px dashed #D8DDE5; }
.cy-ndf-label {
    color: #6B6F7E;
    font-size: 12.5px;
    min-width: 100px;
}
.cy-ndf-value {
    color: #0F121C;
    flex: 1;
    font-weight: 500;
}
.cy-ndf-amount {
    display: flex; align-items: center; justify-content: space-between;
    background: #EAF3DE; color: #27500A;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 10px;
}
.cy-ndf-amount-label {
    font-size: 12px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.3px;
}
.cy-ndf-amount-value {
    font-family: "Fraunces", serif; font-size: 22px; font-weight: 500;
}

/* NDF — Section factures jointes + ligne calcul kilométrique */
.cy-ndf-factures {
    background: #E6F1FB;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 10px;
    font-size: 13px;
    color: #0C447C;
}
.cy-ndf-factures-label {
    font-weight: 500;
    margin-bottom: 6px;
    display: flex; align-items: center; gap: 6px;
}
.cy-ndf-factures-list {
    display: flex; flex-direction: column; gap: 4px;
    margin-top: 6px;
}
.cy-ndf-facture-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: #0C447C;
    text-decoration: none;
    font-family: monospace;
    font-size: 12.5px;
    background: #FFFFFF;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #B5D4F4;
    transition: background .15s ease;
}
.cy-ndf-facture-link:hover { background: #B5D4F4; }
.cy-ndf-factures-missing {
    background: #FCEBEB;
    color: #791F1F;
    font-style: italic;
}
.cy-ndf-calc {
    font-size: 12.5px;
    color: #6B6F7E;
    margin: 0 0 8px;
    padding: 0 4px;
    font-style: italic;
}

/* Modale aperçu facture PDF — plus large pour bien voir */
.cy-facture-modal-card {
    width: min(900px, 95vw) !important;
    max-height: 95vh;
    display: flex; flex-direction: column;
}

/* Pills validation pointage dans GridView */
.cy-paie-vpill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11.5px; font-weight: 500;
    font-family: "Inter", sans-serif;
    line-height: 1.3;
    white-space: nowrap;
}
.cy-paie-vpill i { font-size: 13px; }
.cy-paie-vpill-ok { background: #EAF3DE; color: #27500A; }
.cy-paie-vpill-ko { background: #FCEBEB; color: #791F1F; }
.cy-paie-vpill-wait { background: #F2F3F6; color: #6B6F7E; }

/* Ligne Total Hist. pointages */
.cy-paie-total-row {
    background: #F4F7FB !important;
    font-weight: 600;
}
.cy-paie-total-row td {
    padding: 10px 12px !important;
    border-top: 1px solid #C8CBD3 !important;
}

/* =========================================================================
   CONTACT_PERSONNEL — cards compactes 2 lignes
   ========================================================================= */
.cy-cp-list { display: flex; flex-direction: column; gap: 6px; }
.cy-cp-card {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border: 1px solid #E8E9EE;
    border-radius: 10px;
    background: #FFFFFF;
    transition: border-color .15s ease;
}
.cy-cp-card:hover { border-color: #C8CBD3; }
.cy-cp-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 14px;
}
.cy-cp-body { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.5; }
.cy-cp-l1 { color: #0F121C; }
.cy-cp-nom { font-weight: 500; font-size: 14px; }
.cy-cp-metier { color: #6B6F7E; }
.cy-cp-l2 {
    color: #6B6F7E;
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
}
.cy-cp-icon {
    display: inline-flex; align-items: center;
    color: #1E3A5F;
    padding: 2px;
    text-decoration: none;
    line-height: 1;
}
.cy-cp-icon i { font-size: 15px; }
.cy-cp-icon:hover { color: #0C447C; }


/* ============================================================
   DEMO PROSPECT (commerce/hestia_holiday.aspx)
   Page courte + 3 modales interactives
   ============================================================ */

.cy-demo-page {
    max-width: 480px;
    margin: 0 auto;
    background: #FFFFFF;
    min-height: 100vh;
    font-family: 'Inter', sans-serif;
    color: #0F121C;
}

.cy-demo-brandbar {
    background: #0F1226;
    color: #FFFFFF;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.cy-demo-brandbar-name {
    font-family: 'Fraunces', serif;
    font-size: 15px;
    letter-spacing: 1px;
}
.cy-demo-brandbar-tag {
    font-size: 11px;
    color: #B08F4D;
    letter-spacing: 0.5px;
}

.cy-demo-subheader {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid #E8E9EE;
}
.cy-demo-h1 {
    font-family: 'Fraunces', serif;
    font-size: 18px;
    font-weight: 500;
    color: #0F121C;
    margin: 0;
}

.cy-demo-hero {
    padding: 20px 16px 14px;
}
.cy-demo-hero-title {
    font-family: 'Fraunces', serif;
    font-size: 22px;
    line-height: 1.25;
    color: #0F121C;
    margin-bottom: 8px;
}
.cy-demo-hero-sub {
    font-size: 13px;
    color: #6B6F7E;
    line-height: 1.5;
}

.cy-demo-vertical {
    padding: 4px 12px 14px;
    border-bottom: 1px solid #E8E9EE;
}
.cy-demo-vertical-label {
    font-size: 11px;
    color: #9CA0AE;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 6px 4px 8px;
}
.cy-demo-vertical-pills {
    display: flex;
    gap: 6px;
    overflow-x: auto;
}
.cy-demo-vertical-pills button {
    padding: 8px 12px;
    background: transparent;
    color: #0F121C;
    border: 1px solid #C8CBD3;
    border-radius: 999px;
    font-size: 13px;
    white-space: nowrap;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.cy-demo-vertical-pills button.is-active {
    background: #0F1226;
    color: #FFFFFF;
    border-color: #0F1226;
}
.cy-demo-vertical-pills i { font-size: 14px; }

.cy-demo-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 14px;
}
.cy-demo-card {
    width: 100%;
    border: 1px solid #E8E9EE;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: #FFFFFF;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}
.cy-demo-card:hover {
    border-color: #B08F4D;
    background: #FFFCF7;
}
.cy-demo-card-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
.cy-demo-card-body { flex: 1; min-width: 0; }
.cy-demo-card-title {
    font-family: 'Fraunces', serif;
    font-size: 16px;
    color: #0F121C;
    margin-bottom: 4px;
}
.cy-demo-card-sub {
    font-size: 12px;
    color: #6B6F7E;
    line-height: 1.5;
    margin-bottom: 10px;
}
.cy-demo-card-cta {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #B08F4D;
    font-size: 12px;
    font-weight: 500;
}

.cy-demo-footer {
    background: #0F1226;
    color: #FFFFFF;
    padding: 18px 16px 24px;
    text-align: center;
}
.cy-demo-footer-name {
    font-family: 'Fraunces', serif;
    font-size: 16px;
    color: #FFFFFF;
    margin-bottom: 4px;
}
.cy-demo-footer-tag {
    font-size: 11px;
    color: #B08F4D;
    letter-spacing: 0.5px;
}

/* ===== MODALES ===== */
body.cy-modal-open { overflow: hidden; }

.cy-demo-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    z-index: 9999;
}
.cy-demo-modal.is-open { display: block; }
.cy-demo-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 18, 38, 0.55);
}
.cy-demo-modal-content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 480px;
    margin: 0 auto;
    background: #FFFFFF;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 20px;
}

.cy-demo-modal-header {
    background: #0F1226;
    color: #FFFFFF;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.cy-demo-modal-head-text { display: flex; flex-direction: column; }
.cy-demo-modal-step {
    font-size: 11px;
    color: #B08F4D;
    letter-spacing: 0.5px;
}
.cy-demo-modal-title {
    font-family: 'Fraunces', serif;
    font-size: 16px;
}
.cy-demo-modal-close {
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    color: #FFFFFF;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cy-demo-modal-close i { font-size: 16px; }

.cy-demo-modal-intro {
    padding: 10px 12px 8px;
    font-size: 14px;
    color: #6B6F7E;
    line-height: 1.5;
}
.cy-demo-modal-intro strong {
    color: #0F121C;
    font-weight: 500;
}

.cy-demo-modal-footer {
    padding: 10px 12px 14px;
    border-top: 1px solid #E8E9EE;
    display: flex;
    gap: 8px;
}
.cy-demo-modal-btn {
    flex: 1;
    padding: 12px;
    background: transparent;
    color: #0F121C;
    border: 1px solid #C8CBD3;
    border-radius: 10px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.cy-demo-modal-btn.cy-primary {
    background: #0F1226;
    color: #FFFFFF;
    border-color: #0F1226;
}
.cy-demo-modal-btn i { font-size: 14px; }

/* ===== Faux écrans dans les modales ===== */
.cy-demo-screen {
    background: #F4F5F7;
    border-radius: 12px;
    overflow: hidden;
    margin: 0 14px 14px;
    border: 1px solid #E8E9EE;
}
.cy-demo-screen-brandbar {
    background: #0F1226;
    color: #FFFFFF;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Fraunces', serif;
    font-size: 12px;
    letter-spacing: 1px;
}
.cy-demo-screen-user {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    color: #B08F4D;
    letter-spacing: 0;
}
.cy-demo-screen-h1 {
    background: #FFFFFF;
    padding: 12px;
    font-family: 'Fraunces', serif;
    font-size: 16px;
    border-bottom: 1px solid #E8E9EE;
}
.cy-demo-screen-h2 {
    background: #FFFFFF;
    padding: 10px 12px 4px;
    font-family: 'Fraunces', serif;
    font-size: 14px;
}
.cy-demo-screen-meta {
    background: #FFFFFF;
    padding: 4px 12px 10px;
    border-bottom: 1px solid #E8E9EE;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #6B6F7E;
}
.cy-demo-screen-meta i { font-size: 12px; }
.cy-demo-sep { color: #C8CBD3; margin: 0 2px; }

.cy-demo-screen-tiles {
    background: #FFFFFF;
    padding: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.cy-demo-screen-tile {
    background: #F4F5F7;
    border-radius: 10px;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    font-size: 12px;
    color: #0F121C;
}
.cy-demo-screen-tile i { font-size: 22px; color: #6B6F7E; }

.cy-demo-screen-stack {
    background: #FFFFFF;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cy-demo-screen-pcard {
    background: #FFFFFF;
    border: 1px solid #E8E9EE;
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cy-demo-screen-pcard.cy-muted { opacity: 0.65; }
.cy-demo-screen-pcard-row1 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}
.cy-demo-screen-pcard-site {
    font-weight: 500;
    color: #0F121C;
}
.cy-demo-screen-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
}
.cy-pill-now { background: #E1F5EE; color: #085041; }
.cy-pill-later { background: #F4F5F7; color: #6B6F7E; }
.cy-demo-screen-pcard-row2 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #6B6F7E;
}
.cy-demo-screen-pcard-row2 i { font-size: 14px; }
.cy-demo-screen-pcard-actions { margin-top: 4px; }
.cy-demo-screen-action {
    width: 100%;
    padding: 8px;
    background: #B08F4D;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    font-family: inherit;
}
.cy-demo-screen-action i { font-size: 14px; }

.cy-demo-screen-section {
    background: #FFFFFF;
    padding: 10px 12px;
    border-top: 1px solid #E8E9EE;
}
.cy-demo-screen-section-label {
    font-size: 11px;
    color: #9CA0AE;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.cy-demo-screen-tasks {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cy-demo-screen-task {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #0F121C;
}
.cy-demo-screen-task i { font-size: 14px; color: #C8CBD3; }
.cy-demo-screen-task i.ok { color: #0F6E56; }

.cy-demo-screen-photos {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
}
.cy-demo-screen-photo {
    width: 48px;
    height: 48px;
    background: #F4F5F7;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9CA0AE;
}
.cy-demo-screen-photo i { font-size: 18px; }
.cy-demo-screen-photo.cy-big { width: 56px; height: 56px; }
.cy-demo-screen-photo.cy-big i { font-size: 20px; }

.cy-demo-screen-note {
    font-size: 12px;
    color: #0F121C;
    background: #F4F5F7;
    padding: 8px 10px;
    border-radius: 8px;
    line-height: 1.5;
}

/* ===== Modale 3 : Step + flèche + mail ===== */
.cy-demo-step { padding: 16px 14px 0; }
.cy-demo-step-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.cy-demo-step-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cy-num-teal { background: #E1F5EE; color: #085041; }
.cy-num-purple { background: #EEEDFE; color: #3C3489; }
.cy-demo-step-title {
    font-family: 'Fraunces', serif;
    font-size: 15px;
    color: #0F121C;
}
.cy-demo-step-sub {
    font-size: 11px;
    color: #9CA0AE;
    margin-bottom: 10px;
    padding-left: 30px;
}

.cy-demo-trans {
    padding: 14px 14px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #9CA0AE;
}
.cy-demo-trans i { font-size: 18px; }
.cy-demo-trans span {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cy-demo-mail-head {
    background: #F4F5F7;
    padding: 10px 12px;
    border-bottom: 1px solid #E8E9EE;
}
.cy-demo-mail-from {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 11px;
    color: #6B6F7E;
}
.cy-demo-mail-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #0F1226;
    color: #FFFFFF;
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cy-demo-mail-time {
    margin-left: auto;
    font-size: 11px;
    color: #9CA0AE;
}
.cy-demo-mail-subject {
    font-size: 13px;
    font-weight: 500;
    color: #0F121C;
    line-height: 1.4;
}
.cy-demo-mail-body {
    background: #FFFFFF;
    padding: 12px;
}
.cy-demo-mail-text {
    font-size: 12px;
    line-height: 1.6;
    color: #0F121C;
    margin-bottom: 10px;
}
.cy-demo-mail-obs {
    background: #FAEEDA;
    border-left: 3px solid #B08F4D;
    padding: 8px 10px;
    margin-bottom: 10px;
    border-radius: 0 8px 8px 0;
}
.cy-demo-mail-obs-label {
    font-size: 11px;
    color: #633806;
    font-weight: 500;
    margin-bottom: 2px;
}
.cy-demo-mail-obs-text {
    font-size: 12px;
    color: #633806;
    line-height: 1.4;
}
.cy-demo-mail-cta {
    width: 100%;
    padding: 10px;
    background: #B08F4D;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
}

/* Modale 1 espace client : grid 3 colonnes (vraies tiles cy-tile) */
.cy-demo-screen-cat {
    background: #FFFFFF;
    padding: 10px 12px 4px;
    font-size: 11px;
    color: #9CA0AE;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.cy-demo-screen-tiles + .cy-demo-screen-cat {
    border-top: 1px solid #E8E9EE;
}
.cy-demo-screen-tile2 {
    background: #F4F5F7;
    border-radius: 10px;
    padding: 10px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    font-size: 11px;
    color: #0F121C;
    line-height: 1.3;
}
.cy-demo-screen-tile2 i { font-size: 20px; color: #B08F4D; }
.cy-demo-screen-tiles3 {
    background: #FFFFFF;
    padding: 8px 12px 12px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

/* ===== Modale 1 : reproduction fidèle espace client acces.aspx ===== */
.cy-demo-mock {
    background: #F4F5F7;
    border-radius: 12px;
    overflow: hidden;
    margin: 0 8px 8px;
    border: 1px solid #E8E9EE;
}
.cy-demo-mock-brandbar {
    background: #0F1226;
    color: #FFFFFF;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.cy-demo-mock-logo {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: #B08F4D;
    color: #FFFFFF;
    font-weight: 500;
    font-family: 'Fraunces', serif;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cy-demo-mock-name {
    font-family: 'Fraunces', serif;
    font-size: 16px;
    color: #FFFFFF;
}
.cy-demo-mock-dot { color: #B08F4D; margin: 0 2px; }
.cy-demo-mock-tag {
    font-size: 10px;
    color: #B08F4D;
    letter-spacing: 1px;
}

.cy-demo-mock-welcome {
    background: #FFFFFF;
    padding: 12px 14px 8px;
    font-family: 'Fraunces', serif;
    font-size: 18px;
    color: #0F121C;
    letter-spacing: 1px;
    border-bottom: 2px solid #B08F4D;
    margin: 0 14px;
    text-align: center;
}
.cy-demo-mock-section {
    background: #FFFFFF;
    padding: 12px 14px 6px;
    font-family: 'Fraunces', serif;
    font-size: 16px;
    color: #0F121C;
}

.cy-demo-mock-tiles {
    background: #FFFFFF;
    padding: 6px 10px 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.cy-demo-mock-tile {
    background: #FFFFFF;
    border: 1px solid #E8E9EE;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cy-demo-mock-tile.cy-demo-mock-tile-action {
    border-color: #B08F4D;
    border-width: 1.5px;
}
.cy-demo-mock-tile-head {
    display: flex;
    align-items: center;
    gap: 6px;
}
.cy-demo-mock-tile-ico {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cy-demo-mock-tile-ico i { font-size: 18px; }
.cy-ico-gold { background: #FAEEDA; color: #B08F4D; }
.cy-ico-indigo { background: #EEEDFE; color: #534AB7; }
.cy-ico-amber { background: #FAEEDA; color: #BA7517; }

.cy-demo-mock-arrow {
    margin-left: auto;
    font-size: 14px;
    color: #6B6F7E;
}
.cy-demo-mock-badge {
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
}
.cy-bdg-dark { background: #0F1226; color: #FFFFFF; }
.cy-bdg-green { background: #C0DD97; color: #173404; }
.cy-bdg-orange { background: #EF9F27; color: #FFFFFF; }

.cy-demo-mock-tile-title {
    font-family: 'Fraunces', serif;
    font-size: 14px;
    color: #0F121C;
    text-decoration: underline;
    text-decoration-color: #B08F4D;
    text-underline-offset: 2px;
    line-height: 1.3;
}
.cy-demo-mock-tile-sub {
    font-size: 12px;
    color: #6B6F7E;
    text-decoration: underline;
    text-underline-offset: 2px;
    line-height: 1.4;
}

/* ===== Modale 2 : reproduction acces_site.aspx ===== */
.cy-demo-as-pills {
    background: #FFFFFF;
    padding: 10px 12px;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    border-bottom: 1px solid #E8E9EE;
}
.cy-demo-as-pill {
    padding: 6px 10px;
    border-radius: 999px;
    background: #F4F5F7;
    color: #6B6F7E;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    border: 1px solid #E8E9EE;
}
.cy-demo-as-pill.is-active {
    background: #B08F4D;
    color: #FFFFFF;
    border-color: #B08F4D;
}
.cy-demo-as-section {
    background: #FFFFFF;
    padding: 12px;
    border-top: 6px solid #F4F5F7;
}
.cy-demo-as-section:first-of-type { border-top: 0; }
.cy-demo-as-section-title {
    font-family: 'Fraunces', serif;
    font-size: 15px;
    color: #0F121C;
    margin-bottom: 10px;
}
.cy-demo-as-cta {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #0F1226;
    color: #FFFFFF;
    padding: 10px 12px;
    border-radius: 10px;
    margin-bottom: 10px;
    text-decoration: none;
}
.cy-demo-as-cta i { font-size: 18px; }
.cy-demo-as-cta-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.cy-demo-as-cta-text strong { font-size: 13px; }
.cy-demo-as-cta-text span { font-size: 11px; color: #B08F4D; }
.cy-demo-as-photo {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: #F4F5F7;
    aspect-ratio: 16 / 9;
}
.cy-demo-as-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cy-demo-as-photo-tag {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: rgba(15, 18, 38, 0.7);
    color: #FFFFFF;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
}

.cy-demo-as-codes {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
}
.cy-demo-as-codes:has(.cy-demo-as-code:nth-child(2):last-child) {
    grid-template-columns: 1fr 1fr;
}
.cy-demo-as-code {
    background: #FAEEDA;
    border: 1px solid #E5C892;
    border-radius: 8px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cy-demo-as-code-label {
    font-size: 10px;
    color: #6B6F7E;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.cy-demo-as-code-value {
    font-size: 14px;
    font-weight: 500;
    color: #0F121C;
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
}
.cy-demo-as-info {
    background: #FAEEDA;
    border: 1px solid #E5C892;
    border-radius: 8px;
    padding: 8px;
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cy-demo-as-info-label {
    font-size: 10px;
    color: #6B6F7E;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.cy-demo-as-info-value {
    font-size: 12px;
    color: #0F121C;
    line-height: 1.4;
}
.cy-demo-as-wifi-cta {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #B08F4D;
    color: #FFFFFF;
    padding: 10px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}
.cy-demo-as-wifi-cta i { font-size: 16px; }

/* Photos d'observation (modale 3) : image qui remplit le cadre carré */
.cy-demo-screen-photo.cy-demo-photo-img {
    padding: 0;
    object-fit: cover;
    border: 1px solid #E8E9EE;
}

/* Tache modale 3 : nom executant aligne droite */
.cy-demo-screen-task {
    display: flex;
    align-items: center;
    gap: 8px;
}
.cy-demo-screen-task-label {
    flex: 1;
    min-width: 0;
}
.cy-demo-screen-task-by {
    font-size: 10px;
    color: #6B6F7E;
    background: #F4F5F7;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid #E8E9EE;
    white-space: nowrap;
}

/* === Fix liste_clients (juin 2026) ===
   Le master legacy reapplique parfois underline et reset le padding.
   On force pour cette page. */
.cy-client-card,
.cy-client-card * {
    text-decoration: none !important;
}
.cy-clients-search input {
    padding-left: 48px !important;
}
.cy-clients-search-icon {
    z-index: 2;
}

/* === Override mon_profil pills : Style.css client legacy gonfle les buttons,
       on force le standard compact (juin 2026) === */
.cy-fiche #cy-profil-tabs.cy-sat-tabs {
    margin: 0 16px 16px;
}
.cy-fiche #cy-profil-tabs .cy-loc-pill {
    padding: 6px 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    height: auto !important;
}
.cy-fiche #cy-profil-tabs .cy-loc-pill > i {
    font-size: 14px !important;
}

/* === Refonte mon_profil : cards thematiques + input-with-action (juin 2026) === */
.cy-fiche .cy-profil-card {
    margin-bottom: 12px;
}
.cy-fiche .cy-profil-card:last-of-type {
    margin-bottom: 0;
}

/* Sous-section dans une card (Facturation / Commercial dans Contacts) */
.cy-fiche .cy-subsection-label {
    font-size: 11px;
    color: #9CA0AE;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 6px 0 8px;
    font-weight: 500;
}

/* Champ avec bouton icone a droite (tel / mail) */
.cy-fiche .cy-input-with-action {
    display: flex;
    gap: 6px;
    align-items: stretch;
}
.cy-fiche .cy-input-with-action > input,
.cy-fiche .cy-input-with-action > input[type="text"],
.cy-fiche .cy-input-with-action > input[type="tel"],
.cy-fiche .cy-input-with-action > input[type="email"] {
    flex: 1;
    min-width: 0;
}
.cy-fiche .cy-input-action {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(15, 27, 60, 0.14);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #185FA5;
    background: #FFFFFF;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}
.cy-fiche .cy-input-action:hover {
    background: #E6F1FB;
    border-color: #185FA5;
}
.cy-fiche .cy-input-action i { font-size: 16px; }

/* Largeur CP plus petite en grid responsive */
.cy-fiche .cy-profil-field-cp {
    max-width: 140px;
}
@media (max-width: 600px) {
    .cy-fiche .cy-profil-field-cp { max-width: none; }
}

/* Bandeau action en bas (full-width sur mobile, aligne sur desktop) */
.cy-fiche .cy-profil-actions {
    margin-top: 16px;
    padding: 12px 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.cy-fiche .cy-profil-actions .cy-btn-primary {
    min-width: 220px;
}
@media (max-width: 600px) {
    .cy-fiche .cy-profil-actions .cy-btn-primary { width: 100%; }
}

/* === Force visibilite titres cards mon_profil au cas ou Style.css client cache (juin 2026) === */
.cy-fiche .cy-profil-card > .cy-card-title {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-family: 'Fraunces', Georgia, serif !important;
    font-weight: 500 !important;
    font-size: 18px !important;
    color: #0F1B3C !important;
    margin: 0 0 12px 0 !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}
.cy-fiche .cy-profil-card > .cy-card-title > i {
    color: #B08F4D !important;
    font-size: 18px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    width: auto !important;
    height: auto !important;
}
/* Subsection label dans Contacts (FACTURATION / COMMERCIAL) */
.cy-fiche .cy-profil-card .cy-subsection-label {
    font-size: 11px !important;
    color: #9CA0AE !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-weight: 500 !important;
}

/* === mon_profil mobile : grid 1-col + pills detache du header + font lisible === */
@media (max-width: 600px) {
    /* Pills : detacher du header + padding correct */
    .cy-fiche #cy-profil-tabs.cy-sat-tabs {
        margin: 12px 12px 12px !important;
        padding: 0 !important;
    }
    /* Grid 2-col -> 1-col sur mobile (lisibilite) */
    .cy-fiche .cy-profil-card .cy-form-grid.cols-2 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    /* Inputs : 16px pour bloquer le zoom auto iOS */
    .cy-fiche .cy-profil-card input[type="text"],
    .cy-fiche .cy-profil-card input[type="tel"],
    .cy-fiche .cy-profil-card input[type="email"],
    .cy-fiche .cy-profil-card select,
    .cy-fiche .cy-profil-card textarea {
        font-size: 16px !important;
        padding: 10px 12px !important;
        min-height: 40px !important;
    }
    /* Labels plus lisibles */
    .cy-fiche .cy-profil-card .cy-field label {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }
    /* Titres cards : plus respires */
    .cy-fiche .cy-profil-card > .cy-card-title {
        font-size: 17px !important;
        margin: 0 0 14px 0 !important;
    }
    /* Bouton action icone tel/mail : meme hauteur que input */
    .cy-fiche .cy-input-action {
        width: 42px !important;
        height: 42px !important;
    }
    .cy-fiche .cy-input-action i { font-size: 18px !important; }
}

/* === mon_profil : differenciation label vs contenu textbox (juin 2026) === */
.cy-fiche .cy-profil-card .cy-field label {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #5B5F6E !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    margin-bottom: 6px !important;
    display: block !important;
    line-height: 1.3 !important;
}
.cy-fiche .cy-profil-card .cy-field input[type="text"],
.cy-fiche .cy-profil-card .cy-field input[type="tel"],
.cy-fiche .cy-profil-card .cy-field input[type="email"],
.cy-fiche .cy-profil-card .cy-field select,
.cy-fiche .cy-profil-card .cy-field textarea {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #0F121C !important;
    background: #FFFFFF !important;
    border: 1px solid #D3D5DC !important;
    border-radius: 8px !important;
    padding: 9px 12px !important;
}
.cy-fiche .cy-profil-card .cy-field input:focus,
.cy-fiche .cy-profil-card .cy-field select:focus,
.cy-fiche .cy-profil-card .cy-field textarea:focus {
    outline: none !important;
    border-color: #B08F4D !important;
    box-shadow: 0 0 0 3px rgba(176, 143, 77, 0.15) !important;
}
/* readonly (Identifiant) : ton tres discret pour montrer qu'on ne peut pas editer */
.cy-fiche .cy-profil-card .cy-field input[readonly] {
    background: #F4F5F7 !important;
    color: #6B6F7E !important;
    cursor: default !important;
}

/* === Cards site (Repeater rep_sites) — section Mes sites d'intervention === */
.cy-fiche .cy-sites-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 4px;
}
.cy-fiche .cy-site-card {
    display: flex;
    gap: 10px;
    padding: 12px;
    border: 1px solid #E8E9EE;
    border-radius: 10px;
    background: #FFFFFF;
}
.cy-fiche .cy-site-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #FAEEDA;
    color: #B08F4D;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cy-fiche .cy-site-icon i { font-size: 18px; }
.cy-fiche .cy-site-body { flex: 1; min-width: 0; }
.cy-fiche .cy-site-row1 {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.cy-fiche .cy-site-info { flex: 1; min-width: 0; }
.cy-fiche .cy-site-name {
    font-size: 14px;
    font-weight: 500;
    color: #0F121C;
    line-height: 1.3;
}
.cy-fiche .cy-site-address {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    font-size: 12px;
    color: #6B6F7E;
    line-height: 1.4;
}
.cy-fiche .cy-site-address i { font-size: 12px; color: #9CA0AE; flex-shrink: 0; }
.cy-fiche .cy-site-btn-modif {
    flex-shrink: 0;
    padding: 6px 12px;
    background: transparent;
    color: #0F121C;
    border: 1px solid #C8CBD3;
    border-radius: 8px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none !important;
    white-space: nowrap;
}
.cy-fiche .cy-site-btn-modif:hover {
    border-color: #B08F4D;
    background: #FFFCF7;
}
.cy-fiche .cy-site-btn-modif i { font-size: 13px; }
.cy-fiche .cy-site-meta {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.cy-fiche .cy-site-chip {
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 999px;
    font-weight: 500;
    line-height: 1.4;
}
.cy-fiche .cy-site-chip-source {
    background: #E1F5EE;
    color: #085041;
}
.cy-fiche .cy-site-chip-prop {
    background: #F4F5F7;
    color: #6B6F7E;
}
/* Empty state sites */
.cy-fiche .cy-sites-empty {
    padding: 24px 12px;
    text-align: center;
    color: #6B6F7E;
    font-size: 13px;
    border: 1px dashed #C8CBD3;
    border-radius: 10px;
}

/* === devis.aspx : toggles binaires Conditions tarifaires (juin 2026) === */
.cy-fiche .cy-devis-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 0.5px solid #E8E9EE;
}
.cy-fiche .cy-devis-toggle-row:last-child { border-bottom: 0; }
.cy-fiche .cy-devis-toggle-label {
    flex: 1;
    min-width: 0;
}
.cy-fiche .cy-devis-toggle-title {
    font-size: 13px;
    font-weight: 500;
    color: #0F121C;
}
.cy-fiche .cy-devis-toggle-sub {
    font-size: 11px;
    color: #6B6F7E;
    margin-top: 2px;
}
/* Toggle binaire : 2 pills en pillpicker compact a droite */
.cy-fiche .cy-pills-bar.cy-toggle-binary {
    flex-shrink: 0;
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    background: #F4F5F7;
    border-radius: 999px;
    border: none;
}
.cy-fiche .cy-pills-bar.cy-toggle-binary > * {
    padding: 5px 12px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    border: none !important;
    background: transparent !important;
    color: #6B6F7E !important;
}
.cy-fiche .cy-pills-bar.cy-toggle-binary > .is-active {
    background: #B08F4D !important;
    color: #FFFFFF !important;
    font-weight: 500 !important;
}

/* === devis.aspx : services CBL regroupes en accordeon par metier === */
.cy-fiche .cy-svc-acc {
    border: 1px solid #E8E9EE;
    border-radius: 10px;
    background: #FFFFFF;
    overflow: hidden;
}
.cy-fiche .cy-svc-acc + .cy-svc-acc { margin-top: 6px; }
.cy-fiche .cy-svc-acc-head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}
.cy-fiche .cy-svc-acc-head:hover { background: #F4F5F7; }
.cy-fiche .cy-svc-acc-ico {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #FAEEDA;
    color: #B08F4D;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cy-fiche .cy-svc-acc-ico i { font-size: 16px; }
.cy-fiche .cy-svc-acc-name {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
    color: #0F121C;
}
.cy-fiche .cy-svc-acc-count {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #F4F5F7;
    color: #6B6F7E;
    font-weight: 500;
    white-space: nowrap;
}
.cy-fiche .cy-svc-acc-count.has {
    background: #FAEEDA;
    color: #B08F4D;
}
.cy-fiche .cy-svc-acc-chev {
    flex-shrink: 0;
    color: #9CA0AE;
    transition: transform 0.2s;
}
.cy-fiche .cy-svc-acc.is-open .cy-svc-acc-chev { transform: rotate(180deg); }
.cy-fiche .cy-svc-acc-body { display: none; padding: 4px 14px 12px 14px; }
.cy-fiche .cy-svc-acc.is-open .cy-svc-acc-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cy-fiche .cy-svc-prest {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 0.5px solid #E8E9EE;
    border-radius: 8px;
    background: #FFFFFF;
    cursor: pointer;
}
.cy-fiche .cy-svc-prest.is-checked {
    border: 1.5px solid #B08F4D;
    background: #FFFCF7;
}
.cy-fiche .cy-svc-prest-box {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 2px solid #C8CBD3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}
.cy-fiche .cy-svc-prest.is-checked .cy-svc-prest-box {
    border-color: #B08F4D;
    background: #B08F4D;
    color: #FFFFFF;
}
.cy-fiche .cy-svc-prest-box i {
    font-size: 12px;
    color: #FFFFFF;
    display: none;
}
.cy-fiche .cy-svc-prest.is-checked .cy-svc-prest-box i { display: inline-block; }
.cy-fiche .cy-svc-prest-name {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: #0F121C;
}
.cy-fiche .cy-svc-prest:not(.is-checked) .cy-svc-prest-name { color: #6B6F7E; }
.cy-fiche .cy-svc-prest.is-checked .cy-svc-prest-name { font-weight: 500; }
/* Cacher visuellement les CheckBox natifs ASP.NET (clic sur label fait postback via leur trigger) */
.cy-fiche .cy-svc-prest input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

/* =========================================================================
   COMMERCIAL.ASPX — Démarchage commercial (Réactivation / Devis / Locataires)
   Pattern réutilisable : pills onglets + KPI strip + liste de cards (cy-item)
   avec avatar, méta multi-info et actions (téléphone, mail, popover statut).
   ========================================================================= */

/* --- Pills onglets : variante des cy-pill-btn avec count badge --- */
.cy-fiche .cy-pills-wrap {
    background: #FFFFFF;
    padding: 14px 32px 14px;
    border-bottom: 1px solid var(--cy-border-soft, #F0EBE0);
    position: sticky;
    top: var(--cy-brand-bar-h, 46px);
    z-index: 20;
}
.cy-fiche .cy-pills-bar.cy-pills-tabs .cy-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 12px;
    font-weight: 600;
}
.cy-fiche .cy-pills-bar.cy-pills-tabs .cy-pill-btn i { font-size: 16px; }
/* Pill onglet actif : navy (standard "tabs" — commercial.aspx, devis.aspx, administration.aspx) */
.cy-fiche .cy-pills-bar.cy-pills-tabs .cy-pill-btn.is-active {
    background: var(--navy);
    border-color: var(--navy);
    color: #FFFFFF;
}
.cy-fiche .cy-pills-bar.cy-pills-tabs .cy-pill-btn.is-active i { color: #FFFFFF; }
.cy-fiche .cy-pills-bar.cy-pills-tabs .cy-pill-count {
    background: rgba(15,23,42,0.08);
    color: var(--navy);
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    min-width: 22px;
    text-align: center;
}
.cy-fiche .cy-pills-bar.cy-pills-tabs .cy-pill-btn.is-active .cy-pill-count {
    background: rgba(255,255,255,0.22);
    color: #FFFFFF;
}

/* --- Tabs (panels) : un seul actif à la fois, switch JS --- */
.cy-fiche .cy-tab { display: none; }
.cy-fiche .cy-tab.is-active { display: block; }

/* --- KPI strip --- */
.cy-fiche .cy-kpi-row {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.cy-fiche .cy-kpi {
    flex: 1 1 0;
    min-width: 140px;
    background: #FFFFFF;
    border: 1px solid var(--cy-border-soft, #F0EBE0);
    border-radius: 12px;
    padding: 12px 14px;
}
.cy-fiche .cy-kpi-label {
    font-size: 11px;
    color: #5B5F6E;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.cy-fiche .cy-kpi-value {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 24px;
    font-weight: 600;
    color: var(--navy);
    margin-top: 2px;
    line-height: 1.1;
}

/* --- Filter bar (au-dessus du KPI strip de l'onglet devis) --- */
.cy-fiche .cy-filter-bar {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
    padding: 12px 14px;
    background: #FFFFFF;
    border-radius: 12px;
    border: 1px solid var(--cy-border-soft, #F0EBE0);
    flex-wrap: wrap;
}
.cy-fiche .cy-filter-label {
    font-size: 12px;
    color: #5B5F6E;
    font-weight: 600;
}
.cy-fiche .cy-select {
    background: #FFFFFF;
    border: 1px solid rgba(15,23,42,0.14);
    border-radius: 8px;
    padding: 7px 10px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--navy);
    font-weight: 500;
}

/* --- List + item card --- */
.cy-fiche .cy-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cy-fiche .cy-item {
    background: #FFFFFF;
    border: 1px solid var(--cy-border-soft, #F0EBE0);
    border-radius: 14px;
    padding: 14px 16px;
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 14px;
    align-items: center;
    transition: border-color .15s, box-shadow .15s;
}
.cy-fiche .cy-item:hover {
    border-color: var(--gold-soft, #d4b888);
    box-shadow: 0 4px 14px rgba(163,121,52,0.08);
}

/* --- Avatar circulaire (initiales colorées par hash, ou icône maison) --- */
.cy-fiche .cy-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    color: #FFFFFF;
    font-family: 'Inter', sans-serif;
    flex-shrink: 0;
}
.cy-fiche .cy-avatar.bg-1 { background: #5B7B9A; }
.cy-fiche .cy-avatar.bg-2 { background: #A37934; }
.cy-fiche .cy-avatar.bg-3 { background: #8B5E3C; }
.cy-fiche .cy-avatar.bg-4 { background: #6B8E7A; }
.cy-fiche .cy-avatar.bg-5 { background: #9B6B7A; }
.cy-fiche .cy-avatar.is-site { background: var(--navy); font-size: 18px; }

/* --- Item content --- */
.cy-fiche .cy-item-main { min-width: 0; }
.cy-fiche .cy-item-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--navy);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.cy-fiche .cy-item-meta {
    font-size: 12px;
    color: #5B5F6E;
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.cy-fiche .cy-item-meta i {
    font-size: 14px;
    vertical-align: -2px;
    margin-right: 3px;
}
.cy-fiche .cy-meta-sep { opacity: 0.4; }

/* --- Status chip (client/prospect/contact/banni) --- */
.cy-fiche .cy-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: capitalize;
}
.cy-fiche .cy-status.client   { background: #E8F2EC; color: #3D7A4F; }
.cy-fiche .cy-status.prospect { background: #FFF4E0; color: #B7791F; }
.cy-fiche .cy-status.contact  { background: #E8EEF5; color: #3A5A87; }
.cy-fiche .cy-status.banni    { background: #F5E0DD; color: #A24237; }

/* --- Lang badge (locataires entrants) --- */
.cy-fiche .cy-lang {
    background: #F5F2EC;
    color: #5B5F6E;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* --- Actions (téléphone, mail, doc) --- */
.cy-fiche .cy-actions {
    display: flex;
    gap: 6px;
}
.cy-fiche .cy-action {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    border: 1px solid rgba(15,23,42,0.14);
    background: #FFFFFF;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5B5F6E;
    font-size: 18px;
    text-decoration: none;
    transition: all .15s;
}
.cy-fiche .cy-action:hover {
    border-color: var(--gold-soft, #d4b888);
    color: var(--gold);
    background: var(--gold-pale, #FFFCF7);
}
.cy-fiche .cy-action.is-primary {
    background: var(--navy);
    border-color: var(--navy);
    color: #FFFFFF;
}
.cy-fiche .cy-action.is-primary:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: #FFFFFF;
}

/* --- Status popover (changement de statut sur Réactivation) --- */
.cy-fiche .cy-status-edit { position: relative; }
.cy-fiche .cy-status-pop {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    background: #FFFFFF;
    border: 1px solid rgba(15,23,42,0.14);
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.12);
    display: none;
    z-index: 10;
    min-width: 120px;
}
.cy-fiche .cy-status-pop.is-open {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cy-fiche .cy-status-opt {
    border: none;
    background: transparent;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #5B5F6E;
    text-transform: capitalize;
    text-decoration: none;
    display: block;
}
.cy-fiche .cy-status-opt:hover {
    background: var(--gold-pale, #FFFCF7);
    color: var(--navy);
}

/* --- Empty state (variante) --- */
.cy-fiche .cy-empty {
    text-align: center;
    padding: 48px 20px;
    color: #5B5F6E;
    background: #FFFFFF;
    border: 1px dashed rgba(15,23,42,0.14);
    border-radius: 12px;
}
.cy-fiche .cy-empty > i {
    font-size: 36px;
    color: rgba(15,23,42,0.18);
    display: block;
    margin-bottom: 10px;
}
.cy-fiche .cy-empty-title {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 4px;
    font-size: 16px;
}

/* --- Mobile : actions sous la card, méta plus compacte --- */
@media (max-width: 600px) {
    .cy-fiche .cy-pills-wrap { padding: 12px 16px 12px; }
    .cy-fiche .cy-content { padding: 14px 16px 60px !important; }
    .cy-fiche .cy-kpi-row { flex-wrap: wrap; }
    .cy-fiche .cy-kpi { min-width: calc(50% - 5px); flex: 1 1 calc(50% - 5px); }
    .cy-fiche .cy-item {
        grid-template-columns: 40px 1fr;
        gap: 10px;
        padding: 12px;
    }
    .cy-fiche .cy-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
        padding-top: 8px;
        border-top: 1px solid var(--cy-border-soft, #F0EBE0);
        margin-top: 4px;
    }
    .cy-fiche .cy-item-name { font-size: 13px; }
    .cy-fiche .cy-item-meta { font-size: 11px; gap: 6px; }
    .cy-fiche .cy-status-pop { right: auto; left: 0; }
}

/* =========================================================================
   PANEL_GERANT — Espace direction (acces.aspx)
   Ajout des 2 dots manquants (Referentiels, Parametrage). Les 2 autres axes
   reutilisent les classes existantes (cy-coord-dot-equipe, cy-coord-dot-commerce).
   ========================================================================= */
.cy-coord-dot-referentiels { background: #8B5E3C; }
.cy-coord-dot-parametrage  { background: #5B5F6E; }

/* =========================================================================
   VALIDATION_EMBAUCHE.ASPX — Liste cards expandables des candidatures
   en attente de validation Direction. 1 card = 1 candidature.
   ========================================================================= */

/* Liste */
.cy-fiche .cy-cand-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Card candidat */
.cy-fiche .cy-cand {
    background: #FFFFFF;
    border: 1px solid var(--cy-border-soft, #F0EBE0);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.cy-fiche .cy-cand:hover { border-color: var(--gold-soft, #d4b888); }
.cy-fiche .cy-cand.is-open {
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
    border-color: var(--gold, #a37934);
}

/* Card head (visible meme collapsed) */
.cy-fiche .cy-cand-head {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 14px 18px;
    cursor: pointer;
}

/* Avatar metier : fond teinte + icone pleine couleur */
.cy-fiche .cy-cand-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

/* Card info */
.cy-fiche .cy-cand-info { min-width: 0; }
.cy-fiche .cy-cand-name {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 17px;
    color: var(--navy);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.cy-fiche .cy-cand-metier {
    background: #E8EEF5;
    color: #3A5A87;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.cy-fiche .cy-cand-meta {
    font-size: 12px;
    color: #5B5F6E;
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.cy-fiche .cy-cand-meta i {
    font-size: 13px;
    vertical-align: -2px;
    margin-right: 3px;
}
.cy-fiche .cy-cand-meta-sep { opacity: 0.4; }

/* Chevron */
.cy-fiche .cy-cand-chev {
    color: #5B5F6E;
    font-size: 20px;
    transition: transform .2s;
}
.cy-fiche .cy-cand.is-open .cy-cand-chev {
    transform: rotate(180deg);
    color: var(--gold, #a37934);
}

/* Aging chip */
.cy-fiche .cy-aging {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
}
.cy-fiche .cy-aging.is-fresh { background: #E8F2EC; color: #3D7A4F; }
.cy-fiche .cy-aging.is-warn  { background: #FFF4E0; color: #B7791F; }
.cy-fiche .cy-aging.is-late  { background: #F5E0DD; color: #A24237; }

/* Card body (expand) */
.cy-fiche .cy-cand-body {
    display: none;
    border-top: 1px solid var(--cy-border-soft, #F0EBE0);
    padding: 18px;
    background: var(--gold-pale, #FFFCF7);
}
.cy-fiche .cy-cand.is-open .cy-cand-body { display: block; }

/* Contact strip (telephone + visio) */
.cy-fiche .cy-cand-contact {
    background: #FFFFFF;
    border: 1px solid var(--cy-border-soft, #F0EBE0);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
}
.cy-fiche .cy-cand-contact-head {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gold, #a37934);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.cy-fiche .cy-cand-contact-head i { font-size: 14px; }
.cy-fiche .cy-cand-contact-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cy-fiche .cy-cand-contact-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cy-fiche .cy-cand-call-ico {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gold-pale, #FFFCF7);
    color: var(--gold, #a37934);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    border: 1px solid var(--cy-border-soft, #F0EBE0);
}
.cy-fiche .cy-cand-contact-body { flex: 1; font-size: 13px; }
.cy-fiche .cy-cand-contact-label {
    font-size: 11px;
    color: #5B5F6E;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.cy-fiche .cy-cand-contact-value { margin-top: 1px; }
.cy-fiche .cy-cand-call-name { font-weight: 600; color: var(--navy); }
.cy-fiche .cy-cand-call-link {
    color: var(--gold, #a37934);
    text-decoration: none;
    font-weight: 600;
}
.cy-fiche .cy-cand-call-link:hover { text-decoration: underline; }

/* 2 sections Identite + Contrat */
.cy-fiche .cy-cand-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}
.cy-fiche .cy-cand-section {
    background: #FFFFFF;
    border: 1px solid var(--cy-border-soft, #F0EBE0);
    border-radius: 10px;
    padding: 14px;
}
.cy-fiche .cy-cand-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gold, #a37934);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.cy-fiche .cy-cand-section-title i { font-size: 14px; }
.cy-fiche .cy-cand-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 13px;
    border-bottom: 1px dashed var(--cy-border-soft, #F0EBE0);
}
.cy-fiche .cy-cand-row:last-child { border-bottom: none; }
.cy-fiche .cy-cand-row-label { color: #5B5F6E; font-weight: 500; }
.cy-fiche .cy-cand-row-value {
    color: var(--navy);
    font-weight: 500;
    text-align: right;
    word-break: break-word;
}
.cy-fiche .cy-cand-row-value a {
    color: var(--gold, #a37934);
    text-decoration: none;
}
.cy-fiche .cy-cand-row-value a:hover { text-decoration: underline; }

/* Documents grid */
.cy-fiche .cy-cand-docs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}
.cy-fiche .cy-cand-doc {
    background: #FFFFFF;
    border: 1px solid var(--cy-border-soft, #F0EBE0);
    border-radius: 10px;
    padding: 14px 12px;
    text-align: center;
    text-decoration: none;
    color: var(--navy);
    transition: all .15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.cy-fiche .cy-cand-doc:hover {
    border-color: var(--gold, #a37934);
    background: var(--gold-pale, #FFFCF7);
}
.cy-fiche .cy-cand-doc i { font-size: 32px; color: var(--gold, #a37934); }
.cy-fiche .cy-cand-doc-name { font-size: 12px; font-weight: 600; }
.cy-fiche .cy-cand-doc-ext {
    font-size: 10px;
    color: #5B5F6E;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.cy-fiche .cy-cand-doc-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: #5B5F6E;
    font-style: italic;
    padding: 14px 0;
    font-size: 13px;
}

/* Decision row */
.cy-fiche .cy-cand-decision {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding-top: 14px;
    border-top: 1px solid var(--cy-border-soft, #F0EBE0);
    margin-top: 8px;
}
.cy-fiche .cy-cand-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid;
    transition: all .15s;
    text-decoration: none;
}
.cy-fiche .cy-cand-btn i { font-size: 16px; }
.cy-fiche .cy-cand-btn.is-refuse {
    background: #FFFFFF;
    border-color: #E8C9C5;
    color: #A24237;
}
.cy-fiche .cy-cand-btn.is-refuse:hover {
    background: #F8E5E2;
    border-color: #D4A39C;
}
.cy-fiche .cy-cand-btn.is-accept,
.cy-fiche .cy-cand-btn.is-accept *,
.cy-fiche .cy-cand-btn.is-accept:link,
.cy-fiche .cy-cand-btn.is-accept:visited,
.cy-fiche .cy-cand-btn.is-accept:hover,
.cy-fiche .cy-cand-btn.is-accept:active,
.cy-fiche .cy-cand-btn.is-accept i,
.cy-fiche .cy-cand-btn.is-accept span {
    color: #FFFFFF !important;
    text-decoration: none !important;
}
.cy-fiche .cy-cand-btn.is-accept {
    background: #3D7A4F;
    border-color: #3D7A4F;
}
.cy-fiche .cy-cand-btn.is-accept:hover {
    background: #2E5C3A;
    border-color: #2E5C3A;
}

/* Mobile */
@media (max-width: 700px) {
    .cy-fiche .cy-cand-grid { grid-template-columns: 1fr; }
    .cy-fiche .cy-cand-head {
        grid-template-columns: 42px 1fr auto;
        padding: 12px 14px;
    }
    .cy-fiche .cy-cand-avatar { width: 42px; height: 42px; font-size: 18px; }
    .cy-fiche .cy-cand-name { font-size: 15px; }
    .cy-fiche .cy-cand-body { padding: 12px; }
    .cy-fiche .cy-cand-decision { flex-direction: column; }
    .cy-fiche .cy-cand-btn { justify-content: center; }
}

/* =========================================================================
   ADMINISTRATION.ASPX (panel_personnel) — refonte 2026-06-11
   Sidebar verticale -> pills onglets sticky.
   Selecteurs employe (header riche) -> card en debut de contenu.
   Bandeau employe courant compact sous la card de selection.
   Reutilise les variables CSS existantes (--navy, --gold, --gold-pale).
   ========================================================================= */

/* Card de selection : grille 3 selecteurs */
.cy-fiche .cy-perso-select .cy-perso-select-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
@media (max-width: 900px) {
    .cy-fiche .cy-perso-select .cy-perso-select-grid {
        grid-template-columns: 1fr;
    }
}

/* Bandeau employe courant : avatar + nom + statut compact */
.cy-fiche .cy-emp-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--gold-pale, #FFFCF7);
    border: 1px solid var(--gold, #a37934);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
}
.cy-fiche .cy-emp-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--gold, #a37934);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 18px;
    flex-shrink: 0;
}
.cy-fiche .cy-emp-main {
    flex: 1;
    min-width: 0;
}
.cy-fiche .cy-emp-name {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 17px;
    color: var(--navy);
}
.cy-fiche .cy-emp-role {
    color: var(--navy);
    opacity: 0.7;
    font-weight: 500;
}
.cy-fiche .cy-emp-status {
    font-size: 12px;
    color: #5B5F6E;
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.cy-fiche .cy-emp-status .cy-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3D7A4F;
    display: inline-block;
    flex-shrink: 0;
}
.cy-fiche .cy-emp-status .cy-status-dot.is-out {
    background: #A24237;
}

/* Cy-section : .active garde son comportement, on assure display block */
.cy-fiche .cy-section { display: none; }
.cy-fiche .cy-section.active { display: block; }

/* Mobile : bandeau plus compact */
@media (max-width: 600px) {
    .cy-fiche .cy-emp-banner { padding: 12px; gap: 10px; }
    .cy-fiche .cy-emp-avatar { width: 42px; height: 42px; font-size: 15px; }
    .cy-fiche .cy-emp-name { font-size: 15px; }
}

/* =========================================================================
   PARAMETRAGE EXPORT PAIE — pages parametrage_export_paie.aspx +
   parametrage_export_paie_editor.aspx + split-button dans paie_admin.aspx
   ========================================================================= */

/* Header sub-titre (Paramétrage) */
.cy-fiche .cy-header .cy-header-sub {
    margin-left: auto;
    font-size: 13px;
    color: #5B5F6E;
}

/* Bandeau intro bronze */
.cy-fiche .cy-export-intro {
    background: var(--gold-pale, #FFFCF7);
    border: 1px solid var(--gold, #a37934);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
    font-size: 13px;
    color: var(--cy-text, #26221C);
}
.cy-fiche .cy-export-intro > i {
    font-size: 22px;
    color: var(--gold, #a37934);
    flex-shrink: 0;
}
.cy-fiche .cy-export-intro strong {
    color: var(--navy);
    font-weight: 600;
}

/* Section bar (titre + bouton créer) */
.cy-fiche .cy-section-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 12px;
    flex-wrap: wrap;
}
.cy-fiche .cy-section-title-h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 18px;
    color: var(--navy);
    font-weight: 600;
    margin: 0;
}
.cy-fiche .cy-btn-primary {
    background: var(--navy);
    border: 1px solid var(--navy);
    color: #FFFFFF;
    padding: 8px 14px;
    border-radius: 9px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
}
.cy-fiche .cy-btn-primary:hover {
    background: var(--gold, #a37934);
    border-color: var(--gold, #a37934);
    color: #FFFFFF;
    text-decoration: none;
}
.cy-fiche .cy-btn-primary i { font-size: 16px; }

/* Grille préréglages */
.cy-fiche .cy-presets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}
.cy-fiche .cy-preset-card {
    background: #FFFFFF;
    border: 1px solid var(--cy-border-soft, #F0EBE0);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all .15s;
    text-decoration: none;
    color: inherit;
}
.cy-fiche .cy-preset-card:hover {
    border-color: var(--gold, #a37934);
    box-shadow: 0 4px 12px rgba(0,0,0,.04);
}
.cy-fiche .cy-preset-card.is-default {
    border-color: var(--gold, #a37934);
    box-shadow: 0 0 0 1px var(--gold, #a37934);
}
.cy-fiche .cy-preset-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}
.cy-fiche .cy-preset-ico {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--gold-pale, #FFFCF7);
    color: var(--gold, #a37934);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.cy-fiche .cy-preset-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 17px;
    color: var(--navy);
    font-weight: 600;
    line-height: 1.1;
}
.cy-fiche .cy-preset-tag {
    font-size: 11px;
    color: #5B5F6E;
    margin-top: 2px;
}
.cy-fiche .cy-preset-default-chip {
    background: var(--gold, #a37934);
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-left: auto;
}
.cy-fiche .cy-preset-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: #5B5F6E;
    padding: 8px 0;
    border-top: 1px dashed var(--cy-border-soft, #F0EBE0);
}
.cy-fiche .cy-preset-meta-row {
    display: flex;
    justify-content: space-between;
}
.cy-fiche .cy-preset-meta-row span:last-child {
    color: var(--navy);
    font-weight: 600;
}
.cy-fiche .cy-preset-actions {
    display: flex;
    gap: 6px;
    margin-top: auto;
    padding-top: 6px;
    border-top: 1px solid var(--cy-border-soft, #F0EBE0);
}
.cy-fiche .cy-preset-action {
    flex: 1;
    padding: 7px 8px;
    border-radius: 8px;
    border: 1px solid rgba(15,23,42,0.14);
    background: #FFFFFF;
    color: #5B5F6E;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-family: 'Inter', sans-serif;
    text-decoration: none;
}
.cy-fiche .cy-preset-action i { font-size: 14px; }
.cy-fiche .cy-preset-action:hover {
    border-color: var(--gold, #a37934);
    color: var(--gold, #a37934);
    background: var(--gold-pale, #FFFCF7);
    text-decoration: none;
}
.cy-fiche .cy-preset-action.is-danger:hover {
    border-color: #A24237;
    color: #A24237;
    background: #F8E5E2;
}

/* Card "Créer nouveau" en pointillé */
.cy-fiche .cy-preset-card.is-new {
    border-style: dashed;
    background: transparent;
    color: #5B5F6E;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    text-align: center;
}
.cy-fiche .cy-preset-card.is-new > i {
    font-size: 36px;
    color: var(--gold, #a37934);
    margin-bottom: 8px;
}
.cy-fiche .cy-preset-card.is-new .cy-preset-title {
    color: var(--gold, #a37934);
    font-size: 15px;
}
.cy-fiche .cy-preset-card.is-new:hover {
    background: var(--gold-pale, #FFFCF7);
    border-color: var(--gold, #a37934);
}

/* ============ EDITOR PAGE — format/colonnes/preview ============ */

/* Format row (pills CSV/XLSX/XML/TXT) */
.cy-fiche .cy-format-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.cy-fiche .cy-format {
    background: #FFFFFF;
    border: 1.5px solid rgba(15,23,42,0.14);
    border-radius: 999px;
    padding: 7px 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    transition: all .15s;
    font-family: 'Inter', sans-serif;
}
.cy-fiche .cy-format i {
    font-size: 15px;
    color: #5B5F6E;
}
.cy-fiche .cy-format:hover {
    border-color: var(--gold, #a37934);
}
.cy-fiche .cy-format.is-active {
    background: var(--navy);
    border-color: var(--navy);
    color: #FFFFFF;
}
.cy-fiche .cy-format.is-active i {
    color: #FFFFFF;
}

/* CSV options */
.cy-fiche .cy-csv-opts {
    display: flex;
    gap: 14px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.cy-fiche .cy-csv-opt {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 150px;
}
.cy-fiche .cy-csv-opt label {
    font-size: 11px;
    color: #5B5F6E;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
}
.cy-fiche .cy-csv-opt select {
    background: #FFFFFF;
    border: 1px solid rgba(15,23,42,0.14);
    border-radius: 8px;
    padding: 7px 10px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
}

/* Colonnes : liste réordonnable */
.cy-fiche .cy-cols-help {
    font-size: 12px;
    color: #5B5F6E;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.cy-fiche .cy-cols-help i {
    font-size: 14px;
    color: var(--gold, #a37934);
}
.cy-fiche .cy-cols {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cy-fiche .cy-col {
    background: #FFFFFF;
    border: 1px solid rgba(15,23,42,0.14);
    border-radius: 10px;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: auto 24px 1fr 1fr;
    gap: 10px;
    align-items: center;
    transition: all .15s;
}
.cy-fiche .cy-col.is-excluded {
    opacity: .5;
    background: #FAFAFA;
}
.cy-fiche .cy-col-drag {
    color: #5B5F6E;
    cursor: grab;
    font-size: 18px;
    line-height: 1;
}
.cy-fiche .cy-col-check {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid rgba(15,23,42,0.2);
    border-radius: 5px;
    cursor: pointer;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: bold;
}
.cy-fiche .cy-col-check:checked {
    background: #3D7A4F;
    border-color: #3D7A4F;
}
.cy-fiche .cy-col-check:checked::after {
    content: "\2713";
}
.cy-fiche .cy-col-source {
    font-size: 12px;
    color: #5B5F6E;
    font-weight: 500;
}
.cy-fiche .cy-col-source .cy-col-source-label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--gold, #a37934);
    font-weight: 700;
    margin-bottom: 1px;
}
.cy-fiche .cy-col-source .cy-col-source-name {
    font-weight: 600;
    color: var(--navy);
    font-size: 13px;
}
.cy-fiche .cy-col-rename {
    background: #FFFFFF;
    border: 1px solid rgba(15,23,42,0.14);
    border-radius: 7px;
    padding: 7px 9px;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    color: var(--cy-text, #26221C);
    width: 100%;
    font-weight: 500;
}
.cy-fiche .cy-col-rename:focus {
    outline: none;
    border-color: var(--gold, #a37934);
}

/* Preview console-style */
.cy-fiche .cy-preview-head {
    font-size: 11px;
    color: var(--gold, #a37934);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
    margin-bottom: 6px;
    font-family: 'Inter', sans-serif;
}
.cy-fiche .cy-preview {
    background: var(--navy);
    color: #FFFFFF;
    border-radius: 10px;
    padding: 12px 14px;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.6;
    overflow-x: auto;
    white-space: pre;
    margin-top: 0;
}

/* Footer actions editor */
.cy-fiche .cy-editor-foot {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 8px;
    flex-wrap: wrap;
}
.cy-fiche .cy-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid;
    transition: all .15s;
    text-decoration: none;
}
.cy-fiche .cy-btn-secondary {
    background: #FFFFFF;
    border-color: rgba(15,23,42,0.14);
    color: var(--cy-text, #26221C);
}
.cy-fiche .cy-btn-secondary:hover {
    background: var(--cy-bg, #F5F2EC);
    text-decoration: none;
}
.cy-fiche .cy-editor-foot .cy-btn-primary {
    background: #3D7A4F;
    border-color: #3D7A4F;
    color: #FFFFFF;
}
.cy-fiche .cy-editor-foot .cy-btn-primary:hover {
    background: #2E5C3A;
    border-color: #2E5C3A;
}
.cy-fiche .cy-btn i {
    font-size: 16px;
}

/* ============ SPLIT BUTTON EXPORT (paie_admin.aspx) ============ */

.cy-fiche .cy-export-wrap {
    position: relative;
    display: inline-flex;
    margin-left: auto;
}
.cy-fiche .cy-export-main {
    background: var(--navy);
    border: 1px solid var(--navy);
    color: #FFFFFF;
    padding: 8px 14px;
    border-top-left-radius: 9px;
    border-bottom-left-radius: 9px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.cy-fiche .cy-export-main i { font-size: 16px; }
.cy-fiche .cy-export-main:hover {
    background: var(--gold, #a37934);
    border-color: var(--gold, #a37934);
}
.cy-fiche .cy-export-main-tag {
    opacity: .7;
    font-weight: 500;
}
.cy-fiche .cy-export-chev {
    background: var(--navy);
    border: 1px solid var(--navy);
    border-left-color: rgba(255,255,255,.2);
    color: #FFFFFF;
    padding: 8px 8px;
    border-top-right-radius: 9px;
    border-bottom-right-radius: 9px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}
.cy-fiche .cy-export-chev i { font-size: 16px; }
.cy-fiche .cy-export-chev:hover {
    background: var(--gold, #a37934);
    border-color: var(--gold, #a37934);
}

/* Popover (caché par défaut, ouvert via JS classique class toggle) */
.cy-fiche .cy-export-pop {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #FFFFFF;
    border: 1px solid rgba(15,23,42,0.14);
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 12px 32px rgba(0,0,0,.12);
    min-width: 320px;
    z-index: 10;
    display: none;
}
.cy-fiche .cy-export-pop.is-open { display: block; }
.cy-fiche .cy-export-pop-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--gold, #a37934);
    margin-bottom: 8px;
}
.cy-fiche .cy-export-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cy-fiche .cy-export-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    text-align: left;
    font-family: 'Inter', sans-serif;
    width: 100%;
    color: var(--cy-text, #26221C);
    text-decoration: none;
}
.cy-fiche .cy-export-item:hover {
    background: var(--gold-pale, #FFFCF7);
    border-color: var(--gold, #a37934);
    text-decoration: none;
}
.cy-fiche .cy-export-item.is-default {
    background: var(--gold-pale, #FFFCF7);
    border-color: var(--gold, #a37934);
}
.cy-fiche .cy-export-item-ico {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--gold-pale, #FFFCF7);
    color: var(--gold, #a37934);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.cy-fiche .cy-export-item-ico.is-active {
    background: var(--gold, #a37934);
    color: #FFFFFF;
}
.cy-fiche .cy-export-item-info {
    flex: 1;
    min-width: 0;
}
.cy-fiche .cy-export-item-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--navy);
}
.cy-fiche .cy-export-item-format {
    font-size: 11px;
    color: #5B5F6E;
}
.cy-fiche .cy-export-item-default {
    font-size: 9px;
    background: var(--gold, #a37934);
    color: #FFFFFF;
    padding: 1px 6px;
    border-radius: 999px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-left: auto;
    flex-shrink: 0;
}
.cy-fiche .cy-export-divider {
    border-top: 1px solid var(--cy-border-soft, #F0EBE0);
    margin: 10px -4px;
}
.cy-fiche .cy-export-link {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #5B5F6E;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 6px;
}
.cy-fiche .cy-export-link:hover {
    background: var(--cy-bg, #F5F2EC);
    color: var(--gold, #a37934);
    text-decoration: none;
}
.cy-fiche .cy-export-link i { font-size: 14px; }

/* Barre titre + actions (section État de paie) */
.cy-fiche .cy-paie-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.cy-fiche .cy-paie-bar-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 20px;
    color: var(--navy);
    font-weight: 600;
    margin: 0;
}

/* =========================================================================
   PANEL_GERANT — Channel manager (axe optionnel) + bouton Integration IA
   ========================================================================= */

/* Dot Channel manager : bleu turquoise distinct des autres axes */
.cy-coord-dot-channel { background: #2A8E92; }

/* Axe avec chip "En option" : visuel decale pour signaler module non actif */
.cy-coord-acc-optional .cy-coord-acc-name {
    /* Le nom reste lisible, le chip vient juste apres */
}
.cy-coord-acc-optional-chip {
    background: var(--gold-pale, #FFFCF7);
    color: var(--gold, #a37934);
    font-size: 9px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .05em;
    border: 1px solid var(--gold, #a37934);
}

/* Bouton CTA Integration IA : gradient + sparkles */
.cy-ia-cta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
    padding: 14px 18px;
    border-radius: 14px;
    background: linear-gradient(135deg, #1a2540 0%, #2A3A6B 50%, #4F46E5 100%);
    color: #FFFFFF;
    text-decoration: none;
    transition: all .2s;
    position: relative;
    overflow: hidden;
}
.cy-ia-cta::before {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: radial-gradient(circle at 80% 50%, rgba(163,121,52,.25), transparent 60%);
    pointer-events: none;
}
.cy-ia-cta:hover {
    box-shadow: 0 8px 24px rgba(79,70,229,.3);
    transform: translateY(-1px);
    text-decoration: none;
    color: #FFFFFF;
}
.cy-ia-cta > i:first-child {
    font-size: 28px;
    color: #FFD27A;
    flex-shrink: 0;
    filter: drop-shadow(0 0 8px rgba(255,210,122,.6));
    z-index: 1;
}
.cy-ia-cta-text {
    flex: 1;
    min-width: 0;
    z-index: 1;
}
.cy-ia-cta-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.1;
    color: #FFFFFF;
}
.cy-ia-cta-sub {
    font-size: 12px;
    color: rgba(255,255,255,.75);
    margin-top: 3px;
}
.cy-ia-cta-sub strong {
    color: #FFD27A;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 10px;
}
.cy-ia-cta-arrow {
    font-size: 22px;
    color: rgba(255,255,255,.7);
    flex-shrink: 0;
    transition: transform .2s;
    z-index: 1;
}
.cy-ia-cta:hover .cy-ia-cta-arrow {
    transform: translateX(4px);
    color: #FFFFFF;
}

@media (max-width: 600px) {
    .cy-ia-cta { padding: 12px 14px; gap: 10px; }
    .cy-ia-cta > i:first-child { font-size: 22px; }
    .cy-ia-cta-title { font-size: 15px; }
    .cy-ia-cta-sub { font-size: 11px; }
}

/* =========================================================================
   PAIE_ADMIN — État de paie (table moderne dense + KPI strip)
   ========================================================================= */

/* KPI strip de synthèse */
.cy-fiche .cy-kpi-row {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.cy-fiche .cy-kpi-row .cy-kpi {
    flex: 1 1 0;
    min-width: 140px;
    background: var(--gold-pale, #FFFCF7);
    border: 1px solid var(--cy-border-soft, #F0EBE0);
    border-radius: 10px;
    padding: 10px 12px;
}
.cy-fiche .cy-kpi-row .cy-kpi-label {
    font-size: 10px;
    color: #5B5F6E;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
}
.cy-fiche .cy-kpi-row .cy-kpi-value {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--navy);
    margin-top: 2px;
    line-height: 1;
}

/* Table moderne paie */
.cy-fiche .cy-paie-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--cy-border-soft, #F0EBE0);
    border-radius: 10px;
}
.cy-fiche .cy-paie-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 760px;
}
.cy-fiche .cy-paie-table thead th {
    background: var(--navy);
    color: #FFFFFF;
    text-align: left;
    padding: 10px 12px;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 2px solid var(--gold, #a37934);
}
.cy-fiche .cy-paie-table thead th.t-num,
.cy-fiche .cy-paie-table tbody td.t-num,
.cy-fiche .cy-paie-table tfoot td.t-num {
    text-align: right;
}
.cy-fiche .cy-paie-table thead th.t-center,
.cy-fiche .cy-paie-table tbody td.t-center,
.cy-fiche .cy-paie-table tfoot td.t-center {
    text-align: center;
}
.cy-fiche .cy-paie-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--cy-border-soft, #F0EBE0);
    vertical-align: middle;
}
.cy-fiche .cy-paie-table tbody tr:last-child td {
    border-bottom: none;
}
.cy-fiche .cy-paie-table tbody tr:hover {
    background: var(--gold-pale, #FFFCF7);
}

/* Cell salarié : avatar matricule + nom + matricule */
.cy-fiche .cy-paie-table .cy-emp-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 200px;
}
.cy-fiche .cy-paie-table .cy-emp-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--gold-pale, #FFFCF7);
    border: 1px solid var(--gold, #a37934);
    color: var(--gold, #a37934);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 11px;
    flex-shrink: 0;
    font-family: 'Inter', sans-serif;
}
.cy-fiche .cy-paie-table .cy-emp-name {
    font-weight: 600;
    color: var(--navy);
}
.cy-fiche .cy-paie-table .cy-emp-matricule {
    font-size: 11px;
    color: #5B5F6E;
}

/* Heures cell : valeur principale + 2 sous-valeurs (dim/fériés).
   Saisie paie : dim/fériés sont lisibles à vue (majorations) */
.cy-fiche .cy-paie-table .cy-hours-main {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 18px;
    color: var(--navy);
    text-align: right;
}
.cy-fiche .cy-paie-table .cy-hours-sub {
    font-size: 14px;
    color: var(--navy);
    text-align: right;
    margin-top: 3px;
    font-weight: 500;
    display: flex;
    justify-content: flex-end;
    gap: 14px;
}
.cy-fiche .cy-paie-table .cy-hours-sub > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.cy-fiche .cy-paie-table .cy-hours-sub i {
    font-size: 15px;
    color: var(--gold, #a37934);
}
.cy-fiche .cy-paie-table .cy-hours-sub .cy-hours-unit {
    color: #5B5F6E;
    font-size: 11px;
    font-weight: 500;
    margin-left: 1px;
}
.cy-fiche .cy-paie-table .cy-hours-sub > span.is-zero {
    color: #A8AABF;
    opacity: .5;
}
.cy-fiche .cy-paie-table .cy-hours-sub > span.is-zero i {
    color: #C8C9D5;
}

/* Frais cell */
.cy-fiche .cy-paie-table .cy-frais {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 15px;
    color: var(--navy);
    text-align: right;
}
.cy-fiche .cy-paie-table .cy-frais.is-zero {
    color: #5B5F6E;
    font-weight: 500;
}

/* Footer totaux */
.cy-fiche .cy-paie-table tfoot td {
    padding: 12px;
    background: #F5F2EC;
    border-top: 2px solid var(--gold, #a37934);
    font-weight: 700;
    color: var(--navy);
    font-size: 13px;
}
.cy-fiche .cy-paie-table tfoot td.t-num {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 16px;
    text-align: right;
}
.cy-fiche .cy-paie-table tfoot td.t-label {
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 11px;
    color: #5B5F6E;
    font-weight: 600;
}

/* Mobile : table dense */
@media (max-width: 700px) {
    .cy-fiche .cy-paie-table { font-size: 12px; }
    .cy-fiche .cy-paie-table thead th { padding: 8px 10px; font-size: 10px; }
    .cy-fiche .cy-paie-table tbody td { padding: 8px 10px; }
    .cy-fiche .cy-paie-table .cy-emp-avatar { width: 28px; height: 28px; font-size: 10px; }
}

/* Chip STC (Solde de Tout Compte) — affichée dans la colonne Statut
   du tableau État de paie quand un salarié finit son contrat le mois donné */
.cy-fiche .cy-paie-table .cy-stc {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: #F5E0DD;
    color: #A24237;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.cy-fiche .cy-paie-table .cy-stc i { font-size: 13px; }

/* =========================================================================
   PAIE_ADMIN — Section Acomptes (cards refondues)
   - GridView "acompte" rendu en mode card-list via display:flex sur tr/td
   - KPI strip réutilise cy-kpi-row déjà défini
   ========================================================================= */

/* Grid form-grid 3 colonnes (filtres) */
.cy-fiche .cy-form-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
@media (max-width: 700px) {
    .cy-fiche .cy-form-grid-3 { grid-template-columns: 1fr; }
}

/* GridView acompte stylé en cards : on déstructure les tr/td */
.cy-fiche .cy-acompte-grid {
    border-collapse: separate !important;
    border-spacing: 0 10px !important;
    width: 100%;
    background: transparent;
}
.cy-fiche .cy-acompte-grid tr {
    display: grid;
    grid-template-columns: 44px 1fr auto auto;
    gap: 14px;
    align-items: center;
    background: #FFFFFF;
    border: 1px solid var(--cy-border-soft, #F0EBE0);
    border-radius: 12px;
    padding: 14px 16px;
    transition: border-color .15s;
}
.cy-fiche .cy-acompte-grid tr:hover {
    border-color: var(--gold, #a37934);
}
.cy-fiche .cy-acompte-grid td {
    padding: 0;
    border: none;
    background: transparent;
    display: contents; /* td disparait, ses enfants prennent la grille du tr */
}

/* Avatar acompte (icône cash) */
.cy-fiche .cy-ac-ico {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--gold-pale, #FFFCF7);
    border: 1px solid var(--gold, #a37934);
    color: var(--gold, #a37934);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

/* Bloc principal : montant + métadonnées */
.cy-fiche .cy-ac-main { min-width: 0; }
.cy-fiche .cy-ac-amount {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--navy);
    line-height: 1.1;
}
.cy-fiche .cy-ac-meta {
    font-size: 12px;
    color: #5B5F6E;
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.cy-fiche .cy-ac-meta i {
    font-size: 13px;
    vertical-align: -2px;
    margin-right: 3px;
}
.cy-fiche .cy-ac-meta .cy-meta-sep { opacity: .4; }
.cy-fiche .cy-ac-employee {
    font-weight: 600;
    color: var(--navy);
    font-size: 13px;
}

/* Chip statut (En attente / Effectué) */
.cy-fiche .cy-ac-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.cy-fiche .cy-ac-status.is-pending {
    background: #FFF4E0;
    color: #B7791F;
}
.cy-fiche .cy-ac-status.is-done {
    background: #E8F2EC;
    color: #3D7A4F;
}

/* Bouton "Marquer payé" du CommandField */
.cy-fiche .cy-acompte-grid .cy-ac-btn,
.cy-fiche .cy-acompte-grid input[type="button"] {
    background: #FFFFFF;
    border: 1px solid rgba(15,23,42,0.14);
    color: var(--cy-text, #26221C);
    padding: 8px 14px;
    border-radius: 9px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}
.cy-fiche .cy-acompte-grid .cy-ac-btn:hover,
.cy-fiche .cy-acompte-grid input[type="button"]:hover {
    border-color: #3D7A4F;
    color: #3D7A4F;
    background: #E8F2EC;
}

/* RBL en mode édition (sur la ligne en cours d'édition) */
.cy-fiche .cy-acompte-grid .cy-ac-edit-rbl {
    grid-column: 1 / -1;
    background: var(--gold-pale, #FFFCF7);
    border: 1px solid var(--gold, #a37934);
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 8px;
}
.cy-fiche .cy-acompte-grid .cy-ac-edit-rbl label {
    margin-right: 18px;
    font-size: 13px;
    font-weight: 500;
    color: var(--navy);
}

/* Empty state acompte */
.cy-fiche .cy-ac-empty {
    text-align: center;
    padding: 36px 18px;
    color: #5B5F6E;
    border: 1px dashed rgba(15,23,42,0.14);
    border-radius: 12px;
    background: #FFFFFF;
}
.cy-fiche .cy-ac-empty > i {
    font-size: 36px;
    color: rgba(15,23,42,0.18);
    display: block;
    margin-bottom: 8px;
}
.cy-fiche .cy-ac-empty-title {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    color: var(--navy);
    font-size: 16px;
    margin-bottom: 3px;
}

/* Card 3 : Form-row pour saisie (Employé / Montant / Date / Mode + bouton) */
.cy-fiche .cy-form-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr auto;
    gap: 12px;
    align-items: flex-end;
}
@media (max-width: 900px) {
    .cy-fiche .cy-form-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .cy-fiche .cy-form-row { grid-template-columns: 1fr; }
}
.cy-fiche .cy-add-btn {
    background: var(--navy);
    border: 1px solid var(--navy);
    color: #FFFFFF;
    padding: 9px 18px;
    border-radius: 9px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    height: 38px;
}
.cy-fiche .cy-add-btn:hover {
    background: var(--gold, #a37934);
    border-color: var(--gold, #a37934);
}

/* Mobile : card acompte en 2 lignes */
@media (max-width: 700px) {
    .cy-fiche .cy-acompte-grid tr {
        grid-template-columns: 44px 1fr;
        gap: 10px;
        padding: 12px;
    }
    .cy-fiche .cy-ac-status,
    .cy-fiche .cy-acompte-grid .cy-ac-btn,
    .cy-fiche .cy-acompte-grid input[type="button"] {
        grid-column: 1 / -1;
        justify-self: flex-end;
    }
}

/* =========================================================================
   PAIE_ADMIN — Fixes post-test (12/06/2026)
   - Empty row du GridView acompte : ne pas heriter de display:grid du tr normal
   - Force cy-card-title visible (conflit avec Style.css legacy possible)
   - Force cy-add-btn navy plein (Style.css legacy peut surcharger les btn submit)
   ========================================================================= */

/* Empty data row : casse le display:grid/contents pour avoir un block normal */
.cy-fiche .cy-acompte-grid tr.cy-ac-empty-row {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}
.cy-fiche .cy-acompte-grid tr.cy-ac-empty-row > td {
    display: block !important;
    padding: 0 !important;
}

/* Force visibilité du cy-card-title (legacy h2 peut être masqué/coloré blanc) */
.cy-fiche .cy-card > .cy-card-title,
.cy-fiche .cy-card > h2.cy-card-title {
    display: flex !important;
    align-items: center;
    gap: 10px;
    font-family: 'Fraunces', Georgia, serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--navy) !important;
    margin: 0 0 14px 0 !important;
    text-decoration: none !important;
}
.cy-fiche .cy-card > .cy-card-title > i,
.cy-fiche .cy-card > h2.cy-card-title > i {
    font-size: 22px !important;
    color: var(--gold, #a37934) !important;
}

/* Force cy-add-btn navy plein (input[type=submit] hérite parfois du legacy) */
.cy-fiche .cy-add-btn,
.cy-fiche input.cy-add-btn[type="submit"],
.cy-fiche input.cy-add-btn[type="button"] {
    background: var(--navy) !important;
    border: 1px solid var(--navy) !important;
    color: #FFFFFF !important;
    padding: 9px 18px !important;
    border-radius: 9px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    height: 38px !important;
}
.cy-fiche .cy-add-btn:hover,
.cy-fiche input.cy-add-btn[type="submit"]:hover,
.cy-fiche input.cy-add-btn[type="button"]:hover {
    background: var(--gold, #a37934) !important;
    border-color: var(--gold, #a37934) !important;
    color: #FFFFFF !important;
}

/* ============================================================
   NDF Direction (paie_admin > Notes de frais)
   Vue paie : statut lecture seule + "Marquer remboursé"
   ============================================================ */

/* Avatars icône NDF : km (bleu) / réel (gold) */
.cy-fiche .cy-acompte-grid .cy-ac-ico.cy-ndf-ico-km {
    background: #E9F0F8;
    color: #2D5A8B;
}
.cy-fiche .cy-acompte-grid .cy-ac-ico.cy-ndf-ico-real {
    background: #FBF3E3;
    color: var(--gold, #a37934);
}

/* Ligne de détail (nature + destination + km + motif) */
.cy-fiche .cy-acompte-grid .cy-ndf-detail {
    font-size: 12px;
    color: #5B5F6E;
    margin-top: 3px;
    line-height: 1.45;
}
.cy-fiche .cy-acompte-grid .cy-ndf-detail strong {
    color: #26221C;
    font-weight: 600;
}

/* Nouveaux statuts NDF : refusée (rouge) et remboursée (vert plein) */
.cy-fiche .cy-ac-status.is-rejected {
    background: #FCE7E7;
    color: #B23636;
}
.cy-fiche .cy-ac-status.is-reimbursed {
    background: #3D7A4F;
    color: #FFFFFF;
}

/* Bouton "Marquer remboursé" : action Direction */
.cy-fiche .cy-acompte-grid .cy-ndf-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #FFFFFF;
    border: 1px solid rgba(15,23,42,0.14);
    color: var(--cy-text, #26221C);
    padding: 8px 14px;
    border-radius: 9px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.cy-fiche .cy-acompte-grid .cy-ndf-btn:hover {
    background: #F8F5EE;
    border-color: var(--gold, #a37934);
    color: var(--gold, #a37934);
}
.cy-fiche .cy-acompte-grid .cy-ndf-btn.is-validate {
    background: #3D7A4F;
    border-color: #3D7A4F;
    color: #FFFFFF;
}
.cy-fiche .cy-acompte-grid .cy-ndf-btn.is-validate:hover {
    background: #2F5F3D;
    border-color: #2F5F3D;
}
.cy-fiche .cy-acompte-grid .cy-ndf-btn i {
    font-size: 14px;
}

/* Placeholder "—" affiché quand pas d'action disponible (transmise ≠ 1) */
.cy-fiche .cy-acompte-grid .cy-ndf-no-action {
    display: inline-block;
    color: #C5C5CB;
    font-weight: 600;
    text-align: center;
    min-width: 30px;
}

/* ============================================================
   ARCHIVES Direction (paie_admin > Archives)
   Sous-onglets pills + cards documents PDF (Feuilles de paie / Attestations PE)
   ============================================================ */

/* Sous-onglets pills à l'intérieur d'une section */
.cy-fiche .cy-subtabs {
    display: flex;
    gap: 8px;
    padding: 6px;
    background: #F1EBDC;
    border-radius: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.cy-fiche .cy-subtab-btn {
    flex: 1 1 auto;
    background: transparent;
    border: none;
    padding: 9px 16px;
    border-radius: 9px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #5B5F6E;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all .15s;
    white-space: nowrap;
}
.cy-fiche .cy-subtab-btn:hover {
    color: #26221C;
    background: rgba(255, 255, 255, 0.4);
}
.cy-fiche .cy-subtab-btn.is-active {
    background: #FFFFFF;
    color: #26221C;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}
.cy-fiche .cy-subtab-btn .ti { font-size: 15px; }

/* Avatars icône archive : PDF (rouge) / Attestation (gold) */
.cy-fiche .cy-acompte-grid .cy-ac-ico.cy-arch-ico-pdf {
    background: #FCE7E7;
    color: #B23636;
}
.cy-fiche .cy-acompte-grid .cy-ac-ico.cy-arch-ico-att {
    background: #FBF3E3;
    color: var(--gold, #a37934);
}

/* Ligne secondaire (contrat / heures / brut total) - attestations PE */
.cy-fiche .cy-acompte-grid .cy-arch-meta-sec {
    font-size: 12px;
    color: #5B5F6E;
    margin-top: 4px;
    line-height: 1.5;
}
.cy-fiche .cy-acompte-grid .cy-arch-meta-sec strong {
    color: #26221C;
    font-weight: 600;
}

/* Conteneur 4 boutons icône en fin de ligne (Visualiser / Télécharger / Supprimer / Transférer) */
.cy-fiche .cy-acompte-grid .cy-arch-actions {
    display: inline-flex;
    gap: 6px;
}
.cy-fiche .cy-acompte-grid .cy-arch-icon-btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: 9px;
    color: #5B5F6E;
    cursor: pointer;
    transition: all .15s;
    padding: 0;
}
.cy-fiche .cy-acompte-grid .cy-arch-icon-btn:hover {
    color: var(--gold, #a37934);
    border-color: var(--gold, #a37934);
    background: #F8F5EE;
}
.cy-fiche .cy-acompte-grid .cy-arch-icon-btn.is-danger:hover {
    color: #B23636;
    border-color: #B23636;
    background: #FCE7E7;
}
.cy-fiche .cy-acompte-grid .cy-arch-icon-btn.is-transfer {
    color: #2D3E5F;
    border-color: #C7D0DD;
}
.cy-fiche .cy-acompte-grid .cy-arch-icon-btn.is-transfer:hover {
    color: #FFFFFF;
    background: #2D3E5F;
    border-color: #2D3E5F;
}
.cy-fiche .cy-acompte-grid .cy-arch-icon-btn .ti { font-size: 16px; }

/* Bandeau "Manquantes pour la période" - alerte orange */
.cy-fiche .cy-arch-missing-list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding: 12px 14px;
    background: #FFF4E0;
    border-left: 3px solid #B7791F;
    border-radius: 6px;
    align-items: center;
}
.cy-fiche .cy-arch-missing-list-title {
    font-size: 12px;
    color: #B7791F;
    font-weight: 600;
    margin-right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.cy-fiche .cy-arch-missing-chip {
    background: #FFFFFF;
    border: 1px solid #F1D7A3;
    color: #26221C;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
}

/* HyperLink "Consulter" fichier déjà archivé (legacy, conservé pour compat) */
.cy-fiche .cy-arch-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--gold, #a37934);
    font-weight: 600;
    text-decoration: none;
    padding: 8px 0;
    font-size: 13px;
}
.cy-fiche .cy-arch-link:hover {
    text-decoration: underline;
    color: #8a6320;
}
.cy-fiche .cy-arch-link:empty,
.cy-fiche .cy-arch-link[href=""] {
    color: #C5C5CB;
    pointer-events: none;
}

/* ============================================================
   CARD "Déposer une feuille de paie" — restyling 2026-06-14
   ============================================================ */

/* Grid responsive pour la ligne 1 (Type / Salarié / Période) */
.cy-fiche .cy-arch-card .cy-arch-form-row {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1.4fr;
    gap: 18px;
    margin-bottom: 18px;
}
@media (max-width: 900px) {
    .cy-fiche .cy-arch-card .cy-arch-form-row {
        grid-template-columns: 1fr;
    }
}

/* Sous-grid Mois + Année dans le champ Période */
.cy-fiche .cy-arch-card .cy-arch-period-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 8px;
}

/* Toggle binaire pour type_salarie : pas de margin-top du label */
.cy-fiche .cy-arch-card .cy-arch-field-toggle .cy-toggle-binary {
    margin-top: 0;
}

/* Chip "Bulletin déjà archivé" : visible uniquement si HyperLink a un href non vide */
.cy-fiche .cy-arch-existing-chip {
    display: none; /* caché par défaut */
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    margin-bottom: 18px;
    background: #E8F2EC;
    border: 1px solid #C5DCC9;
    border-left: 4px solid #3D7A4F;
    border-radius: 8px;
    text-decoration: none;
    color: #26221C;
    cursor: pointer;
    transition: all .15s;
}
.cy-fiche .cy-arch-existing-chip[href]:not([href=""]):not([href="#"]) {
    display: flex; /* affiché si href non vide */
}
.cy-fiche .cy-arch-existing-chip:hover {
    background: #DDEBE0;
    border-color: #3D7A4F;
}
.cy-fiche .cy-arch-existing-chip .cy-arch-existing-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border-radius: 50%;
    color: #B23636;
    font-size: 20px;
    flex-shrink: 0;
}
.cy-fiche .cy-arch-existing-chip .cy-arch-existing-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cy-fiche .cy-arch-existing-chip .cy-arch-existing-text strong {
    font-size: 13px;
    color: #2F5F3D;
    font-weight: 600;
}
.cy-fiche .cy-arch-existing-chip .cy-arch-existing-hint {
    font-size: 11px;
    color: #5B5F6E;
}
.cy-fiche .cy-arch-existing-chip .cy-arch-existing-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    background: #FFFFFF;
    border: 1px solid #C5DCC9;
    border-radius: 7px;
    color: #2F5F3D;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}
.cy-fiche .cy-arch-existing-chip:hover .cy-arch-existing-action {
    background: #3D7A4F;
    color: #FFFFFF;
    border-color: #3D7A4F;
}

/* Zone drop visuelle autour du FileUpload */
.cy-fiche .cy-arch-card .cy-arch-drop-wrap {
    border: 2px dashed #D8DDE5;
    border-radius: 10px;
    padding: 24px 20px;
    text-align: center;
    background: #FAF7F0;
    transition: all .15s;
    margin-bottom: 18px;
}
.cy-fiche .cy-arch-card .cy-arch-drop-wrap:hover {
    border-color: var(--gold, #a37934);
    background: #F8F5EE;
}
.cy-fiche .cy-arch-card .cy-arch-drop-icon {
    font-size: 32px;
    color: var(--gold, #a37934);
    line-height: 1;
    margin-bottom: 8px;
}
.cy-fiche .cy-arch-card .cy-arch-drop-text {
    font-size: 14px;
    font-weight: 600;
    color: #26221C;
    margin-bottom: 4px;
}
.cy-fiche .cy-arch-card .cy-arch-drop-hint {
    font-size: 12px;
    color: #5B5F6E;
    margin-bottom: 14px;
}
.cy-fiche .cy-arch-card .cy-arch-drop-fileupload {
    display: inline-block;
    background: #FFFFFF;
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: 8px;
    padding: 6px 10px;
}
.cy-fiche .cy-arch-card .cy-arch-drop-fileupload input[type="file"] {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #26221C;
}

/* Ligne d'actions (bouton Enregistrer aligné droite) */
.cy-fiche .cy-arch-card .cy-arch-card-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 8px;
    border-top: 1px solid #F1EBDC;
}

/* ============================================================
   Modale PDF (cy-pdf-modal)
   Overlay sombre + container blanc avec iframe + boutons header
   ============================================================ */
.cy-pdf-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    animation: cyPdfFadeIn .15s ease-out;
}
.cy-pdf-modal[hidden] { display: none; }
@keyframes cyPdfFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.cy-pdf-modal-inner {
    background: #FFFFFF;
    border-radius: 14px;
    width: 100%;
    max-width: 1100px;
    height: 100%;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    animation: cyPdfSlideUp .2s ease-out;
}
@keyframes cyPdfSlideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.cy-pdf-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: #FAF7F0;
    border-bottom: 1px solid #F1EBDC;
    gap: 12px;
}
.cy-pdf-modal-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #26221C;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.cy-pdf-modal-title .ti {
    font-size: 20px;
    color: #B23636;
    flex-shrink: 0;
}
.cy-pdf-modal-title #cy-pdf-modal-filename {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cy-pdf-modal-actions {
    display: inline-flex;
    gap: 6px;
    flex-shrink: 0;
}
.cy-pdf-modal-btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 8px;
    color: #5B5F6E;
    cursor: pointer;
    text-decoration: none;
    transition: all .15s;
}
.cy-pdf-modal-btn:hover {
    color: var(--gold, #a37934);
    border-color: var(--gold, #a37934);
    background: #F8F5EE;
}
.cy-pdf-modal-btn.cy-pdf-modal-close:hover {
    color: #FFFFFF;
    background: #B23636;
    border-color: #B23636;
}
.cy-pdf-modal-btn .ti { font-size: 17px; }
.cy-pdf-modal-iframe {
    flex: 1;
    width: 100%;
    border: 0;
    background: #F1EBDC;
}

/* ============================================================
   REGISTRE DU PERSONNEL (Direction · Inspection du travail)
   Tableau scrollable avec sticky header + sticky 2e col (Nom)
   ============================================================ */

/* KPI strip (5 chips) */
.cy-fiche .cy-reg-kpis {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}
@media (max-width: 900px) {
    .cy-fiche .cy-reg-kpis { grid-template-columns: repeat(2, 1fr); }
}
.cy-fiche .cy-reg-kpi {
    background: #FAFAF7;
    border: 1px solid #F1EBDC;
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cy-fiche .cy-reg-kpi-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #5B5F6E;
    font-weight: 600;
}
.cy-fiche .cy-reg-kpi-value {
    font-family: 'Fraunces', serif;
    font-size: 26px;
    font-weight: 600;
    color: #26221C;
    line-height: 1.1;
}
.cy-fiche .cy-reg-kpi-value .cy-reg-kpi-sub {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #5B5F6E;
    margin-left: 4px;
}

/* Toolbar registre : Recherche / Statut / Type contrat / Boutons */
.cy-fiche .cy-reg-toolbar {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr auto;
    gap: 14px;
    align-items: end;
}
@media (max-width: 1000px) {
    .cy-fiche .cy-reg-toolbar { grid-template-columns: 1fr 1fr; }
}

/* Groupe boutons d'actions (Imprimer / Exporter / Transmettre) */
.cy-fiche .cy-reg-actions-grp {
    display: inline-flex;
    gap: 8px;
    align-items: end;
}
.cy-fiche .cy-reg-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    background: #FFFFFF;
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: 9px;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: #26221C;
    cursor: pointer;
    transition: all .15s;
    text-decoration: none;
    height: 38px;
}
.cy-fiche .cy-reg-action-btn:hover {
    border-color: var(--gold, #a37934);
    color: var(--gold, #a37934);
    background: #F8F5EE;
}
.cy-fiche .cy-reg-action-btn.is-primary {
    background: #2D3E5F;
    color: #FFFFFF;
    border-color: #2D3E5F;
}
.cy-fiche .cy-reg-action-btn.is-primary:hover {
    background: #1F2D45;
    border-color: #1F2D45;
    color: #FFFFFF;
}
.cy-fiche .cy-reg-action-btn .ti { font-size: 16px; }

/* Wrapper scrollable autour du tableau */
.cy-fiche .cy-reg-wrap {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    overflow: auto;
    max-height: calc(100vh - 360px);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -8px rgba(15, 23, 42, .10);
}

/* Le GridView est rendu en <table> avec CssClass="cy-reg-table" */
.cy-fiche .cy-reg-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    font-family: 'Inter', sans-serif;
    color: #26221C;
}
.cy-fiche .cy-reg-table tr > th {
    background: #FBF6E8;
    color: #26221C;
    font-weight: 600;
    text-align: left;
    padding: 11px 10px;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid #E5E7EB;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 2;
}
.cy-fiche .cy-reg-table tr > th a {
    color: #26221C !important;
    text-decoration: none !important;
}
.cy-fiche .cy-reg-table tr > th a:hover {
    color: var(--gold, #a37934) !important;
}
.cy-fiche .cy-reg-table tr > td {
    padding: 9px 10px;
    border-bottom: 1px solid #F1EBDC;
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    color: #26221C;
}
.cy-fiche .cy-reg-table tbody tr:hover > td { background: #FAFAF7; }

/* Cellule N° matricule en mono */
.cy-fiche .cy-reg-table tr > td.cy-reg-num {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    color: #5B5F6E;
    font-size: 11.5px;
    text-align: center;
    max-width: 50px;
}

/* Sticky 2e colonne (Nom prenom) au scroll horizontal */
.cy-fiche .cy-reg-table tr > th:nth-child(2),
.cy-fiche .cy-reg-table tr > td:nth-child(2) {
    position: sticky;
    left: 0;
    background: #FFFFFF;
    z-index: 1;
    border-right: 1px solid #E5E7EB;
    font-weight: 600;
    max-width: 160px;
    white-space: normal;
    line-height: 1.25;
}
.cy-fiche .cy-reg-table tr > th:nth-child(2) {
    background: #FBF6E8;
    z-index: 3;
}
.cy-fiche .cy-reg-table tbody tr:hover > td:nth-child(2) {
    background: #FAFAF7;
}

/* Centrage / alignement droite via ItemStyle-CssClass */
.cy-fiche .cy-reg-table .cy-reg-cell-c { text-align: center; }
.cy-fiche .cy-reg-table .cy-reg-cell-r { text-align: right; }

/* Chips contrat (CDI/CDD/Stage) + statut (Actif/Sorti) */
.cy-fiche .cy-reg-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.cy-fiche .cy-reg-chip.is-actif {
    background: #E8F2EC;
    color: #2F5F3D;
}
.cy-fiche .cy-reg-chip.is-sorti {
    background: #F1F0EC;
    color: #5B5F6E;
}
.cy-fiche .cy-reg-chip.is-cdi {
    background: #FBF3E3;
    color: #8a6e2f;
}
.cy-fiche .cy-reg-chip.is-cdd {
    background: #FCE7E7;
    color: #B23636;
}
.cy-fiche .cy-reg-chip.is-stage {
    background: #E9F0F8;
    color: #2D5A8B;
}

/* Impression : retire toolbar/brand-bar/header/KPIs pour ne garder que le tableau */
@media print {
    .cy-fiche .cy-brand-bar,
    .cy-fiche .cy-header,
    .cy-fiche .cy-pills-tabs-wrap,
    .cy-fiche .cy-reg-toolbar,
    .cy-fiche .cy-reg-kpis { display: none !important; }
    .cy-fiche .cy-card:has(.cy-reg-toolbar) { display: none !important; }
    .cy-fiche .cy-reg-wrap {
        max-height: none;
        box-shadow: none;
        border: none;
    }
    .cy-fiche .cy-reg-table tr > td {
        white-space: normal;
        max-width: none;
    }
}

/* ============================================================
   TARIFS (administration.aspx > panel_tarif)
   Pills 3-way Domaine + tableau tarifs avec ancien->nouveau
   ============================================================ */

/* Sections : show only the active one (compat avec JS cyTarifSetTab).
   Scope sur .cy-tar-panel uniquement pour ne pas casser les autres
   panels de administration.aspx qui utilisent aussi .cy-section. */
.cy-fiche.cy-tar-panel .cy-section { display: none; }
.cy-fiche.cy-tar-panel .cy-section.active { display: block; }

/* Selecteur Domaine : pills compactes 3-way SAP/Conciergerie/Entreprise */
.cy-fiche .cy-tar-domain {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: #F1EBDC;
    border-radius: 10px;
    align-items: center;
}
.cy-fiche .cy-tar-domain-btn {
    background: transparent;
    border: none;
    padding: 7px 14px;
    border-radius: 7px;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: #5B5F6E;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all .15s;
}
.cy-fiche .cy-tar-domain-btn:hover { color: #26221C; background: rgba(255, 255, 255, 0.5); }
.cy-fiche .cy-tar-domain-btn.is-active {
    background: #FFFFFF;
    color: #26221C;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}
.cy-fiche .cy-tar-domain-btn .ti { font-size: 14px; }

/* KPI strip Tarifs */
.cy-fiche .cy-tar-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}
@media (max-width: 900px) { .cy-fiche .cy-tar-kpis { grid-template-columns: repeat(2, 1fr); } }
.cy-fiche .cy-tar-kpi {
    background: #FAFAF7;
    border: 1px solid #F1EBDC;
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cy-fiche .cy-tar-kpi-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #5B5F6E;
    font-weight: 600;
}
.cy-fiche .cy-tar-kpi-value {
    font-family: 'Fraunces', serif;
    font-size: 26px;
    font-weight: 600;
    color: #26221C;
    line-height: 1.1;
}

/* Wrapper et tableau tarifs (sticky header) */
.cy-fiche .cy-tar-wrap {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    overflow: auto;
    max-height: calc(100vh - 420px);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -8px rgba(15, 23, 42, .10);
}
.cy-fiche .cy-tar-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: #26221C;
    font-family: 'Inter', sans-serif;
}
.cy-fiche .cy-tar-table tr > th {
    background: #FBF6E8;
    color: #26221C;
    font-weight: 600;
    text-align: left;
    padding: 11px 12px;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid #E5E7EB;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}
.cy-fiche .cy-tar-table tr > th a {
    color: #26221C !important;
    text-decoration: none !important;
}
.cy-fiche .cy-tar-table tr > th a:hover {
    color: var(--gold, #a37934) !important;
}
.cy-fiche .cy-tar-table tr > td {
    padding: 10px 12px;
    border-bottom: 1px solid #F1EBDC;
    vertical-align: middle;
    color: #26221C;
}
.cy-fiche .cy-tar-table tbody tr:hover > td { background: #FAFAF7; }
.cy-fiche .cy-tar-table .cy-tar-cell-c { text-align: center; }
.cy-fiche .cy-tar-table .cy-tar-cell-r { text-align: right; }

/* Liens "Supprimer" generes par CommandField : style en bouton icone */
.cy-fiche .cy-tar-table a[href*="Delete"],
.cy-fiche .cy-tar-table a[href*="$ctl"] {
    color: #5B5F6E !important;
    font-weight: 600;
    text-decoration: none !important;
    transition: color .15s;
}
.cy-fiche .cy-tar-table a[href*="Delete"]:hover,
.cy-fiche .cy-tar-table a[href*="$ctl"]:hover {
    color: #B23636 !important;
}

/* Cellules prix : ancien grise + barre / nouveau gold gras (a appliquer via TemplateField si refactor V2) */
.cy-fiche .cy-tar-price-old {
    color: #9CA3AF;
    text-decoration: line-through;
    font-family: ui-monospace, 'JetBrains Mono', monospace;
}
.cy-fiche .cy-tar-price-new {
    color: var(--gold, #a37934);
    font-weight: 700;
    font-family: ui-monospace, 'JetBrains Mono', monospace;
}

/* Chip unite (heure / forfait / unite / km) */
.cy-fiche .cy-tar-unite {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 6px;
    background: #F1EBDC;
    color: #5B5F6E;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* Bandeau alerte "prestations sans tarif" */
.cy-fiche .cy-tar-warn-strip {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    background: #FFF4E0;
    border-left: 3px solid #B7791F;
    border-radius: 8px;
    margin-bottom: 18px;
}
.cy-fiche .cy-tar-warn-strip > .ti { font-size: 20px; color: #B7791F; flex-shrink: 0; }
.cy-fiche .cy-tar-warn-strip-title {
    font-size: 13px;
    color: #B7791F;
    font-weight: 700;
    margin-bottom: 2px;
}
.cy-fiche .cy-tar-warn-strip-sub {
    font-size: 12px;
    color: #26221C;
    line-height: 1.5;
}

/* Form Ajouter : grid responsive */
.cy-fiche .cy-tar-add-grid {
    display: grid;
    grid-template-columns: 1.5fr 1.8fr 1fr 1fr 1.1fr;
    gap: 14px;
    align-items: end;
}
@media (max-width: 1100px) {
    .cy-fiche .cy-tar-add-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Habillage minimal des cy-card internes (titres h2 legacy → mises en forme cy-card-title) */
.cy-fiche .cy-section .cy-card h2 {
    font-family: 'Fraunces', serif;
    font-size: 18px;
    font-weight: 600;
    color: #26221C;
    margin: 0 0 12px 0;
}

/* Bouton "Supprimer" (icone poubelle) du GridView Tarifs : style chip rouge */
.cy-fiche .cy-tar-table .cy-tar-del-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #FFFFFF;
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: 8px;
    color: #5B5F6E !important;
    cursor: pointer;
    transition: all .15s;
    text-decoration: none !important;
}
.cy-fiche .cy-tar-table .cy-tar-del-btn:hover {
    color: #B23636 !important;
    border-color: #B23636;
    background: #FCE7E7;
}
.cy-fiche .cy-tar-table .cy-tar-del-btn .ti { font-size: 16px; }

/* Message erreur "Un tarif existe déjà" */
.cy-fiche .cy-tar-msg-err {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #FCE7E7;
    color: #B23636;
    border: 1px solid #F2B5B5;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

/* Form ajout : labels uppercase + champs cy-field harmonises taille */
.cy-fiche .cy-tar-add-grid .cy-field label {
    font-size: 10.5px;
    font-weight: 600;
    color: #5B5F6E;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 4px;
}
.cy-fiche .cy-tar-add-grid .cy-field select,
.cy-fiche .cy-tar-add-grid .cy-field input[type="text"],
.cy-fiche .cy-tar-add-grid .cy-field input[type="date"],
.cy-fiche .cy-tar-add-grid .cy-field input:not([type]) {
    height: 38px;
    padding: 8px 10px;
    border: 1px solid #D8DDE5;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #26221C;
    background: #FFFFFF;
    width: 100%;
}
.cy-fiche .cy-tar-add-grid .cy-field select:focus,
.cy-fiche .cy-tar-add-grid .cy-field input:focus {
    outline: none;
    border-color: var(--gold, #a37934);
    box-shadow: 0 0 0 3px rgba(163, 121, 52, 0.15);
}

/* Empty state : message "tout est OK" affiche par EmptyDataTemplate du GridView */
.cy-fiche .cy-tar-empty {
    text-align: center;
    padding: 36px 24px;
    background: #FFFFFF;
}
.cy-fiche .cy-tar-empty-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #E8F2EC;
    color: #2F5F3D;
    border-radius: 50%;
    font-size: 30px;
}
.cy-fiche .cy-tar-empty-title {
    font-family: 'Fraunces', serif;
    font-size: 18px;
    font-weight: 600;
    color: #26221C;
    margin-bottom: 6px;
}
.cy-fiche .cy-tar-empty-sub {
    font-size: 13px;
    color: #5B5F6E;
    max-width: 480px;
    margin: 0 auto;
    line-height: 1.5;
}

/* ============================================================
   FACTURATION — Card Filtres
   Mode toggle (RBL) + 4 dropdowns Mois/Annee/Site/Client sur la meme ligne
   ============================================================ */

/* Ligne 4 colonnes alignees : Mois | Annee | Site | Client (mode traitement) */
.cy-fiche .cy-fact-traitement-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    align-items: end;
}
@media (max-width: 900px) {
    .cy-fiche .cy-fact-traitement-row { grid-template-columns: repeat(2, 1fr); }
}

/* Blocs Consultation (client / site) : visible par defaut, .vb prod pilote la dropdown.
   Le label HTML reste affiche meme si la dropdown est cachee (Visible=False cote .NET).
   Pour reduire l'effet visuel, le bloc se compresse quand pas de dropdown. */
.cy-fiche .cy-fact-consultation-block {
    margin-top: 12px;
    max-width: 520px;
}

/* Pills 3-way Mode (Traitement par mois / Consultation par client / Consultation par site)
   reuse du pattern cy-tar-domain (administration.aspx) mais avec class dediee. */
.cy-fiche .cy-fact-mode {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: #F1EBDC;
    border-radius: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.cy-fiche .cy-fact-mode-btn {
    background: transparent;
    border: none;
    padding: 7px 14px;
    border-radius: 7px;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: #5B5F6E;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all .15s;
    white-space: nowrap;
}
.cy-fiche .cy-fact-mode-btn:hover { color: #26221C; background: rgba(255, 255, 255, 0.5); }
.cy-fiche .cy-fact-mode-btn.is-active {
    background: #FFFFFF;
    color: #26221C;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}
.cy-fiche .cy-fact-mode-btn .ti { font-size: 14px; }