/**
 * @version 1.0.0
 * @author Arnaud BERNARD <arnaud@pixelorigine.com>
 * @copyright 2026 Arnaud BERNARD - Pixelorigine. Tous droits réservés.
 */


.views-container--myesm p {
    /* margin-top: 24px; */
}


/**
 * =============================================================================
 * Page header
 * =============================================================================
 */
.myesm-header {
    position: relative;
    z-index: 1;
    margin-bottom: 120px;
    color: #fff;
    background-color: #0d1b2a;
}


/**
 * Contenu du header
 */
.myesm-header__content {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "headerTitle"
        "headerCtaWrap"
        "headerIntro";
    row-gap: 40px;
    margin: auto;
    padding-block: 40px;
}

.myesm-header__content h2,
.myesm-header__content p {
    padding-inline: 10%;
}

.myesm-header__content h2 {
    grid-area: headerTitle;
    margin: 0;
    font-size: clamp(1.8rem, 3vw, 3.3rem);
    font-weight: 200;
    line-height: 1.3em;
}

.myesm-header__content h2 b {
    white-space: nowrap;
    font-weight: bold;
}

.myesm-header__content p {
    grid-area: headerIntro;
    margin: 0;
    max-width: 800px;
    font-size: 1.1rem;
}


/**
 * Image Hero du header
 */
.myesm-header__hero {
    display: block;
    position: relative;
    height: 200px;
    overflow: hidden;
}

.myesm-header__hero::after {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    /* background-image: linear-gradient(to top, rgb(255 255 255 /50%), transparent 90%); */
    /* background-image: linear-gradient(to top, hsl(211, 53%, 38%), transparent 90%); */
    /* background-image: linear-gradient(to top, hsl(211, 53%, 47%), transparent 90%); */
    /* background-image: linear-gradient(to top, hsl(211, 50%, 44%), transparent 120%); */
    background-image: linear-gradient(to top, hsl(211, 50%, 44%, 90%), transparent 140%);
}

.myesm-header__hero img {
    display: block;
    width: 100%;
    object-fit: cover;
    object-position: left top;
    /* transform: perspective(400px); */
}


/**
 * -----------------------------------------------------------------------------
 * Bouton CTA MyEsm (lien vers la page de login)
 * -----------------------------------------------------------------------------
 */

/**
 * Wrapper qui sert de point d'observation stable
 * pour la fonction JS ClassInView
 */
.myesm-cta-login-wrap {
    grid-area: headerCtaWrap;
    display: flex;
}

/**
 * CTA : porte l'effet visuel (transform + opacity + animation).
 * L'état initial (avant animation) est caché et décalé à gauche
 * sur smartphone et décalé à droite du desktop.
 */
.myesm-cta-login {
     --_myesm-anim-end-margin-inline: 10% 0;

    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    column-gap: 8px;
    padding: 8px;

    /**
     * Largeur identique du CTA à la largeur responsive de la sidebar
     * de la zone d'intervention quand la fenêtre fait au moins 1200w
     */
    width: 260px;

    text-decoration: none;
    text-transform: uppercase;
    color: #fff;
    background-color: #ff8c00;
    border-radius: calc(80px / 2);

    outline: 0 solid #ff8c00;
    transition: outline 100ms ease-in-out;

    /**
     * Le bouton slide in avec l'animation myesmCtaSlide
     * depuis la gauche, relatif à sa propre largeur.
     */
    transform: translateX(-100%);

    opacity: 0;
}

.myesm-cta-login:hover {
    outline-width: 3px;
}

.myesm-cta-login__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    align-content: center;
    padding: 6px;
    width: 24px;
    height: 24px;
    box-sizing: content-box;
    background-color: #fff;
    border-radius: 50%;
}

.myesm-cta-login__icon svg {
    display: block;
    width: 100%;
    height: auto;
    fill: #ff8c00;
}


/**
 * -----------------------------------------------------------------------------
 * Bouton CTA MyEsm → RESPONSIVE & ANIMATION 
 * -----------------------------------------------------------------------------
 * NB : Les règles conditionnelles sont regroupées par breakpoint
 * 
 *       // DEBUG : permet de voir le positionnement du CTA quand
 *       // il est en dehors de son conteneur (à gauche ou à droite).
 *       .myesm-header {
 *           transform: scale(0.8);
 *       }
 * -----------------------------------------------------------------------------
 */


/**
 * Déclenchement de l'animation quand le wrapper entre dans le viewport
 */
.myesm-cta-login-wrap--in-view .myesm-cta-login {
    animation: myesmCtaSlide cubic-bezier(0.43, 1.45, 0.64, 1) 800ms forwards 150ms;

    @media (min-width: 2300px) {
        animation-duration: 1.1s;
    }
}

/** Animation CTA */
@keyframes myesmCtaSlide {
    0% {
        opacity: 0;
    }
    60% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        margin-inline: var(--_myesm-anim-end-margin-inline);
        transform: translateX(0);
    }
}

/** Responsive CTA login MyEsm */
@media (min-width: 800px) {

    .myesm-cta-login-wrap {
        flex-direction: row-reverse;
    }

    .myesm-cta-login {
         --_myesm-anim-end-margin-inline: 0 10%;
         transform: translateX(100%);
    }
}

/** Responsive CTA login MyEsm */
@media (min-width: 960px) {
    .myesm-header__content {
        grid-template-columns: 2fr 1fr;
        grid-template-areas:
            "headerTitle ..."
            "........... headerCtaWrap"
            "headerIntro ...";
        align-items: center;
        row-gap: 0;
    }

    .myesm-header__content h2,
    .myesm-header__content p {
        padding-inline: 40px;
    }

    .myesm-cta-login-wrap {
        flex-direction: row;
        max-width: 888px;
    }
    
    .myesm-cta-login {
        transform: translateX(0);
        margin-left: 100%;
    }
}

/** Responsive CTA login MyEsm */
@media (min-width: 1200px) {
    .myesm-header__content h2,
    .myesm-header__content p {
        padding-left: 60px;
    }

    .myesm-cta-login-wrap {
        margin-left: 0;
        width: 100%;
    }
}

/** Responsive CTA login MyEsm */
@media (min-width: 1420px) {
    .myesm-header__content {
        padding-left: max(0px, calc((100vw - 1300px) / 2));
    }

    .myesm-header__content h2,
    .myesm-header__content p {
        padding-left: 0;
    }

    .myesm-cta-login-wrap {
        /** Fix alignement vertical avec sidebar de zones d'interventions */
        margin-left: 2px;
    }
}

/** Responsive CTA login MyEsm */
@media (min-width: 1500px) {
    .myesm-header__content {
        grid-template-columns: 980px auto;
        column-gap: 40px;
    }
}



/**
 * =============================================================================
 * Section panel
 * =============================================================================
 */
.myesm-card-panel {
    container-name: myesmCardPanel;
    container-type: inline-size;
    margin-bottom: 40px;
    padding: 10px;
    background-color: #fff;

    @media (min-width: 480px) {
        padding: 20px;
        border-radius: var(--card-border-radius);
        box-shadow: var(--card-box-shadow);
        overflow-x: hidden;
    }

    @media (min-width: 768px) {
        padding: 30px 40px 40px;
    }
}

.myesm-card-panel h3,
.myesm-card-panel h4 {
    display: flex;
    align-items: center;
    column-gap: 0.5rem;
    margin-top: 0;
}

.myesm-card-panel h3 > .fa,
.myesm-card-panel h4 > .fa {
    display: flex;
    justify-content: center;
    width: 32px;
    font-size: 32px;
}

.myesm-card-panel h3 {
    font-size: clamp(1.3rem, 2vw, 1.5rem);

    /** Hauteur de ligne identique à la hauteur d'un pictogramme */
    line-height: 32px;

    color: var(--hex-bleu);
}

.myesm-card-panel h4 {
    margin-top: 48px;
    margin-bottom: 0;
    font-size: 1.2em;
    line-height: 1.5em;
}

.myesm-card-panel li > h4 {
    margin-top: 24px;
}

.myesm-card-panel img {
    display: block;
    margin-block: 16px;
    max-width: 100%;
    height: auto;
}



/**
 * =============================================================================
 * Section content split 2 colonnes
 * =============================================================================
 */

/**
 * Composant de grille
 */
.myesm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 20px;
}


/**
 * Composant de split en 2 colonnes
 */
.myesm-content-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: stretch;
}

@media (min-width: 1200px) {
    .myesm-content-split {
        grid-template-columns: auto 1fr;
    }
    .myesm-content-split:not(:has(.myesm-content-split__images)) {
        column-gap: 80px;
    }
}

/**
 *Élément d'image
 */
.myesm-content-split__images {
    position: relative;
    overflow: hidden;
    border: 2px solid #0d1b2a;

    /** Arrondi d'angle identique aux blocs NB existants sur d'autres pages */
    border-radius: 10px;
}

/**
 * Modificateur élément image menu latéral
 */
.myesm-content-split__images--side-menu {
    background-color: #626264;
}

.myesm-content-split__images--side-menu img {
    margin-left: 0;
    height: 530px;
    object-fit: cover;
    object-position: top;
}

.myesm-content-split__images--side-menu::before {
    content: '';
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 360px;
    height: 100%;
    background-image: linear-gradient(to left, #626264, transparent 20px);
}

@media (min-width: 1200px) {
    .myesm-content-split__images--side-menu {
        /** largeur image + 4px de border left/right */
        min-width: 364px;
    }

    .myesm-content-split__images--side-menu img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .myesm-content-split__images--side-menu::before {
        content: none;
    }
}



/**
 * =============================================================================
 * Listes
 * =============================================================================
 */

/**
 * Liste ordonnée
 */
.myesm-card-panel ol {
    list-style: none;
    counter-reset: step;
    padding-left: 28px;
}

.myesm-card-panel ol li {
    counter-increment: step;
    position: relative;
    margin-block: 30px;
    padding-left: 48px;
}

.myesm-card-panel ol li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 14px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    background-color: #002043;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}


/**
 * Liste qui détaille les fonctionnalités
 * du menu de la console utilisateurs
 */
.myesm-feature-list {
    padding: 0;
    list-style: none;
}

.myesm-feature-list li:first-child h4 {
    margin-top: 0;
}

.myesm-feature-list p {
    margin: 0 0 0 40px;
}


/**
 * Composant de liste explicative des pictogrammes
 * de l'interface du manager qui gère le multilignes par item
 * 
 * <span> obligatoire pour envelopper la description d'un item
 */
.myesm-icons-list {
    margin-block: 30px;
    padding-left: 32px;
    list-style: none;
}

.myesm-icons-list > li {
    display: flex;

    /** Conserve le texte multilignes calé en haut (comportement par défaut) */
    align-items: flex-start;

    column-gap: 8px;
    margin-block: 16px;
}

.myesm-icons-list > li::before {
    content: '\f105';
    font-family: 'FontAwesome';
    order: 2;
    flex-shrink: 0;
}

.myesm-icons-list > li > *:first-child {
    order: 1;
    flex-shrink: 0;
}

.myesm-icons-list > li > span {
    order: 3;
}

.myesm-icons-list > li::before,
.myesm-icons-list > li > span {
    line-height: 24px;
}

.myesm-icons-list--icon40h > li::before,
.myesm-icons-list--icon40h > li > span {
    /* Aligne la 1re ligne de texte au centre du bouton de 40px */
    margin-top: 8px;
}



/**
 * =============================================================================
 * Étiquettes de tris — Rendu visuel des boutons MyEsm (inline) — CTA doc
 * =============================================================================
 */

/**
 * Badge de titre
 */
.myesm-title-tag {
    display: flex;
    align-items: center;
    column-gap: 8px;
    padding: 4px 6px;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.06em;
    background-color: hsl(209, 15%, 92%);
    border-radius: 15px;
    border: 1px solid rgb(from currentColor r g b /20%);

    /* XXX : tag "inactif par défaut" potentiellement coupé sur smartphone */
    /* white-space: nowrap; */
    /* text-overflow: ellipsis; */
    /* overflow: hidden; */
}

.myesm-title-tag .fa {
    font-size: 16px;
    line-height: 1;
}


/**
 * Composant 4 filters tags inline
 */
.myesm-filter-tags {
    --_myesm-border-color-light: color-mix(in srgb, currentColor, #fff 85%);
    margin-block: 16px;
    padding: 16px;
    border: 1px solid;
    border-color: var(--_myesm-border-color-light);
    border-radius: 10px;

    @media (min-width: 1200px) {
        width: fit-content;
    }
}

.myesm-filter-tags__legend {
    display: flex;
    column-gap: 8px;
    margin-bottom: 16px;
    padding: 20px 0 8px;
    border-bottom: 1px solid var(--_myesm-border-color-light);

    /** Centrage horizontal des 4 tags affichés en diagonale sur smartphone */
    justify-content: center;
}

.myesm-filter-tags__legend > li {
    display: flex;
    align-items: center;
    column-gap: 4px;
    padding-inline: 6px;
    font-size: 12px;
    line-height: 22px;
    border: 1px solid;
    border-radius: 12px;

    /**
     * Affichage en diagonale des 4 tags sur smartphone
     */
    margin-inline: -14px;
    transform: rotate(-28deg);
    transform-origin: left top;
    width: 88px;
    transition: all 600ms;
}

/**
 * Média query d'annulation de l'affichage en diagonal
 * des 4 tags (filtrage cat. emails) de la légende du conteneur
 */
@media (min-width: 600px) {
    .myesm-filter-tags__legend {
        /** Annulation du centrage de la barre (conteneur) des 4 tags */
        justify-content: flex-start;
        padding: 0 0 15px;
    }

    .myesm-filter-tags__legend > li {
        margin-inline: unset;
        transform: unset;
        width: auto;
    }
}


/**
 * Composant de liste Verdict tags
 */
.myesm-verdict-tags {
    padding-left: 0;
    list-style: none;
}

.myesm-verdict-tags li {
    margin-block: 16px;
    width: fit-content;
    font-size: 0.9em;
    line-height: 28px;
    padding-inline: 16px;
    background-color: color-mix(in srgb, currentColor, #fff 90%);
    border-radius: 14px;
}

.myesm-verdict-tags strong {
    font-weight: normal;
}


/**
 * 4 boutons d'actions du manager
 */
.myesm-action-button-like {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: rgb(255, 140, 0);
    border-radius: 50%;
}

/** Spécificité du bouton d'action "Libérer" */
.myesm-action-button-like:has([href="#icon-fa-envelope-open-text"]) {
    color: color-mix(in srgb, rgb(86, 200, 0), #fff 50%)
}

/**
 * Rendu visuel du bouton (+) MyEsm permettant d'ajouter un élément
 * NB : cette règle s'applique directement sur le <svg>
 * qui doit être un carré de 16x16 pixels
 */
.myesm-btn-plus-like {
    /** NB : cette règle s'applique directement sur le <svg> */
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /** Ajustement optique plus fin qu'avec `middle` */
    vertical-align: -0.4em;

    margin-inline: 2px;
    padding: 4px;
    color: #fff;
    background-color: #ff8c00;
    border-radius: 50%;
    box-sizing: content-box;
}

.myesm-btn-plus-like--green {
    background-color: rgb(86, 200, 0);
}


/**
 * Composant CTA liens vers doc officielle MyEsm
 */
.myesm-cta-doc {
    list-style: none;
}

.myesm-cta-doc a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    min-height: 68px;
    font-weight: 400;
    text-decoration: none;
    border: 1px solid color-mix(in srgb, CurrentColor, #fff 60%);
    border-radius: 10px;
    transition: all 150ms ease-in-out;
}

.myesm-cta-doc a::before {
    order: -1;
    content:'\f0c1';
    font-family: 'FontAwesome';
    font-size: 1.3rem;
}

.myesm-cta-doc a::after {
    align-self: stretch;
    flex-shrink: 0;
    order: -1;
    content:'';
    margin-block: 4px;
    width: 1px;
    background-color: color-mix(in srgb, CurrentColor, #fff 60%);
}

.myesm-cta-doc a:hover {
    background-color: color-mix(in srgb, CurrentColor, #fff 90%);
    border-color: CurrentColor;
}



/**
 * =============================================================================
 * Classes utilitaires spécifiques My e-securemail
 * =============================================================================
 */

.myesm-u-color-blue {
    color: rgb(22, 177, 255);
}

.myesm-u-color-green {
    color: rgb(86, 200, 0);
}

.myesm-u-color-orange {
    color: rgb(255, 140, 0);
}

.myesm-u-color-red {
    color: rgb(255, 76, 81);
}

.myesm-u-color-grey {
    color: rgb(138, 141, 147);
}

.myesm-u-border-block {
    border: 2px solid #0d1b2a;
    border-radius: 10px;
}

.myesm-u-icon-svg-vertical-align-center {
    display: inline-flex;
    /** Ajustement plus fin avec la valeur relative qu'avec `middle` */
    vertical-align: -0.15em;
}

/** L'image conserve sa taille réelle, mais elle est tronquée */
.myesm-u-img-crop {
    max-width: none !important;
    width: 100%;
    object-fit: none;
    object-position: center;
}