/* ============================================================================
   FRANCK NOS SERVICES
   Carrousel de cards (défilement horizontal : auto-scroll, drag, flèches,
   scroll-snap). N cards visibles par vue (2/3/4), wrap interdit.
   Préfixes :
     - BEM : franck-nos-services
     - Variables CSS : --fk-*
   ============================================================================ */

/* =====================  VARIABLES PAR DÉFAUT (fallbacks)  ===================== */
.franck-nos-services {
    /* Layout */
    --fk-density-width: 86%;
    --fk-header-gap: 38px;
    --fk-content-padding-x: 0px;
    --fk-cols: 3;
    --fk-gap: 24px;

    /* Entête */
    --fk-eyebrow-align: left;
    --fk-eyebrow-color: var(--theme-eyebrow-color, #7c7c7c);
    --fk-eyebrow-size: var(--theme-eyebrow-size, 13px);
    --fk-title-align: left;
    --fk-title-color: var(--theme-section-title-color, #2c2c2c);
    --fk-title-size: var(--theme-title-size, 42px);
    --fk-subtitle-align: left;
    --fk-subtitle-color: var(--theme-section-subtitle-color, #2c2c2c);
    --fk-subtitle-size: var(--theme-subtitle-size, 18px);

    /* Bouton section */
    --fk-button-align: left;
    --fk-button-bg: var(--theme-button-bg, #1cb359);
    --fk-button-color: var(--theme-button-text-color, #ffffff);
    --fk-button-bg-hover: var(--theme-button-bg-hover, #007838);
    --fk-button-color-hover: var(--theme-button-text-hover, #ffffff);
    --fk-button-size: var(--theme-button-font-size, 15px);

    /* Cards */
    --fk-card-bg: var(--theme-card-background, #f1f5ff);
    --fk-card-radius: var(--theme-card-radius, 18px);
    --fk-image-radius: var(--fk-card-radius, 18px);
    --fk-card-height: auto;
    --fk-card-image-height: auto;
    --fk-card-image-fit: cover;
    --fk-card-media-bg: var(--theme-card-media-bg, rgba(0, 120, 56, .14));
    --fk-card-shadow: none;
    --fk-card-shadow-hover: none;
    --fk-card-body-padding: 22px 22px 26px;
    --fk-card-title-color: var(--theme-block-title-color, #2c2c2c);
    --fk-card-title-size: 21px;
    --fk-card-title-align: left;
    --fk-card-text-color: var(--theme-block-text-color, #2c2c2c);
    --fk-card-text-size: 15px;
    --fk-card-text-align: left;

    /* Contour + liseré hover des cards */
    --fk-card-border-color: var(--theme-card-border-color, transparent);
    --fk-card-border-width: 0px;
    --fk-card-hover-border-color: var(--theme-card-border-hover, transparent);
    --fk-card-hover-border-width: 0px;

    /* Décalage image par card (calage premium) */
    --fk-card-img-offset-x: 0px;
    --fk-card-img-offset-y: 0px;

    /* Flèches */
    --fk-arrow-color: var(--theme-button-text-color, #0f172a);
    --fk-arrow-bg: var(--theme-button-bg, #ffffff);
    --fk-arrow-bg-hover: var(--theme-button-bg-hover, #0f172a);
    --fk-arrow-color-hover: var(--theme-button-text-hover, #ffffff);

    /* Animation */
    --fk-animation-delay: 0ms;
    --fk-animation-duration: 600ms;
}

/* =====================  WRAPPER  ===================== */
.franck-nos-services-wrapper {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

/* Full width : sort du container parent */
.franck-nos-services-wrapper--full {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
}

/* =====================  SECTION  ===================== */
.franck-nos-services {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    border-radius: var(--theme-section-radius, 18px);
    overflow: hidden;
    font-family: var(--theme-text-font, 'Work Sans', sans-serif);
    color: var(--theme-text-color, #212221);
}

/* En container, on arrondit le bloc comme la référence */
.container > .franck-nos-services-wrapper .franck-nos-services,
.franck-nos-services-wrapper--container .franck-nos-services {
    border-radius: var(--theme-section-radius, 18px);
}

/* =====================  INNER (densité)  ===================== */
.franck-nos-services__inner {
    position: relative;
    z-index: 1;
    width: var(--fk-density-width, 86%);
    max-width: 1680px;
    margin: 0 auto;
    padding-left: var(--fk-content-padding-x, 0);
    padding-right: var(--fk-content-padding-x, 0);
    box-sizing: border-box;
}

/* FNS_MAXWIDTH_COMPACT_NORMAL : plafonds alignés sur les paliers canoniques
   (cf. franck-cards-static), au lieu d'un plafond unique de 1680px partagé
   par compact/normal/large qui les rendait visuellement identiques sur
   écran large. */
.franck-nos-services--compact .franck-nos-services__inner { max-width: 1140px; }
.franck-nos-services--normal  .franck-nos-services__inner { max-width: 1320px; }
/* pas de plafond sur large/xxl : comportement "presque plein écran" voulu */
.franck-nos-services--large   .franck-nos-services__inner { max-width: none; }
.franck-nos-services--xxl     .franck-nos-services__inner { max-width: none; width: 100%; }

/* =====================  HEADER  ===================== */
.franck-nos-services__header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: var(--fk-header-gap, 38px);
}

/* Badge en forme de pilule (convention cards-static : display:table +
   marge calculée --fk-eyebrow-margin + align-self fixe, header en
   display:flex column avec gap). --fk-eyebrow-align pilote uniquement
   l'alignement du TEXTE à l'intérieur de la pilule (clé legacy émise par
   le Twig depuis cfg.eyebrowAlign) — coexiste sans conflit avec la marge,
   qui pilote la POSITION de la pilule elle-même. Le contour retombe sur
   le vert du thème si aucune couleur n'est choisie et qu'aucun mode
   'Aucun' n'est actif ; le fond retombe sur transparent. */
.franck-nos-services__eyebrow {
    display: table;
    margin: var(--fk-eyebrow-margin, 0);
    padding: 4px 14px;
    border-radius: var(--fk-eyebrow-radius, 999px);
    border-width: var(--fk-eyebrow-border-width, 1px);
    border-style: solid;
    border-color: var(--fk-eyebrow-border-color, var(--theme-button-bg, var(--maurin-primary, #1cb359)));
    background: var(--fk-eyebrow-bg, transparent);
    align-self: flex-start;
    text-align: var(--fk-eyebrow-align, left);
    color: var(--fk-eyebrow-color, var(--theme-eyebrow-color, #7c7c7c));
    font-size: var(--fk-eyebrow-size, var(--theme-eyebrow-size, 13px));
    font-weight: var(--theme-eyebrow-weight, 700);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.franck-nos-services__title {
    margin: 0;
    text-align: var(--fk-title-align, left);
    color: var(--fk-title-color);
    font-size: var(--fk-title-size, var(--theme-title-size, 42px));
    font-family: var(--theme-title-font, 'Jost', sans-serif);
    font-weight: var(--theme-title-weight, 600);
    line-height: 1.15;
}

.franck-nos-services__subtitle {
    margin: 0;
    text-align: var(--fk-subtitle-align, left);
    color: var(--fk-subtitle-color);
    font-size: var(--fk-subtitle-size, var(--theme-subtitle-size, 18px));
    line-height: 1.45;
    font-weight: var(--theme-subtitle-weight, 500);
}

.franck-nos-services__section-text {
    text-align: var(--fk-text-align, left);
    color: var(--fk-section-text-color, var(--theme-section-text-color, #2c2c2c));
    font-size: var(--fk-section-text-size, var(--theme-text-size, 16px));
    line-height: 1.55;
}
.franck-nos-services__section-text > *:first-child { margin-top: 0; }
.franck-nos-services__section-text > *:last-child  { margin-bottom: 0; }

/* =====================  BOUTON SECTION  ===================== */
/* Copié depuis le fichier SERVI public/maurin/assets/css/franck-cards-static.css
   (pas la copie _context/, qui diverge de 4 lignes) — cf. franck-nos-services,
   passe B famille 2. Les 2 sélecteurs [style*="--fk-button-align: ..."] sont
   déjà inertes dans la référence elle-même (le renderer/Twig n'émettent jamais
   d'espace après les deux-points dans le style inline) : reproduits à
   l'identique pour rester fidèle au patron copié, pas pour corriger un défaut
   hors du périmètre de cette passe. */
.franck-nos-services__button-wrap {
    display: flex;
    justify-content: var(--fk-button-align, flex-start);
}
.franck-nos-services__button-wrap[style*="center"],
.franck-nos-services__header[style*="center"] .franck-nos-services__button-wrap { justify-content: center; }

/* alignement explicite via class */
.franck-nos-services__inner[style*="--fk-button-align: center"] .franck-nos-services__button-wrap { justify-content: center; }
.franck-nos-services__inner[style*="--fk-button-align: right"]  .franck-nos-services__button-wrap { justify-content: flex-end; }

.franck-nos-services__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--theme-button-height, 48px);
    padding: 0 var(--theme-button-padding-x, 22px);
    border-radius: var(--theme-button-radius, 999px);
    background: var(--fk-button-bg);
    color: var(--fk-button-color);
    font-family: var(--theme-button-font, 'Work Sans', sans-serif);
    font-size: var(--fk-button-size, var(--theme-button-font-size, 15px));
    font-weight: var(--theme-button-font-weight, 600);
    text-decoration: none;
    transition: background .25s ease, color .25s ease, transform .25s ease;
    cursor: pointer;
}
.franck-nos-services__button:hover {
    background: var(--fk-button-bg-hover);
    color: var(--fk-button-color-hover);
    transform: translateY(-1px);
}

.franck-nos-services__footer {
    margin-top: var(--fk-header-gap, 38px);
}

/* =====================  SLIDER WRAPPER  ===================== */
.franck-nos-services__slider-wrapper {
    position: relative;
    width: 100%;
}

/* =====================  TRACK (carrousel)  ===================== */
.franck-nos-services__track {
    display: grid;
    grid-auto-flow: column;
    /* N cards visibles : largeur = (100% - gaps) / N. Pas de `fr` -> calc valide
       (% et px composables, contrairement à fr — cf. CONTEXT pièges CSS). */
    grid-auto-columns: calc((100% - var(--fk-gap, 24px) * (var(--fk-cols, 3) - 1)) / var(--fk-cols, 3));
    gap: var(--fk-gap, 24px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* padding vertical : laisse respirer le translateY(-6px) au hover */
    padding: 10px 2px 28px;
    scrollbar-width: none;
    cursor: grab;
    user-select: none;
    -webkit-overflow-scrolling: touch;
}

.franck-nos-services__track::-webkit-scrollbar { display: none; }

.franck-nos-services__track.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}

/* =====================  CARD (entièrement cliquable)  ===================== */
.franck-nos-services__card {
    display: flex;
    flex-direction: column;
    min-height: var(--fk-card-height, 100%);
    text-decoration: none;
    color: inherit;
    background: var(--fk-card-bg);
    border-radius: var(--fk-card-radius, 18px);
    overflow: hidden;
    scroll-snap-align: start;
    box-shadow: var(--fk-card-shadow, none);
    border: var(--fk-card-border-width, 0px) solid var(--fk-card-border-color, transparent);
    transition: transform .28s ease, box-shadow .28s ease, border-color .3s ease, border-width .3s ease;
    will-change: transform;
    cursor: pointer;
}

.franck-nos-services__card:hover {
    transform: translateY(-6px);
    box-shadow: var(--fk-card-shadow-hover, none);
    border-color: var(--fk-card-hover-border-color);
    border-width: var(--fk-card-hover-border-width);
    text-decoration: none;
    cursor: pointer;
}

.franck-nos-services__track.is-dragging,
.franck-nos-services__track.is-dragging .franck-nos-services__card {
    cursor: grabbing;
}

/* Média card — image arrondie sur les 4 coins (calage premium d'origine).
   Hauteur : auto -> ratio 16/9 ; valeur px -> hauteur fixe (le ratio est ignoré). */
.franck-nos-services__image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: var(--fk-card-image-height, auto);
    overflow: hidden;
    border-radius: var(--fk-image-radius, 18px);
    background: var(--fk-card-media-bg, rgba(0, 120, 56, .14));
}

.franck-nos-services__image img,
.franck-nos-services__image picture {
    display: block;
    width: 100%;
    height: 100%;
}

.franck-nos-services__image img,
.franck-nos-services__image picture > img {
    object-fit: var(--fk-card-image-fit, cover);
    /* translate = décalage X/Y par card ; scale = zoom hover (variable) */
    transform: translate(var(--fk-card-img-offset-x, 0), var(--fk-card-img-offset-y, 0)) scale(var(--fk-card-img-scale, 1));
    transform-origin: center center;
    transition: transform .55s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.franck-nos-services__card:hover .franck-nos-services__image img,
.franck-nos-services__card:hover .franck-nos-services__image picture > img {
    --fk-card-img-scale: 1.08;
}

.franck-nos-services__placeholder {
    width: 100%;
    height: 100%;
    background: var(--fk-card-media-bg, rgba(0, 120, 56, .14));
}

/* Body card */
.franck-nos-services__body {
    padding: var(--fk-card-body-padding, 22px 22px 26px);
}

.franck-nos-services__body h3 {
    margin: 0 0 10px 0;
    text-align: var(--fk-card-title-align, left);
    color: var(--fk-card-title-color);
    font-size: var(--fk-card-title-size, 21px);
    font-family: var(--theme-title-font, 'Jost', sans-serif);
    font-weight: 800;
    line-height: 1.18;
}

.franck-nos-services__body p {
    margin: 0;
    text-align: var(--fk-card-text-align, left);
    color: var(--fk-card-text-color);
    font-size: var(--fk-card-text-size, 15px);
    line-height: 1.55;
}

/* =====================  FLÈCHES  ===================== */
.franck-nos-services__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 52px;
    height: 52px;
    padding: 0;
    border: none;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    background: var(--fk-arrow-bg, #ffffff);
    color: var(--fk-arrow-color, #0f172a);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: transform .2s ease, background .2s ease, color .2s ease;
}

.franck-nos-services__arrow:hover {
    background: var(--fk-arrow-bg-hover, #0f172a);
    color: var(--fk-arrow-color-hover, #ffffff);
    transform: translateY(-50%) scale(1.04);
}

.franck-nos-services__arrow:active {
    transform: translateY(-50%) scale(0.94);
}

.franck-nos-services__arrow--prev { left: 8px; }
.franck-nos-services__arrow--next { right: 8px; }

/* =====================  RESPONSIVE  ===================== */
@media (max-width: 991px) {
    .franck-nos-services__track {
        grid-auto-columns: calc((100% - var(--fk-gap, 24px)) / 2);
    }
    .franck-nos-services__title { font-size: calc(var(--fk-title-size, var(--theme-title-size, 42px)) * 0.82); }
}

@media (max-width: 767px) {
    .franck-nos-services__track {
        grid-auto-columns: 82%;
        gap: 18px;
    }
    .franck-nos-services__arrow { display: none !important; }
    .franck-nos-services__title { font-size: calc(var(--fk-title-size, var(--theme-title-size, 42px)) * 0.72); }
    .franck-nos-services__subtitle { font-size: calc(var(--fk-subtitle-size, var(--theme-subtitle-size, 18px)) * 0.92); }
    .franck-nos-services__body { padding: 18px; }
}

/* =====================  ANIMATIONS (apparition au scroll)  ===================== */
/* La card porte fns-anim + fns-anim--TYPE ; le JS front ajoute fns-anim--visible
   quand la card entre dans le viewport. Dans le preview builder, le renderer
   ajoute directement fns-anim--visible (cards toujours affichées). */
.fns-anim {
    transition: opacity var(--fk-animation-duration, 600ms) ease,
                transform var(--fk-animation-duration, 600ms) ease;
    transition-delay: calc(var(--fk-animation-delay, 0ms) + var(--fk-anim-index, 0) * 80ms);
    will-change: opacity, transform;
}
.fns-anim--none { opacity: 1; }
.fns-anim--fade       { opacity: 0; }
.fns-anim--fade-up    { opacity: 0; transform: translateY(30px); }
.fns-anim--fade-down  { opacity: 0; transform: translateY(-30px); }
.fns-anim--fade-left  { opacity: 0; transform: translateX(-30px); }
.fns-anim--fade-right { opacity: 0; transform: translateX(30px); }
.fns-anim--zoom       { opacity: 0; transform: scale(0.92); }

.fns-anim--visible { opacity: 1; transform: translate(0, 0) scale(1); }

@media (prefers-reduced-motion: reduce) {
    .fns-anim { transition: none; opacity: 1; transform: none; }
}

/* =====================  BUILDER : preview à 75%  =====================
   Le renderer enveloppe la section dans :
     .franck-nos-services-scale-outer
       └─ .franck-nos-services-scale-inner (transform:scale(.75); width:133.33%)
            └─ .franck-nos-services-preview-container (simule .container Bootstrap)
                └─ .franck-nos-services-wrapper(--full|--container)
                    └─ section…
   Largeurs internes ÷ 0.75 pour matcher le rendu front. */
.franck-nos-services-preview-container {
    width: 100%;
    max-width: 1760px;        /* 1320 / 0.75 */
    margin: 0 auto;
    padding: 0 16px;          /* 12 / 0.75 */
    box-sizing: border-box;
}

@media (max-width: 1399.98px) { .franck-nos-services-preview-container { max-width: 1520px; } }
@media (max-width: 1199.98px) { .franck-nos-services-preview-container { max-width: 1280px; } }
@media (max-width: 991.98px)  { .franck-nos-services-preview-container { max-width: 960px;  } }
@media (max-width: 767.98px)  { .franck-nos-services-preview-container { max-width: 720px;  } }
@media (max-width: 575.98px)  { .franck-nos-services-preview-container { max-width: 100%;   } }

/* Neutralisation du 100vw du wrapper--full dans le preview :
   il doit remplir le preview, pas la viewport réelle. */
.franck-nos-services-scale-outer .franck-nos-services-wrapper--full,
.is-builder-preview .franck-nos-services-wrapper--full {
    width: 100%;
    margin-left: 0;
    max-width: 100%;
}

.franck-nos-services-scale-inner {
    box-sizing: border-box;
}