.elementor-868 .elementor-element.elementor-element-1d5aad8{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overflow:hidden;--padding-top:0vw;--padding-bottom:0vw;--padding-left:6vw;--padding-right:6vw;--z-index:1;}.elementor-868 .elementor-element.elementor-element-1d5aad8:not(.elementor-motion-effects-element-type-background), .elementor-868 .elementor-element.elementor-element-1d5aad8 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-8957392 );}.elementor-868 .elementor-element.elementor-element-78df2ea{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;}.elementor-868 .elementor-element.elementor-element-78df2ea.e-con{--flex-grow:1;--flex-shrink:1;}.elementor-868 .elementor-element.elementor-element-9835e40{--display:flex;--margin-top:-320px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-868 .elementor-element.elementor-element-4cbd00e{--display:flex;--min-height:100vh;}.elementor-868 .elementor-element.elementor-element-4cbd00e:not(.elementor-motion-effects-element-type-background), .elementor-868 .elementor-element.elementor-element-4cbd00e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://staging.debbiegraph.ca/wp-content/uploads/2026/09/DEBBIE-G-PHOTO-ENVATO.webp");background-position:center center;background-repeat:no-repeat;}.elementor-868 .elementor-element.elementor-element-eda1e0c{--display:flex;--min-height:100vh;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:10;}.elementor-868 .elementor-element.elementor-element-1e12ebf{--display:flex;--min-height:100vh;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overflow:hidden;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:2;}.elementor-868 .elementor-element.elementor-element-1e12ebf:not(.elementor-motion-effects-element-type-background), .elementor-868 .elementor-element.elementor-element-1e12ebf > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-8957392 );}.elementor-868 .elementor-element.elementor-element-88337d9{--display:flex;--min-height:100vh;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overflow:hidden;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:1;}.elementor-868 .elementor-element.elementor-element-88337d9:not(.elementor-motion-effects-element-type-background), .elementor-868 .elementor-element.elementor-element-88337d9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-8957392 );}.elementor-868 .elementor-element.elementor-element-9e300de{--display:flex;--position:absolute;--min-height:100vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;top:0px;}.elementor-868 .elementor-element.elementor-element-9e300de:not(.elementor-motion-effects-element-type-background), .elementor-868 .elementor-element.elementor-element-9e300de > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#02010100;}body:not(.rtl) .elementor-868 .elementor-element.elementor-element-9e300de{left:0px;}body.rtl .elementor-868 .elementor-element.elementor-element-9e300de{right:0px;}.elementor-868 .elementor-element.elementor-element-16b33c2{margin:0px 100px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-868 .elementor-element.elementor-element-16b33c2 img{width:100%;}.elementor-868 .elementor-element.elementor-element-c086c98{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 200px;padding:0px 0px 0px 0px;}.elementor-868 .elementor-element.elementor-element-c086c98 img{width:100%;}@media(max-width:767px){.elementor-868 .elementor-element.elementor-element-9835e40{--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-868 .elementor-element.elementor-element-4cbd00e{--margin-top:-20px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}}@media(min-width:768px){.elementor-868 .elementor-element.elementor-element-1d5aad8{--content-width:100%;}.elementor-868 .elementor-element.elementor-element-9835e40{--width:50%;}.elementor-868 .elementor-element.elementor-element-4cbd00e{--width:50%;}}/* Start custom CSS *//* =========================================================
   HERO — PHOTO
   ========================================================= */

.hero-photo {
    position: relative;
}

/* Gros fondu vers la zone texte */
.hero-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;

    background: linear-gradient(
        to right,
        #1A1A1A 0%,
        rgba(26,26,26,1) 5%,
        rgba(26,26,26,.85) 15%,
        rgba(26,26,26,.40) 28%,
        rgba(26,26,26,0) 42%
    );
}

/* Fondu haut + droite + bas */
.hero-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;

    background:
        /* HAUT */
        linear-gradient(
            to bottom,
            #1A1A1A 0%,
            rgba(26,26,26,.90) 5%,
            rgba(26,26,26,.55) 12%,
            rgba(26,26,26,.18) 22%,
            transparent 32%
        ),

        /* DROITE */
        linear-gradient(
            to left,
            #1A1A1A 0%,
            rgba(26,26,26,.95) 6%,
            rgba(26,26,26,.65) 14%,
            rgba(26,26,26,.25) 25%,
            transparent 38%
        ),

        /* BAS */
        linear-gradient(
            to top,
            #1A1A1A 0%,
            rgba(26,26,26,.98) 7%,
            rgba(26,26,26,.75) 16%,
            rgba(26,26,26,.35) 27%,
            rgba(26,26,26,.12) 36%,
            transparent 44%
        );
}


/* =========================================================
   HERO
   ========================================================= */

.dg-hero {
    position: relative;
    z-index: 1;
}


/* =========================================================
   INTRO — OVERLAY STRUCTURE
   ========================================================= */

.dg-intro {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    z-index: 9999;
    overflow: hidden;

    /*
     * IMPORTANT :
     * Intro reste transparent.
     * Ce sont les deux panneaux qui cachent le Hero.
     */
    background: transparent;
}


/* =========================================================
   INTRO — PANNEAUX
   ========================================================= */

.dg-monogram {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100dvh;
    z-index: 2;
    pointer-events: none;
}

.dg-panel-left,
.dg-panel-right {
    position: relative;
    width: 50%;
    height: 100dvh;
    min-height: 100dvh;
    background: #1A1A1A;
    overflow: visible;
}

    /*
     * Pas de fond directement sur les conteneurs :
     * leurs pseudo-éléments constituent les panneaux opaques.
     */
    background: transparent;
    overflow: visible;
}

/* Fonds opaques des deux panneaux */
.dg-panel-left,
.dg-panel-right {
    position: relative;
    width: 50%;
    height: 100dvh;
    min-height: 100dvh;
    background: #1A1A1A;
    overflow: visible;
}

/* Les lettres passent devant les deux surfaces */
.dg-d,
.dg-g {
    position: absolute;
    z-index: 2;

    width: 500px !important;
    max-width: none !important;
}


/* =========================================================
   INTRO — LETTRES TEMPORAIRES
   ========================================================= */

.dg-d,
.dg-g {
    width: 500px !important;
    max-width: none !important;
}


/* =========================================================
   TABLETTE
   ========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

    .dg-d,
    .dg-g {
        width: 380px !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .dg-d,
    .dg-g {
        width: 240px !important;
    }

    .hero-photo {
        width: 100% !important;
        height: 60vh;
        min-height: 460px;

        background-size: 155% auto !important;
        background-repeat: no-repeat !important;
        background-position: center center !important;
    }

    .dg-hero {
        padding-top: 120px;
    }

}

/* =========================================================
   INTRO — PANNEAUX VELOURS / RELIEF
   ========================================================= */

.dg-panel-left,
.dg-panel-right {
    position: relative;
    width: 50%;
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;

    /* Velours anthracite : lumière très subtile */
    background:
        radial-gradient(
            ellipse at 50% 40%,
            rgba(255,255,255,.025) 0%,
            rgba(255,255,255,.012) 28%,
            transparent 62%
        ),
        linear-gradient(
            135deg,
            #202020 0%,
            #191919 35%,
            #151515 100%
        );
}

/* Très léger grain textile */
.dg-panel-left::before,
.dg-panel-right::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;

    background:
        repeating-radial-gradient(
            circle at 0 0,
            rgba(255,255,255,.012) 0,
            rgba(255,255,255,.012) 1px,
            rgba(0,0,0,.012) 1px,
            rgba(0,0,0,.012) 2px
        );

    opacity: .35;
}

/* Rebord intérieur du panneau gauche */
.dg-panel-left::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 14px;
    height: 100%;
    pointer-events: none;

    background: linear-gradient(
        to left,
        rgba(0,0,0,.70) 0%,
        rgba(0,0,0,.30) 35%,
        rgba(255,255,255,.07) 72%,
        transparent 100%
    );

    box-shadow:
        5px 0 12px rgba(0,0,0,.45);
}

/* Rebord intérieur du panneau droit */
.dg-panel-right::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 14px;
    height: 100%;
    pointer-events: none;

    background: linear-gradient(
        to right,
        rgba(0,0,0,.70) 0%,
        rgba(0,0,0,.30) 35%,
        rgba(255,255,255,.07) 72%,
        transparent 100%
    );

    box-shadow:
        -5px 0 12px rgba(0,0,0,.45);
}/* End custom CSS */