/* Espace de gestion. Couleurs neutres, à adapter par loueur via les variables. */
:root {
  --fond: #f3f4f6;
  --surface: #ffffff;
  --encre: #1c2230;
  --gris: #5a6271;
  --trait: #d9dde3;
  --accent: #1f4fc4;
  --accent-fonce: #173b95;
  --ok-fond: #e7f6ec;
  --ok: #1d6b3a;
  --alerte-fond: #fdecea;
  --alerte: #a42020;
  --attente-fond: #fff4d6;
  --attente: #8a5a00;
  --cours-fond: #e2f3f1;
  --cours: #0f6b5f;
  --whatsapp: #1c7c4a;
  --rayon: 12px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--fond); color: var(--encre); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--accent); }
h1, h2 { line-height: 1.2; margin: 0; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.visuel-masque { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.discret { color: var(--gris); font-size: 0.9375rem; font-weight: 400; }
code { font-size: 0.875rem; background: var(--fond); padding: 1px 6px; border-radius: 4px; }

/* Barre du haut */
.barre { background: var(--encre); color: #fff; position: sticky; top: 0; z-index: 10; }
.barre__rang { display: flex; justify-content: space-between; align-items: center; gap: 12px; max-width: 1100px; margin: 0 auto; padding: 12px 16px 6px; }
.barre__nom { color: #fff; text-decoration: none; font-weight: 700; font-size: 1.0625rem; }
.barre .lien { color: rgb(255 255 255 / 0.8); }
.onglets { display: flex; gap: 4px; max-width: 1100px; margin: 0 auto; padding: 0 10px; overflow-x: auto; scrollbar-width: none; }
.onglets a { color: rgb(255 255 255 / 0.78); text-decoration: none; padding: 10px 10px 12px; white-space: nowrap; border-bottom: 3px solid transparent; font-weight: 500; }
.onglets a[aria-current="page"] { color: #fff; border-bottom-color: #fff; }

.page { max-width: 1100px; margin: 0 auto; padding: 20px 16px 64px; display: grid; gap: 20px; }
.titre { font-size: 1.6rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.entete-page { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.bloc { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 18px; display: grid; gap: 14px; align-content: start; }
.bloc h2 { font-size: 1.125rem; display: flex; align-items: center; gap: 8px; }
.compteur { background: var(--accent); color: #fff; border-radius: 999px; font-size: 0.8125rem; padding: 1px 9px; }
.vide { color: var(--gris); }
.colonnes { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }

/* Messages */
.message { padding: 12px 14px; border-radius: 10px; font-weight: 500; }
.message--ok { background: var(--ok-fond); color: var(--ok); }
.message--erreur { background: var(--alerte-fond); color: var(--alerte); }

/* Boutons */
.bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--trait); border-radius: 10px; background: var(--surface); color: var(--encre); font: 600 0.9375rem/1 inherit; text-decoration: none; cursor: pointer; }
.bouton:hover { border-color: var(--gris); }
.bouton--plein { background: var(--accent); border-color: var(--accent); color: #fff; }
.bouton--plein:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); }
.bouton--whatsapp { background: var(--whatsapp); border-color: var(--whatsapp); color: #fff; }
.bouton--large { width: 100%; min-height: 50px; }
.bouton--petit { min-height: 36px; padding: 0 12px; }
.lien { background: none; border: 0; padding: 4px; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.actions form, .en-ligne { display: inline; }

/* Cartes de réservation */
.cartes { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.carte { border: 1px solid var(--trait); border-radius: 10px; padding: 14px; display: grid; gap: 6px; background: var(--surface); }
.carte--inactive { opacity: 0.6; }
.carte__lien { display: flex; justify-content: space-between; align-items: center; gap: 8px; text-decoration: none; color: var(--encre); }
.carte__titre { font-weight: 700; }
.carte__periode { font-weight: 500; }
.carte__message { color: var(--gris); font-style: italic; }

/* Statuts */
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; background: var(--fond); color: var(--gris); white-space: nowrap; }
.badge--grand { font-size: 0.9375rem; padding: 4px 14px; }
.badge--demandee { background: var(--attente-fond); color: var(--attente); }
.badge--confirmee { background: #e5ecfb; color: var(--accent-fonce); }
.badge--en_cours { background: var(--cours-fond); color: var(--cours); }
.badge--refusee, .badge--annulee_client, .badge--annulee_loueur { background: var(--alerte-fond); color: var(--alerte); }

/* Fiche */
.fiche { display: grid; gap: 10px; margin: 0; }
.fiche div { display: grid; grid-template-columns: 9rem 1fr; gap: 8px; }
.fiche dt { color: var(--gris); }
.fiche dd { margin: 0; font-weight: 500; }
.fiche--compacte div { grid-template-columns: 8rem 1fr; }

/* Étapes */
.etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.etape { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--fond); }
.etape__repere { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--trait); display: grid; place-items: center; font-size: 0.8125rem; font-weight: 700; color: #fff; }
.etape--faite .etape__repere { background: var(--ok); border-color: var(--ok); }
.etape__texte { display: grid; }

/* Formulaires */
.pile { display: grid; gap: 14px; }
.grille-form { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.champ { display: grid; gap: 6px; font-weight: 600; font-size: 0.9375rem; }
.champ--large { grid-column: 1 / -1; }
.champ input, .champ select, .champ textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--trait); border-radius: 10px; font: 400 1rem/1.4 inherit; background: #fff; color: var(--encre); }
.champ textarea { resize: vertical; }
.choix-statut { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.choix-statut legend { margin-bottom: 4px; }
.choix-statut label, .case { display: flex; gap: 10px; align-items: center; font-weight: 400; }
.choix-statut input, .case input { width: 20px; height: 20px; accent-color: var(--accent); }

/* Listes */
.liste { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
.liste--journal { list-style: none; padding: 0; }
.pagination { display: flex; flex-wrap: wrap; gap: 6px; }

/* Planning */
.planning { overflow-x: auto; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); }
.planning__grille { display: grid; min-width: 900px; padding: 8px; row-gap: 6px; }
.planning__grille--28 { grid-template-columns: 9rem repeat(28, minmax(1.8rem, 1fr)); }
.planning__grille--29 { grid-template-columns: 9rem repeat(29, minmax(1.8rem, 1fr)); }
.planning__grille--30 { grid-template-columns: 9rem repeat(30, minmax(1.8rem, 1fr)); }
.planning__grille--31 { grid-template-columns: 9rem repeat(31, minmax(1.8rem, 1fr)); }
.planning__jour { text-align: center; font-size: 0.8125rem; font-weight: 600; color: var(--gris); display: grid; padding: 4px 0; border-radius: 6px; }
.planning__jour span { font-size: 0.6875rem; font-weight: 500; }
.planning__jour--we { background: var(--fond); }
.planning__jour--auj { background: var(--accent); color: #fff; }
.planning__voiture { font-weight: 600; font-size: 0.875rem; align-self: center; padding-right: 8px; }
.planning__ligne { grid-column: 2 / -1; display: grid; grid-template-columns: subgrid; grid-auto-rows: minmax(30px, auto); row-gap: 3px; border-top: 1px solid var(--fond); padding-top: 4px; }
.barre-occ { grid-row: 1; display: block; padding: 5px 8px; border-radius: 8px; font-size: 0.8125rem; font-weight: 600; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; background: var(--accent); }
.barre-occ--demandee { background: var(--attente-fond); color: var(--attente); border: 1px dashed var(--attente); }
.barre-occ--en_cours { background: var(--cours); }
.barre-occ--terminee { background: #9aa1ad; }
.barre-occ--indispo { grid-row: 2; background: repeating-linear-gradient(135deg, #6b7280 0 6px, #858c98 6px 12px); font-size: 0.75rem; padding: 2px 8px; }
.legende { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; color: var(--gris); font-size: 0.875rem; }
.pastille { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; background: var(--accent); }
.pastille--demandee { background: var(--attente-fond); border: 1px dashed var(--attente); }
.pastille--en_cours { background: var(--cours); }
.pastille--terminee { background: #9aa1ad; }
.pastille--indispo { background: #6b7280; }

/* Connexion */
.connexion { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.connexion__carte { width: min(400px, 100%); background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 28px 24px; display: grid; gap: 16px; }
.connexion__carte h1 { font-size: 1.5rem; }

@media (max-width: 600px) {
  .page { padding: 16px 12px 48px; }
  .fiche div { grid-template-columns: 1fr; gap: 2px; }
  .bloc { padding: 14px; }
}

/* Téléphone ou écran tactile : 44 px de haut au moins pour tout ce qui se touche du doigt. */
@media (max-width: 600px), (pointer: coarse) {
  .lien { min-height: 44px; padding: 0 8px; }
  .bouton--petit { min-height: 44px; padding: 0 16px; }
  .barre__nom { display: inline-block; padding: 10px 0; }
  .carte__lien { min-height: 44px; }
  .carte__client a, .fiche dd a, .liste a { display: inline-block; padding: 10px 0; }
  .barre-occ:not(.barre-occ--indispo) { line-height: 34px; }
}

/* Position des occupations dans le planning (jour de début, jour de fin inclus). */
.cs-1 { grid-column-start: 1; }
.cs-2 { grid-column-start: 2; }
.cs-3 { grid-column-start: 3; }
.cs-4 { grid-column-start: 4; }
.cs-5 { grid-column-start: 5; }
.cs-6 { grid-column-start: 6; }
.cs-7 { grid-column-start: 7; }
.cs-8 { grid-column-start: 8; }
.cs-9 { grid-column-start: 9; }
.cs-10 { grid-column-start: 10; }
.cs-11 { grid-column-start: 11; }
.cs-12 { grid-column-start: 12; }
.cs-13 { grid-column-start: 13; }
.cs-14 { grid-column-start: 14; }
.cs-15 { grid-column-start: 15; }
.cs-16 { grid-column-start: 16; }
.cs-17 { grid-column-start: 17; }
.cs-18 { grid-column-start: 18; }
.cs-19 { grid-column-start: 19; }
.cs-20 { grid-column-start: 20; }
.cs-21 { grid-column-start: 21; }
.cs-22 { grid-column-start: 22; }
.cs-23 { grid-column-start: 23; }
.cs-24 { grid-column-start: 24; }
.cs-25 { grid-column-start: 25; }
.cs-26 { grid-column-start: 26; }
.cs-27 { grid-column-start: 27; }
.cs-28 { grid-column-start: 28; }
.cs-29 { grid-column-start: 29; }
.cs-30 { grid-column-start: 30; }
.cs-31 { grid-column-start: 31; }
.ce-1 { grid-column-end: 2; }
.ce-2 { grid-column-end: 3; }
.ce-3 { grid-column-end: 4; }
.ce-4 { grid-column-end: 5; }
.ce-5 { grid-column-end: 6; }
.ce-6 { grid-column-end: 7; }
.ce-7 { grid-column-end: 8; }
.ce-8 { grid-column-end: 9; }
.ce-9 { grid-column-end: 10; }
.ce-10 { grid-column-end: 11; }
.ce-11 { grid-column-end: 12; }
.ce-12 { grid-column-end: 13; }
.ce-13 { grid-column-end: 14; }
.ce-14 { grid-column-end: 15; }
.ce-15 { grid-column-end: 16; }
.ce-16 { grid-column-end: 17; }
.ce-17 { grid-column-end: 18; }
.ce-18 { grid-column-end: 19; }
.ce-19 { grid-column-end: 20; }
.ce-20 { grid-column-end: 21; }
.ce-21 { grid-column-end: 22; }
.ce-22 { grid-column-end: 23; }
.ce-23 { grid-column-end: 24; }
.ce-24 { grid-column-end: 25; }
.ce-25 { grid-column-end: 26; }
.ce-26 { grid-column-end: 27; }
.ce-27 { grid-column-end: 28; }
.ce-28 { grid-column-end: 29; }
.ce-29 { grid-column-end: 30; }
.ce-30 { grid-column-end: 31; }
.ce-31 { grid-column-end: 32; }