/* Système de revenus fidèle (revenus-*.html) : l'ordre et les textes de la page en ligne, au style de la direction 1.
   S'ajoute à onglets.css, accueil-fidele.css et organisation-fidele.css, dont elle reprend les bandes, le surlignage,
   les autocollants, les bulles de parole, les questions, le formulaire et la scène de jeu (.scene-jeu).
   Premier écran : la courbe yo-yo (.courbe-scene), choisie par Lilian le 29/09/2026 ; la recherche et les fuites sont archivées
   dans ../ecartees/revenus-premiers-ecrans/. */
:root{
  --barre:var(--aubergine);       /* barres des graphiques, sur la fenêtre blanche 13,3:1 */
}
:root[data-theme="dark"]{--barre:var(--encre-douce)} /* en sombre, les barres restent distinctes des missions lilas */

/* ===== Premier écran : la fenêtre de jeu ===== */
.scene-fenetre{--penche:-1deg;overflow:visible;transform:rotate(var(--penche));color:var(--encre)}
.scene-fenetre .fenetre-barre{border-radius:var(--rayon-fenetre) var(--rayon-fenetre) 0 0}
.scene-fenetre .fenetre-barre .fichier{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scene-fenetre.secousse{animation:secousse-penche 420ms var(--courbe)}
@keyframes secousse-penche{0%,100%{transform:rotate(var(--penche))}25%{transform:rotate(calc(var(--penche) - .8deg)) translateY(3px)}60%{transform:rotate(calc(var(--penche) + .4deg)) translateY(1px)}}
.scene-jauge{display:inline-flex;align-items:center;gap:var(--e-2);font-family:var(--police-fichier);font-size:var(--t-xs);font-weight:700;color:var(--encre);white-space:nowrap}
.scene-jeu .long{display:none}
.scene-fenetre .etiquette{color:var(--encre-douce)} /* la fenêtre est claire, même posée sur la scène */
@media(max-width:559px){.scene-fenetre .fenetre-barre .fichier{display:none}.scene-fenetre .fenetre-barre{justify-content:space-between}}
@media(min-width:560px){.scene-jeu .long{display:inline}.scene-jeu .court{display:none}}
/* Les zones à réparer à la main : pointillé rouge, puis vert une fois réparées */
.a-reparer{border:1.5px dashed var(--rouge);border-radius:10px;background:var(--alerte-barre);color:var(--encre);font:inherit;cursor:pointer;transition:background-color 300ms var(--courbe),border-color 300ms var(--courbe),box-shadow var(--duree-secondaire) var(--courbe),opacity 260ms var(--courbe),transform 380ms var(--courbe-ressort)}
.scene-jeu.pret .a-reparer:not(.repare):hover{box-shadow:inset 0 0 0 2px var(--rouge)}
.a-reparer.repare{border-style:solid;border-color:transparent;cursor:default}

/* ----- A. La courbe yo-yo : douze mois de signatures, trois creux pendant les missions ----- */
.courbe-corps{display:grid;gap:var(--e-2);padding:var(--e-3) var(--e-3) var(--e-4)}
.courbe-legende{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px var(--e-3);font-family:var(--police-fichier);font-size:var(--t-2xs);color:var(--encre-douce)}
.legende-droite{display:inline-flex;gap:var(--e-3)}
.legende-point::before{content:"";display:inline-block;width:14px;margin-right:6px;border-top:2px dashed var(--encre-douce);vertical-align:middle}
.legende-mission::before{content:"";display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:3px;background:var(--lilas);vertical-align:-1px}
.missions,.graphe,.barres,.mois-ligne{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:2px}
.mission{grid-row:1;grid-column:var(--de) / calc(var(--a) + 1);display:grid;place-items:center;height:24px;padding:0 4px;border-radius:6px;background:var(--lilas);color:var(--nuit);font-size:var(--t-2xs);font-weight:800;white-space:nowrap;overflow:hidden}
.graphe{position:relative;height:150px;grid-template-rows:100%;border-bottom:2px solid var(--filet-fort)}
.barres{position:absolute;inset:0;z-index:2;grid-template-rows:100%;align-items:end;pointer-events:none}
.barre{grid-row:1;grid-column:var(--mois);height:calc(var(--h) / 40 * 100%);min-height:3px;margin:0 2px;border-radius:5px 5px 0 0;background:var(--barre);transform-origin:bottom;transition:height 520ms var(--courbe-ressort),background-color 300ms var(--courbe),transform 420ms var(--courbe-ressort)}
.barre.bas{background:var(--rouge)}
.barre.remonte{background:var(--ok)}
.js .barre:not(.pose){transform:scaleY(0)}
.point-mort{position:absolute;left:0;right:0;bottom:50%;z-index:3;border-top:2px dashed var(--encre-douce);pointer-events:none} /* 20 k€ sur une échelle de 40 */
.creux{grid-row:1;grid-column:var(--de) / calc(var(--a) + 1);z-index:1;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;margin:0;padding:6px 2px}
.creux-titre{font-family:var(--police-fichier);font-size:var(--t-2xs);font-weight:700}
.creux-levier{display:none;max-width:100%;padding:3px 6px;border-radius:6px;background:var(--lilas);color:var(--nuit);font-size:var(--t-2xs);font-weight:800;line-height:1.15;text-align:center;box-shadow:0 6px 12px -8px rgba(32,10,29,.6);transform:rotate(-3deg)}
.creux.repare{background:transparent}
.creux.repare .creux-titre{display:none}
.creux.repare .creux-levier{display:block}
.js .creux.repare .creux-levier{animation:retourne 420ms var(--courbe)}
.courbe-scene.joue .creux{opacity:0;pointer-events:none}
.yoyo{position:absolute;inset:0;z-index:3;width:100%;height:100%;overflow:visible;pointer-events:none}
.yoyo polyline{fill:none;stroke:var(--rouge);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;transition:stroke 400ms var(--courbe)}
.courbe-scene.lisse .yoyo polyline{stroke:var(--ok)}
.mois-ligne{font-family:var(--police-fichier);font-size:var(--t-2xs);color:var(--encre-douce);text-align:center}
.mois-piste{display:inline-grid;grid-template-columns:repeat(12,6px);gap:2px}
.mois-piste i{height:10px;border-radius:2px;background:var(--ok);transition:background-color 300ms var(--courbe)}
.mois-piste i.bas{background:var(--rouge)}
.mois-piste i.vide{background:var(--filet-fort)}
@media(min-width:560px){.graphe{height:190px}.courbe-corps{padding:var(--e-4)}.mois-piste{grid-template-columns:repeat(12,7px)}}
@media(min-width:1024px){.graphe{height:210px}}

/* ===== Ils me font confiance : trois chiffres épinglés ===== */
.preuves--trois{display:grid;gap:var(--e-3)}
.chiffre-lien{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px var(--e-3)}
.chiffre-lien strong{font-size:var(--t-xl);font-weight:800;line-height:1.1;letter-spacing:-.03em;font-variation-settings:"opsz" 96}
.chiffre-lien > span:not(.fichier){font-weight:700}
.chiffre-lien .fichier{flex-basis:100%;color:var(--encre-douce)}
.preuves li:nth-child(3) .preuve-lien{transform:rotate(-.4deg)}
@media(min-width:900px){.preuves--trois{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e-5)}}

/* ===== Les constats : le configurateur, la fenêtre qui répond ===== */
.constats-grille{display:grid;gap:var(--e-7);align-items:start}
.constats-texte{display:grid;gap:var(--e-5);min-width:0}
.constats-texte h2{font-size:var(--t-2xl)}
.cfg-liste{display:grid;gap:var(--e-3)}
.cfg-m{border-radius:var(--rayon-fenetre);background:var(--fenetre);box-shadow:inset 0 0 0 1px var(--filet),var(--ombre-fenetre)}
.cfg-m-tete{display:flex;align-items:center;gap:var(--e-3);width:100%;min-height:56px;padding:var(--e-3) var(--e-5);border:0;border-radius:var(--rayon-fenetre);background:transparent;color:var(--encre);font-weight:800;font-size:var(--t-md);letter-spacing:-.01em;text-align:left;cursor:pointer}
.cfg-m-nom{flex:1}
.cfg-m-tete::after{content:"+";flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--fond-2);font-family:var(--police-fichier);font-weight:700;font-size:var(--t-base)}
.cfg-m-tete[aria-expanded="true"]::after{content:"−"}
.cfg-m-cpt{flex:none;padding:2px var(--e-2);border-radius:var(--pilule);background:var(--fond-2);color:var(--encre-douce);font-family:var(--police-fichier);font-size:var(--t-xs);font-weight:700;transition:background-color var(--duree-secondaire) var(--courbe)}
.cfg-m-cpt.on{background:var(--rouge);color:var(--nuit)}
.cfg-m-corps{display:grid;gap:2px;padding:0 var(--e-2) var(--e-3)}
.cfg-m-tete[aria-expanded="false"] + .cfg-m-corps{display:none}
.cfg-o{display:flex;align-items:flex-start;gap:var(--e-3);width:100%;min-height:48px;padding:var(--e-3);border:0;border-radius:10px;background:transparent;color:var(--encre);font-weight:600;font-size:var(--t-base);line-height:1.35;text-align:left;cursor:pointer;transition:background-color var(--duree-action) var(--courbe)}
.cfg-o:hover{background:var(--fond-2)}
.cfg-o .bx{flex:none;display:grid;place-items:center;width:22px;height:22px;margin-top:1px;border-radius:6px;box-shadow:inset 0 0 0 2px var(--filet-fort);transition:background-color var(--duree-action) var(--courbe)}
.cfg-o[aria-pressed="true"]{background:var(--alerte-barre)}
.cfg-o[aria-pressed="true"] .bx{background:var(--rouge);box-shadow:none}
.cfg-o[aria-pressed="true"] .bx::after{content:"✓";font-family:var(--police-fichier);font-size:var(--t-sm);font-weight:700;color:var(--nuit)}
.cfg-m-tete:focus-visible,.cfg-o:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
/* La fenêtre qui répond : penchée, elle suit le pointeur comme les plaques du site en ligne */
.plaque{--penche:1.6deg;width:100%;max-width:460px;justify-self:center;transform:rotate(var(--penche));will-change:transform;transition:transform var(--duree-secondaire) var(--courbe)}
.plaque.suit{transition:none}
.diagnostic{--penche:1deg;max-width:520px}
.diagnostic .fenetre-corps{gap:var(--e-4);min-height:300px}
.cfg-txt{font-size:var(--t-lg);font-weight:800;line-height:1.25;letter-spacing:-.02em;color:var(--encre)}
.cfg-txt.vide{font-size:var(--t-base);font-weight:600;line-height:1.5;letter-spacing:0;color:var(--encre-douce)}
.cfg-curseur::after{content:"";display:inline-block;width:.45em;height:.95em;margin-left:3px;background:var(--rouge);vertical-align:-2px}
.cfg-etapes{display:grid;gap:6px;margin-top:var(--e-2);font-family:var(--police-fichier);font-size:var(--t-xs);font-weight:400;letter-spacing:0;line-height:1.4;color:var(--encre-douce)}
.cfg-e{display:flex;align-items:center;gap:var(--e-2)}
.cfg-e i{flex:none;width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--filet-fort)}
.cfg-e.on{color:var(--encre)}
.cfg-e.on i{background:var(--rouge);box-shadow:none}
.cfg-e.fait i{background:var(--ok);box-shadow:none}
.cfg-detail,.cfg-leviers{display:grid;gap:var(--e-2)}
.cfg-detail li{position:relative;padding-left:22px;font-size:var(--t-sm);line-height:1.45;color:var(--encre-douce)}
.cfg-detail li::before{content:"→";position:absolute;left:0;top:0;font-family:var(--police-fichier);font-weight:700;color:var(--rouge)}
.cfg-detail li.cfg-plus{font-style:italic}
.cfg-detail li.cfg-plus::before{content:"+"}
.cfg-tags{display:flex;flex-wrap:wrap;gap:6px}
.cfg-tag{padding:4px var(--e-3);border-radius:var(--pilule);background:var(--lilas);color:var(--nuit);font-size:var(--t-sm);font-weight:700;opacity:0;transform:translateY(4px) rotate(-2deg);transition:opacity 220ms var(--courbe),transform 320ms var(--courbe-ressort)}
.cfg-tag:nth-child(2n){transform:translateY(4px) rotate(2deg)}
.cfg-tag.on{opacity:1;transform:rotate(-1.5deg)}
.cfg-tag:nth-child(2n).on{transform:rotate(1.5deg)}
.cfg-tag-plus{background:var(--fond-2);color:var(--encre-douce)}
.cfg-cta{justify-self:start}
.cfg-cta[aria-disabled="true"]{background:transparent;border-color:var(--filet-fort);color:var(--encre-douce)}
.cfg-cta[aria-disabled="true"]:hover{background:var(--fond-2)}
.cfg-note{font-size:var(--t-xs);line-height:1.5;color:var(--encre-douce)}
.cfg-detail[hidden],.cfg-leviers[hidden]{display:none}
@media(min-width:1024px){.constats-grille{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--e-8)}.diagnostic{position:sticky;top:calc(var(--hauteur-nav) + var(--e-6))}}

/* ===== Pour qui : quatre bulles de parole et la carte d'appel ===== */
.pourqui--revenus li:nth-child(3) q{transform:rotate(-.6deg)}
.pourqui--revenus li:nth-child(4) q{transform:rotate(.9deg)}
.pourqui-carte a{display:grid;gap:var(--e-2);align-content:center;height:100%;min-height:150px;padding:var(--e-5) var(--e-6);border-radius:var(--rayon-fenetre);background:var(--scene);color:var(--sur-scene);text-decoration:none;box-shadow:var(--ombre-fenetre);transform:rotate(1.5deg);transition:transform var(--duree-secondaire) var(--courbe)}
.pourqui-carte a:hover{transform:translateY(-3px) rotate(0)}
.pourqui-carte a:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.pourqui-fleche{font-size:var(--t-xl);font-weight:800;line-height:1;color:var(--rouge-scene);transition:transform var(--duree-secondaire) var(--courbe)}
.pourqui-carte a:hover .pourqui-fleche{transform:translateX(6px)}
.pourqui-carte-titre{font-size:var(--t-lg);font-weight:800;line-height:1.1;letter-spacing:-.02em}
.pourqui-carte .fichier{color:var(--sur-scene-doux)}

/* ===== L'offre : trois maillons, texte d'un côté, plaque de l'autre ===== */
.chapitre--un{background:var(--fond-2)}
.chapitre--trois{background:var(--vert-pale)}
[data-theme="dark"] .chapitre--trois{background:var(--fond-2)}
.chapitre-grille{display:grid;gap:var(--e-7);align-items:center}
.chapitre-texte{display:grid;gap:var(--e-5);justify-items:start;min-width:0}
.chapitre-texte h2{font-size:var(--t-2xl)}
.chapitre-accroche{font-size:var(--t-md);line-height:1.55;max-width:52ch}
.capacites{display:grid;gap:var(--e-3);width:100%}
.capacite{padding:var(--e-4) var(--e-5);border-radius:var(--rayon-fenetre);background:var(--fenetre);box-shadow:inset 0 0 0 1px var(--filet);transition:transform var(--duree-secondaire) var(--courbe)}
.capacite:nth-child(1){transform:rotate(-.6deg)}
.capacite:nth-child(2){transform:rotate(.5deg) translateX(10px)}
.capacite:nth-child(3){transform:rotate(-.3deg)}
.capacite:hover{transform:translateY(-3px) rotate(0)}
.capacite h3{margin-bottom:var(--e-1);font-size:var(--t-md);line-height:1.25;letter-spacing:-.015em}
.capacite p{font-size:var(--t-sm);line-height:1.5;color:var(--encre-douce)}
@media(min-width:1024px){.chapitre-grille{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--e-8)}.chapitre--inverse .chapitre-grille{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.chapitre--inverse .plaque{order:-1}}
/* Plaque 1 : la recherche */
.badge-vous{padding:2px var(--e-2);border-radius:var(--pilule);background:var(--vert);color:var(--creme);font-family:var(--police-fichier);font-size:var(--t-2xs);font-weight:700}
.reponse-ia{display:grid;gap:4px;padding:var(--e-3);border-radius:10px;background:var(--fond-2);font-size:var(--t-sm);line-height:1.45;transition:opacity 260ms var(--courbe)}
.resultat{display:flex;justify-content:space-between;align-items:center;gap:var(--e-3);min-height:44px;padding:var(--e-2) var(--e-3);border-radius:10px;background:var(--fond-2);font-size:var(--t-sm);font-weight:700}
.resultat--vous{background:var(--vert-pale);color:var(--vert);box-shadow:inset 0 0 0 1.5px var(--vert)}
/* Plaque 2 : le pipeline commercial */
.kanban{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.kanban-col{display:grid;gap:6px;align-content:start;min-height:170px;padding:var(--e-2);border-radius:10px;background:var(--fond-2)}
.kanban-tete{display:grid;gap:2px;margin-bottom:var(--e-1);font-size:var(--t-2xs);font-weight:700;line-height:1.2;color:var(--encre-douce);hyphens:auto}
.kanban-tete b{font-size:var(--t-lg);font-weight:800;line-height:1;color:var(--encre)}
.carte-k{display:block;height:28px;border-radius:6px;background:var(--fenetre);box-shadow:inset 3px 0 0 var(--lilas),inset 0 0 0 1px var(--filet)}
.carte-k:nth-child(3){transform:rotate(-2deg)}
.carte-k--signe{background:var(--vert-pale);box-shadow:inset 3px 0 0 var(--vert)}
@media(min-width:560px){.kanban-tete{font-size:var(--t-xs)}}
/* Plaque 3 : ce qui tourne sans vous */
.mesures{gap:var(--e-4)}
.mesure{display:grid;gap:6px}
.mesure p{display:flex;justify-content:space-between;align-items:baseline;gap:var(--e-3);font-size:var(--t-sm)}
.mesure b{font-size:var(--t-md);font-weight:800;white-space:nowrap}
.mesure-piste{display:block;height:8px;border-radius:var(--pilule);background:var(--fond-2);overflow:hidden}
.mesure-piste i{display:block;width:calc(var(--fill) * 100%);height:100%;border-radius:inherit;background:var(--ok);transform-origin:left}
.js .mesure-piste i{transition:transform calc(var(--fill) * 1200ms) var(--courbe)} /* toutes partent ensemble, à la même vitesse : la plus longue finit la dernière */
.js .mesures:not(.vu) .mesure-piste i{transform:scaleX(0)}
.chapitre-action{margin-top:var(--e-2)}

/* ===== Ce que j'ai construit : quatre fenêtres, défilement horizontal sur téléphone ===== */
.realisations{display:grid;grid-auto-flow:column;grid-auto-columns:86%;gap:var(--e-4);overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--e-4) * -1);padding:var(--e-2) var(--e-4) var(--e-5)}
.realisations:focus-visible{outline-offset:-2px}
.realisation{scroll-snap-align:start;transition:transform var(--duree-secondaire) var(--courbe)}
.realisation .fenetre-corps{gap:var(--e-4)}
.realisation:nth-child(1){transform:rotate(-.8deg)}
.realisation:nth-child(2){transform:rotate(.6deg)}
.realisation:nth-child(3){transform:rotate(.4deg)}
.realisation:nth-child(4){transform:rotate(-.6deg)}
.realisation:hover{transform:translateY(-4px) rotate(0)}
.realisation-titre{font-size:var(--t-xl);font-weight:800;line-height:1.12;letter-spacing:-.03em;font-variation-settings:"opsz" 96}
.realisation-titre--long{font-size:var(--t-md);line-height:1.35}
.realisation-chiffres{display:flex;flex-wrap:wrap;gap:var(--e-3) var(--e-6)}
.realisation-chiffres span{display:grid;gap:2px;font-family:var(--police-fichier);font-size:var(--t-xs);color:var(--encre-douce)}
.realisation-chiffres b{font-family:var(--police);font-size:var(--t-xl);font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--encre);font-variation-settings:"opsz" 96}
.realisation blockquote{font-size:var(--t-sm);line-height:1.55}
.realisation-client{margin-top:auto;font-size:var(--t-sm);font-weight:800}
.realisation-client a{display:inline-flex;align-items:center;min-width:44px;min-height:44px;text-decoration:underline;text-decoration-color:var(--rouge);text-decoration-thickness:2px;text-underline-offset:4px}
.realisation-client a::after{content:"";position:absolute;inset:0;border-radius:var(--rayon-fenetre)}
.realisation a:focus-visible{outline:none}
.realisation:has(a:focus-visible){outline:2px solid var(--focus-scene);outline-offset:4px}
@media(min-width:760px){.realisations{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-columns:auto;overflow:visible;margin:0;padding:0;gap:var(--e-6)}.realisation:nth-child(2n){margin-top:var(--e-5)}}

/* ===== Biographie : le seul bouton qui s'anime, trois pulsations à l'arrivée ===== */
.parcours-texte .halo{justify-self:start}
.halo.vu{animation:halo 1.6s var(--courbe) 3} /* trois fois puis plus rien : sous la limite de 5 s (WCAG 2.2.2) */
@keyframes halo{0%,100%{box-shadow:0 0 0 0 rgba(239,74,47,0)}50%{box-shadow:0 0 26px 3px rgba(239,74,47,.5)}}

/* ===== Questions : sur fond crème foncé ===== */
.faq-revenus{background:var(--fond-2)}
.faq-revenus .question{box-shadow:inset 0 0 0 1px var(--filet),var(--ombre-fenetre)}