/* ==========================================================================
   Un univers par étude de cas : chaque page reprend la DA du produit qu'elle raconte.
   Les variables --cs-* sont lues par site.css ; ce fichier ne contient que les écarts.
   ========================================================================== */

.cs .nav { border-bottom-color: color-mix(in srgb, var(--line) 70%, transparent); }
.cs .theme-btn { display: none; }
.cs .btn { background: var(--cs-btn-bg, var(--ink)); color: var(--cs-btn-ink, var(--paper)); }
.cs .btn--ghost { background: transparent; color: var(--ink); }
.cs .pstep__methods li { border-radius: var(--cs-chip-radius, 100px); }

/* ---------- Olymps : sport, nuit, orange en action ---------- */
body.t-olymps, body.dark.t-olymps {
  --paper: #0B0B0C; --mist: #161618; --ink: #F5F5F5; --graphite: rgba(245,245,245,.62); --line: rgba(255,255,255,.13);
  --accent: #E8501F; --cs-btn-bg: #E8501F; --cs-btn-ink: #fff;
  --cs-display: 'ArchivoX', var(--f-text); --cs-tw: 900; --cs-hw: 800; --cs-ts: italic; --cs-tt: uppercase; --cs-stretch: 115%;
  --cs-tl: -.02em; --cs-hl: -.01em; --cs-tlh: .86; --cs-radius: 14px;
  color-scheme: dark;
}
.t-olymps .cs-title::after { content: ''; display: block; width: 1.6em; height: .14em; margin-top: .18em; background: var(--accent); transform: skewX(-18deg); }
.t-olymps .stat b { color: var(--accent); }
.t-olymps .decision { background: #141416; box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- Verso : salle sombre, violet, italique ---------- */
body.t-verso, body.dark.t-verso {
  --paper: #120B22; --mist: #1C1333; --ink: #F3EEFF; --graphite: #B4A8D3; --line: rgba(255,255,255,.12);
  --accent: #8B5CF6; --cs-btn-bg: #8B5CF6; --cs-btn-ink: #fff;
  --cs-display: 'HN', var(--f-text); --cs-tw: 800; --cs-hw: 800; --cs-ts: italic; --cs-tl: -.045em; --cs-hl: -.035em; --cs-radius: 18px;
  color-scheme: dark;
}
.t-verso .cs-hero { background: radial-gradient(70% 50% at 80% 0%, rgba(139,92,246,.28), transparent 70%); }
.t-verso .phone { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 40px 80px -30px rgba(139,92,246,.55); }
.t-verso .decision { background: rgba(139,92,246,.12); }

/* ---------- LittleThings : blanc, jaune vif, gras ---------- */
body.t-littlethings, body.dark.t-littlethings {
  --paper: #FFFFFF; --mist: #FFF7D1; --ink: #1D1D1F; --graphite: #5E5E63; --line: #E8E2C8;
  --accent: #F5C518; --cs-btn-bg: #1D1D1F; --cs-btn-ink: #fff;
  --cs-display: 'HN', var(--f-text); --cs-tw: 700; --cs-hw: 700; --cs-tl: -.05em; --cs-hl: -.04em; --cs-radius: 16px;
  color-scheme: light;
}
.t-littlethings .cs-h .line-mask > span, .t-littlethings .cs-title .line-mask > span { background: linear-gradient(transparent 62%, #F5C518 62%, #F5C518 90%, transparent 90%); display: inline; }
.t-littlethings .cs-title .line-mask, .t-littlethings .cs-h .line-mask { overflow: visible; }
.t-littlethings .pstep__num { color: #1D1D1F; background: #F5C518; display: inline-block; padding: 2px 10px; border-radius: 100px; font-size: .8rem; }

/* ---------- LFstaff : fonte, braise, outil de terrain ---------- */
body.t-lfstaff, body.dark.t-lfstaff {
  --paper: #1A1714; --mist: #24201C; --ink: #EFE6D6; --graphite: rgba(239,230,214,.62); --line: rgba(239,230,214,.14);
  --accent: #E07B2D; --cs-btn-bg: #E07B2D; --cs-btn-ink: #1A1714;
  --f-text: 'Outfit', 'HN', sans-serif; --cs-display: 'Outfit', var(--f-text); --cs-tw: 600; --cs-hw: 600; --cs-tl: -.04em; --cs-hl: -.03em; --cs-radius: 16px; --cs-chip-radius: 8px;
  color-scheme: dark; font-weight: 400;
}
.t-lfstaff .pstep__methods li { background: rgba(224,123,45,.12); box-shadow: none; color: #F2B07C; }
.t-lfstaff .states__phase p { background: var(--mist); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; }
.t-lfstaff .stat { border-top: 3px solid var(--accent); }

/* ---------- KoRaNé : l'app, ronde et taquine ---------- */
body.t-korane, body.dark.t-korane {
  --paper: #FFF4EC; --mist: #FDE6D8; --ink: #4A2433; --graphite: #7B5560; --line: #EFCFC0;
  --accent: #E07A5F; --cs-btn-bg: #4A2433; --cs-btn-ink: #FFF4EC;
  --f-text: 'Nunito', 'HN', sans-serif; --cs-display: 'Unbounded', var(--f-text); --cs-tw: 900; --cs-hw: 800; --cs-tl: -.03em; --cs-hl: -.025em; --cs-radius: 24px;
  color-scheme: light; font-weight: 500;
}
.t-korane .btn { box-shadow: 0 4px 0 #2B121D; border-radius: 16px; }
.t-korane .btn--ghost { box-shadow: inset 0 0 0 2px var(--ink), 0 4px 0 var(--ink); }
.t-korane .decision { background: #fff; box-shadow: 0 0 0 2px var(--ink), 0 5px 0 var(--ink); padding-left: 76px; }
.t-korane .decision::before { left: 18px; top: 50%; bottom: auto; width: 42px; height: 42px; border-radius: 50%; transform: translateY(-50%); background: #E07A5F url('../img/p/korane/icon.webp') center / cover; }
.t-korane .pstep__methods li { background: #fff; box-shadow: 0 0 0 2px var(--line); font-weight: 700; }

/* ---------- LaYony : néo-brutalisme (et paroles en style suisse) ---------- */
body.t-layony, body.dark.t-layony {
  --paper: #F3EFFF; --mist: #FFFFFF; --ink: #000000; --graphite: #3D3A4A; --line: #000000;
  --accent: #FF4F2B; --cs-btn-bg: #FF4F2B; --cs-btn-ink: #000;
  --cs-display: 'ArchivoX', var(--f-text); --cs-tw: 900; --cs-hw: 900; --cs-stretch: 88%; --cs-tl: -.04em; --cs-hl: -.03em; --cs-radius: 14px; --cs-phone-radius: 30px;
  color-scheme: light;
}
.t-layony .btn { box-shadow: 4px 4px 0 #000, inset 0 0 0 3px #000; border-radius: 12px; }
.t-layony .frame, .t-layony .phone, .t-layony .cs-cover, .t-layony .swatch { box-shadow: 0 0 0 3px #000, 8px 8px 0 #000; }
.t-layony .decision { background: #FFE14D; box-shadow: 0 0 0 3px #000, 6px 6px 0 #000; }
.t-layony .decision::before { display: none; }
.t-layony .pstep__methods li { box-shadow: 0 0 0 2px #000; color: #000; font-weight: 500; }
.t-layony .pstep__methods li:nth-child(3n+1) { background: #6FE3C1; }
.t-layony .pstep__methods li:nth-child(3n+2) { background: #FF8BD6; }
.t-layony .pstep__methods li:nth-child(3n) { background: #8CCBFF; }
.t-layony .cs-lead { font-family: 'HN', sans-serif; font-weight: 700; letter-spacing: -.02em; font-size: clamp(1.3rem, 2.4vw, 2rem); line-height: 1.2; }
.t-layony .meta { border-bottom: 3px solid #000; }

/* ---------- RY.Myclassroom : style suisse ---------- */
body.t-myclassroom, body.dark.t-myclassroom {
  --paper: #FFFFFF; --mist: #F1F1F1; --ink: #0A0A0A; --graphite: #4A4A4A; --line: #0A0A0A;
  --accent: #FF5A1F; --cs-btn-bg: #0A0A0A; --cs-btn-ink: #fff;
  --cs-display: 'ArchivoX', var(--f-text); --cs-label: 'Plex', monospace; --cs-tw: 900; --cs-hw: 800; --cs-stretch: 92%; --cs-tl: -.055em; --cs-hl: -.04em; --cs-tlh: .84;
  --cs-radius: 0px; --cs-phone-radius: 0px; --cs-chip-radius: 0px;
  color-scheme: light;
}
.t-myclassroom .cs-hero { background: #FF5A1F; box-shadow: 0 0 0 100vmax #FF5A1F; clip-path: inset(0 -100vmax); padding-bottom: 0; margin-bottom: clamp(48px, 7vw, 96px); }
.t-myclassroom .cs-hero .crumbs, .t-myclassroom .cs-hero .crumbs a, .t-myclassroom .meta dt { color: #0A0A0A; font-family: 'Plex', monospace; text-transform: uppercase; font-size: .74rem; letter-spacing: .04em; }
.t-myclassroom .cs-cover { margin-bottom: -1px; }
.t-myclassroom .meta { border-top: 2px solid #0A0A0A; border-bottom: 0; }
.t-myclassroom .cs-block + .cs-block { border-top: 2px solid #0A0A0A; }
.t-myclassroom .pstep__num { font-family: 'Plex', monospace; font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1; color: #0A0A0A; letter-spacing: -.04em; }
.t-myclassroom .pstep + .pstep { border-top: 2px solid #0A0A0A; }
.t-myclassroom .decision { background: transparent; box-shadow: inset 0 0 0 2px #0A0A0A; }
.t-myclassroom .decision::before { top: 0; bottom: 0; left: 0; width: 10px; border-radius: 0; }
.t-myclassroom .decision b, .t-myclassroom .pstep__methods li, .t-myclassroom .cs-cols h3, .t-myclassroom .proto__index li { font-family: 'Plex', monospace; text-transform: uppercase; letter-spacing: .03em; font-size: .74rem; }
.t-myclassroom .pstep__methods li { box-shadow: inset 0 0 0 1.5px #0A0A0A; color: #0A0A0A; }
.t-myclassroom .cs-cols li, .t-myclassroom .type-list li, .t-myclassroom .stat { border-top-width: 2px; border-color: #0A0A0A; }
.t-myclassroom .cs-pitch { font-weight: 500; font-size: clamp(1.2rem, 2.2vw, 1.8rem); line-height: 1.25; letter-spacing: -.02em; max-width: 880px; }

/* ---------- Minice : interface douce, cartes arrondies ---------- */
body.t-minice, body.dark.t-minice {
  --paper: #EEF0F8; --mist: #FFFFFF; --ink: #171A2E; --graphite: #5A5E78; --line: #D9DCEA;
  --accent: #6F57E8; --cs-btn-bg: #6F57E8; --cs-btn-ink: #fff;
  --f-text: 'Poppins', 'HN', sans-serif; --cs-display: 'Poppins', var(--f-text); --cs-tw: 600; --cs-hw: 600; --cs-tl: -.045em; --cs-hl: -.035em; --cs-radius: 22px;
  color-scheme: light;
}
.t-minice .decision { background: #fff; box-shadow: 0 20px 50px -24px rgba(40,30,110,.25); }
.t-minice .decision::before { top: 22px; bottom: auto; height: 24px; border-radius: 6px; left: 22px; width: 4px; }
.t-minice .decision { padding-left: 42px; }
.t-minice .frame, .t-minice .phone { box-shadow: 0 0 0 1px var(--line), 0 40px 80px -40px rgba(40,30,110,.35); }
.t-minice .pstep__methods li { background: rgba(111,87,232,.1); box-shadow: none; color: #4C3BB8; }
.t-minice .meta { background: #fff; border-radius: 22px; padding: 28px 32px; border-bottom: 0; margin-top: 24px; box-shadow: 0 20px 50px -30px rgba(40,30,110,.25); }

/* ---------- Dycea : éditorial, nuit et corail ---------- */
body.t-dycea, body.dark.t-dycea {
  --paper: #10192E; --mist: #18233D; --ink: #FFFFFF; --graphite: rgba(255,255,255,.66); --line: rgba(255,255,255,.14);
  --accent: #F0714B; --cs-btn-bg: #F0714B; --cs-btn-ink: #10192E;
  --f-text: 'Instrument', 'HN', sans-serif; --cs-display: 'Bricolage', var(--f-text); --cs-tw: 800; --cs-hw: 700; --cs-tl: -.05em; --cs-hl: -.04em; --cs-radius: 20px;
  color-scheme: dark; font-weight: 400;
}
.t-dycea .cs-hero { background: linear-gradient(150deg, #0E3A45 0%, #1E2C55 55%, #3A2770 100%); }
.t-dycea .cs-block + .cs-block { border-top: 2px dotted rgba(255,255,255,.28); }
.t-dycea .pstep__methods li:nth-child(4n+1) { box-shadow: inset 0 0 0 1px #D9A03A; color: #F2C66F; }
.t-dycea .pstep__methods li:nth-child(4n+2) { box-shadow: inset 0 0 0 1px #4FA6C0; color: #8BD2E6; }
.t-dycea .pstep__methods li:nth-child(4n+3) { box-shadow: inset 0 0 0 1px #9B86E0; color: #C3B5F2; }

/* ---------- CAMORECH : corporate, noir et blanc ---------- */
body.t-camorech, body.dark.t-camorech {
  --paper: #FFFFFF; --mist: #F3F3F3; --ink: #0A0A0A; --graphite: #5C5C5C; --line: #DCDCDC;
  --accent: #0A0A0A; --cs-btn-bg: #0A0A0A; --cs-btn-ink: #fff;
  --cs-display: 'HN', var(--f-text); --cs-tw: 300; --cs-hw: 300; --cs-tl: -.055em; --cs-hl: -.045em; --cs-radius: 0px; --cs-phone-radius: 0px;
  color-scheme: light;
}
.t-camorech img { filter: grayscale(1); }
.t-camorech .cs-h { font-size: clamp(2.2rem, 5vw, 4.4rem); }
.t-camorech .decision { background: transparent; border-top: 1px solid #0A0A0A; border-bottom: 1px solid #0A0A0A; padding-inline: 0; }
.t-camorech .decision::before { display: none; }
.t-camorech .meta dt { text-transform: uppercase; letter-spacing: .12em; font-size: .68rem; }

/* ---------- Éclat Beauty : luxe, crème et or ---------- */
body.t-eclat-beauty, body.dark.t-eclat-beauty {
  --paper: #F7F1E7; --mist: #FFFFFF; --ink: #1A1714; --graphite: #85735A; --line: #E4D4B5;
  --accent: #B8914A; --cs-btn-bg: #1A1714; --cs-btn-ink: #F7F1E7;
  --f-text: 'Jost', 'HN', sans-serif; --cs-display: 'Cormorant', Georgia, serif; --cs-tw: 500; --cs-hw: 500; --cs-tl: -.02em; --cs-hl: -.015em; --cs-tlh: .95; --cs-radius: 18px;
  color-scheme: light; font-weight: 400;
}
.t-eclat-beauty .cs-h, .t-eclat-beauty .pstep__title { font-style: italic; }
.t-eclat-beauty .cs-title { font-size: clamp(3.2rem, 10vw, 9.4rem); }
.t-eclat-beauty .pstep__num, .t-eclat-beauty .meta dt, .t-eclat-beauty .decision b { font-family: 'Jost', sans-serif; text-transform: uppercase; letter-spacing: .2em; font-size: .7rem; color: var(--accent); }
.t-eclat-beauty .phone { border-radius: 200px 200px 24px 24px; box-shadow: 0 0 0 1px var(--line), 0 0 0 8px #fff, 0 0 0 9px var(--line); }
.t-eclat-beauty .decision { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- Le Foyer : artisanal, gravé, motifs Toghu ---------- */
body.t-le-foyer, body.dark.t-le-foyer {
  --paper: #EFE6D6; --mist: #E6D9C2; --ink: #1A1714; --graphite: #6A5846; --line: #CDBB9C;
  --accent: #B23A1C; --cs-btn-bg: #1A1714; --cs-btn-ink: #EFE6D6;
  --f-text: 'Outfit', 'HN', sans-serif; --cs-display: 'Fraunces', Georgia, serif; --cs-tw: 600; --cs-hw: 600; --cs-tl: -.03em; --cs-hl: -.025em; --cs-radius: 4px;
  color-scheme: light; font-weight: 400;
  --toghu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Crect width='32' height='32' fill='%231A1714'/%3E%3Cpath d='M16 3 29 16 16 29 3 16Z' fill='%23BE8A3C'/%3E%3Cpath d='M16 9 23 16 16 23 9 16Z' fill='%231A1714'/%3E%3Cpath d='M16 13 19 16 16 19 13 16Z' fill='%23B23A1C'/%3E%3C/svg%3E");
}
.t-le-foyer .cs-block + .cs-block { border-top: 0; position: relative; }
.t-le-foyer .cs-block + .cs-block::before { content: ''; position: absolute; left: var(--gutter); right: var(--gutter); top: 0; height: 16px; background: var(--toghu) 0 0 / 16px 16px repeat-x; }
.t-le-foyer .cs-hero::before { content: ''; display: block; height: 16px; background: var(--toghu) 0 0 / 16px 16px repeat-x; margin-bottom: 40px; }
.t-le-foyer .pstep__title, .t-le-foyer .cs-pitch { font-family: 'Fraunces', serif; }
.t-le-foyer .cs-pitch { font-style: italic; }
.t-le-foyer .decision { background: #F6EFE2; }

/* ---------- Precious Jus : fraîcheur, affiche condensée ---------- */
body.t-preciousjus, body.dark.t-preciousjus {
  --paper: #FFFBEA; --mist: #FFF1B8; --ink: #1D1D1F; --graphite: #66604A; --line: #EFE2A8;
  --accent: #E0A800; --cs-btn-bg: #1D1D1F; --cs-btn-ink: #FFFBEA;
  --cs-display: 'ArchivoX', var(--f-text); --cs-tw: 900; --cs-hw: 900; --cs-tt: uppercase; --cs-stretch: 70%; --cs-tl: -.02em; --cs-hl: -.01em; --cs-tlh: .86; --cs-radius: 18px;
  color-scheme: light;
}
.t-preciousjus .stat:nth-child(1) { border-top: 4px solid #F5C20A; }
.t-preciousjus .stat:nth-child(2) { border-top: 4px solid #E91E8C; }
.t-preciousjus .stat:nth-child(3) { border-top: 4px solid #2E7D32; }
.t-preciousjus .decision { background: #fff; }

/* ---------- KURANI : planche de manga ---------- */
body.t-kurani, body.dark.t-kurani {
  --paper: #FFFFFF; --mist: #F2F2F2; --ink: #0A0A0A; --graphite: #444; --line: #0A0A0A;
  --accent: #D7261E; --cs-btn-bg: #0A0A0A; --cs-btn-ink: #fff;
  --cs-display: 'Dela', 'HN', sans-serif; --cs-tw: 400; --cs-hw: 400; --cs-tl: -.01em; --cs-hl: 0; --cs-radius: 0px;
  color-scheme: light;
}
.t-kurani .cs-hero { background: radial-gradient(circle at 1px 1px, rgba(0,0,0,.22) 1.2px, transparent 1.6px) 0 0 / 12px 12px; }
.t-kurani .cs-cover, .t-kurani .illus, .t-kurani .frame { box-shadow: 0 0 0 4px #0A0A0A; }
.t-kurani .decision { background: #fff; border-radius: 28px; box-shadow: 0 0 0 3px #0A0A0A; }
.t-kurani .decision::before { left: 48px; top: auto; bottom: -14px; width: 24px; height: 24px; background: #fff; border-radius: 0; transform: rotate(45deg); box-shadow: 3px 3px 0 0 #0A0A0A; }
.t-kurani .pstep__num { color: var(--accent); }
.t-kurani .cs-block + .cs-block { border-top: 4px solid #0A0A0A; }