/* Public landing frame (25/10/2026): pill navigation, rounded photo or video hero and the illustrative carnet tray.
   Breakpoints follow the source design: 640 and 1024 px. Colours are the .public-redesign tokens; the only literals
   are the design's own hero placeholder, tray cream and unlit gauge tick.
   --landing-nav-h is the room the navigation takes above the hero copy: the pill-nav-wrap top padding plus the
   62 px pill. Change them together. */
.public-redesign{--landing-hero:#d9d9d9;--landing-tray:#f5f2ee;--landing-tick:#d4d4d8;--landing-serif:'Instrument Serif',Georgia,'Times New Roman',serif;--landing-nav-h:78px}

/* Frame and hero */
.landing-frame{padding:12px;background:var(--soft)}
.landing-frame.is-plain{padding-bottom:0;background:transparent}
/* On hero pages the navigation stays the page banner, outside main, laid over the top of the hero */
.landing-frame.is-overlay{position:absolute;top:0;right:0;left:0;z-index:30;background:transparent;pointer-events:none}
.landing-frame.is-overlay .pill-nav{pointer-events:auto}
.landing-frame+section{margin-top:42px}
.public-redesign .landing-frame+.compact-top{padding-top:0}
.landing-hero{position:relative;overflow:hidden;isolation:isolate;min-height:clamp(540px,78vh,760px);border-radius:16px;background:var(--landing-hero)}
/* svh: the height left when a phone shows its address bar, so the tray is cut by the frame on the first screen */
.landing-hero.has-tray{height:calc(100vh - 24px);height:calc(100svh - 24px);min-height:660px}
.landing-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.landing-veil{position:absolute;inset:0;background:radial-gradient(ellipse 60% 46% at 50% 30%,rgba(255,255,255,.78) 0%,rgba(255,255,255,.6) 50%,rgba(255,255,255,0) 100%),linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.8) 42%,rgba(255,255,255,.38) 72%,rgba(255,255,255,.12) 100%)}
.landing-content{position:relative;z-index:1}

/* Pill navigation */
.pill-nav-wrap{display:flex;justify-content:center;padding:16px 12px 0}
.pill-nav{position:relative;display:flex;align-items:center;gap:12px;width:100%;max-width:860px;height:62px;padding:8px;background:#fff;border:1px solid var(--border);border-radius:999px;box-shadow:0 1px 2px rgba(17,17,20,.06)}
.pill-brand{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;min-height:44px;padding-left:4px;color:var(--ink);font-size:17px;font-weight:650;letter-spacing:-.03em;text-decoration:none}
.pill-brand img{width:28px;height:28px}
.pill-brand .brand-dot{margin-left:0}
.pill-links{display:none;align-items:center;gap:24px;font-size:14px}
.pill-links a{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--ink);text-decoration:none;white-space:nowrap}
.pill-links a:hover{color:var(--brand)}
.pill-links a[aria-current]::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--ink)}
.pill-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.pill-login{display:none;align-items:center;min-height:44px;padding:0 10px;color:var(--ink);font-size:14px;text-decoration:none;white-space:nowrap}
.pill-login:hover{color:var(--brand)}
.pill-cta{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 6px 6px 16px;border-radius:999px;background:var(--brand);color:#fff;font-size:14px;font-weight:550;line-height:1.2;text-decoration:none;white-space:nowrap}
.pill-cta:hover{background:var(--brand-hover)}
.pill-cta-icon{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.2)}
.pill-cta-long{display:none}
.pill-nav .pill-menu{display:inline-grid;place-items:center;width:44px;min-width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer}
/* The button shows what it does: three lines to open, a cross to close (public.js keeps aria-expanded) */
.pill-menu .icon-close,.pill-menu[aria-expanded="true"] .icon-menu{display:none}
.pill-menu[aria-expanded="true"] .icon-close{display:block}
.pill-menu-panel{position:absolute;top:100%;left:8px;right:8px;z-index:20;margin-top:8px;padding:12px;background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 12px 32px rgba(17,17,20,.12)}
.pill-menu-panel:not([hidden]){display:grid;gap:2px}
.pill-menu-panel a{display:flex;align-items:center;min-height:44px;padding:10px 12px;border-radius:10px;color:var(--ink);font-size:15px;text-decoration:none}
.pill-menu-panel a:hover,.pill-menu-panel a[aria-current]{background:var(--soft)}
/* The pill already shows this link beside the menu button, except on the narrowest screens */
.pill-menu-panel .pill-menu-cta{display:none}

/* Hero copy. .public-redesign p outranks a lone class, so the paragraphs are scoped like the title. */
.landing-intro{display:flex;flex-direction:column;align-items:center;padding:calc(var(--landing-nav-h) + 40px) 16px 32px;text-align:center}
.public-redesign .landing-badge{display:inline-flex;align-items:center;gap:8px;margin:0;padding:6px 16px;border-radius:999px;background:#fff;box-shadow:0 1px 2px rgba(17,17,20,.08);color:var(--ink);font-size:13px;line-height:1.4}
.landing-dot{flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--brand)}
/* Said once after a redirect, e.g. « Votre compte a été supprimé. » */
.public-redesign .landing-notice{margin:0 0 16px;padding:10px 18px;border:1px solid var(--border);border-radius:14px;background:#fff;color:var(--ink);font-size:14px;line-height:1.4}
.public-redesign .landing-title{max-width:56rem;margin:20px 0 0;font-size:clamp(36px,8vw,72px);font-weight:500;line-height:1.05;letter-spacing:-.02em}
.public-redesign .landing-accent{color:inherit;font-family:var(--landing-serif);font-style:italic;font-weight:400;letter-spacing:0}
.public-redesign .landing-lead{max-width:38rem;margin:16px 0 0;padding:0 8px;color:var(--ink);font-size:clamp(15px,4vw,18px);line-height:1.55;text-shadow:0 0 12px rgba(255,255,255,.9)}
.landing-cta{display:inline-flex;align-items:center;gap:12px;min-height:44px;margin-top:24px;padding:8px 8px 8px 24px;border-radius:999px;background:var(--ink);color:#fff;font-size:14px;font-weight:550;line-height:1.2;text-decoration:none}
.landing-cta:hover{background:var(--brand-hover)}
.landing-cta-icon{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.15)}
/* The note sits low over the photo, where the veil thins out, so it carries its own light backing */
.public-redesign .landing-note{margin:12px 0 0;padding:4px 12px;border-radius:14px;background:rgba(255,255,255,.88);color:var(--ink);font-size:12px;line-height:1.5}

/* Video control: the loop can always be paused, and never moves when motion is reduced. It opens the hero copy,
   so the keyboard reaches it first; under 640 px it takes its own row, right under the menu button. */
.landing-video-toggle{display:inline-grid;place-items:center;align-self:flex-end;width:44px;height:44px;margin:-30px 5px 6px 0;padding:0;border:1px solid var(--border);border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);cursor:pointer}
.landing-video-toggle .icon-play,.landing-video-toggle.is-paused .icon-pause{display:none}
.landing-video-toggle.is-paused .icon-play{display:block}

/* Illustrative carnet tray, clipped by the hero */
.landing-tray{width:calc(100% - 24px);max-width:880px;margin:0 auto;padding:16px;border-radius:24px;background:var(--landing-tray);text-align:left}
.tray-caption{display:inline-block;margin:0 0 12px;padding:4px 12px;border-radius:999px;background:#fff;color:var(--muted);font-size:12px;line-height:1.4}
.tray-grid{display:grid;grid-template-columns:1fr;gap:12px}
.tray-card{display:flex;flex-direction:column;gap:4px;padding:20px;border-radius:16px;background:#fff;line-height:1.4}
.tray-head{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:13px}
.tray-title{color:var(--brand);font-weight:550}
.tray-figure{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px}
.tray-figure strong{color:var(--ink);font-size:28px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.tray-trend{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;background:var(--soft);color:var(--ink);font-size:12px}
.tray-hint{color:var(--muted);font-size:12px}
.tray-target{margin-top:8px;color:var(--ink);font-size:12px;text-align:center}
.tray-switch{display:flex;gap:4px;margin-top:10px;padding:4px;border-radius:999px;background:var(--soft);font-size:12px}
.tray-switch span{flex:1;padding:6px 10px;border-radius:999px;color:var(--muted);text-align:center}
.tray-switch .is-active{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(17,17,20,.12)}
.tray-form{gap:12px}
.tray-field{display:flex;flex-direction:column;gap:6px}
.tray-label{color:var(--ink);font-size:12px}
.tray-select,.tray-input{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--border);border-radius:8px;color:var(--ink);font-size:13px}
.tray-select{justify-content:space-between}
.tray-input span{color:var(--muted)}
.tray-actions{display:flex;align-items:center;gap:14px;margin-top:2px;font-size:13px}
.tray-save{padding:8px 20px;border-radius:8px;background:var(--brand);color:#fff;font-weight:550}
.tray-cancel{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.tray-close{display:inline-grid;margin-left:auto;color:var(--muted)}

/* Gauge: 40 ticks over a half circle */
.gauge{display:block;width:100%;max-width:260px;margin:4px auto 0}
.gauge svg{display:block;width:100%;height:auto;overflow:visible}
.gauge-tick{stroke:var(--landing-tick);stroke-width:2.5;stroke-linecap:round}
.gauge .gauge-tick.is-on{stroke:var(--brand)}
.gauge.is-muted .gauge-tick.is-on{stroke:var(--muted)}
.gauge text{fill:var(--ink);font-family:inherit;font-size:22px;font-weight:600}
.gauge-scale{display:flex;justify-content:space-between;margin-top:-4px;color:var(--muted);font-size:12px}

/* The narrowest screens keep the logo and the menu, as the former header did; sign-up moves into the menu */
@media(max-width:374px){
  .pill-actions .pill-cta{display:none}
  .pill-menu-panel .pill-menu-cta{display:flex}
}
@media(min-width:640px){
  .public-redesign{--landing-nav-h:86px}
  .landing-frame{padding:16px}
  .landing-frame+section{margin-top:64px}
  .landing-hero{border-radius:24px}
  .landing-hero.has-tray{height:calc(100vh - 32px);height:calc(100svh - 32px)}
  .pill-nav-wrap{padding:24px 16px 0}
  .pill-nav{gap:16px}
  .pill-brand img{width:32px;height:32px}
  .pill-cta-long{display:inline}
  .pill-cta-short{display:none}
  .landing-intro{padding:calc(var(--landing-nav-h) + 64px) 16px 48px}
  .public-redesign .landing-title{margin-top:24px}
  .public-redesign .landing-lead{margin-top:24px}
  .landing-cta{margin-top:32px;padding:10px 10px 10px 28px}
  .landing-cta-icon{width:28px;height:28px}
  .landing-video-toggle{position:absolute;top:calc(var(--landing-nav-h) + 14px);right:24px;z-index:2;margin:0}
  .landing-tray{width:calc(100% - 32px);padding:24px}
  .tray-grid{grid-template-columns:repeat(2,1fr);gap:16px}
}
/* The French labels need the full pill: the links show from 1024 px, the menu button serves below.
   Six links (Guide and Blog since 26/10) need a wider pill and tighter links. */
@media(min-width:1024px){
  .pill-nav{max-width:940px;padding-left:12px}
  .pill-links{gap:20px}
  /* Each short label (« FAQ » is 26 px wide) is hit over 44 px: 10 px more on each side, taken from the 20 px gap */
  .pill-links a{padding-inline:10px;margin-inline:-10px}
  .pill-links,.pill-login{display:inline-flex}
  .pill-nav .pill-menu,.pill-menu-panel:not([hidden]){display:none}
  .tray-grid{grid-template-columns:repeat(3,1fr)}
}
/* Short screens (29/10/2026): from 820 px of height down, the hero copy tightens and its title follows the height, so the
   tray still shows its first row, cut by the frame as intended (about 90 px of it showed at 1280 × 720). Below 500 px of
   height, a phone held sideways, the hero takes the height of its content: the call to action stays on the first screen. */
@media(max-height:820px){
  .landing-intro{padding-top:calc(var(--landing-nav-h) + 24px);padding-bottom:24px}
  .public-redesign .landing-title{font-size:clamp(36px,min(8vw,9vh),72px)}
  .public-redesign .landing-lead{margin-top:16px}
  .landing-cta{margin-top:24px}
}
@media(min-width:640px) and (max-height:820px){
  .landing-intro{padding-top:calc(var(--landing-nav-h) + 32px);padding-bottom:32px}
  .public-redesign .landing-title{margin-top:16px}
}
@media(max-height:500px){
  .landing-hero,.landing-hero.has-tray{height:auto;min-height:0}
  .landing-intro{padding-top:calc(var(--landing-nav-h) + 12px)}
  .public-redesign .landing-title{margin-top:12px}
  .public-redesign .landing-lead{margin-top:12px}
  .landing-cta{margin-top:16px}
}
/* The clip plays from 640 px wide (its source asks for it): below, the photo stays and the pause button has nothing to do */
@media(max-width:639px),(max-height:499px){
  .landing-video,.landing-video-toggle{display:none}
}
@media(prefers-reduced-motion:reduce){
  .landing-video,.landing-video-toggle{display:none}
}