.elementor-kit-112{--e-global-color-primary:#F2F4F3;--e-global-color-secondary:#121212;--e-global-color-text:#121212;--e-global-color-accent:#BEEF9E;--e-global-color-c20add7:#9D8DF1;--e-global-color-1c59f8a:#F2F4F3;--e-global-color-09f1632:#BCED09;--e-global-color-5738c36:#DE541E;--e-global-color-224ccf4:#FFA839;--e-global-color-9baace4:#121212;--e-global-color-cd72714:#D5D5D5;--e-global-color-5a60bb3:#AAE684;--e-global-color-0c8b11f:#FFFFFF;--e-global-typography-primary-font-family:"Avenir";--e-global-typography-primary-font-size:30px;--e-global-typography-primary-font-weight:300;--e-global-typography-primary-text-transform:uppercase;--e-global-typography-primary-line-height:30px;--e-global-typography-secondary-font-family:"Righteous";--e-global-typography-secondary-font-size:120px;--e-global-typography-secondary-font-weight:400;--e-global-typography-secondary-text-transform:uppercase;--e-global-typography-secondary-line-height:180px;--e-global-typography-text-font-family:"Avenir";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:23px;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;--e-global-typography-b7b4a96-font-family:"Pridi";--e-global-typography-b7b4a96-font-size:25px;--e-global-typography-b7b4a96-font-weight:400;--e-global-typography-b7b4a96-line-height:30px;--e-global-typography-870abb3-font-family:"Avenir";--e-global-typography-870abb3-font-size:15px;--e-global-typography-047e441-font-family:"Pridi";--e-global-typography-047e441-font-size:20px;--e-global-typography-047e441-font-weight:400;--e-global-typography-047e441-text-transform:uppercase;--e-global-typography-047e441-font-style:normal;--e-global-typography-047e441-line-height:30px;--e-global-typography-3156eb9-font-family:"Avenir";--e-global-typography-3156eb9-font-size:50px;--e-global-typography-3156eb9-font-weight:500;--e-global-typography-3156eb9-text-transform:lowercase;--e-global-typography-3156eb9-line-height:75px;--e-global-typography-1e85fbb-font-family:"Righteous";--e-global-typography-1e85fbb-font-size:120px;--e-global-typography-1e85fbb-font-weight:400;--e-global-typography-1e85fbb-line-height:180px;--e-global-typography-49278d5-font-family:"Avenir";--e-global-typography-49278d5-font-size:20px;--e-global-typography-49278d5-font-weight:700;--e-global-typography-49278d5-text-transform:uppercase;--e-global-typography-49278d5-line-height:23px;--e-global-typography-4751357-font-family:"Avenir";--e-global-typography-4751357-font-size:50px;--e-global-typography-4751357-font-weight:700;--e-global-typography-4751357-line-height:75px;--e-global-typography-32ed0ce-font-family:"Avenir";--e-global-typography-32ed0ce-font-size:16px;--e-global-typography-32ed0ce-font-weight:400;--e-global-typography-32ed0ce-line-height:23px;--e-global-typography-905d336-font-family:"Avenir";--e-global-typography-905d336-font-size:20px;--e-global-typography-905d336-font-weight:bold;--e-global-typography-905d336-text-transform:none;--e-global-typography-905d336-line-height:30px;--e-global-typography-7f44cea-font-family:"Avenir";--e-global-typography-7f44cea-font-size:20px;--e-global-typography-7f44cea-font-weight:bold;--e-global-typography-7f44cea-text-transform:none;--e-global-typography-7f44cea-line-height:30px;--e-global-typography-a4ab91c-font-family:"Avenir";--e-global-typography-a4ab91c-font-size:20px;--e-global-typography-a4ab91c-font-weight:bold;--e-global-typography-a4ab91c-text-transform:none;--e-global-typography-a4ab91c-line-height:30px;background-color:#02010100;}.elementor-kit-112 h1{font-family:"Righteous", thème;font-size:16px;font-weight:100;line-height:23px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:100%;}.e-con{--container-max-width:100%;}.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);}.elementor-kit-112 e-page-transition{background-color:#FFBC7D;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* menu */

.contour {
    -webkit-text-stroke: 
0.5px #fff;
}
.elementor-sticky--effects {
background-color:rgba(242,244,243,0.3) !important;
}


/* CTA survol */

.mon-bouton .elementor-button {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
}

.mon-bouton .elementor-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #BEEF9E;
  border-radius: inherit;
  clip-path: inset(0 100% 0 0 round 30px); /* caché à droite au départ */
  transition: clip-path .4s ease;
  z-index: 0;
}

.mon-bouton .elementor-button:hover::before {
  clip-path: inset(0 0 0 0 round 30px); /* se dévoile vers la droite */
}

.mon-bouton .elementor-button-text,
.mon-bouton .elementor-button-icon {
  position: relative;
  z-index: 1;
}

.mon-bouton:hover .elementor-button-icon {
  color: white;
  transition: color .5s ease;
}




/* marge image projet */
.marge-image {
    left:50vh;
    max-width:50%;
}

/* menu accordéon */

[13:55, 22/09/2025] Urielus: /* ================== GOUTTIÈRES (texte décollé des bords) ================== */
.acc-hover{ --acc-gutter: clamp(16px, 4vw, 48px); }

/* Titres + contenus : padding interne, mais lignes restent full width */
.acc-hover .e-n-accordion-item-title{
  padding-left: var(--acc-gutter) !important;
  padding-right: var(--acc-gutter) !important;
}
.acc-hover .e-n-accordion-item > *:not(.e-n-accordion-item-title){
  padding-left: var(--acc-gutter);
  padding-right: var(--acc-gutter);
}

/* ================== STRUCTURE + ANIM GRID ================== */
.acc-hover .e-n-accordion-item{border-bottom:1px solid #E6E6E6}
.acc-hover .e-n-accordion-item:last-child{border-bottom:0}
.acc-hover .e-n-accordion-item-title{margin:0;display:block}

/* FERMÉ (data-closed présent) */
.acc-hover .e-n-accordion-item[data-closed] > *:not(.e-n-accordion-item-title){
  display:grid !important;
  grid-template-rows:0fr;
  opacity:0;
  padding-top:0; padding-bottom:0;
  transition:
    grid-template-rows .34s cubic-bezier(.22,.61,.36,1),
    opacity .24s ease,
    padding .24s ease;
}
.acc-hover .e-n-accordion-item > *:not(.e-n-accordion-item-title) > *{
  overflow:hidden; min-height:0; /* requis pour 0fr */
}

/* OUVERT (data-closed retiré) */
.acc-hover .e-n-accordion-item:not([data-closed]) > *:not(.e-n-accordion-item-title){
  display:grid !important;
  grid-template-rows:1fr;
  opacity:1;
  padding-top:8px; padding-bottom:12px;
  transition:
    grid-template-rows .52s cubic-bezier(.22,.61,.36,1),
    opacity .28s ease,
    padding .28s ease;
}

/* ================== COULEURS (demandées) ================== */
/* Repos : bande transparente, texte hérite (modifiable ici si besoin) */
.acc-hover .e-n-accordion-item-title{
  background: transparent !important;
  color: inherit !important;        /* mets #111 si tu veux forcer */
}

/* Hover + Ouvert : bande blanche, texte noir */
.acc-hover .e-n-accordion-item:hover > .e-n-accordion-item-title,
.acc-hover .e-n-accordion-item:not([data-closed]) > .e-n-accordion-item-title{
  color: #BCED09 !important;
}

/* La bordure reste gris clair, même quand ouvert */
.acc-hover .e-n-accordion-item:not([data-closed]){border-bottom-color:#E6E6E6}

/* Icône +/− si présente */
.acc-hover .elementor-accordion-icon{display:none}

/* Indice visuel desktop : pas de main “cliquable” */
@media (hover:hover) and (pointer:fine){
  .acc-hover .e-n-accordion-item-title{ cursor: default !important; }
}

/* ================== FALLBACK (accordéon classique ailleurs) ================== */
.acc-hover .elementor-accordion-item{border-bottom:1px solid #E6E6E6}
.acc-hover .elementor-accordion-item:last-child{border-bottom:0}
.acc-hover .elementor-tab-title{padding-left:var(--acc-gutter);padding-right:var(--acc-gutter);margin:0}
.acc-hover .elementor-accordion-item.elementor-active > .elementor-tab-title,
.acc-hover .elementor-accordion-item:hover > .elementor-tab-title{
  background:#FFFFFF !important; color:#000000 !important;
}
.acc-hover .elementor-tab-content{padding-left:var(--acc-gutter);padding-right:var(--acc-gutter)}
[13:56, 22/09/2025] Urielus: /* Couleurs AU REPOS (uniquement quand fermé) */
.acc-hover .e-n-accordion-item[data-closed] > .e-n-accordion-item-title{
  background:#F7F7F7 !important;  /* ta couleur de bande au repos */
  color:#FFFFFF !important;        /* couleur du texte au repos */
}

/* (Fallback si tu utilises l’accordéon classique ailleurs) */
.acc-hover .elementor-accordion-item:not(.elementor-active) > .elementor-tab-title{
  background:#F7F7F7 !important;
  color:#111111 !important;
}

/* === Couleurs AU REPOS (fermés) — marche si data-closed présent OU absent === */
.acc-hover .e-n-accordion-item[data-closed] > .e-n-accordion-item-title,
.acc-hover .e-n-accordion-item[data-closed] > .e-n-accordion-item-title .e-n-accordion-item-title-header,
.acc-hover .e-n-accordion-item[data-closed] > .e-n-accordion-item-title .e-n-accordion-item-title-text,
.acc-hover .e-n-accordion-item:not([open]) > .e-n-accordion-item-title,
.acc-hover .e-n-accordion-item:not([open]) > .e-n-accordion-item-title .e-n-accordion-item-title-header,
.acc-hover .e-n-accordion-item:not([open]) > .e-n-accordion-item-title .e-n-accordion-item-title-text{
  background-color:#F7F7F7 !important;   /* fond au repos */
  color:#FFFFFF !important;               /* texte au repos */
  background-image:none !important;
}

/* === Couleurs ACTIF (hover OU ouvert) — couvre tous les états === */
.acc-hover .e-n-accordion-item:hover > .e-n-accordion-item-title,
.acc-hover .e-n-accordion-item:hover > .e-n-accordion-item-title .e-n-accordion-item-title-header,
.acc-hover .e-n-accordion-item:hover > .e-n-accordion-item-title .e-n-accordion-item-title-text,
.acc-hover .e-n-accordion-item[open]  > .e-n-accordion-item-title,
.acc-hover .e-n-accordion-item[open]  > .e-n-accordion-item-title .e-n-accordion-item-title-header,
.acc-hover .e-n-accordion-item[open]  > .e-n-accordion-item-title .e-n-accordion-item-title-text,
.acc-hover .e-n-accordion-item:not([data-closed]) > .e-n-accordion-item-title,
.acc-hover .e-n-accordion-item:not([data-closed]) > .e-n-accordion-item-title .e-n-accordion-item-title-header,
.acc-hover .e-n-accordion-item:not([data-closed]) > .e-n-accordion-item-title .e-n-accordion-item-title-text{
  background-color:#121212 !important;   /* fond actif */
  color:#BEEF9E;               /* texte actif */
  background-image:none !important;
}


/* titre projet */
.body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.titre-projet {
    color:#F2F4F3;
    text-shadow: 5px 5px 0 #BEEF9E, 10px 10px 0 #FFA839;
    animation: shadow-dance 4s infinite;
}

@keyframes shadow-dance {
    0%, 100% {
        text-shadow: 5px 5px 0 #BEEF9E, 10px 10px 0 #FFA839;
    }
    50% {
        text-shadow: -5px -5px 0 #FFA839, -10px -10px 0 #BEEF9E;
    }
}


/* Bloquer le scroll horizontal UNIQUEMENT sur mobile et tablette */
@media (max-width: 1024px) {
  html, body {
    width: 100%;
    overflow-x: hidden;
  }

  /* Empêcher tout débordement d’éléments typiques */
  img, video, svg, canvas {
    max-width: 100%;
    height: auto;
  }

  .elementor-section {
    left: 0 !important;
    right: 0 !important;
  }

  .elementor-container {
    max-width: 100% !important;
  }
}



/* titre services */
.body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.titre-projet-2 {
    color:#F2F4F3;
    text-shadow: 5px 5px 0 #F2F4F3, 10px 10px 0 #FFA839;
    animation: shadow-dance 4s infinite;
}

@keyframes shadow-dance {
    0%, 100% {
        text-shadow: 2px 2px 0 #BEEF9E, 5px 5px 0 #FFA839;
    }
    50% {
        text-shadow: -2px -2px 0 #FFA839, -5px -5px 0 #BEEF9E;
    }
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Avenir';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://ujjstudiographique.fr/wp-content/uploads/2025/08/AvenirLTStd-Roman.woff') format('woff');
}
/* End Custom Fonts CSS */