@charset "UTF-8";
.lienglobal {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  cursor: pointer;
  z-index: 5;
}

html {
  scroll-behavior: smooth;
  font-size: 76.92%;
  line-height: 1.38;
}

body {
  margin: 0;
}

/* pp + pole premium */
/* CTA soulignement CRL */
/* Booster CRL */
/* Cartouche CRL */
/**
 * Mixin pour créer un élément sticky avec un conteneur ayant un ratio d'aspect défini
 * 
 * Ce mixin génère une structure à 3 niveaux :
 * - Un conteneur principal avec ratio d'aspect
 * - Un élément de fond (background) positionné en absolu
 * - Un wrapper sticky qui reste collé lors du scroll
 * 
 *  $class - Nom de la classe CSS (sans le point) ex : 'hero-section'
 *  $aspect-ratio - Ratio largeur/hauteur du conteneur (défaut: 1900/1080)
 *  $top - Position depuis le haut où l'élément reste collé - la hauteur du wrapper (défaut: calc(100% - 4em))
 *  $height - Hauteur du wrapper sticky (défaut: auto)
 *  $padding - Padding interne du wrapper (défaut: 0.8em 2.5em)
 *  $width - Largeur du wrapper sticky (défaut: 100%)
 *
 * 
 * @example
 * // Avec paramètres personnalisés
 *    @include sticky_mixins.sticky('section', $aspect-ratio: 1900/ 1080, $top: calc(100% - 6em), $width: 100%, $height: auto, $padding:0.8em 2.5em);
 *



 * VU QUE LA MIXIN EST A 3 NIVEAUX, IL FAUT BIEN PENSER A AJOUTER LES 3 NIVEAUX DANS LE HTML
 *            1 : class
 *            2 : class + _bg
 *            3 : class + _wrapper

 Structure HTML attendue :
 * <div class="bloc1_hero ResetBloc">

        <div class="section"> ------------- 1er niveau

            <div class="section_bg"> ------------- 2em niveau

                <!-- Contenu de fond -->
                <img src="/img/b1_solo_img1_desk.webp" alt="Background">

            </div>

            <div class="section_wrapper"> ------------- 3em niveau
                <!-- Contenu sticky -->
                <h1>Titre sticky</h1>
                <p>Contenu qui reste collé en haut</p>
            </div>

        </div>

    </div>


*/
/* pp + pole premium */
/* Bandeau CRL - BLOC0 */
/* .crl_banner[data-color="blue"] {
   @include bandeau_promo.bandeau_promo(#fff, $bleucrl, $showlogo: none);
}

.crl_banner[data-color="beige"] {
   @include bandeau_promo.bandeau_promo($bleucrl, $beigecrl, $showlogo: none);
}

.crl_banner[data-color="red"] {
   @include bandeau_promo.bandeau_promo(#fff, $redcrl, $showlogo: none);
}

.crl_banner[data-color="beige_red"] {
   @include bandeau_promo.bandeau_promo($redcrl, $beigecrl, $showlogo: none);
} */
/*        
            <div class="crl_banner ResetBloc AllBloc" data-lang="fr_fr" data-bloc="bloc0" data-color="blue">      
                    <div class="bloctxt">
                        <div class="logo"><img src="images/C&V_BLANC.svg" alt="logoFID"></div>
                        <div><p class="titre AllTxt">&nbsp;</p></div>
                        <div class="bloccta"><a class="AllTxt" href="#" target="_self">&nbsp;</a></div>        
                    </div>
                    <!--<p class="mention">*offre valable pour les clientes ayant créé un compte avant le 11/10/24</p>-->
                    <a class="lienglobal" href="#" target="_self"></a>
            </div> 
*/
/*  -------- THEME COLOR VARIABLE -------- */
/* GLOBAL */
/* -------- A supprimer -------- */
.bloc_txt_seo {
  background-color: #03112C;
  padding: clamp(0.7692307692rem, 0.2197802198rem + 2.2321428571vw, 1.5384615385rem);
}
.bloc_txt_seo p {
  margin: 0;
}
@media screen and (min-width: 768px) {
  .bloc_txt_seo {
    padding: clamp(3.8461538462rem, 1.2310412841rem + 4.4208664898vw, 7.6923076923rem);
  }
}

/* -------- A supprimer Fin-------- */
.bloc_txt_seo[data-bloc=bloc-seo-home] {
  color: #fff;
  font-size: clamp(0.8461538462rem, 0.8461538462rem + 0vw, 0.8461538462rem);
}
@media screen and (min-width: 768px) {
  .bloc_txt_seo[data-bloc=bloc-seo-home] {
    font-size: clamp(0.8461538462rem, 0.8461538462rem + 0vw, 0.8461538462rem);
  }
}

.bloc_txt_seo[data-bloc=bloc-seo-pagelist] {
  color: #03112C;
  font-size: clamp(0.8461538462rem, 0.8461538462rem + 0vw, 0.8461538462rem);
}
@media screen and (min-width: 768px) {
  .bloc_txt_seo[data-bloc=bloc-seo-pagelist] {
    font-size: clamp(0.8461538462rem, 0.8461538462rem + 0vw, 0.8461538462rem);
  }
}

.bloc_txt_seo .title {
  font-weight: 600;
}

.bloc_txt_seo .text-in {
  color: #fff;
  width: 50%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: clamp(0.8461538462rem, 0.8461538462rem + 0vw, 0.8461538462rem);
  height: 11px;
  transition: all 1s ease-in-out;
}
@media screen and (min-width: 768px) {
  .bloc_txt_seo .text-in {
    font-size: clamp(0.8461538462rem, 0.8461538462rem + 0vw, 0.8461538462rem);
  }
}

.bloc_txt_seo .text-in.open {
  opacity: 1;
  white-space: normal;
  text-overflow: clip;
  overflow: visible;
  width: 100%;
  height: auto;
}

.bloc_txt_seo .Button .Button-plus {
  display: flex;
  flex-flow: nowrap;
  align-items: center;
  margin: 5px 0;
  gap: 0.5em;
  font-weight: 700;
}

.bloc_txt_seo .Button .BackButton {
  background-image: url("/on/demandware.static/-/Library-Sites-SharedLibraryCarollSFRA/default/content_asset/footer-seo/Button-plus-white.svg");
  width: 10px;
  height: 10px;
  background-size: cover;
  background-repeat: no-repeat;
}

.bloc_txt_seo .cont_cta {
  display: flex;
  margin-top: 2em;
  flex-flow: wrap;
  gap: 0.5em;
  align-items: center;
}

.bloc_txt_seo .bloccta {
  display: inline-block;
  position: relative;
  z-index: 6;
  font-weight: 600;
  line-height: 1;
  font-size: clamp(0.8461538462rem, 0.8461538462rem + 0vw, 0.8461538462rem);
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  padding-bottom: 0.3em;
}
@media screen and (max-width: 768.98px) {
  .bloc_txt_seo .bloccta {
    font-size: clamp(0.8461538462rem, 0.8461538462rem + 0vw, 0.8461538462rem);
  }
}
.bloc_txt_seo .bloccta::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0em;
  width: calc(100% - 0em);
  height: 1px;
  background-color: #fff;
}
.bloc_txt_seo .bloccta a:hover, .bloc_txt_seo .bloccta a:active, .bloc_txt_seo .bloccta a:link, .bloc_txt_seo .bloccta a:visited {
  text-decoration: none;
  color: #fff;
}
.bloc_txt_seo .bloccta:hover::after {
  width: calc(100% - 0em);
  animation-name: soulignement;
  animation-timing-function: ease-in-out;
  animation-duration: 480ms;
}
@keyframes soulignement {
  0% {
    left: unset;
    right: 0;
    width: calc(100% - 1em);
  }
  33% {
    width: 0;
  }
  66% {
    right: unset;
    left: 0;
  }
  100% {
    width: calc(100% - 1em);
  }
}/*# sourceMappingURL=style.css.map */