@font-face { font-family: "Geist"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fontes/geist-latin.woff2") format("woff2"); }

:root {
  --espace: #050816;
  --blanc: #FFFFFF;
  --encre: #0F1222;
  --encre-douce: #4B5169;
  --clair: #F3F4FA;
  --clair-doux: #AEB4CC;
  --violet: #7C3AED;
  --violet-clair: #A78BFA;
  --bleu: #38BDF8;
  --halo-violet: rgba(124, 58, 237, 0.35);
  --halo-bleu: rgba(56, 189, 248, 0.35);
  --trait-clair: rgba(243, 244, 250, 0.12);
  --degrade-neon: linear-gradient(100deg, var(--violet), var(--bleu));
  --degrade-neon-clair: linear-gradient(100deg, var(--violet-clair), var(--bleu));
  /* Le verre : une paroi translucide qui laisse passer les étoiles, un bord fin, un éclat en haut */
  --verre: rgba(255, 255, 255, 0.055);
  --verre-dense: rgba(255, 255, 255, 0.085);
  --verre-bord: rgba(255, 255, 255, 0.14);
  --verre-eclat: rgba(255, 255, 255, 0.3);
  --flou: 26px;
  --papier-bas: #E5E4E7;
  --papier-bord: #C7CCDB;
  --rayon-s: 12px; --rayon-m: 18px; --rayon-l: 28px; --rayon-pilule: 999px;
  /* Coque du téléphone : dérivée de l'échelle, pas une cinquième valeur */
  --rayon-tel: calc(var(--rayon-l) * 1.6);
  /* La seule couleur hors palette du site : celle du logo qu'on doit reconnaître */
  --whatsapp: #25D366;
  --avis: #F5B700;
  --duree: 260ms; --sortie: cubic-bezier(0.22, 1, 0.36, 1);
  --air-objet: clamp(2.6rem, 4.6vw, 3.6rem);
  --air-chute: clamp(2rem, 3.4vw, 2.8rem);
  --air-bloc: clamp(3.2rem, 5.5vw, 4.6rem);
  --police: "Geist", "Helvetica Neue", Arial, sans-serif;
  --entete-haut: 64px;
  --etoiles: 740px 960px 0 0.6px #F3F4FA, 853px 464px 0 0.6px #F3F4FA, 838px 1346px 0 0 #F3F4FA, 1300px 455px 0 0 #F3F4FA, 618px 686px 0 0 #38BDF8, 635px 45px 0 0 #38BDF8, 519px 41px 0 0 #38BDF8, 1366px 1292px 0 0 #A78BFA, 935px 1226px 0 0 #F3F4FA, 1602px 634px 0 0 #F3F4FA, 860px 176px 0 0 #A78BFA, 866px 1058px 0 0 #38BDF8, 600px 1185px 0 0 #F3F4FA, 171px 12px 0 0 #F3F4FA, 1003px 316px 0 0 #F3F4FA, 648px 943px 0 0.6px #F3F4FA, 336px 987px 0 0 #A78BFA, 1725px 1006px 0 0 #A78BFA, 1431px 251px 0 0.6px #38BDF8, 160px 1022px 0 0 #F3F4FA, 1448px 475px 0 0.6px #F3F4FA, 67px 1104px 0 0 #A78BFA, 1236px 654px 0 0.6px #38BDF8, 1369px 1394px 0 0 #F3F4FA, 655px 206px 0 0 #38BDF8, 248px 497px 0 0 #A78BFA, 1281px 95px 0 0 #F3F4FA, 1734px 804px 0 0 #F3F4FA, 490px 364px 0 0 #F3F4FA, 1076px 500px 0 0 #F3F4FA, 1312px 301px 0 0 #A78BFA, 833px 79px 0 0.6px #A78BFA, 1495px 955px 0 0.6px #F3F4FA, 79px 121px 0 0 #F3F4FA, 875px 1366px 0 0 #38BDF8, 786px 211px 0 0 #F3F4FA, 851px 1295px 0 0 #F3F4FA, 237px 933px 0 0.6px #F3F4FA, 1721px 818px 0 0 #F3F4FA, 268px 826px 0 0.6px #38BDF8, 460px 810px 0 0 #F3F4FA, 1366px 1015px 0 0 #A78BFA, 427px 1348px 0 0.6px #F3F4FA, 999px 623px 0 0 #F3F4FA, 1735px 156px 0 0 #A78BFA, 494px 1094px 0 0.6px #F3F4FA, 1207px 905px 0 0 #A78BFA, 1133px 162px 0 0 #F3F4FA, 119px 946px 0 0 #A78BFA, 1490px 107px 0 0 #38BDF8, 351px 204px 0 0 #A78BFA, 579px 801px 0 0 #F3F4FA, 390px 930px 0 0 #F3F4FA, 1292px 0px 0 0 #F3F4FA, 809px 1242px 0 0 #F3F4FA, 551px 1311px 0 0 #A78BFA, 1280px 118px 0 0 #38BDF8, 1416px 455px 0 0 #38BDF8, 1615px 1286px 0 0 #38BDF8, 57px 1259px 0 0 #A78BFA, 1188px 985px 0 0 #F3F4FA, 1462px 943px 0 0 #F3F4FA, 388px 46px 0 0 #F3F4FA, 1495px 587px 0 0 #F3F4FA, 77px 380px 0 0 #F3F4FA, 705px 416px 0 0.6px #F3F4FA, 372px 183px 0 0.6px #F3F4FA, 66px 1175px 0 0 #F3F4FA, 1391px 323px 0 0 #A78BFA, 87px 725px 0 0 #A78BFA, 839px 530px 0 0 #38BDF8, 784px 1218px 0 0 #F3F4FA, 1521px 903px 0 0 #A78BFA, 34px 704px 0 0 #F3F4FA, 435px 785px 0 0.6px #F3F4FA, 1215px 433px 0 0.6px #38BDF8, 699px 89px 0 0.6px #F3F4FA, 43px 1334px 0 0 #A78BFA, 482px 659px 0 0 #A78BFA, 115px 770px 0 0 #A78BFA, 1306px 916px 0 0 #F3F4FA, 0px 343px 0 0 #38BDF8, 602px 1257px 0 0.6px #F3F4FA, 105px 240px 0 0 #F3F4FA, 642px 1241px 0 0 #38BDF8, 1094px 619px 0 0.6px #F3F4FA, 1223px 879px 0 0 #38BDF8, 1249px 836px 0 0 #F3F4FA, 1263px 87px 0 0 #F3F4FA, 620px 1336px 0 0.6px #F3F4FA, 152px 1287px 0 0 #A78BFA, 628px 1331px 0 0.6px #F3F4FA, 254px 235px 0 0 #A78BFA, 559px 921px 0 0 #F3F4FA, 557px 29px 0 0.6px #F3F4FA, 1473px 405px 0 0 #A78BFA, 318px 1214px 0 0 #F3F4FA, 837px 1170px 0 0 #F3F4FA, 1705px 22px 0 0 #F3F4FA, 765px 856px 0 0 #F3F4FA, 1541px 439px 0 0 #F3F4FA, 1649px 1072px 0 0 #38BDF8, 171px 570px 0 0 #F3F4FA, 1128px 201px 0 0 #F3F4FA, 218px 244px 0 0.6px #A78BFA, 732px 45px 0 0 #F3F4FA, 1448px 519px 0 0.6px #F3F4FA, 672px 859px 0 0.6px #A78BFA, 486px 1247px 0 0 #F3F4FA, 326px 456px 0 0 #F3F4FA, 792px 723px 0 0 #F3F4FA, 56px 1320px 0 0 #F3F4FA, 1553px 1296px 0 0.6px #F3F4FA, 1433px 540px 0 0 #A78BFA, 689px 666px 0 0.6px #F3F4FA, 686px 511px 0 0.6px #F3F4FA, 1102px 39px 0 0 #F3F4FA, 898px 1104px 0 0.6px #38BDF8, 839px 1207px 0 0 #38BDF8, 289px 490px 0 0 #F3F4FA, 354px 88px 0 0 #F3F4FA, 448px 739px 0 0.6px #F3F4FA, 1018px 267px 0 0 #F3F4FA, 960px 862px 0 0 #F3F4FA, 499px 596px 0 0.6px #F3F4FA, 832px 6px 0 0 #A78BFA, 1304px 310px 0 0 #F3F4FA, 1785px 1244px 0 0 #F3F4FA, 1202px 197px 0 0 #38BDF8, 481px 816px 0 0 #F3F4FA, 942px 119px 0 0 #F3F4FA, 640px 683px 0 0 #F3F4FA, 83px 1072px 0 0 #F3F4FA, 1451px 526px 0 0 #F3F4FA, 246px 504px 0 0 #A78BFA, 105px 613px 0 0 #F3F4FA, 814px 1066px 0 0 #F3F4FA, 1043px 122px 0 0 #A78BFA, 31px 447px 0 0 #F3F4FA, 1363px 658px 0 0 #F3F4FA;
  --etoiles-vives: 74px 1072px 0 0.8px #38BDF8, 1206px 1021px 0 1.1px #38BDF8, 1795px 1370px 0 1.1px #38BDF8, 1620px 703px 0 1.1px #A78BFA, 1455px 999px 0 1.1px #A78BFA, 1338px 988px 0 0.8px #F3F4FA, 899px 796px 0 1.1px #38BDF8, 1259px 1172px 0 1.1px #F3F4FA, 220px 935px 0 0.8px #F3F4FA, 1483px 473px 0 1.1px #A78BFA, 967px 1011px 0 1.1px #F3F4FA, 1493px 1150px 0 1.1px #38BDF8, 236px 873px 0 0.8px #F3F4FA, 1219px 463px 0 1.1px #38BDF8, 1160px 388px 0 1.1px #F3F4FA, 556px 86px 0 1.1px #38BDF8, 153px 491px 0 1.1px #A78BFA, 1566px 172px 0 1.1px #F3F4FA, 1265px 170px 0 0.8px #38BDF8, 1505px 553px 0 0.8px #38BDF8, 250px 248px 0 1.1px #F3F4FA, 518px 166px 0 0.8px #38BDF8, 564px 1071px 0 1.1px #F3F4FA, 1437px 75px 0 1.1px #A78BFA, 1621px 937px 0 0.8px #A78BFA, 1032px 464px 0 0.8px #38BDF8;
  --etoiles-lointaines: 1509px 186px 0 0 #F3F4FA, 1096px 960px 0 0.4px #38BDF8, 1676px 1011px 0 0.4px #38BDF8, 1057px 453px 0 0.4px #F3F4FA, 704px 442px 0 0.4px #38BDF8, 1706px 496px 0 0 #38BDF8, 504px 519px 0 0.4px #F3F4FA, 775px 60px 0 0.4px #38BDF8, 1263px 902px 0 0.4px #38BDF8, 207px 578px 0 0 #F3F4FA, 844px 509px 0 0.4px #38BDF8, 675px 277px 0 0 #38BDF8, 857px 1077px 0 0.4px #38BDF8, 743px 1251px 0 0.4px #F3F4FA, 388px 1363px 0 0 #38BDF8, 851px 681px 0 0.4px #38BDF8, 1264px 676px 0 0 #F3F4FA, 1449px 726px 0 0 #38BDF8, 1351px 927px 0 0.4px #38BDF8, 1740px 534px 0 0.4px #F3F4FA, 47px 216px 0 0.4px #38BDF8, 1671px 314px 0 0 #38BDF8, 825px 861px 0 0.4px #F3F4FA, 1191px 1155px 0 0 #38BDF8, 305px 1077px 0 0 #38BDF8, 606px 1319px 0 0.4px #38BDF8, 495px 1185px 0 0.4px #38BDF8, 315px 1093px 0 0 #F3F4FA, 1001px 445px 0 0.4px #38BDF8, 311px 1119px 0 0.4px #F3F4FA, 55px 618px 0 0.4px #F3F4FA, 1077px 832px 0 0 #F3F4FA, 1028px 654px 0 0.4px #F3F4FA, 1215px 222px 0 0.4px #F3F4FA;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; color-scheme: dark; scroll-padding-top: calc(var(--entete-haut) + 1rem); }
body { margin: 0; font-family: var(--police); font-size: 1.04rem; line-height: 1.6; color: var(--clair); background: var(--espace); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0 0 0.45em; line-height: 1; letter-spacing: -0.035em; font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(2.7rem, 1.5rem + 4.3vw, 5.1rem); line-height: 0.95; }
h2 { font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3.2rem); }
h3 { font-size: 1.25rem; letter-spacing: -0.02em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--bleu); }
img, svg, video { display: block; max-width: 100%; }
strong, b { font-weight: 600; }
:focus-visible { outline: 3px solid var(--bleu); outline-offset: 3px; }

.conteneur { width: min(100% - 2 * clamp(1rem, 4vw, 3rem), 1120px); margin-inline: auto; }
.section { padding-block: clamp(4rem, 9vh, 7rem); }
.etiquette { display: inline-flex; align-items: center; gap: 0.7rem; margin: 0 0 1.3rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--violet-clair); }
.etiquette::before { content: ""; width: 1.6rem; height: 2px; background: var(--degrade-neon); }
.sous-titre { max-width: 36rem; font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem); color: var(--clair-doux); }
.neon { background: var(--degrade-neon-clair); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dore { color: var(--violet-clair); }
.chiffre { font-variant-numeric: tabular-nums; }

/* Les panneaux de verre : translucides, bord fin, éclat spéculaire en haut, ombre portée lointaine */
.panneau { position: relative; color: var(--clair); background: var(--verre); -webkit-backdrop-filter: blur(var(--flou)) saturate(160%); backdrop-filter: blur(var(--flou)) saturate(160%); border: 1px solid var(--verre-bord); border-radius: var(--rayon-l); box-shadow: inset 0 1px 0 var(--verre-eclat), inset 0 -1px 0 rgba(255, 255, 255, 0.04), 0 34px 80px -46px rgba(0, 0, 0, 0.95); overflow: hidden; }
.panneau::before { content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, var(--verre-eclat) 20%, rgba(167, 139, 250, 0.6) 50%, var(--verre-eclat) 80%, transparent); }
.panneau p, .panneau li { color: var(--clair-doux); }
.panneau h2, .panneau h3, .panneau strong, .panneau b { color: var(--clair); }
.panneau .etiquette { color: var(--violet-clair); }

.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3.1rem; padding: 0.85rem 1.7rem; border-radius: var(--rayon-pilule); border: 0; background: var(--degrade-neon); color: var(--blanc); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 8px 30px var(--halo-violet), 0 0 40px var(--halo-bleu); transition: transform var(--duree) var(--sortie), box-shadow var(--duree) var(--sortie); }
.bouton:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 12px 40px var(--halo-violet), 0 0 60px var(--halo-bleu); }
.bouton-contour { background: var(--verre); -webkit-backdrop-filter: blur(var(--flou)); backdrop-filter: blur(var(--flou)); color: var(--clair); box-shadow: inset 0 0 0 1px var(--verre-bord), inset 0 1px 0 var(--verre-eclat); }
.bouton-contour:hover { box-shadow: inset 0 0 0 1px var(--violet-clair), inset 0 1px 0 var(--verre-eclat); color: var(--violet-clair); transform: none; }
.bouton-petit { min-height: 2.4rem; padding: 0.45rem 1.1rem; font-size: 0.85rem; }
.evitement { position: absolute; left: -999px; top: 0.5rem; z-index: 100; padding: 0.7rem 1.2rem; background: var(--blanc); color: var(--violet); font-weight: 600; }
.evitement:focus { left: 0.5rem; }

/* L'espace : fond fixe, étoiles en points, trois nappes de nébuleuse pour donner au verre quelque chose à réfracter */
.espace { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--espace); }
.espace::before { content: ""; position: absolute; inset: -20%; background: radial-gradient(40% 35% at 18% 26%, rgba(124, 58, 237, 0.2), transparent 70%), radial-gradient(35% 30% at 82% 72%, rgba(56, 189, 248, 0.16), transparent 70%), radial-gradient(30% 26% at 54% 48%, rgba(167, 139, 250, 0.1), transparent 72%); }
.espace::after { content: ""; position: absolute; top: 0; left: 0; width: 1px; height: 1px; border-radius: 50%; box-shadow: var(--etoiles); animation: derive-etoiles 240s linear infinite; }
@keyframes derive-etoiles { to { transform: translateY(-160px); } }
.etoiles { position: absolute; top: 0; left: 0; width: 1px; height: 1px; border-radius: 50%; }
.etoiles.vives { box-shadow: var(--etoiles-vives); animation: derive-etoiles 190s linear infinite, scintiller 6.5s ease-in-out infinite; }
.etoiles.lointaines { box-shadow: var(--etoiles-lointaines); animation: derive-etoiles 310s linear infinite, scintiller 11s ease-in-out -4s infinite; }
@keyframes scintiller { 0%, 100% { opacity: 0.28; } 50% { opacity: 1; } }
@keyframes battement { 0%, 100% { opacity: 1; } 48% { opacity: 0.12; } }

/* L'en-tête : une lame de verre posée en haut de l'écran */
.entete { position: sticky; top: 0; z-index: 60; height: var(--entete-haut); background: rgba(5, 8, 22, 0.55); -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); border-bottom: 1px solid var(--trait-clair); }
.entete-inner { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); height: 100%; }
.marque { display: inline-flex; align-items: center; gap: 0.55rem; margin-right: auto; color: var(--clair); font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; text-decoration: none; }
.marque::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--degrade-neon); box-shadow: 0 0 10px var(--halo-violet); }
.appel { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.95rem; border-radius: var(--rayon-pilule); background: var(--verre); -webkit-backdrop-filter: blur(var(--flou)); backdrop-filter: blur(var(--flou)); box-shadow: inset 0 0 0 1px var(--verre-bord), inset 0 1px 0 var(--verre-eclat); color: var(--clair); font-size: 0.86rem; font-weight: 600; letter-spacing: 0.01em; text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; transition: box-shadow var(--duree) var(--sortie), color var(--duree) var(--sortie); }
.appel svg { flex: none; width: 1rem; height: 1rem; fill: none; stroke: var(--bleu); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.appel:hover { color: var(--bleu); box-shadow: inset 0 0 0 1px var(--bleu), 0 0 20px var(--halo-bleu); }
.navigation { display: flex; align-items: center; gap: 1.5rem; }
.navigation a { position: relative; padding-block: 0.4rem; color: var(--clair-doux); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; transition: color var(--duree) var(--sortie); }
.navigation a:hover { color: var(--clair); }
.navigation a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: var(--rayon-pilule); background: var(--degrade-neon); transform: scaleX(0); transform-origin: left; transition: transform var(--duree) var(--sortie); }
.navigation a:hover::after, .navigation a.est-actif::after { transform: scaleX(1); }
.navigation a.est-actif { color: var(--clair); }
.navigation .bouton { color: var(--blanc); letter-spacing: 0.02em; text-transform: none; }
.navigation .bouton::after { display: none; }

/* L'hypervitesse, puis la sortie : les traînées se rétractent en points et la page est déjà là.
   Pas de fondu ni de halo blanc — on s'arrête dessus, d'un coup. */
.saut { position: fixed; inset: 0; z-index: 80; overflow: hidden; cursor: pointer; }
.saut-image { position: absolute; inset: -12%; background: var(--espace) url("../images/espace-vitesse.webp") center / cover no-repeat; animation: saut-vitesse 1000ms cubic-bezier(0.55, 0, 0.95, 0.35) forwards; }
.saut-note { position: absolute; left: 50%; bottom: 6vh; transform: translateX(-50%); margin: 0; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--clair-doux); }
@keyframes saut-vitesse { 0% { transform: scale(1); filter: brightness(0.8); } 100% { transform: scale(1.85); filter: brightness(1.3); } }
.saut.est-pret .saut-image { animation: saut-vitesse 1000ms cubic-bezier(0.55, 0, 0.95, 0.35) forwards, saut-sortie 380ms cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes saut-sortie { 0% { transform: scale(1.85); filter: brightness(1.3); opacity: 1; } 20% { transform: scale(2.6); filter: brightness(1.55); opacity: 1; } 100% { transform: scale(0.9); filter: brightness(0.6); opacity: 0; } }
.saut.est-pret { animation: saut-fin 1ms linear 380ms forwards; }
@keyframes saut-fin { to { visibility: hidden; } }
html.saut-passe .saut { display: none; }
/* Pendant le saut la page attend derrière ; à la sortie elle est là, entière, sans fondu */
html.saut-en-cours .heros-texte > *, html.saut-en-cours .portrait, html.saut-en-cours .entete, html.saut-en-cours main > :not(.heros) { opacity: 0; }
/* Seul le champ d'étoiles marque la décélération */
html.saut-arrive .espace { animation: arrivee 560ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes arrivee { from { transform: scale(1.09); } to { transform: scale(1); } }

/* Apesanteur : les panneaux dérivent de quelques pixels, chacun à son rythme.
   Le décalage passe par `transform`, l'apparition au défilement par `translate` : les deux ne se marchent pas dessus. */
@keyframes apesanteur { 0%, 100% { transform: translate3d(0, 0, 0); } 28% { transform: translate3d(3px, calc(var(--amplitude, 9px) * -0.55), 0); } 52% { transform: translate3d(0, calc(var(--amplitude, 9px) * -1), 0); } 78% { transform: translate3d(-3px, calc(var(--amplitude, 9px) * -0.4), 0); } }
.ecran, .balance-cote, .cadran, .bordereau { animation: apesanteur var(--derive, 13s) ease-in-out var(--retard, 0s) infinite; }
.telephone { animation: apesanteur-telephone 15s ease-in-out infinite; }
@keyframes apesanteur-telephone { 0%, 100% { transform: rotate(-1.3deg) translate3d(0, 0, 0); } 50% { transform: rotate(0.5deg) translate3d(0, -10px, 0); } }
.ecran:nth-child(2n), .balance-cote:nth-child(2n) { --derive: 16s; --retard: -4s; --amplitude: 13px; }
.ecran:nth-child(3n), .balance-cote:nth-child(3n) { --derive: 11s; --retard: -7s; --amplitude: 7px; }
.bordereau { --derive: 18s; --amplitude: 8px; animation-name: apesanteur-papier; }
@keyframes apesanteur-papier { 0%, 100% { transform: rotate(-0.6deg) translate3d(0, 0, 0); } 50% { transform: rotate(-0.15deg) translate3d(0, calc(var(--amplitude) * -1), 0); } }

/* Premier écran */
.heros { padding-block: clamp(2rem, 6vh, 4rem) clamp(2.5rem, 7vh, 4.5rem); }
@media (min-width: 768px) { .heros { display: grid; align-items: center; min-height: calc(100svh - var(--entete-haut) - 9.4rem); } }
.heros-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.promesse { margin: 1.2rem 0 0; max-width: 45rem; text-wrap: balance; font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem); font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; }
.promesse b { color: var(--bleu); font-weight: 600; }
.heros .sous-titre { margin-top: 0.9rem; }
/* Le prix en une phrase, pas en vitrine : on le lit, on ne le contemple pas */
.tarif { display: block; margin: 1.8rem 0 0; padding-left: 1.1rem; border-left: 2px solid var(--violet-clair); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.12rem); color: var(--clair); }
.tarif b { background: var(--degrade-neon-clair); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 1.5em; font-weight: 700; letter-spacing: -0.02em; }
.tarif-note { display: block; margin-top: 0.15rem; font-size: 0.84rem; color: var(--clair-doux); }
.heros-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.7rem; }
/* Le tableau de bord : quatre cadrans de vaisseau, posés sur le pli */
.cadrans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; margin-top: clamp(1.2rem, 3vh, 2.4rem); }
.cadran { position: relative; display: grid; justify-items: center; gap: 0.1rem; padding: 1rem 0.8rem 1.1rem; text-align: center; }
.cadran-large b { font-size: 1.05rem; letter-spacing: -0.01em; }
.jauge { width: 64px; height: 40px; fill: none; }
.jauge .piste { stroke: rgba(255, 255, 255, 0.13); stroke-width: 4; stroke-linecap: round; }
.jauge .valeur { stroke: var(--bleu); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 76; stroke-dashoffset: calc(76 - var(--part, 40) * 0.76); filter: drop-shadow(0 0 5px var(--halo-bleu)); }

/* Cinq sites livrés : cinq colonnes qui respirent, à la manière d'un égaliseur */
.jauge-colonnes .colonnes line { stroke: var(--bleu); stroke-width: 9; stroke-linecap: round; transform-box: fill-box; transform-origin: bottom; filter: drop-shadow(0 0 6px var(--halo-bleu)); animation: colonne-egaliseur ease-in-out infinite; animation-duration: calc(1.7s + var(--rang) * 0.29s); animation-delay: calc(var(--rang) * -0.37s); }
.jauge-colonnes .colonnes line:nth-child(2n) { stroke: var(--violet-clair); filter: drop-shadow(0 0 6px var(--halo-violet)); }
@keyframes colonne-egaliseur { 0%, 100% { transform: scaleY(0.26); } 32% { transform: scaleY(1); } 64% { transform: scaleY(0.52); } }

/* Sept jours : sept barres qui s'allument l'une après l'autre jusqu'à la mise en ligne */
.jauge-jours .jours line { stroke: var(--bleu); stroke-width: 5.5; stroke-linecap: round; opacity: 0.16; animation: jour-coche 6s ease-in-out infinite; animation-delay: calc(var(--rang) * 0.42s); }
.jauge-jours .jours line:last-child { stroke: var(--violet-clair); }
@keyframes jour-coche { 0% { opacity: 0.16; } 6%, 60% { opacity: 1; } 74%, 100% { opacity: 0.16; } }

/* Quarante-huit heures : l'aiguille monte, dépasse, puis se pose */
.jauge-vitesse .aiguille { stroke: var(--violet-clair); stroke-width: 2; stroke-linecap: round; transform-origin: 32px 34px; animation: aiguille-vitesse 6s ease-in-out infinite; }
.jauge-vitesse .pivot { fill: var(--violet-clair); stroke: none; }
@keyframes aiguille-vitesse { 0% { transform: rotate(-52deg); } 20% { transform: rotate(36deg); } 28% { transform: rotate(14deg); } 36% { transform: rotate(26deg); } 48%, 84% { transform: rotate(21deg); } 100% { transform: rotate(-52deg); } }

/* Toute la France : un radar qui tourne et des échos qui répondent */
.jauge-radar .anneau { stroke: rgba(255, 255, 255, 0.22); stroke-width: 1.1; }
.jauge-radar .balai { stroke: var(--bleu); stroke-width: 2; stroke-linecap: round; transform-origin: 32px 20px; filter: drop-shadow(0 0 6px var(--halo-bleu)); animation: balayage-radar 4.2s linear infinite; }
.jauge-radar .echos circle { fill: var(--violet-clair); stroke: none; opacity: 0.2; filter: drop-shadow(0 0 6px var(--halo-violet)); animation: echo-radar 4.2s linear infinite; animation-delay: var(--retard-echo); }
@keyframes balayage-radar { to { transform: rotate(360deg); } }
@keyframes echo-radar { 0% { opacity: 1; } 38%, 100% { opacity: 0.2; } }
.cadran b { margin-top: 0.35rem; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--clair); font-variant-numeric: tabular-nums; }
.cadran small { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--clair-doux); }

/* Corentin, en grand. La vidéo porte sa propre couche de transparence (VP9 alpha), calculée depuis
   le fond noir du tournage. Surtout ne pas revenir à `mix-blend-mode: screen` : le moindre
   `backdrop-filter` posé ailleurs dans la page isole le fond d'espace et la fusion vire au noir. */
.portrait { position: relative; }
.portrait-scene { position: relative; margin: 0 -6% 0 0; aspect-ratio: 1280 / 660; overflow: hidden; border-radius: var(--rayon-l); box-shadow: inset 0 0 0 1px var(--verre-bord), inset 0 1px 0 var(--verre-eclat), 0 44px 90px -46px rgba(0, 0, 0, 0.95), 0 0 70px -24px var(--halo-violet); }
.portrait-video { width: 100%; height: 100%; object-fit: cover; }
.portrait-legende { margin: 0.9rem 0 0; text-align: center; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--clair-doux); }

/* Le chauffeur : la métaphore en trois panneaux */
.chauffeur { padding-top: clamp(2.5rem, 6vh, 4rem); }
.chauffeur-phrase { max-width: 42rem; margin: 1.4rem 0 0; padding-left: 1.1rem; border-left: 2px solid var(--violet-clair); font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.24rem); color: var(--clair-doux); }
.chauffeur-phrase b { color: var(--bleu); font-weight: 600; }
.metaphore { display: grid; grid-template-columns: repeat(4, minmax(0, 16.5rem)); grid-template-rows: auto auto; justify-content: center; gap: 1.1rem 1rem; margin-top: var(--air-objet); }
.metaphore .flux-etape { grid-row: span 2; grid-template-rows: subgrid; align-items: end; gap: 0; }
.metaphore .objet { width: min(100%, 16rem); }
.metaphore .flux-mot { align-self: start; }
.metaphore .flux-image { display: block; margin-bottom: 0.25rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--violet-clair); }
.metaphore .flux-mot b { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.35rem); }
.metaphore .flux-mot small { margin-top: 0.35rem; font-size: clamp(0.86rem, 0.82rem + 0.15vw, 0.97rem); line-height: 1.4; color: var(--clair-doux); }
.metaphore .objet-neuf { top: -1.05rem; right: auto; left: 50%; translate: -50% 0; white-space: nowrap; }
.objet-jauge { --derive: 15s; --retard: -6s; --amplitude: 8px; display: grid; justify-items: center; gap: 0.6rem; padding: 1.1rem 0.9rem 0.9rem; border-radius: var(--rayon-m); background: rgba(255, 255, 255, 0.11); box-shadow: inset 0 0 0 1px var(--verre-bord), inset 0 1px 0 var(--verre-eclat), 0 30px 60px -36px rgba(0, 0, 0, 0.95); }
.objet-jauge svg { width: 88px; height: 55px; fill: none; }
.objet-jauge .piste { stroke: rgba(255, 255, 255, 0.13); stroke-width: 4; stroke-linecap: round; }
.objet-jauge .valeur { stroke: var(--bleu); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 76; stroke-dashoffset: calc(76 - var(--part, 40) * 0.76); filter: drop-shadow(0 0 5px var(--halo-bleu)); }
.objet-jauge line { stroke: var(--violet-clair); stroke-width: 2; stroke-linecap: round; transform-origin: 32px 34px; transform: rotate(var(--aiguille, 0deg)); }
.objet-plein { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem 0.8rem; width: 100%; }
.objet-plein li { position: relative; padding-left: 0.85rem; font-size: 0.68rem; font-weight: 600; color: var(--clair-doux); }
.objet-carnet { --derive: 12s; --retard: -3s; --amplitude: 9px; display: grid; gap: 0.7rem; padding: 1rem 0.95rem 1.1rem; border-radius: var(--rayon-m); background: linear-gradient(155deg, rgba(124, 58, 237, 0.3), rgba(56, 189, 248, 0.14) 60%, rgba(255, 255, 255, 0.06)); box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.55), inset 0 1px 0 var(--verre-eclat), 0 30px 60px -36px rgba(0, 0, 0, 0.95), 0 0 46px -14px var(--halo-violet); }
.carnet-titre { display: flex; align-items: center; gap: 0.45rem; margin: 0; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--violet-clair); }
.carnet-titre i { width: 6px; height: 6px; border-radius: 50%; background: var(--bleu); box-shadow: 0 0 8px var(--halo-bleu); animation: battement 2.6s ease-in-out infinite; }
.carnet-liste { display: grid; gap: 0.6rem; }
.carnet-liste li { display: flex; align-items: flex-start; gap: 0.55rem; }
.carnet-liste svg { flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.1rem; fill: none; stroke: var(--bleu); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.carnet-liste b { display: block; font-size: 0.76rem; line-height: 1.25; color: var(--clair); }
.carnet-liste span { font-size: 0.66rem; line-height: 1.3; color: var(--clair-doux); }
.objet-plein li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 4px; height: 4px; border-radius: 50%; background: var(--bleu); box-shadow: 0 0 5px var(--halo-bleu); }

/* Le moteur : ce qui se passe sans entretien, et avec. Deux colonnes, rien à décoder. */
.balance { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-top: var(--air-objet); }
.balance-cote { padding: 1.7rem 1.6rem 1.8rem; }
.balance-quoi { margin: 0 0 1.2rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--clair-doux); }
.balance-liste { display: grid; gap: 0.9rem; }
.balance-liste li { position: relative; padding-left: 1.9rem; font-size: 0.97rem; }
.balance-liste li::before { content: ""; position: absolute; left: 0; top: 0.22em; width: 1.15rem; height: 1.15rem; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--verre-bord); }
.balance-liste li::after { content: ""; position: absolute; left: 0.34rem; top: 0.72em; width: 0.48rem; height: 2px; border-radius: var(--rayon-pilule); background: var(--clair-doux); }
.balance-bien { background: linear-gradient(155deg, rgba(124, 58, 237, 0.22), rgba(56, 189, 248, 0.1) 58%, rgba(255, 255, 255, 0.05)); box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.5), inset 0 1px 0 var(--verre-eclat), 0 34px 80px -46px rgba(0, 0, 0, 0.95), 0 0 50px -14px var(--halo-violet); }
.balance-bien .balance-quoi { color: var(--violet-clair); }
.balance-bien .balance-liste li::before { box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.65); }
.balance-bien .balance-liste li::after { left: 0.42rem; top: 0.42em; width: 0.32rem; height: 0.62rem; border-radius: 0; background: none; border-right: 2px solid var(--bleu); border-bottom: 2px solid var(--bleu); transform: rotate(42deg); }
.moteur-chute { max-width: 46rem; margin: var(--air-chute) 0 0; font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem); font-weight: 600; color: var(--clair); }

/* Le flux : des objets qu'on reconnaît sans lire — une bulle, un visage, un site, une fiche, un résultat */
.flux { display: grid; grid-template-columns: minmax(0, 31rem) auto minmax(0, 17rem); justify-content: center; align-items: center; gap: clamp(1rem, 3vw, 2.2rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.flux > * { min-width: 0; }
.flux-etape { display: grid; gap: 0.9rem; justify-items: center; }
.flux-etape > * { min-width: 0; }
.flux-mot { margin: 0; text-align: center; }
.flux-mot b { display: block; font-size: 0.98rem; letter-spacing: -0.01em; color: var(--clair); }
.flux-mot small { display: block; margin-top: 0.1rem; font-size: 0.76rem; color: var(--clair-doux); }
.flux-fleche { position: relative; display: grid; justify-items: center; gap: 0.3rem; width: 2.4rem; }
.flux-fleche::before { content: ""; width: 100%; height: 2px; border-radius: var(--rayon-pilule); background: var(--degrade-neon); }
.flux-fleche::after { content: ""; position: absolute; top: 0; right: 0; width: 8px; height: 8px; margin-top: -3px; border-top: 2px solid var(--bleu); border-right: 2px solid var(--bleu); transform: rotate(45deg); }
.flux-fleche b { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; color: var(--violet-clair); }
.objet img { height: auto; }
.objet { position: relative; width: 100%; min-width: 0; animation: apesanteur var(--derive, 12s) ease-in-out var(--retard, 0s) infinite; }
.objet-neuf { position: absolute; top: -0.55rem; right: -0.4rem; padding: 0.22rem 0.55rem; border-radius: var(--rayon-pilule); background: var(--degrade-neon); color: var(--blanc); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; box-shadow: 0 6px 18px var(--halo-violet); }
.objet-message { --derive: 13s; --amplitude: 7px; }
.objet-message .bulle { max-width: none; width: 100%; }
.objet-message img { border-radius: var(--rayon-s); }
.objet-moi { --derive: 16s; --retard: -4s; --amplitude: 10px; width: 7.2rem; aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: radial-gradient(circle at 50% 40%, rgba(124, 58, 237, 0.35), rgba(5, 8, 22, 0.9) 72%); box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.55), inset 0 1px 0 var(--verre-eclat), 0 0 40px -10px var(--halo-violet); }
.objet-moi img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 8%; transform: scale(1.9); transform-origin: 60% 22%; }
.flux-double { grid-template-columns: 1fr 1fr; gap: 0.9rem 0.8rem; }

.flux .objet-site, .flux .objet-fiche, .flux .objet-recherche { font-size: 1.12em; }
.flux-double .flux-mot { grid-column: 1 / -1; }
.objet-site, .objet-fiche { padding: 0.55rem; border-radius: var(--rayon-m); background: rgba(255, 255, 255, 0.11); box-shadow: inset 0 0 0 1px var(--verre-bord), inset 0 1px 0 var(--verre-eclat), 0 30px 60px -36px rgba(0, 0, 0, 0.95); }
.objet-site { --derive: 11s; --retard: -7s; --amplitude: 6px; }
.objet-fiche { --derive: 15s; --retard: -2s; --amplitude: 9px; }
.objet-barre { display: flex; align-items: center; gap: 0.25rem; margin-bottom: 0.45rem; font-size: 0.58rem; color: var(--clair-doux); }
.objet-barre i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); }
.objet-barre span { flex: 1; margin-left: 0.3rem; padding: 0.15rem 0.5rem; border-radius: var(--rayon-pilule); background: rgba(255, 255, 255, 0.06); }
.mini-site { overflow: hidden; border-radius: var(--rayon-s); background: #F7F8FC; }
.mini-nav { display: flex; align-items: center; gap: 0.3rem; padding: 0.4rem 0.5rem; background: var(--blanc); }
.mini-nav b { flex: 1; font-size: 0.5rem; letter-spacing: 0.02em; color: var(--encre); }
.mini-nav span { width: 0.85rem; height: 3px; border-radius: var(--rayon-pilule); background: rgba(15, 18, 34, 0.18); }
.mini-heros { position: relative; }
.objet-site img { display: block; width: 100%; height: auto; }
.mini-heros::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 11, 26, 0.1) 30%, rgba(8, 11, 26, 0.72)); }
.mini-titre { position: absolute; z-index: 1; left: 0.55rem; right: 0.55rem; bottom: 1.5rem; margin: 0; font-size: 0.58rem; font-weight: 700; line-height: 1.2; color: var(--blanc); }
.mini-bouton { position: absolute; z-index: 1; left: 0.55rem; bottom: 0.5rem; margin: 0; padding: 0.15rem 0.45rem; border-radius: var(--rayon-pilule); background: var(--degrade-neon); font-size: 0.45rem; font-weight: 700; color: var(--blanc); }
.mini-lignes { display: grid; gap: 3px; padding: 0.5rem; }
.mini-lignes i { display: block; height: 3px; border-radius: var(--rayon-pilule); background: rgba(15, 18, 34, 0.12); }
.mini-lignes i:last-child { width: 55%; }
.objet-titre { margin: 0.45rem 0 0; font-size: 0.72rem; font-weight: 700; line-height: 1.25; color: var(--clair); }
.flux .mini-titre { bottom: 1.8rem; font-size: 0.66rem; }
.objet-nom { display: flex; align-items: center; gap: 0.35rem; margin: 0; font-size: 0.78rem; font-weight: 700; color: var(--clair); }
.objet-nom svg { flex: none; width: 1rem; height: 1rem; fill: none; stroke: var(--bleu); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.objet-avis { display: flex; align-items: center; gap: 0.35rem; margin: 0.3rem 0 0; font-size: 0.66rem; color: var(--clair-doux); }
.objet-etoiles { display: inline-flex; gap: 1px; }
.objet-etoiles svg { width: 0.72rem; height: 0.72rem; fill: var(--avis); }
.objet-ouvert { margin: 0.2rem 0 0; font-size: 0.64rem; color: var(--clair-doux); }
.objet-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.25rem; margin-top: 0.5rem; }
.objet-photos img, .objet-photos i { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--rayon-s); object-fit: cover; }
.objet-photos i { background: rgba(255, 255, 255, 0.08); }
.objet-recherche { --derive: 14s; --retard: -9s; --amplitude: 8px; display: grid; gap: 0.45rem; }
.objet-loupe { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.15rem; padding: 0.45rem 0.7rem; border-radius: var(--rayon-pilule); background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px var(--verre-bord); font-size: 0.7rem; color: var(--clair); }
.objet-loupe svg { flex: none; width: 0.95rem; height: 0.95rem; fill: var(--violet-clair); }
.objet-resultat { position: relative; padding: 0.6rem 0.75rem; border-radius: var(--rayon-m); background: linear-gradient(135deg, rgba(124, 58, 237, 0.35), rgba(56, 189, 248, 0.2)); box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.5); }
.objet-resultat b { display: block; font-size: 0.8rem; color: var(--clair); }
.objet-resultat small { display: block; font-size: 0.64rem; color: var(--clair-doux); }
.objet-autre { display: grid; gap: 0.3rem; padding: 0.5rem 0.75rem; border-radius: var(--rayon-m); background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.objet-autre i { display: block; height: 5px; border-radius: var(--rayon-pilule); background: rgba(255, 255, 255, 0.1); }
.objet-autre i:last-child { width: 55%; }
.cycle-note { max-width: 44rem; margin: clamp(2rem, 4vw, 2.8rem) auto 0; text-align: center; font-size: clamp(1rem, 0.96rem + 0.3vw, 1.15rem); font-weight: 600; color: var(--clair); }

/* Le champ que seuls les robots remplissent */
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Les échanges : ce qu'on peut me demander, et ce que Google en fait */
.echanges-inner { display: grid; justify-items: stretch; text-align: center; }
.echanges-inner > * { margin-inline: auto; }
.echanges-inner > .sous-titre { max-width: 46rem; margin-block: 0 var(--air-objet); }
.echanges-inner > h2 { max-width: 24ch; }
.echanges-inner > .etiquette { width: fit-content; }
.echanges-chute { max-width: 48rem; margin-block: var(--air-chute) 0; font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem); font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; color: var(--clair); }
.echanges-inner > .flux { margin-top: var(--air-bloc); }
.telephone { position: relative; width: 100%; max-width: 19.5rem; margin-inline: auto; padding: 0.6rem 0.6rem 0.8rem; border-radius: var(--rayon-tel); background: linear-gradient(158deg, #39406A, #171D33 38%, #0B0F1E); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 44px 90px -44px rgba(0, 0, 0, 0.95), 0 0 70px -22px var(--halo-violet); }
.telephone::before { content: ""; position: absolute; z-index: 2; top: 0.6rem; left: 50%; width: 4.4rem; height: 1rem; translate: -50% 0; border-radius: var(--rayon-pilule); background: #05070F; }
.telephone::after { content: ""; position: absolute; top: 6rem; right: -2px; width: 3px; height: 3.2rem; border-radius: var(--rayon-pilule); background: linear-gradient(180deg, #4A5384, #2A3050); }
.telephone-ecran { overflow: hidden; border-radius: calc(var(--rayon-tel) - 0.6rem); background: linear-gradient(180deg, #0E1326, #080C1A); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.fil { margin: 0; }
.fil-entete { display: flex; align-items: center; gap: 0.65rem; padding: 1.85rem 0.9rem 0.7rem; background: rgba(255, 255, 255, 0.04); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.fil-logo { flex: none; width: 1.8rem; height: 1.8rem; fill: var(--whatsapp); }
.fil-entete b { display: block; font-size: 0.78rem; font-weight: 600; color: var(--clair); }
.fil-entete small { display: block; font-size: 0.65rem; color: var(--clair-doux); }
.fil-messages { display: grid; gap: 0.55rem; padding: 0.9rem 0.75rem 1.1rem; }
.bulle { position: relative; max-width: 90%; padding: 0.6rem 0.78rem 1.35rem; border-radius: var(--rayon-m); font-size: 0.83rem; line-height: 1.42; }
.bulle p { margin: 0; }
.bulle img { width: 100%; height: auto; margin-bottom: 0.5rem; border-radius: var(--rayon-s); }
.bulle time { position: absolute; right: 0.7rem; bottom: 0.45rem; font-size: 0.58rem; letter-spacing: 0.04em; color: var(--clair-doux); font-variant-numeric: tabular-nums; }
.bulle-lui { justify-self: start; color: var(--clair-doux); background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); border-bottom-left-radius: var(--rayon-s); }
.bulle-moi { justify-self: end; color: var(--clair); background: linear-gradient(135deg, rgba(124, 58, 237, 0.5), rgba(56, 189, 248, 0.3)); box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.4); border-bottom-right-radius: var(--rayon-s); }

/* Pages légales : le même ciel, un texte long qui se lit sans fatigue */
.legale { padding-block: clamp(2.5rem, 7vh, 4rem) clamp(3.5rem, 9vh, 5.5rem); }
.legale-inner { width: min(100% - 2 * clamp(1rem, 4vw, 3rem), 46rem); margin-inline: auto; }
.legale h1 { margin-bottom: 0.25em; font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.2rem); }
.legale-maj { margin: 0 0 2.2rem; font-size: 0.82rem; color: var(--clair-doux); }
.legale h2 { margin: 2.6rem 0 0.6rem; font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.65rem); }
.legale h3 { margin: 1.7rem 0 0.4rem; font-size: 1rem; color: var(--violet-clair); }
.legale p { max-width: 68ch; color: var(--clair-doux); }
.legale strong { color: var(--clair); }
.legale ul { display: grid; gap: 0.5rem; margin: 0.9rem 0 1.3rem; }
.legale li { position: relative; padding-left: 1.15rem; color: var(--clair-doux); }
.legale li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--bleu); box-shadow: 0 0 6px var(--halo-bleu); }
.legale code { padding: 0.1em 0.45em; border-radius: var(--rayon-s); background: var(--verre); color: var(--clair); font-size: 0.92em; }
.legale .panneau { margin: 1.4rem 0 1.8rem; padding: 1.5rem 1.6rem; }
.legale .panneau ul { margin: 0; }
.legale-retour { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 3rem; color: var(--bleu); font-weight: 600; text-decoration: none; }
.legale-retour:hover { text-decoration: underline; }

/* Le rapport mensuel : la preuve que le mensuel achète du travail */
.rapport-inner { display: grid; justify-items: stretch; text-align: center; }
.rapport-inner > * { margin-inline: auto; }
.rapport-inner > .etiquette { width: fit-content; }
.rapport-inner > .sous-titre { max-width: 48rem; margin-block: 0 var(--air-objet); }
.tableau-bord { width: 100%; max-width: 56rem; margin: 0 auto; overflow: hidden; text-align: left; border-radius: var(--rayon-l); background: var(--verre-dense); box-shadow: inset 0 0 0 1px var(--verre-bord), inset 0 1px 0 var(--verre-eclat), 0 44px 90px -46px rgba(0, 0, 0, 0.95), 0 0 70px -26px var(--halo-violet); animation: apesanteur 17s ease-in-out infinite; --amplitude: 9px; }
.tb-entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 1rem; padding: 0.9rem 1.2rem; border-bottom: 1px solid var(--trait-clair); background: rgba(255, 255, 255, 0.05); }
.tb-qui b { font-size: 0.92rem; color: var(--clair); }
.tb-qui small { margin-left: 0.5rem; font-size: 0.72rem; color: var(--clair-doux); }
.tb-mois { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--violet-clair); }
.tb-corps { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; padding: 1.2rem; }
.tb-chiffres { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; }
.tb-kpi { position: relative; margin: 0; padding: 0.9rem 1rem; border-radius: var(--rayon-m); background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px var(--verre-bord); }
.tb-kpi b { display: block; font-size: 1.8rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--clair); font-variant-numeric: tabular-nums; }
.tb-kpi small { display: block; margin-top: 0.2rem; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clair-doux); }
.tb-hausse { position: absolute; top: 0.8rem; right: 1rem; font-style: normal; font-size: 0.7rem; font-weight: 700; color: var(--bleu); }
.tb-titre { margin: 0 0 0.7rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--clair-doux); }
.tb-graphe, .tb-sources, .tb-fait { padding: 1rem; border-radius: var(--rayon-m); background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.tb-barres { display: flex; align-items: flex-end; gap: 0.5rem; height: 7rem; }
.tb-barres i { position: relative; flex: 1; height: var(--h); border-radius: var(--rayon-s) var(--rayon-s) 2px 2px; background: linear-gradient(180deg, rgba(167, 139, 250, 0.75), rgba(124, 58, 237, 0.25)); }
.tb-barres .tb-dernier { background: var(--degrade-neon); box-shadow: 0 0 22px -4px var(--halo-violet); }
.tb-barres span { position: absolute; left: 0; right: 0; bottom: -1.2rem; text-align: center; font-size: 0.6rem; color: var(--clair-doux); }
.tb-barres { margin-bottom: 1.2rem; }
.tb-sources ul { display: grid; gap: 0.6rem; }
.tb-sources li { display: grid; grid-template-columns: 1fr 4.5rem auto; align-items: center; gap: 0.6rem; font-size: 0.78rem; color: var(--clair-doux); }
.tb-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-jauge { height: 6px; border-radius: var(--rayon-pilule); background: rgba(255, 255, 255, 0.09); }
.tb-jauge i { display: block; width: var(--p); height: 100%; border-radius: var(--rayon-pilule); background: var(--bleu); }
.tb-jauge .tb-ia { background: var(--violet-clair); box-shadow: 0 0 10px var(--halo-violet); }
.tb-sources b { font-size: 0.78rem; color: var(--clair); font-variant-numeric: tabular-nums; }
.tb-fait { grid-column: 1 / -1; }
.tb-fait ul { display: grid; gap: 0.55rem; }
.tb-fait li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.85rem; color: var(--clair-doux); }
.tb-fait svg { flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.1rem; fill: none; stroke: var(--bleu); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rapport-chute { max-width: 46rem; margin-block: var(--air-chute) 0; font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem); font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; color: var(--clair); }

/* Métiers */
.metiers { padding-block: clamp(3rem, 7vw, 4.5rem); }
.metiers-inner { display: grid; grid-template-columns: auto 1fr; gap: 2rem 3rem; align-items: center; }
.metiers h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); margin: 0; }
.metiers-liste { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.metiers-liste a { display: inline-flex; align-items: center; padding: 0.68rem 1.2rem; border-radius: var(--rayon-pilule); background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(56, 189, 248, 0.11)); -webkit-backdrop-filter: blur(var(--flou)); backdrop-filter: blur(var(--flou)); color: var(--clair); font-weight: 600; font-size: 0.92rem; text-decoration: none; box-shadow: inset 0 0 0 1px var(--verre-bord), inset 0 1px 0 var(--verre-eclat); transition: background var(--duree) var(--sortie), box-shadow var(--duree) var(--sortie), transform var(--duree) var(--sortie); }
.metiers-liste a:hover { background: var(--degrade-neon); color: var(--blanc); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 30px var(--halo-violet); transform: translateY(-2px); }

/* Résultats */
.ecrans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; align-items: start; margin-top: var(--air-objet); }
.ecran { position: relative; margin: 0; transition: transform var(--duree) var(--sortie), box-shadow var(--duree) var(--sortie); }
.ecran:has(a) { cursor: pointer; }
.ecran:has(a:hover), .ecran:has(a:focus-visible) { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--verre-bord), inset 0 1px 0 var(--verre-eclat), 0 36px 70px -34px rgba(0, 0, 0, 0.95), 0 0 60px -20px var(--halo-violet); }
.ecran:has(a:focus-visible) { outline: 3px solid var(--bleu); outline-offset: 3px; }
.ecran a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ecran-barre { display: flex; align-items: center; gap: 0.5rem; padding: 0.8rem 1.1rem 0.6rem; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--violet-clair); }
.ecran-barre::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--bleu); box-shadow: 0 0 8px var(--halo-bleu); animation: battement 4.2s ease-in-out infinite; }
.ecran:nth-child(2n) .ecran-barre::before { animation-duration: 5.9s; }
.ecran:nth-child(3n) .ecran-barre::before { animation-duration: 3.3s; animation-delay: -1.4s; }
.ecran img { width: 100%; height: auto; }
.ecran figcaption { padding: 0.9rem 1.1rem 1.2rem; font-size: 0.9rem; }
.ecran figcaption b { display: block; font-size: 1rem; }
.ecran-attente { display: block; margin-top: 0.5rem; color: var(--clair-doux); font-weight: 600; }
.ecran a { display: inline-block; margin-top: 0.6rem; color: var(--bleu); font-weight: 600; text-decoration: none; }
.ecran a:hover { text-decoration: underline; }
.ecran a:focus-visible { outline: none; }
/* L'offre : la seule chose réelle de la page, une facture en papier, haut perforé et bas déchiré */
.offre-inner { display: grid; justify-items: stretch; gap: clamp(2.5rem, 5vw, 3.5rem); margin-top: var(--air-objet); }
.bordereau { width: 100%; max-width: 31rem; margin-inline: auto; }
.offre-texte { width: 100%; max-width: 44rem; margin-inline: auto; text-align: center; }
.offre-points li { border-bottom: 1px solid var(--trait-clair); }
.offre-phrase { max-width: 40rem; margin: 1.4rem 0 0; }
.bordereau { position: relative; padding: 2.4rem 1.9rem 2rem; color: var(--encre); background: var(--papier-bas) url("../images/facture-papier.webp") center / 100% 100% no-repeat; box-shadow: 0 40px 90px -45px rgba(0, 0, 0, 0.95), 0 0 60px -24px var(--halo-violet); }
.bordereau::before { content: ""; position: absolute; top: 9px; left: 12px; right: 12px; height: 7px; background: radial-gradient(circle at 7px 3.5px, var(--espace) 2.6px, rgba(5, 8, 22, 0) 3.1px) 0 0 / 17px 7px repeat-x; }
.bordereau::after { content: ""; position: absolute; left: -1px; right: -1px; bottom: -6px; height: 6px; background: conic-gradient(from 135deg at 50% 0, var(--papier-bas) 0 90deg, transparent 0) 0 0 / 12px 6px repeat-x; }
.bordereau-entete { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.3rem 1rem; margin: 0 0 1.2rem; padding-right: 5.5rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--papier-bord); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--violet); }
.bordereau-lignes li { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.3rem 0; font-size: 0.92rem; color: var(--encre-douce); }
.bordereau-lignes li::after { content: ""; order: 1; flex: 1 1 1rem; min-width: 1rem; align-self: center; border-bottom: 1px dotted var(--papier-bord); transform: translateY(-2px); }
.bordereau-lignes span { order: 0; flex: 0 1 auto; }
.bordereau-lignes b { order: 2; flex: none; color: var(--violet); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; }
.bordereau-poste { padding: 0.5rem 0 0.35rem; color: var(--encre); font-weight: 600; }
.bordereau-poste b { font-size: 1.1rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.bordereau-poste b i { font-style: normal; font-size: 0.72rem; letter-spacing: 0; }
.bordereau-poste::after { display: none; }
.bordereau-vie { margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid var(--papier-bord); }
.bordereau-total { display: flex; justify-content: space-between; align-items: baseline; margin: 1.3rem 0 0; padding-top: 1rem; border-top: 2px solid var(--violet); font-weight: 600; color: var(--encre); }
.bordereau-total b { font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; color: var(--violet); font-variant-numeric: tabular-nums; }
.bordereau-mention { margin: 0.8rem 0 0; font-size: 0.76rem; color: var(--encre-douce); }
.sceau { position: absolute; top: 1.5rem; right: 1.2rem; width: 84px; height: 84px; transform: rotate(-11deg); }
.sceau svg { width: 100%; height: 100%; }
.sceau circle { fill: none; stroke: var(--violet); stroke-width: 1; }
.sceau .sceau-interieur { stroke-dasharray: 2 3; }
.sceau text { fill: var(--violet); font-family: var(--police); font-size: 8.5px; font-weight: 700; letter-spacing: 0.18em; }
.sceau path { fill: none; }
.offre-phrase { font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.65rem); font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; }
.offre-points { display: grid; gap: 0; margin: 1.4rem 0 2rem; border-top: 1px solid var(--trait-clair); }
.offre-points li { padding: 1rem 0; border-bottom: 1px solid var(--trait-clair); color: var(--clair-doux); }
.offre-points strong { color: var(--clair); }
.offre-lien { margin: 1.8rem 0 0; font-size: 0.92rem; color: var(--clair-doux); }
.offre-lien a { color: var(--bleu); font-weight: 600; text-decoration: none; }
.offre-lien a:hover { text-decoration: underline; }

/* Les jalons : une frise, pas trois vignettes de plus */
.jalons { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3rem); margin-top: var(--air-objet); }
.jalons::before { content: ""; position: absolute; top: 0.5rem; left: 14%; right: 14%; height: 2px; border-radius: var(--rayon-pilule); background: linear-gradient(90deg, transparent, var(--violet-clair) 10%, var(--bleu) 90%, transparent); }
.jalon { position: relative; padding-top: 2.4rem; text-align: center; }
.jalon::before { content: ""; position: absolute; top: 0; left: 50%; width: 1.1rem; height: 1.1rem; translate: -50% 0; border-radius: 50%; background: var(--degrade-neon); box-shadow: 0 0 0 5px var(--espace), 0 0 18px var(--halo-violet); }
.jalon-quand { display: block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--violet-clair); }
.jalon b { display: block; margin-top: 0.35rem; font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem); letter-spacing: -0.02em; color: var(--clair); }
.jalon p { max-width: 24rem; margin: 0.5rem auto 0; font-size: 0.9rem; color: var(--clair-doux); }

/* Questions */
.faq-inner { display: grid; justify-items: stretch; text-align: center; gap: clamp(1.6rem, 3vw, 2.4rem); margin-top: 1rem; }
.faq-inner > div:first-child { display: grid; justify-items: center; gap: 0.6rem; }
.faq-inner > div:first-child > * { margin: 0; }
.faq { width: 100%; max-width: 52rem; margin-inline: auto; text-align: left; }
.faq { padding: 0.4rem 1.5rem; }
.faq details { border-bottom: 1px solid var(--trait-clair); }
.faq details:last-child { border-bottom: 0; }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.05rem 0; font-weight: 600; color: var(--clair); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border: 1px solid var(--verre-bord); border-radius: 50%; color: var(--violet-clair); font-weight: 400; transition: transform var(--duree) var(--sortie); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 1.2rem; max-width: 60ch; }

/* L'audit */
.audit-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.formulaire { display: grid; gap: 1.1rem; padding: clamp(1.5rem, 3vw, 2.3rem); }
.champ label, .case { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--violet-clair); }
.champ label { display: block; margin-bottom: 0.45rem; }
.champ input, .champ select { width: 100%; min-height: 3rem; padding: 0.7rem 0.9rem; border: 1px solid var(--verre-bord); border-radius: var(--rayon-s); background: rgba(255, 255, 255, 0.07); color: var(--clair); font: inherit; }
.champ input::placeholder { color: var(--clair-doux); opacity: 1; }
.champ input:focus, .champ select:focus { outline: none; border-color: var(--violet-clair); box-shadow: 0 0 0 4px var(--halo-violet); }
.case { display: flex; align-items: flex-start; gap: 0.75rem; text-transform: none; letter-spacing: 0; font-size: 0.9rem; font-weight: 400; color: var(--clair-doux); }
.case input { flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; accent-color: var(--violet-clair); }
.case a { color: var(--bleu); }
.audit-note { margin: 0.6rem 0 0; font-size: 0.82rem; }

/* Se joindre : pour qui ne veut pas attendre une réponse à un formulaire */
.joindre { display: grid; gap: 0.7rem; margin: 1.8rem 0 0; }
.joindre a { display: flex; align-items: center; gap: 0.9rem; padding: 0.85rem 1.1rem; border-radius: var(--rayon-l); background: var(--verre); -webkit-backdrop-filter: blur(var(--flou)); backdrop-filter: blur(var(--flou)); box-shadow: inset 0 0 0 1px var(--verre-bord), inset 0 1px 0 var(--verre-eclat); color: var(--clair); text-decoration: none; transition: box-shadow var(--duree) var(--sortie), transform var(--duree) var(--sortie); }
.joindre a:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--violet-clair), 0 0 24px var(--halo-violet); }
.joindre svg { flex: none; width: 1.6rem; height: 1.6rem; }
.joindre b { display: block; font-size: 1.02rem; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.joindre small { display: block; font-size: 0.78rem; color: var(--clair-doux); }
.joindre-vite { background: linear-gradient(135deg, rgba(37, 211, 102, 0.2), rgba(56, 189, 248, 0.12)); box-shadow: inset 0 0 0 1px rgba(37, 211, 102, 0.45), inset 0 1px 0 var(--verre-eclat); }
.joindre-vite svg { fill: var(--whatsapp); }
.joindre-vite:hover { box-shadow: inset 0 0 0 1px var(--whatsapp), 0 0 24px rgba(37, 211, 102, 0.35); }
.joindre-trait svg { fill: none; stroke: var(--bleu); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.joindre-note { margin: 1rem 0 0; font-size: 0.86rem; color: var(--clair-doux); }

/* Pages métier : plus courtes que l'accueil, elles y ramènent */
.metier-heros { padding-block: clamp(2.2rem, 6vh, 3.5rem) clamp(1.8rem, 4vh, 2.6rem); }
.metier-heros h1 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.1rem); max-width: 20ch; }
.fil-ariane { display: inline-flex; align-items: center; gap: 0.6rem; margin: 0 0 1.2rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--violet-clair); }
.fil-ariane a { color: var(--clair-doux); text-decoration: none; }
.fil-ariane a:hover { color: var(--clair); }
.soucis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: clamp(2rem, 4vw, 3rem); }
.souci { padding: 1.5rem 1.4rem 1.6rem; }
.panneau .souci-rang { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; margin: 0 0 0.9rem; border-radius: 50%; background: var(--degrade-neon); color: var(--blanc); font-size: 0.82rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.souci p { margin: 0; font-size: 0.95rem; }
.partage { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 1.4rem; align-items: start; margin-top: clamp(2rem, 4vw, 3rem); }
.partage-vous { padding: 1.6rem 1.5rem; }
.partage-quoi { margin: 0 0 0.7rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--violet-clair); }
.partage-punch { margin: 0 0 0.7rem; font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--clair); }
.partage-moi { padding: 1.6rem 1.5rem; background: linear-gradient(155deg, rgba(124, 58, 237, 0.22), rgba(56, 189, 248, 0.1) 58%, rgba(255, 255, 255, 0.05)); box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.5), inset 0 1px 0 var(--verre-eclat), 0 34px 80px -46px rgba(0, 0, 0, 0.95), 0 0 50px -14px var(--halo-violet); }
.liste-cochee { display: grid; gap: 0.9rem; margin-top: 0.2rem; }
.liste-cochee li { display: flex; gap: 0.8rem; font-size: 0.95rem; color: var(--clair-doux); }
.coche { flex: none; width: 1.3rem; height: 1.3rem; margin-top: 0.15rem; fill: none; stroke: var(--bleu); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.metier-suite { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: clamp(2rem, 4vw, 2.8rem); }


.pied { padding-block: 2.5rem 1rem; border-top: 1px solid var(--trait-clair); font-size: 0.9rem; color: var(--clair-doux); }
.pied-inner { display: grid; gap: 1rem; }
.pied nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; }
.pied a { color: var(--clair-doux); text-decoration: none; }
.pied a:hover { color: var(--bleu); }

/* L'apparition au défilement passe par `translate`, jamais par `transform` : l'apesanteur occupe déjà celui-ci */
.revele { opacity: 0; translate: 0 14px; transition: opacity 700ms var(--sortie), translate 700ms var(--sortie); }
.revele.est-visible { opacity: 1; translate: 0 0; }

/* Le bandeau de consentement : une lame de verre en bas, deux boutons de même poids */
.bandeau-cookies { position: fixed; left: 50%; bottom: 1rem; z-index: 90; width: min(100% - 2rem, 62rem); translate: -50% 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem 1.5rem; padding: 1rem 1.2rem; color: var(--clair); background: rgba(5, 8, 22, 0.72); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); border: 1px solid var(--verre-bord); border-radius: var(--rayon-l); box-shadow: inset 0 1px 0 var(--verre-eclat), 0 30px 70px -30px rgba(0, 0, 0, 0.95); }
.bandeau-cookies:focus { outline: 3px solid var(--bleu); outline-offset: 3px; }
.bandeau-cookies p { flex: 1 1 28rem; margin: 0; font-size: 0.92rem; color: var(--clair-doux); }
.bandeau-cookies a { color: var(--bleu); }
.bandeau-actions { display: flex; gap: 0.6rem; }
.bandeau-actions button { min-height: 2.6rem; padding: 0.55rem 1.2rem; border: 0; border-radius: var(--rayon-pilule); font: inherit; font-weight: 600; cursor: pointer; }
.bandeau-actions [data-choix="refus"] { background: var(--verre-dense); color: var(--clair); box-shadow: inset 0 0 0 1px var(--verre-bord); }
.bandeau-actions [data-choix="accord"] { background: var(--degrade-neon); color: var(--blanc); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.bandeau-actions button:hover { transform: translateY(-2px); transition: transform var(--duree) var(--sortie); }
.lien-cookies { padding: 0; border: 0; background: none; color: var(--clair-doux); font: inherit; cursor: pointer; }
.lien-cookies:hover { color: var(--bleu); }

/* Sections sous la ligne de flottaison : rendues seulement à l'approche */
#comment .conteneur > .etiquette { display: flex; width: fit-content; margin-inline: auto; }
#comment .conteneur > h2 { margin-inline: auto; text-align: center; }
#comment .conteneur > h2 { max-width: 22ch; }
@media (min-width: 1001px) {
  .metaphore .objet-barre { font-size: 0.68rem; }
  .metaphore .objet-nom { font-size: 0.94rem; }
  .metaphore .objet-nom svg { width: 1.15rem; height: 1.15rem; }
  .metaphore .objet-avis { font-size: 0.8rem; }
  .metaphore .objet-etoiles svg { width: 0.88rem; height: 0.88rem; }
  .metaphore .objet-ouvert { font-size: 0.78rem; }
  .metaphore .objet-neuf { font-size: 0.64rem; }
  .metaphore .objet-plein { grid-template-columns: 1fr; gap: 0.4rem; }
  .metaphore .objet-plein li { padding-left: 1rem; font-size: 0.84rem; }
  .metaphore .carnet-titre { font-size: 0.74rem; }
  .metaphore .carnet-liste svg { width: 1.35rem; height: 1.35rem; }
  .metaphore .carnet-liste b { font-size: 0.9rem; }
  .metaphore .carnet-liste span { font-size: 0.8rem; }
  .metaphore .mini-nav b { font-size: 0.6rem; }
  .metaphore .mini-titre { bottom: 1.75rem; font-size: 0.72rem; }
  .metaphore .mini-bouton { font-size: 0.55rem; }
}
@media (min-width: 1001px) {
  .heros { display: grid; align-content: center; min-height: calc(100svh - var(--entete-haut)); }
}
.section:not(.chauffeur) { content-visibility: auto; contain-intrinsic-size: auto 900px; }

@media (max-width: 1000px) {
  :root { --flou: 18px; }
  .heros-inner { grid-template-columns: 1fr; }
  .portrait-scene { margin: 0; }
  .ecrans { grid-template-columns: repeat(2, 1fr); }
  .offre-inner { grid-template-columns: 1fr; }
  .faq-inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .audit-inner { grid-template-columns: 1fr; }
  .metiers-inner { grid-template-columns: 1fr; }
  .balance { grid-template-columns: 1fr; }
  .tb-corps { grid-template-columns: 1fr; }
  .tb-chiffres { grid-template-columns: 1fr; }
  .tableau-bord { animation: none; }
  .flux { grid-template-columns: 1fr; justify-items: center; gap: 1rem; }
  .metaphore { grid-template-columns: minmax(0, 20rem); grid-template-rows: none; gap: 2.4rem; }
  .metaphore .flux-etape { grid-row: auto; grid-template-rows: none; gap: 0.9rem; }
  .metaphore .flux-mot { align-self: auto; }
  .metaphore .objet { width: min(100%, 17rem); }
  .metaphore .flux-mot { order: -1; }
  .flux { grid-template-columns: minmax(0, 24rem); }
  .flux-etape { width: min(100%, 22rem); }
  .flux-double { width: min(100%, 24rem); }
  .flux-fleche { transform: rotate(90deg); margin: 0.4rem 0; }
  .flux-fleche b { transform: rotate(-90deg); }
  .objet { animation: none; }
  .cycle { width: min(100%, 25rem); }
  .telephone { animation: none; }
  .navigation a:not(.principal) { display: none; }
  .soucis { grid-template-columns: 1fr; }
  .partage { grid-template-columns: 1fr; }
  /* Sur petit écran, la dérive continue coûterait plus cher qu'elle ne rapporte : le verre seul suffit */
.ecran, .balance-cote, .cadran, .bordereau { animation: none; }
}
@media (max-width: 767px) {
  :root { --entete-haut: 58px; }
  .entete-inner { gap: 0.7rem; }
  .marque { font-size: 0.95rem; }
  .appel { padding: 0.4rem 0.7rem; font-size: 0.8rem; }
  .heros h1 { font-size: clamp(2.3rem, 1.1rem + 7vw, 3.2rem); }
  .heros-inner { display: flex; flex-direction: column; gap: 0; }
  .heros-texte { display: contents; }
  .tarif { order: 1; margin-top: 1.4rem; }
  .portrait { order: 2; width: 100%; margin-top: 1.2rem; }
  .heros-actions { order: 3; margin-top: 1.3rem; }
  .heros .heros-actions .bouton-contour { display: none; }
.ecrans { grid-template-columns: 1fr; }
  .metiers-inner { justify-items: center; text-align: center; }
  .metiers-liste { justify-content: center; }
  .cadrans { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .cadran { padding: 0.8rem 0.5rem 0.9rem; }
  .cadran b { font-size: 1.15rem; }
  .bordereau { padding: 2.2rem 1.3rem 1.8rem; }
  .bordereau-entete { padding-right: 4rem; }
  .sceau { width: 70px; height: 70px; top: 1.2rem; right: 0.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .saut { display: none; }
.espace::after, .etoiles, .ecran, .jalon, .balance-cote, .cadran, .bordereau, .telephone, .objet, .tableau-bord { animation: none; }
  .ecran-barre::before { animation: none; }
  .jauge-colonnes .colonnes line, .jauge-jours .jours line, .jauge-vitesse .aiguille, .jauge-radar .balai, .jauge-radar .echos circle { animation: none; }
  .jauge-colonnes .colonnes line { transform: scaleY(0.72); }
  .jauge-colonnes .colonnes line:nth-child(2n) { transform: scaleY(1); }
  .jauge-jours .jours line, .jauge-radar .echos circle { opacity: 1; }
  .jauge-vitesse .aiguille { transform: rotate(21deg); }
  html.saut-en-cours .heros-texte > *, html.saut-en-cours .portrait, html.saut-en-cours .entete, html.saut-en-cours main > :not(.heros) { opacity: 1; }
  html.saut-arrive .espace { animation: none; }
  .revele { opacity: 1; translate: none; transition: none; }
}

/* Sur un écran étroit, appeler prime sur le formulaire : le bouton cède la place au numéro */
@media (max-width: 560px) {
  .navigation .principal { display: none; }
}