/* ============================================
   Ferme Auberge Briassou — feuille de style
   ============================================ */

:root {
    --vert-fonce: #3d5a35;
    --vert: #6b8f3c;
    --vert-clair: #dcefcf;
    --terre: #a4472e;
    --terre-clair: #f4ece0;
    --brun: #5c3a21;
    --creme: #fffaf2;
    --gris-texte: #4a4038;
    --ombre: rgba(61, 42, 19, 0.15);
    --radius: 14px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Segoe UI', Verdana, Arial, sans-serif;
    color: var(--gris-texte);
    background: var(--creme);
    line-height: 1.55;
}

h1, h2, h3, h4 {
    font-family: Georgia, 'Times New Roman', serif;
    color: var(--vert-fonce);
    margin-top: 0;
}

a { color: var(--terre); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

/* ---------- Header ---------- */

.site-header {
    background: var(--vert-fonce);
    color: #fff;
    box-shadow: 0 2px 8px var(--ombre);
    position: sticky;
    top: 0;
    z-index: 50;
}

.site-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
}
.brand:hover { text-decoration: none; }
.brand-logo { font-size: 2rem; }
.brand-logo-img {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    border: 2px solid rgba(255,255,255,0.5);
}
.brand-text { font-family: Georgia, serif; font-size: 1rem; line-height: 1.2; }
.brand-text strong { font-size: 1.25rem; }

.main-nav { display: flex; gap: 6px; }
.main-nav a {
    color: #eef5e6;
    padding: 10px 16px;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: .02em;
}
.main-nav a:hover, .main-nav a.active {
    background: rgba(255,255,255,0.15);
    text-decoration: none;
}

.nav-toggle {
    display: none;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.6rem;
    cursor: pointer;
}

@media (max-width: 760px) {
    .main-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--vert-fonce);
        flex-direction: column;
        padding: 10px 20px 16px;
        display: none;
    }
    .main-nav.open { display: flex; }
    .nav-toggle { display: block; }
}

/* ---------- Hero / page de garde ---------- */

.hero-split {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 30px;
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 20px;
    align-items: start;
}
/* Empêche une colonne de grille de s'étirer au-delà de sa part à cause de
   la taille intrinsèque de son contenu (image du diaporama) : sans cela,
   la colonne photo peut écraser la colonne texte. */
.hero-diapo, .hero-menus { min-width: 0; }

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

/* diaporama */

.diaporama {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 6px 20px var(--ombre);
    background: #000;
    width: 100%;
    aspect-ratio: 4 / 3;
    min-height: 320px;
}

.diapo-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .6s ease;
}
.diapo-slide.active { opacity: 1; }
.diapo-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.diapo-legende {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,.6), transparent);
    color: #fff;
    padding: 30px 16px 12px;
    font-size: .95rem;
}

.diapo-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.85);
    border: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 1.4rem;
    cursor: pointer;
    color: var(--brun);
}
.diapo-nav.prev { left: 12px; }
.diapo-nav.next { right: 12px; }
.diapo-nav:hover { background: #fff; }

.diapo-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
}
.diapo-dots .dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: rgba(255,255,255,0.6);
    cursor: pointer;
}
.diapo-dots .dot.active { background: #fff; }

/* menus du jour / demain */

.hero-menus { display: flex; flex-direction: column; }
.hero-title {
    font-size: 2.4rem;
    margin-bottom: 2px;
}
.hero-sub { margin-top: 0; color: #7a6f63; }

.menu-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 0 16px;
}
.menu-toolbar-label {
    font-weight: 700;
    color: var(--vert-fonce);
}
.menu-arrow {
    background: var(--vert-clair);
    border: none;
    width: 34px; height: 34px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--vert-fonce);
}
.menu-arrow:hover { background: #cfe8b8; }
.menu-arrow:disabled { opacity: .4; cursor: not-allowed; }

.menu-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}

.menu-card {
    background: #fff;
    border: 1px solid #eadfce;
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: 0 3px 10px var(--ombre);
    min-height: 150px;
}
.menu-card .menu-card-tag {
    display: inline-block;
    background: var(--vert-clair);
    color: var(--vert-fonce);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 3px 10px;
    border-radius: 999px;
    margin-bottom: 8px;
}
.menu-card.today .menu-card-tag { background: var(--terre); color: #fff; }
.menu-card.example { border-style: dashed; background: #fbf7ef; }
.menu-card.example .menu-card-tag { background: #e8dcc4; color: var(--brun); }
.menu-card .menu-card-date {
    font-family: Georgia, serif;
    color: var(--brun);
    font-weight: 700;
    margin-bottom: 8px;
}
.menu-card .menu-card-content { font-size: .95rem; }
.menu-card .menu-card-content p { margin: 0 0 8px; }
.menu-card .menu-card-empty {
    color: #a89b8c;
    font-style: italic;
}

.btn-outline {
    align-self: flex-start;
    margin-top: 16px;
    background: transparent;
    border: 2px solid var(--vert);
    color: var(--vert-fonce);
    font-weight: 700;
    padding: 9px 18px;
    border-radius: 999px;
    cursor: pointer;
}
.btn-outline:hover { background: var(--vert-clair); }
.btn-outline[hidden] { display: none; }

/* ---------- Texte d'intro accueil (sous la photo et les menus) ---------- */

.home-intro {
    max-width: 900px;
    margin: 10px auto 40px;
    padding: 0 20px;
    text-align: center;
}
.home-intro h2 { font-size: 1.6rem; margin-bottom: 10px; }
.home-intro .rich-text { text-align: left; color: var(--terre); }
.home-intro .rich-text p { margin: 0 0 14px; }
.home-intro .rich-text ul, .home-intro .rich-text ol { margin: 0 0 14px 20px; }

/* ---------- Teasers accueil ---------- */

.home-teaser {
    max-width: 1200px;
    margin: 10px auto 50px;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 760px) { .home-teaser { grid-template-columns: 1fr; } }

.teaser-card {
    background: var(--terre-clair);
    border-radius: var(--radius);
    padding: 22px;
    text-align: center;
}
.teaser-card h2 { font-size: 1.3rem; }

.btn {
    display: inline-block;
    margin-top: 10px;
    background: var(--vert-fonce);
    color: #fff;
    padding: 9px 20px;
    border-radius: 999px;
    font-weight: 600;
}
.btn:hover { background: var(--vert); text-decoration: none; color: #fff; }

/* ---------- Pages simples (diaporama gauche / texte droite) ---------- */

.page-split {
    max-width: 1200px;
    margin: 30px auto 60px;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 36px;
    align-items: start;
}
.page-photos, .page-content { min-width: 0; }
@media (max-width: 900px) { .page-split { grid-template-columns: 1fr; } }

.page-content h1 { font-size: 2rem; margin-bottom: 14px; }
.page-content .rich-text p { margin: 0 0 14px; }
.page-content .rich-text ul, .page-content .rich-text ol { margin: 0 0 14px 20px; }

/* ---------- Exemples de menus (page Portage) ---------- */

.menu-examples {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin: 22px 0;
}
.menu-example-card {
    background: var(--terre-clair);
    border-radius: var(--radius);
    padding: 18px 20px;
}
.menu-example-card h4 {
    margin-bottom: 8px;
    color: var(--terre);
    text-transform: uppercase;
    font-size: .85rem;
    letter-spacing: .04em;
    font-family: 'Segoe UI', Verdana, Arial, sans-serif;
}
.menu-example-card .rich-text p { margin: 0 0 6px; font-size: .92rem; }

/* ---------- Formulaire de contact (portage) ---------- */

.contact-form {
    background: #fff;
    border: 1px solid #eadfce;
    border-radius: var(--radius);
    padding: 24px;
    margin-top: 24px;
    box-shadow: 0 3px 10px var(--ombre);
}
.contact-form h3 { margin-bottom: 4px; }
.contact-form .sub { color: #7a6f63; margin-top: 0; margin-bottom: 18px; }
.form-row { margin-bottom: 14px; }
.form-row label { display: block; font-weight: 600; margin-bottom: 5px; color: var(--vert-fonce); }
.form-row input, .form-row textarea, .form-row select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d9cfc0;
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
}
.form-row textarea { min-height: 100px; resize: vertical; }
.btn-submit {
    background: var(--terre);
    color: #fff;
    border: none;
    padding: 11px 26px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
}
.btn-submit:hover { background: #8a3a25; }

.alert-success {
    background: var(--vert-clair);
    color: var(--vert-fonce);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 18px;
    font-weight: 600;
}
.alert-error {
    background: #fbe1dc;
    color: var(--terre);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 18px;
    font-weight: 600;
}

/* ---------- Footer ---------- */

.site-footer {
    background: var(--vert-fonce);
    color: #dfeacd;
    margin-top: 40px;
}
.site-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px 20px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    font-size: .9rem;
}
.site-footer a { color: #dfeacd; text-decoration: underline; }

/* ============================================
   ADMIN
   ============================================ */

body.admin { background: #f2ede3; }

.admin-header {
    background: var(--brun);
    color: #fff;
    padding: 14px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.admin-header a { color: #f5e9d8; }
.admin-nav {
    background: #4a3323;
    display: flex;
    align-items: stretch;
    gap: 4px;
    padding: 0 24px;
    position: relative;
    flex-wrap: wrap;
}
.admin-nav a {
    color: #f5e9d8;
    padding: 12px 18px;
    font-weight: 600;
    display: inline-block;
}
.admin-nav a:hover, .admin-nav a.active {
    background: rgba(255,255,255,0.12);
    text-decoration: none;
}

.admin-nav-dropdown {
    position: relative;
    display: flex;
}
.admin-nav-dropdown:hover .admin-nav-submenu,
.admin-nav-dropdown:focus-within .admin-nav-submenu {
    display: flex;
}
.admin-nav-submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    flex-direction: column;
    background: #fff;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 6px 16px var(--ombre);
    min-width: 200px;
    z-index: 60;
    overflow: hidden;
}
.admin-nav-submenu a {
    color: var(--brun);
    padding: 10px 18px;
    font-weight: 500;
    background: #fff;
}
.admin-nav-submenu a:hover {
    background: var(--vert-clair);
    color: var(--vert-fonce);
}

.admin-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 30px 20px 60px;
}
/* Les pages à tableau large (clients, facturation) ont besoin de bien plus
   de place que les formulaires classiques : sur un grand écran, le cadre
   habituel (1100px) laisse une bande vide de chaque côté alors que les
   colonnes du tableau sont à l'étroit. On élargit le cadre spécifiquement
   sur ces pages plutôt que partout, pour ne pas éclater la mise en page
   des formulaires plus étroits. */
body.admin-wide .admin-wrap {
    max-width: 1600px;
}

.admin-login-box {
    max-width: 380px;
    margin: 80px auto;
    background: #fff;
    padding: 34px;
    border-radius: var(--radius);
    box-shadow: 0 6px 20px var(--ombre);
}
.admin-login-box h1 { font-size: 1.4rem; text-align: center; }

.admin-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin-top: 20px;
}
.admin-card {
    background: #fff;
    border-radius: var(--radius);
    padding: 22px;
    box-shadow: 0 3px 10px var(--ombre);
}
.admin-card h3 { margin-bottom: 6px; }
.admin-card a.btn { margin-top: 12px; }

.admin-panel {
    background: #fff;
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: 0 3px 10px var(--ombre);
    margin-bottom: 24px;
}

.editor-toolbar {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.editor-toolbar button {
    background: var(--vert-clair);
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 700;
}
.editor-toolbar button:hover { background: #cfe8b8; }

.rich-editor {
    border: 1px solid #d9cfc0;
    border-radius: 8px;
    padding: 14px;
    min-height: 180px;
    background: #fffdf9;
}
.rich-editor:focus { outline: 2px solid var(--vert); }

.photo-manager { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.photo-thumb {
    position: relative;
    width: 140px;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #d9cfc0;
}
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.photo-thumb .remove-photo {
    position: absolute;
    top: 4px; right: 4px;
    background: rgba(164,71,46,0.9);
    color: #fff;
    border: none;
    width: 22px; height: 22px;
    border-radius: 50%;
    cursor: pointer;
    line-height: 1;
}
.photo-thumb input.legende-input {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    border: none;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: .7rem;
    padding: 3px 5px;
    width: 100%;
}
.add-photo-box {
    width: 140px;
    height: 100px;
    border: 2px dashed #c9bba4;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a89b8c;
    cursor: pointer;
    font-size: .85rem;
    text-align: center;
    flex-direction: column;
}
.add-photo-box:hover { background: #f7f1e6; }

.btn-save {
    background: var(--vert-fonce);
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 999px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 10px;
}
.btn-save:hover { background: var(--vert); }
.btn-save:disabled, .btn-save[disabled] { background: #c9c0b2; cursor: not-allowed; }
.btn-save:disabled:hover, .btn-save[disabled]:hover { background: #c9c0b2; }

.save-flash {
    display: inline-block;
    margin-left: 12px;
    color: var(--vert-fonce);
    font-weight: 600;
}

/* calendrier menus */
.calendar {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}
.calendar th {
    background: var(--vert-clair);
    color: var(--vert-fonce);
    padding: 8px;
    font-size: .85rem;
}
.calendar td {
    border: 1px solid #eadfce;
    text-align: center;
    padding: 0;
    height: 64px;
    vertical-align: top;
}
.calendar .day-cell {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 6px;
    cursor: pointer;
    background: #fff;
}
.calendar .day-cell:hover { background: #f7f1e6; }
.calendar .day-num { font-weight: 700; font-size: .85rem; align-self: flex-start; }
.calendar .day-cell.has-menu { background: var(--vert-clair); }
.calendar .day-cell.is-today { border: 2px solid var(--terre); }
.calendar .day-cell.selected { background: #ffe9c7; }
.calendar .empty-cell { background: #f7f4ee; }
.calendar .dot-menu {
    margin-top: auto;
    align-self: flex-end;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--vert);
}

.calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.calendar-nav h3 { margin: 0; text-transform: capitalize; }
.calendar-nav button {
    background: var(--vert-clair);
    border: none;
    width: 32px; height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.1rem;
}

.messages-table { width: 100%; border-collapse: collapse; }
.messages-table th, .messages-table td {
    border-bottom: 1px solid #eadfce;
    padding: 10px 8px;
    text-align: left;
    font-size: .92rem;
    vertical-align: top;
}
.messages-table th { color: var(--vert-fonce); }
.status-badge {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
}
.status-badge.nouveau { background: #fbe1dc; color: var(--terre); }
.status-badge.rappele { background: var(--vert-clair); color: var(--vert-fonce); }
.status-select { font-size: .85rem; padding: 4px 6px; border-radius: 6px; border: 1px solid #d9cfc0; }

/* ---------- Fiche client (portage) ---------- */

.client-fiche h3 {
    margin: 22px 0 10px;
    color: var(--vert-fonce);
    font-size: 1.05rem;
}
.client-fiche h3:first-of-type { margin-top: 10px; }

.hint { font-weight: 400; color: #a89b8c; font-size: .82rem; }

.fiche-header {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.switch-actif {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--vert-clair);
    color: var(--vert-fonce);
    font-weight: 700;
    padding: 10px 16px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    margin-top: 26px;
    user-select: none;
}
.switch-actif input { width: 17px; height: 17px; accent-color: var(--vert-fonce); cursor: pointer; }
.switch-actif:has(input:not(:checked)) { background: #f0e6d8; color: #a89b8c; }

.plateaux-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    margin-bottom: 4px;
}
.plateau-jour {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--creme);
    border: 1px solid #eadfce;
    border-radius: 10px;
    padding: 10px 4px;
}
.plateau-jour label { font-size: .78rem; font-weight: 700; color: var(--vert-fonce); margin-bottom: 6px; }
.plateau-jour input {
    width: 100%;
    max-width: 56px;
    text-align: center;
    padding: 6px 2px;
    border: 1px solid #d9cfc0;
    border-radius: 6px;
    font-size: 1rem;
}
@media (max-width: 720px) {
    .plateaux-grid { grid-template-columns: repeat(4, 1fr); }
}

.checkbox-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--gris-texte);
    cursor: pointer;
    margin: 6px 0;
}
.checkbox-line input { width: 17px; height: 17px; accent-color: var(--vert-fonce); cursor: pointer; }

.composition-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px 16px;
    background: var(--creme);
    border: 1px solid #eadfce;
    border-radius: 10px;
    padding: 10px 16px;
}
@media (max-width: 560px) {
    .composition-grid { grid-template-columns: repeat(2, 1fr); }
}

.input-suffix {
    position: relative;
    display: flex;
    align-items: center;
}
.input-suffix input { padding-right: 30px; }
.input-suffix span {
    position: absolute;
    right: 12px;
    color: #a89b8c;
    font-weight: 700;
    pointer-events: none;
}

.fiche-details {
    border: 1px solid #eadfce;
    border-radius: 10px;
    padding: 10px 16px;
    margin: 16px 0;
    background: var(--creme);
}
.fiche-details summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--vert-fonce);
    padding: 4px 0;
}

.fiche-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 18px;
}
.btn-delete-link {
    color: var(--terre);
    font-weight: 600;
    /* Ce contrôle est désormais un <button> (dans un <form method="post">) plutôt
       qu'un <a>, afin que la suppression ne puisse être déclenchée que par un
       vrai clic + confirmation, jamais par un simple chargement de lien. On lui
       retire son apparence de bouton natif pour qu'il continue à se voir comme
       un lien, exactement comme avant. */
    background: none;
    border: none;
    padding: 0;
    font-size: inherit;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
}
.btn-delete-link:hover { text-decoration: underline; }
.save-feedback { font-weight: 700; color: var(--vert-fonce); }
.save-feedback.error { color: var(--terre); }

/* ---------- Liste des clients (superbe) ---------- */

.clients-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid #eadfce;
}
.clients-toolbar .field-search {
    flex: 2;
    min-width: 220px;
    padding: 10px 14px;
    border: 1px solid #d9cfc0;
    border-radius: 999px;
    font-size: .95rem;
}
.clients-toolbar select {
    padding: 9px 12px;
    border: 1px solid #d9cfc0;
    border-radius: 8px;
    font-size: .9rem;
    background: #fff;
    color: var(--gris-texte);
}
.clients-toolbar .toolbar-check {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
    color: var(--vert-fonce);
    cursor: pointer;
    white-space: nowrap;
}
.clients-toolbar .toolbar-check input { width: 16px; height: 16px; accent-color: var(--vert-fonce); cursor: pointer; }
.clients-toolbar .toolbar-count { margin-left: auto; color: #a89b8c; font-size: .85rem; white-space: nowrap; }

.clients-table-wrap { overflow-x: auto; }
.clients-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.clients-table th, .clients-table td {
    border-bottom: 1px solid #eadfce;
    padding: 11px 8px;
    text-align: left;
    font-size: .88rem;
    vertical-align: middle;
    white-space: normal;
    overflow-wrap: break-word;
}
.clients-table th { color: var(--vert-fonce); font-size: .76rem; text-transform: uppercase; letter-spacing: .02em; }
.clients-table col.col-select { width: 34px; }
.clients-table col.col-nom, .clients-table col.col-prenom { width: 11%; }
.clients-table col.col-tournee { width: 11%; }
.clients-table col.col-tel { width: 12%; }
.clients-table col.col-total { width: 7%; }
.clients-table col.col-comp { width: 17%; }
.clients-table col.col-prix { width: 8%; }
.clients-table col.col-statut { width: 9%; }
.clients-table col.col-action { width: 7%; }
/* Case à cocher de sélection : largeur fixe en pixels (pas en %) pour ne
   jamais dépendre de la largeur totale du tableau, et rendu de la case
   entièrement maîtrisé (taille, marge, débordement) pour éviter qu'elle
   ne chevauche la colonne "Nom" sur certains navigateurs (rendu natif de
   la case à cocher plus large que prévu selon le moteur de rendu). */
.clients-table th.col-select, .clients-table td.col-select { width: 34px; min-width: 34px; max-width: 34px; padding-left: 4px; padding-right: 4px; text-align: center; overflow: hidden; }
.clients-table td.col-select input[type="checkbox"] {
    display: block;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    margin: 0 auto;
    accent-color: var(--vert-fonce);
    cursor: pointer;
}
@media (max-width: 900px) {
    .clients-table { table-layout: auto; min-width: 760px; }
}
.clients-table tbody tr { cursor: pointer; transition: background .15s; }
.clients-table tbody tr:hover { background: var(--vert-clair); }
.clients-table tbody tr:focus-visible { outline: 2px solid var(--vert-fonce); outline-offset: -2px; background: var(--vert-clair); }
.clients-table tbody tr.inactif { opacity: .55; }
.clients-table td.col-nom { font-weight: 700; color: var(--vert-fonce); }
.btn-row-open {
    background: var(--vert-clair);
    color: var(--vert-fonce);
    border: none;
    padding: 5px 12px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .78rem;
    cursor: pointer;
    white-space: nowrap;
}
.btn-row-open:hover { background: #cfe8b8; }
.clients-table .badge-actif, .clients-table .badge-inactif {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
}
.clients-table .badge-actif { background: var(--vert-clair); color: var(--vert-fonce); }
.clients-table .badge-inactif { background: #f0e6d8; color: #a89b8c; }

/* ---------- Facturation mensuelle (clients en colonnes, jours en lignes) ---------- */

.facturation-table-wrap { overflow-x: auto; overflow-y: visible; max-width: 100%; border: 1px solid #eadfce; border-radius: 8px; }
.facturation-table { border-collapse: collapse; font-size: .8rem; table-layout: fixed; }
.facturation-table th, .facturation-table td {
    border-bottom: 1px solid #eadfce;
    border-right: 1px solid #f3ead9;
    padding: 4px 5px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}
.facturation-table thead th {
    color: var(--vert-fonce);
    font-size: .72rem;
    letter-spacing: .01em;
    background: var(--terre-clair);
    position: sticky;
    z-index: 3;
    overflow: hidden;
}
.facturation-table .col-fact-corner {
    text-align: left;
    background: var(--terre-clair);
    position: sticky;
    left: 0;
    z-index: 2;
    width: 92px;
    min-width: 92px;
    max-width: 92px;
}
.facturation-table thead .col-fact-corner { z-index: 4; }

/* Date + bouton "Confirmé / Non confirmé" du jour, empilés dans la colonne
   figée de gauche : cliquer amène directement à la saisie de ce jour-là. */
.facturation-table .fact-jour-label { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.facturation-table .fact-jour-num { white-space: nowrap; }
.btn-jour-confirm {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    font-size: .6rem;
    font-weight: 700;
    padding: 2px 0;
    border-radius: 6px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.btn-jour-confirm.jour-confirme { background: var(--vert-clair); color: var(--vert-fonce); }
.btn-jour-confirm.jour-confirme:hover { background: #bfe0a0; }
.btn-jour-confirm.jour-a-confirmer { background: #ffe9c7; color: #8a5a1e; }
.btn-jour-confirm.jour-a-confirmer:hover { background: #f7d9a0; }

/* Hauteurs d'en-tête FIXES (et non mesurées en JS) : la 1re ligne (nom du
   client) et la 2e ligne (plateau + prix) ont toujours la même hauteur, quel
   que soit le nombre de colonnes affichées (groupe ou recherche) -- ça évite
   le décalage / trou qui laissait apparaître les lignes de dates entre les
   2 en-têtes collantes quand leur hauteur réelle changeait d'une vue à l'autre. */
.facturation-table thead tr:first-child th { top: 0; height: 50px; }
.facturation-table thead tr:last-child th { top: 50px; }

.facturation-table .fact-client-name {
    width: 92px; min-width: 92px; max-width: 92px;
    font-weight: 700; white-space: normal; line-height: 1.15;
}
.facturation-table .fact-client-name .fname {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; font-size: .74rem;
}
.facturation-table .fact-client-name .fnum {
    display: block; margin-top: 2px; color: #a89b8c; font-size: .66rem; font-weight: 400;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.facturation-table .fact-plateau-head {
    width: 92px; min-width: 92px; max-width: 92px;
    height: 74px;
    font-weight: 400; text-transform: none; white-space: normal; line-height: 1.15;
    vertical-align: top; padding-top: 5px;
}
.facturation-table .fact-plateau-head .pname {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; height: 26px; font-size: .68rem;
}
.facturation-table .fact-plateau-head .fact-input.fact-prix {
    display: block; margin: 3px auto 0;
}
.facturation-table .fact-plateau-head .fact-alt-wrap {
    margin-top: 3px; max-height: 26px; overflow: hidden;
}
.facturation-table tbody .col-fact-corner { font-weight: 600; color: var(--vert-fonce); }
.facturation-table .fact-jour-lettre { color: #a89b8c; font-weight: 400; margin-left: 2px; }
.facturation-table tr.fact-weekend td.col-fact-corner,
.facturation-table tr.fact-weekend td:not(.col-fact-corner) { background: #f7ece0; }
.facturation-table tfoot td { font-weight: 700; background: #fbf6ec; }
.facturation-table tfoot .fact-row-montant { color: var(--vert-fonce); }

/* Ligne "Correction" (après le dernier jour du mois) : ajustement en € TTC par
   client ; neutre à 0, rouge si négatif, vert si positif. */
.facturation-table tr.fact-correction-row td { background: #f3ead9; border-top: 2px solid #d9c9ad; }
.facturation-table tr.fact-correction-row td.col-fact-corner { font-weight: 700; color: var(--terre); }
.facturation-table input.fact-correction { width: 72px; font-weight: 600; background: #fff; }
.facturation-table input.fact-correction.fact-correction-neg { background: #f8d7d7; border-color: #e59a9a; color: #9b1c1c; }
.facturation-table input.fact-correction.fact-correction-pos { background: #d9efd3; border-color: #9fcf92; color: #2f5d24; }
.facturation-table tfoot td.fact-client-total { text-align: center; color: var(--vert-fonce); background: #eef5e8; }
.facturation-table tfoot td.fact-client-total.fact-client-total-neg { color: #9b1c1c; background: #f8e3e3; }

/* Séparation plus épaisse entre 2 personnes, plus fine entre 2 plateaux d'une même personne */
.facturation-table th.client-start,
.facturation-table td.client-start { border-left: 3px solid var(--vert-fonce); }

.facturation-table input.fact-input, .facturation-table input.fact-premier-jour {
    border: 1px solid #eadfce; border-radius: 4px; padding: 2px 4px; text-align: center; font-size: .8rem;
}
.facturation-table input.fact-qte { padding: 2px 2px; }

/* Couleur selon la quantité du jour : gris = 0, bleu = 1, orange = plus de 1 */
.facturation-table input.fact-qte.fact-qte-zero { background: #eae4d8; border-color: #ddd2bd; color: #8a8072; }
.facturation-table input.fact-qte.fact-qte-one { background: #d9e8f5; border-color: #a9c9e6; color: #1f4e79; font-weight: 600; }
.facturation-table input.fact-qte.fact-qte-many { background: #fbddb0; border-color: #eab35b; color: #8a5a00; font-weight: 700; }
.facturation-table input.fact-qte.fact-cell-selected { outline: 2px solid var(--vert-fonce); outline-offset: -1px; }

/* Prix TTC du plateau, en en-tête */
.facturation-table input.fact-prix { background: #f6c9cc; border-color: #e79aa0; color: #7a1a22; font-weight: 700; }
#groupLabel { padding: 0 6px; }

#factBulkBox {
    position: absolute;
    background: #fff;
    border: 1px solid var(--vert-fonce);
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0,0,0,.15);
    padding: 8px 10px;
    font-size: .85rem;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
/* [hidden] a une spécificité plus faible qu'un sélecteur #id : sans cette règle,
   "display: flex" ci-dessus l'emportait toujours et la fenêtre ne disparaissait
   jamais, même une fois l'attribut "hidden" posé par le JS. */
#factBulkBox[hidden] { display: none; }
#factBulkBox input { border: 1px solid #eadfce; border-radius: 4px; padding: 3px 5px; text-align: center; }
/* Les boutons réutilisent .btn-save / .btn-outline (marges/tailles pensées pour
   des formulaires) : on les remet à plat ici pour qu'ils s'alignent proprement
   sur une seule ligne dans cette petite barre. */
#factBulkBox .btn-save, #factBulkBox .btn-outline {
    margin-top: 0;
    align-self: center;
    padding: 5px 14px;
    font-size: .82rem;
    white-space: nowrap;
}
.clients-table .badge-1j2j {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    background: #ffe9c7;
    color: var(--brun);
}
.clients-table .comp-tags { display: flex; gap: 3px; flex-wrap: nowrap; white-space: nowrap; }
.clients-table .comp-abbr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 5px;
    font-size: .68rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}
.comp-abbr-entree  { background: #4a90d9; }
.comp-abbr-plat    { background: #d9662f; }
.comp-abbr-dessert { background: #c76bc7; }
.comp-abbr-soupe   { background: #3fa796; }
.comp-abbr-fromage { background: #e0a930; }
.comp-abbr-pain    { background: #8d6748; }

/* ---------- Modale fiche client ---------- */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(61, 42, 19, 0.45);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
    overflow-y: auto;
    z-index: 1000;
}
.modal-overlay[hidden] { display: none; }
.modal-box {
    background: #fff;
    border-radius: var(--radius);
    max-width: 900px;
    width: 100%;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);
    position: relative;
    animation: modal-pop .18s ease;
}
@keyframes modal-pop {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid #eadfce;
}
.modal-header h2 { margin: 0; font-size: 1.2rem; color: var(--vert-fonce); }
.modal-close {
    background: var(--creme);
    border: none;
    width: 34px; height: 34px;
    border-radius: 50%;
    font-size: 1.1rem;
    cursor: pointer;
    color: var(--gris-texte);
}
.modal-close:hover { background: var(--vert-clair); }
.modal-body { padding: 4px 24px 24px; max-height: 78vh; overflow-y: auto; }
.modal-body .admin-panel { box-shadow: none; padding: 20px 0 0; margin-bottom: 0; }
.modal-loading { padding: 40px; text-align: center; color: #a89b8c; }

/* ---------- Plateaux répétables (fiche client) ---------- */

.plateaux-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 10px; }

.plateau-block {
    background: var(--creme);
    border: 1px solid #eadfce;
    border-radius: 10px;
    padding: 14px 16px;
}
.plateau-block .plateaux-grid { margin-top: 10px; }
.plateau-block .composition-grid { background: #fff; }

.plateau-block-header {
    display: flex;
    align-items: center;
    gap: 10px;
}
.plateau-nom-input {
    flex: 1;
    font-weight: 700;
    color: var(--vert-fonce);
    border: 1px solid #d9cfc0;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: .98rem;
    background: #fff;
}
.btn-remove-plateau {
    background: #fbe1dc;
    color: var(--terre);
    border: none;
    width: 30px; height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-size: .95rem;
    flex-shrink: 0;
}
.btn-remove-plateau:hover { background: #f4c9bf; }

.btn-add-plateau {
    background: var(--vert-clair);
    color: var(--vert-fonce);
    border: none;
    padding: 9px 18px;
    border-radius: 999px;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 8px;
}
.btn-add-plateau:hover { background: #cfe8b8; }

#plateauTemplate { display: none; }

/* Résumé des plateaux dans la liste des clients */
.plateaux-summary { display: flex; flex-direction: column; gap: 6px; }
.plateau-summary-row { display: flex; align-items: center; gap: 8px; }
.plateau-summary-label {
    font-size: .76rem;
    font-weight: 700;
    color: var(--vert-fonce);
    background: var(--vert-clair);
    border-radius: 6px;
    padding: 1px 7px;
    white-space: nowrap;
}

/* ---------- Saisie du jour (livraisons réelles) ---------- */

.livraisons-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.livraisons-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.livraisons-table th, .livraisons-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #f0e6d8;
    text-align: left;
    font-size: .88rem;
}
.livraisons-table th { color: var(--vert-fonce); font-size: .76rem; text-transform: uppercase; letter-spacing: .02em; }
.livraisons-table tbody tr:hover { background: var(--vert-clair); }

.badge-confirme, .badge-a-confirmer {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
}
.badge-confirme { background: var(--vert-clair); color: var(--vert-fonce); }
.badge-a-confirmer { background: #ffe9c7; color: #8a5a1e; }

/* Mêmes codes couleur que les quantités du tableau de facturation (gris = 0,
   bleu = 1, orange = plus de 1), pour que les 2 écrans se lisent pareil. */
.livraisons-table input.livr-qte { width: 60px; text-align: center; }
.livraisons-table input.livr-qte.livr-qte-zero { background: #eae4d8; border-color: #ddd2bd; color: #8a8072; }
.livraisons-table input.livr-qte.livr-qte-one { background: #d9e8f5; border-color: #a9c9e6; color: #1f4e79; font-weight: 600; }
.livraisons-table input.livr-qte.livr-qte-many { background: #fbddb0; border-color: #eab35b; color: #8a5a00; font-weight: 700; }

.livraisons-back { display: inline-block; margin-bottom: 6px; }

/* Repérage visuel, sur le tableau de facturation, des jours dont la
   quantité n'a pas encore été confirmée par la saisie du jour (petit point
   orange en coin) par rapport aux jours confirmés (petit point vert). */
.facturation-table td.fact-unconfirmed, .facturation-table td.fact-confirmed {
    position: relative;
}
.facturation-table td.fact-unconfirmed::after, .facturation-table td.fact-confirmed::after {
    content: "";
    position: absolute;
    top: 3px;
    right: 3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.facturation-table td.fact-unconfirmed::after { background: #e08a2e; }
.facturation-table td.fact-confirmed::after { background: #6fae4a; }
.facturation-legend {
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
    font-size: .8rem;
    color: var(--gris-texte);
    margin-top: 10px;
}
.facturation-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.facturation-legend .dot-unconfirmed { background: #e08a2e; }
.facturation-legend .dot-confirmed { background: #6fae4a; }