/* 
Theme Name: ITII Alsace Theme
Description: ITII Alsace Custom WordPress Theme
Author: Webalia
Author URI: https://webalia.fr/
Template: hello-elementor
Version: 2.0.0
Text Domain: ITII Alsace
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

/* Add your custom styles here */

/* Style des liens */

.elementor p a, .elementor-widget-text-editor a{
	text-decoration: underline;
	text-underline-offset: 2px;
	color: unset;
}

/* Style des titres */

.titre-orange span{
    color: var(--e-global-color-accent);
}

.titre-magenta span{
    color: var(--e-global-color-secondary);
}

.titre-vert span{
    color: var(--e-global-color-primary);
}

/* Style des boutons */

.bouton-chevron svg, #btn-form svg{
    width: 5.5px;
    margin-top: 1.5px;
}

.btn-fleche-haut svg{
    width: 16px;
    transform: rotate(-45deg);
}

.card-space-arrow:hover .space-arrow .elementor-icon-box-wrapper, .elementor-element.btn-fleche-haut a.elementor-button:hover .elementor-button-content-wrapper{
    gap: 16px;
    transition: all .3s;
}

.card-space-arrow .space-arrow .elementor-icon-box-wrapper, .elementor-element.btn-fleche-haut a.elementor-button .elementor-button-content-wrapper{
    transition: all .3s;
}

/* Style des listes */

.list-puce > ul:not(.puce-classique) > li::marker{
    content: "";
}

.list-puce > ul:not(.puce-classique){
	list-style-type: "";
	padding-inline-start: 24px;
}

.list-puce > ul:not(.puce-classique) > li{
    position: relative;
}

.list-puce > ul:not(.puce-classique) > li::before{
    content: ">";
    position: absolute;
    left: -20px;
    top: 0;
    font-family: "Chakra Petch";
    font-weight: 500;
}

.li-margin-8 > ul > li{
    margin-bottom: 8px;
}

.li-margin-16 > ul > li{
    margin-bottom: 16px;
}

.li-margin-16 > ul{
	padding-inline-start: 40px;
}

.li-margin-16 > ul > li::before{
    left: -30px;
}

.puce-vert > ul > li::before{
    color: var(--e-global-color-primary);
}

.puce-magenta > ul > li::before{
    color: var(--e-global-color-secondary);
}

.puce-orange > ul > li::before{
    color: var(--e-global-color-accent);
}

@media (min-width: 768px){
	.puce-colonne > ul > li{
	flex-grow: 1;
  }
	.puce-colonne > ul {
	display: flex;
	gap: 32px;
}
}

.puce-liste-titre > ul:not(.puce-classique) > li{
    font-size: 24px;
    font-weight: 500;
}

.puce-liste-titre ul:not(:first-of-type, .puce-classique){
    margin-top: 32px;
}

/* Champ spécifique */

.acf-relation{
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 40px;
}

.acf-checkbox-links{
    display: flex;
    gap: 24px;
	overflow-x: scroll;
	overflow-y: hidden;
}

.acf-checkbox-links a{
    color: var(--e-global-color-text);
    font-family: Barlow;
    font-size: 20px;
    font-weight: 600;
    text-underline-offset: 6px;
    text-decoration-color: var(--e-global-color-accent);
    text-decoration-thickness: 1px;
    transition: all .3s;
	flex-shrink: 0;
	padding: 8px 0px;
}

.acf-checkbox-links a:hover{
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-color: var(--e-global-color-accent);
    text-decoration-thickness: 1px;
    transition: all .3s;
}

@media (min-width: 768px){
	
}

/* Caroussel */

@media (min-width: 1025px){
    .carrousel-visible:before{
    content: "";
    background-color: white;
    width: calc((100% - 1344px) / 2);
    height: 100%;
    display: block;
    z-index: 99;
}

.carrousel-visible .swiper{
    overflow: visible;
}
}

.carrousel .elementor-swiper-button-prev svg{
    transform: rotate(180deg);
}

/* Forme de couleur */

.forme-before:before{
    content: "";
    display: block;
    position: absolute;
    right: 0;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
}

/* Style des tableaux */

table td, table th {
    border: 0px solid hsla(0, 0%, 50%, .502);
    border-bottom: 1px solid rgba(241, 90, 49, 0.1);
    line-height: 1.5;
    padding: 8px;
    vertical-align: top;
}

table th{
    border-bottom: 1px solid rgba(241, 90, 49, 0.3);
    border-block-start: 0px solid hsla(0, 0%, 50%, .502)!important;
	color: var(--e-global-color-accent);
}

table th:not(:first-of-type), table td:not(:first-of-type){
    text-align: center;
}

table th:first-of-type{
	text-align: left;
}

table tbody>tr:nth-child(odd)>td, table tbody>tr:nth-child(odd)>th, table tbody tr:hover>td, table tbody tr:hover>th {
    background-color: hsla(0, 0%, 50%, .0);
}

/* Style des textes */

.elementor-widget-text-editor ul, ul.wp-block-list, ol.wp-block-list{
	margin-block-end: .9rem;
}

.elementor-widget-text-editor:not(.li-margin-8, .li-margin-16) p:has(+ul) {
    margin-block-end: .4rem;
}

.bloc-contenu h2{
    text-transform: none;
    font-size: 28px;
}

.bloc-contenu h2:not(:first-child){
    margin-top: 48px;
}

.bloc-contenu figure{
    margin: auto;
    margin-top: 48px;
    margin-bottom: 48px;
    max-width: 750px;
}

.bloc-contenu a{
    color: var(--e-global-color-text);
}

.bloc-contenu .wp-block-pullquote{
	font-size: 20px;
    padding: 24px 0px;
}

.wp-block-buttons{
	margin-bottom: 16px;
}

a.wp-element-button{
	background-color: var(--e-global-color-c1e79af);
    color: var(--e-global-color-text);
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: var(--e-global-color-text);
    border-radius: 0px 0px 0px 0px;
    padding: 12px 20px 12px 20px;
    font-family: var(--e-global-typography-accent-font-family), Sans-serif;
    font-weight: var(--e-global-typography-accent-font-weight);
}

@media (min-width: 768px){
    .bloc-contenu h2{
    font-size: 36px;
}
}

/* Style image grid */

.img-grid{
    height: 0;
    min-height: 100%;
}

/* ALTCHA */

altcha-widget .altcha-footer{
	display: none;
}

/* FAQ */

#itii-faq .faq-list-item {
    margin-bottom: 1em;
    margin-top: 1em;
    border-bottom: 1px solid #fff;
}

h3.faq-question {
    cursor: pointer;
    position: relative;
    display: block;
    padding-left: 1.5em;
    font-size: 24px;
}

.faq-question:before {
    position: absolute;
    left: 5px;
    top: 0;
    content: ">";
	color: var(--e-global-color-primary);
	font-family: "Chakra Petch";
    font-weight: 600;
}

.faq-question:hover {
    opacity: 0.8;
}

@media (min-width:768px){
	.faq-list {
	padding: 0px 10px;
}
	
	.faq-answer{
	padding-left: 2.1em;
}
}

/* En tête */

.entete-classique:after{
  content: "";
  display: block;
  position: absolute;
  right: 0;
  width: 100%;
  height: 100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 55 254'%3E%3Cpath d='M55 254H.438L44.763 152.948 0 105.338 54.536 0H55v254Z' fill='%23B2D235'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
  z-index: 0;
}

@media (min-width:768px){
	background-image: url("data:image/svg+xml,%3Csvg%20width%3D%27233%27%20height%3D%27567%27%20viewBox%3D%270%200%20233%20567%27%20fill%3D%27none%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20d%3D%27M233%20567H22.0078L108.5%20370.5L0%20255.5L132.74%200H233V567Z%27%20fill%3D%27%23B2D235%27%2F%3E%3C%2Fsvg%3E");
}


/*
 * ANIMATION *
 */

/* Visible par défaut si JS absent */
.fade-in,
.fade-in-left,
.fade-in-right,
.fade-in-stagger > *,
.fade-in-carrousel .swiper-wrapper > *,
.fade-in-grid .elementor-grid > .fade-grid-item {
  opacity: 1;
  transform: none;
}

/* Préparation des animations quand JS actif */
.js .fade-in,
.js .fade-in-left,
.js .fade-in-right,
.js .fade-in-stagger > *,
.js .fade-in-carrousel .swiper-wrapper > *,
.js .fade-in-grid .elementor-grid > * {
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transition: opacity .5s ease-out, transform .5s ease-out;
  will-change: opacity, transform;
}


/* Variantes horizontales */
.js .fade-in-left  { transform: translate3d(-20px, 0, 0); }
.js .fade-in-right { transform: translate3d( 20px, 0, 0); }

/* Variantes verticales */
.js .fade-in-stagger > *,
.js .fade-in-carrousel .swiper-wrapper > *,
.js .fade-in-grid .elementor-grid > * {
  transform: translate3d(0, 20px, 0);
}

.js .fade-in-stagger > * {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition-property: opacity, transform;
  transition-duration: .4s;
  transition-timing-function: ease-out;
  transition-delay: var(--stagger-delay, 0ms); /* décalage géré par JS */
  will-change: opacity, transform;
}

/* État final commun */
.js .fade-in.is-visible,
.js .fade-in-left.is-visible,
.js .fade-in-right.is-visible,
.js .fade-in-stagger > *.is-visible,
.js .fade-in-carrousel .swiper-wrapper > *.is-visible,
.js .fade-in-grid .elementor-grid > *.is-visible {
  opacity: 1;
  transform: none;
}


/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
  .fade-in,
  .fade-in-left,
  .fade-in-right,
  .fade-in-stagger > *,
  .fade-in-carrousel .swiper-wrapper > *, 
  .fade-in-grid .elementor-grid > *{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Désactiver les animations dans l'éditeur Elementor */
body.elementor-editor-active .fade-in,
body.elementor-editor-active .fade-in-left,
body.elementor-editor-active .fade-in-right,
body.elementor-editor-active .fade-in-stagger > *,
body.elementor-editor-active .fade-in-carrousel .swiper-wrapper > *,
body.elementor-editor-active .fade-in-grid .elementor-grid > *{
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.bouton-chevron a.elementor-button:hover .elementor-button-content-wrapper {
    gap: 12px!important;
	transition: all .3s;
}

.bouton-chevron a.elementor-button .elementor-button-content-wrapper {
	transition: all .3s;
}

.hover-up:hover{
	transform: translateY(-10px)!important;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}