/**
 * Styles pour la grille 4-cols native Elementor sur /realisations/.
 * Les classes cc4-* sont posées via css_classes sur chaque widget/column/section.
 */

/* ─── Intro ───────────────────────────────────────────── */
.cc-grid-intro { padding-top: 80px !important; padding-bottom: 40px !important; }
.cc-grid-intro .cc4-eyebrow { margin-bottom: 24px; }
.cc-grid-intro .cc4-intro-title { max-width: 900px; letter-spacing: -0.03em; }
.cc-grid-intro .cc4-intro-title font[style*="badedf"] { padding: 0 12px; }
.cc-grid-intro .cc4-intro-body { max-width: 620px; color: rgba(18,18,18,0.75); }

/* ─── Sections ROW ────────────────────────────────────── */
.cc-grid-row {
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.cc-grid-row > .elementor-container {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
.cc-grid-row-1 { border-top: 1px solid rgba(18,18,18,0.15); }

/* ─── Colonnes (cards) ───────────────────────────────── */
.cc4-card {
    padding: 40px 32px 48px !important;
    border-right: 1px solid rgba(18,18,18,0.12) !important;
    border-bottom: 1px solid rgba(18,18,18,0.12) !important;
    background-color: #e6e6e5; /* fond clair par défaut ; override en négatif */
    transition: background-color 0.3s ease;
    display: flex !important;
    flex-direction: column !important;
}
/* En mode négatif, le background-color est géré par JS inline — ne pas
   poser de valeur ici qui pourrait interférer avec le style inline. */
body.cc-neg-mode .cc4-card { background-color: transparent; }
.cc4-card:last-child { border-right: none !important; }
.cc4-card:hover { background: rgba(255,255,255,0.5); }
.cc4-card > .elementor-column-wrap,
.cc4-card > .elementor-widget-wrap {
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-content: flex-start !important;
    align-items: stretch !important;
}

/* Numrow — num à gauche + nom à droite sur UNE ligne.
   Structure DOM cygnitextbox :
     .text-wrapper > .caption.align-left (vide) + .align-left > span + span
   Le flex doit être sur .align-left (parent direct des spans). */
.cc4-numrow { margin-bottom: 12px !important; }
.cc4-numrow .text-wrapper,
.cc4-numrow .text-wrapper .align-left,
.cc4-numrow .align-left {
    font-family: 'JetBrains Mono', monospace !important;
    letter-spacing: 0.2em;
    text-transform: lowercase;
}
.cc4-numrow .text-wrapper .align-left {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 8px;
    width: 100%;
}
/* Le span "homie" avait float:right + display:block → on force inline
   pour qu'il reste dans le flex à droite. */
.cc4-numrow .text-wrapper .align-left > span {
    display: inline !important;
    float: none !important;
    white-space: nowrap;
}
/* Cache la caption.align-left vide qui prend de la place au-dessus */
.cc4-numrow .text-wrapper > .caption.align-left:empty {
    display: none !important;
}

/* Titre */
.cc4-title { margin-bottom: 2px !important; }
.cc4-title .text-box {
    text-transform: lowercase;
    letter-spacing: -0.025em;
}
.cc4-title font[style*="badedf"] { padding: 0 6px; }

/* Sous-titre */
.cc4-sub {
    margin-bottom: 20px !important;
    color: rgba(18,18,18,0.75);
}

/* Cache le padding-top des .text-wrapper des 3 blocs d'entête pour
   qu'ils soient bien collés visuellement */
.cc4-numrow .text-wrapper,
.cc4-title .text-wrapper,
.cc4-sub .text-wrapper {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
}
.cc4-numrow .elementor-widget-container,
.cc4-title .elementor-widget-container,
.cc4-sub .elementor-widget-container {
    padding: 0 !important;
    margin: 0 !important;
}

/* Image 3:4 en pleine largeur de la card, avec débordement latéral.
   Le widget Elementor image renvoie <img> sans wrapper cliquable.
   On force l'aspect ratio via un padding-top hack sur le container
   (compatible plus vieux browsers que aspect-ratio pur). */
.elementor-widget-image.cc4-image {
    width: calc(100% + 64px) !important;
    margin: 0 -32px 24px !important;
}
.elementor-widget-image.cc4-image > .elementor-widget-container {
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    aspect-ratio: 3 / 4 !important;
    overflow: hidden !important;
    background-color: rgba(18,18,18,0.05);
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.elementor-widget-image.cc4-image img {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    max-width: none !important;
    /* Transitions cinématiques (effet "focus" doux et lent, sans blur) */
    transition:
        filter 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    filter: grayscale(1) contrast(1.12) brightness(0.9);
}
.cc4-card:hover .elementor-widget-image.cc4-image img {
    filter: grayscale(0) saturate(1.05) contrast(1) brightness(1);
    transform: translateX(0) scale(1.07) !important; /* compose avec reveal + force override */
    transition-delay: 0s !important; /* override le stagger reveal */
}
/* Bouton "Voir →" masqué (peut être réactivé en retirant cette règle) */
.cc4-card .elementor-widget-button.cc4-cta {
    display: none !important;
}
/* OVERLAY MOTIF LIGNES DIAGONALES (fond_ligne.png, pattern 15x14 tileable)
   Se pose au-dessus de l'image et disparaît au hover. */
.elementor-widget-image.cc4-image > .elementor-widget-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: transparent;
    background-image: url('/capsulecorp/wp-content/uploads/2024/05/fond_ligne.png');
    background-repeat: repeat;
    background-size: 15px 14px;
    mix-blend-mode: multiply;
    pointer-events: none;
    opacity: 0.85;
    transition: opacity 0.5s ease;
    z-index: 2;
}
.cc4-card:hover .elementor-widget-image.cc4-image > .elementor-widget-container::after {
    opacity: 0;
    transition-delay: 0s !important;
}

/* Meta grid */
.cc4-meta {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    border-top: 1px solid rgba(18,18,18,0.15);
    margin-bottom: 16px !important;
    margin-top: 0 !important;
}

/* Description */
.cc4-desc {
    color: rgba(18,18,18,0.7);
    margin-bottom: 20px !important;
    flex-grow: 1 !important;
}

/* CTA button — override strict des styles Cygni (par défaut vert) */
.elementor-widget-button.cc4-cta .elementor-button,
.elementor-widget-button.cc4-cta .elementor-button:link,
.elementor-widget-button.cc4-cta .elementor-button:visited,
.elementor-widget-button.cc4-cta .elementor-button-link {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #121212 !important;
    fill: #121212 !important;
    border: 1px solid #121212 !important;
    border-radius: 0 !important;
    padding: 10px 16px !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10px !important;
    line-height: 1 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    font-weight: 400 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    min-width: 0 !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
}
.cc4-card:hover .elementor-widget-button.cc4-cta .elementor-button {
    background: #121212 !important;
    background-color: #121212 !important;
    color: #e6e6e5 !important;
}
.elementor-widget-button.cc4-cta .elementor-button-text {
    color: inherit !important;
    font-weight: inherit !important;
}
/* Bouton wrap alignment left */
.elementor-widget-button.cc4-cta { text-align: left !important; }

/* Responsive tablette : 2 colonnes */
@media (max-width: 1100px) {
    .cc-grid-row > .elementor-container > .elementor-column {
        width: 50% !important;
        flex-basis: 50% !important;
        max-width: 50% !important;
    }
    .cc-grid-row .cc4-card:nth-child(2n) { border-right: none !important; }
    .cc-grid-row .cc4-card:nth-child(2n+1) { border-right: 1px solid rgba(18,18,18,0.12) !important; }
    .cc4-title .text-box font { font-size: 52px !important; line-height: 51px !important; }
}

/* Mobile : cachée (le mobile utilise déjà le rebuild .cc-mob-article) */
@media (max-width: 767px) {
    .cc-grid-intro, .cc-grid-row { display: none !important; }
}