/* Cocôtte — site vitrine v0.4, palette fonte & brique. Un seul motif : la cocotte (couvercle plat, ventre rond). */
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-medium.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-bold.woff") format("woff"); font-weight: 700; font-display: swap; }

:root {
  --bg: #fbf9f5;
  --surface: #f6f2ec;
  --surface-2: #e9e2d8;
  --ink: #22201d;
  --muted: #6b645e;
  --accent: #c4472f;
  --accent-deep: #8a3b2d;
  --accent-ink: #ffffff;
  --field-1: #22201d; --field-1-ink: #ffffff;

  --step-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2.25rem, 1.3rem + 3.6vw, 4.25rem);
  --step-display: clamp(3.5rem, 1rem + 8vw, 8.5rem);

  --m: clamp(16px, 2.2vw, 32px);       /* marge de page */
  --gap-section: clamp(96px, 12vw, 200px);
  --pot: 0 0 50% 50% / 0 0 30% 30%;   /* le ventre de la cocotte : dessus plat, fond rond */
  --btn: 0 0 1.25em 1.25em;            /* bouton cocotte */
  --ease: cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Poppins", system-ui, sans-serif; font-size: var(--step-body); line-height: 1.55; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.display { font-weight: 700; letter-spacing: -0.045em; line-height: 0.95; text-transform: lowercase; }
.head { font-size: var(--step-head); font-weight: 700; letter-spacing: -0.04em; line-height: 0.98; text-transform: lowercase; }
.lead { font-size: var(--step-lead); line-height: 1.35; letter-spacing: -0.01em; }
.small { font-size: var(--step-small); }

/* Bouton : la forme de la cocotte */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 56px; padding: .85em 1.6em 1em; border: 0; border-radius: var(--btn); background: var(--accent); color: var(--accent-ink); font: 600 1.0625rem/1.1 "Poppins", sans-serif; text-decoration: none; cursor: pointer; transition: transform .18s var(--ease), background-color .18s var(--ease); }
.btn:hover { background: var(--accent-deep); transform: translateY(-2px); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn.ink { background: var(--ink); }
.btn.ink:hover { background: #33291f; }
.btn.light { background: #fff; color: var(--accent); }
.btn.light:hover { background: var(--surface); }
.link { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .25em; transition: color .15s; }
.link:hover { color: var(--accent); }

/* Puce cocotte */
.potlist { list-style: none; padding: 0; margin: 0; }
.potlist li { position: relative; padding-left: 1.6em; margin: .35em 0; }
.potlist li::before { content: ""; position: absolute; left: 0; top: .55em; width: .9em; height: .62em; background: var(--accent); border-radius: var(--pot); }

/* ============ HERO ============ */
.hero { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px; min-height: 100svh; }
.card { position: relative; background: var(--surface); display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 clamp(24px, 4vw, 64px) 28px; min-height: calc(100svh - 24px); }
.torchon { display: flex; width: calc(100% + 2 * clamp(24px, 4vw, 64px)); height: 56px; flex: none; }
.torchon span { flex: 1 1 28px; background: var(--accent); align-self: flex-start; height: var(--h, 100%); }
.torchon span:nth-child(even) { background: transparent; }
.card-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 40px 0; max-width: 620px; }
.wordmark { display: flex; align-items: flex-end; gap: 14px; color: var(--ink); text-decoration: none; }
.wordmark svg { width: 64px; height: auto; flex: none; }
.wordmark b { font-size: clamp(2.5rem, 1.5rem + 3vw, 4.25rem); font-weight: 700; letter-spacing: -0.05em; line-height: .8; }
.hero h1 { font-size: clamp(1.875rem, 0.5rem + 2.5vw, 3rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; text-transform: lowercase; max-width: 22ch; text-wrap: balance; }
.hero .sub { max-width: 36ch; color: var(--ink); }
.hero .meta { color: var(--muted); }
.card-links { display: flex; gap: 8px 18px; flex-wrap: wrap; justify-content: center; font-size: var(--step-small); font-weight: 500; }
.card-links a { text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; transition: border-color .15s, color .15s; }
.card-links a:hover { color: var(--accent); border-color: var(--accent); }

.stage { position: sticky; top: 12px; height: calc(100svh - 24px); background: var(--accent); overflow: hidden; display: grid; place-items: center; }
.stage .bigpot { position: absolute; width: 104%; left: -2%; top: 6%; }
.phone { position: relative; width: min(46%, 330px); aspect-ratio: 585 / 996; border-radius: 30px; box-shadow: 0 30px 60px -28px rgba(40, 8, 4, .55); overflow: hidden; background: #fff; }
.phone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity 1.6s ease; }
.phone img.on { opacity: 1; }
.stage-cap { position: absolute; left: 24px; bottom: 20px; right: 24px; color: #fff; font-size: var(--step-small); font-weight: 500; display: flex; justify-content: space-between; gap: 16px; }

/* ============ LA NOTE (showcase) ============ */
section { position: relative; }
.note-sec { display: grid; grid-template-columns: 1fr 1fr; min-height: 88svh; background: var(--surface); margin-top: var(--gap-section); }
.note-plate { display: grid; place-items: center; padding: 40px; background: var(--accent); }
.ticket { width: min(100%, 520px); height: 600px; background: #fff; color: var(--ink); padding: 32px; display: flex; flex-direction: column; border-radius: 28px; font-size: 1rem; }
.ticket h3 { font-size: 1.125rem; font-weight: 700; display: flex; justify-content: space-between; align-items: baseline; }
.ticket h3 small { font-weight: 500; color: var(--muted); font-size: .875rem; }
.t-rows { margin: 14px 0 10px; display: grid; gap: 6px; }
.t-row { display: grid; grid-template-columns: 1fr 9.5em; align-items: center; gap: 12px; background: var(--surface); padding: 6px 6px 6px 14px; }
.t-row label { font-weight: 500; font-size: .9375rem; }
.t-row input { width: 100%; font: 600 1.0625rem "Poppins", sans-serif; text-align: right; padding: 8px 10px; border: 2px solid transparent; background: #fff; color: var(--ink); }
.t-row input:focus { border-color: var(--accent); outline: none; }
.t-total { display: flex; justify-content: space-between; font-size: .9375rem; color: var(--muted); padding: 4px 2px 10px; }
.t-out { margin-top: auto; background: var(--ink); color: #fff; padding: 16px 16px 18px; border-radius: 18px; text-align: center; min-height: 118px; display: flex; flex-direction: column; justify-content: center; }
.t-out p { font-size: .875rem; color: #d9cfc4; }
.t-out ul { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 4px; }
.t-out li { font-weight: 600; font-size: 1rem; }
.t-out li b { color: #e09a84; font-weight: 700; }
.note-text { display: flex; flex-direction: column; justify-content: space-between; padding: 40px clamp(24px, 4vw, 64px); gap: 40px; }
.tabs { display: flex; gap: 28px; flex-wrap: wrap; }
.tabs button { background: none; border: 0; padding: 4px 0; font: 500 1.125rem "Poppins", sans-serif; color: var(--muted); cursor: pointer; border-bottom: 3px solid transparent; transition: color .15s, border-color .15s; }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--ink); border-color: var(--accent); }
.note-text h2 { margin-bottom: 40px; }
.note-text p { max-width: 34ch; }
.cells { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cells a { display: flex; align-items: center; justify-content: center; min-height: 72px; padding: 12px; text-align: center; font-weight: 600; text-decoration: none; transition: transform .18s var(--ease), background-color .18s; }
.cells a:first-child { background: var(--ink); color: #fff; border-radius: var(--btn); }
.cells a:last-child { background: var(--surface-2); color: var(--ink); border-radius: var(--btn); }
.cells a:hover { transform: translateY(-2px); }

/* ============ COMMENT ÇA MIJOTE ============ */
.how { padding: 0 var(--m); margin-top: var(--gap-section); }
.grid12 { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
.how-head { grid-column: 1 / 6; display: grid; gap: 20px; margin-bottom: 48px; }
.how-head p { max-width: 40ch; }
.diag { grid-column: 1 / -1; }
.diag svg { width: 100%; height: auto; }
.diag .v { display: none; }
.how-steps { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; }
.how-steps h3 { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; text-transform: lowercase; margin-bottom: 6px; }
.how-steps p { max-width: 32ch; }

/* ============ FONCTIONS (mosaïque) ============ */
.board { margin-top: var(--gap-section); padding: 0 10px; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(8, 104px); gap: 8px; }
.tile { position: relative; overflow: hidden; background: var(--surface); padding: 20px; }
.tile .cap { position: absolute; left: 20px; bottom: 18px; right: 20px; z-index: 2; }
.tile .cap b { display: block; font-size: 1.125rem; font-weight: 600; }
.tile .cap span { font-size: .9375rem; display: block; max-width: 36ch; }
.tile [data-ui] { position: absolute; z-index: 1; }
.t-head { grid-area: 1 / 1 / 3 / 7; background: var(--bg); display: flex; flex-direction: column; justify-content: space-between; padding: 8px 12px; }
.t-head p { max-width: 44ch; color: var(--ink); }
.t-picorer { grid-area: 1 / 7 / 3 / 13; background: var(--surface); }
.t-cocorico { grid-area: 3 / 1 / 7 / 7; background: var(--accent); color: #fff; }
.t-menu { grid-area: 3 / 7 / 7 / 10; background: var(--surface-2); }
.t-pot { grid-area: 3 / 10 / 7 / 13; background: var(--field-1); color: #fff; }
.t-mijoteur { grid-area: 7 / 1 / 9 / 4; background: var(--surface-2); }
.t-note { grid-area: 7 / 4 / 9 / 7; background: var(--surface); }
.t-minute { grid-area: 7 / 7 / 9 / 13; background: var(--accent); color: #fff; }

/* fragments d'interface agrandis (data-ui) */
.ui-amount { font-size: 4.6rem; font-weight: 700; letter-spacing: -0.04em; right: -0.25em; top: .1em; color: var(--ink); white-space: nowrap; line-height: 1; }
.ui-amount small { display: block; font-size: .24em; font-weight: 500; letter-spacing: 0; color: var(--muted); margin-top: .5em; }
.ui-chip { font-size: 2.6rem; right: -1.2em; top: 1.1em; background: #fff; color: var(--ink); padding: .45em .8em .55em; border-radius: var(--btn); white-space: nowrap; font-weight: 600; line-height: 1.1; }
.ui-chip i { font-style: normal; color: var(--accent); }
.ui-chip.b { top: 2.75em; right: -2.2em; background: #f0cfc4; }
.ui-mail { font-size: 1.5rem; left: 20px; right: -3em; top: 1em; background: #fff; padding: .9em 1em; line-height: 1.3; }
.ui-mail b { display: block; }
.ui-mail span { display: block; color: var(--muted); font-size: .7em; margin-top: .3em; }
.ui-mail em { display: block; font-style: normal; font-weight: 700; color: var(--accent); font-size: 1.6em; margin-top: .4em; letter-spacing: -0.03em; }
.ui-big { font-size: 3.4rem; font-weight: 700; letter-spacing: -0.04em; left: 20px; top: .55em; line-height: 1; white-space: nowrap; }
.ui-big small { display: block; font-size: .26em; letter-spacing: 0; font-weight: 500; opacity: .8; margin-bottom: .3em; }
.ui-seg { font-size: 1.25rem; left: 20px; top: 18px; display: flex; background: #fff; padding: .2em; font-weight: 600; white-space: nowrap; }
.ui-seg span { padding: .3em .7em; color: var(--muted); }
.ui-seg span.on { background: var(--ink); color: #fff; border-radius: var(--btn); }
.ui-pay { font-size: 1.6rem; left: 20px; top: 16px; font-weight: 600; white-space: nowrap; display: flex; align-items: center; gap: .4em; }
.ui-pay b { color: var(--accent); }
.ui-pay i { font-style: normal; background: #fff; padding: .1em .45em; font-size: .8em; }
.ui-btn { font-size: 2.8rem; right: -0.3em; top: .35em; background: #fff; color: var(--accent); font-weight: 700; padding: .35em .9em .5em; border-radius: var(--btn); white-space: nowrap; }

/* ============ BANDEAU MAISONS ============ */
.band { margin-top: var(--gap-section); background: var(--accent); color: #fff; padding: clamp(56px, 7vw, 112px) var(--m); }
.band-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; margin-bottom: 48px; }
.band-top p { max-width: 40ch; }
.pots { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 12px; align-items: start; }
.pots figure { margin: 0; }
.pots .ph { aspect-ratio: 4 / 5; border-radius: 24px; overflow: hidden; background: var(--accent-deep); }
.pots img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.pots figure:hover img { transform: scale(1.04); }
.pots figcaption { margin-top: 14px; font-weight: 500; }
.pots figure:nth-child(2) { margin-top: 64px; }
.pots figure:nth-child(3) { margin-top: 128px; }

/* ============ L'APPLI ============ */
.app { margin-top: var(--gap-section); padding: 0 var(--m); display: grid; grid-template-columns: 4fr 8fr; gap: 40px; align-items: end; }
.app-text { display: grid; gap: 24px; align-self: center; }
.app-shot { background: var(--surface); padding: clamp(16px, 2.4vw, 40px) clamp(16px, 2.4vw, 40px) 0; border-radius: var(--pot); overflow: hidden; }
.app-shot img { width: 100%; }
.origin { color: var(--muted); }

/* ============ TARIFS ============ */
.pricing { margin-top: var(--gap-section); padding: 0 var(--m); }
.pricing h2 { margin-bottom: 40px; }
.plans { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: start; }
.plan-names { grid-column: 1 / 7; display: grid; justify-items: start; }
.plan-names button { background: none; border: 0; padding: .06em 0 .06em .5em; margin-left: -.5em; font: 700 clamp(2.5rem, 1rem + 4.4vw, 5rem)/1.1 "Poppins", sans-serif; letter-spacing: -0.045em; text-transform: lowercase; color: #8a837d; cursor: pointer; text-align: left; display: flex; align-items: center; gap: .25em; transition: color .2s; }
.plan-names button::before { content: ""; width: .32em; height: .22em; border-radius: var(--pot); background: var(--accent); opacity: 0; transform: scale(.4); transition: opacity .2s, transform .2s var(--ease); }
.plan-names button:hover { color: var(--muted); }
.plan-names button[aria-selected="true"] { color: var(--ink); }
.plan-names button[aria-selected="true"]::before { opacity: 1; transform: none; }
.plan-stage { grid-column: 8 / 13; position: sticky; top: 24px; min-height: 420px; }
.plan-panel { display: grid; gap: 22px; }
.plan-panel[hidden] { display: none; }
.price { display: flex; align-items: baseline; gap: 12px; }
.price b { font-size: var(--step-display); font-weight: 700; letter-spacing: -0.05em; line-height: .9; }
.price span { font-size: 1.125rem; color: var(--muted); }
.plan-panel p { font-size: 1.125rem; max-width: 40ch; }
.plan-panel .note { color: var(--muted); font-size: var(--step-small); }
.fade-in { animation: fade .2s ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.plan-inline { display: none; }

/* ============ FAQ ============ */
.faq { margin-top: var(--gap-section); padding: 0 var(--m); }
.faq-inner { width: min(100%, 980px); margin: 0 auto; }
.faq h2 { margin-bottom: 72px; }
.drawer { display: grid; }
.fcard { position: relative; margin-top: 40px; color: var(--ink); }
.fcard:first-child { margin-top: 0; }
.fcard .tab { position: absolute; top: -40px; left: calc(var(--i) * 150px); width: 200px; height: 40px; display: flex; align-items: center; padding: 0 18px; font-size: 1rem; font-weight: 600; border-radius: 18px 18px 0 0; }
.fcard button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 26px 28px; font: 500 1.25rem/1.3 "Poppins", sans-serif; color: inherit; cursor: pointer; }
.fcard .ans { padding: 0 28px 30px; max-width: 54ch; font-size: 1.0625rem; }
.fcard .ans[hidden] { display: none; }
.fcard, .fcard .tab { background: var(--c); color: var(--ci); }
.fcard:nth-child(3n+1) { --c: var(--surface); --ci: var(--ink); }
.fcard:nth-child(3n+2) { --c: var(--accent); --ci: #fff; }
.fcard:nth-child(3n+3) { --c: var(--field-1); --ci: #fff; }
.fcard button:hover { text-decoration: underline; text-underline-offset: .2em; }

/* ============ CTA ============ */
.cta { margin-top: var(--gap-section); background: var(--accent); min-height: 90svh; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; padding: 40px var(--m); color: #fff; }
.cta-text { grid-column: 1 / 6; align-self: end; display: grid; gap: 20px; }
.cta-text .display { font-size: clamp(3.5rem, 1rem + 6vw, 7rem); line-height: .92; }
.cta-text p { max-width: 34ch; }
.dialog { grid-column: 7 / 12; align-self: center; width: min(100%, 460px); background: #fff; color: var(--ink); padding: 28px; box-shadow: 0 30px 60px -20px rgba(60, 8, 4, .45); /* taste-skill-ignore : vraie boîte de dialogue de l'appli */ border-radius: 0 0 28px 28px; }
.dialog h3 { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 18px; }
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field label { font-size: .9375rem; font-weight: 500; }
.field input { font: 400 1.0625rem "Poppins", sans-serif; padding: 12px 14px; border: 2px solid var(--surface-2); background: var(--bg); color: var(--ink); width: 100%; }
.field input:focus { border-color: var(--accent); outline: none; }
.seg { display: flex; background: var(--surface); padding: 4px; }
.seg label { position: relative; flex: 1; text-align: center; padding: 10px 4px; font-size: .875rem; font-weight: 500; cursor: pointer; transition: background-color .15s, color .15s; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; margin: 0; }
.seg input:checked + span { color: #fff; }
.seg label:has(input:checked) { background: var(--ink); color: #fff; border-radius: var(--btn); }
.seg input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.dialog .btn { width: 100%; margin-top: 8px; }
.dialog .fine { margin-top: 12px; color: var(--muted); font-size: .875rem; }
.hp { position: absolute; left: -9999px; }

/* ============ PIED DE PAGE ============ */
.foot { padding: 64px var(--m) 28px; background: var(--bg); }
.blocks { display: flex; align-items: flex-end; gap: 4px; height: 34svh; min-height: 200px; }
.blocks span { flex: 1; display: flex; align-items: flex-end; justify-content: center; background: var(--accent); color: var(--bg); font-weight: 700; font-size: clamp(4rem, 13vw, 15rem); line-height: .78; letter-spacing: -0.04em; overflow: hidden; padding-bottom: .04em; }
.blocks span:nth-child(3n+2) { background: var(--ink); }
.blocks span:nth-child(3n+3) { background: var(--accent-deep); }
.blocks span.lid { border-radius: 0 0 50% 50% / 0 0 22% 22%; }
.foot-cols { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; margin-top: 56px; font-size: .9375rem; }
.foot-cols nav { grid-column: span 2; display: grid; gap: 8px; align-content: start; }
.foot-cols nav b { margin-bottom: 4px; }
.foot-cols nav a { text-decoration: none; }
.foot-cols nav a:hover { color: var(--accent); text-decoration: underline; }
.foot-contact { grid-column: 9 / 13; display: grid; gap: 10px; align-content: start; }
.foot-last { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 48px; flex-wrap: wrap; font-size: .875rem; color: var(--muted); }
.credits { margin-top: 20px; font-size: .875rem; color: var(--muted); }
.btn.sm { min-height: 44px; padding: .55em 1.2em .7em; font-size: .9375rem; }

/* ============ Entrées ============ */
.rise { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--d, 0) * 75ms); }
.rise.in { opacity: 1; transform: none; }
.no-js .rise { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; transition: none; }
  .phone img { transition: none; }
  html { scroll-behavior: auto; }
  .btn, .cells a, .pots img { transition: none; }
}

/* ============ Téléphone ============ */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .stage { position: relative; top: 0; height: 44svh; order: -1; }
  .stage-cap { display: none; }
  .phone { height: 88%; width: auto; }
  .card-body { gap: 18px; }
  .wordmark svg { width: 48px; }
  .card { min-height: 0; margin-top: -24px; z-index: 2; margin-left: 0; margin-right: 0; }
  .torchon { height: 40px; }
  .card-body { padding: 28px 0 32px; gap: 22px; }
  .hero h1 { font-size: clamp(1.75rem, 7.2vw, 2.75rem); }
  .note-sec { grid-template-columns: 1fr; }
  .note-plate { padding: 16px; }
  .ticket { height: 580px; padding: 22px 18px; border-radius: 24px; }
  .t-row { grid-template-columns: 1fr 8em; }
  .note-text { padding: 32px 16px 40px; }
  .note-text h2 { margin-bottom: 20px; }
  .cells { grid-template-columns: 1fr; }
  .cells a { min-height: 60px; }
  .how-head { grid-column: 1 / -1; }
  .diag .h { display: none; }
  .diag .v { display: block; }
  .diag { display: grid; grid-template-columns: 1fr 38vw; gap: 16px; align-items: stretch; }
  .how-steps { grid-column: 1 / -1; grid-template-columns: 1fr; margin-top: 24px; }
  .board { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 28vw; gap: 6px; padding: 0 6px; }
  .board > * { grid-area: auto !important; }
  .t-head { grid-column: 1 / -1 !important; grid-row: span 2 !important; }
  .t-cocorico, .t-picorer, .t-minute { grid-column: 1 / -1 !important; grid-row: span 3 !important; }
  .t-menu, .t-pot, .t-mijoteur, .t-note { grid-row: span 2 !important; }
  .tile .cap b { font-size: 1rem; }
  .tile .cap span { font-size: .875rem; }
  .ui-amount { font-size: 3rem; }
  .ui-chip { font-size: 1.6rem; }
  .ui-mail { font-size: .8rem; top: .8em; }
  .t-menu .cap span, .t-pot .cap span { display: none; }
  .ui-big { font-size: 2rem; }
  .ui-seg, .ui-pay { font-size: 1rem; }
  .ui-btn { font-size: 1.8rem; }
  .pots { grid-template-columns: 1fr 1fr; }
  .pots figure:first-child { grid-column: 1 / -1; }
  .pots figure:nth-child(2) { margin-top: 0; }
  .pots figure:nth-child(3) { margin-top: 40px; }
  .app { grid-template-columns: 1fr; gap: 28px; }
  .plans { display: block; }
  .plan-stage { display: none; }
  .plan-names button { font-size: 10vw; }
  .plan-inline { display: grid; gap: 16px; padding: 8px 0 48px; }
  .plan-inline[hidden] { display: none; }
  .plan-inline .price b { font-size: 20vw; }
  .plan-inline .btn { width: 100%; }
  .faq h2 { margin-bottom: 56px; font-size: 9vw; }
  .fcard .tab { width: 120px; left: calc(var(--i) * 48px); font-size: .875rem; padding: 0 12px; }
  .fcard button { padding: 20px; font-size: 1.0625rem; }
  .fcard .ans { padding: 0 20px 24px; font-size: 1rem; }
  .cta { grid-template-columns: 1fr; min-height: 84svh; gap: 32px; padding: 40px 16px; align-content: start; }
  .cta-text, .dialog { grid-column: 1 / -1; }
  .cta-text { align-self: start; }
  .cta-text .display { font-size: 13vw; }
  .dialog { width: 100%; padding: 22px 18px; }
  .dialog .btn { min-height: 52px; }
  .blocks { height: 22svh; min-height: 120px; }
  .blocks span { font-size: 15vw; }
  .foot-cols { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .foot-cols nav { grid-column: span 1; }
  .foot-contact { grid-column: 1 / -1; }
}

/* =================== v2 =================== */
.logo { display: block; }
.logo img { width: min(100%, 360px); height: auto; }
.ico { width: 56px; height: 56px; color: var(--accent); flex: none; }

/* --- ça mijote : trois étapes --- */
.steps { margin-top: var(--gap-section); padding: 0 var(--m); }
.steps-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.steps-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.step { position: relative; padding: 36px 36px 32px; display: grid; gap: 14px; align-content: start; }
.step h3 { font-size: var(--step-head); font-weight: 700; letter-spacing: -0.04em; line-height: 1; text-transform: lowercase; }
.step .who { max-width: 34ch; }
.step .who b { display: block; font-size: var(--step-small); text-transform: uppercase; letter-spacing: .02em; color: var(--accent-deep); }
.s3 .who b { color: #fff; opacity: .85; }
.step .tools { margin-top: 8px; font-size: var(--step-small); font-weight: 600; }
.s1 { background: var(--surface); }
.s2 { background: var(--surface-2); }
.s3 { background: var(--accent); color: #fff; }
.s3 .ico { color: #fff; }
.step:not(.s3)::after { content: ""; position: absolute; right: -22px; top: 50%; width: 44px; height: 44px; margin-top: -22px; z-index: 2; background: var(--ink); clip-path: polygon(0 0, 100% 50%, 0 100%); }

/* --- à la carte : sept outils --- */
.carte { margin-top: var(--gap-section); padding: 0 var(--m); }
.carte-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.dishes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dish { display: flex; gap: 24px; padding: 32px; background: var(--surface); }
.dish:nth-child(4n+2), .dish:nth-child(4n+3) { background: var(--surface-2); }
.dish:last-child { grid-column: 1 / -1; background: var(--ink); color: #fff; }
.dish:last-child .ico { color: #fff; }
.dish h3 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.dish .promise { font-weight: 600; color: var(--accent-deep); margin: 4px 0 12px; }
.dish:last-child .promise { color: #e09a84; }
.dish ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.dish li { position: relative; padding-left: 1.4em; font-size: 1rem; }
.dish li::before { content: ""; position: absolute; left: 0; top: .6em; width: .7em; height: .48em; background: currentColor; opacity: .55; border-radius: var(--pot); }
.extras { margin-top: 28px; max-width: 70ch; font-weight: 500; }

/* --- histoire --- */
.story { margin-top: var(--gap-section); padding: 0 var(--m); display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: center; }
.story-text { display: grid; gap: 18px; }
.story-text .head { margin-bottom: 12px; }
.story-text p { max-width: 46ch; }
.story .app-shot { margin: 0; }
.story .app-shot figcaption { padding: 12px 0 18px; color: var(--muted); text-align: center; }

/* --- comparatif tricount --- */
.versus { margin-top: var(--gap-section); padding: 0 var(--m); }
.vs-head { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: end; margin-bottom: 40px; }
.vs-table table, .matrix table { width: 100%; border-collapse: collapse; }
.vs-table th, .vs-table td { padding: 16px 18px; text-align: left; vertical-align: middle; }
.vs-table thead th { font-size: 1.25rem; font-weight: 700; padding-bottom: 18px; }
.vs-table thead th.c { background: var(--accent); color: #fff; }
.vs-table tbody th { font-weight: 500; width: 46%; }
.vs-table tbody tr:nth-child(odd) th, .vs-table tbody tr:nth-child(odd) td { background: var(--surface); }
.vs-table td.c { background: #f3dcd3 !important; font-weight: 600; width: 27%; }
.vs-table tbody tr:nth-child(odd) td.c { background: #efd2c8 !important; }
.vs-note { margin-top: 16px; color: var(--muted); max-width: 80ch; }
.yes { display: inline-block; width: 24px; height: 24px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; vertical-align: middle; }
.yes.ink { background-color: var(--ink); }
.no { color: var(--muted); }

/* --- tarifs --- */
.pricing .head { margin-bottom: 48px; }
.plan-panel .hook, .plan-inline .hook { font-weight: 600; color: var(--accent); }
.price.quote b { font-size: clamp(3rem, 1rem + 5vw, 6rem); }
.matrix-wrap { margin-top: 96px; }
.matrix-title { font-size: var(--step-lead); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 20px; }
.matrix { overflow-x: auto; }
.matrix table { min-width: 860px; font-size: 1rem; }
.matrix th, .matrix td { padding: 13px 14px; text-align: center; }
.matrix tbody th { text-align: left; font-weight: 500; width: 30%; }
.matrix thead th { position: sticky; top: 0; background: var(--ink); color: #fff; font-weight: 700; text-transform: lowercase; font-size: 1.125rem; }
.matrix thead th.hl { background: var(--accent); }
.matrix tr.grp th { background: var(--bg); text-align: left; font-weight: 700; font-size: 1.125rem; padding-top: 28px; }
.matrix tbody tr:not(.grp):nth-child(even) th, .matrix tbody tr:not(.grp):nth-child(even) td { background: var(--surface); }
.matrix td:nth-child(4) { background: #f3dcd3 !important; font-weight: 600; }
.muted-note { margin-top: 14px; color: var(--muted); }

/* --- pied de page : logo-blocs --- */
.blocs-logo svg { display: block; width: 100%; height: auto; }

@media (max-width: 900px) {
  .logo img { width: min(78%, 300px); }
  .steps-row { grid-template-columns: 1fr; }
  .step { padding: 28px 22px; }
  .step:not(.s3)::after { right: auto; left: 50%; top: auto; bottom: -22px; margin: 0 0 0 -22px; clip-path: polygon(0 0, 100% 0, 50% 100%); }
  .dishes { grid-template-columns: 1fr; }
  .dish { padding: 24px 20px; gap: 16px; flex-direction: column; }
  .dish:nth-child(n) { background: var(--surface); }
  .dish:nth-child(even) { background: var(--surface-2); }
  .dish:last-child { background: var(--ink); }
  .ico { width: 48px; height: 48px; }
  .story, .vs-head { grid-template-columns: 1fr; gap: 28px; }
  .vs-table th, .vs-table td { padding: 12px 10px; font-size: .9375rem; }
  .vs-table thead th { font-size: 1rem; }
  .vs-table tbody th { width: 50%; }
  .vs-table td.c { width: 26%; }
  .matrix-wrap { margin-top: 64px; }
  .seg { flex-wrap: wrap; }
  .seg label { flex: 1 1 45%; }
}

/* =================== v0.3 : sections refaites =================== */
:root { --line: #e9e2d8; --r: 14px; --red-soft: #f7e6df; }
.sec-head { display: grid; gap: 18px; margin-bottom: 48px; max-width: 920px; }
.sec-head .head { margin: 0; }
.sec-head .lead { color: var(--muted); max-width: 52ch; margin: 0; }
.head-sm { font-size: clamp(1.75rem, 1rem + 2vw, 2.75rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; text-transform: lowercase; margin: 0; }
.i-yes, .i-no, .i-part { display: inline-block; width: 24px; height: 24px; border-radius: 50%; flex: none; vertical-align: middle; background-position: center; background-repeat: no-repeat; background-size: 15px; }
.i-yes { background-color: var(--accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.i-no { background-color: #ece6dc; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7L7 17' fill='none' stroke='%238a837d' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); background-size: 12px; }
.i-part { background-color: #f4ead2; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12h10' fill='none' stroke='%239a6b00' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* --- ça mijote : le parcours --- */
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.flow-step { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 28px 28px 26px; display: flex; flex-direction: column; gap: 12px; }
.flow-step.last { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } /* taste-skill-ignore : contour, pas une ombre */
.flow-step:not(.last)::after { content: ""; position: absolute; right: -33px; top: 46px; width: 26px; height: 26px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; z-index: 2; }
.flow-top { display: flex; align-items: center; justify-content: space-between; }
.flow-num { width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 1.125rem; }
.last .flow-num { background: var(--accent); }
.flow-ico .ico { width: 36px; height: 36px; }
.flow-step h3 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin-top: 6px; }
.flow-sum { font-weight: 600; color: var(--accent-deep); margin-top: -4px; }
.flow-who { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; margin: 6px 0 4px; font-size: 1rem; line-height: 1.45; }
.flow-who dt { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: var(--surface); padding: 3px 8px; border-radius: 6px; align-self: start; margin-top: 2px; text-align: center; }
.flow-who dd { margin: 0; }
.chips { list-style: none; padding: 0; margin: auto 0 0; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 6px; }
.chips li { font-size: .8125rem; font-weight: 600; background: var(--red-soft); color: var(--accent-deep); padding: 4px 10px; border-radius: 999px; }

/* --- à la carte --- */
.dishes { gap: 16px; }
.dish { background: #fff !important; border: 1px solid var(--line); border-radius: var(--r); padding: 26px; gap: 20px; color: var(--ink) !important; }
.dish:last-child { grid-column: auto; }
.dish-ico { width: 60px; height: 60px; border-radius: 16px; background: var(--red-soft); display: grid; place-items: center; flex: none; }
.dish .ico, .dish:last-child .ico { width: 34px; height: 34px; color: var(--accent); }
.dish h3 { font-size: 1.5rem; }
.dish .promise, .dish:last-child .promise { color: var(--accent-deep); }
.dish li { font-size: .975rem; color: var(--ink); }
.extras { background: var(--surface); border-radius: var(--r); padding: 22px 26px; max-width: none; margin-top: 16px; }

/* --- histoire --- */
.story { display: block; }
.story-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.story-intro { position: sticky; top: 32px; display: grid; gap: 32px; }
.story-quote { margin: 0; padding: 28px 30px; background: var(--accent); color: #fff; border-radius: var(--r); }
.story-quote p { font-size: clamp(1.375rem, 1rem + 1.2vw, 2rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.story-line { list-style: none; margin: 0; padding: 0 0 0 34px; position: relative; display: grid; gap: 36px; }
.story-line::before { content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 3px; background: var(--surface-2); border-radius: 3px; }
.story-line li { position: relative; }
.story-line li::before { content: ""; position: absolute; left: -34px; top: 4px; width: 21px; height: 21px; border-radius: 50%; background: #fff; border: 4px solid var(--accent); }
.story-line li:last-child::before { background: var(--accent); }
.story-line .when { display: block; font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent-deep); margin-bottom: 6px; }
.story-line p { font-size: 1.125rem; line-height: 1.6; max-width: 54ch; }
.browser { margin: 72px 0 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.browser-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--line); }
.browser-bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--surface-2); }
.browser-bar span { margin-left: 12px; font-size: .8125rem; color: var(--muted); background: var(--surface); padding: 4px 14px; border-radius: 999px; }
.browser img { width: 100%; }
.browser figcaption { padding: 12px 16px; font-size: .875rem; color: var(--muted); background: #fff; border-top: 1px solid var(--line); }

/* --- cocotte ou tricount --- */
.vs-wrap { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
table.vs { width: 100%; border-collapse: collapse; table-layout: fixed; }
.vs col.c-feat { width: 46%; } .vs col.c-us { width: 27%; } .vs col.c-them { width: 27%; }
.vs thead th { vertical-align: bottom; text-align: left; padding: 24px; }
.vs-score { background: var(--surface); }
.vs-score b { display: block; font-size: 4rem; line-height: .9; letter-spacing: -0.05em; color: var(--accent); }
.vs-score span { display: block; font-size: 1rem; font-weight: 500; max-width: 26ch; margin-top: 6px; }
.vs-us { background: var(--ink); color: #fff; }
.vs-us img { width: 150px; height: auto; display: block; margin-bottom: 10px; }
.vs-them { background: var(--surface-2); color: var(--ink); }
.vs-them b { display: block; font-size: 1.75rem; letter-spacing: -0.03em; margin-bottom: 10px; line-height: 1.1; }
.vs-us span, .vs-them span { display: block; font-size: .875rem; font-weight: 400; opacity: .9; }
.vs tr.grp th { background: #fff; text-align: left; padding: 26px 24px 10px; font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent-deep); }
.vs tbody tr:not(.grp) { border-top: 1px solid var(--line); }
.vs tbody th[scope=row] { text-align: left; padding: 14px 24px; font-weight: 400; }
.vs tbody th b { display: block; font-weight: 600; }
.vs tbody th span { display: block; font-size: .875rem; color: var(--muted); }
.vs td { padding: 14px 20px; vertical-align: middle; font-size: .9375rem; }
.vs td { display: table-cell; }
.vs td > span:last-child { margin-left: 10px; vertical-align: middle; }
.vs td:nth-child(2) { background: var(--red-soft); font-weight: 600; }
.vs td.neg, .vs td.part { color: var(--muted); }
.vs td:nth-child(2).neg { color: var(--ink); }
.vs-note { margin-top: 14px; font-size: .875rem; color: var(--muted); max-width: 90ch; }

/* --- tarifs : détail --- */
.mx-block { margin-top: 112px; }
.mx-block .sec-head { margin-bottom: 28px; }
.mx-wrap { border: 1px solid var(--line); border-radius: var(--r); overflow-x: auto; }
table.mx { width: 100%; min-width: 980px; border-collapse: collapse; font-size: .9375rem; }
.mx thead th { vertical-align: top; padding: 22px 12px 18px; text-align: center; background: #fff; border-bottom: 1px solid var(--line); position: relative; }
.mx thead th b { display: block; font-size: 1.125rem; text-transform: lowercase; letter-spacing: -0.01em; }
.mx thead th .p { display: block; font-size: 1.625rem; font-weight: 700; letter-spacing: -0.03em; margin-top: 6px; line-height: 1.1; }
.mx thead th .per { display: block; font-size: .8125rem; color: var(--muted); font-weight: 400; margin-bottom: 14px; }
.mx thead th .btn { min-height: 38px; font-size: .875rem; padding: .45em 1.1em .6em; }
.mx thead th.corner { text-align: left; vertical-align: bottom; font-size: .8125rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding-left: 22px; }
.mx thead th.hl { background: var(--red-soft); }
.mx thead th.hl em { position: absolute; top: -1px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; background: var(--accent); color: #fff; padding: 3px 10px; border-radius: 0 0 8px 8px; }
.mx thead th.dark { background: var(--ink); color: #fff; }
.mx thead th.dark .per { color: #cdc3b8; }
.mx thead th.dark .btn { background: #fff; color: var(--ink); }
.mx tbody th[scope=row] { text-align: left; font-weight: 500; padding: 12px 22px; width: 30%; }
.mx td { text-align: center; padding: 12px; }
.mx tbody tr:not(.grp) { border-top: 1px solid var(--line); }
.mx tr.grp th { text-align: left; padding: 24px 22px 8px; font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent-deep); background: #fff; }
.mx td.hl { background: var(--red-soft); font-weight: 600; }
.mx-note { margin-top: 14px; font-size: .875rem; color: var(--muted); }

/* --- questions --- */
.faq-grid { display: grid; grid-template-columns: 4fr 8fr; gap: 64px; align-items: start; }
.faq-side { position: sticky; top: 32px; display: grid; gap: 20px; }
.faq-side .head { margin: 0; }
.faq-side .lead { color: var(--muted); }
.faq-help { background: var(--surface); border-radius: var(--r); padding: 22px; display: grid; gap: 8px; justify-items: start; margin-top: 12px; }
.faq-help p { font-size: .9375rem; color: var(--muted); }
.faq-group { margin-bottom: 36px; }
.faq-group h3 { font-size: clamp(1.625rem, 1.1rem + 1.4vw, 2.25rem); font-weight: 700; text-transform: lowercase; letter-spacing: -0.035em; line-height: 1.05; color: var(--ink); margin-bottom: 14px; }
.qa { border-bottom: 1px solid var(--line); }
.qa:first-of-type { border-top: 1px solid var(--line); }
.qa summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0; font-size: 1.125rem; font-weight: 600; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover span { color: var(--accent); }
.qa summary i { width: 30px; height: 30px; border-radius: 50%; background: var(--surface); flex: none; position: relative; transition: background-color .2s, transform .25s var(--ease); }
.qa summary i::before, .qa summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2.5px; margin: -1.25px 0 0 -6px; background: var(--ink); border-radius: 2px; }
.qa summary i::after { transform: rotate(90deg); transition: transform .25s var(--ease); }
.qa[open] summary i { background: var(--accent); }
.qa[open] summary i::before, .qa[open] summary i::after { background: #fff; }
.qa[open] summary i::after { transform: rotate(0deg); }
.qa p { padding: 0 50px 22px 0; color: var(--ink); line-height: 1.6; max-width: 64ch; }

@media (max-width: 900px) {
  .sec-head { margin-bottom: 32px; gap: 14px; }
  .flow { grid-template-columns: 1fr; gap: 34px; }
  .flow-step:not(.last)::after { right: auto; left: 50%; top: auto; bottom: -31px; margin-left: -13px; transform: rotate(90deg); }
  .flow-step { padding: 22px 20px; }
  .dish { padding: 20px; flex-direction: row; gap: 16px; }
  .dish-ico { width: 48px; height: 48px; border-radius: 12px; }
  .dish .ico { width: 28px; height: 28px; }
  .story-grid, .faq-grid { grid-template-columns: 1fr; gap: 36px; }
  .story-intro, .faq-side { position: static; }
  .browser { margin-top: 48px; }
  .vs-wrap { overflow-x: auto; }
  table.vs { min-width: 640px; }
  .vs thead th { padding: 16px; }
  .vs-score b { font-size: 3rem; }
  .vs tbody th[scope=row] { padding: 12px 16px; }
  .vs td { padding: 12px; }
  .mx-block { margin-top: 72px; }
  .qa summary { font-size: 1.0625rem; }
  .qa p { padding-right: 0; }
}

.dish.extras-card { background: var(--ink) !important; color: #fff !important; border-color: var(--ink); }
.dish.extras-card .promise { color: #e09a84; }
.dish.extras-card p:last-child { font-size: .975rem; line-height: 1.6; }
.story-intro { position: static; }

/* v0.4 : logo Cocôtte */
.logo img { width: min(100%, 420px); }
.ico { color: var(--accent); }

/* v0.4 : aperçu ordinateur, plus petit et net */
.apercu { margin: 72px auto 0; max-width: 1320px; display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2.1fr); gap: 48px; align-items: center; background: var(--surface); border-radius: var(--r); padding: clamp(24px, 3vw, 40px); }
.apercu-text h3 { font-size: var(--step-lead); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 16px; }
.apercu-text ul { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 12px; }
.apercu-text li { padding-left: 22px; position: relative; line-height: 1.45; }
.apercu-text li::before { content: ""; position: absolute; left: 0; top: .55em; width: 11px; height: 8px; background: var(--accent); border-radius: 0 0 50% 50% / 0 0 60% 60%; }
.apercu-text .small { color: var(--muted); font-size: .875rem; }
.apercu .browser { margin: 0; width: 100%; max-width: 860px; justify-self: end; box-shadow: 0 24px 60px -30px rgba(34,32,29,.35); }
.apercu .browser img { width: 100%; height: auto; }
@media (max-width: 900px) { .apercu { grid-template-columns: 1fr; gap: 28px; margin-top: 48px; } .apercu .browser { justify-self: stretch; } }
.apercu .browser-bar { padding: 8px 12px; gap: 6px; }
.apercu .browser-bar i { width: 9px; height: 9px; }
.apercu .browser-bar span { font-size: .75rem; padding: 2px 12px; margin-left: 8px; }

/* ============ v0.5 : barre de menu, newsletter, pages simples ============ */
html { scroll-padding-top: 84px; }
.topbar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px var(--m); min-height: 64px;
  background: rgba(251, 249, 245, .92); -webkit-backdrop-filter: saturate(1.2) blur(10px); backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid rgba(34, 32, 29, .07); }
.tb-logo img { display: block; width: 128px; height: auto; }
.tb-nav { display: flex; align-items: center; gap: 4px 18px; font-size: .9375rem; font-weight: 500; }
.tb-nav a { text-decoration: none; padding: 8px 0; }
.tb-nav > a:not(.btn):not(.tb-lang):hover { color: var(--accent); }
.tb-sep { width: 1px; height: 22px; background: rgba(34, 32, 29, .15); margin: 0 4px; }
.tb-lang { font-weight: 700; font-size: .8125rem; letter-spacing: .04em; border: 1.5px solid currentColor; border-radius: 999px; padding: 3px 9px !important; line-height: 1.2; }
.tb-lang:hover { background: var(--ink); color: #fff; }
.tb-login { font-weight: 600; }
.tb-cta { min-height: 40px; padding: .45em 1.15em .6em; }
.tb-burger { display: none; width: 44px; height: 44px; border: 0; background: none; padding: 10px; cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; }
.tb-burger span { display: block; height: 2.5px; background: var(--ink); border-radius: 2px; transition: transform .2s, opacity .2s; }
.tb-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.tb-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.tb-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
@media (min-width: 901px) {
  .hero { min-height: calc(100svh - 64px); }
  .card { min-height: calc(100svh - 88px); }
  .stage { top: 76px; height: calc(100svh - 88px); }
}
@media (max-width: 1080px) { .tb-nav > a[href="#tricount"] { display: none; } }
@media (max-width: 900px) {
  .tb-burger { display: flex; }
  .tb-nav { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--m) 20px; background: var(--bg);
    border-bottom: 1px solid rgba(34, 32, 29, .1); box-shadow: 0 18px 30px -18px rgba(34, 32, 29, .35); display: none; font-size: 1.0625rem; }
  .tb-nav.open { display: flex; }
  .tb-nav > a { padding: 13px 0; border-bottom: 1px solid rgba(34, 32, 29, .07); }
  .tb-nav > a[href="#tricount"] { display: block; }
  .tb-sep { display: none; }
  .tb-lang { align-self: flex-start; margin: 14px 0 4px; }
  .tb-cta { margin-top: 12px; text-align: center; justify-content: center; }
  .hero, .card { min-height: 0; }
}

.check-line { display: flex; gap: 10px; align-items: flex-start; font-size: .875rem; line-height: 1.4; margin: 6px 0 14px; cursor: pointer; }
.check-line input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--accent); }

.nl { display: grid; grid-template-columns: 1fr 1.1fr; gap: 24px 56px; align-items: center; background: var(--surface); border-radius: var(--r, 16px); padding: clamp(24px, 3.5vw, 44px); margin-top: 56px; }
.nl-text p { margin-top: 8px; color: var(--muted); max-width: 46ch; }
.nl-row { display: flex; gap: 8px; }
.nl-row input { flex: 1; min-width: 0; font: inherit; padding: 12px 16px; border: 1.5px solid rgba(34, 32, 29, .18); border-radius: 12px; background: #fff; color: var(--ink); }
.nl-row input:focus { outline: none; border-color: var(--accent); }
.nl-fine { margin-top: 10px; font-size: .8125rem; color: var(--muted); }
.nl-fine.ok { color: #2f6a3a; font-weight: 600; }
.nl-fine.err { color: var(--accent-deep); font-weight: 600; }
@media (max-width: 760px) { .nl { grid-template-columns: 1fr; } .nl-row { flex-direction: column; } }

body.simple .page { padding: 0 var(--m) 96px; max-width: 860px; margin: 0 auto; }
body.simple .page-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; margin-bottom: 64px; flex-wrap: wrap; }
body.simple .row-links { display: flex; gap: 18px; }
body.simple .page h1 { margin-bottom: 40px; }
body.simple .page h2 { font-size: var(--step-lead); font-weight: 700; letter-spacing: -0.02em; margin: 48px 0 12px; }
body.simple .page p, body.simple .page li { margin: 0 0 12px; }
body.simple .page dl { display: grid; grid-template-columns: 14em 1fr; gap: 8px 20px; margin: 0; }
body.simple .page dt { font-weight: 600; } body.simple .page dd { margin: 0; }
@media (max-width: 640px) { body.simple .page dl { grid-template-columns: 1fr; } body.simple .page dd { margin-bottom: 10px; } }
.bar { height: 12px; display: flex; } .bar span { flex: 1; background: var(--accent); } .bar span:nth-child(even) { background: transparent; }
@media (min-width: 901px) { .plan-stage { top: 88px; } .faq-side { top: 96px; } }

/* ============ v0.6 : espace client (connexion, inscription, compte) ============ */
body.acct { min-height: 100svh; display: flex; flex-direction: column; background: var(--bg); }
.acct-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px var(--m); }
.acct-logo img { display: block; width: clamp(140px, 18vw, 186px); height: auto; }
.acct-right { display: flex; align-items: center; gap: 18px; font-size: var(--step-small); }
.acct-lang { font-weight: 600; text-decoration: none; color: var(--ink); border: 1.5px solid rgba(34, 32, 29, .2); border-radius: 999px; padding: 3px 11px; }
.acct-lang:hover { border-color: var(--accent); color: var(--accent); }
.acct-who { color: var(--muted); max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-out, .btn-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.acct-out:hover, .btn-link:hover { color: var(--accent); }
form.inline { display: inline; margin: 0; }
.acct-main { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: clamp(12px, 3vw, 40px) var(--m) 64px; }
.acct-foot { display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: center; padding: 22px var(--m) 28px; font-size: .8125rem; color: var(--muted); border-top: 1px solid var(--surface-2); }
.acct-foot a { color: inherit; }
.acct .head-sm { margin: 0 0 24px; }
.acct .head-sm + .lead-sm { margin-top: -16px; }
.lead-sm { font-size: 1.0625rem; color: var(--muted); margin: 0 0 26px; max-width: 46ch; }
.muted { color: var(--muted); }

/* écrans de connexion : formulaire + panneau rouge */
.auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); background: #fff; border-radius: 0 0 32px 32px; overflow: hidden; box-shadow: 0 1px 0 var(--surface-2), 0 24px 60px -36px rgba(60, 20, 10, .35); }
.auth-card { padding: clamp(28px, 5vw, 64px) clamp(22px, 5vw, 64px) clamp(32px, 5vw, 56px); }
.auth-card > * { max-width: 440px; }
.auth-side { background: var(--accent); color: #fff; padding: clamp(32px, 5vw, 64px); display: flex; flex-direction: column; gap: 18px; justify-content: flex-start; }
.auth-side img { width: 120px; height: auto; margin-bottom: 6px; }
.auth-side-t { font-size: clamp(1.75rem, 1rem + 2vw, 2.5rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; text-transform: lowercase; margin: 0; }
.auth-side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.auth-side li { position: relative; padding-left: 1.6em; font-weight: 500; }
.auth-side li::before { content: ""; position: absolute; left: 0; top: .5em; width: .95em; height: .62em; background: #fff; border-radius: var(--pot); }
.auth-sig { margin: auto 0 0; padding-top: 24px; font-size: .875rem; opacity: .85; }
.auth-alt { margin: 22px 0 0; font-size: .9375rem; color: var(--muted); }
.row-end { display: flex; justify-content: flex-end; margin: -6px 0 10px; }
.acct-plain .plain { max-width: 640px; }

/* champs */
.acct .field { display: grid; gap: 6px; margin: 0 0 18px; border: 0; padding: 0; min-width: 0; }
.acct .field label, .acct .field legend { font-size: .9375rem; font-weight: 600; padding: 0; }
.acct .field legend { margin-bottom: 6px; }
.acct .field input, .acct .field select { font: 400 1.0625rem "Poppins", sans-serif; padding: 12px 14px; border: 2px solid var(--surface-2); border-radius: 10px; background: var(--bg); color: var(--ink); width: 100%; min-height: 52px; }
.acct .field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.acct .field input:focus, .acct .field select:focus { border-color: var(--accent); outline: none; background-color: #fff; }
.acct .field.bad input { border-color: var(--accent); background: #fdf3f0; }
.f-hint { font-size: .8125rem; color: var(--muted); line-height: 1.4; }
.f-err { font-size: .875rem; color: var(--accent-deep); font-weight: 600; line-height: 1.4; }
.f-err .link, .alert .link { color: inherit; }
.pw { position: relative; display: block; }
.pw input { padding-right: 92px !important; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: var(--surface); border: 0; border-radius: 8px; padding: 7px 10px; font: 600 .8125rem "Poppins", sans-serif; color: var(--ink); cursor: pointer; }
.pw-eye:hover { background: var(--surface-2); }
.acct .seg { border-radius: 12px; }
.acct .seg label { border-radius: 9px; }
.acct .check-line { font-size: .9375rem; margin: 2px 0 14px; }
.acct .check-line.bad span { color: var(--accent-deep); }
.acct .check-line + .f-err { display: block; margin: -8px 0 14px 28px; }
.btn.full { width: 100%; margin-top: 6px; }
.btn.sm { min-height: 42px; padding: .55em 1.1em .65em; font-size: .9375rem; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--surface-2); }
.btn.ghost:hover { background: var(--surface); }
.btn.danger { background: var(--accent-deep); }
.btn.danger:hover { background: #6d2c21; }
.btn.busy { opacity: .6; cursor: progress; }
.btn:disabled { transform: none; }

/* messages */
.alert { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 13px 16px; border-radius: 12px; margin: 0 0 22px; font-size: .9375rem; font-weight: 500; line-height: 1.45; }
.alert.ok { background: #e7f1e6; color: #24532c; }
.alert.err { background: #fbe7e2; color: var(--accent-deep); }
.alert.info { background: var(--surface); color: var(--ink); border-left: 4px solid var(--accent); }

/* espace client */
.dash { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: start; }
.dash-nav { position: sticky; top: 16px; display: grid; gap: 4px; }
.dash-nav a { display: block; padding: 11px 14px; border-radius: 10px; text-decoration: none; color: var(--ink); font-weight: 500; }
.dash-nav a:hover { background: var(--surface); }
.dash-nav a[aria-current="page"] { background: var(--ink); color: #fff; font-weight: 600; border-radius: 0 0 16px 16px; }
.dash-body { min-width: 0; }
.dash-body > .lead-sm { margin-bottom: 28px; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.card-a { background: var(--surface); padding: 24px 24px 26px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; border-radius: 4px; }
.card-a .k { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-deep); }
.card-a .big { font-size: clamp(1.5rem, 1rem + 1.4vw, 2rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; text-transform: lowercase; }
.card-a .big i { font-style: normal; color: var(--muted); font-weight: 600; text-transform: none; font-size: .8em; }
.card-a .meta { color: var(--muted); font-size: .9375rem; }
.card-a p { margin: 0; font-size: .9375rem; }
.card-a .btn { margin-top: auto; }
.card-a.pot { background: var(--accent); color: #fff; border-radius: 18px; }
.card-a.pot .k, .card-a.pot .meta, .card-a.pot .big i { color: rgba(255, 255, 255, .85); }
.card-a .potlist { margin: 4px 0 0; font-size: .9375rem; }
.card-a .potlist li { margin-bottom: 8px; }
.panel { background: #fff; border: 1.5px solid var(--surface-2); border-radius: 16px; padding: clamp(20px, 3vw, 32px); margin-bottom: 18px; }
.panel form { max-width: 520px; }
.panel h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 6px; }
.panel h2 + .muted { margin: 0 0 18px; font-size: .9375rem; max-width: 58ch; }
.panel.danger { border-color: #efc9bf; }
.panel.danger h2 { color: var(--accent-deep); }

@media (max-width: 880px) {
  .auth { grid-template-columns: 1fr; }
  .auth-side { order: -1; padding: 22px 24px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
  .auth-side img { width: 54px; margin: 0; }
  .auth-side-t { font-size: 1.5rem; }
  .auth-side ul, .auth-sig { display: none; }
  .dash { grid-template-columns: 1fr; }
  .dash-nav { position: static; display: flex; overflow-x: auto; gap: 6px; padding-bottom: 4px; margin: 0 calc(-1 * var(--m)); padding-inline: var(--m); scrollbar-width: none; }
  .dash-nav a { white-space: nowrap; background: var(--surface); padding: 8px 13px; font-size: .9375rem; }
  .cards { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .acct-who { display: none; }
  .acct-right { gap: 12px; }
}

/* ============ v0.61 : bande de couleurs sous le menu, séparateurs, menu sur toutes les pages ============ */
.topbar { position: sticky; }
.tb-stripe { position: absolute; left: 0; right: 0; top: 100%; height: 10px; display: flex; gap: 5px; pointer-events: none; }
.tb-stripe span { display: block; height: 100%; flex-basis: 0; min-width: 8px; }
.card { padding-top: 0; }
.tb-out-f { display: inline; }
.tb-out { background: none; border: 0; padding: 8px 0; font: inherit; font-weight: 500; color: var(--muted); cursor: pointer; }
.tb-out:hover { color: var(--accent); }
.sep { display: flex; align-items: center; gap: 22px; margin: clamp(64px, 8vw, 120px) var(--m) 0; }
.sep::before, .sep::after { content: ""; flex: 1; height: 1.5px; background: var(--surface-2); }
.sep-mini { display: flex; align-items: center; gap: 5px; width: clamp(130px, 14vw, 190px); height: 30px; }
.sep-mini span { display: block; flex: 1 1 0; height: var(--h, 100%); }
.sep + section { margin-top: clamp(56px, 7vw, 104px) !important; }
body.simple .page { padding-top: 56px; }
body.acct .acct-main { padding-top: clamp(36px, 5vw, 64px); }
@media (max-width: 900px) {
  .tb-nav .tb-out-f { margin-top: 6px; }
  .tb-nav .tb-login { padding: 13px 0; border-bottom: 1px solid rgba(34, 32, 29, .07); }
}
.t-hint { margin: auto 0 14px; padding: 12px 14px; background: var(--surface); border-radius: 12px; font-size: .875rem; line-height: 1.45; color: var(--muted); }
.t-hint + .t-out { margin-top: 0; }
.brand-note { margin-top: 56px !important; padding-top: 20px; border-top: 1.5px solid var(--surface-2); font-size: .875rem; color: var(--muted); }
/* v0.7 : liste des maisons */
.panel.houses { padding: 8px clamp(14px, 2vw, 24px); }
.house-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--surface-2); }
.house-row:last-child { border-bottom: 0; }
.house-row b { display: block; font-size: 1.125rem; letter-spacing: -0.01em; }

/* ============ v0.71 : torchon, démo « goûtez Cocôtte », situations ============ */
.torchon { height: 72px; }
@media (max-width: 900px) { .torchon { height: 48px; } }

/* démo : une carte d'appli à onglets */
.appcard { width: min(100%, 540px); height: 640px; background: #fff; color: var(--ink); border-radius: 28px; padding: 26px 26px 22px; display: flex; flex-direction: column; box-shadow: 0 30px 60px -28px rgba(40, 8, 4, .55); font-size: 1rem; }
.ac-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.ac-head b { font-size: 1.25rem; letter-spacing: -0.02em; }
.ac-head span { font-size: .8125rem; color: var(--muted); }
.ac-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; background: var(--surface); padding: 4px; border-radius: 14px; margin-bottom: 16px; }
.ac-tabs button { border: 0; background: none; padding: 9px 4px; border-radius: 10px; font: 600 .8125rem "Poppins", sans-serif; color: var(--muted); cursor: pointer; transition: background-color .15s, color .15s; }
.ac-tabs button:hover { color: var(--ink); }
.ac-tabs button[aria-selected="true"] { background: var(--ink); color: #fff; }
.ac-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.ac-panel[hidden] { display: none; }
.ac-cap { font-size: .875rem; color: var(--muted); margin: 0 0 12px; }
.sh-row { display: grid; grid-template-columns: 1fr 104px; gap: 6px 12px; align-items: center; background: var(--surface); border-radius: 14px; padding: 10px 12px; margin-bottom: 8px; }
.sh-row label { font-weight: 600; font-size: .9375rem; }
.sh-row input[type=text] { width: 100%; font: 600 1rem "Poppins", sans-serif; text-align: right; padding: 7px 10px; border: 2px solid transparent; border-radius: 10px; background: #fff; color: var(--ink); }
.sh-row input[type=text]:focus { border-color: var(--accent); outline: none; }
.sh-pct { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; font-size: .8125rem; color: var(--muted); }
.sh-pct input[type=range] { flex: 1; accent-color: var(--accent); }
.sh-pct b { min-width: 3.4em; text-align: right; color: var(--ink); font-size: .875rem; }
.sh-total { font-size: .8125rem; color: var(--muted); margin: 2px 2px 10px; }
.ac-out { margin-top: auto; background: var(--ink); color: #fff; border-radius: 18px; padding: 14px 16px; text-align: center; min-height: 130px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.ac-out p { margin: 0; font-size: .8125rem; color: #d9cfc4; }
.ac-out ul { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 3px; }
.ac-out li { font-weight: 600; }
.ac-out li b { color: #e09a84; }
.ac-out .ac-person { font-size: .75rem; color: #bfb3a7; }
.pot-big { background: var(--accent); color: #fff; border-radius: 18px; padding: 16px 18px; display: flex; flex-direction: column; margin-bottom: 14px; }
.pot-big span { font-size: .8125rem; opacity: .85; }
.pot-big b { font-size: 2.4rem; letter-spacing: -0.04em; line-height: 1.1; }
.pot-bars { display: grid; gap: 8px; margin-bottom: 12px; }
.pot-bars div { display: grid; grid-template-columns: 7.5em 1fr 4.5em; gap: 10px; align-items: center; font-size: .875rem; }
.pot-bars i { display: block; height: 10px; border-radius: 99px; background: linear-gradient(90deg, var(--accent) var(--w), var(--surface) var(--w)); }
.pot-bars b { text-align: right; }
.pot-paid { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 6px; font-size: .875rem; }
.pot-paid li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; background: var(--surface); border-radius: 12px; }
.pot-paid b { white-space: nowrap; color: var(--accent-deep); }
.ac-note { margin: auto 0 0; font-size: .8125rem; color: var(--muted); background: var(--surface); border-radius: 12px; padding: 10px 12px; }
.cal-list { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.cal-list li { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--surface); }
.cal-list i { font-style: normal; font-size: 1.25rem; width: 40px; height: 40px; display: grid; place-items: center; background: #fff; border-radius: 12px; }
.cal-list b { display: block; font-size: .9375rem; }
.cal-list span { font-size: .75rem; color: var(--muted); }
.cal-list em { font-style: normal; font-size: .75rem; font-weight: 700; padding: 4px 9px; border-radius: 99px; background: #fff; white-space: nowrap; }
.cal-list li.late { background: #fbe7e2; }
.cal-list li.late em { background: var(--accent); color: #fff; }
.scan-wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 14px; align-items: start; margin-bottom: 12px; }
.bill { position: relative; overflow: hidden; background: #fbf9f5; border: 1px solid var(--surface-2); border-radius: 12px; padding: 14px; display: grid; gap: 7px; min-height: 230px; }
.bill b { font-size: 1.125rem; }
.bill span { font-size: .6875rem; color: var(--muted); }
.bill i { display: block; height: 7px; border-radius: 4px; background: var(--surface-2); }
.bill i.s { width: 60%; }
.bill u { text-decoration: none; font-weight: 700; justify-self: end; margin-top: 6px; }
.bill .scanline { position: absolute; left: 0; right: 0; top: 0; height: 36px; background: linear-gradient(180deg, transparent, rgba(196, 71, 47, .28), transparent); animation: scan 1.6s ease-in-out 2; }
@keyframes scan { 0% { top: -36px; } 100% { top: 100%; } }
.read { margin: 0; display: grid; gap: 6px; }
.read div { display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 10px; background: var(--surface); font-size: .8125rem; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
.read.on div { opacity: 1; transform: none; }
.read div:nth-child(2) { transition-delay: .15s; } .read div:nth-child(3) { transition-delay: .3s; } .read div:nth-child(4) { transition-delay: .45s; } .read div:nth-child(5) { transition-delay: .6s; }
.read dt { color: var(--muted); } .read dd { margin: 0; font-weight: 600; }
.demo-points { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 6px; max-width: 46ch; }
.demo-points button { width: 100%; text-align: left; background: none; border: 0; border-left: 3px solid var(--surface-2); padding: 8px 0 8px 14px; font: 400 1rem/1.45 "Poppins", sans-serif; color: var(--ink); cursor: pointer; transition: border-color .15s, background-color .15s; }
.demo-points button:hover, .demo-points button.on { border-color: var(--accent); background: rgba(196, 71, 47, .05); }
.demo .note-text h2 { margin-bottom: 24px; }
.demo .note-text p { max-width: 44ch; }
@media (max-width: 900px) {
  .appcard { height: 600px; padding: 18px 14px; border-radius: 22px; }
  .ac-tabs button { font-size: .75rem; padding: 8px 2px; }
  .scan-wrap { grid-template-columns: 1fr; }
  .bill { min-height: 150px; }
}

/* situations : mosaïque de photos */
.cases { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 230px; grid-auto-flow: dense; gap: 12px; }
.case { position: relative; margin: 0; overflow: hidden; border-radius: 22px; background: var(--accent-deep); }
.case.xl { grid-column: span 2; grid-row: span 2; }
.case.tall { grid-row: span 2; }
.case.wide { grid-column: span 2; }
.case img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.case:hover img { transform: scale(1.05); }
.case figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 18px 16px; color: #fff; background: linear-gradient(180deg, transparent, rgba(20, 12, 8, .78)); display: grid; gap: 4px; }
.case figcaption b { font-size: 1.125rem; letter-spacing: -0.01em; }
.case.xl figcaption b { font-size: 1.625rem; }
.case figcaption span { font-size: .875rem; line-height: 1.4; opacity: .92; }
.case.xl figcaption span { font-size: 1rem; max-width: 38ch; }
@media (max-width: 900px) {
  .cases { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin: 0 calc(-1 * var(--m)); padding: 0 var(--m) 8px; scrollbar-width: none; }
  .cases::-webkit-scrollbar { display: none; }
  .case { flex: 0 0 78vw; height: 420px; scroll-snap-align: start; }
}
.sh-sub { display: block; font-weight: 400; color: var(--muted); font-size: .75rem; }
#scan-again { align-self: flex-start; margin-bottom: 12px; }

/* v0.73 : abonnement */
.sub-head .k { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-deep); }
.sub-state { margin: 6px 0 0; font-size: 1.0625rem; font-weight: 500; }
.sub-state.trial_over, .sub-state.past_due, .sub-state.readonly { color: var(--accent-deep); }
.plan-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 6px 0 14px; }
.plan-card { position: relative; display: grid; gap: 4px; padding: 16px; border: 2px solid var(--surface-2); border-radius: 14px; cursor: pointer; transition: border-color .15s, background-color .15s; }
.plan-card input { position: absolute; opacity: 0; }
.plan-card b { font-size: 1.125rem; text-transform: lowercase; letter-spacing: -0.01em; }
.plan-card .pm { color: var(--muted); font-size: .9375rem; }
.plan-card:has(input:checked) { border-color: var(--accent); background: #fdf3f0; }
.plan-card:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.row-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) { .plan-cards { grid-template-columns: 1fr; } .house-row { flex-wrap: wrap; } }
#subf .btn { margin-top: 10px; }
#subf .field { margin-bottom: 12px; }
.sep-mini { width: clamp(84px, 8vw, 112px); gap: 6px; height: 34px; }
.sep-mini { height: 44px; }
.torchon { height: 84px; }
@media (max-width: 900px) { .torchon { height: 56px; } }

/* ============ v0.81 : tableau de bord administrateur (gestion.php) ============ */
.dash-nav .adm-link { margin-top: 14px; border-top: 1.5px solid var(--surface-2); border-radius: 0; padding-top: 14px; color: var(--accent-deep); font-weight: 600; }
.adm .dash-nav .adm-back { margin-top: 14px; color: var(--muted); font-size: .9375rem; }
.adm-kicker { margin: 0 0 6px; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-deep); }
.adm .dash-body > h1 { margin-bottom: 24px; }
.adm-crumb { margin: 0 0 2px; font-size: .9375rem; color: var(--muted); }
.adm-crumb a { color: var(--muted); }
.adm-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.adm-kpi { background: var(--surface); border-radius: 16px; padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.adm-kpi .k { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-deep); }
.adm-kpi .big { font-size: clamp(1.625rem, 1.1rem + 1.4vw, 2.125rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.adm-kpi .meta { color: var(--muted); font-size: .875rem; line-height: 1.4; }
.adm-bars { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; height: 220px; align-items: end; }
.adm-bars li { height: 100%; display: grid; grid-template-rows: auto 1fr auto; align-items: end; justify-items: center; gap: 6px; min-width: 0; }
.adm-bars .bar { width: 100%; max-width: 44px; background: var(--accent); border-radius: 6px 6px 0 0; align-self: end; }
.adm-bars li:last-child .bar { background: var(--ink); }
.adm-bars .n { font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.adm-bars .w { font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.adm-search { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; }
.adm-search input[type=search], .adm-search select, .adm-inline select { min-height: 42px; padding: 0 14px; border: 1.5px solid var(--surface-2); border-radius: 10px; font: 500 .9375rem "Poppins", sans-serif; background: #fff; color: var(--ink); }
.adm-search input[type=search] { flex: 1 1 260px; min-width: 0; }
.adm-search .muted { font-size: .875rem; }
.adm-search .btn.sm { min-height: 42px; }
.adm-count { margin: 0 0 10px; font-size: .875rem; color: var(--muted); }
.adm-tw { overflow-x: auto; border: 1.5px solid var(--surface-2); border-radius: 14px; background: #fff; }
.panel .adm-tw { border: 0; border-radius: 0; margin: 0 calc(-1 * clamp(20px, 3vw, 32px)) calc(-1 * clamp(20px, 3vw, 32px)); }
.panel h2 + .adm-tw { margin-top: 14px; }
.adm-t { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.adm-t th, .adm-t td { padding: 12px 16px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--surface-2); white-space: nowrap; }
.adm-t thead th { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: var(--surface); }
.adm-t tbody tr:last-child td { border-bottom: 0; }
.adm-t tbody tr:hover td { background: #fcfaf7; }
.adm-t .c { text-align: center; }
.adm-t a { color: var(--ink); font-weight: 600; }
.adm-t a:hover { color: var(--accent); }
.adm-t small { color: var(--muted); }
.adm-mail { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.adm-chip { display: inline-block; padding: 3px 10px 4px; border-radius: 999px; font-size: .8125rem; font-weight: 600; line-height: 1.3; background: var(--surface); color: var(--ink); white-space: nowrap; }
.adm-chip.ok { background: #e7f1e6; color: #24532c; }
.adm-chip.warn { background: #fdf0d9; color: #7a4b0c; }
.adm-chip.bad { background: #fbe7e2; color: var(--accent-deep); }
.adm-chip.info { background: #e9eef6; color: #2c4466; }
.adm-dl { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 12px 20px; margin: 0; font-size: .9375rem; }
.adm-dl dt { color: var(--muted); font-weight: 500; }
.adm-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.adm-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.adm-f { margin: 0; display: inline; }
.panel form.adm-f { max-width: none; }
.adm-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--surface-2); }
.panel form.adm-inline { max-width: none; }
.adm-inline label { font-weight: 600; font-size: .9375rem; }
.adm-gap { margin-top: 18px; }
.adm-lockf { margin: 4px 0 0; }
.adm-lockf button { background: none; border: 0; padding: 8px 14px; font: 500 .9375rem "Poppins", sans-serif; color: var(--accent-deep); cursor: pointer; text-align: left; }
.adm-lockf button:hover { text-decoration: underline; }
.adm-pre { background: var(--ink); color: #fff; padding: 16px 18px; border-radius: 12px; font-size: .8125rem; line-height: 1.6; white-space: pre-wrap; word-break: break-all; user-select: all; }
.panel:has(.adm-tw) { overflow: hidden; }
.panel p.muted { font-size: .9375rem; }
.adm-t td:last-child { white-space: normal; min-width: 160px; }
.adm-bars li.z .bar { background: var(--surface-2); }
.adm-bars li.z .n { color: var(--muted); font-weight: 500; }
.adm .head-sm.adm-name { text-transform: none; }
@media (max-width: 880px) {
  .adm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm .dash-nav .adm-back, .dash-nav .adm-link { margin-top: 0; border-top: 0; padding-top: 8px; }
  .adm-bars { height: 170px; gap: 4px; }
  .adm-bars .w { font-size: .6875rem; visibility: hidden; }
  .adm-bars li:nth-child(3n) .w { visibility: visible; }
  .adm-dl { grid-template-columns: 1fr; gap: 2px; }
  .adm-dl dd { margin-bottom: 10px; }
}
@media (max-width: 520px) { .adm-kpis { grid-template-columns: 1fr 1fr; gap: 10px; } .adm-kpi { padding: 16px; } }
.fine-sm { margin: 18px 0 0; font-size: .875rem; color: var(--muted); }
.fine-sm a { color: var(--muted); }
.plain:has(.adm-lock) { display: block; width: 100%; max-width: none; }
.adm-lock { width: 100%; max-width: 560px; margin: 0 auto; background: #fff; border-radius: 0 0 24px 24px; box-shadow: 0 18px 50px rgba(34, 32, 29, .08); }
.adm-lock .lead-sm { margin-bottom: 24px; }

/* v0.89 : prénoms et noms gardent leurs majuscules dans les titres en minuscules */
.keep-case { display: contents; }
/* « Cocôtte » garde sa majuscule dans les titres mis en minuscules ; en capitales, il passe en « COCÔTTE » comme le reste */
.display .keep-case, .head .keep-case, .hero h1 .keep-case, .how-steps h3 .keep-case, .plan-names button .keep-case, .step h3 .keep-case,
.matrix thead th .keep-case, .head-sm .keep-case, .mx thead th b .keep-case, .faq-group h3 .keep-case { text-transform: none; }

/* ============ v0.91 : mode d'emploi + lexique (guide.html) ============ */
.guide { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); max-width: 1120px; margin: 0 auto; padding: 48px var(--m) 96px; }
.g-toc { position: sticky; top: 96px; align-self: start; max-height: calc(100vh - 120px); overflow-y: auto; display: flex; flex-direction: column; padding-right: 8px; }
.g-toc-h { margin: 0 0 6px; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-deep); }
.g-toc .g-grp { margin: 18px 0 4px; font-size: .8125rem; font-weight: 700; color: var(--ink); }
.g-toc .g-grp:first-of-type { margin-top: 8px; }
.g-toc a { padding: 5px 0 5px 12px; border-left: 2px solid var(--surface-2); color: var(--muted); font-size: .9375rem; text-decoration: none; line-height: 1.35; }
.g-toc a:hover { color: var(--ink); }
.g-toc a[aria-current] { color: var(--accent-deep); border-left-color: var(--accent); font-weight: 600; }
.g-main { min-width: 0; max-width: 720px; }
.g-main h1 { margin: 0 0 16px; }
.g-lead { font-size: var(--step-lead); color: var(--muted); line-height: 1.5; margin: 0 0 20px; }
.g-lead a, .g-sec a, .g-help a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.g-back { margin: 0 0 40px; }
.g-sec { padding-top: 40px; margin-top: 8px; border-top: 1.5px solid var(--surface-2); scroll-margin-top: 80px; }
.g-sec h2 { font-size: clamp(1.375rem, 1.1rem + .8vw, 1.75rem); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 16px; }
.g-sec p, .g-sec li { line-height: 1.65; margin: 0 0 12px; }
.g-sec ul, .g-sec ol { padding-left: 1.3em; margin: 0 0 16px; }
.g-sec li::marker { color: var(--accent); font-weight: 700; }
.g-sec .tip, .g-sec .warn { border-radius: 14px; padding: 14px 18px; margin: 18px 0; line-height: 1.6; }
.g-sec .tip { background: #eef3ea; color: #24412a; }
.g-sec .warn { background: #fbefe9; color: #6b2a1d; }
.g-q { width: 100%; min-height: 46px; padding: 0 16px; border: 1.5px solid var(--surface-2); border-radius: 12px; font: 500 1rem "Poppins", sans-serif; margin: 4px 0 20px; background: #fff; }
.g-q:focus { outline: none; border-color: var(--accent); }
.gl { margin: 0; display: grid; gap: 2px; }
.gl-item { display: grid; grid-template-columns: 13em minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--surface-2); scroll-margin-top: 90px; }
.gl-item[hidden] { display: none; }
.g-toc a.g-gl { border-left: 0; padding-left: 0; color: var(--ink); font-weight: 700; }
.g-toc a.g-gl:hover { color: var(--accent-deep); }
.gl-item:target { background: #fdf3ec; margin: 0 -12px; padding: 12px; border-radius: 10px; }
.gl-item dt { font-weight: 700; } .gl-item dd { margin: 0; line-height: 1.55; color: var(--ink); }
.g-toc-m { display: none; margin: -16px 0 24px; border-radius: 14px; background: var(--surface); }
.g-toc-m summary { cursor: pointer; padding: 14px 18px; font-weight: 700; list-style: none; display: flex; justify-content: space-between; }
.g-toc-m summary::-webkit-details-marker { display: none; }
.g-toc-m summary::after { content: "+"; font-size: 1.25rem; line-height: 1; color: var(--accent-deep); }
.g-toc-m[open] summary::after { content: "–"; }
.g-toc-m nav { display: flex; flex-direction: column; padding: 0 18px 16px; }
.g-toc-m .g-grp { margin: 14px 0 4px; font-size: .8125rem; font-weight: 700; }
.g-toc-m a { padding: 6px 0 6px 12px; border-left: 2px solid var(--surface-2); color: var(--muted); text-decoration: none; }
.g-toc-m a.g-gl { border-left: 0; padding-left: 0; color: var(--ink); font-weight: 700; margin-top: 10px; }
.g-help { margin-top: 48px; padding: 20px 22px; border-radius: 16px; background: var(--surface); line-height: 1.6; }
.g-top { margin: 24px 0 0; font-size: .875rem; } .g-top a { color: var(--muted); }
@media (max-width: 900px) {
  .guide { grid-template-columns: 1fr; padding-top: 24px; gap: 0; }
  .g-toc { display: none; }
  .g-toc-m { display: block; }
  .gl-item { grid-template-columns: 1fr; gap: 2px; }
}

/* ============ v0.95 : textes juridiques (CGU, CGV, confidentialité) ============ */
body.simple .page.legal { max-width: 820px; }
.legal .lead-legal { font-size: 1.0625rem; color: var(--muted); line-height: 1.6; margin: -16px 0 32px; }
.legal h2 { scroll-margin-top: 90px; }
.legal ul, .legal ol { padding-left: 1.3em; margin: 0 0 14px; }
.legal li { line-height: 1.6; }
.legal li::marker { color: var(--accent); }
.tbl-legal { width: 100%; border-collapse: collapse; margin: 6px 0 18px; font-size: .9375rem; }
.tbl-legal th, .tbl-legal td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--surface-2); line-height: 1.5; }
.tbl-legal thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: var(--surface); }
.legal-form { margin: 8px 0 18px; padding: 16px 20px; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 12px 12px 0; line-height: 1.8; font-size: .9375rem; }
.legal .todo { margin: 12px 0 18px; padding: 14px 18px; border-radius: 12px; background: #fff4c7; color: #5c4400; border: 1.5px dashed #d9a600; line-height: 1.55; }
.legal-nav { margin-top: 56px; padding-top: 20px; border-top: 1.5px solid var(--surface-2); font-size: .9375rem; color: var(--muted); }
@media (max-width: 600px) { .tbl-legal { font-size: .875rem; } .tbl-legal th, .tbl-legal td { padding: 8px 6px; } }

/* v1.02 : définition « votre Cocôtte, c'est le lieu que vous partagez » */
.cocotte-def { max-width: 62ch; margin: 14px 0 0; font-size: .95rem; line-height: 1.55; color: var(--muted); }
.sec-head .cocotte-def { margin: 0; }
.band .cocotte-def { color: rgba(255,255,255,.86); }