

.v2-confiance { margin-top: 0; --conf-g: clamp(20px, 3.3vw, 48px); --conf-gap: clamp(12px, 1.1vw, 16px); padding: 80px 0 100px; overflow-x: clip; }

.v2-confiance-tete { position: relative; z-index: 2; padding: 0 var(--conf-g); display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 24px; }
.v2-conf-sur, .v2-conf-lien { font-family: var(--texte); font-size: 18px; font-weight: 500; line-height: 1; text-transform: uppercase; letter-spacing: 0; color: var(--encre); padding-top: .5em; margin: 0; }
.v2-conf-sur { justify-self: start; }
.v2-conf-lien { justify-self: end; white-space: nowrap; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 7px; transition: color .25s var(--ease); }
.v2-conf-lien:hover, .v2-conf-lien:focus-visible { color: var(--orange); }
.v2-confiance .v2-h2 { margin-top: 0; }

.v2-conf-rail { container-type: inline-size; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: var(--conf-g) 0;
  overscroll-behavior-x: contain; padding: 28px 0 8px var(--conf-g); scrollbar-width: none; outline: none; }
.v2-conf-rail::-webkit-scrollbar { display: none; }
.v2-conf-piste { position: relative; display: flex; gap: var(--conf-gap); width: max-content; padding-right: var(--conf-g); }
.v2-conf-carte { position: relative; flex: none; display: block; width: min(680px, calc((100cqw - 2 * var(--conf-gap)) / 2.5)); scroll-snap-align: start; color: var(--encre); }
.v2-conf-bulle { position: relative; display: flex; flex-direction: column; height: 100%; padding: 10px 10px 16px; border-radius: clamp(16px, 1.5vw, 22px); background: var(--blanc); }
a.v2-conf-carte { cursor: pointer; }

.v2-conf-piste > .v2-conf-carte:nth-child(even) { color: var(--fond); }
.v2-conf-piste > .v2-conf-carte:nth-child(even) .v2-conf-bulle { background: var(--nuit); }
.v2-conf-piste > .v2-conf-carte:nth-child(even) .v2-conf-meta { color: rgba(249,247,242,.62); }
.v2-conf-piste > .v2-conf-carte:nth-child(even) .v2-conf-lieu { color: var(--fond); }
.v2-conf-piste > .v2-conf-carte:nth-child(even) .v2-conf-desc { color: rgba(249,247,242,.78); }
.v2-conf-piste > .v2-conf-carte:nth-child(even) .v2-conf-fil img { background: rgba(249,247,242,.08); }
a.v2-conf-carte:focus-visible { outline: none; }
a.v2-conf-carte:focus-visible .v2-conf-bulle { outline: 2px solid var(--orange); outline-offset: -2px; }

.v2-conf-rail.v2-conf-boucle { overflow: hidden; scroll-snap-type: none; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.v2-conf-boucle .v2-conf-piste { padding-right: 0; will-change: transform; }
.v2-conf-boucle .v2-conf-carte { scroll-snap-align: none; -webkit-user-drag: none; }
.v2-conf-boucle img { -webkit-user-drag: none; }

.v2-conf-cmd { display: flex; justify-content: flex-end; gap: 10px; padding: 20px var(--conf-g) 0; }
html:not(.js) .v2-conf-cmd { display: none; }
.v2-conf-b { display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: var(--blanc); color: var(--encre); cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease), opacity .25s var(--ease), rotate .45s cubic-bezier(.34, 1.56, .64, 1); -webkit-tap-highlight-color: transparent; }
.v2-conf-b svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.v2-conf-b:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.v2-conf-b[aria-disabled="true"] { opacity: .35; cursor: default; }
@media (hover: hover) { .v2-conf-b:not([aria-disabled="true"]):hover { background: var(--encre); color: var(--blanc); rotate: -6deg; } }

.v2-conf-nav { display: flex; flex-direction: column; aspect-ratio: 2 / 1; border-radius: clamp(9px, .85vw, 12px); overflow: hidden; background: var(--blanc); isolation: isolate; }
.v2-conf-barre { position: relative; flex: none; height: 26px; display: flex; align-items: center; padding: 0 12px; background: var(--encre); }
.v2-conf-pts { display: flex; gap: 5px; }
.v2-conf-pts i { width: 7px; height: 7px; border-radius: 50%; background: rgba(249,247,242,.3); }
.v2-conf-pts i:first-child { background: var(--orange); }
.v2-conf-adr { position: absolute; left: 50%; top: 4px; height: 18px; max-width: calc(100% - 100px); translate: -50% 0; display: flex; align-items: center; padding: 0 12px;
  border-radius: 999px; background: rgba(249,247,242,.14); font-size: 11.5px; font-weight: 500; line-height: 1; color: rgba(249,247,242,.78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-conf-vue { position: relative; flex: 1 1 0; min-height: 0; overflow: hidden; background: var(--blanc); }
.v2-conf-long { position: absolute; left: 0; top: 0; display: block; width: 100%; height: auto; max-width: none; }

.v2-conf-defile .v2-conf-long { will-change: transform; }

.v2-conf-fil { --conf-w: clamp(48px, 3.9vw, 56px); --conf-e: 6px; position: relative; margin-top: 8px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); }
.v2-conf-fil-piste { display: flex; gap: var(--conf-e); width: max-content; }
.v2-conf-fil img { flex: none; display: block; width: var(--conf-w); height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; background: #EFEBE3; }
.js:not(.v2-final) .v2-conf-fil-piste { animation: v2-conf-fil 40s linear infinite; animation-delay: var(--conf-d, 0s); animation-play-state: paused; }
.js:not(.v2-final) .v2-confiance.v2-conf-vu .v2-conf-carte.v2-conf-joue .v2-conf-fil-piste { animation-play-state: running; }
@media (hover: hover) { .js:not(.v2-final) .v2-confiance.v2-conf-vu .v2-conf-carte:hover .v2-conf-fil-piste { animation-play-state: paused; } }
@keyframes v2-conf-fil { to { transform: translateX(calc(-100% / 3 - var(--conf-e) / 3)); } }

.v2-conf-corps { padding: 14px 8px 0; }
.v2-conf-nom { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(22px, 1.9vw, 28px); line-height: .95; letter-spacing: 0; font-synthesis: none;
  padding-top: .05em; transition: color .3s var(--ease); }
a.v2-conf-carte:hover .v2-conf-nom, a.v2-conf-carte:focus-visible .v2-conf-nom { color: var(--orange); }
.v2-conf-meta { display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; row-gap: 4px; margin-top: 8px;
  font-family: var(--texte); font-size: 13px; font-weight: 500; line-height: 1.35; letter-spacing: .07em; text-transform: uppercase; color: rgba(20,19,18,.66); }
.v2-conf-lieu { display: inline-flex; align-items: center; gap: 6px; color: var(--encre); }
.v2-conf-pin { flex: none; display: block; width: 14px; height: 18px; fill: none; stroke: var(--orange); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.v2-conf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.v2-conf-desc { margin-top: 7px; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.42; color: rgba(20,19,18,.8); max-width: none; text-wrap: pretty; }

@media (max-width: 991px) {
  .v2-confiance { padding-top: 64px; }
  .v2-confiance-tete { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 0; }
  .v2-conf-sur, .v2-conf-lien { justify-self: start; padding-top: 0; }
  .v2-confiance .v2-h2 { margin-top: 18px; font-size: min(64px, 16.2vw); }
  .v2-conf-lien { margin-top: 26px; }
  .v2-conf-carte { width: min(560px, calc((100cqw - var(--conf-gap)) / 1.5)); }
  .v2-conf-nav { aspect-ratio: 16 / 10; }
}
@media (max-width: 640px) {
  .v2-conf-rail { padding-top: 24px; }
  .v2-conf-carte { width: 85cqw; }
  .v2-conf-bulle { padding: 8px 8px 16px; border-radius: 16px; }
  .v2-conf-nav { border-radius: 9px; }
  .v2-conf-fil { --conf-w: 48px; --conf-e: 5px; }
  .v2-conf-corps { padding: 12px 6px 0; }
  .v2-conf-cmd { padding-top: 16px; }
  .v2-conf-b { width: 48px; height: 48px; }
}

@media (pointer: coarse), (max-width: 767px) { .v2-conf-lien { padding-block: 13px; margin-block: -13px; } }
@media (max-width: 991px) and (pointer: coarse), (max-width: 767px) { .v2-conf-lien { margin-top: 13px; } }

@media (prefers-reduced-motion: reduce) { .v2-conf-fil-piste { animation: none !important; } .v2-conf-rail { scroll-behavior: auto; } }
.v2-final .v2-confiance { margin-top: 0; }
