/*
Theme Name: Divi Child
Theme URI: http://www.elegantthemes.com/gallery/divi/
Template: Divi
Author: Elegant Themes
Author URI: http://www.elegantthemes.com
Description: Smart. Flexible. Beautiful. Divi is the most powerful theme in our collection.
Version: 4.14.8.1646932346
Updated: 2022-03-10 17:12:26

*/

:root {

  /* Clamp Text Sizes — mobile min → desktop max */
  --divi-sm-body:   clamp(0.7rem, 0.08vw + 0.68rem, 0.8rem);      /* 11px → 13px */
  --divi-body:      clamp(0.8rem, 0.1vw + 0.77rem, 0.938rem);     /* 13px → 15px */
  --divi-button-sm: clamp(0.75rem, 0.1vw + 0.72rem, 0.875rem);   /* 12px → 14px */
  --divi-button:    clamp(0.938rem, 0.15vw + 0.9rem, 1.125rem);   /* 15px → 18px */
  --divi-button-lg: clamp(1.1rem, 0.25vw + 1rem, 1.4rem);        /* 17px → 22px */
  --divi-h6:        clamp(1rem, 0.3vw + 0.9rem, 1.35rem);         /* 16px → 22px */
  --divi-h5:        clamp(1.15rem, 0.4vw + 1rem, 1.6rem);         /* 18px → 26px */
  --divi-h4:        clamp(1.35rem, 0.6vw + 1.15rem, 2rem);        /* 22px → 32px */
  --divi-h3:        clamp(1.55rem, 0.8vw + 1.3rem, 2.5rem);       /* 25px → 40px */
  --divi-h2:        clamp(1.8rem, 1.2vw + 1.5rem, 3.5rem);        /* 29px → 56px */
  --divi-h1:        clamp(2.4rem, 2vw + 1.9rem, 5.5rem);           /* 38px → 88px */
  --divi-h1-large:  clamp(3rem, 2.8vw + 2.3rem, 7rem);            /* 48px → 112px */

}

/* ═══════════════════════════════════════════
   ANIMATED GRADIENT BLOBS
   ═══════════════════════════════════════════ */

/* Fond blanc par défaut */
body {
    background-color: #ffffff !important;
}

/* Supprimer le fond blanc sur les pages projet, blog et CPT services */
.single-project #main-content,
.single-project .et_pb_section_0_tb_body,
.single-project .et-l--post .et_pb_section_0,
.single-post #main-content,
.single-post .et_pb_section_0_tb_body,
.single-post .et-l--post .et_pb_section_0,
.single-post .et-l--body > .et_builder_inner_content > .et_pb_section.et_pb_section_0_tb_body,
.single-creation-site #main-content,
.single-creation-ecommerce #main-content,
.single-referencement-seo #main-content,
.single-dev-sur-mesure #main-content,
.single-automatisation-ia #main-content,
.single-agence-web #main-content,
.single-legal #main-content,
.single-legal .et_pb_section_0_tb_body,
.single-legal .et-l--post .et_pb_section_0,
.tax-secteur #main-content,
.page-id-244152 #main-content
{
    background-color: transparent !important;
}

/* Colonne pleine largeur dans projet-content */
.projet-content > .et_pb_column {
    width: 100% !important;
}


/* Dégradé blanc sur le footer (au-dessus du masque) */
.et_pb_section.footer-gradient {
    position: relative;
}

.et_pb_section.footer-gradient::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%);
    pointer-events: none;
}

/* Cacher UNIQUEMENT le gradient au départ */
.animated-gradient-canvas {
    opacity: 0 !important;
    transition: opacity 1s ease-in-out !important;
}

/* Le gradient apparaît quand la classe fade-in est ajoutée */
.animated-gradient-canvas.fade-in {
    opacity: 1 !important;
}

/* Mode local (dans une section) */
.animated-gradient-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Mode fixed (arrière-plan global) */
.animated-gradient-fixed > .animated-gradient-canvas {
    position: fixed;
    inset: 0;
    z-index: -10;
    width: 100vw;
    height: 100vh;
}

.animated-gradient-canvas-inner {
    position: absolute;
    width: 100%;
    height: 100%;
}

.animated-gradient-canvas .blob {
    position: absolute;
    transform: translate(-50%, -50%);
    will-change: left, top, border-radius, transform;
}

/* ═══════════════════════════════════════════
   Z-INDEX HIERARCHY
   ═══════════════════════════════════════════ */

/* Canvas: -2, Masque: -1, Contenu: 12+ */

/* IMPORTANT: Ne pas créer de stacking context sur #page-container et #et-boc */
#page-container {
    position: relative !important;
    z-index: auto !important;
}

#et-boc {
    position: relative !important;
    z-index: auto !important;
}

/* Main area et main content */
#et-main-area,
#main-content {
    position: relative !important;
    z-index: 12 !important;
}

/* Article et entry-content */
article,
.entry-content {
    position: relative !important;
    z-index: 12 !important;
}

/* Layout containers Divi */
.et-l.et-l--post,
.et-l.et-l--body {
    position: relative !important;
    z-index: 12 !important;
}

/* Builder inner content (sauf footer) */
.et-l.et-l--post .et_builder_inner_content,
#main-content .et_builder_inner_content {
    position: relative !important;
    z-index: 12 !important;
}

/* Toutes les sections Divi (SAUF le footer avec le gradient) */
.et_pb_section:not(.animated-gradient-fixed) {
    position: relative !important;
    z-index: 12 !important;
}

/* Rows et modules */
.et_pb_row,
.et_pb_module {
    position: relative !important;
    z-index: 13 !important;
}

/* Header toujours visible (priorité max) */
#main-header,
#top-header,
.et-l--header,
.et-l.et-l--header,
header.et-l,
#nav-principal,
.et_fixed_nav #main-header {
    position: relative !important;
    z-index: 999999 !important;
}

/* Footer - z-index:auto pour ne PAS créer de stacking context
   (permet au CTA sticky d'échapper et d'être au-dessus du contenu) */
.et-l.et-l--footer {
    position: relative !important;
    z-index: auto !important;
}

/* Sections du footer restent sous le contenu principal (z-index:12) */
.et-l.et-l--footer .et_pb_section:not(.animated-gradient-fixed) {
    z-index: 1 !important;
}

/* Section contenant le CTA sticky : pas de stacking context pour le libérer */
.et-l.et-l--footer .et_pb_section:has(.et_pb_sticky--bottom) {
    z-index: auto !important;
}

/* CTA sticky footer au-dessus de tout — bottom:0 corrige le calcul cassé par le double sticky */
.et-l.et-l--footer .et_pb_sticky--bottom {
    z-index: 999999 !important;
    bottom: 0 !important;
}

/* Section footer avec gradient - z-index bas, fond transparent (override Divi .et_pb_section) */
.animated-gradient-fixed {
    position: relative !important;
    z-index: 1 !important;
    background-color: transparent !important;
}


/*
Template margin adjustments
*/
#project-content .et_pb_row,
#blog-content .et_pb_row{
    padding-right: 0!important;
    padding-left: 0!important;
}

/* Legal CPT — reset inner content */
.single-legal .et-l--post .et_pb_section {
    padding-top: 0 !important;
}

.single-legal .et-l--post .et_pb_row {
    width: 100% !important;
}

.single-legal .et-l--post .et_pb_text_0 {
    margin-top: 0 !important;
}

/* Vidéos YouTube responsive 16/9 */
#blog-content .wp-block-embed__wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 9/16 */
    height: 0;
    overflow: hidden;
}

#blog-content .wp-block-embed__wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*
CTA BUTTONS
*/
.cta-devis > a {
    display: inline-block;
    background-color: var(--gcid-secondary-color);
    font-family: var(--et_global_body_font);
    text-transform: uppercase;
    color: #ffffff !important;
    font-size: 16px !important;
    padding: .75em 2em;
    border-radius: 8px;
    border-width: 0px;
    border-color: #333;
    border-style: solid;
    text-decoration: none;
    transition-property: background-color;
    transition-duration: 300ms;
    transition-timing-function: ease;
    transition-delay: 0ms;
    margin-top: 50px;
    margin-bottom: 100px;
}

.cta-devis:hover > a {
    background-color: hsl(from var(--gcid-secondary-color) calc(h + 0) calc(s + 0) calc(l + -10));
}

/*
CTA autres prestations dans la même ville
*/
.publiko-sidebar-services__card {
    background: rgba(255, 255, 255, 0.5)!important;
    background-color: rgba(255, 255, 255, 0.5)!important;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    margin-top: 0px !important;
    padding-top: 0 !important;
    padding-right: 0px !important;
    padding-bottom: 0!important;
    padding-left: 0px !important;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    border-width: 2px;
    border-color: hsl(from var(--gcid-secondary-color) calc(h + 0) calc(s + 0) calc(l + 18));
    border-style: solid;
    transition-property: border-width;
    transition-duration: 300ms;
    transition-timing-function: ease;
    transition-delay: 0ms;
}
.publiko-sidebar-services__post-title {
    margin-top: 10px;
    color: var(--gcid-primary-color)!important;
}
.publiko-sidebar-services__label {
    display: none!important;
}

/* Glass UI → déplacé dans glass-ui/glass-ui.css */

/* ═══════════════════════════════════════════
   MEGAMENU PRESTATIONS — slide-down au hover
   ═══════════════════════════════════════════ */

#megamenu-prestations-desktop {
    position: absolute;
    left: 0;
    right: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease;
}

#megamenu-prestations-desktop.open {
    max-height: 500px;
    opacity: 1;
}

/* ═══════════════════════════════════════════
   MOBILE MENU — slide-down au clic
   ═══════════════════════════════════════════ */

#inner-mobile-menu {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease;
}

#inner-mobile-menu.open {
    max-height: 80vh;
    opacity: 1;
}

/* ═══════════════════════════════════════════
   .float — flottaison verticale en boucle
   ═══════════════════════════════════════════ */

.bobbing {
    animation: float-bob 2.5s ease-in-out infinite !important;
}

.bobbing > * {
    scale: 1;
    transition: scale 0.3s ease !important;
}

.bobbing:hover > * {
    scale: 1.2 !important;
}

@keyframes float-bob {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -10px; }
}

/* ═══════════════════════════════════════════
   TARIFS SECTION — [publiko_tarifs_section]
   ═══════════════════════════════════════════ */

.publiko-tarifs-section {
    margin: 2em 0;
}

.publiko-tarifs-section h2 {
    text-align: center;
    margin-bottom: 1.2em;
}

.publiko-tarifs-table table {
    width: 100%;
    border-collapse: collapse;
}

.publiko-tarifs-table th,
.publiko-tarifs-table td {
    padding: 0.8em 1em;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
    vertical-align: top;
}

.publiko-tarifs-table thead th {
    background: var(--gcid-primary-color, #1a1a2e);
    color: #fff;
    font-weight: 600;
}

.publiko-tarifs-table tbody tr:hover {
    background: rgba(0, 0, 0, 0.02);
}

.publiko-tarifs-table td[data-label="Tarif"] {
    font-weight: 600;
    white-space: nowrap;
}

.publiko-tarifs-table ul {
    margin: 0;
    padding-left: 1.2em;
    list-style: disc;
}

.publiko-tarifs-table li {
    margin-bottom: 0.2em;
    font-size: 0.92em;
}

.publiko-tarifs-mention {
    text-align: center;
    font-style: italic;
    font-size: 0.9em;
    color: #6b7280;
    margin: 1.2em 0 0.5em;
}

/* Mobile responsive — blocs empilés */
@media (max-width: 768px) {
    .publiko-tarifs-table thead {
        display: none;
    }

    .publiko-tarifs-table tbody,
    .publiko-tarifs-table tr,
    .publiko-tarifs-table td {
        display: block;
        width: 100%;
    }

    .publiko-tarifs-table tr {
        margin-bottom: 1em;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 0.5em;
    }

    .publiko-tarifs-table td {
        border-bottom: none;
        padding: 0.4em 0.8em;
    }

    .publiko-tarifs-table td::before {
        content: attr(data-label);
        display: block;
        font-weight: 700;
        font-size: 0.85em;
        color: var(--gcid-primary-color, #1a1a2e);
        margin-bottom: 0.2em;
    }

    .publiko-tarifs-table td[data-label="Tarif"] {
        white-space: normal;
    }
}

/* ═══════════════════════════════════════════
   FAQ ACCORDION — [publiko_faq]
   ═══════════════════════════════════════════ */

.publiko-faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 0.8em;
    margin: 2em 0;
}

.publiko-faq-question {
    cursor: pointer;
    padding: 1em 2.5em 1em 1.2em;
    font-weight: 600;
    font-size: var(--divi-body);
    color: var(--gcid-primary-color, #1a1a2e);
    list-style: none;
    position: relative;
    display: block;
}

.publiko-faq-question::-webkit-details-marker,
.publiko-faq-question::marker {
    display: none;
    content: '';
}

.publiko-faq-question::after {
    content: '';
    position: absolute;
    right: 1.2em;
    top: 50%;
    width: 0.45em;
    height: 0.45em;
    border-right: 2px solid var(--gcid-primary-color, #1a1a2e);
    border-bottom: 2px solid var(--gcid-primary-color, #1a1a2e);
    transform: translateY(-75%) rotate(45deg);
    transition: transform 0.3s ease;
}

.publiko-faq-item[open] .publiko-faq-question::after {
    transform: translateY(-25%) rotate(-135deg);
}

.publiko-faq-answer {
    padding: 0 1.2em 1.2em;
    color: var(--gcid-primary-color, #1a1a2e);
}

/* ── Boutons devis CTA ── */
.cta-devis > a {
    border-radius: 30px !important;
}