/* Les pages SEO en « Roue du thème » (07/10/2026) : ce qui s'ajoute à plateau.css (accueil-plateau).
   Générées par scripts/build-seo-roue.py. Mobile d'abord, confort à partir de 1024 px. */

/* la Roue des niveaux : des noms plus longs que ceux des cases */
.nom-case--long { font-size: 11.5px; letter-spacing: .1em; }

/* vos prénoms (07/10) : le couple, deux prénoms, le carnet */
.prenoms { margin: 0 0 24px; padding: 16px 16px 14px; max-width: 460px; box-sizing: border-box; border: 1px solid var(--v-or-fil); border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--v-carte-2) 88%, transparent), color-mix(in srgb, var(--v-carte) 88%, transparent)); }
.prenoms__titre { margin: 0 0 12px; font: 600 .62rem/1.3 var(--v-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--v-or); }
.prenoms__couple { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.prenoms__couple button { appearance: none; cursor: pointer; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--v-or-fil); background: transparent;
  font: italic 500 .95rem/1 var(--v-serif); color: var(--v-encre-2); transition: background-color .2s, color .2s, border-color .2s; }
.prenoms__couple button[aria-pressed="true"] { background: linear-gradient(180deg, var(--v-or-clair), var(--v-or)); border-color: var(--v-or); color: #1c0e05; }
.prenoms__couple button:focus-visible, .prenoms input:focus-visible { outline: 2px solid var(--v-or); outline-offset: 2px; }
.prenoms__champs { display: flex; align-items: flex-end; gap: 10px; }
.prenoms__champs label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.prenoms__champs label span { font: 600 .58rem/1 var(--v-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--v-encre-3); }
.prenoms input { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--v-or-fil); background: rgba(0, 0, 0, .28);
  font: 500 1.15rem/1.2 var(--v-serif); color: var(--v-encre); }
.prenoms__et { padding: 0 0 10px; font: italic 500 1.4rem/1 var(--v-serif); color: var(--v-or); }
.prenoms__carnet { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 0; font: 500 .88rem/1.3 var(--v-sans); color: var(--v-or); text-decoration: underline; text-underline-offset: 3px; }
.velours .prenoms__carnet { color: var(--v-or); }
.prenoms__carnet svg, .carnet-bande svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.carnet-bande { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 980px; margin: 22px auto 0; padding: 18px 20px; box-sizing: border-box;
  border: 1px dashed var(--v-or-fil); border-radius: 12px; background: color-mix(in srgb, var(--v-carte) 70%, transparent); }
.carnet-bande b { display: block; font: 500 1.15rem/1.3 var(--v-serif); color: var(--v-encre); margin: 0 0 4px; }
.carnet-bande span { font: 400 .92rem/1.55 var(--v-sans); color: var(--v-encre-2); }
.carnet-bande b span { font: inherit; color: var(--v-or); }

/* le sommaire des quatre niveaux */
.crans-seo { list-style: none; margin: 0 auto; padding: 0; max-width: 980px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cran-seo a { display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; box-sizing: border-box; padding: 20px 14px 18px; text-align: center; text-decoration: none;
  border: 1px solid var(--v-or-fil); border-radius: 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--v-carte-2) 92%, transparent), color-mix(in srgb, var(--v-carte) 92%, transparent));
  transition: border-color .25s, transform .25s; }
.cran-seo a:hover, .cran-seo a:focus-visible { border-color: var(--v-or); transform: translateY(-3px); }
.cran-seo__n { font: 600 .6rem/1 var(--v-sans); letter-spacing: .26em; text-transform: uppercase; color: var(--v-or); }
.cran-seo__ico svg { width: 26px; height: 26px; fill: none; stroke: var(--v-or-clair); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cran-seo b { font: 500 1.2rem/1.2 var(--v-serif); color: var(--v-encre); }
.cran-seo small { font: 400 .76rem/1.45 var(--v-sans); color: var(--v-encre-3); }
.cran-seo--complet a { border-style: dashed; }

/* un niveau : l'en-tête, la phrase du niveau, le catalogue */
.niveau__chapo { font: 400 1rem/1.65 var(--v-sans); color: var(--v-encre-2); margin: 0 auto 18px; max-width: 56ch; }
.idees { list-style: none; margin: 0 auto; padding: 0; max-width: 1040px; display: grid; grid-template-columns: 1fr; gap: 10px; counter-reset: idee; }
.idee { position: relative; padding: 15px 16px 15px 54px; border-radius: 10px; counter-increment: idee;
  background: color-mix(in srgb, var(--v-carte) 84%, transparent); border: 1px solid color-mix(in srgb, var(--v-or-fil) 55%, transparent); }
.idee::before { content: counter(idee); position: absolute; left: 14px; top: 14px; width: 26px; height: 26px; border-radius: 50%; box-sizing: border-box;
  border: 1px solid var(--v-or-fil); font: 500 .78rem/24px var(--v-serif); text-align: center; color: var(--v-or); }
.idee p { margin: 0; font: 400 1rem/1.6 var(--voix-roue, 'Lora'), Georgia, serif; color: var(--v-encre); }
.niveau__pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; margin: 28px 0 0; text-align: center; }
.niveau__note { font: italic 400 .92rem/1.4 var(--v-serif); color: var(--v-encre-3); }

/* la notice : les sous-titres et la FAQ de la page d'origine */
.notice h2 + p, .notice h2 + h3 { margin-top: 0; }
.notice h2:not(:first-child) { margin-top: 1.8em; }
.notice h3 { font: 500 1.18rem/1.3 var(--v-serif); color: var(--v-encre); margin: 1.6em 0 .6em; }
.notice ul { margin: 0 0 1em; padding-left: 1.1em; color: var(--v-encre-2); }
.notice li { margin: 0 0 .6em; font: 400 .98rem/1.7 var(--v-sans); }
.notice aside { margin: 0; }
.notice ol.nue, .prose-garde ol.nue { list-style: none; padding-left: 0; }
.notice .faq-q { display: block; margin: 0 0 4px; font: 600 1rem/1.45 var(--v-sans); color: var(--v-encre); }

/* les sections gardées de la page d'origine (comparatif, quinze idées, sept soirées, deux cents actions et vérités) */
.prose-garde__in { max-width: 860px; margin: 0 auto; }
.prose-garde h2 { text-align: center; font: 500 clamp(1.8rem, 4vw, 2.6rem)/1.15 var(--v-serif); margin: 0 0 .5em; }
.prose-garde h2 em { font-style: italic; color: var(--v-or); }
.prose-garde h3 { font: 500 1.25rem/1.3 var(--v-serif); color: var(--v-encre); margin: 1.6em 0 .5em; }
.prose-garde p, .prose-garde li { font: 400 .98rem/1.7 var(--v-sans); color: var(--v-encre-2); }
.prose-garde p { margin: 0 0 .9em; }
.prose-garde strong, .prose-garde b { color: var(--v-encre); }
.prose-garde a { color: var(--v-or); }
.prose-garde ul, .prose-garde ol { padding-left: 1.2em; margin: 0 0 1em; }
.prose-garde--aov p { padding: 12px 14px; margin: 0 0 8px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--v-or-fil) 55%, transparent);
  background: color-mix(in srgb, var(--v-carte) 80%, transparent); font-family: var(--voix-roue, 'Lora'), Georgia, serif; color: var(--v-encre); }
.prose-garde--aov p b { font: 600 .62rem/1 var(--v-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--v-or); margin-right: 6px; }
.prose-garde--aov .carnet-bande { margin: 0 auto 26px; }
.table-defile { overflow-x: auto; margin: 0 0 1.4em; border: 1px solid var(--v-or-fil); border-radius: 10px; -webkit-overflow-scrolling: touch; }
.table-defile table { width: 100%; min-width: 620px; border-collapse: collapse; font: 400 .9rem/1.45 var(--v-sans); }
.table-defile th, .table-defile td { padding: 10px 12px; border-bottom: 1px solid color-mix(in srgb, var(--v-or-fil) 50%, transparent); text-align: left; vertical-align: top; color: var(--v-encre-2); }
.table-defile th { color: var(--v-encre); font-weight: 600; background: color-mix(in srgb, var(--v-carte-2) 80%, transparent); }
.table-defile tr:last-child td { border-bottom: 0; }

/* le sommaire à trois niveaux (les préliminaires), quatre prénoms (le groupe), l'icône d'un thème (les questions) */
.prenoms--quatre { max-width: 520px; }
.prenoms__champs--quatre { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.theme-ico { width: 30px; height: 30px; vertical-align: -4px; margin-right: 8px; fill: none; stroke: var(--v-or); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.idees--questions { counter-reset: idee; }
.idee__type { display: inline-block; margin-right: 6px; padding: 3px 7px; border-radius: 4px; font: 600 .56rem/1 var(--v-sans); letter-spacing: .18em; text-transform: uppercase; vertical-align: 2px;
  color: #1c0e05; background: var(--v-or); }
.idee__type--v { color: var(--v-or-clair); background: transparent; border: 1px solid var(--v-or-fil); }

/* les pages sœurs */
.soeurs { list-style: none; margin: 0 auto; padding: 0; max-width: 1040px; display: grid; grid-template-columns: 1fr; gap: 10px; }
.soeurs a { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; border-radius: 10px; text-decoration: none;
  border: 1px solid var(--v-or-fil); background: color-mix(in srgb, var(--v-carte) 80%, transparent);
  font: italic 500 1.05rem/1.3 var(--v-serif); color: var(--v-encre); transition: border-color .2s, transform .2s; }
.soeurs a:hover, .soeurs a:focus-visible { border-color: var(--v-or); transform: translateY(-2px); }
.soeurs svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--v-or); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rubrique--soeurs { padding-bottom: 20px; }

/* la vie : les idées montent au défilement, là où le navigateur sait le faire sans script */
@supports (animation-timeline: view()) {
  .idee, .cran-seo { animation: seo-monte linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
  @keyframes seo-monte { from { opacity: 0; translate: 0 22px; } }
}
@media (prefers-reduced-motion: reduce) { .idee, .cran-seo { animation: none; } }

/* téléphone : le titre, la voix, la Roue (le jouet d'abord), puis vos prénoms */
@media (max-width: 999px) {
  .page-seo .seuil .bulle { order: 3; margin-bottom: 14px; }
  .page-seo .prenoms { order: 5; max-width: none; }
  .page-seo .ailes { order: 6; } .page-seo .seuil__actes { order: 7; }
}

@media (min-width: 700px) {
  .soeurs { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .carnet-bande { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
  .crans-seo { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .crans-seo--3 { grid-template-columns: repeat(3, 1fr); max-width: 760px; }
  .idees { grid-template-columns: 1fr 1fr; gap: 12px 16px; }
  .soeurs { grid-template-columns: repeat(3, 1fr); }
}