/* ===================================================================
   ADMIN-EDITORIAL — charte du site appliquée aux pages internes
   (admin.html, codes.html, conditions.html, legal.html).
   Chargée APRÈS style.css : gagne à spécificité égale.
   Se retire en supprimant le <link>.
   =================================================================== */

:root {
  --font-display: 'Oswald', 'Arial Narrow', system-ui, sans-serif;
  --font-body: 'Figtree', system-ui, sans-serif;
  --e-paper: #f2f2ec; --e-paper-hi: #f7f7f1; --e-panel: #ecebe1;
  --e-ink: #172530; --e-muted: #5f6b70; --e-faint: #8a938f;
  --e-sea: #1C5FAD; --e-sea-deep: #123a5e; --e-sun: #E87B1A; --e-sun-2: #f2a65a;
  --e-hair: #dcdbcf; --e-hair-2: #e7e6dc;
}

body { background: var(--e-paper); color: var(--e-ink); font-family: var(--font-body); max-width: 100%; }

/* ── Anti-débordement + parité iOS / Android (mêmes règles que le formulaire) ──
   `hidden` d'abord pour les Safari < 16, `clip` ensuite pour les récents. */
html { overflow-x: hidden; overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (max-width: 900px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select, textarea { font-size: 16px; }
}

/* ── Écran de connexion ── */
#loginScreen { background: var(--e-paper); }
.login-card {
  background: var(--e-paper-hi); border: 1px solid var(--e-hair);
  border-radius: 18px; box-shadow: 0 18px 44px rgba(18,45,60,.10);
}
.login-logo {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .03em; color: var(--e-ink); font-size: 1.45rem;
}
.login-sub { color: var(--e-muted); }

/* ── Bandeau : bleu profond (texte blanc en inline dans le HTML) ── */
.admin-header {
  background: linear-gradient(150deg, #16324e, #0e2436);
  box-shadow: none; border-bottom: 0;
}
.admin-header::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--e-sun), var(--e-sun-2) 55%, transparent);
}
.admin-header { position: relative; }
.admin-header .btn-outline {
  color: #fff; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.06);
}
.admin-header .btn-outline:hover { background: rgba(255,255,255,.14); border-color: var(--e-sun); }

/* ── Onglets ── */
.tabs { border-bottom: 1px solid var(--e-hair); }
.tab-btn {
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .05em; font-weight: 500; color: var(--e-muted); font-size: .92rem;
}
.tab-btn:hover { color: var(--e-ink); }
.tab-btn.active { color: var(--e-ink); border-bottom-color: var(--e-sun); }

/* ── Titres de section ── */
.section-toolbar h3, .settings-card h3, .rate-group-title {
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .03em; font-weight: 600; color: var(--e-ink);
}

/* ── Cartes ── */
.settings-card, .table-wrap {
  background: var(--e-paper-hi); border: 1px solid var(--e-hair);
  border-radius: 14px; box-shadow: none;
}
.rate-group { background: var(--e-panel); border-color: var(--e-hair); }

/* ── Tableaux ── */
table { background: transparent; }
thead { background: var(--e-sea-deep); color: #fff; }
thead th { font-family: var(--font-display); font-weight: 500; letter-spacing: .07em; }
tbody tr { border-bottom: 1px solid var(--e-hair-2); }
tbody tr:hover { background: rgba(28,95,173,.045); }
td.empty { color: var(--e-faint); }

/* ── Champs ── */
.field-label {
  font-family: var(--font-body); color: var(--e-muted); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; font-size: .72rem;
}
.field-label .req, .req { color: var(--e-sun); }
.form-group input, .form-group select, .settings-card input, .settings-card select,
.modal-box input, .modal-box select, .search-bar input {
  background-color: transparent; border: 0; border-bottom: 1.5px solid var(--e-hair);
  border-radius: 0; padding: 9px 2px 11px; color: var(--e-ink); font-family: var(--font-body);
}
/* Le raccourci `padding` ci-dessus ramene la marge droite a 2 px, alors que
   la fleche du menu deroulant est dessinee a droite : le texte passait
   dessous. On restitue la place necessaire et on rapproche la fleche du
   bord, coherent avec le style souligne. */
.form-group select, .settings-card select, .modal-box select, .search-bar select {
  padding-right: 30px;
  background-position: right 4px center;
}

.form-group input:hover:not(:focus), .form-group select:hover:not(:focus) { border-bottom-color: var(--e-sea); }
.form-group input:focus, .form-group select:focus,
.settings-card input:focus, .modal-box input:focus, .search-bar input:focus {
  background-color: transparent; border-bottom-color: var(--e-sun); box-shadow: none; outline: none;
}

/* ── Boutons ── */
.btn { font-family: var(--font-body); font-weight: 600; }
.btn-primary {
  background: var(--e-sun); border: 0; border-radius: 999px; box-shadow: none; font-weight: 700;
}
.btn-primary:hover { background: #d4650f; box-shadow: none; }
.admin-content .btn-outline, .modal-box .btn-outline {
  color: var(--e-sea); background: var(--e-paper); border-color: var(--e-hair); border-radius: 999px;
}
.admin-content .btn-outline:hover, .modal-box .btn-outline:hover { border-color: var(--e-sea); background: #fff; }
.btn-ghost { color: var(--e-muted); border-radius: 999px; }
.btn-ghost:hover { color: var(--e-ink); background: var(--e-panel); }

/* ── Fenêtres modales ── */
.modal-box { background: var(--e-paper-hi); border: 1px solid var(--e-hair); border-radius: 16px; }
.modal-header { border-bottom: 1px solid var(--e-hair); }
.modal-header h3 {
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .03em; font-weight: 600; color: var(--e-ink);
}
.modal-footer { border-top: 1px solid var(--e-hair); }

/* ── Divers ── */
.divider { background: var(--e-hair); }
.user-badge { background: rgba(255,255,255,.10); border-radius: 999px; }
.user-badge-name { font-weight: 600; }

/* ── Menu déroulant des onglets : mobile uniquement ── */
.tab-select-wrap { display: none; }
.tab-select-label {
  display: block; font-family: var(--font-body); color: var(--e-muted);
  font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  font-size: .72rem; margin-bottom: 6px;
}
#tabSelect {
  width: 100%; font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .03em; font-weight: 500; font-size: 1rem; color: var(--e-ink);
  background: var(--e-paper-hi); border: 1px solid var(--e-hair);
  border-radius: 12px; padding: 13px 14px;
}
#tabSelect:focus { outline: none; border-color: var(--e-sun); }

/* ═══════════════════════════════════════════════════════════════
   MOBILE — en-tête compact, onglets sur plusieurs lignes,
   tableaux transformés en fiches empilées.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {

  /* ── En-tête : logo + nom seuls (il débordait de 319 px) ── */
  .admin-header { padding: 0 12px; }
  .admin-header-inner { flex-wrap: wrap; gap: 10px; padding: 10px 0; }
  .admin-brand { gap: 10px !important; flex: 1 1 auto; min-width: 0; }
  .admin-brand img { height: 46px !important; }
  /* masque SIRET, adresse et « Interface Administration » */
  .admin-brand > div > div:not(:first-child) { display: none; }
  .admin-brand > div > div:first-child { font-size: 1rem !important; }
  .admin-header-inner > div:last-child { flex-wrap: wrap; justify-content: flex-end; gap: 8px !important; }
  .admin-header .btn { font-size: .72rem !important; padding: 7px 11px !important; }
  .user-badge { display: none !important; }

  /* ── Onglets : liste déroulante (8 onglets ne tiennent pas) ── */
  .tabs { display: none !important; }
  .tab-select-wrap { display: block; margin: 0 0 18px; }

  /* ── Tableaux → fiches empilées ── */
  .table-wrap { overflow-x: visible; border: 0; background: none; border-radius: 0; }
  .table-wrap table { display: block; width: 100%; }
  .table-wrap thead { display: none; }
  .table-wrap tbody, .table-wrap tr, .table-wrap td { display: block; width: auto; }
  .table-wrap tr {
    background: var(--e-paper-hi); border: 1px solid var(--e-hair);
    border-radius: 12px; padding: 12px 14px; margin-bottom: 12px;
  }
  .table-wrap tr:hover { background: var(--e-paper-hi); }
  .table-wrap td {
    border: 0; padding: 5px 0; display: flex; gap: 12px;
    align-items: baseline; word-break: break-word;
  }
  /* libellé de colonne, recopié par admin-mobile.js */
  .table-wrap td[data-label]:not([data-label=""])::before {
    content: attr(data-label); flex: 0 0 40%; max-width: 40%;
    font-family: var(--font-body); font-size: .66rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em; color: var(--e-muted);
  }
  /* colonne Actions : boutons sur toute la largeur, en bas de la fiche */
  .table-wrap td[data-label=""] {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--e-hair-2);
  }
  .table-wrap td.empty { display: block; text-align: center; }

  /* ── Respiration générale ── */
  .admin-content { padding: 18px 12px 56px; }
  /* la barre d'outils ET son groupe de boutons interne (flex en ligne posé
     dans le HTML) doivent passer à la ligne, sinon ils débordent de ~220 px */
  .section-toolbar { flex-wrap: wrap; gap: 10px; }
  .section-toolbar > div { flex-wrap: wrap; gap: 8px !important; }
  .section-toolbar .btn { font-size: .76rem; }

  /* Grilles et rangées flex écrites en dur dans le HTML (ex. le filtre de
     disponibilité en 5 colonnes) : on les replie sur une seule colonne,
     sinon elles poussent la page de plusieurs centaines de pixels. */
  .admin-content [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .admin-content [style*="display:flex"] { flex-wrap: wrap; }
  .admin-content .form-group { min-width: 0; }

  /* Calendrier de disponibilité : une grille de dates n'a pas de sens en
     fiches empilées — on la fait défiler dans son cadre, pas la page. */
  #tab-availability table { display: block; overflow-x: auto; max-width: 100%; }
  .modal-box { max-width: 94vw; }
  .modal-grid { grid-template-columns: 1fr; }
}

/* ── Pages de contenu (conditions, mentions légales) ── */
.legal-wrap h1, .legal-wrap h2, .content-page h1, .content-page h2 {
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .02em; font-weight: 600; color: var(--e-ink);
}

/* ── Sous-onglets (ex. Codes tarifaires : Nouveau code / Historique) ── */
.subtabs {
  display: flex; gap: 4px; margin: 0 0 18px;
  border-bottom: 1px solid var(--e-hair); flex-wrap: wrap;
}
.subtab-btn {
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .05em; font-weight: 500; font-size: .86rem;
  color: var(--e-muted); padding: 10px 16px;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.subtab-btn:hover { color: var(--e-ink); }
.subtab-btn.active { color: var(--e-ink); border-bottom-color: var(--e-sun); }

/* Pastille d'etat sur un sous-onglet : le mode de reservation se lit sans
   avoir a ouvrir l'onglet. */
.subtab-badge {
  display: inline-block; margin-left: 8px;
  font-family: var(--font-body); font-size: .68rem; font-weight: 600;
  letter-spacing: .02em; text-transform: none;
  padding: 3px 9px; border-radius: 999px;
  background: var(--e-panel, #eceade); color: var(--e-muted);
  vertical-align: middle;
}
.subtab-badge:empty { display: none; }
.subtab-badge.is-negocie { background: #fdf0dc; color: #8a5209; }

/* ── Fiche d'un contrat (clic sur une ligne du tableau) ────────────── */
.contract-row { cursor: pointer; transition: background .12s ease; }
.contract-row:hover { background: var(--e-paper-2, #f6f6f0); }
.contract-row:focus-visible { outline: 2px solid var(--e-sun); outline-offset: -2px; }

/* Le libelle garde sa colonne : la valeur longue passe a la ligne sous
   elle-meme, pas sous le libelle. */
.cs-line { display: flex; gap: 10px; padding: 2px 0; }
.cs-k { flex: 0 0 104px; color: var(--e-muted); }
.cs-k::after { content: ' :'; }
.cs-v { flex: 1 1 auto; font-weight: 600; color: var(--e-ink); min-width: 0; }

.cs-section { border-top: 1px solid var(--e-hair); padding: 16px 0 4px; }
.cs-section:first-of-type { border-top: 0; padding-top: 0; }
.cs-section-title {
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .06em; font-weight: 600; font-size: .78rem;
  color: var(--e-muted); margin: 0 0 12px;
}
.cs-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-actions .btn-sm { flex: 0 1 auto; }

.cs-doc {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--e-hair);
}
.cs-doc:last-child { border-bottom: 0; }

/* ── Infobulle au survol : explique ce que fait le bouton ────────────
   Element unique en position fixed (js/tooltip.js) et non un ::after sur le
   bouton : la fiche contrat defile, et un pseudo-element serait rogne par le
   bord de la modale des que le bouton est pres du bord. */
.tip-bubble {
  /* Au-dessus des modales (z-index 500) : les boutons expliques sont dedans. */
  position: fixed; z-index: 900;
  max-width: 280px;
  background: #1d2b3a; color: #fff;
  font-family: var(--font-body); font-size: .76rem; font-weight: 400;
  line-height: 1.45; letter-spacing: 0; text-transform: none; text-align: left;
  padding: 9px 12px; border-radius: 9px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .26);
  pointer-events: none;
  opacity: 0; transform: translateY(4px);
  transition: opacity .13s ease, transform .13s ease;
}
.tip-bubble.on { opacity: 1; transform: translateY(0); }
.tip-bubble::after {
  content: ''; position: absolute; top: 100%; left: var(--tip-arrow, 50%);
  transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: #1d2b3a;
}
.tip-bubble.below::after {
  top: auto; bottom: 100%;
  border-top-color: transparent; border-bottom-color: #1d2b3a;
}
/* Un bouton desactive n'emet pas d'evenement de survol : c'est justement la
   que l'explication compte le plus. */
[data-tip]:disabled { pointer-events: auto; }

.cs-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px;
}
.cs-check {
  display: flex; align-items: center; gap: 9px;
  font-weight: 400; cursor: pointer;
}
/* Les cases heritent sinon du width:100% de .form-group input. */
.cs-check input[type="checkbox"] {
  width: auto !important; min-width: 0 !important; max-width: none;
  flex: 0 0 auto; margin: 0; padding: 0; border: 0; background: none;
}
@media (max-width: 760px) {
  .cs-grid { grid-template-columns: 1fr; }
  #cvPreviewFrame { height: 320px; }
}

/* .settings-card est plafonnee a 480 px dans style.css. Le formulaire de
   creation de code a besoin de toute la largeur : sinon le nom du vehicule
   passe sous la fleche du menu deroulant. */
#acForm { max-width: none; }