*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Le navigateur ne transmet pas la police de la page aux champs et boutons (Arial sinon) */
button, input, select, textarea { font-family: inherit; }

:root {
    --vert:         #83B735;
    --vert-c:       #6a9528;
    /* Vert réservé au TEXTE. --vert sur blanc donne 2,39:1, sous le seuil AA de
       4,5:1 ; celui-ci donne 5,13:1, et 4,56:1 sur le fond le plus clair où il
       sert (chips de filtre #e8f5e9). Valeur déjà employée en dur à 6 endroits
       du fichier avant d'être nommée ici — ce n'est pas une couleur ajoutée.
       Les aplats, bordures et icônes restent sur --vert.
       Si couleur_principale change en admin, cette valeur est à re-dériver :
       elle n'est pas calculée à partir de --vert. */
    --vert-texte:   #4a7a20;
    /* Gris réservé au TEXTE secondaire. Le fichier accumulait 6 gris sous le
       seuil AA — #888 (3,54:1), #999 (2,85), #9ca3af (2,54), #aaa (2,32),
       #bbb (1,92), #ccc (1,61). Celui-ci donne 5,74:1 sur blanc et 5,27:1 sur
       les sections en --gris, donc il passe partout où il sert. Déjà employé
       en dur 11 fois avant d'être nommé ici — ce n'est pas une couleur ajoutée.
       La hiérarchie entre texte principal et secondaire passe désormais par la
       taille et la graisse, pas par un gris illisible. */
    --gris-texte:   #666;
    --texte:        #212121;
    --fond:         #ffffff;
    --header-bg:    #ffffff;
    --footer-bg:    #1a1a2e;
    --footer-texte: #cccccc;
    --police:       'Balsamiq Sans', cursive;
    --gris:         #f5f5f5;
    --radius:       5px;
    --radius-lg:    10px;
    --radius-xl:    14px;
    --radius-pilule: 999px;
    --shadow:       0 0 15px rgba(0,0,0,.1);
    --shadow-sm:    0 2px 8px rgba(0,0,0,.08);
    --shadow-md:    0 6px 20px rgba(0,0,0,.1);
    --shadow-lg:    0 20px 60px rgba(0,0,0,.25);
    --shadow-glow:       0 4px 14px rgba(131,183,53,.35);
    --shadow-glow-hover: 0 6px 20px rgba(131,183,53,.4);
    --shadow-focus: 0 0 0 3px rgba(131,183,53,.15);
}

body {
    font-family: var(--police);
    color: var(--texte);
    background: var(--fond);
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.site-footer { margin-top: auto; }

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

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ── Header ── */
.site-header {
    background: var(--header-bg);
    border-bottom: none;
    position: sticky; top: 0; z-index: 200;
    padding: 12px 0 10px;
    box-shadow: 0 2px 0 0 var(--vert), 0 3px 16px rgba(0,0,0,.08);
}
.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}
.logo { display: flex; align-items: center; gap: .5rem; font-size: 1.1rem; font-weight: 700; min-width: 0; }
.logo-amp { background: var(--vert); color: #fff; padding: .25rem .5rem; border-radius: var(--radius); }
.logo-img { max-height: 80px; max-width: 240px; object-fit: contain; display: block; }
.main-nav { flex: 1; min-width: 0; overflow: hidden; }
.main-nav ul { list-style: none; display: flex; flex-wrap: nowrap; gap: 1.25rem; white-space: nowrap; }
.main-nav a { font-weight: 500; font-size: .92rem; transition: color .2s; white-space: nowrap; }
.main-nav a:hover { color: var(--vert-texte); }
.header-actions { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }
.btn-link { font-weight: 500; }
.btn-link:hover { color: var(--vert-texte); }

/* Hamburger menu */
.hamburger-ticker { display: none; }
.hamburger-label {
    display: none;
    flex-direction: column; gap: 5px;
    cursor: pointer; padding: 6px; z-index: 300; position: relative;
}
.hamburger-label span {
    display: block; width: 26px; height: 2px;
    background: var(--vert);
    transition: all .25s;
}
.slide-menu {
    display: block; position: fixed;
    top: 0; left: -240px; width: 240px; height: 100%;
    background: #fff; border-right: 2px solid var(--vert);
    z-index: 250; padding: 4rem 1.5rem 2rem;
    transition: left .25s ease;
    list-style: none;
}
.slide-menu a { display: block; padding: .75rem 0; font-size: 1.05rem; font-weight: 700; border-bottom: 1px solid #f0f0f0; color: var(--texte); }
.slide-menu a:hover { color: var(--vert-texte); }
.slide-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.35); z-index: 240;
}
.hamburger-ticker:checked ~ .slide-menu   { left: 0; }
.hamburger-ticker:checked ~ .slide-overlay { display: block; }
.hamburger-ticker:checked ~ .site-header .hamburger-label span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger-ticker:checked ~ .site-header .hamburger-label span:nth-child(2) { opacity: 0; }
.hamburger-ticker:checked ~ .site-header .hamburger-label span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ── Boutons ── */
.btn-primary, .btn-devis {
    background: var(--vert);
    color: #fff;
    padding: .5rem 1.5rem;
    border-radius: var(--radius);
    font-weight: 600;
    transition: background .2s;
    display: inline-block;
    border: none;       /* sinon un <button> garde la bordure noire du navigateur */
    cursor: pointer;
}
.btn-primary:hover, .btn-devis:hover { background: var(--vert-c); }
.btn-secondary {
    background: transparent;   /* un <button> prendrait le gris du navigateur */
    cursor: pointer;
    border: 2px solid var(--vert);
    color: var(--vert-texte);
    padding: .5rem 1.5rem;
    border-radius: var(--radius);
    font-weight: 600;
    display: inline-block;
    transition: all .2s;
}
.btn-secondary:hover { background: var(--vert); color: #fff; }

/* ── Hero ── */
/* ── Hero slider ── */
.hero-spacer {
    height: var(--hero-spacer, 2rem);
    background: linear-gradient(to bottom, rgba(131,183,53,.07), transparent);
}
.hero-slider {
    position: relative;
    overflow: hidden;
    background: #1a1a2e;
    height: clamp(240px, 33.5vw, 520px);
    color: #fff;
}
.hero-slide {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    opacity: 0;
    transition: opacity .8s ease;
    pointer-events: none;
}
.hero-slide.active { opacity: 1; pointer-events: auto; z-index: 1; }
.hero-slide-bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
}
.hero-slide-overlay {
    position: absolute; inset: 0;
    /* Voile seulement derrière le texte (à gauche) : l'ancien (55 % → 30 % sur toute
       l'image) assombrissait toutes les bannières (demande de Marc, 05/10). */
    background: radial-gradient(ellipse closest-side at center, rgba(0,0,0,0) 30%, rgba(0,0,0,.35) 100%);   /* centre clair, bords à .35 (05/10) */

}

.hero-slide-content {
    position: relative; z-index: 1;
    padding: 2rem 1.5rem;
    max-width: 780px;
}
/* Le premier slide porte le h1 de la page, les suivants un h2 : même habillage. */
.hero-slide-content h1,
.hero-slide-content h2 {
    font-size: clamp(1.5rem, 4vw, 2.8rem);
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.hero-slide-content p,
.hero-slide-content .hero-slide-sub p {
    font-size: clamp(.95rem, 2vw, 1.15rem);
    opacity: .92;
    margin-bottom: 2rem;
    line-height: 1.6;
    text-shadow: 0 1px 4px rgba(0,0,0,.5);

}
.hero-slide-content .hero-slide-sub { margin: 0; }
.hero-slide-content .btn-primary {
    background: #fff; color: var(--vert-texte);
    font-size: 1rem; padding: .75rem 2rem;
}
.hero-slide-content .btn-primary:hover { background: var(--gris); }

/* Flèches */
.hero-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 10; background: rgba(255,255,255,.15);
    border: none; border-radius: 50%;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: #fff;
    transition: background .2s;
    backdrop-filter: blur(4px);
}
.hero-arrow:hover { background: rgba(255,255,255,.3); }
.hero-arrow--prev { left: 1rem; }
.hero-arrow--next { right: 1rem; }

/* Dots */
.hero-dots {
    position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%);
    z-index: 10; display: flex; gap: .5rem;
}
.hero-dot {
    width: 44px; height: 44px; border-radius: 50%; box-sizing: border-box;   /* rond visible de 8 px, zone de 44 */
    background: rgba(255,255,255,.45); border: none; cursor: pointer;
    padding: 18px; background-clip: content-box; margin: -18px;
    transition: background .2s, transform .2s;
}
.hero-dot.active { background-color: #fff; transform: scale(1.3); }   /* background-color : le raccourci « background » annulerait background-clip */

/* Fallback : hero statique (si aucune slide) */
.hero {
    position: relative;
    background: linear-gradient(135deg, var(--vert) 0%, var(--vert-c) 100%);
    color: #fff;
    padding: 5rem 0;
    text-align: center;
}
.hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 100%);
}
.hero h1 { font-size: clamp(1.6rem, 4vw, 2.8rem); margin-bottom: 1rem; font-weight: 700; }
.hero-sub { font-size: 1.1rem; opacity: .9; margin-bottom: 2rem; }
.hero .btn-primary { background: #fff; color: var(--vert-texte); font-size: 1rem; padding: .75rem 2rem; }
.hero .btn-primary:hover { background: var(--gris); }

/* ── Sections ── */
section { padding: 3rem 0; }
section:nth-child(even) { background: var(--gris); }
section h2 { font-size: 1.8rem; margin-bottom: 2rem; text-align: center; }

/* ── Grille univers ── */
.univers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}
@media (max-width: 1024px) { .univers-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .univers-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .univers-grid { grid-template-columns: 1fr; } }
.univers-card {
    display: block;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform .2s, box-shadow .2s;
    text-decoration: none;
}
.univers-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.univers-card img { width: 100%; height: 200px; object-fit: cover; display: block; }
.univers-card-body { padding: 1rem; }
.univers-card-body h3 { font-size: 1.1rem; color: var(--vert-texte); }

/* ── Grille news ── */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}
@media (max-width: 800px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .news-grid { grid-template-columns: 1fr; } }
.news-card {
    display: block;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform .2s;
    text-decoration: none;
}
.news-card:hover { transform: translateY(-3px); }
.news-card img { width: 100%; height: 180px; object-fit: cover; display: block; }
.news-card-body { padding: 1rem; }
.news-card-body h3 { font-size: 1rem; margin-bottom: .5rem; color: var(--vert-texte); }
.news-card-body p { font-size: .9rem; color: var(--gris-texte); }
.derniers-articles { text-align: center; }

/* ── Footer ── */
.site-footer { background: var(--footer-bg); color: var(--footer-texte); padding: 3.5rem 0 1.5rem; font-size: .88rem; }
.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem; margin-bottom: 2.5rem; }
.footer-cols strong { display: block; color: #fff; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1rem; }
.footer-cols ul { list-style: none; }
.footer-cols li { margin-bottom: .5rem; }
.footer-cols a { color: var(--footer-texte); transition: color .2s; text-decoration: none; }
.footer-cols a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(0,0,0,.15); padding-top: 1.25rem; text-align: center; font-size: .82rem; color: var(--footer-texte); opacity: .85; }
.footer-bottom a { color: var(--footer-texte); text-decoration: none; }
.footer-bottom a:hover { color: #fff; }
.footer-rs { display: flex; justify-content: center; gap: .75rem; margin-bottom: 1rem; }
.footer-rs a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.1); color: #ccc; transition: background .2s, color .2s; text-decoration: none; }
.footer-rs a:hover { background: var(--vert); color: #fff; }
/* Quatre colonnes de liens, ou deux par deux : jamais une colonne seule sur une ligne. */
@media (max-width: 760px) { .footer-cols { grid-template-columns: 1fr 1fr; } }

/* ── Breadcrumb ── */
.breadcrumb { margin: .75rem 0 1.25rem; font-size: .82rem; color: var(--gris-texte); }
.breadcrumb ol { list-style: none; display: flex; gap: .25rem; flex-wrap: wrap; align-items: center; }
.breadcrumb li + li::before { content: '›'; margin-right: .25rem; color: #ccc; }
.breadcrumb a { color: var(--vert-texte); }

/* ── Catalogue layout ── */
.catalogue-page { padding: 1.5rem 0 3rem; }
.catalogue-hero {
    display: flex; gap: 1.75rem; align-items: flex-start;
    margin-bottom: 1.25rem;
}
/* Photo en tête d'un univers — largeur réglable dans Réglages › Apparence.
   Le rapport 11/8 est celui du cadre d'origine (220 × 160) : la hauteur suit la
   largeur, le cadrage de la photo ne change donc pas quand on la redimensionne. */
.catalogue-hero-img {
    width: var(--univers-photo, 220px); height: auto;
    aspect-ratio: 11 / 8; object-fit: cover;
    border-radius: var(--radius); flex-shrink: 0;
    border: 1px solid #e5e7eb;
}
.catalogue-hero-body { flex: 1; }
.catalogue-hero .catalogue-titre { margin-bottom: .5rem; }
.catalogue-hero .catalogue-intro { margin-bottom: 0; }
@media (max-width: 600px) {
    /* En colonne, la photo prend toute la largeur : le réglage ne s'applique
       plus, il n'y a plus de texte à côté d'elle à ménager. */
    .catalogue-hero { flex-direction: column; }
    .catalogue-hero-img { width: 100%; height: 160px; aspect-ratio: auto; }
}
.catalogue-titre {
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    font-weight: 700;
    margin-bottom: .5rem;
}
.catalogue-intro {
    font-size: .96rem; color: #4b5563; line-height: 1.7;
    margin-bottom: .75rem; max-width: 820px;
}
.catalogue-intro p { margin: 0 0 .5rem; }
.catalogue-intro p:last-child { margin-bottom: 0; }
.catalogue-header-row { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; flex-wrap: wrap; }
.nb-produits { font-size: .85rem; font-weight: 400; color: var(--gris-texte); }

/* Sélecteur de tri du listing — poussé à droite de la barre */
.catalogue-tri { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.catalogue-tri label { font-size: .85rem; color: var(--gris-texte); }
.catalogue-tri select {
    font-family: var(--police);
    font-size: .85rem;
    color: var(--texte);
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius);
    padding: .25rem 1.5rem .25rem .5rem;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .4rem center;
    background-size: 14px;
}
.catalogue-tri select:focus { outline: 2px solid var(--vert); outline-offset: 1px; }
.catalogue-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 2rem;
    margin-top: .75rem;
    align-items: start;
}
.catalogue-layout--full { grid-template-columns: 1fr; }

/* ── Sidebar filtres ── */
.filtres-sidebar {
    position: sticky;
    top: 72px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius);
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    /* Gouttière réservée : la barre de défilement ne recouvre jamais les compteurs */
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}
.filtres-sidebar::-webkit-scrollbar { width: 8px; }
.filtres-sidebar::-webkit-scrollbar-track { background: transparent; }
.filtres-sidebar::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 8px; border: 2px solid #fff; }

/* Les cartes posées au pied de la colonne (guide, rendez-vous, sondage) sont les
   seuls éléments encadrés de la colonne : sans gouttière, leur bordure touchait
   la barre de défilement. 8 px à droite l'en écartent ; 16 px à gauche, parce
   que la gouttière réservée compte déjà pour 8 px de ce côté-là — les cadres
   restent ainsi à égale distance des deux bords de la colonne. */
.filtres-sidebar .bloc-faq-sidebar,
.filtres-sidebar .bloc-rdv-sidebar,
.filtres-sidebar .bloc-sondage {
    margin-left: 1rem;
    margin-right: .5rem;
}

/* Header */
.filtres-sidebar-head {
    position: sticky; top: 0; z-index: 2;
    display: flex; align-items: center; justify-content: space-between;
    padding: .75rem 1rem;
    background: #fff;
    border-bottom: 2px solid var(--vert);
    font-size: .78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em; color: #374151;
}
.filtres-reset {
    font-size: .7rem; font-weight: 500; color: var(--vert-texte);
    text-decoration: none; letter-spacing: 0;
}
.filtres-reset:hover { text-decoration: underline; }

/* Chips sélection active */
.filtres-actifs {
    display: flex; flex-wrap: wrap; gap: .25rem;
    padding: .5rem .75rem .5rem;
    border-bottom: 1px solid #e8e8e8;
    background: #fafcfa;
}
.filtre-chip {
    display: inline-flex; align-items: center; gap: .25rem;
    background: #e8f5e9; color: var(--vert-texte);
    font-size: .72rem; font-weight: 600;
    padding: .25rem .5rem .25rem .5rem;
    border-radius: var(--radius-pilule); text-decoration: none;
    transition: background .12s;
}
.filtre-chip:hover { background: #c9eacc; }
.filtre-chip-x { font-size: .9rem; opacity: .5; }

/* Groupes avec accordion */
.filtre-groupe {
    border-bottom: 1px solid #f0f0f0;
}
.filtre-groupe:last-child { border-bottom: none; }
.filtre-groupe > summary {
    list-style: none;
    display: flex; align-items: center;
    padding: .75rem 1rem;
    font-size: .8rem; font-weight: 700;
    color: #374151; cursor: pointer; user-select: none;
    gap: .5rem;
}
.filtre-groupe > summary::-webkit-details-marker { display: none; }
.filtre-groupe > summary:hover { color: var(--vert-texte); }
.filtre-groupe-nom { flex: 1; text-transform: uppercase; letter-spacing: .04em; font-size: .72rem; }
.filtre-groupe-count {
    font-size: .65rem; font-weight: 700; color: var(--gris-texte);
}
.filtre-groupe-count.has-active { color: var(--vert-texte); }
.filtre-groupe-logique {
    font-size: .6rem; font-weight: 700; letter-spacing: .06em;
    color: #fff; background: #83B735; border-radius: 3px;
    padding: 1px 4px; flex-shrink: 0;
}
.filtre-groupe-chevron {
    width: 14px; height: 14px; color: var(--gris-texte);
    flex-shrink: 0; transition: transform .18s;
}
.filtre-groupe[open] > summary .filtre-groupe-chevron { transform: rotate(180deg); }

/* Valeurs avec checkboxes */
.filtre-groupe-valeurs {
    padding: .25rem 0 .5rem;
}
.filtre-val {
    display: flex; align-items: center; gap: .5rem;
    padding: .25rem 1rem;
    font-size: .855rem; color: #4b5563;
    cursor: pointer; transition: background .08s;
    user-select: none;
}
.filtre-val:hover { background: #f5faf5; color: #1f2937; }
.filtre-val[data-extra] { display: none; }

/* Checkbox custom */
.filtre-cb { display: none; }
.cb-box {
    width: 15px; height: 15px; min-width: 15px;
    border: 1.5px solid #c8d0d8;
    border-radius: 3px; background: #fff;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: all .12s;
}
.filtre-cb:checked ~ .cb-box {
    background: var(--vert); border-color: var(--vert);
}
.filtre-cb:checked ~ .cb-box::after {
    content: '';
    display: block;
    width: 8px; height: 4.5px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translateY(-1px);
}
.filtre-val:hover .cb-box { border-color: var(--vert); }
.filtre-val-label { flex: 1; line-height: 1.25; }
a.filtre-val-label { color: inherit; text-decoration: none; }
.filtre-val-nb {
    font-size: .68rem; font-weight: 600; color: var(--gris-texte);
    flex-shrink: 0;
    min-width: 1.5rem; padding: 0 .5rem; line-height: 1.35rem;
    text-align: center; border-radius: 999px; background: #f3f4f6;
}
.filtre-val:hover .filtre-val-nb { background: #e5efe0; color: var(--vert-texte); }
.filtre-cb:checked ~ .cb-box + .filtre-val-label { color: var(--vert-texte); font-weight: 600; }

/* "Voir plus" */
.filtre-voir-plus {
    display: block; width: 100%;
    padding: .25rem 1rem; text-align: left;
    background: none; border: none;
    font-size: .76rem; color: var(--vert-texte);
    cursor: pointer; font-family: var(--police);
}
.filtre-voir-plus:hover { text-decoration: underline; }

/* Formulaire invisible */
#form-filtres { display: block; }

/* Bouton mobile */
.filtre-mobile-btn {
    display: none; align-items: center; gap: .5rem;
    background: var(--vert); color: #fff; border: none;
    border-radius: var(--radius); padding: .5rem 1rem;
    font-family: var(--police); font-size: .875rem; font-weight: 600;
    cursor: pointer; margin-bottom: 1rem;
}
.filtre-mobile-btn svg { width: 14px; height: 14px; }
.filtre-mobile-count {
    background: rgba(255,255,255,.2);
    font-size: .7rem; border-radius: var(--radius-pilule); padding: .05rem .5rem;
}

/* Drawer mobile overlay */
.filtre-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.4); z-index: 400;
}
.filtre-overlay.open { display: block; }
.filtres-sidebar.drawer-open {
    position: fixed; top: 0; left: 0;
    width: 285px; height: 100%; z-index: 401;
    max-height: 100%; overflow-y: auto;
    border-radius: 0; border: none;
    box-shadow: 3px 0 18px rgba(0,0,0,.18);
}
/* Bouton fermer : invisible sur desktop, visible dans le drawer */
.filtre-drawer-close { display: none; }
.filtres-sidebar.drawer-open .filtre-drawer-close {
    display: flex; align-items: center; justify-content: flex-end;
    width: 100%; padding: .5rem .75rem;
    background: var(--vert); border: none;
    font-size: 1.4rem; color: #fff; cursor: pointer;
    font-family: var(--police); line-height: 1;
}
.nb { color: var(--gris-texte); font-size: .8rem; }

/* ── Grille produits — flip cards style Fresh ── */
.produits-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -6px;
}
.produits-grille { background: transparent !important; padding: 0; }

/* ── Bandeau « Nouveautés » des pages d'univers ──
   Première rangée de la colonne produits : mêmes vignettes, même largeur que le
   listing. Le titre reprend la barre des séparateurs de gamme pour rester discret. */
.catalogue-colonne { min-width: 0; }
.univers-nouveautes {
    padding-bottom: .5rem;
    margin-bottom: 1.5rem;
    /* Même trait vert qu'au-dessus des vignettes : le bandeau est refermé, on voit
       où les nouveautés s'arrêtent et où le listing reprend. */
    border-bottom: 1px solid var(--vert);
}
.univers-nouveautes-titre {
    display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap;
    padding: 0 10px 8px;
    margin: 0 0 10px;
    border-bottom: 1px solid var(--vert);
}
.univers-nouveautes-titre h2 {
    margin: 0;
    font-size: .9rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--texte);
}
.univers-nouveautes-sous { margin-left: auto; font-size: .78rem; color: #999; }
@media (max-width: 600px) {
    .univers-nouveautes-sous { margin-left: 0; font-size: .74rem; }
}
.btn-info-card {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--vert);
    color: #fff;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    opacity: 0;
    transition: opacity .2s;
    z-index: 2;
}
.produit-card-wrap:hover .btn-info-card { opacity: 1; }

.gamme-separateur {
    width: 100%;
    padding: 18px 10px 8px;
    margin-top: 10px;
    border-bottom: 2px solid var(--vert);
    font-size: .9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--vert-texte);
}
.gamme-separateur:first-child { margin-top: 0; }

/* La carte suit sa vignette : sa hauteur est celle du cadre plus la place
   réservée au texte — titre, étiquette, bouton de retournement. Une hauteur
   fixe laissait du blanc sous une petite vignette et rognait le titre sous une
   grande. Les deux valeurs se règlent dans Réglages › Apparence › Vignettes. */
.produit-card-wrap {
    width: calc(25% - 0px);
    height: calc(var(--vignette, 220px) + var(--carte-texte, 160px));
    perspective: 1000px;
    padding: 0 6px 16px;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    touch-action: manipulation;
}
/* Catalogue avec la colonne de filtres : trois cartes par ligne, pas quatre.
   La colonne mange 260 px, et à quatre par ligne la carte tombait à 218 px —
   la vignette n'y faisait plus que 166 px de côté, contre 220 partout ailleurs.
   Une même vignette n'avait donc pas la même taille sur /aire-jeux et sur
   /installation. En dessous de 1101 px la règle générique reprend la main. */
@media (min-width: 1101px) {
    .catalogue-layout:not(.catalogue-layout--full) .produit-card-wrap {
        width: calc(33.333% - 0px);
    }
}

.produit-card {
    display: block;
    width: 100%; height: 100%;
    position: relative;
    color: var(--texte);
    text-decoration: none;
}
.produit-card-inner {
    width: 100%; height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform .42s ease-in-out, box-shadow .25s;
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius);
    background: #fff;
    will-change: transform;
}
.produit-card-wrap:hover .produit-card-inner,
.produit-card-wrap.flipped .produit-card-inner {
    transform: rotateY(180deg);
    box-shadow: var(--shadow-md);
}

.produit-card-front,
.produit-card-back {
    position: absolute; inset: 0;
    border-radius: var(--radius);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 1.25rem; text-align: center;
    background: #fff;
    overflow: hidden;
}
/* Face avant : désactiver les pointer-events quand la carte est retournée */
.produit-card-wrap:hover .produit-card-front,
.produit-card-wrap.flipped .produit-card-front {
    pointer-events: none;
}
/* Face arrière : pointer-events uniquement quand visible */
.produit-card-back {
    pointer-events: none;
}
.produit-card-wrap:hover .produit-card-back,
.produit-card-wrap.flipped .produit-card-back {
    pointer-events: auto;
}
/* Dos : légère teinte verte + bordure haute colorée */
.produit-card-back {
    transform: rotateY(180deg);
    justify-content: flex-start;
    padding-top: 1.25rem;
    background: #f8fdf2;
    border-top: 3px solid var(--vert);
}

/* Image en premier, nom en dessous */
.produit-card-img {
    flex: 1; min-height: 0;
    display: flex; align-items: center; justify-content: center;
    width: 100%; overflow: hidden; order: 1; position: relative;
}
/* Vignette carrée, la même sur toutes les grilles du site : univers,
   actualités, nouveautés, catalogue, produits liés.
   Jusqu'ici chaque photo s'affichait à sa taille propre (max-height: 230px,
   largeur libre). Les photos produit étant carrées (500 × 500) et celles des
   actualités ou des univers panoramiques — 27 formats différents rien que pour
   les articles —, deux grilles voisines n'avaient jamais la même allure.
   Le côté est fixé en pixels plutôt qu'en pourcentage de la carte : un carré
   qui suivrait la largeur déborderait de la carte dès qu'une grille passe à
   deux ou trois colonnes. 220 px est le plus grand côté que la plus étroite
   des grilles (les carrousels de l'accueil, 223 px utiles) peut afficher en
   entier ; il tient aussi dans la plus courte des cartes (340 px) en laissant
   la place au titre sur deux lignes.
   Les photos carrées ne bougent pas ; les panoramiques sont recadrées au centre.
   Côté et ajustement se règlent dans Réglages › Apparence › Vignettes : les deux
   variables sont posées par templates/partials/head.php, et les valeurs de repli
   ci-dessous gardent la grille debout si elles manquent. */
.produit-card-img img {
    width: 100%; max-width: var(--vignette, 220px);
    height: auto;
    aspect-ratio: 1;
    object-fit: var(--vignette-fit, cover);
    display: block; border-radius: 6px;
    -webkit-user-drag: none; user-select: none; pointer-events: none;
}
.produit-card-img::after {
    /* Posée par templates/partials/head.php, depuis le domaine du site :
       la feuille de style ne doit pas être le seul endroit qui connaisse
       l'adresse. Le repli vide évite d'afficher un nom périmé. */
    content: var(--filigrane, "");
    position: absolute; bottom: 6px; right: 8px;
    font-size: .58rem; font-weight: 600; letter-spacing: .04em;
    color: rgba(255,255,255,.3); text-shadow: 0 1px 2px rgba(0,0,0,.25);
    pointer-events: none; user-select: none;
}
.produit-no-img { width: 100%; max-width: var(--vignette, 220px); aspect-ratio: 1; background: #eee; border-radius: 6px; }

/* Titre sous la vignette — taille réglable avec celle du cadre
   (Réglages › Apparence › Vignettes). Le repli .9rem est la valeur historique. */
.produit-card-front h2,
.produit-card-front .card-nom {
    font-size: var(--vignette-titre, .9rem); color: #333;
    margin-top: .75rem; margin-bottom: 0; line-height: 1.35;
    order: 2; font-weight: 600;
}
/* Indicateur "retourner" discret sur le recto */
.produit-card-front::after {
    content: '↻';
    position: absolute; bottom: 8px; right: 10px;
    font-size: .75rem; color: var(--vert); opacity: .45;
    pointer-events: none;
}

.produit-card-back .card-nom,
.produit-card-back h3 { font-size: 1rem; color: var(--vert-texte); margin: 0 0 .5rem; line-height: 1.3; font-weight: 700; }
.produit-card-back p  { font-size: .82rem; color: #555; margin: 0 0 .75rem; line-height: 1.55; flex: 1; }
/* Sur les fiches produit, le titre du dos est un <p class="card-nom"> : il ne doit pas
   prendre la hauteur libre (flex:1), sinon le texte est repoussé vers le bas. */
.produit-card-back p.card-nom { flex: 0 0 auto; font-size: 1rem; color: var(--vert-texte); margin: 0 0 .5rem; line-height: 1.3; }
.produit-card-back .btn-voir { margin-top: auto; }
.btn-voir {
    display: inline-block;
    background: var(--vert); color: #fff;
    padding: .5rem 1.5rem; border-radius: var(--radius);
    font-size: .85rem; font-weight: 700;
    transition: background .2s, transform .15s;
    text-decoration: none;
}
.btn-voir:hover { background: var(--vert-c); color: #fff; transform: translateY(-1px); }

.aucun-produit { padding: 3rem; text-align: center; color: var(--gris-texte); }

/* Pagination */
.pagination { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 2rem; padding: 1rem 0; }
.pag-prev, .pag-next { color: var(--vert-texte); font-weight: 600; padding: .5rem 1rem; border: 1px solid var(--vert); border-radius: var(--radius); transition: all .2s; }
.pag-prev:hover, .pag-next:hover { background: var(--vert); color: #fff; }
.pag-info { color: var(--gris-texte); font-size: .9rem; white-space: nowrap; }
.pag-input {
    width: 3.2rem; text-align: center; font-size: .9rem; font-weight: 600;
    color: var(--vert-texte); border: 1px solid var(--vert); border-radius: var(--radius);
    padding: .25rem .25rem; background: transparent;
    -moz-appearance: textfield;
}
.pag-input::-webkit-outer-spin-button,
.pag-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pag-input:focus-visible { background: #f0f7e6; }
/* Mobile : Précédent, champ et Suivant tiennent sur une ligne, cibles de 44 px */
@media (max-width: 599px) {
    .pagination { gap: .5rem; }
    .pag-prev, .pag-next { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem .75rem; white-space: nowrap; }
    .pag-input { min-height: 44px; }
}

/* ── Fiche produit ── */
.fiche-produit { padding: 2rem 0 3rem; }
.fiche-layout { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: 3.5rem; margin: 1.5rem 0 0; align-items: start; }
.fiche-galerie, .fiche-info { min-width: 0; }

/* ── Galerie : image posée sur un « sol souple » teinté ── */
.fiche-galerie { position: sticky; top: 96px; }
.galerie-strip { display: flex; gap: .75rem; align-items: stretch; }
.galerie-thumbs-vert { display: flex; flex-direction: column; gap: .5rem; flex-shrink: 0; }
.thumb-btn { border: 1.5px solid #e3e7df; border-radius: 6px; padding: 3px; cursor: pointer; background: #fff; transition: border-color .15s, box-shadow .15s; }
.thumb-btn:hover { border-color: #b9cf95; }
.thumb-btn.active { border-color: var(--vert); box-shadow: 0 0 0 2px rgba(131,183,53,.18); }
.thumb-btn:focus-visible { outline: 2px solid var(--vert); outline-offset: 2px; }
.thumb-btn img { width: 64px; height: 64px; object-fit: contain; border-radius: 3px; display: block; background: #fff; }

/* Le cadre de l'image ne sort plus de sa colonne. « aspect-ratio: 5/4 » +
   « min-height: 300px » se traduisent par une largeur minimale de 375 px (300 × 5/4),
   que le navigateur impose même quand la colonne en offre moins : l'image mordait de
   13 à 114 px sur la gouttière de droite, à toutes les largeurs de bureau. La hauteur
   est donc fixée et la largeur suit la colonne. Indépendant de l'essai ci-dessous :
   le supprimer ne fait pas revenir le débordement.
   (« .galerie-main » en tête du sélecteur : la règle de base du cadre est écrite plus
   bas dans cette feuille et l'emporterait à spécificité égale.) */
@media (min-width: 769px) {
    .galerie-main .galerie-principale { aspect-ratio: auto; height: 300px; min-height: 0; }
}

/* Vignettes « en L » (essai du 2026-09-22, étendu le 2026-09-29 à toutes les largeurs
   d'ordinateur et de tablette).
   Au-delà de 5 photos, la colonne de vignettes dépassait l'image principale et
   laissait un grand blanc dessous (7 vignettes = 552 px pour une image de 300 px).
   Les 4 premières restent en colonne à gauche de l'image ; les suivantes se rangent
   sous l'image, en rangées. CSS seul : le HTML n'est pas touché (`display: contents`
   fait des vignettes des cases de la grille).
   Le nombre de vignettes par rangée suit la largeur réelle de la galerie (requête de
   conteneur, pas la largeur de l'écran) : 5 au-delà de 392 px, 4 au-delà de 312 px,
   3 au-delà de 232 px. Avant, l'effet n'existait qu'à partir d'un écran de 1180 px ;
   entre 769 et 1179 px les vignettes redescendaient en une colonne sous l'image.
   Téléphone (≤ 768 px) : pas de conteneur, la bande de vignettes sous l'image reste. */
@media (min-width: 769px) {
    .fiche-galerie { container: galerie / inline-size; }
}
@container galerie (min-width: 232px) {
    /* N pistes de vignette, puis une piste élastique qui donne à l'image toute la
       largeur restante de la colonne — sans jamais en sortir. Rangées de hauteur
       fixe : sans cela l'image, qui en couvre quatre, les étirait selon sa propre
       taille et desserrait les vignettes de la colonne. */
    .galerie-strip:has(.galerie-thumbs-vert) { display: grid; grid-template-columns: repeat(3, 72px) minmax(0, 1fr); grid-auto-rows: 72px; gap: .5rem; align-items: start; }
    .galerie-thumbs-vert { display: contents; }
    /* L'image occupe exactement la hauteur des 4 premières vignettes : son bord bas
       s'aligne sur le leur, et la ligne suivante vient 8 px dessous, comme partout. */
    .galerie-thumbs-vert + .galerie-main { grid-column: 2 / -1; grid-row: 1 / span 4; align-self: stretch; }
    .galerie-thumbs-vert + .galerie-main .galerie-principale { height: 100%; aspect-ratio: auto; min-height: 0; }
    /* Chaque vignette a sa colonne : sans cela une vignette se logeait dans la piste
       élastique et déformait le cadre. 1→4 en colonne 1, puis N par rangée. */
    .galerie-thumbs-vert .thumb-btn:nth-child(-n+4),
    .galerie-thumbs-vert .thumb-btn:nth-child(3n+5) { grid-column: 1; }
    .galerie-thumbs-vert .thumb-btn:nth-child(3n+6) { grid-column: 2; }
    .galerie-thumbs-vert .thumb-btn:nth-child(3n+7) { grid-column: 3; }
}
/* Les paliers suivants ne changent que le nombre de pistes et la répartition ; écrits
   après, ils l'emportent sur le palier précédent pour chaque vignette. */
@container galerie (min-width: 312px) {
    .galerie-strip:has(.galerie-thumbs-vert) { grid-template-columns: repeat(4, 72px) minmax(0, 1fr); }
    .galerie-thumbs-vert .thumb-btn:nth-child(4n+5) { grid-column: 1; }
    .galerie-thumbs-vert .thumb-btn:nth-child(4n+6) { grid-column: 2; }
    .galerie-thumbs-vert .thumb-btn:nth-child(4n+7) { grid-column: 3; }
    .galerie-thumbs-vert .thumb-btn:nth-child(4n+8) { grid-column: 4; }
}
@container galerie (min-width: 392px) {
    .galerie-strip:has(.galerie-thumbs-vert) { grid-template-columns: repeat(5, 72px) minmax(0, 1fr); }
    .galerie-thumbs-vert .thumb-btn:nth-child(5n+5) { grid-column: 1; }
    .galerie-thumbs-vert .thumb-btn:nth-child(5n+6) { grid-column: 2; }
    .galerie-thumbs-vert .thumb-btn:nth-child(5n+7) { grid-column: 3; }
    .galerie-thumbs-vert .thumb-btn:nth-child(5n+8) { grid-column: 4; }
    .galerie-thumbs-vert .thumb-btn:nth-child(5n+9) { grid-column: 5; }
}
.galerie-main { flex: 1; position: relative; min-width: 0; }

.galerie-principale {
    border-radius: 12px; overflow: hidden; cursor: zoom-in; position: relative;
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 5 / 4; min-height: 300px;
    background: #fff; border: 1px solid #e3e7df;
    padding: 1.25rem 1.25rem 2.25rem;
}
.galerie-principale::before {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
    background: linear-gradient(90deg, var(--vert), #b9d68a);
}
.galerie-principale::after {
    /* Posée par templates/partials/head.php, depuis le domaine du site :
       la feuille de style ne doit pas être le seul endroit qui connaisse
       l'adresse. Le repli vide évite d'afficher un nom périmé. */
    content: var(--filigrane, "");
    position: absolute; bottom: 14px; left: 16px;
    font-size: .62rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: rgba(60,80,40,.32);
    pointer-events: none; user-select: none;
}
.img-principale { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; transition: opacity .15s ease; object-fit: contain; -webkit-user-drag: none; user-select: none; }
.galerie-zoom-btn {
    position: absolute; bottom: .75rem; right: .75rem;
    background: rgba(255,255,255,.92); border: 1px solid #dfe5d6; border-radius: 8px;
    width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .15s, transform .15s; color: #3f5522;
}
.galerie-zoom-btn:hover { background: #fff; transform: scale(1.05); }
.galerie-zoom-btn:focus-visible { outline: 2px solid var(--vert); outline-offset: 2px; }
.galerie-placeholder { display: flex; align-items: center; justify-content: center; aspect-ratio: 5 / 4; min-height: 300px; background: linear-gradient(180deg, #f7f9f3, #eef3e6); border-radius: 12px; }

/* Lightbox */
.lightbox {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,.88);
    display: flex; align-items: center; justify-content: center;
}
.lightbox[hidden] { display: none; }
.lightbox-img { max-width: 90vw; max-height: 88vh; object-fit: contain; border-radius: var(--radius); }
.lightbox-close {
    position: absolute; top: 1rem; right: 1rem;
    background: rgba(255,255,255,.15); color: #fff; border: none;
    width: 40px; height: 40px; border-radius: 50%; font-size: 1.1rem;
    cursor: pointer; transition: background .15s; z-index: 1;
}
.lightbox-close:hover { background: rgba(255,255,255,.3); }
.lightbox-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,.15); color: #fff; border: none;
    width: 48px; height: 48px; border-radius: 50%;
    font-size: 2rem; line-height: 1; cursor: pointer;
    transition: background .15s; z-index: 1;
    display: flex; align-items: center; justify-content: center;
}
.lightbox-nav:hover { background: rgba(255,255,255,.3); }
.lightbox-prev { left: 1rem; }
.lightbox-next { right: 1rem; }
.lightbox-counter {
    position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%);
    color: rgba(255,255,255,.65); font-size: .85rem; letter-spacing: .05em;
    pointer-events: none;
}

/* ── Infos : registre « fiche technique » ── */
.fiche-meta-top { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; flex-wrap: wrap; }
.fiche-eyebrow { display: flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #6b7a5c; margin: 0 0 .5rem; }
.fiche-eyebrow a { color: var(--vert-texte); text-decoration: none; }
.fiche-eyebrow a:hover { text-decoration: underline; }
.fiche-eyebrow-sep { color: #b5bfa8; }
.fiche-badge-gamme {
    font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    background: var(--vert); color: #fff; padding: .25rem .75rem; border-radius: var(--radius-pilule);
}
.fiche-nom { font-size: clamp(1.7rem, 2.6vw, 2.25rem); line-height: 1.12; letter-spacing: -.01em; margin: 0 0 .25rem; color: #1c1f1a; }
.fiche-ref { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .78rem; letter-spacing: .04em; color: var(--gris-texte); margin: 0 0 1.5rem; }
.fiche-desc-courte { color: #444; margin-bottom: 1.25rem; line-height: 1.7; }
.fiche-desc-courte p { margin: 0 0 .5rem; }

/* Plaque technique : les faits, gravés */
.fiche-specs {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem;
    border-left: 3px solid var(--vert);
    padding: .1rem 0 .1rem 1rem; margin-bottom: 1.75rem;
}
.spec-item { display: flex; flex-direction: column; gap: .15rem; padding: .5rem 0; border-bottom: 1px solid #e8ece2; }
.spec-item:nth-last-child(-n+2) { border-bottom: none; }
.fiche-specs .spec-item:only-child { border-bottom: none; }
.spec-label { font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; color: var(--gris-texte); font-weight: 700; }
.spec-val { font-size: .95rem; color: #1c1f1a; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.35; }

.tag-group { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem; font-size: .83rem; }
.tag-group-label { color: #6b7280; font-weight: 500; }
.tag-filtre { background: #f3f7ee; color: #3f5522; font-size: .78rem; padding: .25rem .5rem; border-radius: 4px; border: 1px solid #d5e3c2; }

.fiche-etiquettes { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid #e8ece2; }
.fiche-etiq-label { font-size: .68rem; color: var(--gris-texte); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; white-space: nowrap; margin-right: .25rem; }
.fiche-etiq-chip {
    font-size: .78rem; padding: .25rem .75rem; border-radius: 4px;
    background: #fff; color: #3f5522; border: 1px solid #c9d9b2;
    white-space: nowrap; text-decoration: none;
    transition: background .15s, border-color .15s;
}
.fiche-etiq-chip:hover { background: #f3f7ee; border-color: var(--vert); }

/* Carte devis : options → quantité → action, une seule unité */
.fiche-achat {
    background: #fff; border: 1px solid #e3e7df; border-radius: 12px;
    padding: 1.25rem 1.5rem 1.25rem; margin-top: .25rem;
    box-shadow: 0 1px 2px rgba(20,30,10,.04), 0 12px 32px -18px rgba(20,30,10,.18);
}
.fiche-quantite { display: flex; align-items: center; gap: .75rem; margin-top: 0; }
.fiche-achat .fiche-options + .fiche-quantite { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #e8ece2; }
.fiche-qte-label { font-size: .68rem; font-weight: 700; color: var(--gris-texte); text-transform: uppercase; letter-spacing: .1em; white-space: nowrap; }
.fiche-qte-wrap { display: flex; align-items: center; border: 1.5px solid #d4dac9; border-radius: 8px; overflow: hidden; background: #fff; }
.fiche-qte-btn { width: 38px; height: 38px; background: #f7f9f3; border: none; font-size: 1.2rem; cursor: pointer; color: var(--texte); transition: background .15s, color .15s; }
.fiche-qte-btn:hover { background: var(--vert); color: #fff; }
.fiche-qte-btn:focus-visible { outline: 2px solid var(--vert); outline-offset: -2px; }
.fiche-qte-input { width: 56px; height: 38px; border: none; border-left: 1.5px solid #d4dac9; border-right: 1.5px solid #d4dac9; text-align: center; font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--texte); -moz-appearance: textfield; }
.fiche-qte-input::-webkit-outer-spin-button,
.fiche-qte-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.fiche-qte-unite { font-size: .85rem; font-weight: 600; color: #3f5522; background: #f3f7ee; border: 1px solid #d5e3c2; border-radius: 6px; padding: .25rem .5rem; }
.fiche-actions { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; }
.fiche-achat .fiche-actions { flex-wrap: nowrap; }
.fiche-achat .fiche-actions .btn-secondary { white-space: nowrap; flex: 0 0 auto; }
.fiche-achat .fiche-actions .btn-ajouter-devis { flex: 1 1 auto; justify-content: center; display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; padding-left: 1rem; padding-right: 1rem; }
.fiche-achat .fiche-actions .btn-secondary { padding-left: 1rem; padding-right: 1rem; }
/* Sur les écrans intermédiaires la colonne d'achat est trop étroite pour deux boutons
   qui ne peuvent ni rétrécir ni se couper : « Mon devis » sortait de 23 px à 1024 px
   et donnait à toute la page une barre de défilement horizontale. Ils passent l'un
   sous l'autre, en pleine largeur — comme déjà sur mobile. */
@media (min-width: 769px) and (max-width: 1179px) {
    .fiche-achat .fiche-actions { flex-wrap: wrap; }
    .fiche-achat .fiche-actions .btn-ajouter-devis,
    .fiche-achat .fiche-actions .btn-secondary { flex: 1 1 100%; text-align: center; justify-content: center; }
}
.btn-lg { font-size: 1rem; padding: .75rem 1.5rem; font-weight: 700; }
.fiche-devis-hint { font-size: .82rem; color: var(--vert-texte); margin-top: .5rem; min-height: 1.2em; }
.fiche-devis-hint:empty { display: none; }
.fiche-contact-hint { margin-top: .75rem; font-size: .82rem; color: #6b7280; display: flex; align-items: center; gap: .25rem; }
.fiche-contact-hint a { color: var(--vert-texte); }
/* Encarts d'appel : bouton + second lien facultatif (Réglages › Encarts d'appel) */
.encart-boutons { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
/* Ligne « Une question sur ce produit ? » avec un second lien : il passe à la ligne entier */
.fiche-contact-hint:has(> span) { flex-wrap: wrap; }
.fiche-contact-hint > span { white-space: nowrap; }
.btn-fiche-pdf {
    display: inline-flex; align-items: center; gap: .5rem;
    margin-top: 1rem;
    padding: .25rem 0;
    font-size: .85rem; font-weight: 600;
    color: #3f5522;
    border: none; border-bottom: 1.5px solid #c9d9b2;
    border-radius: 0;
    background: none;
    text-decoration: none;
    transition: border-color .15s, color .15s;
}
.btn-fiche-pdf:hover { border-color: var(--vert); color: var(--vert-texte); background: none; }
.fiche-options { margin-top: 0; display: flex; flex-direction: column; gap: 1rem; }
.fiche-option-groupe { border-top: none; padding-top: 0; }
.fiche-option-groupe + .fiche-option-groupe { border-top: 1px solid #e8ece2; padding-top: 1rem; }
.fiche-option-groupe.has-error .option-erreur { display: block !important; }
.fiche-option-label { font-size: .78rem; font-weight: 700; color: #374151; margin-bottom: .5rem; text-transform: uppercase; letter-spacing: .06em; }
.option-requis { color: var(--vert-texte); margin-left: 2px; }
/* Radios */
.fiche-option-radios { display: flex; flex-wrap: wrap; gap: .25rem; }
/* Longues listes (couleurs…) : boutons un peu plus compacts, même format */
.fiche-option-radios--dense .option-radio-btn { padding: .25rem .5rem; font-size: .78rem; }
.option-radio-label { cursor: pointer; }
.option-radio-btn {
    display: inline-block; padding: .25rem .75rem;
    background: #f9fafb; border: 1.5px solid #d1d5db;
    border-radius: var(--radius); font-size: .82rem; color: #374151;
    transition: border-color .12s, background .12s, color .12s;
    user-select: none;
}
.option-radio-label input:checked + .option-radio-btn {
    border-color: var(--vert); background: #f4f8ee; color: #3a6010; font-weight: 600;
}
.option-radio-btn:hover { border-color: var(--vert); }
/* Select */
.option-select {
    width: 100%; padding: .5rem .75rem;
    border: 1.5px solid #d1d5db; border-radius: var(--radius);
    font-size: .88rem; color: #374151; background: #fff;
    cursor: pointer;
}
.option-select:focus { border-color: var(--vert); box-shadow: var(--shadow-focus); }
/* Champ libre (option « texte ») : même cadre que la liste déroulante */
.option-texte {
    display: block; width: 100%; min-height: 44px; padding: .5rem .75rem;
    border: 1.5px solid #d1d5db; border-radius: var(--radius);
    font: inherit; font-size: .88rem; color: #374151; background: #fff; resize: vertical;
}
.option-texte:focus { outline: none; border-color: var(--vert); box-shadow: var(--shadow-focus); }
/* Erreur */
.option-erreur { font-size: .75rem; color: #dc2626; margin-top: .25rem; }
.fiche-option-groupe.has-error .option-select,
.fiche-option-groupe.has-error .option-texte,
.fiche-option-groupe.has-error .option-radio-btn { border-color: #dc2626; }

/* Onglets */
.fiche-tabs { margin-top: 3rem; }
.tabs-nav { display: flex; gap: .25rem; border-bottom: 1px solid #e3e7df; margin-bottom: 0; overflow-x: auto; }
.tab-btn {
    background: none; border: none; padding: 1rem 1rem;
    font-family: inherit; font-size: .92rem; font-weight: 600; color: var(--gris-texte);
    cursor: pointer; border-bottom: 3px solid transparent;
    margin-bottom: -1px; white-space: nowrap; transition: color .15s, border-color .15s;
}
.tab-btn:hover { color: var(--texte); }
.tab-btn:focus-visible { outline: 2px solid var(--vert); outline-offset: -2px; border-radius: 4px; }
.tab-btn.active { color: #1c1f1a; border-bottom-color: var(--vert); }
.tab-panel { display: none; padding: 2rem 0 .5rem; }
.tab-panel.active { display: block; animation: fadePanel .2s ease; }
@keyframes fadePanel { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .tab-panel.active { animation: none; } .galerie-zoom-btn:hover { transform: none; } }
#tab-description .content-html { max-width: 72ch; line-height: 1.75; color: #2a2e26; }
#tab-description .content-html h2,
#tab-description .content-html h3,
#tab-description .content-html h4 { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--gris-texte); border: none; padding: 0; margin: 2rem 0 .5rem; }
#tab-description .content-html h2:first-child,
#tab-description .content-html h3:first-child { margin-top: 0; }
#tab-description .content-html p + p { margin-top: .25rem; }
#tab-description .content-html hr { border: none; border-top: 1px solid #e3e7df; margin: 1rem 0 .6rem; }

/* Contenu onglet caractéristiques */
.caract-table { border-collapse: collapse; font-size: .92rem; }
.caract-table th { text-align: left; color: var(--gris-texte); font-weight: 500; padding: .5rem 2rem .5rem 0; width: 180px; }
.caract-table td { color: var(--texte); font-weight: 600; font-variant-numeric: tabular-nums; padding: .5rem 0; border-bottom: 1px solid #eef1e9; }
.caract-filtres { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0; }
.caract-row { display: flex; align-items: flex-start; gap: 1rem; font-size: .9rem; padding: .5rem 0; border-bottom: 1px solid #eef1e9; }
.caract-label { min-width: 180px; color: var(--gris-texte); font-weight: 500; padding-top: .15rem; }
.caract-val { display: flex; flex-wrap: wrap; gap: .25rem; }
.normes-content { font-size: .92rem; line-height: 1.8; color: #374151; white-space: pre-line; max-width: 72ch; }
.content-html p { margin-bottom: .75rem; }
.content-html ul, .content-html ol { margin: .5rem 0 .75rem 1.5rem; }
.content-html li { margin-bottom: .25rem; }
.content-html table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .9rem; }
.content-html th, .content-html td { border: 1px solid #ddd; padding: .5rem .75rem; text-align: left; }
.content-html th { background: var(--gris); }

/* ── Erreur 404 ── */
.error-page { text-align: center; padding: 6rem 0; }
.error-page h1 { font-size: 2rem; margin-bottom: 1rem; }
.error-page p { color: var(--gris-texte); margin-bottom: 2rem; }

/* ── News liste ── */
.news-page { padding: 1.5rem 0 3rem; }
.news-page h1 { font-size: 1.8rem; margin-bottom: .5rem; }
.news-intro { color: var(--gris-texte); margin-bottom: 2rem; }

.news-liste-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
    margin-bottom: 2.5rem;
}
@media (max-width: 800px) { .news-liste-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .news-liste-grid { grid-template-columns: 1fr; } }
.news-cards-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -6px 2.5rem;
}
.news-liste-card {
    background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
    overflow: hidden; transition: transform .2s; display: flex; flex-direction: column;
}
.news-liste-card:hover { transform: translateY(-3px); }
.news-liste-img { height: 200px; overflow: hidden; background: var(--gris); flex-shrink: 0; }
.news-liste-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.news-liste-card:hover .news-liste-img img { transform: scale(1.04); }
.news-no-img { width: 100%; height: 100%; background: #e0e0e0; }
.news-liste-body { padding: 1rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.news-date { font-size: .8rem; color: var(--gris-texte); text-transform: uppercase; letter-spacing: .04em; }
.news-vues { display: flex; align-items: center; gap: .25rem; font-size: .78rem; color: var(--gris-texte); }
.news-liste-body h2, .news-liste-body h3 { font-size: 1rem; line-height: 1.35; color: var(--texte); }
.news-liste-body p { font-size: .88rem; color: var(--gris-texte); flex: 1; }

/* ── News article ── */
.news-article { padding-bottom: 3rem; }
.news-article-inner { max-width: 820px; margin: 0 auto; padding: 1.5rem 1.5rem 2rem; }
.news-article-header { margin-bottom: 2rem; }
.news-article-header h1 { font-size: clamp(1.4rem, 3vw, 2rem); margin: .75rem 0; line-height: 1.3; }
.news-chapeau { font-size: 1.1rem; color: #444; line-height: 1.6; border-left: 3px solid var(--vert); padding-left: 1rem; margin: 1rem 0; }
.news-auteur { font-size: .85rem; color: var(--gris-texte); }
.news-vues { font-size: .82rem; color: var(--gris-texte); }
.news-article-img { margin-bottom: 2rem; border-radius: var(--radius); overflow: hidden; }
.news-article-img img { width: 100%; height: auto; display: block; }
.news-article-contenu { line-height: 1.75; font-size: 1rem; }
.news-article-contenu h2 { font-size: 1.3rem; margin: 2rem 0 .75rem; }
.news-article-contenu h3 { font-size: 1.1rem; margin: 1.5rem 0 .5rem; }
.news-article-cta {
    margin-top: 3rem; padding: 2rem;
    background: var(--gris); border-radius: var(--radius);
    text-align: center;
}
.news-article-cta p { margin-bottom: 1rem; color: #555; }

.news-related { background: var(--gris); padding: 3rem 0; margin-top: 2rem; }
.news-related .carousel-item,
.news-suite .carousel-item { flex: 0 0 25%; }
@media (max-width: 1199px) { .news-related .carousel-item, .news-suite .carousel-item { flex: 0 0 33.333%; } }
@media (max-width: 899px)  { .news-related .carousel-item, .news-suite .carousel-item { flex: 0 0 50%; } }
@media (max-width: 599px)  { .news-related .carousel-item, .news-suite .carousel-item { flex: 0 0 100%; } }

/* ── Templates news ── */
/* Bannière */
.news-hero { position: relative; max-height: var(--news-banniere-hauteur, 520px); overflow: hidden; background: #111; }
.news-hero-img img { width: 100%; height: var(--news-banniere-hauteur, 520px); object-fit: cover;
    object-position: var(--news-banniere-cadrage, center); display: block; opacity: var(--news-banniere-voile, .65); }
.news-hero-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 2.5rem; }
.news-hero-overlay h1 { color: #fff; font-size: clamp(1.5rem, 4vw, 2.4rem); margin: .5rem 0; line-height: 1.2; text-shadow: 0 2px 8px rgba(0,0,0,.4); }
.news-hero-overlay .news-chapeau { color: rgba(255,255,255,.9); font-size: 1.05rem; max-width: 700px; }
.breadcrumb--light ol { padding: 0; margin: 0 0 .5rem; list-style: none; display: flex; gap: .5rem; font-size: .8rem; flex-wrap: wrap; }
.breadcrumb--light li { color: rgba(255,255,255,.7); }
.breadcrumb--light a { color: rgba(255,255,255,.85); text-decoration: none; }
.news-date--light { font-size: .8rem; color: rgba(255,255,255,.7); margin-bottom: .25rem; display: block; }
.news-article--banniere .news-article-inner { padding-top: 1.5rem; }

/* Magazine */
.news-magazine-layout { display: grid; grid-template-columns: 1fr 380px; gap: 3rem; align-items: start; }
.news-magazine-img img { width: 100%; height: auto; border-radius: var(--radius); display: block; object-fit: cover; }
.news-magazine-media { position: sticky; top: 1.5rem; }

/* ── Templates produit ── */
/* Vitrine */
.fiche-produit--vitrine .fiche-vitrine-galerie { width: 100%; background: var(--gris); margin-bottom: 2rem; }
.fiche-produit--vitrine .vitrine-principale img { width: 100%; max-height: 560px; object-fit: contain; display: block; margin: 0 auto; }
.fiche-produit--vitrine .vitrine-thumbs { display: flex; gap: .5rem; padding: .75rem 1rem; overflow-x: auto; background: #fff; border-top: 1px solid #e5e7eb; }
.fiche-produit--vitrine .vitrine-thumbs .thumb-btn { flex-shrink: 0; width: 70px; height: 70px; border: 2px solid transparent; border-radius: var(--radius); overflow: hidden; background: none; padding: 0; cursor: pointer; }
.fiche-produit--vitrine .vitrine-thumbs .thumb-btn.active { border-color: var(--vert); }
.fiche-produit--vitrine .vitrine-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.fiche-vitrine-info { display: grid; grid-template-columns: 1fr 300px; gap: 2.5rem; margin-bottom: 2rem; }
.fiche-vitrine-cta { position: sticky; top: 1.5rem; }

/* ── Responsive ── */
@media (max-width: 1100px) {
    .produit-card-wrap { width: calc(33.333% - 0px); }
    .news-magazine-layout { grid-template-columns: 1fr; }
    .news-magazine-media { position: static; }
    .fiche-vitrine-info { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .header-actions { gap: .5rem; }
    .main-nav, .header-actions .btn-link { display: none; }
    .site-header .container { justify-content: space-between; }
    .hamburger-label { display: flex; }
    /* Cibles tactiles de l'en-tête à 44 × 44 px (Menu 38×28, loupe 34×34, Devis 38 de haut) */
    .hamburger-label, .header-search-btn { min-width: 44px; min-height: 44px; justify-content: center; align-items: center; }
    .site-header .btn-devis { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (max-width: 600px) {
    /* Le logo (largeur fixe jusqu'à 240px) pousse le bouton Devis hors écran
       sur les petits mobiles (ex: iPhone SE 375px) — on le réduit ici. */
    .site-header .container { gap: .5rem; }
    .logo-img { max-width: 130px; max-height: 46px; }
    .header-actions { gap: .5rem; }
    .header-search-btn { padding: .25rem; }
    .btn-devis { padding: .5rem .75rem; font-size: .85rem; }
    .header-panier-badge { font-size: .65rem; }
}
@media (max-width: 768px) {
    .produit-card-wrap { width: calc(50% - 0px); }
}
@media (max-width: 800px) {
    .catalogue-layout { grid-template-columns: 1fr; }
    .filtres-sidebar { display: none; position: fixed; max-height: 100%; border-radius: 0; }
    .filtres-sidebar.drawer-open { display: block; }
    .filtre-mobile-btn { display: flex; }
    .filtre-drawer-close { display: block; }
}
@media (max-width: 480px) {
    /* Pleine largeur : le titre tient sur moins de lignes, la réserve de texte
       peut se resserrer d'autant. */
    .produit-card-wrap { width: 100%; height: calc(var(--vignette, 220px) + var(--carte-texte, 160px) - 40px); }
}
@media (min-width: 801px) {
    .filtres-sidebar {
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }
    .filtres-sidebar-head { display: none; }
}

/* ════════════════════════════════════════════════
   MODULE DEVIS
   ════════════════════════════════════════════════ */

/* ── Badge panier header ── */
.header-panier-badge {
    display: inline-flex; align-items: center; justify-content: center;
    background: #e74c3c; color: #fff; border-radius: var(--radius-pilule);
    font-size: .7rem; font-weight: 700;
    min-width: 1.35em; height: 1.35em;
    padding: 0 .3em;
    margin-left: .25rem;
    vertical-align: middle;
    line-height: 1;
}

/* ── Bouton catalogue — voir section flip cards ci-dessus ── */

/* ── Page panier/formulaire ── */
/* padding-block : le raccourci « 2rem 0 » annulait la gouttière du .container (titre collé au bord en mobile) */
.devis-page { padding-block: 2rem 4rem; }
.devis-titre { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 1.5rem; }
/* Introduction (Réglages › Devis), même traitement que .news-intro / .galerie-intro */
.devis-intro { color: var(--gris-texte); margin: -.75rem 0 1.5rem; max-width: 65ch; }

.devis-section {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2rem;
    margin-bottom: 2rem;
}
.devis-section-disabled { opacity: .5; pointer-events: none; }
.devis-section-titre {
    font-size: 1.15rem; font-weight: 700;
    margin: 0 0 1.5rem;
    display: flex; align-items: center; gap: .75rem;
}
.devis-step {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--vert); color: #fff; border-radius: 50%;
    width: 1.8em; height: 1.8em;
    font-size: .9rem; font-weight: 700; flex-shrink: 0;
}
.panier-badge {
    background: var(--vert); color: #fff;
    border-radius: var(--radius-pilule); font-size: .75rem; font-weight: 700;
    padding: .15em .6em;
}

/* ── Tableau panier ── */
.devis-table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.devis-table th, .devis-table td {
    padding: .75rem .5rem;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
    text-align: left;
}
.devis-table thead th { font-weight: 600; color: #555; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
.col-img  { width: 70px; }
.col-nom  { }
.col-ref  { width: 140px; color: var(--gris-texte); font-size: .85rem; }
.col-qte  { width: 130px; }
.col-action { width: 48px; }

.panier-img { width: 60px; height: 50px; object-fit: cover; border-radius: var(--radius); display: block; }
.panier-no-img { width: 60px; height: 50px; background: #eee; border-radius: var(--radius); }
.panier-lien { color: var(--texte); text-decoration: none; font-weight: 500; }
.panier-lien:hover { color: var(--vert-texte); }
.panier-options { margin: .25rem 0 0; padding: 0; list-style: none; font-size: .78rem; color: #6b7280; display: flex; flex-wrap: wrap; gap: .25rem .75rem; }
.panier-options li { white-space: nowrap; }
.panier-options strong { color: #374151; font-weight: 600; }

/* Contrôle quantité */
.qte-control { display: flex; align-items: center; gap: .25rem; }
.qte-btn {
    width: 1.9rem; height: 1.9rem;
    border: 1px solid #ddd; border-radius: var(--radius);
    background: #f5f5f5; cursor: pointer; font-size: 1rem; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    color: #444;
    transition: background .15s;
}
.qte-btn:hover { background: var(--vert); color: #fff; border-color: var(--vert); }
.qte-input {
    width: 3.2rem; text-align: center;
    border: 1px solid #ddd; border-radius: var(--radius);
    padding: .25rem;
    font-size: .9rem;
    -moz-appearance: textfield;
}
.qte-input::-webkit-inner-spin-button,
.qte-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.qte-unite { font-size: .78rem; font-weight: 600; color: var(--vert-texte); text-align: center; margin-top: .25rem; }

.btn-supprimer {
    background: none; border: none; cursor: pointer;
    color: var(--gris-texte); font-size: 1.1rem; line-height: 1;
    padding: .25rem;
    border-radius: var(--radius);
    transition: color .15s, background .15s;
}
.btn-supprimer:hover { color: #e74c3c; background: #fee; }

.devis-vide { text-align: center; padding: 2.5rem 1rem; color: var(--gris-texte); }
.devis-ajouter-hint { margin-top: 1rem; font-size: .88rem; }

/* ── Formulaire ── */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.form-group { display: flex; flex-direction: column; gap: .25rem; }
.form-group--full { grid-column: 1 / -1; }
.form-group label { font-size: .88rem; font-weight: 600; color: #444; }
.form-group input,
.form-group textarea {
    border: 1px solid #ddd; border-radius: var(--radius);
    padding: .5rem .75rem;
    font-size: 1rem; font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
    width: 100%; box-sizing: border-box;
}
.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--vert);
    box-shadow: var(--shadow-focus);
}
.form-group textarea { resize: vertical; min-height: 110px; }
/* Cibles tactiles en mobile : champs (37 px de haut) et grands boutons (« Ajouter au devis » 43 px) à 44 px */
@media (max-width: 768px) {
    .form-group input:not([type="checkbox"]):not([type="radio"]), .form-group select { min-height: 44px; }
    .btn-lg { min-height: 44px; }
}
.required { color: #e74c3c; margin-left: .1em; }
/* Case à cocher dans une étiquette (« Même adresse que l'entité ») : elle héritait de la
   largeur 100 % des champs et flottait au milieu de la ligne. */
.form-group .checkbox-inline { display: inline-flex; align-items: center; gap: .4rem; }
.form-group[hidden] { display: none; }   /* .form-group impose son display : sans ceci, hidden ne masquait rien */
.form-group .checkbox-inline input[type="checkbox"] { width: auto; margin: 0; accent-color: var(--vert); }
/* Choix à boutons radio (civilité, « Votre demande concerne ») */
.form-choix { border: 0; margin: 0; padding: 0; min-width: 0; }
.form-choix legend { font-size: .88rem; font-weight: 600; color: #444; padding: 0; margin-bottom: .35rem; }
.form-choix-liste { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.form-choix-liste label { display: flex; align-items: center; gap: .4rem; font-size: .93rem; font-weight: 400; color: #444; cursor: pointer; }
.form-group .form-choix-liste input { width: auto; padding: 0; accent-color: var(--vert); }
/* Demande d'information : ses deux cartes sont dans le <form> ; « section:nth-child(even) »
   mettrait la seconde en gris. */
#form-demande-info .devis-section { background: #fff; }
@media (max-width: 768px) { .form-choix-liste label { min-height: 44px; } }  /* cible tactile */

.devis-submit { margin-top: 1.75rem; display: flex; flex-direction: column; gap: .75rem; align-items: flex-start; }
.devis-rgpd { font-size: .8rem; color: var(--gris-texte); margin: 0; }
.devis-optin { display: flex; align-items: flex-start; gap: .5rem; font-size: .875rem; color: #374151; cursor: pointer; }
.devis-optin input[type="checkbox"] { margin-top: .15rem; flex-shrink: 0; accent-color: var(--vert); }
/* ── Bouton "Ajouter au devis" fiche produit ── */
.btn-added { background: #27ae60 !important; }

/* ── Alertes ── */
.alert { padding: 1rem 1.25rem; border-radius: var(--radius); margin-bottom: 1.25rem; font-size: .93rem; }
.alert-error   { background: #fdecea; color: #c0392b; border: 1px solid #f5c6cb; }
.alert-success { background: #eafaf1; color: #1e8449; border: 1px solid #a9dfbf; }
.alert-warning { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }

/* ── Page confirmation ── */
.devis-confirmation { padding: 3rem 0 5rem; }
.confirmation-card {
    max-width: 580px; margin: 0 auto;
    background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 3rem 2.5rem; text-align: center;
}
.confirmation-icone {
    width: 4rem; height: 4rem;
    background: var(--vert); color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; font-weight: 700; margin: 0 auto 1.5rem;
}
.confirmation-card h1 { font-size: 1.4rem; margin-bottom: .75rem; }
.confirmation-card p { color: #555; margin-bottom: .5rem; line-height: 1.6; }
.confirmation-ref { font-size: 1rem; color: var(--gris-texte); }
.confirmation-recap {
    background: var(--gris); border-radius: var(--radius);
    padding: 1rem 1.25rem; margin: 1.25rem 0;
    font-size: .92rem; color: #555;
}
.confirmation-actions { display: flex; gap: 1rem; justify-content: center; margin-top: 1.75rem; flex-wrap: wrap; }

/* ── Responsive fiche produit + devis ── */
@media (max-width: 900px) {
    .carousel-item { flex: 0 0 33.333%; }
}
@media (max-width: 768px) {
    .fiche-layout { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    .fiche-galerie { position: static; }
    .galerie-thumbs { display: flex; gap: .5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: .25rem; scrollbar-width: thin; }
    .galerie-thumbs .thumb-btn { flex-shrink: 0; }
    .galerie-principale { max-width: 100%; }
    .galerie-strip { flex-direction: column-reverse; align-items: stretch; }
    .galerie-thumbs-vert { flex-direction: row; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: .25rem; }
    .fiche-nom { font-size: 1.3rem; }
    .tab-btn { padding: .75rem 1rem; font-size: .85rem; }
    .fiche-specs { grid-template-columns: 1fr; }
    .produits-grille--compact { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .carousel-item { flex: 0 0 50%; }
}
@media (max-width: 640px) {
    .form-grid { grid-template-columns: 1fr; }
    .col-ref { display: none; }
    .devis-section { padding: 1.25rem; }
    .confirmation-card { padding: 2rem 1.25rem; }
    .fiche-actions { flex-direction: column; align-items: stretch; }
    .fiche-actions .btn-primary,
    .fiche-actions .btn-secondary { text-align: center; }
    .caract-row { flex-direction: column; gap: .25rem; }
    .caract-label { min-width: auto; }
    .carousel-item { flex: 0 0 100%; }
    /* Densité du tableau panier : les boutons de quantité passés à 44px ne
       tiennent plus dans la largeur d'origine. Calcul à 375px — colonnes hors
       nom : 310px pour 287px disponibles, et body est en overflow-x: hidden,
       donc le dépassement est rogné et non défilable. */
    .devis-table th, .devis-table td { padding: .75rem .5rem; }
    .qte-input { width: 2.75rem; }
}
@media (max-width: 480px) {
    /* Sous 480px la vignette ne laisse plus que 3px au nom du produit. On la
       retire, comme la colonne Référence l'est déjà sous 640px : le nom reste
       cliquable et porte l'identification. Repasse à 76px pour le nom à 375px. */
    .col-img { display: none; }
}

/* ════════════════════════════════════════════════
   GALERIE
   ════════════════════════════════════════════════ */
.galerie-page { padding: 2rem 0 4rem; }
.galerie-titre { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: .5rem; }
.galerie-intro { color: var(--gris-texte); margin-bottom: 1.75rem; }
.galerie-vide  { color: var(--gris-texte); text-align: center; padding: 3rem; }

.galerie-filtres { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.galerie-filtre-btn {
    padding: .5rem 1rem; border-radius: var(--radius-pilule);
    border: 2px solid var(--vert); color: var(--vert-texte);
    font-size: .85rem; font-weight: 700; font-family: inherit;
    text-decoration: none; transition: all .2s; background: transparent;
    cursor: pointer;
}
.galerie-filtre-btn:hover,
.galerie-filtre-btn.actif { background: var(--vert); color: #fff; }

.galerie-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}
/* Mode flipcard galerie */
.galerie-grid--flip { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.galerie-flip-wrap {
    height: 300px;
    width: 100%;
    padding: 0;
    perspective: 600px;
    position: relative;
    flex-shrink: unset;
}
.galerie-flip-card { height: 100%; width: 100%; }
.galerie-flip-card .produit-card-front,
.galerie-flip-card .produit-card-back {
    padding: .75rem; border-radius: var(--radius);
    border: 1px solid #e5e7eb;
}
.galerie-flip-card .produit-card-back {
    background: #fff; color: var(--texte);
    justify-content: flex-start; padding-top: 1rem;
    border: 1px solid #e5e7eb;
}
.galerie-flip-card .produit-card-back .card-nom { color: var(--vert-texte); }
.galerie-flip-card .produit-card-back p { color: #4b5563; }
.galerie-flip-card .produit-card-img {
    height: 170px; flex: unset;
    border-radius: calc(var(--radius) - 2px); overflow: hidden;
}
.galerie-flip-card .produit-card-img img {
    width: 100%; max-width: none; height: 100%;
    aspect-ratio: auto; object-fit: cover; border-radius: 0;
}
.galerie-item { border-radius: var(--radius); overflow: hidden; }
.galerie-item-btn {
    position: relative; display: block; width: 100%;
    border: none; padding: 0; cursor: pointer; background: none;
    border-radius: var(--radius); overflow: hidden;
}
.galerie-img {
    width: 100%; height: 220px;
    object-fit: cover; display: block;
    transition: transform .35s ease;
}
.galerie-item-btn:hover .galerie-img { transform: scale(1.05); }
.galerie-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.6) 0%, transparent 55%);
    opacity: 0; transition: opacity .25s;
    display: flex; flex-direction: column;
    justify-content: flex-end; padding: .75rem;
    gap: .25rem;
}
.galerie-item-btn:hover .galerie-overlay { opacity: 1; }
.galerie-label { color: #fff; font-size: .88rem; font-weight: 700; line-height: 1.3; }
.galerie-tag {
    display: inline-block; background: var(--vert); color: #fff;
    font-size: .72rem; font-weight: 700; padding: .1em .5em; border-radius: 3px;
    align-self: flex-start;
}

/* Lightbox */
.lightbox {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,.92);
    display: flex; align-items: center; justify-content: center;
}
.lightbox[hidden] { display: none; }
.lightbox-inner { max-width: 90vw; max-height: 90vh; text-align: center; }
.lightbox-img { max-width: 90vw; max-height: 82vh; object-fit: contain; border-radius: var(--radius); display: block; }
.lightbox-caption { color: #ccc; font-size: .9rem; margin-top: .75rem; }
.lightbox-close,
.lightbox-prev,
.lightbox-next {
    position: fixed; background: rgba(255,255,255,.15); color: #fff;
    border: none; border-radius: 50%; cursor: pointer;
    width: 2.75rem; height: 2.75rem; font-size: 1.4rem; line-height: 1;
    transition: background .2s;
    display: flex; align-items: center; justify-content: center;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover { background: var(--vert); }
.lightbox-close { top: 1.25rem; right: 1.25rem; font-size: 1rem; }
.lightbox-prev  { left: 1.25rem; top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: 1.25rem; top: 50%; transform: translateY(-50%); }

@media (max-width: 640px) {
    .galerie-grid { grid-template-columns: 1fr 1fr; }
    .lightbox-prev { left: .5rem; }
    .lightbox-next { right: .5rem; }
}

/* ── Mode mosaïque ────────────────────────────────────────────────────────────
   Troisième style de galerie, sélectionnable en admin (galerie_style). Les deux
   autres ne sont pas touchés. Tuiles de deux tailles au lieu d'une : une photo
   sur cinq occupe quatre fois la surface des autres, ce qui hiérarchise les
   réalisations au lieu de les aligner toutes au même rang.
   Placé après le @media ci-dessus, à spécificité égale, pour l'emporter sur
   .galerie-grid dont il redéfinit les colonnes. */
.galerie-grid--mosaique {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 168px;
    grid-auto-flow: dense;   /* comble les trous laissés par les grandes tuiles */
    gap: .75rem;
}
/* Un pas de 5 sur 4 colonnes décale la grande tuile d'une colonne à chaque
   rangée : le motif ne se referme qu'au bout de quatre rangées. Un pas de 4
   l'aurait figée dans la même colonne, et le rythme se serait vu. */
.galerie-grid--mosaique .galerie-item:nth-child(5n+1) {
    grid-column: span 2;
    grid-row:    span 2;
}
.galerie-grid--mosaique .galerie-item,
.galerie-grid--mosaique .galerie-item-btn { height: 100%; }
.galerie-grid--mosaique .galerie-img {
    height: 100%;
    transition: transform .5s cubic-bezier(.2, .6, .2, 1);
}
.galerie-grid--mosaique .galerie-item-btn:hover .galerie-img,
.galerie-grid--mosaique .galerie-item-btn:focus-visible .galerie-img { transform: scale(1.06); }

/* Le voile monte depuis le bas au lieu d'apparaître en fondu. Il reste sur le
   noir translucide déjà employé par les autres styles : du blanc sur un aplat
   de --vert ne donnerait que 2,2:1, très en dessous du seuil AA. */
.galerie-grid--mosaique .galerie-overlay {
    opacity: 1;
    background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.28) 52%, transparent 100%);
    transform: translateY(101%);
    transition: transform .35s cubic-bezier(.2, .6, .2, 1);
    padding: 1rem;
    /* Le bouton centre son texte ; ici titre, ville et étiquette d'univers
       doivent partager le même bord gauche. */
    text-align: left;
}
.galerie-grid--mosaique .galerie-item-btn:hover .galerie-overlay,
.galerie-grid--mosaique .galerie-item-btn:focus-visible .galerie-overlay { transform: translateY(0); }

/* La seule marque de couleur de l'effet : un trait vert qui se déroule sous la
   tuile survolée. Le voile porte le texte, ce trait porte l'identité. */
.galerie-grid--mosaique .galerie-item-btn::after {
    content: ''; position: absolute; left: 0; bottom: 0; z-index: 2;
    width: 100%; height: 3px; background: var(--vert);
    transform: scaleX(0); transform-origin: left;
    transition: transform .35s cubic-bezier(.2, .6, .2, 1);
}
.galerie-grid--mosaique .galerie-item-btn:hover::after,
.galerie-grid--mosaique .galerie-item-btn:focus-visible::after { transform: scaleX(1); }

.galerie-grid--mosaique .galerie-label { font-size: .95rem; }
.galerie-grid--mosaique .galerie-meta {
    color: rgba(255,255,255,.85); font-size: .78rem; line-height: 1.4;
}

/* Sans survol (tactile), un effet au survol n'existe pas : le voile et le trait
   sont acquis d'emblée, sinon les légendes seraient invisibles sur mobile. */
@media (hover: none) {
    /* Voile plus dense qu'au survol : il est permanent, et sur une petite tuile
       un titre de trois lignes remonte au-dessus de la zone la plus sombre. Il
       doit rester lisible sur une photo claire jusqu'en haut du texte. */
    .galerie-grid--mosaique .galerie-overlay {
        transform: translateY(0);
        background: linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.08) 100%);
    }
    .galerie-grid--mosaique .galerie-item-btn::after { transform: scaleX(1); }
}

@media (max-width: 1023px) {
    .galerie-grid--mosaique { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
    /* Sur deux colonnes, la grande tuile s'étale en panoramique plutôt qu'en
       carré : un bloc 2×2 occuperait tout l'écran à lui seul. */
    .galerie-grid--mosaique .galerie-item:nth-child(5n+1) { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 640px) {
    .galerie-grid--mosaique { grid-auto-rows: 140px; gap: .5rem; }
    .galerie-grid--mosaique .galerie-overlay { padding: .75rem; }
    .galerie-grid--mosaique .galerie-label { font-size: .85rem; }
}

@media (prefers-reduced-motion: reduce) {
    .galerie-grid--mosaique .galerie-img,
    .galerie-grid--mosaique .galerie-overlay,
    .galerie-grid--mosaique .galerie-item-btn::after { transition: none; }
    .galerie-grid--mosaique .galerie-item-btn:hover .galerie-img,
    .galerie-grid--mosaique .galerie-item-btn:focus-visible .galerie-img { transform: none; }
    /* Le voile ne coulisse plus, il est simplement là ou pas. */
    .galerie-grid--mosaique .galerie-overlay { transform: translateY(0); opacity: 0; }
    .galerie-grid--mosaique .galerie-item-btn:hover .galerie-overlay,
    .galerie-grid--mosaique .galerie-item-btn:focus-visible .galerie-overlay { opacity: 1; }
}

/* ════════════════════════════════════════════════
   PAGES LÉGALES
   ════════════════════════════════════════════════ */
.page-legale { padding: 1.5rem 0 4rem; }
.page-legale-inner {
    max-width: 820px; margin: 0 auto;
    background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 2.5rem 3rem;
}
.page-legale-vide { color: var(--gris-texte); text-align: center; padding: 3rem 0; }

.content-html h2 { font-size: 1.2rem; margin: 2rem 0 .5rem; color: var(--texte); }
.content-html h3 { font-size: 1rem; margin: 1.5rem 0 .5rem; color: var(--texte); }

/* Case CGV dans le formulaire devis */
.devis-cgv-label {
    display: flex; align-items: flex-start; gap: .5rem;
    font-size: .88rem; color: #444; cursor: pointer;
    margin-bottom: .5rem;
}
.devis-cgv-label input { margin-top: .15rem; flex-shrink: 0; cursor: pointer; }
.devis-cgv-label a { color: var(--vert-texte); text-decoration: underline; }

.form-captcha { margin-top: .25rem; display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: .5rem; }
.form-captcha label { font-weight: 600; }
.form-captcha input { border: 2px solid var(--vert); border-radius: var(--radius); padding: .5rem .75rem; font-size: 1rem; }
.form-captcha .captcha-hint { flex-basis: 100%; margin-top: 0; }
/* Largeur en `ch` : elle suit la police réellement rendue (la police de repli,
   plus large, tronquait le placeholder « Votre réponse »). */
.form-captcha input { max-width: 18ch; }
.captcha-hint { display: block; margin-top: .25rem; font-size: .78rem; color: #6b7280; }
.field-error { display: block; margin-top: .25rem; font-size: .8rem; color: #dc2626; }

@media (max-width: 640px) {
    .page-legale-inner { padding: 1.5rem 1.25rem; }
}

/* ════════════════════════════════════════════════
   ESPACE CLIENT
   ════════════════════════════════════════════════ */
.ec-login-page { padding: 3rem 0 5rem; }
.ec-login-card {
    max-width: 440px; margin: 0 auto;
    background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 2.5rem 2rem;
}
.ec-login-card h1 { font-size: 1.5rem; margin-bottom: .5rem; }
.ec-login-sub { color: var(--gris-texte); margin-bottom: 1.5rem; font-size: .93rem; }
.ec-form { display: flex; flex-direction: column; gap: 1rem; }
.ec-login-hint { margin-top: 1.5rem; font-size: .82rem; color: var(--gris-texte); text-align: center; line-height: 1.5; }

/* padding-block et non le raccourci : « padding: 2rem 0 4rem » remettait à zéro la marge
   latérale de .container — tout l'espace client collait au bord de l'écran sur téléphone. */
.ec-page { padding-block: 2rem 4rem; }
/* Cibles tactiles de l'espace client à 44 px en mobile : filtres (28), retour (16),
   petits boutons Envoyer / Se déconnecter (32 / 42), liens des documents (23). */
@media (max-width: 768px) {
    .ec-page .ec-filtre { display: inline-flex !important; align-items: center; min-height: 44px; }
    .ec-page .breadcrumb-back { display: inline-flex; align-items: center; min-height: 44px; }
    .ec-page .btn-sm { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
    .ec-page .ec-doc-lien { display: flex; align-items: center; min-height: 44px; }
}
.ec-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    flex-wrap: wrap; gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--vert);
}
.ec-header h1 { font-size: 1.5rem; margin-bottom: .25rem; }
.ec-email { color: var(--gris-texte); font-size: .9rem; }

.btn-sm { padding: .5rem 1rem; font-size: .85rem; }

.ec-section {
    background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 1.75rem 2rem; margin-bottom: 2rem;
}
.ec-section h2 { font-size: 1.15rem; margin-bottom: 1.25rem; }
.ec-vide { color: var(--gris-texte); margin-bottom: 1.25rem; }

.ec-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.ec-table th, .ec-table td {
    padding: .75rem .75rem; border-bottom: 1px solid #f0f0f0;
    text-align: left; vertical-align: middle;
}
.ec-table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gris-texte); font-weight: 600; }
.ec-date { color: var(--gris-texte); font-size: .85rem; }

.ec-section-contact { text-align: center; }
.ec-section-contact p { color: var(--gris-texte); margin-bottom: 1.25rem; }

@media (max-width: 480px) {
    .ec-login-card { padding: 1.75rem 1.25rem; }
    /* Sur téléphone, seule la référence du produit cède la place (classe explicite) :
       l'ancienne règle masquait la 2e colonne de TOUS les tableaux — les valeurs
       du bloc « Informations » et le nom des produits disparaissaient. */
    .ec-table .ec-col-ref { display: none; }
}

/* ── Gamme : produits connexes ───────────────────────────────────────────── */
/* ── Section connexes + Carousel ── */
.connexes-section {
    background: #f8fafc;
    padding: 3rem 0 3.5rem;
    margin-top: 3rem;
    border-top: 2px solid #e5e7eb;
}
.connexes-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1.5rem; flex-wrap: wrap; gap: .75rem;
}
.connexes-titre {
    font-size: 1.25rem; font-weight: 700; color: var(--texte); margin: 0;
}
.connexes-titre span { color: var(--vert-texte); }

/* Zone intro accueil (entre hero et Nos univers) */
.home-intro {
    padding: 3.5rem 0;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
}
/* Disposition centrée (défaut) */
.home-intro--centree { text-align: center; }
.home-intro--centree .home-intro-titre { margin-left: auto; margin-right: auto; }
.home-intro--centree .home-intro-texte { margin-left: auto; margin-right: auto; }

/* Image centrée (disposition centrée) */
.home-intro-img {
    margin: 0 auto 2rem;
    max-width: 680px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
.home-intro-img img { width: 100%; display: block; object-fit: cover; }

/* Disposition côte à côte */
.home-intro-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}
.home-intro-split-img {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
.home-intro-split-img img { width: 100%; display: block; object-fit: cover; aspect-ratio: 4/3; }
@media (max-width: 768px) {
    .home-intro-split { grid-template-columns: 1fr; gap: 1.5rem; }
}

.home-intro-titre {
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--texte);
    margin-bottom: 1rem;
}
.home-intro-texte {
    font-size: 1.05rem;
    color: #555;
    line-height: 1.75;
    max-width: 800px;
}
.home-intro-texte p { margin-bottom: .75rem; }
.home-intro-texte p:last-child { margin-bottom: 0; }
/* Le texte d'intro est centré dans un conteneur à 700px ; le bouton se centre
   sur la même verticale quelle que soit la disposition. */
.home-intro-cta { margin: 2rem 0 0; text-align: center; }

/* Centrage sections Nos univers + Actualités + modules home */
.univers .connexes-header,
.derniers-articles .connexes-header,
.home-nouveautes .connexes-header,
.home-featured .connexes-header {
    justify-content: center;
    gap: 1.25rem;
}
.univers .connexes-titre,
.derniers-articles .connexes-titre,
.home-nouveautes .connexes-titre,
.home-featured .connexes-titre {
    font-size: 1.6rem;
}

/* Section nouveautés */
.home-nouveautes {
    padding: 3rem 0;
    background: #f9fafb;
}

/* Section produits à la une */
.home-featured {
    padding: 3rem 0;
}

/* Badge "Nouveau" sur les cartes */
.home-badge-new {
    position: absolute;
    top: .6rem;
    left: .6rem;
    background: var(--vert);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .25rem .5rem;
    border-radius: var(--radius);
    z-index: 2;
    pointer-events: none;
}

/* Boutons nav carousel */
.carousel-nav { display: flex; gap: .5rem; }
.carousel-btn {
    width: 44px; height: 44px; border-radius: 50%;
    border: 2px solid #e5e7eb; background: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: #374151; transition: all .15s;
}
.carousel-btn:hover:not(:disabled) { border-color: var(--vert); color: var(--vert-texte); }
.carousel-btn:disabled { opacity: .35; cursor: default; }

/* Track */
.carousel-wrapper { overflow: hidden; }
.carousel-track {
    display: flex;
    transition: transform .4s cubic-bezier(.25,.46,.45,.94);
}
.carousel-item {
    flex: 0 0 25%; /* 4 visible par défaut */
    padding: 0 .5rem;
    box-sizing: border-box;
}
.carousel-card {
    display: block; text-decoration: none; color: inherit;
    background: #fff; border: 1px solid #e5e7eb; border-radius: var(--radius);
    overflow: hidden; height: 100%;
    transition: box-shadow .2s, transform .2s;
}
.carousel-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.carousel-card-img {
    background: #f9fafb; border-bottom: 1px solid #f3f4f6;
    display: flex; align-items: center; justify-content: center;
    height: 160px; overflow: hidden;
}
.carousel-card-img img { width: 100%; height: 160px; object-fit: contain; padding: .5rem; }
.carousel-no-img { width: 100%; height: 160px; background: #f3f4f6; }
.carousel-card-body { padding: .75rem; }
.carousel-card-body h3 { font-size: .88rem; font-weight: 600; margin: 0 0 .25rem; line-height: 1.35; color: var(--texte); }
.carousel-card-body p { font-size: .78rem; color: #6b7280; margin: 0; line-height: 1.4; }

/* Flip cards dans le carousel */
.carousel-item .produit-card-wrap {
    width: 100%;
    height: 320px;
}

/* Dots */
.carousel-dots { display: flex; justify-content: center; gap: 0; margin-top: 1.25rem; }

/* Grille statique (sans carousel) */
.static-grid { overflow: visible; }
.static-grid .static-track { flex-wrap: wrap; transform: none !important; transition: none; }

/* Breakpoints alignés sur JS getVisible() : < 1200 → 3, < 900 → 2, < 600 → 1 */
@media (max-width: 1199px) { .static-grid .static-track .carousel-item,
                              .carousel-wrapper .carousel-item { flex: 0 0 33.333%; } }
@media (max-width: 899px)  { .static-grid .static-track .carousel-item,
                              .carousel-wrapper .carousel-item { flex: 0 0 50%; } }
@media (max-width: 599px)  { .static-grid .static-track .carousel-item,
                              .carousel-wrapper .carousel-item { flex: 0 0 100%; } }

/* Univers : 4 → 2 → 1 (jamais 3+1 orphelin)
   Surcharge le 33.333% générique pour rester sur des lignes paires */
.univers-static .static-track .carousel-item { flex: 0 0 25%; }
@media (max-width: 1199px) { .univers-static .static-track .carousel-item { flex: 0 0 50%; } }
@media (max-width: 599px)  { .univers-static .static-track .carousel-item { flex: 0 0 100%; } }

/* Hauteur uniforme static-grid et carousel feat — même calcul que les grilles,
   resserré à mesure que l'écran se réduit : les cartes s'y élargissent, donc le
   titre y tient sur moins de lignes. */
.static-grid .carousel-item .produit-card-wrap,
.carousel-wrapper .carousel-item .produit-card-wrap { height: calc(var(--vignette, 220px) + var(--carte-texte, 160px)); }
@media (max-width: 1100px) { .static-grid .carousel-item .produit-card-wrap,
                              .carousel-wrapper .carousel-item .produit-card-wrap { height: calc(var(--vignette, 220px) + var(--carte-texte, 160px) - 20px); } }
@media (max-width: 768px)  { .static-grid .carousel-item .produit-card-wrap,
                              .carousel-wrapper .carousel-item .produit-card-wrap { height: calc(var(--vignette, 220px) + var(--carte-texte, 160px) - 40px); } }
@media (max-width: 480px)  { .static-grid .carousel-item .produit-card-wrap,
                              .carousel-wrapper .carousel-item .produit-card-wrap { height: calc(var(--vignette, 220px) + var(--carte-texte, 160px) - 60px); } }
/* Le bouton fait 24 px (taille de cible minimale, WCAG 2.2) ; le rond visible reste de
   8 px, dessiné au centre. Les points sont un peu plus espacés, pas plus gros. */
.dot {
    width: 24px; height: 24px; border: none; background: none;
    cursor: pointer; padding: 0; position: relative;
}
.dot::before {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
    background: #d1d5db; transition: background .2s, transform .2s;
}
.dot--active::before { background: var(--vert); transform: scale(1.3); }
.dot:focus-visible { outline: 2px solid var(--vert-texte); outline-offset: -2px; border-radius: 50%; }

/* Compat ancienne grille (pages non-carousel) */
.produits-grille--compact {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}
.produits-grille--compact .produit-card { background:#fff; border:1px solid #e5e7eb; border-radius:var(--radius); overflow:hidden; transition:box-shadow .15s; }
.produits-grille--compact .produit-card:hover { box-shadow:var(--shadow-sm); }
.produits-grille--compact .produit-card-link { display:block; color:inherit; text-decoration:none; }
.produits-grille--compact .produit-card-img img { width:100%; height:150px; object-fit:contain; padding:.5rem; }
.produits-grille--compact .produit-card-body { padding:.75rem; }
.produits-grille--compact .produit-card-nom { font-size:.9rem; font-weight:600; color:var(--texte); margin:0 0 .25rem; line-height:1.3; }
.produits-grille--compact .produit-card-desc { font-size:.78rem; color:#6b7280; margin:0; line-height:1.4; }

/* ════════════════════════════════════════════════
   PAGES SERVICE (amenagement-cle-en-main, maintenance)
   ════════════════════════════════════════════════ */
/* ── Page en « éditeur libre » ──────────────────────────────────────────────
   Colonne de lecture centrée, comme /newsletter : une largeur de ligne confortable
   plutôt qu'un texte étalé sur toute la largeur de l'écran. */
.page-libre {
    max-width: var(--page-largeur, 820px);
    margin: 0 auto;
    padding: 2.75rem 1.25rem 3.5rem;
    font-size: 1.02rem;
    line-height: 1.7;
    color: #374151;
}
.page-libre > h1 { font-size: clamp(1.6rem, 3.4vw, 2.1rem); line-height: 1.25; margin: 0 0 1rem; color: #111827; }
.page-libre > h2 { font-size: 1.4rem; margin: 2.5rem 0 .75rem; color: #111827; }
.page-libre > h3 { font-size: 1.15rem; margin: 1.75rem 0 .5rem; color: #1f2937; }
.page-libre > p { margin: 0 0 1rem; }
.page-libre > ul, .page-libre > ol { margin: 0 0 1.25rem; padding-left: 1.5rem; }
.page-libre li { margin-bottom: .5rem; }
.page-libre img { max-width: 100%; height: auto; border-radius: 8px; }
.page-libre a { color: #4a7c0f; }
.page-libre hr { border: none; border-top: 1px solid #e5e7eb; margin: 2.25rem 0; }
.page-libre table { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; }
.page-libre th, .page-libre td { border: 1px solid #e5e7eb; padding: .5rem .75rem; text-align: left; }
.page-libre th { background: #f8f9fa; font-weight: 600; }

/* Largeur de la colonne — réglable par page (champ « Largeur du contenu ») */
.page-libre--etroite { --page-largeur: 680px; }
.page-libre--normale { --page-largeur: 820px; }
.page-libre--large   { --page-largeur: 1100px; }
.page-libre--pleine  { --page-largeur: none; padding-left: 0; padding-right: 0; }

/* Hauteur du bandeau — réglable par page (champ « Bandeau d'en-tête ») */
.bandeau--image .service-hero       { aspect-ratio: 19 / 6; }   /* proportions de l'image */
.bandeau--panoramique .service-hero { aspect-ratio: 24 / 5; }   /* bande plus fine */
.bandeau--haut .service-hero        { aspect-ratio: auto; min-height: 420px; }
/* « Aucun ratio » : rien n'est imposé. Les proportions réelles de l'image sont
   posées en style en ligne par PageBlocs (Image::ratio), de sorte que le
   background-size:cover n'ait plus rien à rogner. Le min-height de la règle de
   base est neutralisé, sinon une image basse serait quand même étirée. */
.bandeau--libre .service-hero       { aspect-ratio: var(--bandeau-ratio, auto); min-height: 0; }

/* Les éléments qui doivent rester pleine largeur sortent de la colonne :
   les pages déjà mises en page (bandeau, sections) gardent leur rendu d'origine. */
.page-libre > .page-service,
.page-libre > .service-hero,
.page-libre > .full-bleed {
    max-width: none;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.page-service { }
.service-hero {
    /* Le bandeau épouse le format des images de bannière (19/6, soit 1140×360)
       au lieu d'imposer 420px de haut : une image de ce format était étirée puis
       rognée pour remplir la hauteur — d'où l'effet de zoom, d'autant plus marqué
       que l'écran est large. Avec ce ratio, elle s'affiche entière. */
    aspect-ratio: 19 / 6;
    min-height: 240px;                 /* garde-fou sur écran étroit */
    background-size: cover; background-position: center; background-repeat: no-repeat;
    background-color: #1f2937;         /* fond neutre si l'image ne couvre pas tout */
    position: relative; display: flex; align-items: flex-end;
}
@media (max-width: 700px) {
    /* En colonne étroite, le ratio large rendrait le bandeau trop bas pour son texte.
       Exception : « aucun ratio » doit le rester sur téléphone aussi, sinon
       l'image serait recadrée précisément là où l'écran est le plus étroit. */
    .service-hero { aspect-ratio: auto; min-height: 300px; }
    /* Les formats « image » et « panoramique » sont plus spécifiques que la règle
       ci-dessus et gardaient leur ratio : avec min-height, le ratio transformait les
       300px de haut en 950px de large minimum, et la page débordait sur téléphone. */
    .bandeau--image .service-hero, .bandeau--panoramique .service-hero { aspect-ratio: auto; }
    .bandeau--libre .service-hero { aspect-ratio: var(--bandeau-ratio, auto); min-height: 0; }
}
.service-hero-overlay {
    width: 100%; padding: 3rem 0;
    background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.3) 60%, transparent 100%);
}
.service-hero-overlay .breadcrumb ol { color: rgba(255,255,255,.7); }
.service-hero-overlay .breadcrumb a { color: rgba(255,255,255,.7); }
.service-hero h1 { color: #fff; font-size: clamp(1.6rem, 4vw, 2.4rem); margin: .5rem 0 .75rem; }
.service-hero-sub { color: rgba(255,255,255,.85); font-size: 1.05rem; line-height: 1.55; margin-bottom: 1.5rem; }

.page-service-content { padding: 3rem 0 4rem; }

.service-section { margin-bottom: 3.5rem; }
.service-section-titre { font-size: 1.4rem; margin-bottom: 1.75rem; position: relative; padding-bottom: .5rem; }
.service-section-titre::after { content:''; position:absolute; left:0; bottom:0; width:48px; height:3px; background:var(--vert); border-radius:var(--radius-pilule); }

/* Intro 2 colonnes */
.service-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.service-intro-text h2 { font-size: 1.4rem; margin-bottom: 1rem; }
.service-intro-text p { color: #555; line-height: 1.7; margin-bottom: .75rem; }
.service-intro-img img { width: 100%; border-radius: var(--radius); object-fit: cover; max-height: 340px; }

/* Steps */
.service-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
@media (max-width: 900px) { .service-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .service-steps { grid-template-columns: 1fr; } }
.service-step { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: var(--radius); padding: 1.5rem 1.25rem; text-align: center; }
.step-num { width: 44px; height: 44px; border-radius: 50%; background: var(--vert); color: #fff; font-size: 1.1rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }
.service-step h3 { font-size: 1rem; margin-bottom: .5rem; }
.service-step p { font-size: .85rem; color: #6b7280; line-height: 1.5; margin: 0; }

/* Galerie */
.service-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.service-gallery-img img { width: 100%; height: 200px; object-fit: cover; border-radius: var(--radius); display: block; transition: transform .3s; }
.service-gallery-img:hover img { transform: scale(1.03); }
.service-gallery-img { overflow: hidden; border-radius: var(--radius); }

/* Cards domaines */
.service-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 800px) { .service-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .service-cards { grid-template-columns: 1fr; } }
.service-card { background: #fff; border: 1px solid #e5e7eb; border-radius: var(--radius); padding: 1.5rem; }
.service-card h3 { font-size: 1rem; color: var(--vert-texte); margin-bottom: .5rem; }
.service-card p { font-size: .88rem; color: #555; line-height: 1.55; margin-bottom: 1rem; }
.service-card a { font-size: .85rem; color: var(--vert-texte); font-weight: 600; text-decoration: none; }
.service-card a:hover { text-decoration: underline; }
.service-card--highlight { border-top: 3px solid var(--vert); }

/* Norme */
.service-norme-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; background: #f0f9e8; border-radius: var(--radius); padding: 2.5rem; }
.service-norme-text h2 { font-size: 1.3rem; margin-bottom: 1rem; }
.service-norme-text p { color: #555; line-height: 1.65; margin-bottom: .75rem; font-size: .93rem; }
.service-norme-list { padding-left: 1.25rem; color: #555; font-size: .9rem; line-height: 1.8; }
.service-norme-img img { width: 100%; border-radius: var(--radius); object-fit: cover; max-height: 280px; }

/* Docs */
.service-docs-grid { display: flex; gap: 1rem; flex-wrap: wrap; }
.service-doc { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.5rem; background: #fff; border: 1px solid #e5e7eb; border-radius: var(--radius); text-decoration: none; color: var(--texte); transition: border-color .2s, box-shadow .2s; }
.service-doc:hover { border-color: var(--vert); box-shadow: var(--shadow-sm); }
.service-doc svg { color: var(--vert); flex-shrink: 0; }
.service-doc span { font-size: .88rem; font-weight: 500; }

/* CTA */
.service-cta { margin-top: 3rem; }
.service-cta-inner { background: var(--vert); color: #fff; border-radius: var(--radius); padding: 3rem 2.5rem; text-align: center; }
.service-cta-inner h2 { color: #fff; font-size: 1.5rem; margin-bottom: .75rem; }
.service-cta-inner p { color: rgba(255,255,255,.85); margin-bottom: 1.75rem; font-size: 1rem; }
.service-cta-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.service-cta-btns .btn-primary { background: #fff; color: var(--vert-texte); }
.service-cta-btns .btn-primary:hover { background: #f0f0f0; }
.service-cta-btns .btn-secondary { border-color: rgba(255,255,255,.6); color: #fff; }
.service-cta-btns .btn-secondary:hover { border-color: #fff; background: rgba(255,255,255,.1); }

@media (max-width: 768px) {
    .service-intro { grid-template-columns: 1fr; }
    .service-gallery { grid-template-columns: repeat(2, 1fr); }
    .service-norme-inner { grid-template-columns: 1fr; }
    .service-hero { min-height: 320px; }
}
@media (max-width: 480px) {
    .service-gallery { grid-template-columns: 1fr; }
    .service-cta-inner { padding: 2rem 1.25rem; }
}

/* ════════════════════════════════════════════════
   TASK 4 — Améliorations fiche produit
   ════════════════════════════════════════════════ */

/* (Galerie, nom, référence, bouton devis et onglets : voir le bloc « Fiche produit » plus haut.) */
.btn-ajouter-devis.btn-added { background: #4a7a19; }
.btn-ajouter-devis { border: none; cursor: pointer; transition: background .18s; }

/* Section produits connexes améliorée */
.gamme-connexes {
    background: #f8fafb;
    padding: 3rem 0 4rem;
    margin-top: 3rem;
    border-top: 1px solid #e5e7eb;
}
.gamme-titre {
    font-size: 1.25rem; font-weight: 700;
    margin-bottom: 1.75rem;
    position: relative; padding-bottom: .5rem;
}
.gamme-titre::after {
    content: ''; position: absolute; left: 0; bottom: 0;
    width: 40px; height: 3px;
    background: var(--vert); border-radius: var(--radius-pilule);
}
.produits-grille--compact {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.25rem;
}
.produits-grille--compact .produit-card {
    background: #fff; border: 1px solid #e5e7eb;
    border-radius: var(--radius); overflow: hidden;
    transition: box-shadow .18s, transform .18s;
}
.produits-grille--compact .produit-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.produits-grille--compact .produit-card-img img {
    width: 100%; height: 160px; object-fit: contain; padding: .75rem;
    transition: transform .25s;
}
.produits-grille--compact .produit-card:hover .produit-card-img img { transform: scale(1.05); }
.produits-grille--compact .produit-card-body { padding: .75rem; border-top: 1px solid #f3f4f6; }
.produits-grille--compact .produit-card-nom { font-size: .88rem; font-weight: 600; color: var(--texte); margin: 0; line-height: 1.3; }

/* ════════════════════════════════════════════════
   TASK 4 — Template Documentation produit
   ════════════════════════════════════════════════ */

.fiche-produit--documentation { padding: 0; }

/* Hero documentation */
.doc-hero {
    background: linear-gradient(135deg, #1a3a0a 0%, #2d6010 40%, #83B735 100%);
    padding: 3rem 0 4rem;
    color: #fff;
}
.doc-hero .breadcrumb--light ol { padding: 0; margin: 0 0 1.5rem; list-style: none; display: flex; gap: .5rem; font-size: .8rem; flex-wrap: wrap; }
.doc-hero .breadcrumb--light li { color: rgba(255,255,255,.7); }
.doc-hero .breadcrumb--light a { color: rgba(255,255,255,.85); text-decoration: none; }
.doc-hero .breadcrumb--light a:hover { color: #fff; text-decoration: underline; }
.doc-hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.doc-hero-content { display: flex; flex-direction: column; }
.doc-ref-badge {
    display: inline-block; align-self: flex-start;
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: #fff; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.35);
    border-radius: var(--radius-pilule); padding: .25rem .75rem; margin-bottom: .75rem;
}
.doc-hero-titre { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 800; line-height: 1.2; margin-bottom: .5rem; color: #fff; }
.doc-gamme { font-size: .88rem; color: rgba(255,255,255,.75); margin-bottom: .75rem; }
.doc-intro { font-size: .95rem; color: rgba(255,255,255,.85); line-height: 1.65; margin-bottom: 1.5rem; }
.doc-intro p { margin: 0 0 .5rem; }
.doc-hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.doc-cta-primary {
    display: inline-flex; align-items: center; gap: .5rem;
    background: #fff; color: #2d6010;
    font-weight: 700; border: none; border-radius: var(--radius);
    padding: .75rem 1.75rem; font-size: .97rem;
    text-decoration: none; transition: background .15s, box-shadow .15s;
    box-shadow: var(--shadow-sm);
}
.doc-cta-primary:hover { background: #f5f5f5; box-shadow: var(--shadow-lg); }
.doc-hero-actions .btn-secondary {
    border-color: rgba(255,255,255,.6); color: #fff; background: rgba(255,255,255,.1);
}
.doc-hero-actions .btn-secondary:hover { border-color: #fff; background: rgba(255,255,255,.2); }
.doc-feedback { font-size: .82rem; color: rgba(255,255,255,.9); margin-top: .5rem; min-height: 1.2em; }

/* Image hero */
.doc-hero-image { text-align: center; }
.doc-main-image {
    max-width: 100%; max-height: 420px; object-fit: contain;
    border-radius: var(--radius); background: rgba(255,255,255,.08);
    padding: 1rem; transition: opacity .15s ease;
}
.doc-thumbs { display: flex; gap: .5rem; justify-content: center; margin-top: .75rem; flex-wrap: wrap; }
.doc-thumb-btn {
    width: 60px; height: 60px; border: 2px solid rgba(255,255,255,.3);
    border-radius: var(--radius); overflow: hidden; cursor: pointer;
    background: rgba(255,255,255,.1); padding: 0; transition: border-color .15s;
}
.doc-thumb-btn.active, .doc-thumb-btn:hover { border-color: rgba(255,255,255,.9); }
.doc-thumb-btn img { width: 100%; height: 100%; object-fit: cover; }

/* Spécifications */
.doc-specs-section { padding: 3rem 0; background: #fff; }
.doc-section-titre {
    font-size: 1.25rem; font-weight: 700;
    margin-bottom: 2rem; position: relative; padding-bottom: .5rem;
}
.doc-section-titre::after { content:''; position:absolute; left:0; bottom:0; width:40px; height:3px; background:var(--vert); border-radius:var(--radius-pilule); }
.doc-specs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
.doc-spec-group { background: #f8fafb; border: 1px solid #e5e7eb; border-radius: var(--radius); padding: 1.25rem 1.5rem; }
.doc-spec-group-titre { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #6b7280; margin-bottom: .75rem; }
.doc-spec-list { margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.doc-spec-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; font-size: .88rem; border-bottom: 1px solid #e5e7eb; padding-bottom: .5rem; }
.doc-spec-row:last-child { border-bottom: none; padding-bottom: 0; }
.doc-spec-row dt { color: #6b7280; font-weight: 500; }
.doc-spec-row dd { color: #1f2937; font-weight: 600; margin: 0; }
.doc-spec-val-full { grid-column: 1 / -1; color: #1f2937; margin: 0; }

/* Normes */
.doc-normes-section { padding: 2.5rem 0; background: #f0f9e8; }
.doc-normes-content { font-size: .9rem; line-height: 1.8; color: #374151; white-space: pre-line; }

/* CTA bas */
.doc-bottom-cta { padding: 3rem 0; background: #fff; border-top: 1px solid #e5e7eb; }
.doc-cta-box {
    display: flex; align-items: center; gap: 2.5rem;
    background: linear-gradient(135deg, #1a3a0a 0%, #2d6010 40%, #83B735 100%);
    border-radius: var(--radius); padding: 2.5rem 3rem; color: #fff;
}
.doc-cta-text { flex: 1; }
.doc-cta-text h2 { color: #fff; font-size: 1.3rem; margin-bottom: .5rem; }
.doc-cta-text p { color: rgba(255,255,255,.85); margin: 0; font-size: .95rem; }
.doc-cta-btns { display: flex; gap: 1rem; flex-wrap: wrap; flex-shrink: 0; }
.doc-cta-btns .btn-primary { background: #fff; color: #2d6010; }
.doc-cta-btns .btn-primary:hover { background: #f5f5f5; }
.doc-cta-btns .btn-secondary { border-color: rgba(255,255,255,.6); color: #fff; }

@media (max-width: 900px) {
    .doc-hero-inner { grid-template-columns: 1fr; }
    .doc-hero-image { order: -1; }
    .doc-cta-box { flex-direction: column; text-align: center; padding: 2rem 1.5rem; }
}
@media (max-width: 600px) {
    .doc-hero { padding: 2rem 0 2.5rem; }
    .doc-specs-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════
   TASK 3 — Templates pages statiques
   ════════════════════════════════════════════════ */

/* page_service.php — hero vert + contenu */
.page-service--tpl { }
.service-tpl-hero {
    background: linear-gradient(135deg, #1a3a0a 0%, #2d6010 40%, #83B735 100%);
    padding: 4rem 0 3.5rem;
    text-align: center;
}
.service-tpl-titre {
    font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800;
    color: #fff; margin-bottom: .75rem; line-height: 1.2;
}
.service-tpl-subtitle {
    font-size: 1.1rem; color: rgba(255,255,255,.85);
    max-width: 680px; margin: 0 auto; line-height: 1.6;
}
.page-service-content { padding: 3rem 0 4rem; }
.service-content { max-width: 960px; margin: 0 auto; }
.service-content h2 { font-size: 1.4rem; margin: 2rem 0 .75rem; }
.service-content h3 { font-size: 1.1rem; margin: 1.5rem 0 .5rem; }
.service-content p { color: #444; line-height: 1.75; margin-bottom: .75rem; }
.service-content ul, .service-content ol { margin: .5rem 0 1rem 1.5rem; }
.service-content li { margin-bottom: .25rem; color: #444; line-height: 1.65; }
.service-content img { max-width: 100%; border-radius: var(--radius); }
.service-content table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .9rem; }
.service-content th, .service-content td { border: 1px solid #ddd; padding: .5rem .75rem; }
.service-content th { background: #f3f4f6; }

/* page_info.php — header accent + colonnes */
.page-info { }
.page-info-header {
    background: #fff; border-bottom: 3px solid var(--vert);
    padding: 2.5rem 0 2rem;
}
.page-info-header-inner { position: relative; padding-left: 1.25rem; }
.page-info-header-inner::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 4px; background: var(--vert); border-radius: var(--radius-pilule);
}
.page-info-titre {
    font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 700;
    color: var(--texte); margin: 0; line-height: 1.2;
}
.page-info-body { padding: 3rem 0 4rem; }
.page-info-layout { display: grid; grid-template-columns: 1fr 300px; gap: 3rem; align-items: start; }
.page-info-content { max-width: 900px; }
.page-info-content h2 { font-size: 1.25rem; margin: 2rem 0 .75rem; }
.page-info-content h3 { font-size: 1rem; margin: 1.5rem 0 .5rem; }
.page-info-content p { color: #444; line-height: 1.75; margin-bottom: .75rem; }
.page-info-content ul, .page-info-content ol { margin: .5rem 0 1rem 1.5rem; }
.page-info-content li { margin-bottom: .25rem; color: #444; }
.page-info-content img { max-width: 100%; border-radius: var(--radius); }
.page-info-contact-card {
    position: sticky; top: 2rem;
    background: #f0f9e8; border: 1px solid #bbf7d0;
    border-radius: var(--radius); padding: 1.5rem; text-align: center;
}
.page-info-contact-card h3 { font-size: 1rem; font-weight: 700; color: var(--texte); margin-bottom: 1rem; }
.contact-item { display: flex; align-items: center; gap: .5rem; justify-content: center; font-size: .9rem; margin-bottom: .5rem; }
.contact-item a { color: var(--texte); text-decoration: none; font-weight: 500; }
.contact-item a:hover { color: var(--vert-texte); }
.contact-item svg { color: var(--vert); flex-shrink: 0; }
.page-info-cta-btn { display: block; text-align: center; margin-top: 1rem; text-decoration: none; }
/* Avec un second lien : les deux boutons restent pleine largeur, l'un sous l'autre */
.encart-boutons:has(> .page-info-cta-btn) { display: flex; flex-direction: column; align-items: stretch; gap: 0; }

@media (max-width: 768px) {
    .page-info-layout { grid-template-columns: 1fr; }
    .page-info-contact-card { position: static; }
}

/* ════════════════════════════════════════════════
   TASK 5 — Bouton quick-add sur cartes catalogue
   ════════════════════════════════════════════════ */

/* Le wrap a déjà position: relative via l'existant ; on s'assure juste */
.produit-card-wrap { position: relative; }

/* Bouton info catalogue (déjà existant, harmonisation) */
.btn-info-card {
    position: absolute;
    bottom: .6rem; right: .6rem;
    width: 44px; height: 44px;
    background: var(--vert); color: #fff;
    border: none; border-radius: 50%;
    font-size: .95rem; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    opacity: 0;
    transition: opacity .18s, transform .18s;
    z-index: 2;
}
.produit-card-wrap:hover .btn-info-card,
.produit-card-wrap.flipped .btn-info-card,
.btn-info-card:focus-visible { opacity: 1; }
.btn-info-card:hover { background: #6fa025; transform: scale(1.1); }

/* ════════════════════════════════════════════════
   TASK 1c — Bloc de contenu bas de page catalogue
   ════════════════════════════════════════════════ */
.univers-bloc-bas {
    margin-top: 3rem;
    padding: 2rem;
    background: #f8fbf3;
    border-radius: var(--radius-lg);
    border-left: 4px solid #83B735;
    font-size: .95rem;
    line-height: 1.7;
}
.univers-bloc-bas h2, .univers-bloc-bas h3 { color: #2d4a1e; margin-bottom: .75rem; }
.univers-bloc-bas a { color: var(--vert-texte); }

/* ════════════════════════════════════════════════
   TASK 4 — Tags / description_courte sur cartes catalogue
   ════════════════════════════════════════════════ */
.produit-card-tags {
    display: flex; flex-wrap: wrap; gap: .25rem;
    padding: 0 .75rem .75rem;
}
.produit-card-tag {
    font-size: .65rem; padding: .15rem .5rem;
    background: #f0f4e8; color: var(--vert-texte); border-radius: var(--radius-pilule);
    white-space: nowrap; border: 1px solid #d4e8b0;
}

/* ── Bloc RDV sidebar (compact) ─────────────────────────────────────────── */
.bloc-rdv-sidebar {
    margin-top: 1.5rem;
    padding: 1rem 1rem;
    background: linear-gradient(135deg, #f4faeb 0%, #edf6dc 100%);
    border: 1px solid #d0e8a0;
    border-radius: var(--radius);
    box-shadow: 0 2px 8px rgba(131,183,53,.12);
}
.bloc-rdv-s-icon {
    display: flex; align-items: flex-start; gap: .5rem;
    color: var(--vert-texte); margin-bottom: .5rem;
    font-size: .84rem; font-weight: 700; line-height: 1.25;
}
.bloc-rdv-s-icon svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; }
.bloc-rdv-s-icon strong { min-width: 0; text-wrap: balance; }
.bloc-rdv-s-text {
    font-size: .8rem; color: #556; line-height: 1.5;
    margin: 0 0 1rem;
}
.bloc-rdv-s-btn {
    display: block; text-align: center;
    background: var(--vert); color: #fff;
    padding: .5rem .75rem; border-radius: calc(var(--radius) - 2px);
    font-size: .83rem; font-weight: 700;
    text-decoration: none; margin-bottom: .5rem;
    transition: background .2s, transform .15s;
}
.bloc-rdv-s-btn:hover { background: #6a9528; transform: translateY(-1px); }
.bloc-rdv-s-tel {
    display: block; text-align: center;
    font-size: .78rem; color: var(--vert-texte);
    text-decoration: none; padding: .25rem;
    opacity: .85;
}
.bloc-rdv-s-tel:hover { text-decoration: underline; opacity: 1; }

/* ── Bloc RDV full (bas de page produit) ─────────────────────────────────── */
.bloc-rdv {
    margin: 3rem 0 0;
    background: linear-gradient(120deg, #f0f8e2 0%, #e8f5d0 60%, #f7faf2 100%);
    border: 1px solid #cfe8a8;
    border-radius: var(--radius);
    box-shadow: 0 4px 18px rgba(131,183,53,.13);
    overflow: hidden;
}
.bloc-rdv-inner {
    display: flex; align-items: center; gap: 2rem;
    padding: 2rem 2.5rem; flex-wrap: wrap;
}
.bloc-rdv-icon {
    flex-shrink: 0;
    width: 64px; height: 64px;
    background: var(--vert); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; box-shadow: var(--shadow-glow);
}
.bloc-rdv-content { flex: 1; min-width: 200px; }
.bloc-rdv-title {
    font-size: 1.2rem; font-weight: 700;
    color: #2d4d0e; margin: 0 0 .5rem;
}
.bloc-rdv-text { font-size: .9rem; color: #556; line-height: 1.55; margin: 0; }
.bloc-rdv-text p { margin: 0; }
.bloc-rdv-actions {
    display: flex; flex-direction: column; gap: .5rem;
    flex-shrink: 0; min-width: 200px;
}
.bloc-rdv-btn {
    display: block; text-align: center; text-decoration: none;
    padding: .75rem 1.5rem; border-radius: calc(var(--radius) - 2px);
    font-size: .9rem; font-weight: 700;
    transition: all .2s;
}
.bloc-rdv-btn--primary {
    background: var(--vert); color: #fff;
    box-shadow: var(--shadow-glow);
}
.bloc-rdv-btn--primary:hover { background: #6a9528; transform: translateY(-1px); box-shadow: var(--shadow-glow-hover); }
.bloc-rdv-btn--secondary {
    background: #fff; color: var(--vert-texte);
    border: 1.5px solid #b8d97a;
}
.bloc-rdv-btn--secondary:hover { background: #f0f8e2; border-color: var(--vert); }
@media (max-width: 640px) {
    .bloc-rdv-inner { flex-direction: column; text-align: center; padding: 1.5rem; }
    .bloc-rdv-actions { width: 100%; }
}

/* ── Bloc sondage ─────────────────────────────────────────────────────────
   Direction : une carte de la même famille que ses voisines. Le bloc se pose
   sous le rendez-vous, à côté du guide, parfois au milieu des fiches produit —
   partout des cartes bordées de vert clair et arrondies. Un traitement à part
   ne se lirait pas comme une intention mais comme un oubli, et deux traitements
   selon l'endroit se liraient comme une incohérence : il n'y en a donc qu'un.

   Ce qui distingue le bloc est à l'intérieur, pas au bord.

   Les propositions sont des boutons encadrés qui se replient à la ligne : la
   même écriture à 250 px dans la colonne de filtres, où elles s'empilent, et à
   1 100 px en pleine page, où elles s'alignent. Il n'y a pas de mise en page
   mobile à maintenir, seulement un retour à la ligne naturel.

   Aucune couleur ni police nouvelle : le vert du site, son texte, son rayon. La
   seule note étrangère est le compteur en chasse fixe, parce qu'un « 1/3 » est
   un relevé, pas une phrase. */
.bloc-sondage {
    --sond-trait: #d9ebb6;   /* cadre des propositions, un cran sous celui de la carte */

    margin: 1.25rem 0 0;
    padding: 1rem 1.25rem 1rem;
    background: #fff;
    border: 1px solid #d0e8a0;
    border-radius: var(--radius);
    transition: opacity .4s ease, transform .4s ease,
                margin .4s ease .05s, padding .4s ease .05s, max-height .4s ease .05s;
    max-height: 60rem;
}
.bloc-sondage [hidden] { display: none; }
/* Relogé en bas de page (colonne masquée par la largeur d'écran), le bloc a
   besoin de respirer avant le pied vert, qui arrive sinon collé à la dernière
   proposition. */
#sondage-refuge > .bloc-sondage { margin-bottom: 2rem; }

/* ── En-tête : ce que ça coûte, annoncé avant de cliquer ── */
.bloc-sondage-tete {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: .75rem; margin-bottom: .5rem;
}
.bloc-sondage-eyebrow, .bloc-sondage-rang {
    font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
    font-weight: 700; color: var(--gris-texte); white-space: nowrap;
}
.bloc-sondage-rang { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
/* Titre de carte, comme « Guide aires de jeux » ou « Un expert sur site ? » :
   même vert, même icône légère, même place. Il coiffe le bloc entier. */
.bloc-sondage-titre {
    display: flex; align-items: flex-start; gap: .5rem;
    font-size: .88rem; font-weight: 700; color: #4a7a20;
    margin: 0 0 .5rem; line-height: 1.3; text-wrap: balance;
}
.bloc-sondage-titre svg { flex-shrink: 0; margin-top: .08rem; }

/* Sans titre, c'est la question qui tient ce rôle — d'où le même vert. Avec un
   titre au-dessus, elle redevient du texte courant, plus sombre et plus lisible. */
.bloc-sondage-q {
    font-size: .93rem; font-weight: 700; color: #4a7a20;
    margin: 0 0 .5rem; line-height: 1.4; text-wrap: balance;
}
.bloc-sondage-titre ~ .bloc-sondage-suite .bloc-sondage-q { color: var(--texte); font-size: .88rem; }

/* ── Les propositions ──
   Chacune est entourée : un cadre vert très clair, le même que celui de la carte
   qui les contient, en plus petit. Elles se posent côte à côte et se replient à
   la ligne quand la largeur manque — en colonne de 250 px elles s'empilent
   d'elles-mêmes, sans règle à écrire.

   Le cadre suffit à dire « on peut cliquer » : il remplace le repère qui les
   précédait, et deux marques pour une seule idée en auraient fait une de trop.
   Au survol, le trait passe au vert franc et le fond se teinte — la réponse
   qu'on s'apprête à donner se détache alors des autres. */
.bloc-sondage-opts { display: flex; flex-wrap: wrap; gap: .5rem; }
.bloc-sondage-opt {
    font: inherit; font-size: .84rem; line-height: 1.3; text-align: left;
    color: var(--texte); background: #fff;
    border: 1px solid #d9ebb6; border-radius: var(--radius);
    padding: .5rem .75rem; cursor: pointer;
    transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.bloc-sondage-opt:hover:not(:disabled) {
    color: var(--vert-texte); background: #f4faeb; border-color: var(--vert);
}
.bloc-sondage-opt:focus-visible { outline: 2px solid var(--vert); outline-offset: 2px; }
.bloc-sondage-opt:disabled { opacity: .45; cursor: default; }

/* ── Le carrousel ──
   Toutes les étapes occupent la même cellule : la sortante glisse vers la
   gauche pendant que l'entrante arrive par la droite. Les inactives sortent du
   flux ET du parcours au clavier (visibility), sinon la tabulation traverserait
   des questions invisibles. */
.bloc-sondage-suite { display: grid; overflow: hidden; }
.bloc-sondage-etape {
    grid-area: 1 / 1;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .28s ease, transform .28s ease;
}
.bloc-sondage-etape.active { opacity: 1; visibility: visible; pointer-events: auto; }
/* Le décalage n'existe QUE pendant l'échange : au repos, une étape en attente
   décalée déborderait du cadre en permanence. */
.bloc-sondage-etape.entrante { opacity: 0; transform: translateX(24px); }
.bloc-sondage-etape.sortante { opacity: 0; visibility: visible; transform: translateX(-24px); }

/* ── Fin du parcours : on remercie, puis on rend la page ── */
.bloc-sondage-merci { font-size: .86rem; color: var(--vert-texte); font-weight: 700; margin: 0; }
.bloc-sondage--efface {
    opacity: 0; transform: translateY(-6px);
    max-height: 0; margin-top: 0; margin-bottom: 0;
    padding-top: 0; padding-bottom: 0;
    border-width: 0; overflow: hidden;
}

/* ── Réponse libre ── */
.bloc-sondage-libre { margin-top: .75rem; }
.bloc-sondage-libre > label {
    display: block; font-size: .78rem; color: var(--gris-texte); margin-bottom: .25rem;
}
.bloc-sondage-libre-ligne { display: flex; gap: .5rem; flex-wrap: wrap; }
/* Ciblé sur la LIGNE du champ libre, pas sur tous les inputs du formulaire :
   sans ça, `min-width: 160px` s'appliquait aussi à la case à cocher du rappel,
   qui passait de 15 à 160 px et écrasait la phrase voisine à la largeur de son
   mot le plus long — sept lignes d'un mot dans la colonne. */
.bloc-sondage-libre-ligne input {
    flex: 1; min-width: 160px;
    font: inherit; font-size: .85rem; padding: .5rem .75rem;
    border: 1px solid var(--sond-trait); border-radius: calc(var(--radius) - 1px);
    background: #fff; color: var(--texte);
}
.bloc-sondage-libre-ligne input:focus {
    outline: none; border-color: var(--vert);
    box-shadow: 0 0 0 3px rgba(131,183,53,.18);
}
.bloc-sondage-libre button {
    font: inherit; font-size: .82rem; font-weight: 700;
    padding: .5rem 1rem;
    background: var(--vert); color: #fff;
    border: none; border-radius: calc(var(--radius) - 1px);
    cursor: pointer; transition: background .15s;
}
.bloc-sondage-libre button:hover:not(:disabled) { background: var(--vert-c); }
.bloc-sondage-libre button:disabled { opacity: .5; cursor: default; }

.bloc-sondage-envoi { margin-top: .5rem; }
/* Le piège à robots : hors écran plutôt que display:none, que certains
   automates savent repérer. Invisible et hors du parcours au clavier. */
.bloc-sondage-piege { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ── Être rappelé — replié par défaut ──
   La plupart des gens répondent et partent ; ceux qui attendent une réponse
   déplient d'eux-mêmes. Cocher est un geste, et c'est ce geste qui vaut
   consentement à laisser des coordonnées. */
.bloc-sondage-libre > label.bloc-sondage-rappel-bascule {
    display: flex; align-items: flex-start; gap: .5rem;
    margin-top: .75rem; font-size: .82rem; line-height: 1.4;
    color: var(--texte); cursor: pointer;
}
.bloc-sondage-rappel-bascule > input {
    width: 15px; height: 15px; accent-color: var(--vert);
    flex-shrink: 0; margin: 0; margin-top: .12rem;
}
/* Sans cette paire, le texte se rétrécit jusqu'à sa largeur minimale — celle du
   mot le plus long — et se casse en sept lignes d'un mot dans la colonne de
   250 px. Il occupe maintenant la place qui reste et se replie normalement :
   une ligne en pleine largeur, deux ou trois en colonne. */
.bloc-sondage-rappel-bascule > span { flex: 1 1 auto; min-width: 0; }
.bloc-sondage-rappel { margin-top: .5rem; }
.bloc-sondage-champs { display: flex; flex-wrap: wrap; gap: .5rem; }
.bloc-sondage-champs input {
    flex: 1 1 9rem; min-width: 0;
    font: inherit; font-size: .84rem; padding: .5rem .5rem;
    border: 1px solid var(--sond-trait); border-radius: calc(var(--radius) - 1px);
    background: #fff; color: var(--texte);
}
.bloc-sondage-champs input:focus {
    outline: none; border-color: var(--vert);
    box-shadow: 0 0 0 3px rgba(131,183,53,.18);
}
.bloc-sondage-mention { font-size: .72rem; color: var(--gris-texte); line-height: 1.45; margin: .5rem 0 0; }

.bloc-sondage-err { font-size: .8rem; color: #b91c1c; margin: .5rem 0 0; }

/* Bandeau d'aperçu — visible seulement quand on est connecté à la gestion. */
.bloc-sondage-apercu {
    font-size: .72rem; line-height: 1.5;
    color: #92400e; margin: 0 0 .5rem;
    padding-bottom: .5rem; border-bottom: 1px dashed #e7d9b0;
}

/* ── Variante d'une seule question : tout sur une ligne ──
   Une question unique ne justifie pas une carte à étages. Question à gauche,
   propositions à droite, et l'étiquette « une question » disparaît : quand tout
   tient sur une ligne, elle ne dit rien que la ligne ne montre déjà. Les
   propositions gardent leur repère, elles perdent seulement leur filet — c'est
   la même écriture à une densité plus serrée, pas une seconde grammaire. */
.bloc-sondage--ligne { padding: .75rem 1rem .75rem; }
.bloc-sondage--ligne .bloc-sondage-etape.active { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1.25rem; }
.bloc-sondage--ligne .bloc-sondage-tete { display: none; }
.bloc-sondage--ligne .bloc-sondage-q { margin: 0; font-size: .88rem; }
.bloc-sondage--ligne .bloc-sondage-opts { gap: .25rem; margin-left: auto; }
.bloc-sondage--ligne .bloc-sondage-opt { padding: .25rem .75rem; }
@media (max-width: 720px) {
    /* Plus la place de tenir sur une ligne : les propositions repassent sous la
       question, alignées à gauche comme partout ailleurs. */
    .bloc-sondage--ligne .bloc-sondage-opts { margin-left: 0; }
}

/* ── Variante resserrée : dans la colonne de filtres, 250 px ──
   Le cadre est déjà celui de la base : il ne reste qu'à resserrer.

   La question sert de titre de carte, en vert comme chez les voisines, et
   l'étiquette « une question » disparaît — un titre n'a pas besoin qu'on
   annonce que c'en est un. Le compteur reste quand il y a une suite. */
.bloc-sondage--compact { margin-top: 1rem; padding: 1rem 1rem .75rem; }
.bloc-sondage--compact .bloc-sondage-tete { margin-bottom: .25rem; }
.bloc-sondage--compact .bloc-sondage-q { font-size: .86rem; line-height: 1.3; margin-bottom: .5rem; }

.bloc-sondage--compact .bloc-sondage-opts { gap: .25rem; }
.bloc-sondage--compact .bloc-sondage-opt { font-size: .8rem; padding: .5rem .75rem; }
.bloc-sondage--compact .bloc-sondage-merci { font-size: .81rem; }
.bloc-sondage--compact .bloc-sondage-libre-ligne { flex-direction: column; align-items: stretch; }
.bloc-sondage--compact .bloc-sondage-champs { flex-direction: column; }
.bloc-sondage--compact .bloc-sondage-champs input { flex: none; }

@media (prefers-reduced-motion: reduce) {
    .bloc-sondage, .bloc-sondage-opt, .bloc-sondage-libre button { transition: none; }
    /* Le glissement disparaît, l'enchaînement reste. */
    .bloc-sondage-etape { transition: none; transform: none; }
    .bloc-sondage-etape.entrante, .bloc-sondage-etape.sortante { transform: none; }
}


/* ── Page Mentions légales ───────────────────────────────────────────────── */
.mentions-hero {
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    padding: 2rem 0 1.75rem;
}
.mentions-hero h1 { font-size: 1.9rem; margin: .5rem 0 .5rem; }
.mentions-maj { font-size: .82rem; color: var(--gris-texte); margin: 0; }

.mentions-body {
    display: flex; gap: 3rem; align-items: flex-start;
    padding-top: 2.5rem; padding-bottom: 4rem;
}
.mentions-toc {
    flex-shrink: 0; width: 230px; position: sticky; top: 1.5rem;
    background: #f8f9fa; border: 1px solid #e4e8ee;
    border-radius: var(--radius); padding: 1.25rem 1rem;
    font-size: .83rem;
}
.mentions-toc strong { display: block; margin-bottom: .75rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gris-texte); }
.mentions-toc ol { list-style: decimal; padding-left: 1rem; margin: 0; }
.mentions-toc li { margin-bottom: .5rem; line-height: 1.35; }
.mentions-toc a { color: #556; text-decoration: none; transition: color .15s; }
.mentions-toc a:hover { color: var(--vert-texte); }

.mentions-content { flex: 1; min-width: 0; }
.mentions-section { padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 1px solid #eee; }
.mentions-section:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.mentions-section h2 { font-size: 1.15rem; color: #2d4d0e; margin: 0 0 1rem; padding-bottom: .5rem; border-bottom: 2px solid #e0eecc; }
.mentions-section h3 { font-size: .97rem; color: var(--texte); margin: 1rem 0 .5rem; font-weight: 600; }
.mentions-section p { color: #445; line-height: 1.7; margin: 0 0 .75rem; font-size: .92rem; }
.mentions-section ul { padding-left: 1.5rem; margin: .5rem 0 .75rem; }
.mentions-section li { color: #445; line-height: 1.65; margin-bottom: .5rem; font-size: .92rem; }
.mentions-section a { color: var(--vert-texte); }
.mentions-table { width: 100%; border-collapse: collapse; font-size: .9rem; margin-bottom: .5rem; }
.mentions-table th { text-align: left; font-weight: 600; color: #556; width: 220px; padding: .5rem .75rem .5rem 0; vertical-align: top; white-space: nowrap; }
.mentions-table td { padding: .5rem 0; color: #334; vertical-align: top; }
.mentions-table tr { border-bottom: 1px solid #f0f0f0; }
.mentions-table tr:last-child { border-bottom: none; }
@media (max-width: 860px) {
    .mentions-body { flex-direction: column; }
    .mentions-toc { width: 100%; position: static; }
    .mentions-table th { width: 140px; }
}

/* ── Page À propos ───────────────────────────────────────────────────────── */
.apropos-hero {
    background: linear-gradient(135deg, #f4faeb 0%, #e8f5d0 100%);
    padding: 2.5rem 0 2rem;
    border-bottom: 1px solid #d0e8a0;
}
.apropos-hero h1 { font-size: 2rem; margin: .5rem 0 .75rem; color: var(--texte); }
.apropos-intro { font-size: 1.05rem; color: #556; max-width: 680px; line-height: 1.65; margin: 0; }

.apropos-chiffres {
    display: flex; gap: 1.5rem; flex-wrap: wrap;
    padding: 2rem 0; justify-content: center;
    border-bottom: 1px solid #eee;
    margin-bottom: .5rem;
}
.apropos-chiffre {
    display: flex; flex-direction: column; align-items: center;
    flex: 1; min-width: 140px;
    background: #fff; border: 1px solid #e0eecc;
    border-radius: var(--radius); padding: 1.25rem 1rem;
    box-shadow: 0 2px 8px rgba(131,183,53,.1);
}
.apropos-nb { font-size: 2rem; font-weight: 700; color: var(--vert-texte); line-height: 1; }
.apropos-label { font-size: .82rem; color: #778; margin-top: .25rem; text-align: center; }

.apropos-section { padding: 2.5rem 0; }
.apropos-section--alt { background: #fafdf5; border-top: 1px solid #eef6e0; border-bottom: 1px solid #eef6e0; }
.apropos-section-inner { display: flex; gap: 1.75rem; align-items: flex-start; }
.apropos-icon {
    flex-shrink: 0; width: 56px; height: 56px;
    background: var(--vert); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; box-shadow: var(--shadow-glow);
    margin-top: .25rem;
}
.apropos-section-body { flex: 1; }
.apropos-section-body h2 { font-size: 1.3rem; color: #2d4d0e; margin: 0 0 1rem; }
.apropos-section-body p { color: #445; line-height: 1.7; margin: 0 0 1rem; }
.apropos-section-body p:last-of-type { margin-bottom: 0; }
.apropos-cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }
@media (max-width: 640px) {
    .apropos-section-inner { flex-direction: column; }
    .apropos-chiffres { gap: 1rem; }
    .apropos-cta { flex-direction: column; }
    .apropos-cta a { text-align: center; }
}

/* ── Pages assemblées par blocs : titres au même régime ───────────────────────
   Trois règles globales visent les sections de la page d'accueil et débordent sur
   toute page qui pose un <section> :
     section:nth-child(even)  → fond gris une section sur deux
     section h2               → titre centré
     section h2::after        → soulignement vert centré (décor optionnel, head.php)
   Sur une page construite par PageBlocs l'ordre des blocs est libre : le fond
   dépendrait de leur rang, et les titres se centraient alors que leurs
   soulignements sont calés à gauche (.service-section-titre::after) ou courent
   sur toute la largeur (.mentions-section h2). On aligne tout à gauche et on rend
   le fond indépendant de la position. Même remède que .cf-page pour les guides.
   Le padding vertical hérité de `section { padding: 3rem 0 }` est retiré des
   sections de document : sans la bande grise, il détachait le trait de séparation
   du titre suivant. Les sections « service » le gardent, leur rythme aéré étant
   voulu. */
.page-service section { background: none; }
.page-service section h2 { text-align: left; }
.page-service section h2::after { display: none; }
/* Deux exceptions : le trait vert propre aux titres de section, calé à gauche,
   et l'appel à l'action, qui est un encadré centré, titre compris. */
.page-service .service-section-titre::after { display: block; }
.page-service .service-cta-inner h2 { text-align: center; }
/* Document juridique : 2 rem sous le texte, le trait, 2 rem avant le titre suivant. */
.page-service .mentions-section { padding-top: 0; }

/* ── Bouton loupe header ── */
.header-search-btn {
    background: none; border: none; cursor: pointer; padding: .5rem;
    color: var(--texte); display: flex; align-items: center;
    border-radius: var(--radius); transition: background .15s;
}
.header-search-btn:hover { background: rgba(0,0,0,.06); }

/* ── Overlay recherche ── */
.search-overlay {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(0,0,0,.55);
    display: flex; align-items: flex-start; justify-content: center;
    padding-top: 10vh;
}
.search-overlay-inner {
    background: #fff;
    border-radius: var(--radius-lg);
    width: 100%; max-width: 620px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.search-form {
    display: flex; align-items: center; gap: .75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #f3f4f6;
}
.search-form input[type="search"] {
    flex: 1; border: none;
    font-size: 1.05rem; color: var(--texte);
    background: transparent;
}
.search-form input[type="search"]::placeholder { color: var(--gris-texte); }
.search-close {
    background: none; border: none; cursor: pointer;
    font-size: 1.1rem; color: var(--gris-texte); padding: .25rem .5rem; border-radius: var(--radius);
}
.search-close:hover { color: var(--texte); background: #f3f4f6; }
.search-results { max-height: 420px; overflow-y: auto; }
.search-list { list-style: none; margin: 0; padding: .5rem 0; }
.search-item {
    display: flex; align-items: center; gap: .75rem;
    padding: .75rem 1.25rem; color: var(--texte); text-decoration: none;
    transition: background .12s;
}
.search-item:hover { background: #f9fafb; }
.search-item-type {
    font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: #83B735; background: rgba(131,183,53,.1); border-radius: var(--radius);
    padding: 2px 6px; flex-shrink: 0;
}
.search-item-nom { font-size: .9rem; }
.search-more {
    display: block; text-align: center;
    padding: .75rem; font-size: .84rem; color: var(--vert-texte);
    text-decoration: none; border-top: 1px solid #f3f4f6;
}
.search-more:hover { background: #f9fafb; }
.search-loading, .search-none {
    padding: 1.5rem; text-align: center; color: var(--gris-texte); font-size: .88rem;
}
.search-item-img {
    width: 46px; height: 46px; object-fit: cover;
    border-radius: var(--radius); flex-shrink: 0; background: #f3f4f6;
}
.search-item-img--empty {
    display: inline-block; width: 46px; height: 46px;
    border-radius: var(--radius); background: #f3f4f6; flex-shrink: 0;
}
.search-item-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.search-more--global { color: #6b7280; }
.search-more--global:hover { color: #374151; }

/* ── Layout fiche produit avec sidebar filtres ── */
.fiche-avec-filtres { padding-top: 1rem; }
.fiche-outer-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 2rem;
    align-items: start;
}
.fiche-produit-main { min-width: 0; }
.fiche-outer-layout > .fiche-produit-main:only-child { grid-column: 1 / -1; }
.fiche-produit { padding: 1rem 0 2rem; }
.fiche-filtres-sidebar { top: 72px; }

/* Nom de l'univers au-dessus des filtres (fiche produit) */
.fiche-univers-titre {
    display: block;
    padding: .5rem 1rem .75rem;
    margin-bottom: .25rem;
    border-bottom: 2px solid var(--vert);
}
.fiche-univers-titre-label {
    display: block; font-size: .68rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--gris-texte);
}
.fiche-univers-titre-nom { display: block; font-weight: 700; font-size: 1rem; color: var(--texte); transition: color .2s; }
.fiche-univers-titre:hover .fiche-univers-titre-nom { color: var(--vert-texte); }
/* Filtre valeur en mode lien (pas checkbox) */
.filtre-val--link {
    display: flex; align-items: center; gap: .5rem;
    padding: .25rem .25rem; cursor: pointer;
    border-radius: var(--radius); text-decoration: none;
    color: var(--texte); font-size: .86rem;
    transition: background .12s, color .12s;
}
.filtre-val--link:hover { background: rgba(131,183,53,.08); color: var(--vert-texte); }
.filtre-val--link .filtre-val-label { flex: 1; }

@media (max-width: 900px) {
    .fiche-outer-layout { grid-template-columns: 1fr; }
    .fiche-filtres-sidebar {
        position: fixed; left: 0; top: 0; bottom: 0;
        width: 280px; z-index: 500; overflow-y: auto;
        transform: translateX(-100%); transition: transform .28s ease;
        box-shadow: none;
    }
    .fiche-filtres-sidebar.drawer-open {
        transform: translateX(0);
        box-shadow: 4px 0 20px rgba(0,0,0,.15);
    }
}

/* ── Bloc contact univers ── */
.univers-contact-bloc {
    background: linear-gradient(135deg, #f0f9e8 0%, #e8f5d4 100%);
    border: 1px solid #c5e08a;
    border-radius: var(--radius-lg);
    padding: 2rem;
    margin: 2rem 0;
}
.univers-contact-inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.univers-contact-titre {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 .25rem;
}
.univers-contact-texte {
    font-size: .9rem;
    color: #4b5563;
    margin: 0;
    flex: 1;
}
.univers-contact-inner > div {
    flex: 1;
    min-width: 200px;
}

/* ── Bloc intro services (image + texte) ── */
.services-intro-bloc {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
}
.services-intro-img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    flex-shrink: 0;
    border: 1px solid #e5e7eb;
}
.services-intro-texte {
    font-size: .92rem;
    line-height: 1.6;
    color: #374151;
}
@media (max-width: 600px) {
    .services-intro-bloc { flex-direction: column; }
    .services-intro-img { width: 100%; height: 160px; }
}

/* ══════════════════════════════════════════
   Template NEWS SHOWCASE
   ══════════════════════════════════════════ */

/* Hero pleine largeur.
   C'est l'image qui donne sa hauteur au bandeau, et non l'inverse : imposer
   420 px à un bloc large obligeait à agrandir la photo puis à la rogner — d'où
   l'effet de zoom, d'autant plus marqué que l'écran était large. La grille pose
   l'image et le texte dans la même cellule : la photo s'affiche entière, le
   texte reste posé en bas, et si le titre dépasse la hauteur de la photo
   (téléphone), c'est le bandeau qui s'allonge au lieu du texte qui déborde. */
.showcase-hero {
    position: relative;
    /* Centré dans la colonne de lecture, comme l'image d'une page de texte,
       au lieu de s'étaler d'un bord à l'autre de l'écran. 1152 px = la largeur
       utile de .container (1200 − 2 × 1.5rem), pour que le bandeau s'aligne
       sur le corps de l'article. */
    width: calc(100% - 3rem);
    max-width: 1152px;
    margin: 1.5rem auto 0;
    min-height: 240px;              /* garde-fou : article sans photo */
    background: #1a2a3a;
    overflow: hidden;
    border-radius: 12px;            /* même arrondi que les images de sections */
    display: grid;
}
.showcase-hero > * { grid-area: 1 / 1; }
.showcase-hero-bg {
    width: auto;                    /* jamais agrandie au-delà de sa taille réelle */
    max-width: 100%;
    height: auto;                   /* proportions d'origine : rien n'est rogné */
    display: block;
    margin: 0 auto;                 /* centrée si elle est plus étroite que le cadre */
    align-self: start;
    /* Réglages › Apparence › Bandeaux des actualités. Le repli est la valeur
       d'origine : sans injection, le rendu ne bouge pas. */
    filter: brightness(var(--news-showcase-voile, .55));
}
.showcase-hero-overlay {
    /* position:relative est indispensable, pas décoratif : le filtre brightness
       de l'image en fait un élément empilé, qui recouvrirait un frère resté
       statique. Positionné, le voile repasse au-dessus de la photo. */
    position: relative;
    align-self: end;
    width: 100%;
    padding: 2.5rem 0 2rem;
    background: linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,.1) 60%, transparent 100%);
}
.showcase-hero-content { max-width: 720px; }
.showcase-date {
    display: block;
    font-size: .8rem;
    color: rgba(255,255,255,.65);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .5rem;
}
.showcase-hero-content h1 {
    font-size: clamp(1.5rem, 3.5vw, 2.4rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.25;
    margin: 0 0 .5rem;
    text-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.showcase-hero-chapeau {
    font-size: 1rem;
    color: rgba(255,255,255,.85);
    line-height: 1.55;
    margin: .5rem 0 .75rem;
    max-width: 640px;
}
.showcase-meta {
    font-size: .85rem;
    color: rgba(255,255,255,.7);
    margin: 0;
}
/* Breadcrumb blanc sur hero */
.breadcrumb--light ol { padding: 0; margin: 0 0 1rem; }
.breadcrumb--light li,
.breadcrumb--light a { color: rgba(255,255,255,.7) !important; }
.breadcrumb--light li[aria-current] { color: rgba(255,255,255,.9) !important; }
.breadcrumb--light li + li::before { color: rgba(255,255,255,.4) !important; }

/* Chapeau en bandeau accentué */
.showcase-chapeau-wrap {
    background: #f0fdf4;
    border-top: 3px solid var(--vert);
    padding: 1.25rem 0;
}
.showcase-chapeau {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #1a3a2a;
    font-weight: 500;
    margin: 0;
    max-width: 820px;
}

/* Conteneur principal sections */
.showcase-container { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }

/* ── Blocs alternés image / texte ── */
.sc-bloc {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    padding: 3rem 0;
    border-bottom: 1px solid #f0f0f0;
}
.sc-bloc:last-of-type { border-bottom: none; }
.sc-bloc--text { grid-template-columns: 1fr; max-width: 820px; margin: 0 auto; }
.sc-bloc--reverse .sc-bloc-img { order: 2; }
.sc-bloc--reverse .sc-bloc-body { order: 1; }

.sc-bloc-img img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: block;
}
.sc-bloc-extra-imgs { margin-top: 1rem; display: flex; gap: .75rem; }
.sc-bloc-extra-imgs img { width: 100%; height: 120px; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }

.sc-bloc-titre {
    font-size: 1.35rem;
    font-weight: 700;
    color: #111;
    margin: 0 0 1rem;
    padding-bottom: .5rem;
    border-bottom: 3px solid var(--vert);
    display: inline-block;
}
.sc-bloc-texte { font-size: .97rem; line-height: 1.75; color: #333; }
.sc-bloc-texte p { margin: 0 0 1rem; text-align: left !important; }
.sc-bloc-texte p:empty { display: none; }
.sc-bloc-texte strong, .sc-bloc-texte b { color: #111; }
.sc-bloc-texte blockquote {
    border-left: 4px solid var(--vert);
    margin: 1.25rem 0;
    padding: .75rem 1rem;
    background: #f0fdf4;
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: #1a3a2a;
}
.sc-bloc-texte blockquote a { color: var(--vert-texte); }

@media (max-width: 800px) {
    .sc-bloc { grid-template-columns: 1fr; gap: 1.5rem; padding: 2rem 0; }
    .sc-bloc--reverse .sc-bloc-img { order: 0; }
    .sc-bloc--reverse .sc-bloc-body { order: 0; }
    .sc-bloc-img img { height: 220px; }
}

/* CTA bloc vendeur — même style que le bloc « Une question ? Un projet ? » des
   univers (.univers-contact-bloc) : fond vert clair, bordure, textes sombres,
   bouton principal et bouton secondaire du site. */
.showcase-cta-block {
    margin: 3rem 0;
    background: linear-gradient(135deg, #f0f9e8 0%, #e8f5d4 100%);
    border: 1px solid #c5e08a;
    border-radius: var(--radius-lg);
    padding: 2rem;
}
.showcase-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.showcase-cta-icone { color: var(--vert); flex-shrink: 0; }
.showcase-cta-text { flex: 1; min-width: 200px; }
.showcase-cta-titre {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 .25rem;
}
.showcase-cta-sub {
    font-size: .9rem;
    color: #4b5563;
    margin: 0;
}
.showcase-cta-actions {
    display: flex;
    gap: .5rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.showcase-cta-actions a { white-space: nowrap; }
/* Second bouton : l'apparence du bouton secondaire du site (.btn-secondary) */
.btn-devis-outline {
    display: inline-block;
    padding: .5rem 1.5rem;
    border: 2px solid var(--vert);
    border-radius: var(--radius);
    color: var(--vert-texte);
    font-weight: 600;
    text-decoration: none;
    transition: all .2s;
}
.btn-devis-outline:hover { background: var(--vert); color: #fff; }

@media (max-width: 700px) {
    .showcase-hero { min-height: 200px; width: calc(100% - 2rem); margin-top: 1rem; }
    .showcase-container { padding: 1.5rem 1rem 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEMPLATES NEWS — editorial · galerie · dossier · landing
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Utilitaire partagé ─────────────────────────────────────────────────── */
.news-article--editorial .content-html p,
.news-article--galerie   .content-html p,
.news-article--dossier   .content-html p,
.news-article--landing   .content-html p { margin: 0 0 1rem; text-align: left !important; }
.news-article--editorial .content-html p:empty,
.news-article--galerie   .content-html p:empty,
.news-article--dossier   .content-html p:empty,
.news-article--landing   .content-html p:empty { display: none; }
.news-article--editorial .content-html strong,
.news-article--galerie   .content-html strong,
.news-article--dossier   .content-html strong,
.news-article--landing   .content-html strong { color: #111; }
.news-article--editorial .content-html blockquote,
.news-article--galerie   .content-html blockquote,
.news-article--dossier   .content-html blockquote,
.news-article--landing   .content-html blockquote {
    border-left: 4px solid var(--vert);
    margin: 1.25rem 0;
    padding: .75rem 1rem;
    background: #f0fdf4;
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: #1a3a2a;
}

/* ═══════════════════════════════════════════════════════════════════════════
   1. ÉDITORIAL
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hero */
.news-article--editorial .ed-hero {
    position: relative;
    min-height: var(--news-editorial-hauteur, 480px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: #111;
}
.ed-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--news-editorial-cadrage, center);
    opacity: var(--news-editorial-voile, .55);
}
.ed-hero-overlay {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 3rem 0 2.5rem;
}
.ed-hero-content { max-width: 760px; }
.ed-hero-content h1 {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 800;
    color: #fff;
    margin: .5rem 0 .75rem;
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.ed-date {
    font-size: .85rem;
    color: rgba(255,255,255,.75);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.ed-meta {
    font-size: .9rem;
    color: rgba(255,255,255,.8);
    margin: 0;
}

/* Corps éditorial */
.ed-body {
    max-width: 720px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 3rem;
}
.ed-chapeau {
    font-size: 1.2rem;
    line-height: 1.75;
    color: #333;
    border-left: 4px solid var(--vert);
    padding-left: 1.25rem;
    margin-bottom: 2.5rem;
    font-style: italic;
}
.ed-section { margin-bottom: 2.75rem; }
.ed-section-titre {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111;
    border-left: 5px solid var(--vert);
    padding-left: 1rem;
    margin: 0 0 1rem;
    line-height: 1.3;
}
.ed-section-texte {
    font-size: 1rem;
    line-height: 1.85;
    color: #333;
}

/* Figures / images éditoriales */
.ed-section-images { margin-top: 1.5rem; }
.ed-figure {
    margin: 0 0 1.5rem;
}
.ed-figure img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    display: block;
}
.ed-figure figcaption {
    font-size: .82rem;
    color: var(--gris-texte);
    margin-top: .5rem;
    text-align: center;
    font-style: italic;
}

@media (max-width: 700px) {
    .news-article--editorial .ed-hero { min-height: 320px; }
    .ed-hero-content h1 { font-size: 1.5rem; }
    .ed-body { padding: 1.5rem 1rem 2rem; }
    .ed-section-titre { font-size: 1.25rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. GALERIE
   ═══════════════════════════════════════════════════════════════════════════ */

/* Header compact */
.gal-header {
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 1.5rem 0 1.25rem;
}
.gal-titre {
    font-size: clamp(1.5rem, 3.5vw, 2.4rem);
    font-weight: 800;
    color: #111;
    margin: .5rem 0 .5rem;
    line-height: 1.2;
}
.gal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    font-size: .87rem;
    color: var(--gris-texte);
}
.gal-meta time { color: #444; }
.gal-meta strong { color: #111; }

/* Image principale */
.gal-hero-img {
    max-height: var(--news-galerie-hauteur, 500px);
    overflow: hidden;
    background: #000;
}
.gal-hero-img img {
    width: 100%;
    height: var(--news-galerie-hauteur, 500px);
    object-fit: cover;
    object-position: var(--news-galerie-cadrage, center);
    display: block;
    opacity: var(--news-galerie-voile, .92);
}

/* Corps galerie */
.gal-body { padding: 2rem 1.5rem 3rem; }
.gal-chapeau {
    font-size: 1.2rem;
    line-height: 1.75;
    color: #333;
    margin-bottom: 2rem;
    font-style: italic;
    border-left: 4px solid var(--vert);
    padding-left: 1.25rem;
}
.gal-section { margin-bottom: 2.5rem; }
.gal-section-titre {
    font-size: 1.35rem;
    font-weight: 700;
    color: #111;
    margin: 0 0 1rem;
    padding-bottom: .5rem;
    border-bottom: 3px solid var(--vert);
    display: inline-block;
}
.gal-section-texte {
    font-size: .97rem;
    line-height: 1.8;
    color: #333;
    margin-bottom: 1.25rem;
}

/* Grille images (2 colonnes, masonry-like avec auto-rows) */
.gal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
    margin-top: 1rem;
}
.gal-grid--global { margin-top: 0; }
.gal-grid-item img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    display: block;
    transition: transform .2s;
    box-shadow: var(--shadow-sm);
}
.gal-grid-item img:hover { transform: scale(1.02); }

/* Toutes les 3e images occupent toute la largeur */
.gal-grid-item:nth-child(3n) {
    grid-column: span 2;
}
.gal-grid-item:nth-child(3n) img { height: 300px; }

@media (max-width: 600px) {
    .gal-grid { grid-template-columns: 1fr; }
    .gal-grid-item:nth-child(3n) { grid-column: span 1; }
    .gal-grid-item img,
    .gal-grid-item:nth-child(3n) img { height: 200px; }
    .gal-hero-img img { height: 250px; }
    .gal-body { padding: 1.5rem 1rem 2rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. DOSSIER TECHNIQUE
   ═══════════════════════════════════════════════════════════════════════════ */

/* Barre de progression */
.dos-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--vert);
    z-index: 9999;
    transition: width .1s linear;
    border-radius: 0 2px 2px 0;
}

/* Hero sobre fond sombre */
.dos-hero {
    position: relative;
    min-height: var(--news-dossier-hauteur, 400px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: #0d1f14;
}
.dos-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--news-dossier-cadrage, center);
    opacity: var(--news-dossier-voile, .3);
    filter: grayscale(var(--news-dossier-gris, .4));
}
.dos-hero-overlay {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 3rem 0 2.5rem;
}
.dos-hero-titre {
    font-size: clamp(1.7rem, 3.5vw, 2.6rem);
    font-weight: 800;
    color: #fff;
    margin: .5rem 0 1rem;
    line-height: 1.2;
}
.dos-hero-chapeau {
    font-size: 1.05rem;
    color: rgba(255,255,255,.8);
    max-width: 680px;
    margin-bottom: 1rem;
    line-height: 1.65;
}
.dos-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    font-size: .85rem;
    color: rgba(255,255,255,.65);
}
.dos-hero-meta strong { color: rgba(255,255,255,.9); }

/* Layout 2 colonnes */
.dos-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 3rem;
    align-items: start;
    padding-top: 2.5rem;
    padding-bottom: 3rem;
}

/* Sidebar sommaire sticky */
.dos-sidebar {
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}
.dos-toc {
    background: #f8fafb;
    border: 1px solid #e5ece8;
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.25rem 1rem;
}
.dos-toc-titre {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #555;
    margin: 0 0 1rem;
}
.dos-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: toc-counter;
}
.dos-toc-list li {
    counter-increment: toc-counter;
    margin-bottom: .1rem;
}
.dos-toc-link {
    display: block;
    padding: .5rem .5rem .5rem 0;
    font-size: .88rem;
    color: #444;
    text-decoration: none;
    border-left: 3px solid transparent;
    padding-left: .75rem;
    transition: border-color .15s, color .15s, background .15s;
    border-radius: 0 4px 4px 0;
    line-height: 1.35;
}
.dos-toc-link:hover,
.dos-toc-link--active {
    border-left-color: var(--vert);
    color: var(--vert-texte);
    background: rgba(0,120,60,.05);
}

/* Sections contenu dossier */
.dos-section {
    margin-bottom: 3rem;
    scroll-margin-top: 90px;
}
.dos-section-titre {
    font-size: 1.45rem;
    font-weight: 700;
    color: #111;
    margin: 0 0 1rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--vert);
}
.dos-section-texte {
    font-size: .98rem;
    line-height: 1.85;
    color: #2c2c2c;
}
.dos-section-imgs {
    margin-top: 1.25rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: .75rem;
}
.dos-section-imgs img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    display: block;
}

@media (max-width: 900px) {
    .dos-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .dos-sidebar {
        position: static;
        max-height: none;
        margin-bottom: 2rem;
    }
    .dos-hero { min-height: 300px; }
    .dos-hero-titre { font-size: 1.5rem; }
}
@media (max-width: 600px) {
    .dos-section-imgs { grid-template-columns: 1fr; }
    .dos-layout { padding: 1.5rem 1rem 2rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. LANDING COMMERCIAL
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hero fort */
.land-hero {
    position: relative;
    min-height: var(--news-landing-hauteur, 560px);
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #071510;
}
.land-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--news-landing-cadrage, center);
    opacity: var(--news-landing-voile, .45);
}
.land-hero-overlay {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 4rem 0 3.5rem;
}
.land-hero-content { max-width: 740px; }
.land-hero-content h1 {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 900;
    color: #fff;
    margin: .5rem 0 1rem;
    line-height: 1.15;
    text-shadow: 0 3px 12px rgba(0,0,0,.5);
}
.land-date {
    font-size: .82rem;
    color: rgba(255,255,255,.7);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 500;
}
.land-hero-chapeau {
    font-size: 1.15rem;
    color: rgba(255,255,255,.88);
    line-height: 1.65;
    margin-bottom: 2rem;
    max-width: 620px;
}
.land-hero-chapeau p { margin: 0; }
.land-hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.land-btn-hero {
    display: inline-block;
    padding: .75rem 2rem;
    background: var(--vert);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: background .15s, transform .15s;
    box-shadow: var(--shadow-lg);
}
.land-btn-hero:hover { background: #1a7a35; transform: translateY(-1px); }
.land-btn-hero--outline {
    background: transparent;
    border: 2px solid rgba(255,255,255,.7);
}
.land-btn-hero--outline:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* Grille points forts */
.land-features {
    background: #f8fafb;
    padding: 3rem 0;
    border-bottom: 1px solid #e8ece9;
}
.land-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}
.land-feature-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.5rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid #eef1ee;
    transition: box-shadow .2s, transform .2s;
}
.land-feature-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.land-feature-icon {
    color: var(--vert);
    margin-bottom: 1rem;
}
.land-feature-titre {
    font-size: 1.05rem;
    font-weight: 700;
    color: #111;
    margin: 0 0 .5rem;
    line-height: 1.3;
}
.land-feature-extrait {
    font-size: .87rem;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

/* Corps landing */
.land-body { padding: 2.5rem 1.5rem 2rem; max-width: 860px; margin: 0 auto; }
.land-section { margin-bottom: 2.5rem; }
.land-section-titre {
    font-size: 1.4rem;
    font-weight: 700;
    color: #111;
    margin: 0 0 1rem;
    padding-left: .75rem;
    border-left: 5px solid var(--vert);
    line-height: 1.3;
}
.land-section-texte {
    font-size: .98rem;
    line-height: 1.85;
    color: #2c2c2c;
}
.land-section-imgs {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.25rem;
}
.land-section-imgs img {
    flex: 1 1 280px;
    height: 220px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* CTA fort fond sombre */
.land-cta-strong {
    background: linear-gradient(135deg, #071510 0%, #1a4a28 100%);
    padding: 4rem 0;
    text-align: center;
    color: #fff;
}
.land-cta-titre {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 800;
    margin: 0 0 .75rem;
}
.land-cta-sub {
    font-size: 1.05rem;
    color: rgba(255,255,255,.8);
    margin: 0 auto 2rem;
    max-width: 520px;
    line-height: 1.6;
}
.land-cta-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}
.land-btn-cta {
    display: inline-block;
    padding: 1rem 2.25rem;
    background: var(--vert);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: background .15s, transform .15s;
    box-shadow: var(--shadow-lg);
}
.land-btn-cta:hover { background: #1a7a35; transform: translateY(-1px); }
.land-btn-cta--outline {
    background: transparent;
    border: 2px solid rgba(255,255,255,.6);
}
.land-btn-cta--outline:hover { background: rgba(255,255,255,.1); border-color: #fff; }

@media (max-width: 700px) {
    .land-hero { min-height: 400px; }
    .land-hero-content h1 { font-size: 1.7rem; }
    .land-hero-chapeau { font-size: 1rem; }
    .land-hero-actions { flex-direction: column; gap: .75rem; }
    .land-btn-hero { text-align: center; }
    .land-features-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
    .land-body { padding: 1.5rem 1rem 1.5rem; }
    .land-cta-strong { padding: 2.5rem 1rem; }
    .land-cta-actions { flex-direction: column; align-items: center; }
    .land-section-imgs img { flex: 1 1 100%; height: 180px; }
}
@media (max-width: 480px) {
    .land-features-grid { grid-template-columns: 1fr; }
}

/* ── Widget contact flottant ─────────────────────────────────────────────── */
.cw-wrap {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .75rem;
}
.cw-panel {
    background: #fff;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: 1.25rem 1rem 1rem;
    width: 280px;
    animation: cwSlideUp .2s ease;
}
@keyframes cwSlideUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.cw-close {
    position: absolute;
    top: .75rem;
    right: .75rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gris-texte);
    padding: 2px;
    line-height: 1;
}
.cw-close:hover { color: #333; }
.cw-title {
    font-size: .8rem;
    font-weight: 600;
    color: var(--gris-texte);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 .75rem;
}
.cw-option {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    margin-bottom: .5rem;
    transition: transform .15s, box-shadow .15s;
}
.cw-option:last-child { margin-bottom: 0; }
.cw-option:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
/* Toutes les options au vert de la marque, WhatsApp compris : le site n'a qu'un vert (CLAUDE.md). */
.cw-option--wa, .cw-option--dv { background: #f0f6e8; }
/* Option téléphone : un bouton (révèle le numéro) puis un lien tel: */
button.cw-option { width: 100%; border: 0; font: inherit; text-align: left; cursor: pointer; }
.cw-option[hidden] { display: none; }
.cw-option-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cw-option--wa .cw-option-icon, .cw-option--dv .cw-option-icon { background: var(--vert); color: #fff; }
.cw-option-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.cw-option-text strong { font-size: .9rem; color: #1a1a1a; }
.cw-option-text small  { font-size: .78rem; color: var(--gris-texte); }
.cw-arrow { color: var(--gris-texte); flex-shrink: 0; }
.cw-btn {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--vert);
    color: #fff;
    border: none;
    border-radius: var(--radius-pilule);
    padding: .75rem 1.25rem .75rem 1rem;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    transition: background .15s, transform .15s, box-shadow .15s;
    font-family: var(--police);
}
.cw-btn:hover { background: var(--vert-c); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.cw-btn-icon { display: flex; align-items: center; }
@media (max-width: 480px) {
    .cw-wrap  { bottom: 1rem; right: 1rem; }
    .cw-panel { width: calc(100vw - 2rem); }
    .cw-btn-label { display: none; }
    .cw-btn { padding: .75rem; border-radius: 50%; }
}

/* ── Template Service ────────────────────────────────────────────────────── */
.srv-hero { background: linear-gradient(135deg, var(--vert) 0%, var(--vert-c) 100%); color: #fff; padding: 4rem 0 3rem; }
.srv-hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.srv-categorie { display: inline-block; background: rgba(255,255,255,.2); border-radius: var(--radius-pilule); padding: .25rem .75rem; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 1rem; }
.srv-titre { font-size: 2.2rem; font-weight: 700; line-height: 1.2; margin: 0 0 1rem; color: #fff; }
.srv-intro { font-size: 1.05rem; opacity: .92; margin-bottom: 1.75rem; line-height: 1.6; }
.srv-intro p { margin: 0; }
.srv-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.srv-btn-pdf { background: #fff !important; color: var(--vert-texte) !important; }
.srv-btn-pdf:hover { background: #f0f0f0 !important; }
.srv-hero-image img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }

.srv-description { padding: 3rem 0; }
.srv-description-inner { max-width: 820px; margin: 0 auto; font-size: 1rem; line-height: 1.75; }
.srv-description-inner h2 { font-size: 1.4rem; margin: 2rem 0 .75rem; }

.srv-pdf-bloc { background: #f7faf0; border-top: 1px solid #e5efd5; border-bottom: 1px solid #e5efd5; padding: 2rem 0; }
.srv-pdf-inner { display: flex; align-items: center; gap: 1.5rem; background: #fff; border-radius: var(--radius-lg); padding: 1.5rem 2rem; box-shadow: var(--shadow-sm); }
.srv-pdf-icon { color: var(--vert); flex-shrink: 0; }
.srv-pdf-text { flex: 1; }
.srv-pdf-text strong { display: block; font-size: 1rem; margin-bottom: .25rem; }
.srv-pdf-text p { margin: 0; color: var(--gris-texte); font-size: .9rem; }

.srv-contact-bloc { background: #1a2332; color: #fff; padding: 4rem 0; text-align: center; }
.srv-contact-inner h2 { font-size: 1.8rem; margin: 0 0 .75rem; color: #fff; }
.srv-contact-inner p { opacity: .8; margin-bottom: 2rem; }
.srv-contact-actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }

@media (max-width: 768px) {
    .srv-hero-inner { grid-template-columns: 1fr; gap: 2rem; }
    .srv-hero-image { order: -1; }
    .srv-titre { font-size: 1.6rem; }
    .srv-pdf-inner { flex-direction: column; text-align: center; }
    .srv-contact-actions { flex-direction: column; align-items: center; }
}

/* ── Info hint (demande-info service) ───────────────────────────────────── */
.info-hint { display:flex; align-items:flex-start; gap:.5rem; background:#f0f6e8; border:1px solid #d4e8b0; border-radius:var(--radius-lg); padding:.75rem 1rem; font-size:.9rem; color:#3a5a1a; line-height:1.5; }
.info-hint svg { flex-shrink:0; margin-top:1px; color:var(--vert); }
.info-hint a { color:var(--vert-texte); font-weight:600; }

/* ── Slider captcha (glisser la pièce jusqu'à l'emplacement) ────────────── */
.slider-captcha { margin: 1rem 0; max-width: 260px; }
.slider-captcha-label { font-size: .82rem; color: #6b7280; margin: 0 0 .5rem; }
.slider-captcha-canvas { position: relative; max-width: 100%; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.slider-captcha-bg { display: block; width: 100%; height: 100%; }
.slider-captcha-piece { position: absolute; transition: left .05s linear; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.slider-captcha-range { width: 100%; margin-top: .5rem; accent-color: var(--vert); cursor: pointer; }

/* ── Guides questions-réponses par équipement (/faq/{domaine}) ── */
.cf-page { max-width: 1080px; padding: 2rem 1.5rem 4rem; }
.cf-page--theme { max-width: 820px; }
.cf-crumbs { font-size: .85rem; color: var(--gris-texte); margin-bottom: 1.25rem; }
.cf-crumbs a { color: inherit; text-decoration: none; }
.cf-crumbs a:hover { color: var(--vert-texte); }
.cf-crumbs span[aria-hidden] { margin: 0 .25rem; }
.cf-head { max-width: 720px; margin-bottom: 2rem; }
.cf-kicker { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vert-texte); margin: 0 0 .5rem; }
.cf-head h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.2; margin: 0 0 .75rem; }
.cf-lead { font-size: 1.02rem; color: #4b5563; line-height: 1.6; margin: 0; }
.cf-empty { color: #6b7280; font-style: italic; }
.cf-empty a { color: var(--vert-texte); }

.cf-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 3rem; align-items: start; }
.cf-rail { position: sticky; top: 88px; font-size: .88rem; max-height: calc(100vh - 100px); overflow-y: auto; }
.cf-rail-title { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-texte); margin: 0 0 .75rem; }
.cf-rail-group { font-weight: 700; color: #111827; margin: 1rem 0 .25rem; font-size: .85rem; }
.cf-rail ul { list-style: none; margin: 0; padding: 0 0 0 .25rem; border-left: 2px solid #e5e7eb; }
.cf-rail li a { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; padding: .25rem .5rem; color: #4b5563; text-decoration: none; border-radius: 4px; }
.cf-rail li a:hover { color: var(--vert-texte); background: #f4faeb; }
.cf-n { font-size: .74rem; color: var(--gris-texte); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cf-main { min-width: 0; }
.cf-group { margin-bottom: 2.5rem; }
.cf-group-title { display: flex; align-items: center; gap: .75rem; font-size: 1.35rem; margin: 0 0 1.25rem; padding-bottom: .75rem; border-bottom: 2px solid var(--vert); }
.cf-step { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--vert); color: #fff; font-size: .95rem; font-weight: 700; flex-shrink: 0; }
.cf-theme { margin-bottom: 1.75rem; scroll-margin-top: 88px; }
.cf-theme-title { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: 1.05rem; margin: 0 0 .5rem; }
.cf-theme-title a { color: #111827; text-decoration: none; }
.cf-theme-title a:hover { color: var(--vert-texte); }
.cf-list { display: flex; flex-direction: column; gap: .5rem; }
.cf-item { border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; overflow: hidden; transition: box-shadow .2s, border-color .2s; }
.cf-item[open] { box-shadow: 0 2px 12px rgba(0,0,0,.06); border-color: #d0e8a0; }
.cf-q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1rem; font-weight: 600; font-size: .96rem; color: #111827; cursor: pointer; list-style: none; user-select: none; }
.cf-q::-webkit-details-marker { display: none; }
.cf-q:hover { background: #fafcf6; }
.cf-item[open] .cf-q { color: var(--vert-texte); }
.cf-chevron { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: #f3f4f6; display: inline-flex; align-items: center; justify-content: center; font-size: .65rem; transition: transform .2s, background .2s; }
.cf-chevron::after { content: '▼'; }
.cf-item[open] .cf-chevron { transform: rotate(180deg); background: #e6f2cf; }
.cf-a { padding: 0 1rem 1rem; font-size: .93rem; color: #374151; line-height: 1.7; }
.cf-a p { margin: 0 0 .75rem; }
.cf-a ul, .cf-a ol { padding-left: 1.25rem; margin: .5rem 0; }
.cf-a li { margin-bottom: .25rem; }
.cf-cadre { margin: 1rem 0 0; padding-top: .75rem; border-top: 1px dashed #e5e7eb; font-size: .8rem; color: #6b7280; display: flex; flex-direction: column; gap: .25rem; }
.cf-cadre > div { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: .5rem; align-items: baseline; }
.cf-cadre dt { font-weight: 700; color: var(--gris-texte); text-transform: uppercase; letter-spacing: .06em; font-size: .68rem; }
.cf-cadre dd { margin: 0; }
.cf-cadre .cf-note dd { font-style: italic; color: var(--gris-texte); }
.cf-ref { color: var(--gris-texte); }
.cf-portee { display: inline-block; padding: .18rem .5rem; border-radius: 999px; font-size: .74rem; font-weight: 600; background: #f3f4f6; color: #374151; cursor: help; }
.cf-portee--obligation_reglementaire { background: #fdecec; color: #9f1d1d; }
.cf-portee--norme_volontaire { background: #e8f0fb; color: #1e4d8c; }
.cf-portee--recommandation { background: #eaf5d9; color: #3f6a0a; }
.cf-cta { margin-top: 2.5rem; padding: 1.5rem 1.5rem; background: linear-gradient(135deg, #f4faeb 0%, #edf6dc 100%); border: 1px solid #d0e8a0; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.cf-cta strong { display: block; font-size: 1.05rem; color: #111827; margin-bottom: .25rem; }
.cf-cta p { margin: 0; font-size: .9rem; color: #4b5563; max-width: 46ch; }
.cf-cta-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.cf-cta-link { color: var(--vert-texte); font-weight: 600; text-decoration: none; font-size: .9rem; }
.cf-cta-link:hover { text-decoration: underline; }
.cf-pager { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid #e5e7eb; font-size: .9rem; }
.cf-pager a { color: #111827; text-decoration: none; font-weight: 600; }
.cf-pager a span { display: block; font-size: .72rem; font-weight: 400; color: var(--gris-texte); text-transform: uppercase; letter-spacing: .06em; }
.cf-pager a:hover { color: var(--vert-texte); }
.cf-pager-next { text-align: right; }
.cf-pager-all { color: var(--vert-texte) !important; font-weight: 500 !important; font-size: .85rem; }
@media (max-width: 900px) {
    .cf-layout { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    .cf-rail { position: static; padding: 1rem 1rem; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; }
    .cf-rail-group:first-of-type { margin-top: .25rem; }
    .cf-cadre > div { grid-template-columns: 1fr; gap: .1rem; }
    .cf-pager { grid-template-columns: 1fr; text-align: left; }
    .cf-pager-next { text-align: left; }
}

/* Bloc « Questions sur … ? » (barre latérale, au-dessus du bloc rendez-vous) */
.bloc-faq-sidebar { margin-top: 1.5rem; padding: 1rem 1rem; background: #fff; border: 1px solid #d0e8a0; border-radius: var(--radius); }
.bloc-faq-s-btn { display: block; text-align: center; background: #fff; color: var(--vert-texte); border: 1.5px solid var(--vert); padding: .5rem .75rem; border-radius: calc(var(--radius) - 2px); font-size: .83rem; font-weight: 700; text-decoration: none; transition: background .2s, color .2s; }
.bloc-faq-s-btn:hover { background: var(--vert); color: #fff; }
.bloc-faq-sidebar + .bloc-rdv-sidebar { margin-top: .75rem; }
/* Les guides n'héritent pas de la mise en page « bandes » des sections de l'accueil */
.cf-page section { padding: 0; background: transparent; }
.cf-page section h2 { text-align: left; margin-bottom: 1.25rem; }
.cf-page section h2::after, .cf-page .cf-group-title::after { display: none; }
/* Avertissement des guides (information générale, pas un conseil juridique) */
.cf-avert-court { font-size: .8rem; color: var(--gris-texte); margin: .75rem 0 0; }
.cf-avert-court a { color: inherit; text-decoration: underline; }
.cf-avert-court a:hover { color: var(--vert-texte); }
.cf-avert { margin-top: 2rem; padding: 1rem 1.25rem; border-left: 3px solid #d1d5db; background: #f9fafb; border-radius: 0 8px 8px 0; font-size: .85rem; color: #4b5563; line-height: 1.6; scroll-margin-top: 96px; }
.cf-avert strong { display: block; color: #111827; margin-bottom: .25rem; font-size: .88rem; }
.cf-avert p { margin: 0 0 .5rem; } .cf-avert p:last-child { margin-bottom: 0; }

/* ── Fiche produit : sections apparentées, plus sobres ── */
.connexes-section { background: #fff; padding: 2.5rem 0 2.75rem; margin-top: 0; border-top: 1px solid #e3e7df; }
.connexes-section:first-of-type { margin-top: 2.5rem; }
.connexes-section:nth-of-type(even) { background: #f7f9f3; }
.connexes-header { margin-bottom: 1.25rem; }
.connexes-titre { font-size: 1.1rem; font-weight: 700; color: #1c1f1a; letter-spacing: -.005em; }
.connexes-titre span { color: var(--vert-texte); }
.connexes-section .carousel-btn { width: 34px; height: 34px; border: 1px solid #d4dac9; background: #fff; color: #3f5522; }
.connexes-section .carousel-btn:hover { background: var(--vert); border-color: var(--vert); color: #fff; }
.connexes-section .produit-card-front .card-nom,
.connexes-section .produit-card-front h2 { font-size: .92rem; font-weight: 600; }
.connexes-section .carousel-dots { margin-top: 1rem; }
@media (max-width: 768px) {
    .fiche-galerie { top: auto; }
    .galerie-principale { aspect-ratio: 4 / 3; min-height: 240px; padding: 1rem; }
    .thumb-btn img { width: 56px; height: 56px; }
    /* Vignettes en rangées sous l'image (2026-09-29), au lieu d'une bande à faire
       glisser où 5 photos sur 9 restaient cachées sans rien qui l'indique. Plafond à
       2 rangées pour ne pas repousser le nom et « Demander un devis » : 4 par rangée
       sur téléphone, 6 au-delà de 480 px. S'il reste des photos, la dernière vignette
       visible porte « +N » et ouvre l'agrandissement, qui les parcourt toutes. */
    .galerie-thumbs-vert { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; overflow: visible; padding-bottom: 0; }
    .galerie-thumbs-vert .thumb-btn { position: relative; }
    .galerie-thumbs-vert .thumb-btn img { width: 100%; height: auto; aspect-ratio: 1; }
    .galerie-thumbs-vert .thumb-btn:nth-child(n+9) { display: none; }
    .galerie-thumbs-vert .thumb-btn[data-plus-8]::after,
    .galerie-thumbs-vert .thumb-btn[data-plus-12]::after {
        position: absolute; inset: 3px; border-radius: 3px;
        display: flex; align-items: center; justify-content: center;
        background: rgba(28, 31, 26, .6); color: #fff; font-size: 1.05rem; font-weight: 700;
    }
    .galerie-thumbs-vert .thumb-btn[data-plus-8]::after { content: attr(data-plus-8); }
}
@media (min-width: 481px) and (max-width: 768px) {
    .galerie-thumbs-vert { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .galerie-thumbs-vert .thumb-btn:nth-child(n+9) { display: block; }
    .galerie-thumbs-vert .thumb-btn:nth-child(n+13) { display: none; }
    .galerie-thumbs-vert .thumb-btn[data-plus-8]::after { content: none; }
    .galerie-thumbs-vert .thumb-btn[data-plus-12]::after { content: attr(data-plus-12); }
    .fiche-specs { grid-template-columns: 1fr; }
    .spec-item:nth-last-child(-n+2) { border-bottom: 1px solid #e8ece2; }
    .spec-item:last-child { border-bottom: none; }
    .fiche-achat { padding: 1rem 1rem; }
    .caract-label { min-width: auto; }
    .caract-row { flex-direction: column; gap: .25rem; }
    .connexes-section { padding: 2rem 0; }
}


/* ── Accessibilité : focus clavier ───────────────────────────────────────── */
/* Aucun état de focus n'était défini sur le site public. `:focus-visible` ne se
   déclenche qu'à la navigation clavier : la souris ne voit rien changer. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--vert);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Sur fond vert ou sombre, le liseré vert se perd — on le passe en blanc. */
.hero-slide-content a:focus-visible,
.hero-arrow:focus-visible,
.hero-dot:focus-visible,
.site-footer a:focus-visible,
.lightbox button:focus-visible,
.btn-primary:focus-visible,
.btn-devis:focus-visible,
.btn-voir:focus-visible,
.btn-info-card:focus-visible {
    outline-color: #fff;
    box-shadow: 0 0 0 4px rgba(0,0,0,.35);
}

/* Le champ de recherche n'a pas de bordure : un liseré autour du champ seul
   serait illisible, on cadre le formulaire entier. */
.search-form:focus-within { box-shadow: inset 0 0 0 2px var(--vert); }

/* ── Cibles tactiles : contrôles de quantité ─────────────────────────────── */
/* `pointer: coarse` vise le doigt quelle que soit la largeur d'écran, et laisse
   la densité actuelle intacte à la souris. Les boutons − / + du panier faisaient
   30 px et la croix de suppression 28 px, pour un minimum recommandé de 44. */
@media (pointer: coarse) {
    .qte-btn      { width: 44px; height: 44px; }
    .qte-input    { height: 44px; }
    .col-qte      { width: auto; }   /* 130px ne contient plus les boutons élargis */
    .btn-supprimer { min-width: 44px; min-height: 44px; }
    /* Même composant sur la fiche produit — le scinder entre deux passes
       laisserait deux tailles pour un seul contrôle. */
    .fiche-qte-btn   { width: 44px; height: 44px; }
    .fiche-qte-input { height: 44px; }
}

/* ── Champs en erreur ────────────────────────────────────────────────────── */
/* Reprend le principe déjà en place sur les options de la fiche produit
   (.fiche-option-groupe.has-error). */
.form-group.has-error input,
.form-group.has-error textarea { border-color: #dc2626; }

/* ── Accessibilité : mouvement réduit ────────────────────────────────────── */
/* Le slider d'accueil respectait déjà le réglage côté JS (home.php) ; le CSS
   l'ignorait — retournement 3D des cartes, panneaux d'onglets, modale. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Styles de pages — remontés depuis des blocs <style> inline dans les
   gabarits (finition-ui). Aucune valeur changée, juste centralisé pour rester
   visible d'ici et suivre les futurs changements de tokens globaux.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page : recherche.php ─────────────────────────────────────────────── */
.search-page-corrige { color: #6b7280; margin-bottom: .5rem; }
/* Champ de recherche : mêmes bordure, arrondi et halo que les champs .form-group */
.search-page-form { display: flex; gap: .75rem; max-width: 560px; margin-bottom: 2rem; }
.search-page-form input { flex: 1; min-width: 0; padding: .5rem .75rem; border: 1px solid #ddd; border-radius: var(--radius); font: inherit; font-size: 1rem; transition: border-color .15s, box-shadow .15s; }
.search-page-form input:focus { border-color: var(--vert); box-shadow: var(--shadow-focus); }
.search-vide { color: #6b7280; }
.search-vide p { margin-bottom: 1rem; }

/* ── Partial : partials/bloc_produits_lies.php ───────────────────────── */
.bloc-produits-lies { padding: 2rem 0; }
.bloc-produits-lies-titre { font-size: 1.15rem; font-weight: 700; color: var(--texte); margin-bottom: 1.25rem; }

/* ── Page : faq.php ───────────────────────────────────────────────────── */
.faq-list { display:flex; flex-direction:column; gap:.5rem; }
.faq-item {
    border:1px solid #e5e7eb;
    border-radius:var(--radius-lg);
    background:#fff;
    overflow:hidden;
    transition:box-shadow .2s;
}
.faq-item[open] {
    box-shadow:var(--shadow-sm);
    border-color:#d1fae5;
}
.faq-question {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:1rem 1.25rem;
    font-weight:600;
    font-size:.97rem;
    color:#111827;
    cursor:pointer;
    list-style:none;
    user-select:none;
}
.faq-question::-webkit-details-marker { display:none; }
.faq-chevron {
    flex-shrink:0;
    width:20px; height:20px;
    border-radius:50%;
    background:#f3f4f6;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:.7rem;
    transition:transform .2s, background .2s;
}
.faq-chevron::after { content:'▼'; }
.faq-item[open] .faq-chevron {
    transform:rotate(180deg);
    background:#d1fae5;
}
.faq-item[open] .faq-question { color:var(--vert, #2d7a3a); }
.faq-reponse {
    padding:0 1.25rem 1.25rem;
    font-size:.92rem;
    color:#374151;
    line-height:1.7;
}
.faq-reponse p { margin:0 0 .75rem; }
.faq-reponse p:last-child { margin-bottom:0; }
.faq-reponse ul, .faq-reponse ol { padding-left:1.25rem; margin:.5rem 0; }
.faq-reponse li { margin-bottom:.25rem; }
.faq-reponse a { color:var(--vert, #2d7a3a); }

/* ── Page : prise_de_rendez_vous.php ─────────────────────────────────── */
.rdv-hero {
    background: linear-gradient(135deg, #2d4a1e 0%, #3e6b2b 60%, #83B735 100%);
    color: #fff;
    padding: 3rem 0 2.5rem;
    text-align: center;
}
.rdv-hero h1 {
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    margin: 0 0 .5rem;
    font-weight: 700;
}
.rdv-hero p {
    font-size: 1.05rem;
    opacity: .88;
    margin: 0;
}
.rdv-breadcrumb {
    display: flex;
    gap: .5rem;
    align-items: center;
    justify-content: center;
    font-size: .82rem;
    opacity: .75;
    margin-bottom: 1.25rem;
}
.rdv-breadcrumb a  { color: #fff; text-decoration: none; }
.rdv-breadcrumb a:hover { text-decoration: underline; }
.rdv-breadcrumb span { opacity: .6; }
.rdv-container {
    max-width: 820px;
    margin: 0 auto;
    padding: 2.5rem 1.25rem 4rem;
}
.rdv-alert {
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    margin-bottom: 1.75rem;
    font-size: .95rem;
    font-weight: 500;
}
.rdv-alert--success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
.rdv-alert--error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}
.rdv-success-card {
    background: #f0f9e8;
    border: 2px solid #83B735;
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    text-align: center;
}
.rdv-success-card .rdv-success-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
}
.rdv-success-card h2 {
    color: #3e6b2b;
    margin: 0 0 .75rem;
}
.rdv-success-card p {
    color: #555;
    margin: 0 0 1.5rem;
}
.rdv-section {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.75rem;
    margin-bottom: 1.5rem;
}
.rdv-section-titre {
    font-size: 1rem;
    font-weight: 700;
    color: #2d4a1e;
    margin: 0 0 1.25rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.rdv-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #83B735;
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    flex-shrink: 0;
}
.rdv-type-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
}
@media (max-width: 540px) {
    .rdv-type-grid { grid-template-columns: 1fr; }
}
.rdv-type-label {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    border: 2px solid #e8ede4;
    border-radius: var(--radius-lg);
    padding: 1rem 1rem;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.rdv-type-label:hover {
    border-color: #83B735;
    background: #f7faf2;
}
.rdv-type-label input[type="radio"] {
    flex-shrink: 0;
    margin-top: .25rem;
    accent-color: #83B735;
    width: 16px;
    height: 16px;
}
.rdv-type-label input[type="radio"]:checked ~ * {
    color: #2d4a1e;
}
.rdv-type-label:has(input:checked) {
    border-color: #83B735;
    background: #f7faf2;
    box-shadow: var(--shadow-focus);
}
.rdv-type-icon {
    font-size: 1.6rem;
    line-height: 1;
    flex-shrink: 0;
}
.rdv-type-text strong {
    display: block;
    font-size: .9rem;
    color: #1e3a12;
    margin-bottom: .25rem;
}
.rdv-type-text span {
    font-size: .78rem;
    color: var(--gris-texte);
    line-height: 1.3;
}
.rdv-dates-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
@media (max-width: 540px) {
    .rdv-dates-grid { grid-template-columns: 1fr; }
}
.rdv-horaire-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.rdv-horaire-label {
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    font-size: .9rem;
    color: #444;
}
.rdv-horaire-label input { accent-color: #83B735; }
.rdv-coords-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 600px) {
    .rdv-coords-grid { grid-template-columns: 1fr; }
}
.rdv-form-group {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.rdv-form-group label {
    font-size: .82rem;
    font-weight: 600;
    color: #444;
}
.rdv-form-group label .req { color: #e00; margin-left: .15rem; }
.rdv-form-group input,
.rdv-form-group select,
.rdv-form-group textarea {
    padding: .5rem .75rem;
    border: 1px solid #dde3d6;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: .92rem;
    color: #212121;
    transition: border-color .15s, box-shadow .15s;
    background: #fff;
}
.rdv-form-group input:focus,
.rdv-form-group select:focus,
.rdv-form-group textarea:focus {
    border-color: #83B735;
    box-shadow: var(--shadow-focus);
}
.rdv-form-group .field-error {
    font-size: .78rem;
    color: #c0392b;
}
.rdv-captcha-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.rdv-captcha-question {
    font-size: .9rem;
    font-weight: 600;
    color: #333;
    flex-shrink: 0;
}
.rdv-captcha-row input[type="number"] {
    padding: .5rem .75rem;
    border: 1px solid #dde3d6;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: .9rem;
    width: 120px;
}
.rdv-captcha-row input:focus {
    border-color: #83B735;
    box-shadow: var(--shadow-focus);
}
.rdv-submit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.75rem;
    flex-wrap: wrap;
}
.rdv-submit-row .rdv-required-note {
    font-size: .8rem;
    color: var(--gris-texte);
}
.rdv-produit-banner {
    background: #f7faf2;
    border-left: 3px solid #83B735;
    padding: .75rem 1rem;
    border-radius: 0 6px 6px 0;
    font-size: .9rem;
    color: #3e6b2b;
    margin-bottom: 1.5rem;
    font-weight: 500;
}

/* ── Page : page_partenariat.php ─────────────────────────────────────── */
/* .part-form-grid .form-group--full retiré : redondant avec la règle .form-group--full
   déjà globale (même valeur grid-column: 1/-1) — pas repris ici. */
.part-hero-badge {
    display: inline-flex; align-items: center; gap: .5rem;
    background: rgba(131,183,53,.2); color: #bef264;
    border: 1px solid rgba(131,183,53,.35);
    padding: .25rem .75rem; border-radius: var(--radius-pilule);
    font-size: .82rem; font-weight: 600; letter-spacing: .02em;
    margin-bottom: 1rem; backdrop-filter: blur(4px);
}
.part-avantages {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
@media (max-width: 900px) {
    .part-avantages { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
    .part-avantages { grid-template-columns: 1fr; }
}
.part-avantage {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-xl);
    padding: 1.5rem 1.25rem;
    position: relative;
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
}
.part-avantage:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.part-avantage::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #83B735, #a0d44a);
}
.part-avantage-icon {
    width: 44px; height: 44px;
    background: #f0f7e1;
    border-radius: var(--radius-lg);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1rem;
}
.part-avantage h3 { font-size: .95rem; font-weight: 700; margin-bottom: .5rem; color: #111827; }
.part-avantage p  { font-size: .85rem; color: #6b7280; line-height: 1.6; margin: 0; }
.part-profils {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
@media (max-width: 700px) {
    .part-profils { grid-template-columns: 1fr; }
}
.part-profil {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-xl);
    padding: 1.75rem 1.25rem 1.25rem;
    text-align: center;
    transition: background .2s, border-color .2s;
}
.part-profil:hover { background: #fff; border-color: #83B735; }
.part-profil-icon {
    font-size: 2.25rem;
    line-height: 1;
    margin-bottom: .75rem;
    display: block;
}
.part-profil h3 { font-size: .95rem; font-weight: 700; margin-bottom: .5rem; color: #111827; }
.part-profil p  { font-size: .83rem; color: #6b7280; line-height: 1.6; margin: 0; }
.part-form-wrap {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-xl);
    padding: 2.25rem 2rem;
    max-width: 720px;
    margin: 0 auto;
    box-shadow: var(--shadow-sm);
}
.part-form-wrap p.part-form-intro {
    color: #6b7280; font-size: .9rem; line-height: 1.65;
    margin-bottom: 1.75rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #f3f4f6;
}
.part-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.part-form-label {
    display: block; font-size: .8rem; font-weight: 600;
    color: #374151; margin-bottom: .5rem;
}
.part-form-label .req { color: var(--vert-texte); }
.part-form-input,
.part-form-select,
.part-form-textarea {
    width: 100%;
    padding: .5rem 1rem;
    border: 1.5px solid #e5e7eb;
    border-radius: var(--radius);
    font-family: inherit; font-size: .9rem; color: #111827;
    background: #fdfdfd;
    transition: border-color .15s, box-shadow .15s;
    -webkit-appearance: none;
}
.part-form-input:focus,
.part-form-select:focus,
.part-form-textarea:focus {
    border-color: #83B735;
    box-shadow: var(--shadow-focus);
    background: #fff;
}
.part-form-input.is-error,
.part-form-select.is-error,
.part-form-textarea.is-error { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.1); }
.part-form-textarea { resize: vertical; min-height: 120px; }
.part-form-select { cursor: pointer; }
.part-field-error { display: block; margin-top: .25rem; font-size: .76rem; color: #ef4444; font-weight: 500; }
.part-form-submit {
    width: 100%;
    padding: .75rem 1.5rem;
    background: linear-gradient(135deg, #83B735, #6a9829);
    color: #fff; font-size: 1rem; font-weight: 700;
    border: none; border-radius: var(--radius-lg);
    cursor: pointer; font-family: inherit;
    transition: background .15s, box-shadow .15s, transform .1s;
    box-shadow: 0 2px 8px rgba(106,152,41,.4);
    margin-top: .5rem;
    display: flex; align-items: center; justify-content: center; gap: .5rem;
}
.part-form-submit:hover {
    background: linear-gradient(135deg, #8fc93d, #6a9829);
    box-shadow: 0 4px 14px rgba(106,152,41,.45);
    transform: translateY(-1px);
}
.part-form-submit:active { transform: translateY(0); }
.part-flash {
    padding: 1rem 1.25rem; border-radius: var(--radius-lg);
    font-size: .9rem; font-weight: 500;
    margin-bottom: 1.5rem;
    display: flex; align-items: flex-start; gap: .75rem;
    border: 1px solid transparent;
}
.part-flash--ok  { background: #f0fdf4; color: #15803d; border-color: #86efac; }
.part-flash--err { background: #fef2f2; color: #991b1b; border-color: #fca5a5; }
.part-flash-icon { font-size: 1.15rem; flex-shrink: 0; margin-top: .05rem; }
.part-rate-error {
    padding: .75rem 1rem; background: #fef2f2; color: #991b1b;
    border: 1px solid #fca5a5; border-radius: var(--radius-lg);
    font-size: .85rem; font-weight: 500; margin-bottom: 1.25rem;
}
@media (max-width: 700px) {
    .part-form-grid  { grid-template-columns: 1fr; }
    .part-form-wrap  { padding: 1.5rem 1rem; }
    .part-profils    { grid-template-columns: 1fr; }
    .part-avantages  { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .part-avantages  { grid-template-columns: 1fr; }
}

/* ── Page : espace_client_login.php + espace_client_inscription.php ─── */
.ec-toggle {
    display: flex;
    gap: .5rem;
    margin-bottom: 1.25rem;
}
.ec-toggle-btn {
    flex: 1;
    padding: .5rem .5rem;
    border: 1.5px solid #e5e7eb;
    border-radius: var(--radius-lg);
    background: #fff;
    font-size: .85rem;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all .15s;
}
.ec-toggle-btn.active {
    border-color: var(--vert);
    background: #f0f7e1;
    color: var(--vert-fonce, #2d6a2d);
}
/* Onglet « Créer un compte » : un lien (02/10), habillé exactement comme l'onglet bouton voisin */
.ec-toggle-btn { font-family: inherit; line-height: 1.4; text-align: center; }
a.ec-toggle-btn { display: flex; align-items: center; justify-content: center; text-decoration: none; }
a.ec-toggle-btn:hover, a.ec-toggle-btn:focus-visible { border-color: var(--vert); color: var(--vert-texte); }
/* .ec-login-card-label était dupliqué identique dans login.php et
   inscription.php — défini une seule fois ici. */
.ec-login-card-label {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--vert-texte);
    background: #f0f7e1;
    border-radius: var(--radius-pilule);
    padding: .25rem .75rem;
    margin-bottom: .75rem;
}
.ec-fieldset {
    /* Même habillage que les groupes du formulaire /devis (titre simple, sans cadre) — 02/10 */
    border: 0;
    padding: 0;
    margin: 0 0 1rem;
    min-width: 0;
}
.ec-fieldset legend {
    font-size: .8125rem;
    font-weight: 700;
    color: var(--texte);
    padding: 0;
    margin-bottom: .5rem;
}
.ec-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}
@media (max-width: 500px) {
    .ec-form-row { grid-template-columns: 1fr; }
}

/* ── Page : espace_client.php ─────────────────────────────────────────── */
.ec-welcome {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-xl);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}
.ec-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--vert);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ec-welcome-text { flex: 1; }
.ec-welcome-text h1 { font-size: 1.25rem; margin: 0 0 .25rem; }
.ec-coords { display: flex; flex-wrap: wrap; gap: .15rem .75rem; }
.ec-coords span { font-size: .83rem; color: #6b7280; }
.ec-coords span:not(:last-child)::after { content: ''; }
.ec-logout { margin-left: auto; white-space: nowrap; }
.ec-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.ec-section-head h2 { margin: 0; font-size: 1.1rem; }
.ec-vide-card {
    text-align: center;
    padding: 2.5rem 1rem;
    background: #f9fafb;
    border: 1px dashed #d1d5db;
    border-radius: var(--radius-lg);
    color: #6b7280;
}
.ec-devis-list { display: flex; flex-direction: column; gap: .75rem; }
.ec-devis-card {
    display: block;
    text-decoration: none;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    transition: border-color .15s, box-shadow .15s;
}
.ec-devis-card:hover {
    border-color: var(--vert);
    box-shadow: var(--shadow-sm);
}
.ec-devis-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .5rem;
    gap: .5rem;
}
.ec-devis-ref {
    font-weight: 700;
    font-size: 1rem;
    color: #111;
    margin-right: .5rem;
}
.ec-devis-date { font-size: .82rem; color: var(--gris-texte); white-space: nowrap; }
.ec-devis-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .88rem;
    color: #6b7280;
}
.ec-devis-voir { color: var(--vert-texte); font-weight: 600; }
.ec-devis-msg {
    margin-top: .75rem;
    padding: .5rem .75rem;
    background: #eff6ff;
    border-radius: var(--radius);
    font-size: .83rem;
    color: #1e3a8a;
    font-style: italic;
}
.badge-grey   { display:inline-block;padding:.15rem .5rem;border-radius:var(--radius-pilule);font-size:.72rem;font-weight:700;background:#f3f4f6;color:var(--gris-texte); }
.badge-orange { display:inline-block;padding:.15rem .5rem;border-radius:var(--radius-pilule);font-size:.72rem;font-weight:700;background:#fff7ed;color:#c2410c; }
.badge-blue   { display:inline-block;padding:.15rem .5rem;border-radius:var(--radius-pilule);font-size:.72rem;font-weight:700;background:#eff6ff;color:#1d4ed8; }
.badge-green  { display:inline-block;padding:.15rem .5rem;border-radius:var(--radius-pilule);font-size:.72rem;font-weight:700;background:#f0fdf4;color:#15803d; }
.badge-red    { display:inline-block;padding:.15rem .5rem;border-radius:var(--radius-pilule);font-size:.72rem;font-weight:700;background:#fef2f2;color:#b91c1c; }
.badge-msg    { display:inline-block;padding:.15rem .5rem;border-radius:var(--radius-pilule);font-size:.72rem;font-weight:700;background:#dbeafe;color:#1d4ed8; }
.badge-newdoc { display:inline-block;padding:.15rem .5rem;border-radius:var(--radius-pilule);font-size:.72rem;font-weight:700;background:#fef9c3;color:#854d0e; }
.ec-msg-moi   { background:#f9fafb;border-left-color:#d1d5db; }
.ec-repondre  { display:flex;flex-direction:column;gap:.4rem;margin-top:.5rem; }
.ec-repondre-label { font-size:.82rem;font-weight:600;color:#374151; }
.ec-repondre textarea { width:100%;padding:.55rem .7rem;border:1px solid #d1d5db;border-radius:6px;font:inherit;font-size:.9rem;resize:vertical; }
.ec-repondre button { align-self:flex-start; }
.ec-termines  { margin-top:1.75rem;border-top:1px solid #e5e7eb;padding-top:1rem; }
.ec-termines > summary { cursor:pointer;font-weight:700;font-size:.95rem;color:#374151;list-style:revert; }
.ec-termines > summary span { font-weight:400;color:#9ca3af; }
.ec-termines-note { font-size:.84rem;color:#6b7280;line-height:1.55;margin:.6rem 0 1rem; }
.ec-devis-termine { opacity:.85; }
.ec-contact-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    margin-top: 1.5rem;
}
.ec-contact-band div {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
/* Coordonnées du conseiller (02/10) : intitulé en petites capitales, comme la maquette d'Arno */
.ec-conseiller-label { margin-top: .5rem; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9ca3af; }
.ec-conseiller-nom { color: var(--texte); }
.ec-contact-band a { color: var(--vert-texte); font-weight: 600; }
.ec-contact-band strong { font-size: .95rem; color: #111; }
.ec-contact-band span   { font-size: .83rem; color: #6b7280; }
.ec-devis-toggle {
    width: 100%;
    background: none;
    border: none;
    padding: 1rem 1.25rem .75rem;
    text-align: left;
    cursor: pointer;
}
.ec-chevron {
    font-size: .9rem;
    color: var(--gris-texte);
    transition: transform .2s;
    display: inline-block;
}
.ec-devis-card[data-open] .ec-chevron { transform: rotate(180deg); }
.ec-devis-detail {
    border-top: 1px solid #f3f4f6;
    padding: .75rem;
}
.ec-lignes-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .87rem;
    margin-top: .5rem;
}
.ec-lignes-table th {
    text-align: left;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--gris-texte);
    padding: .25rem .5rem;
    border-bottom: 1px solid #f3f4f6;
}
.ec-lignes-table td {
    padding: .5rem;
    border-bottom: 1px solid #f9fafb;
    color: #374151;
    vertical-align: top;
}
.ec-lignes-table a { color: var(--vert); text-decoration: none; }
.ec-lignes-table a:hover { text-decoration: underline; }
.ec-docs-bloc {
    margin-top: .75rem;
    padding: .75rem;
    background: #f8fafc;
    border-radius: var(--radius-lg);
    border: 1px dashed #d1d5db;
}
.ec-docs-titre {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6b7280;
    margin-bottom: .5rem;
}
.ec-docs-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.ec-docs-list a {
    font-size: .88rem;
    color: var(--vert);
    text-decoration: none;
    font-weight: 600;
}
.ec-docs-list a:hover { text-decoration: underline; }
.ec-docs-item { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ec-docs-consulted { font-size: .73rem; color: var(--gris-texte); white-space: nowrap; }
.ec-docs-new {
    font-size: .68rem;
    font-weight: 700;
    background: #dcfce7;
    color: #15803d;
    padding: .1rem .5rem;
    border-radius: var(--radius-pilule);
    white-space: nowrap;
}
@media (max-width: 500px) {
    .ec-welcome { flex-wrap: wrap; }
    .ec-contact-band { flex-direction: column; align-items: flex-start; }
}

/* ── Page : devis_panier.php (modale "Parcourir le catalogue") ──────── */
/* .univers-grid/.univers-card renommés .univers-dialog-grid/.univers-dialog-card :
   ces noms collisionnaient avec les classes .univers-grid/.univers-card déjà
   globales (grille "univers" pleine page, mise en page différente — img+texte
   au lieu d'une tuile en overlay). Gabarit + JS mis à jour en conséquence. */
.univers-dialog {
    border: none;
    border-radius: var(--radius-xl);
    padding: 0;
    max-width: 720px;
    width: 94vw;
    box-shadow: var(--shadow-lg);
    position: fixed;
    inset: 0;
    margin: auto;
    height: fit-content;
    animation: dialog-in .2s ease;
}
@keyframes dialog-in {
    from { opacity: 0; translate: 0 12px; scale: .97; }
    to   { opacity: 1; translate: 0 0;    scale: 1;   }
}
.univers-dialog::backdrop {
    background: rgba(0,0,0,.5);
    backdrop-filter: blur(4px);
}
.univers-dialog-inner { padding: 1.75rem; }
.univers-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}
.univers-dialog-head h2 {
    margin: 0;
    font-size: 1.2rem;
    color: #111;
}
.univers-dialog-head p {
    margin: .25rem 0 0;
    font-size: .82rem;
    color: var(--gris-texte);
}
.univers-close {
    background: #f3f4f6;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    color: #6b7280;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s, color .15s;
}
.univers-close:hover { background: #e5e7eb; color: #111; }
.univers-dialog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
    gap: 1rem;
}
.univers-dialog-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    height: 130px;
    display: block;
    box-shadow: var(--shadow-sm);
    transition: transform .2s, box-shadow .2s;
}
.univers-dialog-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.univers-card-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: #374151;
    transition: transform .3s;
}
.univers-dialog-card:hover .univers-card-img { transform: scale(1.05); }
.univers-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.15) 55%, transparent 100%);
}
.univers-card-nom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: .75rem .75rem;
    font-size: .88rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
    line-height: 1.2;
}
.univers-card-arrow {
    position: absolute;
    top: .65rem;
    right: .65rem;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    color: #fff;
    opacity: 0;
    transition: opacity .2s;
}
.univers-dialog-card:hover .univers-card-arrow { opacity: 1; }

/* ── Page : produit_service.php ──────────────────────────────────────── */
.srv-devis-bloc{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem}
.srv-qte-wrap{display:flex;align-items:center;gap:.5rem}
.srv-qte-label{font-size:.85rem;font-weight:500;color:#e2e8f0;white-space:nowrap}
.srv-qte-ctrl{display:flex;align-items:center;border:1px solid rgba(255,255,255,.25);border-radius:var(--radius-lg);overflow:hidden}
.srv-qte-btn{background:rgba(255,255,255,.1);border:none;color:#fff;width:36px;height:40px;font-size:1.2rem;cursor:pointer;transition:background .15s}
.srv-qte-btn:hover{background:rgba(255,255,255,.2)}
.srv-qte-input{width:52px;text-align:center;border:none;background:transparent;color:#fff;font-size:.95rem;font-weight:600;height:40px;padding:0;-moz-appearance:textfield}
.srv-qte-input::-webkit-inner-spin-button,.srv-qte-input::-webkit-outer-spin-button{-webkit-appearance:none}
.srv-devis-feedback{width:100%;font-size:.85rem;margin:0;color:#a7f3d0}
.srv-contact-link{font-size:.85rem;color:rgba(255,255,255,.7);text-decoration:none;display:inline-flex;align-items:center;gap:.25rem;margin-top:.25rem;width:100%}
.srv-contact-link:hover{color:#fff}

/* ── Page : produit_documentation.php (demande de documentation) ─────── */
/* Champs alignés sur .form-group : bordure #ddd, arrondi de la boutique, texte à
   1rem (en dessous, iOS zoome dans le champ), halo --shadow-focus. */
.doc-demande { margin-top: 1.75rem; padding: 1.5rem 1.5rem; background: #fff; border: 1px solid #e5e7eb; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); scroll-margin-top: 110px; }
/* L'en-tête vert met ses titres et ses boutons en blanc : la carte, blanche, reprend ses couleurs. */
.doc-demande h2 { font-size: 1.15rem; margin: 0 0 .25rem; color: #111827; }
.doc-demande-aide { color: var(--gris-texte); font-size: .9rem; margin: 0 0 1rem; }
.doc-champs { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; margin-bottom: 1rem; }
.doc-champs label { display: flex; flex-direction: column; gap: .25rem; font-size: .88rem; font-weight: 600; color: #444; }
.doc-champs :is(input, textarea, select),
.doc-anti-robot input[type="number"] { padding: .5rem .75rem; border: 1px solid #ddd; border-radius: var(--radius); font: inherit; font-size: 1rem; font-weight: 400; background: #fff; transition: border-color .15s, box-shadow .15s; }
.doc-champs textarea { resize: vertical; }
.doc-champs :is(input, textarea, select):focus,
.doc-anti-robot input[type="number"]:focus { border-color: var(--vert); box-shadow: var(--shadow-focus); }
.doc-champs [aria-invalid="true"] { border-color: #dc2626; }
.doc-champs .doc-erreur { color: #dc2626; font-size: .76rem; font-weight: 500; }
.doc-champ-large { grid-column: 1 / -1; }
.doc-anti-robot { margin: 0 0 1rem; }
.doc-anti-robot .slider-captcha { margin: 0 0 .75rem; }
.doc-anti-robot label { display: flex; flex-direction: column; gap: .25rem; max-width: 260px; font-size: .88rem; font-weight: 600; color: #444; }
.doc-demande .doc-cta-primary { width: 100%; justify-content: center; background: var(--vert); color: #fff; border-color: var(--vert); }
.doc-demande .doc-cta-primary:hover { background: var(--vert-c); color: #fff; }
.doc-demande .doc-cta-primary:disabled { opacity: .6; cursor: wait; }
.doc-demande-mention { font-size: .76rem; color: var(--gris-texte); margin: .75rem 0 0; line-height: 1.5; }
.doc-demande-mention a { color: var(--gris-texte); }
.doc-demande-msg { margin: 1rem 0 0; padding: .75rem 1rem; border-radius: var(--radius); font-size: .9rem; background: #fef2f2; color: #991b1b; }
.doc-demande-msg.ok { background: #f0fdf4; color: #166534; }
@media (max-width: 600px) { .doc-champs { grid-template-columns: 1fr; } }

/* ── Page : plan_du_site.php ─────────────────────────────────────────── */
/* Des <section> ici : la règle générale « section { padding: 3rem 0 } » et le fond
   gris des sections paires sont neutralisés, le plan a sa propre mise en page. */
.plan-site { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; }
.plan-site-bloc { padding: 1.25rem 1.5rem !important; background: #fff !important; border: 1px solid #e5e7eb; border-radius: var(--radius-lg); }
/* Le style du site pose déjà un trait vert centré sous les h2 : pas de bordure en plus. */
.plan-site-bloc h2 { font-size: 1.05rem; margin: 0 0 .75rem; }
.plan-site-bloc ul { list-style: none; margin: 0; padding: 0; }
.plan-site-bloc li { margin: .25rem 0; }
.plan-site-bloc a { color: var(--texte); text-decoration: none; }
.plan-site-bloc a:hover { color: var(--vert-texte); text-decoration: underline; }

/* Prise de rendez-vous : sous-titres d'étape, champ pleine largeur, civilité */
.rdv-sous-titre { font-size: .9rem; font-weight: 700; color: #333; margin: 0 0 .6rem; }
.rdv-type-grid + .rdv-champ-court { margin-top: 2rem; }
.rdv-champ-court { max-width: 340px; margin-bottom: 1rem; }
.rdv-coords-grid .rdv-plein { grid-column: 1 / -1; }
.rdv-civilite { border: 0; min-width: 0; }
.rdv-civilite legend { font-size: .82rem; font-weight: 600; color: #444; margin-bottom: .35rem; }

/* Cibles tactiles à 44 px en mobile : points du carrousel (24), flèches des produits connexes (34),
   loupe de la galerie (38), onglets (43), « Télécharger la fiche PDF » (31), « Filtres » (32),
   liens du pied de page (16), lien « ← Continuer… » du panier (20). Le rond des points reste de 8 px. */
@media (max-width: 768px) {
    .dot { width: 44px; height: 44px; }
    .connexes-section .carousel-btn { width: 44px; height: 44px; }
    .galerie-zoom-btn { width: 44px; height: 44px; }
    .tab-btn { min-height: 44px; }
    .btn-fiche-pdf, .filtre-mobile-btn { min-height: 44px; }
    .footer-cols li { margin-bottom: 0; }
    .footer-cols li a { display: inline-block; padding-block: .6875rem; }   /* 44 px sur une ligne, même écart sur deux */
    .devis-page .btn-link { min-height: 44px; }
    /* Cases du panier (13 px) : l'étiquette entière est cliquable, on lui donne la hauteur */
    .devis-optin, .devis-page .checkbox-inline { min-height: 44px; }
    .devis-page .checkbox-inline { display: inline-flex; align-items: center; gap: .5rem; }
    .devis-optin input[type="checkbox"], .devis-page .checkbox-inline input[type="checkbox"] { width: 20px; height: 20px; }
}