/* ============================================================
   Habitation Anse à l'Âne - Page Séminaires & formations
   Dépend de colors_and_type.css + design-system.css + homepage.css
   8 sections. Tonalité institutionnelle B2B mais chaleureuse.
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   1. HERO
   ───────────────────────────────────────────────────────────── */
.sem-hero {
  position: relative;
  min-height: 84svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.sem-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.sem-hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(24,22,19,0.72) 0%, rgba(24,22,19,0.4) 42%, rgba(24,22,19,0.1) 70%, transparent 100%),
    linear-gradient(180deg, transparent 50%, rgba(24,22,19,0.4) 100%);
}
.sem-hero-inner {
  position: relative; z-index: 2;
  max-width: var(--container);
  margin: 0 auto;
  width: 100%;
  padding: 0 var(--gutter);
}
.sem-hero-box { max-width: 640px; }
.sem-hero .hp-eyebrow { color: rgba(255,255,255,0.88); text-shadow: 0 1px 16px rgba(24,22,19,0.5); }
.sem-hero-h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.3rem, 4.4vw, 3.9rem);
  line-height: 1.07;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 16px 0 0;
  text-wrap: balance;
  text-shadow: 0 1px 3px rgba(24,22,19,0.45), 0 2px 40px rgba(24,22,19,0.5);
}
.sem-hero-h1 em { font-style: italic; }
.sem-hero-sub {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1.16rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.9);
  margin: 18px 0 30px;
  max-width: 48ch;
  text-shadow: 0 1px 18px rgba(24,22,19,0.55);
}

/* ─────────────────────────────────────────────────────────────
   2. POURQUOI NOUS CHOISIR  (3 colonnes)
   ───────────────────────────────────────────────────────────── */
.sem-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3.6vw, 56px); }
.sem-why-item { display: grid; gap: 16px; }
.sem-why-ico {
  width: 50px; height: 50px;
  color: var(--brass);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--v-rule);
  border-radius: 50%;
}
.sem-why-ico svg { width: 25px; height: 25px; stroke-width: 1.4; }
.sem-why-item h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.16;
  color: var(--ink);
  margin: 0;
}
.sem-why-item p {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  max-width: 40ch;
}

/* ─────────────────────────────────────────────────────────────
   3. ESPACES DE TRAVAIL  (3 cards)
   ───────────────────────────────────────────────────────────── */
.sem-spaces-band { background: var(--cream-warm); }
.sem-spaces { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 32px); }
.sem-space {
  display: flex;
  flex-direction: column;
  background: var(--v-surface);
  border: var(--v-card-border);
  border-radius: var(--v-card-radius);
  box-shadow: var(--v-card-shadow);
  overflow: hidden;
}
.sem-space-img { aspect-ratio: 4 / 3; overflow: hidden; position: relative; }
.sem-space-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-quiet); }
.sem-space:hover .sem-space-img img { transform: scale(1.04); }
.sem-space-body { padding: clamp(24px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.sem-space-cap {
  font-family: var(--font-sans);
  font-size: 0.68rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--brass);
}
.sem-space h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
}
.sem-space p {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────
   4. ÉQUIPEMENTS PRO  (4 colonnes)
   ───────────────────────────────────────────────────────────── */
.sem-equip { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px) clamp(28px, 4vw, 64px); }
.sem-equip-item { display: flex; align-items: center; gap: 16px; padding: 18px 4px; border-bottom: 1px solid var(--line); }
.sem-equip-ico { flex-shrink: 0; width: 40px; height: 40px; color: var(--brass); display: flex; align-items: center; justify-content: center; }
.sem-equip-ico svg { width: 24px; height: 24px; stroke-width: 1.4; }
.sem-equip-item span { font-family: var(--font-sans); font-size: 1.02rem; font-weight: 400; color: var(--ink); }

/* ─────────────────────────────────────────────────────────────
   5. FORMULES  (3 cards horizontales)
   ───────────────────────────────────────────────────────────── */
.sem-formules { display: grid; gap: clamp(16px, 1.8vw, 22px); }
.sem-formule {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  background: var(--v-surface);
  border: var(--v-card-border);
  border-radius: var(--v-card-radius);
  box-shadow: var(--v-card-shadow);
  padding: clamp(24px, 2.6vw, 36px) clamp(26px, 3vw, 44px);
}
.sem-formule-dur {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  line-height: 1;
  color: var(--brass);
  min-width: 120px;
}
.sem-formule-dur small { display: block; font-family: var(--font-sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.sem-formule-mid h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 6px;
}
.sem-formule-mid p {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  max-width: 52ch;
}
.sem-formule-price { text-align: right; }
.sem-formule-price .p { font-family: var(--font-serif); font-style: italic; font-size: 1.1rem; color: var(--brass-deep); display: block; margin-bottom: 12px; white-space: nowrap; }

/* ─────────────────────────────────────────────────────────────
   6. TEAM BUILDING  (4 cards)
   ───────────────────────────────────────────────────────────── */
.sem-tb-band { background: var(--cream-warm); }
.sem-tb { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.4vw, 30px); }
.sem-tb-item {
  display: flex; flex-direction: column;
  background: var(--v-surface);
  border: var(--v-card-border);
  border-radius: var(--v-card-radius);
  box-shadow: var(--v-card-shadow);
  overflow: hidden;
}
.sem-tb-img { aspect-ratio: 3 / 2; overflow: hidden; position: relative; }
.sem-tb-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-quiet); }
.sem-tb-item:hover .sem-tb-img img { transform: scale(1.05); }
.sem-tb-body { padding: clamp(20px, 2vw, 26px); display: grid; gap: 8px; }
.sem-tb-body h3 { font-family: var(--font-serif); font-weight: 400; font-size: 1.3rem; line-height: 1.12; color: var(--ink); margin: 0; }
.sem-tb-body p { font-family: var(--font-sans); font-weight: 300; font-size: 0.92rem; line-height: 1.5; color: var(--ink-soft); margin: 0; }
.sem-tb-note { text-align: center; margin-top: clamp(28px, 3vw, 40px); font-family: var(--font-serif); font-style: italic; font-size: clamp(1.1rem, 1.8vw, 1.4rem); color: var(--ink-soft); }

/* ─────────────────────────────────────────────────────────────
   7. CONFIANCE  (placeholder logos)
   ───────────────────────────────────────────────────────────── */
.sem-trust { text-align: center; }
.sem-trust .hp-eyebrow { display: inline-block; margin-bottom: 28px; }
.sem-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(28px, 5vw, 72px); }
.sem-logo {
  width: 130px; height: 56px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sans);
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
  opacity: 0.7;
}

/* ─────────────────────────────────────────────────────────────
   8. FORMULAIRE DEVIS B2B
   ───────────────────────────────────────────────────────────── */
.sem-form-band { background: var(--dark); color: var(--fg-on-dark); }
.sem-form-wrap { max-width: 960px; margin: 0 auto; }
.sem-form-head { text-align: center; margin-bottom: clamp(36px, 4vw, 52px); }
.sem-form-head .hp-eyebrow { display: inline-block; margin-bottom: 14px; color: var(--brass); }
.sem-form-head h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.08; color: var(--fg-on-dark); margin: 0; }
.sem-form-head h2 em { font-style: italic; color: var(--brass); }
.sem-form {
  background: var(--cream);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
  padding: clamp(28px, 4vw, 52px);
}
.sem-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.sem-field { display: grid; gap: 8px; }
.sem-field.is-full { grid-column: 1 / -1; }
.sem-field label { font-family: var(--font-sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.sem-field input, .sem-field select, .sem-field textarea {
  font-family: var(--font-sans); font-size: 0.98rem; color: var(--ink);
  background-color: color-mix(in srgb, var(--cream) 82%, var(--ink) 4%);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 13px 14px; width: 100%; appearance: none; -webkit-appearance: none;
  transition: border-color var(--dur-base) var(--ease-quiet);
}
.sem-field textarea { resize: vertical; min-height: 110px; }
.sem-field input:focus, .sem-field select:focus, .sem-field textarea:focus { outline: none; border-color: var(--brass); }
.sem-field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--brass) 50%), linear-gradient(135deg, var(--brass) 50%, transparent 50%);
  background-position: calc(100% - 18px) center, calc(100% - 13px) center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.sem-form-foot { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 26px; }
.sem-form-foot .ds-btn { padding: 16px 36px; }
.sem-form-reassure { font-family: var(--font-sans); font-weight: 300; font-size: 0.92rem; color: var(--ink-soft); display: flex; align-items: center; gap: 10px; }
.sem-form-reassure::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--status-available); }
.sem-form-success { display: none; text-align: center; padding: clamp(40px, 6vw, 72px); font-family: var(--font-serif); font-size: clamp(1.4rem, 2.4vw, 1.9rem); color: var(--ink); }
.sem-form-success.is-show { display: block; }
.sem-form-success em { font-style: italic; color: var(--brass-deep); }

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .sem-why { grid-template-columns: 1fr; gap: 36px; max-width: 520px; margin: 0 auto; }
  .sem-spaces { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .sem-equip { grid-template-columns: 1fr 1fr; }
  .sem-tb { grid-template-columns: 1fr 1fr; }
  .sem-formule { grid-template-columns: 1fr; text-align: left; gap: 14px; }
  .sem-formule-price { text-align: left; }
}
@media (max-width: 640px) {
  .sem-equip { grid-template-columns: 1fr; }
  .sem-tb { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; }
  .sem-form-grid { grid-template-columns: 1fr; }
}