/* ==========================================================
   Ski Megève — direction artistique haut de gamme
   Inspiration : le chic alpin des années 1920, palaces, neige au petit matin
   Couleurs : blanc neige froid, bleu d'altitude, encre glacier, touche de laiton
   ========================================================== */
:root {
  --snow: #fbfcfd;
  --frost: #eef2f6;
  --altitude: #1f3a5f;
  --ink: #0f1e31;
  --pale: #9db7d3;
  --brass: #a8875a;
  --brass-soft: #c9b28e;
  --text: #24364d;
  --muted: #66778c;
  --line: rgba(31, 58, 95, .14);
  --serif: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --sans: "Jost", "Futura", "Avenir Next", system-ui, sans-serif;
  --bs-primary: var(--altitude);
  --bs-primary-rgb: 31, 58, 95;
  --bs-link-color: var(--altitude);
  --bs-link-hover-color: var(--brass);
  --bs-border-radius: 0;
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--snow);
  padding-top: 88px;
  -webkit-font-smoothing: antialiased;
}
body.page-home { padding-top: 0; }

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5, .display-font {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.15;
  color: var(--ink);
}
h5, .h5 { font-size: 1.45rem; }
h6, .h6 { font-family: var(--sans); font-weight: 500; letter-spacing: .02em; color: var(--ink); }
.fw-bold { font-weight: 500 !important; }
p { max-width: 68ch; }
a { text-decoration-thickness: 1px; text-underline-offset: .2em; }
::selection { background: var(--pale); color: var(--ink); }

.section { padding: 7.5rem 0; }
.section-alt { background: var(--frost); }
.section-title { font-size: clamp(2.2rem, 4.2vw, 3.4rem); font-weight: 400; color: var(--ink); }

/* Le « sur-titre » devient une petite ligne en italique laiton, précédée d'un filet */
.eyebrow {
  display: inline-flex; align-items: center; gap: .9rem;
  font-family: var(--serif); font-style: italic; font-size: 1.2rem;
  color: var(--brass); margin-bottom: .75rem; letter-spacing: 0; text-transform: none;
}
.eyebrow::before { content: ""; width: 2.5rem; height: 1px; background: currentColor; }
.text-center .eyebrow { justify-content: center; }
.text-center .eyebrow::after { content: ""; width: 2.5rem; height: 1px; background: currentColor; }
.lead-muted { color: var(--muted); font-size: 1.15rem; font-weight: 300; }
.text-muted { color: var(--muted) !important; }
.text-primary { color: var(--altitude) !important; }
.mw-640 { max-width: 640px; }

/* ---------- Boutons : rectangulaires, discrets, précis ---------- */
.btn {
  border-radius: 0; font-family: var(--sans); font-weight: 500; font-size: .9rem;
  letter-spacing: .12em; padding: .95rem 2.1rem; background-image: none; box-shadow: none; text-shadow: none; transition: background-color .3s, color .3s, border-color .3s;
}
.btn-sm { padding: .55rem 1.1rem; font-size: .78rem; }
.btn-lg { padding: 1.1rem 2.6rem; font-size: .95rem; }
.btn-primary {
  --bs-btn-bg: var(--altitude); --bs-btn-border-color: var(--altitude); --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--ink); --bs-btn-hover-border-color: var(--ink);
  --bs-btn-active-bg: var(--ink); --bs-btn-active-border-color: var(--ink);
  --bs-btn-disabled-bg: var(--altitude); --bs-btn-disabled-border-color: var(--altitude);
}
.btn-outline-primary {
  --bs-btn-color: var(--altitude); --bs-btn-border-color: var(--altitude);
  --bs-btn-hover-bg: var(--altitude); --bs-btn-hover-border-color: var(--altitude); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--altitude); --bs-btn-active-border-color: var(--altitude);
}
.btn-outline-light { --bs-btn-hover-color: var(--ink); border-width: 1px; }
.btn-light { --bs-btn-bg: var(--snow); --bs-btn-border-color: var(--snow); --bs-btn-color: var(--ink); --bs-btn-hover-bg: var(--brass-soft); --bs-btn-hover-border-color: var(--brass-soft); }
.btn .bi { margin-right: .35rem; }

/* ---------- Navigation ---------- */
.navbar {
  min-height: 88px; padding: 0;
  background: rgba(251, 252, 253, .96);
  border-bottom: 1px solid var(--line);
  transition: background-color .4s, border-color .4s;
}
.navbar-brand {
  font-family: var(--serif); font-size: 1.9rem; font-weight: 500; letter-spacing: .04em;
  color: var(--ink) !important; line-height: 1;
}
.navbar-brand small {
  display: block; font-family: var(--sans); font-size: .62rem; letter-spacing: .38em;
  color: var(--brass); margin-top: .3rem; font-weight: 500;
}
.navbar .nav-link {
  font-weight: 400; font-size: .95rem; letter-spacing: .04em; color: var(--text);
  padding: .5rem 1rem !important; position: relative;
}
.navbar .nav-link::after {
  content: ""; position: absolute; left: 1rem; right: 1rem; bottom: .2rem; height: 1px;
  background: var(--brass); transform: scaleX(0); transform-origin: left; transition: transform .35s ease;
}
.navbar .nav-link:hover::after, .navbar .nav-link.active::after { transform: scaleX(1); }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--ink); }
.navbar-toggler { border: 0; }
.navbar-toggler:focus { box-shadow: 0 0 0 2px var(--brass); }

.lang-switch { gap: .25rem; }
.lang-switch .btn {
  padding: .25rem .4rem; border: 0; font-size: .78rem; letter-spacing: .14em; color: var(--muted); background: none;
}
.lang-switch .btn.active { color: var(--ink); background: none; box-shadow: inset 0 -1px 0 var(--brass); }
.lang-switch .btn:hover { color: var(--ink); background: none; }

/* Accueil : navigation transparente au-dessus de la photo */
.page-home .navbar:not(.scrolled) { background: transparent; border-color: rgba(255, 255, 255, .25); }
.page-home .navbar:not(.scrolled) .navbar-brand,
.page-home .navbar:not(.scrolled) .nav-link,
.page-home .navbar:not(.scrolled) .lang-switch .btn { color: #fff !important; }
.page-home .navbar:not(.scrolled) .lang-switch .btn:not(.active) { opacity: .7; }
.page-home .navbar:not(.scrolled) .navbar-toggler-icon { filter: invert(1); }
@media (max-width: 991.98px) {
  .page-home .navbar:not(.scrolled) .navbar-collapse.show,
  .page-home .navbar:not(.scrolled) .navbar-collapse.collapsing { background: rgba(15, 30, 49, .92); padding: 1rem; }
}

/* ---------- Héros : le moment fort du site ---------- */
.hero {
  position: relative; min-height: 100vh; display: flex; align-items: flex-end;
  color: #fff; padding: 0 0 7rem;
  background: linear-gradient(180deg, rgba(15,30,49,.45) 0%, rgba(15,30,49,0) 30%, rgba(15,30,49,0) 50%, rgba(15,30,49,.55) 100%),
              url("../images/hero.jpg") center 35%/cover no-repeat;
}
.hero-title {
  font-family: var(--serif); font-weight: 300; color: #fff;
  font-size: clamp(5rem, 17vw, 15rem); line-height: .85; letter-spacing: -.02em;
  margin: 0 0 1.5rem -.05em;
}
.hero-line {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2rem;
  border-top: 1px solid rgba(255, 255, 255, .45); padding-top: 1.75rem;
}
.hero-line p {
  font-family: var(--serif); font-size: clamp(1.35rem, 2.2vw, 1.85rem); font-style: italic;
  font-weight: 400; line-height: 1.35; max-width: 32ch; margin: 0;
}
.hero-meta { font-size: .9rem; letter-spacing: .08em; opacity: .9; margin-bottom: .75rem; }
.hero .btn-outline-light { border-color: rgba(255,255,255,.7); }
@media (prefers-reduced-motion: no-preference) {
  .hero-title, .hero-line { animation: rise 1.4s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-line { animation-delay: .35s; }
  @keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.page-header {
  padding: 8rem 0 5.5rem; color: #fff; text-align: center;
  background: linear-gradient(180deg, rgba(15,30,49,.38), rgba(15,30,49,.62)), var(--bg) center/cover no-repeat;
}
.page-header h1 { color: #fff; font-weight: 300; font-size: clamp(2.8rem, 6vw, 5rem); margin-bottom: 1rem; }
.page-header .eyebrow { color: var(--brass-soft); }
.page-header .lead { font-weight: 300; font-size: 1.15rem; }
.ph-entete-galerie { --bg: url("../images/entete-galerie.jpg"); }
.ph-entete-domaine { --bg: url("../images/entete-domaine.jpg"); }
.ph-entete-ecole { --bg: url("../images/entete-ecole.jpg"); }
.ph-entete-reservation { --bg: url("../images/entete-reservation.jpg"); }
.ph-entete-contact { --bg: url("../images/entete-contact.jpg"); }

/* ---------- Chiffres clés : une ligne sobre séparée par des filets ---------- */
.figures { border-bottom: 1px solid var(--line); background: var(--snow); }
.figures .col { padding: 2.6rem 1rem; text-align: center; border-left: 1px solid var(--line); }
.figures .col:first-child { border-left: 0; }
.figures .num { font-family: var(--serif); font-size: clamp(2rem, 3.4vw, 2.9rem); font-weight: 400; color: var(--ink); line-height: 1.1; }
.figures .lbl { color: var(--muted); font-size: .9rem; letter-spacing: .04em; }
@media (max-width: 767.98px) {
  .figures .col { flex: 0 0 50%; }
  .figures .col:nth-child(3) { border-left: 0; }
  .figures .col:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* ---------- Cartes : image nette, texte posé, aucune ombre ---------- */
.card-mountain {
  border: 0; border-radius: 0; background: transparent; height: 100%;
}
.card-mountain > img, .card-mountain .card-img-top {
  width: 100%; height: 300px; flex-shrink: 0; object-fit: cover; border-radius: 0;
  transition: filter .6s ease;
}
.card-mountain:hover > img { filter: brightness(1.06); }
.card-mountain .card-body { padding: 1.6rem 0 0; border-bottom: 1px solid var(--line); padding-bottom: 1.6rem; }
.card-mountain .card-title { font-size: 1.7rem; font-weight: 500; margin-bottom: .5rem; }
.card-mountain .badge {
  background: none; color: var(--brass); border-radius: 0; padding: 0; font-family: var(--serif);
  font-style: italic; font-weight: 400; font-size: 1.05rem; letter-spacing: 0;
}
.card-mountain.p-4 { padding: 2.25rem 0 !important; border-top: 1px solid var(--altitude); }
.icon-bubble {
  width: auto; height: auto; background: none; color: var(--brass);
  font-size: 1.9rem; margin-bottom: 1rem; display: block; line-height: 1;
}
.text-center .icon-bubble, .icon-bubble.mx-auto { text-align: center; }

/* ---------- Galerie (part principale) ---------- */
.gallery-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 2rem; }
.gallery-filters .btn {
  border: 0; padding: .4rem 0; margin: 0; font-size: .95rem; letter-spacing: .06em; color: var(--muted);
  background: none; border-bottom: 1px solid transparent;
}
.gallery-filters .btn:hover { color: var(--ink); background: none; }
.gallery-filters .btn.active { color: var(--ink); background: none; border-bottom-color: var(--brass); }
.gallery {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  grid-auto-rows: 260px; grid-auto-flow: dense;
}
.gallery-home { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 767.98px) { .gallery-home { grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; } .gallery-home .gallery-item.wide { grid-column: span 2; } }
.gallery-item { position: relative; overflow: hidden; cursor: zoom-in; background: var(--frost); border: 0; padding: 0; }
.gallery-item.wide { grid-column: span 2; }
.gallery-item.tall { grid-row: span 2; }
@media (max-width: 599.98px) { .gallery-item.wide { grid-column: span 1; } }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.gallery-item:hover img, .gallery-item:focus-visible img { transform: scale(1.04); }
.gallery-item figcaption {
  position: absolute; inset: auto 0 0 0; padding: 2.5rem 1.4rem 1.2rem; color: #fff; text-align: left;
  font-family: var(--serif); font-style: italic; font-size: 1.25rem;
  background: linear-gradient(transparent, rgba(15,30,49,.7));
  opacity: 0; transition: opacity .5s ease;
}
.gallery-item:hover figcaption, .gallery-item:focus-visible figcaption { opacity: 1; }
@media (hover: none) { .gallery-item figcaption { opacity: 1; } }
.gallery-item.hide { display: none; }
.gallery-item:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
#lightbox { --bs-backdrop-bg: #0f1e31; --bs-backdrop-opacity: .94; }
#lightbox .modal-content { background: transparent; border: 0; }
#lightbox img { max-height: 80vh; object-fit: contain; }
#lightbox .lb-caption { color: #fff; text-align: center; margin-top: 1rem; font-family: var(--serif); font-style: italic; font-size: 1.3rem; }
#lightbox .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); }
#lightbox .lb-prev { left: 1rem; } #lightbox .lb-next { right: 1rem; }
#lightbox .lb-nav .btn { width: 52px; height: 52px; padding: 0; background: rgba(251,252,253,.9); border: 0; }
#lightbox .lb-nav .btn .bi { margin: 0; }

/* ---------- Tableaux ---------- */
.piste-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .6rem; vertical-align: 1px; }
.p-verte { background: #3f8f5a; } .p-bleue { background: #2f6db5; }
.p-rouge { background: #b84a45; } .p-noire { background: #1d1d1d; }
.table-mountain { border-top: 1px solid var(--altitude); }
.table-mountain .table { --bs-table-bg: transparent; margin: 0; }
.table-mountain thead th {
  background: none; color: var(--muted); font-weight: 400; font-size: .85rem; letter-spacing: .08em;
  border-bottom: 1px solid var(--line); padding: 1rem .5rem;
}
.table-mountain td { padding: 1rem .5rem; border-color: var(--line); }
.list-group.rounded-4 { border-radius: 0 !important; box-shadow: none !important; border-top: 1px solid var(--altitude); }
.list-group-item { background: transparent; padding: 1.05rem 0; border-color: var(--line); }
.list-group-item strong { font-weight: 500; color: var(--ink); }

/* ---------- Tarifs ---------- */
.price-card { border: 1px solid var(--line); background: var(--snow); padding: 3rem 2rem; height: 100%; }
.price-card.featured { border-color: var(--altitude); background: var(--altitude); color: #fff; }
.price-card.featured h5, .price-card.featured .price { color: #fff; }
.price-card.featured .text-muted { color: var(--pale) !important; }
.price-card.featured .btn-primary { --bs-btn-bg: var(--snow); --bs-btn-color: var(--ink); --bs-btn-border-color: var(--snow); --bs-btn-hover-bg: var(--brass-soft); --bs-btn-hover-border-color: var(--brass-soft); --bs-btn-hover-color: var(--ink); }
.price-card .badge { background: none !important; color: var(--brass-soft); font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.05rem; border-radius: 0; }
.price-card .price { font-family: var(--serif); font-size: 3.4rem; font-weight: 300; color: var(--ink); line-height: 1; }

/* ---------- Accordéon ---------- */
.accordion { --bs-accordion-border-radius: 0; --bs-accordion-inner-border-radius: 0; --bs-accordion-bg: transparent; --bs-accordion-border-color: var(--line); --bs-accordion-active-bg: transparent; --bs-accordion-active-color: var(--ink); --bs-accordion-btn-focus-box-shadow: 0 0 0 2px var(--brass); }
.accordion-item { border-left: 0; border-right: 0; }
.accordion-button { font-family: var(--serif); font-size: 1.3rem; padding: 1.2rem 0; color: var(--ink); }
.accordion-body { padding: 0 0 1.4rem; }

/* ---------- Formulaires ---------- */
.form-panel { background: var(--snow); border: 1px solid var(--line); padding: clamp(1.75rem, 4vw, 3.25rem); }
.form-panel h2 { font-family: var(--serif); font-weight: 500; font-size: 1.9rem !important; }
.form-label { font-size: .9rem; letter-spacing: .03em; color: var(--muted); margin-bottom: .35rem; }
.form-control, .form-select {
  border-radius: 0; border: 0; border-bottom: 1px solid rgba(31,58,95,.35); background-color: transparent;
  padding: .7rem 0; font-size: 1.02rem; color: var(--ink);
}
.form-select { background-position: right 0 center; padding-right: 1.5rem; }
textarea.form-control { border: 1px solid rgba(31,58,95,.25); padding: .8rem; }
.form-control:focus, .form-select:focus { box-shadow: none; border-color: var(--brass); background-color: transparent; }
.form-check-input { border-radius: 0; border-color: rgba(31,58,95,.45); }
.form-check-input:checked { background-color: var(--altitude); border-color: var(--altitude); }
.form-check-input:focus { box-shadow: 0 0 0 2px rgba(168,135,90,.4); }
.hp-field { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.secure-note { border-left: 2px solid var(--brass); padding: .4rem 0 .4rem 1rem; color: var(--muted); font-size: .92rem; }
.alert { border-radius: 0; }
aside .form-panel ol { padding-left: 1.2rem; }
aside img.rounded-4, img.rounded-4 { border-radius: 0 !important; box-shadow: none !important; }

/* ---------- Bandeau d'appel ---------- */
.cta {
  position: relative; color: #fff; padding: clamp(3rem, 6vw, 5rem);
  background: linear-gradient(90deg, rgba(15,30,49,.88), rgba(15,30,49,.55)), url("../images/bandeau-accueil.jpg") center/cover;
}
.cta h2 { color: #fff; font-weight: 300; font-size: clamp(2rem, 4vw, 3rem); }

/* ---------- Pied de page ---------- */
footer { background: var(--ink); color: #b6c4d4; font-size: .95rem; }
footer h5 { font-family: var(--serif); font-size: 2rem; font-weight: 400; color: #fff; }
footer h6 { color: var(--brass-soft) !important; font-family: var(--serif); font-style: italic; font-size: 1.2rem; font-weight: 400 !important; }
footer a { color: #fff; text-decoration: none; }
footer a:hover { color: var(--brass-soft); }
footer .social a {
  display: inline-grid; place-items: center; width: 42px; height: 42px;
  border: 1px solid rgba(255,255,255,.25); margin-right: .5rem; transition: border-color .3s;
}
footer .social a:hover { border-color: var(--brass-soft); }
footer hr { border-color: rgba(255,255,255,.15) !important; opacity: 1; }

/* Accessibilité : focus visible partout */
a:focus-visible, .btn:focus-visible, .form-control:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; box-shadow: none; }

/* Programmes des cours privés */
.programme { border-top: 1px solid var(--altitude); padding-top: 1.4rem; height: 100%; }
.programme h3 { margin-bottom: .5rem; }
.form-text { color: var(--muted); font-size: .85rem; }

/* Drapeaux du sélecteur de langue */
.lang-switch .btn { display: inline-flex; align-items: center; gap: .4rem; }
.lang-switch .flag { width: 20px; height: 13px; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(15, 30, 49, .15); }
.lang-switch .btn:not(.active) .flag { opacity: .75; }

/* Hors-piste : balisage jaune et noir */
.p-horspiste { background: repeating-linear-gradient(45deg, #f2b705 0 3px, #1d1d1d 3px 6px); }

/* Titre de bandeau quand le h1 de la page est placé plus bas */
.page-header .ph-title { font-family: var(--serif); color: #fff; font-weight: 300; font-size: clamp(2.8rem, 6vw, 5rem); line-height: 1.15; margin: 0 auto 1rem; max-width: none; }

/* ---------- Cadre des mots-clés (École de ski) ---------- */
.kw-box {
  border: 1px solid var(--line); border-top: 2px solid var(--brass);
  background: var(--snow); padding: clamp(2rem, 5vw, 3.75rem);
}
.kw-box h1 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); font-weight: 400; margin-bottom: 1rem; }
.kw-box .kw-lead { color: var(--muted); font-size: 1.05rem; max-width: 75ch; margin-bottom: 2.5rem; }
.kw-box h2 { font-size: 1.85rem; font-weight: 400; padding-bottom: .75rem; border-bottom: 1px solid var(--line); margin-bottom: 1.25rem; }
.kw-box h3 { font-size: 1.3rem; font-weight: 500; margin: 1.5rem 0 .75rem; }
.kw-box h4 { font-family: var(--serif); font-style: italic; font-size: 1.15rem; font-weight: 400; color: var(--brass); margin: 1.75rem 0 .6rem; }
.kw-links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.kw-links a {
  display: inline-block; padding: .45rem .9rem; border: 1px solid rgba(31, 58, 95, .25);
  color: var(--altitude); text-decoration: none; font-size: .92rem; transition: border-color .3s, color .3s, background-color .3s;
}
.kw-links a:hover { border-color: var(--altitude); background: var(--altitude); color: #fff; }
.kw-links a[target="_blank"]::after { content: " ↗"; font-size: .8em; opacity: .6; }
.kw-small a { font-size: .85rem; padding: .3rem .7rem; color: var(--muted); }

/* Coordonnées affichées en image (protection contre les robots collecteurs) */
.contact-img { height: 30px; width: auto; display: block; }
.contact-img-sm { height: 20px; display: inline-block; }

/* ---------- Photos animées (École de ski) : lent zoom et glissement ---------- */
.ken-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 767.98px) { .ken-grid { grid-template-columns: 1fr 1fr; } }
.ken-item { overflow: hidden; aspect-ratio: 4 / 3; background: var(--frost); }
.ken-item img { width: 100%; height: 100%; object-fit: cover; display: block; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .ken-item img { animation: ken 18s ease-in-out infinite alternate; }
  .ken-item:nth-child(2) img { animation-name: ken-b; animation-delay: -3s; }
  .ken-item:nth-child(3) img { animation-name: ken-c; animation-delay: -6s; }
  .ken-item:nth-child(4) img { animation-name: ken-c; animation-delay: -9s; }
  .ken-item:nth-child(5) img { animation-delay: -12s; }
  .ken-item:nth-child(6) img { animation-name: ken-b; animation-delay: -15s; }
  @keyframes ken   { from { transform: scale(1)    translate(0, 0); }      to { transform: scale(1.14) translate(-3%, -2%); } }
  @keyframes ken-b { from { transform: scale(1.12) translate(3%, 0); }     to { transform: scale(1)    translate(0, 2%); } }
  @keyframes ken-c { from { transform: scale(1.04) translate(0, 3%); }     to { transform: scale(1.16) translate(2%, -2%); } }
}
.ratio.rounded-4 { border-radius: 0 !important; box-shadow: none !important; border: 1px solid var(--line); }

/* ---------- Webcams du domaine ---------- */
.webcam-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 767.98px) { .webcam-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 479.98px) { .webcam-grid { grid-template-columns: 1fr; } }
.webcam { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; color: #fff; text-decoration: none; background: var(--ink); }
.webcam img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.7,.2,1), opacity .4s; opacity: .92; }
.webcam:hover img, .webcam:focus-visible img { transform: scale(1.04); opacity: 1; }
.webcam-live {
  position: absolute; top: .9rem; left: .9rem; display: inline-flex; align-items: center; gap: .45rem;
  font-size: .75rem; letter-spacing: .1em; padding: .25rem .6rem; background: rgba(15, 30, 49, .65);
}
.webcam-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #e0473c; }
@media (prefers-reduced-motion: no-preference) {
  .webcam-live::before { animation: pulse 1.8s ease-in-out infinite; }
  @keyframes pulse { 50% { opacity: .25; } }
}
.webcam-name {
  position: absolute; inset: auto 0 0 0; padding: 2.2rem 1rem .9rem; display: flex; justify-content: space-between; align-items: flex-end;
  background: linear-gradient(transparent, rgba(15, 30, 49, .75)); font-family: var(--serif); font-size: 1.3rem;
}
.webcam-name small { font-family: var(--sans); font-size: .78rem; letter-spacing: .04em; opacity: .85; }

/* Menu compact entre 992 et 1200 px pour éviter les retours à la ligne */
.navbar .nav-link { white-space: nowrap; }
@media (min-width: 992px) and (max-width: 1199.98px) {
  .navbar .nav-link { padding: .5rem .55rem !important; font-size: .88rem; }
  .navbar-brand { font-size: 1.6rem; }
}

/* ---------- Expériences (accueil) ---------- */
.exp-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 300px; gap: 8px; }
.exp-item { position: relative; overflow: hidden; display: block; color: #fff; text-decoration: none; background: var(--ink); }
.exp-item.wide { grid-column: span 2; }
.exp-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.exp-item:hover img, .exp-item:focus-visible img { transform: scale(1.04); }
.exp-text {
  position: absolute; inset: auto 0 0 0; padding: 3rem 1.4rem 1.3rem;
  background: linear-gradient(rgba(15, 30, 49, 0), rgba(15, 30, 49, .55) 35%, rgba(15, 30, 49, .9));
}
.exp-text h3 { color: #fff; font-size: 1.55rem; font-weight: 400; margin: 0 0 .3rem; }
.exp-text p { margin: 0; font-size: .92rem; opacity: .88; line-height: 1.5; }
a.exp-item:hover h3 { color: var(--brass-soft); }
@media (max-width: 991.98px) { .exp-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 260px; } }
@media (max-width: 575.98px) { .exp-grid { grid-template-columns: 1fr; } .exp-item.wide { grid-column: span 1; } }

.cta.cta-ecole { background: linear-gradient(90deg, rgba(15,30,49,.88), rgba(15,30,49,.5)), url("../images/bandeau-ecole.jpg") center/cover; }

/* Récapitulatif (page de confirmation) */
.recap { display: grid; grid-template-columns: minmax(140px, 35%) 1fr; margin: 0; border-top: 1px solid var(--line); }
.recap dt, .recap dd { padding: .7rem 0; border-bottom: 1px solid var(--line); margin: 0; }
.recap dt { font-weight: 400; color: var(--muted); font-size: .92rem; padding-right: 1rem; }
.recap dd { color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }
@media (max-width: 575.98px) { .recap { grid-template-columns: 1fr; } .recap dt { border-bottom: 0; padding-bottom: 0; } }
.ph-entete-confirmation { --bg: url("../images/entete-confirmation.jpg"); }

/* Logo WhatsApp à côté du libellé Téléphone */
.label-wa { display: inline-flex; align-items: center; gap: .45rem; }
.wa-logo { width: 20px; height: 20px; flex-shrink: 0; }
.wa-icon { width: 30px; height: 30px; display: block; }
.wa-icon-sm { width: 18px; height: 18px; flex-shrink: 0; }