.animate {
    -webkit-transition: all 0.4s var(--resineo-transition); 
	-o-transition: all 0.4s var(--resineo-transition); 
	transition: all 0.4s var(--resineo-transition);
}
.marque-resineo {
    color: var(--wp--preset--color--univers-main);
    text-transform: uppercase;
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 600;
    line-height: 1;
}
/* Pastille « flèche ↗ » des slides (carrousels Solutions et Dossier) : accent d'univers,
   comme la pastille des tuiles de méga-menu (blocs/mega-menu/style.scss) qui la reprend. */
.link-resineo {
    position: absolute;
    top: 15px;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--wp--preset--color--univers-main);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-decoration: none;
    padding-left: 1px;
}
.link-resineo svg {
    width: 10px;
    aspect-ratio: 1/1;
    color: var(--wp--preset--color--white);
    transition: transform .3s var(--transition-effect, ease-in-out);
}
/* Survol de la carte cliquable : la flèche se relève (↗ → →), même geste, même durée et même
   courbe que la grille d'actualités (`blocs/grille-actus/style.scss`, `&__card:hover
   &__card-arrow::after`) et que les boutons « Plein ». Au repos rien ne bouge : la transition
   ci-dessus n'a d'effet qu'au changement d'état. Scopé sur `a.slide-title` : la pastille du
   méga-menu, qui réemploie `.link-resineo`, a son propre survol. */
a.slide-title:hover .link-resineo svg,
a.slide-title:focus-visible .link-resineo svg {
    transform: rotate(45deg);
}

/* CARTE CLIQUABLE (carrousels Solutions et Actualités) : `.slide-title` n'est plus un <div>
   mais le LIEN lui-même — cf. `docs/blocs.md` › « Carte cliquable ». Le rendu doit rester au
   pixel près celui du <div> : on neutralise donc les styles de lien de Blocksy, qui pose
   `a { color: var(--theme-link-initial-color) }` et `a:hover { color: var(--theme-link-hover-color) }`
   (spécificités 0,0,1 et 0,1,1 — les sélecteurs ci-dessous, 0,1,1 et 0,2,1, passent devant sans
   `!important`). Sans ce reset, `.nom-solution`, qui prend sa couleur par HÉRITAGE, virerait à
   l'accent d'univers ; `.marque-resineo` et `.actu-title`, eux, ont une couleur explicite.
   Plus aucun `.slide-title` dans `.slide-hotspot` (devenu `.slide-pastille` à la ligne 22) : rien d'autre ne les touche. */
a.slide-title,
a.slide-title:hover,
a.slide-title:focus,
a.slide-title:active {
    color: inherit;
    text-decoration: none;
}
/* Repère de focus clavier : liseré à l'INTÉRIEUR de la carte — la slide « actus » a
   `overflow: hidden` et un `clip-path`, un contour extérieur y serait rogné.
   `transition-property: none` : `.animate` transitionne `all`, donc `outline-*` aussi — mesuré,
   le liseré n'apparaissait qu'~0,3 s après le Tab (`outline-style` est discret, il bascule à
   mi-parcours). Un repère de focus doit être immédiat. La déclaration est ici, et non dans un
   `transition-duration`, parce que les `transition-delay` de `.swiper-solutions .slide-title`
   (0,2,0) et `.swiper-actus .swiper-slide-active .slide-title` (0,3,0) resteraient devant. Rien
   du rendu d'avant n'est touché : `.slide-title` était un <div>, cet état n'existait pas. */
a.slide-title:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -3px;
    transition-property: none;
}

/* PHOTO CLIQUABLE (carrousels Solutions et Actualités, avenant n°2 ligne 13) : la photo de la slide
   ACTIVE ouvre la fiche comme le cartouche — le clic est traité par `clicPhotoSlide()`
   (blocs/slider/js/swiper-config.js), qui rejoue le clic sur le lien existant. Ce curseur l'annonce.
   Seulement quand un lien existe (`:has`) : la fiche « sans page dédiée » n'a qu'un <div>. Les slides
   latérales gardent le curseur de glissement de Swiper (`grabCursor`). */
.swiper-solutions .swiper-slide-active:has(a.slide-title[href]) .slide-img,
.swiper-actus .swiper-slide-active:has(a.slide-title[href]) .slide-img {
    cursor: pointer;
}

/* Sliders Resineo*/
.swiper-resineo {
    width: 100%;
    height: 100%;
    padding-bottom: calc(80px * var(--rux-nav-after, 1)); /* blanc sous les flèches : --rux-nav-after (0,25 dans la bande 1024–1599, global.scss ; repli 1) */
    --swiper-theme-color: var(--wp--preset--color--univers-dark);
    /* Remplissage de la progressbar (.swiper-pagination-progressbar-fill) et puce active en
       accent d'univers, pour TOUS les sliders du thème. Les flèches, elles, sont en Gris Foncé
       (--rsn-fleche-couleur, ci-dessous) : elles ne lisent plus --swiper-theme-color ni
       --swiper-navigation-color. */
    --swiper-pagination-color: var(--wp--preset--color--univers-main);
    --swiper-pagination-progressbar-bg-color: var(--wp--preset--color--grey-light);
    --swiper-pagination-progressbar-size: var(--rsn-barre-hauteur);
    --swiper-navigation-size: var(--rsn-fleche-taille);
    /* NAVIGATION COMMUNE des sliders (flèche · barre · flèche, maquette Figma). Toutes les
       valeurs du composant sont ici, nommées ; la disposition bureau est en fin de fichier.
       (docs/blocs.md › « Navigation commune des sliders »). */
    --rsn-fleche-taille: 40px;
    --rsn-fleche-trait: 1.5px;
    --rsn-fleche-couleur: var(--wp--preset--color--univers-grey-dark);
    --rsn-fleche-padding-haut: 0px;
    --rsn-fleche-marge: 8px;          /* entre la flèche et la barre (mobile) ; 0 au bureau (cf. --rsn-ecart) */
    --rsn-fleche-retrecit: 0;
    --rsn-barre-hauteur: 10px;
    --rsn-barre-rayon: 100px;
    --rsn-remplissage-rayon: var(--rsn-barre-rayon);
    --rsn-barre-marge-x: 10px;        /* marge latérale de la barre (mobile) ; 0 au bureau */
    --rsn-barre-largeur: 400px;
    --rsn-ecart: 27px;                /* flèche ↔ barre au bureau */
    /* Piste de la barre : blanche sur fond GRIS (cas par défaut), #F7F7F7 sur fond BLANC. */
    --rsn-piste: var(--wp--preset--color--univers-white);
    --resineo-transition: cubic-bezier(.20,1,.25,1);
}
.swiper-slide {
    width: var(--swiper-slide-width, 100%);
    display: flex;
    position: relative;
    /*margin-right: var(--swiper-spaceBetween, 0);*/
    transition-delay: .1s;
}
.slide-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 1;
}
.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.swiper-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    margin-top: calc(50px * var(--rux-nav-k, 1)); /* marge au-dessus des flèches : --rux-nav-k (0,25 dans la bande 1024–1599, global.scss ; repli 1) */
    /*position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -100%);*/
}
.swiper-navigation-column {
    row-gap: 10px;
    flex-wrap: wrap;
}
.swiper-navigation .break {
    flex-basis: 100%;
}
.swiper-resineo .swiper-pagination-progressbar {
    position: relative;
    top: 0;
    border-radius: var(--rsn-barre-rayon);
    overflow: hidden;
    margin: 0 var(--rsn-barre-marge-x);
    background: var(--rsn-piste);
}
.swiper-resineo .swiper-pagination-progressbar-fill {
    border-radius: var(--rsn-remplissage-rayon);
}
.swiper-resineo .swiper-button {
	box-sizing: border-box;
	flex-shrink: var(--rsn-fleche-retrecit);
	border: var(--rsn-fleche-trait) solid var(--rsn-fleche-couleur);
	color: var(--rsn-fleche-couleur);
	position: relative;
    border-radius: 50%;
    aspect-ratio: 1/1;
    top: 0;
    margin: 0;
    padding-top: var(--rsn-fleche-padding-haut);
}
.swiper-resineo .swiper-button-prev {
    margin-right: var(--rsn-fleche-marge);
}
.swiper-resineo .swiper-button-next {
    margin-left: var(--rsn-fleche-marge);
}
.swiper-resineo .swiper-button i {
    color: var(--wp--preset--color--univers-dark);
    font-size: 18px;
}
.swiper-resineo .swiper-button svg {
	height: 13px;
	width: 13px;
}
.swiper-resineo .swiper-button svg.swiper-navigation-icon {
    display: none;
}

/* Réalisations hotspot (variantes « hotspot » de tuiles + « galerie photos ») : remplissage de la
   progressbar en couleur d'accent univers-main (--swiper-pagination-color). Les flèches ne
   suivent plus --swiper-navigation-color : elles sont en Gris Foncé comme tous les sliders
   (--rsn-fleche-couleur), blanches seulement sur la photo de la galerie au bureau. Scopé aux deux
   conteneurs du bloc → n'affecte pas les autres sliders (solutions, actus, etc.). */
.swiper-realisations,
.swiper-amenagements-wrapper {
    --swiper-navigation-color: var(--wp--preset--color--univers-main);
    --swiper-pagination-color: var(--wp--preset--color--univers-main);
}


/* Slider Solutions*/
.swiper-solutions {
    /* Hauteur du slider = hauteur de la slide active (carrée), calculée depuis la largeur
       du slider par la règle `.swiper-wrapper` du bloc @media (min-width: 800px) ci-dessous
       (unités cqw) : `container-type` fait de ce bloc le conteneur de requête. Plus de
       min-height fixe (600px, et 650px sous 1000px) : elle ne servait qu'à masquer le creux
       de la piste pendant la transition, et laissait ~125px d'espace mort sur portable
       (slider à 1092px). Sans effet sur la mesure JS : swiper-config.js lit el.clientWidth,
       que le confinement en largeur ne change pas (le bloc n'est pas dimensionné par son
       contenu). */
    container-type: inline-size;
    /* Blanc sous le slider : les 80px génériques de .swiper-resineo, SANS le facteur
       --rux-nav-after (réglage UX, global.scss). Ici la navigation est ABSOLUE dans ce padding
       (top: 99 %, plus bas) : ce padding est l'écart vignette → flèches (≈ 45px), pas du vide
       sous les flèches — le diviser collait les flèches à la vignette (7px, retour Reuh sur le
       dev, 2026-09-08). Même spécificité que .swiper-resineo, plus bas dans le fichier → gagne ;
       la règle mobile (≤ 800px, 50px) reste plus bas encore. */
    padding-bottom: 80px;
    --swiper-adjacent-slides-showed: 4;
    --swiper-spaceBetween: 30px;
    --swiper-slide-width: 260px;
    /* Point d'accent des points de pagination (mobile) sur la couleur d'univers. */
    --swiper-pagination-color: var(--wp--preset--color--univers-main);
}
/* Nom de la solution rendu en <span> dans le bloc « Carrousel — Solutions » → bloc
   (marque sur sa ligne, nom dessous), comme l'ancien <h3>. */
.swiper-solutions .nom-solution {
    display: block;
}
.swiper-solutions .swiper-slide {
    aspect-ratio: 1/1;
    margin-right: var(--swiper-spaceBetween, 0);
    flex-direction: column;
}
@media only screen and (min-width: 800px){
.swiper-solutions .swiper-slide-active {
    width: calc(100% - ((var(--swiper-slide-width) + var(--swiper-spaceBetween)) * (var(--swiper-adjacent-slides-showed) - 1) ));
    min-width: var(--swiper-slide-width);
}
/* La piste garde la hauteur que la slide active AURA (= sa largeur, elle est carrée).
   Sans cela, pendant la transition l'ancienne active rétrécit et la nouvelle grandit en
   même temps : à mi-chemin le plus grand carré est plus petit, la piste creuse (mesuré :
   396 → 311 → 396px à 1440px de fenêtre) et tout ce qui suit saute. Même soustraction que
   la largeur de la slide active, 100cqw = largeur du slider. Suit toute largeur, y compris
   les variables `--rux-*` posées sur :root (global.scss ou CSS additionnel). */
.swiper-solutions .swiper-wrapper {
    min-height: calc(100cqw - ((var(--swiper-slide-width) + var(--swiper-spaceBetween)) * (var(--swiper-adjacent-slides-showed) - 1)));
}
}
.swiper-solutions .slide-title {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: calc(var(--swiper-slide-width) - var(--swiper-title-offset, 65px));
    transform: translate(-50%,-50%);
    width: 80%;
    max-width: 205px;
    padding: 20px 20px 12px;
    background-color: var(--wp--preset--color--white);
    transition-delay: .10s;
    line-height: 1;
}
.swiper-solutions .swiper-slide-active .slide-title {
    top: 50%;
}
/* Marque + nom dans la pastille (slide-title) : preset du thème, uppercase.
   « medium » et non « normal » : --wp--preset--font-size--normal n'est pas un preset de
   theme.json mais un reliquat de WordPress cœur (wp-block-library-inline-css, 16px FIXES),
   hors rampe fluide et jamais réduit sur portable — un px en dur déguisé. */
.swiper-solutions .slide-title .marque-resineo,
.swiper-solutions .slide-title .nom-solution {
    font-size: var(--wp--preset--font-size--medium);
    text-transform: uppercase;
}
.swiper-solutions .slide-title .nom-solution {
    margin: 0;
}
/* MINIATURES : cartouche proportionnel à la vignette (avenant n°2, ligne 24). Référence = grand
   écran, vignette de 260px : nom 19,55px (0,0752), marque 17px (0,0654), padding 20 / 20 / 12px.
   Sur portable le JS (echelleSolutions) rétrécit la vignette (177px) mais les polices suivent la
   fenêtre et ne bougeaient presque pas : le cartouche était démesuré et un nom long passait sur
   deux lignes. --swiper-slide-width est en px au-dessus de 800px (y compris réécrite en ligne par
   le JS) ; sous 800px elle est en % et le cartouche garde ses valeurs : d'où la borne. La slide
   ACTIVE (:not) garde ses propres valeurs ; dans l'éditeur, c'est style.scss qui rend la 1re
   slide à ses valeurs actives. Pas de plancher (décision client : on teste jusqu'à ~13px). */
@media only screen and (min-width: 801px) {
.swiper-solutions .swiper-slide:not(.swiper-slide-active) .slide-title {
    padding: calc(min(var(--swiper-slide-width), 260px) * 0.0769) calc(min(var(--swiper-slide-width), 260px) * 0.0769) calc(min(var(--swiper-slide-width), 260px) * 0.0462);
}
.swiper-solutions .swiper-slide:not(.swiper-slide-active) .slide-title .marque-resineo {
    font-size: calc(min(var(--swiper-slide-width), 260px) * 0.0654);
}
.swiper-solutions .swiper-slide:not(.swiper-slide-active) .slide-title .nom-solution {
    font-size: calc(min(var(--swiper-slide-width), 260px) * 0.0752);
}
/* La pastille flèche suit la même échelle : restée à 30px sur une vignette de 177px, elle
   descendait sur le nom et le chevauchait. Sur 260px : 28px (et non 30) à 13 / 14px du coin (et
   non 15 / 20), flèche de 9px — un peu plus petite et plus près du coin, pour la décoller d'un
   nom long (retour Reuh, 2026-10-02). */
.swiper-solutions .swiper-slide:not(.swiper-slide-active) .slide-title .link-resineo {
    top: calc(min(var(--swiper-slide-width), 260px) * 0.05);
    right: calc(min(var(--swiper-slide-width), 260px) * 0.0538);
    width: calc(min(var(--swiper-slide-width), 260px) * 0.1077);
    height: calc(min(var(--swiper-slide-width), 260px) * 0.1077);
}
.swiper-solutions .swiper-slide:not(.swiper-slide-active) .slide-title .link-resineo svg {
    width: calc(min(var(--swiper-slide-width), 260px) * 0.0346);
}
}
.swiper-solutions .slide-text {
    position: absolute;
    z-index: 2;
    left: calc(100% + var(--swiper-spaceBetween));
    height: calc(100% - var(--swiper-slide-width) - 40px);
    width: calc(var(--swiper-slide-width) * 2 + var(--swiper-spaceBetween));
    max-width: min(550px, calc( (var(--swiper-slide-width) ) * (var(--swiper-adjacent-slides-showed) - 1) ));
    bottom: 0px;
    opacity: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* Marque + nom dans le panneau de détail (slide-text) : graisse 600, uppercase,
   tailles dynamiques du thème (marque « medium », nom = « medium » ×1,5). */
.swiper-solutions .slide-text .marque-resineo,
.swiper-solutions .slide-text .nom-solution {
    font-weight: 600;
    text-transform: uppercase;
}
.swiper-solutions .slide-text .marque-resineo {
    font-size: var(--wp--preset--font-size--medium);
}
.swiper-solutions .slide-text .nom-solution {
    font-size: calc(var(--wp--preset--font-size--medium) * 1.5);
    margin: 0 0 15px;
}
.swiper-solutions .swiper-slide-active .slide-text {
    opacity: 1;
    pointer-events: all;
    transition: opacity 0.4s var(--resineo-transition) .4s;
}
.swiper-solutions .swiper-navigation {
    max-width: 705px;
    margin-top: 0px;
    position: absolute;
    top: 99%;
    left: 50%;
    transform: translate(-50%, -100%);
}
/* Sous 1600px de fenêtre, le site est à 1092px (× 0,8, css/global.scss) : vignettes et écarts
   suivent le même facteur, sinon la slide active — calculée par soustraction — s'effondre.
   Valeurs LITTÉRALES et non calc() : swiper-config.js lit --swiper-slide-width en parseFloat().
   Les seuils de voisines ci-dessous restent en largeur de fenêtre, comme la version zoomée. */
@media only screen and (min-width: 1024px) and (max-width: 1599.98px){
.swiper-solutions {
    --swiper-spaceBetween: 24px;
    --swiper-slide-width: 208px;
    --swiper-title-offset: 52px;
}
}
/* VIGNETTES À 0,62 DE LA GRANDE PHOTO, JUSQU'AU BORD DE LA FENÊTRE (proposition 2 de la cliente,
   2026-10-05, avenant n°2, ligne 24). Dès 1024px de fenêtre, sans borne haute. La vignette vaut
   0,62 × la grande photo (t = r·A) : la grande photo GRANDIT donc avec l'écran. On voit 3,5 vignettes
   jusqu'au bord de la fenêtre, la dernière à moitié : A = (W' - n·g) / (1 + n·r), W' = largeur du slider
   + gouttière jusqu'au bord de la fenêtre. Le calcul est fait par echelleSolutions() (swiper-config.js),
   qui pose en ligne vignette, écart, voisines et décalage du titre. Garde-fou : si le plus long des textes
   « Usage » n'a pas sa place entre les vignettes et la barre de progression (air minimal
   --rux-solutions-texte-marge), le JS passe à 2,5 vignettes (même formule). Réglages sur :root pour
   qu'un CSS additionnel les surcharge :
     --rux-solutions-vignettes    n de départ (3,5) ; 0 = interrupteur (géométrie d'avant, --rux-solutions-k, sans débord, texte centré)
     --rux-solutions-ratio        vignette / grande photo (0,62)
     --rux-solutions-texte-marge  air minimal texte → barre de progression (24px) qui décide du passage à 2,5
     --rux-solutions-debord       1 = la piste va jusqu'au bord de la fenêtre ; 0 = mêmes vignettes, coupe au contenu */
@media only screen and (min-width: 1024px){
:root {
    --rux-solutions-vignettes: 3.5;
    --rux-solutions-ratio: 0.62;
    --rux-solutions-texte-marge: 24px;
    --rux-solutions-debord: 1;
}
/* Le texte part du haut de son panneau (40px sous les vignettes, comme la maquette) au lieu
   d'y être centré : centré, il laissait ~95px de vide sous les vignettes. CLASSE `rcs-vignettes`, posée
   par le JS seulement quand la nouvelle géométrie est appliquée : avec `--rux-solutions-vignettes: 0`
   (ou dans l'éditeur, où le JS ne tourne pas), le texte reste centré comme avant. */
.swiper-solutions.rcs-vignettes .slide-text {
    justify-content: flex-start;
}
/* DÉBORD : classe posée par le JS quand le calcul ci-dessus tourne avec le débord actif (jamais dans
   une colonne `.wp-block-column` ni à côté d'une barre latérale Blocksy : coupe au contenu).
   `overflow: visible` + `clip-path` ouvert à droite seulement : la slide qui sort à gauche reste
   coupée au bord du contenu. Le corps coupe (sans devenir un conteneur de défilement) ce qui
   dépasse la fenêtre : pas d'ascenseur horizontal. */
body:has(.swiper-solutions.rcs-debord) {
    overflow-x: clip;
}
.swiper-solutions.rcs-debord {
    overflow: visible;
    clip-path: inset(0 -100vw 0 0);
}
}
@media only screen and (max-width: 1310px){
.swiper-solutions {
    --swiper-adjacent-slides-showed: 3.5;
}
}
@media only screen and (max-width: 1160px){
.swiper-solutions {
    --swiper-adjacent-slides-showed: 3;
}
}
@media only screen and (max-width: 1000px){
.swiper-solutions {
    /* Slide active + ~1,2 voisine : laisse un peu plus de place au panneau de texte
       (2.4 affichait une demi-slide bancale, 2 collait trop le texte). */
    --swiper-adjacent-slides-showed: 2.2;
}
}
@media only screen and (max-width: 800px){
.swiper-solutions {
    min-height: calc(200px * var(--resineo-echelle, 1));
    --swiper-adjacent-slides-showed: 2;
    --swiper-spaceBetween: 15px;
    /* Slide active mise en avant + aperçu de la suivante (~1,4 slide visible),
       comme la maquette mobile (la slide blanche de fin est retirée en JS). */
    --swiper-slide-width: 68%;
    --swiper-navigation-width: 100%;
    padding-bottom: 50px;
}
.swiper-solutions .slide-title,
.swiper-solutions .swiper-slide-active .slide-title {
    top: 50%;
}
.swiper-solutions .slide-text {
    position: relative;
	left: 0;
    height: auto;
    min-height: calc(90px * var(--resineo-echelle, 1));
	min-width: calc(150% + var(--swiper-spaceBetween));
	bottom: auto;
    margin-top: 30px;
    justify-content: flex-start;
}
.swiper-solutions .slide-text .marque-resineo,
.swiper-solutions .slide-text .nom-solution {
    display: none;
}
.swiper-solutions .swiper-navigation {
	left: 0%;
	transform: translate(0%, -100%);
}
}
@media only screen and (max-width: 480px){
.swiper-solutions {
    --swiper-adjacent-slides-showed: 1;
    --swiper-slide-width: 80%;
}
.swiper-solutions .slide-text {
	min-width: 100%;
}
}

/* Slider Solutions — pagination à POINTS sur mobile (≤ 800px).
   Le JS (swiper-config.js) bascule le type progressbar → bullets sous ce seuil et
   recrée l'instance ; ici on masque les flèches (les points pilotent le carrousel),
   on centre les points et on les colore (inactif gris, actif = couleur d'univers). */
@media only screen and (max-width: 800px){
.swiper-solutions {
    padding-bottom: 0;
}
/* Slide en hauteur AUTO (≠ bureau où elle est carrée) : c'est l'IMAGE qui est carrée,
   le descriptif « Usage : … » coule alors SOUS l'image, à l'intérieur de la slide
   (sinon il déborde du carré et est rogné par l'overflow:hidden du swiper). */
.swiper-solutions .swiper-slide {
    aspect-ratio: auto;
    height: auto;
}
.swiper-solutions .slide-img {
    aspect-ratio: 1 / 1;
    height: auto;
}
.swiper-solutions .slide-text {
    min-width: 100%;
    max-width: 100%;
}
.swiper-solutions .swiper-button-prev,
.swiper-solutions .swiper-button-next {
    display: none;
}
/* Navigation EN FLUX (≠ bureau où elle est absolue) : les points se placent sous le
   carrousel et le descriptif « Usage : … » de la slide active, centrés. */
.swiper-solutions .swiper-navigation {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    max-width: none;
    margin-top: 24px;
    justify-content: center;
}
.swiper-solutions .swiper-pagination.swiper-pagination-bullets {
    position: relative;
    inset: auto;
    width: auto;
    display: flex;
    gap: 8px;
}
.swiper-solutions .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0;
    background: #DBDBDB;
    opacity: 1;
    transition: background .3s var(--resineo-transition);
}
.swiper-solutions .swiper-pagination-bullet-active {
    background: var(--wp--preset--color--univers-main);
}
}


/* Slider Actus*/
.swiper-actus {
    --swiper-slide-width: 300px;
    padding-bottom: 0; /* était 150px, cf. note sous .swiper-temoignages-hori */
    overflow: hidden;
}
.swiper-actus .swiper-slide {
    aspect-ratio: 390/555;
    overflow: hidden;
    transition-delay: 0s;
    -webkit-transition: clip-path 0.4s var(--resineo-transition); 
	-o-transition: clip-path 0.4s var(--resineo-transition); 
	transition: clip-path 0.4s var(--resineo-transition);
    clip-path: polygon(25px 35px, calc(100% - 25px) 35px, calc(100% - 25px) calc(100% - 35px), 25px calc(100% - 35px));
}
.swiper-actus .slide-title {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 25px;
    transform: translate(-50%,0%);
    width: calc(100% - 50px);
    padding: 25px 60px 20px 20px;
    background-color: var(--wp--preset--color--white);
}
.swiper-actus .swiper-slide-active .slide-title {
    transition-delay: .15s;
}
.swiper-actus .actu-title {
    /* Maquette (Figma 1349:37187, avenant n°2 ligne 21) : Inter Medium 14 / 21 px, lettres
       espacées de 5 %. `small` = 14 → 15 px sur la rampe ; l'interligne 1.5 donne 21 px à 14 px. */
    font-size: var(--wp--preset--font-size--small);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.05em;
    margin: 0;
    /* Le titre de la carte est un <h3> : il hérite du réglage de typographie H3 du
       Customizer Blocksy (--theme-text-transform: uppercase, uploads/blocksy/css/global.css).
       La maquette le veut en casse naturelle — on ne touche pas au réglage global. */
    text-transform: none;
}
.swiper-actus .swiper-navigation {
	margin: calc(70px * var(--rux-nav-k, 1)) auto 0;
    max-width: 600px;
}
@media only screen and (min-width: 769px){
.swiper-actus .swiper-slide-active {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.swiper-actus .slide-title {
    opacity: 0;
    /* La carte des slides NON actives est invisible : elle doit aussi être hors d'atteinte.
       Sans cela, la carte étant désormais un lien, une zone morte de 250 × 69 px capterait le
       clic (et le Tab) et NAVIGUERAIT au lieu de recentrer la slide. `.animate` transitionne
       `all` : `visibility` étant interpolée « visible pendant toute la durée dès qu'une des
       deux bornes est visible », elle bascule au DÉBUT du fondu entrant et à la FIN du fondu
       sortant — le fondu lui-même est inchangé. */
    visibility: hidden;
    pointer-events: none;
}
.swiper-actus .swiper-slide-active .slide-title {
    transform: translate(-50%,0%);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
}
@media only screen and (max-width: 768px){
.swiper-actus {
    --swiper-navigation-width: 75%;
    padding-bottom: 0;
}
.swiper-actus .swiper-slide {
	aspect-ratio: 1/1;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.swiper-actus .slide-title {
	transform: translate(-50%,-0%);
	bottom: 25px;
}
.swiper-actus .swiper-navigation {
	margin-top: 25px;
    margin-left: 0;
}
}
@media only screen and (max-width: 480px){
.swiper-actus {
    --swiper-navigation-width: 100%;
}
}


/* Slider Amenagements*/
/* padding-bottom = le blanc SOUS la navigation, en fin de slider. Historiquement 100px :
   .swiper-navigation était alors en position:absolute (top:100%, translate -100%) et ce
   padding lui réservait sa place — la retirer l'aurait fait chevaucher le contenu suivant.
   La navigation est en FLUX depuis (position:relative + margin-top:50px, cf. plus haut,
   l'ancien bloc absolu est resté en commentaire) : plus rien ne vit dans ce padding, qui
   n'est donc que du vide ajouté au padding de section. Ramené à 60px. Mesuré : aucun
   descendant du wrapper ne dépasse le bas de la navigation. Ne concerne QUE la variante
   « Galeries photos » (la variante hotspot, elle, est un .swiper-realisations). */
.swiper-amenagements-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-bottom: calc(60px * var(--rux-nav-after, 1));
    /*column-gap: 20px;*/
    max-width: 1230px;
    margin: 0 auto;
}
/* La variante « amenagements2 » (2025, page d'essai « Slider Amenagements » du dev) n'est
   émise par aucun bloc : ses règles CSS et son init JS ont été retirées le 2026-09-08. */
.swiper-amenagements-thumbs {
    /* Avenant n°2, ligne 23 (maquette 1349:37129) : vignettes à 20px sous la photo (≈ 70px avant : 50px de
       réserve du bouton de slide + 50px × --rux-nav-k). Le bouton est devenu un cartouche DANS la photo
       et la navigation est posée SUR elle (bureau) : plus rien à réserver. */
    margin-top: 20px;
}
/* Vignettes de la variante « Galeries photos » : ratio 3/2 (image 120×80 croppée), cliquables,
   atténuées hors slide active (Swiper pose .swiper-slide-thumb-active sur la vignette courante). */
.swiper-amenagements-thumbs .swiper-slide {
    aspect-ratio: 3/2;
    cursor: pointer;
    overflow: hidden;
    opacity: .5;
    transition: opacity .3s var(--resineo-transition);
}
.swiper-amenagements-thumbs .swiper-slide-thumb-active {
    opacity: 1;
}
.swiper-amenagements .slide-hotspot {
    aspect-ratio: var(--rux-galerie-ratio, 1234 / 600); /* hauteur de l'image principale : variable --rux-galerie-ratio, posée dans global.scss (retour B, jadis réglée au testeur d'affichage, retiré le 2026-10-05) ; avenant n°2, ligne 23 : 1234 × 600 de la maquette (avant : 1150 / 540) */
    /*height: clamp(300px, 50vh, 550px);*/
}
.swiper-amenagements .swiper-slide {
    flex-direction: column;
}
/* (Retiré, avenant n°2 ligne 23 : la galerie SANS description réservait 50px sous l'image pour le
   bouton de slide, qui chevauchait le bord bas. Ce bouton est maintenant un cartouche DANS la photo,
   en haut à droite — voir « CARTOUCHE DE SLIDE » plus bas : plus rien ne déborde, rien à réserver.) */
.swiper-amenagements .slide-text {
    position: relative;
    padding: 50px 5vw 0;
    left: 0;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    font-size: var(--wp--preset--font-size--small);
}
.swiper-amenagements .swiper-slide-active .slide-text {
    opacity: 1;
    pointer-events: all;
    transition: opacity 0.4s var(--resineo-transition) .4s;
}
.swiper-amenagements-wrapper .swiper-resineo {
    padding-bottom: 0;
}
.swiper-wrapper-thumbs .swiper-slide {
    aspect-ratio:6/4;
}
@media only screen and (max-width: 1080px){
.swiper-amenagements .slide-hotspot {
    /*aspect-ratio: 16/9;*/
}
}
@media only screen and (max-width: 768px){
.swiper-amenagements-wrapper {
    --swiper-navigation-width: 75%;
    /* Blanc sous la navigation : 60px (réglage bureau du 2026-09-04) → 30px en mobile, où la photo
       fait 247px de haut au lieu de 540. Retour cliente du 2026-09-07 : « rapprocher le CTA » — le
       bouton de pied remonte de 30px, le reste du bloc (vignettes, navigation) est laissé tel quel,
       choix explicite de ne toucher qu'au CTA. */
    padding-bottom: 30px;
}
.swiper-amenagements .slide-hotspot {
    aspect-ratio: 400/300;
}
/* Bouton de slide visible sur mobile (--rux-inspirer-cta-mobile ; posée jadis par le testeur d'affichage,
   retiré le 2026-10-05, aujourd'hui par rien : seul le repli `none` s'applique) : il déborde sous la
   photo (top:100%) et, sans .slide-text dessous, l'overflow du slider le rogne et il chevauche
   les vignettes — le bureau réserve 50px pour ça (règle @media 769 plus haut), pas le mobile.
   On réserve ici la même place, seulement quand `--rux-inspirer-cta-mobile-pad` est posée (repli 0 = rien
   ne change ; rien ne la pose aujourd'hui). Avec un descriptif, son padding-top de 50px fait déjà le travail ; sans bouton
   (galerie ACF des fiches applicateur, slide sans core/button) il n'y a rien à réserver. */
.swiper-amenagements .swiper-slide:has(.slide-title):not(:has(.slide-text)) {
    padding-bottom: var(--rux-inspirer-cta-mobile-pad, 0px);
}
.swiper-amenagements-wrapper .swiper-navigation {
	margin-left: auto;
	margin-right: auto;
}
}


/* CARTOUCHE DE SLIDE (galerie d'aménagements, avenant n°2, ligne 23, maquette 1349:37129) : carte
   blanche collée au coin HAUT-DROIT de la photo (266 × 89px à 1440), pastille ↗ d'univers (la même
   `.link-resineo` que Solutions / Dossier) puis deux lignes en capitales — « Voir l'aménagement »
   (normal) et le nom (gras). Le cartouche est le lien (cf. realisations-hotspot-slide/render.php).
   Apparition : fondu 0,4s démarrant 500ms APRÈS que la slide est devenue active ; départ immédiat
   (fondu court, sans délai). `visibility` suit l'opacité (délai de bascule = durée du fondu au départ,
   = délai d'apparition à l'arrivée) : un cartouche invisible ne capte ni le clic ni le Tab, même
   motif que `.swiper-actus .slide-title`. Couleurs et tailles de police : palette d'univers et presets. */
.swiper-amenagements .slide-cartouche {
    position: absolute;
    z-index: 3;
    top: 0;
    right: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 15px;
    width: 266px;
    min-height: 89px;
    padding: 12px 20px;
    background-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--univers-grey-dark);
    line-height: 1.2;
    text-transform: uppercase;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s var(--resineo-transition), visibility 0s linear .2s;
}
.swiper-amenagements .swiper-slide-active .slide-cartouche {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .4s var(--resineo-transition) .5s, visibility 0s linear .5s;
}
.swiper-amenagements .slide-cartouche .link-resineo {
    position: static;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    padding-left: 0;
}
.swiper-amenagements .slide-cartouche__texte {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.swiper-amenagements .slide-cartouche__voir {
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 400;
}
.swiper-amenagements .slide-cartouche__nom {
    font-size: var(--wp--preset--font-size--small);
    font-weight: 700;
    overflow-wrap: anywhere;
}
/* Carte cliquable : on neutralise les styles de lien de Blocksy (cf. `a.slide-title` plus haut), liseré
   de focus à l'intérieur (la slide rogne un contour extérieur), flèche qui se relève au survol. */
.swiper-amenagements a.slide-cartouche,
.swiper-amenagements a.slide-cartouche:hover,
.swiper-amenagements a.slide-cartouche:focus,
.swiper-amenagements a.slide-cartouche:active {
    color: var(--wp--preset--color--univers-grey-dark);
    text-decoration: none;
}
.swiper-amenagements a.slide-cartouche:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -3px;
}
.swiper-amenagements a.slide-cartouche:hover .link-resineo svg,
.swiper-amenagements a.slide-cartouche:focus-visible .link-resineo svg {
    transform: rotate(45deg);
}
@media (prefers-reduced-motion: reduce) {
    .swiper-amenagements .slide-cartouche,
    .swiper-amenagements .swiper-slide-active .slide-cartouche {
        transition: none;
    }
}
@media only screen and (max-width: 768px) {
    /* Mobile : même cartouche, à échelle réduite (≤ 45 % de la largeur de la photo). */
    .swiper-amenagements .slide-cartouche {
        width: 44%;
        max-width: 266px;
        min-height: 0;
        gap: 8px;
        padding: 8px 10px;
        line-height: 1.15;
    }
    .swiper-amenagements .slide-cartouche .link-resineo {
        width: 20px;
        height: 20px;
    }
    .swiper-amenagements .slide-cartouche .link-resineo svg {
        width: 7px;
    }
    .swiper-amenagements .slide-cartouche__texte {
        gap: 2px;
    }
    /* Polices : les presets du thème × 0,75 (sur 375px, `x-small` = 13px faisait passer « Voir
       l'aménagement » sur 3 lignes, cartouche de 95px = 38 % de la hauteur de la photo). */
    .swiper-amenagements .slide-cartouche__voir {
        font-size: calc(var(--wp--preset--font-size--x-small) * .75);
    }
    .swiper-amenagements .slide-cartouche__nom {
        font-size: calc(var(--wp--preset--font-size--small) * .75);
    }
}

/* Slider Logos Clients*/
.swiper-logos {
    --swiper-slide-width: 175px;
    padding:0 25px 150px;
}
.swiper-logos .swiper-wrapper {
    transition-timing-function: linear;
    align-items: center;
}
.swiper-logos .swiper-slide {
    aspect-ratio: 1/1;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 6px 25px rgba(217,217,217,.5);
    margin: 25px clamp(20px, 3vw, 50px) 0;
}


/* Slider Realisations/hotspots (variante « hotspot » du bloc « Réalisations hotspot »).
   Avenant n°2, ligne 22 (maquette Figma, cadre 1440 × 1260) — BUREAU (≥ 1024px) : slide active CENTRÉE
   de 1222 × 700, voisines visibles des deux côtés, réduites à 600px de haut (échelle 600/700) à 45px de la
   slide active. Réglages ci-dessous (variables ; le JS ne fait que lire `--rh-ecart` et poser « Tout visible ») :
     --rh-slide-largeur   largeur de la slide active (1222/1440 = 84,86vw sous 1440px, plafonnée à 1222px) ; au bureau,
                          réduite en plus par « Tout visible » (voir plus bas), posée alors en ligne par le JS
     --rh-voisine-echelle échelle des voisines (600 / 700)
     --rh-ecart           écart VISUEL slide active ↔ voisine = spaceBetween de Swiper, lu par swiper-config.js
                          (la réduction se fait par `scale` ancré sur le bord tourné vers la slide active : l'écart
                          visuel reste donc exactement l'écart de mise en page)
     --rh-pastille-haut   haut de la pastille blanche, depuis le haut de la photo
   Le ratio du cadre (1222/700) et celui de la photo (1150/870) ne sont PAS ici : ils viennent de
   function-resineo-hotspots-cadre.php (variables --rh-ratio-*, posées en style inline par le bloc), parce que
   le calcul de recadrage des hotspots (PHP, éditeur, contrôle en ligne de commande) doit s'appuyer sur les
   mêmes nombres. `--rux-inspirer-spv` / `--rux-inspirer-ratio` (jadis réglées au testeur d'affichage, retiré le 2026-10-05) n'ont plus d'effet au
   bureau : seule la tablette (768–1023px) lit encore `--rux-inspirer-spv`.

   « TOUT VISIBLE » (décision de la cliente, ligne 22, version A) — BUREAU seulement : tout le bloc (titre, intro,
   photo active, flèches + barre, bouton de pied) tient dans la hauteur visible sous l'en-tête collant, sur
   n'importe quelle fenêtre. Le ratio de la photo (1222/700) ne bouge pas, seule sa LARGEUR se réduit :
   `--rh-slide-largeur` est alors posée EN LIGNE sur le carrousel par swiper-config.js (`toutVisible()`), qui
   l'emporte sur la valeur ci-dessous. Calcul : hauteur de photo H = visible − pile, bornée entre un PLANCHER de
   300px (validé le 05/10) et 700px, où `pile` = tout ce qui n'est pas la photo (du haut du titre au bas du
   bouton de pied) et `visible` = hauteur de fenêtre − en-tête COLLANT (85px, mesuré une fois la page défilée ;
   lu sur la barre collante quand elle l'est, sinon constante `ENTETE_COLLANT`) − barre d'admin WordPress si elle
   est fixe (32px) − 24px de respiration. Les espaces du bloc sont resserrés au bureau pour y tenir : 24px sous
   l'en-tête du bloc (blocs/realisations-hotspot/style.scss), 24px entre la photo et la navigation (plus bas).
   Recalcul au chargement, à `document.fonts.ready`, après `load` et au redimensionnement (150ms de debounce, puis un second passage 400ms plus tard) ;
   sous 1024px la propriété est retirée (CSS d'avant).
   INTERRUPTEUR sans redéploiement, dans le CSS additionnel du Customizer :
     :root { --rh-tout-visible: 0; }      coupe le calcul (retour au 1222px / 84,86vw de la maquette)
     :root { --rh-photo-plancher: 360; }  autre plancher de hauteur de photo, en px sans l'unité
   (les espaces resserrés, eux, restent : ils sont en CSS). */
.swiper-realisations {
    --swiper-slide-width: 75%;
    --rh-slide-largeur: min(1222px, 84.86vw);
    --rh-voisine-echelle: 0.857143;
    --rh-ecart: 45px;
    --rh-pastille-haut: 54px;
    /* Part de la photo rognée de CHAQUE côté (en % de la photo), par palier : nulle par défaut (tablette :
       le cadre a le ratio de la photo) ; posée par les @media bureau et mobile plus bas. */
    --rh-rogne-x: 0;
    --rh-rogne-y: 0;
    padding-bottom: calc(var(--wp--preset--spacing--s) * var(--rux-nav-after, 1));
}
.swiper-realisations .swiper-slide {
    flex-direction: column;
}
/* Flèches de S'inspirer : avant la ligne 22, le bouton de slide chevauchait le bord bas de l'image
   d'environ 22px ; on gardait au moins 40px sous l'image, quel que soit le facteur --rux-nav-k (réglage UX, global.scss).
   Le bouton est devenu la pastille du haut de la photo : au BUREAU, 24px fixes (« Tout visible », resserrés
   des 40px de la maquette, cf. la note de tête de ce bloc) — voir le bloc bureau plus bas. Tablette et mobile : règle d'avant. */
.swiper-realisations .swiper-navigation {
    margin-top: max(calc(50px * var(--rux-nav-k, 1)), 40px);
}
.swiper-realisations .swiper-slide-active {
    z-index: 2;
}
/* Les slides latérales sont cliquables (slideToClickedSlide, cf. swiper-config.js) : curseur
   « main » pour le dire, à la place du « grab » que Swiper pose sur le conteneur. */
.swiper-realisations .swiper-slide:not(.swiper-slide-active) {
    cursor: pointer;
}
.slide-hotspot {
    position: relative;
    height: 100%;
}
/* Ratio de la photo réglable par la variable --rux-inspirer-ratio (ex. 3 / 2 ; jadis posée par le testeur
   d'affichage, retiré le 2026-10-05, aujourd'hui par rien : repli auto), demande de Reuh
   du 2026-09-09. SANS OBJET depuis la ligne 22 : au bureau (≥ 1024px) le ratio est celui de la maquette
   (1222 / 700, bloc bureau plus bas, qui passe devant) ; sur mobile la slide est carrée (règle plus bas) et
   la variable n'était posée par le testeur qu'à partir de 1024px. Reste la tablette, où elle n'est jamais posée (repli auto). */
.swiper-realisations .slide-hotspot {
    aspect-ratio: var(--rux-inspirer-ratio, auto);
}
.slide-hotspot .slide-markers-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}
.slide-hotspot .hotspot-marker {
    position: absolute;
    width: clamp(25px, 3vw, 35px);
    aspect-ratio: 1/1;
    background-color: var(--wp--preset--color--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%,-50%);
    cursor: pointer;
}
.slide-hotspot .hotspot-marker svg,
.slide-hotspot .hotspot-marker .hotspot-marker-icon {
    width: 54%;
    aspect-ratio: 1/1;
    color: var(--wp--preset--color--univers-dark);
}
.swiper-realisations .slide-text {
    position: relative;
    padding: 50px 5vw 0;
    left: 0;
    text-align: center;
}
/* .slide-text contient désormais un core/paragraph rendu (<p>) → reset de marge. */
.swiper-realisations .slide-text p {
    margin: 0;
}
.slide-hotspot .hotspot-marker,
.swiper-realisations .slide-text {
    opacity: 0;
    pointer-events: none;
}
.swiper-slide-active .slide-hotspot .hotspot-marker,
.swiper-amenagements .swiper-slide-active .slide-text,
.swiper-realisations .swiper-slide-active .slide-text {
    opacity: 1;
    pointer-events: all;
    transition: opacity 0.4s var(--resineo-transition) .4s;
}
@media only screen and (max-width: 768px){
.swiper-realisations {
    --swiper-navigation-width: 85%;
    padding-bottom: 50px;
}
.swiper-realisations .swiper-slide {
    aspect-ratio: 1/1;
}
/* MOBILE : la pastille (.slide-pastille, ex-bouton de slide) et le descriptif (.slide-text) sont
   MASQUÉS par défaut (carrousel d'images épuré sur petit écran — c'était déjà le choix du CSS
   d'origine du site, puis re-décidé le 2026-06-09, commit f7ec542).
   Depuis le 2026-09-09 (maquette de la cliente : bouton visible sur mobile), chacun des deux lit une
   variable --rux-* dont le REPLI est `none` : sans cette variable posée (l'ancien testeur
   d'affichage, retiré le 2026-10-05, la posait ; aujourd'hui rien ne la pose), rien ne change. La pastille (variante hotspot) se montre alors en HAUT de la photo, comme
   sur bureau (`--rh-pastille-haut: 14px`, règle mobile plus bas) — elle ne chevauche plus le bord bas.
   🔴 Valeur « montrée » de `--rux-inspirer-cta-mobile` : `flex` (la pastille est un conteneur flex :
   libellé + pastille ronde) — le registre de global.scss prévoit `flex` ; le descriptif, lui,
   se montre en `block`. Variante galerie : son cartouche (`.slide-cartouche`) ne lit pas cette variable.
   ADOPTER = poser `flex` (pastille) / `block` (descriptif) sur :root dans css/global.scss (registre --rux-*). */
/* La pastille (display : cf. le bloc « PASTILLE DE SLIDE » plus bas) lit la même variable. */
.swiper-realisations .slide-text {
    display: var(--rux-inspirer-texte-mobile, none);
}
}

/* SANS bouton de pied (le bloc n'émet pas de .resineo-realisations-hotspot__footer), le blanc sous
   les flèches n'a plus d'objet : le padding de section (--l) fait seul la respiration, comme pour
   toute section qui finit sur du contenu. Mesuré sur /applicateur/ avant la FAQ : 23 px (bureau) et
   50 px (mobile) de vide empilés sur les 61 / 77 px de padding de section, puis les 61 / 77 px de la
   FAQ — soit 146 / 204 px entre les flèches et « Notre FAQ ». Retour cliente (mobile) et Reuh
   (bureau), 2026-09-09. Vaut pour les DEUX variantes et à TOUTES les largeurs ; avec un bouton, la
   valeur d'origine reste (elle sépare les flèches du bouton) et le facteur --rux-nav-after
   continue d'y agir. (0,2,0) : passe devant les règles mobiles (0,1,0) ci-dessus. */
.swiper-realisations:not(:has(+ .resineo-realisations-hotspot__footer)),
.swiper-amenagements-wrapper:not(:has(+ .resineo-realisations-hotspot__footer)) {
    padding-bottom: 0;
}


/* ==========================================================================================
   S'INSPIRER — maquette de l'avenant n°2, ligne 22 (variante « hotspot », `.swiper-realisations`)
   ========================================================================================== */

/* Marqueurs de hotspot : position CONVERTIE de la photo vers le cadre. Les coordonnées stockées (--x, --y,
   en % de la photo 1150 × 870) sont posées en variables par render.php ; la photo étant recadrée par
   `object-fit: cover` quand le cadre n'a pas son ratio, on retranche la part de la photo masquée AVANT la
   fenêtre visible (`--rh-a-x|y`) et on étire la fenêtre (100 − 2 × rogne) sur la boîte. Sans recadrage
   (tablette) : `--rh-a-*` n'existe pas, le repli est `--rh-rogne-*` = 0, formule neutre, x et y inchangés.
   Ombre de la maquette. Variante galerie non concernée (sélecteur `.swiper-realisations`).

   CADRAGE AUTOMATIQUE (ligne 22, décision de Renaud du 2026-10-02). `--rh-a-*` vaut le décalage propre à la
   slide (`--rh-decalage-bureau|mobile`, % de la photo, posé en style inline sur `.slide-hotspot` par render.php
   quand la fenêtre n'est pas centrée — calcul : resineo_hotspots_decalage() dans
   function-resineo-hotspots-cadre.php) et, à défaut, la coupe centrée (`--rh-rogne-*`). Ces variables sont
   posées dès le HTML : aucune transition ne s'y joue au chargement (l'état de départ d'une transition est le
   style précédent, absent au premier rendu).

   RETENUE AU BORD (décision de Renaud du 2026-10-05) : la marge du cadrage automatique est de 3 % de la photo,
   mais le marqueur garde sa taille en px. Quand « Tout visible » réduit la photo (342px de haut sur 1536 × 696),
   un repère proche du bord débordait à moitié (jusqu'à 7px sous la photo, 4 slides sur 9 sur /particuliers/).
   Monter la marge rendait « impossible » la slide la plus difficile de la production (repères à 67 et 97 %) dès
   4 % : on garde 3 % et on RETIENT le marqueur à 4px à l'intérieur de la photo (`clamp`). Effet : quelques px
   de décalage au plus, seulement sur petite photo ; aucun repère masqué. `--rh-marqueur-demi` = moitié de la
   largeur du marqueur (miroir de `.slide-hotspot .hotspot-marker`, plus haut). */
.swiper-realisations {
    --rh-marqueur-demi: calc(clamp(25px, 3vw, 35px) / 2);
}
.swiper-realisations .hotspot-marker {
    left: clamp(calc(var(--rh-marqueur-demi) + 4px), calc((var(--x) - var(--rh-a-x, var(--rh-rogne-x))) / (100 - 2 * var(--rh-rogne-x)) * 100%), calc(100% - var(--rh-marqueur-demi) - 4px));
    top: clamp(calc(var(--rh-marqueur-demi) + 4px), calc((var(--y) - var(--rh-a-y, var(--rh-rogne-y))) / (100 - 2 * var(--rh-rogne-y)) * 100%), calc(100% - var(--rh-marqueur-demi) - 4px));
    box-shadow: 0 3px 30px rgba(26, 44, 53, .3);
}

/* PASTILLE DE SLIDE : le bouton saisi dans l'éditeur (libellé = nom de la réalisation) devient une pastille
   BLANCHE en haut au centre de la photo, puis, quand elle est cliquable, la pastille ronde d'univers avec la
   flèche ↗ (la même `.link-resineo` que Solutions, Dossier et le cartouche de la galerie).
   🔴 TAILLE = CELLE DES BOUTONS DU SITE (retour de la cliente : à la maquette — 15px, 58,7px de haut, rond de
   30px — elle écrasait les « Demandez un devis »). Rien n'est recopié : la pastille lit les variables de
   bouton de Blocksy, posées sur `:root` par son CSS global (`--theme-button-font-size` = preset `small`,
   `--theme-button-min-height`, `--theme-button-padding`, `--theme-button-font-weight`,
   `--theme-button-letter-spacing`, `--theme-button-text-transform`) — celles que lit `.wp-block-button__link`.
   Elle suit donc le bouton partout où il bouge : rampe fluide de theme.json, bande portable 1024–1599 (les
   presets de `css/global.scss` y sont réécrits, `--theme-button-font-size` les cite), tout réglage du
   Customizer. Les valeurs de repli (après la virgule) sont celles du bouton à ce jour. Le bouton « Plein »
   ajoute deux choses que la pastille reprend : padding droit de 10px quand une flèche suit (`css/global.scss`,
   bloc « Structure COMMUNE ») et flèche de 1,5em à .5em du libellé. Le bouton n'a AUCUN interlettrage (le 5 %
   de la maquette n'a pas été gardé) ; capitales et graisse 600 viennent des mêmes variables.
   Couleurs : fond blanc, Gris Foncé. Apparition comme le bouton d'avant : fondu 0,4s après que la slide est
   active ; `visibility` suit l'opacité (une pastille invisible ne capte ni clic ni Tab).
   🔴 Les dimensions de la pastille sont aussi des CONSTANTES de calcul (clé `pastille` de
   resineo_hotspots_cadre(), « repère sous la pastille ») : les remettre à jour si ce bloc bouge. */
.swiper-realisations .slide-pastille {
    position: absolute;
    z-index: 3;
    top: var(--rh-pastille-haut);
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Flèche à .5em du libellé, comme `::after { margin-left: .5em }` du bouton. */
    gap: .5em;
    width: max-content;
    max-width: calc(100% - 40px);
    min-height: var(--theme-button-min-height, 40px);
    /* Padding du bouton ; avec flèche il retombe à 10px à droite (règle suivante). */
    padding: var(--theme-button-padding, 10px 20px);
    border-radius: 100px;
    background-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--univers-grey-dark);
    font-family: var(--wp--preset--font-family--titillium-web);
    font-size: var(--theme-button-font-size, var(--wp--preset--font-size--small));
    font-weight: var(--theme-button-font-weight, 600);
    /* `--theme-button-line-height` n'est pas posée par Blocksy à ce jour (vide sur le dev au 2026-10-05) : le
       repli `inherit` donne le même interligne que le bouton (20,13px à 1440, mesuré). */
    line-height: var(--theme-button-line-height, inherit);
    letter-spacing: var(--theme-button-letter-spacing, normal);
    text-transform: var(--theme-button-text-transform, uppercase);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s var(--resineo-transition), visibility 0s linear .2s;
}
/* Avec flèche : 10px à droite (le bouton « Plein » pose `padding-right: 10px`). Sans lien, la pastille garde
   le padding du bouton des deux côtés : libellé seul, équilibré. */
.swiper-realisations .slide-pastille:not(.is-sans-lien) {
    padding-right: 10px;
}
.swiper-realisations .swiper-slide-active .slide-pastille {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .4s var(--resineo-transition) .4s, visibility 0s linear .4s;
}
.swiper-realisations .slide-pastille .link-resineo {
    position: static;
    flex: 0 0 auto;
    padding-left: 0;
    /* Rond = la flèche du bouton (1,5em). La flèche dedans fait .6em, soit 40 % du rond (avant : le tiers),
       pour rester lisible à cette échelle ; vaut aussi sur mobile (8px à 390px, pastille masquée par défaut). */
    width: 1.5em;
    height: 1.5em;
}
.swiper-realisations .slide-pastille .link-resineo svg {
    width: .6em;
}
/* Pastille cliquable : styles de lien de Blocksy neutralisés (cf. `a.slide-title`, `a.slide-cartouche`),
   liseré de focus à l'intérieur, flèche qui se relève au survol. */
.swiper-realisations a.slide-pastille,
.swiper-realisations a.slide-pastille:hover,
.swiper-realisations a.slide-pastille:focus,
.swiper-realisations a.slide-pastille:active {
    color: var(--wp--preset--color--univers-grey-dark);
    text-decoration: none;
}
.swiper-realisations a.slide-pastille:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -3px;
}
.swiper-realisations a.slide-pastille:hover .link-resineo svg,
.swiper-realisations a.slide-pastille:focus-visible .link-resineo svg {
    transform: rotate(45deg);
}
@media (prefers-reduced-motion: reduce) {
    .swiper-realisations .slide-pastille,
    .swiper-realisations .swiper-slide-active .slide-pastille {
        transition: none;
    }
}

/* BUREAU (≥ 1024px, le palier haut de Swiper dans swiper-config.js) : slide active centrée + voisines. La
   largeur de la slide vient du CSS (Swiper est en `slidesPerView: 'auto'`) ; le ratio du cadre et celui de
   la photo, de function-resineo-hotspots-cadre.php. Cette règle suit celle de `--rux-inspirer-ratio` (plus haut)
   à égalité de spécificité : elle gagne. */
@media only screen and (min-width: 1024px) {
    .swiper-realisations {
        --swiper-slide-width: var(--rh-slide-largeur);
        /* Rognage vertical de la photo dans le cadre de bureau : (1 − ratio photo / ratio cadre) / 2, en %. */
        --rh-rogne-y: calc((1 - var(--rh-ratio-image) / var(--rh-ratio-bureau)) * 50);
    }
    .swiper-realisations .slide-hotspot {
        aspect-ratio: var(--rh-ratio-bureau);
        /* Fenêtre visible de la slide : décalée si le cadrage automatique l'a posée, sinon centrée. */
        --rh-a-y: var(--rh-decalage-bureau, var(--rh-rogne-y));
    }
    /* Photo calée sur cette fenêtre : object-position = décalage / (2 × rogne) (0 % = calée en haut, 50 % =
       centrée). Autre axe centré. */
    .swiper-realisations .slide-hotspot .slide-img img {
        object-position: 50% calc(var(--rh-a-y) / (2 * var(--rh-rogne-y)) * 100%);
    }
    /* Pleine largeur d'écran : les voisines doivent déborder de part et d'autre de la slide active (maquette :
       cadre de 1440px). Le bloc est contenu à la largeur « wide » (1250px), qui ne laisserait voir aucune
       voisine : le carrousel sort de la colonne, centré sur le milieu de la fenêtre (même procédé que le fond
       du bloc, 100vw centré). Le contenu de la slide, lui, reste borné par --rh-slide-largeur. */
    .swiper-realisations {
        width: 100vw;
        max-width: 100vw;
        margin-inline: calc(50% - 50vw);
    }
    /* Pas de transition sur la slide elle-même : `.animate` pose `transition: all`, et Swiper (slidesPerView
       'auto') remet d'abord le `margin-right` de chaque slide à vide avant de la MESURER. Ce margin (l'écart,
       posé en ligne) redescendait alors de 45px à 0 en 0,4s, la slide était mesurée 45px trop large (1267 au
       lieu de 1222), le pas du carrousel devenait 1312 et la slide active n'était plus centrée (mesuré :
       décalée de 112px à gauche sur 1440px). Le mouvement des voisines, lui, vit sur `.slide-hotspot`. */
    .swiper-realisations .swiper-slide {
        transition-property: none;
    }
    /* Voisines : photo réduite (scale) et ancrée sur le bord tourné vers la slide active, centrée en hauteur
       sur elle — l'écart visuel entre les deux vaut donc exactement l'écart de mise en page (--rh-ecart). Le
       scale porte sur `.slide-hotspot` et non sur la slide, pour que le descriptif éventuel (`.slide-text`,
       masqué hors slide active) ne décentre pas la photo. Transition de `.animate` (0,4s). */
    .swiper-realisations .swiper-slide:not(.swiper-slide-active) .slide-hotspot {
        transform: scale(var(--rh-voisine-echelle));
        transform-origin: right center;
    }
    .swiper-realisations .swiper-slide-active ~ .swiper-slide .slide-hotspot {
        transform-origin: left center;
    }
    /* Sous la photo : 24px puis la barre de navigation (40px dans la maquette, resserrés par « Tout visible »,
       cf. la note de tête de ce bloc). */
    .swiper-realisations .swiper-navigation {
        margin-top: 24px;
    }
    /* Marqueur hors du cadre visible MALGRÉ le cadrage automatique (écart entre repères plus grand que la fenêtre,
       aucun cas aujourd'hui — filet de sécurité) : masqué plutôt que flottant. */
    .swiper-realisations .hotspot-marker.is-hors-cadre-bureau {
        display: none;
    }
}

/* MOBILE (≤ 768px) : slide carrée, la photo perd ses côtés → rognage horizontal ; pastille masquée par défaut
   (même variable que le descriptif, cf. plus haut) et, quand elle est montrée, à l'échelle de la slide. */
@media only screen and (max-width: 768px) {
    .swiper-realisations {
        --rh-rogne-x: calc((1 - var(--rh-ratio-mobile) / var(--rh-ratio-image)) * 50);
    }
    .swiper-realisations .hotspot-marker.is-hors-cadre-mobile {
        display: none;
    }
    /* Cadrage automatique, sur l'axe horizontal (cf. le bloc bureau) : fenêtre décalée ou centrée, photo calée dessus. */
    .swiper-realisations .slide-hotspot {
        --rh-a-x: var(--rh-decalage-mobile, var(--rh-rogne-x));
    }
    .swiper-realisations .slide-hotspot .slide-img img {
        object-position: calc(var(--rh-a-x) / (2 * var(--rh-rogne-x)) * 100%) 50%;
    }
    .swiper-realisations .slide-pastille {
        /* `none` (repli) ou `flex` : la pastille est un conteneur flex, pas un bloc (cf. la note plus haut). */
        display: var(--rux-inspirer-cta-mobile, none);
        --rh-pastille-haut: 14px;
        min-height: 0;
        gap: 8px;
        padding: 6px 6px 6px 14px;
        font-size: calc(var(--wp--preset--font-size--medium) * .8);
        line-height: 1.5;
    }
    .swiper-realisations .slide-pastille:not(.is-sans-lien) {
        padding-right: 6px;
    }
    .swiper-realisations .slide-pastille.is-sans-lien {
        padding-right: 14px;
    }
    .swiper-realisations .slide-pastille .link-resineo {
        width: 22px;
        height: 22px;
    }
    .swiper-realisations .slide-pastille .link-resineo svg {
        width: 8px;
    }
}


/*Tooltip for hotspot*/
.hotspot-contents {
    display: none;
}
.hotspot-content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px; /* row + column : espace entre les 2 colonnes pour éviter le chevauchement */
}
.hotspot-content > div {
    flex: 1 1 calc(50% - 12px);
}
.hotspot-content-right {
    display: flex;
    align-items: center;
    column-gap: 20px;
    justify-content: end;
}
.hotspot-content-right img {
    width: 85px;
    aspect-ratio : 1/1;
    border-radius: 50%;
}
.hotspot-content .hotspot-content-bottom {
    flex-basis: 100%;
}
/* Bouton « En savoir plus sur la gamme » centré (desktop + mobile). */
.hotspot-content-bottom .wp-block-buttons {
    justify-content: center;
}
.tippy-box[data-theme~='resineo'] {
    background-color: var(--wp--preset--color--white);
    color: var(--theme-text-color);
}
.tippy-box[data-theme~='resineo'] .tippy-content {
	padding: 25px 30px 30px;
    min-width: 315px;
}
.tippy-box[data-theme~='resineo'] > .tippy-arrow {
    display: none;
}
.tippy-box[data-theme~='resineo'] > .tippy-arrow:before {
	width: 16px;
    height: 16px;
    border-radius: 50%;
    border: none;
    background-color: var(--wp--preset--color--univers-dark);
}
.tippy-connector {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
	pointer-events: none;
}
.tippy-connector line {
    stroke: var(--wp--preset--color--white);
}

/* ── Réalisations hotspot : nom de la solution (balise strong/h2/h3/h4 selon le
      réglage du slider, mais STYLE figé quelle que soit la balise). ── */
.hotspot-content .nom-solution {
    display: block;
    margin-top: 0.3em;
    margin-bottom: 0;
    font-family: Inter, Sans-Serif;
    font-weight: 800;
    font-size: calc(var(--wp--preset--font-size--medium) * 1.1);
    line-height: 1.2em;
    text-transform: uppercase;
}

/* ── Bouton de l'infobulle : fond univers-main, survol univers-dark, texte blanc. Sélecteurs
      spécifiques → surclassent le style « plein » de Blocksy sans !important (même approche que la
      variante CTA de la grille). (Le bouton de slide, ex-`.slide-title` de `.slide-hotspot`, est devenu la
      pastille blanche de la ligne 22 : ses règles ont été retirées.) ── */
.hotspot-content-bottom .wp-block-button.is-style-fill .wp-block-button__link {
    background-color: var(--wp--preset--color--univers-main);
    color: var(--wp--preset--color--white);
}
.hotspot-content-bottom .wp-block-button.is-style-fill .wp-block-button__link::after {
    background-color: var(--wp--preset--color--white);
}
.hotspot-content-bottom .wp-block-button.is-style-fill .wp-block-button__link:hover,
.hotspot-content-bottom .wp-block-button.is-style-fill .wp-block-button__link:focus {
    background-color: var(--wp--preset--color--univers-dark);
    color: var(--wp--preset--color--white);
}

/* ── Infobulle hotspot en POPUP centrée dans le viewport sur MOBILE ──
   (le swiper a un overflow qui tronquait l'infobulle ancrée). Le JS monte la tippy
   dans le <body>, ajoute body.rh-tippy-mobile + un fond ; on centre [data-tippy-root]. */
.tippy-mobile-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0, 0, 0, 0.5);
}
@media only screen and (max-width: 768px){
    body.rh-tippy-mobile [data-tippy-root] {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 9999 !important;
    }
    .tippy-box[data-theme~='resineo'] {
        width: 80vw !important;
        max-width: 400px !important;
    }
    .tippy-box[data-theme~='resineo'] .tippy-content {
        min-width: 0;
        padding: 20px;
    }
    /* On CONSERVE les 2 colonnes sur mobile (le gap de .hotspot-content fournit la
       marge entre elles) ; elles ne passent à la ligne que si la place manque vraiment. */
}




/* Slider Témoignages Horizontal*/
/* Plus de blanc sous les flèches : la navigation est en flux, c'est le padding de section du bloc
   (--l, blocs/carrousel-temoignages, carrousel-dossier/style.scss) qui fait l'air en bas, comme pour toute section. Avant : 80 px (150 px pour Dossier, 50 px sur mobile)
   empilés sur le padding de section — retour cliente 2026-09-09 (« avis au-dessus = trop grand »). */
.swiper-temoignages-hori {
    padding-top: 15px;
    padding-bottom: 0;
}
.swiper-temoignages-hori .swiper-slide {
    -webkit-transition: all 0.4s var(--resineo-transition); 
	-o-transition: all 0.4s var(--resineo-transition); 
	transition: all 0.4s var(--resineo-transition);
    background-color: var(--wp--preset--color--white);
    box-shadow: 0 6px 25px rgba(217, 217, 217, 0.5);
}
.swiper-temoignages-hori .slide-text {
    padding: 45px clamp(20px, 2.5vw, 35px) 35px;  
}
.swiper-temoignages-hori .info-temoignage {
    position: relative;
    padding: 0 0 30px 80px;
    font-size: var(--wp--preset--font-size--medium);
}
.swiper-temoignages-hori .company-name {
    display: block;
    margin-bottom: 0px;
    font-size: var(--wp--preset--font-size--medium-large);
    line-height: 1.3;
    font-weight: 500;
    color: var(--wp--preset--color--univers-dark);
}
.swiper-temoignages-hori .icon-quotes {
    position: absolute;
    top: 5px;
    left: 0;
    width: 58px;
    aspect-ratio: 58/49;    
    color: var(--wp--preset--color--univers-main);
}
.swiper-temoignages-hori .notes-temoignage {
    display: flex;
    gap: 8px;
    padding-top: 25px;
	padding-bottom: 10px;
}
.swiper-temoignages-hori .swiper-slide-active .notes-temoignage {
    padding-top: 30px;
	padding-bottom: 5px;
}
.swiper-temoignages-hori .notes-temoignage .icon-star {
    width: 16px;
    aspect-ratio: 1/1;
    color: var(--wp--preset--color--univers-main);
}
/* Étoile non acquise (ex. 4/5 → la 5e) : gris FIXE, volontairement hors palette —
   la même teinte dans tous les univers, à la demande du client. */
.swiper-temoignages-hori .notes-temoignage .icon-star-inactive {
    color: #DBDBDB;
}
.swiper-temoignages-hori .swiper-navigation {
	margin: calc(50px * var(--rux-nav-k, 1)) auto 0;
    max-width: 670px;
}
@media only screen and (min-width: 1025px){
.swiper-temoignages-hori .swiper-slide {
    transform: scale(.75);
}
.swiper-temoignages-hori .swiper-slide-active {
    transform: scale(1);
}
}
@media only screen and (max-width: 1024px){
.swiper-temoignages-hori {
    padding-right: 15px;
    padding-left: 15px;
}
}
@media only screen and (max-width: 768px){
.swiper-temoignages-hori {
    --swiper-navigation-width: 75%;
    padding-bottom: 0;
}
.swiper-temoignages-hori .swiper-slide {
	aspect-ratio: auto;
}
.swiper-temoignages-hori .swiper-navigation {
	margin-top: 25px;
    margin-left: 0;
}
}
@media only screen and (max-width: 480px){
.swiper-temoignages-hori {
    --swiper-navigation-width: 100%;
}
}



/* Slider Témoignages Vertical*/
.swiper-temoignages-verti-wrapper {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-bottom: 100px;
    margin: 0 auto;
	max-width: 1010px;
    --swiper-theme-color: var(--theme-text-color);
    --swiper-pagination-color: var(--resineo--color--particuliers-main);
    --swiper-pagination-progressbar-bg-color: var(--wp--preset--color--univers-grey-light);
}
.swiper-temoignages-verti-wrapper .swiper-temoignages-verti {
    width: 50%;
    flex-shrink: 0;
    padding-bottom: 0;
}
.swiper-temoignages-verti-thumbs {
	width: 50%;
	height: auto;
	padding-right: clamp(20px, 7vw, 125px);
    padding-bottom: 0;
    overflow: visible;
}
.swiper-temoignages-verti-thumbs .swiper-slide {
    padding: 20px;
    height: auto;
	font-family: var(--theme-button-font-family);
}
.swiper-temoignages-verti-thumbs .swiper-slide-thumb-active {
    font-weight: 600;
    box-shadow: 0px 6px 25px 0px rgba(217, 217, 217, 0.5);
}
.swiper-temoignages-verti .info-temoignage {
    display: flex;
    justify-content: space-between;
    padding: 15px 10px 30px 0;
    border-bottom: 2px solid var(--resineo--color--particuliers-main);
    margin-bottom: 20px;
}
.swiper-temoignages-verti .icon-quotes {
    width: 60px;
    aspect-ratio: 60/50;    
    color: var(--wp--preset--color--univers-main);
}
.swiper-temoignages-verti .notes-temoignage {
    display: flex;
    gap: 8px;
}
.swiper-temoignages-verti .temoignage {
    font-size: var(--wp--preset--font-size--medium);
}
.swiper-temoignages-verti .notes-temoignage .icon-star {
    width: 20px;
    aspect-ratio: 1/1;
    color: var(--wp--preset--color--univers-main);
}
/* Même gris FIXE que le slider horizontal (cf. plus haut) : l'étoile non acquise
   ne dépend pas de l'univers. */
.swiper-temoignages-verti .notes-temoignage .icon-star-inactive {
    color: #DBDBDB;
}
.swiper-temoignages-verti-wrapper .swiper-navigation {
	margin: 50px auto 0;
    max-width: 610px;
}



@media only screen and (max-width: 768px){
.swiper-navigation {
    width: var(--swiper-navigation-width, 100%);
	/*left: 0%;
	transform: translate(0%, -100%);*/
}
.swiper-navigation .swiper-button-next {
    order: 3;
}
.swiper-navigation .swiper-pagination-progressbar {
    order: 2;
}
.swiper-navigation-column {
	flex-wrap: nowrap;
}
.swiper-navigation .break {
	display: none;
}    
}


/* ==========================================================================================
   NAVIGATION COMMUNE DES SLIDERS — disposition BUREAU (avenant n°2, lignes 21 et 24)
   Une ligne centrée : flèche · barre · flèche = 40 + 27 + 400 + 27 + 40 = 534px. Le STYLE
   (flèches 40px Gris Foncé, barre arrondie, piste) vit dans les variables --rsn-* de
   `.swiper-resineo` et vaut aussi sur mobile ; la DISPOSITION, elle, ne s'applique qu'au bureau
   (la mobile reste celle d'avant : 75 à 100 % de large, Solutions en points, Timeline sans nav).
   Seuils : 769px comme les autres blocs, 801px pour Solutions (ses points prennent le relais à
   ≤ 800px). Hero · Texte & galerie pose sa propre disposition (centrée sous la photo) dans son style.scss.
   Sélecteur `.swiper-resineo:is(…)` (0,3,0) : égale la règle la plus spécifique des blocs
   (`.resineo-carrousel-timeline .swiper-timeline .swiper-navigation`) et, chargé après elle, gagne
   — sans !important. L'ordre du DOM (prev, next, barre) est remis à l'endroit par `order`.
   ========================================================================================== */
@media only screen and (min-width: 769px) {
    .swiper-resineo:is(.swiper-actus, .swiper-temoignages-hori, .swiper-realisations, .swiper-amenagements-wrapper, .swiper-timeline) .swiper-navigation {
        --rsn-fleche-marge: 0px;
        --rsn-barre-marge-x: 0px;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        column-gap: var(--rsn-ecart);
        row-gap: 0;
        width: calc(var(--rsn-barre-largeur) + 2 * (var(--rsn-fleche-taille) + var(--rsn-ecart)));
        max-width: 100%;
        padding: 0;
        margin-inline: auto;
        box-sizing: border-box;
    }
    .swiper-resineo:is(.swiper-actus, .swiper-temoignages-hori, .swiper-realisations, .swiper-amenagements-wrapper, .swiper-timeline) .swiper-navigation .break {
        display: none;
    }
    .swiper-resineo:is(.swiper-actus, .swiper-temoignages-hori, .swiper-realisations, .swiper-amenagements-wrapper, .swiper-timeline) .swiper-navigation .swiper-button { inset: auto; } /* Swiper les décale de 4px (left / right) : on veut 27px des deux côtés */
    .swiper-resineo:is(.swiper-actus, .swiper-temoignages-hori, .swiper-realisations, .swiper-amenagements-wrapper, .swiper-timeline) .swiper-navigation .swiper-button-prev { order: 1; }
    .swiper-resineo:is(.swiper-actus, .swiper-temoignages-hori, .swiper-realisations, .swiper-amenagements-wrapper, .swiper-timeline) .swiper-navigation .swiper-pagination  { order: 2; }
    .swiper-resineo:is(.swiper-actus, .swiper-temoignages-hori, .swiper-realisations, .swiper-amenagements-wrapper, .swiper-timeline) .swiper-navigation .swiper-button-next { order: 3; }
    .swiper-resineo:is(.swiper-actus, .swiper-temoignages-hori, .swiper-realisations, .swiper-amenagements-wrapper, .swiper-timeline) .swiper-navigation .swiper-pagination {
        position: relative;
        inset: auto;
        flex: 0 1 var(--rsn-barre-largeur);
        width: var(--rsn-barre-largeur);
        max-width: var(--rsn-barre-largeur);
        margin: 0;
    }

    /* Galerie d'aménagements : le composant est posé SUR la grande photo, en bas, centré ;
       flèches et contour BLANCS, piste #F7F7F7. Position : la photo occupe la largeur du wrapper
       à son ratio `--rux-galerie-ratio` (celui de `.slide-hotspot`, retouché par
       global.scss) → hauteur de la photo = 100cqw / ratio, et la barre est calée à
       --rsn-photo-marge-bas au-dessus de son bord bas (écart de la maquette ; le bouton de slide qui
       chevauchait ce bord est devenu le cartouche du coin haut-droit, avenant n°2 ligne 23).
       `container-type` fait du wrapper le conteneur des unités cqw ; la barre sort du flux. */
    .swiper-amenagements-wrapper {
        container-type: inline-size;
        --rsn-photo-marge-bas: 40px;
    }
    .swiper-resineo.swiper-amenagements-wrapper .swiper-navigation {
        --rsn-fleche-couleur: #fff;
        --rsn-piste: var(--wp--preset--color--univers-grey-light);
        position: absolute;
        left: 50%;
        top: calc(100cqw / (var(--rux-galerie-ratio, 1234 / 600)) - var(--rsn-fleche-taille) - var(--rsn-photo-marge-bas));
        margin: 0;
        transform: translateX(-50%);
        z-index: 5;
    }
}
/* Solutions : navigation ABSOLUE sous les slides (comportement d'avant), 534px au lieu de 705, une ligne. */
@media only screen and (min-width: 801px) {
    .swiper-resineo.swiper-solutions .swiper-navigation {
        --rsn-fleche-marge: 0px;
        --rsn-barre-marge-x: 0px;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        column-gap: var(--rsn-ecart);
        width: calc(var(--rsn-barre-largeur) + 2 * (var(--rsn-fleche-taille) + var(--rsn-ecart)));
        max-width: 100%;
        padding: 0;
        box-sizing: border-box;
    }
    .swiper-resineo.swiper-solutions .swiper-navigation .swiper-button { inset: auto; }
    .swiper-resineo.swiper-solutions .swiper-navigation .swiper-button-prev { order: 1; }
    .swiper-resineo.swiper-solutions .swiper-navigation .swiper-pagination  { order: 2; }
    .swiper-resineo.swiper-solutions .swiper-navigation .swiper-button-next { order: 3; }
    .swiper-resineo.swiper-solutions .swiper-navigation .swiper-pagination {
        position: relative;
        inset: auto;
        flex: 0 1 var(--rsn-barre-largeur);
        width: var(--rsn-barre-largeur);
        max-width: var(--rsn-barre-largeur);
        margin: 0;
    }
}

/* Couleur de la PISTE : l'inverse du fond sur lequel le slider est posé (blanche sur fond gris,
   #F7F7F7 sur fond blanc). Valeur par défaut (fond gris) posée sur `.swiper-resineo` plus haut ;
   ici les cas « fond blanc » : page blanche (`body.resineo-fond-blanc`, function-resineo-fond-page.php,
   :where → spécificité nulle ; le panneau gris du Hero · Texte & galerie la remet à blanc) ; puis les
   blocs qui peignent LEUR fond par-dessus la page (Réalisations/Aménagements : modificateurs
   `--fond-white|grey` ; Témoignages : fond posé en style inline par render.php). */
:where(body.resineo-fond-blanc) .swiper-resineo,
.resineo-realisations-hotspot--fond-white .swiper-resineo,
.resineo-carrousel-temoignages[style*="--univers-white"] .swiper-resineo {
    --rsn-piste: var(--wp--preset--color--univers-grey-light);
}
.resineo-realisations-hotspot--fond-grey .swiper-resineo,
.resineo-carrousel-temoignages[style*="--univers-grey-light"] .swiper-resineo {
    --rsn-piste: var(--wp--preset--color--univers-white);
}


.beer-slider{display:inline-block;overflow:hidden;position:relative}.beer-slider *,.beer-slider:after,.beer-slider :after,.beer-slider:before,.beer-slider :before{box-sizing:border-box}.beer-slider img,.beer-slider svg{vertical-align:bottom}.beer-slider>*{height:100%}.beer-slider>img{height:auto;max-width:100%}.beer-reveal{left:0;opacity:0;overflow:hidden;position:absolute;right:50%;top:0;transition:opacity .35s;z-index:1; box-shadow: 3px 0 0 0 var(--wp--preset--color--white);}.beer-reveal>:first-child{height:100%;max-width:none;width:200%}.beer-reveal>img:first-child{height:auto}.beer-range{-moz-appearance:none;-ms-touch-action:auto;-webkit-appearance:slider-horizontal!important;bottom:0;cursor:pointer;height:100%;left:-1px;margin:0;opacity:0;position:absolute;top:0;touch-action:auto;width:calc(100% + 2px);z-index:2}.beer-range::-webkit-slider-thumb{-webkit-appearance:none;height:300vh}.beer-range::-moz-range-thumb{-webkit-appearance:none;height:300vh}.beer-range::-ms-tooltip{display:none}.beer-handle{background:var(--wp--preset--color--white);border-radius:50%;box-shadow:0 0 6px transparent;color:var(--wp--preset--color--univers-dark);height:54px;left:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transform:translate3d(-48%,-50%,0);transition:background .3s,box-shadow .3s,opacity .5s .25s;width:54px;z-index:2}.beer-handle:after,.beer-handle:before{border-left:2px solid;border-top:2px solid;content:"";height:15px;position:absolute;top:50%;transform-origin:0 0;width:15px}.beer-handle:before{left:10px;transform:rotate(-45deg)}.beer-handle:after{right:-5px;transform:rotate(135deg)}.beer-reveal[data-beer-label]:after,.beer-slider[data-beer-label]:after{background:hsla(0,0%,100%,.75);border-radius:.125rem;content:attr(data-beer-label);line-height:1;padding:.5rem;position:absolute;top:1.5rem}.beer-slider[data-beer-label]:after{right:1.5rem}.beer-reveal[data-beer-label]:after{left:1.5rem}.beer-reveal[data-beer-label=""]:after,.beer-slider[data-beer-label=""]:after{content:none}.beer-ready .beer-handle,.beer-ready .beer-reveal{opacity:1}

/* Avant / Après : glisser par Pointer Events (cf. brancherGlisserAvantApres, blocs/slider/js/swiper-config.js).
   Bug iOS upstream beerslider#18 : le champ natif .beer-range ne reçoit plus le toucher, il reste focalisable au clavier.
   Règles scopées sur `.beer-pointeur`, posée par le script : sans lui, comportement d'origine de BeerSlider. */
.beer-slider.beer-pointeur{
    cursor:ew-resize;
    touch-action:pan-y pinch-zoom; /* défilement vertical et zoom à deux doigts conservés, glissers horizontaux pour le curseur */
    -webkit-user-select:none;
    user-select:none;
    -webkit-touch-callout:none;
}
.beer-slider.beer-pointeur img{
    -webkit-user-drag:none;
}
.beer-slider.beer-pointeur .beer-range{
    pointer-events:none;
}