/* ==========================================================================
   Pages de référencement (métiers, comparatifs, outils, guides, index)
   Complète css/socle.css : à charger APRÈS lui. Jetons du socle uniquement.
   Sommaire : 1 en-tête à image · 2 objet détouré · 3 la journée (moments) ·
   4 fragments d'interface · 5 bande photo · 6 étapes · 7 outil (générateur) ·
   8 comparatif à deux colonnes · 9 index de pages · 10 maillage (« Pour aller
   plus loin » + plan des pages) · 11 adaptations écran · 12 impression
   ========================================================================== */

/* 1. EN-TÊTE À IMAGE — .page-head > .wrap.seo-head (texte + figure) */
.seo-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.seo-head .page-title { font-size: clamp(40px, 4.6vw, 70px); }
.seo-keys { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; padding: 0; list-style: none; }
.seo-keys li { font: 500 13px/1 var(--mono); padding: 8px 12px; border-radius: var(--radius-pill); background: var(--violet-tint); color: var(--ink); }

/* 2. OBJET DÉTOURÉ — figure.seo-object > img + figcaption (span + time) */
.seo-object { position: relative; margin: 0; padding-bottom: 14px; }
.seo-object::before { content: ""; position: absolute; left: 6%; right: 6%; bottom: 6px; height: 34%; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--ink) 22%, transparent), transparent); filter: blur(8px); }
.seo-object img { position: relative; width: 100%; }
.seo-object figcaption { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin: 10px 6% 0; font: 300 24px/1.1 var(--serif); color: var(--ink); }
.seo-object figcaption time { font: 500 13px/1 var(--mono); color: var(--violet); }

/* 3. LA JOURNÉE — ol.seo-day > li.seo-moment (.seo-when + .seo-story + .seo-ui) */
.seo-day { list-style: none; margin: 56px 0 0; padding: 0; display: grid; gap: clamp(40px, 6vw, 72px); counter-reset: none; }
.seo-moment { display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: start;
  padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--line-2); }
.seo-when { display: grid; gap: 8px; }
.seo-when time { font: 300 40px/1 var(--serif); font-variation-settings: "opsz" 144; color: var(--violet); letter-spacing: -.02em; }
.seo-when span { font: 500 12px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--stone); }
.seo-story h3 { font: 400 clamp(24px, 2.4vw, 30px)/1.2 var(--serif); margin-bottom: 14px; text-wrap: balance; }
.seo-story h3 em { font-style: italic; color: var(--violet); }
.seo-story > p { color: var(--ink-2); }
.seo-story > p + p { margin-top: 10px; }
.seo-story .k { margin-top: 18px; }
.seo-story .checks { margin-top: 12px; }

/* 4. FRAGMENTS D'INTERFACE — .seo-ui > .seo-ui-bar + contenu (+ .seo-ui-foot) ; toujours étiquetés « exemple » */
.seo-ui { width: 100%; max-width: 500px; background: var(--card); color: var(--ink); border-radius: 16px; border: 1px solid var(--line);
  box-shadow: var(--shadow); overflow: hidden; font-size: 14px; line-height: 1.45; }
.seo-ui-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper-2) 55%, var(--card)); }
.seo-ui-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.seo-ui-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); }
.seo-ui-btn { font: 600 13px/1 var(--sans); padding: 9px 13px; border-radius: 9px; background: color-mix(in srgb, var(--stone) 16%, transparent); color: var(--ink); }
.seo-ui-btn.is-primary { background: var(--violet); color: var(--card); }
.seo-ui-note { color: var(--stone); font-size: 13px; }
.bot-ico { width: 18px; height: auto; }
/* conversation */
.seo-msgs { padding: 16px; display: grid; gap: 12px; }
.seo-msg { max-width: 92%; }
.seo-msg-me { justify-self: end; background: var(--user); color: var(--user-fg); padding: 11px 14px; border-radius: 16px 16px 4px 16px; }
.seo-msg-bot { justify-self: start; }
.seo-att { display: block; margin-top: 6px; font: 500 12px/1.3 var(--mono); opacity: .85; }
/* document (devis, facture) */
.seo-doc { margin-top: 10px; border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; background: color-mix(in srgb, var(--paper) 40%, var(--card)); }
.seo-doc-h { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.seo-doc-h span { color: var(--stone); }
.seo-doc table { width: 100%; border-collapse: collapse; font-size: 13px; }
.seo-doc td { padding: 7px 12px; border-bottom: 1px solid var(--line); }
.seo-doc td:nth-child(2) { color: var(--stone); text-align: center; white-space: nowrap; }
.seo-doc td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.seo-doc .tot td { font-weight: 700; border-bottom: 0; }
/* liste (planning, impayés) */
.seo-rows { list-style: none; margin: 0; padding: 4px 0; }
.seo-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 11px 16px; }
.seo-rows li + li { border-top: 1px solid var(--line); }
.seo-rows b { font-weight: 600; }
.seo-rows span { color: var(--ink-2); }
.seo-rows .seo-act { grid-column: 1 / -1; justify-self: start; font-size: 12.5px; font-weight: 600; color: var(--violet); background: var(--violet-tint); padding: 4px 8px; border-radius: 7px; }
.seo-rows .num { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }

/* 5. BANDE PHOTO — figure.seo-photo (photo de la maquette, coins arrondis, légende) */
.seo-photo { margin: 48px 0 0; }
.seo-photo img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: var(--radius-l); box-shadow: var(--shadow-soft); }
.seo-photo figcaption { margin-top: 12px; font-size: var(--fs-small); color: var(--stone); }

/* 6. ÉTAPES DATÉES — ol.seo-steps > li (b.seo-step-k = « J+1 », h3, p) */
.seo-steps { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 0; border-left: 2px solid var(--violet-tint); }
.seo-steps li { position: relative; padding: 4px 0 26px 26px; }
.seo-steps li::before { content: ""; position: absolute; left: -7px; top: 9px; width: 12px; height: 12px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 2px var(--violet); }
.seo-step-k { display: inline-block; font: 500 12.5px/1 var(--mono); color: var(--violet); background: var(--violet-tint); padding: 5px 8px; border-radius: 7px; }
.prose .seo-steps h3 { margin-top: 10px; }

/* 7. OUTIL — form.seo-tool (lignes de devis, totaux, impression) */
.seo-tool { display: grid; gap: 22px; }
.seo-lines { display: grid; gap: 10px; }
.seo-line { display: grid; grid-template-columns: minmax(0, 1fr) 90px 130px 120px 44px; gap: 10px; align-items: center; }
.seo-line-h { font: 500 11.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--stone); }
.seo-line .input { min-height: 44px; padding: 9px 12px; }
.seo-mini { display: block; min-width: 0; }
.seo-mini span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.seo-amt { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.seo-del { width: 44px; height: 44px; border-radius: 12px; border: 1.5px solid var(--line-2); background: transparent; color: var(--ink-2); cursor: pointer; font: 600 18px/1 var(--sans); }
.seo-del:hover { border-color: var(--bad); color: var(--bad); }
.seo-totals { display: grid; gap: 6px; justify-items: end; padding-top: 16px; border-top: 1px solid var(--line-2); font-variant-numeric: tabular-nums; }
.seo-totals p { display: flex; gap: 18px; color: var(--ink-2); }
.seo-totals .seo-ttc { font: 400 28px/1.2 var(--serif); color: var(--ink); }
.seo-tool-intro { color: var(--ink-2); }

/* 8. COMPARATIF À DEUX COLONNES — .comp.comp-duo : Invenio (2e colonne) mis en avant, colonnes de texte */
.comp-duo { min-width: 560px; }
.comp-duo td:nth-child(3) { background: none; }
.comp-duo td:nth-child(2), .comp-duo thead .hl { background: var(--violet-tint); }
.comp-duo td { text-align: left; padding: 14px 18px; }
.comp-duo thead th { text-align: left; }
.comp-duo td:nth-child(2) { color: var(--ink); font-weight: 600; }

/* 9. INDEX DE PAGES — .seo-index (groupes) > h3.seo-index-k + ul.seo-links */
.seo-index { margin-top: 48px; display: grid; gap: 40px; }
.seo-index-k { font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--violet); margin-bottom: 14px; }
.seo-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 0 24px; border-top: 1px solid var(--line-2); }
.seo-links li { border-bottom: 1px solid var(--line); }
.seo-links a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 10px 2px; color: var(--ink); text-decoration: none; font-weight: 500; }
.seo-links a::after { content: "→"; color: var(--stone); transition: transform var(--dur-1) var(--ease), color var(--dur-1); }
.seo-links a:hover { color: var(--violet); }
.seo-links a:hover::after { color: var(--violet); transform: translateX(3px); }

/* 10. MAILLAGE — section.seo-more : « Pour aller plus loin » (ul.seo-links) + nav.seo-map (plan des 4 index) */
.seo-map { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line-2); }
.seo-map h3 { font: 400 22px/1.2 var(--serif); margin-bottom: 10px; }
.seo-map h3 a { color: var(--ink); text-decoration: none; }
.seo-map h3 a:hover { color: var(--violet); text-decoration: underline; }
.seo-map ul { list-style: none; margin: 0; padding: 0; }
.seo-map li a { display: inline-block; padding: 7px 0; color: var(--ink-2); text-decoration: none; font-size: 15px; }
.seo-map li a:hover { color: var(--violet); text-decoration: underline; }

/* Chapô de l'appel final (texte clair sur la nuit) */
.seo-finale-lead { margin-top: 20px; max-width: 36em; font-size: var(--fs-lead); color: rgba(243, 235, 221, .86); }

/* Liens et cartes : pas de mouvement si l'utilisateur l'a demandé */
@media (prefers-reduced-motion: reduce) { .seo-links a::after { transition: none; } .seo-links a:hover::after { transform: none; } }

/* 11. ADAPTATIONS ÉCRAN */
@media (max-width: 1023px) {
  .seo-head { grid-template-columns: 1fr; }
  .seo-head .seo-object { max-width: 520px; }
  .seo-moment { grid-template-columns: 1fr; }
  .seo-when { grid-template-columns: auto 1fr; align-items: baseline; gap: 14px; }
  .seo-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
  .seo-when time { font-size: 32px; }
  .seo-photo img { aspect-ratio: 4 / 3; border-radius: var(--radius); }
  .seo-line { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; }
  .seo-line > :first-child { grid-column: 1 / -1; }
  .seo-line .seo-amt { grid-column: 1 / 3; text-align: left; }
  .seo-line .seo-del { grid-row: 2 / 4; grid-column: 3; align-self: center; }
  .seo-line-h { display: none; }
  .seo-mini span { position: static; width: auto; height: auto; clip: auto; display: block; margin-bottom: 4px; font-size: var(--fs-small); color: var(--ink-2); }
  .seo-line + .seo-line { padding-top: 12px; border-top: 1px dashed var(--line-2); }
  .seo-totals { justify-items: stretch; }
  .seo-totals p { justify-content: space-between; }
  .comp-duo { min-width: 0; }
  .comp-duo td { padding: 12px 8px; }
  .seo-map { grid-template-columns: 1fr; gap: 20px; }
}

/* 13. COMPARATIFS ET DOSSIER — sources, cases à relever, récapitulatif, bilan de l'outil « Suis-je prêt ? », liste de métiers */
.seo-src { display: block; margin-top: 8px; font-size: var(--fs-small); color: var(--stone); }
.seo-src a { color: var(--violet); }
.seo-arelever { display: inline-block; font: 500 12.5px/1 var(--mono); padding: 5px 8px; border-radius: 7px; background: var(--warn-tint); color: var(--warn); }
.comp-recap { min-width: 0; }
.comp-recap th a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); }
.comp-recap th a:hover { color: var(--violet); }
.seo-bilan { padding-top: 16px; border-top: 1px solid var(--line-2); color: var(--ink-2); }
.seo-bilan b { color: var(--ink); }
.seo-metiers { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 10px 32px; }
.seo-metiers li b { color: var(--ink); font-weight: 600; }
.comp-wrap + .micro { margin-top: 16px; }
@media print { .seo-src { display: none; } }

/* 12. IMPRESSION — l'outil n'imprime que le document */
@media print {
  .top, .skip, .foot, .page-head, .finale, .sec:not(.seo-print), .seo-noprint, .seo-del, .seo-add { display: none !important; }
  body, .sec, .card { background: #fff !important; color: #000 !important; box-shadow: none !important; }
  .sec { padding: 0 !important; }
  .sec::before { display: none !important; }
  .input { border: 0 !important; padding: 2px 0 !important; min-height: 0 !important; }
}