/* Sidefound, le carnet des projets à côté (nom choisi le 2026-10-13) : la mise en page de la
   maquette retenue le 2026-10-12, avec l'identité Sidefound : symbole « S plié », cobalt,
   vermillon et papier, mot-symbole et titres en Bricolage Grotesque, texte en Onest.
   Papiers épinglés sur un bureau clair, sans photographie. Le pays choisi (html[data-pays])
   n'affiche que ses montants et ses règles. Polices, images et scripts viennent du site lui-même
   (CSP 'self') ; aucune image en data:, aucun attribut style dans les pages. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/polices/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Onest";
  src: url("/polices/onest.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  /* Palette Sidefound. Cobalt, vermillon et papier de la maquette gardés tels quels ; l'encre
     passe de #202b45 à #1a233c pour que le texte encre atteigne 4,5:1 sur le vermillon (4,56).
     Le cobalt tient 5,6:1 et plus sur chaque fond clair et porte un texte blanc à 6,6:1. Le
     vermillon (3,2:1 sur le papier, moins sur les bleus clairs) ne colore jamais un texte : il
     reste au symbole, aux filets décoratifs, au troisième papier de l'accueil et, sur le
     papier seulement, au compteur de « Mon carnet » ; les repères d'état (ruban « dans mon
     carnet », sommaire, choix coché) sont en cobalt. --trait borde les champs et les choix :
     3,9:1 et plus sur chaque fond clair. Tests : tests/test_carnet_site.py. */
  --paper: #f8f9f4;
  --ink: #1a233c;
  --muted: #4d5c70;
  --accent: #244ed8;
  --on-accent: #ffffff;
  --vermillon: #ef5939;
  --line: #c7cddd;
  --trait: #6a7590;
  --brume: #edf0f8;
  --ciel: #e9edff;
  --nuage: #f0f3fb;
  --rose: #fde8e1;
  --ombre-cobalt: #173aa7;
  --focus: var(--ink);
  --display: "Bricolage Grotesque", "Arial Narrow", Arial, sans-serif;
  --text: "Onest", Arial, "Helvetica Neue", sans-serif;
  --pad: clamp(22px, 5vw, 88px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: 100px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html:not(.motion-paused) { scroll-behavior: smooth; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.55 var(--text); -webkit-font-smoothing: antialiased; overflow-x: clip; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
a { color: inherit; text-decoration: none; }
a, button, input, label, summary, select { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
p { max-width: 66ch; margin: 0 0 20px; }
img, svg { display: block; max-width: 100%; }
/* Papiers tournés ou en mouvement : rien ne dépasse sur le côté. */
main, .site-footer { overflow-x: clip; }
h1, h2, h3, h4 { margin-top: 0; line-height: 1.04; }
h1, h2 { font-family: var(--display); font-weight: 750; letter-spacing: -.055em; word-spacing: .14em; }
h2 { font-size: clamp(38px, 4.5vw, 72px); margin-bottom: 25px; text-wrap: balance; }
h3 { font-size: 25px; letter-spacing: -.035em; }
p, li { text-wrap: pretty; }
small, .fine { font-size: 13px; line-height: 1.65; }
.fine { max-width: 62ch; }
strong, b { font-weight: 700; }
/* Le focus : contour encre, halo papier (au moins 3:1 sur le papier, les bleus clairs et le
   vermillon) ; sur les fonds cobalt, contour papier et halo encre. */
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 3px var(--paper); }
.method-section :focus-visible, .cadre-comparatif :focus-visible, .quiz-intro :focus-visible, .contract-section :focus-visible, .desk-card-0 :focus-visible { outline-color: var(--paper); box-shadow: 0 0 0 3px var(--ink); }
::selection { background: var(--accent); color: var(--on-accent); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 18px; height: 18px; flex-shrink: 0; }
.ico.arrow { width: 20px; height: 20px; }
.skip { position: fixed; left: 20px; top: -80px; z-index: 1000; background: var(--accent); color: var(--on-accent); padding: 12px; }
.skip:focus { top: 20px; }

/* Sans JavaScript, les éléments interactifs s'effacent devant leur repli. */
html:not(.js) [data-js] { display: none !important; }
.js [data-nojs] { display: none !important; }

/* ---------- Pays : une seule variante visible ---------- */
html[data-pays="ch"] [data-p]:not(.pays-box):not([data-p~="ch"]),
html[data-pays="fr"] [data-p]:not(.pays-box):not([data-p~="fr"]),
html[data-pays="be"] [data-p]:not(.pays-box):not([data-p~="be"]),
html[data-pays="qc"] [data-p]:not(.pays-box):not([data-p~="qc"]) { display: none !important; }
/* Sans JavaScript, le sélecteur suffit grâce à :has(). */
html:not([data-pays]):has(#pays option[value="ch"]:checked) [data-p]:not(.pays-box):not([data-p~="ch"]),
html:not([data-pays]):has(#pays option[value="fr"]:checked) [data-p]:not(.pays-box):not([data-p~="fr"]),
html:not([data-pays]):has(#pays option[value="be"]:checked) [data-p]:not(.pays-box):not([data-p~="be"]),
html:not([data-pays]):has(#pays option[value="qc"]:checked) [data-p]:not(.pays-box):not([data-p~="qc"]) { display: none !important; }

/* Avant l'arrivée des titres, rien ne clignote ; motion.js retire cette classe aussitôt. */
.motion-intro :is(.hero-title > span, .studio-copy .lead, .studio-copy .button, .desk-card, .detail-copy > *, .emblem-symbol, .doc-hero-copy > *, .doc-note) { visibility: hidden; }

/* ---------- Boutons et liens ---------- */
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 26px; background: var(--accent); color: var(--on-accent); padding: 18px 24px; min-height: 59px; border: 1px solid var(--accent); font-weight: 650; font-size: 16px; line-height: 1.3; transition: background .2s, color .2s, border-color .2s; }
.button:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.button.ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.button.ghost:hover { background: var(--ink); color: var(--paper); }
.text-button { font-size: 15px; font-weight: 600; padding: 8px 0; display: inline-flex; gap: 10px; align-items: center; line-height: 1.5; color: inherit; }
.text-button:hover, .head-nav a:hover, .footer-nav a:hover, .card-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.link-btn { font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.eyebrow { font-size: 14px; font-weight: 600; letter-spacing: .02em; margin-bottom: 22px; line-height: 1.5; }
.lead { font-size: clamp(17px, 1.4vw, 21px); max-width: 47ch; line-height: 1.55; }
.soon { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; background: var(--ink); color: var(--paper); font-size: 13px; font-weight: 700; margin-right: 6px; }
.ex { display: inline-flex; align-items: center; padding: 2px 8px; border: 1px dashed currentColor; font-size: 13px; font-weight: 600; white-space: nowrap; }
.paper-pin { position: absolute; top: 10px; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 2px 3px 2px #1a233c40; }

/* Niveau de preuve : le cercle se remplit avec la preuve. */
.proof { font-weight: 700; white-space: nowrap; }
.proof::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 50%; border: 1.5px solid currentColor; vertical-align: -1px; }
.proof[data-proof="estime"]::before { border-style: dotted; border-width: 2px; }
.proof[data-proof="declare"]::before { border-style: dashed; }
.proof[data-proof="documente"]::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.proof[data-proof="verifie"]::before { background: currentColor; }

/* ---------- En-tête ---------- */
.site-header { position: relative; z-index: 50; display: flex; align-items: center; gap: 22px; padding: 18px var(--pad); min-height: 90px; background: var(--paper); border-bottom: 1px solid var(--line); }
/* Le logo : le symbole « S plié » (image) et le mot-symbole, le nom en Bricolage Grotesque. */
.brand { display: inline-flex; align-items: center; gap: 7px; font-family: var(--display); font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -.064em; white-space: nowrap; }
.brand-symbol { width: auto; height: 1.18em; flex-shrink: 0; }
.brand-name { padding-bottom: .08em; text-transform: lowercase; }
.head-nav { display: flex; gap: 24px; margin-left: auto; margin-right: 6px; font-size: 15px; white-space: nowrap; }
.head-nav a[aria-current] { text-decoration: underline; text-underline-offset: 6px; }
.header-end { display: flex; align-items: center; gap: 16px; }
.country { display: flex; align-items: center; gap: 7px; font-size: 14px; white-space: nowrap; }
/* Sur un écran moyen, l'étiquette visible se raccourcit en « Pays » ; « Votre pays » reste le nom
   lu par les lecteurs d'écran (le libellé court, aria-hidden, y est contenu). */
.pays-court { display: none; }
@media (min-width: 801px) and (max-width: 1480px) {
  .pays-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pays-court { display: inline; }
}
.country .ico { width: 16px; height: 16px; }
.country select { background: transparent; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; padding: 7px 4px 7px 3px; max-width: 120px; font-size: 15px; cursor: pointer; }
.carnet-btn, .motion-toggle, .menu summary { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 7px 13px; border: 1px solid currentColor; border-radius: 30px; font-size: 14px; white-space: nowrap; cursor: pointer; }
.carnet-btn .ico, .motion-toggle .ico, .menu summary .ico { width: 16px; height: 16px; }
.cb-count { display: grid; place-items: center; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 11px; background: var(--brume); font-size: 13px; font-weight: 700; }
.carnet-btn.has-items .cb-count { background: var(--vermillon); }
.cb-count.bump { animation: bump .45s var(--ease); }
.motion-toggle .i-lecture, .motion-toggle[data-state="pause"] .i-pause { display: none; }
.motion-toggle[data-state="pause"] .i-lecture { display: block; }
.motion-toggle[data-state="pause"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.menu { position: relative; display: none; }
.menu summary { list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.menu-nav { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; display: flex; flex-direction: column; min-width: 230px; padding: 10px 20px; background: var(--paper); border: 1px solid var(--ink); box-shadow: 8px 10px 0 #1a233c1f; font-size: 16px; }
.menu:not([open]) .menu-nav { display: none; }
.menu-nav a { padding: 10px 0; border-bottom: 1px solid var(--line); }
.menu-nav a:last-child { border-bottom: 0; }
@media (min-width: 801px) {
  .site-header { position: sticky; top: 0; transition: box-shadow .3s; }
  .site-header.is-scrolled { box-shadow: 0 10px 30px #1a233c14; }
}

/* ---------- Sections communes ---------- */
.section { position: relative; padding: 105px var(--pad); }
.section-intro { display: grid; grid-template-columns: 1fr 1fr; column-gap: 7%; margin-bottom: 55px; align-items: end; }
.section-intro .eyebrow { grid-column: 1 / -1; margin-bottom: 18px; }
.section-intro h2 { margin-bottom: 0; }
.section-intro > p:last-child, .section-intro > div > p { font-size: 17px; max-width: 48ch; margin-bottom: 8px; }
.section-intro > div > .text-button { margin-top: 4px; }

/* ---------- Accueil : le bureau, trois papiers à déplacer ---------- */
.studio-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: 1fr auto; column-gap: 40px; row-gap: 30px; min-height: 760px; padding: 35px var(--pad) 40px; background: var(--paper); overflow: clip; isolation: isolate; }
/* Le nom en filigrane, décoratif (aria-hidden) : 4,5 % d'opacité. */
.studio-poster { position: absolute; z-index: -1; left: -15px; right: 0; bottom: -90px; margin: 0; max-width: none; overflow: hidden; pointer-events: none; opacity: .045; color: var(--accent); font-family: var(--display); font-size: 26vw; font-weight: 800; line-height: .8; letter-spacing: -.08em; white-space: nowrap; text-transform: lowercase; }
.studio-copy { position: relative; z-index: 3; min-width: 0; }
.studio-copy .eyebrow { color: var(--accent); font-size: 16px; }
.hero-title { font-size: clamp(52px, 5.9vw, 100px); font-weight: 750; line-height: .99; letter-spacing: -.065em; word-spacing: .1em; margin: 0 0 28px; }
.hero-title > span { display: block; will-change: transform; }
.studio-copy .lead { font-size: 19px; max-width: 44ch; margin-bottom: 26px; }
.studio-copy .button { margin-bottom: 16px; }
.desk { position: relative; z-index: 5; min-width: 0; min-height: 625px; pointer-events: none; }
.desk-card { position: absolute; width: 270px; min-height: 230px; padding: 28px; border: 1px solid #1a233c20; border-radius: 3px; background: var(--paper); color: var(--ink); box-shadow: 5px 9px 0 #1a233c14; pointer-events: auto; touch-action: none; cursor: grab; user-select: none; }
.desk-card:active, .desk-card.is-dragging { cursor: grabbing; }
.desk-card > small { font-size: 15px; }
.desk-title { font-family: var(--display); font-size: 31px; font-weight: 750; line-height: 1.04; letter-spacing: -.035em; margin: 22px 0 30px; max-width: 13ch; }
.desk-card a { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid #1a233c33; padding-top: 17px; font-size: 16px; }
.desk-card a .ico { width: 15px; height: 15px; }
.desk-card .paper-pin { left: 27px; top: 15px; width: 8px; height: 8px; box-shadow: none; }
.desk-card-0 { top: 12%; left: 3%; transform: rotate(-9deg); background: var(--accent); color: var(--on-accent); }
.desk-card-0 a { border-top-color: #ffffff60; }
.desk-card-0 .paper-pin, .desk-card-2 .paper-pin { background: var(--paper); }
.desk-card-1 { top: 39%; right: -1%; transform: rotate(8deg); background: var(--ciel); }
/* Le vermillon de la maquette, texte encre : 4,56:1. */
.desk-card-2 { bottom: 2%; left: 1%; transform: rotate(-5deg); background: var(--vermillon); }
.desk-heading { position: absolute; top: 5px; right: 0; margin: 0; color: var(--accent); text-align: right; }
.desk-heading span { display: block; font-size: 15px; }
.desk-heading strong { font-family: var(--display); font-size: 29px; font-weight: 750; letter-spacing: -.04em; }
.reset-desk { position: absolute; bottom: -25px; right: 0; min-height: 44px; padding: 12px 0; border-bottom: 1px solid var(--accent); color: var(--accent); font-size: 14px; pointer-events: auto; }
.studio-credit { grid-column: 1 / -1; max-width: 58ch; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }

/* ---------- Accueil : le chemin des quatre semaines ---------- */
.test-path { overflow: clip; background: var(--ciel); }
.path-stage { position: relative; min-height: 420px; padding-top: 40px; }
.path-line { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .45; overflow: visible; }
.path-line path { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.path-steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 35px; min-height: 380px; }
.path-steps li { align-self: start; max-width: 250px; padding: 20px; background: var(--ciel); }
.path-steps li:nth-child(2n) { align-self: end; }
.step-k { display: inline-block; margin-bottom: 18px; padding: 8px 12px; background: var(--accent); color: var(--on-accent); font-size: 15px; }
.path-steps h3 { font-family: var(--display); font-size: 35px; margin-bottom: 14px; }
.path-steps p { font-size: 15px; margin: 0; }

/* ---------- Accueil : trois questions ---------- */
/* Le quiz : section cobalt, questions sur une fiche papier. */
.quiz-section { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 9%; align-items: start; background: var(--accent); color: var(--on-accent); }
@media (min-width: 801px) { .quiz-intro { position: sticky; top: 130px; padding-top: 35px; } }
.quiz-intro > p { max-width: 42ch; }
.q-recap { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.q-recap:empty { display: none; }
.q-recap li { padding: 5px 12px; border-radius: 20px; background: var(--paper); color: var(--ink); font-size: 14px; font-weight: 600; }
.q-pays { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 15px; }
.quiz-fallback { padding: 30px; background: var(--paper); color: var(--ink); box-shadow: 12px 12px 0 var(--ombre-cobalt); }
.qf-title { font-family: var(--display); font-size: 24px; font-weight: 700; letter-spacing: -.03em; }
.qf-list, .qf-list ul { list-style: none; margin: 0; padding: 0; }
.qf-list > li { border-top: 1px solid var(--line); padding: 12px 0; }
.qf-h { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.qf-list a { text-decoration: underline; text-underline-offset: 4px; }
.quiz { min-width: 0; padding: 35px; background: var(--paper); color: var(--ink); box-shadow: 12px 12px 0 var(--ombre-cobalt); perspective: 1000px; }
.quiz-progress { display: flex; align-items: center; gap: 8px; margin-bottom: 35px; }
.q-bars { display: flex; gap: 8px; }
.q-bars i { width: 45px; height: 5px; border-radius: 10px; background: var(--line); transition: background .3s; }
.q-bars i.on { background: var(--accent); }
.q-count { margin-left: auto; font-size: 13px; }
.q-title { font-family: var(--display); font-weight: 750; letter-spacing: -.04em; font-size: 30px; line-height: 1.15; margin-bottom: 10px; }
.q-title:focus { outline: none; box-shadow: none; }
.q-help { font-size: 15px; }
.choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 26px 0; }
.choices.four { grid-template-columns: 1fr 1fr; }
.q-opt { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; min-height: 128px; padding: 20px 12px 16px; border: 1px solid var(--trait); text-align: center; transition: background .2s, color .2s; }
.q-opt:hover { background: var(--ciel); }
.q-opt .o-ico .ico { width: 26px; height: 26px; color: var(--accent); }
.q-opt b { font-size: 16px; font-weight: 650; line-height: 1.25; }
.q-opt small { font-size: 13px; line-height: 1.4; opacity: .85; }
.q-opt[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.q-opt[aria-pressed="true"] .o-ico .ico { color: var(--on-accent); }
.quiz-actions { display: flex; align-items: center; gap: 20px; margin-top: 10px; }
.reco-list { display: grid; gap: 18px; margin: 22px 0; }
.reco { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 20px; padding: 26px 24px; background: var(--paper); border: 1px solid var(--line); box-shadow: 6px 10px 0 #244ed814; }
.reco-art .picto { width: 64px; height: 64px; color: var(--accent); }
.reco-tag { font-size: 13px; margin-bottom: 6px; }
.reco-title { font-family: var(--display); font-size: 26px; line-height: 1.1; letter-spacing: -.04em; margin: 0 0 14px; }
.reco-why { margin: 0 0 14px; padding-left: 18px; font-size: 15px; }
.reco-why li { margin-bottom: 4px; }
.reco-pays { margin-bottom: 14px; padding: 12px 14px; background: var(--brume); font-size: 14px; }
.reco-pays b { display: block; margin-bottom: 4px; }
.reco-pays p { margin: 0 0 6px; }
.reco-src { font-size: 13px; }
.reco-src a, .fp-foot a, .rules-src a, .pb-meta a, .vc-src a, .doc-src a { text-decoration: underline; text-underline-offset: 3px; }
.reco-test { margin-bottom: 16px; padding-left: 12px; border-left: 3px solid var(--vermillon); font-size: 15px; }
.reco-test b { display: block; font-size: 13px; }
.reco-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.q-lettre { font-size: 15px; }
.q-step.enter, .q-result.enter { animation: entre .45s var(--ease); }
.q-step.enter-back { animation: entre-retour .45s var(--ease); }

/* ---------- Accueil : le registre ---------- */
.toolbar { display: grid; gap: 18px; padding: 24px 0 28px; margin-bottom: 22px; border-top: 1px solid var(--line); }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.chips legend { float: left; margin: 0 12px 0 0; padding: 0; font-size: 14px; font-weight: 600; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.chip > span { display: inline-flex; align-items: center; padding: 8px 14px; border: 1px solid var(--trait); border-radius: 30px; font-size: 14px; transition: background .2s, color .2s; }
.chip input:hover + span { border-color: var(--ink); }
.chip input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.chip input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 3px var(--paper); }
.tb-row { display: flex; flex-wrap: wrap; align-items: end; gap: 20px 30px; }
.search, .sort { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.search-box { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--ink); }
.search input { width: min(320px, 70vw); padding: 8px 0; border: 0; background: transparent; font-size: 16px; }
.search input:focus { outline: none; }
.search-box:focus-within { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 3px var(--paper); }
.sort select { max-width: 320px; padding: 8px 24px 8px 0; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; background: transparent; font-size: 16px; }
.count { margin: 0 0 8px auto; font-size: 14px; }
/* Le registre en grille filetée, une fiche sur deux teintée, comme la maquette. */
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.project-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 30px 28px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); transition: background .2s; }
.project-card.tone-1, .project-card.tone-3 { background: var(--nuage); }
.project-card:hover { background: var(--ciel); }
.project-card:focus { outline: none; }
.project-card:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 3px var(--paper); }
.project-card.is-kept::after { content: ""; position: absolute; top: -1px; right: 26px; width: 18px; height: 42px; background: var(--accent); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); }
.card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin: 6px 0 24px; }
.project-icon .picto { width: 54px; height: 54px; color: var(--accent); }
.f-meta { display: flex; flex-direction: column; gap: 2px; margin: 0; padding-right: 20px; font-size: 13px; text-align: right; }
.f-cat { margin: 0; font-size: 13px; }
.project-card h3 { font-family: var(--display); font-size: 30px; font-weight: 750; line-height: 1.05; letter-spacing: -.04em; margin: 12px 0 14px; }
.project-card h3 a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.f-desc { font-size: 15px; margin-bottom: 22px; }
.project-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 15px; margin: auto 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15px; }
.project-stats dt { font-size: 13px; color: var(--muted); }
.project-stats dd { margin: 3px 0 0; font-weight: 650; }
.project-stats .wide { grid-column: 1 / -1; }
.tag-auto { display: block; width: max-content; max-width: 100%; margin-top: 5px; padding: 1px 8px; border-radius: 20px; background: var(--accent); color: var(--on-accent); font-size: 13px; font-weight: 700; }
.card-pays { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 15px; }
.card-pays summary { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 650; list-style: none; cursor: pointer; }
.card-pays summary::-webkit-details-marker { display: none; }
.card-pays summary::after { content: "+"; margin-left: auto; font-size: 18px; font-weight: 400; }
.card-pays[open] summary::after { content: "−"; }
.card-pays .ico { width: 16px; height: 16px; }
.fp-c { margin-left: 7px; padding: 1px 8px; border: 1px solid currentColor; border-radius: 20px; font-size: 13px; font-weight: 600; }
.fp-t { margin: 12px 0 8px; }
.fp-foot { font-size: 13px; margin-bottom: 8px; }
.fv { font-size: 14px; padding-left: 10px; border-left: 3px solid var(--vermillon); }
.fv b { display: block; font-size: 13px; }
.card-actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--line); }
.card-link { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 650; }
.card-link .ico { width: 16px; height: 16px; }
.keep { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid currentColor; border-radius: 30px; font-size: 14px; transition: background .2s, color .2s; }
.keep .ico { width: 15px; height: 15px; }
.keep:hover { background: var(--paper); }
.keep.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.keep.pop { animation: bump .4s var(--ease); }
.empty { padding: 35px; background: var(--brume); display: grid; gap: 10px; justify-items: start; }
.empty p { font-family: var(--display); font-size: 24px; font-weight: 700; margin: 0; }
.catalogue-section > .fine { margin-top: 35px; }

/* ---------- Règles, méthode, questions ---------- */
.rules-section { background: var(--brume); }
.rules-content { display: grid; grid-template-columns: 1fr 1fr; gap: 8%; }
.rules-content article { padding-top: 24px; border-top: 1px solid var(--line); }
.rules-content h3 { font-family: var(--display); font-size: 27px; margin-bottom: 18px; }
.rules-content p { font-size: 16px; }
.rules-src { font-size: 14px; }
.rules-more { margin: 30px 0 0; }

.method-section { background: var(--accent); color: var(--on-accent); }
.method-section ::selection { background: var(--ciel); color: var(--ink); }
.method-section a { text-decoration: underline; text-underline-offset: 4px; }
.method-section .text-button { text-decoration: none; }
.crit-grid { list-style: none; margin: 0 0 70px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.crit { padding-top: 20px; border-top: 1px solid #ffffff55; }
.crit .ico { width: 30px; height: 30px; color: var(--ciel); }
.crit h3 { font-family: var(--display); font-size: 22px; letter-spacing: -.03em; margin: 16px 0 10px; }
.crit p { font-size: 15px; margin-bottom: 10px; }
.crit .crit-scale { font-size: 14px; font-weight: 600; color: var(--ciel); }
.m-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8%; }
.m-block h3 { font-family: var(--display); font-size: 27px; margin-bottom: 20px; }
.proofs { list-style: none; margin: 0; padding: 0; }
.proofs li { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid #ffffff40; font-size: 15px; }
.proofs li p { margin: 0; }
.m-date p { font-size: 16px; }

.faq-section { display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px 8%; align-items: start; }
.faq-intro h2 { font-size: clamp(38px, 4vw, 62px); }
.faq-intro a { text-decoration: underline; text-underline-offset: 4px; }
.faq-list details { padding: 20px 0; border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; justify-content: space-between; gap: 20px; font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: -.03em; line-height: 1.2; list-style: none; cursor: pointer; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font-family: var(--text); font-weight: 400; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list p { margin: 14px 0 0; font-size: 16px; }

/* ---------- Le carnet d'essai (bleu clair) ---------- */
.page-offer { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 50px 8%; background: var(--ciel); }
.page-offer h2 { font-size: clamp(40px, 4.8vw, 75px); }
.offer-copy > p { max-width: 55ch; }
.a-venir { font-size: 16px; }
.stop-note { font-size: 15px; }
.stop-note b { display: block; }
.entry { position: relative; justify-self: end; width: 100%; max-width: 480px; padding: 38px 30px 28px; background: var(--paper); box-shadow: 10px 14px 0 #244ed826; transform: rotate(2deg); }
.entry-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.entry-k { margin: 0; font-size: 14px; font-weight: 600; }
.entry h3 { font-family: var(--display); font-size: 27px; margin-bottom: 20px; }
.entry-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin: 0 0 18px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.entry-figs .wide { grid-column: 1 / -1; }
.entry-figs dt { font-size: 13px; }
.entry-figs dd { margin: 4px 0 0; font-family: var(--display); font-size: 24px; font-weight: 700; letter-spacing: -.03em; }
.entry-figs small { display: block; font-family: var(--text); font-size: 13px; font-weight: 400; letter-spacing: 0; }
.dec { display: flex; gap: 6px; flex-wrap: wrap; }
.dec i { padding: 3px 10px; border: 1px solid var(--line); border-radius: 20px; font-family: var(--text); font-size: 14px; font-style: normal; font-weight: 500; letter-spacing: 0; }
.dec i.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.entry-body p { margin-bottom: 10px; font-size: 15px; }
.entry-body b { display: block; font-size: 13px; }

/* ---------- Pied de page, toast ---------- */
.site-footer { display: grid; gap: 16px; padding: 50px var(--pad) 34px; border-top: 1px solid var(--line); font-size: 15px; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px 35px; margin-bottom: 8px; }
.site-footer .brand { font-size: 25px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.footer-about, .footer-lettre { margin: 0; max-width: none; }
.footer-credits { margin: 0; max-width: 110ch; font-size: 13px; color: var(--muted); }
.footer-credits a { text-decoration: underline; text-underline-offset: 3px; }
.toast { position: fixed; z-index: 100; left: 50%; bottom: 25px; display: flex; gap: 10px; align-items: center; width: max-content; max-width: calc(100% - 40px); padding: 14px 22px; background: var(--ink); color: var(--paper); font-size: 15px; box-shadow: 0 8px 45px #1a233c33; opacity: 0; visibility: hidden; transform: translate(-50%, 30px); transition: opacity .3s, transform .3s var(--ease), visibility 0s linear .3s; }
.toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .3s, transform .3s var(--ease); }

/* ---------- Mon carnet ---------- */
.drawer { position: fixed; inset: 0 0 0 auto; width: min(560px, 100%); max-width: 100%; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: var(--paper); color: var(--ink); box-shadow: -20px 0 60px #1a233c33; transform: translateX(100%); transition: transform .35s var(--ease); }
.drawer.open { transform: none; }
.drawer::backdrop { background: #1a233c66; }
.drawer-inner { display: flex; flex-direction: column; height: 100%; }
.drawer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 28px 28px 20px; border-bottom: 1px solid var(--line); }
.drawer-head .eyebrow { margin-bottom: 8px; }
.drawer-head h2 { font-size: 44px; margin: 0 0 6px; }
.drawer-count { margin: 0; font-size: 15px; }
.drawer-close { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border: 1px solid var(--ink); border-radius: 50%; font-size: 24px; line-height: 1; }
.drawer-body { flex: 1; overflow: auto; padding: 22px 28px 40px; }
.kept-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.kept { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding: 16px; background: var(--brume); }
.kept-art .picto { width: 48px; height: 48px; color: var(--accent); }
.kept h3 { font-family: var(--display); font-size: 21px; margin: 0 0 4px; }
.kept-cat { margin: 0 0 8px; font-size: 14px; }
.kept-actions { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.kept-actions .text-button { padding: 4px 0; }
.compare { margin-top: 28px; }
.compare h3 { font-family: var(--display); font-size: 23px; }
.compare-scroll { overflow-x: auto; }
.compare table { min-width: 100%; border-collapse: collapse; font-size: 14px; }
.compare th, .compare td { padding: 10px 12px 10px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.compare thead th { font-family: var(--display); font-size: 16px; letter-spacing: -.02em; }
.compare td.best::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--vermillon); }
.compare-note { font-size: 13px; margin-top: 10px; }
.kept-empty { position: relative; display: grid; justify-items: center; gap: 10px; padding: 40px 24px 28px; background: var(--brume); text-align: center; }
.kept-empty p { margin: 0; font-family: var(--display); font-size: 23px; font-weight: 700; }
.kept-empty span:not(.paper-pin) { font-size: 15px; max-width: 40ch; }

/* ---------- Fiche ---------- */
.detail-hero { padding-top: 35px; padding-bottom: 65px; }
.fil { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 45px; font-size: 15px; }
.back { gap: 8px; }
.back .ico { width: 18px; height: 18px; }
.detail-heading { display: grid; grid-template-columns: 1.4fr 1fr; gap: 7%; align-items: center; }
.detail-heading h1 { font-size: clamp(48px, 6vw, 90px); line-height: .98; max-width: 15ch; margin: 0 0 30px; }
.detail-heading .lead { font-size: 18px; max-width: 48ch; }
.fp-pourqui { max-width: 56ch; padding-left: 14px; border-left: 3px solid var(--vermillon); font-size: 16px; }
.fp-pourqui b { display: block; font-size: 13px; }
.fp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: 28px; }
/* L'emblème : un carré cobalt, le pictogramme de la fiche en blanc, ombre vermillon. */
.detail-emblem { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; max-width: 400px; aspect-ratio: 1; margin: auto; overflow: hidden; background: var(--accent); color: var(--on-accent); }
.emblem-ring { position: absolute; inset: 14%; border: 1px solid #ffffff59; border-radius: 50%; transform: rotateX(30deg) rotateZ(-30deg); }
.emblem-ring::after { content: ""; position: absolute; inset: -20px; border: 1px dashed #ffffff40; border-radius: 50%; }
.emblem-symbol { width: 38%; height: auto; aspect-ratio: 1; color: var(--on-accent); filter: drop-shadow(7px 9px 0 var(--vermillon)); }
.emblem-caption { margin-top: 20px; font-size: 15px; text-align: center; }
.detail-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 25px; margin: 65px 0 0; padding: 25px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.detail-metrics dt { margin-bottom: 10px; font-size: 13px; }
.detail-metrics dd { margin: 0; font-size: 17px; font-weight: 650; line-height: 1.4; }
.detail-metrics .wide { grid-column: auto; }
.week-section { background: var(--ciel); }
.weeks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; perspective: 1400px; }
.week { padding: 25px 20px; background: var(--paper); border-top: 6px solid var(--vermillon); box-shadow: 4px 7px 0 #244ed814; transform-origin: 50% 0; }
.week summary { display: block; list-style: none; cursor: pointer; }
.week summary::-webkit-details-marker { display: none; }
.week-number { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 18px; font-size: 13px; font-weight: 600; }
.week-number::after { content: "−"; font-size: 18px; line-height: 1; }
.week:not([open]) .week-number::after { content: "+"; }
.week-title { display: block; font-family: var(--display); font-size: 22px; font-weight: 700; line-height: 1.15; letter-spacing: -.03em; }
.measure { margin: 22px 0 0; padding-top: 17px; border-top: 1px solid var(--line); font-size: 15px; }
.measure strong { display: block; margin-bottom: 6px; font-size: 13px; }
.repere { position: relative; max-width: 720px; margin-top: 45px; padding: 34px 30px 24px; background: var(--paper); box-shadow: 8px 10px 0 #244ed814; transform: rotate(-1deg); }
.repere-k { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.repere-t { font-family: var(--display); font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: -.03em; }
.repere-n { margin: 0; font-size: 14px; color: var(--muted); }
.tableau { overflow-x: auto; }
.tableau table { width: 100%; border-collapse: collapse; font-size: 16px; }
.tableau th, .tableau td { padding: 14px 18px 14px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.tableau thead th { padding-bottom: 10px; border-top: 0; font-size: 13px; font-weight: 600; }
.t-criteres tbody th { width: 22%; font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.t-criteres .val { font-weight: 650; }
.t-criteres .val small { display: block; font-weight: 400; font-size: 14px; }
.palier { font-size: 13px; font-weight: 500; color: var(--muted); }
.auto-body { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px 8%; }
.split { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.split li { padding: 24px; background: var(--ciel); font-size: 16px; }
.split li.hand { background: var(--rose); }
.split b { display: block; margin-bottom: 8px; font-family: var(--display); font-size: 21px; letter-spacing: -.03em; }
.outils-k { font-size: 14px; font-weight: 600; }
.outils { margin: 0 0 20px; padding-left: 18px; font-size: 16px; }
.outils li { margin-bottom: 6px; }
.doc { font-size: 15px; }
.doc-src { font-size: 14px; }
.pays-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.pays-box { padding: 24px; border-top: 1px solid var(--line); background: transparent; }
.pays-box h3 { font-family: var(--display); font-size: 25px; margin-bottom: 10px; }
.pb-tag { display: none; margin-bottom: 10px; font-size: 13px; font-weight: 700; }
.pb-statut { font-weight: 650; }
.pb-texte { font-size: 16px; }
.pb-meta { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
html[data-pays="ch"] .pays-box[data-p="ch"], html[data-pays="fr"] .pays-box[data-p="fr"],
html[data-pays="be"] .pays-box[data-p="be"], html[data-pays="qc"] .pays-box[data-p="qc"],
html:not([data-pays]):has(#pays option[value="ch"]:checked) .pays-box[data-p="ch"],
html:not([data-pays]):has(#pays option[value="fr"]:checked) .pays-box[data-p="fr"],
html:not([data-pays]):has(#pays option[value="be"]:checked) .pays-box[data-p="be"],
html:not([data-pays]):has(#pays option[value="qc"]:checked) .pays-box[data-p="qc"] { order: -1; grid-column: 1 / -1; padding: 32px 30px 26px; border-top: 6px solid var(--vermillon); background: var(--paper); box-shadow: 6px 10px 0 #244ed814; }
html[data-pays="ch"] .pays-box[data-p="ch"] .pb-tag, html[data-pays="fr"] .pays-box[data-p="fr"] .pb-tag,
html[data-pays="be"] .pays-box[data-p="be"] .pb-tag, html[data-pays="qc"] .pays-box[data-p="qc"] .pb-tag { display: block; }
.pays-note { margin-top: 26px; font-size: 15px; }
/* « À relire dans votre contrat » : section cobalt, la règle du pays sur papier. */
.contract-section { display: grid; grid-template-columns: 1fr 1.3fr; gap: 25px 8%; align-items: start; background: var(--accent); color: var(--on-accent); }
.contract-section h2 { margin-bottom: 0; font-size: clamp(38px, 3.6vw, 56px); }
.vigil-list { list-style: none; margin: 0 0 24px; padding: 0; }
.vigil-list li { padding: 16px 0; border-top: 1px solid #ffffff55; font-size: 16px; }
.vigil-list b { display: block; margin-bottom: 4px; font-family: var(--display); font-size: 20px; letter-spacing: -.02em; }
.vc { padding: 18px 20px; background: var(--paper); color: var(--ink); font-size: 16px; }
.vc b { display: block; margin-bottom: 4px; }
.vc-src { display: block; margin-top: 6px; font-size: 14px; }
.autres { margin-top: 22px; }
.autres-k { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.autres ul { margin: 0; padding-left: 18px; font-size: 16px; }
.journal-section { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px 8%; background: var(--ciel); }
.journal-intro > p { max-width: 44ch; font-size: 16px; }
.journal-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: end; }
.journal-form label { display: block; font-size: 14px; font-weight: 600; }
.journal-form input, .journal-form select, .journal-form textarea { display: block; width: 100%; min-height: 48px; margin-top: 8px; padding: 12px 13px; border: 1px solid var(--trait); border-radius: 0; background: var(--paper); font-size: 16px; font-weight: 400; }
.journal-form textarea { height: 110px; resize: vertical; }
.journal-form input:user-invalid, .journal-form textarea:user-invalid { border-color: #b3261e; }
.journal-form .button { min-height: 50px; padding: 14px 16px; gap: 12px; font-size: 15px; }
.wide { grid-column: 1 / -1; }
.form-result { margin: 0; padding: 14px; background: #e6f1e2; color: #214221; font-size: 15px; }
.form-result:empty { display: none; }
.form-result.is-error { background: #fbe3df; color: #6e1d14; }
.journal-nojs { grid-column: 1 / -1; font-size: 16px; }
.journal-entries { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.journal-entries:empty { display: none; }
.journal-entry { position: relative; padding: 24px; background: var(--paper); }
.journal-entry > span { font-size: 13px; }
.journal-entry h3 { font-family: var(--display); font-size: 25px; margin: 8px 0 0; }
.journal-entry p { margin: 16px 0 0; font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; }
.journal-entry > strong { display: block; margin-top: 16px; font-size: 14px; }
.journal-entry .link-btn { margin-top: 12px; font-size: 13px; }
.journal-section > [data-journal-export] { grid-column: 1 / -1; justify-self: start; }
.fp-fin { grid-template-columns: 1fr 1fr; }
.fp-suite { display: grid; gap: 16px; }
.fp-suite a { position: relative; display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; align-items: center; padding: 20px 22px; background: var(--paper); font-family: var(--display); font-size: 21px; font-weight: 700; line-height: 1.15; letter-spacing: -.03em; box-shadow: 6px 9px 0 #244ed81f; transition: transform .3s var(--ease); }
.fp-suite a:first-child { transform: rotate(-1.5deg); }
.fp-suite a:last-child { transform: rotate(1.5deg); }
.fp-suite a:hover { transform: none; }
.fp-suite .picto { grid-row: span 2; width: 44px; height: 44px; color: var(--accent); }
.fp-suite small { font-family: var(--text); font-size: 13px; font-weight: 500; letter-spacing: 0; }

/* ---------- Pages de lecture : méthode, cadre par pays, données ---------- */
.doc-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 290px; align-items: center; gap: 40px 7%; padding: 55px var(--pad) 80px; background: var(--ciel); overflow: clip; }
.doc-hero .eyebrow a { text-decoration: underline; text-underline-offset: 4px; }
.doc-title { font-size: clamp(40px, 5.4vw, 84px); line-height: .98; letter-spacing: -.06em; word-spacing: .15em; max-width: 19ch; margin: 0 0 26px; }
.doc-hero .lead { max-width: 58ch; margin: 0; }
.doc-note { position: relative; padding: 34px 22px 22px; border: 1px solid #1a233c20; background: var(--paper); box-shadow: 5px 9px 0 #244ed81f; transform: rotate(4deg); }
.doc-note small { display: block; font-size: 13px; }
.doc-note p { margin: 10px 0 14px; font-family: var(--display); font-size: 25px; font-weight: 700; line-height: 1.1; letter-spacing: -.035em; }
.doc-body { padding-top: 70px; }
.doc-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 60px; align-items: start; }
.doc-toc { position: sticky; top: 112px; font-size: 15px; }
.doc-toc-k { margin: 0 0 12px; font-size: 14px; font-weight: 700; }
.doc-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.doc-toc a { display: block; margin-left: -1px; padding: 7px 0 7px 14px; border-left: 3px solid transparent; line-height: 1.35; }
.doc-toc a:hover, .doc-toc a.is-active { border-left-color: var(--accent); }
.doc-toc a.is-active { font-weight: 650; }
.prose { min-width: 0; max-width: 900px; font-size: 17px; line-height: 1.65; }
.prose > p, .prose > ul, .prose > ol { max-width: 70ch; }
.prose h2 { font-size: clamp(30px, 3vw, 46px); line-height: 1.05; margin: 64px 0 20px; scroll-margin-top: 110px; }
.prose > :first-child { margin-top: 0; }
.prose h3 { font-family: var(--display); font-size: 24px; margin: 34px 0 12px; }
.prose p, .prose ul, .prose ol { margin: 0 0 18px; }
.prose li { margin-bottom: 6px; }
.prose a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose hr { margin: 40px 0; border: 0; border-top: 1px solid var(--line); }
.encadre { position: relative; margin: 0 0 44px; padding: 30px 30px 14px; background: var(--brume); border-top: 6px solid var(--vermillon); }
.encadre > p:first-child { font-family: var(--display); font-size: 22px; letter-spacing: -.03em; }
.encadre ul { padding-left: 20px; }
.renvoi { position: relative; top: -.45em; line-height: 0; vertical-align: baseline; }
.renvoi a { display: inline-block; margin-left: 2px; padding: 1px 6px; border-radius: 10px; background: var(--ciel); font-size: 13px; font-weight: 700; line-height: 1.35; text-decoration: none !important; }
.renvoi a:hover { background: var(--accent); color: var(--on-accent); }
.prose .tableau { margin: 0 0 30px; }
.prose table { font-size: 15px; }
.prose table:has(th:nth-child(4)) { min-width: 680px; }
.prose thead th { font-family: var(--display); font-size: 16px; letter-spacing: -.01em; }
.journal { list-style: none; margin: 0 0 14px; padding: 0; }
.journal li { display: grid; grid-template-columns: 170px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.journal p { margin: 0; }
.journal time { font-weight: 650; }
.journal-next { font-size: 16px; color: var(--muted); }
.cadre-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.cadre-card { position: relative; padding: 28px 28px 66px; background: var(--brume); transition: transform .3s var(--ease); }
.cadre-card:nth-child(3) { background: var(--ciel); }
.cadre-card:nth-child(4) { background: var(--rose); }
.cadre-card:nth-child(5) { background: var(--nuage); }
.cadre-card:hover { transform: translateY(-5px) rotate(-.6deg); }
.cadre-comparatif { grid-column: 1 / -1; background: var(--accent); color: var(--on-accent); }
.cadre-k { margin: 0; font-size: 14px; font-weight: 600; }
.cadre-card h2 { font-size: clamp(26px, 2.7vw, 40px); line-height: 1.05; margin: 12px 0 14px; }
.cadre-card h2 a::after { content: ""; position: absolute; inset: 0; }
.cadre-card:focus-within { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 3px var(--paper); }
.cadre-card h2 a:focus-visible { outline: none; box-shadow: none; }
.cadre-card p { font-size: 16px; }
.cadre-go { position: absolute; right: 24px; bottom: 22px; }

/* ---------- Petits mouvements CSS (coupés en pause et en mouvement réduit) ---------- */
@keyframes bump { 40% { transform: scale(1.18); } }
@keyframes entre { from { opacity: 0; transform: translateX(15px); } }
@keyframes entre-retour { from { opacity: 0; transform: translateX(-15px); } }

/* ---------- Adaptation ---------- */
@media (min-width: 1600px) {
  .section, .site-header, .site-footer, .studio-hero, .doc-hero { padding-left: max(var(--pad), calc((100vw - 1500px) / 2)); padding-right: max(var(--pad), calc((100vw - 1500px) / 2)); }
  .studio-hero { column-gap: 80px; }
  .desk-card { width: 300px; min-height: 245px; }
}
@media (max-width: 1240px) {
  .head-nav { display: none; }
  .menu { display: block; }
  .header-end { margin-left: auto; }
}
@media (max-width: 1100px) {
  .section { padding-top: 80px; padding-bottom: 80px; }
  .brand { font-size: 30px; }
  .studio-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 25px; }
  .hero-title { font-size: 7vw; }
  .desk { min-height: 610px; }
  .desk-card { width: 225px; padding: 24px; }
  .desk-title { font-size: 28px; }
  .project-grid { grid-template-columns: 1fr 1fr; }
  .project-card { padding: 24px 22px; }
  .project-card h3 { font-size: 26px; }
  .crit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .weeks { grid-template-columns: 1fr 1fr; }
  .detail-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .journal-entries { grid-template-columns: 1fr 1fr; }
  .doc-grid { grid-template-columns: 200px minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 800px) {
  :root { --pad: 20px; }
  html { scroll-padding-top: 20px; }
  .site-header { flex-wrap: wrap; gap: 12px 10px; min-height: 0; padding: 14px var(--pad); }
  .brand { font-size: 27px; gap: 5px; }
  .header-end { display: contents; }
  .carnet-btn { margin-left: auto; }
  .cb-text, .motion-label, .menu summary span { display: none; }
  .carnet-btn, .motion-toggle, .menu summary { min-height: 40px; min-width: 40px; padding: 7px 10px; justify-content: center; }
  .country { order: 10; flex: 1 1 100%; padding-top: 8px; border-top: 1px solid var(--line); }
  .country select { max-width: none; }
  .menu-nav { position: fixed; left: var(--pad); right: var(--pad); top: 70px; min-width: 0; }
  .section { padding: 64px var(--pad); }
  h2 { font-size: clamp(36px, 9.5vw, 54px); }
  .section-intro { grid-template-columns: 1fr; gap: 22px; margin-bottom: 34px; }
  .section-intro .eyebrow { margin-bottom: -8px; }
  .section-intro > p:last-child, .section-intro > div > p { font-size: 16px; margin: 0; }
  .button { min-height: 54px; padding: 16px 20px; font-size: 15px; }
  .lead { font-size: 17px; max-width: 40ch; }
  .eyebrow { font-size: 13px; margin-bottom: 18px; }
  .studio-hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; min-height: 0; padding: 35px var(--pad) 40px; row-gap: 30px; }
  .studio-poster { bottom: -20px; font-size: 35vw; }
  .studio-copy { padding-top: 0; max-width: 600px; }
  .studio-copy .eyebrow { font-size: 15px; }
  .hero-title { font-size: clamp(46px, 11vw, 77px); line-height: 1.01; letter-spacing: -.06em; word-spacing: .1em; }
  .studio-copy .lead { font-size: 17px; max-width: 40ch; }
  /* Les trois papiers en escalier : chacun garde son titre lisible avant d'être déplacé. */
  .desk { width: 100%; max-width: 550px; min-height: 0; height: 730px; margin: 0 auto 40px; }
  .desk-heading { top: 0; }
  .desk-heading strong { font-size: 26px; }
  .desk-card { width: 225px; min-height: 0; padding: 24px 20px 20px; touch-action: pan-y; }
  .desk-title { font-size: 25px; margin: 16px 0 22px; }
  .desk-card > small { font-size: 14px; }
  .desk-card a { font-size: 14px; padding-top: 13px; }
  .desk-card-0 { top: 78px; left: 0; }
  .desk-card-1 { top: 39%; right: 0; }
  .desk-card-2 { top: 67%; bottom: auto; left: 0; }
  .reset-desk { bottom: -46px; right: 0; }
  .path-stage { min-height: 0; padding-top: 0; }
  .path-line { width: 130%; max-width: none; left: -15%; transform: rotate(50deg); }
  .path-steps { grid-template-columns: 1fr 1fr; gap: 30px 14px; min-height: 0; }
  .path-steps li { align-self: start !important; padding: 12px 10px; }
  .path-steps li:nth-child(2n) { margin-top: 50px; }
  .path-steps h3 { font-size: 28px; }
  .path-steps p { font-size: 14px; }
  .quiz-section { grid-template-columns: 1fr; gap: 10px; }
  .quiz, .quiz-fallback { padding: 24px 20px; box-shadow: 8px 8px 0 var(--ombre-cobalt); }
  .quiz-section { padding-bottom: 72px; }
  .q-title { font-size: 26px; }
  .choices { gap: 8px; }
  .choices.three, .choices.four { grid-template-columns: 1fr; }
  .q-opt { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; min-height: 0; padding: 14px; text-align: left; column-gap: 12px; row-gap: 2px; }
  .q-opt .o-ico { flex: 0 0 30px; }
  .q-opt b { flex: 1 1 auto; }
  .q-opt small { flex: 1 1 100%; padding-left: 42px; }
  .reco { grid-template-columns: 1fr; padding: 22px 18px; }
  .reco-art .picto { width: 48px; height: 48px; }
  .chips legend { float: none; width: 100%; margin-bottom: 6px; }
  .tb-row { gap: 16px; }
  .search, .sort { flex: 1 1 100%; }
  .search input, .sort select { width: 100%; max-width: none; }
  .count { margin: 0; }
  .project-grid { grid-template-columns: 1fr; }
  .project-card { padding: 24px 20px; }
  .project-card h3 { font-size: 28px; }
  .rules-content, .m-two, .faq-section, .page-offer, .fp-fin, .contract-section, .journal-section, .auto-body, .pays-grid { grid-template-columns: 1fr; }
  .rules-content { gap: 30px; }
  .crit-grid { grid-template-columns: 1fr 1fr; gap: 22px 16px; margin-bottom: 50px; }
  .crit h3 { font-size: 20px; }
  .proofs li { grid-template-columns: 1fr; gap: 4px; }
  .page-offer h2 { font-size: 42px; }
  .entry { justify-self: stretch; transform: rotate(1deg); padding: 34px 20px 22px; }
  .site-footer { padding: 35px var(--pad); }
  .detail-hero { padding-top: 25px; }
  .fil { margin-bottom: 30px; }
  .detail-heading { grid-template-columns: 1fr; gap: 10px; }
  .detail-heading h1 { font-size: clamp(42px, 11vw, 68px); }
  .detail-heading .lead { font-size: 16px; }
  .detail-emblem { max-width: 230px; margin-top: 16px; }
  .detail-metrics { grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 35px; }
  .detail-metrics .st-skill { grid-column: 1 / -1; }
  .detail-metrics dd { font-size: 16px; }
  .weeks { grid-template-columns: 1fr; }
  .week-title { font-size: 21px; }
  .repere { transform: none; padding: 32px 20px 20px; }
  .repere-t { font-size: 22px; }
  .t-criteres thead { display: none; }
  .t-criteres, .t-criteres tbody, .t-criteres tr, .t-criteres th, .t-criteres td { display: block; width: auto !important; }
  .t-criteres tr { padding: 16px 0; border-top: 1px solid var(--line); }
  .t-criteres th, .t-criteres td { padding: 2px 0; border: 0; }
  .t-criteres tbody th { font-size: 21px; margin-bottom: 4px; }
  .t-criteres td:last-child { margin-top: 6px; font-size: 15px; color: var(--muted); }
  .journal-form { grid-template-columns: 1fr 1fr; gap: 14px; }
  .journal-form .button { grid-column: 1 / -1; }
  .journal-entries { grid-template-columns: 1fr; }
  .doc-hero { grid-template-columns: 1fr; padding: 40px var(--pad) 60px; gap: 30px; }
  .doc-title { font-size: clamp(36px, 10vw, 58px); }
  .doc-note { justify-self: start; max-width: 300px; transform: rotate(2deg); }
  .doc-body { padding-top: 40px; }
  .doc-grid { grid-template-columns: 1fr; gap: 26px; }
  .doc-toc { position: static; padding: 18px 20px; background: var(--brume); }
  .prose { font-size: 16px; }
  .prose h2 { margin-top: 48px; }
  .encadre { padding: 24px 20px 10px; }
  .journal li { grid-template-columns: 1fr; gap: 4px; }
  .cadre-grid { grid-template-columns: 1fr; }
  .cadre-card { padding: 24px 22px 60px; }
}
@media (max-width: 400px) {
  /* En-tête sur une ligne dès 320 px : logo, « Mon carnet », pause, menu. */
  .site-header { column-gap: 6px; }
  .brand { font-size: 21px; gap: 4px; }
  .carnet-btn { padding: 7px 8px; }
  .hero-title { font-size: 12.4vw; }
  .desk { height: 720px; }
  .desk-card { width: 200px; padding: 22px 16px 16px; }
  .desk-title { font-size: 22px; }
  .crit-grid { grid-template-columns: 1fr; }
  .journal-form { grid-template-columns: 1fr; }
}

/* ---------- Mouvement réduit et pause : aucun mouvement imposé ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .hero-title > span { will-change: auto; }
  .cadre-card:hover, .fp-suite a:hover { transform: none; }
}
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
.motion-paused .cadre-card:hover { transform: none; }