/* Kveloz — page de la marque à la racine du domaine (maquette « L'appli » d'octobre 2026).
   Fond ivoire, titres Bricolage Grotesque, texte Plus Jakarta Sans ; l'orange appartient à KV Eats, le kraft à KV Transport.
   Les deux scènes animées (cloche KV Eats, carton KV Transport) sont dans les cartes « Services » ; le camion roule dans « Où nous sommes ». */
@font-face { font-family: "Jakarta"; src: url("/fonts/PlusJakartaSans-Medium.ttf") format("truetype"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Jakarta"; src: url("/fonts/PlusJakartaSans-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Jakarta"; src: url("/fonts/PlusJakartaSans-ExtraBold.ttf") format("truetype"); font-weight: 800; font-display: swap; }
/* optional : police des titres (préchargée) utilisée si elle arrive avant l'affichage, sinon dès la visite suivante —
   le grand titre du haut de page ne change plus de nombre de lignes en cours de chargement (audit du 25/10) */
@font-face { font-family: "Bricolage"; src: url("/fonts/BricolageGrotesque-latin.woff2") format("woff2"); font-weight: 200 800; font-display: optional; }

:root {
  --ivoire: #F2EBDD; --ivoire-2: #FAF6EE; --ivoire-3: #E8DEC9;
  --orange: #F28C28; --orange-f: #A0520C; --orange-p: #FDEBD9;
  --kraft: #C99A66; --kraft-f: #8E6436; --kraft-p: #E7D2B6;
  --charbon: #171715; --charbon-2: #26251F; --gris: #5E584E; --gris-n: #B9B0A0;
  --titre: "Bricolage", "Jakarta", system-ui, sans-serif;
  --texte: "Jakarta", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--ivoire); color: var(--charbon); font: 500 16px/1.6 var(--texte); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 31; background: var(--ivoire); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--titre); text-wrap: balance; margin: 0; line-height: 1.04; letter-spacing: -.02em; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.l { max-width: 1180px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
section { position: relative; }
.evitement { position: absolute; left: -999px; top: 8px; z-index: 50; padding: 10px 14px; border-radius: 10px; background: var(--charbon); color: var(--ivoire); }
.evitement:focus { left: 12px; }
.surtitre { display: inline-flex; align-items: center; gap: 8px; font: 700 12px var(--texte); letter-spacing: .14em; text-transform: uppercase; color: var(--orange-f); }
.surtitre::before { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
.h2 { font-size: clamp(32px, 4.6vw, 52px); font-weight: 800; }
.sous { color: var(--gris); font-size: 18px; max-width: 36em; }
.tete { display: flex; flex-direction: column; gap: 14px; margin-bottom: 40px; }
.tete.c { align-items: center; text-align: center; }
mark { background: none; color: var(--orange-f); position: relative; }
mark::after { content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: .14em; background: var(--orange); opacity: .4; border-radius: 9px; }
.fibre { background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 3px, rgba(0,0,0,.035) 3px 6px), radial-gradient(circle at 20% 30%, rgba(255,255,255,.08), transparent 40%), radial-gradient(circle at 80% 70%, rgba(0,0,0,.06), transparent 45%); }

/* Boutons et magasins d'applications */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 700 15px var(--texte); padding: 14px 22px; border-radius: 999px; white-space: nowrap; transition: transform .25s, box-shadow .25s; }
.btn:hover { transform: translateY(-3px); box-shadow: 0 12px 20px -10px rgba(0,0,0,.45); }
.btn--noir { background: var(--charbon); color: var(--ivoire); }
.btn--clair { background: var(--ivoire-2); color: var(--charbon); box-shadow: inset 0 0 0 1.5px var(--ivoire-3); }
.stores { display: flex; gap: 10px; flex-wrap: wrap; }
.store { display: flex; align-items: center; gap: 10px; background: var(--charbon); color: var(--ivoire); border-radius: 13px; padding: 9px 18px 9px 13px; transition: transform .25s; }
a.store:hover { transform: translateY(-3px); }
.store svg { width: 24px; height: 24px; fill: currentColor; flex: none; }
.store small { display: block; font-size: 10px; opacity: .75; line-height: 1.1; }
.store b { display: block; font-size: 16px; line-height: 1.15; }
.store--clair { background: var(--ivoire); color: var(--charbon); }
.store--bientot { opacity: .7; }

/* En-tête collant, barre de lecture */
.ent { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; transition: background .3s, box-shadow .3s; }
/* En-tête transparent sur la vidéo, tant que la page n'a pas défilé */
.ent:not(.colle) .ent__logo img { filter: brightness(0) invert(.94) sepia(.12); }
.ent:not(.colle) .nav, .ent:not(.colle) .langues button { color: rgba(242, 235, 221, .82); }
.ent:not(.colle) .nav a:hover, .ent:not(.colle) .nav a.actif { color: var(--ivoire); }
.ent:not(.colle) .langues { box-shadow: inset 0 0 0 1.5px rgba(242, 235, 221, .35); }
.ent:not(.colle) .langues button[aria-pressed="true"] { background: var(--ivoire); color: var(--charbon); }
.ent:not(.colle) .ent__cta { background: var(--ivoire); color: var(--charbon); }
.ent.colle { background: rgba(242, 235, 221, .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(23, 23, 21, .08); }
.ent__ligne { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; }
/* Logo qui alterne : les trois images empilées dans une boîte de largeur fixe (pas de saut de mise en page) */
.ent__logo { display: block; }
.logos { position: relative; display: block; width: 72px; height: 38px; perspective: 400px; }
.logos img { position: absolute; left: 0; top: 0; height: 38px; width: auto; max-width: 72px; object-fit: contain; object-position: left center;
  opacity: 0; transform: translateY(45%) rotateX(-70deg); transform-origin: 50% 50% -10px;
  transition: opacity .55s ease, transform .65s cubic-bezier(.2, .8, .2, 1); backface-visibility: hidden; }
.logos img.on { opacity: 1; transform: none; }
.logos img.parti { opacity: 0; transform: translateY(-45%) rotateX(70deg); }
.nav { display: flex; gap: 26px; font-weight: 600; font-size: 14px; color: var(--gris); }
.nav a { position: relative; transition: color .2s; }
.nav a:hover, .nav a.actif { color: var(--charbon); }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.nav a:hover::after, .nav a.actif::after { transform: scaleX(1); }
.ent__droite { display: flex; gap: 10px; align-items: center; }
.langues { display: flex; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--ivoire-3); }
.langues button { border: 0; background: none; color: var(--gris); font: 700 12px var(--texte); padding: 6px 9px; border-radius: 999px; cursor: pointer; }
.langues button[aria-pressed="true"] { background: var(--charbon); color: var(--ivoire); }
.ent__cta { padding: 11px 18px; font-size: 14px; }
.progression { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--orange); width: 0; }

/* Haut de page */
.heros { position: relative; text-align: center; overflow: hidden; background: var(--charbon); color: var(--ivoire);
  /* Passe sous l'en-tête (hauteur mesurée par marque.js) et remplit l'écran */
  margin-top: calc(-1 * var(--h-ent, 64px)); min-height: 100vh; min-height: 100svh;
  display: grid; align-items: center; padding-block: calc(var(--h-ent, 64px) + 40px) 72px; }
.heros__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; background: var(--charbon) url(/video/heros_large.webp) center / cover; }
@media (max-width: 700px) { .heros__video { background-image: url(/video/heros_mobile.webp); } }
/* Couleurs de la vidéo intactes : seulement un léger dégradé tout en haut, derrière l'en-tête transparent ; le texte porte sa propre ombre */
.heros__voile { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--h-ent, 64px) + 60px); z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,0)); }
.heros .surtitre, .heros h1, .heros .sous { text-shadow: 0 2px 4px rgba(0,0,0,.55), 0 6px 28px rgba(0,0,0,.6); }
.heros .sous { font-weight: 600; }
.ent:not(.colle) .nav, .ent:not(.colle) .langues button { text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.heros h1, .heros .sous { color: var(--ivoire); }
.heros .surtitre { color: var(--orange); }
.heros .mots span:nth-child(2), .heros .mots span:nth-child(3) { color: #E2BC8E; }
.heros .btn--noir { background: var(--orange); color: var(--charbon); }
.heros .btn--clair { background: rgba(242, 235, 221, .08); color: var(--ivoire); box-shadow: inset 0 0 0 1.5px rgba(242, 235, 221, .45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
/* Fond du haut de page : trame de points très discrète, qui s'estompe vers les bords ; un anneau fin derrière le téléphone */
@keyframes tourne { to { transform: rotate(360deg); } }
.heros .l { position: relative; }
.heros h1 { font-size: clamp(40px, 7vw, 84px); font-weight: 800; max-width: 11em; margin: 14px auto 0; }
/* Le mot qui change : orange pour la livraison de repas, kraft pour les envois et déménagements */
.mots { display: inline-grid; vertical-align: bottom; overflow: hidden; padding-bottom: .06em; }
.mots span { grid-area: 1 / 1; color: var(--orange); transform: translateY(110%); opacity: 0; transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .5s; white-space: nowrap; }
.mots span:nth-child(2), .mots span:nth-child(3) { color: var(--kraft-f); }
.mots span.on { transform: none; opacity: 1; }
.mots span.parti { transform: translateY(-110%); opacity: 0; }
.heros .sous { margin: 18px auto 0; max-width: 40em; }
.heros .cta { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.scene-tel { position: relative; height: 640px; margin-top: 44px; }
.tel { position: absolute; left: 50%; top: 0; width: 300px; height: 632px; margin-left: -150px; border-radius: 46px; background: var(--charbon); padding: 11px; box-shadow: 0 50px 70px -30px rgba(0,0,0,.6), inset 0 0 0 2px #3A3833; z-index: 2; }
.tel::before { content: ""; position: absolute; left: 50%; top: 20px; width: 86px; height: 24px; margin-left: -43px; border-radius: 20px; background: var(--charbon); z-index: 3; }
.ecran { position: relative; height: 100%; border-radius: 36px; overflow: hidden; background: var(--ivoire-2); }
.ecran img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transform: scale(1.04); transition: opacity .7s ease, transform 1.2s ease; }
.ecran img.on { opacity: 1; transform: none; }
.points { display: flex; gap: 8px; justify-content: center; position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%); z-index: 3; }
.points button { width: 9px; height: 9px; border-radius: 9px; border: 0; background: var(--kraft); opacity: .5; padding: 0; cursor: pointer; transition: width .4s, opacity .4s, background .4s; }
.points button.on { width: 28px; opacity: 1; background: var(--charbon); }
.legende { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); z-index: 4; background: var(--charbon); color: var(--ivoire); font-weight: 700; font-size: 13px; padding: 8px 14px; border-radius: 999px; white-space: nowrap; box-shadow: 0 10px 20px -10px rgba(0,0,0,.5); }
.flottante { position: absolute; z-index: 3; background: var(--ivoire-2); border-radius: 20px; padding: 14px 16px; display: flex; gap: 12px; align-items: center; text-align: left; max-width: 280px; box-shadow: 0 22px 34px -18px rgba(0,0,0,.45); animation: flotte 5s ease-in-out infinite; animation-delay: var(--d); }
.flottante .ic { flex: none; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: var(--orange-p); overflow: hidden; color: var(--charbon); }
.flottante .ic img { width: 100%; height: 100%; object-fit: cover; }
.flottante b { display: block; font-size: 14px; }
.flottante small { display: block; font-size: 12px; color: var(--gris); line-height: 1.35; }
.f1 { left: 4%; top: 40px; } .f2 { left: 1%; top: 300px; } .f3 { right: 3%; top: 80px; } .f4 { right: 1%; top: 360px; }
.f2 .ic { background: var(--kraft-p); }
.f4 { background: var(--charbon); color: var(--ivoire); } .f4 small { color: var(--gris-n); } .f4 .ic { background: var(--charbon-2); color: var(--orange); }
.ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Confiance */
.confiance { background: var(--charbon); color: var(--ivoire); padding-block: 70px 46px; margin-top: -2px; }
.confiance .grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.conf { border-radius: 22px; padding: 22px; background: var(--charbon-2); box-shadow: inset 0 0 0 1px #34322B; transition: transform .35s, background .35s; }
.conf:hover { transform: translateY(-6px); background: #2E2C25; }
.conf .ic { width: 46px; height: 46px; border-radius: 14px; background: var(--orange); color: var(--charbon); display: grid; place-items: center; margin-bottom: 14px; }
.conf:nth-child(2) .ic { background: var(--kraft); } .conf:nth-child(4) .ic { background: var(--ivoire); }
.conf h2 { font-size: 19px; margin-bottom: 6px; }
.conf p { font-size: 14px; color: var(--gris-n); }

/* Bande qui défile : les restaurants qui nous font confiance, comme un mur de logos */
.bande { background: var(--ivoire-2); border-block: 1px solid var(--ivoire-3); padding-block: 16px 18px; overflow: hidden; }
.bande__titre { margin: 0 0 8px; text-align: center; font: 700 11px var(--texte); letter-spacing: .18em; text-transform: uppercase; color: var(--gris); }
.bande__defile { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.bande__defile > div { display: flex; width: max-content; align-items: center; animation: defile 48s linear infinite; }
.bande__defile:hover > div { animation-play-state: paused; }
.bande__mot { flex: none; display: inline-flex; align-items: center; gap: 44px; padding-right: 44px; height: 40px; color: var(--charbon); opacity: .72; white-space: nowrap; transition: opacity .3s; }
.bande__mot:hover { opacity: 1; }
.bande__mot::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--charbon); opacity: .3; }
.m1 { font: italic 700 22px "Playfair Display", Georgia, serif; }
.m2 { font: 800 15px "Playfair Display", Georgia, serif; letter-spacing: .2em; text-transform: uppercase; }
.m3 { font: 400 21px "Pacifico", cursive; }
.m4 { font: 400 28px "Bebas Neue", Impact, sans-serif; letter-spacing: .06em; }
.m5 { font: 400 23px "Lobster", cursive; }
.m6 { font: 300 17px var(--texte); letter-spacing: .3em; text-transform: uppercase; }
.m7 { font: 400 17px "Archivo Black", Impact, sans-serif; text-transform: uppercase; letter-spacing: -.01em; }

/* Services, avec les deux scènes animées */
.services { padding-block: 100px; }
.services .grille { display: grid; grid-template-columns: 1.1fr 1.1fr .9fr; gap: 18px; }
.serv { border-radius: 30px; padding: 28px 28px 0; display: flex; flex-direction: column; gap: 12px; overflow: hidden; position: relative; min-height: 600px; color: var(--charbon); transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.serv:hover { transform: translateY(-8px); }
.serv__logo { height: 44px; width: auto; align-self: flex-start; }
.pastille { display: inline-flex; align-self: flex-start; font: 800 12px var(--texte); letter-spacing: .12em; padding: 7px 12px; border-radius: 999px; background: var(--orange); color: var(--charbon); }
.serv h3 { font-size: 30px; }
.serv p { font-size: 15px; max-width: 26em; }
.serv .lien { font-weight: 800; display: inline-flex; gap: 8px; align-items: center; }
.serv .lien span { transition: transform .3s; } .serv:hover .lien span { transform: translateX(4px); }
.serv__scene { margin-top: auto; align-self: center; width: 100%; max-width: 380px; padding-bottom: 18px; }
.serv__scene svg { width: 100%; height: auto; display: block; overflow: visible; }
.s-eats { background: var(--orange); }
.s-trans { background-color: var(--kraft); }
.s-part { background: var(--charbon); color: var(--ivoire); }
.s-part p { color: var(--gris-n); }
.s-part .lien { color: var(--orange); }
/* Carte Partners : ticket de commande animé (boucle de 6 s) + indicateurs d'exemple */
.caisse { margin-top: auto; margin-bottom: 26px; display: flex; flex-direction: column; gap: 10px; }
.ticket { position: relative; display: flex; flex-direction: column; gap: 8px; background: var(--ivoire-2); color: var(--charbon); border-radius: 18px; padding: 14px 16px; box-shadow: 0 18px 30px -18px rgba(0,0,0,.7); animation: tk-cycle 6s cubic-bezier(.3, .7, .2, 1) infinite; }
.ticket__tete { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.ticket__tete small { color: var(--gris); }
.sonnerie { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--orange); flex: none; }
.sonnerie::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--orange); opacity: 0; animation: tk-sonne 6s ease-out infinite; }
.statuts { margin-left: auto; position: relative; display: grid; }
.st { grid-area: 1 / 1; justify-self: end; font: 800 11px var(--texte); letter-spacing: .04em; padding: 4px 9px; border-radius: 999px; white-space: nowrap; opacity: 0; }
.st1 { background: var(--orange); color: var(--charbon); animation: tk-st1 6s infinite; }
.st2 { background: var(--kraft-p); color: var(--charbon); animation: tk-st2 6s infinite; }
.st3 { background: var(--charbon); color: var(--ivoire); animation: tk-st3 6s infinite; }
.ticket__ligne, .ticket__total { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.ticket__ligne em { font-style: normal; font-weight: 800; color: var(--orange-f); }
.ticket__total { border-top: 1px dashed var(--ivoire-3); padding-top: 8px; font-weight: 700; }
.ticket__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; animation: tk-actions 6s infinite; }
.ticket__actions span { text-align: center; font: 800 13px var(--texte); padding: 9px; border-radius: 12px; }
.tk-refuser { box-shadow: inset 0 0 0 1.5px var(--ivoire-3); color: var(--gris); }
.tk-accepter { background: var(--charbon); color: var(--ivoire); animation: tk-appui 6s infinite; }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kpis span { background: var(--charbon-2); border-radius: 14px; padding: 10px; box-shadow: inset 0 0 0 1px #34322B; min-width: 0; }
.kpis b { display: block; font: 800 18px var(--titre); color: var(--ivoire); font-variant-numeric: tabular-nums; }
.kpis small { display: block; font-size: 11px; color: var(--gris-n); line-height: 1.3; }
.exemple { font-size: 10.5px; color: var(--gris-c); text-align: right; letter-spacing: .02em; }
@keyframes tk-cycle { 0% { opacity: 0; transform: translateY(26px) scale(.97); } 7%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-16px) scale(.98); } }
@keyframes tk-sonne { 0%, 6% { opacity: 0; transform: scale(.4); } 10% { opacity: .9; } 22% { opacity: 0; transform: scale(1.8); } 23%, 100% { opacity: 0; } }
@keyframes tk-st1 { 0%, 34% { opacity: 1; } 37%, 100% { opacity: 0; } }
@keyframes tk-st2 { 0%, 34% { opacity: 0; } 37%, 63% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes tk-st3 { 0%, 63% { opacity: 0; } 66%, 100% { opacity: 1; } }
@keyframes tk-appui { 0%, 27% { transform: none; background: var(--charbon); color: var(--ivoire); } 31% { transform: scale(.94); background: var(--orange); color: var(--charbon); } 35%, 100% { transform: none; background: var(--orange); color: var(--charbon); } }
@keyframes tk-actions { 0%, 36% { opacity: 1; } 42%, 100% { opacity: .35; } }
.kvplus { margin-top: 26px; }
.kvplus:empty { display: none; }

/* Fonctionnement */
.fct { padding-block: 100px; background: var(--ivoire-2); }
.duo { display: grid; grid-template-columns: 1fr 360px; gap: 60px; align-items: center; }
.etapes { display: flex; flex-direction: column; gap: 12px; }
.etape { display: flex; gap: 18px; align-items: flex-start; text-align: left; border: 0; font: inherit; color: inherit; background: transparent; border-radius: 22px; padding: 20px; cursor: pointer; position: relative; overflow: hidden; transition: background .35s; }
.etape .n { flex: none; width: 48px; height: 48px; border-radius: 16px; background: var(--ivoire-3); display: grid; place-items: center; font: 800 20px var(--titre); transition: background .35s, transform .35s; }
.etape strong { display: block; font: 800 22px/1.1 var(--titre); letter-spacing: -.02em; margin-bottom: 4px; }
.etape__texte { display: block; color: var(--gris); font-size: 15px; }
.etape .barre { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--orange); }
.etape.on { background: var(--ivoire); }
.etape.on .n { background: var(--orange); transform: rotate(-6deg) scale(1.05); }
.etape.on .barre { animation: charge 4.5s linear forwards; }
.fct .tel { position: relative; left: auto; margin: 0 auto; top: auto; }
.fct .tete.c { margin-bottom: 48px; }
.fct__panneau { transition: opacity .22s ease, transform .22s ease; }
.fct__panneau.sort { opacity: 0; transform: translateY(10px); }
.fct__droite { display: flex; flex-direction: column; align-items: center; gap: 20px; }
/* Sélecteur d'univers, version éditoriale : deux intitulés en grand sur un filet, soulignement de la couleur de l'univers sous l'actif */
.univers { display: flex; gap: 34px; justify-content: center; border-bottom: 1px solid var(--ivoire-3); padding-inline: 6px; }
.univers button { position: relative; border: 0; background: none; padding: 4px 2px 14px; font: 800 clamp(22px, 2.6vw, 30px)/1.05 var(--titre); letter-spacing: -.02em;
  color: var(--gris-c); cursor: pointer; transition: color .3s; }
.univers button:hover { color: var(--charbon); }
.univers button[aria-selected="true"] { color: var(--charbon); }
.univers button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 3px; background: var(--orange);
  transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.univers button[data-univers="transport"]::after { background: var(--kraft-f); transform-origin: right; }
.univers button[aria-selected="true"]::after { transform: scaleX(1); }
.univers button:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 4px; }
.u-point { display: none; }
.fct__marque { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding-left: 20px; }
.fct__marque img { height: 36px; width: auto; }
.fct__marque h3 { font-size: 26px; }
.duo--inverse { grid-template-columns: 360px 1fr; }
.duo--inverse > .tel { order: -1; }

/* Notre modèle */
.modele { padding-block: 100px; }
.manif { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: end; margin-bottom: 44px; }
.manif .tete { margin: 0; }
.manif > p { font-size: 18px; color: var(--gris); }
.engag { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.eng { border-radius: 28px; padding: 28px; background: var(--ivoire-2); box-shadow: inset 0 0 0 1.5px var(--ivoire-3); display: flex; flex-direction: column; gap: 10px; transition: transform .35s, box-shadow .35s; }
.eng:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1.5px var(--kraft), 0 24px 30px -22px rgba(23, 23, 21, .45); }
.eng .qui { font: 800 12px var(--texte); letter-spacing: .12em; text-transform: uppercase; color: var(--kraft-f); }
.eng h3 { font-size: 26px; }
.eng p { color: var(--gris); font-size: 15px; }
.eng .chiffre { font: 800 54px var(--titre); color: var(--orange-f); line-height: 1; }
.eng:nth-child(2) .chiffre { color: var(--kraft-f); }
.eng .chiffre small { font-size: 16px; color: var(--gris); font-family: var(--texte); font-weight: 600; }

/* L'application */
.appli { background: var(--charbon); color: var(--ivoire); padding-block: 100px; overflow: hidden; }
.appli .duo { grid-template-columns: 1fr 1fr; gap: 50px; }
.appli .tete { margin-bottom: 0; }
.appli .sous { color: var(--gris-n); }
.appli .surtitre { color: var(--orange); }
.atouts { list-style: none; padding: 0; margin: 26px 0 30px; display: flex; flex-direction: column; gap: 12px; }
.atouts li { display: flex; gap: 12px; align-items: center; font-weight: 600; }
.atouts li::before { content: "✓"; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--orange); color: var(--charbon); display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.roule { margin-top: 30px; border-radius: 24px; padding: 22px; background: var(--charbon-2); box-shadow: inset 0 0 0 1px #34322B; display: flex; gap: 16px; align-items: flex-start; }
.roule .ic { flex: none; width: 50px; height: 50px; border-radius: 16px; background: var(--kraft); color: var(--charbon); display: grid; place-items: center; }
.roule h3 { font-size: 20px; margin-bottom: 6px; }
.roule p { color: var(--gris-n); font-size: 14px; }
.eventail { position: relative; height: 600px; }
.eventail .tel { width: 250px; height: 526px; margin-left: -125px; top: 30px; border-radius: 40px; }
.eventail .tel .ecran { border-radius: 31px; }
.eventail .tel img { opacity: 1; transform: none; }
.eventail .t1 { transform: translateX(-170px) rotate(-9deg) scale(.88); z-index: 1; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.eventail .t3 { transform: translateX(170px) rotate(9deg) scale(.88); z-index: 1; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.eventail:not(.vu) .t1, .eventail:not(.vu) .t3 { transform: none; }
.eventail .t2 { z-index: 2; }

/* Notre histoire */
.histoire { padding-block: 100px; }
.recits { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.recit { border-radius: 30px; padding: 34px; position: relative; overflow: hidden; min-height: 340px; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; }
.recit > img { height: 40px; width: auto; align-self: flex-start; margin-bottom: auto; }
.recit .gros { position: absolute; right: 28px; top: 18px; font: 800 96px var(--titre); letter-spacing: -.04em; color: rgba(23, 23, 21, .1); line-height: 1; }
.recit h3 { font-size: 28px; max-width: 14em; }
.recit p { font-size: 15px; max-width: 34em; }
.r-eats { background: var(--orange-p); }
.r-trans { background-color: var(--kraft-p); }

/* Où nous sommes : le camion roule d'un pays à l'autre */
.ou { padding-block: 20px 100px; }
.chemin { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding: 30px 0 0; margin: 0; list-style: none; }
.chemin .trait { position: absolute; left: 16.6%; right: 16.6%; top: 52px; height: 4px; border-radius: 9px; background: var(--ivoire-3); }
.chemin .trait i { position: absolute; inset: 0; border-radius: 9px; background: repeating-linear-gradient(90deg, var(--orange) 0 18px, transparent 18px 30px); transform: scaleX(0); transform-origin: left; transition: transform 3s cubic-bezier(.45, 0, .55, 1) .3s; }
.chemin__camion { position: absolute; z-index: 2; left: 0; bottom: 4px; width: 84px; height: auto; margin-left: -42px; filter: drop-shadow(0 6px 6px rgba(23, 23, 21, .18)); transition: left 3s cubic-bezier(.45, 0, .55, 1) .3s; animation: camion 3s ease-in-out infinite; }
.chemin.vu .trait i { transform: scaleX(1); }
.chemin.vu .chemin__camion { left: 75%; }
.pays { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pays .pt { width: 48px; height: 48px; border-radius: 50%; background: var(--ivoire-2); box-shadow: 0 0 0 4px var(--ivoire-3); display: grid; place-items: center; font: 800 14px var(--texte); letter-spacing: .04em; z-index: 1; }
.pays:nth-child(2) .pt { background: var(--orange); box-shadow: 0 0 0 4px var(--charbon); animation: pulse 1.6s ease-in-out infinite; }
.pays .quand { font: 800 12px var(--texte); letter-spacing: .12em; text-transform: uppercase; color: var(--kraft-f); }
.pays h3 { font-size: 26px; }
.pays p { color: var(--gris); font-size: 14px; }

/* Questions fréquentes */
.faq { padding-block: 100px; background: var(--ivoire-2); }
.faq .duo { grid-template-columns: .8fr 1.2fr; gap: 50px; align-items: start; }
details { border-bottom: 1.5px solid var(--ivoire-3); padding-block: 18px; }
summary { cursor: pointer; font-weight: 700; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--ivoire-3); display: grid; place-items: center; font: 800 18px var(--titre); transition: transform .35s, background .35s; }
details[open] summary::after { transform: rotate(45deg); background: var(--orange); }
details p { margin-top: 10px; color: var(--gris); font-size: 15px; max-width: 44em; animation: glisse .4s ease; }

/* Rejoindre */
.rejoindre { padding-block: 100px; }
.boite { border-radius: 36px; background: var(--charbon); color: var(--ivoire); padding: 56px; position: relative; overflow: hidden; display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px; align-items: center; }
.boite .tete { margin: 0; position: relative; }
.boite .surtitre { color: var(--orange); }
.boite .sous { color: var(--gris-n); }
/* Trois lignes fines sur fond charbon : titre, phrase courte, flèche ; l'orange n'apparaît qu'au survol */
.choix { display: flex; flex-direction: column; position: relative; border-top: 1px solid rgba(242, 235, 221, .14); }
.choix a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 4px; border-bottom: 1px solid rgba(242, 235, 221, .14); color: var(--ivoire); }
.choix__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.choix__txt strong { font: 700 19px/1.2 var(--titre); letter-spacing: -.01em; }
.choix__txt small { color: var(--gris-n); font-size: 14px; }
.choix__fleche { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(242, 235, 221, .3); font-size: 18px; transition: background .25s, color .25s, border-color .25s, transform .25s; }
.choix a:hover .choix__fleche, .choix a:focus-visible .choix__fleche { background: var(--orange); border-color: var(--orange); color: var(--charbon); transform: translateX(4px); }
.choix a:hover strong { color: var(--orange); }

/* Pied de page kraft */
.pied { background-color: var(--kraft); color: var(--charbon); padding-block: 60px calc(30px + env(safe-area-inset-bottom, 0px)); }
.pied__haut { display: grid; grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); gap: 30px; }
.pied__marque > img { height: 44px; width: auto; }
.pied .slogan { margin: 12px 0 18px; max-width: 22em; color: #3B2E1E; }
.pied nav { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: #3B2E1E; }
.pied nav h3 { margin: 0 0 6px; font: 800 13px var(--texte); letter-spacing: .1em; text-transform: uppercase; color: var(--charbon); }
.pied nav a:hover { text-decoration: underline; }
.pied__bas { margin-top: 40px; padding-top: 20px; border-top: 1.5px solid rgba(23, 23, 21, .2); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13px; color: #3B2E1E; }

/* Animations */
@keyframes defile { to { transform: translateX(-50%); } }
@keyframes flotte { 50% { transform: translateY(-12px); } }
@keyframes pulse { 50% { box-shadow: 0 0 0 4px var(--charbon), 0 0 0 14px rgba(242, 140, 40, .25); } }
@keyframes glisse { from { opacity: 0; transform: translateY(-6px); } }
@keyframes charge { to { width: 100%; } }
@keyframes entreeTel { from { transform: translateY(120px) rotate(4deg); opacity: 0; } }
@keyframes entreeF { from { opacity: 0; transform: scale(.6); } }
.js .anim { opacity: 0; transform: translateY(30px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
.js .anim.z { transform: scale(.94); }
.js .anim.vu { opacity: 1; transform: none; }
/* Haut de page : apparition en CSS dès l'affichage, sans attendre marque.js et Supabase
   (le paragraphe du haut est l'élément principal mesuré par Lighthouse, audit du 25/10) */
.js .heros .anim { opacity: 1; transform: none; transition: none; animation: monteHeros .8s cubic-bezier(.2, .7, .2, 1) both; }
.js .heros .sous.anim { animation-delay: .12s; }
.js .heros .cta.anim { animation-delay: .24s; }
@keyframes monteHeros { from { opacity: 0; transform: translateY(30px); } }
.js .serv.anim.vu:hover { transform: translateY(-8px); }
.h-mot { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.h-mot > span { display: inline-block; }
.js .h-mot > span { transform: translateY(110%); transition: transform .85s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--d, 0s); }
.js .vu .h-mot > span { transform: none; }
.heros .tel { animation: entreeTel 1.2s .3s cubic-bezier(.2, .8, .2, 1) both; }
.flottante.entre { animation: entreeF .8s cubic-bezier(.3, 1.5, .5, 1) both, flotte 5s ease-in-out infinite; animation-delay: calc(.8s + var(--i) * .15s), var(--d); }

/* Étroit */
@media (max-width: 960px) {
  .nav { display: none; }
  .confiance .grille, .engag { grid-template-columns: 1fr 1fr; }
  .services .grille { grid-template-columns: 1fr; }
  .serv { min-height: 0; }
  .duo, .appli .duo, .manif, .faq .duo, .boite, .recits { grid-template-columns: 1fr; }
  .fct .tel { margin-top: 28px; }
  .duo--inverse { grid-template-columns: 1fr; }
  .duo--inverse > .tel { order: 0; }
  .fct__droite { order: -1; margin-bottom: 28px; }
  .fct .tel { margin-top: 0; }
  .pied__haut { grid-template-columns: 1fr 1fr; }
  .pied__marque { grid-column: 1 / -1; }
  .boite { padding: 32px 24px; }
}
@media (max-width: 640px) {
  body { font-size: 15px; }
  .sous { font-size: 16px; }
  .ent__cta { display: none; }
  .logos { width: 60px; height: 32px; }
  .logos img { height: 32px; max-width: 60px; }
  .heros h1 { font-size: clamp(36px, 11vw, 52px); }
  .mots span { white-space: normal; }
  .scene-tel { height: 640px; }
  .tel { width: 260px; height: 548px; margin-left: -130px; top: 80px; }
  .flottante { padding: 8px 10px; max-width: 168px; border-radius: 14px; }
  .flottante .ic { width: 30px; height: 30px; border-radius: 10px; }
  .flottante .ic svg { width: 18px; height: 18px; }
  .flottante b { font-size: 12px; } .flottante small { display: none; }
  .f1 { left: 0; top: 0; } .f3 { right: 0; top: 0; } .f2, .f4 { display: none; }
  .confiance .grille, .engag, .chemin { grid-template-columns: 1fr; }
  .chemin .trait { display: none; }
  .services, .fct, .modele, .appli, .histoire, .faq, .rejoindre { padding-block: 64px; }
  .serv { padding: 24px 22px 0; }
  .serv h3 { font-size: 26px; }
  .eventail { height: 520px; }
  .eventail .tel { width: 210px; height: 442px; margin-left: -105px; }
  .eventail .t1 { transform: translateX(-80px) rotate(-8deg) scale(.82); }
  .eventail .t3 { transform: translateX(80px) rotate(8deg) scale(.82); }
  .recit { padding: 26px; min-height: 300px; }
  .recit .gros { font-size: 56px; }
  .bande__mot { gap: 30px; padding-right: 30px; }
  .fct__marque { padding-left: 0; }
  .pied__haut { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .js .anim, .js .h-mot > span { opacity: 1; transform: none; }
  .st1 { opacity: 1; }
}

/* ---------------------------------------------------------------- Scène de la cloche KV Eats (copie de accueil.css) */
.serv__scene svg * { transform-box: view-box; }
.e-plat { opacity: 0; animation: e-plat 9s infinite steps(1, end); }
.e-plat.p2 { animation-delay: 3s; } .e-plat.p3 { animation-delay: 6s; }
@keyframes e-plat { 0% { opacity: 1; } 33.33% { opacity: 0; } 100% { opacity: 0; } }
.e-plat.p1 { animation-name: e-plat1; }
@keyframes e-plat1 { 0% { opacity: 1; } 33.33% { opacity: 0; } 99.9% { opacity: 0; } 100% { opacity: 1; } }
/* Cloche — cycle de 3 s : la vapeur la fait trembler, elle se tasse, bondit en arc,
   flotte, redescend, s'écrase un peu en se posant puis se stabilise */
.e-cloche { --ex:108px; --ey:-86px; transform-origin:200px 262px; animation:e-cloche 3s infinite }
@keyframes e-cloche {
  0%   { transform:translate(0,0) rotate(0) scale(1,1); animation-timing-function:ease-in-out }
  4%   { transform:translate(0,-2px) rotate(-1.6deg) scale(1,1) }
  6%   { transform:translate(0,0) rotate(1.4deg) scale(1,1) }
  8%   { transform:translate(0,-1px) rotate(-1deg) scale(1,1) }
  10%  { transform:translate(0,0) rotate(0) scale(1,1); animation-timing-function:cubic-bezier(.5,0,.8,.5) }
  15%  { transform:translate(-3px,4px) rotate(-3deg) scale(1.05,.92); animation-timing-function:cubic-bezier(.2,.7,.3,1) }
  22%  { transform:translate(calc(var(--ex) * .35),calc(var(--ey) * .85)) rotate(8deg) scale(.96,1.05); animation-timing-function:cubic-bezier(.3,.6,.4,1) }
  32%  { transform:translate(var(--ex),var(--ey)) rotate(22deg) scale(1,1); animation-timing-function:ease-in-out }
  44%  { transform:translate(calc(var(--ex) + 3px),calc(var(--ey) - 7px)) rotate(19deg) scale(1,1) }
  56%  { transform:translate(calc(var(--ex) - 2px),calc(var(--ey) + 1px)) rotate(23deg) scale(1,1) }
  68%  { transform:translate(calc(var(--ex) + 2px),calc(var(--ey) - 6px)) rotate(20deg) scale(1,1); animation-timing-function:cubic-bezier(.6,0,.9,.6) }
  78%  { transform:translate(calc(var(--ex) * .45),calc(var(--ey) * .8)) rotate(10deg) scale(.97,1.04); animation-timing-function:cubic-bezier(.5,0,1,1) }
  85%  { transform:translate(0,3px) rotate(-1deg) scale(1.07,.9); animation-timing-function:cubic-bezier(.2,.8,.4,1) }
  90%  { transform:translate(0,-7px) rotate(.8deg) scale(.97,1.04); animation-timing-function:ease-in }
  94%  { transform:translate(0,1px) rotate(-.4deg) scale(1.02,.98); animation-timing-function:ease-out }
  100% { transform:translate(0,0) rotate(0) scale(1,1) }
}
/* Reflet qui glisse sur le dôme pendant le mouvement */
.e-reflet { animation:e-reflet 3s infinite cubic-bezier(.4,0,.2,1) }
@keyframes e-reflet { 0%,12% { transform:translateX(-170px) } 34%,100% { transform:translateX(200px) } }
/* Plateau : il encaisse le choc quand la cloche se repose */
.e-plateau { transform-origin:200px 286px; animation:e-plateau 3s infinite }
@keyframes e-plateau { 0%,84% { transform:translateY(0) scale(1,1) } 86% { transform:translateY(3px) scale(1.012,.985) } 91% { transform:translateY(-1px) scale(1,1) } 95%,100% { transform:translateY(0) scale(1,1) } }
/* Ombre de la cloche : elle s'élargit et pâlit quand la cloche monte */
.e-ombre { transform-origin:200px 262px; animation:e-ombre 3s infinite ease-in-out }
@keyframes e-ombre { 0%,10% { opacity:.34; transform:translateX(0) scale(1,1) } 15% { opacity:.4; transform:translateX(0) scale(1.06,1) } 32%,68% { opacity:.1; transform:translateX(60px) scale(1.25,1.3) } 85% { opacity:.42; transform:translateX(0) scale(1.08,1) } 100% { opacity:.34; transform:translateX(0) scale(1,1) } }

/* Découverte : halo, rayons, plat qui se soulève */
.e-halo { transform-origin:200px 214px; opacity:0; animation:e-halo 3s infinite ease-out }
@keyframes e-halo { 0%,16% { opacity:0; transform:scale(.3) } 30% { opacity:.95; transform:scale(1.08) } 50% { opacity:.6; transform:scale(1) } 74% { opacity:.5; transform:scale(1) } 84%,100% { opacity:0; transform:scale(.6) } }
.e-rayons { transform-origin:200px 214px; opacity:0; animation:e-rayons 3s infinite linear }
@keyframes e-rayons { 0%,18% { opacity:0; transform:rotate(-20deg) scale(.6) } 32% { opacity:.55; transform:rotate(0) scale(1) } 74% { opacity:.4; transform:rotate(26deg) scale(1.02) } 84%,100% { opacity:0; transform:rotate(32deg) scale(.8) } }
.e-pop { transform-origin:200px 258px; animation:e-pop 3s infinite }
@keyframes e-pop {
  0%,16% { transform:translateY(4px) scale(.94); animation-timing-function:cubic-bezier(.2,.9,.3,1.3) }
  30% { transform:translateY(-8px) scale(1.07) } 40% { transform:translateY(0) scale(.99) }
  48% { transform:translateY(-2px) scale(1.01) } 56%,76% { transform:translateY(0) scale(1) }
  84%,100% { transform:translateY(4px) scale(.94) }
}
/* Bouffée de vapeur libérée à l'ouverture, puis volutes continues */
.e-bouffee ellipse { opacity:0; transform-origin:var(--ox) 236px; animation:e-bouffee 3s infinite ease-out }
.e-bouffee ellipse:nth-child(2) { animation-delay:.06s } .e-bouffee ellipse:nth-child(3) { animation-delay:.12s } .e-bouffee ellipse:nth-child(4) { animation-delay:.04s }
@keyframes e-bouffee { 0%,15% { opacity:0; transform:translate(0,0) scale(.3) } 22% { opacity:.85 } 46%,100% { opacity:0; transform:translate(var(--bx),-46px) scale(1.6) } }
.e-vapeur path { stroke-dasharray:80; stroke-dashoffset:80; opacity:0; animation:e-vap 3s infinite ease-out }
.e-vapeur path:nth-child(2) { animation-delay:.22s } .e-vapeur path:nth-child(3) { animation-delay:.44s }
@keyframes e-vap { 0%,26% { stroke-dashoffset:80; opacity:0; transform:translateY(10px) } 42% { opacity:.9 } 66% { stroke-dashoffset:0; opacity:.5; transform:translateY(-16px) } 78%,100% { opacity:0; transform:translateY(-26px) } }
/* Petites fuites de vapeur sous le rebord pendant que la cloche tremble */
.e-fuite path { opacity:0; animation:e-fuite 3s infinite ease-out }
.e-fuite path:nth-child(2) { animation-delay:.08s }
@keyframes e-fuite { 0%,2% { opacity:0; transform:translate(0,0) } 6% { opacity:.8 } 13%,100% { opacity:0; transform:translate(var(--fx),-14px) } }
/* Étincelles au moment de la découverte */
.e-etincelle { opacity:0; animation:e-etin 3s infinite cubic-bezier(.2,.9,.3,1.4) }
.e-etincelle:nth-child(2) { animation-delay:.1s } .e-etincelle:nth-child(3) { animation-delay:.2s } .e-etincelle:nth-child(4) { animation-delay:.28s }
@keyframes e-etin { 0%,24% { opacity:0; transform:scale(0) rotate(0) } 34% { opacity:1; transform:scale(1.15) rotate(45deg) } 50%,100% { opacity:0; transform:scale(.4) rotate(90deg) } }
/* Tintement quand la cloche se repose */
.e-tinte path { opacity:0; animation:e-tinte 3s infinite ease-out }
@keyframes e-tinte { 0%,84% { opacity:0; transform:scale(.7) } 87% { opacity:1; transform:scale(1) } 96%,100% { opacity:0; transform:scale(1.25) } }
.e-tinte .g { transform-origin:96px 256px } .e-tinte .d { transform-origin:304px 256px }

/* ---------------------------------------------------------------- Scène du carton (copie de la scène KV Transport) */
.carton-objet { display: none; }
.carton-objet.on { display: inline; }
.carton-camion { animation: camion 3s ease-in-out infinite; }
@keyframes camion { 50% { transform: translateY(-1.5px); } }

/* Compte client dans l'en-tête (marque.js, dessinerCompte) */
.compte { position: relative; }
.compte__bouton { display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; padding: 9px 13px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--ivoire-3); color: var(--charbon); font: 700 13.5px var(--texte); cursor: pointer; transition: background .2s, color .2s; }
.compte__bouton:hover { background: var(--ivoire-2); }
.compte__bouton svg { width: 17px; height: 17px; flex: none; }
.compte__bouton svg:last-child:not(:first-child) { width: 14px; height: 14px; opacity: .7; }
.ent:not(.colle) .compte__bouton { color: var(--ivoire); box-shadow: inset 0 0 0 1.5px rgba(242, 235, 221, .35); text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.ent:not(.colle) .compte__bouton:hover { background: rgba(242, 235, 221, .14); }
.compte__nom { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compte__liste { position: absolute; right: 0; top: calc(100% + 8px); min-width: 250px; margin: 0; padding: 6px; list-style: none; background: var(--ivoire-2); border-radius: 16px; box-shadow: 0 18px 40px -12px rgba(23, 23, 21, .35), inset 0 0 0 1px var(--ivoire-3); z-index: 40; }
.compte__liste a, .compte__liste button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: none; color: var(--charbon); font: 600 14px var(--texte); text-align: left; text-decoration: none; cursor: pointer; text-shadow: none; }
.compte__liste a:hover, .compte__liste button:hover { background: var(--ivoire); }
.compte__liste svg { width: 18px; height: 18px; flex: none; color: var(--gris); }
.compte__liste li:last-child { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--ivoire-3); }
@media (max-width: 640px) {
  .compte__nom, .compte__bouton svg:last-child:not(:first-child) { display: none; }
  .compte__bouton { padding: 9px; }
}

/* Fenêtre « Rejoindre la bêta » / « Nous contacter » (js/beta.js) */
.beta { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 24px; background: var(--ivoire-2); color: var(--charbon); box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); overflow: auto; overscroll-behavior: contain; }
.beta::backdrop { background: rgba(23, 23, 21, .6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.beta[open] { animation: betaEntre .25s ease-out; }
@keyframes betaEntre { from { opacity: 0; transform: translateY(14px); } }
.beta__boite { position: relative; margin: 0; }
.beta__corps, .beta__merci { display: flex; flex-direction: column; gap: 14px; padding: 28px 24px 24px; }
.beta [hidden] { display: none !important; }
.beta h2 { font-size: clamp(26px, 6vw, 32px); font-weight: 800; padding-right: 36px; }
.beta__sous { color: var(--gris); font-size: 15px; margin-top: -4px; }
.beta__fermer { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--ivoire-3); color: var(--charbon); cursor: pointer; transition: background .2s; }
.beta__fermer:hover { background: var(--kraft-p); }
.beta__fermer svg { display: block; }
.beta fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.beta legend { width: 100%; padding: 0; margin-bottom: 8px; font-weight: 700; font-size: 14px; }
.beta fieldset label { position: relative; flex: 1 1 auto; }
.beta fieldset input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.beta fieldset span { display: block; text-align: center; padding: 11px 14px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--ivoire-3); font-weight: 700; font-size: 14px; white-space: nowrap; transition: background .2s, color .2s, box-shadow .2s; }
.beta fieldset input:checked + span { background: var(--charbon); color: var(--ivoire); box-shadow: none; }
.beta fieldset input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 2px; }
.beta__champ { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 14px; }
.beta__champ small { font-weight: 500; color: var(--gris); font-size: 12.5px; }
.beta__champ input, .beta__champ textarea { width: 100%; font: 500 16px var(--texte); color: var(--charbon); background: #fff; border: 1.5px solid var(--ivoire-3); border-radius: 14px; padding: 12px 14px; }
.beta__champ textarea { resize: vertical; min-height: 84px; }
.beta__champ input:focus, .beta__champ textarea:focus { outline: none; border-color: var(--charbon); }
.beta__tel { display: flex; align-items: stretch; }
.beta__tel > span { display: grid; place-items: center; padding: 0 12px; border: 1.5px solid var(--ivoire-3); border-right: 0; border-radius: 14px 0 0 14px; background: var(--ivoire); font-weight: 700; color: var(--gris); }
.beta__tel input { border-radius: 0 14px 14px 0; }
.beta__note { font-size: 13.5px; color: var(--gris); background: var(--ivoire); border-radius: 12px; padding: 10px 12px; }
.beta__note a, .beta__prive a { color: var(--orange-f); text-decoration: underline; }
.beta__piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.beta__erreur { color: #A3281B; font-weight: 700; font-size: 14px; }
.beta__envoyer { width: 100%; border: 0; cursor: pointer; margin-top: 4px; }
.beta__envoyer:disabled { opacity: .6; cursor: wait; transform: none; }
.beta__prive { font-size: 12.5px; color: var(--gris); text-align: center; }
.beta__merci { align-items: center; text-align: center; padding: 44px 24px 32px; }
.beta__merci h2 { padding: 0; outline: none; }
.beta__merci p { color: var(--gris); max-width: 26em; }
.beta__coche { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--orange); color: var(--charbon); font: 800 30px/1 var(--texte); }
.beta__merci .btn { border: 0; cursor: pointer; margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .beta[open] { animation: none; } }