/* ============================================
   NautiPro — Components
   Buttons, cards, inputs, header, footer, drawer
   ============================================ */

/* ============================================
   Buttons
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 32px;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--t-base);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}
.btn:focus-visible { box-shadow: var(--shadow-ring); }

.btn--sm { padding: 12px 20px; font-size: 0.8125rem; }
.btn--lg { padding: 22px 40px; font-size: 1rem; }

/* R13 — body est désormais abyss : .btn--primary par défaut = ivory sur abyss */
.btn--primary {
  background: var(--ivory);
  color: var(--abyss);
  border-color: var(--ivory);
}
.btn--primary:hover {
  background: var(--pearl);
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow-brass);
}
.btn--primary:active { transform: translateY(0); }

/* Sur sections light explicites : variante abyss (inverse) */
.section--ivory .btn--primary,
.section--ivory-2 .btn--primary,
.section--pearl .btn--primary {
  background: var(--abyss);
  color: var(--ivory);
  border-color: var(--abyss);
}
.section--ivory .btn--primary:hover,
.section--ivory-2 .btn--primary:hover,
.section--pearl .btn--primary:hover { background: var(--midnight); }

/* R13 — body abyss : secondary = brass-soft par défaut */
.btn--secondary {
  background: transparent;
  color: var(--brass-soft);
  border-color: var(--brass-soft);
}
.btn--secondary:hover {
  background: rgba(193, 127, 89,.08);
  color: var(--ivory);
  border-color: var(--ivory);
}

.section--ivory .btn--secondary,
.section--ivory-2 .btn--secondary,
.section--pearl .btn--secondary {
  color: var(--brass-deep);
  border-color: var(--brass);
}
.section--ivory .btn--secondary:hover,
.section--ivory-2 .btn--secondary:hover,
.section--pearl .btn--secondary:hover {
  color: var(--brass-deep);
  border-color: var(--brass-deep);
}

/* R13 — body abyss : ghost = ivory par défaut */
.btn--ghost {
  padding: 8px 0;
  background: transparent;
  border: 0;
  color: var(--ivory);
  text-transform: uppercase;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  border-radius: 0;
}
.btn--ghost .arrow { display: inline-block; transition: transform var(--t-base); margin-left: 4px; }
.btn--ghost:hover { color: var(--brass-soft); }
.btn--ghost:hover .arrow { transform: translateX(4px); }
.section--ivory .btn--ghost,
.section--ivory-2 .btn--ghost,
.section--pearl .btn--ghost { color: var(--ink); }
.section--ivory .btn--ghost:hover,
.section--ivory-2 .btn--ghost:hover,
.section--pearl .btn--ghost:hover { color: var(--brass); }

.btn--urgency {
  background: var(--emergency);
  color: var(--ivory);
  border-color: var(--emergency);
  position: relative;
}
.btn--urgency:hover {
  background: var(--emergency-soft);
  border-color: var(--emergency-soft);
}
.btn--urgency.pulse {
  animation: btn-pulse 2s ease-in-out infinite;
}
@keyframes btn-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(168,52,30,.5); }
  50% { box-shadow: 0 0 0 12px rgba(168,52,30,0); }
}

/* CTA bandeau row */
.cta-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

/* ============================================
   Header
   ============================================ */
/* R13 — Header dark dominant (cannesa7 style) */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  height: 88px;
  background: rgba(5, 30, 54, 0.92);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--rule-dark);
  color: var(--ivory);
  transition: height var(--t-base), background var(--t-base);
}
.header .nav__item,
.header .header__logo,
.header .nav__lang { color: var(--ivory); }
.header .header__burger { color: var(--ivory); }

.header--transparent {
  background: transparent;
  border-bottom-color: transparent;
}
.header--transparent .header__inner { color: var(--ivory); }
.header--transparent .nav__item,
.header--transparent .header__logo,
.header--transparent .nav__lang { color: var(--ivory); }
.header--scrolled { height: 72px; }

.header__inner {
  height: 100%;
  max-width: var(--container-ultra);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.header__logo {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  color: var(--ivory);
  line-height: 1.05;
}
.header__logo small {
  display: block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  margin-top: 4px;
}

.nav {
  display: none;
  align-items: center;
  gap: 32px;
}
@media (min-width: 1024px) {
  .nav { display: flex; }
}

.nav__item {
  position: relative;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ivory);
  padding: 8px 0;
  transition: color var(--t-base);
}
.nav__item::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 0;
  background: var(--brass);
  transition: width var(--t-base);
}
.nav__item:hover { color: var(--brass); }
.nav__item:hover::after { width: 100%; }
.nav__item--active { color: var(--brass); }
.nav__item--active::after { width: 100%; }

.nav__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav__lang {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--slate-soft);
  text-transform: uppercase;
  transition: color var(--t-base);
}
.nav__lang:hover { color: var(--brass-soft); }
.nav__lang--active { color: var(--brass-soft); }
.nav__lang-sep { color: var(--slate-soft); font-size: 0.875rem; opacity: 0.6; }

.header__cta-desktop { display: none; }
@media (min-width: 1024px) { .header__cta-desktop { display: inline-flex; } }

/* M6 — CTA header desktop : variant brass-soft sobre (override .btn--urgency rouge)
   La rouge urgency reste réservée à : page urgences-24-7 + sticky mobile bottom + FAB mobile pulse */
.header__cta-desktop {
  color: var(--brass-soft);
  background: transparent;
  border-color: var(--brass-soft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}
.header__cta-desktop:hover {
  color: var(--ivory);
  background: var(--brass-soft);
  border-color: var(--brass-soft);
}
.header__cta-desktop svg { stroke: currentColor; }
.header--transparent .header__cta-desktop { color: var(--brass-soft); border-color: var(--brass-soft); }
.header--transparent .header__cta-desktop:hover { color: var(--abyss); background: var(--brass-soft); }

.header__burger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--ivory);
  background: transparent;
  border-radius: 0;
}
.header--transparent .header__burger { color: var(--ivory); }
@media (min-width: 1024px) { .header__burger { display: none; } }

/* ============================================
   Mobile drawer
   ============================================ */
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 420px;
  background: var(--abyss);
  color: var(--ivory);
  z-index: var(--z-drawer);
  padding: 32px;
  transform: translateX(100%);
  transition: transform var(--t-slow);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.drawer.is-open { transform: translateX(0); }
.drawer[aria-hidden="false"] { transform: translateX(0); }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 48px;
}
.drawer__head .header__logo { color: var(--ivory); }
.drawer__close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ivory);
}

.drawer__list {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.drawer__item {
  border-top: 1px solid rgba(226, 232, 240, 0.15);
}
.drawer__item:last-child { border-bottom: 1px solid rgba(226, 232, 240, 0.15); }
.drawer__link {
  display: block;
  padding: 18px 0;
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 400;
  font-variation-settings: "opsz" 72;
  color: var(--ivory);
  letter-spacing: -0.015em;
  transition: color var(--t-base), transform var(--t-base);
}
.drawer__link:hover { color: var(--brass-soft); transform: translateX(8px); }

.drawer__sublist {
  padding-bottom: 16px;
}
.drawer__sublink {
  display: block;
  padding: 8px 0 8px 16px;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: rgba(232, 237, 243, 0.75);
}
.drawer__sublink:hover { color: var(--brass-soft); }

.drawer__foot {
  margin-top: auto;
  padding-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-top: 1px solid rgba(226, 232, 240, 0.15);
}
.drawer__foot .nav__actions { justify-content: flex-start; gap: 16px; }
.drawer__foot .nav__lang { color: var(--ivory); }
.drawer__foot .nav__lang--active { color: var(--brass); }
.drawer__foot small {
  font-size: 0.75rem;
  color: rgba(232, 237, 243, 0.6);
  letter-spacing: 0.04em;
  line-height: 1.55;
}

.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 30, 54, 0.6);
  z-index: calc(var(--z-drawer) - 1);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base);
}
.drawer-overlay.is-open { opacity: 1; pointer-events: auto; }

body.drawer-open { overflow: hidden; }

/* ============================================
   Footer
   ============================================ */
.footer {
  background: var(--abyss);
  color: var(--ivory);
  padding: var(--s-10) 0 var(--s-7) 0;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
@media (min-width: 768px) {
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 56px; }
}

.footer__col h4 {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--brass-soft);
  margin-bottom: 20px;
}

.footer__brand {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: -0.015em;
  margin-bottom: 8px;
  color: var(--ivory);
}
.footer__tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.9375rem;
  color: var(--brass-soft);
  margin-bottom: 24px;
}
.footer__address {
  font-size: 0.875rem;
  color: rgba(232, 237, 243, 0.75);
  line-height: 1.7;
}

.footer__list { display: flex; flex-direction: column; gap: 10px; }
.footer__link {
  font-size: 0.9375rem;
  color: rgba(232, 237, 243, 0.85);
  transition: color var(--t-base);
}
.footer__link:hover { color: var(--brass-soft); }

.footer__phones { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.footer__phones a {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--ivory);
  letter-spacing: 0.04em;
}
.footer__phones a:hover { color: var(--brass-soft); }

.footer__app-badges { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.footer__app-badges a {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid rgba(226, 232, 240, 0.3);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ivory);
  border-radius: var(--r-sm);
  transition: all var(--t-base);
}
.footer__app-badges a:hover {
  border-color: var(--brass-soft);
  color: var(--brass-soft);
}

.footer__socials { display: flex; gap: 16px; margin-top: 20px; }
.footer__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--ivory);
  border: 1px solid rgba(226, 232, 240, 0.2);
  border-radius: var(--r-sm);
  transition: all var(--t-base);
}
.footer__socials a:hover {
  color: var(--brass-soft);
  border-color: var(--brass-soft);
}

.footer__bottom {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid rgba(30, 45, 68, 0.6);
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: rgba(232, 237, 243, 0.55);
  letter-spacing: 0.04em;
}
.footer__bottom-links { display: flex; gap: 24px; flex-wrap: wrap; }
.footer__bottom-links a {
  color: rgba(232, 237, 243, 0.65);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.6875rem;
}
.footer__bottom-links a:hover { color: var(--brass-soft); }

/* ============================================
   Cards
   ============================================ */
.card-service {
  position: relative;
  background: var(--pearl);
  border: 1px solid var(--rule);
  padding: 40px;
  border-radius: var(--r-sm);
  transition: all 350ms ease-out;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.card-service:hover {
  transform: translateY(-2px);
  border-color: var(--brass);
  box-shadow: var(--shadow-2);
}
.section--midnight .card-service,
.section--abyss .card-service {
  background: var(--midnight-2);
  border-color: var(--rule-dark);
  color: var(--ivory);
}
.card-service__icon {
  width: 40px;
  height: 40px;
  color: var(--brass);
  margin-bottom: 24px;
}
.section--midnight .card-service__icon,
.section--abyss .card-service__icon { color: var(--brass-soft); }
.card-service__number {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--brass);
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.card-service__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  font-variation-settings: "opsz" 72;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-bottom: 16px;
}
.card-service__title small {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 8px;
}
.card-service__rule {
  width: 24px;
  height: 1px;
  background: var(--brass);
  margin-bottom: 16px;
}
.card-service__body {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--slate);
  margin-bottom: 24px;
  flex: 1;
}
.section--midnight .card-service__body,
.section--abyss .card-service__body { color: rgba(232, 237, 243, 0.75); }
.card-service__link {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass-deep);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap var(--t-base);
}
.card-service__link:hover { gap: 14px; color: var(--brass-deep); }
.section--midnight .card-service__link,
.section--abyss .card-service__link { color: var(--brass-soft); }

/* Card testimonial */
.card-testimonial {
  position: relative;
  background: var(--ivory-2);
  padding: 56px 48px;
  border-radius: var(--r-sm);
}
.section--midnight .card-testimonial,
.section--abyss .card-testimonial {
  background: var(--midnight);
  color: var(--ivory);
}
.card-testimonial::before {
  content: "«";
  position: absolute;
  top: 16px;
  left: 24px;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 5rem;
  color: var(--brass);
  opacity: 0.3;
  line-height: 1;
}
.card-testimonial__quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.375rem;
  font-weight: 400;
  font-variation-settings: "opsz" 24;
  line-height: 1.55;
  margin-bottom: 32px;
  color: var(--ink);
}
.section--midnight .card-testimonial__quote,
.section--abyss .card-testimonial__quote { color: var(--ivory); }
.card-testimonial__author {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid var(--rule);
  padding-top: 20px;
}
.section--midnight .card-testimonial__author,
.section--abyss .card-testimonial__author { border-top-color: var(--rule-dark); }
.card-testimonial__name {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
}
.section--midnight .card-testimonial__name,
.section--abyss .card-testimonial__name { color: var(--brass-soft); }

@media (max-width: 767px) {
  .card-testimonial { padding: 40px 24px; }
  .card-testimonial__quote { font-size: 1.1875rem; }
}

/* Card port */
.card-port {
  position: relative;
  overflow: hidden;
  background: var(--midnight);
  color: var(--ivory);
  display: block;
  border-radius: var(--r-sm);
  transition: transform var(--t-base);
}
.card-port:hover { transform: translateY(-2px); }
.card-port__image {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}
.card-port__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms ease-out;
  filter: saturate(0.88) brightness(0.95) sepia(0.04);
}
.card-port:hover .card-port__image img { transform: scale(1.04); }
.card-port__body { padding: 28px 24px; }
.card-port__name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--ivory);
}
.card-port__sub {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-soft);
  margin-bottom: 12px;
}
.card-port__meta {
  font-size: 0.875rem;
  color: rgba(232, 237, 243, 0.75);
  line-height: 1.6;
}

/* Card team (placeholder) */
.card-team {
  background: var(--ivory-2);
  padding: 24px;
  border-radius: var(--r-sm);
  text-align: left;
  border: 1px solid var(--rule);
}
.card-team__photo {
  aspect-ratio: 1/1;
  background: linear-gradient(180deg, var(--slate) 0%, var(--slate-2) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  border-radius: var(--r-sm);
  filter: grayscale(100%);
  transition: filter var(--t-slow);
}
.card-team:hover .card-team__photo { filter: grayscale(20%); }
.card-team__photo svg { color: rgba(232, 237, 243, 0.5); }
.card-team__name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 6px;
}
.card-team__role {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 12px;
}
.card-team__bio {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--slate);
}

/* Card yacht (flotte) */
.card-yacht {
  background: var(--midnight);
  color: var(--ivory);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.card-yacht__image {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.card-yacht__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.88) brightness(0.95);
  transition: transform 600ms ease-out;
}
.card-yacht:hover .card-yacht__image img { transform: scale(1.04); }
.card-yacht__body { padding: 20px 24px; }
.card-yacht__name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--ivory);
}
.card-yacht__meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--brass-soft);
}

/* ============================================
   Inputs & forms
   ============================================ */
.field { display: flex; flex-direction: column; gap: 8px; }
.field-label {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
}
.field-label .req { color: var(--brass-deep); }
/* sur fond sombre, la teinte claire du copper passe le seuil */
.section--abyss .field-label .req,
.section--midnight .field-label .req,
.section--abyss-deep .field-label .req { color: var(--brass-soft); }
.input, .select, .textarea {
  width: 100%;
  padding: 16px 18px;
  font-family: var(--font-sans);
  font-size: 1rem;
  background: var(--pearl);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  color: var(--ink);
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--slate-2); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(193, 127, 89,.15);
}
.textarea { min-height: 140px; resize: vertical; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 640px) {
  .form-grid { grid-template-columns: repeat(2, 1fr); }
  .form-grid .field--full { grid-column: 1 / -1; }
}

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--slate);
}
.checkbox-row input[type="checkbox"] {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: var(--abyss);
}
.checkbox-row a { color: var(--brass); text-decoration: underline; text-underline-offset: 4px; }

/* ============================================
   FAQ accordion (HTML native details)
   ============================================ */
.faq-item {
  border-bottom: 1px solid var(--rule);
  padding: 0;
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1.5rem;
  color: var(--brass);
  transition: transform var(--t-base);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item__body {
  padding: 0 0 24px 0;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--slate);
  max-width: 720px;
}

/* ============================================
   FAB urgence (mobile)
   ============================================ */
.fab-emergency {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: var(--z-toast);
  width: 56px;
  height: 56px;
  background: var(--emergency);
  color: var(--ivory);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(168,52,30,0.35);
  animation: fab-pulse 2.5s ease-in-out infinite;
  transition: transform var(--t-base);
}
.fab-emergency:hover { transform: scale(1.08); }
@keyframes fab-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(168,52,30,.4), 0 8px 24px rgba(168,52,30,0.35); }
  50% { box-shadow: 0 0 0 14px rgba(168,52,30,0), 0 8px 24px rgba(168,52,30,0.35); }
}
@media (min-width: 1024px) { .fab-emergency { display: none; } }

/* ============================================
   Custom cursor (hero homepage only)
   ============================================ */
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 72px;
  height: 72px;
  border: 1px solid var(--brass);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  transition: opacity 250ms ease, transform 200ms ease;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivory);
  background: rgba(5, 30, 54, 0.35);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  mix-blend-mode: normal;
  box-shadow: 0 0 0 4px rgba(232, 237, 243, 0.06);
}
.custom-cursor.is-active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
@media (hover: none) and (pointer: coarse) {
  .custom-cursor { display: none !important; }
}

/* ============================================
   Premium form states (devis confidentiel)
   ============================================ */

/* Group of related fields (sub-fieldset) */
.field-group {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 24px;
  background: rgba(226, 232, 240, 0.18);
  border-left: 2px solid var(--brass);
  border-radius: var(--r-sm);
}
.field-group__legend {
  grid-column: 1 / -1;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 4px;
}
@media (min-width: 640px) {
  .field-group { grid-template-columns: repeat(2, 1fr); }
  .field-group .field--full { grid-column: 1 / -1; }
}

/* Field error / success */
.field--error .input,
.field--error .select,
.field--error .textarea {
  border-color: var(--emergency);
  box-shadow: 0 0 0 3px rgba(168, 52, 30, 0.10);
}
.field__error {
  display: none;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--emergency);
  opacity: 0.9;
  margin-top: 2px;
}
.field--error .field__error { display: block; }

.field--valid .input,
.field--valid .select,
.field--valid .textarea {
  border-color: var(--success);
}

/* Label focused */
.field.is-focus .field-label { color: var(--brass); }

/* Honeypot */
.field--honeypot {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden;
}

/* Engagements list under the form */
.form-engagements {
  margin-top: 24px;
  padding: 20px 24px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-engagements li {
  list-style: none;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--slate);
  position: relative;
  padding-left: 18px;
}
.form-engagements li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--brass);
  font-style: normal;
}

/* Submit button states */
.btn[aria-disabled="true"],
.btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}
.btn__spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: -2px;
  animation: spin 0.7s linear infinite;
}
.btn.is-submitting .btn__spinner { display: inline-block; }
.btn.is-submitting .btn__label { opacity: 0.7; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Form success block (replaces the form after submit) */
.form-success {
  background: rgba(59, 107, 92, 0.06);
  border-left: 2px solid var(--success);
  padding: 40px 36px;
  border-radius: var(--r-sm);
  animation: form-success-in 400ms cubic-bezier(.16,1,.3,1);
}
.form-success__eyebrow {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--success);
  margin-bottom: 16px;
}
.form-success__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 16px;
}
.form-success__body {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--slate);
  margin-bottom: 24px;
}
.form-success__sign {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.9375rem;
  color: var(--brass-deep);
}
@keyframes form-success-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Form network error inline */
.form-error {
  display: none;
  margin: 16px 0 8px;
  padding: 14px 16px;
  background: rgba(168, 52, 30, 0.06);
  border-left: 2px solid var(--emergency);
  border-radius: var(--r-sm);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink);
}
.form-error.is-visible { display: block; }

/* Toast (slide-in bottom) */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 24px);
  background: var(--abyss);
  color: var(--ivory);
  padding: 14px 22px;
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  box-shadow: var(--shadow-3);
  opacity: 0;
  pointer-events: none;
  z-index: var(--z-toast);
  transition: opacity 400ms ease-out, transform 400ms cubic-bezier(.16,1,.3,1);
}
.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ============================================
   Emergency — Process 3 steps + Express form
   ============================================ */
.process-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  counter-reset: step;
}
@media (min-width: 768px) {
  .process-steps { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
.process-step {
  position: relative;
  padding: 32px 28px 28px;
  background: var(--midnight);
  border-radius: var(--r-sm);
  border-top: 2px solid var(--emergency);
  color: var(--ivory);
}
.process-step__num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--brass-soft);
  margin-bottom: 14px;
}
.process-step__icon {
  width: 28px;
  height: 28px;
  color: var(--emergency-soft);
  margin-bottom: 18px;
  stroke: currentColor;
}
.process-step__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--ivory);
  margin-bottom: 10px;
}
.process-step__body {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: rgba(232, 237, 243, 0.78);
}

/* Express form (callback) — on dark midnight section */
.express-form-wrap {
  max-width: 720px;
  margin: 0 auto;
  background: var(--midnight-2);
  border-radius: var(--r-sm);
  border-left: 2px solid var(--emergency);
  padding: 40px 36px;
}
.express-form-wrap .field-label { color: var(--brass-soft); }
.express-form-wrap .input,
.express-form-wrap .select {
  background: rgba(232, 237, 243, 0.06);
  border-color: rgba(232, 237, 243, 0.18);
  color: var(--ivory);
}
.express-form-wrap .input::placeholder { color: rgba(232, 237, 243, 0.4); }
.express-form-wrap .input:focus,
.express-form-wrap .select:focus {
  border-color: var(--brass-soft);
  box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.18);
}
.express-form-wrap .field-group {
  background: rgba(232, 237, 243, 0.03);
  border-left-color: var(--emergency);
}
.express-form-wrap .form-success {
  background: rgba(212, 165, 116, 0.06);
  border-left-color: var(--brass-soft);
}
.express-form-wrap .form-success__title { color: var(--ivory); }
.express-form-wrap .form-success__body { color: rgba(232, 237, 243,0.78); }
.express-form-wrap .form-success__sign { color: var(--brass-soft); }
.express-form-warn {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgba(232, 237, 243, 0.72);
  text-align: center;
  margin-bottom: 28px;
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}
.express-form-warn strong { color: var(--emergency-soft); font-style: normal; font-weight: 500; }

/* Engagements urgences (chiffres) */
.urgency-commitments {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 760px;
  margin: 0 auto;
}
.urgency-commitments li {
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink);
}
.urgency-commitments li:last-child { border-bottom: none; }
.urgency-commitments li strong {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--brass);
  font-weight: 500;
  min-width: 56px;
  flex-shrink: 0;
}

/* ============================================
   SKILL-BLOCK — alternated photo/text rows
   Adapté du pattern CANNESA7 Round 11 (2026-05-27)
   ============================================ */
.skill-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
  padding-block: clamp(4rem, 8vw, 7rem);
  border-bottom: 1px solid var(--rule);
}
.section--midnight .skill-block,
.section--abyss .skill-block { border-bottom-color: var(--rule-dark); }
.skill-block:last-child { border-bottom: none; }

.skill-block__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--midnight);
  position: relative;
}
.skill-block__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.88);
  transition: filter 1200ms cubic-bezier(.16,1,.3,1),
              transform 1200ms cubic-bezier(.16,1,.3,1);
}
.skill-block:hover .skill-block__media img {
  filter: saturate(1);
  transform: scale(1.02);
}

.skill-block__body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.skill-block__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 0.95rem;
  color: var(--brass-deep);
  letter-spacing: 0.06em;
}
.section--midnight .skill-block__num,
.section--abyss .skill-block__num { color: var(--brass-soft); }

.skill-block__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0;
}
.section--midnight .skill-block__title,
.section--abyss .skill-block__title { color: var(--ivory); }

.skill-block__lead {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 1.18rem;
  line-height: 1.55;
  color: var(--ink);
  opacity: 0.92;
  max-width: 44ch;
  margin: 0;
}
.section--midnight .skill-block__lead,
.section--abyss .skill-block__lead { color: var(--ivory); opacity: 0.92; }

.skill-block__detail {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--slate);
  max-width: 52ch;
  margin: 0;
}
.section--midnight .skill-block__detail,
.section--abyss .skill-block__detail { color: rgba(232, 237, 243,0.82); }

.skill-block__detail strong {
  font-weight: 500;
  display: block;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin-top: 1.4rem;
  margin-bottom: 0.5rem;
}
.section--midnight .skill-block__detail strong,
.section--abyss .skill-block__detail strong { color: var(--brass-soft); }

.skill-block__quote {
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
}
.section--midnight .skill-block__quote,
.section--abyss .skill-block__quote { border-top-color: var(--rule-dark); }

.skill-block__quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}
.section--midnight .skill-block__quote p,
.section--abyss .skill-block__quote p { color: var(--ivory); }

.skill-block__quote cite {
  display: block;
  margin-top: 0.85rem;
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--slate-2);
}
.section--midnight .skill-block__quote cite,
.section--abyss .skill-block__quote cite { color: var(--brass-soft); opacity: 0.85; }

.skill-block__cta {
  margin-top: 0.75rem;
}

/* Hero secondary variant (smaller, image-only) */
.hero--sub {
  height: clamp(420px, 60vh, 640px);
  min-height: 0;
}

/* Tablet+ : 2 colonnes alternées (impair: image gauche / pair: image droite) */
@media (min-width: 768px) {
  .skill-block {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
  .skill-block:nth-child(even) .skill-block__media { order: 2; }
}

/* Desktop : respiration verticale + horizontale renforcées */
@media (min-width: 1024px) {
  .skill-block {
    gap: 6rem;
    padding-block: clamp(6rem, 10vw, 9rem);
  }
}

/* Hover-only refinements */
@media (hover: none) {
  .skill-block:hover .skill-block__media img {
    transform: none;
    filter: saturate(0.88);
  }
}

/* ============================================
   R13 — Cards & components sur fond abyss dominant
   Le body est désormais abyss : les cards "neutres"
   doivent ressortir sur fond dark (élévation abyss-light).
   ============================================ */

/* Card service — défaut sur abyss */
.card-service {
  background: var(--abyss-light);
  border-color: var(--rule-dark);
  color: var(--ivory);
}
.card-service:hover {
  border-color: var(--brass-soft);
}
.card-service__icon { color: var(--brass-soft); }
.card-service__number { color: var(--brass-soft); }
.card-service__body { color: var(--ivory-muted); }
.card-service__link { color: var(--brass-soft); }
.card-service__link:hover { color: var(--ivory); }
.card-service__title small { color: var(--brass-soft); }
.card-service__rule { background: var(--brass-soft); }

/* Sur section explicite ivory : on rebascule */
.section--ivory .card-service,
.section--ivory-2 .card-service,
.section--pearl .card-service {
  background: var(--pearl);
  border-color: var(--rule);
  color: var(--ink);
}
.section--ivory .card-service:hover,
.section--ivory-2 .card-service:hover,
.section--pearl .card-service:hover {
  border-color: var(--brass);
}
.section--ivory .card-service__icon,
.section--ivory-2 .card-service__icon,
.section--pearl .card-service__icon { color: var(--brass); }
.section--ivory .card-service__number,
.section--ivory-2 .card-service__number,
.section--pearl .card-service__number { color: var(--brass); }
.section--ivory .card-service__body,
.section--ivory-2 .card-service__body,
.section--pearl .card-service__body { color: var(--slate); }
.section--ivory .card-service__link,
.section--ivory-2 .card-service__link,
.section--pearl .card-service__link { color: var(--brass); }
.section--ivory .card-service__link:hover,
.section--ivory-2 .card-service__link:hover,
.section--pearl .card-service__link:hover { color: var(--brass-deep); }
.section--ivory .card-service__title small,
.section--ivory-2 .card-service__title small,
.section--pearl .card-service__title small { color: var(--brass); }
.section--ivory .card-service__rule,
.section--ivory-2 .card-service__rule,
.section--pearl .card-service__rule { background: var(--brass); }

/* Card testimonial — default abyss */
.card-testimonial {
  background: var(--midnight);
  color: var(--ivory);
}
.card-testimonial__quote { color: var(--ivory); }
.card-testimonial__name { color: var(--brass-soft); }
.card-testimonial__author { border-top-color: var(--rule-dark); }

.section--ivory .card-testimonial,
.section--ivory-2 .card-testimonial,
.section--pearl .card-testimonial {
  background: var(--ivory-2);
  color: var(--ink);
}
.section--ivory .card-testimonial__quote,
.section--ivory-2 .card-testimonial__quote,
.section--pearl .card-testimonial__quote { color: var(--ink); }
.section--ivory .card-testimonial__name,
.section--ivory-2 .card-testimonial__name,
.section--pearl .card-testimonial__name { color: var(--slate); }
.section--ivory .card-testimonial__author,
.section--ivory-2 .card-testimonial__author,
.section--pearl .card-testimonial__author { border-top-color: var(--rule); }

/* Card team — defaut abyss-light */
.card-team {
  background: var(--abyss-light);
  border-color: var(--rule-dark);
  color: var(--ivory);
}
.card-team__bio { color: var(--ivory-muted); }
.card-team__role { color: var(--brass-soft); }

.section--ivory .card-team,
.section--ivory-2 .card-team,
.section--pearl .card-team {
  background: var(--ivory-2);
  border-color: var(--rule);
  color: var(--ink);
}
.section--ivory .card-team__bio,
.section--ivory-2 .card-team__bio,
.section--pearl .card-team__bio { color: var(--slate); }
.section--ivory .card-team__role,
.section--ivory-2 .card-team__role,
.section--pearl .card-team__role { color: var(--brass); }

/* Skill-block — par défaut sur abyss : adapte le texte/borders */
.skill-block {
  border-bottom-color: var(--rule-dark);
}
.skill-block__title { color: var(--ivory); }
.skill-block__lead { color: var(--ivory); opacity: 0.92; }
.skill-block__detail { color: var(--ivory-muted); }
.skill-block__detail strong { color: var(--brass-soft); }
.skill-block__quote { border-top-color: var(--rule-dark); }
.skill-block__quote p { color: var(--ivory); }
.skill-block__quote cite { color: var(--brass-soft); opacity: 0.85; }
.skill-block__num { color: var(--brass-soft); }

.section--ivory .skill-block,
.section--ivory-2 .skill-block,
.section--pearl .skill-block { border-bottom-color: var(--rule); }
.section--ivory .skill-block__title,
.section--ivory-2 .skill-block__title,
.section--pearl .skill-block__title { color: var(--ink); }
.section--ivory .skill-block__lead,
.section--ivory-2 .skill-block__lead,
.section--pearl .skill-block__lead { color: var(--ink); }
.section--ivory .skill-block__detail,
.section--ivory-2 .skill-block__detail,
.section--pearl .skill-block__detail { color: var(--slate); }
.section--ivory .skill-block__detail strong,
.section--ivory-2 .skill-block__detail strong,
.section--pearl .skill-block__detail strong { color: var(--brass-deep); }
.section--ivory .skill-block__quote,
.section--ivory-2 .skill-block__quote,
.section--pearl .skill-block__quote { border-top-color: var(--rule); }
.section--ivory .skill-block__quote p,
.section--ivory-2 .skill-block__quote p,
.section--pearl .skill-block__quote p { color: var(--ink); }
.section--ivory .skill-block__quote cite,
.section--ivory-2 .skill-block__quote cite,
.section--pearl .skill-block__quote cite { color: var(--slate-2); }
.section--ivory .skill-block__num,
.section--ivory-2 .skill-block__num,
.section--pearl .skill-block__num { color: var(--brass-deep); }

/* Card-port — déjà sur fond midnight, OK. Petite atténuation filtre image sur abyss : */
.card-port { background: var(--abyss-light); }

/* Inputs/forms — défaut sur abyss */
.input, .select, .textarea {
  background: rgba(232, 237, 243, 0.05);
  border-color: rgba(232, 237, 243, 0.18);
  color: var(--ivory);
}
.input::placeholder, .textarea::placeholder { color: rgba(232, 237, 243, 0.4); }
.input:hover, .select:hover, .textarea:hover { border-color: rgba(232, 237, 243, 0.32); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--brass-soft);
  box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.18);
}
.field-label { color: var(--brass-soft); }
.checkbox-row { color: var(--ivory-muted); }

.section--ivory .input, .section--ivory .select, .section--ivory .textarea,
.section--ivory-2 .input, .section--ivory-2 .select, .section--ivory-2 .textarea,
.section--pearl .input, .section--pearl .select, .section--pearl .textarea {
  background: var(--pearl);
  border-color: var(--rule);
  color: var(--ink);
}
.section--ivory .input::placeholder, .section--ivory .textarea::placeholder,
.section--ivory-2 .input::placeholder, .section--ivory-2 .textarea::placeholder,
.section--pearl .input::placeholder, .section--pearl .textarea::placeholder { color: var(--slate-2); }
.section--ivory .field-label,
.section--ivory-2 .field-label,
.section--pearl .field-label { color: var(--slate); }
.section--ivory .checkbox-row,
.section--ivory-2 .checkbox-row,
.section--pearl .checkbox-row { color: var(--slate); }

/* FAQ — défaut sur abyss */
.faq-item { border-bottom-color: var(--rule-dark); }
.faq-item summary { color: var(--ivory); }
.faq-item__body { color: var(--ivory-muted); }

.section--ivory .faq-item,
.section--ivory-2 .faq-item,
.section--pearl .faq-item { border-bottom-color: var(--rule); }
.section--ivory .faq-item summary,
.section--ivory-2 .faq-item summary,
.section--pearl .faq-item summary { color: var(--ink); }
.section--ivory .faq-item__body,
.section--ivory-2 .faq-item__body,
.section--pearl .faq-item__body { color: var(--slate); }

/* Engagement table — défaut abyss */
.engagement-table th, .engagement-table td { border-bottom-color: var(--rule-dark); }
.engagement-table th { color: var(--brass-soft); }
.engagement-table td { color: var(--ivory-muted); }
.engagement-table tbody tr:hover { background: rgba(193, 127, 89,0.06); }

.section--ivory .engagement-table th, .section--ivory .engagement-table td,
.section--ivory-2 .engagement-table th, .section--ivory-2 .engagement-table td,
.section--pearl .engagement-table th, .section--pearl .engagement-table td {
  border-bottom-color: var(--rule);
}
.section--ivory .engagement-table th,
.section--ivory-2 .engagement-table th,
.section--pearl .engagement-table th { color: var(--brass); }
.section--ivory .engagement-table td,
.section--ivory-2 .engagement-table td,
.section--pearl .engagement-table td { color: var(--slate); }

/* Urgency commitments — défaut abyss */
.urgency-commitments li { border-bottom-color: var(--rule-dark); color: var(--ivory-muted); }
.urgency-commitments li strong { color: var(--brass-soft); }
.section--ivory .urgency-commitments li,
.section--ivory-2 .urgency-commitments li,
.section--pearl .urgency-commitments li { border-bottom-color: var(--rule); color: var(--ink); }
.section--ivory .urgency-commitments li strong,
.section--ivory-2 .urgency-commitments li strong,
.section--pearl .urgency-commitments li strong { color: var(--brass); }

/* ============================================
   R13 — NAV DROPDOWN (Services menu)
   Desktop hover · ARIA correct · keyboard accessible
   ============================================ */
.nav__dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav__item--has-dropdown {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nav__caret {
  display: inline-block;
  transition: transform 220ms cubic-bezier(.16,1,.3,1);
  flex-shrink: 0;
  opacity: 0.85;
}
.nav__dropdown:hover .nav__caret,
.nav__dropdown:focus-within .nav__caret {
  transform: rotate(180deg);
  opacity: 1;
}

.nav__submenu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 320px;
  background: var(--abyss);
  border: 1px solid var(--rule-dark);
  border-top: 1px solid var(--brass-soft);
  padding: 18px 0;
  margin: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 220ms ease, transform 220ms cubic-bezier(.16,1,.3,1);
  z-index: var(--z-dropdown);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}

.nav__dropdown:hover .nav__submenu,
.nav__dropdown:focus-within .nav__submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Tiny bridge so the dropdown doesn't close when crossing the gap */
.nav__dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 18px;
  background: transparent;
}

.nav__submenu li { margin: 0; padding: 0; }

.nav__subitem {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 11px 28px;
  color: var(--ivory);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  transition: background 150ms ease, color 150ms ease, padding 200ms ease;
  white-space: nowrap;
}

.nav__subitem:hover,
.nav__subitem:focus-visible {
  background: var(--abyss-light);
  color: var(--brass-soft);
  padding-left: 32px;
  outline: none;
}

.nav__subitem-num {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--brass-soft);
  opacity: 0.7;
  letter-spacing: 0.12em;
  min-width: 22px;
}
.nav__subitem:hover .nav__subitem-num,
.nav__subitem:focus-visible .nav__subitem-num {
  opacity: 1;
}

.nav__subitem-label { flex: 1; }

/* Hide dropdown system below desktop — drawer handles mobile */
@media (max-width: 1023px) {
  .nav__submenu { display: none; }
}

/* ============================================
   R13 — Drawer mobile : expand inline pour Services
   ============================================ */
.drawer__expand {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 400;
  font-variation-settings: "opsz" 72;
  color: var(--ivory);
  letter-spacing: -0.015em;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  transition: color var(--t-base);
}
.drawer__expand:hover { color: var(--brass-soft); }
.drawer__caret {
  display: inline-block;
  flex-shrink: 0;
  transition: transform 220ms cubic-bezier(.16,1,.3,1);
  color: var(--brass-soft);
  opacity: 0.85;
}
.drawer__expand[aria-expanded="true"] .drawer__caret {
  transform: rotate(180deg);
  opacity: 1;
}

.drawer__sublist {
  padding: 4px 0 18px 0;
  margin: 0;
  list-style: none;
}
.drawer__sublist[hidden] { display: none; }

.drawer__sublink {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 10px 0 10px 18px;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(232, 237, 243, 0.78);
  transition: color var(--t-base), padding var(--t-base);
}
.drawer__sublink:hover {
  color: var(--brass-soft);
  padding-left: 24px;
}
.drawer__sublink-num {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--brass-soft);
  letter-spacing: 0.1em;
  opacity: 0.7;
  min-width: 22px;
}

/* ============================================================
   R14 — Vidéo contextuelle dans sections "Ce que recouvre"
   Pattern split media + content, alternance gauche/droite
   ============================================================ */
.service-context {
  /* same vertical spacing as default section */
}
.service-context__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
}
.service-context__media {
  margin: 0;
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  border: 1px solid var(--rule-brass-dark);
  background: var(--midnight);
  box-shadow: 0 24px 60px -28px rgba(5, 30, 54, 0.45);
}
.service-context__media::after {
  /* subtle inner brass hairline for editorial feel */
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(193, 127, 89, 0.16);
  pointer-events: none;
  z-index: 2;
}
.service-context__media video,
.service-context__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.95) contrast(1.02);
  display: block;
}
.service-context__media-caption {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: var(--ivory);
  text-transform: uppercase;
  background: rgba(5, 30, 54, 0.55);
  padding: 6px 10px;
  border-left: 2px solid var(--brass);
}
.service-context__content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.service-context__content .manifesto {
  margin-top: 8px;
}
.service-context__content .manifesto__body p {
  /* slightly tighter when next to media */
  max-width: 56ch;
}
@media (min-width: 768px) {
  .service-context__inner {
    grid-template-columns: 5fr 7fr;
    gap: clamp(40px, 5vw, 72px);
  }
  .service-context__media {
    aspect-ratio: 4/5;
  }
  .service-context__inner--media-left {
    grid-template-columns: 5fr 7fr;
  }
  .service-context__inner--media-left .service-context__media {
    order: -1;
  }
  .service-context__inner--media-right {
    grid-template-columns: 7fr 5fr;
  }
  .service-context__inner--media-right .service-context__media {
    order: 2;
  }
}
@media (min-width: 1024px) {
  .service-context__inner {
    gap: 80px;
  }
}

/* Variant midnight/abyss background — keeps editorial dark mood */
.section--midnight .service-context__media,
.section--abyss .service-context__media {
  border-color: var(--rule-brass-dark);
  background: var(--abyss-deep);
}
.section--ivory .service-context__media,
.section--ivory-2 .service-context__media,
.section--pearl .service-context__media {
  border-color: var(--rule);
}

/* Process section with side video (urgences) */
.process-with-media {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}
@media (min-width: 1024px) {
  .process-with-media {
    grid-template-columns: 5fr 7fr;
    gap: 64px;
  }
  .process-with-media--media-left .process-with-media__media {
    order: -1;
  }
}
.process-with-media__media {
  margin: 0;
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  border: 1px solid var(--rule-brass-dark);
  background: var(--abyss-deep);
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.6);
}
.process-with-media__media video,
.process-with-media__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.05) brightness(0.85);
}
.process-with-media__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(5, 30, 54, 0.4) 100%);
  pointer-events: none;
}

/* prefers-reduced-motion : hide video, show poster only via <img> fallback */
@media (prefers-reduced-motion: reduce) {
  .service-context__media video,
  .process-with-media__media video {
    display: none;
  }
  .service-context__media img,
  .process-with-media__media img {
    display: block !important;
  }
}

/* When process-steps is nested inside process-with-media (urgences, gestion-yacht)
   keep them as a vertical stack so they don't fight the 2-col parent grid */
@media (min-width: 1024px) {
  .process-with-media .process-steps {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .process-with-media .process-step {
    padding: 18px 0;
    border-bottom: 1px solid var(--rule-brass-dark);
  }
  .process-with-media .process-step:last-child {
    border-bottom: none;
  }
}

/* ============================================================
   Formulaire raccourci — bloc dépliable « détails yacht »
   (sprint enhancement 2026-06-04, point 7)
   ============================================================ */
.form-details {
  border: 1px solid color-mix(in srgb, var(--brass) 28%, transparent);
  border-radius: 4px;
  padding: 0 18px;
  background: color-mix(in srgb, var(--brass) 4%, transparent);
}
.form-details > summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 0;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--brass-deep);
  display: flex;
  align-items: center;
  gap: 10px;
}
.form-details > summary::-webkit-details-marker { display: none; }
.form-details > summary::before {
  content: "+";
  font-size: 1.1em;
  line-height: 1;
  color: var(--brass);
  transition: transform 200ms ease;
}
.form-details[open] > summary::before { content: "−"; }
.form-details__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 4px 0 20px;
}
@media (min-width: 640px) {
  .form-details__grid { grid-template-columns: repeat(2, 1fr); }
}

/* Garde-fou mobile : un libellé long ne doit jamais provoquer de scroll horizontal */
@media (max-width: 480px) {
  .btn { white-space: normal; text-align: center; max-width: 100%; }
}

/* Garde-fou mobile : un tableau large défile dans son propre cadre, jamais la page */
@media (max-width: 640px) {
  table { display: block; max-width: 100%; overflow-x: auto; }
}

/* Bouton WhatsApp — vert de marque, conservé pour la reconnaissance */
.btn--whatsapp {
  background: #25D366;
  color: #06301A;
  border-color: #25D366;
  font-weight: 600;
}
.btn--whatsapp:hover { background: #1EBE5A; border-color: #1EBE5A; color: #04240F; }
.btn--whatsapp svg { width: 18px; height: 18px; flex: 0 0 18px; }
.section--abyss .btn--whatsapp,
.section--midnight .btn--whatsapp,
.hero-emergency .btn--whatsapp { color: #06301A; }

/* Urgence : appel + WhatsApp de même gabarit */
.cta-row .btn--urgency, .cta-row .btn--whatsapp { min-width: 232px; justify-content: center; }
@media (max-width: 520px) { .cta-row .btn--urgency, .cta-row .btn--whatsapp { width: 100%; } }

/* Hero à voile clair : le bouton principal doit être plein navy, sinon il disparaît */
.hero--fullscreen .btn--primary,
.hero--fullscreen .btn--primary:visited {
  background: var(--navy-500);
  color: #FFFFFF;
  border-color: var(--navy-500);
}
.hero--fullscreen .btn--primary:hover { background: var(--abyss); border-color: var(--abyss); color: #FFFFFF; }
.hero--fullscreen .btn--secondary { color: var(--brass-deep); border-color: var(--brass-deep); }
.hero--fullscreen .btn--secondary:hover { background: rgba(152,92,54,.08); color: var(--abyss); border-color: var(--abyss); }

/* Header fixe de 88px : les ancres ne doivent pas passer dessous */
:root { scroll-padding-top: 100px; }
#main, [id]:target { scroll-margin-top: 100px; }

/* ═══ Logotype AS Assistance ═══ */
.header__logo { gap: 0; }
.logo__row { display: flex; align-items: center; gap: 12px; line-height: 1; }
.logo__as {
  font-family: var(--font-display); font-weight: 500; font-size: 1.75rem; letter-spacing: .02em;
  color: var(--brass-soft); padding-right: 12px; border-right: 1px solid rgba(212,165,116,.55); line-height: 1;
}
.logo__word {
  font-family: var(--font-sans); font-weight: 500; font-size: .8125rem;
  letter-spacing: .34em; text-transform: uppercase; color: var(--ivory);
}
.header__logo small { margin-top: 7px; letter-spacing: .26em; color: var(--ivory-muted, rgba(232,237,243,.72)); }
@media (max-width: 480px) { .logo__as { font-size: 1.5rem; } .logo__word { font-size: .72rem; letter-spacing: .28em; } }

/* mobile : le logotype + FR·EN·IT + menu doivent tenir sur 375 px */
@media (max-width: 480px) {
  .header__inner { gap: 10px; }
  .header__logo small { letter-spacing: .2em; font-size: .56rem; }
  .logo__row { gap: 9px; } .logo__as { padding-right: 9px; }
  .nav__actions { gap: 8px; }
  .nav__lang-sep { display: none; }
  .nav__actions .nav__lang { padding: 0 4px; }
}