/* Accueil, « Que fait Bobby pour votre entreprise ? » (#les-bobby) en badges suspendus. Test d'après la vidéo d'Axel (21/10/2026), v2 après ses retours
   de 22 h 15 à 22 h 25 : retournement au survol, pastille « Retourner » explicite, verso épuré (Bobby en pâte à modeler de la couleur de la carte,
   ce qu'il prend en charge, lien et QR code), balancement lent et léger, badges bien espacés qui ne se touchent jamais, police du site partout
   (les petites mentions reprennent le style .meta du site : Switzer 500, casse normale, sans espacement de lettres).
   Mouvement : badges-bobby.js (seul le balancement est calculé, le retournement est une transition CSS). Mêmes pastels que les anciennes .carte-bobby.
   Aucune ombre portée (règle d'Axel) : seulement des filets de 1 px. */
.sec.equipe-bobby--badges { padding: 104px 0 72px; overflow: clip; }
.equipe-bobby--badges .equipe-bobby__tete { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; }
.equipe-bobby--badges .equipe-bobby__tete .h { max-width: 620px; text-wrap: balance; } /* même police et même taille que les autres titres du site (demande Axel 21/10) */
.equipe-bobby--badges .equipe-bobby__tete .h .g { display: block; color: #FB4D17; } /* orange Bobby, pas lavande (demande Axel 21/10) */
.equipe-bobby--badges .equipe-bobby__tete .p { margin: 0 0 6px; max-width: 440px; font-size: 16px; line-height: 1.55; justify-self: end; }

/* ---------- La scène : une corde en arc doux (tracée par badges-bobby.js), quatre badges de même taille, écart régulier ---------- */
.badges-bobby { --gap: clamp(26px, 3vw, 44px); --w: min(250px, calc((min(100vw, 1180px) - 48px - 3 * var(--gap)) / 4));
  --rope: #bdbdb8; --pince: #c6c6c0; position: relative; width: fit-content; margin: 52px auto 0; font-family: var(--font); }
.badges-bobby__corde { position: absolute; top: 0; left: -48px; width: calc(100% + 96px); height: 64px; overflow: visible; pointer-events: none; }
.badges-bobby__corde path { fill: none; stroke: var(--rope); stroke-width: 1.5; stroke-linecap: round; }
.badges-bobby__rang { display: flex; gap: var(--gap); margin: 0; padding: 0 0 44px; list-style: none; }
.badge-bobby { position: relative; flex: 0 0 var(--w); width: var(--w); margin: 0; padding: 0; display: flex; justify-content: center; }
/* point d'accroche sur la corde */
.badge-bobby::before { content: ""; position: absolute; z-index: 1; top: -3px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--rope); }

.badge-bobby__pendule { position: relative; display: flex; flex-direction: column; align-items: center; transform-origin: 50% 0; perspective: 1600px; will-change: transform; }
.badge-bobby__fil { display: block; width: 1.25px; height: var(--fil, 40px); background: var(--rope); }
.badge-bobby__pince { position: relative; z-index: 2; display: block; width: 20px; height: 24px; margin-top: -1px; margin-bottom: -15px; fill: var(--pince); }
.badge-bobby__pince circle { fill: #fff; }

/* ---------- Le badge : tout est proportionnel à sa largeur (unités cqi), donc les mêmes proportions partout ---------- */
.badge-bobby__carte { --fond: #eff0f3; --teinte: #dcdee5; --encre: #191919; --pastille: #191919; --vignette: #e7e9ee;
  position: relative; width: var(--w); aspect-ratio: 25 / 38; container-type: inline-size; transform-style: preserve-3d;
  will-change: transform; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  --halo: 175, 190, 235; } /* v3 : rotateY piloté par badges-bobby.js (ressort), plus de transition CSS */
.badge-bobby.is-saisi .badge-bobby__carte { cursor: grabbing; }
.badge-bobby--admin .badge-bobby__carte { --halo: 110, 200, 245; }
.badge-bobby--compta .badge-bobby__carte { --halo: 200, 150, 245; }
.badge-bobby--web .badge-bobby__carte { --halo: 250, 170, 110; }
.badge-bobby__carte img { -webkit-user-drag: none; user-select: none; }
.badge-bobby--admin .badge-bobby__carte { --fond: #dff2fa; --teinte: #9fe0f7; --encre: #12384a; --pastille: #12384a; --vignette: #d6ecf7; }
.badge-bobby--compta .badge-bobby__carte { --fond: #f1e1fb; --teinte: #e3c4f7; --encre: #4a1f63; --pastille: #4a1f63; --vignette: #eedefc; }
.badge-bobby--web .badge-bobby__carte { --fond: #fdeed6; --teinte: #fbd3a8; --encre: #5a3410; --pastille: #5a3410; --vignette: #fce8d2; }
.badge-bobby.is-retourne .badge-bobby__carte { transform: rotateY(180deg); }
.badge-bobby__face { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 5.6cqi 5.6cqi 5.2cqi; border-radius: 18px; overflow: hidden;
  font-size: 6.4cqi; /* 16 px pour un badge de 250 px */ font-family: var(--font); background: var(--fond); color: #191919; border: 1px solid rgba(0, 0, 0, .05);
  backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.badge-bobby__verso { transform: rotateY(180deg);
  background: linear-gradient(160deg, rgba(255,255,255,.7), rgba(255,255,255,0) 45%), linear-gradient(200deg, rgba(255, 220, 238, .35), rgba(205, 230, 255, .3) 45%, rgba(218, 248, 232, .3) 75%, rgba(255, 240, 210, .35)), var(--fond); }

/* petites mentions : style .meta du site, à l'échelle du badge */
.badge-bobby__meta { display: flex; justify-content: space-between; align-items: center; gap: .5em; min-height: 1.75em; font-size: .75em; font-weight: 500; line-height: 1.3; color: rgba(25, 25, 25, .55); white-space: nowrap; }

/* recto */
.badge-bobby__portrait { position: relative; display: grid; place-items: center; height: 46cqi; flex: none; margin-top: .55em; border-radius: 12px; color: var(--encre);
  background: radial-gradient(120% 90% at 50% 38%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%), linear-gradient(165deg, var(--teinte), color-mix(in srgb, var(--teinte) 55%, var(--fond))); }
.badge-bobby__svg { width: 30cqi; height: 28cqi; overflow: visible; }
.badge-bobby__nom { margin: .7em 0 0; font-family: var(--font); font-size: 1.125em; font-weight: 500; line-height: 1.2; letter-spacing: -.01em; color: inherit; }
.badge-bobby__role { margin: .2em 0 0; font-size: .8125em; font-weight: 500; line-height: 1.3; color: #3a3a37; }
.badge-bobby__txt { margin: .6em 0 0; font-size: .75em; line-height: 1.45; color: #5d5d58; }
.badge-bobby__pastille { display: inline-flex; align-items: center; gap: .45em; align-self: flex-start; margin-top: auto; padding: .3em .8em .3em .3em; border-radius: 999px;
  background: rgba(255, 255, 255, .72); border: 1px solid rgba(0, 0, 0, .08); font-size: .75em; font-weight: 500; line-height: 1.2; color: #191919; white-space: nowrap; }
.badge-bobby__pastille i { display: grid; place-items: center; width: 1.75em; height: 1.75em; border-radius: 50%; background: var(--pastille); color: #fff; transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.badge-bobby__pastille svg { width: 1em; height: 1em; }
.badge-bobby.is-survol .badge-bobby__recto .badge-bobby__pastille i { transform: rotate(90deg); }
.badge-bobby__pastille--doigt { display: none; }
.badge-bobby__pastille--revenir { margin: 0; padding: .2em .7em .2em .2em; font-size: 1em; }
.badge-bobby__pastille--revenir i { width: 1.5em; height: 1.5em; }

/* verso : la fiche des possibilités */
.badge-bobby__vignette { position: relative; display: grid; place-items: center; height: 34cqi; flex: none; margin-top: .55em; border-radius: 12px; overflow: hidden; background: var(--vignette); }
.badge-bobby__vignette img { display: block; width: 34cqi; height: 34cqi; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.badge-bobby__ident { margin: .6em 0 0; line-height: 1.25; }
.badge-bobby__ident b { display: block; font-size: .9375em; font-weight: 500; letter-spacing: -.01em; }
.badge-bobby__ident span { display: block; margin-top: .15em; font-size: .75em; font-weight: 500; color: rgba(25, 25, 25, .6); }
.badge-bobby__lab { margin: .6em 0 0; font-size: .75em; font-weight: 500; line-height: 1.3; color: rgba(25, 25, 25, .55); }
.badge-bobby__taches { margin: .35em 0 0; padding: 0; list-style: none; }
.badge-bobby__taches li { display: flex; align-items: center; gap: .5em; margin: 0; padding: .12em 0; font-size: .75em; line-height: 1.35; color: #2c2c29; }
.badge-bobby__taches svg { flex: none; width: 1em; height: 1em; color: var(--encre); }
.badge-bobby__bas { display: flex; justify-content: space-between; align-items: flex-end; gap: .6em; margin-top: auto; padding-top: .5em; border-top: 1px solid rgba(0, 0, 0, .1); }
.badge-bobby__bas-txt { display: flex; flex-direction: column; gap: .35em; min-width: 0; }
.badge-bobby__lien { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: .4em; font-size: .78em; font-weight: 500; line-height: 1.3; color: #191919; text-decoration: none; }
.badge-bobby__lien svg { width: .9em; height: .9em; flex: none; transition: transform .25s; }
.badge-bobby__lien:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.badge-bobby__lien:hover svg, .badge-bobby__lien:focus-visible svg { transform: translate(2px, -2px); }
.badge-bobby__lien:focus-visible { outline: 2px solid var(--accent, #FB4D17); outline-offset: 3px; border-radius: 4px; }
.badge-bobby__bas small { font-size: .6875em; font-weight: 500; line-height: 1.3; color: rgba(25, 25, 25, .5); }
.badge-bobby__qr { display: block; flex: none; width: 26.4cqi; height: 26.4cqi; border-radius: 6px; } /* 66 px pour un badge de 250 px : décodé en écran standard et retina */

/* le bouton invisible qui retourne la carte au clavier ; souris et doigt passent par la carte entière */
.badge-bobby__retourner { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 18px; background: none; pointer-events: none; }
.badge-bobby__retourner:focus-visible { outline: 2px solid var(--accent, #FB4D17); outline-offset: 5px; }

/* ---------- Halo au survol (v4, Axel 21/10/2026 : « trop abusé, un seul halo, subtil et épuré, pas celui de la souris ») ----------
   Un seul halo, fixe, propre à la carte : une lueur douce de sa couleur venue du haut et son liseré qui s'éclaire à peine.
   Rien ne suit le curseur, pas de reflet irisé ; tout est SUR la carte, rien derrière (règle : aucune ombre ni auréole autour). Fondu lent. */
.badge-bobby__face::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .6s ease;
  background: radial-gradient(120% 70% at 50% 0%, rgba(var(--halo), .07), rgba(var(--halo), 0) 65%);
  box-shadow: inset 0 0 0 1px rgba(var(--halo), .22); }
.badge-bobby.is-survol .badge-bobby__face::before, .badge-bobby.is-saisi .badge-bobby__face::before { opacity: 1; }

/* clin d'œil de l'icône */
.badge-bobby__oeil { transform-box: fill-box; transform-origin: center; transition: transform .07s ease; }
.badge-bobby.cligne .badge-bobby__oeil { transform: scaleY(.12); }


/* ---------- Mentions sous les badges : style .meta du site ---------- */
.badges-bobby__aide { display: flex; justify-content: space-between; gap: 16px; margin: 4px 0 0; font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--ink-2, #6f6f6c); }
.badges-bobby__geste--doigt { display: none; }
/* appareils sans vrai survol (téléphone, tablette) : on parle de toucher */
@media (hover: none), (pointer: coarse) {
  .badges-bobby__geste--souris, .badge-bobby__pastille--souris { display: none; }
  .badges-bobby__geste--doigt, .badge-bobby__pastille--doigt { display: inline; }
}

/* Sans JavaScript : la fiche (verso) s'affiche à plat, lien compris */
html:not(.js) .badge-bobby__recto { display: none; }
html:not(.js) .badge-bobby__verso { transform: none; }

/* ---------- Tablette et téléphone : une corde qui défile, un badge et demi visible ---------- */
@media (max-width: 1000px) {
  .sec.equipe-bobby--badges { padding: 72px 0 52px; }
  .equipe-bobby--badges .equipe-bobby__tete { grid-template-columns: 1fr; gap: 14px; }
  .equipe-bobby--badges .equipe-bobby__tete .p { justify-self: start; max-width: 560px; margin: 0; }
  .badges-bobby { --gap: 36px; --w: clamp(232px, 62vw, 262px); width: auto; margin-top: 30px; }
  .badges-bobby__corde { display: none; }
  .badges-bobby__rang { padding: 26px var(--gutter, 20px) 34px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter, 20px); scrollbar-width: none; }
  .badges-bobby__rang::-webkit-scrollbar { display: none; }
  .badge-bobby__carte { cursor: pointer; touch-action: pan-x pan-y; }   /* le doigt fait défiler la rangée, on n'attrape pas */
  .badge-bobby { scroll-snap-align: start; margin-top: 0 !important; }
  /* la corde : un feston d'une pince à l'autre, qui défile avec les badges */
  .badge-bobby::after { content: ""; position: absolute; top: -14px; left: 50%; width: calc(100% + var(--gap)); height: 20px; border-bottom: 1.5px solid var(--rope); border-radius: 0 0 50% 50% / 0 0 100% 100%; pointer-events: none; }
  .badge-bobby:last-child::after { display: none; }
  .badge-bobby::before { top: -14px; }
  .badge-bobby__fil { height: calc(var(--fil) * .5 + 4px); margin-top: -11px; }
  .badges-bobby__aide { justify-content: flex-start; margin-top: 18px; }
  /* la rangée se parcourt au doigt ; les flèches restent en appoint */
  .badges-bobby .badges-bobby__nav { display: flex; gap: 10px; padding: 0 var(--gutter, 20px); }
  .badges-bobby__aide > span:first-child { display: none; }
}

/* flèches de la rangée (tablette et téléphone seulement) */
.badges-bobby__nav { display: none; }
.badges-bobby__fleche { display: grid; place-items: center; width: 40px; height: 40px; margin: 0; padding: 0; border-radius: 50%; border: 1px solid var(--line, rgba(0,0,0,.12)); background: var(--card, #fff); color: var(--ink, #292929); cursor: pointer; }
.badges-bobby__fleche svg { width: 16px; height: 16px; }
.badges-bobby__fleche:disabled { opacity: .35; cursor: default; }
.badges-bobby__fleche:focus-visible { outline: 2px solid var(--accent, #FB4D17); outline-offset: 3px; }

/* ---------- Mode nuit : cartes sombres teintées de leur pastel ; vignette et QR restent clairs ---------- */
html[data-theme="nuit"] .equipe-bobby--badges .equipe-bobby__tete .h .g { color: #FB4D17; }
html[data-theme="nuit"] .badges-bobby { --rope: rgba(255, 255, 255, .28); --pince: #5a5a57; }
html[data-theme="nuit"] .badge-bobby__pince circle { fill: var(--paper, #141414); }
html[data-theme="nuit"] .badge-bobby__carte { --nuit: 230, 232, 240; }
html[data-theme="nuit"] .badge-bobby--admin .badge-bobby__carte { --nuit: 145, 224, 255; }
html[data-theme="nuit"] .badge-bobby--compta .badge-bobby__carte { --nuit: 241, 204, 255; }
html[data-theme="nuit"] .badge-bobby--web .badge-bobby__carte { --nuit: 255, 216, 176; }
html[data-theme="nuit"] .badge-bobby__face { background: linear-gradient(180deg, rgba(var(--nuit), .1), rgba(var(--nuit), .02) 60%), #1f1f1f; color: #fff; border-color: rgba(255, 255, 255, .08); }
html[data-theme="nuit"] .badge-bobby__verso { background: linear-gradient(200deg, rgba(255, 214, 236, .06), rgba(201, 228, 255, .05) 45%, rgba(214, 248, 230, .05) 75%, rgba(255, 239, 204, .06)), linear-gradient(180deg, rgba(var(--nuit), .12), rgba(var(--nuit), .03) 60%), #1f1f1f; }
html[data-theme="nuit"] .badge-bobby__meta, html[data-theme="nuit"] .badge-bobby__lab, html[data-theme="nuit"] .badge-bobby__bas small { color: rgba(255, 255, 255, .55); }
html[data-theme="nuit"] .badge-bobby__portrait { color: rgb(var(--nuit)); background: radial-gradient(120% 90% at 50% 38%, rgba(var(--nuit), .16), rgba(var(--nuit), 0) 62%), linear-gradient(165deg, rgba(var(--nuit), .16), rgba(var(--nuit), .05)); }
html[data-theme="nuit"] .badge-bobby__role, html[data-theme="nuit"] .badge-bobby__ident span { color: rgba(255, 255, 255, .72); }
html[data-theme="nuit"] .badge-bobby__txt { color: rgba(255, 255, 255, .66); }
html[data-theme="nuit"] .badge-bobby__taches li, html[data-theme="nuit"] .badge-bobby__lien { color: rgba(255, 255, 255, .88); }
html[data-theme="nuit"] .badge-bobby__taches svg { color: rgb(var(--nuit)); }
html[data-theme="nuit"] .badge-bobby__bas { border-top-color: rgba(255, 255, 255, .1); }
html[data-theme="nuit"] .badge-bobby__pastille { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .12); color: #fff; }
html[data-theme="nuit"] .badge-bobby__pastille i { background: rgb(var(--nuit)); color: #141414; }
html[data-theme="nuit"] .badge-bobby__face::before { background: radial-gradient(120% 70% at 50% 0%, rgba(var(--nuit), .06), rgba(var(--nuit), 0) 65%); box-shadow: inset 0 0 0 1px rgba(var(--nuit), .18); }

/* ---------- Mouvement réduit : badges immobiles, pas de coup d'œil, simple fondu entre recto et verso ---------- */
@media (prefers-reduced-motion: reduce) {
  .badge-bobby__carte, .badge-bobby.is-retourne .badge-bobby__carte { transform: none; transform-style: flat; transition: none; animation: none !important; }
  .badge-bobby__face { backface-visibility: visible; -webkit-backface-visibility: visible; transition: opacity .25s ease; }
  .badge-bobby__verso { transform: none; opacity: 0; }
  .badge-bobby.is-retourne .badge-bobby__verso { opacity: 1; }
  .badge-bobby.is-retourne .badge-bobby__recto { opacity: 0; }
  .badge-bobby__pastille i { transition: none; }
  .badge-bobby__carte { cursor: pointer; }
}