/* ============ PAGE DÉTAIL D'UN DOMAINE — « Plein cadre » ============ */
/* Reconstruit à partir du handoff Claude Design (Domaine - V3 Plein cadre). */

.domaine-content {
  max-width: 1440px;
  margin: 0 auto;
}

/* ---------- 1. Bandeau plein cadre ---------- */

.domaine-hero-v3 {
  position: relative;
  /* Proportional to viewport width (not a flat px value) so the crop ratio against the
     source photos stays constant on wide monitors instead of getting more extreme as
     the screen gets wider than the 1440px the design was tuned at (760px = 52.8vw there). */
  min-height: clamp(460px, 53vw, 860px);
  overflow: hidden;
  background: var(--navy-800);
  display: flex;
}

.domaine-hero-v3-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.domaine-hero-v3-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,20,32,0.5) 0%, rgba(6,20,32,0.1) 28%, rgba(6,20,32,0.55) 62%, #061420 100%);
}

.domaine-hero-v3-content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  /* Top padding clears the site's fixed nav (not part of the design handoff,
     which assumed its own inline header). */
  padding: 116px clamp(20px, 4vw, 56px) 64px;
}

@media (max-width: 480px) {
  .domaine-hero-v3-content { padding-top: 96px; }
}

.domaine-back-v3 {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FFFFFF !important;
  background: rgba(6,20,32,0.7);
  padding: 10px 16px;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  transition: color 150ms var(--ease);
}

.domaine-back-v3:hover { color: var(--cyan-400) !important; }

.domaine-hero-v3-bottom {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: end;
}

@media (min-width: 1000px) {
  .domaine-hero-v3-bottom { grid-template-columns: 1fr 1fr; gap: 48px 80px; }
}

.domaine-hero-v3-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.domaine-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.domaine-eyebrow-label { color: var(--cyan-400); }
.domaine-eyebrow-rule { width: 40px; height: 1px; background: var(--cyan-400); }
.domaine-eyebrow-index { color: #C9D3DD; }

.domaine-hero-v3-left h1 {
  font-family: 'Saira Condensed', var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(56px, 8.5vw, 124px);
  line-height: 0.88;
  color: #FFFFFF;
  margin: 0;
  text-wrap: balance;
}

.domaine-intro-v3 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.55;
  color: #FFFFFF;
  padding-left: 24px;
  border-left: 2px solid var(--cyan-400);
  margin: 0;
}

/* ---------- 2. Section claire : rôle + prestations ---------- */

.domaine-role {
  background: var(--grey-100);
  color: var(--text-dark);
  padding: 104px clamp(20px, 4vw, 56px) 112px;
  display: flex;
  flex-direction: column;
  gap: 88px;
}

.domaine-role-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 1000px) {
  .domaine-role-grid { grid-template-columns: 1fr 1fr; gap: 24px 80px; }
}

.domaine-role-head {
  text-align: center;
}

.domaine-role-grid .eyebrow-role {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue-600);
  margin-bottom: 14px;
}

.domaine-role-grid h2 {
  font-family: 'Saira Condensed', var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(40px, 4.5vw, 60px);
  line-height: 0.95;
  color: var(--text-dark);
  margin: 0;
}

.domaine-role-grid p {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.65;
  color: #2C3D4C;
  margin: 0;
}

.domaine-prestations {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.domaine-prestations-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  border-bottom: 2px solid var(--text-dark);
  padding-bottom: 16px;
}

.domaine-prestations-head h3 {
  font-family: 'Saira Condensed', var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 32px;
  margin: 0;
}

.domaine-prestations-count {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  color: #4A5C6C;
  white-space: nowrap;
}

.prestations-grid {
  display: grid;
  gap: 16px;
}

.prestations-grid.prestations--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.prestations-grid.prestations--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.prestations-grid.prestations--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.prestation-card {
  background: #FFFFFF;
  padding: 24px 24px 28px;
  min-height: 168px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  border-bottom: 3px solid var(--blue-600);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}

.prestation-num {
  font-family: 'Saira Condensed', var(--font-display);
  font-weight: 700;
  font-size: 44px;
  line-height: 1;
  color: var(--blue-600);
}

.prestation-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.35;
  color: var(--text-dark);
}

@media (max-width: 900px) {
  .prestations-grid.prestations--6,
  .prestations-grid.prestations--5,
  .prestations-grid.prestations--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .prestations-grid.prestations--6,
  .prestations-grid.prestations--5,
  .prestations-grid.prestations--4 {
    grid-template-columns: 1fr;
  }
}

/* ---------- 3. Photo 2 plein cadre + appel à l'action ---------- */

.domaine-photo2 {
  position: relative;
  min-height: clamp(340px, 44vw, 720px);
  overflow: hidden;
  background: var(--navy-800);
  display: flex;
}

.domaine-photo2-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.domaine-photo2-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6,20,32,0) 40%, rgba(6,20,32,0.85) 100%);
}

.domaine-photo2-content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 32px;
  padding: 48px clamp(20px, 4vw, 56px);
}

.domaine-caption {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: rgba(6,20,32,0.75);
  padding: 10px 14px;
}

.domaine-caption-fig { color: var(--cyan-400); }

.domaine-cta2 {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--blue-600);
  color: #FFFFFF !important;
  font-family: 'Saira Condensed', var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 22px;
  letter-spacing: 0.06em;
  padding: 22px 32px 22px 30px;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  transition: background 150ms var(--ease), color 150ms var(--ease);
}

.domaine-cta2::after {
  content: '→';
  font-family: var(--font-mono);
  font-size: 18px;
}

.domaine-cta2:hover {
  background: var(--cyan-400);
  color: var(--navy-950) !important;
}

/* ---------- 4. Les autres domaines (réutilise le carrousel de la page d'accueil) ---------- */

.domaine-others {
  background: var(--navy-950);
  padding: 88px clamp(20px, 4vw, 56px) 104px;
}

.domaine-others-head {
  max-width: 640px;
  margin: 0 auto 48px;
  text-align: center;
}

.domaine-others-head .eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan-400);
  margin-bottom: 14px;
}

.domaine-others-head h2 {
  font-family: 'Saira Condensed', var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(36px, 3.8vw, 52px);
  color: #FFFFFF;
  margin: 0 0 20px;
}

.domaine-back-2 {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan-400) !important;
}

/* ---------- Focus clavier ---------- */

.domaine-back-v3:focus-visible,
.domaine-cta2:focus-visible,
.domaine-back-2:focus-visible {
  outline: 2px solid var(--cyan-400);
  outline-offset: 3px;
}