/* ==========================================================================
   HEADER
   ========================================================================== */
.mon-video{
    width: 100%;
    height: 100%;
    object-fit: cover;	
	filter: brightness(0.5);
}


.contenu_header{
    position: absolute;
    bottom: 5vw;
    left: 5vw;
    width: 40%;	
}

section.header {
    height: 100vh;
}

.contenu_header p{
	color: var(--color3);	
}
.contenu_header h1{
       color: #EFE7DB;	
}

/* ==========================================================================
   SECTION .service (animation sticky complète avec services intégrés)
   ========================================================================== */

/* Section haute pour créer tout le scroll bloqué */
.service {
    position: relative;
    height: 450vh; /* 4 viewports de scroll bloqué */
    z-index: 10;
	background-color: #F7F2EB;
}

/* Wrapper sticky */
.service .service_inner {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

.titre_vert_service_01{
    position: absolute;
    /* right: -16px; */
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: clamp(4rem, 10vw, 8rem);
    font-weight: 700;
    color: #8b3333;
    letter-spacing: 0.05em;
    line-height: 1;
    margin: 0;
    pointer-events: none;
    user-select: none;
    left: -16px;
}

.titre_vert_service_02{
    position: absolute;
     right: -16px; 
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: clamp(4rem, 10vw, 8rem);
    font-weight: 700;
    color: #8b3333;
    letter-spacing: 0.05em;
    line-height: 1;
    margin: 0;
    pointer-events: none;
    user-select: none;
  
}

/* bg_form - triangle rouge qui grandit */
.bg_form {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 40%;
    height: 100%;
    background: #a63d3d;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    will-change: width, clip-path;
    z-index: 0;
}

/* Image centrée, position gérée par JS */
.service .service_inner > img.img_anime {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 33.44vw;
    height: 48.46vw;
    max-width: 642px;   /* plafond pour grands écrans */
    max-height: 930px;      /* plafond proportionnel */
    opacity: 1;
    transform: translate(-50%, -50%) translateY(60vh);
    will-change: transform, width, height;
    z-index: 200;
}



/* Intro initiale */
.service .intro {
    position: absolute;
    left: 5vw;
    top: 40%;
    transform: translateY(-50%);
    width: 25%;
    z-index: 101;
    will-change: opacity, transform;
}

.service .intro *{
	color: #a63d3d;
}

.service .intro a{
    border: 1px solid #a63d3d;
    color: #a63d3d;
    background-color: transparent
}

/*
.service .intro a{
	
}
*/

/* Service_01 et Service_02 — sous-sections qui défilent horizontalement */
.service .service_01{
    position: absolute;
    top: 0;
    
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    background: #a63d3d;
    will-change: transform, opacity;
    z-index: 100;
    opacity: 1;
}

.service .service_02{
	    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    background: #a63d3d;
    will-change: transform, opacity;
    z-index: 100;
    opacity: 1;
}

/* Ordre inverse pour service_02 (image à gauche) */
/*
.service .service_02 {
    flex-direction: row-reverse;
}
*/

/* Contenu et images des 2 services */
.service .service_01 .contenu{
    width: 50%;
	padding: 5vw 10vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.service .service_02 .contenu{
    width: 50%;
	padding: 5vw 10vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.service .service_01 .contenu h2,
.service .service_01 .contenu p,
.service .service_02 .contenu h2,
.service .service_02 .contenu p {
    color: white;
}

.service .service_01 .image,
.service .service_02 .image {
    width: 50%;
    height: 100%;
}

.service .service_01 .image img,
.service .service_02 .image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* Éléments internes des services - animés indépendamment par JS */
.service .service_01 .contenu,
.service .service_01 .image,
.service .service_02 .contenu,
.service .service_02 .image {
    will-change: opacity, transform;
}

/* ==========================================================================
   SECTION .avantage
   ========================================================================== */
section.avantage{
    display: flex;
    flex-wrap: wrap;
padding: 5vw 5vw 8vw 8vw;
    background-color: var(--color3);
    justify-content: space-between;
	position: relative;
}

.avantage .grand_titre{
    font-size: calc(34px + 7vw);
    color: #EFE7DB;
    width: 100%;
}

.section_avantage {
    display: flex;
    flex-wrap: wrap;
}

.bg_form_avantage{
	position: absolute;
    /* right: 0; */
    /* bottom: 0; */
    left: 0;
    width: 10%;
    height: 60%;
    background: #a63d3d;
    clip-path: polygon(100% 0, 0% 100%, 0 0%);
    will-change: width, clip-path;
    z-index: 0;
    top: 0;
}

section.avantage .colonne_01{
    width: 25%;
}

section.avantage .colonne_02{
    width: 65%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.num{
    color: var(--color1);
}

.single_avantage{
    width: 23%;
}

/* ==========================================================================
   SECTION .service_video
   ========================================================================== */
.service_video{
    display: flex;
    flex-wrap: wrap;
    background-color: #AC4747;
/*    background: linear-gradient(to bottom, #F7F2EB 20%, #AC4747 20%);*/
    padding: 0 5vw 5vw 5vw;
}

.service_video .colonne_01 h1{
	font-size: calc(15px + 4.5vw);
    color: white;
    line-height: 100%;
}

.service_video .colonne_01 h2{
    color: white;
    margin: 0;
}

.service_video .colonne_01{
    width: 35%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    padding-bottom: 5vw;
}

.service_video .colonne_02{
    width: 65%;
    position: relative;
    top: -4vw;
}

.iframe_wrapper {
    position: relative;
    /* --cut-position est défini dynamiquement par JS, en pixels.
       Représente la distance depuis le haut de l'iframe jusqu'à la ligne
       où le fond passe du beige au rouge. */
    --cut-position: 0px;
}

.iframe_wrapper iframe {
    width: 100%;
    height: 70vh;
    border-radius: 25px;
    display: block;
    border: none;
    position: relative;
    z-index: 1;
	padding: 30px;
}

/* Bordure ROUGE sur la partie qui dépasse sur le fond BEIGE (haut) */
.iframe_wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid #AC4747;
    border-radius: 25px;
    pointer-events: none;
    z-index: 2;
    /* On garde uniquement la portion au-dessus de la ligne de coupure */
    clip-path: inset(0 0 calc(100% - var(--cut-position)) 0);
}

/* Bordure BLANCHE sur la partie qui est sur le fond ROUGE (bas) */
.iframe_wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid #ffffff;
    border-radius: 25px;
    pointer-events: none;
    z-index: 2;
    /* On garde uniquement la portion sous la ligne de coupure */
    clip-path: inset(var(--cut-position) 0 0 0);
}

/* ==========================================================================
   SECTION .faq
   ========================================================================== */
section.faq{
	display: flex;
    flex-wrap: wrap;
    padding: 5vw 5vw 10vw 10vw;
    justify-content: space-between;
    background-color: var(--color3);
    position: relative;
}

section.faq .colonne_01{
    width: 30%;
}

section.faq .colonne_02 {
    width: 60%;
    border-top: 1px solid var(--color2);
}

.faq .grand_titre{
	font-size: calc(34px + 7vw);
    color: #EFE7DB;
}

h2.question{
	font-size: calc(10px + 0.9vw);
    font-weight: 500;
    margin: 0;
    position: relative;

}

h2.question a{
    color: var(--color1);
	width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;	
	gap:5%;
}

h2.question a::after{
    content: "";
    background-image: url(https://www.centrecanadiendecremation.ca/new/wp-content/uploads/2026/04/fleche_02.png);
    min-height: 11px;
    display: inline-block;
    min-width: 14px;
    transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
    transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750);
    background-size: contain;
    background-repeat: no-repeat;
    width: 1.1vw;
    height: 1vw;		
}

h2.question.open a::after{
    transform: rotate(90deg);
}

div.faq {
    padding: 15px 0;
    border-bottom: 1px solid var(--color2);
}

div.answer{
    display: none;
    padding-right: 6vw;
}


div.bg_form_faq{
	position: absolute;
    left: 0;
    width: 10%;
    height: 40%;
    background: #a63d3d;
    clip-path: polygon(100% 100%, 0% 100%, 0 0%);
    will-change: width, clip-path;
    z-index: 0;
    bottom: 0;
}

/* ==========================================================================
   SECTION .banniere
   ========================================================================== */
.banniere img{
    height: 75vh;
    width: 100%;
    object-fit: cover;
}

/* ==========================================================================
   SECTION .formulaire
   ========================================================================== */
.formulaire{
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}

.formulaire .colonne_01{
    width: 50%;
}

.formulaire .colonne_01 img {
    height: 100%;
    object-fit: cover;
}

.formulaire .colonne_02{
    width: 50%;
    padding: 5vw 10vw 5vw 5vw;
    background-color: #EFE7DB;
    position: relative;
}

.formulaire textarea,
.formulaire select,
.formulaire input{
    color: var(--color2) !important;
    border: none !important;
    box-shadow: none !important;
}

.formulaire #gform_submit_button_1{
    background-color: var(--color1);
    color: var(--color3) !important;
    padding: 15px 60px;
    text-transform: uppercase;
    font-weight: normal;
    font-size: 80%;
	border-radius: 0
}

h1.titre_vert{
position: absolute;
    right: -16px;
    /* top: 50%; */
    transform: translateY(0) rotate(180deg);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: clamp(4rem, 10vw, 8rem);
    font-weight: 700;
    color: var(--color3);
    letter-spacing: 0.05em;
    line-height: 1;
    margin: 0;
    pointer-events: none;
    user-select: none;
    bottom: 8vw;
}

div.splide__arrows > button.splide__arrow.splide__arrow--next > img{
	    transform: rotate(180deg);
}


/* ==========================================================================
   necrologie
   ========================================================================== */

.necrologie{
    background-color: #F7F2EB;
    padding: 5vw;

}
.necrologie > div{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;	
	position: relative;
	padding-top: 30px;
}

.necrologie .grand_titre{
    width: 100%;	
	font-size: calc(34px + 7vw);
	color: #EFE7DB;
}

.necrologie .colonne_01{
    width: 20%;	
}
.necrologie .colonne_02{
    width: 75%;	
}

.necrologie .splide__arrow{
    top: 90%;	
    background: transparent;	
}

.necrologie .splide__arrow--next {
    left: 4em;
}

.necrologie  .splide__arrow svg{
	fill: var(--color1);
}

.necrologie  .splide__arrow--prev {
    left: 0;
}

.titre_avis p {
    color: var(--color1);
    font-weight: bold;
	margin-bottom: 0;
}

p.anne{
	margin-top: 0;
}

.necrologie .splide__slide img {
    width: 100%;
    max-height: 350px;
    object-fit: cover;
}

.b1.link_avis{
	background-color: #6F6F6F;
	font-weight: normal;
}


.service .service_01,
.service .service_02,
.service .intro {
    pointer-events: none; /* par défaut, ignorent les clics */
}

/* Active les clics seulement sur les enfants visibles */
.service .service_01 .contenu,
.service .service_01 .image,
.service .service_02 .contenu,
.service .service_02 .image,
.service .intro * {
    pointer-events: auto;
}
/* ==========================================================================
   FOOTER
   ========================================================================== */
footer{
    background-color: #F7F2EB;
}




@media screen and (min-width:1920px){
	
	.service_video .colonne_01 h1{
		font-size: 100px;
	}
	
	
	.necrologie .grand_titre,
	.faq .grand_titre,
	.avantage .grand_titre{
		font-size: 200px;
	}
	
	h2.question{
		font-size: 27px;
	}
}

@media screen and (max-width:1260px){
	div.single_avantage {
    	width: 45%;
	}
	
	.iframe_wrapper iframe {
    	height: 70vh;
	}
	
	.service .intro{
		width: 30%;
	}	
}

@media screen and (max-width:1024px){
	.contenu_header{
		width: 50%;
	}
	
	.service_video .colonne_02 {
		width: 100%;
		order: 1;
	}
	
	.service_video .colonne_01 {
        width: 100%;
        order: 2;
        padding-top: 5vw;
        padding-bottom: 0;
	}	

	section.faq .colonne_01 {
        width: 75%;
        padding-bottom: 5vw;		
	}	
	
	section.faq .colonne_02 {
		width: 100%;
		
	}	

	.banniere img {
		height: 50vh;
		width: 100%;
		object-fit: cover;
	}	
	
	.necrologie .colonne_01 {
		width: 50%;
        padding-bottom: 10vw;
	}

	.necrologie .colonne_02 {
		width: 100%;
	}
	
	.necrologie .splide__arrow {
		top: 30%;
		background: transparent;
	}
}

@media screen and (max-width:960px){
	.formulaire .colonne_01 {
    	width: 100%;
	}
	.formulaire .colonne_02 {
    	width: 100%;
	}
}

@media screen and (max-width:860px){

	h1.titre_vert {
		right: -10px;
	}
	
/*
	.service .intro{
		width: 50%;
	}	
*/
	
	.titre_vert_service_01 {
		top: 25%;
		left: -1.6vw;
       	
	}
	
	.titre_vert_service_02 {
		right: -1.6vw;
		top: 75%;
	}	
	
	.service .service_01 .contenu{
		width: 100%;
		height: 50%;
	 	padding: 5vw 10vw 5vw 15vw;		
	}
	
	.service .service_02 .contenu{
		width: 100%;
		height: 50%;
	    padding: 10vw 15vw 5vw 10vw;	
	}
	
	.service .service_01 .image, .service .service_02 .image{
		width: 100%;
    	height: 50%;
	}
}

@media screen and (max-width:760px){
	.contenu_header{
		width: 60%;
	}
	
	section.avantage .colonne_01{
	    width: 100%;	
	}
	
	section.avantage .colonne_02{
	    width: 100%;	
	}
	
	section.avantage {
		padding: 5vw 5vw 8vw 10vw;
	}	
	
	footer > div {
		display: grid;
		grid-gap: 30px;
		grid-template-columns: 1fr 1fr;
	}	
}

@media screen and (max-width:640px){
	.contenu_header{
		width: 70%;
	}
	
	.service {
    	height: 800vh!important; /* 4 viewports de scroll bloqué */
	}
	
	.necrologie .splide__arrow {
		top: 32%;
	}
	
	.iframe_wrapper iframe {
    	height: 50vh;
	}
	
	footer > div {
		display: grid;
		grid-gap: 30px;
		grid-template-columns: 1fr;
		text-align: center;
	}		
	
	.service .intro {
		top: 35%;
	}	
	
	.service .intro {
        width: 50%;
    }
}
@media screen and (max-width:500px){
	.contenu_header{
		width: 80%;
	}
	
	.titre_vert_service_02,
	.titre_vert_service_01{
		font-size: clamp(3rem, 10vw, 6rem);
	}
	
/*
    .necrologie .splide__arrow {
        top: 42%;
    }	
*/
}