/* Site Hexomail — charte de l'application (tailwind.config.js du client) :
   bleu « nest » d'Hexonest, neutres teintés d'encre (jamais de gris pur),
   cyan réservé à ce qui protège, Nunito pour le texte, Newsreader pour
   l'objet d'un message ouvert et rien d'autre. Aucune ressource externe. */

@font-face {
  font-family: "Nunito";
  src: url("/fonts/nunito-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 1000;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito";
  src: url("/fonts/nunito-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 200 1000;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: "Newsreader";
  src: url("/fonts/newsreader-latin-opsz-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --nest: #1668c9;
  --nest-deep: #0e4686;
  --nest-soft: #dbe8f8;
  --guard: #0b6f99;          /* cyan « protection », AA sur le papier clair */
  --guard-soft: #e8f6fc;
  --ink: #0a1f3d;
  --ink-2: #3d4a61;
  --ink-3: #5a6478;
  --line: #e2e0da;
  --paper: #fbfbf9;
  --sheet: #ffffff;
  --sheet-head: #f7f6f2;
  --focus: #1668c9;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --nest: #4a90e2;
    --nest-deep: #8db6ea;
    --nest-soft: #0e2a4d;
    --guard: #2bb3e8;
    --guard-soft: #0c2f40;
    --ink: #eef2f8;
    --ink-2: #c3cad6;
    --ink-3: #9aa3b2;
    --line: #22304a;
    --paper: #0a1424;
    --sheet: #0f1b30;
    --sheet-head: #13223b;
    --focus: #8db6ea;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --nest: #4a90e2; --nest-deep: #8db6ea; --nest-soft: #0e2a4d; --guard: #2bb3e8; --guard-soft: #0c2f40;
  --ink: #eef2f8; --ink-2: #c3cad6; --ink-3: #9aa3b2; --line: #22304a; --paper: #0a1424;
  --sheet: #0f1b30; --sheet-head: #13223b; --focus: #8db6ea; color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Nunito", "Helvetica Neue", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  font-feature-settings: "kern", "liga";
}

a { color: var(--nest); text-underline-offset: 0.18em; }
a:hover { color: var(--nest-deep); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--sheet); padding: 0.5rem 0.75rem; z-index: 10; }

.wrap { width: min(70rem, 100% - 2rem); margin-inline: auto; }

/* ---- En-tête ------------------------------------------------------------ */
.site-head { padding-block: 1.25rem; }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--ink); text-decoration: none; font-weight: 800; font-size: 1.2rem; letter-spacing: -0.01em; }
.brand img { width: 2rem; height: 2rem; }
.site-head nav a { color: var(--ink-2); text-decoration: none; font-weight: 600; margin-left: 1.25rem; }
.site-head nav a:hover { color: var(--nest); }

/* ---- Haut de page : la promesse, puis l'application elle-même ----------- */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Le haut de page tient dans la hauteur de l'écran, en-tête compris (4.5rem) :
   l'application prend la place qui reste sous le titre. */
.hero {
  display: flex;
  flex-direction: column;
  height: min(calc(100svh - 4.5rem), 60rem);
  min-height: 27rem;
  padding-block: clamp(0.75rem, 3.5svh, 2.75rem) clamp(1rem, 3svh, 2rem);
}
.hero-top { flex: none; margin-bottom: clamp(1.25rem, 4svh, 3.25rem); }
.hero-stage { flex: 1; min-height: 0; display: flex; }
.hero-side { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 3rem; margin-top: clamp(0.9rem, 2.5svh, 1.6rem); }
.hero-side .lead { max-width: 38rem; }
.hero-side .hero-meta { margin: 0; }
.hero h1 {
  font-size: clamp(2.2rem, min(6.6vw, 8.5svh), 5.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.032em;
  margin: 0;
}
.hero .lead { font-size: 1.1rem; color: var(--ink-2); margin: 0; }
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem; margin: 1.4rem 0 0; color: var(--ink-3); font-size: 0.95rem; }
.chip { border: 1px solid var(--line); background: var(--sheet); border-radius: 999px; padding: 0.2rem 0.85rem; font-weight: 700; color: var(--ink); }
.chip:last-of-type { margin-right: 0.4rem; }
.chip-soon { border-style: dashed; background: transparent; color: var(--ink-2); }

/* L'application, reproduite avec ses propres couleurs (src/index.css du
   client) : thème clair ou sombre selon celui du visiteur. */
.app {
  --app-nav: #0a1f3d; --app-nav-text: #e8e2d3; --app-nav-muted: #93a0b8; --app-nav-line: rgb(232 226 211 / 0.1); --app-nav-active: rgb(22 104 201 / 0.55);
  --app-surface: #ffffff; --app-canvas: #f4f1ea; --app-alt: #f1eee7; --app-selected: #e6eef9; --app-line: #e6e3dc;
  --app-text: #0a1f3d; --app-text-2: #46536a; --app-text-3: #6b7487; --app-accent: #1668c9; --app-accent-soft: #e6eef9;
  --app-privacy: #0d7fae; --app-privacy-soft: #e8f6fc;
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--app-text);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .app {
    --app-nav: #0a1220; --app-nav-muted: #8a93a6; --app-nav-line: rgb(232 226 211 / 0.08); --app-nav-active: rgb(74 144 226 / 0.28);
    --app-surface: #131c2e; --app-canvas: #0d1525; --app-alt: #1a2438; --app-selected: #15335b; --app-line: #212c41;
    --app-text: #f4f1ea; --app-text-2: #b7becd; --app-text-3: #8a93a6; --app-accent: #4a90e2; --app-accent-soft: #15335b;
    --app-privacy: #2bb3e8; --app-privacy-soft: rgb(43 179 232 / 0.12);
  }
}
:root[data-theme="dark"] .app {
  --app-nav: #0a1220; --app-nav-muted: #8a93a6; --app-nav-line: rgb(232 226 211 / 0.08); --app-nav-active: rgb(74 144 226 / 0.28);
  --app-surface: #131c2e; --app-canvas: #0d1525; --app-alt: #1a2438; --app-selected: #15335b; --app-line: #212c41;
  --app-text: #f4f1ea; --app-text-2: #b7becd; --app-text-3: #8a93a6; --app-accent: #4a90e2; --app-accent-soft: #15335b;
  --app-privacy: #2bb3e8; --app-privacy-soft: rgb(43 179 232 / 0.12);
}
.app p, .app ul { margin: 0; }
.app ul { list-style: none; padding: 0; }
.app-screen {
  display: grid;
  grid-template-columns: 13.5rem 19.5rem minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  flex: 1;
  min-height: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 2px 4px rgb(10 31 61 / 0.06), 0 40px 80px -30px rgb(10 31 61 / 0.45), 0 0 0 8px rgb(22 104 201 / 0.06);
}

.app-nav { background: var(--app-nav); color: var(--app-nav-text); padding: 0.9rem 0.65rem; display: flex; flex-direction: column; gap: 0.75rem; }
.app-brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 800; font-size: 0.95rem; padding-inline: 0.3rem; }
.app-write { display: flex; align-items: center; justify-content: center; gap: 0.4rem; background: #1668c9; color: #fff; font-weight: 700; border-radius: 9px; padding: 0.55rem; box-shadow: 0 6px 16px -6px rgb(22 104 201 / 0.7); }
.app-accounts { display: flex; gap: 0.45rem; padding-inline: 0.2rem; }
.hx { display: grid; place-items: center; width: 1.75rem; height: 1.9rem; font-size: 0.6rem; font-weight: 800; color: #fff; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.hx-all { background: var(--app-nav-active); color: var(--app-nav-text); font-size: 0.85rem; }
.hx-1 { background: #c27a34; } .hx-2 { background: #0f8a5f; } .hx-3 { background: #e07a10; }
.app-who { display: grid; color: var(--app-nav-muted); font-size: 0.72rem; padding: 0 0.3rem 0.6rem; border-bottom: 1px solid var(--app-nav-line); }
.app-who b { color: var(--app-nav-text); font-size: 0.8rem; }
.app-folders { display: grid; gap: 0.1rem; min-height: 0; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.app-nav { overflow: hidden; }
.app-folders li { display: flex; align-items: center; gap: 0.6rem; padding: 0.42rem 0.55rem; border-radius: 7px; color: var(--app-nav-text); }
.app-folders li .i { color: var(--app-nav-muted); font-size: 0.95rem; }
.app-folders li.is-on { background: var(--app-nav-active); font-weight: 800; }
.app-folders i { margin-left: auto; font-style: normal; font-weight: 800; font-size: 0.7rem; }

.app-list { background: var(--app-surface); border-right: 1px solid var(--app-line); overflow: hidden; }
.app-list li { overflow: hidden; }
.app-search { display: flex; align-items: center; gap: 0.5rem; margin: 0.75rem 0.75rem 0 !important; padding: 0.45rem 0.65rem; border-radius: 8px; background: var(--app-alt); color: var(--app-text-3); }
.app-title { font-weight: 800; font-size: 1.05rem; padding: 0.8rem 0.9rem 0.6rem; border-bottom: 1px solid var(--app-line); }
.app-title span { font-weight: 500; font-size: 0.72rem; color: var(--app-text-3); margin-left: 0.5rem; }
.app-list li { display: flex; gap: 0.65rem; padding: 0.7rem 0.9rem 0.7rem 0.8rem; border-bottom: 1px solid var(--app-line); border-left: 3px solid transparent; position: relative; }
.app-list li > div { min-width: 0; flex: 1; }
.app-list li p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--app-text-2); }
.app-list li p:first-child { display: flex; justify-content: space-between; gap: 0.5rem; color: var(--app-text); }
.app-list li b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.app-list li time { color: var(--app-text-3); font-size: 0.7rem; }
.app-list li.unread b, .app-list li.unread .subj { font-weight: 800; color: var(--app-text); }
.app-list li.unread time { color: var(--app-accent); font-weight: 800; }
.app-list li.unread::before { content: ""; position: absolute; left: 0.3rem; top: 1.3rem; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--app-accent); }
.app-list li.is-on { background: var(--app-selected); }
.app-list .addr { font-size: 0.7rem; color: var(--app-text-3); }
.app-list .crypt { display: flex; align-items: center; gap: 0.3rem; font-size: 0.7rem; font-weight: 800; color: var(--app-privacy); }
.acc-1 { border-left-color: #c27a34 !important; } .acc-2 { border-left-color: #0f8a5f !important; } .acc-3 { border-left-color: #e07a10 !important; }
.av { display: grid; place-items: center; flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%; color: #fff; font-weight: 700; font-size: 0.72rem; }
.av-jd { background: #8a5a3c; } .av-ml { background: #7c3aed; } .av-gq { background: #0f766e; } .av-sl { background: #be3a5a; } .av-mh { background: #c2410c; }

.app-read { position: relative; display: flex; flex-direction: column; background: var(--app-canvas); padding: 0.75rem 1.5rem 4rem; overflow: hidden; }
.app-msg { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* Le volet de lecture s'adapte à sa propre hauteur (pas à celle de l'écran) :
   ce qui ne tient pas est retiré entier plutôt que coupé. */
.app-read { container-type: size; }
@container (max-height: 30rem) { .app-read .app-img { display: none; } }
@container (max-height: 25rem) { .app-msg > .app-from { display: none; } }
@container (max-height: 21rem) { .app-msg > .app-tools { display: none; } .app-subject { margin-top: 0.4rem !important; } }
@container (max-height: 23rem) { .app-msg > .app-body { display: none; } .app-msg > .app-shield { border-radius: 10px; border-bottom: 1px solid var(--app-line); } }
@container (max-height: 15.5rem) { .app-msg > .app-shield, .app-msg > .app-sign { display: none; } }
@container (max-height: 13rem) { .app-msg > .app-badge { display: none; } }
.app-msg > * { flex-shrink: 0; }
.app-msg > .app-body { min-height: 0; overflow: hidden; }
.app-msg-2 { position: absolute; inset: 0; padding: inherit; padding-bottom: 1rem; background: var(--app-canvas); opacity: 0; }
.app-file { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; padding: 0.7rem 0.8rem; border: 1px solid var(--app-line); border-radius: 10px; background: var(--app-surface); max-width: 24rem; }
.app-file-icon { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 8px; background: var(--app-privacy-soft); color: var(--app-privacy); font-size: 1.05rem; }
.app-file-icon > span, .app-file p > span { grid-area: 1 / 1; }
.app-file p { display: grid; flex: 1; min-width: 0; }
.app-file b { grid-row: 1; font-weight: 700; }
.app-file p > span { grid-row: 2; font-size: 0.72rem; color: var(--app-text-3); }
.app-file .shut { opacity: 0; }
.app-file p > .open { color: var(--app-privacy); font-weight: 700; }
.app-open { padding: 0.35rem 0.8rem; border-radius: 7px; background: #1668c9; color: #fff; font-weight: 700; }
.app-sign { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.6rem !important; color: var(--app-privacy); font-weight: 700; font-size: 0.75rem; }
.app-msg-2 .app-body { margin-top: 0.9rem; border-radius: 10px; }
.app-empty { position: absolute; inset: 0; display: grid; place-items: center; font-family: "Newsreader", "Iowan Old Style", Georgia, serif; font-size: 1.4rem; color: var(--app-text-2); opacity: 0; }
.app-tools { display: flex; gap: 1.1rem; color: var(--app-text-2); padding-bottom: 0.7rem; border-bottom: 1px solid var(--app-line); margin: 0 -1.5rem !important; padding-inline: 1.5rem; }
.app-tools span { display: flex; align-items: center; gap: 0.35rem; }
.app-tools em { font-style: normal; }
.app-subject { font-family: "Newsreader", "Iowan Old Style", Georgia, serif; font-size: 1.65rem; font-weight: 500; line-height: 1.15; margin-top: 1rem !important; letter-spacing: -0.01em; }
.app-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.5rem !important; padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--app-privacy-soft); color: var(--app-privacy); font-weight: 800; font-size: 0.8rem; }
.app-from { display: flex; align-items: center; gap: 0.65rem; margin-top: 0.85rem; }
.app-from p { display: grid; color: var(--app-text-3); font-size: 0.72rem; flex: 1; }
.app-from b { color: var(--app-text); font-size: 0.85rem; }
.app-from time { color: var(--app-text-3); font-size: 0.72rem; align-self: start; }
.app-shield { display: flex; gap: 0.6rem; margin-top: 0.9rem; padding: 0.7rem 0.85rem; border-radius: 10px 10px 0 0; background: var(--app-privacy-soft); border: 1px solid var(--app-line); border-bottom: 0; }
.app-shield > .i { color: var(--app-privacy); font-size: 1.1rem; margin-top: 0.1rem; }
.app-shield span { display: block; color: var(--app-text-3); font-size: 0.72rem; }
.app-body { background: var(--app-surface); border: 1px solid var(--app-line); border-radius: 0 0 10px 10px; padding: 0.85rem; display: grid; gap: 0.7rem; color: var(--app-text-2); }
.app-img { display: grid; place-items: center; height: 3.4rem; border: 1.5px dashed var(--app-privacy); border-radius: 8px; color: var(--app-privacy); font-weight: 700; background: repeating-linear-gradient(-45deg, transparent 0 9px, var(--app-privacy-soft) 9px 18px); }
.app-body u { color: var(--app-accent); text-underline-offset: 0.15em; }
.app-quick { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.9rem !important; color: var(--app-text-3); }
.app-quick span { border: 1px solid var(--app-line); background: var(--app-surface); color: var(--app-text); border-radius: 999px; padding: 0.3rem 0.75rem; }
.app-quick .is-sent { border-color: var(--app-accent); background: var(--app-accent-soft); }
.app-toast { position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%); display: flex; align-items: center; gap: 0.9rem; padding: 0.55rem 0.6rem 0.55rem 0.95rem; border-radius: 10px; background: #0a1f3d; color: #f4f1ea; box-shadow: 0 10px 24px -8px rgb(0 0 0 / 0.5); white-space: nowrap; }
.app-toast b { color: #8db6ea; }
.app-toast i { font-style: normal; font-size: 0.7rem; color: #93a0b8; border-left: 1px solid rgb(232 226 211 / 0.15); padding-left: 0.6rem; }
.app-count { position: absolute; left: 0.6rem; right: 0.6rem; bottom: 0.25rem; height: 2px; border-radius: 2px; background: #8db6ea; transform-origin: left; transform: scaleX(0.6); }

/* Les fonctionnalités, en légende sous la colonne qu'elles décrivent. */
.app-notes {
  flex: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 0 !important;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink-2);
}
.app-notes li { position: relative; padding: clamp(1.3rem, 3svh, 2.4rem) 1.25rem 0 1.1rem; }
.app-notes li::before { content: ""; position: absolute; left: 1.1rem; right: 1.25rem; top: 0.55rem; height: 3px; border-radius: 3px; background: var(--line); }
.app-notes li::after { content: ""; position: absolute; left: 1.1rem; right: 1.25rem; top: 0.55rem; height: 3px; border-radius: 3px; background: var(--nest); transform-origin: left; transform: scaleX(0); }
.app-notes span { display: block; }
.app-notes b { display: block; color: var(--ink); font-weight: 800; font-size: 1rem; margin-bottom: 0.15rem; }

/* ---- Sections ------------------------------------------------------------ */
section.block { padding-block: 3.5rem; border-top: 1px solid var(--line); }
.block-grid { display: grid; grid-template-columns: minmax(12rem, 22rem) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: start; }
.block h2 { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; letter-spacing: -0.01em; margin: 0; font-weight: 800; }
.block .lead { color: var(--ink-2); margin: 0.75rem 0 0; }
.block .aside { color: var(--ink-3); font-size: 0.9rem; margin: 1rem 0 0; }
.mini-data { width: 100%; margin: 1.5rem 0 0; border-collapse: collapse; font-size: 0.92rem; }
.mini-data caption { text-align: left; font-weight: 800; padding-bottom: 0.4rem; }
.mini-data th, .mini-data td { text-align: left; padding: 0.45rem 0; border-top: 1px solid var(--line); vertical-align: top; }
.mini-data th { font-weight: 500; color: var(--ink-2); padding-right: 1rem; }
.mini-data td { font-weight: 800; color: var(--guard); white-space: nowrap; }
.cta, .nav-cta { display: inline-block; border-radius: 10px; background: #1668c9; color: #fff !important; font-weight: 800; text-decoration: none; }
.cta { padding: 0.6rem 1.15rem; margin-right: 0.9rem; box-shadow: 0 8px 20px -10px rgb(22 104 201 / 0.8); }
.nav-cta { padding: 0.15rem 0.85rem; line-height: 1.6; }
.cta:hover, .nav-cta:hover { background: #1157a8; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.block-grid > .mini-data { margin: 0; font-size: 1rem; }
.block-grid > .mini-data th, .block-grid > .mini-data td { padding: 0.7rem 0; }
.soon-tag { display: inline-block; margin: 0.75rem 0 0; padding: 0.1rem 0.7rem; border: 1px dashed var(--line); border-radius: 999px; color: var(--ink-2); font-weight: 700; font-size: 0.85rem; }
.block .soon-tag + .lead { margin-top: 0.6rem; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; }
.facts li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: 0.85rem; max-width: 40rem; }
.facts li::before {
  content: "";
  width: 0.95rem; height: 1.05rem; margin-top: 0.35rem;
  background: var(--nest);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.facts.guard li::before { background: var(--guard); }
.facts b { font-weight: 800; }
.facts p { margin: 0.2rem 0 0; color: var(--ink-2); }

.platforms { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }
.platform { margin: 0; border: 1px solid var(--line); background: var(--sheet); border-radius: 10px; padding: 0.7rem 1rem; font-weight: 700; }
.platform-break { flex-basis: 100%; }
.platform-soon { border-style: dashed; background: transparent; }
.platform span { display: block; font-weight: 500; font-size: 0.9rem; color: var(--ink-3); }

/* Être prévenu de la sortie : formulaire de la liste « Nouvelles d'Hexomail » (hexo-listes). */
.notify { margin-top: 2rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: 12px; background: var(--sheet); max-width: 40rem; }
.notify h3 { margin: 0; font-size: 1.15rem; font-weight: 800; }
.notify-hint { margin: 0.35rem 0 0; color: var(--ink-2); }
.notify-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.75rem; margin-top: 1rem; }
.notify label { display: block; font-weight: 600; font-size: 0.92rem; }
.notify .optional { font-weight: 400; color: var(--ink-3); }
.notify input[type="email"], .notify input[type="text"] { display: block; width: 100%; margin-top: 0.35rem; padding: 0.65rem 0.75rem; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); font: inherit; font-weight: 400; }
.notify input:focus-visible, .notify button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.notify-consent { display: flex !important; gap: 0.55rem; align-items: flex-start; margin-top: 1rem; font-weight: 400 !important; color: var(--ink-2); }
.notify-consent input { margin-top: 0.3rem; flex: none; width: 1.05rem; height: 1.05rem; accent-color: var(--nest); }
.notify button { margin-top: 1rem; padding: 0.7rem 1.2rem; border: 0; border-radius: 8px; background: var(--nest); color: var(--sheet); font: inherit; font-weight: 700; cursor: pointer; }
.notify button:hover { filter: brightness(1.08); }
.notify-legal { margin: 0.9rem 0 0; font-size: 0.82rem; color: var(--ink-3); }
.notify-legal a { color: var(--nest); }
/* Champ piège (robots) : hors écran, jamais visible ni atteint au clavier. */
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Pages légales -------------------------------------------------------- */
.doc { padding-block: 2rem 4rem; }
.doc article { max-width: 44rem; }
.doc h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 0.5rem; }
.doc .updated { color: var(--ink-3); margin: 0 0 2rem; }
.doc h2 { font-size: 1.3rem; margin: 2.25rem 0 0.5rem; }
.doc h3 { font-size: 1.05rem; margin: 1.5rem 0 0.35rem; }
.doc table { border-collapse: collapse; width: 100%; font-size: 0.95rem; margin: 0.75rem 0; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--line); }
.doc th { color: var(--ink-2); font-weight: 700; }
.doc .short-answer { font-size: 1.3rem; font-weight: 800; line-height: 1.35; margin: 0 0 1rem; }
.paths { list-style: none; padding: 0; margin: 0.5rem 0 1rem; display: grid; gap: 0.5rem; font-size: 0.92rem; }
.paths li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; }
.paths b { min-width: 9.5rem; }
.paths span { border: 1px solid var(--line); background: var(--sheet); border-radius: 999px; padding: 0.1rem 0.7rem; }
.paths i { font-style: normal; color: var(--ink-3); }
.toc { margin: 0 0 1.5rem; padding: 0.9rem 1.1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--sheet); font-size: 0.92rem; }
.toc p { margin: 0 0 0.4rem; font-weight: 800; }
.toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; }
.summary { display: grid; grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr); gap: 0.5rem 1.25rem; margin: 0.5rem 0 1rem; font-size: 0.95rem; }
.summary dt { font-weight: 800; }
.summary dd { margin: 0; color: var(--ink-2); }
.summary dt::before { content: ""; display: inline-block; width: 0.6rem; height: 0.68rem; margin-right: 0.5rem; background: var(--guard); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.summary dt.warn::before { background: var(--ink-3); }
@media (max-width: 760px) { .summary { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; } .summary dd { margin-bottom: 0.6rem; } }
.back-cta { margin-top: 2.5rem; }
.back-cta a { display: inline-block; padding: 0.55rem 1.1rem; border-radius: 10px; background: #1668c9; color: #fff; font-weight: 800; text-decoration: none; }
.back-cta a:hover { color: #fff; background: #1157a8; }
/* Schéma de la page « Comment ça marche » : le chemin des messages. */
.flow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(6rem, 0.8fr) minmax(0, 1.1fr) minmax(6rem, 0.8fr) minmax(0, 1fr); align-items: center; margin: 2rem 0 0.5rem; font-size: 0.9rem; }
.flow-node { border: 1px solid var(--line); background: var(--sheet); border-radius: 12px; padding: 0.8rem 0.9rem; }
.flow-node b { display: block; }
.flow-node span { display: block; color: var(--ink-3); font-size: 0.82rem; line-height: 1.35; margin-top: 0.2rem; }
.flow-main { border-color: var(--nest); box-shadow: 0 0 0 3px var(--nest-soft); }
.flow-link { position: relative; text-align: center; color: var(--ink-2); font-size: 0.78rem; line-height: 1.3; padding: 0 0.5rem 1.1rem; }
.flow-link::after { content: ""; position: absolute; left: 0.3rem; right: 0.3rem; bottom: 0.45rem; height: 2px; background: var(--nest); border-radius: 2px; }
.flow-optional::after { background: none; border-top: 2px dashed var(--ink-3); height: 0; }
@media (max-width: 760px) {
  .flow { grid-template-columns: minmax(0, 1fr); }
  .flow-link { padding: 0.9rem 0 0.9rem 1.4rem; text-align: left; }
  .flow-link::after { left: 0.6rem; right: auto; top: 0.2rem; bottom: 0.2rem; width: 2px; height: auto; }
  .flow-optional::after { border-top: 0; border-left: 2px dashed var(--ink-3); width: 0; }
}
.todo { background: #fff3c4; color: #5c4400; padding: 0 0.25em; border-radius: 3px; }

/* ---- Pied de page ---------------------------------------------------------- */
.site-foot { border-top: 1px solid var(--line); padding-block: 2rem 2.5rem; color: var(--ink-3); font-size: 0.95rem; }
.site-foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }
.site-foot nav a { color: var(--ink-2); margin-right: 1.25rem; }

/* ---- Tablette et téléphone : l'application devient un téléphone, les
   légendes s'empilent à sa droite comme des onglets. -------------------------- */
@media (max-width: 1080px) {
  .app { flex-direction: row; align-items: stretch; justify-content: center; gap: clamp(1rem, 4vw, 2.75rem); }
  .app-screen { display: block; position: relative; flex: none; width: min(21rem, 58%); border: 7px solid #05080f; border-radius: 28px; }
  .app-nav, .app-empty { display: none; }
  .app-list { height: 100%; border-right: 0; }
  .app-read { position: absolute; inset: 0; padding: 0.75rem 1rem 4rem; }
  .app-tools { margin-inline: -1rem !important; padding-inline: 1rem; }
  .app-subject { font-size: 1.4rem; }
  .app-file { max-width: none; }
  .app-notes { display: flex; flex-direction: column; justify-content: center; gap: clamp(1rem, 3svh, 1.75rem); max-width: 17rem; }
  .app-notes li { padding: 0.15rem 0 0.15rem 1rem; }
  .app-notes li::before, .app-notes li::after { left: 0; right: auto; top: 0; bottom: 0; width: 3px; height: auto; transform-origin: top; }
  .app-notes li::after { transform: scaleY(0); }
}
@media (max-width: 520px) {
  /* L'application garde ses proportions : on la réduit plutôt que de la tasser. */
  .app-screen { width: 62%; zoom: 0.82; }
  .app-tools em { display: none; }
  .app-quick span { white-space: nowrap; }
  .app-notes span { display: none; }
  .app-notes b { font-size: 0.95rem; line-height: 1.25; }
}
@media (max-width: 420px) {
  .app { gap: 0.9rem; }
  .app-screen { width: 66%; zoom: 0.72; border-width: 9px; }
  .app-notes li { padding-left: 0.7rem; }
}

/* ---- Écrans bas (portables 768 px) : l'application garde sa place -------- */
@media (min-width: 1081px) and (max-height: 760px) {
  .app-notes { display: none; }
  .app-read { padding-bottom: 3.6rem; }
  .app-toast { bottom: 0.7rem; }
}

/* ---- Téléphone ------------------------------------------------------------ */
@media (max-width: 760px) {
  body { font-size: 1rem; }
  .site-head nav a { margin-left: 0.9rem; }
  .hero { height: calc(100svh - 4.5rem); min-height: 30rem; }
  .hero .lead { font-size: 1rem; }
  .block-grid { grid-template-columns: minmax(0, 1fr); }
  .site-head nav a:first-child { display: none; }
}

/* ---- Animation du haut de page ----------------------------------------------
   Une séquence de 18 s en boucle, dans l'ordre des légendes : un mail arrive
   dans la boîte unifiée, ses traceurs sont bloqués, on répond en un clic, puis
   un fichier chiffré s'ouvre sur l'appareil. Sans animation, l'état final de la
   première scène reste affiché. */
@media (prefers-reduced-motion: no-preference) {
  .app { --loop: 18s; animation: arrive 0.6s ease-out both; }
  @keyframes arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

  .app-list li.is-new { animation: hx-row var(--loop) ease-in-out infinite; }
  .app-list li.is-crypt { animation: hx-sel2 var(--loop) ease-in-out infinite; }
  .app-list .crypt .i { animation: hx-lock var(--loop) ease-in-out infinite; }
  .app-empty { animation: hx-empty var(--loop) linear infinite; }
  .app-msg { animation: hx-msg var(--loop) ease-out infinite; }
  .app-msg-2 { animation: hx-msg2 var(--loop) ease-out infinite; }
  .app-badge { animation: hx-pop var(--loop) ease-out infinite; }
  .app-shield, .app-img { animation: hx-shield var(--loop) ease-out infinite; }
  .app-quick .is-sent { animation: hx-press var(--loop) ease-out infinite; }
  .app-toast { animation: hx-toast var(--loop) cubic-bezier(0.2, 0.8, 0.2, 1) infinite; }
  .app-count { animation: hx-count var(--loop) linear infinite; }
  .app-open { animation: hx-open var(--loop) ease-out infinite; }
  .app-file { animation: hx-file var(--loop) ease-out infinite; }
  .app-file .shut { animation: hx-shut var(--loop) linear infinite; }
  .app-file .open { animation: hx-opened var(--loop) linear infinite; }
  .app-sign { animation: hx-sign var(--loop) ease-out infinite; }
  .app-notes li::after { animation: var(--lit) var(--loop) linear infinite; }
  .app-notes li:nth-child(1) { --lit: hx-lit-1; }
  .app-notes li:nth-child(2) { --lit: hx-lit-2; }
  .app-notes li:nth-child(3) { --lit: hx-lit-3; }
  .app-notes li:nth-child(4) { --lit: hx-lit-4; }

  /* 1. Toutes vos adresses : 5 à 20 % */
  @keyframes hx-row {
    0%, 6% { max-height: 0; padding-block: 0; border-bottom-width: 0; opacity: 0; background: transparent; }
    11% { max-height: 6rem; padding-block: 0.7rem; border-bottom-width: 1px; opacity: 1; background: transparent; }
    14%, 60% { max-height: 6rem; padding-block: 0.7rem; border-bottom-width: 1px; opacity: 1; background: var(--app-selected); }
    63%, 93% { max-height: 6rem; padding-block: 0.7rem; border-bottom-width: 1px; opacity: 1; background: transparent; }
    98%, 100% { max-height: 0; padding-block: 0; border-bottom-width: 0; opacity: 0; background: transparent; }
  }
  @keyframes hx-empty { 0%, 13% { opacity: 1; } 16%, 95% { opacity: 0; } 99%, 100% { opacity: 1; } }
  @keyframes hx-msg { 0%, 14% { opacity: 0; transform: translateY(8px); } 19%, 60% { opacity: 1; transform: none; } 63%, 100% { opacity: 0; transform: none; } }
  /* 2. Traceurs bloqués : 21 à 37 % */
  @keyframes hx-pop { 0%, 21% { opacity: 0; transform: scale(0.6); } 23.5% { opacity: 1; transform: scale(1.1); } 25%, 100% { opacity: 1; transform: none; } }
  @keyframes hx-shield { 0%, 24% { opacity: 0; transform: translateY(-6px); } 28%, 100% { opacity: 1; transform: none; } }
  /* 3. Réponse en un clic : 37 à 61 % */
  @keyframes hx-press {
    0%, 37% { background: var(--app-surface); border-color: var(--app-line); transform: none; }
    38.2% { transform: scale(0.92); }
    39.5%, 100% { background: var(--app-accent-soft); border-color: var(--app-accent); transform: none; }
  }
  @keyframes hx-toast {
    0%, 39.5% { opacity: 0; transform: translate(-50%, 160%); }
    42%, 58% { opacity: 1; transform: translate(-50%, 0); }
    61%, 100% { opacity: 0; transform: translate(-50%, 160%); }
  }
  @keyframes hx-count { 0%, 42% { transform: scaleX(1); } 58%, 100% { transform: scaleX(0); } }
  /* 4. Fichiers chiffrés : 62 à 93 % */
  @keyframes hx-sel2 { 0%, 60% { background: transparent; } 63%, 92% { background: var(--app-selected); } 96%, 100% { background: transparent; } }
  @keyframes hx-lock { 0%, 61% { transform: none; } 63% { transform: scale(1.5); } 65%, 100% { transform: none; } }
  @keyframes hx-msg2 { 0%, 63% { opacity: 0; transform: translateY(8px); } 67%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
  @keyframes hx-open { 0%, 73% { transform: none; opacity: 1; } 74.5% { transform: scale(0.9); opacity: 1; } 76%, 100% { transform: none; opacity: 0; } }
  @keyframes hx-file { 0%, 75% { border-color: var(--app-line); } 77%, 100% { border-color: var(--app-privacy); } }
  @keyframes hx-shut { 0%, 75% { opacity: 1; } 77%, 100% { opacity: 0; } }
  @keyframes hx-opened { 0%, 75% { opacity: 0; } 77%, 100% { opacity: 1; } }
  @keyframes hx-sign { 0%, 78% { opacity: 0; transform: translateY(-4px); } 81%, 100% { opacity: 1; transform: none; } }

  /* Barre de l'étape en cours : se remplit pendant sa scène. */
  @keyframes hx-lit-1 { 0%, 5% { transform: scaleX(0); } 20% { transform: scaleX(1); } 21%, 100% { transform: scaleX(0); } }
  @keyframes hx-lit-2 { 0%, 21% { transform: scaleX(0); } 37% { transform: scaleX(1); } 38%, 100% { transform: scaleX(0); } }
  @keyframes hx-lit-3 { 0%, 38% { transform: scaleX(0); } 61% { transform: scaleX(1); } 62%, 100% { transform: scaleX(0); } }
  @keyframes hx-lit-4 { 0%, 62% { transform: scaleX(0); } 93% { transform: scaleX(1); } 94%, 100% { transform: scaleX(0); } }

  /* Sur tablette et téléphone, le message glisse par-dessus la liste, comme
     dans l'app. */
  @media (max-width: 1080px) {
    .app-msg { animation: none; }
    .app-read { animation: hx-slide var(--loop) cubic-bezier(0.3, 0.7, 0.2, 1) infinite; }
    .app-msg-2 { animation: hx-msg2-phone var(--loop) linear infinite; }
    .app-notes li:nth-child(1) { --lit: hx-litv-1; }
    .app-notes li:nth-child(2) { --lit: hx-litv-2; }
    .app-notes li:nth-child(3) { --lit: hx-litv-3; }
    .app-notes li:nth-child(4) { --lit: hx-litv-4; }
    @keyframes hx-litv-1 { 0%, 5% { transform: scaleY(0); } 20% { transform: scaleY(1); } 21%, 100% { transform: scaleY(0); } }
    @keyframes hx-litv-2 { 0%, 21% { transform: scaleY(0); } 37% { transform: scaleY(1); } 38%, 100% { transform: scaleY(0); } }
    @keyframes hx-litv-3 { 0%, 38% { transform: scaleY(0); } 61% { transform: scaleY(1); } 62%, 100% { transform: scaleY(0); } }
    @keyframes hx-litv-4 { 0%, 62% { transform: scaleY(0); } 93% { transform: scaleY(1); } 94%, 100% { transform: scaleY(0); } }
    /* Le message glisse, revient à la liste pour ouvrir le fichier chiffré. */
    @keyframes hx-slide {
      0%, 13% { transform: translateX(100%); }
      18%, 59% { transform: none; }
      62.5%, 64.5% { transform: translateX(100%); }
      69%, 93% { transform: none; }
      98%, 100% { transform: translateX(100%); }
    }
    @keyframes hx-msg2-phone { 0%, 62% { opacity: 0; } 62.5%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
  }
}