:root{
    --sand:#F4EFE4;
    --sand-warm:#E7E0D2;
    --gold:#C8A063;
    --bordeaux:#762F3E;
    --green:#3E4A3D;
    --ink:#26231F;
    --muted:#6E675E;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    min-height:100vh;background:var(--sand-warm);color:var(--ink);
    font-family:'Jost',sans-serif;font-weight:300;line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }
  body.lang-th{font-family:'Noto Sans Thai',sans-serif}
  button,input,select,textarea{font:inherit}
  a{color:inherit}
  a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
  .topbar{
    min-height:78px;padding:1rem clamp(1.2rem,5vw,4rem);
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    background:var(--green);color:var(--sand);border-bottom:1px solid rgba(200,160,99,.72);
  }
  .wordmark{font-size:.92rem;font-weight:400;letter-spacing:.29em;text-transform:uppercase;text-decoration:none;color:var(--gold)}
  .langs{display:flex;align-items:center;gap:.1rem}
  .langs button{padding:.35rem .5rem;border:0;background:none;color:var(--sand);font-size:.72rem;letter-spacing:.15em;opacity:.48;cursor:pointer}
  .langs button.on{opacity:1}
  .langs span{font-size:.55rem;opacity:.28}
  main{padding:clamp(2.5rem,6vw,5rem) clamp(1rem,4vw,3rem) clamp(5rem,9vw,8rem)}
  .booking-intro{max-width:850px;margin:0 auto 3rem;text-align:center}
  .back-link{display:inline-block;margin-bottom:2rem;color:var(--bordeaux);font-size:.67rem;font-weight:500;letter-spacing:.18em;text-decoration:none;text-transform:uppercase;border-bottom:1px solid rgba(118,47,62,.35)}
  .booking-kicker{margin-bottom:1rem;color:var(--bordeaux);font-size:.66rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase}
  h1{font-size:clamp(2.6rem,6vw,5rem);font-weight:300;font-style:italic;line-height:1}
  .booking-intro p{max-width:64ch;margin:1.2rem auto 0;color:var(--muted);font-size:.92rem}
  .opening-note{max-width:1120px;margin:0 auto 1.25rem;padding:.9rem 1rem;text-align:center;border-top:1px solid var(--gold);border-bottom:1px solid var(--gold);color:var(--bordeaux);font-size:.74rem;letter-spacing:.04em}
  .booking-shell{max-width:1120px;margin:0 auto;background:var(--sand);box-shadow:0 24px 70px rgba(38,35,31,.11)}
  .service-tabs{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid rgba(38,35,31,.13)}
  .service-tab{
    min-height:112px;padding:1.2rem;border:0;border-right:1px solid rgba(38,35,31,.13);
    display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
    background:transparent;color:#655e54;text-align:left;cursor:pointer;transition:.3s;
  }
  .service-tab:last-child{border-right:0}
  .service-tab:hover{background:var(--sand-warm)}
  .service-tab.on{background:var(--green);color:var(--sand);box-shadow:inset 0 3px 0 var(--bordeaux),inset 0 -3px 0 var(--gold)}
  .service-tab strong{font-size:1.25rem;font-weight:400;line-height:1.1}
  .service-tab small{margin-top:.45rem;font-size:.67rem;opacity:.72}
  .form-wrap{padding:clamp(1.5rem,5vw,3.8rem)}
  .form-title{margin-bottom:2.2rem}
  .form-title h2{color:var(--bordeaux);font-size:clamp(1.9rem,4vw,2.8rem);font-weight:400;line-height:1.1}
  .form-title p{margin-top:.4rem;color:var(--muted);font-size:.82rem}
  .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.15rem}
  .service-fields{display:none;grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.15rem}
  .service-fields.on{display:grid;animation:formIn .4s cubic-bezier(.22,1,.36,1) both}
  @keyframes formIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .field{display:flex;flex-direction:column;gap:.42rem}
  .field.full{grid-column:1/-1}
  .field label{font-size:.64rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase}
  .field input,.field select,.field textarea{
    width:100%;min-height:52px;padding:.8rem .9rem;border:1px solid rgba(38,35,31,.18);
    border-radius:0;background:#fffdf8;color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s;
  }
  .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,160,99,.14)}
  .field small{color:#7d756a;font-size:.65rem}
  .fixed-value{min-height:52px;padding:.85rem .9rem;border-left:3px solid var(--gold);background:var(--sand-warm);font-size:.82rem;line-height:1.55}
  .check{display:flex;align-items:flex-start;gap:.75rem;padding:1rem;border:1px solid rgba(118,47,62,.24);background:#fffdf8;text-transform:none!important;letter-spacing:0!important;font-size:.78rem!important;line-height:1.5;cursor:pointer}
  .check input{width:18px!important;min-height:18px!important;margin-top:.15rem;padding:0!important;flex:0 0 auto}
  .invoice-fields{display:none;grid-column:1/-1;padding:1.2rem;border-top:1px solid rgba(200,160,99,.72);background:rgba(231,224,210,.55)}
  .invoice-fields.open{display:block}
  .invoice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.15rem}
  .invoice-grid .full{grid-column:1/-1}
  .contact-separator{grid-column:1/-1;display:flex;align-items:center;gap:1rem;margin:.9rem 0 .15rem;color:var(--bordeaux);font-size:1.25rem;font-style:italic}
  .contact-separator::after{content:"";height:1px;flex:1;background:rgba(38,35,31,.13)}
  .form-error{display:none;grid-column:1/-1;margin:0;color:#8c3327;font-size:.78rem}
  .form-error.show{display:block}
  .summary{
    grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
    margin-top:1rem;padding:1.25rem 1.35rem;border-left:3px solid var(--bordeaux);background:var(--sand-warm);
  }
  .summary .label{display:block;color:var(--bordeaux);font-size:.6rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
  .summary p{margin-top:.25rem;font-size:1.08rem;line-height:1.3}
  .turnstile:not([hidden]){margin:0 0 1rem}
  .submit{
    flex:0 0 auto;min-height:48px;padding:.8rem 1.4rem;border:1px solid var(--bordeaux);
    background:var(--bordeaux);color:var(--sand);font-size:.66rem;font-weight:500;
    letter-spacing:.15em;text-transform:uppercase;cursor:pointer;transition:.25s;
  }
  .submit:hover:not(:disabled){background:var(--green);border-color:var(--green)}
  /* Sans cette regle, le bouton desactive pendant l'envoi etait strictement
     identique au bouton actif : mesure du 17/09/2026, un seul attribut
     changeait et il n'avait aucun style. Sur un telephone, sans survol, le
     visiteur ne voyait donc RIEN apres son clic. */
  .submit:disabled{opacity:.55;cursor:progress}
  .form-note{grid-column:1/-1;color:#756e64;font-size:.67rem;line-height:1.55}

  /* Calendrier de disponibilités. Il ne montre jamais qui a réservé — seulement
     si la prestation existe ce jour-là et combien il reste de places. */
  /* Les dates ne se saisissent plus qu'au calendrier. Ces champs restent dans
     le formulaire — ils portent le nom envoyé au serveur et servent de rappel
     de ce qui a été choisi — mais ils ne s'ouvrent plus : deux façons de poser
     la même date, dont une seule connaissait les disponibilites, laissaient
     choisir une date complete puis se faire refuser. Le calendrier, lui, reste
     accessible au clavier : ses cases sont de vrais boutons. */
  .date-lue{pointer-events:none;background:rgba(244,239,228,.55);color:var(--ink)}
  .date-lue::-webkit-calendar-picker-indicator{display:none}
  .cal{grid-column:1/-1;margin-top:.4rem;padding:1.1rem 1.15rem;border:1px solid rgba(200,160,99,.45);background:rgba(244,239,228,.5)}
  .cal-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem}
  .cal-title{color:var(--bordeaux);font-size:.68rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
  .cal-nav{display:flex;align-items:center;gap:.35rem}
  .cal-nav button{width:32px;height:32px;border:1px solid rgba(118,47,62,.32);background:none;color:var(--bordeaux);font:400 1rem/1 'Jost',sans-serif;cursor:pointer;border-radius:3px}
  .cal-nav button:hover:not(:disabled){border-color:var(--gold);color:var(--gold)}
  .cal-nav button:disabled{opacity:.3;cursor:default}
  /* Un écran qu'on touche, quelle que soit sa largeur — 23/09/2026. Les
     flèches de mois faisaient 32 px partout, téléphone compris : c'est la
     seule façon d'aller chercher une date au-delà du premier mois affiché,
     donc le geste le plus répété du formulaire. Le lien de retour, lui, ne
     passait à 44 px que sous 520 px : 19 px sur un iPad à l'horizontale.
     any-pointer:coarse vise le doigt, pas la largeur ; la souris garde le
     dessin du bureau. */
  @media(any-pointer:coarse){
    .cal-nav button{width:44px;height:44px}
    .back-link{min-height:44px;padding:.65rem 0}
  }
  /* L'en-tête du calendrier passe à la ligne quand il ne tient pas, les
     flèches restant calées à droite. Mesuré le 23/09 : à 320 px, il débordait
     déjà de 8 px avec des flèches de 32 px ; à 44 px il débordait à 360 px
     aussi. Là où il tient sur une ligne — tout écran de bureau — rien ne
     bouge. */
  .cal-head{flex-wrap:wrap}
  .cal-nav{margin-left:auto}
  .cal-month{min-width:11ch;text-align:center;font-size:.82rem;color:var(--ink)}
  .cal-grid{margin-top:.9rem;display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
  .cal-dow{padding:.3rem 0;text-align:center;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  .cal-day{position:relative;min-height:44px;padding:.3rem .2rem;border:1px solid transparent;background:none;font:400 .82rem 'Jost',sans-serif;color:var(--ink);cursor:pointer;border-radius:3px}
  .cal-day.free{background:rgba(255,255,255,.72);border-color:rgba(200,160,99,.4)}
  .cal-day.free:hover{border-color:var(--gold)}
  .cal-day .cal-left{display:block;margin-top:.1rem;font-size:.56rem;letter-spacing:.03em;color:var(--muted)}
  .cal-day .cal-price{display:block;margin-top:.12rem;font-size:.6rem;line-height:1.2;white-space:nowrap;letter-spacing:0}
  .cal-day .cal-checkout{display:block;margin-top:.12rem;font-size:.53rem;line-height:1.2;letter-spacing:0;overflow-wrap:anywhere}
  .room-rates{grid-column:1/-1;min-width:0;padding:1rem 1.15rem;border-left:3px solid var(--gold);background:var(--sand-warm)}
  .room-rates[hidden]{display:none}
  .room-rates h3{font-size:1.1rem;color:var(--bordeaux)}
  .room-rates p{margin:.35rem 0;font-size:.82rem}
  .room-rates dl{margin:.6rem 0}
  .room-rates dl>div{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;padding:.4rem 0;border-bottom:1px solid rgba(38,35,31,.1)}
  .room-rates dt{min-width:0;font-size:.8rem;line-height:1.45}
  .room-rates dd{margin:0;flex:0 0 auto;white-space:nowrap;font-size:.9rem;font-weight:500;color:var(--bordeaux)}
  .room-rates small{display:block;color:var(--muted);font-size:.67rem;line-height:1.5}
  .room-rates .room-rates-range{margin-top:.85rem;font-weight:500}
  .room-price p{font-size:1rem;line-height:1.45;color:var(--bordeaux);font-weight:500}
  /* Un thème vient du classeur : un lien collé, sans espace, élargissait tout
     le formulaire sur mobile (relecture du 07/10/2026). */
  #course-theme-text{overflow-wrap:anywhere}
  .room-price small{display:block;margin-top:.25rem}
  .room-price[hidden]{display:none}
  .cal-day.full{background:repeating-linear-gradient(135deg,rgba(118,47,62,.07) 0 4px,transparent 4px 8px);color:#a89e92;cursor:not-allowed}
  .cal-day.closed,.cal-day.blank{color:#c3bcb0;cursor:not-allowed}
  .cal-day.on{background:var(--bordeaux);color:var(--sand);border-color:var(--bordeaux)}
  .cal-day.on .cal-left{color:rgba(244,239,228,.8)}
  .cal-day.range{background:rgba(118,47,62,.14);border-color:rgba(118,47,62,.3)}
  .cal-day:disabled{pointer-events:none}
  .cal-legend{margin-top:.85rem;display:flex;flex-wrap:wrap;gap:.9rem;font-size:.63rem;color:var(--muted)}
  .cal-legend span{display:inline-flex;align-items:center;gap:.35rem}
  .cal-legend i{width:11px;height:11px;border-radius:2px;display:inline-block}
  .cal-swatch-free{background:rgba(255,255,255,.9);border:1px solid rgba(200,160,99,.6)}
  .cal-swatch-full{background:repeating-linear-gradient(135deg,rgba(118,47,62,.22) 0 3px,transparent 3px 6px);border:1px solid rgba(118,47,62,.25)}
  .cal-swatch-closed{background:#e3ddd1}
  .cal-note{margin-top:.6rem;font-size:.7rem;color:var(--muted);min-height:1em;scroll-margin-bottom:1rem}
  /* La panne emprunte le langage d'erreur déjà posé sur cette page — même
     taille et même rouge que .form-error. Inventer une troisième taille
     aurait ajouté une convention de plus à tenir. À .63 rem et en gris
     atténué, ce message s'affichait sans qu'Eugen le remarque le 18/09 :
     c'est la règle n°5 du 04/09, un message qu'on ne voit pas n'existe pas. */
  .cal-note.indisponible{font-size:.78rem;color:#8c3327}
  .confirmation{display:none;position:fixed;inset:0;z-index:100;place-items:center;padding:1rem;background:rgba(22,21,19,.76);backdrop-filter:blur(4px)}
  .confirmation.open{display:grid}
  .confirmation-card{width:min(470px,100%);padding:clamp(2rem,6vw,3.5rem);background:var(--sand);text-align:center;box-shadow:0 30px 90px rgba(0,0,0,.35)}
  .confirmation-icon{width:58px;height:58px;display:grid;place-items:center;margin:0 auto 1rem;border:1px solid var(--gold);border-radius:50%;color:var(--green);font-size:1.3rem}
  .confirmation-card h2{font-size:2.1rem;font-weight:400}
  .confirmation-card p{margin:.65rem 0;color:var(--muted);font-size:.84rem}
  .confirmation-ref{display:inline-block;margin:.35rem 0 1.2rem;padding:.55rem .85rem;background:var(--sand-warm);font-weight:500;letter-spacing:.1em}
  footer{padding:2.4rem clamp(1.2rem,5vw,4rem);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;background:var(--green);color:rgba(244,239,228,.58);border-top:1px solid rgba(200,160,99,.72);font-size:.68rem;letter-spacing:.13em}
  footer strong{color:var(--gold);font-weight:400;letter-spacing:.26em;text-transform:uppercase}
  .footer-links{display:flex;gap:1rem;flex-wrap:wrap}
  .footer-links a{color:var(--sand);text-decoration:none}
  .footer-links a:hover{color:var(--gold)}
  @media(max-width:820px){
    .service-tabs{grid-template-columns:repeat(2,1fr)}
    .service-tab:nth-child(2){border-right:0}
    .service-tab:nth-child(-n+2){border-bottom:1px solid rgba(38,35,31,.13)}
    .form-grid,.service-fields,.invoice-grid{grid-template-columns:1fr}
    .field.full,.contact-separator,.form-error,.summary,.form-note{grid-column:1}
    .invoice-grid .full{grid-column:1}
    .summary{align-items:stretch;flex-direction:column}
    .submit{width:100%}
  }
  @media(max-width:520px){
    .topbar{min-height:70px;padding:.85rem 1rem;align-items:center;flex-direction:row}
    .wordmark{font-size:.76rem;letter-spacing:.2em}
    .langs button{min-width:36px;min-height:40px;padding:.35rem .4rem;font-size:.76rem}
    main{padding:2rem .7rem 4rem}
    .booking-intro{margin-bottom:2rem}
    .back-link{min-height:44px;padding:.65rem 0;margin-bottom:1.2rem}
    .opening-note{font-size:.7rem;line-height:1.55}
    .form-wrap{padding:1.25rem .9rem 1.5rem}
    .service-tabs{grid-template-columns:1fr}
    .service-tab{min-height:76px;padding:1rem 1.1rem;border-right:0;border-bottom:1px solid rgba(38,35,31,.13)}
    .service-tab:last-child{border-bottom:0}
    .field input,.field select,.field textarea{font-size:16px}
    .summary p{font-size:.96rem}
    footer{flex-direction:column;align-items:flex-start;letter-spacing:.08em}
  }
  @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.service-fields.on{animation:none}}

/* Le champ pot-de-miel, hors écran. Écrit en attribut « style » jusqu'au
   19/09/2026 : un attribut de style est bloqué par style-src dès qu'on
   retire 'unsafe-inline'. Valeurs recopiées telles quelles. */
.pot-de-miel{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Exemples de menus du 13/10 : lecture facultative avant la demande,
   sans prix public et sans modifier les champs du formulaire. */
.chef-examples{margin-bottom:2.2rem;padding:1.2rem 0;border-top:1px solid var(--gold);border-bottom:1px solid var(--gold)}
.chef-examples[hidden]{display:none}
.chef-examples h3{color:var(--bordeaux);font-size:1.35rem;font-weight:400}
.chef-examples-intro{margin:.5rem 0 1.1rem;color:var(--muted);font-size:.82rem}
.chef-example-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.85rem;align-items:stretch}
.chef-example-card{min-width:0;border:1px solid rgba(38,35,31,.18);background:#fffdf8}
.chef-example-card summary{min-height:4.75rem;padding:.9rem;line-height:1.5;color:var(--bordeaux);font-size:.96rem;font-weight:400;cursor:pointer}
.chef-example-card summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.chef-example-card[open] summary{border-bottom:1px solid rgba(38,35,31,.13)}
.chef-example-dishes{padding:0 .9rem 1rem}
.chef-example-dishes dt{margin-top:1rem;color:var(--muted);font-size:.61rem;letter-spacing:.12em;text-transform:uppercase}
.chef-example-dishes dd{margin-top:.2rem}
.chef-example-dishes strong{display:block;font-size:.85rem;font-weight:400}
.chef-example-dishes p{margin-top:.2rem;color:var(--muted);font-size:.75rem;line-height:1.6}
@media(max-width:900px){.chef-example-grid{grid-template-columns:1fr}}