/* MonBlocRecettes — landing page 2026, variante v2 (index.html)
   Chargée après style.css : seule la section de marque « dictionnaire » change. */

/* palette de la v2, reprise de DESIGN_SYSTEM.md (section « Couleurs ») */
:root {
  --text: #1C1C1C;   /* texte principal */
  --text-2: #666666; /* texte secondaire */
  --text-3: #8A8A8A; /* texte tertiaire */
  --bg: #F9F9F9;     /* fond principal */
  --border: #E0E0E0;
  /* ombres de DESIGN_SYSTEM.md : carte = ombre diffuse (elle remplace la bordure, jamais les deux) ;
     CTA principal orange = ombre teintée de sa couleur, réduite à l'appui ; CTA secondaires sans ombre */
  --ds-shadow-card: 0 3px 14px 0 rgba(0, 0, 0, .06);
  --ds-shadow-cta: 0 4px 10px 0 rgba(255, 107, 53, .22);
  --ds-shadow-cta-pressed: 0 2px 5px 0 rgba(255, 107, 53, .15);
  /* jetons de css/style.css (partagé avec index.html) ramenés aux ombres de la charte */
  --shadow-float: var(--ds-shadow-card);
  --shadow-phone: var(--ds-shadow-card);
}
/* CTA : principal orange (ombre teintée, plus légère à l'appui), secondaires sans ombre */
.btn--primary, .btn--primary:hover { box-shadow: var(--ds-shadow-cta); }
.btn--primary:active { box-shadow: var(--ds-shadow-cta-pressed); }
.store:hover { box-shadow: none; }

/* ---------- navbar flottante : décrochée du haut, petite marge sur les côtés, toujours fixe ---------- */
.nav,
.nav.is-scrolled {
  top: 16px; left: 50%; right: auto;
  width: min(1400px, calc(100% - 32px));
  transform: translateX(-50%);
  border-radius: 18px;
  background: rgba(255, 255, 255, .8);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  box-shadow: var(--ds-shadow-card);
}
.nav__inner { max-width: none; height: 78px; padding: 0 16px 0 20px; }

@media (max-width: 860px) {
  .nav, .nav.is-scrolled, .nav.is-open { border-radius: 16px; }
  .nav__inner { height: 70px; padding: 0 10px 0 14px; }
  /* menu déroulant sous la pilule */
  .nav__links { top: calc(100% + 8px); left: 0; right: 0; }
}

/* ---------- hero : aurore orange ----------
   Plusieurs couches d'orange, très floutées, qui dérivent et se déforment
   chacune à son rythme (durées différentes) : elles se croisent comme les
   voiles d'une aurore boréale. Le fond couvre tout le haut de la page,
   navbar comprise, et se fond dans la page en bas. */
.hero::before { display: none; } /* remplacé par l'aurore */
main > .hero:first-child { padding-bottom: 40px; overflow: visible; }
/* hero sur toute la hauteur de l'écran, texte centré verticalement dans l'espace sous la navbar
   (padding-top = hauteur de la navbar flottante) */
main > .hero:first-child { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding-top: 110px; padding-bottom: 40px; }
/* fond du hero : les nébuleuses de la constellation (« Recettes »), mêmes dégradés et mêmes
   dérives (.orbit__nebula). Elles partent du haut de la page, derrière l'en-tête, débordent
   un peu sous le hero et s'y effacent progressivement. */
.hero-nebula {
  position: absolute; inset: 0 0 -140px; z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
/* au défilement vers « Mon », les nuées quittent le hero et rejoignent le centre de l'univers
   (centre de .mon-topo) : js/v2.js pose leur translate / scale et l'opacité du calque.
   z-index 1 : au-dessus de la figure de « Mon », sous les textes (hero et « Mon », z-index 1 plus loin). */
.hero-nebula.is-traveling {
  z-index: 1;
  overflow-x: clip; overflow-y: visible;
}
.hero-nebula.is-traveling .orbit__nebula { will-change: translate, scale, transform, opacity; }
.hero-nebula .orbit__nebula {
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, #000 70%, transparent);
}
/* dans le hero : mêmes nuées, couleurs plus soutenues */
.hero-nebula .orbit__nebula--1 { background: radial-gradient(closest-side, rgba(255, 107, 53, .5), rgba(255, 107, 53, .18) 55%, transparent); }
.hero-nebula .orbit__nebula--2 { background: radial-gradient(closest-side, rgba(255, 107, 53, .42), rgba(255, 107, 53, .18) 55%, transparent); }
.hero-nebula .orbit__nebula--3 { background: radial-gradient(closest-side, rgba(255, 107, 53, .52), rgba(255, 107, 53, .14) 60%, transparent); }
.hero-nebula .orbit__nebula--4 { background: radial-gradient(closest-side, rgba(255, 107, 53, .36), transparent); }
.hero-nebula .orbit__nebula--5 { background: radial-gradient(closest-side, rgba(255, 107, 53, .38), transparent); }
/* dérive plus ample et plus vive que dans les autres sections */
.hero-nebula .orbit__nebula--1 { animation: hero-nebula-a 14s ease-in-out infinite alternate; }
.hero-nebula .orbit__nebula--2 { animation: hero-nebula-b 17s ease-in-out -5s infinite alternate; }
.hero-nebula .orbit__nebula--3 { animation: hero-nebula-b 15s ease-in-out -9s infinite alternate-reverse; }
.hero-nebula .orbit__nebula--4 { animation: hero-nebula-pulse 7s ease-in-out infinite; }
.hero-nebula .orbit__nebula--5 { animation: hero-nebula-a 12s ease-in-out -3s infinite alternate-reverse; }
@keyframes hero-nebula-a {
  0%   { transform: translate(0, 0) scale(1); opacity: .75; }
  50%  { transform: translate(9%, -6%) scale(1.15, .9); opacity: 1; }
  100% { transform: translate(-6%, 8%) scale(.9, 1.15); opacity: .85; }
}
@keyframes hero-nebula-b {
  0%   { transform: translate(0, 0) scale(1); opacity: .8; }
  50%  { transform: translate(-10%, 5%) scale(.9, 1.12); opacity: 1; }
  100% { transform: translate(7%, -7%) scale(1.12, .92); opacity: .8; }
}
@keyframes hero-nebula-pulse {
  0%, 100% { transform: scale(.85); opacity: .5; }
  50%      { transform: scale(1.25); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-nebula .orbit__nebula { animation: none !important; }
}
@media (max-width: 760px) {
  .hero-nebula .orbit__nebula { display: block; }
}
main > .hero:first-child .hero__inner { max-width: 1400px; grid-template-columns: 1fr; justify-items: center; text-align: center; }
main > .hero:first-child .lead { max-width: 640px; margin-left: auto; margin-right: auto; font-size: 17px; }
main > .hero:first-child .stores { justify-content: center; }
/* arrivée par index.html#telecharger sans JS : boutons des stores au milieu de l'écran (50vh moins
   l'en-tête de 80px déjà compté par scroll-padding-top, moins la moitié d'un bouton) ; avec JS,
   js/main.js recadre pour montrer tout l'appel final */
#telecharger { scroll-margin-top: calc(50vh - 108px); }
/* Baloo est réservée au nom de la marque, MonBlocRecettes (logo, et le mot partout où il apparaît :
   titres, paragraphes, listes, pied de page) ; tout le reste, titres de section compris, est en Poppins.
   Baloo n'existe qu'en regular : pas de faux gras */
.brand-font { font-family: "Baloo", "Poppins", sans-serif; font-weight: 400; }
/* dans le texte courant, Baloo paraît plus petite que Poppins (lettres plus basses) : on la grossit un peu
   pour qu'elle ait la même hauteur visuelle, sans changer l'interligne */
.brand-font { font-size: 1.14em; line-height: 0; }
/* accroche puis texte, sous la définition */
.brand-land__tagline {
  max-width: 720px;
  margin: 56px 0 0;
  font-size: clamp(24px, 2.6vw, 34px); font-weight: 700; line-height: 1.25;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.brand-land__text { max-width: 640px; margin-top: 18px; }
.brand-land__text p { margin: 0 0 14px; font-size: 18px; color: var(--text-2); }
.brand-land__text p:last-child { margin-bottom: 0; }
.brand-land__text strong { color: var(--text); font-weight: 600; }
@media (max-width: 860px) {
  .brand-land__tagline { margin-top: 40px; }
  .brand-land__text p { font-size: 16px; }
}
/* même fond que l'app native (#F9F9F9, relevé sur la capture d'accueil) */
#mon {
  position: relative;
  overflow-x: clip; overflow-y: visible; /* la forme du centre descend ensuite jusqu'à « Bloc » */
  padding: 180px 0 140px;
  /* pas de fond propre : celui de la page (#F9F9F9, comme l'app native) transparaît,
     et l'aurore du hero peut s'y fondre sans ligne de démarcation */
  background: none;
}
/* poussière d'étoiles orange, en tuiles sur toute la section */
.mon-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px; align-items: center;
}
#mon .container { position: static; }
.mon-layout > .brand-land__head { position: relative; z-index: 1; }
/* la forme s'efface d'un coup quand elle se disloque dans « Bloc » (.is-split, js/v2.js) */
.mon-topo { transition: opacity .35s ease-out; }
.mon-topo.is-split { opacity: 0; }
/* position + z-index 1 : en descendant vers « Bloc », la forme passe au-dessus des carrés,
   mais sous le texte de la transition (z-index 1, plus loin dans la page) */
.mon-topo { --form: 1; position: relative; z-index: 1; margin: 0; width: 100%; max-width: 400px; justify-self: center; }
.mon-topo svg { display: block; width: 100%; height: auto; overflow: visible; }
.mon-core *, .mon-core { transform-box: view-box; transform-origin: 176px 236px; }
.mon-topo__core, .mon-core__shine {
  opacity: clamp(0, var(--form) * 2, 1);
  scale: calc(.3 + .7 * min(1, var(--form) * 1.6));
  animation: mon-core-beat 4.8s ease-in-out infinite;
}
.mon-topo__core { filter: drop-shadow(0 3px 14px rgba(0, 0, 0, .06)); }
.mon-core__halo {
  opacity: clamp(0, (var(--form) - .3) / .4, 1);
  scale: calc(.7 + .3 * clamp(0, (var(--form) - .3) / .4, 1));
  animation: mon-core-radiate 4.8s ease-in-out infinite;
}
.mon-core__halo--outer { fill: rgba(28, 28, 28, .03); animation-delay: 120ms; }
.mon-core__halo--inner { fill: #FFFFFF; }
@keyframes mon-core-beat {
  0%, 40%, 100% { transform: scale(1); }
  15%           { transform: scale(1.06); }
}
@keyframes mon-core-radiate {
  0%, 45%, 100% { transform: scale(1); }
  20%           { transform: scale(1.12); }
}
.mon-core__orbit {
  opacity: clamp(0, (var(--form) - .6) / .4, 1);
  scale: calc(1.3 - .3 * clamp(0, (var(--form) - .6) / .4, 1));
  animation: mon-core-orbit 40s linear infinite;
}
.mon-core__orbit path { fill: none; stroke-width: 1; stroke-linecap: round; }
/* nœuds de l'orbite, comme des neurones : un point plein dans un halo qui s'allume tour à tour */
.mon-core__node { fill: #A5A5A5; }
.mon-core__node-glow {
  fill: rgba(28, 28, 28, .08);
  transform-box: fill-box; transform-origin: center;
  animation: mon-core-synapse 3.2s ease-in-out infinite;
  animation-delay: calc(var(--n) * .8s);
}
/* un seul nœud orange, comme une touche de marque */
.mon-core__node--accent { fill: #FF6B35; }
.mon-core__node--accent .mon-core__node-glow { fill: rgba(255, 107, 53, .18); }
@keyframes mon-core-synapse {
  0%, 60%, 100% { transform: scale(.6); opacity: .4; }
  25%           { transform: scale(1.3); opacity: 1; }
}
@keyframes mon-core-orbit { to { transform: rotate(360deg); } }
@media (max-width: 860px) {
  .mon-topo { max-width: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .mon-core * { animation: none; }
}

/* « Mon » au centre : un astre diffus, halo flou qui pulse ; il se révèle en dernier */
@media (max-width: 860px) {
  #mon { padding: 96px 0 90px; }
  .mon-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; min-height: 0; }
}

/* bouton pas encore disponible (Google Play) : grisé, inactif, pastille « Bientôt » */
.store--soon { position: relative; background: rgba(28, 28, 28, .08); color: rgba(28, 28, 28, .4); cursor: default; }
.store--soon:hover { transform: none; box-shadow: none; }
.store__badge {
  position: absolute; top: -10px; right: -10px;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--orange); color: #fff;
  font-size: 10px; font-style: normal; font-weight: 600; line-height: 1;
  box-shadow: var(--ds-shadow-cta);
}

/* colonne de droite : une entrée de dictionnaire par mot */
.entry { max-width: 620px; }

/* définition révélée mot à mot : chaque mot sort du flou en remontant (js/v2.js) */
.w {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(.4em);
  transition: opacity .6s var(--ease), filter .6s var(--ease), transform .6s var(--ease);
  transition-delay: calc(var(--i) * 45ms);
}

/* ---------- pas d'animation : js/v2.js pose .is-in d'emblée, sans transition ---------- */
@media (prefers-reduced-motion: reduce) {
  .w { transition: none; }
}

/* ---------- animations en pause hors de l'écran (js/v2.js pose .is-offscreen) ----------
   l'aurore du hero et la constellation ne tournent que lorsqu'elles sont visibles */
.is-offscreen, .is-offscreen *, .is-offscreen *::after { animation-play-state: paused !important; }

/* ---------- phrase de transition entre deux sections de marque ---------- */
.brand-bridge { position: relative; padding: 96px 0; text-align: center; }
.brand-bridge .container { position: relative; z-index: 1; }
/* fond : les nébuleuses du hero (.orbit__nebula), qui s'effacent en haut et en bas
   pour se fondre dans les sections voisines */
.bridge-nebula {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.bridge-nebula .orbit__nebula {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
}
.brand-bridge__text {
  max-width: 760px;
  margin: 0 auto;
  font-size: clamp(22px, 2.4vw, 32px); font-weight: 600; line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--text);
  text-wrap: balance;
}
/* après « Bloc » : deux masses lumineuses de part et d'autre du texte */
.brand-bridge--bloc .orbit__nebula,
.brand-bridge--recettes .orbit__nebula { inset: auto; rotate: none; }
.brand-bridge--bloc .orbit__nebula--1 { left: -2%; top: 0;    width: 42%; height: 100%; background: radial-gradient(closest-side, rgba(255, 241, 234, 1), rgba(255, 241, 234, .4) 60%, transparent); }
.brand-bridge--bloc .orbit__nebula--2 { right: -2%; top: 0;   width: 42%; height: 100%; background: radial-gradient(closest-side, rgba(255, 241, 234, .9), rgba(255, 241, 234, .3) 60%, transparent); animation-duration: 34s; }
.brand-bridge--bloc .orbit__nebula--3 { left: 30%; top: 10%;  width: 40%; height: 80%; background: radial-gradient(closest-side, rgba(255, 255, 255, .9), transparent); animation-duration: 30s; }
.brand-bridge--bloc .orbit__nebula--4 { left: 18%; top: 30%;  width: 16%; height: 50%; background: radial-gradient(closest-side, rgba(255, 107, 53, .08), transparent); animation-name: orbit-nebula-pulse; animation-duration: 8s; }
.brand-bridge--bloc .orbit__nebula--5 { right: 18%; top: 22%; width: 16%; height: 55%; background: radial-gradient(closest-side, rgba(255, 255, 255, .9), transparent); animation-duration: 22s; }
/* après « Recettes » : nuées en diagonale */
.brand-bridge--recettes .orbit__nebula--1 { left: 2%;  top: 0;    width: 38%; height: 90%; background: radial-gradient(closest-side, rgba(255, 241, 234, 1), rgba(255, 241, 234, .4) 60%, transparent); rotate: -18deg; }
.brand-bridge--recettes .orbit__nebula--2 { left: 30%; top: 10%;  width: 40%; height: 80%; background: radial-gradient(closest-side, rgba(255, 255, 255, .9), transparent); rotate: -18deg; animation-duration: 30s; }
.brand-bridge--recettes .orbit__nebula--3 { right: 2%; bottom: 0; width: 38%; height: 90%; background: radial-gradient(closest-side, rgba(255, 241, 234, .9), rgba(255, 241, 234, .3) 60%, transparent); rotate: -18deg; }
.brand-bridge--recettes .orbit__nebula--4 { right: 26%; top: 5%;  width: 16%; height: 50%; background: radial-gradient(closest-side, rgba(255, 107, 53, .08), transparent); animation-name: orbit-nebula-pulse; animation-duration: 7s; }
.brand-bridge--recettes .orbit__nebula--5 { left: 24%; bottom: 5%; width: 16%; height: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .9), transparent); animation-duration: 20s; }
@media (max-width: 860px) {
  .brand-bridge { padding: 64px 0; }
}
@media (max-width: 760px) {
  .bridge-nebula .orbit__nebula { display: block; }
}

/* ---------- défilements des captures de l'app (téléphone de « Découvrez MonBlocRecettes ») ----------
   Accueil : contenu de 1959 px, défilement max 31,29 % ; recette : 2277 px, max 35,12 %.
   Dans la boucle : accueil immobile puis un seul défilement jusqu'en bas (départ rapide, ralentissement) ;
   fiche recette immobile puis défilement jusqu'à la dernière étape (la barre blanche apparaît) ;
   chaque écran est remis en haut pendant qu'il est caché. */
@keyframes orbit-screen-scroll {
  0%, 16.48%  { transform: translateY(0);        animation-timing-function: cubic-bezier(.15, .85, .25, 1); }
  36.26%      { transform: translateY(-31.29%); animation-timing-function: step-end; }
  70%, 100%   { transform: translateY(0); }
}
@keyframes orbit-recipe-scroll {
  0%, 66.48%  { transform: translateY(0);        animation-timing-function: cubic-bezier(.15, .85, .25, 1); }
  86.26%      { transform: translateY(-35.12%); animation-timing-function: step-end; }
  94%, 100%   { transform: translateY(0); }
}
@keyframes orbit-recipe-bar {
  0%, 66.48%  { opacity: 0; }
  68.5%       { opacity: 1; animation-timing-function: step-end; }
  94%, 100%   { opacity: 0; }
}
/* nébuleuse : grandes nuées en dégradé (sans flou animé), qui dérivent lentement */
.orbit__nebula {
  position: absolute; z-index: 0;
  border-radius: 50%;
  will-change: transform, opacity;
  animation: orbit-nebula 26s ease-in-out infinite alternate;
}
.orbit__nebula--1 { left: 2%;  top: 4%;  width: 44%; height: 56%; background: radial-gradient(closest-side, rgba(255, 241, 234, .9), rgba(255, 241, 234, .35) 55%, transparent); rotate: -18deg; }
.orbit__nebula--2 { right: 0;  top: 14%; width: 40%; height: 66%; background: radial-gradient(closest-side, rgba(255, 255, 255, .9), rgba(255, 241, 234, .3) 55%, transparent); animation-duration: 32s; animation-delay: -10s; }
.orbit__nebula--3 { left: 18%; bottom: 0; width: 48%; height: 50%; background: radial-gradient(closest-side, rgba(255, 241, 234, .8), rgba(255, 241, 234, .25) 60%, transparent); rotate: 12deg; animation-duration: 29s; animation-delay: -6s; }
.orbit__nebula--4 { left: 35%; top: 20%; width: 30%; height: 60%; background: radial-gradient(closest-side, rgba(255, 107, 53, .07), transparent); animation-name: orbit-nebula-pulse; animation-duration: 9s; }
.orbit__nebula--5 { right: 10%; bottom: 4%; width: 26%; height: 44%; background: radial-gradient(closest-side, rgba(255, 255, 255, .9), transparent); animation-duration: 22s; animation-delay: -14s; }
@keyframes orbit-nebula {
  0%   { transform: translate(0, 0) scale(1); opacity: .8; }
  50%  { transform: translate(3%, -2%) scale(1.08, .95); opacity: 1; }
  100% { transform: translate(-2%, 3%) scale(.95, 1.08); opacity: .85; }
}
@keyframes orbit-nebula-pulse {
  0%, 100% { transform: scale(.9); opacity: .6; }
  50%      { transform: scale(1.15); opacity: 1; }
}
/* les nuées se fondent dans la page en haut et en bas */
.orbit__nebula {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}
@media (max-width: 760px) {
  .orbit__nebula { display: none; }
}

/* ---------- nuage de mots (dernière section) ----------
   Tous les mots de l'univers de l'app, tous de la même taille, chacun dans un encadré blanc (rayon 12 px) à
   l'ombre diffuse (DESIGN_SYSTEM.md), centrés ; quelques-uns en orange, sur une pastille orange pâle
   (variante « active pâle » de DESIGN_SYSTEM.md). Pastilles dispersées : écarts larges, et chacune
   décalée en hauteur (--oy) et en largeur (--ox) selon un motif irrégulier (multiples de 2, 3, 5, 7).
   Ils apparaissent l'un après l'autre à l'entrée
   (.is-visible, délai --i), puis ondulent doucement, chacun à son rythme. */
.words-section { padding: 24px 0 120px; }
.wcloud {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 40px 36px;
  max-width: none; margin: 0 auto; padding: 12px 0; /* toute la largeur du conteneur ; padding : place pour les décalages verticaux */
  list-style: none;
}
.wcloud li {
  position: relative; top: var(--oy, 0px); margin: 0 var(--ox, 0px);
  font-size: 15px; line-height: 1.2; font-weight: 500;
  color: var(--text);
  opacity: 0; translate: 0 14px;
  transition: opacity .6s ease-out, translate .8s cubic-bezier(.34, 1.3, .64, 1);
  transition-delay: calc(var(--i) * 45ms);
}
.wcloud li span {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 12px; /* rayon standard des encadrés de l'app (DESIGN_SYSTEM.md : cartes et chips 12 px) */
  background: #FFFFFF;
  box-shadow: var(--ds-shadow-card); /* sans bordure (elles ne se cumulent pas) */
  animation: wcloud-wave 5s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -370ms); }
/* dispersion : décalages qui se combinent sans motif visible */
.wcloud li:nth-child(2n)     { --oy: 8px; }
.wcloud li:nth-child(3n)     { --oy: -10px; }
.wcloud li:nth-child(5n)     { --oy: 14px; }
.wcloud li:nth-child(7n)     { --oy: -14px; }
.wcloud li:nth-child(4n + 1) { --ox: 22px; }
.wcloud li:nth-child(6n + 2) { --ox: 44px; }
.wcloud li:nth-child(9n + 4) { --ox: 64px; }
.wcloud li:nth-child(3n) span { animation-duration: 6.4s; }
.wcloud li:nth-child(3n + 1) span { animation-duration: 4.2s; animation-direction: alternate-reverse; }
.wcloud.is-visible li { opacity: 1; translate: 0 0; }
.wcloud .is-accent { color: var(--orange); }
.wcloud .is-accent span { background: #FFF1EA; }
@keyframes wcloud-wave {
  from { transform: translateY(-3px) rotate(-1deg); }
  to   { transform: translateY(3px) rotate(1deg); }
}
@media (max-width: 600px) {
  .words-section { padding-bottom: 80px; }
  .wcloud { gap: 18px 8px; }
  .wcloud li { font-size: 14px; top: calc(var(--oy, 0px) * .5); margin: 0 calc(var(--ox, 0px) * .3); }
  .wcloud li span { padding: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .wcloud li { opacity: 1; translate: none; transition: none; }
  .wcloud li span { animation: none; }
}

/* ---------- section « Bloc » : illustration à gauche, texte à droite ---------- */
.bloc-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px; align-items: center;
}
@media (max-width: 860px) {
  .bloc-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .bloc-layout > .brand-land__head { order: -1; }
}
/* ---------- section « Recettes » : texte à gauche, composition à droite ----------
   La composition naît de « Bloc » : quelques-uns de ses éléments descendent jusqu'ici au
   défilement (js/v2.js : --tx / --ty = écart restant jusqu'à la place finale), puis, arrivés (.is-formed), se transforment d'eux-mêmes en formes
   géométriques — rectangle, cercles, traits arrondis, petits carrés — qui dessinent une fiche
   recette. Ensuite elles flottent en continu. Sans JS ou en mouvement réduit : fiche formée. */
.recettes-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px; align-items: center;
}
/* z-index 0 : en montant depuis « Bloc », les formes passent sous le texte de la transition */
.rcompo {
  position: relative; z-index: 0;
  width: min(100%, 440px); aspect-ratio: 1;
  margin: 0; justify-self: center;
}
.rshape {
  position: absolute;
  left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  width: calc(var(--w) * 1%); height: calc(var(--h) * 1%);
  border-radius: var(--r);
  background: var(--c);
  box-shadow: var(--ds-shadow-card);
  translate: calc(-50% + var(--tx, 0px) + var(--qx, 0px)) calc(-50% + var(--ty, 0px) + var(--qy, 0px));
  rotate: var(--rot, 0deg);
  /* vie propre, en continu (transform : s'ajoute au trajet sans le gêner) */
  animation: bblock-drift-a 6.4s ease-in-out infinite;
  animation-delay: calc(var(--k) * -460ms);
}
.rshape:nth-child(3n + 1) { animation-name: bblock-drift-b; animation-duration: 7.8s; }
/* fil conducteur orange : le carré orange de « Bloc », devenu badge, vole au-dessus des autres formes */
.rshape[data-to-ring] { z-index: 1; }
.rshape:nth-child(3n + 2) { animation-name: bblock-drift-c; animation-duration: 5.6s; }
/* en attente puis en vol : identique à l'élément de « Bloc » (taille, arrondi, couleur : --sw, --sh,
   --sr0, --sc posés par js/v2.js) ; au retour (on remonte), chacun reprend cette forme */
.rcompo--ready .rshape {
  width: var(--sw, 40px); height: var(--sh, 40px);
  border-radius: var(--sr0, 14px);
  background: var(--sc, var(--c));
  rotate: 0deg;
  opacity: 0;
  transition: width .45s ease-in, height .45s ease-in, border-radius .45s ease-in, rotate .45s ease-in, background-color .45s ease-in;
}
.rcompo--ready .rshape.is-flying { opacity: 1; }
/* arrivés : chacun prend sa forme, l'un après l'autre */
.rcompo--ready.is-formed .rshape {
  width: calc(var(--w) * 1%); height: calc(var(--h) * 1%);
  border-radius: var(--r);
  background: var(--c);
  rotate: var(--rot, 0deg);
  transition: width .8s cubic-bezier(.34, 1.3, .64, 1), height .8s cubic-bezier(.34, 1.3, .64, 1),
              border-radius .5s ease-out, rotate .8s cubic-bezier(.34, 1.3, .64, 1), background-color .6s ease-out;
  transition-delay: calc(var(--k) * 35ms);
}
/* le badge orange descend jusqu'à « Au quotidien » et s'y étale en une tache difforme, pleine,
   orange pâle (#FFF1EA), sous l'illustration (js/v2.js : --qx / --qy = trajet, --qw / --qh = taille,
   --qrot = inclinaison, --qa = passage de l'orange du badge à l'orange pâle, de 0 à 1) ;
   elle reste une pastille pendant la descente, puis se déforme en grandissant (--qb = arrondis,
   .is-blobbing) ; posée (.is-blob), elle ondule lentement */
.rcompo--ready .rshape.is-to-ring {
  width: var(--qw); height: var(--qh);
  rotate: var(--qrot);
  background: color-mix(in srgb, #FFF1EA calc(var(--qa) * 100%), #FF6B35);
  box-shadow: 0 3px 14px 0 rgb(0 0 0 / calc(.06 * (1 - var(--qa))));
  transition: none;
}
.rcompo--ready .rshape.is-to-ring.is-blobbing { border-radius: var(--qb); }
/* repartie vers « Découvrez » : ce sont les taches de son illustration qui prennent le relais */
.rcompo--ready .rshape.is-to-ring.is-gone { opacity: 0; }
.rcompo--ready .rshape.is-to-ring.is-blob {
  animation: bblock-drift-a 6.4s ease-in-out infinite, rshape-blob 11s ease-in-out infinite alternate;
}
@keyframes rshape-blob {
  0%   { border-radius: 58% 42% 63% 37% / 44% 56% 46% 54%; }
  50%  { border-radius: 44% 56% 41% 59% / 58% 42% 60% 40%; }
  100% { border-radius: 62% 38% 50% 50% / 40% 60% 52% 48%; }
}
/* l'illustration reste au-dessus de la tache */
.qphone { position: relative; z-index: 1; }
/* éléments appelés par « Recettes » : ils glissent d'abord hors de la masse, sous leurs voisins
   (--lx / --ly suivent le défilement, js/v2.js : pas de transition pour ne pas traîner),
   puis, une fois dégagés, une forme de « Recettes » prend le relais et ils disparaissent */
.bblock--ready.is-split .bblock__sq.is-leaving { translate: var(--lx, 0px) var(--ly, 0px); transition: none; }
.bblock__sq.is-lifted { visibility: hidden; }
@media (max-width: 860px) {
  .recettes-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .rcompo { width: min(100%, 320px); }
}
@media (prefers-reduced-motion: reduce) {
  .rshape { animation: none; }
}

#bloc, #recettes { position: relative; }
#recettes { overflow-x: clip; }
/* ---------- fonctionnalités du quotidien : quatre encadrés, sous le texte et l'illustration de « Au quotidien » ---------- */
.feat-cards__list {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;
  margin: 72px 0 0; padding: 0; list-style: none;
}
.feat-card {
  padding: 28px 26px 30px;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--ds-shadow-card);
  text-align: left;
}
.feat-card__icon {
  display: grid; place-items: center;
  width: 48px; height: 48px; margin-bottom: 18px;
  border-radius: 14px;
  background: #FFF1EA; color: var(--orange);
}
.feat-card__icon svg { width: 24px; height: 24px; }
.feat-card__title { margin: 0 0 8px; font-size: 19px; font-weight: 600; line-height: 1.3; color: var(--text); }
.feat-card p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-2); }
@media (max-width: 1024px) {
  .feat-cards__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .feat-cards__list { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 48px; }
}
/* texte à gauche, illustration à droite (« Au quotidien », « Découvrez MonBlocRecettes ») */
.quotidien-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px; align-items: center;
}
/* « Au quotidien » : objets du quotidien qui flottent en désordre */
.qphone { width: min(100%, 360px); margin: 0; justify-self: center; }
/* « Au quotidien » : illustration à gauche, texte à droite (sur mobile : le texte d'abord) */
#quotidien .qphone { order: -1; }
/* textes et encadrés au-dessus des taches qui passent d'une section à l'autre au défilement */
#quotidien .brand-land__head, #decouvrir .brand-land__head, .feat-card { position: relative; z-index: 1; }
@media (max-width: 860px) {
  #quotidien .qphone { order: 0; }
}
.qphone svg { display: block; width: 100%; height: auto; overflow: visible; }
@keyframes qphone-float {
  from { translate: 0 -6px; }
  to   { translate: 0 6px; }
}
/* objets : ils apparaissent un à un à l'entrée, puis dérivent chacun à son rythme (mêmes dérives
   que « Bloc » ; transform sur le groupe intérieur, position et inclinaison sur le groupe extérieur) */
.qphone__item {
  transform-box: fill-box; transform-origin: center;
  opacity: 0; scale: .6;
  transition: opacity .4s ease-out, scale .7s cubic-bezier(.34, 1.4, .64, 1);
  transition-delay: calc(.35s + var(--k) * 110ms);
  animation: bblock-drift-a 6.2s ease-in-out infinite;
  animation-delay: calc(var(--k) * -530ms);
}
.qphone__item--b { animation-name: bblock-drift-b; animation-duration: 7.6s; }
.qphone__item--c { animation-name: bblock-drift-c; animation-duration: 5.4s; }
.qphone.is-visible .qphone__item { opacity: 1; scale: 1; }
/* savon : seule touche d'orange de l'illustration ; il se colore au défilement (--soap, de 0 à 1,
   posé par js/v2.js pendant que le badge orange de « Recettes » s'étale en tache). Sans JS : orange. */
.qphone { --soap: 1; }
.qsoap__top     { fill: color-mix(in srgb, #FF6B35 calc(var(--soap) * 100%), #FFFFFF); }
.qsoap__side    { fill: color-mix(in srgb, #FF6B35 calc(var(--soap) * 100%), #D9D9D9);
                  fill-opacity: calc(1 - .45 * var(--soap)); } /* tranche : le même orange, plus léger */
.qsoap__mark    { fill: color-mix(in srgb, #FFF1EA calc(var(--soap) * 100%), #F3F3F3);
                  stroke: color-mix(in srgb, #FFF1EA calc(var(--soap) * 100%), #E0E0E0); }
.qsoap__foam    { fill: color-mix(in srgb, #FFF1EA calc(var(--soap) * 100%), #FFFFFF);
                  stroke: color-mix(in srgb, #FF6B35 calc(var(--soap) * 100%), #BDBDBD); }
.qsoap__bubbles, .qsoap__glint { stroke: color-mix(in srgb, #FF6B35 calc(var(--soap) * 100%), #BDBDBD); }
@media (max-width: 860px) {
  .quotidien-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .qphone { width: min(100%, 280px); }
}
@media (prefers-reduced-motion: reduce) {
  .qphone__item { opacity: 1; scale: 1; transition: none; animation: none; }
}
/* ---------- section « Découvrez MonBlocRecettes » : texte à gauche, illustration à droite ----------
   Un smartphone, centré, dont l'écran montre l'app qui défile, et quatre encadrés posés autour sur des taches
   orange pâle (carte recette et calendrier à gauche, liste de courses et photo épinglée à droite), reliés au
   téléphone par de fins traits orange. Boîte de 680 × 620 : positions en %, tailles du contenu des encadrés
   en var(--u) (une fraction de cqw, réglée pour chaque encadré). */
.dphone {
  position: relative;
  width: min(100%, 680px); aspect-ratio: 680 / 620;
  margin: 0; justify-self: center;
  container-type: inline-size;
}
/* téléphone : l'écran seul, aux proportions
   des captures (780 × 1691), coins arrondis à 14 % de la largeur, sans cadre ni tranche, ombre douce ;
   il occupe 82 % de la hauteur de la boîte, au centre, et flotte ; de chaque côté, la place des encadrés
   et des traits qui les relient.
   Défilements des captures : @keyframes orbit-screen-scroll, orbit-recipe-scroll, orbit-recipe-bar ;
   --dscreen-dur règle toute la séquence ; entre l'accueil et la fiche recette, un fondu. */
.dphone__screen {
  --dscreen-dur: 6s; /* durée de la boucle accueil → recette */
  position: absolute; z-index: 2; left: calc(50% - 34.5cqw / 2); top: 9%; /* centré (translate sert au flottement) */
  width: 34.5cqw; aspect-ratio: 780 / 1691;
  overflow: hidden;
  border-radius: 4.83cqw;
  background: #F9F9F9;
  box-shadow: var(--ds-shadow-card);
  animation: qphone-float 7s ease-in-out infinite alternate;
}
.dphone__screen img { display: block; width: 100%; height: auto; }
.dscreen__face { position: absolute; inset: 0; display: flex; flex-direction: column; }
.dscreen__face > img { flex: none; position: relative; z-index: 1; }
.dscreen__view { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.dscreen__home, .dscreen__recipe { position: absolute; left: 0; top: 0; will-change: transform; }
.dscreen__home { animation: orbit-screen-scroll var(--dscreen-dur) infinite; }
.dscreen__recipe { animation: orbit-recipe-scroll var(--dscreen-dur) infinite; }
.dscreen__face > img.dscreen__bar { position: absolute; left: 0; right: 0; top: 0; z-index: 2; opacity: 0; animation: orbit-recipe-bar var(--dscreen-dur) infinite; }
.dscreen__face--home { animation: dscreen-home var(--dscreen-dur) infinite; }
.dscreen__face--recipe { opacity: 0; animation: dscreen-recipe var(--dscreen-dur) infinite; }
/* accueil défilé (fin à 36,26 %) → fondu vers la recette ; recette défilée (fin à 86,26 %) → fondu vers l'accueil */
@keyframes dscreen-home   { 0%, 37% { opacity: 1; } 41%, 87% { opacity: 0; } 91%, 100% { opacity: 1; } }
@keyframes dscreen-recipe { 0%, 37% { opacity: 0; } 41%, 87% { opacity: 1; } 91%, 100% { opacity: 0; } }
/* taches de fond : formes organiques orange pâle, une orange vive derrière la liste de courses */
.dblob { position: absolute; z-index: 0; background: #FFF1EA; border-radius: 58% 42% 55% 45% / 46% 52% 48% 54%; }
/* les taches arrivent de « Au quotidien » au défilement (js/v2.js) : cachées tant que la tache n'est pas partie */
.dphone.is-blobs-waiting .dblob { opacity: 0; }
.dblob--1 { left: 1%;  top: 19%; width: 27%; height: 36%; rotate: -12deg; }
.dblob--2 { left: 9%;  top: 79%; width: 24%; height: 15%; rotate: 8deg; }
.dblob--3 { left: 67%; top: 22%; width: 15%; height: 14%; rotate: 20deg; background: color-mix(in srgb, #FF6B35 calc(var(--bo, 1) * 100%), #FFF1EA); } /* --bo : de l'orange pâle (0) à l'orange (1), js/v2.js */
.dblob--4 { left: 81%; top: 60%; width: 18%; height: 32%; rotate: -6deg; }
.dspark { position: absolute; z-index: 1; left: 61%; top: 2%; width: 8%; height: auto; overflow: visible; }
/* traits : fins, sous le téléphone (ils sortent de derrière lui) et sous les encadrés */
.dphone__link { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; }
/* le trait se trace du téléphone vers l'encadré */
.dphone__link path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s cubic-bezier(.65, 0, .35, 1) .5s; }
.dphone.is-visible .dphone__link path { stroke-dashoffset: 0; }
.dphone__link path.dphone__link-2 { transition-delay: 1.1s; }
.dphone__link path.dphone__link-3 { transition-delay: 1.7s; }
/* point au bout de chaque trait, contre l'encadré : il apparaît quand le trait arrive */
.dphone__dot { opacity: 0; transition: opacity .3s ease-out 1.5s; }
.dphone__dot--2 { transition-delay: 2.1s; }
.dphone__dot--3 { transition-delay: 2.7s; }
.dphone.is-visible .dphone__dot { opacity: 1; }
/* encadrés : blancs, arrondis, ombre douce, légèrement inclinés (--rot) ; ils apparaissent l'un après
   l'autre (--delay) puis flottent. --u = unité de leur contenu (une fraction de cqw, réglée pour chacun) */
.dcard {
  position: absolute; z-index: 3;
  border-radius: calc(var(--u) * 3.4);
  background: #FFFFFF;
  box-shadow: var(--ds-shadow-card);
  rotate: var(--rot, 0deg);
  opacity: 0; translate: 0 12px;
  transition: opacity .6s ease-out var(--delay, 1.3s), translate .8s cubic-bezier(.34, 1.3, .64, 1) var(--delay, 1.3s);
  animation: qphone-float 6s ease-in-out -1s infinite alternate-reverse;
}
.dphone.is-visible .dcard { opacity: 1; translate: 0 0; }
.dcard img { display: block; width: 100%; height: auto; }
/* carte recette */
.drecipe {
  left: 3%; top: 4%; width: 25%; --u: .55cqw; --rot: -5deg; --delay: 1.3s;
  display: flex; flex-direction: column; gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 2.6) calc(var(--u) * 2.6) calc(var(--u) * 3);
  animation-duration: 6.4s; animation-delay: -3s;
}
.drecipe img { aspect-ratio: 16 / 10; object-fit: cover; border-radius: calc(var(--u) * 2); margin-bottom: calc(var(--u) * .6); }
.drecipe__bar { display: block; height: calc(var(--u) * 2.2); border-radius: 999px; background: #E0E0E0; }
.drecipe__bar--light { height: calc(var(--u) * 1.8); background: #ECECEC; }
.drecipe__foot { display: flex; align-items: center; justify-content: space-between; }
.drecipe__foot svg { width: calc(var(--u) * 4); height: calc(var(--u) * 4); color: var(--orange); }
/* calendrier (planning du mois dans l'app) : grille de 7 colonnes ; jours de la semaine (deux en gras),
   dates en gris, repère orange pâle sous les dates avec un repas, pastilles orange */
.dcal {
  left: 0; top: 47%; width: 28%; --u: .5cqw; --rot: -4deg; --delay: 2.5s;
  display: grid; grid-template-columns: repeat(7, 1fr); row-gap: calc(var(--u) * 2.2);
  padding: calc(var(--u) * 3.8) calc(var(--u) * 3.2) calc(var(--u) * 4.2);
}
.dcal b, .dcal i {
  position: relative; display: grid; place-items: center;
  height: calc(var(--u) * 4.4);
  font-style: normal; font-size: calc(var(--u) * 2.3); line-height: 1;
}
.dcal b { margin-bottom: calc(var(--u) * 1); font-weight: 400; color: #8A8A8A; }
.dcal b.is-strong { font-weight: 600; color: var(--text); }
.dcal i { color: #BDBDBD; }
/* repas prévu : petit trait orange pâle sous la date */
.dcal i.is-mark::after {
  content: ""; position: absolute; left: 22%; right: 22%; bottom: calc(var(--u) * -.9);
  height: calc(var(--u) * 1.1); border-radius: 999px; background: rgba(255, 107, 53, .28);
}
/* date mise en avant : pastille orange */
.dcal i.is-dot::before { content: ""; width: calc(var(--u) * 3); height: calc(var(--u) * 3); border-radius: 50%; background: var(--orange); }
/* liste de courses : titre, articles avec cases à cocher (deux cochées en orange) */
.dlist {
  left: 73.5%; top: 29%; width: 25%; --u: .55cqw; --rot: 3deg; --delay: 1.9s;
  display: flex; flex-direction: column; gap: calc(var(--u) * 2.6);
  padding: calc(var(--u) * 4) calc(var(--u) * 4) calc(var(--u) * 4.6);
  font-size: calc(var(--u) * 2.6); line-height: 1.2; color: var(--text-2); text-align: left;
  animation-duration: 6.8s; animation-delay: -4s;
}
.dlist__head {
  display: block;
  margin-bottom: calc(var(--u) * .8);
  font-size: calc(var(--u) * 3.2); font-weight: 600; color: var(--text);
}
.dlist__row { display: flex; align-items: center; gap: calc(var(--u) * 2.2); }
.dlist__box {
  flex: none; display: grid; place-items: center;
  width: calc(var(--u) * 3.8); height: calc(var(--u) * 3.8);
  border: 1.5px solid #BDBDBD; border-radius: calc(var(--u) * 1);
}
.dlist__box svg { width: 80%; height: 80%; }
.is-done .dlist__box { border-color: var(--orange); background: var(--orange); color: #FFFFFF; }
/* photo épinglée : bord blanc plus large en bas, trombone orange */
.dpola {
  left: 75%; top: 66%; width: 19%; --u: .55cqw; --rot: 5deg; --delay: 3.1s;
  padding: calc(var(--u) * 2.2) calc(var(--u) * 2.2) calc(var(--u) * 7);
  border-radius: calc(var(--u) * 1.2);
  animation-duration: 5.8s; animation-delay: -2s;
}
.dpola img { aspect-ratio: 1; object-fit: cover; border-radius: calc(var(--u) * .6); }
.dpola__clip { position: absolute; right: 12%; top: -9%; width: 10%; height: auto; rotate: 8deg; overflow: visible; }
/* section : plus de place pour l'illustration que pour le texte ; sur mobile, l'illustration en pleine largeur */
/* texte à gauche, illustration à droite (plus large) */
#decouvrir .quotidien-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
@media (max-width: 860px) {
  #decouvrir .quotidien-layout { grid-template-columns: minmax(0, 1fr); }
  .dphone { width: 100%; }
}
#decouvrir { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  .dcard, .dphone__screen, .dscreen__face, .dscreen__home, .dscreen__recipe, .dscreen__bar { animation: none; }
  .dcard { opacity: 1; translate: none; transition: none; }
  .dphone__link path { stroke-dashoffset: 0; transition: none; }
  .dphone__dot { opacity: 1; transition: none; }
}
/* section de la constellation (capture de l'app + mots-clés), sous « Recettes » */
#bloc { overflow-x: clip; }

/* ---------- section « Bloc » : la forme de « Mon » se disloque en blocs ----------
   Des éléments de tailles variées se superposent comme du papier découpé pour former un
   grand bloc : carrés arrondis, une forme de photo, des lignes, des ronds, des anneaux, des
   triangles, et une forme orange centrale (seule touche d'orange). Positions, tailles et couleurs
   posées en ligne (index.html). Ils naissent de la forme de « Mon » : js/v2.js pose
   .bblock--ready (carrés ramassés au centre, invisibles), puis .is-split dès que la forme
   s'y est posée ; la dislocation se joue alors d'elle-même, sans attendre le défilement :
   les carrés jaillissent du centre vers leur place l'un après l'autre (ordre mélangé, --i).
   --dx / --dy (js/v2.js) = écart entre le centre de
   l'assemblage et celui du carré. Sans JS ou en mouvement réduit : figure assemblée. */
.bblock {
  display: flex; justify-content: center;
  margin: 0;
}
.bblock__stack {
  position: relative;
  width: min(100%, 480px); aspect-ratio: 1;
  animation: bblock-float 7s ease-in-out infinite alternate;
}
@keyframes bblock-float {
  from { translate: 0 -6px; }
  to   { translate: 0 6px; }
}
/* chaque carré : ombre diffuse de DESIGN_SYSTEM.md, elle seule crée l'effet de superposition */
.bblock__sq {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 18%;
  box-shadow: var(--ds-shadow-card);
  display: flex; align-items: center; justify-content: center;
  /* vie propre de chaque carré, en continu : il dérive, pivote et respire légèrement.
     Trois mouvements, durées et décalages variés pour qu'aucun ne bouge en même temps.
     (transform : s'ajoute à translate / scale / rotate de la dislocation sans les gêner) */
  animation: bblock-drift-a 6s ease-in-out infinite;
  animation-delay: calc(var(--i) * -170ms);
}
.bblock__sq:nth-child(3n + 1) { animation-name: bblock-drift-b; animation-duration: 7.5s; }
.bblock__sq:nth-child(3n + 2) { animation-name: bblock-drift-c; animation-duration: 5.2s; }
@keyframes bblock-drift-a {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(4px, -7px) rotate(4deg); }
}
@keyframes bblock-drift-b {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(-5px, 6px) rotate(-3deg); }
}
@keyframes bblock-drift-c {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(3px, 4px) scale(1.05); }
  66%      { transform: translate(-3px, -3px) scale(.97); }
}
/* ramassés dans la forme : au centre, minuscules, un peu tournés, invisibles ; au retour
   (on remonte), ils y rentrent tous ensemble, vite */
.bblock--ready .bblock__sq {
  translate: var(--dx, 0px) var(--dy, 0px);
  scale: .15;
  rotate: calc((var(--i) - 27) * 2deg);
  opacity: 0;
  transition: translate .45s ease-in, scale .45s ease-in, rotate .45s ease-in, opacity .3s ease-in .15s;
}
/* dislocation : chacun jaillit vers sa place, départs étalés sur ~1,2 s */
.bblock--ready.is-split .bblock__sq {
  translate: 0 0; scale: 1; rotate: 0deg; opacity: 1;
  transition: translate 1s cubic-bezier(.16, 1, .3, 1), scale 1s cubic-bezier(.16, 1, .3, 1),
              rotate 1s cubic-bezier(.16, 1, .3, 1), opacity .2s ease-out;
  transition-delay: calc(var(--i) * 22ms);
}
@media (max-width: 860px) {
  .bblock__stack { width: min(100%, 320px); }
}
@media (prefers-reduced-motion: reduce) {
  .bblock__stack, .bblock__sq { animation: none; }
}
/* formes des éléments (la hauteur des lignes et de la photo est posée en ligne) */
.bblock__sq--core { z-index: 2; background: var(--orange); box-shadow: var(--ds-shadow-cta); } /* élément orange : ombre teintée */
.bblock__sq--photo { z-index: 1; aspect-ratio: auto; border-radius: 12%/17%; overflow: hidden; background: #E0E0E0; }
.bblock__sq--photo svg { display: block; width: 100%; height: 100%; }
.bblock__sq--line { aspect-ratio: auto; border-radius: 999px; }
.bblock__sq--circle { border-radius: 50%; }
.bblock__sq--ring { border: 3px solid #BDBDBD; border-radius: 50%; background: transparent; box-shadow: none; }
.bblock__sq--triangle { border-radius: 0; background: #D9D9D9; clip-path: polygon(50% 6%, 96% 92%, 4% 92%); box-shadow: none; }
@media (max-width: 860px) {
  .bblock__sq--ring { border-width: 2px; }
}

/* ---------- orange de la marque uniquement : #FF6B35 (et #FFF1EA en pâle, DESIGN_SYSTEM.md) ----------
   css/style.css est partagé avec index.html : ses dégradés et sa teinte pâle sont remplacés ici */
:root { --orange-pale: #FFF1EA; }
.btn--primary { background: #FF6B35; }

/* pied de page : la marque, un séparateur, puis deux colonnes de liens (titre + liens empilés) ;
   remplace la mise en ligne de css/style.css (partagé avec index.html) */
.footer { border-top: 0; } /* pas de trait au-dessus du pied de page */
.footer__inner { display: block; }
.footer__tagline { margin: 10px 0 0; font-size: 14px; color: var(--text-2); }
.footer__divider { height: 1px; margin: 24px 0 28px; border: 0; background: var(--border); }
.footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 240px)); gap: 32px; }
.footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text-2); }
.footer__col a:hover { color: var(--orange); }
.footer__title { margin: 0 0 4px; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--text); }
.footer__copy { margin: 32px 0 0; }
@media (max-width: 600px) {
  .footer__cols { gap: 20px; }
}

/* ---------- page « Politique de confidentialité » (politique-confidentialite.html) ----------
   Titre à gauche, puis sommaire (gauche, fixe) et texte (droite), sous la navbar fixe ; titres en Poppins, texte gris lisible ;
   sous le titre, le nom de la marque (Baloo) ; tableau en fiches empilées sur petit écran ; passages entre crochets à compléter (.legal__todo). */
.legal { padding: 0 0 96px; }
/* partie haute : bandeau orange #FF6B35 sur toute la largeur, sous la navbar fixe ; texte blanc */
.legal__hero { padding: 148px 0 56px; background: var(--orange); color: #FFFFFF; }
/* titre à gauche, puis sommaire (colonne de gauche, fixe pendant la lecture) et texte (colonne de droite) */
.legal__layout { display: grid; grid-template-columns: 260px minmax(0, 760px); gap: 64px; margin-top: 56px; align-items: start; }
.legal__toc {
  position: sticky; top: 112px; max-height: calc(100vh - 136px); overflow-y: auto;
  padding-right: 10px; overscroll-behavior: contain;
  /* barre de défilement fine et discrète, dans les gris de DESIGN_SYSTEM.md */
  scrollbar-width: thin; scrollbar-color: #E0E0E0 transparent;
  /* fondu en bas : il reste des entrées sous la ligne visible */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
  padding-bottom: 24px;
}
.legal__toc::-webkit-scrollbar { width: 6px; }
.legal__toc::-webkit-scrollbar-track { background: transparent; }
.legal__toc::-webkit-scrollbar-thumb { border-radius: 999px; background: #E0E0E0; }
.legal__toc:hover::-webkit-scrollbar-thumb { background: #BDBDBD; }
.legal .legal__toc-title { margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.legal__toc ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid #E0E0E0; }
.legal .legal__toc a {
  display: block; margin-left: -1px; padding: 3px 0 3px 16px;
  border-left: 2px solid transparent;
  font-size: 14px; line-height: 1.4; color: var(--text-2); text-decoration: none;
  transition: color .2s, border-color .2s;
}
.legal .legal__toc a:hover { color: var(--text); }
.legal .legal__toc a.is-current { border-left-color: var(--orange); color: var(--orange); font-weight: 500; }
.legal__content > section:first-of-type { margin-top: 0; }
/* au-dessus de la première partie : la version en vigueur */
.legal .legal__version { margin: 0 0 20px; font-size: 14px; font-weight: 500; color: var(--text-3); }
.legal section { scroll-margin-top: 112px; }
.legal__title { margin: 0; font-size: clamp(32px, 4.4vw, 48px); font-weight: 700; line-height: 1.15; color: #FFFFFF; }
.legal section { margin-top: 48px; }
.legal h2 { margin: 0 0 16px; font-size: clamp(20px, 2.2vw, 24px); font-weight: 600; line-height: 1.3; color: var(--text); }
.legal h3 { margin: 28px 0 10px; font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--text); }
.legal p, .legal li { font-size: 16px; line-height: 1.7; color: var(--text-2); }
.legal p { margin: 0 0 12px; }
.legal ul { margin: 0 0 16px; padding-left: 22px; }
.legal li { margin-bottom: 6px; }
.legal li::marker { color: var(--orange); }
.legal strong { font-weight: 600; color: var(--text); }
.legal a { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; word-break: break-word; }
.legal__todo { padding: 1px 6px; border-radius: 6px; background: #FFF1EA; color: var(--text); }
@media (max-width: 960px) {
  .legal__layout { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 32px; }
  .legal__toc { position: static; max-height: none; -webkit-mask-image: none; mask-image: none; padding: 20px 22px; border-radius: 16px; background: #FFFFFF; box-shadow: var(--ds-shadow-card); }
}
/* tableau (finalités et bases légales) : carte blanche, ombre diffuse de DESIGN_SYSTEM.md, en-tête orange pâle */
.legal__table { margin: 8px 0 16px; overflow-x: auto; border-radius: 16px; background: #FFFFFF; box-shadow: var(--ds-shadow-card); }
.legal table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.55; text-align: left; }
.legal th, .legal td { padding: 14px 18px; vertical-align: top; border-bottom: 1px solid #ECECEC; }
.legal thead th { font-size: 14px; font-weight: 600; color: var(--text); background: #FFF1EA; border-bottom: 0; }
.legal tbody th { width: 40%; font-weight: 600; color: var(--text); }
.legal td { color: var(--text-2); }
.legal tbody tr:last-child th, .legal tbody tr:last-child td { border-bottom: 0; }
.footer__col a[aria-current="page"] { color: var(--text); }
@media (max-width: 600px) {
  .legal { padding: 0 0 64px; }
  .legal__hero { padding: 120px 0 40px; }
  .legal section { margin-top: 36px; }
  .legal p, .legal li { font-size: 15px; }
  /* tableau en fiches empilées : la finalité, puis sa base légale dessous */
  .legal thead { display: none; }
  .legal tbody tr { display: block; padding: 14px 16px; border-bottom: 1px solid #ECECEC; }
  .legal tbody tr:last-child { border-bottom: 0; }
  .legal tbody th, .legal td { display: block; width: auto; padding: 0; border: 0; }
  .legal tbody th { margin-bottom: 4px; }
}

/* ---------- page « Nouveautés » (nouveautes.html) : frise des versions, comme l'écran de l'app ----------
   Pastille et trait vertical à gauche (orange pour la dernière version, blanche bordée de gris sinon),
   puis « Version x », la date et la liste des changements. Reprend la mise en page des pages légales. */
.legal .release { position: relative; margin-top: 0; padding: 0 0 36px 40px; }
.legal .release:not(:last-of-type)::before { content: ""; position: absolute; left: 8px; top: 28px; bottom: 4px; width: 2px; border-radius: 2px; background: #E0E0E0; }
.release__dot { position: absolute; left: 0; top: 6px; width: 18px; height: 18px; border-radius: 50%; background: #FFFFFF; box-shadow: inset 0 0 0 2px #BDBDBD; }
.release--latest .release__dot { background: var(--orange); box-shadow: 0 0 0 5px #FFF1EA; }
.legal .release h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 2px; }
.release__badge { padding: 4px 10px; border-radius: 999px; background: #FFF1EA; color: var(--orange); font-size: 12px; font-weight: 600; line-height: 1.2; }
.legal .release__date { margin: 0 0 12px; font-size: 14px; color: var(--text-3); }
.legal .release ul { margin-bottom: 0; }

/* ---------- page « Contact » (contact.html) ----------
   Bandeau orange des pages légales, puis une accroche, quatre encadrés cliquables (chacun ouvre la
   messagerie avec un objet déjà rempli) et le bouton principal « Écrire un e-mail ». */
.contact__inner { padding-top: 56px; }
.legal .contact__lead { margin: 0 0 12px; font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; line-height: 1.25; }
.legal .contact__intro { max-width: 680px; margin: 0 0 40px; font-size: 17px; }
.legal .contact__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.legal .contact__cards li { margin: 0; }
.legal a.contact__card {
  display: flex; flex-direction: column; height: 100%;
  padding: 24px 22px 26px;
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow: var(--ds-shadow-card);
  color: inherit; text-decoration: none;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.legal a.contact__card:hover { transform: translateY(-3px); }
.legal a.contact__card:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.contact__icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 16px; border-radius: 14px; background: #FFF1EA; color: var(--orange); }
.contact__icon svg { width: 22px; height: 22px; }
.contact__card-title { margin-bottom: 6px; font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--text); }
.contact__card-text { font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.contact__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 48px; }
.legal a.contact__btn { display: inline-flex; align-items: center; gap: 10px; color: #FFFFFF; text-decoration: none; }
.contact__btn svg { width: 20px; height: 20px; }
/* adresse en clair sous le bouton, avec un petit bouton « Copier » (contour discret, orange au survol) */
.legal .contact__address { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; font-size: 15px; color: var(--text-2); }
.contact__email { font-weight: 600; color: var(--text); user-select: all; white-space: nowrap; }
.contact__copy {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: 999px; background: #FFFFFF;
  font: inherit; font-size: 13.5px; font-weight: 500; color: var(--text-2);
  cursor: pointer; transition: color .2s, border-color .2s, background-color .2s;
}
.contact__copy svg { width: 16px; height: 16px; }
.contact__copy:hover { color: var(--orange); border-color: var(--orange); }
.contact__copy:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.contact__copy.is-copied { color: var(--orange); border-color: var(--orange); background: #FFF1EA; }
@media (max-width: 1024px) {
  .legal .contact__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .contact__inner { padding-top: 36px; }
  .legal .contact__cards { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .legal .contact__intro { font-size: 16px; margin-bottom: 28px; }
}

/* sous-titre du hero, dans le <h1> (mots-clés lus par Google) : plus petit, sur sa propre ligne */
.hero h1 .hero__subtitle {
  display: block; margin-top: 14px;
  font-size: clamp(17px, 1.6vw, 21px); font-weight: 500; line-height: 1.4; letter-spacing: 0;
  color: var(--orange);
}