/* ============================================================
   BÂTI PIERRES — style.css — Responsive Mobile/Tablet/Desktop
   Navy #1a2b5e | Rose #c0305a | Blanc #fff | Gris #f7f7f9
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Open+Sans:wght@300;400;500;600&display=swap');

/* ── Variables ── */
:root {
    --navy:        #1a2b5e;
    --navy-dark:   #152249;
    --rose:        #c0305a;
    --rose-dark:   #a82750;
    --white:       #ffffff;
    --light:       #f7f7f9;
    --dark:        #1c1c1c;
    --text:        #3d3d3d;
    --muted:       #888;
    --border:      #e0e0e0;
    --radius:      10px;
    --shadow-sm:   0 2px 12px rgba(0,0,0,.06);
    --shadow-md:   0 8px 32px rgba(26,43,94,.12);
    --shadow-lg:   0 20px 60px rgba(26,43,94,.15);
    --transition:  .25s ease;
    --topbar-h:    44px;
    --header-h:    110px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: 'Open Sans', sans-serif; font-size: 16px; color: var(--text); background: var(--white); line-height: 1.7; overflow-x: hidden; }
img  { max-width: 100%; height: auto; display: block; }
a    { color: inherit; text-decoration: none; }
ul   { list-style: none; }
button { font-family: inherit; cursor: pointer; }
blockquote { quotes: none; }

/* ── Utilitaires ── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.section-pad { padding: 90px 0; }

/* ── Boutons ── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 14px 30px;
    border-radius: 5px;
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    border: 2px solid transparent;
    transition: background var(--transition), border-color var(--transition), transform .15s, color var(--transition);
    white-space: nowrap;
}
.btn:hover         { transform: translateY(-2px); }
.btn-navy          { background: var(--navy);  color: var(--white); border-color: var(--navy); }
.btn-navy:hover    { background: var(--rose);  color: var(--white); border-color: var(--rose); }
.btn-rose          { background: var(--rose);  color: var(--white); border-color: var(--rose); }
.btn-rose:hover    { background: var(--navy);  color: var(--white); border-color: var(--navy); }
.btn-outline       { background: transparent; border-color: var(--white); color: var(--white); }
.btn-outline:hover { background: var(--white); color: var(--navy); }
.btn-submit        { width: 100%; justify-content: center; padding: 16px; font-size: .9rem; }

/* ══════════════════════════════════════════
   TOPBAR
══════════════════════════════════════════ */
#topbar {
    background: var(--navy);
    color: var(--white);
    font-size: .8rem;
    height: var(--topbar-h);
    display: flex;
    align-items: center;
}
.topbar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.topbar-left, .topbar-right {
    display: flex;
    align-items: center;
    gap: 20px;
}
.topbar-left a, .topbar-right a {
    color: var(--white);
    opacity: .88;
    display: flex;
    align-items: center;
    gap: 7px;
    transition: opacity var(--transition);
}
.topbar-left a:hover, .topbar-right a:hover { opacity: 1; }

/* ══════════════════════════════════════════
   HEADER / NAV
══════════════════════════════════════════ */
#header {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 900;
    box-shadow: var(--shadow-sm);
    height: var(--header-h);
    display: flex;
    align-items: center;
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}
.logo img { height: 100px; width: auto; }

/* Nav desktop */
#main-nav ul {
    display: flex;
    align-items: center;
    gap: 4px;
}
#main-nav ul li a {
    font-size: .87rem;
    font-weight: 500;
    color: var(--dark);
    padding: 8px 13px;
    border-radius: 5px;
    position: relative;
    transition: color var(--transition);
}
#main-nav ul li a::after {
    content: '';
    position: absolute;
    bottom: 3px; left: 13px; right: 13px;
    height: 2px;
    background: var(--rose);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition);
}
#main-nav ul li a:hover,
#main-nav ul li a.active { color: var(--rose); }
#main-nav ul li a:hover::after,
#main-nav ul li a.active::after { transform: scaleX(1); }

/* CTA dans nav */
.btn-nav-cta {
    background: var(--rose) !important;
    color: var(--white) !important;
    padding: 9px 18px !important;
    border-radius: 5px !important;
    font-size: .82rem !important;
    font-weight: 600 !important;
    letter-spacing: .5px;
    margin-left: 8px;
}
.btn-nav-cta::after { display: none !important; }
.btn-nav-cta:hover  { background: var(--navy) !important; color: var(--white) !important; }

/* Burger */
#burger {
    display: none;
    background: none;
    border: 2px solid var(--border);
    border-radius: 6px;
    width: 42px; height: 42px;
    align-items: center;
    justify-content: center;
    color: var(--navy);
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: border-color var(--transition), background var(--transition);
}
#burger:hover { border-color: var(--navy); background: var(--light); }

/* ══════════════════════════════════════════
   HERO
══════════════════════════════════════════ */
#hero {
    position: relative;
    min-height: 88vh;
    display: flex;
    align-items: center;
    background: var(--navy);
}
.hero-bg {
    position: absolute;
    inset: 0;
    background-image: url('../assets/images/Gombert_HD.png');
    background-size: cover;
    background-position: center 30%;
    filter: brightness(.45);
    transform: scale(1.04);
    transition: transform 8s ease;
}
#hero.loaded .hero-bg { transform: scale(1); }
.hero-content {
    position: relative;
    z-index: 2;
    color: var(--white);
    max-width: 760px;
    padding: 60px 0;
}
.hero-content h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.9rem, 5vw, 3.8rem);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.15;
    margin-bottom: 18px;
    letter-spacing: .5px;
}
.hero-content .tagline {
    font-size: clamp(.95rem, 2vw, 1.1rem);
    font-weight: 600;
    color: rgba(255,255,255,.92);
    margin-bottom: 18px;
    letter-spacing: -1.6px;
}
.hero-content .tagline span { color: var(--rose); margin: 0 8px; }
.hero-content > p {
    font-size: clamp(.88rem, 1.5vw, .95rem);
    color: rgba(255,255,255,.78);
    max-width: 580px;
    margin-bottom: 38px;
    line-height: 1.85;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }

/* ══════════════════════════════════════════
   EXPERTISE
══════════════════════════════════════════ */
.expertise-eyebrow {
    font-size: .75rem;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.section-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.6rem, 3vw, 2.5rem);
    color: var(--navy);
    font-weight: 700;
    line-height: 1.2;
}
.expertise-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}
.expertise-text p {
    font-size: .97rem;
    color: var(--text);
    line-height: 1.88;
    margin-top: 28px;
    max-width: 500px;
}
.expertise-img { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }
.expertise-img img { width: 100%; height: 460px; object-fit: cover; transition: transform .5s; }
.expertise-img:hover img { transform: scale(1.04); }

.expertise-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 56px;
}
.exp-card {
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 30px 26px;
    color: inherit;
    display: block;
    transition: border-color var(--transition), box-shadow var(--transition), transform .2s;
}
.exp-card:hover { border-color: var(--navy); box-shadow: var(--shadow-md); transform: translateY(-4px); }
.card-accent { width: 34px; height: 3px; background: var(--rose); border-radius: 2px; margin-bottom: 16px; }
.exp-card h3 { font-family: 'Playfair Display', serif; font-size: 1.15rem; color: var(--navy); margin-bottom: 10px; }
.exp-card p  { font-size: .87rem; color: var(--muted); line-height: 1.72; }

/* ══════════════════════════════════════════
   STATS
══════════════════════════════════════════ */
#stats { position: relative; padding: 80px 0; overflow: hidden; }
.stats-bg {
    position: absolute; inset: 0;
    background-image: url('../assets/images/img_menu.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    filter: brightness(.15);
}
.stats-inner { position: relative; z-index: 2; }
.stats-header { text-align: center; margin-bottom: 56px; }
.stats-header .eyebrow { color: var(--rose); font-size: .76rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; }
.stats-header h2 { font-family: 'Playfair Display', serif; font-size: clamp(1.5rem, 3vw, 2.3rem); color: var(--white); font-weight: 700; max-width: 620px; margin: 0 auto; line-height: 1.3; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.stat-item {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    padding: 44px 24px;
    text-align: center;
    position: relative;
}
.stat-item::after { content: ''; position: absolute; bottom: 0; left: 20%; right: 20%; height: 3px; border-radius: 2px; }
.stat-item:nth-child(1)::after { background: var(--rose); }
.stat-item:nth-child(2)::after { background: var(--navy); }
.stat-item:nth-child(3)::after { background: var(--rose); }
.stat-number { font-family: 'Playfair Display', serif; font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 700; color: var(--white); line-height: 1; margin-bottom: 10px; }
.stat-label  { font-size: .84rem; color: rgba(255,255,255,.62); }

/* ══════════════════════════════════════════
   RÉALISATIONS
══════════════════════════════════════════ */
#realisations { background: var(--light); }
.real-tabs { display: flex; justify-content: center; gap: 8px; margin: 28px 0 36px; flex-wrap: wrap; }
.real-tab {
    padding: 9px 20px;
    border-radius: 50px;
    border: 1.5px solid var(--border);
    background: var(--white);
    color: var(--text);
    font-size: .83rem;
    font-weight: 500;
    transition: all var(--transition);
}
.real-tab.active, .real-tab:hover { border-color: var(--navy); background: var(--navy); color: var(--white); }
.real-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.real-item {
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
    aspect-ratio: 4/3;
    cursor: pointer;
    background: var(--border);
}
.real-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s; }
.real-item:hover img { transform: scale(1.1); }
.real-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(26,43,94,.85) 0%, transparent 55%);
    opacity: 0;
    transition: opacity .3s;
    display: flex;
    align-items: flex-end;
    padding: 18px 16px;
}
.real-item:hover .real-overlay,
.real-item:focus .real-overlay  { opacity: 1; }
.real-overlay span { color: var(--white); font-size: .87rem; font-weight: 600; }

/* ══════════════════════════════════════════
   SERVICES
══════════════════════════════════════════ */
.services-lead { text-align: center; color: var(--muted); margin: 12px 0 44px; font-size: .94rem; }
.services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.service-card {
    padding: 32px 26px;
    border-radius: var(--radius);
    background: var(--light);
    transition: box-shadow var(--transition), transform .2s;
}
.service-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,.1); transform: translateY(-4px); }
.service-icon {
    width: 52px; height: 52px;
    border-radius: 12px;
    background: var(--navy);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 18px;
    transition: background var(--transition);
}
.service-card:hover .service-icon { background: var(--rose); }
.service-icon i  { color: var(--white); font-size: 1.15rem; }
.service-card h3 { font-family: 'Playfair Display', serif; font-size: 1.1rem; color: var(--navy); margin-bottom: 10px; }
.service-card p  { font-size: .86rem; color: var(--muted); line-height: 1.75; }

/* ══════════════════════════════════════════
   TÉMOIGNAGES
══════════════════════════════════════════ */
#temoignages { background: var(--light); }
.temoignages-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 46px; }
.temoignage-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 30px 26px;
    box-shadow: 0 4px 20px rgba(0,0,0,.06);
    position: relative;
}
.temoignage-card::before {
    content: '\201C';
    font-family: 'Playfair Display', serif;
    font-size: 5rem;
    color: var(--rose);
    opacity: .15;
    position: absolute;
    top: 8px; left: 20px;
    line-height: 1;
}
.temoignage-stars { color: #f5a623; font-size: .85rem; margin-bottom: 14px; }
.temoignage-text  { font-size: .9rem; color: var(--text); line-height: 1.82; margin-bottom: 22px; font-style: italic; }
.temoignage-author { display: flex; align-items: center; gap: 13px; }
.author-avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--navy);
    display: flex; align-items: center; justify-content: center;
    color: var(--white);
    font-weight: 700; font-size: .95rem;
    flex-shrink: 0;
}
.author-name { font-weight: 600; font-size: .9rem; color: var(--dark); }
.author-loc  { font-size: .76rem; color: var(--muted); margin-top: 2px; }
.author-loc .fas { color: var(--rose); margin-right: 4px; font-size: .68rem; }

/* ══════════════════════════════════════════
   CTA BAND
══════════════════════════════════════════ */
#cta-band { background: var(--navy); padding: 80px 0; text-align: center; }
#cta-band h2 { font-family: 'Playfair Display', serif; font-size: clamp(1.5rem, 3vw, 2.3rem); color: var(--white); margin-bottom: 12px; }
#cta-band p  { color: rgba(255,255,255,.72); font-size: .94rem; margin-bottom: 34px; max-width: 520px; margin-left: auto; margin-right: auto; }
.cta-buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ══════════════════════════════════════════
   CONTACT
══════════════════════════════════════════ */
#contact { background: var(--light); }
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 56px;
    align-items: start;
    margin-top: 50px;
}
.contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 26px;
}
.contact-info-icon {
    width: 46px; height: 46px;
    border-radius: 10px;
    background: var(--navy);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: var(--white);
    font-size: .9rem;
}
.contact-info-label { font-weight: 600; color: var(--dark); margin-bottom: 4px; font-size: .88rem; }
.contact-info-value { color: var(--rose); font-size: .93rem; }
.contact-info-value:hover { text-decoration: underline; }
.contact-info-text  { color: var(--text); font-size: .93rem; line-height: 1.6; }
.contact-zone-box {
    background: var(--white);
    border-left: 4px solid var(--rose);
    border-radius: 6px;
    padding: 18px 20px;
    font-size: .87rem;
    color: var(--muted);
    line-height: 1.75;
    margin-top: 8px;
}
.contact-zone-box strong { color: var(--dark); }

/* Formulaire */
.contact-form-wrap { background: var(--white); border-radius: var(--radius); padding: 36px 32px; box-shadow: var(--shadow-sm); }
.form-group { margin-bottom: 18px; }
.form-group label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 7px;
}
.form-group label span { color: var(--rose); }
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1.5px solid var(--border);
    border-radius: 7px;
    font-size: .9rem;
    font-family: inherit;
    color: var(--dark);
    background: var(--white);
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
    -webkit-appearance: none;
    appearance: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--navy);
    box-shadow: 0 0 0 3px rgba(26,43,94,.1);
}
.form-group textarea { resize: vertical; min-height: 130px; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* RGPD */
.form-rgpd { margin-bottom: 22px; }
.rgpd-label {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: 10px;
    font-size: .84rem !important;
    font-weight: 400 !important;
    color: var(--muted);
    cursor: pointer;
    line-height: 1.6;
}
.rgpd-label input[type="checkbox"] {
    width: 17px; height: 17px;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: var(--navy);
    cursor: pointer;
}
.link-modal {
    background: none;
    border: none;
    padding: 0;
    color: var(--rose);
    font-size: inherit;
    font-family: inherit;
    cursor: pointer;
    text-decoration: underline;
    display: inline;
}
.link-modal:hover { color: var(--rose-dark); }

/* Alertes */
.alert {
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 24px;
    font-size: .88rem;
    line-height: 1.7;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.alert i { margin-right: 8px; }
.alert-success { background: #e6f7ee; border: 1px solid #6fcf97; color: #1a6b3a; }
.alert-error   { background: #fef2f2; border: 1px solid #f87171; color: #b91c1c; }

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
#footer { background: #0f1826; color: rgba(255,255,255,.7); padding: 64px 0 0; font-size: .86rem; }
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.4fr;
    gap: 44px;
    padding-bottom: 52px;
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-brand img   { height: 70px; margin-bottom: 16px; }
.footer-brand p     { line-height: 1.8; max-width: 280px; }
.footer-col h4      { color: var(--white); font-size: .88rem; font-weight: 600; margin-bottom: 16px; letter-spacing: .4px; }
.footer-col ul      { display: flex; flex-direction: column; gap: 9px; }
.footer-col ul li a { color: rgba(255,255,255,.62); display: flex; align-items: center; gap: 8px; transition: color var(--transition); }
.footer-col ul li a i { font-size: .7rem; color: var(--rose); }
.footer-col ul li a:hover { color: var(--white); }
.footer-contact-item { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; color: rgba(255,255,255,.62); }
.footer-contact-item i  { color: var(--rose); margin-top: 3px; flex-shrink: 0; }
.footer-contact-item a  { color: rgba(255,255,255,.62); transition: color var(--transition); }
.footer-contact-item a:hover { color: var(--white); }
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
    font-size: .78rem;
    color: rgba(255,255,255,.38);
    flex-wrap: wrap;
    gap: 10px;
}
.footer-legal { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-legal .link-modal { color: rgba(255,255,255,.38); font-size: .78rem; }
.footer-legal .link-modal:hover { color: var(--white); }

/* ══════════════════════════════════════════
   MODALS (Mentions légales / Confidentialité)
══════════════════════════════════════════ */
.modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.modal[hidden] { display: none; }
.modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(3px);
}
.modal-box {
    position: relative;
    background: var(--white);
    border-radius: var(--radius);
    width: 100%;
    max-width: 700px;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: 0 24px 80px rgba(0,0,0,.3);
    animation: modalIn .25s ease;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.modal-close {
    position: sticky;
    top: 0;
    float: right;
    background: none;
    border: none;
    font-size: 1.3rem;
    color: var(--muted);
    padding: 16px 20px;
    z-index: 10;
    transition: color var(--transition);
}
.modal-close:hover { color: var(--dark); }
.modal-body { padding: 16px 36px 36px; }
.modal-body h2 { font-family: 'Playfair Display', serif; color: var(--navy); font-size: 1.7rem; margin-bottom: 24px; }
.modal-body h3 { font-size: 1rem; color: var(--navy); margin: 22px 0 8px; font-weight: 600; }
.modal-body p  { font-size: .9rem; color: var(--text); line-height: 1.8; margin-bottom: 10px; }
.modal-body em { color: var(--muted); }
.modal-body ul { margin: 8px 0 10px 18px; list-style: disc; }
.modal-body ul li { font-size: .9rem; color: var(--text); line-height: 1.75; margin-bottom: 4px; }
.modal-body a  { color: var(--rose); }
.modal-body a:hover { text-decoration: underline; }

/* ══════════════════════════════════════════
   LIGHTBOX
══════════════════════════════════════════ */
#lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,.93);
    align-items: center;
    justify-content: center;
    padding: 16px;
}
#lightbox.open { display: flex; }
#lightbox img  { max-width: 92vw; max-height: 88vh; border-radius: 6px; box-shadow: 0 20px 80px rgba(0,0,0,.5); }
#lightbox-close {
    position: fixed;
    top: 20px; right: 24px;
    background: rgba(255,255,255,.12);
    border: none;
    border-radius: 50%;
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    color: var(--white);
    font-size: 1.1rem;
    transition: background var(--transition);
}
#lightbox-close:hover { background: rgba(255,255,255,.25); }

/* ══════════════════════════════════════════
   SCROLL TO TOP
══════════════════════════════════════════ */
#scroll-top {
    position: fixed;
    bottom: 24px; right: 24px;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--rose);
    color: var(--white);
    border: none;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    z-index: 800;
    box-shadow: 0 4px 16px rgba(192,48,90,.4);
    transition: background var(--transition), transform .15s;
}
#scroll-top:hover  { background: var(--rose-dark); transform: translateY(-2px); }
#scroll-top.visible { display: flex; }

/* ══════════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════════ */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════
   RESPONSIVE — TABLET (≤ 1024px)
══════════════════════════════════════════ */
@media (max-width: 1024px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .expertise-grid { gap: 36px; }
    .real-grid { grid-template-columns: repeat(2, 1fr); }
    .expertise-img img { height: 380px; }
    .contact-grid { gap: 36px; }
}

/* ══════════════════════════════════════════
   RESPONSIVE — TABLET PORTRAIT (≤ 900px)
══════════════════════════════════════════ */
@media (max-width: 900px) {
    .expertise-grid { grid-template-columns: 1fr; }
    .expertise-text p { max-width: 100%; }
    .expertise-img img { height: 320px; }
    /* services-grid déjà en 2 colonnes par défaut */
    .temoignages-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-grid { grid-template-columns: repeat(3, 1fr); } /* 3 cols OK sur tablette */
    .contact-grid { grid-template-columns: 1fr; }
    .contact-form-wrap { padding: 28px 22px; }
}

/* ══════════════════════════════════════════
   RESPONSIVE — MOBILE (≤ 768px)
══════════════════════════════════════════ */
@media (max-width: 768px) {
    :root { --topbar-h: auto; --header-h: 66px; }
    .section-pad { padding: 60px 0; }

    /* Topbar mobile */
    #topbar { height: auto; padding: 8px 0; }
    .topbar-inner { flex-direction: column; gap: 6px; text-align: center; }
    .topbar-left  { flex-direction: column; gap: 6px; }
    .topbar-email { display: none; } /* Masquer l'email sur mobile */
    .topbar-right { display: none; }

    /* Burger */
    #burger { display: flex; }

    /* Nav mobile */
    #main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0; right: 0;
        background: var(--white);
        border-top: 1px solid var(--border);
        padding: 12px 20px 20px;
        box-shadow: 0 8px 24px rgba(0,0,0,.12);
        z-index: 1000;
    }
    #main-nav.open { display: block; }
    #main-nav ul { flex-direction: column; align-items: stretch; gap: 2px; }
    #main-nav ul li a { padding: 12px 8px; font-size: .95rem; border-bottom: 1px solid var(--light); }
    #main-nav ul li a::after { display: none; }
    .btn-nav-cta {
        display: block !important;
        text-align: center !important;
        margin: 12px 0 0 !important;
        padding: 13px !important;
    }

    /* Hero */
    #hero { min-height: 80vh; }
    .hero-content { padding: 40px 0; }
    .hero-ctas { flex-direction: column; }
    .hero-ctas .btn { justify-content: center; }

    /* Stats */
    .stats-grid { grid-template-columns: 1fr; gap: 2px; }
    .stats-bg { background-attachment: scroll; } /* Désactiver parallax sur mobile */

    /* Expertise cards */
    .expertise-cards { grid-template-columns: 1fr; gap: 14px; }

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

    /* Témoignages */
    .temoignages-grid { grid-template-columns: 1fr; }

    /* Contact */
    .form-row-2 { grid-template-columns: 1fr; }

    /* CTA buttons */
    .cta-buttons { flex-direction: column; align-items: center; }
    .cta-buttons .btn { width: 100%; max-width: 320px; justify-content: center; }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr; gap: 28px; }
    .footer-bottom { flex-direction: column; text-align: center; gap: 8px; }
    .footer-legal { justify-content: center; }

    /* Modal */
    .modal-body { padding: 12px 20px 28px; }
    .modal-body h2 { font-size: 1.4rem; }
}

/* ══════════════════════════════════════════
   RESPONSIVE — PETITS MOBILES (≤ 480px)
══════════════════════════════════════════ */
@media (max-width: 480px) {
    .container { padding: 0 14px; }
    .section-pad { padding: 48px 0; }
    .real-grid { grid-template-columns: 1fr; gap: 10px; }
    .real-tabs { gap: 6px; }
    .real-tab  { font-size: .78rem; padding: 8px 14px; }
    .btn { padding: 12px 22px; font-size: .8rem; }
    .hero-content h1 { font-size: 1.7rem; }
    .expertise-img img { height: 240px; }
    .contact-form-wrap { padding: 20px 16px; }
    .modal-box { border-radius: 8px; }
}

/* ══════════════════════════════════════════
   FOCUS VISIBLE (accessibilité)
══════════════════════════════════════════ */
/* ── Focus visible — bleu devient rose, rose devient bleu ── */
:focus-visible {
    outline: 2px solid var(--rose);
    outline-offset: 3px;
    border-radius: 3px;
}

/* Boutons navy : focus rose */
.btn-navy:focus-visible,
.btn-nav-cta:focus-visible {
    outline-color: var(--rose);
    box-shadow: 0 0 0 4px rgba(192, 48, 90, 0.25);
}

/* Boutons rose : focus navy */
.btn-rose:focus-visible {
    outline-color: var(--navy);
    box-shadow: 0 0 0 4px rgba(26, 43, 94, 0.25);
}

/* Bouton outline (sur fond navy) : focus rose */
.btn-outline:focus-visible {
    outline-color: var(--rose);
    box-shadow: 0 0 0 4px rgba(192, 48, 90, 0.35);
}

/* Champs formulaire : focus navy */
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible {
    outline: none;
    border-color: var(--navy);
    box-shadow: 0 0 0 3px rgba(26, 43, 94, 0.12);
}

/* Liens nav : focus rose */
#main-nav ul li a:focus-visible {
    outline-color: var(--rose);
    background: rgba(192, 48, 90, 0.08);
}

/* Scroll top (rose) : focus navy */
#scroll-top:focus-visible {
    outline-color: var(--navy);
    box-shadow: 0 0 0 4px rgba(26, 43, 94, 0.3);
}

/* ── Utilitaire text-center (remplace styles inline) ── */
.text-center { text-align: center !important; }

/* ── Temoignages grid margin-top ── */
.temoignages-grid { margin-top: 46px; }

/* ============================================================
   PAGES INTERNES — styles additionnels
   ============================================================ */

/* ── Page hero (bannière interne) ── */
.page-hero {
    position: relative;
    background: var(--navy);
    padding: 90px 0 70px;
    overflow: hidden;
}
.page-hero-bg {
    position: absolute; inset: 0;
    background-image: url('../assets/images/img_menu.webp');
    background-size: cover;
    background-position: center;
    filter: brightness(.18);
}
.page-hero-content {
    position: relative; z-index: 2;
    color: var(--white);
}
.page-hero-content h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 700;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.page-hero-content p {
    font-size: clamp(.85rem, 1.5vw, 1.05rem);
    color: rgba(255,255,255,.78);
    max-width: 100%;
}

/* Breadcrumb */
.breadcrumb {
    display: flex; align-items: center; gap: 8px;
    font-size: .8rem; color: rgba(255,255,255,.55);
    margin-bottom: 18px;
}
.breadcrumb a { color: var(--rose); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .fa-chevron-right { font-size: .65rem; }

/* ── À propos ── */
.apropos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}
.apropos-text p { margin-top: 18px; line-height: 1.85; }
.apropos-img-wrap {
    position: relative;
    border-radius: var(--radius);
    overflow: visible;
}
.apropos-img-wrap img {
    width: 100%; border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}
.apropos-badge {
    position: absolute;
    bottom: -20px; left: -20px;
    background: var(--rose);
    color: var(--white);
    border-radius: var(--radius);
    padding: 18px 22px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(192,48,90,.35);
}
.badge-number { display: block; font-family: 'Playfair Display',serif; font-size: 2.2rem; font-weight: 700; line-height: 1; }
.badge-text   { font-size: .75rem; opacity: .9; text-transform: uppercase; letter-spacing: 1px; }

/* Valeurs */
.valeurs-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; margin-top: 48px; }
.valeur-card {
    background: var(--white); border-radius: var(--radius);
    padding: 32px 24px; text-align: center;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition), transform .2s;
}
.valeur-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.valeur-icon {
    width: 58px; height: 58px; border-radius: 50%;
    background: var(--navy); margin: 0 auto 18px;
    display: flex; align-items: center; justify-content: center;
    color: var(--white); font-size: 1.3rem;
}
.valeur-card h3 { font-family: 'Playfair Display',serif; font-size: 1.1rem; color: var(--navy); margin-bottom: 10px; }
.valeur-card p  { font-size: .87rem; color: var(--muted); line-height: 1.75; }

/* Zone intervention */
.zone-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.zone-list { list-style: none; columns: 2; gap: 8px; margin-top: 22px; }
.zone-list li { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: .9rem; }
.zone-list li .fas { color: var(--rose); font-size: .8rem; }
.zone-map-placeholder { display: flex; justify-content: center; align-items: center; }
.map-card {
    background: var(--light); border-radius: var(--radius);
    padding: 40px 36px; text-align: center;
    border: 2px dashed var(--border);
}
.map-card > .fas { font-size: 3rem; color: var(--navy); margin-bottom: 16px; display: block; }
.map-card p { font-size: .93rem; color: var(--text); line-height: 1.7; }

/* Certifications */
.certif-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; margin-top: 48px; }
.certif-card {
    background: var(--white); border-radius: var(--radius);
    padding: 30px 22px; text-align: center;
    box-shadow: var(--shadow-sm);
    border-top: 3px solid var(--rose);
}
.certif-card > .fas { font-size: 2rem; color: var(--navy); margin-bottom: 14px; display: block; }
.certif-card h3 { font-size: 1rem; color: var(--dark); margin-bottom: 10px; font-weight: 600; }
.certif-card p  { font-size: .86rem; color: var(--muted); line-height: 1.7; }

/* ── Services page ── */
.services-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.services-intro-text p { margin-top: 16px; line-height: 1.85; }
.services-intro-img img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-lg); }

.service-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.service-detail-grid.reverse { direction: rtl; }
.service-detail-grid.reverse > * { direction: ltr; }

.service-detail-imgs { position: relative; }
.service-detail-imgs .img-main {
    width: 100%; border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}
.service-detail-imgs .img-sec {
    width: 55%; border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    position: absolute;
    bottom: -24px; right: -24px;
    border: 4px solid var(--white);
}

.service-icon-lg {
    width: 62px; height: 62px; border-radius: 14px;
    background: var(--navy);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px;
    color: var(--white); font-size: 1.4rem;
}
.service-icon-lg.rose { background: var(--rose); }
.service-detail-text h2 { font-family: 'Playfair Display',serif; color: var(--navy); font-size: clamp(1.5rem,2.5vw,2rem); margin-bottom: 16px; }
.service-detail-text p  { line-height: 1.85; color: var(--text); margin-bottom: 14px; }
.service-list { list-style: none; margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.service-list li { display: flex; align-items: center; gap: 10px; font-size: .92rem; }
.service-list li .fas { color: var(--rose); font-size: .85rem; flex-shrink: 0; }
.service-mini-list { list-style: none; margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.service-mini-list li { display: flex; align-items: center; gap: 7px; font-size: .82rem; color: var(--muted); }
.service-mini-list li .fas { color: var(--navy); font-size: .6rem; }

/* ── Réalisations ── */
.projets-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 28px;
    margin-top: 36px;
}
.projets-grid-home {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 24px;
    margin-top: 36px;
}
.projet-card, .projet-card-home {
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--white);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    display: block;
    transition: box-shadow var(--transition), transform .2s;
}
.projet-card:hover, .projet-card-home:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-5px);
}
.projet-img { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.projet-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s; }
.projet-card:hover .projet-img img,
.projet-card-home:hover .projet-img img { transform: scale(1.08); }
.projet-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(26,43,94,.88) 0%, transparent 60%);
    opacity: 0; transition: opacity .3s;
    display: flex; flex-direction: column;
    justify-content: flex-end; padding: 20px 18px;
}
.projet-card:hover .projet-overlay,
.projet-card-home:hover .projet-overlay { opacity: 1; }
.projet-cat  { color: var(--rose); font-size: .75rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px; }
.projet-voir { color: var(--white); font-size: .88rem; font-weight: 600; }
.projet-voir .fas { margin-left: 6px; font-size: .75rem; }
.projet-nb-photos {
    position: absolute; top: 12px; right: 12px;
    background: rgba(0,0,0,.55); color: var(--white);
    border-radius: 20px; padding: 4px 10px;
    font-size: .75rem; backdrop-filter: blur(4px);
}
.projet-info { padding: 20px; }
.projet-info h3 { font-family: 'Playfair Display',serif; color: var(--navy); font-size: 1.1rem; margin-bottom: 8px; }
.projet-info p  { font-size: .85rem; color: var(--muted); line-height: 1.6; margin-bottom: 10px; }
.projet-lieu { font-size: .78rem; color: var(--muted); }
.projet-lieu .fas { color: var(--rose); margin-right: 4px; font-size: .7rem; }

/* Galerie photos */
.galerie-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-top: 32px;
}
.galerie-item { aspect-ratio: 1; }

/* Détail projet */
.btn-back {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--navy); font-size: .87rem; font-weight: 600;
    margin-bottom: 36px;
    text-decoration: none;
    transition: gap var(--transition);
}
.btn-back:hover { gap: 12px; color: var(--rose); }
.projet-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}
.projet-categorie-badge {
    display: inline-block;
    background: var(--rose); color: var(--white);
    padding: 5px 14px; border-radius: 20px;
    font-size: .75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px;
    margin-bottom: 16px;
}
.projet-lieu-detail { color: var(--muted); margin-bottom: 18px; font-size: .9rem; }
.projet-description  { line-height: 1.88; color: var(--text); margin-bottom: 28px; }
.travaux-box {
    background: var(--light); border-radius: var(--radius);
    padding: 22px 24px; border-left: 4px solid var(--rose);
}
.travaux-box h3 { color: var(--navy); font-size: .95rem; margin-bottom: 14px; }
.travaux-box ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.travaux-box ul li { display: flex; align-items: center; gap: 9px; font-size: .88rem; }
.travaux-box ul li .fas { color: var(--rose); font-size: .78rem; }

/* ── Contact ── */
.contact-engagements { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.engagement-item { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--text); }
.engagement-item .fas { color: var(--rose); }

/* ── Lightbox améliorée avec prev/next ── */
#lightbox-prev, #lightbox-next {
    position: fixed;
    top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,.12);
    border: none;
    border-radius: 50%;
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    color: var(--white); font-size: 1.1rem;
    cursor: pointer;
    transition: background var(--transition);
    z-index: 10000;
}
#lightbox-prev { left: 20px; }
#lightbox-next { right: 20px; }
#lightbox-prev:hover, #lightbox-next:hover { background: rgba(255,255,255,.25); }
#lightbox-counter {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    color: rgba(255,255,255,.6); font-size: .82rem; z-index: 10000;
}

/* ══════════════════════════════════════════
   RESPONSIVE PAGES INTERNES
══════════════════════════════════════════ */
@media (max-width: 1024px) {
    .valeurs-grid   { grid-template-columns: repeat(2,1fr); }
    .certif-grid    { grid-template-columns: repeat(2,1fr); }
    .projets-grid   { grid-template-columns: repeat(2,1fr); }
    .projets-grid-home { grid-template-columns: repeat(2,1fr); }
    .galerie-grid   { grid-template-columns: repeat(4,1fr); }
    .service-detail-grid { gap: 36px; }
}

@media (max-width: 900px) {
    .apropos-grid          { grid-template-columns: 1fr; }
    .zone-grid             { grid-template-columns: 1fr; }
    .services-intro        { grid-template-columns: 1fr; }
    .service-detail-grid   { grid-template-columns: 1fr; }
    .service-detail-grid.reverse { direction: ltr; }
    .service-detail-imgs .img-sec { width: 45%; bottom: -16px; right: -16px; }
    .projet-detail-grid    { grid-template-columns: 1fr; }
    .galerie-grid          { grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 768px) {
    .page-hero { padding: 70px 0 50px; }
    .valeurs-grid   { grid-template-columns: 1fr; }
    .certif-grid    { grid-template-columns: 1fr; }
    .projets-grid   { grid-template-columns: 1fr; }
    .projets-grid-home { grid-template-columns: 1fr; }
    .galerie-grid   { grid-template-columns: repeat(2,1fr); }
    .zone-list      { columns: 1; }
    .apropos-badge  { position: static; margin-top: 16px; display: inline-block; }
    .service-detail-imgs .img-sec { display: none; }
}

@media (max-width: 480px) {
    .galerie-grid { grid-template-columns: repeat(2,1fr); gap: 6px; }
    .page-hero-content h1 { font-size: 1.6rem; }
}

/* ============================================================
   BEFORE / AFTER SLIDER
   ============================================================ */
.ba-slider {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    cursor: col-resize;
    user-select: none;
    -webkit-user-select: none;
    background: var(--border);
}

/* Image avant (fond) */
.ba-before {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

/* Image après (par-dessus, clippée) */
.ba-after-wrap {
    position: absolute;
    inset: 0;
    clip-path: inset(0 50% 0 0);
    transition: clip-path 0s; /* pas de transition pour fluidité drag */
}

.ba-after {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

/* Poignée centrale */
.ba-handle {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    cursor: col-resize;
}

/* Ligne verticale */
.ba-handle::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 100%;
    background: var(--white);
    box-shadow: 0 0 8px rgba(0,0,0,.4);
}

/* Bouton rond */
.ba-btn {
    position: relative;
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 2px 12px rgba(0,0,0,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: transform .15s, box-shadow .15s;
    flex-shrink: 0;
}

.ba-handle:hover .ba-btn,
.ba-handle:focus-visible .ba-btn {
    transform: scale(1.12);
    box-shadow: 0 4px 20px rgba(0,0,0,.35);
}

.ba-btn svg {
    width: 20px;
    height: 20px;
    fill: var(--navy);
    pointer-events: none;
}

/* Labels avant / après */
.ba-label-before,
.ba-label-after {
    position: absolute;
    bottom: 16px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    pointer-events: none;
    z-index: 5;
    transition: opacity .2s;
}

.ba-label-before {
    left: 14px;
    background: rgba(26,43,94,.85);
    color: var(--white);
}

.ba-label-after {
    right: 14px;
    background: rgba(192,48,90,.85);
    color: var(--white);
}

/* Responsive */
@media (max-width: 768px) {
    .ba-slider { aspect-ratio: 3/4; }
    .ba-btn    { width: 38px; height: 38px; }
}

/* ============================================================
   SLIDESHOW HERO avec effet flash lumineux
   ============================================================ */
.slideshow-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    background: var(--dark);
}

.slideshow-hero .slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: 1;
}

.slideshow-hero .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Slide active */
.slideshow-hero .slide.active {
    opacity: 1;
    z-index: 2;
}

/* Transition : fade + flash lumineux */
.slideshow-hero .slide.flash-out {
    z-index: 3;
    animation: slideFlashOut .65s ease forwards;
}

.slideshow-hero .slide.flash-in {
    opacity: 1;
    z-index: 2;
    animation: slideFlashIn .65s ease forwards;
}

@keyframes slideFlashOut {
    0%   { opacity: 1;    filter: brightness(1); }
    40%  { opacity: 1;    filter: brightness(3) saturate(0); }
    60%  { opacity: 0.6;  filter: brightness(4) saturate(0); }
    100% { opacity: 0;    filter: brightness(1); }
}

@keyframes slideFlashIn {
    0%   { opacity: 0;   filter: brightness(4) saturate(0); transform: scale(1.04); }
    30%  { opacity: 0.7; filter: brightness(2.5) saturate(0.3); }
    60%  { opacity: 0.9; filter: brightness(1.3); transform: scale(1.01); }
    100% { opacity: 1;   filter: brightness(1);  transform: scale(1); }
}

/* Boutons prev/next */
.ss-prev, .ss-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(255,255,255,.18);
    border: none;
    border-radius: 50%;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    color: var(--white);
    font-size: .95rem;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background var(--transition), transform .15s;
}
.ss-prev { left: 14px; }
.ss-next { right: 14px; }
.ss-prev:hover, .ss-next:hover {
    background: rgba(192,48,90,.75);
    transform: translateY(-50%) scale(1.08);
}

/* Dots */
.ss-dots {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 7px;
    z-index: 10;
}
.ss-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.45);
    cursor: pointer;
    padding: 0;
    transition: background .2s, transform .2s;
}
.ss-dot.active {
    background: var(--white);
    transform: scale(1.3);
}

@media (max-width: 768px) {
    .slideshow-hero { aspect-ratio: 3/4; }
    .ss-prev, .ss-next { width: 36px; height: 36px; font-size: .8rem; }
}

/* ── Lien "En savoir plus" sur les exp-cards ── */
.exp-card {
    display: flex;
    flex-direction: column;
}
.exp-card p {
    flex: 1;
}
.exp-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    font-size: .82rem;
    font-weight: 700;
    color: var(--rose);
    text-transform: uppercase;
    letter-spacing: .8px;
    transition: gap var(--transition), color var(--transition);
}
.exp-card:hover .exp-card-link {
    gap: 10px;
    color: var(--navy);
}
.exp-card-link .fas {
    font-size: .7rem;
    transition: transform var(--transition);
}
.exp-card:hover .exp-card-link .fas {
    transform: translateX(3px);
}

/* ── Widget Google Reviews ── */
.google-reviews-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    margin-top: 44px;
}
.google-badge-box {
    background: var(--white);
    border-radius: var(--radius);
    padding: 40px 48px;
    text-align: center;
    box-shadow: var(--shadow-md);
    max-width: 540px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.google-badge-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.google-badge-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--dark);
}
.google-stars-row {
    color: #f5a623;
    font-size: 1.3rem;
    display: flex;
    gap: 4px;
}
.google-badge-desc {
    font-size: .9rem;
    color: var(--muted);
    line-height: 1.7;
    max-width: 360px;
}
.google-badge-box .btn {
    width: 100%;
    justify-content: center;
}
.google-reviews-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 16px 20px;
    max-width: 540px;
    width: 100%;
    font-size: .84rem;
    color: #92400e;
    line-height: 1.7;
}
.google-reviews-note .fas {
    color: #f59e0b;
    margin-top: 2px;
    flex-shrink: 0;
}
.google-reviews-note code {
    background: rgba(0,0,0,.08);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: .82rem;
}

/* ── Logo mobile : taille réduite ── */
@media (max-width: 768px) {
    .logo img {
        height: 56px !important;
        width: auto !important;
    }
    #header {
        height: 70px;
    }
}

/* ============================================================
   RESPONSIVE CHECK — Corrections complètes mobile/tablette
   ============================================================ */

/* ── TABLETTE (768px–1024px) ── */
@media (max-width: 1024px) and (min-width: 769px) {

    /* Topbar : email visible sur tablette */
    .topbar-email { display: flex; }

    /* Header : légèrement plus compact */
    #header { height: 80px; }
    .logo img { height: 70px; }

    /* Hero : h1 plus petit sur tablette */
    .hero-content h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); }

    /* Stats parallax : garder scroll sur tablette */
    .stats-bg { background-attachment: scroll; }

    /* Expertise image : hauteur réduite */
    .expertise-img img { height: 320px; }

    /* Service detail images secondaires : cacher sur tablette étroite */
    .service-detail-imgs .img-sec { width: 40%; bottom: -12px; right: -12px; }

    /* Projets grid tablette : 2 col */
    .projets-grid      { grid-template-columns: repeat(2, 1fr); }
    .projets-grid-home { grid-template-columns: repeat(2, 1fr); }

    /* Google reviews */
    .google-badge-box { max-width: 100%; }
}

/* ── MOBILE LARGE (600px–768px) ── */
@media (max-width: 768px) and (min-width: 481px) {
    .real-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .galerie-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .expertise-cards { grid-template-columns: repeat(2, 1fr); }
    .stats-grid { grid-template-columns: repeat(3, 1fr); }
    .google-badge-box { padding: 28px 24px; }
}

/* ── MOBILE (max 480px) — petit écran prioritaire ── */
@media (max-width: 480px) {

    /* Body : garantir pas de scroll horizontal */
    body { overflow-x: hidden; max-width: 100vw; }
    * { max-width: 100%; }

    /* Container : padding minimum */
    .container { padding: 0 12px; }
    .section-pad { padding: 40px 0; }

    /* ── Header ── */
    :root { --header-h: 64px; }
    #header { height: 64px; }
    .logo img { height: 48px !important; width: auto !important; }
    .header-inner { padding: 0 12px; }

    /* ── Topbar ── */
    #topbar { font-size: .72rem; padding: 6px 0; }
    .topbar-left { gap: 4px; }
    .topbar-left a span { font-size: .72rem; }

    /* ── Hero ── */
    #hero { min-height: 75vh; }
    .hero-content { padding: 32px 0; }
    .hero-content h1 { font-size: 1.5rem; letter-spacing: 0; }
    .hero-content .tagline { font-size: .88rem; }
    .hero-content > p { font-size: .84rem; margin-bottom: 28px; }
    .hero-ctas { gap: 10px; }
    .hero-ctas .btn { padding: 12px 18px; font-size: .78rem; width: 100%; justify-content: center; }

    /* ── Nav mobile ── */
    #burger { width: 38px; height: 38px; font-size: 1rem; }
    #main-nav { padding: 10px 12px 16px; }
    #main-nav ul li a { padding: 11px 6px; font-size: .9rem; }
    .btn-nav-cta { padding: 12px !important; font-size: .82rem !important; }

    /* ── Expertise section ── */
    .expertise-eyebrow { font-size: .7rem; }
    .section-title { font-size: 1.5rem; }
    .expertise-img img { height: 220px; }
    .expertise-cards { grid-template-columns: 1fr; gap: 12px; margin-top: 32px; }
    .exp-card { padding: 22px 18px; }

    /* ── Stats ── */
    .stats-grid { grid-template-columns: 1fr; gap: 2px; }
    .stat-item { padding: 32px 20px; }
    .stat-number { font-size: 2.8rem; }
    .stats-header { margin-bottom: 36px; }
    .stats-header h2 { font-size: 1.3rem; }

    /* ── Réalisations ── */
    .real-tabs { gap: 5px; margin-bottom: 24px; }
    .real-tab { font-size: .73rem; padding: 7px 12px; }
    .real-grid { grid-template-columns: 1fr; gap: 12px; }

    /* ── Projets grille ── */
    .projets-grid      { grid-template-columns: 1fr; gap: 16px; }
    .projets-grid-home { grid-template-columns: 1fr; gap: 16px; }
    .projet-info { padding: 14px; }
    .projet-info h3 { font-size: 1rem; }

    /* ── Services ── */
    .services-lead { font-size: .87rem; }
    .services-grid { gap: 14px; }
    .service-card { padding: 22px 18px; }
    .service-icon { width: 44px; height: 44px; border-radius: 10px; }

    /* ── Services page ── */
    .service-detail-grid { gap: 24px; grid-template-columns: 1fr; }
    .service-detail-imgs .img-sec { display: none; }
    .service-detail-text h2 { font-size: 1.4rem; }

    /* ── À propos ── */
    .apropos-grid { gap: 28px; grid-template-columns: 1fr; }
    .apropos-badge { left: 0; bottom: -10px; }
    .valeurs-grid { grid-template-columns: 1fr; gap: 14px; }
    .certif-grid  { grid-template-columns: 1fr; gap: 14px; }
    .zone-list { columns: 1; }
    .zone-grid { gap: 32px; grid-template-columns: 1fr; }

    /* ── Contact ── */
    .contact-grid { gap: 32px; }
    .contact-form-wrap { padding: 18px 14px; }
    .form-row-2 { grid-template-columns: 1fr; gap: 0; }
    .form-group { margin-bottom: 14px; }
    .form-group label { font-size: .8rem; }
    .form-group input,
    .form-group select,
    .form-group textarea { padding: 11px 12px; font-size: .87rem; }
    .rgpd-label { font-size: .8rem !important; }
    .contact-info-item { gap: 12px; margin-bottom: 18px; }
    .contact-info-icon { width: 40px; height: 40px; font-size: .85rem; }

    /* ── Détail projet ── */
    .projet-detail-grid { gap: 28px; grid-template-columns: 1fr; }
    .travaux-box { padding: 16px 18px; }
    .projet-description { font-size: .88rem; }
    .btn-back { font-size: .82rem; margin-bottom: 24px; }

    /* ── Galerie ── */
    .galerie-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
    .galerie-item { aspect-ratio: 1; }

    /* ── Before/After slider ── */
    .ba-slider { aspect-ratio: 4/3; }
    .ba-btn { width: 36px; height: 36px; }
    .ba-label-before, .ba-label-after { font-size: .65rem; padding: 4px 9px; bottom: 10px; }

    /* ── Slideshow ── */
    .slideshow-hero { aspect-ratio: 4/3; }
    .ss-prev, .ss-next { width: 32px; height: 32px; font-size: .75rem; left: 8px; }
    .ss-next { left: auto; right: 8px; }

    /* ── CTA band ── */
    #cta-band { padding: 54px 0; }
    #cta-band h2 { font-size: 1.4rem; }
    .cta-buttons { gap: 10px; }
    .cta-buttons .btn { width: 100%; justify-content: center; }

    /* ── Footer ── */
    .footer-grid { gap: 24px; padding-bottom: 36px; }
    .footer-col h4 { font-size: .85rem; margin-bottom: 12px; }
    .footer-col ul li a { font-size: .82rem; }
    .footer-contact-item { font-size: .82rem; gap: 8px; }
    .footer-bottom { font-size: .73rem; }
    .footer-legal { gap: 12px; }

    /* ── Page hero ── */
    .page-hero { padding: 54px 0 38px; }
    .page-hero-content h1 { font-size: 1.5rem; }
    .breadcrumb { font-size: .73rem; }

    /* ── Modales ── */
    .modal { padding: 10px; align-items: flex-end; }
    .modal-box { max-height: 92vh; border-radius: 12px 12px 0 0; }
    .modal-body { padding: 10px 16px 24px; }
    .modal-body h2 { font-size: 1.3rem; }
    .modal-body h3 { font-size: .93rem; }
    .modal-body p, .modal-body li { font-size: .84rem; }

    /* ── Google reviews ── */
    .google-badge-box { padding: 24px 18px; }
    .google-badge-title { font-size: 1rem; }
    .google-reviews-note { font-size: .8rem; }

    /* ── Scroll top ── */
    #scroll-top { bottom: 16px; right: 16px; width: 40px; height: 40px; }

    /* ── Buttons ── */
    .btn { padding: 12px 20px; font-size: .79rem; }
    .btn-submit { padding: 14px; }
}

/* ── TRÈS PETIT MOBILE (max 360px) ── */
@media (max-width: 360px) {
    .container { padding: 0 10px; }
    .hero-content h1 { font-size: 1.35rem; }
    .section-title { font-size: 1.3rem; }
    .topbar-left a span { display: none; }
    .topbar-left a i { margin-right: 0; }
    #topbar { font-size: 0; } /* masquer le texte, garder le lien cliquable */
    .topbar-left a { font-size: .78rem; }
    .topbar-left a span { display: inline; }
    .real-tab { font-size: .68rem; padding: 6px 10px; }
    .galerie-grid { grid-template-columns: repeat(2, 1fr); gap: 4px; }
    .service-card { padding: 18px 14px; }
    .btn { font-size: .75rem; padding: 11px 16px; }
}

/* ── TABLETTE PAYSAGE (768px–1024px landscape) ── */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    #hero { min-height: 100vh; }
    .hero-content h1 { font-size: 2rem; }
    .expertise-img img { height: 280px; }
    .ba-slider { aspect-ratio: 16/9; }
    .slideshow-hero { aspect-ratio: 16/9; }
}

/* ── iOS Safari : fix 100vh ── */
@supports (-webkit-touch-callout: none) {
    #hero { min-height: -webkit-fill-available; }
    .modal { min-height: -webkit-fill-available; }
}

/* ── Éviter le zoom sur les inputs iOS ── */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    select,
    textarea {
        font-size: 16px !important; /* empêche le zoom automatique iOS */
    }
}

/* ── Touch targets : min 44px pour l'accessibilité tactile ── */
@media (max-width: 768px) {
    .real-tab,
    .ss-dot,
    .ba-handle,
    #scroll-top,
    #burger,
    .modal-close,
    #lightbox-close {
        min-height: 44px;
        min-width: 44px;
    }
    .ss-dot { min-height: 24px; min-width: 24px; }
}

/* ── Fix scroll iOS pour les modales ── */
.modal.open ~ body,
body.modal-open {
    position: fixed;
    width: 100%;
    overflow: hidden;
}

/* ── Lightbox mobile ── */
@media (max-width: 768px) {
    #lightbox img { max-width: 98vw; max-height: 80vh; }
    #lightbox-close { top: 12px; right: 12px; width: 38px; height: 38px; }
    #lightbox-prev { left: 8px; width: 38px; height: 38px; }
    #lightbox-next { right: 8px; width: 38px; height: 38px; }
}