/* Section Piliers : 2 dispositions (Gestion des sections) — « Deux piliers » d'origine (.uw-pilier-section--deux,
   includes/section_pilier_deux.inc.php) et « Services » (.uw-pilier-section--services, section_pilier.inc.php).
   Mêmes noms de classes dans les deux : chaque règle est limitée à sa disposition. */

/* ==========================================================
   UW-PILIER (Deux piliers pour votre réussite)
   Section sombre à 2 cartes, séparateur "+" flottant au centre.
   Visuel = icône FontAwesome dans un panneau teinté (pas de photo).
========================================================== */

/* Le fond sombre vient de .uw-dark-section (assets/css/uw-core.css), partagé avec
   d'autres sections — ici on ne gère que le padding/positionnement propres au module. */
.uw-pilier-section--deux {
    position: relative;
    overflow: hidden;
}


.uw-pilier-section--deux .uw-pilier-title {
    margin: 0 0 27px;
}


.uw-pilier-section--deux .uw-pilier-grid {
    position: relative;

    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 28px;
}


/* ----------------------------------------------------------
   CARTE
---------------------------------------------------------- */

.uw-pilier-section--deux .uw-pilier-card {
    display: flex;
    align-items: center;

    gap: 25px;

    min-height: 410px;

    padding: 26px 23px;

    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 20px;

    background: linear-gradient(120deg, #111824, rgba(255, 255, 255, .02));
}


/* ----------------------------------------------------------
   VISUEL (photo si renseignée, sinon icône en repli)
---------------------------------------------------------- */

.uw-pilier-section--deux .uw-pilier-art {
    flex: 0 0 43%;

    aspect-ratio: 1;

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

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 16px;

    background:
        radial-gradient(
            circle at 30% 30%,
            color-mix(in srgb, var(--uw-pilier-accent) 25%, transparent),
            rgba(255, 255, 255, .04)
        );
}


.uw-pilier-section--deux .uw-pilier-art i {
    font-size: 54px;

    color: var(--uw-pilier-accent);
}


.uw-pilier-section--deux .uw-pilier-art--photo {
    padding: 14px;
    transition: transform .35s linear, box-shadow .35s cubic-bezier(.25, .8, .25, 1);
}


.uw-pilier-section--deux .uw-pilier-art--photo img {
    width: 100%;
    height: 100%;
    display: block;
    /*object-fit: cover;*/
    border-radius: 10px;
}
.uw-pilier-section--deux .uw-pilier-art--photo:hover {
     transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(10, 20, 34, .1);
   
}


/* ----------------------------------------------------------
   TEXTE
---------------------------------------------------------- */

.uw-pilier-section--deux .uw-pilier-copy {
    flex: 1;
    min-width: 0;
}


.uw-pilier-section--deux .uw-pilier-kicker {
    margin: 0 0 13px;

    color: var(--kicker);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: .4px;
}


.uw-pilier-section--deux .uw-pilier-kicker--green {
    color: var(--kicker-green);
}


.uw-pilier-section--deux .uw-pilier-card h3 {
    margin: 0;

    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -.6px;

    color: #fff;
}


.uw-pilier-section--deux .uw-pilier-checks {
    list-style: none;

    margin: 15px 0 0;
    padding: 15px 0 0;

    border-top: 1px solid rgba(255, 255, 255, .12);
}


.uw-pilier-section--deux .uw-pilier-checks li {
    display: flex;
    align-items: center;

    gap: 9px;

    margin: 10px 0;

    font-size: 13px;

    color: rgba(255, 255, 255, .85);
}


.uw-pilier-section--deux .uw-pilier-checks i {
    flex: 0 0 auto;

    width: 17px;
    height: 17px;

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

    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 50%;

    font-size: 9px;
}


/* ----------------------------------------------------------
   SÉPARATEUR "+"
---------------------------------------------------------- */

.uw-pilier-section--deux .uw-pilier-plus {
    position: absolute;
    z-index: 2;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    width: 53px;
    height: 53px;

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

    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;

    background: #fff;
    color: #101521;

    font-size: 30px;
    font-weight: 300;
    line-height: 1;

    box-shadow: 0 0 24px rgba(255, 255, 255, .2);
}


/* ==========================================================
   TABLETTE (≤991px)
========================================================== */

@media (max-width: 991px) {

    .uw-pilier-section--deux .uw-pilier-card {
        gap: 16px;

        padding: 20px 15px;
    }


    .uw-pilier-section--deux .uw-pilier-card h3 {
        font-size: 17px;
    }


    .uw-pilier-section--deux .uw-pilier-checks li {
        font-size: 11px;
    }

}


/* ==========================================================
   MOBILE (≤767px)
========================================================== */

@media (max-width: 767px) {

    .uw-pilier-section--deux .uw-pilier-grid {
        grid-template-columns: 1fr;

        gap: 22px;
    }


    .uw-pilier-section--deux .uw-pilier-card {
        min-height: 0;

        gap: 20px;

        padding: 23px;
    }


    .uw-pilier-section--deux .uw-pilier-art {
        flex-basis: 35%;
        max-width: 160px;
    }


    .uw-pilier-section--deux .uw-pilier-card h3 {
        font-size: 20px;
    }


    .uw-pilier-section--deux .uw-pilier-checks li {
        font-size: 13px;
    }


    .uw-pilier-section--deux .uw-pilier-plus {
        width: 40px;
        height: 40px;

        font-size: 22px;
    }

}


/* ==========================================================
   PETIT MOBILE (≤480px)
========================================================== */

@media (max-width: 480px) {

    .uw-pilier-section--deux .uw-pilier-card {
        flex-direction: column;

        text-align: center;
    }


    .uw-pilier-section--deux .uw-pilier-art {
        flex-basis: auto;

        width: 80px;
        height: 80px;
    }


    .uw-pilier-section--deux .uw-pilier-art i {
        font-size: 32px;
    }


    .uw-pilier-section--deux .uw-pilier-checks li {
        justify-content: center;
    }


    .uw-pilier-section--deux .uw-pilier-plus {
        display: none;
    }

}


/* ==========================================================
   UW-PILIER — section « Piliers / Services » (includes/section_pilier.inc.php)
   En-tête centré + 2 ou 3 cartes verticales numérotées (01, 02…) : photo ou icône, étiquette,
   titre, liste cochée, bouton. Refait le 2026-10-09 (avant : 2 cartes horizontales + « + » central).
   Fond sombre = .uw-dark-section (uw-core.css) ou fond de section réglé en backoffice ;
   « Fond du site » (sec-theme-fond) = cartes claires aux couleurs du thème.
   --uw-pilier-accent = couleur du pilier (couleur 1 à 4, réglée par pilier).
========================================================== */

.uw-pilier-section--services {
    --pil-card: rgba(255, 255, 255, .04);
    --pil-line: rgba(255, 255, 255, .12);
    --pil-ink: #f3f5fb;
    --pil-muted: rgba(243, 245, 251, .72);
    position: relative;
    overflow: hidden;
}

/* Couleur du pilier (posée sur chaque carte) ; éclaircie sur fond sombre pour rester lisible
   même si la couleur 1 est foncée. Calculée sur la carte : --uw-pilier-accent n'existe qu'à ce niveau. */
.uw-pilier-section--services .uw-pilier-card { --pil-accent: color-mix(in srgb, var(--uw-pilier-accent, var(--couleur2)) 62%, #fff); }

/* « Fond du site » : fond clair (ou fond sombre en mode sombre) → jetons du thème */
.uw-pilier-section--services.sec-theme-fond {
    --pil-card: var(--card);
    --pil-line: var(--line);
    --pil-ink: var(--ink);
    --pil-muted: var(--muted);
    color: var(--ink);
}
html:not(.uw-dark) .uw-pilier-section--services.sec-theme-fond .uw-pilier-card { --pil-accent: var(--uw-pilier-accent, var(--couleur2)); }


/* ----------------------------------------------------------
   EN-TÊTE
---------------------------------------------------------- */

/* En-tête calé à gauche (petit titre, titre, texte), aligné sur le bord des cartes */
.uw-pilier-section--services .uw-pil-head {
    max-width: 760px;
    margin: 0 0 40px;
    text-align: left;
}

/* Petit titre = .title-line commun (uw-core.css : police script, couleur 1, trait avant). Sur fond sombre
   (fond de la section ou mode sombre), la couleur 1 disparaît : texte et trait en couleur 2 éclaircie. */
.uw-pilier-section--services:not(.sec-theme-fond) .uw-pil-kicker,
html.uw-dark .uw-pilier-section--services .uw-pil-kicker { color: color-mix(in srgb, var(--couleur2) 80%, #fff); }
.uw-pilier-section--services:not(.sec-theme-fond) .uw-pil-kicker::before,
html.uw-dark .uw-pilier-section--services .uw-pil-kicker::before { background: currentColor; }

/* Titre (H2) : même police, taille et couleur (couleur 2) que les titres des autres sections — seule la marge
   est propre au module. Les *mots* restent en couleur 2. */
.uw-pilier-section--services .uw-pilier-title {
    margin: 6px 0 12px;
    text-wrap: balance;
}
.uw-pilier-section--services .uw-pilier-title em { font-style: normal; }

.uw-pilier-section--services .uw-pil-intro {
    margin: 0;
    color: var(--pil-muted);
    font-size: 15px;
    line-height: 1.7;
}


/* ----------------------------------------------------------
   CARTES (--n = nombre de cartes affichées, 3 au plus par ligne)
---------------------------------------------------------- */

.uw-pilier-section--services .uw-pilier-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
}

.uw-pilier-section--services .uw-pilier-card {
    position: relative;
    flex: 0 1 calc((100% - (min(var(--n), 3) - 1) * 22px) / min(var(--n), 3));
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 28px 26px 26px;
    overflow: hidden;
    border: 1px solid var(--pil-line);
    border-radius: 22px;
    background: var(--pil-card);
    color: var(--pil-ink);
    transition: transform .35s cubic-bezier(.25, .8, .25, 1), border-color .35s, box-shadow .35s;
}

.uw-pilier-section--services .uw-pilier-card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--pil-accent) 50%, var(--pil-line));
    box-shadow: 0 24px 50px -28px color-mix(in srgb, var(--pil-accent) 70%, transparent);
}

/* Numéro 01 / 02 / 03, en chiffres détourés dans le coin */
.uw-pilier-section--services .uw-pil-num {
    position: absolute;
    top: 14px;
    right: 20px;
    font-size: 64px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
    color: transparent;
    -webkit-text-stroke: 1.5px color-mix(in srgb, var(--pil-accent) 45%, transparent);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.uw-pilier-section--services .uw-pil-ico {
    width: 64px;
    height: 64px;
    margin-bottom: 22px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    font-size: 28px;
    color: var(--pil-accent);
    border: 1px solid color-mix(in srgb, var(--pil-accent) 25%, transparent);
    background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--pil-accent) 28%, transparent), color-mix(in srgb, var(--pil-accent) 8%, transparent));
}

.uw-pilier-section--services .uw-pil-photo {
    margin: 0 0 20px;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 14px;
    background: color-mix(in srgb, var(--pil-accent) 10%, transparent);
}
.uw-pilier-section--services .uw-pil-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

.uw-pilier-section--services .uw-pilier-kicker {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--pil-accent);
}

.uw-pilier-section--services .uw-pilier-card h3 {
    margin: 6px 0 16px;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--pil-ink) !important;
}

.uw-pilier-section--services .uw-pilier-checks {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: grid;
    gap: 9px;
}

.uw-pilier-section--services .uw-pilier-checks li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--pil-muted);
    font-size: 14.5px;
    line-height: 1.5;
}

.uw-pilier-section--services .uw-pilier-checks li::before {
    content: "✓";
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
    color: var(--pil-accent);
    background: color-mix(in srgb, var(--pil-accent) 16%, transparent);
}

.uw-pilier-section--services .uw-pil-more {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid var(--pil-line);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    color: var(--pil-ink);
    transition: background .3s, border-color .3s, color .3s;
}
.uw-pilier-section--services .uw-pil-more i { font-style: normal; transition: transform .3s; }
.uw-pilier-section--services .uw-pilier-card:hover .uw-pil-more,
.uw-pilier-section--services .uw-pil-more:focus-visible { background: var(--uw-pilier-accent, var(--couleur2)); border-color: var(--uw-pilier-accent, var(--couleur2)); color: #fff; text-decoration: none; }
.uw-pilier-section--services .uw-pilier-card:hover .uw-pil-more i { transform: translateX(4px); }


/* ==========================================================
   TABLETTE (≤991px) : 2 cartes par ligne au plus
========================================================== */

@media (max-width: 991px) {
    .uw-pilier-section--services .uw-pilier-card { flex-basis: calc((100% - (min(var(--n), 2) - 1) * 22px) / min(var(--n), 2)); }
}


/* ==========================================================
   MOBILE (≤600px) : une carte par ligne
========================================================== */

@media (max-width: 600px) {
    .uw-pilier-section--services .uw-pilier-card { flex-basis: 100%; padding: 24px 22px; }
    .uw-pilier-section--services .uw-pil-num { font-size: 52px; }
    .uw-pilier-section--services .uw-pil-head { margin-bottom: 30px; }
}

@media (prefers-reduced-motion: reduce) {
    .uw-pilier-section--services .uw-pilier-card, .uw-pilier-section--services .uw-pil-more, .uw-pilier-section--services .uw-pil-more i { transition: none; }
}