/* ==========================================================================
   POC ESPACE PHOTO — Layout & composants
   Calé sur le back-office réel (businessclub.e-systemes.fr) :
   header 125px / h1 40px w300 · rail 111px / pastilles 70×70 · menu 285px
   en gris #999 w300 · tableaux à en-tête navy et lignes alternées #E7E7E7 ·
   boutons or #CABFA6, radius 3px, line-height 40px.
   ========================================================================== */

*, *::before, *::after { box-sizing : border-box; }

html { height : 100%; }

body {
    margin           : 0;
    height           : 100%;
    overflow         : hidden;

    background-color : var(--bg-surface);
    color            : var(--text-strong);
    font-family      : var(--font-body);
    font-size        : var(--font-size-base);
    line-height      : 1.4;

    transition       : background-color var(--speed) var(--ease), color var(--speed) var(--ease);
}

h1, h2, h3, h4 {
    margin      : 0;
    color       : var(--text-strong);
    font-weight : 600;
    line-height : 1.2;
}

a { color : inherit; text-decoration : none; }

img { max-width : 100%; }

::selection { background : var(--accent); color : var(--accent-contrast); }

:focus-visible { outline : 2px solid var(--da-info); outline-offset : 2px; }

.scroll-skin { scrollbar-width : thin; scrollbar-color : var(--border-strong) transparent; }
.scroll-skin::-webkit-scrollbar { width : 8px; height : 8px; }
.scroll-skin::-webkit-scrollbar-thumb { background : var(--border-strong); border-radius : var(--radius-pill); }
.scroll-skin::-webkit-scrollbar-track { background : transparent; }

/* ==========================================================================
   Boutons — mesurés sur le BO : #CABFA6, 16px/600, radius 3px, hauteur 42px
   ========================================================================== */
.btn {
    display          : inline-flex;
    align-items      : center;
    justify-content  : center;
    gap              : 8px;

    height           : 42px;
    padding          : 0 var(--button-padding-x);
    min-width        : fit-content;

    border           : 1px solid var(--accent);
    border-radius    : var(--radius-xs);

    background-color : var(--accent);
    color            : var(--accent-contrast);
    font-family      : var(--font-body);
    font-size        : var(--font-size-base);
    font-weight      : 600;
    line-height      : 40px;
    white-space      : nowrap;
    cursor           : pointer;

    transition       : background-color var(--speed) var(--ease),
                       color var(--speed) var(--ease),
                       border-color var(--speed) var(--ease);
}

/* DA class-button.scss : au survol le bouton s'inverse en navy/or */
.btn:hover { background-color : var(--da-primary); color : var(--accent); border-color : var(--da-primary); }
[data-theme="dark"] .btn:hover { background-color : var(--bg-chip); border-color : var(--bg-chip); }

.btn[disabled], .btn[aria-disabled="true"] { opacity : .45; pointer-events : none; }

.btn-reverse { background-color : var(--da-primary); color : var(--accent); border-color : var(--da-primary); }
.btn-reverse:hover { background-color : var(--accent); color : var(--accent-contrast); border-color : var(--accent); }
[data-theme="dark"] .btn-reverse { background-color : var(--bg-chip); border-color : var(--bg-chip); color : var(--accent); }

.btn-ghost {
    background-color : transparent;
    border-color     : var(--da-primary);
    color            : var(--da-primary);
}
.btn-ghost:hover { background-color : var(--da-primary); color : var(--accent); border-color : var(--da-primary); }
[data-theme="dark"] .btn-ghost { border-color : var(--accent); color : var(--accent); }
[data-theme="dark"] .btn-ghost:hover { background-color : var(--accent); color : var(--accent-contrast); }

.btn-validate { background-color : var(--da-valid); border-color : var(--da-valid); color : #143017; }
.btn-validate:hover { background-color : var(--da-primary); border-color : var(--da-primary); color : var(--da-valid); }

.btn-alert { background-color : var(--da-alert); border-color : var(--da-alert); color : #FFF; }
.btn-alert:hover { background-color : var(--da-primary); border-color : var(--da-primary); color : var(--da-alert); }

.btn-agency { background-color : var(--agency); border-color : var(--agency); color : #FFF; }
.btn-agency:hover { background-color : var(--da-primary); border-color : var(--da-primary); color : #FFF; }

.btn-upper { text-transform : uppercase; font-weight : 400; border-radius : var(--radius-sm); }

/* .btn impose var(--font-body) ; à spécificité égale et app.css chargé après
   tokens.css, il l'emporterait sur la police d'icônes. */
.btn[class*="icon-"] { font-family : "business-club-icon"; }

.btn-sm { height : 30px; line-height : 28px; padding : 0 10px; font-size : .85rem; }
.btn-icon { width : 42px; padding : 0; }
.btn-sm.btn-icon { width : 30px; }
.btn-block { width : 100%; }

/* Boutons d'action de tableau — mesurés sur le BO : .btn-mini 48×36 */
.btn-mini {
    display          : inline-grid;
    place-items      : center;
    width            : 48px;
    height           : 36px;
    margin           : 0 4px 0 0;
    padding          : 0;
    border           : none;
    border-radius    : var(--radius-xs);
    background-color : var(--border-soft);
    color            : var(--text-strong);
    font-family      : "business-club-icon";
    font-size        : 1rem;
    cursor           : pointer;
    transition       : .4s;
}
.btn-mini:hover { background-color : var(--da-primary); color : var(--accent); }
[data-theme="dark"] .btn-mini { background-color : var(--bg-chip); color : var(--accent); }

/* ==========================================================================
   Shell — porté de nav.scss et header.scss
   ========================================================================== */
#app { height : 100%; }
.shell { display : flex; height : 100%; }

#nav_main {
    display          : flex;
    flex-direction   : row;
    height           : 100%;
    padding          : 0 var(--gap) 0 0;
    background-color : var(--bg-surface);
    flex             : 0 0 auto;
}

/* --- Colonne des clubs --- */
.section-nav-club {
    flex         : 0 0 auto;
    overflow-y   : auto;
    border-right : 1px solid var(--border-soft);
    font-family  : var(--font-display);
    font-weight  : 600;
    text-align   : center;
}

.section-nav-club > a.logo {
    position         : sticky;
    top              : 0;
    z-index          : 2;
    display          : block;
    width            : 110px;
    height           : 120px;
    background-color : var(--bg-surface);
}
.section-nav-club > a.logo > img { width : 70px; margin-top : var(--gap); }
/* Le blason garde ses couleurs : un liseré or le détache du rail sombre. */
[data-theme="dark"] .section-nav-club > a.logo > img { filter : drop-shadow(0 0 1px rgba(202, 191, 166, .7)); }

/* Pastille club : blason + acronyme, comme les logos servis par
   ClubImageService (cf. la page réseau d'un site club). */
.section-nav-club > a:not(.logo) {
    display          : flex;
    flex-direction   : column;
    align-items      : center;
    justify-content  : center;
    gap              : 2px;
    width            : 70px;
    height           : 70px;
    line-height      : 1;
    margin           : var(--gap);
    border-radius    : var(--radius-sm);
    background-color : var(--bg-chip);
    color            : var(--color-nav);
    font-size        : var(--font-size-base);
    font-weight      : 600;
    text-decoration  : none;
    text-transform   : uppercase;
    cursor           : pointer;
    transition       : .4s ease;
}
.section-nav-club > a:not(.logo):hover { background-color : var(--accent); color : var(--accent-contrast); }

.section-nav-club > a:not(.logo) > img {
    width      : 26px;
    opacity    : .75;
    transition : .4s ease;
}
.section-nav-club > a:not(.logo) > span { font-size : .82rem; letter-spacing : .02em; }

.section-nav-club > a:not(.logo):hover > img { opacity : 1; }

/* Sur fond navy (sélection) ou en thème sombre, la coque du blason se
   confondrait : on l'éclaircit d'un cran plutôt que de l'aplatir en blanc. */
.section-nav-club > a.selected > img,
[data-theme="dark"] .section-nav-club > a:not(.logo) > img { filter : brightness(1.9); opacity : 1; }

.section-nav-club > a.selected,
.section-nav-club > a.selected:hover {
    background-color : var(--da-primary);
    color            : var(--accent);
    cursor           : auto;
    pointer-events   : none;
}
[data-theme="dark"] .section-nav-club > a.selected { background-color : var(--accent); color : var(--accent-contrast); }

.section-nav-club > a.corp-anchor { border : solid #0B1C2C 1px; background-color : var(--da-gold-pale); }
.section-nav-club > a.corp-anchor:hover { background-color : var(--accent); }

#clubSearchInput {
    padding          : 5px 0;
    margin           : 0 5px 5px;
    max-width        : 100px;
    border           : 1px solid var(--accent);
    border-radius    : 5px;
    background-color : var(--bg-surface);
    color            : var(--text-strong);
    font-family      : var(--font-body);
    font-size        : .9rem;
    text-align       : center;
}

/* --- Zone principale --- */
main { flex : 1 1 auto; display : flex; flex-direction : column; min-width : 0; overflow : hidden; }

/* Grille 1fr / auto / 1fr : la recherche est centrée sur la fenêtre, pas
   seulement dans l'espace laissé par le titre. */
main > header {
    gap                   : var(--gap);
    position              : sticky;
    top                   : 0;
    z-index               : 150;   /* au-dessus du voile de recherche (100) */
    flex                  : 0 0 auto;
    display               : grid;
    grid-template-columns : 1fr auto 1fr;
    align-items           : center;
    height                : var(--header-height);
    padding               : 0 var(--gap);
    background-color      : var(--bg-surface);
    font-size             : var(--font-size-base);
}

main > header > section { min-width : 0; overflow : hidden; }

main > header > section > h1 {
    margin      : 0;
    color       : var(--text-strong);
    font-size   : var(--size-header-big);
    font-weight : 300;
    white-space : nowrap;
}
main > header > section > h1 > small { font-size : .5em; font-weight : 300; }
main > header > section > h1 > small > span { color : var(--agency); font-weight : 600; }

main > header > section > span { display : block; color : var(--agency); text-transform : uppercase; }
.color-primary { color : var(--text-strong); }
.nowrap { white-space : nowrap; }

main > header > nav {
    display         : flex;
    align-items     : center;
    justify-content : flex-end;
    min-width       : 0;
}
main > header > nav > a { vertical-align : middle; display : inline-block; flex : 0 0 auto; }
main > header > nav > a:last-of-type { margin-left : var(--gap); }
main > header > nav > a > svg { width : 33px; fill : var(--border-soft); transition : .4s; }
main > header > nav > a:hover > svg { fill : var(--text-strong); }

main > header > nav > a > div.icon-user {
    display          : inline-grid;
    place-items      : center;
    overflow         : hidden;
    width            : 70px;
    height           : 70px;
    border-radius    : var(--radius-sm);
    background-color : var(--border-soft);
    color            : var(--text-muted);
    font-size        : 2.6em;
    text-align       : center;
}

#button-support { margin-right : var(--gap); font-weight : bold; color : var(--text-strong); }
#button-support:hover { color : var(--agency); }

#button_notification { position : relative; }
#button_notification > span { visibility : hidden; }
#button_notification.visible > span { visibility : visible; }

.notification-badge {
    position         : relative;
    top              : -30px;
    right            : 10px;
    padding          : 4px 8px;
    border-radius    : 50%;
    background-color : var(--agency);
    color            : var(--agency);
    font-size        : 12px;
}

/* Le panneau gris, c'est la section elle-même : elle occupe toute la hauteur
   disponible sous le header (mesuré : #F6F8FA, radius 10px, padding 20px,
   margin-right 20px). */
main > section[data-content] {
    flex             : 1 1 auto;
    display          : flex;
    flex-direction   : column;
    min-height       : 0;
    overflow-y       : auto;
    padding          : var(--gap);
    margin           : 0 var(--gap) 0 0;
    background-color : var(--bg-app);
    border-radius    : var(--radius-md);
}

/* Les blocs de tête gardent leur hauteur, le dernier prend le reste. */
main > section[data-content] > .breadcrumb-row,
main > section[data-content] > .toolbar,
main > section[data-content] > .entries { flex : 0 0 auto; }

/* « Programmation » : h2.breadcrumb, pilule blanche posée dans le panneau */
.breadcrumb {
    display          : inline-block;
    padding          : 5px 20px;
    margin           : 0;
    background-color : var(--bg-surface);
    border-radius    : var(--radius-lg);        /* 20px */
    color            : var(--text-strong);
    font-size        : var(--font-size-base);
    font-weight      : bolder;
}

/* La barre d'actions du BO (.sort-module) laisse de l'air sous le fil d'ariane.
   Le fil est désormais dans .breadcrumb-row : c'est lui qui porte la marge. */
.breadcrumb-row { margin-bottom : var(--gap); }

.breadcrumb + .toolbar,
.breadcrumb + .panel,
.breadcrumb + div,
.breadcrumb-row + .toolbar,
.breadcrumb-row + .panel,
.breadcrumb-row + div { margin-top : 0; }

/* ==========================================================================
   Panneaux, grilles
   ========================================================================== */
.panel {
    padding          : var(--gap);
    margin-bottom    : var(--gap);

    background-color : var(--bg-surface);
    border-radius    : var(--radius-md);
}
.panel:last-child { margin-bottom : 0; }

/* Barre d'actions au-dessus du contenu, comme « Programmer un déjeuner » */
.toolbar { display : flex; align-items : center; gap : var(--gap-xs); flex-wrap : wrap; margin-bottom : var(--gap-xs); }
.toolbar__actions { display : flex; align-items : center; gap : var(--gap-xs); flex-wrap : wrap; }

/* Bouton d'action secondaire, grisé comme « Programmer un événement exceptionnel » */
.btn-muted { background-color : var(--bg-muted); border-color : var(--bg-muted); color : var(--text-muted); }
.btn-muted:hover { background-color : var(--accent); border-color : var(--accent); color : var(--accent-contrast); }

/* --- Recherche — form.search-module du BO : input 40px sans bordure
       (radius 3px à gauche) + bouton navy 50×40 (radius 3px à droite) --- */
.search { display : flex; width : 50%; min-width : 260px; }

.search input {
    flex             : 1 1 auto;
    min-width        : 0;
    height           : 40px;
    padding          : 0 20px;
    border           : none;
    border-radius    : var(--radius-xs) 0 0 var(--radius-xs);
    background-color : var(--bg-surface);
    color            : var(--text-strong);
    font-family      : var(--font-body);
    font-size        : var(--font-size-base);
}
.search input::placeholder { color : var(--input-placeholder); }
.search input:focus { outline : none; }

.search button {
    display          : grid;
    place-items      : center;
    flex             : 0 0 50px;
    width            : 50px;
    height           : 40px;
    padding          : 0;                       /* sinon le padding par défaut décale l'icône */
    border           : none;
    border-radius    : 0 var(--radius-xs) var(--radius-xs) 0;
    background-color : var(--da-primary);
    color            : #FFF;
    font-family      : "business-club-icon";
    font-size        : var(--font-size-base);
    line-height      : 1;
    cursor           : pointer;
    transition       : .4s;
}
.search button:hover { background-color : var(--accent); color : var(--accent-contrast); }
[data-theme="dark"] .search button { background-color : var(--accent); color : var(--accent-contrast); }

/* --- « Afficher [10] entrées » --- */
.entries { display : flex; justify-content : flex-end; align-items : center; gap : 6px; margin-bottom : var(--gap-xs); color : var(--text-strong); font-size : .95rem; }
.entries select {
    height           : 26px;
    padding          : 0 4px;
    border           : 1px solid var(--border-strong);
    background-color : var(--bg-surface);
    color            : var(--text-strong);
    font-family      : var(--font-body);
    font-size        : .95rem;
}

/* --- Pagination --- */
.pagination { display : flex; justify-content : flex-end; align-items : center; gap : 10px; margin-top : var(--gap-sm); font-size : .95rem; }
.pagination button { border : none; background : none; color : var(--text-strong); font-family : var(--font-body); font-size : .95rem; cursor : pointer; }
.pagination button:hover:not([disabled]) { color : var(--agency); }
.pagination button[disabled] { color : var(--text-muted); cursor : default; }
.pagination .is-current { font-weight : 700; color : var(--agency); }

.panel__head {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    gap             : var(--gap-sm);
    margin-bottom   : var(--gap-sm);
    flex-wrap       : wrap;
}
.panel__head h2 { font-size : 1.35rem; font-weight : 500; }
.panel__head p  { margin : 2px 0 0; color : var(--text-muted); font-size : .9rem; }

.grid { display : grid; gap : var(--gap-sm); }
.grid--2 { grid-template-columns : repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns : repeat(auto-fit, minmax(240px, 1fr)); }
.grid--4 { grid-template-columns : repeat(auto-fit, minmax(200px, 1fr)); }
.grid--cards { grid-template-columns : repeat(auto-fill, minmax(240px, 1fr)); }

.stack { display : flex; flex-direction : column; gap : var(--gap-sm); }
.row   { display : flex; align-items : center; gap : var(--gap-xs); flex-wrap : wrap; }
.spacer { flex : 1 1 auto; }

.tile {
    padding          : var(--gap-sm);
    background-color : var(--bg-surface);
    border-left      : 3px solid var(--accent);
    border-radius    : var(--radius-sm);
}
.tile__value { display : block; color : var(--text-strong); font-size : 2.2rem; font-weight : 300; line-height : 1.1; }
.tile__label { display : block; margin-top : 2px; color : var(--agency); font-size : .8rem; font-weight : 400; text-transform : uppercase; }
.tile--pink  { border-left-color : var(--agency); }
.tile--valid { border-left-color : var(--da-valid); }
.tile--info  { border-left-color : var(--da-info); }

/* ==========================================================================
   Formulaires — labels gras au-dessus, champs #EEE, focus navy (login.scss)
   ========================================================================== */
.field { display : block; margin-bottom : var(--gap-sm); }

.field > label { display : block; margin-bottom : 8px; font-weight : 600; }

.input, .select, .textarea {
    display          : block;
    width            : 100%;
    height           : var(--input-height);
    padding          : 0 10px;

    border           : none;
    border-radius    : 0;

    background-color : var(--bg-inset);           /* DA --input-background-color #EEE */
    color            : var(--text-strong);
    font-family      : var(--font-body);
    font-size        : var(--font-size-base);

    transition       : background-color .2s var(--ease), color .2s var(--ease);
}
.input::placeholder, .textarea::placeholder { color : var(--input-placeholder); font-style : italic; }

.input:focus:not([disabled]),
.select:focus:not([disabled]),
.textarea:focus:not([disabled]) {
    background-color : var(--da-primary);
    color            : #FFF;
    outline          : none;
}
[data-theme="dark"] .input:focus:not([disabled]),
[data-theme="dark"] .select:focus:not([disabled]),
[data-theme="dark"] .textarea:focus:not([disabled]) { background-color : var(--accent); color : var(--accent-contrast); }

.textarea { height : auto; min-height : 90px; padding : 10px; resize : vertical; line-height : 1.5; }
.select { appearance : none; cursor : pointer; padding-right : 30px; }

.field__hint  { display : block; margin-top : 5px; color : var(--text-muted); font-size : .82rem; }
.field__error { display : block; margin-top : 5px; color : var(--da-alert); font-size : .85rem; font-weight : 600; }

.switch { display : inline-flex; align-items : center; gap : 10px; cursor : pointer; user-select : none; margin-bottom : 8px; }
.switch input { position : absolute; opacity : 0; pointer-events : none; }
.switch__track {
    position         : relative;
    width            : 44px;
    height           : 24px;
    border-radius    : var(--radius-pill);
    background-color : var(--border-strong);
    transition       : background-color var(--speed) var(--ease);
    flex             : 0 0 44px;
}
.switch__track::after {
    content          : "";
    position         : absolute;
    top              : 3px;
    left             : 3px;
    width            : 18px;
    height           : 18px;
    border-radius    : 50%;
    background-color : #FFF;
    transition       : transform var(--speed) var(--ease);
}
.switch input:checked + .switch__track { background-color : var(--da-valid); }
.switch input:checked + .switch__track::after { transform : translateX(20px); }

/* ==========================================================================
   Tables — en-tête navy plein, lignes alternées #E7E7E7 (mesuré sur le BO)
   ========================================================================== */
.table-wrap { overflow-x : auto; }

.table { width : 100%; margin : 20px 0 0; border-collapse : collapse; border-radius : var(--radius-sm); font-size : var(--font-size-base); line-height : normal; }

.table thead th {
    position         : relative;
    padding          : 7px 10px;
    background-color : var(--da-primary);
    color            : #FFF;
    font-weight      : 400;
    text-align       : start;
    white-space      : nowrap;
    border-right     : 1px solid var(--border-strong);   /* mesuré : #D1D1D1 */
}
.table thead th:last-child { border-right : none; }
[data-theme="dark"] .table thead th { background-color : var(--bg-chip); color : var(--accent); }

.table thead th.text-center { text-align : center; }

/* Chevron de tri — mesuré sur le BO : carré 10px en content-box, bordures
   droite + bas de 2px, pivoté à 45°, flottant à droite, opacité 0.3 */
.table thead th.sorting::after {
    content       : "";
    display       : block;
    float         : right;
    position      : relative;
    width         : 10px;
    height        : 10px;
    box-sizing    : content-box;
    border-right  : 2px solid #FFF;
    border-bottom : 2px solid #FFF;
    transform     : rotate(45deg);
    opacity       : .3;
}
[data-theme="dark"] .table thead th.sorting::after { border-color : var(--accent); }
[data-theme="dark"] .table thead th { background-color : var(--bg-chip); color : var(--accent); }

.table thead th:first-child { border-radius : var(--radius-xs) 0 0 var(--radius-xs); }
.table thead th:last-child  { border-radius : 0 var(--radius-xs) var(--radius-xs) 0; }

.table td { padding : 9px 10px; color : var(--text-strong); vertical-align : middle; }

.table tbody tr:nth-child(odd)  td { background-color : var(--bg-surface); }  /* #FFF     */
.table tbody tr:nth-child(even) td { background-color : var(--row-alt); }     /* #E7E7E7  */
.table tbody tr:hover td { background-color : var(--row-hover); }

.table td.is-actions { text-align : right; white-space : nowrap; }
.table td { text-align : start; }
.table td.text-center { text-align : center; }
.table td.is-actions { text-align : right; white-space : nowrap; }

/* Vignette d'intervenant — img.thumbnail du BO : 70×55, radius 4px */
.thumbnail {
    display        : inline-block;
    vertical-align : middle;
    width         : 70px;
    height        : 55px;
    border-radius : var(--radius-sm);
    object-fit    : contain;
    background    : transparent;
}
[data-theme="dark"] .thumbnail { filter : invert(1) opacity(.75); }

.badge {
    display          : inline-block;
    padding          : 2px 10px;
    border-radius    : var(--radius-pill);
    background-color : var(--bg-chip);
    color            : var(--text-strong);
    font-size        : .8rem;
    font-weight      : 600;
    white-space      : nowrap;
}
.badge--agency  { background-color : var(--agency); color : #FFF; }
.badge--photo   { background-color : var(--accent); color : var(--accent-contrast); }
.badge--valid   { background-color : var(--da-valid); color : #143017; }
.badge--standby { background-color : var(--da-standby); color : #3A2708; }
.badge--alert   { background-color : var(--da-alert); color : #FFF; }
.badge--info    { background-color : var(--da-info); color : #04283A; }
.badge--count   { min-width : 20px; text-align : center; background-color : var(--agency); color : #FFF; }

/* Coches et croix du BO */
.mark { font-family : "business-club-icon"; font-size : 24px; }
.mark--yes { color : #00A651; }   /* mesuré sur le BO */
.mark--no  { color : #ED1C24; }

.empty { padding : var(--gap-lg) var(--gap); text-align : center; color : var(--text-muted); }
.empty [class^="icon-"] { display : block; margin-bottom : 10px; font-size : 2.2rem; opacity : .35; }
.empty h3 { margin-bottom : 6px; color : var(--text-strong); font-weight : 500; }

/* ==========================================================================
   Modales notifications & profil — portées de notification-profile.html.twig
   ========================================================================== */
#notification_modal, #profile_modal {
    position         : absolute;
    z-index          : 9999;
    top              : 100px;
    right            : 20px;
    padding          : 20px;
    background-color : #001C34;
    border-radius    : 10px;
    font-family      : var(--font-body);
    color            : #FFF;
}

#notification_modal { width : 910px; min-width : 640px; max-width : calc(100vw - 40px); }
#profile_modal      { width : 500px; min-width : 350px; max-width : calc(100vw - 40px); }

#notification_modal::after, #profile_modal::after {
    content      : "";
    position     : absolute;
    top          : -30px;
    transform    : translateX(-50%);
    border-width : 15px;
    border-style : solid;
    border-color : transparent transparent #001C34 transparent;
    z-index      : 3;
}
#notification_modal::after { left : 85.5%; }
#profile_modal::after      { left : 92.8%; }

.my-hide { display : none; }
#notification_modal.show, #profile_modal.show { display : block; }

.text-title    { color : #CDC0A5; font-size : 20px; margin-bottom : 30px; font-weight : 400; }
.text-subtitle { color : #CDC0A5; font-size : 15px; margin-bottom : 0; padding-bottom : 0; }
.text-content  { margin-right : 40px; }

#search_notification {
    display          : block;
    width            : 100%;
    height           : var(--input-height);
    padding          : 0 10px;
    border           : none;
    border-radius    : var(--radius-xs);
    background-color : var(--bg-app);
    color            : #002037;
    font-family      : var(--font-body);
    font-size        : 1em;
}
#search_notification:focus:not([disabled]) { background-color : #002037; color : #FFF; outline : none; }

.modal-content-wrapper { position : relative; z-index : 1; overflow-y : auto; max-height : 40vh; }
.modal-content-wrapper::-webkit-scrollbar { width : 8px; }
.modal-content-wrapper::-webkit-scrollbar-thumb { background-color : rgb(205, 192, 165); border-radius : 4px; }
.scrollable-content { max-height : 100%; margin-right : 35px; }

.one_notification button {
    display     : block;
    width       : 100%;
    padding     : 0;
    border      : none;
    background  : none;
    color       : #FFF;
    font-family : inherit;
    font-size   : inherit;
    text-align  : left;
    cursor      : pointer;
}
.one_notification.is-unread .text-content { font-weight : 600; }
#notification_modal hr { opacity : .3; margin : 0; }
#messageNotification { color : #FFF; font-size : 20px; }

.modal-footer { background-color : #001C34; }
.button-modal {
    padding          : 10px 20px;
    margin-top       : 14px;
    margin-right     : 8px;
    border           : none;
    border-radius    : 5px;
    background-color : #CDC0A5;
    color            : #001C34;
    font-family      : var(--font-body);
    font-size        : var(--font-size-base);
    cursor           : pointer;
}
.button-modal:hover { background-color : #FFF; }

.profile-lines { line-height : 1.4; color : #FFF; }
.profile-lines hr { opacity : .3; margin : 14px 0; }
.profile-lines .switch { color : #FFF; }

/* Liens à gauche, Déconnexion poussée à droite sur la même ligne. */
.profile-menu { display : flex; flex-wrap : wrap; align-items : center; gap : 10px 20px; }
.profile-menu a { color : #CDC0A5; text-decoration : none; }
.profile-menu a:hover { color : #FFF; }
.profile-menu [data-logout] { margin-left : auto; }

/* ==========================================================================
   Toasts
   ========================================================================== */
/* En haut à droite, sous le header : c'est là que le regard revient après
   une action, et rien ne les masque. */
#toasts {
    position       : fixed;
    top            : calc(var(--header-height) + 14px);
    right          : var(--gap);
    z-index        : 10001;
    display        : flex;
    flex-direction : column;
    gap            : 10px;
    pointer-events : none;
}

.toast {
    display          : flex;
    align-items      : center;
    gap              : 12px;

    min-width        : 320px;
    max-width        : 420px;
    padding          : 14px 18px 14px 14px;

    background-color : var(--bg-surface);
    border-left      : 5px solid var(--da-info);
    border-radius    : var(--radius-sm);
    box-shadow       : var(--shadow-lg);

    color            : var(--text-strong);
    font-size        : .95rem;
    font-weight      : 600;
    line-height      : 1.35;

    animation        : toast-in .3s var(--ease);
    pointer-events   : auto;
}

/* Pastille colorée : on reconnaît la nature du message au premier coup d'œil. */
.toast > [class^="icon-"] {
    display          : grid;
    place-items      : center;
    flex             : 0 0 32px;
    height           : 32px;
    border-radius    : 50%;
    background-color : var(--da-info);
    color            : #fff;
    font-size        : .85rem;
}

.toast--success { border-left-color : var(--da-valid); }
.toast--success > [class^="icon-"] { background-color : var(--da-valid); color : #143017; }

.toast--error { border-left-color : var(--da-alert); }
.toast--error > [class^="icon-"] { background-color : var(--da-alert); }

.toast--warn { border-left-color : var(--da-standby); }
.toast--warn > [class^="icon-"] { background-color : var(--da-standby); color : #3A2708; }

.toast.is-out { animation : toast-out .24s var(--ease) forwards; }

@keyframes toast-in {
    from { opacity : 0; transform : translateX(28px) scale(.96); }
    to   { opacity : 1; transform : none; }
}
@keyframes toast-out {
    to { opacity : 0; transform : translateX(28px) scale(.96); }
}

/* ==========================================================================
   Modales
   ========================================================================== */
.modal-backdrop {
    position        : fixed;
    inset           : 0;
    z-index         : 1001;                        /* DA dialog z-index */
    display         : grid;
    place-items     : center;
    padding         : var(--gap);
    background-color: var(--overlay);
    backdrop-filter : blur(7px) saturate(.85);
    -webkit-backdrop-filter : blur(7px) saturate(.85);
    animation       : fade-in .18s var(--ease);
}

.modal {
    width            : min(560px, 100%);
    max-height       : calc(100vh - 2 * var(--gap));
    overflow-y       : auto;
    background-color : var(--bg-surface);
    border-radius    : var(--radius-md);
    box-shadow       : var(--shadow-lg);
}
.modal--wide { width : min(880px, 100%); }
.modal__head { display : flex; align-items : center; justify-content : space-between; gap : var(--gap-sm); padding : var(--gap-sm) var(--gap); border-bottom : 1px solid var(--border-soft); }
.modal__head h2 { font-size : 1.3rem; font-weight : 500; }
.modal__body { padding : var(--gap); }
.modal__foot { display : flex; justify-content : flex-end; gap : var(--gap-xs); padding : var(--gap-sm) var(--gap); border-top : 1px solid var(--border-soft); }

@keyframes fade-in { from { opacity : 0; } to { opacity : 1; } }

/* ==========================================================================
   Login — colonne centrée, calquée sur templates/back/security/login.html.twig
   ========================================================================== */
.login {
    display         : flex;
    height          : 100%;
    padding         : var(--gap);
    overflow-y      : auto;

    background-color: var(--bg-surface);
}

/* DA login.scss : main en width:min-content, le titre fixe la largeur et le
   formulaire de 450px se centre dedans. `margin:auto` centre le bloc tout en
   laissant le défilement fonctionner quand il dépasse la hauteur. */
.login__main {
    width       : min-content;
    max-width   : 100%;
    margin      : auto;
    white-space : nowrap;
    text-align  : center;
}

.login__logo img { display : block; width : 135px; margin : 0 auto 20px; }   /* DA login.scss */

.login__title {
    margin      : 0;
    color       : var(--text-strong);
    font-size   : var(--size-header-big);          /* 40px */
    font-weight : 500;
    white-space : nowrap;
}
.login__title small { font-size : .5em; font-weight : 400; }
.login__title small span { color : var(--agency); }

.login__scope {
    display        : block;
    margin-bottom  : var(--gap);
    color          : var(--agency);
    font-weight    : 400;
    text-transform : uppercase;
}
.login__scope strong { color : var(--text-strong); }

.login__form { width : 450px; max-width : 100%; margin : auto; text-align : center; white-space : normal; }
.login__form label { display : block; margin-top : var(--gap-sm); text-align : left; font-weight : 600; }
.login__form label input {
    display          : block;
    width            : 100%;
    height           : var(--input-height);
    margin-top       : 10px;
    padding          : 0 40px 0 10px;
    border           : none;
    background-color : var(--bg-inset);
    color            : var(--text-strong);
    font-family      : var(--font-body);
    font-size        : var(--font-size-base);
}
.login__form label input::placeholder { color : var(--input-placeholder); }
.login__form label input:focus:not([disabled]) {
    background-color : var(--da-primary);
    color            : #FFF;
    outline          : none;
}
[data-theme="dark"] .login__form label input:focus:not([disabled]) { background-color : var(--accent); color : var(--accent-contrast); }

.password-container { position : relative; }
.toggle-password {
    position    : absolute;
    right       : 10px;
    top         : 50%;
    transform   : translateY(-50%);
    display     : flex;
    align-items : center;
    padding     : 0;
    border      : none;
    background  : none;
    color       : var(--text-muted);
    cursor      : pointer;
}
.toggle-password svg { width : 24px; height : 24px; }

.login__submit { margin : var(--gap) 0 var(--gap-sm); }

.login__forgot { text-decoration : underline; }
.login__forgot:hover { color : var(--agency); }

/* Écrans mot de passe oublié / choix du mot de passe */
.login__help { margin : var(--gap-sm) 0 0; color : var(--text-muted); text-align : left; line-height : 1.45; }
.login__hint { margin : 6px 0 0; color : var(--text-muted); font-size : .82rem; text-align : left; }
.login__form input[readonly] { opacity : .7; }

.login__accounts { margin-top : var(--gap-lg); padding-top : var(--gap-sm); border-top : 1px solid var(--border-soft); text-align : left; }
.login__accounts > p { margin : 0 0 8px; color : var(--text-muted); font-size : .82rem; text-transform : uppercase; }

.account-btn {
    display          : flex;
    align-items      : center;
    gap              : 10px;
    width            : 100%;
    padding          : 8px 10px;
    margin-bottom    : 5px;
    border           : 1px solid var(--border-soft);
    border-radius    : var(--radius-xs);
    background-color : var(--bg-surface);
    color            : var(--text-strong);
    font-family      : var(--font-body);
    font-size        : .9rem;
    text-align       : left;
    cursor           : pointer;
}
.account-btn:hover { border-color : var(--accent); background-color : var(--bg-app); }
.account-btn small { display : block; color : var(--text-muted); font-size : .8rem; }

.avatar {
    display          : grid;
    place-items      : center;
    flex             : 0 0 34px;
    width            : 34px;
    height           : 34px;
    border-radius    : 50%;
    background-color : var(--da-primary);
    color            : var(--accent);
    font-size        : .82rem;
    font-weight      : 600;
}
.avatar--agency { background-color : var(--agency); color : #FFF; }
.avatar--lg { flex-basis : 46px; width : 46px; height : 46px; font-size : 1.05rem; }

/* ==========================================================================
   Dropzone & file d'attente
   ========================================================================== */
.dropzone {
    display          : grid;
    place-items      : center;
    gap              : 6px;
    padding          : var(--gap-lg) var(--gap);

    border           : 2px dashed var(--border-strong);
    border-radius    : var(--radius-md);
    background-color : var(--bg-app);
    color            : var(--text-muted);
    text-align       : center;
    cursor           : pointer;

    transition       : border-color .2s var(--ease), background-color .2s var(--ease);
}
.dropzone:hover { border-color : var(--accent); color : var(--text-strong); }
.dropzone.is-over { border-color : var(--da-valid); background-color : var(--row-alt); }
.dropzone strong { color : var(--text-strong); font-size : 1.15rem; font-weight : 500; }
.dropzone [class^="icon-"] { font-size : 2rem; color : var(--accent); }

.queue { display : flex; flex-direction : column; gap : 6px; }

.queue__item {
    display               : grid;
    grid-template-columns : 44px 1fr auto;
    align-items           : center;
    gap                   : 10px;
    padding               : 8px 10px;
    background-color      : var(--bg-app);
    border-radius         : var(--radius-xs);
}
.queue__thumb { width : 44px; height : 34px; object-fit : cover; border-radius : var(--radius-xs); background-color : var(--bg-chip); }
.queue__name { font-size : .9rem; overflow : hidden; text-overflow : ellipsis; white-space : nowrap; }
.queue__meta { color : var(--text-muted); font-size : .8rem; }

.progress { height : 5px; margin-top : 5px; border-radius : var(--radius-pill); background-color : var(--border-soft); overflow : hidden; }
.progress__bar { height : 100%; width : 0; border-radius : inherit; background-color : var(--da-info); transition : width .2s linear; }
.queue__item[data-state="done"]  .progress__bar { background-color : var(--da-valid); }
.queue__item[data-state="error"] .progress__bar { background-color : var(--da-alert); }

/* ==========================================================================
   Galerie
   ========================================================================== */
.gallery { display : grid; grid-template-columns : repeat(auto-fill, minmax(190px, 1fr)); gap : var(--gap-sm); }

.shot {
    position         : relative;
    border-radius    : var(--radius-sm);
    overflow         : hidden;
    background-color : var(--bg-app);
    transition       : box-shadow .2s var(--ease);
}
.shot:hover { box-shadow : var(--shadow-md); }
.shot.is-dragging { opacity : .4; }
.shot.is-drop-target { outline : 2px dashed var(--accent); outline-offset : -4px; }

.shot__img { display : block; width : 100%; aspect-ratio : 4 / 3; object-fit : cover; cursor : zoom-in; background-color : var(--bg-chip); }

.shot__bar { display : flex; align-items : center; gap : 4px; padding : 6px 8px; background-color : var(--bg-surface); }
.shot__caption { flex : 1 1 auto; min-width : 0; overflow : hidden; text-overflow : ellipsis; white-space : nowrap; font-size : .85rem; }
.shot__caption:empty::before { content : "Sans légende"; color : var(--text-muted); font-style : italic; }

.shot__flag {
    position         : absolute;
    top              : 8px;
    left             : 8px;
    display          : grid;
    place-items      : center;
    width            : 26px;
    height           : 26px;
    border-radius    : 50%;
    background-color : var(--accent);
    color            : var(--accent-contrast);
    font-size        : .72rem;
}
.shot__pick { position : absolute; top : 8px; right : 8px; width : 20px; height : 20px; accent-color : var(--agency); cursor : pointer; }

/* ==========================================================================
   Diaporama
   ========================================================================== */
.slideshow { position : fixed; inset : 0; z-index : 1002; display : grid; grid-template-rows : auto 1fr auto; background-color : var(--scrim); animation : fade-in .2s var(--ease); }
.slideshow__head, .slideshow__foot { display : flex; align-items : center; justify-content : space-between; gap : var(--gap-sm); padding : var(--gap-sm) var(--gap); color : rgba(255, 255, 255, .82); }
.slideshow__head h3 { color : #FFF; font-weight : 400; }
.slideshow__stage { position : relative; display : grid; place-items : center; min-height : 0; padding : 0 var(--gap); }
.slideshow__stage img { max-width : 100%; max-height : 100%; border-radius : var(--radius-xs); }
.slideshow__nav { position : absolute; top : 50%; transform : translateY(-50%); display : grid; place-items : center; width : 46px; height : 46px; border : none; border-radius : 50%; background-color : rgba(255, 255, 255, .12); color : #FFF; font-size : 1.4rem; cursor : pointer; }
.slideshow__nav:hover { background-color : var(--accent); color : var(--accent-contrast); }
.slideshow__nav--prev { left : 10px; }
.slideshow__nav--next { right : 10px; }
.slideshow__caption { max-width : 60ch; color : #FFF; text-align : center; }
.slideshow__caption em { color : rgba(255, 255, 255, .5); }
.slideshow__dots { display : flex; gap : 5px; flex-wrap : wrap; justify-content : center; }
.slideshow__dot { width : 7px; height : 7px; border-radius : 50%; background-color : rgba(255, 255, 255, .3); cursor : pointer; }
.slideshow__dot.is-current { background-color : var(--accent); }

/* ==========================================================================
   Aperçu emailing
   ========================================================================== */
.mail-preview { background-color : var(--bg-app); border-radius : var(--radius-md); padding : var(--gap); max-height : 60vh; overflow-y : auto; }
[data-theme="dark"] .mail-preview { background-color : #0A1723; }
.mail-sheet { max-width : 640px; margin : 0 auto; background-color : #FFF; border-radius : var(--radius-xs); overflow : hidden; box-shadow : var(--shadow-md); color : #002037; }

/* ==========================================================================
   Divers
   ========================================================================== */
.timeline { position : relative; padding-left : 22px; }
.timeline::before { content : ""; position : absolute; left : 6px; top : 4px; bottom : 4px; width : 2px; background-color : var(--border-soft); }
.timeline__item { position : relative; padding-bottom : var(--gap-sm); }
.timeline__item::before { content : ""; position : absolute; left : -20px; top : 6px; width : 10px; height : 10px; border-radius : 50%; background-color : var(--accent); }

.kbd { display : inline-block; padding : 1px 6px; border : 1px solid var(--border-strong); border-bottom-width : 2px; border-radius : var(--radius-xs); background-color : var(--bg-app); font-family : ui-monospace, Menlo, monospace; font-size : .8rem; }

.text-muted { color : var(--text-muted); }
.text-small { font-size : .87rem; }
.mb-0 { margin-bottom : 0; }
.mt-1 { margin-top : var(--gap-sm); }

#btn_burger { display : none; }

/* ==========================================================================
   Responsive — seuils repris de header.scss (1250px / 1000px) et nav.scss (900px)
   ========================================================================== */
@media screen and (max-width : 1250px) {
    main > header { height : auto; padding : 1em var(--gap); }
    main > header > section > h1 { font-size : 30px; }
    main > header > section > h1 > small { display : none; }
}

@media screen and (max-width : 1000px) {
    main > header { font-size : 1em; }
    main > header > nav > a > div.icon-user { width : 48px; height : 48px; font-size : 1.8em; }
    #button-support { display : none; }
    main > section[data-content] { padding-right : 0; }
    #notification_modal, #profile_modal { right : 10px; width : calc(100vw - 20px); min-width : 0; }
    #notification_modal::after, #profile_modal::after { display : none; }
}

@media screen and (max-width : 900px) {
    #nav_main {
        position   : fixed;
        top        : 0;
        bottom     : 0;
        left       : 0;
        z-index    : 500;
        transform  : translateX(-110%);
        transition : transform .4s var(--ease);
        box-shadow : var(--shadow-lg);
    }
    .shell.is-nav-open #nav_main { transform : none; }
    .shell.is-nav-open::after { content : ""; position : fixed; inset : 0; z-index : 450; background : var(--overlay); }

    #btn_burger {
        display          : inline-grid;
        place-items      : center;
        width            : 42px;
        height           : 42px;
        border           : 1px solid var(--border-strong);
        border-radius    : var(--radius-xs);
        background-color : var(--bg-surface);
        color            : var(--text-strong);
        cursor           : pointer;
    }

    main > header > section > h1 { font-size : 20px; white-space : normal; }
    .login__main { width : 100%; }
    .login__title { font-size : 26px; white-space : normal; }
    .gallery { grid-template-columns : repeat(auto-fill, minmax(140px, 1fr)); }
}

@media screen and (max-width : 560px) {
    .modal__foot { flex-direction : column-reverse; }
    .modal__foot .btn { width : 100%; }
    #toasts { left : var(--gap-sm); right : var(--gap-sm); top : calc(var(--header-height) + 8px); }
    .toast { min-width : 0; max-width : none; }
}

@media (prefers-reduced-motion : reduce) {
    *, *::before, *::after { animation-duration : .01ms !important; transition-duration : .01ms !important; }
}


/* ==========================================================================
   Tableau de bord — porté de dashboard.scss
   ========================================================================== */
.dashboard {
    display         : flex;
    flex-flow       : row wrap;
    justify-content : space-between;
}

.dashboard > h1 {
    min-width   : 100%;
    margin      : 0 0 var(--gap);
    font-size   : 1.5rem;              /* DA --size-h1-fix */
    font-weight : normal;
}
.dashboard > h1 strong { font-weight : 700; }

.dashboard > nav {
    position         : relative;
    width            : calc((100% - var(--gap-md) - var(--gap)) / 2);
    height           : min-content;
    min-height       : 250px;
    padding          : var(--gap);

    background-color : var(--bg-surface);
    border-radius    : var(--radius-md);
}
.dashboard > nav:nth-of-type(n+3) { margin-top : calc(1.5 * var(--gap-lg)); }

.dashboard > nav > h2 {
    z-index     : 1;
    position    : relative;
    margin      : 0;
    font-size   : 1.5rem;
    font-weight : 600;
}

.dashboard > nav > a.btn-default,
.dashboard > nav > button.btn-default {
    z-index     : 1;
    position    : relative;
    display     : block;
    width       : max-content;
    margin-top  : calc(var(--gap) / 2);
    font-size   : var(--font-size-base);
    white-space : nowrap;
}

.dashboard > nav > img {
    position     : absolute;
    top          : 50%;
    right        : 0;
    height       : 270px;
    max-height   : 30vw;
    margin-right : var(--gap);
    transform    : translateY(-50%);
}
[data-theme="dark"] .dashboard > nav > img { opacity : .85; }

/* Pastille rose du dashboard */
.dashboard .badge-count {
    display          : block;
    position         : absolute;
    top              : -15px;
    right            : -15px;
    width            : 30px;
    height           : 30px;
    line-height      : 30px;
    border-radius    : 100px;
    background-color : var(--agency);
    color            : #FFF;
    font-size        : .9rem;
    font-weight      : 600;
    text-align       : center;
}

@media screen and (max-width : 1400px) {
    .dashboard > nav { width : 100%; }
    .dashboard > nav:nth-of-type(n+2) { margin-top : calc(1.5 * var(--gap)); }
    .dashboard > nav:nth-of-type(n+3) { margin-top : calc(1.5 * var(--gap)); }
}

@media screen and (max-width : 700px) {
    .dashboard > nav > img { opacity : .25; }
}

/* ==========================================================================
   Gabarit noir des déjeuners — porté de templates/front/event/card-event-lunch.twig
   Valeurs reprises telles quelles (y compris Arial et Times New Roman).
   ========================================================================== */
.lunch-card-stage { display : flex; justify-content : center; }

.event-article {
    height           : 100%;
    border-radius    : var(--radius-md);
    overflow         : hidden;
    display          : flex;
    flex-direction   : column;
    font-family      : Arial, sans-serif;
    color            : #fff;
    background-color : #000;
    max-width        : 600px;
    width            : 100%;
    margin           : auto;
}

.event-image-container { position : relative; }

.event-image {
    width         : 100%;
    height        : 350px;
    object-fit    : cover;
    margin-bottom : 0;
    display       : block;
}
.event-image--empty { background-color : #111; }

.event-header {
    position        : absolute;
    top             : 10px;
    left            : 50%;
    transform       : translateX(-50%);
    background      : rgba(0, 0, 0, .4);
    padding         : 5px 10px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    text-align      : center;
    max-width       : 90%;
    font-size       : 12px;
    flex-wrap       : nowrap;
}

.event-date-location { font-size : 14px; font-weight : 500; color : #fff; white-space : nowrap; }

.event-content {
    flex            : 1;
    display         : flex;
    flex-direction  : column;
    justify-content : space-between;
    padding         : 10px;
}

/* Aligné en haut : centré, un bloc trop haut sortirait par le haut du cadre et
   le prénom de l'intervenant passerait sous l'image. */
.event-title-section { text-align : center; margin-top : 10px; display : flex; flex-direction : column; justify-content : flex-start; }

.event-speaker-name {
    font-size   : 30px;
    font-weight : normal;
    margin      : 5px 0;
    line-height : 1.2;
    color       : #CABFA6;
    font-family : "Times New Roman", serif;
}

.event-separator {
    height           : 1px;
    background-color : #CABFA6;
    border           : none;
    margin           : 20px auto;
    width            : 90% !important;
}

.event-speaker-function {
    font-size     : 16px;
    font-weight   : 100;
    margin-bottom : 20px;
    color         : #CABFA6;
    font-family   : "Times New Roman", serif;
}

.event-quote {
    font-style    : italic;
    font-size     : 14px;
    color         : #b2b2b2;
    margin-bottom : 20px;
    font-family   : "Times New Roman", serif;
}

.event-key-numbers {
    text-align      : center;
    display         : flex;
    flex-wrap       : wrap;
    justify-content : space-around;
    margin-bottom   : 20px;
}

.key-number-item { flex : 1; min-width : 120px; margin : 10px; }

.key-number {
    display     : block;
    font-size   : 24px;
    font-weight : 500;
    color       : #CABFA6;
    font-family : "Barlow Condensed", sans-serif;
}

.key-number-description { display : block; font-size : 14px; color : #b2b2b2; font-family : "Times New Roman", serif; }

.event-footer { text-align : center; margin-top : auto; padding-bottom : 10px; }

/* .button-color-2 du front : bouton or sur fond sombre */
.button-color-2 {
    display          : inline-block;
    padding          : 10px 25px;
    background-color : #CABFA6;
    color            : #002037;
    font-family      : "Barlow", sans-serif;
    font-weight      : 600;
    text-decoration  : none;
}
.button-color-2:hover { background-color : #fff; }

.thumbnail[data-card-preview] { cursor : zoom-in; transition : opacity .2s var(--ease); }
.thumbnail[data-card-preview]:hover { opacity : .65; }

/* ==========================================================================
   Atelier photo
   ========================================================================== */
/* `display:grid` l'emporterait sur l'attribut hidden du navigateur. */
.ws[hidden] { display : none; }

.ws {
    display               : grid;
    grid-template-columns : minmax(0, 1fr) 340px;
    gap                   : var(--gap);
    align-items           : stretch;
    flex                  : 1 1 auto;
    min-height            : 0;
}

.ws__stage {
    display          : flex;
    flex-direction   : column;
    min-height       : 0;
    background-color : var(--bg-surface);
    border-radius    : var(--radius-md);
    overflow         : hidden;
}

.ws__canvas {
    position         : relative;
    flex             : 1 1 auto;
    min-height       : 0;
    overflow         : hidden;
    background-color : #0A1620;
}

/* Positionnement absolu plutôt que grid : une hauteur en pourcentage sur
   l'image ne se résout pas de façon fiable dans un conteneur dont la
   hauteur vient d'un flex. Là, l'image ne peut pas déborder. */
.ws__canvas img {
    position   : absolute;
    inset      : 12px;
    margin     : auto;
    max-width  : calc(100% - 24px);
    max-height : calc(100% - 24px);
    width      : auto;
    height     : auto;
    object-fit : contain;
    display    : block;
}
.ws__canvas--empty { background-color : var(--bg-app); }

.ws__zoom {
    position         : absolute;
    top              : 10px;
    right            : 10px;
    width            : 36px;
    height           : 36px;
    border           : none;
    border-radius    : var(--radius-xs);
    background-color : rgba(255, 255, 255, .15);
    color            : #fff;
    font-family      : "business-club-icon";
    cursor           : pointer;
}
.ws__zoom:hover { background-color : var(--accent); color : var(--accent-contrast); }



.ws__caption { display : flex; gap : 8px; }
.ws__caption .input { flex : 1 1 auto; }

.ws__meta {
    display     : flex;
    align-items : center;
    gap         : 10px;
    flex-wrap   : wrap;
    margin-top  : 10px;
    color       : var(--text-muted);
    font-size   : .85rem;
}

/* --- Colonne de droite --- */
/* Deux zones : le panneau reste en place, seule la pellicule défile. */
.ws__side {
    display          : flex;
    flex-direction   : column;
    min-height       : 0;
    overflow         : hidden;
    padding          : var(--gap-sm);
    background-color : var(--bg-surface);
    border-radius    : var(--radius-md);
}

.ws__side-scroll {
    flex       : 1 1 auto;
    min-height : 0;
    overflow-y : auto;
    padding-right : 4px;
}

.ws__drop {
    display          : grid;
    place-items      : center;
    gap              : 4px;
    padding          : var(--gap) var(--gap-sm);
    border           : 2px dashed var(--border-strong);
    border-radius    : var(--radius-sm);
    background-color : var(--bg-app);
    color            : var(--text-muted);
    text-align       : center;
    cursor           : pointer;
    transition       : .2s var(--ease);
}
.ws__drop:hover { border-color : var(--accent); }
.ws__drop.is-over { border-color : var(--da-valid); background-color : var(--row-alt); }
.ws__drop strong { color : var(--text-strong); }
.ws__drop [class^="icon-"] { font-size : 1.6rem; color : var(--accent); }

.ws__group { margin-top : var(--gap); }
.ws__group-head { display : flex; align-items : center; gap : 8px; margin-bottom : 8px; }
.ws__group-head strong { display : block; font-size : .9rem; }

.ws__thumbs { display : grid; grid-template-columns : repeat(3, 1fr); gap : 6px; }

.thumb-card {
    position      : relative;
    margin        : 0;
    border-radius : var(--radius-xs);
    overflow      : hidden;
    cursor        : pointer;
    background-color : var(--bg-chip);
}
.thumb-card img { display : block; width : 100%; aspect-ratio : 3 / 2; object-fit : cover; }
.thumb-card.is-current { outline : 2px solid var(--accent); outline-offset : -2px; }
.thumb-card__flag {
    position    : absolute;
    top         : 3px;
    right       : 3px;
    display     : grid;
    place-items : center;
    width       : 18px;
    height      : 18px;
    border-radius : 50%;
    background-color : var(--accent);
    color       : var(--accent-contrast);
    font-size   : .62rem;
    line-height : 1;
}

/* Repère « vous êtes ici » : pastille dorée sur la vignette affichée à gauche. */
.thumb-card__here {
    position         : absolute;
    top              : 3px;
    left             : 3px;
    display          : none;
    place-items      : center;
    width            : 20px;
    height           : 20px;
    border-radius    : 50%;
    background-color : var(--accent);
    color            : var(--accent-contrast);
    font-family      : "business-club-icon";
    font-size        : .62rem;
}
.thumb-card.is-current .thumb-card__here { display : grid; }
.thumb-card__dot {
    position : absolute; bottom : 4px; right : 4px; width : 8px; height : 8px;
    border-radius : 50%; background-color : var(--da-valid);
}

/* --- Sélecteur de clubs du formulaire déjeuner --- */
.club-picker {
    max-height       : 220px;
    overflow-y       : auto;
    margin-top       : 8px;
    border           : 1px solid var(--border-soft);
    border-radius    : var(--radius-xs);
    background-color : var(--bg-app);
}

.club-pick {
    display     : flex;
    align-items : center;
    gap         : 10px;
    padding     : 7px 10px;
    cursor      : pointer;
    border-bottom : 1px solid var(--border-soft);
}
.club-pick:last-child { border-bottom : none; }
.club-pick:hover { background-color : var(--row-alt); }
.club-pick input { width : 16px; height : 16px; accent-color : var(--agency); }
.club-pick__acronym { min-width : 62px; font-weight : 600; font-size : .85rem; }
.club-pick__name { color : var(--text-muted); font-size : .88rem; }

/* --- Clubs rattachés du formulaire utilisateur : 3 colonnes, 2 puis 1 en étroit --- */
.club-columns {
    display               : grid;
    grid-template-columns : repeat(auto-fill, minmax(240px, 1fr));
    gap                   : 4px 20px;
}
.club-columns .switch { display : flex; min-width : 0; margin-bottom : 4px; }
.club-columns .switch__track { flex : 0 0 auto; }
.club-columns .switch__label { overflow : hidden; white-space : nowrap; text-overflow : ellipsis; }

@media (max-width : 1200px) {
    .ws { grid-template-columns : 1fr; }
    .ws__side { max-height : none; }
    .ws__thumbs { grid-template-columns : repeat(6, 1fr); }
}

@media (max-width : 900px) {
    .header-search { display : none; }
    .ws__thumbs { grid-template-columns : repeat(4, 1fr); }
    .carousel__track { padding : 4px 8px 12px; }
    .carousel__nav { display : none; }
}

/* ==========================================================================
   Accueil : barre d'outils (filtres · zoom · modes)
   ========================================================================== */
.home-bar {
    display     : flex;
    align-items : center;
    gap         : var(--gap-sm);
    flex-wrap   : wrap;
    margin      : 0 0 var(--gap);
}

.home-filters, .home-modes { display : flex; gap : 2px; }

.seg {
    padding          : 0 14px;
    height           : 34px;
    border           : 1px solid var(--border-soft);
    background-color : var(--bg-surface);
    color            : var(--text-muted);
    font-family      : var(--font-body);
    font-size        : .9rem;
    cursor           : pointer;
    transition       : .2s var(--ease);
}
.seg:first-child { border-radius : var(--radius-xs) 0 0 var(--radius-xs); }
.seg:last-child  { border-radius : 0 var(--radius-xs) var(--radius-xs) 0; }
.seg:hover { color : var(--text-strong); border-color : var(--accent); }
.seg.is-active { background-color : var(--da-primary); border-color : var(--da-primary); color : var(--accent); }
[data-theme="dark"] .seg.is-active { background-color : var(--accent); border-color : var(--accent); color : var(--accent-contrast); }

.home-zoom { display : flex; align-items : center; gap : 8px; color : var(--text-muted); }
.home-zoom input[type="range"] { width : 150px; accent-color : var(--da-primary); cursor : pointer; }
[data-theme="dark"] .home-zoom input[type="range"] { accent-color : var(--accent); }

/* ==========================================================================
   Carte déjeuner (carrousel & grille) — avec halo
   ========================================================================== */
.lunch-card { position : relative; cursor : pointer; flex : 0 0 auto; }
.lunch-card:focus-visible { outline : 2px solid var(--da-info); outline-offset : 4px; }

.lunch-card__day {
    height         : 22px;
    color          : var(--text-strong);
    font-size      : .82rem;
    font-weight    : 600;
    text-transform : capitalize;
    white-space    : nowrap;
    overflow       : hidden;
    text-overflow  : ellipsis;
}

.lunch-card__frame {
    position         : relative;
    overflow         : hidden;
    border-radius    : var(--radius-md);
    background-color : #000;
    transition       : transform .25s var(--ease), box-shadow .25s var(--ease);
}

/* Halo — en box-shadow plutôt qu'en pseudo-élément : une nappe floutée
   posée derrière la carte débordait de 73px alors que l'écart entre cartes
   n'est que de 30px, donc les voisines la recouvraient. L'ombre, elle, se
   dessine toujours autour de son élément. */
.lunch-card__frame {
    position   : relative;
    z-index    : 1;
    box-shadow : 0 10px 34px -8px color-mix(in srgb, var(--da-primary) 55%, transparent),
                 0 0 46px -14px color-mix(in srgb, var(--da-primary) 45%, transparent);
}

.lunch-card__day, .lunch-card__meta { position : relative; z-index : 1; }

/* Au survol, l'or prend le dessus : le halo se réchauffe et la carte monte. */
.lunch-card:hover .lunch-card__frame {
    transform  : translateY(-4px);
    box-shadow : 0 18px 44px -10px color-mix(in srgb, var(--da-primary) 62%, transparent),
                 0 0 58px -8px color-mix(in srgb, var(--accent) 95%, transparent);
}

/* Un déjeuner déjà couvert prend un halo froid, pour le distinguer d'un œil. */
.lunch-card.is-past .lunch-card__frame {
    box-shadow : 0 10px 34px -8px color-mix(in srgb, var(--da-info) 45%, transparent),
                 0 0 46px -14px color-mix(in srgb, var(--da-info) 40%, transparent);
}
.lunch-card.is-past:hover .lunch-card__frame {
    box-shadow : 0 18px 44px -10px color-mix(in srgb, var(--da-info) 55%, transparent),
                 0 0 58px -8px color-mix(in srgb, var(--accent) 85%, transparent);
}

[data-theme="dark"] .lunch-card__frame {
    box-shadow : 0 10px 34px -8px rgba(0, 0, 0, .7),
                 0 0 46px -12px color-mix(in srgb, var(--accent) 55%, transparent);
}

/* ==========================================================================
   Gabarit à hauteur fixe (liste, grille, calendrier, recherche)

   Le cadre est dimensionné en 600x747 puis mis à l'échelle. Sans hauteur
   imposée, l'article grandissait avec son texte : sur les vraies fiches — une
   fonction d'intervenant qui tient sur trois lignes, une citation longue,
   quatre chiffres clés — le bouton « je m'inscris » passait sous le bord du
   cadre, qui est en overflow:hidden.

   On fige donc la hauteur et on laisse le bloc de titre être la seule partie
   compressible : chiffres clés et bouton gardent leur place, le texte trop
   long est coupé proprement en fin de ligne. La modale d'aperçu, elle, n'a pas
   de hauteur imposée et montre tout.
   ========================================================================== */
.lunch-card__scale { transform-origin : top left; width : 600px; height : 747px; }

.lunch-card__scale .event-content { min-height : 0; overflow : hidden; }

.lunch-card__scale .event-title-section {
    flex       : 0 1 auto;
    min-height : 0;
    overflow   : hidden;
}

/* Le bloc de titre se laisse rogner, mais ses lignes gardent leur hauteur :
   sans cela le flex les comprime et le nom de l'intervenant est tranché. */
.lunch-card__scale .event-title-section > * { flex : 0 0 auto; }

.lunch-card__scale .event-key-numbers,
.lunch-card__scale .event-footer { flex : 0 0 auto; }

/* Coupe en fin de ligne plutôt qu'au milieu d'un mot. */
.lunch-card__scale .event-speaker-name,
.lunch-card__scale .event-speaker-function,
.lunch-card__scale .event-quote {
    display            : -webkit-box;
    -webkit-box-orient : vertical;
    overflow           : hidden;
}

.lunch-card__scale .event-speaker-name     { -webkit-line-clamp : 2; }
.lunch-card__scale .event-speaker-function { -webkit-line-clamp : 2; }
.lunch-card__scale .event-quote            { -webkit-line-clamp : 3; }

/* Un descriptif de chiffre clé peut lui aussi être long. */
.lunch-card__scale .key-number-description {
    display            : -webkit-box;
    -webkit-box-orient : vertical;
    -webkit-line-clamp : 3;
    overflow           : hidden;
}

.lunch-card__meta { display : flex; align-items : center; gap : 6px; padding-top : 8px; }

/* Le halo déborde : il faut de la place autour des cartes. */
.carousel { position : relative; }

.carousel__track {
    display          : flex;
    gap              : var(--gap-md);
    overflow-x       : auto;
    overflow-y       : hidden;
    scroll-snap-type : x proximity;
    padding          : 26px 54px 30px;
}
.carousel__track > * { scroll-snap-align : start; }

.carousel__nav {
    position         : absolute;
    top              : 50%;
    transform        : translateY(-50%);
    z-index          : 3;
    display          : grid;
    place-items      : center;
    width            : 40px;
    height           : 74px;
    border           : none;
    border-radius    : var(--radius-xs);
    background-color : var(--bg-surface);
    box-shadow       : var(--shadow-md);
    color            : var(--text-strong);
    font-size        : 1.7rem;
    cursor           : pointer;
}
.carousel__nav:hover { background-color : var(--da-primary); color : var(--accent); }
.carousel__nav--prev { left : 2px; }
.carousel__nav--next { right : 2px; }

.lunch-grid { display : grid; gap : var(--gap-md); padding : 26px 6px 20px; justify-items : center; }

/* ==========================================================================
   Calendrier : un mois, puis ses gabarits en grille
   ========================================================================== */
.cal-month { margin-bottom : var(--gap-lg); }

.cal-month__head {
    display       : flex;
    align-items   : baseline;
    gap           : var(--gap-sm);
    position      : sticky;
    top           : 0;
    z-index       : 2;
    padding       : 10px 4px;
    background-color : var(--bg-app);
    border-bottom : 1px solid var(--border-soft);
}
.cal-month__head h3 { font-size : 1.35rem; font-weight : 500; text-transform : capitalize; }
.cal-month.is-current .cal-month__head h3 { color : var(--agency); }

/* ==========================================================================
   Recherche du header — large, et suggestions au gabarit
   ========================================================================== */
/* Enfant direct du header : `margin : 0 auto` la centre dans l'espace
   restant entre le titre et les actions. */
.header-search {
    position  : relative;
    z-index   : 120;
    width     : min(760px, 50vw);
    min-width : 260px;
    margin    : 0;
}

.header-search input {
    width            : 100%;
    height           : 58px;
    padding          : 0 24px 0 52px;
    border           : 2px solid var(--border-soft);
    border-radius    : var(--radius-pill);
    background-color : var(--bg-app);
    color            : var(--text-strong);
    font-family      : var(--font-body);
    font-size        : 1.05rem;
    transition       : .2s var(--ease);
}
.header-search input::placeholder { color : var(--input-placeholder); }
.header-search input:focus {
    outline          : none;
    border-color     : var(--accent);
    background-color : var(--bg-surface);
    box-shadow       : 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent);
}

.header-search::before {
    content     : "\e808";                 /* icon-search */
    position    : absolute;
    left        : 22px;
    top         : 50%;
    transform   : translateY(-50%);
    font-size   : 1.05rem;
    font-family : "business-club-icon";
    color       : var(--text-muted);
    pointer-events : none;
}

.header-search__results {
    position         : absolute;
    top              : calc(100% + 10px);
    left             : 50%;
    transform        : translateX(-50%);
    z-index          : 200;
    width            : min(980px, calc(100vw - 160px));
    max-height       : 62vh;
    overflow-y       : auto;
    padding          : var(--gap);
    background-color : var(--bg-surface);
    border           : 1px solid var(--border-soft);
    border-radius    : var(--radius-lg);
    box-shadow       : var(--shadow-lg);
}

.search-results__grid { display : flex; gap : var(--gap); flex-wrap : wrap; padding : 14px 4px 4px; }

/* Même gabarit que partout ailleurs, en petit. */
.search-card { width : 200px; cursor : pointer; }
.search-card .lunch-card__frame { width : 200px; height : 249px; border-radius : var(--radius-sm); }
.search-card .lunch-card__scale { transform : scale(0.3333); }
.search-card__label { padding-top : 6px; }
.search-card__label strong { display : block; font-size : .88rem; }
.search-card__label span { display : block; color : var(--text-muted); font-size : .78rem; }

.header-search__empty { margin : 0; padding : 16px; color : var(--text-muted); }
.header-search__count { margin : 0 0 4px; padding : 0 4px; color : var(--text-muted); font-size : .82rem; }

@media (max-width : 1100px) {
    .header-search { max-width : none; margin : 0 var(--gap-sm); }
    .header-search input { height : 48px; font-size : .95rem; padding : 0 18px 0 46px; }
}

/* Voile flouté sous les suggestions : la page s'efface, la recherche prime. */
.search-scrim {
    position        : fixed;
    inset           : 0;
    z-index         : 100;
    background-color: color-mix(in srgb, var(--bg-app) 45%, transparent);
    backdrop-filter : blur(6px) saturate(.85);
    -webkit-backdrop-filter : blur(6px) saturate(.85);
    animation       : fade-in .18s var(--ease);
}
.search-scrim[hidden] { display : none; }

[data-theme="dark"] .search-scrim { background-color : rgba(4, 12, 20, .5); }

/* --- Logos des clubs, en pied de carte ---------------------------------- */
.club-logos { display : flex; align-items : center; gap : 8px; }

.club-logo { display : flex; align-items : center; gap : 5px; }
.club-logo > img { width : 22px; }
.club-logo > em {
    color          : var(--text-strong);
    font-family    : var(--font-display);
    font-size      : .85rem;
    font-style     : normal;
    font-weight    : 700;
    letter-spacing : .03em;
}
.club-logo--more { color : var(--text-muted); font-family : var(--font-display); font-weight : 700; font-size : .85rem; }
[data-theme="dark"] .club-logo > img { filter : brightness(1.9); }


/* --- Fil d'ariane avec retour ------------------------------------------ */
.breadcrumb-row {
    display     : flex;
    align-items : center;
    gap         : var(--gap-xs);
    flex-wrap   : wrap;
}

.breadcrumb-actions {
    display     : flex;
    align-items : center;
    gap         : var(--gap-xs);
    flex-wrap   : wrap;
}

.breadcrumb-back {
    display          : inline-flex;
    align-items      : center;
    gap              : 6px;
    padding          : 5px 16px 5px 12px;
    background-color : var(--bg-surface);
    border           : 1px solid var(--border-soft);
    border-radius    : var(--radius-lg);
    color            : var(--text-muted);
    font-size        : .9rem;
    font-weight      : 600;
    cursor           : pointer;
    transition       : .2s var(--ease);
}
.breadcrumb-back:hover { background-color : var(--da-primary); border-color : var(--da-primary); color : var(--accent); }
.breadcrumb-back span { font-size : 1.15rem; line-height : 1; }

/* ==========================================================================
   Dépôt de photos sur toute l'interface
   ========================================================================== */
.drop-overlay {
    position        : fixed;
    inset           : 0;
    z-index         : 900;
    display         : grid;
    place-items     : center;
    padding         : var(--gap);

    background-color: color-mix(in srgb, var(--da-primary) 55%, transparent);
    backdrop-filter : blur(8px) saturate(.8);
    -webkit-backdrop-filter : blur(8px) saturate(.8);

    animation       : drop-in .22s var(--ease);
}
.drop-overlay[hidden] { display : none; }

.drop-overlay__card {
    display        : grid;
    justify-items  : center;
    gap            : 10px;

    width          : min(560px, 80vw);
    padding        : var(--gap-lg) var(--gap);

    border         : 3px dashed var(--accent);
    border-radius  : var(--radius-lg);
    background-color: color-mix(in srgb, var(--bg-surface) 92%, transparent);
    text-align     : center;

    animation      : drop-card .3s var(--ease), drop-pulse 1.6s var(--ease) .3s infinite;
}
.drop-overlay__card strong { color : var(--text-strong); font-family : var(--font-display); font-size : 1.7rem; font-weight : 600; }
.drop-overlay__card span { color : var(--text-muted); }

.drop-overlay__icon {
    font-size  : 3rem;
    color      : var(--accent);
    animation  : drop-bounce 1.4s var(--ease) infinite;
}

@keyframes drop-in {
    from { opacity : 0; }
    to   { opacity : 1; }
}

@keyframes drop-card {
    from { opacity : 0; transform : scale(.94) translateY(10px); }
    to   { opacity : 1; transform : none; }
}

/* Respiration lente du liseré, pour signaler que la zone est active. */
@keyframes drop-pulse {
    0%, 100% { box-shadow : 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
    50%      { box-shadow : 0 0 0 18px color-mix(in srgb, var(--accent) 0%, transparent); }
}

@keyframes drop-bounce {
    0%, 100% { transform : translateY(0); }
    50%      { transform : translateY(-8px); }
}

/* L'encart de droite reste, mais s'anime lui aussi quand la file tourne. */
.ws__drop.is-over { animation : drop-card .25s var(--ease); }

/* ==========================================================================
   Éditeur de photo
   ========================================================================== */
.editor { display : grid; grid-template-columns : minmax(0, 1fr) 260px; gap : var(--gap); }

.editor__stage {
    position         : relative;
    display          : grid;
    place-items      : center;
    min-height       : 320px;
    max-height       : 58vh;
    padding          : var(--gap-sm);
    background-color : #0A1620;
    border-radius    : var(--radius-sm);
    overflow         : hidden;
    touch-action     : none;
}
.editor__stage img {
    max-width  : 100%;
    max-height : 54vh;
    display    : block;
    transition : filter .15s linear;
    user-select: none;
    -webkit-user-drag : none;
}

.editor__crop {
    position   : absolute;
    border     : 1px solid rgba(255, 255, 255, .9);
    box-shadow : 0 0 0 9999px rgba(0, 0, 0, .45);
    cursor     : move;
}
/* Grille des tiers, repère classique de cadrage. */
.editor__crop::before,
.editor__crop::after {
    content        : "";
    position       : absolute;
    inset          : 0;
    pointer-events : none;
    background-image : linear-gradient(to right, transparent 33.33%, rgba(255,255,255,.35) 33.33%, rgba(255,255,255,.35) 33.5%, transparent 33.5%,
                                                  transparent 66.66%, rgba(255,255,255,.35) 66.66%, rgba(255,255,255,.35) 66.83%, transparent 66.83%);
}
.editor__crop::after {
    background-image : linear-gradient(to bottom, transparent 33.33%, rgba(255,255,255,.35) 33.33%, rgba(255,255,255,.35) 33.5%, transparent 33.5%,
                                                   transparent 66.66%, rgba(255,255,255,.35) 66.66%, rgba(255,255,255,.35) 66.83%, transparent 66.83%);
}

.editor__handle {
    position         : absolute;
    width            : 16px;
    height           : 16px;
    background-color : #fff;
    border           : 2px solid var(--da-primary);
    border-radius     : 3px;
}
.editor__handle[data-handle="nw"] { top : -8px;    left : -8px;    cursor : nwse-resize; }
.editor__handle[data-handle="ne"] { top : -8px;    right : -8px;   cursor : nesw-resize; }
.editor__handle[data-handle="se"] { bottom : -8px; right : -8px;   cursor : nwse-resize; }
.editor__handle[data-handle="sw"] { bottom : -8px; left : -8px;    cursor : nesw-resize; }

.editor__panel input[type="range"] { width : 100%; accent-color : var(--da-primary); }
[data-theme="dark"] .editor__panel input[type="range"] { accent-color : var(--accent); }
.editor__panel .field > label { display : flex; justify-content : space-between; align-items : baseline; }

@media (max-width : 900px) {
    .editor { grid-template-columns : 1fr; }
}

/* Champ de nom d'archive : l'extension reste visible, non éditable. */
.zip-name { display : flex; align-items : center; gap : 0; }
.zip-name .input { border-radius : var(--radius-xs) 0 0 var(--radius-xs); }
.zip-name__ext {
    display          : grid;
    place-items      : center;
    height           : var(--input-height);
    padding          : 0 14px;
    background-color : var(--bg-chip);
    border-radius    : 0 var(--radius-xs) var(--radius-xs) 0;
    color            : var(--text-muted);
    font-family      : ui-monospace, Menlo, monospace;
    font-size        : .9rem;
}

/* Logos dans le sélecteur de clubs et la liste des clubs */
.club-pick__logo { width : 24px; flex : 0 0 24px; }
[data-theme="dark"] .club-pick__logo,
[data-theme="dark"] .club-row-logo { filter : brightness(1.9); }

.club-row-logo { width : 30px; vertical-align : middle; }

/* ==========================================================================
   Scène sans photo : zone de dépôt à bordure animée
   ========================================================================== */
.ws__empty-drop {
    display        : grid;
    justify-items  : center;
    align-content  : center;
    gap            : 10px;

    width          : 100%;
    height         : 100%;
    min-height     : 320px;
    padding        : var(--gap-lg);

    border         : none;
    border-radius  : var(--radius-md);
    background-color : var(--bg-app);
    color          : var(--text-muted);
    font-family    : var(--font-body);
    text-align     : center;
    cursor         : pointer;

    /* Bordure en pointillés animés (« marching ants ») : quatre dégradés
       répétés, un par côté, décalés en boucle. */
    background-image :
        repeating-linear-gradient(90deg,  var(--accent) 0 14px, transparent 14px 28px),
        repeating-linear-gradient(90deg,  var(--accent) 0 14px, transparent 14px 28px),
        repeating-linear-gradient(0deg,   var(--accent) 0 14px, transparent 14px 28px),
        repeating-linear-gradient(0deg,   var(--accent) 0 14px, transparent 14px 28px);
    background-size     : 100% 3px, 100% 3px, 3px 100%, 3px 100%;
    background-position : 0 0, 0 100%, 0 0, 100% 0;
    background-repeat   : no-repeat;

    animation : ants 20s linear infinite;
    transition : background-color .25s var(--ease), color .25s var(--ease);
}

.ws__empty-drop:hover { background-color : var(--row-alt); color : var(--text-strong); }

.ws__empty-drop strong { color : var(--text-strong); font-family : var(--font-display); font-size : 1.5rem; font-weight : 600; }

.ws__empty-icon {
    font-size : 2.6rem;
    color     : var(--accent);
    animation : drop-bounce 1.8s var(--ease) infinite;
}

@keyframes ants {
    to { background-position : 280px 0, -280px 100%, 0 -280px, 100% 280px; }
}

/* ==========================================================================
   Atelier — vue galerie
   ========================================================================== */
.ws-gallery {
    display               : grid;
    grid-template-columns : repeat(auto-fill, minmax(230px, 1fr));
    grid-auto-rows        : max-content;   /* sinon les rangées se compriment */
    gap                   : var(--gap-sm);
    align-content         : start;
    align-items           : start;

    flex                  : 1 1 auto;
    min-height            : 0;
    overflow-y            : auto;
    padding-right         : 4px;
}
.ws-gallery[hidden] { display : none; }

/* Pas d'overflow:hidden ici : il rognait les info-bulles des surcouches.
   C'est l'image qui porte l'arrondi. */
.gal-card {
    position         : relative;
    margin           : 0;
    background-color : var(--bg-surface);
    border-radius    : var(--radius-md);
    cursor           : zoom-in;
    box-shadow       : var(--shadow-sm);
    transition       : transform .2s var(--ease), box-shadow .2s var(--ease);
}
.gal-card:hover { transform : translateY(-3px); box-shadow : var(--shadow-md); }

/* Les surcouches se positionnent sur l'image, pas sur la carte entière :
   sinon le numéro venait se superposer à la case « Publier sur le site ». */
.gal-card__media { position : relative; display : block; }

.gal-card img {
    display       : block;
    width         : 100%;
    aspect-ratio  : 3 / 2;
    object-fit    : cover;
    border-radius : var(--radius-md) var(--radius-md) 0 0;
    background-color : var(--bg-chip);
}

.gal-card figcaption { padding : 8px 10px 10px; }

.gal-card__caption {
    display       : block;
    overflow      : hidden;
    text-overflow : ellipsis;
    white-space   : nowrap;
    color         : var(--text-strong);
    font-size     : .88rem;
}
.gal-card__caption:empty::before { content : "Sans légende"; color : var(--text-muted); font-style : italic; }

.gal-card__meta { display : block; margin-top : 2px; color : var(--text-muted); font-size : .78rem; }


.gal-card__flag {
    position         : absolute;
    top              : 8px;
    right            : 8px;
    display          : grid;
    place-items      : center;
    width            : 24px;
    height           : 24px;
    border-radius    : 50%;
    background-color : var(--accent);
    color            : var(--accent-contrast);
    font-size        : .7rem;
}

/* La bascule Atelier/Galerie s'aligne sur les autres boutons de la barre. */
[data-ws-modes] .seg { height : 42px; }

/* Galerie : rang, étoile de mise en avant, case de publication */
.gal-card[draggable="true"] { cursor : grab; }
.gal-card.is-dragging { opacity : .4; }
.gal-card.is-drop-target { outline : 2px dashed var(--accent); outline-offset : -3px; }
.gal-card.is-favorite { box-shadow : 0 0 0 2px var(--accent), var(--shadow-sm); }

.gal-card__rank {
    position         : absolute;
    bottom           : 6px;
    left             : 6px;
    z-index          : 2;
    min-width        : 22px;
    padding          : 1px 6px;
    border-radius    : var(--radius-pill);
    background       : rgba(0, 0, 0, .55);
    color            : #fff;
    font-family      : var(--font-display);
    font-size        : .72rem;
    font-weight      : 700;
    text-align       : center;
}

.gal-card__star {
    position         : absolute;
    top              : 6px;
    right            : 6px;
    z-index          : 2;
    width            : 28px;
    height           : 28px;
    border           : none;
    border-radius    : 50%;
    background       : rgba(0, 0, 0, .45);
    color            : rgba(255, 255, 255, .75);
    font-size        : 1rem;
    line-height      : 1;
    cursor           : pointer;
    transition       : .2s var(--ease);
}
.gal-card__star:hover { background : var(--accent); color : var(--accent-contrast); transform : scale(1.1); }
.gal-card__star.is-on { background : var(--accent); color : var(--accent-contrast); }

.gal-card__publish {
    display     : flex;
    align-items : center;
    gap         : 6px;
    margin-top  : 6px;
    color       : var(--text-muted);
    font-size   : .78rem;
    cursor      : pointer;
}
.gal-card__publish input { width : 14px; height : 14px; accent-color : var(--da-valid); cursor : pointer; }
.gal-card__publish:hover { color : var(--text-strong); }

[data-theme="dark"] [data-theme="dark"] .confirm__mark { color : var(--accent); }

.gal-card__delete {
    position         : absolute;
    top              : 6px;
    right            : 40px;
    z-index          : 2;
    width            : 28px;
    height           : 28px;
    border           : none;
    border-radius    : 50%;
    background       : rgba(0, 0, 0, .45);
    color            : rgba(255, 255, 255, .75);
    font-family      : "business-club-icon";
    font-size        : .85rem;
    cursor           : pointer;
    opacity          : 0;
    transition       : .2s var(--ease);
}
.gal-card:hover .gal-card__delete { opacity : 1; }
.gal-card__delete:hover { background : var(--da-alert); color : #fff; transform : scale(1.1); }

/* --- Réordonnancement au pointeur ---------------------------------------
   Pendant le déplacement : les autres cartes s'estompent, un emplacement en
   pointillés dorés montre où la photo va tomber, et une copie suit le curseur. */
.ws-gallery.is-reordering .gal-card {
    opacity   : .4;
    filter    : grayscale(.7);
    transform : scale(.98);
}
.ws-gallery.is-reordering .gal-card.is-lifted { display : none; }

body.is-grabbing, body.is-grabbing * { cursor : grabbing !important; user-select : none; }

/* Emplacement d'accueil : il s'ouvre dans la grille, les voisines se décalent. */
.gal-slot {
    border        : 3px dashed var(--accent);
    border-radius : var(--radius-md);
    background-color : color-mix(in srgb, var(--accent) 14%, transparent);
    animation     : slot-in .18s var(--ease);
}

@keyframes slot-in {
    from { opacity : 0; transform : scale(.94); }
    to   { opacity : 1; transform : none; }
}

/* Copie qui suit le curseur */
.gal-ghost {
    overflow       : hidden;
    position       : fixed;
    z-index        : 950;
    margin         : 0;
    pointer-events : none;
    opacity        : .95;
    transform      : rotate(-3deg) scale(1.04);
    box-shadow     : var(--shadow-lg);
    border-radius  : var(--radius-md);
    overflow       : hidden;
    filter         : none !important;
}
.gal-ghost .gal-card__delete { display : none; }

.gal-card.just-moved { animation : landed .7s var(--ease); }

/* Pas de transform ici : une carte encore en cours d'animation renverrait
   un cadre faussé au moment de la resaisir. */
@keyframes landed {
    0%   { box-shadow : 0 0 0 4px var(--accent); }
    100% { box-shadow : var(--shadow-sm); }
}

/* --- Navigation d'une photo à l'autre dans l'atelier -------------------- */
.ws__step {
    position         : absolute;
    top              : 50%;
    transform        : translateY(-50%);
    z-index          : 2;

    display          : grid;
    place-items      : center;
    width            : 44px;
    height           : 72px;

    border           : none;
    border-radius    : var(--radius-xs);
    background-color : rgba(255, 255, 255, .12);
    color            : #fff;
    font-size        : 1.8rem;
    line-height      : 1;
    cursor           : pointer;
    opacity          : 0;
    transition       : opacity .2s var(--ease), background-color .2s var(--ease);
}
.ws__canvas:hover .ws__step,
.ws__step:focus-visible { opacity : 1; }
.ws__step:hover { background-color : var(--accent); color : var(--accent-contrast); }
.ws__step--prev { left : 12px; }
.ws__step--next { right : 12px; }

.ws__counter {
    position         : absolute;
    bottom           : 12px;
    left             : 50%;
    transform        : translateX(-50%);
    padding          : 3px 12px;
    border-radius    : var(--radius-pill);
    background       : rgba(0, 0, 0, .5);
    color            : #fff;
    font-size        : .8rem;
    letter-spacing   : .04em;
}

/* La vignette en cours de travail est nettement encadrée. */
.thumb-card { transition : outline-color .2s var(--ease), transform .2s var(--ease); outline : 3px solid transparent; outline-offset : -3px; }
.thumb-card.is-current {
    outline    : 3px solid var(--accent);
    transform  : scale(1.04);
    box-shadow : var(--shadow-md);
    z-index    : 1;
}
.thumb-card.is-current img { filter : none; }
.ws__thumbs .thumb-card:not(.is-current) img { filter : saturate(.85) brightness(.94); }
.thumb-card.is-current::after {
    content          : "";
    position         : absolute;
    inset            : 0;
    box-shadow       : inset 0 0 0 2px rgba(255, 255, 255, .5);
    pointer-events   : none;
}

/* --- Panneau d'inspection : légende, actions, personnes, informations --- */
.ws__inspector {
    flex          : 0 0 auto;
    display       : grid;
    gap           : var(--gap-sm);
    padding-bottom: var(--gap-sm);
    margin-bottom : var(--gap-sm);
    border-bottom : 1px solid var(--border-soft);
}
.ws__inspector:empty { display : none; }

.ws__caption { display : grid; gap : 8px; }
.ws__caption label {
    color          : var(--text-muted);
    font-size      : .76rem;
    font-weight    : 700;
    letter-spacing : .09em;
    text-transform : uppercase;
}
.ws__caption .textarea { min-height : 78px; }

.ws__actions { display : grid; gap : 6px; }
.ws__actions .btn-ghost.is-on { background-color : var(--accent); border-color : var(--accent); color : var(--accent-contrast); }

.ws__in-sel {
    display     : flex;
    flex-direction : column;
    gap         : 8px;
    padding-top : var(--gap-sm);
    border-top  : 1px solid var(--border-soft);
    margin-top  : 0;
}

.ws__facts {
    display               : grid;
    grid-template-columns : auto 1fr;
    gap                   : 3px 10px;
    margin                : 0;
    padding-top           : var(--gap-sm);
    border-top            : 1px solid var(--border-soft);
    font-size             : .8rem;
}
.ws__facts dt { color : var(--text-muted); }
.ws__facts dd { margin : 0; color : var(--text-strong); overflow : hidden; text-overflow : ellipsis; }

/* La scène n'a plus que l'image : elle prend toute la hauteur. */
.ws__stage > .ws__canvas { border-radius : var(--radius-md); }

/* Voile flouté derrière les panneaux Notifications et Profil */
.header-scrim {
    position        : fixed;
    inset           : 0;
    z-index         : 9998;                 /* juste sous les panneaux (9999) */
    background-color: rgba(0, 32, 55, .35);
    backdrop-filter : blur(7px) saturate(.85);
    -webkit-backdrop-filter : blur(7px) saturate(.85);
    animation       : fade-in .18s var(--ease);
}
.header-scrim[hidden] { display : none; }

[data-theme="dark"] .header-scrim { background-color : rgba(4, 12, 20, .5); }

/* Confirmation de suppression d'une photo : visuel + provenance */
.confirm-photo { display : grid; grid-template-columns : 180px 1fr; gap : var(--gap); align-items : start; }

.confirm-photo img {
    width         : 100%;
    aspect-ratio  : 3 / 2;
    object-fit    : cover;
    border-radius : var(--radius-sm);
    background-color : var(--bg-chip);
}

.confirm-photo__caption { margin : 0 0 10px; color : var(--text-strong); font-size : 1.05rem; }
.confirm-photo__caption em { color : var(--text-muted); }

.confirm-photo__facts dl {
    display               : grid;
    grid-template-columns : auto 1fr;
    gap                   : 3px 10px;
    margin                : 0 0 12px;
    font-size             : .85rem;
}
.confirm-photo__facts dt { color : var(--text-muted); }
.confirm-photo__facts dd { margin : 0; color : var(--text-strong); }

@media (max-width : 560px) {
    .confirm-photo { grid-template-columns : 1fr; }
}

/* ==========================================================================
   Info-bulle unique, posée sur le <body> : aucun rognage, aucun conflit
   d'empilement avec les conteneurs défilants ou les modales.
   ========================================================================== */
.tip {
    position         : fixed;
    z-index          : 10000;
    max-width        : 280px;
    padding          : 7px 11px;

    border-radius    : var(--radius-xs);
    background-color : var(--da-primary);
    color            : #fff;
    font-family      : var(--font-body);
    font-size        : .82rem;
    font-weight      : 400;
    line-height      : 1.35;
    text-align       : center;
    box-shadow       : var(--shadow-md);

    pointer-events   : none;
    animation        : tip-in .12s var(--ease);
}
.tip[hidden] { display : none; }

[data-theme="dark"] .tip { background-color : var(--accent); color : var(--accent-contrast); }

@keyframes tip-in {
    from { opacity : 0; transform : translateY(3px); }
    to   { opacity : 1; transform : none; }
}

/* Indicateur d'attente des traitements simulés */
.spinner {
    display       : inline-block;
    width         : 13px;
    height        : 13px;
    border        : 2px solid currentColor;
    border-top-color : transparent;
    border-radius : 50%;
    animation     : spin .7s linear infinite;
    vertical-align: -2px;
}

@keyframes spin { to { transform : rotate(1turn); } }

/* Un bouton verrouillé reste lisible : on grise sans effacer. */
.btn[disabled], .btn[aria-disabled="true"] {
    opacity        : .6;
    pointer-events : none;
    filter         : saturate(.5);
}

/* Rappel du nombre de comptes sous la liste de connexion. */
.login__accounts-more {
    margin   : 10px 0 0;
    color    : var(--color-nav);
    font-size: 12px;
    text-align: center;
}


/* ==========================================================================
   Sélections — remplacent les cases « visible sur le site » et « visible
   sur l'emailing carte postale » de l'ancien formulaire
   ========================================================================== */
.sel-strip {
    flex             : 0 0 auto;
    display          : flex;
    flex-direction   : column;
    gap              : 8px;
    margin-bottom    : var(--gap-sm);
}

.sel-strip__chips { display : flex; flex-wrap : wrap; gap : 6px; }

.sel-chip {
    display          : inline-flex;
    align-items      : center;
    gap              : 2px;
    height           : 34px;
    padding          : 0 4px 0 12px;
    border           : 1px solid var(--border-soft);
    border-radius    : var(--radius-pill);
    background-color : var(--bg-surface);
    color            : var(--text-default);
    font-family      : var(--font-body);
    font-size        : .9rem;
    cursor           : pointer;
    transition       : border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
button.sel-chip { padding-right : 12px; }
.sel-chip:hover { border-color : var(--accent); }
.sel-chip em { font-style : normal; font-size : .78rem; color : var(--text-muted); margin-left : 4px; }
.sel-chip.is-active { background-color : var(--da-primary); border-color : var(--da-primary); color : #FFF; }
.sel-chip.is-active em { color : var(--da-gold); }
[data-theme="dark"] .sel-chip.is-active { background-color : var(--accent); border-color : var(--accent); color : var(--accent-contrast); }
[data-theme="dark"] .sel-chip.is-active em { color : inherit; opacity : .7; }

.sel-chip__name {
    display     : inline-flex;
    align-items : center;
    gap         : 4px;
    padding     : 0 6px 0 0;
    border      : 0;
    background  : none;
    color       : inherit;
    font        : inherit;
    cursor      : pointer;
}
.sel-chip__lock { font-size : .8rem; opacity : .6; }
.sel-chip--site       { box-shadow : inset 3px 0 0 var(--da-valid); }
.sel-chip--newsletter { box-shadow : inset 3px 0 0 var(--da-info); }

.sel-chip__act {
    display          : grid;
    place-items      : center;
    width            : 24px;
    height           : 24px;
    border           : 0;
    border-radius    : 50%;
    background       : none;
    color            : inherit;
    font-size        : .75rem;
    opacity          : .55;
    cursor           : pointer;
}
.sel-chip__act:hover { opacity : 1; background-color : var(--row-hover); }
.sel-chip.is-active .sel-chip__act:hover { background-color : rgba(255, 255, 255, .15); }

.sel-bar {
    display          : flex;
    align-items      : center;
    flex-wrap        : wrap;
    gap              : 6px;
    min-height       : 42px;
    padding          : 4px 6px 4px 12px;
    border-radius    : var(--radius-sm);
    background-color : var(--bg-surface);
    transition       : background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.sel-bar.is-on { background-color : var(--da-gold-pale); box-shadow : inset 0 0 0 1px var(--da-gold); }
[data-theme="dark"] .sel-bar.is-on { background-color : var(--bg-surface-2); box-shadow : inset 0 0 0 1px var(--accent); }
.sel-bar__count { margin-right : auto; font-size : .9rem; color : var(--text-muted); }
.sel-bar.is-on .sel-bar__count { color : var(--text-strong); font-weight : 600; }

/* --- Case à cocher sur les vignettes --- */
.pick {
    position         : absolute;
    top              : 6px;
    left             : 6px;
    z-index          : 2;
    width            : 22px;
    height           : 22px;
    border           : 2px solid #FFF;
    border-radius    : 6px;
    background-color : rgba(0, 32, 55, .35);
    box-shadow       : 0 1px 3px rgba(0, 0, 0, .35);
    cursor           : pointer;
    opacity          : 0;
    transition       : opacity .15s var(--ease), background-color .15s var(--ease), transform .15s var(--ease);
}
.pick:focus-visible { opacity : 1; outline : 2px solid var(--accent); outline-offset : 2px; }
.thumb-card:hover .pick, .gal-card:hover .pick, .is-picked .pick { opacity : 1; }
.pick:hover { transform : scale(1.1); }
.is-picked .pick { background-color : var(--da-valid); border-color : var(--da-valid); }
.is-picked .pick::after {
    content       : "";
    position      : absolute;
    left          : 5px;
    top           : 1px;
    width         : 6px;
    height        : 11px;
    border        : solid #143017;
    border-width  : 0 2.5px 2.5px 0;
    transform     : rotate(45deg);
}
.thumb-card.is-picked, .gal-card.is-picked { box-shadow : 0 0 0 3px var(--da-valid); }
/* Dès qu'une photo est cochée, toutes les cases restent visibles. */
.ws__thumbs:has(.is-picked) .pick, .ws-gallery:has(.is-picked) .pick { opacity : 1; }

/* --- Pastilles Site / Emailing --- */
.marks { position : absolute; right : 4px; bottom : 4px; display : flex; gap : 3px; }
.marks--inline { position : static; margin-top : 6px; }
.mark {
    padding        : 1px 6px;
    border-radius  : var(--radius-pill);
    font-size      : .68rem;
    font-weight    : 600;
    letter-spacing : .02em;
    line-height    : 1.5;
}
.mark--site       { background-color : var(--da-valid); color : #143017; }
.mark--newsletter { background-color : var(--da-info);  color : #04283A; }
.thumb-card .mark { font-size : 0; width : 9px; height : 9px; padding : 0; box-shadow : 0 0 0 1.5px #FFF; }

/* --- Sélections d'une photo (inspecteur) --- */
.sel-toggle {
    padding          : 4px 10px;
    border           : 1px solid var(--border-soft);
    border-radius    : var(--radius-pill);
    background-color : var(--bg-app);
    color            : var(--text-default);
    font-family      : var(--font-body);
    font-size        : .82rem;
    cursor           : pointer;
    transition       : .2s var(--ease);
}
.sel-toggle:hover { border-color : var(--accent); }
.sel-toggle.is-on { background-color : var(--accent); border-color : var(--accent); color : var(--accent-contrast); }
.sel-toggle.is-on::before { content : "✓ "; }
.sel-toggle--site.is-on       { background-color : var(--da-valid); border-color : var(--da-valid); color : #143017; }
.sel-toggle--newsletter.is-on { background-color : var(--da-info);  border-color : var(--da-info);  color : #04283A; }

/* --- Modale « Enregistrer dans une sélection » --- */
.sel-pick-list { display : grid; gap : 6px; max-height : 46vh; overflow-y : auto; }
.sel-pick {
    display          : grid;
    gap              : 2px;
    padding          : 10px 12px;
    border           : 1px solid var(--border-soft);
    border-radius    : var(--radius-sm);
    background-color : var(--bg-app);
    color            : var(--text-strong);
    font-family      : var(--font-body);
    text-align       : left;
    cursor           : pointer;
    transition       : .2s var(--ease);
}
.sel-pick:hover { border-color : var(--accent); background-color : var(--row-hover); }
.sel-pick--site       { box-shadow : inset 3px 0 0 var(--da-valid); }
.sel-pick--newsletter { box-shadow : inset 3px 0 0 var(--da-info); }


/* ==========================================================================
   File d'import — pensée pour des centaines de fichiers
   ========================================================================== */
/* Carte flottante : visible quel que soit le défilement de l'atelier. */
.upq {
    position         : fixed;
    right            : 24px;
    bottom           : 24px;
    z-index          : 60;
    width            : 380px;
    max-width        : calc(100vw - 32px);
    display          : grid;
    gap              : 8px;
    padding          : 14px;
    border-radius    : var(--radius-md);
    background-color : var(--bg-surface);
    box-shadow       : var(--shadow-lg), inset 0 0 0 1px var(--border-soft);
    animation        : upq-in .35s cubic-bezier(.2, 1.2, .4, 1);
}
@media (max-width : 640px) { .upq { right : 16px; bottom : 16px; } }
@keyframes upq-in { from { opacity : 0; transform : translateY(16px); } }

.upq__head { display : flex; align-items : center; gap : 8px; }
.upq__head strong { font-size : .95rem; color : var(--text-strong); }
.upq__count { margin-left : auto; font-family : var(--font-display); font-size : 1.05rem; font-weight : 600; color : var(--text-strong); font-variant-numeric : tabular-nums; }

.upq__spinner {
    flex          : 0 0 auto;
    width         : 16px;
    height        : 16px;
    border        : 2px solid var(--border-soft);
    border-top-color : var(--da-info);
    border-radius : 50%;
    animation     : upq-spin .8s linear infinite;
}
.upq[data-state="paused"] .upq__spinner { animation-play-state : paused; border-top-color : var(--da-standby); }
.upq[data-state="done"]   .upq__spinner { animation : none; border-color : var(--da-valid); background-color : var(--da-valid); }
.upq[data-state="error"]  .upq__spinner { animation : none; border-color : var(--da-alert); background-color : var(--da-alert); }

.upq__bar {
    position         : relative;
    height           : 10px;
    border-radius    : var(--radius-pill);
    background-color : var(--border-soft);
    overflow         : hidden;
}
.upq__fill {
    height           : 100%;
    width            : 0;
    border-radius    : inherit;
    background-color : var(--da-info);
    background-image : linear-gradient(45deg, rgba(255,255,255,.28) 25%, transparent 25%, transparent 50%,
                                              rgba(255,255,255,.28) 50%, rgba(255,255,255,.28) 75%, transparent 75%);
    background-size  : 20px 20px;
    animation        : upq-stripes .7s linear infinite;
    transition       : width .35s var(--ease);
}
.upq[data-state="paused"] .upq__fill { animation-play-state : paused; background-color : var(--da-standby); }
.upq[data-state="done"]   .upq__fill { animation : none; background-image : none; background-color : var(--da-valid); }
.upq[data-state="error"]  .upq__fill { animation : none; background-image : none; background-color : var(--da-standby); }

.upq__stats { font-size : .8rem; color : var(--text-muted); font-variant-numeric : tabular-nums; }

.upq__film {
    display    : flex;
    gap        : 4px;
    overflow   : hidden;
    height     : 38px;
    mask-image : linear-gradient(90deg, #000 75%, transparent);
}
.upq__film:empty { display : none; }
.upq__film img {
    flex          : 0 0 auto;
    width         : 50px;
    height        : 38px;
    object-fit    : cover;
    border-radius : var(--radius-xs);
    animation     : upq-pop .45s cubic-bezier(.2, 1.4, .4, 1);
}

.upq__list { display : grid; gap : 4px; }
.upq__list:empty { display : none; }
.upq__row {
    display               : grid;
    grid-template-columns : minmax(0, 1fr) 70px;
    align-items           : center;
    gap                   : 8px;
    font-size             : .8rem;
}
.upq__name { overflow : hidden; text-overflow : ellipsis; white-space : nowrap; color : var(--text-default); }
.upq__mini { height : 4px; border-radius : var(--radius-pill); background-color : var(--border-soft); overflow : hidden; }
.upq__mini span { display : block; height : 100%; background-color : var(--da-info); transition : width .3s var(--ease); }
.upq__row[data-state="error"] { grid-template-columns : minmax(0, 1fr) auto; }
.upq__err { color : var(--da-alert); font-size : .75rem; }
.upq__more { font-size : .8rem; color : var(--text-muted); }

.upq__actions { display : flex; flex-wrap : wrap; gap : 6px; }
.upq__actions:empty { display : none; }

@keyframes upq-spin    { to { transform : rotate(360deg); } }
@keyframes upq-stripes { to { background-position : 20px 0; } }
@keyframes upq-pop     { from { opacity : 0; transform : scale(.4) translateY(6px); } }

.ws__drop[hidden], .ws__closed[hidden], .upq[hidden], .sel-strip[hidden], .pc[hidden] { display : none; }

/* Dépôt fermé tant que la carte postale n'est pas créée */
.ws__closed {
    display          : grid;
    place-items      : center;
    gap              : 6px;
    padding          : var(--gap) var(--gap-sm);
    border           : 2px dashed var(--border-soft);
    border-radius    : var(--radius-sm);
    background-color : var(--bg-app);
    color            : var(--text-muted);
    text-align       : center;
    font-size        : .88rem;
}
.ws__closed strong { color : var(--text-strong); }
.ws__closed [class^="icon-"] { font-size : 1.5rem; color : var(--da-standby); }


/* ==========================================================================
   Carte postale — circuit et formulaire
   ========================================================================== */
.pc {
    flex       : 1 1 auto;
    min-height : 0;
    overflow-y : auto;
    padding-right : 4px;
}
.pc__grid {
    display               : grid;
    grid-template-columns : minmax(280px, 420px) minmax(0, 1fr);
    gap                   : var(--gap);
    align-items           : start;
}
@media (max-width : 900px) { .pc__grid { grid-template-columns : 1fr; } }

.pc__card {
    display          : grid;
    gap              : var(--gap-sm);
    padding          : var(--gap);
    border-radius    : var(--radius-md);
    background-color : var(--bg-surface);
}
.pc__title {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    gap             : 8px;
    margin          : 0;
    font-family     : var(--font-display);
    font-size       : 1.25rem;
    color           : var(--text-strong);
}
.pc__stage--scheduled, .pc__stage--due { background-color : var(--da-standby); color : #3A2708; }
.pc__stage--photos  { background-color : var(--da-info);  color : #04283A; }
.pc__stage--prepare { background-color : var(--agency);   color : #FFF; }
.pc__stage--review  { background-color : var(--da-gold);  color : var(--text-on-gold); }
.pc__stage--online  { background-color : var(--da-valid); color : #143017; }

.pc-flow { list-style : none; margin : 0; padding : 0; display : grid; }
.pc-flow__step {
    position     : relative;
    display      : grid;
    gap          : 2px;
    padding      : 0 0 18px 30px;
}
.pc-flow__step:last-child { padding-bottom : 0; }
/* Le fil qui relie les étapes */
.pc-flow__step::before {
    content          : "";
    position         : absolute;
    left             : 8px;
    top              : 18px;
    bottom           : -2px;
    width            : 2px;
    background-color : var(--border-soft);
}
.pc-flow__step:last-child::before { display : none; }
.pc-flow__step.is-done::before { background-color : var(--da-valid); }
.pc-flow__step strong { color : var(--text-strong); font-size : .95rem; }
.pc-flow__step:not(.is-done):not(.is-current) strong { color : var(--text-muted); font-weight : 500; }

.pc-flow__dot {
    position         : absolute;
    left             : 0;
    top              : 1px;
    width            : 18px;
    height           : 18px;
    border           : 2px solid var(--border-strong);
    border-radius    : 50%;
    background-color : var(--bg-surface);
}
.pc-flow__step.is-done .pc-flow__dot { border-color : var(--da-valid); background-color : var(--da-valid); }
.pc-flow__step.is-done .pc-flow__dot::after {
    content      : "";
    position     : absolute;
    left         : 4.5px;
    top          : 1px;
    width        : 4px;
    height       : 8px;
    border       : solid #143017;
    border-width : 0 2px 2px 0;
    transform    : rotate(45deg);
}
.pc-flow__step.is-current .pc-flow__dot {
    border-color : var(--agency);
    animation    : pc-pulse 1.6s ease-out infinite;
}
@keyframes pc-pulse {
    0%   { box-shadow : 0 0 0 0 rgba(210, 20, 115, .45); }
    100% { box-shadow : 0 0 0 10px rgba(210, 20, 115, 0); }
}

.pc__form { display : grid; gap : var(--gap-sm); }
.pc__shooters { border : 0; padding : 0; margin : 0; display : flex; flex-wrap : wrap; gap : 6px 16px; }
.pc__shooters legend { margin-bottom : 6px; }
.pc__shooters .field__hint { flex-basis : 100%; }
.pc__check { display : inline-flex; align-items : center; gap : 6px; font-size : .9rem; cursor : pointer; }
.pc__check input { accent-color : var(--da-valid); }
.pc__sels { display : grid; grid-template-columns : 1fr 1fr; gap : 8px; }
@media (max-width : 600px) { .pc__sels { grid-template-columns : 1fr; } }
.pc__actions { display : flex; flex-wrap : wrap; gap : 8px; }