/* RSVP back-office — une seule feuille, aucun style en ligne (CSP style-src 'self').
 * Graphisme du site public (web_local/public/assets/site.css) : Jost, la sans-serif du site, pour
 * tout le back-office (pas de serif) ; gris C1 #e2dfe1, bleu C2 #2a3652, bandeau marine, croix.
 * Les couleurs de l'Excel restent : RSVP vert / jaune / rouge, questions orange.
 *
 *   1. Polices, configuration graphique
 *   2. Bandeau, compteur, titres
 *   3. Filtres, boutons, champs
 *   4. Tableaux, pastilles, questions, bulles
 *   5. Connexion, telephone
 */

/* ========================================================================
   1. POLICES ET CONFIGURATION GRAPHIQUE
   ======================================================================== */
/* Memes fichiers que le site (SIL OFL 1.1), heberges ici : aucune requete externe. */
@font-face {
    font-family: "Jost"; font-style: normal; font-weight: 300 400; font-display: swap;
    src: url(fonts/jost-latin-ext.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Jost"; font-style: normal; font-weight: 300 400; font-display: swap;
    src: url(fonts/jost-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Couleurs du site */
    --c1:        #e2dfe1;   /* gris */
    --c2:        #2a3652;   /* bleu */
    --ink-night: #eef0ff;   /* texte sur le ciel */
    --zenith:    #070b24;
    --indigo:    #121a4a;
    --violet:    #3a2f6e;
    --mauve:     #7a4b7c;
    --ember:     #c56f6a;
    --glow:      #efa77a;
    --apricot:   #f7d9a8;

    /* Emplois dans le back-office */
    --navy:         #121a4a;          /* texte et icones du bandeau */
    --c-bg:         #eceaeb;          /* C1 eclairci : fond de page, lisible pour de longs tableaux */
    --c-surface:    #ffffff;
    --c-ink:        #1f2740;
    --c-ink-soft:   #5f6679;
    --c-line:       #d8d4d7;
    --c-line-soft:  #eae7e9;
    --c-accent:     var(--c2);
    --c-accent-ink: #ffffff;
    --c-accent-bg:  #f2f3f7;
    --c-ok:         #1e6b2c;
    --c-err-bg:     #fdeeee;
    --c-err-line:   #e3a3a3;
    --c-err-ink:    #8f1d24;

    /* Couleurs de l'Excel : RSVP et questions */
    --rsvp-yes-bg:  #c6efce;  --rsvp-yes-ink:  #006100;
    --rsvp-wait-bg: #ffeb9c;  --rsvp-wait-ink: #9c6500;
    --rsvp-no-bg:   #ffc7ce;  --rsvp-no-ink:   #9c0006;
    --q-bg:         #f8cbad;  --q-line:        #c55a11;
    --p-bg:         #fce4d6;  --p-line:        #f4b183;
    --q-ink:        #833c0b;
    --link-bg:      #e1e6f2;  --link-ink:      var(--c2);

    --f-sans:  "Jost", "Avenir Next", "Century Gothic", "Segoe UI", sans-serif;
    --fs-base:  16px;
    --fs-h1:    34px;
    --fs-big:   40px;
    --fs-small: 13.5px;
    --fw-strong: 500;

    --sky: linear-gradient(165deg, var(--zenith) 0%, var(--indigo) 38%, var(--violet) 72%, var(--mauve) 100%);
    --measure-wide: 1320px;
    --radius:       12px;
    --radius-field: 5px;               /* conges de 5 px, comme les boutons du site */
    --radius-pill:  99px;
    --shadow:       0 1px 2px rgba(7, 11, 36, .05), 0 6px 20px rgba(7, 11, 36, .06);
}

@media (prefers-color-scheme: dark) {
    :root {
        --c-bg:         #0b1030;
        --c-surface:    #141a3e;
        --c-ink:        var(--ink-night);
        --c-ink-soft:   #a9aecb;
        --c-line:       #2a3160;
        --c-line-soft:  #1f2650;
        --c-accent:     var(--apricot);
        --c-accent-ink: #1a1440;
        --c-accent-bg:  #1b2250;
        --c-ok:         #8ad69a;
        --c-err-bg:     #3a1a24;
        --c-err-line:   #7c3441;
        --c-err-ink:    #f5b4ba;

        --rsvp-yes-bg:  #1f3a2c;  --rsvp-yes-ink:  #93d99c;
        --rsvp-wait-bg: #3a3320;  --rsvp-wait-ink: #e8c96a;
        --rsvp-no-bg:   #40202b;  --rsvp-no-ink:   #f2a3a8;
        --q-bg:         #43291f;  --q-line:        #e0874a;
        --p-bg:         #33262a;  --p-line:        #9c6a45;
        --q-ink:        #f5c7a4;
        --link-bg:      #1e2a52;  --link-ink:      #b8c6f0;
        --shadow:       none;
    }
}

/* ========================================================================
   2. BANDEAU, COMPTEUR, TITRES
   ======================================================================== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    padding: 0 0 4rem;
    background: var(--c-bg);
    color: var(--c-ink);
    font: 400 var(--fs-base)/1.55 var(--f-sans);
}
main { max-width: var(--measure-wide); margin: 0 auto; padding: 0 1.25rem; }
a { color: var(--c-accent); }
small { font-size: var(--fs-small); }
.muted { color: var(--c-ink-soft); }
b, strong { font-weight: var(--fw-strong); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
}

/* Le bandeau : meme fond que la page (aucune coupure), texte et icones bleu marine */
header.bar {
    position: relative;
    padding: 1.6rem 0 4.4rem;
    color: var(--navy);
    background: var(--c-bg);
}
.bar__in {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 1.2rem 2rem;
    max-width: var(--measure-wide);
    margin: 0 auto;
    padding: 0 1.25rem;
}
.brand { display: flex; align-items: center; gap: 1rem; color: inherit; text-decoration: none; }
.brand .cross { width: 42px; height: 42px; flex: none; color: var(--navy); }
.brand__name {
    font-family: var(--f-sans);
    font-weight: 300;
    font-size: 54px;
    line-height: 1;
    letter-spacing: .06em;
}
.brand__sub {
    align-self: flex-end;
    margin-bottom: .45rem;
    padding-left: 1rem;
    border-left: 1px solid rgba(18, 26, 74, .3);
    color: var(--navy);
    font-size: 14px;
    letter-spacing: .22em;
    text-transform: uppercase;
}
.logout { justify-self: end; display: flex; align-items: center; gap: .9rem; margin-bottom: .45rem; font-size: 14px; color: var(--navy); }
.logout button.link { color: var(--navy); }
nav.tabs { grid-column: 1 / -1; display: flex; gap: .4rem; margin-top: 1.4rem; overflow-x: auto; }
nav.tabs a {
    padding: .45rem 1.05rem .5rem;
    border: 1px solid rgba(18, 26, 74, .25);
    border-radius: var(--radius-pill);
    color: var(--navy);
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: .03em;
    transition: background-color .2s, color .2s, border-color .2s;
}
nav.tabs a:hover { background: rgba(18, 26, 74, .07); }
nav.tabs a[aria-current] { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: var(--fw-strong); }
nav.tabs .badge {
    display: inline-block;
    min-width: 1.45rem;
    margin-left: .45rem;
    padding: 0 .4rem;
    border-radius: var(--radius-pill);
    background: var(--glow);
    color: #1a1440;
    font-size: 12px;
    font-weight: var(--fw-strong);
    line-height: 1.55;
    text-align: center;
}

@media (prefers-color-scheme: dark) {
    header.bar { --navy: var(--ink-night); }
    nav.tabs a[aria-current] { background: var(--apricot); border-color: var(--apricot); color: #1a1440; }
}

/* Compteur : quatre cartes qui chevauchent le bas du bandeau ; chacune mene a sa liste */
.totals {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    max-width: var(--measure-wide);
    margin: -3rem auto 2.2rem;
    padding: 0 1.25rem;
}
.stat {
    display: block;
    padding: 1rem 1.2rem .9rem;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    box-shadow: 0 10px 28px rgba(7, 11, 36, .12);
    color: inherit;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.stat:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(7, 11, 36, .16); }
.stat[aria-current] { border-color: var(--c-accent); box-shadow: 0 0 0 2px var(--c-accent), 0 10px 28px rgba(7, 11, 36, .12); }
.stat strong { display: block; font-weight: 400; font-size: var(--fs-big); line-height: 1.1; font-variant-numeric: lining-nums tabular-nums; }
.stat span { color: var(--c-ink-soft); font-size: var(--fs-small); letter-spacing: .12em; text-transform: uppercase; }
.stat span::before { content: ""; display: inline-block; width: .6rem; height: .6rem; margin-right: .5rem; border-radius: 50%; vertical-align: .05em; }
.stat.yes  span::before { background: var(--rsvp-yes-ink); }
.stat.no   span::before { background: var(--rsvp-no-ink); }
.stat.wait span::before { background: var(--rsvp-wait-ink); }
.stat.all  span::before { background: var(--c-accent); }

.head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; margin: 0 0 .9rem; }
h1 { margin: 0; font-weight: 400; font-size: var(--fs-h1); line-height: 1.15; letter-spacing: .01em; color: var(--c-accent); }
.head .count { color: var(--c-ink-soft); letter-spacing: .04em; }
p.intro { margin: -.2rem 0 1.1rem; color: var(--c-ink-soft); max-width: 62rem; }
p.flash {
    margin: 0 0 1.2rem;
    padding: .7rem 1rem;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-left: 4px solid var(--glow);
    border-radius: var(--radius-field);
    box-shadow: var(--shadow);
}

/* ========================================================================
   3. FILTRES, BOUTONS, CHAMPS
   ======================================================================== */
form.filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem .65rem;
    margin: 0 0 1.1rem;
    padding: .8rem .9rem;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
form.filters input[type="search"] { flex: 1 1 16rem; min-width: 12rem; }
form.filters .spacer { flex: 1 1 auto; }
input[type="search"], input[type="text"], input[type="password"], select {
    padding: .5rem .65rem;
    background: var(--c-bg);
    color: var(--c-ink);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-field);
    font: inherit;
}
input:hover, select:hover { border-color: rgba(42, 54, 82, .35); }
select { padding-right: 1.6rem; }
label.check { display: inline-flex; align-items: center; gap: .45rem; color: var(--c-ink-soft); cursor: pointer; white-space: nowrap; }
label.check input { width: 1rem; height: 1rem; accent-color: var(--c-accent); }

button, a.btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .45rem .9rem;
    background: var(--c-surface);
    color: var(--c-ink);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-field);
    font: inherit;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, filter .15s;
}
button:hover, a.btn:hover { border-color: var(--c-accent); }
/* Le bouton principal : bleu C2, capitales espacees (sans-serif, comme tout le back-office) */
button.primary, a.btn.primary {
    padding: .55rem 1.15rem .5rem;
    background: var(--c2);
    border-color: var(--c2);
    color: #fff;
    font-weight: var(--fw-strong);
    font-size: 14px;
    letter-spacing: .1em;
    text-transform: uppercase;
}
button.primary:hover { filter: brightness(1.15); }
button.ok { color: var(--c-ok); border-color: currentColor; font-weight: var(--fw-strong); }
button.ok:hover { background: var(--rsvp-yes-bg); }
button.danger { background: var(--c-err-bg); border-color: var(--c-err-line); color: var(--c-err-ink); font-weight: var(--fw-strong); }
button.small { padding: .22rem .6rem; font-size: var(--fs-small); }
button.link { padding: 0; background: none; border: 0; color: var(--c-accent); text-decoration: underline; text-underline-offset: .2em; }
a.quiet { color: var(--c-ink-soft); text-decoration: none; font-size: var(--fs-small); }
a.quiet:hover { color: var(--c-accent); text-decoration: underline; }
a.csv { font-size: var(--fs-small); }
form.inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: .1rem 0; }
form.inline select { padding: .25rem 1.4rem .25rem .5rem; font-size: var(--fs-small); }

/* ========================================================================
   4. TABLEAUX, PASTILLES, QUESTIONS, BULLES
   ======================================================================== */
.card {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow-x: auto;
}
table.grid { width: 100%; border-collapse: collapse; font-size: 15px; }
table.grid th, table.grid td {
    padding: .65rem .45rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--c-line-soft);
}
table.grid th:first-child, table.grid td:first-child { padding-left: .9rem; }
table.grid th:last-child, table.grid td:last-child { padding-right: .9rem; }
table.grid tbody tr:last-child td { border-bottom: 0; }
table.grid tbody tr:hover td { background: var(--c-accent-bg); }

/* Guests trie par foyer : un foyer = un bloc (views/guests.php). Entre membres, un trait pointille
   leger ; entre foyers, le trait plein habituel ; un foyer sur deux a peine teinte. */
table.grid tbody tr.hh-more td { border-bottom: 1px dashed var(--c-line-soft); }
table.grid tbody tr.hh-more:not(:hover) td { border-bottom-color: color-mix(in srgb, var(--c-line-soft) 70%, transparent); }
table.grid tbody tr.hh-cont td { padding-top: .35rem; }
table.grid tbody tr.hh-more td { padding-bottom: .35rem; }
table.grid tbody tr.hh-alt td { background: color-mix(in srgb, var(--c-accent-bg) 55%, var(--c-surface)); }
table.grid tbody tr.hh-alt:hover td, table.grid tbody tr:hover td { background: var(--c-accent-bg); }
/* repete le premier membre du foyer : texte plus clair (la couleur seule, pas l'opacite, qui palissait aussi le fond) */
table.grid tbody td.same { color: color-mix(in srgb, var(--c-ink-soft) 62%, var(--c-surface)); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
table.grid th {
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-line);
    color: var(--c-ink-soft);
    font-size: 12px;
    font-weight: var(--fw-strong);
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
}
table.grid th a { color: inherit; text-decoration: none; }
table.grid th a:hover { color: var(--c-accent); }
table.grid th[aria-sort] a { color: var(--c-accent); }
td.num, td.c, th.c { text-align: center; font-variant-numeric: tabular-nums; }
td.num { color: var(--c-ink-soft); }
td.date { white-space: nowrap; color: var(--c-ink-soft); font-size: 12.5px; font-variant-numeric: tabular-nums; }
td.name .who, td.name strong { font-weight: var(--fw-strong); }
td.name small { display: block; }
td.mail, td.phone { color: var(--c-ink-soft); white-space: nowrap; }
/* Ecran plus etroit que 1440 px : l'adresse peut passer a la ligne, seulement apres le « @ » (<wbr>) */
@media (max-width: 89.99rem) { td.mail { white-space: normal; } }
td.mail .nw { white-space: nowrap; }
/* Plus etroit que 1280 px : les en-tetes (capitales espacees) et les telephones passent aussi a la ligne,
   pour que le tableau tienne dans sa carte au lieu de deborder (la carte ne defile pas au-dessus de 64rem) */
@media (max-width: 79.99rem) {
    table.grid th { white-space: normal; letter-spacing: .06em; }
    td.phone { white-space: normal; min-width: 5.5rem; }
}
tr.old td { opacity: .55; }
p.empty { padding: 3rem 0; text-align: center; color: var(--c-ink-soft); font-size: 20px; }

.pill {
    display: inline-block;
    padding: .12rem .65rem;
    border-radius: var(--radius-pill);
    font-size: var(--fs-small);
    font-weight: var(--fw-strong);
    line-height: 1.5;
    white-space: nowrap;
}
.rsvp-confirmed     { background: var(--rsvp-yes-bg);  color: var(--rsvp-yes-ink); }
.rsvp-not_answered  { background: var(--rsvp-wait-bg); color: var(--rsvp-wait-ink); }
.rsvp-not_attending { background: var(--rsvp-no-bg);   color: var(--rsvp-no-ink); }
.tag {
    display: inline-block;
    margin: .2rem .3rem 0 0;
    padding: 0 .55rem;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-pill);
    color: var(--c-ink-soft);
    font-size: 12px;
    line-height: 1.65;
    white-space: nowrap;
}
.tag.warn { border-color: var(--p-line); background: var(--p-bg); color: var(--q-ink); }
.tag.accent { border-color: var(--c-accent); color: var(--c-accent); }
.tag.hidden-tag { border-color: var(--c-err-line); background: var(--c-err-bg); color: var(--c-err-ink); }

/* Unknown */
.stamp { display: inline-block; padding: .15rem .6rem; border-radius: var(--radius-field); font-size: var(--fs-small); font-weight: var(--fw-strong); }
.stamp-accepted { background: var(--rsvp-yes-bg); color: var(--rsvp-yes-ink); }
.stamp-denied   { background: var(--rsvp-no-bg);  color: var(--rsvp-no-ink); }
.stamp-linked   { background: var(--link-bg);     color: var(--link-ink); }
td.entry { min-width: 15rem; }
td.entry small { display: block; }
td.gender form.inline, td.actions form.inline { flex-wrap: nowrap; }
td.gender small { display: block; }
td.review { white-space: nowrap; }
td.review small { display: block; }
td.actions { min-width: 13rem; }
td.actions .row { display: flex; gap: .4rem; margin-bottom: .4rem; }
td.actions a.quiet { display: block; margin-top: .25rem; white-space: nowrap; }
/* Deja revu : « Change » rouvre Accept / Deny */
details.change > summary {
    display: inline-flex;
    padding: .4rem .95rem;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-field);
    background: var(--c-surface);
    list-style: none;
    cursor: pointer;
}
details.change > summary::-webkit-details-marker { display: none; }
details.change > summary:hover { border-color: var(--c-accent); }
details.change[open] > summary { margin-bottom: .45rem; background: var(--c-accent-bg); color: var(--c-ink-soft); font-size: var(--fs-small); padding: .2rem .7rem; }
details.change[open] > summary::after { content: " ×"; }

/* Comments : orange = question, orange clair = question possible */
td.comment { min-width: 18rem; max-width: 34rem; white-space: normal; border-left: 3px solid transparent; }
td.lvl-question { background: var(--q-bg); border-left-color: var(--q-line); color: var(--q-ink); }
td.lvl-possible { background: var(--p-bg); border-left-color: var(--p-line); color: var(--q-ink); }
table.grid tbody tr:hover td.lvl-question { background: var(--q-bg); }
table.grid tbody tr:hover td.lvl-possible { background: var(--p-bg); }
.legend { display: flex; flex-wrap: wrap; gap: .5rem; margin: -.2rem 0 1rem; }
.legend .pill.q { background: var(--q-bg); color: var(--q-ink); }
.legend .pill.p { background: var(--p-bg); color: var(--q-ink); }
.answered { color: var(--c-ok); font-weight: var(--fw-strong); font-size: var(--fs-small); }

/* Saluts (details, sans script) */
details.greet { margin-top: .3rem; }
details.greet summary { cursor: pointer; color: var(--c-accent); font-size: 12px; list-style: none; letter-spacing: .03em; }
details.greet summary::-webkit-details-marker { display: none; }
details.greet summary::before { content: "▸ "; }
details.greet[open] summary::before { content: "▾ "; }
details.greet table { margin-top: .35rem; border-collapse: collapse; font-size: var(--fs-small); }
details.greet th, details.greet td { padding: .1rem .6rem .1rem 0; border: 0; background: none; white-space: nowrap; font-weight: normal; text-transform: none; letter-spacing: 0; }
details.greet th { color: var(--c-ink-soft); }

/* E-mail modifie : le triangle rouge de la note de cellule Excel ; au survol, l'ancienne adresse */
td.has-note { position: relative; padding-right: 1rem; }
.note {
    position: absolute;
    top: 0;
    right: 0;
    width: 14px;
    height: 14px;
    cursor: help;
    background: linear-gradient(225deg, #d32f2f 50%, transparent 50%);
}
.note:focus-visible { outline: 2px solid var(--c-accent); }
.note-pop {
    display: none;
    position: absolute;
    top: 14px;
    right: 0;
    z-index: 5;
    width: max-content;
    max-width: 26rem;
    padding: .65rem .8rem;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-field);
    box-shadow: 0 10px 28px rgba(7, 11, 36, .18);
    color: var(--c-ink);
    white-space: nowrap;
    cursor: auto;
}
.note-pop::before { content: ""; position: absolute; top: -14px; right: 0; width: 100%; height: 14px; }
.note:hover .note-pop, .note:focus-within .note-pop { display: block; }
.note-pop .prev { display: grid; grid-template-columns: 1fr auto; gap: .1rem .6rem; align-items: center; }
.note-pop .prev + .prev { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--c-line-soft); }
.note-pop .prev small { grid-column: 1 / -1; }
.copyable { user-select: all; font-weight: var(--fw-strong); }

/* RSVP modifiable : clic sur la pastille -> les deux autres etats */
td.rsvp-cell { position: relative; white-space: nowrap; }
details.rsvp-edit > summary { list-style: none; cursor: pointer; }
details.rsvp-edit > summary::-webkit-details-marker { display: none; }
details.rsvp-edit > summary:hover { box-shadow: 0 0 0 2px rgba(18, 26, 74, .18); }
details.rsvp-edit .caret { font-size: 10px; opacity: .6; }
.rsvp-menu {
    position: absolute;
    top: 2.3rem;
    left: .5rem;
    z-index: 6;
    display: grid;
    gap: .35rem;
    min-width: 13rem;
    padding: .6rem .7rem;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-field);
    box-shadow: 0 10px 28px rgba(7, 11, 36, .18);
}
.rsvp-menu form { margin: 0; }
.rsvp-menu button.pill { width: 100%; justify-content: center; border: 0; padding: .3rem .7rem; cursor: pointer; }
.rsvp-menu button.pill:hover { filter: brightness(.95); box-shadow: 0 0 0 2px rgba(18, 26, 74, .15); }
td.rsvp-cell small.manual { display: block; margin-top: .2rem; color: var(--c-ink-soft); font-size: 12px; }

/* Categorie de cabine : meme menu que le RSVP ; le numero vient a la confirmation */
/* Le libelle passe a la ligne : sans cela la colonne elargissait le tableau au-dela de sa carte */
td.room-cell { position: relative; min-width: 8.5rem; }
.room-edit .swatch svg { display: inline-block; width: .8rem; height: .8rem; margin-right: .35rem; vertical-align: -1px; }
summary.room-pick {
    display: inline-block;
    max-width: 11rem;
    line-height: 1.35;
    padding: .15rem .55rem;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-field);
    font-size: var(--fs-small);
}
summary.room-pick.is-none { color: var(--c-ink-soft); border-style: dashed; }
/* Deux lignes nettes : le pont (ou « Suite »), puis le type en petit ; jamais coupe au milieu d'un mot */
summary.room-pick .rp-main, summary.room-pick .rp-sub { display: block; white-space: nowrap; }
summary.room-pick .rp-sub { padding-left: 1.15rem; color: var(--c-ink-soft); font-size: 12px; }
.room-edit .rsvp-menu { min-width: 16rem; }
button.room-opt {
    display: flex; align-items: center; gap: .1rem;
    width: 100%;
    padding: .3rem .6rem;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-field);
    background: transparent;
    color: inherit;
    font: inherit; font-size: var(--fs-small);
    text-align: left;
    cursor: pointer;
}
button.room-opt small { margin-left: auto; padding-left: .8rem; }
button.room-opt:hover { border-color: var(--c-accent); }
button.room-opt.quiet { border-style: dashed; color: var(--c-ink-soft); }
td.room-cell .cabin-no { display: block; margin-top: .25rem; font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; }
td.room-cell small.room-note { display: block; margin-top: .2rem; color: var(--c-ink-soft); font-size: 12px; }
td.room-cell small.room-note.warn { color: var(--q-ink); }

/* Colonne Comments : l'icone ouvre le commentaire */
td.c { position: relative; }
details.cmt { display: flex; justify-content: center; }
details.cmt > summary { list-style: none; display: inline-flex; cursor: pointer; padding: .15rem; border-radius: var(--radius-field); }
details.cmt > summary::-webkit-details-marker { display: none; }
details.cmt svg { width: 20px; height: 20px; fill: var(--c-ink-soft); transition: transform .15s; }
details.cmt summary:hover svg { fill: var(--c-accent); transform: scale(1.12); }
details.cmt-question svg { fill: var(--q-line); }
details.cmt-possible svg { fill: var(--p-line); }
details.cmt[open] summary { background: var(--c-accent-bg); }
.cmt-pop {
    position: absolute;
    top: 2.3rem;
    left: 50%;
    z-index: 5;
    width: 20rem;
    padding: .65rem .8rem;
    transform: translateX(-50%);
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-field);
    box-shadow: 0 10px 28px rgba(7, 11, 36, .18);
    text-align: left;
    white-space: normal;
}
.cmt-pop p { margin: 0 0 .5rem; padding: .45rem .6rem; border-left: 3px solid var(--c-line); border-radius: 3px; }
.cmt-pop p.lvl-question { background: var(--q-bg); border-left-color: var(--q-line); color: var(--q-ink); }
.cmt-pop p.lvl-possible { background: var(--p-bg); border-left-color: var(--p-line); color: var(--q-ink); }
.cmt-pop small.answered { display: block; margin-top: .2rem; }

/* Mise a jour automatique : avis (on etait occupe) et petit message « Updated » */
.live-note, .live-toast {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .7rem .9rem;
    background: var(--navy);
    color: #fff;
    border-radius: var(--radius);
    box-shadow: 0 12px 30px rgba(7, 11, 36, .3);
    font-size: 14px;
}
.live-note button.primary { background: #fff; border-color: #fff; color: var(--navy); }
.live-toast { padding: .45rem .9rem; animation: fade 2.5s forwards; }
@keyframes fade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }

/* ========================================================================
   5. CONNEXION, TELEPHONE
   ======================================================================== */
body.is-login {
    min-height: 100vh;
    padding: 0;
    background:
        radial-gradient(1.6px 1.6px at 14% 22%, rgba(255, 255, 255, .9), transparent 60%),
        radial-gradient(1.2px 1.2px at 30% 68%, rgba(255, 255, 255, .7), transparent 60%),
        radial-gradient(1.8px 1.8px at 52% 14%, rgba(255, 255, 255, .85), transparent 60%),
        radial-gradient(1.2px 1.2px at 66% 80%, rgba(255, 255, 255, .6), transparent 60%),
        radial-gradient(1.6px 1.6px at 78% 30%, rgba(255, 255, 255, .8), transparent 60%),
        radial-gradient(2px 2px at 90% 58%, rgba(255, 255, 255, .9), transparent 60%),
        radial-gradient(120% 80% at 50% 120%, rgba(239, 167, 122, .45), transparent 60%),
        var(--sky);
    background-attachment: fixed;
}
.login-wrap { display: grid; justify-items: center; gap: 1.6rem; padding: 12vh 1.25rem 3rem; }
.login-brand { display: grid; justify-items: center; gap: .6rem; margin: 0; color: var(--ink-night); }
.login-brand .cross { width: 56px; height: 56px; filter: drop-shadow(0 0 16px rgba(190, 200, 255, .5)); }
.login-brand .brand__name { font-size: 64px; }
.login-brand .brand__sub { padding: 0; border: 0; margin: 0; color: var(--apricot); }   /* sur le ciel : pas de marine */
.login {
    display: grid;
    gap: .95rem;
    width: 100%;
    max-width: 22rem;
    padding: 1.6rem 1.5rem 1.5rem;
    background: var(--c1);
    border-radius: var(--radius);
    box-shadow: 0 18px 48px rgba(7, 11, 36, .45);
    color: var(--c2);
}
.login label { display: grid; gap: .3rem; font-size: var(--fs-small); letter-spacing: .08em; text-transform: uppercase; }
.login input { width: 100%; background: #fff; font-size: var(--fs-base); color: var(--c2); text-transform: none; letter-spacing: 0; }
.login button { justify-content: center; padding: .7rem 1rem; font-size: 15px; }
.error {
    margin: 0;
    padding: .6rem .8rem;
    background: var(--c-err-bg);
    border: 1px solid var(--c-err-line);
    border-radius: var(--radius-field);
    color: var(--c-err-ink);
}

/* Grand ecran : rien ne coupe les bulles. Plus etroit : le tableau defile dans sa carte.
   Seuil 70rem (1120 px) et non 64rem : en dessous, la liste Guests (11 colonnes, au plus serre
   ~1060 px) ne tient plus dans sa carte et son en-tete depassait a droite. */
@media (min-width: 70rem) {
    .card { overflow: visible; }
    table.grid thead th:first-child { border-top-left-radius: var(--radius); }
    table.grid thead th:last-child  { border-top-right-radius: var(--radius); }
}

@media (max-width: 48rem) {
    header.bar { padding: 1.1rem 0 3.8rem; }
    .bar__in { grid-template-columns: 1fr; }
    .brand__name { font-size: 40px; }
    .brand .cross { width: 32px; height: 32px; }
    .brand__sub { display: none; }
    .logout { justify-self: start; margin: 0; }
    .totals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
    .stat strong { font-size: 32px; }
    h1 { font-size: 28px; }
    table.grid .hide-sm { display: none; }
}

/* ========================================================================
   ROOMS : le plan du bateau (views/rooms.php, lib/Ship.php)
   Couleurs des types = attributs fill/stroke du SVG (celles de la legende du plan d'origine) ;
   ici seulement l'intensite : pale = lit libre, mi-teinte = reserve, pleine = confirme.
   ======================================================================== */
:root {
    --ship-hull:  #e6e4e1;
    --ship-line:  #d3d0cc;
    --ship-label: #65274b;
    --ship-free:  .14;      /* cabine libre */
    --ship-res:   .36;      /* reservee : invites attribues, pas encore de reponse */
    --ship-part:  .7;       /* un lit sur deux confirme */
    --ship-sel:   #121a4a;  /* contour de la cabine choisie (sur coque claire, dans les deux modes) */
}
/* Mode sombre : les ponts restent clairs, comme le plan imprime, sur la carte sombre. Sur une coque
   sombre, le marine (Hauptdeck) et le violet disparaissaient. */
@media (prefers-color-scheme: dark) {
    :root {
        --ship-hull:  #dcd9d3;
        --ship-line:  #c4bfb8;
    }
}

.room-types {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: .8rem;
    margin: 0 0 1.2rem;
}
.room-type {
    display: flex;
    gap: .75rem;
    padding: .85rem 1rem;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.room-type .swatch svg { display: block; width: 1.1rem; height: 1.1rem; margin-top: .25rem; }
.room-type__txt { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1; }
.room-type__txt small { line-height: 1.4; }
.meter svg { display: block; width: 100%; height: 6px; margin: .35rem 0 .15rem; }
.meter-bg { fill: var(--c-line-soft); }
.meter .cab-res { fill-opacity: var(--ship-res); }

.ship-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 16.5rem;
    gap: 1rem;
    align-items: start;
    scroll-margin-top: 1rem;
}
.card.ship { padding: 1rem 1.2rem .6rem; overflow: hidden; }
.deck + .deck { margin-top: .6rem; }
.deck h2 {
    margin: 0 0 .1rem;
    font-weight: 400;
    font-size: 20px;
    color: var(--c-accent);
}
.deck h2 small { margin-left: .5rem; font-size: var(--fs-small); letter-spacing: .02em; }
.deck-map { display: block; width: 100%; height: auto; }
.hull { fill: var(--ship-hull); stroke: var(--ship-line); stroke-width: .6; }
.ship-label { fill: var(--ship-label); font-family: var(--f-sans); font-size: 6.4px; font-weight: 500; letter-spacing: .04em; }

/* Quatre intensites de la couleur du type : libre, reservee, a moitie confirmee, pleine */
.cabin { cursor: pointer; }
.cabin .cab-bg { stroke-width: .7; stroke-opacity: .5; }
.cabin.is-free     .cab-bg { fill-opacity: var(--ship-free); }
.cabin.is-reserved .cab-bg { fill-opacity: var(--ship-res); }
.cabin.is-part     .cab-bg { fill-opacity: var(--ship-part); stroke-opacity: .9; }
.cabin.is-full     .cab-bg { fill-opacity: 1; stroke-opacity: 1; }
.cab-num {
    font-family: var(--f-sans);
    font-size: 7.2px;
    font-weight: 500;
    text-anchor: middle;
    dominant-baseline: central;
    letter-spacing: .02em;
    pointer-events: none;
}
.cab-num.on { fill: #fff; }
.cabin:hover .cab-bg, .cabin:focus-visible .cab-bg { stroke-opacity: 1; stroke-width: 1.3; }
.cabin:focus { outline: none; }
.cabin.is-sel .cab-bg { stroke: var(--ship-sel); stroke-opacity: 1; stroke-width: 1.6; }
.cabin.is-over .cab-bg { stroke: var(--c-err-ink); stroke-opacity: 1; stroke-dasharray: 2 1.2; }

.ship-legend { margin: .9rem 0 .2rem; gap: .5rem 1.4rem; color: var(--c-ink-soft); font-size: var(--fs-small); }
.ship-legend span { display: inline-flex; align-items: center; gap: .45rem; cursor: default; }
.ship-legend svg { width: 16px; height: 20px; }
.ship-legend .hull { stroke: none; }
.ship-label.out { fill: var(--c-ink-soft); }

.ship-side { display: grid; gap: 1rem; }
.room-detail { padding: 1rem 1.1rem; }
.room-detail h2 { margin: 0 0 .3rem; font-weight: 400; font-size: 22px; color: var(--c-accent); }
.room-detail h2 .count { font-size: 15px; color: var(--c-ink-soft); margin-left: .3rem; }
.room-detail p { margin: .2rem 0 .7rem; }
ul.plain { list-style: none; margin: .3rem 0 .8rem; padding: 0; }
ul.plain li { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .5rem; padding: .35rem 0; border-bottom: 1px solid var(--c-line-soft); }
ul.plain li:last-child { border-bottom: 0; }
ul.plain .tag { margin: 0; }
dl.facts { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; margin: .6rem 0 0; }
dl.facts dt { color: var(--c-ink-soft); font-size: var(--fs-small); letter-spacing: .08em; text-transform: uppercase; }
dl.facts dd { margin: 0; font-variant-numeric: tabular-nums; }
.small-note { font-size: 12.5px; margin-top: .8rem; }
/* Bouton « Assign » du panneau : mettre un invite dans la cabine choisie */
form.assign { display: grid; gap: .45rem; margin: .4rem 0 .9rem; padding-top: .8rem; border-top: 1px solid var(--c-line-soft); }
form.assign label { font-size: var(--fs-small); }
form.assign select { width: 100%; }
form.assign button { justify-self: start; }
.unplaced { margin-top: 1rem; }
ul.plain.cols { columns: 15rem auto; column-gap: 2rem; }
ul.plain.cols li { break-inside: avoid; }

/* ========================================================================
   DASHBOARD
   Couleurs des marques = les etats RSVP, verifiees au daltonisme (validate_palette.js, 2026-09-29) :
   clair #1f7a4d / #e8717c / #c99a1e (ecart 8,8) ; sombre #1f7a4d / #e06a76 / #a8801c (6,9 : legal
   seulement avec un second codage -> legende, libelles, 2 px d'air, vue en tableau, tous presents).
   ======================================================================== */
:root { --dv-yes: #1f7a4d; --dv-no: #e8717c; --dv-wait: #c99a1e; --dv-accent: var(--c2); }
@media (prefers-color-scheme: dark) {
    :root { --dv-yes: #1f7a4d; --dv-no: #e06a76; --dv-wait: #a8801c; --dv-accent: var(--apricot); }
}
.dash-top { display: grid; grid-template-columns: minmax(16rem, 1.4fr) repeat(4, minmax(9rem, 1fr)); gap: .8rem; margin: 0 0 1rem; }
.dash-top .card { padding: .95rem 1.1rem; }
.hero-label, .tile-label { margin: 0; color: var(--c-ink-soft); font-size: var(--fs-small); letter-spacing: .08em; text-transform: uppercase; }
.hero-value { margin: .1rem 0 0; font-size: 52px; line-height: 1.05; font-weight: 400; color: var(--c-accent); }
.hero-sub { margin: .3rem 0 .5rem; font-size: var(--fs-small); color: var(--c-ink-soft); }
.hero-sub strong { color: var(--c-ink); }
.dash-top .meter svg { height: 6px; margin: 0; }
.dv-fill { fill: var(--dv-accent); }
a.tile { display: flex; flex-direction: column; gap: .15rem; color: inherit; text-decoration: none; }
a.tile:hover { border-color: var(--c-accent); }
.tile-value { font-size: 32px; font-weight: 400; line-height: 1.1; }
.tile-value small { font-size: 16px; color: var(--c-ink-soft); }
a.tile small { color: var(--c-ink-soft); font-size: 12.5px; line-height: 1.35; }
a.tile.is-due { border-left: 3px solid var(--q-line); }

.card.chart { padding: 1rem 1.2rem .7rem; margin: 0 0 1rem; }
.chart-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1.2rem; }
.chart-head h2, .recent h2, .ring-card h2 { margin: 0; font-weight: 400; font-size: 20px; color: var(--c-accent); }
.chart-legend { margin: 0; gap: .3rem 1rem; font-size: var(--fs-small); color: var(--c-ink-soft); }
.chart-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.chart-legend svg { width: 18px; height: 10px; }
.chart-legend rect { width: 10px; }
svg.dv { display: block; width: 100%; height: auto; overflow: visible; }
.dv-end, .dv-label { font-family: var(--f-sans); fill: var(--c-ink); font-size: 12px; }
.dv-label { font-size: 13px; }
.dv-bar.yes { fill: var(--dv-yes); }
.dv-bar.no { fill: var(--dv-no); }
.dv-bar.wait { fill: var(--dv-wait); }
.dv-bar:hover { filter: brightness(1.08); }

/* Anneau « Attending » : une part par etat, 2 px d'air (le trait du cercle, stroke-dasharray) */
.ring-card h2 { margin: 0 0 .5rem; }
.ring-body { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; }
svg.ring { width: 200px; max-width: 100%; flex: none; }
.ring-track { fill: none; stroke: var(--c-line-soft); stroke-width: 26; }
.ring-seg { fill: none; stroke-width: 26; }
.ring-seg.yes { stroke: var(--dv-yes); }
.ring-seg.no { stroke: var(--dv-no); }
.ring-seg.wait { stroke: var(--dv-wait); }
.ring-seg:hover { filter: brightness(1.08); }
.ring-value { font-family: var(--f-sans); font-size: 34px; fill: var(--c-accent); }
.ring-sub { font-family: var(--f-sans); font-size: 12px; fill: var(--c-ink-soft); }
ul.ring-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; min-width: 12rem; }
ul.ring-legend li { display: grid; grid-template-columns: 12px 1fr auto 3.2rem; align-items: center; gap: .5rem; font-size: var(--fs-small); }
ul.ring-legend svg { width: 11px; height: 11px; }
ul.ring-legend strong { font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; text-align: right; }
ul.ring-legend small { color: var(--c-ink-soft); font-variant-numeric: tabular-nums; text-align: right; }
details.dv-table { margin-top: .4rem; font-size: var(--fs-small); }
details.dv-table summary { cursor: pointer; color: var(--c-ink-soft); }
details.dv-table table { margin-top: .4rem; }
.dash-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 1rem; align-items: stretch; }
.dash-cols .card.chart { margin: 0; }
.card.recent { padding: 1rem 1.2rem; margin-top: 1rem; }
.recent li .when { margin-left: auto; white-space: nowrap; }
@media (max-width: 72rem) {
    .dash-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash-top .hero { grid-column: 1 / -1; }
    .dash-cols { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Etape 2 : Photos et Essen ---------------------------------------------- */
.tag.ok-tag { border-color: var(--rsvp-yes-ink); color: var(--rsvp-yes-ink); text-decoration: none; }
.card.upload { padding: 1rem 1.2rem; margin: 0 0 1rem; }
.upload__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .4rem 1rem; }
.upload__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.upload__meta .tag { margin: 0; }
.upload .memory { margin: .6rem 0 0; padding: .5rem .8rem; border-left: 3px solid var(--c-line); color: var(--c-ink-soft); font-style: italic; }
.photo-grid { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .8rem; }
.photo-grid li { display: flex; flex-direction: column; gap: .3rem; }
.photo-grid li.is-hidden { opacity: .45; }
.photo-grid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-field); background: var(--c-line-soft); }
.photo-grid .nothumb { display: grid; place-content: center; gap: .2rem; aspect-ratio: 1; border-radius: var(--radius-field); background: var(--c-line-soft); text-align: center; text-decoration: none; color: var(--c-ink); font-weight: var(--fw-strong); }
.photo-grid .nothumb small { font-weight: 400; color: var(--c-ink-soft); }
.photo-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .5rem; font-size: 12.5px; color: var(--c-ink-soft); }
.photo-meta .tag { margin: 0; }
.photo-meta form { margin-left: auto; }
.kitchen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0 0 1rem; }
.kitchen__box { padding: .9rem 1.2rem; }
.kitchen__box h2 { margin: 0 0 .3rem; font-weight: 400; font-size: 20px; color: var(--c-accent); }
.kitchen__box li { justify-content: space-between; }
.kitchen__box li strong { font-variant-numeric: tabular-nums; }
.pill.diet-vegan, .pill.diet-vegetarian { background: var(--rsvp-yes-bg); color: var(--rsvp-yes-ink); }
.pill.diet-pescetarian, .pill.diet-other { background: var(--rsvp-wait-bg); color: var(--rsvp-wait-ink); }
.pill.diet-all { background: var(--c-line-soft); color: var(--c-ink); }
@media (max-width: 48rem) { .kitchen { grid-template-columns: minmax(0, 1fr); } }

/* « To check » : a corriger (orange), a surveiller (gris) */
.checks { padding: .9rem 1.1rem .4rem; margin: 0 0 1.1rem; }
.checks h2 { margin: 0 0 .2rem; font-weight: 400; font-size: 20px; color: var(--c-accent); }
.checks h2 .count { font-size: 15px; color: var(--c-ink-soft); margin-left: .3rem; }
.checks.is-ok { padding-bottom: .9rem; }
.checks.is-ok p { margin: 0; }
.checks li { flex-wrap: nowrap; align-items: baseline; gap: .6rem; }
.checks li > span:nth-child(2) { flex: 1; }
.checks li a.quiet { white-space: nowrap; }
.checks .dot { flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: var(--c-ink-soft); transform: translateY(-1px); }
.checks .check-warn .dot { background: var(--q-line); }

/* Filtre par hote : ses cabines ressortent, les autres s'estompent */
.host-filter { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .4rem; margin: 0 0 .8rem; font-size: var(--fs-small); }
.host-filter > a:not(.btn), .print-bar > a:not(.quiet) {
    padding: .15rem .6rem; border: 1px solid var(--c-line); border-radius: 999px;
    color: inherit; text-decoration: none; font-size: var(--fs-small);
}
.host-filter > a:not(.btn):hover, .print-bar > a:not(.quiet):hover { border-color: var(--c-accent); }
.host-filter > a[aria-current="true"], .print-bar > a[aria-current="true"] { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-surface); }
.host-filter small { opacity: .7; margin-left: .15rem; }
.host-filter .spacer { flex: 1; }
.cabin.is-dim { opacity: .22; }
.cabin.is-dim.is-sel { opacity: 1; }             /* la cabine choisie reste lisible, meme hors filtre */
.cabin.is-host .cab-bg { stroke: var(--ship-sel); stroke-opacity: 1; stroke-width: 1.2; }

/* Liste a imprimer */
.print-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .4rem; margin: -.2rem 0 1rem; }
.print-bar button { margin-left: auto; }
.print-list { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 1.2rem 1.4rem; }
.print-head h1 { margin: 0; font-weight: 400; font-size: 24px; color: var(--c-accent); }
.print-head p { margin: .2rem 0 1rem; color: var(--c-ink-soft); font-size: var(--fs-small); }
.print-list h2 { margin: 1.2rem 0 .4rem; font-weight: 400; font-size: 20px; color: var(--c-accent); }
.print-list h3 { margin: .9rem 0 .3rem; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; }
table.grid.print { table-layout: fixed; width: 100%; }  /* memes colonnes d'un pont a l'autre */
table.grid.print td, table.grid.print th { padding: .25rem .6rem; }
.print-deck table.grid.print th:nth-child(2) { width: 24%; }
.print-deck table.grid.print th:nth-child(3) { width: 30%; }
.print-deck table.grid.print th:nth-child(4) { width: 16%; }
.print-az table.grid.print th:nth-child(1) { width: 30%; }
.print-az table.grid.print th:nth-child(3) { width: 18%; }
.print-az table.grid.print th:nth-child(4) { width: 16%; }
table.grid.print tr.first td { border-top: 1px solid var(--c-line); }
table.grid.print td.num, table.grid.print th.num { width: 4.5rem; text-align: left; }

@media print {
    header.bar, nav.totals, .flash, .no-print, .live-note, .live-toast { display: none !important; }
    body { background: #fff; color: #000; }
    main { padding: 0; max-width: none; }
    .print-list { border: 0; padding: 0; box-shadow: none; background: #fff; }
    .print-head h1, .print-list h2 { color: #000; }
    .print-deck, .print-az { break-inside: auto; }
    table.grid.print tr { break-inside: avoid; }
    .print-az { break-before: page; }
}

@media (max-width: 64rem) {
    .ship-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 48rem) {
    .card.ship { padding: .8rem .6rem .5rem; overflow-x: auto; }
    .deck-map { min-width: 38rem; }        /* le plan defile dans sa carte plutot que de devenir illisible */
}