/* ================================================================
   eMB Clean — clean.css  v3
   Hero = slider fondu (image + voile + badge + titre + CTA + barre)
   S'intègre SOUS la navbar .emb-topbar du layout (position:sticky,
   donc déjà dans le flux → AUCUN padding-top ici, sinon bande noire).
   Accent module : turquoise #1DD1A1
   ================================================================ */

*, *::before, *::after { box-sizing: border-box; }

/* ────────────────────────────────────────────────────────────────
   Accent + fond de page — portée : pages Clean uniquement.
   clean.css n'est chargé que sur /clean, et via @stack('styles')
   il passe APRÈS le <style>body{--accent:#34A8E0}</style> du layout :
   même spécificité, déclaré plus tard → il gagne. Aucun autre module
   n'est affecté.

   background sur body : indispensable. .emb-foot a un margin-top:60px
   qui laissait apparaître le blanc du body entre le contenu sombre et
   le footer sombre — une bande blanche en bas de page.
   ──────────────────────────────────────────────────────────────── */
body {
  --accent: #1DD1A1;
  --accent-d: #16B88C;
  background: #070A11;
}

/* Accent du module pour la tabbar mobile (.emb-clean) */
.emb-clean { --accent: #1DD1A1; --accent-d: #16B88C; --accent-soft: #E1F5EE; }

/* Le footer partagé est déjà sombre (#0B0E13) — on le colle au contenu */
.cln + .emb-foot { margin-top: 0; }

.cln {
  background: #070A11;
  color: #C7CEDE;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}
.cln a { text-decoration: none; }
.cln-wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px; }


/* ══════════════════════════════════════════════════
   ★ HERO — SLIDER FONDU ★
   ══════════════════════════════════════════════════ */
.cln-hero {
  position: relative;
  min-height: clamp(560px, 74vh, 680px);
  display: flex;
  overflow: hidden;
}

/* ── Couches images ── */
.cln-slides { position: absolute; inset: 0; }

.cln-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.5s cubic-bezier(.4, 0, .2, 1);
}
.cln-slide.on { opacity: 1; }

/* Ken Burns : l'image se dézoome doucement pendant l'affichage */
.cln-slide .bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.1);
  transition: transform 8s ease-out;
}
.cln-slide.on .bg { transform: scale(1); }

/* Voile turquoise — assure la lisibilité du texte sur toute image */
.cln-slide .tint {
  position: absolute; inset: 0;
  background: linear-gradient(115deg,
    rgba(4, 52, 44, .88) 0%,
    rgba(7, 10, 17, .55) 42%,
    rgba(7, 10, 17, .30) 68%,
    rgba(7, 10, 17, .96) 100%);
}

/* Fondu haut (sous la navbar) + bas (vers le formulaire) */
.cln-scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(7, 10, 17, .55) 0%,
    transparent 18%,
    transparent 50%,
    rgba(7, 10, 17, .98) 100%);
}

/* ── Contenu ── */
.cln-hero-in {
  position: relative; z-index: 3;
  align-self: flex-end;
  width: 100%;
  padding-bottom: 122px;   /* dégage la barre de services + les dots */
}

/* Badge (change) */
.cln-badges { position: relative; height: 32px; margin-bottom: 16px; }
.cln-badge {
  position: absolute; bottom: 0; left: 0;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(29, 209, 161, .16);
  border: 1px solid rgba(29, 209, 161, .38);
  color: #7FE3C4;
  border-radius: 20px; padding: 6px 14px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; transform: translateY(8px);
  transition: opacity .65s ease, transform .65s ease;
}
.cln-badge.on { opacity: 1; transform: translateY(0); }

/* Titre (change) */
.cln-titles { position: relative; height: clamp(58px, 7.5vw, 72px); margin-bottom: 12px; }
.cln-title {
  position: absolute; bottom: 0; left: 0;
  margin: 0;
  font-size: clamp(30px, 4.6vw, 52px);
  font-weight: 800; color: #fff;
  line-height: 1.1; letter-spacing: -.8px;
  opacity: 0; transform: translateY(10px);
  transition: opacity .65s .06s ease, transform .65s .06s ease;
}
.cln-title.on { opacity: 1; transform: translateY(0); }
.cln-title em { color: #1DD1A1; font-style: normal; }

/* Sous-titre (change) */
.cln-subs { position: relative; height: 44px; margin-bottom: 22px; }
.cln-sub {
  position: absolute; bottom: 0; left: 0;
  margin: 0; max-width: 520px;
  font-size: 15px; color: rgba(255, 255, 255, .55); line-height: 1.55;
  opacity: 0; transform: translateY(6px);
  transition: opacity .65s .12s ease, transform .65s .12s ease;
}
.cln-sub.on { opacity: 1; transform: translateY(0); }

/* CTA (change) — présélectionne le service dans le formulaire */
.cln-ctas { position: relative; height: 52px; margin-bottom: 22px; }
.cln-cta {
  position: absolute; bottom: 0; left: 0;
  display: inline-flex; align-items: center; gap: 10px;
  background: #1DD1A1; color: #04342C;
  border: none; border-radius: 13px;
  padding: 15px 28px;
  font-size: 15px; font-weight: 800; font-family: inherit;
  white-space: nowrap; cursor: pointer;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .65s .18s ease, transform .65s .18s ease, background .2s;
}
.cln-cta.on { opacity: 1; transform: translateY(0); pointer-events: auto; }
.cln-cta:hover  { background: #5DCAA5; }
.cln-cta:active { transform: scale(.98); }
.cln-cta .a { transition: transform .2s; }
.cln-cta:hover .a { transform: translateX(3px); }

/* Réassurance (fixe) */
.cln-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.cln-pills span {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 20px; padding: 5px 13px;
  font-size: 12.5px; color: rgba(255, 255, 255, .6);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

/* ── Dots ── */
.cln-dots {
  position: absolute; bottom: 82px; right: 32px; z-index: 5;
  display: flex; gap: 7px; align-items: center;
}
.cln-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255, 255, 255, .25);
  border: none; padding: 0; cursor: pointer;
  transition: width .5s ease, background .5s ease;
}
.cln-dot.on { width: 26px; border-radius: 4px; background: #1DD1A1; }

/* ── Barre de services (bas du hero) ── */
.cln-bar {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 6;
  display: flex;
  border-top: 1px solid rgba(255, 255, 255, .07);
  background: rgba(7, 10, 17, .55);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.cln-baritem {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 11px 4px 9px;
  background: none; border: none;
  border-right: 1px solid rgba(255, 255, 255, .07);
  cursor: pointer; font-family: inherit;
  transition: background .2s;
}
.cln-baritem:last-child { border-right: none; }
.cln-baritem:hover { background: rgba(255, 255, 255, .05); }
.cln-baritem.on    { background: rgba(29, 209, 161, .1); }

.cln-baritem .bi { font-size: 17px; line-height: 1; }
.cln-baritem .bl {
  font-size: 10.5px; font-weight: 700; letter-spacing: .2px;
  color: rgba(255, 255, 255, .4);
  transition: color .3s;
}
.cln-baritem.on .bl { color: #fff; }
.cln-baritem .bb {
  height: 2px; width: 24px; border-radius: 2px;
  background: transparent;
  transition: background .35s;
}
.cln-baritem.on .bb { background: #1DD1A1; }


/* ══════════════════════════════════════════════════
   FORMULAIRE
   ══════════════════════════════════════════════════ */
.cln-form-zone { padding-top: 36px; padding-bottom: 48px; scroll-margin-top: 90px; }

.cln-alert { border-radius: 12px; padding: 14px 18px; margin-bottom: 20px; font-size: 14px; }
.cln-alert-err {
  background: rgba(226, 75, 74, .1);
  border: 1px solid rgba(226, 75, 74, .3);
  color: #F09595;
}
.cln-alert-err ul { margin: 8px 0 0 16px; padding: 0; }
.cln-alert-err li { margin-bottom: 4px; }

.cln-form { display: flex; flex-direction: column; gap: 16px; }

.cln-section {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 18px; padding: 24px 24px 20px;
}
.cln-section-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.cln-step-num {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: #1DD1A1; color: #04342C;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
}
.cln-section-title { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.cln-section-sub   { font-size: 12.5px; color: rgba(255, 255, 255, .38); }

/* ── Cartes de service ── */
.cln-types {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 10px;
}
.cln-type-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, .04);
  border: 1.5px solid rgba(255, 255, 255, .08);
  border-radius: 14px; padding: 16px 12px;
  cursor: pointer; text-align: center;
  transition: background .18s, border-color .18s, transform .12s;
}
/* Le radio est masqué visuellement, mais RESTE focusable.
   Surtout pas display:none : un champ non-focusable sur lequel la validation
   HTML5 échoue fait annuler la soumission SANS message ("An invalid form
   control is not focusable") — le bouton Envoyer ne ferait alors plus rien. */
.cln-type-card input[type="radio"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0; margin: 0;
  pointer-events: none;
}
/* Focus clavier visible sur la carte */
.cln-type-card:focus-within {
  border-color: #1DD1A1;
  box-shadow: 0 0 0 3px rgba(29, 209, 161, .18);
}
.cln-type-card:hover {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(29, 209, 161, .38);
}
.cln-type-card:active { transform: scale(.98); }
.cln-type-card.on {
  background: rgba(29, 209, 161, .12);
  border-color: #1DD1A1;
}
.ct-ico  { font-size: 28px; line-height: 1; }
.ct-lbl  { font-size: 12.5px; font-weight: 600; color: #fff; line-height: 1.35; }
.ct-unit { font-size: 10.5px; color: rgba(255, 255, 255, .38); }

.cln-err {
  margin-top: 12px;
  background: rgba(226, 75, 74, .12);
  border: 1px solid rgba(226, 75, 74, .35);
  color: #F09595;
  border-radius: 11px;
  padding: 11px 15px;
  font-size: 13.5px; font-weight: 600;
}

.cln-detail-flds {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .06);
}

/* ── Champs ── */
.cln-row { display: flex; gap: 14px; }
.cln-row + .cln-row { margin-top: 12px; }
.cln-fld { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.cln-fld-full { width: 100%; }
.cln-fld-full + .cln-row { margin-top: 12px; }

.cln-fld label {
  font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, .42);
  text-transform: uppercase; letter-spacing: .4px;
}
.cln-fld .req { color: #E24B4A; }
.cln-fld .opt {
  font-weight: 400; text-transform: none; letter-spacing: 0;
  font-size: 10px; color: rgba(255, 255, 255, .3);
}

/* 16px obligatoire — empêche le zoom automatique iOS au focus */
.cln-fld input,
.cln-fld select,
.cln-fld textarea {
  width: 100%;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 11px; color: #fff;
  padding: 12px 15px;
  font-size: 16px; font-family: inherit;
  outline: none;
  transition: border-color .2s, background .2s;
}
.cln-fld input::placeholder,
.cln-fld textarea::placeholder { color: rgba(255, 255, 255, .28); }
.cln-fld input:focus,
.cln-fld select:focus,
.cln-fld textarea:focus {
  border-color: rgba(29, 209, 161, .6);
  background: rgba(255, 255, 255, .08);
}
.cln-fld textarea { resize: vertical; min-height: 100px; line-height: 1.55; }

/* ── Sélecteurs natifs date / heure ──
   Sans color-scheme:dark, Chrome dessine l'icône du calendrier en NOIR :
   invisible sur notre fond sombre. Cette propriété bascule les contrôles
   natifs (icône + fenêtre du calendrier) en thème sombre. */
.cln-fld input[type="date"],
.cln-fld input[type="time"] {
  color-scheme: dark;
  cursor: pointer;
}
.cln-fld input[type="date"]::-webkit-calendar-picker-indicator,
.cln-fld input[type="time"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: .55;
  transition: opacity .2s;
}
.cln-fld input[type="date"]:hover::-webkit-calendar-picker-indicator,
.cln-fld input[type="time"]:hover::-webkit-calendar-picker-indicator {
  opacity: 1;
}
.cln-char-hint { font-size: 11.5px; color: rgba(255, 255, 255, .28); margin-top: 4px; }

/* ── Toggle urgence ── */
.cln-toggle-card {
  display: flex; align-items: center; gap: 14px;
  background: rgba(250, 189, 47, .05);
  border: 1.5px solid rgba(250, 189, 47, .18);
  border-radius: 14px; padding: 14px 18px;
  cursor: pointer; margin-top: 16px;
  transition: background .2s, border-color .2s;
}
.cln-toggle-card input[type="checkbox"] { display: none; }
.cln-toggle-card.on {
  background: rgba(250, 189, 47, .1);
  border-color: rgba(250, 189, 47, .42);
}
.ct-check {
  position: relative;
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  border: 2px solid rgba(250, 189, 47, .5);
  transition: background .18s, border-color .18s;
}
.cln-toggle-card.on .ct-check { background: #FAC775; border-color: #FAC775; }
.cln-toggle-card.on .ct-check::after {
  content: '✓';
  position: absolute; top: -2px; left: 3px;
  font-size: 13px; font-weight: 800; color: #412402;
}
.ct-info { display: flex; flex-direction: column; gap: 3px; }
.ct-info strong { font-size: 14px; font-weight: 700; color: #EF9F27; }
.ct-info span   { font-size: 12px; color: rgba(255, 255, 255, .45); }

/* ── Envoyer ── */
.cln-submit-zone { text-align: center; padding-top: 8px; }
.cln-btn-submit {
  display: inline-flex; align-items: center; gap: 10px;
  background: #1DD1A1; color: #04342C;
  border: none; border-radius: 14px;
  padding: 16px 36px;
  font-size: 16px; font-weight: 800;
  cursor: pointer; font-family: inherit;
  transition: background .2s, transform .1s;
}
.cln-btn-submit:hover    { background: #5DCAA5; }
.cln-btn-submit:active   { transform: scale(.98); }
.cln-btn-submit:disabled { opacity: .6; cursor: not-allowed; }
.cln-btn-submit .s-ico { font-size: 19px; }

.cln-submit-note {
  margin-top: 12px; font-size: 12.5px;
  color: rgba(255, 255, 255, .35); line-height: 1.55;
}
.cln-submit-note strong { color: rgba(255, 255, 255, .58); }


/* ══════════════════════════════════════════════════
   COMMENT ÇA MARCHE
   ══════════════════════════════════════════════════ */
.cln-sec { padding: 32px 0 60px; }
.cln-sec-title { font-size: 22px; font-weight: 800; color: #fff; margin: 0 0 24px; }
.cln-steps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}
.cln-step {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 16px; padding: 20px 18px;
}
.cln-step .cs-n { font-size: 28px; margin-bottom: 10px; }
.cln-step h3 { font-size: 14px; font-weight: 700; color: #fff; margin: 0 0 6px; }
.cln-step p  { font-size: 12.5px; color: rgba(255, 255, 255, .4); margin: 0; line-height: 1.55; }


/* ══════════════════════════════════════════════════
   PAGE MERCI
   ══════════════════════════════════════════════════ */
.cln-merci-zone { padding: 60px 0; }
.cln-merci-card {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 22px; padding: 48px 40px;
  text-align: center; max-width: 540px; margin: 0 auto;
}
.cln-merci-ico { font-size: 56px; margin-bottom: 20px; }
.cln-merci-card h1 { font-size: 26px; font-weight: 800; color: #fff; margin: 0 0 8px; }
.cln-merci-ref {
  display: inline-block;
  font-size: 12px; color: #5DCAA5;
  background: rgba(29, 209, 161, .1);
  border: 1px solid rgba(29, 209, 161, .22);
  border-radius: 8px; padding: 5px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  margin-bottom: 20px;
}
.cln-merci-card p {
  font-size: 14.5px; color: rgba(255, 255, 255, .5);
  line-height: 1.65; margin: 0 0 28px;
}
.cln-merci-card p strong { color: rgba(255, 255, 255, .78); }
/* ── Bouton WhatsApp (click-to-chat) ──
   Affiché quand l'API Meta n'est pas configurée : c'est ce clic qui
   envoie réellement la demande à la partenaire. Il doit donc dominer. */
.cln-wa-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  background: #25D366; color: #052E16;
  border-radius: 14px;
  padding: 17px 34px;
  font-size: 16px; font-weight: 800;
  transition: background .2s, transform .1s;
  margin-bottom: 10px;
}
.cln-wa-btn:hover  { background: #4AE383; }
.cln-wa-btn:active { transform: scale(.98); }
.cln-wa-btn .wa-ico { font-size: 20px; }
.cln-wa-btn .wa-arr { transition: transform .2s; }
.cln-wa-btn:hover .wa-arr { transform: translateX(3px); }

.cln-wa-note {
  font-size: 12.5px; color: #EF9F27;
  margin-bottom: 26px; line-height: 1.5;
}

.cln-merci-steps {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 32px; text-align: left;
}
.cms {
  display: flex; align-items: center; gap: 14px;
  background: rgba(255, 255, 255, .04);
  border-radius: 12px; padding: 12px 16px;
  font-size: 13.5px; color: rgba(255, 255, 255, .68);
}
.cms .cs-i { font-size: 20px; flex-shrink: 0; }
.cln-merci-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cln-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: #1DD1A1; color: #04342C;
  border-radius: 12px; padding: 12px 24px;
  font-size: 14px; font-weight: 800;
  transition: background .2s;
}
.cln-btn-primary:hover { background: #5DCAA5; }
.cln-btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .7);
  border-radius: 12px; padding: 12px 24px;
  font-size: 14px; font-weight: 600;
  transition: background .2s, color .2s;
}
.cln-btn-ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; }


/* ══════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .cln-wrap { padding: 0 18px; }
  .cln-hero { min-height: clamp(480px, 82vh, 600px); }
  .cln-hero-in { padding-bottom: 112px; }
  .cln-dots { bottom: 76px; right: 18px; }
}

@media (max-width: 640px) {
  .cln-wrap { padding: 0 14px; }

  /* Hero */
  .cln-hero { min-height: clamp(440px, 90vw, 540px); }
  .cln-hero-in { padding-bottom: 104px; }
  .cln-badges { height: 28px; margin-bottom: 12px; }
  .cln-badge  { font-size: 10.5px; padding: 5px 11px; }
  .cln-titles { height: 78px; margin-bottom: 10px; }   /* 2 lignes possibles */
  .cln-title  { font-size: 27px; letter-spacing: -.4px; }
  .cln-subs   { height: 52px; margin-bottom: 16px; }
  .cln-sub    { font-size: 13px; }
  .cln-ctas   { height: 46px; margin-bottom: 16px; }
  .cln-cta    { padding: 13px 20px; font-size: 13.5px; }
  .cln-pills span { font-size: 11px; padding: 4px 10px; }
  .cln-dots   { bottom: 70px; right: 14px; }
  .cln-dot.on { width: 20px; }

  /* Barre de services — scroll horizontal si trop étroit */
  .cln-bar { overflow-x: auto; scrollbar-width: none; }
  .cln-bar::-webkit-scrollbar { display: none; }
  .cln-baritem { flex: 0 0 21%; padding: 9px 4px 8px; }
  .cln-baritem .bi { font-size: 15px; }
  .cln-baritem .bl { font-size: 9.5px; }

  /* Formulaire */
  .cln-form-zone { padding-top: 24px; padding-bottom: 32px; scroll-margin-top: 70px; }
  .cln-section { padding: 18px 16px 16px; border-radius: 14px; }
  .cln-section-head { gap: 11px; margin-bottom: 16px; }
  .cln-section-title { font-size: 14px; }

  .cln-types { grid-template-columns: 1fr 1fr; gap: 8px; }
  .cln-type-card { padding: 13px 8px; border-radius: 12px; }
  .ct-ico { font-size: 24px; }
  .ct-lbl { font-size: 11.5px; }

  .cln-row { flex-direction: column; gap: 12px; }
  .cln-fld input,
  .cln-fld select,
  .cln-fld textarea { font-size: 16px !important; }

  .cln-toggle-card { padding: 12px 14px; gap: 12px; }
  .cln-btn-submit { width: 100%; justify-content: center; padding: 16px; }

  .cln-sec { padding: 24px 0 40px; }
  .cln-sec-title { font-size: 19px; }
  .cln-steps { grid-template-columns: 1fr; }

  .cln-merci-card { padding: 32px 20px; border-radius: 18px; }
  .cln-merci-card h1 { font-size: 22px; }
  .cln-merci-ico { font-size: 46px; }
  .cln-merci-actions { flex-direction: column; }
  .cln-btn-primary, .cln-btn-ghost { justify-content: center; }
}

/* Accessibilité — respecte le réglage système "réduire les animations" */
@media (prefers-reduced-motion: reduce) {
  .cln-slide, .cln-slide .bg,
  .cln-badge, .cln-title, .cln-sub, .cln-cta,
  .cln-dot, .cln-baritem .bb {
    transition: none !important;
  }
  .cln-slide.on .bg { transform: none; }
}

/* ================================================================
   ▸ CALQUE IDENTITÉ BLEU MARINE (ajouté en fin de fichier :
     même spécificité, déclaré plus tard → il gagne)
   ================================================================ */
:root{ --accent:#1e3a5f; --accent-d:#16283f; }
.emb-clean{ --accent:#1e3a5f; --accent-d:#16283f; --accent-soft:#E8EEF6; background:#EFE7DA; }
body{ background:#EFE7DA; }
.cln{ background:#EFE7DA; color:#16283f; }

/* ── HÉRO : voile renforcé pour que le titre reste lisible ── */
.cln-scrim{
  background:
    linear-gradient(90deg, rgba(15,30,48,.95) 4%, rgba(22,40,63,.8) 46%, rgba(15,30,48,.4) 100%),
    linear-gradient(0deg, rgba(15,30,48,.88), transparent 58%) !important;
}
.cln-title{ color:#fff !important; font-family:Georgia,'Times New Roman',serif; font-weight:700; }
.cln-title em{ color:#AECBEC !important; }
.cln-sub{ color:rgba(255,255,255,.82) !important; }
.cln-badge{
  background:rgba(255,255,255,.14) !important;
  border-color:rgba(255,255,255,.24) !important;
  color:#fff !important;
}
.cln-pills span{
  background:rgba(255,255,255,.14) !important;
  border-color:rgba(255,255,255,.22) !important;
  color:#fff !important; font-weight:600;
}
.cln-cta{ background:#fff !important; color:#1e3a5f !important; box-shadow:0 18px 34px -16px rgba(0,0,0,.55); }
.cln-cta:hover{ background:#f2f5f9 !important; }
.cln-dot.on{ background:#fff !important; }

/* ── BARRE DE SERVICES ── */
.cln-bar{ background:#fff; border-top:1px solid #e7ddce; border-bottom:1px solid #e7ddce; }
.cln-baritem{ color:#6b7686; }
.cln-baritem.on{ background:rgba(30,58,95,.06); color:#1e3a5f; }
.cln-baritem.on .bb{ background:#1e3a5f !important; }

/* ── SECTIONS & TITRES ── */
.cln-section-title,.cln-sec-title{ font-family:Georgia,'Times New Roman',serif; color:#16283f; }
.cln-section-sub{ color:#6b7686; }

/* ── CARTES DE SERVICE ── */
.cln-type-card{ background:#fdfbf7; border:1.5px solid #e7ddce; color:#16283f; }
.cln-type-card:hover{ border-color:#c9d6e6; }
.cln-type-card.on,
.cln-type-card:has(input:checked){ border-color:#1e3a5f !important; background:rgba(30,58,95,.06) !important; }

/* ── CHAMPS ── */
.cln-fld label{ color:#6b7686; font-weight:800; }
.cln-fld input,.cln-fld select,.cln-fld textarea{
  background:#fdfbf7; border:1px solid #e7ddce; color:#16283f;
}
.cln-fld input:focus,.cln-fld select:focus,.cln-fld textarea:focus{
  border-color:#1e3a5f !important; box-shadow:0 0 0 3px rgba(30,58,95,.1);
}
.cln-fld input::placeholder,.cln-fld textarea::placeholder{ color:#b3aa9c; }
.cln-toggle-card{ background:#fdfbf7; border-color:#e7ddce; color:#16283f; }
.cln-char-hint{ color:#95a0b0; }

/* ── BOUTONS ── */
.cln-btn-submit,.cln-btn-primary{ background:#1e3a5f !important; color:#fff !important; }
.cln-btn-submit:hover,.cln-btn-primary:hover{ filter:brightness(1.08); background:#1e3a5f !important; }
.cln-btn-ghost{ border-color:#e7ddce; color:#16283f; }
.cln-wa-btn{ background:#1e3a5f !important; color:#fff !important; }
.cln-wa-note,.cln-submit-note{ color:#6b7686; }

/* ── ÉTAPES / MERCI ── */
.cln-step-num{ background:#1e3a5f !important; color:#fff !important; }
.cln-merci-card{ background:#fff; border:1px solid #e7ddce; color:#16283f; }
.cln-merci-ico{ background:rgba(26,122,69,.14); }
.cln-merci-ref{ color:#1e3a5f; font-family:Georgia,serif; }

/* ── SECTIONS INFORMATIVES (bas de page) ── */
.clx-sh{ text-align:center; margin:34px 0 18px; }
.clx-sh h2{ font-family:Georgia,'Times New Roman',serif; font-size:24px; font-weight:700; color:#16283f; }
.clx-sh p{ font-size:13.5px; color:#6b7686; margin-top:6px; }
.clx-flow{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.clx-fstep{ background:#fff; border:1px solid #e7ddce; border-radius:18px; padding:20px; }
.clx-fstep .n{ width:32px; height:32px; border-radius:50%; background:#1e3a5f; color:#fff; font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center; font-family:Georgia,serif; }
.clx-fstep h3{ font-size:15.5px; font-weight:700; margin-top:12px; color:#16283f; }
.clx-fstep p{ font-size:13px; color:#6b7686; margin-top:6px; line-height:1.6; }
.clx-grid{ background:#fff; border:1px solid #e7ddce; border-radius:18px; overflow:hidden; }
.clx-tr{ display:flex; align-items:center; gap:13px; padding:14px 20px; border-bottom:1px solid #e7ddce; }
.clx-tr:last-child{ border-bottom:0; }
.clx-tr .e{ width:34px; height:34px; border-radius:11px; background:rgba(30,58,95,.08); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.clx-tr .n{ font-size:13.5px; font-weight:700; color:#16283f; }
.clx-tr .d{ font-size:11.5px; color:#95a0b0; margin-top:2px; }
.clx-tr .p{ margin-left:auto; font-family:Georgia,serif; font-size:16px; font-weight:700; color:#1e3a5f; white-space:nowrap; }
.clx-fq{ background:#fff; border:1px solid #e7ddce; border-radius:14px; padding:15px 18px; margin-bottom:10px; cursor:pointer; }
.clx-fq .q{ font-size:13.5px; font-weight:800; display:flex; justify-content:space-between; gap:12px; color:#16283f; }
.clx-fq .a{ font-size:12.5px; color:#6b7686; line-height:1.65; margin-top:9px; display:none; }
.clx-fq.on .a{ display:block; }
@media(max-width:900px){ .clx-flow{ grid-template-columns:minmax(0,1fr); } .clx-sh h2{ font-size:20px; } }