/* Kizly — guides SEO Etsy.

   Chargée APRÈS style.css, dont elle reprend tout : jetons de couleur (donc
   les deux thèmes), typographie, entête, pied, boutons. Ne s'ajoute ici que ce
   qui n'existe pas sur la vitrine : la mise en page d'un article, ses blocs, et
   les outils. Aucune couleur n'est écrite en dur — un bloc qui ne suit pas le
   thème sombre se voit tout de suite, et c'est la palette qui doit changer, pas
   ce fichier. */

.page-guide main { padding-bottom: 0; }

/* style.css donne à chaque <section> la respiration d'une section de vitrine
   (jusqu'à 7rem). Un article en enchaîne quinze : ce serait un écran de vide
   entre deux paragraphes. */
.guide section.bloc { padding-block: 0; margin-block: clamp(2.25rem, 5vw, 3.25rem); }

.guide {
  max-width: 52rem;
  padding-top: clamp(1.5rem, 4vw, 2.5rem);
  padding-bottom: clamp(2rem, 6vw, 4rem);
}
.guide p, .guide li { max-width: none; }
.guide h2 { font-size: clamp(1.45rem, 3vw, 1.9rem); margin-bottom: .75rem; scroll-margin-top: 6rem; }
.guide h3 { font-size: 1.08rem; }
.guide section[id], .guide .outil { scroll-margin-top: 6rem; }

/* --- fil d'Ariane, en-tête, méta */
.fil ol { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem;
  font-size: .85rem; color: var(--text-muted); }
.fil li + li::before { content: "›"; margin-right: .35rem; opacity: .6; }
.fil a { color: var(--text-muted); text-decoration: none; }
.fil a:hover { color: var(--accent); text-decoration: underline; }

.guide-tete h1 { font-size: clamp(2rem, 5vw, 2.9rem); margin-bottom: .75rem; }
.guide-surtitre {
  display: inline-block; margin-bottom: .75rem; padding: .2rem .65rem; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); font-size: .78rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}
.guide-chapo { font-size: clamp(1.08rem, 2vw, 1.22rem); color: var(--text); }
.guide-meta { font-size: .85rem; color: var(--text-muted); margin-top: -.25rem; }

/* --- En bref : la réponse d'abord. C'est le paragraphe qu'un assistant IA
   reprend quand il cite la page, et celui qu'un vendeur pressé lit seul. */
.en-bref {
  margin: 1.75rem 0; padding: 1.1rem 1.35rem;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--accent); border-radius: var(--radius);
}
.en-bref-titre { font-weight: 600; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .45rem; }
.en-bref p:last-child, .en-bref ul { margin-bottom: 0; }
.en-bref ul { padding-left: 1.15rem; }
.en-bref li { margin-bottom: .3rem; }

/* --- sommaire */
.sommaire { margin: 0 0 1rem; padding: 1rem 1.35rem; border: 1px dashed var(--border); border-radius: var(--radius); }
.sommaire-titre { font-weight: 600; margin-bottom: .4rem; }
.sommaire ol { margin: 0; padding-left: 1.2rem; columns: 2 16rem; column-gap: 2rem; }
.sommaire li { margin-bottom: .25rem; font-size: .95rem; break-inside: avoid; }
.sommaire a { color: var(--text); text-decoration: none; }
.sommaire a:hover { color: var(--accent); text-decoration: underline; }

.bloc-intro { color: var(--text-muted); }
.bloc-note { font-size: .92rem; color: var(--text-muted); margin-top: .9rem; }

/* --- listes et tableaux */
.liste-guide { padding-left: 1.25rem; }
.liste-guide li { margin-bottom: .5rem; }
.liste-guide li::marker { color: var(--accent); }

.tableau-cadre { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.tableau-guide { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 34rem; }
.tableau-guide th, .tableau-guide td { text-align: left; vertical-align: top; padding: .7rem .9rem; border-bottom: 1px solid var(--border); }
.tableau-guide thead th { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); background: var(--accent-soft); }
.tableau-guide tbody tr:last-child > * { border-bottom: 0; }
.tableau-guide tbody th { font-weight: 600; }

/* --- tags : une pastille par tag, sa longueur à côté. 20 caractères, c'est
   la limite d'Etsy : la voir écrite vaut mieux que la rappeler. */
.puces-tags { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .45rem; }
.puce-tag {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .4rem .3rem .75rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); font-size: .92rem;
}
.puce-tag small {
  min-width: 1.6rem; padding: .05rem .35rem; border-radius: 999px; text-align: center;
  background: var(--accent-soft); color: var(--accent); font-size: .72rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.puce-tag.etat-ko { border-color: var(--accent); background: var(--accent-soft); }
.puce-tag.etat-ko small { background: var(--accent); color: var(--accent-text); }
.puce-tag.etat-doublon { border-style: dashed; }
.puce-tag.etat-seul small { background: color-mix(in srgb, var(--ambre) 18%, transparent); color: var(--ambre); }
.tags-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

/* --- titres avant / après */
.aa { margin-bottom: 1rem; padding: 1rem 1.15rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.aa p { margin-bottom: .45rem; }
.aa-etiquette {
  display: inline-block; min-width: 4.6rem; margin-right: .6rem; padding: .05rem .5rem;
  border-radius: 999px; font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; text-align: center;
}
.aa-faible .aa-etiquette { background: color-mix(in srgb, var(--text-muted) 16%, transparent); color: var(--text-muted); }
.aa-faible .aa-texte { color: var(--text-muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--text-muted) 60%, transparent); }
.aa-fort .aa-etiquette { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.aa-fort .aa-texte { font-weight: 600; }
.aa-fort small { margin-left: .5rem; color: var(--text-muted); font-size: .8rem; white-space: nowrap; }
.aa-pourquoi { font-size: .92rem; color: var(--text-muted); margin-bottom: 0 !important; }

/* --- erreurs fréquentes */
.erreurs { list-style: none; counter-reset: erreur; padding: 0; }
.erreurs li {
  counter-increment: erreur; position: relative; margin-bottom: .9rem;
  padding: .9rem 1.1rem .9rem 3.2rem; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border);
}
.erreurs li::before {
  content: counter(erreur); position: absolute; left: 1rem; top: .95rem;
  width: 1.55rem; height: 1.55rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: .85rem;
}
.erreur-quoi { font-weight: 600; margin-bottom: .3rem; }
.erreur-remede { margin-bottom: 0; color: var(--text-muted); }

/* --- étapes et séquence de photos */
.etapes-guide { list-style: none; counter-reset: etape; padding: 0; }
.etapes-guide li { counter-increment: etape; position: relative; padding-left: 3rem; margin-bottom: 1.1rem; }
.etapes-guide li::before {
  content: counter(etape, decimal-leading-zero); position: absolute; left: 0; top: .05rem;
  font-family: var(--serif); font-size: 1.25rem; color: var(--accent);
}
.etapes-guide h3 { margin-bottom: .3rem; }
.etapes-guide p { margin-bottom: .4rem; }

.sequence-photos { list-style: none; counter-reset: photo; padding: 0; display: grid; gap: .6rem; }
@media (min-width: 44rem) { .sequence-photos { grid-template-columns: 1fr 1fr; } }
.sequence-photos li {
  counter-increment: photo; display: grid; grid-template-columns: auto 1fr; column-gap: .75rem;
  padding: .8rem 1rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border);
}
.sequence-photos li::before {
  content: counter(photo); grid-row: span 2; width: 1.7rem; height: 1.7rem; border-radius: 6px;
  display: grid; place-items: center; background: var(--accent); color: var(--accent-text); font-weight: 600; font-size: .85rem;
}
.sequence-photos span { color: var(--text-muted); font-size: .93rem; }

/* --- encadrés */
.bloc-encadre { padding: 1.1rem 1.35rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); }
.bloc-encadre h2 { font-size: 1.15rem; font-family: var(--sans); }
.bloc-encadre p:last-child { margin-bottom: 0; }
.encadre-attention { border-left: 4px solid var(--ambre); }
.encadre-attention h2 { color: var(--ambre); }
.encadre-info { border-left: 4px solid var(--bleu); }

/* --- appel vers Kizly : une bande sombre dans les DEUX thèmes, comme le
   bandeau de conclusion du calculateur de la vitrine. */
.appel-kizly {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem;
  margin-block: 2.25rem; padding: 1.25rem 1.5rem; border-radius: calc(var(--radius) + 4px);
  background: #241A20; color: #F4ECF0;
}
.appel-kizly > div { flex: 1 1 22rem; }
.appel-kizly p { margin-bottom: 0; color: #F4ECF0; }
.appel-kizly p + p { margin-top: .3rem; color: #D9C9D1; }
.appel-titre { font-family: var(--serif); font-size: 1.2rem; }
.appel-kizly .btn { --btn-teinte: #F2789B; --btn-encre: #171215; flex: none; }
.appel-kizly a:not(.btn) { color: #F2789B; }
.appel-mini { margin-block: 1.5rem 0; }

/* --- FAQ en <details> : repliée, mais présente dans le HTML — un moteur la
   lit entière, un humain n'ouvre que ce qui l'intéresse. */
.faq-guide details { border-bottom: 1px solid var(--border); }
.faq-guide details:first-child { border-top: 1px solid var(--border); }
.faq-guide summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1rem 0;
}
.faq-guide summary::-webkit-details-marker { display: none; }
.faq-guide summary h3 { margin: 0; font-family: var(--sans); font-weight: 600; font-size: 1.02rem; line-height: 1.4; }
.faq-guide summary::after {
  content: "+"; flex: none; width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); font-size: 1.2rem; transition: transform .2s ease;
}
.faq-guide details[open] summary::after { transform: rotate(45deg); }
.faq-reponse { padding: 0 0 1rem; color: var(--text-muted); }
.faq-reponse p:last-child { margin-bottom: 0; }

/* --- cartes de liens et catalogue */
.liens-guides { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
@media (min-width: 40rem) { .liens-guides { grid-template-columns: 1fr 1fr; } }
.liens-guides a {
  display: flex; flex-direction: column; gap: .25rem; height: 100%;
  padding: .95rem 1.1rem; border-radius: var(--radius); text-decoration: none;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  transition: border-color .2s ease, transform .2s ease;
}
.liens-guides a:hover { border-color: var(--accent); transform: translateY(-2px); }
.liens-guides strong { color: var(--accent); }
.liens-guides span { font-size: .9rem; color: var(--text-muted); }
.catalogue h3 { margin: 1.5rem 0 .75rem; }
.catalogue h3:first-child { margin-top: 0; }

.bloc-sources ul { padding-left: 1.15rem; font-size: .92rem; }
.bloc-sources li { margin-bottom: .35rem; }

/* ================================================================ outils */

.outil {
  padding: clamp(1.1rem, 3vw, 1.6rem); border-radius: calc(var(--radius) + 4px);
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 1px 0 var(--border), 0 18px 40px -28px color-mix(in srgb, var(--accent) 45%, transparent);
}
.outil-sans-js { color: var(--text-muted); font-style: italic; }
.js .outil-sans-js { display: none; }

.champ { margin-bottom: .9rem; }
.champ label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .3rem; }
.champ label small { font-weight: 400; color: var(--text-muted); }
.champ input, .champ textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: .6rem .75rem;
}
.champ textarea { resize: vertical; min-height: 5rem; line-height: 1.5; }
.champ input:focus, .champ textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.champ-aide { font-size: .8rem; color: var(--text-muted); margin: .25rem 0 0; min-height: 1.1em; font-variant-numeric: tabular-nums; }
.champ-aide:empty { min-height: 0; margin: 0; }

.gt-grille { display: grid; gap: 0 1rem; }
@media (min-width: 40rem) { .gt-grille { grid-template-columns: 1fr 1fr; } }

.outil-resultat { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.outil-resultat h3 { margin: 1.1rem 0 .5rem; font-family: var(--sans); font-size: .95rem; }
.vt-resume { font-size: 1rem; }
.vt-resume strong { font-variant-numeric: tabular-nums; font-size: 1.15rem; }
.vt-alertes { list-style: none; padding: 0; margin: .5rem 0 1rem; }
.vt-alertes li, .score-avis li {
  position: relative; padding: .25rem 0 .25rem 1.7rem; font-size: .94rem; margin-bottom: .2rem;
}
.vt-alertes li::before, .score-avis li::before {
  position: absolute; left: 0; top: .3rem; width: 1.2rem; height: 1.2rem; border-radius: 50%;
  display: grid; place-items: center; font-size: .72rem; font-weight: 700;
}
.avis-ko::before { content: "!"; background: var(--accent-soft); color: var(--accent); }
.avis-ok::before { content: "✓"; background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.avis-ok { color: var(--text-muted); }

.barre { height: .5rem; border-radius: 999px; background: color-mix(in srgb, var(--border) 80%, transparent); overflow: hidden; }
.barre > span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #F08A5D); transition: width .35s ease; }
.barre.ko > span { background: var(--accent); }

/* --- note sur 100 : un anneau en conic-gradient, sans SVG ni calcul d'arc. */
.score-tete { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; margin-bottom: 1rem; }
.score-cercle {
  --note: 0; --teinte: var(--accent);
  width: 7rem; height: 7rem; border-radius: 50%; flex: none; display: grid; place-content: center; text-align: center;
  background:
    radial-gradient(closest-side, var(--surface) 78%, transparent 79%),
    conic-gradient(var(--teinte) calc(var(--note) * 1%), color-mix(in srgb, var(--border) 85%, transparent) 0);
}
.score-cercle strong { font-family: var(--serif); font-size: 2.1rem; line-height: 1; font-variant-numeric: tabular-nums; }
.score-cercle span { font-size: .75rem; color: var(--text-muted); }
.score-cercle.score-fort { --teinte: var(--success); }
.score-cercle.score-moyen { --teinte: var(--ambre); }
.score-force { font-weight: 600; font-size: 1.15rem; margin-bottom: .2rem; }
.score-force.score-fort { color: var(--success); }
.score-force.score-moyen { color: var(--ambre); }
.score-force.score-faible { color: var(--accent); }
.score-phrase { font-size: .9rem; color: var(--text-muted); margin: 0; }
.score-tete > div:last-child { flex: 1 1 16rem; }
.score-parties { display: grid; gap: .6rem; }
.score-partie p { display: flex; justify-content: space-between; margin-bottom: .25rem; font-size: .92rem; }
.score-avis { list-style: none; padding: 0; margin: 0; }

/* --- aperçu de titre */
.apercu { margin: .75rem 0; padding: .75rem .9rem; border-radius: 8px; background: var(--bg); border: 1px dashed var(--border); }
.apercu-etiquette { font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .2rem; }
.apercu-titre { margin: 0; font-weight: 600; }

/* --- générateur : pastilles à cocher */
.gt-propositions { list-style: none; padding: 0; margin: .5rem 0 1rem; display: flex; flex-wrap: wrap; gap: .45rem; }
.puce-choix {
  display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
  padding: .3rem .45rem .3rem .55rem; border-radius: 999px; border: 1px solid var(--border);
  background: var(--bg); font-size: .92rem; user-select: none;
}
.puce-choix input { accent-color: var(--accent); margin: 0; }
.puce-choix small { color: var(--text-muted); font-size: .72rem; font-variant-numeric: tabular-nums; }
.puce-choix:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.puce-choix:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.gt-compteur { font-weight: 600; font-variant-numeric: tabular-nums; }

/* --- fiche assemblée */
.fiche-bloc { margin-bottom: 1rem; }
.fiche-bloc-tete { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .35rem; }
.fiche-bloc-tete h3 { margin: 0 !important; }
.fiche-bloc-tete small { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.fiche-texte {
  margin: 0; padding: .75rem .9rem; border-radius: 8px; background: var(--bg); border: 1px solid var(--border);
  white-space: pre-wrap; font: inherit; font-size: .95rem; line-height: 1.55;
}
.btn-petit { --btn-px: .9rem; padding-block: .35rem; font-size: .85rem; }

/* --- checklist */
.cl-tete { position: sticky; top: 4.5rem; z-index: 2; margin: -.25rem 0 1rem; padding: .5rem 0; background: var(--surface); }
.cl-compte { margin-bottom: .4rem; }
.cl-compte strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.cl-groupe { border: 0; padding: 0; margin: 0 0 1.1rem; }
.cl-groupe legend { font-weight: 600; font-family: var(--serif); font-size: 1.08rem; margin-bottom: .45rem; }
.cl-item {
  display: flex; gap: .7rem; align-items: flex-start; padding: .5rem .6rem; border-radius: 8px; cursor: pointer;
}
.cl-item:hover { background: var(--accent-soft); }
.cl-item input { margin-top: .3rem; accent-color: var(--success); width: 1.05rem; height: 1.05rem; flex: none; }
.cl-item:has(input:checked) span { color: var(--text-muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--text-muted) 50%, transparent); }
.cl-termine .cl-compte { color: var(--success); }

@media (prefers-reduced-motion: reduce) {
  .barre > span, .liens-guides a, .faq-guide summary::after { transition: none; }
}