/* App-specific styles. Colours, fonts and spacing come from shared/tokens.css;
   direction v3 « épurée » shared with the vitrine (shared/base.css). */
.app-header { background: var(--color-lin); color: var(--color-encre); border-bottom: var(--rule); }
.app-header__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding-block: var(--space-4); }
.app-header__brand { display: inline-flex; text-decoration: none; margin-right: auto; }
.app-main { padding-block: var(--space-7); min-height: 60vh; }
.app-main h1 { font-size: clamp(40px, 5vw, 64px); }
.app-main h2 { font-size: clamp(28px, 3vw, 38px); }

/* Footer (same family as the vitrine footer). */
.site-footer { border-top: var(--rule); color: var(--color-pierre); padding: var(--space-6) 0; font-size: 13px; text-align: center; }
.site-footer a { color: var(--color-pierre); }
.site-footer a:hover { color: var(--color-rouge); }
.site-footer .loi-evin { margin: 0 0 var(--space-3); }

/* Forms */
.form-row, .form > div { margin-bottom: var(--space-4); }
label { display: block; margin-bottom: var(--space-1); font: 500 var(--fs-label) var(--font-texte); letter-spacing: .2em; text-transform: uppercase; color: var(--color-pierre); }
.form-row--check, .checkbox-row { display: flex; gap: var(--space-2); align-items: flex-start; }
.form-row--check label, .checkbox-row label { font: 400 16px/1.5 var(--font-texte); letter-spacing: 0; text-transform: none; margin: 0; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=search], select, textarea {
  width: 100%; min-height: 44px; padding: var(--space-2) var(--space-3); border: var(--rule); border-radius: 0;
  font: 400 17px var(--font-texte); background: var(--color-craie); color: var(--color-encre);
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--color-rouge); }
input[readonly] { background: var(--color-surface-muted); }
.help-text, .form-help { display: block; font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: var(--space-1); }
.form-error, .form-errors { color: var(--color-danger); font-size: var(--font-size-sm); margin: var(--space-1) 0 0; padding: 0; list-style: none; }
.form-grid { display: grid; gap: 0 var(--space-4); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
fieldset { border: var(--rule); padding: var(--space-4); margin: 0 0 var(--space-5); background: var(--color-craie); }
legend { font: 400 22px var(--font-titre); padding: 0 var(--space-2); }

/* Alerts & flashes */
.alert { padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); border: 1px solid; }
.alert--success { color: var(--color-success); border-color: currentColor; background: #eef6ef; }
.alert--danger { color: var(--color-danger); border-color: currentColor; background: #fbeeee; }
.alert--warning { color: var(--color-warning); border-color: currentColor; background: #fbf5e8; }
.alert--info { color: var(--color-info); border-color: currentColor; background: #edf3f9; }

/* Auth pages */
.auth-card { max-width: 34rem; margin: var(--space-6) auto; background: var(--color-craie); border: var(--rule); padding: var(--space-7) var(--space-6); }
.auth-card--wide { max-width: 48rem; }
.auth-card__links { margin-top: var(--space-5); font-size: var(--font-size-sm); }
.siret-result { padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--color-surface-muted); margin-bottom: var(--space-4); }
[hidden] { display: none !important; }

/* ---------- Client space ---------- */
.app-header__search { flex: 1 1 12rem; max-width: 26rem; }
/* Client header: brand, search and basket on the first row (basket pinned right),
   navigation on its own row: the basket never wraps to the left edge. */
.app-header__inner nav { order: 4; flex-basis: 100%; }
.app-header__inner .panier-selecteur { order: 3; margin-left: auto; }
.app-nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); list-style: none; margin: 0; padding: 0; }
.app-nav a { color: var(--color-encre); text-decoration: none; font: 400 var(--fs-nav) var(--font-texte); letter-spacing: .18em; text-transform: uppercase; display: inline-flex; min-height: 40px; align-items: center; border-bottom: 1px solid transparent; }
.app-nav a:hover { color: var(--color-rouge); }
.app-nav a[aria-current="page"] { color: var(--color-rouge); border-bottom-color: var(--color-rouge); }
.app-header__search input { background: var(--color-craie); }
.breadcrumb { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-bottom: var(--space-4); }
.alertes { margin-bottom: var(--space-5); }
.alertes .alert a { margin-left: var(--space-1); }
.btn--small { min-height: 36px; padding: 0 var(--space-3); font-size: 12px; }

.accueil-grid { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 64rem) { .accueil-grid { grid-template-columns: minmax(20rem, 2fr) 3fr; align-items: start; } }

.carte-regions { margin: 0; position: sticky; top: var(--space-4); }
.carte-regions svg { width: 100%; height: auto; display: block; }
.carte-regions { background: var(--map-fond); border: var(--rule); padding: var(--space-3); }
.carte-regions__graticule { fill: none; stroke: var(--map-graticule); stroke-width: .6; }
.carte-regions__ombre { display: none; }
.carte-regions__pays { fill: var(--map-terre); stroke: var(--color-encre); stroke-width: .8; stroke-linejoin: round; }
.carte-regions__region path { stroke: var(--map-stroke); stroke-width: .5; stroke-linejoin: round; transition: fill-opacity .15s; }
.carte-regions__region--open path { fill: var(--map-open); fill-opacity: .55; }
.carte-regions__region--closed path { fill: var(--map-closed); }
.carte-regions__region--empty path { fill: none; stroke: var(--map-inactive); stroke-dasharray: 3 3; stroke-width: 1; }
.carte-regions__region--open:hover path, .carte-regions__region--open:focus path, .carte-regions__region--open.is-current path { fill-opacity: .9; stroke-width: 1; }
.carte-regions__region--closed:hover path, .carte-regions__region--closed:focus path { stroke-width: 1; }
.carte-regions a:focus { outline: none; box-shadow: none; }
.carte-regions a:focus-visible path { stroke: var(--color-rouge); stroke-width: 1.6; }
.carte-regions__badge { fill: var(--color-lin); stroke: var(--color-encre); stroke-width: .8; }
.carte-regions__count { font: 500 10px var(--font-texte); fill: var(--color-encre); text-anchor: middle; pointer-events: none; }
.carte-regions__label { font: 400 14px var(--font-titre); fill: var(--color-encre); text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: var(--map-terre); stroke-width: 3px; stroke-linejoin: round; }
.carte-regions__label--empty { font: 400 7px var(--font-texte); letter-spacing: .16em; text-transform: uppercase; fill: var(--color-pierre); }
.carte-regions__legende { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--font-size-sm); margin-top: var(--space-2); }
.legende::before { content: ''; display: inline-block; width: 14px; height: 9px; border: 1px solid transparent; margin-right: .45em; vertical-align: -1px; }
.legende--open::before { background: var(--map-open); opacity: .55; } .legende--closed::before { background: var(--map-closed); } .legende--empty::before { background: transparent; border-style: dashed; border-color: var(--map-inactive); }

.filtres { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; margin-bottom: var(--space-4); }
.filtres label { display: flex; flex-direction: column; gap: var(--space-1); }
.filtres select, .filtres input { width: auto; min-width: 9rem; }
.filtres__row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }
.liste-entete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); }
.liste-entete small { font: italic 400 20px var(--font-titre); color: var(--color-text-muted); }

.cards { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.card-domaine { display: flex; flex-direction: column; }
.card-domaine img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.card-domaine__link { color: inherit; text-decoration: none; }
.card-domaine__link:hover { color: var(--color-rouge); }
.card-domaine__title { font-size: 26px; margin: var(--space-3) 0 var(--space-1); }
.card-domaine__meta, .card-domaine__count { margin: 0 0 var(--space-2); font-size: var(--font-size-sm); color: var(--color-text-muted); }
.card-domaine .tags { margin: 0 0 var(--space-2); }
.tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.tag { font: 500 11px/1.8 var(--font-texte); letter-spacing: .16em; text-transform: uppercase; background: var(--color-surface-muted); padding: 0 var(--space-2); }
.tag-picto { display: block; height: 40px; width: auto; }

.domaine__entete { display: flex; justify-content: space-between; gap: var(--space-5); align-items: flex-start; }
.domaine__logo { max-width: 8rem; height: auto; }
.domaine__meta { color: var(--color-text-muted); }
.domaine__grid { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); margin: var(--space-5) 0; }
@media (min-width: 56rem) { .domaine__grid { grid-template-columns: 3fr 2fr; } }
.domaine__photo { border-radius: var(--radius); margin-bottom: var(--space-4); }
.mini-carte { height: 16rem; border-radius: var(--radius); margin-bottom: var(--space-4); z-index: 0; }
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: var(--space-2); }
.galerie img { border-radius: var(--radius); aspect-ratio: 3 / 2; object-fit: cover; }
.lightbox { border: 0; padding: var(--space-4); max-width: min(90vw, 70rem); border-radius: var(--radius-lg); }
.lightbox::backdrop { background: rgb(0 0 0 / .7); }
.lightbox img { max-height: 75vh; width: auto; margin: 0 auto; display: block; }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.offres { width: 100%; border-collapse: collapse; background: var(--color-craie); font-size: 15px; border: var(--rule); }
.offres th, .offres td { padding: var(--space-2) var(--space-3); border-bottom: var(--rule-light); text-align: left; vertical-align: middle; }
.offres thead th { background: var(--color-lin); color: var(--color-pierre); border-bottom: 1px solid var(--color-filet-champ); font: 500 11px var(--font-texte); letter-spacing: .18em; text-transform: uppercase; }
.offres__groupe:nth-of-type(even) { background: var(--color-lin); }
.offres .num { text-align: right; white-space: nowrap; }
.offres .actions { white-space: nowrap; }
.ht { color: var(--color-text-muted); font-size: 0.75rem; }
.favori { display: inline; }
.favori__btn { background: none; border: 0; cursor: pointer; font-size: 1.15rem; color: var(--color-accent); padding: 0 var(--space-1); line-height: 1; }
.favori__btn.is-active { color: var(--color-primary); }

.produit { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .produit { grid-template-columns: 1fr 3fr; } }
.produit__millesime { color: var(--color-text-muted); }
.fiche { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); }
.fiche dt { font-weight: 600; } .fiche dd { margin: 0; }
.liste-simple { padding-left: var(--space-5); }
.lead { font-size: var(--font-size-lg); }

/* ---------- Baskets & quotes ---------- */
.panier-selecteur { position: relative; }
.panier-selecteur__menu > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-2); align-items: center; padding: var(--space-1) var(--space-3); border: var(--button-border); background: transparent; color: var(--color-encre); min-height: 44px; }
.panier-selecteur__menu > summary::-webkit-details-marker { display: none; }
.panier-selecteur__nom { font: 400 var(--fs-nav) var(--font-texte); letter-spacing: .14em; text-transform: uppercase; }
.panier-selecteur__resume { font-size: 0.75rem; color: var(--color-text-muted); }
.panier-selecteur__icone { grid-row: span 2; font-size: var(--font-size-lg); }
.panier-selecteur__panneau { position: absolute; right: 0; z-index: 20; width: min(22rem, calc(100vw - 2 * var(--space-4))); background: var(--color-lin); color: var(--color-encre); border: 1px solid var(--color-encre); padding: var(--space-5) var(--space-4) var(--space-4); margin-top: var(--space-1); }
.panier-selecteur__panneau ul { list-style: none; padding: 0; margin: 0 0 var(--space-3); }
.panier-selecteur__titre { font-weight: 600; margin-bottom: var(--space-1); }
.panier-selecteur__nouveau { display: flex; gap: var(--space-2); margin: var(--space-3) 0; }
.lien { background: none; border: 0; padding: 0; color: var(--color-primary); text-decoration: underline; cursor: pointer; font: inherit; }
.lien--danger { color: var(--color-danger); }
.btn--danger { background: transparent; color: var(--color-danger); border-color: var(--color-danger); }
.btn--danger:hover { background: #fbeeee; color: var(--color-danger); }
.ajout-panier { display: inline-flex; gap: var(--space-1); align-items: center; }
.ajout-panier__qte { width: 4.5rem !important; padding: var(--space-1) var(--space-2) !important; }
.actions-inline { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.actions-inline form, form.inline { display: inline; }
.tag--primary { background: var(--color-primary); color: var(--color-on-primary); }
.tag--warning { background: #fbf5e8; color: var(--color-warning); }
.alert--inline { padding: var(--space-1) var(--space-2); margin: var(--space-1) 0 0; font-size: var(--font-size-sm); }
.panier-entete { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-5); }
.panier-entete__nom { display: flex; gap: var(--space-2); align-items: center; flex: 1 1 20rem; }
.h1-input { font: 400 var(--font-size-2xl) var(--font-titre) !important; border-color: transparent !important; background: transparent !important; padding-left: 0 !important; }
.h1-input:hover, .h1-input:focus { border-color: var(--color-border) !important; background: var(--color-surface) !important; padding-left: var(--space-3) !important; }
.devis-groupe { margin-bottom: var(--space-5); }
.devis-groupe__titre { font-size: var(--font-size-xl); margin-bottom: var(--space-2); }
.devis-groupe--indisponible { opacity: .75; }
.indisponible { color: var(--color-disabled); }
.offres tfoot th { font-weight: normal; color: var(--color-text-muted); }
.totaux { margin-left: auto; min-width: min(24rem, 100%); border-collapse: collapse; }
.totaux th { text-align: left; font-weight: normal; padding: var(--space-1) var(--space-4) var(--space-1) 0; }
.totaux td { text-align: right; white-space: nowrap; padding: var(--space-1) 0; }
.totaux__ht th, .totaux__ht td { font-weight: 600; border-top: 1px solid var(--color-border); }
.totaux__ttc th, .totaux__ttc td { font-weight: 700; font-size: var(--font-size-lg); }
.panier-soumettre { text-align: right; margin-top: var(--space-5); }
.nouvelle-adresse { margin-bottom: var(--space-5); }
.nouvelle-adresse summary { cursor: pointer; color: var(--color-primary); margin-bottom: var(--space-3); }
.toast { position: fixed; bottom: var(--space-5); right: var(--space-5); z-index: 50; background: var(--color-encre); color: var(--color-lin); padding: var(--space-3) var(--space-5); transition: opacity .4s; }
.toast--hidden { opacity: 0; pointer-events: none; }
.compte-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); margin-bottom: var(--space-5); }
.carte-info { background: var(--color-craie); border: var(--rule); padding: var(--space-6) var(--space-5); }
.carte-info h2 { font-size: 28px; }
.adresses { list-style: none; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.adresses li { border: var(--rule); background: var(--color-craie); padding: var(--space-3); }
.devis-entete { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); align-items: flex-start; margin-bottom: var(--space-4); }
.statut { display: inline-block; padding: 0 var(--space-2); font: 500 11px/1.9 var(--font-texte); letter-spacing: .16em; text-transform: uppercase; background: var(--color-surface-muted); }
.statut--soumis { background: #edf3f9; color: var(--color-info); }
.statut--valide { background: #fbf5e8; color: var(--color-warning); }
.statut--commande { background: #eef6ef; color: var(--color-success); }
.statut--refuse, .statut--annule_client, .statut--annule_admin, .statut--expire { background: #f2efea; color: var(--color-text-muted); }
.compte-rebours { font-weight: 600; color: var(--color-warning); }
.decision { margin: var(--space-6) 0; border-color: var(--color-primary); }
.historique { margin-top: var(--space-6); font-size: var(--font-size-sm); }
.mt { margin-top: var(--space-4); }
.offres tbody th { font-weight: normal; text-align: left; }
@media (max-width: 40rem) {
  /* Small screens: the panel spans the viewport width, whatever the button position. */
  .panier-selecteur { position: static; }
  .panier-selecteur__panneau { left: var(--space-4); right: var(--space-4); width: auto; }
  .app-header { position: relative; }
}
.panier-selecteur__nouveau .btn { white-space: nowrap; }