/* Manrope — auto-hébergée (variable, latin + latin-ext). Aucun appel externe.
   Déclarée directement ici (pas d'@import) pour démarrer le téléchargement
   des woff2 dès le parse du CSS principal (meilleur LCP). */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/manrope-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/manrope-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Kalam — manuscrite, auto-hébergée (post-it de la démo). Aucun appel externe. */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/kalam-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/kalam-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   La Touche Carré — design system (Direction « Bleu profond »)
   ============================================================ */
:root {
  --bg:        #F7F3EB;
  --bg-alt:    #FBF8F1;
  --ink:       #15263B;
  --ink-soft:  #4A5360;
  --ink-mute:  #5A6472;
  --blue:      #2451B8;
  --blue-700:  #103895;
  --blue-900:  #07256D;
  --blue-tint: #D9E5FD;
  --green:     #2E8B6B;
  --green-300: #5dd6a3;
  --dark:      #15263B;
  --dark-2:    #11202F;
  --line:      #E7E0D2;
  --line-2:    #ECE4D4;
  --line-3:    #E2DAC9;
  --line-4:    #D9D0BF;
  --white:     #ffffff;
  --maxw:      1200px;
  --grad-key:  linear-gradient(158deg, #507CD9, #2451B8 52%, #0B2256);
  --grad-deep: linear-gradient(165deg, #113487 0%, #07256D 45%, #06173F 100%);
  --shadow-card: 0 4px 14px rgba(20, 50, 90, .05);
  --shadow-btn:  0 10px 24px -8px rgba(36, 81, 184, .5);
  --radius:    16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Manrope, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  line-height: 1.5;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--blue); }
::selection { background: #cfe0f2; color: var(--ink); }

h1, h2, h3, h4 { letter-spacing: -.02em; line-height: 1.1; margin: 0; }
p { margin: 0; }

.container { max-width: var(--maxw); margin: 0 auto; padding-left: 32px; padding-right: 32px; }
@media (max-width: 540px) { .container { padding-left: 18px; padding-right: 18px; } }
.section { padding: clamp(48px, 7vw, 88px) 0; }
.section--tight { padding: clamp(36px, 5vw, 60px) 0; }
/* Directement sous les pavés Windows/Android : moins d'espace qu'entre deux sections
   ordinaires, pour que l'avertissement se lise comme la suite immediate du choix de
   plateforme, pas comme un bloc a part. */
.section--ss { padding-top: 8px; }
.text-center { text-align: center; }
.muted { color: var(--ink-soft); }
.measure { max-width: 600px; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ---------- Eyebrow / kicker ---------- */
.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--blue); margin-bottom: 18px;
}
.kicker .dot { width: 7px; height: 7px; border-radius: 2px; background: var(--blue); }
.kicker--green { color: var(--green); }
.kicker--green .dot { border-radius: 50%; background: var(--green-300); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 16px; padding: 15px 26px;
  border-radius: 13px; text-decoration: none; cursor: pointer;
  border: 1.5px solid transparent; transition: all .16s ease; white-space: nowrap;
}
.btn-primary { background: var(--blue); color: #fff; box-shadow: var(--shadow-btn); }
.btn-primary:hover { background: var(--blue-700); }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line-4); }
.btn-ghost:hover { border-color: var(--blue); color: var(--blue); }
.btn-light { background: #fff; color: var(--ink); box-shadow: 0 14px 30px -8px rgba(0,0,0,.4); }
.btn-light:hover { background: #eef3f9; }
.btn-outline-light { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.28); }
.btn-outline-light:hover { background: rgba(255,255,255,.16); }
.btn-lg { font-size: 17px; padding: 17px 30px; }

/* ---------- Pills / tags ---------- */
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 1px solid var(--line-3); border-radius: 999px;
  background: rgba(255,255,255,.55); font-weight: 600; font-size: 13px; color: #3C4654;
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }

/* ---------- Logo key « 2 » ---------- */
.keycap {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--grad-key); color: #fff; font-weight: 800;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.3), inset 0 -4px 8px rgba(0,0,0,.15), 0 3px 8px rgba(20,50,90,.3);
}
.keycap--logo { width: 34px; height: 34px; border-radius: 9px; font-size: 20px; }

/* Logo de marque (icône réelle) */
.brand-logo { display: block; border-radius: 8px; flex: 0 0 auto; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: #F7F3EB;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.nav__inner { display: flex; align-items: center; gap: 28px; padding: 13px 32px; max-width: var(--maxw); margin: 0 auto; }
.nav__brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); }
.nav__brand b { font-weight: 800; font-size: 18px; letter-spacing: -.01em; }
.nav__links { display: flex; gap: 22px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.nav__links a { text-decoration: none; color: var(--ink-mute); font-weight: 600; font-size: 15px; transition: color .15s; }
.nav__links a:hover { color: var(--blue); }
.nav__links a.is-active { color: var(--ink); font-weight: 700; }
.nav__cta { color: #fff !important; background: var(--blue); font-weight: 700 !important; padding: 9px 18px; border-radius: 10px; box-shadow: 0 4px 12px rgba(30,92,158,.28); }
.nav__cta:hover { background: var(--blue-700); color: #fff !important; }
.nav__toggle { display: none; margin-left: auto; background: none; border: 0; cursor: pointer; padding: 8px; color: var(--ink); }
.nav__toggle svg { width: 26px; height: 26px; }

/* Resserrement avant le passage au menu burger : 6 entrées + CTA tiennent jusqu'à 980px. */
@media (max-width: 1080px) and (min-width: 981px) {
  .nav__inner { gap: 18px; }
  .nav__links { gap: 15px; }
  .nav__links a { font-size: 14.5px; }
  .nav__cta { padding: 9px 14px; }
}
/* Seuil relevé de 860 à 980px depuis l'ajout de l'entrée « Android » (la barre débordait). */
@media (max-width: 980px) {
  .nav__toggle { display: block; }
  .nav__links {
    position: fixed; inset: 60px 0 auto 0; flex-direction: column; align-items: stretch;
    gap: 0; background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 8px 24px 20px; margin: 0; box-shadow: 0 20px 30px -20px rgba(0,0,0,.25);
    display: none;
  }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding: 13px 0; font-size: 17px; border-bottom: 1px solid var(--line-2); }
  .nav__cta { text-align: center; margin-top: 12px; border-bottom: 0 !important; }
}

/* ---------- Hero (deep blue) ---------- */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background: var(--grad-deep);
}
.hero__ghost {
  position: absolute; top: -120px; right: -60px; font-weight: 800;
  font-size: 680px; color: rgba(255,255,255,.04); line-height: .8;
  user-select: none; pointer-events: none;
}
.hero__inner {
  position: relative; max-width: var(--maxw); margin: 0 auto;
  padding: clamp(52px,7vw,96px) 32px clamp(56px,8vw,104px);
  display: flex; flex-wrap: wrap; gap: 0; align-items: center;
}
.hero__col { flex: 1 1 0; min-width: 300px; }
.hero__badge {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px;
  border: 1px solid rgba(255,255,255,.22); border-radius: 999px;
  font-weight: 700; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
  color: #cfe0f2; margin-bottom: 24px;
}
.hero__badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-300); }
.hero h1 { font-weight: 800; font-size: clamp(32px,4.6vw,44px); line-height: 1.12; margin-bottom: 22px; text-wrap: balance; }
.hero__lead { font-size: clamp(19px,1.9vw,24px); line-height: 1.5; color: #c5d4e6; max-width: 560px; margin-bottom: 32px; }
.hero__lead strong { color: #fff; font-weight: 700; }
.flag-fr { display: inline-block; vertical-align: baseline; border-radius: 2px; box-shadow: 0 1px 2px rgba(0,0,0,.4); margin: 0 2px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; }
.hero__check { display: flex; flex-wrap: wrap; gap: 18px; color: #9fb6d2; font-weight: 400; font-size: 17px; }

/* ---------- Page header (interior pages) ---------- */
.pagehead { padding: clamp(48px,7vw,84px) 0 clamp(20px,3vw,32px); }
.pagehead h1 { font-weight: 800; font-size: clamp(32px,4.6vw,52px); margin-bottom: 18px; text-wrap: balance; }
.pagehead p { font-size: clamp(17px,1.5vw,20px); color: var(--ink-soft); }

/* ---------- Section headings ---------- */
.sec-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; margin-bottom: 34px; }
.sec-head h2 { font-size: clamp(28px,3.4vw,40px); font-weight: 800; max-width: 600px; }
.sec-link { text-decoration: none; color: var(--blue); font-weight: 700; font-size: 16px; white-space: nowrap; }
.sec-link:hover { color: var(--blue-700); }

/* ---------- Cards & grids ---------- */
.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--auto { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.grid--3x3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px) { .grid--3x3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .grid--3x3 { grid-template-columns: 1fr; } }
.card {
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 30px; box-shadow: var(--shadow-card);
}
.card h3 { font-size: 21px; font-weight: 800; margin-bottom: 9px; }
.card p { font-size: 16px; line-height: 1.5; color: var(--ink-soft); }
.card__icon {
  width: 46px; height: 46px; border-radius: 12px; background: var(--blue-tint);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.card__icon svg { stroke: var(--blue); }

.action {
  background: #fff; border: 1px solid var(--line-2); border-radius: 13px; padding: 20px;
}
.action__top { display: flex; align-items: center; gap: 11px; margin-bottom: 8px; }
.action__top .action__n { flex: 0 0 auto; color: var(--ink-mute); font-weight: 700; font-size: 16px; background: none; width: auto; height: auto; border-radius: 0; margin-right: -4px; }
.action__n::after { content: "."; }
.action__ic { flex: 0 0 auto; width: 30px; height: 30px; display: block; border-radius: 7px; }
.price-amt { font-size: 30px; font-weight: 800; color: var(--ink); margin: 4px 0 12px; }
.price-amt span { font-size: 14px; font-weight: 600; color: var(--ink-mute); }
.action__top svg { stroke: var(--blue); flex: 0 0 auto; }
.action__top span { font-weight: 800; font-size: 17px; }
.action p { font-size: 14.5px; line-height: 1.45; color: var(--ink-mute); }
a.action { text-decoration: none; color: inherit; display: block; transition: border-color .15s ease, transform .15s ease; }
a.action:hover { border-color: var(--blue); transform: translateY(-2px); }
a.action .action__top span { color: var(--blue); }
a.pill { text-decoration: none; transition: border-color .15s ease, color .15s ease; }
a.pill:hover { border-color: var(--blue); color: var(--blue); }

/* ---------- Editorial numbered list ---------- */
.rows { border-top: 1px solid var(--line-3); }
.rows__item { display: flex; flex-wrap: wrap; gap: 32px; padding: 36px 0; border-bottom: 1px solid var(--line-3); align-items: baseline; }
.rows__num { flex: 0 0 56px; font-weight: 800; font-size: 22px; color: var(--blue); }
.rows__item h3 { flex: 1 1 240px; font-size: 24px; font-weight: 800; }
.rows__item p { flex: 1 1 360px; font-size: 17px; line-height: 1.5; color: var(--ink-soft); }

/* ---------- Steps (numbered, vertical) ---------- */
.steps { display: grid; gap: 18px; }
.step { display: flex; gap: 20px; background: #fff; border: 1px solid var(--line-2); border-radius: 14px; padding: 24px 26px; }
.step__n {
  flex: 0 0 44px; height: 44px; border-radius: 12px; background: var(--grad-key); color: #fff;
  font-weight: 800; font-size: 19px; display: flex; align-items: center; justify-content: center;
}
.step h3 { font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.step p { color: var(--ink-soft); font-size: 16px; line-height: 1.5; }

/* ---------- Dark band ---------- */
.band-dark { background: var(--dark); color: #e7edf4; }
.band-dark h2 { color: #fff; }
.band-dark .lead { color: #b6c2d2; font-size: 17px; line-height: 1.6; }
.guarantee { background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.09); border-radius: 20px; padding: 38px 34px; text-align: center; }
.guarantee__icon { width: 118px; height: 118px; margin: 0 auto 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle, rgba(52,176,106,.32), rgba(52,176,106,0) 68%); color: var(--green-300); }
.guarantee__icon svg { width: 62px; height: 62px; }
.guarantee__kicker { color: var(--green-300); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 26px; }
.guarantee__list { list-style: none; padding: 0; margin: 0 auto; max-width: 440px; display: flex; flex-direction: column; gap: 17px; text-align: left; }
.guarantee__list li { display: flex; align-items: center; gap: 13px; color: #fff; font-size: 16px; font-weight: 600; }
.guarantee__list li svg { flex: 0 0 auto; width: 24px; height: 24px; stroke: #34b06a; }

/* ---------- Pricing ---------- */
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; align-items: stretch; }
.price-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .price-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .price-grid--4 { grid-template-columns: 1fr; } }
.price {
  background: #fff; border: 1px solid var(--line-2); border-radius: 18px; padding: 24px;
  display: flex; flex-direction: column; box-shadow: var(--shadow-card);
}
.price--featured { border: 2px solid var(--blue); box-shadow: 0 18px 40px -18px rgba(30,92,158,.45); position: relative; }
.price__tag { position: absolute; top: -13px; left: 28px; background: var(--blue); color: #fff; font-weight: 700; font-size: 12.5px; letter-spacing: .04em; padding: 6px 14px; border-radius: 999px; }
.price__name { font-weight: 800; font-size: 20px; margin-bottom: 8px; }
.price__aud { align-self: flex-start; background: rgba(30,92,158,.10); color: var(--blue); font-weight: 700; font-size: 12.5px; letter-spacing: .01em; line-height: 1.35; padding: 9px 14px; border-radius: 14px; margin-bottom: 12px; max-width: 195px; }
.price__amount { font-weight: 800; font-size: 40px; letter-spacing: -.02em; margin: 6px 0 4px; }
.price__amount small { font-size: 16px; font-weight: 700; color: var(--ink-mute); }
.price__note { color: var(--ink-mute); font-size: 14px; margin-bottom: 20px; }
.price ul { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 9px; }
.price li { display: flex; gap: 9px; font-size: 14px; line-height: 1.4; color: var(--ink-soft); }
.price li svg { width: 16px; height: 16px; stroke: var(--green); flex: 0 0 auto; margin-top: 2px; }
.price .btn { margin-top: auto; justify-content: center; }

/* --- Cartes tarifs façon SaaS (page d'accueil) --- */
.price { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.price:hover { transform: translateY(-3px); box-shadow: 0 22px 46px -22px rgba(20,38,59,.42); }
/* Pavé unique (page /acheter) : pas d'effet de survol qui monte — inutile sans comparaison. */
.price--static:hover { transform: none; box-shadow: none; }
.price__head { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; }
.price__ic { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 7px 16px -7px rgba(20,38,59,.5); }
.price__ic svg { width: 24px; height: 24px; fill: #fff; }
.price__ic--free { background: linear-gradient(150deg,#eef1f5,#ccd4de); }
.price__ic--free svg { fill: #8a93a2; }
.price__ic--month { background: linear-gradient(150deg,#7db4e8,#3f86cf); }
.price__ic--year  { background: linear-gradient(150deg,#3b82c9,#1E5C9E); }
.price__ic--life  { background: linear-gradient(150deg,#6f7ee8,#7b5fe0); }
.price__head-txt { min-width: 0; }
.price__head-txt .price__name { margin: 0; font-size: 21px; line-height: 1.1; }
.price__tagline { color: var(--ink-mute); font-size: 13px; margin-top: 3px; }
.price__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 2px 0 16px; }
.price__big { font-weight: 800; font-size: 38px; letter-spacing: -.02em; color: var(--ink); line-height: 1; }
.price__per { font-size: 15px; font-weight: 700; color: var(--ink-mute); }
.price__badge { font-size: 12px; font-weight: 800; padding: 4px 9px; border-radius: 999px; background: rgba(46,139,107,.14); color: var(--green); }
.price__badge--blue { background: rgba(30,92,158,.12); color: var(--blue); }
.price__sub { color: var(--ink-mute); font-size: 13px; margin-bottom: 22px; }
.price__sub strong { color: var(--ink-soft); font-weight: 700; }
.price--popular { border: 2px solid var(--blue); box-shadow: 0 24px 50px -20px rgba(30,92,158,.5); position: relative; }
.price__pop { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--blue); color: #fff; font-weight: 700; font-size: 12.5px; letter-spacing: .03em; padding: 6px 16px; border-radius: 999px; box-shadow: 0 7px 18px -5px rgba(30,92,158,.55); }

/* ---------- Prose (legal / articles) ---------- */
.prose { max-width: 760px; }
.prose h2 { font-size: 26px; font-weight: 800; margin: 40px 0 14px; }
.prose h3 { font-size: 19px; font-weight: 800; margin: 26px 0 10px; }
.prose p, .prose li { font-size: 16px; line-height: 1.65; color: var(--ink-soft); }
.prose p { margin: 0 0 14px; }
.prose ul { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.prose a { color: var(--blue); }
.prose strong { color: var(--ink); }
.prose .updated { font-size: 14px; color: var(--ink-mute); margin-bottom: 8px; }
.note {
  background: #fff; border: 1px solid var(--line-2); border-left: 3px solid var(--blue);
  border-radius: 8px; padding: 14px 18px; margin: 0 0 18px; font-size: 15px; color: var(--ink-soft);
}

/* ---------- Avertissement SmartScreen + sa vignette ----------
   La vignette REPRODUIT la fenêtre de Windows en HTML/CSS au lieu d'être une capture
   d'écran : le texte reste sélectionnable, lisible par un lecteur d'écran et traduisible,
   l'affichage reste net à toutes les densités d'écran, et il n'y a aucune image à charger.
   Elle est volontairement petite — c'est un repère visuel pour reconnaître la fenêtre, pas
   un tutoriel : l'explication complète est dans le texte à côté. */
.note--ss { display: flex; gap: 22px; align-items: flex-start; }
.ss-txt { flex: 1 1 auto; min-width: 0; line-height: 1.55; }
.ss-txt__do { display: block; margin: 8px 0; color: var(--ink); }

/* Vignette CARRÉE qui alterne en boucle entre les deux écrans — l'équivalent d'un GIF, mais
   en CSS : net à toutes les densités d'écran, rien à télécharger, texte réel (sélectionnable,
   traduisible, lisible par un lecteur d'écran). La scène est carrée et les deux dialogues y
   sont superposés, centrés verticalement : ils n'ont pas la même hauteur, et un carré fixe
   évite que le bloc voisin ne sursaute à chaque bascule. */
.ss-mini { flex: 0 0 300px; margin: 0; display: grid; gap: 8px; }
.ss-mini__stage { position: relative; aspect-ratio: 1 / 1; }
/* Le dialogue REMPLIT le carré : c'est lui qui doit être carré, pas la scène. Centré dans un
   carré, il ne faisait que 114 px de haut pour 232 de large — un rectangle plat entouré de
   118 px de vide, soit plus de vide que de contenu. */
.ss-mini__dlg {
  position: absolute; inset: 0;
  animation: ss-cycle 6s infinite;
}
/* Décalage NÉGATIF : la seconde animation démarre déjà à mi-cycle. Avec un délai positif,
   elle afficherait sa frame initiale (opacité 1) pendant toute l'attente — les deux écrans
   se superposeraient les 3 premières secondes. */
.ss-mini__dlg--2 { animation-delay: -3s; }
/* Chaque écran reste net ~2,7 s puis passe la main en 0,3 s. Les fondus se CHEVAUCHENT :
   l'un s'efface pendant que l'autre apparaît, sinon la boucle laisse un blanc d'une
   demi-seconde entre les deux — constaté en mesurant les opacités image par image. */
@keyframes ss-cycle {
  0%,  45%  { opacity: 1; }
  50%, 95%  { opacity: 0; }
  100%      { opacity: 1; }
}
/* Mouvement réduit demandé par le système : l'alternance est CONSERVÉE, simplement ralentie.
   Ce réglage vise les animations qui DÉPLACENT du contenu (défilements, parallaxes, zooms),
   sources de gêne vestibulaire ; ici rien ne bouge, seule l'opacité varie sur place. Figer
   les deux écrans les empilait — ce qui donnait, sur une machine où Windows désactive les
   effets d'animation, l'impression que l'alternance n'avait jamais été codée. */
/* Fond BLEU FONCÉ à texte blanc : c'est l'apparence réelle de la fenêtre SmartScreen.
   Une reproduction sur fond blanc ne se reconnaît pas d'un coup d'œil — or c'est tout
   l'intérêt de la vignette, permettre d'identifier la fenêtre avant même de la lire. */
.ss-mini__dlg {
  background: #17456f; border: 1px solid #0e3355; border-radius: 6px;
  padding: 15px 14px 13px; display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 3px 10px rgba(15, 45, 80, .22);
}
.ss-mini__title { font-size: 16px; font-weight: 800; color: #fff; line-height: 1.3; }
.ss-mini__body  { font-size: 12.5px; color: rgba(255,255,255,.78); line-height: 1.45; }
.ss-mini__link  { font-size: 12.5px; color: #fff; text-decoration: underline; display: flex; align-items: center; gap: 6px; }
/* Boutons ancrés EN BAS, comme dans la vraie fenêtre : le vide se place au-dessus d'eux.
   `flex-wrap` est INDISPENSABLE : « Exécuter quand même » + « Ne pas exécuter » demandent
   ~237 px côte à côte pour 202 px utiles, et sans lui `justify-content: flex-end` faisait
   fuir le dépassement VERS LA GAUCHE — le bouton sortait de 58 px hors du cadre bleu. */
.ss-mini__row   { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; margin-top: auto; padding-top: 6px; }
/* Boutons clairs sur le bleu, comme dans la vraie fenêtre. */
.ss-mini__btn {
  font-size: 11px; color: #16324e; background: #dfe6ee;
  border: 1px solid #b9c6d4; border-radius: 3px; padding: 6px 9px;
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
}
/* L'action à faire : liseré clair + blanc franc, pour que l'œil la trouve sans lire. */
.ss-mini__btn--hi {
  color: #123a60; background: #fff; border-color: #fff; font-weight: 800;
  box-shadow: 0 0 0 2px rgba(255,255,255,.35);
}
/* ---------- Le curseur qui vient cliquer ----------
   Il remplace les pastilles « 1 » / « 2 » : montrer le geste vaut mieux que le numéroter.
   UN SEUL curseur, partagé par les deux écrans (enfant direct de .ss-mini__stage, pas
   niché dans le lien/bouton de CHAQUE écran comme avant) : il doit VOYAGER visiblement de
   la cible de l'écran 1 vers celle de l'écran 2, jamais disparaître entre les deux — c'est
   le clic qui semble faire apparaître l'écran suivant, pas un curseur qui réapparaît par
   magie. Coordonnées en % de la scène (mesurées) : left/top animés directement (pas
   transform:translate) pour rester lisibles à combiner avec le "clic" (scale) du meme
   keyframe. Forme d'un vrai pointeur Windows (flèche inclinée, contour noir, corps blanc),
   pas un simple triangle. */
.ss-ptr {
  position: absolute; width: 15px; height: 17px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45));
  pointer-events: none; transform-origin: 20% 10%;
  animation: ss-ptr-move 6s infinite;
}
/* Onde de clic : un cercle qui s'ouvre et s'efface au moment du contact — enfant du
   curseur, il voyage donc AVEC lui. */
.ss-ptr::after {
  content: ""; position: absolute; left: -6px; top: -5px; width: 22px; height: 22px;
  border-radius: 50%; border: 2px solid rgba(255, 255, 255, .85);
  opacity: 0; animation: ss-ptr-click 6s infinite;
}
/* Chronologie (6 s = un cycle complet des DEUX écrans, cf. ss-cycle) :
     0-45%   écran 1 affiché -> curseur sur "Informations complémentaires", clic a 27%.
     45-53%  bascule d'écran -> le curseur GLISSE visiblement d'une cible a l'autre.
     53-95%  écran 2 affiché -> curseur sur "Exécuter quand même", clic a 77%.
     95-100% retour au cycle -> le curseur glisse en sens inverse, jamais de saut sec. */
@keyframes ss-ptr-move {
  0%, 27%    { left: 17.2%; top: 39.7%; transform: scale(1); }
  28%        { left: 17.2%; top: 39.7%; transform: scale(.8); }
  30%, 45%   { left: 17.2%; top: 39.7%; transform: scale(1); }
  53%, 77%   { left: 56.9%; top: 90.3%; transform: scale(1); }
  78%        { left: 56.9%; top: 90.3%; transform: scale(.8); }
  80%, 95%   { left: 56.9%; top: 90.3%; transform: scale(1); }
  100%       { left: 17.2%; top: 39.7%; transform: scale(1); }
}
@keyframes ss-ptr-click {
  0%, 26%   { opacity: 0; transform: scale(.3); }
  28%       { opacity: .95; transform: scale(.5); }
  37%, 76%  { opacity: 0; transform: scale(1.35); }
  78%       { opacity: .95; transform: scale(.5); }
  87%, 100% { opacity: 0; transform: scale(1.35); }
}

/* Mouvement réduit demandé par le système : l'alternance est CONSERVÉE, simplement ralentie
   (rien ne sort du cadre, le curseur se déplace juste plus lentement). */
@media (prefers-reduced-motion: reduce) {
  .ss-mini__dlg, .ss-ptr, .ss-ptr::after { animation-duration: 10s; }
  .ss-mini__dlg--2 { animation-delay: -5s; }
}
/* Sous 720 px la vignette passe SOUS le texte et s'élargit : à 232 px de large en colonne
   étroite, les libellés des boutons se chevauchaient. */
@media (max-width: 720px) {
  .note--ss { flex-direction: column; gap: 16px; }
  .ss-mini { flex: 1 1 auto; max-width: 320px; margin: 0 auto; }
}

/* ---------- Tableau comparatif ---------- */
.cmp-wrap { overflow-x: auto; border: 1px solid var(--line-2); border-radius: 14px; background: #fff; }
.cmp { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; table-layout: fixed; }
.cmp th:first-child, .cmp td:first-child { width: 26%; }
.cmp th, .cmp td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.cmp thead th { background: var(--blue-tint); font-weight: 800; color: var(--ink); }
.cmp tbody th { font-weight: 700; color: var(--ink); }
.cmp td { color: var(--ink-soft); }
.cmp .yes { color: var(--green); font-weight: 700; }
.cmp .no { color: #b04a3d; }
.cmp .col-us { background: rgba(30,92,158,.05); }
.cmp thead .col-us { background: var(--blue); color: #fff; }
/* Variante « à plat » : aucun fond sur la colonne La Touche Carré, ligne d'en-tête beige */
.cmp-flat thead th { background: var(--bg); color: var(--ink); border-bottom: none; }
.cmp-flat thead .col-us { background: var(--bg); color: var(--ink); }
.cmp-flat .col-us { background: transparent; }
/* Le cadre du tableau n'entoure que les lignes de données ; l'en-tête (logos) flotte au-dessus */
.cmp-wrap:has(.cmp-flat) { border: none; background: transparent; border-radius: 0; }
.cmp-flat { border-collapse: separate; border-spacing: 0; }
.cmp-flat tbody { background: #fff; }
.cmp-flat tbody > tr > th,
.cmp-flat tbody > tr > td { border-bottom: 1px solid var(--line-2); }
.cmp-flat tbody > tr:first-child > * { border-top: 1px solid var(--line-2); }
.cmp-flat tbody > tr > *:first-child { border-left: 1px solid var(--line-2); }
.cmp-flat tbody > tr > *:last-child { border-right: 1px solid var(--line-2); }
.cmp-flat tbody > tr:last-child > * { border-bottom: 1px solid var(--line-2); }
.cmp-flat tbody > tr:first-child > *:first-child { border-top-left-radius: 14px; }
.cmp-flat tbody > tr:first-child > *:last-child { border-top-right-radius: 14px; }
.cmp-flat tbody > tr:last-child > *:first-child { border-bottom-left-radius: 14px; }
.cmp-flat tbody > tr:last-child > *:last-child { border-bottom-right-radius: 14px; }

/* Encart comparatif (page d'accueil) */
.cmp-teaser { background: #fff; border: 1px solid var(--line-2); border-radius: 20px; padding: clamp(26px,4vw,46px); display: flex; flex-wrap: wrap; gap: clamp(28px,4vw,54px); align-items: center; box-shadow: var(--shadow-card); }
.cmp-teaser__txt { flex: 1 1 360px; min-width: 280px; }
.cmp-teaser__txt h2 { font-size: clamp(24px,2.8vw,32px); margin-bottom: 14px; }
.cmp-teaser__bul { list-style: none; padding: 0; margin: 18px 0 24px; display: flex; flex-direction: column; gap: 11px; }
.cmp-teaser__bul li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15.5px; }
.cmp-teaser__bul svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--green); }
.cmp-teaser__vis { flex: 1 1 320px; min-width: 260px; text-align: center; }
.cmp-teaser__cap { font-weight: 700; font-size: 13px; letter-spacing: .04em; color: var(--ink-mute); text-transform: uppercase; margin-bottom: 14px; }
.cmp-logos-cloud { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 320px; margin: 0 auto; }
.cmp-logos-cloud img { width: 42px; height: 42px; border-radius: 11px; opacity: .9; }
.cmp-teaser__arrow { font-size: 26px; color: var(--blue); margin: 12px 0; line-height: 1; }
.cmp-teaser__us { display: inline-flex; align-items: center; gap: 12px; background: var(--blue-tint); border: 1px solid rgba(30,92,158,.18); border-radius: 16px; padding: 12px 20px; }
.cmp-teaser__us img { width: 46px; height: 46px; border-radius: 12px; }
.cmp-teaser__us b { display: block; font-size: 17px; color: var(--ink); }
.cmp-teaser__us span { font-size: 13.5px; color: var(--blue); font-weight: 600; }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: 0; }
.cmp .part { color: #9a6a1e; font-weight: 600; }
.cmp td.na { color: var(--ink-mute); }
.cmp tbody tr.row-us th, .cmp tbody tr.row-us td { background: rgba(30,92,158,.08); }
.cmp tbody tr.row-us th { color: var(--blue); font-weight: 800; }
.cmp tr.cmp-cat td { background: var(--bg-alt); font-weight: 800; color: var(--ink-soft); font-size: 12px; letter-spacing: .07em; text-transform: uppercase; padding: 9px 16px; }

/* --- Cases colorées + en-têtes de colonnes (comparatif transposé) --- */
.cmp thead th:not(:first-child) { text-align: center; vertical-align: middle; white-space: normal; }
.cmp .col-head { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.cmp .col-head b { font-size: 14.5px; }
.cmp .col-head .sub { font-weight: 600; font-size: 11.5px; color: var(--ink-mute); }
.cmp thead .col-us .sub { color: rgba(255,255,255,.78); }
.cmp td.c { text-align: center; vertical-align: middle; }
.cmp tbody th { vertical-align: middle; }
.cmp sup { margin-left: 3px; }
.cmp-logo { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; color: #fff; font-weight: 800; font-size: 12.5px; letter-spacing: -.02em; }
.cmp-logo-img { width: 30px; height: 30px; border-radius: 8px; }
.cmp .badge { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; }
.cmp .badge svg { width: 18px; height: 18px; display: block; }
.cmp .badge.yes { background: var(--green); }
.cmp .badge.part { background: #F2A916; }
.cmp .badge.no { background: #CF4636; }
.cmp .tag { display: inline-block; padding: 5px 11px; border-radius: 999px; font-weight: 700; font-size: 12.5px; white-space: nowrap; color: #fff; }
.cmp .tag.perf-hi { background: var(--green); }       /* vert foncé : Excellent / Élevé */
.cmp .tag.perf-mid { background: #5DAA5F; }           /* vert clair : Bon */
.cmp .tag.perf-amber { background: #F2A916; }         /* jaune ambré : Moyen / Plus élevé */
.cmp .tag.perf-var { background: #7C8794; }           /* gris : Variable */

/* Forces / limites (pages de comparaison vs un outil) */
.pc { list-style: none; padding: 0; margin: 0 0 8px; }
.pc li { position: relative; padding-left: 26px; margin-bottom: 9px; font-size: 15px; line-height: 1.45; color: var(--ink-soft); }
.pc li::before { position: absolute; left: 0; top: 0; font-weight: 800; }
.pc--pro li::before { content: "\2713"; color: var(--green); }
.pc--con li::before { content: "\2715"; color: #CF4636; }
.pc-h { margin: 14px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-mute); font-weight: 800; }
.vs-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.vs-head img { width: 40px; height: 40px; border-radius: 10px; }
.vs-x { font-weight: 800; color: var(--ink-mute); font-size: 15px; }
.cmp .na { color: var(--ink-mute); font-size: 12.5px; font-weight: 600; }

/* Sélecteur de famille (onglets au-dessus du comparatif) */
.cmp-tabs { display: inline-flex; flex-wrap: wrap; gap: 5px; padding: 5px; background: #fff; border: 1px solid var(--line-2); border-radius: 999px; margin-bottom: 20px; }
.cmp-tab { border: 0; background: none; cursor: pointer; font: inherit; font-weight: 700; font-size: 14px; color: var(--ink-mute); padding: 9px 18px; border-radius: 999px; transition: background .15s, color .15s; white-space: nowrap; }
.cmp-tab:hover { color: var(--blue); }
.cmp-tab.is-active { background: var(--blue); color: #fff; }
.cmp-panel[hidden] { display: none; }
.cmp-panel h3 { font-size: clamp(20px,2.4vw,26px); margin-bottom: 14px; }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; }
.faq details { border: 1px solid var(--line-2); border-radius: 12px; background: #fff; margin-bottom: 12px; overflow: hidden; }
.faq summary { cursor: pointer; padding: 20px 22px; font-weight: 700; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--blue); font-size: 24px; font-weight: 700; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details[open] summary { border-bottom: 1px solid var(--line-2); }
.faq .faq__body { padding: 16px 22px 22px; color: var(--ink-soft); font-size: 16px; line-height: 1.6; }

/* ---------- CTA final ---------- */
.cta { text-align: center; }
.cta h2 { font-size: clamp(30px,4vw,48px); font-weight: 800; max-width: 640px; margin: 0 auto 16px; text-wrap: balance; }
.cta p { font-size: 18px; color: var(--ink-soft); max-width: 480px; margin: 0 auto 30px; }
.cta__fine { font-size: 14.5px; color: #8a8270; font-weight: 600; margin-top: 18px; }

/* ---------- Privacy diagram ---------- */
.privacy-flow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.privacy-flow__local { flex: 1 1 200px; border: 1.5px solid var(--green); background: rgba(46,139,107,.12); border-radius: var(--radius); padding: 22px; }
.privacy-flow__label { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--green-300); margin-bottom: 16px; }
.privacy-flow__label .dot { width: 8px; height: 8px; border-radius: 2px; background: var(--green-300); }
.privacy-flow__chip { background: rgba(255,255,255,.08); border-radius: 8px; padding: 10px 13px; font-size: 14px; font-weight: 600; color: #e7edf4; margin-bottom: 9px; }
.privacy-flow__never { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; color: #7f8da0; font-size: 11px; font-weight: 600; }
.privacy-flow__remote { flex: 1 1 130px; border: 1.5px dashed #3a4a60; border-radius: var(--radius); padding: 22px; opacity: .6; text-align: center; }
.privacy-flow__remote .x { font-size: 30px; margin-bottom: 8px; filter: grayscale(1); }
.privacy-flow__remote .t { font-size: 13px; font-weight: 700; color: #8a98ab; text-decoration: line-through; }

/* ---------- Footer ---------- */
.footer { background: var(--dark-2); color: #9fb0c2; }
.footer__inner { max-width: var(--maxw); margin: 0 auto; padding: clamp(44px,6vw,68px) 32px 32px; }
.footer__top { display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; }
.footer__brand { flex: 1 1 280px; max-width: 360px; }
.footer__brand-row { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.footer__brand-row b { font-weight: 800; font-size: 18px; color: #fff; }
.footer__about { font-size: 14.5px; line-height: 1.55; color: #8295a8; margin-bottom: 12px; }
.footer__contact { margin: 0 0 18px; font-size: 14.5px; }
.footer__contact a { color: #cfe0f2; text-decoration: none; font-weight: 600; }
.footer__contact a:hover { color: #fff; }
.footer__links { display: flex; flex-direction: column; gap: 12px; }
.footer__links a { color: #9fb0c2; text-decoration: none; font-size: 14.5px; transition: color .15s; }
.footer__links a:hover { color: #fff; }
.footer__bottom { margin-top: 40px; padding-top: 22px; border-top: 1px solid #20303f; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 13px; color: #6f8195; }
.footer__badges { display: flex; gap: 8px; flex-wrap: wrap; }
.footer__badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid #2a3a4c; border-radius: 999px; font-size: 12px; font-weight: 600; color: #a9bccd; }
.footer__badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green-300); }

/* ============================================================
   Animated keyboard (hero illustration)
   ============================================================ */
.kbd-wrap { flex: 1 1 0; min-width: 300px; display: flex; justify-content: center; container-type: inline-size; }
/* Grand écran : clavier épinglé à 32px du bord droit ; sa largeur grandit avec
   l'écran (jusqu'à ~1000px). Au-delà, taille plafonnée + écart au texte plafonné
   (120px) -> le clavier cesse de s'éloigner, l'espace vide passe à droite.
   Le texte reste aligné sur le conteneur 1200px du reste du site. */
@media (min-width: 1100px) {
  .hero__inner {
    flex-wrap: nowrap; gap: 0; align-items: center; max-width: none;
    --padL: max(32px, calc((100vw - 1200px) / 2 + 32px));
    --tw: clamp(380px, 40vw, 600px);
    --kw: clamp(460px, 46vw, 800px);
    padding-left: var(--padL); padding-right: var(--padL);
  }
  .hero__col { flex: 1 1 0; min-width: 0; }
  .kbd-wrap { flex: 1 1 0; min-width: 0; justify-content: center; margin-left: 0; }
  .kbd { font-size: clamp(4px, 1.56cqi, 18px); }
}
.kbd-frame { position: relative; width: max-content; max-width: 100%; border-radius: 16px; box-shadow: 0 30px 70px -22px rgba(8,20,35,.75), 0 0 0 1px rgba(255,255,255,.05); }
/* Pas de clip sur le cadre : en zoom, le clavier grandit et déborde ; c'est le .hero
   (overflow:hidden) qui le contient -> il remplit la hauteur de la zone bleue. */
.kbd-frame { overflow: visible; }
.kbd { font-size: clamp(4px,1.56cqi,16px); transform-origin: 0% 28%; animation: lc-zoom 20s ease-in-out infinite; background: linear-gradient(180deg,#2a3a4d,#16212f); padding: 1.3em; border-radius: 1.5em; display: flex; flex-direction: column; gap: 0; }
.kbd__row { display: flex; gap: 0; }
.kbd__cell { position: relative; height: 100%; flex: 0 0 auto; box-sizing: border-box; }
.kbd__cap { position: absolute; top: .32em; left: .32em; right: .32em; bottom: .32em; border-radius: .4em; background: linear-gradient(180deg,#46586f 0%,#37485d 58%,#2b3a4e 100%); box-shadow: 0 .14em .3em rgba(0,0,0,.22), inset 0 .07em 0 rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; color: #cdd7e3; overflow: hidden; }
/* Touche « ² » : couleur du logo en permanence (pas de révélation différée). */
.kbd__cap--hi { align-items: flex-start; justify-content: flex-start; padding: .5em .62em; color: #eaf1f9; background: linear-gradient(160deg,#5aa0e0,#1E5C9E 55%,#143a61); box-shadow: 0 .14em .3em rgba(0,0,0,.28), inset 0 .07em 0 rgba(255,255,255,.2), 0 0 1.1em .15em rgba(74,147,216,.5); }
/* Touche Entrée ISO : s'étend sur 2 rangées (hauteur de rangée = 4em -> bas à -3.68em). */
.kbd__cap--tall { bottom: -3.68em; z-index: 2; }
.kbd__glyph { font-family: Manrope, sans-serif; font-weight: 600; line-height: 1; }
.kbd__cap--hi .kbd__glyph { font-weight: 800; font-size: 1.95em; }

/* Cycle 20 s : 2 s plein -> zoom in 2 s -> maintien zoomé 10 s -> zoom out 2 s -> 4 s plein. */
/* Cycle 20 s : 1 s plein -> zoom in 2 s -> maintien zoomé 10 s -> zoom out 2 s -> 5 s plein. */
@keyframes lc-zoom { 0%,5%{transform:scale(1)} 15%,65%{transform:scale(3.5)} 75%,100%{transform:scale(1)} }
@keyframes lc-keycolor {
  0%,10%  { background: linear-gradient(180deg,#46586f 0%,#37485d 58%,#2b3a4e 100%); box-shadow: 0 .14em .3em rgba(0,0,0,.22), inset 0 .07em 0 rgba(255,255,255,.08); }
  20%,70% { background: linear-gradient(160deg,#5aa0e0,#1E5C9E 55%,#143a61); box-shadow: 0 .14em .3em rgba(0,0,0,.28), inset 0 .07em 0 rgba(255,255,255,.2), 0 0 1.1em .15em rgba(74,147,216,.5); }
  80%,100%{ background: linear-gradient(180deg,#46586f 0%,#37485d 58%,#2b3a4e 100%); box-shadow: 0 .14em .3em rgba(0,0,0,.22), inset 0 .07em 0 rgba(255,255,255,.08); }
}
@keyframes lc-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes lc-pulse { 0%{box-shadow:0 0 0 0 rgba(46,139,107,.5)} 70%{box-shadow:0 0 0 10px rgba(46,139,107,0)} 100%{box-shadow:0 0 0 0 rgba(46,139,107,0)} }

@media (prefers-reduced-motion: reduce) {
  /* Zoom du clavier conservé volontairement (élément de marque demandé), même en mouvement réduit. */
  html { scroll-behavior: auto; }
}

.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); animation: lc-pulse 2s infinite; display: inline-block; }


/* ============================================================
   Page /setup — bloc « Windows » + Play Store + changelog
   ============================================================ */
/* Les deux plateformes cote a cote, meme poids visuel -> "harmonieux" comme demande :
   la carte Windows garde le pave bleu existant, la carte Android reprend EXACTEMENT le
   meme gabarit (bordure, fond teinte, rayon, ombre) pour que rien ne semble secondaire. */
.setup-platforms { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;
  align-items: stretch; margin-top: 28px; margin-bottom: 4px; }
/* MEME mecanisme de mise en page pour les deux cartes, sans exception : largeur FIXE
   (pas juste max-width -> sinon chaque carte se dimensionne sur son propre contenu, ex.
   "Windows 10 / 11 (64 bits)" vs "Android 8.0 minimum", et les deux pavés divergent en
   largeur) + flex colonne centree pour que badge/bouton/meta/compat s'empilent identiquement
   des deux cotes. C'est le point qui a casse l'alignement : .setup-latest suivait le flux
   normal du document, .setup-playstore etait deja en flex -> jamais vraiment symetriques. */
.setup-latest, .setup-playstore {
  width: 310px; margin: 0; padding: 26px 24px;
  border: 1px solid color-mix(in oklch, var(--blue) 25%, transparent);
  background: color-mix(in oklch, var(--blue) 5%, var(--bg, #fff));
  border-radius: 16px; text-align: center;
  box-shadow: 0 4px 18px -8px rgba(20, 50, 90, .15);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 0; text-decoration: none; color: inherit;
}
.setup-playstore img { display: block; }
.setup-latest:hover, .setup-playstore:hover { border-color: var(--blue); }
.setup-latest__badge {
  display: inline-block; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--blue, #1A4E83); background: color-mix(in oklch, var(--blue) 12%, transparent);
  padding: 4px 10px; border-radius: 20px;
}
.setup-latest__badge--android { color: #1a7d3e; background: color-mix(in oklch, #1a7d3e 12%, transparent); }
/* Badge -> CTA (bouton OU badge Play, MEME gabarit 150x48 + rayon 999px) -> version+taille
   -> compat. Ordre volontairement identique sur les deux cartes pour rester "harmonieux". */
.setup-latest__cta { width: 168px; height: 54px; box-sizing: border-box; margin: 15px 0 0;
  border-radius: 999px; display: flex; align-items: center; justify-content: center; }
.setup-latest__meta { font-size: 15px; font-weight: 700; color: var(--ink, #111); margin: 10px 0 2px; }
.win-btn { gap: 9px; background: var(--blue); color: #fff; text-decoration: none;
  font-weight: 700; font-size: 15.5px; box-shadow: var(--shadow-btn); transition: background .16s ease; }
.win-btn:hover { background: var(--blue-700); }
.win-btn svg { width: 20px; height: 20px; }
/* Badge Play REFAIT en HTML/CSS -- texte francais reel (accessible, pas d'image de texte).
   Seule l'icone triangle reste une image (recadree depuis le badge officiel Google, fond
   noir retire -> vraie transparence). Aucune bordure ni marge sur le badge lui-meme. */
.play-btn { gap: 7px; padding: 0 14px 0 11px; background: linear-gradient(180deg, #3a3a3a 0%, #000 65%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18); white-space: nowrap; overflow: hidden; }
.play-btn img { width: 22px; height: 24px; flex: 0 0 auto; display: block; }
.play-btn__text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; min-width: 0; }
.play-btn__text small { font-size: 7.5px; letter-spacing: .04em; font-weight: 500; color: #cfcfcf; text-transform: uppercase; }
.play-btn__text strong { font-size: 14.5px; font-weight: 600; color: #fff; margin-top: 1px; }
.setup-latest__compat { font-size: 13px; color: var(--muted, #666); margin: 0; }

.changelog { list-style: none; padding: 0; margin: 16px 0 0; counter-reset: none; max-width: 860px; margin-left: auto; margin-right: auto; }
.changelog__item { padding: 18px 0; border-bottom: 1px solid var(--hair, #e6e8ec); }
.changelog__item:last-child { border-bottom: none; }
.changelog__item--latest { padding-left: 14px; border-left: 3px solid var(--blue, #1A4E83); margin-left: -17px; }
.changelog__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.changelog__ver { font-size: 18px; font-weight: 700; color: var(--ink, #111); }
.changelog__badge { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: #fff; background: var(--blue, #1A4E83); padding: 2px 8px; border-radius: 10px; }
.changelog__date { font-size: 13px; color: var(--muted, #666); margin-left: auto; font-variant-numeric: tabular-nums; }
.changelog__size { font-size: 12.5px; color: var(--faint, #999); font-variant-numeric: tabular-nums; }
.changelog__notes { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink, #222); }

/* ============================================================
   price-grid --2 (2 colonnes Gratuit / Entreprise)
   ============================================================ */
.price-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .price-grid--2 { grid-template-columns: 1fr; } }

/* ============================================================
   Tableau de tarifs (Solo / Multi × Mensuel / Annuel / À vie)
   ============================================================ */
.pricing-table { width: 100%; max-width: 880px; margin: 0 auto; border-collapse: separate;
  border-spacing: 0; border: 1px solid var(--hair, #e6e8ec); border-radius: 14px;
  overflow: hidden; background: var(--panel, #fff);
  box-shadow: 0 4px 18px -10px rgba(20, 50, 90, .12); }
.pricing-table thead th { padding: 16px 14px; font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--ink, #1a1c1f);
  background: color-mix(in oklch, var(--blue) 4%, transparent);
  border-bottom: 1px solid var(--hair, #e6e8ec); text-align: center; }
.pricing-table thead th:first-child { background: transparent; }
.pricing-table thead th small { display: block; font-size: 10.5px; font-weight: 600;
  color: var(--blue, #1A4E83); margin-top: 2px; letter-spacing: 0; text-transform: none; }
.pricing-table tbody th { padding: 18px 18px; text-align: left; vertical-align: middle;
  font-weight: 700; color: var(--ink, #1a1c1f); font-size: 16px;
  border-top: 1px solid var(--hair, #e6e8ec); width: 26%; }
.pricing-table tbody th b { display: block; font-size: 18px; }
.pricing-table tbody td { padding: 18px 14px; text-align: center; vertical-align: middle;
  border-top: 1px solid var(--hair, #e6e8ec);
  border-left: 1px solid var(--hair, #e6e8ec); }
.pricing-table .pt-amt { display: block; font-size: 22px; font-weight: 800;
  color: var(--ink, #111); line-height: 1.1; }
.pricing-table .pt-sub { display: block; font-size: 12px; font-weight: 500;
  color: var(--muted, #6a707a); margin-top: 4px; }
.pricing-table .pt-featured { background: color-mix(in oklch, var(--blue) 5%, transparent); }
.pricing-table .pt-featured th { color: var(--blue, #1A4E83); }
.pricing-table .pt-featured .pt-amt { color: var(--blue, #1A4E83); }
@media (max-width: 640px) {
  .pricing-table thead th, .pricing-table tbody td { padding: 12px 8px; font-size: 12px; }
  .pricing-table tbody th { padding: 12px 10px; font-size: 14px; }
  .pricing-table tbody th b { font-size: 15px; }
  .pricing-table .pt-amt { font-size: 17px; }
}

/* Carte de prix isolée (au lieu d'être dans une grille) — centrée, largeur réduite */
.price.price--standalone { max-width: 420px; margin: 0 auto; }

/* Variantes Solo/Multi à l'intérieur d'une carte de prix : empilées verticalement,
   chaque variante en bloc visible avec prix BIG centré + label sous-titre */
.price__variants { display: flex; flex-direction: column; gap: 10px;
  margin: 8px 0 14px; }
.price__variant { padding: 14px 12px; border-radius: 12px;
  background: color-mix(in oklch, var(--blue) 4%, transparent);
  border: 1px solid color-mix(in oklch, var(--blue) 10%, transparent);
  text-align: center; transition: transform .12s ease, box-shadow .12s ease; }
.price__variant:hover { transform: translateY(-1px);
  box-shadow: 0 4px 14px -8px rgba(20, 50, 90, .25); }
.price__var-label { display: block; font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--blue, #1A4E83);
  margin-bottom: 6px; }
.price__var-label em { display: inline; font-style: normal; font-weight: 500;
  font-size: 11px; color: var(--muted, #6a707a); text-transform: none;
  letter-spacing: 0; margin-left: 4px; }
.price__var-amount { display: block; font-size: 28px; font-weight: 800;
  color: var(--ink, #111); line-height: 1.1; white-space: nowrap; }
.price__var-amount small { display: block; font-size: 12px; font-weight: 500;
  color: var(--muted, #6a707a); margin-top: 4px; }
.price--featured .price__variant {
  background: color-mix(in oklch, var(--blue) 8%, transparent);
  border-color: color-mix(in oklch, var(--blue) 22%, transparent); }
.price--featured .price__var-amount { color: var(--blue, #1A4E83); }

/* ============================================================
   Multi-plateforme (Windows / Android)
   ============================================================ */

/* Sélecteur de plateforme — deux pages réelles, pas des onglets JS (SEO). */
/* ---------- Selecteur de plateforme Windows / Android -------------------------
   Deux VRAIES pages (choix SEO). Pour que la bascule se lise comme un interrupteur,
   une PASTILLE en absolu coulisse d'un segment a l'autre AVANT la navigation (voir
   initPlatSwitch dans main.js) : le glissement se produit sous les yeux, DANS le
   controle, au lieu de traverser la page pendant le chargement.
   Les deux segments sont des colonnes de grille 1fr -> STRICTEMENT egaux, et la
   pastille fait exactement 50 % de la zone interieure. Markup genere par build.py. */
.plat-switch { position: relative; display: grid; grid-auto-flow: column;
  grid-auto-columns: 1fr; gap: 0; padding: 5px; background: #fff;
  border: 1px solid var(--line-2); border-radius: 999px; margin-bottom: 22px;
  width: max-content; max-width: 100%; }
.plat-switch__pill { position: absolute; top: 5px; bottom: 5px; left: 5px;
  width: calc(50% - 5px); border-radius: 999px; background: var(--blue);
  transition: transform .32s cubic-bezier(.22, .9, .24, 1); will-change: transform; }
.plat-switch[data-active="1"] .plat-switch__pill { transform: translateX(100%); }
.plat-seg { position: relative; z-index: 1; display: inline-flex; align-items: center;
  justify-content: center; gap: 8px; text-decoration: none; font-weight: 700;
  font-size: 14px; color: var(--ink-mute); padding: 9px 18px; border-radius: 999px;
  white-space: nowrap; transition: color .22s ease; }
.plat-seg.is-on { color: #fff; }
.plat-switch a.plat-seg:hover { color: var(--blue); }
.plat-switch svg { width: 16px; height: 16px; flex: 0 0 auto; }
/* Pendant le glissement, les deux libelles passent au blanc : le survol ne doit pas
   repeindre en bleu un segment que la pastille est en train de recouvrir. */
.plat-switch.is-sliding .plat-seg,
.plat-switch.is-sliding a.plat-seg:hover { color: #fff; }

/* Variante posee sur le hero bleu : verre depoli, pastille blanche. */
.plat-switch--hero { margin: 22px 0 0; background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22); backdrop-filter: blur(2px); }
.plat-switch--hero .plat-switch__pill { background: #fff; }
.plat-switch--hero .plat-seg { color: #cfe0f2; }
.plat-switch--hero .plat-seg.is-on { color: var(--ink); }
.plat-switch--hero a.plat-seg:hover { color: #fff; }
.plat-switch--hero.is-sliding .plat-seg,
.plat-switch--hero.is-sliding a.plat-seg:hover { color: var(--ink); }

/* Fondu de page entre les deux plateformes (meme origine). Sans support du
   navigateur : navigation normale, le glissement de la pastille a deja eu lieu. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }
/* Mouvement reduit : on GARDE le glissement de la pastille — il n'est pas decoratif,
   il indique la plateforme choisie avant le changement de page. On le raccourcit et
   on retire le rebond (courbe lineaire), ce qui respecte l'esprit du reglage sans
   rendre la bascule muette. Le reste des animations est bien neutralise. */
@media (prefers-reduced-motion: reduce) {
  .plat-switch__pill { transition: transform .17s linear; }
  .plat-seg { transition: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation: none !important; }
}

/* Bande « l'autre plateforme » (accueil, tarifs, fonctionnalités) */
.xplat { display: flex; flex-wrap: wrap; gap: clamp(26px, 4vw, 48px); align-items: center;
  background: #fff; border: 1px solid var(--line-2); border-radius: 20px;
  padding: clamp(26px, 4vw, 46px); box-shadow: var(--shadow-card); }
.xplat__txt { flex: 1 1 360px; min-width: 280px; }
.xplat__txt h2 { font-size: clamp(24px, 2.8vw, 32px); margin-bottom: 14px; }
/* Colonne visuelle large : elle porte une capture du clavier (460px), pas une vignette. */
.xplat__vis { flex: 1 1 400px; min-width: 280px; display: flex; justify-content: center; }
.xplat__free { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
  background: rgba(46,139,107,.12); color: var(--green); font-weight: 800; font-size: 12.5px;
  letter-spacing: .06em; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; }
.xplat__bul { list-style: none; padding: 0; margin: 18px 0 24px; display: flex;
  flex-direction: column; gap: 11px; }
.xplat__bul li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15.5px; }
.xplat__bul svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--green); }
.band-dark .xplat { background: rgba(0,0,0,.22); border-color: rgba(255,255,255,.09); }

/* Bandeau « gratuit sur Android » de la page Tarifs */
.freeband { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(20px, 3vw, 40px);
  border: 1px solid rgba(46,139,107,.28); background: rgba(46,139,107,.07);
  border-radius: 20px; padding: clamp(24px, 3.4vw, 38px); }
.freeband__txt { flex: 1 1 420px; min-width: 280px; }
.freeband__txt h2 { font-size: clamp(22px, 2.6vw, 30px); margin-bottom: 12px; }
.freeband__txt p { color: var(--ink-soft); font-size: 16px; line-height: 1.6; margin-bottom: 10px; }
.freeband__amount { flex: 0 0 auto; text-align: center; }
.freeband__amount b { display: block; font-size: 46px; font-weight: 800; color: var(--green);
  line-height: 1; letter-spacing: -.02em; }
.freeband__amount span { display: block; font-size: 13px; font-weight: 700; color: var(--ink-mute);
  margin-top: 6px; }
/* Empilé : le prix passe en tête (sinon il se retrouve orphelin sous le bouton). */
@media (max-width: 760px) {
  .freeband__amount { order: -1; display: flex; align-items: baseline; gap: 10px; }
  .freeband__amount b { font-size: 40px; }
  .freeband__amount span { margin-top: 0; }
}

/* ---------- Capture du clavier Android ----------------------------------------
   VRAIE capture d'ecran (voir render_kb / KB_SHOTS dans build.py). Aucune
   reconstitution : la taille des touches et des glyphes est celle de l'appareil.
   Le cadre reste sobre pour qu'on lise l'image, pas l'habillage. */
.kbshot { margin: 0; width: 100%; max-width: 460px; }
/* Chassis : on ne montre que le BAS de l'appareil. Bords lateraux + coins inferieurs
   arrondis, haut coupe net -> le telephone continue hors du cadre. */
.kbshot__phone { padding: 0 10px 10px; border-radius: 0 0 38px 38px;
  background: linear-gradient(158deg, #2f3b49, #18212c);
  box-shadow: 0 30px 56px -24px rgba(8,20,35,.75), 0 0 0 1px rgba(0,0,0,.4),
              inset 1px 0 0 rgba(255,255,255,.10), inset -1px 0 0 rgba(255,255,255,.10); }
.kbshot__phone img { width: 100%; height: auto; display: block;
  border-radius: 0 0 29px 29px; background: #1E1E20; }
.kbshot figcaption { text-align: center; font-size: 13px; line-height: 1.45;
  color: var(--ink-mute); margin-top: 14px; }
.band-dark .kbshot figcaption { color: #8aa0b8; }

/* ---------- Bandeau « vous etes sur Android » -------------------------------
   Injecte par main.js UNIQUEMENT si l'appareil est Android et qu'on n'est pas
   deja sur une page Android. Jamais de redirection automatique : on consulte
   souvent depuis son telephone pour installer sur son PC. Barre ancree en bas
   -> aucun decalage de mise en page, et on ne la confond pas avec un bandeau
   cookies (le site n'en pose aucun, c'est un argument de vente). */
.androidbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  background: #11202F; border-top: 2px solid var(--green-300);
  box-shadow: 0 -10px 30px -12px rgba(0,0,0,.55);
  transform: translateY(100%); transition: transform .3s ease; }
.androidbar.is-in { transform: none; }
.androidbar__ic { flex: 0 0 auto; width: 26px; height: 26px; color: var(--green-300); }
.androidbar__txt { flex: 1 1 auto; min-width: 0; font-size: 13.5px; line-height: 1.35;
  color: #dbe6f1; }
.androidbar__txt b { display: block; color: #fff; font-size: 14.5px; font-weight: 700; }
.androidbar__cta { flex: 0 0 auto; background: var(--green); color: #fff;
  font-weight: 700; font-size: 13.5px; text-decoration: none;
  padding: 9px 15px; border-radius: 10px; white-space: nowrap; }
.androidbar__x { flex: 0 0 auto; background: none; border: 0; cursor: pointer;
  color: #8aa0b8; font-size: 22px; line-height: 1; padding: 4px 6px; }
@media (max-width: 420px) {
  .androidbar { gap: 9px; padding-left: 11px; padding-right: 11px; }
  .androidbar__txt { font-size: 12.5px; }
  .androidbar__txt b { font-size: 13.5px; }
  .androidbar__cta { padding: 8px 12px; font-size: 12.5px; }
}

/* ============================================================
   NOUVEAUTÉS — bandeau d'accueil (.newsflash) + page liste (.news)
   Contenu généré par build.py depuis news.json (table `news` du VPS).
   ============================================================ */

/* Conteneur resserré : ~68 caractères par ligne, confort de lecture d'un article. */
.container--narrow { max-width: 760px; }

/* --- bandeau « dernière nouveauté » sur l'accueil --- */
.section--flash { padding-top: 34px; padding-bottom: 34px; }
.newsflash {
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: var(--radius);
  background: var(--bg-alt);
  padding: 22px 26px;
  box-shadow: var(--shadow-card);
}
.newsflash__title { font-size: 1.25rem; line-height: 1.3; margin: 6px 0 8px; }
.newsflash__title a { color: var(--ink); text-decoration: none; }
.newsflash__title a:hover { color: var(--blue); text-decoration: underline; }
.newsflash__lead { color: var(--ink-soft); margin: 0 0 12px; }
.newsflash__all { color: var(--blue); font-weight: 600; text-decoration: none; }
.newsflash__all:hover { text-decoration: underline; }

/* --- articles de la page Nouveautés --- */
.news { padding: 30px 0; border-bottom: 1px solid var(--line); }
.news:last-child { border-bottom: 0; }
.news__title { font-size: 1.5rem; line-height: 1.25; margin: 8px 0 14px; }
.news__img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius); margin: 0 0 16px;
  border: 1px solid var(--line);
}
.news__body { color: var(--ink-soft); }
.news__body p { margin: 0 0 14px; }
.news__body ul { margin: 0 0 14px; padding-left: 20px; }
.news__body li { margin: 0 0 6px; }
.news__body a { color: var(--blue); }
.news__body strong { color: var(--ink); }
.news__vide { color: var(--ink-mute); font-style: italic; }

/* --- métadonnées communes (date + étiquette de plateforme) --- */
.news__meta {
  display: flex; align-items: center; gap: 10px;
  font-size: .85rem; color: var(--ink-mute);
}
.news__tag {
  font-weight: 600; font-size: .75rem; letter-spacing: .02em;
  padding: 2px 9px; border-radius: 999px;
}
.news__tag--windows { background: var(--blue-tint); color: var(--blue-900); }
.news__tag--android { background: #e6f4ec; color: #1d6b4f; }

@media (max-width: 640px) {
  .newsflash { padding: 18px 18px; }
  .news__title { font-size: 1.3rem; }
}
.news__sep { border: 0; border-top: 1px solid var(--line-3); margin: 22px 0; }
/* Encart d'aparté : paragraphe ouvert par « ⚠ » (cf. _md_to_html dans build.py). Plus petit
   et en italique -> il se lit comme une note de l'auteur, pas comme le corps de l'article.
   Le gras interne (« **On est en pleine bêta.** ») reste gras, et devient donc gras italique. */
.news__note { font-size: .88em; font-style: italic; opacity: .82; }

/* Figures des actualités : images de démonstration + légende */
.news__fig { margin: 26px 0; }
.news__fig img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius); border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
/* Animation de démonstration : la source est CARRÉE (1024×1024), pour garder une large
   zone de dégradé autour de la scène — utile ailleurs (partages, vignettes sociales).
   Dans l'article, cette hauteur écraserait la colonne de lecture : on n'en montre qu'une
   fenêtre 1024×600 centrée. Le recadrage est fait ici, en CSS, et non à l'export : une
   seule source à régénérer, et le cadrage se change sans retoucher un pixel.
   `aspect-ratio` doit primer sur les attributs width/height du HTML, qui décrivent eux le
   fichier réel (1024×1024) ; c'est bien le cas, une règle CSS l'emporte sur l'attribut, et
   elle s'applique dès le premier rendu — donc sans décalage de mise en page. */
.news__fig img[src$="ltc-demo.webp"] {
  aspect-ratio: 1024 / 600; height: auto; object-fit: cover; object-position: center;
}
.news__fig figcaption {
  margin-top: 10px; font-size: .86rem; color: var(--ink-mute);
  text-align: center; font-style: italic;
}
.news__body > p + .news__fig { margin-top: 18px; }

/* ── Page article (Nouveautés) ────────────────────────────────────────────────
   Pas de bandeau de titre : on entre directement dans l'article, comme un site
   d'actualité. Colonne plus large que la lecture « narrow » (760) sans atteindre
   la pleine largeur : ~68-75 signes par ligne, l'optimum de lecture longue. */
.container--article { max-width: 860px; }
.section--article { padding-top: 26px; }

/* Masqué à l'écran, lu par les lecteurs d'écran et les moteurs. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* L'article gagne en respiration : c'est le seul contenu de la page. */
.container--article .news { padding-top: 0; }
.container--article .news__title { font-size: 1.95rem; line-height: 1.18; margin-bottom: 18px; }
.container--article .news__body { font-size: 1.06rem; line-height: 1.68; }
.container--article .news__body p { margin: 0 0 18px; }
.container--article .news__meta { margin-bottom: 6px; }

@media (max-width: 640px) {
  .container--article .news__title { font-size: 1.45rem; }
  .container--article .news__body { font-size: 1rem; }
}