/* =========================================================================
   WONDER ECO — feuille de style
   ------------------------------------------------------------------------
   Direction : le contre-jour. Les photos de Lyon à l'aube sont la matière
   du site — ambre, contre-jour, silhouettes. La page alterne des bandes
   profondes et du papier chaud, et laisse l'image occuper toute la largeur.
   Les couleurs sont relevées dans les photos elles-mêmes (#D9A05B l'aube,
   #1489A8 le décalque du cadre, mesuré au pixel).
   ========================================================================= */

:root {
  color-scheme: light;        /* le site est clair : on le déclare */

  /* les fonds profonds */
  --nuit:       #0C0F11;
  --graphite:   #14181B;
  --ardoise:    #1D2327;
  --ardoise-2:  #262D32;

  /* le papier, chaud comme la lumière des photos */
  --papier:     #F3F1EC;
  --papier-2:   #FAF8F4;
  --carte:      #FFFFFF;

  --encre:      #14181B;
  --encre-doux: #58625F;
  --encre-pale: #8B9490;
  --trait:      #DFDAD1;
  --trait-fort: #C3BCB0;
  --trait-nuit: #2A3238;

  /* les accents, relevés dans les images */
  --vague:      #1489A8;   /* le décalque du cadre */
  --vague-vif:  #22AED1;
  --vague-fond: #E6F1F4;
  --aube:       #D9A05B;   /* le lever de soleil sur la Saône */
  --aube-vif:   #F0B96E;
  --aube-fond:  #F8EEE0;
  --bois:       #D9B57E;
  --accord:     #2E8B5E;
  --accord-fond:#E6F2EB;
  --refus:      #B03A30;
  --refus-fond: #FAEBE9;

  --display: 'Archivo', system-ui, sans-serif;
  --texte:   'Public Sans', system-ui, sans-serif;
  --mono:    'DM Mono', ui-monospace, monospace;

  --rayon: 4px;
  --rayon-carte: 10px;
  --gouttiere: clamp(20px, 4vw, 44px);
  --large: 1280px;

  --douce: cubic-bezier(.22, .68, .28, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 17.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
a { color: var(--vague); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--encre); }
:focus-visible { outline: 2px solid var(--vague-vif); outline-offset: 3px; border-radius: 2px; }

.enveloppe { width: 100%; max-width: var(--large); margin-inline: auto; padding-inline: var(--gouttiere); }
.etroit { max-width: 780px; }

/* ------------------------------------------------------------- typographie */
h1, h2, h3, h4 {
  font-family: var(--display); font-weight: 800; line-height: 1.04;
  margin: 0 0 .5em; letter-spacing: -.035em;
}
h1 { font-size: clamp(2.9rem, 7.2vw, 6.4rem); font-weight: 900; letter-spacing: -.048em; }
h2 { font-size: clamp(2rem, 4.4vw, 3.6rem); letter-spacing: -.042em; }
h3 { font-size: clamp(1.18rem, 1.9vw, 1.5rem); font-weight: 700; letter-spacing: -.022em; }
p  { margin: 0 0 1em; }
p.chapeau { font-size: clamp(1.06rem, 1.6vw, 1.3rem); color: var(--encre-doux); line-height: 1.58; max-width: 56ch; }

.libelle {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .17em;
  text-transform: uppercase; color: var(--encre-pale); display: block; margin-bottom: .6em;
}
.libelle.vague { color: var(--vague); }
.renvoi { font-family: var(--mono); font-size: .71rem; color: var(--encre-pale); letter-spacing: .03em; line-height: 1.6; }
.renvoi a { color: inherit; }
.mono { font-family: var(--mono); }
.discret { color: var(--encre-pale); font-size: .87rem; }
.centre { text-align: center; }
.masque { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ------------------------------------------------------------- le logo */
.vague-marque { width: 100%; height: auto; color: inherit; }
.marque { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--encre); margin-right: auto; }
.marque .vaguette { width: 34px; flex: none; color: var(--vague); }
.marque-nom {
  font-family: var(--display); font-weight: 900; letter-spacing: -.045em;
  font-size: 1.28rem; line-height: 1; white-space: nowrap;
}
.marque-nom em { font-style: normal; color: var(--vague); }

/* la vague se dessine à l'arrivée sur la page */
@keyframes vague-entre {
  from { opacity: 0; transform: translateX(-14px) rotate(-8deg) scale(.86); }
  to   { opacity: 1; transform: none; }
}
.marque .vaguette { animation: vague-entre .8s var(--douce) both; }

/* ---------------------------------------------------------------- en-tête */
.bandeau {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--papier) 86%, transparent);
  backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease;
}
.bandeau.pose { border-bottom-color: var(--trait); }
/* sur le héros sombre, l'en-tête est clair et transparent */
.bandeau.sur-image {
  background: transparent; backdrop-filter: none; border-bottom-color: transparent;
}
.bandeau.sur-image .marque { color: #fff; }
.bandeau.sur-image .marque .vaguette { color: var(--vague-vif); }
.bandeau.sur-image .menu a:not(.bouton) { color: rgba(255,255,255,.82); }
.bandeau.sur-image .menu a:not(.bouton):hover { color: #fff; }
.bandeau-corps { display: flex; align-items: center; gap: 30px; height: 76px; }
.menu { display: flex; gap: 26px; align-items: center; }
.menu a { font-size: .95rem; color: var(--encre-doux); text-decoration: none; font-weight: 500; }
.menu a:hover, .menu a[aria-current="page"] { color: var(--encre); }
.menu a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--vague); }

/* --------------------------------------------------------------- boutons */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--texte); font-size: .97rem; font-weight: 600; line-height: 1;
  padding: 15px 26px; border-radius: 100px; border: 1px solid transparent;
  background: var(--encre); color: #fff; cursor: pointer; text-decoration: none;
  transition: background .2s ease, transform .2s var(--douce), box-shadow .2s ease, color .2s ease;
}
.bouton:hover { background: #000; color: #fff; transform: translateY(-2px); box-shadow: 0 10px 26px -10px rgba(12,15,17,.6); }
.bouton:active { transform: none; }
.bouton.vague { background: var(--vague); }
.bouton.vague:hover { background: #0F7792; }
.bouton.creux { background: transparent; color: var(--encre); border-color: var(--trait-fort); }
.bouton.creux:hover { background: var(--carte); border-color: var(--encre); box-shadow: none; }
.bouton.petit { padding: 10px 17px; font-size: .87rem; }
.bouton[disabled] { opacity: .4; pointer-events: none; }
.section.encre .bouton.creux, .heros-contenu .bouton.creux { color: #fff; border-color: rgba(255,255,255,.3); }
.section.encre .bouton.creux:hover, .heros-contenu .bouton.creux:hover { background: rgba(255,255,255,.08); border-color: #fff; }

/* ---------------------------------------------------------------- champs */
.champ { margin-bottom: 20px; }
.champ input[type=text], .champ input[type=email], .champ input[type=tel],
.champ input[type=number], .champ input[type=password], .champ select, .champ textarea {
  width: 100%; font-family: var(--texte); font-size: 1rem; color: var(--encre);
  padding: 14px 16px; background: var(--carte);
  border: 1px solid var(--trait-fort); border-radius: var(--rayon);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.champ textarea { line-height: 1.55; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none; border-color: var(--vague); box-shadow: 0 0 0 4px var(--vague-fond);
}
.champ .aide-saisie { font-size: .85rem; color: var(--encre-pale); margin-top: 7px; line-height: 1.5; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .duo { grid-template-columns: 1fr; } }

/* ======================= LE HÉROS, PLEIN ÉCRAN ==========================
   L'image (ou la vidéo) tient toute la hauteur. Le texte entre en scène.
   ======================================================================== */
/* ⚠ L'IMAGE N'EST JAMAIS RECADRÉE. Le héros prend exactement le format du
   film (16:9) : on voit la scène entière, du premier au dernier pixel.
   Le texte se pose par-dessus, dans la moitié sombre. */
.heros-image {
  position: relative; display: grid; overflow: hidden; background: var(--nuit);
}
.heros-image > .heros-fond { grid-area: 1 / 1; }
.heros-image > .heros-voile { grid-area: 1 / 1; }
.heros-image > .heros-contenu { grid-area: 1 / 1; align-self: end; justify-self: center; }
.heros-fond {
  width: 100%; aspect-ratio: 16 / 9; height: auto; display: block;
  object-fit: contain; background: var(--nuit);
}


.heros-voile {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(103deg, rgba(10,13,15,.93) 0%, rgba(10,13,15,.72) 34%, rgba(10,13,15,.16) 66%, rgba(10,13,15,0) 100%),
    linear-gradient(to top, rgba(10,13,15,.78) 0%, rgba(10,13,15,0) 46%),
    radial-gradient(130% 80% at 72% 34%, rgba(217,160,91,.20), transparent 62%);
}
.heros-contenu {
  position: relative; z-index: 2; color: #fff;
  padding-block: clamp(32px, 5vw, 76px);
  max-width: var(--large); width: 100%;
}
.heros-contenu .libelle { color: var(--aube-vif); }
.heros-contenu h1 { color: #fff; max-width: 16ch; text-wrap: balance; text-shadow: 0 2px 42px rgba(0,0,0,.42); }
.heros-contenu h1 .cyan { color: var(--vague-vif); }
.heros-contenu .chapeau { color: rgba(255,255,255,.88); max-width: 52ch; }

/* l'entrée en scène, une ligne après l'autre */
@keyframes monte-doux { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.heros-contenu > * { animation: monte-doux .9s var(--douce) both; }
.heros-contenu > *:nth-child(1) { animation-delay: .08s; }
.heros-contenu > *:nth-child(2) { animation-delay: .20s; }
.heros-contenu > *:nth-child(3) { animation-delay: .34s; }
.heros-contenu > *:nth-child(4) { animation-delay: .48s; }

.heros-preuves {
  display: flex; gap: clamp(24px, 5vw, 60px); flex-wrap: wrap;
  margin-top: 34px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.22);
}
.heros-preuves > div { min-width: 96px; }
.heros-preuves b {
  font-family: var(--display); font-weight: 900; font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  letter-spacing: -.04em; display: block; color: #fff; font-variant-numeric: tabular-nums;
}
.heros-preuves span { font-size: .82rem; color: rgba(255,255,255,.62); }

/* l'invitation à descendre */
.descendre {
  position: absolute; left: 50%; bottom: 22px; z-index: 3;
  transform: translateX(-50%); color: rgba(255,255,255,.5);
  font-family: var(--mono); font-size: .64rem; letter-spacing: .2em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.descendre::after {
  content: ''; width: 1px; height: 34px;
  background: linear-gradient(rgba(255,255,255,.6), transparent);
  animation: file 2.4s ease-in-out infinite;
}
@keyframes file { 0%,100% { opacity: .25; transform: scaleY(.6); } 50% { opacity: 1; transform: scaleY(1); } }
@media (max-width: 760px) { .descendre { display: none; } }

/* l'instrument chevauche le héros */
.instrument-chevauche { margin-top: clamp(-96px, -7vw, -56px); position: relative; z-index: 20; }

/* ===================== L'INSTRUMENT D'ÉLIGIBILITÉ ======================= */
.instrument {
  background: var(--carte); border: 1px solid var(--trait);
  border-radius: var(--rayon-carte); overflow: hidden;
  box-shadow: 0 1px 2px rgba(20,24,27,.04), 0 28px 70px -34px rgba(12,15,17,.55);
}
.instrument-tete {
  padding: 24px clamp(22px, 3vw, 32px) 20px;
  border-bottom: 1px solid var(--trait);
  background: linear-gradient(var(--papier-2), var(--carte));
}
.instrument-tete h2 { font-size: clamp(1.2rem, 1.9vw, 1.5rem); margin: 0 0 4px; }
.instrument-tete p { margin: 0; font-size: .92rem; color: var(--encre-doux); }
.instrument-corps { padding: clamp(22px, 3vw, 32px); }

.chercheur { display: flex; gap: 12px; }
.chercheur input { flex: 1; font-family: var(--mono); font-size: 1.04rem; letter-spacing: .05em; }
@media (max-width: 580px) { .chercheur { flex-direction: column; } }

/* le constat : un extrait officiel, avec son tampon */
.constat { margin-top: 24px; display: none; }
.constat.visible { display: block; animation: monte-doux .42s var(--douce) both; }
.constat-cadre {
  border: 1px solid var(--encre); background: var(--carte); padding: clamp(20px, 3vw, 28px);
  position: relative;
  box-shadow: 0 0 0 1px var(--carte) inset, 0 0 0 5px var(--papier-2) inset, 0 0 0 6px var(--trait) inset;
}
.constat-identite { padding-right: 128px; }
.constat-identite .raison { font-family: var(--display); font-weight: 800; font-size: 1.35rem; letter-spacing: -.03em; line-height: 1.14; }
.constat-identite .lieu { color: var(--encre-doux); font-size: .93rem; margin-top: 4px; }

.tampon {
  position: absolute; top: 18px; right: 18px;
  font-family: var(--display); font-weight: 900; font-size: .8rem;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 10px 15px; border: 2.5px solid currentColor; border-radius: 4px;
  transform: rotate(-5deg); opacity: .94;
}
.tampon.oui { color: var(--accord); }
.tampon.non { color: var(--refus); }
.constat.visible .tampon { animation: tampon .46s cubic-bezier(.2,1.5,.4,1) .14s both; }
@keyframes tampon {
  from { opacity: 0; transform: rotate(-20deg) scale(1.7); }
  to   { opacity: .94; transform: rotate(-5deg) scale(1); }
}

/* le relevé : des lignes de registre */
.releve { margin: 22px 0 0; border-top: 1px solid var(--trait); }
.releve div { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 11px 0; border-bottom: 1px solid var(--trait); }
.releve dt { font-family: var(--mono); font-size: .69rem; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-pale); margin: 0; }
.releve dd { margin: 0; font-weight: 600; text-align: right; }
.releve dd.mono { font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.releve dd small { display: block; font-weight: 400; color: var(--encre-pale); font-size: .78rem; margin-top: 2px; }
.section.encre .releve, .section.encre .releve div { border-color: var(--trait-nuit); }
.section.encre .releve dd { color: #fff; }

/* les chiffres : l'argument tient dedans */
.chiffre {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(2.5rem, 5.4vw, 3.6rem); line-height: .94;
  letter-spacing: -.055em; font-variant-numeric: tabular-nums;
}
.chiffre.vague { color: var(--vague); }
.chiffre.aube { color: var(--aube); }
.chiffre-pied { font-size: .89rem; color: var(--encre-doux); margin-top: 8px; line-height: 1.45; }

.sommes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--trait); border: 1px solid var(--trait); margin-top: 22px; border-radius: var(--rayon); overflow: hidden;
}
.sommes > div { background: var(--carte); padding: 22px; }
.sommes .chiffre { font-size: clamp(1.9rem, 4vw, 2.6rem); }
@media (max-width: 580px) { .sommes { grid-template-columns: 1fr; } }

/* les avis */
.avis { display: flex; gap: 12px; padding: 15px 17px; border-radius: var(--rayon); font-size: .91rem; line-height: 1.55; margin-top: 18px; }
.avis strong { font-weight: 700; }
.avis.vert  { background: var(--accord-fond); color: #1B6344; }
.avis.ambre { background: var(--aube-fond);   color: #80541B; }
.avis.rouge { background: var(--refus-fond);  color: #83281F; }
.avis.bleu  { background: var(--vague-fond);  color: #0D5B71; }
.avis-pic { flex: none; width: 19px; height: 19px; margin-top: 2px; }

/* ------------------------------------------------------------- sections */
.section { padding: clamp(60px, 9vw, 130px) 0; position: relative; }
.section.claire { background: var(--papier-2); border-block: 1px solid var(--trait); }
.section.encre { background: var(--graphite); color: #D9E0E2; }
.section.encre h2, .section.encre h3 { color: #fff; }
.section.encre .libelle { color: var(--aube); }
.section.encre p { color: #9DA8AB; }
.section.encre .chapeau { color: #AEB9BB; }
.section.encre .carte { background: var(--ardoise); border-color: var(--trait-nuit); }
.section.encre .carte p { color: #9DA8AB; }
.section-tete { max-width: 64ch; margin-bottom: clamp(32px, 5vw, 58px); }
.section-tete h2 { text-wrap: balance; }

/* ---------------------------------------------------------- cartes, jeux */
.jeu { display: grid; gap: 22px; }
.jeu.deux   { grid-template-columns: repeat(2, 1fr); }
.jeu.trois  { grid-template-columns: repeat(3, 1fr); }
.jeu.quatre { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 920px) { .jeu.trois, .jeu.quatre { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .jeu.deux, .jeu.trois, .jeu.quatre { grid-template-columns: 1fr; } }
.jeu > * { min-width: 0; }

.carte {
  background: var(--carte); border: 1px solid var(--trait);
  border-radius: var(--rayon-carte); padding: clamp(22px, 3vw, 30px);
  transition: transform .3s var(--douce), box-shadow .3s ease;
}
.carte h3 { margin-bottom: .4em; }
.carte p:last-child { margin-bottom: 0; }
.carte.pleine { padding: 0; overflow: hidden; }
.carte.pleine img { width: 100%; aspect-ratio: 16/9; object-fit: cover; transition: transform .7s var(--douce); }
.carte.pleine:hover img { transform: scale(1.04); }
.carte-texte { padding: 22px 24px 26px; }

/* ----------------------------------------------------------- le tableau */
.tableau { width: 100%; border-collapse: collapse; background: var(--carte); border: 1px solid var(--trait); font-size: .96rem; border-radius: var(--rayon-carte); overflow: hidden; }
.tableau th, .tableau td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--trait); }
.tableau thead th { font-family: var(--mono); font-size: .66rem; letter-spacing: .13em; text-transform: uppercase; color: var(--encre-pale); font-weight: 400; background: var(--papier-2); }
.tableau tbody th { font-weight: 600; }
.tableau td.nombre { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tableau .notre { background: var(--vague-fond); }
.tableau thead th.notre { color: var(--vague); font-weight: 700; background: #DCEDF2; }
.tableau tbody tr:last-child th, .tableau tbody tr:last-child td { border-bottom: 0; }
.tableau-defile { overflow-x: auto; max-width: 100%; border-radius: var(--rayon-carte); }

/* --------------------------------------------------- étapes (vraie suite) */
.etapes { counter-reset: etape; }
.etape { display: grid; grid-template-columns: 62px 1fr; gap: 24px; padding: 30px 0; border-top: 1px solid var(--trait); }
.etape:last-child { border-bottom: 1px solid var(--trait); }
.etape::before {
  counter-increment: etape; content: counter(etape, decimal-leading-zero);
  font-family: var(--mono); font-size: .95rem; color: var(--vague); letter-spacing: .05em; padding-top: 4px;
}
.section.encre .etape, .section.encre .etape:last-child { border-color: var(--trait-nuit); }
.section.encre .etape::before { color: var(--aube); }
.etape h3 { margin-bottom: .3em; }
.etape p:last-child { margin-bottom: 0; }

/* ============== LA MOSAÏQUE LYONNAISE, pleine largeur ================== */
.mosaique { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.mosaique figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--rayon-carte); background: var(--nuit); }
.mosaique img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--douce); }
.mosaique figure:hover img, .mosaique figure:focus-within img { transform: scale(1.06); }
.mosaique figcaption {
  position: absolute; inset: auto 0 0 0; padding: 52px 18px 16px;
  background: linear-gradient(to top, rgba(10,13,15,.88) 12%, rgba(10,13,15,0));
  color: rgba(255,255,255,.72); font-size: .82rem; line-height: 1.45;
}
.mosaique figcaption b {
  display: block; color: #fff; font-family: var(--display); font-weight: 700;
  font-size: .98rem; letter-spacing: -.015em; margin-bottom: 2px;
}
/* ⚠ Les photos sont toutes en 16:9. Toute case d'un autre format les
   rognerait. On garde donc le 16:9 partout, et c'est la LARGEUR des cases
   qui fait le rythme — jamais un recadrage. */
.m-large { grid-column: span 4; aspect-ratio: 16 / 9; }
.m-haut  { grid-column: span 2; aspect-ratio: 16 / 9; align-self: center; }
.m-tiers { grid-column: span 2; aspect-ratio: 16 / 9; }
.m-bande { grid-column: span 6; aspect-ratio: 16 / 9; }
.mosaique img { object-fit: cover; }
@media (max-width: 880px) {
  .mosaique { grid-template-columns: repeat(2, 1fr); }
  .m-large, .m-bande { grid-column: span 2; }
  .m-haut, .m-tiers { grid-column: span 1; }
  .m-large, .m-bande, .m-haut, .m-tiers { aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
  .mosaique { grid-template-columns: 1fr; }
  .m-large, .m-bande, .m-haut, .m-tiers { grid-column: span 1; aspect-ratio: 16 / 9; }
}

/* une bande d'image pleine largeur, en parallaxe douce */
/* L'image s'affiche ENTIÈRE : on laisse son format commander la hauteur.
   La parallaxe ne déplace plus l'image (elle la rognerait) — elle joue sur
   le voile du bas. */
.bande-image { position: relative; overflow: hidden; margin: 0; }
.bande-image img { width: 100%; height: auto; display: block; }
.bande-image figcaption {
  position: absolute; inset: auto 0 0 0; padding: 70px var(--gouttiere) 28px;
  background: linear-gradient(to top, rgba(10,13,15,.86), rgba(10,13,15,0));
  color: rgba(255,255,255,.8); font-size: .92rem;
}
.bande-image figcaption b { color: #fff; font-weight: 700; }

/* ================= LA SÉQUENCE DE L'ADDITION (le moment fort) ==========
   On descend, et le prix se vide ligne après ligne jusqu'au reste.
   ====================================================================== */
.addition { background: var(--nuit); color: #fff; }
.addition-grille { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(30px, 5vw, 70px); align-items: start; }
@media (max-width: 940px) { .addition-grille { grid-template-columns: 1fr; } }

.addition-collant { position: sticky; top: 110px; }
@media (max-width: 940px) { .addition-collant { position: static; } }
.addition-total {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(2.7rem, 7.4vw, 5.6rem); line-height: .9;
  letter-spacing: -.055em; font-variant-numeric: tabular-nums; color: #fff;
  white-space: nowrap;           /* « 3 572,10 € » ne se coupe jamais */
  transition: color .5s ease;
}
.addition-total.fini { color: var(--aube-vif); }
.addition-legende { font-size: .95rem; color: rgba(255,255,255,.56); margin-top: 14px; max-width: 34ch; }

.addition-lignes { list-style: none; margin: 0; padding: 0; }
.addition-lignes li {
  display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: baseline;
  padding: clamp(20px, 3vw, 30px) 0; border-bottom: 1px solid var(--trait-nuit);
  opacity: .3; transition: opacity .55s var(--douce), transform .55s var(--douce);
  transform: translateY(10px);
}
.addition-lignes li.active { opacity: 1; transform: none; }
.addition-lignes li:first-child { border-top: 1px solid var(--trait-nuit); }
.addition-lignes .quoi { font-family: var(--display); font-weight: 700; font-size: clamp(1.1rem, 1.9vw, 1.45rem); letter-spacing: -.025em; color: #fff; }
.addition-lignes .detail { display: block; font-family: var(--texte); font-weight: 400; font-size: .88rem; color: rgba(255,255,255,.5); margin-top: 5px; letter-spacing: 0; max-width: 46ch; line-height: 1.5; }
.addition-lignes .combien { font-family: var(--mono); font-size: clamp(1.05rem, 2vw, 1.45rem); font-variant-numeric: tabular-nums; white-space: nowrap; }
.addition-lignes .combien.moins { color: var(--vague-vif); }
.addition-lignes .combien.reste { color: var(--aube-vif); font-weight: 500; }

/* -------------------------------------------------------- le dossier */
.dossier-grille { display: grid; grid-template-columns: 262px 1fr; gap: 46px; align-items: start; }
@media (max-width: 960px) { .dossier-grille { grid-template-columns: 1fr; gap: 26px; } }
.dossier-grille > * { min-width: 0; }

.rail { position: sticky; top: 100px; }
@media (max-width: 960px) { .rail { position: static; } }
.rail ol { list-style: none; margin: 0; padding: 0; }
.rail li { position: relative; padding: 0 0 24px 28px; font-size: .95rem; }
.rail li::before { content: ''; position: absolute; left: 4px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--carte); border: 2px solid var(--trait-fort); }
.rail li::after  { content: ''; position: absolute; left: 8.5px; top: 19px; bottom: 0; width: 1px; background: var(--trait); }
.rail li:last-child::after { display: none; }
.rail li.faite::before { background: var(--accord); border-color: var(--accord); }
.rail li.ici::before { background: var(--vague); border-color: var(--vague); box-shadow: 0 0 0 5px var(--vague-fond); }
.rail li a { color: var(--encre-doux); text-decoration: none; }
.rail li.ici a, .rail li.faite a { color: var(--encre); font-weight: 600; }

.bloc {
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon-carte);
  padding: clamp(22px, 3vw, 32px); margin-bottom: 24px; scroll-margin-top: 100px;
}
.bloc > h2 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); }
.bloc-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 20px; }
.bloc-tete h2 { margin: 0; }

.etiquette { font-family: var(--mono); font-size: .67rem; letter-spacing: .12em; text-transform: uppercase; padding: 6px 12px; border-radius: 100px; white-space: nowrap; }
.etiquette.attente { background: var(--papier); color: var(--encre-pale); border: 1px solid var(--trait); }
.etiquette.faite   { background: var(--accord-fond); color: var(--accord); }
.etiquette.cours   { background: var(--vague-fond); color: var(--vague); }
.etiquette.refus   { background: var(--refus-fond); color: var(--refus); }

.pieces { list-style: none; margin: 0 0 20px; padding: 0; }
.pieces li { display: flex; align-items: center; gap: 15px; padding: 14px 0; border-bottom: 1px solid var(--trait); flex-wrap: wrap; }
.pieces li:first-child { border-top: 1px solid var(--trait); }
.piece-nom { flex: 1; min-width: 180px; }
.piece-nom b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.piece-nom span { font-size: .83rem; color: var(--encre-pale); }

.depot { border: 1px dashed var(--trait-fort); border-radius: var(--rayon); padding: 20px; background: var(--papier-2); }
.depot input[type=file] { font-size: .9rem; max-width: 100%; }

/* ------------------------------------------------------------- listes */
.liste-propre { list-style: none; margin: 0; padding: 0; }
.liste-propre li { padding: 11px 0 11px 28px; position: relative; border-bottom: 1px solid var(--trait); }
.liste-propre li::before { content: ''; position: absolute; left: 4px; top: 19px; width: 11px; height: 1.5px; background: var(--vague); }
.liste-propre li:last-child { border-bottom: 0; }
.section.encre .liste-propre li { border-color: var(--trait-nuit); color: #AEB9BB; }
.section.encre .liste-propre li::before { background: var(--aube); }
.deux-colonnes { column-count: 2; column-gap: 40px; }
@media (max-width: 700px) { .deux-colonnes { column-count: 1; } }

/* -------------------------------------------------------------- pied */
.pied { background: var(--nuit); color: #8E9A9D; padding: clamp(56px, 8vw, 88px) 0 36px; font-size: .92rem; }
.pied a { color: #CBD5D7; text-decoration: none; }
.pied a:hover { color: #fff; text-decoration: underline; }
.pied-grille { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; margin-bottom: 44px; }
@media (max-width: 780px) { .pied-grille { grid-template-columns: 1fr; gap: 28px; } }
.pied h4 { color: #fff; font-size: .72rem; font-family: var(--mono); font-weight: 400; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 14px; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: 8px; }
.pied-bas { border-top: 1px solid #222A2E; padding-top: 24px; font-size: .83rem; color: #6B7679; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.pied .marque { color: #fff; margin: 0 0 14px; }
.pied .marque .vaguette { color: var(--vague-vif); animation: none; }

.ruban { height: 4px; background: linear-gradient(90deg, var(--vague) 0 34%, var(--aube) 34% 64%, var(--nuit) 64% 100%); }

/* ------------------------------------------------- apparition au défilement */
/* ⚠ On ne masque un bloc que si le script tourne : sans JavaScript,
   une page entière resterait invisible. La classe « js » est posée en
   tête de document, avant le premier rendu. */
.js [data-apparait] { opacity: 0; transform: translateY(20px); }
.js [data-apparait].vu { opacity: 1; transform: none; transition: opacity .75s var(--douce), transform .75s var(--douce); }
@media (prefers-reduced-motion: reduce) { .js [data-apparait] { opacity: 1; transform: none; } }

/* -------------------------------------------------------- le téléphone */
@media (max-width: 700px) {
  .bandeau-corps { height: auto; min-height: 62px; padding-block: 11px; gap: 14px; }
  .marque-nom { font-size: 1.08rem; }
  .menu { gap: 14px; }
  .menu a:not(.bouton) { display: none; }
  .heros-image { min-height: 86svh; }
  .heros-contenu h1 { max-width: none; }
  .constat-identite { padding-right: 0; }
  .tampon { position: static; display: inline-block; margin-bottom: 14px; transform: rotate(-3deg); }
}

/* ------------------------------------------------------------------------
   Un héros clair, pour les pages intérieures : la photo produit sur papier,
   les chiffres en encre. Le héros sombre reste réservé à l'accueil.
   ------------------------------------------------------------------------ */
.heros-clair { padding: clamp(44px, 7vw, 96px) 0 clamp(30px, 5vw, 62px); background: var(--papier); }
.heros-clair .duo-heros {
  display: grid; grid-template-columns: 1fr 1.1fr;
  gap: clamp(28px, 5vw, 64px); align-items: center;
}
.heros-clair .duo-heros > * { min-width: 0; }
@media (max-width: 940px) { .heros-clair .duo-heros { grid-template-columns: 1fr; } }
.heros-clair .heros-preuves { border-top-color: var(--trait); }
.heros-clair .heros-preuves b { color: var(--encre); }
.heros-clair .heros-preuves span { color: var(--encre-doux); }
.cadre-photo {
  border-radius: var(--rayon-carte); overflow: hidden; background: var(--carte);
  border: 1px solid var(--trait);
  box-shadow: 0 24px 60px -34px rgba(12,15,17,.4);
}
.cadre-photo img { width: 100%; height: auto; }
/* sur une page intérieure, le titre partage la largeur avec la photo :
   il lui faut une échelle plus sage que celle de l'accueil */
.heros-clair h1 { font-size: clamp(2.2rem, 4.3vw, 3.8rem); letter-spacing: -.042em; }
.heros-clair .chapeau { max-width: 44ch; }

/* Le héros filmé : la vidéo porte son propre mouvement, on retire le zoom
   lent réservé à l'image fixe. Sans lecture possible, l'affiche reste. */

.heros-fond.film[data-arrete] { animation: none; }

/* ═══════════════════════════ LA FINITION ═══════════════════════════════
   Trois détails qui font la différence entre « propre » et « beau » :
   un grain de pellicule sur les fonds sombres, un voile plus franc sur
   le héros pour que le texte tienne sur n'importe quelle image de film,
   et la vague qui se dessine au chargement.
   ═══════════════════════════════════════════════════════════════════════ */

/* le grain : une turbulence SVG, figée, très légère */
.heros-image::after,
.section.encre::after,
.addition::after,
.pied::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  opacity: .16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
.pied { position: relative; }
.heros-contenu, .addition .enveloppe, .section.encre .enveloppe, .pied .enveloppe { position: relative; z-index: 2; }

/* le voile du héros : plus franc à gauche, le texte tient sur tout le film */
.heros-voile {
  background:
    linear-gradient(101deg, rgba(8,11,13,.95) 0%, rgba(8,11,13,.80) 30%, rgba(8,11,13,.26) 62%, rgba(8,11,13,.05) 100%),
    linear-gradient(to top, rgba(8,11,13,.82) 0%, rgba(8,11,13,.10) 44%, rgba(8,11,13,.30) 100%),
    radial-gradient(120% 75% at 76% 32%, rgba(217,160,91,.22), transparent 60%);
}

/* la vague se dessine, de gauche à droite */
@keyframes vague-trace {
  from { clip-path: inset(0 100% 0 0); opacity: 0; }
  40%  { opacity: 1; }
  to   { clip-path: inset(0 0 0 0); opacity: 1; }
}
.marque .vaguette { animation: vague-trace 1.1s var(--douce) .15s both; }
.pied .marque .vaguette { animation: none; }

/* un filet de lumière entre deux sections claires */
.section.claire + .section:not(.claire):not(.encre)::before,
.section:not(.claire):not(.encre) + .section.claire::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(100%, var(--large)); height: 1px;
  background: linear-gradient(90deg, transparent, var(--trait-fort) 22%, var(--trait-fort) 78%, transparent);
}

/* les cartes se soulèvent à peine au survol */
.carte.pleine:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -26px rgba(12,15,17,.45); }

/* le bouton principal : un halo discret */
.bouton.vague { box-shadow: 0 0 0 0 rgba(34,174,209,.45); }
.bouton.vague:hover { box-shadow: 0 10px 30px -12px rgba(20,137,168,.85); }

/* ------------------------------------------------------------------------
   Téléphone : le héros doit tenir dans un écran, titre et chiffres compris.
   Sans ça le bas du texte passe sous la ligne de flottaison.
   ------------------------------------------------------------------------ */
@media (max-width: 760px) {
  /* Sur un téléphone, une image 16:9 est trop basse pour qu'on écrive dessus :
     le film reste entier en haut, le texte passe dessous sur le fond sombre. */
  .heros-image { display: block; }
  .heros-image > .heros-fond,
  .heros-image > .heros-voile,
  .heros-image > .heros-contenu { grid-area: auto; }
  .heros-voile { position: absolute; top: 0; left: 0; right: 0; aspect-ratio: 16/9; height: auto; }
  .heros-contenu { position: relative; padding-block: 28px 40px; }
  .heros-contenu h1 { font-size: clamp(2rem, 9vw, 2.8rem); letter-spacing: -.04em; }
  .heros-voile {
    background:
      linear-gradient(to bottom, rgba(8,11,13,.92) 0%, rgba(8,11,13,.72) 46%, rgba(8,11,13,.24) 72%, rgba(8,11,13,.62) 100%),
      radial-gradient(120% 60% at 70% 72%, rgba(217,160,91,.20), transparent 60%);
  }
  .heros-contenu .chapeau { font-size: 1rem; line-height: 1.5; }
  .heros-preuves { gap: 18px 26px; margin-top: 24px; padding-top: 18px; }
  .heros-preuves > div { min-width: 0; flex: 1 1 40%; }
  .heros-preuves b { font-size: 1.3rem; }
  .instrument-chevauche { margin-top: -38px; }
  .addition-lignes li { grid-template-columns: 1fr; gap: 6px; }
  .addition-lignes .combien { justify-self: start; }
  .bande-image { height: clamp(240px, 62vw, 340px); }
}

/* ═══════════════════ LES BANDES FILMÉES, PLEINE LARGEUR ═══════════════════
   Même langage que .bande-image, mais la scène s'anime. La vidéo ne se
   charge que lorsqu'elle approche de l'écran, et se met en pause dès
   qu'elle sort : pas de mégaoctets gaspillés ni de batterie vidée.
   ══════════════════════════════════════════════════════════════════════════ */
.bande-film { position: relative; overflow: hidden; margin: 0; background: var(--nuit); }
/* La vidéo est en 16:9 et le cadre aussi : rien n'est coupé. */
.bande-film video { width: 100%; aspect-ratio: 16 / 9; height: auto; display: block; }
.bande-film::after {          /* le grain, comme sur les autres fonds sombres */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  opacity: .14; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
.bande-film figcaption {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 70px var(--gouttiere) 24px;
  background: linear-gradient(to top, rgba(8,11,13,.86) 14%, rgba(8,11,13,0));
  color: rgba(255,255,255,.74); font-size: .86rem; line-height: 1.5;
}
.bande-film figcaption b {
  display: block; color: #fff; font-family: var(--display); font-weight: 700;
  font-size: clamp(1rem, 1.5vw, 1.2rem); letter-spacing: -.02em; margin-bottom: 4px;
}
.bande-film figcaption span { display: block; max-width: 56ch; }
@media (max-width: 700px) {
  .bande-film video { height: clamp(280px, 72vw, 420px); }
  .bande-film figcaption { padding: 70px var(--gouttiere) 22px; }
}

/* ═══════════════════════ PLUS DE SOUFFLE, PLUS DE MARQUE ═════════════════
   Moins de texte au mètre, plus de blanc, et la vague du cadre posée en
   filigrane derrière les grands titres sombres : la marque habite la page
   sans jamais gêner la lecture.
   ══════════════════════════════════════════════════════════════════════════ */
.chapeau { max-width: 46ch; }
.section-tete { max-width: 54ch; margin-bottom: clamp(38px, 6vw, 72px); }
.section { padding: clamp(74px, 11vw, 160px) 0; }
.addition-lignes .detail { max-width: 42ch; }

/* le filigrane : grand, très pâle, décoratif et muet pour les lecteurs d'écran */
.filigrane {
  position: absolute; pointer-events: none; z-index: 0;
  width: min(54vw, 760px); top: -8%; right: -9%;
  color: #fff; opacity: .035; transform: rotate(-7deg);
}
.filigrane svg { width: 100%; height: auto; }
/* ⚠ « overflow: hidden » casserait le collage du grand chiffre de l'addition.
   « clip » rogne le filigrane sans créer de conteneur de défilement. */
.section.encre, .addition { position: relative; overflow: clip; }
@media (max-width: 760px) { .filigrane { width: 110vw; right: -36%; top: -4%; opacity: .045; } }

/* un filet sous l'étiquette de section : un détail, mais il tient tout */
.section-tete .libelle { position: relative; padding-bottom: 14px; }
.section-tete .libelle::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 34px; height: 2px;
  background: var(--vague);
}
.section.encre .section-tete .libelle::after,
.addition .section-tete .libelle::after { background: var(--aube); }
.heros-contenu .libelle::after { display: none; }

/* les titres respirent */
h2 { text-wrap: balance; }
.section-tete h2 { margin-bottom: .42em; }

/* ══════════════════════════ LE CONSEILLER ═══════════════════════════════
   Un bouton discret en bas à droite, un panneau qui pose quatre questions
   et rend un verdict chiffré. Il ne cache jamais le contenu sur téléphone :
   il s'ouvre en feuille, du bas.
   ════════════════════════════════════════════════════════════════════════ */
.conseiller { position: fixed; right: 22px; bottom: 22px; z-index: 90; }

.conseiller-appel {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px 12px 14px; border: 0; border-radius: 100px; cursor: pointer;
  background: var(--encre); color: #fff; font-family: var(--texte); text-align: left;
  box-shadow: 0 14px 34px -12px rgba(12,15,17,.6);
  transition: transform .22s var(--douce), box-shadow .22s ease;
}
.conseiller-appel:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -14px rgba(12,15,17,.75); }
.conseiller-appel-texte b { display: block; font-family: var(--display); font-weight: 800; font-size: .97rem; letter-spacing: -.02em; }
.conseiller-appel-texte span { display: block; font-size: .78rem; color: rgba(255,255,255,.6); }
.conseiller-vague { width: 30px; flex: none; color: var(--vague-vif); }
.conseiller-vague svg { width: 100%; height: auto; }
.conseiller[data-ouvert] .conseiller-appel { display: none; }

.conseiller-panneau {
  width: min(400px, calc(100vw - 32px));
  background: var(--carte); border: 1px solid var(--trait); border-radius: 16px;
  box-shadow: 0 30px 80px -30px rgba(12,15,17,.6);
  overflow: hidden; animation: monte-doux .3s var(--douce) both;
}
.conseiller-panneau[hidden] { display: none; }

.conseiller-tete {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; background: var(--encre); color: #fff;
}
.conseiller-tete > div { flex: 1; min-width: 0; }
.conseiller-tete b { display: block; font-family: var(--display); font-weight: 800; font-size: 1rem; letter-spacing: -.02em; }
.conseiller-tete span { display: block; font-size: .78rem; color: rgba(255,255,255,.6); }
.conseiller-fermer {
  background: transparent; border: 0; color: rgba(255,255,255,.6);
  font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 4px;
}
.conseiller-fermer:hover { color: #fff; }

.conseiller-jauge { height: 2px; background: var(--trait); }
.conseiller-jauge i { display: block; height: 100%; background: var(--vague); transition: width .4s var(--douce); }

.conseiller-corps { padding: 20px 18px 22px; max-height: min(64vh, 520px); overflow-y: auto; }
.conseiller-vue[hidden] { display: none; }
.conseiller-dit { font-size: 1rem; line-height: 1.5; margin: 0 0 14px; }
.conseiller-note { font-size: .82rem; color: var(--encre-pale); line-height: 1.5; margin: 12px 0 0; }
.conseiller-erreur { font-size: .87rem; color: var(--refus); margin: 0 0 12px; }
.conseiller-erreur[hidden] { display: none; }
.conseiller-choix { display: grid; gap: 10px; }
.conseiller-choix .bouton { width: 100%; justify-content: flex-start; padding-inline: 18px; }
.conseiller-actions { display: grid; gap: 10px; margin-top: 18px; }
.conseiller-actions .bouton { width: 100%; }

.conseiller-fiche {
  background: var(--papier-2); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: 13px 15px; margin-bottom: 16px; font-size: .88rem; line-height: 1.45;
}
.conseiller-fiche b { display: block; font-weight: 700; margin-bottom: 2px; }
.conseiller-fiche span { color: var(--encre-pale); }

.conseiller-somme {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--trait); border: 1px solid var(--trait); border-radius: var(--rayon);
  overflow: hidden; margin: 16px 0;
}
.conseiller-somme > div { background: var(--carte); padding: 14px; }
.conseiller-somme .chiffre { font-size: 1.7rem; }

/* sur téléphone : une feuille qui monte du bas, pleine largeur */
@media (max-width: 620px) {
  .conseiller { right: 14px; left: 14px; bottom: 14px; }
  .conseiller-appel { width: 100%; justify-content: center; }
  .conseiller-panneau { width: 100%; }
  .conseiller-corps { max-height: 58vh; }
}

/* le bouton WhatsApp, au-dessus du conseiller */
.flotte-whatsapp {
  position: fixed; right: 22px; bottom: 96px; z-index: 89;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25D366; color: #fff; text-decoration: none;
  box-shadow: 0 12px 28px -10px rgba(37,211,102,.7);
  transition: transform .22s var(--douce);
}
.flotte-whatsapp:hover { transform: translateY(-2px) scale(1.04); color: #fff; }
.flotte-whatsapp svg { width: 28px; height: 28px; }
@media (max-width: 620px) { .flotte-whatsapp { bottom: 88px; right: 14px; } }
/* une case de la mosaïque peut porter un film plutôt qu'une photo */
.mosaique .m-film video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mosaique .m-film { aspect-ratio: 16 / 9; }

/* ────────────────────── LES PICTOGRAMMES DE SECTION ──────────────────────
   Un petit dessin à côté de l'étiquette : il annonce le sujet avant même
   qu'on lise. Sur fond sombre, on les éclaircit légèrement.
   ────────────────────────────────────────────────────────────────────────── */
.libelle.avec-picto { display: flex; align-items: center; gap: 10px; }
.libelle img.picto { width: 26px; height: 26px; flex: none; }
.section.encre .libelle img.picto,
.addition .libelle img.picto,
.heros-contenu .libelle img.picto { filter: brightness(0) invert(1) opacity(.82); }

.carte .picto-carte { width: 34px; height: 34px; margin-bottom: 14px; display: block; }
.section.encre .carte .picto-carte { filter: brightness(0) invert(1) opacity(.85); }
.etape .picto-etape { width: 30px; height: 30px; margin-bottom: 10px; }

/* ─────────────────────────── LE CORPS D'UN ARTICLE ───────────────────────
   Une colonne de lecture, des titres qui respirent, des citations qui
   portent. Rien d'autre : c'est du texte qu'on vient lire.
   ────────────────────────────────────────────────────────────────────────── */
.article-corps { font-size: 1.07rem; line-height: 1.72; }
.article-corps h2 {
  font-size: clamp(1.4rem, 2.5vw, 1.95rem); margin: 2em 0 .6em;
  padding-top: .6em; border-top: 1px solid var(--trait);
}
.article-corps h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.article-corps p { margin: 0 0 1.15em; }
.article-corps strong { font-weight: 700; }
.article-corps blockquote {
  margin: 1.6em 0; padding: 18px 22px; border-left: 3px solid var(--vague);
  background: var(--vague-fond); color: #0D5B71; font-size: 1.02rem; line-height: 1.6;
  border-radius: 0 var(--rayon) var(--rayon) 0;
}
.article-corps blockquote p:last-child { margin: 0; }
.article-corps .liste-propre { margin: 0 0 1.4em; }
.article-corps .tableau-defile { margin: 1.6em 0; }
.article-corps em { color: var(--encre-doux); }
.article-corps > em:last-child, .article-corps p:last-child em { font-size: .92rem; }

/* le bandeau d'image d'un article : entier, comme partout ailleurs */
article .bande-image img { width: 100%; height: auto; }


/* ─── Détails du guide des interfaces web ─────────────────────────────────
   Zones sûres de l'iPhone, lien d'évitement au clavier, et un rappel que
   le survol doit toujours se voir.
   ────────────────────────────────────────────────────────────────────────── */
.conseiller { bottom: calc(22px + env(safe-area-inset-bottom)); right: calc(22px + env(safe-area-inset-right)); }
.flotte-whatsapp { bottom: calc(96px + env(safe-area-inset-bottom)); right: calc(22px + env(safe-area-inset-right)); }
@media (max-width: 620px) {
  .conseiller { bottom: calc(14px + env(safe-area-inset-bottom)); right: calc(14px + env(safe-area-inset-right)); left: 14px; }
  .flotte-whatsapp { bottom: calc(88px + env(safe-area-inset-bottom)); right: calc(14px + env(safe-area-inset-right)); }
}

.evitement {
  position: absolute; left: 10px; top: -60px; z-index: 200;
  background: var(--encre); color: #fff; padding: 12px 18px; border-radius: var(--rayon);
  text-decoration: none; font-weight: 600; transition: top .2s var(--douce);
}
.evitement:focus { top: 10px; color: #fff; }

/* ═════════════════════ L'OUVERTURE — la scène, puis la phrase ════════════
   Plus de gros texte écrasé sur la photo. Le film occupe toute la largeur,
   entier, et c'est le noir en dessous qui porte l'accroche. L'ambre et le
   serif donnent le relief ; le reste se tait.
   ══════════════════════════════════════════════════════════════════════════ */
.scene { position: relative; background: var(--nuit); line-height: 0; }
.scene-film { width: 100%; aspect-ratio: 16 / 9; height: auto; display: block; }
.scene-fondu {
  position: absolute; inset: auto 0 -1px 0; height: 32%; pointer-events: none;
  background: linear-gradient(to top, var(--nuit) 4%, rgba(12,15,17,.55) 45%, transparent);
}

.ouverture {
  background: var(--nuit); color: #fff; position: relative; overflow: clip;
  padding: clamp(28px, 4vw, 56px) 0 clamp(64px, 9vw, 130px);
  margin-top: -1px;
}
.ouverture-corps { position: relative; z-index: 2; }
.ouverture .libelle { color: var(--aube); margin-bottom: clamp(18px, 2.4vw, 30px); }
.ouverture h1 {
  font-size: clamp(2.5rem, 7.4vw, 7rem); line-height: .96; letter-spacing: -.055em;
  color: #fff; margin: 0 0 clamp(30px, 4vw, 54px); max-width: 20ch;
}
/* l'accent : un serif, en ambre. Deux mots, pas trois. */
.ouverture h1 em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic; font-weight: 400;
  color: var(--aube-vif); letter-spacing: -.015em;
  font-size: 1.06em; padding-right: .04em;
}
.ouverture-pied {
  display: grid; grid-template-columns: minmax(0, 24rem) 1fr;
  gap: clamp(26px, 4vw, 64px); align-items: end;
  padding-top: clamp(24px, 3vw, 38px); border-top: 1px solid var(--trait-nuit);
}
@media (max-width: 900px) { .ouverture-pied { grid-template-columns: 1fr; align-items: start; } }
.ouverture .chapeau { color: rgba(255,255,255,.72); margin: 0; font-size: 1.02rem; }
.ouverture .heros-preuves { margin: 0; padding: 0; border: 0; gap: clamp(20px, 3vw, 46px); }
.ouverture .heros-preuves b { color: #fff; font-size: clamp(1.4rem, 2.3vw, 2rem); }
.ouverture .heros-preuves span { color: rgba(255,255,255,.5); }
.ouverture .filigrane { top: auto; bottom: -24%; right: -12%; width: min(46vw, 620px); opacity: .04; }

/* l'instrument ne chevauche plus rien : il ouvre la partie claire */
.instrument-chevauche { margin-top: clamp(-74px, -6vw, -44px); }

@media (max-width: 760px) {
  .ouverture h1 { font-size: clamp(2.1rem, 9.4vw, 3rem); max-width: none; }
  .ouverture { padding-bottom: 72px; }
}


/* ─── L'en-tête par-dessus le film ────────────────────────────────────────
   Sur la vidéo, le menu est blanc : il lui faut un voile sombre derrière,
   sinon un ciel clair le rend illisible. Dès qu'on a dépassé le film,
   l'en-tête redevient clair et opaque.
   ────────────────────────────────────────────────────────────────────────── */
.bandeau.sur-image::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(8,11,13,.72), rgba(8,11,13,.28) 60%, transparent);
}
.bandeau { isolation: isolate; }
.bandeau.sur-image .menu a:not(.bouton) { color: rgba(255,255,255,.92); text-shadow: 0 1px 10px rgba(0,0,0,.45); }
.bandeau.sur-image .marque { color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.45); }
.bandeau.sur-image .menu a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--vague-vif); }

/* ─── La marque sur les films ─────────────────────────────────────────────
   Les photos portent le logo en dur ; les vidéos, elles, le reçoivent en
   surimpression — même place, même taille, pour que l'œil le retrouve.
   ────────────────────────────────────────────────────────────────────────── */
/* En haut à droite : la légende occupe le bas à gauche, et le conseiller
   le bas à droite. C'est le seul coin libre sur toute la page. */
.marque-film {
  position: absolute; z-index: 3; pointer-events: none;
  right: 3%; top: 3%; width: 13%; max-width: 184px; height: auto;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,.6));
}
.scene .marque-film { top: calc(76px + 3%); }    /* sous l'en-tête collant */
@media (max-width: 700px) {
  .marque-film { width: 22%; }
  .scene .marque-film { top: calc(62px + 3%); }
}

/* ═══════════════════ LES PICTOGRAMMES, EN GRAND ═══════════════════════════
   Plus gros, partout, et ils arrivent avec un petit ressort quand la
   section apparaît. Discret mais vivant.
   ══════════════════════════════════════════════════════════════════════════ */
.libelle img.picto { width: 34px; height: 34px; }
.libelle.avec-picto { gap: 13px; align-items: center; }
.section-tete .libelle.avec-picto { padding-bottom: 16px; }

.carte .picto-carte { width: 46px; height: 46px; margin-bottom: 16px; }
.etape .picto-etape { width: 42px; height: 42px; margin-bottom: 12px; }
.carte-texte .picto-coin { width: 38px; height: 38px; margin-bottom: 12px; display: block; }
.heros-preuves .picto-preuve,
.ouverture .picto-preuve { width: 30px; height: 30px; margin-bottom: 9px; display: block; opacity: .92; }
.tableau th .picto { width: 22px; height: 22px; vertical-align: -5px; margin-right: 7px; }
.liste-propre .picto { width: 24px; height: 24px; vertical-align: -6px; margin-right: 8px; }

/* le petit ressort à l'apparition */
@keyframes picto-entre {
  from { opacity: 0; transform: translateY(8px) scale(.74) rotate(-9deg); }
  60%  { opacity: 1; transform: translateY(0) scale(1.09) rotate(2deg); }
  to   { opacity: 1; transform: none; }
}
.js [data-apparait].vu .picto,
.js .section-tete .libelle.avec-picto .picto { animation: picto-entre .62s var(--douce) both; }
.js .ouverture .picto-preuve { animation: picto-entre .62s var(--douce) both; }
.js .ouverture .heros-preuves > div:nth-child(2) .picto-preuve { animation-delay: .09s; }
.js .ouverture .heros-preuves > div:nth-child(3) .picto-preuve { animation-delay: .18s; }
.js .ouverture .heros-preuves > div:nth-child(4) .picto-preuve { animation-delay: .27s; }
@media (prefers-reduced-motion: reduce) { .picto { animation: none !important; } }

/* au survol d'une carte, son pictogramme respire */
.carte .picto-carte, .carte-texte .picto-coin { transition: transform .35s var(--douce); }
.carte:hover .picto-carte, .carte:hover .picto-coin { transform: translateY(-3px) scale(1.07); }

/* sur fond sombre, ils passent en blanc */
.ouverture .picto, .addition .picto, .section.encre .picto { filter: brightness(0) invert(1) opacity(.88); }

/* la mention à compléter dans les pages légales */
.a-remplir {
  background: var(--aube-fond); color: #7E4A0C; padding: 2px 8px; border-radius: 3px;
  font-weight: 600; font-size: .92em;
}

/* ─── Lisibilité : aucun texte sous 12 px ──────────────────────────────────
   Les petites capitales espacées sont élégantes, mais à 10,9 px elles se
   lisent mal sur un téléphone. On relève le plancher partout, un peu plus
   encore sur petit écran.
   ────────────────────────────────────────────────────────────────────────── */
.libelle      { font-size: .75rem; }
.renvoi       { font-size: .78rem; }
.releve dt    { font-size: .74rem; }
.tableau thead th { font-size: .72rem; }
.etiquette    { font-size: .72rem; }
@media (max-width: 700px) {
  .libelle, .releve dt, .tableau thead th, .etiquette { font-size: .78rem; letter-spacing: .12em; }
  .renvoi, .discret { font-size: .82rem; }
}

/* ─── Les dimensions d'image ne doivent jamais imposer une hauteur ─────────
   Les attributs width/height servent à réserver la place pendant le
   chargement. Sans « height: auto », le navigateur prend « height="768" »
   au pied de la lettre et la photo se fait rogner. Le format décide seul.
   ────────────────────────────────────────────────────────────────────────── */
img { height: auto; }
/* Chaque image garde SON format : la plupart sont en 16:9, mais le gros plan
   du décalque est en 3:2 et le profil du vélo plus allongé. Imposer un format
   unique les rognerait — et une photo rognée, c'est non. */
.carte.pleine img { height: auto; aspect-ratio: auto; object-fit: initial; }
.mosaique img { height: 100%; }          /* la mosaïque, elle, remplit sa case 16:9 */

/* ─── La vague de l'en-tête ────────────────────────────────────────────────
   La vraie vague est plus allongée que l'ancienne (2,5 pour 1) : à la même
   largeur elle devenait un trait. On l'agrandit pour qu'elle se lise.
   ────────────────────────────────────────────────────────────────────────── */
.marque .vaguette { width: 50px; }
.marque { gap: 12px; }
@media (max-width: 700px) { .marque .vaguette { width: 40px; } }
.pied .marque .vaguette { width: 56px; }
.conseiller-vague { width: 40px; }

/* ─── Les pictos dans les cartes : ils gardent LEUR taille ─────────────────
   « .carte.pleine img { width: 100% } » est fait pour la photo de la carte,
   mais il attrapait aussi le pictogramme posé dans le texte, qui montait à
   232 px. Ces sélecteurs, plus précis, rendent à chaque picto sa taille.
   ────────────────────────────────────────────────────────────────────────── */
.carte.pleine img.picto { aspect-ratio: 1 / 1; object-fit: contain; }
.carte.pleine .carte-texte img.picto-coin { width: 38px; height: 38px; }
.carte.pleine .libelle img.picto { width: 30px; height: 30px; }
.carte img.picto-carte { width: 46px; height: 46px; }

/* ─────────────────────────────────────────────── les conseils, en kiosque */
.une {
  display: grid; grid-template-columns: 1.45fr 1fr; align-items: stretch;
  background: var(--nuit); color: #fff; text-decoration: none;
  border-radius: 14px; overflow: clip;
  box-shadow: 0 40px 80px -50px rgba(12,15,17,.7);
}
.une-image { display: flex; align-items: center; background: var(--nuit); overflow: clip; }
.une-image img { width: 100%; height: auto; display: block; transition: transform 1.1s var(--douce); }
.une:hover .une-image img { transform: scale(1.03); }
.une-texte {
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
  padding: clamp(26px, 3.4vw, 48px);
}
.une-sur { font-family: var(--mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--aube-vif); }
.une-picto { width: 58px; height: 58px; filter: brightness(0) invert(1); opacity: .95; }
.une-titre {
  font-family: var(--display); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(1.6rem, 2.6vw, 2.35rem); line-height: 1.08;
}
.une-resume { color: #BFC8CA; line-height: 1.6; font-size: 1.02rem; }
.une-lire {
  margin-top: 6px; align-self: flex-start; font-weight: 600;
  padding: 12px 20px; border-radius: 999px; background: var(--vague); color: #fff;
  transition: background .3s, transform .3s var(--douce);
}
.une:hover .une-lire { background: var(--vague-vif); transform: translateX(4px); }
.une:hover { color: #fff; }
@media (max-width: 860px) { .une { grid-template-columns: 1fr; } }

.filtres { display: none; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(22px, 3vw, 32px); }
.js .filtres { display: flex; }
.filtre {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  font: 600 .95rem/1 var(--texte); color: var(--encre);
  padding: 9px 16px 9px 12px; border-radius: 999px;
  background: var(--carte); border: 1px solid var(--trait-fort);
  transition: background .25s, color .25s, border-color .25s;
}
.filtre img { width: 26px; height: 26px; }
.filtre b { font: 500 .78rem/1 var(--mono); color: var(--encre-pale); }
.filtre:hover { border-color: var(--encre); }
.filtre[aria-pressed="true"] { background: var(--encre); color: #fff; border-color: var(--encre); }
.filtre[aria-pressed="true"] b { color: var(--aube-vif); }
.filtre[aria-pressed="true"] img { filter: brightness(0) invert(1); }

.billet a { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.billet { display: flex; flex-direction: column; }
.billet .carte-texte { display: flex; flex-direction: column; gap: 10px; }
.billet-sur {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: .76rem; letter-spacing: .07em; text-transform: uppercase; color: var(--vague);
}
.carte.pleine .billet-sur img.picto { width: 34px; height: 34px; aspect-ratio: 1 / 1; object-fit: contain; }
.billet-titre { font-family: var(--display); font-weight: 750; font-size: clamp(1.12rem, 1.5vw, 1.3rem); line-height: 1.2; letter-spacing: -.01em; }
.billet-resume { color: var(--encre-doux); font-size: .95rem; line-height: 1.55; }
.billet[hidden] { display: none; }

/* le bouton du menu garde son texte blanc, quel que soit le fond de l'en-tête */
.menu a.bouton, .menu a.bouton:hover, .bandeau .menu a.bouton { color: #fff; box-shadow: none; }

/* la une : le fond reprend la photo, floutée, pour que l'image entière tienne sans bandes */
.une-image { position: relative; isolation: isolate; }
.une-image .une-flou {
  position: absolute; inset: -40px; z-index: -1; width: calc(100% + 80px); height: calc(100% + 80px);
  object-fit: cover; filter: blur(38px) saturate(1.2) brightness(.55); transform: none !important;
}

/* ─────────────────────────────────────────────── la frise du délai */
.frise {
  list-style: none; margin: 0; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px);
}
.frise::before, .frise::after {
  content: ""; position: absolute; left: 6%; right: 6%; top: 74px; height: 3px; border-radius: 3px;
}
.frise::before { background: var(--trait); }
.frise::after {
  background: linear-gradient(90deg, var(--vague), var(--vague-vif) 55%, var(--aube-vif));
  transform: scaleX(0); transform-origin: left; transition: transform 1.8s var(--douce) .2s;
}
.frise.vu::after, html:not(.js) .frise::after { transform: scaleX(1); }
.frise-pas { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; }
.frise-quand {
  font-family: var(--mono); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  color: #9A6A2C; height: 30px; display: flex; align-items: center;
}
.frise-noeud {
  width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center;
  background: var(--carte); border: 1px solid var(--trait-fort); margin: 0 0 22px;
  box-shadow: 0 0 0 8px var(--papier-2), 0 18px 34px -20px rgba(12,15,17,.45);
  transition: transform .6s var(--douce), border-color .6s;
}
.frise-noeud img { width: 46px; height: 46px; }
.frise-pas:last-child .frise-noeud { background: var(--nuit); border-color: var(--nuit); }
.frise-pas:last-child .frise-noeud img { filter: brightness(0) invert(1); }
.frise.vu .frise-pas:nth-child(1) .frise-noeud { animation: noeud .7s var(--douce) .2s both; }
.frise.vu .frise-pas:nth-child(2) .frise-noeud { animation: noeud .7s var(--douce) .8s both; }
.frise.vu .frise-pas:nth-child(3) .frise-noeud { animation: noeud .7s var(--douce) 1.4s both; }
@keyframes noeud { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.frise-pas h3 { font-size: clamp(1.25rem, 1.9vw, 1.55rem); margin: 0 0 .4em; }
.frise-pas p { margin: 0; color: var(--encre-doux); max-width: 34ch; }
@media (max-width: 760px) {
  .frise { grid-template-columns: 1fr; gap: 34px; padding-left: 0; }
  .frise::before, .frise::after { left: 43px; right: auto; top: 40px; bottom: 40px; width: 3px; height: auto; }
  .frise::after { transform: scaleY(0); transform-origin: top; }
  .frise.vu::after { transform: scaleY(1); }
  .frise-pas { display: grid; grid-template-columns: 88px 1fr; column-gap: 20px; align-items: start; }
  .frise-noeud { grid-row: 1 / span 3; margin: 0; }
  .frise-quand { height: auto; margin-top: 6px; }
}

/* ─────────────────────────────────────────────── le comparatif : notre colonne en relief */
.tableau .notre { background: var(--nuit); color: #fff; border-bottom-color: var(--trait-nuit); }
.tableau thead th.notre { background: var(--nuit); color: var(--aube-vif); font-weight: 600; }
.tableau thead th.notre .picto { filter: brightness(0) invert(1); }
.tableau td.notre strong { color: var(--aube-vif); font-size: 1.3rem; font-weight: 600; }
.tableau td.notre .discret { color: #9AA6A9; }
.tableau tbody tr:hover th, .tableau tbody tr:hover td:not(.notre) { background: var(--papier-2); }
.tableau tbody tr:hover td.notre { background: var(--graphite); }

/* ─────────────────────────────────────────────── le vélo, en planche d'anatomie */
.anatomie {
  background: #fff; border-radius: 16px; border: 1px solid var(--trait);
  padding: clamp(18px, 3vw, 40px); display: grid; gap: clamp(18px, 3vw, 30px);
}
.anatomie-image { position: relative; margin: 0 auto; max-width: 1040px; width: 100%; }
.anatomie-image > img { width: 100%; height: auto; display: block; }
.points { list-style: none; margin: 0; padding: 0; }
.point { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); }
.point-rond {
  position: relative; width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center; background: #fff;
  box-shadow: 0 0 0 2px var(--vague), 0 10px 22px -8px rgba(12,15,17,.45);
}
.point-rond img { width: 30px; height: 30px; }
.point-rond::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid var(--vague-vif); animation: onde 2.6s ease-out infinite;
}
.point:nth-child(2) .point-rond::after { animation-delay: .4s; }
.point:nth-child(3) .point-rond::after { animation-delay: .8s; }
.point:nth-child(4) .point-rond::after { animation-delay: 1.2s; }
.point:nth-child(5) .point-rond::after { animation-delay: 1.6s; }
.point:nth-child(6) .point-rond::after { animation-delay: 2s; }
@keyframes onde { from { transform: scale(1); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
.point-texte {
  position: absolute; top: 50%; transform: translateY(-50%); white-space: nowrap;
  background: var(--nuit); color: #C9D2D4; font-size: .84rem; line-height: 1.3;
  padding: 8px 13px; border-radius: 8px; box-shadow: 0 14px 28px -16px rgba(12,15,17,.7);
}
.point-texte b { display: block; color: #fff; font-family: var(--display); font-size: .95rem; font-weight: 700; }
.cote-d .point-texte { left: 62px; }
.cote-g .point-texte { right: 62px; }
.chiffres-velo {
  margin: 0; display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--trait); padding-top: clamp(16px, 2.4vw, 24px);
}
.chiffres-velo div { padding: 0 clamp(10px, 2vw, 24px); border-left: 1px solid var(--trait); }
.chiffres-velo div:first-child { border-left: 0; padding-left: 0; }
.chiffres-velo dt { font-family: var(--mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-pale); }
.chiffres-velo dd {
  margin: 4px 0 0; font-family: var(--display); font-weight: 800; letter-spacing: -.03em;
  font-size: clamp(1.9rem, 4vw, 3.2rem); line-height: 1;
}
.chiffres-velo dd small { font-size: .42em; font-weight: 600; color: var(--vague); letter-spacing: 0; }
.details-velo { margin-top: 22px; }
.details-velo figure { margin: 0; border-radius: var(--rayon-carte); overflow: clip; background: var(--carte); border: 1px solid var(--trait); }
.details-velo img { width: 100%; height: auto; display: block; transition: transform .8s var(--douce); }
.details-velo figure:hover img { transform: scale(1.04); }
.details-velo figcaption { padding: 12px 16px; font-weight: 600; font-size: .95rem; }
@media (max-width: 900px) {
  .point-texte { display: none; }
  .point-rond { width: 38px; height: 38px; }
  .point-rond img { width: 22px; height: 22px; }
  .chiffres-velo { grid-template-columns: repeat(2, 1fr); row-gap: 18px; }
  .chiffres-velo div:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .point-rond::after { animation: none; display: none; } }
@media (max-width: 900px) {
  .point:hover, .point:focus, .point:focus-within { z-index: 3; }
  .point:hover .point-texte, .point:focus .point-texte { display: block; }
  .cote-d .point-texte { left: 46px; } .cote-g .point-texte { right: 46px; }
}
.point:focus-visible { outline: none; }
.point:focus-visible .point-rond { box-shadow: 0 0 0 3px var(--aube-vif), 0 10px 22px -8px rgba(12,15,17,.45); }
@media (max-width: 760px) {
  .frise-pas > * { grid-column: 2; }
  .frise-pas > .frise-noeud { grid-column: 1; grid-row: 1 / span 3; width: 72px; height: 72px; }
  .frise-noeud img { width: 38px; height: 38px; }
  .frise-pas { grid-template-columns: 72px 1fr; }
  .frise::before, .frise::after { left: 35px; }
}
@media (max-width: 600px) {
  .point-rond { width: 30px; height: 30px; box-shadow: 0 0 0 1.5px var(--vague), 0 6px 14px -6px rgba(12,15,17,.45); }
  .point-rond img { width: 18px; height: 18px; }
  .point-rond::after { border-width: 1.5px; }
}

/* ─────────────────────────────────────────────── en-têtes des pages, avec leur photo */
.tete-duo {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(26px, 4vw, 60px);
  align-items: center; margin-bottom: clamp(34px, 5vw, 60px);
}
.tete-duo > * { min-width: 0; }
.tete-duo .section-tete { margin-bottom: 0; }
.tete-photo {
  margin: 0; border-radius: 14px; overflow: clip; background: var(--nuit);
  box-shadow: 0 40px 70px -46px rgba(12,15,17,.75);
  transform: rotate(.6deg); transition: transform .9s var(--douce);
}
.tete-photo:hover { transform: none; }
.tete-photo img { width: 100%; height: auto; display: block; }
@media (max-width: 900px) { .tete-duo { grid-template-columns: 1fr; } .tete-photo { transform: none; } }

.raccourcis { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.raccourci {
  font: 500 .9rem/1 var(--texte); color: var(--encre); cursor: pointer;
  padding: 9px 14px; border-radius: 999px; background: var(--papier-2); border: 1px solid var(--trait-fort);
  transition: background .2s, color .2s, border-color .2s;
}
.raccourci:hover { border-color: var(--encre); }
.raccourci[aria-pressed="true"] { background: var(--vague); border-color: var(--vague); color: #fff; }

/* ─────────────────────────────────────────────── la fiche du vélo : une scène blanche */
.scene-blanche { background: #fff; padding: clamp(110px, 12vw, 150px) 0 clamp(40px, 6vw, 70px); border-bottom: 1px solid var(--trait); }
.scene-blanche-tete { text-align: center; max-width: 760px; margin: 0 auto; }
.scene-blanche-tete .libelle { justify-content: center; }
.scene-blanche-tete .chapeau { margin-inline: auto; }
.scene-blanche-velo { margin: clamp(10px, 2vw, 24px) auto 0; max-width: 1100px; }
.scene-blanche-velo img { width: 100%; height: auto; display: block; animation: arrivee 1.4s var(--douce) both; }
@keyframes arrivee { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
.scene-blanche-chiffres { max-width: 1100px; margin: 0 auto; }
.scene-blanche-chiffres dt { display: flex; align-items: center; gap: 10px; }
.scene-blanche-chiffres dt img { width: 34px; height: 34px; }

/* « le reste » : en bleu vague, droit, dans la police du titre */
.ouverture h1 .bleu { color: var(--vague-vif); font-style: normal; font-weight: inherit; }

/* ═══════════════════════════════════════════════ LE CALCULATEUR */
.calc {
  position: relative; overflow: clip; isolation: isolate;
  background: var(--nuit); color: #fff; padding: clamp(70px, 9vw, 120px) 0;
}
/* trois lueurs qui dérivent lentement : la vague, l'aube, et un reflet */
.calc-aurore { position: absolute; z-index: -1; border-radius: 50%; filter: blur(90px); opacity: .55; pointer-events: none; }
.calc-aurore.a1 { width: 620px; height: 620px; background: var(--vague); left: -160px; top: -200px; animation: derive1 18s ease-in-out infinite alternate; }
.calc-aurore.a2 { width: 520px; height: 520px; background: var(--aube); right: -140px; bottom: -220px; opacity: .38; animation: derive2 22s ease-in-out infinite alternate; }
.calc-aurore.a3 { width: 380px; height: 380px; background: var(--vague-vif); left: 45%; top: 30%; opacity: .18; animation: derive1 26s ease-in-out infinite alternate-reverse; }
@keyframes derive1 { to { transform: translate(180px, 120px) scale(1.15); } }
@keyframes derive2 { to { transform: translate(-200px, -90px) scale(.9); } }
.calc::after { /* le grain, comme sur les photos */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .07; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}
.calc-tete { max-width: 760px; margin-bottom: clamp(30px, 4vw, 52px); }
.calc-tete .libelle { color: var(--aube-vif); }
.calc-tete .picto { filter: brightness(0) invert(1); width: 30px; height: 30px; }
.calc-tete h2 { color: #fff; font-size: clamp(2.2rem, 5.2vw, 4.4rem); line-height: .98; letter-spacing: -.045em; margin: 0 0 .3em; }
.calc-tete h2 em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; color: var(--aube-vif); letter-spacing: -.01em; }
.calc-tete p { color: #AEB8BB; font-size: 1.1rem; margin: 0; }

.calc-grille { display: grid; grid-template-columns: 1fr 1.08fr; gap: clamp(20px, 3vw, 36px); align-items: stretch; }
.calc-grille > * { min-width: 0; }
.calc-reglages, .calc-resultat {
  border-radius: 20px; padding: clamp(22px, 3vw, 36px);
  background: linear-gradient(160deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 40px 80px -50px rgba(0,0,0,.8);
}
.calc-reglages { display: grid; gap: 22px; align-content: start; }
.calc-champ { border: 0; margin: 0; padding: 0; min-width: 0; }
.calc-champ legend {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: #9AA6A9; margin-bottom: 10px; padding: 0; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
}
.calc-max { color: var(--aube-vif); text-transform: none; letter-spacing: 0; font-family: var(--texte); font-size: .85rem; }

.calc-bascule { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; gap: 4px;
  background: rgba(0,0,0,.35); border-radius: 12px; border: 1px solid rgba(255,255,255,.08); }
.calc-bascule button {
  font: 600 .95rem/1.2 var(--texte); color: #C6CED0; background: transparent; border: 0; cursor: pointer;
  padding: 12px 10px; border-radius: 9px; transition: background .35s var(--douce), color .35s, box-shadow .35s;
}
.calc-bascule button:hover { color: #fff; }
.calc-bascule button[aria-checked="true"] { background: var(--vague); color: #fff; box-shadow: 0 8px 22px -10px var(--vague-vif); }

.calc-interrupteur { display: flex; align-items: center; gap: 14px; background: none; border: 0; cursor: pointer; color: #fff; font: 600 1rem var(--texte); padding: 4px 0; }
.calc-interrupteur-rail { width: 58px; height: 32px; border-radius: 99px; background: rgba(255,255,255,.16); position: relative; transition: background .35s; flex: none; }
.calc-interrupteur-rail i { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .45s cubic-bezier(.5,1.6,.4,1); box-shadow: 0 3px 8px rgba(0,0,0,.4); }
.calc-interrupteur[aria-checked="true"] .calc-interrupteur-rail { background: var(--aube); }
.calc-interrupteur[aria-checked="true"] .calc-interrupteur-rail i { transform: translateX(26px); }

.calc-velos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.calc-velos button {
  aspect-ratio: 1.25; border-radius: 12px; cursor: pointer; display: grid; place-items: center;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12);
  transition: background .3s, border-color .3s, transform .3s var(--douce), opacity .3s;
}
.calc-velos svg { width: 80%; fill: none; stroke: #6F7B7F; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
.calc-velos button:hover:not(:disabled) { transform: translateY(-3px); border-color: rgba(255,255,255,.35); }
.calc-velos button.pris { background: rgba(34,174,209,.16); border-color: var(--vague-vif); }
.calc-velos button.pris svg { stroke: #fff; }
.calc-velos button.pris.dernier { animation: rebond .5s cubic-bezier(.5,1.8,.4,1); }
.calc-velos button:disabled { opacity: .25; cursor: not-allowed; }
@keyframes rebond { 0% { transform: scale(.8); } 100% { transform: none; } }

.calc-prix { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.calc-prix output { font-family: var(--display); font-weight: 800; font-size: 1.7rem; letter-spacing: -.02em; }
.calc-lien { background: none; border: 0; color: var(--vague-vif); cursor: pointer; font: 500 .9rem var(--texte); text-decoration: underline; text-underline-offset: 3px; }
.calc input[type=range] { width: 100%; appearance: none; -webkit-appearance: none; height: 8px; border-radius: 9px; cursor: pointer;
  background: linear-gradient(90deg, var(--vague-vif) var(--p, 40%), rgba(255,255,255,.15) var(--p, 40%)); }
.calc input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 5px solid var(--vague); box-shadow: 0 0 0 6px rgba(34,174,209,.2); transition: box-shadow .2s; }
.calc input[type=range]:active::-webkit-slider-thumb { box-shadow: 0 0 0 12px rgba(34,174,209,.25); }
.calc input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 5px solid var(--vague); }

.calc-resultat { position: relative; overflow: clip; display: flex; flex-direction: column; }
.calc-sur { font-family: var(--mono); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: #9AA6A9; }
.calc-grand {
  font-family: var(--display); font-weight: 800; letter-spacing: -.06em; line-height: .9;
  font-size: clamp(4rem, 10vw, 8.5rem); margin: 8px 0 6px; color: #fff;
  font-variant-numeric: tabular-nums; transition: color .5s;
}
.calc-grand small { font-size: .26em; letter-spacing: 0; color: #9AA6A9; font-weight: 600; }
.calc-grand.zero { color: var(--aube-vif); text-shadow: 0 0 60px rgba(240,185,110,.45); }
.calc-au-lieu { color: #AEB8BB; margin: 0 0 22px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.calc-au-lieu span[data-total] { text-decoration: line-through; text-decoration-color: rgba(240,185,110,.8); }
.calc-badge { background: var(--aube-vif); color: var(--nuit); font-weight: 700; font-size: .82rem; padding: 6px 12px; border-radius: 99px; animation: rebond .6s cubic-bezier(.5,1.8,.4,1); }

.calc-barre { display: flex; height: 22px; border-radius: 99px; overflow: clip; background: rgba(255,255,255,.08); margin-bottom: 18px; }
.calc-barre .seg { height: 100%; width: 0; transition: width .9s cubic-bezier(.22,.9,.24,1); position: relative; }
.calc-barre .metro { background: linear-gradient(90deg, var(--vague), var(--vague-vif)); }
.calc-barre .cma { background: linear-gradient(90deg, var(--aube), var(--aube-vif)); }
.calc-barre .reste { background: repeating-linear-gradient(135deg, rgba(255,255,255,.28) 0 6px, rgba(255,255,255,.14) 6px 12px); }
.calc-barre .seg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); transform: translateX(-100%); animation: reflet 3.2s ease-in-out infinite; }
.calc-barre .cma::after { animation-delay: .5s; }
@keyframes reflet { 60%, 100% { transform: translateX(100%); } }
.calc-legende { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.calc-legende li { display: flex; align-items: center; gap: 12px; color: #C6CED0; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.08); transition: opacity .4s; }
.calc-legende li.eteinte { opacity: .35; }
.calc-legende i { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.calc-legende i.metro { background: var(--vague-vif); } .calc-legende i.cma { background: var(--aube-vif); } .calc-legende i.reste { background: rgba(255,255,255,.4); }
.calc-legende b { margin-left: auto; font-family: var(--mono); font-weight: 500; color: #fff; font-variant-numeric: tabular-nums; }
.calc-note { color: #8C989B; font-size: .9rem; line-height: 1.55; margin: 0 0 22px; }
.calc-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: auto; }
.bouton.fantome { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
.bouton.fantome:hover { background: rgba(255,255,255,.08); border-color: #fff; color: #fff; }

.calc-confettis { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.calc-confettis i { position: absolute; left: 30%; top: 30%; width: 9px; height: 14px; border-radius: 2px; opacity: 0;
  animation: confetti 1.6s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes confetti {
  0% { opacity: 1; transform: translate(0,0) rotate(0); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)); }
}
@media (max-width: 900px) { .calc-grille { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .calc-velos { grid-template-columns: repeat(3, 1fr); } }
@media (prefers-reduced-motion: reduce) { .calc-aurore, .calc-barre .seg::after { animation: none; } }

/* ═══════════════════════════════════════════════ LES EFFETS DE L'ACCUEIL */
/* le bandeau des métiers qui défile */
.defile { background: var(--vague); color: #fff; overflow: clip; padding: 18px 0; position: relative; }
.defile-piste { display: flex; width: max-content; animation: defile 48s linear infinite; }
.defile:hover .defile-piste { animation-play-state: paused; }
.defile-piste span { display: inline-flex; align-items: center; gap: 14px; padding: 0 30px; white-space: nowrap;
  font-family: var(--display); font-weight: 800; font-size: clamp(1.2rem, 2.4vw, 1.9rem); letter-spacing: -.02em; }
.defile-piste span img { width: 34px; height: 34px; filter: brightness(0) invert(1); }
.defile-piste span::after { content: "✦"; color: var(--aube-vif); margin-left: 30px; font-size: .7em; }
@keyframes defile { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .defile-piste { animation: none; } }

/* les photos se dévoilent en rideau — le rideau est sur la photo, pas sur son cadre :
   un cadre masqué n'est jamais « vu » par le détecteur de défilement */
.js .devoile > img, .js .devoile > video { clip-path: inset(0 0 100% 0); transform: scale(1.15);
  transition: clip-path 1.2s cubic-bezier(.7,0,.2,1), transform 1.8s cubic-bezier(.2,.7,.2,1); }
.js .devoile.vu > img, .js .devoile.vu > video { clip-path: inset(0 0 0 0); transform: none; }
@media (prefers-reduced-motion: reduce) { .js .devoile > img, .js .devoile > video { clip-path: none; transform: none; } }

/* les cartes s'inclinent sous la souris */
.incline { transform-style: preserve-3d; will-change: transform; }
.incline.en-mouvement { transition: transform .12s linear !important; }
.incline .reflet-souris { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .3s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.28), transparent 45%); z-index: 2; }
.incline:hover .reflet-souris { opacity: 1; }

/* ═══════════════════════════════════════════════ LES DOCUMENTS PRÉ-REMPLIS */
.docs-onglets { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; margin: 18px 0 0; scrollbar-width: thin; }
.docs-onglets button {
  flex: none; position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font: 600 .92rem/1.2 var(--texte); color: var(--encre); padding: 10px 16px 10px 10px; border-radius: 14px;
  background: var(--papier-2); border: 1px solid var(--trait-fort);
  transition: background .3s var(--douce), color .3s, transform .3s var(--douce), box-shadow .3s;
}
.docs-onglets button img { width: 30px; height: 30px; transition: filter .3s; }
.docs-onglets button:hover { transform: translateY(-2px); border-color: var(--encre); }
.docs-onglets button[aria-selected="true"] { background: var(--nuit); color: #fff; border-color: var(--nuit); box-shadow: 0 14px 28px -16px rgba(12,15,17,.7); }
.docs-onglets button[aria-selected="true"] img { filter: brightness(0) invert(1); }
.docs-vous { position: absolute; top: -10px; right: 8px; font: 700 .72rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  font-style: normal; background: var(--aube-vif); color: var(--nuit); padding: 4px 7px; border-radius: 99px; }
.docs-panneau { animation: panneau .5s var(--douce); }
@keyframes panneau { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.docs-secteur { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 14px;
  padding: 20px; border-radius: 14px; background: linear-gradient(135deg, var(--vague-fond), var(--aube-fond)); }
.docs-secteur > * { min-width: 0; }
.docs-exemples { margin: 4px 0 10px; font-family: var(--display); font-weight: 700; font-size: 1.1rem; }
.docs-conseils { margin: 0; padding-left: 18px; color: var(--encre-doux); }
.docs-conseils li { margin: 6px 0; }
.docs-texte-type { background: #fff; border-radius: 10px; padding: 14px 16px; border: 1px solid var(--trait); }
.docs-texte-type p { margin: 6px 0 12px; color: var(--encre-doux); font-size: .95rem; }
@media (max-width: 760px) { .docs-secteur { grid-template-columns: 1fr; } }
.docs-usage { margin-top: 18px; }
.docs-usage textarea { width: 100%; font: 1rem/1.5 var(--texte); padding: 12px 14px; border: 1px solid var(--trait-fort); border-radius: var(--rayon); margin: 6px 0 12px; resize: vertical; }
.docs-usage textarea.flash { animation: flash 1s ease-out; }
@keyframes flash { 0% { box-shadow: 0 0 0 6px rgba(34,174,209,.45); } 100% { box-shadow: 0 0 0 0 rgba(34,174,209,0); } }
.docs-grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 22px; }
@media (max-width: 640px) { .docs-grille { grid-template-columns: 1fr; } }
.doc-carte {
  display: flex; gap: 16px; align-items: center; padding: 14px; border-radius: 14px; text-decoration: none; color: inherit;
  background: var(--carte); border: 1px solid var(--trait); transition: transform .35s var(--douce), box-shadow .35s, border-color .35s;
}
.doc-carte:hover { transform: translateY(-4px); border-color: var(--vague); box-shadow: 0 22px 40px -26px rgba(12,15,17,.55); }
.doc-feuille {
  flex: none; width: 70px; height: 92px; border-radius: 6px; background: #fff; border: 1px solid var(--trait-fort);
  padding: 9px 9px; display: flex; flex-direction: column; gap: 5px; position: relative; overflow: hidden;
  box-shadow: 4px 4px 0 var(--papier), 4px 4px 0 1px var(--trait);
  transition: transform .4s var(--douce);
}
.doc-carte:hover .doc-feuille { transform: rotate(-4deg) scale(1.05); }
.doc-feuille img { width: 26px; height: 26px; margin-bottom: 3px; }
.doc-feuille i { display: block; height: 3px; border-radius: 2px; background: var(--trait); }
.doc-feuille i.court { width: 60%; }
.doc-feuille::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(34,174,209,.18) 50%, transparent 70%);
  transform: translateX(-100%); }
.doc-carte:hover .doc-feuille::after { animation: balaie .9s ease-out; }
@keyframes balaie { to { transform: translateX(100%); } }
.doc-texte { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.doc-texte b { font-family: var(--display); font-size: 1.08rem; }
.doc-texte span { color: var(--encre-doux); font-size: .9rem; line-height: 1.45; }
.doc-texte em { font-style: normal; font: 600 .78rem/1.2 var(--mono); letter-spacing: .04em; color: var(--accord); margin-top: 2px; }
.doc-carte.verrou { opacity: .55; cursor: not-allowed; }
.doc-carte.verrou:hover { transform: none; box-shadow: none; border-color: var(--trait); }
.doc-carte.verrou em { color: var(--encre-pale); }
@media (prefers-reduced-motion: reduce) { .docs-panneau { animation: none; } }
.docs-onglets { padding-top: 14px; }
.docs-onglets { flex-wrap: wrap; overflow: visible; }
.docs-photo { position: relative; margin: 16px 0 0; border-radius: 14px; overflow: clip; background: var(--nuit); }
.docs-photo > img { width: 100%; height: auto; display: block; animation: zoomdoux 9s ease-out both; }
@keyframes zoomdoux { from { transform: scale(1.08); } to { transform: none; } }
.docs-photo figcaption { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 10px;
  background: rgba(12,15,17,.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff;
  font: 700 1rem/1 var(--display); padding: 10px 16px 10px 10px; border-radius: 999px; }
.docs-photo figcaption img { width: 30px; height: 30px; filter: brightness(0) invert(1); }
@media (prefers-reduced-motion: reduce) { .docs-photo > img { animation: none; } }

/* la preuve, illustrée */
.preuve-photo { margin: 22px 0 0; border-radius: 12px; overflow: clip; max-width: 460px; box-shadow: 0 30px 60px -36px rgba(0,0,0,.8); }
.preuve-photo img { width: 100%; height: auto; display: block; }

/* les métiers, en photos */
.metiers-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: clamp(30px, 4vw, 48px); }
@media (max-width: 900px) { .metiers-photos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .metiers-photos { grid-template-columns: 1fr; } }
.metier-carte { position: relative; display: block; border-radius: 14px; overflow: clip; background: var(--nuit); color: #fff; text-decoration: none; }
.metier-carte > img { width: 100%; height: auto; display: block; transition: transform .8s var(--douce); }
.metier-carte:hover > img { transform: scale(1.05); }
.metier-legende { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--nuit); }
.metier-legende img { width: 30px; height: 30px; filter: brightness(0) invert(1); }
.metier-legende b { font-family: var(--display); font-size: 1rem; }
.metier-legende i { margin-left: auto; font: 500 .78rem/1 var(--mono); font-style: normal; color: var(--aube-vif); white-space: nowrap; }
.metier-carte:hover { color: #fff; }

/* la fin de la fiche du vélo : gratuit, ou presque */
.gratuit { overflow: clip; }
.gratuit .picto { filter: brightness(0) invert(1); }
.gratuit-titre { font-size: clamp(2.4rem, 6vw, 5rem); line-height: .98; letter-spacing: -.045em; color: #fff; margin: 14px 0 6px; }
.gratuit-titre .bleu { color: var(--vague-vif); font-weight: inherit; }
.gratuit-chiffre { font-family: var(--display); font-weight: 800; letter-spacing: -.06em; line-height: .85;
  font-size: clamp(7rem, 22vw, 15rem); color: var(--vague-vif); text-shadow: 0 0 80px rgba(34,174,209,.45); margin: 10px 0 18px; }
.gratuit-chiffre small { font-size: .2em; letter-spacing: 0; color: #9AA6A9; margin-left: .2em; }
.gratuit-texte { color: #C6CED0; max-width: 58ch; margin-inline: auto; font-size: 1.08rem; line-height: 1.6; }
.gratuit-texte strong { color: #fff; }

/* ═══════════════════════════════════════════════ ENCORE DU MOUVEMENT */
.progression { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, var(--vague), var(--vague-vif), var(--aube-vif)); pointer-events: none; }

.mot-a-mot .mot { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.mot-a-mot .mot > span { display: inline-block; transform: translateY(105%); opacity: 0;
  transition: transform .9s cubic-bezier(.2,.75,.2,1), opacity .9s; }
.mot-a-mot.dit .mot > span { transform: none; opacity: 1; }

.js [data-apparait].vu, .js .devoile.vu > img { transition-delay: var(--cascade, 0s); }
.metiers-photos > *, .docs-grille > *, .kiosque > * { --cascade: 0s; }

.lueur { position: relative; }
.lueur::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .5s;
  background: radial-gradient(520px circle at var(--lx, 50%) var(--ly, 50%), rgba(34,174,209,.16), transparent 60%); }
.lueur:hover::before { opacity: 1; }
.lueur > *:not(.filigrane):not(.calc-aurore) { position: relative; z-index: 1; }
.calc.lueur > .calc-aurore { position: absolute; z-index: -1; }

.aimant { transition: translate .25s cubic-bezier(.2,.7,.2,1), background .3s, box-shadow .3s; position: relative; overflow: hidden; }
.aimant::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); }
.aimant:hover::after { animation: brille .8s ease-out; }
@keyframes brille { to { left: 130%; } }
.bouton.vague.aimant:hover { box-shadow: 0 14px 30px -12px rgba(34,174,209,.75); }

/* le second bandeau : la promesse */
.defile.promesse { background: var(--nuit); border-top: 1px solid var(--trait-nuit); }
.defile.promesse .defile-piste { animation-direction: reverse; animation-duration: 40s; }
.defile.promesse span { color: #fff; }
.defile.promesse span em { font-style: normal; color: var(--vague-vif); }
.defile.promesse .defile-piste span::after { color: var(--vague-vif); }

@media (prefers-reduced-motion: reduce) {
  .mot-a-mot .mot > span { transform: none; opacity: 1; }
  .lueur::before, .aimant::after { display: none; }
}
.bloc-tete { flex-wrap: wrap; row-gap: 10px; }
.bloc-tete > * { min-width: 0; }

/* ═══════════════════════════════════════════════ ENCORE PLUS DE MOUVEMENT */
/* l'image d'un article zoome lentement, comme un plan de cinéma */
.bande-image.lent { overflow: clip; }
.bande-image.lent img { animation: plan 14s ease-out both; }
@keyframes plan { from { transform: scale(1.12); } to { transform: none; } }

/* les mots en bleu du titre d'accueil : un reflet qui passe */
.ouverture h1 .bleu {
  background: linear-gradient(100deg, var(--vague-vif) 0%, var(--vague-vif) 40%, #B8ECF9 50%, var(--vague-vif) 60%, var(--vague-vif) 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: reflet-texte 5s ease-in-out infinite;
}
.ouverture h1 .bleu .mot > span { color: transparent; background: inherit; -webkit-background-clip: text; background-clip: text; }
@keyframes reflet-texte { 0%, 55% { background-position: 100% 0; } 100% { background-position: -50% 0; } }

/* le menu : un soulignement qui glisse */
.menu a:not(.bouton) { position: relative; }
.menu a:not(.bouton)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--vague-vif);
  transform: scaleX(0); transform-origin: right; transition: transform .35s var(--douce); }
.menu a:not(.bouton):hover::after { transform: scaleX(1); transform-origin: left; }

/* le grand chiffre du calculateur respire quand il change */
.calc-grand { transition: color .5s, transform .3s; }
.calc-grand.zero { animation: respire 2.4s ease-in-out infinite; }
@keyframes respire { 50% { transform: scale(1.03); } }

/* les pictos des étiquettes flottent doucement */
.libelle.avec-picto .picto { animation: flotte 4s ease-in-out infinite; }
@keyframes flotte { 50% { transform: translateY(-3px) rotate(-3deg); } }

@media (prefers-reduced-motion: reduce) {
  .bande-image.lent img, .ouverture h1 .bleu, .calc-grand.zero, .libelle.avec-picto .picto { animation: none; }
  .ouverture h1 .bleu { color: var(--vague-vif); background: none; }
}

/* le magasin, annoncé sur l'accueil */
.magasin-bande { background: var(--aube-fond); border-bottom: 1px solid var(--trait); }
.magasin-bande-corps { display: flex; align-items: center; gap: 18px; padding-block: 18px; flex-wrap: wrap; }
.magasin-bande-corps img { width: 46px; height: 46px; animation: flotte 4s ease-in-out infinite; }
.magasin-bande-corps div { flex: 1 1 260px; display: flex; flex-direction: column; }
.magasin-bande-corps b { font-family: var(--display); font-size: 1.25rem; }
.magasin-bande-corps span { color: var(--encre-doux); }

/* les liens utiles, en bas de chaque article */
.liens-utiles { padding-bottom: clamp(40px, 6vw, 70px); }
.liens-utiles ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.liens-utiles a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--carte);
  border: 1px solid var(--trait); color: var(--encre); text-decoration: none; font-weight: 600; transition: border-color .3s, transform .3s var(--douce); }
.liens-utiles a::before { content: "→"; color: var(--vague); font-weight: 700; transition: transform .3s var(--douce); }
.liens-utiles a:hover { border-color: var(--vague); transform: translateX(4px); }
.liens-utiles a:hover::before { transform: translateX(3px); }

/* ═══════════════════════════════════════════════ LES APPELS À L'ACTION */
.encart { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 2.2em 0; padding: 20px 22px;
  border-radius: 16px; background: linear-gradient(120deg, var(--vague-fond), var(--aube-fond)); border: 1px solid var(--trait); }
.encart > img { width: 46px; height: 46px; animation: flotte 4s ease-in-out infinite; }
.encart-texte { flex: 1 1 240px; display: flex; flex-direction: column; gap: 4px; }
.encart-texte b { font-family: var(--display); font-size: 1.15rem; }
.encart-texte span { color: var(--encre-doux); font-size: .97rem; line-height: 1.5; }
.article-corps .encart .bouton { text-decoration: none; }

.appel { position: relative; overflow: clip; isolation: isolate; background: var(--nuit); color: #fff; padding: clamp(60px, 8vw, 100px) 0; }
.appel-corps { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(26px, 4vw, 56px); align-items: center; }
.appel-corps > * { min-width: 0; }
.appel .libelle { color: var(--aube-vif); }
.appel .picto { filter: brightness(0) invert(1); width: 30px; height: 30px; }
.appel h2 { color: #fff; font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1; letter-spacing: -.04em; margin: 10px 0 14px; }
.appel h2 .bleu { color: var(--vague-vif); font-weight: inherit; }
.appel p { color: #C6CED0; font-size: 1.08rem; line-height: 1.6; margin: 0; max-width: 46ch; }
.appel-boutons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.appel-bouton { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: 16px; text-decoration: none; color: #fff;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  transition: transform .35s var(--douce), background .3s, border-color .3s, box-shadow .35s; }
.appel-bouton b { font-family: var(--display); font-size: 1.08rem; }
.appel-bouton span { color: #9AA6A9; font-size: .88rem; }
.appel-bouton:hover { transform: translateY(-4px); background: rgba(255,255,255,.1); border-color: var(--vague-vif); color: #fff; }
.appel-bouton.principal { background: var(--vague); border-color: var(--vague); box-shadow: 0 18px 40px -18px rgba(34,174,209,.8); }
.appel-bouton.principal span { color: #DFF6FC; }
.appel-bouton.principal:hover { background: var(--vague-vif); }
.appel-bouton.whatsapp:hover { border-color: #25D366; }
@media (max-width: 860px) { .appel-corps { grid-template-columns: 1fr; } }
@media (max-width: 460px) { .appel-boutons { grid-template-columns: 1fr; } }

.naf-lire { margin-left: 8px; font-weight: 600; font-size: .9rem; white-space: nowrap; }
.constat-article { display: flex; flex-direction: column; gap: 3px; margin-top: 16px; padding: 14px 16px; border-radius: 12px;
  background: var(--vague-fond); border: 1px solid var(--trait); color: var(--encre); text-decoration: none; transition: border-color .3s, transform .3s var(--douce); }
.constat-article span { font: 500 .78rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--vague); }
.constat-article b { font-family: var(--display); }
.constat-article:hover { border-color: var(--vague); transform: translateX(4px); color: var(--encre); }

/* le menu tient sur une ligne, même avec « Le magasin » */
.menu a { white-space: nowrap; }
@media (max-width: 1040px) { .menu { gap: 18px; } .menu a:not(.bouton) { font-size: .9rem; } }
@media (max-width: 960px) and (min-width: 769px) { .menu a[href$="/eligibilite"]:not(.bouton) { display: none; } }

/* ═══════════════════════════════════════════════ LE PLAN DU MAGASIN */
.plan-lyon { width: 100%; height: auto; display: block; color: #fff; overflow: visible; }
.plan-lyon .riviere { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.plan-lyon .rhone { stroke: var(--vague-vif); stroke-width: 22; opacity: .85; }
.plan-lyon .saone { stroke: var(--vague); stroke-width: 15; opacity: .8; }
.js .plan-lyon .riviere { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: trace 2.4s cubic-bezier(.4,0,.2,1) forwards; }
.js .plan-lyon .saone { animation-delay: .4s; }
@keyframes trace { to { stroke-dashoffset: 0; } }
.plan-lyon .lieu { font: 500 13px var(--mono); letter-spacing: .06em; text-transform: uppercase; fill: #9AA6A9; }
.plan-lyon .plan-nom { font: 800 20px var(--display); fill: #fff; }
.plan-lyon .plan-adresse { font: 500 13px var(--mono); fill: var(--aube-vif); }
.plan-lyon .plan-epingle path { fill: var(--aube-vif); stroke: var(--nuit); stroke-width: 2; }
.plan-lyon .plan-epingle circle { fill: var(--nuit); }
.js .plan-lyon .plan-epingle { animation: chute 1s cubic-bezier(.5,1.6,.4,1) 1.6s both; }
@keyframes chute { from { opacity: 0; translate: 0 -60px; } to { opacity: 1; translate: 0 0; } }
.plan-lyon .plan-onde { fill: none; stroke: var(--aube-vif); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: onde 2.2s ease-out 2.4s infinite; opacity: 0; }
.plan-lyon .plan-halo { animation: respire 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: reduce) { .plan-lyon * { animation: none !important; stroke-dashoffset: 0 !important; opacity: 1; } }

.carte-plan { background: var(--nuit); border-radius: 18px; padding: clamp(16px, 2.6vw, 30px); overflow: clip;
  box-shadow: 0 40px 80px -46px rgba(12,15,17,.8); }

/* le magasin, sur l'accueil */
.magasin-vitrine { background: var(--nuit); color: #fff; padding: clamp(50px, 7vw, 90px) 0; position: relative; overflow: clip; }
.magasin-vitrine-corps { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(26px, 4vw, 60px); align-items: center; }
.magasin-vitrine-corps > * { min-width: 0; }
.magasin-vitrine .libelle { color: var(--aube-vif); }
.magasin-vitrine .picto { filter: brightness(0) invert(1); }
.magasin-vitrine h2 { color: #fff; font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1; letter-spacing: -.04em; margin: 10px 0 14px; }
.magasin-vitrine h2 .bleu { color: var(--vague-vif); font-weight: inherit; }
.magasin-vitrine p { color: #C6CED0; font-size: 1.08rem; line-height: 1.6; max-width: 44ch; }
.magasin-adresse { display: inline-flex; flex-direction: column; gap: 2px; margin: 8px 0 22px; padding: 14px 18px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); }
.magasin-adresse b { font-family: var(--display); font-size: 1.2rem; }
.magasin-adresse span { color: #9AA6A9; font-family: var(--mono); font-size: .85rem; }
@media (max-width: 860px) { .magasin-vitrine-corps { grid-template-columns: 1fr; } }
.plan-lyon text { paint-order: stroke; stroke: var(--nuit); stroke-width: 5px; stroke-linejoin: round; }

/* ── la page financement : le simulateur ── */
.fin-simu { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 860px) { .fin-simu { grid-template-columns: 1fr; } }
.fin-velos { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.fin-velos label, .fin-formules label { position: relative; cursor: pointer; }
.fin-velos input, .fin-formules input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.fin-velos span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--rayon-carte); background: var(--carte);
                  border: 1px solid var(--trait); font-family: var(--display); font-weight: 800; font-size: 1.3rem; }
.fin-velos input:checked + span { background: var(--encre); color: #fff; border-color: var(--encre); }
.fin-formules { display: grid; gap: 10px; margin-top: 10px; }
.fin-formules span { display: block; padding: 14px 16px 14px 46px; border-radius: var(--rayon-carte); background: var(--carte); border: 1px solid var(--trait); position: relative; }
.fin-formules span::before { content: ""; position: absolute; left: 16px; top: 17px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--trait-fort); }
.fin-formules input:checked + span { border-color: var(--vague); background: var(--vague-fond); }
.fin-formules input:checked + span::before { border: 6px solid var(--vague); }
.fin-formules b { display: block; }
.fin-formules small { color: var(--encre-doux); font-family: var(--mono); font-size: .78rem; }
.fin-velos input:focus-visible + span, .fin-formules input:focus-visible + span { outline: 2px solid var(--vague); outline-offset: 2px; }
.fin-resultat { background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon-carte); padding: 26px; }
.fin-gros { font-family: var(--display); font-weight: 900; font-size: clamp(2.6rem, 6vw, 3.6rem); letter-spacing: -.045em; color: var(--vague); margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
.fin-book { display: flex; gap: 22px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 30px;
            padding: 24px 26px; border-radius: var(--rayon-carte); background: var(--vague-fond); border: 1px solid #CFE3E9; }

/* avec « Financement », on cède « Conseils » (toujours dans le pied de page) sur les écrans moyens */
@media (max-width: 1140px) and (min-width: 769px) { .menu a[href$="/conseils"]:not(.bouton) { display: none; } }
/* la bande « payer en 8 fois », sous le calculateur */
.bande-8x { display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap;
            padding: 22px 26px; border-radius: var(--rayon-carte); background: var(--encre); color: #fff; }
.bande-8x b { font-family: var(--display); font-size: clamp(1.25rem, 2.6vw, 1.7rem); letter-spacing: -.03em; display: block; }
.bande-8x span { color: #AEB9BB; }

/* ══════════════ LA PAGE FINANCEMENT — l'échéancier comme une ligne de tournée ══════════════ */
.fx-heros { padding: clamp(40px, 7vw, 96px) 0 clamp(50px, 7vw, 100px); position: relative; overflow: hidden;
            background: radial-gradient(900px 480px at 92% 8%, var(--aube-fond), transparent 62%),
                        radial-gradient(700px 420px at 0% 100%, var(--vague-fond), transparent 60%); }
.fx-heros-grille { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 70px); align-items: center; }
@media (max-width: 920px) { .fx-heros-grille { grid-template-columns: 1fr; } }
.fx-titre { font-size: clamp(2.6rem, 6.2vw, 5.4rem); margin: 14px 0 18px; }
.fx-titre em, .fx-titre em span { font-style: normal; color: var(--vague); }
.fx-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.fx-garanties { list-style: none; margin: 28px 0 0; padding: 0; display: flex; gap: 10px 26px; flex-wrap: wrap;
                color: var(--encre-doux); font-size: .92rem; }
.fx-garanties b { font-family: var(--display); font-weight: 900; font-size: 1.25rem; color: var(--encre); margin-right: 4px; letter-spacing: -.02em; }

/* le billet : l'échéancier, sur fond de nuit */
.fx-billet { margin: 0; color: #fff; border-radius: 22px; padding: 26px 26px 20px; position: relative;
             background: linear-gradient(160deg, #1B3A47 -10%, var(--nuit) 70%);
             box-shadow: 0 40px 80px -40px rgba(12,15,17,.55), 0 0 0 1px rgba(255,255,255,.04) inset; }
.fx-billet::before, .fx-billet::after { content: ""; position: absolute; top: 118px; width: 26px; height: 26px; border-radius: 50%; background: var(--papier); }
.fx-billet::before { left: -13px; } .fx-billet::after { right: -13px; }
.fx-billet-tete { display: flex; justify-content: space-between; align-items: center; gap: 10px;
                  font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.fx-pastille { background: rgba(240,185,110,.14); color: var(--aube-vif); padding: 4px 10px; border-radius: 99px; letter-spacing: .06em; }
.fx-gros { font-family: var(--display); font-weight: 900; font-size: clamp(3rem, 7vw, 4.4rem); letter-spacing: -.05em; line-height: 1;
           margin: 16px 0 30px; font-variant-numeric: tabular-nums; border-bottom: 1px dashed rgba(255,255,255,.18); padding-bottom: 28px; }
.fx-gros small { font-family: var(--texte); font-weight: 500; font-size: 1rem; letter-spacing: 0; color: rgba(255,255,255,.55); margin-left: 6px; }
.fx-frise { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr) 1.35fr; position: relative; }
.fx-frise::before { content: ""; position: absolute; left: 6%; right: 9%; top: 9px; height: 4px; border-radius: 4px;
                    background: linear-gradient(90deg, var(--vague-vif), var(--vague) 70%, var(--aube)); transform-origin: left; }
.fx-frise.anime::before { animation: fx-trace 1.4s var(--douce) .2s both; }
@keyframes fx-trace { from { transform: scaleX(0); } }
.fx-frise li { display: flex; flex-direction: column; align-items: center; gap: 7px; position: relative; text-align: center; }
.fx-point { width: 22px; height: 22px; border-radius: 50%; background: var(--nuit); border: 4px solid var(--vague-vif); z-index: 1;
            }
.fx-frise.anime .fx-point { animation: fx-pose .5s var(--douce) both; animation-delay: calc(.2s + var(--i) * .13s); }
.fx-frise li.solde .fx-point { width: 30px; height: 30px; margin-top: -4px; border-color: var(--aube); background: var(--aube);
                               box-shadow: 0 0 0 7px rgba(240,185,110,.18); }
@keyframes fx-pose { from { transform: scale(0); } }
.fx-mois { font-family: var(--mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.fx-montant { font-family: var(--mono); font-size: .66rem; color: rgba(255,255,255,.88); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fx-frise li.solde .fx-mois { color: var(--aube-vif); }
.fx-frise li.solde .fx-montant { font-size: .74rem; color: #fff; font-weight: 500; }
@media (max-width: 520px) { .fx-frise li:not(.solde) .fx-montant { display: none; } }
.fx-billet-pied { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 26px 0 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); }
.fx-billet-pied dt { font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.fx-billet-pied dd { margin: 4px 0 0; font-family: var(--display); font-weight: 800; font-size: 1.12rem; font-variant-numeric: tabular-nums; }
.fx-billet-pied dd.vague { color: var(--vague-vif); } .fx-billet-pied dd.aube { color: var(--aube-vif); }
.fx-note { margin: 12px 0 0; font-size: .74rem; color: rgba(255,255,255,.45); }

/* les en-têtes de section */
.fx-entete { max-width: 640px; margin-bottom: clamp(26px, 4vw, 44px); }
.fx-entete h2 { margin: 10px 0 12px; }
.fx-entete p { color: var(--encre-doux); margin: 0; }
.section.encre .fx-entete p { color: #AEB9BB; }

/* le simulateur */
.fx-simu-section { background: var(--papier-2); border-block: 1px solid var(--trait); }
.fx-simu { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(22px, 4vw, 48px); align-items: start; }
@media (max-width: 920px) { .fx-simu { grid-template-columns: 1fr; } }
.fx-reglages fieldset { border: 0; padding: 0; margin: 0 0 26px; }
.fx-reglages legend { margin-bottom: 12px; }
.fx-velos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; max-width: 420px; }
.fx-velos label, .fx-formules label { position: relative; cursor: pointer; }
.fx-velos input, .fx-formules input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.fx-velos span { display: grid; place-items: center; aspect-ratio: 1; border-radius: 14px; background: var(--carte); border: 1px solid var(--trait);
                 font-family: var(--display); font-weight: 900; font-size: 1.45rem; transition: background .2s, color .2s, transform .2s var(--douce); }
.fx-velos label:hover span { transform: translateY(-2px); }
.fx-velos input:checked + span { background: var(--encre); color: #fff; border-color: var(--encre); }
.fx-formules { display: grid; gap: 10px; }
.fx-formules span { display: block; padding: 16px 18px 16px 50px; border-radius: 16px; background: var(--carte); border: 1px solid var(--trait); position: relative;
                    transition: border-color .2s, background .2s; }
.fx-formules span::before { content: ""; position: absolute; left: 18px; top: 19px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--trait-fort); transition: border .2s; }
.fx-formules input:checked + span { border-color: var(--vague); background: var(--vague-fond); }
.fx-formules input:checked + span::before { border: 6px solid var(--vague); }
.fx-formules b { display: block; font-size: 1.02rem; }
.fx-formules small { display: block; color: var(--encre-doux); font-family: var(--mono); font-size: .76rem; margin-top: 3px; }
.fx-formules i { display: block; font-style: normal; font-size: .82rem; color: var(--vague); margin-top: 6px; font-weight: 600; }
.fx-velos input:focus-visible + span, .fx-formules input:focus-visible + span { outline: 2px solid var(--vague); outline-offset: 3px; }
.fx-regle { font-size: .86rem; color: var(--encre-pale); margin: 0; }

.fx-resultat { background: var(--carte); border: 1px solid var(--trait); border-radius: 22px; padding: clamp(22px, 3vw, 32px);
               box-shadow: 0 30px 60px -40px rgba(12,15,17,.35); }
.fx-resultat-haut { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.fx-mensualite { font-family: var(--display); font-weight: 900; font-size: clamp(2.8rem, 6vw, 4rem); letter-spacing: -.05em; line-height: 1;
                 color: var(--vague); margin-top: 8px; font-variant-numeric: tabular-nums; }
.fx-solde-bloc { text-align: right; }
.fx-solde-bloc div { font-family: var(--display); font-weight: 800; font-size: 1.6rem; letter-spacing: -.03em; color: var(--aube); margin-top: 6px; font-variant-numeric: tabular-nums; }
.fx-barres { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; height: 120px; align-items: end; margin: 26px 0 8px; }
.fx-barres span { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }
.fx-barres i { width: 100%; border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg, var(--vague-vif), var(--vague));
               transition: height .5s var(--douce); min-height: 6px; }
.fx-barres span.solde i { background: linear-gradient(180deg, var(--aube-vif), var(--aube)); }
.fx-barres em { font-style: normal; font-family: var(--mono); font-size: .66rem; color: var(--encre-pale); }
.fx-compte { margin: 18px 0 0; }
.fx-compte div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid var(--trait); align-items: baseline; }
.fx-compte dt { color: var(--encre-doux); font-size: .93rem; }
.fx-compte dd { margin: 0; font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.fx-compte .fort dd, .fx-compte .fort dt { font-weight: 700; color: var(--encre); }
.fx-compte .vague dd { color: var(--vague); }
.fx-compte .final { border-top: 2px solid var(--encre); padding-top: 14px; }
.fx-compte .final dt { font-weight: 700; color: var(--encre); font-size: 1rem; }
.fx-compte .final dd { font-family: var(--display); font-weight: 900; font-size: 1.6rem; letter-spacing: -.03em; color: var(--encre); }
.fx-compte .final small { display: block; font-family: var(--texte); font-weight: 400; font-size: .76rem; color: var(--encre-pale); letter-spacing: 0; white-space: normal; }
.fx-plein { width: 100%; justify-content: center; margin-top: 20px; }

/* les documents : de vraies feuilles, posées en pile */
.fx-docs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 28px); }
@media (max-width: 860px) { .fx-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .fx-docs { grid-template-columns: 1fr; } }
.fx-doc { background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon-carte); padding: 18px 20px 20px; }
.fx-doc h3 { font-size: 1.12rem; margin: 16px 0 6px; }
.fx-doc p { margin: 0; color: var(--encre-doux); font-size: .93rem; }
.fx-feuille { height: 128px; border-radius: 6px; background: #fff; border: 1px solid var(--trait); position: relative; padding: 14px 16px;
              box-shadow: 6px 6px 0 -1px var(--papier-2), 6px 6px 0 0 var(--trait), 0 14px 30px -18px rgba(12,15,17,.35);
              transform: rotate(var(--r)); transition: transform .35s var(--douce); }
.fx-doc:hover .fx-feuille { transform: rotate(0) translateY(-3px); }
.fx-feuille img { display: block; margin-bottom: 10px; }
.fx-feuille i { display: block; height: 6px; border-radius: 3px; background: var(--papier-2); margin-top: 7px; width: 88%; }
.fx-feuille i.c { width: 56%; }
.fx-signe { position: absolute; right: 14px; bottom: 12px; font-family: 'Instrument Serif', serif; font-style: italic; font-size: 1.05rem;
            color: var(--vague); transform: rotate(-6deg); opacity: .85; }

/* le book */
.fx-book { display: grid; grid-template-columns: auto 1fr auto; gap: 26px; align-items: center; margin-top: clamp(30px, 4vw, 50px);
           padding: 22px 26px; border-radius: 22px; background: var(--encre); color: #fff; }
@media (max-width: 760px) { .fx-book { grid-template-columns: 1fr; } }
.fx-book-couv { width: 92px; height: 120px; border-radius: 6px 10px 10px 6px; padding: 12px; display: flex; flex-direction: column; justify-content: space-between;
                background: linear-gradient(160deg, var(--vague), #0B4A5C); box-shadow: inset 6px 0 0 rgba(0,0,0,.18), 0 18px 30px -14px rgba(0,0,0,.6);
                transform: rotate(-4deg); }
.fx-book-couv span { font-family: var(--mono); font-size: .52rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.fx-book-couv b { font-family: var(--display); font-size: .95rem; line-height: 1.05; }
.fx-book-texte h3 { margin: 6px 0; color: #fff; }
.fx-book-texte p { margin: 0; color: #AEB9BB; }
.fx-book .bouton { background: var(--aube); color: var(--encre); }
.fx-book .bouton:hover { background: var(--aube-vif); }

/* les questions */
.fx-faq-grille { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 70px); align-items: start; }
@media (max-width: 860px) { .fx-faq-grille { grid-template-columns: 1fr; } }
.fx-faq details { border-top: 1px solid var(--trait); padding: 4px 0; }
.fx-faq details:last-child { border-bottom: 1px solid var(--trait); }
.fx-faq summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 0; font-weight: 700; font-size: 1.06rem; position: relative; }
.fx-faq summary::-webkit-details-marker { display: none; }
.fx-faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-family: var(--mono);
                         font-size: 1.4rem; color: var(--vague); transition: transform .25s var(--douce); }
.fx-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.fx-faq details p { margin: 0 0 18px; color: var(--encre-doux); max-width: 60ch; }
.fx-faq summary:focus-visible { outline: 2px solid var(--vague); outline-offset: 4px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .fx-frise::before, .fx-point { animation: none; } .fx-barres i { transition: none; } }
.fx-billet-pied dd { white-space: nowrap; }
@media (max-width: 520px) {
  .fx-billet { padding: 22px 18px 18px; }
  .fx-billet-pied { gap: 8px; }
  .fx-billet-pied dd { font-size: .92rem; letter-spacing: -.02em; }
  .fx-billet-pied dt { font-size: .54rem; letter-spacing: .06em; }
  .fx-billet-tete { flex-direction: column; align-items: flex-start; }
}

/* ══════════════ LES PAGES COMMUNES ══════════════ */
.cm-fil { font-size: .84rem; color: var(--encre-pale); margin-bottom: 18px; display: flex; gap: 8px; flex-wrap: wrap; }
.cm-fil a { color: var(--encre-doux); }
.cm-chiffres { margin-top: clamp(28px, 4vw, 44px); }
.cm-deux { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 70px); }
@media (max-width: 900px) { .cm-deux { grid-template-columns: 1fr; } }
.cm-metiers { list-style: none; margin: 0; padding: 0; counter-reset: m; }
.cm-metiers li { padding: 12px 0; border-top: 1px solid var(--trait); counter-increment: m; }
.cm-metier-tete { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.cm-metier-tete a, .cm-metier-tete span { font-weight: 600; }
.cm-metier-tete a::before, .cm-metier-tete span::before { content: counter(m, decimal-leading-zero) "  "; font-family: var(--mono); font-size: .74rem; color: var(--vague); font-weight: 400; }
.cm-metier-tete b { font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cm-barre { display: block; height: 6px; border-radius: 6px; background: var(--trait); margin-top: 8px; overflow: hidden; }
.cm-barre i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--vague), var(--vague-vif)); }
.cm-secteurs { list-style: none; margin: 0; padding: 0; }
.cm-secteurs li { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; padding: 12px 0; border-top: 1px solid var(--trait); }
.cm-secteurs b { font-family: var(--mono); font-weight: 500; }
.cm-secteurs i { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--aube) var(--p), var(--trait) var(--p)); }
.cm-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.cm-tuile { display: block; padding: 14px 16px; border-radius: var(--rayon-carte); background: var(--carte); border: 1px solid var(--trait); text-decoration: none; color: var(--encre);
            transition: border-color .2s, transform .2s var(--douce); }
.cm-tuile:hover { border-color: var(--vague); transform: translateY(-2px); }
.cm-tuile b { display: block; font-size: 1rem; }
.cm-tuile span { display: block; font-size: .8rem; color: var(--encre-pale); font-family: var(--mono); margin-top: 3px; }
.cm-tuile[hidden] { display: none; }
.cm-cherche input { width: 100%; max-width: 420px; height: 52px; border-radius: 14px; border: 1px solid var(--trait); padding: 0 16px; font: inherit; font-size: 1.02rem; margin-bottom: 18px; background: var(--carte); }
.cm-cherche input:focus { outline: 2px solid var(--vague); outline-offset: 2px; }
.cm-voisines { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.cm-voisines a { padding: 9px 14px; border-radius: 99px; border: 1px solid var(--trait); background: var(--carte); text-decoration: none; color: var(--encre); font-size: .9rem; }
.cm-voisines a:hover { border-color: var(--vague); color: var(--vague); }