/* ea-intranet.css
 * Feuille consolidée intranet EA — remplace le CSS additionnel du Customizer
 * Date : 2026-07-09
 */

/* === VARIABLES DE DESIGN === */
/* ==========================================================================
   VARIABLES DE DESIGN (Centralisation)
   ========================================================================== */
:root {
    /* -- Palette de Couleurs -- */
    --ea-pink: #FF3683;
    --ea-pink-dark: #E22A72; /* retour Mathieu 22/07/2026 : le violet #662483 n'est plus utilisé dans la charte, remplacé par une nuance de rose plus foncée */
    --ea-pink-alt: #e91e63;
    --ea-pink-light: #ffe0ec; /* corrige une valeur invalide "#rgb(...)" jamais consommée jusqu'ici (aucun usage existant) — première utilisation par .ea-ext-link:hover */
    --ea-orange: #FF6636;
    --ea-orange-light: #ffe0d6;
    --ea-orange-text: #FF6636; /* aligné sur --ea-orange (retour Mathieu 22/07/2026), était #dc7f3a */
    --ea-green: #2ce978;
    --ea-green-dark: #11CC80;
    --ea-blue: #36DAFF;
    --ea-blue-border: #3DA5EC;
    --ea-blue-bg: #EAF6FD;
    --ea-red: #fa0555;
    --ea-red-bg: #FAEDED;
    /* Statuts "Signé, expiré"/"Terminé" (13/07/2026) : couleurs dédiées,
       distinctes de l'orange déjà pris par la famille "en attente d'action"
       (sent/requested) et du gris neutre de "Annulé". "Terminé" (transverse
       Signé/Annulé) en rouge (demande Mathieu) : nuance brique distincte du
       rouge vif à pulsation de --ea-status--late (urgence active), pour
       signifier une clôture plutôt qu'une alerte. */
    --ea-amber: #C98A1B;
    --ea-brick: #B23B3B;
    --ea-dark: #171717;
    --ea-black: #000000;
    --ea-white: #FFFFFF;
    --ea-gray-dark: #373033;
    --ea-gray-mid: #A7A7A7;
    --ea-gray-light: #C9C9C9;
    --ea-gray-input: #F8F8F8;
    --ea-gray-bg-light: #F6F6F6;
    --ea-gray-border: #ddd;
    --ea-bg-body: #F2EDEF;

    /* -- Typographie -- */
    --font-title: 'Raleway', sans-serif;
    --font-ui: 'Montserrat', sans-serif;

    /* -- SYSTEME DE BORDER RADIUS -- */
    /* Tags, petites puces (Origine: 5px) */
    --radius-xs: 8px;   
    
    /* Boutons secondaires, pagination, labels (Origine: 6px) */
    --radius-sm: 10px;   
    
    /* STANDARD: Boutons principaux, Inputs, Alertes (Origine: 8px) */
    --radius-md: 14px;   
    
    /* Intermédiaire: Gros boutons, titres décorés (Origine: 10px - 12px) */
    --radius-lg: 18px;
    --radius-lg-alt: 18px; 
    
    /* Conteneurs principaux: Modales, Sections, Tableaux (Origine: 16px) */
    --radius-xl: 24px;  
    
    /* Arrondis spécifiques (Origine: 20px) */
    --radius-xxl: 28px; 

    /* Totalement rond (Images profils, Bulles) */
    --radius-round: 50px;
    --radius-circle: 50%;

    /* Largeur de contenu du chrome (header/footer, section 9) — mesurée en
       live sur la page pilote 20270 pour aligner le bord gauche du header
       sur celui du contenu Elementor (voir commentaire section 9.1). */
    --ea-container: 1280px;
}

/* === CSS ADDITIONNEL INTRANET (legacy, hors scope .ea-v2) === */
/* ==========================================================================
   CSS ADDITIONNEL INTRANET
   ========================================================================== */

#gform_57, #gform_58, #gform_60, #gform_61 {
    opacity: 1 !important;
    visibility: visible !important;
}

.login-as-user {
    display: none;
}
 
/* CORRIGÉ le 17/07/2026 : "!important" retiré — cette règle nue (aucune
   garde, sans rapport avec .ea-v2) gagnait quand même face à la règle plus
   spécifique "html.ea-in-lightbox body { background: #fff }" (8.6, fond de
   la lightbox) uniquement parce qu'elle est marquée !important, malgré une
   spécificité plus faible. Sans !important, la cascade normale (spécificité)
   s'applique : cette règle continue de fournir le fond par défaut de tout
   le site, la règle de la lightbox reprend la main dans son propre scope. */
body {
    background: var(--ea-bg-body);
}

.page-content {
    padding: 60px;
    border-radius: var(--radius-xl);
}

.discret {
    color: var(--ea-white) !important;
    border-bottom: 0px solid var(--ea-white) !important;
}

.nouveau-client:before {
    content: "NOUVEAU";
    color: var(--ea-pink-alt);
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
    font-size: 0.8em;
}

.elementor-posts-container .posts_interne
 {
    border-radius: var(--radius-xl);
}

.banner-posts-interne .container .slide-interne .title-interne, .banner-posts-interne .container .slide-interne .title-interne a
 {
font-size:0.95em !important;
    line-height: 1.1!important;
	 margin-bottom:3px!important;
}

.date-interne {
    font-weight: 600!important;
}

div.slide-interne.slide-event {
    padding-bottom: 50px!important;
}


.banner-posts-interne .container .slide-interne, .container-intranet .col_animations .services .service-birthday .birthdays-list .birthdays .birthday, .container-intranet .col_animations .services .service-useful-links .row_link .links .link {
    border-radius: var(--radius-sm) !important;
}

.fitimg {
    transition: all 0.3s ease;
}

.logo-client-Archivé {
    filter: grayscale(100%) opacity(50%);
}

.logo-client-Actif:hover {
    transform: scale(1.05);
}

.gform_wrapper.gravity-theme .gsection .discret {
    color: var(--ea-white);
    border-bottom: 0px solid var(--ea-white) !important;
}

.discret h3.gsection_title {
    display: none !important;
}

.cache0 {
     display: none !important;
}

.notif, .notifsans {
    color: var(--ea-white);
    background-color: var(--ea-pink);
    padding: 2px 7px 3px 7px;
    font-weight: 700;
}

.notiforange, .notifsansorange {
    color: var(--ea-orange);
    background-color: var(--ea-orange-light);
    padding: 2px 7px 3px 7px;
    font-weight: 700;
}

.notif, .notiforange, .notifneutre {
    position: absolute;
    top: 0px; 
    right: 0px;
}

.notifsans, .notifsansorange, .notifneutre {
    display: inline-block;
}

.notif:empty, 
.notiforange:empty, 
.notifneutre:empty, 
.notifsans:empty, 
.notifsansorange:empty {
    display: none !important;
}

.elementor-section {
    border-radius: var(--radius-xl);
}

.elementor-button {
    line-height: 1 !important;
    fill: var(--e-global-color-accent);
    transition: all 0.3s;
}

.elementor-button:hover {
    line-height: 1 !important;
    fill: var(--ea-white);
    transform: scale(1.02) !important;
    -webkit-transform: scale(1.02) !important;
    transition: all 0.3s;
    -webkit-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.5) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.5) !important;
}

.bouton-ajout .elementor-button, .listing_posts-addpost, .bouton-ajout {
    border-radius: var(--radius-lg) !important;
    padding: 10px 16px 10px 16px !important;
    font-size: 16px !important;
    transform: scale(1.02) !important;
    -webkit-transform: scale(1.02) !important;
    transition: all 0.3s;
}

.gv-list-multiple-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.h3.gv-field-27-custom {
    font-weight: 700;
    text-transform: uppercase;
}

.gv-list-view, .gv-edit-entry-wrapper {
    max-width: 100%;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05);
    border-radius: .50rem; /* Note: Gardé .50rem car standard bootstrap, équivalent approx 8px */
    font-family: var(--font-title);
    background: var(--ea-white);
    border: none;
    border-radius: var(--radius-xl);
}

.gv-list-view h3, .gv-list-view h5, h3.elementor-heading-title {
    margin: 30px 0px 20px 0px;
}

.gv-list-single-container .gv-list-view-title, .gv-edit-entry-wrapper {
    padding: 5% 7% 5% 7%;
}

.gv-list-single-container .gv-list-view-content {
    padding: 2% 7% 2% 7%;
}

.gv-list-multiple-container.gv-container-20322 #gv-field-21-custom .logofond {
    background-color: #F8FBFD;
    border: 16px solid #F8FBFD;
}

.gv-list-view-title {
    border-bottom: 0px solid var(--ea-gray-border);
}

.gv-list-multiple-container .gv-list-view .gv-list-view-title h3.h3.gv-field-21-3 {
    padding: 25px 15px 5px 15px;
    color: var(--ea-black);
    text-align: center;
}

.gv-list-multiple-container .gv-list-view .gv-list-view-title h3.h3.gv-field-31-1 {
    padding: 10px 15px 5px 15px;
    font-size: 25px !important;
    color: var(--ea-black);
    text-align: center;
}

.gv-list-multiple-container .gv-list-view-title, .gv-list-view-content {
    padding: 16px 16px 8px 16px;
    width: 100%;
}

.gv-container-20322 .gv-list-multiple-container .gv-list-view-title, .gv-list-view-content {
    padding: 4px 16px 4px 16px;
}

.gv-list-multiple-container .gv-list-view-title, .gv-list-multiple-container .gv-list-view-content {
    text-align: center;
}

.gv-list-multiple-container .gv-list-view-title {
    padding: 16px 16px 8px 16px;
    width: 100%;
    text-align: flex-start;
}

.gv-list-multiple-container .gv-list-view-content {
    align-self: flex-end;
}

.gv-list-multiple-container .gv-list-view {
    min-width: 160px;
    overflow: hidden;
    display: inline-flex;
    width: calc(100%/5.25);
    float: left;
    vertical-align: middle;
    transition: all 0.5s;
    flex-wrap: wrap;
    position: relative;
}

.gv-grid-col-2-3.gv-list-view-content-description {
    width: 100% !important;
    text-align: center;
}

.gv-container-23003 .gv-list-view {
    min-width: 400px !important;
}

.gv-container-38906 .gv-list-view {
    min-width: 300px !important;
}

.gv-list-multiple-container .gv-list-view:hover {
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
    transform: scale(1.02);
}

h3.gfield, .gfield.h3, .gv-list-view-title h3, .gv-list-view-title h3 p, .gform_title, div.gv-widget-custom-content h3, .titremodif, h3.elementor-heading-title, .gform_wrapper.gravity-theme .gfield h3, .tabx-content h3.titre {
    font-family: var(--font-title);
    font-weight: 900;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    color: var(--ea-black) !important;
    text-transform: uppercase;
}

.gv-list-view-title h3 a:hover {
    text-transform: uppercase;
}

h3 a {
    color: inherit !important;
}

.pum-theme-lightbox .pum-title {
    color: var(--ea-black) !important;
}

.pum-container, .pum-theme-lightbox .pum-container {
    border-radius: var(--radius-xl) !important;
    background-color: #f5f2f3 !important;
}

.gv-list-multiple-container .gv-list-view-title h3, .gv-list-multiple-container .gv-list-view-title h3 p {
    font-size: 20px;
    margin: 0px 0px 15px 0px;
}

.gv-list-single-container .gv-list-view-title h3, .gv-list-single-container .gv-list-view-title h3 p, .titremodif {
    font-size: 34px;
    margin: 0px 0px 15px 0px;
}

.gv-list-view-title {
    width: 100%;
    background-color: var(--ea-white);
    border-radius: var(--radius-xl) var(--radius-xl) 0px 0px;
}

.gv-list-single-container .gv-list-view-title {
    background-color: #F9F9F9;
    border-radius: var(--radius-xl) var(--radius-xl) 0px 0px;
}

.gv-list-view-content-description .description .gv-field-label {
    text-transform: uppercase;
    font-weight: bold;
    margin: 20px 0px 40px 0px !important;
    color: var(--ea-black);
    font-size: 1.15em;
    line-height: 2.5em;
}

.gv-list-multiple-container .gv-list-view ul, .gv-list-multiple-container .gv-list-view-subtitle ul, .gv-field-21-36 ul, .gv-field-50-4 ul {
    list-style: none;
    padding: 0;
    margin-top: 8px;
    margin-right: 8px;
    margin-bottom: 8px;
}

.gv-list-multiple-container .gv-list-view li, .gv-list-multiple-container .gv-list-view-subtitle li, .gv-field-21-36 li, .gv-field-50-4 li {
    display: inline-block !important;
    background-color: #EAEAEA !important;
    color: var(--ea-black);
    padding: 4px 8px !important;
    margin: 4px 6px 4px 0px !important;
    border-radius: var(--radius-xs) !important;
    font-size: 13px !important;
}

.gv-list-multiple-container .gv-list-view-subtitle h4#gv-field-34-6 li, .gv-list-multiple-container .gv-list-view-subtitle h4#gv-field-34-14 li, .gv-list-multiple-container .gv-list-view-subtitle h4#gv-field-34-13 li {
    display: inline-block !important;
    background-color: #EAEAEA !important;
    padding: 4px 8px !important;
    margin: 4px 6px 4px 0px !important;
    border-radius: var(--radius-xs) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.1em !important;
    text-transform: uppercase !important;
    font-size: 10px !important;
}

.gv-list-multiple-container .gv-list-view li::before, .gv-list-multiple-container .gv-list-view-subtitle li::before, .gv-field-21-36 li::before, .gv-field-50-4 li::before {
    content: none !important;
}

.gv-field-21-36 {
    margin: 0px 0px 12px 0px !important;
}

.gv-list-view-subtitle ul {
    list-style-type: none;
    list-style-position: inside;
    margin: 10px 0px 10px 0px;
}

.gv-list-view-subtitle h4 {
    font-weight: 500 !important;
}

.gv-list-view details h4 {
    font-size: 1em;
    font-weight: 700 !important;
}

.gv-list-view details p, .gv-list-view details ul {
    font-size: 0.8em;
    font-weight: normal;
}

.gv-list-view-subtitle li::before {
    content: "●";
    color: var(--ea-black);
    font-weight: bold;
    display: inline-block;
    width: 1.7em;
    margin-left: -1.7em;
}

.gv-list-view-subtitle a {
    color: var(--ea-pink);
    text-decoration: none;
}

.gv-list-view-subtitle a:hover {
    color: var(--ea-dark);
    text-decoration: none;
}

.gv-list-view-subtitle p {
    margin: 10px 0px 10px 0px;
    line-height: 1.5em;
    text-align: justify;
}

.gv-list-multiple-container .gv-list-view .logofond {
    width: calc(100% - 32px);
    height: 130px;
    border: 16px solid var(--ea-white);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 10px;
    padding: 10px;
}

.gv-list-single-container .logofond {
    width: 25%;
    height: 140px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 10px;
    float: right;
    margin-top: -60px;
}

.gv-list-single-container .logofond2 {
    width: 40%;
    height: 250px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 10px;
    float: right;
    margin-top: -60px;
}

.gv-list-view-content-description h3 {
    font-family: var(--font-title);
    font-weight: 800;
    color: var(--ea-black);
    font-size: 24px;
    text-transform: uppercase;
}

h2.gform_title {
    font-family: var(--font-title);
    font-weight: 800;
    color: var(--ea-dark);
    font-size: 30px;
    text-transform: uppercase;
}

.gv-grid.gv-list-view-footer {
    padding: 3% 7% 3% 7%;
    width: 100%;
    text-align: center;
    padding-bottom: 12px;
    align-self: flex-end;
    border-radius: 0px 0px var(--radius-xl) var(--radius-xl);
}

.gv-grid.gv-list-view-footer .gv-grid-col-1-2 {
    width: 100%;
    text-align: center;
    padding: 10px 0px 0px 0px !important;
}

.gv-container-38906 .gv-list-view-footer {
    background-color: var(--ea-white) !important;
    border-top: 0px solid var(--ea-gray-border);
    padding: 0px;
}

.gv-container-38906 .gv-grid.gv-list-view-footer .gv-grid-col-1-2.gv-right {
    background-color: #eee !important;
    border-top: 1px solid var(--ea-gray-border);
}

.gv-container-38906 .gv-grid.gv-list-view-footer .gv-grid-col-1-2 {
    padding: 20px !important;
}

.gv-list-single-container h2 {
    font-family: var(--font-title);
    font-weight: 800;
    color: var(--ea-dark);
    font-size: 24px;
    text-transform: uppercase;
    margin-top: 40px;
}

.gv-field-21-edit_link {
    font-weight: 600;
    color: var(--ea-pink);
    text-transform: uppercase;
}

.gfield_label {
    font-weight: 900 !important;
    color: var(--ea-black) !important;
    text-transform: uppercase !important;
}

.gform_wrapper.gravity-theme .gf_progressbar_blue {
    background: #e8e8e8 !important;
}

.services-template-default h4 {
    font-size: 18px;
    margin: 30px 0px 10px 0px;
}

.gfield_description {
    font-size: 13px !important;
    color: var(--ea-black);
    font-style: italic;
}

.gfield_required {
    color: var(--ea-pink) !important;
}

button.gpnf-add-entry, .edit-button, .delete-button {
    font-family: var(--font-title);
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    text-transform: uppercase;
    color: var(--ea-pink) !important;
    background-color: var(--ea-white);
    border-style: solid !important;
    border-width: 1px !important;
    border-color: var(--ea-pink) !important;
    padding: 6px 9px 6px 9px !important;
    margin-bottom: 10px;
    border-radius: var(--radius-md) !important;
}

button.gpnf-add-entry:hover, .edit-button:hover, .delete-button:hover {
    color: var(--ea-white) !important;
    background-color: var(--ea-pink) !important;
    border-style: solid !important;
    border-width: 1px !important;
    text-decoration: none !important;
    border-color: var(--ea-pink) !important;
    transition: all 0.5s !important;
    border-radius: var(--radius-md) !important;
}

.delete-button {
    font-family: var(--font-title);
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    text-transform: uppercase;
    color: var(--ea-red) !important;
    background-color: var(--ea-white);
    border-style: solid !important;
    border-width: 1px !important;
    border-color: var(--ea-red) !important;
    padding: 6px 9px 6px 9px !important;
    margin-bottom: 10px;
    border-radius: var(--radius-md) !important;
}

.delete-button:hover {
    color: var(--ea-white) !important;
    background-color: var(--ea-red) !important;
    border-style: solid !important;
    border-width: 1px !important;
    text-decoration: none !important;
    border-color: var(--ea-red) !important;
    transition: all 0.5s !important;
    border-radius: var(--radius-md) !important;
}

.gv-widget-search .gv-search-box.gv-search-box-submit .gv-search-button:not(.gv-template-table:has(.gv-container.ea-v2) *) {
    font-family: var(--font-title);
    font-size: 12px !important;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--ea-black) !important;
    background-color: var(--ea-white);
    border-style: solid;
    border-width: 1px;
    border-color: var(--ea-black) !important;
    border-radius: 0px 0px 0px 0px;
    padding: 4px 8px 4px 8px;
    margin-bottom: 10px;
    border-radius: var(--radius-md) !important;
}

.gv-widget-search .gv-search-box.gv-search-box-submit .gv-search-button:not(.gv-template-table:has(.gv-container.ea-v2) *):hover {
    color: var(--ea-white) !important;
    background-color: var(--ea-black) !important;
    border-style: solid;
    border-width: 1px;
    border-color: var(--ea-black) !important;
    transition: all 0.5s;
    border-radius: var(--radius-md) !important;
}

.gform_footer .gform_button.button, .gform_wrapper.gravity-theme .gform_page_footer .gform_button.button {
    width: 100%;
    margin-top: 20px;
    padding: 16px;
    font-size: 24px !important;
    border: none;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: var(--ea-white);
    background-image: linear-gradient(to right, var(--ea-pink) 0%, var(--ea-pink-dark) 100%);
    text-align: center;
    background-position: left center;
    border-radius: var(--radius-md) !important;
}

.gform_footer .gform_button.button:hover, .gform_wrapper.gravity-theme .gform_page_footer .gform_button.button:hover {
    background-position: right center;
    transform: scale(1.05);
    box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
    border-radius: var(--radius-md) !important;
}

button.tingle-btn.tingle-btn--default.gpnf-btn-cancel, .gform_previous_button.button, .gv-button-cancel, a.gv-button-cancel, a.button.gv-search-clear:not(.gv-template-table:has(.gv-container.ea-v2) *) {
    font-family: var(--font-title);
    font-weight: 600 !important;
    text-transform: uppercase;
    color: var(--ea-gray-light) !important;
    background-color: var(--ea-white);
    border-style: solid !important;
    border-width: 1px !important;
    border-color: var(--ea-gray-light) !important;
    border-radius: 0px 0px 0px 0px;
    padding: 4px 8px 4px 8px !important;
    margin-top: 10px;
    border-radius: var(--radius-md) !important;
}

button.tingle-btn.tingle-btn--default.gpnf-btn-cancel:hover, .gform_previous_button.button:hover, .gv-button-cancel:hover, a.gv-button-cancel:hover, a.button.gv-search-clear:not(.gv-template-table:has(.gv-container.ea-v2) *):hover {
    color: var(--ea-white) !important;
    background-color: var(--ea-gray-light) !important;
    border-style: solid !important;
    border-width: 1px !important;
    border-color: var(--ea-gray-light) !important;
    transition: all 0.5s;
    text-transform: uppercase;
    padding: 4px 8px 4px 8px !important;
    border-radius: var(--radius-md) !important;
}

button.tingle-btn.tingle-btn--primary.gpnf-btn-submit, .gform_next_button.button {
    font-family: var(--font-title);
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: var(--ea-pink) !important;
    background-color: var(--ea-white) !important;
    border-style: solid !important;
    border-width: 1px !important;
    border-color: var(--ea-pink) !important;
    border-radius: 0px 0px 0px 0px;
    padding: 4px 8px 4px 8px !important;
    border-radius: var(--radius-md) !important;
}

button.tingle-btn.tingle-btn--danger.gpnf-btn-delete, .gv-button-delete, a.gv-button-delete {
    font-family: var(--font-title);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ea-red);
    background-color: var(--ea-white);
    border-style: solid;
    border-width: 1px;
    border-color: var(--ea-red);
    border-radius: 0px 0px 0px 0px;
    padding: 4px 8px 4px 8px !important;
    border-radius: var(--radius-md) !important;
}

button.tingle-btn.tingle-btn--danger.gpnf-btn-delete:hover, .gv-button-delete:hover, a.gv-button-delete:hover {
    background-color: var(--ea-red);
    color: var(--ea-white);
    transition: all 0.5s;
    border-width: 1px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: var(--radius-md) !important;
}

button.tingle-btn.tingle-btn--primary.gpnf-btn-submit:hover, button.tingle-btn.tingle-btn--danger, button.tingle-btn.tingle-btn--danger:hover, .gform_next_button.button:hover {
    background-color: var(--ea-pink) !important;
    color: var(--ea-white) !important;
    transition: all 0.5s !important;
    border-width: 1px !important;
    font-weight: 700 !important;
    border-radius: var(--radius-md) !important;
}

.tingle-modal-box {
    background-color: var(--ea-white) !important;
    width: 75% !important;
    border-radius: var(--radius-xl);
}

.gv-widget-search .gv-search-box.gv-search-date input, .gv-widget-search .gv-search-box.gv-search-number input {
    margin-bottom: 0px;
    border-radius: var(--radius-md) !important;
}

.tingle-modal {
    background: rgba(0,0,0,.65) !important;
    font-size: 80% !important;
}

.gpnf-modal .gpnf-modal-header {
    background: var(--ea-black) !important;
    font-family: var(--font-title);
    font-weight: 800;
    color: var(--ea-white);
    font-size: 18px;
    text-transform: uppercase;
}

h3.gsection_title {
    font-family: var(--font-title);
    font-weight: 800;
    color: var(--ea-black);
    font-size: 24px;
    text-transform: uppercase;
    margin-top: 40px;
}

div.gchoice {
    display: inline-block !important;
    margin: 0px 10px 10px 0px;
    padding: 0px;
}

form input[type="checkbox"] + label, form input[type="radio"] + label {
    color: #B8B8B8 !important;
    width: 100% !important;
    max-width: none !important;
    border-radius: var(--radius-md) !important;
}

.gform_wrapper.gravity-theme .gfield-choice-input+label {
    width: 100% !important;
    max-width: 800px !important;
    line-height: 1.5em;
    border-radius: var(--radius-md) !important;
}

.gform_wrapper.gravity-theme .gfield-choice-input {
    display: none !important;
}

form input[type="checkbox"] + label:before, form input[type="checkbox"] + label:after, form input[type="radio"] + label:before, form input[type="radio"] + label:after {
    content: '' !important;
    display: none !important;
    top: 0px;
    left: 0;
    height: 0px;
    width: 0px;
    border: 0px;
    border-radius: var(--radius-md) !important;
}

form input[type="checkbox"], form input[type="radio"] {
    display: none !important;
}

form input[type="checkbox"] + label, form input[type="radio"] + label {
    border: 1px solid transparent;
    width: 100% !important;
    background-color: var(--ea-gray-bg-light) !important;
    padding: 10px 15px 10px 15px !important;
    transition: all 0.5s !important;
    font-weight: 750 !important;
    border-radius: var(--radius-md) !important;
}

.single-offres_emploi form input[type="checkbox"] + label, form input[type="radio"] + label {
}

form input[type="checkbox"] + label:hover, form input[type="radio"] + label:hover {
    border: 1px solid transparent !important;
    width: 100% !important;
    background-color: #B3B3B3 !important;
    transition: all 0.5s !important;
    color: var(--ea-white) !important;
    font-weight: 750 !important;
    transform: scale(1.05) !important;
    border-radius: var(--radius-md) !important;
}

form input[type="checkbox"]:checked + label, form input[type="radio"]:checked + label {
    border: 1px solid transparent !important;
    width: 100% !important;
    background-color: var(--ea-pink) !important;
    color: var(--ea-white) !important;
    transition: all 0.5s !important;
    font-weight: 750 !important;
    border-radius: var(--radius-md) !important;
}

.gfield_checkbox button {
    font-size: 15px !important;
    border: 1px solid var(--ea-pink) !important;
    font-weight: 600 !important;
    padding: 10px !important;
    border-radius: var(--radius-md) !important;
}

.gform_wrapper .gform_body .gform_fields .selectize-input, div.gv-search-box.gv-search-field-text select {
    border: none !important;
    background-color: var(--ea-gray-input) !important;
    border-radius: 0px !important;
    box-shadow: none !important;
    background-image: none !important;
    font-weight: 500 !important;
    border-radius: var(--radius-md) !important;
}

/* Panneau déroulant Selectize (sélecteur "Client" du formulaire Machine à
   contrats, GP Populate Anything) : thème par défaut de la librairie
   (Helvetica, radius 4px, surbrillance bleue #0081C2) jamais restylé,
   contrairement à la boîte fermée ci-dessus. Retour Mathieu 22/07/2026.
   Pas scopé au popup : Selectize est utilisé par tout select "enhanced"
   de Gravity Forms sur le site, même logique que la règle ci-dessus. */
.selectize-dropdown {
    font-family: var(--font-ui, 'Montserrat', sans-serif) !important;
    border: 1px solid var(--ea-gray-border, #ddd) !important;
    border-radius: var(--radius-md, 12px) !important;
    box-shadow: 0 8px 24px rgb(0 0 0 / .12) !important;
    overflow: hidden;
    margin-top: 4px;
}
.selectize-dropdown-content {
    padding: 4px;
}
.selectize-dropdown-content .option {
    font-size: 13.5px;
    padding: 9px 12px;
    border-radius: var(--radius-sm, 8px);
}
.selectize-dropdown-content .option.active {
    background-color: var(--ea-pink-light, #ffe0ec) !important;
    color: var(--ea-dark, #171717) !important;
}
.selectize-dropdown-content .option:hover {
    background-color: var(--ea-gray-bg-light, #F6F6F6);
}

.gv-search-box-links {
    margin: 8px 0px 8px 0px !important;
    color: var(--ea-black) !important;
}

.gv-search-box-links a {
    background-color: var(--ea-white) !important;
    color: var(--ea-black);
    padding: 4px;
}

.gv-search-box-links .active, .gv-search-box-links a:hover {
    background-color: var(--ea-black) !important;
    color: var(--ea-white);
    font-weight: bold;
    padding: 4px;
}

.gv-search-box-links #text {
    display: none !important;
}

form input[type="text"]:not(.gv-template-table:has(.gv-container.ea-v2) *), form input[type="date"]:not(.gv-template-table:has(.gv-container.ea-v2) *), form input[type="email"]:not(.gv-template-table:has(.gv-container.ea-v2) *), form input[type="number"]:not(.gv-template-table:has(.gv-container.ea-v2) *), form input[type="password"]:not(.gv-template-table:has(.gv-container.ea-v2) *), form input[type="search"]:not(.gv-template-table:has(.gv-container.ea-v2) *), form input[type="tel"]:not(.gv-template-table:has(.gv-container.ea-v2) *), form input[type="url"]:not(.gv-template-table:has(.gv-container.ea-v2) *), form select:not(.gv-template-table:has(.gv-container.ea-v2) *), form textarea:not(.gv-template-table:has(.gv-container.ea-v2) *), .acf-form .acf-field input[type="text"], .acf-form .acf-field input[type="date"], .acf-form .acf-field input[type="email"], .acf-form .acf-field input[type="number"], .acf-form .acf-field input[type="password"], .acf-form .acf-field input[type="search"], .acf-form .acf-field input[type="tel"], .acf-form .acf-field input[type="url"], .acf-form .acf-field select, .acf-form .acf-field textarea {
    border: none !important;
    background-color: var(--ea-gray-input) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
    background-image: none !important;
    font-weight: 500 !important;
    font-size: 12px;
    border-radius: var(--radius-md) !important;
}

.single-offres_emploi form input[type="text"],
.single-offres_emploi form input[type="date"],
.single-offres_emploi form input[type="email"],
.single-offres_emploi form input[type="number"],
.single-offres_emploi form input[type="password"],
.single-offres_emploi form input[type="search"],
.single-offres_emploi form input[type="tel"],
.single-offres_emploi form input[type="url"],
.single-offres_emploi form select,
.single-offres_emploi form textarea,
.page-template-nous-rejoindre form input[type="text"],
.page-template-nous-rejoindre form input[type="date"],
.page-template-nous-rejoindre form input[type="email"],
.page-template-nous-rejoindre form input[type="number"],
.page-template-nous-rejoindre form input[type="password"],
.page-template-nous-rejoindre form input[type="search"],
.page-template-nous-rejoindre form input[type="tel"],
.page-template-nous-rejoindre form input[type="url"],
.page-template-nous-rejoindre form select,
.page-template-nous-rejoindre form textarea,
.single-offres_emploi .acf-form .acf-field input[type="text"],
.single-offres_emploi .acf-form .acf-field input[type="date"],
.single-offres_emploi .acf-form .acf-field input[type="email"],
.acf-form .acf-field input[type="number"],
.single-offres_emploi .acf-form .acf-field input[type="password"],
.single-offres_emploi .acf-form .acf-field input[type="search"],
.single-offres_emploi .acf-form .acf-field input[type="tel"],
.single-offres_emploi .acf-form .acf-field input[type="url"],
.single-offres_emploi .acf-form .acf-field select,
.acf-form .acf-field textarea {
    background-color: var(--ea-white) !important;
    border-radius: var(--radius-md) !important;
}

.elementor-toggle-item H2 {
    text-align: right;
    margin-right: 8px;
    border: none;
}

.gv-widget-search .gv-search-box.gv-search-box-submit {
    width: 30px !important;
    margin-right: 20px;
    border-radius: var(--radius-md) !important;
}

.gv-widget-search {
    align-content: flex-end;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    border-radius: var(--radius-md) !important;
}

.gform_wrapper.gravity-theme .gf_progressbar_percentage.percentbar_blue {
    background-color: var(--ea-gray-dark) !important;
    color: #fff !important;
}

.gform_wrapper.gravity-theme .gform_footer, .gform_wrapper.gravity-theme .gform_page_footer {
    margin: 40px 0 0 !important;
    padding: 16px 0 16px 0 !important;
    border-top: 1px solid #F7F7F7 !important;
}

.gform_wrapper.gravity-theme .gsection {
    border-bottom: 1px solid black !important;
    padding: 0 16px 8px 0 !important;
    margin-bottom: 20px !important;
}

.services-template-default .absent {
    color: var(--ea-red);
    font-size: 12px;
    text-align: center;
    line-height: 1.4em;
}

.services-template-default .present {
    font-size: 12px;
    text-align: center;
    line-height: 1.4em;
}

.services-template-default .present img {
    margin-right: 5px;
    display: inline-block;
}

.gv-table-view tfoot { display: none; }

.gv-datatables tfoot { display: none; }

table.gpnf-nested-entries thead, table.gv-table-view thead:not(.ea-v2 *), table.dataTable thead .sorting, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_disabled {
    text-transform: uppercase;
    color: var(--ea-black);
    font-weight: 700 !important;
    background-color: var(--ea-white);
    border-bottom: 2px solid black;
}

table.gv-table-view thead th:not(.ea-v2 *), table.dataTable.display thead th:not(.ea-v2 *) {
    text-align: center !important;
}

.gv-table-view th, .gv-table-view td, table.dataTable.display th, table.dataTable.display td {
    vertical-align: middle !important;
}

table caption + thead tr:first-child th:not(.ea-v2 *), table caption + thead tr:first-child td:not(.ea-v2 *), table caption + thead tr:first-child th:not(.ea-v2 *), table caption + thead tr:first-child td:not(.ea-v2 *), table colgroup + thead tr:first-child th:not(.ea-v2 *), table colgroup + thead tr:first-child td:not(.ea-v2 *), table colgroup + thead tr:first-child th:not(.ea-v2 *), table colgroup + thead tr:first-child td:not(.ea-v2 *), table thead:first-child tr:first-child th:not(.ea-v2 *), table thead:first-child tr:first-child td:not(.ea-v2 *), table thead:first-child tr:first-child th:not(.ea-v2 *), table thead:first-child tr:first-child td:not(.ea-v2 *) {
    background-color: var(--ea-white);
    border-bottom: 2px solid black;
    border-top: 0px solid var(--ea-white);
    border-left: 0px solid var(--ea-white);
    border-right: 0px solid var(--ea-white);
}

table.gpnf-nested-entries thead tr {
    border-bottom: 2px solid black;
}

table th:not(.ea-v2 *), table td:not(.ea-v2 *) {
    padding: 12px 8px 12px 8px;
    border: 2px solid var(--ea-white);
}

.gpnf-nested-entries td, .gpnf-nested-entries th {
    padding: 12px 8px 12px 8px !important;
    vertical-align: middle !important;
}

.gpnf-nested-entries td {
    border-bottom: 0px solid var(--ea-white) !important;
    vertical-align: middle !important;
}

.gpnf-nested-entries th {
    border-top: 0px solid var(--ea-white) !important;
    vertical-align: middle !important;
}

table tbody > tr:nth-child(odd) > td:not(.ea-v2 *), table tbody > tr:nth-child(odd) > th:not(.ea-v2 *) {
    background-color: #F7F7F7;
}

table td:nth-child(1):not(.ea-v2 *) {
    font-weight: bold;
}

.gpnf-nested-entries {
    border-top: 0px solid var(--ea-white);
}

div.gv-search-box.gv-search-field-select label:not(.gv-template-table:has(.gv-container.ea-v2) *), div.gv-widget-search.gv-search-box.gv-search-field-search_all label:not(.gv-template-table:has(.gv-container.ea-v2) *), div.gv-search-box.gv-search-date.gv-search-date-range label:not(.gv-template-table:has(.gv-container.ea-v2) *) {
    color: var(--ea-black) !important;
    font-weight: 400;
    font-size: 12px;
}

.signe, .c-resolu {
    color: var(--ea-white) !important;
    background-color: var(--ea-green) !important;
    padding: 3px 5px 3px 5px;
    font-weight: 600;
    text-transform: uppercase;
    width: 100%;
    text-align: center;
    border-radius: var(--radius-sm) !important;
}

.attente, .a-attente {
    color: var(--ea-white) !important;
    background-color: var(--ea-gray-mid) !important;
    padding: 3px 5px 3px 5px;
    font-weight: 600;
    text-transform: uppercase;
    width: 100%;
    text-align: center;
    border-radius: var(--radius-sm) !important;
}

.pause, .b-enpause {
    background-color: var(--ea-white) !important;
    border: 1px solid var(--ea-gray-mid) !important;
    color: var(--ea-gray-mid) !important;
    padding: 3px 5px 3px 5px;
    font-weight: 600;
    text-transform: uppercase;
    width: 100%;
    text-align: center;
    border-radius: var(--radius-sm) !important;
}

.annule {
    color: var(--ea-red) !important;
    font-weight: 600;
    text-transform: uppercase;
    width: 100%;
    text-align: center;
    border-radius: var(--radius-sm) !important;
}

.rejete, .d-refuse {
    color: var(--ea-white) !important;
    background-color: var(--ea-red) !important;
    padding: 3px 5px 3px 5px;
    font-weight: 600;
    text-transform: uppercase;
    width: 100%;
    text-align: center;
    border-radius: var(--radius-sm) !important;
}

.envoye, .cadreorange1, .b-encours {
    color: var(--ea-white) !important;
    background-color: var(--ea-orange) !important;
    padding: 3px 5px 3px 5px;
    font-weight: 600;
    text-transform: uppercase;
    width: 100%;
    text-align: center;
    border-radius: var(--radius-sm) !important;
}

.cadreorange2 {
    color: var(--ea-orange) !important;
    background-color: var(--ea-white) !important;
    padding: 3px 5px 3px 5px;
    font-weight: 600;
    text-transform: uppercase;
    width: 100% !important;
    text-align: center;
    border: 1px solid var(--ea-orange);
    border-radius: var(--radius-sm) !important;
}

.envoye2 a {
    color: var(--ea-white) !important;
    background-color: var(--ea-orange) !important;
    padding: 3px 5px 3px 5px;
    font-weight: 600;
    text-transform: uppercase;
    width: 100%;
    text-align: center;
    border-radius: var(--radius-sm) !important;
}

.envoye2 a:hover {
    font-weight: bold;
    background-color: var(--ea-white) !important;
    color: var(--ea-orange) !important;
    padding: 2px 4px 2px 4px;
    transition: all 0.5s;
    border: 1px solid var(--ea-orange);
    text-transform: uppercase;
    width: 100%;
    text-align: center;
    border-radius: var(--radius-sm) !important;
}

.mce-btn button {
    padding: 4px 6px;
    font-size: 14px;
    line-height: 20px;
    *line-height: 16px;
    cursor: pointer;
    color: #595959;
    text-align: center;
    overflow: visible;
    -webkit-appearance: none;
    border-style: solid;
    border-width: 1px;
    border-color: #ccc;
    border-radius: var(--radius-md) !important;
}

.service-extrait a {
    background-color: var(--ea-white);
}

.service-extrait {
    display: inline-flex;
}
   
div.gv-grid-col-1-2.gv-left a:hover {
    text-transform: uppercase;
    background-color: var(--ea-pink);
    color: var(--ea-white);
    padding: 2px 4px 2px 4px;
    transition: all 0.5s;
}

.cacheelement {
    display: none;
}

.bold:not(.ea-v2 *) {
    font-weight: bold;
}

.tingle-modal {
    z-index: 999999 !important;
}

.gv-field-15-date_created {
    text-transform: uppercase;
    text-align: center;
}

.rose:not(.ea-v2 *) {
    font-weight: bold;
    background-color: var(--ea-pink) !important;
    color: var(--ea-white);
    padding: 2px 4px 2px 4px;
    transition: all 0.5s;
    border: 1px solid var(--ea-pink);
    text-transform: uppercase;
    text-align: center;
    border-radius: var(--radius-sm) !important;
}

.traiter a:not(.ea-v2 *), .traiterrose a {
    font-weight: bold;
    background-color: var(--ea-white) !important;
    color: var(--ea-pink) !important;
    padding: 2px 4px 2px 4px;
    transition: all 0.5s;
    border: 1px solid var(--ea-pink);
    text-transform: uppercase;
    width: 100%;
    border-radius: var(--radius-sm) !important;
}

a.traiter:not(.ea-v2 *) {
    font-weight: 500;
    background-color: var(--ea-white) !important;
    color: var(--ea-pink);
    padding: 2px 4px 2px 4px;
    transition: all 0.5s;
    border: 1px solid var(--ea-pink);
    text-transform: uppercase;
    width: 100%;
    border-radius: var(--radius-sm) !important;
}

a.traiter:not(.ea-v2 *):hover {
    font-weight: bold;
    background-color: var(--ea-pink) !important;
    color: var(--ea-white);
    padding: 2px 4px 2px 4px;
    transition: all 0.5s;
    border: 1px solid var(--ea-pink);
    text-transform: uppercase;
    width: 100%;
    border-radius: var(--radius-sm) !important;
}

.traiterrose {
    font-weight: bold;
    background-color: var(--ea-white) !important;
    color: var(--ea-pink);
    padding: 2px 4px 2px 4px;
    transition: all 0.5s;
    border: 1px solid var(--ea-pink);
    text-transform: uppercase;
    width: 100%;
    text-align: center;
    border-radius: var(--radius-sm) !important;
}

.traiter a:not(.ea-v2 *):hover, .traiterrose:hover {
    font-weight: bold;
    background-color: var(--ea-pink) !important;
    padding: 2px 4px 2px 4px;
    color: var(--ea-white) !important;
    transition: all 0.5s;
    border: 1px solid var(--ea-pink);
    text-transform: uppercase;
    text-align: center;
    width: 100%;
    border-radius: var(--radius-sm) !important;
}

.traiterviolet:hover, .traiterviolet a:hover {
    font-weight: bold;
    background-color: var(--ea-dark) !important;
    color: var(--ea-white) !important;
    padding: 2px 4px 2px 4px;
    transition: all 0.5s;
    border: 1px solid var(--ea-dark);
    text-transform: uppercase;
    text-align: center;
    width: 100%;
    border-radius: var(--radius-sm) !important;
}

.traiterviolet, .traiterviolet a {
    font-weight: bold;
    background-color: var(--ea-white) !important;
    color: var(--ea-dark) !important;
    padding: 2px 4px 2px 4px;
    transition: all 0.5s;
    text-transform: uppercase;
    width: 100%;
    border: 1px solid var(--ea-dark) !important;
    text-align: center;
    border-radius: var(--radius-sm) !important;
}

.traiterorange:hover, .traiterorange a:hover {
    font-weight: bold;
    background-color: var(--ea-orange) !important;
    color: var(--ea-white) !important;
    padding: 2px 4px 2px 4px;
    transition: all 0.5s;
    border: 1px solid var(--ea-orange);
    text-transform: uppercase;
    text-align: center;
    width: 100%;
    border-radius: var(--radius-sm) !important;
}

.traiterorange, .traiterorange a {
    font-weight: bold;
    background-color: var(--ea-white) !important;
    color: var(--ea-orange) !important;
    padding: 2px 4px 2px 4px;
    transition: all 0.5s;
    text-transform: uppercase;
    width: 100%;
    border: 1px solid var(--ea-orange) !important;
    text-align: center;
    border-radius: var(--radius-sm) !important;
}

.traitervert:hover, .traitervert a:hover {
    font-weight: bold;
    background-color: var(--ea-green) !important;
    color: var(--ea-white) !important;
    padding: 2px 4px 2px 4px;
    transition: all 0.5s;
    border: 1px solid var(--ea-green);
    text-transform: uppercase;
    text-align: center;
    width: 100%;
    border-radius: var(--radius-sm) !important;
}

.traitervert, .traitervert a {
    font-weight: bold;
    background-color: var(--ea-white) !important;
    color: var(--ea-green) !important;
    padding: 2px 4px 2px 4px;
    transition: all 0.5s;
    text-transform: uppercase;
    width: 100%;
    border: 1px solid var(--ea-green) !important;
    text-align: center;
    border-radius: var(--radius-sm) !important;
}

.gris:not(.ea-v2 *) {
    color: #b7b7b7;
}

.gris a:not(.ea-v2 *) {
    color: #b7b7b7;
}

.traitergris a, a.traitergris, .traitergris {
    font-weight: bold;
    background-color: var(--ea-white) !important;
    color: #b7b7b7 !important;
    padding: 2px 4px 2px 4px;
    transition: all 0.5s;
    border: 1px solid #b7b7b7;
    text-transform: uppercase;
    width: 100%;
    border-radius: var(--radius-sm) !important;
}

.traitergris:hover, .traitergris a:hover, a.traitergris:hover, div.gv-grid-col-1-2.gv-left a.traitergris:hover {
    font-weight: bold;
    background-color: #b7b7b7 !important;
    padding: 2px 4px 2px 4px;
    color: var(--ea-white) !important;
    transition: all 0.5s;
    border: 1px solid #b7b7b7;
    text-transform: uppercase;
    text-align: center;
    width: 100%;
    border-radius: var(--radius-sm) !important;
}

.pret {
    font-weight: bold !important;
    background-color: var(--ea-white) !important;
    color: var(--ea-pink) !important;
    padding: 2px 4px 2px 4px !important;
    border: 1px solid var(--ea-pink) !important;
    text-transform: uppercase !important;
    text-align: center !important;
    border-radius: var(--radius-sm) !important;
}

h3 .pret {
    font-weight: bold !important;
    background-color: var(--ea-white) !important;
    color: var(--ea-pink) !important;
    padding: 2px 4px 2px 4px !important;
    border: 1px solid var(--ea-pink) !important;
    text-transform: uppercase !important;
    text-align: center !important;
    font-size: 12px !important;
    -webkit-text-fill-color: var(--ea-pink) !important;
    margin-left: 20px !important;
    border-radius: var(--radius-sm) !important;
}

.gv-list-view-title h3 .pret {
    margin-left: 0px !important;
}

.gv-list-view-title .tag p {
    display: inline-block !important;
    background-color: #EAEAEA !important;
    color: var(--ea-black);
    border-radius: var(--radius-sm) !important;
    font-size: 12px !important;
}

.gv-list-view-title .tag {
    display: inline-block !important;
    background-color: none;
    margin-bottom: 10px !important;
}

h3 > span.pret {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    align-content: center;
}

.abandon {
    font-weight: bold;
    background-color: var(--ea-white) !important;
    color: var(--ea-red);
    padding: 2px 4px 2px 4px;
    border: 1px solid var(--ea-red);
    text-transform: uppercase;
    text-align: center;
    border-radius: var(--radius-sm) !important;
}

.petit:not(.ea-v2 *) {
    font-size: 0.8em !important;
}

h4.petitgris {
    font-size: 0.8em;
    text-align: center;
    color: #b7b7b7;
    margin: 10px 0 10px 0;
}

h4 p {
    font-weight: normal !important;
}

.notes {
    padding: 0px;
    background-color: #FFFEF3 !important;
    font-size: 13px !important;
    font-weight: normal !important;
    border-radius: 12px;
}

.notes .gv-field-label {
    padding: 14px 20px 10px 20px;
    width: 100%;
    display: inline-block;
    background-color: #FFFDDC;
    font-size: 16px !important;
    font-weight: bold !important;
    border-bottom: 1px solid #F1EED3;
}

.notesjaune {
    background-color: #FFFDDC;
}

.notes p {
    padding: 6px 20px 10px 20px;
}

tr.notes {
    font-size: 1em !important;
}

tr.notes .gv-field-label {
    padding: 0px;
    width: 100%;
    display: inline-block;
    background-color: transparent !important;
    font-size: 1em !important;
    font-weight: bold !important;
    border-bottom: none;
}

.notesjaune {
    background-color: #FFFDDC;
}

tr.notes th, tr.notes:nth-child(odd) > th {
    background-color: #FFFDDC;
}

tr.notes:nth-child(odd) > td {
    background-color: #FFFEF3 !important;
}

tr.notes p {
    padding: 0px;
}

tr.notes div {
    padding: 0px !important;
}

.warning, .gform_validation_errors, .validation_message {
    padding: 14px;
    width: 100%;
    display: inline-block;
    color: red !important;
    border: 1px solid red !important;
    border-radius: var(--radius-md);
}

.warning {
    background-color: var(--ea-red-bg);
    font-size: 16px !important;
    font-weight: bold !important;
}

.gform_validation_errors>h2, .gform_validation_errors>ol, .gform_validation_errors>ol a, .gform_validation_errors>ol li {
    /* font-size: 16px !important; */
    color: red !important;
    font-weight: bold !important;
}

.itsok {
    padding: 14px;
    width: 100%;
    display: inline-block;
    background-color: #DDFDE4;
    font-size: 16px !important;
    color: green;
    font-weight: normal !important;
    border: 1px solid green;
    text-align: justify;
    border-radius: var(--radius-md);
}

.gv-container-29983 .itsok {
    padding: 12px;
    font-weight: 700 !important;
    border: 1.5px solid green;
    text-align: center;
    font-size: 11px !important;
}

.gv-container-29983 h3 span.warning {
    padding: 12px;
    font-weight: 700 !important;
    border: 1.5px solid red;
    text-align: center;
    font-size: 11px !important;
    color: red !important;
    -webkit-text-fill-color: red;
}

.gv-container-29983 span.warning {
    padding: 12px;
    font-weight: 700 !important;
    border: 1.5px solid red;
    text-align: center;
    font-size: 11px !important;
    color: red !important;
    -webkit-text-fill-color: red;
}

.rappelnormal {
    padding: 14px;
    width: 100%;
    display: inline-block;
    background-color: var(--ea-white);
    font-size: 16px !important;
    font-weight: normal !important;
    border: 1px solid #D1B4DE;
    text-align: justify;
    border-radius: var(--radius-md) !important;
}

.hidden, .publish {
    display: none !important;
}

.gfield h1 {
    color: var(--ea-pink);
    text-transform: uppercase;
    font-size: 40px;
    margin: 20px 0px 20px 0px;
    font-weight: 900;
}

.gfield p {
    font-size: 0.9em;
    font-weight: 600;
}

.postid-22749 .title-md,
.postid-22749 .title-md-alt,
.postid-22749 .cms h3,
.postid-22749 .cms h4 {
    font-size: 33px;
}

h4.dateevent {
    font-weight: 700 !important;
    margin: 25px 0 0 0;
    color: var(--ea-black);
    text-align: center;
    text-transform: capitalize;
    font-size: 22px;
}

h4.heureevent {
    font-weight: 600 !important;
    margin: 5px 0 15px 0;
    color: var(--ea-black);
    text-align: center;
    text-transform: capitalize;
}

h4.lieuevent {
    font-size: 14px;
    font-weight: 400 !important;
    margin: 15px 0 15px 0;
    color: var(--ea-black);
    text-align: center;
}

.inscrits {
    font-size: 14px;
    font-weight: 400;
    margin: -10px 0 15px 0;
    color: var(--ea-orange);
    text-align: center;
}

.orange {
    color: var(--ea-orange) !important;
}

.vert {
    color: var(--ea-green) !important;
}

.rouge {
    color: var(--ea-red) !important;
}

.texterose {
    color: var(--ea-pink) !important;
}

h4.traiter:not(.ea-v2 *) {
    text-align: center;
    border-radius: var(--radius-md) !important;
}

h4.traiter a:not(.ea-v2 *) {
    font-weight: bold;
    background-color: var(--ea-white) !important;
    color: var(--ea-pink);
    padding: 6px 12px 6px 12px;
    transition: all 0.5s;
    border: 1px solid var(--ea-pink);
    text-transform: uppercase;
    text-align: center;
    border-radius: var(--radius-md) !important;
}

h4.traiter a:not(.ea-v2 *):hover {
    font-weight: bold;
    background-color: var(--ea-pink) !important;
    color: var(--ea-white);
    transition: all 0.5s;
    padding: 6px 12px 6px 12px;
    border: 1px solid var(--ea-pink);
    text-transform: uppercase;
    width: 100%;
    text-align: center;
    border-radius: var(--radius-md) !important;
}

.newsletter-form {}

.newsletter-form .gform_wrapper.gravity-theme .gfield input.small,
.newsletter-form .gform_wrapper.gravity-theme .gfield select.small {
    width: 100% !important;
}

.newsletter-form .gform_wrapper.gravity-theme .gform_fields { margin: 0; }

.newsletter-form #gform_wrapper_3.gform_wrapper.gravity-theme .gfield.col-6 {
    -ms-grid-column-span: 6;
    grid-column: span 6;
}

.newsletter-form #gform_wrapper_3.gform_wrapper.gravity-theme .gfield.col-6 input {
    width: 100% !important;
}

.marge80 {
    margin: 80px 0px 0px 0px;
}

.expire {
    color: #a7a7a7 !important;
}

.gv-list-view-title h3 .expire {
    background-image: none;
    background: none !important;
    margin-top: 15px;
}

h3.expire {
    color: #a7a7a7 !important;
    background-image: none !important;
    margin-top: 15px;
    background: none !important;
}

h3.gv-field-50-custom {
    display: none;
}

.gv-list-view-title h3 .attente {
    background-image: none;
    color: var(--ea-white);
    -webkit-text-fill-color: var(--ea-white) !important;
    font-size: 17px;
}

#gv_list_63237 .gv-list-view-title br {
    display: none;
    margin: 0.2em 0 0.2em 0;
}

.gv-list-view-subtitle br {
    display: block;
}

ul.bulleted:not(.ea-v2 *) {
    list-style-type: disc;
    margin: 0;
    list-style-position: inside;
    padding: 0px 0px 0px 0px;
}

#publishing-action {
    width: 100%;
}

.croppedimg {
    width: 210px !important; 
    max-height: 210px !important; 
    object-fit: cover !important;
    border: none;
}

.fitimg {
    width: 210px !important; 
    height: 210px !important; 
    object-fit: contain !important;
    border: none;
    margin-bottom: 20px;
}

.tags ul:not(.ea-v2 *) {
    list-style: none;
    padding: 0;
    margin-top: 0px;
    margin-right: 8px;
}

.tags li:not(.ea-v2 *) {
    display: inline-block !important;
    background-color: #EAEAEA !important;
    padding: 3px 5px 3px 5px !important;
    margin: 2px 3px 2px 3px !important;
    border-radius: var(--radius-xs) !important;
    font-size: 11px !important;
    font-weight: 500;
}

.tags li::before {
    content: none !important;
}

.tagsblanc ul {
    list-style: none;
    padding: 0;
    margin-top: 0px;
    margin-right: 8px;
}

.tags.bold li {
    font-weight: 800 !important;
}

.tag.bold {
    font-weight: 800 !important;
}

.tag.expire {
    color: var(--ea-gray-mid) !important;
}

.tag.bold.center {
    text-align: center;
}

.poles-meta .tag {
    font-weight: 800 !important;
    color: #212529;
    font-style: normal;
}

.tagsblanc li {
    display: inline-block !important;
    background-color: var(--ea-white) !important;
    padding: 3px 5px 3px 5px !important;
    margin: 2px 3px 2px 3px !important;
    border-radius: var(--radius-xs) !important;
    font-size: 11px !important;
    font-weight: 500;
}

.tagsblanc li::before {
    content: none !important;
}

.gv-list-view-subtitle .violet li {
    color: var(--ea-dark) !important;
}

.gv-list-view-subtitle .orange li {
    color: var(--ea-orange) !important;
}

.gv-list-view-subtitle .vert li {
    color: var(--ea-green) !important;
}

.titretableau {
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 800;
}

.nomclient {
    padding: 10px 0px 15px 0px !important;
}

.containerprogres {
    width: 100%;
    position: relative;
    margin-top: 10px;
    text-align: center;
}

.progressbar ul, ul.progressbar {
    list-style: none !important;
    padding-inline-start: 0px !important;
    display: inline-block;
}

.progressbar li {
    width: 17%;
    position: relative;
    text-align: center;
}

.progressbar li {
    width: 25px;
    height: 25px;
    border: 1px solid #bebebe;
    float: left;
    margin: 0 0px 10px 3px;
    border-radius: 50%;
    line-height: 21px;
    background: var(--ea-white);
    color: #bebebe;
    text-align: center;
    font-weight: bold;
}

.progressbar li.active1 {
    border-color: var(--ea-dark);
    background: var(--ea-dark);
    color: var(--ea-white);
}

.progressbar li.active2 {
    border-color: var(--ea-orange);
    background: var(--ea-orange);
    color: var(--ea-white);
}

.progressbar li.active3 {
    border-color: var(--ea-green);
    background: var(--ea-green);
    color: var(--ea-white);
}

.etape1 {
    color: var(--ea-dark);
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
}

.etape2 {
    color: var(--ea-orange);
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
}

.etape3 {
    color: var(--ea-green);
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
}

.etape4 {
    color: var(--ea-pink);
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
}

.progressbar li.active4 {
    border-color: var(--ea-pink);
    background: var(--ea-pink);
    color: var(--ea-white);
}

.minus {
    font-size: 0.6em !important;
}

.services-template-default .gv-container-24004 h4 {
    font-size: 18px;
    margin: 10px 0px 5px 0px;
}

.tagscard {
    width: 30%;
    float: right;
    text-align: right;
    margin-top: -15px;
}

.tagscard ul {
    list-style: none;
    padding: 0;
    margin-top: 0px;
    margin-right: 8px;
    margin-bottom: 8px;
}

.tagscard li {
    display: inline-block !important;
    background-color: #EFEFEF !important;
    padding: 5px 8px 5px 8px !important;
    margin: 2px 3px 2px 3px !important;
    border-radius: var(--radius-sm) !important;
    font-size: 13px !important;
    font-weight: 800;
    color: var(--ea-black) !important;
}

.tagscard li::before {
    content: none !important;
}

.petitmoyen {
    font-size: 1em !important;
}

.col1fiche {
    width: 30% !important;
    float: left !important;
    margin-right: 15px;
    display: inline-block !important;
    margin-bottom: 20px;
    font-size: 16px !important;
}

.col1fiche .gv-field-label {
    font-size: 17px !important;
    font-weight: 800;
    color: var(--ea-pink);
}

.col1fiche img {
    max-width: 250px;
    width: 100%;
    margin-right: 10px;
}

.col2fiche {
    width: 100% !important;
    margin-bottom: 20px;
    font-size: 14px !important;
    background-color: #F7F7F7;
    padding: 15px 15px 5px 15px;
}

.col2ficheblanc {
    width: 100% !important;
    margin-bottom: 20px;
    font-size: 14px !important;
    background-color: var(--ea-white);
    padding: 15px 15px 5px 15px;
}

.col2ficheblanc li {
    font-size: 13px !important;
    margin: 10px 15px 10px 0px !important;
    padding: 8px 12px 8px 12px !important;
}

.col2fiche .gv-field-label, .col2ficheblanc .gv-field-label {
    font-size: 16px !important;
    font-weight: 800;
    color: var(--ea-pink);
}

.img-full {
    max-width: 100%;
    height: auto;
}

li .page-numbers:not(.gv-template-table:has(.gv-container.ea-v2) *) {
    padding: 0.15em 0.5em !important;
}

.page-numbers li .current:not(.gv-template-table:has(.gv-container.ea-v2) *), a.paginate_button.current, .paginate_button.current {
    background-color: black !important;
    color: var(--ea-white) !important;
    font-weight: bold !important;
    border: none !important;
    border-radius: var(--radius-sm);
}

.page-numbers li :not(.gv-template-table:has(.gv-container.ea-v2) *):hover, a.paginate_button:hover, .dataTables_wrapper .dataTables_paginate .paginate_button:hover, .paginate_button:active, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background-color: black !important;
    color: var(--ea-white) !important;
    font-weight: bold !important;
    border: none !important;
    border-radius: var(--radius-sm);
}

.page-numbers li:not(.gv-template-table:has(.gv-container.ea-v2) *), .paginate_button {
    background-color: var(--ea-white) !important;
    margin: 0px 0px 0px 4px !important;
    color: var(--ea-black) !important;
    border: none !important;
    border-radius: var(--radius-sm);
}

.page-numbers li a:not(.gv-template-table:has(.gv-container.ea-v2) *), .dataTables_paginate, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    color: var(--ea-black) !important;
    border-radius: var(--radius-sm);
}

[class*='gv-grid-col-']:not(.gv-template-table:has(.gv-container.ea-v2) *) {
    padding-right: 0em !important;
}

.gv-widget-pagination p:not(.gv-template-table:has(.gv-container.ea-v2) *) {
    color: var(--ea-black) !important;
    padding: 0.15em 0.5em !important;
}

.gv-widget-pagination {
    float: left;
}

#gv-view-26032-1 table.gv-table-view thead, #gv-view-26741-1 table.gv-table-view thead {
    color: var(--ea-green) !important;
    font-size: 14px !important;
}

.titrevert {
    color: var(--ea-green) !important;
}

table.gv-table-view thead .petit:not(.ea-v2 *), table.gv-table-view thead .minus:not(.ea-v2 *) {
    font-size: 12px !important;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #C4C4C4 !important;
    opacity: 1;
    /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #C4C4C4 !important;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: #C4C4C4 !important;
}

.gv-widget-page-size:not(.gv-template-table:has(.gv-container.ea-v2) *), .dataTables_length:not(.gv-template-table:has(.gv-container.ea-v2) *) {
    float: left;
    color: var(--ea-black) !important;
    padding: 0.15em 0.5em !important;
    margin-bottom: 10px;
}

.dataTables_info:not(.gv-template-table:has(.gv-container.ea-v2) *) {
    color: var(--ea-black) !important;
}

.dataTables_filter label:not(.gv-template-table:has(.gv-container.ea-v2) *), .gv-search-box label:not(.gv-template-table:has(.gv-container.ea-v2) *) {
    color: var(--ea-black) !important;
    font-size: 12px;
    font-weight: 400;
}

select#gv-page_size:not(.gv-template-table:has(.gv-container.ea-v2) *), .dataTables_length select:not(.gv-template-table:has(.gv-container.ea-v2) *) {
    width: 50px !important;
    float: left;
    font-size: 0.9em;
    max-height: 20px;
    padding: 0px !important;
    background-color: var(--ea-white) !important;
    color: var(--ea-black) !important;
    border: 1px solid var(--ea-white) !important;
}

select#gv-page_size:not(.gv-template-table:has(.gv-container.ea-v2) *) {
    width: 50px !important;
    float: left;
    font-size: 0.9em;
    max-height: 25px;
    min-height: 25px;
    padding: 0px 2px 0px 2px;
    background-color: var(--ea-white) !important;
    color: var(--ea-black) !important;
}

.gv-widget-page-size label {
    display: none;
}

.tag, .span-client, H3.tag {
    display: inline-block !important;
    background-color: #EAEAEA !important;
    background: #EAEAEA !important;
    padding: 3px 5px 3px 5px !important;
    margin: 2px 3px 2px 3px !important;
    border-radius: 5px !important;
    font-size: 11px !important;
    font-weight: 500;
    -webkit-background-clip: none;
    color: var(--ea-black);
}

.tag, .span-client, H3.tag {
    color: var(--ea-black) !important;
    -webkit-text-fill-color: unset !important;
    padding: 6px 6px 6px 6px !important;
    font-size: 12px;
}

H3.tag {
    font-size: 12px !important;
}

.span-client {
    font-size: 14px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    padding: 4px 8px !important;
    margin: 4px 6px 4px 0px !important;
}

.inline-edit-enable {
    display: inline-block !important;
    background-color: var(--ea-white) !important;
    color: var(--ea-black) !important;
    padding: 6px 10px 6px 10px !important;
    margin: 5px 0px 10px 0px !important;
    font-size: 12px !important;
    font-weight: bold !important;
    border: 1px solid black !important;
}

.inline-edit-enable:hover {
    background-color: black !important;
    color: var(--ea-white) !important;
    font-weight: bold !important;
}

.achatscl {
    padding: 20px !important;
    border: 1px solid var(--ea-pink) !important;
    background-color: #fdf8fb !important;
    margin-bottom: 20px;
}

.achatscl h2 {
    font-size: 30px;
    margin: 0px 0px 10px 0px;
    color: var(--ea-pink);
}

.achatscl h3 {
    font-size: 20px;
    margin: 0px 0px 10px 0px;
}

.ticketscl {
    padding: 20px !important;
    border: 1px solid #828282 !important;
    background-color: #FAFAFA !important;
    margin-bottom: 20px;
    margin-top: 40px !important;
}

.ticketscl h2 {
    font-size: 30px;
    margin: 0px 0px 10px 0px;
    color: #828282;
}

.ticketscl h3 {
    color: #828282;
    font-size: 20px;
    margin: 0px 0px 10px 0px;
}

.chartea {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(100, 1fr);
    grid-column-gap: 15px;
    grid-row-gap: 3px;
    height: 400px;
    width: 100%;
    background: #fff;
    padding: 45px 10px 0px 10px;
}

[class*="barea"] {
    border-radius: 0;
    transition: all .6s ease;
    background-color: var(--ea-blue-bg);
    border-top: 1px solid var(--ea-blue-border);
    border-right: 1px solid var(--ea-blue-border);
    border-left: 1px solid var(--ea-blue-border);
    grid-row-start: 1;
    box-sizing: border-box;
    grid-row-end: 101;
    text-align: center;
    margin-top: auto;
}

[class*="barea"] span {
    position: relative;
    top: -20px;
    color: var(--ea-blue-border);
    font-size: 12px;
    font-weight: bold;
}

[class*="barea"] label {
    position: absolute;
    width: auto;
    bottom: -23px;
    color: var(--ea-blue-border);
    font-size: 12px;
    font-weight: bold;
    margin: auto;
    left: 0;
    right: 0;
}

.lable {
    background-color: #fff;
    text-align: center;
}

.lable span {
    background-color: var(--ea-blue-bg);
    border: 1px solid var(--ea-blue-border);
    padding: 0px 20px;
    margin-right: 10px;
}

.barea {
    position: relative;
}

th.first:not(.ea-v2 *) {
    background: black !important;
    padding: 4px !important;
    text-align: center !important;
    color: var(--ea-white) !important;
    vertical-align: middle !important;
}

tr:nth-child(even) td.first:not(.ea-v2 *) {
    background: #F1F1F1 !important;
    padding: 6px !important;
    vertical-align: middle !important;
    border-bottom: 2px solid #FCFCFC !important;
}

tr:nth-child(odd) td.first:not(.ea-v2 *) {
    background: #F4F4F4 !important;
    padding: 6px !important;
    vertical-align: middle !important;
    border-bottom: 2px solid #FCFCFC !important;
}

.referent {
    margin: 20px auto 20px auto;
    border: 1px solid black;
    width: 200px;
    text-align: center !important;
    font-size: 0.9em;
    background: var(--ea-white) !important;
    border-radius: var(--radius-md);
}

.referent p {
    margin: 10px !important;
}

.elementor-col-33 .referent, .elementor-col-50 .referent {
    margin: 0px 0px 20px 0px !important;
    border: 1px solid black;
    width: 100% !important;
    text-align: center !important;
    font-size: 0.9em;
    background: var(--ea-white) !important;
}

.referent .gv-diy-view {
    padding: 5px !important;
    text-align: center !important;
}

.titrereferent {
    margin: 0px;
    background: black !important;
    padding: 5px;
    width: 100%;
    text-align: center;
    color: var(--ea-white);
    font-weight: 900;
    font-size: 1.2em;
    border-radius: var(--radius-md) var(--radius-md) 0px 0px;
}

#gform_wrapper_15 .gv-button-delete, #gform_wrapper_21 .gv-button-delete, #gform_31 .gv-button-delete, #gform_29 .gv-button-delete {
    visibility: hidden;
}

.gv-edit-entry-wrapper h2 {
    font-size: 2rem !important;
}

.gv-container-20322 .gv-grid-col-1-2 {
    width: 100%;
}

.tableclient td {
    vertical-align: middle;
    background: var(--ea-white);
    font-size: 13px;
    text-align: left;
}

.tableclient p {
    text-align: left;
}

.tableclient table {
    margin-bottom: 0px;
}

.tableclient2 table, .tableclient2 p, .tableclient2 th, .tableclient2 td {
    text-align: center;
}

.tableclient2 th {
    border-bottom: 2px solid black !important;
    color: black !important;
    vertical-align: middle !important;
}

.tableclient2 p {
    padding-right: 0px !important;
}

.tableclient th {
    background-color: var(--ea-white);
    border-bottom: 2px solid black;
    border-top: 0px solid var(--ea-white);
    border-left: 0px solid var(--ea-white);
    border-right: 0px solid var(--ea-white);
    text-transform: uppercase;
    color: black;
    vertical-align: middle;
    font-size: 13px;
}

.tableclient img {
    display: inline !important;
    margin: 0px 10px 0px 0px;
}

.tableclient p {
    font-size: 13px;
    font-weight: normal;
    margin: 0px;
    padding-right: 20px;
}

.tableclient table td:first-child {
    width: 40%;
}

.tableclient table td:first-child {
    width: auto !important;
}

.tablegererclient table {
    margin-top: 30px;
    font-size: 12px;
    text-align: right;
    width: auto;
    border: none;
    margin-right: 0px;
    margin-left: auto;
    margin-bottom: 0px;
}

.tablegererclient td {
    padding: 0px 0px 0px 10px;
    text-align: right;
    border: none;
    background-color: rgba(0, 0, 0, 0) !important;
}

.notes div {
    padding: 10px 20px 10px 20px !important;
}

.notes div:empty {
    padding: 0px !important;
}

.dashicons:not(.ea-v2 *), .dashicons-before:not(.ea-v2 *):before {
    line-height: inherit !important;
    text-decoration: inherit !important;
    font-size: inherit !important;
    text-align: center;
    transition: inherit !important;
    width: auto !important;
    margin: 0px 2px 0px 2px !important;
}

.center {
    text-align: center;
}

.gfield.h3 {
    -webkit-text-fill-color: inherit !important;
}

.single-offres_emploi .card-description ul, .loaded-offers  ul li {
    list-style: none;
}

.single-offres_emploi .card-description ul li ::before, .loaded-offers  ul li ::before {
    content: "● ";
    color: var(--ea-dark);
    text-decoration: none !important;
    line-height: inherit;
    margin: 0px 10px 0px 0px;
}

.loaded-offers  ul li ::before {
    color: var(--ea-white) !important;
}

table.gv-datatables {
    width: 100% !important;
    margin: 0 auto;
    clear: both;
    border-collapse: separate;
    border-spacing: 0;
}

table.dataTable.stripe>tbody>tr.odd>*, table.dataTable.display>tbody>tr.odd>* {
    box-shadow: none !important;
}

.important1 {
    display: inline-block !important;
    background-color: #999999 !important;
    padding: 3px 5px 3px 5px !important;
    margin: 2px 3px 2px 3px !important;
    border-radius: 5px !important;
    color: var(--ea-white);
}

.important2 {
    display: inline-block !important;
    background-color: var(--ea-blue) !important;
    padding: 3px 5px 3px 5px !important;
    margin: 2px 3px 2px 3px !important;
    border-radius: 5px !important;
    color: var(--ea-white);
}

.important3 {
    display: inline-block !important;
    background-color: #FFED36 !important;
    padding: 3px 5px 3px 5px !important;
    margin: 2px 3px 2px 3px !important;
    border-radius: 5px !important;
    color: var(--ea-white);
}

.important4 {
    display: inline-block !important;
    background-color: red !important;
    padding: 3px 5px 3px 5px !important;
    margin: 2px 3px 2px 3px !important;
    border-radius: 5px !important;
    color: var(--ea-white);
}

.gv-table-view-content th {
    text-transform: uppercase;
    padding: 10px;
    font-size: 1.05em;
}

.gv-table-view-content td {
    padding: 10px;
    font-size: 1.05em;
}

.gv-table-view-content tr.h3 {
    font-weight: 800 !important;
    background-color: var(--ea-white) !important;
}

.gv-table-view-content tr.h3:nth-child(odd) > th, .gv-table-view-content tr.h3:nth-child(odd) > td {
    background-color: var(--ea-white) !important;
}

table.gv-table-view-content {
    padding: 10px;
}

button, [type="submit"], [type="button"] {
    white-space: normal !important;
}

.gv-table-view th {
    vertical-align: top !important;
}

/* Edit */ 
.previous-link {
    margin-left: 0 !important;
    margin-bottom: 32px !important;
}

.single .site-main > .container {
    padding-top: 3rem;
    padding-left: 0;
    padding-bottom: 3rem;
    padding-right: 0;
}

.banner-user .direct-acces-overlay {
    background-color: rgba(255, 255, 255, 0.7);
}

.container-intranet .col_tools .services { background: transparent; }

.service-my-profile .identifiant-groupe,
.service-my-profile .team-direct {
    padding-top: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid #EDEBEB;
}

.service-my-profile .manager span,
.service-my-profile .team-direct span,
.service-my-profile .identifiant-groupe span {
    font-weight: 800;
    font-size: 12px;
    line-height: 14px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.service-my-profile .team-direct {}
.service-my-profile .team-direct a { color: #000; }

.service-my-profile .my-profile-header .right .fullname { line-height: initial !important; }

.single-services .page-content {
    background: none;
}

.col-12.d-block {
    display: flex;
    align-items: center;
}
.col-12.d-block .btn-reset { margin-left: 20px; }

.btn-reset { 
    margin-bottom: 0 !important;
    display: inline-block;
    padding: 10px 20px !important;
    color: var(--ea-pink) !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    background: #FFF !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    border: solid 2px #fff !important;
    border-color: var(--ea-pink) !important;
} 

.wpgb-facet-18 button {
    margin-bottom: 0 !important;
    width: 100%;
    display: inline-block;
    padding: 10px 20px !important;
    color: #FFF !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    background: var(--ea-pink) !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    border: solid 2px #fff !important;
    border-color: var(--ea-pink) !important;
}

tr:not(.ea-v2 *):hover { background-color: white !important; }

/* Min width desktop */
.banner-user .service { margin: 0; }
.single-services .page-content { padding: 0; }

/*.container-intranet .services {background: none}*/
.container-intranet .col_tools .services .service .title { margin-top: 0; }
.container-intranet .col_tools .services h2 {
    margin-bottom: 30px;
}
.services .service .service-extrait { margin-bottom: 30px; }

.service-my-profile .manager span,
.my-profile-header .team-direct,
.service-my-profile .manager a,
.service-my-profile .team-direct a {
    color: var(--ea-orange-text);
}

.tax-posts_interne_i .page-content {
    background: none;
}

.archive .posts_interne .bg {
    height: 100%;
}

.single-posts_interne article h1 {
    margin-bottom: 0;
    text-transform: uppercase; 
}

.single-posts_interne .page-content {
    padding: 5% 7% 5% 7%;
}

.single-posts_interne article .clearfix { clear: both; }

.single-posts_interne article .header-interne {
    padding: 0 40px 0 40px;
}

@media (max-width: 500px) {
    .single-posts_interne article .header-interne { padding: 0; }	
    .page-content .posts_interne .row .single-section { padding-left: 3% !important; padding-right: 3% !important; }
}

.single-posts_interne article .header-interne .attachment-post-thumbnail {
    float: right;
    height: 250px !important;
    width: auto;
    margin-left: 15px;
    margin-bottom: 15px;
}

.single-posts_interne article .poles-meta,
.single-posts_interne article .entry-meta {
    margin-top: 20px;
}

.single-posts_interne article .attachment-post-thumbnail {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: unset !important;
    border-radius: var(--radius-md);
}

.single-posts_interne article .categorie-meta,
.archive .posts_interne .categorie-meta {
    color: var(--ea-orange-text);
    font-style: italic;
}

/* Slide home */
.slide-interne .title-interne .sep_title {
    margin: 15px 0;
    height: 2px;
    width: 100%;
}

.slide-event.slide-interne .title-interne .sep_title {
    background-image: linear-gradient(90deg, var(--ea-green) 0%, var(--ea-blue) 100%);
}

.slide-other.slide-interne .title-interne .sep_title {
    background-image: linear-gradient(to right, var(--ea-pink), #781E82);
}

/* Corrections CSS Mathieu */

.container-intranet .col_tools .services h2::before {
    content: "/";
    color: var(--ea-pink) !important;
    font-weight: 950;
    font-size: 1.1em;
}

.banner-help {
    background-color: #FFF;
    width: 100%;
    padding: 3rem 3rem 2rem 3rem;
    color: #000;
    letter-spacing: 0.0em !important;
}

.container-intranet .col_tools .service {
    margin-bottom: 60px !important;
}

.container-intranet .col_tools .services {
    background: transparent !important;
    padding-left: 0px !important;
    padding-top: 0px !important;
}

.container-intranet .col_tools .services .service .service-extrait a {   
    background-color: white;
    flex: 1 1 auto;
}

.service-extrait:hover {
    -webkit-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.5);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.5);
}

.container-intranet .col_tools .services .service .service-extrait a:focus .ico_fnt, .container-intranet .col_tools .services .service .service-extrait a:focus .name, .container-intranet .col_tools .services .service .service-extrait a:hover .ico_fnt, .container-intranet .col_tools .services .service .service-extrait a:hover .name {
    color: inherit !important;
}

.services .service .service-extrait a:hover, .services .service .service-extrait a:focus {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}

.services .service .service-extrait .name {
    display: block;
    font-size: 12px;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.container-intranet .col_tools .services .service .service-extrait a .name {
    color: inherit;
    font-weight: 700;
    font-size: 14px;
    line-height: 17px;
    text-transform: lowercase;
}

.container-intranet .col_animations .services .service-birthday .birthdays-list .birthdays .birthday {
    font-size: 12px;
    line-height: 16px;
    color: inherit;
    padding: 10px;
    background: white;
    min-height: auto !important;
    margin: 5px 0px 20px 10px;
}

.container-intranet .col_animations .services .service-birthday .birthdays-list .birthdays .birthday .birthday-img {
    max-width: 80%;
    max-height: 80%;
}

.container-intranet .col_tools .services .service .row, .container-intranet .col_tools .services .service .acf-form.acf-form-row .acf-fields, .acf-form.acf-form-row .container-intranet .col_tools .services .service .acf-fields {
    margin-left: -7px;
    margin-bottom: 30px;
}

.banner-help .container .row .col_help_title, .banner-help .container .acf-form.acf-form-row .acf-fields .col_help_title, .acf-form.acf-form-row .banner-help .container .acf-fields .col_help_title {
    color: black;
}

.services .service .service-extrait {
    margin-bottom: 10px;
    display: flex;
    flex-flow: column;
    height: 90%;
    align-items: stretch;
    -webkit-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transition: all 0.5s;
    position: relative !important;
    border-radius: var(--radius-md) !important;
}

.service-extrait:hover, .service-extrait:focus {
    transform: scale(1.07) !important;
    -webkit-transform: scale(1.07) !important;
    -webkit-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.5) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.5) !important;
}

.container-intranet .col_animations .services .service-birthday .birthdays-list .birthdays .birthday .date {
    font-weight: 500;
}

.container-intranet .services {
    background-color: rgba(255, 255, 255, 0.5) !important;
    border-radius: var(--radius-xl);
}

div.col-12.col-xl-6.col_animations {
    max-width: 40% !important;
    flex: 0 0 40%;
}

div.col-12.col-xl-6.col_tools {
    max-width: 60% !important;
    flex: 0 0 60%;
}

.service-line-user .line {
    background: white;
    background-color: white;
    padding: 3px 12px;
    border-radius: var(--radius-sm) !important;
    margin-bottom: 10px;
}

.service-line-user .line .pole_title {
    width: 65px;
}

.service-line-user .line .blc_user .img {
    height: 50px;
    width: 50px;
    border-radius: var(--radius-round);
    margin-bottom: 0px !important;
}

.service-line-user .line .blc_user.tooltip_on:hover .tooltip {
    color: var(--ea-orange) !important;
    background-color: var(--ea-orange-light) !important;
    left: 0% !important;
    bottom: 120% !important;
    transition: all 0.3s;
    font-size: 12px !important;
    opacity: 1.0;
}

.blc_user.tooltip_on .tooltip {
    color: white !important;
    background-color: white !important;
    opacity: 0.0;
    left: 0% !important;
    bottom: 70% !important;
    transition: all 0.4s;
}

.service-line-user .line .blc_user.tooltip_on .tooltip:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-top: 8px solid var(--ea-orange-light);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}

.service-line-user .line .blc_user {
    margin: 5px !important;
}

.banner-posts-interne .container .banner-posts-interne-header .slider-bottom-links a:hover {
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: unset !important;
    -webkit-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.5);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.5);
}

.banner-posts-interne .container .banner-posts-interne-header .slider-bottom-links a {
    border-style: solid;
    border-width: 2px;
}

.banner-posts-interne .container .banner-posts-interne-header .slider-bottom-links a:first-child {
    color: var(--ea-green-dark);
}

.banner-posts-interne .container .banner-posts-interne-header .slider-bottom-links a:last-child {
    color: var(--ea-pink);
}

.banner-posts-interne .container .banner-posts-interne-header .slider-bottom-links a {
    background-image: none !important;
    border-radius: var(--radius-md);
}

.banner-posts-interne {
    background: rgba(255, 255, 255, 0.7);
    -webkit-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    margin-bottom: 2rem;
}

.slide-interne {
    border: 0px solid rgba(0, 0, 0, 0.1) !important;
    border-bottom-style: solid !important;
    border-bottom-width: 6px !important;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    -webkit-mask: /*4*/ linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

.banner-posts-interne .container .slide-interne {
    min-height: 10px !important;
    width: 100%;
}

div.slide-interne.slide-event {
    border-image: linear-gradient(45deg, var(--ea-green), var(--ea-blue)) 1 !important;
    position: relative;
    padding-bottom: 60px;
}

div.slide-interne.slide-other {
    border-image: linear-gradient(45deg, var(--ea-pink), #781E82) 1 !important;
}

.banner-posts-interne .container .slide-interne .right .code {
    position: absolute;
    bottom: 40px;
    height: 40px;
    left: 0;
    margin: 0px 20px;
    line-height: 1.15em !important;
    font-size: 0.90em !important;
}

.banner-posts-interne .container .slide-interne.slide-event .date-interne {
    margin-bottom: 16px;
}

.slide-interne .title-interne .sep_title {
    display: none;
}

.container-intranet .col_animations .services .service-useful-links .row_link .links .link .link-info .link-info-title {
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.05em !important;
}

.container-intranet .col_animations .services .service-useful-links .row_link .links .link .link-info .link-info-content {
    font-weight: 300;
    letter-spacing: 0.05em !important;
}

.container-intranet .col_animations .services .service-useful-links .row_link .links .link {
    background: white;
    border: 0px solid white;
    -webkit-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transition: all 0.5s;
}

.container-intranet .col_animations .services .service-useful-links .row_link .links .link:hover {
    transform: scale(1.02) !important;
    -webkit-transform: scale(1.02) !important;
    transition: all 0.5s;
    -webkit-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.5);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.5);
}

.banner-user .container .direct-access .links .link {
    background-color: white;
    padding: 5px 8px;
    border-radius: var(--radius-sm) !important;
    transition: all 0.5s;
    border: 0px solid white;
    -webkit-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    text-transform: uppercase;
    font-weight: 800;
    font-size: 0.95em !important;
}

.banner-user .container .direct-access .links .link:hover {
    transform: scale(1.02) !important;
    -webkit-transform: scale(1.02) !important;
    transition: all 0.5s;
    -webkit-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.5);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.5);
    color: black !important;
}

.banner-user .container .direct-access .links .link img {
    width: 20px;
}

.banner-user .container .direct-access .title {
    text-transform: uppercase;
    font-weight: 800;
    font-size: 1em;
}

.service-my-profile .caution, .service-my-bio .caution {
    background-color: white;
    margin-top: 20px;
}
.service-my-profile .caution .text, .service-my-profile .caution .question, .service-my-bio .caution .text, .service-my-bio .caution .question {
    font-size: 0.95em !important;
    letter-spacing: 0.0em !important;
}

.service-my-profile .caution .ask-modification:hover, .service-my-bio .caution .ask-modification:hover {
    transform: scale(1.02) !important;
    -webkit-transform: scale(1.02) !important;
    transition: all 0.5s;
    color: white;
    background-color: var(--ea-pink);
}

.banner-user .container .row.service .title,
.container .user .col_title .title {
    color: black !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    background-color: rgba(255, 255, 255, 0.8) !important;
    padding: 8px 18px;
    margin-left: 13px !important;
    border-radius: var(--radius-lg-alt);
}
.banner-user .container .row.service .col-12 {
    margin: 0;
    padding: 0;
}

.banner-user .container .row.service .title {
    display: inline;
}

.banner-user .container .direct-access .links .link img {
    max-height: 15px;
}

.col_animations img.link-icon {
    max-height: 20px;
    margin-top: 4px;
}

.slick-track {
    display: flex;
    align-items: stretch;
    align-content: space-around;
    flex-wrap: nowrap;
    flex-direction: row;
}

.slick-initialized .slick-slide {
    display: inline-flex;
    /* align-items: stretch; */
    /* flex-direction: row; */
    /* flex-wrap: nowrap; */
    height: auto;
}

.birthdays .slick-track {
    width: 100% !important;
}

.wpgb-facet button.wpgb-apply {
    color: #FFF !important;
    background-color: var(--ea-pink) !important;
    margin-bottom: 0 !important;
}

.elementor-posts-container {}
.elementor-posts-container .posts_interne {
    padding: 30px !important;
    background: #FFF;
}
.elementor-posts-container .posts_interne .elementor-post__title a {
    color: #000;
    font-weight: bold;
}

.slide-interne .title-interne a:hover:before {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.birthdays-list .birthday-title {
    margin-top: 30px;
}

.container-intranet .col_animations .services .service-birthday .birthdays-list .euros-birthday-title, .banner-posts-interne .container .banner-posts-interne-header .title span:last-child {
    text-transform: uppercase;
    background: none;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
    color: black;
}

.container-intranet .col_animations .services .service-birthday .birthdays-list .birthday-title, .banner-posts-interne .container .banner-posts-interne-header .title {
    text-transform: uppercase;
    background: none;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
    color: black;
}

.banner-posts-interne .container .banner-posts-interne-header .title::before {
    content: '/';
    font-weight: 950;
    color: var(--ea-green-dark);
}

.banner-posts-interne .container .banner-posts-interne-header .title span:last-child::before {
    content: '/ ';
    font-weight: 950;
    color: var(--ea-pink);
}

.banner-posts-interne .container .banner-posts-interne-header .title span:first-child {
    color: transparent;
    margin-right: 10px;
}

.services .service .row {
    margin-bottom: 0px;
}

.container-intranet .col_animations .services .service-birthday .birthdays-list .birthdays .birthday:hover {
    transform: scale(1.02) !important;
    -webkit-transform: scale(1.02) !important;
    transition: all 0.5s;
    -webkit-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.5);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.5);
}

.container-intranet .col_animations .services .service-birthday .birthdays-list .birthdays .birthday {
    -webkit-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.container-trombinoscope .trombinoscope .trombinoscope-list .trombinoscope-card:hover {
    transform: scale(1.02) !important;
    -webkit-transform: scale(1.02) !important;
    transition: all 0.3s;
    -webkit-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.5);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.5);
}

.container-trombinoscope .trombinoscope .trombinoscope-list .trombinoscope-card .trombinoscope-card-infos .trombinoscope-card-infos-fullname, .container-listing-posts .trombinoscope .trombinoscope-list .trombinoscope-card .trombinoscope-card-infos .trombinoscope-card-infos-fullname, .service-my-profile .my-profile-header .right .fullname {
    color: black;
    background-clip: unset;
    -webkit-background-clip: unset;
    background-image: none;
}

.service-my-profile .manager span, .my-profile-header .team-direct, .service-my-profile .manager a, .service-my-profile .team-direct a {
    color: var(--ea-orange) !important;
}

.page-content .posts_interne .row .single-section {
    padding: 10px 50px 50px 50px;
}

.page-content .posts_interne .row div.categorie-meta {
    padding: 10px 40px 10px 40px;
}

.page-content .posts_interne .row h1 {
    font-family: var(--font-title);
    font-weight: 900;
    color: black;
    text-transform: uppercase;
    padding: 40px 40px 10px 40px;
    font-size: 40px;
    line-height: 1em;
}

/* Tabs bonnes pratiques */

.gv-container-31343 {
    columns: 16em;
}

.tabsx-container, .gv-container-31343 {
    z-index: 20;
}

.tabsx-container label, .gv-container-31343 label {
    padding: 8px 8px;
    margin: 0px 0px 8px 10px;
    font-size: 12px;
    color: var(--ea-pink);
    cursor: pointer;
    user-select: none;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1.2em;
    background: white;
    border-radius: 6px !important;
    float: left;
}

.tabsx-container label::first-letter, .gv-container-31343 label::first-letter {
    font-size: 16px;
    font-weight: 900;
    margin-right: 0.05em;
}
 
.tabsx-container label:hover, .gv-container-31343 label:hover {
    color: white;
    font-weight: 800;
    background: var(--ea-pink);
    transform: scale(1.02) !important;
    -webkit-transform: scale(1.02) !important;
    transition: all 0.3s;
    -webkit-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.5);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.5);
}

.tabx-content {
    position: relative;
    background: white;
    width: 100%;
    min-height: 100vh;
    padding: 60px;
    float: left;
    box-sizing: border-box;
    z-index: 19;
    display: none;
}
 
.tabx-content:after {
    content: "";
    clear: both;
}

input[name="tab"] {
    display: none;
}
input[name="tab"]:checked + .tabx-content {
    display: block;
    animation: slide 0.5s;
}
 
@keyframes slide {
    from {
        right: -100%;
        opacity: 0;
    }
    to {
        right: 0;
        opacity: 1;
    }
}

.tabx-content h2 {
    font-family: var(--font-title);
    font-weight: 800;
    font-size: 24px;
    text-transform: uppercase;
    margin-top: 40px;
}

.tabx-content h3 {
    font-weight: 700;
    font-size: 20px;
    text-transform: uppercase;
    margin-top: 20px;
}

.tabx-content h4 {
    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
    margin-top: 20px;
}

.tabx-content h3.titre {
    font-size: 34px;
}

a.listing_posts-addpost:hover {
    background-position: right center;
    /* change the direction of the change here */
    transform: scale(1.05);
    box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
    background-color: var(--ea-pink);
    color: white !important;
}

a.listing_posts-addpost {
    font-family: var(--font-title);
    font-weight: 700 !important;
    text-transform: uppercase;
    color: var(--ea-pink) !important;
    background-color: var(--ea-white);
    border-style: solid !important;
    border-width: 1px !important;
    border-color: var(--ea-pink) !important;
    border-radius: 0px 0px 0px 0px;
    padding: 9px 9px 9px 9px !important;
    margin-top: 10px;
}

.slick-slide .slide-interne .cat-interne {
    position: absolute;
    bottom: 25px;
    margin-top: 20px;
    font-size: 12px;
}

.slick-slider .slick-list, .slick-slider .slick-track {
    overflow-x: scroll !important;
    overflow-y: visible !important;
}

div[data-name="slug"] {
    display: none;
}

.slick-slide .slide-interne:hover .title-interne a:before,
.slick-slide .slide-interne:focus .title-interne a:before {
    content: ' ';
    position: absolute;
    top: 0;
    width: 0;
    height: 100%;
    width: 100%;
}

.acf-radio-list input[type="checkbox"],
.acf-radio-list input[type="radio"] {
    display: inline-block !important;
}

.cat-interne, .categorie-meta {
    font-family: var(--font-title);
    font-style: normal !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    color: var(--ea-pink) !important;
}

#comments.comments-area {
    padding: 10px 50px 50px 50px;
    background: #f2f2f2;
}

.container-intranet .col_animations .services .service-birthday .birthdays-list .birthdays .birthday .birthday-img {
    height: 50px;
    width: 50px;
}

table.dataTable tbody th,
table.dataTable tbody td {
    padding: 8px 5px !important;
}

table.dataTable tbody th .traiter a,
table.dataTable tbody td .traiter a,
table.dataTable tbody th .traiterrose a,
table.dataTable tbody td .traiterrose a { 
    color: var(--ea-pink) !important;
}

.banner-user {
    background-attachment: inherit;
}

.acfe-form.acf-form .acf-form-submit {
    width: 100%;
}

.acf-field p.description {
    color: var(--ea-orange) !important;
}

.container-references-edit { margin-top: 0 !important; }

.page-id-15622 .previous-link,
.page-id-31149 .previous-link {
    margin-top: 190px;
}

.page-template-contenu-libre .gv-container-38917 .gv-diy-view {
    position: relative;
    padding: 12px 52px 18px 0;
    cursor: pointer;
}

.flechegradient {
    background: -webkit-linear-gradient(to right, var(--ea-pink) 0%, var(--ea-pink-dark) 100%);
    background: -moz-linear-gradient(to right, var(--ea-pink) 0%, var(--ea-pink-dark) 100%);
    background: linear-gradient(to right, var(--ea-pink) 0%, var(--ea-pink-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2em;
    margin-left: 5px;
}

.page-id-42792 .cms {
    padding: 0 10% 0 10%;
    margin: 0 auto;
}

.formulairepostuler {
    padding: 5% 10% 5% 10%;
}

.postulernoir {
    background-color: black; padding: 5% 10% 5% 10%; color: white;
}

.postulerblanc {
    background-color: white; padding: 5% 10% 5% 10%;
}

.noUi-connect {
    background: var(--ea-green) !important;
}

form input[type="text"]:read-only {
    color: grey !important;
    font-weight: 600 !important;
    border: 1px dashed var(--ea-gray-light) !important !important;
}

/* Composant Absence */ 
.service-line-user {
	
}
.service-line-user .lines {
    margin-top: 15px; 
}

.service-line-user .line {
    display: flex;
    align-items: center;
}
.service-line-user .line .users {
    display: flex;
    overflow: auto;
}

.service-line-user .line .pole_title {
    min-width: 65px;
}

.service-line-user .pole_title {
    font-weight: bold;
    margin-right: 15px;
}
.service-line-user .blc_user {
    margin: 10px;
}

.blc_user {
	
}

.blc_user_relative {
    position: relative;
}
.blc_user.tooltip_on {
    overflow: hidden;
}

.blc_user.tooltip_on:hover .tooltip, 
.blc_user.tooltip_on:focus .tooltip {
    visibility: visible;	
    background-color: var(--ea-orange-light) !important;
    color: var(--ea-orange) !important;
}

.blc_user.tooltip_on .tooltip {
    visibility: hidden;
    padding: 10px;
    font-size: 12px;
    width: 170px;
    background-color: var(--ea-orange-light) !important;
    color: var(--ea-orange) !important;
    text-align: center;
    padding: 5px 0;
    border-radius: var(--radius-sm) !important;
 
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;	
}

.blc_user.tooltip_on .tooltip_popper { display: none; }

.blc_user .img {
    height: 50px;
    width: 50px;
    border-radius: var(--radius-round);
    margin-bottom: 10px;
    overflow: hidden;
}

.blc_user .img .img_initial {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    background-color: #F3F3F3 !important;
    color: var(--ea-gray-mid) !important;
}

.blc_user .img img {
    display: block;
    -o-object-fit: cover;
    object-fit: cover;
}

.tippy-tooltip.euros-theme {
    padding: 10px !important;
    background-color: var(--ea-orange-light) !important;
    color: var(--ea-orange) !important;
    font-size: 11px !important;
}
.tippy-popper[x-placement^="bottom"] .tippy-arrow {
    border-bottom-color: var(--ea-orange-light);
}
.tippy-popper[x-placement^=top] .tippy-arrow {
    border-top-color: var(--ea-orange-light);
}
.tippy-tooltip.euros-theme .tippy-backdrop {
    background: none !important;
}


.blc_user.tooltip_on .tooltip {
    visibility: hidden;
    padding: 10px;
    font-size: 12px;
    width: 170px;
    background-color: var(--ea-orange-light) !important;
    color: var(--ea-orange) !important;
    text-align: center;
    padding: 5px 0;
    border-radius: var(--radius-sm) !important;
}

.container-intranet .col_animations .services .service-birthday .birthdays-list .birthdays .euros-today {
    background: var(--ea-pink) !important;
    color: #FFF !important;
    -webkit-mask: linear-gradient(-60deg,#000 30%,#0005,#000 70%) right/300% 100%;
    background-repeat: no-repeat;
    animation: shimmer 2.5s infinite !important;
}

.container-intranet .col_animations .services .service-birthday .birthdays-list .birthdays .today {
    background: var(--ea-green-dark) !important;
    color: #FFF !important;
    -webkit-mask: linear-gradient(-60deg,#000 30%,#0005,#000 70%) right/300% 100%;
    background-repeat: no-repeat;
    animation: shimmer 2.5s infinite !important;
}

@keyframes shimmer {
    100% { -webkit-mask-position: left; }
}

.service-absence .count {
    color: var(--ea-orange) !important;
}

.service-teletravail .count {
    color: var(--ea-gray-mid) !important;
}

.tippy-popper[x-placement^=top] [data-animation=shift-away][data-state=visible] {
    -webkit-transform: translateY(-66px);
    transform: translateY(-66px);
}

.single-posts_interne .banner-user .title, .tax-posts_interne_i .banner-user .title {
    color: #FFF !important;
    background: #000000 !important;
    padding: 8px 16px;
}

.trombinoscope-profile .service-my-profile {
    background-color: #FFF;
    padding: 30px;
    margin-bottom: 40px;
    border-radius: var(--radius-md) !important;
}

.trombinoscope-profile .service-my-profile .my-profile-header .left img {
    max-width: 100% !important;
    border-radius: var(--radius-md) !important;
}

.trombinoscope-profile .service-my-profile .my-profile-header .left img {
    max-width: 100% !important;
}

.alerte-profil-trombi-error {
    padding: 30px;
    margin-bottom: 30px;
    background: #FFF;
    font-weight: bold;
    font-size: 18px; /* Correction syntaxe */
    text-align: center;
    border: 2px solid #f00;
}

.alerte-profil-trombi {
    border-radius: var(--radius-md) !important;
    padding: 30px;
    margin-bottom: 30px;
    background-color: #f5f2f3 !important;
}
.alerte-profil-trombi .subtitle {
    text-transform: uppercase;
    font-weight: bold;
}

.alerte-profil-trombi .alerte-sub + .alerte-sub {
    margin-top: 30px;	
}

.alerte-profil {
    border: 2px solid #f00;
    padding: 30px;
    margin-bottom: 30px;
}

.alerte-profil .alerte-title {
    color: #f00;
    font-weight: bold;
    font-size: 17px;
    margin-bottom: 10px;
    text-transform: uppercase;	
}

.alerte-profil .alerte-notes {
    font-size: 15px;
    font-style: italic;
}

.alerte-profil .alerte-sub {
    padding: 20px;
    margin-bottom: 10px;
    background: #FFF;
    border-radius: var(--radius-xxl);
}

.alerte-profil .alerte-sub .subtitle {
    font-weight: bold;
    font-size: 17px;
}

.hidden_front { display: none; }

/*********/

.gform_wrapper { display: block !important; }

/*
.gform_wrapper.gravity-theme:not(#gform_wrapper_30) .gfield.hidden {
	display: block !important;
}
*/

.gform_wrapper.gravity-theme #field_51_54.gfield.hidden,
.gform_wrapper.gravity-theme #field_51_2.gfield.hidden,
.gform_wrapper.gravity-theme #field_51_18.gfield.hidden {
    display: none !important;
}
 

.single-public {
    font-family: "Montserrat", serif;
    font-optical-sizing: auto;
    background: var(--ea-dark) !important;
}

.single-public .return {
    display: inline-block;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    padding: 7px 20px;
    margin-left: 10%;
    margin-right: 10%;	
    color: #000;
    line-height: 131%;
    border-radius: var(--radius-sm) !important;
    background: #FFF;	
}
.single-public .return:hover, 
.single-public .return:focus {
    text-decoration: none;
    color: #FFF;
    background-color: rgb(255, 56, 132); /* Couleur spécifique */
}

.single-public .banner-help {
    background: var(--ea-dark);
}

@media (max-width: 767.98px) {
    .banner-help .logo { 
        display: flex !important;
    }
}

.single-public.postid-60883 .gv-container-38917 .postulernoir {
    padding-bottom: 0;
    background: var(--ea-dark);
}
.single-public.postid-60883 .gv-container-38917 .postulernoir.empty {
    padding-bottom: 90px;
}

.single-public .gform_required_legend {
    display: none;
}

.single-public .gform_wrapper.gravity-theme .gfield_label { 
    text-transform: none !important;
    color: var(--ea-gray-dark) !important;
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 700 !important;
    line-height: 131%;	
}

.single-public .gform_wrapper.gravity-theme input[type="text"],
.single-public .gform_wrapper.gravity-theme input[type="email"],
.single-public .gform_wrapper.gravity-theme input[type=tel] {
    background-color: #F8F8F8 !important;
}

.single-public .gform_wrapper.gravity-theme form input[type="radio"] + label {
    border-radius: var(--radius-sm) !important;
    background: var(--ea-bg-body);	
}

.single-public.gform_wrapper.gravity-theme .gfield input,
.single-public.gform_wrapper.gravity-theme .gfield select {
    border-radius: var(--radius-sm) !important;
    background: var(--ea-gray-bg-light) !important;
}

.single-public .gform_wrapper.gravity-theme #field_submit,
.single-public .gform_wrapper.gravity-theme .gform_footer {
    justify-content: end;
}

.single-public .gform_footer .gform_button.button,
.single-public .gform_wrapper.gravity-theme .gform_page_footer .gform_button.button {
    font-family: Montserrat;
    font-size: 16px !important;
    font-style: normal;
    font-weight: 700;
    line-height: 131%;
    text-transform: none !important;
    max-width: 290px;
}

.single-public > .container {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    background: var(--ea-bg-body);
}

.single-public .gv-diy-single-container {
    padding-bottom: 96px;
}

.single-public .banner .category.brd:before, 
.single-public.postid-60883 .gv-container-38917 .category.brd:before {
    content: "/";
    margin-right: 0.25em;
    font-weight: 800;
    color: rgb(255, 56, 132);
}

.single-public .banner {
    display: flex; 
    flex-direction: column;
    align-items: center; 
    justify-content: center;
    min-height: 300px;
    background: var(--ea-dark);
}

.single-public .banner .category.brd,
.single-public.postid-60883 .gv-container-38917 .category.brd {
    color: #FFF !important;
    display: block;
    text-align: center;
    font-family: Montserrat;
    font-size: 50.56px;
    font-style: normal;
    font-weight: 800;
    line-height: 131%; /* 66.234px */
    text-transform: uppercase;
}

.single-public.postid-60883 .gv-container-38917 .itemtitle {
    display: block;
    text-align: center;
    margin-top: 32px;
    /* md 2 - Desktop */
    font-family: Montserrat;
    font-size: 21.28px;
    font-style: normal;
    font-weight: 800;
    line-height: 131%;
    /* 27.877px */
}

.single-public .col_form {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 32px;
    padding: 96px 0;
    margin-left: 10%;
    margin-right: 10%;
    background: var(--ea-bg-body);
}

.single-public .col_form .info_event,
.single-public .col_form div.form {
    min-height: 240px;
    justify-content: center;
    display: flex; 
    flex-direction: column;
    border-radius: var(--radius-sm) !important;
    padding: 20px;
    flex: 1 1 500px;
    min-width: 300px;
    max-width: 100%;
}
.postid-61890 .col_form div.form .gform_wrapper {
    padding: 20px;
    background: #FFF;
}

.single-public .col_form .info_event .image {
    position: relative;
    height: 100%;
    min-height: 400px;
    border-radius: var(--radius-sm) !important;
    overflow: hidden;
}

.single-public .col_form .info_event .image .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    filter: blur(4px);
    z-index: 1;	
    height: 100%;	
    background-position: center center; 
    background-size: cover;
}

.single-public .col_form .info_event .image .content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    padding: 32px;
    color: #FFF;
    display: flex; 
    flex-direction: column; 
    gap: 10px;
    z-index: 9999;
    overflow-y: auto;
    max-height: 100%;
    background: rgb(255,54,131);
    background: linear-gradient(180deg, rgba(255,54,131,0) 0%, rgba(255,54,131,0.6741290266106443) 23%, rgba(255,54,131,1) 70%);
}

.single-public .col_form .info_event .image .content  .date {
    font-size: 14px;
    font-weight: 400;
}
.single-public .col_form .info_event .image .content  .title {
    font-size: 24px;
    font-style: normal;
    font-weight: 800;
    line-height: 131%;
    /* 31.44px */
}

.single-public .col_form .info_event .image .content .buttons {
    margin-top: 22px;
}
.single-public .col_form .info_event .image .content .buttons .btn-gravity {
    cursor: pointer;
    display: inline-block;
    padding: 0px 25px;
    color: #FFF;	
    font-style: normal;
    font-weight: 400;
    line-height: 33px; /* 206.25% */	
    border-radius: var(--radius-sm) !important;
    background: rgba(242, 237, 239, 0.20);	
}

.single-public .col_form .info_event .image .content .buttons + .details.full {
    margin-top: 40px;
}

.postid-61890 .col_form .info_event .cover {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 3;
}

.single-public .col_form .info_event .image img.focus {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
    z-index: 2;
    border-radius: 10px;
}

/* Masquage temporaire pour mathieu */
.single-public .col_form div.form #field_30_7 {
    display: none;
} 

.single-public.postid-60883 .gv-container-38917 .cards {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 32px;
    padding-top: 100px;
    padding-bottom: 90px;
    font-weight: 700;
}

.single-public.postid-60883 .gv-container-38917 .card {
    min-height: 240px;
    justify-content: end;
    display: flex; 
    flex-direction: column;
    background-color: var(--ea-gray-dark);
    border-radius: 10px;
    padding: 20px;
    flex: 1 1 calc(20% - 32px); /* Flex-grow, flex-shrink, flex-basis */
    min-width: 200px;
    /* Largeur minimale */
    box-sizing: border-box;
}

.single-public.postid-60883 .gv-container-38917 .card p {
    margin: 0 0 10px;
}

.single-public.postid-60883 .gv-container-38917 .card .blocs {
    display: flex;
    gap: 16px;
}
.single-public.postid-60883 .gv-container-38917 .card span {
    display: inline-block;
    background-color: #000;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    margin-top: 5px;
}

.single-public #gform_30 {
    padding: 32px;
    background: #FFF;
    border-radius: var(--radius-sm) !important;
}

.single-public.postid-60883 .gv-container-38917 .formulairepostuler,
.single-public.postid-60883 .gv-container-38917 .postulerblanc {
    padding: 32px;
    margin-left: 10%;
    margin-right: 10%;
    background: #FFF;
    border-radius: var(--radius-sm) !important;
}

.single-public.postid-60883 .gv-container-38917 .postulerblanc h3 {
    font-family: Montserrat;
    font-size: 21.28px;
    font-style: normal;
    font-weight: 800;
    line-height: 131%; /* 27.877px */
    text-transform: uppercase;
}

.single-public.postid-60883 .gv-container-38917 .postulerblanc + .postulerblanc {
    margin-top: 32px;
}

.postid-61890 .col_form div.form .gform_wrapper .gsection_title,
.single-public.postid-60883 .gv-container-38917 .formulairepostuler .gform_title {
    color: var(--ea-pink) !important;
    /* md - Desktop */
    font-family: Montserrat;
    font-size: 21.28px;
    font-style: normal;
    font-weight: 800;
    line-height: 131%; /* 27.877px */
    text-transform: uppercase;
}

#gform_wrapper_30 {
	
}

.um.um-shortcode-social {
    display: flex; 
    justify-content: center;
}
article.public div#um-shortcode-social-15654 a.um-button.um-button-google {
    display: flex !important;
    align-content: center;	
    justify-content: center;
}

@media (max-width: 500px) {
    .single-public .banner .category.brd, .single-public.postid-60883 .gv-container-38917 .category.brd {
        font-size: 30px;
    }
    .single-public .col_form {
        margin-left: 4%;
        margin-right: 4%;
    }
}

#gform_52 {
    opacity: 1 !important;
}

.banner-user .overlay {
    opacity: 0.9 !important;
}

.listing_posts-heading .wpgb-facets__wrapper.row {
    align-items: center;
}

.container-trombinoscope .wpgb-facet .wpgb-facet-title, .container-listing-posts .wpgb-facet .wpgb-facet-title {
    color: #000;
}

.container-listing-posts .previous-link { display: none; }

div[data-width="50"] + div[data-width="50"] {
    padding-left: 15px;
}

@media (max-width: 500px) {
    div.col-12.col-xl-6.col_tools,
    div.col-12.col-xl-6.col_animations {
        max-width: 100% !important; 
        flex: 0 0 100%;
    }
	
    .container-equipe-edit .acf-form, .container-references-edit .acf-form, .container-case_studies-edit .acf-form, .container-offres_emploi-edit .acf-form, .container-partenaires-edit .acf-form, .container-temoignages-edit .acf-form {
        padding: 10px !important;	
    }
	
    div[data-width="50"] {
        width: 100% !important;
        padding-left: 0 !important;
    }
}

/* Forcer l'affichage du formulaire Gravity Forms dans les popups */
.pum-content form[id^="gform_"] {
    opacity: 1 !important;
}

/* Si tu as des formulaires multi-pages (étapes), force aussi les pages */
.pum-content .gform_page {
    opacity: 1 !important;
}

/* === DATEPICKER GFORMS (OBSOLETE - a supprimer) === */
/* ==========================================================================
   DATEPICKER GFORMS - VERSION LISIBILITÉ MAX (1.1rem)
   ========================================================================== */
/* OBSOLÈTE depuis 09/07/2026 — remplacée par le correctif gv-date-range-picker en fin de fichier. À supprimer après validation prod. */

/* 1. Conteneur et Polices de base */
body .ui-datepicker,
body .gravity-theme.ui-datepicker {
    width: 340px !important; /* Élargi pour accueillir la police 1.1rem */
    font-size: 1.1rem !important;
    background: var(--ea-white) !important;
    border-radius: var(--radius-md) !important;
    padding: 15px !important;
    border: 1px solid var(--ea-gray-border) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
}

/* 2. En-tête et Sélecteurs (Mois/Année) */
/* Harmonisation avec le reste du popup (retour Mathieu 22/07/2026) : ces
   deux <select> natifs (mois/année) tranchaient avec les champs #F8F8F8
   arrondis du reste du formulaire — fond clair + flèche personnalisée
   (masque CSS, même croix/icônes déjà en place ailleurs) au lieu de
   l'apparence native du navigateur. */
body .ui-datepicker-header select,
body .gravity-theme.ui-datepicker .ui-datepicker-header select {
    -webkit-appearance: none;
    appearance: none;
    font-family: var(--font-ui, 'Montserrat', sans-serif) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--ea-dark) !important;
    padding: 6px 22px 6px 10px !important;
    background-color: var(--ea-gray-input, #F8F8F8) !important;
    border: 1px solid transparent !important;
    border-radius: var(--radius-sm, 8px) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23A7A7A7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 6px center !important;
    background-size: 14px !important;
}
body .ui-datepicker-header select.ui-datepicker-month {
    margin-right: 4px !important;
}

/* 3. Jours de la semaine (LUN, MAR...) */
body .ui-datepicker-calendar thead th span,
body .gravity-theme.ui-datepicker .ui-datepicker-calendar th span {
    font-size: 0.9rem !important; /* Légèrement plus petit pour la structure */
    font-weight: 700 !important;
    color: var(--ea-dark) !important;
    text-transform: uppercase !important;
}

/* 4. Gestion des Jours (Cellules) */
body .ui-datepicker-calendar td a, 
body .ui-datepicker-calendar td span {
    width: 40px !important;  /* Ajusté pour la police 1.1rem */
    height: 40px !important;
    line-height: 40px !important;
    font-size: 1.1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--radius-round) !important;
    transition: all 0.2s ease-in-out !important;
}

/* --- CONTRASTE DES ÉTATS --- */

/* Dates Sélectionnables : Chiffre Rose */
body .ui-datepicker-calendar td:not(.ui-datepicker-unselectable) a {
    color: var(--ea-pink) !important;
    font-weight: 700 !important;
}

/* Hover et Sélection : Fond Rose / Texte Blanc */
body .ui-datepicker-calendar td:not(.ui-datepicker-unselectable) a:hover,
body .ui-datepicker-calendar .ui-state-active {
    background: var(--ea-pink) !important;
    color: var(--ea-white) !important;
    opacity: 1 !important;
}

/* Dates Désactivées : Gris clair */
body .ui-datepicker-calendar .ui-datepicker-unselectable span,
body .ui-datepicker-calendar .ui-state-disabled span {
    color: var(--ea-gray-light) !important;
    font-weight: 400 !important;
}

.iti--container {
    z-index: 999999999999!important;
}

/* Ajouter une icône de chargement à droite du champ */
.gppa-field-loading .ginput_container::after {
    content: " &#x1f504;"; /* Vous pouvez remplacer par un spinner SVG */
    display: inline-block;
    animation: spin 1s linear infinite;
    margin-left: 10px;
    vertical-align: middle;
}

@keyframes spin {
    100% { transform: rotate(360-deg); }
}

/* Griser le champ pendant le chargement pour éviter la confusion */
.gppa-field-loading input, 
.gppa-field-loading select {
    opacity: 0.5;
    cursor: wait;
}
/* === TABLEAUX GRAVITYVIEW -- SKIN V2 (scope .ea-v2) === */
/* ============================================================================
   TABLEAUX GRAVITYVIEW — SKIN V2 (scope opt-in : .ea-v2)
   ----------------------------------------------------------------------------
   Activation : ajouter la classe "ea-v2" dans les réglages de la vue
   (GravityView → Réglages → Classe CSS personnalisée).
   Une vue SANS cette classe n'est pas affectée : migration progressive.
   Référence visuelle : maquette-tableaux-gravityview-ea-v2.html (validée 09/07/2026).
   Dépendances snippet (facultatives, dégradation propre si absentes) :
   - classes de statut tr.ea-st-{ok|wait|expire|late|draft} et pastilles .ea-status
   - attributs data-label sur les <td> (bascule mobile en cartes)
   - bascule densité : classe .ea-compact sur le conteneur
   ============================================================================ */

/* === 0. COUCHE DE NEUTRALISATION === */
/* ------------------------------------------------------------------ *
 * 0. COUCHE DE NEUTRALISATION — remet à plat l'héritage sous ce scope *
 * ------------------------------------------------------------------ */
.gv-container.ea-v2 table,
.gv-container.ea-v2 table th,
.gv-container.ea-v2 table td {
  background: none;
  border: 0;
  box-shadow: none;
  text-transform: none;
  letter-spacing: normal;
}
.gv-container.ea-v2, .gv-container.ea-v2 td, .gv-container.ea-v2 th {
  /* Repassé en Montserrat le 10/07/2026 (demande explicite, iso maquette
     d'intention maquette-tableaux-gravityview-ea-v2.html dont le body entier
     est en --font-ui) — revient sur la décision du 10/07/2026 qui gardait
     Raleway ; cf. journal du jour pour le contexte de ce changement d'avis. */
  font-family: var(--font-ui, 'Montserrat', sans-serif);
  color: var(--ea-dark, #171717);
}
/* Les neutralisations !important qui vivaient ici (".petit"/".bold"/".tags"/
   ".first"/".traiter", "table td:nth-child(1)", "th.first"/le zébrage
   historique de "td.first") ont été retirées le 10/07/2026 : ces règles
   héritées portent désormais leur propre garde ":not(.ea-v2 *)" à la source
   (ea-intranet.css, sections historiques) et n'atteignent plus jamais ce
   scope — plus besoin de les neutraliser ici en aval.
   CORRECTIF 10/07/2026 (incident sevrage) : cette hypothèse était fausse pour
   les classes encore RÉELLEMENT utilisées à l'intérieur du scope .ea-v2 par
   le système v2 lui-même (custom_class des champs de la vue 21496, sortie
   des shortcodes ea_document/ea-poles-split) — la garde ":not(.ea-v2 *)" les
   EXCLUT de .ea-v2, donc plus aucune règle ne les stylait à l'intérieur de ce
   scope (bug latent, découvert sur la colonne "Pôles" : liste à puces brute
   au lieu des pastilles). Section "UTILITAIRES V2" ci-dessous : équivalents
   scopés .ea-v2, pour que ces vues restent correctes même si tout le CSS
   hérité venait à disparaître un jour. Voir
   journal/2026-07-10-incident-suppression-skin-ea-v2.md. */

/* === UTILITAIRES V2 === */
/* ================================================================== *
 * UTILITAIRES V2 — classes héritées encore consommées par le système  *
 * v2 lui-même (vue 21496 confirmée : custom_class des champs, sortie  *
 * HTML des shortcodes ea_document et ea-poles-split). Équivalents     *
 * scopés .ea-v2 des règles héritées correspondantes (mêmes valeurs),  *
 * pour rendre ces vues indépendantes du CSS hérité.                   *
 * ================================================================== */

.gv-container.ea-v2 .petit {
    font-size: 0.8em !important;
}

.gv-container.ea-v2 .bold {
    font-weight: bold;
}

.gv-container.ea-v2 .rose {
    font-weight: bold;
    background-color: var(--ea-pink) !important;
    color: var(--ea-white);
    padding: 2px 4px 2px 4px;
    transition: all 0.5s;
    border: 1px solid var(--ea-pink);
    text-transform: uppercase;
    text-align: center;
    border-radius: var(--radius-sm) !important;
}

.gv-container.ea-v2 .gris {
    color: #b7b7b7;
}

.gv-container.ea-v2 .gris a {
    color: #b7b7b7;
}

.gv-container.ea-v2 .tags ul {
    list-style: none;
    padding: 0;
    margin-top: 0px;
    margin-right: 8px;
}

.gv-container.ea-v2 .tags li {
    display: inline-block !important;
    background-color: #EAEAEA !important;
    padding: 3px 5px 3px 5px !important;
    margin: 2px 3px 2px 3px !important;
    border-radius: var(--radius-xs) !important;
    font-size: 11px !important;
    font-weight: 500;
}

.gv-container.ea-v2 .tags li::before {
    content: none !important;
}

.gv-container.ea-v2 .tags.bold li {
    font-weight: 800 !important;
}

/* === SOCLE GLOBAL -- TRANCHE 1 === */
/* ================================================================== *
 * SOCLE GLOBAL — TRANCHE 1 (13/07/2026)                                *
 * Promeut les motifs v2 (boutons, pagination, labels de recherche) en  *
 * socle non scope, en remplacement des regles heritees retirees de     *
 * theme.css (bouton contour #E61677, pagination et label de recherche  *
 * orange #ef7d30, "form label" generique). Exclu des 3 pages publiques *
 * sanctuarisees par la garde ":not(.single-public *)" (toutes 3         *
 * partagent cette classe de body), en plus de la quarantaine           *
 * (ea-legacy-public.css) qui les recouvre deja avec l'ancien rendu.    *
 * Voir journal/2026-07-13-etape3-tranche1.md.                          *
 * ================================================================== */

/* -- Boutons pilule (remplace l'ancien contour #E61677 de theme.css ET
      l'ancien contour #CC3366 de style.css, decouvert en cours de route :
      meme famille "bouton generique", specificite plus elevee que le bloc
      #E61677, gagnait systematiquement la cascade avant ce retrait) -- */
button:not(.single-public *), .btn:not(.single-public *), .button:not(.single-public *),
input[type="submit"]:not(.single-public *), [type="submit"]:not(.single-public *), [type="button"]:not(.single-public *),
.elementor-button-link:not(.single-public *), .elementor-button:not(.single-public *) {
    background: var(--ea-dark, #171717);
    color: var(--ea-white, #fff) !important;
    border: 0;
    border-radius: var(--radius-round, 50px);
    padding: 10px 22px;
    font-family: var(--font-ui, 'Montserrat', sans-serif);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    cursor: pointer;
}
button:not(.single-public *):hover, .btn:not(.single-public *):hover, .button:not(.single-public *):hover,
input[type="submit"]:not(.single-public *):hover, [type="submit"]:not(.single-public *):hover, [type="button"]:not(.single-public *):hover,
.elementor-button-link:not(.single-public *):hover, .elementor-button:not(.single-public *):hover {
    background: var(--ea-pink, #FF3683);
    color: var(--ea-white, #fff) !important;
}

/* -- Pagination (structures ".page-numbers" moderne et "li"/"li a" heritee) --
   Correctif 13/07/2026 : structure DOM reelle de GravityView confirmee par
   inspection (rendu direct, vue non migree "Gestion des tickets", post
   28870) : <ul class="page-numbers"><li><a class="page-numbers">2</a></li>...
   Le <ul> conteneur porte LUI-MEME la classe "page-numbers", en plus des
   elements cliquables/affiches qui la portent aussi -> l'ancien selecteur
   nu ".page-numbers" stylait le conteneur ET l'element interne (cadres
   imbriques). Le style pilule va desormais uniquement sur l'element qui
   n'est pas lui-meme un conteneur ul/ol ; le <ul>/<ol> et les <li> sont
   neutralises separement. */
.page-numbers:not(.single-public *):not(ul):not(ol) {
    min-width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--ea-gray-border, #ddd);
    background: var(--ea-white, #fff);
    border-radius: 10px;
    margin: 0 2px;
    color: var(--ea-gray-dark, #373033);
    text-decoration: none; font-weight: 600;
    box-shadow: none;
}
.page-numbers:not(.single-public *):not(ul):not(ol).current {
    background: var(--ea-dark, #171717);
    color: var(--ea-white, #fff);
    border-color: var(--ea-dark, #171717);
}
.page-numbers:not(.single-public *):not(ul):not(ol):hover:not(.current) {
    border-color: var(--ea-pink, #FF3683);
    color: var(--ea-pink, #FF3683);
}
ul.page-numbers:not(.single-public *), ol.page-numbers:not(.single-public *) {
    display: flex; align-items: center;
    list-style: none; border: none; background: none; box-shadow: none;
    margin: 0; padding: 0;
}
ul.page-numbers:not(.single-public *) li, ol.page-numbers:not(.single-public *) li {
    list-style: none; border: none; background: none; box-shadow: none;
    margin: 0; padding: 0;
}

/* -- Label de recherche GV (remplace l'orange #ef7d30) -- */
div.gv-search-box.gv-search-field-select label:not(.single-public *),
div.gv-widget-search.gv-search-box.gv-search-field-search_all label:not(.single-public *),
div.gv-search-box.gv-search-date.gv-search-date-range label:not(.single-public *) {
    color: var(--ea-gray-mid, #A7A7A7) !important;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* -- form label generique -- */
form label:not(.single-public *), .acf-form .acf-field label:not(.single-public *) {
    font-size: 13px;
    margin: 10px 0;
    text-transform: none;
    color: var(--ea-gray-dark, #373033);
}

/* === SOCLE GLOBAL -- TRANCHE 2 : LIENS === */
/* ================================================================== *
 * SOCLE GLOBAL — TRANCHE 2 : LIENS (16/07/2026)                        *
 * Decision Mathieu : plus aucun lien souligne sur l'intranet, couleur   *
 * par defaut rose EA (jamais bleu). Remplace les deux regles heritees   *
 * "a:not(.ea-v2 *):not(.gv-template-table:has(.gv-container.ea-v2) *)"  *
 * retirees de style.css (bleu #10b8fd au repos, bleu fonce souligne au  *
 * survol #07044b) — recopiees verbatim dans ea-legacy-public.css pour   *
 * les 3 pages publiques sanctuarisees (CLAUDE.md), non touchees par ce  *
 * socle. Guard ":not(.ea-public-shell *)" : meme mecanisme que la       *
 * section 8.9 (chrome lightbox), plus robuste que ":not(.single-public  *
 * *)" de la Tranche 1 (classe posee par filtre sur le CPT "public",     *
 * pas par le seul body-class automatique de WordPress). Specificite     *
 * volontairement basse (0,1,1) : tout composant qui fixe deja sa propre *
 * couleur (boutons, capsules document/statut, .ea-danger-link, lien du  *
 * pied de fiche, admin bar) reste inchange, ses selecteurs etant tous   *
 * plus specifiques que ce socle.                                        *
 * ================================================================== */
a:not(.ea-public-shell *) {
  color: var(--ea-pink, #FF3683);
  text-decoration: none;
}
a:not(.ea-public-shell *):hover {
  color: #e22a72;
}

/* === 1. CONTENEUR === */
/* --------------------------- *
 * 1. CONTENEUR — la carte     *
 *    Le conteneur ne porte plus le radius/l'ombre à lui seul : voir         *
 *    section "1B. CARTE UNIFIÉE" plus bas — .gv-widgets-header et          *
 *    .gv-widgets-footer sont des FRÈRES DOM du conteneur (confirmé par     *
 *    inspection navigateur le 10/07/2026), pas des enfants ; pour qu'ils   *
 *    lisent comme une seule carte iso maquette, le radius va sur les       *
 *    coins extérieurs réels (haut du header, bas du footer) et le         *
 *    conteneur du milieu reste un rectangle plat.                        *
 * --------------------------- */
.gv-container.ea-v2 {
  background: var(--ea-white, #fff);
  border-radius: 0;
  box-shadow: 0 8px 30px rgb(0 0 0 / .04);
  padding: 0;
  /* 15/07/2026 : "overflow: hidden" seul (avant) rognait silencieusement le
     tableau dès que la fenêtre devenait plus étroite que sa largeur naturelle
     (table-layout:auto, colonnes dimensionnées sur leur contenu — voir plus
     bas) — aucun défilement possible, contenu simplement invisible au-delà
     du bord. overflow-x:auto redonne une vraie barre de défilement
     horizontale ; overflow-y reste hidden (comportement identique à avant,
     nécessaire pour que les coins arrondis de la carte restent nets). */
  overflow-x: auto;
  overflow-y: hidden;
}

/* === 2. TABLEAU === */
/* --------------------------- *
 * 2. TABLEAU                  *
 * --------------------------- */
.gv-container.ea-v2 table.gv-table-view {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13.5px;
  /* GravityView force table-layout:fixed dans son propre CSS ; avec les largeurs
     en % héritées de l'ancien layout (Document/Client-mission/Statut) et les
     nouvelles colonnes groupées sans largeur définie, l'espace restant se
     répartissait à parts égales entre elles sans tenir compte du contenu réel
     (bouton Actions débordant sur Statut). auto = largeur basée sur le contenu. */
  table-layout: auto;
}
.gv-container.ea-v2 table.gv-table-view thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--ea-white, #fff);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--ea-gray-mid, #A7A7A7);
  text-align: left; white-space: nowrap;
  padding: 14px 16px;
  border-bottom: 1px solid var(--ea-gray-border, #ddd);
}
.gv-container.ea-v2 table.gv-table-view thead th a { color: inherit; text-decoration: none; }
.gv-container.ea-v2 table.gv-table-view thead th a:hover { color: var(--ea-pink, #FF3683); }

.gv-container.ea-v2 table.gv-table-view tbody td {
  padding: 12px 16px;
  height: 56px; /* densité Confort par défaut */
  border-bottom: 1px solid var(--ea-gray-bg-light, #F6F6F6);
  vertical-align: middle;
  background: var(--ea-white, #fff);
}
.gv-container.ea-v2 table.gv-table-view tbody tr:hover td {
  background: var(--ea-blue-bg, #EAF6FD);
}
/* CORRIGÉ le 16/07/2026 (capture : bordures bleues autour des cellules après
   un simple clic souris sur "Détails") : ":focus-within" se déclenche dès
   qu'un lien de la ligne reçoit le focus, quelle que soit la modalité
   (souris ou clavier) — ce n'était pas l'intention (repère d'accessibilité
   clavier). ":has(:focus-visible)" ne matche que quand le navigateur juge
   lui-même l'indicateur de focus nécessaire (Tab, jamais un clic souris). */
.gv-container.ea-v2 table.gv-table-view tbody tr:has(:focus-visible) td {
  outline: 2px solid var(--ea-blue-border, #3DA5EC); outline-offset: -2px;
}
/* Même principe étendu à tout lien du skin v2 (souris = pas d'anneau de
   focus générique du navigateur, clavier = anneau rose discret conservé
   pour l'accessibilité). */
.ea-v2 a:focus:not(:focus-visible) { outline: none; }
.ea-v2 a:focus-visible { outline: 2px solid var(--ea-pink, #FF3683); outline-offset: 2px; }

/* Densité Compact (activée par la future bascule) */
.gv-container.ea-v2.ea-compact table.gv-table-view tbody td { height: 40px; padding: 6px 16px; font-size: 12.5px; }

/* Hiérarchie dans les cellules */
.gv-container.ea-v2 tbody td .ea-cell-main { font-weight: 600; }
.gv-container.ea-v2 tbody td .ea-cell-sub  {
  color: var(--ea-gray-mid, #A7A7A7); font-size: 12px; margin-top: 2px;
  /* Troncature 2 lignes (13/07/2026) : hauteur de ligne homogène quand le
     texte déborde (mission, demande...) — texte complet lisible au survol
     via l'attribut title porté par le contenu source quand nécessaire. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gv-container.ea-v2 tbody td a { color: var(--ea-pink, #FF3683); font-weight: 600; text-decoration: none; }
.gv-container.ea-v2 tbody td a:hover { text-decoration: underline; }

/* Colonne "Entité · Pôles" (vue 21496) : dérogation à la hiérarchie
   ea-cell-main/ea-cell-sub par défaut — les pôles priment sur l'entité. */
.gv-container.ea-v2 tbody td .ea-cell-main:has(+ .ea-poles-split) {
  color: var(--ea-gray-mid, #A7A7A7);
  font-weight: 500;
  font-size: 11px;
}
.gv-container.ea-v2 tbody td .ea-cell-sub.ea-poles-split { color: var(--ea-dark, #171717); }

/* Force les mois/jours FR (traduits en anglais capitalisé par le snippet
   WPCode "Traduction des dates", 95654) en minuscule dans les cellules —
   PHP date() capitalise nativement, la traduction hérite de cette casse. */
.ea-lc { text-transform: lowercase; }

/* Colonne "Mission" (ea_mission, snippets/ea-date-shortcode_wpcode-95925.php) :
   deux lignes ("À partir du/Depuis le X", "jusqu'au Y") sans gras — annule le
   gras hérité de la classe utilitaire ".bold" éventuellement posée sur le
   <td> parent (custom_class de champ GravityView) : une règle de poids
   explicite sur l'élément lui-même l'emporte toujours sur l'héritage. */
.gv-container.ea-v2 .ea-cell-dates {
  font-weight: 400;
  /* 13/07/2026 : héritait des 13.5px de .ea-cell-main (dont il n'a que le
     poids neutralisé ci-dessus), trop grand pour "À partir du/jusqu'au" sur
     deux lignes -> passait parfois sur 4 lignes dans la colonne Mission. */
  font-size: 12px;
}
/* 15/07/2026 : la ligne "Depuis le X" + icône d'alerte retombait sur deux
   lignes (le texte seul remplissait déjà toute la largeur de la colonne).
   Forcé sur une ligne : le tableau est en table-layout:auto (colonnes
   dimensionnées sur leur contenu), la colonne Mission s'élargit légèrement
   pour accueillir l'icône plutôt que de la faire déborder ou l'écraser. */
.gv-container.ea-v2 .ea-cell-dates > div {
  white-space: nowrap;
}

/* === 3. STATUTS === */
/* --------------------------------------------- *
 * 3. STATUTS — bordure latérale + pastille      *
 *    (classes posées par le snippet serveur)    *
 * --------------------------------------------- */
.gv-container.ea-v2 tbody tr td:first-child { border-left: 5px solid transparent; }
.gv-container.ea-v2 tbody tr.ea-st-ok     td:first-child { border-left-color: var(--ea-green-dark, #11CC80); }
.gv-container.ea-v2 tbody tr.ea-st-wait   td:first-child { border-left-color: var(--ea-pink, #FF3683); }
.gv-container.ea-v2 tbody tr.ea-st-expire td:first-child { border-left-color: var(--ea-orange, #FF6636); }
.gv-container.ea-v2 tbody tr.ea-st-late   td:first-child { border-left-color: #d9264c; }
.gv-container.ea-v2 tbody tr.ea-st-draft  td:first-child { border-left-color: #555555; }
/* Vue 21496 : mêmes couleurs que les pastilles --sent/--requested/--cancelled
   ci-dessous (posées par le snippet ea-status-row-class, cf. snippets/) —
   cohérence pastille/bordure confirmée le 10/07/2026 pour les 3 statuts. */
.gv-container.ea-v2 tbody tr.ea-st-sent      td:first-child { border-left-color: var(--ea-orange, #FF6636); }
.gv-container.ea-v2 tbody tr.ea-st-requested td:first-child { border-left-color: var(--ea-orange, #FF6636); }
.gv-container.ea-v2 tbody tr.ea-st-cancelled td:first-child { border-left-color: var(--ea-gray-light, #C9C9C9); }
/* "Signé, expiré" (ambre) / "Terminé" (rouge brique, transverse Signé/Annulé,
   13/07/2026) — distincts de l'orange "en attente d'action" et du gris "Annulé". */
.gv-container.ea-v2 tbody tr.ea-st-ok-expired td:first-child { border-left-color: var(--ea-amber, #C98A1B); }
.gv-container.ea-v2 tbody tr.ea-st-terminated    td:first-child { border-left-color: var(--ea-brick, #B23B3B); }

/* Liseré de fond très léger sur la 1ère cellule, décliné par statut
   (13/07/2026, à valider en capture) — dégradé depuis la bordure latérale,
   s'estompe à 60% de la largeur de cellule. */
.gv-container.ea-v2 tbody tr.ea-st-ok        td:first-child { background: linear-gradient(90deg, rgba(17,204,128,.06), transparent 60%); }
.gv-container.ea-v2 tbody tr.ea-st-wait      td:first-child { background: linear-gradient(90deg, rgba(255,54,131,.06), transparent 60%); }
.gv-container.ea-v2 tbody tr.ea-st-expire    td:first-child { background: linear-gradient(90deg, rgba(255,102,54,.06), transparent 60%); }
.gv-container.ea-v2 tbody tr.ea-st-late      td:first-child { background: linear-gradient(90deg, rgba(217,38,76,.06), transparent 60%); }
.gv-container.ea-v2 tbody tr.ea-st-draft     td:first-child { background: linear-gradient(90deg, rgba(85,85,85,.06), transparent 60%); }
.gv-container.ea-v2 tbody tr.ea-st-sent      td:first-child { background: linear-gradient(90deg, rgba(255,102,54,.06), transparent 60%); }
.gv-container.ea-v2 tbody tr.ea-st-requested td:first-child { background: linear-gradient(90deg, rgba(255,102,54,.06), transparent 60%); }
.gv-container.ea-v2 tbody tr.ea-st-cancelled td:first-child { background: linear-gradient(90deg, rgba(201,201,201,.06), transparent 60%); }
.gv-container.ea-v2 tbody tr.ea-st-ok-expired td:first-child { background: linear-gradient(90deg, rgba(201,138,27,.08), transparent 60%); }
.gv-container.ea-v2 tbody tr.ea-st-terminated    td:first-child { background: linear-gradient(90deg, rgba(178,59,59,.08), transparent 60%); }
/* Le fond plein au survol (".gv-table-view tbody tr:hover td", section 2
   ci-dessus) est déjà plus spécifique que ce liseré (élément "table"
   supplémentaire dans son sélecteur) : il reste prioritaire sans règle
   dédiée. */

.gv-container.ea-v2 .ea-status {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600; font-size: 12.5px; white-space: nowrap;
  background: none; padding: 0; border-radius: 0; /* neutralise l'ancienne pilule pleine */
}
.gv-container.ea-v2 .ea-status::before { content: ""; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.gv-container.ea-v2 .ea-status--ok::before     { background: var(--ea-green-dark, #11CC80); }
.gv-container.ea-v2 .ea-status--wait::before   { background: var(--ea-pink, #FF3683); }
.gv-container.ea-v2 .ea-status--expire::before { background: var(--ea-orange, #FF6636); }
.gv-container.ea-v2 .ea-status--late::before   { background: #d9264c; animation: ea-pulse 1.6s infinite; }
.gv-container.ea-v2 .ea-status--draft::before  { background: #555555; }
/* Vue 21496 (suivi des contrats). Historique de ces deux réglages le
   10/07/2026 : --sent est passé orange -> rose puis revient à orange après
   vérification visuelle en conditions réelles (Mathieu confirme que le
   rendu orange, cohérent avec la bordure latérale tr.ea-st-sent, est le bon).
   --requested a d'abord été un anneau creux (orange, vide au centre), jugé
   peu lisible à l'usage réel -> abandonné au profit d'un point plein orange
   avec pulsation (même traitement que --late, teinte orange dédiée plutôt
   que réutiliser le glow rouge). --cancelled reste gris (pastille + texte). */
.gv-container.ea-v2 .ea-status--sent::before      { background: var(--ea-orange, #FF6636); }
.gv-container.ea-v2 .ea-status--cancelled {
  color: var(--ea-gray-mid, #A7A7A7);
}
.gv-container.ea-v2 .ea-status--cancelled::before { background: var(--ea-gray-light, #C9C9C9); }
.gv-container.ea-v2 .ea-status--requested::before {
  background: var(--ea-orange, #FF6636);
  animation: ea-pulse-orange 1.6s infinite;
}
@keyframes ea-pulse { 50% { box-shadow: 0 0 0 4px rgb(217 38 76 / .15); } }
@keyframes ea-pulse-orange { 50% { box-shadow: 0 0 0 4px rgb(255 102 54 / .18); } }
@media (prefers-reduced-motion: reduce) {
  .gv-container.ea-v2 .ea-status--late::before,
  .gv-container.ea-v2 .ea-status--requested::before { animation: none; }
}
/* "Signé, expiré" / "Terminé" (13/07/2026, transverse Signé/Annulé), cf.
   tr.ea-st-ok-expired/terminated ci-dessus pour le choix des couleurs. */
.gv-container.ea-v2 .ea-status--ok-expired {
  color: var(--ea-amber, #C98A1B);
}
.gv-container.ea-v2 .ea-status--ok-expired::before { background: var(--ea-amber, #C98A1B); }
.gv-container.ea-v2 .ea-status--terminated {
  color: var(--ea-brick, #B23B3B);
}
.gv-container.ea-v2 .ea-status--terminated::before { background: var(--ea-brick, #B23B3B); }
/* Raison de fin de contrat (ea_status, "Terminé" uniquement) : valeur du
   champ "Validité du contrat" en petit sous le statut. */
.gv-container.ea-v2 .ea-status-reason {
  font-size: 11px; color: var(--ea-gray-mid, #A7A7A7); font-weight: 500;
  margin-top: 2px;
}
/* Alerte "mission déjà démarrée/terminée sans contrat signé" (15/07/2026,
   demande Mathieu) : texte rouge sous le badge de statut (même gabarit que
   .ea-status-reason ci-dessus), colonne Statut — et pastille d'alerte dans
   la colonne Mission, à côté de "Depuis le X" (ea_mission). Calcul partagé
   côté PHP (ea_compute_mission_date_alert), uniquement pour les statuts
   En préparation / Envoyé au client / Envoi demandé. */
.gv-container.ea-v2 .ea-status-alert {
  font-size: 11px; color: var(--ea-red, #fa0555); font-weight: 500;
  margin-top: 2px;
}
.gv-container.ea-v2 .ea-mission-alert-ico {
  display: inline-block;
  width: 14px; height: 14px;
  vertical-align: -2px;
  margin-left: 4px;
  background-color: var(--ea-red, #fa0555);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}

/* Étiquette de pôle : neutre, une seule couleur pour tous les pôles */
.gv-container.ea-v2 .ea-tag, .gv-container.ea-v2 td.tags span {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: var(--radius-round, 50px);
  background: var(--ea-gray-bg-light, #F6F6F6); color: var(--ea-gray-dark, #373033);
}

/* === 4. ACTIONS === */
/* --------------------------------------------- *
 * 4. ACTIONS — hiérarchie des boutons           *
 *    Balisage (10/07/2026, complété 13/07/2026) :*
 *    .ea-act-primary seul en tête, puis          *
 *    .ea-actions__row contenant .ea-act-view +   *
 *    .ea-act-danger (absent si pas de lien       *
 *    Supprimer), puis .ea-act-note en pleine     *
 *    largeur si message de repli.                *
 * --------------------------------------------- */
.gv-container.ea-v2 .ea-actions {
  display: flex; flex-direction: column; gap: 6px;
  align-items: stretch; max-width: 210px;
}
.gv-container.ea-v2 .ea-actions__row { display: flex; gap: 6px; }
.gv-container.ea-v2 .ea-actions__row > div { flex: 1; }
.gv-container.ea-v2 .ea-actions a {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 4px 12px; border-radius: var(--radius-round, 50px);
  text-decoration: none !important;
}
.gv-container.ea-v2 .ea-actions__row a { display: block; text-align: center; }
/* Consultation : contour neutre */
.gv-container.ea-v2 .ea-actions .ea-act-view a {
  background: var(--ea-white, #fff); border: 1px solid var(--ea-gray-border, #ddd);
  color: var(--ea-gray-dark, #373033);
  white-space: nowrap;
}
.gv-container.ea-v2 .ea-actions .ea-act-view a:hover { border-color: var(--ea-gray-dark, #373033); }
/* Action principale : rose plein, seule en tête et pleine largeur
   (display: block). Libellé raccourci ("Demander l'envoi", title complet au
   survol, 13/07/2026) tenu sur une seule ligne : nowrap + taille réduite
   plutôt que de forcer la colonne à s'élargir (débordait sur Statut). */
.gv-container.ea-v2 .ea-actions .ea-act-primary a {
  background: var(--ea-pink, #FF3683); border: 1px solid var(--ea-pink, #FF3683);
  color: var(--ea-white, #fff) !important;
  display: block; text-align: center; white-space: nowrap; line-height: 1.3;
  padding: 6px 10px; font-size: 10.5px; letter-spacing: .02em;
}
.gv-container.ea-v2 .ea-actions .ea-act-primary a:hover { background: #e22a72; border-color: #e22a72; }
/* Destructrice : discrète, se révèle au survol */
.gv-container.ea-v2 .ea-actions .ea-act-danger a {
  background: transparent; border: 1px solid transparent; color: #d9264c !important;
}
.gv-container.ea-v2 .ea-actions .ea-act-danger a:hover {
  border-color: #d9264c; background: var(--ea-red-bg, #FAEDED);
}
/* Message de repli "Ce {type} ne peut pas être supprimé" (ea_actions) :
   13/07/2026, sort de la ligne Détails/Supprimer — pleine largeur, sous le
   bouton Détails (structure .ea-actions > .ea-act-primary,
   .ea-actions__row [Détails seul], .ea-act-note). */
.gv-container.ea-v2 .ea-actions .ea-act-note {
  font-size: 10.5px; color: var(--ea-gray-light, #C9C9C9); text-align: center;
}

/* === 4B. ICONES DE DOCUMENT === */
/* --------------------------------------------- *
 * 4B. ICÔNES DE DOCUMENT (.ea-doc-ico)          *
 * --------------------------------------------- */
.gv-container.ea-v2 .ea-doc-ico {
  display: inline-flex; align-items: center; gap: 3px;
  vertical-align: -3px; margin-left: 4px;
  flex: none; /* jamais rétréci par l'ellipsis du libellé voisin */
  /* 13/07/2026 : plus de couleur propre (draft=gris/pdf=rose) — l'icône suit
     désormais le lien via currentColor, lui-même coloré par statut de ligne
     ci-dessous, pour que toute la colonne Document (texte + icône) porte la
     couleur du statut plutôt qu'une distinction brouillon/final séparée. */
}
.gv-container.ea-v2 .ea-doc-ico__tag {
  font-size: 9px; font-weight: 800; letter-spacing: .04em;
  background: var(--ea-pink, #FF3683); color: #fff; padding: 1px 4px; border-radius: 4px;
}
/* Le Document est l'élément clé du tableau : sa référence (ea-cell-main)
   ressort davantage que dans les autres colonnes. td.first identifie la
   colonne Document (custom_class de la vue 21496). Taille réduite le
   13/07/2026 (14px -> 12.5px) : "Devis en préparation" etc. retombait
   systématiquement sur deux lignes — insuffisant seul en prod (métrique
   réelle de Montserrat), complété ci-dessous par une troncature garantie. */
.gv-container.ea-v2 td.first .ea-cell-main { font-size: 12.5px; }
/* Garantit une seule ligne quel que soit le libellé (13/07/2026) : le <a>
   devient un conteneur flex, le texte (.ea-doc-label) peut se tronquer en
   ellipsis indépendamment de l'icône (flex:none ci-dessus) — min-width:0
   nécessaire pour qu'un enfant flex accepte de rétrécir sous sa largeur de
   contenu naturelle. Libellé complet toujours disponible en title (survol).
   border-radius/padding : pastille de survol (cf. règle :hover plus bas). */
.gv-container.ea-v2 td.first .ea-cell-main a {
  display: inline-flex; align-items: center; max-width: 100%;
  border-radius: 6px; padding: 2px 6px; margin: -2px -6px;
}
.gv-container.ea-v2 .ea-doc-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
/* Lien (+ icône, via currentColor) coloré selon le statut de la ligne
   (13/07/2026, demande Mathieu) — mêmes teintes que la colonne Statut. */
.gv-container.ea-v2 tbody tr.ea-st-draft      td.first .ea-cell-main a { color: #555555; }
.gv-container.ea-v2 tbody tr.ea-st-sent       td.first .ea-cell-main a,
.gv-container.ea-v2 tbody tr.ea-st-requested  td.first .ea-cell-main a { color: var(--ea-orange, #FF6636); }
.gv-container.ea-v2 tbody tr.ea-st-cancelled  td.first .ea-cell-main a { color: var(--ea-gray-light, #C9C9C9); }
.gv-container.ea-v2 tbody tr.ea-st-ok         td.first .ea-cell-main a { color: var(--ea-green-dark, #11CC80); }
.gv-container.ea-v2 tbody tr.ea-st-ok-expired td.first .ea-cell-main a { color: var(--ea-amber, #C98A1B); }
.gv-container.ea-v2 tbody tr.ea-st-terminated    td.first .ea-cell-main a { color: var(--ea-brick, #B23B3B); }
/* Badge "PDF" (ea-doc-ico__tag, ne sort que du rendu "Signé" de
   ea_document — une entrée Terminée issue d'un Annulé n'a pas de badge à
   colorer, cette règle est alors simplement sans effet) aligné sur la même
   couleur que le lien — restait fixe en rose auparavant, détonnait avec un
   lien devenu vert/ambre/rouge. */
.gv-container.ea-v2 tbody tr.ea-st-ok         td.first .ea-doc-ico__tag { background: var(--ea-green-dark, #11CC80); }
.gv-container.ea-v2 tbody tr.ea-st-ok-expired td.first .ea-doc-ico__tag { background: var(--ea-amber, #C98A1B); }
.gv-container.ea-v2 tbody tr.ea-st-terminated    td.first .ea-doc-ico__tag { background: var(--ea-brick, #B23B3B); }
/* Au survol : pastille de fond (teinte de la couleur du lien) plutôt que le
   soulignement générique des liens de cellule — même traitement que
   .ea-ext-link (13/07/2026). color-mix() : support natif Chrome/Safari/
   Firefox récents, contexte interne (pas de contrainte de compatibilité
   ancienne version). */
.gv-container.ea-v2 td.first .ea-cell-main a:hover {
  text-decoration: none;
  background-color: color-mix(in srgb, currentColor 14%, transparent);
}

/* === 4C. LIEN CLIENT === */
/* --------------------------------------------- *
 * 4C. LIEN CLIENT (.ea-ext-link)                *
 *    Le nom du client est du texte simple dans  *
 *    .ea-cell-main (héritage var(--ea-dark)) ;  *
 *    seule l'icône est un lien externe.         *
 * --------------------------------------------- */
.gv-container.ea-v2 .ea-ext-link {
  color: var(--ea-pink, #FF3683); display: inline-flex; vertical-align: -2px;
  margin-left: 4px; padding: 2px; border-radius: 6px;
}
.gv-container.ea-v2 .ea-ext-link:hover { background: var(--ea-pink-light); }

/* === 4D. ICONES EN MASQUE CSS === */
/* --------------------------------------------- *
 * 4D. ICÔNES EN MASQUE CSS (.ea-ext-link,       *
 *     .ea-doc-ico) — les SVG inline sont        *
 *     refusés par la sanitisation des Custom    *
 *     Content ; on dessine donc l'icône en      *
 *     mask-image (data-URI) + background-color: *
 *     currentColor plutôt qu'en <svg> ou <i>.    *
 * --------------------------------------------- */
.gv-container.ea-v2 .ea-ext-link::before {
  content: "";
  display: inline-block;
  width: 15px; height: 15px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7zm-9 2c-1.1 0-2 .9-2 2v11c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2v-6h-2v6H5V7h6V5H5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7zm-9 2c-1.1 0-2 .9-2 2v11c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2v-6h-2v6H5V7h6V5H5z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.gv-container.ea-v2 .ea-doc-ico::before {
  content: "";
  display: inline-block;
  width: 18px; height: 18px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}

/* === 1B. CARTE UNIFIEE === */
/* --------------------------------------------- *
 * 1B. CARTE UNIFIÉE — header/footer frères       *
 *    Structure réelle confirmée par inspection   *
 *    navigateur le 10/07/2026 :                  *
 *    .gv-template-table                          *
 *      > .gv-widgets-header (bannière + recherche*
 *        + pagination haute — cette dernière     *
 *        masquée ci-dessous)                     *
 *      > .gv-container.ea-v2 (le tableau)         *
 *      > .gv-widgets-footer (compteur + pager)    *
 *    Les 3 sont des FRÈRES DOM, flush verticale-  *
 *    ment (pas d'espace entre eux) : pour qu'ils  *
 *    lisent comme une seule carte iso maquette,   *
 *    le radius va sur les coins extérieurs réels  *
 *    et une ombre identique est posée sur les 3.  *
 * --------------------------------------------- */
.gv-template-table:has(.gv-container.ea-v2) {
  font-family: var(--font-ui, 'Montserrat', sans-serif);
}
.gv-template-table:has(.gv-container.ea-v2) .gv-widgets-header {
  background: var(--ea-white, #fff);
  border-radius: var(--radius-xl, 24px) var(--radius-xl, 24px) 0 0;
  box-shadow: 0 8px 30px rgb(0 0 0 / .04);
  padding: 20px 24px 4px;
}
.gv-template-table:has(.gv-container.ea-v2) .gv-widgets-footer {
  border-radius: 0 0 var(--radius-xl, 24px) var(--radius-xl, 24px);
  box-shadow: 0 8px 30px rgb(0 0 0 / .04);
}
/* Pagination/compteur du haut (zones header_left/header_right : "Affiche
   X - Y de Z" + taille de page + numéros de page) : redondante avec le
   pied de tableau et absente de la maquette d'intention — masquée plutôt
   que retirée de la config de vue (réversible sans repasser par le MCP). */
.gv-template-table:has(.gv-container.ea-v2) .gv-widgets-header > .gv-grid-row:last-child {
  display: none;
}
/* Bannière "documents en attente" (widget Custom Content, header_top) :
   pastille contenant uniquement "N documents" + reste de la phrase en texte
   dark à côté (remplace les anciennes classes utilitaires .texterose/.orange
   (texte plein coloré), puis .ea-banner-line/.ea-count-pill, puis une
   première version .ea-notice en pastille pleine ligne jugée trop appuyée
   à l'usage — retour à une pastille resserrée sur le nombre, 13/07/2026). */
.gv-template-table:has(.gv-container.ea-v2) .ea-notice {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ea-dark, #171717);
}
.gv-template-table:has(.gv-container.ea-v2) .ea-notice-count {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-round, 50px);
  font-size: 12px;
  font-weight: 700;
}
.gv-template-table:has(.gv-container.ea-v2) .ea-notice-count--pink {
  background: var(--ea-pink-light, #ffe0ec);
  color: var(--ea-pink, #FF3683);
}
.gv-template-table:has(.gv-container.ea-v2) .ea-notice-count--orange {
  background: #FFF3ED;
  color: var(--ea-orange, #FF6636);
}
/* Ligne "Rechercher" : le bouton se retrouve seul dans une .gv-grid-col-1-2
   à 50%, avec une seconde colonne vide à côté (moitié d'espace perdue,
   confirmé par inspection). On rétrécit la colonne du bouton à son contenu
   et on masque la colonne vide, sans toucher aux .gv-grid-col-1-2 utilisées
   ailleurs sur le site (scope :has() precis à cette ligne de la vue 21496). */
.gv-template-table:has(.gv-container.ea-v2) .gv-widget-search-general-search .gv-grid-row:has(.gv-search-box-submit) {
  display: flex; align-items: center;
}
.gv-template-table:has(.gv-container.ea-v2) .gv-widget-search-general-search .gv-grid-row:has(.gv-search-box-submit) > .gv-grid-col-1-2 {
  width: auto !important; flex: none;
}
.gv-template-table:has(.gv-container.ea-v2) .gv-widget-search-general-search .gv-grid-row:has(.gv-search-box-submit) > .gv-grid-col-1-2:not(:has(.gv-search-box-submit)) {
  display: none;
}

/* === 5. RECHERCHE === */
/* --------------------------------------------- *
 * 5. RECHERCHE (widget dans le scope de la vue) *
 *    Le widget est rendu dans .gv-widgets-header,*
 *    FRÈRE de .gv-container (pas un descendant) — *
 *    ".ea-v2 .gv-widget-search" ne matchait donc  *
 *    jamais. Scope via :has() sur l'ancêtre       *
 *    commun .gv-template-table (validé navigateur,*
 *    support :has() natif Chrome/Safari/Firefox). *
 * --------------------------------------------- */
/* === 5.0 CHAMPS DU WIDGET (FORM) === */
/* 5.0 Les champs du widget sont dans un <form>, ciblés par la règle globale
   "form select, form input..." (ea-intranet.css section formulaires, ~L.905)
   et par le label hérité "div.gv-search-box.gv-search-field-select label..."
   (ea-intranet.css, section historique ~L.1069) : ces deux règles portent
   désormais leur propre garde ":not(.gv-template-table:has(.gv-container.ea-v2) *)"
   à la source — plus besoin de !important ici pour les battre. */
.gv-template-table:has(.gv-container.ea-v2) .gv-widget-search label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ea-gray-mid, #A7A7A7);
}
.gv-template-table:has(.gv-container.ea-v2) .gv-widget-search select,
.gv-template-table:has(.gv-container.ea-v2) .gv-widget-search input[type="text"],
.gv-template-table:has(.gv-container.ea-v2) .gv-widget-search input[type="search"],
.gv-template-table:has(.gv-container.ea-v2) .gv-widget-search input[type="date"] {
  background: var(--ea-gray-input, #F8F8F8);
  border: 1px solid transparent;
  border-radius: var(--radius-round, 50px);
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-ui, 'Montserrat', sans-serif);
  box-shadow: none;
  color: var(--ea-dark, #171717);
  /* 15/07/2026 : un <select> natif prend sa largeur sur son option la plus
     longue (ex. "AEZO - AFRICA ECONOMIC ZONE ORGANISATION" pour le champ
     Client), pas sur son conteneur — il débordait sur les champs voisins.
     Largeur pilotée par le conteneur, texte tronqué avec ellipsis sinon. */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.gv-template-table:has(.gv-container.ea-v2) .gv-widget-search select:focus,
.gv-template-table:has(.gv-container.ea-v2) .gv-widget-search input:focus {
  border-color: var(--ea-pink, #FF3683);
  background: var(--ea-white, #fff);
  outline: none;
}
/* Grille de recherche : disposition horizontale (13/07/2026, demande
   Mathieu) — par defaut GravityView empile un champ par ligne
   (".gv-widget-search" porte la classe "gv-search-rows" ; "gv-search-box"
   n'a pas de largeur propre, donc rien ne les met en ligne sans regle
   dediee). Le veritable conteneur des champs, confirme par inspection du
   rendu reel, est ".gv-search-widget-area" (frere du "gv-widget-search",
   pas un descendant du meme niveau que ".gv-widget-search" lui-meme) :
   passe en flex-wrap pour tenir sur une seule ligne, ou deux si la largeur
   ne suffit pas. Le gap vertical de 8px entre les deux champs date reste
   couvert par le correctif global ".gv-date-range-picker" (hors scope
   ea-v2, fin de fichier, validé précédemment) — non dupliqué ici. */
.gv-template-table:has(.gv-container.ea-v2) .gv-search-widget-area {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  /* Resserré 16 -> 10px (15/07/2026) pour aider la rangée à tenir sur une
     seule ligne (demande Mathieu) une fois le champ date élargi à 370px. */
  gap: 12px 10px;
}
.gv-template-table:has(.gv-container.ea-v2) .gv-search-widget-area .gv-search-box {
  /* flex-grow a 0 (pas 1) : sans ca, 4-5 champs seulement sur la ligne se
     partagent tout l'espace disponible et s'etirent tres large, jusqu'a
     ce qu'un dernier champ depasse de quelques pixels et retombe seul a
     la ligne suivante. Largeur modeste et constante -> retombe proprement
     sur 1 ou 2 lignes selon la largeur reelle disponible.
     170 -> 150px (15/07/2026) : avec le champ date à 370px, la rangée ne
     tenait plus sur une ligne à 170px/champ — resserré pour repasser sous
     la largeur du conteneur (1192px) sur un écran desktop standard.
     margin:0 : ".gv-search-box" porte par défaut (GravityView) une marge
     0 10px qui s'ajoute au gap flex (10+10+10=30px d'écart réel constaté
     au lieu des 10px voulus) — neutralisée, le gap du conteneur suffit. */
  flex: 0 1 150px;
  min-width: 120px;
  margin: 0;
}
.gv-template-table:has(.gv-container.ea-v2) .gv-search-widget-area .gv-search-box.gv-search-date {
  /* Élargi 220 -> 300 -> 370px (15/07/2026) pour loger les deux champs
     début/fin côte à côte au lieu d'empilés (cf. .gv-search-date-range plus
     bas). 300px ne suffisait pas : chaque case (.gk-calendar-input-wrapper)
     a une largeur naturelle incompressible d'environ 175px (contenu du
     composant, ne rétrécit pas avec flex-shrink) — 2x175 + 8px de gap = 358px
     minimum, d'où le chevauchement de 20px constaté à 300px. */
  flex-basis: 370px;
}
/* Libellé "Date de démarrage de la mission" plus haut que les autres
   libellés de la rangée (retour Mathieu 22/07/2026, capture) : la rangée
   est alignée par le bas (align-items:flex-end, cf. ci-dessus, pour que le
   bouton Rechercher reste au niveau des champs) — cette boîte-ci est plus
   haute que les autres (label + 2 champs + 2 sous-libellés "Date de
   début"/"Date de fin", contre label + 1 champ pour les autres), donc son
   sommet (et son libellé) démarre plus haut une fois calé sur le bas.
   Écart mesuré en live : 17.75px. Premier essai en margin-top : rejeté
   après coup — un margin-top sur le libellé grandit la hauteur de SA
   PROPRE boîte d'autant, qui remonte donc d'autant en restant calée sur
   le bas (align-items:flex-end) : le libellé reste au même endroit
   relatif, seule la boîte grandit (constaté en vérification : écart
   inchangé après déploiement). Remplacé par un décalage visuel pur
   (position:relative + top), qui ne modifie pas la hauteur de la boîte
   ni l'alignement des autres champs de la rangée.
   Classe réelle du champ mesurée en live : ".gv-search-date.gv-search-
   field-date_range" (avec underscore) — PAS ".gv-search-date-range" (sans
   underscore) utilisée par les sélecteurs préexistants ailleurs dans ce
   fichier pour ce même type de champ dans un contexte différent (jamais
   vérifiée ici, premier sélecteur qui ne matchait donc jamais rien sur
   cette vue). */
.gv-template-table:has(.gv-container.ea-v2) .gv-search-widget-area .gv-search-box.gv-search-date > label {
  position: relative;
  top: 17.75px;
}
.gv-template-table:has(.gv-container.ea-v2) .gv-search-widget-area .gv-search-box-submit {
  flex: 0 0 auto;
  /* Le champ bouton hérite du plancher générique min-width:130px (regle
     .gv-search-box ci-dessus) alors que le bouton seul fait ~145px — la
     boite etait plus etroite que son contenu, ce qui poussait "Effacer"
     (frere du bouton, meme boite) sur une ligne a part, isole. Bouton et
     lien Effacer alignes cote a cote dans leur propre ligne flex. */
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
}
.gv-template-table:has(.gv-container.ea-v2) .gv-search-date-range {
  /* Colonne -> ligne (15/07/2026) : voir commentaire flex-basis ci-dessus,
     meme correctif. La regle globale ".gv-date-range-picker .gv-date-picker
     { width:100% !important }" (fin de fichier, hors scope ea-v2) force
     chaque champ a occuper toute la largeur disponible et donc a s'empiler
     — neutralisee ci-dessous specifiquement pour ea-v2. */
  display: flex; flex-direction: row; gap: 8px;
}
.gv-template-table:has(.gv-container.ea-v2) .gv-date-range-picker .gv-date-picker {
  width: auto !important;
  flex: 1 1 0;
  min-width: 0;
}
.gv-template-table:has(.gv-container.ea-v2) .gv-widget-search input[type="submit"] {
  background: var(--ea-dark, #171717);
  color: var(--ea-white, #fff);
  border: 0;
  border-radius: var(--radius-round, 50px);
  padding: 10px 22px;
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; cursor: pointer;
  box-shadow: none;
}
.gv-template-table:has(.gv-container.ea-v2) .gv-widget-search input[type="submit"]:hover {
  background: var(--ea-pink, #FF3683);
}
.gv-template-table:has(.gv-container.ea-v2) .gv-search-clear {
  /* Cet <a> porte aussi la classe generique ".button" (markup GravityView) :
     attrape par le socle global pilule (ea-intranet.css ~L.4514,
     color:...!important) concu pour de vrais boutons, pas ce lien discret.
     !important necessaire uniquement sur color, seule propriete que le
     socle global verrouille ainsi. */
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ea-gray-mid, #A7A7A7) !important;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  text-decoration: none; /* retour Mathieu 22/07/2026 : contraire à la règle du site (liens jamais soulignés, cf. socle global Tranche 2) */
  white-space: nowrap;
}
.gv-template-table:has(.gv-container.ea-v2) .gv-search-clear:hover {
  color: var(--ea-pink, #FF3683) !important;
}

/* Widget de recherche par plage de dates (13-15/07/2026) : composant React
   GravityKit (".gk-calendar-*"), jamais habillé jusqu'ici — seule la
   disposition (".gv-date-range-picker" plus bas, hors scope ea-v2) était
   couverte. Les sous-libellés "Date de début"/"Date de fin" sont des <div>
   (".gk-calendar-label"), pas des <label> : invisibles pour la règle
   générique de labels de recherche ci-dessus, d'où le style par défaut du
   composant resté visible malgré le skin v2.
   15/07/2026 (retour Mathieu) : trois problèmes supplémentaires identifiés
   par inspection du rendu réel — (a) icônes du composant en blanc fixe
   (couleur "has-text-color" du composant), invisibles sur nos fonds clairs
   (déclencheur calendrier, flèches mois précédent/suivant) ; (b) le thème
   force <html> à 10px (convention rem=10px), mais ce composant dimensionne
   son texte en rem en supposant un root à 16px — tout son texte interne
   s'affiche donc à 62,5% de la taille prévue (8,75px/7,5px/10px constatés) ;
   (c) padding resserré pour que les deux champs (début/fin) tiennent côte à
   côte dans les 300px du champ (cf. flex-basis plus haut). */
.gv-template-table:has(.gv-container.ea-v2) .gk-calendar-label {
  /* Passe sous la case (15/07/2026, demande Mathieu) au lieu d'au-dessus :
     .gk-calendar-root est en colonne, "order" suffit à inverser l'ordre
     visuel sans toucher au DOM. Objectif : que seul le libellé de champ
     ("Date de démarrage de la mission", au-dessus, une ligne) détermine la
     hauteur du haut du champ — pour qu'il s'aligne avec les libellés
     "Client"/"Statut"/etc des autres champs (rangée en align-items:flex-end,
     donc alignés par le bas des cases ; ce champ étant 2x plus haut que les
     autres à cause de ce sous-libellé, son libellé du haut dépassait). */
  order: 2;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--ea-gray-mid, #A7A7A7);
  font-weight: 700;
  letter-spacing: .02em;
  margin-top: 4px;
}
.gv-template-table:has(.gv-container.ea-v2) .gk-calendar-controls {
  order: 1;
}
.gv-template-table:has(.gv-container.ea-v2) .gk-calendar-input-wrapper {
  background: var(--ea-gray-bg-light, #F6F6F6);
  border: none;
  border-radius: var(--radius-round, 50px);
  padding: 9px 8px 9px 14px;
  height: 38px;
  box-sizing: border-box;
  align-items: center;
}
.gv-template-table:has(.gv-container.ea-v2) .gk-calendar-segment-editable {
  font-size: 13px;
  color: var(--ea-dark, #171717);
  font-weight: 500;
}
.gv-template-table:has(.gv-container.ea-v2) .gk-calendar-segment-literal {
  font-size: 13px;
  color: var(--ea-gray-mid, #A7A7A7);
}
.gv-template-table:has(.gv-container.ea-v2) .gk-calendar-trigger,
.gv-template-table:has(.gv-container.ea-v2) .gk-calendar-reset {
  color: var(--ea-gray-mid, #A7A7A7) !important;
  /* 15/07/2026 : icône jugée trop petite et trop éloignée de la date —
     grossie 15 -> 18px, rapprochée du texte (padding droit de la case
     resserré 10 -> 6px, cf. .gk-calendar-input-wrapper). */
  width: 18px !important;
  height: 18px !important;
}
.gv-template-table:has(.gv-container.ea-v2) .gk-calendar-trigger:hover {
  color: var(--ea-pink, #FF3683) !important;
}
/* Popup calendrier (15/07/2026, 2e passe demandée par Mathieu — "plus clean
   et plus en phase avec la charte") : conteneur déjà correct par défaut
   (fond, bordure, ombre), mais texte à re-tailler (note rem/px ci-dessus),
   icônes blanches à corriger, ET :
   - bordure épaisse ".gk-calendar-weekday-cell { border-bottom: 2px solid
     #000 }" par défaut du composant (noir dur, hors charte) — retirée ;
   - .gk-calendar-date-button ne portait ni couleur ni distinction jour du
     mois / hors mois : attributs réels du composant identifiés par
     inspection (data-outside-month, aria-disabled) plutôt que deviner des
     classes ;
   - l'état "sélectionné" est porté par aria-selected sur la CELLULE
     (.gk-calendar-date-cell), pas sur le bouton lui-même ;
   - bouton "Today" du pied de page non traduit (texte "Today" en dur, pas
     de mécanisme d'i18n exposé par le composant) — texte masqué
     (font-size:0) et remplacé par un ::after en français, plus fiable
     qu'une traduction runtime pour un texte fixe. */
.gv-template-table:has(.gv-container.ea-v2) .gk-calendar-content-inner {
  background: var(--ea-white, #fff);
  font-size: 13px;
  /* 14 -> 10px (15/07/2026, 4e passe : "padding toujours important") */
  padding: 10px;
}
.gv-template-table:has(.gv-container.ea-v2) .gk-calendar-heading {
  font-size: 13px;
  font-weight: 600;
  color: var(--ea-dark, #171717);
}
.gv-template-table:has(.gv-container.ea-v2) .gk-calendar-prev-button,
.gv-template-table:has(.gv-container.ea-v2) .gk-calendar-next-button {
  color: var(--ea-gray-mid, #A7A7A7) !important;
}
.gv-template-table:has(.gv-container.ea-v2) .gk-calendar-prev-button:hover,
.gv-template-table:has(.gv-container.ea-v2) .gk-calendar-next-button:hover {
  color: var(--ea-pink, #FF3683) !important;
}
/* 15/07/2026, 3e passe ("encore parasite ?") : la grille héritait de la
   largeur du champ trigger (~175-180px, via .gk-calendar-root { width:100% }
   plus haut) au lieu de profiter de la largeur réelle du popup — cellules
   ".gk-calendar-*-cell" en "flex:0 1 auto" forcées à ~25px (175/7) alors que
   le bouton rond faisait 32px de diamètre : le bouton débordait sa propre
   cellule, d'où les surbrillances au survol qui se chevauchaient sur la
   cellule voisine. Cellules et lignes détachées de cette largeur héritée
   (taille fixe, flex-shrink:0, gap élargi) — le popup (déjà assez large,
   334px avant ce correctif) a largement la place. */
.gv-template-table:has(.gv-container.ea-v2) .gk-calendar-weekday-row,
.gv-template-table:has(.gv-container.ea-v2) .gk-calendar-date-row {
  width: auto !important;
  gap: 2px !important;
}
/* 15/07/2026, 4e passe : la largeur des cellules avait été corrigée mais pas
   leur HAUTEUR — restée à 25px (héritée du même bug que la largeur), alors
   que le bouton rond (34px) y était posé sans être centré : il débordait de
   9px sous chaque cellule et chevauchait visuellement la ligne de semaine
   suivante. Hauteur de cellule alignée sur le bouton, gap entre lignes
   élargi (2.5 -> 4px) pour une vraie séparation visuelle, contenu centré. */
.gv-template-table:has(.gv-container.ea-v2) .gk-calendar-grid {
  gap: 4px !important;
}
/* Le "gap" ci-dessus n'a aucun effet entre les lignes de dates : chaque
   ".gk-calendar-date-row" est nichée dans un wrapper intermédiaire sans
   classe (2 enfants directs de .gk-calendar-grid, tous deux className=""),
   le gap du grid ne s'applique donc qu'entre CES wrappers, pas entre les
   lignes elles-mêmes. Marge directe sur la ligne, indépendante de cette
   structure. */
.gv-template-table:has(.gv-container.ea-v2) .gk-calendar-date-row {
  margin-bottom: 4px;
}
.gv-template-table:has(.gv-container.ea-v2) .gk-calendar-date-row:last-child {
  margin-bottom: 0;
}
.gv-template-table:has(.gv-container.ea-v2) .gk-calendar-weekday-cell,
.gv-template-table:has(.gv-container.ea-v2) .gk-calendar-date-cell {
  flex: 0 0 36px !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.gv-template-table:has(.gv-container.ea-v2) .gk-calendar-weekday-cell {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  color: var(--ea-gray-mid, #A7A7A7);
  border-bottom: none !important;
}
.gv-template-table:has(.gv-container.ea-v2) .gk-calendar-date-button {
  width: 34px;
  height: 34px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ea-dark, #171717);
  border-radius: 50%;
}
.gv-template-table:has(.gv-container.ea-v2) .gk-calendar-date-button[data-outside-month],
.gv-template-table:has(.gv-container.ea-v2) .gk-calendar-date-button[aria-disabled="true"] {
  color: var(--ea-gray-mid, #A7A7A7);
}
.gv-template-table:has(.gv-container.ea-v2) .gk-calendar-date-button:hover:not([aria-disabled="true"]) {
  background: var(--ea-gray-bg-light, #F6F6F6) !important;
}
.gv-template-table:has(.gv-container.ea-v2) .gk-calendar-date-cell[aria-selected="true"] .gk-calendar-date-button {
  background: var(--ea-pink, #FF3683) !important;
  color: var(--ea-white, #fff) !important;
  font-weight: 600;
}
.gv-template-table:has(.gv-container.ea-v2) .gk-calendar-today-indicator {
  background: var(--ea-pink, #FF3683) !important;
}
.gv-template-table:has(.gv-container.ea-v2) .gk-calendar-footer {
  border-top: 1px solid var(--ea-gray-border, #eee);
  margin-top: 8px;
  padding-top: 8px;
}
.gv-template-table:has(.gv-container.ea-v2) .gk-calendar-today-button {
  font-size: 0;
  color: var(--ea-pink, #FF3683) !important;
}
.gv-template-table:has(.gv-container.ea-v2) .gk-calendar-today-button::after {
  content: "Aujourd'hui";
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.gv-template-table:has(.gv-container.ea-v2) .gk-calendar-today-button:hover::after {
  color: var(--ea-pink, #FF3683);
}

/* === 6. PAGINATION & COMPTEUR === */
/* --------------------------------------------- *
 * 6. PAGINATION & COMPTEUR                      *
 *    Même contrainte que la section 5 : le widget*
 *    de pagination est lui aussi frère de         *
 *    .gv-container. Le rendu semblait correct par *
 *    coïncidence (var(--radius-sm) global = 10px, *
 *    même valeur que celle voulue ici) mais ne     *
 *    dépendait pas du skin v2 — scope corrigé      *
 *    ci-dessous, propriétés contestées verrouillées*
 *    par !important pour ne plus dépendre du hasard*
 * --------------------------------------------- */
.gv-template-table:has(.gv-container.ea-v2) .gv-widget-pagination {
  font-size: 12.5px;
  color: var(--ea-gray-mid, #A7A7A7);
}
/* ".gv-widget-pagination p" et ".gv-widget-page-size"/".dataTables_length"
   hérités (ea-intranet.css section historique ~L.2117-2160) portent
   désormais leur propre garde ":not(.gv-template-table:has(.gv-container.ea-v2) *)"
   à la source — plus besoin de !important ici pour les battre. */
.gv-template-table:has(.gv-container.ea-v2) .gv-widget-pagination p,
.gv-template-table:has(.gv-container.ea-v2) .gv-widget-page-size,
.gv-template-table:has(.gv-container.ea-v2) .dataTables_length,
.gv-template-table:has(.gv-container.ea-v2) .dataTables_info {
  color: var(--ea-gray-mid, #A7A7A7);
  font-size: 12.5px;
}
.gv-template-table:has(.gv-container.ea-v2) .gv-widgets-footer {
  background: var(--ea-white, #fff) !important;
  border-top: 1px solid var(--ea-gray-border, #ddd);
  padding: 14px 24px;
}
/* Structure réelle (inspection navigateur) : .gv-widgets-footer > .gv-grid-row
   > [.gv-grid-col-1-2.left > .gv-widget-pagination] + [.gv-grid-col-1-2.right
   > .gv-widget-page-links]. ".gv-widget-pagination { float:left }" hérité
   (ea-intranet.css ~L.2122) cassait l'alignement — neutralisé au profit
   d'un flex row iso ".ea-view__footer" de la maquette (libellé à gauche,
   pager plaqué à droite). */
.gv-template-table:has(.gv-container.ea-v2) .gv-widgets-footer .gv-grid-row {
  display: flex; align-items: center; gap: 12px;
}
.gv-template-table:has(.gv-container.ea-v2) .gv-widgets-footer .gv-grid-col-1-2 {
  width: auto !important; float: none !important;
}
.gv-template-table:has(.gv-container.ea-v2) .gv-widgets-footer .gv-grid-col-1-2.right {
  margin-left: auto;
}
.gv-template-table:has(.gv-container.ea-v2) .gv-widgets-footer .gv-widget-pagination {
  float: none !important;
}
/* 13/07/2026 — correctif "cadres imbriqués" : structure DOM réelle
   confirmée par inspection (rendu réel du post porteur) —
   <ul class="page-numbers"><li><a class="page-numbers">2</a></li>...</ul> —
   le <ul> ET chaque <a>/<span> interne portent TOUS la classe
   "page-numbers". Un sélecteur ".page-numbers" nu stylait donc le
   conteneur ET l'élément cliquable à la fois (double bordure). Le style
   pilule va désormais uniquement sur l'élément cliquable/affiché (enfant
   direct du <li>) ; le <ul> et les <li> sont neutralisés. */
.gv-template-table:has(.gv-container.ea-v2) .gv-widget-page-links ul.page-numbers {
  display: flex; align-items: center;
  list-style: none; border: none; background: none; box-shadow: none;
  margin: 0; padding: 0;
}
.gv-template-table:has(.gv-container.ea-v2) .gv-widget-page-links ul.page-numbers li {
  list-style: none; border: none; background: none; box-shadow: none;
  margin: 0; padding: 0;
}
.gv-template-table:has(.gv-container.ea-v2) .gv-widget-page-links li > .page-numbers {
  min-width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--ea-gray-border, #ddd);
  background: var(--ea-white, #fff);
  border-radius: 10px;
  margin: 0 2px;
  color: var(--ea-gray-dark, #373033);
  text-decoration: none; font-weight: 600;
  box-shadow: none;
}
.gv-template-table:has(.gv-container.ea-v2) .gv-widget-page-links li > .page-numbers.current {
  background: var(--ea-dark, #171717);
  color: var(--ea-white, #fff);
  border-color: var(--ea-dark, #171717);
}
.gv-template-table:has(.gv-container.ea-v2) .gv-widget-page-links li > .page-numbers:hover:not(.current) {
  border-color: var(--ea-pink, #FF3683);
  color: var(--ea-pink, #FF3683);
}

/* === 7. MOBILE === */
/* --------------------------------------------- *
 * 7. MOBILE — bascule en cartes (<= 768 px)     *
 *    Requiert les data-label posés par snippet  *
 * --------------------------------------------- */
/* Revue Mathieu 21/07/2026 : le point de bascule était à 760px, 8px sous
   celui déjà utilisé partout ailleurs pour "mobile" dans ce fichier (fiche
   8.10, tiroir nav 960px couvre large) — un test à 768px (tablette portrait,
   largeur DevTools standard) tombait donc encore en gabarit tableau desktop,
   coupé net par l'overflow:hidden de la carte (colonnes Actions/Statut
   invisibles, aucune affordance de defilement visible). Aligne sur 768px,
   memes seuil que la fiche (8.10) juste en dessous dans ce fichier. */
@media (max-width: 768px) {
  .gv-container.ea-v2 table.gv-table-view,
  .gv-container.ea-v2 table.gv-table-view tbody,
  .gv-container.ea-v2 table.gv-table-view tr,
  .gv-container.ea-v2 table.gv-table-view td { display: block; width: 100%; }
  .gv-container.ea-v2 table.gv-table-view thead { display: none; }
  .gv-container.ea-v2 table.gv-table-view tbody tr {
    margin: 12px 16px; border: 1px solid var(--ea-gray-border, #ddd);
    border-radius: var(--radius-md, 14px); overflow: hidden;
  }
  /* 15/07/2026 : "flex + justify-content:space-between" (libellé à gauche,
     valeur à droite, sur une seule ligne, sans retour possible) débordait de
     la carte dès que la valeur était un peu longue (ex. "À partir du 20
     juil. 2026", "Accompagnement AP à la diffusion de l'étude BMW") — coupé
     net par overflow:hidden sur la <tr>, invisible au-delà du bord droit.
     Empilé en colonne (libellé au-dessus, valeur en dessous, pleine largeur)
     : la valeur peut s'enrouler normalement sur plusieurs lignes. */
  .gv-container.ea-v2 table.gv-table-view tbody td {
    height: auto; padding: 10px 14px;
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  }
  .gv-container.ea-v2 table.gv-table-view tbody td[data-label]::before {
    content: attr(data-label);
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    color: var(--ea-gray-mid, #A7A7A7);
  }
  /* Le contenu réel (texte, liens, boutons...) peut être un enfant direct du
     <td> (texte simple) ou un wrapper existant (.ea-cell-dates, .ea-actions,
     etc.) : dans les deux cas, largeur pleine + cassure de mot autorisée
     pour éviter qu'un token long (URL, nom de fichier) ne pousse la carte
     plus large que l'écran. */
  .gv-container.ea-v2 table.gv-table-view tbody td,
  .gv-container.ea-v2 table.gv-table-view tbody td > * {
    max-width: 100%;
    overflow-wrap: break-word;
  }
  .gv-container.ea-v2 table.gv-table-view tbody td:first-child { background: var(--ea-gray-bg-light, #F6F6F6); border-left-width: 3px; }
}

/* === 8. FICHE === */
/* ============================================================================
   8. FICHE D'ENTRÉE UNIQUE (single) — vue 21496, lightbox "Détails" + page
      /entry/{id}/. DEUX gabarits distincts rendent EXACTEMENT le même
      contenu (.gv-table-single-container.ea-v2 + nav.gv-back-link) mais pas
      la même chaîne d'ancêtres — confirmé par Mathieu en navigateur les
      15/07/2026 (page pleine, journal/2026-07-15-vue-21496-fiche-entree-
      correctif-dom-reel.md) puis 15/07/2026 (gabarit dialog de la lightbox,
      journal/2026-07-15-vue-21496-lightbox-correctif-dialog.md) :
      - PAGE PLEINE /entry/{id}/ : nav.gv-back-link est frère du conteneur
        dans .elementor-shortcode (hors de .gv-table-single-container).
      - LIGHTBOX (gabarit "dialog") : pas de .elementor-shortcode ici — toute
        règle qui s'y adosse est inerte dans ce contexte, wrappers
        intermédiaires possibles sans classe. ATTENTION : le <body> porte une
        classe "dialog-body" mais elle N'EST PAS exclusive à ce contexte
        (posée en permanence sur TOUT <body> du site par une librairie
        tierce, cf. 8.6) — le vrai marqueur exclusif est "ea-in-lightbox" sur
        le <html> DE L'IFRAME (posé par le JS, snippet 95932).
      Conséquence : toute règle qui doit s'appliquer DANS LES DEUX contextes
      ne peut pas s'ancrer sur .elementor-shortcode ni sur une profondeur
      d'ancêtres précise — cf. 8.6 (scroll, scopé html.ea-in-lightbox body,
      spécifique au contexte lightbox) et 8.7 (pied, scopé body:has(...),
      universel aux deux contextes par nature).
      - Conteneur : .gv-table-single-container.gv-container-21496.ea-v2.ea-st-{statut}
        — le statut est DÉJÀ posé sur le conteneur par le filtre existant
        gravityview/template/table/entry/class (snippet 95926), qui s'applique
        aussi bien au <tr> de la liste qu'au conteneur de la fiche single
        (même filtre, même vue). Le HERO (8.2) et le PIED (8.7) ne
        réutilisent PLUS cette classe du conteneur par sélecteur ancêtre
        (fragile, dépendant de la chaîne DOM réelle — justement ce qui a
        cassé en dialog) : le hero porte sa propre classe ea-st-* (même
        calcul PHP, indépendant), le pied la reçoit par JS (snippet 95932,
        copiée depuis le hero — une seule source, propagée).
      - Table : table.gv-table-view-content > tr#gv-field-22-{id} (un champ =
        une ligne). th/td SANS classe propre.
      - La custom_class d'un champ de vue atterrit sur son <tr> (pas sur le
        td, contrairement à la colonne Document de la liste) : hero =
        tr.ea-fiche-hero-slot, titre de section = tr.gv-section, articles =
        tr.ea-acc-item.ea-acc-title / tr.ea-acc-item.ea-acc-body — toutes
        posées par Mathieu au volet 2 (MCP), cette section CSS ne réorganise
        aucun champ de vue.
      Référence structure/interactions : maquettes/maquette-fiche-document-
      lightbox.html ; couleurs/statuts = mapping section 3 ci-dessus, jamais
      la maquette (cf. journal/2026-07-15-vue-21496-fiche-entree-0-table-
      statuts.md).
   ============================================================================ */

/* === 8.1 GRILLE DE DEFINITION === */
/* --------------------------------------------- *
 * 8.1 Grille de définition — transforme le       *
 *     tableau label/valeur (table.gv-table-view- *
 *     content > tr > th/td, un champ = une ligne)*
 *     en grille CSS 2 colonnes (1 sur mobile,     *
 *     8.8). tbody en display:contents : chaque    *
 *     <tr> devient item de grille direct du       *
 *     <table> (lui-même passé en display:grid).   *
 * --------------------------------------------- */
.gv-table-single-container.ea-v2 table.gv-table-view-content {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 32px;
  width: 100%; padding: 20px 30px 26px;
}
.gv-table-single-container.ea-v2 table.gv-table-view-content tbody { display: contents; }
.gv-table-single-container.ea-v2 table.gv-table-view-content tr { display: block; min-width: 0; }
.gv-table-single-container.ea-v2 table.gv-table-view-content th,
.gv-table-single-container.ea-v2 table.gv-table-view-content td {
  display: block; text-align: left; background: none; border: 0; padding: 0;
}
/* !important : un héritage plus ancien (hors scope v2, non identifié
   précisément) tient encore ces th en single (mesuré 14.7px/700/#171717 sans
   ce renfort, vérifié en navigateur le 15/07/2026) — différent de la couche
   de neutralisation de la section 0 ci-dessus, qui ne touche pas
   taille/couleur du texte. */
.gv-table-single-container.ea-v2 table.gv-table-view-content th {
  font-size: 10.5px !important; font-weight: 700 !important; color: var(--ea-gray-mid, #A7A7A7) !important;
  text-transform: uppercase !important; letter-spacing: .07em; margin: 0 0 3px;
  font-family: var(--font-ui, 'Montserrat', sans-serif);
}
.gv-table-single-container.ea-v2 table.gv-table-view-content td {
  font-size: 13.5px; line-height: 1.45; color: var(--ea-dark, #171717); overflow-wrap: break-word;
}
/* Mise en valeur maquette (16/07/2026) : Nom de la mission / Société / Montant
   du forfait ressortent en gras parmi les autres champs de la grille. */
.gv-table-single-container.ea-v2 tr#gv-field-22-22 td,
.gv-table-single-container.ea-v2 tr#gv-field-22-23 td,
.gv-table-single-container.ea-v2 tr#gv-field-22-55 td {
  font-weight: 600;
}
/* Pôles concernés (champ 25, DOM confirmé le 16/07/2026 : <ul class="bulleted">
   <li>...</li></ul>) : la liste à puces native devient une rangée d'étiquettes,
   même habillage que .ea-tag (composant transverse skin v2) plutôt qu'une
   nouvelle règle dédiée. */
.gv-table-single-container.ea-v2 tr#gv-field-22-25 td ul {
  display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0;
}
.gv-table-single-container.ea-v2 tr#gv-field-22-25 td li {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: var(--radius-round, 50px);
  background: var(--ea-gray-bg-light, #F6F6F6); color: var(--ea-gray-dark, #373033);
}

/* === 8.2 HERO === */
/* --------------------------------------------- *
 * 8.2 Hero — tr.ea-fiche-hero-slot (Custom       *
 *     Content [ea_fiche_hero], posée par Mathieu *
 *     au volet 2, snippets/                      *
 *     ea-fiche-hero-shortcode_wpcode-95930.php).  *
 *     Pleine largeur, label vide masqué, bord à   *
 *     bord (le hero porte son propre padding      *
 *     20px/30px — la marge négative compense le   *
 *     padding de la grille 8.1 pour que sa         *
 *     bordure latérale touche le vrai bord de la   *
 *     carte).                                      *
 * --------------------------------------------- */
/* CORRIGÉ le 16/07/2026 (bug de fond découvert en vérification visuelle
   autonome) : "position:sticky" sur .ea-fiche-hero (ci-dessous, ancienne
   version) n'a JAMAIS fonctionné, dans AUCUN des deux contextes — constaté
   au DOM réel (getBoundingClientRect après scroll : le hero défile avec le
   reste, aucune retenue). Cause : le "containing block" d'un élément sticky
   est sa boîte parente immédiate (ici le <td> de tr.ea-fiche-hero-slot),
   qui doit dépasser la hauteur de l'élément pour lui laisser une plage où
   "rester collé" — or ce <td> est un item de grille dimensionné EXACTEMENT
   à la hauteur du hero (une ligne de grille = son propre contenu, aucune
   marge de manœuvre), donc sticky n'avait littéralement aucune distance à
   parcourir. Le pied (nav.gv-back-link, 8.7) n'a jamais ce problème car
   structurellement FRÈRE du conteneur (hors de la grille) — c'est la vraie
   raison de son bon fonctionnement, pas le sticky en tant que tel.
   Solution retenue, alignée sur le pied : le JS (snippet 95932, étape 6)
   extrait tr.ea-fiche-hero-slot de table.gv-table-view-content et le
   réinsère comme FRÈRE du conteneur, juste AVANT lui (nav.gv-back-link est
   déjà inséré juste APRÈS) — même famille de correctif, même raison d'être.
   Conséquence : plus besoin de position:sticky du tout, le hero est déjà
   structurellement hors de la zone défilante dans les deux gabarits (page
   pleine : frère normal dans le flux .elementor-shortcode ; lightbox : item
   flex:none du body flex-column, cf. 8.6). */
tr.ea-fiche-hero-slot { display: block; width: 100%; }
tr.ea-fiche-hero-slot th { display: none; }
/* CORRIGÉ le 16/07/2026 (capture : zone grise a droite du hero, hors du fond
   blanc/degrade) : le <td> qui enveloppe .ea-fiche-hero retombait sur
   display:table-cell (largeur "shrink-to-fit" par defaut) des que la ligne
   est hissee hors de table.gv-table-view-content — la regle qui lui donnait
   display:block etait scopee ".gv-table-single-container.ea-v2 table.gv-
   table-view-content td" (8.1), qui ne matche plus une fois hors du tableau.
   Composant autosuffisant : ne depend plus de cette regle. */
tr.ea-fiche-hero-slot > td { display: block; width: 100%; }

.ea-fiche-hero {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 26px 30px 22px; border-bottom: 1px solid var(--ea-gray-border, #ddd);
  border-left: 5px solid transparent;
  background: var(--ea-white, #fff);
  /* CORRIGÉ le 17/07/2026 (constat Mathieu) : le hero (hissé hors de la
     grille, frère du conteneur) retombait 1px à l'intérieur du bord réel de
     la carte — la bordure latérale par statut ne touchait donc jamais
     vraiment le coin de la lightbox, laissant un liseré clair visible au
     coin arrondi. margin-left:-1px comble ce pixel. */
  margin-left: -1px;
}
/* Bordure/dégradé PAR STATUT, sur SA PROPRE classe ea-st-* du .ea-fiche-hero
   (posée par le shortcode [ea_fiche_hero] lui-même, calcul de statut
   indépendant de celui du conteneur mais MÊME source de vérité PHP —
   ea_compute_status_info(), une seule implémentation). Pas de prefixe
   d'ancêtre nécessaire : la règle de base ci-dessus (.ea-fiche-hero seule,
   1 classe) est de spécificité STRICTEMENT INFÉRIEURE à ces règles
   par-statut (.ea-fiche-hero.ea-st-* : 2 classes) — ces dernières gagnent
   toujours, quel que soit l'ordre de déclaration (contrairement à l'ancienne
   version qui préfixait la base avec .gv-table-single-container.ea-v2,
   la rendant PLUS spécifique que le sélecteur par-statut : bug corrigé le
   15/07/2026, cf. historique). Deux couches de background (dégradé PAR-
   DESSUS un blanc opaque) — jamais "background-color" seul, le raccourci
   "background" du dégradé écraserait sinon la couche opaque posée plus haut. */
.ea-fiche-hero.ea-st-draft      { border-left-color: #555555; background: linear-gradient(90deg, rgba(85,85,85,.06), transparent 55%), var(--ea-white, #fff); }
.ea-fiche-hero.ea-st-sent,
.ea-fiche-hero.ea-st-requested  { border-left-color: var(--ea-orange, #FF6636); background: linear-gradient(90deg, rgba(255,102,54,.06), transparent 55%), var(--ea-white, #fff); }
.ea-fiche-hero.ea-st-ok         { border-left-color: var(--ea-green-dark, #11CC80); background: linear-gradient(90deg, rgba(17,204,128,.07), transparent 55%), var(--ea-white, #fff); }
.ea-fiche-hero.ea-st-ok-expired { border-left-color: var(--ea-amber, #C98A1B); background: linear-gradient(90deg, rgba(201,138,27,.08), transparent 55%), var(--ea-white, #fff); }
.ea-fiche-hero.ea-st-terminated { border-left-color: var(--ea-brick, #B23B3B); background: linear-gradient(90deg, rgba(178,59,59,.08), transparent 55%), var(--ea-white, #fff); }
.ea-fiche-hero.ea-st-cancelled  { border-left-color: var(--ea-gray-light, #C9C9C9); background: linear-gradient(90deg, rgba(201,201,201,.06), transparent 55%), var(--ea-white, #fff); }

/* CORRIGÉ le 17/07/2026 (capture : capsule document/tag PDF cachée sous la
   croix de fermeture de la lightbox, cercle 36px posé en absolute top:8px
   right:8px par le JS Fancybox, cf. 8.9) : uniquement en lightbox
   (html.ea-in-lightbox, posée sur l'iframe — absente en page pleine où il
   n'y a pas de bouton fermer), la marge de droite du hero est élargie pour
   garder la capsule visible sous le bouton. */
html.ea-in-lightbox .ea-fiche-hero { padding-right: 54px; }
.ea-fiche-hero__main { min-width: 0; }
/* Titre de fiche — ajouté le 15/07/2026 (item 1 chantier convergence
   lightbox), reproduit le gabarit template_settings.single_title de la vue
   (jamais affiché nativement dans le corps de la fiche, cf. snippet 95930).
   Raleway 800 21px conforme a la maquette (maquettes/maquette-fiche-
   document-lightbox.html, .ea-fiche__title). */
.ea-fiche-hero__title { font-family: var(--font-title); font-weight: 800; font-size: 21px; line-height: 1.25; margin: 8px 0 4px; }
.ea-fiche-hero__ref  { font-size: 12px; color: var(--ea-gray-mid, #A7A7A7); margin-top: 8px; }
.ea-fiche-hero__doc  { flex: none; }
/* Capsule document — mêmes classes que la colonne Document de la liste
   (.ea-cell-main/.ea-doc-label/.ea-doc-ico, section 4B), une seule
   implémentation PHP (ea_document_link_html, 95927) ; couleur pilotée par
   ea-st-* du HERO (même correctif que ci-dessus, plus précis qu'ea-st-*
   du conteneur : ne peut affecter que le lien de CE hero, jamais celui
   du bloc "document signé" 8.5 qui a sa propre couleur dédiée). */
/* CORRIGÉ le 16/07/2026 (capture : capsule encore soulignée, pas en gras) :
   font-weight/text-decoration jamais posés ici depuis la création du hero —
   le rendu "propre" observé par ailleurs venait du seul neutralize partiel
   de style.css (a:not(.ea-v2 *)), qui pose déjà text-decoration:none à l'état
   de repos mais ne dit rien du poids ni du survol. */
.ea-fiche-hero .ea-cell-main a { font-size: 14px; font-weight: 700; text-decoration: none; }
/* Gap icône/tag PDF resserré à 3px par défaut (liste, 4B) — la capsule du
   hero, plus grande, le veut à 7px (maquette) : sélecteur composé sur le
   même élément (.gv-container.ea-v2, posées par le JS 95932 sur heroRow) +
   .ea-fiche-hero (descendant) pour battre la spécificité de la règle de
   base ".gv-container.ea-v2 .ea-doc-ico" (3 classes) sans !important. */
.gv-container.ea-v2 .ea-fiche-hero .ea-doc-ico { gap: 7px; }
.ea-fiche-hero.ea-st-draft      .ea-cell-main a { color: #555555; }
.ea-fiche-hero.ea-st-sent       .ea-cell-main a,
.ea-fiche-hero.ea-st-requested  .ea-cell-main a { color: var(--ea-orange, #FF6636); }
.ea-fiche-hero.ea-st-cancelled  .ea-cell-main a { color: var(--ea-gray-light, #C9C9C9); }
.ea-fiche-hero.ea-st-ok         .ea-cell-main a { color: var(--ea-green-dark, #11CC80); }
.ea-fiche-hero.ea-st-ok-expired .ea-cell-main a { color: var(--ea-amber, #C98A1B); }
.ea-fiche-hero.ea-st-terminated .ea-cell-main a { color: var(--ea-brick, #B23B3B); }
.ea-fiche-hero.ea-st-ok         .ea-doc-ico__tag { background: var(--ea-green-dark, #11CC80); }
.ea-fiche-hero.ea-st-ok-expired .ea-doc-ico__tag { background: var(--ea-amber, #C98A1B); }
.ea-fiche-hero.ea-st-terminated .ea-doc-ico__tag { background: var(--ea-brick, #B23B3B); }
.ea-fiche-hero .ea-cell-main a:hover {
  text-decoration: none !important; border-radius: 6px; padding: 2px 6px; margin: -2px -6px;
  background-color: color-mix(in srgb, currentColor 14%, transparent);
}

/* === 8.2b ALERTE DE MISSION === */
/* --------------------------------------------- *
 * 8.2b Alerte de mission — tr.ea-notice-slot      *
 *     (Custom Content [ea_fiche_mission_alert],   *
 *     posée par Mathieu au volet 2, snippets/     *
 *     ea-status-row-class_wpcode-95926.php).      *
 *     Même calcul que la colonne "Demande" de la   *
 *     liste (ea_compute_mission_date_alert()),     *
 *     restreinte aux statuts En préparation/       *
 *     Envoyé au client. Ligne masquée en entier    *
 *     quand le td rendu est vide (alerte inactive) *
 *     — même idiome que 8.3 (titres de section).   *
 *     Rendu via le composant transverse .ea-alert  *
 *     ci-dessous (17/07/2026).                     *
 * --------------------------------------------- */
.gv-table-single-container.ea-v2 tr.ea-notice-slot { grid-column: 1 / -1; }
.gv-table-single-container.ea-v2 tr.ea-notice-slot th { display: none; }
.gv-table-single-container.ea-v2 tr.ea-notice-slot:has(td:empty) { display: none; }

/* --------------------------------------------- *
 * ALERTE — .ea-alert (composant TRANSVERSE,       *
 *     17/07/2026, retour Mathieu) : encadrement    *
 *     type pour tout message d'alerte de           *
 *     l'intranet — pas limité à la fiche 21496.     *
 *     Règle : le texte d'une alerte est TOUJOURS    *
 *     var(--ea-red), jamais une autre teinte        *
 *     (l'ancienne variante orange de cette bande     *
 *     est retirée : un seul niveau de gravité         *
 *     visuel, la gravité réelle reste dans le           *
 *     message). Pas de préfixe générique ("Alerte —") :   *
 *     le message parle de lui-même. Structure :            *
 *     <div class="ea-alert">                                *
 *       <span class="ea-alert__icon"></span>                 *
 *       <div class="ea-alert__text">texte</div>               *
 *     </div>                                                   *
 * --------------------------------------------- */
.ea-alert {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  /* 17/07/2026 (retour Mathieu) : coins gauches carrés (flush avec la
     bordure latérale), seuls les coins droits sont arrondis. */
  border-radius: 0 var(--radius-md, 14px) var(--radius-md, 14px) 0;
  background: var(--ea-red-bg, #FAEDED);
  border-left: 4px solid var(--ea-red, #fa0555);
}
.ea-alert__icon {
  flex: none; width: 32px; height: 32px; border-radius: var(--radius-sm, 10px);
  background: var(--ea-red, #fa0555);
  display: flex; align-items: center; justify-content: center;
}
.ea-alert__icon::before {
  content: "";
  width: 16px; height: 16px;
  background-color: var(--ea-white, #fff);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.ea-alert__text {
  font-size: 13px; line-height: 1.5;
  color: var(--ea-red, #fa0555);
}

/* === 8.3 TITRES DE SECTION === */
/* --------------------------------------------- *
 * 8.3 Titres de section — tr.gv-section (posées  *
 *     par Mathieu au volet 2) : SELON le type de  *
 *     champ, le texte du titre vit soit dans le    *
 *     <th> (champ Section GF natif, ex. "Conditions*
 *     financières" — label du champ), soit dans le *
 *     <td> (nos Custom Content "Synthèse"/"Client & *
 *     contacts"/"Contenu du document"/"Signature",  *
 *     texte en contenu, th vide car show_label=0)  *
 *     — confirmé au DOM le 16/07/2026 (correctif   *
 *     visuel : seul un des 5 titres apparaissait,  *
 *     le CSS d'origine ne stylait que le <th>).    *
 *     Les deux cellules reçoivent donc le même     *
 *     style, et celle qui est réellement vide      *
 *     (0 childNodes, vérifié au DOM — pas de       *
 *     whitespace parasite) est masquée via :empty  *
 *     plutôt que par un display:none inconditionnel*
 *     sur l'une des deux. Première section sans    *
 *     bordure/espace supplémentaire : classe        *
 *     .ea-first-section posée par le JS (95932 —   *
 *     pas de moyen fiable en CSS pur de cibler "le  *
 *     premier tr.gv-section" parmi des frères).     *
 * --------------------------------------------- */
.gv-table-single-container.ea-v2 tr.gv-section { grid-column: 1 / -1; margin-top: 10px; }
.gv-table-single-container.ea-v2 tr.gv-section th,
.gv-table-single-container.ea-v2 tr.gv-section td {
  display: block; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important;
  letter-spacing: .1em; color: var(--ea-pink, #FF3683) !important;
  font-family: var(--font-ui, 'Montserrat', sans-serif); margin: 0;
  padding-top: 20px; border-top: 1px solid var(--ea-gray-bg-light, #F6F6F6);
}
.gv-table-single-container.ea-v2 tr.gv-section th:empty,
.gv-table-single-container.ea-v2 tr.gv-section td:empty {
  display: none;
}
.gv-table-single-container.ea-v2 tr.gv-section.ea-first-section th,
.gv-table-single-container.ea-v2 tr.gv-section.ea-first-section td {
  padding-top: 0; border-top: 0;
}

/* === 8.4 ACCORDEON DES ARTICLES === */
/* --------------------------------------------- *
 * 8.4 Accordéon des articles — tr.ea-acc-item.    *
 *     ea-acc-title / tr.ea-acc-item.ea-acc-body   *
 *     (posées par Mathieu au volet 2), remplacées *
 *     par une structure details/summary générée   *
 *     par le JS scopé single ea-v2 (snippets/      *
 *     ea-fiche-single-js_wpcode-95932.php) —       *
 *     uniquement quand la paire titre+corps est    *
 *     complète (sinon la ligne titre reste en      *
 *     l'état, rendue comme un champ normal —       *
 *     aucun style dédié requis, cf. commentaire     *
 *     JS pour le cas "hide_empty").                *
 * --------------------------------------------- */
.gv-table-single-container.ea-v2 details.ea-acc {
  grid-column: 1 / -1; border: 1px solid var(--ea-gray-border, #ddd);
  border-radius: var(--radius-md, 14px); margin: 0 0 8px; overflow: hidden;
}
.gv-table-single-container.ea-v2 details.ea-acc summary {
  list-style: none; cursor: pointer; padding: 12px 16px;
  font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 10px;
}
.gv-table-single-container.ea-v2 details.ea-acc summary::-webkit-details-marker { display: none; }
.gv-table-single-container.ea-v2 details.ea-acc summary::before {
  content: ""; width: 8px; height: 8px; flex: none;
  border-right: 2px solid var(--ea-gray-mid, #A7A7A7); border-bottom: 2px solid var(--ea-gray-mid, #A7A7A7);
  transform: rotate(-45deg); transition: transform .15s;
}
.gv-table-single-container.ea-v2 details.ea-acc[open] summary::before { transform: rotate(45deg); }
.gv-table-single-container.ea-v2 details.ea-acc summary:hover { background: var(--ea-blue-bg, #EAF6FD); }
.gv-table-single-container.ea-v2 details.ea-acc .ea-acc__body {
  padding: 2px 16px 14px; font-size: 13px; line-height: 1.6; color: var(--ea-gray-dark, #373033);
}
@media (prefers-reduced-motion: reduce) {
  .gv-table-single-container.ea-v2 details.ea-acc summary::before { transition: none; }
}

/* === 8.5 BLOC DOCUMENT SIGNE / NOTES === */
/* --------------------------------------------- *
 * 8.5 Bloc "document signé" / notes — posé par   *
 *     [ea_fiche_signature] (à poser par Mathieu   *
 *     sur un tr, volet 2), snippets/              *
 *     ea-fiche-signature-shortcode_wpcode-95931.  *
 *     php. Conditionnalité par statut calculée    *
 *     en PHP (jamais en dur ici) : ce CSS ne fait *
 *     qu'habiller la sortie déjà filtrée.         *
 * --------------------------------------------- */
.gv-table-single-container.ea-v2 tr:has(> td .ea-fiche-signedbox),
.gv-table-single-container.ea-v2 tr:has(> td .ea-fiche-note) {
  grid-column: 1 / -1;
}
.ea-fiche-signedbox {
  display: flex; gap: 14px; align-items: center;
  background: rgba(17,204,128,.07); border: 1px solid rgba(17,204,128,.35);
  border-radius: var(--radius-md, 14px); padding: 14px 16px;
}
.ea-fiche-signedbox__thumb {
  width: 46px; height: 58px; border-radius: 6px; background: #fff;
  border: 1px solid var(--ea-gray-border, #ddd); flex: none; display: grid; place-items: center;
  font: 800 9px var(--font-ui, 'Montserrat', sans-serif); color: var(--ea-green-dark, #11CC80);
}
.ea-fiche-signedbox b { font-size: 13.5px; }
.ea-fiche-signedbox__doc { margin-top: 4px; }
.ea-fiche-signedbox__doc .ea-cell-main a { color: var(--ea-green-dark, #11CC80); font-size: 13px; }
.ea-fiche-signedbox__extra { font-size: 12px; color: var(--ea-gray-mid, #A7A7A7); margin-top: 4px; }
.ea-fiche-note {
  font-size: 13px; line-height: 1.5; padding: 12px 14px; border-radius: var(--radius-md, 14px);
}
.ea-fiche-note--todo   { background: var(--ea-gray-bg-light, #F6F6F6); color: var(--ea-gray-dark, #373033); }
.ea-fiche-note--muted  { background: var(--ea-gray-bg-light, #F6F6F6); color: var(--ea-gray-mid, #A7A7A7); }

/* === 8.6 SCROLL-CONTAINER LIGHTBOX === */
/* --------------------------------------------- *
 * 8.6 Scroll-container de la lightbox — CORRIGÉ    *
 *     le 16/07/2026 (bug de régression découvert    *
 *     en vérification visuelle autonome) : le          *
 *     scope "body.dialog-body" utilisé jusqu'ici          *
 *     est FAUX — cette classe n'est PAS exclusive à         *
 *     la lightbox, elle est posée en PERMANENCE sur           *
 *     le <body> de TOUTE page du site (confirmé sur             *
 *     une page sans aucun rapport avec la vue 21496,              *
 *     ex. /i/intranet/espace-team/ — probablement une              *
 *     classe baseline d'une librairie JS tierce, non                *
 *     conditionnée à un dialogue réellement ouvert).                  *
 *     Conséquence réelle : la page PLEINE /entry/{id}/                  *
 *     héritait aussi de "display:flex;height:100vh;                     *
 *     overflow:hidden" sur son <body>, cassant tout                       *
 *     défilement de cette page (contenu sous le pli                        *
 *     inatteignable). Le VRAI marqueur exclusif à la                         *
 *     lightbox est "ea-in-lightbox", posé sur le <html>                        *
 *     DE L'IFRAME par le JS (snippet 95932, détection                           *
 *     window.self !== window.top — seul signal fiable,                          *
 *     déjà documenté au commentaire du JS, jamais câblé                          *
 *     ici par erreur). Rescopé sur "html.ea-in-lightbox                          *
 *     body" : ancêtre <html> exclusivement présent dans                          *
 *     le document de l'iframe, jamais sur la page pleine.                         *
 *     Comportement inchangé PAR AILLEURS : le conteneur                           *
 *     (.gv-table-single-container.ea-v2) reste flex:1/                            *
 *     overflow-y:auto (lui qui défile), le pied (nav.gv-                          *
 *     back-link) flex:none (toujours visible, hors zone                           *
 *     défilante), wrappers intermédiaires sans classe                             *
 *     rendus transparents via display:contents. AJOUTÉ                             *
 *     16/07/2026 : tr.ea-fiche-hero-slot rejoint la même                            *
 *     famille flex:none — il est désormais, lui aussi,                              *
 *     extrait de la grille et posé en frère du conteneur                             *
 *     par le JS (cf. 8.2), au même titre que le pied.                                 *
 * --------------------------------------------- */
html.ea-in-lightbox body div:has(.gv-table-single-container.ea-v2),
html.ea-in-lightbox body div:has(nav.gv-back-link),
html.ea-in-lightbox body div:has(tr.ea-fiche-hero-slot) {
  display: contents;
}
html.ea-in-lightbox body:has(.gv-table-single-container.ea-v2) {
  display: flex; flex-direction: column; height: 100vh; overflow: hidden; margin: 0;
}
/* CORRIGÉ le 16/07/2026 (capture : fond gris-rose du site visible au
   sur-défilement/rubber-band) : html/body de l'iframe n'avaient pas de fond
   propre, laissant transparaître --ea-bg-body dès que le scroll dépasse ses
   bornes élastiques. overscroll-behavior:contain sur le conteneur défilant
   empêche en plus ce défilement de se propager au document parent. */
html.ea-in-lightbox,
html.ea-in-lightbox body {
  background: var(--ea-white, #fff);
}
html.ea-in-lightbox body .gv-table-single-container.ea-v2 {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
}
html.ea-in-lightbox body nav.gv-back-link,
html.ea-in-lightbox body tr.ea-fiche-hero-slot {
  flex: none;
}

/* === 8.7 PIED === */
/* --------------------------------------------- *
 * 8.7 Pied — nav.gv-back-link. CORRIGÉ le          *
 *     15/07/2026 : scopé auparavant via              *
 *     .elementor-shortcode:has(...), un ancêtre        *
 *     ABSENT du gabarit dialog de la lightbox (cf.      *
 *     8.6) — ce qui rendait TOUTE cette section          *
 *     inerte en lightbox, pas seulement le scroll         *
 *     (aucun padding/sticky/bordure ne s'appliquait         *
 *     au pied dans ce contexte). Rescopé sur               *
 *     body:has(.gv-table-single-container.ea-v2)             *
 *     nav.gv-back-link — ancêtre TOUJOURS présent            *
 *     (le <body>), quel que soit le nombre ou la              *
 *     nature des wrappers intermédiaires, universel            *
 *     aux deux contextes (page pleine ET lightbox).             *
 *     Sticky bottom 0 dans les deux (scroll-container            *
 *     décrit en 8.6 pour la lightbox, document pour la            *
 *     page pleine). Bordure/dégradé PAR STATUT : le pied           *
 *     ne peut pas porter ea-st-* nativement (aucun filtre           *
 *     serveur ne le lui pose) — la classe est copiée par             *
 *     JS depuis le hero (snippet 95932, une seule source,             *
 *     propagée), stylée ici via nav.gv-back-link.ea-st-*,              *
 *     même fond blanc opaque sous le dégradé (cf.                      *
 *     commentaire 8.2).                                                  *
 *     Fermeture de la lightbox par ce lien : JS scopé dans                *
 *     ea-fiche-single-js_wpcode-95932, intercepte le clic                  *
 *     et reprend le protocole postMessage({closeFancybox:                  *
 *     true}) déjà utilisé en natif par GravityView (confirmé                *
 *     dans assets/js/fe-views.js du plugin — le parent écoute                *
 *     déjà ce message et appelle window.Fancybox.close(),                     *
 *     aucun nouveau mécanisme introduit).                                       *
 * --------------------------------------------- */
body:has(.gv-table-single-container.ea-v2) nav.gv-back-link {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 30px; font-size: 12.5px;
  border-top: 1px solid var(--ea-gray-border, #ddd);
  border-left: 5px solid transparent;
  position: sticky; bottom: 0; z-index: 5;
  background: var(--ea-white, #fff);
}
body:has(.gv-table-single-container.ea-v2) nav.gv-back-link a {
  font-size: 12.5px; font-weight: 600; color: var(--ea-gray-mid, #A7A7A7); text-decoration: none;
}
body:has(.gv-table-single-container.ea-v2) nav.gv-back-link a::before { content: "\2190\0020"; } /* fleche, conforme maquette .ea-fiche__back */
body:has(.gv-table-single-container.ea-v2) nav.gv-back-link a:hover { color: var(--ea-pink, #FF3683); }
/* Meme bug de specificite que 8.2 (constate au DOM reel le 15/07/2026) :
   la regle de base ci-dessus est "body:has(.gv-table-single-container.ea-v2)
   nav.gv-back-link" — le :has() vaut la specificite de son argument le plus
   specifique (2 classes) + body/nav (2 types) = plus specifique qu'un simple
   "nav.gv-back-link.ea-st-*" (1 type + 2 classes). Meme prefixe repris ici. */
body:has(.gv-table-single-container.ea-v2) nav.gv-back-link.ea-st-draft      { border-left-color: #555555; background: linear-gradient(90deg, rgba(85,85,85,.06), transparent 55%), var(--ea-white, #fff); }
body:has(.gv-table-single-container.ea-v2) nav.gv-back-link.ea-st-sent,
body:has(.gv-table-single-container.ea-v2) nav.gv-back-link.ea-st-requested  { border-left-color: var(--ea-orange, #FF6636); background: linear-gradient(90deg, rgba(255,102,54,.06), transparent 55%), var(--ea-white, #fff); }
body:has(.gv-table-single-container.ea-v2) nav.gv-back-link.ea-st-ok         { border-left-color: var(--ea-green-dark, #11CC80); background: linear-gradient(90deg, rgba(17,204,128,.07), transparent 55%), var(--ea-white, #fff); }
body:has(.gv-table-single-container.ea-v2) nav.gv-back-link.ea-st-ok-expired { border-left-color: var(--ea-amber, #C98A1B); background: linear-gradient(90deg, rgba(201,138,27,.08), transparent 55%), var(--ea-white, #fff); }
body:has(.gv-table-single-container.ea-v2) nav.gv-back-link.ea-st-terminated { border-left-color: var(--ea-brick, #B23B3B); background: linear-gradient(90deg, rgba(178,59,59,.08), transparent 55%), var(--ea-white, #fff); }
body:has(.gv-table-single-container.ea-v2) nav.gv-back-link.ea-st-cancelled  { border-left-color: var(--ea-gray-light, #C9C9C9); background: linear-gradient(90deg, rgba(201,201,201,.06), transparent 55%), var(--ea-white, #fff); }

/* === 8.8 LIEN SUPPRIMER === */
/* 8.8 Lien "Supprimer" du pied (16/07/2026) — Custom Content d'origine
   (tr.ea-fiche-footer-slot), toujours vide après le passage du JS (95932,
   son unique <a> est hissé dans le pied qu'il existe ou non) : masqué en
   permanence, pas de flash de contenu avant hissage. */
.gv-table-single-container.ea-v2 tr.ea-fiche-footer-slot { display: none; }
/* Discret, rouge, poussé à droite du pied (Revenir à la liste reste à
   gauche) — même famille de traitement que .ea-act-danger (colonne Actions
   de la liste), sans reprendre son gabarit pilule (contexte pied différent). */
body:has(.gv-table-single-container.ea-v2) nav.gv-back-link .ea-danger-link {
  margin-left: auto; font-size: 12.5px; font-weight: 600;
  color: #d9264c; text-decoration: none; padding: 4px 10px; border-radius: var(--radius-round, 50px);
  border: 1px solid transparent;
}
body:has(.gv-table-single-container.ea-v2) nav.gv-back-link .ea-danger-link:hover {
  border-color: #d9264c; background: var(--ea-red-bg, #FAEDED);
}
body:has(.gv-table-single-container.ea-v2) nav.gv-back-link .ea-danger-link::before {
  content: none; /* pas de flèche (réservée au lien "Revenir") */
}

/* === 8.9 LIGHTBOX (BASELINE GLOBALE) === */
/* --------------------------------------------- *
 * 8.9 Lightbox (BASELINE GLOBALE) — cadre Fancybox*
 *     de TOUTE lightbox GravityView sur preprod,  *
 *     scope body:not(.ea-public-shell) — exclusion*
 *     STRICTE des 3 pages publiques sanctuarisées  *
 *     (CLAUDE.md), marquées par le snippet          *
 *     ea-public-shell-bodyclass_wpcode-95934.php    *
 *     (post_type=public, signal déjà existant côté  *
 *     site — 4 posts vérifiés le 15/07/2026 : job,   *
 *     evenement, login, what-rss — plus robuste       *
 *     qu'une liste d'IDs de page à maintenir ici).    *
 *     Élargi depuis le scope initial (:has() sur      *
 *     l'iframe de la vue 21496 uniquement, pilote      *
 *     du 15/07/2026) : toute vue v2 avec lightbox      *
 *     activée en bénéficie désormais nativement,       *
 *     y compris les vues non encore migrées (le        *
 *     chrome de la modale ne dépend d'aucune classe     *
 *     .ea-v2, seulement du body-class de la page qui    *
 *     ouvre la lightbox). Contrat DOM établi en          *
 *     DevTools le 15/07/2026 :                            *
 *     div.fancybox__container.gv-lightbox >                *
 *     .fancybox__backdrop + .fancybox__carousel >            *
 *     .fancybox__viewport > .fancybox__track >                *
 *     .fancybox__slide.has-iframe > .fancybox__content         *
 *     (dimensions posées EN INLINE par le JS Fancybox) +        *
 *     button.carousel__button.is-close + iframe.fancybox__       *
 *     iframe. Le bouton fermer hérite de la pilule générique      *
 *     de boutons (section boutons plus haut, globale hors          *
 *     .single-public) : plutôt que l'exempter globalement           *
 *     (toucherait aussi les boutons des lightbox exclues du          *
 *     scope), ce bloc neutralise juste ce qui en déborde              *
 *     (padding/couleur) DANS son propre scope avant de restyler.       *
 * --------------------------------------------- */
body:not(.ea-public-shell) .fancybox__container.gv-lightbox .fancybox__backdrop {
  background: rgb(23 23 23 / .55);
}
/* Neutralise les défauts de la feuille du plugin (assets/lib/fancybox/dist/
   fancybox.css) qui entrent en collision avec notre design bord-à-bord :
   .fancybox__slide a 48px de padding haut par défaut (pensé pour une
   toolbar complète qu'on a retirée, snippet 95933), .fancybox__content a
   36px de padding uniforme par défaut (le hero/pied de la fiche gèrent
   déjà leur propre padding et bleedent jusqu'au bord via marge négative,
   cf. 8.2/8.6 — un padding natif ici casserait ce bord-à-bord). Surcharge
   côté ea-intranet.css UNIQUEMENT, jamais le fichier du plugin (CLAUDE.md). */
body:not(.ea-public-shell) .fancybox__container.gv-lightbox .fancybox__slide {
  padding: 20px 12px;
}
/* !important : bat les width/height posés en style inline par le JS Fancybox
   sur .fancybox__content (contrat DOM ci-dessus) — c'est le seul moyen côté
   CSS de reprendre la main sur les dimensions de la modale. */
body:not(.ea-public-shell) .fancybox__container.gv-lightbox .fancybox__content {
  padding: 0;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgb(0 0 0 / .35);
  width: min(920px, 94vw) !important;
  height: min(88vh, 940px) !important;
}
/* CORRIGÉ le 17/07/2026 (capture : fin liseré gris au coin arrondi haut-
   gauche) : "overflow:hidden" + "border-radius" sur .fancybox__content ne
   clippe pas toujours proprement un <iframe> (élément remplacé) dans Chrome
   — artefact d'anti-aliasing au coin, le fond du backdrop semi-transparent
   filtrant légèrement à travers. Poser le MÊME rayon directement sur
   l'iframe fait que c'est elle-même qui arrondit son propre contenu, sans
   dépendre du clip du parent. */
body:not(.ea-public-shell) .fancybox__container.gv-lightbox iframe.fancybox__iframe {
  border-radius: 24px;
}
body:not(.ea-public-shell) .fancybox__container.gv-lightbox .carousel__button.is-close {
  position: absolute; top: 8px; right: 8px; z-index: 20;
  box-sizing: border-box; width: 36px; height: 36px; padding: 0;
  border-radius: 50%;
  background: var(--ea-white, #fff);
  box-shadow: 0 2px 10px rgb(0 0 0 / .18);
  text-transform: none; letter-spacing: normal;
}
body:not(.ea-public-shell) .fancybox__container.gv-lightbox .carousel__button.is-close svg {
  display: none; /* remplacée par la croix en masque CSS ci-dessous, cohérente avec le reste du skin v2 */
}
body:not(.ea-public-shell) .fancybox__container.gv-lightbox .carousel__button.is-close::before {
  content: "";
  width: 14px; height: 14px;
  background-color: var(--ea-gray-dark, #373033);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 20L4 4m16 0L4 20' stroke='black' stroke-width='2.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 20L4 4m16 0L4 20' stroke='black' stroke-width='2.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  transition: background-color .15s;
}
body:not(.ea-public-shell) .fancybox__container.gv-lightbox .carousel__button.is-close:hover::before {
  background-color: var(--ea-pink, #FF3683);
}

/* === 8.10 RESPONSIVE === */
/* --------------------------------------------- *
 * 8.10 Responsive — cible 380px et 768px          *
 *     (chantier convergence 15/07/2026, item 3).  *
 *     UN SEUL breakpoint (768px) couvre les deux : *
 *     grille de la fiche (s'applique identiquement *
 *     en page pleine ET dans l'iframe — la lightbox*
 *     devient plein écran juste en dessous, donc le *
 *     viewport de l'iframe = largeur réelle de       *
 *     l'appareil à ce gabarit) + chrome plein écran   *
 *     de la lightbox (scope parent-page uniquement,   *
 *     .fancybox__content vit HORS de l'iframe — la     *
 *     classe .ea-in-lightbox, posée sur le <html> DE    *
 *     L'IFRAME, n'y est structurellement pas            *
 *     accessible, d'où l'absence de ce sélecteur ici    *
 *     contrairement au reste du fichier).                *
 * --------------------------------------------- */
@media (max-width: 768px) {
  /* --- Fiche (grille, hero, corps) --- */
  .gv-table-single-container.ea-v2 table.gv-table-view-content {
    grid-template-columns: 1fr; padding: 16px;
  }
  .gv-table-single-container.ea-v2 table.gv-table-view-content td { font-size: 14px; }
  .ea-fiche-hero {
    flex-direction: column; align-items: flex-start; padding: 16px;
  }
  /* Capsule document sous le bloc titre/statut (plus de gap de ligne d'une
     disposition flex-row à récupérer) — pas de chevauchement. */
  .ea-fiche-hero__doc { margin-top: 10px; }

  /* --- Pied --- */
  body:has(.gv-table-single-container.ea-v2) nav.gv-back-link {
    padding: 12px 16px;
  }

  /* --- Lightbox plein écran (scope parent-page, cf. en-tête ci-dessus) --- */
  body:not(.ea-public-shell) .fancybox__container.gv-lightbox .fancybox__slide {
    padding: 0;
  }
  body:not(.ea-public-shell) .fancybox__container.gv-lightbox .fancybox__content {
    width: 100vw !important; height: 100dvh !important;
    border-radius: 0;
  }
}
/* === CORRECTIF GLOBAL -- DATE RANGE PICKER (hors ea-v2) === */

/* ============================================================================
   CORRECTIF GLOBAL (hors scope ea-v2, toutes vues) — date range picker GV 3.x
   Les deux calendriers (début/fin) s'empilent dans la largeur de la case au
   lieu de déborder sur les champs voisins. Remplace l'ancienne section
   "DATEPICKER GFORMS" (composant disparu, section à supprimer à terme).
   ============================================================================ */
.gv-date-range-picker { display: flex; flex-wrap: wrap !important; gap: 8px; }
.gv-date-range-picker .gv-date-picker { width: 100% !important; min-width: 0 !important; max-width: 100%; }
.gv-date-range-picker .gk-calendar-root { width: 100%; }

/* === 9. CHROME v2 — EN-TÊTE & PIED DE PAGE (global, hors ea-v2) === */
/* ============================================================================
   RECONSTRUCTION (17/07/2026) — le restylage CSS de l'ancien balisage
   (.site-header/.header-nav/.user, cf. commits aa42158/738b463/58d72ec) est
   abandonné : conflits de cascade permanents avec les baselines Elementor/
   HelloElementor constatés au sélecteur près. template-parts/header.php et
   footer.php sont désormais réécrits au balisage NEUF de
   maquettes/maquette-coquille-service-ea.html (.ea-hdr / .ea-drawer /
   .ea-ftr), toute la logique PHP (droits par espace, compteur $iPending,
   photo vs initiales, liens) reste intacte — seule la sortie HTML change.
   Ce composant est global (hors scope .ea-v2), il s'applique à toutes les
   pages internes ; les 3 pages publiques sanctuarisées utilisent des
   templates header-public/footer distincts, aucune classe partagée.

   POSITIONNEMENT — changement volontaire vs l'ancien header (fixed, ~35px) :
   la maquette ne pose AUCUN position:fixed sur .ea-hdr (flux normal). À
   64px de haut (contre ~35px avant), le fixed sans compensation aurait
   fait chevaucher le header sur le contenu de toute page sans bannière
   sombre pour absorber l'écart (l'ancien filet de sécurité qui rendait le
   fixed "sans risque"). Repasser en flux normal supprime intégralement ce
   risque de chevauchement, sur toutes les pages, sans avoir à poser un
   padding-top compensatoire partout — la barre d'admin WP (déjà en flux,
   margin-top auto sur html) n'a besoin d'aucun traitement particulier ici.

   STICKY (21/07/2026, retour Mathieu) : contrairement à un `fixed`, un
   `sticky` réserve sa propre place dans le flux normal (rendu initial
   identique à `static`, aucun chevauchement au chargement, donc aucun
   padding-top compensatoire à ajouter nulle part) — il ne se "colle" qu'au
   scroll, une fois son emplacement d'origine dépassé. Les risques déjà
   écartés pour `fixed` (cf. ci-dessus) ne s'appliquent donc pas ici.
   ============================================================================ */

/* --- 9.1 En-tête --- */
.ea-hdr {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ea-dark);
  color: #fff;
}
/* La barre d'admin WP est fixed (32px desktop, 46px ≤782px — confirmé en
   vérification live à 606px, TOUJOURS fixed : l'hypothèse d'un passage en
   position:absolute sous 783px, reprise de l'ancien code, était fausse sur
   ce site) mais body.admin-bar{margin-top:...} (règle par défaut de
   wp-includes/css/admin-bar.css) est écrasée ailleurs dans la cascade du
   thème : sans ce correctif, la barre d'admin recouvre le haut du header.
   --wp-admin--admin-bar--height est une custom property posée par WP
   lui-même et déjà correcte à chaque palier (32px/46px) : aucune media
   query nécessaire ici, elle suit WP. margin-top gère le rendu initial (en
   flux) ; top gère le point d'accroche une fois "collé" au scroll — les
   deux sont nécessaires, ce ne sont pas deux façons de faire la même chose. */
body.admin-bar .ea-hdr {
  margin-top: var(--wp-admin--admin-bar--height, 32px);
  top: var(--wp-admin--admin-bar--height, 32px);
}
/* .banner-user (bannière hero, rendue juste après .ea-hdr dans
   template-parts/header.php — pages de service, "other_page", etc.) posait
   un margin-top:68px en ≥768px (theme.css ~L.4261, fichier compilé du
   thème, jamais modifié directement — cf. convention du projet). Ce
   margin compensait la hauteur de l'ANCIEN header fixed (~35-68px selon
   les versions) : depuis la reconstruction chrome v2 (17/07/2026), le
   header est en flux normal (sticky, pas fixed), ce vide n'a plus lieu
   d'être et créait un bandeau gris de 68px entre le header et la bannière
   (signalé par Mathieu 22/07/2026, mesuré en live : hdrBottom=64,
   bannerTop=132). Retiré ici (override, pas d'édition de theme.css). */
@media (min-width: 768px) {
  .banner-user {
    margin-top: 0 !important;
  }
}
.ea-hdr__in {
  max-width: var(--ea-container, 1280px);
  margin: 0 auto;
  padding: 0 10px;
  box-sizing: content-box; /* fixe le calcul quel que soit un reset global éventuel — cf. mesure d'alignement ci-dessous */
  height: 64px;
  display: flex;
  align-items: center;
  gap: 28px;
}
/* --ea-container mesuré en live sur la page pilote (20270, gabarit Elementor
   section/column classique, largeur de section 1300px à vw=1708 → colonne
   204px/1504px, texte du h1 à 214px) : max-width:1280px + padding:0 10px
   (content-box) reproduit exactement ce bord gauche, quel que soit vw. */

.ea-hdr__logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.ea-hdr__logo img {
  height: 34px; /* cote maquette (maquettes/maquette-coquille-service-ea.html:227, style inline height:34px) */
  width: auto;
  filter: brightness(0) invert(1);
}

.ea-hdr__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: center;
}
.ea-hdr__nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ea-hdr__nav li { margin: 0 !important; }
.ea-hdr__nav a {
  display: inline-flex;
  align-items: center;
  font: 600 11.5px var(--font-ui);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: var(--radius-round);
  border: 1px solid rgb(255 255 255 / .28);
  background: transparent;
  transition: all .13s;
  white-space: nowrap;
}
/* Le Kit Elementor global pose `.elementor-kit-15433 a:hover{text-transform:none}`
   sur TOUT <a:hover> du site (même spécificité que nos règles, 1 classe +
   1 pseudo-classe + 1 élément — c'est l'ORDRE DE SOURCE, pas la spécificité,
   qui le fait gagner : la feuille du Kit est enqueue après ea-intranet.css).
   Confirmé en styles calculés (CSS.getMatchedStylesForNode) : sans
   redéclaration ici, le survol affiche le libellé du menu tel qu'écrit en
   PHP (casse mixte) au lieu de l'majuscule forcée — d'où l'effet "minuscule
   au survol" vu en revue. Le composant nav redéclare donc explicitement
   font/text-transform/letter-spacing sur :hover/:focus/:active plutôt que
   de dépendre de l'ordre d'enqueue d'une feuille tierce. */
.ea-hdr__nav a:hover,
.ea-hdr__nav a:focus-visible,
.ea-hdr__nav a:active {
  border-color: #fff;
  background: rgb(255 255 255 / .08);
  color: #fff;
  font: 600 11.5px var(--font-ui);
  text-transform: uppercase !important;
  letter-spacing: .05em;
}
.ea-hdr__nav li.current-menu-item > a {
  background: var(--ea-pink);
  border-color: var(--ea-pink);
  color: #fff;
}
/* Item de nav "Services+" (menu_item 50628) : mise en avant orange/italique
   déjà en place avant la reconstruction — migrée telle quelle (pas du CSS
   mort, un signal visuel voulu), désormais aussi valable dans le tiroir
   mobile puisque le même menu y est rendu une seconde fois. */
.ea-hdr__nav li.menu-item-50628 > a,
.ea-drawer nav li.menu-item-50628 > a {
  color: var(--ea-orange);
  border-color: var(--ea-orange);
  font-style: italic;
}
.ea-hdr__nav li.menu-item-50628.current-menu-item > a,
.ea-hdr__nav li.menu-item-50628 > a:hover,
.ea-hdr__nav li.menu-item-50628 > a:focus,
.ea-hdr__nav li.menu-item-50628 > a:active,
.ea-drawer nav li.menu-item-50628.current-menu-item > a,
.ea-drawer nav li.menu-item-50628 > a:hover,
.ea-drawer nav li.menu-item-50628 > a:focus,
.ea-drawer nav li.menu-item-50628 > a:active {
  background: var(--ea-orange);
  border-color: var(--ea-orange);
  color: #fff;
  font-style: italic;
  text-transform: uppercase !important;
}
.ea-hdr__count {
  display: inline-grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  margin-left: 6px;
  padding: 0 4px;
  border-radius: 8px;
  background: #fff; /* retour Mathieu 21/07/2026 : blanche, pas orange */
  color: var(--ea-dark, #171717);
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1;
}

.ea-hdr__user {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.ea-hdr__id-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}
.ea-hdr__avatar {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: var(--radius-circle);
  background: linear-gradient(135deg, var(--ea-pink), var(--ea-orange));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
/* Recadrage visage (revue Mathieu 21/07/2026) : les photos de profil (SSO
   Google / photo d'équipe ACF) sont des portraits cadrés large (buste +
   marge au-dessus de la tête), donc "object-fit:cover" seul centre sur le
   buste, pas le visage. Zoom 160% ancré en haut, calibré sur 2 photos
   réelles (Mathieu, Camille Dely) via une page de test locale isolée — 200%
   (piste de départ de la revue) rognait déjà le haut du front sur les deux,
   160% est le meilleur compromis visage rempli / traits entiers. */
.ea-hdr__avatar img {
  width: 160%;
  height: 160%;
  max-width: none;
  object-fit: cover;
  object-position: top center;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.ea-hdr__avatar .ea-avatar-initials {
  color: #fff;
  font: 800 12px var(--font-ui);
  line-height: 1;
}
.ea-hdr__id { line-height: 1.25; }
.ea-hdr__id b { display: block; font-size: 12px; font-weight: 600; color: #fff; }
.ea-hdr__id span {
  display: block;
  font-size: 10px;
  color: rgb(255 255 255 / .6);
  text-transform: capitalize;
  letter-spacing: .02em;
}
.ea-hdr__out {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: rgb(255 255 255 / .55);
  text-decoration: none;
}
.ea-hdr__out:hover { color: var(--ea-pink); }
.ea-hdr__out-ico {
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18.36 6.64a9 9 0 1 1-12.73 0'/%3E%3Cline x1='12' y1='2' x2='12' y2='12'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18.36 6.64a9 9 0 1 1-12.73 0'/%3E%3Cline x1='12' y1='2' x2='12' y2='12'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Burger (masqué en desktop, cf. media query <960px plus bas) */
/* <button> natif : le Kit Elementor pose ses valeurs par défaut (padding,
   sizing) sur la balise <button> elle-même, pas seulement sur .elementor-
   button (même cause que le bouton Machine à contrats, cf. section 10) —
   box-sizing/dimensions/padding en !important nécessaires ici aussi. */
.ea-hdr__burger {
  display: none;
  box-sizing: border-box !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 1px solid rgb(255 255 255 / .3);
  border-radius: var(--radius-circle);
  background: none;
  cursor: pointer;
  place-items: center;
  flex: 0 0 auto;
}
.ea-hdr__burger span {
  display: block;
  width: 16px;
  height: 2px;
  background: #fff;
  position: relative;
}
.ea-hdr__burger span::before,
.ea-hdr__burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 16px;
  height: 2px;
  background: #fff;
  transition: transform .2s ease;
}
.ea-hdr__burger span::before { top: -5px; }
.ea-hdr__burger span::after { top: 5px; }
.ea-hdr__burger[aria-expanded="true"] span { background: transparent; }
.ea-hdr__burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.ea-hdr__burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* --- 9.2 Tiroir mobile (burger + drawer, <960px) --- */
.ea-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(320px, 88vw);
  background: var(--ea-dark);
  color: #fff;
  z-index: 1200;
  padding: 22px;
  transform: translateX(100%);
  transition: transform .2s ease;
  display: none;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}
.ea-drawer.open {
  transform: none;
  box-shadow: -18px 0 50px rgb(0 0 0 / .35);
}
.ea-drawer__close {
  align-self: flex-end;
  box-sizing: border-box !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: var(--radius-circle);
  border: 1px solid rgb(255 255 255 / .3);
  background: none;
  color: #fff;
  cursor: pointer;
}
.ea-drawer__profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: rgb(255 255 255 / .06);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
  color: inherit;
  text-decoration: none;
}
.ea-drawer nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ea-drawer nav ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.ea-drawer nav li { margin: 0 !important; }
.ea-drawer nav a {
  display: block;
  font: 600 13px var(--font-ui);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  padding: 13px 16px;
  border-radius: var(--radius-md);
  border: 1px solid rgb(255 255 255 / .18);
}
/* Même redéclaration anti-Kit-Elementor que .ea-hdr__nav a ci-dessus (le
   tiroir est atteignable au clavier/souris même sur un site "mobile"). */
.ea-drawer nav a:hover,
.ea-drawer nav a:focus-visible,
.ea-drawer nav a:active {
  font: 600 13px var(--font-ui);
  text-transform: uppercase !important;
  letter-spacing: .05em;
  border-color: rgb(255 255 255 / .4);
}
.ea-drawer nav li.current-menu-item > a {
  background: var(--ea-pink);
  border-color: var(--ea-pink);
}
.ea-drawer__foot {
  margin-top: auto;
  padding-top: 14px;
}
.ea-drawer__foot a {
  color: rgb(255 255 255 / .7);
  font-size: 12.5px;
  text-decoration: none;
}
.ea-drawer__foot a:hover { color: var(--ea-pink); }

@media (max-width: 960px) {
  .ea-hdr__nav,
  .ea-hdr__user { display: none; }
  .ea-hdr__burger { display: grid; margin-left: auto; }
  .ea-drawer { display: flex; }
}

/* --- 9.3 Pied de page --- */
.ea-ftr {
  background: var(--ea-dark);
  color: rgb(255 255 255 / .65);
  margin-top: 44px;
}
.ea-ftr__help {
  max-width: var(--ea-container, 1280px);
  margin: 0 auto;
  padding: 34px 10px 26px;
  box-sizing: content-box;
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  align-items: flex-start;
  border-bottom: 1px solid rgb(255 255 255 / .12);
}
.ea-ftr__help-text { flex: 1 1 300px; min-width: 300px; }
.ea-ftr__help h3 {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 16px;
  color: #fff;
  margin: 0 0 8px;
}
.ea-ftr__help ol {
  margin: 0;
  padding-left: 18px;
  font-size: 12.5px;
  line-height: 1.9;
  color: rgb(255 255 255 / .75);
}
.ea-ftr__help ol a { color: var(--ea-pink); text-decoration: none; font-weight: 600; }
.ea-ftr__help ol a:hover { color: #fff; }
.ea-ftr__cta {
  font: 600 11.5px var(--font-ui);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgb(255 255 255 / .35);
  border-radius: var(--radius-round);
  padding: 12px 20px;
  white-space: nowrap;
  transition: all .13s;
}
/* Même bug/correctif que .ea-hdr__nav a:hover (section 9.1) : le Kit
   Elementor global pose .elementor-kit-15433 a:hover{text-transform:none}
   sur tout a:hover du site, gagne par ordre de source sur la simple
   :hover ci-dessous qui ne redéclarait pas le texte en majuscule. */
.ea-ftr__cta:hover {
  background: var(--ea-pink);
  border-color: var(--ea-pink);
  text-transform: uppercase !important;
  font: 600 11.5px var(--font-ui);
  letter-spacing: .04em;
}

.ea-ftr__in {
  max-width: var(--ea-container, 1280px);
  margin: 0 auto;
  padding: 16px 10px;
  box-sizing: content-box;
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 11.5px;
  color: rgb(255 255 255 / .55);
}
.ea-ftr__logo { height: 20px; width: auto; filter: brightness(0) invert(1); opacity: .8; }
.ea-ftr__spacer { flex: 1; }
.ea-ftr__in a { color: rgb(255 255 255 / .8); text-decoration: none; font-weight: 600; }
.ea-ftr__in a:hover { color: var(--ea-pink); }

@media (max-width: 640px) {
  .ea-ftr__help { flex-direction: column; }
  .ea-ftr__in { flex-wrap: wrap; }
}

/* === 10. COQUILLE v2 — PAGE 20270 (pilote famille A) === */
/* ============================================================================
   Restructuration Elementor de la page 20270 (patron cible du Lot A) :
   ligne de tête (h1 + bouton Machine à contrats), intro, puis la vue 21496
   en carte blanche autoporteuse. Scope .postid-20270 : NE PAS répliquer sur
   les autres pages famille A avant validation du patron (cf. brief 16/07).
   REVISION 17/07/2026 : la bannière sombre "single_service" est en fait
   retirée sur cette page — le nouveau bloc h1+intro+bouton la remplace
   intégralement (nouvelle décision Mathieu, annule la décision du 16/07).
   Elle est rendue par template-parts/header.php pour TOUTES les pages
   is_singular('services') (pas un élément Elementor du post 20270) — donc
   pas de retrait possible via EMCP ; masquée ici en CSS scopé .postid-20270
   uniquement (aucune autre page famille A n'est affectée).
   ============================================================================ */

/* --- 10.0 Bannière sombre héritée : masquée sur cette page (cf. note ci-dessus) --- */
.postid-20270 .banner-user.single_service {
  display: none;
}
/* Le padding-top compensatoire (56px) qui vivait ici est retiré (17/07/2026) :
   il compensait le chevauchement de l'ancien header position:fixed (~35px)
   sur cette page une fois sa bannière masquée. Le nouveau header (.ea-hdr,
   section 9) est en flux normal — plus aucun chevauchement à compenser,
   nulle part. Un padding-top ici recréerait un vide non désiré sous le
   header. */

/* --- 10.1 Ligne de tête + intro --- */
/* Le conteneur réel des widgets est .elementor-widget-wrap (enfant direct de
   la colonne), pas la colonne elle-même — et chaque widget y a par défaut
   une largeur 100% forcée par Elementor (empilement vertical même en
   flex-direction:row). Neutralisé ici pour title+bouton, l'intro garde ses
   100% pour passer seule à la ligne suivante (row-gap). */
.postid-20270 .elementor-element-bf535f8 > .elementor-widget-wrap {
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  column-gap: 24px;
  row-gap: 10px;
}
.postid-20270 .ea-service-title-el {
  width: auto;
  flex: 1 1 auto;
  margin: 0;
}
.postid-20270 .ea-service-title-el .elementor-heading-title {
  font-family: var(--font-title, 'Raleway', sans-serif);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ea-dark, #171717);
  margin: 0;
}
.postid-20270 .elementor-element-56cb755 {
  width: auto;
  flex: 0 0 auto;
  margin: 0; /* neutralise la marge par défaut du widget Elementor
                (margin-bottom:20px) : align-items:flex-end aligne les boîtes
                de marge, ce 20px décalait visuellement le bouton 19px plus
                haut que la ligne de base du h1 (qui, lui, a déjà margin:0
                via .ea-service-title-el juste au-dessus) */
}
.postid-20270 .ea-service-intro-el {
  width: 100%;
  flex: 0 0 100%;
  order: 3;
}
.postid-20270 .ea-service-intro-el p {
  max-width: 720px;
  color: var(--ea-gray-dark, #373033);
  font-size: 13.5px;
  line-height: 1.6;
  margin: 0;
}

/* Bouton d'action principal — pilule du design system. RECONSTRUCTION
   17/07/2026 : le widget Elementor "button" (bfabbd9) est remplacé par un
   widget HTML brut (56cb755, <button class="ea-btn-action popmake-26225">,
   même classe de déclenchement popup — le ciblage du popup n'est pas
   touché) via EMCP, pour sortir du gabarit .elementor-button. Le "double
   pilule" vu en première vérification était en fait un artefact de capture
   pendant la transition CSS (confirmé en comparant les styles calculés
   hover/non-hover, pas un vrai défaut visuel). Le vrai bug trouvé par la
   même vérification : le Kit Elementor global applique ses valeurs par
   défaut de bouton (border-radius, text-transform) aux éléments <button>
   NATIFS du site entier — pas seulement au widget bouton — jusque sur
   l'état :hover (button_hover_border_radius du kit = 0). D'où les
   !important ci-dessous, seule protection qui tient face à une baseline
   posée sur la balise elle-même plutôt que sur une classe Elementor. */
/* style.css (base thème, "DO NOT CHANGE") pose un reset générique plus
   spécifique sur les <button> non-.ea-v2 (button:not(.ea-v2 *):not(...), cf.
   style.css ~L.317) : font-family:inherit + font-size:1rem — 1rem vaut 10px
   ici (html{font-size:62.5%} du Kit Elementor), d'où le texte trop petit
   constaté en revue malgré la valeur 12.5px déjà posée ci-dessous (la
   shorthand "font" perd la bataille de spécificité propriété par propriété
   sur family/size, seul font-weight survivait). Mêmes !important que
   text-transform/border-radius juste en dessous, pour la même raison. */
.postid-20270 .ea-btn-action {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--ea-dark, #171717);
  color: #fff;
  border: 0;
  font-family: var(--font-ui, 'Montserrat', sans-serif) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: .03em;
  text-transform: uppercase !important;
  padding: 13px 22px;
  border-radius: var(--radius-round, 50px) !important;
  cursor: pointer;
  transition: background-color .15s, transform .15s;
}
.postid-20270 .ea-btn-action::before {
  content: "\FF0B"; /* ＋ pleine chasse, cf. maquette */
  font-weight: 800;
  font-size: 14px;
}
.postid-20270 .ea-btn-action:hover {
  background: var(--ea-pink, #FF3683);
  border-radius: var(--radius-round, 50px) !important;
  transform: translateY(-1px);
}

/* --- 10.2 Vue 21496 en carte blanche autoporteuse --- */
/* Décision Mathieu 21/07/2026 : le widget titre "SUIVI DES CONTRATS, DEVIS
   ET AVENANTS" (elementor-element-22f0e23, .ea-view-card-title) est retiré
   de la page (redondant avec le h1 de page "Contrats — machine et suivi")
   — supprimé via EMCP (emcp-tools-remove-element), pas seulement masqué en
   CSS. La règle de style du titre ci-dessous est donc retirée avec lui (plus
   aucun élément ne la matche). Sans lui, le contenu de la vue (bannière
   documents en attente, recherche) touchait le bord haut arrondi de la
   carte à 0px — padding-top ajouté pour que les compteurs respirent. */
.postid-20270 .elementor-element-42b0ea6 {
  background: #fff;
  border-radius: var(--radius-xl, 24px);
  box-shadow: 0 2px 14px rgb(23 23 23 / .05);
  overflow: hidden;
  margin-top: 10px;
  padding-top: 26px;
}
/* Tableau bord à bord : la carte (ci-dessus) et la vue elle-même
   (.gv-container.ea-v2, cf. section 1) sont déjà en padding:0 — seule la
   première colonne gagne un peu plus d'aisance (28px) pour ne pas coller
   au radius 24px de la carte, en lieu et place des 16px partagés par les
   autres colonnes. */
.postid-20270 .gv-container.ea-v2 table.gv-table-view thead th:first-child,
.postid-20270 .gv-container.ea-v2 table.gv-table-view tbody td:first-child {
  padding-left: 28px;
}

@media (max-width: 640px) {
  .postid-20270 .elementor-element-bf535f8 > .elementor-widget-wrap { align-items: stretch; }
  .postid-20270 .ea-btn-action { justify-content: center; }
}

/* === 11. POPUPS v2 — THÈME "VISIONNEUSE" + FORMULAIRES GF === */
/* ============================================================================
   Restylage CSS pur (aucun fichier plugin touché) du thème Popup Maker
   "Visionneuse" (post_type popup_theme, ID 21772, slug lightbox — utilisé
   par les 23 popups du site) + des formulaires Gravity Forms qu'il contient
   (langage v2 : labels compacts, champs #F8F8F8, choix en pilules). Même
   habillage appliqué au 4e contexte : la lightbox d'édition GravityView
   (.gv-edit-entry-wrapper, rendue dans son propre iframe — chantier
   "Demander l'envoi" réglé ici d'un coup). Scope body:not(.ea-public-shell)
   partout, réplique le motif déjà établi en 8.9 : exclut structurellement
   la page publique de candidature (formulaire POSTULER hors popup, hors
   lightbox d'édition) — vérifiée identique avant/après.
   Réglages GF INTANGIBLES : aucun champ, libellé, logique conditionnelle,
   confirmation ou notification touché — uniquement le CSS de ce qui existe
   déjà (le type d'indicateur d'étapes — barre % ici, pas une liste discrète
   — est un réglage de formulaire, non modifié : la barre est stylée telle
   quelle, en pilule).
   ============================================================================ */

/* --- 11.1 Thème Popup Maker "Visionneuse" (toutes popups, ID 21772) --- */
/* Largeur : le réglage "Normal" du thème Popup Maker pose une classe
   .size-normal (width:70%, ~1195px en desktop large) — écart mesuré vs la
   maquette (760px). Popup Maker pose en plus, à l'ouverture, un `min-width`
   INLINE en % (variable selon le réglage "Responsive" par popup — vu
   `min-width:0%` sur un popup, `min-width:70%` sur un autre) : sans override,
   ce min-width inline prime sur notre `width` (le calcul de boîte CSS retient
   toujours le plus grand des deux, quelle que soit la spécificité/!important,
   ce sont deux propriétés distinctes). D'où les 3 propriétés forcées ici. */
body:not(.ea-public-shell) .pum-theme-21772 .pum-container {
  width: min(760px, 94vw) !important;
  min-width: min(760px, 94vw) !important;
  max-width: min(760px, 94vw) !important;
}
/* Hauteur (retour Mathieu 22/07/2026, round 3) : .pum-container est en
   position:fixed + centré, sans limite de hauteur — un contenu long
   (formulaire multi-champs/multi-pages) dépassait donc du haut ET du bas
   du viewport, hors de portée (pas de scroll possible, la fenêtre du
   navigateur coupait le contenu des deux côtés). Plafond + scroll interne
   au lieu de laisser la boîte s'étirer au-delà de l'écran. */
body:not(.ea-public-shell) .pum-theme-21772 .pum-container {
  max-height: 88vh !important;
  overflow-y: auto !important;
}
body:not(.ea-public-shell) .pum-theme-21772.pum-overlay {
  background: rgb(23 23 23 / .55) !important;
}
body:not(.ea-public-shell) .pum-theme-21772 .pum-container {
  background: #fff !important;
  border-radius: 24px !important;
  box-shadow: 0 24px 80px rgb(0 0 0 / .35) !important;
}
/* Croix mal alignée (retour Mathieu 22/07/2026) : le "×" natif de Popup
   Maker (texte réel dans le bouton, pas juste une icône) doit être
   invisible pour ne laisser que notre icône ::before en masque CSS — mais
   style.css (thème, "DO NOT CHANGE") pose button:not(.ea-v2 *):not(...)
   { font-size:1rem } (même règle globale déjà rencontrée sur le bouton
   "Machine à contrats"), plus spécifique que color:transparent/font-size:0
   ci-dessous sans !important. Le "×" restait donc visible (10px, blanc),
   superposé/décalé par rapport à notre icône ::before → effet de croix
   dédoublée/mal alignée. !important ajouté, même motif que partout
   ailleurs dans ce fichier face à cette même règle héritée. */
body:not(.ea-public-shell) .pum-theme-21772 .pum-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ea-white, #fff);
  border: 1px solid var(--ea-gray-border, #ddd);
  box-shadow: 0 2px 8px rgb(0 0 0 / .10); /* aligné maquette (21/07/2026), etait 10px/.18 */
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
}
/* Croix encore décalée après le premier correctif (retour Mathieu
   22/07/2026) : le centrage par "display:grid; place-items:center" sur le
   bouton dépendait de la boîte du bouton (bordure/box-sizing) pour centrer
   le ::before — remplacé par un centrage absolu classique
   (position:absolute + top/left:50% + translate(-50%,-50%)), indépendant
   de toute question de boîte/grid, garanti pixel pour pixel. Croix
   elle-même simplifiée en coordonnées symétriques évidentes (6,6)-(18,18)
   et (18,6)-(6,18) dans un viewBox 24×24 — marge de 6 identique des 4
   côtés, plus simple à vérifier à l'oeil que l'ancien tracé (4,4)-(20,20). */
body:not(.ea-public-shell) .pum-theme-21772 .pum-close::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px; height: 14px;
  background-color: var(--ea-gray-dark, #373033);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6L18 18M18 6L6 18' stroke='black' stroke-width='2.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6L18 18M18 6L6 18' stroke='black' stroke-width='2.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  transition: background-color .15s;
}
body:not(.ea-public-shell) .pum-theme-21772 .pum-close:hover::before {
  background-color: var(--ea-pink, #FF3683);
}

/* --- 11.2 Formulaires GF — couche globale (page/popup/lightbox) --- */
/* Dé-scopée le 22/07/2026 (brief "skin v2 globale des formulaires",
   Phase 1) : cible .gform_wrapper directement au lieu de son ancêtre
   .pum-container (popup) ou .gv-edit-entry-wrapper (lightbox d'édition) —
   un formulaire Gravity Forms a TOUJOURS ce conteneur, qu'il soit posé à
   même une page (famille C), dans une popup ou dans la lightbox d'édition.
   Seul le garde-fou body:not(.ea-public-shell) est conservé : protège
   encore les 3 pages publiques sanctuarisées (événement/job réintégrés en
   Phase 3a, login hors périmètre auto). */
body:not(.ea-public-shell) .gform_wrapper {
  font-family: var(--font-ui, 'Montserrat', sans-serif);
}
/* Grille 12 colonnes (retour Mathieu 22/07/2026, round 3) : le
   grid-template-columns:1fr 1fr + grid-column:span 1 imposé à TOUS les
   champs écrasait le système natif Gravity Forms/gravity-theme, qui pose
   déjà ses propres grid-column (span 3/5/6/8/12...) selon la classe de
   largeur configurée par champ (.gfield--width-quarter, --width-five-
   twelfths, etc. — capture DevTools Mathieu, "CHARGE DE TRAVAIL" écrasé
   à 1 colonne au lieu de 5/12, texte tassé illisible). Un grid 2 colonnes
   fixe est incompatible avec des spans pensés pour 12 colonnes : la
   grille est donc alignée sur 12 colonnes et le span n'est plus forcé —
   gravity-theme (basic.min.css, déjà chargé) gère nativement le span par
   champ, on ne fait plus que fournir le conteneur. */
body:not(.ea-public-shell) .gform_wrapper .gform_fields {
  display: grid !important;
  grid-template-columns: repeat(12, 1fr) !important;
  gap: 16px 24px !important;
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
}
body:not(.ea-public-shell) .gform_wrapper .gfield {
  margin: 0 !important;
}
body:not(.ea-public-shell) .gform_wrapper .gfield--width-full,
body:not(.ea-public-shell) .gform_wrapper .gfield--type-section {
  grid-column: 1 / -1 !important;
}
/* Plancher de largeur (round 4, retour Mathieu) : le span natif Gravity
   Forms pour les classes de largeur les plus étroites (quarter=3/12,
   fifth/sixth/seventh...=moins encore) est mathématiquement "correct"
   mais "réduit énormément l'espace des éléments concernés" dans la
   pratique — ces formulaires n'ont pas été conçus/testés avec un rendu
   12 colonnes honnête, les libellés/valeurs français y sont trop à
   l'étroit. Choix de présentation (pas un champ/réglage de formulaire
   touché) : aucune classe de largeur ne descend sous la moitié (span 6).
   .gfield--width-third/two-thirds/three-quarters/five-twelfths/seven-
   twelfths etc. déjà ≥ la moitié ou proches, laissés au natif. */
body:not(.ea-public-shell) .gform_wrapper .gfield--width-quarter,
body:not(.ea-public-shell) .gform_wrapper .gfield--width-fifth,
body:not(.ea-public-shell) .gform_wrapper .gfield--width-sixth,
body:not(.ea-public-shell) .gform_wrapper .gfield--width-seventh,
body:not(.ea-public-shell) .gform_wrapper .gfield--width-eighth,
body:not(.ea-public-shell) .gform_wrapper .gfield--width-ninth,
body:not(.ea-public-shell) .gform_wrapper .gfield--width-tenth,
body:not(.ea-public-shell) .gform_wrapper .gfield--width-eleventh,
body:not(.ea-public-shell) .gform_wrapper .gfield--width-twelfth {
  grid-column: span 6 !important;
}
@media (max-width: 640px) {
  body:not(.ea-public-shell) .gform_wrapper .gform_fields {
    grid-template-columns: 1fr !important;
  }
  body:not(.ea-public-shell) .gform_wrapper .gfield {
    grid-column: 1 / -1 !important;
  }
}

/* Libellés — !important nécessaire : bat la règle héritée globale
   .gfield_label{font-weight:900;color:var(--ea-black);text-transform:
   uppercase !important} (legacy, section CSS additionnel intranet). */
body:not(.ea-public-shell) .gform_wrapper .gfield_label.gform-field-label {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em;
  color: var(--ea-gray-mid, #A7A7A7) !important;
  margin-bottom: 6px;
}
body:not(.ea-public-shell) .gform_wrapper .gfield_required {
  color: var(--ea-pink, #FF3683) !important;
}
body:not(.ea-public-shell) .gform_wrapper .gfield_description {
  font-size: 11px !important;
  color: var(--ea-gray-light, #C9C9C9) !important;
}
/* Légende "« * » indique les champs nécessaires" — trop grosse/trop noire
   par défaut (16px, noir), retour Mathieu 22/07/2026 : réduite et grisée
   pour matcher le reste des textes secondaires du formulaire. */
body:not(.ea-public-shell) .gform_wrapper .gform_required_legend {
  font-size: 11px !important;
  color: var(--ea-gray-mid, #A7A7A7) !important;
}

/* Champs texte/select/textarea/date */
body:not(.ea-public-shell) .gform_wrapper input[type=text],
body:not(.ea-public-shell) .gform_wrapper input[type=email],
body:not(.ea-public-shell) .gform_wrapper input[type=tel],
body:not(.ea-public-shell) .gform_wrapper input[type=number],
body:not(.ea-public-shell) .gform_wrapper input[type=date],
body:not(.ea-public-shell) .gform_wrapper select,
body:not(.ea-public-shell) .gform_wrapper textarea {
  font: 400 13.5px var(--font-ui, 'Montserrat', sans-serif) !important;
  color: var(--ea-dark, #171717) !important;
  background: var(--ea-gray-input, #F8F8F8) !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  padding: 11px 14px !important;
  width: 100%;
  transition: border-color .12s, background-color .12s;
}
/* Sélecteurs [type=...] répétés à l'identique de la règle de base
   ci-dessus (pas un simple "input:hover") : un "input:hover" nu attrape
   aussi les <input type="button"/"submit"> (le bouton "C'est tout bon, je
   continue !" EST un <input>) et gagnait, par un point de spécificité
   d'élément supplémentaire, sur la règle héritée qui pose la pilule rose
   au survol de ce bouton — fond #f2f2f2 quasi blanc + texte blanc du
   bouton = illisible (retour Mathieu 22/07/2026). */
body:not(.ea-public-shell) .gform_wrapper input[type=text]:hover,
body:not(.ea-public-shell) .gform_wrapper input[type=email]:hover,
body:not(.ea-public-shell) .gform_wrapper input[type=tel]:hover,
body:not(.ea-public-shell) .gform_wrapper input[type=number]:hover,
body:not(.ea-public-shell) .gform_wrapper input[type=date]:hover,
body:not(.ea-public-shell) .gform_wrapper select:hover,
body:not(.ea-public-shell) .gform_wrapper textarea:hover {
  background: #f2f2f2 !important;
}
body:not(.ea-public-shell) .gform_wrapper input[type=text]:focus,
body:not(.ea-public-shell) .gform_wrapper input[type=email]:focus,
body:not(.ea-public-shell) .gform_wrapper input[type=tel]:focus,
body:not(.ea-public-shell) .gform_wrapper input[type=number]:focus,
body:not(.ea-public-shell) .gform_wrapper input[type=date]:focus,
body:not(.ea-public-shell) .gform_wrapper select:focus,
body:not(.ea-public-shell) .gform_wrapper textarea:focus {
  outline: none !important;
  background: #fff !important;
  border-color: var(--ea-pink, #FF3683) !important;
}
body:not(.ea-public-shell) .gform_wrapper textarea {
  min-height: 84px;
  resize: vertical;
}

/* Sections (.gsection) — !important + ancêtre .gform_wrapper.gravity-theme
   nécessaires : bat la règle héritée (même ancêtre, plus spécifique) qui
   pose une bordure basse noire + son propre padding/margin.
   Renforcée le 22/07/2026 (retour Mathieu, round 2) : la bordure haute
   1px + titre 11px passaient inaperçus dans un formulaire dense (ex.
   "DÉTAILS DE LA PROSPECTION" invisible au milieu des champs). Bandeau
   plein complet (fond teinté + bordure gauche 4px, langage déjà établi
   pour .ea-alert/.warning) au lieu d'un simple filet, titre agrandi. */
body:not(.ea-public-shell) .gform_wrapper.gravity-theme .gsection {
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-left: 4px solid var(--ea-pink, #FF3683) !important;
  background: var(--ea-gray-bg-light, #F6F6F6) !important;
  border-radius: 0 var(--radius-md, 14px) var(--radius-md, 14px) 0 !important;
  padding: 10px 16px !important;
  margin: 24px 0 16px !important;
}
body:not(.ea-public-shell) .gform_wrapper.gravity-theme .gform_fields > .gfield--type-section:first-child {
  margin-top: 0 !important;
}
body:not(.ea-public-shell) .gform_wrapper .gsection_title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ea-dark, #171717);
  margin: 0;
}

/* Choix (radio/checkbox) en pilules cliquables */
body:not(.ea-public-shell) .gform_wrapper .ginput_container_radio .gfield_radio,
body:not(.ea-public-shell) .gform_wrapper .ginput_container_checkbox .gfield_checkbox {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
body:not(.ea-public-shell) .gform_wrapper .gchoice {
  margin: 0 !important;
}
body:not(.ea-public-shell) .gform_wrapper .gfield-choice-input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  overflow: hidden;
}
/* !important partout : bat une règle globale héritée très large
   (form input[type=radio] + label {background/padding/radius !important})
   pensée pour un autre contexte (boutons de choix ailleurs sur le site),
   non scopée, qui s'applique aussi ici. */
/* .gform_wrapper ajouté à la chaîne (spécificité 0,4,0) : bat une seconde
   règle héritée, plus précise que la première, qui ne pose QUE le radius
   (.gform_wrapper.gravity-theme .gfield-choice-input+label{border-radius:
   var(--radius-md) !important}, spécificité 0,3,1 — gagnait sur le seul
   radius malgré la première correction). */
body:not(.ea-public-shell) .gform_wrapper .gchoice .gform-field-label--type-inline {
  display: inline-flex !important;
  align-items: center;
  width: auto !important;
  max-width: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  border-radius: 50px !important;
  background-color: transparent !important;
  color: var(--ea-dark, #171717) !important;
  border: 1px solid var(--ea-gray-border, #ddd) !important;
  cursor: pointer;
  transition: all .12s !important;
  margin: 0;
}
body:not(.ea-public-shell) .gform_wrapper .gchoice .gform-field-label--type-inline:hover {
  border-color: var(--ea-dark, #171717) !important;
}
body:not(.ea-public-shell) .gform_wrapper .gfield-choice-input:checked + .gform-field-label--type-inline {
  background-color: var(--ea-dark, #171717) !important;
  color: #fff !important;
  border-color: var(--ea-dark, #171717) !important;
}

/* Pied de formulaire (précédent / suivant / soumettre / mettre à jour) —
   !important + ancêtre .gform_wrapper.gravity-theme : bat la règle héritée
   (même ancêtre, plus spécifique) qui pose sa propre marge/bordure. */
body:not(.ea-public-shell) .gform_wrapper.gravity-theme .gform_footer,
body:not(.ea-public-shell) .gform_wrapper.gravity-theme .gform_page_footer {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  margin: 22px 0 0 !important;
  padding: 18px 0 0 !important;
  border-top: 1px solid var(--ea-gray-bg-light, #F6F6F6) !important;
}
body:not(.ea-public-shell) .gform_wrapper .gform_previous_button {
  font: 600 12px var(--font-ui, 'Montserrat', sans-serif) !important;
  color: var(--ea-gray-mid, #A7A7A7) !important;
  background: none !important;
  border: 0 !important;
  cursor: pointer;
  box-shadow: none !important;
}
body:not(.ea-public-shell) .gform_wrapper .gform_previous_button:hover {
  color: var(--ea-dark, #171717) !important;
}
/* Charte 22/07/2026 (brief "skin v2 globale") : boutons pleins NOIRS,
   survol ROSE — inversion volontaire du pilote initial (rose plein/hover
   rose foncé, validé 21-22/07) : le rose redevient réservé aux liens.
   Exclusions (retour Mathieu 22/07/2026, round 2) : .gform_button seul ne
   suffit plus à distinguer une action PRIMAIRE d'une action ANNULER/
   SUPPRIMER — les boutons Annuler/Delete de GravityView et GPNF, même
   quand ils portent aussi .gform_button, doivent recevoir la hiérarchie
   secondaire/danger posée en 11.7, pas ce remplissage noir générique. */
body:not(.ea-public-shell) .gform_wrapper .gform_button:not(.gv-button-cancel):not(.gv-button-delete):not(.gpnf-btn-cancel):not(.gpnf-btn-delete),
body:not(.ea-public-shell) .gform_wrapper .gform_next_button {
  font: 600 12.5px var(--font-ui, 'Montserrat', sans-serif) !important;
  letter-spacing: .03em;
  text-transform: uppercase;
  background: var(--ea-dark, #171717) !important;
  background-image: none !important;
  color: #fff !important;
  border: 0 !important;
  cursor: pointer;
  padding: 13px 26px !important;
  border-radius: 50px !important;
  box-shadow: none !important;
  transition: background-color .15s;
  margin-left: auto;
}
/* Bouton de soumission finale (.gform_button.button, ancêtre
   .gform_footer/.gform_page_footer) : une règle héritée plus spécifique
   (.gform_footer .gform_button.button{width:100%; border-radius:
   var(--radius-md)}) gagne sur la règle ci-dessus. Rencontré sur DEUX
   boutons distincts, tous deux corrigés ici (mise à jour 21/07/2026 :
   l'hypothèse initiale "jamais rencontré dans les popups" était fausse,
   trouvé sur la dernière page du popup Machine à contrats en vérifiant
   les 8 pages une à une) :
   - .gv-button-update (lightbox d'édition "Demander l'envoi") : classes
     supplémentaires .btn.btn-lg.button.button-large (police 24px).
   - bouton final "Envoyer à la machine" (popup, dernière page) : mêmes
     classes .gform_button.button suffisent à déclencher la même règle
     héritée (540px de large mesuré, au lieu de la pilule attendue).
   "width:auto" seul ne suffisait pas : la règle héritée pose un "display"
   implicite en bloc (comportement WP-admin natif des classes .button/
   .button-large), et pour un élément bloc, width:auto ne rétrécit PAS au
   contenu (contrairement à inline-block) — confirmé en styles calculés
   (774px de large malgré width:auto !important posé seul, sur le premier
   bouton rencontré). display:inline-flex ajouté pour revenir au
   comportement pilule des autres boutons du formulaire. */
body:not(.ea-public-shell) .gform_wrapper.gravity-theme .gform_footer .gform_button.button,
body:not(.ea-public-shell) .gform_wrapper.gravity-theme .gform_page_footer .gform_button.button {
  display: inline-flex !important;
  align-items: center;
  width: auto !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  border-radius: 50px !important;
}
body:not(.ea-public-shell) .gform_wrapper .gform_button:not(.gv-button-cancel):not(.gv-button-delete):not(.gpnf-btn-cancel):not(.gpnf-btn-delete):hover,
body:not(.ea-public-shell) .gform_wrapper .gform_next_button:hover {
  background: var(--ea-pink, #FF3683) !important;
}

/* Indicateur d'étapes multi-pages — réglage de formulaire non modifié
   (barre de progression %, pas une liste d'étapes discrète) : la barre
   elle-même reprend le langage pilule (piste arrondie, remplissage rose). */
body:not(.ea-public-shell) .gform_wrapper .gf_progressbar_wrapper {
  margin: 0 0 18px;
}
body:not(.ea-public-shell) .gform_wrapper .gf_progressbar_title {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ea-gray-mid, #A7A7A7);
  margin-bottom: 6px;
}
/* !important + ancêtre .gform_wrapper.gravity-theme : bat les règles
   héritées .gf_progressbar_blue (piste, gris clair) et
   .gf_progressbar_percentage.percentbar_blue (remplissage, gris foncé). */
body:not(.ea-public-shell) .gform_wrapper.gravity-theme .gf_progressbar {
  background: var(--ea-gray-bg-light, #F6F6F6) !important;
  border-radius: 50px !important;
  height: 8px !important;
  overflow: hidden;
}
body:not(.ea-public-shell) .gform_wrapper.gravity-theme .gf_progressbar_percentage,
body:not(.ea-public-shell) .gform_wrapper.gravity-theme .gf_progressbar_percentage.percentbar_blue {
  background-color: var(--ea-pink, #FF3683) !important;
  background-image: none !important;
  border-radius: 50px !important;
  height: 100% !important;
}
body:not(.ea-public-shell) .gform_wrapper .gf_progressbar_percentage span {
  display: none; /* "%" natif du plugin — remplacé par le libellé du titre juste au-dessus */
}
/* Bascule titre de section / "Étape X sur Y" natif — posée par le snippet
   WPCode 95947 (mirroir ea-gf-step-title-rewrite_wpcode-95935.php), qui
   enveloppe le texte natif dans .ea-step-native (jamais détruit, permet le
   repli sur les pages sans section) et ajoute .ea-step-section-title. */
body:not(.ea-public-shell) .gform_wrapper .ea-step-section-title {
  display: none;
}
body:not(.ea-public-shell) .gform_wrapper .gf_progressbar_title.ea-has-section-title .ea-step-native {
  display: none;
}
body:not(.ea-public-shell) .gform_wrapper .gf_progressbar_title.ea-has-section-title .ea-step-section-title {
  display: inline;
}

/* --- 11.3 Messages d'erreur/avertissement — habillage .ea-notice --- */
/* Règle héritée globale (hors .ea-v2, ea-intranet.css ~L.1568) :
   .warning, .gform_validation_errors, .validation_message { border:1px
   solid red !important; border-radius:var(--radius-md) } + .warning en
   16px gras. Vue en démo dans le champ HTML conditionnel "warning" du
   formulaire Machine à contrats (field_22_34, classe CSS de champ posée
   côté config GF — pas une modification du formulaire, on stylise une
   classe déjà là). Repris ici au langage .ea-alert déjà établi pour la
   fiche (8.2b) : coins gauches carrés, bordure gauche 4px, fond/texte
   rouge — même famille de composant, un seul endroit où ce motif existe. */
body:not(.ea-public-shell) .gform_wrapper .warning,
body:not(.ea-public-shell) .gform_wrapper .gform_validation_errors,
body:not(.ea-public-shell) .gform_wrapper .validation_message {
  border: 0 !important;
  border-left: 4px solid var(--ea-red, #fa0555) !important;
  border-radius: 0 var(--radius-md, 14px) var(--radius-md, 14px) 0 !important;
  background-color: var(--ea-red-bg, #FAEDED) !important;
  color: var(--ea-red, #fa0555) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.5;
  padding: 14px 18px !important;
}
body:not(.ea-public-shell) .gform_wrapper .gform_validation_errors > h2 {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--ea-red, #fa0555) !important;
  margin: 0 0 6px;
  padding-left: 32px;
  position: relative;
}
/* Icône du bandeau d'erreur de soumission (cercle "!") qui chevauche le
   texte quand le titre passe sur 2 lignes (retour Mathieu 22/07/2026,
   capture) : GF/du vieux CSS hérité pose .gform-icon--circle-error en
   position:absolute + height:100% - mesuré en live à 200px de haut (au
   lieu d'une icône ~28px), la hauteur à 100% se résolvant contre la
   hauteur totale du bandeau (tout le texte + la liste) plutôt que contre
   une icône de taille normale. Corrigé GLOBALEMENT (pas de scope popup/
   lightbox : autorisation explicite de Mathieu, "vieux CSS" affectant
   potentiellement tout le site, pas seulement ce formulaire) en forçant
   une icône de taille fixe, positionnée en haut à gauche du titre H2
   (lui-même passé en position:relative avec le padding-left qui va avec)
   plutôt qu'en absolu tout court. */
.gform_submission_error .gform-icon--circle-error {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 22px !important;
  height: 22px !important;
  font-size: 22px !important;
  line-height: 22px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
body:not(.ea-public-shell) .gform_wrapper .gfield_validation_message {
  font-size: 11.5px !important;
  color: var(--ea-red, #fa0555) !important;
  border: 0 !important;
  background: none !important;
  padding: 0 !important;
  font-weight: 400 !important;
}
/* Variante orange du même composant (retour Mathieu 21/07/2026) : classe
   CSS de champ ".orange" (déjà posée côté config GF sur des champs HTML
   d'indication, ex. "Si les choix ci-dessous ne sont pas pertinents...")
   — .orange n'était qu'un utilitaire de couleur de texte (ea-intranet.css
   ~L.1699, color:var(--ea-orange) sur tout le site, hors scope). Ici,
   même traitement "bannière" que .warning (rouge) mais en orange :
   coins gauches carrés, bordure gauche 4px, fond/texte orange. */
body:not(.ea-public-shell) .gform_wrapper .gfield.orange {
  border: 0 !important;
  border-left: 4px solid var(--ea-orange, #FF6636) !important;
  border-radius: 0 var(--radius-md, 14px) var(--radius-md, 14px) 0 !important;
  background-color: var(--ea-orange-light, #ffe0d6) !important;
  color: var(--ea-orange-text, #dc7f3a) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.5;
  padding: 14px 18px !important;
}

/* --- 11.4 Widgets tiers enrichis (Chosen.js, TinyMCE, noUiSlider) --- */
/* Ajoutée le 22/07/2026 (retour Mathieu, round 2) : plusieurs champs de
   formulaire s'appuient sur des bibliothèques JS tierces distinctes de
   Selectize (déjà couverte, hors .ea-v2, ~L.895) et jamais habillées au
   langage v2 — captures à l'appui (formulaire "NOUVEAU CLIENT" et fiche
   "TABLEAU DE DEV (édition)") :
   - Chosen.js (.chosen-container) : champs de recherche Populate Anything
     ("Rechercher dans la base clients") et certains multiselect ("Pôles").
   - TinyMCE (.wp-editor-wrap) : éditeur enrichi WordPress natif posé sur
     certains champs "description longue" (ex. "Notes sur le client").
   - noUiSlider (.noUi-target) : champ Range Slider (ex. "Probabilités de
     réussite (en %)", formulaire PROSPECTION). */

/* Chosen — sélecteur simple (recherche client, etc.) */
body:not(.ea-public-shell) .gform_wrapper .chosen-container-single .chosen-single {
  height: auto !important;
  font: 400 13.5px var(--font-ui, 'Montserrat', sans-serif) !important;
  color: var(--ea-dark, #171717) !important;
  background: var(--ea-gray-input, #F8F8F8) !important;
  background-image: none !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  padding: 11px 14px !important;
  box-shadow: none !important;
  line-height: 1.3 !important;
}
body:not(.ea-public-shell) .gform_wrapper .chosen-container-single .chosen-single div {
  top: 0 !important;
  right: 8px !important;
  width: 18px !important;
}
body:not(.ea-public-shell) .gform_wrapper .chosen-container-single .chosen-single div b {
  background: none !important;
  position: relative;
}
body:not(.ea-public-shell) .gform_wrapper .chosen-container-single .chosen-single div b::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 10px; height: 10px;
  background-color: var(--ea-gray-mid, #A7A7A7);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
body:not(.ea-public-shell) .gform_wrapper .chosen-container-active.chosen-with-drop .chosen-single {
  border-color: var(--ea-pink, #FF3683) !important;
  background: #fff !important;
}

/* Chosen — champ de recherche interne (search-as-you-type) */
body:not(.ea-public-shell) .gform_wrapper .chosen-container .chosen-search input {
  font: 400 13px var(--font-ui, 'Montserrat', sans-serif) !important;
  background: var(--ea-gray-input, #F8F8F8) !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
}

/* Chosen — panneau déroulant + résultats (même langage que .selectize-dropdown) */
body:not(.ea-public-shell) .gform_wrapper .chosen-drop {
  background: #fff !important;
  border: 1px solid var(--ea-gray-border, #ddd) !important;
  border-radius: var(--radius-md, 14px) !important;
  box-shadow: 0 12px 32px rgb(0 0 0 / .14) !important;
  padding: 6px !important;
  margin-top: 6px !important;
}
body:not(.ea-public-shell) .gform_wrapper .chosen-results {
  margin: 0 !important;
  padding: 0 !important;
}
body:not(.ea-public-shell) .gform_wrapper .chosen-results li {
  font: 400 13px var(--font-ui, 'Montserrat', sans-serif) !important;
  color: var(--ea-dark, #171717) !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
}
body:not(.ea-public-shell) .gform_wrapper .chosen-results li.highlighted,
body:not(.ea-public-shell) .gform_wrapper .chosen-results li:hover {
  background: rgb(255 54 131 / .10) !important;
  color: var(--ea-dark, #171717) !important;
}
body:not(.ea-public-shell) .gform_wrapper .chosen-results li.no-results {
  color: var(--ea-gray-mid, #A7A7A7) !important;
}

/* Chosen — sélection multiple (tags / pilules), ex. champ "Pôles" */
body:not(.ea-public-shell) .gform_wrapper .chosen-container-multi .chosen-choices {
  font: 400 13.5px var(--font-ui, 'Montserrat', sans-serif) !important;
  background: var(--ea-gray-input, #F8F8F8) !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  padding: 6px !important;
  box-shadow: none !important;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
body:not(.ea-public-shell) .gform_wrapper .chosen-container-active .chosen-choices {
  border-color: var(--ea-pink, #FF3683) !important;
  background: #fff !important;
}
body:not(.ea-public-shell) .gform_wrapper .chosen-container-multi .chosen-choices li.search-field {
  margin: 0 !important;
  padding: 4px 2px !important;
}
body:not(.ea-public-shell) .gform_wrapper .chosen-container-multi .chosen-choices li.search-field input {
  font: 400 13px var(--font-ui, 'Montserrat', sans-serif) !important;
  height: auto !important;
  padding: 2px 4px !important;
}
body:not(.ea-public-shell) .gform_wrapper .chosen-container-multi .chosen-choices li.search-choice {
  font: 600 12px var(--font-ui, 'Montserrat', sans-serif) !important;
  color: #fff !important;
  background: var(--ea-dark, #171717) !important;
  border: 0 !important;
  border-radius: 50px !important;
  padding: 6px 26px 6px 12px !important;
  margin: 0 !important;
  position: relative;
}
body:not(.ea-public-shell) .gform_wrapper .chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
  top: 50% !important;
  right: 8px !important;
  left: auto !important;
  transform: translateY(-50%);
  width: 12px; height: 12px;
  background: none !important;
}
body:not(.ea-public-shell) .gform_wrapper .chosen-container-multi .chosen-choices li.search-choice .search-choice-close::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #fff;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6L18 18M18 6L6 18' stroke='black' stroke-width='3' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6L18 18M18 6L6 18' stroke='black' stroke-width='3' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

/* TinyMCE (éditeur WYSIWYG WordPress natif) */
body:not(.ea-public-shell) .gform_wrapper .wp-editor-wrap {
  border-radius: var(--radius-md, 14px) !important;
  overflow: hidden;
  border: 1px solid var(--ea-gray-border, #ddd) !important;
}
body:not(.ea-public-shell) .gform_wrapper .wp-editor-wrap .wp-editor-tabs {
  background: var(--ea-gray-bg-light, #F6F6F6) !important;
  padding: 6px 6px 0 !important;
}
body:not(.ea-public-shell) .gform_wrapper .wp-editor-wrap .wp-switch-editor {
  font: 600 11px var(--font-ui, 'Montserrat', sans-serif) !important;
  text-transform: uppercase;
  border-radius: 8px 8px 0 0 !important;
}
body:not(.ea-public-shell) .gform_wrapper .wp-editor-wrap .mce-toolbar-grp {
  background: var(--ea-gray-bg-light, #F6F6F6) !important;
  border-bottom: 1px solid var(--ea-gray-border, #ddd) !important;
  padding: 6px !important;
}
body:not(.ea-public-shell) .gform_wrapper .wp-editor-wrap .mce-btn button {
  border-radius: 50% !important;
}
body:not(.ea-public-shell) .gform_wrapper .wp-editor-wrap .wp-editor-container,
body:not(.ea-public-shell) .gform_wrapper .wp-editor-wrap .mce-edit-area,
body:not(.ea-public-shell) .gform_wrapper .wp-editor-wrap textarea.wp-editor-area {
  background: #fff !important;
  border: 0 !important;
}
body:not(.ea-public-shell) .gform_wrapper .wp-editor-wrap textarea.wp-editor-area {
  font: 400 13.5px var(--font-ui, 'Montserrat', sans-serif) !important;
  padding: 12px !important;
}

/* noUiSlider (champ Range Slider) */
body:not(.ea-public-shell) .gform_wrapper .noUi-target {
  background: var(--ea-gray-bg-light, #F6F6F6) !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 50px !important;
  height: 8px !important;
  margin: 20px 8px 28px !important;
}
body:not(.ea-public-shell) .gform_wrapper .noUi-connect {
  background: var(--ea-pink, #FF3683) !important;
}
body:not(.ea-public-shell) .gform_wrapper .noUi-handle {
  width: 20px !important;
  height: 20px !important;
  right: -10px !important;
  top: -6px !important;
  border-radius: 50% !important;
  background: #fff !important;
  border: 3px solid var(--ea-pink, #FF3683) !important;
  box-shadow: 0 2px 8px rgb(0 0 0 / .18) !important;
  cursor: grab;
}
body:not(.ea-public-shell) .gform_wrapper .noUi-handle::before,
body:not(.ea-public-shell) .gform_wrapper .noUi-handle::after {
  display: none !important;
}
body:not(.ea-public-shell) .gform_wrapper .noUi-tooltip {
  font: 700 11px var(--font-ui, 'Montserrat', sans-serif) !important;
  color: #fff !important;
  background: var(--ea-dark, #171717) !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 3px 8px !important;
  bottom: 130% !important;
}

/* --- 11.5 Nested forms (GP Nested Forms) --- */
/* Ajoutée le 22/07/2026 (retour Mathieu, round 2) : jusque-là seul le CSS
   legacy (non-v2, ~L.602) habillait .gpnf-add-entry ; la modale d'ajout/
   édition (Tingle.js, .tingle-modal-box) n'avait qu'un habillage minimal
   (~L.780, fond blanc + largeur). Alignée ici sur le même langage que la
   popup Popup Maker (§11.1) : largeur 760px, coins 24px, croix ronde. */

/* Bouton "Ajouter" (liste vide ou peuplée) — pilule pleine noire, cohérente
   avec les boutons d'ajout du chrome (ex. "+ Machine à contrats"). */
body:not(.ea-public-shell) .gform_wrapper .gpnf-add-entry {
  font: 600 12px var(--font-ui, 'Montserrat', sans-serif) !important;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #fff !important;
  background: var(--ea-dark, #171717) !important;
  background-color: var(--ea-dark, #171717) !important;
  border: 0 !important;
  border-radius: 50px !important;
  padding: 10px 20px !important;
  margin: 0 !important;
}
body:not(.ea-public-shell) .gform_wrapper .gpnf-add-entry:hover {
  color: #fff !important;
  background: var(--ea-pink, #FF3683) !important;
  background-color: var(--ea-pink, #FF3683) !important;
}

/* Liste "Il n'y a aucun(e) ..." — même fond que les champs */
body:not(.ea-public-shell) .gform_wrapper .gpnf-entries-status,
body:not(.ea-public-shell) .gform_wrapper .gpnf-list-message {
  background: var(--ea-gray-input, #F8F8F8) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  color: var(--ea-gray-mid, #A7A7A7) !important;
  font-size: 13px !important;
}

/* Tableau des entrées imbriquées déjà ajoutées */
body:not(.ea-public-shell) .gform_wrapper table.gpnf-nested-entries {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
body:not(.ea-public-shell) .gform_wrapper table.gpnf-nested-entries th {
  font: 700 10.5px var(--font-ui, 'Montserrat', sans-serif) !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ea-gray-mid, #A7A7A7) !important;
  border-bottom: 1px solid var(--ea-gray-bg-light, #F6F6F6) !important;
  padding: 8px 10px !important;
  text-align: left;
}
body:not(.ea-public-shell) .gform_wrapper table.gpnf-nested-entries td {
  font-size: 13px !important;
  color: var(--ea-dark, #171717) !important;
  border-bottom: 1px solid var(--ea-gray-bg-light, #F6F6F6) !important;
  padding: 10px !important;
}

/* Modale Tingle.js (ajout/édition d'une entrée imbriquée) — même langage
   que le thème popup Popup Maker (§11.1) : largeur/coins/overlay cohérents. */
body:not(.ea-public-shell) .tingle-modal-box {
  width: min(760px, 94vw) !important;
  max-width: min(760px, 94vw) !important;
  background: #fff !important;
  border-radius: 24px !important;
  box-shadow: 0 24px 80px rgb(0 0 0 / .35) !important;
}
body:not(.ea-public-shell) .tingle-modal {
  background: rgb(23 23 23 / .55) !important;
}
body:not(.ea-public-shell) .tingle-modal-box__content {
  padding: 32px !important;
}
body:not(.ea-public-shell) .tingle-modal-box__footer {
  padding: 16px 32px !important;
  border-top: 1px solid var(--ea-gray-bg-light, #F6F6F6) !important;
}
body:not(.ea-public-shell) .tingle-modal__close {
  position: absolute;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--ea-white, #fff) !important;
  border: 1px solid var(--ea-gray-border, #ddd);
  box-shadow: 0 2px 8px rgb(0 0 0 / .10);
  top: 14px !important;
  right: 14px !important;
}
body:not(.ea-public-shell) .tingle-modal__closeLabel {
  color: transparent !important;
  font-size: 0 !important;
}
body:not(.ea-public-shell) .tingle-modal__close::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 14px; height: 14px;
  background-color: var(--ea-gray-dark, #373033);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6L18 18M18 6L6 18' stroke='black' stroke-width='2.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6L18 18M18 6L6 18' stroke='black' stroke-width='2.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

/* --- 11.6 Hiérarchie des boutons d'action (annuler / supprimer) --- */
/* Ajoutée le 22/07/2026 (retour Mathieu, round 2) : la charte "boutons
   noirs" (11.2) s'appliquait par erreur à TOUS les boutons, y compris
   Annuler et Supprimer/Delete — plus aucune distinction visuelle entre
   "Mettre à jour" et "Delete" dans la lightbox d'édition (capture
   Mathieu, entry/311333). Hiérarchie posée ici (11.2 exclut désormais
   .gv-button-cancel/.gv-button-delete/.gpnf-btn-cancel/.gpnf-btn-delete
   de son remplissage noir générique) :
   - PRIMAIRE (Mettre à jour / Envoyer / Suivant) : pilule pleine noire,
     hover rose — 11.2, inchangé.
   - SECONDAIRE (Annuler / Précédent) : contour uniquement, jamais de
     remplissage — .gform_previous_button l'a déjà (11.2), complété ici
     pour .gv-button-cancel/.gpnf-btn-cancel au même langage.
   - DANGER (Supprimer / Delete) : discret, PAS une pilule pleine — round
     3 (retour Mathieu 22/07/2026) : la première version (fond rouge pâle,
     même gabarit que les autres) restait un bouton à part entière, avec
     le même poids visuel que Mettre à jour/Annuler — au point d'attirer
     l'œil en premier ("naturellement on aurait tendance à cliquer sur le
     supprimer"). Réduit ici à un lien texte souligné, sans fond ni
     bordure — se voit, mais ne rivalise plus avec le primaire. */
body:not(.ea-public-shell) .gv-button-cancel,
body:not(.ea-public-shell) .gpnf-btn-cancel {
  font: 600 12px var(--font-ui, 'Montserrat', sans-serif) !important;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--ea-dark, #171717) !important;
  background: #fff !important;
  background-image: none !important;
  border: 1px solid var(--ea-gray-border, #ddd) !important;
  border-radius: 50px !important;
  padding: 12px 24px !important;
  box-shadow: none !important;
  transition: border-color .15s, color .15s;
}
body:not(.ea-public-shell) .gv-button-cancel:hover,
body:not(.ea-public-shell) .gpnf-btn-cancel:hover {
  color: var(--ea-dark, #171717) !important;
  background: #fff !important;
  border-color: var(--ea-dark, #171717) !important;
}
/* "Supprimer" — round 4 (retour Mathieu 22/07/2026) : rouge en permanence
   (pas seulement au survol) et SANS soulignement — règle étendue à TOUTE
   occurrence du bouton Supprimer sur le site, y compris .delete-button
   (lignes des nested forms, jusque-là hors-périmètre, capturé en train
   d'hériter un style pleine pilule noire imposant, cf. capture Mathieu). */
body:not(.ea-public-shell) .gv-button-delete,
body:not(.ea-public-shell) .gpnf-btn-delete,
body:not(.ea-public-shell) .delete-button {
  font: 600 11.5px var(--font-ui, 'Montserrat', sans-serif) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--ea-red, #fa0555) !important;
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 8px 4px !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: color .15s;
}
body:not(.ea-public-shell) .gv-button-delete:hover,
body:not(.ea-public-shell) .gpnf-btn-delete:hover,
body:not(.ea-public-shell) .delete-button:hover {
  color: var(--ea-dark, #171717) !important;
  background: none !important;
  text-decoration: underline !important;
}
/* "Modifier" (nested forms, .edit-button) — même registre discret que
   Supprimer mais neutre (le rose est réservé aux liens, pas à cette
   action utilitaire). Round 4 : héritait du même remplissage pilule
   imposant que les boutons primaires (capture Mathieu, table "Sociétés"
   des nested forms). */
body:not(.ea-public-shell) .edit-button {
  font: 600 11.5px var(--font-ui, 'Montserrat', sans-serif) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--ea-gray-mid, #A7A7A7) !important;
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 8px 4px !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: color .15s;
}
body:not(.ea-public-shell) .edit-button:hover {
  color: var(--ea-dark, #171717) !important;
  background: none !important;
  text-decoration: underline !important;
}

/* --- 11.7 Position des boutons de pied (round 3, retour Mathieu) --- */
/* "Mettre à jour à gauche apporte de la confusion, naturellement on
   aurait tendance à cliquer sur supprimer" : le pied à 3 boutons (Mettre
   à jour / Annuler / Supprimer) n'est PAS composé de 3 enfants flex
   directs de .gform_footer — les trois boutons vivent tous ENSEMBLE dans
   un même conteneur `#publishing-action` (markup GravityView), qui lui
   n'est PAS flex par défaut (simple bloc). D'où le premier essai raté :
   poser order/margin sur les boutons n'avait aucun effet tant que leur
   conteneur commun n'était pas lui-même passé en display:flex. Corrigé
   ici en deux temps : on met #publishing-action (identifié via :has(),
   déjà utilisé ailleurs dans ce fichier ex. L.706, plutôt que l'id brut
   pour rester robuste si le markup change) en flex, PUIS on réordonne
   ses enfants directs (les boutons, cette fois de vrais enfants flex). */
body:not(.ea-public-shell) .gform_footer > div:has(.gv-button-update),
body:not(.ea-public-shell) .gform_footer > div:has(.gv-button-cancel),
body:not(.ea-public-shell) .gform_footer > div:has(.gv-button-delete) {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  width: 100%;
}
body:not(.ea-public-shell) .gv-button-delete,
body:not(.ea-public-shell) .gpnf-btn-delete {
  order: -1 !important;
  margin-right: auto !important;
}
body:not(.ea-public-shell) .gv-button-cancel,
body:not(.ea-public-shell) .gpnf-btn-cancel {
  order: 1 !important;
}
body:not(.ea-public-shell) .gv-button-update {
  order: 2 !important;
  margin-left: 0 !important;
}

/* --- 11.8 Bouton primaire des modales nested forms (non couvert en round 2) --- */
/* La modale Tingle.js d'ajout/édition (GPNF) a son propre bouton de
   soumission, rendu directement par le plugin — .tingle-btn--primary.
   gpnf-btn-submit, JAMAIS .gform_button — donc jamais touché par 11.2.
   Restait sur l'ancien langage legacy (rose contour, ~L.733) : aligné ici
   sur le même noir plein que les autres primaires. */
body:not(.ea-public-shell) .tingle-btn--primary.gpnf-btn-submit {
  font: 600 12.5px var(--font-ui, 'Montserrat', sans-serif) !important;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #fff !important;
  background: var(--ea-dark, #171717) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 50px !important;
  padding: 13px 26px !important;
  box-shadow: none !important;
  order: 2;
}
body:not(.ea-public-shell) .tingle-btn--primary.gpnf-btn-submit:hover {
  color: #fff !important;
  background: var(--ea-pink, #FF3683) !important;
}

/* --- 11.9 Titre "Modifier l'entrée" (round 3+4, retour Mathieu) --- */
/* "Trop imposant et inutile" au-dessus du vrai titre de l'entrée (ex.
   "DEVIS-02849-FRANCE-BMW") : réduit une première fois en round 3 (11px
   gris majuscules) — mais ce traitement reproduisait presque exactement
   le langage de .gfield_label (10.5px/700/majuscules/gris), retour round
   4 : "se confond avec les labels des champs". Mise en forme différente
   cette fois (italique, casse normale, plus légère) pour ne plus jamais
   pouvoir être confondu avec un label de champ. */
body:not(.ea-public-shell) .gv-edit-entry-title {
  font-size: 11px !important;
  font-weight: 500 !important;
  font-style: italic;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--ea-gray-light, #C9C9C9) !important;
  margin: 0 0 4px !important;
}

/* --- 11.10 Spinner de chargement AJAX (round 4, retour Mathieu) --- */
/* "L'icône animée de chargement déplace le Suivant au milieu" : GF insère
   .gform-loader (ou .gform_ajax_spinner, thème classique) comme frère du
   bouton juste cliqué, DANS le même conteneur flex que Précédent/Suivant/
   Mettre à jour/Annuler/Supprimer (11.2/11.7) — sans order explicite, cet
   élément nouvellement inséré (order:0 par défaut) se glissait entre des
   éléments déjà ordonnés, recalculant toute la distribution spatiale.
   Sorti du flux de répartition : order tout à la fin, taille fixe, ne
   participe plus au calcul d'espacement. */
body:not(.ea-public-shell) .gform-loader,
body:not(.ea-public-shell) .gform_ajax_spinner {
  order: 99 !important;
  flex: 0 0 auto !important;
  margin-left: 8px !important;
  align-self: center;
}

/* --- 11.11 Upload : zone dépôt (round 4, retour Mathieu) --- */
/* Ciblage initial faux : .gform_drop_area/.gform_drop_instructions sont
   les classes du multi-upload NATIF Gravity Forms (trouvées dans le CSS
   du plugin gravityforms), mais ce site utilise GP File Upload Pro (perk
   Gravity Wiz) qui remplace entièrement ce rendu par son propre markup —
   confirmé par inspection DOM en direct : conteneur .gpfup__droparea,
   bouton .gpfup__select-files (porte AUSSI .gform_button_select_files en
   classe secondaire — explique pourquoi la traduction du bouton
   fonctionnait déjà, mais pas celle du texte d'instruction, qui vit dans
   un <span> SANS classe propre, ciblé ici par position structurelle
   :first-child plutôt que par classe). "select files" perd son arrondi au
   survol (bordure carrée) : rétabli explicitement sur l'état hover.
   Texte traduit en français par substitution CSS pure (::before, texte
   source masqué en font-size:0) — chaîne de traduction native du plugin,
   pas un champ ni un réglage de formulaire. */
body:not(.ea-public-shell) .gform_wrapper .gpfup__droparea {
  background: var(--ea-gray-input, #F8F8F8) !important;
  border: 1px dashed var(--ea-gray-border, #ddd) !important;
  border-radius: 12px !important;
}
body:not(.ea-public-shell) .gform_wrapper .gpfup__droparea > div > span:first-child {
  font-size: 0 !important;
}
body:not(.ea-public-shell) .gform_wrapper .gpfup__droparea > div > span:first-child::before {
  content: "Déposer les fichiers ici ou";
  font: 400 13px var(--font-ui, 'Montserrat', sans-serif);
  color: var(--ea-gray-mid, #A7A7A7);
}
body:not(.ea-public-shell) .gform_wrapper .gpfup__select-files,
body:not(.ea-public-shell) .gform_wrapper .gpfup__select-files:hover {
  font-size: 0 !important;
  border-radius: 50px !important;
  background: var(--ea-dark, #171717) !important;
  border: 0 !important;
  padding: 10px 20px !important;
}
body:not(.ea-public-shell) .gform_wrapper .gpfup__select-files:hover {
  background: var(--ea-pink, #FF3683) !important;
}
body:not(.ea-public-shell) .gform_wrapper .gpfup__select-files::before {
  content: "Sélectionner des fichiers";
  font: 600 12px var(--font-ui, 'Montserrat', sans-serif);
  color: #fff;
}

/* --- 11.12 Bouton "Enregistrer et continuer plus tard" (round 4) --- */
/* Invisible (capture Mathieu, formulaire ÉVALUATION ANNUELLE) : rendu par
   GF avec ses classes thème natif (.gform-theme-button--secondary),
   jamais couvert par nos règles (qui ciblent .gform_previous_button/
   .gv-button-cancel) — fond quasi blanc sur fond blanc, aucun contraste.
   Aligné sur le langage secondaire (contour) déjà établi. */
body:not(.ea-public-shell) .gform_wrapper .gform_save_link {
  font: 600 12px var(--font-ui, 'Montserrat', sans-serif) !important;
  text-transform: none !important;
  color: var(--ea-dark, #171717) !important;
  background: #fff !important;
  background-image: none !important;
  border: 1px solid var(--ea-gray-border, #ddd) !important;
  border-radius: 50px !important;
  padding: 12px 24px !important;
  box-shadow: none !important;
}
body:not(.ea-public-shell) .gform_wrapper .gform_save_link:hover {
  border-color: var(--ea-dark, #171717) !important;
}

/* --- 11.13 Champs en lecture seule (round 4, retour Mathieu) --- */
/* Aucune différenciation visuelle avec un champ modifiable — demandé :
   texte grisé pour signaler "non éditable" sans le rendre illisible. */
body:not(.ea-public-shell) .gform_wrapper input[readonly],
body:not(.ea-public-shell) .gform_wrapper textarea[readonly],
body:not(.ea-public-shell) .gform_wrapper select[disabled] {
  color: var(--ea-gray-mid, #A7A7A7) !important;
  background: var(--ea-gray-bg-light, #F6F6F6) !important;
  cursor: not-allowed;
}

/* --- 11.14 Tags Selectize multi-sélection (round 4, retour Mathieu) --- */
/* Capture "PILOTE(S)" (Jérémy Seeman / Mathilde Bordron / Paul Schmidtke) :
   Selectize (pas Chosen — bibliothèque différente, déjà traitée en 11.4
   pour "Rechercher dans la base clients"/"Pôles") rend sa sélection
   multiple via .selectize-input > .item, jamais stylé — thème par défaut
   de la librairie (boîte grise fine, pas de pilule). Même langage pilule
   noire que les tags Chosen. */
body:not(.ea-public-shell) .gform_wrapper .selectize-input.items {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px !important;
}
body:not(.ea-public-shell) .gform_wrapper .selectize-input > .item {
  font: 600 12px var(--font-ui, 'Montserrat', sans-serif) !important;
  color: #fff !important;
  background: var(--ea-dark, #171717) !important;
  border: 0 !important;
  border-radius: 50px !important;
  padding: 6px 12px !important;
  margin: 0 !important;
}
body:not(.ea-public-shell) .gform_wrapper .selectize-input > input {
  font: 400 13px var(--font-ui, 'Montserrat', sans-serif) !important;
}

/* --- 11.15 Pied des modales Tingle.js (round 4) --- */
/* Même piège que 11.7 (footer à boutons non-flex par défaut) rencontré
   sur la modale d'ajout GPNF elle-même, pas seulement le pied .gform_
   footer qu'elle contient : .tingle-modal-box__footer passé en flex pour
   que ses boutons (Annuler/soumettre, voire un jour Supprimer) suivent la
   même logique de regroupement/ordre que partout ailleurs. */
body:not(.ea-public-shell) .tingle-modal-box__footer {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}