/* Chalet du Soldat — tunnel de réservation. Extrait du mockup, inchangé au pixel près (§5 du brief). */

:root{
  --surface-1:#f4f1ea;--surface-2:#ffffff;--border:#e7e1d5;--border-strong:#d9d0c0;
  --text-primary:#1c1c16;--text-secondary:#5d564a;--text-muted:#9a9183;--radius:7px;
}
html,body{background:var(--surface-1);color:var(--text-primary)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.site-topbar{background:rgba(12,16,8,0.97);padding:0 1.4rem;height:70px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:60}
.site-topbar .brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.site-topbar .brand img{width:48px;height:48px;object-fit:contain}
.site-topbar .bn{font-family:'Playfair Display',serif;font-size:17px;font-weight:600;color:#fff;letter-spacing:0.02em}
.site-topbar .bn span{color:#d4a843}
.site-topbar .back{color:rgba(255,255,255,0.72);text-decoration:none;font-size:13px;display:inline-flex;align-items:center;gap:6px;transition:color .2s}
.site-topbar .back:hover{color:#d4a843}
.page-intro{max-width:680px;margin:0 auto;padding:1.6rem 1rem 0;text-align:center}
.page-intro h1{font-family:'Playfair Display',serif;font-size:26px;font-weight:600;color:var(--text-primary);margin-bottom:6px}
.page-intro p{font-size:13px;color:var(--text-muted);line-height:1.6}

*{box-sizing:border-box;margin:0;padding:0}
:root{--gold:#d4a843;--gold-lt:#f0ca6a;--green:#2d5518;--c-amber:#b8860b;--c-orange:#c0620a;--c-red:#a32d2d}
.W{max-width:680px;margin:0 auto;padding:1.25rem 1rem;font-family:'Inter',sans-serif}
.prog{display:flex;align-items:flex-start;margin-bottom:1.75rem;position:relative}
.prog::before{content:'';position:absolute;top:15px;left:16px;right:16px;height:2px;background:var(--border);z-index:0}
.sd{display:flex;flex-direction:column;align-items:center;flex:1;z-index:1}
.dot{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;transition:.2s;background:var(--surface-2);border:2px solid var(--border)}
.dot.on{background:var(--gold);color:#1a1100;border-color:var(--gold)}
.dot.ok{background:var(--green);color:#fff;border-color:var(--green)}
.sl{font-size:9px;color:var(--text-muted);margin-top:5px;text-align:center;letter-spacing:.05em;text-transform:uppercase;line-height:1.3}
.card{background:var(--surface-2);border:0.5px solid var(--border);border-radius:12px;padding:1.25rem;margin-bottom:.875rem}
.ct{font-family:'Playfair Display',serif;font-size:15px;font-weight:500;color:var(--text-primary);margin-bottom:1rem;display:flex;align-items:center;gap:8px}
.ct i{color:var(--gold);font-size:17px}
.pnl{display:none}.pnl.on{display:block}
.fl{margin-bottom:.875rem}
label{display:block;font-size:11px;font-weight:500;color:var(--text-secondary);letter-spacing:.06em;text-transform:uppercase;margin-bottom:5px}
input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{width:100%;padding:9px 11px;border:0.5px solid var(--border-strong);border-radius:var(--radius);font-size:13px;background:var(--surface-2);color:var(--text-primary);outline:none;transition:.15s;font-family:'Inter',sans-serif}
input:focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 2px rgba(212,168,67,.15)}
.r2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.r3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.cal-legend{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:.75rem}
.leg{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text-secondary)}
.leg-dot{width:10px;height:10px;border-radius:50%}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-head{font-size:10px;color:var(--text-muted);text-align:center;padding:3px 0;font-weight:500}
.cal-day{border-radius:6px;padding:5px 2px;text-align:center;font-size:12px;cursor:pointer;border:0.5px solid transparent;transition:.15s;color:var(--text-primary)}
.cal-day.empty{background:transparent;cursor:default}
.cal-day.g{background:#bfe0a0;border-color:#5a9e3a;color:#214d10;font-weight:500}
.cal-day.y{background:#9fb6e6;border-color:#3a5ba8;color:#1b2f5e;font-weight:500}
.cal-day.o{background:#f6d678;border-color:#d2a017;color:#5a4106;font-weight:500}
.cal-day.r{background:#e89090;border-color:#c0392b;color:#4f1010;cursor:not-allowed;font-weight:500}
.cal-day.past{background:var(--surface-1);color:var(--text-muted);cursor:not-allowed;border-color:transparent}
/* Jour fermé par le refuge : distinct d'un jour « complet » (rouge) comme d'un
   jour passé (gris neutre). Hachures + chiffre barré, et clic impossible —
   la règle passe après .past et .r pour l'emporter sur les deux. */
.cal-day.closed{background:repeating-linear-gradient(135deg,#d8d2c4,#d8d2c4 3px,#eceadf 3px,#eceadf 6px);border-color:#a89f8a;color:#5b5445;cursor:not-allowed;text-decoration:line-through;font-weight:500}
/* Jour dont les disponibilités ne sont pas encore chargées : neutre et inerte.
   Surtout pas vert — le vert annoncerait « libre » sans qu'on en sache rien. */
.cal-day.unknown{background:transparent;border-color:var(--surface-1);color:var(--text-muted);cursor:progress;opacity:.55}
.cal-day.sel{outline:2px solid var(--gold);outline-offset:1px;font-weight:500}
.cal-day.in-range{opacity:.7}
.cap-bar-w{margin:.75rem 0}
.cap-bar{height:7px;border-radius:4px;background:var(--border);overflow:hidden;margin-bottom:5px}
.cap-fill{height:100%;border-radius:4px;transition:width .4s}
.fill-g{background:#5a9e3a}.fill-y{background:#3a5ba8}.fill-o{background:#d2a017}.fill-r{background:#c0392b}
.cap-note{font-size:12px;line-height:1.55;color:var(--text-secondary)}
.cap-note.alert-o{background:#FAECE7;border:0.5px solid #D85A30;border-radius:8px;padding:9px 12px;color:#4A1B0C}
.ctr-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:0.5px solid var(--border)}
.ctr-row:last-child{border-bottom:none}
.ctr-lbl{font-size:13px;color:var(--text-primary)}
.ctr-lbl small{display:block;font-size:11px;color:var(--text-muted)}
.ctr-ctrl{display:flex;align-items:center;gap:9px}
.ctr-btn{width:26px;height:26px;border-radius:50%;border:0.5px solid var(--border-strong);background:var(--surface-1);color:var(--text-primary);font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s;flex-shrink:0}
.ctr-btn:hover{background:#EAF3DE;border-color:var(--green);color:var(--green)}
.ctr-val{font-size:15px;font-weight:500;min-width:24px;text-align:center;color:var(--text-primary)}
.repas-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:.5rem}
.repas-card{border:0.5px solid var(--border);border-radius:9px;padding:14px;cursor:pointer;transition:.15s;text-align:center}
.repas-card:hover{border-color:var(--gold)}
.repas-card.sel{border-color:var(--gold);background:rgba(212,168,67,.07)}
.repas-card i{font-size:24px;color:var(--text-muted);display:block;margin-bottom:6px}
.repas-card.sel i{color:var(--gold)}
.repas-ttl{font-size:13px;font-weight:500;color:var(--text-primary);margin-bottom:4px}
.repas-dsc{font-size:11px;color:var(--text-muted);line-height:1.55}
.repas-inc{font-size:11px;color:#27500A;margin-top:5px;padding:4px 8px;background:#EAF3DE;border-radius:6px;display:inline-block}
.repas-price{font-size:12px;font-weight:500;color:var(--gold);margin-top:6px}
.restr-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:0.5px solid var(--border)}
.restr-row:last-child{border-bottom:none}
.restr-lbl{font-size:13px;color:var(--text-primary)}
.restr-lbl small{font-size:11px;color:var(--text-muted);display:block}
.opt-card{border:0.5px solid var(--border);border-radius:9px;padding:12px 14px;margin-bottom:8px}
.opt-ttl{font-size:13px;font-weight:500;color:var(--text-primary);margin-bottom:2px}
.opt-dsc{font-size:11px;color:var(--text-muted);line-height:1.5;margin-bottom:10px}
.slider-row{display:flex;align-items:center;gap:10px}
.slider-row input[type=range]{flex:1;accent-color:var(--gold)}
.slider-val{font-size:13px;font-weight:500;color:var(--gold);min-width:60px;text-align:right}
.opt-price-note{font-size:11px;color:var(--text-muted);margin-top:6px}
.priv-card{border:0.5px solid var(--border);border-radius:9px;padding:12px 14px;margin-bottom:8px;cursor:pointer;transition:.15s;display:flex;align-items:flex-start;gap:10px}
.priv-card:hover{border-color:var(--gold);background:rgba(212,168,67,.04)}
.priv-card.sel{border-color:var(--gold);background:rgba(212,168,67,.07)}
.priv-card input[type=checkbox]{margin-top:2px;accent-color:var(--gold);width:15px;height:15px;flex-shrink:0}
.sum-line{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:0.5px solid var(--border);font-size:13px}
.sum-line:last-child{border-bottom:none;font-weight:500;font-size:14px;padding-top:10px}
.sum-l{color:var(--text-secondary)}.sum-v{color:var(--text-primary)}
.total-v{color:var(--green);font-size:15px;font-weight:500}
.bank-box{background:var(--surface-1);border:0.5px solid var(--border);border-radius:9px;padding:.875rem 1rem;margin-top:.875rem}
.bk-ttl{font-size:11px;font-weight:500;color:var(--text-muted);margin-bottom:8px;text-transform:uppercase;letter-spacing:.06em}
.bk-row{display:flex;justify-content:space-between;font-size:12px;margin-bottom:5px}
.bk-k{color:var(--text-muted)}.bk-v{color:var(--text-primary);font-weight:500}
.notice{font-size:11px;color:var(--text-muted);margin-top:9px;line-height:1.6;padding-left:8px;border-left:2px solid var(--border-strong)}
.confirm-box{background:#EAF3DE;border:0.5px solid #97C459;border-radius:10px;padding:1rem 1.125rem;margin-bottom:.875rem}
.confirm-ttl{font-size:13px;font-weight:500;color:#27500A;margin-bottom:4px;display:flex;align-items:center;gap:6px}
.confirm-txt{font-size:12px;color:#3B6D11;line-height:1.6}
.nav{display:flex;justify-content:space-between;align-items:center;margin-top:1.25rem}
.btn-p{padding:8px 18px;border:0.5px solid var(--border-strong);border-radius:var(--radius);background:transparent;color:var(--text-secondary);font-size:12px;cursor:pointer;transition:.15s}
.btn-p:hover{background:var(--surface-1)}
.btn-n{padding:8px 20px;border:none;border-radius:var(--radius);background:var(--gold);color:#1a1100;font-size:12px;font-weight:500;cursor:pointer;letter-spacing:.03em;transition:.15s}
.btn-n:hover{background:var(--gold-lt)}
.btn-n:disabled{opacity:.4;cursor:not-allowed}
.btn-confirm{padding:10px 24px;border:none;border-radius:var(--radius);background:var(--green);color:#fff;font-size:13px;font-weight:500;cursor:pointer;letter-spacing:.03em;transition:.15s;display:flex;align-items:center;gap:8px}
.btn-confirm:hover{background:#3a6b1f}
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}
.cal-nav button{background:none;border:0.5px solid var(--border);border-radius:var(--radius);padding:4px 9px;cursor:pointer;font-size:13px;color:var(--text-secondary)}
.cal-nav button:hover{background:var(--surface-1)}
.cal-month{font-size:14px;font-weight:500;color:var(--text-primary)}
.dates-sel{font-size:12px;color:var(--text-secondary);margin-top:.75rem;min-height:18px;line-height:1.5}
.call-box{background:#FCEBEB;border:0.5px solid #E24B4A;border-radius:10px;padding:1rem 1.125rem;margin-bottom:.875rem}
.call-ttl{font-size:13px;font-weight:500;color:#501313;margin-bottom:4px;display:flex;align-items:center;gap:6px}
.call-txt{font-size:12px;color:#791F1F;line-height:1.6}
.call-box-y{background:#FAEEDA;border:0.5px solid #EF9F27;border-radius:10px;padding:1rem 1.125rem;margin-bottom:.875rem}
.call-ttl-y{font-size:13px;font-weight:500;color:#633806;margin-bottom:4px;display:flex;align-items:center;gap:6px}
.call-txt-y{font-size:12px;color:#854F0B;line-height:1.6}
.ip-box{background:#EAF3DE;border:0.5px solid #97C459;border-radius:10px;padding:1rem 1.125rem;margin-bottom:.75rem}
.ip-ttl{font-size:13px;font-weight:500;color:#27500A;margin-bottom:4px;display:flex;align-items:center;gap:6px}
.ip-ttl i{font-size:15px}
.ip-txt{font-size:12px;color:#3B6D11;line-height:1.65}
.success-wrap{text-align:center;padding:1.5rem 1rem}
.ok-icon{font-size:44px;color:var(--green);margin-bottom:.75rem}
.ok-ttl{font-family:'Playfair Display',serif;font-size:20px;color:var(--text-primary);margin-bottom:.4rem}
.ok-sub{font-size:13px;color:var(--text-secondary);line-height:1.7;margin-bottom:1.25rem}
.gold-bar{width:40px;height:2px;background:var(--gold);margin:.75rem auto}
.resa-ref{font-size:13px;font-weight:500;color:var(--green);background:#EAF3DE;border:0.5px solid #97C459;border-radius:8px;padding:8px 16px;display:inline-block;margin-bottom:1rem}
.part-card{background:var(--surface-1);border:0.5px solid var(--border);border-radius:9px;padding:12px 14px;margin-bottom:8px}
.part-header{font-size:12px;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}
.link-carte{font-size:11px;color:var(--gold);text-decoration:none;display:inline-flex;align-items:center;gap:3px;margin-top:6px}
.link-carte:hover{text-decoration:underline}
.checkbox-row{display:flex;align-items:flex-start;gap:10px;padding:10px;background:var(--surface-1);border-radius:8px;border:0.5px solid var(--border);margin-top:.875rem}
.checkbox-row input[type=checkbox]{margin-top:2px;accent-color:var(--green);width:16px;height:16px;flex-shrink:0}
.checkbox-lbl{font-size:12px;color:var(--text-primary);line-height:1.55}

/* ===== finition v2 ===== */
.mode-toggle{display:grid;grid-template-columns:1.75fr 1fr;gap:10px;margin-bottom:1.25rem}
.mode-btn.camp{font-size:12.5px;padding:11px}
.mode-btn .reco{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--green);color:#fff;padding:2px 7px;border-radius:20px;margin-left:8px}
.cap-note.camp-ok{background:#EAF3DE;border:.5px solid #97C459;border-radius:8px;padding:9px 12px;color:#27500A}
.cap-note.camp-full{background:#FCEBEB;border:.5px solid #E24B4A;border-radius:8px;padding:9px 12px;color:#791F1F}
input[type=date]{font-family:'Inter',sans-serif;color:var(--text-primary)}
input[type=date]::-webkit-datetime-edit{font-family:'Inter',sans-serif;letter-spacing:.02em}
input[type=date]::-webkit-calendar-picker-indicator{opacity:.55;cursor:pointer}
.ctr-btn{width:28px;height:28px;font-size:16px}
.ctr-val{font-size:16px}
.mode-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;border:0.5px solid var(--border-strong);border-radius:11px;background:var(--surface-2);color:var(--text-secondary);font-size:14px;font-weight:500;cursor:pointer;font-family:'Inter',sans-serif;transition:.15s}
.mode-btn i{font-size:19px}
.mode-btn.active{border-color:var(--gold);background:rgba(212,168,67,.09);color:var(--text-primary)}
.mode-btn:hover:not(.active){border-color:var(--gold)}
.opt-counter{display:flex;align-items:center;justify-content:space-between;padding:9px 0}
.opt-cinfo{font-size:13px;color:var(--text-primary)}
.opt-cinfo small{display:block;font-size:11px;color:var(--text-muted);line-height:1.5;margin-top:2px}
.chef-badge{display:inline-block;font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;background:var(--green);color:#fff;padding:2px 8px;border-radius:4px;margin-left:8px}
.pay-tabs{display:flex;gap:8px;margin-bottom:1rem}
.pay-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:11px;border:0.5px solid var(--border-strong);border-radius:9px;background:var(--surface-2);color:var(--text-secondary);font-size:13px;font-weight:500;cursor:pointer;font-family:'Inter',sans-serif;transition:.15s}
.pay-tab i{font-size:17px}
.pay-tab.sel{border-color:var(--gold);background:rgba(212,168,67,.08);color:var(--text-primary)}
.pay-pane{display:none}.pay-pane.on{display:block}
.qr-box{width:180px;height:180px;margin:8px auto;border-radius:12px;background:repeating-linear-gradient(45deg,#1c1c16,#1c1c16 9px,#fff 9px,#fff 18px);position:relative;display:flex;align-items:center;justify-content:center}
.qr-box span{background:#fff;color:#1c1c16;font-size:10px;font-weight:600;padding:4px 8px;border-radius:4px;text-align:center}
.pay-note{font-size:11px;color:var(--text-muted);text-align:center;margin-top:8px;line-height:1.6}
.camp-info{background:#EAF3DE;border:0.5px solid #97C459;border-radius:10px;padding:1rem 1.125rem;margin-top:.875rem}
.camp-info-ttl{font-size:13px;font-weight:500;color:#27500A;margin-bottom:6px;display:flex;align-items:center;gap:6px}
.camp-info ul{margin:0;padding-left:18px}
.camp-info li{font-size:12px;color:#3B6D11;line-height:1.7}
.camp-ph{height:150px;border-radius:10px;background:repeating-linear-gradient(45deg,#e7eedd,#e7eedd 12px,#dde7cf 12px,#dde7cf 24px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#7a8a5e;margin-bottom:.875rem;border:1px dashed #a9bd87}
.camp-ph i{font-size:28px}.camp-ph span{font-size:12px}

.lang-switch{display:flex;gap:3px;background:rgba(255,255,255,0.08);border-radius:7px;padding:3px;margin-right:14px}
.lang-btn{background:none;border:none;color:rgba(255,255,255,0.6);font-size:11px;font-weight:600;letter-spacing:0.05em;padding:4px 9px;border-radius:5px;cursor:pointer;font-family:'Inter',sans-serif;transition:all 0.18s}
.lang-btn.active{background:#d4a843;color:#1a1100}
.lang-btn:hover:not(.active){color:#fff}
.topbar-right{display:flex;align-items:center}

/* Marqueur des champs obligatoires : petit astérisque rouge à côté du label. */
.req-star { color: #a32d2d; font-weight: 700; margin-left: 2px; }
/* Pastille de progression cliquable (retour arrière). */
.sd.clickable { cursor: pointer; }
.sd.clickable:hover .dot:not(.on) { border-color: var(--gold); }

/* =====================================================================
 * RESPONSIVE — Tunnel de réservation (audit du 2026-07)
 *
 * Causes identifiées : .qr-box en 180px fixe, .site-topbar sans wrap,
 * .r3 en 3 colonnes même sur mobile, aucune media query.
 * ===================================================================== */

/* Garde-fous globaux (défensifs). */
html, body { overflow-x: hidden; overflow-x: clip; max-width: 100vw; }
img, video, iframe, embed, svg { max-width: 100%; height: auto; }

/* La QR-box du panneau paiement Twint (temporaire, retirée en Phase 5)
   avait une largeur fixe de 180px — on la contraint pour ne jamais
   déborder son parent, même sur écran de 320px. */
.qr-box { width: 180px; max-width: 100%; }

/* ---------- Téléphone (≤ 560px) ---------- */
@media (max-width: 560px) {
    /* Topbar : autorise le retour à la ligne si le contenu déborde. */
    .site-topbar {
        height: auto;
        min-height: 60px;
        padding: 8px 1rem;
        flex-wrap: wrap;
        gap: 6px;
    }
    .site-topbar .brand { flex: 1 1 auto; min-width: 0; }
    .site-topbar .brand img { width: 36px !important; height: 36px !important; }
    .site-topbar .bn { font-size: 14px; }
    .topbar-right {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8px;
    }
    .lang-switch { margin-right: 0; }
    .site-topbar .back { font-size: 12px; }

    /* Bandeau d'intro */
    .page-intro { padding: 1rem 1rem 0; }
    .page-intro h1 { font-size: 22px; }

    /* Conteneur principal du tunnel */
    .W { padding: 1rem .75rem; }

    /* Choix repas : 2 cartes côte à côte c'est trop serré sur < 380px */
    .repas-grid { grid-template-columns: 1fr; }

    /* Toggle Dortoir / Camping en tête */
    .mode-toggle { grid-template-columns: 1fr; gap: 8px; }

    /* Progress stepper : reste horizontal (6 puces) mais on réduit les gaps
       et le texte pour tenir sur 320px. */
    .prog { margin-bottom: 1.25rem; }
    .dot { width: 26px; height: 26px; font-size: 10px; }
    .sl { font-size: 8.5px; }

    /* Grilles de saisies : 2/3 colonnes deviennent 1 colonne sur mobile. */
    .r2, .r3, .r4 { grid-template-columns: 1fr !important; }

    /* Cellules du calendrier : plus compactes pour tenir sur ≤ 340px. */
    .cal-grid { gap: 2px; }
    .cal-day { padding: 4px 1px; font-size: 11px; }
}

/* ---------- Très petits écrans (≤ 360px) ---------- */
@media (max-width: 360px) {
    .cal-head { font-size: 9px; }
    .cal-day { font-size: 10px; padding: 3px 0; }
    .dot { width: 22px; height: 22px; font-size: 9px; }
    .sl { display: none; }  /* labels d'étapes cachés sur les plus petits écrans */
}
/* ============================ FIN RESPONSIVE ============================ */