/* ============================================================
   Hôtel Nisrine — Chefchaouen · thème "ville bleue"
   ============================================================ */
:root {
  /* Le vrai bleu clair de Chefchaouen : lumineux, poudré, ensoleillé */
  --ink: #1c3d57;
  --blue-night: #1e5a88;
  --blue: #3d8ecb;
  --blue-soft: #6fb3e2;
  --blue-chaouen: #56a5dc;
  --blue-mist: #cfe8f9;
  --blue-pale: #eff8fe;
  --white: #ffffff;
  --sand: #fbf4e4;
  --terracotta: #d07a50;
  --terracotta-dark: #b6613c;
  --ok: #1e7d4f;
  --warn: #b3821f;
  --danger: #b03737;
  --radius: 18px;
  --shadow: 0 10px 30px rgba(30, 90, 136, .14);
  --font-title: 'Playfair Display', Georgia, serif;
  --font-body: 'Jost', 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--blue-pale);
  line-height: 1.65;
  font-size: 16.5px;
}
img { max-width: 100%; display: block; }
/* <picture> ne doit pas casser les grilles : il s'efface de la mise en page */
picture { display: contents; }
/* ...mais sans cela, <source> devient lui aussi un élément de la grille et
   occupe une case vide devant chaque image (vignettes décalées). */
picture > source { display: none !important; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--terracotta); }
.container { max-width: 1140px; margin: 0 auto; padding: 0 22px; }

h1, h2, h3 { font-family: var(--font-title); color: var(--blue-night); line-height: 1.2; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-block; padding: 13px 28px; border-radius: 999px;
  font-weight: 500; letter-spacing: .3px; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: 16px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.15); }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-night); color: #fff; }
.btn-accent { background: var(--terracotta); color: #fff; }
.btn-accent:hover { background: var(--terracotta-dark); color: #fff; }
.btn-ghost { background: transparent; color: #fff; border: 1.6px solid rgba(255,255,255,.7); }
.btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
.btn-light { background: #fff; color: var(--blue-night); border: 1.4px solid var(--blue-mist); }
.btn-sm { padding: 9px 18px; font-size: 14.5px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--blue-mist);
}
.header-inner { display: flex; align-items: center; gap: 26px; height: 74px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--blue-night); }
.brand-mark { color: var(--terracotta); display: grid; place-items: center; filter: drop-shadow(0 3px 6px rgba(30,90,136,.25)); }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-text .bt-name { font-family: var(--font-title); font-weight: 700; font-size: 19px; letter-spacing: 1.6px; color: var(--blue-night); }
.brand-text .bt-sub { color: var(--blue-chaouen); font-size: 10.5px; letter-spacing: 2.6px; font-weight: 600; margin-top: 3px; }
.brand-text strong { font-family: var(--font-title); font-size: 19px; }
.brand-text small { color: var(--blue-soft); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; }
.main-nav { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.main-nav a { color: var(--ink); font-weight: 500; font-size: 15.5px; position: relative; }
.main-nav a:not(.btn).active::after, .main-nav a:not(.btn):hover::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2.5px;
  background: var(--terracotta); border-radius: 2px;
}
.nav-book { margin-left: 6px; }
.header-right { display: flex; align-items: center; gap: 14px; }
.lang-switch { display: flex; gap: 2px; background: var(--blue-pale); border-radius: 999px; padding: 3px; }
.lang-switch a { padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--blue); }
.lang-switch a.on { background: var(--blue); color: #fff; }
.burger { display: none; background: none; border: none; cursor: pointer; padding: 6px; }
.burger span { display: block; width: 24px; height: 2.5px; background: var(--blue-night); margin: 5px 0; border-radius: 2px; transition: .2s; }

/* ---------- Hero ---------- */
.hero {
  position: relative; color: #fff; overflow: hidden;
  background: linear-gradient(165deg, #3d8ecb 0%, #56a5dc 45%, #8cc8ee 100%);
}
.hero h1, .hero p, .hero .kicker { text-shadow: 0 2px 14px rgba(23, 66, 100, .35); }
.hero-bg { position: absolute; inset: 0; opacity: .6; }
.hero-bg svg { width: 100%; height: 100%; object-fit: cover; }
.hero-inner { position: relative; padding: 90px 0 130px; max-width: 640px; }
.hero .kicker {
  display: inline-block; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3);
  padding: 6px 16px; border-radius: 999px; font-size: 13.5px; letter-spacing: 1.4px;
  text-transform: uppercase; margin-bottom: 22px;
}
.hero h1 { color: #fff; font-size: clamp(34px, 5.4vw, 58px); margin-bottom: 18px; }
.hero p { font-size: 19px; font-weight: 300; opacity: .95; margin-bottom: 30px; max-width: 540px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Hero photo pleine page */
.hero-photo { min-height: 520px; display: flex; align-items: center; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-veil {
  position: absolute; inset: 0;
  background: linear-gradient(75deg, rgba(15,45,75,.82) 0%, rgba(21,66,105,.55) 45%, rgba(30,90,136,.15) 100%);
}
.hero-photo .hero-inner { padding: 84px 0 110px; }
.hero-photo h1 { font-size: clamp(36px, 5.6vw, 64px); letter-spacing: .3px; }
.hero-photo h1 em { font-style: italic; color: #ffd9b8; }
.btn-lg { padding: 15px 34px; font-size: 17px; }
.hero-chips { list-style: none; display: flex; gap: 10px 22px; flex-wrap: wrap; margin-top: 30px; padding: 0; }
.hero-chips li {
  display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 500;
  color: #eaf4fc; letter-spacing: .3px;
}
.hero-chips li::before {
  content: "✓"; display: grid; place-items: center; width: 20px; height: 20px;
  border-radius: 50%; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.45);
  font-size: 11px; font-weight: 700;
}
/* Entrée du hero */
@keyframes heroUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.hx { animation: heroUp .8s cubic-bezier(.22,.7,.3,1) both; }
.hx-1 { animation-delay: .05s; } .hx-2 { animation-delay: .15s; } .hx-3 { animation-delay: .3s; }
.hx-4 { animation-delay: .45s; } .hx-5 { animation-delay: .6s; }

/* Apparition au défilement */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.7,.3,1); transition-delay: var(--rvd, 0s); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hx { animation: none; }
  .rv { opacity: 1; transform: none; transition: none; }
}

/* Widget réservation rapide */
.quick-book {
  position: relative; margin-top: -62px; z-index: 5;
}
.quick-book .qb-card {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 22px 26px; display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 16px; align-items: end;
}
.qb-title { grid-column: 1 / -1; font-weight: 600; color: var(--blue-night); font-size: 15px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: -6px; }
.field label { display: block; font-size: 13.5px; font-weight: 600; color: var(--blue); margin-bottom: 6px; letter-spacing: .4px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--blue-mist); border-radius: 10px;
  font-family: var(--font-body); font-size: 15.5px; color: var(--ink); background: var(--blue-pale);
  transition: border .15s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue-soft); background: #fff; }

/* ---------- Sections ---------- */
.section { padding: 74px 0; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.section-head .deco { display: block; width: 46px; height: 3px; background: var(--terracotta); border-radius: 2px; margin: 0 auto; }
.section-head h1, .section-head h2 { font-size: clamp(28px, 3.6vw, 40px); margin: 8px 0 12px; }
.section-head p { color: #4a617c; }
.section-alt { background: #fff; }
.section-sand { background: var(--sand); }

/* À propos */
.about-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 50px; align-items: center; }
.about-art { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.about-collage { display: grid; gap: 10px; box-shadow: none; overflow: visible; }
.about-collage img { border-radius: var(--radius); box-shadow: var(--shadow); object-fit: cover; width: 100%; display: block; }
.about-collage .ac-main { aspect-ratio: 3 / 2; }
.about-collage .ac-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.about-collage .ac-row img { aspect-ratio: 4 / 3; }
.about-art svg, .about-art img { width: 100%; height: auto; display: block; }
.about-copy h2 { font-size: clamp(26px, 3.2vw, 36px); margin-bottom: 16px; }
.about-copy p { color: #3d5470; margin-bottom: 26px; }

.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 46px; }
.feature {
  background: #fff; border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 4px 16px rgba(22,57,94,.07);
  transition: transform .2s, box-shadow .2s;
}
.feature:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(22,57,94,.14); }
.feature:hover .feat-img img { transform: scale(1.05); }
.feat-img { aspect-ratio: 3 / 2; overflow: hidden; }
.feat-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.feat-body { padding: 18px 20px 22px; border-top: 3px solid var(--terracotta); }
.feature h3 { font-size: 18px; margin-bottom: 8px; }
.feature p { font-size: 14.6px; color: #4a617c; }

/* ---------- Cartes chambres ---------- */
.rooms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px; }
.room-card {
  background: #fff; border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 6px 22px rgba(22,57,94,.09); display: flex; flex-direction: column;
  transition: transform .2s, box-shadow .2s;
}
.room-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.room-card .rc-img { position: relative; aspect-ratio: 16/10.5; overflow: hidden; }
.room-card .rc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.room-card:hover .rc-img img { transform: scale(1.05); }
.rc-price {
  position: absolute; bottom: 12px; left: 12px; background: rgba(255,255,255,.95);
  border-radius: 999px; padding: 6px 15px; font-weight: 600; color: var(--blue-night); font-size: 14.5px;
  box-shadow: 0 3px 10px rgba(0,0,0,.15);
}
.rc-price em { font-style: normal; color: var(--terracotta); }
.rc-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.rc-body h3 { font-size: 21px; }
.rc-meta { display: flex; gap: 14px; flex-wrap: wrap; color: #587290; font-size: 13.8px; }
.rc-meta span { display: inline-flex; align-items: center; gap: 6px; }
.rc-desc { font-size: 14.8px; color: #43597a; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rc-actions { display: flex; gap: 10px; margin-top: 8px; }

/* Détail chambre */
.room-hero { display: grid; grid-template-columns: 1.25fr 1fr; gap: 34px; align-items: start; }
.room-gallery-main { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 16/10; position: relative; }
.rg-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.92); color: var(--blue-night); font-size: 30px; line-height: 1;
  display: grid; place-items: center; padding-bottom: 4px;
  box-shadow: 0 4px 14px rgba(20,50,80,.3); transition: background .15s, transform .15s;
}
.rg-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.rg-prev { left: 14px; } .rg-next { right: 14px; }
.rg-count {
  position: absolute; bottom: 12px; right: 14px; z-index: 3;
  background: rgba(16,45,72,.72); color: #fff; border-radius: 999px;
  padding: 4px 13px; font-size: 13px; font-weight: 600;
}
.room-gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.room-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
.room-thumbs img { border-radius: 8px; aspect-ratio: 4/3; object-fit: cover; cursor: pointer; border: 2px solid transparent; }
.room-thumbs img.on { border-color: var(--terracotta); }
.room-panel { background: #fff; border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); }
.room-panel h1 { font-size: 30px; margin-bottom: 6px; }
.room-panel .price-line { font-size: 26px; color: var(--terracotta); font-weight: 600; margin: 10px 0 16px; }
.room-panel .price-line small { font-size: 15px; color: #587290; font-weight: 400; }
.feat-list { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 16px; margin: 18px 0 22px; padding: 0; list-style: none; }
.feat-list li { display: flex; align-items: center; gap: 9px; font-size: 14.8px; color: #33496a; }
.feat-list li::before { content: "✓"; color: var(--ok); font-weight: 700; }

/* ---------- Galerie ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.gallery-grid figure { border-radius: 12px; overflow: hidden; position: relative; aspect-ratio: 4/3; box-shadow: 0 4px 14px rgba(22,57,94,.1); }
.gallery-grid img, .gallery-grid svg { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.gallery-grid figure:hover img { transform: scale(1.06); }
.gallery-grid figure { cursor: pointer; }

/* Diaporama plein écran de la galerie */
.lightbox { position: fixed; inset: 0; background: rgba(9, 24, 44, .94); z-index: 2000; display: none; align-items: center; justify-content: center; }
.lightbox.open { display: flex; }
.lightbox figure { max-width: min(92vw, 1100px); margin: 0; text-align: center; }
.lightbox figure img { max-width: min(92vw, 1100px); max-height: 80vh; width: auto; height: auto; border-radius: 10px; box-shadow: 0 18px 60px rgba(0, 0, 0, .5); }
.lightbox figcaption { color: #cfe3f5; font-size: 14px; margin-top: 12px; }
.lb-close, .lb-prev, .lb-next { position: fixed; background: rgba(255, 255, 255, .13); color: #fff; border: 0; cursor: pointer; border-radius: 999px; width: 52px; height: 52px; font-size: 32px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background .2s; z-index: 2001; }
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: rgba(255, 255, 255, .3); }
.lb-close { top: 18px; right: 18px; font-size: 22px; }
.lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 16px; top: 50%; transform: translateY(-50%); }
.lb-count { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); color: #fff; background: rgba(255, 255, 255, .15); padding: 6px 16px; border-radius: 999px; font-size: 13.5px; letter-spacing: 1px; z-index: 2001; }
.gallery-grid figcaption {
  position: absolute; inset: auto 0 0 0; padding: 26px 14px 10px; color: #fff; font-size: 13.5px;
  background: linear-gradient(transparent, rgba(16,38,63,.75));
}

/* ---------- Réservation ---------- */
.steps { display: flex; gap: 0; counter-reset: step; margin-bottom: 34px; justify-content: center; flex-wrap: wrap; }
.steps .step {
  counter-increment: step; display: flex; align-items: center; gap: 10px;
  padding: 10px 22px; color: #587290; font-weight: 500; font-size: 15px;
}
.steps .step::before {
  content: counter(step); width: 30px; height: 30px; border-radius: 50%;
  background: var(--blue-mist); color: var(--blue-night); display: grid; place-items: center; font-weight: 700; font-size: 14px;
}
.steps .step.on { color: var(--blue-night); }
.steps .step.on::before { background: var(--terracotta); color: #fff; }

.book-layout { display: grid; grid-template-columns: 1fr 340px; gap: 30px; align-items: start; }
.book-rooms { display: flex; flex-direction: column; gap: 18px; }
.book-room-row {
  display: grid; grid-template-columns: 190px 1fr auto; gap: 18px; background: #fff;
  border-radius: var(--radius); padding: 14px; box-shadow: 0 4px 16px rgba(22,57,94,.08);
  align-items: center; border: 2px solid transparent;
}
.book-room-row.selected { border-color: var(--terracotta); }
.book-room-row.off { opacity: .55; }
.book-room-row .brr-img { border-radius: 10px; overflow: hidden; aspect-ratio: 4/3; }
.book-room-row .brr-img img { width: 100%; height: 100%; object-fit: cover; }
.brr-info h3 { font-size: 19px; margin-bottom: 4px; }
.brr-info .rc-meta { margin-bottom: 6px; }
.brr-price { text-align: right; }
.brr-price .p { font-size: 22px; font-weight: 600; color: var(--terracotta); }
.brr-price small { color: #587290; display: block; margin-bottom: 10px; }
.badge-unavail { display: inline-block; background: #fbeaea; color: var(--danger); border-radius: 999px; padding: 5px 13px; font-size: 13px; font-weight: 600; }
.qty-pick { display: inline-flex; align-items: center; gap: 8px; }
.qty-pick select { padding: 7px 12px; border: 1.5px solid #bcd7ec; border-radius: 9px; font-size: 16px; background: #fff; cursor: pointer; accent-color: var(--terracotta); }
.book-room-row.selected .qty-pick select { border-color: var(--terracotta); }
/* Personnes par chambre choisie (le prix dépend du nombre de personnes) */
.occ-picks { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.occ-picks:empty { display: none; }
.occ-item { display: inline-flex; align-items: center; gap: 8px; background: #f4f9fd; border: 1px solid #d8eafa; border-radius: 10px; padding: 7px 12px; }
.occ-item label { font-size: 13px; color: #33496a; font-weight: 500; }
.occ-item select { padding: 5px 10px; border: 1.5px solid #bcd7ec; border-radius: 8px; font-size: 15px; background: #fff; cursor: pointer; }
.price-grid { margin-top: 4px; }

.book-side { background: #fff; border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); position: sticky; top: 94px; }
.book-side h3 { margin-bottom: 14px; font-size: 20px; }
.sum-line { display: flex; justify-content: space-between; font-size: 15px; padding: 7px 0; border-bottom: 1px dashed var(--blue-mist); color: #33496a; }
.sum-line.total { font-weight: 700; color: var(--blue-night); font-size: 17px; border-bottom: none; padding-top: 12px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.disclaimer { font-size: 13.2px; color: #6a7f98; margin-top: 12px; }

.alert { border-radius: 12px; padding: 14px 18px; margin-bottom: 22px; font-weight: 500; }
.alert-err { background: #fbeaea; color: var(--danger); border: 1px solid #efc9c9; }
.alert-ok { background: #e7f5ec; color: var(--ok); border: 1px solid #bfe3cd; }

.confirm-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 46px; text-align: center; max-width: 620px; margin: 0 auto; }
.confirm-card .big-check { width: 74px; height: 74px; border-radius: 50%; background: #e7f5ec; color: var(--ok); display: grid; place-items: center; margin: 0 auto 20px; font-size: 34px; }
.confirm-card .ref { font-size: 26px; font-weight: 700; color: var(--blue-night); letter-spacing: 2px; background: var(--blue-pale); border-radius: 10px; padding: 10px 22px; display: inline-block; margin: 14px 0; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; }
.contact-card, .contact-form { background: #fff; border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow); }
.contact-card ul { list-style: none; margin-top: 6px; }
.contact-card li { display: flex; gap: 13px; align-items: flex-start; padding: 11px 0; border-bottom: 1px dashed var(--blue-mist); }
.contact-card li:last-child { border-bottom: none; }
.contact-card .ico { color: var(--terracotta); flex-shrink: 0; margin-top: 2px; }

/* ---------- Footer ---------- */
.site-footer { margin-top: 70px; background: var(--blue-night); color: #cfe0ef; position: relative; }
.footer-wave { color: var(--blue-night); margin-top: -68px; height: 70px; }
.footer-wave svg { width: 100%; height: 70px; display: block; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 40px; padding: 40px 22px 34px; }
.site-footer h4 { color: #fff; font-family: var(--font-body); text-transform: uppercase; letter-spacing: 1.6px; font-size: 13.5px; margin-bottom: 14px; }
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 8px; font-size: 15px; }
/* Les liens de navigation tiennent sur deux colonnes : le pied de page
   est deux fois moins haut, sans toucher au HTML ni a l'ordre des liens.
   Le bloc de contact reste sur une colonne, ce sont des informations. */
.site-footer ul:not(.footer-contact) { column-count: 2; column-gap: 28px; }
.site-footer ul:not(.footer-contact) li { break-inside: avoid; }
.site-footer a { color: #cfe0ef; }
.site-footer a:hover { color: #fff; }
.footer-brand { color: #fff; margin-bottom: 12px; }
.footer-brand .brand-mark { color: var(--terracotta); }
.site-footer p { font-size: 14.6px; opacity: .85; max-width: 300px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 16px 0; font-size: 13.5px; text-align: center; opacity: .75; }

/* Flatpickr accents */
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange,
.flatpickr-day.selected:hover { background: var(--blue); border-color: var(--blue); }
.flatpickr-day.inRange { background: var(--blue-mist); border-color: var(--blue-mist); box-shadow: -5px 0 0 var(--blue-mist), 5px 0 0 var(--blue-mist); }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover { color: #d3a2a2; text-decoration: line-through; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .features { grid-template-columns: repeat(2, 1fr); }
  .about-grid, .contact-grid, .room-hero { grid-template-columns: 1fr; }
  .book-layout { grid-template-columns: 1fr; }
  .book-side { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
/* ============ REFONTE MOBILE (≤760px) ============ */
@media (max-width: 760px) {
  body { font-size: 15.5px; }
  .container { padding: 0 16px; }

  /* En-tête compact : une seule ligne, hauteur maîtrisée */
  .header-inner { height: 60px; gap: 8px; }
  .brand { gap: 8px; min-width: 0; }
  .brand-mark svg { width: 30px; height: 30px; }
  .brand-text { line-height: 1; min-width: 0; }
  .brand-text .bt-name { font-size: 13.5px; letter-spacing: .8px; white-space: nowrap; }
  .brand-text .bt-sub { font-size: 8px; letter-spacing: 1.6px; white-space: nowrap; margin-top: 2px; }
  .header-right { gap: 8px; margin-left: auto; }
  .lang-switch a { padding: 3px 7px; font-size: 11px; }
  .burger { display: block; padding: 4px; }
  .main-nav {
    position: fixed; inset: 60px 0 auto 0; background: #fff; flex-direction: column; align-items: stretch;
    padding: 10px 16px 18px; gap: 0; border-bottom: 1px solid var(--blue-mist);
    transform: translateY(-130%); transition: transform .25s ease; box-shadow: var(--shadow); z-index: 60;
  }
  .main-nav.open { transform: translateY(0); }
  .main-nav a:not(.btn) { padding: 13px 4px; border-bottom: 1px solid var(--blue-pale); font-size: 16px; }
  .main-nav a:not(.btn).active::after, .main-nav a:not(.btn):hover::after { display: none; }
  .nav-book { margin: 14px 0 0; text-align: center; }

  /* Hero : plus court, boutons pleine largeur, lisible */
  .hero-photo { min-height: 0; }
  .hero-photo .hero-inner, .hero-inner { padding: 40px 0 76px; }
  .hero .kicker { font-size: 11px; letter-spacing: 1px; padding: 5px 12px; margin-bottom: 16px; }
  .hero-photo h1, .hero h1 { font-size: 31px; margin-bottom: 12px; }
  .hero p { font-size: 15.5px; margin-bottom: 20px; }
  .hero-actions { gap: 10px; }
  .hero-actions .btn { width: 100%; text-align: center; }
  .btn-lg { padding: 14px 24px; font-size: 16px; }
  .hero-chips { margin-top: 20px; gap: 8px 14px; }
  .hero-chips li { font-size: 12.5px; }

  /* Recherche : compacte, dates côte à côte */
  .quick-book { margin-top: -46px; }
  .quick-book .qb-card { grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px; border-radius: 14px; }
  .qb-title { font-size: 12px; margin-bottom: -2px; }
  .quick-book .qb-card > div:nth-child(4) { grid-column: 1 / -1; } /* Voyageurs pleine largeur */
  .quick-book .qb-card .qb-submit, .quick-book .qb-card > div:last-of-type { grid-column: 1 / -1; }
  .quick-book .qb-card .btn { width: 100%; }
  .field label { font-size: 12.5px; margin-bottom: 4px; }
  .field input, .field select, .field textarea { padding: 11px 12px; font-size: 15px; }

  /* Sections : rythme resserré */
  .section { padding: 44px 0; }
  .section-head { margin-bottom: 26px; }
  .section-head .deco { width: 38px; }
  .section-head h1, .section-head h2 { font-size: 25px; margin: 6px 0 8px; }
  .section-head p { font-size: 14.5px; }

  /* À propos */
  .about-grid { gap: 22px; }
  .about-art img { max-height: 300px !important; object-position: center 40% !important; }
  /* Collage de l'accueil : on montre les photos de l'hôtel en entier (enseigne comprise) */
  .about-collage img { max-height: none !important; object-position: center !important; }
  .about-collage { gap: 8px; }
  .about-collage .ac-row { gap: 8px; }
  .about-copy h2 { font-size: 24px; }
  .about-copy .btn { width: 100%; text-align: center; }
  .features { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 26px; }
  .feat-body { padding: 12px 13px 15px; }
  .feature h3 { font-size: 15.5px; }
  .feature p { font-size: 13.2px; }

  /* Chambres */
  .rooms-grid { grid-template-columns: 1fr; gap: 18px; }
  .rc-body { padding: 16px 16px 18px; }
  .rc-body h3 { font-size: 19px; }
  .rc-actions .btn { flex: 1; text-align: center; }

  /* Page chambre */
  .room-hero { gap: 18px; }
  .room-panel { padding: 20px; }
  .room-panel h1 { font-size: 24px; }
  .room-panel .price-line { font-size: 22px; }
  .feat-list { grid-template-columns: 1fr; }
  .rg-arrow { width: 38px; height: 38px; font-size: 24px; }
  .rg-prev { left: 8px; } .rg-next { right: 8px; }

  /* Galerie : 2 colonnes */
  .gallery-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .gallery-grid figcaption { font-size: 11.5px; padding: 18px 8px 7px; }

  /* Réservation */
  .steps .step { padding: 7px 10px; font-size: 13px; }
  .steps .step::before { width: 24px; height: 24px; font-size: 12px; }
  .book-room-row { grid-template-columns: 1fr; gap: 10px; padding: 12px; }
  .book-room-row .brr-img { aspect-ratio: 16/9; }
  .brr-price { text-align: left; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .brr-price small { margin-bottom: 0; }
  .qty-pick { margin-left: auto; }
  .book-side { padding: 18px; }
  .confirm-card { padding: 26px 18px; }
  .form-grid { grid-template-columns: 1fr; }

  /* Contact */
  .contact-card, .contact-form { padding: 20px; }

  /* Pied de page */
  .footer-grid { grid-template-columns: 1fr; gap: 26px; padding: 30px 16px 24px; }
  .site-footer p { max-width: none; }
  /* Deux colonnes ne doivent pas rendre les liens difficiles a toucher :
     chaque ligne garde 40 px de hauteur au doigt. */
  .site-footer ul:not(.footer-contact) li { margin-bottom: 0; }
  .site-footer ul:not(.footer-contact) a {
    display: block; line-height: 22px; padding: 9px 0;
  }
  .footer-bottom { font-size: 12px; padding: 13px 16px; }
}

/* Très petits écrans */
@media (max-width: 380px) {
  .hero-photo h1, .hero h1 { font-size: 27px; }
  .brand-text .bt-sub { display: none; }
}

/* ============================================================
   REFONTE 2026 — page de réservation en une seule page,
   bandeau réservation directe, bouton WhatsApp, accessibilité.
   Tout ce qui dépend du JavaScript porte la classe .js-only :
   sans JavaScript, l'interface classique reste affichée.
   ============================================================ */
.js-only { display: none; }
html.js .js-only { display: block; }
html.js .bk-dates-native { display: none; }
html.js .qty-pick { display: none; }
html.js .book-details.is-off { display: none; }

/* Champ piège anti-robots (jamais visible, jamais lu à voix haute) */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Bandeau « réservation directe » */
.direct-bar {
  background: var(--sand); color: #7a5a36; text-align: center;
  font-size: 13.6px; padding: 7px 16px; letter-spacing: .2px;
  border-bottom: 1px solid #f0e4cb;
}
.direct-bar span { color: var(--terracotta); }

/* ---------- Étape 1 : dates + voyageurs ---------- */
.bk-search {
  background: #fff; box-shadow: var(--shadow); border-radius: var(--radius);
  padding: 20px 24px; margin-bottom: 26px;
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 14px 18px; align-items: end;
}
html.js .bk-search { grid-template-columns: 1.3fr 1fr auto; }
.bk-search .field { margin: 0; }
.bk-trav { position: relative; }
.trav-btn {
  width: 100%; text-align: left; background: var(--blue-pale); border: 1.5px solid var(--blue-mist);
  border-radius: 10px; padding: 12px 14px; font-family: var(--font-body); font-size: 15.5px;
  color: var(--ink); cursor: pointer;
}
.trav-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
html.js .trav-pop {
  display: none; position: absolute; z-index: 30; top: 100%; left: 0; margin-top: 6px;
  background: #fff; border: 1px solid var(--blue-mist); border-radius: 12px;
  box-shadow: var(--shadow); padding: 14px 16px; min-width: 250px;
}
html.js .trav-pop.open { display: block; }
.tp-line { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.tp-line label { font-size: 14.5px; font-weight: 500; color: var(--ink); margin: 0; }
.tp-line select { width: 84px; padding: 8px 10px; border: 1.5px solid var(--blue-mist); border-radius: 9px; font-size: 16px; background: #fff; }
.tp-ok { width: 100%; margin-top: 4px; }
.bk-go .btn { width: 100%; }

/* ---------- Étape 2 : cartes chambres ---------- */
.book-main { min-width: 0; }
.book-rooms { display: flex; flex-direction: column; gap: 18px; }
.book-rooms.loading { opacity: .5; transition: opacity .15s; }
.bk-empty { background: #fff; border-radius: var(--radius); padding: 26px; text-align: center; color: #4a617c; box-shadow: 0 4px 16px rgba(22,57,94,.08); }
.bk-sub { margin-top: 10px; font-weight: 600; color: #6a7f98; font-size: 14.5px; }

.rc2 {
  display: grid; grid-template-columns: 260px 1fr 190px; gap: 20px;
  background: #fff; border-radius: var(--radius); padding: 16px;
  box-shadow: 0 4px 16px rgba(22,57,94,.08); align-items: center;
  border: 2px solid transparent;
}
.rc2.selected { border-color: var(--terracotta); box-shadow: 0 8px 24px rgba(208,122,80,.18); }
.rc2.off { opacity: .6; }
.rc2-img { border-radius: 12px; overflow: hidden; aspect-ratio: 4/3; }
.rc2-img img { width: 100%; height: 100%; object-fit: cover; }
.rc2-body { min-width: 0; }
.rc2-body h3 { font-size: 20px; margin-bottom: 6px; }
.rc2-body h3 a { color: var(--blue-night); }
.rc2-body h3 a:hover { color: var(--terracotta); }
.rc2-meta { display: flex; gap: 8px 16px; flex-wrap: wrap; color: #587290; font-size: 13.8px; margin-bottom: 6px; }
.rc2-left { color: #2e7d4f; font-weight: 600; }
.rc2-feat { font-size: 13.8px; color: #6a7f98; }
.rc2-pick { display: flex; flex-direction: column; align-items: stretch; gap: 9px; text-align: right; }
.rc2-price { display: flex; flex-direction: column; }
.rc2-price .rc2-total { font-size: 23px; font-weight: 600; color: var(--terracotta); line-height: 1.2; }
.rc2-price small { color: #587290; font-size: 13px; }
.rc2-btn { width: 100%; }
html.js .rc2-step { display: none; }
.rc2-step { align-items: center; justify-content: flex-end; gap: 12px; }
html.js .rc2.selected .rc2-step { display: flex; }
.rc2-step button {
  width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--blue-mist);
  background: #fff; color: var(--blue-night); font-size: 19px; line-height: 1; cursor: pointer;
}
.rc2-step button:hover { border-color: var(--terracotta); color: var(--terracotta); }
.rc2-step .st-n { font-weight: 700; min-width: 20px; text-align: center; }
.rc2 .occ-picks { grid-column: 1 / -1; }
html.js .rc2 .occ-picks { display: none; }
html.js .rc2 .occ-picks.open { display: flex; }

/* ---------- Récapitulatif + étape 3 ---------- */
.book-details { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px; margin-top: 22px; }
.book-details h3 { font-size: 21px; margin-bottom: 16px; scroll-margin-top: 90px; }
.consent-line { display: flex; gap: 10px; align-items: flex-start; font-size: 13.6px; color: #33496a; margin: 6px 0 16px; cursor: pointer; }
.consent-line input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--terracotta); }
.btn-send { width: 100%; font-size: 17px; }
.field-err { color: var(--danger); font-size: 13px; margin-top: 4px; }
.field input.invalid, .field textarea.invalid { border-color: var(--danger); }
.reassure { margin-top: 18px; background: var(--blue-pale); border-radius: 12px; padding: 14px 18px; }
.reassure p { font-size: 14.2px; color: #33496a; margin-bottom: 6px; display: flex; gap: 8px; align-items: flex-start; }
.reassure p span { color: var(--ok); }
.reassure .disclaimer { display: block; margin-top: 8px; }
.reassure-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.occ-note { font-size: 13px; color: #587290; margin-top: 10px; }
.sum-warn { margin-top: 10px; background: #fdf3dd; color: #8a6314; border-radius: 9px; padding: 9px 12px; font-size: 13.4px; }
.linkish { background: none; border: none; padding: 0; color: var(--blue); text-decoration: underline; cursor: pointer; font: inherit; }

/* Barre collante mobile : le total et l'action sont toujours sous les yeux */
.book-bar { display: none; }
html.js .book-bar { display: none; }
html.js .book-bar.on {
  display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: #fff; box-shadow: 0 -6px 22px rgba(22,57,94,.18);
  padding: 10px 16px; align-items: center; justify-content: space-between; gap: 14px;
}
.bb-info { display: flex; flex-direction: column; line-height: 1.25; }
.bb-info strong { font-size: 19px; color: var(--terracotta); }
.bb-info small { font-size: 12.5px; color: #587290; }
@media (min-width: 761px) { html.js .book-bar.on { display: none; } }

/* ---------- Bouton WhatsApp flottant ---------- */
.wa-fab { position: fixed; right: 16px; bottom: 18px; z-index: 70; display: flex; align-items: center; gap: 4px; }
.wa-fab.hide { display: none; }
.wa-btn {
  display: inline-flex; align-items: center; gap: 9px; background: #25d366; color: #fff;
  border-radius: 999px; padding: 11px 18px 11px 14px; font-weight: 600; font-size: 15px;
  box-shadow: 0 8px 22px rgba(11,90,45,.32);
}
.wa-btn:hover { background: #1ebe5a; color: #fff; }
.wa-close {
  width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--blue-mist);
  background: #fff; color: #6a7f98; font-size: 12px; line-height: 1; cursor: pointer; padding: 0;
}
/* Pas de superposition avec la barre de total de la réservation */
html.js body.book-bar-on .wa-fab { display: none; }

/* ---------- Fil des étapes (liste) ---------- */
ol.steps { list-style: none; padding: 0; }

@media (max-width: 960px) {
  .rc2 { grid-template-columns: 200px 1fr; }
  .rc2-pick { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; text-align: left; }
  .rc2-price { flex: 1; }
  .rc2-btn { width: auto; min-width: 170px; }
}

@media (max-width: 760px) {
  .direct-bar { font-size: 12px; padding: 6px 12px; }
  .bk-search { grid-template-columns: 1fr 1fr; padding: 14px; gap: 10px 12px; }
  .bk-range input { font-size: 14.5px; }
  html.js .bk-search { grid-template-columns: 1fr; }
  .bk-go { grid-column: 1 / -1; }
  .rc2 { grid-template-columns: 1fr; gap: 12px; padding: 12px; }
  .rc2-img { aspect-ratio: 16/9; }
  .rc2-pick { flex-direction: column; align-items: stretch; }
  .rc2-btn { width: 100%; }
  .rc2-step { justify-content: center; }
  .book-details { padding: 18px 16px; }
  html.js .book-bar.on ~ * { margin-bottom: 0; }
  html.js body { padding-bottom: 0; }
  .wa-fab { right: 12px; bottom: 12px; }
  .wa-btn { padding: 10px 15px 10px 12px; font-size: 14px; }
}

/* Repères de focus visibles au clavier (WCAG 2.2) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
.gallery-grid figure:focus-visible {
  outline: 3px solid var(--terracotta); outline-offset: 2px; border-radius: 4px;
}

/* ---------- Questions fréquentes ---------- */
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: #fff; border-radius: 14px; box-shadow: 0 4px 16px rgba(22,57,94,.08); padding: 16px 20px; }
.faq-item summary {
  cursor: pointer; font-family: var(--font-title); font-weight: 600; font-size: 17px;
  color: var(--blue-night); list-style: none; display: flex; justify-content: space-between;
  gap: 14px; align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--terracotta); font-size: 24px; line-height: 1; }
.faq-item[open] summary::after { content: "–"; }
.faq-item p { margin-top: 10px; color: #3d5470; font-size: 15px; }

/* ============================================================
   Vue panoramique de la terrasse + photo de la porte
   (panoramique large et PARTIEL — jamais présenté comme du 360°)
   ============================================================ */

/* Vignette d'appel : rien d'autre n'est chargé tant qu'on ne clique pas */
.pano-card {
  position: relative; display: block; width: 100%; padding: 0; border: 0;
  border-radius: var(--radius); overflow: hidden; cursor: pointer;
  background: var(--blue-mist); box-shadow: 0 6px 22px rgba(22,57,94,.12);
  margin-bottom: 22px; line-height: 0;
}
.pano-card img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3/1; transition: transform .4s; }
.pano-card:hover img { transform: scale(1.03); }
.pano-card::after {   /* voile bas pour garder les libellés lisibles */
  content: ""; position: absolute; inset: auto 0 0 0; height: 55%;
  background: linear-gradient(transparent, rgba(16,38,63,.7));
}
.pano-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.94); color: var(--blue-night);
  border-radius: 999px; padding: 7px 15px; font-size: 13.5px; font-weight: 600;
  line-height: 1; box-shadow: 0 3px 10px rgba(0,0,0,.18);
}
.pano-badge svg { color: var(--terracotta); }
.pano-hint {
  position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2;
  color: #fff; font-size: 13.5px; font-weight: 500; line-height: 1.3;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
/* Sur l'accueil, la vignette occupe toute la largeur de la grille */
.gallery-grid .pano-in-grid { grid-column: 1 / -1; margin-bottom: 0; }

/* Le bouton WhatsApp ne doit pas flotter au-dessus de la visionneuse */
body.lb-open .wa-fab { display: none; }

/* Le lecteur occupe toute la visionneuse existante (Échap, ✕, piège de focus) */
.lb-pano { display: none; }
.lightbox.lb-mode-pano .lb-pano { display: block; position: fixed; inset: 0; width: 100%; height: 100%; }
/* Écran plus haut que large (téléphone en portrait) : le panoramique s'affiche
   en bande, sinon le cadre est bien plus haut que la photo ne couvre le ciel
   et le sol — d'où des bandes noires. */
@media (max-aspect-ratio: 1/1) {
  .lightbox.lb-mode-pano .lb-pano {
    inset: 50% 0 auto 0; height: 64vw; min-height: 200px; transform: translateY(-50%);
  }
}
.lightbox.lb-mode-pano figure,
.lightbox.lb-mode-pano .lb-prev,
.lightbox.lb-mode-pano .lb-next,
.lightbox.lb-mode-pano .lb-count { display: none; }
.pano-state {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #cfe3f5; font-size: 15px; text-align: center; padding: 0 28px;
}

/* Photo de la porte, page Contact */
/* « Comment venir » : photo a gauche, itineraire et boutons a droite.
   Meme principe que .room-hero ; une seule colonne sous 760 px. */
.come-grid { display: grid; grid-template-columns: 38% 1fr; gap: 30px; align-items: stretch; }
/* Le texte commence en haut ; les boutons descendent occuper le bas de la
   colonne, pour qu'elle se termine a la meme hauteur que la photo. */
.come-text { line-height: 1.85; display: flex; flex-direction: column; }
.come-text > p { margin: 0; }
.come-text > p.come-actions { margin-top: auto; padding-top: 18px; }
.come-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.door-photo { margin: 0; }
/* hauteur maitrisee : la photo ne domine plus la section. Cadrage par le haut
   pour que l'enseigne HOTEL NISRINE reste entiere quelle que soit la largeur. */
.door-photo img { width: 100%; height: 360px; object-fit: cover; object-position: center top;
  border-radius: 12px; box-shadow: 0 6px 20px rgba(22,57,94,.16); display: block; }
.door-photo figcaption { font-size: 13.5px; color: #587290; margin-top: 8px; line-height: 1.4; }

@media (max-width: 760px) {
  .pano-card img { aspect-ratio: 16/9; }
  .pano-badge { font-size: 12.5px; padding: 6px 12px; }
  .pano-hint { font-size: 12.5px; }
  .come-grid { grid-template-columns: 1fr; gap: 18px; }
  .door-photo img { height: 320px; }
}

/* ==========================================================================
   THÈME « VILLE BLEUE » — page d'accueil (13/09/2026)
   --------------------------------------------------------------------------
   Habillage seulement : aucune structure, aucun texte, aucune photo modifiés.
   Tout est cantonné à .page-home pour ne pas toucher les autres pages ; la
   palette, elle, est déclarée globalement pour que la propagation soit
   ensuite immédiate.
   Le fichier d'origine est conservé : assets/css/style-avant-theme.css
   ========================================================================== */

:root {
  --c-ciel:       #cfe8f7;  /* le mur passé à la chaux — fond dominant */
  --c-ciel-clair: #d8edfa;
  --c-ciel-fonce: #b2d8f0;
  --c-ciel-pale:  #e2f1fb;  /* fond de la galerie */
  --c-porte:      #2f7cb0;  /* bleu vif des portes et volets */
  --c-menuiserie: #1b4a76;  /* bleu foncé — boutons secondaires, pied de page */
  --c-encre:      #123a5c;  /* titres et texte fort */
  --c-encre-doux: #325e82;  /* texte secondaire — assombri (contraste, voir §17) */
  --c-sable:      #f7efdf;  /* section « Le riad » */
  --c-terre:      #c9713f;  /* terre cuite — décor et grand texte */
  --c-terre-fonce:#8e4725;  /* petit texte et boutons — assombri (contraste) */
  --c-terre-clair:#f7dcc6;  /* séparateur sur fond bleu */
  --c-terre-survol:#73391d;
  /* UNE seule couleur pour tous les boutons d'action pleins du site.
     Blanc dessus : 4,55 (seuil 4,5). Avant, l'en-tete etait a #8e4725 et
     le hero a #c9713f — deux teintes pour un meme role, et #c9713f ne
     passait pas le contraste (3,55). */
  --c-action:      #b26031;
  /* Arcs outrepassés : la forme signature, en border-radius pur */
  --arc-photo:   50% 50% 14px 14px / 44% 44% 0 0;
  --arc-carte:   50% 50% 10px 10px / 30% 30% 0 0;
  --arc-mobile:  50% 50% 10px 10px / 18% 18% 0 0;
}

/* ---------- Boutons d'action : une seule teinte sur tout le site ----------
   L'en-tete est partagee par toutes les pages : la regle n'est pas cantonnee
   a .page-home, sinon « Reserver » resterait a l'ancienne terracotta ailleurs
   (blanc dessus : 3,19, sous le seuil). */
.btn-accent, .nav-book {
  background: var(--c-action); border-color: var(--c-action); color: #fff;
}
.btn-accent:hover, .nav-book:hover {
  background: var(--c-terre-survol); border-color: var(--c-terre-survol); color: #fff;
}

/* ---------------------------------------------------------------- généralités */
.page-home { background: var(--c-ciel-pale); color: var(--c-encre); }
.page-home .separateur { display: block; margin: 18px 0 22px; }
.page-home .section-head .separateur { margin-left: auto; margin-right: auto; }
.page-home .section-head .separateur[width="118"] { margin-left: 0; }
.page-home .deco { display: none; }          /* remplacé par le séparateur */

.page-home h1, .page-home h2, .page-home h3 { color: var(--c-encre); }
.page-home h2 { font-size: 46px; letter-spacing: -.8px; line-height: 1.06; }
.page-home h3 { font-size: 27px; line-height: 1.2; }
.page-home p  { font-size: 16px; line-height: 1.8; }
.page-home .kicker {
  display: block; font-size: 11px; letter-spacing: 3.4px; text-transform: uppercase;
  font-weight: 700; color: var(--c-terre-fonce); margin-bottom: 14px;
}
.page-home .section-head p { color: var(--c-encre-doux); max-width: 660px; margin: 0 auto; }

/* ------------------------------------------------------------------ en-tête */
/* Posé directement sur le ciel : plus de fond blanc ni de bordure basse. */
.page-home .site-header {
  background: var(--c-ciel-clair); border-bottom: none; box-shadow: none;
}
.page-home .site-header .main-nav a { color: var(--c-encre); }
.page-home .site-header .main-nav a.on { font-weight: 700; }
.page-home .bt-name { color: var(--c-encre); }
.page-home .direct-bar {
  background: var(--c-ciel-clair); color: var(--c-menuiserie); border: none;
}
.page-home .lang-switch {
  background: rgba(255, 255, 255, .6); border-radius: 999px; padding: 3px; border: none;
}
.page-home .lang-switch a { color: var(--c-menuiserie); border-radius: 999px; }
.page-home .lang-switch a.on { background: #fff; color: var(--c-menuiserie); font-weight: 600; }

/* --------------------------------------------------------------------- hero */
.page-home .hero {
  /* l'ancien hero centrait son contenu en flex : ici c'est un bloc */
  display: block;
  /* 640 px est la hauteur de reference ; au-dela le hero suit son contenu,
     sinon la troisieme garantie passe sous la barre de recherche quand les
     deux boutons s'empilent (espagnol, francais). L'ouverture descend avec. */
  position: relative; height: auto; min-height: 640px; overflow: hidden; padding: 0;
  background: linear-gradient(168deg, var(--c-ciel-clair) 0%, var(--c-ciel) 42%, var(--c-ciel-fonce) 100%);
}
/* La bande de zellige du hero n'existe que sur telephone. */
.page-home .hero-zellige { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }

/* Sur ordinateur le conteneur s'efface : la photo se comporte exactement
   comme avant, enfant direct du hero. Rien ne change au-dessus de 600 px. */
.page-home .hero-fenetre { display: contents; }
.page-home .hero-img, .page-home .hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
.page-home .hero-veil { display: none; }
/* L'ouverture : l'ombre géante peint le voile partout SAUF dans l'arc. */
.page-home .hero-arc {
  position: absolute; left: 46%; top: 46px; width: 50%; bottom: 0; z-index: 1;
  border-radius: 50% 50% 14px 14px / 40% 40% 0 0;
  border: 2px solid rgba(255, 255, 255, .92);
  box-shadow: 0 0 0 9999px rgba(158, 209, 238, .55);
}
.page-home .hero-cadre {
  position: absolute; left: 44.6%; top: 24px; width: 52.8%; bottom: -24px; z-index: 2;
  border-radius: 50% 50% 16px 16px / 40% 40% 0 0;
  border: 1.2px solid rgba(47, 124, 176, .42);
}
.page-home .hero-lecture {
  position: absolute; left: 0; top: 0; width: 39%; height: 100%; z-index: 3;
  background: linear-gradient(92deg, rgba(158, 209, 238, .34) 0%, rgba(158, 209, 238, .26) 55%, rgba(158, 209, 238, 0) 100%);
}
.page-home .hero-clous { position: absolute; left: calc(46% + 8px); top: 350px; z-index: 4; }
.page-home .hero-inner {
  /* l'ancien hero etait une colonne centree : ici le texte est a gauche */
  /* la barre de recherche remonte de 48 px sur le hero : le contenu est
     centre un peu plus haut pour qu'aucune garantie ne passe dessous */
  width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 22px 62px;
  position: relative; z-index: 5; height: 100%;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
/* sans flex-shrink:0, le SVG du séparateur est ecrase a 0 de haut quand le
   contenu du hero approche la hauteur disponible */
.page-home .hero-inner > * { max-width: 622px; flex-shrink: 0; }
.page-home .hero .separateur { margin: 10px 0 14px; }
.page-home .kicker { background: none; border: none; padding: 0; border-radius: 0; }
/* couleurs foncees apres mesure du contraste sur la photo reelle du hero :
   #9a4720 tombait a 3,04 sur le ciel clair, #b85c2a a 2,32, #0f3654 a 3,95 */
.page-home .hero .kicker { color: #6f3317; font-weight: 700; }
/* Le paragraphe et les garanties s'arretent au montant gauche de l'ouverture :
   au-dela, ils se liraient sur la photo vive, sans le voile. Le titre, lui,
   est assez grand et assez fonce pour mordre un peu sur l'arc. */
.page-home .hero p, .page-home .hero-chips,
.page-home .hero-actions { max-width: 386px; }
.page-home .hero h1 {
  text-wrap: balance;
  font-family: var(--font-title); font-size: 58px; line-height: 1.08;
  letter-spacing: -1.4px; color: #0a2a47; font-weight: 600;
  /* Trois lignes, et aucune ne franchit le montant de l'ouverture : au-dela,
     le texte tomberait sur la photo nette, sans voile. Reduire la seule
     largeur faisait passer a quatre lignes ; a 62 px il restait 6 px de
     depassement en francais, et 60 px laissait encore 29 px en anglais.
     58 px / 400 px : trois lignes et zero depassement dans les 3 langues. */
  /* La largeur suit celle de l'ouverture, comme le paragraphe.
     450 px et non 400 : « Reveillez-vous » mesure 365 px a 58 px de corps,
     et text-wrap: balance preferait le couper au trait d'union pour egaliser
     les lignes. A 450 px le titre tient sur deux lignes pleines. */
  max-width: min(450px, 40vw);
}
.page-home .hero h1 em { font-style: italic; color: #9b4d23; }
/* text-wrap: balance et non pretty. Mesure des trois langues a 1440, 1280,
   1100, 1024, 768, 430, 375 et 360 : pretty laissait des dernieres lignes a
   21 a 66 % de la plus longue (« a l'arrivee. » seul en francais, « la
   llegada. » en espagnol) ; balance ramene tout entre 84 et 92 %, et n'est
   jamais moins bon que pretty sur aucune des largeurs mesurees. */
.page-home .hero p { color: #0f3654; font-size: 16px; font-weight: 500; text-wrap: balance; }
.page-home .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.page-home .hero .btn-ghost {
  border: 1.8px solid #10405f; background: rgba(255, 255, 255, .55);
  color: #10405f; font-weight: 600;
}
.page-home .hero .btn-ghost:hover { background: rgba(255, 255, 255, .82); color: #10405f; }
.page-home .hero-chips {
  display: flex; gap: 8px 20px; flex-wrap: wrap; list-style: none; margin-top: 20px; padding: 0;
}
.page-home .hero-chips li {
  display: flex; align-items: center; gap: 7px; background: none; border: none; padding: 0;
  font-size: 14.5px; font-weight: 500; color: #0c2c45;
}
/* la coche est maintenant un SVG dans le HTML : on retire l'ancienne pastille */
.page-home .hero-chips li::before { content: none; display: none; }
.page-home .hero-chips .coche { color: var(--c-terre-fonce); flex-shrink: 0; }

/* ------------------------------------------------------- barre de recherche */
.page-home .quick-book { position: relative; z-index: 6; margin-top: -48px; }
.page-home .qb-card {
  background: #fff; border-radius: 16px; border: none;
  box-shadow: 0 18px 44px rgba(18, 58, 92, .16);
}
.page-home .qb-title { color: var(--c-encre); }
.page-home .qb-card label {
  font-size: 12px; letter-spacing: .6px; text-transform: uppercase;
  color: var(--c-porte); font-weight: 600;
}
.page-home .qb-card input, .page-home .qb-card select {
  font-size: 16px; color: var(--c-encre); background: none; border: none;
  border-bottom: 1px solid #cbdced; border-radius: 0; padding-left: 0;
}
.page-home .qb-card .btn-primary {
  background: var(--c-menuiserie); border-color: var(--c-menuiserie); color: #fff;
}
.page-home .qb-card .btn-primary:hover { background: var(--c-encre); border-color: var(--c-encre); }

/* -------------------------------------------------------- fonds de sections */
.page-home .section-riad, .page-home .section-sand { background: var(--c-sable); }
.page-home .section-chambres, .page-home .section-avis { background: #fff; }
.page-home .section-galerie { background: var(--c-ciel-pale); }

/* ------------------------------------------------------------- « Le riad » */
.page-home .about-grid { align-items: start; }
.page-home .ra-main { position: relative; }
.page-home .ra-main img {
  width: 100%; height: 546px; object-fit: cover; object-position: center 58%;
  border-radius: 50% 50% 14px 14px / 36% 36% 0 0;
  box-shadow: 0 24px 50px rgba(18, 58, 92, .18);
  position: relative; z-index: 1;
}
/* le trait d'encadrement, décalé derrière la photo */
.page-home .ra-main::before {
  content: ''; position: absolute; left: -14px; top: -14px; right: 14px; bottom: 26px;
  border: 1.4px solid var(--c-porte); border-radius: 50% 50% 14px 14px / 36% 36% 0 0;
  z-index: 0;
}
.page-home .ra-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.page-home .ra-duo img {
  width: 100%; height: 150px; object-fit: cover; border-radius: 10px;
  box-shadow: 0 10px 22px rgba(18, 58, 92, .12);
}
.page-home .about-copy p { color: var(--c-encre-doux); }

/* les 4 encadrés : posés sur le sable, sans cadre de carte */
.page-home .features { margin-top: 56px; }
.page-home .feature { background: none; border: none; box-shadow: none; padding: 0; }
.page-home .feature .feat-img img { border-radius: 10px; height: 150px; object-fit: cover; }
.page-home .feature h3 { font-size: 19px; color: var(--c-encre); margin: 14px 0 6px; }
.page-home .feature p { font-size: 15px; color: var(--c-encre-doux); }

/* ------------------------------------------------------------ cartes chambres */
.page-home .room-card {
  background: none; border: none; box-shadow: none; border-radius: 0; overflow: visible;
}
.page-home .rc-img {
  overflow: hidden; border-radius: var(--arc-carte);
  box-shadow: 0 16px 34px rgba(18, 58, 92, .13);
}
.page-home .rc-img img { height: 330px; object-fit: cover; object-position: center 60%; }
.page-home .rc-body { padding: 20px 2px 0; }
.page-home .rc-meta { font-size: 13px; color: var(--c-encre-doux); gap: 14px; }
.page-home .rc-desc { font-size: 15.5px; color: var(--c-encre-doux); }
.page-home .rc-prix { display: flex; align-items: baseline; gap: 7px; margin: 14px 0 16px; }
.page-home .rc-prix small { font-size: 13px; color: var(--c-encre-doux); font-weight: 400; }
.page-home .rc-prix em {
  font-family: var(--font-title); font-style: normal; font-size: 30px;
  color: var(--c-terre); line-height: 1;
}
.page-home .section-sand .rc-img { border-radius: var(--arc-carte); }

/* ------------------------------------------------------------------- avis */
.page-home .avis-carte { background: none; padding: 0; border-top: 2px solid var(--c-terre); padding-top: 18px; }
.page-home .avis-note { color: var(--c-terre); letter-spacing: 2px; font-size: 18px; margin-bottom: 8px; }
.page-home .avis-carte p { font-size: 15px; color: var(--c-encre-doux); margin-bottom: 10px; }
.page-home .avis-carte strong { font-size: 14px; color: var(--c-encre); }

/* -------------------------------------------------------------- la terrasse */
.page-home .section-terrasse {
  position: relative; background: var(--c-porte); overflow: hidden; padding-bottom: 0;
}
.page-home .section-terrasse .section-head { position: relative; z-index: 1; }
.page-home .section-terrasse h2 { color: #fff; }
.page-home .section-terrasse .kicker { color: var(--c-terre-clair); }
.page-home .section-terrasse p { color: #fff; }
.page-home .terrasse-bande { position: relative; z-index: 1; margin-top: 44px; }
.page-home .terrasse-frise { display: block; width: 100%; height: 20px; }
.page-home .pano-bande {
  display: block; position: relative; width: 100%; height: 396px; padding: 0;
  border: none; background: none; cursor: pointer; overflow: hidden;
}
.page-home .pano-bande img { width: 100%; height: 100%; object-fit: cover; }
.page-home .pb-voile {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 42, 71, .46) 0%, rgba(10, 42, 71, 0) 32%,
              rgba(10, 42, 71, 0) 58%, rgba(10, 42, 71, .52) 100%);
}
.page-home .pb-badge {
  position: absolute; left: 26px; top: 22px; display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, .92); color: var(--c-menuiserie); font-size: 13px; font-weight: 600;
  padding: 8px 15px; border-radius: 999px;
}
.page-home .pb-bouton {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: #fff; color: var(--c-menuiserie); font-size: 15px; font-weight: 600;
  padding: 13px 26px; border-radius: 999px; box-shadow: 0 10px 26px rgba(10, 42, 71, .3);
  white-space: nowrap;
}
.page-home .pano-bande:hover .pb-bouton { background: var(--c-sable); }

/* ---------------------------------------------------------------- galerie */
.page-home .gal-tete {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 30px;
}
.page-home .gal-tete .section-head { text-align: left; margin: 0; }
.page-home .btn-outline {
  background: none; border: 1.6px solid var(--c-menuiserie); color: var(--c-menuiserie);
  font-weight: 600; flex-shrink: 0;
}
.page-home .btn-outline:hover { background: var(--c-menuiserie); color: #fff; }
.page-home .gal-grille {
  display: grid; grid-template-columns: 1.55fr 1fr; grid-template-rows: 1fr 1fr;
  gap: 26px; height: 580px;
}
.page-home .gal-grille figure { margin: 0; position: relative; overflow: hidden; height: 100%; }
.page-home .gal-grille .g-grande { grid-row: 1 / 3; border-radius: 50% 50% 14px 14px / 22% 22% 0 0; }
/* une seule photo porte l'arc, les cinq autres l'accompagnent */
.page-home .gal-grille figure:not(.g-grande),
.page-home .gal-rangee2 figure { border-radius: 12px; }
.page-home .gal-rangee2 {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 26px; height: 260px;
}
.page-home .gal-rangee2 figure { margin: 0; position: relative; overflow: hidden; height: 100%; }
.page-home .gal-rangee2 img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.page-home .gal-rangee2 figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 18px 12px; color: #fff;
  font-size: 13.5px; background: linear-gradient(180deg, rgba(10, 42, 71, 0), rgba(10, 42, 71, .62));
}
.page-home .gal-grille img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.page-home .gal-grille figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 18px 12px; color: #fff;
  font-size: 13.5px; background: linear-gradient(180deg, rgba(10, 42, 71, 0), rgba(10, 42, 71, .62));
}

/* ------------------------------------------------------------ pied de page */
.page-home .site-footer { background: var(--c-menuiserie); color: var(--c-ciel); }
.page-home .site-footer p, .page-home .site-footer li,
.page-home .site-footer a { color: var(--c-ciel); }
.page-home .site-footer h4 { color: #fff; }
.page-home .site-footer a:hover { color: #fff; }
.page-home .footer-wave { color: var(--c-menuiserie); }
/* logo inversé : fond blanc, arche bleu porte, porte intérieure terre cuite */
/* Le logo s'inverse sur le bleu du pied de page : fond blanc, arc bleu porte,
   porte terre cuite. Les selecteurs suivent l'ORDRE des formes du dessin
   (08/10/2026) — 4 rect, 3 circle, 2 path. Ils visaient auparavant « svg rect »
   et « svg circle » sans distinction, ce qui convenait a l'ancienne marque qui
   n'en avait qu'un de chaque : avec la nouvelle, tout devenait blanc.
   Si le dessin change encore, ces quatre regles sont a revoir. */
.page-home .footer-brand .brand-mark svg rect:nth-of-type(1) { fill: #fff; }
.page-home .footer-brand .brand-mark svg circle:nth-of-type(1),
.page-home .footer-brand .brand-mark svg rect:nth-of-type(2) { fill: var(--c-porte); }
.page-home .footer-brand .brand-mark svg circle:nth-of-type(2),
.page-home .footer-brand .brand-mark svg rect:nth-of-type(3) { fill: var(--c-terre); }
.page-home .footer-brand .brand-mark svg circle:nth-of-type(3) { fill: #fff; }
.page-home .footer-brand .brand-mark svg rect:nth-of-type(4) { fill: var(--c-porte); }
.page-home .footer-brand .brand-mark svg path { fill: #fff; }

/* ======================== écrans intermédiaires ======================== */
@media (max-width: 1100px) {
  .page-home .hero-inner { height: auto; padding: 44px 22px 92px; }
  .page-home h2 { font-size: 38px; }
  .page-home .hero h1 { font-size: 52px; letter-spacing: -1px; }
  .page-home .hero-inner > * { max-width: 54%; }
  .page-home .ra-main img { height: 420px; }
  .page-home .gal-grille { height: 500px; }
}

@media (max-width: 860px) {
  .page-home .hero h1 { font-size: 38px; }
  .page-home .hero-arc { left: 48%; width: 48%; }
  .page-home .hero-cadre { left: 46.6%; width: 50.8%; }
  .page-home .hero-clous { left: calc(48% + 8px); top: 320px; }
  .page-home .hero-inner > * { max-width: 46%; }
  .page-home .gal-grille { height: 440px; gap: 18px; }
  .page-home .ra-main img { height: 340px; }
  .page-home .ra-duo img { height: 120px; }
}

/* Le paragraphe et les garanties suivent la position de l'ouverture a toutes
   les largeurs : 34vw les garde toujours a gauche du montant de l'arc.
   Place apres les deux blocs ci-dessus pour l'emporter dans la cascade. */
@media (min-width: 601px) {
  .page-home .hero-chips,
  .page-home .hero-actions { max-width: min(386px, 34vw); }
  /* Le paragraphe suit la largeur du titre : a 386 px la derniere ligne se
     reduisait a « a l'arrivee. », cinq fois plus courte que les autres.
     Les boutons et les garanties, eux, ne bougent pas. */
  .page-home .hero p { max-width: min(450px, 40vw); }
}

/* ============================ téléphone ============================ */
@media (max-width: 600px) {
  /* tout ce qui est décoratif est sacrifié en premier */
  .page-home .separateur,
  .page-home .hero-cadre,
  .page-home .hero-clous { display: none; }

  .page-home h2 { font-size: 30px; letter-spacing: -.4px; }
  .page-home h3 { font-size: 22px; }
  .page-home p  { font-size: 15.5px; line-height: 1.75; }
  .page-home .kicker { font-size: 10px; letter-spacing: 2.6px; }

  /* Le hero s'empile, et surtout : la photo quitte le fond.
     Sur un ecran etroit l'ouverture devient presque carree ; garder la photo
     en fond obligeait a un voile epais pour que le texte reste lisible, et ce
     voile masquait la ville. On separe donc les deux : le texte se lit sur le
     degrade ciel seul, la photo n'existe plus que dans l'ouverture. */
  .page-home .hero {
    display: flex; flex-direction: column; height: auto; min-height: 0;
    padding: 26px 0 0;
  }
  .page-home .hero-inner { order: 1; height: auto; padding: 0 22px; }
  .page-home .hero-inner > * { max-width: 100%; }
  .page-home .hero h1 { font-size: 40px; letter-spacing: -.6px; max-width: 100%; }
  .page-home .hero p, .page-home .hero-chips,
  .page-home .hero-actions { max-width: 100%; }
  /* plus de voile, plus de renfort de lecture, plus de second trait ni de clous */
  .page-home .hero-arc,
  .page-home .hero-cadre,
  .page-home .hero-lecture,
  .page-home .hero-clous { display: none; }

  /* L'ouverture : placee apres le texte, juste avant la barre de recherche.
     object-position: 69% amene le centre de la ville (X 0,565 du fichier) au
     centre de la fenetre — valeur calculee, verifiee de 360 a 430 px. */
  /* Largeur FIXE : le viewBox du SVG est fige, une largeur en pourcentage
     etirerait les etoiles avec l'ecran. A 330 px le rapport est exact des
     362 px de large ; en dessous l'ecart est de 0,6 %, invisible.
     Plus de bordure blanche : la bande de zellige la remplace. */
  .page-home .hero-fenetre {
    display: block; order: 2; position: relative;
    width: 330px; max-width: calc(100% - 32px);
    margin: 26px auto 0; height: 360px; overflow: hidden;
    border-radius: 50% 50% 12px 12px / 22% 22% 0 0;
    box-shadow: 0 16px 36px rgba(18, 58, 92, .24);
  }
  .page-home .hero-zellige { display: block; }
  .page-home .hero-fenetre .hero-img,
  .page-home .hero-fenetre .hero-bg {
    position: static; width: 100%; height: 100%;
    object-fit: cover; object-position: 69% 50%;
  }

  /* Le texte est maintenant sur le degrade ciel, uni et clair : les teintes
     foncees pour la photo n'ont plus lieu d'etre. Mesures sur le bas du
     degrade (#b2d8f0), le cas le plus defavorable. */
  .page-home .hero .kicker { color: var(--c-terre-fonce); }   /* 4,54 */
  .page-home .hero h1 em { color: var(--c-terre-fonce); }     /* 4,54 */
  .page-home .hero-chips li { color: var(--c-encre-doux); }   /* 4,57 */
  .page-home .hero-chips { gap: 10px 18px; margin-top: 20px; }
  .page-home .hero-chips li { font-size: 13.5px; }

  .page-home .quick-book { margin-top: 26px; }
  .page-home .qb-card { flex-direction: column; }

  .page-home .ra-main img { height: 300px; border-radius: var(--arc-mobile); }
  .page-home .ra-main::before { display: none; }
  .page-home .ra-duo img { height: 110px; }
  .page-home .features { margin-top: 34px; }

  .page-home .rc-img { border-radius: var(--arc-mobile); }
  .page-home .rc-img img { height: 240px; }
  .page-home .rc-prix em { font-size: 26px; }

  .page-home .pano-bande { height: 240px; }
  .page-home .pb-badge { left: 14px; top: 14px; font-size: 12px; padding: 6px 12px; }
  .page-home .pb-bouton { font-size: 14px; padding: 11px 20px; bottom: 16px; }

  .page-home .gal-tete { flex-direction: column; align-items: flex-start; gap: 16px; }
  .page-home .gal-grille,
  .page-home .gal-rangee2 { grid-template-columns: 1fr; grid-template-rows: none; height: auto; gap: 14px; }
  .page-home .gal-rangee2 { margin-top: 14px; }
  .page-home .gal-grille figure,
  .page-home .gal-rangee2 figure { grid-row: auto; height: 240px; border-radius: 12px; }
  .page-home .gal-grille .g-grande { border-radius: var(--arc-mobile); }
}

/* ==========================================================================
   Correctif general (13/09/2026) : le menu bascule en burger des 960 px.
   En dessous, la barre horizontale ne tient pas et pousse le selecteur de
   langue hors du cadre — defilement horizontal sur toutes les pages.
   Largeur reellement necessaire a l'en-tete, mesuree : 872 px en anglais,
   914 en francais, 926 en espagnol. 860 px ne suffisait donc pas ; 960 px
   est deja un point de rupture de la maquette (grilles en deux colonnes).
   Ces regles reprennent a l'identique celles du bloc 760 px.
   Non cantonne a .page-home : le defaut concerne tout le site.
   ========================================================================== */
@media (min-width: 761px) and (max-width: 960px) {
  .burger { display: block; padding: 4px; }
  .main-nav {
    position: fixed; inset: 60px 0 auto 0; background: #fff; flex-direction: column; align-items: stretch;
    padding: 10px 16px 18px; gap: 0; border-bottom: 1px solid var(--blue-mist);
    transform: translateY(-130%); transition: transform .25s ease; box-shadow: var(--shadow); z-index: 60;
  }
  .main-nav.open { transform: translateY(0); }
  .main-nav a:not(.btn) { padding: 13px 4px; border-bottom: 1px solid var(--blue-pale); font-size: 16px; }
  .main-nav a:not(.btn).active::after, .main-nav a:not(.btn):hover::after { display: none; }
  .nav-book { margin: 14px 0 0; text-align: center; }
}