/* Structure partagée des exemples : remise à zéro, bandeau Nexyris et ossature des formulaires.
   L'apparence et la composition sont entièrement définies par la feuille de chaque style. */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-var.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: hidden; }
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset { margin: 0; padding: 0; border: 0; }
ul, ol { list-style: none; }
h1:focus { outline: none; }
svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.notice { position: relative; z-index: 30; background: #000; color: #fff; font-family: "Archivo", Arial, sans-serif; font-size: 15px; line-height: 1.4; }
.notice-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px; max-width: 1240px; margin: 0 auto; padding: 9px clamp(16px, 4vw, 56px); }
.notice-links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.notice a { color: #6fe3a0; text-underline-offset: 3px; }

.demo-form { display: grid; gap: 18px; }
.demo-form label, .demo-form legend { display: block; }
.demo-form input:not([type="radio"]), .demo-form select, .demo-form textarea { display: block; width: 100%; min-height: 50px; margin-top: 6px; padding: 10px 14px; }
.demo-form textarea { min-height: 130px; resize: vertical; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.demo-form .demo-button { justify-self: start; }
.form-result:empty { display: none; }
.form-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin-top: 8px; }
.slot { position: relative; display: flex !important; align-items: center; justify-content: center; min-height: 54px; padding: 6px; text-align: center; line-height: 1.25; cursor: pointer; }
.slot input { position: absolute; opacity: 0; }
.slot:has(input:disabled) { cursor: not-allowed; text-decoration: line-through; opacity: .5; }
.booking { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.recap { position: sticky; top: 16px; padding: 24px; }
.account { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.account li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; }
.account li span:last-child { text-align: right; }
.faq summary { cursor: pointer; }
.menu-toggle { display: none; min-height: 44px; padding: 0 16px; }

@media (max-width: 860px) {
  .form-row, .form-layout, .booking, .account { grid-template-columns: minmax(0, 1fr); }
  .recap { position: static; }
  .menu-toggle { display: inline-block; }
  .nav { display: none; }
  .nav.is-open { display: block; }
}

/* Le site ne déborde jamais, même quand une composition déborde volontairement de sa section. */
#site { overflow-x: clip; }
.touch-target { min-width: 44px; min-height: 44px; }