/*
 * CSPM — thème de l'espace membres (refonte visuelle)
 * Chargé APRÈS bootstrap 2, font-awesome et style.css : il restyle le HTML existant sans le modifier.
 * Palette tirée du logo du club : bleu #006DBA, bleu vif #018BD6, avec le bleu nuit et le vert citron de la refonte.
 * Tout est limité à l'écran (@media screen) : l'impression (feuilles de sécurité, PDF) reste inchangée.
 */
@media screen {

:root {
    --cspm-ink: #06233A;
    --cspm-ink-2: #0B3454;
    --cspm-blue: #006DBA;
    --cspm-blue-deep: #00508A;
    --cspm-blue-soft: #E1F0FB;
    --cspm-lime: #C9F04A;
    --cspm-bg: #F2F7F8;
    --cspm-card: #FFFFFF;
    --cspm-line: #D9E5E9;
    --cspm-line-strong: #C5D5DB;
    --cspm-muted: #46606F;
    --cspm-danger: #A32A25;
    --cspm-warn-bg: #FFF4DC;
    --cspm-warn-line: #F0D79A;
    --cspm-warn-ink: #5C3D00;
    --cspm-radius: 24px;
    --cspm-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --cspm-font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
}

/* ---------- Base ---------- */
html body {
    background: var(--cspm-bg);
    color: var(--cspm-ink);
    font: 400 15px/1.55 var(--cspm-font);
    text-shadow: none;
}
a { color: var(--cspm-blue); }
a:hover, a:focus { color: var(--cspm-ink); }

h1, h2, h3, h4, h5, h6,
thead th, tbody th, .menu, blockquote {
    font-family: var(--cspm-font-display);
    color: var(--cspm-ink);
    letter-spacing: -0.01em;
}
h1 { font-weight: 800; }
h2 { font-size: 30px; line-height: 1.15; font-weight: 800; }
h3 { font-size: 22px; line-height: 1.2; font-weight: 600; }
h4 { font-size: 18px; line-height: 1.25; font-weight: 600; }
h5 { font-size: 15px; font-weight: 600; }
.center { text-align: center; }
button, a.btn, input[type="submit"], input[type="reset"], input[type="button"] { font-family: var(--cspm-font); }

.container-fluid { max-width: 1240px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; box-sizing: border-box; }

/* ---------- En-tête ---------- */
.app-header { background: #FFFFFF; border-bottom: 1px solid var(--cspm-line); }
.app-header-inner {
    max-width: 1240px; margin: 0 auto; padding: 10px 20px; box-sizing: border-box;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
}
.app-logo { display: flex; align-items: center; gap: 12px; line-height: 1.2; flex: none; text-decoration: none; }
.app-logo-text { font-family: var(--cspm-font-display); font-weight: 600; font-size: 15px; line-height: 1.2; color: var(--cspm-blue); }
.app-logo img { height: 52px; width: auto; display: block; }
.app-nav { flex: 1 1 380px; min-width: 0; }
.app-user {
    flex: 0 1 auto; margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
    gap: 6px 14px; font-size: 14px; color: var(--cspm-muted); text-align: right;
}
.app-user a { color: var(--cspm-muted); text-decoration: none; }
.app-user a:hover { color: var(--cspm-ink); }
.app-user .app-user-name { color: var(--cspm-ink); font-weight: 500; }
.app-user input#switchuser { margin: 0; width: 160px; height: 32px; }
.app-login { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.app-login input[type="text"], .app-login input[type="password"] { width: 150px; margin: 0; }
.app-login .red { color: var(--cspm-danger); font-size: 13px; }

/* ---------- Menu principal (navbar bootstrap restylée en pilules) ---------- */
.app-nav .navbar { margin: 0; }
.app-nav .navbar-inner {
    background: none; background-image: none; filter: none; border: 0; box-shadow: none;
    padding: 0; min-height: 0; border-radius: 0;
}
.app-nav .navbar .container { width: auto; padding: 0; margin: 0; }
.app-nav .navbar .nav { margin: 0; float: none; }
.app-nav .navbar .nav > li { float: none; display: inline-block; }
.app-nav .navbar-inverse .nav > li > a,
.app-nav .navbar .nav > li > a {
    color: var(--cspm-muted); text-shadow: none; font-weight: 500; font-size: 14px;
    padding: 9px 14px; border-radius: 999px; margin: 2px 1px; background: none; line-height: 20px;
}
.app-nav .navbar-inverse .nav > li > a:hover,
.app-nav .navbar-inverse .nav > li > a:focus { background: var(--cspm-blue-soft); color: var(--cspm-ink); }
.app-nav .navbar-inverse .nav .active > a,
.app-nav .navbar-inverse .nav .active > a:hover,
.app-nav .navbar-inverse .nav .active > a:focus,
.app-nav .navbar-inverse .nav li.dropdown.open > .dropdown-toggle {
    background: var(--cspm-ink); color: #FFFFFF; box-shadow: none;
}
.app-nav .navbar-inverse .nav > li > a [class^="icon-"],
.app-nav .navbar-inverse .nav > li > a [class*=" icon-"] { opacity: 0.85; }
.app-nav .caret { border-top-color: currentColor; border-bottom-color: currentColor; opacity: 0.7; }
.dropdown-menu {
    border: 1px solid var(--cspm-line); border-radius: 16px; padding: 8px; margin-top: 6px;
    box-shadow: 0 16px 36px rgba(6, 35, 58, 0.14);
}
.dropdown-menu > li > a { border-radius: 10px; padding: 8px 12px; color: var(--cspm-ink); }
.dropdown-menu .nav-header {
    padding: 10px 12px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--cspm-muted); text-shadow: none;
}
.dropdown-menu .divider { background: var(--cspm-line); border-bottom: 0; margin: 6px 0; }
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover { background: var(--cspm-ink); color: #FFFFFF; }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
    background: var(--cspm-blue-soft); color: var(--cspm-ink); background-image: none; filter: none;
}
.app-nav .navbar .btn-navbar {
    background: var(--cspm-ink); background-image: none; filter: none; border: 0; border-radius: 12px;
    box-shadow: none; padding: 10px 12px; margin: 0;
}
.app-nav .navbar .btn-navbar .icon-bar { background: #FFFFFF; box-shadow: none; }

/* ---------- Cartes (.well) ---------- */
.well {
    background: var(--cspm-card); border: 1px solid var(--cspm-line); border-radius: var(--cspm-radius);
    box-shadow: none; padding: 22px 24px;
}
.well h4 { margin-top: 0; }
.sidewidget { margin-bottom: 18px; }
.well hr { border-top: 1px solid var(--cspm-line); border-bottom: 0; }
/* Blocs latéraux de l'accueil (adhésion, services, documents, photos) : titre simple au lieu du bandeau dégradé */
.well.sidewidget { padding: 22px 24px; border-color: var(--cspm-line); }
.well.sidewidget h4 {
    color: var(--cspm-ink); background: none; background-image: none; filter: none; border: 0; box-shadow: none; border-radius: 0;
    margin: 0 0 12px; padding: 0; font-size: 19px; font-weight: 600;
}
.well.sidewidget h4 [class^="icon-"], .well.sidewidget h4 [class*=" icon-"] { color: var(--cspm-blue); margin-right: 6px; }
.well.sidewidget ul { list-style: none; margin: 0; padding: 0; }
.well.sidewidget ul li { padding: 10px 0; border-top: 1px solid var(--cspm-line); }
.well.sidewidget ul li:first-child { border-top: 0; }
.well.sidewidget ul li a { font-weight: 500; text-decoration: none; }
/* Informations du moment */
div.information { position: relative; padding: 22px 24px; }
div.information h3.information-titre { margin-top: 0; padding-right: 150px; }
div.information span.information-date { position: absolute; top: 24px; right: 24px; margin-top: 0; float: none; text-align: right; line-height: 1.4; }
.sidewidget iframe { max-width: 100%; border: 0; }

/* ---------- Boutons ---------- */
.btn {
    border-radius: 999px; border: 1.5px solid var(--cspm-line-strong); background: #FFFFFF; background-image: none;
    filter: none; color: var(--cspm-ink); text-shadow: none; box-shadow: none;
    font-weight: 600; font-size: 14px; line-height: 20px; padding: 9px 18px;
}
.btn:hover, .btn:focus { background: var(--cspm-bg); color: var(--cspm-ink); background-position: 0 0; }
.btn:active, .btn.active { box-shadow: none; background: var(--cspm-blue-soft); }
.btn-primary, .btn-primary.disabled, .btn-primary[disabled] {
    background: var(--cspm-ink); border-color: var(--cspm-ink); color: #FFFFFF;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active { background: var(--cspm-ink-2); border-color: var(--cspm-ink-2); color: #FFFFFF; }
.btn-info { background: var(--cspm-blue-soft); border-color: var(--cspm-blue); color: var(--cspm-blue-deep); }
.btn-info:hover, .btn-info:focus { background: #CFE6F8; color: var(--cspm-blue-deep); }
.btn-success { background: #E7F6E9; border-color: #9ED7AA; color: #14532D; }
.btn-success:hover { background: #D6EFDB; color: #14532D; }
.btn-warning { background: var(--cspm-warn-bg); border-color: #E2C48A; color: var(--cspm-warn-ink); }
.btn-warning:hover { background: #FFEBC2; color: var(--cspm-warn-ink); }
.btn-danger { background: #FFFFFF; border-color: #E5C2C0; color: var(--cspm-danger); }
.btn-danger:hover { background: #FBEDEC; color: var(--cspm-danger); }
.btn-inverse { background: var(--cspm-ink); border-color: var(--cspm-ink); color: #FFFFFF; }
.btn-large { padding: 12px 24px; font-size: 16px; border-radius: 999px; }
.btn-small { padding: 6px 14px; font-size: 13px; border-radius: 999px; }
.btn-mini { padding: 3px 10px; font-size: 12px; border-radius: 999px; }
.btn-group > .btn { border-radius: 0; }
.btn-group > .btn:first-child { border-radius: 999px 0 0 999px; }
.btn-group > .btn:last-child, .btn-group > .dropdown-toggle { border-radius: 0 999px 999px 0; }
.btn-group > .btn:only-child { border-radius: 999px; }
.btn-group > .btn + .btn { margin-left: -1.5px; }
.btn [class^="icon-"], .btn [class*=" icon-"] { margin-right: 4px; }

/* ---------- Formulaires ---------- */
input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"],
input[type="tel"], input[type="url"], input[type="date"], input[type="time"], input:not([type]),
textarea, select, .uneditable-input {
    box-sizing: border-box; height: 40px; padding: 8px 14px; border: 1.5px solid var(--cspm-line-strong);
    border-radius: 12px; box-shadow: none; background-color: #FFFFFF; color: var(--cspm-ink);
    font: 400 15px/22px var(--cspm-font); margin-bottom: 8px; vertical-align: middle; transition: none;
}
textarea { height: auto; min-height: 90px; padding: 10px 14px; }
select { padding: 0 10px; }
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="number"]:focus,
input[type="search"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input:not([type]):focus,
textarea:focus, select:focus {
    border-color: var(--cspm-blue); box-shadow: 0 0 0 3px rgba(1, 139, 214, 0.25); outline: 0;
}
input[type="radio"], input[type="checkbox"] { margin: 0 4px 2px 0; }
.input-append .add-on, .input-prepend .add-on, .input-append .btn, .input-prepend .btn {
    height: 40px; box-sizing: border-box; padding: 8px 12px; line-height: 22px;
    border: 1.5px solid var(--cspm-line-strong); background: var(--cspm-bg); color: var(--cspm-muted); text-shadow: none;
}
.input-append input { border-radius: 12px 0 0 12px; }
.input-append .add-on:last-child, .input-append .btn:last-child { border-radius: 0 12px 12px 0; }
.input-mini { width: 70px; }
.input-small { width: 140px; }
input.datepicker, #activite_date { width: 120px !important; }
.hoursel, select.hoursel { width: auto !important; min-width: 62px; }
label { font-weight: 500; }
.form-horizontal .control-label { font-weight: 500; }
.help-block, .help-inline { color: var(--cspm-muted); }

/* ---------- Tableaux ---------- */
.table { background: transparent; border-collapse: separate; border-spacing: 0; }
.table th, .table td { border-top: 1px solid var(--cspm-line); padding: 10px 12px; line-height: 1.45; }
.table thead th {
    font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--cspm-muted); border-top: 0; border-bottom: 1.5px solid var(--cspm-line-strong); vertical-align: bottom;
}
.table-condensed th, .table-condensed td { padding: 8px 10px; }
.table-bordered { border: 1px solid var(--cspm-line); border-radius: 16px; overflow: hidden; }
.table-bordered th, .table-bordered td { border-left: 1px solid var(--cspm-line); }
.table-striped tbody > tr:nth-child(odd) > td, .table-striped tbody > tr:nth-child(odd) > th { background: #F7FBFC; }
.table-hover tbody tr:hover td, .table-hover tbody tr:hover th { background: var(--cspm-blue-soft); }
.activite-item-hover, .activite-item-hover div, .activite-item-hover span { background-color: var(--cspm-blue-soft); }

/* Calendrier : chaque rendez-vous devient une carte */
#activites_items { border-collapse: separate; border-spacing: 0 8px; margin-top: 10px; }
#activites_items th, #activites_items td { border-top: 0; vertical-align: middle; }
#activites_items thead th { border-bottom: 1.5px solid var(--cspm-line-strong); padding-bottom: 8px; }
#activites_items tbody tr:not(.ActDate) > td {
    background: #FFFFFF; border-top: 1px solid var(--cspm-line); border-bottom: 1px solid var(--cspm-line); padding: 12px 8px;
}
#activites_items { font-size: 14px; }
#activites_items thead th { padding-left: 6px; padding-right: 6px; }
#activites_items tbody tr:not(.ActDate) > td { padding-left: 6px; padding-right: 6px; }
#activites_items tbody tr:not(.ActDate) > td:nth-child(4) { white-space: normal; max-width: 190px; }
#activites_items .actions, #activites_items .actions-more, #activites_items .actions-fixed { font-size: 13px; white-space: nowrap; }
.act-item-obs { max-width: 200px; white-space: normal; }
.app-nav .navbar-inverse .nav li.dropdown > .dropdown-toggle .caret { border-top-color: currentColor; border-bottom-color: currentColor; margin-top: 9px; }
/* sous 1180 px le tableau défile à l'horizontale plutôt que de déborder de la page */
@media screen and (max-width: 1180px) {
    #activites_items { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
#activites_items tbody tr:not(.ActDate) > td:first-child {
    border-left: 1px solid var(--cspm-line); border-radius: 18px 0 0 18px; width: 8px; padding: 0;
}
#activites_items tbody tr:not(.ActDate) > td:last-child { border-right: 1px solid var(--cspm-line); border-radius: 0 18px 18px 0; }
#activites_items .act-item-type-color { width: 8px; min-width: 8px; }
#activites_items tbody tr.ActDate > td, #activites_items td.date {
    background: none; border: 0; padding: 22px 4px 4px; font-family: var(--cspm-font-display); font-weight: 600;
    font-size: 17px; color: var(--cspm-blue); letter-spacing: 0.01em;
}
.activites-date { border-bottom: 0; border-top: 0; color: var(--cspm-blue); }
#activites_items .actions a, #activites_items .right-item-action a { color: var(--cspm-muted); }
#activites_items .actions a:hover { color: var(--cspm-blue); }

/* ---------- Alertes, messages ---------- */
.alert { border-radius: 16px; border: 1px solid var(--cspm-warn-line); background: var(--cspm-warn-bg); color: var(--cspm-warn-ink); text-shadow: none; padding: 14px 18px; }
.alert-error, .alert-danger { background: #FBEDEC; border-color: #E5C2C0; color: var(--cspm-danger); }
.alert-success { background: #E7F6E9; border-color: #9ED7AA; color: #14532D; }
.alert-info { background: var(--cspm-blue-soft); border-color: #B5D6F0; color: var(--cspm-blue-deep); }
/* « Rappel : licence, certificat… » (titre rouge en ligne dans la vue calendrier) */
h4.center[style*="red"] {
    color: var(--cspm-warn-ink) !important; background: var(--cspm-warn-bg); border: 1px solid var(--cspm-warn-line);
    border-radius: 18px; padding: 14px 20px; font-family: var(--cspm-font); font-size: 15px; font-weight: 400; line-height: 1.5;
    text-align: left; max-width: 760px; margin: 18px auto;
}
.red, .red_bold { color: var(--cspm-danger); }
.label, .badge { border-radius: 999px; text-shadow: none; font-weight: 600; }
.label-info, .badge-info { background: var(--cspm-blue); }

/* ---------- Fenêtres (lightbox, modales) ---------- */
.modal, .lightbox {
    border: 1px solid var(--cspm-line); border-radius: 28px; box-shadow: 0 30px 70px rgba(6, 35, 58, 0.30); overflow: hidden;
}
.modal-header { border-bottom: 1px solid var(--cspm-line); padding: 16px 24px; }
.modal-header h3, .modal-header h4 { margin: 0; }
.modal-body { padding: 22px 24px; }
.modal-footer { background: var(--cspm-bg); border-top: 1px solid var(--cspm-line); box-shadow: none; border-radius: 0 0 28px 28px; padding: 14px 24px; }
.modal-backdrop { background: var(--cspm-ink); }
.close { opacity: 0.6; text-shadow: none; }

/* ---------- Divers ---------- */
.nav-tabs > li > a { border-radius: 999px; color: var(--cspm-muted); border: 0; }
.nav-tabs { border-bottom: 1px solid var(--cspm-line); }
.nav-tabs > .active > a, .nav-tabs > .active > a:hover { background: var(--cspm-blue-soft); color: var(--cspm-blue-deep); border: 0; }
.pagination ul { box-shadow: none; border-radius: 999px; }
.progress { border-radius: 999px; box-shadow: none; background: #E3EDF0; }
.progress .bar { background: var(--cspm-blue); box-shadow: none; }
.information.well { margin-bottom: 16px; }
.information-titre { margin-top: 0; }
.information-date { color: var(--cspm-muted); font-size: 13px; }
.information-resume img { border-radius: 14px; }
/* Illustration d'un thème d'information : pastille + pictogramme (voir topicIllustration()) */
.topic-tile {
    display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 18px;
    background: var(--cspm-bg); color: var(--cspm-muted); margin: 0 auto;
}
.topic-tile svg { width: 32px; height: 32px; display: block; }
.information-resume .topic-tile .topic-logo, .topic-tile .topic-logo { height: 46px; width: auto; border-radius: 0; }
.topic-club     { background: #E1F0FB; color: #006DBA; }
.topic-vie      { background: #EEF8D4; color: #2F5D00; }
.topic-mer      { background: #DDF5F3; color: #0B7A75; }
.topic-meteo    { background: #FFEBD2; color: #8A4A00; }
.topic-vent     { background: #E6ECF2; color: #3F5568; }
.topic-attention{ background: #FFF4DC; color: #5C3D00; }
.topic-alerte   { background: #FBEDEC; color: #A32A25; }
.topic-neutre   { background: #EEF3F5; color: #46606F; }
.autocomplete-suggestions { border: 1px solid var(--cspm-line); border-radius: 12px; box-shadow: 0 14px 30px rgba(6, 35, 58, 0.14); }
.autocomplete-selected { background: var(--cspm-blue-soft); }
.editable { border-bottom-color: var(--cspm-blue); }

/* Repère « recette » : une petite étiquette en bas à gauche (l'ancien ruban d'angle cachait le logo) */
.development {
    position: fixed; top: auto; left: 12px; bottom: 12px; width: auto; height: auto; border: 0;
    background: none; z-index: 1000; pointer-events: none;
}
.development::after {
    content: "RECETTE"; display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--cspm-danger);
    color: #FFFFFF; font: 600 11px/1.4 var(--cspm-font); letter-spacing: 0.1em;
}

} /* fin @media screen */

/* ---------- Petits écrans ---------- */
@media screen and (max-width: 979px) {
    .app-header { position: relative; }
    /* après défilement, seule la barre logo + bouton de menu reste collée en haut (voir le script du gabarit) */
    .app-header.is-stuck { position: fixed; top: 0; left: 0; right: 0; z-index: 1030; box-shadow: 0 6px 18px rgba(6, 35, 58, 0.12); }
    .app-header.is-stuck .app-user, .app-header.is-stuck .app-login { display: none; }
    /* raccourci Activités toujours visible à côté du bouton de menu */
    .app-quick { display: inline-flex; align-items: center; gap: 6px; order: 1; margin-left: auto; padding: 9px 14px; border-radius: 999px; background: var(--cspm-ink); color: #FFFFFF; font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; }
    .app-quick:hover, .app-quick:focus { color: #FFFFFF; }
    .app-nav { flex: 0 0 auto; order: 2; margin-left: 8px; }
    .app-user { order: 3; flex: 1 1 100%; margin-left: 0; justify-content: flex-start; font-size: 13px; }
    .app-nav .navbar, .app-nav .navbar .container { position: static; }
    /* le menu déplié s'ouvre en panneau sous l'en-tête */
    .app-nav .navbar .nav-collapse {
        position: absolute; left: 0; right: 0; top: 100%; z-index: 1030; background: #FFFFFF;
        border-bottom: 1px solid var(--cspm-line); box-shadow: 0 18px 30px rgba(6, 35, 58, 0.14); padding: 0 14px;
    }
    .app-nav .navbar .nav-collapse.in, .app-nav .navbar .nav-collapse.collapse.in {
        padding: 6px 14px 14px; overflow: visible !important; height: auto !important;
    }
    .app-nav .navbar .nav { float: none; }
    .app-nav .nav-collapse .nav { margin: 4px 0 0; }
    .app-nav .nav-collapse .nav > li { display: block; }
    .app-nav .navbar-inverse .nav-collapse .nav > li > a,
    .app-nav .navbar-inverse .nav-collapse .dropdown-menu a {
        color: var(--cspm-ink); text-shadow: none; font-weight: 500; font-size: 15px; padding: 11px 14px; border-radius: 12px;
    }
    .app-nav .navbar-inverse .nav-collapse .nav > li > a:hover,
    .app-nav .navbar-inverse .nav-collapse .dropdown-menu a:hover { background: var(--cspm-blue-soft); }
    .app-nav .navbar-inverse .nav-collapse .nav .active > a { background: var(--cspm-ink); color: #FFFFFF; }
    .app-nav .navbar-inverse .nav-collapse .dropdown-menu { background: transparent; border: 0; box-shadow: none; padding: 0 0 0 12px; }
}
@media screen and (max-width: 767px) {
    .app-header-inner { padding: 8px 14px; gap: 6px 12px; }
    .app-logo img { height: 44px; }
    .app-user { font-size: 13px; }
    .app-login input[type="text"], .app-login input[type="password"] { width: 120px; }
    .container-fluid { padding-left: 14px; padding-right: 14px; }
    h2 { font-size: 26px; }
    .well { padding: 18px; border-radius: 20px; }
    #activites_items { border-spacing: 0 6px; }
}

/* ---------- Pages secondaires (fiche club, contacts, matériel, documents) ---------- */
@media screen {
    /* Ma fiche club: colonne des fiches en pastilles */
    #membres-list { border: 0; margin: 0 0 8px; }
    #membres-list > li > a { border: 0; border-radius: 14px; background: #fff; box-shadow: var(--cspm-shadow, 0 1px 3px rgba(6, 35, 58, 0.10)); margin-bottom: 6px; color: var(--cspm-ink); }
    #membres-list > li > a:hover, #membres-list > li.active > a { background: var(--cspm-blue-soft); color: var(--cspm-blue-deep); }
    #membres-list > li:first-child > a, #membres-list > li:last-child > a { border-radius: 14px; }
    #membres-list h3 { font-size: 16px; margin: 18px 0 8px; }
    #membres-list h6 { font-size: 12px; font-style: normal; font-weight: 400; line-height: 1.4; color: var(--cspm-muted) !important; margin: 10px 0 0; }
    #membres-list h6 i { font-style: normal; }
    #membre { min-width: 0; }

    /* Matériel: formulaire d'ajout en carte, filtres alignés */
    form.form-inline {
        display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
        background: #fff; border: 1px solid var(--cspm-line); border-radius: 18px; padding: 14px 18px; margin: 0 0 18px;
    }
    form.form-inline label { margin: 0; font-weight: 500; color: var(--cspm-muted); }
    form.form-inline select, form.form-inline input[type="text"] { margin: 0; }
}

/* ---------- Accueil (d'après la maquette AccueilMembre) ---------- */
@media screen {
    .home { max-width: 1200px; margin: 0 auto; padding: 28px 0 56px; }
    .home-title { margin: 0; font-family: var(--cspm-font-display); font-weight: 800; font-size: 44px; line-height: 1.05; letter-spacing: -0.015em; }
    .home-lead { margin: 8px 0 0; font-size: 17px; color: var(--cspm-muted); }

    .home-adhesion {
        margin-top: 32px; background: var(--cspm-ink); color: #fff; border-radius: 28px; padding: 32px 36px;
        display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px;
    }
    .home-adhesion-text { flex: 1 1 420px; max-width: 640px; }
    .home-adhesion .kicker { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cspm-lime); }
    .home-adhesion h2 { margin: 10px 0 0; color: #fff; font-weight: 800; font-size: 34px; line-height: 1.1; }
    .home-adhesion p { margin: 12px 0 0; font-size: 16px; line-height: 1.55; color: #BFD9E2; }
    .home-adhesion-actions { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
    .btn-lime { display: inline-flex; align-items: center; gap: 10px; padding: 15px 24px; border-radius: 999px; background: var(--cspm-lime); color: var(--cspm-ink); font-weight: 600; font-size: 16px; text-decoration: none; }
    .btn-lime:hover { color: var(--cspm-ink); filter: brightness(1.05); }
    .home-adhesion .offline { color: #E3F1F6; font-size: 14px; line-height: 1.4; max-width: 300px; }
    .home-adhesion-qr { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 10px; }
    .home-adhesion-qr .qr { width: 148px; height: 148px; border-radius: 20px; background: #fff; display: flex; align-items: center; justify-content: center; padding: 10px; overflow: hidden; }
    .home-adhesion-qr .qr img { max-width: 100%; max-height: 100%; }
    .home-adhesion-qr .by { font-size: 12px; color: #8FB6C4; }
    .home-adhesion-qr .by a { color: #8FB6C4; }

    .home-columns { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
    .home-infos { flex: 2 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
    .home-side { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }

    .section-title { margin: 0; font-weight: 800; font-size: 30px; letter-spacing: -0.01em; text-align: left; }
    .info-card { display: flex; gap: 20px; align-items: flex-start; background: #fff; border: 1px solid var(--cspm-line); border-radius: 24px; padding: 24px; }
    .info-card .topic-tile { flex: none; margin: 0; }
    .info-card > img { flex: none; max-width: 64px; border-radius: 14px; }
    .info-body { min-width: 0; }
    .info-title { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.25; }
    .info-meta { margin-top: 6px; font-size: 13px; color: var(--cspm-muted); }
    .info-text { margin: 12px 0 0; font-size: 16px; line-height: 1.55; }
    .info-text p:last-child { margin-bottom: 0; }
    .more-link { margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; text-decoration: none; }

    .side-card { background: #fff; border: 1px solid var(--cspm-line); border-radius: 24px; padding: 22px 24px; }
    .side-title { margin: 0 0 12px; font-weight: 600; font-size: 20px; text-align: left; }
    .side-card > .more-link { margin-top: 8px; }

    .rdv-list { margin: 0; padding: 0; list-style: none; }
    .rdv-item { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid #E3EDF0; }
    .rdv-date { flex: none; width: 52px; text-align: center; border-radius: 14px; padding: 6px 0; font-weight: 600; background: color-mix(in srgb, var(--c) 16%, #fff); color: color-mix(in srgb, var(--c) 45%, #000); }
    .rdv-day { display: block; font-size: 11px; text-transform: uppercase; }
    .rdv-num { display: block; font-family: var(--cspm-font-display); font-weight: 800; font-size: 20px; line-height: 1.1; }
    .rdv-text { font-size: 15px; line-height: 1.35; }
    .rdv-text a { color: inherit; text-decoration: none; }
    .rdv-text a:hover { color: var(--cspm-blue); }
    .rdv-meta { color: var(--cspm-muted); }
    .rdv-cancelled .rdv-text { text-decoration: line-through; opacity: 0.6; }

    .service-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid #E3EDF0; font-size: 15px; }
    .service-row strong { font-size: 17px; }
    .side-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
    .service-row + .side-buttons { padding-top: 12px; border-top: 1px solid #E3EDF0; }
    .btn-dark, .btn-outline { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; font-weight: 600; font-size: 14px; text-decoration: none; }
    .btn-dark { background: var(--cspm-ink); color: #fff; }
    .btn-dark:hover { background: var(--cspm-ink-2); color: #fff; }
    .btn-outline { border: 1.5px solid var(--cspm-line-strong); color: var(--cspm-ink); }
    .btn-outline:hover { background: var(--cspm-bg); color: var(--cspm-ink); }

    .doc-list { margin: 0; padding: 0; list-style: none; }
    .doc-list li { border-top: 1px solid #E3EDF0; }
    .doc-list a { display: flex; align-items: center; gap: 12px; padding: 13px 0; color: var(--cspm-ink); text-decoration: none; font-size: 15px; font-weight: 500; }
    .doc-list a i { color: var(--cspm-blue); font-size: 18px; width: 20px; text-align: center; }
    .doc-list a:hover { color: var(--cspm-blue); }
    .badge-members { margin-left: auto; padding: 3px 9px; border-radius: 999px; background: #EEF3F5; color: var(--cspm-muted); font-size: 11px; font-weight: 600; }

    @media (max-width: 979px) {
        .home { padding-top: 18px; }
        .home-title { font-size: 34px; }
        .home-adhesion { padding: 24px 22px; border-radius: 24px; }
        .home-adhesion h2 { font-size: 28px; }
        .section-title { font-size: 26px; }
        .info-card { padding: 18px; gap: 14px; }
    }
}
@media screen {
    .app-user .avatar { display: inline-flex; width: 34px; height: 34px; margin-right: 6px; border-radius: 50%; background: var(--cspm-blue-soft); color: var(--cspm-blue); font-weight: 600; font-size: 13px; align-items: center; justify-content: center; vertical-align: middle; }
}

/* ---------- Calendrier (d'après la maquette Calendrier) ---------- */
@media screen {
    .cal { max-width: 1200px; margin: 0 auto; padding: 28px 0 56px; }
    .cal-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
    .cal-head-actions { display: flex; flex-wrap: wrap; gap: 10px; }
    .callout-warn { margin-top: 28px; display: flex; gap: 14px; align-items: flex-start; background: var(--cspm-warn-bg); border: 1px solid var(--cspm-warn-line); border-radius: 18px; padding: 16px 20px; color: var(--cspm-warn-ink); }
    .callout-warn i { font-size: 22px; line-height: 1.2; flex: none; }
    .callout-warn p { margin: 0; font-size: 15px; line-height: 1.5; }
    .cal-filter { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px; }
    .chip { padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(--cspm-line-strong); background: #fff; color: var(--cspm-ink); font: 500 14px var(--cspm-font); cursor: pointer; }
    .chip:hover { background: var(--cspm-bg); }
    .chip.is-on { border-color: var(--cspm-ink); background: var(--cspm-ink); color: #fff; font-weight: 600; }

    .cal-list { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
    .act-day-group { display: flex; flex-direction: column; gap: 12px; }
    .act-day { margin: 22px 0 2px; font-weight: 600; font-size: 20px; color: var(--cspm-blue); text-align: left; }
    .act-card {
        --c: var(--cspm-blue);
        background: #fff; border: 1px solid var(--cspm-line); border-radius: 20px; overflow: hidden;
        display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; padding: 18px 24px 18px 0;
    }
    .act-card.is-cancelled { opacity: 0.6; }
    .act-bar { align-self: stretch; width: 6px; flex: none; background: var(--c); }
    .act-time { flex: none; width: 112px; display: flex; flex-direction: column; gap: 2px; }
    .act-rdv { font-family: var(--cspm-font-display); font-weight: 800; font-size: 26px; line-height: 1; }
    .act-sub { font-size: 13px; color: var(--cspm-muted); }
    .act-main { flex: 1 1 280px; min-width: 0; }
    .act-titleline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
    .act-titleline h3 { margin: 0; font-size: 17px; font-weight: 600; }
    .act-chip { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: color-mix(in srgb, var(--c) 16%, #fff); color: color-mix(in srgb, var(--c) 65%, #000); }
    .act-cancelled { color: var(--cspm-danger); font-weight: 600; font-size: 13px; }
    .act-meta { margin: 6px 0 0; font-size: 14px; color: var(--cspm-muted); }
    .act-card .act-item-obs { margin-top: 6px; font-size: 14px; }
    .act-side { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 16px; }
    .act-count { font-size: 13px; color: var(--cspm-muted); }
    .act-actions { display: flex; gap: 10px; font-size: 14px; }
    .act-actions a { color: var(--cspm-muted); }
    .act-actions a:hover { color: var(--cspm-blue); }
    .act-btn { display: inline-block; min-width: 128px; padding: 12px 20px; border-radius: 999px; border: 1.5px solid var(--cspm-line); background: #EEF3F5; color: var(--cspm-muted); font: 600 14px var(--cspm-font); text-align: center; text-decoration: none; }
    .act-btn.is-open { background: var(--cspm-ink); border-color: var(--cspm-ink); color: #fff; }
    .act-btn.is-open:hover { background: var(--cspm-ink-2); }
    .act-btn.is-done { background: #E7F6E9; border-color: #9ED7AA; color: #14532D; }

    @media (max-width: 979px) {
        .act-card { padding: 14px 16px 14px 0; gap: 10px 16px; }
        .act-time { width: auto; flex-direction: row; align-items: baseline; gap: 10px; }
        .act-side { width: 100%; box-sizing: border-box; padding-left: 22px; justify-content: space-between; }
        /* pictogrammes d'action: passent à la ligne au lieu d'être coupés à droite */
        .act-count { flex: none; }
        .act-actions { flex: 1 1 0; min-width: 0; flex-wrap: wrap; justify-content: flex-end; gap: 10px 16px; font-size: 16px; }
        .act-btns { flex: 1 1 100%; display: flex; gap: 10px; }
        .act-btns .act-btn { flex: 1 1 0; min-width: 0; }
        .act-main { flex-basis: 200px; }
    }
}

/* ---------- Mot de passe (d'après la maquette MotDePasse) ---------- */
@media screen {
    .back-link { display: inline-flex; align-items: center; gap: 8px; color: var(--cspm-muted); text-decoration: none; font-weight: 500; font-size: 15px; }
    .pwd-page { max-width: 1200px; margin: 0 auto; padding: 28px 0 56px; }
    .pwd-card { margin: 28px auto 0; max-width: 520px; background: #fff; border: 1px solid var(--cspm-line); border-radius: 28px; padding: 36px; }
    .pwd-icon { width: 52px; height: 52px; border-radius: 16px; background: var(--cspm-blue-soft); color: var(--cspm-blue); display: flex; align-items: center; justify-content: center; font-size: 24px; }
    .pwd-card h1 { margin: 18px 0 0; font-weight: 800; font-size: 34px; line-height: 1.08; letter-spacing: -0.015em; }
    .pwd-lead { margin: 8px 0 0; font-size: 16px; line-height: 1.5; color: var(--cspm-muted); }
    .pwd-form { margin: 26px 0 0; display: flex; flex-direction: column; gap: 18px; }
    .pwd-field { display: flex; flex-direction: column; gap: 6px; }
    .pwd-field label { margin: 0; font-size: 14px; font-weight: 600; }
    .pwd-field input[type="password"] { height: 48px; width: 100%; box-sizing: border-box; margin: 0; border-radius: 14px; border: 1.5px solid var(--cspm-line-strong); padding: 0 16px; font-size: 16px; }
    .pwd-rules { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--cspm-muted); }
    .pwd-rules li { display: flex; align-items: center; gap: 8px; margin: 0; }
    .pwd-rules .dot { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #9DB4BE; box-sizing: border-box; flex: none; }
    .pwd-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
    .pwd-actions .btn-dark { flex: 1 1 220px; min-height: 52px; justify-content: center; padding: 14px 24px; border: 0; font: 600 16px var(--cspm-font); cursor: pointer; }
    .pwd-actions .btn-outline { min-height: 52px; padding: 0 24px; font-size: 16px; }
    .pwd-note { margin-top: 26px; padding-top: 22px; border-top: 1px solid #E3EDF0; display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--cspm-muted); }
    .pwd-note i { font-size: 18px; margin-top: 1px; }
    .app-remember { display: inline-flex; align-items: center; gap: 6px; margin: 0 8px; font-size: 13px; white-space: nowrap; cursor: pointer; }
    .app-remember input { margin: 0; }
    .app-forgot { font-size: 13px; white-space: nowrap; }
    .pwd-sent { margin: 22px 0 0; }
    .insc-card { max-width: 720px; }
    .insc-group { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
    .insc-group legend { font-weight: 800; font-size: 20px; margin: 10px 0 4px; border: 0; padding: 0; }
    .pwd-field input[type="text"], .pwd-field input[type="email"], .pwd-field input[type="date"], .pwd-field select { height: 48px; width: 100%; box-sizing: border-box; margin: 0; border-radius: 14px; border: 1.5px solid var(--cspm-line-strong); padding: 0 16px; font-size: 16px; }
    .insc-hint { font-size: 13px; color: var(--cspm-muted); }
    @media (max-width: 979px) { .pwd-card { padding: 24px; border-radius: 24px; } .pwd-card h1 { font-size: 28px; } }
}

/* ---------- Sortie / feuille de sécurité (d'après la maquette Sortie) ---------- */
@media screen {
    .sortie { max-width: 1200px; margin: 0 auto; padding: 24px 0 56px; }
    .sortie-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
    .sortie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
    .btn-soft { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; border: 1.5px solid var(--cspm-blue); background: var(--cspm-blue-soft); color: var(--cspm-blue-deep); font-weight: 600; font-size: 14px; text-decoration: none; }
    .btn-soft:hover { background: #cfe6f7; color: var(--cspm-blue-deep); }
    .sortie-title { margin-top: 24px; }
    .sortie-title .act-chip { display: inline-block; padding: 5px 12px; font-size: 13px; }
    .sortie-title .home-title { margin-top: 12px; }
    .sortie-card { background: #fff; border: 1px solid var(--cspm-line); border-radius: 24px; padding: 28px 32px; box-sizing: border-box; }
    .sortie-reg { margin-top: 28px; padding: 20px 24px; }
    .sortie-reg:empty { display: none; }
    .reg-warn { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--cspm-danger); }
    form.reg-form.form-inline { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; background: transparent; border: 0; padding: 0; }
    .reg-form select, .reg-form input[type="text"] { margin: 0; }
    .sortie-reg h5 { font-size: 14px; font-weight: 400; color: var(--cspm-muted); text-align: left; }
    .sortie-cols { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
    .sortie-details { flex: 2 1 560px; min-width: 0; }
    .sortie-details h2 { margin: 0 0 18px; font-weight: 600; font-size: 22px; text-align: left; }
    .sortie-dl { margin: 0; display: flex; flex-wrap: wrap; gap: 0 32px; }
    .dl-item { flex: 1 1 240px; padding: 14px 0; border-top: 1px solid #E3EDF0; }
    .dl-item dt { font-size: 13px; color: var(--cspm-muted); font-weight: 400; }
    .dl-item dd { margin: 4px 0 0; font-size: 16px; font-weight: 500; }
    .dl-item dd .editable-empty { font-style: italic; color: #9A3412; }
    .sortie-obs { margin-top: 8px; padding: 18px 20px; border-radius: 16px; background: var(--cspm-bg); }
    .sortie-obs h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--cspm-blue); }
    .sortie-obs p { margin: 8px 0 0; font-size: 16px; line-height: 1.55; }
    .sortie-insc { flex: 1 1 300px; background: var(--cspm-ink); color: #fff; border-radius: 24px; padding: 28px; box-sizing: border-box; display: flex; flex-direction: column; gap: 18px; }
    .sortie-insc h2 { margin: 0; color: #fff; font-weight: 600; font-size: 22px; text-align: left; }
    .insc-count { font-family: var(--cspm-font-display); font-weight: 800; font-size: 56px; line-height: 1; }
    .insc-count span { font-size: 24px; font-weight: 600; color: #8FB6C4; }
    .insc-track { margin-top: 14px; height: 8px; border-radius: 999px; background: rgba(255,255,255,0.18); }
    .insc-fill { height: 8px; border-radius: 999px; background: var(--cspm-lime); }
    .insc-left { margin: 10px 0 0; font-size: 14px; color: #BFD9E2; }
    .insc-me { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(201,240,74,0.14); color: #E6F8A8; font-size: 15px; font-weight: 500; }
    .insc-leave { padding: 13px 20px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,0.55); background: transparent; color: #fff; font: 600 15px var(--cspm-font); text-align: center; text-decoration: none; }
    .insc-leave:hover { background: rgba(255,255,255,0.1); color: #fff; }
    .insc-note { margin: 0; font-size: 13px; line-height: 1.5; color: #8FB6C4; }

    .sortie-section { margin-top: 48px; }
    .sortie-section .section-title { font-size: 32px; }
    .pal-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
    .ins-grid { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; }
    .ins-col { flex: 1 1 220px; background: #fff; border: 1px solid var(--cspm-line); border-radius: 20px; padding: 20px; box-sizing: border-box; }
    .ins-col h3 { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--cspm-blue); text-transform: uppercase; letter-spacing: 0.06em; }
    .ins-col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
    .ins-item { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; flex-wrap: wrap; }
    .ins-item.is-over .ins-name { color: var(--cspm-danger); }
    .ins-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--cspm-blue-soft); color: var(--cspm-blue); font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex: none; }
    .ins-badge { margin-left: auto; padding: 3px 9px; border-radius: 999px; background: #FFEBD2; color: #8A4A00; font-size: 12px; font-weight: 600; }
    .ins-ord { color: var(--cspm-muted); font-size: 12px; font-weight: 400; }
    .ins-del { font-size: 18px; text-decoration: none; }
    .ins-empty { color: var(--cspm-muted); }

    .pal-grid { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; }
    .pal-card { flex: 1 1 360px; background: #fff; border: 1px solid var(--cspm-line); border-radius: 22px; padding: 22px; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; }
    .pal-card.is-empty { border: 1.5px dashed #B7CBD3; gap: 10px; }
    .pal-card.is-empty h3 { color: var(--cspm-muted); }
    .pal-card.is-empty p { margin: 0; font-size: 15px; color: var(--cspm-muted); }
    .pal-card.is-empty a { margin-top: auto; font-weight: 600; font-size: 14px; text-decoration: none; }
    .pal-card h3 { margin: 0; font-weight: 600; font-size: 20px; text-align: left; }
    .pal-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .pal-dl { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; }
    .pal-dl dt { color: var(--cspm-muted); font-size: 12px; font-weight: 400; }
    .pal-dl dd { margin: 2px 0 0; font-weight: 600; }
    .pal-people { margin: 0; padding: 12px 0 0; list-style: none; border-top: 1px solid #E3EDF0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
    .pal-people li { display: flex; justify-content: space-between; gap: 10px; }
    .pal-name { font-weight: 500; }
    .pal-role { color: var(--cspm-muted); font-size: 13px; }
    .pal-add { margin: 14px 0 0; }
    @media (max-width: 979px) { .sortie-card { padding: 20px; } .sortie-insc { padding: 22px; } }
}
@media screen {
    /* les liens qui ouvrent une fenêtre ne doivent pas hériter du style des fenêtres */
    a.lightbox { box-shadow: none !important; }
    a.lightbox:not([class*="btn"]) { border: 0; border-radius: 0; }
}

/* ---------- Ajout / modification d'activité (d'après la maquette AjoutSortie) ---------- */
@media screen {
    .ae-form { display: flex; flex-direction: column; gap: 16px; }
    fieldset.ae-set { margin: 0; border: 1px solid var(--cspm-line); border-radius: 20px; background: #fff; padding: 16px 20px 18px; min-width: 0; }
    fieldset.ae-set legend { width: auto; margin: 0; padding: 0 8px; border: 0; font-family: var(--cspm-font-display); font-weight: 600; font-size: 17px; line-height: 1.3; }
    .ae-row { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-end; }
    .ae-row + .ae-row { margin-top: 14px; }
    .ae-field { display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: 14px; font-weight: 600; }
    .ae-field.ae-grow { flex: 1 1 200px; }
    .ae-field input[type="text"], .ae-field select, .ae-row > select { margin: 0; max-width: 100%; }
    .ae-radios { display: flex; flex-wrap: wrap; gap: 8px 20px; }
    .ae-radios input[type="radio"] { margin: 0 6px 0 0; }
    .ae-hint { margin: 12px 0 0; font-size: 13px; color: var(--cspm-muted); }
    #newact textarea { width: 100%; box-sizing: border-box; margin: 0; border-radius: 12px; }
    #activityColor { display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-left: 10px; vertical-align: middle; border: 1px solid var(--cspm-line-strong); }
}
@media screen {
    .ae-time { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; white-space: nowrap; }
    .ae-time select { margin: 0; width: auto; min-width: 64px; }
}
@media screen {
    .pal-form .ae-time .input-append { display: inline-flex; margin: 0; }
    .pal-form .input-mini { width: 76px; margin: 0; }
    /* champs de la palanquée: libellé au-dessus, valeur centrée et lisible (le champ était trop étroit pour son remplissage) */
    .pal-block + .pal-block { margin-top: 16px; }
    .pal-block-title { margin-bottom: 8px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cspm-muted); }
    .pal-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 14px; align-items: end; }
    .pal-field { display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: 14px; font-weight: 600; min-width: 0; }
    .pal-field input[type="text"], .pal-field select { margin: 0; }
    .pal-field input[type="text"]:not(.input-mini) { width: 100%; box-sizing: border-box; }
    .pal-field .input-append { display: flex; margin: 0; }
    .pal-form .pal-field .input-append input.input-mini { flex: 1 1 auto; width: auto; min-width: 0; padding: 8px 6px; text-align: center; font-size: 17px; font-weight: 600; }
    .pal-field .input-append .add-on { flex: none; }
    .pal-field .ae-time { margin: 0; }
    /* style.css (ancien) impose 30 px !important aux champs de la palanquée et 100 px à leurs libellés: la saisie y était invisible */
    #palanquee label.pal-field { width: auto; color: inherit; font-weight: 600; }
    #palanquee .pal-field .input-append input.input-mini { width: auto !important; text-align: center; }
    #palanquee, .pal-form { min-width: 0; max-width: 100%; box-sizing: border-box; }
    .pal-add { white-space: nowrap; }
    /* page d'une plongée: profondeur et durée en évidence, prévues puis réelles */
    .pal-key { display: flex; flex-wrap: wrap; gap: 10px; }
    .pal-key-col { flex: 1 1 120px; display: flex; flex-direction: column; gap: 1px; padding: 7px 12px; border-radius: 12px; background: var(--cspm-blue-soft); }
    .pal-key-col.is-real { background: #E7F6E9; }
    .pal-key-title { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cspm-muted); }
    .pal-key-vals { font-size: 13px; color: var(--cspm-ink); white-space: nowrap; }
    .pal-key-vals strong { font-family: var(--cspm-font-display); font-size: 17px; font-weight: 700; line-height: 1.2; }
    .pal-key-vals em { color: var(--cspm-muted); font-style: normal; }
    .pal-key-sep { margin: 0 8px; color: var(--cspm-muted); }
    .pal-compose { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
    .pal-col { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
    .pal-col-mid { flex: 0 0 auto; align-self: center; align-items: center; }
    .pal-col-title { font-size: 13px; font-weight: 600; color: var(--cspm-muted); }
    .pal-col select, .pal-col input[type="text"] { margin: 0; width: 100% !important; box-sizing: border-box; }
    .pal-col-mid select { width: 160px !important; }
    #tablePalanquee { width: 100%; border: 1px solid var(--cspm-line) !important; border-radius: 12px; }
    #tablePalanquee td { padding: 6px 10px; }
}
@media screen {
    .act-btns { display: inline-flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
    .act-btn.act-view { min-width: 0; padding: 12px 18px; background: #fff; border-color: var(--cspm-line-strong); color: var(--cspm-ink); }
    .act-btn.act-view:hover { background: var(--cspm-bg); }
}
@media screen and (max-width: 520px) { .app-logo-text { font-size: 13px; } }
@media screen and (max-width: 979px) {
    /* tableaux larges: défilement latéral au lieu d'être coupés */
    table.table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table.table-bordered { overflow-x: auto; }
}

/* ---------- Situation globale des membres ---------- */
@media screen {
    .sit-stats { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 14px; }
    .sit-stat { flex: 1 1 160px; background: #fff; border: 1px solid var(--cspm-line); border-radius: 20px; padding: 16px 20px; display: flex; align-items: baseline; gap: 10px; }
    .sit-stat strong { font-family: var(--cspm-font-display); font-weight: 800; font-size: 32px; line-height: 1; }
    .sit-stat span { color: var(--cspm-muted); font-size: 14px; }
    .sit-stat.is-ok strong { color: #14532D; }
    .sit-stat.is-ko strong { color: var(--cspm-danger); }
    .sit-search { margin: 0 0 0 auto; min-width: 220px; height: 42px; border-radius: 999px; }
    .sit-wrap { margin-top: 20px; background: #fff; border: 1px solid var(--cspm-line); border-radius: 24px; padding: 8px 12px 12px; overflow: auto; max-height: max(360px, calc(100vh - 360px)); -webkit-overflow-scrolling: touch; }
    table.sit-table { display: table; width: 100%; margin: 0; overflow: visible; }
    .sit-table thead th { position: sticky; top: 0; z-index: 2; background: #fff; box-shadow: 0 1px 0 var(--cspm-line-strong); }
    .sit-table td { vertical-align: middle; white-space: nowrap; }
    .sit-table .sit-name { font-weight: 600; }
    .sit-table tbody tr:hover td { background: var(--cspm-blue-soft); }
    .sit-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; }
    .sit-pill.is-ok { background: #E7F6E9; color: #14532D; }
    .sit-pill.is-ko { background: #FBEDEC; color: var(--cspm-danger); }
    .sit-date.is-bad { padding: 3px 10px; border-radius: 999px; background: #FBEDEC; color: var(--cspm-danger); font-weight: 600; }
}
@media screen and (max-width: 979px) {
    table.sit-table { display: table; }
    .sit-search { margin-left: 0; width: 100%; }
}
@media screen {
    .certif-alerte { margin: 16px auto 0; max-width: 1200px; }
    .certif-alerte.is-expired { background: #FBEDEC; border-color: #E5C2C0; color: #7A1F1B; }
    .certif-alerte a { color: inherit; font-weight: 600; }
}
@media screen {
    /* membres qui ne peuvent pas plonger: ligne sur fond rouge clair */
    .sit-table tbody tr[data-sit="ko"] td { background: #FBE3E1; }
    .sit-table tbody tr[data-sit="ko"]:hover td { background: #F7D0CD; }
    .sit-table tbody tr[data-sit="ko"] .sit-pill.is-ko, .sit-table tbody tr[data-sit="ko"] .sit-date.is-bad { background: #fff; }
}
@media screen { .sit-stats #cspmOnly { align-self: center; } }

@media screen and (min-width: 980px) { .app-quick { display: none; } }
@media screen and (max-width: 440px) { .app-logo-text { display: none; } }

/* ---------- Saisie sur mobile ---------- */
@media screen and (max-width: 767px) {
    /* 16 px minimum: sinon iOS zoome la page à chaque champ touché */
    input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"],
    input[type="tel"], input[type="url"], input[type="date"], input[type="time"], input:not([type]), textarea, select { font-size: 16px; }
    .pal-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pal-form .ae-set { padding: 14px 14px 16px; }
    #palanquee .pal-save { flex: 1 1 100%; text-align: center; }
    #palanquee .pal-save .btn { width: 100%; min-height: 48px; font-size: 16px; }
    .pal-col-mid { flex: 1 1 100%; min-width: 0; align-self: stretch; flex-direction: row; flex-wrap: wrap; gap: 10px; }
    .pal-col-mid select { flex: 1 1 100%; width: 100% !important; min-width: 0; font-size: 16px !important; height: 44px !important; }
    .pal-col-mid .pal-add { flex: 1 1 100%; min-height: 48px; font-size: 16px; }
    .pal-col select[multiple] { height: 150px !important; }
    .pal-key-vals strong { font-size: 16px; }
}

/* ---------- Fenêtres (lightbox) sur mobile: plein écran, contenu défilant, boutons toujours accessibles ---------- */
@media screen and (max-width: 767px) {
    #lightbox.modal.in { display: flex !important; flex-direction: column; position: fixed; top: 8px !important; left: 8px !important; right: 8px !important; bottom: 8px !important; width: auto !important; max-height: none; margin: 0 !important; border-radius: 22px; }
    #lightbox .modal-body { flex: 1 1 auto; max-height: none; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px; }
    #lightbox .modal-header { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
    #lightbox .modal-header h4 { flex: 1 1 auto; min-width: 0; font-size: 18px; }
    #lightbox .modal-header .close { order: 3; float: none; font-size: 28px; line-height: 1; }
    #lightbox .modal-header .btn-action-top { order: 2; flex: none; min-height: 40px; padding: 8px 18px; font-size: 15px; }
    #lightbox .modal-footer { flex: none; display: flex; gap: 10px; padding: 10px 14px; border-radius: 0 0 22px 22px; }
    #lightbox .modal-footer .btn { flex: 1 1 0; min-height: 46px; margin: 0; font-size: 16px; }
    #lightbox .modal-footer .btn-action { order: 2; }
}