/* 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;
}
/* Repli ajusté sur Bricolage Grotesque, le temps qu'elle arrive (elle n'est pas préchargée) :
   Arial gras du système (local(), aucun fichier téléchargé), calé sur ses hauteurs (ascendante
   93 %, descendante 27 % de l'em, divisées par size-adjust) et sur ses largeurs, pour que les
   titres gardent leurs retours à la ligne au passage d'une police à l'autre. Les largeurs de
   Bricolage varient avec sa taille optique : un repli par taille de titre et par largeur
   d'écran, réglé dans Chromium sur les titres des 21 pages (voir « Titres » plus bas). Réglage
   valable pour les titres actuels : un nouveau titre, ou un titre réécrit, peut retrouver un
   petit saut au passage de police ; il ne change rien au rendu final. */
@font-face {
  font-family: "Bricolage repli";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 100 900;
  font-style: normal;
  size-adjust: 100.5%;
  ascent-override: 92.5%;
  descent-override: 26.9%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Bricolage repli 990";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 100 900;
  font-style: normal;
  size-adjust: 99%;
  ascent-override: 93.9%;
  descent-override: 27.3%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Bricolage repli 975";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 100 900;
  font-style: normal;
  size-adjust: 97.5%;
  ascent-override: 95.4%;
  descent-override: 27.7%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Bricolage repli 973";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 100 900;
  font-style: normal;
  size-adjust: 97.3%;
  ascent-override: 95.6%;
  descent-override: 27.7%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Bricolage repli 965";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 100 900;
  font-style: normal;
  size-adjust: 96.5%;
  ascent-override: 96.4%;
  descent-override: 28.0%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Bricolage repli 935";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 100 900;
  font-style: normal;
  size-adjust: 93.5%;
  ascent-override: 99.5%;
  descent-override: 28.9%;
  line-gap-override: 0%;
}
@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", "Bricolage repli", "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; }
/* Titres : le repli de leur taille, pour garder le même nombre de lignes. */
h1 { font-family: "Bricolage Grotesque", "Bricolage repli 975", "Arial Narrow", Arial, sans-serif; }
@media (max-width: 360px) { h1 { font-family: "Bricolage Grotesque", "Bricolage repli 990", "Arial Narrow", Arial, sans-serif; } }
@media (min-width: 801px) {
  h1 { font-family: "Bricolage Grotesque", "Bricolage repli 965", "Arial Narrow", Arial, sans-serif; }
  h2 { font-family: "Bricolage Grotesque", "Bricolage repli 973", "Arial Narrow", Arial, sans-serif; }
  .cadre-card h2 { font-family: var(--display); }
  .drawer h2 { font-family: "Bricolage Grotesque", "Bricolage repli 990", "Arial Narrow", Arial, sans-serif; }
}
@media (min-width: 1101px) { h1 { font-family: "Bricolage Grotesque", "Bricolage repli 935", "Arial Narrow", Arial, sans-serif; } }
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; }

/* L'arrivée, en CSS : titres, chapeaux et papiers sont visibles dès le premier rendu (aucune
   opacité, aucun masque), seule leur position bouge, sans attendre GSAP ; le plus grand élément
   de la page s'affiche ainsi dès la première image. Elle n'existe que si l'appareil accepte le
   mouvement et hors pause : en mouvement réduit ou en pause, rien ne bouge ; après une
   reprise, elle ne rejoue pas (site.js pose .sans-arrivee au premier changement). motion.js la
   termine avant de déplacer un papier. */
@keyframes monte { from { translate: 0 .5em; } }
@keyframes glisse { from { translate: 0 24px; } }
@keyframes pose { from { translate: 0 90px; rotate: 14deg; } }
@keyframes tourne { from { rotate: -35deg; scale: .6; } }
@media (prefers-reduced-motion: no-preference) {
  html:not(.motion-paused):not(.sans-arrivee) .hero-title > span { animation: monte .9s var(--ease) both; }
  html:not(.motion-paused):not(.sans-arrivee) .hero-title > span:nth-child(2) { animation-delay: .08s; }
  html:not(.motion-paused):not(.sans-arrivee) .hero-title > span:nth-child(3) { animation-delay: .16s; }
  html:not(.motion-paused):not(.sans-arrivee) :is(.studio-copy .lead, .studio-copy .button, .detail-copy > *, .detail-metrics > div, .doc-hero-copy > *) { animation: glisse .7s var(--ease) .2s both; }
  html:not(.motion-paused):not(.sans-arrivee) :is(.desk-card, .doc-note) { animation: pose 1.1s var(--ease) .15s both; }
  html:not(.motion-paused):not(.sans-arrivee) .desk-card-1 { animation-delay: .27s; }
  html:not(.motion-paused):not(.sans-arrivee) .desk-card-2 { animation-delay: .39s; }
  html:not(.motion-paused):not(.sans-arrivee) .emblem-symbol { animation: tourne 1.2s var(--ease) .1s both; }
}

/* ---------- 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: 8.5em; }
.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; }
.footer-retrait { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* Question de la mesure d'audience (Union et EEE hors France, T-060) : en bas de l'écran, sans
   voile ni blocage de la page ; deux boutons de même poids. */
.compte-question { position: fixed; z-index: 90; left: 50%; bottom: 20px; transform: translateX(-50%); width: min(640px, calc(100% - 32px)); max-height: calc(100vh - 40px); overflow-y: auto; padding: 20px 22px; background: var(--paper); color: var(--ink); border: 1px solid var(--ink); box-shadow: 0 8px 45px #1a233c33; font-size: 15px; line-height: 1.5; }
.compte-question p { margin: 0 0 12px; max-width: none; }
.compte-question a { text-decoration: underline; text-underline-offset: 3px; }
.compte-question-titre { font-family: var(--display); font-weight: 700; font-size: 19px; }
.compte-question-choix { display: flex; gap: 12px; margin: 0; }
.compte-question-choix .button { flex: 1 1 0; justify-content: center; min-height: 48px; padding: 12px 18px; }
.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; }
/* Largeurs des titres en em, pas en ch : le ch dépend de la police, et le repli de
   Bricolage (plus étroit) aurait rétréci la boîte du titre avant l'arrivée de la police.
   15ch, 19ch et 13ch de Bricolage valent 9em, 11,4em et 8,5em à ces tailles. */
.detail-heading h1 { font-size: clamp(48px, 6vw, 90px); line-height: .98; max-width: 9em; 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: 11.4em; 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); max-width: 12em; }
  .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; }