/* Linnotte — page d'accueil.

   SOMMAIRE — le fichier suit l'ordre de la page, de haut en bas.
     1. Jetons ............ couleurs, tailles de texte, espaces, rayons, ombres, mouvements
     2. Socle ............. remise à zéro, corps de page
     3. Textes ............ titres, chapô, notes, étiquettes
     4. Composants ........ ce qui sert à plusieurs sections (cartes, pastilles, fiche, notifications…)
     5. Décor fixe ........ menu, petit sondage, citation du jour
     6. Gabarit ........... la colonne de la page, les blocs
     7. Sections .......... une par une, dans l'ordre de index.html
     7 bis. Griffonnages et animations
     8. Pages légales
     9. « Réduire les animations »

   RÈGLES
     · Un changement d'ensemble (une couleur, une taille de texte, un arrondi) se fait dans les
       jetons, jamais section par section.
     · Chaque section porte ses propres règles pour écrans larges, juste sous ses règles de base.
       Le seuil est partout le même : 880px (une requête @media ne peut pas lire un jeton).
     · Les noms sont les mêmes dans les trois fichiers : la section « formules » est
       <section class="formules"> dans index.html, « 7.6 Les formules » ici et dans app.js.
*/

/* ══ 1. JETONS ═══════════════════════════════════════════════════════════════════════════ */
/* Les couleurs, les espaces et les rayons reprennent ceux de l'app (src/constants/theme.ts). */
:root {
  /* Couleurs */
  --fond: #FFFAF4;
  --fond-secondaire: #F1E7DB;
  --element: #FFFFFF;
  --texte: #262520;
  --texte-doux: #545454;
  --sur-fonce: #FFFFFF;
  --cta: #262520;
  --bord-focus: #262520;
  --bord-controle: #8C8B85;
  --bord-leger: #C7C6C1;
  --bord-subtil: #E3E2DE;
  --rose: #FEB4D1;
  --rose-clair: #FFE9F1;
  --lavande: #6967D8;
  --vert: #72CBA5;
  /* Sur la carte noire : le texte atténué et le filet entre deux lignes. */
  --sur-fonce-doux: #C7C6C1;
  --filet-fonce: rgba(255, 255, 255, .12);

  /* Tailles de texte. Les titres s'adaptent à la largeur de l'écran. */
  --t-titre: clamp(34px, 5.2vw, 58px);
  --t-h2: clamp(28px, 4vw, 48px);
  --t-carte: 20px;   /* le texte des cartes : les chiffres, les titres des étapes */
  --t-xs: 11px; --t-sm: 12px; --t-md: 13px; --t-lg: 14px; --t-xl: 15px; --t-2xl: 16px;

  /* Espaces et rayons */
  --s4: 4px; --s8: 8px; --s12: 12px; --s16: 16px; --s20: 20px; --s24: 24px;
  --s32: 32px; --s40: 40px; --s48: 48px; --s64: 64px; --s96: 96px;
  --r-md: 8px; --r-xl: 16px; --r-3xl: 24px; --r-carte: 32px; --r-full: 999px;

  /* Ombres */
  --ombre-fine: 0 1px 2px rgba(38, 37, 32, .04), 0 6px 20px rgba(38, 37, 32, .06);
  --ombre-haute: 0 2px 4px rgba(38, 37, 32, .04), 0 24px 56px rgba(38, 37, 32, .12);
  --ombre-douce: 0 1px 2px rgba(38, 37, 32, .03), 0 10px 28px -10px rgba(38, 37, 32, .14), 0 24px 48px -24px rgba(38, 37, 32, .10);   /* les cartes de l'ouverture, posées sur le rose */

  /* Mouvements */
  --elan: cubic-bezier(.22, 1, .36, 1);        /* l'arrivée douce, partout */
  --ressort: cubic-bezier(.34, 1.36, .64, 1);   /* un léger rebond, pour ce qui saute */
  --trait: #3B3A33;   /* le trait des accessoires des oiseaux (CouleursOiseaux.trait dans l'app) */

  /* Police et largeurs */
  --police: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --large: 1216px;
  --marge: 16px;
  --dedans: 24px;   /* le retrait intérieur d'une grande carte */
  --flou: 0px;      /* le flou des apparitions : aucun sur téléphone, pour la fluidité */
}
@media (min-width: 880px) { :root { --marge: 32px; --dedans: 48px; --flou: 8px; } }
/* Les coins continus d'iOS (lissage à 100 %) : le navigateur qui sait les dessiner les prend, avec
   des rayons plus grands pour garder la même allure ; les autres gardent l'arrondi simple.
   Le menu reste à l'arrondi simple : il épouse celui du badge App Store. */
@supports (corner-shape: squircle) {
  :root { --r-md: 12px; --r-xl: 24px; --r-3xl: 36px; --r-carte: 48px; }
  .carte, .chiffre, .etape, .vignette, .tableau, .alerte, .trois,
  .citation, .citation-oiseau, .sondage, .mot-du-nid, .legal .marque img { corner-shape: squircle; }
}

/* ══ 2. SOCLE ════════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 96px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police);
  font-weight: 300;
  font-size: var(--t-xl);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
strong { font-weight: 700; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--bord-focus); outline-offset: 3px; border-radius: var(--r-md); }

.evitement { position: absolute; left: -999px; top: 0; background: var(--cta); color: var(--sur-fonce); padding: var(--s12) var(--s16); z-index: 50; }
.evitement:focus { left: var(--s16); top: var(--s16); }
.masque { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* La réserve de dessins (logo, icônes), invisible : chaque <use> de la page y puise. */
.reserve { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Une icône au trait, comme celles d'Iconoir dans l'app : elle prend la couleur du texte. */
.ic { flex: none; width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ══ 3. TEXTES ═══════════════════════════════════════════════════════════════════════════ */
h2 { font-weight: 700; font-size: var(--t-h2); line-height: 1.16; letter-spacing: -.03em; text-wrap: balance; }
h3 { font-weight: 700; font-size: var(--t-carte); line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
.chapo { font-weight: 300; font-size: var(--t-lg); line-height: 1.55; color: var(--texte-doux); max-width: 34em; text-wrap: pretty; }
.chapo strong { color: var(--texte); }
.note { font-size: var(--t-xs); line-height: 1.5; color: var(--texte-doux); }

/* L'étiquette : une petite pastille rose au-dessus d'un titre, ou dans une phrase. */
.etiquette {
  display: inline-flex; align-items: center; gap: 6px; width: fit-content;
  font-weight: 700; font-size: var(--t-xs); line-height: 1.2; letter-spacing: 0;
  padding: 4px 9px; border-radius: var(--r-full); background: var(--rose); color: var(--texte);
  vertical-align: middle;
}
.etiquette.blanche { background: var(--element); }

/* ══ 4. COMPOSANTS PARTAGÉS ══════════════════════════════════════════════════════════════ */
/* Le badge officiel d'Apple : jamais redessiné, jamais plus petit que 40. */
.badge-store { display: inline-flex; flex: none; border-radius: 9px; transition: transform .15s ease, opacity .15s ease; }
.badge-store img { display: block; height: 52px; width: auto; }
.badge-store.petit img { height: 40px; }
.badge-store:active { transform: scale(.98); opacity: .8; }

/* Le bouton à contour. */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--s20);
  border: 1.5px solid var(--texte); border-radius: var(--r-full); background: var(--element); color: var(--texte);
  font-weight: 700; font-size: var(--t-sm); text-decoration: none; white-space: nowrap;
  transition: background .15s ease;
}
.bouton:hover { background: var(--fond-secondaire); }

/* Le bouton rond à icône (fermer…) : le même partout. 36 px à l'œil, 44 points sous le doigt. */
.bouton-rond {
  position: relative; flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  background: var(--fond); border: 1px solid var(--bord-subtil); border-radius: var(--r-full); color: var(--texte);
  cursor: pointer; transition: background .2s ease, border-color .2s ease;
}
.bouton-rond::after { content: ''; position: absolute; inset: -4px; border-radius: var(--r-full); }
.bouton-rond:hover { background: var(--fond-secondaire); border-color: var(--bord-leger); }
.bouton-rond .ic { width: 16px; height: 16px; }

/* Les grandes cartes arrondies : rose, blanche, noire. */
.carte { position: relative; border-radius: var(--r-carte); padding: var(--dedans); }
.carte.rose { background: var(--rose); }
.carte.blanche { background: var(--element); }
.carte.noire { background: var(--cta); color: var(--sur-fonce); }
/* Une carte dont le titre se pose en bas, sous son étiquette. */
.pied-carte { display: grid; gap: var(--s12); margin-top: auto; }


/* La notification de l'app, posée de travers. */
.alerte {
  display: grid; gap: 4px; width: min(100%, 440px);
  background: var(--element); border-radius: var(--r-3xl); padding: var(--s16) var(--s20) var(--s20);
  box-shadow: var(--ombre-haute); rotate: var(--penche, -2deg);
}
.alerte-app { display: flex; align-items: center; gap: var(--s8); font-weight: 700; font-size: var(--t-sm); margin-bottom: 4px; }
.alerte-app::before { content: ''; width: 22px; height: 22px; border-radius: 6px; background: var(--rose) url('img/favicon-32.png') center / cover; }
.alerte-app span { margin-left: auto; font-weight: 300; color: var(--texte-doux); }
.alerte-titre { font-weight: 700; font-size: 16px; line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; }
.alerte-texte { font-size: var(--t-lg); line-height: 1.4; color: var(--texte-doux); }

/* Ce qui arrive en fondu quand on fait défiler (comme `Reveal` dans l'app). */
.apparait { opacity: 0; transform: translateY(12px); transition: opacity .7s ease, transform .7s var(--elan); }
.apparait.vu { opacity: 1; transform: none; }

/* ══ 5. DÉCOR FIXE ═══════════════════════════════════════════════════════════════════════ */
/* ── Le menu : une pastille fine qui flotte en haut ─────────────────────────── */
.menu {
  position: fixed; z-index: 30; top: max(10px, env(safe-area-inset-top)); left: 50%; translate: -50% 0;
  width: min(calc(100% - 20px), 740px);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s8);
  padding: 5px 5px 5px 12px;
  background: color-mix(in srgb, var(--element) 78%, transparent);
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  /* L'arrondi du badge App Store (8,4 px) plus la marge qui l'entoure : les deux coins se suivent. */
  border: 1px solid var(--bord-subtil); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(38, 37, 32, .05), 0 10px 28px rgba(38, 37, 32, .12);
  animation: descendre .7s var(--elan) both;
}
@keyframes descendre { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
.marque { flex: none; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--t-xl); letter-spacing: -.01em; text-decoration: none; min-height: 36px; }
.marque svg { transition: transform .4s var(--elan); }
.marque:hover svg { transform: rotate(-12deg) scale(1.08); }
/* ── Le perchoir du menu : l'oiseau, et le nid qui devient le burger quand il s'envole ── */
.marque-zone { flex: none; display: flex; align-items: center; gap: var(--s8); }
.perchoir { position: relative; flex: none; width: 30px; height: 30px; }
.oiseau-logo { position: absolute; inset: 0; width: 30px; height: 30px; overflow: visible; pointer-events: none; z-index: 2; }
.oiseau-logo .aile { transform-origin: 241px 211px; transform-box: view-box; }
.oiseau-logo.vole .aile { animation: battre .18s ease-in-out infinite alternate; }
@keyframes battre { from { transform: rotate(0deg); } to { transform: rotate(-26deg); } }
/* Le burger : ses trois traits sont tracés par app.js (nid, burger ou croix). Invisible tant que
   l'oiseau est posé ; sa zone d'appui fait 44 points. */
.burger {
  position: absolute; left: -7px; top: -7px; width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: var(--r-full); background: none; color: var(--texte);
  opacity: 0; pointer-events: none; transition: opacity .35s var(--elan), background .2s ease;
}
.burger.visible { opacity: 1; }
.burger.actif { pointer-events: auto; cursor: pointer; }
.burger.actif:hover, .burger[aria-expanded="true"] { background: var(--fond-secondaire); }
.burger svg { width: 26px; height: 26px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* Le promeneur : l'oiseau sorti du menu, qui se balade sur la page (tenu par app.js). Au-dessus
   des sections, sous le menu, le sondage et la citation. */
.promeneur {
  position: fixed; z-index: 22; left: 0; top: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  pointer-events: none; opacity: 0; will-change: transform; transform-origin: 50% 85%;
  filter: drop-shadow(0 4px 8px rgba(38, 37, 32, .14));
}
.promeneur.visible { opacity: 1; }
.promeneur.devant { z-index: 31; }
.promeneur svg { display: block; width: 100%; height: 100%; overflow: visible; }
.promeneur .aile { transform-origin: 241px 211px; transform-box: view-box; }
.promeneur.vole .aile { animation: battre .2s ease-in-out infinite alternate; }
.promeneur.vite .aile { animation-duration: .11s; }
/* Sa bulle : un petit SMS fin, posé à côté de lui, du côté de la page (tenue par app.js). */
.bulle-oiseau {
  position: fixed; z-index: 22; left: 0; top: 0; pointer-events: none; width: max-content; max-width: min(230px, 62vw);
  opacity: 0; scale: .85; transform-origin: var(--ancre, 0% 100%);
  transition: opacity .3s ease, scale .45s var(--ressort);
}
.bulle-oiseau.visible { opacity: 1; scale: 1; }
.bulle-oiseau p {
  padding: 7px 12px; background: var(--element); border: 1px solid var(--bord-subtil); border-radius: 18px 18px 18px 4px;
  box-shadow: var(--ombre-fine); font-size: var(--t-sm); line-height: 1.4; text-wrap: balance;
}
.bulle-oiseau.gauche p { border-radius: 18px 18px 4px 18px; }
.bulle-oiseau.dessous p { border-radius: 4px 18px 18px 18px; }
.bulle-oiseau.dessous.gauche p { border-radius: 18px 4px 18px 18px; }

/* ── Le curseur : un point qui suit la souris avec un léger retard (tenu par app.js) ── */
/* Seulement avec une souris ou un trackpad : la flèche du système est alors remplacée. Le point est
   foncé, cerné de crème : il se voit sur le rose, sur le blanc et sur la carte noire. */
.curseur { display: none; }
@media (hover: hover) and (pointer: fine) {
  html.avec-curseur, html.avec-curseur * { cursor: none !important; }
  .curseur {
    display: block; position: fixed; z-index: 100; left: 0; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px;
    border-radius: 50%; background: var(--texte); box-shadow: 0 0 0 2px var(--fond); pointer-events: none;
    opacity: 0; transition: opacity .25s ease, scale .35s var(--ressort), background-color .25s ease, box-shadow .25s ease;
  }
  .curseur.visible { opacity: 1; }
  /* Sur ce qui se clique, il grossit et devient un anneau léger. */
  .curseur.sur-lien { scale: 3; background: color-mix(in srgb, var(--texte) 14%, transparent); box-shadow: 0 0 0 .7px var(--texte); }
  .curseur.appui { scale: .7; }
  .curseur.sur-lien.appui { scale: 2.4; }
}

/* Le petit mot qui se déplie sous la pastille, au clic sur le burger. */
.mot-du-nid {
  position: absolute; left: 0; top: calc(100% + 8px); max-width: min(300px, calc(100vw - 40px));
  padding: var(--s16) var(--s20); background: var(--element); border: 1px solid var(--bord-subtil);
  border-radius: var(--r-3xl); box-shadow: var(--ombre-haute); transform-origin: 24px 0;
  animation: deplier .45s var(--elan) both;
}
.mot-du-nid[hidden] { display: none; }
.mot-du-nid p { margin: 0; font-family: 'Shantell Sans', var(--police); font-weight: 600; font-size: var(--t-2xl); line-height: 1.35; text-wrap: balance; }
@keyframes deplier { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
.ancres { display: none; }
@media (min-width: 880px) {
  .ancres { flex: 1; display: flex; justify-content: center; gap: 2px; }
  .ancres a {
    display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; white-space: nowrap;
    font-size: var(--t-sm); text-decoration: none; color: var(--texte-doux); border-radius: var(--r-full);
    transition: color .2s ease, background .2s ease;
  }
  .ancres a:hover { color: var(--texte); }
  .ancres a[aria-current] { color: var(--texte); font-weight: 700; background: var(--fond-secondaire); }
}

/* ── Le petit sondage : une carte un peu penchée qui monte du bas, peu après l'arrivée ── */
.sondage {
  position: fixed; z-index: 26; right: 50%; bottom: calc(12px + env(safe-area-inset-bottom));
  translate: 50% 0; width: min(calc(100% - 24px), 380px);
  display: grid; gap: var(--s12); padding: var(--s16) var(--s20) var(--s20);
  background: var(--element); border: 1px solid var(--bord-subtil); border-radius: var(--r-3xl);
  box-shadow: var(--ombre-haute);
  rotate: -1.5deg; transform: translateY(140%); opacity: 0; visibility: hidden;
  transition: transform .6s cubic-bezier(.2, .9, .2, 1.2), opacity .3s ease, visibility 0s .6s;
}
.sondage.montre { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
.sondage-nom { display: flex; align-items: center; gap: var(--s8); font-size: var(--t-xs); color: var(--texte-doux); }
.sondage-nom svg { flex: none; width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: var(--rose-clair); }
.sondage-question { font-weight: 700; font-size: 19px; line-height: 1.2; letter-spacing: -.02em; text-wrap: balance; padding-right: var(--s32); }
.sondage-choix { display: flex; flex-wrap: wrap; gap: 6px; }
.sondage-reponse {
  min-height: 40px; padding: 0 14px; background: var(--element); border: 1px solid var(--bord-subtil); border-radius: var(--r-full);
  font-weight: 700; font-size: var(--t-sm); transition: border-color .15s ease;
}
.sondage-reponse:first-child { background: var(--rose); border-color: var(--rose); }
.sondage-reponse:hover { border-color: var(--bord-focus); }
.sondage-fermer { position: absolute; top: var(--s12); right: var(--s12); }
/* Une fois la réponse donnée : les choix laissent la place à la réplique de Linnotte. */
.sondage-replique { display: none; font-weight: 700; font-size: var(--t-2xl); line-height: 1.3; text-wrap: balance; }
.sondage.repondu .sondage-choix, .sondage.repondu .sondage-question { display: none; }
.sondage.repondu .sondage-replique { display: block; animation: changer .5s var(--elan) both; }

/* ── La citation du jour : une petite carte en bas à droite, avec l'oiseau de l'onboarding ── */
.citation {
  position: fixed; z-index: 25; right: 50%; bottom: calc(12px + env(safe-area-inset-bottom));
  translate: 50% 0; width: min(calc(100% - 24px), 360px);
  display: flex; align-items: center; gap: var(--s12);
  padding: var(--s16) 60px var(--s16) var(--s16);
  background: var(--element); border: 1px solid var(--bord-subtil); border-radius: var(--r-3xl);
  box-shadow: var(--ombre-haute);
  transform: translateY(160%); opacity: 0; visibility: hidden;
  transition: transform .6s cubic-bezier(.2, .9, .2, 1.2), opacity .3s ease, visibility 0s .6s;
}
.citation.montre { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
.citation-oiseau { flex: none; width: 56px; height: 56px; border-radius: var(--r-xl); background: var(--rose-clair); display: grid; place-items: center; overflow: hidden; }
.citation-oiseau svg { width: 52px; height: 52px; }
.citation p { display: grid; gap: 3px; min-width: 0; }
.citation-nom { font-size: var(--t-xs); line-height: 1.2; color: var(--texte-doux); }
#citation-texte { font-weight: 700; font-size: var(--t-md); line-height: 1.18; letter-spacing: -.01em; text-wrap: balance; }
#citation-texte.change { animation: changer .5s var(--elan) both; }
.citation-fermer { position: absolute; top: var(--s12); right: var(--s12); }
@media (min-width: 880px) {
  .citation, .sondage { right: 24px; bottom: 24px; translate: 0 0; }
}

/* ══ 6. GABARIT ══════════════════════════════════════════════════════════════════════════ */
main { display: grid; gap: var(--s16); max-width: calc(var(--large) + 2 * var(--marge)); margin: 0 auto; padding: 72px var(--marge) 0; }
/* Un bloc sans carte : de l'air au-dessus et au-dessous. */
.bloc { padding: var(--s64) 0; display: grid; gap: var(--s40); }
.entete { display: grid; gap: var(--s12); justify-items: start; }
.entete.centre { justify-items: center; text-align: center; }
@media (min-width: 880px) {
  main { gap: var(--s24); }
  .bloc { padding: var(--s96) 0; gap: var(--s64); }
}

/* ══ 7. SECTIONS ═════════════════════════════════════════════════════════════════════════ */

/* ── 7.1 L'ouverture ───────────────────────────────────────────────────────── */
/* La grande carte rose : les étiquettes en haut, le titre et la carte de l'app en bas. */
.ouverture { display: grid; gap: var(--s40); align-content: space-between; background: var(--rose); }
/* Sur ordinateur, la carte rose prend toute la largeur de l'écran, à 48 px des bords pour qu'on
   voie ses coins (Pauline, 9 nov. 2026). Les marges négatives la sortent de la colonne de la page. */
@media (min-width: 880px) {
  .ouverture { margin-inline: min(0px, calc((100% - 100vw) / 2 + 48px)); }
}
.etiquettes { display: flex; flex-wrap: wrap; gap: var(--s8); }
.ouverture-texte { display: grid; gap: var(--s16); justify-items: start; }
.question {
  display: inline-flex; align-items: center; gap: var(--s8); max-width: 100%;
  padding: 5px 14px 5px 5px; background: var(--element); border-radius: var(--r-full);
  font-size: var(--t-sm); line-height: 1.3; overflow: hidden;
}
.question-emo { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--rose-clair); font-size: var(--t-lg); }
.question-texte.change { animation: changer .5s var(--elan) both; }
@keyframes changer { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.grand-titre { font-weight: 700; font-size: var(--t-titre); line-height: 1.14; letter-spacing: -.035em; text-wrap: balance; }
/* Le h1 de la page (lu par Google) : la phrase sous le grand titre. */
.ouverture h1.chapo { color: var(--texte); }
.promesses { display: flex; flex-wrap: wrap; gap: var(--s8); margin-top: var(--s8); }
.promesses li {
  display: inline-flex; align-items: center; gap: var(--s8); min-height: 40px; padding: 0 14px 0 6px;
  background: color-mix(in srgb, var(--element) 45%, transparent); border-radius: var(--r-full); font-size: var(--t-sm);
}
.promesses svg { width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: var(--element); color: var(--vert); }
/* La scène de l'ouverture : un plateau de 560 × 600, mis à l'échelle de sa place (--k, posé par
   app.js). Les cartes y sont posées par le script, toutes entières dans le cadre. */
.ouverture-scene { position: relative; height: 420px; }
.plateau { position: absolute; left: 50%; top: 50%; width: 560px; height: 600px; margin: -300px 0 0 -280px; transform: scale(var(--k, .64)); }
.plateau > * { position: absolute; left: 0; top: 0; will-change: transform, opacity, filter; }
/* Les rappels de Linnotte (la notification de la page, plus serrée). */
.plateau .alerte { width: 300px; rotate: 0deg; padding: 12px 16px 14px; box-shadow: var(--ombre-douce); }
.plateau .alerte-titre { font-size: var(--t-xl); }
.plateau .alerte-texte { font-size: var(--t-md); }
/* Les cartes colorées : une étiquette, une phrase. */
.fiche { width: 280px; display: grid; gap: 6px; padding: 14px 16px 16px; border-radius: var(--r-3xl); background: var(--element); box-shadow: var(--ombre-douce); }
.fiche b { font-weight: 700; font-size: var(--t-xl); line-height: 1.3; letter-spacing: -.01em; }
.fiche .etiquette { font-size: 10.5px; }
.fiche.lavande { background: var(--lavande); color: var(--sur-fonce); }
.fiche.noire { background: var(--cta); color: var(--sur-fonce); }
/* Les questions des proches : une bulle de message, d'abord « en train d'écrire ». */
.demande {
  max-width: 214px; padding: 9px 14px; border-radius: 20px 20px 20px 6px; background: var(--element);
  font-size: var(--t-lg); line-height: 1.35; box-shadow: var(--ombre-douce);
}
.demande small, .reponse small { display: block; font-weight: 700; font-size: var(--t-xs); color: var(--texte-doux); margin-bottom: 1px; }
.demande .texte { display: none; }
.demande.ecrit .texte { display: block; animation: changer .3s ease-out both; }
.demande.ecrit .points { display: none; }
.points { display: inline-flex; gap: 4px; padding: 4px 2px; }
.points i { width: 7px; height: 7px; border-radius: 50%; background: var(--bord-controle); animation: points 1s ease-in-out infinite; }
.points i:nth-child(2) { animation-delay: .15s; }
.points i:nth-child(3) { animation-delay: .3s; }
@keyframes points { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
/* Le planning envoyé, puis la réponse. */
.envoi {
  width: 330px; display: grid; gap: 5px; padding: 14px 16px; border-radius: 22px 22px 6px 22px;
  background: var(--element); font-size: var(--t-md); line-height: 1.38; box-shadow: var(--ombre-douce);
}
.envoi b { font-weight: 700; }
.envoi .sig { color: var(--texte-doux); }
.distribue { width: max-content; font-size: var(--t-xs); font-weight: 700; color: var(--texte-doux); }
.reponse { padding: 9px 14px; border-radius: 20px 20px 20px 6px; background: var(--element); font-size: var(--t-lg); box-shadow: var(--ombre-douce); }
@supports (corner-shape: squircle) { .fiche, .demande, .envoi, .reponse { corner-shape: squircle; } }
/* La conversation reste cachée jusqu'à son tour (le script la fait apparaître). */
.plateau .demande, .envoi, .distribue, .reponse { opacity: 0; }
@media (min-width: 880px) {
  /* Le texte à gauche (les étiquettes en haut, le titre en bas), la scène à droite sur toute la hauteur. */
  .ouverture { min-height: 700px; grid-template-columns: minmax(0, 1fr) clamp(380px, 42vw, 580px); grid-template-rows: auto 1fr; column-gap: var(--s32); }
  .ouverture > .etiquettes { grid-column: 1; grid-row: 1; }
  .ouverture-texte { grid-column: 1; grid-row: 2; align-self: end; }
  .ouverture-scene { grid-column: 2; grid-row: 1 / span 2; height: auto; min-height: 580px; }
}

/* ── 7.2 Le constat ────────────────────────────────────────────────────────── */
/* Le titre au centre, puis trois cartes blanches : une phrase, un chiffre officiel, sa source. */
.chiffres { display: grid; gap: var(--s12); }
.chiffre {
  display: grid; gap: var(--s12); align-items: center;
  background: var(--element); border-radius: var(--r-3xl); padding: var(--s24);
}
.chiffre p { font-weight: 700; font-size: var(--t-carte); line-height: 1.35; letter-spacing: -.02em; }
.chiffre .gris { color: var(--bord-controle); }
.chiffre .etiquette { margin-left: 2px; }
.source {
  display: inline-flex; align-items: center; gap: 5px; width: fit-content; justify-self: start;
  padding: 3px 9px; border: 1px solid var(--bord-subtil); border-radius: var(--r-full);
  font-weight: 700; font-size: var(--t-xs); line-height: 1.3; text-decoration: none;
  transition: border-color .15s ease;
}
.source:hover { border-color: var(--bord-controle); }
/* La pastille reste petite à l'œil ; sous le doigt, elle fait 44 px de haut. */
.source { position: relative; }
.source::after { content: ''; position: absolute; inset: -11px -4px; }
@media (min-width: 880px) {
  .chiffre { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s32); padding: var(--s32) var(--s48); }
  .source { justify-self: end; }
}

/* ── 7.3 Comment ça marche ─────────────────────────────────────────────────── */
/* Les trois étapes autour de la carte rose, puis les rappels à côté de leurs notifications. */
/* Pas de marge en bas : le partage suit, au même écart que les rappels sous les étapes. */
.comment { padding-top: 0; padding-bottom: 0; gap: var(--s16); }
.grille-etapes, .grille-rappels { display: grid; gap: var(--s16); }
.etapes-titre, .rappels-titre { display: grid; gap: var(--s48); align-content: space-between; }
.trois {
  display: inline-grid; place-items: center; width: 2.8em; height: 2.8em;
  border: 1.5px solid var(--texte); border-radius: var(--r-xl);
  font-size: .4em; vertical-align: .4em; letter-spacing: 0;
}
.etape { position: relative; display: flex; flex-direction: column; gap: var(--s20); border-radius: var(--r-3xl); padding: 76px var(--s24) var(--s24); }
.etape.bordee { background: var(--element); border: 1px solid var(--bord-subtil); }
.etape.pointillee { background: var(--fond); border: 1px dashed var(--texte); }
.etape.lavande { background: var(--lavande); color: var(--sur-fonce); }
/* La vignette, logée dans le coin haut de la carte, au même arrondi (maquette du 6 nov. 2026) :
   la même sur les trois étapes, fond crème et contour fin (Pauline, 9 nov. 2026). */
.vignette {
  position: absolute; top: -1px; left: -1px;
  display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: var(--r-3xl) var(--r-xl) var(--r-xl) var(--r-xl); background: var(--fond); border: 1px solid var(--bord-subtil); color: var(--texte);
  font-size: 16px;
}
.mini { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.mini li {
  display: inline-flex; align-items: center; gap: 5px;
  font-weight: 700; font-size: var(--t-sm); line-height: 1.3; padding: 4px 10px;
  background: var(--element); color: var(--texte); border: 1px solid var(--bord-subtil); border-radius: var(--r-full);
}
.notifications { display: grid; gap: var(--s16); justify-items: center; align-content: center; padding-top: var(--s40); padding-bottom: var(--s40); }
.notifications .alerte:nth-of-type(2) { --penche: 2deg; justify-self: end; }
.notifications .alerte:nth-of-type(3) { --penche: -1.5deg; justify-self: start; }
@media (min-width: 880px) {
  .comment { gap: var(--s24); }
  .grille-etapes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s24); }
  .etapes-titre { grid-column: 1 / span 2; grid-row: 1 / span 2; min-height: 560px; }
  .etape.lavande { grid-column: 3 / span 2; }
  .etape { min-height: 268px; }
  .grille-rappels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s24); }
  .rappels-titre { min-height: 560px; }
  .notifications .alerte:nth-of-type(1) { margin-right: 10%; }
  .notifications .alerte:nth-of-type(3) { margin-left: 4%; }
}

/* ── 7.3 bis Le partage ────────────────────────────────────────────────────── */
/* Le téléphone, dessiné en direct. La scène est tracée dans un repère de 760 × 1180, mis à
   l'échelle de sa place (--s, posé par app.js) : tout reste net.
   Les couleurs du téléphone (titane, verre) sont celles d'un iPhone, hors de la palette. */
.tel { position: relative; justify-self: center; width: min(100%, 320px); aspect-ratio: 760 / 1180; margin-bottom: calc(-1 * var(--s16)); }
.tel-scene {
  position: absolute; left: 0; top: 0; width: 760px; height: 1180px;
  transform-origin: 0 0; transform: scale(var(--s, .42)); perspective: 3600px; perspective-origin: 50% 45%;
  font-family: var(--police); color: var(--texte);
}
.tel-ombre {
  position: absolute; left: 160px; top: 1122px; width: 440px; height: 52px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(38, 37, 32, .30), rgba(38, 37, 32, 0)); filter: blur(16px);
}
.tel-corps { position: absolute; left: 130px; top: 50px; width: 500px; height: 1062px; transform-style: preserve-3d; will-change: transform; }
/* Le cadre en titane naturel, la bordure noire, l'écran. */
.tel-cadre {
  position: absolute; inset: 0; border-radius: 86px; corner-shape: squircle;
  background: linear-gradient(150deg, #e9e6e0 0%, #b9b5ae 18%, #f4f2ee 34%, #9d9992 52%, #d8d5cf 70%, #8f8b84 88%, #cfccc6 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), 0 60px 100px -36px rgba(38, 37, 32, .42), 0 24px 44px -24px rgba(38, 37, 32, .30);
}
.tel-bordure { position: absolute; inset: 6px; border-radius: 80px; corner-shape: squircle; background: #050505; }
.tel-bouton { position: absolute; width: 5px; border-radius: 3px; background: linear-gradient(90deg, #8f8b84, #e6e3dd 60%, #a9a59e); }
.tel-bouton.g1 { left: -4px; top: 190px; height: 44px; }
.tel-bouton.g2 { left: -4px; top: 262px; height: 78px; }
.tel-bouton.g3 { left: -4px; top: 352px; height: 78px; }
.tel-bouton.d1 { right: -4px; top: 300px; height: 120px; }
.tel-ecran { position: absolute; inset: 16px; border-radius: 70px; corner-shape: squircle; overflow: hidden; background: var(--fond); }
.tel-ilot { position: absolute; left: 175px; top: 26px; width: 150px; height: 44px; border-radius: 22px; background: #050505; z-index: 5; }
.tel-reflet {
  position: absolute; inset: 16px; border-radius: 70px; corner-shape: squircle; z-index: 6; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,0) 32%, rgba(255,255,255,.12) 45%, rgba(255,255,255,0) 58%);
  background-size: 250% 100%; mix-blend-mode: screen;
}
/* Le doigt : un rond doux, comme dans les démos d'Apple. */
.tel-doigt {
  position: absolute; width: 74px; height: 74px; margin: -37px 0 0 -37px; border-radius: 50%; z-index: 7; opacity: 0;
  background: radial-gradient(circle, rgba(255,255,255,.8) 0%, rgba(255,255,255,.5) 55%, rgba(255,255,255,0) 72%);
  box-shadow: 0 0 0 2px rgba(255,255,255,.7), 0 6px 18px rgba(38,37,32,.18);
}
/* Le titre sur une carte blanche, et sur la carte rose le téléphone qu'on essaie : la fenêtre
   de partage de l'app, puis la conversation où le message arrive. Le même téléphone que celui
   de l'ouverture, cadré plus serré (540 de large au lieu de 760) pour que le texte se lise. */
.partage { padding-top: 0; }
.grille-partage { display: grid; gap: var(--s16); }
.partage-titre { display: grid; gap: var(--s48); align-content: space-between; }
.partage-titre .mini { margin-top: var(--s8); }
.partage-scene { display: grid; justify-items: center; align-content: center; gap: var(--s24); padding-top: var(--s32); padding-bottom: var(--s40); }
/* À la taille d'un vrai téléphone tenu à côté de la page, comme celui de l'ouverture. */
/* Sur téléphone, assez grand pour le doigt (Pauline, 9 nov. 2026). */
.tel-partage { width: min(90%, 330px); aspect-ratio: 540 / 1130; margin: 0; animation: none; }
/* Réduit par `zoom` et non par une mise à l'échelle : l'écran est dessiné à sa vraie taille,
   le texte reste net (une mise à l'échelle le rendait flou). Sans `zoom`, la mise à l'échelle. */
.tel-partage .tel-scene { width: 540px; height: 1130px; transform: none; zoom: var(--s, .6); perspective: none; }
@supports not (zoom: 1) { .tel-partage .tel-scene { zoom: normal; transform: scale(var(--s, .6)); } }
.tel-partage .tel-corps { left: 20px; top: 20px; transform-style: flat; will-change: auto; }
.tel-partage .tel-ombre { left: 50px; top: 1080px; }
.tel-partage .tel-ilot { left: 175px; }
.tel-partage .tel-reflet { pointer-events: none; }
.tel-partage .tel-doigt { transition: left .5s var(--elan), top .5s var(--elan), opacity .3s ease, transform .2s ease; }
.tel-partage .tel-doigt.appuie { transform: scale(.82); }
.tel-partage button { font-family: var(--police); }
/* Les deux écrans : la fenêtre de partage, et Messages qui arrive de la droite à l'envoi. */
.essai-page { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--fond); transition: transform .5s cubic-bezier(.32, .72, 0, 1), filter .5s ease; }
.essai-messages { transform: translateX(100%); box-shadow: 0 0 40px rgba(38, 37, 32, .18); z-index: 2; }
.tel-partage.envoye .essai-fenetre { transform: translateX(-28%); filter: brightness(.92); }
.tel-partage.envoye .essai-messages { transform: none; }
/* L'écran de l'app, à l'échelle exacte : 1 point de l'iPhone = 1,164 px de la scène (468 px
   de large pour 402 points). Chaque mesure ci-dessous est celle de l'app, multipliée. */
/* Ce que l'écran cache (attribut hidden) reste caché, même sur un bloc en grille. */
.tel-partage [hidden] { display: none !important; }
.essai-fenetre .ic, .essai-pied .ic { width: 23px; height: 23px; stroke-width: 1.5; }
.essai-statut {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3; height: 63px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 38px 0 62px; font-weight: 700; font-size: 20px; letter-spacing: -.01em; font-family: -apple-system, system-ui, sans-serif; pointer-events: none;
}
.essai-statut svg { width: 86px; height: 16px; }
/* L'en-tête (ScreenHeader) : fond de l'écran, coins bas arrondis, ombre. */
.essai-entete {
  position: relative; z-index: 2; display: grid; gap: 5px; padding: 101px 19px 28px;
  background: var(--fond); border-radius: 0 0 28px 28px; box-shadow: 0 4px 16px rgba(38, 37, 32, .08);
}
.essai-entete-ligne { display: flex; align-items: flex-start; gap: 14px; }
.essai-titre { flex: 1; font-weight: 700; font-size: 30.3px; line-height: 1.2; letter-spacing: -.9px; }
.essai-rond { flex: none; display: grid; place-items: center; width: 51px; height: 51px; border-radius: 50%; background: var(--fond); border: 1.2px solid var(--bord-subtil); }
.essai-sous-titre { max-width: 84%; font-size: 14px; line-height: 1.35; color: var(--texte-doux); }
/* Le contenu défile sous l'en-tête, jusqu'au pied blanc. */
.essai-corps {
  position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  display: flex; flex-direction: column; gap: 37px; padding: 28px 19px 28px;
}
.essai-corps::-webkit-scrollbar { display: none; }
.essai-section { display: grid; gap: 14px; }
.essai-question { font-weight: 700; font-size: 18.6px; line-height: 1.3; }
.essai-info { display: flex; gap: 9px; align-items: flex-start; padding: 9px; border-radius: 9px; background: var(--rose); font-size: 14px; line-height: 1.35; }
.essai-info .ic { width: 19px; height: 19px; margin-top: 1px; }
/* « Pour qui ? » : les lignes de l'app (RowCard, 72 points), icône, textes, radio. */
.essai-choix { display: grid; gap: 9px; }
.essai-ligne {
  display: flex; align-items: center; gap: 14px; min-height: 84px; padding: 0 19px; text-align: left;
  background: var(--element); border: 1.2px solid var(--bord-subtil); border-radius: 19px; color: var(--texte);
}
.essai-ligne[aria-checked="true"] { border: 2.3px solid var(--bord-focus); padding: 0 18px; }
.essai-emoji { width: 23px; text-align: center; font-size: 22px; line-height: 1; }
.essai-ligne-textes { flex: 1; display: grid; gap: 1px; }
.essai-ligne-titre { font-weight: 700; font-size: 15.1px; line-height: 1.3; }
.essai-ligne-sous { font-size: 14px; line-height: 1.3; color: var(--texte-doux); }
.essai-radio { flex: none; width: 23px; height: 23px; border-radius: 50%; border: 1.7px solid var(--bord-controle); }
.essai-ligne[aria-checked="true"] .essai-radio {
  border-color: var(--texte);
  background: center / 17px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23262520' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 12.5l3 3 7-7'/%3E%3C/svg%3E");
}
/* Les pastilles (Chip) : 36 points de haut. */
.essai-pastilles { display: flex; flex-wrap: wrap; gap: 9px; }
.essai-pastille {
  display: inline-flex; align-items: center; gap: 5px; min-height: 42px; padding: 0 19px;
  background: var(--element); border: 1.2px solid var(--bord-leger); border-radius: var(--r-full);
  font-weight: 700; font-size: 14px; color: var(--texte); transition: background .2s ease, color .2s ease;
}
.essai-pastille .ic { width: 19px; height: 19px; }
.essai-pastille[aria-checked="true"] { background: var(--cta); border-color: var(--cta); color: var(--sur-fonce); }
/* En Linnotte+, plus de cadenas ; l'agenda reprend son icône. */
.essai-pastille .ouvert { display: none; }
.tel-partage.abonne .essai-pastille svg:has([href="#a-cadenas"]) { display: none; }
.tel-partage.abonne .essai-pastille .ouvert { display: block; }
.tel-partage.abonne [data-gratuit] { display: none; }
.essai-couvre { font-size: 14px; line-height: 1.35; color: var(--texte-doux); }
.essai-dates { display: flex; gap: 9px; }
.essai-champ { flex: 1; display: grid; gap: 5px; }
.essai-champ small { font-weight: 700; font-size: 12.8px; }
.essai-champ > span {
  display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 14px;
  background: var(--element); border: 1.2px solid var(--bord-controle); border-radius: 14px; font-size: 14px;
}
/* L'aperçu (MessageApercu) : la bulle rose clair, le titre en gras, au plus 7 lignes. */
.essai-apercu { display: grid; gap: 9px; }
.essai-apercu-titre { font-weight: 700; font-size: 12.8px; color: var(--texte-doux); }
.essai-bulle { display: grid; gap: 7px; padding: 19px; border-radius: 5px 28px 28px 28px; background: var(--rose-clair); }
.essai-bulle p { font-size: 15.1px; line-height: 1.35; }
.essai-bulle p:first-child { font-weight: 700; }
.essai-bulle p.reste { color: var(--texte-doux); }
.essai-bulle.change { animation: changer .4s var(--elan) both; }
/* Le pied blanc (ExportFooter) : le bouton d'action, ou ce qui est réservé à Linnotte+. */
.essai-pied {
  position: relative; z-index: 2; display: grid; gap: 9px; padding: 14px 12px 40px;
  background: var(--element); border-radius: 19px 19px 0 0; box-shadow: 0 -4px 16px rgba(38, 37, 32, .06);
}
.essai-verrou { display: flex; gap: 9px; align-items: flex-start; padding: 0 4px; font-size: 14px; line-height: 1.35; }
.essai-verrou .ic { width: 19px; height: 19px; flex: none; }
.essai-envoyer {
  display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 60px;
  border: 0; border-radius: 19px; background: var(--cta); color: var(--sur-fonce);
  font-weight: 700; font-size: 18.6px; transition: transform .15s ease, background .15s ease;
}
.essai-envoyer:active { transform: scale(.98); }
.essai-barre-accueil { position: absolute; z-index: 4; left: 50%; bottom: 9px; width: 156px; height: 6px; margin-left: -78px; border-radius: 3px; background: var(--texte); }
/* Le bandeau de réussite de l'app (annoncer), en haut de l'écran. */
.essai-annonce {
  position: absolute; z-index: 5; left: 19px; right: 19px; top: 70px; padding: 14px 19px; border-radius: 9px;
  background: var(--vert); font-weight: 700; font-size: 14px; line-height: 1.35; text-align: center;
  opacity: 0; transform: translateY(-20px); transition: opacity .3s ease, transform .4s var(--ressort); pointer-events: none;
}
.essai-annonce.visible { opacity: 1; transform: none; }
/* Messages : la personne, puis le planning envoyé, et sa réponse, aux mesures d'iOS. */
.essai-messages-entete {
  display: grid; grid-template-columns: 52px 1fr 52px; justify-items: center; align-items: center; row-gap: 5px;
  padding: 66px 12px 12px; background: var(--element); border-bottom: 1px solid var(--bord-subtil);
}
.essai-retour { grid-row: span 2; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; background: none; color: var(--texte); }
.essai-retour .ic { width: 30px; height: 30px; }
.essai-avatar { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--fond-secondaire); font-weight: 700; font-size: 24px; }
.essai-nom { grid-column: 2; font-size: 13px; }
.essai-fil { flex: 1; display: flex; flex-direction: column; gap: 9px; padding: 19px 14px; overflow: hidden; }
.essai-envoye, .essai-reponse { max-width: 78%; padding: 9px 14px; border-radius: 21px; font-size: 19.8px; line-height: 1.3; white-space: pre-line; font-family: -apple-system, system-ui, sans-serif; }
.essai-envoye { align-self: flex-end; background: var(--cta); color: var(--sur-fonce); border-bottom-right-radius: 6px; }
/* Un long planning : la bulle s'arrête et s'estompe, la réponse reste visible. */
.essai-envoye.long { max-height: 560px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
.essai-reponse { align-self: flex-start; background: var(--fond-secondaire); border-bottom-left-radius: 6px; }
.essai-envoye, .essai-reponse { opacity: 0; transform: translateY(24px) scale(.94); transition: opacity .4s ease, transform .5s var(--ressort); }
.tel-partage.envoye .essai-envoye { opacity: 1; transform: none; transition-delay: .35s; }
.tel-partage.repondu .essai-reponse { opacity: 1; transform: none; }
@media (min-width: 880px) {
  .grille-partage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s24); }
  .partage-titre { min-height: 640px; }
  /* Il ne prend pas la place du téléphone de l'ouverture (deuxième colonne, posé en bas). */
  .tel-partage { grid-column: auto; grid-row: auto; align-self: center; margin: 0; width: 290px; }
}

/* ── 7.4 Les principes ─────────────────────────────────────────────────────── */
/* La carte noire : le titre à gauche, trois engagements à droite. */
.principes { display: grid; gap: var(--s40); }
.principes .entete { position: relative; }
.principes h2 { color: var(--sur-fonce); }
/* « Pas de … » au bout du titre : le mot change tout seul, rayé de rose. */
.barre-mot { position: relative; display: inline-block; color: var(--sur-fonce-doux); }
.barre-mot::after {
  content: ''; position: absolute; left: -3px; right: -3px; top: 52%; height: .1em; border-radius: var(--r-full);
  background: var(--rose); transform-origin: left; animation: barrer .7s var(--elan) .3s both;
}
#barre-mot.change { display: inline-block; animation: changer .6s var(--elan) both; }
/* Un autre nom d'animation pour le trait du mot suivant : c'est ce qui le fait repartir de zéro. */
.barre-mot.encore::after { animation-name: barrer-encore; }
@keyframes barrer { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes barrer-encore { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.coeurs { right: 0; top: -18px; width: 56px; }
@media (min-width: 880px) { .coeurs { top: -64px; width: 72px; } }
.principes .coeurs path { stroke: var(--rose); stroke-width: 3.8; }
.liste-principes { display: grid; }
.liste-principes li { display: flex; gap: var(--s16); padding: var(--s20) 0; }
.liste-principes li + li { border-top: 1px solid var(--filet-fonce); }
.liste-principes .ic { color: var(--rose); font-size: 22px; }
.liste-principes p { display: grid; gap: 2px; }
.liste-principes strong { font-size: var(--t-lg); }
.liste-principes span { font-size: var(--t-sm); color: var(--sur-fonce-doux); }
@media (min-width: 880px) {
  .principes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s64); align-items: center; min-height: 560px; padding: var(--s64) 72px; }
}

/* ── 7.5 Les formules ──────────────────────────────────────────────────────── */
/* Le tableau de l'app, puis l'appel à commencer. Sur téléphone, les 6 premières lignes. */
.tableau { background: var(--element); border: 1px solid var(--bord-subtil); border-radius: var(--r-3xl); overflow: hidden; box-shadow: var(--ombre-fine); }
.tableau table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tableau th, .tableau td { padding: 12px 10px; text-align: left; vertical-align: top; font-size: var(--t-sm); line-height: 1.45; font-weight: 300; color: var(--texte-doux); }
.tableau thead th { vertical-align: bottom; font-weight: 700; font-size: clamp(17px, 1.9vw, 22px); color: var(--texte); padding-top: var(--s20); padding-bottom: var(--s20); }
.tableau thead small { display: block; font-weight: 300; font-size: var(--t-xs); color: var(--texte-doux); }   /* sur téléphone, « par an » sous le prix */
.formule-nom { display: block; font-weight: 300; font-size: var(--t-sm); color: var(--texte); }
.tableau thead .col-titre { font-size: var(--t-xs); color: var(--texte-doux); font-weight: 300; text-transform: uppercase; letter-spacing: .04em; }
.tableau th[scope="row"] { font-weight: 700; color: var(--texte); width: 30%; }
.tableau tbody tr { border-top: 1px solid var(--bord-subtil); }
.tableau .coche { display: inline-block; width: 13px; height: 13px; vertical-align: -2px; margin-right: 6px; color: var(--vert); }
/* Non inclus : une croix (Pauline, 9 nov. 2026), lue « Non inclus » par les lecteurs d'écran. */
.tableau .absent { display: inline-flex; color: var(--texte-doux); }
.tableau .absent .ic { width: 16px; height: 16px; }
.tableau .col-plus { background: var(--rose-clair); }
.tableau tr.replie { display: none; }
.tableau.ouvert tr.replie { display: table-row; }
.tout-voir { display: block; width: 100%; min-height: 48px; border: 0; border-top: 1px solid var(--bord-subtil); background: var(--element); font-weight: 700; font-size: var(--t-sm); text-decoration: underline; text-underline-offset: 4px; }
.tableau.ouvert .tout-voir { display: none; }
.tableau-pied { display: grid; gap: var(--s12); justify-items: start; padding: var(--s16) 10px; border-top: 1px solid var(--bord-subtil); background: var(--fond); font-size: var(--t-sm); color: var(--texte-doux); }
.tableau-pied strong { color: var(--texte); }
@media (min-width: 880px) {
  .tableau th, .tableau td { padding: var(--s16) var(--s24); font-size: var(--t-md); }
  .tableau th[scope="row"] { width: 34%; }
  .tableau thead small { display: inline; }
  .tableau tr.replie { display: table-row; }
  .tout-voir { display: none; }
  .tableau-pied { display: flex; align-items: center; justify-content: space-between; padding: var(--s20) var(--s24); }
}

/* ── 7.6 Les questions ─────────────────────────────────────────────────────── */
/* Une liste, un filet entre deux questions, un « + » qui tourne quand on ouvre. */
.faq { border-top: 1px solid var(--bord-subtil); }
.faq details { border-bottom: 1px solid var(--bord-subtil); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--s16); min-height: 64px; padding: var(--s16) var(--s4); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-size: var(--t-xl); line-height: 1.4; letter-spacing: -.01em; }
.faq summary::after {
  /* Le même bouton rond que les croix : un « + » qui tourne en croix à l'ouverture. */
  content: ''; flex: none; width: 36px; height: 36px; border-radius: var(--r-full);
  border: 1px solid var(--bord-subtil);
  background:
    linear-gradient(var(--texte), var(--texte)) center / 13px 1.5px no-repeat,
    linear-gradient(var(--texte), var(--texte)) center / 1.5px 13px no-repeat,
    var(--fond);
  transition: transform .3s var(--elan), background-color .2s ease, border-color .2s ease;
}
.faq summary:hover::after { border-color: var(--bord-leger); background-color: var(--fond-secondaire); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 var(--s48) var(--s20) var(--s4); font-size: var(--t-lg); line-height: 1.6; color: var(--texte-doux); max-width: 52em; }
@media (min-width: 880px) {
  .faq summary { min-height: 84px; }
  .faq summary h3 { font-size: var(--t-2xl); }
}

/* ── 7.7 Le dernier appel ──────────────────────────────────────────────────── */
.appel { display: grid; gap: var(--s64); align-content: space-between; }
.appel h2 { font-size: var(--t-h2); }
.appel-store { display: grid; gap: var(--s8); justify-items: start; }
@media (min-width: 880px) {
  .appel { min-height: 440px; }
  .appel .pied-carte { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s32); }
  .appel-store { justify-items: end; }
}

/* ── Le pied de page ───────────────────────────────────────────────────────── */
/* En colonnes, avec de l'air : Linnotte et son bouton, les rubriques, les guides, l'à-propos ;
   en bas, sous un filet, les mentions. Le même sur toutes les pages. */
.pied {
  max-width: calc(var(--large) + 2 * var(--marge)); margin: var(--s48) auto 0;
  padding: var(--s64) var(--marge) calc(var(--s32) + env(safe-area-inset-bottom));
  display: grid; gap: var(--s48); font-size: var(--t-md); color: var(--texte-doux);
}
.pied-haut { display: grid; gap: var(--s40); }
.pied-marque { display: grid; gap: var(--s16); justify-items: start; align-content: start; max-width: 300px; }
.pied-marque .marque { font-size: var(--t-2xl); color: var(--texte); min-height: 0; }
.pied-marque .marque img { width: 32px; height: 32px; border-radius: var(--r-md); }
.pied-marque p { line-height: 1.55; }
.pied-titre { font-weight: 700; font-size: var(--t-sm); color: var(--texte); letter-spacing: .02em; margin-bottom: var(--s12); }
.pied-colonne ul { display: grid; gap: 2px; }
.pied-colonne a {
  position: relative; display: inline-flex; align-items: center; min-height: 36px;
  text-decoration: none; color: var(--texte-doux); transition: color .15s ease;
}
/* 44 points sous le doigt, sans changer l'allure. */
.pied-colonne a::after { content: ''; position: absolute; inset: -4px -6px; }
.pied-colonne a:hover { color: var(--texte); text-decoration: underline; text-underline-offset: 4px; }
.pied-bas {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s8) var(--s24);
  padding-top: var(--s24); border-top: 1px solid var(--bord-subtil); font-size: var(--t-xs);
}
@media (min-width: 600px) {
  .pied-haut { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s48) var(--s32); }
}
@media (min-width: 880px) {
  .pied { margin-top: var(--s64); padding-top: var(--s96); gap: var(--s64); }
  .pied-haut { grid-template-columns: 1.3fr 1fr 1.3fr 1fr; gap: var(--s48); }
}

/* ══ 7 bis. GRIFFONNAGES ET ANIMATIONS ═══════════════════════════════════════════════════ */
/* ── Les griffonnages ──────────────────────────────────────────────────────── */
/* Dessinés à la main, du même trait que les accessoires des oiseaux : cinq mots soulignés, une
   flèche, des cœurs. Ils se dessinent au défilement. */
.gribouille { position: absolute; height: auto; overflow: visible; pointer-events: none; }
.gribouille path {
  fill: none; stroke: var(--trait); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s var(--elan) calc(var(--k, 0) * .15s);
}
.gribouille.vu path { stroke-dashoffset: 0; }
@keyframes dessiner { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* Un mot annoté : la boîte de son dessin. */
.annote { position: relative; display: inline-block; white-space: nowrap; }
/* Des guillemets qui restent collés à leur mot. */
.insecable { white-space: nowrap; }
.souligne > .gribouille { left: -1%; top: 84%; width: 102%; }
.fleche path { stroke-width: 2; }
.fleche { display: none; }
@media (min-width: 880px) {
  .etapes-titre .pied-carte { position: relative; }
  .fleche { display: block; right: -60px; top: -110px; width: 140px; }
}

/* ── Les animations de la page ─────────────────────────────────────────────── */
/* Une seule courbe douce (--elan), des durées longues, un fondu qui sort du flou. */
.apparait { opacity: 0; transform: translateY(28px) scale(.98); filter: blur(var(--flou)); transition: opacity .9s var(--elan), transform 1.1s var(--elan), filter .9s var(--elan); }
.apparait.vu { opacity: 1; transform: none; filter: none; }
/* Les titres arrivent mot par mot ; un mot annoté garde son dessin visible. */
.par-mots .m { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.par-mots .m.libre { overflow: visible; }
.par-mots .m > span { display: inline-block; transform: translateY(105%); opacity: 0; transition: transform 1s var(--elan), opacity .6s ease; transition-delay: calc(var(--i) * 40ms); }
.par-mots.vu .m > span { transform: none; opacity: 1; }
/* À l'ouverture : le téléphone se pose, les promesses surgissent une à une, le trait sous
   « charge mentale » se dessine. */
.promesses li { animation: surgir .7s var(--ressort) both; }
.promesses li:nth-child(1) { animation-delay: .8s; }
.promesses li:nth-child(2) { animation-delay: .92s; }
.promesses li:nth-child(3) { animation-delay: 1.04s; }
.ouverture-scene { animation: poser 1.2s var(--elan) .2s both; }
.ouverture .gribouille path { transition: none; animation: dessiner 1.1s var(--elan) both; animation-delay: calc(1.2s + var(--k, 0) * .18s); }
@keyframes surgir { from { opacity: 0; transform: scale(.88) translateY(8px); filter: blur(var(--flou)); } to { opacity: 1; transform: none; filter: none; } }
@keyframes poser { from { opacity: 0; transform: translateY(40px) scale(.97); filter: blur(var(--flou)); } to { opacity: 1; transform: none; filter: none; } }
/* Les étiquettes des cartes chiffres sautent quand la carte arrive. */
.chiffre .etiquette { transition: transform .7s var(--ressort) .4s; transform: scale(0); }
.chiffre.vu .etiquette { transform: none; }
/* Les pastilles des étapes arrivent en cascade. */
.etape .mini li { opacity: 0; translate: 0 8px; transition: opacity .6s var(--elan), translate .8s var(--elan); transition-delay: calc(var(--j, 0) * 60ms + 250ms); }
.etape.vu .mini li { opacity: 1; translate: 0 0; }
/* Les notifications tombent l'une après l'autre, comme sur un téléphone, puis flottent. */
.notifications .alerte { opacity: 0; transform: translateY(-56px) scale(.92); filter: blur(var(--flou)); transition: opacity .6s var(--elan), transform 1s var(--ressort), filter .6s var(--elan); }
.notifications.vu .alerte { opacity: 1; transform: none; filter: none; animation: flotter 6s ease-in-out 1.4s infinite alternate; }
.notifications.vu .alerte:nth-of-type(2) { transition-delay: .35s; animation-duration: 5.2s; animation-delay: 1.8s; }
.notifications.vu .alerte:nth-of-type(3) { transition-delay: .7s; animation-duration: 6.6s; animation-delay: 2.2s; }
.notifications.vu .alerte-app span { animation: clignoter 1.2s ease 1.2s 2; }
@keyframes clignoter { 50% { color: var(--rose); } }
@keyframes flotter { from { translate: 0 -4px; } to { translate: 0 4px; } }
/* Au survol, les cartes se soulèvent un peu (par `translate`, qui ne gêne pas les apparitions). */
@media (hover: hover) {
  .chiffre, .etape { transition: opacity .9s var(--elan), transform 1.1s var(--elan), filter .9s var(--elan), translate .5s var(--elan), box-shadow .5s var(--elan); }
  .chiffre:hover, .etape:hover { translate: 0 -4px; box-shadow: var(--ombre-fine); }
}

/* Là où le navigateur sait lier une animation au défilement (Safari 26, Chrome), tout suit le
   doigt : ça se dessine en descendant et se défait en remontant, sans à-coup. */
@supports (animation-timeline: view()) {
  .apparait, .apparait.vu { transition: none; animation: sortir-du-flou linear both; animation-timeline: view(); animation-range: entry 0% cover 32%; }
  main .gribouille path { transition: none; animation: dessiner linear both; animation-timeline: view(); animation-range: entry calc(25% + var(--k, 0) * 8%) cover calc(48% + var(--k, 0) * 8%); }
  main .ouverture .gribouille path { animation: dessiner 1.1s var(--elan) both; animation-timeline: auto; animation-delay: calc(1.2s + var(--k, 0) * .18s); }
  .notifications .alerte, .notifications.vu .alerte { transition: none; animation: tomber linear both, flotter 6s ease-in-out infinite alternate; animation-timeline: view(), auto; animation-range: entry 15% cover 40%, normal; }
  .notifications .alerte:nth-of-type(2) { animation-range: entry 30% cover 50%, normal; animation-duration: auto, 5.2s; }
  .notifications .alerte:nth-of-type(3) { animation-range: entry 45% cover 60%, normal; animation-duration: auto, 6.6s; }
  /* L'ouverture recule doucement quand on la quitte. */
  .ouverture { animation: reculer linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
}
@keyframes sortir-du-flou { from { opacity: 0; transform: translateY(40px) scale(.97); filter: blur(var(--flou)); } to { opacity: 1; transform: none; filter: none; } }
@keyframes tomber {
  from { opacity: 0; transform: translateY(-70px) scale(.9); filter: blur(var(--flou)); animation-timing-function: cubic-bezier(.34, 1.36, .64, 1); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes reculer { to { transform: scale(.94); opacity: .5; } }

/* ══ 8. PAGES LÉGALES (confidentialité, conditions) ══════════════════════════════════════ */
.legal .marque img { border-radius: var(--r-md); width: 26px; height: 26px; }
.texte-legal { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; padding: 112px var(--marge) var(--s64); display: grid; gap: var(--s24); }
.texte-legal h1 { font-weight: 700; font-size: clamp(30px, 7vw, 44px); line-height: 1.05; letter-spacing: -.03em; }
.texte-legal h2 { font-size: var(--t-2xl); line-height: 1.3; letter-spacing: -.01em; margin-bottom: 6px; }
.texte-legal section { display: grid; gap: var(--s8); padding-top: var(--s20); border-top: 1px solid var(--bord-subtil); }
.texte-legal ul { display: grid; gap: 6px; padding-left: var(--s20); list-style: disc; }
.texte-legal p, .texte-legal li { font-size: var(--t-lg); color: var(--texte-doux); }

/* ══ 8 bis. PAGES D'AIDE (garde alternée, vacances, semaines, congés) ═══════════════════ */
/* Le même en-tête et le même pied que les pages légales ; un article lisible, des tableaux de
   dates, un encadré « en bref » et l'appel à Linnotte, sur les cartes de la page d'accueil. */
.article { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 104px var(--marge) var(--s64); display: grid; gap: var(--s32); }
.fil { font-size: var(--t-sm); color: var(--texte-doux); }
.fil a { text-underline-offset: 3px; }
.article h1 { font-weight: 700; font-size: clamp(30px, 6vw, 46px); line-height: 1.1; letter-spacing: -.03em; text-wrap: balance; }
.article .chapo { font-size: var(--t-2xl); max-width: none; }
.article section { display: grid; gap: var(--s12); }
.article h2 { font-size: clamp(21px, 3vw, 26px); line-height: 1.2; letter-spacing: -.02em; }
.article h3 { font-size: var(--t-2xl); line-height: 1.3; }
.article p, .article li { font-size: var(--t-xl); line-height: 1.65; color: var(--texte-doux); }
.article strong { color: var(--texte); }
.article ul { display: grid; gap: 6px; padding-left: var(--s20); list-style: disc; }
.article a { text-underline-offset: 3px; }
/* L'essentiel, en tête : la carte rose de l'accueil, en petit. */
.en-bref { background: var(--rose); border-radius: var(--r-3xl); padding: var(--s24); display: grid; gap: var(--s12); }
.en-bref ul { list-style: none; padding: 0; gap: var(--s8); }
.en-bref li { display: flex; gap: var(--s8); color: var(--texte); font-size: var(--t-lg); line-height: 1.5; }
.en-bref li svg { flex: none; width: 22px; height: 22px; margin-top: 1px; padding: 5px; border-radius: 50%; background: var(--element); color: var(--vert); }
/* Les tableaux de dates : une carte blanche, un filet entre deux lignes. */
.dates { width: 100%; border-collapse: collapse; background: var(--element); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--ombre-fine); font-size: var(--t-md); }
.dates th, .dates td { padding: 10px 12px; text-align: left; vertical-align: top; border-top: 1px solid var(--bord-subtil); line-height: 1.45; color: var(--texte-doux); }
.dates thead th { border-top: 0; background: var(--fond-secondaire); color: var(--texte); font-weight: 700; font-size: var(--t-sm); }
.dates tbody th { color: var(--texte); font-weight: 700; }
.dates .impaire { color: var(--texte); font-weight: 700; }
.dates tr.attention td, .dates tr.attention th { background: var(--rose-clair); }
.tableau-defile { overflow-x: auto; border-radius: var(--r-xl); }
.note-dates { font-size: var(--t-sm); color: var(--texte-doux); }
/* L'encadré « bon à savoir » : un rappel, sans alarme. */
.a-savoir { border-left: 3px solid var(--rose); padding: 4px 0 4px var(--s16); }
/* Linnotte, à la fin de l'article : la carte rose de l'appel, avec le badge. */
.appel-aide { background: var(--rose); border-radius: var(--r-3xl); padding: var(--s32) var(--s24); display: grid; gap: var(--s16); justify-items: start; }
.appel-aide h2 { font-size: clamp(24px, 4vw, 32px); }
.appel-aide p { color: var(--texte); }
.appel-aide > div { display: grid; gap: var(--s12); }
/* Les questions, comme sur l'accueil. */
.article details { border-top: 1px solid var(--bord-subtil); padding: var(--s12) 0; }
.article details:last-of-type { border-bottom: 1px solid var(--bord-subtil); }
.article summary { cursor: pointer; font-weight: 700; color: var(--texte); font-size: var(--t-xl); list-style: none; min-height: 44px; display: flex; align-items: center; }
.article summary::-webkit-details-marker { display: none; }
.article details p { margin-top: var(--s8); }
/* Les sources et les autres guides. */
.sources { display: flex; flex-wrap: wrap; gap: var(--s8); list-style: none !important; padding: 0 !important; }
.sources li { font-size: var(--t-sm); }
.autres-guides { display: grid; gap: var(--s8); list-style: none !important; padding: 0 !important; }
.autres-guides a { display: flex; align-items: center; justify-content: space-between; gap: var(--s12); min-height: 52px; padding: var(--s12) var(--s16); background: var(--element); border: 1px solid var(--bord-subtil); border-radius: var(--r-xl); text-decoration: none; font-weight: 700; color: var(--texte); font-size: var(--t-lg); transition: border-color .15s ease; }
.autres-guides a:hover { border-color: var(--bord-controle); }
@supports (corner-shape: squircle) { .en-bref, .appel-aide, .dates, .autres-guides a { corner-shape: squircle; } }
@media (min-width: 880px) {
  .article { padding-top: 128px; gap: var(--s40); }
  .en-bref { padding: var(--s32); }
  .appel-aide { padding: var(--s48); grid-template-columns: 1fr auto; align-items: end; }
  .dates { font-size: var(--t-lg); }
}

/* ══ 9. « RÉDUIRE LES ANIMATIONS » : tout est posé, rien ne bouge ════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .apparait, .notifications .alerte, .etape .mini li, .par-mots .m > span { opacity: 1; transform: none; translate: none; filter: none; }
  .chiffre .etiquette { transform: none; }
  .gribouille path { stroke-dashoffset: 0; }
  .oiseau-logo.vole .aile, .mot-du-nid { animation: none !important; }
  .essai-envoye, .essai-reponse { transform: none; }
}