/* Custom CSS - Divi Child */


/* =========================================================================================
 * BOUTONS
 * ========================================================================================= */

/* ---------------------------------------------------------
* Style des boutons
* --------------------------------------------------------- */

.et_pb_button.btn,
.btn,
.et_pb_button.btn:hover,
.btn:hover {
  padding: 14px 28px !important;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  letter-spacing: 2px;
  text-transform: uppercase;
}

@media (max-width:980px) {

  .et_pb_button.btn,
  .btn,
  .et_pb_button.btn:hover,
  .btn:hover {
    width: 100% !important;
    max-width: 320px;
  }
}

/* Bouton outline secondary Gold */
.btn-outline-gold {
  border: 1px solid var(--primary);
  color: var(--darkcolor);
}

.btn-outline-gold:hover {
  border: 1px solid var(--primary);
  background-color: var(--primary);
  color: var(--lightcolor);
}

/* Bouton outline secondary white */
.btn-outline-white {
  border: 1px solid var(--lightcolor);
  color: var(--lightcolor);
}

.btn-outline-white:hover {
  border: 1px solid var(--lightcolor);
  background-color: var(--lightcolor);
  color: var(--darkcolor);
}

/* Bouton primary */
.btn-solid {
  background-color: var(--primary);
  color: var(--lightcolor);
}

.btn-solid:hover {
  background-color: var(--darkprimary);
  color: var(--lightcolor);
}


/* ---------------------------------------------------------
* Boutons alignés en desktop
* --------------------------------------------------------- */

/* Boutons alignés et centrés */
.buttons-wrapper {
  display: flex;
  justify-content: center;
  gap: 20px;
}

/* Boutons alignés et et ferrés à droite */
.buttons-wrapper.right-align {
  justify-content: right;
}

/* Boutons alignés et ferrés à gauche */

.buttons-wrapper.left-align {
  justify-content: left;
}

/* Mobile : les boutons l’un sous l’autre */
@media (max-width: 767px) {
  .buttons-wrapper {
    flex-direction: column;
    align-items: center;
  }
}

/* ---------------------------------------------------------
* Boutons des formulaires en tablette
* --------------------------------------------------------- */

/* Boutons contact & gift card : même rendu partout */
@media (max-width: 980px){
  .contact-form form.et_pb_contact_form .et_contact_bottom_container,
  .gift-card-form form.et_pb_contact_form .et_contact_bottom_container{
    display:flex !important;
    justify-content:center !important;
    width:100%;
  }

  .contact-form form.et_pb_contact_form button.et_pb_contact_submit,
  .gift-card-form form.et_pb_contact_form button.et_pb_contact_submit{
    width: 100% !important;
    max-width: 320px;
    margin: 0 auto !important;
  }
}

@media (max-width: 767px){
  .contact-form form.et_pb_contact_form button.et_pb_contact_submit,
  .gift-card-form form.et_pb_contact_form button.et_pb_contact_submit{
    max-width:none;
    width:100% !important;
    display:block !important;
  }
}


/* =========================================================================================
 * END BOUTONS
 * ========================================================================================= */

/* =========================================================================================
 * HOMEPAGE
 * ========================================================================================= */

.photo-about-home {
  position: relative;
  display: inline-block;
  z-index: 1;
  width: 80%;
  max-width: 80%;
}

.photo-about-home::before {
  content: "";
  position: absolute;
  top: -40px;
  left: -40px;
  /* décalage de la plaque */
  width: 300px;
  height: 400px;
  /* taille de la plaque (à adapter) */
  background: var(--primary);
  /* ta couleur */
  z-index: 0;
  border-radius: 0;
}

@media (max-width:980px) {
  .photo-about-home {
    display: block;
    width: 60%;
    max-width: 60%;
    margin-left: auto !important;
  }

  .photo-about-home::before {
    top: -20px;
    left: -20px;
    width: 350px;
    height: 400px;
  }
}


@media (max-width:767px) {
  .photo-about-home::before {
    top: -15px;
    left: -15px;
    width: 180px;
    height: 200px;
  }
}

/* ---------------------------------------------------------
* Section Dernière séance (.lastshooting)
* --------------------------------------------------------- */

/* Desktop : 3 colonnes en Flex */
.gallery-section .et_pb_column:nth-of-type(2) {
  display: flex;
  /* conteneur flex */
  gap: 16px;
  /* espace entre images */
  align-items: center;
}

/* Supprime les marges internes des modules Image qui décalent visuellement */
.gallery-section .et_pb_column:nth-of-type(2) .et_pb_image {
  margin: 0 !important;
  /* Divi met souvent margin-bottom */
  display: block;
}


.gallery-section .et_pb_column:nth-of-type(2) .et_pb_image img {
  display: block;
  width: 100%;
  height: 360px;
  object-fit: cover;
}

/* Tablette & Mobile : piste swipe horizontale */
@media (max-width:980px) {
  .gallery-section .et_pb_column:nth-of-type(2) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 6px 25px 16px;
  }

  .gallery-section .et_pb_column:nth-of-type(2) .et_pb_module {
    flex: 0 0 55%;
    /* largeur d’un “slide” */
    scroll-snap-align: center;
  }

  .gallery-section .et_pb_column:nth-of-type(2) .et_pb_image img {
    height: 500px;
  }
}

@media (max-width:767px) {
  .lastshooting .collastshooting {
    margin-bottom: 15px;
  }

  .gallery-section .et_pb_column:nth-of-type(2) {
    padding: 6px 15px 16px;
  }

  .gallery-section .et_pb_column:nth-of-type(2) .et_pb_module {
    flex: 0 0 55%;
  }

  .gallery-section .et_pb_column:nth-of-type(2) .et_pb_image img {
    height: 300px;
  }
}

/* Masquer la scrollbar */
@media (max-width:980px) {
  .gallery-section .et_pb_column:nth-of-type(2)::-webkit-scrollbar {
    display: none;
  }

  .gallery-section .et_pb_column:nth-of-type(2) {
    scrollbar-width: none;
  }
}


/* ---------------------------------------------------------
* Section Avis clients (.testimonials)
* --------------------------------------------------------- */

/* Style du contenu de la carte */
.tst-slider .tst-stars {
  color: var(--primary);
  letter-spacing: .25em;
  text-align: right;
  font-size: 18px;
  text-shadow: none;
}

.tst-slider .tst-text {
  font-size: 18px;
  line-height: 1.7;
  color: var(--darkcolor);
  text-shadow: none;
  margin-top: 1.8em;
}

.tst-slider .tst-divider {
  width: 80px;
  height: 1px;
  background: var(--darkcolor);
  margin: 22px auto;
  text-shadow: none;
}

.tst-slider .tst-author {
  color: var(--primary);
  font-size: 20px;
  font-family: "Source Sans Pro", Georgia, serif;
  text-shadow: none;
  padding-bottom: 20px;
}


/*** espacements autour de la carte ***/
.testimonials .et_pb_slide_description,
.et_pb_slider_fullwidth_off .et_pb_slide_description {
  padding-top: 5%;
  padding-bottom: 5%;

}

/* Carte = conteneur flex vertical pour que le texte prenne la place dispo */
.tst-slider .tst-card {
  display: flex;
  flex-direction: column;
  height: 320px;
  overflow: hidden;
  /* important pour la troncature visuelle */
}

/* Breakpoints */
@media (max-width:980px) {
  .tst-slider .tst-card {
    height: 350px;
  }

  .tst-slider .tst-text {
    font-size: 16px;
    line-height: 1.4;
  }

  .tst-slider .tst-author {
    padding-bottom: 30px;
  }
}

@media (max-width:767px) {
  .tst-slider .tst-card {
    height: 400px;
    text-align: left;
  }

  .tst-slider .tst-text {
    line-height: 1.3;
  }

  .tst-slider .tst-author {
    padding-bottom: 50px;
    text-align: center;
  }
}

/* Zone texte = prend la place dispo, troncature multilignes + petit fondu */
.tst-slider .tst-text {
  flex: 1 1 auto;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  /* ajuste # de lignes visibles desktop */
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(#000 85%, transparent);
}

@media (max-width:980px) {
  .tst-slider .tst-text {
    -webkit-line-clamp: 7;
  }
}

@media (max-width:767px) {
  .tst-slider .tst-text {
    -webkit-line-clamp: 8;
  }
}

/* Bouton “…” (affiché seulement si nécessaire via JS) */
.tst-slider .tst-more {
  border: 0;
  background: transparent;
  color: var(--primary);
  font: inherit;
  cursor: pointer;
  padding: 0;
  margin-top: 8px;
  line-height: 1;
  align-self: center;
  display: none;
}

/* quand c'est déplié, on laisse la carte grandir et on enlève le masquage */
.tst-slider .tst-card.is-expanded {
  height: auto;
  overflow: visible;
}

.tst-slider .tst-card.is-expanded .tst-text {
  -webkit-line-clamp: unset;
  mask-image: none;
}

/* ---------------------------------------------------------
* Section Contact (.contact)
* --------------------------------------------------------- */

.contact-left {
  padding: 0px 30px;
  display: flex;
  /* transforme la colonne en conteneur flex */
  flex-direction: column;
  justify-content: center;
  /* centre verticalement */
  min-height: 100%;
}

/* Sur mobile, on revient en alignement normal (au besoin) */
@media (max-width:980px) {
  .contact-left {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .swap-mobile {
    display: flex;
    flex-direction: column-reverse;
  }
}

.contact-right .et_pb_module {
  margin: 0 !important;
}

/* Carte blanche autour du formulaire */
.contact-right .et_pb_contact_form_container {
  background: var(--lightcolor);
  padding: 30px 30px;
  /*box-shadow: 0 20px 60px -10px rgba(0,0,0,.18);*/
}

/* Carte téléphone */
.phone-card {
  padding: 30px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0 28px;
}

.phone-card h4 {
  padding-bottom: 0px;
  font-family: "Source Sans Pro", Arial, sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  color: var(--darkcolor);
}

.phone-card .et_pb_main_blurb_image {
  vertical-align: middle;
}

/* Info complémentaires */
.info h4,
.info p,
.info .info-desc {
  color: var(--lightcolor) !important;
  line-height: normal;
  padding-bottom: 1%;
}

/* Desktop : 2 colonnes */
.info {
  display: inline-block;
  /* permet de se mettre côte à côte */
  width: calc(50% - 14px);
  /* deux colonnes avec un petit gap */
  vertical-align: top;
  margin-right: 14px;
}

.info:last-of-type {
  margin-right: 0;
}

/* pas de marge sur le 2e */

/* Mobile / tablette : empilé et centré */
@media (max-width:980px) {
  .info {
    display: block;
    width: 100%;
    margin-right: 0;
    margin-top: 16px;
    text-align: center;
  }
}

/* Formulaire */
.gift-card-form .et_pb_contact_field input,
.gift-card-form .et_pb_contact_field select,
.contact-form .et_pb_contact_field input,
.contact-form .et_pb_contact_field select {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--primary);
  border-radius: 0;
  padding: 10px 4px;
  color: var(--darkcolor);
  font-size: 16px;
}

.gift-card-form .et_pb_contact_field textarea,
.contact-form .et_pb_contact_field textarea {
  background: transparent;
  border: 1px solid var(--primary);
  border-radius: 0;
  padding: 10px 4px;
  color: var(--darkcolor);
  font-size: 16px;
}

/* Afficher les titres au dessus des champs */
.et_pb_contact_form_label {
  display: block;
  font-weight: 600;
  margin-bottom: 10px;
}

.gift-card-form input::placeholder,
.gift-card-form textarea::placeholder,
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #9aa1a6;
  opacity: 1;
}

/* Centrer le bouton du formulaire en mobile 
@media (max-width:980px) {
  .contact .et_contact_bottom_container {
    float: none;
  }

  .contact-right .et_pb_contact_form_0.et_pb_contact_form_container.et_pb_module .et_pb_button {
    width: 100% !important;
    max-width: 320px
  }
}*/

/* ===== Success message (Divi contact form) ===== */
.contact-form .et-pb-contact-message,
.gift-card-form .et-pb-contact-message {
  margin: 0;
  padding: 0;
}

/* Divi met le texte dans .et_pb_contact_message p */
.contact-form .et-pb-contact-message p,
.gift-card-form .et-pb-contact-message p {
  margin: 0 !important;
  padding: 18px 18px !important;
  background: #e6f7ee;
  border-radius: 10px;
  text-align: center !important;
  color: #1e8449;
  font-weight: 600;
  line-height: 1.4;
}

/* Quand Divi affiche un message success, on centre visuellement dans le container */
.contact-form.et_pb_contact_form_container,
.gift-card-form.et_pb_contact_form_container {
  position: relative;
}

/* le message devient une "carte" centrée */
.contact-form .et-pb-contact-message,
.gift-card-form .et-pb-contact-message {
  display: none;
  /* par défaut Divi le laisse vide */
}

/* Divi ajoute généralement la classe .et_pb_contact_form_container ou écrit un <p> */
.contact-form .et-pb-contact-message:has(p),
.gift-card-form .et-pb-contact-message:has(p) {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 500px;
  /* ajuste selon ton design */
  width: 100%;
}

/* ===== Gestion des messages d'erreur ===== */

/* Cache le message global Divi UNIQUEMENT quand il y a des erreurs */
.contact-form:has(.et_contact_error) .et-pb-contact-message,
.contact-form:has(.sg-has-error) .et-pb-contact-message,
.gift-card-form:has(.et_contact_error) .et-pb-contact-message,
.gift-card-form:has(.sg-has-error) .et-pb-contact-message{
  display:none !important;
}




.sg-has-error input,
.sg-has-error select,
.sg-has-error textarea{
  border-color: #d64545 !important;
  box-shadow: none !important;
}

.sg-field-error{
  margin-top: 8px;
  color: #d64545;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 600;
}

/* Optionnel : petit espacement */
.sg-has-error{
  margin-bottom: 12px;
}

/* Compteur de caractères sous textarea (champ Message) */
.contact-form .sg-char-counter, .gift-card-form .sg-char-counter{
  margin-top: 6px;
  font-size: 14px;
  opacity: 1;
  text-align: right;
}

.contact-form .sg-char-counter.is-max, .gift-card-form .sg-char-counter.is-max{
  opacity: 1;
  font-weight: 600;
  color:#d64545 !important;
}



/* ---------------------------------------------------------
* Section Instagram
* --------------------------------------------------------- */

/* Pour que le feed insta touche presque le footer */
.insta-collapse #sb_instagram #sbi_images {
  padding-bottom: 0px;
}

/* =========================================================================================
 * END HOMEPAGE
 * ========================================================================================= */

/* =========================================================================================
 * PAGE GALLERIE - MARIAGE - FAMILLE - PROS
 * ========================================================================================= */

/* ---------------------------------------------------------
* FAQ
* --------------------------------------------------------- */

.et_pb_accordion .et_pb_toggle_title {
  position: relative;
  padding-right: 40px;
}

.et_pb_accordion .et_pb_toggle_title::after {
  content: "\35";
  /* chevron droite Divi */
  font-family: 'ETmodules' !important;
  font-size: 42px;
  font-weight: 400 !important;
  color: #E5C288;

  position: absolute;
  right: 0;
  top: 50%;

  transform: translateY(-50%) rotate(0deg);
  transform-origin: center;
  transition: transform 350ms cubic-bezier(.4, 0, .2, 1);
}

.et_pb_accordion .et_pb_toggle.is-fully-open .et_pb_toggle_title::after {
  transform: translateY(-50%) rotate(-90deg);
}

/* ---------------------------------------------------------
* Module Instagram 
* --------------------------------------------------------- */

.ig-follow-line {
  height: 1px;
  background: var(--primary);
  width: 100%;
}



/* ---------------------------------------------------------
* Module Prix 
* --------------------------------------------------------- */

.prices-module .check-list ul {
  list-style: none;
  padding-left: 0;
}

.prices-module .check-list ul li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 10px;
}

.prices-module .check-list ul li::before {
  content: "\4e";
  font-family: 'ETmodules';
  position: absolute;
  left: 0;
  top: 2px;
  color: var(--primary);
  font-size: 18px;
}

/* Conteneur global */
.prices-module .options-list .et_pb_code_inner>div {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 24px;
  align-items: start;
  margin-bottom: 14px;
}

/* Texte à gauche */
.prices-module .options-list .option-label {
  display: block;
}

/* Prix à droite */
.prices-module .options-list .option-price {
  text-align: right;
  white-space: nowrap;
  font-weight: 600;
}

@media (max-width: 767px) {
  .prices-module .options-list .et_pb_code_inner>div {
    grid-template-columns: 1fr;
  }

  .prices-module .options-list .option-price {
    text-align: center;
    margin-top: 4px;
  }

  .prices-module .options-list .option-label {
    text-align: center;
  }

}


/********* .badge-discount ****/
/* Conteneur du badge */
.badge-discount .et_pb_code_inner {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Le badge rond */
.badge-discount .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--primary);
  color: var(--lightcolor);
  font-weight: 600;
  font-size: 20px;
  flex-shrink: 0;
}

/* Texte descriptif */
.badge-discount .discount-desc {
  font-size: 15px;
  line-height: 1.4;
  color: var(--darkcolor);
}


/* =========================================================================================
 * END PAGE GALLERIE - MARIAGE - FAMILLE - PROS
 * ========================================================================================= */

/* =========================================================================================
 * PAGE À PROPOS
 * ========================================================================================= */


/* Image + fond doré derrière */
.photo-frame {
  position: relative;
  display: inline-block;
}

.photo-frame:before {
  content: "";
  position: absolute;
  z-index: -1;
  background: var(--primary);

  /* taille du bloc doré */
  width: 92%;
  height: 92%;

  /* décalage */
  right: -28px;
  bottom: -28px;

}

/* si Divi met l'image en block, on garde un rendu propre */
.photo-frame img {
  display: block;
}

@media (max-width:980px) {
  .photo-frame {
    width: 50%;
  }

  .photo-frame:before {
    width: 100%;
    height: 100%;
  }

  .align-center {
    text-align: center;
  }

}

@media (max-width:767px) {
  .photo-frame {
    width: 70%;
  }

  .photo-frame:before {
    right: -14px;
    bottom: -14px;

  }
}

/* =========================================================================================
 * END PAGE À PROPOS
 * ========================================================================================= */

/* =========================================================================================
 * PAGE TARIFS & CARTE CADEAU
 * ========================================================================================= */



/* Tablet : les boutons de l'intro l’un sous l’autre */
@media (max-width: 980px) {
  .header-pricing-page .buttons-wrapper {
    flex-direction: column;
    align-items: center;
  }
}

/* ---------------------------------------------------------
* Formulaire carte cadeau 
* --------------------------------------------------------- */

/* Supprime le 2e titre (doublon) généré par Divi dans les boutons radios */
.gift-card-form .et_pb_contact_field_options_title {
  display: none !important;
}

/* Masque l'option placeholder dans le select (Chrome/Edge) */
.gift-card-form select#et_pb_contact_shooting-type_0 option[value=""] {
  display: none;
}



/* 2) Layout: radios alignées */
.gift-card-form .et_pb_contact_field_options_list {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.gift-card-form .et_pb_contact_field_radio {
  position: relative;
  flex: 1 1 140px;
  max-width: 110px;
}

/* 3) Cache le radio natif */
.gift-card-form .et_pb_contact_field_radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* 4) La carte cliquable */
.gift-card-form .et_pb_contact_field_radio label {
  display: block;
  border: 1px solid #9AA3AF;
  padding: 0px;
  cursor: pointer;
  background: #fff;
  transition: box-shadow .12s ease, border-color .12s ease, transform .12s ease;
}

/* 5) Masque le texte "Visuel 1/2/3..." */
.gift-card-form .et_pb_contact_field_radio label {
  font-size: 0 !important;
  line-height: 0 !important;
}

/* 6) Utilise le <i> de Divi comme vignette image */
.gift-card-form .et_pb_contact_field_radio label i {
  display: block !important;
  width: 100%;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  margin: 0 !important;
}

.gift-card-form .et_pb_contact p input[type=checkbox]+label i,
.gift-card-form .et_pb_contact p input[type=radio]+label i {
  height: 60px;
}

/* Supprime les styles "rond radio" que Divi peut injecter via pseudo-éléments */
.gift-card-form .et_pb_contact_field_radio label i:before,
.gift-card-form .et_pb_contact_field_radio label i:after {
  display: none !important;
  content: none !important;
}

/* 7) Hover / Selected */
.gift-card-form .et_pb_contact_field_radio label:hover {
  /*transform: translateY(-1px);*/
  /*box-shadow: 0 6px 10px rgba(0,0,0,.08);*/
  border: 4px solid var(--primary);
}

.gift-card-form .et_pb_contact_field_radio input[type="radio"]:checked+label {
  border: 4px solid var(--primary);
  background-color: var(--primary);
}

.gift-card-form .et_pb_contact p input[type=radio]+label i {
  border-radius: 0;
  width: 100%;
}

/* 8) Associer chaque radio à une image*/
.gift-card-form input[name="et_pb_contact_card-picture-pregnancy_0"][value="Grossesse 1"]+label i {
  background-image: url("../../../../uploads/gift-card-grossesse-1.jpg");
}

.gift-card-form input[name="et_pb_contact_card-picture-pregnancy_0"][value="Grossesse 2"]+label i {
  background-image: url("../../../../uploads/gift-card-grossesse-2.jpg");
}

.gift-card-form input[name="et_pb_contact_card-picture-birth_0"][value="Naissance 1"]+label i {
  background-image: url("../../../../uploads/gift-card-naissance-1.jpg");
}

.gift-card-form input[name="et_pb_contact_card-picture-birth_0"][value="Naissance 2"]+label i {
  background-image: url("../../../../uploads/gift-card-naissance-2.jpg");
}

.gift-card-form input[name="et_pb_contact_card-picture-pregnancy-birth_0"][value="Naissance-Grossesse 1"]+label i {
  background-image: url("../../../../uploads/gift-card-grossesse-naissance-1.jpg");
}

.gift-card-form input[name="et_pb_contact_card-picture-pregnancy-birth_0"][value="Naissance-Grossesse 2"]+label i {
  background-image: url("../../../../uploads/gift-card-grossesse-naissance-2.jpg");
}

.gift-card-form input[name="et_pb_contact_card-picture-family_0"][value="Famille 1"]+label i {
  background-image: url("../../../../uploads/gift-card-famille-1.jpg");
}

.gift-card-form input[name="et_pb_contact_card-picture-family_0"][value="Famille 2"]+label i {
  background-image: url("../../../../uploads/gift-card-famille-2.jpg");
}

.gift-card-form input[name="et_pb_contact_card-picture-couple_0"][value="Couple 1"]+label i {
  background-image: url("../../../../uploads/gift-card-couple-1.jpg");
}

.gift-card-form input[name="et_pb_contact_card-picture-couple_0"][value="Couple 2"]+label i {
  background-image: url("../../../../uploads/gift-card-couple-2.jpg");
}




/* =========================================================================================
 * END PAGE TARIFS & CARTE CADEAU
 * ========================================================================================= */