/* Design system du site (plateforme de marque, 30/08/2026 ; maquettes de la piste C « Le palier »).
   Tout est porte par la classe `.y` : la feuille Webflow reste chargee pour les pages qui n'ont pas
   encore ete portees, et ces regles ne touchent que ce qui est dessine dans le systeme.

   Deux jeux de jetons, clair et sombre (plateforme de marque) : le sombre suit `prefers-color-scheme`,
   sans interrupteur. Tout ce qui se colore passe par un jeton — `scripts/yacoCss.test.mjs` refuse une
   couleur ecrite en dur hors des deux blocs, et un jeton clair sans son pendant sombre. Les surfaces
   « encre » (pied de page, bandeau, boutons pleins) gardent leur propre jeton, `--y-ink-surface`,
   pour rester sombres dans les deux modes : c'est la marque, pas le fond. */

.y {
  color-scheme: light;
  --y-bg: #F5F6FA; --y-surface: #FFFFFF; --y-surface-2: #EEF0F6; --y-ink: #171A2B; --y-text: #3E4458;
  --y-muted: #5C6377; --y-line: #DDE1EA; --y-accent: #101585; --y-accent-soft: #E8E9FA; --y-accent-2: #9AA3FF;
  --y-coral: #E2725B; --y-coral-hover: #D4654E; --y-coral-soft: #FBE9E4; --y-ok: #1F7A4D; --y-warn: #B0620A; --y-warn-soft: #FDF1E3;
  --y-ink-surface: #171A2B; --y-ink-surface-hover: #2A2E45; --y-on-ink: #FFFFFF;
  --y-dark-ink: #EDEFF6; --y-dark-muted: #A3A9BC; --y-dark-line: #2C3040; --y-dark-coral: #F08B76;
  --y-shadow: rgba(23, 26, 43, .12);
  --y-display: "Bricolage Grotesque", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --y-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --y-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --y-radius: 12px;
  font-family: var(--y-body); font-size: 16px; line-height: 1.55; color: var(--y-ink); background: var(--y-bg);
  -webkit-font-smoothing: antialiased; box-sizing: border-box;
}
@media (prefers-color-scheme: dark) {
  .y {
    color-scheme: dark;
    --y-bg: #12141C; --y-surface: #1B1E2A; --y-surface-2: #232736; --y-ink: #EDEFF6; --y-text: #C9CEDD;
    --y-muted: #A3A9BC; --y-line: #2C3040; --y-accent: #9AA3FF; --y-accent-soft: #22264A; --y-accent-2: #101585;
    --y-coral: #F08B76; --y-coral-hover: #F4A08E; --y-coral-soft: #3A241F; --y-ok: #5BC38C; --y-warn: #E9A44A; --y-warn-soft: #3A2A14;
    --y-ink-surface: #0B0D14; --y-ink-surface-hover: #1B1E2A; --y-on-ink: #FFFFFF;
    --y-dark-ink: #EDEFF6; --y-dark-muted: #A3A9BC; --y-dark-line: #2C3040; --y-dark-coral: #F08B76;
    --y-shadow: rgba(0, 0, 0, .45);
  }
}
.y *, .y *::before, .y *::after { box-sizing: border-box; }
.y a { color: var(--y-accent); text-decoration: none; }
.y a:hover { color: var(--y-coral); }
/* `.y a` (0,1,1) passe devant une classe seule : les liens habilles se redeclarent avec le prefixe. */
.y a.y-btn--coral, .y a.y-btn--ink, .y a.y-btn--coral:hover, .y a.y-btn--ink:hover { color: var(--y-on-ink); }
.y a.y-btn--line { color: var(--y-ink); }
.y a.y-btn--line:hover { color: var(--y-coral); }
.y a.y-header__brand, .y a.y-header__brand:hover, .y a.y-rating, .y a.y-team { color: var(--y-ink); }
.y a.y-rating:hover { color: var(--y-coral); }
.y h1, .y h2, .y h3, .y h4, .y p, .y ul { margin: 0; }
.y blockquote { margin: 0; font: inherit; line-height: inherit; }
.y h1, .y h2, .y h3, .y h4 { font-family: var(--y-display); font-weight: 800; letter-spacing: -.02em; line-height: 1.06; text-wrap: balance; color: var(--y-ink); }
.y h1 { font-size: clamp(2.6rem, 6vw, 5.5rem); line-height: .98; }
.y h2 { font-size: clamp(1.9rem, 3.6vw, 3.25rem); }
.y h3 { font-size: 1.5rem; }
.y img { max-width: 100%; height: auto; display: block; }
.y strong, .y b { font-weight: 700; color: var(--y-ink); }
.y .text-span { color: var(--y-coral); }
.y-mono { font-family: var(--y-mono); }
.y-eyebrow { font-family: var(--y-mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--y-accent); }
.y-label { font-family: var(--y-mono); font-size: .69rem; letter-spacing: .12em; text-transform: uppercase; color: var(--y-muted); white-space: nowrap; }
.y-num { font-family: var(--y-display); font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--y-coral); }
.y-muted { color: var(--y-muted); }
.y-text { color: var(--y-text); }
.y-wrap { max-width: 1280px; margin: 0 auto; padding: 0 5%; }
@media (min-width: 1100px) { .y-wrap { padding: 0 80px; } }

/* ---- boutons ---- */
.y-btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 26px; border-radius: 10px; font: 600 1rem var(--y-body); white-space: nowrap; cursor: pointer; border: 0; transition: background .15s, color .15s; }
.y-btn--coral { background: var(--y-coral); color: var(--y-on-ink); }
.y-btn--coral:hover { background: var(--y-coral-hover); color: var(--y-on-ink); }
.y-btn--ink { background: var(--y-ink-surface); color: var(--y-on-ink); }
.y-btn--ink:hover { color: var(--y-on-ink); background: var(--y-ink-surface-hover); }
.y-btn--line { background: transparent; color: var(--y-ink); border: 1.5px solid var(--y-ink); }
.y-btn--line:hover { color: var(--y-coral); border-color: var(--y-coral); }
.y-btn--sm { height: 42px; padding: 0 20px; font-size: .95rem; }
.y-btn--lg { height: 54px; padding: 0 30px; }
.y-btn--off, .y a.y-btn--off { color: var(--y-muted); border-color: var(--y-line); cursor: default; }
.y-btn:focus-visible, .y a:focus-visible, .y summary:focus-visible { outline: 2px solid var(--y-coral); outline-offset: 3px; }

/* ---- etiquettes ---- */
.y-tag { font-family: var(--y-mono); font-size: .69rem; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--y-line); color: var(--y-muted); white-space: nowrap; }
.y-tag--coral { background: var(--y-coral-soft); border-color: transparent; color: var(--y-coral); }
.y-soon { font-family: var(--y-mono); font-size: .63rem; letter-spacing: .08em; text-transform: uppercase; color: var(--y-warn); background: var(--y-warn-soft); border-radius: 4px; padding: 2px 6px; margin-left: 6px; white-space: nowrap; vertical-align: middle; }
.y-card { background: var(--y-surface); border: 1px solid var(--y-line); border-radius: var(--y-radius); }
.y-shot { display: block; max-width: 100%; height: auto; border-radius: var(--y-radius); border: 1px solid var(--y-line); box-shadow: 0 18px 40px var(--y-shadow); }
.y-chip { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--y-line); background: var(--y-surface); font-size: .875rem; font-weight: 500; color: var(--y-ink); white-space: nowrap; }
.y-chip--on { background: var(--y-ink-surface); color: var(--y-on-ink); border-color: var(--y-ink-surface); }
.y-check { display: flex; gap: 9px; align-items: flex-start; font-size: .82rem; line-height: 1.4; color: var(--y-text); }
.y-check svg { flex: none; margin-top: 3px; }

/* ---- en-tete : le menu, puis la barre a trois marqueurs ---- */
.y-header { background: var(--y-surface); }
.y-header__row { height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.y-header__brand { display: flex; align-items: center; gap: 10px; color: var(--y-ink); font: 800 1.125rem var(--y-display); letter-spacing: -.02em; }
.y-header__brand:hover { color: var(--y-ink); }
.y-header__brand img { width: 32px; height: 38px; object-fit: contain; }
.y-header__nav { display: flex; gap: 28px; align-items: center; font-weight: 500; font-size: .95rem; }
.y-header__nav a { color: var(--y-ink); padding-bottom: 2px; border-bottom: 2px solid transparent; }
.y-header__nav a:hover { color: var(--y-coral); }
.y-header__nav a[aria-current="page"] { border-bottom-color: var(--y-coral); }
.y-header__actions { display: flex; align-items: center; gap: 10px; }
.y-menu { position: relative; }
.y-menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--y-ink); }
.y-menu summary::-webkit-details-marker { display: none; }
.y-menu[open] summary { background: var(--y-surface-2); }
.y-menu__drop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 220px; padding: 10px; display: flex; flex-direction: column; gap: 2px; background: var(--y-surface); border: 1px solid var(--y-line); border-radius: var(--y-radius); box-shadow: 0 12px 32px var(--y-shadow); }
/* `border-bottom: 0` : les liens du menu deroulant sont dans `.y-header__nav`, dont le
   soulignement de la page courante n'a pas de sens dans une liste deroulee. */
.y-menu__drop a { display: block; padding: 10px 12px; border-radius: 8px; border-bottom: 0; color: var(--y-ink); font-weight: 500; }
.y-menu__drop a:hover { background: var(--y-surface-2); color: var(--y-ink); }
.y-menu__drop a[aria-current="page"] { color: var(--y-coral); }
.y-menu__drop hr { border: 0; border-top: 1px solid var(--y-line); margin: 6px 0; width: 100%; }
/* Le sous-menu « fonctionnalites » : une entree de navigation qui ouvre la liste des cinq pages. */
.y-submenu summary { font-weight: 500; font-size: .95rem; padding-bottom: 2px; border-bottom: 2px solid transparent; }
.y-submenu summary::after { content: " \25be"; font-size: .7em; margin-left: 4px; }
.y-submenu summary:hover, .y-submenu[open] summary { color: var(--y-coral); }
/* Le fond gris de `.y-menu[open]` habille un bouton icone, pas un mot du menu. */
.y-submenu[open] summary { background: transparent; }
.y-submenu.is-current > summary { border-bottom-color: var(--y-coral); }
/* Ancre a gauche, et assez large pour que « Barre de livraison gratuite » tienne sur une ligne. */
.y-menu__drop--left { right: auto; left: 0; min-width: 264px; }
.y-menu__drop--left a { white-space: nowrap; }
/* Le meme groupe, deplie dans le burger : un titre de section et des liens en retrait. */
.y-menu__title { padding: 10px 12px 2px; font-family: var(--y-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--y-muted); }
.y-menu__group { display: flex; flex-direction: column; gap: 2px; }
.y-menu__group a { padding-left: 24px; }
.y-lang summary { font-family: var(--y-mono); font-size: .75rem; padding: 6px 8px; }
.y-lang summary::after { content: " ▾"; }
.y-burger summary { width: 44px; height: 44px; }
.y-burger { display: none; }
.y-tiers { padding: 6px 0 18px; }
.y-tiers__track { height: 10px; border-radius: 999px; background: var(--y-surface-2); overflow: hidden; }
.y-tiers__fill { height: 100%; background: var(--y-coral); border-radius: 999px; }
.y-tiers__marks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 6px; }
.y-tiers__mark { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.y-tiers__mark::before { content: ""; width: 2px; height: 14px; background: var(--y-ink); margin-left: 4px; }
.y-tiers__mark .y-label { color: var(--y-ink); }
.y-tiers__amount { font-family: var(--y-mono); font-size: .69rem; color: var(--y-coral); }
@media (max-width: 899px) {
  .y-header__row { height: 64px; }
  .y-header__nav, .y-header__lang { display: none; }
  .y-burger { display: block; }
  .y-tiers__track { height: 8px; }
  .y-tiers__mark .y-label, .y-tiers__amount { font-size: .56rem; }
  .y-tiers__mark::before { height: 10px; }
}

/* ---- sections ---- */
.y-section { padding: 56px 0; }
.y-section--line { border-top: 1px solid var(--y-line); }
.y-section--white { background: var(--y-surface); }
.y-two { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; }
.y-two--flip { grid-template-columns: 1.1fr 0.9fr; }
.y-stack { display: flex; flex-direction: column; gap: 16px; }
.y-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.y-between { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.y-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.y-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.y-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.y-lede { font-size: 1.125rem; color: var(--y-text); text-wrap: pretty; }
.y-sec-num { display: flex; gap: 12px; align-items: baseline; font-family: var(--y-mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }
.y-sec-num span:last-child { color: var(--y-coral); letter-spacing: 0; text-transform: none; }
.y-shots { display: flex; justify-content: center; align-items: flex-start; gap: 16px; }
.y-shots .y-shot { width: 250px; }
.y-shots .y-shot + .y-shot { margin-top: 32px; }
.y-cta-line { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; align-self: stretch; }
@media (max-width: 899px) {
  .y-section { padding: 36px 0; }
  .y-two, .y-two--flip { grid-template-columns: 1fr; gap: 24px; }
  .y-two--flip > :first-child { order: 2; }
  .y-grid-2, .y-grid-3, .y-grid-4 { grid-template-columns: 1fr; }
  .y-shots .y-shot { width: 46%; }
  .y-shots .y-shot + .y-shot { margin-top: 20px; }
  .y-cta-line { flex-direction: column; align-items: stretch; }
}

/* ---- hero ---- */
.y-hero { background: var(--y-surface); padding: 48px 0 0; overflow: hidden; }
.y-hero__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 40px; align-items: start; }
.y-hero__copy { display: flex; flex-direction: column; gap: 26px; padding-top: 24px; }
/* L'enveloppe du bloc que le middleware echange (lib/heroAssignment.js) : sans boite, le h1 et le sous-titre restent des enfants du flex. */
.y-hero__live { display: contents; }
.y-hero__sub { font-size: 1.19rem; color: var(--y-text); max-width: 540px; text-wrap: pretty; }
.y-hero__buttons { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.y-hero__visual { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; margin-top: -60px; }
.y-frame { width: 100%; max-width: 422px; background: var(--y-surface); border: 1px solid var(--y-line); border-radius: 14px; box-shadow: 0 18px 40px var(--y-shadow); overflow: hidden; }
.y-frame__bar { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-bottom: 1px solid var(--y-line); background: var(--y-bg); font-family: var(--y-mono); font-size: .63rem; color: var(--y-muted); }
.y-frame__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--y-line); }
.y-frame__bar span { margin-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.y-frame img { width: 100%; height: auto; }
.y-trust { padding: 36px 0 28px; }
.y-trust__row { display: flex; align-items: center; gap: 28px; border-top: 1px solid var(--y-line); border-bottom: 1px solid var(--y-line); padding: 16px 0; flex-wrap: wrap; }
.y-trust__sep { width: 1px; height: 22px; background: var(--y-line); }
.y-rating { display: inline-flex; gap: 8px; align-items: center; font-family: var(--y-mono); font-size: .75rem; color: var(--y-ink); }
.y-rating strong { font-weight: 700; }
.y-clients { display: inline-flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; font-family: var(--y-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; }
.y a.y-clients__link, .y-clients a { color: var(--y-ink); }
.y-clients a:hover { color: var(--y-coral); }
.y-rate { margin-left: auto; display: flex; align-items: center; gap: 16px; padding: 10px 16px; border: 1.5px solid var(--y-accent); border-radius: 10px; background: var(--y-accent-soft); }
.y-rate__figure { font: 800 2.5rem var(--y-display); line-height: 1; letter-spacing: -.03em; color: var(--y-accent); white-space: nowrap; }
.y-rate__title { font: 700 1rem var(--y-display); color: var(--y-ink); }
.y-rate__note { font-size: .69rem; color: var(--y-muted); }
@media (max-width: 899px) {
  .y-hero { padding-top: 28px; }
  .y-hero__grid { grid-template-columns: 1fr; gap: 24px; }
  .y-hero__copy { padding-top: 0; gap: 18px; }
  .y-hero__visual { margin-top: 0; align-items: stretch; }
  .y-hero__buttons { flex-direction: column; align-items: stretch; }
  .y-hero__buttons .y-btn { width: 100%; }
  .y-trust__row { gap: 14px; }
  .y-trust__sep { display: none; }
  .y-rate { margin-left: 0; width: 100%; }
}

/* ---- modules ---- */
.y-module { display: flex; flex-direction: column; gap: 12px; padding-top: 22px; border-top: 2px solid var(--y-ink); }
.y-module__head { display: flex; justify-content: space-between; align-items: center; font-family: var(--y-mono); font-size: .69rem; letter-spacing: .12em; text-transform: uppercase; }
.y-module h3 { font-size: 1.5rem; }
.y-module p { font-size: .875rem; color: var(--y-text); }
.y-module__plan { font-family: var(--y-mono); font-size: .69rem; color: var(--y-coral); margin-top: auto; }

/* ---- avis ---- */
.y-review { padding: 24px 26px; display: flex; flex-direction: column; gap: 14px; }
.y-review__stars { display: flex; gap: 2px; }
.y-review__quote { font: 500 1.19rem var(--y-display); line-height: 1.3; letter-spacing: -.01em; }
.y-review__meta { font-family: var(--y-mono); font-size: .69rem; color: var(--y-muted); margin-top: auto; }

/* ---- equipe ---- */
.y-team { display: flex; align-items: center; gap: 24px; padding: 24px 28px; flex-wrap: wrap; }
.y-team__faces { display: flex; }
.y-team__faces img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 3px solid var(--y-surface); margin-left: -12px; background: var(--y-surface-2); }
.y-team__faces img:first-child { margin-left: 0; }
.y-team__names { font-size: .875rem; color: var(--y-text); }

/* ---- tarifs ---- */
.y-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.y-plans--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
.y-plan { display: flex; flex-direction: column; gap: 8px; padding: 24px 0; border-top: 2px solid var(--y-ink); }
.y-plan__quota { display: block; height: 64px; font-size: 4rem; }
.y-plan__quota--inf { font-size: 6.5rem; line-height: .62; }
.y-plan__price { font: 700 1.5rem var(--y-display); padding-top: 8px; }
.y-plan__price small { font: 400 .8rem var(--y-body); color: var(--y-muted); }
.y-plan__note { font-family: var(--y-mono); font-size: .69rem; color: var(--y-muted); }
.y-plan__items { display: flex; flex-direction: column; gap: 7px; padding-top: 6px; }
.y-plan__foot { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; margin-top: auto; align-items: flex-start; }
.y-plan__trial { font-family: var(--y-mono); font-size: .69rem; color: var(--y-muted); }
.y-plan__trial--free { color: var(--y-ok); }
.y-plan-meta { font-family: var(--y-mono); font-size: .75rem; color: var(--y-muted); max-width: 300px; }
.y-plans-foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 14px 0; border-top: 1px solid var(--y-line); font-size: .875rem; color: var(--y-text); flex-wrap: wrap; }
.y-steps { display: grid; grid-template-columns: 1fr 16px 1fr 16px 1fr 16px 1fr; gap: 12px; align-items: stretch; }
.y-step { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; }
.y-step__text { font: 700 1.125rem var(--y-display); letter-spacing: -.01em; }
.y-steps__arrow { display: flex; align-items: center; color: var(--y-coral); }
.y-dark { background: var(--y-ink-surface); color: var(--y-dark-ink); border-radius: 16px; padding: 40px 48px; display: flex; flex-direction: column; gap: 28px; }
.y-dark h2, .y-dark h3 { color: var(--y-dark-ink); }
.y-dark p { color: var(--y-dark-muted); }
.y-dark .y-label { color: var(--y-dark-coral); }
.y-dark .y-num { color: var(--y-dark-coral); }
@media (max-width: 899px) {
  .y-plans, .y-plans--2 { grid-template-columns: 1fr; gap: 12px; }
  .y-plan__foot { align-items: stretch; }
  .y-plan__quota { height: 56px; font-size: 3.5rem; }
  .y-plan__quota--inf { font-size: 5.7rem; }
  .y-steps { grid-template-columns: 1fr; }
  .y-steps__arrow { display: none; }
  .y-dark { padding: 28px 22px; }
}

/* ---- FAQ ---- */
.y-faq { border-bottom: 1px solid var(--y-line); }
.y-faq details { border-top: 1px solid var(--y-line); }
.y-faq summary { display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: 24px; align-items: center; padding: 20px 0; cursor: pointer; list-style: none; font: 700 1.19rem var(--y-display); letter-spacing: -.01em; }
.y-faq summary::-webkit-details-marker { display: none; }
.y-faq summary svg { transition: transform .2s; }
.y-faq details[open] summary svg { transform: rotate(180deg); }
.y-faq p { font-size: .95rem; color: var(--y-text); padding: 0 0 20px; max-width: 760px; }

/* ---- bandeau ---- */
.y-banner { padding: 0 0 72px; }
.y-banner__box { background: var(--y-ink-surface); color: var(--y-dark-ink); border-radius: 16px; padding: 44px 48px; display: flex; justify-content: space-between; align-items: center; gap: 40px; flex-wrap: wrap; }
.y-banner__box h2 { color: var(--y-dark-ink); font-size: 2.5rem; }
.y-banner__box p { font-size: 1.06rem; color: var(--y-dark-muted); max-width: 640px; }
.y-banner__cta { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.y-banner__note { font-family: var(--y-mono); font-size: .69rem; color: var(--y-dark-muted); }
@media (max-width: 899px) { .y-banner { padding-bottom: 40px; } .y-banner__box { padding: 30px 24px; } .y-banner__cta { align-items: stretch; width: 100%; } }

/* ---- pied de page ---- */
.y-footer { background: var(--y-ink-surface); color: var(--y-dark-muted); }
.y-footer__features { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; padding: 28px 0 0; font-family: var(--y-mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.y-footer__features .y-label { color: var(--y-dark-muted); opacity: .7; }
.y-footer__features a { color: var(--y-dark-muted); }
.y-footer__features a:hover, .y-footer__features a[aria-current] { color: var(--y-dark-coral); }
.y-footer__row { padding: 28px 0 36px; display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; font-family: var(--y-mono); font-size: .75rem; }
.y-footer__links { display: flex; gap: 22px; letter-spacing: .08em; text-transform: uppercase; flex-wrap: wrap; align-items: center; }
.y-footer__links a { color: var(--y-dark-muted); }
.y-footer__links a:hover { color: var(--y-dark-coral); }
.y-footer__social { display: flex; gap: 12px; }
.y-footer__social a { color: var(--y-dark-muted); display: inline-flex; }
.y-footer__social svg { width: 18px; height: 18px; }

/* ---- 404 ---- */
.y-404 { padding: 96px 0 120px; display: flex; flex-direction: column; gap: 18px; align-items: center; text-align: center; }
.y-404 .y-num { font-size: 7.5rem; color: var(--y-accent-2); }
.y-404 p { font-size: 1.125rem; color: var(--y-text); max-width: 520px; }
.y-404 .y-row { justify-content: center; padding-top: 8px; }

/* ---- preuve d'usage (composant Proof) dans le systeme ---- */
.y .proof { margin-top: 0; }
.y .proof__statement { font-size: 1.06rem; }
.y .proof__statement strong { font-family: var(--y-display); font-size: 1.8em; letter-spacing: -.02em; }

/* ---- etoiles (Icons.tsx dessine a 100% de large, en orange Webflow) : taille et corail du systeme ---- */
.y-rating svg, .y-review__stars svg { width: 16px; height: 16px; flex: none; }
.y-rating svg path, .y-review__stars svg path { fill: var(--y-coral); }

/* ---- pages editoriales : blog, article, confidentialite, methode ---- */
.y-page-head { background: var(--y-surface); padding: 44px 0 40px; }
.y-page-head h1 { font-size: clamp(2.2rem, 4.5vw, 4rem); max-width: 900px; }
.y-page-head .y-lede { font-size: 1.19rem; max-width: 760px; }
.y-crumb { font-family: var(--y-mono); font-size: .75rem; color: var(--y-muted); }
.y-meta { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; font-family: var(--y-mono); font-size: .75rem; color: var(--y-muted); }
.y-cover { width: 100%; max-height: 360px; object-fit: cover; border-radius: var(--y-radius); border: 1px solid var(--y-line); }
.y-narrow { max-width: 1080px; }
.y-two-col { display: grid; grid-template-columns: 240px minmax(0, 720px); gap: 64px; align-items: start; }
.y-toc { position: sticky; top: 24px; display: flex; flex-direction: column; }
.y-toc .y-label { padding-bottom: 10px; }
.y-toc a { display: block; padding: 7px 0 7px 14px; border-left: 2px solid var(--y-line); color: var(--y-muted); font-size: .875rem; }
.y-toc a:hover { border-left-color: var(--y-coral); color: var(--y-ink); }
.y-prose { display: flex; flex-direction: column; gap: 18px; }
.y-prose p, .y-prose li { font-size: 1.06rem; line-height: 1.65; color: var(--y-text); text-wrap: pretty; }
.y-prose p:empty { display: none; }
.y-prose h2 { font-size: 1.9rem; padding-top: 12px; scroll-margin-top: 24px; }
.y-prose h3 { font-size: 1.4rem; padding-top: 6px; }
.y-prose h4 { font-size: 1.125rem; }
.y-prose ul, .y-prose ol { padding-left: 1.2rem; display: flex; flex-direction: column; gap: 8px; }
.y-prose img { border-radius: var(--y-radius); border: 1px solid var(--y-line); }
.y-prose figure { margin: 0; }
.y-prose figcaption { font-family: var(--y-mono); font-size: .75rem; color: var(--y-muted); padding-top: 8px; }
.y-prose a { text-decoration: underline; text-underline-offset: 3px; }
.y-prose blockquote { border-left: 3px solid var(--y-coral); padding-left: 18px; color: var(--y-muted); }
.y-prose table { border-collapse: collapse; width: 100%; font-size: .875rem; }
.y-prose th, .y-prose td { text-align: left; padding: 12px 14px; border-top: 1px solid var(--y-line); vertical-align: top; }
.y-prose thead th { border-top: 0; background: var(--y-surface-2); }
.y-table { border: 1px solid var(--y-line); border-radius: var(--y-radius); overflow: hidden; overflow-x: auto; max-width: 100%; background: var(--y-surface); }
.y-article-cta { background: var(--y-coral-soft); border-radius: 14px; padding: 24px 28px; display: flex; justify-content: space-between; align-items: center; gap: 24px; margin: 8px 0; }
.y-article-cta__title { font: 700 1.25rem var(--y-display); letter-spacing: -.01em; color: var(--y-ink); }
.y-article-cta__text { font-size: .875rem; color: var(--y-text); }
.y-article-cta .y-btn { flex: none; }
.y-post { display: flex; flex-direction: column; gap: 12px; color: var(--y-ink); }
.y-post:hover { color: var(--y-ink); }
.y-post img, .y-featured img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--y-radius); border: 1px solid var(--y-line); }
.y-post h3 { font-size: 1.5rem; }
.y-post p { font-size: .875rem; color: var(--y-text); }
.y-post .y-tag { align-self: flex-start; }
.y-featured { display: grid; grid-template-columns: 1.1fr 0.9fr; overflow: hidden; color: var(--y-ink); }
.y-featured:hover { color: var(--y-ink); }
.y-featured__body { padding: 36px 40px; display: flex; flex-direction: column; gap: 14px; }
.y-featured__body h2 { font-size: 2.5rem; }
.y-featured__body p { font-size: 1.06rem; color: var(--y-text); }
.y-featured img { height: 100%; border: 0; border-radius: 0; aspect-ratio: auto; }
.y-featured__read { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--y-accent); margin-top: auto; }
.y-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.y-filters button { font: 500 .875rem var(--y-body); cursor: pointer; }
.y-figure { padding: 32px 36px; display: grid; grid-template-columns: auto 1fr; gap: 36px; align-items: center; border-left: 4px solid var(--y-coral); border-radius: 4px 12px 12px 4px; }
.y-figure .y-num { font-size: clamp(3.5rem, 8vw, 6rem); }
.y-figure__bar { height: 12px; border-radius: 999px; background: var(--y-surface-2); overflow: hidden; }
.y-figure__bar div { height: 100%; background: var(--y-coral); }
.y-figure__legend { display: flex; justify-content: space-between; font-family: var(--y-mono); font-size: .69rem; color: var(--y-muted); }
.y-figure__legend span:first-child { color: var(--y-coral); }
.y-figure--pending { border-left-color: var(--y-accent); grid-template-columns: 1fr; }
.y-method-row { display: grid; grid-template-columns: 80px 320px 1fr; gap: 32px; padding: 28px 0; border-top: 1px solid var(--y-line); }
.y-method-row h2 { font-size: 1.75rem; }
.y-method-row p { font-size: 1rem; color: var(--y-text); line-height: 1.6; }
.y-method-row .y-num { font-size: 2.5rem; }
.y-steps3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.y-step3 { display: flex; flex-direction: column; gap: 12px; padding-top: 22px; border-top: 2px solid var(--y-ink); }
.y-step3 .y-num { font-size: 2.5rem; }
.y-step3 p { font-size: .875rem; color: var(--y-text); }
.y-placeholder { margin-top: 8px; min-height: 180px; border: 1px dashed var(--y-accent); border-radius: var(--y-radius); background: var(--y-accent-soft); display: flex; align-items: center; justify-content: center; font-family: var(--y-mono); font-size: .69rem; color: var(--y-accent); text-align: center; padding: 16px; }
.y-hero-frame { width: 100%; max-width: 422px; height: 640px; border: 0; display: block; background: var(--y-surface); }
/* Le checkout de la demo, en pleine largeur : au-dela de 820px il se met sur deux colonnes, comme un vrai checkout. */
.y-frame--wide { max-width: none; }
.y-checkout-frame { width: 100%; height: 700px; border: 0; display: block; background: var(--y-surface); }
@media (max-width: 899px) {
  .y-two-col { grid-template-columns: 1fr; gap: 24px; }
  .y-toc { position: static; }
  .y-featured { grid-template-columns: 1fr; }
  .y-featured__body { padding: 24px; }
  .y-featured__body h2 { font-size: 1.9rem; }
  .y-article-cta { flex-direction: column; align-items: stretch; }
  .y-method-row { grid-template-columns: 1fr; gap: 8px; }
  .y-figure { grid-template-columns: 1fr; padding: 24px; }
  .y-steps3 { grid-template-columns: 1fr; }
  .y-page-head { padding: 28px 0; }
  .y-hero-frame { height: 480px; max-width: none; }
  .y-checkout-frame { height: 620px; }
}

/* ---- la demo en mode incorpore (`?embed=1`, l'iframe du hero) : le tiroir seul ---- */
html[data-embed] .y-header, html[data-embed] .y-footer, html[data-embed] .y-banner, html[data-embed] .y-page-head, html[data-embed] .yd-controls, html[data-embed] .yd-store { display: none !important; }
html[data-embed] body { margin: 0; background: var(--y-surface); }
html[data-embed] .y-wrap { padding: 0; max-width: none; }
html[data-embed] .yd { margin: 0; }
html[data-embed] .yd-drawer { border: 0; border-radius: 0; box-shadow: none; max-width: none; margin: 0; }
html[data-embed] .yd-frame { height: 100vh; }

/* ---- variantes de grilles a deux colonnes (jamais en style inline : le mobile doit pouvoir les empiler) ---- */
.y-two--side { grid-template-columns: 0.8fr 1.2fr; align-items: start; }
.y-two--hero { grid-template-columns: 1.1fr 0.9fr; gap: 48px; }
.y-two--next { grid-template-columns: 1fr 0.9fr; }
.y-two-col--wide { grid-template-columns: 260px minmax(0, 720px); }
.y-two-col--single { grid-template-columns: minmax(0, 720px); }
.y-table { overflow-x: auto; }
.y-table table { min-width: 560px; }
.y-team .y-label, .y-tiers__mark .y-label { white-space: normal; }
/* Une legende sous un visuel peut etre longue : elle passe a la ligne au lieu de deborder. */
.y-label--wrap { white-space: normal; }
@media (max-width: 899px) {
  .y-two--side, .y-two--hero, .y-two--next, .y-two-col--wide, .y-two-col--single { grid-template-columns: 1fr; }
  .y-two--hero > :last-child { justify-content: center !important; }
  .y-two--hero .y-shot { width: 100% !important; max-width: 360px; }
  .y-tiers__marks { gap: 8px; }
  .y-tiers__mark .y-label { line-height: 1.3; }
  .y-steps3 .y-shot { width: 100% !important; max-width: 300px; }
  .y-grid-2 .y-shot { width: 100% !important; max-width: 360px; }
  .y-two--next .y-shot { width: 100% !important; max-width: 360px; }
  .y-page-head h1 { font-size: 2rem; }
  .y-meta { gap: 10px; }
}

/* ---- une table ou une URL longue ne doit jamais elargir la page ---- */
.y-prose { min-width: 0; }
.y-prose p, .y-prose li { overflow-wrap: anywhere; }
.y-table { max-width: 100%; }

/* ---- en-tete mobile : le nom sur une ligne, le seul oiseau sous 420 px ---- */
@media (max-width: 899px) { .y-header__brand { font-size: .95rem; } .y-header__brand span { white-space: nowrap; } }
@media (max-width: 420px) { .y-header__brand span { display: none; } }

/* Pages guides (lib/guides.ts) : sommaire, etapes, listes, calculateur, themes. */
.y-guide-toc { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 28px; font-family: var(--y-mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }
.y-guide-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; color: var(--y-text); }
.y-guide-steps li::marker { font-family: var(--y-mono); color: var(--y-coral); font-weight: 600; }
.y-guide-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--y-text); }
.y-themes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.y-themes li { font-family: var(--y-mono); font-size: .75rem; letter-spacing: .06em; padding: 6px 12px; border: 1px solid var(--y-line); border-radius: 999px; color: var(--y-ink); background: var(--y-surface); }
.y-calc { display: grid; grid-template-columns: minmax(280px, 420px) minmax(0, 1fr); gap: 32px; align-items: start; }
.y-calc__form { padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.y-calc__form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; color: var(--y-ink); }
.y-calc__form input { font: 500 1.25rem var(--y-mono); padding: 10px 12px; border: 1px solid var(--y-line); border-radius: 8px; background: var(--y-bg); color: var(--y-ink); width: 100%; }
.y-calc__form input:focus-visible { outline: 2px solid var(--y-coral); outline-offset: 2px; }
.y-calc__form small { font-weight: 400; font-size: .82rem; color: var(--y-muted); }
.y-calc .y-figure .y-num { font-size: clamp(2.4rem, 5vw, 3.6rem); }
.y-calc__tiers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.y-calc__tiers li { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--y-line); border-radius: var(--y-radius); background: var(--y-surface); }
.y-calc__tiers span { font-family: var(--y-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--y-muted); }
.y-calc__tiers strong { font: 800 1.5rem var(--y-display); letter-spacing: -.02em; color: var(--y-coral); }
@media (max-width: 899px) {
  .y-calc { grid-template-columns: 1fr; }
  .y-calc__tiers { grid-template-columns: 1fr; }
  .y-calc .y-figure { grid-template-columns: 1fr; }
}

/* Allemand : les mots composes (« Versandkostenfrei-Schwelle ») debordent a 390 px sans cesure. */
html[lang="de"] .y h1, html[lang="de"] .y h2, html[lang="de"] .y h3 { hyphens: auto; overflow-wrap: break-word; }
.y-two-col > * { min-width: 0; }