/* =============================================================================
   UFT LANDING PAGE — /
   Design 100% Figma. Scopé sous .uft-landing pour ne polluer aucune autre page.
   Toutes les découpes/polygones et chevrons sont recréés en CSS (pas de PNG).
   ============================================================================= */

.uft-landing {
    --uft-green: #006f3a;
    --uft-green-dark: #004d27;
    --uft-green-soft: #eaf5ee;
    --uft-text-dark: #26262b;
    --uft-text-muted: #6b7280;
    --uft-star: #f6c700;

    color: var(--uft-text-dark);
    font-family: 'Futura Std', 'Helvetica Neue', Arial, sans-serif;
    overflow-x: hidden;
    /* Background global : Bg-home.png étiré sur toute la page (100%),
       fixé pour rester visible pendant le scroll. */
    background-image: url('/img/home/Bg-home.png');
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top center;
    background-attachment: scroll;
    background-color: #ffffff;
    position: relative;
}

.uft-landing section {
    padding: 60px 20px;
    position: relative;
}

.uft-landing .container-wide {
    max-width: 1240px;
    margin: 0 auto;
    width: 100%;
}

/* ---------- HERO + TITRE + DOWNLOAD ---------- */
/* Wrapper transparent : le background global de .uft-landing (Bg-home.png)
   se voit à travers. Retirer tout background local pour ne pas masquer. */
.uft-landing .landing-hero-wrap {
    background: transparent;
    position: relative;
}

.uft-landing .landing-hero {
    padding: 60px 20px 30px;
    text-align: center;
    position: relative;
}

.uft-landing .hero-phone-wrap {
    position: relative;
    display: inline-block;
    max-width: 610px; /* hero-phone AGRANDI (avant : 400px) */
    width: 100%;
}

.uft-landing .hero-phone-wrap img {
    width: 100%;
    height: auto;
    display: block;
}

/* Badge users à droite (le badge étoiles est retiré : déjà dans hero-phone.png) */
.uft-landing .hero-badge {
    position: absolute;
    background: #ffffff;
    border-radius: 10px;
    padding: 10px 18px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: var(--uft-text-dark);
    font-size: .9rem;
    white-space: nowrap;
    z-index: 2;
}

.uft-landing .hero-badge-users {
    top: 38%;
    left: 100%;
    transform: translate(-30%, -50%);
}

/* Icône PNG (violet-tuser.png) au lieu du cercle avec icon Bootstrap */
.uft-landing .hero-badge .hero-badge-icon {
    width: 17px;
    height: 17px;
    object-fit: contain;
    display: block;
}

.uft-landing .hero-badge b {
    color: var(--uft-green);
    font-weight: 800;
}

/* ---------- TITRE + DOWNLOAD ---------- */
.uft-landing .landing-title-download {
    text-align: center;
    padding: 60px 20px 80px;
    position: relative;
}

.uft-landing .landing-title-download h1 {
    color: var(--uft-green);
    font-weight: 800;
    font-style: italic;
    text-transform: uppercase;
    font-size: 2.2rem;
    line-height: 1.2;
    letter-spacing: -.3px;
    max-width: 780px;
    margin: 0 auto 32px;
    position: relative;
    z-index: 2;
}

/* Boutons download : VERT (couleur app) avec texte blanc + coin bas-droite biais. */
.uft-landing .download-btns {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.uft-landing .btn-download {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--uft-green);
    color: #ffffff;
    border: 0;
    padding: 14px 28px;
    font-weight: 700;
    font-size: .9rem;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
    transition: background .2s, transform .15s;
    cursor: pointer;
}

.uft-landing .btn-download:hover {
    background: var(--uft-green-dark);
    color: #ffffff;
    transform: translateY(-1px);
}

.uft-landing .btn-download img {
    width: 20px;
    height: 20px;
    /* Force les icônes SVG en blanc (elles étaient vertes à l'origine) */
    filter: brightness(0) invert(1);
}

/* ---------- TABS ORGANISATEURS / PARTICIPANTS ----------
   Container blanc avec cut au TOP-LEFT.
   Padding INTÉRIEUR pour laisser de l'espace entre les boutons et les
   bords du container. Le bouton ACTIF (PARTICIPANTS) est vert avec le
   même cut au TOP-LEFT. */
.uft-landing .features-tabs-wrap {
    text-align: center;
    padding: 20px 20px 30px;
    max-width: 1240px;
    margin: 0 auto;
    /* IMPORTANT : box-shadow ne fonctionne PAS avec clip-path (l'ombre est
       clippée aussi). On utilise donc filter: drop-shadow sur le wrapper
       parent (qui n'a pas de clip-path) → l'ombre suit la forme du polygon
       et se voit bien en dessous. Diffusion large pour un halo doux. */
    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, .25));
}

.uft-landing .features-tabs {
    display: inline-flex;
    background: #ffffff;
    /* Padding intérieur pour espacer les boutons des bords du container */
    padding: 8px;
    gap: 6px;
    margin-bottom: 30px;
    /* Cut au TOP-LEFT du container */
    -webkit-clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%, 0 16px);
    clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%, 0 16px);
}

.uft-landing .tab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--uft-green);
    border: 0;
    padding: 14px 32px;
    font-weight: 800;
    font-style: italic;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background .2s, color .2s;
}

/* Bouton ACTIF : fond vert + même cut au TOP-LEFT que le container */
.uft-landing .tab-btn.active {
    background: var(--uft-green);
    color: #ffffff;
    -webkit-clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px);
    clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px);
}

/* ---------- 4 SECTIONS FEATURES ---------- */
/* Layout ALTERNÉ : blocs verts collés à GAUCHE, blocs blancs collés à DROITE.
   Chaque bloc prend ~72% de la largeur du container → un espace vide de ~28%
   sur le côté opposé, comblé par les chevrons décoratifs. */
.uft-landing .landing-features {
    padding: 20px 20px 60px;
    max-width: 1240px;
    margin: 0 auto;
    position: relative;
}

.uft-landing .feature-block {
    width: 72%;
    margin-bottom: 100px;
    position: relative;
}

/* Blocs verts (TOURNOIS, PLATEAUX) : collés à gauche */
.uft-landing .feature-block-left {
    margin-left: 0;
    margin-right: auto;
}

/* Blocs blancs (MATCHS, STAGES) : collés à droite */
.uft-landing .feature-block-right {
    margin-left: auto;
    margin-right: 0;
}

/* Bande verte : UNE SEULE découpe au coin TOP-LEFT (pas de découpe bas-droite).
   Padding vertical généreux pour aérer le contenu. */
.uft-landing .feature-green {
    background: var(--uft-green);
    color: #ffffff;
    padding: 70px 48px;
    -webkit-clip-path: polygon(4% 0, 100% 0, 100% 100%, 0 100%, 0 22%);
    clip-path: polygon(4% 0, 100% 0, 100% 100%, 0 100%, 0 22%);
    min-height: 320px;
    position: relative;
}

/* Carte blanche : UNE SEULE découpe au coin BAS-DROITE (pas de top-left).
   Padding haut/bas généreux pour que le phone centré ne touche pas les bords. */
.uft-landing .feature-white {
    background: #ffffff;
    color: var(--uft-green);
    padding: 70px 48px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .12);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 78%, 96% 100%, 0 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 78%, 96% 100%, 0 100%, 0 100%);
    min-height: 320px;
    position: relative;
}

.uft-landing .feature-block h2 {
    text-transform: uppercase;
    font-weight: 800;
    font-style: italic;
    font-size: 2.3rem;
    letter-spacing: .5px;
    margin-bottom: 16px;
}

.uft-landing .feature-white h2 {
    color: var(--uft-green);
}

.uft-landing .feature-block p {
    font-size: 1rem;
    line-height: 1.55;
    margin-bottom: 26px;
}

/* Description sur cartes blanches (MATCHS/STAGES) : texte en VERT app */
.uft-landing .feature-white p {
    color: var(--uft-green);
}

/* Bouton EN SAVOIR PLUS :
   - Sur bloc vert (TOURNOIS/PLATEAUX) → fond BLANC, texte VERT
   - Sur bloc blanc (MATCHS/STAGES) → fond VERT, texte BLANC */
.uft-landing .btn-savoir-plus {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--uft-green);
    color: #fff;
    border: 0;
    padding: 10px 24px;
    font-weight: 800;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    text-decoration: none;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
    cursor: pointer;
    transition: background .2s, color .2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}

.uft-landing .feature-green .btn-savoir-plus {
    background: #ffffff;
    color: var(--uft-green);
}

.uft-landing .feature-green .btn-savoir-plus:hover {
    background: #f0f0f0;
    color: var(--uft-green);
}

.uft-landing .feature-white .btn-savoir-plus:hover {
    background: var(--uft-green-dark);
    color: #fff;
}

/* Phone positionné en ABSOLUTE.
   - Blocs verts (TOURNOIS/PLATEAUX) : phone en bas-DROITE, dans le coin
     du bloc (right: 0, bottom: 0), largeur 230px.
   - Blocs blancs (MATCHS/STAGES)   : phone CENTRÉ verticalement dans la
     zone gauche du bloc. */
.uft-landing .feature-block .feature-phone {
    position: absolute;
    z-index: 3;
    pointer-events: none;
    padding: 0;
    text-align: center;
}

.uft-landing .feature-phone img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .3));
    pointer-events: auto;
}

/* Blocs verts : phone au coin BAS-DROIT du bloc */
.uft-landing .feature-block-left .feature-phone {
    right: 0px;
    bottom: 0px;
    width: 230px;
}

/* Blocs blancs : phone CENTRÉ verticalement dans la zone gauche */
.uft-landing .feature-block-right .feature-phone {
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    width: 200px;
}

/* Texte : gouttière pour ne pas passer sous le phone.
   Blocs verts : phone à droite (230px) → padding-right qui laisse la place. */
.uft-landing .feature-block-left .feature-green {
    padding-right: 260px;
}

.uft-landing .feature-block-right .feature-white {
    padding-left: 260px;
}

/* Titre "Plateaux / Championnats" doit rester sur une SEULE ligne */
.uft-landing .feature-block h2 {
    white-space: nowrap;
}

/* Chevrons décoratifs ▽▽▽ VERT CLAIR positionnés dans l'ESPACE VIDE créé
   par le décalage des blocs. À droite pour compléter les blocs verts (qui
   sont à gauche), à gauche pour compléter les blocs blancs (à droite).
   Empilés verticalement, taille généreuse pour occuper l'espace. */
.uft-landing .side-chevrons {
    position: absolute;
    z-index: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: .28;
    pointer-events: none;
}

.uft-landing .side-chevrons span {
    display: block;
    width: 70px;
    height: 30px;
    background: var(--uft-green);
    -webkit-clip-path: polygon(0 0, 50% 60%, 100% 0, 100% 30%, 50% 100%, 0 30%);
    clip-path: polygon(0 0, 50% 60%, 100% 0, 100% 30%, 50% 100%, 0 30%);
}

/* Position des chevrons : à droite pour les blocs verts (feature-block-left),
   à gauche pour les blocs blancs (feature-block-right). */
.uft-landing .feature-block-left .side-chevrons {
    right: 4%;
    top: 50%;
    transform: translateY(-50%);
}

.uft-landing .feature-block-right .side-chevrons {
    left: 4%;
    top: 50%;
    transform: translateY(-50%);
}

/* ---------- PARTENAIRES ---------- */
/* Section FULL-WIDTH avec CAROUSEL INFINI (marquee CSS auto-scroll).
   Le contenu est étiré : logos plus grands + plus d'espacement. */
.uft-landing .landing-partners {
    padding: 80px 40px;
    position: relative;
    max-width: none;
    width: 100%;
}

/* Header full-width : titre HUGE à gauche, boutons nav à droite */
.uft-landing .landing-partners-header {
    max-width: none;
    margin: 0 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 0;
    width: 100%;
}

.uft-landing .landing-partners h2 {
    color: var(--uft-green);
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    font-size: 5rem;
    line-height: 1;
    margin: 0;
    text-align: left;
    letter-spacing: 1px;
}

.uft-landing .partners-nav {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Wrapper carrousel full-width */
.uft-landing .partners-wrap {
    max-width: none;
    margin: 0;
    width: 100%;
    position: relative;
}

.uft-landing .testimonials-wrap {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
}

/* Track : cache le débordement horizontal, la marquee scroll à l'intérieur */
.uft-landing .partners-track {
    width: 100%;
    overflow: hidden;
    padding: 20px 0;
}

/* Marquee : anime en TRANSLATION continue pour créer l'effet infini.
   Le contenu est DUPLIQUÉ 2× dans le DOM ; on translate de -50% pour
   revenir exactement au début du 2e set → boucle transparente.
   Gap ajusté pour permettre 6 logos visibles simultanément dans un
   container-wide de 1240px. */
.uft-landing .partners-marquee {
    display: flex;
    gap: 30px;
    width: max-content;
    animation: partners-marquee-scroll 35s linear infinite;
    align-items: center;
}

@keyframes partners-marquee-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Pause au hover pour permettre à l'utilisateur de regarder un logo */
.uft-landing .partners-track:hover .partners-marquee {
    animation-play-state: paused;
}

/* Item = 165px de large → avec gap 30px : 6 items × 165 + 5 gaps × 30 = 1140px
   qui rentrent dans le container-wide 1240px moins padding horizontal. */
.uft-landing .partner-item {
    flex: 0 0 auto;
    text-align: center;
    width: 165px;
}

/* Logo SANS background : plus de cercle blanc, plus d'ombre. */
.uft-landing .partner-item .partner-logo {
    width: 165px;
    height: 165px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
}

.uft-landing .partner-item .partner-logo img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

/* Boutons nav prev/next : cut polygon (coin bas-droite) */
.uft-landing .carousel-nav-btn {
    width: 42px;
    height: 42px;
    background: var(--uft-green);
    color: #fff;
    border: 0;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: background .2s;
    flex: 0 0 auto;
}

.uft-landing .carousel-nav-btn:hover {
    background: var(--uft-green-dark);
}

.uft-landing .carousel-nav-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}

/* ---------- TESTIMONIALS ---------- */
/* Palette pour le titre et le bouton nav actif */
.uft-landing .landing-testimonials {
    --uft-navy: #373759;
    --uft-nav-inactive: #b8bfc7;
    background: transparent;
    padding: 80px 20px;
}

/* Titre "ILS ONT UTILISÉ UFT" : couleur #373759, italique bold */
.uft-landing .landing-testimonials h2 {
    color: var(--uft-navy);
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    font-size: 3.5rem;
    text-align: center;
    margin-bottom: 60px;
    letter-spacing: 1px;
    line-height: 1;
}

/* Testimonials contrainte à 1100px (pas full-width). Overflow visible pour
   que le logo qui déborde à gauche du card ne soit pas coupé. */
.uft-landing .testimonials-wrap {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 24px;
    position: relative;
    overflow: visible;
}

/* Track : overflow-x auto pour scroll-snap horizontal, overflow-y VISIBLE
   pour que le logo qui dépasse en haut et en bas du card ne soit pas coupé. */
.uft-landing .testimonials-track {
    flex: 1;
    display: flex;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    position: relative;
    padding: 40px 0;
}

.uft-landing .testimonials-track::-webkit-scrollbar {
    display: none;
}

/* Card testimonial : forme HEXAGONALE (losange étiré) avec pointe COMPLÈTE
   à GAUCHE (`<`) et pointe COMPLÈTE à DROITE (`>`), top et bottom droits.
   max-width 70% → card centré dans la piste, occupant 70% de la largeur.
   Double layer : shadow gris + front blanc pour l'effet 3D. */
.uft-landing .testimonial-item {
    flex: 0 0 100%;
    min-width: 100%;
    scroll-snap-align: center;
    position: relative;
    /* Padding horizontal ajusté pour card LARGE (90%) + logo 320px qui
       déborde nettement à gauche du card :
       - Card (::after) occupe 5% à 95% de l'item (90% de largeur totale).
       - Zone safe pour contenu : 23% à 77% de l'item (54% central).
       - Logo (320px) positionné à calc(5% - 30px) → sort clairement du
         card à gauche + haut + bas.
       - Le texte doit commencer APRÈS le logo : padding-left = 5% + 310px
         (logo right edge = 5% + 290px + gap 20px). */
    padding: 45px calc(23% + 40px) 45px calc(5% + 310px);
    min-height: 260px;
    box-sizing: border-box;
    max-width: 100%;
}

/* Parallélogramme : côtés gauche ET droite inclinés à ~20°.
   Les 2 côtés parallèles slopent de haut-droite vers bas-gauche. */
.uft-landing .testimonial-item::before,
.uft-landing .testimonial-item::after {
    -webkit-clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);
    clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);
}

/* Card BACK (shadow gris) : positionné dans le 90% central, offset bas-droite */
.uft-landing .testimonial-item::before {
    content: '';
    position: absolute;
    top: 20px;
left: calc(2% + 1px);
    right: calc(0% - -65px);
    bottom: -16px;
    background: #d5d9dd;
    z-index: 0;
}

/* Card FRONT (blanche) : occupe le 90% central du testimonial-item */
.uft-landing .testimonial-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 5%;
    right: 5%;
    bottom: 0;
    background: #ffffff;
    z-index: 1;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
}

/* Logo MOISSY : TRÈS GRAND (320×320) qui SORT du card (déborde nettement
   en haut, en bas et à gauche) et COUVRE partiellement le card + shadow.
   z-index élevé pour rester au-dessus des layers ::before et ::after. */
.uft-landing .testimonial-logo {
    position: absolute;
    left: calc(5% - 30px);
    top: 50%;
    transform: translateY(-50%);
    width: 320px;
    height: 320px;
    z-index: 4;
}

.uft-landing .testimonial-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .15));
}

/* Body du testimonial : au-dessus des layers polygon (z-index 2) */
.uft-landing .testimonial-body {
    position: relative;
    z-index: 2;
}

.uft-landing .testimonial-body h3 {
    color: var(--uft-green);
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    font-size: 1.9rem;
    margin-bottom: 14px;
    letter-spacing: 1px;
}

/* Description : GREEN italique (pas dark gray) */
.uft-landing .testimonial-body p {
    color: var(--uft-green);
    font-style: italic;
    font-size: 1rem;
    line-height: 1.55;
    margin-bottom: 0;
    max-width: 600px;
}

/* Nav buttons : côté DROIT du card, prev GRIS + next DARK NAVY */
.uft-landing .testimonials-wrap .testimonials-nav {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    align-items: center;
    padding-right: 20px;
}

.uft-landing .testimonials-wrap .carousel-nav-btn {
    background: var(--uft-nav-inactive);
    color: #ffffff;
    width: 46px;
    height: 46px;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}

/* Bouton NEXT (actif) : dark navy */
.uft-landing .testimonials-wrap .carousel-nav-btn[data-carousel-next] {
    background: var(--uft-navy);
}

.uft-landing .testimonials-wrap .carousel-nav-btn:hover {
    filter: brightness(0.9);
}

/* ---------- STATS (2×2 grid en dessous du card) ---------- */
.uft-landing .testimonial-stats {
    max-width: 900px;
    margin: 60px auto 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 60px;
    padding: 0 40px;
}

.uft-landing .testimonial-stat {
    text-align: center;
}

.uft-landing .testimonial-stat .stat-value {
    color: var(--uft-green);
    font-weight: 900;
    font-style: italic;
    font-size: 3rem;
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: 1px;
    text-align: center;
}

/* Labels GREEN italique (pas gris muted) — centrés */
.uft-landing .testimonial-stat .stat-label {
    color: var(--uft-green);
    font-style: italic;
    font-size: 1.15rem;
    letter-spacing: 0;
    margin-top: 0;
    line-height: 1.3;
    text-transform: none;
    font-weight: 400;
    text-align: center;
}

/* ---------- NOS PRIX ---------- */
/* Section composée de DEUX formes vertes SÉPARÉES qui se chevauchent en
   diagonale, exactement comme dans la maquette Figma :
   - Forme 1 : rectangle en HAUT-GAUCHE avec une diagonale sur son côté DROIT
     (le côté droit descend en biais de haut-droite vers milieu-bas).
   - Forme 2 : rectangle en BAS-DROITE avec une diagonale sur son côté GAUCHE
     (le côté gauche descend en biais de haut-gauche vers milieu-bas).
   Les deux se chevauchent au centre pour former un "step" en diagonale.
   Le titre "NOS PRIX" est sur la forme 1 (haut-gauche). */
.uft-landing .landing-pricing {
    position: relative;
    padding: 80px 20px 100px;
    color: #ffffff;
    margin-top: 30px;
    background: transparent;
    min-height: 640px;
}

/* Forme 1 : HAUT-GAUCHE — parallélogramme
   Diagonale MOINS raide (75% → 60% au lieu de 100% → 50%) pour un angle
   plus doux comme dans la maquette. */
.uft-landing .pricing-shape-1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 55%;
    height: 50%;
    background: var(--uft-green);
    z-index: 0;
    -webkit-clip-path: polygon(0 0, 100% 0, 75% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 75% 100%, 0 100%);
}

/* Forme 2 : BAS-DROITE — diagonale MOINS raide (25% top → 0% bottom)
   pour rester parallèle à shape 1 avec un angle plus doux. */
.uft-landing .pricing-shape-2 {
    position: absolute;
    top: 56%;
    right: 0;
    width: 68%;
    bottom: 50px;
    background: var(--uft-green);
    z-index: 0;
    -webkit-clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
}

/* Titre "NOS PRIX" — GROS, italique bold.
   Layout GRID en 2 colonnes de 50/50 pour forcer :
   - "Nos" right-aligned dans la colonne GAUCHE → finit AVANT la ligne médiane
   - "prix" left-aligned dans la colonne DROITE → commence APRÈS la ligne médiane
   Le split au centre coïncide avec la diagonale de shape 1 à cette hauteur,
   donc "NOS" (blanc) est sur le vert et "PRIX" (vert) est sur le fond clair. */
.uft-landing .landing-pricing h2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 100%;
    margin: 0 0 70px;
    padding: 20px 0 0;
    position: relative;
    z-index: 2;
    font-size: 5.5rem;
    font-weight: 800;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1;
    gap: 30px;
}

.uft-landing .landing-pricing h2 .word-white {
    color: #ffffff;
    text-align: right;
}

.uft-landing .landing-pricing h2 .word-green {
    color: var(--uft-green);
    text-align: left;
}

.uft-landing .landing-pricing h2 {
    color: #ffffff;
    font-weight: 800;
    font-style: italic;
    text-transform: uppercase;
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 40px;
    letter-spacing: 1px;
}

.uft-landing .pricing-inner {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.uft-landing .pricing-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.uft-landing .pricing-card {
    background: #ffffff;
    color: var(--uft-text-dark);
    padding: 30px 24px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .15);
    -webkit-clip-path: polygon(4% 0, 100% 0, 100% 90%, 96% 100%, 0 100%, 0 10%);
    clip-path: polygon(4% 0, 100% 0, 100% 90%, 96% 100%, 0 100%, 0 10%);
    text-align: center;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.uft-landing .pricing-card h3 {
    color: var(--uft-green);
    font-weight: 800;
    font-style: italic;
    text-transform: uppercase;
    font-size: 1.7rem;
    margin-bottom: 20px;
    line-height: 1.05;
}

.uft-landing .pricing-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
    /* Description : bleu-gris comme dans la maquette (au lieu du gris foncé)
       + taille agrandie pour meilleure lisibilité */
    color: #6b7c93;
    font-size: 1.05rem;
    text-align: left;
    line-height: 1.5;
}

.uft-landing .pricing-card ul li {
    margin-bottom: 10px;
    padding-left: 16px;
    position: relative;
    line-height: 1.5;
}

.uft-landing .pricing-card ul li::before {
    content: '•';
    color: #6b7c93;
    position: absolute;
    left: 0;
    font-weight: 800;
}

.uft-landing .pricing-card .price-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--uft-green);
    color: #fff;
    padding: 10px 26px;
    font-weight: 800;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    text-decoration: none;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
    align-self: center;
    transition: background .2s;
}

.uft-landing .pricing-card .price-cta:hover {
    background: var(--uft-green-dark);
    color: #fff;
}

/* Chevrons gris ">>" décoratifs positionnés en HAUT-DROITE de la section
   pricing (au-dessus de la forme verte, superposés). Grand format. */
.uft-landing .landing-pricing .deco-chevrons-right {
    position: absolute;
    right: 40px;
    top: 30px;
    z-index: 3;
    display: flex;
    gap: 6px;
    pointer-events: none;
}

.uft-landing .landing-pricing .deco-chevrons-right span {
    display: block;
    width: 60px;
    height: 95px;
    background: #eaf0f5;
    -webkit-clip-path: polygon(0 0, 60% 50%, 0 100%, 30% 100%, 100% 50%, 30% 0);
    clip-path: polygon(0 0, 60% 50%, 0 100%, 30% 100%, 100% 50%, 30% 0);
    opacity: .75;
}

/* =============================================================================
   RESPONSIVE MOBILE (< 768px)
   Version 100% adaptée après tous les ajustements desktop récents.
   ============================================================================= */
@media (max-width: 768px) {
    /* Section padding réduit */
    .uft-landing section {
        padding: 40px 16px;
    }

    /* ========== HERO ========== */
    .uft-landing .landing-hero {
        padding: 30px 16px 20px;
    }

    .uft-landing .hero-phone-wrap {
        max-width: 300px;
    }

    /* Badge users : passe EN-DESSOUS du phone, statique */
    .uft-landing .hero-badge {
        position: static;
        transform: none;
        display: inline-flex;
        margin: 16px auto 0;
        font-size: .8rem;
        padding: 8px 14px;
    }

    .uft-landing .hero-badge-users {
        top: auto;
        left: auto;
        right: auto;
    }

    .uft-landing .hero-badge .hero-badge-icon {
        width: 16px;
        height: 16px;
    }

    /* ========== TITRE + DOWNLOAD ========== */
    .uft-landing .landing-title-download {
        padding: 30px 16px 50px;
    }

    .uft-landing .landing-title-download h1 {
        font-size: 1.4rem;
    }

    .uft-landing .download-btns {
        flex-direction: column;
        gap: 14px;
        align-items: center;
    }

    .uft-landing .btn-download {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }

    /* ========== TABS ORGANISATEURS / PARTICIPANTS ========== */
    .uft-landing .features-tabs-wrap {
        padding: 10px 16px 20px;
        /* Réduire l'ombre en mobile (moins agressive) */
        filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .18));
    }

    .uft-landing .tab-btn {
        padding: 11px 18px;
        font-size: .82rem;
        letter-spacing: .5px;
    }

    /* ========== FEATURES (TOURNOIS / MATCHS / PLATEAUX / STAGES) ==========
       En mobile : pleine largeur, phone repositionné en flow normal en dessous.
       Reset de tous les padding-left/right calc(...) du desktop. */
    .uft-landing .landing-features {
        padding: 20px 16px 40px;
    }

    .uft-landing .feature-block {
        width: 100%;
        margin-bottom: 30px;
    }

    .uft-landing .feature-block-left,
    .uft-landing .feature-block-right {
        margin-left: 0;
        margin-right: 0;
    }

    /* Reset padding + désactive min-height + centre le texte */
    .uft-landing .feature-green,
    .uft-landing .feature-white {
        padding: 30px 22px;
        min-height: auto;
        text-align: center;
    }

    /* Reset des paddings-left/right spécifiques (gouttière phone désactivée) */
    .uft-landing .feature-block-left .feature-green {
        padding-right: 22px;
    }
    .uft-landing .feature-block-right .feature-white {
        padding-left: 22px;
    }

    /* Titre h2 : autorise le retour à la ligne pour "Plateaux / Championnats" */
    .uft-landing .feature-block h2 {
        font-size: 1.5rem;
        white-space: normal;
    }

    /* Phone : repasse en flow normal SOUS le texte */
    .uft-landing .feature-block .feature-phone {
        position: static;
        transform: none;
        margin: 20px auto 0;
        width: auto;
    }

    .uft-landing .feature-block-left .feature-phone,
    .uft-landing .feature-block-right .feature-phone {
        right: auto;
        left: auto;
        top: auto;
        bottom: auto;
        transform: none;
        width: auto;
    }

    .uft-landing .feature-phone img {
        max-width: 180px;
        margin: 0 auto;
    }

    /* Chevrons latéraux : cachés en mobile */
    .uft-landing .side-chevrons {
        display: none;
    }

    /* ========== PARTENAIRES ========== */
    .uft-landing .landing-partners {
        padding: 40px 16px;
    }

    .uft-landing .landing-partners-header {
        flex-wrap: wrap;
        margin-bottom: 20px;
    }

    .uft-landing .landing-partners h2 {
        font-size: 2rem;
    }

    .uft-landing .partners-marquee {
        gap: 30px;
        animation-duration: 25s;
    }

    .uft-landing .partner-item {
        width: 100px;
    }

    .uft-landing .partner-item .partner-logo {
        width: 100px;
        height: 100px;
    }

    /* ========== ILS ONT UTILISÉ UFT (TESTIMONIALS) ==========
       Reset TOTAL des calc(...) desktop : layout simple centré, logo au-dessus. */
    .uft-landing .landing-testimonials {
        padding: 40px 16px;
    }

    .uft-landing .landing-testimonials h2 {
        font-size: 1.9rem;
        margin-bottom: 30px;
    }

    /* Wrap : passe en colonne (card puis nav en dessous) */
    .uft-landing .testimonials-wrap {
        flex-direction: column;
        gap: 20px;
    }

    /* Track : padding réduit */
    .uft-landing .testimonials-track {
        padding: 10px 0;
    }

    /* Item : reset TOTAL des padding calc() du desktop.
       Padding généreux pour contenir le logo À L'INTÉRIEUR du card (le mode
       "logo débordant" du desktop est trop fragile en mobile → coupures). */
    .uft-landing .testimonial-item {
        padding: 30px 20px 30px;
        margin-left: 0;
        text-align: center;
        min-height: auto;
    }

    /* Card layers : reset à un simple rectangle (pas de parallélogramme en
       mobile, trop étroit). */
    .uft-landing .testimonial-item::before,
    .uft-landing .testimonial-item::after {
        -webkit-clip-path: none;
        clip-path: none;
    }

    .uft-landing .testimonial-item::before {
        top: 12px;
        left: 12px;
        right: -6px;
        bottom: -6px;
    }

    .uft-landing .testimonial-item::after {
        left: 0;
        right: 0;
    }

    /* Logo MOISSY : EN FLOW à l'intérieur du card, centré au-dessus du texte.
       Reset des positions absolute du desktop + reset du transform pour éviter
       tout débordement / coupure lors du scroll horizontal du carrousel. */
    .uft-landing .testimonial-logo {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        transform: none;
        width: 150px;
        height: 150px;
        margin: 0 auto 20px;
        z-index: 4;
    }

    .uft-landing .testimonial-body {
        width: 77%;
        max-width: 77%;
        margin: 0 auto;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    .uft-landing .testimonial-body h3 {
        font-size: 1.25rem;
        overflow-wrap: break-word;
    }

    .uft-landing .testimonial-body p {
        font-size: .9rem;
        max-width: 100%;
        overflow-wrap: break-word;
        word-wrap: break-word;
        line-height: 1.5;
    }

    /* Nav buttons : centrés horizontalement en dessous du card */
    .uft-landing .testimonials-wrap .testimonials-nav {
        justify-content: center;
        padding-right: 0;
    }

    /* Stats : grille 2×2 simple, plus compacte */
    .uft-landing .testimonial-stats {
        margin-top: 40px;
        padding: 0 8px;
        gap: 24px 16px;
    }

    .uft-landing .testimonial-stat .stat-value {
        font-size: 1.8rem;
    }

    .uft-landing .testimonial-stat .stat-label {
        font-size: .85rem;
    }

    /* ========== NOS PRIX ========== */
    .uft-landing .landing-pricing {
        padding: 50px 20px 60px;
        min-height: auto;
    }

    /* Forme 1 : bande verte simple en haut (largeur pleine) */
    .uft-landing .pricing-shape-1 {
        top: 0;
        left: 0;
        width: 100%;
        height: 180px;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
    }


    /* Titre NOS PRIX : re-centré, taille adaptée, layout normal (pas grid).
       En mobile, "Nos prix" est ENTIÈREMENT BLANC (les 2 mots) — pas de split
       blanc/vert car la forme verte pleine largeur en haut englobe tout. */
    .uft-landing .landing-pricing h2 {
        display: block;
        text-align: center;
        padding: 30px 0 0;
        max-width: 100%;
        margin-bottom: 40px;
        font-size: 2rem;
        letter-spacing: 1px;
        gap: 0;
    }

    .uft-landing .landing-pricing h2 .word-white,
    .uft-landing .landing-pricing h2 .word-green {
        display: inline;
        text-align: center;
        color: #ffffff;
    }

    /* Cards pricing : 1 colonne, TRÈS espacées entre elles */
    .uft-landing .pricing-cards {
        grid-template-columns: 1fr;
        gap: 80px;
    }

    /* Chevrons décoratifs droite : cachés en mobile */
    .uft-landing .landing-pricing .deco-chevrons-right {
        display: none;
    }

    /* Logo header mobile : override déplacé dans global.css pour qu'il
       s'applique sur TOUTES les pages, pas seulement la landing. */
}

/* Ajustement écrans très petits (< 400px) */
@media (max-width: 400px) {
    .uft-landing .landing-title-download h1 {
        font-size: 1.2rem;
    }

    .uft-landing .feature-block h2 {
        font-size: 1.3rem;
    }

    .uft-landing .landing-testimonials h2 {
        font-size: 1.6rem;
    }

    .uft-landing .landing-partners h2 {
        font-size: 1.7rem;
    }

    .uft-landing .landing-pricing h2 {
        font-size: 1.7rem;
    }

    .uft-landing .testimonial-logo {
        width: 130px;
        height: 130px;
    }

    .uft-landing .testimonial-item {
        padding-top: 24px;
    }
}

/* Fallback pour navigateurs sans clip-path : simple retrait des clip-path,
   pas de border-radius pour conserver le look angulaire de la maquette. */
@supports not (clip-path: polygon(0 0)) {
    .uft-landing .feature-green,
    .uft-landing .feature-white,
    .uft-landing .pricing-card,
    .uft-landing .btn-download,
    .uft-landing .btn-savoir-plus,
    .uft-landing .price-cta,
    .uft-landing .carousel-nav-btn,
    .uft-landing .pricing-shape-1,
    .uft-landing .pricing-shape-2 {
        -webkit-clip-path: none;
        clip-path: none;
    }
}