/* =============================================================================
   bureaups2.com — bandeau de la page d'accueil
   Restitution au pixel de la composition Slider Revolution d'origine.

   Contexte. Le bandeau a ete reconstruit le 31/08/2026 avec le widget *Slides*
   d'Elementor Pro, l'extension Slider Revolution (6.2.23, non licenciee, sans
   mise a jour depuis 2021) etant le vecteur d'intrusion presume. Le contenu a
   ete repris fidelement ; la composition, non : le widget centre un texte blanc
   sur l'image, la version d'origine posait un panneau orange plein en bas a
   gauche avec le texte aligne dedans. Cette feuille retablit la composition
   d'origine sans reinstaller l'extension.

   Methode. Toutes les valeurs ci-dessous sont des MESURES du site d'origine,
   relevees dans le navigateur via le protocole DevTools les 02/09/2026 sur
   http://145.239.37.162 (cf. deploy/outils/styles-bandeau.mjs et
   deploy/sauvegardes/styles-bandeau-*.json). Elles sont exprimees dans la
   grille de reference de Slider Revolution, pas en pixels d'ecran.

   Le modele d'echelle, etabli sur 16 largeurs de 320 a 1980 px :

     largeur de vue >= 480 px : grille 1980 x 600, tout est mis a l'echelle
                                par (largeur du bandeau / 1980)
     largeur de vue <= 479 px : grille  480 x 503, echelle (largeur / 480)

   La bascule est a 480 px exactement : mesure a 480 -> 145 px de haut
   (600 x 480/1980), a 479 -> 502 px (503 x 479/480).

   D'ou les deux mecanismes employes :
     - « aspect-ratio » sur le conteneur reproduit la hauteur proportionnelle ;
     - « cqw » (unite de requete de conteneur) exprime chaque longueur en
       fraction de la largeur du bandeau, ce qui reproduit exactement la mise
       a l'echelle de Slider Revolution.
   La variable --u vaut « une unite de grille ». Repli en vw pour les
   navigateurs sans requetes de conteneur : l'ecart est la largeur de la barre
   de defilement, environ 0,8 %.

   Portee : le seul widget Slides de la page d'accueil (element 0eba2d7 de la
   page 20). Si le bandeau est reconstruit, cet identifiant change et la
   feuille cesse simplement de s'appliquer — elle ne peut pas casser une autre
   page.
   ========================================================================== */

.elementor-20 .elementor-element.elementor-element-0eba2d7 {
  --u: 0.05050505vw;              /* 1 unite de grille = 1/1980 de la largeur */
  --panneau: #d46317;
}

/* Le conteneur de requete est le bloc EXTERIEUR, pas celui qui porte
   « aspect-ratio ». Les deux poses sur le meme element, Chrome retombait par
   intermittence sur le repli en vw : mesure du 02/09/2026, panneau a 368 px
   au lieu de 365, bord droit a 464 au lieu de 459 — soit exactement l'ecart
   entre 100vw (1440, barre de defilement comprise) et la largeur reelle du
   bandeau (1425). Separer les deux roles rend la resolution deterministe. */
@supports (container-type: inline-size) {
  .elementor-20 .elementor-element.elementor-element-0eba2d7 .elementor-widget-container {
    container-type: inline-size;
  }
  .elementor-20 .elementor-element.elementor-element-0eba2d7 {
    --u: 0.05050505cqw;
  }
}

/* --- Hauteur proportionnelle -------------------------------------------- */
/* Elementor pose une hauteur FIXE (600 px bureau, 503 px tablette et mobile).
   C'est la cause du bandeau trop haut : a 1440 px l'original faisait 432 px,
   a 768 px il en faisait 233. Le rapport 1980/600 restitue la proportion. */
.elementor-20 .elementor-element.elementor-element-0eba2d7 .elementor-main-swiper {
  aspect-ratio: 1980 / 600;
  height: auto !important;
}
.elementor-20 .elementor-element.elementor-element-0eba2d7 .swiper-slide {
  height: 100% !important;
}

/* --- Le cadre de la diapositive ----------------------------------------- */
/* .swiper-slide-inner est le lien qui couvre la diapositive ; il est en flex
   avec 50 px de marge interne et centre son contenu. On le neutralise pour
   pouvoir positionner le panneau en absolu. */
.elementor-20 .elementor-element.elementor-element-0eba2d7 .swiper-slide-inner {
  display: block !important;
  padding: 0 !important;
}

/* --- Le panneau orange --------------------------------------------------- */
/* Mesure : x=-442,6  y=337,6  l=1082,2  h=295,8 (unites de grille).
   Il deborde volontairement a gauche et en bas : l'original le fait aussi,
   le debordement est masque par le conteneur. */
.elementor-20 .elementor-element.elementor-element-0eba2d7 .swiper-slide-contents {
  position: absolute;
  left:   calc(-442.6 * var(--u));
  top:    calc( 337.6 * var(--u));
  width:  calc(1082.2 * var(--u));
  height: calc( 295.8 * var(--u));
  max-width: none !important;
  background-color: var(--panneau);
  text-align: left !important;
}

/* Les trois calques sont positionnes PAR RAPPORT AU PANNEAU : leurs
   coordonnees de grille moins celles du panneau. */

/* Titre — mesure x=90,4 y=363,8 l=529,6 ; Poppins 700, corps 35,3, interligne 40,3 */
.elementor-20 .elementor-element.elementor-element-0eba2d7 .elementor-slide-heading {
  position: absolute;
  left:  calc(533.0 * var(--u));
  top:   calc( 26.2 * var(--u));
  width: calc(529.6 * var(--u));
  margin: 0 !important;
  font-family: "Poppins", Sans-serif;
  font-weight: 700;
  font-size:   calc(35.3 * var(--u));
  line-height: calc(40.3 * var(--u));
  color: #fff;
  text-align: left;
  text-shadow: none;
}

/* Credits — mesure x=89,4 y=453,4 l=529,6 ; Poppins 400, corps 20,2, interligne 30,2 */
.elementor-20 .elementor-element.elementor-element-0eba2d7 .elementor-slide-description {
  position: absolute;
  left:  calc(532.0 * var(--u));
  top:   calc(115.8 * var(--u));
  width: calc(529.6 * var(--u));
  margin: 0 !important;
  font-family: "Poppins", Sans-serif;
  font-weight: 400;
  font-size:   calc(20.2 * var(--u));
  line-height: calc(30.2 * var(--u));
  color: #fff;
  text-align: left;
  text-shadow: none;
}

/* Bouton — mesure x=87,4 y=542,1 l=136,1 h=42,3 ; Roboto 500, corps 17,
   interligne 40, marges laterales 25, filet 1 px blanc a 35 %, fond transparent.
   Le widget le rend en aplat orange : on revient au contour d'origine. */
.elementor-20 .elementor-element.elementor-element-0eba2d7 .elementor-slide-button,
.elementor-20 .elementor-element.elementor-element-0eba2d7 .elementor-slide-button:hover {
  position: absolute;
  left: calc(530.0 * var(--u));
  top:  calc(204.5 * var(--u));
  margin: 0 !important;
  padding: 0 calc(25.2 * var(--u)) !important;
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 0 !important;
  font-family: "Roboto", Sans-serif;
  font-weight: 500;
  font-size:   calc(17.1 * var(--u));
  line-height: calc(40.3 * var(--u));
  color: #fff !important;
  white-space: nowrap;
}

/* --- Les chevrons -------------------------------------------------------- */
/* L'original ne les met pas aux bords de l'image mais DANS le panneau, a
   droite du bouton. Ce sont deux carres de 25 unites, filet de 3 unites en
   haut et a droite, tournes de -135 et +45 degres. La mesure donne une boite
   englobante de 35,3 : c'est 25 x racine(2), la boite d'un carre tourne. */
.elementor-20 .elementor-element.elementor-element-0eba2d7 .elementor-swiper-button {
  position: absolute;
  top: calc(548.15 * var(--u));
  width:  calc(25 * var(--u));
  height: calc(25 * var(--u));
  margin: 0;
  padding: 0;
  border-style: solid;
  border-color: #fff;
  border-width: calc(3 * var(--u)) calc(3 * var(--u)) 0 0;
  background: none;
  color: transparent;
  font-size: 0;
  line-height: 0;
  z-index: 3;
}
.elementor-20 .elementor-element.elementor-element-0eba2d7 .elementor-swiper-button i,
.elementor-20 .elementor-element.elementor-element-0eba2d7 .elementor-swiper-button svg {
  display: none !important;
}
.elementor-20 .elementor-element.elementor-element-0eba2d7 .elementor-swiper-button-prev {
  left: calc(542.85 * var(--u));
  right: auto;
  transform: rotate(-135deg);
}
.elementor-20 .elementor-element.elementor-element-0eba2d7 .elementor-swiper-button-next {
  left: calc(577.15 * var(--u));
  right: auto;
  transform: rotate(45deg);
}

/* --- Pastilles de position ------------------------------------------------ */
/* L'original n'en a pas. */
.elementor-20 .elementor-element.elementor-element-0eba2d7 .swiper-pagination {
  display: none !important;
}

/* --- Panoramique-zoom ---------------------------------------------------- */
/* L'effet « Ken Burns » a ete active en base le 02/09/2026 (cf.
   deploy/outils/reglages-bandeau.php). Ses valeurs par defaut ne sont pas
   celles de l'original :
     Elementor : 20 s, echelle finale 1,3
     origine   : panzoom « d:10000;ss:100;se:110% » -> 10 s, echelle 1,1
   Le sens (zoom avant) et la progression lineaire, eux, coincident deja. */
.elementor-20 .elementor-element.elementor-element-0eba2d7 .elementor-ken-burns--active {
  transition-duration: 10s;
}
.elementor-20 .elementor-element.elementor-element-0eba2d7 .elementor-ken-burns--active.elementor-ken-burns--in {
  transform: scale(1.1);
}

/* =============================================================================
   Palier mobile — grille 480 x 503, en dessous de 480 px de large.
   Bascule mesuree a 480 px exactement, d'ou le 479.98px.
   ========================================================================== */
@media (max-width: 479.98px) {

  .elementor-20 .elementor-element.elementor-element-0eba2d7 {
    --u: 0.20833333vw;            /* 1 unite de grille = 1/480 de la largeur */
  }

  @supports (container-type: inline-size) {
    .elementor-20 .elementor-element.elementor-element-0eba2d7 {
      --u: 0.20833333cqw;
    }
  }

  .elementor-20 .elementor-element.elementor-element-0eba2d7 .elementor-main-swiper {
    aspect-ratio: 480 / 503;
  }

  /* Mesure : x=-162,3 y=276,6 l=733,0 h=227,0 — le panneau couvre toute la
     largeur a ce palier, il deborde des deux cotes. */
  .elementor-20 .elementor-element.elementor-element-0eba2d7 .swiper-slide-contents {
    left:   calc(-162.3 * var(--u));
    top:    calc( 276.6 * var(--u));
    width:  calc( 733.0 * var(--u));
    height: calc( 227.0 * var(--u));
  }

  .elementor-20 .elementor-element.elementor-element-0eba2d7 .elementor-slide-heading {
    left:  calc(181.3 * var(--u));
    top:   calc( 33.0 * var(--u));
    width: calc(381.0 * var(--u));
    font-size:   calc(25.1 * var(--u));
    line-height: calc(28.1 * var(--u));
  }

  .elementor-20 .elementor-element.elementor-element-0eba2d7 .elementor-slide-description {
    left:  calc(181.3 * var(--u));
    top:   calc(103.2 * var(--u));
    width: calc(441.7 * var(--u));
    font-size:   calc(18.0 * var(--u));
    line-height: calc(25.1 * var(--u));
  }

  .elementor-20 .elementor-element.elementor-element-0eba2d7 .elementor-slide-button,
  .elementor-20 .elementor-element.elementor-element-0eba2d7 .elementor-slide-button:hover {
    left: calc(176.3 * var(--u));
    top:  calc(168.3 * var(--u));
    padding: calc(6 * var(--u)) calc(10 * var(--u)) !important;
    font-size:   calc(18.0 * var(--u));
    line-height: calc(30.1 * var(--u));
  }

  /* A ce palier les chevrons passent a droite du panneau, et grandissent
     a 30 unites (boite englobante mesuree 42,4 = 30 x racine(2)). */
  .elementor-20 .elementor-element.elementor-element-0eba2d7 .elementor-swiper-button {
    top:    calc(449.9 * var(--u));
    width:  calc(30 * var(--u));
    height: calc(30 * var(--u));
  }
  .elementor-20 .elementor-element.elementor-element-0eba2d7 .elementor-swiper-button-prev {
    left: calc(386.8 * var(--u));
  }
  .elementor-20 .elementor-element.elementor-element-0eba2d7 .elementor-swiper-button-next {
    left: calc(421.9 * var(--u));
  }
}