/* ============================================================================
   Vignoble VITOPTI - Feuille de style globale
   Mobile-first, optimisee tablette terrain. Variables CSS prefixe --vig-.
   Charte graphique : VIT'OPTI Brand Book (couleurs + typo Quicksand / Poppins).
   ============================================================================ */

/* ----- Polices auto-hebergees (CSP stricte : aucun CDN) ----- */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/poppins-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/poppins-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/poppins-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/poppins-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('/fonts/quicksand.woff2') format('woff2');
}

:root {
    /* Couleurs - charte VIT'OPTI Brand Book (page 09) */
    --vig-primary:        #486D58;  /* Vert */
    --vig-primary-dark:   #37533f;  /* Vert assombri (etats :active) */
    --vig-primary-light:  #5d8470;  /* Vert eclairci */
    --vig-accent:         #80073D;  /* Vin rouge */
    --vig-accent-dark:    #5e052d;  /* Vin rouge assombri */
    --vig-accent-soft:    #A26380;  /* Rose poudre */
    --vig-sage:           #98ABA0;  /* Vert amande */
    --vig-bg:             #EBEDEC;  /* Gris clair */
    --vig-card-bg:        #ffffff;
    --vig-text:           #2a322d;
    --vig-text-muted:     #6e7a73;
    --vig-border:         #d7dcd9;
    --vig-success:        #486D58;
    --vig-success-bg:     #e7ecea;
    --vig-warning:        #b86b1e;
    --vig-warning-bg:     #fbf1e1;
    --vig-error:          #b03030;
    --vig-error-bg:       #f9e3e3;
    --vig-info:           #1f5a8c;
    --vig-info-bg:        #e5eff8;

    /* Spacing et radius */
    --vig-radius:         8px;
    --vig-radius-sm:      4px;
    --vig-radius-lg:      12px;
    --vig-spacing:        12px;
    --vig-spacing-sm:     6px;
    --vig-spacing-lg:     24px;

    /* Typo - Brand Book (page 10) : Quicksand (titres), Poppins (texte courant) */
    --vig-font-base:      'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --vig-font-display:   'Quicksand', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --vig-font-size:      16px;
    --vig-font-size-sm:   14px;
    --vig-font-size-lg:   18px;
    --vig-font-size-xl:   24px;

    /* Cibles tactiles (Material Design min 48x48) */
    --vig-touch-target:   48px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--vig-font-base);
    font-size: var(--vig-font-size);
    color: var(--vig-text);
    background: var(--vig-bg);
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ----- Layout container ----- */
.vig-container {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--vig-spacing-lg);
}

.vig-container--narrow { max-width: 480px; }

/* ----- Cartes ----- */
.vig-card {
    background: var(--vig-card-bg);
    border-radius: var(--vig-radius-lg);
    box-shadow: 0 4px 18px rgba(42, 50, 45, 0.07);
    padding: var(--vig-spacing-lg);
    margin-bottom: var(--vig-spacing-lg);
}

.vig-card__title {
    margin: 0 0 var(--vig-spacing);
    font-family: var(--vig-font-display);
    color: var(--vig-primary);
    font-size: var(--vig-font-size-xl);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* ----- Form group ----- */
.vig-form-group {
    margin-bottom: var(--vig-spacing-lg);
}

.vig-form-group label {
    display: block;
    margin-bottom: var(--vig-spacing-sm);
    font-weight: 500;
    color: var(--vig-text);
    font-size: var(--vig-font-size-sm);
}

/* ----- Input ----- */
.vig-input {
    display: block;
    width: 100%;
    min-height: var(--vig-touch-target);
    padding: 10px 12px;
    border: 1px solid var(--vig-border);
    border-radius: var(--vig-radius);
    background: white;
    font-family: inherit;
    font-size: var(--vig-font-size);
    color: var(--vig-text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vig-input:focus-visible {
    outline: none;
    border-color: var(--vig-primary);
    box-shadow: 0 0 0 3px rgba(72, 109, 88, 0.18);
}

.vig-input:disabled {
    background: #eef0ef;
    color: var(--vig-text-muted);
    cursor: not-allowed;
}

/* ----- Boutons ----- */
.vig-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--vig-touch-target);
    padding: 0 var(--vig-spacing-lg);
    border: none;
    border-radius: var(--vig-radius);
    background: var(--vig-primary);
    color: white;
    font-family: inherit;
    font-size: var(--vig-font-size);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
    text-decoration: none;
}

.vig-btn:hover {
    background: var(--vig-primary-light);
}

.vig-btn:active {
    background: var(--vig-primary-dark);
    transform: translateY(1px);
}

.vig-btn:focus-visible {
    outline: 3px solid rgba(72, 109, 88, 0.4);
    outline-offset: 2px;
}

.vig-btn:disabled {
    background: var(--vig-text-muted);
    cursor: not-allowed;
    opacity: 0.6;
}

.vig-btn--block { width: 100%; }

.vig-btn--secondary {
    background: transparent;
    border: 1px solid var(--vig-primary);
    color: var(--vig-primary);
}

.vig-btn--secondary:hover {
    background: rgba(72, 109, 88, 0.08);
}

.vig-btn--secondary:active {
    background: var(--vig-primary);
    color: white;
}

/* ----- Notifications (toasts) ----- */
.vig-notify {
    position: fixed;
    top: var(--vig-spacing-lg);
    left: 50%;
    transform: translateX(-50%);
    min-width: 280px;
    max-width: 90%;
    padding: var(--vig-spacing) var(--vig-spacing-lg);
    border-radius: var(--vig-radius);
    background: var(--vig-info-bg);
    color: var(--vig-info);
    border: 1px solid var(--vig-info);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    font-weight: 500;
    text-align: center;
    opacity: 0;
    transition: opacity 0.2s ease, top 0.2s ease;
    pointer-events: none;
}

.vig-notify.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.vig-notify--success { background: var(--vig-success-bg); color: var(--vig-success); border-color: var(--vig-success); }
.vig-notify--warning { background: var(--vig-warning-bg); color: var(--vig-warning); border-color: var(--vig-warning); }
.vig-notify--error   { background: var(--vig-error-bg);   color: var(--vig-error);   border-color: var(--vig-error); }

/* ----- Helpers texte ----- */
.vig-error-msg { color: var(--vig-error); font-size: var(--vig-font-size-sm); margin-top: var(--vig-spacing-sm); }
.vig-muted     { color: var(--vig-text-muted); }
.vig-center    { text-align: center; }

/* ----- Nav bar ----- */
.vig-nav {
    background: var(--vig-primary);
    color: white;
    padding: var(--vig-spacing);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--vig-spacing);
    box-shadow: 0 2px 10px rgba(42, 50, 45, 0.15);
}

.vig-nav__brand {
    font-family: var(--vig-font-display);
    font-weight: 700;
    font-size: var(--vig-font-size-lg);
    letter-spacing: 0.02em;
    color: white;
    text-decoration: none;
}

.vig-nav__menu {
    display: flex;
    gap: var(--vig-spacing);
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.vig-nav__link {
    color: white;
    text-decoration: none;
    padding: var(--vig-spacing-sm) var(--vig-spacing);
    border-radius: var(--vig-radius);
    min-height: var(--vig-touch-target);
    display: inline-flex;
    align-items: center;
    font-weight: 500;
    transition: background-color 0.15s ease;
}

.vig-nav__link:hover,
.vig-nav__link:focus-visible {
    background: rgba(255, 255, 255, 0.15);
}

.vig-nav__link.is-active {
    background: rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 -3px 0 var(--vig-accent-soft);
}

.vig-nav__user {
    display: flex;
    gap: var(--vig-spacing);
    align-items: center;
    font-size: var(--vig-font-size-sm);
}

/* ----- Pleine hauteur centree (login) ----- */
.vig-fullscreen-center {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--vig-spacing-lg);
}

/* ----- Tableaux ----- */
.vig-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--vig-card-bg);
}

.vig-table th, .vig-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid var(--vig-border);
}

.vig-table th {
    background: var(--vig-bg);
    font-weight: 600;
    color: var(--vig-text);
    font-size: var(--vig-font-size-sm);
}

.vig-table tr:hover {
    background: rgba(72, 109, 88, 0.05);
}

.vig-table__actions {
    display: flex;
    gap: var(--vig-spacing-sm);
    flex-wrap: wrap;
}

.vig-table__actions .vig-btn {
    min-height: 36px;
    padding: 4px 12px;
    font-size: var(--vig-font-size-sm);
}

/* ----- Badge ----- */
.vig-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: var(--vig-font-size-sm);
    font-weight: 500;
}

.vig-badge--success { background: var(--vig-success-bg); color: var(--vig-success); }
.vig-badge--muted   { background: #e4e7e5;               color: var(--vig-text-muted); }

/* ----- Modal ----- */
.vig-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    /* Masquee par defaut. L'ouverture est pilotee par le JS qui force
       .style.display = 'flex'. NE PAS compter sur style="display:none"
       dans le HTML : la CSP (style-src 'self') bloque ces attributs inline. */
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 500;
    padding: var(--vig-spacing-lg);
}

.vig-modal {
    background: var(--vig-card-bg);
    border-radius: var(--vig-radius-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    max-width: 480px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: var(--vig-spacing-lg);
}

.vig-modal__title {
    margin: 0 0 var(--vig-spacing);
    font-family: var(--vig-font-display);
    color: var(--vig-primary);
    font-size: var(--vig-font-size-lg);
    font-weight: 600;
}

.vig-modal__actions {
    display: flex;
    gap: var(--vig-spacing);
    margin-top: var(--vig-spacing-lg);
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* ----- Toolbar (header de page avec actions) ----- */
.vig-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--vig-spacing-lg);
    flex-wrap: wrap;
    gap: var(--vig-spacing);
}

/* ----- Titre de page ----- */
.vig-page-title {
    position: relative;
    margin: 0 0 var(--vig-spacing-lg);
    padding-bottom: 10px;
    font-family: var(--vig-font-display);
    color: var(--vig-primary);
    font-size: var(--vig-font-size-xl);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.vig-page-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 48px;
    height: 3px;
    border-radius: 2px;
    background: var(--vig-accent);
}

/* ----- Label de section (sous-titre discret dans une carte) ----- */
.vig-section-label {
    font-size: var(--vig-font-size-sm);
    font-weight: 600;
    color: var(--vig-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--vig-spacing);
}

/* ----- Tournee saisie : header + progress ----- */
.vig-saisie-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--vig-spacing);
    margin-bottom: var(--vig-spacing-lg);
    flex-wrap: wrap;
}

.vig-progress-bar-wrap {
    display: flex;
    align-items: center;
    gap: var(--vig-spacing);
    margin-bottom: var(--vig-spacing-lg);
    background: var(--vig-card-bg);
    border-radius: var(--vig-radius);
    padding: 12px var(--vig-spacing);
    box-shadow: 0 2px 8px rgba(42, 50, 45, 0.06);
}

.vig-progress-bar {
    flex: 1;
    height: 10px;
    background: var(--vig-border);
    border-radius: 5px;
    overflow: hidden;
}

.vig-progress-bar__fill {
    height: 100%;
    background: var(--vig-success);
    border-radius: 5px;
    transition: width 0.35s ease;
}

/* Bouton finaliser : vin rouge (accent Brand Book), tranche sur le vert */
.vig-btn--finalize {
    background: var(--vig-accent);
}

.vig-btn--finalize:hover { background: #95104c; }

.vig-btn--finalize:active { background: var(--vig-accent-dark); }

/* ----- Tournee saisie : reprendre une tournee ----- */
.vig-resume-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--vig-border);
    gap: var(--vig-spacing);
}

.vig-resume-row:last-child { border-bottom: none; }

.vig-resume-row__title {
    font-weight: 600;
    color: var(--vig-text);
}

.vig-resume-row__sub {
    font-size: var(--vig-font-size-sm);
    color: var(--vig-text-muted);
    margin-top: 2px;
}

/* ----- Carte chateau ----- */
.vig-chateau-card {
    background: var(--vig-card-bg);
    border: 2px solid var(--vig-border);
    border-radius: var(--vig-radius-lg);
    margin-bottom: var(--vig-spacing-lg);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(42, 50, 45, 0.05);
    transition: border-color 0.2s ease;
}

.vig-chateau-card.is-saved {
    border-color: var(--vig-success);
}

.vig-chateau-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px var(--vig-spacing-lg);
    background: var(--vig-bg);
    gap: var(--vig-spacing-sm);
    border-bottom: 1px solid var(--vig-border);
}

.vig-chateau-card.is-saved .vig-chateau-card__header {
    background: var(--vig-success-bg);
    border-bottom-color: rgba(72, 109, 88, 0.2);
}

.vig-chateau-card__name {
    font-family: var(--vig-font-display);
    font-size: var(--vig-font-size-lg);
    font-weight: 700;
    color: var(--vig-primary);
}

.vig-chateau-card__body {
    padding: var(--vig-spacing-lg);
}

/* ----- Sections d'observables dans la carte ----- */
.vig-obs-section {
    margin-bottom: var(--vig-spacing-lg);
}

.vig-obs-section:last-of-type { margin-bottom: 0; }

.vig-obs-section__label {
    font-size: var(--vig-font-size-sm);
    font-weight: 700;
    color: var(--vig-primary);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 6px 0;
    border-bottom: 2px solid var(--vig-primary);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ----- Ligne observable : label + bouton bascule Oui/Non ----- */
.vig-obs-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 6px 0;
    border-bottom: 1px solid var(--vig-border);
    gap: var(--vig-spacing);
}

.vig-obs-row:last-child { border-bottom: none; }

.vig-obs-row__label {
    font-size: var(--vig-font-size);
    color: var(--vig-text);
    flex: 1;
    cursor: pointer;
}

/* ----- Tableau de saisie par parcelle ----- */
/* Largeur fixe : parcelle + 8 colonnes tiennent toujours dans l'ecran. */

/* Legende des abreviations de colonnes */
.vig-grid-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-bottom: var(--vig-spacing);
    padding: 10px 12px;
    background: var(--vig-bg);
    border-radius: var(--vig-radius);
    font-size: var(--vig-font-size-sm);
    color: var(--vig-text-muted);
}

.vig-grid-legend__item { white-space: nowrap; }
.vig-grid-legend__item b { color: var(--vig-primary); }

.vig-grid {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
    background: #fff;
    font-size: var(--vig-font-size-sm);
}

/* En-tete : bandeau couleur, fige en haut de l'ecran au defilement */
.vig-grid thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--vig-primary);
    color: #fff;
    font-weight: 700;
    border: 0;
    border-bottom: 2px solid rgba(0, 0, 0, 0.18);
    border-right: 1px solid rgba(255, 255, 255, 0.14);
    padding: 7px 2px;
}

.vig-grid thead th.vig-grid__obs {
    text-align: center;
    font-size: 10px;
    line-height: 1.1;
}

.vig-grid thead th.vig-grid__parcelle {
    width: 80px;
    text-align: left;
    padding: 7px 8px;
    font-size: 11px;
}

/* Cellules : filet horizontal + fin filet vertical pale entre colonnes */
.vig-grid td {
    border: 0;
    border-bottom: 1px solid var(--vig-border);
    border-right: 1px solid #e6eae6;
    padding: 0;
    text-align: center;
}

.vig-grid tbody tr:last-child td { border-bottom: 0; }

/* Pas de filet a droite de la derniere colonne */
.vig-grid tr > :last-child { border-right: 0; }

/* Separation un peu plus marquee entre les 4 maladies et les 4 travaux */
.vig-grid th:nth-child(5),
.vig-grid td:nth-child(5) { border-right: 1px solid var(--vig-border); }

/* Lignes alternees */
.vig-grid__row.is-alt td { background: #f5f7f5; }

/* Colonne Parcelle = identifiant de ligne (nom + etat + bouton commentaire) */
.vig-grid td.vig-grid__parcelle {
    padding: 6px 6px 8px 12px;
    background: #edf0ed;
    border-right: 1px solid var(--vig-border);
    box-shadow: inset 4px 0 0 #ccd1ce;
    text-align: left;
    vertical-align: top;
}

.vig-grid__row.is-alt td.vig-grid__parcelle { background: #e5eae6; }
.vig-grid__row.is-pending td.vig-grid__parcelle { box-shadow: inset 4px 0 0 #c98a00; }
.vig-grid__row.is-saved   td.vig-grid__parcelle { box-shadow: inset 4px 0 0 var(--vig-success); }
.vig-grid__row.is-error   td.vig-grid__parcelle { box-shadow: inset 4px 0 0 #c0392b; }

.vig-grid__pcell {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.vig-grid__pname {
    font-weight: 700;
    color: var(--vig-primary);
    word-break: break-word;
}

.vig-cell-status {
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}
.vig-cell-status.is-idle    { color: transparent; }
.vig-cell-status.is-pending { color: #c98a00; }
.vig-cell-status.is-saved   { color: var(--vig-success); }
.vig-cell-status.is-error   { color: #c0392b; }

/* Bouton "Note" : ouvre le commentaire de la ligne */
.vig-cmt-btn {
    display: inline-block;
    margin-top: 5px;
    padding: 3px 9px;
    border: 1px solid var(--vig-border);
    border-radius: 11px;
    background: #fff;
    color: var(--vig-text-muted);
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.vig-cmt-btn.has-cmt {
    border-color: var(--vig-primary);
    background: var(--vig-primary);
    color: #fff;
}

/* Cellule Oui / Non : pastille visuelle (cercle vide = Non, pastille cochee = Oui) */
.vig-cell-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    border: 0;
    background: transparent;
    cursor: pointer;
    transition: background 0.12s ease;
}

.vig-cell-toggle.is-oui {
    background: rgba(72, 109, 88, 0.12);
}

.vig-cell-toggle:focus-visible {
    outline: 3px solid rgba(72, 109, 88, 0.45);
    outline-offset: -3px;
}

.vig-cell-dot {
    position: relative;
    width: 21px;
    height: 21px;
    box-sizing: border-box;
    border: 2px solid #c5cbc5;
    border-radius: 50%;
    background: #fff;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.vig-cell-toggle.is-oui .vig-cell-dot {
    background: var(--vig-primary);
    border-color: var(--vig-primary);
}

/* Coche blanche dans la pastille Oui */
.vig-cell-toggle.is-oui .vig-cell-dot::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 3px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Ligne commentaire depliable */
.vig-grid__cmt-row td {
    background: #eef2ee;
    padding: 10px 12px;
    text-align: left;
}

.vig-grid__cmt-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--vig-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 5px;
}

.vig-grid__cmt-input {
    width: 100%;
    min-height: 56px;
    border: 1px solid var(--vig-border);
    border-radius: var(--vig-radius);
    padding: 8px 10px;
    font-family: inherit;
    font-size: var(--vig-font-size-sm);
    color: var(--vig-text);
    resize: vertical;
}

.vig-grid__cmt-input:focus-visible {
    outline: 2px solid var(--vig-primary);
    outline-offset: 0;
}

/* ----- Footer finaliser ----- */
.vig-finalize-footer {
    margin-top: var(--vig-spacing-lg);
    padding-top: var(--vig-spacing-lg);
    border-top: 2px solid var(--vig-border);
    display: flex;
    justify-content: center;
}

.vig-finalize-footer .vig-btn--block {
    max-width: 480px;
}

/* ----- Tableau de bord (accueil) ----- */
.vig-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: var(--vig-spacing);
}

.vig-tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--vig-spacing-lg);
    border: 1px solid var(--vig-border);
    border-radius: var(--vig-radius-lg);
    background: var(--vig-card-bg);
    text-decoration: none;
    color: var(--vig-text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.vig-tile:hover {
    border-color: var(--vig-primary);
    box-shadow: 0 4px 16px rgba(42, 50, 45, 0.1);
}

.vig-tile:active { transform: translateY(1px); }

.vig-tile--primary {
    background: var(--vig-primary);
    border-color: var(--vig-primary);
    color: white;
}

.vig-tile--primary:hover { background: var(--vig-primary-light); }

.vig-tile__title {
    font-family: var(--vig-font-display);
    font-weight: 700;
    font-size: var(--vig-font-size-lg);
}

.vig-tile__desc {
    font-size: var(--vig-font-size-sm);
    opacity: 0.85;
}

/* En-tete de carte : titre a gauche, lien d'action a droite */
.vig-card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--vig-spacing);
    flex-wrap: wrap;
    margin-bottom: var(--vig-spacing);
}

.vig-card-head .vig-card__title { margin-bottom: 0; }

/* Guide d'utilisation : etapes numerotees */
.vig-guide { margin: 0; padding: 0; list-style: none; }

.vig-guide__item {
    display: flex;
    gap: var(--vig-spacing);
    padding: var(--vig-spacing) 0;
    border-bottom: 1px solid var(--vig-border);
}

.vig-guide__item:last-child { border-bottom: none; }

.vig-guide__num {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--vig-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--vig-font-size-sm);
}

.vig-guide__title { font-weight: 600; color: var(--vig-text); }

.vig-guide__desc {
    font-size: var(--vig-font-size-sm);
    color: var(--vig-text-muted);
    margin-top: 2px;
}

/* Ligne de tableau cliquable (cursor inline interdit par la CSP) */
.vig-clickable { cursor: pointer; }

/* Utilitaire : masquer un element (la CSP bloque style="display:none") */
.vig-hidden { display: none !important; }

/* ----- Groupe chateau repliable (saisie par parcelle) ----- */
.vig-chateau-group {
    margin-bottom: var(--vig-spacing-lg);
}

.vig-chateau-group__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--vig-spacing-sm);
    padding: 14px var(--vig-spacing-lg);
    min-height: 56px;
    background: var(--vig-primary);
    color: #fff;
    border-radius: var(--vig-radius-lg);
    cursor: pointer;
    user-select: none;
}

.vig-chateau-group:not(.is-collapsed) .vig-chateau-group__header {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.vig-chateau-group__header:focus-visible {
    outline: 3px solid rgba(72, 109, 88, 0.45);
    outline-offset: 2px;
}

.vig-chateau-group__name {
    flex: 1;
    font-family: var(--vig-font-display);
    font-size: var(--vig-font-size-lg);
    font-weight: 700;
}

.vig-chateau-group__count {
    font-size: var(--vig-font-size-sm);
    font-weight: 600;
    background: rgba(255, 255, 255, 0.22);
    padding: 3px 10px;
    border-radius: 12px;
    white-space: nowrap;
}

.vig-chateau-group__chevron {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid #fff;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.vig-chateau-group.is-collapsed .vig-chateau-group__chevron {
    transform: rotate(-90deg);
}

.vig-chateau-group__body {
    padding: var(--vig-spacing) var(--vig-spacing) 2px;
    border: 2px solid var(--vig-primary);
    border-top: none;
    border-radius: 0 0 var(--vig-radius-lg) var(--vig-radius-lg);
}

.vig-chateau-group.is-collapsed .vig-chateau-group__body {
    display: none;
}

/* Carte parcelle a l'interieur d'un groupe chateau */
.vig-detail-chateau {
    margin: var(--vig-spacing-lg) 0 var(--vig-spacing);
    color: var(--vig-primary);
    font-size: var(--vig-font-size-lg);
}

/* ----- Mediaqueries tablette / desktop ----- */
@media (min-width: 768px) {
    :root {
        --vig-spacing:    16px;
        --vig-spacing-lg: 32px;
    }
}