/**
 * Caisse-Connect — Styles frontend publics
 *
 * Styles des éléments CC affichés sur le site public :
 * icônes expédition/édition, sections infos produit, messages panier.
 *
 * @package CaisseConnect
 * @subpackage Frontend
 * @since 1.1.0
 * @version     1.8.2
 */


/* ==========================================
   Infobulle (tooltip) pour icônes CC
   ========================================== */

.cc-tooltip {
    z-index: 9999;
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--cc-couleur-front-alerte-fond);
    color: var(--cc-couleur-front-texte-principal);
    padding: 5px 10px;
    border: 1px var(--cc-couleur-front-texte-principal) solid;
    border-radius: var(--cc-rayon);
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}


/* ==========================================
   Icône expédition (vignettes boutique)
   ========================================== */

.icone-expedition-wrap {
    cursor: pointer;
    display: inline-block;
    /* Dimension de l'icône (2em × 2em) */
    width: 2em;
    height: 2em;
    vertical-align: middle;
    margin-left: 10px;
    margin-right: 5px;
}

.icone-expedition {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.icone-expedition-wrap:hover .cc-tooltip {
    opacity: 1;
}


/* ==========================================
   Icône édition (admin/shop_manager)
   ========================================== */

/* Colonne droite : la gauche est réservée à l'overlay d'icônes d'étiquettes,
   qui monte jusqu'à mi-hauteur quand il passe à deux lignes (≥ 4 icônes sur un
   écran < 450 px). */
.icone-edition-produit-wrap {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    z-index: 1000;
    isolation: isolate;
    animation: ccFadeIn 0.4s ease-out;
}

.icone-edition-produit {
    width: 40px !important;
    height: 40px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px var(--cc-couleur-front-ombre-standard));
    background: var(--cc-couleur-front-surface-blockwc);
    padding: 4px;
    border-radius: 50%;
    border: 2px solid var(--cc-couleur-front-forte);
}


/* Icône éditeur complet en haut à droite du wrapper page produit
   (plus grande que les icônes sur les photos) */
#cc-wrapper-haut-produit {
    position: relative;
}

.cc-icone-edition-haut-produit-wrap {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1000;
    isolation: isolate;
    animation: ccFadeIn 0.4s ease-out;
}

.cc-icone-edition-haut-produit {
    width: 56px !important;
    height: 56px;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px var(--cc-couleur-front-ombre-standard));
    background: var(--cc-couleur-front-surface-blockwc);
    padding: 6px;
    border-radius: 50%;
    border: 2px solid var(--cc-couleur-front-forte);
    transition: transform 0.15s ease-out;
}

.cc-icone-edition-haut-produit:hover {
    transform: scale(1.08);
}


@keyframes ccFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ==========================================
   Expédition — Page produit unique
   ========================================== */

.single-product-infos-expedition {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.single-product-icone-expedition {
    width: 45px;
    display: inline-block;
}

.single-product-icone-expedition img {
    box-shadow: none !important;
    width: 100%;
    height: 100%;
}

.single-product-texte-possibilite-expedition {
    display: inline-block;
}

.expedition-info {
    margin-top: 6px;
    font-size: var(--cc-texte-etiquette-taille);
    line-height: 1.3;
}

.expedition-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--cc-rayon);
    font-weight: var(--cc-graisse-forte);
}

.expedition-badge.oui {
    background: var(--cc-couleur-front-succes-fond);
    color: var(--cc-couleur-front-succes-texte);
    border: 1px solid var(--cc-couleur-front-succes-bordure);
}

.expedition-badge.non {
    background: var(--cc-couleur-front-erreur-fond);
    color: var(--cc-couleur-front-erreur-texte);
    border: 1px solid var(--cc-couleur-front-erreur-bordure);
}

@media (max-width: 768px) {
    .expedition-info {
        font-size: var(--cc-texte-etiquette-taille);
    }
}


/* ==========================================
   Expédition — Badges disponibilité panier
   ========================================== */

.cc-shipping-availability {
    margin-top: 8px;
    font-size: var(--cc-texte-etiquette-taille);
    line-height: 1.3;
    text-align: right;
}

.cc-shipping-availability small {
    display: block;
    font-weight: var(--cc-graisse-forte);
}

.cc-shipping-available small {
    color: var(--cc-couleur-front-succes);
}

.cc-shipping-not-available small {
    color: var(--cc-couleur-front-alerte);
}

.cc-shipping-notice {
    margin-top: 12px;
    padding: 10px 14px;
    font-size: var(--cc-texte-petit-taille);
    font-weight: var(--cc-graisse-forte);
    color: var(--cc-couleur-front-alerte);
    line-height: 1.4;
}


/* ==========================================
   Rôles de titres (couple composant + rôle)
   Le rôle porte taille et graisse ; police et couleur viennent des règles hX
   du thème. La règle de composant, écrite après, ne garde que ce qui lui est
   propre (marges, couleur voulue, casse).
   ========================================== */

.cc-titre {
    margin: 0;
    line-height: 1.3;
}

.cc-titre--section {
    font-size: var(--cc-titre-section-taille);
    font-weight: var(--cc-graisse-titre);
}

.cc-titre--bloc {
    font-size: var(--cc-titre-bloc-taille);
    font-weight: var(--cc-graisse-titre);
}

.cc-titre--sous-bloc {
    font-size: var(--cc-titre-sous-bloc-taille);
    font-weight: var(--cc-graisse-forte);
}


/* ==========================================
   Sections infos produit (Composition, Conseils)
   ========================================== */

.cc-infos-produits-titre {
    clear: both;
    margin: 1em 0 0 0;
}

.cc-infos-produits {
    background: var(--cc-couleur-front-surface-blockwc);
    padding: 1em;
    border-radius: var(--cc-rayon-grand);
    text-align: justify;
}

.cc-infos-produits p {
    margin: 0;
    padding: 0;
}


/* ==========================================
   Édition inline des textes produit
   ========================================== */

.cc-edition-inline-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: 8px;
    vertical-align: middle;
    opacity: 0.5;
    transition: opacity 0.2s;
    line-height: 0;
}

.cc-edition-inline-btn:hover,
.cc-edition-inline-btn:focus {
    opacity: 1;
    background: var(--cc-couleur-front-succes-bordure);
    border-radius: 50%;
    padding: 4px;
}

.cc-edition-inline-icone {
    width: 22px !important;
    height: 22px;
    object-fit: contain;
    vertical-align: middle;
}

.cc-edition-inline-btn--short-desc {
    position: absolute;
    top: 4px;
    right: 4px;
    margin-left: 0;
}

.cc-edition-inline--actif {
    background: var(--cc-couleur-front-arriere-plan);
    border: 1px dashed var(--cc-couleur-front-primaire);
}

.cc-edition-inline-textarea {
    width: 100%;
    min-height: 80px;
    padding: 0.8em;
    border: 1px solid var(--cc-couleur-front-bordure-champ);
    border-radius: var(--cc-rayon);
    font-family: inherit;
    font-size: inherit;
    line-height: 1.5;
    resize: vertical;
    box-sizing: border-box;
}

.cc-edition-inline-textarea:focus {
    border-color: var(--cc-couleur-front-primaire);
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--cc-couleur-front-primaire) 25%, transparent);
}

.cc-edition-inline-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.cc-edition-inline-btn-annuler,
.cc-edition-inline-btn-valider {
    padding: 6px 16px;
    border-radius: var(--cc-rayon);
    border: 1px solid var(--cc-couleur-front-bordure-champ);
    cursor: pointer;
    font-size: var(--cc-texte-petit-taille);
    font-family: inherit;
    transition: background-color 0.2s, border-color 0.2s;
}
/* Correction bouton Annuler trop haut sinon */
.woocommerce-product-details__short-description .cc-edition-inline-actions :last-child {
     margin-bottom: 0 !important; 
    }


.cc-edition-inline-btn-annuler {
    background: var(--cc-couleur-front-surface-blockwc);
    color: var(--cc-couleur-front-texte-attenue);
}

.cc-edition-inline-btn-annuler:hover {
    background: var(--cc-couleur-front-arriere-plan);
}

.cc-edition-inline-btn-valider {
    background: var(--cc-couleur-front-primaire);
    color: var(--cc-couleur-front-primaire-texte);
    border-color: var(--cc-couleur-front-primaire);
}

.cc-edition-inline-btn-valider:hover {
    filter: brightness(0.85);
}

.cc-edition-inline-btn-valider:disabled,
.cc-edition-inline-btn-annuler:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Bouton « Ignorer » en ligne (cas A : pré-rempli, sans tiroir) */
.cc-edition-inline-btn-ignorer-inline {
    padding: 6px 16px;
    border-radius: var(--cc-rayon);
    border: 1px solid var(--cc-couleur-front-erreur-bordure);
    background: var(--cc-couleur-front-surface-blockwc);
    color: var(--cc-couleur-front-erreur-texte);
    cursor: pointer;
    font-size: var(--cc-texte-petit-taille);
    font-family: inherit;
    transition: background-color 0.2s, border-color 0.2s;
}

.cc-edition-inline-btn-ignorer-inline:hover {
    background: var(--cc-couleur-front-erreur-fond);
}

.cc-infos-produits--vide {
    border: 1px dashed var(--cc-couleur-front-bordure-champ);
    text-align: center;
}

.cc-edition-inline-ajouter {
    color: var(--cc-couleur-front-texte-attenue);
    cursor: pointer;
    font-style: italic;
    transition: color 0.2s;
}

.cc-edition-inline-ajouter:hover {
    color: var(--cc-couleur-front-primaire);
}

.woocommerce-product-details__short-description .cc-edition-inline-actions :last-child {
    margin-bottom: 0;
}

.cc-edition-inline-erreur {
    margin-top: 8px;
    padding: 6px 12px;
    background: var(--cc-couleur-front-erreur-fond);
    color: var(--cc-couleur-front-erreur-texte);
    border: 1px solid var(--cc-couleur-front-erreur-bordure);
    border-radius: var(--cc-rayon);
    font-size: var(--cc-texte-petit-taille);
}

/* Tiroir « Suggestion IA » de l'éditeur inline */
.cc-edition-inline-tiroir {
    margin-top: 8px;
    border-top: 1px dashed var(--cc-couleur-front-bordure-champ);
    padding-top: 8px;
}

.cc-edition-inline-tiroir-toggle {
    background: none;
    border: none;
    padding: 4px 0;
    cursor: pointer;
    font-size: var(--cc-texte-petit-taille);
    font-weight: var(--cc-graisse-titre);
    color: var(--cc-couleur-front-primaire);
    font-family: inherit;
}

.cc-edition-inline-tiroir-apercu {
    margin-top: 6px;
    padding: 8px;
    background: var(--cc-couleur-front-arriere-plan);
    border: 1px solid var(--cc-couleur-front-bordure-champ);
    border-radius: var(--cc-rayon);
    font-size: var(--cc-texte-petit-taille);
    white-space: pre-wrap;
    max-height: 30vh;
    overflow-y: auto;
}

.cc-edition-inline-tiroir-actions {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.cc-edition-inline-tiroir-remplacer,
.cc-edition-inline-tiroir-ignorer {
    flex: 1;
    padding: 6px 16px;
    border-radius: var(--cc-rayon);
    border: 1px solid var(--cc-couleur-front-bordure-champ);
    cursor: pointer;
    font-size: var(--cc-texte-petit-taille);
    font-family: inherit;
}

.cc-edition-inline-tiroir-remplacer {
    background: var(--cc-couleur-front-primaire);
    color: var(--cc-couleur-front-primaire-texte);
    border-color: var(--cc-couleur-front-primaire);
}

.cc-edition-inline-tiroir-ignorer {
    background: var(--cc-couleur-front-surface-blockwc);
    color: var(--cc-couleur-front-texte-attenue);
}

/* Pastille de découvrabilité : proposition IA en attente */
.cc-edition-inline-btn--pastille {
    position: relative;
}

.cc-edition-inline-btn--pastille::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cc-couleur-front-erreur);
}

@media (max-width: 768px) {
    .cc-edition-inline-icone {
        width: 28px !important;
        height: 28px;
    }

    .cc-edition-inline-actions {
        flex-direction: column;
    }

    .cc-edition-inline-btn-annuler,
    .cc-edition-inline-btn-valider {
        width: 100%;
        text-align: center;
    }
}


/* ==========================================
   Informations boutique (header)
   ========================================== */

.cc-info-boutique-header {
    display: flex;
    align-items: center;
    gap: 0;
    font-size: var(--cc-texte-etiquette-taille);
    line-height: 1.3;
    margin-right: auto;
}

.cc-info-boutique-bloc {
    padding: 0;
}

.cc-info-boutique-bloc a {
    color: inherit;
    text-decoration: none;
}

.cc-info-boutique-bloc a:hover {
    text-decoration: underline;
}


/* ==========================================
   Mon magasin — bouton repère (habillage de repli)

   Copie des valeurs des icônes compte et panier de cc-origine (css/defaut.css), que le thème
   surcharge par son image : sous un autre thème, c'est ce repli qui s'affiche.
   Spécificité 0,1,0.
   ========================================== */

/* Flex : sans lui, l'icône inline-block s'aligne sur la ligne de base et le wrapper garde
   l'espace de descendante sous elle (icône remontée par rapport à compte et panier). */
.cc-magasin {
    display: flex;
    align-items: center;
}

.cc-magasin-toggle {
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    line-height: 0;
}

.cc-magasin-toggle:focus-visible {
    outline: 2px solid var(--cc-couleur-front-primaire);
    outline-offset: 2px;
}

.cc-magasin-icon {
    display: inline-block;
    box-sizing: content-box;
    width: 32px;
    height: 32px;
    padding: 4px;
    border-radius: 50%;
    background: var(--cc-couleur-front-primaire) url('../images/cc-magasin.svg') center / 60% no-repeat;
}


/* ==========================================
   Zone de contrat de l'entête (chemin générique)

   .cc-zone-header-infos est émis par cc_afficher_infos_boutique() : le bouton et l'adresse,
   deux enfants de niveau bloc visibles ensemble au-dessus de 768px, s'alignent au lieu de
   s'empiler, l'adresse presque collée au bouton. Sous 768px, l'adresse
   est masquée. Spécificité 0,2,0 (2 classes) > règles de base 0,1,0 → sans !important.
   ========================================== */

.cc-zone-header-infos {
    display: flex;
    align-items: center;
    gap: 6px;
}

@media (max-width: 768px) {
    .cc-zone-header-infos .cc-info-boutique-header {
        display: none;
    }
}

/* ==========================================
   Modal frontend — Mon magasin
   ========================================== */

.cc-modal-front {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.cc-modal-front--hidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

.cc-modal-front--visible {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

.cc-modal-front-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.cc-modal-front-content {
    position: relative;
    background: var(--cc-couleur-front-surface-blockwc);
    border-radius: var(--cc-rayon-grand);
    max-width: 400px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--cc-ombre-modale);
    animation: ccModalSlideUp 0.2s ease-out;
}

.cc-modal-front--hidden .cc-modal-front-content {
    animation: none;
}

@keyframes ccModalSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cc-modal-front-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--cc-couleur-front-primaire);
    color: var(--cc-couleur-front-primaire-texte);
    border-radius: var(--cc-rayon-grand) var(--cc-rayon-grand) 0 0;
}

.cc-modal-front-header h2 {
    margin: 0;
    font-size: var(--cc-titre-bloc-taille);
    color: inherit;
    font-weight: var(--cc-graisse-titre);
}

.cc-modal-front-close {
    background: none;
    border: none;
    color: inherit;
    font-size: 28px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.cc-modal-front-close:hover {
    opacity: 1;
}

.cc-modal-front-body {
    padding: 20px;
}

.cc-modal-front-section {
    margin-bottom: 16px;
}

.cc-modal-front-section:last-child {
    margin-bottom: 0;
}

.cc-modal-front-section-titre {
    font-size: var(--cc-texte-etiquette-taille);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cc-couleur-front-texte-attenue);
    margin-bottom: 4px;
}

.cc-modal-front-section a {
    color: var(--cc-couleur-front-primaire);
    text-decoration: none;
}

.cc-modal-front-section a:hover {
    text-decoration: underline;
}

.cc-modal-front-nom {
    margin-bottom: 16px;
}

/* Pied du modal : retour à la page d'enseigne */
.cc-modal-front-pied {
    border-top: 1px solid var(--cc-couleur-front-bordures);
    padding: 16px 20px;
    text-align: center;
}

.cc-modal-front-bouton,
.cc-modal-front-bouton:hover,
.cc-modal-front-bouton:focus {
    display: inline-block;
    padding: 10px 20px;
    border-radius: var(--cc-rayon);
    background: var(--cc-couleur-front-primaire);
    color: var(--cc-couleur-front-primaire-texte);
    text-decoration: none;
}


/* ==========================================
   Footer Caisse-Connect
   ========================================== */

.cc-footer {
    background-color: var(--cc-couleur-front-arriere-plan);
    border-top: 2px solid var(--cc-couleur-front-primaire);
    padding: 2em 1.5em;
    font-size: var(--cc-texte-petit-taille);
    line-height: 1.5;
    color: var(--cc-couleur-front-texte-principal);
}

.cc-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2em;
}

.cc-footer-titre {
    margin-bottom: 0.6em;
    color: var(--cc-couleur-front-primaire);
}

.cc-footer-bloc {
    margin-bottom: 0.5em;
}

.cc-footer-bloc:last-child {
    margin-bottom: 0;
}

.cc-footer a {
    color: inherit;
    text-decoration: none;
}

.cc-footer a:hover {
    text-decoration: underline;
    color: var(--cc-couleur-front-primaire);
}

/* Colonne légale : centrée, liens empilés verticalement */
.cc-footer-colonne-legal {
    text-align: center;
}

.cc-footer-liens-legaux {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4em;
}

/* Colonne copyright : centrée horizontalement, en bas */
.cc-footer-colonne-copyright {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6em;
}

/* Signature « Un site Caisse-Connect » sous le copyright */
.cc-footer-signature {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
}

.cc-footer .cc-footer-signature .cc-footer-signature-logo {
    height: 1.5em;
    width: auto;
    max-width: none;
    display: block;
}

/* === Responsive mobile === */
@media (max-width: 768px) {
    .cc-footer-inner {
        grid-template-columns: 1fr;
        gap: 1.5em;
        text-align: center;
    }

    .cc-footer-colonne-legal {
        text-align: center;
    }
}


/* ==========================================
   Checkout — Masquer short description récap
   ========================================== */

.wc-block-checkout .wc-block-components-product-metadata {
    display: none;
}


/* ==========================================
   Checkout — E-mail non modifiable
   ==========================================
   Le champ porte l'adresse de connexion du compte quand la caisse ne tient
   qu'une adresse par fiche : `cc-checkout-email-neutralisation.js` le pose en
   `readOnly` et le fait suivre de la mention. Le style signale cet état : sans
   lui, un champ qui refuse la frappe se lit comme un bug. */

.wc-block-checkout input#email[readonly] {
    background-color: var(--cc-couleur-front-arriere-plan);
    cursor: default;
}

.cc-checkout-email-mention {
    margin: 4px 0 0;
    font-size: var(--cc-texte-etiquette-taille);
    font-style: italic;
    opacity: 0.8;
}


/* ==========================================
   Checkout — Toggle Expédition / Retrait
   ========================================== */

.wc-block-checkout__shipping-method-option.wc-block-checkout__shipping-method-option--selected {
    background-color: var(--cc-couleur-front-primaire);
    border-color: var(--cc-couleur-front-primaire);
    color: var(--cc-couleur-front-primaire-texte);
}

.wc-block-checkout__shipping-method-option .wc-block-checkout__shipping-method-option-title,
.wc-block-checkout__shipping-method-option .wc-block-checkout__shipping-method-option-price {
    font-size: 16px;
    font-weight: var(--cc-graisse-forte);
}


/* ==========================================
   Options Pack / Unitaire (page produit)
   ========================================== */

.cc-pack-options {
    margin-bottom: 16px;
}

.cc-pack-options-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cc-pack-option {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 16px;
    border: 2px dashed var(--cc-couleur-front-primaire);
    border-radius: var(--cc-rayon);
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-style 0.2s;
    font-family: inherit;
    font-size: inherit;
    line-height: 1.4;
}

.cc-pack-option:hover,
.cc-pack-option:focus {
    background-color: color-mix(in srgb, var(--cc-couleur-front-primaire) 12%, transparent);
    border-color: var(--cc-couleur-front-primaire);
    color: inherit;
}

.cc-pack-option.cc-pack-option--active {
    border: 2px solid var(--cc-couleur-front-primaire);
    background-color: var(--cc-couleur-front-surface-blockwc);
    color: inherit;
}

.cc-pack-option.cc-pack-option--active:hover {
    background-color: var(--cc-couleur-front-surface-blockwc);
}

.cc-pack-option-label {
    font-weight: 500;
}

.cc-pack-option-price {
    font-weight: var(--cc-graisse-forte);
    margin-left: 8px;
}

.cc-pack-option-unit-price {
    font-size: var(--cc-texte-etiquette-taille);
    opacity: 0.8;
}

/* Transition fade titre / prix au changement d'option */
.cc-pack-transitioning {
    opacity: 0;
    transition: opacity 150ms ease;
}

@media (max-width: 768px) {
    .cc-pack-options-btns {
        flex-direction: column;
    }

    .cc-pack-option {
        width: 100%;
    }
}


/* ==========================================
   Bloc « Contenu » (composés agrégat, page produit)
   ========================================== */

.cc-contenu-agregat {
    margin: 0 0 16px 0;
    background: var(--cc-couleur-front-surface-blockwc);
    padding: 1em;
    border-radius: var(--cc-rayon-grand);
}

.cc-contenu-agregat-titre {
    margin: 0 0 0.5em 0;
}

.cc-contenu-agregat-liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cc-contenu-agregat-ligne {
    padding: 4px 0;
    line-height: 1.4;
    font-size: var(--cc-texte-etiquette-taille);
}

.cc-contenu-agregat-ligne + .cc-contenu-agregat-ligne {
    border-top: 1px solid var(--cc-couleur-front-secondaire);
}

.cc-contenu-agregat-qte {
    font-weight: 400;
}

.cc-contenu-agregat-lien {
    color: var(--cc-couleur-front-primaire);
    text-decoration: none;
}

.cc-contenu-agregat-lien:hover,
.cc-contenu-agregat-lien:focus {
    text-decoration: underline;
}

/* Variante « prix par ligne » (composés Kit 2) : montant affiché en fin de ligne */
.cc-contenu-agregat-prix .cc-contenu-agregat-montant {
    white-space: nowrap;
}


/* ==========================================
   Ajout au panier AJAX — page produit single
   ========================================== */

.cc-single-add-notice {
    padding: 0.8em 1.2em;
    margin: 0 0 1.5em;
    background-color: var(--cc-couleur-front-secondaire);
    color: var(--cc-couleur-front-texte-principal);
    border-top: 3px solid var(--cc-couleur-front-primaire);
    border-radius: var(--cc-rayon);
}

.cc-single-add-notice .button.wc-forward {
    float: right;
    margin-left: 1em;
    padding: 0.4em 1em;
    background-color: var(--cc-couleur-front-primaire);
    color: var(--cc-couleur-front-primaire-texte) !important;
    border: none;
    border-radius: var(--cc-rayon);
    text-decoration: none;
    white-space: nowrap;
    font-size: var(--cc-texte-petit-taille);
}

.cc-single-add-notice .button.wc-forward:hover {
    background-color: color-mix(in srgb, var(--cc-couleur-front-primaire), black 15%);
}

form.cart button[type="submit"].loading {
    opacity: 0.5;
    pointer-events: none;
}

form.cart button[type="submit"].loading.added::after {
    display: none;
}



/* ==========================================
   OVERLAYS VIGNETTES PRODUITS (promo, icônes d'étiquettes)
   Variables avec fallback pour autosuffisance
   (indépendance vis-à-vis du thème).
   ========================================== */

/* Contexte de positionnement des overlays sur la galerie page produit */
.woocommerce-product-gallery {
    position: relative;
}

/* Badge « Promo » : non géré ici. Le badge natif WooCommerce (span.onsale)
   est conservé et restylé par le thème cc-origine (css/integrations_tiers.css). */

/* --- Overlay d'icônes d'étiquettes --- */
.cc-etiquettes-overlay {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 10;
    display: flex;
    flex-flow: row wrap;
    gap: 6px;
    max-width: calc(100% - 20px);
    pointer-events: none; /* pour ne pas gêner le clic sur le produit */
    animation: cc-etiquettes-fadeIn 0.4s ease-out;
}

.cc-etiquette-icone {
    /* Les deux dimensions en !important : sur une vignette,
       .woocommerce ul.products li.product a img pose width:100% et height:auto.
       Une hauteur restée auto laisse le calcul de la boîte (étirement de l'item
       flex, largeur minimale déduite du ratio) à la discrétion du moteur. */
    width: 40px !important;
    height: 40px !important;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px var(--cc-couleur-front-ombre-standard));
}

/* L'overlay est rendu dans le <a> de la vignette, donc frappé par
   .woocommerce ul.products li.product a img { margin: 0 0 1em }. */
.cc-etiquettes-overlay img {
    margin: 0 !important;
}

/* Animation d'apparition (préfixée cc- pour éviter toute collision globale) */
@keyframes cc-etiquettes-fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Icônes plus grandes sur la galerie de la fiche produit. Scopé à la galerie :
   les vignettes « produits similaires » de la fiche gardent la taille de vignette. */
.woocommerce-product-gallery .cc-etiquette-icone {
    width: 60px !important;
    height: 60px !important;
}

@media (max-width: 768px) {
    /* Vignettes : 30 px. La galerie de la fiche garde ses 60 px (sélecteur
       .woocommerce-product-gallery, plus spécifique). */
    .cc-etiquette-icone {
        width: 30px !important;
        height: 30px !important;
    }

    .cc-etiquettes-overlay {
        gap: 4px;
    }
}

/* Firefox mobile rend l'icône de vignette 20 % plus grande que les navigateurs
   Chromium, pour une cause non identifiée (constat sur appareil ; ni la galerie
   de la fiche ni Firefox desktop ne sont touchés). 24 px y donnent les 30 px
   visés. @supports (-moz-appearance) isole Firefox, pointer: coarse épargne un
   Firefox desktop à fenêtre étroite. */
@media (max-width: 768px) and (pointer: coarse) {
    @supports (-moz-appearance: none) {
        .cc-etiquette-icone {
            width: 24px !important;
            height: 24px !important;
        }
    }
}

/* --- Icône panier sur les vignettes --- */
.icone-panier-wrap {
    background: var(--cc-couleur-front-primaire);
    border-radius: 50%;
    padding: 4px;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: clamp(10px, 2vw, 40px);
    height: clamp(10px, 2vw, 40px);
    vertical-align: top;
    margin-left: 10px;
}

.icone-panier {
    width: 90%;
    height: 90% !important;
    object-fit: contain;
}

/* Sur mobile */
@media (max-width: 768px) {
    .icone-panier-wrap {
        width: clamp(35px, 25vw, 45px);
        height: clamp(35px, 25vw, 45px);
    }
}

/* Correction Firefox mobile (extraite du bloc @supports header du thème) */
@supports (-moz-appearance: none) {
    @media (max-width: 768px) {
        .icone-panier-wrap {
            width: clamp(28px, 20vw, 36px);
            height: clamp(28px, 20vw, 36px);
        }
    }
}

.icone-panier-wrap.adding-to-cart {
    animation: cc-panier-pulse 1s ease-in-out;
}

@keyframes cc-panier-pulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.5);
    }
}


/* ==========================================================================
   Cadre « Facturation professionnelle » (page Commande reçue + Mon compte)
   Rendu uniquement pour les commandes B2B (client professionnel).
   ========================================================================== */
.cc-facturation-pro {
    margin: 1.5em 0;
    padding: 1em 1.25em;
    border: 1px solid var(--cc-couleur-front-ombre-legere);
    border-radius: var(--cc-rayon);
    /* Même fond que les blocs WC voisins (détails/adresses) sous cc-origine ;
       le repli theme-agnostic du token vit dans cc-variables-frontend.css. */
    background: var(--cc-couleur-front-surface-blockwc);
}

.cc-facturation-pro__titre {
    margin: 0 0 0.6em;
    color: var(--cc-couleur-front-texte-principal);
}

.cc-facturation-pro__ligne {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25em 0.75em;
    padding: 0.25em 0;
}

.cc-facturation-pro__libelle {
    flex: 0 0 auto;
    min-width: 11em;
    color: var(--cc-couleur-front-texte-principal);
    opacity: 0.7;
}

.cc-facturation-pro__valeur {
    flex: 1 1 auto;
    font-weight: var(--cc-graisse-forte);
    color: var(--cc-couleur-front-texte-principal);
}

/* ============================================================================
   Prix par unité de mesure (prix au kilo / litre / mètre / m² ou « la pièce »)
   Petite ligne informative entre parenthèses près du prix. Theme-agnostic :
   consommée par la fiche produit (plugin) et la vignette (thème cc-origine).
   ========================================================================== */
.cc-prix-unite-mesure {
    font-size: var(--cc-texte-etiquette-taille);
    font-weight: 400;
    opacity: 0.8;
    white-space: nowrap;
}

/* Modificateur fiche produit : le prix natif est un bloc p.price → le span
   retombe sous le prix. On le rend en bloc collé juste dessous (le rapprochement
   effectif dépend de la marge basse du prix, réduite côté thème). La marge basse
   (~sa propre hauteur) redonne de l'air avant la description courte qui suit. */
.cc-prix-unite-mesure--single {
    display: block;
    margin-top: 0;
    margin-bottom: 1em;
    line-height: 1.1;
}

/* ============================================================================
   Formulaire d'inscription WooCommerce

   Le formulaire `myaccount/form-login.php` est servi sur la page Mon Compte et
   sur la page Commander substituée (cc-frontend-clients.php). Ses règles vivent
   dans cette feuille, chargée sur tout le front : `cc-checkout-connexion.css`
   ne l'est que sur la page Commander substituée.

   Scope `form.register` : le formulaire d'inscription seul, ni celui de
   connexion ni le reste de la page.
   ========================================================================== */

/* La mention de confidentialité (conteneur de `wc_privacy_policy_text()`) et
   l'aide du champ téléphone (`cc_clients_champ_telephone_inscription()`) : une
   seule règle, pour une même taille. Pas d'opacité réduite : ajoutée à la
   taille, elle rendrait une mention légale difficile à lire. */
form.register .woocommerce-privacy-policy-text,
form.register .description {
    font-size: var(--cc-texte-etiquette-taille);
}

/* `display: block` aligne l'interligne de l'aide du téléphone sur celui de la
   mention de confidentialité. `.description` est un `<span>` en ligne dans un
   `<p class="form-row">` : la hauteur de ses lignes est celle du paragraphe,
   calculée sur la taille de police du paragraphe. En bloc, elle se calcule sur
   la taille réduite du span, comme pour la mention. Un `line-height` posé sur
   le span resté en ligne n'y changerait rien. */
form.register .description {
    display: block;
}

form.register .woocommerce-privacy-policy-text p {
    margin-bottom: 0.5em;
}

/* ── Feedback du numéro de téléphone compris (cc-telephone-feedback.js) ───────

   Rendu sous deux champs : celui du formulaire d'inscription et le champ « un
   autre numéro » du bloc de renvoi de l'écran de vérification.

   Ces règles vivent dans cette feuille, chargée sur tout le front, et non dans
   `cc-verification-otp.css`, chargée sur la seule page compte
   (cc-frontend-assets.php) : le formulaire d'inscription se rend aussi sur la
   page Commander substituée, où le feedback sortirait sans style.

   `display: block` : le conteneur est un `<span>` frère du champ ; en ligne, il
   se collerait au bout de l'input.

   Ce feedback est informatif et ne bloque rien : couleur de texte courante, et
   non `--cc-couleur-front-forte`, celle des messages d'erreur
   (`.cc-otp-erreur-numero`). */
.cc-tel-feedback {
    display: block;
    margin: 0.35rem 0 0;
    font-size: var(--cc-texte-etiquette-taille);
    font-weight: var(--cc-graisse-forte);
}

/* `hidden` doit l'emporter sur le `display: block` ci-dessus : sans cette
   règle, le conteneur vide serait visible dès le chargement. */
.cc-tel-feedback[hidden] {
    display: none;
}

/* ── Mon Compte — tableau de bord en lecture seule et onglet « Identifiants » ──

   Deux écrans servis par des templates CC substitués à ceux de WooCommerce
   (`includes/Templates/cc-mon-compte-{tableau-de-bord,identifiants}.php`).

   Ces règles vivent dans cette feuille plutôt que dans
   `cc-verification-otp.css` : chargée sur la page compte, celle-ci couvrirait
   ces deux écrans, mais elle porte le style du seul écran de vérification.

   Ces écrans informent, ils n'avertissent de rien : fond
   `--cc-couleur-front-secondaire`, et non `--cc-couleur-front-forte`, celle des
   messages d'erreur. */

.cc-mon-compte-bandeau {
    margin: 0 0 1.25rem;
    padding: 0.6rem 0.9rem;
    background: var(--cc-couleur-front-secondaire);
    border-left: 3px solid var(--cc-couleur-front-primaire);
    border-radius: var(--cc-rayon);
    font-size: var(--cc-texte-petit-taille);
}

/* Deux colonnes dès qu'il y a la place : l'intitulé, puis la valeur. Sous le
   point de bascule, la valeur passe simplement sous son intitulé. */
.cc-mon-compte-infos {
    display: grid;
    grid-template-columns: minmax(10rem, auto) 1fr;
    gap: 0.5rem 1.5rem;
    margin: 0 0 1.5rem;
}

.cc-mon-compte-infos dt {
    font-weight: var(--cc-graisse-forte);
}

/* `dd` porte une marge gauche par défaut dans les navigateurs : en grille, elle
   décalerait toute la colonne des valeurs. */
.cc-mon-compte-infos dd {
    margin: 0;
}

.cc-mon-compte-infos__lien {
    margin-left: 0.5rem;
    font-size: var(--cc-texte-petit-taille);
}

@media (max-width: 600px) {
    .cc-mon-compte-infos {
        grid-template-columns: 1fr;
        gap: 0.15rem 0;
    }

    .cc-mon-compte-infos dd {
        margin-bottom: 0.75rem;
    }
}

.cc-mon-compte-identifiants__intro {
    margin-bottom: 1.5rem;
}

.cc-mon-compte-identifiants__aide {
    display: block;
    margin-top: 0.35rem;
    font-size: var(--cc-texte-etiquette-taille);
}

.cc-mon-compte-identifiants__attente {
    padding: 0.6rem 0.9rem;
    background: var(--cc-couleur-front-secondaire);
    border-left: 3px solid var(--cc-couleur-front-primaire);
    border-radius: var(--cc-rayon);
    font-size: var(--cc-texte-petit-taille);
}