/* ═══════════════════════════════════════════════════════════════
   MOUSTACHE — BASE v1.5
   Design tokens + surcharges communes à tous les modules front.
   Style éditorial sobre : fond clair, bordures fines, arrondis discrets,
   AUCUN dégradé, pas de pastille colorée derrière les icônes, ombres légères.
   CTA en accent Moustache marqué. Largeur fluide, mobile-first.
   Chargé AVANT chaque module → surcharge par cascade + tokens partagés.
   ═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;450;500;600&display=swap');

:root{
  --mst-ink:#111827;         /* texte principal, presque noir */
  --mst-ink-2:#4b5563;       /* texte secondaire */
  --mst-muted:#6b7280;       /* texte tertiaire */
  --mst-faint:#9ca3af;       /* labels, hints */
  --mst-line:#e8eaed;        /* bordures fines */
  --mst-line-2:#f0f1f3;      /* séparateurs très légers */
  --mst-bg:#ffffff;          /* fond cartes */
  --mst-bg-soft:#f7f8fa;     /* fond doux / sélection */
  --mst-bg-softer:#fafbfc;   /* fond ultra léger */
  --mst-radius:14px;         /* arrondi conteneur */
  --mst-radius-sm:11px;      /* arrondi éléments */
  --mst-radius-xs:9px;       /* arrondi petits */
  --mst-shadow:0 1px 2px rgba(17,24,39,.04);           /* ombre au repos, quasi nulle */
  --mst-shadow-h:0 4px 14px rgba(17,24,39,.07);        /* ombre au survol, discrète */
  --mst-good:#16a34a; --mst-warn:#f59e0b; --mst-bad:#e7213a;
  --mst-focus:rgba(17,24,39,.12);
  --mst-t:200ms cubic-bezier(.22,.61,.36,1);           /* transition rapide standard */
  --mst-t-sm:140ms cubic-bezier(.22,.61,.36,1);
}

/* ── Conteneurs racine : largeur fluide 95%, typo, reset ── */
.mst-sim,.mst-id,.mst-cdc,.mst-calc,.mst-quiz,.mst-seo,.mst-contact{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--mst-ink);
  width:95%;max-width:760px;margin-inline:auto;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.mst-seo,.mst-cdc{max-width:840px}
.mst-sim,.mst-id{max-width:900px}
.mst-sim *,.mst-id *,.mst-cdc *,.mst-calc *,.mst-quiz *,.mst-seo *,.mst-contact *{box-sizing:border-box}

/* ── Neutralisation des patterns "IA" hérités ────────────────── */
/* pastilles colorées derrière icônes → fond neutre discret, icône = accent en trait */
.mst-seo-intro-ic,.mst-seo-cap-ic,.mst-contact-choice-ic{
  background:var(--mst-bg-soft)!important;
  color:var(--mst-ink)!important;
  box-shadow:none!important;
  border:1px solid var(--mst-line);
  border-radius:var(--mst-radius-xs)!important;
}
/* cartes : fond blanc, bordure fine, ombre quasi nulle, pas de gradient */
.mst-seo-intro,.mst-seo-hero,.mst-seo-scores,.mst-seo-metric,.mst-seo-finding,
.mst-seo-planitem,.mst-seo-capture,.mst-contact-body,.mst-contact-choice{
  background:var(--mst-bg)!important;
  border:1px solid var(--mst-line)!important;
  box-shadow:var(--mst-shadow)!important;
}
.mst-seo-capture{border-style:dashed!important;background:var(--mst-bg-softer)!important}
.mst-seo-intro{background:var(--mst-bg-softer)!important}

/* ── Boutons : CTA accent marqué (plein), secondaires sobres ── */
.mst-seo-go,.mst-seo-btn,.mst-contact-btn,.mst-calc-btn,.mst-btn-primary{
  border-radius:var(--mst-radius-sm)!important;
  font-family:'Plus Jakarta Sans',sans-serif!important;
  font-weight:700!important;letter-spacing:-.01em;
  transition:transform var(--mst-t-sm),box-shadow var(--mst-t),background var(--mst-t),filter var(--mst-t)!important;
}
/* CTA plein : garde l'accent marqué, mais ombre colorée légère (pas la grosse ombre floue) */
.mst-seo-go,.mst-seo-send,.mst-contact-submit,.mst-contact-next{
  box-shadow:0 1px 2px rgba(17,24,39,.08)!important;
}
.mst-seo-go:hover,.mst-seo-send:hover,.mst-contact-submit:hover,.mst-contact-next:hover{
  transform:translateY(-1px)!important;
  box-shadow:0 4px 12px color-mix(in srgb,var(--mst-accent) 28%,transparent)!important;
  filter:none!important;
}
/* boutons fantômes : blanc + bordure fine */
.mst-seo-btn.ghost,.mst-contact-btn.ghost{
  background:var(--mst-bg)!important;color:var(--mst-ink-2)!important;
  border:1px solid var(--mst-line)!important;box-shadow:none!important;
}
.mst-seo-btn.ghost:hover,.mst-contact-btn.ghost:hover{
  border-color:var(--mst-faint)!important;color:var(--mst-ink)!important;
  transform:translateY(-1px)!important;box-shadow:var(--mst-shadow-h)!important;
}

/* ── Champs de saisie homogènes ──────────────────────────────── */
.mst-seo-url,.mst-seo-inwrap input,.mst-contact-inwrap input,.mst-contact-textarea{
  border:1px solid var(--mst-line)!important;border-radius:var(--mst-radius-xs)!important;
  background:var(--mst-bg)!important;font-family:'Inter',sans-serif!important;
  transition:border-color var(--mst-t),box-shadow var(--mst-t)!important;
}
.mst-seo-url:focus,.mst-seo-inwrap input:focus,.mst-contact-inwrap input:focus,.mst-contact-textarea:focus{
  outline:none!important;border-color:var(--mst-ink)!important;
  box-shadow:0 0 0 3px var(--mst-focus)!important;
}

/* ── Micro-animations partagées ──────────────────────────────── */
@keyframes mstFadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes mstFadeIn{from{opacity:0}to{opacity:1}}
@keyframes mstPop{0%{transform:scale(.96);opacity:0}60%{transform:scale(1.01)}100%{transform:scale(1);opacity:1}}
@keyframes mstShimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
@keyframes mstSpin{to{transform:rotate(360deg)}}
.mst-anim-in{animation:mstFadeUp .34s cubic-bezier(.22,.61,.36,1) both}

/* skeleton de chargement réutilisable */
.mst-skel{background:linear-gradient(90deg,#eef0f2 25%,#f6f7f8 37%,#eef0f2 63%);background-size:800px 100%;animation:mstShimmer 1.3s linear infinite;border-radius:8px}

/* focus visible accessible sur tous les interactifs */
.mst-sim :focus-visible,.mst-id :focus-visible,.mst-cdc :focus-visible,.mst-calc :focus-visible,
.mst-quiz :focus-visible,.mst-seo :focus-visible,.mst-contact :focus-visible{
  outline:2px solid var(--mst-ink);outline-offset:2px;border-radius:4px;
}

/* respect des préférences de mouvement réduit */
@media (prefers-reduced-motion:reduce){
  .mst-sim *,.mst-id *,.mst-cdc *,.mst-calc *,.mst-quiz *,.mst-seo *,.mst-contact *{
    animation-duration:.01ms!important;transition-duration:.01ms!important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   NEUTRALISATION DES MODULES HÉRITÉS (sim-site, sim-id, cahier, quiz, calc)
   Ré-aligne les simulateurs/quiz/cahier sur le style sobre sans réécrire
   leurs feuilles. On cible les patterns "IA" : dégradés, cartes translucides,
   gros arrondis, ombres colorées, blocs sombres.
   ═══════════════════════════════════════════════════════════════ */

/* — Largeur fluide homogène — */
.mst-sim,.mst-id{width:95%;max-width:900px}
.mst-cdc,.mst-quiz{width:95%}

/* — Cartes / chips / formulaires : fond plein, bordure fine, arrondi sobre, ombre nulle — */
.mst-card,.mst-chip,.mst-design-card,.mst-form,
.mst-id-card,.mst-id-chip,.mst-id-design-card,.mst-id-form,
.mst-cdc-card,.mst-quiz-card,.mst-quiz-option{
  background:var(--mst-bg)!important;
  border:1px solid var(--mst-line)!important;
  border-radius:var(--mst-radius-sm)!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
.mst-card:hover,.mst-chip:hover,.mst-design-card:hover,
.mst-id-card:hover,.mst-id-chip:hover,.mst-id-design-card:hover{
  transform:translateY(-1px)!important;
  box-shadow:var(--mst-shadow-h)!important;
  border-color:var(--mst-ink)!important;
}
/* sélection : liseré accent discret, pas de halo coloré large */
.mst-card.selected,.mst-chip.selected,.mst-design-card.selected,
.mst-id-card.selected,.mst-id-chip.selected,.mst-id-design-card.selected{
  border-color:var(--mst-accent)!important;
  background:var(--mst-bg-softer)!important;
  box-shadow:inset 0 0 0 1px var(--mst-accent)!important;
}

/* — Puce de sélection carrée sobre (au lieu du rond plein coloré) — */
.mst-card.selected::after,.mst-id-card.selected::after{
  border-radius:6px!important;width:22px!important;height:22px!important;
  background:var(--mst-accent)!important;
}

/* — Steppers : points sobres — */
.mst-step-dot.active,.mst-id-step-dot.active{
  box-shadow:none!important;
}
.mst-step-connector.done,.mst-id-step-connector.done{background:var(--mst-good)!important}

/* — Barres de progression : accent plein, pas de dégradé — */
.mst-cdc-progress-bar,.mst-quiz-progressbar div{background:var(--mst-accent)!important}

/* — Boutons primaires : accent plein + hover sobre (pas d'ombre colorée large) — */
.mst-btn-primary,.mst-id-btn-primary{background:var(--mst-accent)!important;color:#fff!important}
.mst-btn-primary:hover,.mst-id-btn-primary:hover{
  filter:brightness(1.05)!important;transform:translateY(-1px)!important;
  box-shadow:0 4px 12px color-mix(in srgb,var(--mst-accent) 26%,transparent)!important;
}
.mst-btn-secondary,.mst-id-btn-secondary{background:var(--mst-bg)!important;border:1px solid var(--mst-line)!important}
.mst-btn,.mst-id-btn{border-radius:var(--mst-radius-sm)!important;transition:transform var(--mst-t-sm),box-shadow var(--mst-t),filter var(--mst-t)!important}

/* — Barres de prix : fond doux uni, pas de dégradé ni blur — */
.mst-price-bar,.mst-id-pricebar{
  background:var(--mst-bg-soft)!important;border:1px solid var(--mst-line)!important;
  border-radius:var(--mst-radius-sm)!important;backdrop-filter:none!important;
}

/* — Bloc résultat : passe du dark gradient à une carte claire encadrée — */
.mst-result,.mst-id-result{
  background:var(--mst-bg)!important;color:var(--mst-ink)!important;
  border:1px solid var(--mst-line)!important;border-radius:var(--mst-radius)!important;
  box-shadow:var(--mst-shadow)!important;
}
.mst-result::before,.mst-id-result::before{display:none!important}
/* prix : couleur accent pleine, on retire le texte-gradient transparent */
.mst-result-price,.mst-id-result-price{
  background:none!important;-webkit-text-fill-color:var(--mst-accent)!important;
  color:var(--mst-accent)!important;
}
/* textes internes du résultat repassent en encre foncée */
.mst-result *,.mst-id-result *{color:inherit}

/* — Promo / encarts : fond doux, bordure accent discrète — */
.mst-promo,.mst-id-promo{
  background:var(--mst-bg-softer)!important;border:1px dashed color-mix(in srgb,var(--mst-accent) 40%,var(--mst-line))!important;
}
.mst-promo-code,.mst-id-promo-code{background:var(--mst-ink)!important}

/* — Quiz : CTA form sobre — */
.mst-quiz-form{background:var(--mst-bg-softer)!important;border:1px dashed color-mix(in srgb,var(--mst-accent) 35%,var(--mst-line))!important;border-radius:var(--mst-radius)!important}

/* — Cahier des charges : succès en carte claire — */
.mst-cdc-success{background:var(--mst-bg-softer)!important;border:1px solid var(--mst-line)!important;border-radius:var(--mst-radius)!important}

/* — Champs de formulaire hérités : focus sobre accent — */
.mst-form input:focus,.mst-form textarea:focus,
.mst-id-form input:focus,.mst-id-form textarea:focus{
  border-color:var(--mst-ink)!important;box-shadow:0 0 0 3px var(--mst-focus)!important;
}