.elementor-kit-11{--e-global-color-primary:#4D8DFF;--e-global-color-secondary:#FFFFFF;--e-global-color-text:#B6BDC9;--e-global-color-accent:#05070D;--e-global-typography-primary-font-family:"Sora";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Sora";--e-global-typography-secondary-font-weight:800;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-weight:300;background-color:#000000;color:#FFFFFF;font-family:"Inter", Sans-serif;font-size:1vw;font-weight:600;}.elementor-kit-11 button,.elementor-kit-11 input[type="button"],.elementor-kit-11 input[type="submit"],.elementor-kit-11 .elementor-button{background-color:#FFB347;font-family:"Sora", Sans-serif;font-size:16px;font-weight:700;letter-spacing:0.5px;color:#FFFFFF;border-radius:12px 12px 12px 12px;}.elementor-kit-11 button:hover,.elementor-kit-11 button:focus,.elementor-kit-11 input[type="button"]:hover,.elementor-kit-11 input[type="button"]:focus,.elementor-kit-11 input[type="submit"]:hover,.elementor-kit-11 input[type="submit"]:focus,.elementor-kit-11 .elementor-button:hover,.elementor-kit-11 .elementor-button:focus{background-color:#FFB347;color:#FFFFFF;}.elementor-kit-11 a{color:#FFFFFF;font-family:"Sora", Sans-serif;}.elementor-kit-11 h1{color:#FFFFFF;font-family:"Sora", Sans-serif;font-size:2vw;font-weight:900;text-transform:uppercase;}.elementor-kit-11 h2{color:#FFFFFF;font-family:"Sora", Sans-serif;font-size:1.8vw;font-weight:800;text-transform:uppercase;line-height:1em;}.elementor-kit-11 h3{color:#FFFFFF;font-family:"Sora", Sans-serif;font-size:1vw;font-weight:900;text-transform:uppercase;line-height:1.2em;letter-spacing:0px;}.elementor-kit-11 h4{color:#FFFFFF;font-family:"Sora", Sans-serif;font-size:24px;font-weight:600;}.elementor-kit-11 h5{text-transform:uppercase;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-11{font-size:10px;}.elementor-kit-11 h1{font-size:30px;}.elementor-kit-11 h2{font-size:25px;}.elementor-kit-11 h3{font-size:1vw;}.elementor-kit-11 h4{font-size:22px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-11{font-size:3vw;}.elementor-kit-11 h1{font-size:5vw;}.elementor-kit-11 h2{font-size:5vw;}.elementor-kit-11 h3{font-size:2.5vw;}.elementor-kit-11 h4{font-size:3vw;line-height:1.3em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ===== Article Midelson — style P2 (éditorial) · TEXTE SEUL ===== */
/* Le fond, la largeur et le centrage sont gérés par ton template.   */
/* Ce CSS n'habille QUE le contenu. Sora + Inter sont déjà chargées. */
/* À coller une fois dans le CSS perso du template (ou du site).     */
/* S'applique via la classe md-article sur le widget "Contenu".      */

.md-article{
  /* ---------- RÉGLAGES (seul endroit à modifier) ---------- */
  --md-gold:#FFCF6A;        /* doré principal (filet, liens) */
  --md-amber:#FFB347;       /* ambre (eyebrow, puces) */
  --md-gold-soft:#FFE9B0;   /* doré clair (sous-titres, emphase) */
  --md-title:#f3f4fa;       /* titres */
  --md-text:#c8ccd9;        /* corps */
  --md-dim:#9aa0b2;         /* texte secondaire (réponses FAQ) */
  /* ------------------------------------------------------- */
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--md-text);
  font-size:1.05rem;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

.md-article p{margin:0 0 1.2em;color:var(--md-text);}
.md-article a{color:var(--md-gold);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color .2s;}
.md-article a:hover{color:var(--md-gold-soft);}
.md-article strong{color:var(--md-gold-soft);font-weight:600;}

/* Intro */
.md-article .md-lead{font-size:1.18rem;line-height:1.7;color:var(--md-title);margin:0 0 1.5em;}

/* Signature P2 : eyebrow doré + filet sous le titre blanc */
.md-article .md-eyebrow{
  display:block;font-family:'Sora',sans-serif;font-weight:600;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--md-amber);margin:2em 0 .55em;
}
.md-article h2{
  font-family:'Sora',sans-serif;font-weight:700;
  font-size:clamp(1.4rem,3vw,1.75rem);line-height:1.2;
  color:var(--md-title);text-transform:uppercase;letter-spacing:.01em;
  margin:2em 0 .7em;position:relative;padding-bottom:.45em;
}
.md-article .md-eyebrow + h2{margin-top:0;}   /* titre collé à son eyebrow */
.md-article h2::after{
  content:"";position:absolute;left:0;bottom:0;width:90px;height:2px;
  background:linear-gradient(90deg,var(--md-gold),transparent);border-radius:2px;
}

.md-article h3{
  font-family:'Sora',sans-serif;font-weight:600;font-size:1.2rem;line-height:1.35;
  color:var(--md-gold-soft);margin:1.7em 0 .5em;
}

/* Listes */
.md-article ul{margin:0 0 1.3em;padding:0;list-style:none;}
.md-article li{position:relative;padding-left:1.5em;margin-bottom:.5em;line-height:1.6;}
.md-article li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--md-amber);}

/* Encadré */
.md-article .md-callout{
  background:rgba(255,179,71,.07);border:1px solid rgba(255,179,71,.18);
  border-left:3px solid var(--md-amber);border-radius:10px;
  padding:1.1em 1.3em;margin:1.7em 0;
}
.md-article .md-callout p:last-child{margin-bottom:0;}

/* FAQ — accordéon natif, ouverture exclusive */
.md-article .md-faq{margin-top:1.4em;}
.md-article .md-faq details{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.10);
  border-radius:12px;margin-bottom:.7em;overflow:hidden;transition:border-color .2s;
}
.md-article .md-faq details[open]{border-color:rgba(255,179,71,.35);}
.md-article .md-faq summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1em;
  font-family:'Sora',sans-serif;font-weight:600;font-size:1.04rem;color:var(--md-gold-soft);padding:1em 1.2em;
}
.md-article .md-faq summary::-webkit-details-marker{display:none;}
.md-article .md-faq summary::after{
  content:"";flex:0 0 auto;width:11px;height:11px;
  border-right:2px solid var(--md-gold);border-bottom:2px solid var(--md-gold);
  transform:rotate(45deg);transition:transform .25s;
}
.md-article .md-faq details[open] summary::after{transform:rotate(-135deg);}
.md-article .md-faq details>div{padding:0 1.2em 1.1em;color:var(--md-dim);}
.md-article .md-faq details>div p{margin:0;color:var(--md-dim);}

@media (prefers-reduced-motion:reduce){
  .md-article a,.md-article .md-faq details,.md-article .md-faq summary::after{transition:none;}
}


/* Liens centrés et aérés sur toute la largeur */
.elementor-nav-menu__container.elementor-nav-menu--dropdown .elementor-item {
  text-align: center !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: all 0.2s ease !important;
}
.elementor-nav-menu__container.elementor-nav-menu--dropdown .elementor-item:hover,
.elementor-nav-menu__container.elementor-nav-menu--dropdown .elementor-item-active {
  color: #FFCF6A !important;
  background: rgba(255, 179, 71, 0.10) !important;
}

/* Force l'affichage du déroulant quand il est ouvert sur desktop */
.elementor-nav-menu__container.elementor-nav-menu--dropdown.md-open {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-height: 80vh !important;
  overflow: auto !important;
  pointer-events: auto !important;
}



/* =================================================================
   MOBILE — CARTES TRANSPARENTES ET SANS FLOU POUR VOIR LE DÉCOR NET
   (le texte reste lisible grâce à l'ombre portée)
   ================================================================= */
@media (max-width: 767px) {
  .process-card {
    background: rgba(0, 0, 0, 0.05) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .process-card .elementor-heading-title,
  .process-card p,
  .process-card .step-label {
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9), 0 0 14px rgba(0, 0, 0, 0.7);
  }
}

/* =================================================================
   SOCLE DES SECTIONS PLEIN ÉCRAN
   ================================================================= */
.elementor .scroll-section.e-con {
  min-height: 100vh !important;
  min-height: 100dvh !important;
  box-sizing: border-box !important;
  padding-top: 8vh !important;
  padding-bottom: 16vh !important;
}
@media (max-width: 767px) {
  .elementor .scroll-section.e-con {
    padding-top: 5vh !important;
    padding-left: 2vw !important;
    padding-right: 2vw !important;
  }
}

/* =================================================================
   EMPÊCHE LE SCROLL HORIZONTAL INDÉSIRABLE
   ================================================================= */
html, body {
  overflow-x: clip;
}

/* =================================================================
   DÉSACTIVE LE SCROLL FLUIDE NATIF (géré par le script de navigation)
   ================================================================= */
html { scroll-behavior: auto !important; }

/* =================================================================
   CARTE HUD SPATIALE (verre dépoli teinté noir)
   ================================================================= */
.process-card {
  position: relative;
  isolation: isolate;
  padding: 5%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  border: none !important;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  box-shadow:
    0 0 12px rgba(255, 179, 71, 0.18),
    0 0 32px rgba(255, 179, 71, 0.14),
    inset 0 0 18px rgba(255, 179, 71, 0.08);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, calc(100% - 26px) 100%, 26px 100%, 0 calc(100% - 26px));
}

/* COINS LUMINEUX CYAN DE LA CARTE HUD */
.process-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 209, 140, 0.95), rgba(255, 209, 140, 0.95)),
    linear-gradient(rgba(255, 209, 140, 0.95), rgba(255, 209, 140, 0.95)),
    linear-gradient(rgba(255, 209, 140, 0.95), rgba(255, 209, 140, 0.95)),
    linear-gradient(rgba(255, 209, 140, 0.95), rgba(255, 209, 140, 0.95));
  background-position: 0 0, 0 0, 100% 100%, 100% 100%;
  background-size: 190px 1px, 1px 90px, 190px 1px, 1px 90px;
  background-repeat: no-repeat;
  filter:
    drop-shadow(0 0 10px rgba(255, 179, 71, 1))
    drop-shadow(0 0 10px rgba(255, 179, 71, 0.75))
    drop-shadow(0 0 10px rgba(255, 179, 71, 0.45));
}

/* CONTENU AU-DESSUS DES EFFETS DE LA CARTE */
.process-card > * {
  position: relative;
  z-index: 2;
}

/* =================================================================
   CARROUSEL ÉTAPES — N'AFFICHE QU'UNE CARTE À LA FOIS
   ================================================================= */
.process-carousel-wrap { position: relative; }
.process-card { display: none; }
.process-card.process-card-active { display: flex; }

/* =================================================================
   LABEL D'ÉTAPE DANS LA CARTE
   ================================================================= */
.process-card .step-label {
  display: block;
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}

/* =================================================================
   PASTILLES NUMÉROTÉES DES ÉTAPES
   ================================================================= */
.step-dot {
  position: relative;
  z-index: 2;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #ffffff;
  font-size: 16px;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.25),
    inset 0 0 10px rgba(255, 255, 255, 0.08);
  transition: all 0.25s ease;
}

/* PASTILLE ACTIVE (orange + halo) */
.step-dot.active {
  scale: 1.18;
  background: #FFB347;
  border: none;
  color: #ffffff;
  box-shadow:
    0 0 14px rgba(255, 179, 71, 0.85),
    0 0 34px rgba(255, 179, 71, 0.65),
    0 0 70px rgba(255, 179, 71, 0.35);
}

/* PASTILLE INACTIVE AU SURVOL */
.step-dot:not(.active):hover {
  background: rgba(255, 255, 255, 0.22);
  box-shadow:
    0 0 14px rgba(255, 255, 255, 0.35),
    inset 0 0 12px rgba(255, 255, 255, 0.12);
}

/* =================================================================
   BOUTONS — TEXTE SEUL OR + GLOW PULSÉ
   S'applique à TOUS les boutons Elementor.
   ================================================================= */
.elementor-button {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: 2px solid #FFCF6A !important; /* Contour ajouté */
  border-radius: 0 !important;
  padding: 0.6em 1.2em !important; /* Un peu plus d'espace horizontal */
  font-weight: 700 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent !important;
  color: #FFCF6A !important;
  box-shadow: none !important;
  text-shadow: 0 0 6px rgba(255, 160, 50, 0.5);
  animation: textGlow 2.4s ease-in-out infinite;
  transition: filter 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* SURVOL : éclat renforcé */
.elementor-button:hover {
  filter: brightness(1.12);
  border-color: #FFD98A;
  box-shadow: 0 0 12px rgba(255, 170, 50, 0.35);
}

/* ANIMATION DU GLOW PULSÉ DU TEXTE */
@keyframes textGlow {
  0%, 100% {
    text-shadow: 0 0 6px rgba(255, 160, 50, 0.5);
  }
  50% {
    text-shadow:
      0 0 14px rgba(255, 170, 50, 0.95),
      0 0 28px rgba(255, 170, 50, 0.5);
  }
}

/* =================================================================
   FLÈCHES DU CARROUSEL DE SERVICES (gris + contour + halo)
   ================================================================= */
.custom-carousel-arrows .elementor-swiper-button,
.custom-carousel-arrows .swiper-button-prev,
.custom-carousel-arrows .swiper-button-next {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.75) !important;
  color: #ffffff !important;
  box-shadow:
    0 0 12px rgba(255, 255, 255, 0.35),
    inset 0 0 10px rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: breathEffect 2s ease-in-out infinite !important;
  will-change: scale;
}

/* ICÔNE À L'INTÉRIEUR DES FLÈCHES DU CARROUSEL */
.custom-carousel-arrows .elementor-swiper-button i,
.custom-carousel-arrows .elementor-swiper-button svg {
  color: #ffffff !important;
  fill: #ffffff !important;
  font-size: 22px !important;
}

/* =================================================================
   FLÈCHES « PRÉCÉDENT / SUIVANT » DE LA SECTION ÉTAPES (gris)
   Réinitialise tout style hérité du bouton texte.
   ================================================================= */
.process-prev,
.process-next,
.process-prev a,
.process-next a,
.process-prev .elementor-button,
.process-next .elementor-button {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(180, 180, 180, 0.22) !important;
  border: 1px solid rgba(255, 255, 255, 0.65) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  box-shadow:
    0 0 12px rgba(255, 255, 255, 0.35),
    inset 0 0 12px rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  padding: 0 !important;
  animation: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}

/* FLÈCHES PRÉCÉDENT / SUIVANT AU SURVOL */
.process-prev:hover,
.process-next:hover,
.process-prev a:hover,
.process-next a:hover {
  background: rgba(220, 220, 220, 0.34) !important;
  border-color: rgba(255, 255, 255, 0.9) !important;
  box-shadow:
    0 0 22px rgba(255, 255, 255, 0.65),
    inset 0 0 16px rgba(255, 255, 255, 0.18) !important;
  scale: 1.12;
}

/* =================================================================
   FLÈCHE « SUIVANT » DU CARROUSEL ÉTAPES (cercle blanc + chevron)
   ================================================================= */
.process-next {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.75) !important;
  font-size: 0 !important;
  box-shadow:
    0 0 12px rgba(255, 255, 255, 0.35),
    inset 0 0 10px rgba(255, 255, 255, 0.08) !important;
  animation: processArrowBreath 1.8s ease-in-out infinite !important;
  transition: opacity 0.25s ease;
}

/* CHEVRON CENTRÉ DE LA FLÈCHE SUIVANT */
.process-next::before {
  content: "›";
  display: block;
  translate: 0 -2px;
  font-size: 30px !important;
  line-height: 1 !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
}

/* =================================================================
   NAVIGATION ENTRE SECTIONS — 2 BOUTONS FIXES CONTEXTUELS
   ================================================================= */
.section-nav {
  position: fixed;
  left: 50%;
  bottom: 28px;
  translate: -50% 0;
  z-index: 9999;
  display: flex;
  gap: 16px;
}

.nav-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 0 12px rgba(255, 255, 255, 0.35),
    inset 0 0 10px rgba(255, 255, 255, 0.08);
  animation: arrowPulse 1.8s ease-in-out infinite;
  transition: opacity 0.25s ease;
}
.nav-btn:hover { opacity: 0.85; }

.nav-btn::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: #ffffff;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}

/* CROIX (inactive, section 1) */
.nav-cross { cursor: default; }
.nav-cross::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18.3 5.7 12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18.3 5.7 12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z'/%3E%3C/svg%3E");
}

/* CHEVRON BAS */
.nav-down::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 17.4 2.6 8 5.4 5.2 12 11.8l6.6-6.6L21.4 8z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 17.4 2.6 8 5.4 5.2 12 11.8l6.6-6.6L21.4 8z'/%3E%3C/svg%3E");
}

/* CHEVRON HAUT */
.nav-up::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 6.6 21.4 16l-2.8 2.8L12 12.2l-6.6 6.6L2.6 16z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 6.6 21.4 16l-2.8 2.8L12 12.2l-6.6 6.6L2.6 16z'/%3E%3C/svg%3E");
}

/* DOUBLE CHEVRON HAUT */
.nav-top::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3 21.4 12.4l-2.8 2.8L12 8.6l-6.6 6.6L2.6 12.4zm0 7.8 9.4 9.4-2.8 2.8L12 16.4l-6.6 6.6L2.6 20.2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3 21.4 12.4l-2.8 2.8L12 8.6l-6.6 6.6L2.6 12.4zm0 7.8 9.4 9.4-2.8 2.8L12 16.4l-6.6 6.6L2.6 20.2z'/%3E%3C/svg%3E");
}

/* VERSION RÉDUITE SUR MOBILE */
@media (max-width: 767px) {
  .section-nav { bottom: 18px; gap: 12px; }
  .nav-btn { width: 42px; height: 42px; }
  .nav-btn::before { width: 18px; height: 18px; }
}

/* =================================================================
   ANIMATION : RESPIRATION D'UN OBJET
   ================================================================= */
.breathing {
  animation: breathing 3s ease-in-out infinite;
  transform-origin: center;
}
@keyframes breathing {
  0%   { scale: 1; }
  50%  { scale: 1.04; }
  100% { scale: 1; }
}

/* =================================================================
   ANIMATION : OBJET FLOTTANT
   ================================================================= */
.floating-object {
  animation: floatingObject 4s ease-in-out infinite;
  will-change: translate;
}
@keyframes floatingObject {
  0%   { translate: 0 0; }
  50%  { translate: 0 -18px; }
  100% { translate: 0 0; }
}

/* =================================================================
   ANIMATION : RESPIRATION DES FLÈCHES DU CARROUSEL
   ================================================================= */
@keyframes breathEffect {
  0%   { scale: 1; }
  50%  { scale: 1.06; }
  100% { scale: 1; }
}

/* =================================================================
   ANIMATION : RESPIRATION DE LA FLÈCHE SUIVANT DU CARROUSEL ÉTAPES
   ================================================================= */
@keyframes processArrowBreath {
  0% {
    scale: 1;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.25), inset 0 0 10px rgba(255, 255, 255, 0.08);
  }
  50% {
    scale: 1.16;
    box-shadow: 0 0 24px rgba(255, 255, 255, 0.75), inset 0 0 14px rgba(255, 255, 255, 0.14);
  }
  100% {
    scale: 1;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.25), inset 0 0 10px rgba(255, 255, 255, 0.08);
  }
}

/* =================================================================
   ANIMATION : PULSATION DES BOUTONS DE NAVIGATION
   ================================================================= */
@keyframes arrowPulse {
  0% {
    scale: 1;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.25), inset 0 0 10px rgba(255, 255, 255, 0.08);
  }
  50% {
    scale: 1.18;
    box-shadow: 0 0 24px rgba(255, 255, 255, 0.75), inset 0 0 14px rgba(255, 255, 255, 0.14);
  }
  100% {
    scale: 1;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.25), inset 0 0 10px rgba(255, 255, 255, 0.08);
  }
}/* End custom CSS */