/*
  Theme Name: marie-charlotte
  Theme URI: https://www.marie-charlotte.be/
  Version: 1.0.0
  Template: Divi
  Author: designer@arpeggio.be
  Author URI: https://www.arpeggio.be/fr
  Description: designed with flow by Arpeggio
  Text Domain: marie-charlotte
  License: GNU General Public License v2 or later
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/



/* ==============================================================
   1. PHOTO CORNER
   ============================================================== */

.photo-corner::before,
.photo-corner::after {
  content: '';
  position: absolute;
  width: 150px;
  height: 150px;
  background-color: var(--corner-color, #FFF);
  -webkit-mask-image: url("/wp-content/uploads/2026/07/corner.svg");
  mask-image: url("/wp-content/uploads/2026/07/corner.svg");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
  z-index: 10 !important;
}

.photo-corner::before {
  top: -50px;
  left: -50px;
}

.photo-corner::after {
  bottom: -50px;
  right: -50px;
  transform: rotate(180deg);
}

.photo-corner--cream {
  --corner-color: #f6f4f1;
}

/* ---- Déclinaison crème #f6f4f1 (version normale inchangée) ---- */
.photo-corner--cream::before,
.photo-corner--cream::after {
  width: 100px;
  height: 100px;
  background-color: #f6f4f1;
}

/* Crème dans un carrousel Swiper : coins un peu moins débordants */
.dipi_carousel_child.photo-corner--cream::before {
  top: -30px;
  left: -30px;
}

.dipi_carousel_child.photo-corner--cream::after {
  bottom: -30px;
  right: -30px;
}

/* Carrousel : la carte et son wrapper interne coupent ce qui déborde
   -> on autorise le débordement + on garde les coins bien au-dessus */
.dipi_carousel_child.photo-corner--cream,
.dipi_carousel_child.photo-corner--cream .dipi-carousel-child-wrapper {
  overflow: visible !important;
}

.dipi_carousel_child.photo-corner--cream::before,
.dipi_carousel_child.photo-corner--cream::after {
  z-index: 20 !important;
}
/* ==============================================================
   2. CARD SLIDER — Structure & ratios responsive
   ============================================================== */

/* Desktop : ratio Instagram 1080x1350 */
.card-slider .dipi-blog-post {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1080 / 1350;
}

/* Tablette */
@media (max-width: 980px) {
  .card-slider .dipi-blog-post {
    aspect-ratio: 4 / 5; /* ajuste selon le rendu souhaité */
  }
}

/* Mobile */
@media (max-width: 767px) {
  .card-slider .dipi-blog-post {
    aspect-ratio: 3 / 4; /* carte plus courte sur petit écran */
  }
}

.card-slider .dipi-entry-featured-image-url {
  position: absolute;
  inset: 0;
  margin: 0;
}

.card-slider .wp-post-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s ease;
}


/* ==============================================================
   3. CARD SLIDER — Overlay & contenu texte
   ============================================================== */

/* Dégradé noir en overlay, du bas vers le haut */
.card-slider .dipi-blog-post-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(0, 0, 0, 0.45) 35%,
    rgba(0, 0, 0, 0) 70%
  );
  transition: background-color 1.1s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 1.1s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

/* Contenu texte positionné en bas, centré */
.card-slider .dipi-post-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 30px 25px 35px;
  text-align: center;
  color: #fff;
}

.card-slider .dipi-entry-title {
  font-family: inherit;
  font-size: 26px;
  font-weight: 400;
  color: #fff;
  margin: 0 0 12px;
}

.card-slider .dipi-post-text {
  font-size: 15px;
  line-height: 1.5;
  color: #f2f2f2;
}

.card-slider .dipi-post-text p {
  margin: 0;
}


/* ==============================================================
   4. CARD SLIDER — Effets hover
   ============================================================== */

/* Dégradé devient #92554A au survol */
.card-slider .dipi-blog-post:hover .dipi-blog-post-overlay {
  background: linear-gradient(
    to top,
    rgba(146, 85, 74, 1) 0%,
    rgba(146, 85, 74, 0.85) 35%,
    rgba(146, 85, 74, 0) 50%
  );
}

/* Léger zoom image au survol */
.card-slider .dipi-blog-post:hover .wp-post-image {
  transform: scale(1.04);
}


/* ==============================================================
   5. CARD SLIDER — Variantes
   ============================================================== */

/* Variante Hommes : #878C81 au hover */
.card-slider--men .dipi-blog-post:hover .dipi-blog-post-overlay {
  background: linear-gradient(
    to top,
    rgba(135, 140, 129, 1) 0%,
    rgba(135, 140, 129, 0.85) 35%,
    rgba(135, 140, 129, 0) 50%
  );
}


/* ==============================================================
   6. SWIPER — Pagination & navigation
   ============================================================== */

/* Pagination bullets : toujours 100% opacité et taille */
.swiper-pagination-bullet,
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active,
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main,
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev,
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev,
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next,
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  opacity: 1 !important;
  transform: scale(1) !important;
}

/* Conteneur de la pagination : aligner le bloc à droite */
.card-slider .swiper-pagination {
  right: 0 !important;
  left: auto !important;
}

/* Boutons next/prev : style universel pour tous les sliders */
.swiper-button-next,
.swiper-button-prev {
  border-radius: 4px;
  box-shadow: 0px 0 10px rgb(0 0 0 / 0.2);
}


/* ==============================================================
   8. FILTERABLE GRID — Cards carrées, texte en overlay, sans dégradé
   ============================================================== */

.grid-square-item .img-container {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 4px;
}

.grid-square-item .img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.grid-square-item .img-container:hover img {
  transform: scale(1.04);
}

/* Dégradé noir #1c1c1c, visible par défaut */
.grid-square-item .dipi_filterable_grid_overlay.background {
  position: absolute;
  inset: 0;
  z-index: 1 !important;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(28, 28, 28, 0.95) 0%,
    rgba(28, 28, 28, 0.45) 35%,
    rgba(28, 28, 28, 0) 70%
  ) !important;
}

/* Dégradé brun #92554A, fondu en entrée au hover */
.grid-square-item .dipi_filterable_grid_overlay.background-hover {
  position: absolute;
  inset: 0;
  z-index: 1 !important;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(
    to top,
    rgba(146, 85, 74, 1) 0%,
    rgba(146, 85, 74, 0.55) 35%,
    rgba(146, 85, 74, 0) 50%
  ) !important;
}

.grid-square-item .img-container:hover .dipi_filterable_grid_overlay.background-hover {
  opacity: 1 !important;
}

.grid-square-item .dipi-grid-item-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3 !important;
  padding: 20px 15px 25px;
  text-align: center;
  color: #fff;
}

.grid-square-item .dipi-grid-item-title {
  font-family: inherit;
  font-size: 22px;
  font-weight: 400;
  color: #fff;
  margin: 0 0 8px;
}

.grid-square-item .dipi-grid-item-excerpt {
  font-size: 15px;
  line-height: 1.5;
  color: #f2f2f2;
}

/* Variante Hommes : #878C81 au hover */
.grid-square-item--men .dipi_filterable_grid_overlay.background-hover {
  background: linear-gradient(
    to top,
    rgba(135, 140, 129, 1) 0%,
    rgba(135, 140, 129, 0.55) 35%,
    rgba(135, 140, 129, 0) 50%
  ) !important;
}

/* ==============================================================
   9. IMAGES RATIO — utilitaire générique (Blurb/Image/Blog)
   ============================================================== */

/* Images - comportement de base */
.ratio-fit .et_pb_main_blurb_image img,
.ratio-fit .et_pb_blurb_image img,
.ratio-fit .et_pb_image_wrap > img,
.ratio-fit .et_pb_post .entry-featured-image-url img {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Ratios d'image */
.ratio-16-9 .et_pb_main_blurb_image img,
.ratio-16-9 .et_pb_blurb_image img,
.ratio-16-9 .et_pb_image_wrap > img,
.ratio-16-9 .et_pb_post .entry-featured-image-url img,
.ratio-4-3 .et_pb_main_blurb_image img,
.ratio-4-3 .et_pb_blurb_image img,
.ratio-4-3 .et_pb_image_wrap > img,
.ratio-4-3 .et_pb_post .entry-featured-image-url img,
.ratio-3-2 .et_pb_main_blurb_image img,
.ratio-3-2 .et_pb_blurb_image img,
.ratio-3-2 .et_pb_image_wrap > img,
.ratio-3-2 .et_pb_post .entry-featured-image-url img,
.ratio-1-1 .et_pb_main_blurb_image img,
.ratio-1-1 .et_pb_blurb_image img,
.ratio-1-1 .et_pb_image_wrap > img,
.ratio-1-1 .et_pb_post .entry-featured-image-url img,
.ratio-3-4 .et_pb_main_blurb_image img,
.ratio-3-4 .et_pb_blurb_image img,
.ratio-3-4 .et_pb_image_wrap > img,
.ratio-3-4 .et_pb_post .entry-featured-image-url img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ratio-16-9 .et_pb_main_blurb_image,
.ratio-16-9 .et_pb_blurb_image,
.ratio-16-9 .et_pb_image_wrap,
.ratio-16-9 .et_pb_post .entry-featured-image-url { aspect-ratio: 16 / 9; }

.ratio-4-3 .et_pb_main_blurb_image,
.ratio-4-3 .et_pb_blurb_image,
.ratio-4-3 .et_pb_image_wrap,
.ratio-4-3 .et_pb_post .entry-featured-image-url { aspect-ratio: 4 / 3; }

.ratio-3-2 .et_pb_main_blurb_image,
.ratio-3-2 .et_pb_blurb_image,
.ratio-3-2 .et_pb_image_wrap,
.ratio-3-2 .et_pb_post .entry-featured-image-url { aspect-ratio: 3 / 2; }

.ratio-1-1 .et_pb_main_blurb_image,
.ratio-1-1 .et_pb_blurb_image,
.ratio-1-1 .et_pb_image_wrap,
.ratio-1-1 .et_pb_post .entry-featured-image-url { aspect-ratio: 1 / 1; }

.ratio-3-4 .et_pb_main_blurb_image,
.ratio-3-4 .et_pb_blurb_image,
.ratio-3-4 .et_pb_image_wrap,
.ratio-3-4 .et_pb_post .entry-featured-image-url { aspect-ratio: 3 / 4; }

/* Zoom-in image au hover (cadre reste fixe + overflow hidden) */
.ratio-fit.et_clickable .et_pb_main_blurb_image img,
.ratio-fit.et_clickable .et_pb_image_wrap img,
.ratio-fit .et_pb_post .entry-featured-image-url:hover img {
  transform: scale(1);
  transition: transform 1s ease;
  will-change: transform;
}

.ratio-fit.et_clickable:hover .et_pb_main_blurb_image img,
.ratio-fit.et_clickable:hover .et_pb_image_wrap img,
.ratio-fit .et_pb_post .entry-featured-image-url:hover img {
  transform: scale(1.06);
}

/* Ratios responsive (BEM) : modificateurs dédiés, ne réutilisent pas les classes ratio-X-X classiques */
@media (max-width: 980px) {
  .ratio-1-1--mobile-4-3 .et_pb_main_blurb_image,
  .ratio-1-1--mobile-4-3 .et_pb_blurb_image,
  .ratio-1-1--mobile-4-3 .et_pb_image_wrap,
  .ratio-1-1--mobile-4-3 .et_pb_post .entry-featured-image-url {
    aspect-ratio: 4 / 3;
  }

  .ratio-1-1--mobile-3-2 .et_pb_main_blurb_image,
  .ratio-1-1--mobile-3-2 .et_pb_blurb_image,
  .ratio-1-1--mobile-3-2 .et_pb_image_wrap,
  .ratio-1-1--mobile-3-2 .et_pb_post .entry-featured-image-url {
    aspect-ratio: 3 / 2;
  }
}

/* ==============================================================
   10. MENU
   ============================================================== */
.et-menu .menu-item-has-children>a:first-child:after {
	color: #d8af8f !important;
}

@media (min-width: 980px) {
    .dipi-dropdown-arrow .nav li:not(.mega-menu) ul.sub-menu:after {
        border-bottom: 10px solid #000 !important;
        border-bottom-color: #000 !important;
        transform: translateY(100%);
        opacity: 0;
        transition: all 0.1s;
    }
}

/* Le "Fixed Footer" de Divi Pixel pose overflow-y:hidden en style inline sur
   #page-container pour coller le footer en bas des pages courtes. Sur les
   pages dont le contenu est plus court que l'écran, ça rogne le menu
   déroulant "Robes de mariée" (8 styles) dès qu'il dépasse cette hauteur
   réduite — seule une page avec assez de contenu pour dépasser la hauteur
   de l'écran y échappait. On autorise le débordement vertical sans toucher
   à la hauteur calculée, donc sans casser l'effet de footer collé.
   !important nécessaire : le style inline de Divi Pixel a sinon priorité. */
#page-container {
    overflow-y: visible !important;
}
/* ==============================================================
   11. H1 hidden
   ============================================================== */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* ==============================================================
   12. HEADER — Colonnes hero "Pour elle" / "Pour lui"
   ============================================================== */

.header-hero-col {
  position: relative;
  overflow: hidden;
}

/* Dégradé noir, visible par défaut, soutient texte + bouton */
.header-hero-col::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(28, 28, 28, 0.95) 0%,
    rgba(28, 28, 28, 0.45) 35%,
    rgba(28, 28, 28, 0) 70%
  );
}

/* Dégradé brun-pourpre #92554A, fondu en entrée au survol — 300ms, aligné sur le bouton */
.header-hero-col::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: linear-gradient(
    to top,
    rgba(146, 85, 74, 1) 0%,
    rgba(146, 85, 74, 0.55) 35%,
    rgba(146, 85, 74, 0) 50%
  );
}

.header-hero-col:hover::after {
  opacity: 1;
}

/* Texte + bouton toujours au-dessus du dégradé */
.header-hero-col .et_pb_text,
.header-hero-col .et_pb_button_module_wrapper {
  position: relative;
  z-index: 2;
}

.header-hero-col .et_pb_text h2 {
  color: #fff;
}

/* Icône du bouton : même vitesse que le reste */
.header-hero-col .et_pb_button_module_wrapper .et_pb_button::after {
  transition: opacity 0.3s ease;
}

/* Le bouton adopte SON PROPRE style hover (couleur, texte, icône) dès que
   la colonne est survolée. Préfixe ajouté pour dépasser la spécificité
   (ID) du CSS généré par Divi, sinon le texte reste blanc. */
body #page-container .et_pb_section .header-hero-col:hover .et_pb_button_module_wrapper .et_pb_button {
  background-color: #d8af8f !important;
  border-color: #d8af8f !important;
  color: #1f1e1c !important;
  padding-right: 2em !important;
  padding-left: 1em !important;
}

body #page-container .et_pb_section .header-hero-col:hover .et_pb_button_module_wrapper .et_pb_button::after {
  opacity: 1 !important;
}

/* Variante Hommes : dégradé #878C81 */
.header-hero-col--men::after {
  background: linear-gradient(
    to top,
    rgba(135, 140, 129, 1) 0%,
    rgba(135, 140, 129, 0.55) 35%,
    rgba(135, 140, 129, 0) 50%
  );
}

/* ==============================================================
   13. HORAIRES — Tableau jours/heures
   ============================================================== */

.opening-hours {
  border-collapse: collapse;
  color: #fff;
}

.opening-hours th,
.opening-hours td {
  padding: 2px 0;
  font-weight: 400;
  text-align: left;
  color: #fff;
}

.opening-hours th {
  padding-right: 40px;
}

.opening-hours__sep {
  color: #d8af8f;
  margin: 0px;
}
/* ==============================================================
   14. Carrousel services
   ============================================================== */
.dipi_carousel .swiper-container .dipi_carousel_child {
    display: flex;
    justify-content: center !important;

}

/* Variante sombre : #1f1e1c au hover */
.card-slider--dark .dipi-blog-post:hover .dipi-blog-post-overlay {
  background: linear-gradient(
    to top,
    rgba(31, 30, 28, 1) 0%,
    rgba(31, 30, 28, 0.85) 35%,
    rgba(31, 30, 28, 0) 50%
  );
}

/* ==============================================================
   13. SOCIAL FOLLOW — Icône Instagram + trait diagonal ocre
   ============================================================== */

.insta-follow li.et_pb_social_media_follow_network {
  position: relative;
  width: 48px;
  height: 48px;
}

.insta-follow li.et_pb_social_media_follow_network a.icon {
  width: 48px;
  height: 48px;
  line-height: 48px;
}

body .insta-follow li.et_pb_social_media_follow_network a.icon::before {
  font-size: 46px;
  line-height: 48px;
  color: #1f1e1c;
}

/* Trait diagonal ocre à droite de l'icône */
.insta-follow li.et_pb_social_media_follow_network::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -22px;
  width: 1px;
  height: 90px;
  background-color: #d8af8f;
  transform: translateY(-50%) rotate(22deg);
}

/* Masque le bouton "Suivre" */
.insta-follow .follow_button {
  display: none;
}