/* Page ACCUEIL ============================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

a, button{
    cursor:pointer;
}

a{
    text-decoration:none;
    color: inherit;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:"Poppins",sans-serif;
    background:#ffffff;
    color:#222;
}

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

img{
    display:block;
    width:100%;
}

/*Déclaration des variables ===============================*/
:root{
    --primary:#0B5ED7;
    --primary-dark:#084298;
    --white:#fff;
    --text:#222;
    --border:#e9e9e9;
    --shadow:0 8px 25px rgba(0,0,0,.08);
    --transition:.35s ease;

    /* Palette de la navbar — thème "manifeste de transport" */
    --ink:#0A1128;
    --ink-soft:#141C40;
    --amber:#FFC107;
    --paper:#F5F3EE;
    --line:rgba(245,243,238,.14);
}

html, body{
    overflow-x:hidden;
    max-width:100%;
}

/*Le Container===============================*/
.container{
    width:min(90%,1250px);
    margin:auto;
}


/* Animation lors du scroll */
@keyframes navDown{
    from{ 
        transform:translateY(-100%);
    }
    to{ 
        transform:translateY(0); 
    }
}

@keyframes fadeUp{
    from{ 
        opacity:0; 
        translate:0 28px; 
    }
    to{ 
        opacity:1; 
        translate:0 0; 
    }
}

.navbar{
    animation:navDown .6s cubic-bezier(.22,1,.36,1) both;
}

.top-info-bar{
    opacity:0;
    animation:fadeUp .8s ease .35s both;
}

.accueil-contenu h1,
.accueil-contenu p,
.accueil-contenu .accueil-boutons{
    opacity:0;
    animation:fadeUp .9s cubic-bezier(.22,1,.36,1) both;
}

.accueil-contenu h1{ 
    animation-delay:.5s; 
}
.accueil-contenu p{ 
    animation-delay:.75s; 
}
.accueil-contenu .accueil-boutons{ 
    animation-delay:1s; 
}

/* Apparition simple au défilement */
.reveal,
.reveal-left,
.reveal-right{
    opacity:0;
    transition:opacity .8s cubic-bezier(.22,1,.36,1), translate .8s cubic-bezier(.22,1,.36,1);
}

.reveal{ 
    translate:0 40px; 
}
.reveal-left{ 
    translate:-50px 0; 
}
.reveal-right{ 
    translate:50px 0; 
}

.reveal.in-view,
.reveal-left.in-view,
.reveal-right.in-view{
    opacity:1;
    translate:0 0;
}

/* Apparition en cascade pour les groupes de cartes */
.stagger > *{
    opacity:0;
    translate:0 30px;
    transition:opacity .7s cubic-bezier(.22,1,.36,1), translate .7s cubic-bezier(.22,1,.36,1);
}

.stagger.in-view > *{
    opacity:1;
    translate:0 0;
}

.stagger.in-view > *:nth-child(1){ transition-delay:.05s; }
.stagger.in-view > *:nth-child(2){ transition-delay:.15s; }
.stagger.in-view > *:nth-child(3){ transition-delay:.25s; }
.stagger.in-view > *:nth-child(4){ transition-delay:.35s; }
.stagger.in-view > *:nth-child(5){ transition-delay:.45s; }
.stagger.in-view > *:nth-child(6){ transition-delay:.55s; }

/* Confort d'accessibilité : respecte la préférence "mouvement réduit" */
@media (prefers-reduced-motion: reduce){
    .navbar,
    .top-info-bar,
    .accueil-contenu h1,
    .accueil-contenu p,
    .accueil-contenu .accueil-boutons{
        animation:none !important;
        opacity:1 !important;
        transform:none !important;
    }
    .reveal,
    .reveal-left,
    .reveal-right,
    .stagger > *{
        transition:none !important;
        opacity:1 !important;
        translate:0 0 !important;
    }
}

/*La NAVBAR===============================*/
.navbar{
    position:fixed;
    top:42px;
    left:0;
    right:0;
    width:auto;
    background:rgba(10,17,40,.35);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(245,243,238,.12);
    border-radius:0;
    z-index:1000;
    transition:
        top .4s ease,
        left .45s cubic-bezier(.22,1,.36,1),
        right .45s cubic-bezier(.22,1,.36,1),
        border-radius .45s ease,
        background .4s ease,
        backdrop-filter .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;
}

.navbar.scrolled{
    top:0;
    left:240px;
    right:240px;
    border-radius:0 0 40px 40px;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-bottom-color:rgba(10,17,40,.08);
    box-shadow:0 12px 30px rgba(10,17,40,.1);
}

.navbar.scrolled.bas-de-page{
    left:0;
    right:0;
    border-radius:0;
}


@media (max-width:1700px){
    .navbar.scrolled{
        left:0;
        right:0;
        border-radius:0;
    }
}

/* .navbar{
    position:fixed;
    top:42px;
    left:0;
    width:100%;
    background:rgba(10,17,40,.35);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(245,243,238,.12);
    border-radius: 0 0 40px 40px;
    z-index:1000;
    transition:top .4s ease, background .4s ease, backdrop-filter .4s ease, border-color .4s ease, box-shadow .4s ease;
}

.navbar.scrolled{
    top:0;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(10px);
    border-bottom-color:rgba(10,17,40,.08);
    box-shadow:0 12px 30px rgba(10,17,40,.1);
} */

.navbar .container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    height:85px;
    transition:height .4s ease;
}

/* .navbar.scrolled .container{
    height:66px;
} */

.navbar.scrolled .nav-links > li > a{
    color:var(--ink);
}

.navbar.scrolled .nav-links > li > a:hover{
    color:var(--amber);
}

.navbar.scrolled .nav-links>li:not(:last-child)::after{
    color:rgba(10,17,40,.25);
}

.navbar.scrolled .menu-toggle span{
    background:var(--ink);
}

/* Bloc contact détaché : toujours sombre, toujours lisible,
   peu importe l'état (transparent ou blanc) de la navbar */
.nav-contact-block{
    display:flex;
    align-items:center;
    gap:16px;
    background:var(--ink);
    padding:10px 10px 10px 22px;
    clip-path:polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px);
}

.nav-contact-tel{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--paper);
    font-weight:600;
    font-size:.9rem;
    white-space:nowrap;
    transition:var(--transition);
}

.nav-contact-tel i{
    color:var(--amber);
}

.nav-contact-tel:hover{
    color:var(--amber);
}

.nav-contact-block .btn-outline{
    border:1px solid rgba(245,243,238,.35);
    color:var(--paper);
    border-radius:0;
    padding:10px 20px;
    clip-path:polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px);
}

.nav-contact-block .btn-outline:hover{
    background:rgba(255,193,7,.12);
    border-color:var(--amber);
    color:var(--amber);
}

/*Le logo===============================*/

.logo{
    width:150px;
    height:60px;
    display:flex;
    align-items:center;
    gap:12px;
    position:relative;
}

.logo::before{
    content:"";
    width:3px;
    height:34px;
    border-radius:2px;
    background:var(--amber);
    flex-shrink:0;
    position:relative;
    z-index:2;
}

.logo img{
    width:150px;
    height:60px;
    object-fit:contain;
    position:absolute;
    left:15px;
    top:0;
    transition:opacity .35s ease;
}

/* Logo clair visible par défaut (navbar glass/transparente) */
.logo-clair{
    opacity:1;
}

.logo-couleur{
    opacity:0;
}

/* Au scroll (navbar blanche) : bascule vers le logo couleur/sombre */
.navbar.scrolled .logo-clair{
    opacity:0;
}

.navbar.scrolled .logo-couleur{
    opacity:1;
}

/* Le menu de la navbar ===============================*/

.nav-links{
    display:flex;
    gap:32px;
    align-items:center;
}

.nav-links>li{
    position:relative;
}

.nav-links>li:not(:last-child)::after{
    content:"/";
    position:absolute;
    right:-18px;
    top:50%;
    transform:translateY(-50%);
    color:rgba(245,243,238,.3);
    font-weight:300;
}

.nav-links a{
    position:relative;
    display:inline-block;
    padding-bottom:6px;
    color:var(--paper);
    font-weight:600;
    font-size:.92rem;
    letter-spacing:.04em;
    text-transform:uppercase;
    transition:var(--transition);
}

.nav-links a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:0;
    height:2px;
    background-image:repeating-linear-gradient(90deg, var(--amber) 0 6px, transparent 6px 10px);
    transition:width .4s ease;
}

.nav-links a:hover{
    color:var(--amber);
}

.nav-links a:hover::after{
    width:100%;
}

/*Langue Navbar ================================================*/
.nav-language{
    display:flex;
    align-items:center;
    gap:8px;
    margin-right:20px;
}

.nav-language i{
    color:var(--amber);
    font-size:18px;
}

.nav-language select{
    width:80px;
    height:40px;
    color:var(--paper);
    border:1px solid rgba(245,243,238,.25);
    border-radius:8px;
    background:rgba(255,255,255,.06);
    padding:0 10px;
    font-size:14px;
    cursor:pointer;
    outline:none;
    transition:.3s;
}

.nav-language select:hover{
    border-color:var(--amber);
    background:rgba(255,255,255,.1);
}

.nav-language select:focus{
    border-color:var(--amber);
    box-shadow:0 0 8px rgba(255,193,7,.25);
}

.nav-language option{
    color:#222;
    background:#fff;
}

/*Le dropdown===============================*/

.dropdown>a{
    display:flex;
    align-items:center;
    gap:8px;
}

.dropdown-menu{
    position:absolute;
    top:150%;
    left:0;
    width:250px;
    background:var(--ink-soft);
    border:1px solid var(--line);
    border-radius:4px;
    box-shadow:0 20px 40px rgba(0,0,0,.35);
    opacity:0;
    visibility:hidden;
    transform:translateY(15px);
    transition:var(--transition);
    overflow:hidden;
}

.dropdown:hover .dropdown-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.dropdown-menu li a{
    display:block;
    padding:14px 20px;
    border-left:3px solid transparent;
    color:var(--paper);
    font-weight:400;
    text-transform:none;
    letter-spacing:normal;
    font-size:.95rem;
}

.dropdown-menu li a::after{
    display:none;
}

.dropdown-menu li a:hover{
    background:rgba(255,193,7,.08);
    border-left-color:var(--amber);
    color:var(--amber);
}

/*Les buttons ===============================*/ 
.nav-buttons{
    display:flex;
    gap:15px;
}

.btn{
    padding:14px 26px;
    border-radius:10px;
    font-weight:500;
    transition:var(--transition);
}

.btn-primary{
    background:var(--primary);
    color:#fff;
}

.btn-primary:hover{
    background:var(--primary-dark);
    transform:translateY(-2px);
}

.btn-outline{
    border:2px solid var(--primary);
    color:var(--primary);
    display:flex;
    align-items:center;
    gap:10px;
}

.btn-outline:hover{
    background:var(--primary);
    color:#fff;
}


.nav-buttons .btn-outline{
    border:1px solid rgba(245,243,238,.35);
    color:var(--paper);
    border-radius:0;
    clip-path:polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px);
}

.nav-buttons .btn-outline:hover{
    background:rgba(245,243,238,.08);
    border-color:var(--amber);
    color:var(--amber);
}

/* Bouton hamburger (masqué en desktop) */
.menu-toggle{
    display:none;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:6px;
    width:38px;
    height:38px;
    background:none;
    border:none;
    z-index:1100;
}

.menu-toggle span{
    display:block;
    width:26px;
    height:2px;
    background:var(--paper);
    border-radius:2px;
    transition:var(--transition);
}

.menu-toggle.active span:nth-child(1){
    transform:translateY(8px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2){
    opacity:0;
}

.menu-toggle.active span:nth-child(3){
    transform:translateY(-8px) rotate(-45deg);
}

/* Navbar responsive : tablette et mobile */
@media (max-width: 1024px){

    .menu-toggle{
        display:flex;
        /* margin-left: -16px; */
        margin-left: 6px;
    }

    /* Overlay mobile */
    .mobile-overlay{
        position:fixed;
        inset:0;
        background:rgba(0,0,0,.5);
        opacity:0;
        visibility:hidden;
        transition:.35s ease;
        z-index:1050;
    }

    .mobile-overlay.active{
        opacity:1;
        visibility:visible;
    }

    /* Panneau menu mobile */
    .mobile-menu{
        position:fixed;
        top:0;
        right:0;
        height:100%;
        width:300px;
        max-width:85%;
        opacity: .95;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        background:var(--ink);
        padding:80px 30px 30px;
        transform:translateX(100%);
        transition:transform .4s cubic-bezier(.22,1,.36,1);
        z-index:1100;
        overflow-y:auto;
    }

    .mobile-menu.active{
        transform:translateX(0);
    }

    .mobile-menu-close{
        position:absolute;
        top:20px;
        right:20px;
        background:none;
        border:none;
        color:var(--paper);
        font-size:1.6rem;
    }

    .mobile-nav-links li{
        border-bottom:1px solid var(--line);
    }

    .mobile-nav-links a,
    .mobile-dropdown-toggle{
        display:flex;
        justify-content:space-between;
        align-items:center;
        width:100%;
        padding:16px 0;
        color:var(--paper);
        background:none;
        border:none;
        font-size:1rem;
        text-align:left;
    }

    .mobile-dropdown-menu{
        max-height:0;
        overflow:hidden;
        transition:max-height .35s ease;
    }

    .mobile-dropdown.open .mobile-dropdown-menu{
        max-height:300px;
    }

    .mobile-dropdown-menu li a{
        padding:10px 0 10px 15px;
        font-size:.9rem;
        color:rgba(245,243,238,.75);
    }

    .mobile-menu .nav-buttons{
        display:flex;
        flex-direction:column;
        gap:14px;
        margin-top:25px;
        position: static;
        width: auto;
        min-height: none;
        padding: 0;
        background: transparent;
        z-index: auto;
    }

    .dropdown-menu{
        position:static;
        width:100%;
        opacity:1;
        visibility:visible;
        transform:none;
        box-shadow:none;
        border:none;
        border-radius:0;
        background:rgba(255,255,255,.03);
    }

}

/* Cache le menu desktop en dessous de 1024px */
@media (max-width: 1024px){
    .nav-links,
    .nav-buttons,
    /* .nav-contact-block, */
    .nav-language{
        display:none;
    }

    .nav-contact-block .btn-outline{
        display:none;
    }

    .navbar-right-action{
        display: flex;
    }

    .nav-contact-block{
        display: none;
    }
}

.nav-contact-block{
    padding:10px 22px;
}



/* Cache le hamburger et le panneau mobile au-dessus de 1024px */
@media (min-width: 1025px){
    .menu-toggle,
    .mobile-overlay,
    .mobile-menu{
        display:none;
    }
}

/* Info entreprise ==================================================================*/
.top-info-bar{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    background:var(--ink);
    color:var(--paper);
    border-bottom:2px solid var(--amber);
    overflow:hidden;
    z-index:1001;
    transition:transform .4s ease;
}

.top-info-bar.scrolled{
    transform:translateY(-100%);
}

.top-info-bar .container{
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
}

.info-item{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:.85rem;
    font-weight:400;
    letter-spacing:.02em;
}

.info-item i{
    color:var(--amber);
    font-size:.9rem;
}

.separator{
    width:5px;
    height:5px;
    background:var(--amber);
    transform:rotate(45deg);
    opacity:.7;
}

/* Section principale ==============================================*/
.accueil{
    position: relative;
    width:100%;
    height:100vh;
    overflow:hidden;
}

/* Image */
.accueil-image{
    position:absolute;
    inset:0;
    /* z-index:1; */
    overflow:hidden;
}

.accueil-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    position:absolute;
    inset:0;
    opacity:0;
    transform:scale(1.05);
    transition:
        opacity 1.5s ease,
        transform 8s linear;
}

.accueil-image img.active{
    opacity:1;
    transform:scale(1.12);
}

/* Overlay */
.overlay{
    position:absolute;
    inset:0;
    /* background:rgba(0,0,0,.58); */
    background:linear-gradient(
        to top,
        rgba(0,0,0,.82),
        rgba(0,0,0,.55),
        rgba(0,0,0,.30)
    );
    z-index:2;
}

/* Contenu */
.accueil .container{
    position:relative;
    z-index:3;
    height:100%;
    display:flex;
    justify-content:flex-start;
    align-items:center;
}

.accueil-contenu{
    width:48%;
    color:#fff;
    padding-left: 20px;
}

.accueil-contenu h1{
    font-size:3.3rem;
    line-height:1.2;
    margin-bottom:25px;
    font-weight:700;
}

.accueil-contenu p{
    font-size:1.05rem;
    line-height:1.8;
    margin-bottom:35px;
    opacity:.95;
}

/* Boutons */
.accueil-boutons{
    display:flex;
    gap:20px;
}

.btn-secondaire{
    border:2px solid #fff;
    color:#fff;
    padding:14px 28px;
    border-radius:10px;
    transition: .35s;
}

.btn-secondaire:hover{
    background:#fff;
    color:#111;
}

.accueil-boutons .btn-primary{
    background:var(--amber);
    color:var(--ink);
    border-radius:0;
    clip-path:polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
    font-weight:600;
    border:none;
}

.accueil-boutons .btn-primary:hover{
    background:#ffd54a;
    transform:translateY(-2px);
}

.galerie-btn .btn-primary{
    background:var(--amber);
    color:var(--ink);
    border-radius:0;
    clip-path:polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
    font-weight:600;
    border:none;
}

.galerie-btn .btn-primary:hover{
    background:#ffd54a;
    transform:translateY(-2px);
}

.contact-right .btn-primary{
    background:var(--amber);
    color:var(--ink);
    border-radius:0;
    font-size: 15px;
    clip-path:polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
    font-weight:600;
    border:none;
}

.contact-right .btn-primary:hover{
    background:#ffd54a;
    transform:translateY(-2px);
}

.accueil-boutons .btn-secondaire{
    border:1px solid rgba(255,255,255,.6);
    background:transparent;
    color:#fff;
    border-radius:0;
    clip-path:polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px);
    transition:var(--transition);
}

.accueil-boutons .btn-secondaire:hover{
    background:rgba(255,255,255,.08);
    border-color:var(--amber);
    color:var(--amber);
    transform:translateY(-2px);
}

/* Section présentation de l'entreprise =========================================================*/
.presentation{
    padding:120px 0;
    background:#fff;
}

.presentation .container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:80px;
}

.presentation-images{
    position:relative;
    width:50%;
}

.image-principale{
    width:85%;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 20px 45px rgba(0,0,0,.12);
}

.image-principale img{
    width:100%;
    display:block;
}

.image-secondaire{
    position:absolute;
    bottom:-50px;
    right:0;
    width:55%;
    border:8px solid #fff;
    /* border-radius:20px; */
    overflow:hidden;
    /* box-shadow:0 20px 45px rgba(0,0,0,.15); */
}

.image-secondaire img{
    width:100%;
    display:block;
}

.presentation-contenu{
    width:50%;
}

.presentation-badge{
    display:inline-block;
    padding:8px 18px;
    background:#E8F1FF;
    color:#0B5ED7;
    border-radius:50px;
    font-size:.9rem;
    font-weight:600;
    margin-bottom:20px;
}

.presentation-contenu h2{
    font-size:2.6rem;
    line-height:1.3;
    margin-bottom:25px;
    color:#222;
}

.presentation-contenu p{
    font-size:1rem;
    line-height:1.9;
    color:#666;
    margin-bottom:20px;
}

/* .statistiques{
    margin-top:50px;
    display:flex;
    align-items:stretch;
    padding-top:40px;
    border-top:1px solid var(--border);
} */

/* .stat{
    flex:1;
    text-align:left;
    padding-right:35px;
    position:relative;
} */

/* .stat:not(:last-child)::after{
    content:"";
    position:absolute;
    top:4px;
    right:0;
    width:1px;
    height:calc(100% - 8px);
    background:var(--border);
} */

/* .stat h3{
    font-size:2.6rem;
    font-weight:700;
    color:var(--primary);
    line-height:1;
    margin-bottom:12px;
    display:inline-block;
    position:relative;
} */

/* .stat h3::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-8px;
    width:34px;
    height:3px;
    border-radius:2px;
    background:var(--amber);
} */

/* .stat span{
    display:block;
    font-size:.92rem;
    color:#666;
    font-weight:500;
    margin-top:14px;
} */

.statistiques{
    margin-top:50px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
    padding-top:40px;
    border-top:1px solid var(--border);
}

.stat-card{
    position:relative;
    background:#fff;
    border:1px solid var(--border);
    border-radius:18px;
    padding:30px 20px;
    text-align:center;
    box-shadow:0 10px 30px rgba(10,17,40,.05);
    transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    overflow:hidden;
}

.stat-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:3px;
    background:linear-gradient(90deg, var(--primary), var(--amber));
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .5s ease;
}

.stat-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 45px rgba(10,17,40,.1);
    border-color:transparent;
}

.stat-card:hover::before{
    transform:scaleX(1);
}

.stat-icon{
    width:54px;
    height:54px;
    margin:0 auto 16px;
    border-radius:50%;
    background:#E8F1FF;
    color:var(--primary);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.3rem;
    transition:.35s ease;
}

.stat-card:hover .stat-icon{
    background:var(--amber);
    color:var(--ink);
    transform:scale(1.08) rotate(-6deg);
}

.stat-odometre{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:2px;
    margin-bottom:8px;
}

.stat-odometre-mixte{
    flex-wrap:nowrap;
}

:root{
    --odometre-hauteur:38px;
}

.odometre-texte-fixe{
    font-size:2.1rem;
    font-weight:700;
    color:var(--primary);
}

.odometre-reels{
    display:flex;
}

.odometre-digit{
    width:24px;
    height:var(--odometre-hauteur);
    overflow:hidden;
    position:relative;
}

.odometre-strip{
    display:flex;
    flex-direction:column;
    transform:translateY(0);
    transition:transform 1.4s cubic-bezier(.22,1,.36,1);
}

.odometre-strip span{
    height:var(--odometre-hauteur);
    line-height:var(--odometre-hauteur);
    font-size:2.1rem;
    font-weight:700;
    color:var(--primary);
}

.stat-suffixe,
.odometre-texte-fixe{
    font-size:2.1rem;
    font-weight:700;
    color:var(--primary);
    margin-left:2px;
}

.stat-fixe{
    font-size:2rem;
    font-weight:700;
    color:var(--primary);
    margin-bottom:8px;
}

.stat-label{
    display:block;
    font-size:.9rem;
    color:#666;
    font-weight:500;
}

@media (max-width:768px){
    .statistiques{
        grid-template-columns:repeat(3,1fr);
        gap:12px;
    }

    .stat-card{
        padding:20px 10px;
    }

    .stat-icon{
        width:44px;
        height:44px;
        font-size:1.1rem;
        margin-bottom:12px;
    }

        :root{
        --odometre-hauteur:28px;
    }

    .odometre-texte-fixe{
        font-size:1.5rem;
    }

    .odometre-digit{
        width:18px;
        /* height:28px; */
    }

    .odometre-strip span{
        /* height:28px;
        line-height:28px; */
        font-size:1.5rem;
    }

    .stat-suffixe,
    .stat-fixe{
        font-size:1.5rem;
    }

    .stat-label{
        font-size:.78rem;
    }
}

/* Section de services =========================================================*/
.services{
    padding:120px 0;
    background:#f8f9fa;
}

.section-entete{
    max-width:750px;
    margin:0 auto 70px;
    text-align:center;
}

/* .section-badge{
    display:inline-block;
    padding:8px 18px;
    border-radius:50px;
    background:#E8F1FF;
    color:#0B5ED7;
    font-weight:600;
    margin-bottom:20px;
} */

.section-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 22px;
    border-radius:50px;
    background:var(--amber);
    color:var(--ink);
    font-weight:800;
    font-size:.85rem;
    text-transform:uppercase;
    letter-spacing:.08em;
    margin-bottom:20px;
    box-shadow:0 8px 20px rgba(255,193,7,.35);
}
 
.section-badge::before{
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--ink);
    flex-shrink:0;
}

/* =========================================================== */

.section-entete h2{
    font-size:2.6rem;
    margin-bottom:20px;
}

.section-entete p{
    color:#666;
    line-height:1.8;
}

/* Liste des blocs de service */
.services-list{
    display:flex;
    flex-direction:column;
    gap:110px;
}

.service-row{
    display:flex;
    align-items:center;
    gap:70px;
}

/* Alternance gauche/droite */
.service-row:nth-child(even){
    flex-direction:row-reverse;
}

.service-row-image{
    flex:1 1 50%;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 20px 50px rgba(0,0,0,.12);
}

.service-row-image img{
    width:100%;
    height:420px;
    object-fit:cover;
    transition:.6s ease;
}

.service-row:hover .service-row-image img{
    transform:scale(1.05);
}

.service-row-content{
    flex:1 1 50%;
    position:relative;
    padding:20px 10px;
}

/* Numéro géant en filigrane */
.service-row-number{
    position:absolute;
    top:-40px;
    left:0;
    font-size:9rem;
    font-weight:800;
    line-height:1;
    color:transparent;
    -webkit-text-stroke:1.8px rgba(11,94,215,.12);
    z-index:0;
    user-select:none;
}

.service-row-title{
    position:relative;
    z-index:1;
    font-size:1.9rem;
    margin-bottom:18px;
    display:inline-block;
    padding-bottom:14px;
}

.service-row-title::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:60px;
    height:3px;
    background:var(--primary);
    border-radius:2px;
}

.service-row-desc{
    position:relative;
    z-index:1;
    color:#666;
    line-height:1.85;
    margin-bottom:25px;
    max-width:480px;
}

.service-row-points{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-bottom:32px;
}

.service-row-points li{
    display:flex;
    align-items:center;
    gap:12px;
    color:#333;
    font-weight:500;
    font-size:.98rem;
}

.service-row-points i{
    color:var(--primary);
    font-size:1.1rem;
    flex-shrink:0;
}

.service-row-content .btn-primary{
    position:relative;
    z-index:1;
    background:var(--amber);
    color:var(--ink);
    border-radius:0;
    clip-path:polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
    font-weight:600;
    border:none;
    display:inline-block;
}

.service-row-content .btn-primary:hover{
    background:#ffd54a;
    transform:translateY(-2px);
}


/* Section pourqouoi nous choisir */
.why{
    position: relative;
    padding: 120px 0;
    color: #fff;
    overflow: hidden;
}

/* Image de fond */
.why-image{
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: url("../images/pourquoi1.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.why-overlay{
    position: absolute;
    inset: 0;
    z-index: 2;
    background: rgba(0,0,0,0.65);
}
/* .why-image{
    position: absolute;
    inset: 0;
    z-index: 1;
}

.why-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.why-overlay{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.65);
} */

/* CONTENT */
.why-content{
    position: relative;
    z-index: 2;
}

.why-text{
    max-width: 700px;
    margin-bottom: 60px;
}

.why-text h2{
    font-size: 2.8rem;
    margin-bottom: 20px;
}

.why-text p{
    font-size: 1.05rem;
    line-height: 1.8;
    color: rgba(255,255,255,0.85);
}

/* CARDS */
.why-cards{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.why-card{
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 16px;
    padding: 30px 20px;
    text-align: center;
    transition: 0.3s ease;
}

.why-card i{
    font-size: 1.8rem;
    margin-bottom: 12px;
    color: #fff;
}

.why-card h3{
    font-size: 1.1rem;
}

.why-card:hover{
    transform: translateY(-6px);
    background: rgba(255,255,255,0.15);
}

/* Section de la galerie =======================================================================*/
.galerie{
    padding:120px 0;
    background:#fff;
}

/* GRID */
.galerie-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

/* ITEM */
.galerie-item{
    position:relative;
    overflow:hidden;
    border-radius:18px;
    height:260px;
    cursor:pointer;
}

.galerie-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:0.4s ease;
}

/* OVERLAY */
.galerie-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.45);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transition:0.3s ease;
}

.galerie-overlay i{
    color:#fff;
    font-size:1.8rem;
}

/* HOVER EFFECT */
.galerie-item:hover img{
    transform:scale(1.08);
}

.galerie-item:hover .galerie-overlay{
    opacity:1;
}

.galerie-item-plus{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.65);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:2rem;
    font-weight:700;
    z-index:2;
    pointer-events:none; /* laisse le clic passer à travers vers .galerie-item */
}

/* BUTTON */
.galerie-btn{
    text-align:center;
    margin-top:50px;
}

/* Visionneuse plein l'écran */
.lightbox{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.94);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    visibility:hidden;
    transition:opacity .35s ease, visibility .35s ease;
    z-index:2000;
}

.lightbox.active{
    opacity:1;
    visibility:visible;
}

.lightbox-content{
    position:relative;
    max-width:85%;
    max-height:85vh;
    text-align:center;
}

.lightbox-content img{
    max-width:100%;
    max-height:85vh;
    width:auto;
    display:block;
    margin:auto;
    border-radius:8px;
    box-shadow:0 20px 60px rgba(0,0,0,.5);
    transform:scale(.95);
    opacity:0;
    transition:transform .35s ease, opacity .35s ease;
}

.lightbox.active .lightbox-content img{
    transform:scale(1);
    opacity:1;
}

.lightbox-compteur{
    display:block;
    margin-top:16px;
    color:var(--paper);
    font-size:.9rem;
    letter-spacing:.05em;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next{
    position:fixed;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.2);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:.3s;
    z-index:2001;
}

.lightbox-close{
    top:25px;
    right:25px;
    width:46px;
    height:46px;
    border-radius:50%;
    font-size:1.3rem;
}

.lightbox-prev,
.lightbox-next{
    top:50%;
    transform:translateY(-50%);
    width:55px;
    height:55px;
    border-radius:50%;
    font-size:1.4rem;
}

.lightbox-prev{ 
    left:25px; 
}
.lightbox-next{ 
    right:25px; 
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover{
    background:var(--amber);
    color:var(--ink);
    border-color:var(--amber);
}

@media (max-width:768px){
    .lightbox-content{ 
        max-width:92%; 
    }

    .lightbox-prev,
    .lightbox-next{
        width:42px;
        height:42px;
        font-size:1.1rem;
    }

    .lightbox-prev{ 
        left:10px;
    }
    .lightbox-next{ 
        right:10px; 
    }

    .lightbox-close{
        top:15px;
        right:15px;
        width:38px;
        height:38px;
        font-size:1.1rem;
    }
}
/* Fin de la visionneuse */


/* Section des témoignages ==================================================== */
/* Section des témoignages ==================================================== */
.temoignages{
    padding:120px 0;
    position: relative;
    overflow:hidden;
    padding:120px 0;
    background:
        linear-gradient(
            rgba(0,0,0,.70),
            rgba(0,0,0,.70)
        ),
        url("../images/avis.webp");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;
}

.temoignages-slider{
    width:100%;
    overflow:hidden;
    position:relative;
    /* border-radius:40px; */
}

.temoignages-track{
    display:flex;
    transition:transform .8s ease-in-out;
    will-change:transform;
}

.temoignages-page{
    min-width:100%;
    display:flex;
    justify-content:center;
}

/* Bouton "Donner votre avis" : même style clip-path que "Contactez-nous" (inchangé) */
.temoignages-btn .btn-outline{
    border:1px solid rgba(255,255,255,.5);
    color:#fff;
    background:transparent;
    border-radius:0;
    clip-path:polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px);
    display:inline-flex;
    align-items:center;
    gap:10px;
}

.temoignages-btn .btn-outline:hover{
    background:rgba(255,255,255,.08);
    border-color:var(--amber);
    color:var(--amber);
}

.temoignages .container{
    position:relative;
    z-index:2;
}

.temoignages-btn{
    text-align:center;
    margin-top:60px;
}

.temoignages .section-entete h2{
    color:#fff;
}

.temoignages .section-entete p{
    color:rgba(255,255,255,.85);
}

.temoignages .section-badge{
    background:rgba(255,255,255,.15);
    color:#fff;
    border:1px solid rgba(255,255,255,.25);
    box-shadow: none;
}

.temoignages .section-badge::before{
    background:#fff;
}

/* --- À partir d'ici : uniquement la carte d'avis, format Google --- */

.temoignage-card{
    position:relative;
    width:100%;
    max-width:640px;
    background:#fff;
    padding:38px 42px;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
    transition:.35s ease;
}

.temoignage-card:hover{
    transform:translateY(-8px);
    box-shadow:0 22px 45px rgba(0,0,0,.12);
}

.avis-entete{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:18px;
}

.avis-avatar{
    width:46px;
    height:46px;
    border-radius:50%;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--primary);
    color:#fff;
    font-weight:600;
    font-size:1.1rem;
}

.avis-entete-texte{
    display:flex;
    flex-direction:column;
}

.avis-nom{
    font-size:1.05rem;
    color:#222;
    font-weight:600;
    margin:0;
}

.avis-sous-titre{
    font-size:.82rem;
    color:#888;
}

.avis-notation{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:16px;
}

.etoiles{
    display:flex;
    gap:3px;
}

.etoiles i{
    color:#FFC107;
    font-size:.95rem;
}

.avis-temps{
    font-size:.82rem;
    color:#888;
}

.avis-texte-wrapper{
    margin-bottom:16px;
}

.temoignage-card .temoignage-message{
    font-size:.98rem;
    line-height:1.75;
    color:#3c3c3c;
    margin:0;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.temoignage-card .temoignage-message.expanded{
    display:block;
    -webkit-line-clamp:unset;
    overflow:visible;
}

.avis-voir-plus{
    background:none;
    border:none;
    color:var(--primary);
    font-weight:600;
    font-size:.9rem;
    cursor:pointer;
    padding:4px 0 0;
    display:inline-block;
}

.avis-voir-plus:hover{
    text-decoration:underline;
}

.avis-jaime{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:.88rem;
    color:#666;
    margin-bottom:6px;
    background:none;
    border:none;
    cursor:pointer;
    padding:6px 10px 6px 0;
    border-radius:6px;
    font-family:inherit;
    transition:.2s;
}

.avis-jaime:hover{
    background:#f2f2f2;
}

.avis-jaime.aime{
    color:var(--primary);
    font-weight:600;
}

.avis-jaime-compteur{
    color:#999;
    font-weight:500;
}

.avis-jaime.aime .avis-jaime-compteur{
    color:var(--primary);
}

.avis-jaime i{
    font-size:1rem;
}

.reponse-rts{
    margin-top:18px;
    padding-top:16px;
    border-top:1px solid #ececec;
}

.reponse-rts-entete{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:.87rem;
    color:#333;
    margin-bottom:8px;
}

.reponse-rts-entete i{
    color:#888;
    transform:scaleX(-1);
}

.reponse-rts-temps{
    margin-left:auto;
    font-weight:400;
    color:#999;
    font-size:.8rem;
}

.reponse-rts-message{
    font-size:.9rem;
    line-height:1.65;
    color:#555;
    margin:0;
}

.temoignages-slider{
    position:relative;
}

.temoignages-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:48px;
    height:48px;
    border-radius:50%;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.3);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:5;
    transition:.3s;
}

.temoignages-nav:hover{
    background:var(--amber);
    border-color:var(--amber);
    color:var(--ink);
}

.temoignages-prev{ left:10px; }
.temoignages-next{ right:10px; }

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

.temoignages-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:rgba(255,255,255,.35);
    border:none;
    cursor:pointer;
    padding:0;
    transition:.3s;
}

.temoignages-dot.active{
    background:var(--amber);
    width:26px;
    border-radius:6px;
}

@media (max-width:768px){
    .temoignages-nav{
        width:38px;
        height:38px;
    }
    .temoignages-prev{ left:4px; }
    .temoignages-next{ right:4px; }
}

/* Formulaire des témoignages ============================================================ */
.avis-modal{
    position:fixed;
    inset:0;
    background:rgba(10,17,40,.6);
    backdrop-filter:blur(4px);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    visibility:hidden;
    transition:opacity .3s ease, visibility .3s ease;
    z-index:2100;
    padding:20px;
}

.avis-modal.active{
    opacity:1;
    visibility:visible;
}

.avis-modal-box{
    position:relative;
    width:100%;
    max-width:520px;
    background:#fff;
    border-radius:20px;
    padding:45px;
    transform:scale(.92);
    opacity:0;
    transition:transform .3s ease, opacity .3s ease;
    box-shadow:0 30px 70px rgba(0,0,0,.3);
}

.avis-modal.active .avis-modal-box{
    transform:scale(1);
    opacity:1;
}

.avis-modal-close{
    position:absolute;
    top:18px;
    right:18px;
    width:38px;
    height:38px;
    border-radius:50%;
    background:#f2f2f2;
    border:none;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-size:1.1rem;
    color:#333;
    transition:.25s;
}

.avis-modal-close:hover{
    background:var(--amber);
    color:var(--ink);
}

.avis-modal-box h3{
    font-size:1.5rem;
    margin-bottom:10px;
    color:#1a1a1a;
}

.avis-modal-box > p{
    color:#666;
    line-height:1.7;
    margin-bottom:28px;
}

.avis-grid-2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.avis-champ{
    margin-bottom:18px;
}

.avis-champ label{
    display:block;
    font-size:.9rem;
    font-weight:600;
    color:#333;
    margin-bottom:8px;
}

.avis-champ input,
.avis-champ textarea{
    width:100%;
    padding:13px 15px;
    border:1px solid #ddd;
    border-radius:10px;
    outline:none;
    font-size:14px;
    font-family:inherit;
    transition:.3s;
}

.avis-champ input:focus,
.avis-champ textarea:focus{
    border-color:var(--primary);
}

.avis-champ textarea{
    resize:none;
}

.avis-submit.btn-primary{
    width:100%;
    text-align:center;
    justify-content:center;
    background:var(--amber);
    color:var(--ink);
    border-radius:0;
    clip-path:polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
    font-weight:600;
    border:none;
    margin-top:6px;
}

.avis-submit.btn-primary:hover{
    background:#ffd54a;
    transform:translateY(-2px);
}

@media (max-width:480px){
    .avis-modal-box{
        padding:30px 24px;
    }

    .avis-grid-2{
        grid-template-columns:1fr;
        gap:0;
    }
}

/* Section de contact ============================================================== */
.contact{
    position:relative;
    overflow:hidden;
    padding:120px 0;
    background-color:#f7f7f7;
    background-image:repeating-linear-gradient(45deg, rgba(10,17,40,.025) 0 2px, transparent 2px 26px);
}

.contact::before,
.contact::after{
    content:"";
    position:absolute;
    border:2px solid rgba(10,17,40,.06);
    background:rgba(255,255,255,.55);
    box-shadow:0 25px 50px rgba(10,17,40,.07);
    border-radius:24px;
    z-index:0;
    pointer-events:none;
}

.contact::before{
    width:340px;
    height:340px;
    top:-90px;
    left:-110px;
    animation:flotterCarre1 9s ease-in-out infinite;
}

.contact::after{
    width:260px;
    height:260px;
    bottom:-80px;
    right:-70px;
    /* border-color:rgba(255,193,7,.2); */
    animation:flotterCarre2 11s ease-in-out infinite;
}

@keyframes flotterCarre1{
    0%, 100%{ transform:translate(0,0) rotate(18deg); }
    50%{ transform:translate(20px,-16px) rotate(23deg); }
}

@keyframes flotterCarre2{
    0%, 100%{ transform:translate(0,0) rotate(-12deg); }
    50%{ transform:translate(-18px,18px) rotate(-17deg); }
}

.contact .container{
    position:relative;
    z-index:1;
}

.contact-box{
    display:grid;
    grid-template-columns:42% 58%;
    background:#fff;
    border-radius:25px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,.12);
}

/* Côté gauche */
.contact-left{
    position:relative;
    min-height:650px;
}

.contact-left img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}
.contact-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(0, 0, 0, 0.90) 0%,
        rgba(0, 0, 0, 0.70) 45%,
        rgba(0, 0, 0, 0.40) 75%,
        rgba(0, 0, 0, 0.15) 100%
    );
}

.contact-left-content{
    position:relative;
    z-index:2;
    color:#fff;
    height:100%;
    padding:60px 45px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.contact-left-content h3{
    font-size:2rem;
    margin-bottom:20px;
}

.contact-left-content p{
    line-height:1.8;
    margin-bottom:45px;
}

.contact-info .info-item{
    display:flex;
    gap:18px;
    margin-bottom:30px;
}

.contact-info .info-item i{
    width:55px;
    height:55px;
    border-radius:50%;
    background:rgba(255,255,255,.15);
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:20px;
}

.contact-info .info-item h4{
    margin-bottom:5px;
}

/* Côté droit */
.contact-right{
    padding:60px;
    background:#fff;
}

.double-input{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.contact-right input,
.contact-right textarea{
    width:100%;
    padding:18px;
    margin-top:20px;
    border:1px solid #ddd;
    border-radius:10px;
    outline:none;
    transition:.3s;
    font-size:16px;
}

.contact-right input:focus,
.contact-right textarea:focus{
    border-color:#0B5ED7;
}

.contact-right textarea{
    height:180px;
    resize:none;
}

.contact-right button{
    margin-top:25px;
    width:100%;
}

.contact-message{
    margin-top:15px;
    font-size:.9rem;
    font-weight:500;
}

.contact-message.succes{
    color:#1a7f37;
}

.contact-message.erreur{
    color:#d32f2f;
}

/* Pied de page =============================================================================================*/
.footer{
    /* background:#111827; */
    background:var(--ink);
    color:#fff;
    padding:80px 0 0;
}

.footer-container{
    width:90%;
    max-width:1700px;
    margin:auto;
    display:grid;
    grid-template-columns:1.5fr 0.9fr 1.1fr 1.1fr;
    gap:80px;
    padding-bottom:60px;
}

/* Tablette / mobile */
@media (max-width: 1300px){
    .footer-container{
        grid-template-columns:1fr 1fr;
        gap:50px 40px;
    }

    .footer-newsletter-row-split{
        flex-direction:column;
        gap:40px;
    }
}

.footer-logo{
    margin-bottom:25px;
}

.footer-logo img{
    width:180px;
    height: auto;
    display:block;
}

.footer-texte{
    color:#bdbdbd;
    line-height:1.9;
    margin-bottom:30px;
    max-width:500px;
}

.footer-col h3{
    font-size:30px;
    font-weight: 500;
    margin-bottom:26px;
    color:#fff;
}

.footer-social{
    display:flex;
    gap:12px;
    margin-top:10px;
}

.footer-social a{
    width:40px;
    height:40px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.15);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:15px;
    transition:.3s;
}

.footer-social a:hover{
    background:var(--amber);
    color:var(--ink);
    border-color:var(--amber);
    transform:translateY(-3px);
}

.footer-liens{
    display:flex;
    flex-direction:column;
    gap:16px;
    list-style:none;
}

.footer-liens li{
    list-style:none;
}

.footer-liens a{
    color:#fff;
    text-decoration:none;
    transition:.3s;
    position:relative;
}

.footer-liens a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-5px;
    width:0;
    height:2px;
    background-image:repeating-linear-gradient(90deg, var(--amber) 0 6px, transparent 6px 10px);
    transition:.3s;
}

.footer-liens a:hover{
    color:#FFC107;
}

.footer-liens a:hover::after{
    width:100%;
}

.footer-contact{
    margin-top:25px;
}

.footer-contact-item{
    display:flex;
    align-items:flex-start;
    gap:15px;
    margin-bottom:18px;
}

.footer-contact-item i{
    color:var(--amber);
    font-size:18px;
    margin-top:3px;
}

.footer-contact-item span{
    color:#ddd;
    line-height:1.6;
}

/* Colonne Paiement accepté */
.footer-paiement{
    display:flex;
    align-items:center;
    gap:14px;
    margin-top:10px;
    flex-wrap:wrap;
}

.footer-paiement img{
    width:52px;
    height:auto;
    background:#fff;
    border-radius:6px;
    padding:6px 8px;
    object-fit:contain;
}

/* Ligne newsletter séparée, sous les 4 colonnes */
.footer-newsletter-row{
    width:90%;
    max-width:1700px;
    margin:0 auto;
    padding-bottom:60px;
    border-top:1px solid rgba(255,255,255,.08);
    padding-top:50px;
}

.footer-newsletter-row-split{
    display:flex;
    justify-content:space-between;
    gap:60px;
    flex-wrap:wrap;
}

.footer-newsletter-row-split .footer-newsletter-col{
    flex:1 1 480px;
}

.footer-paiement-col{
    flex:1 1 280px;
}

.footer-paiement-col h3{
    font-size:1.7rem;
    font-weight:500;
    margin-bottom:20px;
    color:#fff;
}

.footer-newsletter-col{
    max-width:520px;
}

/* Message de confirmation newsletter =================================================== */
.newsletter-message{
    margin-top:14px;
    padding:12px 16px;
    border-radius:10px;
    font-size:.9rem;
    font-weight:500;
    display:none;
    opacity:0;
    transform:translateY(-6px);
    transition:opacity .3s ease, transform .3s ease;
}

.newsletter-message.visible{
    display:block;
    opacity:1;
    transform:translateY(0);
}

.newsletter-message.succes{
    background:rgba(255,193,7,.12);
    border:1px solid rgba(255,193,7,.35);
    color:var(--amber);
}

.newsletter-message.erreur{
    background:rgba(220,53,69,.1);
    border:1px solid rgba(220,53,69,.35);
    color:#ff8a94;
}

/* Sélecteur de langue =================================================================*/
.footer-language{
    display: inline-flex;
    align-items:center;
    gap:12px;
    margin-top:50px;
}

.footer-language label{
    width:42px;
    height:42px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:18px;
    border:1px solid rgba(255,255,255,.12);
}

.footer-language select{
    flex:1;
    height:42px;
    padding:0 15px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:8px;
    background:rgba(255,255,255,.08);
    color:#fff;
    font-size:15px;
    cursor:pointer;
    outline:none;
    transition:.3s;
    width: 150px;
}

.footer-language label{
    transition:.3s;
}

.footer-language:hover label{
    transform:rotate(15deg);
    color: #000;
    cursor: pointer;
    background: var(--amber);
}

.footer-language select:hover{
    background:rgba(255,255,255,.12);
}

.footer-language select:focus{
    border-color: var(--amber);
}

.footer-language option{
    color:#222;
    background:#fff;
}

/* Newsletter — champ + bouton (glassmorphism, coin coupé ambre, icône, expansion au survol) ============= */
.footer-newsletter{
    display:flex;
    align-items:stretch;
    margin-top:30px;
    background:rgba(255,255,255,.07);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border:1px solid rgba(245,243,238,.18);
    border-radius:14px 0 0 14px;
    overflow:hidden;
    transition:border-color .3s ease;
}

.footer-newsletter:focus-within{
    border-color:rgba(255,193,7,.45);
}

.footer-newsletter-champ{
    display:flex;
    align-items:center;
    flex:1;
    gap:12px;
    padding-left:20px;
    min-width:0;
}

.footer-newsletter-champ i{
    color:var(--amber);
    font-size:16px;
    flex-shrink:0;
}

.footer-newsletter input{
    flex:1;
    min-width:0;
    background:transparent;
    border:none;
    outline:none;
    padding:18px 15px 18px 0;
    font-size:15px;
    color:#fff;
}

.footer-newsletter input::placeholder{
    color:rgba(255,255,255,.55);
}

.footer-newsletter button{
    display:flex;
    align-items:center;
    justify-content:center;
    width:56px;
    min-width:56px;
    padding:0;
    border:none;
    background:var(--amber);
    color:var(--ink);
    font-weight:600;
    font-size:15px;
    cursor:pointer;
    white-space:nowrap;
    clip-path:polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}

.footer-newsletter .btn-texte{
    display:inline-block;
    max-width:0;
    opacity:0;
    overflow:hidden;
    margin-left:0;
    transition:max-width .35s ease .05s, opacity .25s ease .1s, margin-left .35s ease;
}

@media (hover:hover) and (pointer:fine){
    .footer-newsletter button:hover{
        width:168px;
        background:#ffd54a;
    }

    .footer-newsletter button:hover .btn-texte{
        max-width:110px;
        opacity:1;
        margin-left:10px;
    }
}

/* Animation du bouton newsletter (avion) ==================================== */
.footer-newsletter button{
    position:relative;
    overflow:hidden;
    transition:width .35s cubic-bezier(.22,1,.36,1), background .3s ease;
}

.footer-newsletter button i{
    transition:opacity .25s ease, transform .3s ease;
}

.footer-newsletter button .icon-check{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transform:scale(.4) rotate(-20deg);
}

/* État : envoi en cours */
.footer-newsletter button.is-sending{
    background:#083d7a;
    pointer-events:none;
}

.footer-newsletter button.is-sending .fa-paper-plane{
    animation:newsletterVol 1.15s cubic-bezier(.45,0,.55,1) infinite;
}

@keyframes newsletterVol{
    0%{
        transform:translate(0,0) rotate(0deg);
        opacity:1;
    }
    40%{
        transform:translate(22px,-16px) rotate(20deg);
        opacity:1;
    }
    48%{
        transform:translate(30px,-22px) rotate(20deg);
        opacity:0;
    }
    52%{
        transform:translate(-30px,22px) rotate(-14deg);
        opacity:0;
    }
    60%{
        transform:translate(-18px,14px) rotate(-14deg);
        opacity:1;
    }
    100%{
        transform:translate(0,0) rotate(0deg);
        opacity:1;
    }
}

/* État : succès */
.footer-newsletter button.is-success{
    background:#22C55E;
}

.footer-newsletter button.is-success .fa-paper-plane{
    opacity:0;
    transform:scale(.4) translate(10px,-10px);
}

.footer-newsletter button.is-success .icon-check{
    opacity:1;
    transform:scale(1) rotate(0deg);
    transition:opacity .3s ease .1s, transform .4s cubic-bezier(.34,1.56,.64,1) .1s;
}

/* État : erreur */
.footer-newsletter button.is-error{
    background:#d32f2f;
    animation:newsletterSecousse .45s ease;
}

@keyframes newsletterSecousse{
    0%,100%{ transform:translateX(0); }
    20%{ transform:translateX(-6px); }
    40%{ transform:translateX(6px); }
    60%{ transform:translateX(-4px); }
    80%{ transform:translateX(4px); }
}

.footer-bottom-links{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.footer-bottom-links a{
    color:#ddd;
    text-decoration:none;
    transition:.3s;
}

.footer-bottom-links a:hover{
    color:var(--amber);
}

.footer-btn p{
    color: #aaa;
    margin: 0;
}

.footer-newsletter-title{
    font-size:1.7rem;
    font-weight: 700;
    margin-bottom:20px;
}

.footer-btn{
    border-top:1px solid rgba(255,255,255,.08);
    padding:25px 0;
    text-align:center;
}

.footer-btn p{
    color:#bdbdbd;
    font-size:15px;
}

/* Bouton flottant Contact / WhatsApp ============================================ */
.fab-contact{
    position:fixed;
    right:30px;
    bottom:100px; /* juste au-dessus du bouton retour en haut (30px + 56px + 14px) */
    z-index:900;
}

.fab-principal{
    width:70px;
    height:70px;
    border-radius:50%;
    background:#25D366;
    border:none;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:1.6rem;
    cursor:pointer;
    box-shadow:0 8px 20px rgba(37,211,102,.35);
    transition:transform .3s ease;
    animation:fabVibrer 2s ease-in-out infinite;
}

.fab-principal:hover{
    animation-play-state:paused;
    transform:scale(1.08);
}

.fab-principal.active{
    animation: none;
    transform:rotate(135deg);
}

@keyframes fabVibrer{
    0%, 75%, 100%{ 
        transform:scale(1) rotate(0); 
    }
    80%{ 
        transform:scale(1.05) rotate(-10deg); 
    }
    85%{ 
        transform:scale(1.06) rotate(10deg); 
    }
    90%{ 
        transform:scale(1.07) rotate(-6deg); 
    }
    95%{ 
        transform:scale(1.08) rotate(0); 
    }
}

.fab-sous-boutons{
    position:absolute;
    bottom:80px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
}

.fab-sous-btn{
    width:48px;
    height:48px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:1.15rem;
    box-shadow:0 8px 18px rgba(10,17,40,.2);
    opacity:0;
    transform:translateY(20px) scale(.6);
    pointer-events:none;
    transition:opacity .3s ease, transform .3s ease;
}

.fab-sous-boutons.active .fab-sous-btn{
    opacity:1;
    transform:translateY(0) scale(1);
    pointer-events:auto;
}

.fab-sous-boutons.active .fab-sous-btn:nth-child(1){ transition-delay:.05s; }
.fab-sous-boutons.active .fab-sous-btn:nth-child(2){ transition-delay:.12s; }

.fab-whatsapp-btn{
    background:#25D366;
}

.fab-whatsapp-btn:hover{
    background:#1ebe5a;
}

.fab-contact-btn{
    background:var(--amber);
    color:var(--ink);
}

.fab-contact-btn:hover{
    background:#ffd54a;
}

.fab-tel-btn{
    background:#2565d3;
}

.fab-tel-btn:hover{
    background:#1e61be;
}

@media (max-width:768px){
    .fab-contact{
        right:20px;
        bottom:82px;
    }

    .fab-principal{
        width:60px;
        height:60px;
        font-size:1.1rem;
    }

    .fab-sous-btn{
        width:42px;
        height:42px;
        font-size:1rem;
    }
}

/* Bouton retour en haut ============================================================ */
.scroll-top{
    position:fixed;
    bottom:30px;
    right:30px;
    width:56px;
    height:56px;
    background:var(--ink);
    border:none;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    opacity:0;
    visibility:hidden;
    transform:translateY(15px);
    transition:opacity .35s ease, visibility .35s ease, transform .35s ease, background .3s ease;
    z-index:900;
}

.scroll-top.visible{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.scroll-top:hover{
    background:var(--ink-soft);
}

.scroll-top i{
    position:relative;
    z-index:2;
    color:var(--amber);
    font-size:1.1rem;
    transition:.3s;
}

.scroll-top:hover i{
    transform:translateY(-2px);
}

.scroll-top-ring{
    position:absolute;
    inset:0;
    width:56px;
    height:56px;
    transform:rotate(-90deg);
}

.scroll-top-ring-bg{
    fill:none;
    stroke:rgba(245,243,238,.15);
    stroke-width:3;
}

.scroll-top-ring-progress{
    fill:none;
    stroke:var(--amber);
    stroke-width:3;
    stroke-linecap:round;
    stroke-dasharray:163.36;
    stroke-dashoffset:163.36;
    transition:stroke-dashoffset .1s linear;
}

/* RESPONSIVE MOBILE (téléphone) — max-width: 768px ======================================*/
@media (max-width: 768px){
    .navbar{
        top:0;
    }

    .nav-contact-block{
        display: none;
    }

    .container{
        width:92%;
    }

    .mobile-menu{
        width:100%;
        max-width:100%;
    }

    .top-info-bar{
        display: none;
    }

    .top-info-bar .container{
        height:auto;
        flex-direction:column;
        gap:8px;
        padding:12px 0;
    }

    .top-info-bar .separator{
        display:none;
    }

    .accueil{
        height:auto;
        min-height:100vh;
        padding:140px 0 60px;
    }

    .accueil .container{
        height:auto;
    }

    .accueil-contenu{
        width:100%;
        padding-left:0;
        text-align:center;
    }

    .accueil-contenu h1{
        font-size:2.3rem;
        margin-top: 100px;
    }

    .accueil-contenu p{
        font-size:.95rem;
    }

    .accueil-boutons{
        flex-direction:column;
        gap:14px;
    }

    .accueil-boutons .btn{
        width:100%;
        text-align:center;
    }

    .presentation{
        padding:70px 0;
    }

    .presentation .container{
        flex-direction:column;
        gap:60px;
    }

    .presentation-images,
    .presentation-contenu{
        width:100%;
    }

    .image-principale{
        width:100%;
    }

    /* Correction : l'image secondaire en absolute + width:60% + border:8px
       dépassait la largeur du parent sur mobile → débordement horizontal */
    .image-secondaire{
        width:55%;
        bottom:-25px;
        right:10px;
    }

    .presentation-contenu h2{
        font-size:1.9rem;
    }

    .statistiques{
        margin-top:60px;
        padding-top:30px;
        flex-wrap:wrap;
        gap:25px;
    }

    .stat{
        flex:1 1 30%;
        padding-right:20px;
    }

    .stat h3{
        font-size:1.9rem;
    }

    .stat span{
        font-size:.82rem;
    }

    .services{
        padding:70px 0;
    }

        .services-list{
        gap:60px;
    }

    .service-row,
    .service-row:nth-child(even){
        flex-direction:column;
        gap:30px;
    }

    .service-row-image img{
        height:240px;
    }

    .service-row-content{
        padding:0;
    }

    .service-row-number{
        font-size:5.5rem;
        top:-22px;
    }

    .service-row-title{
        font-size:1.5rem;
    }

    .section-entete h2{
        font-size:1.9rem;
    }

    .why{
        padding:70px 0;
    }

    .why-text h2{
        font-size:2rem;
    }

    .why-cards{
        grid-template-columns:repeat(2,1fr);
        gap:16px;
    }

    .galerie{
        padding:70px 0;
    }

    .galerie-grid{
        grid-template-columns:1fr 1fr;
        gap:12px;
    }

    .galerie-item{
        height:160px;
    }

    .temoignages{
        padding:70px 0;
        background-attachment:fixed;
        /* background-position: center center; */
    }

    .temoignages-page{
        flex-direction:column;
        justify-content:flex-start; /* correction : space-between étirait les cartes verticalement */
        gap:25px;
    }

    .temoignage-card{
        padding:30px 25px;
    }

    /* .quote{
        font-size:6rem;
    } */

    .contact{
        padding:70px 0;
    }

    .contact-box{
        grid-template-columns:1fr;
        border-radius:18px;
    }

    .contact-left{
        min-height:320px;
    }

    /* Correction : padding de 60px 45px trop large, réduisait l'espace
       utile du contenu et provoquait un tassement/décalage visuel */
    .contact-left-content{
        padding:40px 28px;
    }

    .contact-info .info-item{
        gap:14px;
        margin-bottom:22px;
    }

    .contact-right{
        padding:35px 25px;
    }

    .double-input{
        grid-template-columns:1fr;
        gap:0;
    }

    .footer{
        padding:60px 0 0;
    }

    .footer-container{
        width:92%;
        padding-bottom:40px;
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .footer-newsletter-row-split{
        gap:45px;
    }

    .footer-newsletter-row{
        padding-top:45px;
    }

    .footer-col h3{
        font-size: 1.7rem;
    }

    .footer-social{
        margin-bottom:10px;
    }

    .footer-newsletter-champ{
        padding-left:16px;
        gap:10px;
    }

    .footer-newsletter input{
        padding:14px 10px 14px 0;
        font-size:14px;
    }

    .footer-newsletter button{
        width:48px;
        min-width:48px;
        font-size:16px;
    }

    .scroll-top{
        width:48px;
        height:48px;
        bottom:20px;
        right:20px;
    }

    .scroll-top-ring{
        width:48px;
        height:48px;
    }

    .scroll-top i{
        font-size:1rem;
    }
}

/* Bouton CTA final (page Services) — évite le texte coupé sous 400px */
@media (max-width:400px){
    .service-final-cta .btn-primary{
        display:inline-block;
        font-size:.82rem;
        padding:14px 18px;
        line-height:1.35;
        white-space:normal;
        max-width:92%;
        clip-path:polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
    }
}

@media (max-width: 480px){

    /* Correction : logo à taille fixe (150px) trop large sur très petits écrans,
       poussait le hamburger et créait un débordement horizontal de la navbar */
    .logo img{
        width:115px;
        height:46px;
    }

    .logo-clair,
    .logo-sombre{
        width:115px;
        height:46px;
    }

    .accueil-contenu h1{
        font-size:1.6rem;
    }

    .presentation-contenu h2,
    .section-entete h2,
    .why-text h2{
        font-size:1.5rem;
    }

    .statistiques{
        flex-direction:column;
        gap:22px;
    }

    .stat{
        padding-right:0;
        padding-bottom:22px;
        border-bottom:1px solid var(--border);
    }

    .stat:not(:last-child)::after{
        display:none;
    }

    .stat:last-child{
        border-bottom:none;
        padding-bottom:0;
    }

    .service-row-image img{
        height:200px;
    }

    .service-detail-image{
       height:200px;
    }

    .service-detail-image img{
        width:100%;
        height:100%;
        object-fit:cover;
    }

    .service-row-number{
        font-size:4rem;
        top:-15px;
    }

    .why-cards{
        grid-template-columns:1fr;
    }

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

    .galerie-item{
        height:200px;
    }

    .contact-left-content{
        padding:32px 20px;
    }

    .contact-info .info-item i{
        width:45px;
        height:45px;
        font-size:16px;
    }

    .contact-right{
        padding:25px 18px;
    }

    /* Correction : cohérence avec .container (92%) au lieu de 100%,
       pour garder le même alignement gauche/droite qu'au-dessus */
    .footer-container{
        width:92%;
        grid-template-columns:1fr;
        gap:36px;
    }

    .footer-newsletter-champ{
        padding-left:14px;
    }

    .footer-newsletter input{
        padding:12px 8px 12px 0;
        font-size:13px;
    }

    .footer-newsletter button{
        width:44px;
        min-width:44px;
        font-size:15px;
    }
}





/* Page A PROPOS ====================================================================== */
.breadcrumb-hero{
    position:relative;
    /* margin-top:127px; hauteur navbar (85px) + top-info-bar (42px) */
    padding:170px 0 90px;
    background:linear-gradient(rgba(10,17,40,.88), rgba(10,17,40,.88)), url("../images/pourquoi1.jpg");
    background-size:cover;
    background-position:center;
    color:#fff;
    text-align:center;
    overflow:hidden;
}

.breadcrumb-hero h1{
    font-size:2.6rem;
    font-weight:700;
    margin-bottom:18px;
}

.breadcrumb-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    font-size:.95rem;
    color:rgba(245,243,238,.75);
}

.breadcrumb-nav a{
    color:var(--paper);
    font-weight:500;
    transition:.3s;
}

.breadcrumb-nav a:hover{
    color:var(--amber);
}

.breadcrumb-nav i{
    font-size:.7rem;
    color:var(--amber);
}

.breadcrumb-nav .current{
    color:var(--amber);
    font-weight:600;
}

/* Sections de contenu A propos ==========================================*/
.apropos-histoire{
    padding:110px 0;
    background:#fff;
}

.apropos-histoire .container{
    display:flex;
    align-items:center;
    gap:80px;
}

.apropos-histoire-image{
    flex:1 1 48%;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 20px 50px rgba(0,0,0,.12);
}

.apropos-histoire-image img{
    height:480px;
    object-fit:cover;
}

.apropos-histoire-contenu{
    flex:1 1 52%;
}

.apropos-histoire-contenu h2{
    font-size:2.4rem;
    line-height:1.3;
    margin:18px 0 22px;
}

.apropos-histoire-contenu p{
    color:#666;
    line-height:1.9;
    margin-bottom:18px;
}

/* Section nos valeurs =============================== */
.apropos-valeurs .section-badge{
    background:rgba(255,255,255,.15);
    color:#fff;
    border:1px solid rgba(255,255,255,.25);
    box-shadow: none;
}

.apropos-valeurs .section-badge::before{
    background:#fff;
}

.apropos-valeurs .container{
    position: relative;
    z-index: 2;
}

.apropos-valeurs{
    position: relative;
    overflow: hidden;
    padding: 120px 0;
}

.apropos-valeurs-image{
    position: absolute;
    inset: 0;
    z-index: 1;
}

.apropos-valeurs-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.apropos-valeurs-overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,.80),
        rgba(0,0,0,.45)
    );
}

/* Nos valeurs — texte courant, intro fixe + paragraphes */
.apropos-valeurs-inner{
    display:flex;
    gap:90px;
    align-items:flex-start;
}

.apropos-valeurs-intro{
    flex:0 0 34%;
    position:sticky;
    top:120px;
}

.apropos-valeurs-intro h2{
    font-size:2.1rem;
    line-height:1.3;
    margin:18px 0 16px;
}

.apropos-valeurs-intro p{
    line-height:1.85;
}

.apropos-valeurs-texte{
    flex:1;
}

.apropos-valeurs-texte p{
    line-height:1.95;
    font-size:1rem;
    padding:28px 0;
    border-bottom:1px solid var(--border);
}

.apropos-valeurs-texte p:first-child{
    padding-top:0;
}

.apropos-valeurs-texte p:last-child{
    border-bottom:none;
    padding-bottom:0;
}

.apropos-valeurs-texte h2,
.apropos-valeurs-texte p,
.apropos-valeurs-texte strong{
    color: #fff;
}

.apropos-valeurs-intro h2,
.apropos-valeurs-intro p{
    color: #fff;
}

/* Pourquoi nous choisir — image + texte courant */
.apropos-pourquoi{
    padding:110px 0;
    background:#f8f9fa;
}

.apropos-pourquoi-inner{
    display:flex;
    align-items:center;
    gap:80px;
}

.apropos-pourquoi-image{
    flex:1 1 46%;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 20px 50px rgba(0,0,0,.12);
}

.apropos-pourquoi-image img{
    height:520px;
    object-fit:cover;
}

.apropos-pourquoi-contenu{
    flex:1 1 54%;
}

.apropos-pourquoi-contenu h2{
    font-size:2.3rem;
    line-height:1.3;
    margin:18px 0 20px;
}

.apropos-pourquoi-contenu > p{
    color:#555;
    line-height:1.9;
    margin-bottom:22px;
}

.apropos-pourquoi-contenu > p:first-of-type{
    color:#666;
}

.apropos-pourquoi-contenu strong{
    color:var(--primary);
}

.apropos-pourquoi-contenu .btn-primary{
    background:var(--amber);
    color:var(--ink);
    border-radius:0;
    clip-path:polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
    font-weight:600;
    border:none;
    display:inline-block;
}

.apropos-pourquoi-contenu .btn-primary:hover{
    background:#ffd54a;
    transform:translateY(-2px);
}

.apropos-cta{
    padding:100px 0;
    background:var(--border);
    text-align:center;
    color:var(--ink);
}

.apropos-cta h2{
    font-size:2.2rem;
    margin-bottom:18px;
}

.apropos-cta > p{
    color:rgba(10,17,40,.75);
    max-width:600px;
    margin:0 auto 18px;
    line-height:1.8;
}

.apropos-cta-contact{
    font-weight:600;
    margin-bottom:35px !important;
}

.apropos-cta-contact a{
    color:var(--ink);
    text-decoration:underline;
    text-underline-offset:3px;
}

.apropos-cta-contact a:hover{
    color:#000;
}

.apropos-cta .btn-primary{
    background:var(--ink);
    color:var(--paper);
    border-radius:0;
    clip-path:polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
    font-weight:600;
    border:none;
}

.apropos-cta .btn-primary:hover{
    background:var(--ink-soft);
    transform:translateY(-2px);
}

    @media (max-width:768px){
        .breadcrumb-hero{
            padding:110px 0;
        }

        .breadcrumb-hero h1{
            font-size:1.9rem;
        }

        .apropos-histoire{
            padding:70px 0;
        }

        .apropos-histoire .container{
            flex-direction:column;
            gap:40px;
        }

        .apropos-histoire-image img{
            height:260px;
        }

        .apropos-histoire-contenu h2{
            font-size:1.7rem;
        }

        .apropos-valeurs{
            padding:70px 0;
        }

        .apropos-cta{
            padding:70px 0;
        }

        .apropos-cta h2{
            font-size:1.6rem;
        }

        .apropos-valeurs-inner{
        flex-direction:column;
        gap:35px;
    }

    .apropos-valeurs-intro{
        position:static;
        flex:none;
    }

    .apropos-valeurs-intro h2{
        font-size:1.7rem;
    }

    .apropos-valeurs-texte p{
        padding:20px 0;
    }

    .apropos-pourquoi{
        padding:70px 0;
    }

    .apropos-pourquoi-inner{
        flex-direction:column;
        gap:35px;
    }

    .apropos-pourquoi-image img{
        height:260px;
    }

    .apropos-pourquoi-contenu h2{
        font-size:1.7rem;
    }
}

/* ============================================================
   PAGE À PROPOS — nouvelle structure de sections
   À coller dans votre feuille de style globale, à la suite
   des styles ".apropos-*" existants
============================================================ */

/* ------------------------------------------------------------
   1. À PROPOS + MISSION / VISION / VALEURS
------------------------------------------------------------ */
.apropos-intro{
    padding:110px 0;
    background:#fff;
}

.apropos-intro-grid{
    display:flex;
    gap:80px;
    align-items:flex-start;
}

.apropos-intro-col{
    flex:1 1 50%;
}

.apropos-intro-col h2{
    font-size:2.4rem;
    line-height:1.3;
    margin:18px 0 22px;
}

.apropos-intro-col p{
    color:#666;
    line-height:1.9;
    margin-bottom:18px;
}

.apropos-intro-divider{
    width:60px;
    height:3px;
    background:var(--amber);
    border-radius:2px;
    margin-top:10px;
}

.apropos-mvv-col{
    flex:1 1 50%;
    background:var(--ink);
    border-radius:20px;
    padding:50px 45px;
}

.apropos-mvv-col > h2{
    color:#fff;
    font-size:2rem;
    margin-bottom:30px;
}

.apropos-mvv-bloc{
    padding:22px 0;
    border-bottom:1px solid var(--line);
}

.apropos-mvv-bloc:first-of-type{
    padding-top:0;
}

.apropos-mvv-bloc:last-of-type{
    border-bottom:none;
    padding-bottom:0;
}

.apropos-mvv-bloc h3{
    color:var(--amber);
    font-size:1.15rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
    margin-bottom:10px;
}

.apropos-mvv-bloc p{
    color:rgba(255,255,255,.85);
    line-height:1.85;
}

.apropos-mvv-liste{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.apropos-mvv-liste li{
    color:rgba(255,255,255,.85);
    line-height:1.7;
}

.apropos-mvv-liste strong{
    color:#fff;
}

@media (max-width:900px){
    .apropos-intro-grid{
        flex-direction:column;
        gap:50px;
    }
    .apropos-mvv-col{
        padding:35px 28px;
    }
}


/* ------------------------------------------------------------
   3. À SAVOIR — boîtes à icônes
------------------------------------------------------------ */
.apropos-savoir{
    padding:110px 0;
    background:#f8f9fa;
}

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

.apropos-savoir-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    padding:35px 25px;
    text-align:center;
    transition:var(--transition);
}

.apropos-savoir-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow);
    border-color:transparent;
}

.apropos-savoir-card i{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:56px;
    height:56px;
    border-radius:50%;
    background:var(--amber);
    color:var(--ink);
    font-size:1.3rem;
    margin-bottom:18px;
}

.apropos-savoir-card h3{
    font-size:1.1rem;
    margin-bottom:10px;
    color:var(--ink);
}

.apropos-savoir-card p{
    color:#666;
    line-height:1.7;
    font-size:.92rem;
}

@media (max-width:1000px){
    .apropos-savoir-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media (max-width:560px){
    .apropos-savoir-grid{
        grid-template-columns:1fr;
    }
}

/* ------------------------------------------------------------
   4. SERVICES — accordéon
------------------------------------------------------------ */
.apropos-services{
    padding:110px 0;
    background:#fff;
}

.apropos-services-grid{
    display:flex;
    gap:70px;
    align-items:flex-start;
}

.apropos-services-intro{
    flex:0 0 34%;
    position:sticky;
    top:120px;
}

.apropos-services-intro h2{
    font-size:2.1rem;
    line-height:1.3;
    margin:18px 0 16px;
}

.apropos-services-intro p{
    color:#666;
    line-height:1.85;
}

.apropos-services-accordeon{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:14px;
}

.accordeon-item{
    background:#fff;
    border:1px solid var(--border);
    border-radius:14px;
    overflow:hidden;
}

.accordeon-header{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:22px 26px;
    background:none;
    border:none;
    text-align:left;
    font-family:inherit;
    font-size:1.05rem;
    font-weight:600;
    color:var(--ink);
    cursor:pointer;
    transition:var(--transition);
}

.accordeon-header:hover{
    color:var(--primary);
}

.accordeon-header i{
    flex-shrink:0;
    width:32px;
    height:32px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--paper);
    color:var(--ink);
    font-size:.85rem;
    transition:transform .3s ease, background .3s ease, color .3s ease;
}

.accordeon-item.active .accordeon-header i{
    transform:rotate(45deg);
    background:var(--amber);
}

.accordeon-panel{
    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease;
}

.accordeon-item.active .accordeon-panel{
    max-height:300px;
}

.accordeon-panel p{
    padding:0 26px 22px;
    color:#666;
    line-height:1.85;
}

@media (max-width:900px){
    .apropos-services-grid{
        flex-direction:column;
        gap:35px;
    }
    .apropos-services-intro{
        position:static;
    }
}

/* ------------------------------------------------------------
   5. CONSULTATION
------------------------------------------------------------ */
.apropos-consultation{
    padding:100px 0;
    background:var(--paper);
    text-align:center;
    color:var(--ink);
    border-bottom:1px solid var(--border);
}

.apropos-consultation h2{
    font-size:2.2rem;
    margin-bottom:14px;
}

.apropos-consultation > p{
    color:rgba(255,255,255,.75);
    max-width:600px;
    margin:0 auto 30px;
    line-height:1.8;
}

.apropos-consultation-liste{
    display:inline-flex;
    flex-direction:column;
    gap:12px;
    text-align:left;
    margin:0 auto 40px;
}

.apropos-consultation-liste li{
    position:relative;
    padding-left:28px;
    color: rgba(10, 17, 40, .85);
    line-height:1.6;
}

.apropos-consultation-liste li::before{
    content:"";
    position:absolute;
    left:0;
    top:8px;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--amber);
}

.apropos-consultation-bouton .btn-primary{
    background:var(--amber);
    color:var(--ink);
    border-radius:0;
    clip-path:polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
    font-weight:600;
    border:none;
    display:inline-block;
}

.apropos-consultation-bouton .btn-primary:hover{
    background:#ffd54a;
    transform:translateY(-2px);
}

@media (max-width:768px){
    .apropos-intro,
    .apropos-fondateur,
    .apropos-savoir,
    .apropos-services,
    .apropos-consultation{
        padding:70px 0;
    }
    .apropos-intro-col h2,
    .apropos-fondateur-contenu h2,
    .apropos-services-intro h2{
        font-size:1.8rem;
    }
}



/* Page SERVICES ====================================================================== */
.service-detail{
    padding:110px 0;
}

.service-detail.bg-blanc{
    background:#fff;
}

.service-detail.bg-gris{
    background:#f8f9fa;
}

.service-detail-inner{
    display:flex;
    align-items:center;
    gap:80px;
}

.service-detail-inner.inverse{
    flex-direction:row-reverse;
}

.service-detail-image{
    flex:1 1 52%;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 20px 50px rgba(0,0,0,.12);
}

.service-detail-image img{
    height:480px;
    object-fit:cover;
    transition:.6s ease;
}

.service-detail:hover .service-detail-image img{
    transform:scale(1.04);
}

.service-detail-content{
    flex:1 1 48%;
}

.service-detail-content h2{
    font-size:2.2rem;
    line-height:1.3;
    margin:18px 0 22px;
    color:#1a1a1a;
}

.service-detail-content p{
    color:#666;
    line-height:1.9;
    margin-bottom:20px;
}

.service-detail-points{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin:28px 0 32px;
}

.service-detail-points li{
    display:flex;
    align-items:center;
    gap:12px;
    color:#333;
    font-weight:500;
    font-size:.98rem;
}

.service-detail-points i{
    color:var(--primary);
    font-size:1.1rem;
    flex-shrink:0;
}

.service-detail-content .btn-primary{
    background:var(--amber);
    color:var(--ink);
    border-radius:0;
    clip-path:polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
    font-weight:600;
    border:none;
}

.service-detail-content .btn-primary:hover{
    background:#ffd54a;
    transform:translateY(-2px);
}

/* CTA finale de la page services */
.service-final-cta{
    padding:110px 0;
    background:var(--ink-soft);
    text-align:center;
    color:#fff;
}

.service-final-cta h2{
    font-size:2.3rem;
    margin-bottom:20px;
}

.service-final-cta > p{
    color:rgba(245,243,238,.8);
    max-width:650px;
    margin:0 auto 16px;
    line-height:1.85;
}

.service-final-cta-contact{
    font-weight:500;
    margin-bottom:38px !important;
}

.service-final-cta-contact a{
    color:var(--amber);
    text-decoration:underline;
    text-underline-offset:3px;
}

.service-final-cta-contact a:hover{
    color:#ffd54a;
}

.service-final-cta .btn-primary{
    background:var(--amber);
    color:var(--ink);
    border-radius:0;
    clip-path:polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
    font-weight:600;
    border:none;
}

.service-final-cta .btn-primary:hover{
    background:#ffd54a;
    transform:translateY(-2px);
}

.service-final-cta{
    position:relative;
    padding:110px 0;
    background:var(--ink-soft);
    text-align:center;
    color:#fff;
    overflow:hidden;
}

.service-final-cta::before{
    content:"";
    position:absolute;
    top:50%;
    left:-220px;
    width:600px;
    height:600px;
    transform:translateY(-50%);
    border-radius:50%;
    background:
        /* grand anneau extérieur fin */
        radial-gradient(circle at 50% 50%, transparent 0 91%, rgba(245,243,238,.06) 91% 92%, transparent 92% 100%),
        /* anneau ambre moyen */
        radial-gradient(circle at 50% 50%, transparent 0 70%, rgba(255,193,7,.13) 70% 72%, transparent 72% 100%),
        /* anneau clair fin, décalé */
        radial-gradient(circle at 50% 50%, transparent 0 55%, rgba(245,243,238,.08) 55% 56.4%, transparent 56.4% 100%),
        /* disque plein central discret */
        radial-gradient(circle at 50% 50%, rgba(255,193,7,.05) 0%, transparent 40%);
    pointer-events:none;
    z-index:0;
}

.service-final-cta::after{
    content:"";
    position:absolute;
    top:22%;
    left:-90px;
    width:260px;
    height:260px;
    border-radius:50%;
    background:
        radial-gradient(circle at 50% 50%, transparent 0 84%, rgba(255,193,7,.16) 84% 86%, transparent 86% 100%),
        radial-gradient(circle at 50% 50%, rgba(245,243,238,.06) 0%, transparent 55%);
    pointer-events:none;
    z-index:0;
}

/* Troisième foyer de cercles, en bas — nécessite une div supplémentaire, voir HTML */
.service-final-cta .cta-motif-bas{
    position:absolute;
    bottom:-70px;
    left:60px;
    width:200px;
    height:200px;
    border-radius:50%;
    background:
        radial-gradient(circle at 50% 50%, transparent 0 80%, rgba(245,243,238,.10) 80% 82%, transparent 82% 100%),
        radial-gradient(circle at 40% 40%, rgba(255,193,7,.08) 0%, transparent 60%);
    pointer-events:none;
    z-index:0;
}

/* Petit arc isolé qui casse la symétrie des cercles */
.service-final-cta .cta-motif-arc{
    position:absolute;
    top:8%;
    left:120px;
    width:180px;
    height:180px;
    border-radius:50%;
    border:2px solid rgba(255,193,7,.14);
    border-right-color:transparent;
    border-bottom-color:transparent;
    transform:rotate(35deg);
    pointer-events:none;
    z-index:0;
}

.service-final-cta .container{
    position:relative;
    z-index:1;
}

@media (max-width:768px){
    .service-final-cta::before{
        width:400px;
        height:400px;
        left:-160px;
    }
    .service-final-cta::after{
        width:180px;
        height:180px;
        left:-70px;
    }
    .service-final-cta .cta-motif-bas{
        width:140px;
        height:140px;
        left:20px;
        bottom:-50px;
    }
    .service-final-cta .cta-motif-arc{
        width:120px;
        height:120px;
        left:70px;
    }
}

@media (max-width:768px){
    .service-detail{
        padding:60px 0;
    }

    .service-detail-inner,
    .service-detail-inner.inverse{
        flex-direction:column;
        gap:35px;
    }

    .service-detail-image{
        order:-1;
    }

    .service-detail-content{
        order:2;
    }

    .service-detail-image,
    .service-detail-content{
        flex:0 0 auto;
        width:100%;
    }

    .service-detail-image{
        height:250px;
    }

    .service-detail-image img{
        width:100%;
        height:100%;
        object-fit:cover;
    }

    .service-detail-content h2{
        font-size:1.7rem;
    }

    .service-final-cta{
        padding:70px 0;
    }

    .service-final-cta h2{
        font-size:1.7rem;
    }
}



/* Page DEVIS ========================================================== */
/* .devis-section{
    padding:110px 0;
    background:#f8f9fa;
} */
.devis-section{
    position:relative;
    padding:110px 0;
    background-color:#f8f9fa;
    overflow:hidden;
}

.devis-section::before,
.devis-section::after{
    content:"";
    position:absolute;
    width:130px;
    height:117px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 90'%3E%3Cpolygon points='50,5 90,25 50,45 10,25' fill='none' stroke='rgba(10,17,40,0.09)' stroke-width='2'/%3E%3Cpolyline points='10,25 10,65 50,85 50,45' fill='none' stroke='rgba(10,17,40,0.09)' stroke-width='2'/%3E%3Cpolyline points='90,25 90,65 50,85' fill='none' stroke='rgba(10,17,40,0.09)' stroke-width='2'/%3E%3Cline x1='50' y1='5' x2='50' y2='45' stroke='rgba(10,17,40,0.09)' stroke-width='2'/%3E%3Cline x1='10' y1='25' x2='50' y2='45' stroke='rgba(10,17,40,0.06)' stroke-width='1'/%3E%3Cline x1='90' y1='25' x2='50' y2='45' stroke='rgba(10,17,40,0.06)' stroke-width='1'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-size:contain;
    pointer-events:none;
    z-index:0;
}

/* Carton en haut à gauche */
.devis-section::before{
    top:60px;
    left:-30px;
    transform:rotate(-8deg);
}

/* Carton en bas à droite */
.devis-section::after{
    width:100px;
    height:90px;
    bottom:40px;
    right:-20px;
    transform:rotate(10deg);
}

/* Cartons additionnels (nécessitent des divs, voir HTML ci-dessous) */
.devis-carton{
    position:absolute;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 90'%3E%3Cpolygon points='50,5 90,25 50,45 10,25' fill='none' stroke='rgba(10,17,40,0.08)' stroke-width='2'/%3E%3Cpolyline points='10,25 10,65 50,85 50,45' fill='none' stroke='rgba(10,17,40,0.08)' stroke-width='2'/%3E%3Cpolyline points='90,25 90,65 50,85' fill='none' stroke='rgba(10,17,40,0.08)' stroke-width='2'/%3E%3Cline x1='50' y1='5' x2='50' y2='45' stroke='rgba(10,17,40,0.08)' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-size:contain;
    pointer-events:none;
    z-index:0;
}

.devis-carton-1{ width:100px; height:90px; top:15%;    right:5%;  --carton-rot:6deg; }
.devis-carton-2{ width:80px;  height:72px; top:70%;    left:4%;   --carton-rot:-12deg; }
.devis-carton-3{ width:85px;  height:76px; bottom:-25px; left:42%; --carton-rot:4deg; }
.devis-carton-4{ width:60px;  height:54px; top:6%;     left:18%;  --carton-rot:-8deg; }
.devis-carton-5{ width:55px;  height:50px; top:45%;    right:2%;  --carton-rot:10deg; }
.devis-carton-6{ width:65px;  height:59px; bottom:8%;  right:20%; --carton-rot:-5deg; }
.devis-carton-7{ width:70px;  height:63px; top:-20px;  right:32%; --carton-rot:8deg; }
.devis-carton-8{ width:50px;  height:45px; bottom:15%; left:16%;  --carton-rot:14deg; }

@keyframes flotterCarton{
    0%{
        transform:translate(0, 0) rotate(var(--carton-rot, 0deg));
    }
    25%{
        transform:translate(6px, -10px) rotate(calc(var(--carton-rot, 0deg) + 2deg));
    }
    50%{
        transform:translate(-4px, -16px) rotate(calc(var(--carton-rot, 0deg) - 1deg));
    }
    75%{
        transform:translate(-8px, -6px) rotate(calc(var(--carton-rot, 0deg) + 1deg));
    }
    100%{
        transform:translate(0, 0) rotate(var(--carton-rot, 0deg));
    }
}

.devis-carton{
    animation:flotterCarton 8s ease-in-out infinite;
}

/* Durées et délais variés pour un mouvement naturel, non synchronisé */
.devis-carton-1{ animation-duration:9s;  animation-delay:0s;    }
.devis-carton-2{ animation-duration:7s;  animation-delay:-2s;   }
.devis-carton-3{ animation-duration:10s; animation-delay:-5s;   }
.devis-carton-4{ animation-duration:8s;  animation-delay:-1s;   }
.devis-carton-5{ animation-duration:6.5s; animation-delay:-3.5s; }
.devis-carton-6{ animation-duration:9.5s; animation-delay:-6s;  }
.devis-carton-7{ animation-duration:7.5s; animation-delay:-4s;  }
.devis-carton-8{ animation-duration:8.5s; animation-delay:-2.5s; }

@media (prefers-reduced-motion: reduce){
    .devis-carton{
        animation:none;
    }
}

.devis-form{
    position:relative;
    z-index:1;
}

@media (max-width:768px){
    .devis-carton-2,
    .devis-carton-3,
    .devis-carton-4,
    .devis-carton-5,
    .devis-carton-6{
        display:none; /* on garde 2-5 cartons max sur mobile pour ne pas surcharger */
    }
}

.devis-form{
    max-width:900px;
    margin:0 auto;
    background:#fff;
    border-radius:20px;
    padding:50px;
    box-shadow:0 20px 50px rgba(0,0,0,.08);
}

.devis-groupe{
    margin-bottom:45px;
}

.devis-groupe:last-of-type{
    margin-bottom:30px;
}

.devis-groupe h3{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:1.2rem;
    margin-bottom:24px;
    padding-bottom:14px;
    border-bottom:2px solid var(--border);
    color:#1a1a1a;
}

.devis-groupe h3 i{
    color:var(--primary);
    font-size:1.1rem;
}

.devis-grid-2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.devis-champ{
    margin-bottom:20px;
}

.devis-champ label{
    display:block;
    font-size:.92rem;
    font-weight:600;
    color:#333;
    margin-bottom:8px;
}

.devis-champ input[type="text"],
.devis-champ input[type="tel"],
.devis-champ input[type="email"],
.devis-champ input[type="date"],
.devis-champ input[type="number"],
.devis-champ select,
.devis-champ textarea{
    width:100%;
    padding:14px 16px;
    border:1px solid #ddd;
    border-radius:10px;
    outline:none;
    font-size:15px;
    font-family:inherit;
    transition:.3s;
}

.devis-champ input:focus,
.devis-champ select:focus,
.devis-champ textarea:focus{
    border-color:var(--primary);
}

.devis-champ textarea{
    resize:none;
}

.devis-conditionnel{
    background:#E8F1FF;
    padding:18px 20px;
    border-radius:12px;
    margin-bottom:24px;
}

.devis-conditionnel input[type="range"]{
    width:100%;
    accent-color:var(--primary);
    margin-top:8px;
}

.devis-radio-groupe,
.devis-checkbox-groupe{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
}

.devis-radio,
.devis-checkbox{
    display:flex;
    align-items:center;
    gap:8px;
    padding:12px 18px;
    border:1px solid #ddd;
    border-radius:10px;
    cursor:pointer;
    font-size:.92rem;
    font-weight:500;
    transition:.25s;
}

.devis-radio input,
.devis-checkbox input{
    accent-color:var(--primary);
}

.devis-radio:has(input:checked),
.devis-checkbox:has(input:checked){
    border-color:var(--primary);
    background:#E8F1FF;
    color:var(--primary);
}

.devis-submit{
    width:100%;
    text-align:center;
    justify-content:center;
    margin-top:10px;
}

.devis-submit.btn-primary{
    background:var(--amber);
    color:var(--ink);
    border-radius:0;
    clip-path:polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
    font-weight:800;
    border:none;
}

.devis-submit.btn-primary:hover{
    background:#ffd54a;
    transform:translateY(-2px);
}

@media (max-width:768px){
    .devis-section{
        padding:70px 0;
    }

    .devis-form{
        padding:30px 22px;
    }

    .devis-grid-2{
        grid-template-columns:1fr;
        gap:0;
    }
}

/* Groupes de champs spécifiques à chaque service : cachés par défaut */
.devis-service-groupe{
    display:none;
}

.devis-service-groupe.active{
    display:block;
}

/* Page CONFIRMATION CONTACT ================================================ */
/* .confirmation{
    padding:110px 0 140px;
    background:#f7f7f7;
} */
.confirmation{
    padding:110px 0 140px;
    background-color:#f7f7f7;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M18 30l8 8 16-16' fill='none' stroke='rgba(34,197,94,0.09)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:repeat;
    background-size:110px 110px;
}

.confirmation-inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    max-width:560px;
    margin:0 auto;
    text-align:center;
}

/* Coche verte animée */
.confirmation-icone{
    width:96px;
    height:96px;
    margin-bottom:28px;
    border-radius:50%;
    background:#E8F8EE;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
}

.confirmation-icone::before{
    content:"";
    position:absolute;
    inset:-10px;
    border-radius:50%;
    border:2px solid #22C55E;
    opacity:.35;
    animation:confirmPulse 1.8s ease-out infinite;
}

.confirmation-icone i{
    color:#22C55E;
    font-size:2.4rem;
}

@keyframes confirmPulse{
    0%{ transform:scale(.9); opacity:.5; }
    100%{ transform:scale(1.25); opacity:0; }
}

.confirmation-badge{
    display:inline-block;
    padding:7px 18px;
    border-radius:50px;
    background:#E8F8EE;
    color:#16A34A;
    font-size:.85rem;
    font-weight:600;
    margin-bottom:22px;
}

.confirmation-inner h2{
    font-size:2.2rem;
    line-height:1.3;
    margin-bottom:18px;
    color:#1a1a1a;
}

.confirmation-texte{
    color:#666;
    line-height:1.85;
    margin-bottom:38px;
}

/* Entreprise mise en valeur, sans encadré : simple ligne avec filets */
.confirmation-entreprise{
    display:flex;
    align-items:center;
    gap:18px;
    padding:26px 0;
    margin-bottom:36px;
    width:100%;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
}

.confirmation-entreprise-logo{
    width:100px;
    height:auto;
    flex-shrink:0;
}

.confirmation-entreprise-texte{
    display:flex;
    flex-direction:column;
    gap:4px;
    text-align:left;
}

.confirmation-entreprise-texte strong{
    color:var(--ink);
    font-size:1.05rem;
    letter-spacing:.02em;
}

.confirmation-entreprise-texte span{
    color:#888;
    font-size:.88rem;
    font-weight:500;
}

.confirmation-contact{
    color:#666;
    font-size:.95rem;
    margin-bottom:35px;
}

.confirmation-contact a{
    color:var(--primary);
    font-weight:600;
}

.confirmation-retour-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    background:var(--amber);
    color:var(--ink);
    border-radius:0;
    clip-path:polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
    font-weight:600;
    border:none;
}

.confirmation-retour-btn:hover{
    background:#ffd54a;
    transform:translateY(-2px);
}

@media (max-width:768px){
    .confirmation{
        padding:70px 0 90px;
    }

    .confirmation-inner{
        max-width:100%;
        padding:0 10px;
    }

    .confirmation-entreprise{
        flex-direction:column;
        text-align:center;
    }

    .confirmation-entreprise-texte{
        text-align:center;
        align-items:center;
    }
}


/* Section PARTENAIRES ================================================ */
.partenaires{
    padding:100px 0 110px;
    background:#fff;
    overflow:hidden;
}

.partenaires .section-entete{
    margin-bottom:55px;
}

/* Fenêtre de défilement : masque tout ce qui dépasse + dégradé sur les bords */
.partenaires-track-wrapper{
    position:relative;
    width:100%;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image:linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.partenaires.wrapper:hover{
    transition: none;
}

/* Piste : le JS pilote le défilement via transform, pas de CSS animation */
.partenaires-track{
    display:flex;
    align-items:center;
    width:fit-content;
    will-change:transform;
}

.partenaires-group{
    display:flex;
    align-items:center;
    gap:80px;
    padding-right:80px;
    flex-shrink:0;
}

.partenaire-logo{
    height:56px;
    width:auto;
    max-width:160px;
    object-fit:contain;
    flex-shrink:0;
    opacity:.6;
    filter:grayscale(100%);
    transition:opacity .3s ease, filter .3s ease;
}

.partenaire-logo:hover{
    opacity:1;
    filter:grayscale(0%);
}

@media (max-width:768px){
    .partenaires{
        padding:60px 0 70px;
    }

    .partenaires-track{
        gap:50px;
        /* animation-duration:20s; */
        padding-right: 50px;
    }

    .partenaire-logo{
        height:42px;
        max-width:110px;
    }
}


/* Test */
:root{
    --duration : 20s;
    --totalitems: 6;
}

.wrapper{
    position: relative;
    display: flex;
    /* width: min(1200px, 90%); */
    /* height: 8vw; */
    height: 90px;
    width: 100%;
    margin: 0 auto; /*Centre horizontalement*/
    overflow: hidden;
    mask-image: linear-gradient(to left, rgba(254, 254, 254, 0), #000 20%, #000 80%, rgba(254, 254, 254, 0));
}

.img-item{
    position: absolute;
    /* height: inherit; */

    /* width: max-content; */
    /* width: 170px; */
    width: clamp(120px, 10vw, 180px);
    height: 90px;
    left: max(calc(clamp(120px, 10vw, 180px) * 6), 100%);
    /* left: 100%; */
    animation: scrollX var(--duration) linear infinite;
    animation-delay: calc(var(--duration)/var(--totalitems) * (var(--totalitems) - var(--i)) * -1);
}

.img-item img{
    width: 100%;
    height: 100%;
    object-fit: contain;

    opacity: .6;
    filter: grayscale(100%);
    transition: .3s;
}

.img-item img:hover{
    opacity: 1;
    filter: none;
}

@keyframes scrollX{
    from{
        left: 100%;
    }

    to{
        /* left: -8vw; */
        left: -170px;
    }
}

img{
    height: inherit;
}

@media (max-width:992px){
    .wrapper{
        height:80px;
    }

    .img-item{
        width:150px;
        height:80px;
    }

    @keyframes scrollX{
        to{
            left:-150px;
        }
    }
}

@media (max-width:768px){
    .wrapper{
        width:95%;
        height:65px;
    }

    .img-item{
        width:120px;
        height:65px;
    }

    @keyframes scrollX{
        to{
            left:-120px;
        }
    }
}

/* Page MENTIONS LÉGALES ====================================================== */
.mentions-legales{
    padding:110px 0;
    background:#fff;
}

.mentions-legales-container{
    max-width:1500px;
}

.mentions-intro{
    color:#555;
    line-height:1.9;
    font-size:1.02rem;
    margin-bottom:60px;
    padding-bottom:50px;
    border-bottom:1px solid var(--border);
}

.mentions-intro strong{
    color:var(--ink);
}

.mentions-bloc{
    margin-bottom:55px;
}

.mentions-bloc:last-child{
    margin-bottom:0;
}

.mentions-bloc h2{
    font-size:1.7rem;
    color:var(--ink);
    margin-bottom:22px;
    padding-bottom:16px;
    border-bottom:2px solid var(--border);
    position:relative;
}

.mentions-bloc h2::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-2px;
    width:50px;
    height:2px;
    background:var(--amber);
}

.mentions-bloc h3{
    font-size:1.15rem;
    font-weight:600;
    color:var(--ink);
    margin-bottom:14px;
}

.mentions-bloc p{
    color:#666;
    line-height:1.9;
    margin-bottom:16px;
    font-size:.98rem;
}

.mentions-bloc p:last-child{
    margin-bottom:0;
}

.mentions-bloc strong{
    color:var(--ink);
    font-weight:600;
}

@media (max-width:768px){
    .mentions-legales{
        padding:70px 0;
    }

    .mentions-intro{
        margin-bottom:40px;
        padding-bottom:35px;
    }

    .mentions-bloc{
        margin-bottom:40px;
    }

    .mentions-bloc h2{
        font-size:1.4rem;
    }

    .mentions-bloc h3{
        font-size:1.05rem;
    }
}


/* ============================================================
   GESTION DES COOKIES (bannière de consentement) ==============
   À coller à la fin de css/style.css
   ============================================================ */

/* Bannière en bas de page ==================================== */
.cookies-banniere{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    background:var(--ink);
    color:var(--paper);
    padding:22px 30px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    z-index:3000;
    border-top:2px solid var(--amber);
    transform:translateY(100%);
    transition:transform .45s cubic-bezier(.22,1,.36,1);
}

.cookies-banniere.active{
    transform:translateY(0);
}

.cookies-banniere-texte p{
    font-size:.92rem;
    line-height:1.7;
    color:rgba(245,243,238,.85);
    max-width:750px;
}

.cookies-banniere-texte a{
    color:var(--amber);
    text-decoration:underline;
    text-underline-offset:3px;
    font-weight:600;
}

.cookies-banniere-actions{
    display:flex;
    align-items:center;
    gap:12px;
    flex-shrink:0;
    flex-wrap:wrap;
}

/* Boutons de la bannière et de la modale ====================== */
.cookies-btn{
    padding:12px 22px;
    font-size:.9rem;
    font-weight:600;
    border-radius:0;
    cursor:pointer;
    transition:.3s;
    white-space:nowrap;
}

.cookies-btn-primary{
    background:var(--amber);
    color:var(--ink);
    border:none;
    clip-path:polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}

.cookies-btn-primary:hover{
    background:#ffd54a;
    transform:translateY(-2px);
}

.cookies-btn-outline{
    background:transparent;
    border:1px solid rgba(245,243,238,.35);
    color:var(--paper);
    clip-path:polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
}

.cookies-btn-outline:hover{
    border-color:var(--amber);
    color:var(--amber);
}

.cookies-btn-lien{
    background:none;
    border:none;
    color:rgba(245,243,238,.75);
    text-decoration:underline;
    text-underline-offset:3px;
    padding:12px 6px;
}

.cookies-btn-lien:hover{
    color:var(--amber);
}

/* Modale de personnalisation ================================== */
.cookies-modal{
    position:fixed;
    inset:0;
    background:rgba(10,17,40,.65);
    backdrop-filter:blur(4px);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    visibility:hidden;
    transition:opacity .3s ease, visibility .3s ease;
    z-index:3100;
    padding:20px;
}

.cookies-modal.active{
    opacity:1;
    visibility:visible;
}

.cookies-modal-box{
    position:relative;
    width:100%;
    max-width:560px;
    max-height:88vh;
    overflow-y:auto;
    background:#fff;
    border-radius:20px;
    padding:45px;
    transform:scale(.92);
    opacity:0;
    transition:transform .3s ease, opacity .3s ease;
    box-shadow:0 30px 70px rgba(0,0,0,.3);
}

.cookies-modal.active .cookies-modal-box{
    transform:scale(1);
    opacity:1;
}

.cookies-modal-close{
    position:absolute;
    top:18px;
    right:18px;
    width:38px;
    height:38px;
    border-radius:50%;
    background:#f2f2f2;
    border:none;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-size:1.1rem;
    color:#333;
    transition:.25s;
}

.cookies-modal-close:hover{
    background:var(--amber);
    color:var(--ink);
}

.cookies-modal-box h3{
    font-size:1.4rem;
    margin-bottom:10px;
    color:#1a1a1a;
}

.cookies-modal-box > p{
    color:#666;
    line-height:1.7;
    margin-bottom:26px;
    font-size:.92rem;
}

.cookies-categorie{
    padding:18px 0;
    border-bottom:1px solid var(--border);
}

.cookies-categorie:last-of-type{
    border-bottom:none;
}

.cookies-categorie-entete{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:8px;
}

.cookies-categorie-entete span{
    font-weight:600;
    color:#1a1a1a;
    font-size:.95rem;
}

.cookies-categorie p{
    color:#777;
    font-size:.85rem;
    line-height:1.6;
}

/* Interrupteur (switch) ======================================= */
.cookies-switch{
    position:relative;
    display:inline-block;
    width:44px;
    height:24px;
    flex-shrink:0;
}

.cookies-switch input{
    opacity:0;
    width:0;
    height:0;
}

.cookies-slider{
    position:absolute;
    cursor:pointer;
    inset:0;
    background:#ddd;
    border-radius:24px;
    transition:.3s;
}

.cookies-slider::before{
    content:"";
    position:absolute;
    width:18px;
    height:18px;
    left:3px;
    bottom:3px;
    background:#fff;
    border-radius:50%;
    transition:.3s;
}

.cookies-switch input:checked + .cookies-slider{
    background:var(--primary);
}

.cookies-switch input:checked + .cookies-slider::before{
    transform:translateX(20px);
}

.cookies-switch-disabled .cookies-slider{
    opacity:.6;
    cursor:not-allowed;
}

.cookies-btn-enregistrer{
    width:100%;
    text-align:center;
    justify-content:center;
    margin-top:15px;
}

/* Responsive =================================================== */
@media (max-width:900px){
    .cookies-banniere{
        flex-direction:column;
        align-items:flex-start;
        padding:22px;
    }

    .cookies-banniere-actions{
        width:100%;
        justify-content:flex-start;
    }
}

@media (max-width:480px){
    .cookies-banniere-actions{
        flex-direction:column;
        align-items:stretch;
        width:100%;
    }

    .cookies-btn{
        width:100%;
        text-align:center;
    }

    .cookies-modal-box{
        padding:30px 24px;
    }
}


/* Bouton FR/EN de la navbar =================================== */
.lang-dropdown{
    position:relative;
    flex-shrink:0;
}

.lang-toggle-btn{
    display:flex;
    align-items:center;
    gap:8px;
    width:auto;
    height:36px;
    padding:0 12px;
    border:1px solid rgba(245,243,238,.25);
    background:rgba(255,255,255,.06);
    color:var(--paper);
    border-radius:8px;
    font-family:inherit;
    font-weight:600;
    font-size:.85rem;
    letter-spacing:.03em;
    cursor:pointer;
    transition:var(--transition);
}

.lang-toggle-drapeau{
    font-size:.95rem;
    line-height:1;
}

.lang-toggle-chevron{
    font-size:.65rem;
    color:var(--amber);
    transition:transform .3s ease;
}

.lang-toggle-btn:hover{
    border-color:var(--amber);
    background:rgba(255,193,7,.1);
}

.lang-dropdown.open .lang-toggle-btn{
    border-color:var(--amber);
    background:rgba(255,193,7,.12);
}

.lang-dropdown.open .lang-toggle-chevron{
    transform:rotate(180deg);
}

/* Navbar au scroll (fond blanc) */
.navbar.scrolled .lang-toggle-btn{
    border-color:rgba(10,17,40,.18);
    color:var(--ink);
    background:rgba(10,17,40,.03);
}

.navbar.scrolled .lang-toggle-btn:hover,
.navbar.scrolled .lang-dropdown.open .lang-toggle-btn{
    border-color:var(--amber);
    background:rgba(255,193,7,.15);
}

/* Menu déroulant */
.lang-dropdown-menu{
    position:absolute;
    top:calc(100% + 10px);
    right:0;
    width:170px;
    background:var(--ink-soft);
    border:1px solid var(--line);
    border-radius:10px;
    box-shadow:0 20px 40px rgba(0,0,0,.35);
    padding:6px;
    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:var(--transition);
    z-index:1200;
}

.lang-dropdown.open .lang-dropdown-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.lang-dropdown-item{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    padding:10px 12px;
    background:none;
    border:none;
    border-radius:6px;
    color:var(--paper);
    font-family:inherit;
    font-size:.88rem;
    font-weight:500;
    text-align:left;
    cursor:pointer;
    transition:.2s;
}

.lang-dropdown-item:hover{
    background:rgba(255,193,7,.1);
    color:var(--amber);
}

.lang-dropdown-check{
    margin-left:auto;
    font-size:.75rem;
    color:var(--amber);
    opacity:0;
}

.lang-dropdown-item.actif{
    color:var(--amber);
}

.lang-dropdown-item.actif .lang-dropdown-check{
    opacity:1;
}



/* ==========================================================================
   Section Carrières (Page d'accueil) - Classe spécifique
   ========================================================================== */

.careers-cta.careers-home {
    position: relative;
    padding: 120px 0;
    background: var(--ink);
    color: var(--paper);
    overflow: hidden;
    min-height: 680px;
    display: flex;
    align-items: center;
}

/* Image de fond avec effet parallaxe */
.careers-home .careers-image-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: url("../images/demenagement.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Overlay */
.careers-home .careers-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        linear-gradient(135deg, rgba(10, 17, 40, 0.93) 0%, rgba(10, 17, 40, 0.82) 40%, rgba(10, 17, 40, 0.88) 100%),
        radial-gradient(circle at 85% 20%, rgba(255, 193, 7, 0.08) 0%, transparent 45%),
        radial-gradient(circle at 15% 85%, rgba(11, 94, 215, 0.06) 0%, transparent 50%);
    backdrop-filter: blur(2px);
}

/* Motifs */
.careers-home .careers-motif {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
}

.careers-home .careers-motif-1 {
    width: 320px;
    height: 320px;
    top: 10%;
    right: 5%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 193, 7, 0.18) 0%, rgba(255, 193, 7, 0.08) 35%, transparent 65%),
                radial-gradient(circle at 50% 50%, rgba(255, 193, 7, 0.04) 0%, transparent 50%);
    filter: blur(40px);
    animation: flotterMotif1 12s ease-in-out infinite;
    box-shadow: 0 0 80px rgba(255, 193, 7, 0.15), inset 0 0 60px rgba(255, 193, 7, 0.08);
}

.careers-home .careers-motif-2 {
    width: 280px;
    height: 280px;
    bottom: 15%;
    left: 2%;
    background: radial-gradient(circle at 60% 60%, rgba(11, 94, 215, 0.12) 0%, rgba(11, 94, 215, 0.04) 40%, transparent 70%);
    filter: blur(45px);
    animation: flotterMotif2 14s ease-in-out infinite reverse;
    box-shadow: 0 0 70px rgba(11, 94, 215, 0.12), inset 0 0 50px rgba(11, 94, 215, 0.05);
}

.careers-home .careers-motif-3 {
    width: 180px;
    height: 180px;
    top: 45%;
    right: 12%;
    background: radial-gradient(circle at 50% 50%, rgba(255, 193, 7, 0.12) 0%, transparent 60%);
    filter: blur(35px);
    animation: flotterMotif1 10s ease-in-out infinite reverse;
    opacity: 0.7;
}

/* Animations */
@keyframes flotterMotif1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(30px, -35px) scale(1.05); }
    50% { transform: translate(15px, -25px) scale(1.02); }
    75% { transform: translate(-25px, 20px) scale(0.98); }
}

@keyframes flotterMotif2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(-25px, 30px) scale(1.03); }
    50% { transform: translate(-15px, 20px) scale(1.05); }
    75% { transform: translate(20px, -25px) scale(0.98); }
}

.careers-home .container {
    position: relative;
    z-index: 3;
}

/* Styles texte pour la version sombre (accueil) */
.careers-home .section-entete h2 {
    color: #fff;
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.careers-home .section-entete p {
    color: rgba(245, 243, 238, 0.88);
    font-size: 1.05rem;
    line-height: 1.8;
}

.careers-home .section-badge {
    background:rgba(255,255,255,.15);
    color:#fff;
    border:1px solid rgba(255,255,255,.25);
    box-shadow: none;
}

.careers-home .section-badge::before {
    background: var(--border);
}

/* Carte pour version accueil */
.careers-home .careers-card {
    display: flex;
    align-items: center;
    gap: 70px;
    position: relative;
    z-index: 3;
}

.careers-home .careers-content {
    flex: 1 1 48%;
}

.careers-home .careers-benefits {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 32px;
}

.careers-home .careers-benefit-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 24px;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 16px;
    transition: 0.3s ease;
    color: var(--paper);
}

.careers-home .careers-benefit-item:hover {
    transform: translateY(-6px);
    background: rgba(255,255,255,0.15);
}

.careers-home .careers-benefit-item i {
    color: #fff;
    font-size: 1.5rem;
    flex-shrink: 0;
    width: 32px;
    text-align: center;
}

.careers-home .careers-benefit-item span {
    font-size: 0.99rem;
    color: rgba(245, 243, 238, 0.92);
    font-weight: 500;
    line-height: 1.6;
}

.careers-home .careers-image {
    flex: 1 1 52%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 40px rgba(255, 193, 7, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

.careers-home .careers-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.careers-home .careers-image img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    object-position: center;
    transition: transform .6s cubic-bezier(0.22, 1, 0.36, 1);
    display: block;
}

.careers-home .careers-card:hover .careers-image img {
    transform: scale(1.06);
}

@media (max-width: 768px) {
    .careers-home {
        padding: 70px 0;
        min-height: auto;
    }

    .careers-home .careers-motif-1 { width: 200px; height: 200px; top: 5%; right: 2%; }
    .careers-home .careers-motif-2 { width: 160px; height: 160px; bottom: 10%; left: 0; }
    .careers-home .careers-motif-3 { width: 120px; height: 120px; right: 5%; top: 50%; }

    .careers-home .careers-card,
    .careers-home .careers-card:nth-child(even) {
        flex-direction: column;
        gap: 35px;
    }

    .careers-home .careers-image { order: -1; }
    .careers-home .careers-content { order: 2; }
    .careers-home .careers-image,
    .careers-home .careers-content {
        flex: 0 0 auto;
        width: 100%;
    }

    .careers-home .careers-image img {
        height: 240px;
    }
}

/* ============================================================
   ZONE D'UPLOAD DE FICHIERS — page Candidature (CV, permis, autre document)
   À coller dans carrieres.css (ou css/style.css si vous préférez
   centraliser), à la suite des styles ".devis-*" existants.
============================================================ */

.devis-fichier{
    position:relative;
}

/* L'input natif reste cliquable mais invisible : il recouvre toute
   la zone, par-dessus le label stylisé */
.devis-fichier input[type="file"]{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:0;
    cursor:pointer;
    z-index:2;
}

.devis-fichier-label{
    display:flex;
    align-items:center;
    gap:16px;
    padding:18px 20px;
    border:1.5px dashed #d8d8d8;
    border-radius:12px;
    background:#fafafa;
    transition:.25s ease;
}

.devis-fichier-label i{
    display:flex;
    align-items:center;
    justify-content:center;
    width:46px;
    height:46px;
    border-radius:50%;
    background:#E8F1FF;
    color:var(--primary);
    font-size:1.2rem;
    flex-shrink:0;
    transition:.25s ease;
}

.devis-fichier-texte{
    font-size:.92rem;
    font-weight:500;
    color:#666;
    word-break:break-all;
}

/* Survol / focus clavier */
.devis-fichier:hover .devis-fichier-label,
.devis-fichier input[type="file"]:focus + .devis-fichier-label{
    border-color:var(--primary);
    background:#E8F1FF;
}

.devis-fichier:hover .devis-fichier-label i{
    background:var(--primary);
    color:#fff;
    transform:translateY(-2px);
}

/* État "fichier choisi" — la classe .a-un-fichier est ajoutée en JS
   (voir devis-fichier-preview.js) */
.devis-fichier.a-un-fichier .devis-fichier-label{
    border-style:solid;
    border-color:#22C55E;
    background:#E8F8EE;
}

.devis-fichier.a-un-fichier .devis-fichier-label i{
    background:#22C55E;
    color:#fff;
}

.devis-fichier.a-un-fichier .devis-fichier-texte{
    color:#1a7f37;
    font-weight:600;
}

@media (max-width:480px){
    .devis-fichier-label{
        padding:14px 16px;
        gap:12px;
    }
    .devis-fichier-label i{
        width:38px;
        height:38px;
        font-size:1rem;
    }
    .devis-fichier-texte{
        font-size:.85rem;
    }
}


/* ============================================================
   RÉDUCTION GLOBALE DES TEXTES — MOBILE < 480px
   À coller tout à la fin de css_globale.txt
   Complète les @media(max-width:480px) déjà existants
   (certaines classes y étaient absentes, d'où les débordements)
============================================================ */
@media (max-width:480px){

    /* --- Accueil / Hero --- */
    .accueil-contenu p{
        font-size:.85rem;
    }
    .presentation-badge,
    .section-badge{
        font-size:.75rem;
    }
    .presentation-contenu p{
        font-size:.9rem;
    }

    /* --- Statistiques --- */
    .stat h3{
        font-size:1.6rem;
    }
    .stat span{
        font-size:.75rem;
    }
    .stat-label{
        font-size:.72rem;
    }

    /* --- Services (accueil) --- */
    /* Le chiffre géant en filigrane est la principale cause de débordement */
    .service-row-number{
        font-size:3rem;
    }
    .service-row-title{
        font-size:1.25rem;
    }
    .service-row-points li{
        font-size:.85rem;
    }

    /* --- Pourquoi nous choisir --- */
    .why-text p{
        font-size:.9rem;
    }
    .why-card h3{
        font-size:1rem;
    }

    /* --- Témoignages --- */
    /* Le guillemet géant en fond débordait également */
    /* .quote{
        font-size:3.5rem;
    } */
    .temoignage-card p{
        font-size:.85rem;
    }
    .temoignage-card h4{
        font-size:.95rem;
    }

    /* --- Contact (page accueil) --- */
    .contact-left-content h3{
        font-size:1.5rem;
    }

    /* --- Footer --- */
    .footer-col h3{
        font-size:1.3rem;
    }
    .footer-paiement-col h3,
    .footer-newsletter-title{
        font-size:1.25rem;
    }

    /* --- En-tête de page (breadcrumb) --- */
    .breadcrumb-hero h1{
        font-size:1.5rem;
    }
    .breadcrumb-nav{
        font-size:.8rem;
    }

    /* --- Page À propos --- */
    .apropos-histoire-contenu h2,
    .apropos-valeurs-intro h2,
    .apropos-pourquoi-contenu h2,
    .apropos-intro-col h2,
    .apropos-fondateur-contenu h2,
    .apropos-services-intro h2{
        font-size:1.35rem;
    }
    .apropos-cta h2,
    .apropos-mvv-col > h2,
    .apropos-consultation h2{
        font-size:1.4rem;
    }
    .apropos-valeurs-texte p{
        font-size:.88rem;
    }
    .apropos-mvv-bloc h3{
        font-size:1rem;
    }
    .apropos-savoir-card h3{
        font-size:1rem;
    }
    .apropos-savoir-card p{
        font-size:.85rem;
    }
    .accordeon-header{
        font-size:.92rem;
    }

    /* --- Détail service --- */
    .service-detail-content h2,
    .service-final-cta h2{
        font-size:1.35rem;
    }
    .service-detail-points li{
        font-size:.88rem;
    }

    /* --- Formulaire de devis / candidature --- */
    .devis-groupe h3{
        font-size:1.05rem;
    }
    .devis-champ label{
        font-size:.85rem;
    }
    .devis-radio,
    .devis-checkbox{
        font-size:.85rem;
    }

    /* --- Page de confirmation --- */
    .confirmation-icone i{
        font-size:1.8rem;
    }
    .confirmation-inner h2{
        font-size:1.5rem;
    }
    .confirmation-entreprise-texte strong{
        font-size:.95rem;
    }
    .confirmation-entreprise-texte span,
    .confirmation-contact{
        font-size:.82rem;
    }

    /* --- Mentions légales / Politique de confidentialité --- */
    .mentions-intro{
        font-size:.92rem;
    }
    .mentions-bloc h2{
        font-size:1.2rem;
    }
    .mentions-bloc h3{
        font-size:.98rem;
    }
    .mentions-bloc p{
        font-size:.88rem;
    }

    /* --- Carrières --- */
    .careers-home .section-entete p{
        font-size:.9rem;
    }
    .careers-home .careers-benefit-item span{
        font-size:.85rem;
    }
}





/* ============================================================
   RÉPONSE DE RTS AUX AVIS
   ============================================================ */

.reponse-rts {
    margin-top: 20px;
    padding: 14px 16px;
    /* border-left: 3px solid var(--couleur-principale, #7c3aed); */
    /* background: rgba(124, 58, 237, 0.06); */
    /* border-radius: 0 10px 10px 0; */
}

.reponse-rts-entete {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
    color: var(--couleur-principale, #7c3aed);
    font-size: 14px;
}

.reponse-rts-entete i {
    font-size: 13px;
}

.reponse-rts-entete strong {
    font-weight: 600;
}

.reponse-rts-message {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #555;
}

/* ============================================================
   TRONCATURE DU TEXTE DES AVIS (bouton "... Plus" / "Moins")
   À ajouter à la fin de style.css
============================================================ */

.temoignage-message{
    color:#666;
    font-size:.95rem;
    line-height:1.7;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:4;
    line-clamp:4;
    overflow:hidden;
    transition:.2s ease;
}

.temoignage-message.expanded{
    -webkit-line-clamp:unset;
    line-clamp:unset;
    overflow:visible;
}

.avis-texte-wrapper{
    margin-bottom:16px;
}

.avis-voir-plus{
    display:inline-block;
    margin-top:6px;
    background:none;
    border:none;
    color:var(--primary);
    font-weight:600;
    font-size:.88rem;
    cursor:pointer;
    padding:0;
}

.avis-voir-plus:hover{
    text-decoration:underline;
}