/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Feb 13 2026 | 11:19:29 */
.info-flash .t-entry-readmore a,
.btn_rose a{
  color:#000!important;
  font-family:Sculpin!important;
  font-size:16px!important;
  font-weight:700!important;
  line-height:19px!important;

  padding:12px 67px 12px 19px;
  border-radius:50px;
  border:1px solid #FF007C;
  display:inline-block!important;
  margin-top:10px!important;
  position:relative;

  background:transparent;
  overflow:hidden;
  transition: color .25s ease;

  /* stacking context propre (bulle derrière, texte+flèche devant) */
  isolation:isolate;
}

/* BULLE (derrière le texte) : démarre bas-centre et remplit */
.info-flash .t-entry-readmore a::before,
.btn_rose a::before {
  content:"";
  position:absolute;
  left:50%;
  top:100%;                 /* départ bas */
  width:14px;
  height:14px;
  border-radius:999px;
  background:#FF007C;

  transform:translate(-50%, -50%) scale(0);
  transform-origin:50% 0%;  /* au repos: fermeture vers le haut */

  z-index:-1;

  transition:
    transform .45s cubic-bezier(.2,.8,.2,1),
    top .45s cubic-bezier(.2,.8,.2,1),
    transform-origin 0s linear .45s; /* change l'origine APRÈS la fermeture */
}

/* Flèche */
.info-flash .t-entry-readmore a::after,
.btn_rose a::after {
  position:absolute;
  content:"";
  background-image:url('/wp-content/uploads/2025/12/arrow_black.svg');
  background-repeat:no-repeat;
  background-size:contain;
  width:39px;
  height:8px;
  top:calc(50% - 4px);
  right:19px;
  z-index:2;
}

/* Hover: texte blanc + bubble qui part du bas et couvre */
.info-flash .t-entry-readmore a:hover,
.btn_rose a:hover {
  color:#fff!important;
}

.info-flash .t-entry-readmore a:hover::before,
.btn_rose a:hover::before {
  top:110%;                  /* centre pour couvrir proprement */
  transform-origin:50% 100%;/* départ bas-centre */
  transform:translate(-50%, -50%) scale(45);

  transition:
    transform .45s cubic-bezier(.2,.8,.2,1),
    top .45s cubic-bezier(.2,.8,.2,1),
    transform-origin 0s;     /* origine change tout de suite au hover */
}

/* Focus clavier */
.info-flash .t-entry-readmore a:focus-visible,
.btn_rose a:focus-visible {
  outline:3px solid rgba(255,0,124,.35);
  outline-offset:3px;
}

.info-flash .t-entry-readmore a:hover::after,
.btn_rose a:hover::after {
  filter: brightness(0) invert(1);
}


.btn_link a {
	color: #000!important;
	background-color: #FFF!important;
	font-family: Sculpin!important;
	font-size: 16px!important;
	font-weight: 700!important;
	line-height: 19px!important;
	padding: 12px 19px 12px 19px;
	border-radius: 50px;
	border: 1px solid #FF007C;
	display: inline-block!important;
}

.btn-blue a {
	color: #1A4A5C!important;
	font-family: Sculpin!important;
	background-color: #00C1EE!important;
	border: 1px solid transparent;
	font-size: 16px!important;
	font-weight: 700!important;
	line-height: 19px!important;
	padding: 12px 67px 12px 19px;
	border-radius: 50px;
	display: inline-block!important;
	margin-top: 28px!important;
	position: relative;
	z-index: 3!important;
}
.btn-blue a:after {
	position: absolute;
	content: '';
	background-image: url('https://preprod.nautilis.fr/wp-content/uploads/2026/01/Arrow-1.svg');
	background-repeat: no-repeat;
	background-size: contain;
	width: 39px;
	height: 8px;
	top: calc(50% - 4px);
	right: 19px;
}
.btn-pink a {
	color: #FFF!important;
	font-family: Sculpin!important;
	background-color: #FF0099!important;
	border: 1px solid transparent;
	font-size: 16px!important;
	font-weight: 700!important;
	line-height: 19px!important;
	padding: 12px 67px 12px 19px;
	border-radius: 50px;
	display: inline-block!important;
	margin-top: 28px!important;
	position: relative;
}
.btn-pink a:after {
	position: absolute;
	content: '';
	background-image: url('/wp-content/uploads/2025/12/arrow-white-nauti.svg');
	background-repeat: no-repeat;
	background-size: contain;
	width: 39px;
	height: 8px;
	top: calc(50% - 4px);
	right: 19px;
}

.btn-blue-marine a {
	color: #FFF!important;
	font-family: Sculpin!important;
	background-color: #3F51B5!important;
	border: 1px solid transparent;
	font-size: 16px!important;
	font-weight: 700!important;
	line-height: 19px!important;
	padding: 12px 67px 12px 19px;
	border-radius: 50px;
	display: inline-block!important;
	margin-top: 28px!important;
	position: relative;
}
.btn-blue-marine a:after {
	position: absolute;
	content: '';
	background-image: url('/wp-content/uploads/2025/12/arrow-white-nauti.svg');
	background-repeat: no-repeat;
	background-size: contain;
	width: 39px;
	height: 8px;
	top: calc(50% - 4px);
	right: 19px;
}
.btn-white a {
	color: #3F51B5!important;
	font-family: Sculpin!important;
	background-color: #FFF!important;
	border: 1px solid #FF0099;
	font-size: 16px!important;
	font-weight: 700!important;
	line-height: 19px!important;
	padding: 12px 67px 12px 19px;
	border-radius: 50px;
	display: inline-block!important;
	margin-top: 28px!important;
	position: relative;
}
.btn-white a:after {
	position: absolute;
	content: '';
	background-image: url('/wp-content/uploads/2025/12/arrow-blue-marine.svg');
	background-repeat: no-repeat;
	background-size: contain;
	width: 39px;
	height: 8px;
	top: calc(50% - 4px);
	right: 19px;
}


/* ========= Base: bubble fill pour tous les boutons ========= */
.btn_link a,
.btn-blue a,
.btn-pink a,
.btn-blue-marine a,
.btn-white a{
  position:relative;
  overflow:hidden;
  isolation:isolate; /* bubble derrière, contenu devant */
  transition: color .25s ease, border-color .25s ease;
}

/* Bubble générique (couleur/anim gérées par variables par bouton) */
.btn_link a::before,
.btn-blue a::before,
.btn-pink a::before,
.btn-blue-marine a::before,
.btn-white a::before{
  content:"";
  position:absolute;
  left:50%;
  top:100%;
  width:14px;
  height:14px;
  border-radius:999px;
  background: var(--bubble, #FF007C);

  transform: translate(-50%,-50%) scale(0);
  transform-origin:50% 0%;
  z-index:-1;

  transition:
    transform .45s cubic-bezier(.2,.8,.2,1),
    top .45s cubic-bezier(.2,.8,.2,1),
    transform-origin 0s linear .45s;
}

/* Hover bubble */
.btn_link a:hover::before,
.btn-blue a:hover::before,
.btn-pink a:hover::before,
.btn-blue-marine a:hover::before,
.btn-white a:hover::before{
  top:170%;
  transform-origin:50% 100%;
  transform: translate(-50%,-50%) scale(45);
  transition:
    transform .45s cubic-bezier(.2,.8,.2,1),
    top .45s cubic-bezier(.2,.8,.2,1),
    transform-origin 0s;
}
.btn-white a:hover::before {
	top: 250%;
}

/* ========= Cas 1: fond blanc (outline rose) ========= */
.btn_link a{ --bubble:#FF007C; }
.btn_link a:hover{
  color:#fff!important;
  border-color:#FF007C!important; /* ✅ bordure au hover */
}

/* ========= Cas 2: fonds unis (bubble blanche, texte devient couleur du fond) ========= */
.btn-blue a{ --bubble:#fff; --hoverText:#1A4A5C; }
.btn-pink a{ --bubble:#fff; --hoverText:#FF0099; }
.btn-blue-marine a{ --bubble:#fff; --hoverText:#3F51B5; }

.btn-blue a:hover,
.btn-pink a:hover,
.btn-blue-marine a:hover{
  color: var(--hoverText) !important;
	border: 1px solid var(--hoverText) !important;
}

/* ========= Cas 3: fond blanc (texte marine) ========= */
.btn-white a{ --bubble:#FF0099; }
.btn-white a:hover{
  color:#fff!important;
  border-color:#FF0099!important; /* ✅ bordure au hover */
}

.btn-white.btn-blue-hover a{ --bubble: #3F51B5; }
.btn-white.btn-blue-hover a:hover{
  color:#fff!important;
  border-color:#3F51B5!important; /* ✅ bordure au hover */
}

/* ========= Flèches : ne rien ajouter si pas de flèche ========= */
/* Flèches blanches sur fond uni -> deviennent couleur du fond au hover */

.btn-pink a:hover::after{
  filter: brightness(0) saturate(100%) invert(22%) sepia(88%) saturate(4866%) hue-rotate(310deg) brightness(100%) contrast(104%);
}
.btn-blue-marine a:hover::after{
  filter: brightness(0) saturate(100%) invert(33%) sepia(60%) saturate(1718%) hue-rotate(217deg) brightness(91%) contrast(95%);
}

/* Flèche bleue sur btn-white -> devient blanche au hover */
.btn-white a:hover::after{ filter: brightness(0) invert(1); }



@media screen and (max-width: 959px){

  /* coupe les transitions pour éviter les effets au tap */
  .info-flash .t-entry-readmore a,
  .btn_rose a,
  .btn_link a,
  .btn-blue a,
  .btn-pink a,
  .btn-blue-marine a,
  .btn-white a{
    transition: none !important;
  }

  /* neutralise tous les hover */
  .info-flash .t-entry-readmore a:hover,
  .btn_rose a:hover,
  .btn_link a:hover,
  .btn-blue a:hover,
  .btn-pink a:hover,
  .btn-blue-marine a:hover,
  .btn-white a:hover{
    color: inherit !important;
    border-color: inherit !important;
    filter: none !important;
  }

  /* remet la bubble au repos + pas d’anim */
  .info-flash .t-entry-readmore a::before,
  .btn_rose a::before,
  .btn_link a::before,
  .btn-blue a::before,
  .btn-pink a::before,
  .btn-blue-marine a::before,
  .btn-white a::before{
    top: 100% !important;
    transform: translate(-50%,-50%) scale(0) !important;
    transform-origin: 50% 0% !important;
    transition: none !important;
  }

  /* neutralise les filtres sur les flèches au hover */
  .info-flash .t-entry-readmore a:hover::after,
  .btn_rose a:hover::after,
  .btn_link a:hover::after,
  .btn-blue a:hover::after,
  .btn-pink a:hover::after,
  .btn-blue-marine a:hover::after,
  .btn-white a:hover::after{
    filter: none !important;
  }
	.btn-blue a::after,
	.info-flash .t-entry-readmore a::after,
	.btn_rose a::after,
	.btn_link a::after,
	.btn-pink a::after,
    .btn-blue-marine a::after,
    .btn-white a::after{
		display: none;
	}
	.btn-blue a,
	.info-flash .t-entry-readmore a,
	.btn_rose a,
	.btn_link a,
	.btn-pink a,
    .btn-blue-marine a,
    .btn-white a {
		padding: 12px 19px 12px 19px!important;
	}
}