/* 
 Theme Name:     RIFTNO
 Author:         Eklore 
 Author URI:     https://eklore.ca
 Template:       Divi
 Version:        1.1.2
*/ 
/* ----------- PUT YOUR CUSTOM CSS BELOW THIS LINE -- DO NOT EDIT ABOVE THIS LINE --------------------------- */ 
/*Corrections DIVI - saut header*/
body.et-fb header#main-header {display:none;}
:root{ --header-offset: 115px; }
.home{ --header-offset: 182px; }
#main-content .et_pb_section:first-child{padding-top: var(--header-offset) !important;}

html, body {
    overflow-x: hidden !important;
    width: 100%;
    position: relative;}

.et_pb_section {background-repeat: no-repeat!important;}

:root{
    --bleufonce:#0d2a52;
    --bordeau:#411344;
    --violet:#7e5484;
    --lilas:#bfa7c6;
    --lilas_pale:#F7F0F9;
    --peche:#fabe99;
    --turquoise:#009788;
    --blanc:#ffffff;
    box-sizing:border-box;
}

::selection {
  color: var(--bleufonce);
  background: var(--lilas);}

sup {font-size: x-small;}

#page-container {font-family: "canada-type-gibson", sans-serif !important;}

#page-container h1, #page-container h2, #page-container h3, #page-container h4, #page-container h5, #page-container h6 {font-family: "canada-type-gibson", sans-serif !important;}
.home h1 {font-size: clamp(2rem, 1.25rem + 3.75vw, 4.25rem) !important; line-height: 1.1 !important;} /* 68px - 32px */
#page-container h1 {font-size: clamp(2.1rem, 1.6rem + 2.2vw, 3.25rem); Line-height: 1.1;} /* 52px - 34px */
#page-container h2 { font-size: clamp(1.6875rem, 1.4rem + 1.25vw, 2.375rem); line-height: 1.15; } /* 38px - 27px */
#page-container h3 {font-size: clamp(.25rem, 1.15rem + 0.5vw, 1.5rem) ; Line-height: 1.25;} /* 24px - 20px */
#page-container h4 {font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem); Line-height: 1.3;} /* 21px - 18px */
#page-container h5 {font-size: clamp(1rem, 0.98rem + 0.2vw, 1.125rem); Line-height: 1.35;} /* 18px - 16px */

#page-container p + :is(h2, h3, h4, h5, h6), #page-container :is(h2, h3, h4, h5, h6) + :is(h2, h3, h4, h5, h6) {margin-top: 20px;}

#page-container input:focus:not(.et-search-field), a:focus-visible, a:focus-visible img, select:focus, #et_search_icon:focus {outline: 3px solid var(--lilas);}

strong, b {font-weight: 600;}  

ul li::marker {
    color: var(--lilas_pale); 
    font-size: 1.2em; 
}

.puces-lilas ul li::marker {
    color: var(--lilas); 
    font-size: 1.2em; 
}


/** HEADER **/
/* --- NAV --- */
@media (min-width: 981px) {
    #main-header .container {
        padding-right: 0 !important;
    }

	/* bloc bordeaux */
	nav#top-menu-nav, 
	#top-menu, 
	nav.et-menu-nav, 
	.et-menu {
		background: var(--bordeau) !important;
		padding: 10px 25px !important;
		border-radius: 20px 0 0 20px !important; 
		margin-right: 0 !important;
		display: block !important;
	}

  #top-menu li a {
         /* padding-left: 0px !important;
        padding-right: 0px !important;*/
        padding-bottom: 10px !important ;
        padding-top: 10px !important;
    }

	#top-menu .menu-item-has-children>a:first-child:after{top: 10px;}

.nav li ul {
    width: 320px;
    border-radius: 0 0 20px 20px;
}

    #top-menu li li a {
        width: 280px;
    }

}

ul#mobile_menu .et_mobile_menu {
    background-color: var(--bordeau)!important;
}
	
	#main-header .et_mobile_menu {
background-color: var(--bordeau) !important;
border-radius: 0 0 20px 20px;
border-top: 2px solid var(--lilas);
}
/*Mobile Menu Collapse*/ 
/*change hamburger icon to x when mobile menu is open*/
#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before,
.et_pb_module.et_pb_menu .et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
	content: '\4d';
}
/*adjust the new toggle element which is added via jQuery*/
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
ul.et_mobile_menu li.page_item_has_children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.page_item_has_children .mobile-toggle {
	width: 44px;
	height: 100%;
	padding: 0px !important;
	max-height: 44px;
	border: none;
	position: absolute;
	right: 0px;
	top: 0px;
	z-index: 999;
	background-color: transparent;
}
/*some code to keep everyting positioned properly*/
ul.et_mobile_menu>li.menu-item-has-children,
ul.et_mobile_menu>li.page_item_has_children,
ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.page_item_has_children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children {
	position: relative;
}
/*remove default background color from menu items that have children*/
.et_mobile_menu .menu-item-has-children>a,
.et-db #et-boc .et-l .et_mobile_menu .menu-item-has-children>a {
	background-color: transparent;
}
/*hide the submenu by default*/
ul.et_mobile_menu .menu-item-has-children .sub-menu,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu {
	display: none !important;
	visibility: hidden !important;
}
/*show the submenu when toggled open*/
ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible {
	display: block !important;
	visibility: visible !important;
}
/*adjust the toggle icon position and transparency*/
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle {
	text-align: center;
	opacity: 1;
}
/*submenu toggle icon when closed*/
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after {
	top: 10px;
	position: relative;
	font-family: "ETModules";
	content: '\33';
	color: #1c203f;
	background: #f0f3f6;
	border-radius: 50%;
	padding: 3px;
}
/*submenu toggle icon when open*/
ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after {
	content: '\32';
}
/*add point on top of the menu submenu dropdown*/
.et_pb_menu_0.et_pb_menu .et_mobile_menu:after {
	position: absolute;
	right: 5%;
	margin-left: -20px;
	top: -14px;
	width: 0;
	height: 0;
	content: '';
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 20px solid #ffffff;
}
/*adjust the position of the hamburger menu*/
.mobile_menu_bar {
	position: relative;
	display: block;
	/*bottom: 10px;*/
	line-height: 0;
}
/*force the background color and add a rounded border*/
.et_pb_menu_0.et_pb_menu .et_mobile_menu,
.et_pb_menu_0.et_pb_menu .et_mobile_menu ul {
	background-color: #ffffff !important;
	border-radius: 10px;
}

/*** HERO ***/
H1 {
    text-shadow: 0em 0em 12px rgba(0, 0, 0, 0.7)!important;    text-wrap: balance !important;
}
.hero-background-extended,
.hero-background-extended_page {
    max-width: 1160px !important; 
    width: 80% !important;
    margin: 0 auto !important;
    position: relative !important; 
    background-color: transparent !important; 
    overflow: visible !important; 
    z-index: 1 !important; 
}
    .hero-background-extended::before,
    .hero-background-extended_page::before {
        content: "" !important;
        display: block !important; 
        position: absolute;
        bottom: 0;
        left: -77px !important; 
background-image: linear-gradient(
    to top, 
    rgba(13, 42, 82, 0.85) 0%,    
    rgba(13, 42, 82, 0.6) 40%, 
    rgba(118, 118, 144, 0) 100%) !important;
        z-index: -1 !important; 
    }

    .hero-background-extended::before {
        right: -77px !important; 
        width: auto !important;  
        top: 0; 
        border-radius: 15px;
    }

    .hero-background-extended_page::before {
        width:100%;
		max-width: 835px !important; 
        right: auto !important;  
        top: -115px;
        border-radius: 0 0 15px 15px;

    }

@media (max-width: 980px) {
    .hero-background-extended {
        max-width: 85%;
        width: 85%; 
        padding-left: 50px;
        padding-right: 50px;
    }

    .hero-background-extended::before {
        width: 100% !important; 
        left: 0 !important;
        right: 0 !important; 
    }
    .hero-background-extended_page::before {
        left: auto !important;

    }
}
.fd-open, .fd-close {display:none!important;}

/*** BODY ***/
/* Section vidéo - Accueil */
div.et_pb_section.section-angle-accueil {
    position: relative !important;
    overflow: hidden !important; 
    z-index: 1 !important;
    background-color: var(--blanc, #ffffff) !important;
}

/* Le bloc bordeaux */
div.et_pb_section.section-angle-accueil::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important; /* On part du haut exact */
    left: 0 !important;
    width: 100% !important;
    height: 60% !important;
    background-color: var(--bordeau) !important; 
    clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
    z-index: -1 !important;
}

/* --- TABLETTES --- */
@media (max-width: 980px) {
    div.et_pb_section.section-angle-accueil::before {
        height: 40% !important;
        clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
    }
}

/* --- MOBILES --- */
@media (max-width: 767px) {
    div.et_pb_section.section-angle-accueil::before {
        height: 35% !important;
        clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
    }
}


/* Sécurité pour pouvoir cliquer sur vos boutons/textes dans Divi */
.et-fb-root-ancestor .section-angle-accueil::before {
    pointer-events: none !important;
}

/* Icône vidéo */
.et_pb_video_0 .et_pb_video_overlay .et_pb_video_play {
    background-color: white;
    width: 80px !important;
    height: 80px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
    padding: 0 !important;
    line-height: 80px !important; /* Doit être égale à la hauteur */
    
    /* Recentrage absolu sur l'overlay */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0 !important;
}

/* Ajustement centre icone*/
.et_pb_video_0 .et_pb_video_overlay .et_pb_video_play:before {
    display: block;
    position: relative;
    left: 5px; 
}

/*** FOND ANGLE PAGES ***/

/* --- BORDEAU --- */
.angle-bas-gauche-bordeau, .angle-bas-droite-bordeau {
    position: relative !important;
    overflow: visible !important;
}
.angle-bas-gauche-bordeau::after {
    content: "" !important; display: block !important; position: absolute !important;
    bottom: 0 !important; left: 0 !important; width: 0 !important; height: 0 !important;
    border-style: solid !important; pointer-events: none !important;
    border-width: 150px 100vw 0 0 !important;
    border-color: var(--bordeau) transparent transparent transparent !important;
    transform: translateY(100%);
}
.angle-bas-droite-bordeau::after {
    content: "" !important; display: block !important; position: absolute !important;
    bottom: 0 !important; left: 0 !important; width: 0 !important; height: 0 !important;
    border-style: solid !important; pointer-events: none !important;
    border-width: 150px 0 0 100vw !important;
    border-color: var(--bordeau) transparent transparent transparent !important;
    transform: translateY(100%);
}

/* --- VIOLET --- */
.angle-bas-gauche-violet, .angle-bas-droite-violet {
    position: relative !important;
    overflow: visible !important;
}
.angle-bas-gauche-violet::after {
    content: "" !important; display: block !important; position: absolute !important;
    bottom: 0 !important; left: 0 !important; width: 0 !important; height: 0 !important;
    border-style: solid !important; pointer-events: none !important;
    border-width: 150px 100vw 0 0 !important;
    border-color: var(--violet) transparent transparent transparent !important;
    transform: translateY(100%);
}
.angle-bas-droite-violet::after {
    content: "" !important; display: block !important; position: absolute !important;
    bottom: 0 !important; left: 0 !important; width: 0 !important; height: 0 !important;
    border-style: solid !important; pointer-events: none !important;
    border-width: 150px 0 0 100vw !important;
    border-color: var(--violet) transparent transparent transparent !important;
    transform: translateY(100%);
}

/* --- LILAS --- */
.angle-bas-gauche-lilas, .angle-bas-droite-lilas {
    position: relative !important;
    overflow: visible !important;
}
.angle-bas-gauche-lilas::after {
    content: "" !important; display: block !important; position: absolute !important;
    bottom: 0 !important; left: 0 !important; width: 0 !important; height: 0 !important;
    border-style: solid !important; pointer-events: none !important;
    border-width: 150px 100vw 0 0 !important;
    border-color: var(--lilas_pale) transparent transparent transparent !important;
    transform: translateY(100%);
}
.angle-bas-droite-lilas::after {
    content: "" !important; display: block !important; position: absolute !important;
    bottom: 0 !important; left: 0 !important; width: 0 !important; height: 0 !important;
    border-style: solid !important; pointer-events: none !important;
    border-width: 150px 0 0 100vw !important;
    border-color: var(--lilas_pale) transparent transparent transparent !important;
    transform: translateY(100%);
}


/* --- BLANC --- */
.angle-bas-gauche-blanc, .angle-bas-droite-blanc {
    position: relative !important;
    overflow: visible !important;
}
.angle-bas-gauche-blanc::after {
    content: "" !important; display: block !important; position: absolute !important;
    bottom: 0 !important; left: 0 !important; width: 0 !important; height: 0 !important;
    border-style: solid !important; pointer-events: none !important;
    border-width: 150px 100vw 0 0 !important;
    border-color: var(--blanc) transparent transparent transparent !important;
    transform: translateY(100%);
}
.angle-bas-droite-blanc::after {
    content: "" !important; display: block !important; position: absolute !important;
    bottom: 0 !important; left: 0 !important; width: 0 !important; height: 0 !important;
    border-style: solid !important; pointer-events: none !important;
    border-width: 150px 0 0 100vw !important;
    border-color: var(--blanc) transparent transparent transparent !important;
    transform: translateY(100%);
}



/*** MODULES ***/

/* --- Page membres--- */

/* 1. La Ligne (Row) : On garde votre structure centrée */
.col-background-extend,
.col-background-extend-turquoise {
    max-width: 1160px !important; 
    width: 100% !important;
    position: relative !important; 
    background-color: transparent !important; 
    overflow: visible !important; 
    z-index: 1 !important; 
}

/* La Colonne de droite */
@media (min-width: 981px) {
    .col-background-extend,
    .col-background-extend-turquoise {
        position: relative !important;
        /* On donne un petit z-index à la colonne pour qu'elle crée un contexte d'empilement */
        z-index: 2 !important; 
    }

    .col-background-extend ::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -100vw;
    background-color: var(--lilas);
    border-radius: 15px 0 0 15px;
    z-index: -1;
    }

    .col-background-extend-turquoise ::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -100vw;
    background-color: var(--turquoise);
    border-radius: 15px 0 0 15px;
    z-index: -1;
    }

    .col-background-extend .et_pb_column_1 {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
}

/* 3. Nettoyage pour éviter le scroll horizontal */
body {
    overflow-x: hidden;
}

/* --- Page ressources--- */
/* Bascule */
.et_pb_toggle_content .ressource-item {
    border: 1px solid var(--bordeau);       
    border-radius: 20px;             
    padding: 15px;                   
    margin-bottom: 20px;             
    display: block;                  
}

.blanc .et_pb_toggle_content .ressource-item {
    border: 1px solid var(--blanc);       
                  
}

.et_pb_toggle .ressource-item h4 {
    color: var(--bordeau); 
}
.ressource-item ul {
    padding-left: 20px;            
}


.et_pb_toggle.blanc .ressource-item h4 {
    color: var(--blanc) !important;
}

.et_pb_toggle .ressource-item p {
    padding:0px !important; 
}

/* 1. Base commune pour toutes les icônes de ressources */
.ressource-item a[href^="mailto:"]::before,
.ressource-item a[href^="http"]::before,
.ressource-item a[href^="tel:"]::before,
.ressource-item .adresse::before {
    font-family: "ETmodules" !important;
    margin-right: 8px;
    display: inline-block;
    vertical-align: middle;
    transition: color 0.3s ease;
}

.ressource-item a[href^="mailto:"]::before { content: "\e010"; }
.ressource-item a[href^="http"]::before   { content: "\e0e3"; }
.ressource-item a[href^="tel:"]::before   {  content: "\e00b";}
.ressource-item .adresse::before      { content: "\e01d"; }

/*** FOOTER ***/

/*** DIVERS ***/
/** Contenu sans DIVI **/
#contenu-page .et_pb_row_1_tb_body:not(:has(.et-l--post)){width:85%; max-width: 1600px;}
body.single-actualites:not(.et_pb_pagebuilder_layout) #contenu-page .et_pb_row_1_tb_body { width: 85%; max-width: 1600px;}
body.single-actualites:not(.et_pb_pagebuilder_layout) #contenu-page .et_pb_row_1_tb_body .et_pb_post_content, body.single:not(.et_pb_pagebuilder_layout) #contenu-page .et_pb_row_1_tb_body .et_pb_post_content{padding-top:50px;padding-bottom:50px;}

/** Contenu avec DIVI - retrait padding premiere section **/
#contenu-page .et_pb_row .et_pb_row {width: 85%;max-width: 1600px;}
#contenu-page .et_pb_row #carte.et_pb_row {width: 100%;max-width: 100%;}
#contenu-page .et_pb_row .et_pb_row .et_pb_row {width: initial;}

/***ACCESSIBILITE***/
.sr-only {
    position: absolute !important;
    height: 1px; width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}