/* Feuille de style du site : direction « Illustré et chaleureux ».
   Encre vert sombre, papier crème, jaune soleil, tomate ; cartes blanches à ombre dure ; personnages dessinés. */
:root {
  --ink: #173430;
  --ink2: #3F5A55;
  --paper: #FFFDF8;
  --sun: #FFD24D;
  --tomato: #FF5E3A;
  --orange: #FFA62B;
  --teal: #2FB3A6;
  --rasp: #F2557D;
  --sky: #B7D3F0;
  --mint: #BFE8CF;
  --grass: #7DCB9A;
  --line: #C9D3CF;
  --disp: 'Bricolage Grotesque', system-ui, sans-serif;
  --body: 'Figtree', system-ui, -apple-system, sans-serif;
  --hand: 'Caveat', cursive;
  --radius: 20px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; color: var(--ink); background: var(--paper);
  font: 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: var(--ink); text-decoration-color: var(--tomato); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--tomato); }
img, svg { max-width: 100%; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 760px; }

/* ── Tons des bandeaux ── */
.t-sun { background: var(--sun); --acc: #fff; --beam: #FFF4C4; }
.t-peach { background: #FFE6DE; }
.t-mint { background: #EAF6EE; }
.t-sky { background: #E3EEFA; }
.t-paper { background: var(--paper); }
.t-gen { background: #FFE6DE; }
.t-mg { background: #FFEBCB; }
.t-man { background: #FDE1E9; }
.t-pro { background: #D8F1EC; }
.t-ref { background: #E3EEFA; }

/* ── En-tête ── */
.top { position: relative; z-index: 20; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; padding-bottom: 10px; }
.logo { display: inline-flex; align-items: center; gap: 9px; font: 800 26px/1 var(--disp); letter-spacing: -.04em; color: var(--ink); text-decoration: none; white-space: nowrap; text-transform: lowercase; }
.logo:hover { color: var(--ink); }
.logo .mark { width: 32px; height: 32px; flex: none; }
.nav { display: flex; align-items: center; gap: 6px; }
.nav a { color: var(--ink); text-decoration: none; font: 600 15px var(--body); padding: 8px 10px; border-radius: 99px; }
.nav a:hover { text-decoration: underline; text-decoration-color: var(--tomato); text-decoration-thickness: 2px; text-underline-offset: 4px; color: var(--ink); }
.nav a.hide-s { display: none; }
.nav a.acct { display: inline-flex; align-items: center; gap: 8px; margin-left: 6px; }
.nav a.acct svg { width: 26px; height: 26px; flex: none; transition: transform .15s; }
.nav a.acct:hover svg { transform: rotate(-10deg) scale(1.08); }
.nav a.acct .acct-t { display: none; }
.nav a.pill, .pill {
  display: inline-flex; align-items: center; gap: 8px; border: 3px solid var(--ink); background: #fff; border-radius: 99px;
  padding: 7px 14px; font: 700 14px var(--body); text-decoration: none; color: var(--ink); box-shadow: 3px 3px 0 var(--ink); white-space: nowrap;
}
.nav a.pill:hover { text-decoration: none; transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }

/* ── Boutons ── */
.btn, .go {
  display: inline-flex; justify-content: center; align-items: center; gap: 10px; background: var(--tomato); color: #fff !important;
  border: 3px solid var(--ink); border-radius: 16px; padding: 14px 24px; font: 800 19px var(--disp); letter-spacing: -.01em;
  text-decoration: none; box-shadow: 4px 4px 0 var(--ink); transition: transform .12s, box-shadow .12s; cursor: pointer; white-space: nowrap;
}
.btn:hover, .go:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); color: #fff; }
.btn.ghost { background: #fff; color: var(--ink) !important; }
.btn.sun, .go.sun { background: var(--sun); color: var(--ink) !important; }

/* ── Bandeau de tête des pages ── */
.phead { border-bottom: 3px solid var(--ink); }
.wrap.phead-in { display: grid; gap: 16px; padding-top: 4px; padding-bottom: 34px; align-items: end; }
.phead-in .lead { margin-bottom: 0; }
.phead-art { display: flex; justify-content: center; align-items: flex-end; margin-bottom: -37px; }
.phead-art .ch { width: 170px; height: 200px; }
.phead-art .tag { font: 700 26px/1 var(--hand); transform: rotate(-4deg); max-width: 12ch; text-align: center; margin: 0 0 90px -10px; }

/* ── Fil d'Ariane ── */
.crumbs { font: 600 13px var(--body); color: var(--ink2); margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs li:not(:last-child)::after { content: "›"; margin-left: 6px; color: var(--ink2); }
.crumbs a { color: var(--ink2); text-decoration: none; }
.crumbs a:hover { color: var(--tomato); }

/* ── Titres ── */
h1, h2, h3 { font-family: var(--disp); letter-spacing: -.03em; color: var(--ink); }
h1 { font-weight: 800; font-size: clamp(38px, 7vw, 68px); line-height: 1; margin: 14px 0 16px; letter-spacing: -.04em; max-width: 20ch; }
h1 em, h2 em { font-style: normal; color: var(--tomato); }
h2 { font-weight: 800; font-size: clamp(28px, 4.4vw, 42px); line-height: 1.05; margin: 56px 0 14px; }
h3 { font-weight: 800; font-size: 22px; line-height: 1.15; margin: 0 0 8px; letter-spacing: -.02em; }
.kicker, .kick { display: inline-block; font: 700 26px/1 var(--hand); color: var(--tomato); margin: 18px 0 0; transform: rotate(-2deg); transform-origin: left; }
.t-sun .kicker, .t-sun .kick { color: var(--ink); }
.lead { font-size: clamp(18px, 2.4vw, 21px); color: var(--ink); max-width: 50ch; margin: 0 0 22px; line-height: 1.5; }
.sub { color: var(--ink2); margin: 0 0 18px; max-width: 62ch; }
p { margin: 0 0 14px; }
.prose p, .prose li { color: var(--ink); }
.prose h2 { font-size: clamp(26px, 4vw, 34px); margin-top: 44px; }
.prose ul { padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--tomato); }
.muted { color: var(--ink2); }
.wrap.page { padding-top: 48px; }
.page > h2:first-child, .page > .narrow > h2:first-child { margin-top: 0; }

/* ── Cartes ── */
.grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
.card {
  display: block; position: relative; background: #fff; border: 3px solid var(--ink); border-radius: var(--radius); padding: 18px 20px 20px;
  color: var(--ink); text-decoration: none; box-shadow: 4px 4px 0 var(--ink); transition: transform .12s, box-shadow .12s;
}
a.card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); color: var(--ink); }
.card .k { display: block; color: var(--ink2); font: 700 12px var(--body); text-transform: uppercase; letter-spacing: .09em; }
.card h3 { margin: 6px 0 8px; }
.card p { margin: 0; color: var(--ink2); font-size: 15.5px; line-height: 1.5; }
.card .meta { color: var(--ink); font: 700 13px var(--body); margin-top: 12px; display: inline-block; border: 2px solid var(--ink); border-radius: 99px; padding: 2px 10px; background: var(--paper); }
.card.hot { background: #FFE6DE; }
.card.with-ch { padding-right: 110px; min-height: 150px; }
.card.with-ch .ch { position: absolute; right: 8px; bottom: 8px; width: 92px; height: 110px; }
.card.bar-top { border-top-width: 12px; border-top-color: var(--c, var(--ink)); }

.chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0 0 14px; }
.chips a, .chips > li > span {
  display: inline-block; font: 700 14px var(--body); text-decoration: none; background: #fff; border: 2.5px solid var(--ink); color: var(--ink);
  border-radius: 99px; padding: 6px 14px; box-shadow: 2px 2px 0 var(--ink); transition: transform .12s, box-shadow .12s;
}
.chips a:hover { background: var(--sun); color: var(--ink); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.chips a span { font-weight: 500; color: var(--ink2); }
.chips.num a { min-width: 46px; text-align: center; }

/* ── Blocs de lecture ── */
.block { background: #fff; border: 3px solid var(--ink); border-radius: var(--radius); padding: 18px 22px; margin: 0 0 16px; }
.block .k { color: var(--ink2); font: 700 12px var(--body); text-transform: uppercase; letter-spacing: .09em; display: block; margin-bottom: 6px; }
.block p { color: var(--ink); }
.block p:last-child { margin-bottom: 0; }
.block .ex { color: var(--ink2); font-style: italic; }
.block.try { background: var(--sun); box-shadow: 6px 6px 0 var(--ink); transform: rotate(-.6deg); margin: 22px 0; }
.block.try .k { color: var(--ink); }
.block.warn, .block.bad { background: #FFE6DE; }
.block.good { background: #E4F5EA; }
.block.agree { background: var(--paper); border-style: dashed; border-width: 2.5px; }
.two { display: grid; gap: 16px; grid-template-columns: 1fr; margin: 18px 0; }
.two .block { margin: 0; }

/* ── Faits (carte d'une personnalité) ── */
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0 0 18px; background: #fff; border: 3px solid var(--ink); border-radius: 18px; overflow: hidden; box-shadow: 4px 4px 0 var(--ink); }
.fact { padding: 12px 16px; text-decoration: none; color: var(--ink); display: block; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); margin: 0 -2px -2px 0; }
a.fact:hover { background: var(--sun); color: var(--ink); }
.fact small { display: block; color: var(--ink2); font: 700 11px var(--body); text-transform: uppercase; letter-spacing: .08em; }
.fact b { font: 800 19px/1.2 var(--disp); color: var(--ink); letter-spacing: -.02em; }

/* ── Schéma ── */
.chart-layout { display: grid; gap: 26px; grid-template-columns: 1fr; align-items: start; }
.graph { background: #fff; border: 3px solid var(--ink); border-radius: 24px; padding: 14px; max-width: 460px; width: 100%; justify-self: center; box-shadow: 6px 6px 0 var(--ink); }
.graph svg { display: block; width: 100%; height: auto; }
.legend { display: flex; gap: 8px 16px; justify-content: center; color: var(--ink); font: 600 13px var(--body); margin-top: 16px; flex-wrap: wrap; }
.legend i { display: inline-block; width: 13px; height: 13px; border-radius: 99px; vertical-align: -2px; margin-right: 6px; border: 2px solid var(--ink); }
svg .ctr:hover circle.body { fill: #FFF1C2; }
svg .ctr:hover circle.body.on { fill: #FFE07F; }

/* ── Tableaux de fréquences ── */
.bars { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 12px; }
.bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; }
.bars .lbl a, .bars .lbl { color: var(--ink); font-weight: 700; text-decoration: none; }
.bars .lbl a:hover { color: var(--tomato); }
.bars .val { font: 800 18px var(--disp); color: var(--ink); text-align: right; }
.bars .bar { grid-column: 1 / -1; height: 16px; background: #fff; border: 2.5px solid var(--ink); border-radius: 99px; overflow: hidden; }
.bars .bar i { display: block; height: 100%; background: var(--tomato); border-right: 2.5px solid var(--ink); min-width: 6px; background-image: repeating-linear-gradient(-45deg, transparent 0 8px, rgba(23,52,48,.12) 8px 10px); }
.bars li:nth-child(2n) .bar i { background-color: var(--orange); }
.bars li:nth-child(3n) .bar i { background-color: var(--teal); }

/* ── FAQ ── */
.faq { margin-top: 10px; }
.faq details { background: #fff; border: 3px solid var(--ink); border-radius: 18px; padding: 16px 20px; margin-bottom: 12px; }
.faq details[open] { box-shadow: 4px 4px 0 var(--ink); }
.faq summary { cursor: pointer; font: 800 19px/1.3 var(--disp); letter-spacing: -.01em; list-style: none; position: relative; padding-right: 36px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: -2px; width: 26px; height: 26px; border-radius: 50%; background: var(--sun); border: 2.5px solid var(--ink); display: grid; place-items: center; font: 800 18px/1 var(--body); }
.faq details[open] summary::after { content: "×"; background: var(--tomato); color: #fff; }
.faq details p { margin: 12px 0 0; color: var(--ink); }

/* ── Bandeau d'appel ── */
.band {
  margin: 72px 0 0; background: var(--tomato); color: #fff; border: 3px solid var(--ink); border-radius: 26px; padding: 26px 22px;
  display: grid; gap: 16px; align-items: center; box-shadow: 6px 6px 0 var(--ink); --acc: #FFD24D; position: relative;
}
.band h2 { margin: 0 0 6px; font-size: clamp(26px, 4vw, 38px); color: #fff; }
.band p { margin: 0; color: #fff; font-size: 17px; }
.band .fin-cta { display: flex; align-items: flex-end; gap: 4px; }
.band .runner { width: 96px; height: 112px; margin: -30px 0 -8px; flex: none; }

/* ── Pied de page ── */
.foot { background: var(--ink); color: #D5E3DE; font-size: 14px; padding: 50px 0 40px; margin-top: 88px; }
.foot .top-row { display: grid; gap: 30px; grid-template-columns: 1fr; }
.foot .logo { color: #fff; margin-bottom: 12px; }
.foot .tagline { margin: 0; max-width: 34ch; }
.foot .cols { display: grid; gap: 22px; grid-template-columns: 1fr 1fr; }
.foot h4 { color: #fff; font: 700 15px var(--body); margin: 0 0 10px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.foot a { color: #D5E3DE; text-decoration: none; }
.foot a:hover { color: var(--sun); text-decoration: underline; }
.foot .legal { border-top: 1px solid #ffffff26; padding-top: 18px; margin-top: 30px; }
.foot .legal p { margin: 0 0 8px; }
.home + .foot, .foot.flush { margin-top: 0; }

.sources { font-size: 14px; color: var(--ink2); }
.sources a { word-break: break-word; }
table.plain { border-collapse: collapse; width: 100%; font-size: 15px; }
table.plain td, table.plain th { text-align: left; padding: 8px 10px; border-bottom: 2px solid var(--line); }
table.plain th { color: var(--ink2); font: 700 12px var(--body); text-transform: uppercase; letter-spacing: .08em; }

.pts { margin: 8px 0 0; padding-left: 20px; }
.pts li { margin: 6px 0; }
.pts li::marker { color: var(--tomato); }

.type-h { display: flex; align-items: flex-end; gap: 12px; }
.type-h .ch { width: 64px; height: 76px; flex: none; }
.type-h .n { font: 700 16px var(--body); color: var(--ink2); letter-spacing: 0; }
.pager { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }

/* ═════════════ Accueil ═════════════ */
.home .sec { padding: 80px 0; }
.home h2 { margin: 0; max-width: 22ch; font-size: clamp(32px, 4.2vw, 54px); line-height: 1.02; }
.home .kick { margin: 0 0 12px; }
.home .intro { font-size: 19px; color: var(--ink2); max-width: 58ch; margin: 16px 0 0; }
.hero { position: relative; overflow: hidden; }
.wrap.hero-in { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: center; padding-top: 18px; }
.hero h1 { font-size: clamp(40px, 5.3vw, 74px); line-height: .98; margin: 0 0 22px; max-width: 12.5em; }
.hero h1 .u { position: relative; white-space: nowrap; z-index: 0; }
.hero h1 .u svg { position: absolute; left: -1%; bottom: -4px; width: 102%; height: 14px; z-index: -1; }
.hero .lead { max-width: 46ch; margin: 0 0 28px; }
.form { background: #fff; border: 3px solid var(--ink); border-radius: 22px; padding: 18px; box-shadow: 6px 6px 0 var(--ink); max-width: 620px; position: relative; z-index: 3; margin-bottom: 26px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fields .city { grid-column: 1 / -1; position: relative; }
.form label { display: grid; gap: 5px; font: 700 13px var(--body); }
.form input { border: 2px solid var(--line); border-radius: 12px; padding: 11px 12px; font: 500 16px var(--body); color: var(--ink); background: #fff; width: 100%; min-height: 48px; }
.form input:focus { outline: none; border-color: var(--ink); }
.form .go { margin-top: 14px; width: 100%; font-size: 20px; }
.form .sub { display: flex; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; font-size: 14px; margin: 12px 0 0; color: var(--ink2); max-width: none; }
.form .sub a { color: var(--ink); font-weight: 700; }
.form .picked { font-size: 13px; color: var(--ink2); min-height: 0; }
.sugg { position: absolute; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 6px; list-style: none; background: #fff; border: 3px solid var(--ink); border-radius: 14px; box-shadow: 4px 4px 0 var(--ink); z-index: 10; display: none; max-height: 260px; overflow: auto; }
.sugg.show { display: block; }
.sugg li { padding: 8px 10px; border-radius: 9px; cursor: pointer; font-weight: 600; }
.sugg li small { color: var(--ink2); font-weight: 500; }
.sugg li.on, .sugg li:hover { background: var(--sun); }
.scene { position: relative; height: 190px; }
.scene .ch { position: absolute; bottom: 0; margin-bottom: -6px; }
.poster { display: none; position: absolute; right: 2%; top: 0; width: 240px; background: #fff; border: 3px solid var(--ink); border-radius: 18px; padding: 14px 14px 8px; transform: rotate(4deg); box-shadow: 6px 6px 0 rgba(23,52,48,.18); margin: 0; }
.poster svg { display: block; width: 100%; height: auto; }
.poster figcaption { display: block; text-align: center; font: 700 23px/1.05 var(--hand); margin-top: 4px; }
.poster figcaption a { text-decoration: none; }
.poster .tape { position: absolute; top: -14px; left: 50%; width: 80px; height: 26px; margin-left: -40px; background: rgba(191,232,207,.85); border: 2px solid rgba(23,52,48,.25); transform: rotate(-5deg); }
.scene .note { display: none; position: absolute; font: 700 30px/1 var(--hand); color: var(--ink); transform: rotate(-6deg); }
.scene .note svg { display: block; margin-left: 40px; }
.ground { position: relative; height: 46px; background: var(--grass); border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.ground::before { content: ""; position: absolute; inset: 14px 0 auto; height: 3px; background-image: radial-gradient(circle, rgba(23,52,48,.35) 2px, transparent 2.5px); background-size: 26px 3px; }

.keynums { background: var(--ink); color: #fff; }
.keynums .wrap { display: grid; grid-template-columns: 1fr 1fr; }
.kn { padding: 26px 16px 24px 0; border-top: 2px dashed #ffffff33; }
.kn:nth-child(-n+2) { border-top: 0; }
.kn b { display: block; font: 800 40px/1 var(--disp); letter-spacing: -.03em; color: var(--sun); }
.kn span { display: block; margin-top: 8px; font-size: 15px; color: #D5E3DE; max-width: 24ch; }

.steps { display: grid; grid-template-columns: 1fr; margin-top: 40px; border: 3px solid var(--ink); border-radius: 26px; overflow: hidden; background: #fff; }
.step { padding: 26px 24px 28px; border-top: 3px solid var(--ink); }
.step:first-child { border-top: 0; }
.step .n { font: 800 15px var(--body); display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; }
.step svg.pic { display: block; height: 90px; width: auto; margin: 14px 0 12px; }
.step h3 { font-size: 25px; line-height: 1.1; }
.step p { margin: 0; color: var(--ink2); }

.types-sec { background: #EAF6EE; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.lineup { display: none; grid-template-columns: repeat(5, 1fr); gap: 18px; align-items: end; margin-top: 50px; border-bottom: 3px solid var(--ink); }
.lineup .col { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--ink); }
.lineup .col .ch { width: 150px; height: 160px; margin-bottom: -4px; position: relative; z-index: 2; transition: transform .15s; }
.lineup .col:hover .ch { transform: translateY(-6px) rotate(-3deg); }
.lineup .bar { width: 100%; height: calc(var(--p) * 6.4px + 12px); background: var(--c); border: 3px solid var(--ink); border-bottom: 0; border-radius: 16px 16px 0 0; background-image: repeating-linear-gradient(-45deg, transparent 0 14px, rgba(23,52,48,.07) 14px 16px); }
.lineup .pct { font: 800 44px/1 var(--disp); letter-spacing: -.04em; margin-bottom: -8px; position: relative; z-index: 3; white-space: nowrap; }
.typetext { display: none; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 18px; }
.typetext h3 { font-size: 21px; line-height: 1.1; margin: 0 0 6px; }
.typetext h3 a { text-decoration: none; }
.typetext h3 a:hover { text-decoration: underline; }
.typetext p { margin: 0; font-size: 15px; color: var(--ink2); line-height: 1.5; }
.strat { display: inline-block; margin-top: 10px; font: 700 13px var(--body); border: 2px solid var(--ink); border-radius: 99px; padding: 3px 10px; background: #fff; }
.mlist { display: grid; gap: 14px; margin-top: 30px; }
.mrow { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: center; background: #fff; border: 3px solid var(--ink); border-radius: 20px; padding: 12px 14px 14px 8px; text-decoration: none; color: var(--ink); }
.mrow:hover { color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.mrow .ch { width: 76px; height: 90px; }
.mrow h3 { font-size: 19px; line-height: 1.1; margin: 0 0 6px; display: flex; justify-content: space-between; gap: 8px; }
.mrow h3 span { white-space: nowrap; }
.mrow .track { display: block; height: 14px; border: 2px solid var(--ink); border-radius: 99px; background: #fff; overflow: hidden; }
.mrow .track i { display: block; height: 100%; width: calc(var(--p) * 2.4%); min-width: 6px; background: var(--c); border-right: 2px solid var(--ink); }
.mrow p { margin: 8px 0 0; font-size: 14px; color: var(--ink2); }
.src { margin-top: 26px; font-size: 14px; color: var(--ink2); }

.honest { display: grid; grid-template-columns: 1fr; margin-top: 40px; }
.honest .side { padding: 24px 20px; border: 3px solid var(--ink); }
.honest .yes { background: #fff; border-radius: 26px 26px 0 0; }
.honest .no { background: #FFE6DE; border-top: 0; border-radius: 0 0 26px 26px; }
.honest h3 { font-size: 28px; line-height: 1.1; margin: 0 0 18px; display: flex; align-items: center; gap: 12px; }
.honest ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.honest li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; }
.honest li svg { width: 26px; height: 26px; margin-top: 1px; }
.honest li b { display: block; }
.honest li span { color: var(--ink2); font-size: 15.5px; }
.rule { margin-top: 30px; display: flex; gap: 18px; align-items: center; }
.rule .ch { width: 110px; height: 110px; flex: none; }
.rule p { font: 700 25px/1.15 var(--hand); margin: 0; max-width: 30ch; background: #fff; border: 3px solid var(--ink); border-radius: 26px; padding: 16px 22px; position: relative; }
.rule p::before { content: ""; position: absolute; left: -16px; top: 30px; width: 24px; height: 24px; background: #fff; border-left: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: rotate(45deg); }

.home .faq h2 { margin: 0 0 24px; }
.home .guide-sec, .home .faq-sec { border-top: 3px solid var(--ink); }
.home .celebs-sec { background: #FFF6D6; border-top: 3px solid var(--ink); }
.home .more { margin-top: 22px; font-weight: 700; }

.final { background: var(--tomato); border-top: 3px solid var(--ink); color: #fff; --acc: #FFD24D; overflow: hidden; }
.final .wrap { display: grid; grid-template-columns: 1fr; align-items: center; gap: 26px; padding-top: 56px; padding-bottom: 56px; }
.final h2 { color: #fff; margin: 0 0 10px; }
.final p { margin: 0; font-size: 18px; max-width: 48ch; }
.fin-cta { display: flex; align-items: flex-end; gap: 6px; }
.final .runner { width: 110px; height: 130px; margin-bottom: -56px; flex: none; }

/* ── Écrans moyens ── */
@media (min-width: 640px) {
  .wrap { padding: 0 24px; }
  .grid.g2, .grid.g3, .grid.g4 { grid-template-columns: repeat(2, 1fr); }
  .two { grid-template-columns: 1fr 1fr; }
  .facts { grid-template-columns: repeat(3, 1fr); }
  .foot .cols { grid-template-columns: repeat(4, 1fr); }
  .nav a.hide-s { display: inline-block; }
  .nav a.acct .acct-t { display: inline; }
  .fields { grid-template-columns: 1fr .8fr 1.3fr; }
  .fields .city { grid-column: auto; }
  .scene { height: 260px; }
  .keynums .wrap { grid-template-columns: repeat(4, 1fr); }
  .kn { border-top: 0; border-left: 2px dashed #ffffff33; padding: 32px 20px 30px; }
  .kn:first-child { border-left: 0; padding-left: 0; }
  .kn b { font-size: 50px; }
  .rule .ch { width: 150px; height: 150px; }
  .rule p { font-size: 32px; }
}
/* ── Grands écrans ── */
@media (min-width: 1000px) {
  .wrap { padding: 0 40px; }
  .grid.g3 { grid-template-columns: repeat(3, 1fr); }
  .grid.g4 { grid-template-columns: repeat(4, 1fr); }
  .chart-layout { grid-template-columns: minmax(300px, 440px) 1fr; gap: 44px; }
  .band { grid-template-columns: 1fr auto; padding: 34px 38px; }
  .phead-in.has-art { grid-template-columns: 1fr 260px; }
  .phead-art .ch { width: 210px; height: 240px; }
  .foot .top-row { grid-template-columns: 1.1fr 2fr; gap: 40px; }
  .home .sec { padding: 96px 0; }
  .wrap.hero-in { grid-template-columns: 1.2fr .9fr; gap: 40px; min-height: 600px; padding-top: 30px; }
  .scene { height: 590px; align-self: end; }
  .poster, .scene .note { display: block; }
  .form { margin-bottom: 60px; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .step { border-top: 0; border-left: 3px solid var(--ink); padding: 28px 28px 32px; }
  .step:first-child { border-left: 0; }
  .step svg.pic { height: 120px; margin: 18px 0 14px; }
  .lineup, .typetext { display: grid; }
  .mlist { display: none; }
  .honest { grid-template-columns: 1fr 1fr; }
  .honest .side { padding: 30px 34px; }
  .honest .yes { border-radius: 26px 0 0 26px; }
  .honest .no { border-top: 3px solid var(--ink); border-left: 0; border-radius: 0 26px 26px 0; }
  .final .wrap { grid-template-columns: 1fr auto; gap: 30px; }
  .final .runner { width: 130px; height: 150px; }
}
@media (max-width: 999px) {
  .scene .ch.s-man { left: 0 !important; }
}
@media (max-width: 460px) {
  .nav a.opt { display: none; }
  .scene .ch { transform: scale(.62); transform-origin: 50% 100%; }
  .band .fin-cta { flex-wrap: wrap; }
  .band .runner { display: none; }
}