/* =======================================================
   VARIABLES
======================================================= */

:root{

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

    --primary:#0F2747;
    --secondary:#3B82F6;

    --icon-light:#699CD3;

    --light:#F7F9FC;
    --white:#FFFFFF;

    --text:#253041;
    --text-light:#6B7280;

    --border:#E7ECF2;

    /* =======================================================
       LAYOUT
    ======================================================= */

    --container:1280px;

    --section-padding:120px;
    --section-padding-small:80px;
    --section-gap:70px;

    /* =======================================================
       TYPOGRAPHIE
    ======================================================= */

    --title-xl:4.5rem;
    --title-lg:2.3rem;
    --title-md:1.3rem;
    --text-size:1rem;

    /* =======================================================
       COMPOSANTS
    ======================================================= */

    --radius:18px;
    --card-radius:24px;

    --shadow:0 15px 35px rgba(15,39,71,.08);

    --transition:.35s ease;

    /* =======================================================
       FAQ
    ======================================================= */

    --faq-photo-width:1100px;
    --faq-photo-top:-40px;
    --faq-photo-right:-180px;

}


/* =======================================================
   RESET
======================================================= */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Manrope',sans-serif;

    color:var(--text);

    background:var(--light);

    line-height:1.6;

}

img{

    max-width:100%;

    display:block;

}

a{

    text-decoration:none;

}

ul{

    list-style:none;

}

.container{

    width:min(94vw,1800px);

    margin:auto;

}

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

.header{

    background:var(--white);

    border-bottom:1px solid var(--border);

}

.header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:90px;

}

.logo img{

    width:185px;

}

.navbar{

    display:flex;

    align-items:center;

    gap:38px;

}

.navbar a{

    color:var(--text);

    font-weight:600;

    transition:var(--transition);

}

.navbar a:hover{

    color:var(--secondary);

}

.menu-toggle{

    display:none;

    border:none;

    background:none;

    font-size:2rem;

    cursor:pointer;

}

/* =======================================================
   HEADER AU SCROLL
======================================================= */

.header{

    position:sticky;

    top:0;

    z-index:1000;

    transition:
        box-shadow .3s ease,
        background-color .3s ease;

}

.header.scrolled{

    box-shadow:0 8px 30px rgba(15,39,71,.12);

}

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

.hero{

    position:relative;

    padding:70px 0 120px;

    min-height:750px;

    overflow:hidden;

}

.hero .container{

    position:relative;

}

/* Bloc contenant tout le texte */

.hero-content{

    position:relative;

    width:clamp(560px,42%,760px);

    z-index:2;

}

/* =======================================================
   BADGE
======================================================= */

.hero-badge{

    position:relative;

    width:100%;

    margin-top:20px;

    padding:14px 0;

    overflow:hidden;

    background:linear-gradient(

        to right,

        rgba(18,58,108,.92) 0%,

        rgba(18,58,108,.92) 100%

    );

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    z-index:20;

}


/* =======================================================
   DÉGRADÉ GAUCHE
======================================================= */

.hero-badge::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:180px;
    height:100%;

    pointer-events:none;

    z-index:2;

    background:linear-gradient(

        to right,

        rgba(18,58,108,.95) 0%,

        rgba(18,58,108,.82) 25%,

        rgba(18,58,108,.55) 50%,

        rgba(18,58,108,.20) 75%,

        rgba(18,58,108,0) 100%

    );

}


/* =======================================================
   DÉGRADÉ DROITE
======================================================= */

.hero-badge::after{

    content:"";

    position:absolute;

    top:0;
    right:0;

    width:180px;
    height:100%;

    pointer-events:none;

    z-index:2;

    background:linear-gradient(

        to left,

        rgba(18,58,108,.95) 0%,

        rgba(18,58,108,.82) 25%,

        rgba(18,58,108,.55) 50%,

        rgba(18,58,108,.20) 75%,

        rgba(18,58,108,0) 100%

    );

}


/* =======================================================
   TEXTE DÉFILANT
======================================================= */

.hero-badge-track{

    display:flex;

    width:max-content;

    white-space:nowrap;

    animation:defilement 20s linear infinite;

    position:relative;

    z-index:1;

}


.hero-badge-track span{

    flex-shrink:0;

    padding-right:80px;

    color:#fff;

    font-size:.95rem;

    font-weight:600;

    letter-spacing:.5px;

}

/* ==========================
   TITRE
========================== */

.hero-title{

    position:relative;

}

.hero-title h1{

    font-size:4.5rem;

    line-height:1;

    color:var(--primary);

}

.ligne1{

    display:block;

}

.ligne2{

    display:block;

    margin-left:70px;

}

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

.hero-text{

    position:relative;

    margin-top:70px;

    width:100%;

}

.hero-slogan{

    font-size:1.3rem;

    font-weight:300;

    font-style:italic;

    color:var(--primary);

    letter-spacing:.3px;

    line-height:1.7;

}

.hero-slogan-line2{

    display:block;

    margin-top:8px;

}

.hero-description{

    font-size:1.15rem;

    line-height:1.8;

    color:var(--text-light);

    margin-top:20px;

}


/* =======================================================
   PHOTO
======================================================= */

.hero-photo-wrapper{

    position:absolute;

    z-index:0;

    width:clamp(760px,52vw,1300px);

    top:clamp(0px,.5vw,10px);

    right:0;

    transform:translateX(18%);

    pointer-events:none;

    user-select:none;

}

/* =======================================================
   BANDE DE LECTURE
======================================================= */

.hero-reading-band{

    position:absolute;

    left:0;

    top:325px;

    width:0;

    height:160px;

    opacity:0;

    pointer-events:none;

    z-index:1;

    background:linear-gradient(

        to right,

        rgba(247,249,252,1) 0%,

        rgba(247,249,252,.98) 18%,

        rgba(247,249,252,.88) 38%,

        rgba(247,249,252,.60) 58%,

        rgba(247,249,252,.25) 78%,

        rgba(247,249,252,0) 100%

    );

    transition:
        width .45s ease,
        opacity .45s ease;

}

.hero-photo{

    width:100%;

    height:auto;

    display:block;

    display:block;

    margin-left:1px;

}

/* =======================================================
   DÉGRADÉ
======================================================= */

.hero-photo-wrapper::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:110px;          /* à ajuster */

    height:100%;

    z-index:2;

    pointer-events:none;
    
    background:linear-gradient(

        to right,

        #f7f9fc 0%,

        rgba(247,249,252,.95) 18%,

        rgba(247,249,252,.55) 55%,

        rgba(247,249,252,0) 100%

    );

}

/* =======================================================
   MASQUE DROIT
======================================================= */

.hero-photo-wrapper::after{

    content:"";

    position:absolute;

    top:0;

    right:0;

    width:0;

    height:100%;

    opacity:0;

    pointer-events:none;

    z-index:2;

    background:linear-gradient(

        to left,

        #f7f9fc 0%,

        rgba(247,249,252,1) 18%,

        rgba(247,249,252,.95) 40%,

        rgba(247,249,252,.65) 70%,

        rgba(247,249,252,0) 100%

    );

}

/* =======================================================
   BOUTONS
======================================================= */

.hero-buttons{

    display:flex;

    gap:18px;

    margin-top:90px;

}

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 30px;

    border-radius:16px;

    font-weight:700;

    text-decoration:none;

    transition:var(--transition);

}

.btn-primary{

    background:var(--primary);

    color:#fff;

}

.btn-primary:hover{

    transform:translateY(-3px);

}

.btn-secondary{

    background:#fff;

    color:var(--primary);

    border:2px solid var(--primary);

}

.btn-secondary:hover{

    transform:translateY(-3px);

}

/* =======================================================
   ANIMATIONS
======================================================= */

@keyframes defilement{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}

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

.info-cards{

    position:relative;

    margin-top:clamp(-100px,-8vw,-140px);

    z-index:20;

}

.info-grid{

    display:grid;

    grid-template-columns:repeat(4,minmax(clamp(200px,21vw,240px),1fr));

    gap:clamp(18px,2vw,32px);

}

/* =======================================================
   CARTE
======================================================= */

.info-card{

    background:#fff;

    background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);

    border-radius:var(--card-radius);

    padding:
    clamp(26px,3vw,55px)
    clamp(18px,2vw,32px);

    text-align:center;

    box-shadow:
        0 3px 8px rgba(0,0,0,.05),
        0 12px 25px rgba(0,0,0,.08),
        0 30px 50px rgba(0,0,0,.12);

    border:1px solid rgba(18,58,108,.12);

    transition:all .35s ease;

    cursor:default;

}

/* =======================================================
   EFFET AU SURVOL
======================================================= */

.info-card:hover{

    transform:translateY(-10px);

    box-shadow:
        0 8px 20px rgba(0,0,0,.05),
        0 25px 50px rgba(0,0,0,.12);

}

/* =======================================================
   ICÔNE
======================================================= */

.info-icon{

    width:72px;

    height:72px;

    margin:0 auto 22px;

    border-radius:50%;

    background:#dfeeff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:2rem;

    color:var(--primary);

    transition:.35s;

}

.info-card:hover .info-icon{

    transform:scale(1.12);

}

/* =======================================================
   TITRE
======================================================= */

.info-card h1{

    font-size:1.2rem;

    color:var(--primary);

    margin-bottom:12px;

}

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

.info-card p{

    color:var(--text-light);

    line-height:1.7;

    font-size:.98rem;

}

/* =======================================================
   ÉQUIPEMENTS
======================================================= */

.equipements{

    padding:var(--section-padding) 0;

}

.equipements .container{

    max-width:none;

}

/* =======================================================
   LAYOUT
======================================================= */

.equipements-layout{

    display:grid;

    grid-template-columns:clamp(320px,24vw,460px) 1fr;

    gap:clamp(40px,4vw,80px);

    align-items:start;

}

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

.equipements-content{

    position:sticky;

    top:120px;

}

.equipements-content h2{

    margin-bottom:18px;
    font-size:var(--title-lg);

}

.section-line{

    width:70px;

    height:4px;

    border-radius:10px;

    background:var(--primary);

    margin-bottom:30px;

}

.equipements-content > p{

    line-height:1.8;

    color:var(--text-light);

    margin-bottom:40px;

}

/* =======================================================
   CARTE HYGIÈNE
======================================================= */

.equipements-info{

    margin-top:50px;

    padding:15px;

    background:#fff;

    border-radius:var(--card-radius);

    position:relative;

    left:-12px;

    border:1.5px solid var(--primary);

    box-shadow:
    0 2px 6px rgba(0,0,0,.04),
    0 15px 30px rgba(0,0,0,.10),
    0 40px 70px rgba(0,0,0,.18);

}

/* =======================================================
   EN-TÊTE
======================================================= */

.equipements-info-top{

    display:flex;

    align-items:center;

    gap:16px;

}

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

.equipements-info-text{

    display:flex;

    flex-direction:column;

    gap:4px;

}

/* =======================================================
   ICÔNE
======================================================= */

.equipements-info-icon{

    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    border-radius:50%;

    background:#eef5ff;

}

.equipements-info-icon i{

    font-size:1.7rem;

    color:var(--icon-light);

}

/* =======================================================
   TITRE
======================================================= */

.equipements-info-top h3{

    margin:0;

    color:var(--primary);

    font-size:1.15rem;

    font-weight:700;

}

/* =======================================================
   DESCRIPTION
======================================================= */

.equipements-description{

    margin:0;

    color:var(--text-light);

    font-size:.95rem;

    line-height:1.45;

}

/* =======================================================
   GRILLE ÉQUIPEMENTS
======================================================= */

.equipements-grid{

    display:grid;

    grid-template-columns:repeat(2,minmax(320px,1fr));

    gap:clamp(24px,2vw,40px);

}

/* =======================================================
   CARTE
======================================================= */

.equipement-card{

    background:#fff;

    border-radius:var(--card-radius);

    overflow:hidden;

    border:1px solid rgba(18,58,108,.08);

    box-shadow:
        0 4px 10px rgba(0,0,0,.05),
        0 18px 35px rgba(0,0,0,.10);

    transition:.35s;

}

.equipement-card:hover{

    transform:translateY(-8px);

    box-shadow:
        0 10px 18px rgba(0,0,0,.08),
        0 30px 55px rgba(0,0,0,.16);

}

/* =======================================================
   PHOTO
======================================================= */

.equipement-card img{

    width:100%;

    height:clamp(220px,15vw,300px);

    object-fit:cover;

    display:block;

}

/* =======================================================
   CONTENU
======================================================= */

.equipement-card-content{

    padding:clamp(18px,2vw,28px);

}

/* =======================================================
   TITRE
======================================================= */

.equipement-card-content h3{

    color:var(--primary);

    font-size:1.5rem;        /* Avant : 1.35rem */

    margin-bottom:8px;        /* Avant : 14px */

    line-height:1.25;

}

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

.equipement-card-content p{

    color:var(--text-light);

    font-size:clamp(.92rem,.9rem + .15vw,1rem);
    
    line-height:1.5;

    margin:0;

}

/* =======================================================
   LIGHTBOX
======================================================= */

.lightbox{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.88);

    backdrop-filter:blur(5px);

    -webkit-backdrop-filter:blur(5px);

    z-index:9999;

    cursor:pointer;

}

.lightbox img{

    max-width:90%;

    max-height:90%;

    border-radius:20px;

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

    cursor:default;

}

/* =======================================================
   FLÈCHE LIGHTBOX
======================================================= */

.lightbox-next{

    position:absolute;

    right:40px;

    top:50%;

    transform:translateY(-50%);

    width:52px;

    height:52px;

    border-radius:50%;

    background:rgba(255,255,255,.18);

    backdrop-filter:blur(8px);

    display:none;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    transition:.25s;

    z-index:20;

}

.lightbox-next:hover{

    background:rgba(255,255,255,.30);

}

.lightbox-next i{

    color:#fff;

    font-size:1.4rem;

}

/* =======================================================
   BOUTON FERMER
======================================================= */

.lightbox-close{

    position:absolute;

    top:30px;

    right:40px;

    font-size:3rem;

    color:#fff;

    cursor:pointer;

    transition:.3s;

    user-select:none;

}

.lightbox-close:hover{

    transform:scale(1.15);

    color:#d8e7ff;

}

/* =======================================================
   PHOTO CLIQUABLE
======================================================= */

.equipement-image{

    cursor:pointer;

    transition:.35s;

}

.equipement-image:hover{

    transform:scale(1.03);

}

/* =======================================================
   NOS TARIFS
======================================================= */

.tarifs{

    padding:40px 0 var(--section-padding);

    background:#f7f9fc;

    position:relative;

}

/* =======================================================
   LAYOUT
======================================================= */

.tarifs-layout{

    display:flex;

    align-items:flex-start;

    gap:60px;

}

/* =======================================================
   COLONNE GAUCHE
======================================================= */

.tarifs-content{

    width:280px;

    flex-shrink:0;

}

.tarifs-content h2{

    font-size:var(--title-lg);

    color:var(--primary);

    margin-bottom:30px;

}

.tarifs-content p{

    color:var(--text-light);

    line-height:1.8;

}

/* =======================================================
   GRILLE TARIFS
======================================================= */

.tarifs-grid{

    flex:1;

    display:flex;

    gap:22px;

    align-items:stretch;

}

/* =======================================================
   CARTE
======================================================= */

.tarif-card{

    flex:1;

    background:#fff;

    border-radius:var(--card-radius);

    padding:10px 5px;

    text-align:center;

    border:0px solid rgba(18,58,108,.08);

    border:2px solid var(--primary);

    box-shadow:
        0 4px 10px rgba(0,0,0,.05),
        0 18px 35px rgba(0,0,0,.10);

    transition:.35s;

}

.tarif-card:hover{

    transform:translateY(-8px);

    box-shadow:
        0 10px 18px rgba(0,0,0,.08),
        0 30px 55px rgba(0,0,0,.16);

}

/* =======================================================
   TITRE
======================================================= */

.tarif-card h3{

    color:var(--primary);

    font-size:1.1rem;

    font-weight:600;

    margin-bottom:26px;

}

.tarif-capacite{

    color:var(--icon-light);

    font-size:1.4rem;

    font-weight:600;

    margin-bottom:26px;

}

/* =======================================================
   ICÔNE
======================================================= */

.tarif-icon{

    width:95px;

    height:100px;

    margin:0 auto 26px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#fff;  /* Même bleu que les Info Cards */

    border:0px solid var(--primary);

    border-radius:16px;

    box-shadow:
    0 1px 2px rgba(255,255,255,.8) inset,
    0 2px 6px rgba(0,0,0,.05),
    0 8px 18px rgba(0,0,0,.10);

}

.tarif-icon img{

    width:70px;

    height:70px;

    object-fit:contain;

    display:block;

}

/* =======================================================
   PRIX
======================================================= */

.tarif-price{

    font-size:2rem;

    font-weight:700;

    color:var(--primary);

}

/* =======================================================
   DÉGRADÉ BAS TARIFS
======================================================= */

.tarifs{

    position:relative;

    background:#f7f9fc;

}

.tarifs::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:120px;

    pointer-events:none;

    background:linear-gradient(

        to bottom,

        rgba(247,249,252,0) 0%,

        rgba(247,249,252,.08) 20%,

        rgba(247,249,252,.22) 40%,

        rgba(247,249,252,.48) 60%,

        rgba(247,249,252,.78) 80%,

        rgba(255,255,255,1) 100%

    );

}

/* =======================================================
   COMMENT ÇA MARCHE
======================================================= */

.fonctionnement{

     padding:
        clamp(20px,2vw,40px)
        0
        var(--section-padding);

    background:#fff;

}

/* =======================================================
   LAYOUT
======================================================= */

.fonctionnement-layout{

    display:flex;

    align-items:flex-start;

    gap:70px;

}

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

.fonctionnement-content{

    width:300px;

    flex-shrink:0;

}

.fonctionnement-content h2{

    font-size:var(--title-lg);

    color:var(--primary);

    margin-bottom:18px;

}

.fonctionnement-content p{

    color:var(--text-light);

    line-height:1.8;

}

/* =======================================================
   FRISE
======================================================= */

.fonctionnement-timeline{

    flex:1;

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:25px;

    position:relative;

    top:20px;

}

/* =======================================================
   ÉTAPE
======================================================= */

.step{

    flex:1;

    text-align:center;

}

/* =======================================================
   NUMÉRO
======================================================= */

.step-number{

    width:60px;

    height:60px;

    margin:0 auto 18px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#fff;

    border:2px solid var(--primary);

    color:var(--primary);

    font-size:1.4rem;

    font-weight:700;

    box-shadow:
        0 4px 12px rgba(0,0,0,.08);

}

/* =======================================================
   ICÔNE
======================================================= */

.step-icon{

    width:95px;

    height:95px;

    margin:0 auto 22px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#fff;

    border:2px solid var(--primary);

    border-radius:var(--radius);

    box-shadow:
        0 4px 12px rgba(0,0,0,.08);

}

.step-icon img{

    width:65px;

    height:65px;

    object-fit:contain;

}

/* =======================================================
   TITRE
======================================================= */

.step h3{

    color:var(--primary);

    font-size:1.2rem;

    margin-bottom:10px;

}

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

.step p{

    color:var(--text-light);

    line-height:1.6;

    font-size:.95rem;

}

/* =======================================================
   FLÈCHE
======================================================= */

.step-arrow{

    display:flex;

    justify-content:center;

    align-items:center;

    align-self:center;

    font-size:2rem;

    color:var(--primary);

    margin-top:-80px;

}

/* =======================================================
   FAQ
======================================================= */

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

.faq{

    position:relative;

    overflow:hidden;

    padding:var(--section-padding) 0;

    isolation:isolate;

    background:
        linear-gradient(

            90deg,

            rgba(255,255,255,1) 0%,

            rgba(255,255,255,1) 26%,

            rgba(255,255,255,.98) 34%,

            rgba(255,255,255,.92) 42%,

            rgba(255,255,255,.75) 50%,

            rgba(255,255,255,.45) 58%,

            rgba(255,255,255,.15) 66%,

            rgba(255,255,255,0) 74%

        ),

        linear-gradient(

            180deg,

            rgba(255,255,255,.70) 0%,

            rgba(255,255,255,.15) 12%,

            rgba(255,255,255,0) 18%

        ),

        linear-gradient(

            0deg,

            rgba(255,255,255,.95) 0%,

            rgba(255,255,255,.45) 6%,

            rgba(255,255,255,0) 12%

        ),

        url("../images/facade 3.webp");

    background-repeat:no-repeat;

    background-position:right center;

    background-size:contain;

}

/* =======================================================
   LAYOUT
======================================================= */

.faq-layout{

    display:grid;

    grid-template-columns:clamp(520px,38vw,760px) 1fr;

    align-items:start;

    min-height:720px;

}

/* =======================================================
   COLONNE GAUCHE
======================================================= */

.faq-left{

    position:relative;

    display:flex;

    flex-direction:column;

    width:100%;

    max-width:760px;

    padding-right:40px;

    margin-top:-100px;

}

.faq-left h2{

    font-size:var(--title-lg);

    color:var(--primary);

    margin-bottom:18px;

}

.faq-left p{

    color:var(--text-light);

    line-height:1.8;

    margin-bottom:35px;

}

/* =======================================================
   ACCORDÉON
======================================================= */

.faq-accordion{

    display:flex;

    flex-direction:column;

    gap:18px;

}

/* =======================================================
   CARTE
======================================================= */

.faq-item{

    position:relative;

    background:#fff;

    border-radius:var(--card-radius);

    border:1px solid rgba(18,58,108,.10);

    box-shadow:

        0 4px 10px rgba(0,0,0,.05),

        0 15px 30px rgba(0,0,0,.10);

    overflow:hidden;

    transition:var(--transition);

}

.faq-item:hover{

    transform:translateY(-3px);

    box-shadow:

        0 8px 18px rgba(0,0,0,.08),

        0 25px 45px rgba(0,0,0,.14);

}

/* =======================================================
   QUESTION
======================================================= */

.faq-question{

    width:100%;

    padding:20px 24px;

    border:none;

    background:#fff;

    display:flex;

    justify-content:space-between;

    align-items:center;

    cursor:pointer;

    color:var(--primary);

    font-size:1.05rem;

    font-weight:600;

}

.faq-question i{

    color:var(--primary);

    transition:.30s;

}

/* =======================================================
   RÉPONSE
======================================================= */

.faq-answer{

    max-height:0px;

    overflow:hidden;

    padding:5px 28px;

    transition:
        max-height .35s ease,
        padding .35s ease;

}

.faq-item.active .faq-answer{

    max-height:250px;

    padding:0 28px 24px;

}

.faq-answer p{

    margin:0;

    color:var(--text-light);

    line-height:1.8;

}

/* =======================================================
   BESOIN D'AIDE
======================================================= */

.faq-help{

    margin-top:40px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

}

/* =======================================================
   TITRE
======================================================= */

.faq-help-title{

    margin:0;

    font-size:1.5rem;

    font-weight:700;

    color:var(--primary);

}

/* =======================================================
   BOUTON
======================================================= */

.faq-help-button{

    flex-shrink:0;

}

/* =======================================================
   ANIMATION ACCORDÉON
======================================================= */

@keyframes faqFade{

    from{

        opacity:0;

        transform:translateY(-8px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

.contact{

    padding:
        clamp(20px,2vw,40px)
        0
        var(--section-padding);

    background:#fff;

    position:relative;

}

/* =======================================================
   BOUTON ITINÉRAIRE
======================================================= */

.contact-button{

    margin-top:40px;

    padding:12px 26px;

    font-size:1rem;

    width:fit-content;

    border-radius:14px;

}

/* =======================================================
   LAYOUT
======================================================= */

.contact-layout{

    display:grid;

    grid-template-columns:minmax(700px,2fr) minmax(340px,420px);

    gap:clamp(40px,5vw,120px);

    align-items:center;

}

/* =======================================================
   INFORMATIONS
======================================================= */

.contact-info{

    display:flex;

    flex-direction:column;

    gap:22px;

    margin-top:-100px;

}

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

.contact-item{

    display:flex;

    align-items:flex-start;

    gap:18px;

}

/* =======================================================
   ICÔNES
======================================================= */

.contact-item i{

    width:24px;

    font-size:1.2rem;

    color:var(--primary);

    text-align:center;

    margin-top:4px;

    flex-shrink:0;

}

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

.contact-item p{

    margin:0;

    line-height:1.7;

    color:var(--text);

}

/* =======================================================
   MAP
======================================================= */

.contact-map{

    position:relative;

    overflow:hidden;

    width:100%;

    max-width:1000px;

    height:600px;

    border-radius:28px;

}

.contact-map iframe{

    width:100%;

    height:100%;

    border:0;

    display:block;

}

/* =======================================================
   VIGNETTAGE
======================================================= */

.contact-map::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    pointer-events:none;

    background:

        radial-gradient(circle at top left,
            rgba(18,58,108,.10) 0%,
            transparent 18%),

        radial-gradient(circle at top right,
            rgba(18,58,108,.10) 0%,
            transparent 18%),

        radial-gradient(circle at bottom left,
            rgba(18,58,108,.10) 0%,
            transparent 18%),

        radial-gradient(circle at bottom right,
            rgba(18,58,108,.10) 0%,
            transparent 18%);

}

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

.footer{

    background:var(--primary);

    padding:40px 0;

}

/* =======================================================
   LAYOUT
======================================================= */

.footer-content{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

/* =======================================================
   GAUCHE
======================================================= */

.footer-left{

    display:flex;

    align-items:center;

    gap:20px;

}

.footer-logo{

    height:52px;

    width:auto; 

}

.footer-left p{

    margin:0px;

    color:#fff;

}

/* =======================================================
   DROITE
======================================================= */

.footer-right{

    display:flex;

    align-items:flex-end;

    gap:16px;

}

.footer-right span{

    color:rgba(255,255,255,.40);

}

.footer-right a{

    color:#fff;

    text-decoration:none;

    transition:.30s;

}

.footer-right a:hover{

    color:var(--secondary);

}

/* =======================================================
   ANIMATION AU SCROLL
======================================================= */

.reveal{

    opacity:0;

    transform:translateY(40px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.reveal.visible{

    opacity:1;

    transform:translateY(0);

}

/* =======================================================
   BOUTON RETOUR EN HAUT
======================================================= */

#backToTop{

    position:fixed;

    right:35px;

    bottom:35px;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    font-size:1.2rem;

    cursor:pointer;

    box-shadow:0 10px 25px rgba(0,0,0,.18);

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:.35s ease;

    z-index:999;

}

#backToTop:hover{

    background:var(--secondary);

    transform:translateY(-3px);

}

#backToTop.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}


/* =======================================================
   RESPONSIVE HEADER TABLETTE
   (600 px → 819 px)
======================================================= */

@media (min-width:600px) and (max-width:819px){

    .header .container{

        height:75px;

    }

    .logo img{

        width:155px;

    }

    .navbar{

        gap:24px;

    }

    .navbar a{

        font-size:.95rem;

    }

}



/* =======================================================
   RESPONSIVE HEADER MOBILE
   (≤ 599 px)
======================================================= */

@media (max-width:599px){

    .header .container{

        height:75px;

    }

    .logo img{

        width:155px;

    }

    .navbar{

        position:fixed;

        top:75px;

        left:-100%;

        width:100%;

        height:calc(100vh - 75px);

        background:#fff;

        display:flex;

        flex-direction:column;

        justify-content:center;

        align-items:center;

        gap:35px;

        transition:left .35s ease;

        z-index:999;

    }

    .navbar.active{

        left:0;

    }

    .navbar a{

        font-size:1.4rem;

    }

    .menu-toggle{

        display:flex;

        align-items:center;

        justify-content:center;

        width:48px;

        height:48px;

        color:var(--primary);

        background:none;

        border:none;

        cursor:pointer;

        font-size:1.8rem;

    }

}

/* =======================================================
   RESPONSIVE HERO DESKTOP
   (1000 px → 1300 px)
======================================================= */

@media (min-width:1000px) and (max-width:1300px){

    /* =======================================================
       PHOTO
    ======================================================= */

    .hero-photo-wrapper{

        top:clamp(
            10px,
            calc((1300px - 100vw) * .42),
            120px
        );

    }

}


/* =======================================================
   RESPONSIVE HERO
   (≤ 1000 px)
======================================================= */

@media (max-width:1000px){

    /* =======================================================
       PHOTO
    ======================================================= */

    .hero-photo-wrapper{

        top:120px;

        transform:translateX(
            clamp(
                18%,
                calc(18% + ((1000px - 100vw) * .06)),
                34%
            )
        );

    }

}

/* =======================================================
   RESPONSIVE HERO
   RECADRAGE
   (580 px → 1000 px)
======================================================= */

@media (min-width:580px) and (max-width:1000px){

    /* =======================================================
       PHOTO
    ======================================================= */

    .hero-photo-wrapper{

        /* La descente est terminée */

        top:120px;

    }
/* =======================================================
   HALO DU SLOGAN
======================================================= */

.hero-reading-band{

    position:absolute;

    left:30px;

    top:260px;

    width:520px;

    height:130px;

    pointer-events:none;

    z-index:2;

    opacity:1;

    filter:blur(18px);

    background:linear-gradient(

        to right,

        rgba(247,249,252,1) 0%,

        rgba(247,249,252,1) 32%,

        rgba(247,249,252,1) 55%,

        rgba(247,249,252,.92) 72%,

        rgba(247,249,252,.70) 86%,

        rgba(247,249,252,.35) 95%,

        rgba(247,249,252,0) 100%


    );

}

}

/* =======================================================
   RESPONSIVE HERO
   MOBILE
   (200 px → 580 px)
======================================================= */

@media (max-width:580px){

    /* =======================================================
       CONTENU
    ======================================================= */

    .hero-content{

        width:100%;

    }

    /* =======================================================
       TITRE
    ======================================================= */

    .hero-title h1{

        font-size:clamp(2.8rem, 10vw, 4.5rem);

        line-height:.92;

        margin-top:-20px;

    }

    .ligne1{

        display:block;

    }

    .ligne2{

        display:block;

        white-space:nowrap;

        margin-left:20px;

    }

    .ligne2 span:last-child{

        margin-left:28px;

    }

    /* =======================================================
       SLOGAN
    ======================================================= */

    .hero-text{

        margin-top:40px;

    }

    .hero-slogan{

        font-size:clamp(0.98rem,4vw,2rem);

        line-height:1.6;

    }

    /* =======================================================
       PHOTO
    ======================================================= */

    .hero-photo-wrapper{

        top:170px;                 /* ← à régler */

        right:200px;

        transform:translateX(70%); /* ← à régler */

        width:clamp(520px,145vw,760px);

    }

    /* =======================================================
       HALO DU SLOGAN
    ======================================================= */

    .hero-reading-band{

        position:absolute;

        left:clamp(10px,4vw,30px);

        top:clamp(245px,42vw,260px);

        width:clamp(300px,82vw,520px);

        height:clamp(90px,20vw,130px);

        pointer-events:none;

        z-index:2;

        filter:blur(18px);

        background:linear-gradient(

            to right,

            rgba(247,249,252,1) 0%,

            rgba(247,249,252,1) 32%,

            rgba(247,249,252,1) 55%,

            rgba(247,249,252,.92) 72%,

            rgba(247,249,252,.70) 86%,

            rgba(247,249,252,.35) 95%,

            rgba(247,249,252,0) 100%

        );

    }

    /* =======================================================
       BOUTONS
    ======================================================= */

    .hero-buttons{

        gap:10px;

        margin-top:370px;

    }

    .btn{

        padding:

            clamp(11px,2.6vw,15px)

            clamp(16px,5vw,26px);

        font-size:clamp(1rem,4vw,2rem);

        border-radius:14px;

    }

}

/* =======================================================
   RESPONSIVE INFO CARDS TABLETTE
   (600 px → 1130 px)
======================================================= */

@media (min-width:600px) and (max-width:1130px){

    .info-grid{

        grid-template-columns:repeat(2, minmax(260px, 340px));

        justify-content:center;

        gap:35px;

    }

    .info-card{

        padding:35px 28px;

    }

    .info-icon{

        width:68px;

        height:68px;

        font-size:1.8rem;

    }

    .info-card h3{

        font-size:1.15rem;

    }

    .info-card p{

        font-size:.95rem;

    }

}

/* =======================================================
   RESPONSIVE INFO CARDS MOBILE
   (≤ 599 px)
======================================================= */

@media (max-width:599px){

    .info-cards{

        margin-top:-60px;

    }

    .info-grid{

        grid-template-columns:1fr;

        justify-content:center;

        gap:25px;

    }

   .info-card{

    max-width:380px;

    width:100%;

    margin:0 auto;

    padding:30px 24px;

    box-sizing:border-box;

    min-height:280px;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

}

    .info-icon{

        width:64px;

        height:64px;

        font-size:1.7rem;

    }

   .info-card h3{

    min-height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

}

.info-card p{

    flex-grow:1;

    display:flex;

    align-items:flex-start;

    justify-content:center;

    text-align:center;

}

    .info-card p{

        font-size:.95rem;

    }

}

/* =======================================================
   RESPONSIVE ÉQUIPEMENTS TABLETTE
   (600 px → 1130 px)
======================================================= */

@media (min-width:600px) and (max-width:1130px){

    /* =======================================================
       LAYOUT
    ======================================================= */

    .equipements-layout{

        display:flex;

        flex-direction:column;

        gap:50px;

    }

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

    .equipements-content{

        position:static;

        width:100%;

        text-align:center;

    }

    .equipements-content h2{

        text-align:center;

    }

    .equipements-content .section-line{

        margin:0 auto 30px;

    }

    .equipements-content > p{

        margin:0 auto 40px;

    }

    /* =======================================================
       TEXTE + CARTE HYGIÈNE
    ======================================================= */

    .equipements-content-top{

        display:grid;

        grid-template-columns:1fr 320px;

        gap:40px;

        align-items:center;

        text-align:left;

    }

    .equipements-info{

        margin-top:0;

        left:0;

    }

    /* =======================================================
       GRILLE ÉQUIPEMENTS
    ======================================================= */

    .equipements-grid{

        display:grid;

        grid-template-columns:repeat(2,minmax(280px,1fr));

        gap:28px;

    }

}

/* =======================================================
   RESPONSIVE ÉQUIPEMENTS MOBILE
   (≤ 599 px)
======================================================= */

@media (max-width:599px){

    /* =======================================================
       LAYOUT
    ======================================================= */

    .equipements-layout{

        display:flex;

        flex-direction:column;

        gap:40px;

    }

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

    .equipements-content{

        position:static;

        width:100%;

        text-align:center;

    }

    .equipements-content h2{

        text-align:center;

    }

    .equipements-content .section-line{

        margin:0 auto 30px;

    }

    .equipements-content > p{

        margin:0 auto 30px;

        max-width:420px;

    }

    /* =======================================================
       TEXTE + HYGIÈNE
    ======================================================= */

    .equipements-content-top{

        display:flex;

        flex-direction:column;

        gap:30px;

    }

    /* =======================================================
       CARTE HYGIÈNE
    ======================================================= */

    .equipements-info{

        width:260px;

        max-width:100%;

        margin:0 auto;

        left:0;

        padding:18px;

        box-sizing:border-box;

    }

    .equipements-info-top{

        display:flex;

        align-items:center;

        justify-content:center;

        gap:16px;

    }

    .equipements-info-text{

        display:flex;

        flex-direction:column;

        gap:4px;

        text-align:left;

    }

    /* =======================================================
       GRILLE ÉQUIPEMENTS
    ======================================================= */

    .equipements-grid{

        display:flex;

        flex-direction:column;

        align-items:center;

        gap:24px;

    }

    /* =======================================================
       CARTES
    ======================================================= */

    .equipement-card{

        width:min(100%,420px);

    }

    /* =======================================================
       IMAGE
    ======================================================= */

    .equipement-card img{

        display:block;

        width:100%;

        height:220px;

        object-fit:cover;

    }

    /* =======================================================
       CONTENU
    ======================================================= */

    .equipement-card-content{

        text-align:center;

    }

}

/* =======================================================
   RESPONSIVE TARIFS TABLETTE
   (600 px → 1100 px)
======================================================= */

@media (min-width:600px) and (max-width:1100px){

    /* =======================================================
       LAYOUT
    ======================================================= */

    .tarifs-layout{

        flex-direction:column;

        gap:50px;

    }

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

    .tarifs-content{

        width:100%;

        text-align:center;

    }

    /* =======================================================
       GRILLE TARIFS
    ======================================================= */

    .tarifs-grid{

        display:grid;

        grid-template-columns:repeat(6,minmax(0,1fr));

        gap:18px;

        width:100%;

        max-width:850px;

        margin:0 auto;

    }

    /* =======================================================
       CARTES
    ======================================================= */

    .tarif-card{

        width:100%;

        min-width:0;

        min-height:145px;

        padding:20px 10px;

        display:flex;

        flex-direction:column;

        justify-content:center;

    }

    /* =======================================================
       TITRE
    ======================================================= */

    .tarif-card h3{

        font-size:1.05rem;

        margin-bottom:18px;

    }

    /* =======================================================
       CAPACITÉ
    ======================================================= */

    .tarif-capacite{

        font-size:1.2rem;

        margin-bottom:18px;

    }

    /* =======================================================
       PRIX
    ======================================================= */

    .tarif-price{

        font-size:1.75rem;

    }

    /* =======================================================
       DISPOSITION EN TRIANGLE
    ======================================================= */

    .tarif-card:nth-child(1){

        grid-column:1 / 3;

    }

    .tarif-card:nth-child(2){

        grid-column:3 / 5;

    }

    .tarif-card:nth-child(3){

        grid-column:5 / 7;

    }

    .tarif-card:nth-child(4){

        grid-column:2 / 4;

    }

    .tarif-card:nth-child(5){

        grid-column:4 / 6;

    }

}

/* =======================================================
   RETOUR AU MODE DESKTOP
   TARIFS
   (1101 px et +)
======================================================= */

@media (min-width:1101px){

    .tarif-card{

        grid-column:auto;

    }

}

/* =======================================================
   RESPONSIVE TARIFS MOBILE
   (≤ 599 px)
======================================================= */

@media (max-width:599px){

    /* =======================================================
       LAYOUT
    ======================================================= */

    .tarifs-layout{

        display:flex;

        flex-direction:column;

        gap:40px;

    }

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

    .tarifs-content{

        width:100%;

        text-align:center;

    }

    /* Centre également la ligne décorative */

    .tarifs-content .section-line{

        margin:0 auto 30px;

    }

    /* =======================================================
       GRILLE TARIFS
    ======================================================= */

    .tarifs-grid{

        display:grid;

        grid-template-columns:1fr;

        gap:22px;

        width:100%;

    }

    /* =======================================================
       CARTE
    ======================================================= */

    .tarif-card{

        width:100%;

        max-width:340px;

        margin:0 auto;

        padding:22px 20px;

    }

    /* =======================================================
       TITRE
    ======================================================= */

    .tarif-card h3{

        font-size:1.15rem;

        margin-bottom:18px;

    }

    /* =======================================================
       CAPACITÉ
    ======================================================= */

    .tarif-capacite{

        font-size:1.25rem;

        margin-bottom:20px;

    }

    /* =======================================================
       PRIX
    ======================================================= */

    .tarif-price{

        font-size:2rem;

    }

}

/* =======================================================
   RESPONSIVE COMMENT ÇA MARCHE TABLETTE
   (600 px → 819 px)
======================================================= */

@media (min-width:600px) and (max-width:819px){

    .fonctionnement{

        padding:
            20px
            0
            var(--section-padding);

    }

    .fonctionnement-layout{

        gap:40px;

    }

    .fonctionnement-content{

        width:240px;

    }

    .fonctionnement-content h2{

        font-size:2.2rem;

    }

    .fonctionnement-timeline{

        gap:18px;

        top:10px;

    }

    .step-number{

        width:50px;

        height:50px;

        margin-bottom:16px;

        font-size:1.2rem;

    }

    .step-icon{

        width:80px;

        height:80px;

        margin-bottom:18px;

    }

    .step-icon img{

        width:55px;

        height:55px;

    }

    .step h3{

        font-size:1.05rem;

    }

    .step p{

        font-size:.88rem;

        line-height:1.5;

    }

    .step-arrow{

        font-size:1.5rem;

        margin-top:-60px;

    }

}

/* =======================================================
   RESPONSIVE COMMENT ÇA MARCHE MOBILE
   (≤ 599 px)
======================================================= */

@media (max-width:599px){

    .fonctionnement{

        padding:
            30px
            0
            70px;

    }

    .fonctionnement-layout{

        flex-direction:column;

        gap:50px;

        align-items:center;

    }

    .fonctionnement-content{

        width:100%;

        text-align:center;

    }

    .fonctionnement-timeline{

        width:100%;

        flex-direction:column;

        align-items:center;

        gap:0;

        top:0;

    }

    .step{

        width:100%;

        max-width:300px;

    }

    .step-number{

        width:55px;

        height:55px;

        margin-bottom:18px;

    }

    .step-icon{

        width:90px;

        height:90px;

        margin-bottom:18px;

    }

    .step-icon img{

        width:60px;

        height:60px;

    }

    .step h3{

        margin-bottom:10px;

    }

    .step p{

        font-size:.95rem;

    }

    .step-arrow{

        margin:25px 0;

        font-size:2rem;

    }

    .step-arrow i{

        transform:rotate(90deg);

    }

}

/* =======================================================
   RESPONSIVE COMMENT ÇA MARCHE TABLETTE
   (600 px → 1080 px)
======================================================= */

@media (min-width:600px) and (max-width:1080px){

    .fonctionnement-layout{

        flex-direction:column;

        gap:50px;

    }

    .fonctionnement-content{

        width:100%;

        text-align:center;

    }

    .fonctionnement-timeline{

        display:grid;

        grid-template-columns:repeat(2,minmax(240px,280px));

        gap:50px clamp(25px,4vw,70px);

        justify-content:center;

        width:100%;

        margin:0 auto;

        top:0;

    }

    .step{

        position:relative;

        width:100%;

        max-width:280px;

        margin:0 auto;

    }

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

    .step p{

        font-size:clamp(.82rem,.75rem + .25vw,.98rem);

        line-height:1.6;

        max-width:240px;

        margin:0 auto;

    }

    /* On masque les anciennes flèches */

    .step-arrow{

        display:none;

    }

    /* =======================================================
       FLÈCHES TABLETTE
    ======================================================= */

    .step:nth-child(1)::after,
    .step:nth-child(5)::after{

        content:"➜";

        position:absolute;

        top:92px;

        right:clamp(-45px,-3vw,-25px);

        font-size:2rem;

        color:var(--primary);

    }

}

/* =======================================================
   RESPONSIVE FAQ DESKTOP ÉTENDU
   (940 px → 1260 px)
======================================================= */

@media (min-width:1080px) and (max-width:1260px){

    .faq{

        background-position:
            right
            clamp(0px,-6vw,-70px);

    }

}

/* =======================================================
   RESPONSIVE FAQ TABLETTE
   (≤ 1080 px)
======================================================= */

@media (max-width:1080px){

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

    .faq{

        background:

            linear-gradient(

                90deg,

                rgba(255,255,255,0) 0%,

                rgba(255,255,255,.18) 18%,

                rgba(255,255,255,.70) 34%,

                rgba(255,255,255,.96) 46%,

                rgba(255,255,255,1) 50%,

                rgba(255,255,255,.96) 54%,

                rgba(255,255,255,.70) 66%,

                rgba(255,255,255,.18) 82%,

                rgba(255,255,255,0) 100%

            ),

            linear-gradient(

                180deg,

                rgba(255,255,255,.70) 0%,

                rgba(255,255,255,.18) 12%,

                rgba(255,255,255,0) 20%

            ),

            linear-gradient(

                0deg,

                rgba(255,255,255,.90) 0%,

                rgba(255,255,255,.35) 8%,

                rgba(255,255,255,0) 14%

            ),

            url("../images/facade 3.webp");

        background-repeat:no-repeat;

        background-position:center top;

        background-size:cover;

    }

    /* =======================================================
       LAYOUT
    ======================================================= */

    .faq-layout{

        display:flex;

        justify-content:center;

        align-items:flex-start;

        min-height:auto;

    }

    /* =======================================================
       COLONNE FAQ
    ======================================================= */

    .faq-left{

        width:min(720px,100%);

        max-width:720px;

        margin-top:0;

        padding-right:0;

        text-align:center;

    }

    /* =======================================================
       TITRE
    ======================================================= */

    .faq-left h2{

        text-align:center;

    }

    /* =======================================================
       LIGNE
    ======================================================= */

    .faq-left .section-line{

        margin:0 auto 30px;

    }

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

    .faq-left > p{

        max-width:620px;

        margin:0 auto 40px;

    }

    /* =======================================================
       ACCORDÉON
    ======================================================= */

    .faq-accordion{

        width:100%;

        text-align:left;

    }

    /* =======================================================
       BESOIN D'AIDE
    ======================================================= */

    .faq-help{

        margin-top:45px;

        flex-direction:column;

        justify-content:center;

        align-items:center;

        gap:20px;

        text-align:center;

    }

}

/* =======================================================
   RESPONSIVE CONTACT TABLETTE
   (600 px → 1142 px)
======================================================= */

@media (min-width:600px) and (max-width:1142px){

    /* =======================================================
       LAYOUT
    ======================================================= */

    .contact-layout{

        display:flex;

        flex-direction:column;

        gap:45px;

    }

    /* =======================================================
       GOOGLE MAPS
    ======================================================= */

    .contact-map{

        order:1;

        width:100%;

        max-width:900px;

        height:500px;

        margin:0 auto;

    }

    /* =======================================================
       INFORMATIONS
    ======================================================= */

    .contact-info{

        order:2;

        display:grid;

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

        gap:22px 35px;

        width:100%;

        max-width:900px;

        margin:0 auto;

    }

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

    .contact-item{

        display:flex;

        align-items:flex-start;

        gap:15px;

    }

    .contact-item i{

        width:22px;

        font-size:1.1rem;

        flex-shrink:0;

        margin-top:3px;

    }

    .contact-item p{

        flex:1;

        margin:0;

        line-height:1.6;

    }

    /* =======================================================
       BOUTON
    ======================================================= */

    .contact-button{

        grid-column:auto;

        justify-self:start;

        width:fit-content;

        margin-top:0px;

        padding:12px 26px;

    }

}

/* =======================================================
   RESPONSIVE CONTACT MOBILE
   (≤ 599 px)
======================================================= */

@media (max-width:599px){

    /* =======================================================
       LAYOUT
    ======================================================= */

    .contact-layout{

        display:flex;

        flex-direction:column;

        gap:40px;

    }

    /* =======================================================
       GOOGLE MAPS
    ======================================================= */

    .contact-map{

        order:1;

        width:100%;

        max-width:100%;

        height:350px;

        border-radius:22px;

    }

    /* =======================================================
       INFORMATIONS
    ======================================================= */

    .contact-info{

        order:2;

        display:grid;

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

        gap:22px 30px;

        width:100%;

        max-width:100%;

        margin:0 auto;

    }

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

    .contact-item{

        display:flex;

        align-items:flex-start;

        gap:15px;

    }

    .contact-item i{

        width:22px;

        font-size:1.1rem;

        flex-shrink:0;

        margin-top:3px;

    }

    .contact-item p{

        margin:0;

        flex:1;

        font-size:.95rem;

        line-height:1.6;

    }

    /* =======================================================
       BOUTON
    ======================================================= */

    .contact-button{

        grid-column:auto;

        justify-self:start;

        width:fit-content;

        margin-top:0px;

        padding:12px 26px;

        font-size:clamp(1rem,4vw,2rem);

    }

}

/* =======================================================
   RESPONSIVE FOOTER
   (≤550 px)
======================================================= */

@media (max-width:550px){

    .footer-content{

        display:flex;

        flex-direction:column;

        align-items:center;

        gap:20px;

        text-align:center;

    }

    .footer-left{

        display:flex;

        flex-direction:column;

        align-items:center;

        gap:10px;

    }

    .footer-logo{

        width:110px;

    }

    .footer-left p{

        font-size:clamp(.78rem,3vw,.92rem);

    }

    .footer-right{

        display:flex;

        flex-direction:column;

        align-items:center;

        gap:10px;

    }

    .footer-right span{

        display:none;

    }

    .footer-right a{

        font-size:clamp(.78rem,3vw,.92rem);

        text-align:center;

    }

}