/* Défauts d'éléments minimaux : la page dans le monde papier-et-vert de la marque.
   Les composants portent leur propre style (Elementor). Ici : ce que le Kit ne sait pas régler. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { background: var(--surface-page); color: var(--text-primary); -webkit-font-smoothing: antialiased; text-wrap: pretty; }
::selection { background: var(--gold-150); color: var(--forest-900); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-xs); }
img { max-width: 100%; height: auto; }

/* Ancres : toute cible #id s'arrête sous l'en-tête collant, jamais dessous. */
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

/* Lien d'évitement : invisible jusqu'au focus clavier. */
.vlbh-skip { position: absolute; left: 12px; top: -100px; z-index: 10000; padding: 10px 16px; background: var(--forest-800); color: var(--cream-100);
  font: var(--type-label); letter-spacing: var(--tracking-label); border-radius: var(--radius-pill); text-decoration: none; transition: top var(--dur-fast) var(--ease-out); }
.vlbh-skip:focus { top: 12px; }

/* Filet or + losange entre chaque paire FR / EN. */
.vlbh-rule { display: flex; align-items: center; justify-content: center; gap: var(--space-3); color: var(--gold-300); }
.vlbh-rule::before, .vlbh-rule::after { content: ""; height: 1px; flex: 1; background: currentColor; opacity: 0.7; }

/* Marqueur « à compléter » : visible en recette, disparaît quand la cliente fournit la donnée. */
/* Note (composant Note de la maquette) : pastille ronde 22 px avec icône 13, texte FR 14.5 + EN italique 12.5. */
.vlbh-note { display: flex; align-items: flex-start; gap: 10px; color: var(--text-secondary); }
.vlbh-note--sombre { color: var(--cream-200); }
.vlbh-note__ico { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--gold-300); display: grid; place-items: center; flex: none; margin-top: 1px; }
.vlbh-note__ico svg { width: 13px; height: 13px; fill: none; stroke: var(--gold-700); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.vlbh-note--sombre .vlbh-note__ico svg { stroke: var(--gold-200); }
.vlbh-note__txt { display: grid; gap: 3px; min-width: 0; }
.vlbh-note__fr { font: 400 14.5px/1.55 var(--font-body); }
.vlbh-note__en { font: italic 400 12.5px/1.5 var(--font-body); color: var(--text-muted); }
.vlbh-note--sombre .vlbh-note__en { color: var(--gold-200); }
/* Textes de travail « À compléter » : un seul style de repérage avant mise en ligne (règle exacte de la maquette). */
.vlbh-todo, .vlbh-todo * { font-family: var(--font-body) !important; font-style: italic !important; font-weight: 400 !important; font-size: 12.5px !important; line-height: 1.5 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--text-faint) !important; }
.vlbh-todo svg { width: 13px !important; height: 13px !important; color: var(--text-faint) !important; stroke: var(--text-faint) !important; }
.vlbh-todo-avant::before { content: "À compléter — "; }
.vlbh-todo-sombre, .vlbh-todo-sombre * { color: var(--gold-200) !important; }
.vlbh-todo-sombre svg { color: var(--gold-200) !important; stroke: var(--gold-200) !important; }

/* Champs de formulaire Elementor alignés sur la charte (radius, bordure, focus). */
.elementor-field-group .elementor-field { border-radius: var(--field-radius); border: var(--border-hair) solid var(--border-hairline); background: var(--cream-050); color: var(--text-primary); }
.elementor-field-group .elementor-field:focus { border-color: var(--border-gold); box-shadow: var(--ring-focus); outline: none; }
.elementor-message.elementor-message-danger { color: var(--red-600); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Boutons Elementor = composant Button de la maquette : icône 15/17/19 selon la taille (xs = pastille, sm = md maquette, lg = lg),
   texte et icône espacés de 9 px, appui qui s'enfonce de 1 px, pas de levée au survol. */
.elementor-button { transition: var(--transition-color), transform var(--dur-instant) var(--ease-out); }
.elementor-button:active { transform: var(--press-translate); }
.elementor-button .elementor-button-content-wrapper { gap: 9px; align-items: center; }
.elementor-button .elementor-button-icon { display: flex; }
.elementor-button .elementor-button-icon svg { display: block; width: 17px; height: 17px; }
.elementor-button.elementor-size-lg .elementor-button-icon svg { width: 19px; height: 19px; }
.elementor-button.elementor-size-xs .elementor-button-icon svg { width: 15px; height: 15px; }
/* Icônes lucide (SVG déposés dans la médiathèque) : trait 1.75 comme le composant Icon de la maquette. */
.elementor-button-icon svg, .elementor-icon svg, .elementor-icon-list-icon svg { stroke-width: 1.75; }
/* Rangée de boutons (.vlbh-buttons, classe posée sur le conteneur) : comme le flex de la maquette, les boutons
   d'une même rangée prennent la même hauteur (celui qui porte une icône impose 45 px). */
.vlbh-buttons > .elementor-widget-button > *, .vlbh-buttons .elementor-button-wrapper { height: 100%; }
.vlbh-buttons .elementor-button { height: 100%; display: inline-flex; align-items: center; justify-content: center; }

/* Bloc final « Bon séjour ! » (carte CTA de la maquette) et ses règles d'écran, copiées de page-kit.css. */
.vlbh-cta-phone { display: inline-flex; align-items: center; gap: 8px; font: 400 15px/1.65 var(--font-sans); color: var(--forest-800); text-wrap: pretty; }
/* Paragraphes que la maquette compose en « text-wrap: pretty » (pas de mot orphelin en fin de bloc). */
.vlbh-pretty, .vlbh-pretty p { text-wrap: pretty; }
.vlbh-cta-phone svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--gold-900); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 640px) {
  .vlbh-cta-card { padding: 40px 15px 32px !important; }
  .vlbh-cta-ornament { width: 96px !important; opacity: .9; }
  .vlbh-cta-script > * { font-size: 34px !important; }
  .vlbh-cta-buttons { flex-direction: column !important; gap: 10px !important; }
  .vlbh-cta-buttons > * { width: 100% !important; }
  .vlbh-cta-phone { display: block !important; font-size: 13.5px !important; line-height: 1.5 !important; }
  /* Dans la maquette, l'icône (display:block en ligne) passe seule sur la première ligne ; le texte se centre en dessous. */
  .vlbh-cta-phone svg { display: block; margin: 0; }
}
@media (min-width: 641px) and (max-width: 1080px) {
  .vlbh-cta-ornament { width: 140px !important; }
  .vlbh-cta-card { padding: 56px 40px 48px !important; }
}

/* Note de source (SourceNote de la maquette) : pastille 20 px cerclée d'or avec icône 12, texte 11.5/1.45 atténué. */
.vlbh-source-note { display: flex; align-items: flex-start; gap: 12px; color: var(--text-muted); }
.vlbh-source-note__ico { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--gold-300); display: grid; place-items: center; flex: none; margin-top: 1px; }
.vlbh-source-note__ico svg { width: 12px; height: 12px; fill: none; stroke: var(--gold-700); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.vlbh-source-note__txt { display: grid; gap: 3px; min-width: 0; }
.vlbh-source-note__fr { font: 400 11.5px/1.45 var(--font-body); }
.vlbh-source-note__en { font: italic 400 10.5px/1.45 var(--font-body); color: var(--text-faint); }
/* Numéro d'étape : bulle 22 px crème cerclée d'or, chiffre Cormorant 12 or foncé (page Logements). */
.vlbh-etape-num { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--cream-050); border: 1px solid var(--gold-500); font: 600 12px/1 var(--font-serif); color: var(--gold-900); }