/* ---------------------------------------------------------------------------
 * Hero slider (module Slides) — CSS STRUCTUREL COMMUN.
 *
 * 100 % statique : toutes les valeurs par instance (hauteur, couleurs des dots,
 * focal, overlay, padding, tailles…) sont des VARIABLES CSS posées inline sur
 * les éléments par le rendu (voir Views/front/zone.php + hero_html). Cette
 * feuille ne contient que la structure + les animations + le responsive, donc
 * elle est identique pour tous les heros et tous les sites → chargée UNE fois
 * (cache navigateur) au lieu d'être ré-inlinée à chaque rendu.
 *
 * Source de vérité : public/assets/slides-designer/app.js → standaloneCss()
 * (+ extensions). Si le designer évolue, régénérer ce fichier depuis sa sortie.
 * NB dual-copy Laragon : à recopier dans la copie déployée d'arkana.
 * ------------------------------------------------------------------------- */
html,body{margin:0}.carousel{position:relative}.carousel-vertical .carousel-item{transition:transform .6s ease-in-out}.carousel-vertical .carousel-item-next:not(.carousel-item-start),.carousel-vertical .active.carousel-item-end{transform:translateY(100%)}.carousel-vertical .carousel-item-prev:not(.carousel-item-end),.carousel-vertical .active.carousel-item-start{transform:translateY(-100%)}.hero-slide{min-height:var(--hero-height-desktop);position:relative;overflow:hidden}.hero-slide::before{content:"";position:absolute;z-index:1;inset:0;background:var(--hero-overlay-bg)}.hero-background{position:absolute;inset:0;background-size:cover;background-repeat:no-repeat;background-position:var(--focal-desktop-x) var(--focal-desktop-y);will-change:transform}.hero-content{position:relative;z-index:2;min-height:var(--hero-height-desktop);display:flex;flex-direction:column;justify-content:center;color:#fff;padding:var(--padding-desktop-y) var(--padding-desktop-x)}.hero-content-inner{width:100%}.hero-content:not(.hero-boxed) .hero-content-inner{max-width:var(--content-max-width-desktop)}.hero-content.hero-boxed{padding-left:0;padding-right:0}.hero-content.align-center .hero-content-inner{margin-inline:auto;text-align:center}.hero-content.align-end .hero-content-inner{margin-left:auto;text-align:right}.hero-actions{display:flex;flex-wrap:wrap}.hero-content.align-center .hero-actions{justify-content:center}.hero-content.align-end .hero-actions{justify-content:flex-end}.hero-component{max-width:100%;font-size:var(--size-desktop,inherit);text-align:var(--align-desktop,inherit)}.hero-component-image{width:var(--width-desktop)}.hero-background.bg-kenBurns{animation:heroKenBurns var(--bg-duration) ease-in-out both}.hero-background.bg-zoomOut{animation:heroZoomOut var(--bg-duration) ease-out both}.hero-background.bg-panLeft{animation:heroPanLeft var(--bg-duration) ease-in-out both}.hero-background.bg-panRight{animation:heroPanRight var(--bg-duration) ease-in-out both}@keyframes heroKenBurns{from{transform:scale(1)}to{transform:scale(1.16) translate3d(-2%,-1%,0)}}@keyframes heroZoomOut{from{transform:scale(1.18)}to{transform:scale(1)}}@keyframes heroPanLeft{from{transform:scale(1.08) translateX(3%)}to{transform:scale(1.08) translateX(-3%)}}@keyframes heroPanRight{from{transform:scale(1.08) translateX(-3%)}to{transform:scale(1.08) translateX(3%)}}.hero-dots{--dot-size:12px;position:absolute;z-index:6;display:flex;gap:9px;margin:0;padding:0}.hero-dots.size-sm{--dot-size:8px;gap:7px}.hero-dots.size-lg{--dot-size:16px;gap:12px}.hero-dots.dots-desktop-bottom-center{left:50%;bottom:22px;transform:translateX(-50%)}.hero-dots.dots-desktop-bottom-left{left:28px;bottom:22px}.hero-dots.dots-desktop-bottom-right{right:28px;bottom:22px}.hero-dots.dots-desktop-left-center{left:22px;top:50%;transform:translateY(-50%);flex-direction:column}.hero-dots.dots-desktop-right-center{right:22px;top:50%;transform:translateY(-50%);flex-direction:column}.hero-dot{width:var(--dot-size);height:var(--dot-size);border:2px solid var(--dots-outline);background:var(--dots-fill);padding:0;opacity:.9;color:var(--dots-fill)}.hero-dot.active{background:var(--dots-active);border-color:var(--dots-active);color:var(--dots-active);opacity:1;transform:scale(1.18)}.shape-round .hero-dot{border-radius:50%}.shape-square .hero-dot{border-radius:0}.shape-rounded .hero-dot{border-radius:4px}.shape-bar .hero-dot{width:calc(var(--dot-size)*2.6);height:max(4px,calc(var(--dot-size)/2.5));border-radius:99px}.shape-number .hero-dot{width:24px;height:25px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--dots-fill)}.shape-number .hero-dot.active{border-bottom-color:var(--dots-active);color:var(--dots-active);background:transparent;transform:none}@media(max-width:767.98px){.hero-slide,.hero-content{min-height:var(--hero-height-mobile)}.hero-content{padding:var(--padding-mobile-y) var(--padding-mobile-x)}.hero-content:not(.hero-boxed) .hero-content-inner{max-width:var(--content-max-width-mobile)}.hero-background{background-position:var(--focal-mobile-x) var(--focal-mobile-y)}.hero-component{font-size:var(--size-mobile,var(--size-desktop,inherit));text-align:var(--align-mobile,var(--align-desktop,inherit))}.hero-component-image{width:var(--width-mobile)}.hero-dots.dots-mobile-bottom-center{left:50%;right:auto;top:auto;bottom:18px;transform:translateX(-50%);flex-direction:row}.hero-dots.dots-mobile-bottom-left{left:18px;right:auto;top:auto;bottom:18px;transform:none;flex-direction:row}.hero-dots.dots-mobile-bottom-right{left:auto;right:18px;top:auto;bottom:18px;transform:none;flex-direction:row}.hero-dots.dots-mobile-left-center{left:14px;right:auto;top:50%;bottom:auto;transform:translateY(-50%);flex-direction:column}.hero-dots.dots-mobile-right-center{left:auto;right:14px;top:50%;bottom:auto;transform:translateY(-50%);flex-direction:column}}@media(prefers-reduced-motion:reduce){.carousel-item,.hero-background{transition:none!important;animation:none!important}}.hero-content{--content-actions-align:flex-start}.hero-content.align-center{--content-actions-align:center}.hero-content.align-end{--content-actions-align:flex-end}.hero-content.align-start .hero-actions,.hero-content.align-center .hero-actions,.hero-content.align-end .hero-actions{justify-content:var(--actions-align-desktop,var(--content-actions-align))}@media(max-width:767.98px){.hero-content.align-start .hero-actions,.hero-content.align-center .hero-actions,.hero-content.align-end .hero-actions{justify-content:var(--actions-align-mobile,var(--content-actions-align))}}.hero-slide::before{background:var(--slide-overlay-bg,var(--hero-overlay-bg))}.hero-arrows{position:absolute;z-index:7;display:flex;gap:.55rem;pointer-events:none}.hero-arrow{display:grid;place-items:center;width:44px;height:52px;padding:0;border:1px solid rgb(255 255 255/35%);border-radius:.65rem;background:color-mix(in srgb,var(--arrow-bg) 68%,transparent);color:var(--arrow-color);font-size:2rem;line-height:1;pointer-events:auto}.hero-arrows.size-sm .hero-arrow{width:36px;height:42px;font-size:1.55rem}.hero-arrows.size-lg .hero-arrow{width:54px;height:64px;font-size:2.55rem}.hero-arrows.arrows-minimal .hero-arrow{width:auto;background:transparent;border:0;text-shadow:0 2px 8px #000}.hero-arrows.arrows-desktop-middle-edges{inset:50% 16px auto;justify-content:space-between;transform:translateY(-50%)}.hero-arrows.arrows-desktop-bottom-left{left:24px;bottom:22px}.hero-arrows.arrows-desktop-bottom-center{left:50%;bottom:22px;transform:translateX(-50%)}.hero-arrows.arrows-desktop-bottom-right{right:24px;bottom:22px}@media(max-width:767.98px){.hero-arrows.arrows-mobile-middle-edges{inset:50% 8px auto;justify-content:space-between;transform:translateY(-50%)}.hero-arrows.arrows-mobile-bottom-left{inset:auto auto 18px 14px;transform:none}.hero-arrows.arrows-mobile-bottom-center{inset:auto auto 18px 50%;transform:translateX(-50%)}.hero-arrows.arrows-mobile-bottom-right{inset:auto 14px 18px auto;transform:none}}.hero-arrows.arrows-desktop-bottom-center.nav-desktop-combined{width:min(var(--combined-nav-width),calc(100% - 32px));bottom:6px;justify-content:space-between;align-items:center}@media(max-width:767.98px){.hero-arrows.arrows-mobile-bottom-center.nav-mobile-combined{width:min(var(--combined-nav-width),calc(100% - 20px));inset:auto auto 4px 50%;justify-content:space-between;align-items:center}}.hero-arrow{background:var(--arrow-bg);color:var(--arrow-color)}.hero-arrow:hover,.hero-arrow:focus-visible{background:var(--arrow-bg-hover);color:var(--arrow-color-hover)}.hero-slide::before{background:var(--slide-overlay-bg-desktop,var(--hero-overlay-bg-desktop,var(--hero-overlay-bg)))}@media(max-width:767.98px){.hero-slide::before{background:var(--slide-overlay-bg-mobile,var(--hero-overlay-bg-mobile,var(--slide-overlay-bg-desktop,var(--hero-overlay-bg))))}}.hero-slide::before{display:none}.hero-overlay-layer{position:absolute;inset:0;z-index:1;pointer-events:none}.hero-overlay-layer.overlay-mobile{display:none}@media(max-width:767.98px){.hero-overlay-layer.overlay-desktop{display:none}.hero-overlay-layer.overlay-mobile{display:block}}.hero-content.align-desktop-start{--content-actions-align:flex-start}.hero-content.align-desktop-center{--content-actions-align:center}.hero-content.align-desktop-end{--content-actions-align:flex-end}.hero-content.align-desktop-start .hero-content-inner{margin-left:0;margin-right:auto;text-align:left}.hero-content.align-desktop-center .hero-content-inner{margin-inline:auto;text-align:center}.hero-content.align-desktop-end .hero-content-inner{margin-left:auto;margin-right:0;text-align:right}.hero-content.align-desktop-start .hero-actions,.hero-content.align-desktop-center .hero-actions,.hero-content.align-desktop-end .hero-actions{justify-content:var(--content-actions-align)}@media(max-width:767.98px){.hero-content.align-mobile-start{--content-actions-align:flex-start}.hero-content.align-mobile-center{--content-actions-align:center}.hero-content.align-mobile-end{--content-actions-align:flex-end}.hero-content.align-mobile-start .hero-content-inner{margin-left:0;margin-right:auto;text-align:left}.hero-content.align-mobile-center .hero-content-inner{margin-inline:auto;text-align:center}.hero-content.align-mobile-end .hero-content-inner{margin-left:auto;margin-right:0;text-align:right}.hero-content.align-mobile-start .hero-actions,.hero-content.align-mobile-center .hero-actions,.hero-content.align-mobile-end .hero-actions{justify-content:var(--content-actions-align)}}.hero-overlay-layer{display:block;background:var(--slide-overlay-desktop);mix-blend-mode:var(--slide-overlay-blend-desktop,normal)}.hero-arrow{border:0}.hero-arrows.arrows-desktop-middle-edges{inset:50% 16px auto;justify-content:space-between;transform:translateY(-50%)}.hero-arrows.arrows-desktop-bottom-edges{inset:auto 16px 18px;justify-content:space-between;transform:none}@media(max-width:767.98px){.hero-overlay-layer{display:block;background:var(--slide-overlay-mobile);mix-blend-mode:var(--slide-overlay-blend-mobile,normal)}.hero-arrows.arrows-mobile-middle-edges{inset:50% 8px auto;justify-content:space-between;transform:translateY(-50%)}.hero-arrows.arrows-mobile-bottom-edges{inset:auto 8px 12px;justify-content:space-between;transform:none}}.hero-background.bg-panDown{animation:heroPanDown var(--bg-duration) ease-in-out both}.hero-background.bg-panUp{animation:heroPanUp var(--bg-duration) ease-in-out both}@keyframes heroPanDown{from{transform:scale(1.1) translateY(-4%)}to{transform:scale(1.1) translateY(4%)}}@keyframes heroPanUp{from{transform:scale(1.1) translateY(4%)}to{transform:scale(1.1) translateY(-4%)}}.hero-arrow{font-size:var(--arrow-size,32px)}
/* Pagination numérotée en gouttière latérale : on décale le contenu aligné du même côté pour qu'il ne colle pas aux numéros. */
.carousel:has(.hero-dots.shape-number.dots-desktop-left-center) .hero-content.align-desktop-start .hero-content-inner{margin-left:calc(var(--container-out-margin, 0px) / 3)}
.carousel:has(.hero-dots.shape-number.dots-desktop-right-center) .hero-content.align-desktop-end .hero-content-inner{margin-right:calc(var(--container-out-margin, 0px) / 3)}
@media(max-width:767.98px){.carousel:has(.hero-dots.shape-number.dots-mobile-left-center) .hero-content.align-mobile-start .hero-content-inner{margin-left:38px}.carousel:has(.hero-dots.shape-number.dots-mobile-right-center) .hero-content.align-mobile-end .hero-content-inner{margin-right:38px}}
/* Mode « Boîte » (container-fluid → container) : le contenu (.hero-content-inner.container,
   largeur du .container Bootstrap = celle du site) reste CENTRÉ quel que soit l'alignement
   du texte. Placé en DERNIER pour primer sur les règles align-desktop/mobile-* (margin). */
.hero-content.hero-boxed .hero-content-inner{margin-left:auto!important;margin-right:auto!important}
/* Le hero RESTE dans le .container du site (pas de plein-bord). Le .container imbriqué de
   .hero-content-inner ajoutait son propre padding (--bs-gutter-x/2 ≈ 12px), décalant le
   contenu vers l'intérieur (texte à 44 au lieu de 32). On annule ce padding pour que le
   contenu « Boîte » tombe PILE sur la grille du site. */
.hero-content.hero-boxed .hero-content-inner.container{padding-left:0;padding-right:0}
/* Pagination « numéros » gauche/droite-centre : les CHIFFRES NE BOUGENT PAS. C'est le
   CONTENU « Boîte » (texte + CTA) qui se décale pour les dégager, via --container-out-margin
   (gouttière) + la largeur des numéros (~24px). Ne s'applique QUE si ces numéros existent. */
.carousel:has(.hero-dots.shape-number.dots-desktop-left-center) .hero-content.hero-boxed.align-desktop-start .hero-content-inner.container{margin-left:calc(var(--container-out-margin, 0px))!important}
.carousel:has(.hero-dots.shape-number.dots-desktop-right-center) .hero-content.hero-boxed.align-desktop-end .hero-content-inner.container{margin-right:calc(var(--container-out-margin, 0px))!important}
/* Accessibilité RGAA 13.8 / WCAG 2.2.2 : bouton pause/lecture visible (posé au runtime
   par hero.js dès qu'il y a défilement auto). Contraste suffisant (fond sombre / icône
   blanche), cible ≥ 40px, focus visible. */
.hero-pause{position:absolute;z-index:8;top:14px;right:14px;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:rgba(15,23,42,.62);color:#fff;font-size:1rem;line-height:1;cursor:pointer;transition:background-color .15s}
.hero-pause:hover{background:rgba(15,23,42,.85)}
.hero-pause:focus-visible{outline:3px solid #fff;outline-offset:2px;background:rgba(15,23,42,.85)}
@media(max-width:767.98px){.hero-pause{top:10px;right:10px;width:36px;height:36px}}
/* Position au choix (classe posée sur la racine .carousel par le designer, ex.
   hero-pausepos-bottom-left). Défaut sans classe = haut-droit (règle .hero-pause ci-dessus). */
.hero-pausepos-top-left .hero-pause{top:14px;left:14px;right:auto;bottom:auto}
.hero-pausepos-top-right .hero-pause{top:14px;right:14px;left:auto;bottom:auto}
.hero-pausepos-bottom-left .hero-pause{bottom:14px;left:14px;top:auto;right:auto}
.hero-pausepos-bottom-right .hero-pause{bottom:14px;right:14px;top:auto;left:auto}
@media(max-width:767.98px){.hero-pausepos-top-left .hero-pause{top:10px;left:10px}.hero-pausepos-top-right .hero-pause{top:10px;right:10px}.hero-pausepos-bottom-left .hero-pause{bottom:10px;left:10px}.hero-pausepos-bottom-right .hero-pause{bottom:10px;right:10px}}
/* Glisser-souris : curseur « main » (hero.js ajoute .carousel-grab / .is-grabbing). */
.carousel-grab .carousel-inner{cursor:grab}
.carousel-grab .carousel-inner.is-grabbing{cursor:grabbing;user-select:none}
@media(prefers-reduced-motion:reduce){.hero-pause{transition:none}}

/* ISOLATION DE L'EMPILEMENT — indispensable pour les sections qui remontent sur
   le héros via une marge négative.
   `.hero-slide` est `position:relative` SANS z-index : il ne crée donc pas de
   contexte d'empilement, et son `.hero-content{z-index:2}` s'échappe au niveau de
   la page. Une section suivante en z-index:1 restait dessous — ses liens n'étaient
   pas cliquables, en édition COMME sur le site public.
   `isolation:isolate` crée le contexte sans toucher au z-index : les couches
   internes du héros (fond, overlay, flèches, points) sont préservées, mais elles
   ne débordent plus. Un simple z-index:1 suffit alors à passer devant. */
.hero-slide { isolation: isolate; }