/* =========================================================================
   AzurTech — système de design
   Bootstrap 5.3 + thème maison. Aucune police ni icône externe : le site
   reste rapide même avec une petite connexion.
   ========================================================================= */

:root {
  --at-primaire: #0B5CAB;
  --at-primaire-fonce: #08457F;
  --at-primaire-clair: #E9F2FC;
  --at-encre: #0F1C2E;
  --at-texte: #334155;
  --at-discret: #64748B;
  --at-bordure: #E2E8F0;
  --at-fond: #F6F8FB;
  --at-blanc: #FFFFFF;
  --at-nuit: #0B1A2E;
  --at-rayon: 12px;
  --at-ombre: 0 1px 2px rgba(15, 28, 46, .04), 0 4px 16px rgba(15, 28, 46, .06);
  --at-ombre-forte: 0 2px 4px rgba(15, 28, 46, .06), 0 12px 32px rgba(15, 28, 46, .10);

  --bs-primary: var(--at-primaire);
  --bs-primary-rgb: 11, 92, 171;
  --bs-link-color: var(--at-primaire);
  --bs-link-color-rgb: 11, 92, 171;
  --bs-link-hover-color: var(--at-primaire-fonce);
  --bs-body-color: var(--at-texte);
  --bs-body-bg: var(--at-blanc);
  --bs-border-color: var(--at-bordure);
  --bs-body-font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.6;
  --bs-border-radius: 8px;
  --bs-border-radius-lg: var(--at-rayon);
}

html { font-size: 15px; scroll-behavior: smooth; }
@media (min-width: 768px) { html { font-size: 16px; } }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .titre { color: var(--at-encre); font-weight: 700; letter-spacing: -.01em; }

a { text-decoration: none; }
a:hover { text-decoration: underline; }
.btn:hover, .carte-lien:hover, .nav-link:hover, .navbar-brand:hover { text-decoration: none; }

.ic { width: 1.25em; height: 1.25em; flex-shrink: 0; vertical-align: -.25em; }
.ic-sm { width: 1em; height: 1em; vertical-align: -.15em; }
.ic-lg { width: 1.75rem; height: 1.75rem; }

.texte-discret { color: var(--at-discret); }
.surtitre {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--at-primaire);
}

:focus-visible { outline: 3px solid rgba(11, 92, 171, .35); outline-offset: 2px; }

/* ---------- Boutons ---------- */

.btn { font-weight: 600; border-radius: 8px; padding: .6rem 1.15rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.btn-lg { padding: .8rem 1.5rem; font-size: 1.05rem; }
.btn-sm { padding: .35rem .75rem; font-size: .85rem; }

.btn-primary {
  --bs-btn-bg: var(--at-primaire);
  --bs-btn-border-color: var(--at-primaire);
  --bs-btn-hover-bg: var(--at-primaire-fonce);
  --bs-btn-hover-border-color: var(--at-primaire-fonce);
  --bs-btn-active-bg: var(--at-primaire-fonce);
  --bs-btn-active-border-color: var(--at-primaire-fonce);
  --bs-btn-disabled-bg: var(--at-primaire);
  --bs-btn-disabled-border-color: var(--at-primaire);
  box-shadow: 0 1px 2px rgba(11, 92, 171, .25);
}
.btn-outline-primary {
  --bs-btn-color: var(--at-primaire);
  --bs-btn-border-color: var(--at-primaire);
  --bs-btn-hover-bg: var(--at-primaire);
  --bs-btn-hover-border-color: var(--at-primaire);
  --bs-btn-active-bg: var(--at-primaire-fonce);
}
.btn-blanc { background: #fff; color: var(--at-primaire); border: 1px solid #fff; }
.btn-blanc:hover { background: var(--at-primaire-clair); color: var(--at-primaire-fonce); }
.btn-contour-blanc { color: #fff; border: 1px solid rgba(255, 255, 255, .55); background: transparent; }
.btn-contour-blanc:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.btn-doux { background: var(--at-fond); color: var(--at-encre); border: 1px solid var(--at-bordure); }
.btn-doux:hover { background: #fff; border-color: #CBD5E1; color: var(--at-encre); }

/* ---------- Formulaires ---------- */

.form-label { font-weight: 600; font-size: .9rem; color: var(--at-encre); margin-bottom: .35rem; }
.form-control, .form-select { padding: .65rem .85rem; border-color: #D5DDE7; border-radius: 8px; }
.form-control:focus, .form-select:focus { border-color: var(--at-primaire); box-shadow: 0 0 0 3px rgba(11, 92, 171, .15); }
.form-control.input-validation-error { border-color: #DC2626; }
.field-validation-error { display: block; font-size: .85rem; margin-top: .3rem; }
.form-check-input:checked { background-color: var(--at-primaire); border-color: var(--at-primaire); }

/* ---------- Cartes ---------- */

.carte {
  background: #fff;
  border: 1px solid var(--at-bordure);
  border-radius: var(--at-rayon);
  box-shadow: var(--at-ombre);
}
.carte-corps { padding: 1.5rem; }
@media (min-width: 768px) { .carte-corps { padding: 2rem; } }
.carte-titre { font-size: 1.05rem; margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem; }

.pastille-icone {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--at-primaire-clair);
  color: var(--at-primaire);
  flex-shrink: 0;
}
.pastille-icone.petite { width: 36px; height: 36px; border-radius: 10px; }

/* ---------- Pastilles de statut ---------- */

.statut {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .25rem .7rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
}
.statut::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.statut-attente { background: #FEF3C7; color: #92400E; }
.statut-confirme { background: #DCFCE7; color: #166534; }
.statut-annule { background: #F1F5F9; color: #64748B; }
.statut-termine { background: #E0E7FF; color: #3730A3; }

/* ---------- Alertes ---------- */

.alerte {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: 1rem 1.25rem;
  border-radius: var(--at-rayon);
  border: 1px solid;
  margin-bottom: 1.5rem;
}
.alerte-succes { background: #F0FDF4; border-color: #BBF7D0; color: #166534; }
.alerte-info { background: var(--at-primaire-clair); border-color: #C7DDF5; color: var(--at-primaire-fonce); }
.alerte-erreur { background: #FEF2F2; border-color: #FECACA; color: #991B1B; }
.alerte .ic { margin-top: .15rem; }
.validation-summary-valid { display: none; }
.alerte ul { margin: 0; padding-left: 1rem; }

/* =========================================================================
   SITE PUBLIC
   ========================================================================= */

.entete-site {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--at-bordure);
}
.entete-site .navbar { padding: .85rem 0; }
.entete-site .nav-link { color: var(--at-texte); font-weight: 500; padding: .5rem .9rem !important; }
.entete-site .nav-link:hover { color: var(--at-primaire); }

.marque { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.3rem; color: var(--at-encre); letter-spacing: -.02em; }
.marque:hover { color: var(--at-encre); }
.marque-logo {
  width: 36px; height: 36px; border-radius: 9px;
  background: linear-gradient(135deg, #1574D4, var(--at-primaire-fonce));
  color: #fff; font-size: 1rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(11, 92, 171, .35);
}
.marque-accent { color: var(--at-primaire); }
/* Logo sur fond blanc arrondi : reste lisible sur les fonds sombres (pied de page, admin) */
.marque-image { height: 44px; width: auto; background: #fff; border-radius: 8px; padding: 2px 4px; flex-shrink: 0; }
.barre-haut-admin .marque-image { height: 36px; }

main.contenu-public { flex: 1; }

/* Héros */
.heros {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(56, 148, 238, .45), transparent 60%),
    radial-gradient(800px 400px at -10% 110%, rgba(21, 116, 212, .35), transparent 60%),
    linear-gradient(160deg, #0B1A2E 0%, #0B3A6E 100%);
  color: #fff;
  padding: 5rem 0 6rem;
}
.heros::after {
  content: "";
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, #000 30%, transparent);
  pointer-events: none;
}
.heros .container { position: relative; z-index: 1; }
.heros h1 { color: #fff; font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 800; line-height: 1.12; letter-spacing: -.025em; }
.heros .lead { color: #C9DCF2; font-size: 1.15rem; max-width: 36rem; }
.heros .surtitre { color: #8EC2F5; }
.heros-carte {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 16px;
  padding: 1.5rem;
  backdrop-filter: blur(6px);
}
.heros-ligne { display: flex; gap: .85rem; align-items: center; padding: .75rem 0; color: #E2EEFB; }
.heros-ligne + .heros-ligne { border-top: 1px solid rgba(255, 255, 255, .1); }
.heros-ligne .pastille-icone { background: rgba(142, 194, 245, .15); color: #8EC2F5; width: 40px; height: 40px; }

.section { padding: 5rem 0; }
.section-grise { background: var(--at-fond); }
.section-entete { max-width: 40rem; margin: 0 auto 3rem; text-align: center; }
.section-entete h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: .5rem 0 .75rem; }

.carte-service { height: 100%; padding: 2rem; transition: transform .15s ease, box-shadow .15s ease; display: flex; flex-direction: column; }
.carte-service:hover { transform: translateY(-3px); box-shadow: var(--at-ombre-forte); }
.carte-service h3 { font-size: 1.15rem; margin: 1.25rem 0 .5rem; }
.carte-service p { color: var(--at-discret); flex: 1; }
.carte-service .lien-fleche { font-weight: 600; display: inline-flex; align-items: center; gap: .35rem; }

.etape-num {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--at-primaire); color: #fff; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 6px var(--at-primaire-clair);
}

.bandeau-cta {
  background: linear-gradient(135deg, var(--at-primaire) 0%, #08457F 100%);
  color: #fff;
  border-radius: 20px;
  padding: 3rem 2rem;
}
.bandeau-cta h2 { color: #fff; }
.bandeau-cta p { color: #D6E6F7; }

.pied-site { background: var(--at-nuit); color: #94A3B8; padding: 3.5rem 0 1.5rem; font-size: .92rem; margin-top: auto; }
.pied-site .marque { color: #fff; }
.pied-site .marque-accent, .barre-laterale .marque-accent, .barre-haut-admin .marque-accent, .connexion-visuel .marque-accent { color: #6FB1F2; }
.pied-site h4 { color: #fff; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1rem; }
.pied-site a { color: #CBD5E1; }
.pied-site a:hover { color: #fff; }
.pied-site li { margin-bottom: .5rem; display: flex; gap: .5rem; align-items: flex-start; }
.pied-site .ic { margin-top: .2rem; color: #64748B; }
.pied-bas { border-top: 1px solid rgba(255, 255, 255, .08); margin-top: 2.5rem; padding-top: 1.5rem; font-size: .85rem; }

/* ---------- Réservation ---------- */

.page-entete { background: var(--at-fond); border-bottom: 1px solid var(--at-bordure); padding: 2.5rem 0 2rem; }
.page-entete h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: .35rem; }

.etapes { display: flex; gap: .5rem; margin-top: 1.75rem; padding: 0; list-style: none; flex-wrap: wrap; }
.etapes li { display: flex; align-items: center; gap: .5rem; font-size: .9rem; font-weight: 600; color: var(--at-discret); }
.etapes li:not(:last-child)::after { content: ""; width: 28px; height: 2px; background: var(--at-bordure); margin-left: .25rem; }
.etapes .num {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 2px solid var(--at-bordure); font-size: .8rem;
}
.etapes .active { color: var(--at-encre); }
.etapes .active .num { border-color: var(--at-primaire); color: var(--at-primaire); }
.etapes .faite .num { background: var(--at-primaire); border-color: var(--at-primaire); color: #fff; }
.etapes .faite:not(:last-child)::after { background: var(--at-primaire); }

.bloc-etape { margin-bottom: 2rem; }
.bloc-etape > h2 { font-size: 1.1rem; display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.bloc-etape > h2 .num {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--at-primaire); color: #fff; font-size: .8rem;
  display: inline-flex; align-items: center; justify-content: center;
}

.choix-service {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.15rem 1.25rem;
  border: 2px solid var(--at-bordure);
  border-radius: var(--at-rayon);
  background: #fff;
  color: var(--at-texte);
  height: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.choix-service:hover { border-color: #A8C8EC; color: var(--at-texte); text-decoration: none; }
.choix-service.choisi { border-color: var(--at-primaire); box-shadow: 0 0 0 4px var(--at-primaire-clair); }
.choix-service strong { display: block; color: var(--at-encre); }
.choix-service small { color: var(--at-discret); display: block; line-height: 1.45; }
.choix-service .duree { font-size: .8rem; font-weight: 600; color: var(--at-primaire); margin-top: .35rem; }
.btn-check:checked + .choix-service { border-color: var(--at-primaire); box-shadow: 0 0 0 4px var(--at-primaire-clair); }
.btn-check:focus-visible + .choix-service { outline: 3px solid rgba(11, 92, 171, .35); }

.jours { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .6rem; }
.jour {
  display: flex; flex-direction: column; align-items: center;
  padding: .7rem .4rem;
  border: 2px solid var(--at-bordure);
  border-radius: 10px;
  background: #fff;
  color: var(--at-encre);
  line-height: 1.2;
}
.jour:hover { border-color: #A8C8EC; color: var(--at-encre); text-decoration: none; }
.jour .jsem { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--at-discret); font-weight: 600; }
.jour .jnum { font-size: 1.4rem; font-weight: 800; margin: .15rem 0; }
.jour .jmois { font-size: .78rem; color: var(--at-discret); }
.jour .jlibres { font-size: .72rem; font-weight: 600; color: #15803D; margin-top: .35rem; }
.jour.choisi { border-color: var(--at-primaire); background: var(--at-primaire); color: #fff; }
.jour.choisi .jsem, .jour.choisi .jmois, .jour.choisi .jlibres { color: #D6E6F7; }
.jour.complet { opacity: .5; pointer-events: none; background: var(--at-fond); }
.jour.complet .jlibres { color: var(--at-discret); }

.creneaux-groupe + .creneaux-groupe { margin-top: 1.25rem; }
.creneaux-groupe h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--at-discret); margin-bottom: .6rem; font-weight: 700; }
.creneaux { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .5rem; }
.creneaux .btn { border: 2px solid var(--at-bordure); color: var(--at-encre); background: #fff; font-weight: 600; padding: .55rem 0; }
.creneaux .btn:hover { border-color: #A8C8EC; }
.creneaux .btn-check:checked + .btn { background: var(--at-primaire); border-color: var(--at-primaire); color: #fff; }

.resume { position: sticky; top: 96px; }
.resume-ligne { display: flex; gap: .75rem; align-items: flex-start; padding: .8rem 0; }
.resume-ligne + .resume-ligne { border-top: 1px dashed var(--at-bordure); }
.resume-ligne .ic { color: var(--at-primaire); margin-top: .15rem; }
.resume-ligne small { display: block; color: var(--at-discret); font-size: .78rem; }
.resume-ligne strong { color: var(--at-encre); }
.resume-vide { color: #94A3B8; font-weight: 500; }

.etat-vide { text-align: center; padding: 2.5rem 1rem; color: var(--at-discret); }
.etat-vide .pastille-icone { margin-bottom: 1rem; width: 56px; height: 56px; }

/* ---------- Mon rendez-vous ---------- */

.billet { max-width: 46rem; margin: 0 auto; overflow: hidden; }
.billet-tete { background: linear-gradient(135deg, var(--at-primaire), var(--at-primaire-fonce)); color: #fff; padding: 1.75rem 2rem; }
.billet-tete small { color: #BBD6F2; text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; font-weight: 700; }
.billet-ref { font-family: Consolas, "SF Mono", monospace; font-size: 1.9rem; font-weight: 700; letter-spacing: .04em; }
.billet-date { background: var(--at-primaire-clair); padding: 1.25rem 2rem; display: flex; gap: 1rem; align-items: center; border-bottom: 1px dashed #C7DDF5; }
.billet-date strong { font-size: 1.15rem; color: var(--at-encre); display: block; }
.billet-corps { padding: 1.75rem 2rem; }
.infos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem; }
.info small { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--at-discret); font-weight: 700; margin-bottom: .2rem; }
.info span { color: var(--at-encre); font-weight: 600; word-break: break-word; }

.suivi { display: flex; list-style: none; padding: 0; margin: 0 0 1.5rem; }
.suivi li { flex: 1; text-align: center; position: relative; font-size: .82rem; font-weight: 600; color: #94A3B8; }
.suivi li::before {
  content: ""; display: block; width: 14px; height: 14px; border-radius: 50%;
  margin: 0 auto .45rem; background: #fff; border: 3px solid #CBD5E1; position: relative; z-index: 1;
}
.suivi li:not(:first-child)::after { content: ""; position: absolute; top: 6px; right: 50%; width: 100%; height: 3px; background: #E2E8F0; }
.suivi li.fait { color: var(--at-encre); }
.suivi li.fait::before { background: var(--at-primaire); border-color: var(--at-primaire); }
.suivi li.fait::after { background: var(--at-primaire); }

/* =========================================================================
   ESPACE ADMINISTRATEUR
   ========================================================================= */

body.admin { background: var(--at-fond); flex-direction: row; }

.barre-laterale {
  width: 260px;
  background: var(--at-nuit);
  color: #94A3B8;
  display: flex; flex-direction: column;
  position: fixed; top: 0; bottom: 0; left: 0;
  z-index: 1040;
}
.barre-laterale .marque { color: #fff; padding: 1.5rem 1.5rem 1.25rem; font-size: 1.2rem; }
.barre-laterale .marque small { display: block; font-size: .7rem; font-weight: 600; color: #64748B; letter-spacing: .08em; text-transform: uppercase; }
.nav-admin { list-style: none; padding: .5rem .85rem; margin: 0; flex: 1; }
.nav-admin .titre-groupe { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: #475569; font-weight: 700; padding: 1rem .75rem .5rem; }
.nav-admin a {
  display: flex; align-items: center; gap: .75rem;
  padding: .65rem .75rem; border-radius: 8px;
  color: #CBD5E1; font-weight: 500; font-size: .95rem;
}
.nav-admin a:hover { background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }
.nav-admin a.active { background: var(--at-primaire); color: #fff; box-shadow: 0 2px 8px rgba(11, 92, 171, .45); }
.nav-admin .compteur { margin-left: auto; background: #F59E0B; color: #0B1A2E; font-size: .72rem; font-weight: 800; border-radius: 999px; padding: .1rem .5rem; }
.profil-admin { border-top: 1px solid rgba(255, 255, 255, .08); padding: 1rem 1.25rem; display: flex; align-items: center; gap: .75rem; }
.avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, #1574D4, #08457F);
  color: #fff; font-weight: 700; font-size: .9rem;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.profil-admin .courriel { color: #E2E8F0; font-size: .82rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profil-admin button { background: none; border: 0; color: #94A3B8; padding: 0; font-size: .8rem; display: inline-flex; align-items: center; gap: .3rem; }
.profil-admin button:hover { color: #fff; }

.zone-admin { flex: 1; margin-left: 260px; min-width: 0; }
.barre-haut-admin { display: none; }
.contenu-admin { padding: 2rem 2.5rem 3rem; max-width: 1400px; }
.admin-entete { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.admin-entete h1 { font-size: 1.65rem; margin: 0; }
.admin-entete p { margin: .25rem 0 0; color: var(--at-discret); }

@media (max-width: 991.98px) {
  body.admin { flex-direction: column; }
  .barre-laterale { transform: translateX(-100%); transition: transform .2s ease; }
  .barre-laterale.ouverte { transform: none; box-shadow: 0 0 0 100vmax rgba(11, 26, 46, .5); }
  .zone-admin { margin-left: 0; }
  .barre-haut-admin {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--at-nuit); padding: .75rem 1rem; position: sticky; top: 0; z-index: 1030;
  }
  .barre-haut-admin .marque { color: #fff; font-size: 1.1rem; }
  .barre-haut-admin button { background: none; border: 0; color: #fff; padding: .25rem; }
  .contenu-admin { padding: 1.5rem 1rem 2.5rem; }
}

.stat { padding: 1.35rem 1.5rem; display: flex; gap: 1rem; align-items: center; height: 100%; color: var(--at-texte); }
a.stat:hover { box-shadow: var(--at-ombre-forte); text-decoration: none; color: var(--at-texte); }
.stat .valeur { font-size: 2rem; font-weight: 800; color: var(--at-encre); line-height: 1; }
.stat .libelle { font-size: .85rem; color: var(--at-discret); font-weight: 500; margin-top: .3rem; }
.stat.attention { border-color: #FCD34D; background: linear-gradient(180deg, #FFFBEB, #fff); }
.stat.attention .pastille-icone { background: #FEF3C7; color: #B45309; }
.pastille-icone.verte { background: #DCFCE7; color: #15803D; }
.pastille-icone.violette { background: #EDE9FE; color: #6D28D9; }

.onglets { display: flex; gap: .25rem; border-bottom: 1px solid var(--at-bordure); padding: 0 1.25rem; overflow-x: auto; }
.onglets a { padding: 1rem .9rem; font-weight: 600; font-size: .92rem; color: var(--at-discret); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.onglets a:hover { color: var(--at-encre); text-decoration: none; }
.onglets a.active { color: var(--at-primaire); border-bottom-color: var(--at-primaire); }

.filtres { padding: 1rem 1.25rem; display: flex; gap: .75rem; flex-wrap: wrap; border-bottom: 1px solid var(--at-bordure); }
.filtres .recherche { position: relative; flex: 1 1 260px; }
.filtres .recherche .ic { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: #94A3B8; }
.filtres .recherche input { padding-left: 2.6rem; }
.filtres .form-select { flex: 0 1 200px; }

.table-admin { margin: 0; }
.table-admin thead th {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--at-discret); font-weight: 700; background: #FAFBFD;
  border-bottom: 1px solid var(--at-bordure); padding: .85rem 1.25rem; white-space: nowrap;
}
.table-admin td { padding: 1rem 1.25rem; vertical-align: middle; border-color: #EEF2F6; }
.table-admin tbody tr { cursor: pointer; }
.table-admin tbody tr:hover td { background: #F8FAFD; }
.cellule-date { display: flex; gap: .85rem; align-items: center; }
.mini-cal {
  width: 46px; text-align: center; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--at-bordure); background: #fff; flex-shrink: 0; line-height: 1.1;
}
.mini-cal .m { background: var(--at-primaire); color: #fff; font-size: .62rem; font-weight: 700; text-transform: uppercase; padding: .15rem 0; }
.mini-cal .j { font-size: 1.1rem; font-weight: 800; color: var(--at-encre); padding: .2rem 0 .25rem; }
.cellule-date .heure { font-weight: 700; color: var(--at-encre); }
.cellule-date .ref { font-family: Consolas, monospace; font-size: .78rem; color: var(--at-discret); }
.nom-client { font-weight: 600; color: var(--at-encre); }
.sous-ligne { font-size: .85rem; color: var(--at-discret); }

/* Téléphone : chaque rendez-vous devient une carte au lieu d'une ligne de tableau */
@media (max-width: 767.98px) {
  .table-admin thead { display: none; }
  .table-admin tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "date statut" "client client" "actions actions";
    gap: .6rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #EEF2F6;
  }
  .table-admin td { display: block; padding: 0; border: 0; }
  .table-admin td:nth-child(1) { grid-area: date; }
  .table-admin td:nth-child(2) { grid-area: client; }
  .table-admin td:nth-child(4) { grid-area: statut; align-self: start; }
  .table-admin td:nth-child(5) { grid-area: actions; text-align: left !important; display: flex; gap: .5rem; }
  .table-admin td:nth-child(5) form, .table-admin td:nth-child(5) .btn { flex: 1; }
  .table-admin td:nth-child(5) form .btn { width: 100%; }
}
@media (max-width: 575.98px) {
  .stat { flex-direction: column; align-items: flex-start; gap: .75rem; padding: 1rem 1.1rem; }
  .stat .valeur { font-size: 1.6rem; }
  .stat .pastille-icone { width: 38px; height: 38px; }
  .filtres .form-select { flex: 1 1 140px; }
  .admin-entete .btn { display: none; }
}

.pagination { --bs-pagination-active-bg: var(--at-primaire); --bs-pagination-active-border-color: var(--at-primaire); --bs-pagination-color: var(--at-texte); }

.detail-entete { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.detail-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.lien-retour { display: inline-flex; align-items: center; gap: .4rem; color: var(--at-discret); font-weight: 600; font-size: .9rem; margin-bottom: 1rem; }
.lien-retour:hover { color: var(--at-primaire); text-decoration: none; }

.liste-infos { list-style: none; padding: 0; margin: 0; }
.liste-infos li { display: flex; gap: .85rem; padding: .9rem 0; align-items: flex-start; }
.liste-infos li + li { border-top: 1px solid #EEF2F6; }
.liste-infos .ic { color: var(--at-discret); margin-top: .15rem; }
.liste-infos small { display: block; color: var(--at-discret); font-size: .78rem; }
.liste-infos strong, .liste-infos a { font-weight: 600; }
.liste-infos strong { color: var(--at-encre); }

.citation { background: var(--at-fond); border-left: 4px solid var(--at-primaire); border-radius: 0 8px 8px 0; padding: 1rem 1.25rem; white-space: pre-line; color: var(--at-encre); }

.historique { list-style: none; padding: 0; margin: 0; }
.historique li { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .7rem 0; }
.historique li + li { border-top: 1px solid #EEF2F6; }

/* ---------- Connexion ---------- */

.page-connexion {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--at-fond);
}
@media (min-width: 992px) { .page-connexion { grid-template-columns: 1.1fr 1fr; } }
.connexion-visuel { display: none; }
@media (min-width: 992px) {
  .connexion-visuel {
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 3rem;
    color: #fff;
    background:
      radial-gradient(800px 400px at 100% 0%, rgba(56, 148, 238, .4), transparent 60%),
      linear-gradient(160deg, #0B1A2E 0%, #0B3A6E 100%);
  }
  .connexion-visuel .marque { color: #fff; }
  .connexion-visuel h2 { color: #fff; font-size: 2rem; line-height: 1.2; max-width: 26rem; }
  .connexion-visuel p { color: #C9DCF2; max-width: 26rem; }
}
.connexion-formulaire { display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
.connexion-boite { width: 100%; max-width: 400px; }
.connexion-boite h1 { font-size: 1.6rem; }