/* ══════════════════════════════════════════════════════════
   POLICES — Open Sans auto-hébergée, sous-ensemble sur mesure
   Remplace les @import vers fonts.googleapis.com.
   Les fichiers .woff2 vont dans un dossier fonts/ à la racine
   du site (au même niveau que index.html et le dossier css/).
   ══════════════════════════════════════════════════════════

   QUATRE fichiers déclarés, UN SEUL téléchargé en pratique.

   Le navigateur ne récupère un fichier de police que s'il
   rencontre un caractère de son unicode-range. Sur une page
   normale, seul open-sans.woff2 (22 Ko) part sur le réseau :

     open-sans.woff2         22,2 Ko  ← toujours, c'est celui-ci
     open-sans-italic.woff2  24,6 Ko  ← seulement si texte en italique
     open-sans-ext.woff2     11,7 Ko  ← seulement si caractère rare (ñ, å, þ…)
     open-sans-italic-ext            ← les deux conditions à la fois

   POLICE VARIABLE : un seul fichier couvre les graisses 400 à
   800. En fichiers statiques il en aurait fallu cinq, pour
   55 Ko et cinq requêtes. D'où le « font-weight: 400 800 ».

   L'axe de largeur (wdth) a été supprimé — le CSS n'utilise
   aucun font-stretch. Le hinting et les fonctionnalités
   OpenType inutilisées ont été retirés.

   Le sous-ensemble principal inclut le Ø des références
   produit (ISO-CYL Ø300) et le · de la frise entreprise :
   vérifié sur l'ensemble du contenu du site.
   ══════════════════════════════════════════════════════════ */

/* ── Romain — le fichier chargé sur toutes les pages ── */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/open-sans.woff2') format('woff2');
    unicode-range: U+0020-007E,U+00A0,U+00A9,U+00AB,U+00BB,U+00B0,U+00B1,U+00B2,U+00B3,U+00B5,U+00B7,U+00BC-00BE,U+00C0,U+00C2,U+00C4,U+00C7,U+00C8,U+00C9,U+00CA,U+00CB,U+00CE,U+00CF,U+00D4,U+00D6,U+00D7,U+00D8,U+00D9,U+00DB,U+00DC,U+00E0,U+00E2,U+00E4,U+00E7,U+00E8,U+00E9,U+00EA,U+00EB,U+00EE,U+00EF,U+00F4,U+00F6,U+00F8,U+00F9,U+00FB,U+00FC,U+00FF,U+0152-0153,U+0178,U+2010-2015,U+2018-201A,U+201C-201E,U+2026,U+202F,U+20AC,U+2122,U+2190-2193,U+2212,U+2264-2265;
}

/* ── Italique — chargé uniquement sur les pages qui en ont ── */
@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/open-sans-italic.woff2') format('woff2');
    unicode-range: U+0020-007E,U+00A0,U+00A9,U+00AB,U+00BB,U+00B0,U+00B1,U+00B2,U+00B3,U+00B5,U+00B7,U+00BC-00BE,U+00C0,U+00C2,U+00C4,U+00C7,U+00C8,U+00C9,U+00CA,U+00CB,U+00CE,U+00CF,U+00D4,U+00D6,U+00D7,U+00D8,U+00D9,U+00DB,U+00DC,U+00E0,U+00E2,U+00E4,U+00E7,U+00E8,U+00E9,U+00EA,U+00EB,U+00EE,U+00EF,U+00F4,U+00F6,U+00F8,U+00F9,U+00FB,U+00FC,U+00FF,U+0152-0153,U+0178,U+2010-2015,U+2018-201A,U+201C-201E,U+2026,U+202F,U+20AC,U+2122,U+2190-2193,U+2212,U+2264-2265;
}

/* ── Complément latin — filet de sécurité ──────────────────
   Couvre les caractères latins non français : ñ, å, ø, þ, ¡, ¿…
   Ne sera téléchargé que si l'un d'eux apparaît un jour dans
   une actualité ou un libellé produit. En pratique : jamais.
   Sa seule présence garantit qu'aucun caractère ne s'affichera
   dans une police différente du reste du texte. */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/open-sans-ext.woff2') format('woff2');
    unicode-range: U+0000-001F,U+007F-009F,U+00A1-00A8,U+00AA,U+00AC-00AF,U+00B4,U+00B6,U+00B8-00BA,U+00BF,U+00C1,U+00C3,U+00C5-00C6,U+00CC-00CD,U+00D0-00D3,U+00D5,U+00DA,U+00DD-00DF,U+00E1,U+00E3,U+00E5-00E6,U+00EC-00ED,U+00F0-00F3,U+00F5,U+00F7,U+00FA,U+00FD-00FE,U+0131,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-200F,U+2016-2017,U+201B,U+201F-2025,U+2027-202E,U+2030-206F,U+2074,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/open-sans-italic-ext.woff2') format('woff2');
    unicode-range: U+0000-001F,U+007F-009F,U+00A1-00A8,U+00AA,U+00AC-00AF,U+00B4,U+00B6,U+00B8-00BA,U+00BF,U+00C1,U+00C3,U+00C5-00C6,U+00CC-00CD,U+00D0-00D3,U+00D5,U+00DA,U+00DD-00DF,U+00E1,U+00E3,U+00E5-00E6,U+00EC-00ED,U+00F0-00F3,U+00F5,U+00F7,U+00FA,U+00FD-00FE,U+0131,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-200F,U+2016-2017,U+201B,U+201F-2025,U+2027-202E,U+2030-206F,U+2074,U+2215,U+FEFF,U+FFFD;
}


/* ── Reset ─────────────────────────────────────────────── */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
}

html,
body {
    background: #f5f5f5;
}

html {
    scrollbar-gutter: stable;
}

p {
    font-style: normal;
}


/* ══════════════════════════════════════════════════════════
   NAV.CSS — Styles de la barre de navigation
   ══════════════════════════════════════════════════════════ */


/* ── Variables ─────────────────────────────────────────── */
:root {
    --couleur-accent: #ff6600;
    --couleur-accent-clair: #fff4ea;
    --couleur-accent-glow-forte: rgba(255, 102, 0, 0.2);
    --couleur-accent-glow-legere: rgba(255, 102, 0, 0.12);
    --couleur-accent-glow-focus: rgba(255, 102, 0, 0.25);
 
    --gris-fond-form: #3a3a3a;
    --gris-fond-select: #4a4a4a;
    --gris-fond-select-hover: #545454;
    --gris-bordure: #707070;
    --gris-bordure-select: #666;
    --gris-bordure-radio: #ccc;
    --gris-fond-image-placeholder: #f5f5f5;
    --gris-bordure-image-placeholder: #bbb;
 
    --texte-blanc: #fff;
    --texte-fonce: #333;
 
    --milieu-page: 67%;
 
    --transition-radio-pill:
        border-color 0.25s ease,
        background-color 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.15s ease;
 
    /* --- Variables issues de style_-_Copie.css --- */
    --nav-height: 5vw;
    --nav-color: #1d1d1d;
    --nav-border: #aaaaaa;
    --bg-chiffre-color: #ebebeb;
    --nav-transition: 0.4s ease;
    --nav-indicator-dur: 0.55s;
}


/* ── Header (conteneur fixe en haut) ──────────────────── */
.nav-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--nav-height);
    z-index: 100;
}


/* ── Barre de navigation ───────────────────────────────── */
.nav-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 2.5vw;
    overflow: hidden;
    /* contient l'image indicateur   */

    background-color: var(--texte-blanc);
    border-bottom: 2px solid var(--nav-border);
    transition: background-color var(--nav-transition),
        border-color var(--nav-transition);
}


/* ── Image indicateur (derrière le lien actif) ─────────── */
/*
   L'image est à l'intérieur de .nav-bar.
   Elle suit horizontalement le lien actif (position + largeur
   calculées en JS). Elle entre par le bas et sort par le bas.
   z-index: 0 → elle passe derrière le logo et les liens (z-index: 1)
*/
.nav-indicator-img {
    position: absolute;
    bottom: 0;
    left: 0;
    /* déplacé via JS avec transform */
    height: 100%;
    width: 0;
    /* recalculé en JS               */
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    /* Pas de transition horizontale : position instantanée sous le bon lien */
    /* Seule la montée verticale est animée (transition sur le img lui-même) */
}

.nav-indicator-img img {
    position: absolute;
    bottom: 0;
    /* ancrée en bas → entre par le bas */
    left: 50%;
    transform: translate(-50%, 100%);
    /* cachée sous la navbar au départ  */
    width: auto;
    height: 100%;
    object-fit: cover;
    opacity: 0.15;
    /* réduite pour lisibilité du texte */
    transition: transform var(--nav-indicator-dur) cubic-bezier(0.76, 0, 0.24, 1);
}

/* Classe ajoutée par JS quand l'image doit être visible */
.nav-indicator-img.is-visible img {
    transform: translate(-50%, 0%);
    /* remonte à sa position finale */
}


/* ── Mode transparent (pages avec hero) ───────────────── */
/*
   La classe "nav-hero" est ajoutée via nav.js sur les pages
   qui ont un hero (index, entreprise, produits).
   La navbar devient transparente jusqu'au premier scroll ou hover.
*/
.nav-header.nav-hero .nav-bar {
    background-color: transparent;
    border-bottom-color: transparent;
}

/* Quand on scrolle OU qu'on hover la navbar → fond blanc */
.nav-header.nav-hero.is-scrolled .nav-bar,
.nav-header.nav-hero:hover .nav-bar {
    background-color: var(--texte-blanc);
    border-bottom-color: var(--nav-border);
}

/* En mode hero (non scrollé, non hoveré) : liens blancs, sauf le lien actif */
.nav-header.nav-hero:not(.is-scrolled):not(:hover) .nav-link {
    color: #ffffff;
}

.nav-header.nav-hero:not(.is-scrolled):not(:hover) .nav-link.is-active {
    color: var(--couleur-accent);
}

/* Quand la navbar est hoverée ou scrollée, .nav-link:hover prend le relais (déjà défini) */



/* ── Logo ──────────────────────────────────────────────── */
.nav-logo {
    position: relative;
    z-index: 1;
    /* au-dessus de l'image indicateur */
}

.nav-logo img {
    height: calc(var(--nav-height) * 0.82);
    width: auto;
    display: block;
}


/* ── Liste des liens ────────────────────────────────────── */
.nav-links {
    display: flex;
    list-style: none;
    gap: 0;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1;
    /* au-dessus de l'image indicateur */
}


/* ── Lien individuel ────────────────────────────────────── */
.nav-link {
    display: flex;
    align-items: center;
    height: var(--nav-height);
    padding: 0 1vw;
    position: relative;

    text-decoration: none;
    color: var(--nav-color);
    text-transform: uppercase;
    font-size: 1.1vw;
    font-weight: bold;
    letter-spacing: 0.05em;

    transition: color var(--nav-transition);
}

/* Trait animé sous le lien (hover + actif) */
.nav-link::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: var(--nav-border);
    border-radius: 5px 5px 0 0;

    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease-out;
}


/* ── État hover ────────────────────────────────────────── */
.nav-link:hover {
    color: var(--couleur-accent);
}

.nav-link:hover::after {
    transform: scaleX(1);
}


/* ── État actif (page courante) ─────────────────────────── */
/*
   La classe "is-active" est ajoutée automatiquement par nav.js
   sur le lien correspondant à la page ouverte.
*/
.nav-link.is-active {
    color: var(--couleur-accent);
}

.nav-link.is-active::after {
    transform: scaleX(1);
    /* trait toujours visible */
    background: var(--nav-border);
    /* gris sur la page active */
}


.nav-logo-mobile {
display: none;
}

/* ── Hero — grand logo centré ───────────────────────────── */
.hero {
    position: relative;
    width: 100%;
    background: #ffffff;
}

.hero video {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.6s ease;
    aspect-ratio: 16/9;
}

.hero-info {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    padding-top: 14vw;
    border-bottom: 3px solid #ffffff;
}

.hero-logo {
    width: clamp(250px, 45vw, 650px);
    height: auto;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 0.6s ease;
}

.hero-legend {
    position: relative;
    text-align: center;
    font-size: clamp(0.7rem, 2vw, 1.5rem);
    color: #ffffff;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    white-space: nowrap;
    margin-top: 0.5vw;
    /* Neutralise le style h1 global : ce titre garde le rendu visuel
       d'un simple paragraphe, seule la sémantique devient h1 */
    display: block;
}

.hero-legend::after {
    content: none;
}

.hero-legend2 {
    position: relative;
    text-align: center;
    font-size: clamp(0.5rem, 1.2vw, 1rem);
    color: #ffffff;
    letter-spacing: 0.12em;
    white-space: nowrap;
    margin-top: 0.8vw;
    font-weight: bold;
}




/* Desktop : hamburger et contact fixe masqués */
.nav-mobile-actions {
    display: none;
}



/* ── SECTION ENTREPRISE ───────────────────────────── */




.accueil-lentreprise {
    position: relative;
    padding: 3vw 6vw 5vw 6vw;
}

.accueil-entreprise-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.accueil-entreprise {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 2.5vw;
    gap: 5.5vw;
}


.accueil-entreprise section {
    position: relative;
}

.accueil-entreprise section p {
    text-align: justify;
}

.accueil-entreprise section>p {
    margin-top: 2vw;
    font-size: 1.2vw;
    font-weight: bold;
}

.accueil-entreprise section>div {
    display: flex;
    align-items: center;

}

.accueil-entreprise section div img {
    height: 6vw;
    width: auto;
    margin-top: 15%;
    margin-left: 0.7vw;
}

.accueil-entreprise section div div {
    height: 8vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 1vw;
    margin-top: 0.5vw;
}


.chiffre-dessus::before,
.chiffre-dessous::before {
    content: '';
    position: absolute;
    left: -1.2vw;
    top: 5%;
    height: 100%;
    width: 113%;
    background: var(--bg-chiffre-color);
    z-index: 1;
}

.section::after {
    content: '';
    position: absolute;
    left: 8.1vw;
    /* décalage depuis le bord droit */
    top: 0.4vw;
    /* décalage depuis le haut */
    height: 47%;
    width: 65%;
    /* longueur de la bordure */
    background: #ff6600;
    z-index: 0;

}

.section p,
.section img {
    z-index: 5;
}


/* 45 ANS D'EXP */

.chiffre-section1 {
    color: #ff6600;
    font-size: 5vw;
    font-weight: bold;
    margin-left: 2.8vw;
    margin-top: 0.5vw;
}

.plus-section {
    position: absolute;
    font-size: 3vw;
    font-weight: bold;
    color: #ff6600;
}


#plus-section-exp {
    margin-left: 1.2vw;
    margin-top: 1.8vw;
}


.unite1-section1 {
    font-size: 1.7vw;
    margin-top: -1.5vw;
    text-align: center !important;
    font-weight: bold;
    color: #ff6600;
    margin-left: 2vw;
}

.unite2-section1 {
    font-size: 1vw;
    margin-top: -0.5vw;
    text-align: center !important;
    font-weight: bold;
    color: var(--couleur-accent);
    margin-left: 1.9vw;
}


.accueil-entreprise-txt {
    position: relative;
}




/* 480 CLIENTS */


#plus-section-clients {
    margin-left: 0.4vw;
    margin-top: 1.8vw;
}

.chiffre-section2 {
    color: #ff6600;
    font-size: 4.5vw;
    font-weight: bold;
    margin-top: 1vw;
    margin-left: 2vw;
}

.unite1-section2 {
    font-size: 2.3vw;
    margin-top: -1.4vw;
    text-align: center !important;
    font-weight: bold;
    color: #ff6600;
    margin-left: 1.75vw;
}





/* 30K PDTS EXPEDIES /AN */


.chiffre-section3 {
    color: #ff6600;
    font-size: 3vw;
    font-weight: bold;

    margin-top: 1.5vw;
    margin-left: 1vw;
}

.unite1-section3 {
    font-size: 1.9vw;
    margin-top: -1.2vw;
    text-align: center !important;
    font-weight: bold;
    color: #ff6600;
    
    margin-left: 1vw;
}

.unite2-section3 {
    font-size: 1.3vw;
    margin-top: -0.7vw;
    text-align: center !important;
    font-weight: bold;
    color: var(--couleur-accent);
    
    margin-left: 1vw;
}








/* 80% D'EXPE AVANT 7 JOURS */


.chiffre-section4 {
    color: #ff6600;
    font-size: 3vw;
    font-weight: bold;
    margin-left: 2vw;
    margin-top: 1.5vw;
}

.unite1-section4 {
    font-size: 2.1vw;
    margin-top: -1.2vw;
    text-align: center !important;
    font-weight: bold;
    color: #ff6600;
    margin-left: 1.7vw;
}

.unite2-section4 {
    font-size: 1.6vw;
    margin-top: -0.7vw;
    text-align: center !important;
    font-weight: bold;
    color: var(--couleur-accent);
    margin-left: 1.7vw;
}







.section1::after,
.section2::after,
.section3::after {
    content: '';
    position: absolute;
    right: -4vw;
    /* décalage depuis le bord droit */
    top: 10%;
    /* décalage depuis le haut */
    height: 90%;
    /* longueur de la bordure */
    border-right: 2px solid black;
}







/* ── SECTION PRODUITS ───────────────────────────── */

.accueil-produits {
    width: 100%;
    background-image: url('../media/img/regard_produits_accueil.webp');
    background-size: cover;
    position: sticky;
    top: 5vw;
    z-index: 0;
    background-position: center center;
}

.accueil-produits-txt {
    padding: 5vw 6vw 6vw;
    font-size: 2vw;
    text-decoration: none;
    color: #ffffff;
}

h1 {
    font-size: clamp(1.1rem, 2.5vw, 3vw);
    text-transform: uppercase;
    color: #1d1d1d;
    display: inline-block;
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
}

h1::after {
    content: "";
    display: block;
    width: 2.8em;
    height: 3px;
    background: #ff6600;
    margin-top: 0.3em;
}

/* Titre de section (h2, h3...) réutilisant le style visuel des h1 :
   utilisé quand un titre doit garder l'apparence "h1" sans occuper
   le niveau h1 dans la hiérarchie sémantique de la page. */
.titre-section {
    font-size: clamp(1.1rem, 2.5vw, 3vw);
    text-transform: uppercase;
    color: #1d1d1d;
    display: inline-block;
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
}

.titre-section::after {
    content: "";
    display: block;
    width: 2.8em;
    height: 3px;
    background: #ff6600;
    margin-top: 0.3em;
}

.accueil-produits p {
    margin-top: 6vw;
    margin-bottom: 6vw;
}

.accueil-produits h1,
.accueil-produits .titre-section {
    color: #ffffff;
}

.btn-decouvrir {
    margin-left: 3vw;
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.85em 2em;
    position: relative;
    overflow: hidden;

    color: var(--couleur-accent);
    background: transparent;
    border: 2px solid #ff6600;

    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: clamp(0.72rem, 1vw, 0.9rem);
    font-weight: 700;

    transition: color 0.25s ease;
}

.btn-decouvrir::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: #ff6600;
    transform: translateX(-100%);
    transition: transform 0.25s ease;

    z-index: 0;
}

.btn-decouvrir:hover::before {
    transform: translateX(0);
}

.btn-decouvrir::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #ff6600;
    z-index: 0;

    transform: translateX(100%);
    transition: transform 0.4s ease;
}

.btn-decouvrir:hover::after {
    transform: translateX(100%);
}

.btn-decouvrir span {
    position: relative;
    z-index: 1;
}

.btn-decouvrir:hover {
    color: #ffffff;
}

.btn-decouvrir:hover::after {
    transform: translateX(100%);
}

.btn-decouvrir svg {
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.btn-decouvrir:hover svg {
    transform: translateX(5px);
}


#btnConfig {
    background-color: var(--couleur-accent);
    color: var(--texte-blanc);
}

#btnConfig::before {
    background: #ffffff;
}

#btnConfig::after {
    background: #ffffff;
}

#btnConfig:hover {
    color: #ff6600;
}











/* ═══════════════════════════════════════════════════════
   SECTION ACTUALITÉS
   ═══════════════════════════════════════════════════════ */

.accueil-actualites {
    z-index: 10;
    position: relative;
}

.apercu-actu-accueil {
    width: 100%;
    padding: 6vw 0 8vw;
    background: #f5f5f5;
    position: inherit;
}

/* ── En-tête titre + bouton ─────────────────────────── */
.actu-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0 6vw;
    margin-bottom: 3vw;
}

.btn-plus-actu {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    color: var(--couleur-accent);
    text-decoration: none;
    font-size: clamp(0.72rem, 0.95vw, 0.88rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s ease;
    padding-bottom: 2px;
}

.btn-plus-actu:hover {
    border-color: var(--couleur-accent);
}

.btn-plus-actu svg {
    transition: transform 0.2s ease;
}

.btn-plus-actu:hover svg {
    transform: translateX(4px);
}

/* ── Wrapper carrousel (flèches + piste) ─────────────── */
.actu-carrousel-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
}

/* ── Piste scrollable ────────────────────────────────── */
.actu-grille {
    display: flex;
    flex-wrap: nowrap;
    gap: 2vw;
    overflow-x: auto;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
    padding: 1vw 6vw 2vw;
    flex: 1;
}

.actu-grille::-webkit-scrollbar {
    display: none;
}

/* ── Flèches ─────────────────────────────────────────── */
.actu-fleche {
    flex-shrink: 0;
    width: 3.2vw;
    height: 3.2vw;
    min-width: 36px;
    min-height: 36px;
    background: #ffffff;
    border: 2px solid #d0d0d0;
    color: #1d1d1d;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    z-index: 11;
}

.actu-fleche--gauche {
    margin-left: 2vw;
}

.actu-fleche--droite {
    margin-right: 2vw;
}

.actu-fleche:hover {
    background: #ff6600;
    border-color: #ff6600;
    color: #ffffff;
}

.actu-fleche:disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

/* ── Base commune à toutes les cartes ───────────────── */
.actu-carte {
    flex: 0 0 auto;
    width: clamp(280px, 32vw, 76vw);
    overflow: hidden;
    opacity: 0;
    animation: actu-apparition 0.5s ease forwards;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}


.actu-carte:hover {
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.13);
    transform: translateY(-4px);
    cursor: pointer;
}

@keyframes actu-apparition {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ════════════════════════════════════════════════════
   MODE IMAGE
   ════════════════════════════════════════════════════ */
.actu-carte--image {
    background: #1d1d1d;
    border: none;
}

.actu-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.actu-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease, filter 0.5s ease;
    filter: brightness(0.75);
}

.actu-carte--image:hover .actu-img {
    transform: scale(1.06);
    filter: brightness(0.5);
}

.actu-img-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.8em 1.6em 1.6em;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.3) 60%, transparent 100%);
    display: flex;
    flex-direction: column;
    gap: 0.4em;
}

.actu-texte-img {
    font-size: clamp(0.8rem, 0.95vw, 0.9rem);
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.6;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.4s ease;
    margin-top: 0.3em;
}

.actu-carte--image:hover .actu-texte-img {
    max-height: 10em;
    opacity: 1;
}

.actu-carte--img-erreur .actu-img-wrap {
    aspect-ratio: auto;
    background: none;
}

.actu-carte--img-erreur .actu-img {
    display: none;
}

.actu-carte--img-erreur .actu-img-overlay {
    position: static;
    background: none;
    padding: 1.6em;
}

.actu-carte--img-erreur .actu-titre {
    color: #1d1d1d;
}

.actu-carte--img-erreur .actu-date {
    color: var(--couleur-accent);
}


/* ════════════════════════════════════════════════════
   MODE TEXTE
   ════════════════════════════════════════════════════ */
.actu-carte--texte {
    background: #ffffff;
    border-left: 4px solid #ff6600;
    border-top: 1px solid #b4b4b4;
    border-right: 1px solid #b4b4b4;
    border-bottom: 1px solid #b4b4b4;
}

.actu-corps {
    padding: 2vw 2vw 2vw 1.8vw;
    display: flex;
    flex-direction: column;
    gap: 0.7vw;
}

.actu-texte {
    font-size: clamp(0.9rem, 1vw, 0.95rem);
    color: #3a3a3a;
    line-height: 1.65;
    margin-top: 0.15vw;
}


/* ── Éléments partagés ───────────────────────────────── */
.actu-date {
    font-size: 0.8vw;
    color: var(--couleur-accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
}

.actu-carte--image .actu-titre {
    font-size: clamp(0.9rem, 1.2vw, 1.3rem);
    color: #ffffff;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    line-height: 1.35;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
    margin-top: 0.5vw;
}

.actu-carte--texte .actu-titre {
    font-size: clamp(1.1rem, 1.3vw, 1.8rem);
    color: #1d1d1d;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.35;
    margin-top: 1.5vw;
    margin-bottom: 0.5vw;
}


/* ── États chargement / erreur ───────────────────────── */
.actu-chargement,
.actu-erreur,
.actu-vide {
    padding: 3em 0;
    text-align: center;
    color: #999;
    font-size: 0.9rem;
    font-style: italic;
    letter-spacing: 0.06em;
}

.actu-erreur {
    color: #cc3300;
}






/* ══════════════════════════════════════════════════════
   MODALE ACTUALITÉ
   ══════════════════════════════════════════════════════ */

.actu-modale-overlay {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2vw;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.actu-modale-overlay.actu-modale--visible {
    opacity: 1;
    pointer-events: all;
}

/* Boîte centrale */
.actu-modale-boite {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 3vw;
    background: #ffffff;
    max-width: 80vw;
    max-height: 80vh;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);

    transform: translateY(20px) scale(0.98);
    transition: transform 0.3s ease;
}

.actu-modale-overlay.actu-modale--visible .actu-modale-boite {
    transform: translateY(0) scale(1);
}

/* Croix de fermeture */
.actu-modale-fermer {
    position: absolute;
    top: 1em;
    right: 1em;
    z-index: 1000;
    background: transparent;
    border: none;
    color: #ff6600;
    cursor: pointer;
    padding: 0.3em;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.actu-modale-fermer:hover {
    transform: rotate(90deg);
    opacity: 0.75;
}

/* Image à gauche */
.actu-modale-img-wrap {
    flex: 0 0 50%;
    max-height: 80vh;
    overflow: hidden;
    align-self: stretch;
}

.actu-modale-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Contenu à droite */
.actu-modale-contenu {
    flex: 1;
    padding: 3em 3em 3em 0;
    display: flex;
    flex-direction: column;
    gap: 1em;
    overflow-y: auto;
    max-height: 80vh;
}

.actu-modale-titre {
    font-size: clamp(1rem, 1.8vw, 1.6rem);
    color: #1d1d1d;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.3;
}

.actu-modale-titre::after {
    content: "";
    display: block;
    width: 2.5em;
    height: 3px;
    background: #ff6600;
    margin-top: 0.5em;
}

.actu-modale-texte {
    font-size: clamp(0.85rem, 1.1vw, 1rem);
    color: #3a3a3a;
    line-height: 1.75;
}

/* Modale sans image : contenu centré */
.actu-modale-boite--sans-image .actu-modale-img-wrap {
    display: none;
}

.actu-modale-boite--sans-image .actu-modale-contenu {
    padding: 3em;
    max-width: 600px;
    margin: 0 auto;
}







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

footer {
    position: relative;
    background: #f5f5f5;
    z-index: 20; /* passe au-dessus de .accueil-actualites (z-index: 10) */
}

.footer-curve {
  position: absolute;
  top: -59px;      /* correspond exactement au viewBox height="60" du SVG */
  left: 0;
  width: 100%;
  height: 60px;
  z-index: 10;
  display: block;
}

.footer-shadow {
  position: absolute;
  top: -60px;       /* même valeur que .footer-curve pour rester alignées */
  left: 0;
  width: 100%;
  height: 60px;
  background: linear-gradient(to top, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 100%);
  z-index: 5;
  pointer-events: none;
}

.footer-shadow-left {
  left: -50px;
}

.footer-shadow-right {
  right: -50px;
}

.footer-container {
    display: flex;
    flex-direction: row;
}

.footer-container-logo {
    padding: 0vw;
    width: 33%;
    height: auto;
    margin-right: 3vw;
}

#footer-logo {
    width: 100%;
    padding: 2vw 1vw 1vw 5vw;
}

#titre-footer {
    margin-top: 0.8vw;
    margin-bottom: 0.7vw;
    font-size: 1.6vw;
    font-weight: bold;
    color: #ff6600;
}

.footer-adresse {
    align-items: flex-start;
    margin-top: 1.5vw;
    width: 34%;
    text-align: center;
    border: 1px solid black;
    border-radius: 11px;
    padding-bottom: 0.3vw;
    margin-bottom: 1.5vw;
    padding-left: 0.5vw;
    padding-right: 0.5vw;
    font-size: 1.1vw;
}

h2 {
    font-size: clamp(1.1rem, 1.6vw, 1.5rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #ff6600;
    margin-bottom: 0.4vw;
}

/* h3 : reprend le style visuel de l'ancien h2 par défaut, pour tout
   sous-titre qui n'a pas de style dédié par ailleurs (ID/classe). */
h3 {
    font-size: clamp(1.1rem, 1.6vw, 1.5rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #ff6600;
    margin-bottom: 0.4vw;
}

/* Sous-titre de section (h3...) réutilisant le style visuel des h2 :
   pendant de .titre-section pour un niveau de hiérarchie plus profond. */
.sous-titre-section {
    font-size: clamp(1.1rem, 1.6vw, 1.5rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #ff6600;
    margin-bottom: 0.4vw;
}

.footer-made {
    display: flex;
    flex-direction: column;
}

.footer-francais {
    display: flex;
    flex-direction: column;
    margin: 7.5vw 3vw 1vw 3vw;
    text-transform: uppercase;
    text-align: center;
    width: 30%;
}

#footerFR {
    width: 100%;
}

#footer-fr-text {
    font-size: clamp(1rem, 1.78vw, 1.7rem);
    margin-top: 0.5vw;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
}

.french-fab {
    width: 6vw;
    position: relative;
}

#footerfrenchfab {
    width: 100%;
    position: relative;
    top: -10%;
}


.membre-ff {
    position: absolute;
    font-size: 0.75vw;
    right: 0%;
    top: -14%;
}

#footerfrenchfab:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.footer-copyright {
    padding-top: 0.5vw;
    border-top: 1px solid black;
}

.footer-legal {
    padding-top: 0.5vw;
    border-top: 1px solid black;
    display: inline-flex;
    gap: 1.5vw;
    position: relative;
}

.footer-legal a {
    text-decoration: none;
    color: inherit;
    position: relative;
}

.footer-legal a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0.5vw;
    width: 100%;
    height: 1px;
    background: #000;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s ease;
}

.footer-legal a:hover::after {
    transform: scaleX(1);
}

.footer-mentions {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding-inline: clamp(0.5vw, 5vw, 22%);
    font-size: 1vw;
    gap: 2vw;
    margin-bottom: 0.4vw;
}


.contact-main {
    margin-bottom: 5vw;
}
















#entreprise-main {
    margin-top: 4.5vw;
}

.entreprise {
    padding: 2vw 6vw 2vw 6vw;
    background: #f5f5f5;
    text-align: justify;

}

.entreprise>div {
    margin-top: 2vw;
}


.entreprise-paragrapheimg {
    font-size: 1.1vw;
    line-height: 1.75;
    display: flex;
    flex-direction: row;
}

.metier-societe {
    width: 45vw;
    margin-right: 5vw;
}

.entreprise-conteneur-img {
    display: flex;
    flex-direction: column;

    align-items: center;
}

.activite-legend {
    font-style: italic;
    font-size: 1vw;
}

.entreprise-img {
    width: 35vw;
    height: auto;
    margin-top: -1vw;
}



.metier-production {
    margin-left: 5vw;
    margin-right: 3%;
}

.metier-societe a,
.metier-production a,
.contact-lien-actualites {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(0, 0, 0, 0.35);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.2s ease;
}

.metier-societe a:hover,
.metier-production a:hover,
.contact-lien-actualites:hover {
    text-decoration-color: currentColor;
}

.metier-societe a:visited,
.metier-production a:visited,
.contact-lien-actualites:visited {
    color: inherit;
}

.entreprise-objectifs::before {
    content: '';
    position: absolute;
    left: 21vw;
    top: -1.55vw;
    height: 5vw;
    width: 52%;
    background: #dfdfdf;
    z-index: -1;
}

.entreprise-objectifs {
    position: relative;
    text-align: center;
    margin-top: 4vw;
    font-size: 1.5vw;
    z-index: 0;
}

.entreprise-objectifs b {
    color: var(--couleur-accent);
}



#produits-entreprise {
    position: absolute;
    top: 89.5%;
    right: 8.5vw;
}








/* ══════════════════════════════════════════
   AMÉLIORATION CONTINUE
   3 lignes. Dans chacune : une colonne de 2 photos
   immobiles (sticky) + une zone de texte qui défile.
   ══════════════════════════════════════════ */

.ac {
    position: relative;
    background: #0d0c0c;

    /* ── Réglages ────────────────────────────── */
    --ac-photo-w: 45%;
    /* hauteur mini d'une ligne : 0 = la ligne fait exactement
       la hauteur de son texte (le comportement voulu).
       Mettre 120vh si un jour on veut rallonger la course.  */
    --ac-course: 0;
    --ac-voile: 0.28;
}


.ac-entete {
    background: #f5f5f5;
    padding: 4.5vw 6vw 5vw;
}


.ac-chiffres {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5vw;
    margin-top: 2.5vw;
}

.ac-chiffre {
    position: relative;
    isolation: isolate;
    padding-top: 2vw;
}

.ac-chiffre::before {
    content: "";
    position: absolute;
    width: 13.5vw;
    height: 6.7vw;
    background-color: var(--bg-chiffre-color);
    top: 1.2vw;
    left: -4%;
    z-index: -1;
}



.ac-chiffre::after {
    content: '';
    position: absolute;
    left: 7.55vw;
    top: 0.8vw;
    height: 3.5vw;
    width: 35%;
    background: #ff6600;
    z-index: -2;
}

.ac-chiffre-valeur,
.ac-chiffre-label {
    position: relative;
    z-index: 1;
}

.ac-chiffre-valeur {
    font-size: 2.4vw;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #1d1d1d;
    line-height: 1;
}

.ac-chiffre-label {
    margin-top: 0.5vw;
    font-size: 0.8vw;
    line-height: 1.4;
    color: #666666;
}

/* ── Les 3 lignes ─────────────────────────────── */
.ac-lignes {
    display: flex;
    flex-direction: column;
}

.ac-ligne {
    display: flex;
    flex-direction: row;
    /* la ligne fait la hauteur de son texte ; la fenetre s'etire
       dessus, et la ligne suivante s'enchaine directement */
    align-items: stretch;
    min-height: var(--ac-course);
}

.ac-ligne--inverse {
    flex-direction: row-reverse;
}

/* ── La fenetre : le hublot qui defile avec le texte ──
   clip-path (et non overflow:hidden) : c'est la seule decoupe
   qui s'applique aussi aux enfants en position:fixed. */
.ac-fenetre {
    position: relative;
    flex: 0 0 var(--ac-photo-w);
    background: #0d0c0c;
    clip-path: inset(0);
}

/* ── Le calque : vraiment fixe a l'ecran, sous la nav ──
   C'est la page (et donc la fenetre) qui defile par-dessus.
   Aucun JS. Largeur = celle de la fenetre (--ac-photo-w, en %
   du viewport car la section est pleine largeur).
   Aucun ancetre ne doit avoir transform / filter / will-change,
   sinon le fixed redevient relatif a cet ancetre. */
.ac-calque {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    width: var(--ac-photo-w);
    height: calc(100vh - var(--nav-height));
    display: flex;
    flex-direction: column;
}

/* fenetre a droite : le calque se cale a droite de l'ecran */
.ac-ligne--inverse .ac-calque {
    left: auto;
    right: 0;
}

.ac-calque-horizontal {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    will-change: transform;
    backface-visibility: hidden;
}

.ac-photo {
    position: relative;
    flex: 1 1 50%;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    background-color: #1a1a1a;
}

.ac-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ac-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, var(--ac-voile));
    pointer-events: none;
}

.ac-legende {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    margin: 0;
    padding: 1.4vw 1.6vw 0.9vw;
    font-size: 0.78vw;
    line-height: 1.5;
    color: #ffffff;
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.82) 0%,
            rgba(0, 0, 0, 0) 100%);
}

/* ── Zone de texte qui defile ─────────────────── */
.ac-texte {
    flex: 1 1 auto;
    min-width: 0;
    background: #f5f5f5;
    /* c'est ce padding qui donne sa hauteur a la ligne entiere */
    padding: 4vw 4.5vw;
}

.ac-carte {
    width: 100%;
    background: #f5f5f5;
}

.ac-periode {
    font-size: 0.78vw;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #1d1d1d;
    margin-bottom: 1.2vw;
}

.ac-carte h3 {
    font-size: 2vw;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    margin-bottom: 1.4vw;
}

.ac-carte p {
    font-size: 1.05vw;
    line-height: 1.75;
    color: #333333;
    text-align: justify;
}

.ac-carte ul {
    margin: 1.2vw 0 0 1.2vw;
    padding-left: 1.2vw;
    font-size: 1.05vw;
    line-height: 1.9;
    color: #333333;
    list-style-type: square;
}

.ac-carte ul li::marker {
    color: #ff6600;
}

.ac-carte b {
    font-weight: 700;
    color: #1d1d1d;
}

/* ── Mouvement reduit : plus rien n'est plaque ────── */
@media (prefers-reduced-motion: reduce) {

    .ac-ligne {
        min-height: 0;
    }

    .ac-fenetre {
        clip-path: none;
    }

    .ac-calque {
        position: static;
        width: auto;
        height: auto;
    }

    .ac-photo {
        flex: none;
        height: 44vh;
    }
}

.carousel {
    position: relative;
    max-width: 1100px;
    margin: 40px auto;
}

.carousel:focus {
    outline: none
}

.carousel:focus-visible {
    outline: 2px solid #ff6600;
    outline-offset: 6px
}

/* --- zone visible --- */
.viewport {
    overflow: hidden;
}

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

.slide {
    flex: 0 0 70%;
    aspect-ratio: 16/9;
    background: #eee;
    overflow: hidden;
    opacity: .55;
    transition: opacity .3s;
}

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

.slide.is-active {
    opacity: 1;
}

/* --- flèches --- */
.carousel-nav {
    position: absolute;
    top: calc((100% - 90px) / 2);
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .75);
    backdrop-filter: blur(2px);
    font-size: 26px;
    line-height: 1;
    color: #3a3a3a;
    cursor: pointer;
    z-index: 2;
    transition: background .2s;
}

.carousel-nav:hover {
    background: #fff
}

.carousel-nav:focus-visible {
    outline: 2px solid #ff6600;
    outline-offset: 3px
}

/* 15% = (100% - 70%) / 2 : bord exact de la slide active */
.carousel-nav.prev {
    left: calc(15% - 24px);
}

.carousel-nav.next {
    right: calc(15% - 24px);
}

/* --- légende --- */
.caption {
    text-align: center;
    color: #555;
    font-size: 15px;
    padding: 22px 10px;
    background: #f5f5f5;
    margin: 8px 0 0;
    min-height: 60px;
    font-style: italic;
}

/* --- pagination (les points), sous la légende --- */
.dots {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 18px;
}

.dots button {
    position: relative;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: #c4c4c4;
    cursor: pointer;
    transition: background .2s;
}

.dots button::after {
    content: '';
    position: absolute;
    inset: -14px
}

.dots button:hover {
    background: #9a9a9a
}

.dots button[aria-current="true"] {
    background: #ff6600;
}

.dots button:focus-visible {
    outline: 2px solid #ff6600;;
    outline-offset: 4px
}

@media (prefers-reduced-motion:reduce) {
    .track {
        transition: none
    }
}













#section-polyester {
    background-image: url('../media/img/fibre-de-verre.webp');
    background-repeat: no-repeat;
    background-size: cover;
    height: auto;
}


.polyester-gauche {
    width: 50vw;
    padding-right: 3vw;
        margin-bottom: 2vw;
}

#soustitre-polyester {
    margin-bottom: 1.5vw;
}

.polyester-intro {
    margin-top: 2vw;
    margin-bottom: 3vw;
}

#section-polyester div ul {
    margin-bottom: 3vw;
    border-left: 3px solid #ff6600;
}

.polyester-avantages {
    display: flex;
    flex-direction: row;
}

#section-polyester div ul li {
    margin: 1vw 0vw 0vw 4vw;
    font-size: 1.2vw;
}

#section-polyester p {
    font-size: 1.2vw;
}

.polyester-droite {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#soustitre-graphique {
    margin-top: 4vw;
}

.polyester-graphique {
    margin-top: 1vw;
    height: 22vw;
    border-radius: 2%;
}

.polyester-conclusion {
    margin-top: 4vw;
}

.polyester-recyclage {
    display: flex;
    align-items: center;
    gap: 3vw;
}

.recyclage-titre-fdv {
    margin-bottom: 1.2vw;
}

.polyester-recycling-symbol {
    width: 10vw;
    height: auto;
    flex-shrink: 0;
    margin-left: 5vw;
}














/* ══════════════════════════════════════════
           FRISE — CARTES POSTALES EMPILÉES
        ══════════════════════════════════════════ */

.frise-section {
    position: relative;
    width: 100%;
    background: #1d1d1d;
    padding: 6vw 0 6vw;
    margin-top: 2px;

    --frise-pile-top: 3vw;
    /* Réglages de la pile */
    --frise-carte-h: 33vw;
    /* hauteur d'une carte                     */
    --frise-carte-gap: 3vw;
    /* course de scroll entre deux cartes      */
    --frise-carte-decal: 0.9vw;
    /* décalage vertical d'une carte à l'autre */
}

/* Grain tiède */
.frise-section::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.045;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' fill='%23FFB880'/%3E%3C/svg%3E");
}

.frise-intro {
    position: relative;
    padding: 0 8vw 6vw;
}

.frise-intro h1,
.frise-intro .titre-section {
    color: white;
}

.frise-intro-eyebrow {
    font-size: 0.72vw;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--couleur-accent);
    margin-bottom: 1.2vw;
}

.frise-intro-titre {
    font-size: 2.8vw;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

/* ── La pile ──────────────────────────────────── */
.frise-pile {
    position: relative;
    padding-left: 13vw;
    padding-right: 5vw;
}

/* ── Indicateur vertical, à gauche ────────────── */
.frise-rail {
    position: sticky;
    top: calc(var(--nav-height) + 12vw);
    float: left;
    margin-left: -11vw;
    width: 9vw;
    display: flex;
    flex-direction: column;
    gap: 1.4vw;
    z-index: 5;
}

.frise-rail-item {
    display: flex;
    align-items: center;
    gap: 0.7vw;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font: inherit;
}

.frise-rail-trait {
    display: block;
    height: 2px;
    width: 1.4vw;
    background: rgba(255, 255, 255, 0.22);
    flex: 0 0 auto;
    transition: width 0.45s cubic-bezier(0.76, 0, 0.24, 1),
        background 0.35s ease;
}

.frise-rail-annee {
    font-size: 0.85vw;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #7f7f7f;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-0.4vw);
    transition: opacity 0.4s ease,
        transform 0.45s cubic-bezier(0.76, 0, 0.24, 1);
}

.frise-rail-item.is-active .frise-rail-trait {
    width: 3.2vw;
    background: #ff6600;
}

.frise-rail-item.is-active .frise-rail-annee {
    opacity: 1;
    transform: translateX(0);
}

.frise-rail-item:hover .frise-rail-trait {
    background: rgba(255, 255, 255, 0.55);
}

.frise-rail-item:focus-visible {
    outline: 2px solid #ff6600;
    outline-offset: 4px;
}

/* ── Une carte ────────────────────────────────── */
.frise-carte {
    position: sticky;
    top: calc(var(--nav-height) + var(--frise-pile-top) + var(--i) * var(--frise-carte-decal));
    height: var(--frise-carte-h);
    margin-bottom: var(--frise-carte-gap);
    transform: rotate(var(--rot));
    transform-origin: 50% 20%;
    border-radius: 0.5vw;
    background: #ff6600;
    padding: 0.1vw;
    /* la marge blanche de la carte postale */
    box-shadow: 0 1.4vw 3vw rgba(0, 0, 0, 0.55),
        0 0.2vw 0.6vw rgba(0, 0, 0, 0.35);
    will-change: transform;
}

.frise-carte:last-child {
    margin-bottom: 0;
}

.frise-carte-inner {
    position: relative;
    height: 100%;
    border-radius: 0.3vw;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
}

/* Voile sombre pour la lisibilité du texte */
.frise-carte-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right,
            rgba(0, 0, 0, 0.60) 60%,
            rgba(0, 0, 0, 0.60) 60%,
            rgba(0, 0, 0, 0.60) 100%);
}

/* Couleurs de repli si l'image ne charge pas */
.frise-carte:nth-of-type(1) .frise-carte-inner {
    background-color: #1a1a1a;
}

.frise-carte:nth-of-type(2) .frise-carte-inner {
    background-color: #1e1a16;
}

.frise-carte:nth-of-type(3) .frise-carte-inner {
    background-color: #16191c;
}

.frise-carte:nth-of-type(4) .frise-carte-inner {
    background-color: #131c1e;
}

.frise-carte:nth-of-type(5) .frise-carte-inner {
    background-color: #1c1712;
}

/* ── Contenu : année à gauche, texte à droite ── */
.frise-carte-annee {
    position: relative;
    z-index: 2;
    flex: 0 0 38%;
    padding-left: 4vw;
    font-size: 9vw;
    font-weight: 800;
    line-height: 0.88;
    letter-spacing: -0.04em;
    color: #ff6600;
    user-select: none;
}

.frise-carte-texte {
    position: relative;
    z-index: 2;
    flex: 1;
    padding: 0 4vw 0 2vw;
}

.frise-carte-eyebrow {
    font-size: 0.72vw;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--couleur-accent);
    margin-bottom: 1.2vw;
}

.frise-carte-titre {
    font-size: 2.4vw;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    margin-bottom: 1.6vw;
}

.frise-carte-titre::after {
    content: '';
    display: block;
    width: 2.5em;
    height: 3px;
    background: #ff6600;
    margin-top: 0.6em;
}

.frise-carte-body {
    font-size: 1.05vw;
    font-weight: 500;
    color: #ffffff;
    line-height: 1.75;
    max-width: 85%;
    text-align: justify;
}

/* ── Mouvement réduit ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    .frise-carte {
        transform: none;
    }

    .frise-rail-trait,
    .frise-rail-annee {
        transition: none;
    }
}


















/* ══════════════════════════════════════════════════════════
                            CONTACT
   ══════════════════════════════════════════════════════════ */


.main-contact {
    margin-top: 10vw;
}

#titre-contact {
    padding: 7vw 6vw 0vw 6vw;
}

.contact-france {
    display: flex;
    flex-direction: row;
    margin-top: 2vw;
}

.ping {
    position: absolute;
    margin-top: 15.3%;
    margin-left: 32.8%;
    cursor: pointer;
    transition: transform 0.35s ease;
}

.ping:hover {
    transform: scale(1.3);
    transform-origin: bottom;
}

.map-pin {
    width: 1.5vw;
    height: auto;
}

.map-pin__body {
    fill: #ff1500;
    stroke: #ffffff;
    stroke-width: 4px;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-opacity: 5;
}

.map-pin__hole {
    fill: white;
}





.ping-actif {
    transform: scale(1.3);
    transform-origin: bottom;
}





.carte-siege {
    transition: transform 0.35s ease, box-shadow 0.35s ease, opacity 0.35s ease;
}

.carte-siege-deco {
    transition: transform 0.35s ease, opacity 0.35s ease;
}

.map-pin__body {
    transition: fill 0.35s ease;
}

.ping-actif .map-pin__body {
    fill: #ff1500;
}

.ping-inactif .map-pin__body {
    fill: #ff7979;
}


/*.indication-siege {
    position: absolute;
    font-size: 0.7vw;
    color: #555555;
    font-weight: 800;
    text-align: center;
    line-height: 87%;
    margin-top: 16.3%;
    margin-left: 32.5%;
}*/





/*===================== Carte de France SVG ========================*/
.carte {
    width: 35vw;
    margin: 0 auto;
    cursor: pointer;
    position: relative;
}

.region-1 path {
    stroke: #ffffff;
    stroke-width: 1px;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-opacity: .5;
    fill: #bdbdbd;
}

.region-2 path {
    stroke: #ffffff;
    stroke-width: 1px;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-opacity: .5;
    fill: #ffa162;
}

.region-1:hover path {
    fill: #555555;
}

.region-2:hover path {
    fill: #ff6600;
}






#contact {
    text-decoration: none;
    color: inherit;
}

.cartes-visite {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 40vw;
}


.carte-siege-deco {
    content: "";
    position: absolute;
    width: 10vw;
    height: 9vw;
    top: -0.8vw;
    left: 21vw;
    background: #ff6600;
    /*    border-radius: 0.5vw; */
}

.carte-siege {
    position: relative;
    background-color: #555555;
    padding: 1.5vw;
    color: white;
    font-weight: bold;
    width: 30vw;
}

.ping-carte {
    position: relative;
    width: 3%;
}

.info-siege {
    margin-top: 1vw;
    margin-bottom: 0.5vw;
    font-style: normal;
    font-size: clamp(0.9rem, 1.3vw, 3rem);
}

#carte-commerciaux {
    margin-top: 3vw;
    padding: 1vw;
    height: 7vw;
    width: 23vw;
    display: flex;
    flex-direction: column;
}

#carte-container {
    position: relative;
    display: flex;
    background: transparent;
}

.carte-nord-deco {
    content: "";
    position: relative;
    margin-top: 3vw;
    width: 2vw;
    height: 7vw;
    background: #bdbdbd;
}

.carte-nord {
    position: relative;
    border: 2px solid #4b4b4b;
    display: flex;
    flex-direction: column;
}



.carte-sud-deco {
    content: "";
    position: relative;
    margin-top: 3vw;
    width: 2vw;
    height: 7vw;
    background: #ffa162;
}

.carte-sud {
    position: relative;
    border: 2px solid #555555;
    display: flex;
    flex-direction: column;
}

.zone-descriptif {
    font-style: italic;
    font-size: 0.8vw;
    margin-top: -0.3vw;
    margin-bottom: 0.7vw;
}

.commercial-contact {
    font-weight: 500;
}



.region-1 path,
.region-2 path {
    transition: fill 0.35s ease;
}

.carte-nord,
.carte-sud {
    transition: transform 0.35s ease, box-shadow 0.35s ease, opacity 0.35s ease;
}

.carte-nord-deco,
.carte-sud-deco {
    transition: transform 0.35s ease, opacity 0.35s ease;
}

.carte-active {
    transform: translateY(-8px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
}

.carte-inactive {
    opacity: 0.35;
}

.zone-active path {
    fill: #555555;
}

.zone-active-sud path {
    fill: #ff6600;
}


.contact-indication {
    font-size: 1.2vw;
    font-style: italic;
    text-align: center;
    margin: 2.5vw 0vw 4vw 0vw;
}

.txt-action {
    text-decoration: none;
    color: #000000;
} 







/* ══════════════════════════════════════════════════════════
                            PRODUITS
   ══════════════════════════════════════════════════════════ */




.produits-wrap {
    margin-top: 6.5vw;
    margin-left: 6vw;
    margin-bottom: 6vw;
}

.produits-wrap h1 {
    margin-bottom: 2vw;
}

/* ── Liste des catégories ── */
.cat-list {
    list-style: none;
    display: flex;
    flex-direction: column;
}

/* ── En-tête cliquable ── */
.cat-header {
    display: flex;
    align-items: center;
    gap: clamp(0.6rem, 1.5vw, 1.2rem);
    padding: clamp(0.75rem, 1.5vw, 1.1rem) 0.25rem;
    cursor: pointer;
    user-select: none;
    color: #1d1d1d;
    transition: color 0.25s ease;
}

.cat-header:hover,
.cat-header.is-open {
    color: #ff6600;
}

/* ── Colonne triangle + ligne verticale ── */
.cat-arrow-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: clamp(14px, 1.4vw, 20px);
}

.cat-triangle {
    width: 0;
    height: 0;
    border-top: clamp(6px, 0.6vw, 9px) solid transparent;
    border-bottom: clamp(6px, 0.6vw, 9px) solid transparent;
    border-left: clamp(10px, 1.1vw, 16px) solid currentColor;
    transition: transform 0.3s cubic-bezier(0.76, 0, 0.24, 1);
    flex-shrink: 0;
}

.cat-header.is-open .cat-triangle {
    transform: rotate(90deg);
}


/* ── Titre de catégorie ── */
.cat-title {
    font-size: clamp(0.85rem, 1.6vw, 1.55rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.3;
}

/* ── Corps accordéon (animation grid) ── */
.cat-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s cubic-bezier(0.76, 0, 0.24, 1);
    padding-left: 0.9vw;
}

.cat-body.is-open {
    grid-template-rows: 1fr;
}

.cat-body-inner {
    overflow: hidden;
}

.cat-body-content {
    padding: clamp(0.8rem, 1.5vw, 1.2rem) 6rem clamp(1.2rem, 2.5vw, 2rem);
    border-left: 2px solid #ff6600;
    padding-left: clamp(0.8rem, 4vw, 10rem);
}

/* ── Paragraphe descriptif ── */
.cat-desc {
    font-size: clamp(0.6rem, 1.1vw, 1.5rem);
    color: #3a3a3a;
    line-height: 1.75;
    margin-bottom: clamp(0.8rem, 1.5vw, 1.2rem);
    text-align: justify;
}

/* ── Grille des 4 images ── */
.cat-images {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(6px, 1vw, 14px);
    width: clamp(80%, 80vw, 4000px);
}

.cat-img-card {
    border: 1px solid #000000;
    aspect-ratio: 7/8;
    overflow: hidden;
    position: relative;
    background: #f0f0f0;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.cat-img-card:hover {
    border-color: #ff6600;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.cat-img-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform-origin: top center;
    transition: transform 0.4s ease;
}

.cat-img-card:hover img {
    transform: scale(1.07);
}


.cat-img-card:hover .cat-img-label {
    transform: translateY(100%);
}

/* Placeholder si pas d'image */
.cat-img-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #999;
    font-size: clamp(0.65rem, 0.9vw, 0.8rem);
    text-align: center;
    padding: 0.5rem;
    width: 100%;
    height: 100%;
}

.cat-img-placeholder svg {
    width: clamp(24px, 3vw, 40px);
    height: auto;
    opacity: 0.35;
}

/* Le bandeau porte désormais la position, le fond et le padding */
.cat-img-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0.7rem 0.3rem;
    background: rgba(255, 255, 255, 0.92);
    text-align: center;
    transition: transform 0.35s ease;
}

.cat-img-card:hover .cat-img-caption {
    transform: translateY(100%);
}

/* Le label ne gère plus que sa typo */
.cat-img-label {
    display: block;
    font-size: clamp(0.65rem, 1.2vw, 2rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #000;
    line-height: 1.2;
}

.cat-img-sub {
    display: block;
    margin-top: 0.25em;
    font-size: clamp(0.55rem, 0.85vw, 1.3rem);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.35;
    color: #555;
}

.souscat-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.souscat-item > .cat-body > .cat-body-inner > .cat-body-content {
    padding-left: clamp(0.9rem, 3vw, 3rem);   /* retrait léger */
    padding-right: 0;
    border-left: 2px solid #949494;
}











/* ══════════════════════════════════════════════════════════
   PAGE ACTUALITÉS — A LA UNE / DERNIÈREMENT
   Remplace intégralement le bloc .main-actualites existant.
   ══════════════════════════════════════════════════════════ */

/* ── Conteneur de page ──────────────────────────────────────
   Les marges latérales ne sont plus portées par le <main> :
   elles sont déclarées ici en variables et appliquées aux
   seuls éléments concernés. Les titres de rubrique restent
   ainsi centrés sur la largeur réelle de la page.           */
.main-actualites {
    --marge-gauche: 6vw;

    margin: 6.5vw 0;
}

.main-actualites>h1 {
    margin-left: var(--marge-gauche);
}


/* ── Sections ───────────────────────────────────────────── */
.actu-section {
    margin-top: 3vw;
}

.actu-section--recentes {
    margin-top: 4vw;
    margin-bottom: 4vw;
}


/* ── Titre de rubrique — centré sur la page ─────────────── */
.actu-rubrique {
    text-align: center;
    color: #ff6600;
    text-transform: uppercase;
    font-size: clamp(1.7rem, 2vw, 2.1rem);
    font-weight: 800;
    letter-spacing: 0.1em;
    margin-bottom: 3.5vw;
}


/* ── Zone de contenu — porte les marges latérales ───────── */
/* ── Zone de contenu — porte les marges latérales ───────── */
.actu-zone {
    width: calc(100% - 2 * var(--marge-gauche));
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.actu-zone--pile {
    display: flex;
    flex-direction: column;
    gap: 4vw;
}


/* ── Fiche : socle commun ───────────────────────────────── */
.actu-fiche {
    display: flex;
    background: #ffffff;
    border: 1px solid #1d1d1d;
    max-width: 70vw;
}

.actu-fiche__contenu {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1vw;
    padding: 3vw;
}

.actu-fiche__date {
    font-size: clamp(0.75rem, 0.95vw, 0.95rem);
    color: var(--couleur-accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: bold;
}

.actu-fiche__titre {
    font-size: clamp(1.05rem, 2vw, 2rem);
    color: #1d1d1d;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.25;
}

.actu-fiche__texte {
    font-size: clamp(0.85rem, 1.15vw, 1.1rem);
    color: #3a3a3a;
    line-height: 1.7;
}


/* ── Variante avec photo ────────────────────────────────── */
/* La fiche remplit la zone : 6vw à gauche, 8vw à droite.
   La photo est affichée entière, jamais recadrée.           */
.actu-fiche--image {
    align-items: stretch;
}

.actu-fiche--image .actu-fiche__visuel {
    flex: 0 0 55%;
    display: flex;
    align-items: center;
}

.actu-fiche--image .actu-fiche__visuel img {
    display: block;
    width: 100%;
    height: auto;
}

.actu-fiche--image .actu-fiche__contenu {
    border-left: 4px solid #ff6600;
}


/* ── Variante sans photo — centrée dans la zone ─────────── */
.actu-fiche--texte {
    flex-direction: column;
    border-left: 4px solid #ff6600;
}


/* ── États chargement / erreur / vide ───────────────────── */
.main-actualites .actu-chargement,
.main-actualites .actu-erreur,
.main-actualites .actu-vide {
    padding: 3em 0;
    text-align: center;
    color: #999999;
    font-size: 0.9rem;
    font-style: italic;
    letter-spacing: 0.06em;
}

.main-actualites .actu-erreur {
    color: #cc3300;
}











/* ══════════════════════════════════════════════════════════
                        FICHE PRODUIT
   ══════════════════════════════════════════════════════════ */

.main-produit {
    margin: 8vw 6vw 5vw;
}

/* ── Fil d'Ariane ── */
.produit-fil {
    font-size: clamp(0.7rem, 0.9vw, 0.9rem);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #777777;
    margin-bottom: 2.5vw;
    font-weight: 700;
}

.produit-fil a {
    color: var(--couleur-accent);
    text-decoration: none;
}

.produit-fil a:hover {
    text-decoration: underline;
}

/* ── Fiche : galerie + infos ── */
.produit-fiche {
    display: flex;
    gap: clamp(1.5rem, 4vw, 4.5rem);
    align-items: flex-start;
}

/* Titre et catégorie dupliqués : une seule version visible selon la largeur d'écran */
.produit-titre-mobile,
.produit-categorie-mobile {
    display: none;
}

/* Galerie à gauche */
.produit-galerie {
    flex: 0 0 42%;
}

.produit-img-principale {
    border: 1px solid #000000;
    background: #f0f0f0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.produit-img-principale img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.produit-miniatures {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(6px, 0.8vw, 12px);
    margin-top: clamp(6px, 0.8vw, 12px);
}

.produit-miniature {
    border: 1px solid #999999;
    background: #f0f0f0;
    aspect-ratio: 1 / 1;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.produit-miniature img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.produit-miniature:hover {
    border-color: #ff6600;
}

.produit-miniature.is-active {
    border: 2px solid #ff6600;
}

/* Infos à droite */
.produit-infos {
    flex: 1;
}

.produit-categorie {
    font-size: clamp(0.7rem, 0.85vw, 0.85rem);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--couleur-accent);
    margin-bottom: 0.8vw;
}

.produit-desc {
    margin-top: 1.8vw;
    font-size: clamp(0.85rem, 1.15vw, 1.1rem);
    color: #3a3a3a;
    line-height: 1.75;
    text-align: justify;
}

.produit-caracs {
    margin-top: 2.2vw;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5em 2em;
    font-size: clamp(0.78rem, 1vw, 1rem);
    border-left: 2px solid #ff6600;
    padding-left: clamp(0.8rem, 1.5vw, 1.5rem);
}

.produit-caracs dt {
    font-weight: 700;
    color: #1d1d1d;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.85em;
    align-self: center;
    align-self: start;
}

.produit-caracs dd {
    color: #3a3a3a;
    margin: 0;
}

.carac-ligne {
    display: block;
}

.carac-ligne + .carac-ligne {
    margin-top: 0.6em;   /* espace entre les deux garanties — ajuste à ton goût */
}

.produit-actions {
    margin-top: 3vw;
    display: flex;
    gap: clamp(0.8rem, 1.5vw, 1.5rem);
    flex-wrap: wrap;
}

/* neutralise le margin-left hérité de la page d'accueil */
.produit-actions .btn-decouvrir {
    margin-left: 0;
}

/* ── Sections Similaires / Autres produits ── */
.produit-section {
    margin-top: 6vw;
}

.produit-rubrique {
    color: #1d1d1d;
    text-transform: uppercase;
    font-size: clamp(0.95rem, 1.6vw, 1.55rem);
    font-weight: 800;
    letter-spacing: 0.1em;
    margin-bottom: 2.5vw;
}

.produit-rubrique::after {
    content: "";
    display: block;
    width: 2.8em;
    height: 3px;
    background: #ff6600;
    margin-top: 0.3em;
}

/* ── Carrousel produits (3 cartes visibles) ── */
.prod-carrousel {
    --prod-gap: clamp(10px, 1.5vw, 20px);
    max-width: 62%;
    position: relative;
    display: flex;
    align-items: center;
    gap: 1vw;
}

/* Grille "Produits similaires" (sans carrousel) */
.prod-grille {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(10px, 1.5vw, 20px);
}

.prod-viewport {
    overflow: hidden;
    flex: 1;
}

.prod-track {
    display: flex;
    gap: var(--prod-gap);
    transition: transform 0.45s ease;
    will-change: transform;
}

.prod-carte {
    flex: 0 0 calc((100% - 2 * var(--prod-gap)) / 3);
    display: block;
    text-decoration: none;
    color: inherit;
    border: 1px solid #000000;
    aspect-ratio: 7 / 8;
    position: relative;
    overflow: hidden;
    background: #f0f0f0;
}

.prod-carte img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.prod-carte:hover img {
    transform: scale(1.06);
}

.prod-carte:hover .cat-img-label {
    transform: translateY(100%);
}

/* ── États d'erreur ── */
.produit-erreur {
    padding: 3em 0 1em;
    text-align: center;
    color: #cc3300;
    font-style: italic;
    letter-spacing: 0.06em;
}

.produit-erreur-lien {
    text-align: center;
}

.produit-erreur-lien a {
    color: var(--couleur-accent);
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.85rem;
}

.produit-erreur-lien a:hover {
    text-decoration: underline;
}

/* ── Cartes de l'accordéon produits.html devenues des liens ── */
a.cat-img-card {
    display: block;
    text-decoration: none;
    color: inherit;
}












/* ══════════════════════════════════════════════════════════
                        MENTIONS LEGALES
   ══════════════════════════════════════════════════════════ */



.main-mentions {
    margin: 7vw 6vw;
    max-width: 62vw;
}


.main-mentions h1::after {
    content: "";
    display: block;
    width: 4em;
    height: 4px;
    background: #ff6600;
    margin-top: 0.8vw;
}

.main-mentions h2,
.main-mentions .sous-titre-section {
    margin-top: 2vw;
    margin-bottom: 1.5vw;
}

.main-mentions p {
    margin-right: 0;
    text-align: justify;
    font-size: clamp(0.85rem, 1.1vw, 1.1rem);
    line-height: 1.75;
    color: #3a3a3a;
}

.main-mentions ul {
    list-style: none;
    margin-top: 1vw;
    padding-left: 0;
}

.main-mentions ul li {
    position: relative;
    padding-left: 1.4em;
    font-size: clamp(0.85rem, 1.1vw, 1.1rem);
    line-height: 1.9;
    color: #3a3a3a;
}

.main-mentions ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.75em;
    width: 8px;
    height: 8px;
    background: #ff6600;
}

.main-mentions ul li b,
.main-mentions p b {
    color: #1d1d1d;
    font-weight: 700;
}

.main-mentions a {
    color: var(--couleur-accent);
    text-decoration: none;
    font-weight: 600;
}

.main-mentions a:hover {
    text-decoration: underline;
}


#titre-confidentialité {
    margin-top: 4vw;
}

















.subcat-item {
    margin-left: 30px;
}

.subcat-item .cat-title {
    font-size: 0.95rem;
}







/* ══════════════════════════════════════════════════════════
                    CONFIGURATEUR DE PRODUITS
   ══════════════════════════════════════════════════════════ */


#html-configurateur,
#body-configurateur {
    background: var(--texte-blanc);
    font-size: 1.05vw;
}

form {
    background-color: var(--gris-fond-form);
    color: var(--texte-blanc);
    width: var(--milieu-page);
    height: 100%;
    padding: 5vw 2.2vw 1vw 6.5vw;
    border-right: 5px solid black;
}

/* ── Pied de page du configurateur ──────────────────────────
   Le panneau de droite (.rect-droite, #references-configuration,
   #bouton-reinitialiser, #apercu-3d) est en position: fixed avec
   un z-index <= 1. Le <footer> (position: relative; z-index: 20,
   fond opaque) est dans le flux, après le formulaire : en bas de
   page il remonte donc PAR-DESSUS ces éléments fixes et les
   recouvre au fur et à mesure du défilement. Il faut seulement
   laisser au formulaire un peu d'air en bas : la courbe du footer
   (.footer-curve, 60px) déborde sur le bas du formulaire. */
#body-configurateur form {
    padding-bottom: 6vw;
}

#body-configurateur footer {
    width: 100%;
    background: #f5f5f5;
    /* Empêche la marge basse de .footer-mentions de ressortir du footer
       (sinon une bande de 6px apparaît sous lui et laisse voir le
       panneau fixe de droite). */
    display: flow-root;
}

#titre-configurateur {
    margin-top: 2.5vw;
    margin-bottom: 0.75vw;
}

.questionnaire {
    border: 1px solid var(--gris-bordure);
    border-radius: 5px;
    padding: 0.7vw 0.9vw;
    margin-top: 0.6vw;
}

.nom-questionnaire {
    font-weight: bold;
    margin-bottom: 0.35vw;
    font-size: 0.95vw;
}

/* ============================================================
   RANGÉE COMPACTE : titre + contrôle alignés sur la même ligne.
   Utilisée pour "Nombre de compteurs" et "Ma combinaison".
   ============================================================ */
.rangee-compacte {
    display: flex;
    align-items: center;
    gap: 1vw;
    flex-wrap: nowrap;
}

.rangee-compacte .nom-questionnaire {
    margin-bottom: 0;
    white-space: nowrap;
    flex: 0 0 auto;
}

.rangee-compacte > fieldset,
.rangee-compacte > select {
    flex: 1 1 auto;
    min-width: 0;
}

/* ============================================================
   SELECT stylisé
   ============================================================ */
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--gris-fond-select);
    color: var(--texte-blanc);
    font-family: inherit;
    font-size: 0.95vw;
    font-weight: 500;
    padding: 0.5vw 2.2vw 0.5vw 0.8vw;
    border: 1px solid var(--gris-bordure-select);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6600' stroke-width='3'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.7vw center;
    background-size: 0.9vw;
    width: 100%;
}

select:hover {
    border-color: var(--couleur-accent);
    background-color: var(--gris-fond-select-hover);
}

select:focus-visible {
    outline: none;
    border-color: var(--couleur-accent);
    box-shadow: 0 0 0 3px var(--couleur-accent-glow-focus);
}

select option {
    background-color: var(--gris-fond-form);
    color: var(--texte-blanc);
}

/* ============================================================
   RADIOS "PILULE" (technique commune) :
   nb-compteur, nb-entree, nb-sortie partagent exactement le même
   mécanisme — input invisible en position absolute au-dessus
   d'un label stylé en pilule, avec les mêmes états hover/checked/
   focus. Seules les tailles/typos diffèrent légèrement entre
   nb-compteur (plus grand) et nb-entree/nb-sortie (plus compact),
   donc on factorise le commun ici et on garde deux petits blocs
   de tailles séparés plus bas.
   ============================================================ */
#fieldset-nb-compteur,
#fieldset-nb-entree,
#fieldset-nb-sortie {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5vw;
    border: none;
    padding: 0;
    margin: 0;
}

#fieldset-nb-entree,
#fieldset-nb-sortie {
    padding-bottom: 1vw;
    margin: 0vw 5vw;
    border-bottom: 1px solid #5c5c5c;

}

#fieldset-nb-compteur div,
#fieldset-nb-entree div,
#fieldset-nb-sortie div {
    position: relative;
}

#fieldset-nb-compteur input[type="radio"],
#fieldset-nb-entree input[type="radio"],
#fieldset-nb-sortie input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

#fieldset-nb-compteur input[type="radio"]:disabled,
#fieldset-nb-entree input[type="radio"]:disabled,
#fieldset-nb-sortie input[type="radio"]:disabled {
    cursor: not-allowed;
}

#fieldset-nb-compteur input[type="radio"]:disabled + label,
#fieldset-nb-entree input[type="radio"]:disabled + label,
#fieldset-nb-sortie input[type="radio"]:disabled + label {
    cursor: not-allowed;
}

#fieldset-nb-compteur label,
#fieldset-nb-entree label,
#fieldset-nb-sortie label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border: 2px solid var(--gris-bordure-radio);
    border-radius: 6px;
    background: var(--texte-blanc);
    color: var(--texte-fonce);
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: var(--transition-radio-pill);
}

#fieldset-nb-compteur input[type="radio"]:hover:not(:disabled):not(:checked) + label,
#fieldset-nb-entree input[type="radio"]:hover:not(:disabled):not(:checked) + label,
#fieldset-nb-sortie input[type="radio"]:hover:not(:disabled):not(:checked) + label {
    border-color: var(--couleur-accent);
    background: var(--couleur-accent-clair);
    box-shadow: 0 0 0 4px var(--couleur-accent-glow-legere);
    transform: translateY(-1px);
}

#fieldset-nb-compteur input[type="radio"]:checked + label,
#fieldset-nb-entree input[type="radio"]:checked + label,
#fieldset-nb-sortie input[type="radio"]:checked + label {
    border-color: var(--couleur-accent);
    background: var(--couleur-accent);
    color: var(--texte-blanc);
    box-shadow: 0 0 0 2px var(--couleur-accent-glow-forte);
}

#fieldset-nb-compteur input[type="radio"]:focus-visible + label,
#fieldset-nb-entree input[type="radio"]:focus-visible + label,
#fieldset-nb-sortie input[type="radio"]:focus-visible + label {
    outline: 2px solid var(--couleur-accent);
    outline-offset: 2px;
}

/* Tailles spécifiques : nb-compteur est un peu plus grand que
   nb-entree/nb-sortie (comportement d'origine conservé). */
#fieldset-nb-compteur {
    gap: 20px;
    justify-content: center;
}

#fieldset-nb-compteur label {
    min-width: 42px;
    height: 42px;
    padding: 0 14px;
}

#fieldset-nb-entree label,
#fieldset-nb-sortie label {
    min-width: 34px;
    height: 34px;
    font-size: 0.9vw;
}

/* ============================================================
   STYLE POUR LES CASES "VERSION"
   Grille responsive : autant de colonnes que la largeur permet,
   jusqu'à 5 par ligne max. Chaque case entière est cliquable
   grâce à un label positionné en absolute par-dessus (même
   technique que pour nb_compteur), donc pas besoin de modifier
   le HTML existant.
   ============================================================ */

#fieldset-version {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    max-width: 100%;
    border: none;
    padding: 0;
    margin: 0;
}

/* Limite réelle à 4 colonnes sur grand écran */
@media (min-width: 900px) {
    #fieldset-version {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* En dessous, on repasse à 2 colonnes si la place manque */
@media (max-width: 899px) {
    #fieldset-version {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Remplace la règle existante #fieldset-version > div (transition + ajouts) */
#fieldset-version > div {
    position: relative;
    aspect-ratio: 3 / 4;
    border: 2px solid var(--gris-bordure-radio);
    border-radius: 8px;
    background: var(--texte-blanc);
    overflow: visible;
    transform-origin: center center;
    transition: border-color 0.25s ease, background-color 0.25s ease,
                box-shadow 0.25s ease, transform 0.2s ease;
}

/* Zoom de la carte entière, même si elle est déjà cochée */
#fieldset-version > div:not(:has(input[type="radio"]:disabled)):hover {
    transform: scale(1.12);
}

/* Élévation : la carte survolée (ou dont le "i" est survolé/focus)
   passe devant toutes les autres */
#fieldset-version > div:hover,
#fieldset-version > div:focus-within,
#fieldset-version > div:has(.version-info:hover) {
    z-index: 10;
}

#fieldset-version input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: 2;
    cursor: pointer;
}

#fieldset-version input[type="radio"]:disabled {
    cursor: not-allowed;
}

#fieldset-version input[type="radio"]:disabled + label {
    cursor: not-allowed;
}

#fieldset-version > div:not(:has(input[type="radio"]:disabled)):not(:has(input[type="radio"]:checked)):hover {
    border-color: var(--couleur-accent);
    background: var(--couleur-accent-clair);
    box-shadow: 0 0 0 4px var(--couleur-accent-glow-legere);
}

#fieldset-version label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 8px 8px;
    color: var(--texte-fonce);
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    user-select: none;
    border-radius: 6px;
    z-index: 1;
}

#fieldset-version label::before {
    content: attr(data-label);
}

#fieldset-version label .version-image {
    margin-top: 8px;
    width: 100%;
    flex: 1;
    border: 1px dashed var(--gris-bordure-image-placeholder);
    border-radius: 4px;
    background: var(--gris-fond-image-placeholder);
    background-size: cover;
    background-position: center;
}

#fieldset-version input[type="radio"]:checked ~ label,
#fieldset-version > div:has(input[type="radio"]:checked) {
    border-color: var(--couleur-accent);
    color: var(--couleur-accent);
}

#fieldset-version > div:has(input[type="radio"]:checked) {
    background: var(--couleur-accent-clair);
    box-shadow: 0 0 0 2px var(--couleur-accent-glow-forte);
}

#fieldset-version input[type="radio"]:checked + label .version-image {
    border-color: var(--couleur-accent);
}

#fieldset-version input[type="radio"]:focus-visible + label {
    outline: 2px solid var(--couleur-accent);
    outline-offset: 2px;
}

.version-info {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--couleur-accent);
    color: var(--couleur-accent);
    background: var(--texte-blanc);
    font-size: 13px;
    font-weight: bold;
    font-style: italic;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    cursor: help;
}

.version-info .version-tooltip {
    position: absolute;
    top: 26px;
    right: 0;
    width: 200px;
    background: var(--gris-fond-form);
    color: var(--texte-blanc);
    font-weight: normal;
    font-style: normal;
    font-size: 12px;
    line-height: 1.4;
    padding: 8px 10px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
    z-index: 4;
}

.version-info:hover .version-tooltip,
.version-info:focus .version-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* fin cases VERSION */

/* ============================================================
   LIGNE UNIFIÉE ENTRÉE / SORTIE
   Deux colonnes (Entrée | Sortie), chacune avec son eyebrow
   au-dessus, le nombre et le diamètre PEHD alignés en dessous.
   ============================================================ */
.ligne-e-s {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1.4vw;
    align-items: stretch;
}

.separateur-e-s {
    width: 2px;
    background: linear-gradient(
        to bottom,
        transparent,
        var(--gris-bordure) 15%,
        var(--gris-bordure) 85%,
        transparent
    );
    align-self: stretch;
}

.colonne-e-s {
    display: flex;
    flex-direction: column;
    gap: 0.5vw;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--gris-bordure);
    border-radius: 8px;
    padding: 1vw 0.9vw;
}

.eyebrow-e-s {
    text-align: center;
    text-transform: uppercase;
    font-size: 0.78vw;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--couleur-accent);
    padding-bottom: 0.5vw;
    margin-bottom: 0.2vw;
    border-bottom: 1px solid var(--gris-bordure);
}

.colonne-e-s .nom-questionnaire {
    text-align: center;
    margin-top: 0.3vw;
}

.colonne-e-s fieldset,
.ligne-e-s fieldset {
    display: flex;
    justify-content: center;
}

.references-configuration {
  position: fixed;
  
}
/* ============================================================
   ROBINETTERIE — lignes de 5 cases (1 ligne par compteur)
   Généré par script.js (construireRobinetterie). Cases 1/5 =
   récap PEHD, case 3 = compteur (DN), cases 2/4 = à venir.
   ============================================================ */
#robinetterie-lignes {
    display: flex;
    flex-direction: column;
    gap: 1.2vw;
    margin-top: 0.6vw;
}

.robinetterie-vide {
    color: var(--texte-blanc);
    opacity: 0.7;
    font-style: italic;
    font-size: 0.95vw;
}

.robinetterie-ligne {

    padding-top: 0.5vw;
}


/* Grille UNIQUE : 5 colonnes × (1 ligne par compteur). Chaque case est
   positionnée en inline (grid-column / grid-row) par script.js ; les cases
   "Entrée PEHD" peuvent fusionner plusieurs lignes (grid-row: span N)
   quand nb_entree < nb_compteur. */
.robinetterie-grille {
    /* Hauteur de la rangée de contrôles (boutons Aucun/Robinet, selects de
       type). Les cartes qui n'en ont pas la réservent quand même via un
       cale-vide — c'est ce qui aligne les images des 5 colonnes. */
    --hauteur-controles: 2.4vw;
    display: grid;
    /* Les colonnes 2 et 4 (robinetterie) portent deux selects côte à côte et
       un select marque : elles ont besoin de plus de place que les récaps
       PEHD (col. 1 et 5) et le compteur (col. 3), qui n'affichent qu'une
       image et une valeur courte. */
    grid-template-columns: 0.8fr 1.4fr 0.8fr 1.4fr 0.8fr;
    gap: 0.9vw;
    align-items: stretch;
}

.robinetterie-case {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5vw;
    text-align: center;
    background: var(--gris-fond-select);
    border: 1px solid var(--gris-bordure);
    border-radius: 8px;
    padding: 0.9vw 0.7vw;
    min-height: 8vw;
}

/* Wrapper autour de Avant/Compteur/Après d'une même ligne (voir
   construireRobinetterie > script.js). En desktop, `display: contents`
   le rend transparent à la grille : ses 3 enfants continuent d'être
   placés individuellement via leur grid-column/grid-row inline, exactement
   comme avant son introduction. Il ne prend forme visuelle qu'en mobile
   (media query plus bas), où il devient la carte qui regroupe les 3 cases
   d'un même compteur. */
.rob-groupe-compteur {
    display: contents;
}

/* Image centrale de chaque case (chemins provisoires, à remplacer).
   Le texte ne passe jamais dessus : l'image occupe sa propre rangée du
   flux vertical et repousse ce qui suit (Marque : + select). */
.case-image {
    display: block;
    width: 70%;
    /* HAUTEUR FIXE, pas max-height : avec un simple maximum, chaque SVG
       occupe la hauteur que lui donne son ratio (robinet.svg et clapet.svg
       n'ont pas les mêmes proportions), donc la bande image ne commence ni
       ne finit au même endroit d'une carte à l'autre. En figeant la boîte et
       en laissant object-fit: contain gérer l'intérieur, toutes les images
       occupent la même bande verticale, quel que soit leur ratio. */
    height: 4.5vw;
    object-fit: contain;
    margin: 0.3vw auto;
}

/* Cartes sans rangée de contrôles (Entrée/Sortie PEHD, Compteur) : elles
   réservent malgré tout la même bande, sinon leur image remonte d'une
   rangée entière par rapport aux cartes robinetterie et rien n'est aligné.
   La case PEHD fusionnée en est exclue : elle couvre plusieurs lignes et
   centre son image sur toute la hauteur. */
.case-compteur::before,
.case-pehd:not(.case-fusion)::before {
    content: "";
    display: block;
    width: 100%;
    height: var(--hauteur-controles);
}

/* Un ::before est le PREMIER enfant flex : sans ça, le cale-vide se place
   au-dessus du titre et le fait descendre. On remonte donc le titre d'un
   cran (order: -1) pour retrouver l'ordre voulu — titre, cale, image,
   valeur — sans avoir à toucher au HTML généré par script.js. */
.case-compteur > .case-titre,
.case-pehd > .case-titre {
    order: -1;
}

/* Case PEHD fusionnée (entrée ou sortie couvrant plusieurs lignes) :
   l'image reste au centre vertical de la grande case, la valeur descend
   en bas (comme la maquette). */
.case-fusion {
    justify-content: space-between;
}

.case-fusion .case-image {
    margin: auto;
    height: auto;
    max-height: 8vw;
}

.case-titre {
    font-weight: 700;
    font-size: 0.9vw;
    line-height: 1.25;
    color: var(--texte-blanc);
}

/* Titre seul (cartes PEHD et compteur) : même hauteur réservée que le
   bandeau .case-entete des cartes robinetterie, pour que les cinq colonnes
   d'une ligne démarrent leur image au même niveau. */
.robinetterie-case > .case-titre {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    min-height: 2.4vw;
}

.case-valeur {
    margin-top: auto;
    font-size: 1.5vw;
    font-weight: 600;
    color: var(--texte-blanc);
    letter-spacing: 0.01em;
}

/* Case compteur (centrale) : plus d'accent permanent — le liseré orange
   de guidage (.etape-active, en fin de fichier) se pose désormais sur les
   cases de ROBINETTERIE avant/après, pas sur le compteur. */

/* ============================================================
   CASES 2 & 4 — ROBINETTERIE (avant / après compteur)
   Entête = case à cocher jumelée + titre. En dessous : radios
   pilule, puis "Marque :" et le select des marques.
   ============================================================ */
.case-robinetterie {
    justify-content: flex-start;
    gap: 0.55vw;
}

.case-entete {
    display: flex;
    align-items: flex-start;
    gap: 0.4vw;
    width: 100%;
    /* Deux lignes de titre réservées d'office : la bande de contrôles, puis
       l'image, démarrent alors au même Y que le titre tienne sur une ou deux
       lignes. */
    min-height: 2.4vw;
}

.case-entete .case-titre {
    flex: 1;
    text-align: left;
    line-height: 1.2;
}

/* Case à cocher (état actif jumelé) */
.rob-check {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 1.1vw;
    height: 1.1vw;
    min-width: 15px;
    min-height: 15px;
    margin-top: 0.15vw;
    border: 2px solid var(--couleur-accent);
    border-radius: 4px;
    background: var(--texte-blanc);
    cursor: pointer;
    position: relative;
    transition: background-color 0.2s ease;
}

.rob-check:checked {
    background: var(--couleur-accent);
}

.rob-check:checked::after {
    content: "";
    position: absolute;
    left: 30%;
    top: 8%;
    width: 32%;
    height: 58%;
    border: solid var(--texte-blanc);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.rob-check:focus-visible {
    outline: 2px solid var(--couleur-accent);
    outline-offset: 2px;
}

/* Radios en boutons pilule (Aucun/Robinet, Robinet/Clapet) */
.rob-radios {
    display: flex;
    gap: 0.35vw;
    width: 100%;
    height: var(--hauteur-controles);
    justify-content: center;
}

.rob-radios label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Taille UNIFORME pour les 4 boutons (Aucun / Robinet / Robinet
       clapet intégré / Clapet) : chaque bouton prend la moitié de la
       largeur de sa carte (flex: 1) et la hauteur mini est calée sur le
       plus grand d'entre eux, "Robinet (clapet intégré)" sur 2 lignes. */
    flex: 1 1 0;
    height: 100%;
    padding: 0.25vw 0vw;
    border-radius: 6px;
    background: #d9d9d9;
    color: var(--texte-fonce);
    font-size: 0.78vw;
    font-weight: 600;
    line-height: 1.1;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.rob-radios input[type="radio"] {
    display: none;
}

.rob-radios label:hover:not(:has(input:checked)) {
    background: #c9c9c9;
}

.rob-radios label:has(input:checked) {
    background: var(--couleur-accent);
    color: var(--texte-blanc);
}

/* Case 4 : les deux SELECT de type (Robinet clapet intégré / Clapet) qui ont
   remplacé les radios. Même gabarit que .rob-radios : côte à côte, moitié de
   la largeur de la carte chacun. Chaque select liste ses sous-types
   disponibles (purgeurs / bouchons). */
.rob-types {
    display: flex;
    gap: 0.35vw;
    width: 100%;
    height: var(--hauteur-controles);
    justify-content: center;
}

.rob-type {
    flex: 1 1 0;
    min-width: 0; /* sinon la largeur mini d'un select fait déborder la carte */
    height: 100%;
    /* Chevron resserré (voir background-position/size plus bas) : chaque
       dixième de vw gagné à droite est du texte visible en plus sur un
       select aussi étroit. */
    padding: 0.3vw 1.1vw 0.3vw 0.45vw;
    border-radius: 6px;
    /* Même habillage que les autres selects du configurateur (combinaison,
       marque...) : fond sombre, texte blanc, bordure grise. Le fond clair
       en pilule est abandonné — c'est lui qui rendait la liste déroulée
       blanche alors que tous les autres menus sont sombres. */
    border: 1px solid var(--gris-bordure-select);
    background-color: var(--gris-fond-select);
    color: var(--texte-blanc);
    font-size: 0.78vw;
    font-weight: 600;
    /* Texte coupé proprement plutôt qu'au milieu d'une lettre. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-position: right 0.35vw center;
    background-size: 0.7vw;
    cursor: pointer;
}

/* Liste déroulée : mêmes couleurs que le select fermé (sinon le navigateur
   dessine un menu clair sur une page sombre) et de la marge de chaque côté
   du libellé, comme sur le select des combinaisons. */
.rob-type option {
    background-color: var(--gris-fond-select);
    color: var(--texte-blanc);
    font-weight: 500;
    /* margin n'a aucun effet sur un <option> (le navigateur dessine la liste
       lui-même) : c'est le padding qui crée la marge entre le texte et le
       bord du menu. Padding-right un peu plus large que le gauche, pour que
       le libellé ne colle pas à la bordure droite du menu déroulé. */
    padding: 0.5em 1.4em 0.5em 0.9em;
}

.rob-type option:disabled {
    color: #8a8a8a;
}

.rob-type:hover:not(:disabled) {
    border-color: var(--couleur-accent);
    background-color: var(--gris-fond-select-hover);
}

/* Un type effectivement choisi se distingue, comme la radio cochée avant.
   L'accent passe par la bordure et non par le fond : le libellé sélectionné
   ("Clapet bouchons") reste lisible et la liste déroulée garde ses couleurs. */
.rob-type:has(option:checked:not([value=""])) {
    border-color: var(--couleur-accent);
    box-shadow: inset 0 0 0 1px var(--couleur-accent);
}

.rob-type:disabled {
    cursor: not-allowed;
}

.rob-type:focus-visible {
    outline: none;
    border-color: var(--couleur-accent);
    box-shadow: 0 0 0 3px var(--couleur-accent-glow-focus);
}

/* Le select marque hérite du style global des <select> ; on l'ajuste juste
   pour l'espace réduit des cartes. */
.rob-marque {
    font-size: 0.8vw;
    padding: 0.35vw 1.8vw 0.35vw 0.6vw;
}
/* ============================================================
   AVERTISSEMENT URL — toast flottant
   Affiché quand des choix d'un lien partagé n'ont pas pu être
   restaurés (valeurs obsolètes/incohérentes). Reste visible en
   haut à droite quel que soit le scroll, avec bouton ✕.
   ============================================================ */
#avertissement-url {
    position: fixed;
    top: 1.2vw;
    right: 1.2vw;
    max-width: 26vw;
    min-width: 260px;
    z-index: 1000;
    background: #5a3d1a;
    color: var(--texte-blanc);
    border: 2px solid var(--couleur-accent);
    border-radius: 8px;
    padding: 0.8vw 2.4vw 0.8vw 1vw;
    font-size: 0.85vw;
    line-height: 1.45;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    animation: avertissement-apparition 0.25s ease-out;
}

@keyframes avertissement-apparition {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

#avertissement-url .avertissement-fermer {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--texte-blanc);
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#avertissement-url .avertissement-fermer:hover {
    background: rgba(255, 255, 255, 0.15);
}
/* ============================================================
   BARRE DE RÉFÉRENCES — 10 boîtes séparées par des points
   Chaque .reference-boite est remplie par script.js
   (mettreAJourReferences) : première référence + chevron si
   plusieurs ; le survol déroule la liste complète (faux select,
   non cliquable, purement informatif).
   ============================================================ */
#references-configuration h2 {
    margin-top: 0;
    text-transform: none;
    font-size: 1.15vw;
}

#references-configuration {
    position: fixed;
    right: 0.7vw;
    bottom: 3vw;
    border: 1px solid var(--gris-bordure);
    border-radius: 8px;
    padding: 0.9vw 1.1vw 1.3vw;
    margin-top: 1.2vw;
    background: var(--gris-fond-form);
    z-index: 1;
}

#references-configuration h2 {
    margin-top: 0;
    text-transform: none;
    font-size: 1.15vw;
}

/* Le trait décoratif global des h2 (h2::after) est trop large ici :
   on le remplace par un souligné court, collé au titre. */
#references-configuration h2::after {
    position: static;
    display: block;
    width: 4.5vw;
    height: 2px;
    margin-top: 0.25vw;
    left: auto;
    background-color: var(--couleur-accent);
}

#references-boites {
    display: grid;
    align-items: flex-start;
    gap: 0.8vw;
    flex-wrap: wrap;
    grid-template-columns: repeat(5, 1fr);
}

.reference-boite {
    position: relative;
    flex: 0 0 auto;
    min-width: 5.2vw;
    min-height: 2.3vw;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.3vw 0.6vw;
    background: var(--gris-fond-select);
    border: 1px solid #9c9c9c;
    border-radius: 4px;
    box-sizing: border-box;
}


.ref-affichage {
    display: inline-flex;
    align-items: center;
    gap: 0.35vw;
    font-size: 1.05vw;
    font-weight: 700;
    color: var(--texte-blanc);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.ref-chevron {
    color: var(--couleur-accent);
    font-size: 0.7vw;
    font-weight: 700;
    line-height: 1;
    transform: translateY(1px);
}

/* Liste déroulante (visible au survol de la boîte) */
.ref-liste {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 100%;
    margin: 0;
    padding: 0.3vw 0;
    list-style: none;
    background: #cfcfcf;
    border: 1px solid #9c9c9c;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
    z-index: 50;
    max-height: 14vw;
    overflow-y: auto;
}

.reference-boite.a-liste:hover .ref-liste,
.reference-boite.a-liste:focus-within .ref-liste {
    display: block;
}

.ref-liste li {
    padding: 0.25vw 0.7vw;
    font-size: 1vw;
    font-weight: 700;
    color: var(--texte-fonce);
    text-align: center;
    white-space: nowrap;
}



/* ============================================================
   BOUTON "RÉINITIALISER MES CHOIX" + MODALE DE CONFIRMATION
   L'overlay #modale-reinit couvre tout l'écran et FLOUTE ce qui
   est derrière (backdrop-filter). La boîte est centrée dessus.
   ============================================================ */
#bouton-reinitialiser {
    display: block;
    position: fixed;
    right: 11vw;
    bottom: 14vw;
    margin-left: auto;
    padding: 0.45vw 1vw;
    font-family: inherit;
    font-size: 0.9vw;
    font-weight: 600;
    color: var(--texte-blanc);
    background: var(--gris-fond-form);
    border: 2px solid var(--couleur-accent);
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    z-index: 1;
}

#bouton-reinitialiser:hover {
    background: var(--couleur-accent);
    box-shadow: 0 0 0 3px var(--couleur-accent-glow-legere);
}

#bouton-reinitialiser:focus-visible {
    outline: 2px solid var(--couleur-accent);
    outline-offset: 2px;
}

#modale-reinit {
    position: fixed;
    inset: 0;
    z-index: 2000;
    touch-action: none;   /* ← ajout : bloque le glissement au doigt */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: avertissement-apparition 0.2s ease-out;
}

#modale-reinit[hidden] {
    display: none;
}

#modale-reinit .modale-boite {
    right: 0px;
    background: var(--gris-fond-form);
    color: var(--texte-blanc);
    border: 2px solid var(--couleur-accent);
    border-radius: 10px;
    padding: 1.6vw 2vw;
    max-width: 30vw;
    min-width: 300px;
    text-align: center;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.5);
}

.modale-titre {
    font-size: 1.1vw;
    font-weight: 700;
    margin-bottom: 0.6vw;
}

.modale-texte {
    font-size: 0.9vw;
    opacity: 0.85;
    margin-bottom: 1.3vw;
}

.modale-boutons {
    display: flex;
    justify-content: center;
    gap: 1vw;
}

.modale-boutons button {
    font-family: inherit;
    font-size: 0.9vw;
    font-weight: 600;
    padding: 0.5vw 1.3vw;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

#modale-reinit-confirmer {
    background: var(--couleur-accent);
    color: var(--texte-blanc);
    border: 2px solid var(--couleur-accent);
}

#modale-reinit-confirmer:hover {
    box-shadow: 0 0 0 3px var(--couleur-accent-glow-forte);
}

#modale-reinit-annuler {
    background: transparent;
    color: var(--texte-blanc);
    border: 2px solid var(--gris-bordure);
}

#modale-reinit-annuler:hover {
    border-color: var(--texte-blanc);
}

.modale-boutons button:focus-visible {
    outline: 2px solid var(--couleur-accent);
    outline-offset: 2px;
}




/* ============================================================
   SECTION 3. CORPS — radios pilule (mêmes états que nb-compteur)
   + sous-libellé de plage (600 - 750 mm) sous le nom du modèle.
   ============================================================ */
#fieldset-corps-taille,
#fieldset-corps-compact,
#fieldset-corps-modele,
.fieldset-pilules {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
    border: none;
    padding: 0;
    margin: 0;
}

#fieldset-corps-taille div,
#fieldset-corps-compact div,
#fieldset-corps-modele div,
.fieldset-pilules div {
    position: relative;
}

#fieldset-corps-taille input[type="radio"],
#fieldset-corps-compact input[type="radio"],
#fieldset-corps-modele input[type="radio"],
.fieldset-pilules input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

#fieldset-corps-taille input[type="radio"]:disabled,
#fieldset-corps-compact input[type="radio"]:disabled,
#fieldset-corps-modele input[type="radio"]:disabled,
.fieldset-pilules input[type="radio"]:disabled,
#fieldset-corps-taille input[type="radio"]:disabled + label,
#fieldset-corps-compact input[type="radio"]:disabled + label,
#fieldset-corps-modele input[type="radio"]:disabled + label,
.fieldset-pilules input[type="radio"]:disabled + label {
    cursor: not-allowed;
}

#fieldset-corps-taille label,
#fieldset-corps-compact label,
#fieldset-corps-modele label,
.fieldset-pilules label {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 8.5vw;
    min-height: 50px;
    padding: 6px 24px;
    border: 2px solid var(--gris-bordure-radio);
    border-radius: 8px;
    background: var(--texte-blanc);
    color: var(--texte-fonce);
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    transition: var(--transition-radio-pill);
}

#fieldset-corps-taille input[type="radio"]:hover:not(:disabled):not(:checked) + label,
#fieldset-corps-compact input[type="radio"]:hover:not(:disabled):not(:checked) + label,
#fieldset-corps-modele input[type="radio"]:hover:not(:disabled):not(:checked) + label,
.fieldset-pilules input[type="radio"]:hover:not(:disabled):not(:checked) + label {
    border-color: var(--couleur-accent);
    background: var(--couleur-accent-clair);
    box-shadow: 0 0 0 4px var(--couleur-accent-glow-legere);
    transform: translateY(-1px);
}

#fieldset-corps-taille input[type="radio"]:checked + label,
#fieldset-corps-compact input[type="radio"]:checked + label,
#fieldset-corps-modele input[type="radio"]:checked + label,
.fieldset-pilules input[type="radio"]:checked + label {
    border-color: var(--couleur-accent);
    background: var(--couleur-accent);
    color: var(--texte-blanc);
    box-shadow: 0 0 0 2px var(--couleur-accent-glow-forte);
}

#fieldset-corps-taille input[type="radio"]:focus-visible + label,
#fieldset-corps-compact input[type="radio"]:focus-visible + label,
#fieldset-corps-modele input[type="radio"]:focus-visible + label,
.fieldset-pilules input[type="radio"]:focus-visible + label {
    outline: 2px solid var(--couleur-accent);
    outline-offset: 2px;
}

/* Sous-libellé de plage (ex: "600 - 750 mm") sous le nom du modèle */
.corps-modele-plage {
    display: block;
    font-size: 0.68vw;
    font-style: italic;
    font-weight: 500;
    line-height: 1.1;
}

/* Le "i" info hérite du style .version-info ; ici il est dans le flux du
   titre (pas en absolu dans une carte version), donc on le repositionne. */
.corps-info {
    position: relative;
    display: inline-flex;
    top: auto;
    right: auto;
    margin-left: 0.4vw;
    vertical-align: middle;
}

.corps-info .version-tooltip {
    top: 26px;
    left: 0;
    right: auto;
    width: 220px;
}

/* Image d'illustration dans l'info-bulle (chemin à remplir plus tard).
   Cachée tant que src est vide, pour éviter l'icône d'image cassée. */
.corps-tooltip-image {
    display: block;
    width: 100%;
    margin-top: 6px;
    border-radius: 4px;
}
.corps-tooltip-image[src=""] {
    display: none;
}


/* ============================================================
   SECTION 4. COUVERCLE
   - En-tête : titre à gauche + case "Sans couvercle" à droite
   - #couv-position : image de fond position-couvercle.webp,
     boutons de résistance posés en ABSOLU par-dessus.
     → AJUSTER les positions dans les classes .couv-pos-* ci-dessous
       (left/top en %, relatifs à l'image).
   - Le style "pilule" des boutons est hérité de .fieldset-pilules
     (voir la section 3. CORPS plus haut : une seule source de vérité).
   ============================================================ */
.couv-entete {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1vw;
    margin-bottom: 0.8vw;
}

.couv-sans-label {
    display: inline-flex;
    align-items: center;
    gap: 0.6vw;
    font-weight: 700;
    font-size: 0.95vw;
    color: var(--texte-blanc);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.couv-sans-label input[type="checkbox"] {
    width: 22px;
    height: 22px;
    cursor: pointer;
    accent-color: var(--couleur-accent);
}

/* Conteneur image + boutons en absolu */
#couv-position {
    position: relative;
    width: 100%;
    /* Ratio de l'image : à ajuster si position-couvercle.webp change.
       aspect-ratio garantit une hauteur correcte AVANT le chargement
       de l'image (pas de saut de mise en page). */
    aspect-ratio: 1024 / 360;
    background: url('../media/img/position-couvercle.webp') no-repeat center / contain;
}

/* Quand la section est "éteinte" (sans couvercle coché ou pas de taille
   de regard choisie), on atténue l'image pour signaler l'inactivité. */
#couv-position.couv-inactif {
    opacity: 0.45;
}

/* Le fieldset remplit le conteneur ; chaque bouton se positionne dedans */
#fieldset-couv-resistance {
    display: block;      /* écrase le flex hérité de .fieldset-pilules */
    position: absolute;
    inset: 0;
}

/* #id + classe : bat ".fieldset-pilules div" (position: relative)
   qui, sinon, gagne en spécificité et remet les boutons dans le flux */
#fieldset-couv-resistance .couv-pos {
    position: absolute;
    transform: translate(-50%, -50%); /* left/top ciblent le CENTRE du bouton */
}

/* ── POSITIONS DES BOUTONS (à ajuster selon l'image) ─────────── */
.couv-pos-a15  { left: 12%; top: 67%; } 
.couv-pos-b125 { left: 32%; top: 67%; } 
.couv-pos-c250 { left: 54.5%; top: 67%; } 
.couv-pos-d400 { left: 82%; top: 67%; }

/* Boutons un peu plus compacts que les pilules standard (posés sur image) */
.couv-pos label {
    min-width: 6vw;
}
/* ============================================================
   INFO-BULLE "CHOIX INDISPONIBLE"
   Au survol d'une option grisée (radio disabled), un petit label
   flottant explique pourquoi elle n'est pas cliquable.

   Déclenchement en JS (classe .tt-survole, voir configurateur.js
   > gererTooltipIndisponible) plutôt qu'en :hover CSS pur : les
   fieldsets de radios sont réordonnés dynamiquement (les options
   disponibles remontent en haut), et un div qui se retrouve
   déplacé SOUS une souris restée immobile hérite de :hover sans
   mouvement réel du curseur — ce qui affichait l'info-bulle sur
   une option pourtant disponible. Le JS écoute mouseenter/
   mouseleave (fiables) et retire la classe à chaque
   réordonnancement, donc plus de faux déclenchement.
   ============================================================ */
fieldset div:has(> input[type="radio"]:disabled),
.rob-radios label:has(input[type="radio"]:disabled) {
    position: relative;
}


fieldset div:has(> input[type="radio"]:disabled).tt-survole::after,
.rob-radios label:has(input[type="radio"]:disabled).tt-survole::after {
    content: "Choix indisponible pour la configuration actuelle";
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #222;
    color: var(--texte-blanc);
    font-size: clamp(12px, 0.72vw, 15px);
    font-weight: 600;
    font-style: normal;
    line-height: 1.4;
    padding: 0.5vw 0.75vw;
    border-radius: 5px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    z-index: 80;
    pointer-events: none;
}

/* Petite flèche sous la bulle */
fieldset div:has(> input[type="radio"]:disabled).tt-survole::before,
.rob-radios label:has(input[type="radio"]:disabled).tt-survole::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #222;
    z-index: 80;
    pointer-events: none;
}

/* ============================================================
   LISERÉ ORANGE DE GUIDAGE (.etape-active)
   Posé par script.js (mettreAJourEtapeActive) sur le rectangle de
   la PROCHAINE question à remplir : .questionnaire, .colonne-e-s
   ou .robinetterie-case. Dès que le choix est fait, la classe
   passe au rectangle suivant, jusqu'à la fin de la configuration.
   ============================================================ */
.etape-active {
    border-color: var(--couleur-accent) !important;
    box-shadow: 0 0 7px var(--couleur-accent-glow-forte);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}


/* ═══════════════════════════════════════════════════════════════════
   BLOC RÉCAPITULATIF — à ajouter à la fin de style.css
   Les couleurs sont à aligner sur celles de ta charte.
   ═══════════════════════════════════════════════════════════════════ */

#bloc-recap {
    margin: 2.5rem auto 3rem;
    text-align: center;
    max-width: 640px;
}

#bouton-recap {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .9rem 1.8rem;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 600;
    color: #fff;
    background: var(--gris-fond-form);
    border: 2px solid var(--couleur-accent);
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s ease, transform .1s ease;
}

/* Flèche de téléchargement, purement décorative. */
#bouton-recap::before {
    content: "\2193";
    font-size: 1.15em;
    line-height: 1;
}

#bouton-recap:hover:not(:disabled)  { background: var(--couleur-accent); }
#bouton-recap:active:not(:disabled) { transform: translateY(1px); }
#bouton-recap:focus-visible         { outline: 3px solid #1c1c1c; outline-offset: 2px; }

#bouton-recap:disabled {
    background: #b9b9b9;
    cursor: progress;
}

.recap-aide {
    margin: .7rem auto 0;
    max-width: 46ch;
    font-size: .85rem;
    line-height: 1.5;
    color: #666;
}

/* Zone de message d'erreur : vide en temps normal, d'où le :empty
   qui évite de réserver une marge pour rien. */
#recap-message {
    margin: .8rem auto 0;
    max-width: 46ch;
    font-size: .85rem;
    line-height: 1.5;
    color: #b3261e;
}

#recap-message:empty {
    margin: 0;
}


.rect-droite {
    position: fixed;
    height: 18vw;
    bottom: 0;
    left: var(--milieu-page);
    width: calc(100% - var(--milieu-page));
    background: var(--gris-fond-form);
    z-index: 0;
}

/* ── Aperçu 3D : la zone blanche en haut à droite, entre la barre de
   navigation et le panneau sombre ci-dessus (même largeur, même bord
   gauche). Les boutons et options sont injectés par apercu3d.js. ── */
#apercu-3d {
    position: fixed;
    top: var(--nav-height);
    left: var(--milieu-page);
    width: calc(100% - var(--milieu-page));
    bottom: 21vw;
    z-index: 1;
}

#apercu-3d canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 110%;
    display: block;
    touch-action: none;
}

@media (max-width: 800px) {
    #apercu-3d {
        display: none;
    }
}























/* ══════════════════════════════════════════════════════════
   RESPONSIVE MOBILE — @media (max-width: 800px)
   Remplace intégralement le bloc mobile existant en fin de CSS.
   ══════════════════════════════════════════════════════════ */

@media (max-width: 800px) {

    /* ════════════════════════════════════════
       VARIABLES
       ════════════════════════════════════════ */
    :root {
        --nav-height: 19vw;
        /* navbar plus haute : logo + liens sur 2 lignes */
        --slide-width: 86%;
        --gap: 12px;
    }

    /* ════════════════════════════════════════
       NAVIGATION — hamburger
       ════════════════════════════════════════ */
    :root {
        --nav-height: 14vw;
    }

    .nav-bar {
        padding: 0 4vw;
        overflow: visible;
        /* le menu plein écran doit pouvoir sortir de la barre */
    }

    .nav-logo img {
        height: 9.5vw;
    }

    .nav-indicator-img {
        display: none;
    }

    /* ── Bloc contact + hamburger (haut droite) ── */
    .nav-mobile-actions {
        display: flex;
        align-items: center;
        gap: 4.5vw;
        position: relative;
        z-index: 220;
        /* toujours au-dessus du menu plein écran */
    }

    /* ── CONTACT permanent ── */
    .nav-contact-fixe {
        text-decoration: none;
        color: var(--nav-color);
        text-transform: uppercase;
        font-size: 3.2vw;
        font-weight: bold;
        letter-spacing: 0.05em;
        transition: color var(--nav-transition), opacity 0.25s ease;
    }

    .nav-contact-fixe:active {
        color: var(--couleur-accent);
    }

    /* Menu ouvert : le CONTACT s'efface (il est dans le menu),
       puis réapparaît à la fermeture */
    .nav-header.nav-menu-open .nav-contact-fixe {
        opacity: 0;
        pointer-events: none;
    }

    /* Mode hero (navbar transparente, non scrollée) : contact blanc */
    .nav-header.nav-hero:not(.is-scrolled) .nav-contact-fixe {
        color: #ffffff;
    }

    .nav-header.nav-hero.is-scrolled .nav-contact-fixe,
    .nav-header.nav-menu-open .nav-contact-fixe {
        color: var(--nav-color);
    }

    /* ── Bouton hamburger ── */
    .nav-burger {
        width: 7.5vw;
        height: 6vw;
        min-width: 30px;
        min-height: 24px;
        background: transparent;
        border: none;
        padding: 0;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .nav-burger span {
        display: block;
        width: 100%;
        height: 3px;
        border-radius: 3px;
        background: #000000;
        /* hamburger noir */
        transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1),
            opacity 0.3s ease,
            background 0.3s ease;
        transform-origin: center;
    }

    /* Mode hero (navbar transparente) : traits blancs pour rester visibles */
    .nav-header.nav-hero:not(.is-scrolled):not(.nav-menu-open) .nav-burger span {
        background: #ffffff;
    }

    /* ── Transition hamburger → croix orange ── */
    .nav-header.nav-menu-open .nav-burger span {
        background: var(--couleur-accent);
        /* croix orange */
    }

    .nav-header.nav-menu-open .nav-burger span:nth-child(1) {
        transform: translateY(calc(3vw - 1.5px)) rotate(45deg);
    }

    .nav-header.nav-menu-open .nav-burger span:nth-child(2) {
        opacity: 0;
        /* le trait du milieu disparaît en fondu */
    }

    .nav-header.nav-menu-open .nav-burger span:nth-child(3) {
        transform: translateY(calc(-3vw + 1.5px)) rotate(-45deg);
    }

    /* ── Menu plein écran ── */
    .nav-links {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        z-index: 210;
        /* sous le hamburger (220), au-dessus de tout le reste */

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 2vh;
        padding: 0 10vw;

        background: var(--texte-blanc);

        /* Fermé : hors écran à droite.
           Ouverture : glisse de la droite vers la gauche.
           Fermeture : repart de la gauche vers la droite. */
        transform: translateX(100%);
        transition: transform 0.55s cubic-bezier(0.76, 0, 0.24, 1);
    }

    .nav-header.nav-menu-open .nav-links {
        transform: translateX(0);
    }

    /* ── Onglets en colonne ── */
    .nav-links li {
        width: 100%;
        opacity: 0;
        transform: translateX(8vw);
        transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.76, 0, 0.24, 1);
    }

    /* Apparition décalée des onglets quand le menu s'ouvre */
    .nav-header.nav-menu-open .nav-links li {
        opacity: 1;
        transform: translateX(0);
    }

    .nav-header.nav-menu-open .nav-links li:nth-child(1) { transition-delay: 0.15s; }
    .nav-header.nav-menu-open .nav-links li:nth-child(2) { transition-delay: 0.22s; }
    .nav-header.nav-menu-open .nav-links li:nth-child(3) { transition-delay: 0.29s; }
    .nav-header.nav-menu-open .nav-links li:nth-child(4) { transition-delay: 0.36s; }

    .nav-link {
        height: auto;
        width: 100%;
        padding: 2.5vh 0;
        font-size: 6.5vw;
        color: var(--nav-color) !important;
        /* !important : neutralise le blanc du mode hero dans le menu */
        border-bottom: 1px solid #e5e5e5;
    }

    .nav-link.is-active {
        color: var(--couleur-accent) !important;
    }

    /* Le trait animé ::after est pensé pour la barre desktop */
    .nav-link::after {
        display: none;
    }


    .nav-header.nav-menu-open .nav-logo-mobile {
        display: block;
        position: absolute;
        top: 4vw;
        left: 10vw;
        width: 40vw;
        height: 12vw;
    }

    .nav-logo-mobile img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: left center;
    }

    /* ── Copyright en bas du menu hamburger ── */
    .nav-links::after {
        content: 'Desmoules Polyester © 2026 Tous droits réservés';
        position: absolute;
        bottom: 0;
        left: 10vw;
        right: 10vw;
        padding: 4vw 0 7vw;
        border-top: 1px solid #000000;
        font-size: 3vw;
        color: var(--nav-color);
        text-align: center;
        letter-spacing: 0.03em;
    }


    /* ════════════════════════════════════════
       HERO (accueil)
       ════════════════════════════════════════ */
    .hero video {
        min-height: 88vw;
        object-fit: cover;
    }

    .hero-info {
        padding-top: 30vw;
    }

    .hero-logo {
        width: clamp(220px, 62vw, 400px);
    }

    .hero-legend {
        font-size: 3vw;
        margin-top: 1.5vw;
        color: white;
    }

    .hero-legend2 {
        font-size: 2.3vw;
        margin-top: 2vw;
        color: white;
    }


    /* ════════════════════════════════════════
       ACCUEIL — SECTION ENTREPRISE (chiffres)
       ════════════════════════════════════════ */
    .accueil-lentreprise {
        padding: 8vw 6vw 10vw;
    }

    .accueil-entreprise {
        grid-template-columns: repeat(2, 1fr);
    }

    .accueil-entreprise section {
        width: 100%;
    }

    .btn-plus-actu {
        font-size: 2.1vw;
    }

    .accueil-entreprise section>p {
        margin-top: 4vw;
        font-size: 2.5vw;
        width: 90%;
    }

    .accueil-entreprise section div img {
        height: 12.5vw;
        margin-top: 60%;
    }

    .accueil-entreprise section div div {
        height: 20vw;
        margin-left: 3vw;
        margin-top: 1vw;
    }

    .content-section {
        width: 20%;
    }

    .chiffre-dessus::before {
        content: '';
        position: absolute;
        left: -2vw;
        top: 5%;
        height: 100%;
        width: 100%;
        background: var(--bg-chiffre-color);
        z-index: 1;
    }

    .chiffre-dessous::before {
        content: '';
        position: absolute;
        left: -2vw;
        top: 5%;
        height: 100%;
        width: 100%;
        background: var(--bg-chiffre-color);
        z-index: 1;
    }
    

    /* Barre orange décorative */
    .section::after {
        left: 19.2vw;
        top: 1vw;
        height: 45%;
        width: 52%;
    }

    /* Traits verticaux entre sections : inutiles en colonne */
    .section1::after,
    .section2::after,
    .section3::after {
        display: none;
    }

    /* Chiffres — tailles remises à l'échelle mobile */
    .chiffre-section1 {
        font-size: 12vw;
        margin-left: 4.5vw;
        margin-top: 1vw;
    }


    #plus-section-exp {
        font-size: 5vw;
        top: 9%;
        left: 41%;
    }

    #plus-section-clients {
        font-size: 5vw;
        top: 9%;
        left: 37%;
    }



    .unite1-section1 {
        font-size: 4vw;
        margin-top: -3.5vw;
        margin-left: 4vw;
    }

    .unite2-section1 {
        font-size: 2.3vw;
        margin-top: -1vw;
        margin-left: 3.8vw;
    }

    .chiffre-section2 {
        font-size: 10vw;
        margin-top: 2vw;
        margin-left: 2vw;
    }

    .unite1-section2 {
        font-size: 5vw;
        margin-top: -3.4vw;
        margin-left: 2vw;
    }

    .chiffre-section3 {
        font-size: 6.5vw;
        margin-top: 3.5vw;
    }

    .unite1-section3 {
        font-size: 4.8vw;
        margin-top: -3vw;
    }

    .unite2-section3 {
        font-size: 3.2vw;
        margin-top: -1.6vw;
    }

    .chiffre-section4 {
        font-size: 8vw;
        margin-left: 2.5vw;
        margin-top: 3.5vw;
    }

    .unite1-section4 {
        font-size: 5.4vw;
        margin-top: -3vw;
        margin-left: 2.5vw;
    }

    .unite2-section4 {
        font-size: 3.8vw;
        margin-top: -1.6vw;
        margin-left: 2.5vw;
    }


    /* ════════════════════════════════════════
       ACCUEIL — SECTION PRODUITS
       ════════════════════════════════════════ */
    .accueil-produits {
        top: var(--nav-height);
    }

    .accueil-produits-txt {
        padding: 9vw 6vw 10vw;
        font-size: 3.6vw;
    }

    .accueil-produits p {
        margin-top: 9vw;
        margin-bottom: 9vw;
    }


    /* ════════════════════════════════════════
       ACCUEIL — SECTION ACTUALITÉS (carrousel)
       ════════════════════════════════════════ */
    .apercu-actu-accueil {
        padding: 10vw 0 12vw;
    }

    .actu-header {
        margin-bottom: 6vw;
    }

    .actu-grille {
        gap: 4vw;
        padding: 2vw 6vw 3vw;
    }

    .actu-carte {
        width: 76vw;
    }

    .actu-date {
        font-size: 2vw;
    }

    .actu-corps {
        padding: 4.5vw 4.5vw 4.5vw 4vw;
        gap: 2vw;
    }

    .actu-texte {
        margin-top: 0.5vw;
        
        font-size: 2.3vw;
    }

    .actu-fleche--gauche {
        margin-left: 1.5vw;
    }

    .actu-fleche--droite {
        margin-right: 1.5vw;
    }

    /* Pas de :hover sur tactile → le texte des cartes image
       est toujours visible */
    .actu-texte-img {
        max-height: none;
        opacity: 1;
        font-size: 2.3vw;
    }

    .actu-img {
        filter: brightness(0.55);
    }


    /* ════════════════════════════════════════
       MODALE ACTUALITÉ
       ════════════════════════════════════════ */
    .actu-modale-overlay {
        padding: 4vw;
    }

    .actu-modale-boite {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        max-width: 92vw;
        max-height: 86vh;
    }

    .actu-modale-img-wrap {
        flex: 0 0 auto;
        width: 100%;
        max-height: 38vh;
        align-self: auto;
    }

    .actu-modale-contenu {
        padding: 1.6em 1.4em 1.8em;
        max-height: none;
        overflow-y: auto;
    }

    .actu-modale-boite--sans-image .actu-modale-contenu {
        padding: 2em 1.4em;
    }

    /* La croix sort de la boîte : on libère le débordement */
    .actu-modale-boite {
        overflow: visible;
    }

    .actu-modale-img-wrap {
        overflow: hidden;   /* l'image reste bien découpée */
    }

    .actu-modale-fermer {
        top: auto;
        bottom: calc(100% + 0.5em);   /* juste au-dessus de la boîte */
        right: 0;
        background: transparent;
        color: #ffffff;               /* visible sur le fond flouté */
        padding: 0.2em;
    }


    /* ════════════════════════════════════════
       FOOTER
       ════════════════════════════════════════ */
    .footer-container {
        flex-direction: column;
        align-items: center;
    }

    .footer-francais {
        width: 80%;
        margin: 6vw auto 0;
    }

    .footer-curve {
        top: -55px;
    }

    #footer-fr-text {
        font-size: 5vw;
        line-height: 1.25;
        margin-top: 1.5vw;
    }

    .footer-adresse {
        width: 88%;
        margin: 5vw 4vw;
        font-size: 3.4vw;
        padding: 0 2vw 1.5vw;
    }

    #titre-footer {
        margin-top: 2.5vw;
        margin-bottom: 2vw;
        font-size: 4vw;
    }

    .footer-container-logo {
        width: 75%;
        margin: 0 auto;
    }

    #footer-logo {
        display: none;
    }

    .footer-mentions {
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        row-gap: 3vw;
        column-gap: 3vw;
        padding-inline: 4vw;
        font-size: 2.8vw;
        margin-bottom: 2vw;
    }

    .footer-legal {
        gap: 5vw;
        padding-top: 1.5vw;
        border: none;
    }

    .footer-legal a::after {
        bottom: 0;
    }

    .french-fab {
        width: 18vw;
    }

    .membre-ff {
        font-size: 2.3vw;
        top: -18%;
    }

    .footer-copyright {
        width: 100%;
        text-align: center;
        padding-top: 2vw;
        padding-bottom: 2vw;
    }


    /* ════════════════════════════════════════
       PAGE CONFIGURATEUR
       Desktop : form fait 67% de large (--milieu-page) avec un
       panneau .rect-droite fixe à droite + #references-configuration
       et #bouton-reinitialiser en position fixed dans cette bande.
       Sur mobile, tout repasse en flux vertical pleine largeur :
       le panneau droit et son fond disparaissent, les boutons fixes
       redeviennent statiques dans le flux, et toutes les unités vw
       (calées sur une largeur desktop) sont réduites ou converties.
       ════════════════════════════════════════ */

    #body-configurateur {
        font-size: 3.2vw;
    }

    /* Aucune largeur au-delà de l'écran : la barre de nav (fixed,
       width 100%) et la page restent calées sur la fenêtre. */
    #html-configurateur,
    #body-configurateur {
        overflow-x: clip;
        max-width: 100%;
    }

    /* Pied de page : le formulaire garde un peu d'air pour la courbe */
    #body-configurateur form {
        padding-bottom: 14vw;
    }

    /* Sur cette page, 1rem = 1.05vw (html-configurateur) : le footer
       utilise des clamp() en rem qui deviendraient minuscules sur
       mobile → on fixe les tailles en vw pour l'adresse. */
    #body-configurateur footer .info-siege {
        font-size: 3.4vw;
    }

    /* Info-bulles "i" des titres (.corps-info) : sur desktop elles sont
       positionnées sous le "i" (left:0, 220px) ce qui les fait déborder
       à droite de l'écran, même invisibles (visibility:hidden occupe
       toujours la mise en page → barre trop large / page qui bouge).
       Sur mobile on les ancre sur la boîte .questionnaire (pleine
       largeur) au lieu du petit "i". */
    .questionnaire {
        position: relative;
    }

    .corps-info {
        position: static;
    }

    .corps-info .version-tooltip {
        top: 10vw;
        left: 3vw;
        right: 3vw;
        width: auto;
        z-index: 30;
    }

    .corps-tooltip-image {
        max-width: 100%;
    }

    /* Le panneau de droite (fond sombre fixe) n'a plus lieu d'être :
       le formulaire prend toute la largeur en une seule colonne. */
    .rect-droite {
        display: none;
    }

    form {
        width: 100%;
        padding: 22vw 4vw 6vw;
        border-right: none;
    }

    .questionnaire {
        padding: 3vw 3.2vw;
        margin-top: 3vw;
        border-radius: 8px;
    }

    .nom-questionnaire {
        font-size: 3.4vw;
        margin-bottom: 1.5vw;
    }

    /* Rangée compacte : titre + contrôle ne tiennent plus sur une
       seule ligne (select "Ma combinaison", nb de compteurs...) →
       on empile verticalement. */
    .rangee-compacte {
        flex-wrap: wrap;
        gap: 1.5vw;
    }

    .rangee-compacte .nom-questionnaire {
        white-space: normal;
        flex: 1 1 100%;
        text-align: center;
    }

    .rangee-compacte > fieldset,
    .rangee-compacte > select {
        flex: 1 1 100%;
        justify-content: center;
    }

    select {
        font-size: 3.4vw;
        padding: 2.2vw 8vw 2.2vw 3vw;
        background-size: 3vw;
        background-position: right 2.8vw center;
        text-align: center;
        text-align-last: center;
    }

    /* ── Radios pilule : nb-compteur / nb-entrée / nb-sortie ── */
    #fieldset-nb-compteur {
        gap: 2vw;
        justify-content: center;
        margin-top: 2vw;
    }

    #fieldset-nb-compteur label {
        min-width: 9vw;
        height: 9vw;
        padding: 0 3vw;
        font-size: 3.6vw;
    }

    #fieldset-nb-entree,
    #fieldset-nb-sortie {
        gap: 2vw;
        padding-bottom: 3vw;
        margin: 0 2vw;
    }

    #fieldset-nb-entree label,
    #fieldset-nb-sortie label {
        min-width: 9vw;
        height: 9vw;
        font-size: 3.2vw;
    }

    /* ── Cases VERSION : 2 colonnes suffisent sur mobile ── */
    #fieldset-version {
        grid-template-columns: repeat(2, 1fr);
        gap: 3vw;
    }

    #fieldset-version label {
        padding: 3vw 2.5vw 2.5vw;
        font-size: 3.2vw;
    }

    #fieldset-version label .version-image {
        margin-top: 2.5vw;
    }

    /* Le "i" info-bulle est agrandi pour rester tapable au doigt,
       et son survol au clavier étant impossible sur mobile, on
       laisse le tap ouvrir/fermer via :focus (géré par le navigateur
       au tap sur un élément tabindex). */
    .version-info {
        width: 6vw;
        height: 6vw;
        top: 1.5vw;
        right: 1.5vw;
        font-size: 3.2vw;
    }

    .version-info .version-tooltip {
        top: 7vw;
        width: 46vw;
        font-size: 2.9vw;
        padding: 2vw 2.5vw;
    }

    /* ── Ligne ENTRÉE / SORTIE : empilée au lieu de 2 colonnes ── */
    .ligne-e-s {
        grid-template-columns: 1fr;
        gap: 3vw;
    }

    .separateur-e-s {
        display: none;
    }

    .colonne-e-s {
        gap: 2vw;
        padding: 3vw 3vw;
    }

    .eyebrow-e-s {
        font-size: 3vw;
        padding-bottom: 1.5vw;
    }

    .colonne-e-s .nom-questionnaire {
        margin-top: 1vw;
    }

    /* ── Robinetterie sur mobile ──────────────────────────────
       La grille 5 colonnes desktop passe en 1 seule colonne. Les
       cases PEHD (entrée/sortie) sont masquées : l'utilisateur vient
       de répondre aux questions "Nombre d'entrées/sorties" juste
       au-dessus, les rappeler ici prenait une place disproportionnée
       (gros visuel de tuyau) pour une info déjà en tête. Chaque
       compteur (Avant + Compteur + Après) est rassemblé dans SA
       PROPRE carte grâce à .rob-groupe-compteur (voir
       construireRobinetterie > script.js), avec un liseré de
       couleur qui alterne d'un compteur à l'autre pour qu'on les
       distingue au premier coup d'œil, même sans les relire. ── */
    #robinetterie-lignes {
        gap: 4vw;
    }

    .robinetterie-vide {
        font-size: 3.4vw;
    }

    .robinetterie-grille {
        --hauteur-controles: 9vw;
        display: flex;
        flex-direction: column;
        gap: 3vw;
    }

    .case-pehd {
        display: none;
    }

    .robinetterie-case {
        gap: 1vw;
        padding: 2vw 2.5vw;
        min-height: auto;
    }

    /* La carte groupée : fond légèrement distinct du fond de page pour
       délimiter visuellement "tout ce qui appartient à ce compteur". Les
       3 cases qu'elle contient perdent leur propre fond/bordure (elles
       deviennent de simples sections internes) pour éviter l'effet
       "carte dans une carte". Le liseré (2px, couleur alternée par
       compteur ci-dessous) est le repère visuel principal pour
       distinguer un compteur du suivant. */
    .rob-groupe-compteur {
        display: flex;
        flex-direction: column;
        /* Compteur en en-tête, puis Avant, puis Après — voir order
           ci-dessous sur chaque case, indépendant de leur ordre dans le
           HTML généré (Avant, Compteur, Après). */
        background: var(--gris-fond-select);
        border: 2px solid var(--gris-bordure);
        border-radius: 10px;
        padding: 2.5vw 2.5vw;
        gap: 0;
    }

    /* Le liseré est gris par défaut (border déclarée juste au-dessus) et
       passe en orange via .etape-active — même mécanisme que partout
       ailleurs dans le formulaire (voir mettreAJourEtapeActive dans
       script.js) : dès qu'une case de ce compteur est la prochaine à
       remplir, la classe est posée sur le wrapper entier plutôt que sur
       la seule sous-case, pour que tout le contour de la carte s'allume.
       Pas de règle CSS supplémentaire nécessaire ici : .etape-active
       (définie plus haut dans le fichier) s'applique déjà à n'importe
       quel élément qui la porte. */

    .rob-groupe-compteur .robinetterie-case {
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 0;
        min-height: auto;
    }

    .rob-groupe-compteur .case-compteur {
        order: -1;
        padding-bottom: 2vw;
        margin-bottom: 2vw;
        border-bottom: 1px solid var(--gris-bordure);
    }

    .rob-groupe-compteur .case-compteur .case-titre {
        font-size: 3.6vw;
        color: var(--couleur-accent);
    }

    .rob-groupe-compteur .case-compteur .case-valeur {
        font-size: 5.2vw;
    }

    /* Séparation Avant/Après renforcée : bordure passée de 1px à 2px pour
       qu'elle reste bien visible malgré les espacements resserrés
       ci-dessus. */
    .rob-groupe-compteur .case-robinetterie + .case-robinetterie {
        margin-top: 2.5vw;
        padding-top: 2.5vw;
        border-top: 2px solid var(--gris-bordure);
    }

    /* Le cale-vide (::before) sert à aligner les images sur les colonnes
       de la grille desktop : inutile en layout mobile 1-colonne, où il
       ne fait qu'ajouter de la hauteur vide inutile en haut de chaque
       carte Compteur. */
    .case-compteur::before {
        display: none;
    }

    .case-image {
        height: 11vw;
        margin: 0.5vw auto;
    }

    .case-fusion .case-image {
        max-height: 20vw;
    }

    .case-titre {
        font-size: 3.1vw;
    }

    .robinetterie-case > .case-titre {
        min-height: 8vw;
    }

    .case-valeur {
        font-size: 4vw;
    }

    .case-entete {
        gap: 1.2vw;
        min-height: 7vw;
    }

    .rob-check {
        width: 4.5vw;
        height: 4.5vw;
        min-width: 18px;
        min-height: 18px;
    }

    .rob-radios,
    .rob-types {
        gap: 1.2vw;
    }

    .rob-radios label {
        font-size: 2.6vw;
        padding: 1vw 0;
    }

    .rob-type {
        padding: 2vw 4vw 2vw 1.5vw;
        font-size: 3.4vw;
        background-size: 2.4vw;
        background-position: right 1.2vw center;
    }

    .rob-marque {
        font-size: 3.4vw;
        padding: 2vw 5vw 2vw 2vw;
    }

    /* ── Toast d'avertissement URL : pleine largeur en haut ── */
    #avertissement-url {
        left: 4vw;
        right: 4vw;
        top: 22vw;
        max-width: none;
        min-width: 0;
        padding: 3vw 8vw 3vw 3.5vw;
        font-size: 3vw;
    }

    /* ── SECTION 3. CORPS / pilules communes / SECTION 5. REHAUSSE
       / SECTION 6. ISOLANT : mêmes classes que nb-compteur ── */
    #fieldset-corps-taille,
    #fieldset-corps-compact,
    #fieldset-corps-modele,
    .fieldset-pilules {
        gap: 2vw;
        justify-content: center;
    }

    #fieldset-corps-taille label,
    #fieldset-corps-compact label,
    #fieldset-corps-modele label,
    .fieldset-pilules label {
        min-width: 11vw;
        height: 11vw;
        font-size: 3.4vw;
        padding: 0 3vw;
    }

    .corps-modele-plage {
        font-size: 2.4vw;
    }

    .corps-tooltip-image {
        margin-top: 1.5vw;
    }

    /* ── SECTION 4. COUVERCLE ── */
    .couv-entete {
        flex-wrap: wrap;
        gap: 2vw;
        margin-bottom: 2.5vw;
    }

    .couv-sans-label {
        font-size: 3.2vw;
        gap: 1.5vw;
    }

    .couv-sans-label input[type="checkbox"] {
        width: 5vw;
        height: 5vw;
        min-width: 20px;
        min-height: 20px;
    }

    /* L'image de positionnement des résistances garde ses boutons
       en absolu (positions déjà en %, donc déjà responsives) ;
       seule la taille des pilules est réajustée pour rester
       tapable sans se chevaucher. */
    /* Les pilules sont ancrées à 12 / 32 / 54,5 / 82 % de la largeur :
       avec le padding desktop (24px) et min-width 16vw, A15 et B125
       se touchaient voire se chevauchaient. On réduit padding, largeur
       mini et hauteur mini pour garder un espace net entre elles. */
    .couv-pos label {
        min-width: 0;
        min-height: 9vw;
        padding: 1vw 2.5vw;
        font-size: 3vw;
        border-width: 1.5px;
    }

    /* ── Info-bulle "Choix indisponible" : trop large en vw fixe,
       on la limite en largeur et on autorise le retour à la ligne
       plutôt que le nowrap desktop qui la ferait déborder. ── */
    fieldset div:has(> input[type="radio"]:disabled).tt-survole::after,
    .rob-radios label:has(input[type="radio"]:disabled).tt-survole::after {
        font-size: clamp(13px, 2.6vw, 16px);
        font-weight: 600;
        max-width: 60vw;
        white-space: normal;
        text-align: center;
        padding: 1.5vw 2.5vw;
    }

    /* ── Barre de RÉFÉRENCES : passe de fixed (collée au panneau
       droit) à statique, pleine largeur, grille 2 colonnes ── */
    #references-configuration {
        position: static;
        right: auto;
        bottom: auto;
        padding: 3.5vw 4vw 4.5vw;
        margin-top: 4vw;
    }

    #references-configuration h2 {
        font-size: 4vw;
    }

    #references-configuration h2::after {
        width: 12vw;
    }

    #references-boites {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5vw;
    }

    .reference-boite {
        min-width: 0;
        min-height: 9vw;
        padding: 1.5vw 2vw;
    }

    .ref-affichage {
        font-size: 3.2vw;
        gap: 1vw;
        white-space: normal;
        text-align: center;
    }

    .ref-chevron {
        font-size: 2.4vw;
    }

    .ref-liste {
        max-height: 40vw;
    }

    .ref-liste li {
        padding: 1.2vw 2vw;
        font-size: 3vw;
    }


    /* ── Bouton réinitialiser : sort du fixed, revient dans le
       flux juste avant le formulaire (position d'origine dans le
       HTML), centré, pleine largeur. ── */
    #bouton-reinitialiser {
        position: static;
        display: block;
        width: 100%;
        margin: 0 0 4vw;
        padding: 2.8vw 4vw;
        font-size: 3.4vw;
    }

    #modale-reinit .modale-boite {
        max-width: 84vw;
        min-width: 0;
        padding: 5vw 5vw;
    }

    .modale-titre {
        font-size: 3.8vw;
        margin-bottom: 2.2vw;
    }

    .modale-texte {
        font-size: 3.1vw;
        margin-bottom: 4vw;
    }

    .modale-boutons {
        flex-direction: column;
        gap: 2.5vw;
    }

    .modale-boutons button {
        font-size: 3.3vw;
        padding: 2.2vw 3vw;
        width: 100%;
    }

    /* ── Bloc récapitulatif (PDF) ── */
    #bloc-recap {
        margin: 6vw auto 4vw;
        max-width: 100%;
    }

    #bouton-recap {
        width: 100%;
        justify-content: center;
        font-size: 3.6vw;
        padding: 3vw 4vw;
    }

    .recap-aide {
        font-size: 2.9vw;
        max-width: none;
    }

    #recap-message {
        font-size: 2.9vw;
        max-width: none;
    }


    /* ════════════════════════════════════════
       PAGE ENTREPRISE
       ════════════════════════════════════════ */
    #entreprise-main {
        margin-top: 19vw;
    }

    .entreprise {
        padding: 0vw 6vw 7vw ;
    }

    .entreprise>div {
        margin-top: 6vw;
    }

    .entreprise-paragrapheimg {
        flex-direction: column;
        font-size: 3vw;
        line-height: 5vw;
        gap: 4vw;
    }

    /* La 2e rangée a l'image en 1er dans le HTML :
       on la repasse sous le texte */
    .entreprise-paragrapheimg .entreprise-conteneur-img {
        order: 2;
    }

    .metier-societe {
        width: 100%;
        margin-right: 0;
        margin-bottom: 4vw;
    }

    .metier-production {
        margin-left: 0;
        margin-bottom: 5vw;
    }

    .entreprise-img {
        width: 86vw;
    }

    .activite-legend {
        font-size: 3vw;
        margin-top: 1vw;
    }

    #produits-entreprise {
        height: 2.5vw;
        right: 20vw;
        top: 103.5%;
    }

    .entreprise-objectifs {
        font-size: 2.7vw;
        margin-top: 8vw;
    }

    .entreprise-objectifs::before {
        left: 3vw;
        top: -2vw;
        height: 8vw;
        width: 93.5%;
    }
    

    /* — Amélioration continue : tout dans le flux — */
    .ac {
        background: #f5f5f5;
    }

    .ac-entete {
        padding: 12vw 5vw 6vw;
    }

    .ac-chiffres {
        grid-template-columns: repeat(2, 1fr);
        gap: 5vw;
        margin-top: 8vw;
    }

    .ac-chiffre {
        padding-top: 3vw;
    }

    .ac-chiffre::before {
        width: 100%;
        height: 100%;
    }

    .ac-chiffre::after {
        width: 55%;
        height: 50%;
        left: 44%;
        top: 0.3vw;
    }

    .ac-chiffre-valeur {
        font-size: 8vw;
    }

    .ac-chiffre-label {
        margin-top: 1.5vw;
        font-size: 3vw;
    }

    .ac-ligne,
    .ac-ligne--inverse {
        flex-direction: column;
        min-height: 0;
    }

    /* mobile : le texte d'abord, les photos ensuite */
    .ac-ligne > .ac-texte,
    .ac-ligne--inverse > .ac-texte {
        order: 1;
    }

    .ac-ligne > .ac-fenetre,
    .ac-ligne--inverse > .ac-fenetre {
        order: 2;
    }

    .ac-fenetre {
        flex: none;
        overflow: visible;
        background: none;
        clip-path: none;
    }

    .ac-calque {
        position: static;
        width: auto;
        height: auto;
        gap: 4vw;
        padding: 0 5vw;
        will-change: auto;
    }

    .ac-photo {
        flex: none;
        height: auto;
        aspect-ratio: 16 / 9;
        border-radius: 2vw;
    }

    .ac-legende {
        padding: 6vw 4vw 3vw;
        font-size: 2.9vw;
    }

    .ac-texte {
        padding: 8vw 5vw 12vw;
    }

    .ac-carte {
        width: 100%;
        padding: 0;
        border-radius: 0;
        box-shadow: none;
        background: none;
    }

    .ac-periode {
        font-size: 2.6vw;
        margin-bottom: 3vw;
    }

    .ac-carte h3 {
        font-size: 5.2vw;
        margin-bottom: 3.5vw;
    }

    .ac-carte p,
    .ac-carte ul {
        font-size: 3.5vw;
        line-height: 1.7;
    }

    .ac-carte ul {
        margin: 3vw 0 0 3vw;
        padding-left: 3vw;
    }

    .slide {
        flex: 0 0 var(--slide-width);
    }

    .track {
        gap: var(--gap);
    }

    .carousel-nav {
        width: 40px;
        height: 40px;
        font-size: 22px;
    }

    .carousel-nav.prev {
        left: 4px;
    }

    .carousel-nav.next {
        right: 4px;
    }

    .caption {
        font-size: 2.3vw;
    }

    /* — Section polyester — */
    .polyester-avantages {
        flex-direction: column;
    }

    .polyester-gauche {
        width: 100%;
        padding-right: 0;
        margin-bottom: 4vw;
    }

    #soustitre-polyester {
        margin-bottom: 3vw;
    }

    .polyester-intro {
        margin-top: 4vw;
        margin-bottom: 6vw;
    }

    #section-polyester p {
        font-size: 3vw;
        margin-top: 3vw;
    }

    #section-polyester div ul {
        margin-bottom: 6vw;
    }

    #section-polyester div ul li {
        margin: 2.5vw 0 0 6vw;
        font-size: 2.8vw;
    }

    #soustitre-graphique {
        margin-top: 8vw;
    }

    .polyester-graphique {
        margin-top: 3vw;
        height: auto;
        width: 86vw;
    }

    .polyester-conclusion {
        margin-top: 8vw;
    }

    .polyester-recyclage {
        gap: 5vw;
    }



    .polyester-recycling-symbol {
        width: 18vw;
        margin-left: 1vw;
    }

    /* — Frise chronologique (cartes empilées) — */
    .frise-section {
        padding: 16vw 0 12vw;
        --frise-carte-h: auto;
        --frise-carte-gap: 5vw;
        --frise-carte-decal: 1.6vw;
    }

    .frise-intro {
        padding: 0 6vw 8vw;
    }

    .frise-intro-eyebrow {
        font-size: 2.6vw;
        margin-bottom: 3vw;
    }

    .frise-intro-titre {
        font-size: 7vw;
    }

    /* Le rail n'a plus la place : les cartes sont pleine largeur */
    .frise-rail {
        display: none;
    }

    .frise-pile {
        padding: 0 4vw;
    }

    .frise-carte {
        height: auto;
        padding: 0.4vw;
        border-radius: 2vw;
        box-shadow: 0 4vw 8vw rgba(0, 0, 0, 0.55);
    }

    .frise-carte-inner {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        padding: 8vw 6vw;
        border-radius: 1.2vw;
        min-height: 92vw;
    }

    .frise-carte-annee {
        flex: none;
        padding-left: 0;
        font-size: 20vw;
        margin-bottom: 2vw;
    }

    .frise-carte-texte {
        flex: none;
        padding: 0;
    }

    .frise-carte-eyebrow {
        font-size: 2.6vw;
        margin-bottom: 3vw;
    }

    .frise-carte-titre {
        font-size: 6.4vw;
        margin-bottom: 4vw;
    }

    .frise-carte-body {
        font-size: 3.5vw;
        max-width: 100%;
        line-height: 1.6;
    }



    /* ════════════════════════════════════════
       PAGE CONTACT
       ════════════════════════════════════════ */
    .contact-indication {
        font-size: 3.3vw;
        margin: 5vw 6vw 8vw;
    }

    .contact-france {
        flex-direction: column;
        margin-top: 4vw;
        gap: 10vw;
    }

    /* Carte de France agrandie et centrée */
    .carte {
        width: 82vw;
    }

    /* Ping du siège — repositionné pour la carte mobile.
       (marges en % du bloc conteneur, comme sur desktop) */
    .ping {
        margin-top: 35%;
        margin-left: 52%;
    }

    .map-pin {
        width: 4.5vw;
    }

    /* Cartes de visite */
    .cartes-visite {
        width: 88vw;
        margin: 0 auto;
    }

    .carte-siege-deco {
        width: 24vw;
        height: 22vw;
        top: -2vw;
        left: 56.5vw;
    }

    .carte-siege {
        width: 78vw;
        padding: 4vw;
        font-size: 3.4vw;
    }

    .info-siege {
        margin-top: 2.5vw;
        margin-bottom: 1.5vw;
    }

    #carte-commerciaux {
        margin-top: 6vw;
        padding: 3vw;
        height: auto;
        width: 66vw;
    }

    .carte-nord-deco,
    .carte-sud-deco {
        margin-top: 6vw;
        width: 4vw;
        height: auto;
    }

    .zone-descriptif {
        font-size: 2.8vw;
        margin-top: 0;
        margin-bottom: 2vw;
    }

    .commercial-contact {
        font-size: 3.1vw;
    }

    .contact-main {
    margin-top: 10vw;
    margin-bottom: 10vw;
    }


    /* ════════════════════════════════════════
       PAGE PRODUITS (accordéon)
       ════════════════════════════════════════ */
    .main-produits {
        margin: 18vw 6vw 14vw;
    }

    .cat-title {
        font-size: 3.5vw;
        margin-top: 1vw;
        letter-spacing: 0;
    }

    .cat-body {
        padding-left: 1.5vw;
    }

    .cat-body-content {
        padding: 3vw 0 6vw;
        padding-left: 3.5vw;
        padding-right: 0;
    }

    .cat-desc {
        font-size: clamp(0.8rem, 3vw, 1rem);
        margin-bottom: 3.5vw;
        
    }

    .cat-images {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5vw;
        width: 100%;
    }

    .cat-img-label {
        font-size: clamp(0.6rem, 2.6vw, 0.85rem);
        padding: 0.45rem 0.4rem;
    }


    /* ════════════════════════════════════════
       PAGE FICHE PRODUIT
       ════════════════════════════════════════ */
    .main-produit {
        margin: 20vw 5vw 8vw;
    }

    .produit-fil {
        display: none;
    }

    .produit-fiche {
        flex-direction: column;
        gap: 0;
    }

    .produit-categorie-mobile {
        display: block;
        order: -2;
        width: 100%;
    }

    .produit-titre-mobile {
        display: block;
        order: -1;
        width: 100%;
        margin-bottom: 4vw;
    }

    .produit-categorie-desktop,
    .produit-titre-desktop {
        display: none;
    }

    .produit-galerie {
        flex: 1 1 auto;
        width: 100%;
    }

    .produit-miniatures {
        grid-template-columns: repeat(4, 1fr);
    }

    .produit-categorie {
        margin-bottom: 2vw;
    }

    .produit-desc {
        margin-top: 4vw;
    }

    .produit-caracs {
        margin-top: 5vw;
    }

    .produit-actions {
        margin-top: 1.5rem;
    }

    .produit-section {
        margin-top: 12vw;
    }

    .produit-rubrique {
        margin-bottom: 5vw;
    }

    .prod-carrousel {
        max-width: 100%;
        gap: 2vw;
    }

    .prod-carte {
        flex-basis: calc((100% - var(--prod-gap)) / 2);
    }

    .prod-grille {
        grid-template-columns: repeat(2, 1fr);
    }


    /* ════════════════════════════════════════
       PAGE ACTUALITÉS
       ════════════════════════════════════════ */
    .main-actualites {
        --marge-gauche: 5vw;
        margin: 18vw 0 10vw;
    }

    .actu-section {
        margin-top: 8vw;
    }

    .actu-section--recentes {
        margin-top: 10vw;
        margin-bottom: 10vw;
    }

    .actu-rubrique {
        font-size: 1.6rem;
        margin-bottom: 2rem;
    }

    .actu-zone--pile {
        gap: 2.5rem;
    }

    .actu-fiche {
        max-width: none;
    }

    .actu-fiche--image {
        flex-direction: column;
        border-left: 4px solid #ff6600;
    }

    .actu-fiche--image .actu-fiche__visuel {
        flex: 1 1 auto;
    }

    .actu-fiche--image .actu-fiche__contenu {
    border-left: none;
    }

    .actu-fiche--texte {
        max-width: none;
    }

    .actu-fiche__contenu {
        padding: 1.5rem;
        gap: 0.7rem;
    }

    .actu-fiche__titre {
        font-size: 1.3rem;
    }

    .actu-fiche__texte {
        font-size: 1.1rem;
    }


    /* ════════════════════════════════════════
       PAGES MENTIONS LÉGALES / CONFIDENTIALITÉ
       ════════════════════════════════════════ */
    .main-mentions {
        margin: 26vw 6vw 14vw;
        max-width: 100%;
    }

    .main-mentions h2,
    .main-mentions .sous-titre-section {
        margin-top: 5vw;
        margin-bottom: 3vw;
    }

    .main-mentions p,
    .main-mentions ul li {
        font-size: 1.3rem;
    }

    h1 {
        font-size: 5.5vw;
    }

    h2 {
        margin: 0;
        font-size: 4.3vw;
    }

    .cat-header {
        margin-left: 3vw;

    }
}