/* DA 2027 (#363) : couche d'effets, sous html.da27. Rien n'est caché sans JavaScript ; mouvement réduit = aucun effet. */
/* Survols et transitions (sans JS) */
html.da27 .ui-offer-card, html.da27 .da-video, html.da27 .vz-vignette, html.da27 .ui-chart, html.da27 .sp-chiffre, html.da27 [data-effet~="carte"] { transition: transform .25s ease, box-shadow .25s ease; }
@media (hover: hover) {
  html.da27 .ui-offer-card:hover, html.da27 .da-video:hover, html.da27 .vz-vignette:hover, html.da27 [data-effet~="carte"]:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
  html.da27 .vz-vignette__cadre img, html.da27 .da-video__media img { transition: transform .5s ease; }
  html.da27 .vz-vignette:hover img, html.da27 .da-video:hover .da-video__media img { transform: scale(1.04); }
}
html.da27 .vz-vignette__cadre, html.da27 .da-video__media { overflow: hidden; }
/* Apparition au défilement : la classe est posée par le JS, sur des éléments encore hors écran */
html.da27 .fx-pre { opacity: 0; transform: translateY(18px); }
html.da27 .fx-pre.fx-in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; transition-delay: var(--fx-d, 0s); }
/* Parallaxe légère : l'image dépasse du cadre de 10 % */
html.da27 .fx-par img { transform: translate3d(0, var(--fx-y, 0px), 0) scale(1.1); will-change: transform; }
/* Barre de progression de lecture */
.fx-prog { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; background: var(--c-brand, #1d4e89); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
[dir="rtl"] .fx-prog { transform-origin: 100% 50%; }
/* Carrousel : scroll-snap en base, flèches et points ajoutés par le JS */
html.da27.js .vz-vignettes.vz-vignettes, html.da27.js .da-videos__grille, html.da27.js [data-effet~="carrousel"] {
  --fx-v: 1.15; position: relative; display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block-end: 24px; max-width: none; grid-template-columns: none;
}
html.da27.js .vz-vignettes::-webkit-scrollbar, html.da27.js .da-videos__grille::-webkit-scrollbar, html.da27.js [data-effet~="carrousel"]::-webkit-scrollbar { display: none; }
html.da27.js .vz-vignettes > *, html.da27.js .da-videos__grille > *, html.da27.js [data-effet~="carrousel"] > * { flex: 0 0 calc((100% - 16px * (var(--fx-v) - 1)) / var(--fx-v)); min-width: 0; scroll-snap-align: start; }
@media (min-width: 600px) { html.da27.js .vz-vignettes.vz-vignettes, html.da27.js .da-videos__grille, html.da27.js [data-effet~="carrousel"] { --fx-v: 2.2; } }
@media (min-width: 900px) { html.da27.js .vz-vignettes.vz-vignettes, html.da27.js .da-videos__grille, html.da27.js [data-effet~="carrousel"] { --fx-v: 3; } }
@media (min-width: 1200px) { html.da27.js .vz-vignettes.vz-vignettes, html.da27.js .da-videos__grille, html.da27.js [data-effet~="carrousel"] { --fx-v: 4; } html.da27.js .da-videos__grille { --fx-v: 3; } }
html.da27.js .vz-vignettes:focus-visible, html.da27.js .da-videos__grille:focus-visible, html.da27.js [data-effet~="carrousel"]:focus-visible { outline: 3px solid var(--c-brand, #1d4e89); outline-offset: 3px; }
.fx-w { position: relative; min-width: 0; max-width: 100%; contain: inline-size; }
.fx-nav, .fx-pause { position: absolute; z-index: 2; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .94); color: #0f2846; box-shadow: 0 2px 10px rgb(0 0 0 / .25); font: 700 20px/1 system-ui, sans-serif; cursor: pointer; display: grid; place-items: center; transition: opacity .2s, transform .2s; }
.fx-nav { top: calc(50% - 32px); }
.fx-nav:hover, .fx-pause:hover { transform: scale(1.08); }
.fx-nav:focus-visible, .fx-pause:focus-visible, .fx-pt:focus-visible { outline: 3px solid var(--c-brand, #1d4e89); outline-offset: 2px; }
.fx-nav[disabled] { opacity: 0; pointer-events: none; }
.fx-pre-b { inset-inline-start: 6px; } .fx-sui { inset-inline-end: 6px; }
[dir="rtl"] .fx-nav { transform: scaleX(-1); }
.fx-bas { position: absolute; inset: auto 0 0; height: 22px; display: flex; justify-content: center; align-items: center; gap: 4px; }
.fx-pt { width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.fx-pt::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #9aa9ba; transition: width .25s, background .25s; }
.fx-pt[aria-current="true"]::before { width: 22px; border-radius: 4px; background: var(--c-brand, #1d4e89); }
.fx-pause { position: static; width: 24px; height: 24px; font-size: 11px; box-shadow: none; background: transparent; border: 1px solid #9aa9ba; margin-inline-start: 8px; }
.fx-w[data-fx-fixe] .fx-nav, .fx-w[data-fx-fixe] .fx-bas { display: none; }
/* Accordéons : l'ouverture est animée par le JS (hauteur) ; flèche du résumé */
html.da27 details > summary { transition: color .2s; }
@media (prefers-reduced-motion: reduce) {
  html.da27 *, html.da27 *::before, html.da27 *::after { scroll-behavior: auto !important; }
  html.da27 .fx-pre { opacity: 1; transform: none; }
  html.da27 .fx-par img { transform: none; will-change: auto; }
  html.da27 .ui-offer-card, html.da27 .da-video, html.da27 .vz-vignette, html.da27 [data-effet~="carte"], html.da27 .vz-vignette__cadre img, html.da27 .da-video__media img { transition: none; }
  html.da27 .ui-offer-card:hover, html.da27 .da-video:hover, html.da27 .vz-vignette:hover, html.da27 [data-effet~="carte"]:hover, html.da27 .vz-vignette:hover img, html.da27 .da-video:hover .da-video__media img { transform: none; }
  .fx-prog { display: none; }
}
@media print { .fx-nav, .fx-bas, .fx-prog { display: none; } html.da27 .fx-pre { opacity: 1; transform: none; } }
