/* ---- BLEUS PRINCIPAUX ---- */
:root {
    /* Bleu navy/foncé - principal */
    --color-navy: #1C2258;
    --color-navy-dark: #0A1A46;
    --color-navy-light: #1F2D68;
    --color-navy-darker: #121C58;
    --color-navy-medium: #10205B;
    --color-navy-muted: #0F1E5A;
    --color-navy-alt: #07184B;

    /* Bleu secondaire */
    --color-blue-light: #EDF5F9;
    --color-blue-pale: #265473;
    --color-blue-muted: #3777A3;
    --color-blue-dusty: #2f6db2;
    --color-blue-teal: #3B7EA1;
    --color-blue-highlight: #90BBc8;

    /* ---- ROSES/ROUGES ---- */
    --color-red-primary: #BC1722;
    --color-red-secondary: #BE1E2D;
    --color-red-light: #FBB0B0;
    --color-red-pale: #F0F2FF;
    --color-red-muted: #E6BCC9;
    --color-red-very-light: #FDF5F7;
    --color-red-bg-light: #fdeaea;
    --color-pink-light: #F6E8EC;
    --color-pink-pale: #F4D6DF;
    --color-pink-muted: #E6BCC9;
    --color-pink-dusty: #5D343F;
    --color-pink-accent: #A03D5E;

    /* ---- VERTS ---- */
    --color-green-primary: #425A3C;
    --color-green-light: #D7E3C1;
    --color-green-pale: #F0F5EB;
    --color-green-muted: #4D5F4C;
    --color-green-accent: #4E8542;

    /* ---- VIOLETS/MAUVE ---- */
    --color-purple-primary: #6B5BBF;
    --color-purple-light: #E5E2F2;
    --color-purple-muted: #302856;
    --color-purple-accent: #67549F;
    --color-purple-dusty: #59516E;

    /* ---- GRIS & NEUTRES ---- */
    --color-gray-light: #E4E4E4;
    --color-gray-lighter: #ECECF0;
    --color-gray-lightest: #F5F5F5;
    --color-gray-pale: #F5F6FA;
    --color-gray-bg: #FBFBFC;
    --color-gray-footer: #FBFBFB;
    --color-gray-border: #DADCE8;
    --color-gray-text: #555;
    --color-gray-dark: #333;
    --color-gray-darker: #313131;
    --color-gray-muted: #777;
    --color-gray-disabled: #949494;
    --color-sous-menu: #313131;

    /* ---- BLANCS ---- */
    --color-white: #FFFFFF;
    --color-white-opaque-9: rgba(255, 255, 255, 0.9);

    /* ---- DÉGRADÉS ---- */
    --gradient-why: linear-gradient(
            90deg,
            #E6EAF5 0%,
            #F0E7EF 40%,
            #F7D9DD 100%
    );

    --gradient-sur-mesure: linear-gradient(
            90deg,
            rgba(200, 201, 231, 0.05) 0%,
            rgba(200, 201, 231, 0.01) 100%
    );

    --gradient-why-mobile: linear-gradient(
            180deg,
            #E6EAF5 0%,
            #F0E7EF 50%,
            #F7D9DD 100%
    );

    --gradient-bandeau-mutuelle: linear-gradient(
            to right,
            #F0F2FF,
            #FFDFE1
    );

    --gradient-bandeau-mairie: linear-gradient(
            to right,
            rgba(197, 216, 187, 0.64),
            rgba(170, 197, 149, 0.12)
    );

    --gradient-bandeau-asso: linear-gradient(
            to right,
            rgba(240, 242, 255, 0.30),
            rgba(255, 223, 225, 0.30)
    );

    --gradient-feature-highlight: linear-gradient(
            90deg,
            rgba(144, 187, 200, 1) 0%,
            rgba(221, 237, 242, 1) 100%
    );

    --gradient-highlight-blue: rgba(197, 234, 244, 1);

    --gradient-hero: linear-gradient(
            90deg,
            rgba(28,34,88,0) 0%,
            rgba(28,34,88,0) 100%
    );

    /* ---- COULEURS SPÉCIFIQUES PAR CATÉGORIE ---- */

    /* Particuliers (bleu) */
    --color-particuliers-bg: #EDF5F9;
    --color-particuliers-text: #265473;
    --color-particuliers-accent: #3777A3;
    --color-particuliers-card: rgba(221, 237, 242, 1);

    /* Mairies (vert) */
    --color-mairies-bg: var(--color-green-light);
    --color-mairies-text: var(--color-green-muted);
    --color-mairies-primary: var(--color-green-primary);
    --color-mairies-accent: var(--color-green-accent);

    /* Professionnels (violet) */
    --color-pro-bg: var(--color-purple-light);
    --color-pro-text: var(--color-purple-muted);
    --color-pro-accent: var(--color-purple-accent);
    --color-pro-light: rgba(229, 226, 242, 0.2);

    /* Associations (rose) */
    --color-asso-bg: var(--color-pink-pale);
    --color-asso-text: var(--color-pink-dusty);
    --color-asso-primary: var(--color-pink-accent);
    --color-asso-accent: #764152;

    /* ---- TRANSPARENCES ---- */
    --color-navy-transparent: rgba(28, 34, 88, 0.02);
    --color-navy-shadow: rgba(28, 34, 88, 0.08);
    --color-navy-shadow-dark: rgba(28, 34, 88, 0.12);
    --color-navy-shadow-deeper: rgba(28, 34, 88, 0.15);
    --color-separator: rgba(255, 255, 255, 0.37);
    --color-border-light: rgba(0, 0, 0, 0.1);

    /* ---- COULEURS DE TEXTE ---- */
    --text-primary: #1C2258;
    --text-secondary: var(--color-gray-darker);
    --text-muted: var(--color-gray-text);
    --text-light: var(--color-gray-muted);
    --text-white: var(--color-white);

    /* ---- COULEURS DE FOND ---- */
    --bg-primary: var(--color-white);
    --bg-light: var(--color-gray-pale);
    --bg-pale: var(--color-gray-bg);
    --bg-section: #FFF7F6;
}


body{
    font-family: 'Urbanist', sans-serif !important;
}

a {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 500;
}

section{
    margin: 5rem 7.5rem
}
.section-full{
    margin: 0 !important
}

#ot-pc-content > section {
    margin: 0 !important;
}

#onetrust-button-group button, #onetrust-policy-text {
    font-size: 14px !important;
}

#onetrust-reject-all-handler {
    background-color: transparent !important;
    color: var(--color-navy) !important;
    border: none !important;
}


@media (min-width: 426px) {
    #onetrust-reject-all-handler {
        position: absolute !important;
        top: 30px !important;
        right: 15px !important;
    }
}

/* ---- Structure générale ---- */
.nuoma-header {
    padding-left: 120px;
    padding-right: 120px;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-lighter);
    padding-top: 12px;
}

/* ---- TOP LINE ---- */
.header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.btn-outline-pro:hover{
    background: var(--color-pro-accent) !important;
}

.logo-placeholder {
    width: 120px;
    height: 42px;
    background: #e0e0e0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-muted);
    font-size: 0.8rem;
}

.logo-img {
    height: 42px; /* taille visuelle identique à ta maquette */
    width: auto;
    display: block;
    object-fit: contain;
}

/* Option si tu veux un peu plus grand, comme ta capture semble le montrer */
@media (min-width: 1200px) {
    .logo-img {
        height: 48px;
    }
}


/* ---- Liens supérieurs ---- */
.header-links {
    display: flex;
    align-items: center;
    gap: 26px;
}

.header-links a {
    color: var(--color-navy-medium);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
}

.header-links a:hover {
    text-decoration: underline;
}

/* ---- User / Mon espace ---- */
.user-menu {
    display: flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 30px;
    cursor: pointer;
}

.user-icon {
    width: 26px;
    height: 26px;
    background: var(--color-white);
    border-radius: 50%;
    border: 1px solid #dcdcdc;
    margin-right: 6px;
}

.user-menu span {
    color: var(--color-navy-medium);
    font-weight: 600;
    font-size: 0.9rem;
}

.user-menu .arrow {
    margin-left: 4px;
}

/* ---- Divider ---- */
.header-divider {
    width: 100%;
    height: 1px;
    background: var(--color-gray-light);
    margin: 14px 0;
}

/* ---- BOTTOM LINE MENU ---- */
.header-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 14px;
}

.main-menu {
    display: flex;
    gap: 45px;
}

.main-menu a {
    color: var(--color-navy-medium);
    font-size: 1rem;
    text-decoration: none;
    font-weight: 600;
}

.main-menu a:hover {
    color: #1f3c88;
}

/* ---- BUTTON DEVIS ---- */
.btn-devis {
    background: #1f3c88;
    color: var(--color-white);
    padding: 10px 26px;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.95rem;
}

.btn-devis:hover, .app-btn:hover, .services-btn:hover {
    background: rgba(188, 23, 34, 1);
    text-decoration: none;
    color: rgba(255, 255, 255, 1)
}

.btn-hero-primary:hover {
    background: rgba(188, 23, 34, 1);
    border: 2px solid rgba(188, 23, 34, 1);
    text-decoration: none;
    color: rgba(255, 255, 255, 1)
}

/* ===============================
   BLOC MON ESPACE
   =============================== */

.user-menu {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px 6px 6px;
    border-radius: 30px;
    cursor: pointer;
}

/* Icon wrapper */
.user-icon-wrapper {
    width: 32px;
    height: 32px;
    background: var(--color-pink-light);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Icon style */
.user-icon {
    width: 18px;
    height: 18px;
    fill: #10205B;
}

/* Texte */
.user-label {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 700;
    color: var(--color-navy-medium);
}

/* Flèche */
.user-arrow {
    font-size: 0.9rem;
    color: var(--color-navy-medium);
    margin-left: 4px;
}

/* ===============================
   DROPDOWN
   =============================== */

.user-dropdown {
    position: absolute;
    top: 42px;
    right: 0;
    background: white;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.10);
    width: 170px;
    padding: 6px 0;
    display: none;
    opacity: 0;
    transform: translateY(-6px);
    transition: all .18s ease;
    z-index: 9999;
}

/* Lien dropdown */
.user-dropdown a {
    display: block;
    padding: 10px 16px;
    font-family: 'Roboto', sans-serif !important;
    color: var(--color-navy-medium);
    text-decoration: none;
    font-size: 0.9rem;
}

.user-dropdown a:hover {
    background: var(--color-pink-light);
}

/* Classe visible */
.user-dropdown.show {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* ===============================
   MENU PRINCIPAL — LIGNE BASSE
   =============================== */

/* Menu */
.main-menu {
    display: flex;
    align-items: center;
    gap: 70px; /* espacement large IDENTIQUE à ta capture */
}

/* Liens du menu */
.main-menu a {
    font-family: 'Roboto', sans-serif !important;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-navy-medium);
    text-decoration: none;
}

.main-menu a:hover {
    color: #1A2E7A; /* léger hover élégant */
}

/* ===============================
   BOUTON FAIRE UN DEVIS
   =============================== */

.btn-devis {
    background: var(--color-navy-light);
    color: var(--color-white) !important;
    padding: 10px 26px;
    border-radius: 50px;        /* arrondi comme sur ton screenshot */
    font-family: 'Roboto', sans-serif !important;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.95rem;
    white-space: nowrap;
    transition: 0.15s;
}



/* =========================================================
   HERO STATIC — ALIGNEMENT EXACT MAQUETTE
   ========================================================= */

.hero-static {
    position: relative;
    width: 100%;
    height: 504px; /* augmenté pour correspondre visuellement à ta capture */
    overflow: hidden;
}

/* Image */
.hero-static .hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow-clip-margin: unset;
}

/* Dégradé bleu */
.hero-static .hero-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 60%;
    height: 100%;
    background: var(--gradient-hero);
}

/* CONTENU */
.hero-static .hero-content {
    position: absolute;

    /* 🎯 POSITION EXACTE DU TEXTE */
    top: 54%;           /* avant 50%, maintenant plus bas */
    transform: translateY(-50%);

    left: 4.5%;         /* pour coller à ta mise en page */
    z-index: 10;
    color: white;
}

/* Sous-titre */
.hero-subtitle {
    font-size: 1.15rem;
    opacity: 0.95;
    font-family: "Urbanist", sans-serif
}

/* Titre */
.hero-title {
    font-size: 3rem; /* augmenté pour matcher ta capture */
    font-weight: 700;
    line-height: 1.22;
    max-width: 550px;
}

/* BOUTONS */
.hero-buttons {
    display: flex;
    gap: 16px;
}

.btn-hero-primary {
    /*border: 2px solid var(--color-navy-light);*/
    background: var(--color-navy-light);
    color: white;
    padding: 13px 30px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    font-size: 1.2rem !important;
}

.btn-hero-secondary {
    border: 2px solid white;
    color: white;
    padding: 13px 30px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    font-size: 1.2rem !important;
}

.btn-hero-secondary:hover {
    background: white;
    color: #1F2D68;
    text-decoration: none
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .hero-static {
        height: 480px;
    }

    .hero-static .hero-overlay {
        width: 100%;
        background: var(--gradient-hero);
    }

    .hero-static .hero-content {
        top: 50%;
        left: 5%;
    }

    .hero-title {
        font-size: 2.2rem;
    }
}

/* ========================================================= */
/*   BOUTONS FLOTTANTS DEVIS / CONTACT                        */
/* ========================================================= */
.floating-buttons {
    position: fixed;
    bottom: 100px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 9999;
}



@media (max-width: 768px) {
    .floating-buttons {
        display: none !important
    }
}

/* Base commune */
.btn-floating {
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 9px 0;
    border-radius: 10px;
    text-align: center;
    text-decoration: none;
    min-width: 90px;
    transition: 0.2s ease;
    display: inline-block;
}

/* ========================================================= */
/*     BOUTON "DEVIS" — VERSION BLEUE                         */
/* ========================================================= */

.btn-floating.btndevis {
    background: #10205B;
    color: var(--color-white);
    border: 2px solid #10205B;
}

.btn-floating.btndevis:hover {
    background: var(--color-navy-dark); /* bleu légèrement plus sombre */
    border-color: #0A1A46;
}

/* ========================================================= */
/*     BOUTON "CONTACT" — VERSION BLANCHE                     */
/* ========================================================= */

.btn-floating.btncontact {
    background: var(--color-white);
    color: var(--color-navy-medium);
    border: 2px solid #10205B;
}

.btn-floating.btncontact:hover {
    background: #10205B;
    color: var(--color-white);
}

/* ========================================================= */
/*  SECTION OFFRES — ALIGNEMENT PARFAIT DES CARTES            */
/* ========================================================= */

.offers-section {
    position: relative;
}


.offers-title {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--color-navy-medium);
    text-align: center;
    margin-bottom: 14px;
}

.offers-subtitle {
    text-align: center;
    font-size: 1.1rem;
    color: var(--color-gray-text);
    margin-bottom: 60px;
    line-height: 1.45;
}

/* ===== Carte : structure ===== */

.offers-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.offer-card {
    background: var(--color-white);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ===== Image en haut ===== */

.offer-img img {
    width: 100%;
    height: 250px;        /* ajuste si nécessaire */
    object-fit: cover;
    overflow-clip-margin: unset;
    display: block;
}

/* ===== Contenu ===== */

.offer-content {
    padding: 25px 25px 15px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* ===== Texte qui prend l'espace restant ===== */

.offer-text {
    font-family: "Urbanist", sans-serif;
    flex-grow: 1;              /* pousse le footer vers le bas */
    font-size: 15px;
    line-height: 1.45;
    color: #444;
    margin-bottom: 20px;
}

/* ===== Footer : toujours en bas ===== */

.offer-footer {
    margin-top: auto;
    display: flex;
    justify-content: flex-end; /* aligné à droite */
}

/* ===== Lien ===== */

.offer-link {
    font-weight: 700;
    color: var(--color-navy-medium);
    text-decoration: none;
}

.offer-link:hover {
    text-decoration: underline;
}


/* ========================================================= */
/*  SCROLL                                                   */
/* ========================================================= */
.scroll-top-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid #10205B;
    background: var(--color-white);
    color: var(--color-navy-medium);
    font-size: 1.3rem;
    cursor: pointer;
    display: none; /* caché au départ */
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.25s ease;
    margin: 0 auto;
}

/* Hover */
.scroll-top-btn:hover {
    background: #d5dcf6;
    color: var(--color-white);
}


/* SECTION BACKGROUND */
.nuoma-why-section {
    padding: 5rem 7.5rem;;
    background: var(--gradient-why);
}

/* GRID LAYOUT */
.why-grid {
    display: grid;
    grid-template-columns: 45% 55%;
    align-items: center;
    gap: 80px;
}

/* LEFT SIDE (TEXT) */
.why-left {
    margin-top: 20px;
}

.why-title {
    font-size: 28px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-navy-medium);
}

.why-dot {
    width: 12px;
    height: 12px;
    background: #D73A42;
    border-radius: 50%;
}

.why-desc {
    font-size: 1.2rem;
    margin: 20px 0 30px;
    line-height: 1.6;
}

.why-btn {
    background: #10205B;
    padding: 14px 32px;
    border-radius: 30px;
    color: white;
    font-weight: 700;
    text-decoration: none;
}

/* SLIDER WRAPPER (MASK) */
.why-slider-wrapper {
    position: relative;
    overflow: hidden;
    width: calc(300px * 2 + 30px); /* 2 cartes visibles */
    height: 300px
}

/* TRACK */
.why-slider {
    display: flex;
    /*gap: 30px;*/
    transition: transform 0.5s ease;
}

@media (max-width: 899px) {

    .why-card {
        flex: 0 0 100%;
        max-width: 92%;          /* 👈 clé du rendu */
        margin: 0 auto;          /* centre la carte */
    }

}
.d-none {
    display: none !important;
}
.why-card {
    padding: 28px 24px; /* respiration interne */
}
/* CARD */
.why-card {
    width: 279px;
    flex-shrink: 0;
    background: var(--color-white);
    padding: 19px;
    border-radius: 18px;
    box-shadow: 0 8px 5px rgba(0,0,0,0.08);
    margin-left: 25px;
}

.why-icon {
    width: 42px;
    margin-bottom: 20px;
}

.why-card-title {
    font-family: "Fredoka", sans-serif !important;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--color-navy-medium);
}

.why-card-text {
    font-size: 1rem !important;
    line-height: 1.45;
}

/* ARROWS */
.why-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 20;
}

.why-arrow.left {
    left: 0; /* ajuste selon ton design */
}

.why-arrow.right {
    right: -6px; /* ajuste selon ton design */
}

.why-arrow i {
    font-size: 28px;
    color: var(--color-navy-medium);
}


/* DOTS */
.why-dots {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 25px;
    height:13px
}

.why-dot-btn {
    width: 12px;
    height: 12px;
    background: var(--color-gray-border);
    border-radius: 50%;
    cursor: pointer;
}

.why-dot-btn.active {
    background: #10205B;
    transform: scale(1.15);
}


/* SECTION WRAPPER */
.nuoma-adherent-section {
    padding: 5rem 7.5rem;;
    background: var(--color-white);
}

/* GRID 50 / 50 */
.adherent-container {
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 40px;
}

/* LEFT BLOCK */
.adherent-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-navy-medium);
    margin-bottom: 25px;
}

.spantns{
    font-size: 1.9rem !important
}
.adherent-text {
    font-size: 1.2rem;
    line-height: normal;
    color: var(--color-gray-dark);
    max-width: 95%;
    margin-bottom: 10px
}

/* RIGHT BLOCK – IMAGE */
.image-badge-wrapper {
    position: relative;
    display: inline-block;
}

.custom-badge-wrapper .image-badge-image {
    width: 350px;
    height: 500px;
    object-fit: cover;
}

.image-badge-image {
    max-width: 520px;
    object-fit: cover;
    overflow-clip-margin: unset;
    border-radius: 0 50px 0 50px
}

.mi-te-mut{
    font-family: "Fredoka", sans-serif !important;
}
.mission{
    padding-left: 7.5rem !important;
    padding-right: 7.5rem !important;
}
.img-mutaema{
    max-width: 85% !important
}
/* BADGES STYLE */
.image-badge-badge {
    position: absolute;
    background: #fff;
    padding: 12px 22px;
    border-radius: 50px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-navy-medium);
    gap: 10px;
}

/* Badge icons */
.badge-icon {
    width: 18px;
    height: 18px;
}

.badge-icon-image {
    width: 80px;
    height: 38px;
    object-fit: contain;
}

/* POSITION BADGES EXACTLY LIKE YOUR SCREENSHOT */
.badge-bottom-left {
    bottom: 25px;
    left: -20px;
}

.badge-top-right {
    top: 25px;
    right: -20px;
}


/* Section wrapper */
.nuoma-app-section {
    padding: 5rem 7.5rem;;
    background: var(--color-white);
    border-radius: 24px;
    margin-top: 60px;
}

/* Grid structure */
.app-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: 60px;
    background: var(--color-gray-bg);
    padding: 1.25rem;
    border-radius: 34px;
}

/* Images */
.app-images {
    position: relative;
}

.phone-img {
    width: 260px;
    filter: drop-shadow(0 10px 22px rgba(0,0,0,0.15));
}

.phone-left {
    position: relative;
    left: 20px;
    transform: rotate(-8deg);
}

.phone-right {
    position: absolute;
    left: 150px;
    top: 40px;
    transform: rotate(8deg);
}

/* Text zone */
.app-content {
    font-family: Urbanist, sans-serif;
}

.app-title {
    font-size: 28px;
    color: var(--color-navy-muted);
    margin-bottom: 10px;
    font-weight: 700;
}

.app-subtitle {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
}

.app-desc {
    font-size: 1.2rem;
    color: var(--color-gray-dark);
    margin-bottom: 30px;
    line-height: 1.55;
}

/* Button */
.app-btn {
    display: inline-block;
    padding: 14px 32px;
    background: var(--color-navy-muted);
    color: #fff;
    border-radius: 40px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: 0.25s;
}



/* ============================
   COULEURS UTILISATEUR
============================ */

.text-blue {
    color: var(--color-navy)
}
strong.text-blue {
    color: rgba(49, 49, 49, 1)
}

.sous-titre-hero {
    color: var(--color-gray-darker);
}

/* ============================
   SECTION
============================ */

.services-section {
    background-color: var(--color-white);
    padding: 90px 20px;
}

/* TITRE */
.services-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 70px;
    text-align: center !important
}

.bg-rose{
    background: #FBB0B017
}
.service-content h3{
    font-family: "Fredoka", sans-serif;
}
h2{
    font-family: "Roboto", sans-serif;
}
/* ============================
   GRID
============================ */

.services-grid {
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

/* ============================
   CARD
============================ */

.service-card {
    background: var(--color-white);
    border-radius: 24px;
    padding: 38px 42px;
    box-shadow: 0 18px 40px rgba(28, 34, 88, 0.12);

    display: flex;
    align-items: center;
    gap: 30px;

    min-height: 250px;
}

/* ============================
   ICONES
============================ */

.service-icon {
    flex-shrink: 0;
    width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-icon svg {
    max-height: 110px;
    width: auto;
}

.service-icon.pink svg {
    color: var(--color-red-light);
}

.service-icon.navy svg {
    color: var(--color-navy);
}

/* ============================
   TEXTE
============================ */

.service-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.service-content h3 {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

.service-content p {
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 0;
}

.service-content strong {
    font-weight: 700;
}



/* ============================
COULEURS EXISTANTES
============================ */

.text-blue {
    color: var(--color-navy)
}

.sous-titre-hero {
    color: var(--color-gray-darker);
}

/* ============================
   SECTION
============================ */

.services-plus-section {
    padding: 80px 120px;
}

/* ============================
   GRID
============================ */

.services-plus-grid {
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

/* ============================
   CARDS
============================ */

.services-plus-card {
    background-color: rgba(28, 34, 88, 0.02);
    border-radius: 32px;
    padding: 42px 44px;

}

/* TITRE */
.services-plus-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 28px;
    color: rgba(28, 34, 88, 1)
}

/* ITEM */
.services-plus-item {
    margin-bottom: 22px;
}

.services-plus-item strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
}

/* ============================
   ESPACE ADHERENT
============================ */

.services-plus-card-app {
    position: relative;
    overflow: hidden;
}

.services-plus-app-text {
    max-width: 380px;
    margin-bottom: 28px;
    line-height: 1.6;
}

.services-plus-btn {
    display: inline-block;
    padding: 14px 28px;
    border-radius: 999px;

    background-color: var(--color-navy); /* BLEU IDENTIQUE */
    color: var(--color-white);

    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.services-plus-btn:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

/* IMAGE APP */
.services-plus-app-image {
    position: absolute;
    right: 36px;
    bottom: 24px;
    width: 180px;
}

/* ============================
   RESPONSIVE
============================ */

@media (max-width: 900px) {
    .services-plus-grid {
        grid-template-columns: 1fr;
    }

    .services-plus-app-image {
        width: 200px;
        position: initial;
    }
}
@media (max-width: 1400px) {
    .footer-col-main{
        gap: 98px !important
    }
}

.link-bold{
    font-family: 'Urbanist', serif;
    font-weight: bold;
    color: rgba(49,49,49,1);
    text-decoration: underline
}




/* ============================
   RESPONSIVE
============================ */

@media (max-width: 900px) {
    .services-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .service-card {
        flex-direction: row;
        align-items: flex-start;
        min-height: auto;
    }

    .service-icon {
        width: auto;
    }
    .services-plus-section{
        padding: 51px 15px;
    }

    .services-plus-app-image{
        margin: 30px 60px;
    }
    .image-badge-image{
        width: 100%
    }
    .service-card{
        padding: 38px 11px;
    }
}

/* GLOBAL SPACING */
.services-section {
    padding: 5rem 7.5rem;
}

/* GRID LAYOUT */
.services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* LEFT TEXT PART */
.services-title {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    color: #0F1E61;
    margin-bottom: 20px;
    font-family: 'Roboto', sans-serif;
}

.red-dot {
    width: 12px;
    height: 12px;
    aspect-ratio: 1;
    background: var(--color-red-secondary);
    border-radius: 50%;
    display: inline-block;
    margin-right: 10px;
    position: relative;
    top: -2px;
}

.text-left-important {
    text-align: left !important
}

.services-desc {
    font-size: 1.2rem;
    line-height: 1.5;
    margin-bottom: 40px;
    color: var(--color-gray-dark);
    font-family: 'Urbanist', sans-serif;
}

.services-btn {
    display: inline-block;
    background: var(--color-navy-darker);
    color: #fff;
    padding: 12px 28px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
}

/* RIGHT BLOCK */
.services-right {
    display: flex;
    justify-content: flex-start;
}

/* SERVICE ITEMS GRID */
.services-list {
    display: grid;
    grid-template-columns: repeat(2, 260px);
    gap: 14px 22px;
}

/* EACH SERVICE ITEM */
.service-item {
    background: #FFF5F6;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.service-item img {
    width: 20px;
    height: 20px;
}

.service-item span {
    font-size: 14px;
    font-weight: 600;
    color: #0F1E61;
    font-family: 'Roboto', sans-serif;
}



/* ============= GLOBAL ============= */
.nuoma-footer {
    width: 100%;
    font-family: "Roboto", sans-serif;
}

/* ============= RESEAUX ============= */
.footer-social {
    background: var(--color-gray-footer);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 15px 120px;
    gap: 20px;
}

.footer-social .social-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-navy-alt);
    margin-right: 10px;
}

.social-icons a img {
    width: 28px;
    height: 28px;
    opacity: 0.85;
}

.social-icons a:hover img {
    opacity: 1;
}


/* ============= SECTION BLEUE ============= */
.footer-top {
    background: var(--color-navy-alt);
    color: white;
    padding: 3.75rem 7.5rem 1px;
}

.menu-separator{
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    width: 80%;
    text-align: center;
}

/* Colonne 1 */
.footer-col-main {
    display: flex;
    gap: 172px;
}

.footer-logo {
    width: 115px;
}

.separateur{
    background: rgba(255,255,255,0.37)
}
.footer-address,
.footer-phone {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 20px;
}

.footer-phone span {
    font-size: 13px;
}

.footer-partners .partner {
    height: 42px;
    margin-right: 20px;
}

/* Colonnes menu */
.footer-col h4 {
    font-weight: 600;
    margin-bottom: 20px;
    font-size: 1.2rem;
}

.footer-col a {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
    color: white;
    text-decoration: none;
}

.footer-col a:hover {
    text-decoration: underline;
}

/* ============= COPYRIGHT ============= */
.footer-copy {
    padding: 10px 120px 30px;
    background: var(--color-navy-alt);
    color: white;
    text-align: center;
    font-size: 0.75rem !important;
}

/* ============= LEGAL BAR ============= */
.footer-legal {
    background: var(--color-gray-pale);
    text-align: center;
    padding: 18px 0;
}

.footer-legal a {
    margin: 0 15px;
    font-size: 14px;
    color: var(--color-gray-dark);
    text-decoration: none;
}

.footer-legal a:hover {
    text-decoration: underline;
}



/* =========================================================
   🎯 VERSION MOBILE COMPLETE — max-width 768px
   ========================================================= */
@media (max-width: 768px) {

    h1{
        font-size: 1.5rem !important
    }
    .footer-logo{
        margin: 0 auto;
    }


    /* ----------- GLOBAL SPACING ----------- */
    body {
        overflow-x: hidden;
    }

    /* ----------- HEADER ----------- */

    .nuoma-header {
        padding: 14px 20px;
    }

    .header-top {
        flex-direction: row;
        justify-content: space-between;
    }

    .header-links {
        display: none; /* on masque les liens supérieurs */
    }

    .header-bottom {
        display: none; /* menu desktop masqué */
    }

    /* Petit menu burger si tu veux l’ajouter plus tard */
    .mobile-burger {
        display: block !important;
    }

    .logo-img {
        height: 40px;
    }


    /* ----------- HERO STATIC ----------- */
    .hero-static {
        height: 280px;
    }

    .hero-static .hero-overlay {
        width: 100%;
        background: var(--gradient-hero);
    }

    .hero-static .hero-content {
        left: 6%;
        top: 55%;
        width: 100%;
    }

    .hero-title {
        font-size: 24px;
        max-width: 330px;
    }

    .hero-buttons {
        display: grid;
        flex-direction: row;
        width: 90%;
        gap: 10px;
    }

    .offers-actions{
        display: grid !important;
    }

    .nuoma-adherent-section{
        padding: 0 !important
    }
    .btn-hero-primary,
    .btn-hero-secondary {
        width: 100%;
        text-align: center;
        font-size: 11px;
    }


    /* ----------- OFFRES SECTION ----------- */
    .offers-section {
        padding: 50px 20px;
    }

    .offers-cards {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .offer-img img {
        height: 200px;
    }

    /* ----------- WHY SECTION (slider) ----------- */

    .nuoma-why-section {
        padding: 60px 20px;
        background: var(--gradient-why-mobile);
    }

    .why-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .why-slider-wrapper {
        width: 100%;
    }

    .why-card {
        flex: 0 0 50%;
    }

    @media (max-width: 899px) {
        .why-card {
            flex: 0 0 100%;
        }
    }

    .why-card {
        width: 45%;
        margin: 0 auto;
    }

    .why-arrow.left {
        /*left: -10px;*/
        display: none
    }

    .why-arrow.right {
        /*right: -10px;*/
        display: none
    }

    .why-arrow i {
        font-size: 24px;
    }


    /* ----------- ADHERENT SECTION ----------- */

    .profil-tabs-wrapper h4 {
        font-size: 15px;
        font-weight: 700;
        color: rgb(16, 32, 91);
        margin: 25px 0 12px;
    }


    .nuoma-adherent-section {
        padding: 60px 20px;
    }

    .adherent-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .image-badge-image {
        width: 100%;
    }

    .badge-bottom-left {
        bottom: 10px;
        left: 10px;
    }

    .badge-top-right {
        top: 10px;
        right: 10px;
    }


    /* ----------- MOBILE APP SECTION ----------- */

    .nuoma-app-section {
        padding: 50px 20px;
    }

    .app-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 1.25rem;
    }

    .app-images {
        text-align: center;
    }

    .app-image {
        text-align: center;
        width: 100%
    }

    .phone-img {
        width: 180px;
    }

    .phone-right {
        left: 90px;
        top: 30px;
    }

    .app-title {
        font-size: 24px;
    }

    .app-subtitle {
        font-size: 18px;
    }

    .app-desc {
        font-size: 15px;
    }

    .app-btn {
        width: 100%;
        text-align: center;
        padding: 14px 0;
    }


    /* ----------- SERVICES SECTION ----------- */

    .services-section {
        padding: 60px 20px;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    .services-list {
        grid-template-columns: 1fr;
        gap: 10px;
    }


    /* ----------- FLOATING BUTTONS ----------- */

    .floating-buttons {
        bottom: 20px;
        right: 20px;
    }


    /* ----------- FOOTER ----------- */

    /* Réseaux sociaux */
    .footer-social {
        padding: 1.25rem;
        justify-content: center;
    }

    .footer-social .social-title {
        margin: 0;
        font-size: 17px;
    }

    .social-icons {
        gap: 12px;
    }

    /* Partie bleue */
    .footer-top {
        padding: 40px 20px;
    }

    .footer-col-main {
        flex-direction: column;
        gap: 40px;
    }

    .footer-col {
        margin-bottom: -15px;
    }

    .footer-partners {
        display: flex;
        justify-content: center;
        gap: 20px;
        margin-bottom: 50px;
    }

    .footer-partners .partner {
        height: 32px;
    }
    .separateur{
        display: none
    }


    /* Copyright */
    .footer-copy {
        padding: 15px 20px;
        font-size: 13px;
        text-align: center;
    }

    /* Legal bar */
    .footer-legal {
        padding: 15px 10px;
    }

    .footer-legal a {
        display: block;
        margin: 8px 0;
        font-size: 14px;
    }
}


/* =======================
   HEADER MOBILE
   ======================= */
.mobile-header {
    display: none;
}

/* Afficher seulement en dessous de 900px */
@media(max-width: 990px) {


    .mobile-logo img {
        height: 38px;
    }
}
@media(max-width: 991px) {

    .nuoma-header { display:none; }

    .mobile-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 20px;
        background: #fff;
        border-bottom: 1px solid #eee;
    }

    .mobile-logo img {
        height: 38px;
    }

    .mobile-actions {
        display: flex;
        gap: 28px;
    }

    .mobile-actions button {
        background: none;
        border: none;
        text-align: center;
        font-size: 12px;
        color: var(--color-navy-medium);
        font-weight: 600;
    }

    .mobile-actions i {
        font-size: 22px;
        display: block;
        margin: auto;
    }
}


/* =======================
   PANELS MOBILE
   ======================= */
.mobile-panel {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background: #fff;
    z-index: 99999;
    overflow-y: auto;
    transition: right .35s ease;
    padding: 1.25rem;
}

.mobile-panel.open {
    right: 0;
}

/* Header du panel */
.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.panel-logo {
    height: 36px;
}

.panel-close {
    background: none;
    border: none;
    font-size: 14px;
    color: var(--color-navy-medium);
}

.panel-close i {
    font-size: 20px;
    margin-right: 4px;
}

/* Section Mon Espace */
.panel-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 18px;
}

.panel-links a {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid #eee;
    color: var(--color-navy-medium);
    font-size: 15px;
}

/* MENU PRINCIPAL */
.menu-section h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-navy-medium);
    margin: 25px 0 12px;
}

.menu-block a {
    display: flex;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid #eee;
    color: var(--color-navy-medium);
    font-size: 15px;
}

.menu-block i {
    opacity: .6;
}

/* Onglets profil */
.profil-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.profil-tabs button {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid #10205B;
    background: white;
    color: var(--color-navy-medium);
    font-weight: 600;
}

.profil-tabs button.active {
    background: #10205B;
    color: white;
}

/* Devis */
.menu-devis-btn {
    display: block;
    width: 100%;
    padding: 14px 0;
    text-align: center;
    background: var(--color-navy-muted);
    color: white;
    border-radius: 30px;
    font-weight: 700;
    margin: 30px 0;
}


/* TABS WRAPPER */
.profil-tabs-wrapper {
    overflow-x: auto;
    white-space: nowrap;
    padding: 0 15px;
    border-bottom: 1px solid #e5e7eb;
}

.profil-tabs {
    display: flex;
    gap: 10px;
}

.profil-tabs .tab {
    padding: 8px 16px;
    background: var(--color-gray-pale);
    border-radius: 20px;
    border: 1px solid transparent;
    font-size: 15px;
    color: var(--color-navy-medium);
    flex-shrink: 0;
}

.profil-tabs .tab.active {
    background: #10205B;
    color: #fff;
    border-color: var(--color-navy-medium);
}

/* SECTIONS */
.menu-content {
    display: none;
    padding: 20px 15px 40px;
}

.menu-content.active {
    display: block;
}

.menu-block a {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #ececec;
    font-size: 15px;
}

.menu-devis-btn {
    display: block;
    width: 100%;
    background: #10205B;
    color: #fff;
    padding: 14px;
    border-radius: 8px;
    margin-top: 25px;
    text-align: center;
}


/* WRAPPER */
.profil-tabs-wrapper {
    overflow-x: auto;
    white-space: nowrap;
    padding: 0 15px;
    border-bottom: 1px solid #e5e7eb;
}

/* TABS */
.profil-tabs {
    display: flex;
    gap: 10px;
    padding-bottom: 10px;
}

.profil-tabs .tab {
    padding: 8px 16px;
    background: var(--color-gray-pale);
    border-radius: 20px;
    border: 1px solid transparent;
    font-size: 15px;
    color: var(--color-navy-medium);
    flex-shrink: 0;
    transition: 0.2s;
}

/* PART 1️⃣ — PARTICULIER (bleu) */
.profil-tabs .tab[data-target="particulier"].active {
    background: var(--color-blue-light);
    color: var(--color-blue-pale);
    border-color: var(--color-blue-light);
}

.particulier-text{
    color: var(--color-particuliers-accent) !important
}

/* PART 2️⃣ — MAIRIE (vert pastel) */
.profil-tabs .tab[data-target="mairie"].active {
    background: var(--color-green-light);
    color: var(--color-green-muted);
    border-color: var(--color-green-light);
}
.profil-tabs .tab[data-target="mairie"].active {
    background: var(--color-green-light);
    color: var(--color-green-muted);
    border-color: var(--color-green-light);
}

.mairie-text{
    color: var(--color-green-accent) !important
}

/* PART 3️⃣ — PROFESSIONNEL (violet) */
.profil-tabs .tab[data-target="pro"].active {
    background: var(--color-purple-light);
    color: var(--color-purple-muted);
    border-color: var(--color-purple-light);
}

.pro-text{
    color: var(--color-purple-accent) !important
}

/* PART 4️⃣ — ASSOCIATION (rose pastel) */
.profil-tabs .tab[data-target="asso"].active {
    background: var(--color-pink-pale);
    color: var(--color-pink-dusty);
    border-color: var(--color-pink-pale);
}

.asso-text{
    color: var(--color-pink-accent) !important
}

/* CONTENT SECTIONS */
.menu-content {
    display: none;
    padding: 20px 15px 40px;
}

.menu-content.active {
    display: block;
}

.menu-block a {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #ececec;
    font-size: 15px;
}

/* BTN DEVIS */
.menu-devis-btn {
    display: block;
    width: 100%;
    background: #10205B;
    color: #fff;
    padding: 14px;
    border-radius: 8px;
    margin-top: 25px;
    text-align: center;
    font-weight: 600;
}

@media only screen
and (max-width: 1194px){
    .separator-footer{
        display: none
    }
}
@media only screen
and (min-width: 1024px)
and (max-width: 1194px)
and (orientation: landscape) {
    .main-menu a{
        font-size: 12px
    }

    .offers-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .why-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        width: 100%;
    }

    .why-left {
        margin-top: 20px;
        text-align: center;
    }
    .why-slider-wrapper {
        position: relative;
        overflow: hidden;
        width: calc(400px * 2 + 30px);
    }
    .why-card{
        width: 357px;

    }
    .image-badge-image{
        width: 100%
    }
    .footer-col-main {
        display: block;
        gap: 151px;
    }
}



@media only screen
and (min-width: 800px)
and (max-width: 900px)
and (orientation: landscape) {
    .main-menu a{
        font-size: 12px
    }

    .offers-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .why-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        width: 100%;
    }

    .why-left {
        margin-top: 20px;
        text-align: center;
    }

    .why-slider-wrapper {
        width: calc(305px * 2 + 30px);
    }

    .why-card{
        width: 260px;

    }

    .image-badge-image{
        width: 100%
    }

    .footer-col-main {
        display: block;
        gap: 151px;
    }

    .app-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        width: 100%;
    }
}

.menu-devis-btn{
    color: white !important;
}



@media only screen
and (min-width: 768px)
and (max-width: 834px)
and (orientation: portrait) {
    .mobile-panel.open{
        right: 46%;
    }
    .mobile-panel{
        width: 54%;
    }

    .offers-cards {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 18px;
    }

    .nuoma-why-section {
        padding: 80px 37px;
        display: flex;
    }

    .why-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        width: 100%;
    }

    .adherent-container {
        grid-template-columns: 1fr;
        gap: 40px;
        width: 100%;
    }

    .footer-col-main {
        display: inline-grid;
        gap: 40px;
        grid-template-columns: 1fr;
    }


    .app-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        width: 100%;
    }

    .why-left {
        margin-top: 20px;
        text-align: center;
    }


}

.custom-breadcrumb {
    display: flex;
    align-items: center;
    gap: 5px;
    background-color: var(--color-gray-lightest);
    padding-left: 50px;
    list-style: none;
    margin: 0;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

@media (max-width: 768px) {
    .custom-breadcrumb {
        padding-left: 1rem;
    }
}

.custom-breadcrumb-item a, .custom-breadcrumb-item {
    color: var(--color-gray-darker);
    font-size: 0.9rem;
    text-decoration: underline;
}

.custom-breadcrumb-item.active {
    text-decoration: none;
}

.bandeau-mutuelle {
    background: var(--gradient-bandeau-mutuelle);
    padding: 4rem 8rem;
}
@media (max-width: 768px) {
    .bandeau-mutuelle {
        padding: 1rem 2rem;
    }
}
.bandeau-text > p {
    font-weight: 500;
    font-size: 1.5625rem;
    line-height: 26px;
    color: var(--color-gray-darker);
}
.bandeau-text > h1 {
    font-weight: 700;
    color: var(--color-navy)
}
.bandeau-text > h1 > span.textmutuelle {
    font-weight: 700;
    color: var(--color-red-primary);
}

.chiffres-h2 {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-navy)
}
.chiffres-card {
    background-color: var(--color-red-very-light);
    border-top-left-radius: 25px;
    border-bottom-right-radius: 25px;
}
.chiffres-card > p {
    margin: 0;
}
.chiffres-primary {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-size: 1.8rem !important;
    color: var(--color-red-primary);
}
.chiffres-secondary {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-size: 34px;
    line-height: 37px;
    color: var(--color-navy)
}
.chiffres-terciary {
    font-family: 'Urbanist', sans-serif !important;
    font-weight: 400;
    font-size: 1.5625rem;
    line-height: 27px;
    color: var(--color-gray-darker);
}
.chiffres-fortiary {
    font-style: italic;
    font-size: 17px;
}

.histoire-card {
    background-color: #1C225805;
    border-radius: 25px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
}
.histoire-h2 {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-navy)
}
.histoire-texte-1 {
    font-family: 'Urbanist', sans-serif !important;
    font-weight: 400;
    font-size: 27px;
    line-height: normal;
}
.histoire-h3 {
    font-family: 'Urbanist', sans-serif !important;
    font-weight: 700;
    font-size: 34px;
    line-height: normal;
}
.histoire-texte-2 {
    font-family: 'Urbanist', sans-serif !important;
    font-weight: 400;
    font-size: 27px;
    line-height: normal;
}
.bold {
    font-weight: 600;
}
.italic {
    font-style: italic;
}

.mission {
    background-color: rgba(254, 242, 244, 0.7);
}
.mission-header {
    display: flex;
    align-items: center;
}
.mission-title {
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 37px;
    color: var(--color-navy)
}
.mission-list {
    list-style: none;
}
.mission-card {
    background-color: var(--color-white);
    border-radius: 25px;
    box-shadow: 0 4px 4px #1C225826;
}
.mission-icon {
    width: 55px;
    height: 55px;
}
.mission-text {
    font-family: 'Roboto Bold', sans-serif;
    font-weight: 400;
    font-size: 29px;
    line-height: normal;
    color: var(--color-navy);
    margin-top: 10px;
    word-break: break-word;
    overflow-wrap: break-word;
}
.mission-text span{
    font-weight: 700
}

.organisation-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.organisation-title {
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 40px;
    color: var(--color-navy)
}
.organisation-text {
    font-family: 'Urbanist', sans-serif !important;
    font-weight: 400;
    font-size: 27px;
    line-height: normal;
}
.organisation-text > a {
    font-weight: 700;
    text-decoration: underline;
    color: var(--color-gray-darker);
}
.organisation-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.organisation-list-item {
    background-color: #FFF8F9;
    display: flex;
    align-items: center;
    padding: 1rem;
}
.organisation-list-item > p {
    margin: 0;
}
.organisation-list-item-text {
    font-weight: 500;
    font-size: 20px;
    line-height: normal;
    text-transform: uppercase;
}

.document-title {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-navy)
}
.document-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border: solid 1px var(--color-gray-darker);
    border-radius: 25px;
    padding: 3rem;
    width: 100%;
}
.document-item-link {
    display: flex;
    gap: 2rem;
    align-items: center;
    font-weight: 700;
    font-size: 28px;
    line-height: normal;
    color: var(--color-gray-darker);
}
.document-item-link:hover {
    color: var(--color-gray-darker);
}
.document-item-link p {
    margin: 0;
}
.document-item-link span {
    font-weight: 400 !important;
    font-size: 21px !important;
}

.publication-title {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-navy)
}
.publication-sfcr, .publication-lec {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border: solid 1px var(--color-gray-darker);
    border-radius: 25px;
}
.publication-lec-title, .publication-sfcr-title {
    font-weight: 700;
    font-size: 34px;
    line-height: normal;
    align-self: center;
    margin-bottom: 2rem;
}
.publication-item-link {
    display: flex;
    gap: 2rem;
    align-items: center;
    font-weight: 700;
    font-size: 28px;
    line-height: normal;
    color: var(--color-gray-darker);
}
.publication-item-link:hover {
    color: var(--color-gray-darker);
}
.publication-item-link p {
    margin: 0;
}
.publication-item-link span {
    font-weight: 400 !important;
    font-size: 21px !important;
}
.publication-footer {
    font-family: 'Urbanist', sans-serif !important;
    font-weight: 300;
    font-style: italic;
    font-size: 1.5625rem;
    line-height: normal;
    margin: 1rem 0 2rem 0;
}


.gradient-particulier{
    background: linear-gradient(
            90deg,
            rgba(0, 151, 255, 0.05) 0%,
            rgba(0, 151, 255, 0.15) 15%,
            rgba(0, 151, 255, 0.15) 75%,
            rgba(0, 151, 255, 0.05) 100%);
}

.offers-cards-particuliers{
    grid-template-columns: repeat(3, 1fr);
    width: 90%;
    margin: 0 auto;
}

.adherent-container-particuliers{
    gap: 0;
}


.adherent-text-particulier{
    font-size: 18px;
    max-width: 680px;
}

.highlight {
    position: relative;
    display: inline-block;
    z-index: 1;
}
.hl-particuliers::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0.01em; /* ajuste la hauteur du surlignage */
    width: 100%;
    height: 0.35em;
    background: rgba(197, 234, 244, 1);
    z-index: -1;
    border-radius: 4px;
}

.section-particulier > .offers-cards > .offer-card > .offer-content > .offer-heading{
    color: rgba(63, 99, 118, 1);
    font-size: 20px;
}

.offer-heading.tnsInfo{
    color: var(--color-navy) !important;
    font-size: 1.5rem !important;
}

.offer-heading.tnsInfo span{
    color: var(--color-gray-darker) !important;
    font-size: 1rem !important;
}


.gradient-particulier-senior{
    background: rgba(223, 237, 244, 0.42)
}


.adherent-container-particuliers{
    gap: 0;
}

.adherent-title-particulier{
    line-height: 3rem;
}

.adherent-text-particulier{
    font-size: 18px;
    max-width: 680px;
}




.offers-page{
    display: flex;
    gap: 30px;
    margin: 0 auto;
    justify-content: center;
}
.section-particulier > .offers-cards > .offer-card > .offer-content > .offer-heading{
    color: rgba(63, 99, 118, 1);
    font-size: 20px;
}




/* ACCESSIBILITÉ */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
}

/* CARD */
.offer-card {
    width: 320px;
    background: #fff;
    border-radius: 22px;
    text-decoration: none;
    color: var(--color-navy);
    transition: transform .25s ease, box-shadow .25s ease;
}

.offer-card:hover,
.offer-card:focus-visible {
    transform: translateY(-6px);
    text-decoration: none
}

.offer-card-noLink:hover,
.offer-card-noLink:focus-visible {
    transform: none !important;
    text-decoration: none
}

.btn-pro{
    border: 1px solid rgba(103, 84, 159, 1) !important;
}

.btn-pro:hover{
    border: 1px solid #c8c9e7 !important;
    background:  #c8c9e7 !important;
    color: #241B4B !important
}
.detail-page{
    box-shadow: 0 4px 4px 0 rgba(28, 34, 88, 0.15);
}

/* IMAGE */
.offer-image img {
    width: 100%;
    height: 190px;
    object-fit: cover;

    overflow-clip-margin: unset;
    border-radius: 22px 22px 0 0;
}

/* BODY */
.offer-body {
    padding: 1.4rem 1.4rem 1.6rem;
}

.offer-title {
    font-size: 1.5625rem;
    font-weight: 700;
    margin-bottom: .4rem;
    color: rgba(28, 34, 88, 1)
}

.offer-description {
    font-size: 1rem !important;
    font-weight: 400;
    line-height: 1.45;
    color: var(--color-gray-text);
    margin-bottom: 1.2rem;
}

/* FEATURES */
.offer-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.offer-features li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .45rem 0;
    font-size: .85rem;
}

.feature {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    color: rgba(28, 34, 88, 1)
}

.icon {
    font-size: .9rem;
    color: var(--color-blue-dusty);
}

.icon img {
    width: 24px
}

/* DOTS */
.rating {
    display: flex;
    gap: .35rem;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 0.094rem solid var(--color-blue-teal);
}

.dot.filled {
    background: var(--color-blue-teal);
}

.dot.empty {
    background: transparent;
    border-style: solid;
    border-color: var(--color-gray-disabled)
}

/* FOOTER */
.offer-footer {
    margin-top: 2rem;
    text-align: center;
    border-top: 1px solid #e9ecf3;
    padding-top: 1rem;
    display: contents;
}

.recommendation {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: rgba(28, 34, 88, 1);
    margin-bottom: .2rem;
}

.offer-name {
    font-family: "Fredoka", sans-serif;
    display: block;
    font-size: 1.2rem;
    color: rgba(59, 126, 161, 1);
}

.price {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: .2rem;
    color:rgba(28, 34, 88, 1)
}

.price span {
    font-size: 13px;
}

.price sup {
    font-size: .7rem;
}

/* ACTIONS */
.offers-actions {
    margin-top: 2.5rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.btn-primary {
    background: var(--color-navy);
    color: #fff;
    padding: .8rem 1.6rem;
    border-radius: 999px;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-outline {
    border: 1px solid var(--color-navy);
    color: var(--color-navy);
    padding: .8rem 1.6rem;
    border-radius: 999px;
    text-decoration: none;
    text-align: center;
    font-weight: 700;
}

.btn-out:hover{
    background: var(--color-navy);
    color: white;
    text-decoration: none
}

.btn-outline small {
    display: block;
    font-size: .7rem;
}

.p-nuoma{
    padding: 80px 120px;
}

.d-c-offer{
    width: 75%;
}
.mtb-2{
    margin-top: 2px;
    margin-bottom: 2px;
}

.d-c-offer .document-item-link{
    font-size: 1.2rem;
    line-height: 20px;
}

.d-c-offer .document-item-link > p > span{
    font-size: 12px !important;
    color: rgba(49, 49, 49, 1)
}



.feature-highlight {
    background: var(--gradient-feature-highlight);
}

.feature-highlight__container {
    margin: auto;
    display: grid;
    grid-template-columns: 50% 2fr;
    gap: 4rem;
    align-items: center;
    width: 100%;
}

/* CARD */
.feature-card {
    background: var(--color-white);
    border-radius: 22px;
    padding: 2rem 2.2rem;
    box-shadow: 0 4px 4px rgba(28, 34, 88, 0.15);
}

.feature-card__title {
    font-family: "Fredoka", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: rgba(28, 34, 88, 1);
    margin-bottom: .6rem;
}

.feature-card__text {
    font-size: .9rem;
    line-height: 1.45;
    color: var(--color-gray-text);
    margin-bottom: 1.5rem;
}

.feature-card__price {
    font-size: 2rem !important;
    font-weight: 700;
    color: rgba(28, 34, 88, 1);
}

.feature-card__price span {
    font-size: .8rem;
    font-weight: 400;
}

.feature-card__price sup {
    font-size: .8rem;
    font-weight: 400;
}

/* CONTENT */
.feature-content h2 {
    font-size: 1.35rem;
    color: rgba(28, 34, 88, 1);
    margin-bottom: .6rem;
    font-weight: 700;
    line-height: 1.3;
}

.feature-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: rgba(59, 126, 161, 1);
    border-radius: 50%;
    margin-right: .5rem;
    transform: translateY(-2px);
}

.feature-content p {
    font-size: 15px;
    color: rgba(49, 49, 49, 1);
    margin-bottom: 1.6rem;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .feature-highlight__container {
        grid-template-columns: 1fr;
        gap: 2rem;
        display: grid;
    }
    .feature-highlight.p-nuoma{
        padding: 50px
    }

    .services-right {
        margin-top: 23px;
    }


    .feature-card {
        width: 100%;
    }

    .services-grid {
        display: block;
    }

}

.btn-download{
    font-weight: 700
}

.btn-download > .icon img {
    padding-bottom: 7px;
}


.blue-dot {
    width: 12px;
    height: 12px;
    background: rgba(59, 126, 161, 1);
    border-radius: 50%;
    display: inline-block;
    margin-right: 10px;
    position: relative;
    top: -2px;
}

.service-item-particuliers{
    background: rgba(221, 237, 242, 1)
}

.adh-prev{
    max-width: 95% !important
}
@media screen and (max-width: 1080px) {
    .adherent-title-particulier {
        font-size: 1.5625rem;
        line-height: 34px;
    }
    .adherent-text-particulier {
        font-size: 12px;
        max-width: 680px;
    }


    .feature {
        font-size: 9px;
    }

    .offer-description {
        height: 119px;
    }


    .d-c-offer {
        width: 100%;
    }
}

@media screen and (max-width: 900px) {
    .nuoma-adherent-section {
        padding: 25px 47px;
    }
    .offers-page {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .offer-card{
        width: 100%
    }
    .offers-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .adherent-container{
        width: 100%;
        padding: 35px 40px;
    }
    .nuoma-app-section{
        width: 100%;
        padding: 35px 40px;
    }
    .image-badge-image{
        width: 100%
    }

    .services-left{
        text-align: center
    }
    .services-list{
        margin: 0 auto;
    }

    .why-grid{
        display:block;
    }
    .why-slider{
        margin-top: 60px;
    }

    .footer-col-main {
        display: grid;
        gap: 0;
        grid-template-columns: repeat(1, 1fr);
    }
}

@media screen and (max-width: 900px) {
    .nuoma-adherent-section {
        padding: 25px 47px;
    }

    .offers-page {
        display: grid;
        grid-template-columns: repeat(1, 1fr) !important;
    }
}

.mission-pro2 > span{
    font-size: 1.2rem !important
}

@media screen and (max-width: 1024px) {
    .nuoma-adherent-section {
        padding: 25px 47px;
    }
    .offers-page {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .offer-card{
        width: 100%
    }
    .offers-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .adherent-container{
        width: 100%;
        padding: 35px 40px;
    }
    .nuoma-app-section{
        width: 100%;
        padding: 35px 40px;
    }
    .image-badge-image{
        width: 100%
    }

    .services-left{
        text-align: center
    }
    .services-list {
        margin: 33px auto;
    }

    .why-grid{
        display:block;
    }
    .why-slider{
        margin-top: 60px;
    }

    .footer-col-main {
        display: grid;
        gap: 0;
        grid-template-columns: repeat(1, 1fr);
    }
    .why-slider-wrapper{
        margin: 0 auto;
    }

    .nuoma-why-section{
        text-align: center
    }
    .main-menu a {
        font-size: 12px;
    }

    .services-grid{
        display: block;
    }

    .services-plus-app-image {
        opacity: 15.8%;
        z-index: -1;
    }
}

.offer-link{
    text-align: right
}

/* ============================
   MOBILE : DÉSACTIVÉ EN DESKTOP
============================ */

/* Desktop */
@media (min-width: 992px) {
    .mobile-header,
    .mobile-panel {
        display: none !important;
    }
}

/* Mobile */
@media (max-width: 991px) {
    .mobile-header {
        display: flex;
    }

    .mobile-panel {
        display: block;
    }
}


.main-menu > a.active, .main-menu > a:hover {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    transition: all 0.25s ease;
    cursor: pointer;
}


.main-menu > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    transition: all 0.25s ease;
    cursor: pointer;
}


.menu-item > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    transition: all 0.25s ease;
    cursor: pointer;
}

.mutuelle.active, .mutuelle:hover {
    background-color: var(--color-red-bg-light); /* fond rouge très clair */
    color: #d32f2f;            /* rouge texte */
}
.particuliers.active, .particuliers:hover {
    background-color: var(--color-blue-light); /* fond rouge très clair */
    color: rgba(38, 84, 115, 1);            /* rouge texte */
}
.mairies.active, .mairies:hover {
    background-color: rgba(215, 227, 193, 1); /* fond rouge très clair */
    color: rgba(57, 76, 59, 1);            /* rouge texte */
}
.associations.active, .associations:hover {
    background-color: rgba(244, 214, 223, 1); /* fond rouge très clair */
    color: rgba(83, 42, 53, 1);            /* rouge texte */
}
.pro.active, .pro:hover {
    background-color: rgba(229, 226, 242, 1); /* fond rouge très clair */
    color: rgba(36, 27, 75, 1);            /* rouge texte */
}

.offers-infopoint{
    font-family: "Roboto Light", sans-serif;
}

.adherent-left span{
    color: rgba(28, 34, 88, 1);
    font-weight: 700;
    font-style: italic;
}


.adherent-title span{
    color: rgba(59, 126, 161, 1);
    font-style: normal;
}

.hero-card {
    width: 40%;
    background: rgba(255,255,255,0.9);
    border-radius: 23px;
    padding: 1.25rem;
    color: rgba(49, 49, 49, 1);
    font-weight: 400
}

.hero-card > .hero-title{
    color: rgb(28, 34, 88);
    font-size: 2.25rem;
    font-weight: 700
}

.hero-card > .hero-title span{
    color: rgba(103, 84, 159, 1);
}

.offer-heading{
    font-family: "Fredoka", sans-serif;
    font-weight: 700
}
.offer-heading span{
    font-size: 13px;
    font-weight: 400
}

.offer-card-professionnels > .offer-content > .offer-heading{
    color: rgba(89, 81, 116, 1) !important;
    font-weight: 700;
}


.mission-pro{
    padding: 5rem 7.5rem;;
    background: rgba(229, 226, 242, 0.5);
}

.mi-te-pro{
    font-weight: 400 !important;
    color: #313131 !important;
}
.mi-te-pro span{
    font-weight: 600;
    color: #1C2258 !important;
    font-size: 1.5rem;
}


.mi-buttons > .btn-hero-primary{
    background: rgba(103, 84, 159, 1);
    color: white;
}



.mi-buttons > .btn-hero-primary:hover{
    border:2px solid rgb(178, 157, 243);
    color: white;
}


/**********************************
* MAIRIE                          *
**********************************/

.bandeau-mairie {
    background: linear-gradient(to right, rgba(197, 216, 187, 0.64), rgba(170, 197, 149, 0.12));
    padding: 4rem 8rem;
}
@media (max-width: 768px) {
    .bandeau-mairie {
        padding: 2rem;
    }
}
.bandeau-text > p {
    font-family: 'Urbanist', sans-serif;
    font-weight: 400;
    font-size: 27px;
    line-height: normal;
}
.bandeau-text > h1 {
    font-weight: 700;
    line-height: 100%;
    color: var(--color-navy);
    word-break: break-word;
    overflow-wrap: break-word;
}
.bandeau-text > h1 > span.textmairie {
    font-weight: 700;
    color: var(--color-green-primary);
}

.btn-mairie{
    background: var(--color-green-primary);
    border: 1px solid var(--color-green-primary);
}

.btn-mairie:hover{
    background: #6f9765;
    border: 1px solid #6f9765;
}

.left-bloc {
    text-align: center;
    padding-right: 4rem;
}

.right-bloc {
    padding-left: 4rem;
}

@media (max-width: 991px) {
    .left-bloc, .right-bloc {
        padding: 0;
    }
}

.elu-title {
    font-weight: 700;
    font-size: 1.9375rem;
    line-height: 100%;
    color: var(--color-white);
    background-color: var(--color-green-primary);
    border-radius: 5px;
    padding: 10px;
    width: fit-content;
    margin: 1rem 0;
}
.elu-temoin {
    font-family: 'Urbanist', sans-serif;
    font-weight: 700;
    font-size: 27px;
    line-height: normal;
}
.elu-personne {
    font-family: 'Urbanist', sans-serif;
    font-weight: 700;
    font-size: 27px;
    line-height: normal;
    color: var(--color-green-primary);
    margin-top: 1rem
}
.elu-citation {
    font-family: 'Urbanist', sans-serif;
    font-weight: 400;
    font-size: 27px;
    line-height: normal;
    font-style: italic;
    margin-top: 1rem
}

.btn-question:focus {
    outline: 3px solid var(--color-green-primary);
    outline-offset: 2px;
}
.faq {
    background-color: var(--color-green-light);
    border-radius: 25px;
}
.btn-question {
    background-color: transparent;
    border: none;
    font-family: 'Urbanist', sans-serif;
    font-weight: 700;
    font-size: 27px;
    line-height: normal;
    color: var(--color-green-primary);
    padding: 0;
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    gap: 1rem;
}
.text-reponse {
    font-family: 'Urbanist', sans-serif;
    font-weight: 400;
    font-size: 27px;
    line-height: normal;
    flex: 1 1 auto;
    width: 90%
}
.chevron-icon {
    transition: transform 0.2s ease-in-out;
    flex: 0 0 auto;
    font-size: 1.2rem;
}

button[aria-expanded="true"] .chevron-icon {
    transform: rotate(180deg);
}

.devis {
    margin: 8rem;
}
@media (max-width: 768px) {
    .devis {
        margin: 2rem;
    }
}
.devis-text > p {
    font-family: 'Urbanist', sans-serif;
    font-weight: 400;
    font-size: 27px;
    line-height: normal;
}
.devis-text > h2 {
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 41px;
    color: var(--color-navy);
    word-break: break-word;
    overflow-wrap: break-word;
}
.devis-text > a {
    font-weight: 700;
    font-size: 27px;
    line-height: normal;
    color: var(--color-white);
    background-color: var(--color-green-primary);
    padding: 1.25rem;
    border-radius: 50px;
    text-decoration: none;
}

.custom-hr {
    margin: 8rem;
    border-bottom: 1px solid var(--color-green-primary);
}
@media (max-width: 768px) {
    .custom-hr {
        margin: 2rem;
    }
}

.commune {
    margin: 8rem;
}
@media (max-width: 768px) {
    .commune {
        margin: 2rem;
    }
}
.commune-title {
    font-weight: 700;
    font-size: 1.9375rem;
    line-height: 100%;
    color: var(--color-green-primary);
    background-color: var(--color-green-pale);
    border-radius: 5px;
    padding: 10px;
    width: fit-content;
    margin: 1rem 0;
}
.commune-temoin {
    font-family: 'Urbanist', sans-serif;
    font-weight: 700;
    font-size: 27px;
    line-height: normal;
    margin-top: 1rem;
}
.commune-personne {
    font-family: 'Urbanist', sans-serif;
    font-weight: 700;
    font-size: 27px;
    line-height: normal;
    color: var(--color-green-primary);
    margin-top: 1rem;
}
.commune-citation {
    font-family: 'Urbanist', sans-serif;
    font-weight: 400;
    font-size: 27px;
    line-height: normal;
    font-style: italic;
    margin-top: 1rem;
}
.legende {
    font-family: 'Urbanist', sans-serif;
    font-weight: 300;
    font-size: 15px !important;
    line-height: normal;
    font-style: italic;
    text-align: end;
    padding-top: 5px;
    position: absolute;
    right: 0;
}

.btn-question-commune:focus {
    outline: 3px solid var(--color-white);
    outline-offset: 2px;
}
.faq-commune {
    background-color: var(--color-green-primary);
    border-radius: 25px;
}
.btn-question-commune {
    background-color: transparent;
    border: none;
    font-family: 'Urbanist', sans-serif;
    font-weight: 700;
    font-size: 27px;
    line-height: normal;
    color: var(--color-white);
    padding: 0;
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    gap: 1rem;
}
.text-reponse-commune {
    font-family: 'Urbanist', sans-serif;
    font-weight: 400;
    font-size: 27px;
    line-height: normal;
    flex: 1 1 auto;
    color: var(--color-white);
}
.chevron-icon {
    transition: transform 0.2s ease-in-out;
    flex: 0 0 auto;
    font-size: 1.2rem;
}

button[aria-expanded="true"] .chevron-icon {
    transform: rotate(180deg);
}

.partenaire {
    margin: 8rem;
}
@media (max-width: 768px) {
    .partenaire {
        margin: 2rem;
    }
}
.partenaire-title {
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 41px;
    color: var(--color-navy);
    text-align: center;
    margin: 4rem 0;
}
.logo-carousel {
    width: 100%;
    max-width: 1280px;
    overflow: hidden;
}

.logo-track {
    display: flex;
    transition: transform 0.4s ease;
    gap: 10px;
}

.logo-item {
    flex: 0 0 calc((100% - 4*10px)/5);
    text-align: center;
    opacity: 0.4;
    transform: scale(0.85);
    transition: all 0.4s ease;
}

.logo-item.active {
    opacity: 1;
    transform: scale(1);
}

.logo-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Tablet */
@media (max-width: 992px) {
    .logo-item {
        flex: 0 0 calc((100% - 2*10px)/3);
    }
}

/* Mobile */
@media (max-width: 576px) {
    .logo-item {
        flex: 0 0 100%;
    }
}
.action-btn {
    border: none;
    background-color: transparent;
}
.action-btn:focus {
    border: none;
    background-color: transparent;
    outline: none;
}
.action-btn:focus-visible {
    outline: 2px solid var(--color-gray-darker);
}

.adherer {
    background-color: var(--color-green-pale);
    padding: 8rem;
}
@media (max-width: 768px) {
    .adherer {
        padding: 2rem;
    }
}
.adherer-text > p {
    font-family: 'Urbanist', sans-serif;
    font-weight: 400;
    font-size: 27px;
    line-height: normal;
}
.adherer-text > h2 {
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 51px;
    color: var(--color-navy);
    word-break: break-word;
    overflow-wrap: break-word;
}
.adherer-text > a {
    font-weight: 700;
    font-size: 27px;
    line-height: normal;
    color: var(--color-white);
    background-color: var(--color-green-primary);
    padding: 1.25rem;
    border-radius: 50px;
    text-decoration: none;
}

/**********************************
* ASSO                            *
**********************************/
.bandeau-association {
    background: var(--gradient-bandeau-asso);
    padding: 4rem 8rem;
}
@media (max-width: 768px) {
    .bandeau-association {
        padding: 2rem;
    }
}

.bandeau-text > p {
    font-family: 'Urbanist', sans-serif;
    font-weight: 400;
    font-size: 27px;
    line-height: normal;
}
.bandeau-text > h1 {
    font-weight: 700;

    color: var(--color-navy);
    word-break: break-word;
    overflow-wrap: break-word;
}
.bandeau-text > h1 > span.textasso {
    font-weight: 700;
    color: var(--color-pink-accent);
}

@media (max-width: 768px) {
    .adherent {
        padding: 2rem;
    }
}

.adherent-title-asso {
    font-weight: 700;
    font-size: 1.9375rem;
    line-height: 31px;
    color: var(--color-asso-accent);
    background-color: var(--color-pink-pale);
    border-radius: 5px;
    padding: 10px;
    width: fit-content;
    margin: 1rem 0;
}
.adherent-subtitle {
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 41px;
    color: var(--color-navy);
}

.btn-step:focus {
    outline: 3px solid var(--color-navy);
    outline-offset: 2px;
}
.faq {
    background-color: var(--color-green-light);
    border-radius: 25px;
}
.btn-step {
    background-color: transparent;
    border: none;
    font-family: 'Urbanist', sans-serif;
    font-weight: 700;
    font-size: 27px;
    line-height: normal;
    color: var(--color-navy);
    padding: 0;
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
    gap: 1rem;
}
.step-number-1 {
    background-color: var(--color-pink-pale);
    padding: 0.5rem 1rem;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;
}
.step-number-2 {
    background-color: var(--color-red-muted);
    padding: 0.5rem 1rem;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;
}
.step-number-3 {
    background-color: var(--color-pink-accent);
    color: var(--color-white);
    padding: 0.5rem 1rem;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;
}
.step-number-4 {
    background-color: var(--color-asso-accent);
    color: var(--color-white);
    padding: 0.5rem 1rem;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;
}
.step-title {
    flex-grow: 1;
}
.text-reponse {
    font-family: 'Urbanist', sans-serif;
    font-weight: 400;
    font-size: 27px;
    line-height: normal;
    flex: 1 1 auto;
}
.text-reponse > ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.li-info {
    display: flex;
    gap: 0.5rem;
    align-items: start;
}
.li-info > img {
    margin-top: 0.3125rem;
}
.li-info a {
    color: var(--color-gray-darker);
    text-decoration: underline;
}
.chevron-icon {
    transition: transform 0.2s ease-in-out;
    flex: 0 0 auto;
    font-size: 1.2rem;
}

button[aria-expanded="true"] .chevron-icon {
    transform: rotate(180deg);
}

.responsable {
    background-color: var(--color-pink-pale);
}
.btn-asso{
    background: var(--color-pink-accent);
    border: none;
}
.btn-asso:hover{
    background: rgba(160, 61, 94, 0.73);
    border: none;
}
.btn-asso2{
    background: #fff;
    color: var(--color-pink-accent);
    border: 1px solid var(--color-pink-accent)
}
.btn-asso2:hover{
    background: var(--color-pink-accent);
    color: #fff;
    border: none;
}
.responsable-title {
    font-weight: 700;
    font-size: 1.9375rem;
    line-height: 31px;
    color: var(--color-white);
    background-color: var(--color-pink-accent);
    padding: 0.5rem;
    width: fit-content;
    border-radius: 4px !important;
    text-align: center
}
.responsable-subtitle {
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 41px;
    color: var(--color-navy);
}
.responsable-list {
    list-style: none;
}
.responsable-card {
    background-color: var(--color-white);
    border-radius: 25px;
    box-shadow: 0 0.25rem 0.25rem #1C225826;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}
.responsable-icon {
    width: 4.5rem;
    height: 4.5rem;
}
.responsable-text {
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    font-size: 29px;
    line-height: normal;
    color: var(--color-navy);
    word-break: break-word;
    overflow-wrap: break-word;
    text-align: center;
}

.contact-text > p {
    font-family: 'Urbanist', sans-serif;
    font-weight: 400;
    font-size: 27px;
    line-height: normal;
}
.contact-text > h2 {
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 51px;
    color: var(--color-navy);
    word-break: break-word;
    overflow-wrap: break-word;
}
.btn-contact-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}
.btn-contact-container > a {
    max-width: 300px;
}
.btn-dispo {
    font-weight: 700;
    font-size: 27px;
    line-height: normal;
    color: var(--color-white);
    background-color: var(--color-pink-accent);
    padding: 1.25rem;
    border-radius: 3.125rem;
    text-decoration: none;
    text-align: center;
}
.btn-contact {
    font-weight: 700;
    font-size: 27px;
    line-height: normal;
    color: var(--color-asso-accent);
    background-color: var(--color-white);
    padding: 1.25rem;
    border-radius: 3.125rem;
    text-decoration: none;
    border: solid 2px var(--color-asso-accent);
    text-align: center;
}
.btn-dispo:hover {
    color: var(--color-white);
}
.btn-contact:hover {
    color: var(--color-asso-accent);
}
@media (max-width: 768px) {
    .btn-contact-container {
        justify-content: center;
    }
}

.btn-step:focus {
    outline: none;
}
.btn-step:focus-visible {
    outline: 2px solid var(--color-gray-darker);
}

.section-text-info{
    padding: 5rem 7.5rem;
}
.section-text-info > span{
    color: rgba(0, 0, 0, 0.5);
    font-size: 1.2rem;
    font-family: "Roboto Light", sans-serif;
}

.temoignages {
    position: relative;
    max-width: 900px;
    margin: 0 auto !important;
}

.temoignages-dots {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
}

.temoignages-dots .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: none;
    background-color: #c7c9d9;
    cursor: pointer;
}

.temoignages-dots .dot.active {
    background-color: var(--color-navy);
}

.temoignages-dots .dot:focus-visible {
    outline: 3px solid var(--color-navy);
    outline-offset: 4px;
}

.temoignages-wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
}

.temoignages-viewport {
    overflow: hidden;
    width: 100%;
    height: 232px;
}

.temoignages-track {
    list-style: none;
    padding: 0;
    margin: 0;

    display: flex;
    gap: 24px;
    transition: transform 0.4s ease;
    will-change: transform;
}

.temoignage {
    min-width: calc(50% - 12px);
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

.temoignage-nom {
    font-weight: 700;
    color: var(--color-navy);
}

.temoignage-entreprise {
    font-weight: 600;
}

.temoignage-fonction {
    font-style: italic;
    color: var(--color-gray-text);
}

.temoignage blockquote {
    margin-top: 12px;
    color: var(--color-navy);
}

/* Chevrons */
.temoignages-nav {
    background: none;
    border: none;
    font-size: 2rem !important;
    cursor: pointer;
    color: var(--color-navy);
}

.temoignages-nav:focus-visible {
    outline: 3px solid var(--color-navy);
    outline-offset: 4px;
}

.section-title-dot {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 24px;
    font-weight: 700;
    color: rgba(28, 34, 88, 1);
    margin: 0 0 24px;
}

.section-title-dot .dot {
    width: 12px;
    height: 12px;
    background-color: var(--color-purple-primary); /* violet */
    border-radius: 50%;
    flex-shrink: 0;
}

.dot-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
}

.dot-list li {
    position: relative;
    padding-left: 20px;
    font-size: 1.2rem;
    line-height: 1.6;
    color: #2b2b2b;
}

.dot-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 10px;
    height: 10px;
    background-color: var(--color-purple-primary); /* violet */
    border-radius: 50%;
}


.mi-te-pro{
    font-size: 1.2rem !important;
    font-weight: 700;
}
.ad-li-bloc li > .advantage-arrow {
    width: 1.1rem !important;
    height: auto;
    margin-top: 8px;
    flex-shrink: 0;
}

.ad-li-bloc li > span{
    font-size: 1.25rem !important;
    font-style: normal !important;
    color: rgba(49, 49, 49, 1) !important;
    font-weight: 400;
}

.ad-li-bloc li > span strong{
    font-weight: 700;
}


.title-pro{
    background: rgba(229, 226, 242, 1);
    border-radius: 10px;
    color: rgba(89, 81, 116, 1) !important;
    font-size: 1.5625rem;
    padding: 5px;
    font-style: normal !important;
}

.adherent-title-pro{
    font-weight: 700;
    font-size: 2.25rem;
    color: rgba(28, 34, 88, 1) !important;
}


.mi-buttons > .btn-outline-hero-primary{
    background: transparent;
    color: rgba(103, 84, 159, 1);
    border: 1px solid rgba(103, 84, 159, 1);
}
.hero-card {
    width: 79%;
    background: rgba(255,255,255,0.9);
    border-radius: 23px;
    padding: 1.25rem;
    color: rgba(49, 49, 49, 1);
    font-weight: 400;
}
.hero-card > .hero-title {
    color: rgb(28, 34, 88);
    font-size: 1.9375rem;
    font-weight: 700;
}

.advantages-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.advantages-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 1.2rem;
    line-height: 1.5;
    color: #2b2b2b;
}

.advantage-arrow {
    width: 18px;
    height: auto;
    margin-top: 4px;
    flex-shrink: 0;
}

.advantages-list strong {
    font-weight: 600;
}

.mission-pro2{
    background: rgba(229, 226, 242, 0.3) !important;
    padding: 5rem 7.5rem

}

.faq-pro{
    background: rgba(229, 226, 242, 1);
    margin-top: 80px !important
}

.btn-question-pro{
    color: rgba(28, 34, 88, 1);
    font-size: 20px
}

.text-response-pro{
    color: rgba(28, 34, 88, 1);
    font-size: 18px
}
.accordion-title{
    font-size: 24px;
    color: rgba(28, 34, 88, 1);
    font-weight: 700;
}

.accordion-margin-top{
    margin-top: 30px;
}
.btn-question{
    cursor: pointer
}

.btn-question:focus {
    outline: none;
}
.btn-question:focus-visible {
    outline: 2px solid var(--color-green-primary);
}

.btn-question-commune:focus {
    outline: none;
}
.btn-question-commune:focus-visible {
    outline: 2px solid #FFFFFF;
}

/* Conteneur pleine largeur */
.info-garantie-outer {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Le badge */
.info-garantie {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    background-color: #f4f2fb;
    border-radius: 999px;
    padding: 14px 22px;

    font-size: 14px;
    line-height: 1.4;
    color: var(--color-navy);
}

.info-garantie-icon {
    display: flex;
    align-items: center;
}

.info-garantie {
    align-self: center;
}

.info-garantie-icon img {
    width: 20px;
    height: 20px;
}

.info-garantie-text {
    margin: 0;
}

.info-garantie-text strong {
    font-weight: 600;
}



.hero-card-tns{
    width: 50%
}
.title-pro-indendant-h{
    color: rgba(28, 34, 88, 1);
    font-size: 24px;
    font-weight: 700;
}

.title-pro-independant{
    font-size: 1.2rem;
    font-weight: 400 !important;
    font-style: normal !important;
    color: rgba(49, 49, 49, 1) !important;
}
.ad-ti-tns{
    font-size: 26px !important;
}

.offer-heading span{
    font-size: 15px;
}
.of-ti-tns span{
    color: rgba(103, 84, 159, 1)
}

.btn-multiligne{
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mi-he-sm{
    margin: 0 auto
}
.mission-pro-sm{
    background: var(--gradient-sur-mesure) !important
}
.org-title-sm{
    font-size: 24px
}
.org-text-sm{
    font-size: 18px;
    font-weight: 400;
    font-family: 'Urbanist', sans-serif !important;
}

.org-list-sm > .organisation-list-item{
    background : #FBFAFD !important
}

.organisation-list-item-text{
    font-family: "Roboto", sans-serif;
    font-size: 1rem !important;
}

.violet-dot {
    width: 12px;
    height: 12px;
    background: rgba(103, 84, 159, 1);
    border-radius: 50%;
    display: inline-block;
    margin-right: 10px;
    position: relative;
    top: -2px;
}

.org-list-sm > .organisation-list-item {
    display: flex;
    align-items: flex-start; /* aligne la puce avec la 1ère ligne */
    gap: 12px;
}


.org-list-sm > .organisation-list-item > .organisation-list-item-text {
    line-height: 0.6;
}

.font-plus-info-text{
    font-size: 20px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    color: rgba(49, 49, 49, 1) !important;
}



h1{
    font-size: 3rem !important;
    font-family: "Roboto", sans-serif
}
h2{
    font-size: 1.9rem !important;
}
h3{
    font-size: 1.4rem !important;
}
p{
    font-size: 1.25rem !important;
}
section{
    margin: 80px 120px !important;
}

button{
    font-size: 1rem !important
}
div{
    font-size: 1rem !important
}
@media (max-width: 768px) {


    h1{
        font-size: 1.5rem !important;
    }
    h2{
        font-size: 1.2rem !important;
    }
    h3{
        font-size: 1rem !important;
    }
    p{
        font-size: 1rem !important;
    }
    section {
        margin: 2rem 1rem !important;
    }

}
.he-ca-mut-ent{
    width: 40%
}
p{
    margin: 0
}


@media screen and (max-width: 1024px) {
    .text-left-important{
        text-align: center !important;
    }
    .adherent-container {
        padding: 0 !important;
    }


    .adherent-container-particuliers{
        width: 100%;
        padding: 35px 40px !important;
    }
    .app-image{
        width: 60% !important;
    }
    .services-list{
        width: 100% !important
    }
    .offers-cards-particuliers{
        width: 100% !important
    }

    .he-ca-mut-ent{
        width: 90%;
        background: rgba(255,255,255,0.8);
    }
    .advantages-list li{
        font-size: 0.7rem !important;
    }
    .he-ti-pro{
        font-size: 1rem !important
    }
    .mission-pro2{
        padding: 1.5rem !important;
    }
    .temoignages{
        margin-top: 53px !important;
        padding: 20px;
    }
    .section-text-info{
        padding: 1.5rem !important;
    }
    .hero-card-tns{
        width: 88% !important;
    }
    .hero-card-tns > .hero-title{
        font-size: .8rem !important;
    }
    .hero-card-tns > div{
        font-size: .7rem !important;
    }
    .p-nuoma{
        padding: 0.75rem
    }
}



.mi-he-sm{
    margin: 0 auto
}
.org-title-sm{
    font-size: 24px
}
.org-text-sm{
    font-size: 18px;
    font-weight: 400;
    font-family: 'Urbanist', serif !important;
}

.org-list-sm > .organisation-list-item{
    background : white
}

.violet-dot {
    width: 12px;
    height: 12px;
    background: rgba(103, 84, 159, 1);
    border-radius: 50%;
    display: inline-block;
    margin-right: 10px;
    position: relative;
    top: -2px;
}

.org-list-sm > .organisation-list-item {
    display: flex;
    align-items: flex-start; /* aligne la puce avec la 1ère ligne */
    gap: 12px;
}


.org-list-sm > .organisation-list-item > .organisation-list-item-text {
    line-height: 0.6;
}

.font-plus-info-text{
    font-size: 20px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    color: rgba(49, 49, 49, 1) !important;
}


.footer-legal {
    display: flex;
    justify-content: center;
}
.footer-legal-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-legal-list li {
    display: flex;
    align-items: center;
}

.footer-legal-list li:not(:last-child)::after {
    content: " | ";
    margin: 0 .5rem;
    color: inherit;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: .4rem;
}

.footer-links a {
    text-decoration: none;
    color: inherit;
}

.social-icons {
    display: flex;
    gap: .75rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.social-icons li {
    display: flex;
}
.header-links a {
    color: #1F2D68;
    text-decoration: none;
    background-image: linear-gradient(
            transparent 65%,
            #F6D7DA 65%
    );
    background-size: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.25s ease;
}

.header-links a:hover,
.header-links a:focus-visible {
    background-size: 100% 100%;
    text-decoration: none;
}


.o-l-particulier:hover{ color: var(--color-blue-teal)}
.o-l-mairie:hover{ color: var(--color-green-accent)}
.o-l-asso:hover{ color: var(--color-purple-accent)}
.o-l-tns:hover{ color: var(--color-pink-accent)}

.o-l-particulier-bg:hover{ background: var(--color-blue-teal); color: white; text-decoration: none}
.o-l-mairie-bg:hover{ background: var(--color-green-accent); color: white; text-decoration: none}
.o-l-asso-bg:hover{ background: var(--color-purple-accent); color: white; text-decoration: none}
.o-l-tns-bg:hover{ background: var(--color-pink-accent); color: white; text-decoration: none}


.of-ca-particuliers:hover > .offer-content > .offer-heading, .of-ca-particuliers:hover > .offer-content > .offer-footer > span {color: var(--color-blue-teal)}
.of-ca-mairies:hover > .offer-content > .offer-heading, .of-ca-mairies:hover > .offer-content > .offer-footer > span {color: var(--color-green-accent)}
.of-ca-asso:hover > .offer-content > .offer-heading, .of-ca-asso:hover > .offer-content > .offer-footer > span {color: var(--color-purple-accent)}
.of-ca-tns:hover > .offer-content > .offer-heading, .of-ca-tns:hover > .offer-content > .offer-footer > span {color: var(--color-pink-accent)}
.of-ca-fiche{
    width: 340px !important;
}

.dots-home {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
}

.why-dot-btn {
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 50%;
    border: none;
    background-color: #1C2258C4;
    cursor: pointer;
    transition: all 0.25s ease;
}

.why-dot-btn.active {
    width: 10px;
    border-radius: 20px;
    background-color: var(--color-navy-medium);
}

.why-dot-btn:focus-visible {
    outline: 2px solid #10205B;
    outline-offset: 3px;
}

.why-btn:hover{
    color: #fff;
    background: var(--color-red-primary);
    text-decoration: none;
}


.feature-highlight__container::after {
    content: "¹ Tarif en vigueur sur l'année en cours";
    display: block;
    margin-top: -3rem;
    font-size: 0.85rem;
    font-style: italic;
    color: #6b7280;
    line-height: 1.3;
}


/* ===============================
   WHY SLIDER – MOBILE UI
================================ */
@media (max-width: 899px) {


    .feature-highlight__container::after {
        margin-top: 0rem;
    }


    .why-slider-wrapper {
        position: relative;
        overflow: hidden;
        padding-bottom: 48px; /* espace pour les dots */
    }

    .why-slider {
        display: flex;
        transition: transform 0.4s ease;
        margin: 57px auto 0;
    }

    .why-card {
        flex: 0 0 100%;
        margin: 0;
        padding: 24px 20px;
        text-align: center;
        border-radius: 20px;
    }

    /* ----- Flèche droite ----- */
    .why-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 3;
        background: transparent;
        border: none;
        padding: 0;
    }

    .why-arrow.right {
        right: 16px;
    }

    .why-arrow.left {
        left: 0;
    }

    .why-arrow i {
        font-size: 1.4rem;
        color: var(--color-navy-medium);
    }

    /* ----- Dots ----- */
    .dots-home {
        position: absolute;
        bottom: 12px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 10px;
        justify-content: center;
        align-items: center;
    }

    .why-dot-btn {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        border: none;
        background: #c8cbdc;
        padding: 0;
        cursor: pointer;
    }

    .why-dot-btn.active {
        background: #10205B;
        width: 10px;
        height: 10px;
    }
}


@media (max-width: 899px) {

    /* ===== CONTENEUR GLOBAL ===== */
    .nuoma-why-section {
        padding: 32px 0;
    }

    .why-slider-wrapper {
        position: relative;
        overflow: hidden;
        width: 90%;
        padding: 0 24px 56px; /* espace latéral + dots */
        box-sizing: border-box;
    }

    /* ===== SLIDER ===== */
    .why-slider {
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
        transition: transform 0.4s ease;
    }

    /* ===== CARD ===== */
    .why-card {
        flex: 0 0 100%;
        max-width: 100%;
        box-sizing: border-box;

        /* effet carte flottante */
        background: #fff;
        border-radius: 20px;
        padding: 24px 20px;
        text-align: center;

        /* respiration visuelle */
        margin: 0 auto;
    }

    /* ===== FLÈCHES ===== */
    .why-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: transparent;
        border: none;
        padding: 0;
        z-index: 5;
    }

    .why-arrow.left {
        left: 0;
    }

    .why-arrow.right {
        right: 0;
    }

    .why-arrow i {
        font-size: 1.4rem;
        color: inherit; /* respecte tes couleurs */
    }

    /* ===== DOTS ===== */
    .dots-home {
        position: absolute;
        bottom: 16px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 12px;
        justify-content: center;
        align-items: center;
    }

    .why-dot-btn {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: none;
        padding: 0;
        background: currentColor;
        opacity: 0.35;
    }

    .why-dot-btn.active {
        opacity: 1;
        width: 12px;
        height: 12px;
    }
}

.height80{
    height:80px
}

.height105{
    height:105px
}
/* NAV */
.main-menu {
    display: flex;
    position: relative;
}

/* MEGA MENU */
.mega-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 12px);

    width: 100%;
    padding-top: 24px;

    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
    z-index: 1000;
}

/* CARTE */
.mega-card {
    background: #fff;
    border-radius: 14px;
    padding: 32px 40px;
    max-width: 1100px;
    margin: 0 auto;
    box-shadow: 0 20px 45px rgba(0,0,0,.08);
}

/* COLONNES */
.mega-cols {
    display: flex;
    gap: 48px;
    margin-top: 20px;
}

.mega-cols strong {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
}

.mega-cols a {
    display: block;
    margin: 6px 0;
    color: var(--color-navy-medium);
    text-decoration: none;
}

/* 🔥 OUVERTURE AU SURVOL */
.menu-item.has-mega:hover .mega-menu,
.menu-item.has-mega:focus-within .mega-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
}



.mega-particuliers-card {
    background: var(--color-white);
    border-radius: 16px;
    padding: 36px 40px 32px;
    max-width: 520px;
    box-shadow: 0 16px 40px rgba(0,0,0,.08);
}

/* TITRE */
.mega-title {
    font-family: "Roboto", sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-blue-teal);
    margin-bottom: 28px;
}

.main-menu a.me-ti-parti{
    color: var(--color-particuliers-accent) !important;
}

.main-menu a.me-ti-parti:hover{
    text-decoration: underline
}

/* COLONNES */
.mega-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
}

/* SOUS-TITRES */
.mega-subtitle {
    font-family: "Roboto", sans-serif;
    display: block;
    font-size: .95rem;
    font-weight: 600;
    color: var(--color-sous-menu);
    margin-bottom: 14px;
}

/* LISTES */
.mega-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mega-list li {
    margin-bottom: 10px;
}

.mega-list a {
    text-decoration: none;
    font-size: .95rem;
    color: var(--color-gray-dark);
}

.mega-list a:hover {
    text-decoration: underline;
}

/* ACTIONS */
.mega-actions {
    display: flex;
    gap: 18px;
    margin-top: 32px;
}

/* BOUTON PRINCIPAL */
.btn-mega-primary {
    background: #1b235c;
    color: var(--color-white);
    padding: 12px 28px;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    font-size: .95rem;
}

/* BOUTON SECONDAIRE */
.btn-mega-outline {
    border: 2px solid var(--color-blue-teal) !important;
    color: var(--color-blue-teal) !important;
    padding: 10px 26px;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    font-size: .95rem;
    background: transparent;
}
.btn-mega-outline:hover {
    border: 2px solid var(--color-blue-teal) !important;
    color: var(--color-white) !important;
    background: var(--color-blue-teal) !important;
}

/* CARD PRO */
.mega-pro-card {
    background: var(--color-white);
    border-radius: 16px;
    padding: 36px 40px 32px;
    max-width: 520px;
    box-shadow: 0 16px 40px rgba(0,0,0,.08);
}

/* TITRE PRO (violet) */
.mega-title-pro {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-pro-accent) !important;
    margin-bottom: 28px;
}

.mega-title-pro:hover{
    text-decoration: underline
}

/* UNE SEULE COLONNE */
.mega-cols-single {
    display: block;
}

/* Réutilisation des styles existants */
.mega-subtitle {
    display: block;
    font-size: .95rem;
    font-weight: 700;
    color: var(--color-sous-menu);
    margin-bottom: 14px;
}

.mega-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mega-list li {
    margin-bottom: 12px;
}

.mega-list a {
    text-decoration: none;
    font-size: .95rem;
    font-weight: 400;
    color: var(--color-gray-dark);
}

.mega-list a:hover {
    text-decoration: underline;
}

.mega-menu.menu-mega-pro{
    left:   111%
}

@media screen and (max-width: 1450px) {

}

@media screen and (max-width: 1320px) {
    .offers-cards{
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 1200px) {
    .offers-cards{
        grid-template-columns: repeat(2, 1fr);
    }

}

@media screen and (max-width: 900px) {
    .offers-cards{
        grid-template-columns: repeat(1, 1fr);
    }

}

.offer-card {
    width: 100%;
}

.offer-card-agence {
    width: 250px !important;
}

/******************************
        ** CONTACT
        ******************************/

.contact-title {
    font-size: 52px;
    font-weight: 700;
    color: var(--color-navy);
}
.contact-desc {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-navy);
    line-height: normal;
}
.type-legend {
    padding: 0;
    margin: 0;
}
.type-legend > h2 {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-navy);
}
.type-container {
    gap: 1.5rem;
}
.type-contact {
    background-color: #FFFFFF;
    color: var(--color-navy);
    padding: 0.5rem 1rem;
    font-size: 24px;
    font-weight: 500;
    border: solid 2px var(--color-navy);
    border-radius: 50px;
}

.contact-help {
    margin: 4rem 8rem;
    display: none;
}
@media (max-width: 768px) {
    .contact-help {
        margin: 1rem 2rem;
    }
}
.help-item {
    background-color: #FFFFFF;
    box-shadow: 0 4px 15px rgba(0,0,0,0.10);
    border-radius: 25px;
    padding: 1.5rem;
    text-decoration: none;
    transition: all ease 0.3s;
    transform: translateY(0);
}
.help-item:hover {
    text-decoration: none;
    transform: translateY(-10px);
}
.help-item-header {
    align-items: center;
    gap: 1.5rem;
}
.help-item-header-icon {
    width: 45px;
    height: 45px;
}
.help-item-header-title {
    margin: 0;
    font-weight: 700;
    font-size: 28px;
    color: var(--color-navy);
}
.help-item-content {
    flex-grow: 1;
}
.help-item-primary {
    margin: 0;
    font-weight: 400;
    font-size: 20px;
    color: var(--color-gray-darker);
    line-height: normal;
}
.help-item-secondary {
    margin: 0;
    font-weight: 700;
    font-size: 24px;
    color: var(--color-navy);
    line-height: normal;
}
.help-item-footer {
    align-self: end;
    font-weight: 700;
    font-size: 20px;
    color: var(--color-navy);
    align-items: center;
}
.help-item-footer-title {
    margin: 0;
}

.reclamation {
    padding: 4rem 8rem;
    background: linear-gradient(to right, #F0F2FF, #FFDFE1);
}
@media (max-width: 768px) {
    .reclamation {
        padding: 1rem 2rem;
    }
}
.reclamation-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-navy);
}
.reclamation-info {
    font-family: 'Urbanist', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #000000;
}
.reclamation-link {
    font-size: 24px;
    font-weight: 700;
    color: #FFFFFF;
    background-color: var(--color-navy);
    border-radius: 50px;
    padding: 1rem 2rem;
}
.reclamation-link:hover {
    color: #FFFFFF;
}

.contact-section {
    display: none;
}

.contact-section-active {
    display: block;
}

.custom-file {
    display: none;
}
.file-upload-container {
    font-family: Arial, sans-serif;
}
.file-upload-label {
    font-weight: bold;
    color: #123;
}
.drop-zone {
    border: 2px dotted var(--color-navy);
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 10px;
    text-align: center;
    color: #2c3171;
    user-select: none;
}
.drop-zone.dragover {
    background-color: #e0e4ff;
}
.btn-custom {
    border: 2px solid var(--color-navy);
    border-radius: 10px;
    padding: 1rem 2rem;
    background: none;
    color: #2c3171;
    font-weight: bold;
    cursor: pointer;
}
.btn-custom:hover {
    background-color: #e0e4ff;
}
.btn-custom:focus {
    background-color: #e0e4ff;
}
.file-list {
    list-style: none;
    padding-left: 0;
}
.file-item {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #ddd;
    padding: 8px 0;
}
.file-icon {
    width: 32px;
}
.btn-delete {
    margin-left: auto;
    border: none;
    background: none;
    color: #d33;
    font-size: 1.2em;
    cursor: pointer;
}
.btn-delete:hover {
    color: #a00;
}

@media screen and (max-width: 1600px) {
    .services-plus-app-image{
        width: 150px !important
    }
    .feature-highlight__container{
        width: 100%
    }
    .offers-cards-particuliers{
        width: 85%
    }
    .hero-card{
        width: 40%
    }
    .he-ca-pro{
        width: 63% !important
    }
    .hero-static .hero-content{
        top: 50%
    }
    .image-badge-image {
        max-width: 470px;
        height: 413px;
    }

}
.imageAnppi{
    max-width: 100% !important;
    height: auto !important;
}
.ad-li-bloc{
    margin-bottom: 15px;
}
.of-info-spec{
    font-size: 0.8rem !important;
}

.mh95{
    min-height: 95px;
}


hr{
    border-top: 3px solid rgba(0, 0, 0, 0.1);
}


/* AGENCES */

.section-agences{
    background: #ededed42;
}
.section-agences-left{
    padding: 40px 80px
}
.section-agences > div{
    width: 50%
}
.h1-agences{
    color: var(--color-navy-light);
    font-size: 2.5rem !important;
    font-family: "Fredoka", sans-serif;
    font-weight: 500
}
.img-agence > img{
    height: 90px !important;
}
.span-agences{
    color: var(--color-navy-light) !important;
    font-size: 1rem;
    font-weight: 600;
}
.section-agence{
    background: #ededed !important;
}

.w-60{
    width: 60%
}
.agences-text-left > p{
    font-size: 1rem !important;
}
.section-agences-right{
    padding: 40px 80px
}
.section-other-agences{
    padding: 40px 80px
}
.section-other-agences > .divLeft{
    width: 60%
}

.tableCell {
    display: flex;
    align-items: center;
}

.vertical-align-middle{
    vertical-align: middle
}


@media screen and (max-width: 1700px) {
    .section-agences-left > .offers-cards > .offer-card.offer-card-professionnels{
        width: 200px !important;
    }
}

@media screen and (max-width: 1400px) {
    .section-agences-left >  .offers-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

.dateCalendrierRdv{
    width: 100%;
    height: 100%;
    text-align: center;
    color: var(--color-navy);
    font-size: 12px;
    font-weight: 500;
    word-wrap: break-word
}

@media screen and (max-width: 800px) {
    .section-agences{
        display: block !important
    }
    .section-agences > div{
        width: 100% !important
    }
    .section-agences-left{
        padding: 2rem;
    }
    .section-agences-left >  .offers-cards {
        grid-template-columns: repeat(1, 1fr);
    }
    .section-agences-left > .offers-cards > .offer-card.offer-card-professionnels{
        width: 100% !important;
    }
    .section-agence, .section-other-agences{
        display: block !important;
    }
    .w-60, .section-other-agences > .divLeft{
        width: 100%
    }
    .tableCell{
        margin-top: 30px;
    }

    .section-agences-right, .section-other-agences{
        padding: 1rem !important;
    }
    .dateCalendrierRdv{
        width: 100%;
        height: 100%;
        text-align: center;
        color: var(--color-navy);
        font-size: 0.8rem !important;
        font-weight: 500;
        word-wrap: break-word
    }
    .jourCalendrierRdv{
        font-size: 0.8rem !important;
    }
    .zoneRemplissageCalendrierRdv{
        min-height: 50px;
    }
}
.jourCalendrierRdv{
    width: 20%; padding: 5px
}

.w-20{
    width: 20%
}
.zoneCalendrierRdv{
    border-radius: 10px; box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.03);
}
#tableagences td{
    padding: 0
}
.tableCalendrierRdv{
    width: 100%;  border-collapse: unset; border-color: var(--color-navy)
}
.tdHeaderCalendrierRdv{
    background: var(--color-navy); border-radius: 9px 9px 0 0
}
.contentTdHeaderCalendierRdv{
    text-align: center; color: white; font-size: 18px; font-weight: 600; text-transform: uppercase;
}
.monthsCalendrierRdv{
    text-align: center; color: var(--color-navy); font-size: 14px; font-weight: 700;
}
.colorBlue{
    color: var(--color-navy)
}

.bandeauAgence{
    height: 150px; background-repeat: no-repeat; background-size: cover; background-position: center
}

.agenceAdresse{
    width: 100%; height: 100%; color: var(--color-navy); font-size: 16px; font-weight: 700; word-wrap: break-word
}

.agenceAdresseFull{
    width: 100%; height: 100%; color: var(--color-blue-pale); font-size: 16px; font-weight: 700; word-wrap: break-word
}
.iframeadresse{
    width: 100%;
    border:0
}

/* Conteneur pleine largeur */
.info-garantie-outer {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Le badge */
.info-garantie {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    background-color: rgba(229, 226, 242, 0.33);
    border-radius: 20px;
    padding: 14px 22px;

    font-size: 14px;
    line-height: 1.4;
    color: #1c2258;
}

.info-garantie-icon {
    display: flex;
    align-items: center;
}

.info-garantie {
    align-self: center;
}

.info-garantie-icon img {
    width: 26px;
    height: 26px;
}
.section-particulier span{
    font-size: 1.2rem
}
.info-garantie-text {
    margin: 0;
}

.info-garantie-text strong {
    font-weight: 600;
}

.hero-card-tns > div{
    font-size: 1.2rem !important
}

.hero-card-tns{
    width: 48%
}
.title-pro-indendant-h{
    color: rgba(28, 34, 88, 1);
    font-size: 24px;
    font-weight: 700;
}

.title-pro-independant{
    font-weight: 400 !important;
    font-style: normal !important;
    color: rgba(49, 49, 49, 1) !important;
}
.ad-ti-tns{
    font-size: 26px !important;
}

.offer-heading span{
    font-size: 15px;
}

.btn-multiligne{
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.badge-icon-xl{
    width: 26px;
    height: 26px
}
.img-tns{
    max-width: 419px;
    height: 555px;
}


@media (max-width: 1500px) {

    .mega-menu.menu-mega-pro {
        left: 71% !important;
    }

}
@media (max-width: 1250px) {

    .nuoma-header{
        padding-left: 80px;
        padding-right: 80px;
    }

    .main-menu{
        gap: 0 !important
    }
}

.iti__invalid-number,
.iti__error {
    all: unset;
}


@media screen and (max-width: 900px) {
    .hero-card {
        width: 88% !important;
    }
    .hero-card-tns{
        width: 90% !important;
    }
    .mission-pro{
        padding: 10px 30px !important;
        padding-bottom: 45px !important;
    }

    .he-ca-pro .mi-buttons, .hero-card-tns .mi-buttons {
        display: flex;
        gap: 10px;
    }

    .hero-card-tns > .hero-title {
        font-size: 1rem !important;
    }

    .he-ca-pro .mi-buttons > .btn-hero-primary {
        font-size: 1.1rem !important;
        padding: 1px;
        text-wrap: revert;
    }

    .hero-card-tns > div {
        font-size: 12px !important;
    }

    .hero-card-tns .mi-buttons > .btn-hero-primary {
        font-size: 10px !important;
        padding: 10px;
        text-wrap: revert;
    }

    .btn-tns-ensavoir{
        text-align: center
    }
    .btn-tns-ensavoir a{
        font-size: 12px !important;
    }

    .mr-5{
        margin-right: 0 !important;
    }



    .mission-pro2 .btn-hero-primary{
        font-size: 1rem !important
    }

    .pr-5{
        padding: 0 !important
    }
    .ad-li-bloc li > span{
        font-size: 1rem !important
    }
    .title-pro{
        font-size: 1.3rem !important
    }

    .nuoma-adherent-section, .mission-pro-sm{
        padding: 10px 30px !important;
    }

    .org-list-sm > .organisation-list-item > .organisation-list-item-text{
        font-size : 12px !important
    }
}

@media screen and (max-width: 768px) {
    .d-n-m{
        display: none !important;
    }
}

@media screen and (max-width: 768px) {
    .hero-card-tns > .hero-title{
        font-size: 0.8rem !important
    }
    .org-list-sm > .organisation-list-item > .organisation-list-item-text{
        font-size: 10px !important
    }
    .he-ca-sm > .hero-title{
        font-size: 1rem !important
    }
    .he-ca-sm > div {
        font-size: 15px !important;
    }
    .he-ca-sm .mi-buttons > .btn-hero-primary{
        font-size: 12px !important
    }
}

@media (max-width: 900px) {
    .service-card {
        margin-top: 32px;
    }
}