/*
 * produit.css
 * Styles dédiés aux fiches produits WooCommerce
 * Nouveau Jour / Dessine-moi un faire-part
 */


/* =========================================================
   VARIABLES PRODUIT
   ========================================================= */

.single-product {
    --largeur-label-produit: 120px;
    --gap-options-produit: 12px;
}

/* Tablette / largeurs intermédiaires */
@media (max-width: 1280px) {
    .single-product {
        --largeur-label-produit: 100px;
    }
}


/* =========================================================
   RÉGLAGES GÉNÉRAUX
   ========================================================= */

.single-product .reset_variations,
.single-product .tm-epo-required {
    display: none !important;
}
/* =========================================================
   TITRES H2 DES OPTIONS PRODUIT + TOTAL
   ========================================================= */

/* Ordinateur */
.single-product .tm-extra-product-options h2.tc-epo-label,
.single-product:not(:has(.tarifs-produit)) dt.tm-final-totals {
    font-size: 18px !important;
    padding-bottom: 10px;
}

/* Style spécifique au TOTAL et à son prix */
.single-product:not(:has(.tarifs-produit)) dt.tm-final-totals,
.single-product dd.tm-final-totals {
    font-family: 'Poppins', sans-serif !important;
    color: var(--gcid-heading-color) !important;
    padding-bottom: 0 !important;
}

/* Tablette */
@media (max-width: 980px) {
    .single-product .tm-extra-product-options h2.tc-epo-label,
    .single-product:not(:has(.tarifs-produit)) dt.tm-final-totals {
        font-size: 16px !important;
    }
}

/* Téléphone */
@media (max-width: 767px) {
    .single-product .tm-extra-product-options h2.tc-epo-label,
    .single-product:not(:has(.tarifs-produit)) dt.tm-final-totals {
        font-size: 14px !important;
    }
}
/* =========================================================
   ESPACEMENT ENTRE LES SECTIONS DU FORMULAIRE TARIF
   ========================================================= */

.single-product .cpf-section {
    margin-bottom: 20px !important;
}


/* =========================================================
   VARIATION COULEUR : LABEL + SWATCHES
   Grille tarifaire uniquement avec la classe .tarifs-produit
   ========================================================= */

.single-product .tarifs-produit table.variations tr.vi-wpvs-variation-style {
    display: grid !important;
    grid-template-columns:
        var(--largeur-label-produit) minmax(0, 1fr);
    column-gap: var(--gap-options-produit);
    align-items: center;
}

.single-product .tarifs-produit table.variations tr.vi-wpvs-variation-style > th.label {
    display: flex !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    align-items: center;
    font-weight: 400 !important;
}

.single-product .tarifs-produit table.variations tr.vi-wpvs-variation-style > th.label label {
    font-weight: 400 !important;
}

.single-product .tarifs-produit table.variations tr.vi-wpvs-variation-style > td.value {
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

.single-product .vi-wpvs-option-wrap {
    border-radius: 0 !important;
}

.single-product .vi-wpvs-label-selected-title {
    display: none !important;
}

.single-product .tarifs-produit form.variations_form table.variations {
    margin-bottom: 0 !important;
}


/* =========================================================
   OPTIONS THEMECOMPLETE : LABEL + CHAMP
   Grille tarifaire uniquement avec la classe .tarifs-produit
   ========================================================= */

.single-product .tarifs-produit .tm-extra-product-options
.tc-element-inner-wrap > .tc-row {
    display: grid !important;
    grid-template-columns:
        var(--largeur-label-produit) minmax(0, 1fr);
    column-gap: var(--gap-options-produit);
    align-items: start;
}

.single-product .tarifs-produit .tm-extra-product-options .tc-epo-label {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    margin: 0 !important;
    align-self: center;
}

.single-product .tarifs-produit .tm-extra-product-options .tc-element-container {
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    flex: none !important;
}

.single-product .tm-extra-product-options select {
    padding: 10px !important;
}

/* Label aligné sur le champ lorsqu'une description se trouve dessous */
.single-product .tarifs-produit .tm-extra-product-options
.tc-row:has(.desc-inline) > .tc-epo-label {
    align-self: start !important;
    padding-top: 9px !important;
}

/* Espace description papiers */
.tarif-papiers-div .tmcp-field-wrap {gap:0 !important;}

/* Case à cocher coins arrondis */
.coins-arrondis-div .tc-epo-label {padding:0 !important;}
.coins-arrondis-div .tc-row {    align-items: center !important;}
.single-product .tm-extra-product-options
.coins-arrondis-div .tc-element-inner-wrap > .tc-row > .tc-epo-label {
    padding: 0 !important;
    align-self: center !important;
}

.coins-arrondis-div .tc-label.tm-epo-style.square {
    background: #fff !important;
}


/* =========================================================
   TOTAL : MÊME GRILLE QUE LES OPTIONS
   Grille tarifaire uniquement avec la classe .tarifs-produit
   ========================================================= */
   


.single-product .tarifs-produit dl.tm-extra-product-options-totals {
    display: grid !important;
    grid-template-columns:
        var(--largeur-label-produit) minmax(0, 1fr) !important;
    column-gap: var(--gap-options-produit) !important;
    align-items: center !important;
    margin: 0 !important;
}

.single-product .tarifs-produit dl.tm-extra-product-options-totals dt.tm-final-totals {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 400 !important;
    text-transform: lowercase !important;
}

.single-product .tarifs-produit dl.tm-extra-product-options-totals
dt.tm-final-totals::first-letter {
    text-transform: uppercase !important;
}

.single-product .tarifs-produit dl.tm-extra-product-options-totals dd.tm-final-totals {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    justify-self: start !important;
}

.single-product .tm-epo-totals {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.single-product .tm-extra-product-options-totals
dd.tm-final-totals .woocommerce-Price-amount {
    color: var(--gcid-body-color) !important;
}


/* =========================================================
   LISTES DÉROULANTES + PASTILLE COULEUR ENVELOPPE
   ========================================================= */

.single-product .tm-extra-product-options select.tmcp-select,
.single-product .tm-extra-product-options select.tmcp-select option {
    font-family: "Manrope", sans-serif !important;
}

.single-product .select-enveloppe-couleur {
    position: relative !important;
}

.single-product .select-enveloppe-couleur select {
    padding-right: 55px !important;
}

.single-product .select-enveloppe-couleur::after {
    content: "";
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: var(--couleur-enveloppe);
    border: 1px solid rgba(60, 60, 60, 0.18);
    box-sizing: border-box;
    pointer-events: none;
    z-index: 2;
}


/* =========================================================
   GALERIE PRODUIT WOOCOMMERCE
   ========================================================= */

/* Le module reste toujours contenu dans sa colonne */
.single-product .et_pb_wc_images,
.single-product .et_pb_wc_images .et_pb_module_inner,
.single-product .woocommerce-product-gallery {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* Viewport principal carré et responsive */
.single-product .woocommerce-product-gallery .flex-viewport {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    overflow: hidden !important;
}

.single-product .woocommerce-product-gallery__wrapper {
    height: 100% !important;
}

/* Slide principal */
.single-product .woocommerce-product-gallery__image {
    height: 100% !important;
    aspect-ratio: 1 / 1;
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

/* Lien autour de la grande image */
.single-product .woocommerce-product-gallery__image > a {
    width: 100%;
    height: 100%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

/* Emplacements des miniatures */
.single-product .flex-control-thumbs li {
    aspect-ratio: 1 / 1;
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

/* Grande image + miniatures : ratio naturel et cadre sur l'image réelle */
.single-product .woocommerce-product-gallery__image img,
.single-product .flex-control-thumbs li img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    margin: auto !important;
    border: 1px solid rgba(70, 70, 70, 0.2) !important;
    outline: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box;
}

/* =========================================================
   FORMULAIRE DE PERSONNALISATION
   ========================================================= */
   
.quform h4 {
    margin: 0 !important;
    padding: 0 !important;
}

.form-group{margin-bottom: 40px}

.form-couleur .quform-spacer {padding:0 !important;margin:0!important}
.ligne-couleur-formulaire {padding: 0 0 15px 0; margin: 0 0 5px 0;}

.titre-etape {
        font-size: 20px !important;
    }

    .sous-titre {
        font-size: 18px !important;
    }

@media (max-width: 767px) {
    .titre-etape {
        font-size: 18px !important;
    }

    .sous-titre {
        font-size: 16px !important;
    }
}


/* Titres des étapes */
.titre-etape {
    display: flex;
    align-items: center;
    gap: 10px;
}

.numero-etape {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 26px;
    height: 26px;
    flex: 0 0 26px;

    border-radius: 50%;

    background: var(--gcid-primary-color);
    color: #fff;

    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

/* =========================================================
   LIGNE COULEUR
   ========================================================= */

.ligne-couleur-formulaire {
    display: grid;
    grid-template-columns: 100px 1fr;
    align-items: end;
    column-gap: 12px;
}


/* Libellé */
.libelle-couleur-formulaire {
    margin: 0;
}


/* =========================================================
   COULEURS DU FORMULAIRE
   ========================================================= */

#couleur-formulaire {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
}


/* Bouton / contour extérieur */
#couleur-formulaire .couleur-formulaire-option {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 26px;
    height: 26px;

    padding: 2px;

    background: #fff;

    border: 1px solid transparent;
    border-radius: 2px;

    cursor: pointer;
    box-sizing: border-box;

    transition: border-color .15s ease;
}


/* Carré de couleur */
#couleur-formulaire .couleur-formulaire-pastille {
    display: block;

    width: 20px;
    height: 20px;
    flex: 0 0 20px;

    border-radius: 0;
    border: 1px solid #8e8e8e;

    box-sizing: border-box;
}


/* Couleur sélectionnée */
#couleur-formulaire .couleur-formulaire-option.est-selectionnee {
    border-color: #555;
}


/* Masque le nom Bleu / Rose / etc. */
#couleur-formulaire .couleur-formulaire-label {
    display: none;
}

/* =========================================================
   BOUTONS DE CHOIX — QUFORM

   Classe commune :
   form-bton-choix

   Boutons carrés de format :
   form-bton-choix form-bton-choix-carre

   Boutons classiques :
   150 × 120 px
   Icône : 100 × 53 px

   Boutons format :
   100 × 100 px
   Icône : hauteur 36 px
   ========================================================= */


/* =========================================================
   STRUCTURE GÉNÉRALE
   ========================================================= */

.form-bton-choix .quform-label {
    display: none !important;
}

.form-bton-choix{margin-bottom :15px}


.form-bton-choix .quform-inner {
    display: block !important;

    grid-template-columns: none !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


.form-bton-choix .quform-input {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


.form-bton-choix .quform-spacer {
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   CONTENEUR DES BOUTONS
   ========================================================= */

.form-bton-choix .quform-options {
    display: flex !important;
    flex-wrap: wrap !important;

    justify-content: flex-start !important;
    align-items: flex-start !important;

    width: 100% !important;

    gap: 12px !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Suppression des pseudo-éléments Quform */
.form-bton-choix .quform-options::before,
.form-bton-choix .quform-options::after {
    display: none !important;
    content: none !important;
}


/* =========================================================
   BOUTONS CLASSIQUES
   150 × 120 PX
   ========================================================= */

.form-bton-choix .quform-option {
    display: block !important;

    width: 150px !important;
    height: 120px !important;

    min-width: 150px !important;
    max-width: 150px !important;

    min-height: 120px !important;
    max-height: 120px !important;

    flex: 0 0 150px !important;

    float: none !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   RADIO MASQUÉ
   ========================================================= */

.form-bton-choix input[type="radio"] {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    opacity: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    pointer-events: none;
}


/* =========================================================
   APPARENCE DU BOUTON CLASSIQUE
   ========================================================= */

.form-bton-choix .quform-option-label {
    position: relative;

    display: flex !important;

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

    width: 150px !important;
    height: 120px !important;

    min-width: 150px !important;
    max-width: 150px !important;

    min-height: 120px !important;
    max-height: 120px !important;

    margin: 0 !important;

    padding: 10px 12px !important;

    box-sizing: border-box !important;

    background-color: #fff;

    background-repeat: no-repeat;

    /* Visuel grand bouton :
       ratio conservé de 64 × 34 */
    background-size: 100px 53px;

    background-position: center 12px;

    border: 1px solid #e2e2e2;
    border-radius: 2px;

    cursor: pointer;

    transition:
        border-color .15s ease,
        background-color .15s ease;
}


/* =========================================================
   TEXTE
   ========================================================= */

.form-bton-choix .quform-option-text {
    display: block;

    width: 100%;

    margin: 0;
    padding: 0;

    text-align: center;

    font-size: 14px;
    font-weight: 400;
    line-height: 1.25;
}


/* =========================================================
   ÉTAT SÉLECTIONNÉ
   ========================================================= */

.form-bton-choix
input[type="radio"]:checked
+ .quform-option-label {

    border-color: var(--gcid-primary-color);

    background-color: var(--gcid-secondary-color);
}


.form-bton-choix
input[type="radio"]:checked
+ .quform-option-label
.quform-option-text {

    font-weight: 400;
}


/* =========================================================
   BOUTONS FORMAT CARRÉS
   100 × 100 PX
   ========================================================= */

.form-bton-choix-carre .quform-option {
    width: 100px !important;
    height: 100px !important;

    min-width: 100px !important;
    max-width: 100px !important;

    min-height: 100px !important;
    max-height: 100px !important;

    flex: 0 0 100px !important;
}


.form-bton-choix-carre .quform-option-label {
    width: 100px !important;
    height: 100px !important;

    min-width: 100px !important;
    max-width: 100px !important;

    min-height: 100px !important;
    max-height: 100px !important;

    padding: 5px !important;

    /* Icônes des formats inchangées */
    background-size: auto 36px !important;

    background-position: center 12px !important;
}


/* =========================================================
   GROUPE TEXTE + PHOTO — QUFORM

   Classes à utiliser sur le sous-groupe :
   groupe-texte-photo groupe-court
   ou
   groupe-texte-photo groupe-haut

   Responsive :
   0 à 767 px       : 1 colonne
   768 à 980 px     : 2 colonnes 60 / 40
   981 à 1199 px    : 1 colonne
   1200 px et +     : 2 colonnes 60 / 40

   Hauteurs :
   groupe-court : 80 px
   groupe-haut  : 120 px
   ========================================================= */


/* =========================================================
   GROUPE — PLEINE LARGEUR
   ========================================================= */

.groupe-texte-photo {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


.groupe-texte-photo > .quform-spacer {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   CONTENEUR TEXTE + PHOTO
   ========================================================= */

.groupe-texte-photo
> .quform-spacer
> .quform-child-elements {

    display: flex !important;
    flex-wrap: wrap !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    column-gap: 20px !important;
    row-gap: 15px !important;

    box-sizing: border-box !important;
}


/* Supprime les pseudo-éléments Quform
   qui créaient les faux espaces latéraux */

.groupe-texte-photo
> .quform-spacer
> .quform-child-elements::before,

.groupe-texte-photo
> .quform-spacer
> .quform-child-elements::after {

    display: none !important;
    content: none !important;
}


/* =========================================================
   CHAMPS — BASE
   ========================================================= */

.groupe-texte-photo
> .quform-spacer
> .quform-child-elements
> .quform-element {

    min-width: 0 !important;

    margin: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    float: none !important;

    box-sizing: border-box !important;
}


/* =========================================================
   MOBILE — 0 À 767 PX
   1 COLONNE
   ========================================================= */

@media (max-width: 767px) {

    .groupe-texte-photo
    > .quform-spacer
    > .quform-child-elements
    > .quform-element {

        flex: 0 0 100% !important;

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

}


/* =========================================================
   TABLETTE — 768 À 980 PX
   2 COLONNES 60 / 40
   ========================================================= */

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

    /* Texte */
    .groupe-texte-photo
    > .quform-spacer
    > .quform-child-elements
    > .quform-element:first-child {

        flex: 3 1 0 !important;

        width: 0 !important;
        max-width: none !important;
    }


    /* Photo */
    .groupe-texte-photo
    > .quform-spacer
    > .quform-child-elements
    > .quform-element:last-child {

        flex: 2 1 0 !important;

        width: 0 !important;
        max-width: none !important;
    }

}


/* =========================================================
   PETIT DESKTOP — 981 À 1199 PX
   1 COLONNE
   ========================================================= */

@media (min-width: 981px) and (max-width: 1199px) {

    .groupe-texte-photo
    > .quform-spacer
    > .quform-child-elements
    > .quform-element {

        flex: 0 0 100% !important;

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

}


/* =========================================================
   GRAND DESKTOP — 1200 PX ET +
   2 COLONNES 60 / 40
   ========================================================= */

@media (min-width: 1200px) {

    /* Texte */
    .groupe-texte-photo
    > .quform-spacer
    > .quform-child-elements
    > .quform-element:first-child {

        flex: 3 1 0 !important;

        width: 0 !important;
        max-width: none !important;
    }


    /* Photo */
    .groupe-texte-photo
    > .quform-spacer
    > .quform-child-elements
    > .quform-element:last-child {

        flex: 2 1 0 !important;

        width: 0 !important;
        max-width: none !important;
    }

}


/* =========================================================
   GROUPE COURT — 80 PX
   ========================================================= */

.groupe-texte-photo.groupe-court textarea,
.groupe-texte-photo.groupe-court .quform-upload-dropzone {

    width: 100% !important;

    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;

    box-sizing: border-box !important;
}


/* =========================================================
   GROUPE HAUT — 120 PX
   ========================================================= */

.groupe-texte-photo.groupe-haut textarea,
.groupe-texte-photo.groupe-haut .quform-upload-dropzone {

    width: 100% !important;

    height: 120px !important;
    min-height: 120px !important;
    max-height: 120px !important;

    box-sizing: border-box !important;
}


/* =========================================================
   UPLOAD — CONTENU CENTRÉ
   ========================================================= */

.groupe-texte-photo .quform-upload-dropzone {

    display: flex !important;

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

    padding: 0 !important;
}

/* =========================================================
   BOUTON ENVOI FORMULAIRE
   ========================================================= */

.form-bton-envoi button {
    background-color: var(--gcid-primary-color) !important;
    color: #fff !important;

    font-size: 16px !important;

    border: none !important;
    border-radius: 0 !important;

    box-shadow: none !important;
}

.form-bton-envoi button:hover,
.form-bton-envoi button:focus,
.form-bton-envoi button:active {
    background-color: var(--gcid-primary-color) !important;
    color: #fff !important;

    border: none !important;
    box-shadow: none !important;

    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
}

/* =========================================================
   AFFICHAGE CONDITIONNEL DU FORMULAIRE
   ========================================================= */


/* ---------------------------------------------------------
   FORMAT PRODUIT
   --------------------------------------------------------- */

/* Tous les modules Format sont masqués par défaut */
.format-multi,
.format-carre,
.format-portrait,
.format-paysage,
.format-10x21 {
    display: none !important;
}


/* Le JS affiche uniquement le module correspondant au produit */
.format-module-actif {
    display: block !important;
}

/* ---------------------------------------------------------
   COULEUR — uniquement pour les produits variables
   --------------------------------------------------------- */

/* Masqué par défaut */
.ligne-couleur-formulaire {
    display: none !important;
}

/* Affiché uniquement sur une fiche produit variable */
body.single-product:has(div.product.product-type-variable)
.ligne-couleur-formulaire {
    display: grid !important;
}

/* =========================================================
   ÉLÉMENTS MASQUÉS SELON LE PRODUIT
   ========================================================= */

.est-masque-conditionnel {
    display: none !important;
}

/* =========================================================
   CONFIRMATION QUFORM — MODALE CENTRÉE
   ========================================================= */


/* Fond noir derrière la confirmation */
.quform-success-message-animate {
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

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

    padding: 20px !important;

    background: rgba(0, 0, 0, 0.30) !important;

    z-index: 9999999 !important;

    box-sizing: border-box !important;
}


/* Suppression complète du style Quform */
.quform-success-message {
    width: 100% !important;
    max-width: 600px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    border: none !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    color: inherit !important;
}


/* Suppression de l'icône Quform */
.quform-success-message-icon {
    display: none !important;
}


/* Conteneur interne Quform */
.quform-success-message-content {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   CADRE DE CONFIRMATION
   ========================================================= */

.confirmation-personnalisation {
    width: 100%;

    padding: 20px;

    box-sizing: border-box;

    background-color: var(--gcid-secondary-color);

    text-align: center;
}


/* Titre */
.confirmation-personnalisation h3 {
    margin: 0 0 20px !important;
    padding: 0 !important;
}


/* Paragraphes */
.confirmation-personnalisation p {
    margin: 0 0 16px !important;
    padding: 0 !important;
}


.confirmation-personnalisation .confirmation-spams {
    margin-bottom: 25px !important;
}


/* =========================================================
   BOUTON FERMER
   ========================================================= */

.confirmation-personnalisation .fermer-panneau {
    display: inline-block;

    width: auto !important;

    padding: 8px 20px;

    background-color: var(--gcid-primary-color) !important;
    color: #fff !important;

    border: none !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    font-size: 14px;

    cursor: pointer;
}


/* Aucun changement au survol */
.confirmation-personnalisation .fermer-panneau:hover,
.confirmation-personnalisation .fermer-panneau:focus,
.confirmation-personnalisation .fermer-panneau:active {
    background-color: var(--gcid-primary-color) !important;
    color: #fff !important;

    border: none !important;
    box-shadow: none !important;

    transform: none !important;
    filter: none !important;
}