/* ==========================================================================
   Bloc éditorial SEO rendu sous le hub et sous chaque simulateur.

   Feuille autonome : le bloc est un frère de .mdn-calc / .mdn-hub, pas un
   descendant, donc il ne peut pas hériter de leurs tokens — ils sont
   redéclarés ici. Chargée par les deux profils et par le hub.

   Typographie des titres : volontairement AUCUNE déclaration de police ni de
   taille. Le kit Elementor du site les impose (même spécificité, feuille
   chargée après celle-ci) et c'est le comportement voulu — les titres du bloc
   doivent ressembler à ceux des autres pages éditoriales du site. Seuls les
   espacements et la couleur passent par une classe dédiée (.mdn-seo-t), qui
   gagne en spécificité et ne dépend donc pas de l'ordre de chargement.
   ========================================================================== */

.mdn-seo {
  /* Design tokens — charte easiklip : vert #005D4B, orange #EF8544 */
  --paper:      #F8F8F8;
  --ink:        #1F2722;
  --muted:      #7A847E;
  --line:       #E0E0E0;
  --accent:     #EF8544;   /* orange easiklip — accent interactif */
  --brand:      #005D4B;   /* vert easiklip — titres */

  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  margin: clamp(40px, 6vw, 80px) auto 0;
  max-width: 1480px;
  padding-inline: clamp(16px, 4vw, 40px);
}

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

/* Colonne de lecture : le simulateur est large, le texte ne doit pas l'être. */
.mdn-seo-inner {
  max-width: 74ch;
  margin: 0 auto;
  border-top: 1px solid var(--line);
  padding-top: clamp(28px, 4vw, 48px);
}

.mdn-seo p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.7;
}

.mdn-seo ul, .mdn-seo ol {
  margin: 0 0 18px;
  padding-left: 22px;
}

.mdn-seo li {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 8px;
}

.mdn-seo strong { font-weight: 600; }

.mdn-seo a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.mdn-seo a:hover { color: var(--brand); }

/* Titres : espacements et couleur uniquement (voir l'en-tête du fichier). */
.mdn-seo .mdn-seo-t {
  color: var(--brand);
  margin: clamp(32px, 4vw, 48px) 0 14px;
  line-height: 1.2;
}

.mdn-seo .mdn-seo-inner > .mdn-seo-t:first-child { margin-top: 0; }

/* Questions de la FAQ : plus resserrées que les titres de section. */
.mdn-seo .mdn-seo-q {
  color: var(--brand);
  margin: 28px 0 8px;
  line-height: 1.3;
}

/* Le bloc n'a rien à faire sur un devis imprimé. */
@media print {
  .mdn-seo { display: none !important; }
}