/* ===========================================================================
   Annuaire des auto-écoles — design system « République Conduite »
   (adapté du projet Stitch de l'owner : rouge tunisien + bleu marine).
   UNE seule famille auto-hébergée : Hanken Grotesk variable (400→800, SIL OFL).
   Mobile-first, LTR + RTL (propriétés logiques).
   Se superpose à Tabler (grille/utilitaires) ; ne dépend d'aucun CDN.
   =========================================================================== */

@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/hanken-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/hanken-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Rouge — ACTION (~10% de la page). Aligné sur le mot « Annuaire » du logo.
     Contraste blanc sur --an-primary = 5,5:1 (WCAG AA). */
  --an-primary: #d40000;          /* rouge du logo — actions */
  --an-primary-rgb: 212, 0, 0;    /* même couleur, pour les rgba() (source unique) */
  --an-primary-bright: #e30613;   /* rouge vif du logo — hover des actions */
  --an-primary-dark: #a80000;     /* pressé/actif, dégradés */
  --an-primary-soft: #fdecec;     /* fonds teintés */
  --an-primary-on-dark: #ff5a68;  /* accent rouge sur photo/navy : le rouge plein y échoue le contraste */
  --an-primary-on-dark-soft: #ffe1e1;

  /* Bleu — IDENTITÉ (~5%). Wordmark et pin du logo ; éléments secondaires. */
  --an-blue: #066fd1;             /* bleu du logo — icônes de lieu, hover des liens */
  --an-blue-rgb: 6, 111, 209;     /* pour les anneaux de focus */
  --an-blue-dark: #045bc4;        /* stop foncé du dégradé du pin — texte sur teinte */
  --an-blue-tint: #c1ddf6;        /* accent clair du logo — fonds de badges */
  --an-map-region: #dfe6f5;       /* carte : gouvernorat sans auto-école */
  --an-map-region-has: #8fa5d6;   /* carte : gouvernorat pourvu */

  --an-navy: #101b3d;             /* bleu marine — titres, footer, premium */
  --an-navy-rgb: 16, 27, 61;      /* ombres, voiles */
  --an-ink: #121c2a;              /* texte principal */
  --an-muted: #5b6472;            /* texte secondaire — 6,0:1 sur blanc */
  --an-bg: #f5f7fb;               /* fond de page */
  --an-surface: #ffffff;          /* cartes */
  --an-surface-2: #f1f4fb;        /* fonds doux */
  --an-border: #e5e7eb;           /* traits */
  --an-success: #10b981;          /* ouvert */
  --an-amber: #b45309;            /* badge « Vérifiée » — texte */
  --an-amber-soft: #fef3c7;       /* badge « Vérifiée » — fond */
  --an-amber-border: #fcd34d;     /* badge « Vérifiée » — trait */
  --an-radius: .625rem;
  --an-radius-lg: .75rem;         /* cartes ~12px (maquette) */
  --an-radius-xl: 1.5rem;
  --an-shadow: 0 4px 16px rgba(var(--an-navy-rgb), .06);
  --an-shadow-lg: 0 12px 32px rgba(var(--an-navy-rgb), .12);
  --an-head-font: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --an-body-font: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
}

.an-body {
  font-family: var(--an-body-font);
  color: var(--an-ink);
  background: var(--an-bg);
  text-align: start;
}

.an-body h1, .an-body h2, .an-body h3, .an-body h4 { font-family: var(--an-head-font); }

/* Ancres (tabs fiche) : ne pas passer sous le header sticky */
.an-body [id] { scroll-margin-top: 5rem; }

/* Focus visible cohérent sur tout l'annuaire.
   Les champs de saisie sont exclus : ils portent un focus bleu (identité), défini plus bas. */
.an-body a:focus-visible, .an-body button:focus-visible, .an-body summary:focus-visible {
  outline: 2px solid var(--an-primary);
  outline-offset: 2px;
  border-radius: var(--an-radius);
}

/* Section alternée (fond gris très clair, maquette) */
.an-section--alt { background: var(--an-surface-2); }

/* ── Header ─────────────────────────────────────────────────────────────── */
.an-header {
  position: sticky;
  top: 0;
  z-index: 1020;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--an-border);
}
/* Marque = logo SVG. `flex` (et non inline-flex) évite l'espace fantôme sous l'image. */
.an-brand {
  display: flex;
  align-items: center;
  min-height: 48px;
  flex: none;
  text-decoration: none;
}
.an-brand:hover, .an-brand:focus { text-decoration: none; }
/* Le logo porte ses propres couleurs : hauteur fixe, largeur au ratio. */
.an-brand-logo { display: block; width: auto; height: 40px; }
@media (min-width: 768px) { .an-brand-logo { height: 48px; } }
/* < 768px : le mark carré seul ; le lockup complet devient illisible sous ~140px de large. */
.an-brand-logo--full { display: none; }
.an-brand-logo--mark { height: 40px; }
@media (min-width: 768px) {
  .an-brand-logo--full { display: block; }
  .an-brand-logo--mark { display: none; }
}
.an-navlink {
  color: var(--an-navy);
  font-weight: 500;
  text-decoration: none;
  padding: .25rem .1rem;
}
/* Survol = bleu (identité). L'actif reste rouge et gagne au survol : règle placée après. */
.an-navlink:hover { color: var(--an-blue); }
.an-navlink.is-active, .an-navlink.is-active:hover { color: var(--an-primary); }
.an-lang { display: inline-flex; gap: .25rem; }
.an-lang .an-langbtn {
  min-width: 42px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--an-radius);
  border: 1px solid var(--an-border);
  color: var(--an-navy);
  font-weight: 600;
  text-decoration: none;
}
.an-lang .an-langbtn.is-active { background: var(--an-navy); border-color: var(--an-navy); color: #fff; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.an-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 44px;
  padding: .625rem 1.25rem;
  border-radius: var(--an-radius);
  font-family: var(--an-body-font);
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: filter .15s ease, background .15s ease, color .15s ease, transform .05s ease;
}
.an-btn:active { transform: scale(.98); }
.an-btn--primary { background: var(--an-primary); color: #fff; }
.an-btn--primary:hover { background: var(--an-primary-bright); color: #fff; }
.an-btn--outline { background: transparent; border-color: var(--an-primary); color: var(--an-primary); }
.an-btn--outline:hover { background: var(--an-primary); color: #fff; }
.an-btn--navy { background: var(--an-navy); color: #fff; }
.an-btn--navy:hover { filter: brightness(1.15); color: #fff; }
.an-btn--ghost { background: var(--an-surface-2); color: var(--an-navy); }
.an-btn--ghost:hover { background: #e7ecf7; color: var(--an-navy); }
.an-btn--block { width: 100%; }

/* ── Badges ─────────────────────────────────────────────────────────────── */
.an-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .625rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.2;
}
.an-badge--verified { background: var(--an-amber-soft); color: var(--an-amber); border: 1px solid var(--an-amber-border); }
.an-badge--premium { background: var(--an-amber-soft); color: var(--an-amber); border: 1px solid var(--an-amber-border); }
.an-badge--unclaimed { background: var(--an-surface-2); color: var(--an-muted); }
.an-badge--cat { background: var(--an-surface-2); color: var(--an-navy); text-transform: uppercase; font-size: .6875rem; }
.an-open { display: inline-flex; align-items: center; gap: .35rem; color: var(--an-success); font-weight: 600; font-size: .8125rem; }
.an-open .dot { width: .5rem; height: .5rem; border-radius: 999px; background: var(--an-success); }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.an-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #eef2fb, var(--an-bg));
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.an-hero::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-end: -8%;
  width: 34%;
  background: rgba(var(--an-primary-rgb), .05);
  transform: skewX(-12deg);
  pointer-events: none;
}
.an-badge-official {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--an-primary-soft);
  color: var(--an-primary);
  border: 1px solid rgba(var(--an-primary-rgb), .2);
  padding: .35rem .9rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.an-hero-title {
  font-size: clamp(2rem, 5.5vw, 3.25rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--an-ink);
  margin: 0;
}
.an-hero-title .accent { color: var(--an-primary); }
.an-hero-sub { font-size: 1.0625rem; line-height: 1.6; color: var(--an-muted); max-width: 34rem; }

/* Search card */
.an-search {
  background: var(--an-surface);
  border: 1px solid var(--an-border);
  border-radius: var(--an-radius-lg);
  box-shadow: var(--an-shadow-lg);
  padding: .5rem;
  display: grid;
  gap: .5rem;
  grid-template-columns: 1fr;
}
.an-search .an-search-field {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem .75rem;
  border-radius: var(--an-radius);
}
.an-search .an-search-field svg { color: var(--an-muted); flex: none; }
.an-search .form-control,
.an-search .form-select {
  border: none;
  box-shadow: none;
  padding-inline: 0;
  min-height: 46px;
  background: transparent;
}
/* Le champ nu ne montre rien : c'est son conteneur .an-search-field qui porte l'anneau
   (le champ est sans bordure dans la carte de recherche). */
.an-search .form-control:focus,
.an-search .form-select:focus { box-shadow: none; outline: none; }
.an-search .an-search-field:focus-within {
  border-radius: var(--an-radius);
  box-shadow: 0 0 0 3px rgba(var(--an-blue-rgb), .14);
}
@media (min-width: 768px) {
  .an-search { grid-template-columns: 1.3fr 1fr 1fr auto; align-items: center; }
  .an-search .an-search-field { border-inline-end: 1px solid var(--an-border); border-radius: 0; }
}

/* Hero stats */
.an-stats { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.an-stat { display: flex; flex-direction: column; }
.an-stat + .an-stat { padding-inline-start: 1.5rem; border-inline-start: 1px solid var(--an-border); }
.an-stat .num { font-family: var(--an-head-font); font-size: 1.75rem; font-weight: 800; color: var(--an-navy); }
.an-stat .lbl { font-size: .8125rem; color: var(--an-muted); }

/* ── Sections ───────────────────────────────────────────────────────────── */
.an-section { padding-block: clamp(2rem, 5vw, 3.5rem); }
.an-section-title { font-size: clamp(1.5rem, 3.5vw, 2rem); font-weight: 800; letter-spacing: -.01em; color: var(--an-ink); margin: 0 0 .5rem; }
.an-section-sub { color: var(--an-muted); max-width: 40rem; }

/* Governorate cards */
.an-gov-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  height: 100%;
  padding: 1rem 1.25rem;
  background: var(--an-surface);
  border: 1px solid var(--an-border);
  border-radius: var(--an-radius-lg);
  color: var(--an-ink);
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.an-gov-card:hover, .an-gov-card:focus {
  color: var(--an-ink);
  text-decoration: none;
  transform: translateY(-2px);
  border-color: var(--an-blue);
  box-shadow: var(--an-shadow);
}
.an-gov-card .name { font-weight: 600; }
/* Compteur = information de lieu, pas une action : teinte bleue du logo. 5,3:1. */
.an-gov-count { background: var(--an-blue-tint); color: var(--an-blue-dark); font-weight: 700; font-size: .8125rem; padding: .2rem .7rem; border-radius: 999px; flex: none; }

/* ── Fiche cards (listes) ───────────────────────────────────────────────── */
.an-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--an-surface);
  border: 1px solid var(--an-border);
  border-radius: var(--an-radius-lg);
  padding: 1.25rem;
  box-shadow: var(--an-shadow);
  transition: transform .16s ease, box-shadow .16s ease;
}
.an-card:hover, .an-card:focus-within { transform: translateY(-3px); box-shadow: var(--an-shadow-lg); }
.an-card--premium { border-top: 3px solid var(--an-navy); }
.an-card-title { font-size: 1.125rem; font-weight: 700; margin: 0; }
.an-card-title a { color: var(--an-ink); text-decoration: none; }
.an-card-title a:hover { color: var(--an-primary); }
.an-card-meta { display: flex; align-items: center; gap: .35rem; color: var(--an-muted); font-size: .875rem; }
.an-card-meta svg { flex: none; }
.an-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.an-card-foot { margin-top: auto; padding-top: 1rem; }

/* ── Fiche détail ───────────────────────────────────────────────────────── */
.an-panel { background: var(--an-surface); border: 1px solid var(--an-border); border-radius: var(--an-radius-lg); box-shadow: var(--an-shadow); }
.an-panel-head { padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--an-border); }
.an-panel-title { font-size: 1.125rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: .5rem; }
.an-panel-title svg { color: var(--an-primary); }
.an-panel-body { padding: 1.25rem; }
.an-fiche-title { font-size: clamp(1.6rem, 4vw, 2.25rem); font-weight: 800; letter-spacing: -.01em; margin: 0; }
.an-dl dt { color: var(--an-muted); font-weight: 500; }
.an-dl dd { font-weight: 500; }
.an-hours { width: 100%; }
.an-hours th { font-weight: 500; color: var(--an-muted); text-align: start; padding: .35rem 0; }
.an-hours td { text-align: end; padding: .35rem 0; font-weight: 600; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.an-footer { background: var(--an-navy); color: #cdd5e6; }
.an-footer a { color: #cdd5e6; text-decoration: none; }
.an-footer a:hover { color: #fff; text-decoration: underline; }
.an-footer .an-footer-brand { color: #fff; font-weight: 800; font-family: var(--an-head-font); }

/* ── CTA band ───────────────────────────────────────────────────────────── */
.an-cta-band {
  background: linear-gradient(120deg, var(--an-navy), #1b2f6b);
  color: #fff;
  border-radius: var(--an-radius-xl);
  padding: clamp(1.75rem, 4vw, 3rem);
}
.an-cta-band h2 { color: #fff; font-weight: 800; }
.an-cta-band p { color: #c8d2ea; }
.an-cta-band--primary { background: linear-gradient(120deg, var(--an-primary-dark), var(--an-primary)); }
.an-cta-band--primary p { color: var(--an-primary-on-dark-soft); }

/* ── Empty state ────────────────────────────────────────────────────────── */
.an-empty { text-align: center; padding: 3rem 1rem; background: var(--an-surface); border: 1px dashed var(--an-border); border-radius: var(--an-radius-lg); }
.an-empty .title { font-weight: 700; font-size: 1.125rem; }
.an-empty .sub { color: var(--an-muted); }

/* ── Carte (Leaflet) ────────────────────────────────────────────────────── */
.an-viewtoggle { display: inline-flex; border: 1px solid var(--an-border); border-radius: var(--an-radius); overflow: hidden; background: var(--an-surface); }
.an-viewtoggle button { min-height: 40px; padding: .4rem 1.1rem; border: none; background: transparent; color: var(--an-navy); font-weight: 600; cursor: pointer; }
.an-viewtoggle button.is-active { background: var(--an-navy); color: #fff; }
.an-map-wrap { border: 1px solid var(--an-border); border-radius: var(--an-radius-lg); overflow: hidden; box-shadow: var(--an-shadow); }
.an-map { height: min(70vh, 560px); width: 100%; }
.leaflet-popup-content a { color: var(--an-primary); font-weight: 600; text-decoration: none; }

/* ── Accessibilité : mouvement réduit (checklist a11y) ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  .an-body *, .an-body *::before, .an-body *::after {
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .an-card:hover, .an-card:focus-within, .an-gov-card:hover, .an-gov-card:focus { transform: none; }
}

/* Fiche — photo principale (bannière) */
.an-fiche-photo { display: block; width: 100%; max-height: 300px; object-fit: cover; border-start-start-radius: var(--an-radius-lg); border-start-end-radius: var(--an-radius-lg); }

/* ── Alertes (statut) ─────────────────────────────────────────────────── */
.an-alert { display: flex; align-items: center; gap: .625rem; padding: .875rem 1.125rem; border-radius: var(--an-radius); border: 1px solid var(--an-border); background: var(--an-surface); color: var(--an-ink); font-weight: 500; }
.an-alert svg { flex: none; }
.an-alert--success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }

/* ── Signaler une fiche (disclosure natif, sans JS) ───────────────────── */
.an-report { border: 1px solid var(--an-border); border-radius: var(--an-radius-lg); background: var(--an-surface); box-shadow: var(--an-shadow); overflow: hidden; }
.an-report-toggle { display: flex; align-items: center; gap: .5rem; padding: 1rem 1.25rem; font-family: var(--an-head-font); font-weight: 700; color: var(--an-navy); cursor: pointer; list-style: none; }
.an-report-toggle::-webkit-details-marker { display: none; }
.an-report-toggle:hover { color: var(--an-primary); }
.an-report-toggle svg { flex: none; color: var(--an-primary); }
.an-report[open] .an-report-toggle { border-bottom: 1px solid var(--an-border); }
.an-report-body { padding: 1.25rem; }
.an-report-intro { color: var(--an-muted); margin-block: 0 1rem; }
.an-report-form { display: grid; gap: 1rem; max-width: 34rem; }

/* ── Champs de formulaire « an » (design public) ──────────────────────── */
.an-field { display: grid; gap: .375rem; }
.an-label { font-weight: 600; color: var(--an-navy); font-size: .9375rem; }
.an-input { width: 100%; min-height: 44px; padding: .5rem .75rem; border: 1px solid var(--an-border); border-radius: var(--an-radius); background: var(--an-surface); color: var(--an-ink); font: inherit; transition: border-color .15s ease, box-shadow .15s ease; }
/* Focus des champs = bleu (identité), anneau doux plutôt qu'un outline dur. */
.an-input:focus { outline: none; border-color: var(--an-blue); box-shadow: 0 0 0 3px rgba(var(--an-blue-rgb), .14); }
textarea.an-input { min-height: 5.5rem; resize: vertical; }

/* Honeypot anti-bot — retiré du flux et des lecteurs d'écran */
.an-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Fiche premium : description enrichie + galerie (§2.7) ─────────────── */
.an-fiche-desc { color: var(--an-ink); line-height: 1.7; margin-block: 0 1rem; white-space: normal; }
.an-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .75rem; }
.an-gallery-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--an-radius); border: 1px solid var(--an-border); background: var(--an-surface-2); }

/* ═══ Refonte maquette — fiche école ══════════════════════════════════════ */

/* Fil d'Ariane */
.an-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .875rem; color: var(--an-muted); }
.an-breadcrumb a { color: var(--an-navy); text-decoration: none; font-weight: 500; }
.an-breadcrumb a:hover { color: var(--an-primary); }
.an-breadcrumb [aria-current] { color: var(--an-muted); }

/* Bloc principal : média + identité */
.an-fichehero { display: grid; grid-template-columns: 1fr; overflow: hidden; }
@media (min-width: 992px) { .an-fichehero { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.an-fichehero-media { padding: 1rem; padding-inline-end: 1rem; display: flex; flex-direction: column; gap: .5rem; }
@media (min-width: 992px) { .an-fichehero-media { padding-inline-end: 0; } }
.an-media { position: relative; display: block; border-radius: var(--an-radius-lg); overflow: hidden; background: var(--an-surface-2); aspect-ratio: 4 / 3; }
.an-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.an-media-count {
  position: absolute; inset-block-end: .6rem; inset-inline-start: .6rem;
  display: inline-flex; align-items: center; gap: .35rem;
  background: rgba(var(--an-navy-rgb), .82); color: #fff;
  padding: .3rem .7rem; border-radius: 999px; font-size: .75rem; font-weight: 600;
}
.an-monogram { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--an-navy), #2a3c7d); }
.an-monogram span { font-family: var(--an-head-font); font-size: clamp(3rem, 8vw, 5rem); font-weight: 800; color: rgba(255, 255, 255, .9); }
.an-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.an-thumbs a { display: block; border-radius: var(--an-radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--an-surface-2); }
.an-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.an-fichehero-body { padding: 1.25rem; }
@media (min-width: 992px) { .an-fichehero-body { padding: 1.75rem; } }
.an-fichehero-desc { color: var(--an-muted); line-height: 1.6; margin-block: 0 1rem; }

/* Liste de contact iconée */
.an-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.an-contact li { display: flex; align-items: center; gap: .6rem; min-height: 28px; }
.an-contact svg { color: var(--an-primary); flex: none; }
.an-contact .lbl { color: var(--an-muted); font-size: .875rem; min-width: 5.5rem; }
.an-contact .val { color: var(--an-ink); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.an-contact a.val:hover { color: var(--an-primary); }
.an-contact-reveal {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--an-primary); font: inherit; font-weight: 700; text-decoration: underline;
}
.an-contact-reveal:hover { color: var(--an-primary-dark); }

/* Statut fermé (variante du .an-open existant) */
.an-open--closed { color: var(--an-muted); }
.an-open--closed .dot { background: var(--an-muted); }

/* Tabs-ancres */
.an-tabs { display: flex; gap: .25rem; overflow-x: auto; border-bottom: 2px solid var(--an-border); scrollbar-width: none; }
.an-tabs::-webkit-scrollbar { display: none; }
.an-tabs a {
  flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 1rem;
  color: var(--an-muted); font-weight: 600; text-decoration: none;
  border-bottom: 2px solid transparent; margin-block-end: -2px;
}
.an-tabs a:hover { color: var(--an-navy); }
.an-tabs a.is-active { color: var(--an-primary); border-color: var(--an-primary); }

/* Permis proposés */
.an-permis-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .75rem; }
.an-permis-card {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem;
  padding: 1rem .75rem; border: 1px solid var(--an-border); border-radius: var(--an-radius-lg);
  background: var(--an-surface);
}
.an-permis-card .an-permis-ico { color: var(--an-primary); }
.an-permis-card .code { font-family: var(--an-head-font); font-weight: 800; color: var(--an-navy); }
.an-permis-card .libelle { font-size: .8125rem; color: var(--an-muted); line-height: 1.3; }

/* Informations pratiques */
.an-practical { display: grid; gap: .7rem; }
.an-practical > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.an-practical dt { color: var(--an-muted); font-weight: 500; font-size: .875rem; }
.an-practical dd { margin: 0; font-weight: 600; text-align: end; }

/* Horaires : jour courant */
.an-hours tr.is-today th, .an-hours tr.is-today td { color: var(--an-primary); font-weight: 700; }
.an-hours .an-today { font-size: .75rem; font-weight: 700; }

/* Mini-carte */
.an-minimap-panel { overflow: hidden; }
.an-minimap { height: 220px; background: var(--an-surface-2); }

/* Bandeau propriétaire */
.an-owner-band {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  background: var(--an-surface); border: 1px solid var(--an-border); border-inline-start: 4px solid var(--an-primary);
  border-radius: var(--an-radius-lg); padding: 1.25rem 1.5rem; box-shadow: var(--an-shadow);
}
.an-owner-band .title { font-family: var(--an-head-font); font-weight: 800; font-size: 1.125rem; color: var(--an-navy); }
.an-owner-band p { color: var(--an-muted); }

/* Barre d'action mobile collante */
.an-actionbar {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 1030;
  display: flex; gap: .5rem; padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); border-top: 1px solid var(--an-border);
}
@media (max-width: 767.98px) { .an-body:has(.an-actionbar) { padding-block-end: 4.5rem; } }

/* Lightbox sobre */
.an-lightbox {
  position: fixed; inset: 0; z-index: 1050;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 14, 30, .88); padding: 1.5rem;
}
.an-lightbox img { max-width: 100%; max-height: 92vh; border-radius: var(--an-radius); }
.an-lightbox-close {
  position: absolute; inset-block-start: 1rem; inset-inline-end: 1rem;
  width: 44px; height: 44px; border-radius: 999px; border: none; cursor: pointer;
  background: rgba(255, 255, 255, .14); color: #fff; font-size: 1.5rem; line-height: 1;
}
.an-lightbox-close:hover { background: rgba(255, 255, 255, .28); }

/* État vide (picto) */
.an-empty-ico { color: var(--an-muted); margin-block-end: .5rem; }

/* ═══ Refonte maquette — accueil ══════════════════════════════════════════ */

/* Header : bouton icône (recherche mobile) + CTA */
.an-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--an-radius);
  color: var(--an-navy); text-decoration: none;
}
.an-iconbtn:hover { color: var(--an-primary); background: var(--an-surface-2); }
.an-header-cta { min-height: 40px; padding: .45rem 1rem; font-size: .9375rem; }

/* Héro photo */
.an-hero--photo { background: var(--an-navy); padding-block: clamp(3.5rem, 9vw, 7rem) clamp(4.5rem, 10vw, 8rem); }
.an-hero--photo::after { display: none; }
.an-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
/* RTL : image héro DÉDIÉE servie par la vue (hero-ar-*.webp) — pas de miroir CSS
   (le panneau « AUTO-ÉCOLE » de la photo serait en lettres inversées). */
.an-hero-veil {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10, 16, 38, .78) 0%, rgba(10, 16, 38, .45) 55%, rgba(10, 16, 38, .18) 100%);
}
[dir="rtl"] .an-hero-veil { background: linear-gradient(-90deg, rgba(10, 16, 38, .78) 0%, rgba(10, 16, 38, .45) 55%, rgba(10, 16, 38, .18) 100%); }
/* Mobile : texte + photo saturaient — voile couvrant uniforme, badge masqué, typo resserrée */
@media (max-width: 767.98px) {
  .an-hero--photo { padding-block: 2.25rem 3.75rem; }
  .an-hero-veil, [dir="rtl"] .an-hero-veil {
    background: linear-gradient(180deg, rgba(10, 16, 38, .84) 0%, rgba(10, 16, 38, .62) 100%);
  }
  .an-hero--photo .an-badge-official { display: none; }
  .an-hero--photo .an-hero-title { font-size: 1.75rem; }
  .an-hero--photo .an-hero-sub { font-size: .9375rem; max-width: 30rem; }
}
.an-hero-inner { position: relative; z-index: 1; }
.an-hero--photo .an-hero-title { color: #fff; text-shadow: 0 2px 14px rgba(10, 16, 38, .45); }
.an-hero--photo .an-hero-title .accent { color: var(--an-primary-on-dark); }
.an-hero--photo .an-hero-sub { color: #e6ebf7; text-shadow: 0 1px 8px rgba(10, 16, 38, .5); }
.an-hero--photo .an-badge-official { background: rgba(255, 255, 255, .93); }

/* Bande recherche flottante : chevauche le bas du héro */
.an-searchband { position: relative; z-index: 2; margin-block-start: -3.25rem; }
.an-search-lbl { font-size: .75rem; font-weight: 700; color: var(--an-muted); text-transform: uppercase; letter-spacing: .03em; padding-inline: .75rem; }
.an-search .an-search-field { display: flex; flex-direction: column; gap: 0; padding: .35rem 0; }
.an-search-row { display: flex; align-items: center; gap: .5rem; padding-inline: .75rem; }
.an-search-row svg { color: var(--an-muted); flex: none; }
/* Pin « Où ? » : seule icône de lieu de la barre → bleu identité.
   Sélecteur préfixé .an-search pour passer devant `.an-search .an-search-field svg`. */
.an-search .an-search-row--geo svg { color: var(--an-blue); }
.an-search-submit { margin: .25rem; }
@media (min-width: 768px) {
  .an-search { grid-template-columns: 1.4fr 1fr 1fr auto; }
  .an-search .an-search-field { border-inline-end: 1px solid var(--an-border); border-radius: 0; }
  .an-search .an-search-field:nth-last-of-type(1) { border-inline-end: none; }
  .an-search-submit { align-self: center; }
}

/* Bandeau stats icônées */
.an-statband {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
}
@media (min-width: 768px) { .an-statband { grid-template-columns: repeat(4, 1fr); } }
.an-statitem {
  display: flex; align-items: center; gap: .75rem;
  background: var(--an-surface); border: 1px solid var(--an-border); border-radius: var(--an-radius-lg);
  padding: .9rem 1.1rem; box-shadow: var(--an-shadow);
}
.an-statitem svg { color: var(--an-primary); flex: none; }
/* Stat « gouvernorats » = repère géographique → bleu, comme les autres pins. */
.an-statitem--geo svg { color: var(--an-blue); }
.an-statitem .num { display: block; font-family: var(--an-head-font); font-size: 1.4rem; font-weight: 800; color: var(--an-navy); line-height: 1.1; }
.an-statitem .lbl { font-size: .8125rem; color: var(--an-muted); }

/* Grille gouvernorats (hybride avec la carte) */
.an-govgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; height: 100%; }
@media (min-width: 1200px) { .an-govgrid { grid-template-columns: repeat(3, 1fr); } }
.an-govcard {
  display: flex; align-items: center; gap: .65rem; min-height: 56px;
  padding: .55rem .8rem; background: var(--an-surface);
  border: 1px solid var(--an-border); border-radius: var(--an-radius-lg);
  color: var(--an-ink); text-decoration: none;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
/* Survol bleu : le fond teinté suit la bordure (un liseré bleu sur fond rouge jurait). */
.an-govcard:hover, .an-govcard:focus {
  border-color: var(--an-blue); background: var(--an-blue-tint);
  color: var(--an-ink); text-decoration: none; transform: translateY(-1px);
}
.an-govcard-ico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; color: var(--an-navy); flex: none; }
.an-govcard-ico svg { width: 30px; height: 30px; }
.an-govcard:hover .an-govcard-ico, .an-govcard:focus .an-govcard-ico { color: var(--an-blue-dark); }
.an-govcard-txt { display: flex; flex-direction: column; min-width: 0; }
.an-govcard-txt .name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-govcard-txt .count { font-size: .78rem; color: var(--an-muted); }

/* Bénéfices */
.an-why {
  height: 100%; text-align: center; padding: 1.75rem 1.5rem;
  background: var(--an-surface); border: 1px solid var(--an-border);
  border-radius: var(--an-radius-lg); box-shadow: var(--an-shadow);
}
.an-why svg { color: var(--an-primary); margin-block-end: .75rem; }
.an-why h3 { font-size: 1.0625rem; font-weight: 800; color: var(--an-navy); margin-block-end: .35rem; }
.an-why p { color: var(--an-muted); font-size: .9375rem; margin: 0; line-height: 1.55; }

/* CTA : largeur mini du texte (remplace le style inline) */
.an-cta-txt { min-width: 16rem; }

/* Footer riche */
.an-footer-mission { max-width: 26rem; }
.an-social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 999px;
  background: rgba(255, 255, 255, .08); color: #cdd5e6;
}
.an-social:hover { background: var(--an-primary); color: #fff; }

/* ═══ Refonte maquette — cartes de liste ══════════════════════════════════ */
.an-card--list { padding: 0; overflow: hidden; }
.an-card-media { position: relative; height: 132px; background: linear-gradient(135deg, var(--an-navy), #2a3c7d); display: flex; align-items: center; justify-content: center; }
.an-card-media img { width: 100%; height: 100%; object-fit: cover; }
.an-card-monogram { font-family: var(--an-head-font); font-size: 2.6rem; font-weight: 800; color: rgba(255, 255, 255, .9); }
.an-card-flag { position: absolute; inset-block-start: .6rem; inset-inline-start: .6rem; }
.an-card--list .an-card-body { display: flex; flex-direction: column; flex: 1; padding: 1rem 1.1rem 1.1rem; }
.an-card-metaline { min-height: 24px; }
/* Carte entière cliquable — stretched-link accessible (un seul lien, le titre) */
.an-card-link { color: var(--an-ink); text-decoration: none; }
.an-card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.an-card--list:hover .an-card-link, .an-card--list:focus-within .an-card-link { color: var(--an-primary); }
.an-card-cta {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--an-primary); font-weight: 700; font-size: .9375rem;
}
.an-card--list:hover .an-arrow { transform: translateX(3px); }
[dir="rtl"] .an-arrow { transform: scaleX(-1); }
[dir="rtl"] .an-card--list:hover .an-arrow { transform: scaleX(-1) translateX(3px); }
.an-arrow { transition: transform .15s ease; }
.an-card--premium.an-card--list { border-top: 3px solid var(--an-amber-border); }

/* Skeleton shimmer : la carte Leaflet pendant le fetch (bascule Liste→Carte) */
.an-map:empty {
  background: linear-gradient(100deg, var(--an-surface-2) 40%, #e7ecf7 50%, var(--an-surface-2) 60%);
  background-size: 200% 100%;
  animation: an-shimmer 1.2s ease-in-out infinite;
}
@keyframes an-shimmer { to { background-position-x: -200%; } }
@media (prefers-reduced-motion: reduce) { .an-map:empty { animation: none; } }