/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

.elementor-widget-shortcode .af-merci,
.af-merci {
  max-width: 860px;
  margin: 3rem auto 5rem;
  padding: 4.5rem 2rem;
  text-align: center;
  color: #fff;
  border: 7px solid transparent;
  border-radius: 24px;
  background:
    linear-gradient(#4E181F, #4E181F) padding-box,
    linear-gradient(180deg, #F6A723, #F4A426, #EC9A2E, #E08A3C, #CE7350, #BA5966, #7C3C43) border-box;
}


.df-alert {
  background-color: #442125;
}


.df-trainee-item-title {
  color: white;
}

.af-merci__kicker {
  margin: 0 auto 0.75rem;
  max-width: 28rem;
  color: #F6A723;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

.af-merci__title {
  margin: 0 auto 1.25rem;
  max-width: 16em;
  color: #fff;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
}

.af-merci__text {
  margin: 0 auto;
  max-width: 36rem;
  color: #fff;
  font-size: 1.125rem;
  line-height: 1.5;
}

.af-merci__btn {
  display: inline-block;
  margin-top: 1.75rem;
  padding: 0.85rem 1.75rem;
  border-radius: 999px;
  background: #F6A723;
  color: #4E181F;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
}

.af-merci__btn:hover,
.af-merci__btn:focus {
  background: #F4A426;
  color: #4E181F;
}

body {
  --header-height: 111px;
}

/*
 * Header toujours au-dessus des décors (Pattern .bg-image en margin
 * négatif). Elementor ne pose z-index: 99 que pendant le sticky : au
 * unstick le décor peut passer devant. On isole aussi le document de
 * page pour que les .bg-image en position:absolute restent dessous,
 * y compris hors de la home.
 */
.elementor-location-header {
  position: relative;
  z-index: 100;
}

.elementor:not(.elementor-location-header):not(.elementor-location-footer) {
  position: relative;
  z-index: 0;
}

/*
 * Icônes kicker : le dégradé vit dans le SVG (fill="url(#paint…)").
 * Elementor pose fill: primary sur tous les icon-list et écrase
 * le dégradé. On ne lève ça que pour les SVG qui ont un gradient.
 */
body .elementor-element.elementor-widget-icon-list .elementor-icon-list-icon svg:has(linearGradient),
body .elementor-element.elementor-widget-icon .elementor-icon svg:has(linearGradient) {
  fill: unset;
}



.df-applicant--organization.df-field--search {
  background-color: transparent;
  padding: 0px !important;
}

.border-gradient {
  border: 7px solid transparent;
  border-radius: 20px;
  background:
    linear-gradient(#4E181F, #4E181F) padding-box,
    linear-gradient(180deg, #F6A723, #F4A426, #EC9A2E, #E08A3C, #CE7350, #BA5966, #7C3C43) border-box;
}

.border-gradient-2 {
  border: 7px solid transparent;
  border-radius: 20px;
  background:
    linear-gradient(#4E181F, #4E181F) padding-box,
    linear-gradient(0deg, #F6A723, #F4A426, #EC9A2E, #E08A3C, #CE7350, #BA5966, #7C3C43) border-box;
}

.image-article img {
  display: block;
  width: 100%;
  height: 440px;
  object-fit: cover;
  border-radius: 30px;
  box-shadow: 2px 2px 0 0 #470507;

  /* bordure dégradée 7px : technique double-fond */
  border: 7px solid transparent;
  background:
    linear-gradient(#5A232A, #5A232A) padding-box,
    linear-gradient(90deg, #F6A723, #F2A128, #E59136, #D1774C, #BA5966) border-box;
}

.border-gradient-white {
  position: relative;
  border-radius: 20px;
  background: #FFFFFF;
}

.border-gradient-white::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 4px;
  background: linear-gradient(180deg, #F6A723, #F4A426, #EC9A2E, #E08A3C, #CE7350, #BA5966, #7C3C43);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}

.border-gradient-2 {
  border: 5px solid transparent;
  border-radius: 20px;
  background:
    linear-gradient(transparent, transparent) padding-box,
    linear-gradient(180deg, #F6A723, #F4A426, #EC9A2E, #E08A3C, #CE7350, #BA5966, #7C3C43) border-box;
}


.carrousel-timeline .swiper-slide {
  opacity: 0.35;
  transition: opacity 0.3s ease;
}

.carrousel-timeline .swiper-slide-active,
.carrousel-timeline .swiper-slide-next {
  opacity: 1;
}


/* ── Spotlight Alors ── */

.af-spotlight {
    position: relative;
    border-radius: 24px;
    border: 1px solid rgba(210, 114, 126, 0.2);   /* liseré rose discret au repos */
    background: linear-gradient(180deg, #350C11, #4E1A20);
    overflow: hidden;
    transition: border-color 0.4s ease;
}

.af-spotlight::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.4s ease;
    background: radial-gradient(
        350px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(210, 114, 126, 0.15),
        transparent 60%
    );
    pointer-events: none;
    z-index: 1;
}

.af-spotlight:hover {
    border-color: #BB5A66;   /* contour rose à l'illumination */
}
.af-spotlight:hover::before {
    opacity: 1;
}

.af-spotlight > * {
    position: relative;
    z-index: 2;
}

/* ── Contour dégradé image article (arrondi 30px) ── */

.af-image-contour {
    position: relative;
    border-radius: 30px;
    width: 100%;           /* pleine largeur de la div parente */
}

.af-image-contour img {
    display: block;
    width: 100%;
    height: 420px;         /* hauteur fixe */
    object-fit: cover;     /* remplit en rognant, sans déformer */
    object-position: center;
    border-radius: 30px;
}

.af-image-contour::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 6px;
    border-radius: 30px;
    background: linear-gradient(135deg, #F6A723, #F4A426, #EC9A2E, #E08A3C, #CE7350, #BA5966, #7C3C43);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    z-index: 10;
}

/* Mobile : hauteur réduite */
@media (max-width: 768px) {
    .af-image-contour img {
        height: 240px;
    }
}


/* ============================================================
   FLATPICKR — thème Alors Formation (bordeaux + or)
   ============================================================ */

/* Le calendrier : fond bordeaux, bordure or */
.flatpickr-calendar {
  background: #350C11 !important;
  border: 1px solid rgba(247,168,35,.35) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.4) !important;
}

/* petite flèche du popup */
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after {
  border-bottom-color: #350C11 !important;
}
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after {
  border-top-color: #350C11 !important;
}

/* En-tête (mois + année) */
.flatpickr-months,
.flatpickr-month {
  background: transparent !important;
  color: #F7A823 !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  color: #F7A823 !important;
  font-weight: 700 !important;
}
/* options du menu mois */
.flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background: #350C11 !important;
  color: #F9F5F1 !important;
}

/* Flèches précédent/suivant */
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  fill: #F7A823 !important;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: #FFC65C !important;
}

/* Jours de la semaine (Sun, Mon...) */
.flatpickr-weekday {
  color: #D2727E !important;   /* rose kicker */
  font-weight: 600 !important;
}

/* Les jours */
.flatpickr-day {
  color: #F9F5F1 !important;
  border-radius: 8px !important;
}
.flatpickr-day:hover {
  background: rgba(247,168,35,.15) !important;
  border-color: transparent !important;
}
/* jours hors du mois courant (grisés) */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: rgba(249,245,241,.35) !important;
}
/* aujourd'hui */
.flatpickr-day.today {
  border-color: #F7A823 !important;
}
.flatpickr-day.today:hover {
  background: #F7A823 !important;
  color: #350C11 !important;
}
/* jour sélectionné */
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: #F7A823 !important;
  border-color: #F7A823 !important;
  color: #350C11 !important;
}

/* Fil d'Ariane du formulaire : seule la page en cours est dorée. */
.dfb-single .dfb-single__breadcrumb--form .df-breadcrumbs a,
.dfb-single .dfb-single__breadcrumb--form .df-breadcrumbs a:last-of-type {
  color: var(--dfb-pink, #bb5a66);
}

.dfb-single .dfb-single__breadcrumb--form .df-breadcrumbs > :last-child {
  color: var(--dfb-gold, #f7a824);
}