@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400&family=Manrope:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&display=block');

/* ============================================================
   SOCLE PREMIUM KOAEE — base.css (Sprint #65 S65-3β BLOC 1)
   ------------------------------------------------------------
   Ce socle CSS consomme exclusivement des VARS SÉMANTIQUES.
   Il N'A PAS de palette de couleur intégrée — un thème externe
   doit être chargé en aval (ex. shared/themes/emerald.css).
   Sans thème : rendu cassé attendu (signal d'erreur visible).
   ------------------------------------------------------------
   Vars sémantiques attendues (25 — fournies par le thème ; BLOC 2 cleanup B1-6) :
   --bg / --surface-1 / --surface-2 / --surface-3 / --surface-4
   --surface-deep / --surface-hover
   --text / --text-muted / --text-faint / --text-faintest / --text-on-accent
   --accent / --accent-strong / --accent-soft / --accent-soft-text
   --border / --nav-bg / --nav-link
   --ui-day-disabled / --ui-day-booked
   --error / --error-bg / --error-border
   --font-serif / --font-body
   ============================================================ */

:root {
  /* Sprint #65 — système positionnement hero/nav (POSITIONNEMENT seulement, AUCUNE couleur).
     Overrides par breakpoint définis plus bas dans le fichier. */
  --banner-height:      48px;    /* desktop ; override mobile @media 768 */
  --nav-height:         84px;    /* desktop ≥1200 ; override hamburger @media 1199 */
  --hero-top-gap:       2.5rem;  /* respiration sous nav opaque ; override mobile @media 768 */
}

/* BASE */
html, body { margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body); -webkit-font-smoothing:antialiased; }
*, *::before, *::after { box-sizing: border-box; }

/* NAV glassmorphique */
.en-nav { position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:1.5rem 3rem; background:var(--nav-bg); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); }
.en-nav-logo { font-family:var(--font-serif); font-size:20px; color:var(--accent); text-transform:uppercase; letter-spacing:3px; text-decoration:none; white-space:nowrap; }  /* LOT RECETTE-FIX 2026-06-13 : variante B (font 24→20px, letter-spacing 0.2em→3px) — brand domine sans écraser les liens ; nowrap conservé */
.en-nav-links { display:flex; gap:1.5rem; }  /* LOT RECETTE-FIX 2026-06-13 : gap 2.5→1.5rem (place pour libellés nowrap sur 1 rang) */
.en-nav-link { font-family:var(--font-serif); font-size:1rem; color:var(--nav-link); text-decoration:none; transition:color .3s; white-space:nowrap; }  /* nowrap : libellés multi-mots ne wrappent plus (« Venir à la ferme », etc.) */
.en-nav-link:hover, .en-nav-link.active { color:var(--accent); }
.en-nav-cta { background:var(--accent-surface); color:var(--text-on-surface); padding:.4rem .8rem; font-size:.65rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; border:none; cursor:pointer; transition:filter .3s; }  /* LOT RECETTE-FIX 2026-06-13 : CTA compact v2 (padding .45→.4rem/1→.8rem, font .7→.65rem) — cran supplémentaire */
.en-nav-cta:hover { filter:brightness(1.1); }

/* === HAMBURGER MOBILE (Sprint #65 #55) — Option A palette --en-* (5.A) === */
.en-nav-toggle {
    display: none; /* Caché desktop par defaut, active dans @media mobile ci-dessous */
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: var(--text);
    transition: color 0.3s, outline-color 0.15s;
}
.en-nav-toggle:hover { color: var(--accent); }
.en-nav-toggle:focus-visible {
    outline: 2px solid var(--accent-surface);
    outline-offset: 2px;
    color: var(--accent);
}
.en-nav-toggle .material-symbols-outlined {
    font-size: 28px;
    display: block;
}

/* HERO plein écran */
.en-hero-full { position:relative; height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden; text-align:center; }
.en-hero-full-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.5); }
.en-hero-full-overlay { position:absolute; inset:0; background:linear-gradient(to bottom, rgba(19,19,19,.4), rgba(19,19,19,1)); }
.en-hero-full-content { position:relative; z-index:2; max-width:56rem; padding:0 2rem; }
.en-hero-eyebrow { color:#6ee7b7; letter-spacing:.4em; text-transform:uppercase; font-size:.8125rem; display:block; margin-bottom:1.5rem; font-weight:500; }
.en-hero-title { color:#ffffff; font-family:var(--font-serif); font-size:clamp(3.5rem,8vw,6rem); letter-spacing:-.02em; margin:0 0 2rem; line-height:1.05; overflow-wrap:break-word; hyphens:auto; }
.en-hero-subtitle { color:rgba(255,255,255,0.85); font-size:clamp(1rem,2vw,1.25rem); max-width:40rem; margin:0 auto 2.5rem; font-weight:300; line-height:1.7; }
.en-hero-cta-group { display:flex; gap:1.5rem; justify-content:center; flex-wrap:wrap; }
.en-scroll-hint { position:absolute; bottom:2.5rem; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:.5rem; opacity:.5; }
.en-scroll-hint span:first-child { font-size:.625rem; letter-spacing:.3em; text-transform:uppercase; }
.en-scroll-line { width:1px; height:3rem; background:linear-gradient(to bottom, var(--accent-surface), transparent); }

/* HERO catalogue */
.en-hero-catalogue { position:relative; height:614px; display:flex; align-items:flex-end; padding:0 3rem 4rem; overflow:hidden; }
.en-hero-catalogue-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.en-hero-catalogue-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(13,13,13,.9) 0%, rgba(13,13,13,.3) 60%, transparent 100%); }
.en-hero-catalogue-content { position:relative; z-index:2; max-width:56rem; }
.en-hero-catalogue-title { color:#ffffff; font-family:var(--font-serif); font-size:clamp(3rem,7vw,5rem); letter-spacing:-.02em; margin:0 0 1rem; line-height:1.1; }
.en-hero-catalogue-sub { color:rgba(255,255,255,0.85); font-size:1.125rem; max-width:36rem; }

/* SECTIONS */
.en-section { padding:8rem 3rem; background:var(--bg); }
.en-section-alt { padding:8rem 3rem; background:var(--surface-1); }
.en-eyebrow { color:var(--accent); letter-spacing:.3em; text-transform:uppercase; font-size:.625rem; display:block; margin-bottom:1rem; }
.en-section-title { font-family:var(--font-serif); font-size:clamp(2.5rem,4vw,3.5rem); letter-spacing:-.02em; margin:0 0 1.5rem; }
.en-section-desc { color:var(--text-muted); font-size:1rem; line-height:1.7; font-weight:300; max-width:42rem; }

/* PHILOSOPHY 12 colonnes */
.en-philosophy-grid { max-width:80rem; margin:0 auto; display:grid; grid-template-columns:5fr 7fr; gap:4rem; align-items:center; }
.en-philosophy-img-wrap { position:relative; }
.en-philosophy-img { aspect-ratio:4/5; width:100%; object-fit:cover; border-radius:.25rem; filter:grayscale(.2); }
.en-philosophy-quote { position:absolute; bottom:-2rem; inset-inline-end:-2rem; width:12rem; background:var(--surface-1); padding:1.5rem; }
.en-philosophy-quote p { font-family:var(--font-serif); font-style:italic; color:var(--accent); font-size:1rem; margin:0; line-height:1.4; }
.en-philosophy-text { color:var(--text-muted); font-size:1.0625rem; line-height:1.8; font-weight:300; }
.en-philosophy-text p { margin-bottom:1.5rem; }
.en-philosophy-cta { color:var(--accent); font-size:.75rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; text-decoration:none; border-bottom:1px solid rgba(143,246,208,.3); padding-bottom:.5rem; display:inline-flex; align-items:center; gap:.5rem; transition:gap .3s; }
.en-philosophy-cta:hover { gap:1rem; }

/* BENTO GRID expériences */
.en-bento { max-width:80rem; margin:0 auto; display:grid; grid-template-columns:repeat(12,1fr); gap:2rem; }
.en-bento-lg { grid-column:span 8; }
.en-bento-sm { grid-column:span 4; }
.en-bento-item { cursor:pointer; overflow:hidden; }
.en-bento-img-lg { position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:.25rem; margin-bottom:1.5rem; display:block; }
.en-bento-img-sm { position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:.25rem; margin-bottom:1.5rem; display:block; }
/* Mini-LOT 4.5.e Bug 2 — wrapper pour ancrer .image-credit hors du <a> (HTML invalide a-in-a sinon) */
.en-bento-img-wrap { position:relative; margin-bottom:1.5rem; }
.en-bento-img-wrap > .en-bento-img-lg,
.en-bento-img-wrap > .en-bento-img-sm { margin-bottom:0; }
.en-bento-img-lg img, .en-bento-img-sm img { width:100%; height:100%; object-fit:cover; transition:transform .7s; }
a.en-bento-img-lg:hover img, a.en-bento-img-sm:hover img { transform:scale(1.05); }
.en-bento-badge { position:absolute; top:1.5rem; left:1.5rem; background:var(--accent-soft); color:var(--accent-soft-text); padding:.25rem 1rem; font-size:.625rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; }
.en-bento-title { font-family:var(--font-serif); font-size:1.5rem; margin:0 0 .5rem; }
.en-bento-desc { color:var(--text-muted); font-weight:300; font-size:.9375rem; }

/* FILTRES */
.en-filters { padding:2rem 3rem 0; background:var(--bg); display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; }
.en-filter-btn { padding:.5rem 1.25rem; font-size:.6875rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; background:var(--surface-3); color:var(--text-muted); border:1px solid transparent; border-radius:.75rem; cursor:pointer; transition:all .3s; text-decoration:none; }
.en-filter-btn:hover, .en-filter-btn.active { background:var(--surface-4); color:var(--accent); border-color:rgba(143,246,208,.3); }
.en-sort-select { margin-left:auto; background:var(--surface-3); color:var(--text-muted); border:1px solid var(--border); padding:.5rem 1rem; font-size:.6875rem; font-family:var(--font-body); cursor:pointer; }

/* GRILLE CHAMBRES */
.en-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:3rem; padding:4rem 3rem 6rem; background:var(--bg); }
/* Mini-LOT 4.5.f Bug A — restructure : 2 <a> séparés (img-link + body-link), crédit DANS .en-card-img-wrap (image), hover transféré au wrapper */
.en-card-wrap { position:relative; display:flex; flex-direction:column; background:var(--surface-1); border-radius:.25rem; overflow:hidden; transition:transform .3s; }
.en-card-wrap:hover { transform:translateY(-6px); }
/* Mini-LOT 4.5.g Bug A — height:100% obligatoire pour que .en-card-img object-fit:cover remplisse le wrap (sinon img prend hauteur native ratio = bande blanche en bas) */
.en-card-img-link { display:block; height:100%; }
.en-card-img-link img { display:block; }
.en-card-img-wrap > .image-credit { z-index:5; }

.en-card { display:flex; flex-direction:column; text-decoration:none; color:inherit; }
.en-card-body-link { display:flex; flex-direction:column; flex:1; }
.en-card-img-wrap { position:relative; aspect-ratio:3/2; overflow:hidden; }  /* LOT RECETTE-FIX 2026-06-13 : 4/5→3/2 (respecte sources paysage 900×600, fin du crop portrait) */
.en-card-img { width:100%; height:100%; object-fit:cover; filter:grayscale(.2); transition:transform .7s, filter .7s; }
.en-card:hover .en-card-img { transform:scale(1.05); filter:grayscale(0); }
.en-badge { position:absolute; top:1.5rem; left:1.5rem; background:var(--accent-soft); color:var(--accent-soft-text); padding:.25rem .75rem; font-size:.5625rem; text-transform:uppercase; letter-spacing:.1em; font-weight:700; border-radius:.75rem; }
.en-card-body { padding:1.5rem; flex:1; display:flex; flex-direction:column; }
.en-card-header { display:flex; flex-direction:column; align-items:flex-start; margin-bottom:1rem; gap:.4rem; }  /* LOT RECETTE-FIX 2026-06-13 stratégie A : prix sur sa propre ligne sous le titre (était flex-row → débordement) */
.en-card-title { font-family:var(--font-serif); font-size:1.375rem; margin:0; }
.en-card-price { color:var(--accent); font-size:1.125rem; font-weight:600; }  /* LOT RECETTE-FIX 2026-06-13 : nowrap retiré → prix jamais coupé, wrap si long */
.en-card-price-unit { font-size:.5625rem; text-transform:uppercase; color:var(--text-muted); }
.en-card-meta { display:flex; gap:1rem; padding-bottom:1rem; border-bottom:1px solid rgba(62,73,68,.2); margin-bottom:1rem; font-size:.8125rem; color:var(--text-muted); flex-wrap:wrap; }
.en-card-meta-item { display:inline-flex; align-items:center; gap:.375rem; }
/* Mini-LOT 4.5.n — SVG icons cards home héritent currentColor var(--text-muted) */
.en-card-meta-icon { width:1rem; height:1rem; color:inherit; flex-shrink:0; }
.en-card-desc { color:var(--text-muted); font-size:.875rem; line-height:1.65; margin-bottom:1.5rem; flex:1; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.en-card-stars { display:flex; gap:.25rem; align-items:center; margin-bottom:1rem; }
.en-card-star { color:var(--accent); font-size:.875rem; }
.en-card-star-count { color:var(--text-muted); font-size:.75rem; margin-left:.375rem; }

/* BOUTONS */
.en-btn-primary { display:block; width:100%; padding:1rem; background:var(--accent-surface); color:var(--text-on-surface); font-size:.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; text-align:center; border:none; cursor:pointer; transition:filter .3s, transform .2s; text-decoration:none; }
.en-btn-primary:hover { filter:brightness(1.1); transform:scale(1.02); }
.en-btn-ghost { display:inline-block; padding:.875rem 2rem; background:transparent; color:var(--text); font-size:.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; border:1px solid rgba(62,73,68,.4); cursor:pointer; transition:background .3s, border-color .3s; text-decoration:none; }
.en-btn-ghost:hover { background:var(--surface-4); border-color:var(--border); color:var(--text); }

/* === Sprint 3.1 div #1 : Notre Film hero scope override === */
/* .en-btn-ghost dans .en-hero-full force #ffffff (cohérent pattern Phase B hero hardcoded white) */
/* Sélecteur scopé : impact uniquement contexte hero, pas régression sur .en-btn-ghost ailleurs */
.en-hero-full .en-btn-ghost,
.en-hero-full-content .en-btn-ghost {
    color: #ffffff !important;
    border-color: rgba(255,255,255,.4) !important;
}
.en-hero-full .en-btn-ghost:hover,
.en-hero-full-content .en-btn-ghost:hover {
    color: #ffffff !important;
    border-color: rgba(255,255,255,.7) !important;
    background: rgba(255,255,255,.1) !important;
}

/* PAGE DÉTAIL CHAMBRE */
.en-detail-hero { position:relative; height:80vh; min-height:500px; overflow:hidden; }
.en-detail-hero img { width:100%; height:100%; object-fit:cover; }
.en-detail-hero-overlay { position:absolute; inset:0; background:linear-gradient(to bottom, rgba(13,13,13,.2) 0%, rgba(13,13,13,.85) 100%); }
.en-detail-hero-content { position:absolute; bottom:3rem; left:3rem; right:3rem; z-index:2; }
/* Mini-LOT 4.5.l — RGAA contraste 3.2 : H1 hero sur overlay dark TOUJOURS blanc cross-theme + text-shadow défensif */
.en-detail-title { font-family:var(--font-serif); font-size:clamp(3rem,5vw,4.5rem); margin:0 0 .5rem; letter-spacing:-.02em; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,0.3); overflow-wrap:break-word; hyphens:auto; }
/* Mini-LOT 4.5.m — RGAA contraste 3.2 EXHAUSTIF zone hero (anti-pattern #6 généralisé R31'') : meta + badges sur overlay sombre TOUJOURS #fff cross-theme */
.en-detail-meta { display:flex; gap:1.5rem; color:#fff; font-size:.875rem; flex-wrap:wrap; text-shadow:0 1px 4px rgba(0,0,0,0.5); }
.en-detail-meta-item { display:inline-flex; align-items:center; gap:.5rem; color:#fff; }
/* Mini-LOT 4.5.n — SVG icons hero meta héritent currentColor #fff (anti-pattern #7 emoji OS-rendered fix) */
.en-meta-icon { width:1.125rem; height:1.125rem; color:#fff; flex-shrink:0; }
/* Mini-LOT 4.5.m+n — layout chambre.php : grid 2 colonnes desktop avec sidebar sticky, 1 col mobile */
.en-detail-layout { padding:4rem 3rem; background:var(--bg); }
.en-detail-grid { display:grid; grid-template-columns:2fr 1fr; gap:3rem; max-width:80rem; margin:0 auto; }
.en-detail-content { min-width:0; }
.en-detail-sidebar { position:sticky; top:6rem; align-self:start; }
.en-chambre-cta-card { background:var(--surface-1); border:1px solid var(--border); border-radius:.25rem; padding:2rem; margin-bottom:2rem; display:flex; flex-direction:column; gap:1.5rem; }
.en-chambre-cta-card .en-chambre-price { padding:0; border:none; margin:0; }
.en-detail-included { padding:1.5rem 0; }
.en-detail-included h4 { font-size:.875rem; text-transform:uppercase; letter-spacing:.1em; margin:0 0 1rem; color:var(--text-muted); }
.en-detail-included ul { list-style:none; padding:0; margin:0; }
.en-detail-included li { display:flex; align-items:center; gap:.75rem; padding:.5rem 0; font-size:.9375rem; color:var(--text); }
.en-include-icon { width:1.25rem; height:1.25rem; flex-shrink:0; color:var(--accent-surface); }
.en-equipments-list, .en-info-list { list-style:none; padding:0; margin:1.5rem 0; }
.en-equipments-list li, .en-info-list li { display:flex; align-items:flex-start; gap:.75rem; padding:.5rem 0; color:var(--text); font-size:.9375rem; }
.en-check-icon { width:1rem; height:1rem; color:var(--accent-surface); flex-shrink:0; margin-top:.25rem; }
.en-info-list li { display:list-item; padding-left:0; }
@media (max-width:768px) {
  .en-detail-grid { grid-template-columns:1fr; gap:2rem; }
  .en-detail-sidebar { position:static; }
}

/* Mini-LOT 4.5.o — Modale démo réservation cross-pages */
.en-modal { position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center; padding:1rem; }
.en-modal[aria-hidden="false"] { display:flex; }
.en-modal-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.7); backdrop-filter:blur(4px); cursor:pointer; }
.en-modal-content { position:relative; background:var(--bg); color:var(--text); border-radius:4px; padding:3rem 2.5rem 2rem; max-width:480px; width:100%; box-shadow:0 20px 60px rgba(0,0,0,0.3); animation:en-modal-in 0.2s ease-out; }
@keyframes en-modal-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.en-modal-close { position:absolute; top:1rem; right:1rem; background:transparent; border:0; width:2rem; height:2rem; cursor:pointer; color:var(--text-muted); padding:0; display:flex; align-items:center; justify-content:center; }
.en-modal-close:hover, .en-modal-close:focus-visible { color:var(--text); outline:2px solid var(--accent-surface); outline-offset:2px; }
.en-modal-close svg { width:1.25rem; height:1.25rem; }
.en-modal-title { font-size:1.5rem; margin:0 0 1rem; color:var(--text); font-family:var(--font-serif); }
.en-modal-text { font-size:0.9375rem; line-height:1.6; margin:0 0 1rem; color:var(--text); }
.en-modal-actions { display:flex; gap:0.75rem; margin-top:1.5rem; flex-wrap:wrap; }
.en-modal-actions .en-btn-primary, .en-modal-actions .en-btn-ghost { flex:1; min-width:140px; display:inline-block; width:auto; padding:0.875rem 1.5rem; text-align:center; }

/* Mini-LOT 4.5.o — Fallback landing reservation.php */
.en-fallback-main { min-height:60vh; display:flex; align-items:center; justify-content:center; padding:3rem 1rem; }
.en-fallback-content { max-width:560px; text-align:center; }
.en-fallback-content h1 { font-size:2rem; margin-bottom:1.5rem; color:var(--text); font-family:var(--font-serif); }
.en-fallback-content p { margin-bottom:1rem; line-height:1.6; color:var(--text); }
.en-fallback-actions { display:flex; gap:0.75rem; justify-content:center; margin-top:2rem; flex-wrap:wrap; }
.en-fallback-actions .en-btn-primary, .en-fallback-actions .en-btn-ghost { display:inline-block; width:auto; padding:1rem 2rem; }

/* GALERIE */
.en-gallery { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-bottom:3rem; }
.en-gallery img { width:100%; height:220px; object-fit:cover; border-radius:.25rem; transition:transform .3s; cursor:pointer; }
.en-gallery img:hover { transform:scale(1.02); }
.en-gallery img:first-child { grid-column:span 2; height:340px; }

/* ÉQUIPEMENTS */
.en-amenities { display:grid; grid-template-columns:1fr 1fr; gap:.875rem; margin:2rem 0; }
.en-amenity { display:flex; align-items:center; gap:.75rem; color:var(--text-muted); font-size:.875rem; }
.en-amenity-icon { color:var(--accent-surface); font-size:1.125rem; flex-shrink:0; }

/* BLOC CONTENU DÉTAIL */
.en-detail-section-title { font-family:var(--font-serif); font-size:1.75rem; margin:2.5rem 0 1rem; }
.en-detail-body-text { color:var(--text-muted); line-height:1.8; font-weight:300; font-size:1rem; }

/* ===== CALENDRIER & BOOKING ===== */
.en-booking-card { position:sticky; top:6rem; background:var(--surface-1); padding:2rem; border:1px solid rgba(62,73,68,.25); border-radius:.25rem; }
.en-booking-price-main { font-family:var(--font-serif); font-size:2.75rem; color:var(--accent); margin:0; }
.en-booking-price-unit { color:var(--text-muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; }
.en-booking-divider { border:none; border-top:1px solid rgba(62,73,68,.3); margin:1.5rem 0; }

/* Dates picker */
.en-date-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(62,73,68,.3); border-radius:.125rem; margin-bottom:1rem; overflow:hidden; }
.en-date-field { background:var(--surface-4); padding:1rem; cursor:pointer; transition:background .2s; }
.en-date-field:hover { background:var(--surface-hover); }
.en-date-label { font-size:.5625rem; text-transform:uppercase; letter-spacing:.15em; color:var(--accent); display:block; margin-bottom:.375rem; }
.en-date-value { font-size:.9375rem; color:var(--text); font-weight:500; }
.en-date-value.placeholder { color:var(--text-muted); font-weight:300; }

/* Calendrier dropdown */
.en-calendar-dropdown { display:none; position:absolute; z-index:100; background:var(--surface-3); border:1px solid rgba(62,73,68,.4); padding:1.5rem; border-radius:.25rem; box-shadow:0 30px 60px rgba(0,0,0,.5); min-width:320px; }
.en-calendar-dropdown.open { display:block; }
.en-calendar-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.25rem; }
.en-calendar-nav { background:none; border:none; color:var(--accent); cursor:pointer; font-size:1.25rem; padding:.25rem; transition:transform .2s; }
.en-calendar-nav:hover { transform:scale(1.2); }
.en-calendar-month { font-family:var(--font-serif); font-size:1rem; color:var(--text); }
.en-calendar-weekdays { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:.5rem; }
.en-calendar-weekday { text-align:center; font-size:.5625rem; text-transform:uppercase; letter-spacing:.1em; color:var(--text-muted); padding:.5rem 0; }
.en-calendar-days { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.en-cal-day { aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:.8125rem; cursor:pointer; border-radius:.125rem; transition:background .15s, color .15s; color:var(--text-muted); }
.en-cal-day:hover:not(.disabled):not(.empty) { background:var(--surface-4); color:var(--text); }
.en-cal-day.today { color:var(--accent); font-weight:700; }
.en-cal-day.selected { background:var(--accent-surface); color:var(--text-on-surface); font-weight:700; border-radius:.125rem; }
.en-cal-day.in-range { background:rgba(143,246,208,.15); color:var(--text); }
.en-cal-day.disabled { color:var(--ui-day-disabled); cursor:not-allowed; text-decoration:line-through; }
.en-cal-day.empty { cursor:default; }
.en-cal-day.booked { background:var(--error-bg); color:var(--ui-day-booked); cursor:not-allowed; }

/* Résumé réservation */
.en-booking-summary { background:rgba(143,246,208,.05); border:1px solid rgba(143,246,208,.15); padding:1rem; margin:1rem 0; border-radius:.125rem; }
.en-booking-summary-row { display:flex; justify-content:space-between; font-size:.8125rem; margin-bottom:.5rem; color:var(--text-muted); }
.en-booking-summary-row:last-child { color:var(--text); font-weight:700; font-size:1rem; margin-bottom:0; padding-top:.5rem; border-top:1px solid rgba(62,73,68,.3); }

/* Inputs */
.en-input-group { margin-bottom:1rem; }
.en-input-label { font-size:.5625rem; text-transform:uppercase; letter-spacing:.15em; color:var(--accent); display:block; margin-bottom:.5rem; }
.en-input { width:100%; padding:.875rem 1rem; background:var(--surface-4); border:none; border-bottom:2px solid rgba(62,73,68,.4); color:var(--text); font-family:var(--font-body); font-size:.9375rem; outline:none; transition:border-color .3s; }
.en-input:focus { border-bottom-color:var(--accent-surface); }
.en-input::placeholder { color:rgba(189,201,194,.4); }
.en-guests-row { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }

/* Notification disponibilité */
.en-availability-msg { font-size:.75rem; padding:.5rem .75rem; border-radius:.125rem; margin-bottom:1rem; text-align:center; }
.en-availability-ok { background:rgba(143,246,208,.1); color:var(--accent); border:1px solid rgba(143,246,208,.2); }
.en-availability-error { background:var(--error-bg); color:var(--error); border:1px solid var(--error-border); }

/* FOOTER */
.en-footer { background:var(--surface-deep); padding:6rem 3rem 3rem; }
.en-footer-inner { max-width:80rem; margin:0 auto; }
.en-footer-logo { font-family:var(--font-serif); font-size:2rem; color:var(--accent); letter-spacing:.3em; text-transform:uppercase; display:block; text-align:center; margin-bottom:3rem; }
.en-footer-nav { display:flex; flex-wrap:wrap; justify-content:center; gap:2.5rem; margin-bottom:4rem; }
.en-footer-nav a { color:var(--text-faint); font-size:.8125rem; text-decoration:none; letter-spacing:.05em; transition:color .3s; }
.en-footer-nav a:hover { color:var(--accent); }
.en-footer-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:3rem; margin-bottom:4rem; }
.en-footer-col-title { color:var(--accent); text-transform:uppercase; font-size:.625rem; letter-spacing:.2em; margin-bottom:1rem; display:block; }
.en-footer-col-text { color:var(--text-muted); font-size:.875rem; line-height:1.7; font-weight:300; }
.en-footer-newsletter { display:flex; border-bottom:1px solid rgba(62,73,68,.4); }
.en-footer-newsletter input { background:transparent; border:none; color:var(--text-muted); font-size:.875rem; padding:.5rem 0; flex:1; outline:none; font-family:var(--font-body); }
.en-footer-newsletter input::placeholder { color:var(--text-faintest); }
.en-footer-newsletter button { background:none; border:none; color:var(--text-faint); cursor:pointer; padding:.5rem; transition:color .3s; }
.en-footer-newsletter button:hover { color:var(--accent); }
.en-footer-divider { border:none; border-top:1px solid rgba(62,73,68,.2); margin:0 0 2rem; }
.en-footer-copy { color:var(--text-faintest); font-size:.625rem; text-align:center; letter-spacing:.15em; text-transform:uppercase; }

/* PAGES STATIQUES (Spa, Restaurant, etc.) */
.en-service-hero { position:relative; height:70vh; min-height:480px; overflow:hidden; }
.en-service-hero img { width:100%; height:100%; object-fit:cover; filter:brightness(.45); }
.en-service-hero-overlay { position:absolute; inset:0; background:linear-gradient(to bottom, transparent 40%, var(--bg) 100%); }
.en-service-hero-content { position:absolute; bottom:4rem; left:3rem; right:3rem; z-index:2; }
.en-service-title { font-family:var(--font-serif); font-size:clamp(2.5rem,5vw,4rem); letter-spacing:-.02em; margin:0 0 1rem; }
.en-service-desc { color:var(--text-muted); font-size:1.125rem; max-width:40rem; font-weight:300; }

/* CARDS PRESTATIONS */
.en-prestation-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:2rem; }
.en-prestation-card { background:var(--surface-1); padding:2rem; border-radius:.25rem; border:1px solid rgba(62,73,68,.15); transition:border-color .3s; }
.en-prestation-card:hover { border-color:rgba(143,246,208,.25); }
.en-prestation-icon { color:var(--accent-surface); font-size:2rem; margin-bottom:1rem; }
.en-prestation-name { font-family:var(--font-serif); font-size:1.25rem; margin:0 0 .5rem; }
.en-prestation-desc { color:var(--text-muted); font-size:.875rem; line-height:1.65; margin-bottom:1.25rem; }
.en-prestation-price { color:var(--accent); font-weight:700; font-size:1rem; }
.en-prestation-duration { color:var(--text-muted); font-size:.75rem; margin-left:.75rem; }

/* === Sprint 3.1 Commit 4 RGAA AA — WCAG 2.1 AA ratio >= 4.5:1 === */
/* Source audit : /root/audit/sprint-31-rgaa-audit-widget-20260509_090410.md */
/* Couleurs cibles imposees par claude.ai 2026-05-09 - selecteurs extraits axe-core */

/* Footer nav LIGHT : #9ca3af -> #595959 sur #ffffff (ratio ~7.1) */
.en-footer-nav > a { color: #595959 !important; }
/* Footer nav DARK : #707070 -> #c0c0c0 sur #0e0e0e (ratio ~7.5) */
[data-theme="dark"] .en-footer-nav > a { color: #c0c0c0 !important; }

/* === Sprint matin tactile 2026-07-07 — WCAG 2.5.8 AA cibles tactiles >= 44px ===
   Genèse : recette framework D_TAP24 (NUIT-C) — liens nav footer 18px + nav-link
   header desktop 22px < 24px (viol AA). Fix GÉNÉRIQUE (composant partagé 12 démos).
   Footer : liens texte, aucune contrainte de layout. Header : barre desktop déjà 92px
   (contenu 44px), donc max inchangé → pas de croissance (--nav-height 84px préservée,
   vérifié runtime R32 avant/après). En hamburger (<1200) les liens font déjà 51px. */
.en-footer-nav a { min-height:44px; display:inline-flex; align-items:center; }
.en-nav-link { min-height:44px; display:inline-flex; align-items:center; }

/* Footer copy LIGHT : #aaaaaa -> #595959 sur #ffffff (ratio ~7.1) */
.en-footer-copy { color: #595959 !important; }
/* Footer copy DARK : #444444 -> #a0a0a0 sur #0e0e0e (ratio ~8.8) */
[data-theme="dark"] .en-footer-copy { color: #a0a0a0 !important; }

/* Filtres categorie chambres + galerie + select tri LIGHT : #6b7280 -> #374151 sur #e5e7eb (ratio ~8.6) */
a[href="?cat=deluxe"],
a[href="?cat=prestige"],
a[href="?cat=standard"],
a[href="?cat=suites"],
button[onclick="filterGallery('architecture')"],
button[onclick="filterGallery('dining')"],
button[onclick="filterGallery('suites')"],
button[onclick="filterGallery('wellness')"],
select.en-sort-select { color: #C2410C !important; }   /* fix9 : label tri orange AA (système boutons) */

/* Date picker placeholder LIGHT : #6b7280 -> #374151 sur #d1d5db (ratio ~7.9) */
#en-field-arrival > .en-date-value.placeholder,
#en-field-departure > .en-date-value.placeholder { color: #374151 !important; }

/* Room option selected desc/price LIGHT : #6b7280 -> #595959 sur #f5f5f5 (ratio ~6.9) */
.selected > .en-room-option-desc,
.selected > .en-room-option-header > .en-room-option-price > span { color: #595959 !important; }

/* Filtre actif "all" + date-label active : background #d1d5db -> #ffffff (texte vert #047857 sur #ffffff ratio ~7.0) */
a[href="?cat=all"],
button[onclick="filterGallery('all')"],
#en-field-arrival > .en-date-label,
#en-field-departure > .en-date-label { background: #ffffff !important; }

/* === FIN Sprint 3.1 Commit 4 RGAA AA === */

/* === Sprint 3.1 Commit 4.1 RGAA AA - fix regression DARK introduite Commit 4 === */
/* Mes overrides Commit 4 non scopes ont casse DARK sur 4 sets de selecteurs. */
/* Couleurs cibles DARK : #d1d5db sur #2a2a2a (~10.5) + #c0c0c0 sur #252525 (~9.0) + bg #2a2a2a pour reverts. */

[data-theme="dark"] a[href="?cat=deluxe"],
[data-theme="dark"] a[href="?cat=prestige"],
[data-theme="dark"] a[href="?cat=standard"],
[data-theme="dark"] a[href="?cat=suites"],
[data-theme="dark"] button[onclick="filterGallery('architecture')"],
[data-theme="dark"] button[onclick="filterGallery('dining')"],
[data-theme="dark"] button[onclick="filterGallery('suites')"],
[data-theme="dark"] button[onclick="filterGallery('wellness')"],
[data-theme="dark"] select.en-sort-select { color: #FF6B35 !important; }   /* fix9 : label tri orange vif AA dark */

[data-theme="dark"] a[href="?cat=all"],
[data-theme="dark"] button[onclick="filterGallery('all')"],
[data-theme="dark"] #en-field-arrival > .en-date-label,
[data-theme="dark"] #en-field-departure > .en-date-label { background: #2a2a2a !important; }

[data-theme="dark"] .selected > .en-room-option-desc,
[data-theme="dark"] .selected > .en-room-option-header > .en-room-option-price > span { color: #c0c0c0 !important; }

[data-theme="dark"] #en-field-arrival > .en-date-value.placeholder,
[data-theme="dark"] #en-field-departure > .en-date-value.placeholder { color: #d1d5db !important; }

/* === FIN Sprint 3.1 Commit 4.1 RGAA AA === */

/* RESPONSIF */

/* Sprint #65 BLOC A — overrides vars positionnement par breakpoint.
   - --nav-height : 76px en hamburger zone (mesure runtime post-extraction nav padding compact).
   - --banner-height : 70px en mobile (bandeau col-wrap natif <769px).
   - --hero-top-gap : 1rem mobile (vs 2.5rem desktop). */
@media (max-width: 1199px) { :root { --nav-height: 76px; } }
@media (max-width: 768px)  { :root { --banner-height: 70px; --hero-top-gap: 1rem; } }

/* Sprint #65 BLOC A — système hamburger 769-1199 + cascade ≤768 (max-width:1199 ⊃ max-width:768).
   - .en-nav padding compact extrait depuis @media 768 (correction A : hauteur nav uniforme 0-1199px).
   - Drawer top: 100% au lieu de top:70px hardcodé (correction B révisée) :
     .en-nav a backdrop-filter qui en fait un containing block pour les descendants position:fixed.
     Donc .en-nav-links est nav-relative (pas viewport-relative) → top:100% = pile sous .en-nav.bottom,
     indépendant des vars et résilient à toute variation de hauteur nav. */
@media (max-width: 1199px) {
  .en-nav { padding: 1rem 1.5rem; }
  .en-nav-toggle { display: flex; align-items: center; }
  .en-nav-links {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: fixed;
    top: 100%;
    left: 0;
    right: 0;
    /* Fix dark mode : --en-nav-bg dark = rgba(15,15,15,0.7) trop transparent pour un drawer pleine largeur.
       --en-bg est solid 100% opaque dans les 2 themes (light #ffffff / dark #0f0f0f). */
    background: var(--bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 2rem 1.5rem 3rem;
    border-top: 1px solid var(--border);
    z-index: 49;
    transform: translateY(-110%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s ease, opacity 0.25s ease, visibility 0s linear 0.3s;
  }
  .en-nav-links.en-nav-links--open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition: transform 0.3s ease, opacity 0.25s ease, visibility 0s linear 0s;
  }
  .en-nav-link {
    font-size: 1.25rem;
    padding: 0.75rem 0;
  }
}

@media(max-width:768px){
  .en-hero-full-title { font-size:3rem; }
  .en-section, .en-section-alt { padding:4rem 1.5rem; }
  .en-philosophy-grid { grid-template-columns:1fr; }
  .en-philosophy-quote { display:none; }
  .en-bento { grid-template-columns:1fr; }
  .en-bento-lg, .en-bento-sm { grid-column:span 1; }
  .en-filters { padding:1.5rem 1.5rem 0; }
  .en-grid { padding:3rem 1.5rem; grid-template-columns:repeat(2,minmax(0,1fr)); }  /* LOT RECETTE-FIX B 2026-06-13 : palier 2-col tablette (était 1fr) — 1-col rétabli <481px ci-dessous */
  .en-hero-catalogue { padding:0 1.5rem 3rem; }
  .en-detail-layout { grid-template-columns:1fr; }
  .en-booking-card { position:static; }
  .en-footer-grid { grid-template-columns:1fr; }
  .en-service-hero-content { left:1.5rem; right:1.5rem; }
  /* Sprint #65 BUG2 fix (2026-05-27) — wordmark compact mobile : empêche le wrap 3 lignes
     (nav 131px → 76px, header total 201px → 146px) → la réserve par var redevient exacte. */
  .en-nav-logo { font-size:0.85rem; letter-spacing:0.04em; white-space:nowrap; }
}

/* Sprint #65 BUG2 fix (2026-05-27) — pages SANS hero : réserver l'espace sous la nav fixed,
   même mécanisme que .en-hero-split (calc banner+nav) + respiration --hero-top-gap.
   Cible : h1.top >= nav.bottom à toutes largeurs (mesuré R32). Vars responsives → auto-adapté.
   Placé après @media 768 pour gagner en source-order sur .en-section / .en-fallback-main. */
.en-tables-section,
.en-evt-section,
.en-pay-section,
.en-fallback-main {
    padding-top: calc(var(--banner-height) + var(--nav-height) + var(--hero-top-gap));
}

/* THEME TOGGLE */
.theme-toggle {
  background: var(--nav-bg);
  border: 1px solid var(--text-faint);
  border-radius: 24px;
  padding: 8px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}
.theme-toggle:hover {
  background: var(--surface-hover);
  border-color: var(--accent-surface);
}
.theme-toggle .material-symbols-outlined {
  font-size: 18px;
  color: var(--text);
}
@media (max-width: 640px) {
  .theme-toggle { display: flex !important; padding: 8px 12px; }
  .theme-toggle .material-symbols-outlined { font-size: 20px; }
}

/* Notice démonstration / établissement fictif sous hero — Mini-LOT 4.5.e cross-theme AA + Mini-LOT 4.5.f rythme régulier + Mini-LOT 4.5.g.1 centrage horizontal demande Erwan */
.en-hero-demo-notice {
    font-size: 0.8125rem;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 0 2rem 0;
    font-weight: 400;
    text-align: center;
}

/* LOT 2 Structure commune — 2026-05-17 */

/* Skip-link RGAA 9.1 — visible uniquement au focus clavier */
.visually-hidden-focusable {
    /* RTL-safe (canary i18n 2026-06-09) : clip au lieu de left:-10000px qui débordait en dir=rtl (+10000px) */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.visually-hidden-focusable:focus {
    position: fixed;
    inset-inline-start: 1rem;
    top: 1rem;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
    width: auto;
    height: auto;
    padding: 0.75rem 1.25rem;
    background: var(--accent-surface);
    color: var(--text-on-surface);
    text-decoration: none;
    z-index: 100;
    font-family: var(--font-serif);
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Bandeau démo top RGAA 7.1 — annotation permanente discrète */
.en-demo-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 32px;
    background: rgba(19, 19, 19, 0.95);
    border-bottom: 1px solid rgba(127, 211, 168, 0.2);
    z-index: 51;
    display: flex;
    align-items: center;
    justify-content: center;
}
.en-demo-banner-text {
    margin: 0;
    font-size: 0.75rem;
    color: #eae5d8;
    opacity: 0.8;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 400;
}

/* Décalage nav fixed sous bandeau démo (override règle L87 top:0) — Mini-LOT 4.5.s sync banner 32→48px desktop, 56px mobile (Option A) */
.en-nav { top: 48px; }

/* ════════════════════════════════════════════════════════════
   Mini-LOT 4.2 — Hero solid cross-theme (B-LOT4.2 2026-05-17)
   Remplace .en-service-hero (image + overlay) par fond uni.
   Variables --en-mint/--en-text/--en-text-muted héritent du
   theme via [data-theme="dark"] (basculement automatique).
   ════════════════════════════════════════════════════════════ */
.en-hero-solid {
    background: linear-gradient(135deg, #ffffff 0%, #d1fae5 100%);
    min-height: 280px;
    padding: 5rem 2rem 4rem;
    display: flex;
    align-items: center;
    position: relative;
}
.en-hero-solid .en-service-hero-content {
    position: static;
    bottom: auto;
    left: auto;
    right: auto;
    z-index: auto;
    max-width: 60rem;
    margin: 0 auto;
    padding: 0;
    width: 100%;
}
.en-hero-solid .en-eyebrow { color: var(--accent); }
.en-hero-solid .en-service-title { color: var(--text); }
/* Override desc — Option A : durcissement contraste AA sur gradient mint clair / emerald foncé */
.en-hero-solid .en-service-desc { color: #5b6470; }
[data-theme="dark"] .en-hero-solid {
    background: linear-gradient(135deg, #0f0f0f 0%, #064e3b 100%);
}
[data-theme="dark"] .en-hero-solid .en-service-desc { color: #c8c8c8; }

@media (max-width: 768px) {
    .en-hero-solid { padding: 4rem 1.5rem 3rem; min-height: 220px; }
}

/* ════════════════════════════════════════════════════════════
   Mini-LOT 4.3 — Smooth scroll global + ancre #chambres (2026-05-17)
   Mini-LOT 4.5.s.c 2026-05-19 — banner uniforme 70px ≤768px (tablet+mobile) + 48px desktop + nav fixed ~80px + buffer 8 = scroll-margin-top 158px
   ════════════════════════════════════════════════════════════ */
html { scroll-behavior: smooth; }
#chambres { scroll-margin-top: 158px; }

/* ════════════════════════════════════════════════════════════
   Mini-LOT 4.5 + 4.4 (2026-05-17)
   .image-credit (port demo-ecommerce L683-702) + Hero split 50/50
   ════════════════════════════════════════════════════════════ */

/* Pattern crédit photo (port verbatim demo-ecommerce) */
.image-credit {
    position: absolute;
    bottom: 4px;
    inset-inline-end: 8px;
    font-size: 11px;   /* FIX E LOT2 2026-05-30 : 10px -> 11px (lisibilité crédits, reste discret) */
    color: rgba(255, 255, 255, 0.85);
    background: rgba(0, 0, 0, 0.55);
    padding: 3px 7px;
    border-radius: 3px;
    z-index: 3;
    letter-spacing: 0.02em;
    pointer-events: auto;
}
.image-credit a {
    color: rgba(255, 255, 255, 0.95);
    text-decoration: none;
}
.image-credit a:hover {
    text-decoration: underline;
}

/* Mini-LOT 4.5.e Bug 1 — override philosophie : crédit en haut-droite pour éviter overlap avec .en-philosophy-quote (positionnée bottom-right) */
.en-philosophy-img-wrap .image-credit {
    bottom: auto;
    top: 8px;
    inset-inline-end: 8px;
}

/* Fix manquant : position:relative sur .en-gallery-item pour overlay crédit */
.en-gallery-item { position: relative; }

/* Hero split 50/50 — LOT 4.4 + Mini-LOT 4.5.g Bug C1 retrait min-height:75vh (alignement image/CTA via hauteur naturelle content)
   Sprint #65 BLOC B — padding-top:calc(banner+nav) réserve l'espace nav fixed via le conteneur hero.
   padding-top (vs margin-top) : élimine margin-collapse par construction, et la nav opaque recouvre la bande réservée
   (pas de trou visible). Pousse image + content ensemble (grid desktop OU stack mobile). Cascade auto par vars
   :root overridées en @media 1199 et @media 768 (Bloc A). 3 paliers calculés : 132/124/146px. */
.en-hero-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    padding-top: calc(var(--banner-height) + var(--nav-height));
}
.en-hero-split-image {
    position: relative;
    overflow: hidden;
}
.en-hero-split-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
/* Mini-LOT 4.5.h Bug C bonus — padding réduit 5rem→3rem pour rapprocher image bot et CTA bot (134px → ~70px attendu)
   Sprint #65 BLOC B — top 11rem → var(--hero-top-gap) : la réservation nav est désormais portée par
   le padding-top du parent .en-hero-split (132/124/146px) ; le content ne porte plus que la respiration
   (2.5rem desktop / 1rem mobile via override @media 768 du Bloc A). justify-content:center intact. */
.en-hero-split-content {
    background: var(--bg);
    padding: var(--hero-top-gap) 3rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--text);
}
/* Mini-LOT 4.5.i Bug 1 — densification pages internes (option β) : padding asymétrique pour texte plus bas dans l'image
   Sprint #65 BLOC B — top 11rem → var(--hero-top-gap) (cf. supra .en-hero-split-content) ; padding-bottom 2rem inchangé. */
.en-hero-split-internal .en-hero-split-content {
    padding-top: var(--hero-top-gap);
    padding-bottom: 2rem;
}

/* Mini-LOT 4.5.k — CTA Réserver cette chambre (chambre.php) */
.en-chambre-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin: 3rem 0;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.en-chambre-price { display: flex; align-items: baseline; gap: 0.5rem; }
.en-price-amount { font-size: 2rem; font-weight: 700; color: var(--accent); }
.en-price-unit { font-size: 1rem; color: var(--text-muted); }
.en-btn-large { padding: 1rem 2rem; font-size: 0.875rem; }
@media (max-width: 640px) {
    .en-chambre-cta { flex-direction: column; align-items: stretch; }
    .en-chambre-price { justify-content: center; }
    .en-btn-large { text-align: center; }
}
/* Mini-LOT 4.5.f Bug B — rythme typographique uniforme 1rem/1.5rem (centrage vertical déjà OK justify-content:center) */
.en-hero-split-content .en-hero-eyebrow {
    color: var(--accent);
    margin-bottom: 1rem;
}
.en-hero-split-content .en-hero-title {
    color: var(--text);
    margin-bottom: 1.5rem;
}
.en-hero-split-content .en-hero-subtitle {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

/* Mobile stack vertical <768px */
@media (max-width: 768px) {
    .en-hero-split {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .en-hero-split-image {
        min-height: 280px;
    }
    /* Sprint #65 BLOC B — point-fix 3rem 1.5rem (sprint65-hero-mobile-fix SUPERSEDED) remplacé par :
       padding-top = var(--hero-top-gap) (1rem en mobile via override Bloc A) — cohérent système unifié. */
    .en-hero-split-content,
    .en-hero-split-internal .en-hero-split-content {
        padding: var(--hero-top-gap) 1.5rem 3rem;
    }
}

/* ========================================
   Mini-LOT 4.5.r.1 — Refonte design premium B.9 v3 v2
   (GO bloc Erwan 2026-05-18 — D1 logos officiels + D2 cards bg blanc fixe
    + D3 effets 3D modérés + D4 header icône+eyebrow+sous-titre)
   ======================================== */

/* Overlay premium avec backdrop blur */
.en-modal-overlay {
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Modal content premium — radius 12px + shadows multi-layer */
.en-modal-content {
    padding: 0;
    max-width: 540px;
    border-radius: 12px;
    box-shadow:
        0 24px 48px rgba(0,0,0,0.32),
        0 8px 16px rgba(0,0,0,0.18),
        0 0 0 1px rgba(255,255,255,0.04) inset;
    overflow: hidden;
}
.en-modal-content-wide { max-width: 620px; }

/* D4 — HEADER premium (icône + eyebrow + sous-titre + close-btn) */
.en-modal-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    background: linear-gradient(180deg, rgba(6,95,70,0.04), transparent);
}
[data-theme="dark"] .en-modal-header {
    border-bottom-color: rgba(255,255,255,0.06);
    background: linear-gradient(180deg, rgba(52,211,153,0.06), transparent);
}
.en-modal-header-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(6,95,70,0.12);
    border: 1px solid rgba(6,95,70,0.25);
    color: var(--accent-strong, #065f46);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.15),
        0 1px 3px rgba(0,0,0,0.08);
}
.en-modal-header-icon svg {
    width: 22px;
    height: 22px;
}
[data-theme="dark"] .en-modal-header-icon {
    background: rgba(52,211,153,0.12);
    border-color: rgba(52,211,153,0.3);
    color: var(--accent-strong, #34d399);
}
.en-modal-header-text {
    flex: 1;
    min-width: 0;
}
.en-modal-eyebrow {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent-strong, #065f46);
    margin: 0 0 2px;
    line-height: 1.2;
}
[data-theme="dark"] .en-modal-eyebrow {
    color: var(--accent-strong, #34d399);
}
.en-modal-subtitle {
    font-size: 18px;
    font-weight: 500;
    font-family: var(--font-serif);
    color: #1a1a1a;
    margin: 0;
    line-height: 1.25;
    letter-spacing: -0.01em;
}
[data-theme="dark"] .en-modal-subtitle {
    color: #f5f5f5;
}
.en-modal-close-btn {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background: transparent;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.en-modal-close-btn svg {
    width: 18px;
    height: 18px;
}
.en-modal-close-btn:hover {
    background: rgba(0,0,0,0.06);
    color: var(--text);
}
[data-theme="dark"] .en-modal-close-btn:hover {
    background: rgba(255,255,255,0.08);
}
.en-modal-close-btn:focus-visible {
    outline: 2px solid var(--accent-surface);
    outline-offset: 2px;
}

/* BODY — contenu de la modale */
.en-modal-body {
    padding: 1.75rem 1.5rem 2rem;
}
.en-modal-intro {
    font-size: 15px;
    line-height: 1.55;
    margin: 0 0 1.5rem;
    color: var(--text);
    text-align: center; /* Mini-LOT modale B.9 centrage (2026-05-20) */
}

.en-reservation-section {
    margin: 0 0 1.25rem;
}
.en-reservation-section:last-child {
    margin-bottom: 0;
}
.en-modal-content h3.en-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0 0 0.5rem;
    color: var(--accent-strong, #065f46);
    font-family: inherit;
    text-align: center; /* Mini-LOT modale B.9 centrage (2026-05-20) */
}
[data-theme="dark"] .en-modal-content h3.en-section-title {
    color: var(--accent-strong, #34d399);
}
.en-modal-content .en-section-hint {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0 0 1rem;
    line-height: 1.5;
    text-align: center; /* Mini-LOT modale B.9 centrage (2026-05-20) */
}

/* D1+D2 — PLATFORMS BAR : 5 cards <img> logos officiels bg blanc fixe cross-theme + effets 3D modérés */
.en-platforms-bar {
    display: flex;
    gap: 0.5rem;
    flex-wrap: nowrap;
    margin: 0;
}
.en-platform-card {
    flex: 1 1 0;
    min-width: 0;
    height: 56px;
    min-height: 56px;
    padding: 0.625rem;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.08);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.6),
        0 1px 2px rgba(0,0,0,0.04),
        0 2px 6px rgba(0,0,0,0.04);
    font-family: inherit;
    text-align: center;
}
[data-theme="dark"] .en-platform-card {
    background: #ffffff;
    border-color: rgba(0,0,0,0.1);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.8),
        0 2px 4px rgba(0,0,0,0.2),
        0 6px 12px rgba(0,0,0,0.16);
}
.en-platform-card:hover {
    transform: translateY(-3px);
    border-color: rgba(6,95,70,0.4);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.8),
        0 4px 8px rgba(0,0,0,0.08),
        0 12px 24px rgba(6,95,70,0.18),
        0 0 0 1px rgba(6,95,70,0.2);
}
.en-platform-card:focus-visible {
    outline: 2px solid var(--accent-strong, #065f46);
    outline-offset: 2px;
}
.en-platform-logo {
    max-height: 24px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* D4 — Séparateur élégant lignes décoratives gradient émeraude */
.en-modal-separator {
    display: flex;
    align-items: center;
    margin: 1.5rem 0;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
.en-modal-separator::before,
.en-modal-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(6,95,70,0.18) 50%, transparent);
}
.en-modal-separator span {
    padding: 0 0.875rem;
}

/* D3 — Bouton "Réserver en direct" inline-flex centré avec icône flèche */
.en-direct-action-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 0.5rem;
}
.en-btn-direct {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    border-radius: 8px;
    background: var(--accent-strong, #065f46);
    color: #ffffff;
    border: 0;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        0 2px 4px rgba(6,95,70,0.18),
        0 4px 12px rgba(6,95,70,0.24);
    font-family: inherit;
}
.en-btn-direct svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}
.en-btn-direct:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        0 4px 8px rgba(6,95,70,0.22),
        0 8px 20px rgba(6,95,70,0.32);
}
.en-btn-direct:hover svg {
    transform: translateX(3px);
}
.en-btn-direct:focus-visible {
    outline: 2px solid var(--accent-surface);
    outline-offset: 2px;
}

/* Blocs explainer + simulation message (étape 2A/2B) */
.en-simulation-message,
.en-demo-explainer {
    background: rgba(6,95,70,0.04);
    padding: 1.25rem 1.5rem;
    border-radius: 8px;
    border-left: 3px solid var(--accent-strong, #065f46);
    margin: 1.25rem 0;
}
[data-theme="dark"] .en-simulation-message,
[data-theme="dark"] .en-demo-explainer {
    background: rgba(52,211,153,0.06);
}
.en-modal-content .en-explainer-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 0.75rem;
    color: var(--accent-strong, #065f46);
    text-transform: none;
    letter-spacing: 0;
}
[data-theme="dark"] .en-modal-content .en-explainer-title {
    color: var(--accent-strong, #34d399);
}
.en-modal-content .en-explainer-text {
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
    color: var(--text);
}
.en-modal-content .en-explainer-steps {
    margin: 0;
    padding-left: 1.25rem;
    list-style-position: outside;
}
.en-modal-content .en-explainer-steps li {
    margin: 0.625rem 0;
    font-size: 14px;
    line-height: 1.55;
}
.en-modal-content .en-explainer-steps li strong {
    color: var(--accent-strong, #065f46);
    font-weight: 600;
}

/* Override scope buttons anti-pattern #11 (préservé 4.5.r) */
.en-modal-content .en-modal-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}
.en-modal-actions .en-btn-primary,
.en-modal-actions .en-btn-ghost {
    flex: 1;
    min-width: 140px;
    display: inline-block;
    width: auto;
    padding: 0.75rem 1.5rem;
    font-size: 15px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0.01em;
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}
.en-modal-actions .en-btn-primary {
    background: var(--accent-strong, #065f46);
    color: #ffffff;
    border: 0;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.15),
        0 2px 4px rgba(6,95,70,0.18);
}
.en-modal-actions .en-btn-primary:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.15),
        0 4px 8px rgba(6,95,70,0.22);
}
.en-modal-actions .en-btn-ghost {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border, rgba(0,0,0,0.15));
}
[data-theme="dark"] .en-modal-actions .en-btn-ghost {
    border-color: rgba(255,255,255,0.15);
}
.en-modal-actions .en-btn-ghost:hover {
    border-color: var(--text);
    background: rgba(0,0,0,0.04);
}
[data-theme="dark"] .en-modal-actions .en-btn-ghost:hover {
    background: rgba(255,255,255,0.04);
}

/* Responsive */
@media (max-width: 580px) {
    .en-platforms-bar { flex-wrap: wrap; }
    .en-platform-card { flex: 1 1 calc(33.333% - 0.34rem); }
}
@media (max-width: 380px) {
    .en-platform-card { flex: 1 1 calc(50% - 0.25rem); }
    .en-modal-header { padding: 1rem 1.25rem; }
    .en-modal-body { padding: 1.5rem 1.25rem 1.75rem; }
}
@media (max-width: 320px) {
    .en-platforms-bar { flex-direction: column; }
    .en-platform-card { flex: 1 1 auto; }
}

/* ════════════════════════════════════════════════════════════
   Mini-LOT 4.5.s — Bandeau démo étendu + bouton "Commander ce chatbot" (2026-05-19)
   Override height banner 32→48px desktop / 56px mobile (autorisé par Brief Phase B').
   Sync .en-nav top (Option A) + scroll-margin #chambres (Option A'').
   ════════════════════════════════════════════════════════════ */

/* === Bandeau démo étendu === */
.en-demo-banner {
    height: auto;
    min-height: 48px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.en-demo-banner-title {
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #eae5d8;
    font-size: 0.9rem;
}

.en-demo-banner-divider {
    color: rgba(234, 229, 216, 0.5);
    font-weight: 300;
}

.en-demo-banner-subtitle {
    font-weight: 400;
    font-size: 0.85rem;
    color: rgba(234, 229, 216, 0.85);
    line-height: 1.4;
}

/* === Bouton "Commander ce chatbot" — Phase E.d couleur inversée + Phase E.f text-decoration none + 3D shadows === */
/* BLOC 2 B1-1 — .en-nav-cta--order thématisé : suit --accent-strong + --text-on-accent
   au lieu de hardcode #131313/#eae5d8. Les overrides dark legacy (lignes ~1225+) sont retirés
   car la sémantique inverse automatiquement par data-theme. */
.en-nav-cta--order {
    text-decoration: none;
    background: var(--accent-surface);   /* fix5 : surface orange vif #FF6B35 (était --accent-strong) */
    color: var(--text-on-surface);       /* fix5 : label foncé sur orange vif (ratio AA) */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
    border-radius: 6px;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.10),
        0 2px 4px rgba(0, 0, 0, 0.06),
        0 4px 8px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.25s ease, transform 0.25s ease, filter 0.2s ease;
}

/* Phase E.f Fix 7 — text-decoration none défensif anti-cascade <a> states */
.en-nav-cta--order:hover,
.en-nav-cta--order:focus-visible,
.en-nav-cta--order:active,
.en-nav-cta--order:visited {
    text-decoration: none;
}

.en-nav-cta--order:hover,
.en-nav-cta--order:focus-visible {
    filter: brightness(1.15);
    transform: translateY(-2px);
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.15),
        0 8px 16px rgba(0, 0, 0, 0.10),
        0 16px 32px rgba(0, 0, 0, 0.06);
}

.en-nav-cta--order:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
    transition: box-shadow 0.1s ease, transform 0.1s ease;
}

.en-nav-cta--order:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}

[data-theme="dark"] .en-nav-cta--order,
/* BLOC 2 B1-1 — overrides dark .en-nav-cta--order RETIRÉS : la sémantique
   var(--accent-strong) + var(--text-on-accent) gère automatiquement l'inversion
   par data-theme (light = mint foncé sur blanc / dark = mint clair sur noir).
   Ombres dark conservées dans le bloc base (rgba neutre fonctionne sur les 2 thèmes). */

.en-nav-cta__icon {
    font-size: 1em;
    line-height: 1;
}

/* Phase E.d — icône Material Symbols caddie ajustement */
.en-nav-cta--order .en-nav-cta__icon.material-symbols-outlined {
    font-size: 1.1rem;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
    line-height: 1;
}

/* Phase E.b Fix 1 — défensive base label display (anti-cache) */
.en-nav-cta__label-full {
    display: inline;
}

.en-nav-cta__label-compact {
    display: none;
}

/* === Responsive 768px === */
@media (max-width: 768px) {
    .en-demo-banner {
        min-height: 70px;
        padding: 6px 12px;
        flex-direction: column;
        gap: 2px;
    }
    .en-demo-banner-divider {
        display: none;
    }
    .en-demo-banner-subtitle {
        font-size: 0.78rem;
        text-align: center;
    }
    .en-nav-cta__label-full {
        display: none;
    }
    .en-nav-cta__label-compact {
        display: inline;
    }
    /* Phase E.b Fix 3 — compact button mobile (anti-overflow viewport 375px) */
    .en-nav-cta--order {
        padding: 0.5rem 0.75rem;
        gap: 4px;
        margin-left: 4px;
    }
    /* Phase E.e Fix 6 — règle hide icône supprimée (Phase E.b héritage). Icône caddie reste visible mobile/tablet (intent design Phase E.d). */
    /* Phase E.b Fix 4 — sync nav.top sur banner réel mobile ~70px (subtitle wrap 2 lignes) */
    .en-nav { top: 70px; }
}

/* =========================================================================
   fix8 — SYSTÈME DE BOUTONS UNIQUE (boutons de PAGE, hors widget chatbot)
   REPOS  : fond transparent, contour 1px + liseré interne 1px orange (--accent-surface),
            border-radius 0, label orange AA (#C2410C light / #FF6B35 dark).
   HOVER/ACTIF/FOCUS : fond #FF6B35, liseré interne BLANC, label noir #1a1a1a.
   ========================================================================= */
.en-btn-primary, .en-btn-ghost, .en-filter-btn, .en-nav-cta--order, .en-philosophy-cta, .en-btn-direct {
    background: transparent !important;
    background-image: none !important;
    border: 1px solid var(--accent-surface) !important;
    outline: none !important;            /* fix9 : trait unique (liseré interne supprimé, exclusif au logo) */
    border-radius: 0 !important;
    color: #C2410C !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
    transition: background-color .25s ease, color .25s ease !important;
}
[data-theme="dark"] .en-btn-primary, [data-theme="dark"] .en-btn-ghost, [data-theme="dark"] .en-filter-btn,
[data-theme="dark"] .en-nav-cta--order, [data-theme="dark"] .en-philosophy-cta, [data-theme="dark"] .en-btn-direct {
    color: #FF6B35 !important;   /* label orange vif AA sur fond sombre (6.76) */
}
.en-filter-btn { text-transform: none !important; }   /* filtres : casse normale */
.en-philosophy-cta { padding: .7rem 1.6rem !important; }   /* FIX B LOT2 2026-05-30 : padding de boîte cohérent outline (était 0/0/8/0 hérité base:101 -> texte collé au cadre) */

.en-btn-primary:hover, .en-btn-ghost:hover, .en-filter-btn:hover, .en-filter-btn.active,
.en-nav-cta--order:hover, .en-philosophy-cta:hover, .en-btn-direct:hover,
.en-btn-primary:focus-visible, .en-btn-ghost:focus-visible, .en-filter-btn:focus-visible,
.en-nav-cta--order:focus-visible, .en-philosophy-cta:focus-visible, .en-btn-direct:focus-visible {
    background: var(--accent-surface) !important;
    border-color: var(--accent-surface) !important;
    outline: none !important;            /* fix9 : pas de liseré interne, rempli simple */
    color: #1a1a1a !important;           /* label noir (ratio 6.39 sur #FF6B35) */
    transform: none !important;
    filter: none !important;
}

/* fix9 : filtre ACTIF/HOVER rempli orange aussi en DARK — bat les règles legacy gallery
   [data-theme="dark"] a[href="?cat=all"]{bg:#2a2a2a !important} (spécificité 1,2,0 > 1,1,1). */
[data-theme="dark"] .en-filter-btn.active,
[data-theme="dark"] .en-filter-btn:hover {
    background: var(--accent-surface) !important;
    color: #1a1a1a !important;
}

/* Tri = même langage (select stylé bouton + chevron orange) */
.en-sort-select {
    background-color: transparent !important;
    border: 1px solid var(--accent-surface) !important;
    outline: none !important;            /* fix9 : trait unique */
    border-radius: 0 !important;
    color: #C2410C !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    padding-right: 2rem !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23FF6B35' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.6rem center !important;
}
[data-theme="dark"] .en-sort-select { color: #FF6B35 !important; }

/* =========================================================================
   LOT RECETTE-FIX A (2026-06-13) — TOKEN --accent-on-dark
   Accent FOREGROUND lisible en thème sombre (cible 7:1 sur #1a1a1a).
   Valeurs par thème : shared/themes/*.css. Défaut = --accent-surface
   (= comportement actuel → orange/emerald pilotes STRICTEMENT INCHANGÉS ;
   seuls les 9 thèmes FAIL surchargent --accent-on-dark dans leur *.css).
   N'AFFECTE PAS le système de boutons fix8 (calibré pilote orange, hors scope,
   finding séparé : bordure accent-surface + label #FF6B35 hardcodé sur thèmes non-orange).
   ========================================================================= */
[data-theme="dark"]{ --accent-on-dark: var(--accent-surface); }
[data-theme="dark"] .en-include-icon,
[data-theme="dark"] .en-check-icon,
[data-theme="dark"] .en-amenity-icon,
[data-theme="dark"] .en-prestation-icon { color: var(--accent-on-dark); }
[data-theme="dark"] .en-input:focus { border-bottom-color: var(--accent-on-dark); }
[data-theme="dark"] .theme-toggle:hover { border-color: var(--accent-on-dark); }

/* LOT RECETTE-FIX B (2026-06-13) — grille listing : palier mobile 1-col (<481px).
   Cascade grille : >1024 = 3-col (auto-fill minmax 320), 481-1024 = 2-col, <481 = 1-col. */
@media (max-width:480px){ .en-grid { grid-template-columns:1fr; padding:3rem 1.25rem; } }

/* LOT RECETTE-FIX C-a (2026-06-13) — réservation largeur icônes Material Symbols.
   Tue le reflow ligature→glyphe au fonts.ready (shift mesuré 63px lang/thème + 17px CTA) :
   l'icône occupe un slot fixe 1em quel que soit l'état de chargement de la police. */
.material-symbols-outlined { display:inline-flex; align-items:center; justify-content:center; width:1em; min-width:1em; overflow:hidden; }