/* Lumo · Convention nationale des avocats. DA du logiciel Lumo (Figma 2.8) : Bricolage Grotesque, fond crème,
   tuiles à contour encre, ✦ du logo, halo vert. Pensé d'abord pour le téléphone. */

@font-face {
  font-family: "Bricolage Grotesque";
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/bricolage-grotesque-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/bricolage-grotesque-latin-600-normal.woff2") format("woff2");
}

:root {
  --encre: #272420;
  --s900: #433e38;
  --s800: #645d54;
  --s700: #7c746b;
  --s600: #b1a99d;
  --s400: #dcd4ca;
  --s300: #e6e1d6;
  --s200: #eeeae2;
  --s100: #f4f0ea;
  --clair: #fcfaf7;
  --vert: #64f29d;
  --citron: #f2ff99;
  --lavande: #d0c9fe;
  --t-vert: #9eefb5;
  --t-rose: #fbc8c7;
  --rayon: 0.9rem;
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--s100);
  color: var(--encre);
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.45;
  min-height: 100vh;
  overflow-x: hidden;
}
a { color: inherit; }
sup { font-size: 0.6em; }

/* ───── Fond : les boules Lumo ─────
   Leur animation est calée sur l'horloge du serveur (--horloge) : elles continuent leur course d'une page à l'autre. */
.fond { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.orbe { position: absolute; border-radius: 50%; will-change: transform; }
.o1 {
  width: 30rem;
  height: 30rem;
  right: -15rem;
  top: -14rem;
  background: radial-gradient(circle, var(--vert) 0%, rgba(184, 249, 144, 0.85) 30%, rgba(242, 255, 153, 0.5) 50%, rgba(242, 255, 153, 0) 70%);
  opacity: 0.78;
}
.o2, .o3, .grain, .o-curseur { display: none; }
.o2 {
  width: 24rem;
  height: 24rem;
  left: -12rem;
  top: 38vh;
  background: radial-gradient(circle, rgba(242, 255, 153, 0.95) 0%, rgba(242, 255, 153, 0.45) 40%, rgba(242, 255, 153, 0) 70%);
}
.o3 {
  width: 22rem;
  height: 22rem;
  right: -10rem;
  bottom: -9rem;
  background: radial-gradient(circle, rgba(208, 201, 254, 0.9) 0%, rgba(208, 201, 254, 0.4) 42%, rgba(208, 201, 254, 0) 70%);
}
.grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  opacity: 0.09;
  mix-blend-mode: multiply;
}
.fond-boule .o1 { animation: derive-a 38s ease-in-out var(--horloge, 0s) infinite alternate; }
.fond-nuee .o2, .fond-nuee .o3, .fond-nuee .grain, .fond-audace .o2, .fond-audace .o3, .fond-audace .grain { display: block; }
.fond-nuee .o1, .fond-audace .o1 { animation: derive-a 34s ease-in-out var(--horloge, 0s) infinite alternate; }
.fond-nuee .o2, .fond-audace .o2 { animation: derive-b 43s ease-in-out var(--horloge, 0s) infinite alternate; }
.fond-nuee .o3, .fond-audace .o3 { animation: derive-c 51s ease-in-out var(--horloge, 0s) infinite alternate; }
.fond-audace .o1 {
  background: radial-gradient(circle, var(--teinte, var(--vert)) 0%, color-mix(in srgb, var(--teinte, var(--vert)) 55%, transparent) 34%, transparent 70%);
  opacity: 0.85;
}
@keyframes derive-a {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  25% { transform: translate3d(-24vw, 20vh, 0) scale(1.12); }
  50% { transform: translate3d(-52vw, 44vh, 0) scale(0.92); }
  75% { transform: translate3d(-20vw, 66vh, 0) scale(1.06); }
  100% { transform: translate3d(-44vw, 18vh, 0) scale(1); }
}
@keyframes derive-b {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  33% { transform: translate3d(32vw, -22vh, 0) scale(1.15); }
  66% { transform: translate3d(58vw, 16vh, 0) scale(0.94); }
  100% { transform: translate3d(22vw, 38vh, 0) scale(1.1); }
}
@keyframes derive-c {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-52vw, -42vh, 0) scale(1.2); }
  100% { transform: translate3d(-24vw, -72vh, 0) scale(0.9); }
}
.fond-aurore .o1 {
  width: 150vw;
  height: 78vh;
  left: -25vw;
  right: auto;
  top: -40vh;
  background: radial-gradient(closest-side, var(--vert) 0%, #b8f990 42%, rgba(242, 255, 153, 0.7) 72%, rgba(242, 255, 153, 0) 100%);
  opacity: 0.9;
  animation: aurore-a 19s ease-in-out var(--horloge, 0s) infinite alternate;
}
.fond-aurore .o2 {
  display: block;
  width: 95vw;
  height: 55vh;
  left: 45vw;
  top: -24vh;
  background: radial-gradient(closest-side, rgba(208, 201, 254, 0.75) 0%, rgba(208, 201, 254, 0) 100%);
  animation: aurore-b 25s ease-in-out var(--horloge, 0s) infinite alternate;
}
.fond-aurore .grain { display: block; }
@keyframes aurore-a {
  0% { transform: translate3d(-8vw, 0, 0) scale(1) rotate(-4deg); }
  100% { transform: translate3d(8vw, 5vh, 0) scale(1.14) rotate(5deg); }
}
@keyframes aurore-b {
  0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.6; }
  100% { transform: translate3d(-30vw, 8vh, 0) scale(1.2); opacity: 1; }
}
.etincelle {
  position: absolute;
  width: 0.9rem;
  height: 0.9rem;
  fill: var(--s600);
  opacity: 0;
  transform: scale(0);
  animation: scintille 7s ease-in-out var(--d, 0s) infinite;
}
.etincelle:nth-child(3n) { fill: #2fbf6c; }
@keyframes scintille {
  0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
  12% { opacity: 0.9; transform: scale(var(--s, 1)) rotate(45deg); }
  26% { opacity: 0; transform: scale(0) rotate(90deg); }
}
@supports (animation-timeline: scroll()) {
  .f-parallaxe .fond { animation: parallaxe linear both; animation-timeline: scroll(root block); }
  @keyframes parallaxe { to { transform: translate3d(0, -24vh, 0); } }
}
.f-curseur .o-curseur {
  display: block;
  left: 0;
  top: 0;
  width: 17rem;
  height: 17rem;
  opacity: 0;
  transition: opacity 0.8s;
  background: radial-gradient(circle, rgba(100, 242, 157, 0.55) 0%, rgba(242, 255, 153, 0.25) 45%, rgba(242, 255, 153, 0) 70%);
}
.f-curseur .o-curseur.actif { opacity: 1; }
.page { position: relative; z-index: 1; max-width: 36rem; margin: 0 auto; padding: 1.1rem 1rem 3rem; }

/* En-tête */
.tete { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.4rem; }
.logo img { display: block; width: 5.5rem; height: auto; }
.tete nav { margin-left: auto; display: flex; gap: 1rem; font-size: 0.9rem; }
.tete nav a { text-decoration: none; color: var(--s800); }
.tete nav a:hover { color: var(--encre); text-decoration: underline; }
.pastille-stand {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--lavande);
  border-radius: 0.4rem;
  padding: 0.2rem 0.5rem;
  white-space: nowrap;
}

/* Étoile ✦ */
.e { width: 1rem; height: 1rem; fill: var(--encre); flex: none; display: inline-block; vertical-align: -0.12em; }
.e.grise { fill: var(--s600); }
.e.vide { fill: none; stroke: var(--encre); stroke-width: 4.5; }

/* Titres et textes */
h1 { font-size: 1.75rem; line-height: 1.12; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 0.7rem; }
.chapeau { color: var(--s900); margin-bottom: 1.4rem; }
.numero {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--s700);
  margin: 1.2rem 0 0.5rem;
}
.situation { font-size: 1.1rem; line-height: 1.5; margin-bottom: 1.3rem; }
.essai {
  display: inline-block;
  font-size: 0.8rem;
  background: var(--citron);
  border-radius: 0.4rem;
  padding: 0.15rem 0.5rem;
  margin-bottom: 0.6rem;
}
.mention { font-size: 0.8rem; color: var(--s700); margin-top: 1.4rem; }

/* Bandeau d'audace */
.bandeau {
  background: var(--fond);
  border-radius: var(--rayon);
  padding: 1.1rem 1.1rem 1rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.b-label { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.78; margin-bottom: 0.15rem; }
.b-nom { font-size: 1.35rem; font-weight: 600; line-height: 1.1; }
.b-etoiles { display: flex; gap: 0.3rem; }
.b-etoiles .e { width: 1.15rem; height: 1.15rem; }
.bandeau.compact { padding: 0.7rem 0.9rem; }
.bandeau.compact .b-nom { font-size: 1.05rem; }
.bandeau.compact .b-etoiles .e { width: 0.9rem; height: 0.9rem; }

/* Pièce « La clause » */
.doc {
  background: var(--clair);
  border: 1px solid var(--s600);
  border-radius: var(--rayon);
  padding: 1.1rem 1.2rem 1.25rem;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
}
.doc-titre { font-weight: 600; }
.filet { display: flex; align-items: center; gap: 0.25rem; margin: 0.7rem 0 0.8rem; }
.filet span { flex: 1; height: 1px; background: var(--s400); }
.filet .e { width: 0.85rem; height: 0.85rem; }
.clause { font-size: 1.3rem; line-height: 1.28; font-weight: 600; }
.doc.compacte { padding: 0.9rem 1rem 1rem; }
.doc.compacte .clause { font-size: 1.05rem; }

/* Vote */
.vote { margin-top: 1.6rem; display: flex; flex-direction: column; gap: 0.6rem; }
.vote h2 { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.2rem; }
.choix {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 3.5rem;
  padding: 0.8rem 1rem;
  background: var(--clair);
  border: 1.5px solid var(--encre);
  border-radius: var(--rayon);
  font: inherit;
  font-weight: 600;
  color: var(--encre);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow 0.15s, transform 0.1s;
}
.choix:hover { box-shadow: 0 1px 7px rgba(100, 242, 157, 0.55); border-color: var(--encre); }
.choix:active { transform: scale(0.99); }
.choix .case { width: 1.1rem; height: 1.1rem; border: 1.5px solid var(--encre); border-radius: 0.25rem; flex: none; }
.choix.rayee .mot { text-decoration: line-through; text-decoration-thickness: 2px; }
.reserves summary { list-style: none; }
.reserves summary::-webkit-details-marker { display: none; }
.reserves summary::after { content: "+"; margin-left: auto; font-size: 1.3rem; line-height: 1; color: var(--s800); }
.reserves[open] summary { border-bottom-left-radius: 0.3rem; border-bottom-right-radius: 0.3rem; background: var(--s200); }
.reserves[open] summary::after { content: "–"; }
.sous-choix { display: flex; flex-direction: column; gap: 0.45rem; padding: 0.55rem 0 0.2rem 1.4rem; }
.choix.sous { min-height: 3rem; font-weight: 400; border-width: 1px; }
.rappel {
  margin-top: 1.2rem;
  background: var(--t-vert);
  border-radius: var(--rayon);
  padding: 0.8rem 1rem;
  font-size: 0.95rem;
}

/* Après le vote */
.votre-reponse { margin-top: 1.3rem; color: var(--s900); }
.accueil { font-size: 1.35rem; line-height: 1.25; font-weight: 600; margin-top: 0.5rem; }
.position {
  position: relative;
  margin-top: 1.4rem;
  background: var(--clair);
  border: 1.5px solid var(--encre);
  border-radius: var(--rayon);
  padding: 1.15rem 1.2rem 1.3rem;
  box-shadow: 0 1px 7px rgba(100, 242, 157, 0.5), 0 0 0 3px rgba(100, 242, 157, 0.35);
}
.position .coin { position: absolute; width: 1.6rem; height: 1.6rem; top: -0.8rem; right: -0.8rem; fill: var(--vert); }
.position h2 { display: flex; align-items: center; gap: 0.4rem; font-size: 1rem; font-weight: 600; margin-bottom: 0.6rem; }
.position h2 img { width: 3.9rem; height: auto; }
.position p { line-height: 1.5; }

/* Boutons */
.actions { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.6rem; }
.actions form { display: contents; }
.bouton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3.3rem;
  padding: 0.7rem 1rem;
  border-radius: var(--rayon);
  border: 1.5px solid var(--encre);
  background: var(--encre);
  color: var(--clair);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.bouton.secondaire { background: var(--clair); color: var(--encre); }
.bouton.petit { min-height: 2.4rem; width: auto; padding: 0.35rem 0.8rem; font-size: 0.9rem; }
.fin { text-align: center; font-weight: 600; padding: 0.6rem 0; }
.suite { margin-top: 1.4rem; }

/* Liste des situations */
.liste { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; }
.item {
  display: block;
  text-decoration: none;
  background: var(--clair);
  border: 1.5px solid var(--encre);
  border-radius: var(--rayon);
  padding: 0.85rem 1rem 1rem;
}
.item:hover { box-shadow: 0 1px 7px rgba(100, 242, 157, 0.55); }
.item.fait { border-color: var(--s600); }
.item-tete { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.45rem; font-size: 0.8rem; }
.item-num { color: var(--s700); letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.75rem; }
.item-fait { margin-left: auto; display: inline-flex; align-items: center; gap: 0.25rem; color: var(--s800); }
.item-fait .e { width: 0.8rem; height: 0.8rem; fill: #2fbf6c; }
.item-clause { display: block; font-weight: 600; font-size: 1.05rem; line-height: 1.3; }
.pastille {
  display: inline-block;
  background: var(--fond);
  border-radius: 0.4rem;
  padding: 0.12rem 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
}

/* Page Lumo */
.lumo h1 { font-size: 2rem; margin-bottom: 1rem; }
.constat { margin-bottom: 1.4rem; }
.constat strong { font-weight: 600; }
.bloc { margin-bottom: 1.1rem; }
.bloc h2 { display: flex; align-items: center; gap: 0.5rem; font-size: 1.1rem; font-weight: 600; margin-bottom: 0.3rem; }
.bloc h2 .e { width: 0.9rem; height: 0.9rem; }
.bloc p { color: var(--s900); padding-left: 1.4rem; }
.signature { margin-top: 1.4rem; padding-top: 0.2rem; }
.signature p { font-size: 1.15rem; font-weight: 600; line-height: 1.32; }

/* Espace d'Eïtan */
.personne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
  background: var(--lavande);
  border-radius: var(--rayon);
  padding: 0.6rem 0.8rem;
  margin-bottom: 1.2rem;
  font-size: 0.9rem;
}
.filtres { display: flex; flex-direction: column; gap: 0.6rem; margin: 0.4rem 0 1.2rem; }
.filtres label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.8rem; color: var(--s800); }
.filtres select {
  font: inherit;
  font-size: 0.95rem;
  color: var(--encre);
  background: var(--clair);
  border: 1px solid var(--s600);
  border-radius: 0.6rem;
  padding: 0.55rem 0.6rem;
}
.chiffres { display: flex; gap: 0.7rem; margin-bottom: 1.2rem; }
.chiffres div {
  flex: 1;
  background: var(--clair);
  border: 1.5px solid var(--encre);
  border-radius: var(--rayon);
  padding: 0.7rem 0.9rem;
}
.chiffres strong { display: block; font-size: 1.8rem; line-height: 1.1; }
.chiffres span { color: var(--s800); font-size: 0.85rem; }
.section { font-size: 1.15rem; margin: 1.8rem 0 0.7rem; }
.stat {
  background: var(--clair);
  border: 1px solid var(--s600);
  border-radius: var(--rayon);
  padding: 0.85rem 1rem 0.95rem;
  margin-bottom: 0.7rem;
}
.stat.global { border: 1.5px solid var(--encre); }
.stat h2, .stat h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; font-size: 1rem; font-weight: 600; margin-bottom: 0.6rem; }
.stat .n { margin-left: auto; font-weight: 400; color: var(--s800); font-size: 0.85rem; }
.barre { display: flex; height: 0.9rem; border-radius: 0.45rem; overflow: hidden; background: var(--s200); border: 1px solid var(--encre); }
.barre span { display: block; height: 100%; }
.barre .approuve, .puce.approuve { background: var(--t-vert); }
.barre .reserve, .puce.reserve { background: var(--lavande); }
.barre .rayee, .puce.rayee { background: var(--t-rose); }
.barre span + span { border-left: 1px solid var(--encre); }
.barre span[style="width:0%"] { border: 0; }
.legende { list-style: none; margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; }
.legende > li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
.legende .val { margin-left: auto; font-variant-numeric: tabular-nums; }
.puce { width: 0.75rem; height: 0.75rem; border-radius: 0.2rem; border: 1px solid var(--encre); }
.detail { list-style: none; width: 100%; padding-left: 1.2rem; color: var(--s800); font-size: 0.84rem; }
.detail li { display: flex; }
.vide { color: var(--s700); font-size: 0.9rem; }

@media (min-width: 40rem) {
  .page { padding-top: 1.6rem; }
  h1 { font-size: 2rem; }
  .filtres { flex-direction: row; flex-wrap: wrap; }
  .filtres label { flex: 1 1 10rem; }
}

/* ═════════════ Effets à choisir (style.ts) ═════════════ */

/* Compteur de réponses dans l'en-tête */
.progression {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--clair);
  border: 1px solid var(--s600);
  border-radius: 2rem;
  padding: 0.15rem 0.6rem 0.15rem 0.25rem;
}
.progression ~ nav { margin-left: 0.6rem; }
.progression svg { width: 1.35rem; height: 1.35rem; transform: rotate(-90deg); }
.progression .piste { fill: none; stroke: var(--s300); stroke-width: 3.5; }
.progression .part { fill: none; stroke: #2fbf6c; stroke-width: 3.5; stroke-linecap: round; }
.js .progression .part { animation: anneau 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s backwards; }
@keyframes anneau { from { stroke-dasharray: 0 60; } }

/* En-tête qui reste en haut */
.f-entete .tete {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: -1.1rem -1rem 1.2rem;
  padding: calc(0.8rem + env(safe-area-inset-top)) 1rem 0.8rem;
  transition: background 0.3s, box-shadow 0.3s;
}
.f-entete.defile .tete {
  background: rgba(244, 240, 234, 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 1px 0 rgba(39, 36, 32, 0.08);
}
@media (min-width: 40rem) { .f-entete .tete { border-radius: 0 0 1rem 1rem; } }

/* Apparition au défilement */
.js.f-apparition .rv { opacity: 0; transform: translateY(18px); }
.js.f-apparition .rv.vu {
  opacity: 1;
  transform: none;
  animation: rv-entree 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 75ms);
}
@keyframes rv-entree { from { opacity: 0; transform: translateY(18px) scale(0.985); } }

/* Transitions entre les pages (navigateurs récents ; ailleurs, la page change simplement) */
.f-transitions .logo { view-transition-name: logo; }
.f-transitions .bandeau { view-transition-name: bandeau; }
.f-transitions .piece-clause { view-transition-name: clause; }
.f-transitions .fond { view-transition-name: fond; }
.f-transitions .tete nav { view-transition-name: nav; }
.js.f-transitions .bandeau.rv, .js.f-transitions .piece-clause.rv { opacity: 1; transform: none; animation: none; }
::view-transition-group(*) { animation-duration: 0.5s; animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); }
::view-transition-old(root) { animation: vt-sortie 0.22s ease both; }
::view-transition-new(root) { animation: vt-entree 0.4s ease 0.05s both; }
@keyframes vt-sortie { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-entree { from { opacity: 0; transform: translateY(14px); } }

/* Étoiles qui s'allument, filets qui se tracent */
.js.f-etoiles .bandeau.vu .b-etoiles .e { animation: etoile-pop 0.55s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
.js.f-etoiles .bandeau.vu .b-etoiles .e:nth-child(1) { animation-delay: 0.25s; }
.js.f-etoiles .bandeau.vu .b-etoiles .e:nth-child(2) { animation-delay: 0.37s; }
.js.f-etoiles .bandeau.vu .b-etoiles .e:nth-child(3) { animation-delay: 0.49s; }
.js.f-etoiles .bandeau.vu .b-etoiles .e:nth-child(4) { animation-delay: 0.61s; }
@keyframes etoile-pop { from { transform: scale(0) rotate(-120deg); opacity: 0; } }
.js.f-etoiles .vu .filet span { transform-origin: left; animation: filet-trace 0.9s cubic-bezier(0.6, 0.1, 0.2, 1) 0.2s both; }
.js.f-etoiles .vu .filet .e { animation: etoile-pop 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) 0.95s both; }
@keyframes filet-trace { from { transform: scaleX(0); } }
.js.f-etoiles .heros-lueur { animation: lueur 4.5s ease-in-out infinite alternate; }
@keyframes lueur { from { transform: scale(0.82); opacity: 0.7; } to { transform: scale(1.18); opacity: 1; } }

/* Clause surlignée (le trait passe ligne après ligne) */
.surligne { padding: 0 0.06em; }
.clause-surlignage .piece-clause .surligne {
  background-image: linear-gradient(var(--citron), var(--citron));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% 42%;
}
.js:not(.mouvement-reduit).clause-surlignage .piece-clause:not(.compacte) .surligne { background-size: 0% 42%; transition: background-size 1.5s cubic-bezier(0.6, 0.1, 0.2, 1) 0.5s; }
.js.clause-surlignage .piece-clause.vu .surligne { background-size: 100% 42%; }

/* Clause écrite lettre à lettre */
.curseur-texte {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.14em;
  background: var(--encre);
  animation: clignote 0.9s steps(1) infinite;
}
.curseur-texte.fini { opacity: 0; transition: opacity 0.5s; animation: none; }
@keyframes clignote { 50% { opacity: 0; } }

/* Réponse choisie */
.f-vote form.a-choisi .choix:not(.choisi) { opacity: 0.38; transition: opacity 0.3s; }
.f-vote .choix.choisi {
  background: #effdf3;
  box-shadow: 0 0 0 3px rgba(100, 242, 157, 0.6), 0 3px 16px rgba(100, 242, 157, 0.6);
}
.f-vote .choix.choisi .case {
  background: var(--vert) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23272420' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 85% no-repeat;
  animation: case-coche 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}
@keyframes case-coche { from { transform: scale(0.4); } }

/* Position de Lumo : halo et coche */
.verdict { display: none; }
.f-position .position .verdict { display: inline-flex; margin-left: auto; width: 2.1rem; height: 2.1rem; }
.verdict svg { width: 100%; height: 100%; overflow: visible; }
.verdict circle { fill: #c9f7d9; stroke: var(--encre); stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.verdict path { fill: none; stroke: var(--encre); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.js:not(.mouvement-reduit).f-position .position .verdict path { stroke-dasharray: 30; stroke-dashoffset: 30; }
.js.f-position .position.vu .verdict circle { animation: rond-pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) 0.45s both; }
.js.f-position .position.vu .verdict path { animation: trace 0.45s ease 0.8s forwards; }
@keyframes rond-pop { from { transform: scale(0); } }
@keyframes trace { to { stroke-dashoffset: 0; } }
.js.f-position .position.vu .coin { animation: etoile-pop 0.7s cubic-bezier(0.3, 1.6, 0.5, 1) 0.3s both; }
.js.f-position .position.vu > p { animation: rv-entree 0.7s ease 0.9s both; }
.js.f-position .position.vu::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  animation: halo-pulse 1.7s ease-out 0.5s 2 both;
}
@keyframes halo-pulse {
  0% { box-shadow: 0 0 0 0 rgba(100, 242, 157, 0.7); }
  100% { box-shadow: 0 0 0 20px rgba(100, 242, 157, 0); }
}

/* Page Lumo : le logo et sa lueur */
.heros { position: relative; display: inline-block; margin: 0.2rem 0 1.1rem; }
.heros-logo { position: relative; display: block; width: 9.5rem; height: auto; }
.heros-lueur {
  position: absolute;
  width: 6rem;
  height: 6rem;
  left: 5.4rem;
  top: -1.2rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(100, 242, 157, 0.9) 0%, rgba(100, 242, 157, 0.3) 45%, rgba(100, 242, 157, 0) 70%);
}

/* Le film */
.film { margin: 1.3rem 0 1.8rem; scroll-margin-top: 5rem; }
.film-cadre {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1.5px solid var(--encre);
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--s100);
  box-shadow: 0 6px 26px rgba(39, 36, 32, 0.14);
}
.film video { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--s100); }
.film video::cue {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 0.95rem;
  line-height: 1.3;
  color: #fcfaf7;
  background: rgba(39, 36, 32, 0.8);
}
.film-lecture {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 0.8rem 1rem;
  border: 0;
  background: linear-gradient(180deg, rgba(39, 36, 32, 0) 45%, rgba(39, 36, 32, 0.6));
  color: var(--clair);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.film-lecture[hidden], .en-lecture .film-lecture { display: none; }
.film-lecture .rond-lecture { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); }
.film-titre { font-weight: 600; font-size: 1.05rem; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); }
.film-infos { font-size: 0.82rem; opacity: 0.92; }
.rond-lecture {
  display: grid;
  place-items: center;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  background: var(--encre);
  box-shadow: 0 0 0 6px rgba(100, 242, 157, 0.45), 0 8px 24px rgba(0, 0, 0, 0.25);
}
.rond-lecture svg { width: 1.7rem; height: 1.7rem; fill: var(--vert); margin-left: 0.2rem; }
.js:not(.mouvement-reduit) .film-lecture .rond-lecture { animation: appel 2.6s ease-in-out infinite; }
@keyframes appel { 50% { box-shadow: 0 0 0 13px rgba(100, 242, 157, 0.18), 0 8px 24px rgba(0, 0, 0, 0.25); } }
.film-lecture:hover .rond-lecture { background: #000; }
.film-legende { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.6rem; font-size: 0.85rem; color: var(--s800); }
.film-legende .e { width: 0.8rem; height: 0.8rem; fill: #2fbf6c; }

/* Vignette du film sur l'accueil */
.vignette-film {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.4rem;
  padding: 0.6rem;
  text-decoration: none;
  background: var(--clair);
  border: 1.5px solid var(--encre);
  border-radius: var(--rayon);
}
.vignette-image {
  position: relative;
  flex: none;
  width: 8.6rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--s600);
  border-radius: 0.55rem;
}
.vignette-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vignette-image .rond-lecture {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2.3rem;
  height: 2.3rem;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 4px rgba(100, 242, 157, 0.45);
}
.vignette-image .rond-lecture svg { width: 1rem; height: 1rem; }
.vignette-texte { display: flex; flex-direction: column; gap: 0.15rem; }
.vignette-texte strong { font-size: 1.02rem; line-height: 1.25; }
.vignette-texte span { font-size: 0.85rem; color: var(--s800); }

/* Page Lumo : temps, budget, risque */
.compromis { margin: 0.4rem 0 1.6rem; }
.compromis-titre { font-weight: 600; margin-bottom: 0.8rem; }
.jauges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.jauge {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.75rem 0.65rem 0.8rem;
  background: var(--clair);
  border: 1.5px solid var(--encre);
  border-radius: var(--rayon);
}
.jauge svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: var(--encre); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.jauge strong { font-size: 0.95rem; }
.jauge span { flex: 1; font-size: 0.78rem; line-height: 1.3; color: var(--s800); }
.jauge .niveau { height: 0.55rem; margin-top: 0.3rem; overflow: hidden; background: var(--s200); border: 1px solid var(--encre); border-radius: 0.3rem; }
.jauge .niveau i { display: block; width: 100%; height: 100%; background: var(--t-vert); }
.js:not(.mouvement-reduit) .jauge .niveau i { width: 0; background: #fa9797; }
.js .jauge.vu .niveau i { animation: jauge 3.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; animation-delay: calc(var(--n) * 0.25s + 0.3s); }
@keyframes jauge {
  0% { width: 0; background: #fa9797; }
  42% { width: 86%; background: #fa9797; }
  64% { width: 86%; background: #fa9797; }
  100% { width: 100%; background: #9eefb5; }
}
.question { margin-top: 1rem; font-size: 1.35rem; line-height: 1.2; font-weight: 600; }
.js:not(.mouvement-reduit) .question:not(.vu) { opacity: 0; }
.js .question.vu { animation: rv-entree 0.8s ease 1.6s both; }

/* Résultats : les barres se remplissent */
.js:not(.mouvement-reduit) .stat.vu .barre span { animation: pousse 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s backwards; }
@keyframes pousse { from { width: 0; } }

/* Pluie d'étoiles */
.eclat { position: fixed; z-index: 50; width: 1.4rem; height: 1.4rem; pointer-events: none; }

/* Page des essais de style */
.essayer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.9rem;
  padding: 0.75rem 0.9rem;
  font-size: 0.92rem;
  background: var(--clair);
  border: 1px solid var(--s600);
  border-radius: var(--rayon);
}
.reglages { display: flex; flex-direction: column; gap: 0.6rem; }
.reglage {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  padding: 0.85rem 1rem;
  background: var(--clair);
  border: 1.5px solid var(--encre);
  border-radius: var(--rayon);
}
.reglage.actif { box-shadow: 0 0 0 3px rgba(100, 242, 157, 0.5); }
.reglage-tete { display: flex; align-items: center; gap: 0.5rem; }
.reglage p { font-size: 0.92rem; color: var(--s900); }
.carte-style fieldset { margin-bottom: 0.8rem; padding: 0.7rem 0.9rem 0.8rem; background: var(--clair); border: 1px solid var(--s600); border-radius: var(--rayon); }
.carte-style legend { padding: 0 0.3rem; font-weight: 600; }
.case-choix { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.35rem 0; font-size: 0.93rem; cursor: pointer; }
.case-choix input { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.18rem; accent-color: #2fbf6c; }

/* Comparaison des styles côte à côte */
.page.large { max-width: 86rem; }
.comparer-barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem; margin: 0.4rem 0 1.2rem; }
.onglets { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.onglets a {
  padding: 0.4rem 0.8rem;
  font-size: 0.9rem;
  text-decoration: none;
  background: var(--clair);
  border: 1px solid var(--s600);
  border-radius: 2rem;
}
.onglets a[aria-current] { background: var(--encre); border-color: var(--encre); color: var(--clair); }
.comparer-grille { --k: 0.62; display: flex; flex-wrap: wrap; gap: 1.1rem; }
.telephone { width: calc(375px * var(--k)); }
.telephone figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.45rem; font-size: 0.9rem; }
.telephone figcaption a { font-size: 0.8rem; color: var(--s800); }
.ecran {
  width: calc(375px * var(--k));
  height: calc(780px * var(--k));
  overflow: hidden;
  background: var(--s100);
  border: 2px solid var(--encre);
  border-radius: 1.4rem;
  box-shadow: 0 8px 26px rgba(39, 36, 32, 0.14);
}
.ecran iframe { display: block; width: 375px; height: 780px; border: 0; transform: scale(var(--k)); transform-origin: 0 0; }

/* Survol (ordinateur) */
@media (hover: hover) {
  .item, .bouton, .vignette-film, .reglage { transition: transform 0.18s, box-shadow 0.18s; }
  .item:hover, .bouton:hover, .vignette-film:hover { transform: translateY(-1px); }
  .vignette-film:hover { box-shadow: 0 1px 7px rgba(100, 242, 157, 0.55); }
}

/* La position de Lumo arrive comme une carte qu'on retourne */
.js.f-retournement .position.vu {
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  animation: retourne 1s cubic-bezier(0.2, 0.75, 0.25, 1) 0.15s both;
}
@keyframes retourne {
  0% { transform: perspective(1000px) rotateY(-96deg) scale(0.94); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: perspective(1000px) rotateY(0deg) scale(1); }
}

/* Clavier : le focus se voit */
:focus-visible { outline: 2.5px solid #2fbf6c; outline-offset: 2px; border-radius: 0.3rem; }

/* Moins d'animations demandé par le téléphone : tout reste immobile. */
@media (prefers-reduced-motion: reduce) {
  .orbe, .fond, .heros-lueur, .rond-lecture { animation: none !important; }
  .etincelle { display: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
.mouvement-reduit .rv { opacity: 1 !important; transform: none !important; animation: none !important; }

/* ═════════════ Page d'accueil : la question, puis le tirage d'une carte ═════════════ */
.surtitre { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--s700); margin-bottom: 0.7rem; }
.intro h1 { font-size: 2.05rem; line-height: 1.08; }
.intro h1 span { display: block; color: var(--s800); }
.trois-reponses { margin: 0.4rem 0 1.8rem; }
.bulle-question {
  display: inline-block;
  max-width: 88%;
  padding: 0.7rem 0.95rem;
  font-weight: 600;
  background: var(--clair);
  border: 1.5px solid var(--encre);
  border-radius: 1.1rem 1.1rem 1.1rem 0.3rem;
}
.bulles { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.6rem; }
.bulle {
  padding: 0.5rem 0.85rem;
  font-weight: 600;
  background: var(--lavande);
  border: 1.5px solid var(--encre);
  border-radius: 1.1rem 1.1rem 0.3rem 1.1rem;
}
.bulle.ca-depend { background: #fbc8c7; font-style: italic; }
.js:not(.mouvement-reduit) .trois-reponses:not(.vu) .bulle { opacity: 0; }
.js .trois-reponses.vu .bulle { animation: bulle 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) both; animation-delay: calc(0.5s + var(--n) * 0.45s); }
@keyframes bulle { from { opacity: 0; transform: translateY(8px) scale(0.85); } }
.et-vous h2 { font-size: 1.5rem; line-height: 1.15; margin-bottom: 0.4rem; }
.et-vous > p { color: var(--s900); }
.et-vous .actions { margin-top: 0.4rem; }
.bouton .e, .suite-haut .e, .tiree .e { width: 0.95rem; height: 0.95rem; margin-right: 0.45rem; fill: var(--vert); }
.bouton.secondaire .e { fill: #2fbf6c; }

/* Le paquet de cartes */
.paquet { position: relative; width: 12rem; height: 15.6rem; margin: 1.4rem auto 0.6rem; perspective: 900px; }
.carte-p {
  position: absolute;
  left: 50%;
  top: 0.4rem;
  width: 10rem;
  height: 14.1rem;
  margin-left: -5rem;
  overflow: hidden;
  background: var(--clair);
  border: 1.5px solid var(--encre);
  border-radius: 0.9rem;
  box-shadow: 0 6px 18px rgba(39, 36, 32, 0.13);
  transform-origin: 50% 85%;
}
.carte-p::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2.3rem; background: var(--fond); border-bottom: 1.5px solid var(--encre); }
.c3 { transform: rotate(-12deg) translateX(-1.5rem); }
.c2 { transform: rotate(9deg) translateX(1.4rem); }
.c1 { transform: rotate(-1.5deg); }
.cp-lignes { position: absolute; left: 0.9rem; right: 0.9rem; top: 3.1rem; display: flex; flex-direction: column; gap: 0.38rem; }
.cp-lignes i { display: block; height: 0.32rem; border-radius: 0.2rem; background: var(--s300); }
.cp-lignes i:nth-child(2) { width: 88%; }
.cp-lignes i:nth-child(4) { width: 62%; }
.cp-clause {
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  top: 6.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.55rem;
  border: 1px solid var(--s600);
  border-radius: 0.5rem;
}
.cp-clause i { display: block; height: 0.42rem; border-radius: 0.2rem; background: var(--encre); opacity: 0.75; }
.cp-clause i:nth-child(2) { width: 70%; }
.cp-q {
  position: absolute;
  left: 50%;
  bottom: 0.8rem;
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  margin-left: -1.45rem;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--s700);
  border: 1.5px dashed var(--s600);
  border-radius: 50%;
}
.js:not(.mouvement-reduit) .paquet.vu .c3 { animation: eventail-g 0.9s cubic-bezier(0.2, 0.75, 0.25, 1) 0.15s backwards; }
.js:not(.mouvement-reduit) .paquet.vu .c2 { animation: eventail-d 0.9s cubic-bezier(0.2, 0.75, 0.25, 1) 0.15s backwards; }
.js:not(.mouvement-reduit) .paquet.vu .c1 { animation: flotte 3.6s ease-in-out 1s infinite alternate; }
.js:not(.mouvement-reduit) .paquet.vu .cp-q { animation: interroge 2.4s ease-in-out 1.2s infinite; }
@keyframes eventail-g { from { transform: rotate(-1.5deg) translateX(0); } }
@keyframes eventail-d { from { transform: rotate(-1.5deg) translateX(0); } }
@keyframes flotte { from { transform: rotate(-1.5deg) translateY(0); } to { transform: rotate(1deg) translateY(-6px); } }
@keyframes interroge { 0%, 100% { border-color: var(--s600); color: var(--s700); } 50% { border-color: #2fbf6c; color: #2fbf6c; } }
.paquet.tire .c1 { animation: tire 0.68s cubic-bezier(0.5, 0, 0.2, 1) forwards !important; }
.paquet.tire .c2 { transition: transform 0.5s; transform: rotate(4deg) translateX(0.5rem); }
.paquet.tire .c3 { transition: transform 0.5s; transform: rotate(-5deg) translateX(-0.5rem); }
@keyframes tire {
  0% { transform: rotate(-1.5deg); }
  45% { transform: translateY(-2.6rem) rotate(-7deg) scale(1.05); }
  100% { transform: translateY(-3.2rem) rotateY(90deg) scale(1.1); opacity: 0.3; }
}
.suite-haut { margin: -0.4rem 0 1.2rem; }
.suite-haut .bouton { display: inline-flex; }
.tiree {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.2rem 0.6rem;
  margin-bottom: 0.7rem;
  font-size: 0.88rem;
  color: var(--s800);
}
.tiree .e { margin-right: 0; fill: #2fbf6c; }
.tiree a { margin-left: auto; color: var(--encre); }