.elementor-4783 .elementor-element.elementor-element-8f8e4f6{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:30px;--padding-bottom:30px;--padding-left:30px;--padding-right:30px;}.elementor-4783 .elementor-element.elementor-element-8f8e4f6.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-4783 .elementor-element.elementor-element-2d05e17{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:50px;--padding-bottom:50px;--padding-left:50px;--padding-right:50px;}.elementor-4783 .elementor-element.elementor-element-2d05e17.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-4783 .elementor-element.elementor-element-4ed7a22{text-align:center;}.elementor-4783 .elementor-element.elementor-element-4ed7a22 .elementor-heading-title{color:var( --e-global-color-84c84aa );}.elementor-4783 .elementor-element.elementor-element-e2a5b11{padding:0px 0px 30px 0px;text-align:center;}.elementor-4783 .elementor-element.elementor-element-e2a5b11 .elementor-heading-title{color:var( --e-global-color-c03c2cd );}.elementor-4783 .elementor-element.elementor-element-b84b798{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + -40px) 0px;padding:0px 0px 0px 0px;font-family:"Montserrat", Sans-serif;color:var( --e-global-color-dbcc5c9 );}.elementor-4783 .elementor-element.elementor-element-b84b798 p{margin-block-end:0px;}.elementor-4783 .elementor-element.elementor-element-b84b798 a{color:var( --e-global-color-c03c2cd );}.elementor-4783 .elementor-element.elementor-element-b84b798 a:hover, .elementor-4783 .elementor-element.elementor-element-b84b798 a:focus{color:var( --e-global-color-c03c2cd );}.elementor-4783 .elementor-element.elementor-element-68d1bbf{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:9px 0px 0px 0px;}.elementor-4783 .elementor-element.elementor-element-7899efd{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-4783 .elementor-element.elementor-element-00ba998 .elementor-field-group{padding-right:calc( 10px/2 );padding-left:calc( 10px/2 );margin-bottom:10px;}.elementor-4783 .elementor-element.elementor-element-00ba998 .elementor-form-fields-wrapper{margin-left:calc( -10px/2 );margin-right:calc( -10px/2 );margin-bottom:-10px;}.elementor-4783 .elementor-element.elementor-element-00ba998 .elementor-field-group.recaptcha_v3-bottomleft, .elementor-4783 .elementor-element.elementor-element-00ba998 .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-4783 .elementor-element.elementor-element-00ba998 .elementor-labels-inline .elementor-field-group > label{padding-left:0px;}body:not(.rtl) .elementor-4783 .elementor-element.elementor-element-00ba998 .elementor-labels-inline .elementor-field-group > label{padding-right:0px;}body .elementor-4783 .elementor-element.elementor-element-00ba998 .elementor-labels-above .elementor-field-group > label{padding-bottom:0px;}.elementor-4783 .elementor-element.elementor-element-00ba998 .elementor-field-type-html{padding-bottom:0px;}.elementor-4783 .elementor-element.elementor-element-00ba998 .elementor-field-group .elementor-field:not(.elementor-select-wrapper){background-color:#ffffff;}.elementor-4783 .elementor-element.elementor-element-00ba998 .elementor-field-group .elementor-select-wrapper select{background-color:#ffffff;}.elementor-4783 .elementor-element.elementor-element-00ba998 .e-form__buttons__wrapper__button-next{color:#ffffff;}.elementor-4783 .elementor-element.elementor-element-00ba998 .elementor-button[type="submit"]{color:#ffffff;}.elementor-4783 .elementor-element.elementor-element-00ba998 .elementor-button[type="submit"] svg *{fill:#ffffff;}.elementor-4783 .elementor-element.elementor-element-00ba998 .e-form__buttons__wrapper__button-previous{color:#ffffff;}.elementor-4783 .elementor-element.elementor-element-00ba998 .e-form__buttons__wrapper__button-next:hover{color:#ffffff;}.elementor-4783 .elementor-element.elementor-element-00ba998 .elementor-button[type="submit"]:hover{color:#ffffff;}.elementor-4783 .elementor-element.elementor-element-00ba998 .elementor-button[type="submit"]:hover svg *{fill:#ffffff;}.elementor-4783 .elementor-element.elementor-element-00ba998 .e-form__buttons__wrapper__button-previous:hover{color:#ffffff;}.elementor-4783 .elementor-element.elementor-element-00ba998{--e-form-steps-indicators-spacing:20px;--e-form-steps-indicator-padding:30px;--e-form-steps-indicator-inactive-secondary-color:#ffffff;--e-form-steps-indicator-active-secondary-color:#ffffff;--e-form-steps-indicator-completed-secondary-color:#ffffff;--e-form-steps-divider-width:1px;--e-form-steps-divider-gap:10px;}#elementor-popup-modal-4783{background-color:rgba(0,0,0,.8);justify-content:center;align-items:center;pointer-events:all;}#elementor-popup-modal-4783 .dialog-message{width:830px;height:758px;align-items:flex-start;}#elementor-popup-modal-4783 .dialog-close-button{display:flex;}#elementor-popup-modal-4783 .dialog-widget-content{border-radius:0px 0px 0px 0px;box-shadow:2px 8px 23px 3px rgba(0,0,0,0.2);}@media(min-width:768px){.elementor-4783 .elementor-element.elementor-element-8f8e4f6{--width:90.472%;}.elementor-4783 .elementor-element.elementor-element-2d05e17{--width:100%;}}/* Start custom CSS for container, class: .elementor-element-8f8e4f6 *//* =========================================================
   ARCHIVE SUGGESTION — BOÎTE À IDÉES
   Elementor / WordPress

   Classes :
   .atb-portfolio-popup-suggestion
   .atb-tags-suggestion
   .ATB-avant-suggestion
   .form-suggestion
   ========================================================= */


/* =========================================================
   01 — PALETTE
   ========================================================= */

:root {

    --sug-noir: #1A0C0B;
    --sug-bordeaux: #30050E;
    --sug-rouge: #4D0C12;
    --sug-olive: #6F6A2F;
    --sug-bleu: #CBD5DF;
    --sug-ivoire: #EBE7DF;

    --sug-papier: #F7F4EF;
    --sug-texte: #4D4340;

    --sug-bordure: rgba(77, 12, 18, .14);
}


/* =========================================================
   02 — POPUP
   ========================================================= */

.elementor-popup-modal:has(.atb-portfolio-popup-suggestion)
.dialog-widget-content {

    width: 830px !important;
    max-width: calc(100vw - 30px) !important;

    height: 783px !important;
    max-height: calc(100vh - 30px) !important;

    background: var(--sug-papier) !important;

    border:
        1px solid rgba(48, 5, 14, .10) !important;

    border-radius: 4px !important;

    box-shadow:
        0 40px 110px rgba(26, 12, 11, .24),
        0 10px 30px rgba(77, 12, 18, .08) !important;

    overflow: hidden !important;
}


/* =========================================================
   03 — ZONE DE SCROLL
   ========================================================= */

.elementor-popup-modal:has(.atb-portfolio-popup-suggestion)
.dialog-message {

    width: 100% !important;

    height: 783px !important;
    max-height: calc(100vh - 30px) !important;

    padding: 0 !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    background:

        radial-gradient(
            circle at 92% 8%,
            rgba(203, 213, 223, .22),
            transparent 28%
        ),

        radial-gradient(
            circle at 4% 68%,
            rgba(111, 106, 47, .05),
            transparent 30%
        ),

        var(--sug-papier);
}


/* =========================================================
   04 — SCROLLBAR
   ========================================================= */

.elementor-popup-modal:has(.atb-portfolio-popup-suggestion)
.dialog-message::-webkit-scrollbar {

    width: 5px;
}


.elementor-popup-modal:has(.atb-portfolio-popup-suggestion)
.dialog-message::-webkit-scrollbar-thumb {

    background: rgba(77, 12, 18, .35);

    border-radius: 999px;
}


.elementor-popup-modal:has(.atb-portfolio-popup-suggestion)
.dialog-message::-webkit-scrollbar-track {

    background: transparent;
}


/* =========================================================
   05 — BOUTON FERMER
   ========================================================= */

.elementor-popup-modal:has(.atb-portfolio-popup-suggestion)
.dialog-close-button {

    position: absolute !important;

    top: 18px !important;
    right: 18px !important;

    width: 38px !important;
    height: 38px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;

    background:
        rgba(247, 244, 239, .88) !important;

    border:
        1px solid rgba(77, 12, 18, .12);

    border-radius: 50%;

    color:
        var(--sug-rouge) !important;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    transition:
        background .25s ease,
        color .25s ease,
        transform .3s ease;

    z-index: 9999 !important;
}


.elementor-popup-modal:has(.atb-portfolio-popup-suggestion)
.dialog-close-button:hover {

    background:
        var(--sug-rouge) !important;

    color: #fff !important;

    transform: rotate(90deg);
}


/* =========================================================
   06 — CONTENEUR PRINCIPAL
   ========================================================= */

.atb-portfolio-popup-suggestion {

    width: 100% !important;
    max-width: none !important;

    padding-left: 42px !important;
    padding-right: 42px !important;

    box-sizing: border-box;
}


/* =========================================================
   07 — TYPOGRAPHIES
   Titres : Fraunces
   Textes : Montserrat
   ========================================================= */

.atb-portfolio-popup-suggestion h1,
.atb-portfolio-popup-suggestion h2,
.atb-portfolio-popup-suggestion h3,
.atb-portfolio-popup-suggestion
.elementor-heading-title {

    font-family:
        "Fraunces",
        serif !important;

    font-weight: 400;

    color:
        var(--sug-bordeaux);
}


.atb-portfolio-popup-suggestion p,
.atb-portfolio-popup-suggestion a,
.atb-portfolio-popup-suggestion li,
.atb-portfolio-popup-suggestion label,
.atb-portfolio-popup-suggestion input,
.atb-portfolio-popup-suggestion textarea,
.atb-portfolio-popup-suggestion select,
.atb-portfolio-popup-suggestion button {

    font-family:
        "Montserrat",
        sans-serif;
}


/* =========================================================
   08 — GRAND TITRE PRINCIPAL
   ========================================================= */

.atb-portfolio-popup-suggestion h1 {

    margin: 0;

    font-size: 52px !important;

    line-height: .94 !important;

    letter-spacing: -.045em !important;

    color:
        var(--sug-bordeaux) !important;

    text-wrap: balance;
}


/* =========================================================
   09 — DESCRIPTION
   ========================================================= */

.atb-portfolio-popup-suggestion
.elementor-widget-text-editor {

    max-width: 100% !important;

    margin-bottom: 0 !important;
}


.atb-portfolio-popup-suggestion
.elementor-widget-text-editor p {

    margin-top: 0;

    margin-bottom: .65em;

    font-size: 14px !important;

    line-height: 1.72 !important;

    color:
        var(--sug-texte);
}


.atb-portfolio-popup-suggestion
.elementor-widget-text-editor p:last-child {

    margin-bottom: 0 !important;
}


/* =========================================================
   10 — TAGS
   Classe : atb-tags-suggestion
   ========================================================= */

.atb-portfolio-popup-suggestion
.atb-tags-suggestion {

    width: 100%;

    margin-top: 14px !important;

    /*
     * volontairement réduit pour éviter
     * un grand vide entre description et tags
     */

    margin-bottom: 30px !important;

    padding-top: 13px !important;
    padding-bottom: 13px !important;

    border-top:
        1px solid var(--sug-bordure);

    border-bottom:
        1px solid var(--sug-bordure);
}


.atb-portfolio-popup-suggestion
.atb-tags-suggestion p {

    margin: 0 !important;

    font-size: 9px !important;

    font-weight: 600 !important;

    line-height: 1.5 !important;

    letter-spacing: .17em !important;

    text-transform: uppercase;

    color:
        var(--sug-rouge) !important;
}


/* =========================================================
   11 — TITRE DE LA PARTIE FORMULAIRE
   Classe : ATB-avant-suggestion
   ========================================================= */

.atb-portfolio-popup-suggestion
.ATB-avant-suggestion {

    position: relative;

    margin-top: 18px !important;

    margin-bottom: 22px !important;

    padding-top: 25px !important;
}


/* ---------------------------------------------------------
   PETITE MENTION AU-DESSUS DU TITRE
   --------------------------------------------------------- */

.atb-portfolio-popup-suggestion
.ATB-avant-suggestion::before {

    content: "APPEL À IDÉES — ARCHIVE";

    position: absolute;

    top: 0;
    left: 0;

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 9px;

    font-weight: 600;

    line-height: 1;

    letter-spacing: .22em;

    text-transform: uppercase;

    color:
        var(--sug-olive);
}


/* ---------------------------------------------------------
   PETITE LIGNE ÉDITORIALE
   --------------------------------------------------------- */

.atb-portfolio-popup-suggestion
.ATB-avant-suggestion::after {

    content: "";

    position: absolute;

    top: 5px;
    left: 195px;

    width: 80px;
    height: 1px;

    background:
        rgba(111, 106, 47, .52);
}


/* ---------------------------------------------------------
   TITRE
   --------------------------------------------------------- */

.atb-portfolio-popup-suggestion
.ATB-avant-suggestion
.elementor-heading-title {

    margin: 0 !important;

    font-size: 48px !important;

    font-weight: 400 !important;

    line-height: .98 !important;

    letter-spacing: -.045em !important;

    color:
        var(--sug-rouge) !important;
}


/* =========================================================
   12 — FORMULAIRE / BOÎTE À IDÉES
   Classe : form-suggestion
   ========================================================= */

.atb-portfolio-popup-suggestion
.form-suggestion {

    position: relative;

    width: 100% !important;

    margin:
        0 0 60px !important;

    padding:
        32px 28px 28px !important;

    background:
        linear-gradient(
            145deg,
            rgba(235, 231, 223, .92),
            rgba(247, 244, 239, .98)
        );

    border:
        1px solid rgba(77, 12, 18, .12);

    border-radius: 3px;

    box-shadow:
        0 14px 40px rgba(48, 5, 14, .06);

    overflow: hidden;

    box-sizing: border-box;
}


/* =========================================================
   13 — PETITE MENTION DANS LE FORMULAIRE
   ========================================================= */

.atb-portfolio-popup-suggestion
.form-suggestion::before {

    content: "VOTRE SUGGESTION";

    position: absolute;

    top: 17px;
    right: 22px;

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 8px;

    font-weight: 600;

    line-height: 1;

    letter-spacing: .20em;

    text-transform: uppercase;

    color:
        rgba(77, 12, 18, .42);
}


/* =========================================================
   14 — PETIT ACCENT GRAPHIQUE
   ========================================================= */

.atb-portfolio-popup-suggestion
.form-suggestion::after {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 70px;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--sug-olive),
            var(--sug-rouge)
        );
}


/* =========================================================
   15 — LABELS
   ========================================================= */

.atb-portfolio-popup-suggestion
.form-suggestion label {

    display: block;

    margin-bottom: 7px;

    font-size: 9px !important;

    font-weight: 600 !important;

    line-height: 1.3;

    letter-spacing: .12em;

    text-transform: uppercase;

    color:
        var(--sug-bordeaux) !important;
}


/* =========================================================
   16 — CHAMPS
   ========================================================= */

.atb-portfolio-popup-suggestion
.form-suggestion input[type="text"],

.atb-portfolio-popup-suggestion
.form-suggestion input[type="email"],

.atb-portfolio-popup-suggestion
.form-suggestion input[type="tel"],

.atb-portfolio-popup-suggestion
.form-suggestion input[type="url"],

.atb-portfolio-popup-suggestion
.form-suggestion input[type="number"],

.atb-portfolio-popup-suggestion
.form-suggestion select,

.atb-portfolio-popup-suggestion
.form-suggestion textarea {

    width: 100% !important;

    min-height: 46px;

    padding:
        13px 14px !important;

    background:
        rgba(255, 255, 255, .68) !important;

    border:
        1px solid
        rgba(77, 12, 18, .14) !important;

    border-radius:
        2px !important;

    outline:
        none !important;

    box-shadow:
        none !important;

    font-size:
        13px !important;

    font-weight:
        400;

    color:
        var(--sug-noir) !important;

    transition:
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}


/* =========================================================
   17 — ZONE DE TEXTE
   ========================================================= */

.atb-portfolio-popup-suggestion
.form-suggestion textarea {

    min-height: 125px;

    resize: vertical;
}


/* =========================================================
   18 — PLACEHOLDERS
   ========================================================= */

.atb-portfolio-popup-suggestion
.form-suggestion input::placeholder,

.atb-portfolio-popup-suggestion
.form-suggestion textarea::placeholder {

    color:
        rgba(77, 67, 64, .48);

    opacity: 1;
}


/* =========================================================
   19 — FOCUS DES CHAMPS
   ========================================================= */

.atb-portfolio-popup-suggestion
.form-suggestion input:focus,

.atb-portfolio-popup-suggestion
.form-suggestion textarea:focus,

.atb-portfolio-popup-suggestion
.form-suggestion select:focus {

    background:
        #fff !important;

    border-color:
        rgba(111, 106, 47, .62) !important;

    box-shadow:
        0 0 0 3px
        rgba(111, 106, 47, .08) !important;
}


/* =========================================================
   20 — ESPACEMENT ENTRE LES CHAMPS
   ========================================================= */

.atb-portfolio-popup-suggestion
.form-suggestion
.elementor-field-group {

    margin-bottom:
        16px !important;
}


/* =========================================================
   21 — CHECKBOX / RADIO
   ========================================================= */

.atb-portfolio-popup-suggestion
.form-suggestion input[type="checkbox"],

.atb-portfolio-popup-suggestion
.form-suggestion input[type="radio"] {

    accent-color:
        var(--sug-rouge);
}


/* =========================================================
   22 — BOUTON ENVOYER
   ========================================================= */

.atb-portfolio-popup-suggestion
.form-suggestion button,

.atb-portfolio-popup-suggestion
.form-suggestion .elementor-button {

    width: 100%;

    min-height: 48px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap: 8px;

    margin-top: 8px;

    padding:
        13px 18px !important;

    background:
        var(--sug-rouge) !important;

    border:
        1px solid
        var(--sug-rouge) !important;

    border-radius:
        2px !important;

    box-shadow:
        none !important;

    font-size:
        10px !important;

    font-weight:
        600 !important;

    line-height:
        1;

    letter-spacing:
        .16em;

    text-transform:
        uppercase;

    color:
        var(--sug-ivoire) !important;

    cursor:
        pointer;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}


/* =========================================================
   23 — BOUTON AU SURVOL
   ========================================================= */

.atb-portfolio-popup-suggestion
.form-suggestion button:hover,

.atb-portfolio-popup-suggestion
.form-suggestion .elementor-button:hover {

    background:
        var(--sug-olive) !important;

    border-color:
        var(--sug-olive) !important;

    color:
        #fff !important;

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 22px
        rgba(48, 5, 14, .12) !important;
}


/* =========================================================
   24 — MESSAGE DE SUCCÈS
   ========================================================= */

.atb-portfolio-popup-suggestion
.form-suggestion
.elementor-message-success {

    margin-top:
        18px;

    padding:
        13px 15px;

    background:
        rgba(111, 106, 47, .10);

    border:
        1px solid
        rgba(111, 106, 47, .24);

    font-family:
        "Montserrat",
        sans-serif;

    font-size:
        11px;

    color:
        var(--sug-olive);
}


/* =========================================================
   25 — MESSAGE D'ERREUR
   ========================================================= */

.atb-portfolio-popup-suggestion
.form-suggestion
.elementor-message-danger {

    margin-top:
        18px;

    padding:
        13px 15px;

    background:
        rgba(77, 12, 18, .07);

    border:
        1px solid
        rgba(77, 12, 18, .18);

    font-family:
        "Montserrat",
        sans-serif;

    font-size:
        11px;

    color:
        var(--sug-rouge);
}


/* =========================================================
   26 — TABLETTE
   ========================================================= */

@media (max-width: 850px) {

    .elementor-popup-modal:has(.atb-portfolio-popup-suggestion)
    .dialog-widget-content {

        width:
            calc(100vw - 24px) !important;

        height:
            calc(100vh - 24px) !important;
    }


    .elementor-popup-modal:has(.atb-portfolio-popup-suggestion)
    .dialog-message {

        height:
            calc(100vh - 24px) !important;
    }


    .atb-portfolio-popup-suggestion {

        padding-left:
            30px !important;

        padding-right:
            30px !important;
    }
}


/* =========================================================
   27 — MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .elementor-popup-modal:has(.atb-portfolio-popup-suggestion)
    .dialog-widget-content {

        width:
            100vw !important;

        max-width:
            100vw !important;

        height:
            100dvh !important;

        max-height:
            100dvh !important;

        border-radius:
            0 !important;
    }


    .elementor-popup-modal:has(.atb-portfolio-popup-suggestion)
    .dialog-message {

        height:
            100dvh !important;

        max-height:
            100dvh !important;
    }


    .atb-portfolio-popup-suggestion {

        padding-left:
            18px !important;

        padding-right:
            18px !important;
    }


    .elementor-popup-modal:has(.atb-portfolio-popup-suggestion)
    .dialog-close-button {

        top:
            12px !important;

        right:
            12px !important;

        width:
            34px !important;

        height:
            34px !important;
    }


    .atb-portfolio-popup-suggestion h1 {

        font-size:
            38px !important;

        line-height:
            .98 !important;
    }


    .atb-portfolio-popup-suggestion
    .ATB-avant-suggestion {

        margin-top:
            12px !important;

        margin-bottom:
            18px !important;
    }


    .atb-portfolio-popup-suggestion
    .ATB-avant-suggestion
    .elementor-heading-title {

        font-size:
            39px !important;

        line-height:
            1 !important;
    }


    .atb-portfolio-popup-suggestion
    .ATB-avant-suggestion::before {

        font-size:
            8px;

        letter-spacing:
            .18em;
    }


    .atb-portfolio-popup-suggestion
    .ATB-avant-suggestion::after {

        display:
            none;
    }


    .atb-portfolio-popup-suggestion
    .form-suggestion {

        padding:
            28px 16px 20px !important;

        margin-bottom:
            35px !important;
    }


    .atb-portfolio-popup-suggestion
    .form-suggestion::before {

        top:
            12px;

        right:
            16px;

        font-size:
            7px;
    }


    /*
     * 16px évite notamment le zoom automatique
     * des champs sur certains navigateurs mobiles.
     */

    .atb-portfolio-popup-suggestion
    .form-suggestion input,

    .atb-portfolio-popup-suggestion
    .form-suggestion textarea,

    .atb-portfolio-popup-suggestion
    .form-suggestion select {

        font-size:
            16px !important;
    }


    .atb-portfolio-popup-suggestion
    .atb-tags-suggestion {

        margin-top:
            10px !important;

        margin-bottom:
            24px !important;
    }
}/* End custom CSS */
/* Start custom CSS *//* =========================================================
   ARCHIVE SUGGESTION — ANIMATION POPUP
   Effet dossier / fiche éditoriale qui se déplie

   Classe :
   .atb-portfolio-popup-suggestion
   ========================================================= */


/* ---------------------------------------------------------
   01 — OUVERTURE DE LA POPUP
   --------------------------------------------------------- */

.elementor-popup-modal:has(.atb-portfolio-popup-suggestion)
.dialog-widget-content {

    transform-origin: 50% 100%;

    animation:
        suggestion-folder-open
        0.82s
        cubic-bezier(.22,.78,.22,1)
        both;

    will-change:
        transform,
        opacity,
        clip-path;
}


/* ---------------------------------------------------------
   02 — EFFET DOSSIER QUI SE DÉPLIE
   --------------------------------------------------------- */

@keyframes suggestion-folder-open {

    0% {

        opacity: 0;

        transform:
            perspective(1400px)
            translateY(22px)
            rotateX(-7deg)
            scale(.975);

        clip-path:
            inset(88% 2% 0 2% round 4px);
    }


    30% {

        opacity: 1;

        transform:
            perspective(1400px)
            translateY(10px)
            rotateX(-3deg)
            scale(.985);

        clip-path:
            inset(44% 1% 0 1% round 4px);
    }


    68% {

        opacity: 1;

        transform:
            perspective(1400px)
            translateY(-2px)
            rotateX(.7deg)
            scale(1.002);

        clip-path:
            inset(0 0 0 0 round 4px);
    }


    100% {

        opacity: 1;

        transform:
            perspective(1400px)
            translateY(0)
            rotateX(0deg)
            scale(1);

        clip-path:
            inset(0 0 0 0 round 4px);
    }
}


/* =========================================================
   03 — APPARITION DU CONTENU
   Le contenu apparaît légèrement après le dossier
   ========================================================= */

.elementor-popup-modal:has(.atb-portfolio-popup-suggestion)
.dialog-message {

    animation:
        suggestion-content-reveal
        .72s
        cubic-bezier(.22,.75,.25,1)
        .10s
        both;
}


@keyframes suggestion-content-reveal {

    0% {

        opacity: 0;

        transform:
            translateY(12px);
    }


    45% {

        opacity: .45;
    }


    100% {

        opacity: 1;

        transform:
            translateY(0);
    }
}


/* =========================================================
   04 — OVERLAY
   Fond bordeaux très sombre
   ========================================================= */

.elementor-popup-modal:has(.atb-portfolio-popup-suggestion) {

    animation:
        suggestion-overlay-in
        .45s
        ease-out
        both;
}


@keyframes suggestion-overlay-in {

    from {

        background-color:
            rgba(26, 12, 11, 0);
    }


    to {

        background-color:
            rgba(26, 12, 11, .78);
    }
}


/* =========================================================
   05 — REFLET ÉDITORIAL
   Ivoire + olive + bordeaux
   ========================================================= */

.elementor-popup-modal:has(.atb-portfolio-popup-suggestion)
.dialog-widget-content::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    z-index: 2;

    background:
        linear-gradient(
            115deg,

            transparent 15%,

            rgba(235, 231, 223, 0) 28%,

            rgba(235, 231, 223, .18) 40%,

            rgba(203, 213, 223, .10) 45%,

            rgba(111, 106, 47, .08) 50%,

            rgba(77, 12, 18, .04) 56%,

            transparent 70%
        );

    transform:
        translateX(-115%);

    animation:
        suggestion-light-pass
        1.05s
        cubic-bezier(.22,.75,.25,1)
        .12s
        both;
}


/* ---------------------------------------------------------
   06 — PASSAGE DE LUMIÈRE
   --------------------------------------------------------- */

@keyframes suggestion-light-pass {

    0% {

        opacity: 0;

        transform:
            translateX(-115%);
    }


    25% {

        opacity: .65;
    }


    70% {

        opacity: .25;
    }


    100% {

        opacity: 0;

        transform:
            translateX(115%);
    }
}


/* =========================================================
   07 — PETITE APPARITION DU FORMULAIRE
   Le formulaire arrive après le reste du contenu
   ========================================================= */

.elementor-popup-modal:has(.atb-portfolio-popup-suggestion)
.form-suggestion {

    animation:
        suggestion-form-reveal
        .70s
        cubic-bezier(.22,.75,.25,1)
        .25s
        both;
}


@keyframes suggestion-form-reveal {

    0% {

        opacity: 0;

        transform:
            translateY(14px)
            scale(.992);
    }


    100% {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


/* =========================================================
   08 — ACCESSIBILITÉ
   Désactive les animations si l'utilisateur le demande
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .elementor-popup-modal:has(.atb-portfolio-popup-suggestion),

    .elementor-popup-modal:has(.atb-portfolio-popup-suggestion)
    .dialog-widget-content,

    .elementor-popup-modal:has(.atb-portfolio-popup-suggestion)
    .dialog-message,

    .elementor-popup-modal:has(.atb-portfolio-popup-suggestion)
    .dialog-widget-content::before,

    .elementor-popup-modal:has(.atb-portfolio-popup-suggestion)
    .form-suggestion {

        animation: none !important;

        transform: none !important;

        clip-path: none !important;

        opacity: 1 !important;
    }
}/* End custom CSS */