/* =========================================================================
   NOEPOXY : feuille de styles
   Palette reprise du logo : or brossé, turquoise résine, acier, noir profond.
   ========================================================================= */

:root {
    /* Le site est conçu en clair. Sans cette ligne, un téléphone réglé en
       thème sombre invente ses propres couleurs et rend les libellés de
       formulaire illisibles, blancs sur blanc. */
    color-scheme: light;

    --gold:        #d4a62a;
    --gold-light:  #f0d278;
    --gold-dark:   #9c7614;
    --teal:        #0f7a8a;
    --teal-light:  #17b3c4;
    --teal-dark:   #063943;
    --ink:         #0d0f12;
    --ink-soft:    #14181d;
    --ink-line:    #232a32;
    --steel:       #c7cdd4;
    --paper:       #f6f7f9;
    --white:       #ffffff;
    --text:        #1b2027;
    --muted:       #6b7480;

    --radius:      14px;
    --radius-sm:   9px;
    --shadow:      0 10px 30px rgba(13, 15, 18, .10);
    --shadow-lg:   0 20px 55px rgba(13, 15, 18, .18);
    --font:        "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-title:  "Segoe UI Semibold", "Segoe UI", system-ui, Georgia, serif;
}

/* Base -------------------------------------------------------------------- */
html { scroll-behavior: smooth; }

body {
    font-family: var(--font);
    color: var(--text);
    background: var(--white);
    overflow-x: hidden;
}

/* Aucun contenu ne doit provoquer de défilement horizontal ------------------ */
img, svg, video, iframe { max-width: 100%; }
img, svg, video { height: auto; }
h1, h2, h3, h4, h5, h6, p, a, li, td, th, span, label { overflow-wrap: break-word; }
pre, code { white-space: pre-wrap; word-break: break-word; }
.table-responsive { -webkit-overflow-scrolling: touch; }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-title); font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(1.9rem, 4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }

a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-dark); }

.text-gold { color: var(--gold) !important; }
.text-teal { color: var(--teal-light) !important; }
.bg-gold  { background: var(--gold) !important; }
.bg-teal  { background: var(--teal) !important; color: #fff !important; }
.link-teal { color: var(--teal); font-weight: 600; }
.text-muted-light { color: rgba(255, 255, 255, .68); }

.skip-link {
    position: absolute; top: .5rem; left: .5rem; z-index: 2000;
    background: var(--gold); color: #111; padding: .5rem 1rem; border-radius: var(--radius-sm);
}

/* Boutons ----------------------------------------------------------------- */
.btn { border-radius: 999px; font-weight: 600; padding: .6rem 1.4rem; transition: all .2s ease; }

.btn-gold {
    background: linear-gradient(135deg, var(--gold-light), var(--gold) 55%, var(--gold-dark));
    border: none; color: #221a03;
    box-shadow: 0 6px 18px rgba(212, 166, 42, .32);
}
.btn-gold:hover { color: #221a03; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(212, 166, 42, .42); }

.btn-teal {
    background: linear-gradient(135deg, var(--teal-light), var(--teal) 60%, var(--teal-dark));
    border: none; color: #fff;
    box-shadow: 0 6px 18px rgba(15, 122, 138, .3);
}
.btn-teal:hover { color: #fff; transform: translateY(-2px); }

.btn-outline-teal { border: 2px solid var(--teal); color: var(--teal); background: transparent; }
.btn-outline-teal:hover { background: var(--teal); color: #fff; }

.btn-outline-gold { border: 2px solid var(--gold); color: var(--gold-dark); background: transparent; }
.btn-outline-gold:hover { background: var(--gold); color: #221a03; }

.btn-outline-light-thin { border: 1.5px solid rgba(255,255,255,.5); color: #fff; }
.btn-outline-light-thin:hover { background: #fff; color: var(--ink); }

.btn-icon {
    width: 42px; height: 42px; padding: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--ink-line); color: var(--text); background: #fff;
}
.btn-icon:hover { border-color: var(--teal); color: var(--teal); }

/* En-tête ------------------------------------------------------------------ */
.topbar {
    background: var(--ink); color: rgba(255, 255, 255, .75);
    font-size: .85rem; padding: .45rem 0;
    border-bottom: 1px solid var(--ink-line);
}
.topbar a { color: rgba(255, 255, 255, .75); margin-right: 1.2rem; }
.topbar a:hover { color: var(--gold-light); }
.topbar .social { margin-right: .55rem; font-size: 1rem; }
.topbar .lang-switch {
    display: inline-flex; align-items: center; gap: .3rem;
    margin-left: .75rem; padding-left: .75rem; border-left: 1px solid var(--ink-line);
}
.topbar .lang-switch > i { color: rgba(255,255,255,.55); margin-right: .1rem; }
.topbar .lang-switch a {
    margin: 0; padding: .12rem .5rem; border-radius: 999px; font-weight: 700;
    font-size: .78rem; letter-spacing: .04em; border: 1px solid transparent;
}
.topbar .lang-switch a:hover { color: var(--gold-light); border-color: rgba(240,210,120,.4); }
.topbar .lang-switch a.active { background: var(--gold); color: #221a03; }

.site-header { background: rgba(255, 255, 255, .97); backdrop-filter: blur(8px); box-shadow: 0 2px 18px rgba(13,15,18,.08); z-index: 1030; }
.navbar { padding: .5rem 0; }
.navbar > .container { flex-wrap: wrap; gap: .5rem; }

/* Marque : le logo porte déjà le nom, aucun texte n'est répété à côté. */
.navbar-brand { display: flex; align-items: center; padding: 0; margin-right: .5rem; flex-shrink: 0; }
.navbar-brand img { height: 54px; width: auto; max-width: 210px; object-fit: contain; display: block; }

.navbar-nav { align-items: center; }
.navbar-nav .nav-link {
    font-weight: 600; color: var(--text); padding: .5rem .62rem;
    font-size: .93rem; white-space: nowrap; position: relative;
}
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color: var(--teal); }
.navbar-nav .nav-link.active::after {
    content: ""; position: absolute; left: .62rem; right: .62rem; bottom: .1rem;
    height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--gold), var(--teal-light));
}
.navbar-nav .dropdown-menu { border-radius: var(--radius-sm); border-color: #e8ebef; box-shadow: var(--shadow); }
.navbar-nav .dropdown-item.active { background: rgba(15,122,138,.1); color: var(--teal-dark); }

.nav-actions { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; margin-left: auto; }
.btn-quote { white-space: nowrap; padding: .55rem 1.1rem; font-size: .92rem; }
.btn-quote > .bi { display: none; }   /* l'icône ne sert que sur très petit écran */
.navbar-toggler { border: 1px solid var(--ink-line); padding: .35rem .6rem; }
.navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(15,122,138,.2); }

.cart-badge {
    position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px;
    background: var(--gold); color: #221a03; border-radius: 999px;
    font-size: .7rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.search-bar { background: var(--paper); border-top: 1px solid #e6e9ee; }

/* Bloc affiché uniquement dans le menu replié -------------------------------- */
.nav-mobile-extra { border-top: 1px solid #e8ebef; margin-top: .75rem; padding-top: .85rem; }
.nav-mobile-extra .lang-switch { margin: 0 0 .7rem; padding: 0; border: none; display: flex; gap: .5rem; }
.nav-mobile-extra .lang-switch a {
    padding: .25rem .8rem; border: 1px solid #dfe4ea; border-radius: 999px;
    font-size: .82rem; color: var(--text);
}
.nav-mobile-extra .lang-switch a.active { background: var(--teal); border-color: var(--teal); color: #fff; }
.nav-mobile-contact { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .7rem; }
.nav-mobile-contact a { font-size: .9rem; font-weight: 600; color: var(--text); }
.nav-mobile-contact i { color: var(--teal); margin-right: .4rem; }
.nav-mobile-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%; margin-right: .35rem;
    background: var(--paper); color: var(--text);
}
.nav-mobile-social a:hover { background: var(--gold); color: #221a03; }

/* Hero --------------------------------------------------------------------- */
.hero {
    position: relative; color: #fff; overflow: hidden;
    background: linear-gradient(120deg, #06181d 0%, #0d0f12 45%, #10222a 100%);
    padding: clamp(2.6rem, 5.5vw, 4.4rem) 0;
}
.hero::before {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(circle at 12% 20%, rgba(212, 166, 42, .22), transparent 45%),
        radial-gradient(circle at 88% 75%, rgba(23, 179, 196, .25), transparent 50%);
}
.hero-media { position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%; opacity: .28; }
.hero > .container { position: relative; z-index: 2; }
.hero .eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    text-transform: uppercase; letter-spacing: .2em; font-size: .74rem; font-weight: 700;
    color: var(--gold-light); border: 1px solid rgba(240, 210, 120, .35);
    padding: .35rem .9rem; border-radius: 999px; margin-bottom: 1.1rem;
}
.hero h1 { color: #fff; margin-bottom: 1rem; }
.hero h1 .accent { background: linear-gradient(90deg, var(--gold-light), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.lead { color: rgba(255, 255, 255, .82); max-width: 34rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }

.hero-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 2.5rem; }
.hero-stat {
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius); padding: 1rem 1.2rem; backdrop-filter: blur(6px);
}
.hero-stat strong { display: block; font-size: 1.6rem; color: var(--gold-light); line-height: 1.1; }
.hero-stat span { font-size: .8rem; color: rgba(255, 255, 255, .7); }


/* Sections ----------------------------------------------------------------- */
.section { padding: clamp(2.2rem, 4.2vw, 3.4rem) 0; }
.section-paper { background: var(--paper); }
.section-dark { background: var(--ink); color: #fff; }
.section-dark h2, .section-dark h3 { color: #fff; }

/* En-tete de rubrique : titre a gauche, lien vers la page complete a droite.
   Le lien ne prend plus une ligne entiere sous le ruban, la page raccourcit
   d autant. Sur telephone il repasse sous le titre. */
.section-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap;
}
.section-head .section-title { margin-bottom: 0; flex: 1 1 20rem; }
.section-head-lien { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 575.98px) {
    .section-head { align-items: flex-start; gap: .6rem; }
    .section-head-lien { width: 100%; }
}

.section-title { margin-bottom: 1.5rem; }
.section-title .eyebrow {
    text-transform: uppercase; letter-spacing: .18em; font-size: .74rem;
    font-weight: 700; color: var(--teal); display: block; margin-bottom: .4rem;
}
.section-title h2 { position: relative; display: inline-block; padding-bottom: .55rem; }
.section-title h2::after {
    content: ""; position: absolute; left: 0; bottom: 0; width: 68px; height: 4px;
    border-radius: 4px; background: linear-gradient(90deg, var(--gold), var(--teal-light));
}
.section-title p { color: var(--muted); margin-top: .5rem; margin-bottom: 0; max-width: 46rem; }
.section-title.text-center h2::after { left: 50%; transform: translateX(-50%); }
.section-title.text-center p { margin-left: auto; margin-right: auto; }

/* Cartes ------------------------------------------------------------------- */
.card {
    border: 1px solid #e8ebef; border-radius: var(--radius);
    overflow: hidden; transition: transform .25s ease, box-shadow .25s ease;
    background: #fff;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card-media { display: block; position: relative; overflow: hidden; background: var(--paper); }
.card-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .5s ease; }
.card:hover .card-media img { transform: scale(1.06); }
.card-body h3 a { color: var(--text); }
.card-body h3 a:hover { color: var(--teal); }
.card-badge {
    position: absolute; top: .7rem; left: .7rem; z-index: 2;
    background: rgba(13, 15, 18, .82); color: #fff;
    font-size: .7rem; font-weight: 600; padding: .25rem .65rem; border-radius: 999px;
}
.card-icon {
    position: absolute; right: .7rem; bottom: .7rem; width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center; border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: #221a03; font-size: 1.15rem;
}
.price-tag { font-size: .82rem; color: var(--muted); }
.price-tag strong { color: var(--gold-dark); font-size: .95rem; }
.product-price strong { color: var(--teal-dark); font-size: 1.1rem; }

/* Promotions --------------------------------------------------------------- */
.promo-strip { background: linear-gradient(90deg, var(--teal-dark), var(--teal)); color: #fff; padding: .8rem 0; }
.promo-strip .promo-item { display: inline-flex; align-items: center; gap: .6rem; margin-right: 2.5rem; font-weight: 600; }
.promo-strip a { color: var(--gold-light); }

/* Bloc pédagogique --------------------------------------------------------- */
.guide-tile {
    background: #fff; border: 1px solid #e8ebef; border-left: 4px solid var(--teal-light);
    border-radius: var(--radius-sm); padding: 1.2rem 1.3rem; height: 100%;
}
.guide-tile h3 { font-size: 1.02rem; margin-bottom: .5rem; }
.guide-tile p { color: var(--muted); font-size: .92rem; margin: 0; }
.guide-tile.gold { border-left-color: var(--gold); }

/* Dirigeant ---------------------------------------------------------------- */
.ceo-card {
    background: linear-gradient(135deg, #0d0f12, #10222a);
    color: #fff; border-radius: var(--radius); padding: clamp(1.3rem, 3vw, 2rem);
    box-shadow: var(--shadow-lg);
}
.ceo-photo {
    width: 118px; height: 118px; border-radius: 50%; object-fit: cover;
    border: 4px solid var(--gold); box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.ceo-bio p { color: rgba(255, 255, 255, .74); font-size: .95rem; margin-bottom: .7rem; }
.ceo-bio p:last-child { margin-bottom: 0; }

.ceo-quote { font-size: 1.06rem; font-style: italic; color: rgba(255,255,255,.9); border-left: 3px solid var(--gold); padding-left: 1rem; }

/* Témoignages -------------------------------------------------------------- */
.testimonial { background: #fff; border-radius: var(--radius); padding: 1.2rem; height: 100%; border: 1px solid #e8ebef; }
.testimonial .stars { color: var(--gold); letter-spacing: .1em; }
.testimonial-author { display: flex; align-items: center; gap: .75rem; margin-top: 1rem; }
.testimonial-author img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }

/* Comparateur avant / après ------------------------------------------------ */
.compare {
    position: relative; overflow: hidden; border-radius: var(--radius);
    user-select: none; touch-action: none; background: #000;
}
.compare img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.compare .compare-after { position: absolute; inset: 0; width: 50%; overflow: hidden; }
.compare .compare-after img { width: 100vw; max-width: none; height: 100%; }
.compare .compare-handle {
    position: absolute; top: 0; bottom: 0; left: 50%; width: 3px;
    background: var(--gold); transform: translateX(-50%); cursor: ew-resize; z-index: 3;
}
.compare .compare-handle::after {
    content: "\F12F"; font-family: "bootstrap-icons"; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%;
    background: var(--gold); color: #221a03; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
.compare .compare-label {
    position: absolute; bottom: .8rem; z-index: 2; background: rgba(13,15,18,.75);
    color: #fff; font-size: .75rem; padding: .2rem .7rem; border-radius: 999px;
}
.compare .compare-label.before { right: .8rem; }
.compare .compare-label.after  { left: .8rem; }

/* En-tête de page ---------------------------------------------------------- */
.page-header {
    background: linear-gradient(120deg, var(--ink) 0%, #10222a 100%);
    color: #fff; padding: clamp(2.2rem, 5vw, 3.6rem) 0 clamp(1.8rem, 4vw, 2.6rem);
    position: relative; overflow: hidden;
}
.page-header::after {
    content: ""; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px;
    border-radius: 50%; background: radial-gradient(circle, rgba(212,166,42,.20), transparent 70%);
}
.page-header h1 { color: #fff; margin: 0; }
.page-header .lead { color: rgba(255,255,255,.78); margin-top: .6rem; margin-bottom: 0; }
.page-header .breadcrumb { --bs-breadcrumb-divider-color: rgba(255,255,255,.4); margin-bottom: .8rem; }
.page-header .breadcrumb a { color: rgba(255,255,255,.72); }
.page-header .breadcrumb .active { color: var(--gold-light); }

/* Filtres ------------------------------------------------------------------ */
.filter-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.8rem; }
.filter-pills a {
    padding: .4rem 1rem; border-radius: 999px; border: 1px solid #dfe4ea;
    color: var(--text); font-size: .88rem; font-weight: 600; background: #fff;
}
.filter-pills a:hover { border-color: var(--teal); color: var(--teal); }
.filter-pills a.active { background: var(--teal); border-color: var(--teal); color: #fff; }

/* Formulaires -------------------------------------------------------------- */
.form-card { background: #fff; color: var(--text); border: 1px solid #e8ebef; border-radius: var(--radius); padding: clamp(1.2rem, 3vw, 2rem); box-shadow: var(--shadow); }

/* Chaque texte de formulaire porte sa couleur : rien n'est laissé à
   l'héritage, qu'un thème sombre imposé par le téléphone viendrait modifier. */
.form-label { font-weight: 600; font-size: .9rem; color: var(--text); }
.form-card .form-text, .form-text { color: var(--muted); }
.form-card h2, .form-card h3, .form-card h4, .form-card p, .form-card li { color: var(--text); }
.form-control, .form-select, .form-control::placeholder { color: var(--text); }
.form-control::placeholder { color: #98a1ac; opacity: 1; }
.form-control, .form-select { background-color: #fff; border-radius: var(--radius-sm); border-color: #dfe4ea; padding: .6rem .85rem; }
.form-control:focus, .form-select:focus { border-color: var(--teal); box-shadow: 0 0 0 .2rem rgba(15,122,138,.15); }
.required-mark { color: #dc3545; }
.champ-conseil, .champ-option {
    font-size: .74rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; padding: .1rem .45rem; border-radius: 999px; margin-left: .3rem;
}
.champ-conseil { color: var(--teal-dark); background: rgba(15, 122, 138, .12); }
.champ-option  { color: var(--muted); background: rgba(107, 116, 128, .12); }
[data-tel] .form-select { max-width: 11.5rem; }
@media (max-width: 419.98px) { [data-tel] .form-select { max-width: 7.5rem; font-size: .82rem; } }
.honeypot { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; }

/* Contact ------------------------------------------------------------------ */
.contact-list li { display: flex; gap: .8rem; padding: .65rem 0; border-bottom: 1px dashed #e3e7ec; }
.contact-list li:last-child { border-bottom: none; }
.contact-list i { color: var(--teal); font-size: 1.05rem; margin-top: .15rem; flex-shrink: 0; width: 20px; text-align: center; }
.contact-list strong { display: block; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.contact-list span { font-size: .95rem; color: var(--text); }
.contact-list a { color: var(--text); font-weight: 600; }
.contact-list a:hover { color: var(--teal); }

.tips-box { background: var(--paper); border: 1px solid #e3e7ec; border-radius: var(--radius-sm); padding: 1rem 1.1rem; }
.tips-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem 1.2rem; }
.tips-list li { display: flex; gap: .55rem; font-size: .88rem; color: var(--muted); }
.tips-list i { color: var(--gold-dark); margin-top: .15rem; flex-shrink: 0; }
@media (max-width: 767.98px) { .tips-list { grid-template-columns: 1fr; } }

/* Tableaux ----------------------------------------------------------------- */
.table-cart img { width: 60px; height: 60px; object-fit: cover; border-radius: var(--radius-sm); }
.summary-card { background: var(--paper); border-radius: var(--radius); padding: 1.4rem; position: sticky; top: 90px; }

/* Détail produit / projet -------------------------------------------------- */
.gallery-main img { width: 100%; border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: .5rem; margin-top: .6rem; }
.gallery-thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); cursor: pointer; border: 2px solid transparent; }
.gallery-thumbs img.active, .gallery-thumbs img:hover { border-color: var(--gold); }

.spec-list { list-style: none; padding: 0; margin: 0; }
.spec-list li { display: flex; gap: .6rem; padding: .45rem 0; border-bottom: 1px dashed #e8ebef; }
.spec-list li i { color: var(--teal); margin-top: .2rem; }
.spec-list li:last-child { border-bottom: none; }

.info-table th { width: 42%; color: var(--muted); font-weight: 600; }

/* Accordéon FAQ ------------------------------------------------------------ */
.accordion-button { font-weight: 600; }
.accordion-button:not(.collapsed) { background: rgba(15,122,138,.08); color: var(--teal-dark); }
.accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(15,122,138,.15); }

/* Pied de page ------------------------------------------------------------- */
.site-footer { background: var(--ink); color: rgba(255,255,255,.72); padding: 3.5rem 0 1.5rem; margin-top: 3rem; }
.site-footer .footer-logo { height: 62px; width: auto; max-width: 220px; object-fit: contain; }
.site-footer h6 { color: #fff; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; margin-bottom: 1rem; }
.footer-links a, .footer-legal a { color: rgba(255,255,255,.72); }
.footer-links li { margin-bottom: .45rem; }
.footer-links a:hover, .footer-legal a:hover { color: var(--gold-light); }
.footer-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%; margin-right: .4rem;
    background: rgba(255,255,255,.08); color: #fff;
}
.footer-social a:hover { background: var(--gold); color: #221a03; }
.site-footer hr { border-color: var(--ink-line); opacity: 1; margin: 2rem 0 1.2rem; }

/* Boutons flottants -------------------------------------------------------- */
.floating-buttons { position: fixed; right: 18px; bottom: 92px; z-index: 1040; display: flex; flex-direction: column; gap: .6rem; }
.fab {
    width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.4rem; box-shadow: var(--shadow); transition: transform .2s ease;
}
.fab:hover { transform: scale(1.08); color: #fff; }
.fab-whatsapp { background: #25d366; }
.fab-phone    { background: var(--gold); color: #221a03; }
.fab-phone:hover { color: #221a03; }
.fab-facebook { background: #1877f2; }
.fab-messenger{ background: #0084ff; }

/* Chat --------------------------------------------------------------------- */
.chat-widget { position: fixed; right: 18px; bottom: 22px; z-index: 1045; }
.chat-toggle {
    width: 58px; height: 58px; border-radius: 50%; border: none; color: #fff; font-size: 1.5rem;
    background: linear-gradient(135deg, var(--teal-light), var(--teal-dark));
    box-shadow: var(--shadow-lg); position: relative;
}
.chat-toggle-badge {
    position: absolute; top: 0; right: 0; min-width: 20px; height: 20px; border-radius: 999px;
    background: var(--gold); color: #221a03; font-size: .7rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.chat-panel {
    position: absolute; right: 0; bottom: 70px; width: min(93vw, 350px);
    background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column; overflow: hidden; border: 1px solid #e8ebef;
}
.chat-head {
    background: linear-gradient(135deg, var(--teal), var(--teal-dark)); color: #fff;
    padding: .85rem 1rem; display: flex; align-items: center; justify-content: space-between;
}
.chat-head small { color: rgba(255,255,255,.75); font-size: .74rem; }
.chat-body { height: 300px; overflow-y: auto; padding: 1rem; background: var(--paper); display: flex; flex-direction: column; gap: .5rem; }
.chat-msg { max-width: 82%; }
.chat-msg span { display: inline-block; padding: .55rem .8rem; border-radius: var(--radius-sm); font-size: .88rem; }
.chat-msg img { max-width: 100%; border-radius: var(--radius-sm); margin-top: .3rem; }
.chat-msg-admin { align-self: flex-start; }
.chat-msg-admin span { background: #fff; border: 1px solid #e3e7ec; }
.chat-msg-visitor { align-self: flex-end; text-align: right; }
.chat-msg-visitor span { background: var(--teal); color: #fff; }
.chat-msg time { display: block; font-size: .68rem; color: var(--muted); margin-top: .15rem; }
.chat-form { padding: .7rem; border-top: 1px solid #e8ebef; }
.chat-identity { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin-bottom: .45rem; }
.chat-input { display: flex; align-items: center; gap: .4rem; }
.chat-attach { cursor: pointer; color: var(--muted); font-size: 1.15rem; padding: 0 .2rem; }
.chat-attach:hover { color: var(--teal); }
.chat-feedback { color: var(--muted); min-height: 1rem; }

/* Administration ------------------------------------------------------------ */
.admin-body { background: #f2f4f7; }
.admin-shell { display: flex; min-height: 100vh; }
.admin-sidebar {
    width: 258px; flex-shrink: 0; background: var(--ink); color: rgba(255,255,255,.72);
    padding: 1rem 0; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.admin-brand { display: flex; align-items: center; gap: .6rem; padding: .4rem 1.2rem 1.1rem; border-bottom: 1px solid var(--ink-line); }
.admin-brand img { height: 40px; width: auto; max-width: 80px; object-fit: contain; }
.admin-brand strong { color: #fff; font-size: 1.05rem; letter-spacing: .05em; }
.admin-brand small { display: block; font-size: .66rem; color: var(--gold); letter-spacing: .12em; text-transform: uppercase; }
.admin-nav { list-style: none; padding: .8rem 0; margin: 0; }
.admin-nav li a {
    display: flex; align-items: center; gap: .7rem; padding: .62rem 1.2rem;
    color: rgba(255,255,255,.72); font-size: .92rem; border-left: 3px solid transparent;
}
.admin-nav li a:hover { background: rgba(255,255,255,.05); color: #fff; }
.admin-nav li a.active { background: rgba(23,179,196,.14); color: #fff; border-left-color: var(--gold); }
.admin-nav .nav-group { padding: 1rem 1.2rem .35rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; color: rgba(255,255,255,.36); }
.admin-nav .badge { margin-left: auto; }

.admin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.admin-topbar {
    background: #fff; border-bottom: 1px solid #e4e8ed; padding: .7rem 1.4rem;
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    flex-wrap: wrap; position: sticky; top: 0; z-index: 100;
}
/* Le titre peut être long : il doit pouvoir se tronquer, ce qui suppose
   min-width:0 sur le conteneur flex ET sur le titre lui-même. */
.admin-topbar-left { min-width: 0; flex: 1 1 auto; }
.admin-topbar h1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-topbar-right { flex-shrink: 0; }
.admin-user-btn { max-width: 200px; }
.admin-user-btn > span { display: inline-block; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.admin-user-menu { max-width: 250px; }
.admin-user-menu .dropdown-item-text { word-break: break-word; }
.admin-content { padding: 1.4rem; flex: 1; min-width: 0; }
.admin-content > * { min-width: 0; }

.stat-card {
    background: #fff; border-radius: var(--radius); padding: 1.1rem 1.2rem;
    border: 1px solid #e4e8ed; display: flex; align-items: center; gap: 1rem; height: 100%;
}
.stat-card .icon {
    width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center;
    justify-content: center; font-size: 1.3rem; color: #fff; flex-shrink: 0;
}
.stat-card strong { display: block; font-size: 1.5rem; line-height: 1.1; }
.stat-card span { font-size: .8rem; color: var(--muted); }

.admin-card { background: #fff; border: 1px solid #e4e8ed; border-radius: var(--radius); }
.admin-card > .admin-card-head {
    padding: .9rem 1.2rem; border-bottom: 1px solid #eef1f4;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.admin-card > .admin-card-head h2 { font-size: 1.05rem; margin: 0; }
.admin-table { margin: 0; }
.admin-table th { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.admin-table td { vertical-align: middle; font-size: .92rem; }
.admin-table img.thumb { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; }

.chart { display: flex; align-items: flex-end; gap: 2px; height: 150px; }
.chart .bar { flex: 1; background: linear-gradient(180deg, var(--teal-light), var(--teal)); border-radius: 3px 3px 0 0; min-height: 2px; }
.chart .bar.gold { background: linear-gradient(180deg, var(--gold-light), var(--gold)); }

.login-page { min-height: 100vh; display: flex; align-items: center; background: linear-gradient(135deg, #0d0f12, #10222a); }
.login-card { background: #fff; border-radius: var(--radius); padding: 2.2rem; box-shadow: var(--shadow-lg); max-width: 420px; width: 100%; }

/* Utilitaires -------------------------------------------------------------- */
.object-cover { object-fit: cover; }
.ratio-photo { aspect-ratio: 4 / 3; }
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--muted); }
.empty-state i { font-size: 2.6rem; color: #cfd6de; display: block; margin-bottom: .8rem; }

/* Galerie de l administration ----------------------------------------------
   Toutes les images du site, avec un liseré doré sur celles qui servent de
   photo principale. */
.galerie-admin {
    display: grid; gap: .9rem;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.galerie-case {
    margin: 0; background: #fff; border: 1px solid #e8ebef;
    border-radius: var(--radius-sm); overflow: hidden; display: flex; flex-direction: column;
}
.galerie-case.est-avant { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(212, 166, 42, .18); }
.galerie-case.est-manquante { border-color: #dc3545; }
.galerie-vignette { position: relative; aspect-ratio: 4 / 3; background: var(--paper); }
.galerie-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galerie-absente {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: .3rem;
    color: #dc3545; font-size: .8rem; text-align: center; padding: .5rem;
}
.badge-avant {
    display: inline-flex; align-items: center; gap: .25rem;
    background: var(--gold); color: #221a03; font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    padding: .15rem .45rem; border-radius: 999px;
}
.galerie-vignette .badge-avant { position: absolute; top: .4rem; left: .4rem; box-shadow: var(--shadow); }
.galerie-case figcaption { padding: .6rem .65rem .7rem; font-size: .85rem; }

/* Mosaique de photos et visionneuse ----------------------------------------
   Les vignettes s'assemblent en damier. Au clic, la photo pleine taille
   s'ouvre par-dessus la page : elle n'est telechargee qu'a ce moment,
   la mosaique ne coute donc que le poids de ses miniatures. */
.mosaique {
    display: grid; gap: .5rem;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}
.mosaique-item {
    padding: 0; border: 0; background: none; cursor: pointer;
    border-radius: var(--radius-sm); overflow: hidden; position: relative;
    aspect-ratio: 1; display: block;
}
.mosaique-item img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .35s ease, filter .35s ease;
}
.mosaique-item:hover img, .mosaique-item:focus-visible img { transform: scale(1.07); filter: brightness(1.06); }
.mosaique-item:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

/* Version compacte, logee dans la carte de la prochaine formation :
   six vignettes sur deux rangs, la derniere annonce le reste. */
.mosaique-compacte { grid-template-columns: repeat(6, 1fr); gap: .25rem; }
.mosaique-item[data-reste]::after {
    content: attr(data-reste);
    position: absolute; inset: 0; display: flex;
    align-items: center; justify-content: center;
    background: rgba(13, 15, 18, .62); color: #fff;
    font-family: var(--font-title); font-weight: 700; font-size: 1.05rem;
}

.visionneuse {
    position: fixed; inset: 0; z-index: 1080; display: flex;
    align-items: center; justify-content: center;
    background: rgba(8, 10, 13, .94); padding: 1rem;
}
.visionneuse[hidden] { display: none; }
.visionneuse img {
    max-width: 100%; max-height: calc(100vh - 7rem);
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
    object-fit: contain;
}
.visionneuse-fermer, .visionneuse-prec, .visionneuse-suiv {
    position: absolute; border: 0; cursor: pointer; color: #fff;
    background: rgba(255, 255, 255, .12); border-radius: 50%;
    width: 48px; height: 48px; display: flex; align-items: center;
    justify-content: center; font-size: 1.4rem; transition: background .2s ease;
}
.visionneuse-fermer:hover, .visionneuse-prec:hover, .visionneuse-suiv:hover { background: var(--teal); }
.visionneuse-fermer { top: 1rem; right: 1rem; }
.visionneuse-prec { left: 1rem; top: 50%; transform: translateY(-50%); }
.visionneuse-suiv { right: 1rem; top: 50%; transform: translateY(-50%); }
.visionneuse-compteur {
    position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%);
    color: rgba(255, 255, 255, .8); font-size: .9rem; letter-spacing: .04em;
}
@media (max-width: 575.98px) {
    .visionneuse-prec { left: .4rem; }
    .visionneuse-suiv { right: .4rem; }
    .visionneuse-fermer { top: .5rem; right: .5rem; }
    .visionneuse-fermer, .visionneuse-prec, .visionneuse-suiv { width: 44px; height: 44px; }
}

/* Vidéos -------------------------------------------------------------------
   Même cadre pour un lecteur YouTube, Vimeo ou un fichier envoyé : le format
   16/9 est réservé avant le chargement, la page ne saute donc jamais. */
.video-frame {
    position: relative; width: 100%; aspect-ratio: 16 / 9;
    background: #0d0f12; border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow);
}
.video-frame iframe,
.video-frame video {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
    object-fit: cover; display: block;
}

/* Bouton de lecture pose sur l'affiche, tant que la video n'a pas demarre. */
.video-play {
    position: absolute; inset: 0; margin: auto;
    width: 68px; height: 68px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 0; cursor: pointer; z-index: 2;
    background: rgba(13, 15, 18, .55); color: #fff; font-size: 2rem;
    backdrop-filter: blur(2px);
    transition: background .2s ease, transform .2s ease, opacity .2s ease;
}
.video-play:hover { background: var(--teal); transform: scale(1.06); }
.video-frame.is-playing .video-play { opacity: 0; pointer-events: none; }

/* Pastille de lecture sur une vignette de galerie. */
.media-video { position: relative; display: block; }
.media-video::after {
    content: "\F4F4"; font-family: "bootstrap-icons";
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 2rem; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.6);
    background: rgba(13, 15, 18, .28); border-radius: var(--radius-sm);
}

/* Pastille d'initiales -----------------------------------------------------
   Affichee a la place d'une photo absente. Mieux qu'un carre gris, et plus
   honnete qu'un visage d'inconnu sur le temoignage d'un client. La teinte
   est derivee du nom, elle reste donc la meme d'une page a l'autre. */
.avatar-initiales {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
    font-family: var(--font-title); font-weight: 700; letter-spacing: .02em;
    color: #fff; background: linear-gradient(135deg,
        hsl(var(--teinte, 190) 45% 42%), hsl(calc(var(--teinte, 190) + 24) 55% 30%));
}
.ceo-photo.avatar-initiales { width: 118px; height: 118px; font-size: 2.4rem; }
.avatar-initiales.avatar-grand {
    width: 100%; aspect-ratio: 4 / 3; height: auto; border-radius: var(--radius);
    font-size: clamp(3rem, 12vw, 6rem);
}

/* Rubans horizontaux --------------------------------------------------------
   Les listes de l'accueil defilent de la gauche vers la droite, a toutes les
   largeurs : une carte et quart sur telephone, deux sur tablette, trois sur
   ordinateur. La page d'accueil tient ainsi sur un parcours court, et rien
   n'est retire du contenu. Les fleches ne s'affichent que la ou une souris
   existe ; au doigt, on fait simplement glisser. */
.rail { position: relative; }

.rail-track {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 1.25rem;
    /* « proximity » plutot que « mandatory » : le doigt garde la main, la
       carte s'aligne seulement quand on relache pres d'un bord.
       Aucun scroll-behavior ici : il est passe par le script au clic sur une
       fleche, sinon le defilement au doigt devient pateux sur telephone. */
    scroll-snap-type: x proximity;
    padding: .25rem 0 1rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #cfd6de transparent;
}
.rail-track > * {
    flex: 0 0 auto;
    width: 80%;
    scroll-snap-align: start;
    max-width: 100%;
}
.rail-track.is-dragging { scroll-behavior: auto; cursor: grabbing; scroll-snap-type: none; }
.rail-track.is-dragging * { pointer-events: none; }

.rail-track::-webkit-scrollbar { height: 5px; }
.rail-track::-webkit-scrollbar-track { background: transparent; }
.rail-track::-webkit-scrollbar-thumb { background: #cfd6de; border-radius: 5px; }

/* Toutes les cartes d'un meme ruban gardent la meme hauteur. */
.rail-track > * > .card,
.rail-track > * > .guide-tile,
.rail-track > * > .testimonial { height: 100%; }

/* Fleches ------------------------------------------------------------------ */
.rail-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%;
    display: none; align-items: center; justify-content: center;
    background: #fff; color: var(--ink); border: 1px solid #e1e6ec;
    box-shadow: var(--shadow); cursor: pointer; z-index: 3;
    font-size: 1.1rem; transition: opacity .2s ease, transform .2s ease;
}
.rail-nav:hover { color: var(--teal); border-color: var(--teal); transform: translateY(-50%) scale(1.06); }
.rail-nav[disabled] { opacity: 0; pointer-events: none; }
.rail-prev { left: -18px; }
.rail-next { right: -18px; }

@media (hover: hover) and (pointer: fine) and (min-width: 576px) {
    .rail-nav { display: inline-flex; }
}

/* Sur fond sombre, les fleches restent lisibles. */
.section-dark .rail-nav { background: var(--ink-soft); color: #fff; border-color: var(--ink-line); }

/* Points de position ------------------------------------------------------- */
.rail-dots { display: flex; justify-content: center; gap: .4rem; margin-top: .2rem; }
.rail-dot {
    width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
    background: #cfd6de; cursor: pointer; transition: width .2s ease, background .2s ease;
}
.rail-dot.active { width: 22px; border-radius: 999px; background: var(--teal); }

/* Indication de glissement, seulement sans souris. */
.rail-hint { display: none; align-items: center; gap: .35rem; font-size: .8rem; color: var(--muted); margin-bottom: .6rem; }
@media (hover: none) { .rail-hint { display: flex; } }

/* Largeur des cartes selon l'ecran ----------------------------------------- */
@media (min-width: 576px) { .rail-track > * { width: 46%; } }
@media (min-width: 992px) { .rail-track > * { width: 31.5%; } }
@media (min-width: 1200px) {
    .rail-prev { left: -22px; }
    .rail-next { right: -22px; }
}

/* Les rubans de vignettes plus petites (produits) en montrent davantage. */
@media (min-width: 576px) { .rail-sm .rail-track > * { width: 31.5%; } }
@media (min-width: 992px) { .rail-sm .rail-track > * { width: 23%; } }

/* Adaptatif ---------------------------------------------------------------- */

/* Écrans larges : la barre de navigation dispose de toute la place. */
@media (min-width: 1400px) {
    .navbar-brand img { height: 58px; }
    .navbar-nav .nav-link { font-size: .96rem; padding: .5rem .8rem; }
    .navbar-nav .nav-link.active::after { left: .8rem; right: .8rem; }
}

/* 1200 a 1399 px : on resserre pour que tous les liens tiennent sur une ligne. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .navbar-brand img { height: 48px; max-width: 175px; }
    .navbar-nav .nav-link { font-size: .875rem; padding: .5rem .5rem; }
    .navbar-nav .nav-link.active::after { left: .5rem; right: .5rem; }
    .btn-quote { padding: .5rem .9rem; font-size: .86rem; }
    .btn-icon { width: 38px; height: 38px; }
}

/* Menu replié (moins de 1200 px) -------------------------------------------- */
@media (max-width: 1199.98px) {
    .navbar > .container { flex-wrap: nowrap; position: relative; }

    /* Le panneau se détache sous l'en-tête au lieu de chercher une place sur
       la ligne : avec flex-wrap nowrap il ne pouvait pas passer à la ligne et
       sortait de l'écran par la droite. */
    .navbar-collapse {
        position: absolute; top: 100%; left: 0; right: 0; z-index: 1035;
        background: #fff; color: var(--text); padding: 1rem;
        border: 1px solid #e8ebef; border-radius: var(--radius);
        margin-top: .6rem; box-shadow: var(--shadow-lg);
        max-height: calc(100vh - 6.5rem); overflow-y: auto;
    }
    .navbar-nav .nav-link { padding: .65rem .2rem; font-size: 1rem; border-bottom: 1px solid #f1f3f6; }
    .navbar-nav .nav-item:last-child .nav-link { border-bottom: none; }
    .navbar-nav .nav-link.active::after { display: none; }
    .navbar-nav .nav-link.active { color: var(--teal); }
    .navbar-nav .dropdown-menu { border: none; box-shadow: none; padding-left: .8rem; }
}

/* Les gouttières larges de Bootstrap dépassent du conteneur sur petit écran :
   la marge négative de .row (g-5 = 24 px) excède le padding du conteneur (12 px). */
@media (max-width: 767.98px) {
    .row.g-5, .row.gx-5 { --bs-gutter-x: 1.5rem; }
    .row.g-4, .row.gx-4 { --bs-gutter-x: 1.25rem; }
}

@media (max-width: 991.98px) {
    .navbar-brand img { height: 46px; max-width: 165px; }
    .btn-quote { padding: .5rem .9rem; font-size: .85rem; }
    .admin-sidebar { position: fixed; left: -280px; top: 0; z-index: 1050; transition: left .25s ease; }
    .admin-sidebar.open { left: 0; }
    .admin-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1049; }
    .summary-card { position: static; }
    .admin-content { padding: 1rem .8rem; }
    .admin-topbar { padding: .6rem .8rem; }
    .admin-user-btn > span { max-width: 90px; }
}

/* Administration sur téléphone : la barre supérieure reste sur une ligne. */
@media (max-width: 575.98px) {
    .admin-topbar .btn-site span { display: none; }
    .admin-user-btn > span { display: none; }
    .admin-user-btn { max-width: none; }
    .admin-user-btn .bi { margin-right: 0 !important; }
    .admin-topbar h1 { font-size: .95rem; }
    .admin-card > .admin-card-head { padding: .75rem .85rem; }
    .admin-card > .admin-card-head h2 { font-size: .95rem; }
    .stat-card { padding: .8rem .85rem; gap: .7rem; }
    .stat-card .icon { width: 38px; height: 38px; font-size: 1.1rem; }
    .stat-card strong { font-size: 1.2rem; }
    .stat-card span { font-size: .72rem; }
    .login-card { padding: 1.5rem; }
}

/* Téléphones : on ne garde dans la barre que l'essentiel. ------------------- */
@media (max-width: 575.98px) {
    .navbar-brand img { height: 40px; max-width: 132px; }
    .nav-hide-sm { display: none !important; }
    .btn-quote { padding: .45rem .75rem; font-size: .78rem; }
    .btn-icon { width: 42px; height: 42px; font-size: 1rem; }
    .nav-actions { gap: .3rem; }

    .hero { padding: 2.6rem 0; }
    .hero-actions .btn { flex: 1 1 100%; }
    .hero-stats { grid-template-columns: 1fr 1fr; gap: .55rem; margin-top: 1.8rem; }
    .hero-stat { padding: .65rem .75rem; }
    .hero-stat strong { font-size: 1.2rem; }
    .hero-stat span { font-size: .72rem; }

    .section { padding: 2.2rem 0; }
    .section-title { margin-bottom: 1.5rem; }
    .promo-strip .promo-item { margin-right: 1.2rem; font-size: .85rem; }

    .filter-pills { gap: .35rem; }
    .filter-pills a { padding: .32rem .75rem; font-size: .8rem; }

    .floating-buttons { right: 12px; bottom: 82px; gap: .45rem; }
    .fab { width: 46px; height: 46px; font-size: 1.2rem; }
    .chat-widget { right: 12px; bottom: 14px; }
    .chat-toggle { width: 50px; height: 50px; font-size: 1.25rem; }

    /* Les boutons flottants occupent le coin inférieur droit : le bas de page
       gagne la hauteur correspondante, sinon ils masquent les derniers liens. */
    .site-footer { padding-bottom: 5.5rem; }
    .chat-panel { width: calc(100vw - 24px); right: 0; }
    .chat-body { height: 260px; }

    .ceo-photo { width: 118px; height: 118px; }
    .gallery-thumbs { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
    .table-cart img { width: 46px; height: 46px; }
}

/* Très petits écrans : le bouton « Devis » ne garde que son icône. ---------- */
@media (max-width: 419.98px) {
    .btn-quote > .bi { display: inline-block; }
    .btn-quote .btn-quote-label { display: none; }
    .btn-quote { padding: .45rem .7rem; font-size: 1rem; }
    .navbar-brand img { height: 36px; max-width: 118px; }
    .btn-icon { width: 40px; height: 40px; font-size: .95rem; }
    .navbar-toggler { padding: .45rem .55rem; }
}

@media (max-width: 359.98px) {
    .navbar-brand img { height: 32px; max-width: 100px; }
    .hero-stats { grid-template-columns: 1fr; }
    .container, .container-fluid { padding-left: .6rem; padding-right: .6rem; }
    /* La gouttière des lignes doit rester alignée sur le padding réduit
       du conteneur, sinon la marge négative de .row déborde de 2 px. */
    .row, .row.g-3, .row.gx-3, .row.g-4, .row.gx-4, .row.g-5, .row.gx-5 { --bs-gutter-x: 1.2rem; }
}

/* Confort tactile : sur écran sans souris, les cibles gagnent en hauteur et
   les mots trop longs (emails, références) cèdent plutôt que de déborder. */
@media (hover: none) and (pointer: coarse) {
    .btn:not(.btn-icon), .nav-link, .dropdown-item, .page-link,
    .navbar-toggler, .filter-pills a { min-height: 44px; }
    .btn:not(.btn-icon), .filter-pills a { display: inline-flex; align-items: center; justify-content: center; }

    /* Les boutons ronds restent ronds : on agrandit les deux dimensions. */
    .btn-icon { width: 44px; height: 44px; }

    /* 16 px dans les champs : en dessous, iOS zoome à la saisie. */
    .form-control, .form-select { min-height: 46px; font-size: 16px; }
}

.info-table td, .info-table th, .admin-table td, .table-cart td { overflow-wrap: anywhere; }
.card-body h3, .card-body h2, .card-body p { overflow-wrap: break-word; }

/* Un tableau large défile dans son cadre, jamais la page entière. */
.table-responsive { -webkit-overflow-scrolling: touch; }

@media print {
    .site-header, .site-footer, .floating-buttons, .chat-widget, .topbar, .btn { display: none !important; }
    body { background: #fff; }
    .section { padding: 1rem 0; }
}

/* Bandeau d'envoi sur WhatsApp, apres l'enregistrement d'une demande. */
.wa-envoi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1rem 0 0;
    padding: 1rem 1.15rem;
    border: 1px solid rgba(15, 122, 138, .35);
    border-left: 4px solid var(--teal);
    border-radius: .7rem;
    background: rgba(15, 122, 138, .06);
}
.wa-envoi p { color: #4b5563; max-width: 46ch; }
@media (max-width: 575.98px) {
    .wa-envoi { flex-direction: column; align-items: stretch; }
}