@charset "UTF-8";
body,
header {
  --color-primary: #00152b;
  --color-secondary: #2f526d;
  --color-tertiary: #38bdf8;
  --color-white: #fff;
}

.bg-primary {
  --background-color: var(--color-primary);
  --text-color: var(--color-white);
}

.bg-secondary {
  --background-color: var(--color-secondary);
  --text-color: var(--color-white);
}

.bg-white {
  --background-color: var(--color-white);
  --text-color: var(--color-primary);
}

.bg-white,
.bg-secondary,
.bg-primary {
  background-color: var(--background-color);
  color: var(--text-color);
}

.nav-link {
  position: relative;
  transition: color 0.3s ease;
}
.nav-link ::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-tertiary);
  transition: width 0.3s ease;
}
.nav-link .active::after, .nav-link:hover::after {
  width: 100%;
}

#mobile-menu {
  color: var(--color-white);
  transform: translateX(-100%);
  transition: transform 0.3s ease-out;
  z-index: 51;
}
#mobile-menu.open {
  transform: translateX(0);
}

header, .header-mobile {
  background: rgba(0, 21, 43, 0.1);
  width: 100%;
}

.mobile-menu-link {
  font-family: Livvic;
  text-transform: uppercase;
  font-weight: 200;
}

/* Responsive */
@media (min-width: 901px) {
  .header-mobile, .mobile-menu-button, .mobile-menu {
    display: none;
  }
  .nav-desktop {
    display: flex !important;
  }
}
@media (max-width: 1000px) {
  .nav-desktop {
    display: none;
  }
}
body {
  font-family: "Montserrat", sans-serif;
}

h1 {
  font-family: Open sans !important;
  text-transform: uppercase;
  font-weight: 400;
}

h2 {
  font-family: Livvic !important;
  text-transform: uppercase;
  font-weight: 600;
}

@media (max-width: 1000px) {
  h2 {
    text-align: center;
  }
}
.rs-icn {
  width: 30px;
  height: 30px;
}
.rs-icn.link {
  width: 33px;
  height: 33px;
}

@media (max-width: 1000px) {
  .info-contact {
    display: none;
  }
}
.btn-primary {
  background-color: transparent;
  border: 2px solid var(--color-tertiary);
  color: var(--color-tertiary);
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background-color: var(--color-tertiary);
  color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(56, 189, 248, 0.3);
}

.woocommerce.single-product .wcpay-express-checkout-wrapper {
  display: none;
}
.woocommerce.single-product .price {
  font-size: 2rem !important;
  color: var(--color-tertiary) !important;
  font-weight: 700;
  display: block;
  text-align: center;
}
.woocommerce.single-product .price ins {
  color: var(--color-tertiary) !important;
  text-decoration: none;
}
.woocommerce.single-product .price del {
  color: rgba(255, 255, 255, 0.5);
}
.woocommerce.single-product .stock.in-stock {
  display: none;
}
.woocommerce.single-product .single_add_to_cart_button {
  /* Utilise le style btn-primary déjà défini dans votre style.css */
  background-color: transparent !important;
  border: 2px solid var(--color-tertiary) !important;
  color: var(--color-tertiary) !important;
  text-transform: uppercase;
  font-weight: bold;
  padding: 0.75rem 2rem !important;
  border-radius: 9999px;
  /* rounded-full */
  transition: all 0.3s ease;
  width: 100% !important;
  /* Pleine largeur */
}
.woocommerce.single-product .single_add_to_cart_button:hover {
  background-color: var(--color-tertiary) !important;
  color: var(--color-primary) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(56, 189, 248, 0.3);
}
.woocommerce.single-product .quantity {
  display: none !important;
}
.woocommerce.single-product .cart {
  display: block;
  width: 100%;
}
.woocommerce.single-product .price-and-cart .product_title,
.woocommerce.single-product .price-and-cart .woocommerce-product-details__short-description {
  display: none;
}
.woocommerce.single-product .experience-block {
  background-color: var(--color-secondary);
}
.woocommerce.single-product .coach-section img {
  height: 100% !important;
  width: 100% !important;
}

/* Cache l'élément label généré par WooCommerce pour les champs que nous voulons simuler en "label-in-input" */
/* Nous ciblons spécifiquement les éléments avec la classe 'input-label-hidden' */
.form-row.input-label-hidden label {
  display: none !important;
}

/* Ajustement des champs de saisie pour qu'ils ressemblent aux champs modernes */
.form-row .input-text,
.form-row textarea,
.form-row select {
  /* Styles pour s'assurer qu'ils sont bien visibles et lisibles sur le fond blanc */
  padding: 1.25rem 0.75rem; /* Augmenter le padding pour l'effet label */
  border: 1px solid #000;
  border-radius: 0.375rem;
  background-color: #fff;
  color: var(--color-primary, #00152b);
  width: 100%;
  height: 3.125em;
  line-height: 1em;
}

/* Assurer que le placeholder est bien visible */
.form-row .input-text::-moz-placeholder, .form-row textarea::-moz-placeholder {
  color: #6b7280; /* gray-500 */
  opacity: 1;
}
.form-row .input-text::placeholder,
.form-row textarea::placeholder {
  color: #6b7280; /* gray-500 */
  opacity: 1;
}

/* Pour les radios/checkbox, on garde le label visible (pas de classe input-label-hidden) */
.form-row input[type=radio],
.form-row input[type=checkbox] {
  margin-right: 0.5rem;
}

/* Surlignage des champs en erreur */
.form-row.stage-error-highlight {
  /* Utiliser la couleur tertiaire pour une alerte visuelle */
  border: 1px solid var(--color-tertiary, #38bdf8);
  border-radius: 4px;
  padding: 5px; /* Ajoute un padding autour du groupe de champs */
  margin-bottom: 10px;
  background-color: rgba(56, 189, 248, 0.05); /* Très légère couleur de fond */
}

.form-row.stage-error-highlight label {
  color: var(--color-tertiary, #38bdf8) !important;
}

/* Surligner l'input lui-même pour plus de clarté */
.form-row.stage-error-highlight .input-text,
.form-row.stage-error-highlight textarea {
  border-color: var(--color-tertiary, #38bdf8) !important;
}

/*
 * STYLES POUR LE CHECKOUT WOOCOMMERCE PAR BLOCS
 * Ces styles ciblent les classes du checkout moderne (React)
 * pour correspondre à la charte graphique SangoSwimLegacy.
 */
/* 1. Fond et Couleur Générale */
.wp-block-woocommerce-checkout {
  background-color: var(--color-primary);
  padding-top: 5rem; /* Espace pour le header fixe */
  padding-bottom: 5rem;
}
.wp-block-woocommerce-checkout .wc-block-components-sidebar.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block,
.wp-block-woocommerce-checkout .wc-block-checkout__main.wc-block-components-main form {
  background-color: var(--color-white) !important;
  border-radius: 20px;
  padding: 2rem;
}

.wc-block-checkout__main.wc-block-components-main {
  padding-top: 80px;
}

.wc-block-components-main {
  padding: 2rem;
}

/* 4. Titres des sections (Coordonnées, Facturation...) */
h2.wc-block-components-checkout-step__title {
  font-family: "Teko", sans-serif;
  font-size: 2.25rem; /* text-4xl */
  margin-bottom: 1rem;
  letter-spacing: 0.05em;
}

.wc-block-components-checkout-step__description {
  margin-bottom: 1.5rem;
}

/* 5. Champs de Formulaire (Inputs) */
.wc-block-components-text-input,
.wc-blocks-components-select__container {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 0.375rem !important; /* rounded-md */
  margin-bottom: 1rem;
}

.wc-block-components-text-input input,
.wc-blocks-components-select__select {
  background: transparent !important;
  /* Ajustement du padding pour les labels flottants */
  padding: 1.25rem 0.75rem 0.5rem 0.75rem !important;
}

/* État Focus des inputs */
.wc-block-components-text-input:focus-within,
.wc-blocks-components-select__container:focus-within {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2) !important;
}

/* Labels flottants */
.wc-block-components-text-input label,
.wc-blocks-components-select__label {
  /* Positionnement ajusté pour le style */
  top: 0.35rem !important;
  left: 0.85rem !important;
  font-size: 0.8rem !important;
}

.wc-blocks-components-select__expand {
  fill: #ffffff; /* Flèche du sélecteur en blanc */
}

/* 6. Sidebar (Résumé de la commande) */
.wc-block-components-sidebar.wc-block-checkout__sidebar {
  padding: 1.5rem;
  top: 5rem;
}

p.wc-block-components-checkout-order-summary__title-text {
  font-size: 1.5rem; /* text-2xl */
  font-weight: 700;
}

h3.wc-block-components-product-name {
  font-weight: 500;
}

/* 7. Prix et Totaux */
.price,
.wc-block-components-product-price__value,
.wc-block-components-checkout-order-summary__title-price {
  color: #38bdf8 !important; /* Couleur accentuée pour les prix */
  font-weight: 700;
}

.wc-block-components-totals-item__value {
  font-weight: 700;
}

/* Total principal */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-size: 1.125rem; /* text-lg */
  font-weight: 700;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  color: #38bdf8 !important;
  font-size: 1.125rem;
}

/* 8. Bouton "Commander" */
.wc-block-components-checkout-place-order-button {
  /* Application du style .btn-primary */
  background-color: transparent !important;
  border: 2px solid #38bdf8 !important;
  color: #38bdf8 !important;
  border-radius: 9999px !important; /* rounded-full */
  font-weight: 700 !important;
  padding: 0.75rem 2rem !important;
  width: 100%;
  transition: all 0.3s ease;
  text-transform: uppercase;
}

.wc-block-components-checkout-place-order-button:hover {
  background-color: #38bdf8 !important;
  color: #001f3f !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(56, 189, 248, 0.3);
}

/* 9. Options de paiement */
.wc-block-components-radio-control__label {
  font-weight: 500;
}

.wc-block-components-radio-control-accordion-content {
  background-color: rgba(255, 255, 255, 0.03);
  border-radius: 0.375rem;
  padding: 1rem;
  margin-top: 0.5rem;
}

/* 10. Mentions (CGV, etc.) */
.wc-block-checkout__terms--with-separator {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 1rem;
  margin-top: 1rem;
}

/* Masquer les éléments non désirés */
.wc-block-checkout-shipping-method-block,
.wc-block-checkout-pickup-options-block {
  display: none !important;
}

/* Ajustement de la largeur pour le layout */
@media (min-width: 768px) {
  .wc-block-components-sidebar-layout.is-large .wc-block-components-main {
    width: 60%;
    padding-right: 2rem;
  }
  .wc-block-components-sidebar-layout.is-large .wc-block-components-sidebar {
    width: 40%;
  }
}
/*
 * STYLES POUR LA PAGE "MERCI" (ORDER RECEIVED)
 * S'aligne sur la charte graphique SangoSwimLegacy.
 */
/* 1. Conteneur principal de la page */
.woocommerce-order {
  padding: 2rem;
  padding-top: 5rem;
  color: #d1d5db; /* text-gray-300 pour le corps */
  font-family: "Montserrat", sans-serif;
  background-color: var(--color-primary);
}

/* 2. Message de Succès */
.woocommerce-notice--success,
p.woocommerce-thankyou-order-received {
  background-color: var(--color-secondary) !important; /* Fond bleu ciel très léger */
  border-top-color: var(--color-secondary) !important; /* Bordure bleu ciel */
  color: #ffffff !important;
  font-size: 1.125rem; /* text-lg */
  padding: 1.5rem;
  border-radius: 0.5rem;
}

.woocommerce-notice--success::before {
  color: var(--color-secondary) !important; /* Icône "check" en bleu ciel */
}

/* 3. Résumé de la commande (Numéro, Date, Total) */
ul.woocommerce-order-overview {
  display: flex;
  flex-wrap: wrap;
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.5rem;
  margin-bottom: 3rem;
  border-radius: 0.5rem; /* rounded-lg */
  list-style: none;
}

ul.woocommerce-order-overview li {
  flex-basis: 50%; /* 2 colonnes sur desktop */
  padding: 0.75rem 1rem;
  margin: 0;
  border: none;
  text-transform: none;
  color: #d1d5db;
}

ul.woocommerce-order-overview li strong {
  color: #ffffff;
  font-weight: 700;
}

/* Responsive pour le résumé */
@media (max-width: 767px) {
  ul.woocommerce-order-overview li {
    flex-basis: 100%; /* 1 colonne sur mobile */
  }
}
/* 4. Titres des sections (H2) */
.woocommerce-order-details__title,
.woocommerce-customer-details .woocommerce-column__title {
  font-family: "Teko", sans-serif;
  font-size: 2.25rem; /* text-4xl */
  color: #ffffff;
  margin-bottom: 1.5rem;
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 0.5rem;
}

/* 5. Tableaux des détails (Produits et Totaux) */
.woocommerce-table--order-details {
  width: 100%;
  margin-bottom: 3rem;
  border-radius: 0.5rem;
  overflow: hidden; /* Pour les coins arrondis */
  background-color: rgba(255, 255, 255, 0.03);
}

.woocommerce-table--order-details th {
  color: #ffffff;
  font-weight: 700;
  background-color: rgba(255, 255, 255, 0.05);
}

.woocommerce-table--order-details th,
.woocommerce-table--order-details td {
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1rem;
  color: #d1d5db;
}

/* Nom du produit dans la table */
.woocommerce-table__product-name a {
  color: #ffffff;
  font-weight: 500;
  text-decoration: none;
}

.woocommerce-table__product-name a:hover {
  color: #38bdf8;
}

/* Pied du tableau (Totaux) */
.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td {
  font-size: 1.125rem; /* text-lg */
  font-weight: 700;
  color: #ffffff;
}

/* 6. Prix */
.woocommerce-Price-amount,
.woocommerce-Price-amount bdi {
  color: #38bdf8 !important; /* Bleu ciel accentué */
  font-weight: 700;
}

/* 7. Détails client (Adresse) */
.woocommerce-customer-details address {
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.5rem;
  border-radius: 0.5rem;
  color: #d1d5db;
  line-height: 1.7;
  font-style: normal;
}

.woocommerce-customer-details--email {
  margin-top: 1rem;
}

.bg-white .woocommerce-input-wrapper {
  display: flex;
  flex-wrap: wrap; /* Passage à la ligne sur mobile */
  align-items: center;
  gap: 1.5rem; /* Espace entre chaque option (ex: "Femme" et "Homme") */
  margin-top: 0.5rem; /* Espace sous le label principal (ex: "Sexe *") */
}

/* 2. Masquer les inputs radio et checkbox par défaut */
.bg-white .input-radio {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: absolute; /* Le cache mais le garde fonctionnel */
  opacity: 0;
  width: 0;
  height: 0;
}

/* 3. Styliser le label cliquable (pour radio et checkbox) */
.bg-white label.radio {
  position: relative;
  padding-left: 1.75rem; /* Espace pour le faux bouton (28px) */
  cursor: pointer;
  font-size: 1rem; /* 16px */
  color: #374151; /* text-gray-700 (pour fond blanc) */
  display: inline-flex;
  align-items: center;
  line-height: 1.5;
  margin: 0; /* Réinitialise les marges par défaut */
}

/* 4. Faux bouton (Cercle extérieur pour RADIO) */
.bg-white label.radio::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.125rem; /* 18px */
  height: 1.125rem; /* 18px */
  border: 2px solid #9ca3af; /* border-gray-400 */
  border-radius: 50%;
  background-color: #ffffff; /* Fond blanc */
  transition: all 0.2s ease;
}

/* 6. État sélectionné (Point intérieur pour RADIO) */
.bg-white .input-radio:checked + label.radio::before {
  border-color: #38bdf8; /* Bleu ciel */
  background-color: #38bdf8; /* Remplissage bleu */
  box-shadow: 0 0 0 3px white inset; /* Point central blanc */
}

/* 8. Effet de focus pour l'accessibilité (Radio et Checkbox) */
.bg-white .input-radio:focus-visible + label.radio::before {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}

/* 9. Astérisque obligatoire */
.bg-white label.radio .required {
  color: #ef4444; /* text-red-500 */
  margin-left: 0.25rem;
  font-weight: bold;
  text-decoration: none;
}

.hero_section .content_wrapper {
  transform: translateY(-20%);
}
.hero_section a {
  width: -moz-fit-content;
  width: fit-content;
  margin: auto;
}
.hero_section .img-hero {
  height: 500px;
}
@media (max-width: 1800px) {
  .hero_section .img-hero {
    height: 450px;
  }
}
@media (max-width: 1700px) {
  .hero_section .img-hero {
    height: 400px;
  }
}
@media (max-width: 1500px) {
  .hero_section .img-hero {
    height: 300px;
  }
}
.hero_section #scroll-arrow {
  cursor: pointer;
}

.hero-background {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: radial-gradient(farthest-corner at 50% 0%, #174256 0%, #00152b 100%);
}

.light-rays {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  filter: blur(0.6rem);
}

.light-rays > li {
  position: absolute;
  transform-style: preserve-3d;
  perspective: 500px;
  mix-blend-mode: screen;
  animation: shimmer linear var(--duration) calc(var(--delay) * -1) infinite alternate forwards, rotate ease-in-out calc(var(--duration) * 3.14) calc(var(--delay) * -1) infinite alternate forwards;
}

.light-rays > li::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(to bottom, rgb(166, 255, 248), rgba(166, 255, 248, 0) 100%);
  transform-origin: top center;
  transform: rotateX(40deg);
}

.light-rays > li:nth-child(1) {
  --deg: 0.2;
  --thickness: 12px;
  --length: 20px;
  --duration: 2.1s;
  --delay: 2.5s;
  --rotate: -2deg;
}

.light-rays > li:nth-child(2) {
  --deg: 0.8;
  --thickness: 20px;
  --length: 80px;
  --duration: 1.5s;
  --delay: 3.2s;
  --rotate: 3deg;
}

.light-rays > li:nth-child(3) {
  --deg: 0.5;
  --thickness: 30px;
  --length: 50px;
  --duration: 2.3s;
  --delay: 2.9s;
  --rotate: -1deg;
}

.light-rays > li:nth-child(4) {
  --deg: 0.1;
  --thickness: 15px;
  --length: -10px;
  --duration: 1.8s;
  --delay: 3.5s;
  --rotate: 4deg;
}

.light-rays > li:nth-child(5) {
  --deg: 0.9;
  --thickness: 25px;
  --length: 40px;
  --duration: 2.6s;
  --delay: 2.1s;
  --rotate: -3deg;
}

.light-rays > li:nth-child(6) {
  --deg: 0.4;
  --thickness: 18px;
  --length: 70px;
  --duration: 1.9s;
  --delay: 3.8s;
  --rotate: 1deg;
}

.light-rays > li:nth-child(7) {
  --deg: 0.7;
  --thickness: 32px;
  --length: -20px;
  --duration: 2.2s;
  --delay: 2.4s;
  --rotate: -4deg;
}

.light-rays > li:nth-child(8) {
  --deg: 0.3;
  --thickness: 10px;
  --length: 60px;
  --duration: 2.4s;
  --delay: 3.1s;
  --rotate: 2deg;
}

.light-rays > li:nth-child(9) {
  --deg: 0.6;
  --thickness: 28px;
  --length: 10px;
  --duration: 1.7s;
  --delay: 2.7s;
  --rotate: -2deg;
}

.light-rays > li:nth-child(10) {
  --deg: 0.05;
  --thickness: 16px;
  --length: 90px;
  --duration: 2.5s;
  --delay: 3.3s;
  --rotate: 3deg;
}

.light-rays > li:nth-child(11) {
  --deg: 0.95;
  --thickness: 22px;
  --length: -40px;
  --duration: 2.1s;
  --delay: 2s;
  --rotate: -1deg;
}

.light-rays > li:nth-child(12) {
  --deg: 0.15;
  --thickness: 14px;
  --length: 30px;
  --duration: 1.6s;
  --delay: 3.6s;
  --rotate: 4deg;
}

.light-rays > li:nth-child(13) {
  --deg: 0.85;
  --thickness: 26px;
  --length: 50px;
  --duration: 2s;
  --delay: 2.8s;
  --rotate: -3deg;
}

.light-rays > li:nth-child(14) {
  --deg: 0.45;
  --thickness: 19px;
  --length: -30px;
  --duration: 2.3s;
  --delay: 2.5s;
  --rotate: 1deg;
}

.light-rays > li:nth-child(15) {
  --deg: 0.75;
  --thickness: 34px;
  --length: 70px;
  --duration: 2.4s;
  --delay: 3.9s;
  --rotate: -4deg;
}

.light-rays > li:nth-child(16) {
  --deg: 0.25;
  --thickness: 11px;
  --length: 10px;
  --duration: 1.8s;
  --delay: 2.2s;
  --rotate: 2deg;
}

.light-rays > li:nth-child(17) {
  --deg: 0.55;
  --thickness: 29px;
  --length: 80px;
  --duration: 1.9s;
  --delay: 3s;
  --rotate: -2deg;
}

.light-rays > li:nth-child(18) {
  --deg: 0.18;
  --thickness: 17px;
  --length: -5px;
  --duration: 2.6s;
  --delay: 3.4s;
  --rotate: 3deg;
}

.light-rays > li:nth-child(19) {
  --deg: 0.92;
  --thickness: 23px;
  --length: 95px;
  --duration: 2s;
  --delay: 2.3s;
  --rotate: -1deg;
}

.light-rays > li:nth-child(20) {
  --deg: 0.35;
  --thickness: 13px;
  --length: -25px;
  --duration: 1.5s;
  --delay: 3.7s;
  --rotate: 4deg;
}

.light-rays > li:nth-child(21) {
  --deg: 0.65;
  --thickness: 31px;
  --length: 45px;
  --duration: 2.2s;
  --delay: 2.6s;
  --rotate: -3deg;
}

.light-rays > li:nth-child(22) {
  --deg: 0.08;
  --thickness: 9px;
  --length: 55px;
  --duration: 2.5s;
  --delay: 3s;
  --rotate: 1deg;
}

.light-rays > li:nth-child(23) {
  --deg: 0.88;
  --thickness: 27px;
  --length: -15px;
  --duration: 2.3s;
  --delay: 2.8s;
  --rotate: -4deg;
}

.light-rays > li:nth-child(24) {
  --deg: 0.42;
  --thickness: 21px;
  --length: 75px;
  --duration: 1.7s;
  --delay: 3.2s;
  --rotate: 2deg;
}

.light-rays > li:nth-child(25) {
  --deg: 0.72;
  --thickness: 33px;
  --length: 5px;
  --duration: 2.4s;
  --delay: 2.9s;
  --rotate: -2deg;
}

.light-rays > li:nth-child(26) {
  --deg: 0.12;
  --thickness: 11px;
  --length: 85px;
  --duration: 2.1s;
  --delay: 3.5s;
  --rotate: 3deg;
}

.light-rays > li:nth-child(27) {
  --deg: 0.98;
  --thickness: 24px;
  --length: -50px;
  --duration: 1.9s;
  --delay: 2.4s;
  --rotate: -1deg;
}

.light-rays > li:nth-child(28) {
  --deg: 0.28;
  --thickness: 15px;
  --length: 40px;
  --duration: 2.6s;
  --delay: 3.8s;
  --rotate: 4deg;
}

.light-rays > li:nth-child(29) {
  --deg: 0.68;
  --thickness: 30px;
  --length: 60px;
  --duration: 2s;
  --delay: 2.1s;
  --rotate: -3deg;
}

.light-rays > li:nth-child(30) {
  --deg: 0.02;
  --thickness: 8px;
  --length: 100px;
  --duration: 1.5s;
  --delay: 3.3s;
  --rotate: 1deg;
}

.light-rays > li:nth-child(31) {
  --deg: 0.82;
  --thickness: 25px;
  --length: -10px;
  --duration: 2.2s;
  --delay: 2.7s;
  --rotate: -4deg;
}

.light-rays > li:nth-child(32) {
  --deg: 0.52;
  --thickness: 20px;
  --length: 35px;
  --duration: 2.4s;
  --delay: 3.6s;
  --rotate: 2deg;
}

.light-rays > li {
  width: var(--thickness);
  height: calc(20% + 370px + var(--length));
  left: 50%;
  transform: translateX(calc(-50% + var(--deg) * 40vw * -1 + 20vw)) translateY(-100px) rotateZ(calc(-36.25deg + var(--deg) * 72.5deg)) rotateX(0.01deg);
  transform-origin: center -100px;
}

@keyframes shimmer {
  0% {
    opacity: 0.33;
  }
  100% {
    opacity: 0.03;
  }
}
@keyframes rotate {
  0% {
    rotate: 0deg;
  }
  100% {
    rotate: var(--rotate);
  }
}
.dot {
  margin-top: 1rem;
  list-style: none;
  padding-left: 0;
  line-height: 1.9;
  font-size: 1.05rem;
  text-align: start;
  width: -moz-fit-content;
  width: fit-content;
}
.dot > li {
  list-style-type: circle;
}

/*TWO IMG */
.presence-images {
  position: relative;
  min-height: 715px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.presence-card {
  width: 520px;
  border: 5px solid #eef7fb;
  box-shadow: 0 10px 30px rgba(47, 82, 109, 0.45);
  background: var(--color-white);
  border-radius: 6px;
  overflow: hidden;
  position: absolute;
  transition: transform 0.3s ease, box-shadow 0.25s ease;
}
.presence-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 18px 45px rgba(0, 21, 43, 0.5);
}
.presence-card img {
  display: block;
  width: 100%;
  height: auto;
}
.presence-card.top {
  top: 0;
  left: 0;
  transform: rotate(-2deg);
  z-index: 3;
}
.presence-card.bottom {
  bottom: 0;
  left: 80px;
  transform: rotate(2.5deg);
  z-index: 2;
}

.presence-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* Responsive */
@media (max-width: 1000px) {
  .dot {
    margin-left: 20px !important;
  }
  .presence-images {
    position: static;
    display: block;
    min-height: 240px;
    margin-top: 1.5rem;
  }
  .presence-card {
    position: static;
    transform: none;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 5px 15px rgba(47, 82, 109, 0.3);
  }
  .presence-card.top {
    width: 220px;
  }
  .presence-card.bottom {
    width: 220px;
  }
}
.card {
  background-color: rgba(0, 21, 43, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(47, 82, 109, 0.2);
}

.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  line-height: 0;
  z-index: 2;
}

.wave-blue {
  background-color: var(--color-primary);
}

.wave-inverse .wave-inverse {
  transform: rotate(180deg);
}
.wave-inverse .wave-inverse path {
  fill: var(--color-white);
}

/* Styles pour Contact Form 7 */
.wpcf7-form-control-wrap {
  display: block;
  margin-top: 0.25rem;
}

.wpcf7-form .form-group {
  margin-top: 20px;
}

.wpcf7-form-control {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  border-radius: 0.375rem; /* rounded-md */
  padding: 0.75rem; /* p-3 */
  width: 100%;
  font-size: 1rem;
  line-height: 1.5;
}

.wpcf7-form-control:focus {
  outline: none;
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}

.wpcf7-form-control::-moz-placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.wpcf7-form-control::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.wpcf7-form br {
  display: none;
}

.wpcf7-submit {
  margin-top: 20px;
  background-color: transparent;
  border: 2px solid #38bdf8;
  color: #38bdf8;
  transition: all 0.3s ease;
  font-weight: 700;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 2rem;
  padding-right: 2rem;
  border-radius: 9999px; /* rounded-full */
  font-size: 1.125rem;
  line-height: 1.75rem;
  width: 100%;
  cursor: pointer;
}

.wpcf7-submit:hover {
  background-color: #38bdf8;
  color: #001f3f;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(56, 189, 248, 0.3);
}

.form-group label {
  display: block;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 0.25rem;
}

.masonry {
  -moz-column-count: 3;
       column-count: 3;
  -moz-column-gap: 20px;
       column-gap: 20px;
}

.masonry_item {
  display: none;
  margin: 20px auto;
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}
.masonry_item:first-child {
  margin-top: 0;
}
.masonry_item img {
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(47, 82, 109, 0.45);
  transition: all ease-in-out 500ms;
}
.masonry_item img:hover {
  transition: all ease-in-out 500ms;
  transform: scale(1.001);
  box-shadow: -1px 0px 20px 0px rgba(56, 189, 248, 0.45);
}

.masonry_section .btn_load {
  width: 100%;
}

@media (max-width: 1050px) {
  .masonry_section .container {
    margin: auto 20px;
  }
}
@media (max-width: 768px) {
  .masonry {
    -moz-column-count: 2;
         column-count: 2;
    -moz-column-gap: 20px;
         column-gap: 20px;
  }
}
@media (max-width: 560px) {
  .masonry_section .container {
    margin: auto 5px;
  }
  .masonry {
    -moz-column-count: 2;
         column-count: 2;
    -moz-column-gap: 5px;
         column-gap: 5px;
  }
  .masonry_item {
    margin: 5px auto;
  }
}
.overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 21, 43, 0.95);
}/*# sourceMappingURL=app.css.map */