/*
 * =========================================================
 * LOUISE BERTHY FILS — STYLE PRINCIPAL
 * =========================================================
 *
 * Feuille CSS externalisée.
 *
 * Organisation :
 *  1. Base / reset / typographie
 *  2. Header & navigation
 *  3. Hero
 *  4. Sections communes
 *  5. Notre histoire & valeurs
 *  6. Nos services
 *  7. Réalisations Instagram
 *  8. Avis Google
 *  9. Localisation / contact / footer
 * 10. Responsive
 * 11. Correctifs finaux
 *
 * Les règles historiques qui dépendent de la cascade ont été
 * conservées afin de ne pas casser le rendu desktop/mobile.
 * =========================================================
 */

/* =========================
   GLOBAL
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Montserrat',sans-serif;
}

html{
    scroll-behavior:smooth;
}

body{
    background:#f6f4ef;
    color:#222;
}

a{
    text-decoration:none;
}

/* Empêche les navigateurs mobiles de recolorer les coordonnées en bleu. */
a[href^="tel:"],
a[href^="mailto:"],
a[x-apple-data-detectors],
x-apple-data-detectors{
    color:inherit !important;
    font:inherit !important;
    text-decoration:none !important;
}

.contact-privacy-notice{margin:2px 0 4px;color:rgba(255,255,255,.72);font-size:11px;line-height:1.65}
.contact-privacy-notice a{color:#fff;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.contact-privacy-notice a:hover{color:#e3eaf3}

.legal-page{min-height:100vh;padding:80px 20px;background:#f6f4ef}
.legal-page-inner{width:min(100%,820px);margin:0 auto}
.legal-page-logo{display:inline-block;margin-bottom:55px;color:#002654;font-size:16px;font-weight:700}
.legal-page h1{margin:0 0 22px;color:#002654;font-size:clamp(30px,5vw,52px);line-height:1.15}
.legal-page p{max-width:680px;margin:0 0 18px;color:#555;font-size:15px;line-height:1.8}
.legal-page h2{max-width:680px;margin:48px 0 18px;color:#002654;font-size:clamp(20px,3vw,27px);line-height:1.3}
.legal-page ul{max-width:680px;margin:0 0 22px;padding-left:22px;color:#555;font-size:15px;line-height:1.8}
.legal-page li{padding-left:4px}
.legal-page a:not(.legal-page-logo):not(.legal-page-back){color:#002654;text-decoration:underline;text-underline-offset:3px}
.legal-update{margin-bottom:34px !important;color:#002654 !important}
.legal-address{max-width:680px;margin:0 0 20px;padding:20px 22px;border-left:3px solid #002654;background:#fff;color:#555;font-size:14px;font-style:normal;line-height:1.8}
.legal-page-back{display:inline-flex;margin-top:22px;padding:13px 20px;border:1px solid #002654;color:#002654;font-size:13px;font-weight:600}
.legal-page-back:hover{background:#002654;color:#fff}
@media(max-width:650px){.legal-page{padding:50px 20px}.legal-page-logo{margin-bottom:40px}}


/* =========================
   LOADING
========================= */


#loader{

position:fixed;
inset:0;

background:#ffffff;

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;

z-index:9999;

animation:hideLoader .5s ease 2.2s forwards;

}


.blueprint{

width:300px;
height:200px;

}


.blueprint svg{

width:100%;
height:100%;

fill:none;
stroke:#002654;
stroke-width:3;

}


.draw{

stroke-dasharray:800;
stroke-dashoffset:800;

animation:draw 1.6s ease forwards;

}


@keyframes draw{

to{
stroke-dashoffset:0;
}

}


.loader-title{

margin-top:20px;

width:100%;

padding:0 20px;

color:#002654;

font-size:38px;

font-weight:700;

letter-spacing:3px;

text-align:center;

line-height:1.2;

}


.loading-bar{

margin-top:45px;

width:260px;

height:5px;

background:#ffffff40;

overflow:hidden;

border-radius:10px;

}


.loading-progress{

height:100%;

width:0;

background:#bb2129;

animation:loading 2.2s forwards;

}


@keyframes loading{

to{
width:100%;
}

}


@keyframes hideLoader{

to{

opacity:0;
visibility:hidden;

}

}


/* =========================
   HEADER
========================= */


header{

position:absolute;

top:0;
left:0;

width:100%;

padding:35px 8%;

z-index:5;

display:flex;
align-items:center;
justify-content:space-between;

}


.logo{

font-size:26px;

font-weight:700;

color:#002654;

}


/* =========================
   MENU BURGER
========================= */


.menu-toggle{

position:fixed;

top:35px;
right:8%;

width:52px;
height:52px;

background:#002654;

display:flex;
align-items:center;
justify-content:center;

cursor:pointer;

z-index:100;

transition:.3s;

}


.menu-toggle:hover{

background:#bb2129;

}


.menu-toggle .bars{

position:relative;

width:24px;
height:18px;

}


.menu-toggle .bars span{

position:absolute;

left:0;

width:100%;

height:2px;

    background:#f6f4ef;

transition:.3s;

}


.menu-toggle .bars span:nth-child(1){
top:0;
}

.menu-toggle .bars span:nth-child(2){
top:8px;
}

.menu-toggle .bars span:nth-child(3){
top:16px;
}


.menu-toggle.active{

background:#bb2129;

}

.menu-toggle.active .bars span:nth-child(1){

top:8px;
transform:rotate(45deg);

}


.menu-toggle.active .bars span:nth-child(2){

opacity:0;

}


.menu-toggle.active .bars span:nth-child(3){

top:8px;
transform:rotate(-45deg);

}


.nav-overlay{

position:fixed;

inset:0;

background:#002654;

z-index:15;

display:flex;

align-items:center;

justify-content:center;


opacity:0;

visibility:hidden;

transform:translateY(-20px);

transition:.4s ease;

}


.nav-overlay.open{

opacity:1;

visibility:visible;

transform:translateY(0);

}


.nav-overlay ul{

list-style:none;

text-align:center;

}


.nav-overlay li{

margin:22px 0;

}


.nav-overlay a{

color:white;

font-size:30px;

font-weight:600;

letter-spacing:1px;

transition:.3s;

}


.nav-overlay a:hover{

color:#bb2129;

}


/* =========================
   HERO
========================= */


.hero{

height:100vh;
height:100dvh;

position:relative;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

text-align:center;

background:white;

overflow:hidden;

padding:20px;

}


/* IMAGE ARTISAN */

.hero::before{

content:"";

position:absolute;

inset:0;


background-image:url("assets/webp/hero-renovation-desktop.webp");

background-size:cover;

background-position:center;


opacity:.23;

}

@media(max-width:800px){
    .hero::before{
        background-image:url("assets/webp/hero-renovation-mobile.webp");
    }
}


/* FILTRE BLANC */

.hero::after{

content:"";

position:absolute;

inset:0;


background:
linear-gradient(
to bottom,
rgba(246,244,239,0) 68%,
rgba(246,244,239,.38) 82%,
#f6f4ef 100%
),
linear-gradient(
90deg,
rgba(255,255,255,.85),
rgba(255,255,255,.45),
rgba(255,255,255,.85)
);

}


.hero-content{

position:relative;

z-index:2;

max-width:900px;

}


.hero-logo{

width:260px;

max-width:70vw;

margin-bottom:35px;

}


.hero h1{

font-size:58px;

font-weight:700;

color:#002654;

margin-bottom:20px;

}


.hero h2,
.hero h1{

font-size:32px;

font-weight:600;

line-height:1.5;

color:#222;

}


.hero p{

margin-top:25px;

font-size:18px;

line-height:1.8;

color:#555;

}


/* =========================
 SOCIAL
========================= */


.social-icons{

display:flex;

justify-content:center;

gap:20px;

margin-top:35px;

}


.social-icons a{

width:48px;

height:48px;

border-radius:50%;

border:2px solid #002654;

display:flex;

align-items:center;

justify-content:center;

transition:.3s;

}


.social-icons svg{

width:22px;
height:22px;

fill:#002654;

display:block;

transition:.3s;

}


.social-icons a:hover{

background:#bb2129;

border-color:#bb2129;

}


.social-icons a:hover svg{

fill:white;

}


/* =========================
 BUTTONS
========================= */


.buttons{

margin-top:25px;

}


.btn{

display:inline-block;

padding:16px 35px;

background:#bb2129;

color:white;

font-weight:600;

margin:10px;

transition:.3s;

}


.btn:hover{

background:#a60d25;

}


.btn-outline{

display:inline-block;

padding:16px 35px;

border:2px solid #002654;

color:#002654;

font-weight:600;

margin:10px;

transition:.3s;

}


.btn-outline:hover{

background:#002654;

color:white;

}


/* =========================
 SCROLL
========================= */


.scroll{

position:absolute;

bottom:35px;

left:50%;

transform:translateX(-50%);

z-index:3;

color:#002654;

}


.scroll span{

font-size:13px;

font-weight:600;

letter-spacing:2px;

}


.arrow{

font-size:35px;

animation:bounce 1.5s infinite;

}


@keyframes bounce{

50%{

transform:translateY(15px);

}

}


/* =========================
 SECTIONS
========================= */


.section{

padding:100px 10%;

}


.container{

max-width:1200px;

margin:auto;

}


h2{

font-size:40px;

color:#002654;

margin-bottom:35px;

}


.text{

font-size:18px;

line-height:1.9;

}


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


.cards{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:30px;

}


.card{

background:white;

padding:40px;

border-top:5px solid #002654;

box-shadow:0 15px 40px rgba(0,0,0,.08);

}


.card h3{

color:#002654;

margin-bottom:15px;

}


/* =========================
 LOCATION
========================= */


.location{

background:#002654;

color:white;

padding:90px 10%;

display:grid;

grid-template-columns:1fr 1fr;

gap:50px;

}


.location h2{

color:white;

}


.map{

height:320px;

background:#ffffff20;

display:flex;

align-items:center;

justify-content:center;

}


/* =========================
 GALERIE
========================= */


.gallery{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:20px;

}


.gallery img{

width:100%;

height:230px;

object-fit:cover;

}


/* =========================
 CONTACT
========================= */


.contact{

background:#002654;

color:white;

padding:100px 10%;

}


.contact-grid{

max-width:1200px;

margin:auto;

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

}


.contact h2{

color:white;

}


form{

display:flex;

flex-direction:column;

gap:15px;

}


input,
textarea{

padding:16px;

border:none;

}


button{

padding:16px;

background:#bb2129;

border:none;

color:white;

cursor:pointer;

}


.contact-info{

background:#ffffff15;

padding:40px;

}


.info{

margin-top:25px;

line-height:1.8;

}


/* =========================
 FOOTER
========================= */


footer{

background:#111;

color:white;

padding:50px 10%;

line-height:2;

}


footer span{

color:#bb2129;

}


/* =========================
 MOBILE
========================= */


@media(max-width:800px){


header{

padding:20px 6%;

}

.menu-toggle{

top:20px;
right:6%;

}

.loader-title{

font-size:clamp(24px,8vw,34px);
letter-spacing:clamp(1px,1vw,3px);
padding:0 24px;

}

.blueprint{

width:min(260px,78vw);
height:auto;
aspect-ratio:3/2;

}

.loading-bar{

width:min(260px,78vw);

}


.hero{

height:100vh;
height:100dvh;

padding:75px 20px 95px;

justify-content:center;

overflow-y:auto;

}


.hero-content{

max-height:100%;

}


.hero h1{

font-size:38px;

}


.hero h2,
.hero h1{

font-size:22px;

}


.hero p{

margin-top:15px;

font-size:15px;

}


.hero-logo{

width:160px;

margin-bottom:18px;

}


.social-icons{

margin-top:20px;

}


.social-icons a{

width:42px;

height:42px;

}


.buttons{

margin-top:15px;

}


.buttons .btn,
.buttons .btn-outline{

display:block;

width:100%;

padding:14px 20px;

margin:8px 0;

}


.scroll{

bottom:16px;

}


.scroll span{

font-size:11px;

}


.arrow{

font-size:28px;

}


.location,
.contact-grid{

grid-template-columns:1fr;

}


.section{

padding:70px 6%;

}


.nav-overlay a{

font-size:24px;

}

}


/* Écrans courts (iPhone SE/6/7/8/X, etc.) : on resserre encore le hero */

@media(max-width:800px) and (max-height:700px){


.hero{

padding:65px 20px 80px;

}

/* Les trois actions du hero conservent exactement la même hauteur. */
.hero-content .buttons .btn,
.hero-content .buttons .btn-outline{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:54px;
    padding-top:0 !important;
    padding-bottom:0 !important;
    box-sizing:border-box;
    line-height:1.2;
}

.hero-content .buttons .btn-primary{
    border-color:#bb2129;
    background:#bb2129;
    color:#fff;
}

.hero-content .buttons .btn-primary:hover{
    border-color:#a60d25;
    background:#a60d25;
    color:#fff;
}

@media(min-width:801px){
    .hero-content .buttons .btn-primary{
        box-shadow:0 0 0 2px #bb2129;
    }

    .hero-content .buttons .btn-primary:hover{
        box-shadow:0 0 0 2px #a60d25;
    }
}

/* États finaux du bouton principal du hero. */
.hero-content .buttons .btn-outline.btn-primary,
.hero-content .buttons .btn-outline.btn-primary:visited{
    border-color:#bb2129;
    background:#bb2129;
    color:#fff;
}

.hero-content .buttons .btn-outline.btn-primary:hover,
.hero-content .buttons .btn-outline.btn-primary:active{
    border-color:#a60d25;
    background:#a60d25;
    color:#fff;
}

.hero-content .buttons .btn-outline.btn-primary:focus-visible{
    border-color:#a60d25;
    background:#a60d25;
    color:#fff;
    outline:3px solid rgba(187,33,41,.28);
    outline-offset:3px;
}

@media(max-width:800px) and (max-height:700px){
    .hero-content .buttons .btn,
    .hero-content .buttons .btn-outline{
        height:42px;
    }
}


.hero-logo{

width:130px;

margin-bottom:12px;

}


.hero h2,
.hero h1{

font-size:19px;

}


.hero p{

margin-top:12px;

font-size:14px;

line-height:1.6;

}


.social-icons{

margin-top:15px;

}


.social-icons a{

width:38px;

height:38px;

}


.buttons{

margin-top:12px;

}


.buttons .btn,
.buttons .btn-outline{

padding:12px 20px;

margin:6px 0;

font-size:14px;

}


.scroll{

bottom:10px;

}

}


/* Très petits écrans (ex: iPhone SE 1ère génération, 320px de large) */

@media(max-width:340px){


.loader-title{

font-size:23px;
letter-spacing:1px;

}

.hero-logo{

width:110px;

}


.hero h2,
.hero h1{

font-size:17px;

}


.hero p{

font-size:13px;

}

}


/* =========================
   MENU OVERLAY - FIX FERMETURE
========================= */

header{
    z-index:10001;
    pointer-events:none;
}

header .logo{
    pointer-events:auto;
}

.menu-toggle{
    position:fixed !important;
    top:35px;
    right:8%;
    z-index:10002 !important;
    pointer-events:auto;
    isolation:isolate;
}

.nav-overlay{
    z-index:10000 !important;
}

/* Le bouton devient une croix parfaitement visible lorsque le menu est ouvert */
.menu-toggle.active{
    background:#bb2129 !important;
}

.menu-toggle.active .bars span{
    background:#fff !important;
}

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

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

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

@media(max-width:800px){
    .menu-toggle{
        top:20px;
        right:6%;
    }
}


/* =========================
   HEADER MASQUÉ PENDANT LE LOADER
========================= */

header{
    opacity:0;
    visibility:hidden;
    animation:showHeader .35s ease 2.7s forwards;
}

@keyframes showHeader{
    to{
        opacity:1;
        visibility:visible;
    }
}


/* =========================
   HERO RESPONSIVE EN HAUTEUR
   DÉCOUVRIR TOUJOURS EN BAS
========================= */

/*
  Le hero reste exactement à la hauteur du viewport.
  Le contenu central se compacte progressivement quand la hauteur diminue.
  "DÉCOUVRIR" reste ancré en bas, avec une réserve d'espace dédiée.
*/

.hero{
    height:100vh;
    height:100dvh;
    min-height:0;
    padding:
        clamp(72px, 10vh, 110px)
        20px
        clamp(72px, 11vh, 105px);
    overflow:hidden;
}

.hero-content{
    width:100%;
    max-width:900px;
    max-height:calc(100dvh - 155px);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

/* Dimensions fluides selon largeur ET hauteur */
.hero-logo{
    width:clamp(105px, min(18vw, 22vh), 260px);
    max-width:70vw;
    margin-bottom:clamp(10px, 3vh, 35px);
}

.hero h2,
.hero h1{
    font-size:clamp(17px, min(3.2vw, 4.1vh), 32px);
    line-height:clamp(1.25, 1.5, 1.5);
}

.hero p{
    margin-top:clamp(9px, 2.5vh, 25px);
    font-size:clamp(12px, min(1.5vw, 2.3vh), 18px);
    line-height:clamp(1.45, 1.8, 1.8);
}

.social-icons{
    margin-top:clamp(10px, 3vh, 35px);
    gap:clamp(12px, 2vw, 20px);
}

.social-icons a{
    width:clamp(34px, 5.8vh, 48px);
    height:clamp(34px, 5.8vh, 48px);
}

.social-icons svg{
    width:clamp(17px, 2.8vh, 22px);
    height:clamp(17px, 2.8vh, 22px);
}

.buttons{
    margin-top:clamp(8px, 2.4vh, 25px);
}

.btn,
.btn-outline{
    padding:
        clamp(10px, 1.8vh, 16px)
        clamp(20px, 3vw, 35px);
    margin:clamp(5px, 1vh, 10px);
    font-size:clamp(13px, 1.8vh, 16px);
}

/* Toujours fixé visuellement au bas de la page d'accueil */
.scroll{
    position:absolute;
    left:50%;
    bottom:max(10px, env(safe-area-inset-bottom));
    transform:translateX(-50%);
    z-index:3;
    margin:0;
    padding:0;
    width:max-content;
    display:flex;
    flex-direction:column;
    align-items:center;
    pointer-events:none;
}

.scroll span{
    font-size:clamp(9px, 1.6vh, 13px);
    line-height:1;
}

.arrow{
    font-size:clamp(21px, 4vh, 35px);
    line-height:1;
    margin-top:clamp(2px, .7vh, 6px);
}

/* Mobile : les boutons restent confortables tant que la hauteur le permet */
@media(max-width:800px){

    .hero{
        padding-left:20px;
        padding-right:20px;
        padding-top:clamp(68px, 11vh, 92px);
        padding-bottom:clamp(64px, 12vh, 92px);
    }

    .hero-content{
        max-height:calc(100dvh - 135px);
    }

    .buttons{
        width:min(100%, 420px);
    }

    .buttons .btn,
    .buttons .btn-outline{
        display:block;
        width:100%;
        margin:clamp(4px, .8vh, 8px) 0;
        padding:clamp(9px, 1.8vh, 14px) 20px;
    }
}

/* Hauteurs moyennement courtes */
@media(max-height:760px){

    .hero{
        padding-top:68px;
        padding-bottom:62px;
    }

    .hero-logo{
        width:clamp(90px, 17vh, 150px);
        margin-bottom:clamp(7px, 1.8vh, 14px);
    }

    .hero h2,
.hero h1{
        font-size:clamp(16px, 3.5vh, 24px);
        line-height:1.28;
    }

    .hero p{
        margin-top:clamp(7px, 1.6vh, 13px);
        font-size:clamp(11px, 2vh, 14px);
        line-height:1.45;
    }

    .social-icons{
        margin-top:clamp(7px, 1.7vh, 15px);
    }

    .buttons{
        margin-top:clamp(5px, 1.4vh, 12px);
    }
}

/* Écrans vraiment courts : tout le contenu se resserre,
   mais DÉCOUVRIR conserve sa zone en bas */
@media(max-height:620px){

    .hero{
        padding-top:58px;
        padding-bottom:52px;
    }

    .hero-logo{
        width:clamp(72px, 14vh, 105px);
        margin-bottom:6px;
    }

    .hero h2,
.hero h1{
        font-size:clamp(14px, 3.1vh, 19px);
        line-height:1.2;
    }

    .hero p{
        margin-top:6px;
        font-size:clamp(10px, 1.9vh, 12px);
        line-height:1.3;
    }

    .social-icons{
        margin-top:6px;
    }

    .social-icons a{
        width:30px;
        height:30px;
    }

    .social-icons svg{
        width:15px;
        height:15px;
    }

    .buttons{
        margin-top:5px;
    }

    .buttons .btn,
    .buttons .btn-outline{
        padding:7px 16px;
        margin:3px 0;
        font-size:11px;
    }

    .scroll{
        bottom:max(6px, env(safe-area-inset-bottom));
    }

    .scroll span{
        font-size:8px;
    }

    .arrow{
        font-size:18px;
        margin-top:1px;
    }
}

/* Très faible hauteur : priorité à l'absence de chevauchement */
@media(max-height:500px){

    .hero{
        padding-top:54px;
        padding-bottom:42px;
    }

    .hero-logo{
        width:58px;
        margin-bottom:3px;
    }

    .hero h2,
.hero h1{
        font-size:13px;
        line-height:1.12;
    }

    .hero p{
        margin-top:4px;
        font-size:9px;
        line-height:1.2;
    }

    .social-icons{
        margin-top:4px;
    }

    .social-icons a{
        width:25px;
        height:25px;
    }

    .social-icons svg{
        width:13px;
        height:13px;
    }

    .buttons{
        margin-top:3px;
    }

    .buttons .btn,
    .buttons .btn-outline{
        padding:5px 14px;
        margin:2px 0;
        font-size:9px;
    }

    .scroll span{
        font-size:7px;
    }

    .arrow{
        font-size:15px;
    }
}


/* =========================================================
   MOBILE FINAL OVERRIDE
   Corrige les règles desktop basées sur la hauteur
========================================================= */

@media (max-width:800px){

    .hero{
        width:100%;
        height:100vh !important;
        height:100svh !important;
        min-height:100svh !important;
        max-height:100svh !important;

        display:flex;
        align-items:center;
        justify-content:center;

        padding:
            max(78px, env(safe-area-inset-top))
            20px
            max(74px, calc(env(safe-area-inset-bottom) + 58px));

        overflow:hidden !important;
    }

    .hero-content{
        width:min(100%, 520px);
        max-width:520px;
        max-height:none !important;
        margin:0 auto;

        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
    }

    .hero-logo{
        width:clamp(105px, 36vw, 160px) !important;
        max-width:55vw;
        height:auto;
        margin-bottom:clamp(12px, 3vw, 18px) !important;
    }

    .hero h2,
.hero h1{
        font-size:clamp(17px, 5.4vw, 22px) !important;
        line-height:1.3 !important;
        margin:0;
    }

    .hero p{
        margin-top:clamp(10px, 3vw, 15px) !important;
        font-size:clamp(12px, 3.7vw, 15px) !important;
        line-height:1.5 !important;
    }

    .social-icons{
        margin-top:clamp(12px, 4vw, 20px) !important;
        gap:14px;
    }

    .social-icons a{
        width:clamp(34px, 10vw, 42px) !important;
        height:clamp(34px, 10vw, 42px) !important;
    }

    .social-icons svg{
        width:clamp(16px, 5vw, 20px) !important;
        height:clamp(16px, 5vw, 20px) !important;
    }

    .buttons{
        width:min(88%, 350px);
        margin-left:auto;
        margin-right:auto;
    }

    .buttons .btn,
    .buttons .btn-outline{
        display:block;
        width:100%;
        padding:21px 20px !important;
        margin:6px 0 !important;
        font-size:clamp(12px, 3.7vw, 14px) !important;
    }

    .scroll{
        position:absolute !important;
        left:50% !important;
        right:auto !important;
        bottom:max(10px, env(safe-area-inset-bottom)) !important;
        transform:translateX(-50%) !important;

        width:max-content;
        margin:0 !important;
        padding:0 !important;

        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:flex-end;
    }

    .scroll span{
        font-size:10px !important;
        line-height:1 !important;
        letter-spacing:1.5px;
    }

    .arrow{
        font-size:24px !important;
        line-height:1 !important;
        margin-top:3px !important;
    }
}


/* Mobile avec faible hauteur : on compacte uniquement ce qui est nécessaire */
@media (max-width:800px) and (max-height:700px){

    .hero{
        padding-top:max(64px, env(safe-area-inset-top));
        padding-bottom:max(58px, calc(env(safe-area-inset-bottom) + 48px));
    }

    .hero-logo{
        width:clamp(80px, 25vw, 120px) !important;
        margin-bottom:8px !important;
    }

    .hero h2,
.hero h1{
        font-size:clamp(15px, 4.7vw, 19px) !important;
        line-height:1.2 !important;
    }

    .hero p{
        margin-top:7px !important;
        font-size:clamp(10px, 3.2vw, 13px) !important;
        line-height:1.35 !important;
    }

    .social-icons{
        margin-top:8px !important;
    }

    .social-icons a{
        width:32px !important;
        height:32px !important;
    }

    .social-icons svg{
        width:15px !important;
        height:15px !important;
    }

    .buttons{
        margin-top:6px !important;
    }

    .buttons .btn,
    .buttons .btn-outline{
        padding:8px 16px !important;
        margin:4px 0 !important;
        font-size:11px !important;
    }

    .scroll{
        bottom:max(6px, env(safe-area-inset-bottom)) !important;
    }

    .scroll span{
        font-size:8px !important;
    }

    .arrow{
        font-size:19px !important;
    }
}


/* Très petits mobiles */
@media (max-width:340px){

    .hero{
        padding-left:15px;
        padding-right:15px;
    }

    .hero h2,
.hero h1{
        font-size:15px !important;
    }

    .hero p{
        font-size:10px !important;
    }
}


/* =========================
   NOTRE HISTOIRE
========================= */

.history-section{
    background:#f6f4ef;
}

.history-grid{
    display:grid;
    grid-template-columns:minmax(300px,.9fr) minmax(0,1.1fr);
    gap:clamp(50px,7vw,95px);
    align-items:center;
}

.history-photo{
    position:relative;
    min-height:560px;
    overflow:hidden;
    background:#e8e5de;
}

.history-photo::before{
    content:"";
    position:absolute;
    top:-18px;
    left:-18px;
    width:90px;
    height:90px;
    border-top:4px solid #bb2129;
    border-left:4px solid #bb2129;
    z-index:2;
    pointer-events:none;
}

.history-photo img{
    width:100%;
    height:100%;
    min-height:560px;
    display:block;
    object-fit:cover;
    object-position:center;
}

.history-photo-caption{
    position:absolute;
    left:25px;
    right:25px;
    bottom:25px;
    padding:20px 22px;
    background:rgba(0,38,84,.92);
    color:white;
    display:flex;
    flex-direction:column;
    gap:5px;
}

.history-photo-caption span{
    color:#fff;
    opacity:.75;
    font-size:11px;
    font-weight:600;
    letter-spacing:1.8px;
    text-transform:uppercase;
}

.history-photo-caption strong{
    font-size:17px;
    font-weight:600;
}

.history-eyebrow{
    display:inline-block;
    margin-bottom:14px;
    color:#bb2129;
    font-size:12px;
    font-weight:700;
    letter-spacing:2.4px;
}

.history-content h2{
    margin-bottom:24px;
}

.history-lead{
    max-width:650px;
    margin-bottom:25px;
    color:#002654;
    font-size:clamp(20px,2vw,27px);
    font-weight:600;
    line-height:1.5;
}

.history-content .text{
    margin-top:18px;
    font-size:16px;
    line-height:1.85;
    color:#555;
}

.history-more-toggle{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-top:22px;
    padding:0 0 6px;
    border:0;
    border-bottom:1px solid rgba(0,38,84,.35);
    background:transparent;
    color:#002654;
    font:inherit;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
}

.history-more-icon{
    width:8px;
    height:8px;
    border-right:1.5px solid currentColor;
    border-bottom:1.5px solid currentColor;
    transform:translateY(-2px) rotate(45deg);
    transition:transform .3s ease;
}

.history-more-toggle[aria-expanded="true"] .history-more-icon{
    transform:translateY(3px) rotate(225deg);
}

.history-more-toggle:focus-visible{
    outline:3px solid rgba(0,38,84,.2);
    outline-offset:5px;
}

.history-more-panel{
    max-height:0;
    overflow:hidden;
    opacity:0;
    transform:translateY(-8px);
    transition:max-height .65s ease,opacity .4s ease,transform .5s ease;
}

.history-more-panel.is-open{
    max-height:760px;
    opacity:1;
    transform:translateY(0);
}

.history-more-inner{
    display:grid;
    grid-template-columns:minmax(180px,.95fr) minmax(0,1.05fr);
    align-items:center;
    gap:28px;
    margin-top:28px;
    padding:0;
    border:0;
    background:transparent;
}

.history-more-inner img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.history-more-visual{
    position:relative;
    width:100%;
    aspect-ratio:1/1;
    overflow:hidden;
}

.history-more-caption{
    position:absolute;
    left:14px;
    right:14px;
    bottom:14px;
    padding:13px 15px;
    background:rgba(0,38,84,.92);
    color:#fff;
    font-size:12px;
    font-weight:600;
    line-height:1.4;
}

.history-more-copy h3{
    margin:0 0 12px;
    color:#002654;
    font-size:18px;
}

.history-more-copy p{
    margin:0 0 12px;
    color:#555;
    font-size:13px;
    line-height:1.7;
}

.history-more-copy p:last-child{margin-bottom:0}

@media(max-width:650px){
    .history-more-inner{
        grid-template-columns:1fr;
        gap:18px;
        padding:0;
    }

    .history-more-inner img{
        height:100%;
    }
}

.history-values{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
    margin-top:35px;
    padding-top:28px;
    border-top:1px solid rgba(0,38,84,.16);
}

.history-values div{
    display:flex;
    flex-direction:column;
    gap:5px;
}

.history-values strong{
    color:#002654;
    font-size:19px;
}

.history-values span{
    color:#666;
    font-size:12px;
    line-height:1.4;
}

.history-values.counter-ready > div{
    opacity:0;
    transform:translateY(18px);
    transition:opacity .55s ease,transform .55s cubic-bezier(.22,.8,.3,1);
}

.history-values.counter-ready > div.is-visible{
    opacity:1;
    transform:translateY(0);
}

@media(prefers-reduced-motion:reduce){
    .history-values.counter-ready > div{
        opacity:1;
        transform:none;
        transition:none;
    }
}

@media(max-width:800px){

    .history-grid{
        grid-template-columns:1fr;
        gap:38px;
    }

    .history-photo{
        width:100%;
        min-height:0;
        aspect-ratio:4/5;
    }

    .history-photo img{
        min-height:0;
        height:100%;
    }

    .history-photo::before{
        top:-10px;
        left:-10px;
        width:65px;
        height:65px;
    }

    .history-photo-caption{
        left:15px;
        right:15px;
        bottom:15px;
        padding:16px 18px;
    }

    .history-lead{
        font-size:20px;
    }

    .history-content .text{
        font-size:15px;
        line-height:1.75;
    }

    .history-values{
        grid-template-columns:1fr;
        gap:18px;
    }

    .history-values div{
        padding-bottom:15px;
        border-bottom:1px solid rgba(0,38,84,.1);
    }

    .history-values div:last-child{
        padding-bottom:0;
        border-bottom:0;
    }
}


/* =========================================================
   AJUSTEMENTS ACCUEIL + SECTEURS D'ACTIVITÉ
========================================================= */

/* Logo d'accueil plus grand et plus proche du titre */
.hero-logo{
    width:clamp(150px, min(24vw, 30vh), 340px);
    max-width:78vw;
    margin-bottom:clamp(5px, 1.2vh, 14px);
}

/* Séparation discrète entre Notre histoire et Secteurs d'activité */
.activities-section{
    padding-top:0;
}

.section-separator{
    width:70px;
    height:3px;
    margin:0 auto 70px;
    background:#002654;
}

/* Cartes avec photographie */
.activity-cards{
    align-items:stretch;
}

.activity-card{
    padding:0;
    overflow:hidden;
    border-top:0;
    display:flex;
    flex-direction:column;
    transition:transform .3s ease, box-shadow .3s ease;
}

.activity-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 50px rgba(0,0,0,.12);
}

.activity-image{
    width:100%;
    height:230px;
    overflow:hidden;
    background:#e8e5de;
}

.activity-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .5s ease;
}

.activity-image picture{
    display:block;
    width:100%;
    height:100%;
}

.activity-card:hover .activity-image img{
    transform:scale(1.04);

}

.activity-card:hover .activity-content {
    border-top-color: #bb2129; /* couleur au hover */
}

.activity-content{
    flex:1;
    padding:30px;
    border-top:5px solid #002654;
    transition: border-top-color 0.3s ease;
}



.activity-content h3{
    font-size:21px;
    margin-bottom:12px;
}

.activity-content p{
    color:#555;
    font-size:15px;
    line-height:1.7;
}

/* Mobile : conserver le logo généreux sans casser le hero */
@media(max-width:800px){

    .hero-logo{
        width:clamp(135px, 42vw, 185px) !important;
        max-width:58vw;
        margin-bottom:6px !important;
    }

    .section-separator{
        width:55px;
        height:3px;
        margin-bottom:50px;
    }

    .activity-image{
        height:220px;
    }

}

/* Sur les mobiles courts, le logo reste plus grand qu'avant
   mais se compacte suffisamment pour préserver DÉCOUVRIR */
@media(max-width:800px) and (max-height:700px){

    .hero-logo{
        width:clamp(100px, 31vw, 135px) !important;
        margin-bottom:4px !important;
    }

}


/* =========================
   RÉSEAUX SOCIAUX - CONTACT
========================= */

.contact-info .network{
    margin-top:42px;
    padding-top:30px;
    border-top:1px solid rgba(255,255,255,.18);
    line-height:1.7;
}

.contact-social-icons{
    display:flex;
    align-items:center;
    gap:14px;
    margin-top:22px;
}

.contact-social-icons a{
    width:44px;
    height:44px;
    border:2px solid rgba(255,255,255,.8);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .3s ease, border-color .3s ease, transform .3s ease;
}

.contact-social-icons svg{
    width:20px;
    height:20px;
    display:block;
    fill:white;
}

.contact-social-icons a:hover{
    background:#bb2129;
    border-color:#bb2129;
    transform:translateY(-3px);
}

@media(max-width:800px){
    .contact-info .network{
        margin-top:35px;
        padding-top:26px;
    }
}


/* =========================================================
   LOADING PAGE - LOGO ANIMÉ
========================================================= */

#loader{
    background:#fff;
    animation:hideLoader .4s ease 1.6s forwards;
}

.loader-logo-wrap{
    position:relative;
    width:min(430px,78vw);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.loader-logo-reveal{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:0;
    transform:translate3d(0,10px,0) scale(.975);
    animation:logoReveal .72s cubic-bezier(.22,1,.36,1) .1s forwards;
    will-change:opacity,transform;
}

.loader-logo{
    display:block;
    width:100%;
    height:auto;
    opacity:1;
    transform:none;
    animation:none;
}

.loader-shine{
    display:none;
}

.loading-bar{
    margin-top:38px;
    width:min(300px,65vw);
    height:3px;
    background:rgba(0,38,84,.12);
    border-radius:10px;
}

.loading-progress{
    background:#bb2129;
    animation:loading 1.6s cubic-bezier(.4,0,.2,1) forwards;
}

@keyframes logoReveal{
    from{opacity:0;transform:translate3d(0,10px,0) scale(.975)}
    to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}

@keyframes logoAppear{
    0%{
        opacity:0;
        transform:scale(.94);
    }
    45%{
        opacity:1;
    }
    100%{
        opacity:1;
        transform:scale(1);
    }
}

@keyframes logoShine{
    0%{
        left:-35%;
        opacity:0;
    }
    15%{
        opacity:.75;
    }
    100%{
        left:115%;
        opacity:0;
    }
}

/* Header seulement après disparition du loader */
header{
    animation:showHeader .3s ease 2s forwards;
}

@media(max-width:800px){

    .loader-logo-wrap{
        width:min(330px,78vw);
    }

    .loading-bar{
        width:min(250px,62vw);
        margin-top:30px;
    }

}

@media(max-width:340px){

    .loader-logo-wrap{
        width:76vw;
    }

    .loading-bar{
        width:58vw;
        margin-top:25px;
    }

}

@media(prefers-reduced-motion:reduce){

    .loader-logo-reveal{
        clip-path:none;
        opacity:1;
        transform:none;
        animation:none;
    }

    .loader-logo{
        opacity:1;
        transform:none;
        animation:none;
    }

    .loader-shine{
        display:none;
    }

}


/* =========================================================
   TRANSITION LOADER -> LOGO HERO
   Le logo du loader se déplace et se réduit exactement
   vers la position du logo de la page d'accueil.
========================================================= */

/* On garde le hero caché derrière le loader jusqu'au handoff */
.hero .hero-logo{
    opacity:0;
}

#loader{
    /* JS contrôle maintenant la disparition pour synchroniser le mouvement */
    animation:none !important;
    transition:opacity .32s ease, visibility .32s ease;
}

#loader.loader-fade{
    opacity:0;
    visibility:hidden;
}

/* Le logo animé devient indépendant pendant son déplacement */
.loader-logo-wrap.logo-handoff{
    position:fixed;
    z-index:10010;
    margin:0;
    transition:
        left .7s cubic-bezier(.22,1,.36,1),
        top .7s cubic-bezier(.22,1,.36,1),
        width .7s cubic-bezier(.22,1,.36,1),
        height .7s cubic-bezier(.22,1,.36,1),
        transform .7s cubic-bezier(.22,1,.36,1);
    will-change:left, top, width, height, transform;
}

.loader-logo-wrap.logo-handoff .loader-logo-reveal{
    clip-path:inset(0 0 0 0) !important;
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
}

.loader-logo-wrap.logo-handoff .loader-logo{
    width:100%;
    height:100%;
    object-fit:contain;
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
}

.loader-logo-wrap.logo-handoff .loader-shine{
    display:none;
}

/* Pendant le déplacement, la barre s'efface discrètement */
#loader.handoff-start .loading-bar{
    opacity:0;
    transform:translateY(6px);
    transition:opacity .22s ease, transform .22s ease;
}

/* Une fois arrivé, le vrai logo prend le relais sans saut visuel */
.hero .hero-logo.hero-logo-visible{
    opacity:1;
}

/* Header contrôlé par JS pour être synchronisé avec la fin du loader */
header{
    animation:none !important;
    opacity:0;
    visibility:hidden;
    transition:opacity .3s ease;
}

header.header-visible{
    opacity:1;
    visibility:visible;
}

@media(prefers-reduced-motion:reduce){
    .loader-logo-wrap.logo-handoff{
        transition:none;
    }

    #loader{
        transition:none;
    }
}


/* =========================
   NOS RÉALISATIONS - API INSTAGRAM
========================= */

.instagram-projects{
    background:#f6f4ef;
}

.instagram-intro{
    max-width:650px;
    margin:-18px 0 38px;
    color:#666;
    font-size:16px;
    line-height:1.7;
}

.instagram-gallery{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px;
}

.instagram-post{
    position:relative;
    display:block;
    aspect-ratio:1/1;
    overflow:hidden;
    background:#e8e5de;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
}

.instagram-post img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .5s cubic-bezier(.2,.7,.2,1);
}

.instagram-caption{
    position:absolute;
    inset:0;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:rgba(0,38,84,.84);
    color:#fff;
    font-size:13px;
    font-weight:500;
    line-height:1.55;
    text-align:center;
    opacity:0;
    transition:opacity .3s ease;
    overflow:hidden;
}

.instagram-caption span{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:8;
    overflow:hidden;
}

.instagram-post:hover img{
    transform:scale(1.055);
}

.instagram-post:hover .instagram-caption{
    opacity:1;
}


.instagram-loading,
.instagram-error{
    grid-column:1/-1;
    min-height:180px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:30px;
    background:#fff;
    color:#555;
    text-align:center;
}

.instagram-more{
    margin-top:32px;
    text-align:center;
}

.instagram-more .btn-outline{
    margin:0;
}

@media(max-width:900px){
    .instagram-gallery{
        grid-template-columns:repeat(2,1fr);
        gap:14px;
    }
}

@media(max-width:800px){
    .instagram-intro{
        margin-top:-20px;
        margin-bottom:28px;
        font-size:14px;
    }

    .instagram-gallery{
        grid-template-columns:1fr;
        gap:14px;
    }

    .instagram-caption{
        display:flex;
        opacity:0;
        pointer-events:none;
    }

    .instagram-post.active .instagram-caption{
        opacity:1;
    }

    

    .instagram-more{
        margin-top:26px;
    }
}


.instagram-load-more{
    background:transparent;
    cursor:pointer;
}
.instagram-load-more:hover{
    background:#002654;
    color:#fff;
}
.instagram-load-more[disabled]{
    opacity:.55;
    cursor:default;
}

@media(max-width:800px){
    .instagram-post{
        cursor:pointer;
        -webkit-tap-highlight-color:transparent;
    }
}


@media(max-width:800px){

    .instagram-post:hover .instagram-caption{
        opacity:0;
    }

    .instagram-post.active:hover .instagram-caption,
    .instagram-post.active .instagram-caption{
        opacity:1;
    }
}


/* =========================
   INSTAGRAM - CARROUSELS
========================= */
.instagram-media{position:absolute;inset:0;z-index:0}
.instagram-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1);transition:opacity .28s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.instagram-media img.active{opacity:1}
.instagram-post:hover .instagram-media img.active{transform:scale(1.055)}
.instagram-carousel-btn{position:absolute;top:50%;z-index:3;width:42px;height:42px;padding:0;border:0;border-radius:50%;background:rgba(0,38,84,.78);color:#fff;font-size:29px;line-height:1;display:flex;align-items:center;justify-content:center;transform:translateY(-50%);cursor:pointer;opacity:0;transition:opacity .2s ease,background .2s ease}
.instagram-carousel-btn:hover{background:#bb2129}
.instagram-carousel-prev{left:14px}
.instagram-carousel-next{right:14px}
.instagram-post:hover .instagram-carousel-btn,.instagram-post:focus-within .instagram-carousel-btn{opacity:1}
.instagram-dots{position:absolute;left:50%;bottom:14px;z-index:3;transform:translateX(-50%);display:flex;gap:6px;padding:6px 9px;border-radius:20px;background:rgba(0,38,84,.55)}
.instagram-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.55);transition:.2s ease}
.instagram-dot.active{background:#fff;transform:scale(1.25)}
.instagram-caption{z-index:2}
.instagram-post.active .instagram-carousel-btn,.instagram-post.active .instagram-dots{opacity:0;pointer-events:none}
@media(max-width:800px){
.instagram-carousel-btn{width:40px;height:40px;font-size:27px;opacity:1}
.instagram-carousel-prev{left:10px}.instagram-carousel-next{right:10px}.instagram-dots{bottom:10px}
}

/* =========================
   GOOGLE MAPS - LOCALISATION
========================= */

.location-content{
    width:100%;
}

.location-info{
    margin-bottom:28px;
}

.location-info h3{
    margin:0 0 8px;
    color:#002654;
    font-family:Georgia,serif;
    font-size:24px;
    font-weight:400;
}

.location-info p{
    margin:0;
    color:#555;
    line-height:1.7;
}

.google-map{
    width:100%;
    overflow:hidden;
    background:#e8e5de;
    box-shadow:0 14px 35px rgba(0,0,0,.08);
}

.google-map iframe{
    display:block;
    width:100%;
    height:450px;
    border:0;
}

@media(max-width:800px){
    .location-info{
        margin-bottom:20px;
    }

    .location-info h3{
        font-size:21px;
    }

    .google-map iframe{
        height:360px;
    }
}


/* CORRECTION CARTE GOOGLE MAPS */
.location .map{
    height:420px;
    padding:0;
    display:block;
    overflow:hidden;
    background:#e8e5de;
}

.location .map iframe{
    display:block;
    width:100%;
    height:100%;
    border:0;
}

@media(max-width:800px){
    .location .map{
        height:360px;
    }
}


/* =========================================================
   FORMULAIRE DE CONTACT - ALIGNEMENT + WEB3FORMS
========================================================= */

#contactForm{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:20px;
}

#contactForm .form-group{
    width:100%;
    margin:0;
}

#contactForm label{
    display:block;
    margin-bottom:8px;
    color:#fff;
    font-size:15px;
}

#contactForm label span{
    color:#fff;
}

#contactForm input,
#contactForm textarea{
    display:block;
    width:100%;
    box-sizing:border-box;
    margin:0;
    padding:15px 16px;

    border:1px solid rgba(255,255,255,.25);
    border-radius:0;

    background:#fff;
    color:#222;

    font:inherit;
    outline:none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

#contactForm input{
    min-height:52px;
}

#contactForm textarea{
    min-height:145px;
    resize:vertical;
    line-height:1.6;
}

#contactForm input:focus,
#contactForm textarea:focus{
    border-color:#bb2129;
    box-shadow:0 0 0 3px rgba(187,33,41,.18);
}

#contactForm button{
    width:100%;
    min-height:52px;
    padding:15px 20px;

    border:0;

    background:#bb2129;
    color:#fff;

    font:inherit;
    font-weight:500;

    cursor:pointer;
    transition:.25s ease;
}

#contactForm button:hover{
    background:#a60d25;
}

#contactForm button:disabled{
    opacity:.65;
    cursor:wait;
}

.form-result{
    min-height:22px;
    margin:0;

    font-size:14px;
    line-height:1.5;
}

.form-result.success{
    color:#fff;
}

.form-result.error{
    color:#ffd1d4;
}

@media(max-width:800px){

    #contactForm{
        gap:17px;
    }

    #contactForm input,
    #contactForm button{
        min-height:54px;
    }

    #contactForm textarea{
        min-height:150px;
    }
}


/* =========================================================
   INSTAGRAM - STYLE CARTE
   Photo en haut, description permanente en bas
========================================================= */

.instagram-gallery{
    align-items:start;
}

.instagram-post{
    position:relative;
    display:flex;
    flex-direction:column;
    aspect-ratio:auto;
    overflow:hidden;
    background:#fff;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
}

.instagram-media{
    position:relative;
    inset:auto;
    width:100%;
    aspect-ratio:1/1;
    overflow:hidden;
    background:#e8e5de;
}

.instagram-media img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0;
    transform:none;
    transition:opacity .28s ease;
}

.instagram-media img.active{
    opacity:1;
}

.instagram-post:hover .instagram-media img.active{
    transform:none;
}

/* Description toujours visible sous la photo */
.instagram-caption{
    position:relative;
    inset:auto;
    z-index:1;
    display:block;
    width:100%;
    min-height:112px;
    padding:18px 20px 20px;
    background:#fff;
    color:#333;
    font-size:13px;
    font-weight:400;
    line-height:1.6;
    text-align:left;
    opacity:1 !important;
    overflow:hidden;
    transition:none;
}

.instagram-caption span{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:4;
    overflow:hidden;
}

/* Plus aucun effet de description au survol */
.instagram-post:hover .instagram-caption,
.instagram-post.active .instagram-caption,
.instagram-post.active:hover .instagram-caption{
    opacity:1 !important;
}

/* Flèches directement sur les côtés de la photo */
.instagram-carousel-btn{
    top:calc((100% - 112px) / 2);
    width:38px;
    height:38px;
    border-radius:50%;
    background:rgba(255,255,255,.92);
    color:#002654;
    box-shadow:0 3px 12px rgba(0,0,0,.18);
    font-size:28px;
    opacity:1;
}

.instagram-carousel-btn:hover{
    background:#fff;
    color:#bb2129;
}

.instagram-carousel-prev{
    left:12px;
}

.instagram-carousel-next{
    right:12px;
}

/* Points façon Instagram, en bas de la photo */
.instagram-dots{
    bottom:126px;
    padding:5px 8px;
    background:rgba(0,38,84,.48);
}

/* L'ancien état "active" mobile ne masque plus les contrôles */
.instagram-post.active .instagram-carousel-btn,
.instagram-post.active .instagram-dots{
    opacity:1;
    pointer-events:auto;
}

@media(max-width:800px){
    .instagram-caption{
        min-height:0;
        padding:16px 17px 18px;
        font-size:13px;
    }

    .instagram-carousel-btn{
        top:auto;
        bottom:calc(var(--instagram-caption-height, 0px) + 12px);
    }

    .instagram-dots{
        bottom:calc(var(--instagram-caption-height, 0px) + 10px);
    }
}


/* Contrôles positionnés relativement à la zone photo */
.instagram-media .instagram-carousel-btn{
    top:50%;
    bottom:auto;
}
.instagram-media .instagram-dots{
    bottom:12px;
}


/* =========================================================
   INSTAGRAM - FINITIONS CARTE
   Voir plus + flèches plus élégantes
========================================================= */

.instagram-caption{
    overflow:visible;
}

.instagram-caption-text{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    overflow:hidden;
}

.instagram-caption.expanded .instagram-caption-text{
    display:block;
    overflow:visible;
    -webkit-line-clamp:unset;
}

.instagram-more-btn{
    display:inline-flex;
    align-items:center;
    gap:5px;
    margin-top:7px;
    padding:0;
    border:0;
    background:transparent;
    color:#002654;
    font:inherit;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
}

.instagram-more-btn:hover{
    color:#bb2129;
}

.instagram-more-btn::after{
    content:"";
    width:6px;
    height:6px;
    border-right:1.5px solid currentColor;
    border-bottom:1.5px solid currentColor;
    transform:rotate(45deg) translateY(-2px);
    transition:transform .2s ease;
}

.instagram-caption.expanded .instagram-more-btn::after{
    transform:rotate(225deg) translate(-1px,-1px);
}

/* Flèches sobres, proches de l'esthétique Instagram */
.instagram-media .instagram-carousel-btn{
    width:36px;
    height:36px;
    border:1px solid rgba(0,0,0,.06);
    border-radius:50%;
    background:rgba(255,255,255,.94);
    color:#1f1f1f;
    box-shadow:0 2px 10px rgba(0,0,0,.18);
    opacity:.92;
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    transition:transform .2s ease, opacity .2s ease, background .2s ease;
}

.instagram-media .instagram-carousel-btn:hover{
    background:#fff;
    color:#1f1f1f;
    opacity:1;
    transform:translateY(-50%) scale(1.08);
}

.instagram-media .instagram-carousel-btn svg{
    width:16px;
    height:16px;
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.instagram-media .instagram-carousel-prev{
    left:12px;
}

.instagram-media .instagram-carousel-next{
    right:12px;
}

@media(max-width:800px){
    .instagram-media .instagram-carousel-btn{
        width:34px;
        height:34px;
        opacity:.95;
    }

    .instagram-media .instagram-carousel-prev{
        left:9px;
    }

    .instagram-media .instagram-carousel-next{
        right:9px;
    }
}


/* Correctif mobile : le bouton Voir plus reste toujours cliquable */
.instagram-caption{
    pointer-events:auto;
}

.instagram-more-btn{
    position:relative;
    z-index:10;
    pointer-events:auto;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
}

@media(max-width:800px){
    .instagram-caption{
        position:relative;
        z-index:5;
    }

    .instagram-more-btn{
        min-height:32px;
        padding:4px 2px;
    }
}


/* =========================================================
   CORRECTION FINALE - DÉCOUVRIR / FLÈCHE
   Placée en dernier pour prendre le dessus sur les anciennes règles.
   Aucun autre élément du site n'est modifié.
========================================================= */

.scroll{
    position:absolute !important;
    left:50% !important;
    right:auto !important;
    bottom:max(42px, calc(env(safe-area-inset-bottom) + 32px)) !important;
    transform:translateX(-50%) !important;
    z-index:3;
    width:max-content;
    margin:0 !important;
    padding:0 !important;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    pointer-events:none;
}

.scroll span{
    line-height:1 !important;
}

.arrow{
    line-height:1 !important;
    margin-top:5px !important;
    animation:bounce-final 1.5s ease-in-out infinite !important;
}

@keyframes bounce-final{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(8px);
    }
}

@media(max-width:800px){
    .scroll{
        bottom:max(55px, calc(env(safe-area-inset-bottom) + 45px)) !important;
    }

    .scroll span{
        font-size:10px !important;
        letter-spacing:1.5px;
    }

    .arrow{
        font-size:24px !important;
        margin-top:5px !important;
    }
}

@media(max-width:800px) and (max-height:700px){
    .scroll{
        bottom:max(48px, calc(env(safe-area-inset-bottom) + 38px)) !important;
    }
}


/* =========================================================
   LOCALISATION - CENTRÉE COMME LA SECTION CONTACT
========================================================= */

.location{
    display:block;
    width:100%;
    padding:90px 10%;
    background:#002654;
    color:#fff;
}

.location-grid{
    width:100%;
    max-width:1200px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
}

.location-text{
    min-width:0;
}

.location-text h2{
    color:#fff;
    margin-bottom:35px;
}

.location-text p{
    font-size:16px;
    line-height:1.8;
}

.location-grid .map{
    width:100%;
    height:420px;
    padding:0;
    display:block;
    overflow:hidden;
    background:#e8e5de;
}

.location-grid .map iframe{
    display:block;
    width:100%;
    height:100%;
    border:0;
}

@media(max-width:800px){
    .location{
        padding:70px 6%;
    }

    .location-grid{
        grid-template-columns:1fr;
        gap:38px;
    }

    .location-text h2{
        margin-bottom:25px;
    }

    .location-grid .map{
        height:360px;
    }
}


/* =========================================================
   ACCUEIL MOBILE - CENTRAGE DÉFINITIF DES BOUTONS
========================================================= */
@media(max-width:800px){

    .hero-content{
        width:100%;
        max-width:100%;
        margin-left:auto !important;
        margin-right:auto !important;
        padding-left:6% !important;
        padding-right:6% !important;
        box-sizing:border-box;
        align-items:center !important;
    }

    .hero-content .buttons{
        width:min(100%, 420px) !important;
        max-width:420px;
        margin-left:auto !important;
        margin-right:auto !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        box-sizing:border-box;
    }

    .hero-content .buttons .btn,
    .hero-content .buttons .btn-outline{
        width:100% !important;
        max-width:none !important;
        min-width:0 !important;
        margin:6px 0 !important;
        box-sizing:border-box;
        display:flex;
        align-items:center;
        justify-content:center;
        text-align:center;
    }
}


/* INSTAGRAM - VIDÉOS / REELS */
.instagram-slide{position:absolute;inset:0;width:100%;height:100%;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease}
.instagram-slide.active{opacity:1;visibility:visible;pointer-events:auto}
.instagram-slide img,.instagram-slide video{width:100%;height:100%;display:block;object-fit:cover}
.instagram-slide video{background:#000}
.instagram-video-play{position:absolute;left:50%;top:50%;z-index:4;width:64px;height:64px;padding:0;border:0;border-radius:50%;transform:translate(-50%,-50%);background:rgba(255,255,255,.94);color:#002654;box-shadow:0 5px 22px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s;-webkit-tap-highlight-color:transparent}
.instagram-video-play:hover{transform:translate(-50%,-50%) scale(1.07)}
.instagram-video-play svg{width:25px;height:25px;fill:currentColor;margin-left:3px}
.instagram-slide.is-playing .instagram-video-play{opacity:0;pointer-events:none}
@media(max-width:800px){.instagram-video-play{width:58px;height:58px}.instagram-video-play svg{width:23px;height:23px}}


/* =========================================================
   INSTAGRAM - CORRECTION AFFICHAGE PHOTOS + VIDÉOS
   L'ancien CSS mettait les images à opacity:0.
   Avec le nouveau système, c'est la slide qui gère l'affichage.
========================================================= */

.instagram-slide img{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    object-fit:cover !important;
    transform:none !important;
}

.instagram-slide.active img{
    opacity:1 !important;
    visibility:visible !important;
}

.instagram-slide video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    background:#000;
}


/* SEO : le titre principal est désormais un H1 sans modifier son rendu visuel */
.hero h1{
    margin:0;
    color:#222;
    font-weight:600;
}


/* NOS SERVICES */
.services-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.services-grid .activity-card{min-height:220px}
.services-grid .activity-content{display:flex;flex-direction:column;justify-content:center;padding:36px}
@media(max-width:950px){.services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.services-grid{grid-template-columns:1fr}.services-grid .activity-card{min-height:0}}

/* AVIS CLIENTS GOOGLE */
.reviews-section{background:#f6f4ef}
.reviews-header{max-width:720px;margin-bottom:38px}
.reviews-intro{color:#666;font-size:16px;line-height:1.75}
.google-review-box{display:flex;align-items:center;justify-content:space-between;gap:35px;padding:38px 42px;background:#f6f4ef;border-left:5px solid #002654;box-shadow:0 12px 30px rgba(0,0,0,.07)}
.google-review-brand{display:flex;align-items:center;gap:20px}
.google-review-g{width:58px;height:58px;flex:0 0 58px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;box-shadow:0 5px 18px rgba(0,0,0,.09);font-size:30px;font-weight:700;color:#002654}
.google-review-text strong{display:block;margin-bottom:6px;color:#002654;font-size:21px}
.google-review-text span{color:#666;font-size:14px;line-height:1.6}
.google-review-box .btn{flex:0 0 auto;margin:0;text-align:center}
@media(max-width:800px){.reviews-header{margin-bottom:28px}.google-review-box{flex-direction:column;align-items:flex-start;padding:28px 24px}.google-review-box .btn{width:100%}}


/* =========================================================
   NOS SERVICES - CARTES AVEC IMAGE
========================================================= */
.services-grid .activity-card{
    min-height:0;
}

.services-grid .activity-image{
    height:230px;
    overflow:hidden;
}

.services-grid .activity-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .55s ease;
}

.services-grid .activity-card:hover .activity-image img{
    transform:scale(1.035);
}

.services-grid .activity-content{
    min-height:190px;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    padding:30px;
}

@media(max-width:600px){
    .services-grid .activity-image{
        height:220px;
    }

    .services-grid .activity-content{
        min-height:0;
        padding:26px 24px 30px;
    }
}


/* =========================================================
   AVIS GOOGLE - CARROUSEL PRÊT POUR L'API
========================================================= */
.google-reviews-summary{
    display:flex;
    align-items:center;
    gap:14px;
    margin-top:18px;
}

.google-reviews-score{
    font-size:28px;
    line-height:1;
    font-weight:700;
    color:#002654;
}

.google-reviews-stars,
.review-stars{
    color:#f4b400;
    letter-spacing:2px;
}

.google-reviews-count{
    color:#666;
    font-size:13px;
}

.google-reviews-carousel{
    position:relative;
    margin-top:34px;
}

.google-reviews-viewport{
    overflow:hidden;
}

.google-reviews-track{
    display:flex;
    gap:22px;
    transition:transform .45s ease;
    will-change:transform;
}

.google-review-card{
    flex:0 0 calc((100% - 44px)/3);
    min-width:0;
    padding:30px;
    background:#f6f4ef;
    border-top:4px solid #002654;
    box-shadow:0 10px 28px rgba(0,0,0,.07);
}

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

.review-avatar{
    width:46px;
    height:46px;
    flex:0 0 46px;
    border-radius:50%;
    object-fit:cover;
    background:#e7e7e7;
}

.review-author{
    color:#002654;
    font-size:15px;
    font-weight:700;
}

.review-date{
    display:block;
    margin-top:3px;
    color:#777;
    font-size:12px;
}

.review-stars{
    margin-bottom:14px;
    font-size:17px;
}

.review-text{
    margin:0;
    color:#444;
    font-size:14px;
    line-height:1.75;
}

.google-reviews-nav{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:14px;
    margin-top:28px;
}

.google-review-arrow{
    width:44px;
    height:44px;
    border:1px solid rgba(0,38,84,.18);
    border-radius:50%;
    background:#fff;
    color:#002654;
    font-size:22px;
    cursor:pointer;
    transition:transform .2s ease, background .2s ease;
}

.google-review-arrow:hover{
    transform:translateY(-2px);
    background:#f6f4ef;
}

.google-review-arrow:disabled{
    opacity:.35;
    cursor:default;
    transform:none;
}

.google-reviews-loading,
.google-reviews-empty{
    padding:36px;
    background:#f6f4ef;
    color:#666;
    text-align:center;
}

.google-reviews-footer{
    margin-top:28px;
    text-align:center;
}

@media(max-width:950px){
    .google-review-card{
        flex-basis:calc((100% - 22px)/2);
    }
}

@media(max-width:650px){
    .google-review-card{
        flex-basis:100%;
        padding:25px 22px;
    }

    .google-reviews-summary{
        flex-wrap:wrap;
    }
}


/* =========================================================
   AVIS GOOGLE - FLÈCHES CARROUSEL AMÉLIORÉES
========================================================= */
.google-reviews-nav{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:16px;
    margin-top:30px;
}

.google-review-arrow{
    position:relative;
    width:48px;
    height:48px;
    padding:0;
    border:1px solid rgba(0,38,84,.22);
    border-radius:50%;
    background:#fff;
    color:transparent;
    cursor:pointer;
    box-shadow:0 7px 20px rgba(0,38,84,.09);
    transition:
        transform .22s ease,
        background .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

.google-review-arrow::before{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:10px;
    height:10px;
    border-top:2px solid #002654;
    border-right:2px solid #002654;
    transition:border-color .22s ease;
}

#googleReviewPrev::before{
    transform:translate(-38%,-50%) rotate(-135deg);
}

#googleReviewNext::before{
    transform:translate(-62%,-50%) rotate(45deg);
}

.google-review-arrow:hover{
    transform:translateY(-2px);
    background:#002654;
    border-color:#002654;
    box-shadow:0 10px 24px rgba(0,38,84,.20);
}

.google-review-arrow:hover::before{
    border-color:#fff;
}

.google-review-arrow:active{
    transform:translateY(0) scale(.96);
}

.google-review-arrow:focus-visible{
    outline:3px solid rgba(0,38,84,.22);
    outline-offset:3px;
}

.google-review-arrow:disabled{
    opacity:.32;
    cursor:default;
    transform:none;
    background:#fff;
    box-shadow:none;
}

.google-review-arrow:disabled::before{
    border-color:#002654;
}

@media(max-width:650px){
    .google-review-arrow{
        width:46px;
        height:46px;
    }
}

/* =========================================================
   NOTRE HISTOIRE - NOS VALEURS
========================================================= */

.company-values{
    margin-top:40px;
    padding-top:30px;
    border-top:1px solid rgba(0,38,84,.16);
}

.company-values > h3{
    position:relative;
    margin:0 0 25px;
    padding-left:0px;
    color:#002654;
    font-size:21px;
    font-weight:600;
    line-height:1.3;
}


.company-values-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.company-value{
    display:flex;
    align-items:flex-start;
    gap:15px;
    min-width:0;
    padding:20px;
    background:#fff;
    border-left:3px solid #002654;
    box-shadow:0 5px 16px rgba(0,38,84,.05);
    transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}

.company-value:hover{
    transform:translateY(-3px);
    border-left-color:#bb2129;
    box-shadow:0 10px 24px rgba(0,38,84,.09);
}

.company-value-number{
    flex:0 0 auto;
    padding-top:2px;
    color:#bb2129;
    font-size:11px;
    font-weight:700;
    letter-spacing:1.2px;
}

.company-value > div{
    min-width:0;
}

.company-value h4{
    margin:0 0 7px;
    color:#002654;
    font-size:15px;
    font-weight:700;
    line-height:1.35;
}

.company-value p{
    margin:0;
    color:#5d5d5d;
    font-size:13px;
    line-height:1.6;
}

@media(max-width:1000px){
    .company-values-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:800px){
    .company-values{
        margin-top:30px;
        padding-top:27px;
    }

    .company-values > h3{
        margin-bottom:20px;
        font-size:20px;
    }

    .company-values-grid{
        gap:11px;
    }

    .company-value{
        padding:18px;
        gap:14px;
    }

    .company-value:hover{
        transform:none;
    }
}


/* =========================================================
   NOS SERVICES - INTRODUCTION
========================================================= */

.services-eyebrow{
    display:inline-block;
    margin-bottom:14px;
    color:#bb2129;
    font-size:12px;
    font-weight:700;
    letter-spacing:2.4px;
    text-transform:uppercase;
}

.services-intro{
    max-width:760px;
    margin:-15px 0 42px;
}

.services-intro h3{
    margin:0 0 12px;
    color:#002654;
    font-size:clamp(20px,2vw,25px);
    font-weight:600;
    line-height:1.4;
}

.services-intro p{
    margin:0;
    color:#555;
    font-size:16px;
    line-height:1.8;
}

@media(max-width:800px){
    .services-intro{
        margin:-10px 0 32px;
    }

    .services-intro h3{
        font-size:20px;
    }

    .services-intro p{
        font-size:15px;
        line-height:1.7;
    }
}

/* =========================================================
   RÉALISATIONS → AVIS
   Espacement final
========================================================= */

.instagram-projects{
    padding-bottom:40px !important;
}

.instagram-more{
    margin-top:28px;
    margin-bottom:0 !important;
}

.reviews-section{
    padding-top:20px !important;
}

.reviews-section .section-separator{
    margin-top:0;
    margin-bottom:42px;
}


/* MOBILE */

@media(max-width:800px){

    .instagram-projects{
        padding-bottom:28px !important;
    }

    .instagram-more{
        margin-top:24px;
        margin-bottom:0 !important;
    }

    .reviews-section{
        padding-top:16px !important;
    }

    .reviews-section .section-separator{
        margin-top:0;
        margin-bottom:32px;
    }

}

/* Surcharge finale du nouveau carrousel d'avis */
.reviews-section{position:relative;overflow:hidden;background:#f6f4ef}
.google-reviews-summary{width:max-content;max-width:100%;padding:11px 16px;border:1px solid rgba(0,38,84,.09);border-radius:999px;background:rgba(255,255,255,.8);box-shadow:0 8px 28px rgba(0,38,84,.07)}
.google-reviews-carousel{margin-top:40px}.google-reviews-viewport{padding:8px 3px 18px}.google-reviews-track{gap:22px;align-items:stretch}
.google-review-card{position:relative;display:flex;flex:0 0 calc((100% - 44px)/3);flex-direction:column;min-height:350px;padding:24px 24px 20px;overflow:hidden;border:1px solid rgba(0,38,84,.09);border-radius:22px;background:rgba(255,255,255,.95);box-shadow:0 16px 45px rgba(0,38,84,.09);transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.google-review-card::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,#002654 0 52%,#fff 52% 67%,#bb2129 67%)}
.google-review-card:hover{transform:translateY(-6px);border-color:rgba(0,38,84,.16);box-shadow:0 24px 55px rgba(0,38,84,.14)}
.review-top{gap:13px;margin:2px 0 17px}.review-identity{min-width:0;flex:1}.review-avatar{width:48px;height:48px;flex-basis:48px;padding:3px;border:2px solid #fff;outline:2px solid rgba(187,33,41,.72);box-shadow:0 3px 12px rgba(0,0,0,.12)}
.review-avatar-fallback{display:grid;place-items:center;padding:0;background:linear-gradient(135deg,#002654,#315984);color:#fff;font-size:17px;font-weight:700}.review-author{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.review-google-badge{display:grid;width:32px;height:32px;flex:0 0 32px;place-items:center;border:1px solid #ececec;border-radius:50%;background:#fff;color:#4285f4;box-shadow:0 4px 14px rgba(0,0,0,.08);font-family:Arial,sans-serif;font-size:17px;font-weight:700}
.review-rating-row{display:flex;align-items:center;gap:9px}.review-stars{margin:0;font-size:16px;letter-spacing:1px}.review-rating-value{color:#8a8a8a;font-size:11px;font-weight:600}.review-quote{height:38px;margin-top:16px;color:rgba(0,38,84,.12);font-family:Georgia,serif;font-size:58px;font-weight:700;line-height:1}
.review-text{display:-webkit-box;margin:2px 0 24px;overflow:hidden;color:#333;font-size:14px;line-height:1.72;-webkit-box-orient:vertical;-webkit-line-clamp:6}.review-card-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:15px;border-top:1px solid #eeeeeb;color:#8a8a8a;font-size:10px;font-weight:600;letter-spacing:.03em}.review-card-footer a{color:#002654;font-size:11px;text-decoration:none}.review-card-footer a:hover{color:#bb2129}
.google-reviews-nav{width:max-content;margin:22px auto 0;padding:5px;border:1px solid rgba(0,38,84,.09);border-radius:999px;background:rgba(255,255,255,.85);box-shadow:0 8px 25px rgba(0,38,84,.08)}.google-review-arrow{width:42px;height:42px;border:0;box-shadow:none}
@media(max-width:1000px){.google-review-card{flex-basis:calc((100% - 22px)/2)}}
@media(max-width:800px){.google-reviews-carousel{margin-top:28px}.google-review-card{flex-basis:100%;min-height:330px;padding:22px 20px 18px;border-radius:19px}.google-review-card:hover{transform:none}.google-reviews-summary{justify-content:center;gap:9px;margin-left:auto;margin-right:auto;padding:10px 13px;text-align:center}.google-reviews-count{width:100%;padding-left:0;text-align:center}}

/* Ajustements cartes : rendu net, sans ombre ni bandeau tricolore */
.google-reviews-nav{
    display:none !important;
}

@keyframes googleReviewsContinuousLoop{
    from{transform:translate3d(0,0,0)}
    to{transform:translate3d(var(--reviews-loop-distance),0,0)}
}

.google-reviews-track{
    transform:translate3d(0,0,0);
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    will-change:transform;
}

.google-reviews-carousel{
    cursor:grab;
    touch-action:pan-y;
    user-select:none;
    -webkit-user-select:none;
}

.google-reviews-carousel.is-dragging{
    cursor:grabbing;
}

.google-reviews-carousel.is-dragging .google-reviews-track{
    transition:none !important;
}

.google-reviews-carousel.is-dragging .google-review-card{
    pointer-events:none;
}

.google-review-card,
.google-review-card:hover{
    box-shadow:none;
}

.google-review-card::before{
    display:none;
}

/* Les publications Instagram reprennent la même carte blanche arrondie. */
.instagram-post{
    overflow:hidden;
    border:1px solid rgba(0,38,84,.09);
    border-radius:0;
    background:#fff;
    box-shadow:none;
    transition:transform .3s ease,border-color .3s ease;
}

.instagram-post:hover{
    transform:translateY(-4px);
    border-color:rgba(0,38,84,.18);
    box-shadow:none;
}

.instagram-media{
    border-radius:0;
}

.instagram-caption{
    border-radius:0;
}

@media(max-width:800px){
    .instagram-post{border-radius:0}
    .instagram-media{border-radius:0}
    .instagram-caption{border-radius:0}
    .instagram-post:hover{transform:none}
}

/* Garde-fous responsive pour les contenus chargés dynamiquement. */
.instagram-gallery,
.instagram-post,
.instagram-media,
.google-reviews-carousel,
.google-reviews-viewport,
.google-reviews-track,
.google-review-card{
    min-width:0;
    max-width:100%;
}

@media(max-width:800px){
    .instagram-gallery{
        grid-template-columns:minmax(0,1fr);
        width:100%;
    }

    .google-reviews-carousel,
    .google-reviews-viewport{
        width:100%;
    }

    .review-top,
    .review-card-footer{
        min-width:0;
    }

    .review-card-footer{
        flex-wrap:wrap;
    }
}

/* Safari mobile : réserve une vraie zone entre les boutons et Découvrir. */
@media(max-width:800px){
    .hero .buttons{
        margin-bottom:42px !important;
    }

    .hero .scroll{
        bottom:4px !important;
    }
}

@media(max-width:800px) and (max-height:700px){
    .hero .buttons{
        margin-bottom:32px !important;
    }

    .hero .scroll{
        bottom:2px !important;
    }
}

/* =========================================================
   BOUTONS HERO — SURCHARGE GLOBALE FINALE
========================================================= */
.hero-content .buttons .hero-action{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    width:auto;
    height:54px !important;
    min-height:54px !important;
    max-height:54px !important;
    margin:10px;
    padding:0 35px !important;
    border:2px solid #002654;
    box-sizing:border-box !important;
    background:transparent;
    color:#002654;
    font-size:16px;
    font-weight:600;
    line-height:1 !important;
    text-align:center;
    vertical-align:middle;
    box-shadow:none;
    transition:background .3s ease,border-color .3s ease,color .3s ease;
}

.hero-content .buttons .hero-action:hover{
    border-color:#002654;
    background:#002654;
    color:#fff;
}

.hero-content .buttons .hero-action-primary,
.hero-content .buttons .hero-action-primary:visited{
    border-color:#bb2129;
    background:#bb2129;
    color:#fff;
}

.hero-content .buttons .hero-action-primary:hover,
.hero-content .buttons .hero-action-primary:active{
    border-color:#a60d25;
    background:#a60d25;
    color:#fff;
}

@media(max-width:800px){
    .hero-content .buttons .hero-action{
        width:100%;
        margin:6px 0;
        padding:0 20px !important;
        font-size:clamp(12px,3.7vw,14px);
    }
}

@media(max-width:800px) and (max-height:700px){
    .hero-content .buttons .hero-action{
        height:42px !important;
        min-height:42px !important;
        max-height:42px !important;
        margin:4px 0;
        font-size:11px;
    }
}

.hero-content .buttons .btn-outline{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:54px;
    padding-top:0 !important;
    padding-bottom:0 !important;
    box-sizing:border-box;
    line-height:1.2;
}

.hero-content .buttons .btn-outline.btn-primary,
.hero-content .buttons .btn-outline.btn-primary:visited{
    border:2px solid #bb2129 !important;
    background:#bb2129 !important;
    color:#fff !important;
}

.hero-content .buttons .btn-outline.btn-primary:hover,
.hero-content .buttons .btn-outline.btn-primary:active{
    border-color:#a60d25 !important;
    background:#a60d25 !important;
    color:#fff !important;
}

.hero-content .buttons .btn-outline.btn-primary:focus-visible{
    border-color:#a60d25 !important;
    background:#a60d25 !important;
    color:#fff !important;
    outline:3px solid rgba(187,33,41,.28);
    outline-offset:3px;
}

@media(max-width:800px) and (max-height:700px){
    .hero-content .buttons .btn-outline{
        height:42px;
    }
}