/* ══════════════════════════════════════════════════════════════
   AMOLOTO · COMPOSANTS
   ══════════════════════════════════════════════════════════════ */

/* ─── Header ─────────────────────────────────────────────────── */
.am-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  height: var(--am-header-h);
  display: flex; align-items: center;
  background: transparent;
  transition: background-color .25s ease, box-shadow .25s ease, border-color .25s ease;
  border-bottom: 1px solid transparent;
}
.am-header.is-solid {
  background: rgba(7, 27, 54, .96);
  border-bottom-color: rgba(247,248,250,.1);
  box-shadow: 0 8px 24px -18px rgba(0,0,0,.5);
}
.am-header--onLight { background: var(--am-navy-900); border-bottom-color: rgba(247,248,250,.1); }
.am-header__inner { display: flex; align-items: center; gap: var(--am-s6); width: 100%; }
.am-logo { display: flex; align-items: center; gap: var(--am-s3); flex-shrink: 0; }
.am-logo img { height: 30px; width: auto; }
.am-nav { display: flex; align-items: center; gap: var(--am-s6); margin-right: auto; margin-left: var(--am-s7); }
.am-nav__link {
  font-size: .92rem; font-weight: 600; color: rgba(247,248,250,.82);
  position: relative; padding: 6px 0;
}
.am-nav__link:hover { color: var(--am-cream-50); }
.am-nav__link[aria-current="page"] { color: var(--am-cream-50); font-weight: 700; box-shadow: inset 0 -2px 0 var(--am-gold-500); }
.am-header__actions { display: flex; align-items: center; gap: var(--am-s5); }
.am-header__phone {
  display: flex; align-items: center; gap: var(--am-s2); color: var(--am-cream-50);
  font-weight: 700; font-size: .92rem;
}
.am-header__phone svg { width: 16px; height: 16px; color: var(--am-gold-400, var(--am-gold-500)); flex-shrink: 0; }
.am-hamburger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; background: none; border: none; padding: 0;
}
.am-hamburger__bar { width: 22px; height: 2px; background: var(--am-cream-50); border-radius: 2px; }
.am-mobile-nav {
  display: none; position: fixed; inset: var(--am-header-h) 0 0 0; z-index: 480;
  background: var(--am-navy-900); padding: var(--am-s7) var(--am-s6);
  flex-direction: column; gap: var(--am-s6); overflow-y: auto;
}
.am-mobile-nav.is-open { display: flex; }
.am-mobile-nav__link { font-family: var(--am-sans); font-weight: 700; font-size: 1.35rem; color: var(--am-cream-50); }
.am-mobile-nav__phones { display: flex; flex-direction: column; gap: var(--am-s3); margin-top: var(--am-s5); }
.am-mobile-nav__phones a { color: var(--am-gold-300); font-weight: 700; font-size: 1.05rem; }

/* ─── Sélecteur de langue FR/EN ──────────────────────────────────
   Discret, présent dans le header desktop, le menu mobile et le
   header du tunnel de réservation. Une page = son équivalent exact
   dans l'autre langue (index.html <-> en/index.html). */
.am-lang-switch { display: flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 700; letter-spacing: .02em; flex-shrink: 0; }
.am-lang-switch a { color: rgba(247,248,250,.5); }
.am-lang-switch a:hover { color: var(--am-cream-50); }
.am-lang-switch .is-active { color: var(--am-cream-50); box-shadow: inset 0 -2px 0 var(--am-gold-500); padding-bottom: 2px; }
.am-lang-switch__sep { color: rgba(247,248,250,.28); }
.am-lang-switch--mobile { margin-top: var(--am-s5); font-size: .95rem; }
.am-lang-switch--mobile a { color: var(--am-gold-300); }
.am-lang-switch--mobile .is-active { color: var(--am-cream-50); box-shadow: none; padding-bottom: 0; }

/* ─── Hero ───────────────────────────────────────────────────── */
.am-hero {
  position: relative; min-height: 100svh; display: flex; align-items: flex-end;
  background: var(--am-navy-950); overflow: hidden; padding-top: var(--am-header-h);
}
.am-hero__media { position: absolute; inset: 0; z-index: 0; }
.am-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
.am-hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(4,16,31,.55) 0%, rgba(4,16,31,.35) 32%, rgba(4,16,31,.55) 68%, rgba(4,16,31,.96) 100%);
}
.am-hero__body { position: relative; z-index: 2; width: 100%; padding-bottom: var(--am-s8); }
.am-hero__content { max-width: 780px; padding-top: var(--am-s8); }
.am-hero h1 { color: var(--am-cream-50); }
.am-hero h1 em { font-style: normal; font-weight: 800; color: var(--am-gold-300); }
.am-hero .am-lede { color: rgba(247,248,250,.86); margin-top: var(--am-s4); }
.am-hero__ctas { display: flex; gap: var(--am-s4); margin-top: var(--am-s6); flex-wrap: wrap; }

/* Billet de réservation, ancré en bas du hero : instrument compact
   façon carte d'embarquement (perforation pointillée = motif route). */
.am-ticket {
  position: relative; margin-top: var(--am-s8); background: var(--am-cream-50);
  border-radius: var(--am-radius); box-shadow: var(--am-shadow);
  display: grid; grid-template-columns: repeat(3, 1fr) auto; overflow: hidden;
}
.am-ticket__field {
  padding: var(--am-s5) var(--am-s6); border-right: 1px solid var(--am-line);
  display: flex; flex-direction: column; gap: 6px;
}
.am-ticket__field:last-of-type { border-right: none; }
.am-ticket__label {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--am-ink-500);
}
.am-ticket__field select, .am-ticket__field input {
  border: none; background: none; padding: 0; font-family: var(--am-sans);
  font-size: 1.05rem; font-weight: 700; color: var(--am-ink-900); width: 100%;
}
.am-ticket__field select:focus, .am-ticket__field input:focus { outline: none; }
.am-ticket__submit {
  background: var(--am-gold-500); color: var(--am-navy-950); border: none;
  padding: 0 var(--am-s7); font-weight: 800; font-size: .95rem; display: flex;
  align-items: center; gap: var(--am-s2);
}
.am-ticket__submit:hover { background: var(--am-gold-600); }

/* ─── Bande de faits (fact strip, pas de cards à checkmarks) ──── */
.am-facts { background: var(--am-navy-900); color: var(--am-cream-50); }
.am-facts__row {
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.am-facts__item {
  padding: var(--am-s7) var(--am-s5); border-left: 1px solid var(--am-line-dark);
  display: flex; flex-direction: column; gap: var(--am-s2);
}
.am-facts__item:first-child { border-left: none; }
.am-facts__num { font-family: var(--am-sans); font-weight: 800; font-size: 2rem; letter-spacing: -0.02em; color: var(--am-cream-50); line-height: 1; font-variant-numeric: tabular-nums; }
.am-facts__label { font-size: .92rem; color: rgba(247,248,250,.82); line-height: 1.45; }

/* ─── Index éditorial de flotte (home) ─────────────────────────── */
.am-fleet-index__row {
  display: grid; grid-template-columns: 64px 140px 1fr auto auto; align-items: center;
  gap: var(--am-s6); padding: var(--am-s5) 0; border-bottom: 1px solid var(--am-line);
}
.am-fleet-index__row:first-child { border-top: 1px solid var(--am-line); }
.am-fleet-index__no { font-family: var(--am-sans); font-weight: 800; font-size: 1rem; color: var(--am-navy-700); font-variant-numeric: tabular-nums; }
.am-fleet-index__photo { width: 140px; height: 93px; aspect-ratio: 3/2; object-fit: contain; background: #fff; border-radius: var(--am-radius-sm); padding: var(--am-s2); }
.am-fleet-index__info h3 { margin-bottom: 4px; }
.am-fleet-index__meta { display: flex; gap: var(--am-s4); flex-wrap: wrap; font-size: .85rem; color: var(--am-fg-muted); }
.am-fleet-index__price { text-align: right; font-family: var(--am-sans); font-weight: 700; font-size: 1.4rem; letter-spacing: -0.01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.am-fleet-index__price span { display: block; font-family: var(--am-sans); font-size: .68rem; font-weight: 600; color: var(--am-fg-muted); text-transform: uppercase; letter-spacing: .06em; }

/* ─── Catalogue complet (vehicules.html) ───────────────────────── */
.am-fleet-cat__group { margin-bottom: var(--am-s9); }
.am-fleet-cat__group-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--am-s5); margin-bottom: var(--am-s6); flex-wrap: wrap; }
.am-fleet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--am-s6); }
.am-car {
  background: #fff; border: 1px solid var(--am-line); border-radius: var(--am-radius);
  overflow: hidden; display: flex; flex-direction: column;
}
/* Boîte média à hauteur fixée par l'image elle-même (aspect-ratio sur l'img,
   pas sur le conteneur) : un aspect-ratio posé sur un conteneur flex-item
   peut être ignoré (le flex-item grandit selon son contenu, min-height:auto
   par défaut), ce qui laissait l'image occuper toute sa hauteur source. */
.am-car__media { background: #fff; padding: var(--am-s5); display: flex; align-items: center; justify-content: center; min-height: 0; }
.am-car__media img { width: 100%; aspect-ratio: 3/2; object-fit: contain; }
.am-car__body { padding: var(--am-s5) var(--am-s6) var(--am-s6); display: flex; flex-direction: column; gap: var(--am-s3); flex: 1; }
.am-car__cat { color: var(--am-navy-700); font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.am-car__name { font-size: 1.2rem; }
.am-car__similar { font-size: .82rem; color: var(--am-fg-muted); margin-top: -4px; }
.am-car__specs { display: flex; flex-wrap: wrap; gap: var(--am-s2) var(--am-s4); font-size: .82rem; color: var(--am-ink-700); margin-top: 2px; }
.am-car__specs span { display: inline-flex; align-items: center; gap: 5px; }
.am-car__desc { font-size: .9rem; color: var(--am-ink-700); line-height: 1.55; }
.am-car__details { font-size: .87rem; color: var(--am-ink-700); }
.am-car__details summary { cursor: pointer; font-weight: 700; color: var(--am-navy-800); list-style: none; }
.am-car__details summary::-webkit-details-marker { display: none; }
.am-car__details summary::after { content: '+'; float: right; font-family: var(--am-serif); }
.am-car__details[open] summary::after { content: '−'; }
.am-car__details ul { margin-top: var(--am-s3); display: flex; flex-direction: column; gap: 6px; padding-left: 0; }
.am-car__details li { padding-left: var(--am-s4); position: relative; }
.am-car__details li::before { content: '·'; position: absolute; left: 0; color: var(--am-navy-700); }
.am-car__foot { margin-top: auto; padding-top: var(--am-s4); border-top: 1px solid var(--am-line); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--am-s3); }
.am-car__price { font-family: var(--am-sans); font-weight: 800; font-size: 1.55rem; letter-spacing: -0.01em; line-height: 1; font-variant-numeric: tabular-nums; }
.am-car__price span { display: block; font-family: var(--am-sans); font-size: .66rem; font-weight: 600; color: var(--am-fg-muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 3px; }
.am-car__note { font-size: .7rem; color: var(--am-ink-300); margin-top: 2px; }
.am-car__reassure { font-size: .72rem; color: var(--am-fg-muted); margin-top: 8px; }

/* ─── Zones de livraison (photo annotée) ────────────────────────── */
.am-zones { display: grid; grid-template-columns: 1fr 1fr; gap: var(--am-s8); align-items: center; }
.am-zones__photo { position: relative; border-radius: var(--am-radius); overflow: hidden; box-shadow: var(--am-shadow-sm); }
.am-zones__photo img { width: 100%; aspect-ratio: 4/3.1; object-fit: cover; }
.am-zones__pin {
  position: absolute; display: flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 700;
  color: var(--am-navy-950); background: var(--am-cream-50); padding: 6px 12px 6px 8px; border-radius: var(--am-radius-sm); box-shadow: var(--am-shadow-sm);
}
.am-zones__pin::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--am-gold-500); flex-shrink: 0; }
.am-zones__list { display: flex; flex-direction: column; }
.am-zones__item { display: flex; gap: var(--am-s5); padding: var(--am-s5) 0; border-bottom: 1px solid var(--am-line); }
.am-zones__item:first-child { padding-top: 0; }
.am-zones__item-num { font-family: var(--am-sans); font-weight: 800; color: var(--am-navy-700); font-size: 1rem; font-variant-numeric: tabular-nums; }

/* ─── Conseils / articles (teaser + article) ───────────────────── */
.am-post-teaser { display: grid; grid-template-columns: 260px 1fr; gap: var(--am-s6); padding: var(--am-s6) 0; border-bottom: 1px solid var(--am-line); align-items: center; }
.am-post-teaser:first-child { border-top: 1px solid var(--am-line); }
.am-post-teaser__img { border-radius: var(--am-radius-sm); overflow: hidden; aspect-ratio: 4/3; }
.am-post-teaser__img img { width: 100%; height: 100%; object-fit: cover; }
.am-post-teaser__date { font-size: .78rem; color: var(--am-fg-muted); text-transform: uppercase; letter-spacing: .06em; }
.am-article__head { max-width: 760px; }
.am-article__hero { border-radius: var(--am-radius); overflow: hidden; margin: var(--am-s7) 0; box-shadow: var(--am-shadow-sm); }
.am-article__hero img { width: 100%; aspect-ratio: 16/8; object-fit: cover; }
.am-article__body { max-width: 720px; display: flex; flex-direction: column; gap: var(--am-s5); }
/* Seule touche éditoriale Fraunces conservée du territoire d'origine :
   les titres de contenu long (guides de voyage, conseils), jamais l'UI
   transactionnelle (formulaires, prix, navigation). */
.am-article__body h2, .am-article__body h3 { font-family: var(--am-serif); font-weight: 600; letter-spacing: -0.01em; }
.am-article__body h2 { margin-top: var(--am-s5); }
.am-article__body h3 { margin-top: var(--am-s4); }
.am-article__body p { color: var(--am-ink-700); line-height: 1.7; }
.am-article__body ul { display: flex; flex-direction: column; gap: 10px; }
.am-article__body ul li { padding-left: var(--am-s5); position: relative; color: var(--am-ink-700); }
.am-article__body ul li::before { content: '·'; position: absolute; left: 0; color: var(--am-navy-700); }
.am-callout {
  background: var(--am-cream-100); border-left: 3px solid var(--am-gold-500);
  padding: var(--am-s5) var(--am-s6); border-radius: 0 var(--am-radius-sm) var(--am-radius-sm) 0;
  font-size: .95rem;
}
.am-callout strong { color: var(--am-navy-800); }
.am-day-card { border: 1px solid var(--am-line); border-radius: var(--am-radius); padding: var(--am-s6); display: flex; flex-direction: column; gap: var(--am-s3); }
.am-day-card__meta { font-size: .78rem; color: var(--am-navy-700); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.am-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.am-table th, .am-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--am-line); }
.am-table th { font-family: var(--am-sans); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--am-fg-muted); }
.am-beach-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

/* ─── FAQ accordéon ─────────────────────────────────────────────── */
.am-faq__item { border-bottom: 1px solid var(--am-line); }
.am-faq__item:first-child { border-top: 1px solid var(--am-line); }
.am-faq__q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--am-s5);
  padding: var(--am-s5) 0; background: none; border: none; text-align: left;
  font-family: var(--am-sans); font-weight: 700; font-size: 1.02rem; color: var(--am-ink-900);
}
.am-faq__q::after { content: '+'; font-size: 1.3rem; font-weight: 400; color: var(--am-navy-700); flex-shrink: 0; transition: transform .2s ease; }
.am-faq__item.is-open .am-faq__q::after { transform: rotate(45deg); }
.am-faq__a { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.am-faq__a p { padding-bottom: var(--am-s5); color: var(--am-ink-700); max-width: 60em; }

/* ─── Formulaires ────────────────────────────────────────────────── */
.am-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--am-s5); }
.am-field label { font-size: .82rem; font-weight: 700; color: var(--am-ink-700); }
.am-field input, .am-field select, .am-field textarea {
  border: 1.5px solid var(--am-line); border-radius: var(--am-radius-sm); padding: 12px 14px;
  background: #fff; color: var(--am-ink-900);
}
.am-field input:focus, .am-field select:focus, .am-field textarea:focus { outline: 2px solid var(--am-gold-500); outline-offset: 1px; border-color: var(--am-gold-500); }
.am-field textarea { resize: vertical; min-height: 120px; }
.am-form-note { font-size: .82rem; color: var(--am-ink-500); background: var(--am-cream-100); border: 1px solid var(--am-line); border-left: 3px solid var(--am-navy-700); border-radius: var(--am-radius-sm); padding: var(--am-s4); margin-top: var(--am-s3); }
.am-form-success { display: none; background: var(--am-navy-900); color: var(--am-cream-50); border-radius: var(--am-radius); padding: var(--am-s6); }
.am-form-success.is-visible { display: block; }

/* ─── Coordonnées / contact cards ───────────────────────────────── */
.am-contact-block { display: flex; gap: var(--am-s5); padding: var(--am-s5) 0; border-bottom: 1px solid var(--am-line); }
.am-contact-block:first-child { padding-top: 0; }
.am-contact-block__icon { width: 22px; height: 22px; color: var(--am-gold-600); flex-shrink: 0; margin-top: 2px; }
.am-map-frame { border-radius: var(--am-radius); overflow: hidden; border: 1px solid var(--am-line); }
.am-map-frame iframe { width: 100%; height: 340px; border: 0; display: block; }

/* Façade « click-to-load » : pas d'iframe Google Maps chargée d'office
   (cookies tiers sans bandeau de consentement sur la demo). Aperçu
   statique stylisé à la charte + bouton qui injecte l'iframe au clic
   (voir js/app.js, amInitMapFacades). CNIL-friendly par construction. */
.am-map-facade {
  position: relative; height: 340px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--am-s3); text-align: center; padding: var(--am-s5);
  background:
    linear-gradient(rgba(7,27,54,.90), rgba(7,27,54,.90)),
    repeating-linear-gradient(0deg, rgba(247,248,250,.06) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(90deg, rgba(247,248,250,.06) 0 1px, transparent 1px 42px),
    var(--am-navy-900);
}
.am-map-facade__pin { width: 34px; height: 34px; color: var(--am-gold-500); }
.am-map-facade__addr { color: var(--am-cream-50); font-weight: 700; font-size: .95rem; }
.am-map-facade__note { color: rgba(247,248,250,.6); font-size: .78rem; max-width: 26em; }

/* ─── Footer ─────────────────────────────────────────────────────── */
.am-footer { background: var(--am-navy-950); color: rgba(247,248,250,.7); padding: var(--am-s9) 0 var(--am-s6); }
.am-footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--am-s7); padding-bottom: var(--am-s8); }
.am-footer__title { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--am-cream-50); margin-bottom: var(--am-s4); }
.am-footer__link { display: block; padding: 5px 0; font-size: .9rem; color: rgba(247,248,250,.68); }
.am-footer__link:hover { color: var(--am-gold-300); }
/* width:auto obligatoire : sans lui, la hauteur imposée se combine à
   l'attribut width="120" du HTML et le logo s'affiche en ratio 4.62 au lieu
   de 3.35, donc écrasé de 27% en hauteur. Le header a la même paire. */
.am-footer__logo img { height: 26px; width: auto; margin-bottom: var(--am-s4); }
.am-footer__desc { font-size: .88rem; line-height: 1.6; max-width: 30em; }
.am-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--am-s5); padding-top: var(--am-s6); font-size: .78rem; flex-wrap: wrap; }
.am-footer__signature a { color: var(--am-gold-300); font-weight: 700; }
.am-footer__socials { display: flex; gap: var(--am-s4); }

/* ─── Barre CTA fixe mobile ──────────────────────────────────────── */
.am-mobile-cta {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 460;
  background: var(--am-navy-950); border-top: 1px solid var(--am-line-dark);
  padding: var(--am-s3) var(--am-s4); gap: var(--am-s3);
  box-shadow: 0 -8px 24px -14px rgba(0,0,0,.5);
}
.am-mobile-cta a { flex: 1; text-align: center; }

/* ─── Bande CTA finale ───────────────────────────────────────────── */
.am-cta-band { text-align: center; }
.am-cta-band__phones { display: flex; justify-content: center; gap: var(--am-s6); margin-top: var(--am-s6); flex-wrap: wrap; }
.am-cta-band__phones a { font-family: var(--am-serif); font-size: 1.15rem; color: var(--am-gold-300); }

/* Bande "chiffres réels seulement" (pas de placeholders inventés) */
.am-proof { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--am-s9); align-items: start; }
.am-proof__clauses { display: flex; flex-direction: column; }
.am-proof__clause { display: flex; gap: var(--am-s4); padding: var(--am-s4) 0; border-bottom: 1px solid var(--am-line); }
.am-proof__clause:first-child { padding-top: 0; }
.am-proof__clause-no { font-family: var(--am-sans); font-weight: 800; color: var(--am-navy-700); font-variant-numeric: tabular-nums; }

/* Breadcrumb léger (pages secondaires) */
.am-crumb { font-size: .82rem; color: var(--am-ink-500); padding: calc(var(--am-header-h) + var(--am-s6)) 0 0; }
.am-crumb a { color: var(--am-navy-700); font-weight: 600; }

/* Bandeau sous-page (pages locales / à propos / contact / véhicules) */
.am-page-hero { background: var(--am-navy-900); color: var(--am-cream-50); padding-top: calc(var(--am-header-h) + var(--am-s7)); padding-bottom: var(--am-s8); }
.am-page-hero h1, .am-page-hero h2, .am-page-hero h3 { color: var(--am-cream-50); }
.am-page-hero .am-lede { color: rgba(247,248,250,.82); }

/* ─── Moteur de réservation officiel (embed RentHub, reserver.html) ─── */
.am-renthub-reassure { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--am-s5) 0 var(--am-s4); }
.am-renthub-frame {
  border: 1px solid var(--am-line); border-radius: var(--am-radius); overflow: hidden;
  background: var(--am-cream-100); position: relative;
}
/* Hauteur généreuse en filet de sécurité : si le resize JS (iframe-resizer)
   échoue à un moment du parcours RentHub, rien ne doit rester inaccessible
   (le widget RentHub ne scrolle pas toujours en interne). */
.am-renthub-frame iframe { display: block; width: 100%; min-height: 1500px; border: 0; position: relative; z-index: 1; }

/* État de chargement : évite l'écran blanc pendant le fetch réseau du
   widget tiers (recouvre l'iframe, retiré au premier `load`). */
/* Hauteur fixe (pas inset:0) : le cadre peut deja mesurer 1500px de haut
   (filet de securite), centrer le loader sur inset:0 le pousserait hors
   du premier ecran. Le loader reste donc ancre en haut, visible tout de
   suite. */
.am-renthub-frame__loader {
  position: absolute; top: 0; left: 0; right: 0; height: 460px; z-index: 2; display: none; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--am-s4); background: var(--am-cream-100);
}
.am-renthub-frame.is-loading .am-renthub-frame__loader { display: flex; }
.am-renthub-frame__loader p { font-size: .86rem; color: var(--am-fg-muted); }
.am-renthub-frame__spinner {
  width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--am-line);
  border-top-color: var(--am-gold-500); animation: am-spin .8s linear infinite;
}
@keyframes am-spin { to { transform: rotate(360deg); } }

/* ─── Tunnel de réservation dédié (reserver.html) ─────────────────────
   Page à parcours unique : header compact non fixe (pas de nav complète),
   masque de recherche resserré, badges sur une ligne fine, embed RentHub
   en pièce centrale, WhatsApp réduit à un bloc discret, footer minimal.
   Budget vertical strict au-dessus de la ligne de flottaison. ─────────── */
.am-tunnel-header { height: 60px; display: flex; align-items: center; background: var(--am-navy-900); border-bottom: 1px solid var(--am-line-dark); }
.am-tunnel-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--am-s5); width: 100%; }
.am-tunnel-header__logo { display: flex; align-items: center; }
.am-tunnel-header__logo img { height: 24px; width: auto; display: block; }
.am-tunnel-header__right { display: flex; align-items: center; gap: var(--am-s5); }
.am-tunnel-header__phone { display: flex; align-items: center; gap: 6px; color: var(--am-cream-50); font-weight: 700; font-size: .86rem; white-space: nowrap; }
.am-tunnel-header__phone svg { width: 14px; height: 14px; color: var(--am-gold-500); flex-shrink: 0; }
.am-tunnel-header__back { font-size: .82rem; font-weight: 600; color: rgba(247,248,250,.72); white-space: nowrap; }
.am-tunnel-header__back:hover { color: var(--am-cream-50); }

.am-tunnel-top { background: var(--am-navy-900); padding: var(--am-s4) 0 var(--am-s5); }
.am-tunnel-top h1 { color: var(--am-cream-50); font-size: clamp(1.15rem, 3vw, 1.4rem); line-height: 1.2; font-weight: 800; letter-spacing: -0.01em; }

/* Masque compact : version resserrée de .am-ticket, propre au tunnel */
.am-tunnel-mask {
  margin-top: var(--am-s4); background: var(--am-cream-50); border-radius: var(--am-radius);
  box-shadow: var(--am-shadow-sm); display: grid;
  /* 5 champs depuis l'ajout des heures : lieu, départ, heure, retour, heure.
     Les colonnes d'heure sont plus étroites, un créneau tient en 5 signes. */
  grid-template-columns: 1.4fr 1fr .75fr 1fr .75fr auto; overflow: hidden;
}
.am-tunnel-mask__field { padding: 13px var(--am-s5); border-right: 1px solid var(--am-line); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.am-tunnel-mask__field:last-of-type { border-right: none; }
.am-tunnel-mask__label { font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--am-ink-500); }
/* Cible tactile >= ~44px (label + valeur + padding du champ) : padding
   vertical du controle lui-meme, pas seulement du conteneur. */
.am-tunnel-mask__field select, .am-tunnel-mask__field input { border: none; background: none; padding: 6px 0; font-family: var(--am-sans); font-size: .92rem; font-weight: 700; color: var(--am-ink-900); width: 100%; min-height: 20px; }
.am-tunnel-mask__field select:focus, .am-tunnel-mask__field input:focus { outline: none; }
.am-tunnel-mask__submit { background: var(--am-gold-500); color: var(--am-navy-950); border: none; padding: 0 var(--am-s6); min-height: 48px; font-weight: 800; font-size: .86rem; display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.am-tunnel-mask__submit:hover { background: var(--am-gold-600); }

.am-tunnel-badges { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: var(--am-s4); }
.am-tunnel-badges span { font-size: .68rem; font-weight: 700; color: rgba(247,248,250,.86); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); padding: 4px 10px; border-radius: var(--am-radius-sm); white-space: nowrap; }

/* Note honnête : le lieu du masque nourrit le récap/WhatsApp mais n'est
   PAS transmis au moteur RentHub (from=1 fixe, pas de mapping station
   fiable, cf. _stack.md). Affichée seulement quand le lieu choisi n'est
   pas l'agence, pour ne jamais laisser croire que RentHub l'a reçu. */
.am-tunnel-lieu-note { font-size: .76rem; color: rgba(247,248,250,.68); margin-top: var(--am-s3); }

/* Barre de recap (mode plein ecran, une fois les dates validees) : le
   masque se replie ici, "Modifier" le redeploie sans perte de valeurs
   (CSS display:none sur les champs, jamais retires du DOM). */
.am-tunnel-recap-bar { display: none; background: var(--am-navy-800); border-top: 1px solid var(--am-line-dark); }
/* padding-top/bottom seulement : c'est un .am-container (padding gauche/
   droite deja pose par design-system.css), un raccourci "10px 0" ici
   ecraserait ce padding horizontal (composants.css charge apres). */
.am-tunnel-recap-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--am-s4); min-height: 52px; padding-top: 10px; padding-bottom: 10px; }
.am-tunnel-recap-bar__info { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: rgba(247,248,250,.88); font-size: .84rem; font-weight: 600; min-width: 0; }
.am-tunnel-recap-bar__info strong { color: var(--am-gold-300); font-weight: 800; }
.am-tunnel-recap-bar__edit { flex-shrink: 0; background: transparent; border: 1.5px solid rgba(247,248,250,.35); color: var(--am-cream-50); font-weight: 700; font-size: .78rem; padding: 8px 16px; border-radius: var(--am-radius-sm); white-space: nowrap; }
.am-tunnel-recap-bar__edit:hover { background: rgba(247,248,250,.1); border-color: var(--am-cream-50); }

.am-tunnel-top.is-collapsed .am-tunnel-top__expanded { display: none; }
.am-tunnel-top.is-collapsed .am-tunnel-recap-bar { display: block; }
.am-tunnel-top.is-collapsed { padding: 0; }

/* Mode immersif : l'embed RentHub occupe le reste du viewport (100svh
   moins header compact et barre de recap), en pleine largeur (le
   conteneur perd sa largeur max pour que "le moteur respire"). Le
   resize JS (iframe-resizer) continue de faire grandir l'iframe et
   la PAGE (pas l'iframe) scrolle au-dela : cf. _stack.md pour l'arbitrage
   vs. scroll interne a l'iframe (rejete, peu fiable sur mobile et le
   widget RentHub ne gere pas toujours son propre scroll interne). */
#am-renthub-section.is-immersive { padding-top: 0; }
#am-renthub-section.is-immersive .am-renthub-wrap { max-width: none; padding: 0; }
#am-renthub-section.is-immersive .am-renthub-frame { border-radius: 0; border-left: 0; border-right: 0; }
#am-renthub-section.is-immersive .am-renthub-frame iframe { min-height: calc(100svh - 60px - 52px); }
#am-renthub-section.is-immersive .am-renthub-frame__loader { height: calc(100svh - 60px - 52px); }

/* ─── Étoiles (note Google, 4,4/5) ───────────────────────────────────
   Superposition texte : étoiles pleines (fond) en gris ligne, étoiles
   pleines (avant-plan, gold) recouvertes en largeur % pour rendre une
   note partielle sans dépendance SVG par étoile. */
.am-stars { position: relative; display: inline-block; line-height: 1; letter-spacing: 2px; }
.am-stars__bg { color: var(--am-line); }
.am-stars__fg { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; color: var(--am-gold-500); }
.am-stars--sm { font-size: .95rem; }

/* ─── Avis Google (home) ─────────────────────────────────────────────
   Données réelles (fiche Google Business Amoloto, relevé 2026-08-06,
   cf. _client.md/_stack.md) : note et nombre d'avis non arrondis, non
   qualifiés. Citations verbatim, jamais paraphrasées. */
.am-reviews__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--am-s6); flex-wrap: wrap; }
.am-reviews__score { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.am-reviews__score-num { font-family: var(--am-sans); font-weight: 800; font-size: 1.8rem; letter-spacing: -0.02em; color: var(--am-navy-900); font-variant-numeric: tabular-nums; }
.am-reviews__score .am-stars { font-size: 1.3rem; margin: 2px 0; }
.am-reviews__score-count { font-size: .82rem; color: var(--am-fg-muted); font-weight: 600; }
.am-reviews__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--am-s6); margin-top: var(--am-s7); }
.am-review-card { background: #fff; border: 1px solid var(--am-line); border-radius: var(--am-radius); padding: var(--am-s6); display: flex; flex-direction: column; gap: var(--am-s3); }
.am-review-card p { color: var(--am-ink-800, var(--am-ink-900)); line-height: 1.6; }
.am-review-card footer { font-size: .85rem; font-weight: 700; color: var(--am-navy-800); }
.am-review-card__translated { font-size: .74rem; color: var(--am-ink-300); font-style: italic; }

/* ─── Badge de réassurance note Google (près des CTA clés) ─────────── */
.am-google-badge { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 700; color: var(--am-navy-800); }
.am-google-badge .am-stars { font-size: .85rem; }
.am-google-badge--onDark { color: rgba(247,248,250,.86); }

.am-tunnel-whatsapp { display: flex; align-items: center; justify-content: space-between; gap: var(--am-s5); flex-wrap: wrap; background: var(--am-cream-100); border: 1px solid var(--am-line); border-radius: var(--am-radius); padding: var(--am-s4) var(--am-s5); margin-top: var(--am-s6); }
.am-tunnel-whatsapp p { font-size: .88rem; color: var(--am-ink-700); margin: 0; }
.am-tunnel-whatsapp__ctas { display: flex; gap: var(--am-s3); flex-wrap: wrap; }

/* Rappel de réassurance sous l'embed : visible sur tous les écrans (sur
   mobile c'est le seul rappel, les badges du haut étant masqués pour
   préserver le zéro-scroll). */
.am-tunnel-reassure-line { font-size: .78rem; color: var(--am-fg-muted); margin: var(--am-s4) 0 0; }

.am-tunnel-footer { background: var(--am-navy-950); color: rgba(247,248,250,.62); padding: var(--am-s5) 0; font-size: .78rem; }
.am-tunnel-footer__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--am-s4); flex-wrap: wrap; }
.am-tunnel-footer a { color: rgba(247,248,250,.72); }
.am-tunnel-footer a:hover { color: var(--am-gold-300); }
.am-tunnel-footer__signature a { color: var(--am-gold-300); font-weight: 700; }

/* ══════════════════════════════════════════════════════════════
   ASSISTANT DE RÉSERVATION (chat)
   DOM injecté par js/app.js, absent de reserver.html (tunnel).

   Grammaire de messagerie assumée : bulles à ergot des deux côtés,
   heure sous le texte, indicateur de frappe, composeur en pilule avec
   bouton d'envoi rond. C'est ce qui fait comprendre en une seconde
   qu'on peut écrire. La palette reste Amoloto (navy, or, crème) : on
   emprunte la grammaire de WhatsApp, pas ses couleurs.

   Seule entorse assumée au radius quasi carré du site : les bulles et
   le composeur sont arrondis. Un angle droit ne se lit pas comme une
   bulle, et l'affordance prime ici sur l'uniformité.
   ══════════════════════════════════════════════════════════════ */

.am-chat { position: fixed; right: 20px; bottom: calc(20px + var(--am-cookie-h, 0px)); z-index: 60; font-family: var(--am-sans); transition: bottom .2s ease; }

/* ─── Lanceur ─── */
.am-chat__toggle {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 20px; border: 0; border-radius: 999px;
  background: var(--am-navy-900); color: var(--am-cream-50);
  font-family: inherit; font-size: .8rem; font-weight: 700; letter-spacing: -0.01em;
  cursor: pointer; box-shadow: 0 10px 30px -12px rgba(7,27,54,.55);
  transition: background .18s ease, transform .18s ease;
}
.am-chat__toggle:hover { background: var(--am-navy-800); transform: translateY(-1px); }
.am-chat__toggle svg { color: var(--am-gold-500); flex: none; }
.am-chat__toggle-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #3FCF6E; flex: none;
  box-shadow: 0 0 0 0 rgba(63,207,110,.6); animation: amChatPing 2.4s ease-out infinite;
}
@keyframes amChatPing {
  0% { box-shadow: 0 0 0 0 rgba(63,207,110,.55) }
  70%, 100% { box-shadow: 0 0 0 7px rgba(63,207,110,0) }
}
.am-chat.is-open .am-chat__toggle { display: none; }

/* [hidden] doit gagner : .am-chat__panel { display:flex } écrase la feuille
   par défaut du navigateur et le panneau s'affichait ouvert au chargement. */
.am-chat__panel[hidden] { display: none; }

.am-chat__panel {
  display: flex; flex-direction: column;
  width: 384px; max-height: min(74vh, 640px);
  background: var(--am-cream-50);
  border: 1px solid var(--am-line); border-radius: 14px;
  box-shadow: 0 24px 60px -24px rgba(7,27,54,.45); overflow: hidden;
}

/* ─── En-tête de conversation (identité + actions) ─── */
.am-chat__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; background: var(--am-navy-900); color: var(--am-cream-50);
}
.am-chat__id { display: flex; align-items: center; gap: 11px; min-width: 0; overflow: hidden; }
.am-chat__id > div { min-width: 0; }
.am-chat__avatar {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  background: var(--am-gold-500); color: var(--am-navy-950);
  display: flex; align-items: center; justify-content: center;
}
.am-chat__title { margin: 0; font-size: .95rem; font-weight: 700; letter-spacing: -0.01em; }
.am-chat__status {
  margin: 2px 0 0; font-size: .72rem; color: rgba(247,248,250,.6);
  display: flex; align-items: center; gap: 6px;
  /* Sans nowrap, « Assistant · en ligne » passe sur deux lignes en 390px :
     l'en-tête grandit et la pastille se retrouve alignée sur la 2e ligne. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.am-chat__dot { width: 6px; height: 6px; border-radius: 50%; background: #3FCF6E; flex: none; }

.am-chat__head-actions { display: flex; align-items: center; gap: 2px; flex: none; }
.am-chat__icon {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(247,248,250,.75); text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
.am-chat__icon:hover { background: rgba(247,248,250,.12); color: var(--am-cream-50); }
.am-chat__icon--wa:hover { background: #25D366; color: #fff; }
.am-chat__close {
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: rgba(247,248,250,.6);
  font-size: 1.35rem; line-height: 1; cursor: pointer;
}
.am-chat__close:hover { background: rgba(247,248,250,.12); color: var(--am-cream-50); }

/* ─── Fil de conversation ─── */
.am-chat__log {
  flex: 1 1 auto; overflow-y: auto; padding: 16px 14px;
  display: flex; flex-direction: column; gap: 9px;
  background: var(--am-cream-100);
}
/* Conteneur flex en colonne : sans ça les enfants sont compressibles et le
   billet s'écrase (mesuré à 2px de haut). Le contenu impose sa hauteur. */
.am-chat__log > * { flex: none; }

.am-chat__msg { display: flex; max-width: 100%; }
.am-chat__msg--bot { justify-content: flex-start; }
.am-chat__msg--me, .am-chat__msg--wait { justify-content: flex-end; }
.am-chat__msg--wait { justify-content: flex-start; }

.am-chat__bulle {
  position: relative; max-width: 84%;
  padding: 8px 11px 6px; border-radius: 10px;
  font-size: .87rem; line-height: 1.5;
  box-shadow: 0 1px 1px rgba(7,27,54,.09);
  word-wrap: break-word;
}
/* Ergot : petit triangle collé au coin, comme dans une messagerie. */
.am-chat__bulle::after {
  content: ''; position: absolute; bottom: 0; width: 0; height: 0;
  border: 7px solid transparent;
}
.am-chat__msg--bot .am-chat__bulle, .am-chat__msg--wait .am-chat__bulle {
  background: #fff; color: var(--am-ink-900); border-top-left-radius: 3px;
}
.am-chat__msg--bot .am-chat__bulle::after, .am-chat__msg--wait .am-chat__bulle::after {
  left: -6px; bottom: auto; top: 0; border-top-color: #fff; border-left: 0;
}
.am-chat__msg--me .am-chat__bulle {
  background: var(--am-navy-900); color: var(--am-cream-50); border-top-right-radius: 3px;
}
.am-chat__msg--me .am-chat__bulle::after {
  right: -6px; bottom: auto; top: 0; border-top-color: var(--am-navy-900); border-right: 0;
}

.am-chat__heure {
  display: block; margin-top: 2px; text-align: right;
  font-size: .63rem; font-variant-numeric: tabular-nums; opacity: .5;
}

/* Indicateur de frappe */
.am-chat__frappe { display: inline-flex; align-items: center; gap: 4px; padding: 12px 13px; }
.am-chat__frappe i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--am-ink-300);
  animation: amChatFrappe 1.2s ease-in-out infinite;
}
.am-chat__frappe i:nth-child(2) { animation-delay: .18s; }
.am-chat__frappe i:nth-child(3) { animation-delay: .36s; }
@keyframes amChatFrappe { 0%, 60%, 100% { opacity: .28; transform: translateY(0) } 30% { opacity: 1; transform: translateY(-3px) } }

/* ─── Billet de recommandation (écho du .am-ticket du hero) ─── */
.am-chat__ticket {
  align-self: stretch; background: #fff; border: 1px solid var(--am-line);
  border-radius: 10px; overflow: hidden; box-shadow: 0 1px 1px rgba(7,27,54,.09);
}
.am-chat__ticket-rows { display: flex; flex-wrap: wrap; }
.am-chat__field {
  flex: 1 1 44%; min-width: 0; padding: 12px 14px;
  border-right: 1px solid var(--am-line); border-bottom: 1px solid var(--am-line);
  display: flex; flex-direction: column; gap: 5px;
}
.am-chat__field:nth-child(2n) { border-right: none; }
.am-chat__field:only-child { flex-basis: 100%; border-right: none; }
.am-chat__field-label {
  font-size: .61rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--am-ink-500);
}
.am-chat__field-value {
  font-size: .94rem; font-weight: 700; color: var(--am-ink-900);
  letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
}
.am-chat__perf {
  height: 1px; margin: 0 14px;
  background-image: linear-gradient(to right, var(--am-line) 0 5px, transparent 5px 10px);
  background-size: 10px 1px;
}
.am-chat__cta {
  display: flex; align-items: center; justify-content: center;
  margin: 12px 14px 14px; padding: 12px 16px;
  background: var(--am-gold-500); color: var(--am-navy-950);
  border-radius: 8px; text-decoration: none;
  font-size: .76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  transition: background .18s ease;
}
.am-chat__cta:hover { background: var(--am-gold-600); }

/* ─── Composeur ─── */
.am-chat__form {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px 8px;
  background: var(--am-cream-50); border-top: 1px solid var(--am-line);
}
.am-chat__form.is-busy { opacity: .55; pointer-events: none; }
.am-chat__input {
  flex: 1 1 auto; min-width: 0; padding: 11px 15px;
  border: 1px solid var(--am-line); border-radius: 999px;
  font-family: inherit; font-size: .87rem; color: var(--am-ink-900); background: #fff;
}
.am-chat__input::placeholder { color: var(--am-ink-300); }
.am-chat__input:focus { outline: none; border-color: var(--am-gold-500); box-shadow: 0 0 0 3px rgba(226,169,74,.22); }
.am-chat__send {
  flex: none; width: 42px; height: 42px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--am-gold-500); color: var(--am-navy-950);
  display: flex; align-items: center; justify-content: center;
  transition: background .18s ease;
}
.am-chat__send:hover { background: var(--am-gold-600); }

.am-chat__note {
  margin: 0; padding: 0 14px 12px; background: var(--am-cream-50);
  font-size: .64rem; line-height: 1.5; color: var(--am-ink-300);
}

/* ─── Pages légales : marqueur « à compléter » ────────────────────
   Visible sans être alarmant. Sert à ce qu'aucune clause non validée
   ne parte en ligne par inadvertance : le client doit les voir. */
.am-legal-todo {
  background: var(--am-gold-100); border-left: 3px solid var(--am-gold-500);
  padding: 12px 16px; margin: var(--am-s4) 0;
  font-size: .88rem; line-height: 1.55; color: var(--am-ink-700);
}

/* ─── Bandeau d'information cookies ───────────────────────────────
   Le site ne dépose AUCUN cookie de mesure d'audience ni de publicité
   (mesuré : 0 cookie). La CNIL n'exige de consentement que pour les
   traceurs non essentiels : fabriquer un « accepter / refuser » ici
   serait un faux choix. C'est donc une information, pas un consentement,
   avec un lien vers le détail. */
.am-cookie {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 480;
  max-width: 620px; margin: 0 auto;
  display: flex; align-items: center; gap: var(--am-s4); flex-wrap: wrap;
  padding: 14px 18px; border-radius: var(--am-radius);
  background: var(--am-navy-900); color: rgba(247,248,250,.88);
  box-shadow: 0 18px 44px -20px rgba(7,27,54,.6);
  font-size: .82rem; line-height: 1.5;
}
.am-cookie[hidden] { display: none; }
.am-cookie p { margin: 0; flex: 1 1 300px; min-width: 0; }
.am-cookie a { color: var(--am-gold-300); text-decoration: underline; }
.am-cookie a:hover { color: var(--am-gold-100); }
.am-cookie__ok {
  flex: none; padding: 9px 18px; border: 0; border-radius: var(--am-radius);
  background: var(--am-gold-500); color: var(--am-navy-950);
  font-family: inherit; font-size: .72rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
}
.am-cookie__ok:hover { background: var(--am-gold-600); }

/* ─── Inscription newsletter (footer) ─────────────────────────────
   Formulaire classique vers newsletter.php, qui relaie vers Listmonk.
   Pas de fetch : le WAF de l'hébergeur peut intercaler un défi JS
   devant un POST, qu'une navigation de formulaire résout et qu'un
   fetch() ne sait pas résoudre. */
.am-nl { margin-top: var(--am-s6); }
.am-nl__desc { font-size: .84rem; line-height: 1.5; color: rgba(247,248,250,.62); margin: 6px 0 12px; }
.am-nl__row { display: flex; gap: 8px; flex-wrap: wrap; }
.am-nl__input {
  flex: 1 1 180px; min-width: 0; padding: 11px 13px;
  border: 1px solid rgba(247,248,250,.22); border-radius: var(--am-radius);
  background: rgba(247,248,250,.06); color: var(--am-cream-50);
  font-family: inherit; font-size: .86rem;
}
.am-nl__input::placeholder { color: rgba(247,248,250,.42); }
.am-nl__input:focus { outline: none; border-color: var(--am-gold-500); background: rgba(247,248,250,.1); }
.am-nl__submit {
  flex: none; padding: 11px 18px; border: 0; border-radius: var(--am-radius);
  background: var(--am-gold-500); color: var(--am-navy-950);
  font-family: inherit; font-size: .72rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
}
.am-nl__submit:hover { background: var(--am-gold-600); }
/* Honeypot : jamais visible, jamais atteignable au clavier. */
.am-nl__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.am-nl__note { font-size: .72rem; line-height: 1.45; color: rgba(247,248,250,.42); margin-top: 9px; }
.am-nl__note a { color: rgba(247,248,250,.62); text-decoration: underline; }
.am-nl__msg {
  margin-top: 10px; padding: 9px 12px; border-radius: var(--am-radius);
  font-size: .8rem; line-height: 1.45;
}
.am-nl__msg[hidden] { display: none; }
.am-nl__msg--ok { background: rgba(63,207,110,.14); color: #9BE7BB; border-left: 2px solid #3FCF6E; }
.am-nl__msg--ko { background: rgba(226,169,74,.14); color: var(--am-gold-300); border-left: 2px solid var(--am-gold-500); }

/* EN ATTENTE DE L'UUID DE LISTE. L'identifiant fourni le 2026-08-24
   (3449a01c-8abf-4698-9bf7-6209bd4a7839) est rejeté par Listmonk
   (« UUID invalide », HTTP 400) : ce n'est pas une liste de cette
   instance. Le formulaire est donc masqué le temps d'obtenir le bon,
   plutôt que d'exposer un champ qui échoue devant un prospect.
   POUR L'ACTIVER : corriger NL_LISTE dans newsletter.php, puis
   supprimer ce bloc. Rien d'autre à toucher. */
.am-nl { display: none; }

/* Durée minimale de location, sous le masque du tunnel. Discret mais
   présent : le champ de retour est contraint à départ + 3 jours, et sans
   cette ligne le visiteur ne comprend pas pourquoi le calendrier refuse
   sa date. Condition Amoloto confirmée le 2026-08-27. */
.am-tunnel-mini {
  margin: 8px 0 0; font-size: .74rem; color: var(--am-ink-500);
  letter-spacing: .01em;
}

/* ─── Renvoi agence en fin de sélection de flotte ─────────────────
   La page ne liste plus tout le parc mais une sélection : ce bloc
   dit où trouver le reste, sans laisser croire à un catalogue plus
   large qu'il ne l'est. Demande Amoloto du 2026-08-27. */
.am-fleet-plus {
  margin-top: var(--am-s7); padding: var(--am-s6);
  background: var(--am-cream-100); border-left: 3px solid var(--am-gold-500);
  border-radius: var(--am-radius);
}
.am-fleet-plus__titre { margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.015em; color: var(--am-ink-900); }
.am-fleet-plus__texte { margin: 8px 0 0; font-size: .92rem; line-height: 1.55; color: var(--am-ink-700); max-width: 62ch; }
.am-fleet-plus__actions { display: flex; gap: var(--am-s3); flex-wrap: wrap; margin-top: var(--am-s5); }

/* Page 404 : liens de repli */
.am-404-liens { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 520px; }
.am-404-liens a { display: block; padding: 14px 18px; border: 1px solid rgba(11, 31, 58, .14); border-radius: 4px; color: inherit; text-decoration: none; font-weight: 600; }
.am-404-liens a:hover { border-color: currentColor; }

/* Liens dans le corps des articles : reconnaissables sans survol */
.am-article__body a:not(.am-btn) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }