/**
 * WS Cartes Services Detaillees (ws-detailed-service-cards)
 * - Grille de cartes : image arrondie + pastille icone + titre + description
 *   + liste a puces (icone + texte) + lien CTA.
 * - Carte entierement cliquable via lien etire en ::after.
 * - 100% CSS, zero JS.
 */

/* ===== Reset semantique au niveau du wrapper (MANIFEST 9.28) ===== */
.ws-dsc h3,
.ws-dsc p,
.ws-dsc ul,
.ws-dsc li {
    margin: 0;
    padding: 0;
}
.ws-dsc ul {
    list-style: none;
}

/* ===== Grille ===== */
.ws-dsc__grid {
    display: grid;
    gap: var(--ws-dsc-gap, 24px);
    /* Le nombre de colonnes suit le reglage "Colonnes", mais auto-fit
       reduit la grille quand il y a moins de cartes : une colonne sans
       aucune carte se replie -> 2 cartes = 2 colonnes, 1 carte = 1 colonne.
       La largeur mini d'une colonne = largeur exacte pour N colonnes. */
    grid-template-columns: repeat(
        auto-fit,
        minmax(
            calc((100% - (var(--ws-dsc-cols, 3) - 1) * var(--ws-dsc-gap, 24px)) / var(--ws-dsc-cols, 3) - 1px),
            1fr
        )
    );
    align-items: stretch; /* toutes les cartes d'une ligne a la meme hauteur */
}

/* ===== Carte ===== */
.ws-dsc__card {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: 22px;
    padding: 14px 14px 22px;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ===== Verre depoli (glassmorphisme) : toute la carte sauf l'image =====
   Le fond translucide vient du controle "Teinte du verre"
   (Group_Control_Background). backdrop-filter ne floute que l'arriere-plan
   DERRIERE la carte : l'image, enfant de la carte, reste nette.
   Le flou (glass_blur) et la bordure (glass_border) sont desormais pilotes
   par des controles dedies (section Style "Verre depoli"). */
.ws-dsc-glass-yes .ws-dsc__card {
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
}

/* ===== Passe lumineuse : reflet qui traverse au survol =====
   Pseudo-element en biais qui glisse de gauche a droite. pointer-events
   none -> ne bloque aucun clic. Deux zones possibles : carte entiere ou
   image seulement (selecteur .ws-dsc-sweepz-card / .ws-dsc-sweepz-image). */

/* --- Variante : carte entiere --- */
.ws-dsc-sweep-yes.ws-dsc-sweepz-card .ws-dsc__card {
    overflow: hidden; /* clippe le reflet a la forme de la carte */
}
.ws-dsc-sweep-yes.ws-dsc-sweepz-card .ws-dsc__card::before {
    content: "";
    position: absolute;
    top: 0;
    left: -130%;
    width: 70%;
    height: 100%;
    background: linear-gradient(120deg,
        transparent 0%,
        transparent 30%,
        var(--ws-dsc-sweep, rgba(255, 255, 255, 0.45)) 50%,
        transparent 70%,
        transparent 100%);
    transform: skewX(-18deg);
    pointer-events: none;
    z-index: 5;
    transition: left var(--ws-dsc-sweep-dur, 1s) cubic-bezier(0.65, 0, 0.35, 1);
}
.ws-dsc-sweep-yes.ws-dsc-sweepz-card .ws-dsc__card:hover::before {
    left: 130%;
}

/* --- Variante : image seulement (.ws-dsc__media a deja overflow:hidden) --- */
.ws-dsc-sweep-yes.ws-dsc-sweepz-image .ws-dsc__media::before {
    content: "";
    position: absolute;
    top: 0;
    left: -130%;
    width: 70%;
    height: 100%;
    background: linear-gradient(120deg,
        transparent 0%,
        transparent 30%,
        var(--ws-dsc-sweep, rgba(255, 255, 255, 0.45)) 50%,
        transparent 70%,
        transparent 100%);
    transform: skewX(-18deg);
    pointer-events: none;
    z-index: 3;
    transition: left var(--ws-dsc-sweep-dur, 1s) cubic-bezier(0.65, 0, 0.35, 1);
}
.ws-dsc-sweep-yes.ws-dsc-sweepz-image .ws-dsc__card:hover .ws-dsc__media::before {
    left: 130%;
}

/* ===== Zone image ===== */
.ws-dsc__media {
    position: relative;
    height: 210px;
    border-radius: 14px;
    overflow: hidden; /* clippe le zoom de l'image */
    flex: 0 0 auto;
    /* Defense : certains themes (Astra, Blocksy, OceanWP) posent une bordure
       ou un outline sur les wrappers d'images. On force 0 pour eviter le trait
       gris fin autour de la zone. */
    border: 0 !important;
    outline: 0 !important;
    /* Backface visibility = corrige les artefacts d'antialiasing du
       border-radius sur certains GPU (trace fantome de 1px). */
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    transform: translateZ(0);
}

/* !important sur les dimensions : neutralise le piege theme WP
   img { max-width:100%; height:auto } (MANIFEST 9.13). object-fit /
   object-position SANS !important pour que les controles puissent
   les overrider. */
.ws-dsc__img,
.ws-dsc__media-fallback {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    display: block;
}

.ws-dsc__img {
    object-fit: cover;
    object-position: center center;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    /* Reset agressif des bordures que certains themes posent sur les img */
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    vertical-align: top;
}

.ws-dsc__media-fallback {
    background-color: #eef2f7;
}

/* Defense plugin WebP qui wrap les <img> en <picture> (MANIFEST 9.42) :
   la classe passe sur le <picture>, l'<img> interne perd tout sizing. */
.ws-dsc__img img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover;
    object-position: center center;
    display: block;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

/* Zoom de l'image au survol (active via classe wrapper) */
.ws-dsc-zoom-yes .ws-dsc__card:hover .ws-dsc__img {
    transform: scale(1.07);
}

/* Forme de separation : SVG blanc colle au bas de la zone image, qui
   "decoupe" le bas de l'image. Couleur et hauteur pilotees par CSS vars. */
.ws-dsc__shape {
    position: absolute;
    left: -1px;       /* deborde 1px de chaque cote pour couvrir l'anti-alias
                         des bords gauche/droite du media (border-radius). */
    right: -1px;
    bottom: -1px;     /* deborde 1px en bas pour combler le gap sous-pixel
                         qui laissait apparaitre la photo en gris. */
    height: calc(var(--ws-dsc-shape-h, 38px) + 1px);
    color: var(--ws-dsc-shape-color, #ffffff);
    overflow: hidden;
    line-height: 0;
    /* Hint au navigateur : forcer un rendu propre des arretes */
    shape-rendering: geometricPrecision;
    pointer-events: none;
    z-index: 1;
}
.ws-dsc__shape-svg {
    display: block;
    height: 100%;
    width: var(--ws-dsc-shape-w, 100%);
    position: relative;
    left: 50%;
    transform: translateX(-50%) scaleX(var(--ws-dsc-shape-flip, 1));
    vertical-align: top;          /* tue le baseline gap sous l'inline SVG */
    shape-rendering: geometricPrecision;
}

/* ===== Corps ===== */
.ws-dsc__body {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    /* reserve la place de la pastille qui remonte sur l'image */
    padding-top: calc(var(--ws-dsc-badge-size, 56px) / 2 + 18px);
}

/* ===== Pastille icone ===== */
.ws-dsc__badge {
    position: absolute;
    left: 4px;
    top: calc(var(--ws-dsc-badge-size, 56px) / -2);
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #ffffff;
    color: #ef3e36;
    font-size: 24px;
    line-height: 1;
    z-index: 2;
}
.ws-dsc__badge i {
    line-height: 1;
}
.ws-dsc__badge svg {
    width: 24px;
    height: 24px;
}

/* ----- Mode IMAGE : la pastille contient une <img> au lieu d'une icone ----- */
.ws-dsc__badge--image {
    /* La pastille est deja un flex container centre - on neutralise les
       styles de font-size (utiles uniquement pour les icones). */
    overflow: hidden;       /* clippe l'image au border-radius de la pastille */
}
.ws-dsc__badge--image .ws-dsc__badge-img {
    display: block;
    width: 70%;             /* default - override par le controle badge_image_size */
    height: 70%;
    object-fit: contain;    /* default - override par badge_image_fit */
    object-position: center;
    /* Defense WP theme : neutralise outline / border / max-width sur img */
    max-width: none !important;
    max-height: none !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

/* ===== Titre / description ===== */
.ws-dsc__title {
    color: #0f172a;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.ws-dsc__desc {
    color: #64748b;
    font-size: 14.5px;
    line-height: 1.5;
    margin-top: 10px;
}

/* ===== Accordeons (entre la description et la liste) =====
   position:relative + z-index : passent au-dessus du lien etire de la carte
   pour rester cliquables. Transition d'ouverture en CSS pur (max-height). */
.ws-dsc__accordions {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}

.ws-dsc__accordion {
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 10px;
    overflow: hidden;
    /* Fond transparent par defaut : la couleur visible est celle du
       controle "Fond de l'entete" (Elementor) sur .ws-dsc__accordion-header.
       Si l'user veut un fond global, c'est ce controle. */
    background: transparent;
}

.ws-dsc__accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 12px 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: #0f172a;
    line-height: 1.3;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.ws-dsc__accordion-title {
    flex: 1;
    font-weight: 600;
}

.ws-dsc__accordion-chevron {
    flex-shrink: 0;
    color: #64748b;
    transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}
.ws-dsc__accordion.is-open .ws-dsc__accordion-chevron {
    transform: rotate(180deg);
}

/* max-height : transition CSS pure (transition sur height non fiable,
   cf MANIFEST 9.49b). Borne sup. genereuse qui couvre tous les cas. */
.ws-dsc__accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.ws-dsc__accordion.is-open .ws-dsc__accordion-body {
    max-height: 1500px;
}

.ws-dsc__accordion-content {
    padding: 2px 16px 14px;
    color: #475569;
    font-size: 13.5px;
    line-height: 1.55;
}
.ws-dsc__accordion-content p {
    margin: 0 0 8px;
}
.ws-dsc__accordion-content p:last-child {
    margin-bottom: 0;
}

/* ===== Trait de separation (masque par defaut, affiche via switch) ===== */
.ws-dsc__divider {
    height: 1px;
    background-color: #e2e8f0;
    margin: 18px 0;
    display: none;
}
.ws-dsc-divider-yes .ws-dsc__divider {
    display: block;
}

/* ===== Intro de liste (description courte au-dessus des elements) =====
   Defaut : 8px top (decolle du trait) + 6px bottom (decolle de la liste).
   Tout est surchargable par le controle "Marges autour" dans Style > Liste.
   On utilise les longhand margin-* (pas la shorthand) pour que le controle
   DIMENSIONS d'Elementor puisse les overrider sans conflit de specificite. */
.ws-dsc__list-intro {
    margin-top: 8px;
    margin-right: 0;
    margin-bottom: 6px;
    margin-left: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #475569;
    font-style: italic;
}

/* ===== Liste d'elements ===== */
.ws-dsc__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 18px;
    row-gap: 12px;
}

.ws-dsc__li {
    min-width: 0;
}

/* Element de liste : conteneur flex icone + texte. Rendu <a> si un lien
   est defini (sinon <span>). Devient un vrai bouton des qu'on lui donne
   un fond et une marge interne (section Style > Boutons de liste). */
.ws-dsc__li-inner {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    /* Defense contre les themes WP qui ajoutent une bordure / outline sur
       les <a> au survol : on neutralise tout effet de contour. */
    border: 0 !important;
    outline: 0 !important;
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                background-color 0.25s ease,
                box-shadow 0.25s ease,
                color 0.2s ease;
}
/* Memes defenses sur les etats actif/focus/hover (certains themes posent
   un underline ou un outline epais au survol). */
.ws-dsc__li-inner:hover,
.ws-dsc__li-inner:focus,
.ws-dsc__li-inner:active,
.ws-dsc__li-inner:focus-visible {
    border: 0 !important;
    outline: 0 !important;
    text-decoration: none !important;
}

/* Element cliquable : passe au-dessus du lien etire de la carte
   (.ws-dsc__link::after, z-index 1) pour rester cliquable. */
.ws-dsc__li-inner--link {
    position: relative;
    z-index: 2;
    cursor: pointer;
}

.ws-dsc__li-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ef3e36;
    font-size: 16px;
    line-height: 1.4;
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.ws-dsc__li-icon svg {
    width: 16px;
    height: 16px;
}

.ws-dsc__li-text {
    color: #475569;
    font-size: 13.5px;
    line-height: 1.4;
}

/* ===== Effet au survol des boutons de liste (classe sur le wrapper) ===== */
.ws-dsc-fbfx-lift .ws-dsc__li-inner:hover {
    transform: translateY(-3px);
}
.ws-dsc-fbfx-scale .ws-dsc__li-inner:hover {
    transform: scale(1.04);
}
.ws-dsc-fbfx-slide .ws-dsc__li-inner:hover {
    transform: translateX(4px);
}
.ws-dsc-fbfx-glow .ws-dsc__li-inner:hover {
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.16);
}
.ws-dsc-fbfx-icon .ws-dsc__li-inner:hover .ws-dsc__li-icon {
    transform: translateX(4px);
}

/* ===== Lien CTA ===== */
.ws-dsc__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto; /* colle le lien en bas de la carte */
    padding-top: 18px;
    color: #ef3e36;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

/* Lien etire : rend toute la carte cliquable */
.ws-dsc__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.ws-dsc__link-text {
    position: relative;
}

.ws-dsc__link-arrow {
    display: inline-flex;
    font-size: 1.05em;
}

/* ============================================================
   MODE CADRE (tableau de cellules) - actif via .ws-dsc-list-frame
   ============================================================ */

/* En mode cadre le trait de separation est inutile : le cadre borde deja */
.ws-dsc-list-frame .ws-dsc__divider {
    display: none !important;
}

/* ===== DISTANCE AVEC LE HAUT ============================================
   Variable unique --ws-dsc-list-spacing-top posee par le slider Elementor.
   Appliquee a l'element pertinent selon le mode :
   - Mode SIMPLE + trait visible : sur le trait (margin-top)
   - Mode SIMPLE sans trait        : sur la liste (margin-top)
   - Mode CADRE (liste tableau)    : sur le wrap (margin-top)
   La regle "frame > wrap" l'emporte naturellement sur la "simple > list"
   grace a la specificite de classe supplementaire. */
.ws-dsc__divider {
    margin-top: var(--ws-dsc-list-spacing-top, 18px);
    margin-bottom: 0;
}
.ws-dsc__list {
    /* En simple SANS trait : la liste est juste sous la description, on
       reproduit la distance demandee. En simple AVEC trait, c'est le trait
       qui porte la distance et la liste reste collee a lui (margin 0). */
    margin-top: var(--ws-dsc-list-spacing-top, 18px);
}
.ws-dsc-divider-yes .ws-dsc__list {
    margin-top: 0;  /* le trait a deja la distance */
}
.ws-dsc-list-frame .ws-dsc__list-wrap {
    margin-top: var(--ws-dsc-list-spacing-top, 18px);
    background-color: #e2e8f0;        /* fond gris = sera revele uniquement
                                          dans les gaps de 1px entre cellules */
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
}
/* En mode cadre, la liste interne ne porte AUCUNE marge (le wrap a tout) */
.ws-dsc-list-frame .ws-dsc__list {
    margin-top: 0 !important;
}
.ws-dsc-list-frame .ws-dsc__list {
    gap: 1px !important;
    background-color: transparent;    /* le bg gris vient du wrap parent */
}

/* Une cellule du cadre */
.ws-dsc-list-frame .ws-dsc__li {
    background-color: #ffffff;
    padding: 14px;
    transition: background 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                color 0.2s ease;
}

/* En mode cadre, l'intro est rendue comme une SIMPLE CELLULE interne du wrap.
   Pas de bordure / radius / ombre propre : tout est gere par .ws-dsc__list-wrap.
   Le bg blanc + padding 14px + ligne 1px de separation viennent du systeme du
   wrap (intro suivi du list, separes visuellement par 1px de bg gris). */
.ws-dsc-list-frame .ws-dsc__list-intro {
    background-color: #ffffff;
    padding: 14px;
    margin: 0 0 1px 0 !important;     /* 1px de gap = trait separateur (couleur
                                          du bg gris du wrap qui passe a travers) */
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-style: normal;
}

/* Element seul d'une liste impaire : occupe toute la largeur du cadre */
.ws-dsc-list-frame .ws-dsc__li--wide {
    grid-column: 1 / -1;
}

/* --- Effets au survol des cellules (scopes au mode cadre) --- */

/* Teinte : la cellule change de couleur de fond */
.ws-dsc-list-frame.ws-dsc-fxh-tint .ws-dsc__li:hover {
    background: var(--ws-dsc-fh, #f1f5f9);
}

/* Accent : la cellule se remplit, texte et icone passent en couleur claire */
.ws-dsc-list-frame.ws-dsc-fxh-accent .ws-dsc__li:hover {
    background: var(--ws-dsc-fh, #ef3e36);
}
.ws-dsc-list-frame.ws-dsc-fxh-accent .ws-dsc__li:hover .ws-dsc__li-text,
.ws-dsc-list-frame.ws-dsc-fxh-accent .ws-dsc__li:hover .ws-dsc__li-icon {
    color: var(--ws-dsc-fht, #ffffff);
}

/* Zoom : la cellule s'agrandit legerement et passe au premier plan */
.ws-dsc-list-frame.ws-dsc-fxh-zoom .ws-dsc__li:hover {
    transform: scale(1.05);
    z-index: 1;
}

/* Ombre : relief interieur sur la cellule */
.ws-dsc-list-frame.ws-dsc-fxh-ombre .ws-dsc__li:hover {
    box-shadow: inset 0 0 0 1.5px var(--ws-dsc-fh, rgba(15, 23, 42, 0.18)),
                inset 0 -12px 20px -12px rgba(15, 23, 42, 0.30);
}

/* ===== Accessibilite : reduction des animations ===== */
@media (prefers-reduced-motion: reduce) {
    .ws-dsc__card,
    .ws-dsc__img,
    .ws-dsc__link-arrow,
    .ws-dsc__li,
    .ws-dsc__li-inner,
    .ws-dsc__li-icon {
        transition: none !important;
    }
    .ws-dsc__li-inner:hover,
    .ws-dsc__li-inner:hover .ws-dsc__li-icon {
        transform: none !important;
    }
    .ws-dsc-sweep-yes .ws-dsc__card::before,
    .ws-dsc-sweep-yes .ws-dsc__media::before {
        transition: none !important;
    }
    .ws-dsc__accordion-body,
    .ws-dsc__accordion-chevron {
        transition: none !important;
    }
}