:root {
    --prd-info-label-space: 15px;
    --prd-info-item-space: 25px;
}

/******** Product Img **********/

.prd-img-box {
    border: 1px solid #eaeaea;
    margin-bottom: var(--prd-info-item-space);
}

.prd-img-thumb-box {
    margin-bottom: var(--prd-info-item-space);
}

    .prd-img-thumb-box .prd-img-thumb-item {
        cursor: pointer;
    }

        .prd-img-thumb-box .prd-img-thumb-item .thumb-box {
            position: relative;
            border-radius: var(--border-radius-product-image);
            border: 1px solid var(--color-product-border);
        }

            .prd-img-thumb-box .prd-img-thumb-item .thumb-box img {
                position: relative;
                height: 100%;
                width: 100%;
                text-align: center;
            }

            .prd-img-thumb-box .prd-img-thumb-item .thumb-box .img-select {
                position: absolute;
                left: 0;
                bottom: 0;
                width: 0;
                height: 3px;
                background-color: var(--color-default);
                transition: width 0.3s ease-in-out;
            }

                .prd-img-thumb-box .prd-img-thumb-item .thumb-box .img-select.active {
                    width: 100%;
                }


    /******** Product Info **********/
    .prd-info-box {
        padding-left: 9.5rem;
    }

    .prd-info-box h1 {
        font-size: 2.3rem;
        padding-right: 3rem;
        color: var(--color-heading);
        font-weight: 700;
        text-transform: capitalize;
        margin-bottom: var(--prd-info-item-space);
    }

    /******** Price **********/
    .prd-info-box .price-box {
        font-size: 1.6rem;
        font-weight: 500;
        margin-bottom: var(--prd-info-label-space);
        color: var(--color-price);
    }

        .prd-info-box .price-box span {
            font-size: 2.3rem;
            font-weight: 700;
            color: var(--color-price);
        }

    /******** Desc **********/
    .prd-info-box .short-desc-box {
        line-height: 1.7;
        font-size: 1.3rem;
        margin-bottom: var(--prd-info-item-space);
    }

    /******** Color **********/
    .prd-info-box .label-color-box {
        text-transform: uppercase;
        font-weight: 700;
        font-size: 1.3rem;
        color: var(--color-heading);
        margin-bottom: var(--prd-info-label-space);
    }

    .prd-info-box .color-box {
        margin-bottom: var(--prd-info-item-space);
    }

        .prd-info-box .color-box .color-item-box {
            display: inline-block;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            text-align: center;
            padding: 3px;
            margin-right: 2px;
        }

            .prd-info-box .color-box .color-item-box .color-item {
                border: 1px solid #eaeaea;
                display: inline-block;
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }

            .prd-info-box .color-box .color-item-box.active,
            
            .prd-info-box .color-box .color-item-box:hover {
                border: 2px solid var(--color-default);
            }

    /******** Price Table **********/
    .prd-info-box .label-price-table {
        margin-bottom: var(--prd-info-label-space);
        text-transform: uppercase;
        font-weight: 700;
        font-size: 1.3rem;
        color: var(--color-heading);
    }

        .prd-info-box .label-price-table span {
            font-weight: 400;
            font-size: 1.3rem;
            font-style: italic;
            text-transform: none;
        }

    .prd-info-box .prd-price-table {
        border: 0;
        border-collapse: collapse;
        border-spacing: 0;
        width: 100%;
        font-size: 1.3rem;
        margin-bottom: var(--prd-info-item-space);
    }

        .prd-info-box .prd-price-table th {
            margin: 0;
            font-weight: 500;
        }

        .prd-info-box .prd-price-table td {
            font-weight: 400;
        }

/******** Product Options Card **********/

.prd-option-card-item,
.prd-option-card-item-text {
    border-radius: 10px;
    background-color: #fff;
    padding: 10px;
    border: 1px solid #e2e2e2;
    box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.08);
    margin-bottom: 15px;
}

    .prd-option-card-item:hover,
    .prd-option-card-item-text:hover {
        border-color: var(--color-primary);
    }

    .prd-option-card-item:hover img {
        -webkit-animation: policy 1.2s linear;
        animation: policy 1.2s linear;
    }

    .prd-option-card-item .thumb-box {
        overflow:hidden;
        border-radius: var(--border-radius-product-image);
    }

    .prd-option-card-item .text-box {
        padding: 10px 0 10px 0;
    }

        .prd-option-card-item .text-box .title-box {
            font-size: 1.3rem;
            font-weight: 700;
            height: 40px;
            color: var(--color-product-name);
        }

        .prd-option-card-item .text-box .price-box,
        .prd-option-card-item-text .price-box {
            font-size: 1.2rem;
            font-weight: 400;
            padding: 10px 0 0 0;
        }

            .prd-option-card-item .text-box .price-box span,
            .prd-option-card-item-text .price-box span {
                font-size: 1.4rem;
                font-weight: 700;
                color: var(--color-price);
            }


    .prd-option-card-item-text .title-box {
        font-size: 1.3rem;
        font-weight: 700;
        color: var(--color-product-name);
    }
    .prd-option-card-item-text .desc-box {
        padding: 10px 0 0 0;
    }

    @media(max-width: 991px) {
        .prd-info-box {
        padding-top: 20px;
        padding-left: 0;
    }
}
/* ============================================================================
   Calculateur v2 — feuille AUTONOME (route /p uniquement)
   ----------------------------------------------------------------------------
   Tout ce qui est propre au calculateur vit ici : loader, sections, pastilles,
   paliers, lignes, cartes, replis, recapitulatif, modale, responsive.
   Aucune dependance a page_items.css ni a calculator.css : les deux
   calculateurs ne coexistent jamais sur une page, l'isolation est totale.
   Prefixe impose : .calc2-*  — conteneur : #calc2-widget
   ========================================================================== */

/* ---------------------------------------------------------------------------
   TYPOGRAPHIE — on n'en declare pas.
   Tailles, familles et graisses sont HERITEES du site. Declarer les siennes
   faisait paraitre la page ecrasee : le calculateur sortait a 13 px la ou le
   reste du site est a 14 px (--font-size-base: 1.4rem).
   Les deux seules exceptions ci-dessous sont COPIEES du site, pas inventees :
     - titre de section : 2rem / 700, comme .page-title-item-box1 .title-txt
     - total du recapitulatif : 2rem, pour qu'il reste le point de fixation
   --------------------------------------------------------------------------- */

#calc2-widget {
    --c2-text: #3f4045;
    --c2-heading: #222222;
    --c2-muted: #8a8c93;
    --c2-border: #eaeaea;
    --c2-border-strong: #d4d4d4;
    --c2-surface: #ffffff;
    /* Les visuels produit sont des carres blancs detoures : tout fond gris
       derriere eux se voit comme un cadre parasite. Le calculateur est donc
       blanc partout, et seul le rail porte une teinte, tres legere. */
    --c2-surface-alt: #ffffff;
    --c2-accent: #0fb930;
    --c2-accent-dark: #0b8f25;
    /* Fond de selection — reserve aux blocs SANS image (paliers, lignes).
       Sur une carte qui contient un visuel a fond blanc, ce fond est
       decoupe par le carre blanc de l'image : la, c'est filet + texte. */
    --c2-accent-soft: #daf3e1;
    --c2-radius: 8px;
    --c2-radius-lg: 12px;
    --c2-gap: 12px;

    position: relative;
    color: var(--c2-text);
}

/* ---------- Etats ---------- */

#calc2-widget .calc2-state { width: 100%; }
#calc2-widget .d-none { display: none !important; }

/* PAS de loader maison ici.
   Le site en a UN seul, .loader-spiner (page_items.css, charge globalement),
   deja utilise par le calculateur v1 et le moteur de maquette. Une copie
   « alignee sur » l'original avait ete ecrite puis retiree : elle divergeait
   des le premier reglage, et multiplier les loaders est le plus sur moyen de
   se retrouver avec autant de versions que d'ecrans.
   Seule l'ADAPTATION a un corps de modale reste ici (voir plus bas). */

#calc2-widget .calc2-error {
    text-align: center;
    padding: 48px 16px;
}

#calc2-widget .calc2-btn-retry {
    border: 0;
    background: none;
    color: var(--c2-accent-dark);
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    font: inherit;
}

/* ---------- Grille : colonne unique + recapitulatif ---------- */

#calc2-widget .calc2-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 28px;
    align-items: start;
}

#calc2-widget .calc2-col { min-width: 0; }

/* ---------- Sections ---------- */

#calc2-widget .calc2-sec { margin: 0 0 30px; }

/* ---------- En-tete de section = le rail ----------
   Le rail porte le TITRE, pas le contenu : c'est un separateur de section
   avec son intitule dedans, pas un cadre autour des options. Les jeux
   d'options restent sur blanc, ils respirent.
   Filets haut et bas qui s'estompent aux extremites + halo central.
   Pour tester la variante verte : --c2-rail-glow: 15 185 48 et alpha 0.05.
   Reserve : le vert porte deja la selection, un halo vert partout dilue
   ce signal. */

#calc2-widget .calc2-rail,
#calc2-widget .calc2-sec-head {
    --c2-rail-line: 226 226 226;
    --c2-rail-glow: 0 0 0;
    --c2-rail-glow-alpha: 0.032;
    --c2-rail-fade: 12%;

    background-image:
        linear-gradient(to right,
            rgb(var(--c2-rail-line) / 0) 0%,
            rgb(var(--c2-rail-line) / 1) var(--c2-rail-fade),
            rgb(var(--c2-rail-line) / 1) calc(100% - var(--c2-rail-fade)),
            rgb(var(--c2-rail-line) / 0) 100%),
        linear-gradient(to right,
            rgb(var(--c2-rail-line) / 0) 0%,
            rgb(var(--c2-rail-line) / 1) var(--c2-rail-fade),
            rgb(var(--c2-rail-line) / 1) calc(100% - var(--c2-rail-fade)),
            rgb(var(--c2-rail-line) / 0) 100%),
        radial-gradient(60% 80% at 50% 50%,
            rgb(var(--c2-rail-glow) / var(--c2-rail-glow-alpha)) 0%,
            rgb(var(--c2-rail-glow) / calc(var(--c2-rail-glow-alpha) * .62)) 56%,
            rgb(var(--c2-rail-glow) / 0) 100%);
    background-repeat: no-repeat;
    background-size: 100% 1px, 100% 1px, 100% 100%;
    background-position: top, bottom, center;
}

#calc2-widget .calc2-sec-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    padding-block: 14px;
}

#calc2-widget .calc2-sec-title {
    /* copie de .page-title-item-box1 .title-txt */
    font-size: 2rem;
    font-weight: 700;
    color: var(--c2-heading);
    white-space: nowrap;
}

/* Le groupement est porte par le rail, pas par un trait : on ne garde qu'un
   espaceur pour repousser la valeur courante a droite. */
#calc2-widget .calc2-sec-rule { flex: 1; }

/* ---------- Rail : bloc en creux qui groupe un jeu d'options ----------
   Un trait fin ne groupe rien. Le rail donne une surface propre a chaque
   section : l'oeil voit un bloc, pas une rangee de boutons en vrac.
   Le halo tres discret vient du haut, comme une lumiere rasante. */

/* Le rail vit sur .calc2-sec-head (voir plus haut) : il decoupe les sections.
   Les jeux d'options restent sur blanc et gardent leur propre bordure quand
   ils en ont une — aucun cadre dans un cadre. */

#calc2-widget .calc2-sec-aside {
    color: var(--c2-muted);
    white-space: nowrap;
}

/* Bouton « detail » — NOIR au repos, vert au survol.
   Historique : gris plat (invisible), vert plein (trop fort), vert dilue,
   puis gris clair sur fond clair — invisible a nouveau, le rail de l'en-tete
   etant lui-meme gris.

   Le noir tranche sur ce rail sans reprendre le vert, qui dans ce calculateur
   veut dire « choix fait » (filets de selection, libelles selectionnes,
   quantite personnalisee, bouton Appliquer). Six pastilles vertes au repos
   diluaient ce signal ; une seule sous le curseur ne le dilue pas.

   Effet de bord : uniformement noires, elles restent lisibles sans devenir des
   balises criardes, ce qui permet de garder la loupe collee a son titre plutot
   que de la deplacer en tete de ligne pour aligner la colonne. */
#calc2-widget .calc2-help {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #091017;
    border-radius: 6px;
    background: #091017;
    color: #fff;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: background-color .15s, color .15s, border-color .15s;
}

#calc2-widget .calc2-help i { font-size: 1.3rem; }

/* Vert reserve au survol. Au repos le vert en ferait six balises concurrentes
   de la selection ; sous le curseur il n'y en a qu'une a la fois, donc il
   signale l'interactivite sans diluer le signal « choix fait ». */
#calc2-widget .calc2-help:hover {
    background: var(--c2-accent);
    border-color: var(--c2-accent);
}

#calc2-widget .calc2-help:focus-visible {
    outline: 2px solid var(--c2-accent);
    outline-offset: 2px;
}

/* ---------- Hero produit ----------
   Aucune regle ici : le hero reutilise .page-hero-hub de page_items.css,
   la meme construction que les hubs Univers. Le panneau « bulle » facon DLE
   a ete essaye puis abandonne — sur fond clair il ne rendait pas. */

/* ---------- Selecteur de produit ----------
   Bloc de texte identique a la route /2 (titre + paragraphe), cartes en
   revanche compactes : rail Owl au lieu de la grille col-2 pleine largeur,
   et pas de prix. Le « a partir de » compare des paliers differents d'un
   produit a l'autre, il n'avait rien a faire dans un comparateur. */

/* Titre + paragraphe, comme sur /2. Seuls les ESPACEMENTS sont recalibres :
   .page-title-item-box1 porte un padding vertical de 3rem, dimensionne pour un
   titre de section isole. Ici il est suivi d'un paragraphe puis de vignettes
   compactes — a 3rem le titre flottait loin de son propre texte tandis que le
   texte collait aux vignettes. On resserre au-dessus du paragraphe et on rend
   l'air en dessous. */
.calc2-switch .page-title-item-box1 {
    padding-top: 0;
    padding-bottom: 10px;
}

.calc2-switch-lead {
    margin: 0 0 22px;
    max-width: 90ch;
}

/* Owl pilote la largeur des items : pas de flex ici, sinon conflit. */
.calc2-switch-rail { padding: 2px 0 6px; }

.calc2-switch-rail .owl-stage { display: flex; align-items: stretch; }
.calc2-switch-rail .owl-item { display: flex; }

.calc2-switch-item {
    width: 100%;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    background: #fff;
    padding: 12px 10px;
    cursor: pointer;
    text-align: center;
    font: inherit;
    line-height: 1.3;
}

.calc2-switch-item:hover { border-color: #d4d4d4; }

/* Meme grammaire que partout : filet 2px + texte vert gras, pas de fond. */
.calc2-switch-item.is-on {
    border: 2px solid #0fb930;
    padding: 11px 9px;
    cursor: default;
}

.calc2-switch-body { display: block; }

.calc2-switch-item.is-on .calc2-switch-name {
    color: #0b8f25;
    font-weight: 700;
}

.calc2-switch-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 104px;
    margin: 0 0 10px;
}

.calc2-switch-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Hauteur FIXE : toutes les cartes s'alignent quelle que soit la longueur du
   titre, au lieu d'un bas de rail en dents de scie. Valeurs reprises de
   .prd-card-grid-item .prd-info .prd-title-box. */
.calc2-switch-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 44px;
    font-weight: 700;
    color: #222;
}

.calc2-switch-item.is-on .calc2-switch-name { color: #0b8f25; }

/* Fleches Owl — discretes, hors du flux des vignettes. */
.calc2-switch-rail .owl-nav button.owl-prev,
.calc2-switch-rail .owl-nav button.owl-next {
    position: absolute;
    top: 56px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #eaeaea;
    color: #8a8c93;
}

.calc2-switch-rail .owl-nav button.owl-prev { left: -10px; }
.calc2-switch-rail .owl-nav button.owl-next { right: -10px; }

.calc2-switch-rail .owl-nav button:hover { border-color: #0fb930; color: #0b8f25; }
.calc2-switch-rail .owl-nav button.disabled { opacity: .3; }

.calc2-owl-prev,
.calc2-owl-next {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}

.calc2-owl-prev { transform: rotate(-135deg) translate(-1px, -1px); }
.calc2-owl-next { transform: rotate(45deg) translate(-1px, -1px); }

@media (max-width: 575px) {
    .calc2-switch-thumb { height: 80px; }
    .calc2-switch-name { -webkit-line-clamp: 1; }
}

/* ---------- Produits similaires, bas de page ----------
   AUCUNE regle ici, volontairement. Le bas de page utilise Product_Large,
   la carte produit standard du site, exactement comme la route /2.

   Une version compacte propre au calculateur (.calc2-sim-item) a existe puis
   a ete retiree : elle rendait mal et, surtout, elle faisait diverger pour la
   seule page /p un item que /2, le Blog et les Univers partagent. La frontiere
   est la : le comparateur AU-DESSUS du calculateur a ses propres vignettes
   parce qu'il pilote le calculateur, le bas de page parle le vocabulaire du
   site. Si ces cartes doivent changer, c'est dans prd_card_large.css et pour
   tout le monde. */

/* ---------- Rangee Couleurs : visuel carre + pastilles ----------
   Le visuel n'a plus de bandeau a lui. Il vit ici, en carre, a gauche des
   pastilles : il change a la selection et s'ouvre en grand au clic. On gagne
   toute la hauteur de l'ancien bloc pour la meme information. */

#calc2-widget .calc2-colorrow {
    display: flex;
    align-items: center;
    gap: 20px;
}

#calc2-widget .calc2-visual {
    position: relative;
    flex: 0 0 124px;
    width: 124px;
    height: 124px;
    padding: 8px;
    border: 1px solid var(--c2-border);
    border-radius: var(--c2-radius-lg);
    background: var(--c2-surface);
    cursor: zoom-in;
}

#calc2-widget .calc2-visual:hover { border-color: var(--c2-border-strong); }

#calc2-widget .calc2-visual img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Pastille loupe, coin bas-droit — signale que l'image s'agrandit. */
#calc2-widget .calc2-visual-zoom {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--c2-surface);
    border: 1px solid var(--c2-border);
}

#calc2-widget .calc2-visual-zoom::before,
#calc2-widget .calc2-visual-zoom::after {
    content: "";
    position: absolute;
    background: var(--c2-muted);
}

#calc2-widget .calc2-visual-zoom::before {
    left: 5px; top: 9px; width: 9px; height: 1px;
}

#calc2-widget .calc2-visual-zoom::after {
    left: 9px; top: 5px; width: 1px; height: 9px;
}

#calc2-widget .calc2-visual:hover .calc2-visual-zoom { border-color: var(--c2-accent); }
#calc2-widget .calc2-visual:hover .calc2-visual-zoom::before,
#calc2-widget .calc2-visual:hover .calc2-visual-zoom::after { background: var(--c2-accent-dark); }

#calc2-widget .calc2-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
}

@media (max-width: 575px) {
    #calc2-widget .calc2-colorrow { gap: 14px; }
    #calc2-widget .calc2-visual { flex: 0 0 96px; width: 96px; height: 96px; }
}

/* overflow reste VISIBLE ici : l'infobulle est un ::after de ce bouton, un
   overflow: hidden la couperait net. Le rognage rond du visuel est deja
   assure par le border-radius de .calc2-sw-flat / .calc2-sw-svg. */
#calc2-widget .calc2-sw {
    position: relative;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    box-shadow: 0 0 0 1px var(--c2-border-strong);
}

#calc2-widget .calc2-sw:hover { box-shadow: 0 0 0 1px var(--c2-muted); }

#calc2-widget .calc2-sw.is-on {
    box-shadow: 0 0 0 2px var(--c2-surface), 0 0 0 4px var(--c2-accent);
}

#calc2-widget .calc2-sw-flat,
#calc2-widget .calc2-sw-svg {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
}

/* ---------- Infobulle des pastilles ----------
   Elle n'est plus rendue ici. Le nom de la couleur passe par data-tip et la
   bulle commune du calculateur (tip2.css) : une seule bulle pour les pastilles
   produit, les encres du logo et les couleurs de texte.

   Ce bloc faisait le travail en ::after depuis data-color. Il tenait tant
   qu'il s'agissait d'un mot, mais un pseudo-element ne contient que du texte
   — donc pas le tableau de correspondances demande sur les couleurs — et se
   fait rogner par le premier ancetre en overflow: hidden. Il avait deja fallu
   une regle :first-child pour rattraper le debordement en bout de rangee. */

/* ---------- Quantite : paliers portant le prix ---------- */

/* Piste FIXE, pas 1fr. Avec auto-fit + 1fr les pistes s'etirent pour remplir
   la ligne : deux valeurs donnaient deux cartes a 50 % de large, sans rapport
   avec la longueur de leur libelle. auto-fill garde les pistes vides en fin de
   ligne, justify-content: start colle le tout a gauche.
   Concerne aussi les paliers de quantite, qui partagent cette classe — un
   produit a deux paliers avait le meme probleme. */
#calc2-widget .calc2-tiers {
    display: grid;
    grid-template-columns: repeat(auto-fill, 132px);
    justify-content: start;
    gap: 8px;
}

#calc2-widget .calc2-tier {
    border: 1px solid var(--c2-border);
    border-radius: var(--c2-radius);
    background: var(--c2-surface);
    padding: 9px 4px;
    cursor: pointer;
    text-align: center;
    line-height: 1.3;
}

#calc2-widget .calc2-tier:hover { border-color: var(--c2-border-strong); }

/* ETAT SELECTIONNE — une seule grammaire pour tout le calculateur :
   filet vert 2px + texte vert GRAS, jamais de fond plein.
   Deux raisons. D'abord l'uniformite : un fond plein est impossible sur les
   cartes qui contiennent un visuel a fond blanc (le carre blanc y ferait un
   trou), donc il aurait fallu deux langages de selection dans le meme widget.
   Ensuite le CTA : « Demander un devis » est le seul bloc vert plein de la
   page. Multiplier les aplats verts lui ferait concurrence. */
#calc2-widget .calc2-tier.is-on {
    border: 2px solid var(--c2-accent);
    padding: 8px 3px;
    background: var(--c2-surface);
}

#calc2-widget .calc2-tier-n {
    display: block;
    color: var(--c2-heading);
}

#calc2-widget .calc2-tier-p {
    display: block;
    color: var(--c2-muted);
}

#calc2-widget .calc2-tier.is-on .calc2-tier-n,
#calc2-widget .calc2-tier.is-on .calc2-tier-p {
    color: var(--c2-accent-dark);
    font-weight: 700;
}

/* Ligne « quantite precise » — alternative aux paliers, donc elle doit se
   lire comme une option offerte et non comme une mention de bas de bloc.
   Gris + colle aux cartes, elle disparaissait. Respiration verticale (py-3
   Bootstrap) + texte vert : elle se detache des paliers sans ajouter de
   cadre, et le vert la rattache au reste du vocabulaire de selection. */
#calc2-widget .calc2-qtyfree {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 20px 0 0;
    padding: 1rem 0;
    color: var(--c2-accent-dark);
}

/* Le champ etait blanc sur blanc, donc invisible. Filet et fond vert tres
   dilues : il se voit sans crier, et il se rattache visuellement aux paliers
   dont il est l'alternative. */
#calc2-widget .calc2-qtyfree input {
    width: 104px;
    height: 38px;
    border: 1px solid rgba(15, 185, 48, .35);
    border-radius: var(--c2-radius);
    background: rgba(15, 185, 48, .05);
    padding: 0 10px;
    font: inherit;
    font-weight: 700;
    color: var(--c2-accent-dark);
}

#calc2-widget .calc2-qtyfree input:focus {
    outline: none;
    border-color: var(--c2-accent);
    background: var(--c2-surface);
    box-shadow: 0 0 0 3px rgba(15, 185, 48, .14);
}

#calc2-widget .calc2-qty-hint {
    color: #c0392b;
    font-weight: 700;
}

/* ---------- Lignes radio : variante, options, livraison ---------- */

#calc2-widget .calc2-rows {
    border: 1px solid var(--c2-border);
    border-radius: var(--c2-radius);
    overflow: hidden;
}

#calc2-widget .calc2-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--c2-border);
    background: var(--c2-surface);
    padding: 11px 14px;
    cursor: pointer;
    text-align: left;
    font: inherit;
}

#calc2-widget .calc2-row:last-child { border-bottom: 0; }
#calc2-widget .calc2-row:hover { background: var(--c2-surface-alt); }
#calc2-widget .calc2-row.is-on { background: var(--c2-surface); }

#calc2-widget .calc2-radio {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border: 1px solid var(--c2-border-strong);
    border-radius: 50%;
    background: var(--c2-surface);
}

#calc2-widget .calc2-row.is-on .calc2-radio {
    border: 5px solid var(--c2-accent);
}

#calc2-widget .calc2-row-lbl {
    flex: 1;
    color: var(--c2-heading);
}

#calc2-widget .calc2-row-p {
    color: var(--c2-muted);
}

#calc2-widget .calc2-row.is-on .calc2-row-lbl,
#calc2-widget .calc2-row.is-on .calc2-row-p {
    color: var(--c2-accent-dark);
    font-weight: 700;
}

/* ---------- Cartes : marquage ---------- */

/* Piste FIXE, pas auto-fit : avec auto-fit les cartes s'etirent pour remplir
   la ligne, donc un attribut a 6 valeurs et un autre a 5 ne donnaient pas la
   meme largeur — Recto et Verso ne s'alignaient pas. En piste fixe, une carte
   fait toujours la meme taille et les rangees se superposent proprement.
   auto-fill (et non auto-fit) garde les pistes vides en fin de ligne. */
/* Piste de 172px, soit la largeur ou « Transfert quadri 2 faces identiques »
   tient sur deux lignes. A 110px, chaque mot prenait sa ligne : les libelles
   se lisaient en colonnes verticales et les cartes montaient a quatre lignes
   de texte, d'ou des rectangles etroits et hauts. La largeur est dictee par
   le libelle le plus long, pas par la vignette. */
#calc2-widget .calc2-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, 176px);
    justify-content: start;
    gap: 10px;
}

/* Hauteur FIXE egale a la largeur : la carte est un carre, quel que soit le
   nombre de lignes du libelle. Sans hauteur fixe, une valeur a une ligne et
   une valeur a deux lignes donnaient deux hauteurs differentes dans la meme
   rangee. Le texte long est tronque plutot que d'etirer la carte. */
#calc2-widget .calc2-card {
    display: flex;
    flex-direction: column;
    height: 176px;
    border: 1px solid var(--c2-border);
    border-radius: var(--c2-radius);
    background: var(--c2-surface);
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    /* Centre comme les paliers de quantite et les vignettes du comparateur :
       tout ce qui est cliquable dans le calculateur centre son libelle. */
    text-align: center;
    font: inherit;
}

#calc2-widget .calc2-card:hover { border-color: var(--c2-border-strong); }

/* Filet 2px vert + texte vert gras. Pas de compensation de padding a faire :
   la carte n'en a plus, et box-sizing: border-box absorbe le pixel. */
#calc2-widget .calc2-card.is-on {
    border: 2px solid var(--c2-accent);
    background: var(--c2-surface);
}

#calc2-widget .calc2-card-body {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 10px 10px;
    overflow: hidden;
}

/* 500 et non 700 : a 700 le libelle gagnait assez de largeur pour passer de
   deux a trois lignes, et la ligne de prix sortait de la carte a hauteur fixe.
   Le vert porte deja la selection, le gras n'a qu'a l'appuyer. */
#calc2-widget .calc2-card.is-on .calc2-card-n,
#calc2-widget .calc2-card.is-on .calc2-card-p {
    color: var(--c2-accent-dark);
    font-weight: 500;
}

/* Bandeau image a fond perdu : ni padding avant, ni marge apres. Les visuels
   sont detoures sur blanc, donc du padding autour ne produisait que du vide
   supplementaire autour d'un vide deja present dans l'image.
   Hauteur fixe et non aspect-ratio : un carre calcule sur la largeur de la
   carte mangeait toute la hauteur et repoussait le texte hors du carre.
   L'image reste carree d'elle-meme via object-fit: contain.

   Le visuel remplit le bandeau : le JS sert image_url(../../theme/css/items/calculator/400x400) et non
   image_thumb_url(../../theme/css/items/calculator/50x50). Avec la vignette, max-width/max-height plafonnaient
   sans jamais agrandir, donc l'image restait a 50px au centre d'un bandeau
   deux fois plus haut. */
#calc2-widget .calc2-card-img {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    height: 96px;
    width: 100%;
    margin: 0;
    background: var(--c2-surface);
    overflow: hidden;
}

/* 100% et non max-*: la source fait 400px, elle DOIT etre redimensionnee a la
   hauteur du bandeau. contain garde le carre et evite toute deformation. */
#calc2-widget .calc2-card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Deux lignes maximum : au-dela on tronque, sinon le libelle repousserait le
   prix hors de la carte a hauteur fixe. */
#calc2-widget .calc2-card-n {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--c2-heading);
}

#calc2-widget .calc2-card-p {
    display: block;
    color: var(--c2-muted);
}

/* ---------- Livraison : selecteur de pays ---------- */

#calc2-widget .calc2-country {
    width: 100%;
    height: 40px;
    border: 1px solid var(--c2-border-strong);
    border-radius: var(--c2-radius);
    padding: 0 10px;
    margin: 0 0 12px;
    font: inherit;
    color: var(--c2-heading);
    background: var(--c2-surface);
}

/* ---------- Recapitulatif ---------- */

/* ---------- Panneau de prix : carte a trois bandes ----------
   Bandes haute et basse en vert tres dilue, corps blanc. Pas de rail ici,
   volontairement : le calculateur utilise deja un halo gris pour ses
   separateurs de section, et du gris pose sur du gris ne separe rien.

   Historique des essais : navy #000954 (en-tete du site) puis #091017 (pied
   de page). Les deux ont ete abandonnes. Le probleme n'etait pas la teinte
   mais la VALEUR : un aplat sombre au milieu d'une page en blanc et teintes
   claires est le point le plus contraste de l'ecran, donc l'oeil y revient
   sans arret, meme quand on lit ailleurs. Le panneau doit etre trouvable,
   pas dominant.

   Le vert retenu (#f2faf4) est plus clair que le fond du bouton loupe : les
   bandes ne sont pas des actions, elles delimitent. Le rapport tient —
   loupe plus soutenue que le panneau, filet vert plein pour la selection. */

#calc2-widget .calc2-summary {
    /* Bandeaux GRIS, pas verts.

       Le vert signale la selection dans tout le calculateur — palier de
       quantite actif, pastille choisie, onglet de vue courant. Un bandeau vert
       qui ne se selectionne pas fait donc une promesse fausse, et il isolait
       visuellement le panneau au milieu d'une page batie sur des rails et des
       aplats gris.

       Memes valeurs que les en-tetes de carte de la maquette : les deux
       modules doivent se lire comme un seul ecran. */
    --c2-panel-band: #fafafa;
    --c2-panel-line: #ededed;

    position: sticky;
    top: 20px;
    border: 1px solid var(--c2-border);
    border-radius: var(--c2-radius-lg);
    background: var(--c2-surface);
    overflow: hidden;
}

/* --- En-tete : le total --- */
#calc2-widget .calc2-sum-head {
    background: var(--c2-panel-band);
    border-bottom: 1px solid var(--c2-panel-line);
    padding: 16px 18px;
}

#calc2-widget .calc2-sum-lbl {
    display: block;
    color: var(--c2-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

#calc2-widget .calc2-sum-val {
    /* meme echelle que les titres de section — point de fixation du panneau */
    font-size: 2rem;
    display: block;
    line-height: 1.2;
    font-weight: 700;
    /* Le total suit son bandeau : sur fond gris, le vert n'etait plus un
       contraste mais le dernier reste d'un code couleur qu'on vient de
       retirer. Il reste le plus gros caractere du panneau — c'est la TAILLE
       qui en fait le point de fixation, pas la teinte. */
    color: var(--c2-heading);
}

/* --- Corps : le detail --- */
#calc2-widget .calc2-sum-body { padding: 14px 18px 16px; }

#calc2-widget .calc2-sum-rows { margin: 0 0 12px; }

#calc2-widget .calc2-sl {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    color: var(--c2-text);
}

#calc2-widget .calc2-sl-sub {
    color: var(--c2-muted);
    padding-left: 10px;
}

#calc2-widget .calc2-sl-strong {
    border-top: 1px solid var(--c2-border);
    margin-top: 6px;
    padding-top: 8px;
    color: var(--c2-heading);
}

#calc2-widget .calc2-sl-ok { color: var(--c2-accent-dark); }

#calc2-widget .calc2-sum-ttc {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--c2-border);
    padding: 12px 0 0;
    color: var(--c2-heading);
    font-weight: 700;
}

/* --- Pied : le code promo --- */
#calc2-widget .calc2-sum-foot {
    background: var(--c2-panel-band);
    border-top: 1px solid var(--c2-panel-line);
    padding: 14px 18px;
}

/* Champ combine facon barre de recherche : l'input et le bouton ne forment
   qu'un seul bloc borde de vert, donc le champ se voit. */
#calc2-widget .calc2-promo {
    display: flex;
    border: 2px solid var(--c2-accent);
    border-radius: var(--c2-radius);
    overflow: hidden;
    background: var(--c2-surface);
}

#calc2-widget .calc2-promo input {
    flex: 1;
    min-width: 0;
    height: 40px;
    border: 0;
    padding: 0 12px;
    font: inherit;
    color: var(--c2-heading);
    background: transparent;
}

#calc2-widget .calc2-promo input:focus { outline: none; }

#calc2-widget .calc2-promo button {
    flex: 0 0 auto;
    height: 40px;
    padding: 0 20px;
    border: 0;
    background: var(--c2-accent);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

#calc2-widget .calc2-promo button:hover { background: var(--c2-accent-dark); }

#calc2-widget .calc2-promo-err {
    margin: 8px 0 0;
    color: #c0392b;
}

/* ---------- Portee des selecteurs ----------
   .calc2-modal*, .calc2-loader et .calc2-tbl NE SONT PAS scopees sous
   #calc2-widget, contrairement au reste du fichier.

   Raison : la popup « Plus d'informations » du hero est une modale NATIVE
   Bootstrap, donc hors du widget, et le partial qu'elle charge utilise ce meme
   loader et ces memes tableaux. Le prefixe calc2- porte seul l'isolation, ce
   qui suffit — aucune autre feuille du site n'emploie ce prefixe.

   .calc2-modal* n'a plus de consommateur hors du widget depuis le passage a
   Bootstrap ; la regle est laissee non scopee par coherence avec les deux
   autres, et parce que la rescoper ne gagnerait rien.
   ------------------------------------------------------------------------- */

/* ---------- Modale d'information ---------- */

.calc2-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1060;
    background: rgba(0, 0, 0, 0.45);
    padding: 20px;
    overflow: auto;
}

.calc2-modal.is-open { display: flex; justify-content: center; }

/* Centrage vertical par « margin: auto 0 », PAS par align-items: center.
   Les deux centrent une boite courte, mais sur une boite plus haute que
   l'ecran align-items la centre quand meme et le haut sort du conteneur
   defilant : on ne peut plus atteindre l'en-tete ni la croix de fermeture.
   Les marges auto, elles, se rabattent a zero des que la place manque et la
   boite redevient simplement defilante. */
.calc2-modal-box {
    background: var(--c2-surface);
    border-radius: var(--c2-radius-lg);
    max-width: 820px;
    width: 100%;
    margin: auto 0;
}

.calc2-modal-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--c2-border);
}

.calc2-modal-title {
    flex: 1;
    color: var(--c2-heading);
}

.calc2-modal-x {
    border: 0;
    background: none;
    line-height: 1;
    color: var(--c2-muted);
    cursor: pointer;
    padding: 0 4px;
}

.calc2-modal-body { padding: 20px; overflow-x: auto; }

/* ---------- Popup Couleurs : deux colonnes ----------
   7/5 comme demande. Le visuel porte la decision, le texte l'accompagne. */
#calc2-widget .calc2-pop {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 20px;
    align-items: start;
    margin: 0 0 20px;
}

/* Filet leger et arrondi : les packshots sont detoures sur blanc, sans cadre
   ils flottent dans la modale, elle aussi blanche. */
#calc2-widget .calc2-pop-media {
    border: 1px solid var(--c2-border);
    border-radius: var(--c2-radius-lg);
    padding: 12px;
    background: var(--c2-surface);
}

/* Le tableau se resserre ici : en colonne etroite, le pas vertical du tableau
   pleine largeur creusait des trous entre les lignes. */
#calc2-widget .calc2-pop-side .calc2-tbl-kv td { padding: 7px 0; }

/* Donnee isolee : libelle et valeur sur la meme ligne, separes par deux points
   et une espace — pas deux colonnes de tableau. */
#calc2-widget .calc2-pop-line {
    margin: 14px 0 0;
    color: var(--c2-heading);
}

#calc2-widget .calc2-pop-line span { color: var(--c2-muted); }

/* Fiche de la valeur SELECTIONNEE — le paragraphe qui explique la technique.
   Detachee du reste par un filet vert a gauche : elle ne decrit pas l'attribut
   mais le choix en cours, et elle change a chaque vignette cliquee. */
#calc2-widget .calc2-pop-sel {
    margin: 16px 0 0;
    padding: 12px 14px;
    border-left: 3px solid var(--c2-accent);
    background: var(--c2-panel-band, #f2faf4);
    border-radius: 0 var(--c2-radius) var(--c2-radius) 0;
}

#calc2-widget .calc2-pop-sel-n {
    display: block;
    margin: 0 0 6px;
    color: var(--c2-accent-dark);
    font-weight: 700;
}

#calc2-widget .calc2-pop-sel p {
    margin: 0;
    color: var(--c2-text);
    font-size: 1.3rem;
}

/* max-height en vh : l'image doit tenir avec l'en-tete ET la rangee de
   vignettes, sinon la croix de fermeture sort du cadre sur ecran bas. */
#calc2-widget .calc2-zoom-img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 42vh;
    margin: 0 auto;
    object-fit: contain;
}

@media (max-width: 767px) {
    #calc2-widget .calc2-pop { grid-template-columns: 1fr; gap: 16px; }
    #calc2-widget .calc2-zoom-img { max-height: 34vh; }
}

/* ---------- Vignettes selectionnables de la popup Couleurs ----------
   Plus grandes que les pastilles de la rangee, et nommees : c'est tout
   l'interet du second niveau. Meme grammaire de selection que les cartes de
   marquage — filet vert 2px et libelle vert, jamais d'aplat, parce que les
   visuels sont detoures sur blanc et qu'un fond colore les couperait. */
#calc2-widget .calc2-picks {
    display: grid;
    grid-template-columns: repeat(auto-fill, 104px);
    justify-content: center;
    gap: 10px;
    margin: 0 0 20px;
}

#calc2-widget .calc2-pick {
    display: flex;
    flex-direction: column;
    height: 132px;
    padding: 0;
    border: 1px solid var(--c2-border);
    border-radius: var(--c2-radius);
    background: var(--c2-surface);
    overflow: hidden;
    cursor: pointer;
    text-align: center;
    font: inherit;
}

#calc2-widget .calc2-pick:hover { border-color: var(--c2-border-strong); }

#calc2-widget .calc2-pick.is-on { border: 2px solid var(--c2-accent); }

#calc2-widget .calc2-pick-img {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    height: 84px;
    width: 100%;
    background: var(--c2-surface);
    overflow: hidden;
}

#calc2-widget .calc2-pick-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#calc2-widget .calc2-pick-n {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 6px 6px;
    color: var(--c2-heading);
    font-size: 1.2rem;
    line-height: 1.3;
}

#calc2-widget .calc2-pick.is-on .calc2-pick-n {
    color: var(--c2-accent-dark);
    font-weight: 500;
}

#calc2-widget .calc2-help-desc {
    margin: 0 0 16px;
    color: var(--c2-text);
}

.calc2-tbl {
    width: 100%;
    border-collapse: collapse;
}

/* Texte reduit et gouttieres resserrees : la grille de paliers peut monter a
   dix colonnes (1 -> 5000), et a la taille du corps de texte le tableau
   debordait de la modale, imposant un scroll horizontal pour lire les gros
   volumes — exactement ce qu'on vient consulter. Un tableau dense est ici la
   bonne forme : on le balaie du regard, on ne le lit pas en continu. */
.calc2-tbl th,
.calc2-tbl td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--c2-border);
    text-align: left;
    white-space: nowrap;
    font-size: 1.2rem;
}

/* Le tableau cle/valeur garde la taille du corps : deux colonnes, aucun
   probleme de largeur, et il se lit ligne a ligne. */
.calc2-tbl-kv th,
.calc2-tbl-kv td { font-size: inherit; }

.calc2-tbl th {
    color: var(--c2-heading);
}

.calc2-tbl tr:nth-child(even) td { background: var(--c2-surface-alt); }
.calc2-tbl-kv { margin: 0 0 18px; }
.calc2-tbl-kv td:first-child { color: var(--c2-muted); width: 40%; }

/* ---------- Responsive ---------- */

@media (max-width: 991px) {
    #calc2-widget .calc2-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    #calc2-widget .calc2-summary { position: static; }
}

@media (max-width: 575px) {
    #calc2-widget .calc2-tiers { grid-template-columns: repeat(auto-fill, 108px); }
    #calc2-widget .calc2-cards { grid-template-columns: repeat(auto-fill, 150px); }
    #calc2-widget .calc2-card { height: 150px; }
    #calc2-widget .calc2-card-img { height: 78px; }
    /* Garde les marges auto : le centrage vaut aussi en mobile, et il se
       neutralise tout seul des que la fiche depasse la hauteur de l'ecran. */
    .calc2-modal-box { margin: auto 0; }
}

/* ---------- Bouton et fiche « Plus d'informations » (hero, route /p) ----------
   Hors #calc2-widget : le bouton vit dans le hero, et la popup est montee sur
   <body>. Le prefixe calc2- reste la garantie d'isolation. */

/* Le bouton « Plus d'informations » n'a AUCUNE regle ici : il utilise
   .default-btn .default-btn-green de page_items.css, charge globalement.
   Un bouton maison avait ete ecrit puis retire — la page produit n'a pas a
   inventer son propre vocabulaire de boutons quand le template en a un.
   Seul l'espacement de l'icone est repris ci-dessous. */
.default-btn .fa-circle-info { margin-right: 8px; }

/* ---------- Fiche produit de la popup ----------
   Meme construction en colonnes que la fiche de /2 — les classes de
   product.css font le travail — mais COMPACTEE : une modale n'a pas la hauteur
   d'une page. Sans plafond, le packshot mangeait l'ecran et la colonne de
   droite partait sous la ligne de flottaison. */

.calc2-info .prd-img-box { margin: 0; }

/* Plafond en vh : la galerie doit tenir avec l'en-tete de la modale ET les
   vignettes, sur un portable comme sur un grand ecran. */
.calc2-info .carousel-item img {
    max-height: 46vh;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    object-fit: contain;
}

/* Vignettes en grille simple, PAS en rail Owl : Owl exige une init JS qui ne
   tournerait pas sur du DOM injecte, le rail resterait en display:none.
   data-bs-slide-to est traite par Bootstrap en delegation, donc sans init. */
.calc2-info-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 0;
}

.calc2-info-thumb {
    width: 56px;
    height: 56px;
    padding: 2px;
    border: 1px solid var(--c2-border, #eaeaea);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    overflow: hidden;
}

.calc2-info-thumb:hover { border-color: var(--c2-border-strong, #d4d4d4); }

.calc2-info-thumb.is-on { border: 2px solid var(--c2-accent, #0fb930); padding: 1px; }

.calc2-info-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Colonne de droite resserree : dans une modale, le pas vertical de la fiche
   pleine page creuse des trous entre les blocs. */
.calc2-info .prd-info-box { padding: 0; }

.calc2-info .price-box { margin: 0 0 14px; }

.calc2-info .label-color-box,
.calc2-info .label-price-table { margin: 16px 0 8px; }

.calc2-info .color-box { margin: 0; }

.calc2-info .prd-price-table th,
.calc2-info .prd-price-table td {
    padding: 6px 8px;
    font-size: 1.2rem;
    white-space: nowrap;
}

.calc2-info .calc2-tbl-kv { margin: 0; }

@media (max-width: 991px) {
    .calc2-info .carousel-item img { max-height: 34vh; }
}

.calc2-info-err { margin: 0; color: #c0392b; }

/* ---------- Boutons du hero : vert + orange ----------
   Le template fait survoler le vert vers le NOIR et l'orange vers le VERT.
   Cote a cote, ca donne deux boutons de la meme couleur des qu'on survole
   l'un des deux : le vert devient noir quand l'orange l'est deja, ou l'orange
   devient vert quand le vert est encore vert. On force donc les DEUX vers le
   noir au survol — un seul bouton bouge a la fois, et la paire reste lisible.
   Surcharge LOCALE : les boutons orange du reste du site ne bougent pas. */
.calc2-hero-actions .default-btn.default-btn-orange:hover { background-color: #000; }

/* ---------- Etapes de page : configurer / visualiser / demander ----------
   Le calculateur, la maquette et (a venir) le formulaire sont trois ETAPES,
   pas trois sections d'un meme reglage. Sans separation ils s'enchainaient en
   flux continu et on ne voyait plus ou finissait l'un et ou commencait l'autre.

   Le separateur est .page-title-item-box2, le RUBAN du template — deja utilise
   par le calculateur v1 pour ses en-tetes d'etape. Aucune forme inventee ici.

   Une carte bordee avait ete essayee puis retiree : cadre dans cadre autour du
   panneau prix, et surtout son overflow: hidden cassait le position: sticky de
   ce panneau (un ancetre en overflow devient le conteneur de defilement de ses
   descendants). Le ruban separe sans encadrer, donc sans ce piege.

   Le rail a filets reste reserve aux sections INTERNES du calculateur : deux
   niveaux, deux formes, sinon ils se lisent sur le meme plan. */

/*  LE RUBAN NE PORTE AUCUN ESPACE AU-DESSUS DE LUI.

    Il en portait 4rem, herites du ruban de titre de page (3rem), dimensionnes
    pour un titre isole en haut d'ecran. Deux lignes plus bas, un
    « :first-child » les annulait a l'interieur du calculateur — et comme
    chaque ruban est le premier enfant de sa section, l'annulation les
    attrapait TOUS. Ces 4rem n'ont donc jamais servi a l'interieur : ils ne
    s'appliquaient qu'au seul ruban situe hors du widget, celui du devis, ou
    ils n'etaient pas voulus. Du code mort partout, un defaut a un endroit.

    L'espace entre deux etapes appartient au PARCOURS, pas au titre : il est
    porte une seule fois, par .calc2-quote (voir quote.css). Un titre qui
    porte sa propre marge haute la fait s'additionner a celle du conteneur des
    qu'on le deplace — c'est exactement ce qui creait le trou de 135 px avant
    « Recevez votre devis ».

    Seul reste l'air EN DESSOUS, qui lui appartient bien au ruban : il separe
    le titre de son propre contenu. */
.calc2-block-head {
    margin-bottom: 2.4rem;
}

.calc2-block { margin: 0; }

/* ---------- Le loader du site, ADAPTE a un corps de modale ----------
   .loader-spiner fait 120 px, dimensionne pour la pleine largeur d'une page.
   Dans une modale il deborde, ce qui sort une barre de defilement
   (modal-dialog-scrollable), et comme la boite est centree verticalement elle
   se recentre a chaque changement de hauteur — le loader « sautait » puis
   passait sous le pli.

   On ne redefinit PAS un loader : on redimensionne celui du site, et seulement
   dans ce contexte. Le min-height approche la hauteur du contenu charge pour
   que la modale s'ouvre deja a sa taille a peu pres definitive ; sans lui,
   reduire l'anneau ne ferait que deplacer le probleme — la boite passerait de
   60 px a 600 px d'un coup. */
/* SELECTEUR DESCENDANT, pas enfant direct.

   Ecrit d'abord « .modal-body > .loader-spiner », la regle ne s'appliquait
   qu'a la popup Fiche produit, dont le corps recoit directement le loader.
   Celle du devis a un conteneur intermediaire (.body-secondary) : le loader y
   est un petit-fils, gardait ses 120 px, et la boite passait de 140 px a la
   hauteur du formulaire d'un coup. La page changeait de hauteur, sa barre de
   defilement apparaissait puis disparaissait, et Bootstrap recompensait le
   padding du body a chaque fois — d'ou la fenetre qui « danse ».

   La lecon : une regle de presentation ne doit pas dependre de la PROFONDEUR
   d'imbrication. Celle-ci change au premier conteneur ajoute, sans erreur. */
.modal-body .loader-spiner {
    width: 56px;
    height: 56px;
    margin: 0 auto;
}

.modal-body .loader-spiner:before {
    width: 56px;
    height: 56px;
    border-width: 5px;
}

/* Le corps reserve sa hauteur AVANT que le contenu arrive.

   La marge de 162 px qui centrait le loader ne reglait le probleme qu'a
   moitie : elle donnait une hauteur de depart, mais la boite sautait quand
   meme a l'arrivee du formulaire. Une hauteur minimale sur le CONTENEUR, avec
   le loader centre dedans, tient la boite immobile — le contenu remplit une
   place deja reservee au lieu de la creer. */
.modal-body:has(> .loader-spiner),
.modal-body:has(> * > .loader-spiner) {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 380px;
}

/* Repli pour les navigateurs sans :has() — la hauteur est alors portee par la
   marge, comme avant. Moins bon, mais jamais pire qu'aujourd'hui. */
@supports not selector(:has(*)) {
    .modal-body .loader-spiner { margin: 162px auto; }
}


/* ---------- Popup fiche produit : visionneuse synchronisee ----------
   Pastilles de couleur et vignettes pilotent le meme carrousel, par index.
   Une couleur sans visuel n'a pas de diapositive : elle reste affichee mais
   n'est pas cliquable, et le curseur le dit. */
.calc2-info .color-item-box { cursor: pointer; }
.calc2-info .color-item-box.is-static { cursor: default; }

/* La vignette active suit le carrousel : Bootstrap ne marque que ses propres
   indicateurs, pas nos boutons — d'ou la synchro au changement de diapositive
   (voir product_v2_page.js). */
.calc2-info-thumb.is-on { border: 2px solid var(--c2-accent); padding: 1px; }

/* ============================================================================
   Maquette v2 — feuille propre au module (route /p uniquement)
   ----------------------------------------------------------------------------
   Miroir de items/calculator/mockup.css : le moteur en production n'est pas
   touche. Prefixe impose : .mk2-*

   Les regles ne sont PAS scopees sous #calc2-widget bien que la section y vive
   aujourd'hui : le module doit pouvoir etre monte ailleurs (popup, page de
   maquette dediee) sans deplacer sa feuille. Le prefixe porte l'isolation.
   ========================================================================== */

/* ---------- Onglets de vue (recto / verso / ...) ----------
   Affiches seulement s'il y a plusieurs vues : une pastille unique et inerte
   est un controle qui ment. */
/* La barre : vues a gauche, couleur du produit a droite. Meme grammaire que
   les en-tetes de section du calculateur, ou la valeur courante est poussee a
   droite du titre. */
.mk2-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
}

.mk2-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Pousse la couleur a droite, y compris quand il n'y a PAS d'onglet : c'est
   la marge automatique qui le fait, pas un flex sur un conteneur d'onglets
   qui pourrait ne pas exister. */
.mk2-bar-color {
    margin-left: auto;
    color: #8a8c93;
}

/* Meme grammaire de selection que le calculateur : filet vert 2px + libelle
   vert, jamais d'aplat. Une seule langue visuelle sur toute la page. */
.mk2-tab {
    padding: 7px 14px;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    background: #fff;
    color: #3f4045;
    cursor: pointer;
    font: inherit;
}

.mk2-tab:hover { border-color: #d4d4d4; }

.mk2-tab.is-on {
    border: 2px solid #0fb930;
    padding: 6px 13px;
    color: #0b8f25;
    font-weight: 500;
}

/* ---------- Scene ----------
   Plafond en vh : le packshot de maquette est un carre pleine resolution, sans
   limite il pousserait tout le bas du calculateur hors de l'ecran. */
/* Le visuel prend la largeur, les controles tiennent a droite. On a cette
   place parce que la maquette est un bloc pleine largeur — chez BigBot elle
   vit dans une carte d'etape et le produit y est ecrase. */
.mk2-grid { align-items: flex-start; }

.mk2-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 12px;
    padding: 12px;
    min-height: 160px;
}

/* Le canvas est rendu a la resolution du packshot et remis a l'echelle ici :
   le detail est conserve sur ecran dense, et le plafond en vh evite que le
   produit pousse le bas de page hors du champ. */
.mk2-stage canvas {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 58vh;
    touch-action: none;   /* le glisser du logo ne doit pas faire defiler la page */
    cursor: grab;
}

.mk2-stage canvas:active { cursor: grabbing; }

.mk2-side { display: flex; flex-direction: column; gap: 18px; }

.mk2-side-block { display: flex; flex-direction: column; gap: 8px; }

/* ---------- Titres d'etape : le rail, en plus discret ----------
   Meme construction que les en-tetes de section du calculateur
   (.calc2-sec-head) : deux filets d'un pixel qui s'estompent aux extremites,
   plus un halo central tres dilue. On reprend le motif plutot qu'un trait
   simple pour que la colonne parle la meme langue que le reste de la page.

   Trois differences, toutes dictees par la hierarchie : ces titres sont des
   ETAPES a l'interieur d'une carte, pas des sections de premier niveau. Donc
   texte a la taille du corps et non 2rem, respiration divisee par deux, et
   estompe porte a 18 % — dans une colonne etroite, un fondu court fait
   paraitre les filets pleins, et ils entrent alors en concurrence avec la
   bordure de la carte, a quelques pixels de la.

   C'est aussi ce qui reglait le probleme de depart : les titres etaient
   tasses contre le bloc precedent parce que rien ne les separait. Le rail
   fait le groupement, sans qu'on ait a empiler des marges. */
.mk2-side-title {
    --mk2-rail-line: 226 226 226;
    --mk2-rail-glow: 0 0 0;
    --mk2-rail-alpha: 0.028;
    --mk2-rail-fade: 18%;

    /* Respiration au-dessus du rail, la valeur d'un pt-3 Bootstrap.
       Portee par le TITRE et non par le bloc : le critere est « ce conteneur
       a un titre-rail », pas « ce conteneur suit un autre ». Le bloc du
       fichier, qui n'a pas de titre, ne prend donc rien — et l'espace suivrait
       le rail si on le deplacait ailleurs. */
    margin: 1rem 0 2px;
    padding-block: 9px;
    color: #222222;
    font-weight: 700;
    line-height: 1.2;

    background-image:
        linear-gradient(to right,
            rgb(var(--mk2-rail-line) / 0) 0%,
            rgb(var(--mk2-rail-line) / 1) var(--mk2-rail-fade),
            rgb(var(--mk2-rail-line) / 1) calc(100% - var(--mk2-rail-fade)),
            rgb(var(--mk2-rail-line) / 0) 100%),
        linear-gradient(to right,
            rgb(var(--mk2-rail-line) / 0) 0%,
            rgb(var(--mk2-rail-line) / 1) var(--mk2-rail-fade),
            rgb(var(--mk2-rail-line) / 1) calc(100% - var(--mk2-rail-fade)),
            rgb(var(--mk2-rail-line) / 0) 100%),
        radial-gradient(60% 80% at 50% 50%,
            rgb(var(--mk2-rail-glow) / var(--mk2-rail-alpha)) 0%,
            rgb(var(--mk2-rail-glow) / calc(var(--mk2-rail-alpha) * .62)) 56%,
            rgb(var(--mk2-rail-glow) / 0) 100%);
    background-repeat: no-repeat;
    background-size: 100% 1px, 100% 1px, 100% 100%;
    background-position: top, bottom, center;
}

/* Version compacte de la zone de depot pour la colonne etroite. */
.mk2-dz-sm { padding: 16px 12px; gap: 4px; }
.mk2-dz-sm .mk2-dz-ico { font-size: 2rem; }
.mk2-dz-sm .mk2-dz-txt { font-size: 1.2rem; }

.mk2-place-btns { display: flex; flex-wrap: wrap; gap: 6px; }

/* Pas de regle d'apparence ici : ces boutons portent deja .mk2-btn-ico, comme
   ceux des lignes de texte. Une seconde definition sur « .mk2-place-btns
   button » refaisait le meme travail avec des valeurs legerement differentes
   (bordure #eaeaea au lieu de #d4d4d4) et, etant plus specifique, elle
   ecrasait le blanc de la corbeille au survol — d'ou un bouton rouge a l'icone
   verte. Les deux categories doivent se ressembler : elles partagent donc UNE
   definition, pas deux qui se surveillent. */
.mk2-place-btns button { line-height: 1; }

.mk2-place-hint { margin: 0; color: #8a8c93; font-size: 1.2rem; }

/* Pas de logo = rien a placer. Des controles actifs sur une zone vide
   promettent une action qui ne fait rien. */
/* ---------- Reglages sans objet ----------
   MASQUES, pas grises. Un reglage grise dit « ceci existe et vous ne pouvez
   pas y toucher » — il faut alors deviner ce qui le debloquerait. Ici la
   reponse est toujours la meme et elle est triviale : deposer un logo. Le
   demi-etat n'apporte donc rien, il occupe une place et pose une question.

   Meme regle pour les trois etapes qui n'agissent que sur un fichier :
   detourage, encres, placement. La carte s'ouvre sur la seule zone de depot
   et se remplit a mesure que chaque reglage a un objet. */
.mk2-place.is-off,
.mk2-cutbox.is-off,
.mk2-inks.is-off { display: none; }

/* .mk2-legend n'est plus emise : le nom de la vue est porte par l'onglet
   actif et la couleur par .mk2-bar-color. La regle reste quelques temps au
   cas ou un ancien rendu en cache la referencerait encore. */
.mk2-legend {
    margin: 10px 0 0;
    color: #8a8c93;
}

/* Les messages du module (attente, pas de maquette, vue manquante, panne)
   utilisent .alert-info de Bootstrap — aucune classe maison. Volontairement
   informatifs et jamais en rouge : un produit sans maquette n'est pas une
   panne, c'est un produit dont le graphiste n'a pas encore prepare les
   visuels. */

@media (max-width: 767px) {
    .mk2-bg { max-height: 38vh; }
}

/* ---------- Depot du logo ----------
   Zone maison, pas la lib Dropzone du site : elle est singleton et se serait
   detruite mutuellement avec celle du formulaire de devis (voir mockup2.js).
   Le back-end reste le meme, seule l'interface est propre au module. */

/* Bloc de depot, FRERE de l'alerte et non imbrique dedans : l'alerte dit un
   etat, le depot est une action. Une regle .mk2-upload en flex trainait ici,
   heritee de la version a bouton : elle mettait l'invitation a gauche et la
   zone a droite, reduite a sa largeur de contenu. */
/* Le retrait vertical est porte par pt-3 dans le markup, pas ici. */
.mk2-upload { margin: 0; }

.mk2-dz {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 26px 20px;
    border: 2px dashed rgba(15, 185, 48, .45);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    text-align: center;
    transition: border-color .15s, background-color .15s;
}

.mk2-dz:hover,
.mk2-dz.is-over {
    border-color: #0fb930;
    background: #f2faf4;
}

/* L'input couvre toute la zone : le clic n'importe ou l'ouvre, sans label ni
   gestionnaire supplementaire. */
.mk2-dz-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

/* L'invitation vit DANS la zone : elle dit pourquoi deposer, la ligne suivante
   dit comment. Dehors, c'etait une legende orpheline a cote d'un cadre. */
.mk2-dz-lead {
    color: #222222;
    font-weight: 500;
    max-width: 62ch;
}

.mk2-dz-ico { font-size: 2.6rem; color: #0fb930; }
.mk2-dz-txt { color: #3f4045; }
.mk2-dz-hint { color: #8a8c93; font-size: 1.2rem; }

/* Pendant l'envoi : la zone ne repond plus et le dit. */
.mk2-dz.is-busy { opacity: .55; pointer-events: none; }

.mk2-dz-err { margin: 8px 0 0; color: #c0392b; }

/* Fichier depose — icone, nom, retrait. Remplace la zone plutot que de
   s'ajouter dessous : un seul fichier est accepte, garder la zone ouverte
   inviterait a en deposer un second. */
.mk2-dz-file {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #eaeaea;
    border-radius: 12px;
    background: #fff;
}

.mk2-dz-fico { font-size: 2.2rem; color: #0b8f25; }

.mk2-dz-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #222222;
}

.mk2-dz-del {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: 1px solid #eaeaea;
    border-radius: 6px;
    background: #fff;
    color: #8a8c93;
    cursor: pointer;
    line-height: 1;
}

.mk2-dz-del:hover { background: #c0392b; border-color: #c0392b; color: #fff; }

/* ---------- Colonne droite : detourage, bibliotheque, placement ---------- */

.mk2-select {
    width: 100%;
    height: 38px;
    padding: 0 10px;
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    background: #fff;
    font: inherit;
    color: #3f4045;
}

.mk2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    background: #fff;
    color: #3f4045;
    cursor: pointer;
    font: inherit;
}

.mk2-btn:hover { border-color: #0fb930; color: #0b8f25; }

.mk2-btn-ico {
    width: 38px;
    height: 38px;
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    background: #fff;
    color: #3f4045;
    cursor: pointer;
}

.mk2-btn-ico:hover { border-color: #0fb930; color: #0b8f25; }

/* ---------- Bibliotheque de logos ----------
   Grille et non rangee horizontale : la colonne est etroite mais haute, donc
   on gagne en lisibilite verticalement. Chez BigBot la rangee horizontale
   ecrase les vignettes pour tenir en largeur, et on n'identifie plus rien.
   Fond DAMIER : un logo detoure sur une vignette blanche est invisible. */
.mk2-lib { display: flex; flex-direction: column; gap: 8px; }

/* Intitule de liste, pas titre d'etape : pas de rail, sinon « Mes logos
   recents » aurait le meme poids que « Placement ». */
.mk2-lib-title { color: #8a8c93; font-size: 1.2rem; }

.mk2-lib-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    gap: 6px;
}

.mk2-lib-item {
    position: relative;
    aspect-ratio: 1 / 1;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    /* Gris clair uni, PAS un damier. Le damier avait ete pose pour signaler la
       transparence, mais la bibliotheque stocke le fichier D'ORIGINE : un logo
       a fond blanc y dessinait un carre blanc opaque par-dessus le damier,
       donc un contour net et parasite. Et c'etait trompeur — sur la maquette
       ce meme logo apparait detoure, le detourage etant applique au rendu.
       Un gris clair suffit a faire ressortir un logo transparent. */
    background-color: #f5f5f5;
}

.mk2-lib-item:hover { border-color: #0fb930; }

/* PAS de padding : avec object-fit: contain, une image carree dans une
   vignette carree remplirait la boite moins le padding, laissant un liseré de
   fond sur les quatre cotes — qui se lisait comme un contour parasite.
   A zero, un logo carre remplit exactement. Un logo non carre garde ses bandes
   de fond sur deux cotes, ce qui est le comportement attendu. */
.mk2-lib-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mk2-lib-del {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    cursor: pointer;
    line-height: 1;
    opacity: 0;
    transition: opacity .12s;
}

.mk2-lib-item:hover .mk2-lib-del { opacity: 1; }
.mk2-lib-del:hover { background: #c0392b; }

/* ---------- Bandeau bas : les calques texte ----------
   Une LIGNE par calque, toutes visibles. Pas besoin de selectionner pour
   corriger celui qu'on veut — c'est ce qui distingue ce modele d'un panneau
   de reglages pour le calque actif.
   Ici et pas en colonne droite : une ligne porte un champ plus ses options,
   elle est large par nature. */
.mk2-foot { margin: 18px 0 0; }

/* 4 px entre les rails : assez pour que les filets ne se touchent pas, pas
   assez pour que les lignes cessent de se lire comme une liste. */
.mk2-rows { display: flex; flex-direction: column; gap: 4px; margin: 16px 0 0; }

/* Chaque ligne porte le RAIL, en gris au repos et en vert quand elle est
   active. Pas de bordure fermee : un cadre autour d'une ligne qui contient
   deja des champs bordes faisait cadre dans cadre.

   Le rail est la construction des en-tetes de section du calculateur — filets
   haut et bas qui s'estompent aux extremites, plus un halo central tres
   dilue. Seule la TEINTE change a la selection, jamais la geometrie : la
   ligne ne bouge donc pas d'un pixel. */
.mk2-row {
    --mk2-rail: 226 226 226;
    --mk2-glow: 0 0 0;
    --mk2-glow-a: 0.03;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 16px 14px;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    background-image:
        linear-gradient(to right,
            rgb(var(--mk2-rail) / 0) 0%,
            rgb(var(--mk2-rail) / 1) 12%,
            rgb(var(--mk2-rail) / 1) 88%,
            rgb(var(--mk2-rail) / 0) 100%),
        linear-gradient(to right,
            rgb(var(--mk2-rail) / 0) 0%,
            rgb(var(--mk2-rail) / 1) 12%,
            rgb(var(--mk2-rail) / 1) 88%,
            rgb(var(--mk2-rail) / 0) 100%),
        radial-gradient(60% 80% at 50% 50%,
            rgb(var(--mk2-glow) / var(--mk2-glow-a)) 0%,
            rgb(var(--mk2-glow) / calc(var(--mk2-glow-a) * .62)) 56%,
            rgb(var(--mk2-glow) / 0) 100%);
    background-repeat: no-repeat;
    background-size: 100% 1px, 100% 1px, 100% 100%;
    background-position: top, bottom, center;
    cursor: pointer;
    transition: none;
}

/* Le rail passe au vert. Trois variables, rien d'autre — geometrie inchangee. */
.mk2-row.is-on {
    --mk2-rail: 15 185 48;
    --mk2-glow: 15 185 48;
    --mk2-glow-a: 0.06;
}

.mk2-row-txt {
    flex: 1 1 200px;
    min-width: 0;
    height: 38px;
    padding: 0 10px;
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    font: inherit;
}

.mk2-row-font { flex: 0 0 auto; width: auto; min-width: 140px; }

.mk2-row-col {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    padding: 2px;
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

.mk2-btn-ico.is-on { border-color: #0fb930; background: #0fb930; color: #fff; }

.mk2-row-del:hover { border-color: #c0392b; background: #c0392b; color: #fff; }

/* La vignette active porte le filet vert : c'est elle qui indique quel logo est
   sur la maquette, puisque la zone de depot reste toujours disponible et ne
   porte donc plus l'etat. */
.mk2-lib-item.is-on {
    border: 2px solid #0fb930;
}

/* ---------- Bouton general : effacer la vue ----------
   Pose sur l'image, en haut a droite. Il n'agit ni sur un calque ni sur un
   module : il remet la vue a zero. Le mettre dans la colonne de reglages
   l'aurait fait passer pour un reglage de plus. */
.mk2-stage { position: relative; }

.mk2-clear {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border: 1px solid #c0392b;
    border-radius: 8px;
    background: #fff;
    color: #c0392b;
    cursor: pointer;
    line-height: 1;
    transition: background-color .15s, color .15s, opacity .15s;
}

.mk2-clear:hover { background: #c0392b; color: #fff; }

/* Rien a effacer, rien a proposer : un bouton rouge actif sur une maquette
   vide n'annonce qu'une fausse manoeuvre. */
/* Meme regle que les reglages sans objet : une maquette vide n'a rien a
   effacer, donc pas de bouton. Il etait a 30 % d'opacite, ce qui laissait une
   pastille fantome en haut du visuel. */
.mk2-clear.is-off { display: none; }

/* Poignee de selection en tete de ligne : designer un calque n'est pas la meme
   intention que cliquer dans son champ pour ecrire. */
.mk2-row-grip {
    flex: 0 0 auto;
    width: 22px;
    text-align: center;
    color: #c4c4c4;
    cursor: pointer;
}

.mk2-row.is-on .mk2-row-grip { color: #0fb930; }

/* ---------- Panneau couleur : RVB et Pantone cote a cote ---------- */
.mk2-cp {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 18px;
    /* AUCUNE bordure : le panneau fait partie du rail, il ne s'y ajoute pas.
       Un filet en haut redecoupait la ligne en deux et cassait la continuite
       que le rail venait justement d'etablir. La separation est portee par
       l'espacement seul. */
    margin: 14px 0 0;
    padding: 0 4px;
}

.mk2-cp-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.mk2-cp-title { font-weight: 700; color: #222222; }

.mk2-cp-pick { display: flex; align-items: center; gap: 8px; }

/* Carree et fixe : c'est un echantillon de couleur, pas un champ. L'etirer sur
   toute la largeur lui donnait l'importance d'une zone de saisie. */
.mk2-cp-native {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 2px;
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

.mk2-cp-pick .mk2-cp-hex { flex: 1 1 auto; min-width: 0; height: 44px; }

.mk2-cp-hex,
.mk2-cp-search {
    width: 100%;
    height: 38px;
    padding: 0 10px;
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    font: inherit;
}

.mk2-cp-tbl { width: 100%; font-size: 1.2rem; }
.mk2-cp-tbl td { padding: 4px 0; }
.mk2-cp-tbl td:first-child { color: #8a8c93; width: 34%; }

/* Grille defilante : 1342 teintes, on en rend 400 au plus et la recherche
   filtre le reste. Tout afficher figerait le navigateur. */
.mk2-pt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 22px);
    gap: 3px;
    max-height: 220px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid #eaeaea;
    border-radius: 8px;
}

.mk2-pt {
    width: 22px;
    height: 22px;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
}

.mk2-pt:hover { outline: 2px solid #0fb930; outline-offset: 1px; }
.mk2-pt.is-on { outline: 2px solid #091017; outline-offset: 1px; }

.mk2-row-col {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    cursor: pointer;
    padding: 0;
}

/* Separateur entre groupes de boutons, convention des editeurs de texte :
   contenu | typographie | placement | suppression. Huit icones a la suite se
   lisent comme une rangee indifferenciee ; groupees, on trouve du premier
   coup d'oeil. */
.mk2-sep {
    flex: 0 0 auto;
    width: 1px;
    height: 24px;
    margin: 0 3px;
    background: #e0e0e0;
}

/* ---------- Focus des champs ----------
   Le contour noir par defaut du navigateur est brutal sur un rail clair, et il
   ne dit rien du vocabulaire de la page. On reprend le focus du champ de
   quantite du calculateur : filet vert fin + halo tres dilue. Meme signal
   partout, et il ne crie pas. */
.mk2-row-txt:focus,
.mk2-select:focus,
.mk2-cp-hex:focus,
.mk2-cp-search:focus {
    outline: none;
    border-color: #0fb930;
    box-shadow: 0 0 0 3px rgba(15, 185, 48, .14);
}

/* Focus clavier des boutons : visible mais dans la meme langue. */
.mk2-btn-ico:focus-visible,
.mk2-btn:focus-visible,
.mk2-row-col:focus-visible,
.mk2-pt:focus-visible {
    outline: 2px solid #0fb930;
    outline-offset: 2px;
}

/* ====================== Encres du logo ======================
   Meme grammaire que la pastille d'un calque texte : meme taille, meme rayon,
   meme anneau vert a l'ouverture. Une encre et une couleur de texte se
   choisissent de la meme facon, elles doivent donc se ressembler.

   La difference est le NUMERO : avec deux ou quatre pastilles cote a cote,
   rien ne dit laquelle est la premiere couleur. Le chiffre le dit, et il
   correspond a l'ordre d'importance detecte sur le logo. */

.mk2-ink-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mk2-ink {
    position: relative;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    cursor: pointer;
}

.mk2-ink.is-on { border-color: #0fb930; box-shadow: 0 0 0 2px rgb(15 185 48 / .25); }

/* Cercle blanc cercle de noir : le chiffre doit rester lisible sur une encre
   claire comme sur une encre sombre, et on ne peut pas savoir laquelle a
   l'avance. */
.mk2-ink-n {
    position: absolute;
    right: -3px;
    bottom: -3px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border: 1px solid #2b2b2b;
    border-radius: 9px;
    background: #fff;
    color: #2b2b2b;
    font-size: 10px;
    line-height: 13px;
    font-weight: 600;
}

/* Teinte imposee : ni curseur main, ni anneau au survol. La pastille INFORME,
   elle n'invite pas. */
.mk2-ink.is-fixed { cursor: default; opacity: .9; }

.mk2-ink-note {
    margin: 6px 0 0;
    color: #6b6b6b;
    font-size: 12px;
    line-height: 1.35;
}

/* Corbeille : rouge des le repos, pas seulement au survol. C'est la seule
   action irreversible de la ligne — elle doit se distinguer AVANT le clic,
   pas pendant. */
.mk2-row-del { color: #c62828; }
.mk2-row-del:hover { border-color: #c62828; background: #c62828; color: #fff; }

/* ====================== Cartes de la maquette ======================
   Deux cartes, deux sujets : le logo a droite, le texte en bas. L'entete nomme
   le sujet une fois, et les titres internes redeviennent des etapes plutot que
   six blocs autonomes empiles.

   Filet gris et non aplat vert : le bandeau « Votre maquette personnalisee »
   est deja un aplat vert plein juste au-dessus. Deux verts qui se suivent se
   font concurrence, et la carte n'a pas a crier plus fort que la section qui
   la contient. */
.mk2-card {
    display: block;
    border: 1px solid #e4e4e4;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;          /* les coins arrondis rognent l'entete */
}

.mk2-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid #ededed;
    background: #fafafa;
    color: #2b2b2b;
    font-weight: 600;
    line-height: 1.2;
}

.mk2-card-head i { color: #0fb930; }

/* 1rem franc, la valeur d'un p-3 Bootstrap. A 14px le contenu frolait la
   bordure et l'entete : la carte paraissait tassee meme une fois les etapes
   espacees entre elles, parce que c'est le POURTOUR qui manquait, pas
   l'interligne. */
.mk2-card-body { padding: 1rem; }

/* .mk2-foot ne portait qu'une marge haute ; elle reste, la carte fait le
   reste. Le bouton « Ajouter du texte » et la liste des lignes vivent
   desormais dans .mk2-card-body, donc leur marge interieure vient de la. */
.mk2-foot.mk2-card .mk2-rows { margin-top: 12px; }



/* ---------- Precision libre ----------
   Une carte comme les autres, parce que c'est un module de la maquette au
   meme titre que le logo et le texte — pas un champ orphelin pose en bas. */
.mk2-memo { margin-top: 16px; }

/* La mention « facultatif » est poussee a droite de l'entete : elle repond a
   la question qu'on se pose en lisant le titre, au moment ou on se la pose. */
.mk2-opt {
    margin-left: auto;
    color: #8a8c93;
    font-weight: 400;
    font-size: 1.2rem;
}

.mk2-memo-txt {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    color: #3f4045;
    line-height: 1.4;
    resize: vertical;
}

.mk2-memo-txt::placeholder { color: #a8aab0; }

/* ============================================================================
   Infobulle unique du calculateur v2
   ----------------------------------------------------------------------------
   Pas de selecteur de contexte (#calc2-widget ...) : la bulle vit sur <body>,
   volontairement hors de toute colonne en overflow: hidden. C'est ce qui lui
   permet de deborder du cadre de la maquette, ce que la version en ::after ne
   pouvait pas faire.
   ========================================================================== */

.tip2 {
    position: fixed;
    z-index: 2000;              /* au-dessus des modales Bootstrap (1055) */
    max-width: 280px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #091017;
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    pointer-events: none;       /* ne vole jamais le survol a sa cible */
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s ease;
    box-shadow: 0 6px 18px rgb(0 0 0 / .22);
}

.tip2.is-on { opacity: 1; visibility: visible; }

/* Fleche : un carre pivote, aligne sur le declencheur via --tip2-ax, que le
   module met a jour. Quand la bulle a ete recalee contre un bord de l'ecran,
   son centre n'est plus celui de la cible — une fleche fixee a 50 % pointerait
   alors a cote. */
.tip2::after {
    content: "";
    position: absolute;
    top: 100%;
    left: var(--tip2-ax, 50%);
    width: 8px;
    height: 8px;
    margin-top: -4px;
    transform: translateX(-50%) rotate(45deg);
    background: #091017;
}

.tip2.is-below::after { top: 0; margin-top: -4px; }

/* ---------- Carte couleur ----------
   Meme tableau que le panneau de la maquette, en plus compact. L'acheteur
   retrouve les memes cinq lignes dans le meme ordre : ce qu'il lit au survol
   est ce qu'il verra en ouvrant le panneau. */
.tip2-color { max-width: 220px; }

.tip2-chip {
    display: block;
    height: 22px;
    margin-bottom: 6px;
    border: 1px solid rgb(255 255 255 / .35);
    border-radius: 4px;
}

.tip2-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.tip2-tbl td {
    padding: 1px 0;
    vertical-align: top;
}

/* Colonne des intitules en retrait : c'est la VALEUR qu'on vient lire, elle
   doit sortir la premiere. */
.tip2-tbl td:first-child {
    width: 42px;
    color: #9fb0c0;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: .02em;
}

.tip2-tbl td:last-child {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ============================================================================
   Formulaire de devis allege (calculateur v2)
   ----------------------------------------------------------------------------
   Meme vocabulaire que le calculateur et la maquette : carte a filet gris,
   champs a rayon 8, vert reserve au focus et a la selection, orange pour
   l'action finale. Rien de nouveau n'est invente ici — c'est une section de
   plus de la meme page, pas un composant importe.
   ========================================================================== */

/*  40 px : l'ecart qui SEPARE le formulaire du calculateur, a l'interieur du
    meme conteneur de parcours (.calc2-flow, voir Product/DisplayV2). C'est la
    valeur des sections a l'interieur du calculateur — le formulaire en est la
    derniere, pas un nouveau chapitre de la page. */
.calc2-quote { margin-top: 40px; }

/*  Sur un produit SANS calculateur, le formulaire est seul : la marge n'a
    plus rien a separer et s'ajouterait au padding du conteneur. Une marge de
    separation ne doit jamais faire office de marge de tete. */
.calc2-flow > .calc2-quote:first-child { margin-top: 0; }

.calc2-quote-box {
    border: 1px solid #e4e4e4;
    border-radius: 10px;
    background: #fff;
    padding: 20px;
}

/* Deux colonnes a partir du moment ou la ligne est assez large. Sur mobile,
   une seule : des champs a moitie larges y deviennent illisibles et le clavier
   masque de toute facon le reste du formulaire. */
.calc2-q-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

@media (min-width: 576px) {
    .calc2-q-grid { grid-template-columns: 1fr 1fr; }
    .calc2-q-full { grid-column: 1 / -1; }
}

.calc2-q-field { display: flex; flex-direction: column; gap: 6px; }

.calc2-q-field label {
    margin: 0;
    color: #222222;
    font-weight: 600;
    line-height: 1.2;
}

/* L'asterisque est ROUGE et la mention facultative GRISE : les deux signaux
   sont lisibles sans lire, et ils ne disent pas la meme chose. */
.calc2-q-req { color: #c62828; }
.calc2-q-opt { color: #8a8c93; font-weight: 400; }

.calc2-q-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    background: #fff;
    color: #3f4045;
    line-height: 1.3;
}

/* Meme focus que partout ailleurs : filet vert fin et halo tres dilue. Le
   contour noir du navigateur est brutal sur un fond clair et ne dit rien du
   vocabulaire de la page. */
.calc2-q-input:focus {
    outline: none;
    border-color: #0fb930;
    box-shadow: 0 0 0 3px rgb(15 185 48 / .12);
}

.calc2-q-input::placeholder { color: #a8aab0; }

/* ---------- Livraison repliee ---------- */
.calc2-q-ship { margin-top: 16px; }

/* Pas de style de case ici : le formulaire utilise .checkbox .checkbox-success
   du gabarit (page_items.css). Une definition locale aurait donne deux cases
   differentes sur le meme site, et c'est precisement ce qu'on evite ailleurs
   en partageant une seule definition. On ne reprend que le poids du libelle,
   pour qu'il pese comme les autres etiquettes du formulaire. */
/* Le demarcateur : rail global + la case du gabarit. On ne reprend ici que
   ce qui leur est propre — l'alignement vertical de la case sur le libelle,
   que .checkbox ne gere pas quand son conteneur a du padding-block. */
.calc2-q-ship-head {
    display: flex;
    align-items: center;
    margin: 4px 0 0;
}

.calc2-q-ship-head label { margin: 0; color: #222222; font-weight: 600; }

/* Le bloc ouvert est RETRAIT derriere un filet : il dit « ceci depend de la
   case au-dessus » sans qu'on ait a l'ecrire. */
.calc2-q-ship-box {
    margin-top: 14px;
    padding-left: 14px;
    border-left: 2px solid #e4e4e4;
}

/* ---------- Envoi ---------- */

/* Pleine largeur : c'est la seule action de la section, rien ne lui dispute
   la ligne, et un bouton large est plus sur au doigt. */
.calc2-q-send {
    display: block;
    width: 100%;
    margin-top: 20px;
    padding: 14px 20px;
    font-weight: 700;
}

.calc2-q-foot {
    margin: 10px 0 0;
    color: #8a8c93;
    font-size: 1.2rem;
    text-align: center;
}

/* ====================== Complétion d'adresse ======================
   Le défaut du modèle observé chez le concurrent : une ligne de texte brute
   par résultat, toutes du même poids, et une liste qui déborde du champ sans
   s'y raccrocher. On lit cinq fois la même chose avant de repérer laquelle
   est la bonne.

   Ici chaque ligne porte DEUX niveaux : la voie en noir, le code postal et la
   ville en gris. Comme les voies se ressemblent souvent (« Avenue Thiers » à
   Bordeaux, Nice, Saint-Maur), c'est le second niveau qui fait le choix — il
   doit donc être lisible séparément, pas noyé dans la même phrase. */

.addr-wrap { position: relative; }

.addr-list {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    right: 0;                    /* exactement la largeur du champ : la liste
                                    prolonge le champ, elle ne flotte pas à côté */
    max-height: 264px;
    overflow-y: auto;
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 22px rgb(0 0 0 / .10);
}

.addr-item {
    display: flex;
    align-items: baseline;       /* aligne les deux niveaux sur la ligne de
                                    base, pas sur leurs boîtes : sans ça le
                                    gris flotte d'un pixel sous le noir */
    gap: 8px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-bottom: 1px solid #f0f0f0;
    background: none;
    text-align: left;
    cursor: pointer;
    line-height: 1.35;
}

.addr-item:last-child { border-bottom: 0; }

/* Même vert que partout, et le MÊME état pour le survol et la navigation au
   clavier : deux mises en évidence différentes feraient croire à deux choses
   différentes. */
.addr-item:hover,
.addr-item.is-on { background: rgb(15 185 48 / .10); }

.addr-line {
    flex: 1 1 auto;
    min-width: 0;
    color: #222222;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* La partie tapée, mise en gras par le module. Poids seul, pas de couleur :
   sur cinq lignes, cinq fragments colorés feraient du bruit. */
.addr-line b { font-weight: 700; }

.addr-detail {
    flex: 0 0 auto;
    color: #8a8c93;
    font-size: 1.2rem;
    white-space: nowrap;
}

/* ---------- Erreurs de validation ----------
   Message SOUS le champ concerné, jamais en liste en tête de formulaire : une
   liste oblige à faire l'aller-retour entre le reproche et le champ, et
   devient illisible passé deux lignes.

   Rouge sur la bordure ET texte : la bordure seule se rate sur un formulaire
   dense, le texte seul ne dit pas quel champ quand deux se suivent. */
.calc2-q-input.is-invalid { border-color: #c62828; }

.calc2-q-input.is-invalid:focus {
    border-color: #c62828;
    box-shadow: 0 0 0 3px rgb(198 40 40 / .12);
}

.calc2-q-err {
    margin: 4px 0 0;
    color: #c62828;
    font-size: 1.2rem;
    line-height: 1.35;
}

/* L'erreur d'envoi vit sous le bouton, pas sous un champ : elle ne reproche
   rien à une saisie, elle dit que le trajet a échoué. */
.calc2-q-err-fatal { margin-top: 10px; text-align: center; }

/* Bouton verrouille pendant l'envoi.
   Le module le desactive pour qu'un double clic ne parte pas deux fois, mais
   le theme n'a aucun style :disabled — le bouton restait identique, et il
   virait meme au noir au survol comme s'il etait actif. On le rend
   visiblement inerte.

   Porte ICI et non sur .default-btn : la regle vaut pour ce bouton-la, pas
   pour les centaines d'autres du site qu'on ne desactive jamais. */
.calc2-q-send:disabled {
    opacity: .6;
    cursor: default;
}

.calc2-q-send:disabled:hover {
    background-color: var(--color-default);   /* pas de noir : rien ne repond */
}

/* ---------- Confirmation ----------
   Occupe la place du formulaire qu'elle remplace : rien ne bouge sous les yeux
   de l'acheteur au moment ou il attend une preuve que sa demande est partie. */
.calc2-q-done { text-align: center; padding: 20px 10px; }

.calc2-q-done i {
    font-size: 3.4rem;
    color: #0fb930;
    margin-bottom: 12px;
}

.calc2-q-done h3 {
    margin: 0 0 8px;
    color: #222222;
    font-weight: 700;
}

.calc2-q-done p { margin: 0 0 6px; color: #3f4045; }

/* La mention « indésirables » est une precaution, pas l'information
   principale : elle ne doit pas peser autant que la confirmation. */
.calc2-q-done-hint { color: #8a8c93; font-size: 1.2rem; }

/* Repli de confirmation quand Bootstrap est absent : meme place que le
   message d'erreur d'envoi, mais en vert. Annoncer un succes dans le style
   d'une erreur ferait croire a un echec. */
.calc2-q-ok {
    margin-top: 10px;
    color: #0b8f25;
    font-weight: 600;
    text-align: center;
}

/* ====================== Demande d'information (produit sans calculateur) ======
   Meme presentation que le devis : ces deux ecrans occupent la meme place sur
   la page produit et concluent le meme parcours. Seuls les elements qui leur
   sont propres sont definis ici. */

/* Le chapo explique POURQUOI il n'y a pas de prix. Sans lui, un acheteur
   habitue au calculateur croit a une panne. */
.calc2-req-lead {
    margin: 0 0 20px;
    color: #3f4045;
    line-height: 1.5;
}

/* Zone de texte : meme champ que les autres, en plus haut. Redimensionnable
   verticalement seulement — en largeur elle sortirait de la grille. */
.calc2-q-area {
    min-height: 120px;
    line-height: 1.45;
    resize: vertical;
}

.calc2-q-files { margin-top: 18px; }

.calc2-q-files > label {
    display: block;
    margin: 0 0 8px;
    color: #222222;
    font-weight: 600;
}

/* Le conteneur reserve sa hauteur pendant le chargement AJAX, pour la meme
   raison que le corps des modales : sans elle, la page grandit d'un coup a
   l'arrivee du formulaire et tout ce qui suit saute. */
.calc2-req-host:empty {
    display: block;
    min-height: 420px;
}

/* ---------- Formulaires EN PAGE : pas de carte ----------
   La boite bordee servait a detacher le formulaire dans une popup. En page,
   la section a deja son bandeau de titre et occupe toute la largeur : le
   cadre ajoute une boite dans une boite, et le fond blanc sur blanc ne
   delimite rien.

   La popup, elle, GARDE sa carte : c'est ce qui l'assoit dans la modale. */
.calc2-quote > .calc2-quote-box {
    padding: 0;
    border: 0;
    background: none;
}

/* Le chapo n'a plus la marge interieure de la carte pour le decoller du
   bandeau. */
.calc2-req-lead { margin-top: 4px; }

/*  Les surcharges de intl-tel-input ont ete DEPLACEES dans page_items.css
    (global) le 2026-09-26 : le formulaire de contact porte lui aussi un champ
    telephone, et il ne charge pas ce bundle-ci. Une surcharge de bibliotheque
    n'appartient a aucune page en particulier. */

/* ---------- Champ numerique court ----------
   Une quantite tient en quatre chiffres. Sur toute la largeur, le champ
   promet une saisie longue et casse le rythme de la grille — l'oeil cherche
   ce qu'il faut ecrire d'autre.

   Le conteneur garde sa pleine largeur (l'etiquette se lit a sa place
   normale), c'est le CHAMP qui est court. */
.calc2-q-num {
    max-width: 180px;
    /* Aligne a GAUCHE : a droite, la valeur venait toucher les fleches. */
    font-variant-numeric: tabular-nums;
}

/* Les FLECHES NATIVES sont conservees : elles disent d'un coup d'oeil que le
   champ attend un nombre, et elles permettent d'ajuster sans retaper. Avec
   step=1 et min=1, elles produisent des entiers — pas de demi-piece.

   Une version precedente les masquait au motif qu'elles ajoutent du bruit.
   C'etait faire passer l'esthetique avant l'affordance sur le seul champ de
   la page ou le type de donnee n'est pas evident. */
.calc2-q-num::-webkit-outer-spin-button,
.calc2-q-num::-webkit-inner-spin-button {
    opacity: 1;              /* Chrome les cache tant que le champ n'a pas le focus */
    height: 28px;
}

/* ---------- Champ refuse par la validation serveur ----------
   MVC pose « input-validation-error » sur les champs en faute au re-rendu du
   partial. Le bandeau d'erreur parle de « champs en rouge » : encore faut-il
   qu'ils le soient. */
.calc2-q-input.input-validation-error {
    border-color: #c62828;
}

.calc2-q-input.input-validation-error:focus {
    border-color: #c62828;
    box-shadow: 0 0 0 3px rgb(198 40 40 / .12);
}

/* Message sous le champ. Meme classe que le devis : une erreur se lit au
   meme endroit sur les deux formulaires. */
.field-validation-error { display: block; }

/* ---------- Recapitulatif de la confirmation ----------
   Deux colonnes serrees, centrees sous le message. Volontairement DISCRET :
   l'information principale est que la demande est partie, le recapitulatif
   n'est la que pour reperer une faute de frappe dans l'e-mail.

   En <dl> et non en tableau : ce sont des paires libelle/valeur, pas des
   donnees a comparer ligne a ligne. */
.calc2-q-recap {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    gap: 4px 16px;
    margin: 18px auto 14px;
    padding: 14px 18px;
    border: 1px solid #ededed;
    border-radius: 8px;
    background: #fafafa;
    text-align: left;
    max-width: 380px;
}

.calc2-q-recap dt {
    color: #8a8c93;
    font-weight: 400;
    font-size: 1.2rem;
}

.calc2-q-recap dd {
    margin: 0;
    color: #222222;
    font-weight: 600;
    font-size: 1.2rem;
    word-break: break-word;
}

.prd-card-large-item {
    border-radius: 10px;
    background-color: #fff;
    padding: 0;
    border: 1px solid #e2e2e2;
    box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.08);
    margin-bottom: 15px;
    cursor: pointer;
}

    .prd-card-large-item:hover {
        border-color: var(--color-primary);
    }

        .prd-card-large-item:hover img {
            -webkit-animation: policy 1.2s linear;
            animation: policy 1.2s linear;
        }

    .prd-card-large-item .thumb-box {
        position: relative;
        width: 43%;
        max-width: 43%;
        padding: 10px 10px;
        margin: auto;
        border: none;
    }


    .prd-card-large-item .prd-info {
        padding: 10px 10px;
        width: 57%;
        max-width: 57%;
        margin: 0;
        font-size: 1.3rem;
        font-weight: 700;
    }

        .prd-card-large-item .prd-info .prd-title-box {
            margin-top: 35px;
            height: 40px;
            font-weight: 700;
        }

            .prd-card-large-item .prd-info .prd-title-box a {
                line-height: 22px;
                color: var(--color-product-name);
            }

                .prd-card-large-item .prd-info .prd-title-box a:hover {
                    color: var(--color-primary);
                }

        .prd-card-large-item .prd-info .prd-price-box {
            font-weight: 400;
            margin-top: 20px;
        }

            .prd-card-large-item .prd-info .prd-price-box span {
                color: var(--color-price);
                font-weight: 700;
                display: inline-block;
            }

/* ═══════════════════════════════════════════════════════════════════════
   Product Grid Card — variante compacte carree du prd-card-large-item.
   Layout : image carree top full-width, name + prix dessous.
   Utilise par : Product_Grid_x6.cshtml (6 produits par ligne desktop XXL).

   Responsive col chain (Bootstrap 5.3) :
     col-xxl-2 (≥1400 → 6/row)
     col-xl-2  (1200-1399 → 6/row)
     col-lg-3  (992-1199 → 4/row)
     col-md-4  (768-991 → 3/row)
     col-6     (430-767 → 2/row)
     override  (<430 → 1/row via media query ci-dessous — real mobiles S20 Ultra/iPhone Pro Max)
   ═══════════════════════════════════════════════════════════════════════ */

/* Product_Owl pattern 2 rows : colonne Owl contient 2 cards empilees verticalement.
   Espacement entre les 2 cards de la meme colonne. */
.prd-owl-column .prd-card-grid-item + .prd-card-grid-item {
    margin-top: 15px;
}

/* Real mobile break : sous 430px = 1 item full-width (image massive OK sur petit ecran) */
@media (max-width: 429.98px) {
    .prd-grid-x6-col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}


.prd-card-grid-item {
    border-radius: 10px;
    background-color: #fff;
    padding: 0;
    border: 1px solid #e2e2e2;
    box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.08);
    margin-bottom: 15px;
    cursor: pointer;
    overflow: hidden;
}

    .prd-card-grid-item:hover {
        border-color: var(--color-primary);
    }

        .prd-card-grid-item:hover img {
            -webkit-animation: policy 1.2s linear;
            animation: policy 1.2s linear;
        }

    .prd-card-grid-item .thumb-box {
        position: relative;
        width: 100%;
        aspect-ratio: 1 / 1;
        padding: 15px;
        margin: 0;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .prd-card-grid-item .thumb-box img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

    .prd-card-grid-item .prd-info {
        padding: 12px 15px 15px;
        width: 100%;
        max-width: 100%;
        margin: 0;
        font-size: 1.2rem;
        font-weight: 700;
    }

        .prd-card-grid-item .prd-info .prd-title-box {
            height: 44px;
            font-weight: 700;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            line-clamp: 2;
        }

            .prd-card-grid-item .prd-info .prd-title-box a {
                line-height: 22px;
                color: var(--color-product-name);
                text-decoration: none;
            }

                .prd-card-grid-item .prd-info .prd-title-box a:hover {
                    color: var(--color-primary);
                }

        .prd-card-grid-item .prd-info .prd-price-box {
            font-weight: 400;
            margin-top: 12px;
        }

            .prd-card-grid-item .prd-info .prd-price-box span {
                color: var(--color-price);
                font-weight: 700;
                display: inline-block;
            }


/* ═══════════════════════════════════════════════════════════════════════
   Product Similaires Calc — widget top page produit (pos 2, au-dessus du calc).
   Layout : row 6 cards (col-xxl-2 → col-6), reuse .prd-card-grid-item visual base.
   State .selected = border vert (produit actif dans le calculateur).
   Consommateur : Product_SimilairesCalc.cshtml uniquement.
   ═══════════════════════════════════════════════════════════════════════ */

.prd-similaires-calc-widget {
    margin-bottom: 2rem;
}

/* Selected state — produit actif dans le calc.
   Override cursor default (pas cliquable, deja actif). */
.prd-card-similaires-calc-item.selected {
    border-color: var(--color-primary);
    border-width: 2px;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.15);
    cursor: default;
}

    .prd-card-similaires-calc-item.selected:hover {
        border-color: var(--color-primary);
    }

        .prd-card-similaires-calc-item.selected:hover img {
            animation: none;
        }

.policy-card-item-content .policy-card-item {
    background-color: var(--bg-item-secondary);
    border-radius: 10px;
    padding: 30px 10px 30px 10px;
    height: 100%;
    border: 1px solid #e2e2e2;
    box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.08);
}

    .policy-card-item-content .policy-card-item .policy-icon {
        width: 60px;
        min-width: 60px;
        height: 60px;
        border-radius: 100%;
        overflow: hidden;
        background: #ffffff;
        margin-right: 10px;
    }

        .policy-card-item-content .policy-card-item .policy-icon:hover i {
            -webkit-animation: policy 1.2s linear;
            animation: policy 1.2s linear;
        }

        .policy-card-item-content .policy-card-item .policy-icon i {
            text-align: center;
            font-size: 25px;
        }

    .policy-card-item-content .policy-card-item .title-box {
        font-size: 1.4rem;
        font-weight: 700;
        color: #222222;
        line-height: 2.1;
        text-transform: uppercase;
    }

    .policy-card-item-content .policy-card-item .text-box {
        color: #666666;
    }

@media(max-width: 1200px) {
    .policy-card-item-content {
        margin-bottom: 15px;
    }
}

.faq-accordion {
    border-top: 1px solid var(--color-border);
    --bs-accordion-border-width: 0;
}

    .faq-accordion .faq-item .faq-header {
        border-bottom: 1px solid var(--color-border);
        position: relative;
    }

    .faq-accordion .faq-item .faq-content {
        border: 0;
        padding: 21px 0 32px;
    }

    .faq-accordion .faq-item .faq-header .faq-button {
        padding: 13px 0 10px 0;
        color: var(--color-heading);
        font-size: 16px;
        font-weight: 600;
        width: 100%;
        cursor: pointer;
        background-color: transparent;
        border: 0;
        margin: 0;
        text-align: left;
        outline: none;
        box-shadow: none;
    }

        .faq-accordion .faq-item .faq-header .faq-button .faq-active::before {
            content: "";
            display: block;
            height: 3px;
            width: 0;
            background: var(--color-body-text);
            position: absolute;
            top: -1px;
            left: 0;
            transition: all 1s;
        }

        .faq-accordion .faq-item .faq-header .faq-button:not(.collapsed) .faq-active::before {
            width: 200px;
        }