/**
 * WS Booster - Carte Profil
 * 3 variantes : clean / glass / full
 */

/* === GRID === */
.ws-pc__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    width: 100%;
}

/* === CARD BASE === */
.ws-pc__card {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.ws-pc__media {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.ws-pc__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Overlay sur image (Group_Control_Background applique le bg via Elementor,
   on pre-pose juste le pseudo ::before pour que le selector cible un element
   reel). Sans content/inset le ::before est vide -> overlay invisible. */
.ws-pc__media::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.ws-pc__content {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ws-pc__name {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* CRITIQUE : couleur par defaut HARDCODE. Sans ca, le theme WordPress
       (Blocksy, Astra, etc.) applique sa propre couleur sur les h3 et le
       contrôle name_color d'Elementor (qui peut etre vide si l'utilisateur
       n'a pas configure son color kit) ne s'applique pas -> heritage theme.
       Reference bug live test v3.29.0 : rgb(110,193,228) bleu Blocksy. */
    color: #0f172a;
}

.ws-pc__badge {
    display: inline-flex;
    align-items: center;
    color: #10b981;
    flex-shrink: 0;
}

.ws-pc__badge svg {
    width: 18px;
    height: 18px;
}

.ws-pc__bio {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #475569;
}

/* === STATS === */
.ws-pc__stats {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 4px 0;
}

.ws-pc__stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 12px;
    border-left: 1px solid rgba(148, 163, 184, 0.25);
    min-width: 0;
}

.ws-pc__stat:first-child {
    padding-left: 0;
    border-left: none;
}

.ws-pc__stat:last-child {
    padding-right: 0;
}

.ws-pc__stat-top {
    display: flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
}

.ws-pc__stat-icon {
    display: inline-flex;
    align-items: center;
    color: #f59e0b;
}

.ws-pc__stat-icon svg,
.ws-pc__stat-icon i {
    width: 14px;
    height: 14px;
    font-size: 14px;
}

.ws-pc__stat-value {
    font-weight: 700;
    font-size: 15px;
    white-space: nowrap;
    /* Defaut hardcode (heritage theme sinon) */
    color: #0f172a;
}

.ws-pc__stat-label {
    font-size: 12px;
    opacity: 0.7;
    line-height: 1.2;
    /* Defaut hardcode (heritage theme sinon) */
    color: #475569;
}

/* === ACTIONS === */
.ws-pc__actions {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.ws-pc__cta {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: #0f172a;
    color: #ffffff;
    border-radius: 100px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: background-color 0.25s ease, transform 0.2s ease;
    line-height: 1;
    /* Vars defaults pour les animations hover */
    --ws-cta-anim-speed: 0.4s;
    --ws-cta-anim-accent: rgba(255, 255, 255, 0.25);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.ws-pc__cta:hover {
    background: #1e293b;
}

/* === ANIMATIONS HOVER DU BOUTON CTA (CSS pur, zero JS) ===
   Activees via [data-ws-cta-anim="..."]. Transition speed via --ws-cta-anim-speed.
   Couleur d'accent via --ws-cta-anim-accent (pour shine/border-pop/fill).
   ============================================================ */

/* --- Lift : decollage vertical + shadow */
.ws-pc__cta[data-ws-cta-anim="lift"] {
    transition: transform var(--ws-cta-anim-speed) cubic-bezier(.2,.7,.3,1.4),
                box-shadow var(--ws-cta-anim-speed) ease,
                background-color var(--ws-cta-anim-speed) ease;
}
.ws-pc__cta[data-ws-cta-anim="lift"]:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25);
}

/* --- Pulse : pulsation continue au hover */
@keyframes ws-cta-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}
.ws-pc__cta[data-ws-cta-anim="pulse"]:hover {
    animation: ws-cta-pulse var(--ws-cta-anim-speed) ease-in-out infinite;
}

/* --- Shine : reflet diagonal qui traverse */
.ws-pc__cta[data-ws-cta-anim="shine"]::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(110deg, transparent 30%, var(--ws-cta-anim-accent) 50%, transparent 70%);
    transform: skewX(-20deg);
    transition: left var(--ws-cta-anim-speed) ease;
    pointer-events: none;
    z-index: 1;
}
.ws-pc__cta[data-ws-cta-anim="shine"]:hover::after {
    left: 120%;
}

/* --- Border pop : ring exterieur qui s'elargit */
.ws-pc__cta[data-ws-cta-anim="border-pop"] {
    overflow: visible;
    box-shadow: 0 0 0 0 var(--ws-cta-anim-accent);
    transition: box-shadow var(--ws-cta-anim-speed) ease,
                background-color var(--ws-cta-anim-speed) ease;
}
.ws-pc__cta[data-ws-cta-anim="border-pop"]:hover {
    box-shadow: 0 0 0 6px var(--ws-cta-anim-accent);
}

/* --- Arrow slide : icone glisse a droite (necessite icone presente) */
.ws-pc__cta[data-ws-cta-anim="arrow-slide"] .ws-pc__cta-icon {
    transition: transform var(--ws-cta-anim-speed) cubic-bezier(.2,.7,.3,1.4);
}
.ws-pc__cta[data-ws-cta-anim="arrow-slide"]:hover .ws-pc__cta-icon {
    transform: translateX(6px);
}
.ws-pc__cta[data-ws-cta-anim="arrow-slide"] .ws-pc__cta-text {
    transition: transform var(--ws-cta-anim-speed) cubic-bezier(.2,.7,.3,1.4);
}
.ws-pc__cta[data-ws-cta-anim="arrow-slide"]:hover .ws-pc__cta-text {
    transform: translateX(-2px);
}

/* --- Magnetic : zoom subtle (effet d'attraction) */
.ws-pc__cta[data-ws-cta-anim="magnetic"] {
    transition: transform var(--ws-cta-anim-speed) cubic-bezier(.34,1.56,.64,1),
                background-color var(--ws-cta-anim-speed) ease;
}
.ws-pc__cta[data-ws-cta-anim="magnetic"]:hover {
    transform: scale(1.06);
}

/* --- Skew : leger inclinaison + decalage */
.ws-pc__cta[data-ws-cta-anim="skew"] {
    transition: transform var(--ws-cta-anim-speed) cubic-bezier(.2,.7,.3,1.4),
                background-color var(--ws-cta-anim-speed) ease;
}
.ws-pc__cta[data-ws-cta-anim="skew"]:hover {
    transform: skewX(-4deg) translateX(2px);
}

/* --- Fill up : vague de couleur monte du bas */
.ws-pc__cta[data-ws-cta-anim="fill-up"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--ws-cta-anim-accent);
    transform: translateY(100%);
    transition: transform var(--ws-cta-anim-speed) ease;
    pointer-events: none;
    z-index: -1;
}
.ws-pc__cta[data-ws-cta-anim="fill-up"]:hover::before {
    transform: translateY(0);
}
.ws-pc__cta[data-ws-cta-anim="fill-up"] > * {
    position: relative;
    z-index: 1;
}

/* --- Fill down : vague de couleur descend du haut */
.ws-pc__cta[data-ws-cta-anim="fill-down"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--ws-cta-anim-accent);
    transform: translateY(-100%);
    transition: transform var(--ws-cta-anim-speed) ease;
    pointer-events: none;
    z-index: -1;
}
.ws-pc__cta[data-ws-cta-anim="fill-down"]:hover::before {
    transform: translateY(0);
}
.ws-pc__cta[data-ws-cta-anim="fill-down"] > * {
    position: relative;
    z-index: 1;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .ws-pc__cta[data-ws-cta-anim],
    .ws-pc__cta[data-ws-cta-anim]:hover,
    .ws-pc__cta[data-ws-cta-anim]::before,
    .ws-pc__cta[data-ws-cta-anim]::after {
        animation: none !important;
        transform: none !important;
        transition: none !important;
    }
}

.ws-pc__cta-icon {
    display: inline-flex;
    align-items: center;
}

.ws-pc__cta-icon svg,
.ws-pc__cta-icon i {
    width: 16px;
    height: 16px;
    font-size: 14px;
}

.ws-pc__secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    flex-shrink: 0;
    padding: 0;
    background: rgba(15, 23, 42, 0.08);
    color: #0f172a;
    border: 0;
    border-radius: 100px;
    cursor: pointer;
    transition: background-color 0.25s ease;
}

.ws-pc__secondary:hover {
    background: rgba(15, 23, 42, 0.16);
}

.ws-pc__secondary svg,
.ws-pc__secondary i {
    width: 16px;
    height: 16px;
    font-size: 14px;
}

/* ============================================================
   VARIANTE CLEAN : photo en haut + content card blanche dessous
   ============================================================ */
.ws-pc--clean .ws-pc__card {
    background: #ffffff;
    display: flex;
    flex-direction: column;
}

.ws-pc--clean .ws-pc__content {
    padding: 20px;
}

.ws-pc--clean .ws-pc__name {
    color: #0f172a;
}

/* ============================================================
   VISUAL WRAPPER (glass/full uniquement)
   Encapsule media + content overlay AVEC l'aspect-ratio.
   Les accordeons sont rendus EN DEHORS de ce wrapper, donc dans
   le flux naturel de la card, ce qui permet a la card de grossir
   vers le bas quand un accordeon s'ouvre (au lieu d'agrandir le
   .ws-pc__content absolu vers le HAUT et de cacher la photo).
   ============================================================ */
.ws-pc--glass .ws-pc__visual,
.ws-pc--full .ws-pc__visual {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* aspect-ratio injecte inline via le PHP */
}

/* ============================================================
   VARIANTE GLASS : photo plein cadre + overlay glassmorphism
   ============================================================ */
.ws-pc--glass .ws-pc__card {
    isolation: isolate;
}

.ws-pc--glass .ws-pc__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Verre depoli : fond verre clair par defaut + texte fonce lisible.
   Le fond, le flou et la bordure sont surchargeables via les controles
   dedies (section Style "Verre depoli"). */
.ws-pc--glass .ws-pc__content {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.34);
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 14px;
    overflow: hidden;
    color: #0f172a;
}

.ws-pc--glass .ws-pc__bio {
    color: rgba(15, 23, 42, 0.78);
}

.ws-pc--glass .ws-pc__stat {
    border-left-color: rgba(15, 23, 42, 0.18);
}

.ws-pc--glass .ws-pc__cta {
    background: #0f172a;
    color: #ffffff;
}

.ws-pc--glass .ws-pc__cta:hover {
    background: rgba(15, 23, 42, 0.85);
}

.ws-pc--glass .ws-pc__secondary {
    background: rgba(15, 23, 42, 0.85);
    color: #ffffff;
}

.ws-pc--glass .ws-pc__secondary:hover {
    background: #0f172a;
}

/* ============================================================
   VERRE DEPOLI : reflet lumineux (glossy) qui traverse au survol
   Active par le controle "Reflet lumineux" (classe ws-pc-glossy-yes).
   Pseudo-element ::before = bande diagonale blanche translucide,
   posee hors-cadre, qui glisse en diagonale au survol de la card.
   pointer-events:none -> ne bloque aucun clic. overflow:hidden est
   deja pose sur .ws-pc__content -> la bande est clippee au verre.
   ============================================================ */
.ws-pc-glossy-yes.ws-pc--glass .ws-pc__content::before {
    content: "";
    position: absolute;
    top: -60%;
    left: -160%;
    width: 70%;
    height: 220%;
    background: linear-gradient(
        100deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(18deg);
    pointer-events: none;
    z-index: 0;
    transition: left 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Le reflet ne doit pas masquer le texte : les enfants directs du
   contenu passent au-dessus du pseudo (z-index 0). */
.ws-pc-glossy-yes.ws-pc--glass .ws-pc__content > * {
    position: relative;
    z-index: 1;
}

.ws-pc-glossy-yes.ws-pc--glass .ws-pc__card:hover .ws-pc__content::before {
    left: 160%;
}

@media (prefers-reduced-motion: reduce) {
    .ws-pc-glossy-yes.ws-pc--glass .ws-pc__content::before {
        transition: none;
    }
}

/* ============================================================
   VARIANTE FULL : photo plein cadre + gradient sombre + texte blanc
   ============================================================ */
.ws-pc--full .ws-pc__card {
    isolation: isolate;
    color: #ffffff;
}

.ws-pc--full .ws-pc__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.ws-pc--full .ws-pc__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 30%, rgba(0, 0, 0, 0.85) 100%);
    pointer-events: none;
}

.ws-pc--full .ws-pc__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px;
}

.ws-pc--full .ws-pc__bio {
    color: rgba(255, 255, 255, 0.85);
}

.ws-pc--full .ws-pc__stat {
    border-left-color: rgba(255, 255, 255, 0.2);
}

.ws-pc--full .ws-pc__cta {
    background: #ffffff;
    color: #0f172a;
}

.ws-pc--full .ws-pc__cta:hover {
    background: rgba(255, 255, 255, 0.85);
}

.ws-pc--full .ws-pc__secondary {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.ws-pc--full .ws-pc__secondary:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .ws-pc__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .ws-pc__grid {
        grid-template-columns: 1fr;
    }
    .ws-pc--glass .ws-pc__content,
    .ws-pc--full .ws-pc__content {
        padding: 14px;
    }
    .ws-pc__name {
        font-size: 16px;
    }
}

/* ============================================================
   FIX glass/full : aspect-ratio sur la card (style inline)
   ============================================================ */
.ws-pc--glass .ws-pc__media,
.ws-pc--full .ws-pc__media {
    height: 100%;
}

/* === BORDURE LUMINEUSE PAR CARD ===
   Parametree via 5 CSS vars exposees a Elementor (section "Bordure lumineuse"):
   --ws-pc-glow         : couleur (par profil, p_glow_color)
   --ws-pc-glow-ring    : epaisseur contour (defaut 1px)
   --ws-pc-glow-blur    : diffusion halo (defaut 24px)
   --ws-pc-glow-spread  : etalement halo (defaut -2px)
   --ws-pc-glow-ring-h  : epaisseur contour hover (defaut 2px)
   --ws-pc-glow-blur-h  : diffusion halo hover (defaut 36px)
   --ws-pc-glow-transition : vitesse transition (defaut 0.3s)
*/
.ws-pc__card--glow {
    --ws-pc-glow: #6366f1;
    --ws-pc-glow-ring: 1px;
    --ws-pc-glow-blur: 24px;
    --ws-pc-glow-spread: -2px;
    --ws-pc-glow-ring-h: 2px;
    --ws-pc-glow-blur-h: 36px;
    --ws-pc-glow-transition: 0.3s;
    /* !important pour passer outre le Group_Control_Box_Shadow card_shadow
       qui a une specificite plus haute via .elementor-element-{id} (0,3,0).
       Sans ca, le glow est invisible quand l'utilisateur configure une ombre
       card_shadow (qui a un defaut). Verifie en live test v3.29.0. */
    box-shadow:
        0 0 0 var(--ws-pc-glow-ring) var(--ws-pc-glow),
        0 0 var(--ws-pc-glow-blur) var(--ws-pc-glow-spread) var(--ws-pc-glow) !important;
    transition: box-shadow var(--ws-pc-glow-transition) ease, transform var(--ws-pc-glow-transition) ease;
}
.ws-pc__card--glow:hover {
    box-shadow:
        0 0 0 var(--ws-pc-glow-ring-h) var(--ws-pc-glow),
        0 0 var(--ws-pc-glow-blur-h) var(--ws-pc-glow-spread) var(--ws-pc-glow) !important;
}

/* === PASSE LUMINEUSE (light sweep) === */
.ws-pc__card--sweep {
    --ws-pc-sweep: rgba(255,255,255,0.45);
    --ws-pc-sweep-dur: 1s;
}
.ws-pc__card--sweep .ws-pc__media {
    position: relative;
    overflow: hidden;
}
.ws-pc__card--sweep .ws-pc__media::after {
    content: "";
    position: absolute;
    top: 0;
    left: -130%;
    width: 70%;
    height: 100%;
    background: linear-gradient(120deg,
        transparent 0%,
        transparent 30%,
        var(--ws-pc-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-pc-sweep-dur, 1s) cubic-bezier(0.65,0,0.35,1);
}
.ws-pc__card--sweep:hover .ws-pc__media::after {
    left: 130%;
}

/* === ZOOM IMAGE AU HOVER === */
.ws-pc-zoom-yes .ws-pc__media img {
    transition: transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.ws-pc-zoom-yes .ws-pc__card:hover .ws-pc__media img {
    transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
    .ws-pc__card--sweep .ws-pc__media::after,
    .ws-pc-zoom-yes .ws-pc__media img {
        transition: none !important;
    }
}

/* ==========================================================================
   Accordeons sous la bio
   Animation slide smooth via JS qui pose height = scrollHeight px puis 'auto'.
   ========================================================================== */

.ws-pc__accordions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}

.ws-pc__accordion {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.02);
}

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

.ws-pc__accordion-header:hover {
    background: rgba(0, 0, 0, 0.04);
}

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

.ws-pc__accordion-chevron {
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}

.ws-pc__accordion.is-open .ws-pc__accordion-chevron {
    transform: rotate(180deg);
}

/* Pattern max-height (au lieu de height) pour la transition d'ouverture.
   La transition CSS sur height a un bug observe en v3.29.1 : computed reste
   a 0px meme apres avoir set inline a Npx (transition mal "kickee"), peu
   importe les force-reflow. max-height est interpolable correctement et
   permet une transition CSS pure (zero JS pour l'animation). On utilise une
   borne sup. genereuse (1500px) qui couvre tous les cas d'usage realistes. */
.ws-pc__accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.ws-pc__accordion.is-open .ws-pc__accordion-body {
    max-height: 1500px;
}

.ws-pc__accordion-content {
    padding: 4px 16px 14px;
    font-size: 0.92em;
    line-height: 1.55;
}

.ws-pc__accordion-content p:first-child { margin-top: 0; }
.ws-pc__accordion-content p:last-child  { margin-bottom: 0; }

/* Variant clean / glass : adapte la bordure et le fond pour rester coherent */
.ws-pc--clean .ws-pc__accordion {
    border-color: rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.5);
}
.ws-pc--glass .ws-pc__accordion {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
}

/* Glass / Full : les accordeons sont en DEHORS du .ws-pc__visual (dans le
   flux naturel de la card, sous la photo). On les style pour qu'ils
   restent visuellement coherents avec la card. */
.ws-pc--glass .ws-pc__accordions,
.ws-pc--full .ws-pc__accordions {
    margin-top: 0;
    padding: 12px 12px 0;
    background: rgba(20, 20, 20, 0.92);
    color: #fff;
}
.ws-pc--glass .ws-pc__accordions .ws-pc__accordion,
.ws-pc--full .ws-pc__accordions .ws-pc__accordion {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.06);
}
.ws-pc--glass .ws-pc__accordion-header:hover,
.ws-pc--full .ws-pc__accordion-header:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Glass / Full + accordeons : le bloc actions est aussi sorti de l'overlay
   et place SOUS les accordeons (ordre : photo > accordeons > bouton).
   On le style avec le meme fond sombre pour qu'il forme visuellement un
   panneau cohenent avec les accordeons.
   Le selecteur `.ws-pc__visual ~ .ws-pc__actions` cible uniquement les
   .ws-pc__actions qui sont SOEURS de .ws-pc__visual (donc en dehors de
   l'overlay). Les .ws-pc__actions DANS .ws-pc__content (clean, ou
   glass/full sans accordeon) ne sont pas affectes. */
.ws-pc--glass .ws-pc__visual ~ .ws-pc__actions,
.ws-pc--full .ws-pc__visual ~ .ws-pc__actions {
    padding: 12px;
    background: rgba(20, 20, 20, 0.92);
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .ws-pc__accordion-body,
    .ws-pc__accordion-chevron {
        transition: none !important;
    }
}

/* ==========================================================================
   Bouton etendu : wrapper avec alignement horizontal du trigger.
   L'alignement (justify-content) est applique par Elementor via le controle
   responsive p_em_align (selectors cible {{CURRENT_ITEM}} .ws-pc__em-wrap).
   Elementor genere les media queries avec SES breakpoints reels -> responsive
   natif, plus de breakpoints hardcodes.

   Valeurs justify-content : flex-start / center / flex-end / stretch.
   - stretch (= "Etire") : le .ws-em (flex item width auto) est etire a 100%
     par justify-content:stretch, et le trigger remplit le .ws-em.
   ========================================================================== */
.ws-pc__em-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
    justify-content: flex-start;
}
/* Le trigger remplit le .ws-em UNIQUEMENT a l'etat ferme :
   - mode normal -> .ws-em est a largeur du contenu, trigger = contenu
   - mode "Etire" (justify-content:stretch sur le wrap) -> .ws-em flex item
     auto est etire a pleine largeur, trigger = pleine largeur
   A l'OUVERTURE, le JS pose une largeur explicite sur .ws-em pour
   l'expansion : le selecteur :not(.is-open) desactive alors le width:100%
   pour ne pas perturber le calcul d'expansion du menu. */
.ws-pc__em-wrap .ws-em:not(.is-open) .ws-em__trigger {
    width: 100%;
}

/* Texte/contenu du trigger toujours centre. Sans effet visible quand le
   trigger fait la largeur de son contenu (gauche/centre/droite), mais en
   mode "Etire" (trigger pleine largeur) ca centre bien le texte au lieu de
   le coller a gauche. */
.ws-pc__em-wrap .ws-em__trigger {
    justify-content: center;
}

/* Defauts lisibles du bouton etendu dans Carte Profil.
   Sans ca, le trigger herite du CSS expand-menu autonome (fond gris clair)
   alors que la couleur texte par defaut = blanc -> texte blanc sur gris
   clair = illisible (bug observe en live v3.30.0).
   Trigger = fonce / texte blanc. Sous-boutons = clairs / texte fonce.
   L'utilisateur surcharge tout via la section Style "Bouton etendu". */
.ws-pc__em-wrap .ws-em__pill {
    background-color: #f1f5f9;
    color: #0f172a;
}
.ws-pc__em-wrap .ws-em__trigger {
    background-color: #0f172a;
    color: #ffffff;
}