/* ==========================================================================
   ORACLYS — feuille de style de l'application
   Palette : or lumineux, bleu turquoise, violet mystique, bleu nuit
   ========================================================================== */

:root {
  --cream: #FBF7EF;
  --cream-2: #F4EDDF;
  --cream-3: #EDE3D1;
  --ink: #131C2B;
  --ink-soft: #5B6675;
  --gold: #B9902B;
  --gold-bright: #D9B457;
  --gold-light: #EBD79C;
  --turquoise: #1F9E93;
  --violet: #5B3A8E;
  --night: #0C1524;
  --night-2: #142236;
  --line: rgba(19, 28, 43, .10);
  --shadow: 0 10px 30px rgba(12, 21, 36, .08);
  --shadow-soft: 0 4px 16px rgba(12, 21, 36, .06);
  --radius: 20px;
  /* Charte de la carte de France : bleu nuit profond, ivoire et turquoise */
  --map-ivory: #F5F0E6;
  --map-ivory-deep: #EDE6D7;
  --map-night: #081629;
  --map-night-2: #0E2138;
  --map-teal: #20C4C4;
  --map-teal-deep: #079EAA;
  --map-teal-dark: #056B75;
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --bar-h: 74px;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  /* Réserve en bas : la barre de navigation flottante ne doit jamais coller
     au dernier contenu. Marge élargie pour laisser respirer les boutons. */
  padding-bottom: calc(var(--bar-h) + 56px + env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
}

img { max-width: 100%; }
img.ph {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; margin: 0; letter-spacing: -.01em; }
h1 { font-size: 40px; line-height: 1.05; }
h2 { font-size: 24px; line-height: 1.15; }
h3 { font-size: 20px; line-height: 1.2; }
p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }

.wrap { padding: 0 18px; max-width: 100%; }
.wrap-wide { max-width: 1100px; margin: 0 auto; }

/* ---------------------------------------------------------------- boutons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease, opacity .18s ease;
  text-align: center;
}
.btn:active { transform: scale(.97); }
.btn-primary {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #22190A;
  box-shadow: 0 8px 22px rgba(185, 144, 43, .28);
  font-weight: 600;
}
.btn-dark { background: var(--night); color: var(--cream); }
.btn-ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.btn-soft { background: var(--cream-2); color: var(--ink); }
.btn-block { width: 100%; }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 13.5px; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn svg { flex: none; }

/* ---------------------------------------------------------------- barre menu + colonne ordinateur */
.menu-btn {
  position: fixed;
  top: 0; left: 0;
  z-index: 60;
  width: 52px; height: 52px;
  margin: calc(env(safe-area-inset-top, 0px) + 6px) 0 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(251, 247, 239, .82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
  transition: transform .12s ease;
}
.menu-btn:active { transform: scale(.94); }

.sidemenu {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 90;
  width: 82%;
  max-width: 320px;
  background: #fff;
  border-radius: 0 24px 24px 0;
  padding: calc(env(safe-area-inset-top, 0px) + 22px) 20px calc(22px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 4px;
  transform: translateX(-100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform .32s cubic-bezier(.4, 0, .2, 1), visibility .32s;
  box-shadow: 20px 0 50px rgba(12, 21, 36, .16);
  overflow-y: auto;
}
.sidemenu.open { transform: none; visibility: visible; pointer-events: auto; }
.sidemenu .sm-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.sidemenu .sm-brand img { width: 48px; height: 48px; border-radius: 14px; object-fit: cover; }
.sidemenu .sm-brand strong { font-family: var(--serif); font-size: 22px; letter-spacing: .06em; display: block; line-height: 1.1; }
.sidemenu .sm-brand span { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.sidemenu .sm-close {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 14px); right: 14px;
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; color: var(--ink); display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.sidemenu a.sm-link {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 12px; border-radius: 14px;
  font-size: 15.5px; color: var(--ink);
}
.sidemenu a.sm-link:active { background: var(--cream-2); }
.sidemenu a.sm-link svg { color: var(--gold); flex: none; }
.sidemenu .sm-sep { height: 1px; background: var(--line); margin: 12px 0; }
.sidemenu .sm-foot { margin-top: auto; padding-top: 18px; }
.sidemenu .sm-foot .btn { width: 100%; }
.sidemenu .sm-count {
  margin-left: auto; font-size: 11px; background: var(--gold-light); color: #4A3708;
  padding: 2px 8px; border-radius: 999px;
}
.scrim {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(12, 21, 36, .5);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s ease, visibility .3s;
}
.scrim.show { opacity: 1; visibility: visible; pointer-events: auto; }
body.menu-open { overflow: hidden; }

/* colonne de navigation ordinateur — MASQUÉE par défaut */
.sidecol { display: none; }

.app-main { padding-top: calc(env(safe-area-inset-top, 0px) + 64px); }

/* ---------------------------------------------------------------- accueil : marque + galerie */
.brand-head { display: flex; align-items: center; gap: 12px; padding: 6px 0 18px; }
.brand-head img { width: 36px; height: 36px; border-radius: 11px; object-fit: cover; }
.brand-head .bh-name {
  font-family: var(--serif); font-size: 40px; line-height: 1.05;
  letter-spacing: -.02em; font-weight: 600;
}
.brand-head .bh-slogan {
  display: block; font-family: var(--sans); font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); margin-top: 4px;
}

.hero-gallery { position: relative; }
.hero-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  gap: 0; margin: 0 -18px; padding: 0;
  scrollbar-width: none; -ms-overflow-style: none;
}
.hero-track::-webkit-scrollbar { display: none; }
.hero-slide {
  flex: 0 0 100%; scroll-snap-align: center;
  padding: 0 18px;
}
.hero-frame {
  position: relative; overflow: hidden; border-radius: 22px;
  aspect-ratio: 4 / 5; max-height: min(66vh, 520px);
  background: var(--night);
}
/* Les deux boutons de l'accueil doivent être entièrement visibles sans défiler.
   Sur les téléphones courts, la somme (haut de page + marque + navigation +
   bandeau + boutons) dépassait la hauteur de l'écran et la barre du bas
   recouvrait les boutons. On plafonne donc la hauteur du bandeau en fonction
   de la hauteur RÉELLE de l'écran (dvh), en réservant la place de tout le
   reste. Sur un grand téléphone et sur ordinateur la limite n'est jamais
   atteinte : le bandeau garde exactement sa taille actuelle. */
/* ==========================================================================
   BANDEAU MOBILE — mise en page dédiée plein écran (téléphone uniquement)
   Le bandeau occupe toute la largeur, bord à bord, avec une hauteur généreuse
   liée à la hauteur réelle de l'écran. Sur ordinateur (≥900px) rien ne change :
   les règles ci-dessous ne s'appliquent jamais au-delà de 899px.
   ========================================================================== */
@media (max-width: 899px) {
  /* Le padding latéral du slide est retiré : c'est le margin négatif de
     .hero-track (-18px) qui fait déjà déborder la piste jusqu'au bord exact
     de l'écran. Sans ce retrait, il restait une bande crème de chaque côté. */
  .hero-slide { padding: 0; }
  .hero-frame {
    border-radius: 0;          /* bord à bord : aucun coin arrondi */
    aspect-ratio: auto;        /* la hauteur est pilotée par l'écran, plus par un ratio */
    max-height: none;
    /* Hauteur généreuse : on réserve la place du haut de page, des deux
       boutons sous le bandeau et de la barre du bas. Plancher de 330px pour
       garder une vraie présence visuelle sur les petits téléphones, plafond
       de 560px sur les grands. */
    height: clamp(330px, calc(100vh - 320px), 560px);
  }
  @supports (height: 100dvh) {
    .hero-frame { height: clamp(330px, calc(100dvh - 320px), 560px); }
  }
  /* Contenu du bandeau : plus d'air, titre plus grand, texte lisible.
     .hero-cap est posé en absolu en bas du cadre : on garde une marge basse
     confortable pour que le bouton ne touche jamais le bord. */
  .hero-cap { padding: 22px 20px 26px; }
  .hero-cap h1, .hero-cap h2 { font-size: 31px; line-height: 1.05; }
  .hero-cap p { font-size: 13.5px; max-width: 38ch; line-height: 1.5; }
  .hero-cap .hero-slide-link { margin-top: 13px; }
  .hero-dots { left: 20px; right: 20px; top: 16px; }
  .hero-cta { margin-top: 12px; }

  /* On gagne la place nécessaire en haut de page pour que le bandeau puisse
     être plus haut SANS repousser les deux boutons sous la barre du bas. */
  .app-main { padding-top: calc(env(safe-area-inset-top, 0px) + 54px); }
  .brand-head { padding: 2px 0 12px; }
  .brand-head .bh-name { font-size: 34px; }
  .mainnav { padding: 8px 0; margin-bottom: 14px; }
}
/* Téléphone en PAYSAGE (écran large mais peu haut) : un cadre de 330 px de
   haut ne laisserait aucune place aux boutons ni à la navigation. On repasse
   sur une hauteur proportionnelle à l'écran, avec un contenu plus compact. */
@media (max-width: 899px) and (max-height: 520px) {
  .hero-frame { height: calc(100vh - 150px); min-height: 210px; max-height: 320px; }
  @supports (height: 100dvh) {
    .hero-frame { height: calc(100dvh - 150px); }
  }
  .hero-cap { padding: 14px 18px 16px; }
  .hero-cap h1, .hero-cap h2 { font-size: 24px; }
  .hero-cap p { font-size: 12px; max-width: 44ch; }
  .hero-cap .hero-slide-link { margin-top: 9px; }
  .app-main { padding-top: calc(env(safe-area-inset-top, 0px) + 46px); }
  .brand-head { padding: 0 0 8px; }
  .brand-head .bh-name { font-size: 30px; }
  .mainnav { padding: 6px 0; margin-bottom: 10px; }
}
/* Écrans très étroits (320–380 px) : le titre descend d'un cran pour rester
   sur deux lignes, et le cadre garde sa hauteur pleine. */
@media (max-width: 380px) {
  .hero-cap { padding: 18px 16px 22px; }
  .hero-cap h1, .hero-cap h2 { font-size: 26px; }
  .hero-cap p { font-size: 12.5px; max-width: 34ch; }
  .hero-cap .hc-kicker { font-size: 9.5px; letter-spacing: .16em; }
  .hero-frame { height: clamp(310px, calc(100vh - 300px), 520px); }
  @supports (height: 100dvh) {
    .hero-frame { height: clamp(310px, calc(100dvh - 300px), 520px); }
  }
}
.hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-frame img.live { animation: heroZoom 6s ease-out both; }
@keyframes heroZoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.hero-frame::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8, 14, 24, .86) 4%, rgba(8, 14, 24, .18) 46%, rgba(8, 14, 24, .05) 100%);
}
.hero-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 20px 20px 22px; color: #fff; pointer-events: none;
}
.hero-cap .hc-kicker {
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-light); margin-bottom: 8px;
}
.hero-cap h1 { font-size: 30px; color: #fff; margin-bottom: 6px; }
.hero-cap p { font-size: 13.5px; color: rgba(255, 255, 255, .82); max-width: 30ch; }
.hero-dots {
  position: absolute; top: 14px; left: 34px; right: 34px; z-index: 3; pointer-events: none;
  display: flex; gap: 6px;
}
.hero-dots i {
  height: 3px; flex: 1; border-radius: 3px; background: rgba(255, 255, 255, .34);
  transition: background .3s ease;
}
.hero-dots i.on { background: var(--gold-light); }
.hero-cta { margin-top: 16px; display: flex; gap: 10px; }
.hero-cta .btn { flex: 1; }

/* ============================================================ grand bandeau Premium (accueil) */
.premium-hero {
  margin-top: 28px;
  padding: 16px 0 18px;
  background:
    radial-gradient(120% 150% at 8% 0%, rgba(31, 158, 147, .24), transparent 52%),
    radial-gradient(120% 160% at 96% 100%, rgba(91, 58, 142, .42), transparent 58%),
    linear-gradient(112deg, #0A1120 0%, #0C1524 42%, #161028 100%);
  border: 1px solid rgba(217, 180, 87, .42);
  border-radius: 20px;
  box-shadow: 0 0 0 1px rgba(217, 180, 87, .10), 0 18px 46px rgba(12, 21, 36, .22);
  overflow: hidden;
  position: relative;
}
/* filet doré lumineux */
.premium-hero::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-bright), var(--gold-light), var(--gold-bright), transparent);
  opacity: .85;
}
.premium-hero .ph-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 0 16px 14px;
}
.premium-hero .ph-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #24190A; font-size: 9.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 6px; flex: none;
}
.premium-hero .ph-title {
  font-family: var(--serif); font-size: 15px; color: #F1E3C0;
  letter-spacing: .01em; line-height: 1.25;
}

/* piste qui défile : la largeur de translation est posée par le JS */
.pm-track {
  display: flex; align-items: stretch;
  width: max-content;
  will-change: transform;
  overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none;
}
.pm-track::-webkit-scrollbar { display: none; }
.pm-track.pm-run {
  overflow-x: hidden;
  animation-name: pmScroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes pmScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-1 * var(--pm-w, 800px)), 0, 0); }
}
.pm-group { display: flex; align-items: stretch; gap: 12px; padding: 0 6px; flex: none; }

/* vignette */
.pm-card {
  position: relative;
  width: 232px; flex: none;
  display: flex; flex-direction: column;
  background: linear-gradient(168deg, #16213A 0%, #111B2E 48%, #1D1633 100%);
  border: 1px solid rgba(217, 180, 87, .52);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(235, 215, 156, .18), 0 8px 24px rgba(4, 8, 16, .34);
  transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease;
}
.pm-card:hover {
  transform: translateY(-3px);
  border-color: var(--gold-bright);
  box-shadow: inset 0 1px 0 rgba(235, 215, 156, .26), 0 14px 34px rgba(4, 8, 16, .46), 0 0 0 1px rgba(217, 180, 87, .3);
}
/* lien invisible couvrant la carte : tout est cliquable */
.pm-card .pm-cover { position: absolute; inset: 0; z-index: 3; }
.pm-card .pm-photo {
  position: relative; flex: none;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #0C1524;
}
.pm-card .pm-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pm-card .pm-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10, 17, 32, .92) 2%, rgba(10, 17, 32, .12) 52%, transparent 100%);
}
.pm-card .pm-star {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 21px; height: 21px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #24190A;
}
.pm-card .pm-body {
  display: flex; flex-direction: column; gap: 5px;
  padding: 2px 13px 13px;
  flex: 1;
}
.pm-card .pm-name {
  font-family: var(--serif); font-size: 18px; line-height: 1.18;
  color: #FBF3DF; font-weight: 600; letter-spacing: .01em;
}
.pm-card .pm-fonction {
  font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
  color: #6FD5C8; line-height: 1.35;
}
.pm-card .pm-tel {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 3px; align-self: flex-start;
  font-size: 13.5px; font-weight: 600; letter-spacing: .02em;
  color: #1A1408;
  background: linear-gradient(135deg, var(--gold-light), var(--gold-bright));
  border-radius: 7px; padding: 5px 10px;
  position: relative; z-index: 4;
}
.pm-card .pm-tel svg { color: #3A2A06; }
.pm-card .pm-tel-off {
  background: transparent; color: rgba(251, 247, 239, .58);
  font-weight: 400; font-size: 12px; padding: 3px 0; letter-spacing: 0;
}
.pm-card .pm-tel-off svg { color: rgba(251, 247, 239, .48); }
.pm-card .pm-cta {
  margin-top: auto; padding-top: 9px;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 500; letter-spacing: .02em;
  color: #C9A2F0; border-top: 1px solid rgba(217, 180, 87, .18);
}
.pm-card .pm-cta svg { flex: none; }
/* Une carte qui n'est pas une mise en avant rémunérée le dit clairement :
   on ne présente jamais comme payé ce qui ne l'est pas. */
.pm-card .pm-origine {
  position: absolute; left: 8px; bottom: 8px; z-index: 2;
  font-size: 9px; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(251, 247, 239, .74);
  background: rgba(8, 15, 28, .76);
  border: 1px solid rgba(217, 180, 87, .30);
  border-radius: 5px; padding: 2px 6px;
  pointer-events: none;
}

/* ---------------------------------------------------------------- sections */
.section { margin-top: 30px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.section-head h2 { font-size: 24px; }
.section-head .link-more { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; }
.section-head .link-more:active { color: var(--gold); }
.section-sub { color: var(--ink-soft); font-size: 13.5px; margin: 6px 0 0; }

/* spécialités */
.spec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.spec-card {
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: 16px 14px; display: flex; flex-direction: column; gap: 8px;
  transition: transform .12s ease, box-shadow .2s ease;
}
.spec-card:active { transform: scale(.98); }
.spec-card .sc-ico {
  width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, rgba(217, 180, 87, .22), rgba(91, 58, 142, .14));
  color: var(--gold);
}
.spec-card strong { font-size: 14px; font-weight: 500; line-height: 1.3; }
.spec-card span { font-size: 11.5px; color: var(--ink-soft); }

/* ---------------------------------------------------------------- livre : pages qui se tournent */
.book {
  position: relative;
  perspective: 1600px;
  height: 372px;
  margin: 0 -4px;
  overflow: hidden;
  border-radius: 20px;
}
.book-stage { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.book-page {
  position: absolute; inset: 0;
  transform-origin: left center;
  transform-style: preserve-3d;
  touch-action: pan-y;
  will-change: transform;
}
.book-face, .book-back {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
}
.book-back {
  transform: rotateY(180deg);
  background: linear-gradient(120deg, var(--cream-2), var(--cream-3));
  border-color: var(--cream-3);
}
.book-face .bf-photo { position: relative; height: 190px; flex: none; overflow: hidden; }
.book-face .bf-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.book-face .bf-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.book-face .bf-spe { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.book-face h3 { font-size: 18px; line-height: 1.22; }
.book-face .bf-meta { font-size: 12px; color: var(--ink-soft); }
.book-face .bf-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 8px; }
.book-face .bf-price { font-weight: 600; font-size: 14px; }
.book-shade {
  position: absolute; inset: 0; border-radius: 20px; pointer-events: none; z-index: 5;
  background: linear-gradient(to right, rgba(12, 21, 36, .30), rgba(12, 21, 36, 0) 62%);
  opacity: 0;
}
.book-shadow {
  position: absolute; top: 0; bottom: 0; left: 0; width: 26px; z-index: 4;
  background: linear-gradient(to right, rgba(12, 21, 36, .22), transparent);
  opacity: 0; pointer-events: none; border-radius: 20px 0 0 20px;
}
.book-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 10px; border-radius: 999px;
  background: var(--cream-2); color: var(--ink); border: 0; cursor: pointer; font-size: 13px;
}
.book-pill:active { transform: scale(.94); }
.book-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 14px; }
.book-arrow {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; color: var(--ink); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: transform .12s ease, opacity .2s;
}
.book-arrow:active { transform: scale(.93); }
.book-arrow[disabled] { opacity: .32; pointer-events: none; }
.book-count { font-size: 12.5px; color: var(--ink-soft); min-width: 42px; text-align: center; letter-spacing: .06em; }
.book-hint { display: flex; justify-content: center; margin-top: 6px; color: var(--gold); }
.book-hint svg { overflow: visible; }

/* ---------------------------------------------------------------- cartes annonces */
.cards-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 12px; }
.card-annonce {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  overflow: hidden; transition: transform .14s ease, box-shadow .2s ease;
}
.card-annonce:active { transform: scale(.985); }
.card-annonce .ca-photo { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--cream-2); }
.card-annonce .ca-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-annonce .ca-body { padding: 11px 12px 13px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.card-annonce .ca-spe { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.card-annonce h3 { font-size: 15px; font-family: var(--sans); font-weight: 500; line-height: 1.3; letter-spacing: 0; }
.card-annonce .ca-desc {
  font-size: 12px; color: var(--ink-soft); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-annonce .ca-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; }
.card-annonce .ca-price { font-size: 13px; font-weight: 600; }
.card-annonce .ca-add {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--night); color: var(--cream); border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.badge-premium {
  position: absolute; top: 9px; left: 9px; z-index: 2;
  display: inline-flex; align-items: center; gap: 4px;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #24190A; font-size: 9.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 999px;
}
.badge-city {
  position: absolute; bottom: 9px; left: 9px; z-index: 2;
  background: rgba(12, 21, 36, .68); color: #fff; font-size: 10.5px;
  padding: 3px 8px; border-radius: 999px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* liste prose (fiches) */
.prose { font-size: 15px; color: #35404F; }
.prose p { margin-bottom: 14px; }

/* ---------------------------------------------------------------- filtres / formulaires */
.panel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px;
}
.panel + .panel { margin-top: 14px; }
.field { margin-bottom: 14px; }
.field:last-child { margin-bottom: 0; }
.field label { display: block; font-size: 12.5px; letter-spacing: .04em; color: var(--ink-soft); margin-bottom: 6px; }
.field .hint { font-size: 11.5px; color: var(--ink-soft); margin-top: 5px; }
input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], input[type="search"], input[type="date"], select, textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 13px;
  background: var(--cream); color: var(--ink);
  font-family: inherit; font-size: 15px; line-height: 1.4;
  -webkit-appearance: none; appearance: none;
}
textarea { min-height: 130px; resize: vertical; }
select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235B6675' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--gold-bright);
  box-shadow: 0 0 0 3px rgba(217, 180, 87, .18); background: #fff;
}
.filters { display: grid; grid-template-columns: 1fr; gap: 10px; }
.filters .field { margin: 0; }
.form-part {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
  margin: 20px 0 12px; padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
}
.form-part:first-of-type { margin-top: 0; }

/* aperçu de l'annonce avant soumission */
.apercu-zone { margin: 18px 0 14px; }
#apercuBox {
  border: 1px dashed rgba(185, 144, 43, .55);
  border-radius: 16px; padding: 14px; margin-bottom: 16px;
  background: #FFFCF4;
}
.apercu-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.apercu-head strong { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.apercu-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
}
.apercu-card .ap-photo { aspect-ratio: 16 / 10; overflow: hidden; background: var(--cream-2); }
.apercu-card .ap-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.apercu-card .ap-body { padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.apercu-card .ap-spe { font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--gold); }
.apercu-card h3 { font-size: 19px; line-height: 1.22; }
.apercu-card .ap-pro { font-size: 13px; color: #35404F; font-weight: 500; }
.apercu-card .ap-meta { font-size: 12px; color: var(--ink-soft); }
.apercu-card .ap-desc { font-size: 13px; color: var(--ink-soft); line-height: 1.55; margin: 4px 0 0; }
.apercu-card .ap-tel { font-size: 13.5px; font-weight: 600; margin-top: 6px; }
.apercu-card .ap-tel.on { color: #1B5B47; }
.apercu-card .ap-tel.off { color: var(--ink-soft); font-weight: 400; font-size: 12.5px; }
@media (min-width: 620px) {
  .apercu-card { flex-direction: row; }
  .apercu-card .ap-photo { flex: 0 0 42%; aspect-ratio: auto; }
  .apercu-card .ap-body { flex: 1; padding: 16px 18px; }
}
.check-line { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.check-line input { width: 20px; height: 20px; min-height: 0; accent-color: var(--gold); }
.check-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 2px; }
.check-grid .check-line {
  border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px;
  background: var(--cream); cursor: pointer;
}
.check-grid .check-line:has(input:checked) {
  border-color: var(--gold-bright); background: #FFFCF3;
  box-shadow: 0 0 0 3px rgba(217, 180, 87, .14);
}
@media (min-width: 620px) { .check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* coordonnées + modes sur la fiche annonce */
.fiche-infos { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 18px; }
@media (min-width: 768px) { .fiche-infos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fiche-block { border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: #fff; }
.fiche-block h3 {
  font-family: var(--sans); font-size: 11.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0 0 10px; font-weight: 500;
}
.mode-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.lien-pro { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; color: #35404F; word-break: break-word; }
.lien-pro + .lien-pro { margin-top: 8px; }
.lien-pro svg { color: var(--gold); flex: none; margin-top: 2px; }

.duree-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.duree-opt {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--line); border-radius: 14px; padding: 13px 14px;
  background: var(--cream); cursor: pointer;
}
.duree-opt input { width: 20px; height: 20px; min-height: 0; accent-color: var(--gold); }
.duree-opt .do-txt { flex: 1; }
.duree-opt .do-txt strong { display: block; font-size: 14.5px; font-weight: 500; }
.duree-opt .do-txt span { font-size: 12px; color: var(--ink-soft); }
.duree-opt .do-price { font-weight: 600; font-family: var(--serif); font-size: 19px; }
.duree-opt.sel { border-color: var(--gold-bright); background: #FFFCF3; box-shadow: 0 0 0 3px rgba(217, 180, 87, .14); }

.alert {
  border-radius: 14px; padding: 12px 14px; font-size: 13.5px; margin-bottom: 14px;
  background: var(--cream-2); border: 1px solid var(--line); color: #35404F;
}
.alert.ok { background: #EAF6F1; border-color: #B9E2D3; color: #1B5B47; }
.alert.err { background: #FBEDEC; border-color: #EFC7C3; color: #8C2B22; }

/* ---------------------------------------------------------------- fiches */
.fiche-hero {
  position: relative; overflow: hidden; border-radius: 22px;
  aspect-ratio: 4 / 3; max-height: 420px; background: var(--night);
}
.fiche-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.meta-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; background: var(--cream-2); color: #35404F;
  padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line);
}
.chip.gold { background: #FFF8E6; border-color: var(--gold-light); color: #6B4E0B; }
.kv { display: grid; gap: 10px; margin: 0; }
.kv div.row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.kv div.row:last-child { border-bottom: 0; }
.kv dt { color: var(--ink-soft); }
.kv dd { margin: 0; font-weight: 500; text-align: right; }
.avis-card { border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: #fff; }
.avis-card .av-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.avis-card strong { font-size: 14px; font-weight: 500; }
.stars { color: var(--gold-bright); letter-spacing: 2px; font-size: 12px; }

/* ---------------------------------------------------------------- compte / espace pro */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tile {
  background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 16px;
}
.tile .t-label { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.tile .t-value { font-family: var(--serif); font-size: 30px; line-height: 1.1; margin-top: 6px; }
.tile .t-sub { font-size: 12px; color: var(--ink-soft); }

.list-row {
  display: flex; gap: 12px; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 12px;
}
.list-row + .list-row { margin-top: 10px; }
.list-row .lr-photo { width: 62px; height: 62px; border-radius: 12px; overflow: hidden; flex: none; background: var(--cream-2); }
.list-row .lr-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.list-row .lr-main { flex: 1; min-width: 0; }
.list-row .lr-main strong { display: block; font-size: 14px; font-weight: 500; line-height: 1.3; }
.list-row .lr-main span { font-size: 12px; color: var(--ink-soft); }
.list-row .lr-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.statut {
  display: inline-block; font-size: 11px; padding: 3px 9px; border-radius: 999px;
  background: var(--cream-2); color: #48525F; border: 1px solid var(--line);
}
.statut.publiee { background: #EAF6F1; color: #1B5B47; border-color: #B9E2D3; }
.statut.en_attente { background: #FFF6E4; color: #7A5A0C; border-color: #EFDCA9; }
.statut.refusee, .statut.expiree, .statut.suspendue { background: #FBEDEC; color: #8C2B22; border-color: #EFC7C3; }
.statut.payee { background: #EAF6F1; color: #1B5B47; border-color: #B9E2D3; }
.statut.annulee { background: #FBEDEC; color: #8C2B22; border-color: #EFC7C3; }
.statut.premium { background: linear-gradient(135deg, var(--gold-bright), var(--gold)); color: #24190A; border: 0; font-weight: 600; }

/* onglets de filtrage (mes annonces) */
.tabs-scroll {
  display: flex; gap: 7px; overflow-x: auto; margin: 0 -18px 14px; padding: 0 18px 4px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.tabs-scroll::-webkit-scrollbar { display: none; }
.tab-chip {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-size: 12.5px; color: #35404F; white-space: nowrap;
  background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 13px;
  transition: background .18s ease, border-color .18s ease;
}
.tab-chip .tc-nb {
  font-size: 10.5px; background: var(--cream-2); color: var(--ink-soft);
  border-radius: 999px; padding: 1px 6px; min-width: 18px; text-align: center;
}
.tab-chip.on {
  background: #FFF8E6; border-color: var(--gold-light); color: #6B4E0B; font-weight: 500;
}
.tab-chip.on .tc-nb { background: rgba(185, 144, 43, .18); color: #6B4E0B; }
.motif-refus {
  display: flex; align-items: flex-start; gap: 5px; margin-top: 5px;
  font-size: 11.5px; color: #8C2B22; line-height: 1.4;
}
.motif-refus svg { flex: none; margin-top: 2px; }
.mail-alert {
  display: flex; flex-direction: column; gap: 10px;
  background: #FFF8E6; border-color: var(--gold-light); color: #6B4E0B;
}
.mail-alert strong { display: block; margin-bottom: 3px; }
.mail-alert .btn { align-self: flex-start; }
@media (min-width: 620px) {
  .mail-alert { flex-direction: row; align-items: center; justify-content: space-between; }
  .mail-alert .btn { align-self: auto; }
}

/* ---------------------------------------------------------------- footer */
.app-footer {
  margin-top: 40px;
  background: var(--cream-2);
  border-radius: 24px 24px 0 0;
  padding: 28px 18px 26px;
  color: #35404F;
}
.app-footer .af-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.app-footer .af-brand img { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; }
.app-footer .af-brand strong { font-family: var(--serif); font-size: 22px; letter-spacing: .04em; }
.app-footer .af-about { font-size: 13px; color: var(--ink-soft); max-width: 42ch; margin-bottom: 16px; }
.app-footer .af-lines { display: grid; gap: 9px; margin-bottom: 16px; }
.app-footer .af-lines a, .app-footer .af-lines span {
  display: flex; align-items: center; gap: 9px; font-size: 13px; color: #35404F;
}
.app-footer .af-lines svg { color: var(--gold); flex: none; }
.app-footer .af-links { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; margin-bottom: 16px; }
.app-footer .af-links a { color: var(--ink-soft); }
.app-footer .af-links a.admin-link { font-size: 11px; opacity: .8; }
.app-footer .af-copy { font-size: 11.5px; color: var(--ink-soft); }

/* Bloc « Coordonnées et informations professionnelles » */
.app-footer .af-ent {
  background: linear-gradient(158deg, #0C1524 0%, #142236 62%, #17142B 100%);
  border: 1px solid rgba(185, 144, 43, .40);
  border-radius: 16px;
  padding: 16px 15px;
  margin-bottom: 16px;
  box-shadow: 0 6px 20px rgba(12, 21, 36, .16);
}
.app-footer .af-ent-title {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin: 0 0 11px;
  line-height: 1.45;
}
.app-footer .af-ent-name {
  font-family: var(--serif);
  font-size: 20px;
  letter-spacing: .06em;
  color: #F6EFDF;
  margin-bottom: 11px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(185, 144, 43, .26);
}
.app-footer .af-ent .af-lines { margin-bottom: 0; gap: 9px; }
.app-footer .af-ent .af-lines a,
.app-footer .af-ent .af-lines span {
  color: rgba(246, 239, 223, .84);
  font-size: 12.5px;
  align-items: flex-start;
  line-height: 1.5;
}
.app-footer .af-ent .af-lines a:hover { color: var(--gold-bright); }
.app-footer .af-ent .af-lines svg { color: var(--turquoise); margin-top: 2px; }
/* On ne coupe JAMAIS un mot courant (« Adresse », « Horaires »). La colonne du
   pied de page est étroite sur ordinateur : le libellé passe au-dessus de sa
   valeur, chacun sur sa ligne. */
.app-footer .af-ent .af-txt { word-break: normal; min-width: 0; }
.app-footer .af-ent .af-txt em { display: block; white-space: nowrap; margin-bottom: 1px; }
.app-footer .af-ent .af-txt a { word-break: break-all; }
.app-footer .af-ent .af-txt em {
  font-style: normal;
  color: rgba(246, 239, 223, .52);
  font-size: 11.5px;
}
.app-footer .af-ent .af-lines a .af-txt { color: var(--gold-light); }
.app-footer .af-bottom { display: block; }

/* Bloc « Nos véritables coordonnées » de la page Contact */
.coords-panel {
  background: linear-gradient(158deg, #0C1524 0%, #142236 62%, #17142B 100%);
  border: 1px solid rgba(185, 144, 43, .40);
  border-radius: var(--radius);
  padding: 20px 18px;
  color: #F6EFDF;
  box-shadow: 0 8px 26px rgba(12, 21, 36, .18);
}
.coords-title {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin: 0 0 12px;
  line-height: 1.5;
}
.coords-name {
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: .07em;
  color: #F6EFDF;
  margin-bottom: 14px;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(185, 144, 43, .26);
}
.coords-list { display: flex; flex-direction: column; gap: 11px; }
.coords-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(246, 239, 223, .88);
  text-decoration: none;
  word-break: break-word;
}
.coords-line svg { color: var(--turquoise); flex: none; margin-top: 3px; }
.coords-line em {
  font-style: normal;
  color: rgba(246, 239, 223, .52);
  font-size: 12px;
}
a.coords-line { color: var(--gold-light); }
a.coords-line:hover { color: var(--gold-bright); }
a.coords-line svg { color: var(--gold); }
@media (min-width: 900px) {
  .coords-panel { padding: 26px 28px; }
  .coords-name { font-size: 28px; }
  .coords-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 26px; }
}

/* ---------------------------------------------------------------- barre du bas flottante */
.tabbar {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  gap: 2px;
  padding: 7px 6px;
  border-radius: 28px;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(19, 28, 43, .07);
  box-shadow: 0 10px 34px rgba(12, 21, 36, .14);
}
.tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 2px 6px; border-radius: 20px; position: relative;
  font-size: 10px; color: #8A93A0; letter-spacing: .02em;
  transition: color .18s ease, background .18s ease, transform .12s ease;
}
.tabbar a:active { transform: scale(.95); }
.tabbar a svg { flex: none; }
.tabbar a.on { color: #4B3508; background: rgba(217, 180, 87, .24); font-weight: 500; }
.tabbar a .tb-badge {
  position: absolute; top: 2px; right: 50%; margin-right: -20px;
  min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px;
  background: var(--violet); color: #fff; font-size: 9px; line-height: 15px; text-align: center;
}

/* ---------------------------------------------------------------- divers */
.page-title { margin: 4px 0 6px; font-size: 32px; }
.page-lead { color: var(--ink-soft); font-size: 14px; margin-bottom: 18px; max-width: 52ch; }
/* Présentation rédigée d'une catégorie d'annonces : texte long, lisible sur
   téléphone comme sur ordinateur. Une seule colonne, largeur de lecture limitée. */
.seo-cat-intro {
  max-width: 72ch;
  margin: 4px 0 26px;
  padding: 16px 16px 4px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.seo-cat-intro p { color: #35404F; font-size: 14.5px; line-height: 1.68; }
.seo-cat-intro p + h2 { margin-top: 20px; }
.seo-cat-intro h2 { font-size: 19px; margin: 0 0 8px; color: var(--ink); }
/* Liens internes vers les univers proches, sous la présentation. */
.seo-cat-liens { max-width: 72ch; }
.seo-cat-liens h2 { font-size: 19px; margin: 0 0 10px; }
.scl-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.scl-card {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 14px; font-size: 14px; color: var(--ink);
  transition: background .16s ease, border-color .16s ease;
}
.scl-card:active { background: var(--cream-2); }
.scl-arrow { color: var(--gold); flex: none; display: flex; }
@media (min-width: 620px) {
  .scl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scl-card:hover { border-color: var(--gold-light); background: #FFFCF3; }
}
@media (min-width: 768px) {
  .seo-cat-intro { padding: 22px 26px 6px; }
  .seo-cat-intro p { font-size: 15px; }
  .seo-cat-intro h2 { font-size: 21px; }
}
.sep { height: 1px; background: var(--line); margin: 20px 0; }
.center { text-align: center; }
.muted { color: var(--ink-soft); }
.small { font-size: 12.5px; }
.stack > * + * { margin-top: 12px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.empty {
  text-align: center; padding: 34px 18px; border: 1px dashed var(--line);
  border-radius: var(--radius); color: var(--ink-soft); font-size: 13.5px;
}
.auth-wrap { max-width: 460px; margin: 0 auto; }
.confirm-ico {
  width: 64px; height: 64px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.confirm-ico.ok { background: #EAF6F1; color: #1B5B47; border: 1px solid #B9E2D3; }
.confirm-ico.err { background: var(--cream-2); color: var(--ink-soft); border: 1px solid var(--line); }
.auth-head { text-align: center; margin-bottom: 18px; }
.auth-head img { width: 56px; height: 56px; border-radius: 16px; margin-bottom: 10px; }
.auth-head h1 { font-size: 30px; }
.auth-foot { text-align: center; font-size: 13px; color: var(--ink-soft); margin-top: 14px; }
.auth-foot a { color: var(--gold); font-weight: 500; }

.toast-wrap { position: fixed; left: 16px; right: 16px; bottom: calc(var(--bar-h) + 24px + env(safe-area-inset-bottom, 0px)); z-index: 120; display: grid; gap: 8px; pointer-events: none; }
.toast {
  background: var(--night); color: var(--cream); border-radius: 14px; padding: 12px 16px;
  font-size: 13.5px; box-shadow: 0 12px 30px rgba(12, 21, 36, .3);
  animation: toastIn .28s ease;
}
.toast.err { background: #7C2A22; }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.install-btn { display: inline-flex; align-items: center; gap: 8px; }

/* ---------------------------------------------------------------- écran d'ouverture */
#app-splash {
  display: none;
  position: fixed; inset: 0; z-index: 99999; pointer-events: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: #0C1524; color: #F6E9C6;
}
#app-splash.show { display: flex; animation: splashOut .4s ease 1.2s forwards; }
#app-splash img { width: 96px; height: 96px; border-radius: 26px; }
#app-splash span { font-family: var(--serif); font-size: 26px; letter-spacing: .12em; }
@keyframes splashOut { to { opacity: 0; visibility: hidden; } }
/* ============================================================ menu principal */
.mainnav {
  display: flex; align-items: center; gap: 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
  margin-bottom: 18px;
}
.mainnav .mn-track {
  display: flex; align-items: center; gap: 4px;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  flex: 1 1 auto; min-width: 0;
}
.mainnav .mn-track::-webkit-scrollbar { display: none; }
.mainnav .mn-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: #35404F; white-space: nowrap;
  padding: 7px 10px; border-radius: 8px;
}
.mainnav .mn-link:active { background: var(--cream-2); }
.mainnav .mn-link.on { color: var(--ink); font-weight: 500; background: var(--cream-2); }
.mainnav .mn-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.mainnav .mn-account { font-size: 12.5px; }
.mainnav .mn-depot { white-space: nowrap; }
@media (max-width: 479px) {
  .mainnav { flex-wrap: wrap; gap: 8px; }
  .mainnav .mn-track { order: 2; width: 100%; flex: 1 0 100%; }
  .mainnav .mn-actions { order: 1; width: 100%; justify-content: space-between; }
}

/* ============================================================ barre de recherche accueil */
.search-hero {
  background: linear-gradient(150deg, #0C1524, #161028);
  border: 1px solid rgba(217, 180, 87, .30);
  border-radius: var(--radius);
  padding: 18px 16px;
  color: #F3ECDF;
  box-shadow: var(--shadow);
}
.search-hero .sh-head { margin-bottom: 14px; }
.search-hero .sh-kicker {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-light); margin-bottom: 6px;
}
.search-hero .sh-lead { font-size: 12.5px; color: rgba(251, 247, 239, .72); margin: 0; }
.search-hero .field { margin: 0; }
.search-hero .field label { color: rgba(251, 247, 239, .74); }
.search-hero .field input,
.search-hero .field select {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(251, 247, 239, .22);
  color: #F3ECDF;
}
.search-hero .field input::placeholder { color: rgba(251, 247, 239, .45); }
.search-hero .field select option { color: #131C2B; background: #fff; }
.search-hero .sh-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.search-hero .sh-submit { display: flex; align-items: flex-end; }

/* ============================================================ présentation accueil */
.intro-block {
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 18px;
}
.intro-block .ib-kicker {
  display: block; font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 8px;
}
.intro-block h2 { font-size: 23px; margin-bottom: 10px; }
.intro-block p { font-size: 13.5px; color: var(--ink-soft); }
.intro-block .ib-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.intro-block .ib-cta .btn { flex: 1 1 auto; }

/* ============================================================ avantages */
.adv-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.adv-card {
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 16px; box-shadow: var(--shadow-soft);
}
.adv-card .adv-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 11px;
  background: linear-gradient(140deg, rgba(217, 180, 87, .22), rgba(91, 58, 142, .14));
  color: var(--gold); margin-bottom: 10px;
}
.adv-card strong { display: block; font-family: var(--serif); font-size: 17px; margin-bottom: 5px; }
.adv-card p { font-size: 12.8px; color: var(--ink-soft); margin: 0; }

/* ============================================================ tarifs */
.price-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 14px; }
.price-card {
  position: relative;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 18px 16px; text-align: center; box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column; gap: 4px;
}
.price-card .price-dur {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft);
}
.price-card .price-amt { font-family: var(--serif); font-size: 30px; font-weight: 600; line-height: 1.1; }
.price-card .price-unit { font-size: 11.5px; color: var(--ink-soft); margin-bottom: 10px; }
.price-card.price-best {
  border-color: rgba(217, 180, 87, .68);
  box-shadow: 0 0 0 1px rgba(217, 180, 87, .18), 0 14px 34px rgba(12, 21, 36, .10);
}
.price-card .price-tag {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #24190A; font-size: 9px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 5px; white-space: nowrap;
}
.price-card.price-prem {
  background: linear-gradient(160deg, #0C1524, #161028);
  border-color: rgba(217, 180, 87, .38); color: #F3ECDF;
}
.price-card.price-prem .price-dur { color: var(--gold-light); }
.price-card.price-prem .price-unit { color: rgba(251, 247, 239, .62); }
.price-card.price-prem .btn { color: #F3ECDF; border-color: rgba(251, 247, 239, .34); }
.tarif-note { margin-top: 18px; }

/* ============================================================ pages liste (catégories, tarifs, premium) */
.page-hero {
  background:
    radial-gradient(120% 150% at 6% 0%, rgba(31, 158, 147, .20), transparent 55%),
    radial-gradient(120% 160% at 98% 100%, rgba(91, 58, 142, .34), transparent 58%),
    linear-gradient(112deg, #0A1120 0%, #0C1524 45%, #161028 100%);
  border: 1px solid rgba(217, 180, 87, .30);
  border-radius: var(--radius);
  padding: 24px 18px;
  color: #F3ECDF;
}
.page-hero .ph-kicker {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-light); margin-bottom: 8px;
}
.page-hero h1 { font-size: 28px; color: #FBF3DF; margin-bottom: 8px; }
.page-hero p { font-size: 13.5px; color: rgba(251, 247, 239, .74); max-width: 60ch; margin: 0; }

.cat-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.cat-card {
  display: flex; align-items: center; gap: 13px;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 14px; transition: transform .12s ease, box-shadow .2s ease;
}
.cat-card:active { transform: scale(.985); }
.cat-card .cc-ico {
  width: 42px; height: 42px; border-radius: 12px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, rgba(217, 180, 87, .22), rgba(91, 58, 142, .14));
  color: var(--gold);
}
.cat-card .cc-main { flex: 1; min-width: 0; }
.cat-card .cc-main strong { display: block; font-size: 14.5px; font-weight: 500; line-height: 1.3; }
.cat-card .cc-main span { font-size: 11.5px; color: var(--ink-soft); }
.cat-card .cc-arrow { color: var(--ink-soft); flex: none; }

.prose-page { font-size: 14px; color: #35404F; }
.prose-page h2 { font-size: 21px; margin: 22px 0 8px; }
.prose-page h2:first-child { margin-top: 0; }
.prose-page h3 { font-size: 16px; font-family: var(--sans); font-weight: 600; margin: 16px 0 6px; }
.prose-page p { margin-bottom: 10px; }
.prose-page ul { margin: 0 0 12px; padding-left: 20px; }
.prose-page li { margin-bottom: 6px; }

/* ==========================================================================
   Ordinateur — à partir de 900px
   ========================================================================== */
@media (min-width: 900px) {
  body { padding-left: 260px; padding-bottom: 0; font-size: 15.5px; }

  .menu-btn, .sidemenu, .scrim, .tabbar { display: none !important; }
  body.menu-open { overflow: auto; }

  .sidecol {
    display: flex; flex-direction: column; gap: 4px;
    position: fixed; top: 0; left: 0; bottom: 0; width: 260px;
    background: #fff; padding: 26px 18px;
    border-right: 1px solid var(--line);
    overflow-y: auto;
  }
  .sidecol .sc-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
  .sidecol .sc-brand img { width: 38px; height: 38px; border-radius: 12px; object-fit: cover; }
  .sidecol .sc-brand strong { font-family: var(--serif); font-size: 21px; letter-spacing: .06em; }
  .sidecol .sc-brand span { display: block; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
  .sidecol a.sc-link {
    display: flex; align-items: center; gap: 12px; padding: 11px 12px;
    border-radius: 12px; font-size: 14.5px; color: #35404F;
  }
  .sidecol a.sc-link:hover { background: var(--cream); }
  .sidecol a.sc-link.on { background: var(--cream-2); color: var(--ink); font-weight: 500; }
  .sidecol a.sc-link svg { color: var(--gold); flex: none; }
  .sidecol .sc-bottom { margin-top: auto; padding-top: 16px; display: grid; gap: 8px; }

  .app-main { padding-top: 0; padding-left: 40px; padding-right: 40px; max-width: 1140px; }
  .wrap { padding: 0 40px; }
  .app-footer { margin-left: 0; margin-right: 0; border-radius: 24px; padding: 32px 40px; margin-top: 48px; }

  .brand-head { padding: 34px 0 22px; }
  .brand-head .bh-name { font-size: 46px; }

  .hero-track { margin: 0; gap: 0; overflow: visible; display: block; }
  .hero-slide { padding: 0; }
  .hero-slide + .hero-slide { display: none; }
  .hero-frame { aspect-ratio: 21 / 9; max-height: 460px; }
  .hero-cap { padding: 34px 38px; }
  .hero-cap h1 { font-size: 46px; }
  .hero-cap p { font-size: 16px; max-width: 46ch; }
  .hero-cta { max-width: 420px; }
  .hero-dots { display: none; }

  .spec-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .spec-card { padding: 18px; }
  .spec-card strong { font-size: 15px; }

  .cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .card-annonce h3 { font-size: 16px; }
  .card-annonce .ca-desc { font-size: 12.5px; }

  .book { display: none; }
  .book-nav, .book-hint { display: none; }
  .book-desktop { display: grid !important; }

  .section { margin-top: 44px; }
  .section-head h2 { font-size: 28px; }
  .section-head .link-more { font-size: 13.5px; }

  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .filters { grid-template-columns: 1.4fr 1fr 1fr auto; gap: 12px; align-items: end; }
  .duree-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fiche-hero { aspect-ratio: 16 / 7; }
  .prose { font-size: 16px; }

  .app-footer .af-inner { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 32px; }
  .app-footer .af-links { margin-bottom: 0; }

  .toast-wrap { left: auto; right: 24px; bottom: 24px; width: 340px; }

  .premium-hero { padding: 20px 0 22px; border-radius: 22px; }
  .premium-hero .ph-head { padding: 0 22px 16px; gap: 12px; }
  .premium-hero .ph-title { font-size: 18px; }
  .premium-hero .pm-group { gap: 14px; padding: 0 11px; }
  .pm-card { width: 272px; border-radius: 18px; }
  .pm-card .pm-name { font-size: 20px; }
  .pm-card .pm-fonction { font-size: 10.5px; }
  .pm-card .pm-tel { font-size: 14.5px; padding: 6px 12px; }
}

/* adaptation des nouveaux blocs en largeur ordinateur */
@media (min-width: 900px) {
  .mainnav { padding: 12px 0; margin-bottom: 22px; }
  .mainnav .mn-link { font-size: 13.5px; padding: 8px 12px; }
  /* Sur ordinateur la colonne de gauche réduit la largeur disponible : les
     liens doivent pouvoir passer à la ligne plutôt que d'être coupés au bord
     du conteneur. L'apparence, les couleurs et l'ordre restent identiques. */
  .mainnav { flex-wrap: wrap; row-gap: 8px; }
  .mainnav .mn-track { flex: 1 1 0; flex-wrap: wrap; overflow: visible; row-gap: 4px; }
  .mainnav .mn-actions { flex-wrap: wrap; row-gap: 6px; }
  .search-hero { padding: 22px 24px; }
  .search-hero .sh-grid { grid-template-columns: 1.25fr 1fr .9fr .7fr 1fr auto; gap: 12px; align-items: end; }
  .search-hero .sh-submit .btn { white-space: nowrap; }
  .intro-block { padding: 28px 32px; }
  .intro-block h2 { font-size: 30px; }
  .intro-block p { font-size: 15px; max-width: 74ch; }
  .adv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .price-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .price-card { padding: 22px 18px; }
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .page-hero { padding: 34px 36px; }
  .page-hero h1 { font-size: 38px; }
  .page-hero p { font-size: 15px; }
}

@media (min-width: 1400px) {
  .cards-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001s !important; transition-duration: .001s !important; }
  .pm-track.pm-run { animation: none !important; overflow-x: auto; }
}

.book-desktop { display: none; }

/* ==========================================================================
   BANDEAU PASSANT administrable + ANNUAIRE et CARTE DE FRANCE
   ========================================================================== */

/* Lien éventuel dans une diapositive du bandeau passant. */
/* Le lien est place DANS .hero-cap, qui porte pointer-events:none (pour ne pas
   bloquer le defilement du bandeau). Sans cette ligne, le clic ne l atteint jamais. */
.hero-slide-link {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px; padding: 8px 18px;
  border-radius: 8px; background: var(--gold); color: var(--night);
  font-size: 13px; font-weight: 600; text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}
.hero-slide-link:hover { background: var(--gold-bright); }

/* ------------------------------------------------------------------ annuaire */

.an-hero {
  background: linear-gradient(150deg, var(--night) 0%, var(--night-2) 60%, #1B2A44 100%);
  border-radius: var(--radius); padding: 26px 20px; margin-bottom: 18px;
  border: 1px solid rgba(185, 144, 43, .35);
}
.an-hero h1 {
  font-family: var(--serif); font-size: 28px; line-height: 1.15;
  color: var(--gold-light); margin: 0 0 8px;
}
.an-hero p { color: #C9D4E4; font-size: 14px; line-height: 1.6; margin: 0; }
.an-hero .an-count {
  display: inline-block; margin-top: 12px; padding: 5px 12px;
  border-radius: 6px; background: rgba(31, 158, 147, .18);
  border: 1px solid rgba(31, 158, 147, .5);
  color: #7FD8CE; font-size: 12px; letter-spacing: .04em;
}
.an-hero .an-offre {
  display: inline-block; margin-top: 12px; margin-left: 6px; padding: 5px 12px;
  border-radius: 6px; background: rgba(185, 144, 43, .16);
  border: 1px solid rgba(185, 144, 43, .5);
  color: var(--gold-light); font-size: 12px;
}

/* La carte de France — charte bleu nuit / ivoire / turquoise */
.map-card {
  background:
    radial-gradient(120% 140% at 8% 0%, rgba(32, 196, 196, .13), transparent 55%),
    radial-gradient(120% 150% at 96% 100%, rgba(91, 58, 142, .26), transparent 58%),
    linear-gradient(160deg, var(--map-night) 0%, #0B1B30 55%, var(--map-night-2) 100%);
  border: 1px solid rgba(185, 144, 43, .34);
  border-radius: var(--radius); padding: 14px 12px 8px;
  margin-bottom: 18px; position: relative; overflow: hidden;
  box-shadow: 0 12px 34px rgba(8, 22, 41, .22);
}
.map-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 6px; position: relative; z-index: 2;
}
.map-head h2 {
  font-family: var(--serif); font-size: 17px; color: var(--map-ivory);
  margin: 0; display: flex; align-items: center; gap: 7px;
}
.map-head h2 svg { color: var(--map-teal); }
.map-legend { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11px; color: rgba(245, 240, 230, .72); }
.map-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }
.map-legend .lg-gold i { background: var(--gold-bright); }
.map-legend .lg-teal i { background: var(--map-teal); }

/* La carte garde TOUJOURS ses proportions : on limite sa largeur, jamais sa
   hauteur (un max-height sur un SVG large l'écrase verticalement). */
.map-wrap { position: relative; z-index: 2; max-width: 430px; margin: 0 auto; }
.map-svg { width: 100%; height: auto; display: block; }
.map-svg .fr-land {
  fill: var(--map-ivory); stroke: rgba(8, 22, 41, .45); stroke-width: .5;
}
.map-svg .fr-land-glow { fill: rgba(32, 196, 196, .16); stroke: none; }

.map-dot { cursor: pointer; }
.map-dot circle.hit { fill: transparent; }
.map-dot circle.pin {
  fill: var(--map-teal-deep); stroke: var(--map-ivory); stroke-width: .9;
  transition: fill .18s ease, r .18s ease;
}
.map-dot.is-premium circle.pin { fill: var(--gold-bright); }
.map-dot:hover circle.pin, .map-dot.on circle.pin { fill: var(--map-teal); }
.map-dot text { pointer-events: none; }

.map-hint {
  text-align: center; color: rgba(245, 240, 230, .74); font-size: 11.5px;
  padding: 8px 0 2px; position: relative; z-index: 2;
}
.map-empty {
  text-align: center; color: rgba(245, 240, 230, .78); font-size: 13px;
  padding: 30px 16px; line-height: 1.6; position: relative; z-index: 2;
}

/* Fiche de professionnel de l'annuaire */
.an-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.an-card {
  display: flex; gap: 12px; align-items: center;
  background: #fff; border: 1px solid var(--line);
  border-radius: 16px; padding: 12px; text-decoration: none;
  color: inherit; box-shadow: var(--shadow-soft);
  transition: transform .16s ease, box-shadow .16s ease;
}
.an-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.an-photo {
  width: 66px; height: 66px; border-radius: 14px; overflow: hidden;
  flex: 0 0 66px; background: var(--cream-2); position: relative;
}
.an-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.an-main { flex: 1; min-width: 0; }
.an-main strong { display: block; font-size: 15px; color: var(--ink); }

/* Mention des profils de démonstration : elle doit sauter aux yeux, pour que
   personne ne prenne un profil de test pour un véritable praticien. */
.badge-test {
  display: inline-block;
  margin-top: 5px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .07em;
  line-height: 1.35;
  text-transform: uppercase;
  color: #6B2E00;
  background: #FFD9A8;
  border: 1px solid #E0A050;
  border-radius: 5px;
  padding: 3px 7px;
}
.an-main .an-spe { display: block; font-size: 12.5px; color: var(--gold); margin-top: 2px; }
.an-main .an-city { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 3px; }
.an-actions { flex: 0 0 auto; color: var(--gold); display: flex; align-items: center; }

/* Bandeau d'appel pour les professionnels non inscrits */
.an-cta {
  margin-top: 20px; padding: 22px 18px; border-radius: var(--radius);
  background: linear-gradient(150deg, #17263C, #23213F);
  border: 1px solid rgba(185, 144, 43, .4); text-align: center;
}
.an-cta h3 {
  font-family: var(--serif); font-size: 21px; color: var(--gold-light); margin: 0 0 8px;
}
.an-cta p { color: #C9D4E4; font-size: 13.5px; line-height: 1.6; margin: 0 0 14px; }

/* ------------------------------------------------------------------ page vitrine */

.vt-hero {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(150deg, var(--night), #1B2A44 70%, #2A2340);
  border: 1px solid rgba(185, 144, 43, .35);
  padding: 22px 18px; margin-bottom: 16px;
}
.vt-hero-inner { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.vt-photo {
  width: 92px; height: 92px; border-radius: 20px; overflow: hidden;
  flex: 0 0 92px; border: 2px solid rgba(185, 144, 43, .6);
  background: var(--night-2);
}
.vt-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vt-id { flex: 1; min-width: 160px; }
.vt-id h1 {
  font-family: var(--serif); font-size: 25px; color: var(--gold-light);
  margin: 0 0 4px; line-height: 1.15;
}
.vt-id .vt-spe { color: #7FD8CE; font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; }
.vt-id .vt-city { color: #C9D4E4; font-size: 13px; margin-top: 6px; }
.vt-badges { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.vt-badge {
  font-size: 11px; padding: 4px 10px; border-radius: 6px;
  border: 1px solid rgba(185, 144, 43, .45); color: var(--gold-light);
  background: rgba(185, 144, 43, .12);
}
.vt-badge.teal { border-color: rgba(31, 158, 147, .5); color: #7FD8CE; background: rgba(31, 158, 147, .12); }
/* Profil de démonstration : la mention doit être immédiatement lisible sur la
   fiche, au même endroit que les autres badges. */
.vt-badge.test {
  border-color: #E0A050;
  color: #6B2E00;
  background: #FFD9A8;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 10px;
}

.vt-contact { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; position: relative; z-index: 2; }
.vt-contact .btn { font-size: 13px; }

.vt-map {
  margin-top: 16px; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(185, 144, 43, .28);
  background:
    radial-gradient(120% 140% at 10% 0%, rgba(32, 196, 196, .14), transparent 60%),
    linear-gradient(160deg, var(--map-night) 0%, #0B1B30 60%, var(--map-night-2) 100%);
  padding: 8px;
}
.vt-map .map-svg { max-width: 100%; height: auto; display: block; }

/* ------------------------------------------------------------------ responsive */

/* ------------------------------------------------ départements cliquables */
/* Charte : fond bleu nuit, départements ivoire, contours fins. Turquoise au
   survol, turquoise plus soutenu pour le département ouvert. */
.map-svg .fr-dept {
  fill: var(--map-ivory);
  stroke: rgba(8, 22, 41, .40);
  stroke-width: .55;
  stroke-linejoin: round;
  pointer-events: all;
  transition: fill .16s ease, stroke .16s ease;
}
/* Départements habités : à peine plus chauds, sans crier. */
.map-svg .fr-dept.has-pros {
  fill: #FFFBF1;
  stroke: rgba(7, 158, 170, .62);
  stroke-width: .7;
}
/* Département ouvert (filtré) : turquoise soutenu, contour net. */
.map-svg .fr-dept.is-active {
  fill: var(--map-teal-deep);
  stroke: var(--map-teal);
  stroke-width: 1.3;
}
.fr-dept-link { cursor: pointer; }
.fr-dept-link:hover .fr-dept { fill: var(--map-teal); stroke: var(--map-teal-deep); }
.fr-dept-link:hover .fr-dept.has-pros { fill: var(--map-teal); stroke: var(--map-teal-deep); }
.fr-dept-link:hover .fr-dept.is-active { fill: var(--map-teal-deep); stroke: var(--map-teal); }
.fr-dept-link.is-active { cursor: default; }
.fr-dept-link:focus { outline: none; }
.fr-dept-link:focus-visible .fr-dept {
  stroke: var(--map-teal); stroke-width: 1.4;
}

/* Repère turquoise sur les départements qui comptent des inscrits. */
.map-svg .fr-dept-dot {
  fill: var(--map-teal);
  stroke: var(--map-night);
  stroke-width: .8;
  pointer-events: none;
  transition: fill .16s ease;
}
.fr-dept-link:hover .fr-dept-dot { fill: #FFFFFF; }
.fr-dept-link .fr-dept.is-active + .fr-dept-dot,
.fr-dept-link.is-active .fr-dept-dot { fill: #FFFFFF; stroke: var(--map-teal-deep); }

/* recherche de l'annuaire : quatre filtres qui se combinent */
.filters.filters-4 { grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .filters.filters-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .an-hero { padding: 34px 32px; }
  .an-hero h1 { font-size: 36px; }
  .an-hero p { font-size: 15px; max-width: 70ch; }
  .an-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .map-card { padding: 18px 20px 10px; }
  .map-head h2 { font-size: 19px; }
  /* On limite la LARGEUR de la carte, jamais sa hauteur : un max-height sur un
     SVG large l'écrase et déforme les départements. */
  .map-wrap { max-width: 500px; }
  .vt-hero { padding: 30px 28px; }
  .vt-photo { width: 120px; height: 120px; flex-basis: 120px; }
  .vt-id h1 { font-size: 34px; }
}

@media (min-width: 1100px) {
  .an-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vt-layout { display: grid; grid-template-columns: 1.55fr 1fr; gap: 22px; align-items: start; }
}

/* ==========================================================================
   « LES 3 ORACLES GRATUITS » — rubrique mise en avant dans la navigation
   Placée juste après le tableau de bord, dans la colonne de gauche sur
   ordinateur et dans le menu déroulant sur téléphone. Icône tarot dorée,
   halo lumineux discret, filet doré à gauche.
   ========================================================================== */

/* Colonne de navigation — ordinateur */
.sidecol a.sc-oracle {
  position: relative;
  background: linear-gradient(135deg, rgba(217, 180, 87, .16), rgba(235, 215, 156, .07) 55%, rgba(91, 58, 142, .10));
  border: 1px solid rgba(185, 144, 43, .42);
  color: #4A3708;
  font-weight: 500;
  box-shadow: 0 2px 10px rgba(185, 144, 43, .14), inset 0 1px 0 rgba(255, 255, 255, .5);
  margin: 4px 0;
  overflow: hidden;
}
/* Filet doré lumineux sur le bord gauche */
.sidecol a.sc-oracle::before {
  content: "";
  position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
}
.sidecol a.sc-oracle svg { color: var(--gold); filter: drop-shadow(0 0 3px rgba(217, 180, 87, .65)); }
.sidecol a.sc-oracle span { letter-spacing: .005em; }
.sidecol a.sc-oracle:hover {
  background: linear-gradient(135deg, rgba(217, 180, 87, .26), rgba(235, 215, 156, .12) 55%, rgba(91, 58, 142, .14));
  border-color: var(--gold-bright);
  box-shadow: 0 4px 16px rgba(185, 144, 43, .24), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.sidecol a.sc-oracle.on {
  background: linear-gradient(135deg, rgba(217, 180, 87, .30), rgba(235, 215, 156, .14) 55%, rgba(91, 58, 142, .16));
  border-color: var(--gold-bright);
  color: #3A2A06;
  font-weight: 600;
}

/* Menu déroulant — téléphone */
.sidemenu a.sm-oracle {
  position: relative;
  background: linear-gradient(135deg, rgba(217, 180, 87, .16), rgba(235, 215, 156, .07) 55%, rgba(91, 58, 142, .10));
  border: 1px solid rgba(185, 144, 43, .40);
  color: #4A3708;
  font-weight: 500;
  margin: 4px 0;
  overflow: hidden;
}
.sidemenu a.sm-oracle::before {
  content: "";
  position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
}
.sidemenu a.sm-oracle svg { color: var(--gold); filter: drop-shadow(0 0 3px rgba(217, 180, 87, .6)); }
.sidemenu a.sm-oracle:active { background: rgba(217, 180, 87, .26); }
.sidemenu a.sm-oracle.on {
  background: linear-gradient(135deg, rgba(217, 180, 87, .30), rgba(235, 215, 156, .14) 55%, rgba(91, 58, 142, .16));
  border-color: var(--gold-bright);
  font-weight: 600;
}

/* ==========================================================================
   PASTILLE « PHASE DE LA LUNE » — accueil, juste sous le bandeau principal
   Calcul astronomique local (inc/lune.php), aucune API, aucun cookie.
   Mobile d'abord : tout s'empile, rien n'est coupé. Sur ordinateur, le disque
   passe à gauche et les informations se placent sur une ligne.
   ========================================================================== */
.lune-band { margin-top: 18px; }

.lune-pastille {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 16px;
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(120% 150% at 12% 0%, rgba(31, 158, 147, .22), transparent 55%),
    radial-gradient(130% 160% at 92% 100%, rgba(91, 58, 142, .40), transparent 58%),
    linear-gradient(112deg, #0A1120 0%, #0C1524 45%, #17142B 100%);
  border: 1px solid rgba(217, 180, 87, .40);
  box-shadow: 0 10px 30px rgba(12, 21, 36, .18), inset 0 1px 0 rgba(235, 215, 156, .12);
}

/* Voile d'étoiles très discret, dessiné en CSS (aucune image à charger) */
.lune-pastille::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .55;
  background-image:
    radial-gradient(1.4px 1.4px at 14% 26%, rgba(255, 255, 255, .85), transparent 60%),
    radial-gradient(1.2px 1.2px at 38% 72%, rgba(235, 215, 156, .80), transparent 60%),
    radial-gradient(1.6px 1.6px at 62% 18%, rgba(255, 255, 255, .70), transparent 60%),
    radial-gradient(1.2px 1.2px at 84% 58%, rgba(235, 215, 156, .78), transparent 60%),
    radial-gradient(1.1px 1.1px at 72% 86%, rgba(255, 255, 255, .62), transparent 60%),
    radial-gradient(1.3px 1.3px at 26% 90%, rgba(235, 215, 156, .62), transparent 60%);
}

/* Filet doré lumineux sur le bord supérieur */
.lune-pastille::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-bright), var(--gold-light), var(--gold-bright), transparent);
  opacity: .9;
}

.lune-pastille > * { position: relative; z-index: 1; }

/* ---- le disque */
.lune-pastille .lp-moon {
  align-self: center;
  flex: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  /* Halo lumineux diffus : aucun disque visible, juste une lueur dorée */
  background: radial-gradient(circle at 50% 50%, rgba(235, 215, 156, .13), rgba(235, 215, 156, .04) 52%, transparent 70%);
}
.lune-pastille .lune-svg { display: block; filter: drop-shadow(0 0 5px rgba(217, 180, 87, .34)); }

/* ---- nom de la phase + illumination */
.lune-pastille .lp-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
  min-width: 0;
}
.lune-pastille .lp-kick {
  font-size: 9.5px;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: var(--gold-light);
  opacity: .9;
}
.lune-pastille .lp-phase {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .01em;
  color: #FBF3DF;
}
.lune-pastille .lp-illum {
  font-size: 12.5px;
  color: #7FD8CE;
  letter-spacing: .02em;
}

/* ---- prochaines lunaisons */
.lune-pastille .lp-next {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  padding-top: 13px;
  border-top: 1px solid rgba(217, 180, 87, .20);
}
.lune-pastille .lp-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.lune-pastille .lp-lab {
  font-size: 9.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(251, 247, 239, .56);
  line-height: 1.4;
}
.lune-pastille .lp-val {
  font-size: 13.5px;
  font-weight: 500;
  color: #F1E3C0;
  line-height: 1.35;
}

/* ---- date du jour */
.lune-pastille .lp-date {
  text-align: center;
  font-size: 11.5px;
  letter-spacing: .05em;
  color: rgba(251, 247, 239, .52);
  padding-top: 2px;
}

@media (min-width: 620px) {
  .lune-pastille {
    flex-direction: row;
    align-items: center;
    gap: 18px;
    padding: 18px 22px;
  }
  .lune-pastille .lp-moon { align-self: center; }
  .lune-pastille .lp-main { align-items: flex-start; text-align: left; flex: 1 1 auto; }
  .lune-pastille .lp-next {
    flex: 0 0 auto;
    grid-template-columns: 1fr;
    gap: 10px;
    padding-top: 0;
    padding-left: 18px;
    border-top: 0;
    border-left: 1px solid rgba(217, 180, 87, .20);
  }
  .lune-pastille .lp-date {
    flex: 0 0 auto;
    text-align: right;
    padding-top: 0;
    max-width: 12ch;
    line-height: 1.45;
  }
}

@media (min-width: 900px) {
  .lune-band { margin-top: 22px; }
  .lune-pastille { padding: 20px 26px; gap: 22px; }
  .lune-pastille .lp-moon { width: 92px; height: 92px; }
  .lune-pastille .lp-phase { font-size: 24px; }
  .lune-pastille .lp-next { grid-template-columns: 1fr 1fr; gap: 22px; }
  .lune-pastille .lp-date { max-width: 14ch; }
}

/* Le titre des diapositives 2 à 5 est un <h2> (un seul <h1> par page pour Google).
   Ces règles lui redonnent EXACTEMENT l'apparence de l'ancien <h1> : aucun
   changement visuel, seule la hiérarchie des titres change. */
.hero-cap h2 { font-size: 30px; line-height: 1.05; color: #fff; margin-bottom: 6px; }
@media (min-width: 900px) { .hero-cap h2 { font-size: 46px; } }