:root {
    /* Hauteur de l'en-tête collant : sert d'ancrage à tout ce qui colle en
       dessous, pour ne pas glisser derrière lui. */
    --izi-header-h: 126px;
    --izi-magenta: #e6007e;
    --izi-magenta-dark: #c4006b;
    --izi-cyan: #009fe3;
    --izi-whatsapp: #25d366;
    --izi-whatsapp-dark: #1da851;
    --izi-yellow: #ffed00;
    --izi-black: #000000;
    --izi-white: #ffffff;
    --izi-ink: #111111;
    --izi-muted: #4a4a4a;
    --izi-line: #e5e5e5;
    --izi-bg: #ffffff;
    --izi-bg-soft: #f5f5f5;
    --shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
    --radius: 14px;
    --radius-lg: 20px;
    --font-display: "Montserrat", "Futura", sans-serif;
    --font-body: "Plus Jakarta Sans", "Google Sans", sans-serif;
    --font-accent: "Montserrat", "Berlin Sans FB Demi", sans-serif;
    --ink: var(--izi-ink);
    --ink-soft: var(--izi-muted);
    --paper: var(--izi-bg);
    --paper-2: var(--izi-bg-soft);
    --accent: var(--izi-magenta);
    --accent-dark: var(--izi-magenta-dark);
    --line: var(--izi-line);
    --white: var(--izi-white);
    --mega-pink: var(--izi-magenta);
    --mega-pink-dark: var(--izi-magenta-dark);
}

* { box-sizing: border-box; }

:focus-visible {
    outline: 2px solid var(--izi-magenta);
    outline-offset: 2px;
}

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--izi-ink);
    background: #fafafa;
    min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.lazy-img { loading: lazy; }

.wrap { width: min(1180px, calc(100% - 2rem)); margin-inline: auto; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: #000;
    color: #fff;
}

.site-header a { color: inherit; }

/* ── En-tête : le bord haut de la feuille ──────────────────────────────
   Le pied de page porte la gamme de contrôle et les repères de coupe. Ici,
   la jauge de lecture : un filet qui se remplit des quatre encres à mesure
   qu'on descend. Arrivé en bas, la bande est complète — la feuille est
   imprimée. */

.mega-nav { position: relative; }

.mega-nav__ink {
    position: absolute;
    inset: auto 0 0 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.mega-nav__ink span {
    display: block;
    height: 100%;
    /* Les quatre encres dans l'ordre de la presse : noir, cyan, magenta,
       jaune. La bande est peinte en entier, puis révélée par la mise à
       l'échelle — la couleur ne se déforme donc jamais. */
    background: linear-gradient(90deg,
        #1a1a1a 0%, #009fe3 28%, #e6007e 62%, #ffed00 100%);
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
}

/* ── Condensation au défilement ───────────────────────────────────────
   Cent vingt-six pixels d'en-tête, c'est un sixième d'un écran de portable.
   Une fois la lecture engagée, la barre du haut se resserre et rend la
   place au contenu. La rangée de navigation, elle, ne bouge pas d'un
   pixel : un menu qui se déplace sous le curseur est un menu qu'on rate. */

.site-topbar__inner,
.brand img {
    transition: padding 0.22s ease, height 0.22s ease, width 0.22s ease;
}

.mega-nav.is-condensed .site-topbar__inner { padding: 0.3rem 0; }
.mega-nav.is-condensed .brand img { height: 40px; width: 40px; }
.mega-nav.is-condensed .site-topbar__phone { display: none; }

/* Le mouvement n'apporte rien d'indispensable : on le retire pour qui a
   demandé moins d'animation. La jauge, elle, reste — c'est une information,
   pas une décoration. */
@media (prefers-reduced-motion: reduce) {
    .site-topbar__inner,
    .brand img { transition: none; }
    .mega-nav__ink span { will-change: auto; }
}

/* Sur un écran étroit, la place est déjà comptée : l'en-tête y est monté
   autrement, et le resserrer casserait son empilement. */
@media (max-width: 960px) {
    .mega-nav.is-condensed .site-topbar__inner { padding: 0.7rem 0; }
    .mega-nav.is-condensed .brand img { height: 56px; width: 56px; }
}

/* ── Pied de page ──────────────────────────────────────────────────────
   Le pied de page se présente comme une feuille sortie de presse : sa gamme
   de contrôle en haut, ses repères de coupe aux quatre coins. C'est la
   signature d'un imprimeur, et cela dit ce que fait la maison avant même
   qu'on ait lu une ligne. */

.site-footer {
    margin-top: 3rem;
    background: #050505;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.92rem;
}

/* La gamme de contrôle : les quatre encres, leurs trames, et les
   superpositions deux à deux — comme sur le bord d'une vraie feuille. */
.footer-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    height: 7px;
}

.footer-inner {
    position: relative;
    padding: 2.75rem 0 1.75rem;
}

/* Les repères de coupe. Purement décoratifs, donc masqués aux lecteurs
   d'écran, et retirés sous 700 px où ils toucheraient le texte. */
.footer-crop {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 0 solid rgba(255, 255, 255, 0.28);
    pointer-events: none;
}

.footer-crop--tl { top: 1.1rem; left: -0.6rem; border-top-width: 1px; border-left-width: 1px; }
.footer-crop--tr { top: 1.1rem; right: -0.6rem; border-top-width: 1px; border-right-width: 1px; }
.footer-crop--bl { bottom: 1.1rem; left: -0.6rem; border-bottom-width: 1px; border-left-width: 1px; }
.footer-crop--br { bottom: 1.1rem; right: -0.6rem; border-bottom-width: 1px; border-right-width: 1px; }

/* ── L'appel à l'action ───────────────────────────────────────────────── */

.footer-call {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.5rem 2rem;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-call__eyebrow {
    margin: 0 0 0.35rem;
    font: 800 0.68rem/1 var(--font-display);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--izi-yellow);
}

.footer-call__title {
    margin: 0 0 0.4rem;
    font: 800 clamp(1.35rem, 2.6vw, 1.9rem)/1.15 var(--font-display);
    letter-spacing: -0.02em;
    color: #fff;
}

.footer-call__lead {
    margin: 0;
    max-width: 34rem;
    color: rgba(255, 255, 255, 0.62);
    line-height: 1.55;
}

.footer-call__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

/* ── Les colonnes ─────────────────────────────────────────────────────── */

.footer-grid {
    display: grid;
    grid-template-columns: 1.35fr repeat(4, minmax(0, 1fr));
    gap: 2rem 1.75rem;
    padding-bottom: 2rem;
}

.footer-logo {
    height: 60px;
    width: auto;
    object-fit: contain;
    display: block;
}

.footer-baseline {
    margin: 0.85rem 0 0.7rem;
    font: 800 1.05rem/1.3 var(--font-display);
    letter-spacing: -0.01em;
    color: #fff;
}

/* Trois mots, trois pastilles : la promesse tient sur une ligne. */
.footer-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
}

.footer-tags span {
    padding: 0.22rem 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
}

.footer-col h3 {
    margin: 0 0 0.85rem;
    font: 800 0.72rem/1 var(--font-display);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
}

.footer-col ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-col li + li { margin-top: 0.45rem; }

.footer-col a {
    color: rgba(255, 255, 255, 0.68);
    text-decoration: none;
    transition: color 0.15s ease;
}

.footer-col a:hover,
.footer-col a:focus-visible { color: var(--izi-cyan); }

.footer-all {
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9) !important;
}

.footer-all:hover { color: var(--izi-magenta) !important; }

/* Un contact se lit sur deux lignes : ce que c'est, puis la valeur. La
   ligne entière est cliquable — un numéro qui ne se compose pas d'un geste
   est un numéro qu'on ne compose pas. */
/* L'icône occupe sa propre colonne, sur les deux lignes : le libellé et la
   valeur restent alignés entre eux, et l'œil descend d'un contact à l'autre
   le long d'une même verticale. */
.footer-contact {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.6rem;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.footer-contact__icon {
    grid-row: 1 / 3;
    align-self: center;
    color: rgba(255, 255, 255, 0.38);
    transition: color 0.15s ease;
}

.footer-contact:hover .footer-contact__icon,
.footer-contact:focus-visible .footer-contact__icon { color: var(--izi-cyan); }

.footer-contact__label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
}

.footer-contact__value {
    display: block;
    color: rgba(255, 255, 255, 0.82);
}

.footer-contact:hover .footer-contact__value { color: var(--izi-cyan); }

/* ── La ligne du bas ──────────────────────────────────────────────────── */

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-bottom p {
    margin: 0;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.5);
}

.footer-bottom__note { font-style: italic; }

@media (max-width: 1080px) {
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
    .footer-call { grid-template-columns: minmax(0, 1fr); }
    .footer-call__actions .btn { flex: 1 1 100%; }
    .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    /* Les repères de coupe déborderaient dans le texte sur un écran étroit. */
    .footer-crop { display: none; }
    .footer-bottom { justify-content: flex-start; }
}

.brand {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.02em;
    font-size: 1.15rem;
    text-transform: uppercase;
}

.brand span { color: var(--izi-magenta); }
.brand img { height: 52px; width: auto; object-fit: contain; }
.footer-logo { height: 64px; width: auto; margin-bottom: 0.5rem; object-fit: contain; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.75rem 1.25rem;
    border-radius: 999px;
    border: 0;
    cursor: pointer;
    font-weight: 700;
    font-family: var(--font-body);
    font-size: 0.92rem;
    transition: transform .15s ease, background .15s ease;
}

.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--izi-magenta); color: var(--izi-white); }
.btn-primary:hover { background: var(--izi-magenta-dark); }
.btn-cyan { background: var(--izi-cyan); color: var(--izi-white); }
.btn-cyan:hover { filter: brightness(0.95); }

/* WhatsApp garde sa couleur de marque : c est à elle qu on reconnaît le bouton
   avant même d avoir lu ce qu il propose. */
.btn-whatsapp { background: var(--izi-whatsapp); color: var(--izi-white); }
.btn-whatsapp:hover { background: var(--izi-whatsapp-dark); }

/* L icône suit la taille et la couleur du texte du bouton. */
.btn-icon { flex: none; }
.btn-ghost { background: transparent; border: 1px solid var(--izi-line); color: var(--izi-ink); border-radius: 10px; }
.btn-yellow { background: var(--izi-yellow); color: var(--izi-black); }
.btn-dark { background: var(--izi-ink); color: #fff; }
.btn-dark:hover { background: #000; }
.btn-lg { padding: 0.95rem 1.6rem; font-size: 1rem; }
.btn-catalog {
    background: var(--izi-magenta);
    color: #fff;
    border-radius: 10px;
    white-space: nowrap;
    font-size: .8rem;
    padding: .55rem .95rem;
    flex-shrink: 0;
}

.hero { padding: 3rem 0 2rem; display: grid; gap: 1.25rem; }
.hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.4rem);
    line-height: 1.05;
    margin: 0;
    letter-spacing: -0.03em;
    max-width: 16ch;
}

.hero p { font-size: 1.1rem; color: var(--izi-muted); max-width: 44ch; margin: 0; }
.hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.hero-accent { font-family: var(--font-accent); color: var(--izi-cyan); }

.section { padding: 2rem 0 3rem; }
.section h2 {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    margin: 0 0 1rem;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

/* Boutique : 2 → 3 → 4 → 5 colonnes selon la largeur */
.catalog-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 640px) {
    .catalog-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 960px) {
    .catalog-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1rem;
    }
}

@media (min-width: 1280px) {
    .catalog-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem;
    }

    .catalog-grid .product-tile h3 {
        font-size: 0.82rem;
        padding-inline: 0.65rem;
    }

    .catalog-grid .product-tile .badge {
        margin: 0 0.65rem 0.75rem;
        font-size: 0.68rem;
    }
}

.card {
    background: var(--izi-bg-soft);
    border: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card-img {
    aspect-ratio: 1;
    background: #f7f7f7;
    overflow: hidden;
    display: grid;
    place-items: center;
    border-bottom: 1px dashed #d4d4d8;
}
.card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    padding: 0.55rem;
}
.card-body { padding: 0.9rem 1rem 1.1rem; background: #fff; }
.card-body h3 { font-family: var(--font-display); font-size: 1rem; margin: 0 0 0.35rem; }

.muted { color: var(--izi-muted); font-size: 0.92rem; }
.badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    background: var(--izi-yellow);
    color: var(--izi-black);
    padding: 0.25rem 0.55rem;
    border-radius: 6px;
}

.badge-quote { background: #f3f4f6; color: var(--izi-muted); }
.badge-price { background: rgba(0, 159, 227, 0.12); color: var(--izi-cyan); }

.layout-2 { display: grid; gap: 1.5rem; grid-template-columns: 200px 1fr; }
@media (min-width: 1280px) { .layout-2 { grid-template-columns: 220px 1fr; } }
@media (max-width: 800px) { .layout-2 { grid-template-columns: 1fr; } }

.side {
    background: var(--izi-white);
    border: 0;
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    height: fit-content;
    box-shadow: var(--shadow);
}

.side a { display: block; padding: 0.45rem 0; border-bottom: 1px solid #f0f0f0; color: var(--izi-muted); font-weight: 500; }
.side a:hover, .side a.active { color: var(--izi-magenta); }

.search { display: flex; gap: 0.5rem; margin-bottom: 1rem; position: relative; }
.search input, .form input, .form textarea, .form select {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--izi-line);
    border-radius: 8px;
    background: var(--izi-white);
    font: inherit;
}

/* ── Suggestions de recherche ──────────────────────────────────────────
   Le menu déroulant est un enfant de l'en-tête, qui impose « color: #fff »
   à tous ses liens. Posé sur un fond blanc, son texte était donc blanc sur
   blanc — invisible. Toutes les couleurs sont désormais posées ici, sans
   rien laisser à l'héritage. */

.search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    color: var(--izi-ink);
    border: 1px solid var(--izi-line);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
    z-index: 50;
    max-height: 380px;
    overflow: auto;
    display: none;
    overscroll-behavior: contain;
}

.search-dropdown.is-open { display: block; }

/* Le champ de l'en-tête est étroit ; la liste n'a pas à l'être. Elle
   s'ancre à gauche du champ et déborde vers la droite, sans jamais sortir
   de l'écran. Sans cela, « Coffret Cadeaux TNA40 » s'affichait tronqué à
   « Coffret Cadeau… », et deux références voisines devenaient
   indistinguables. */
.site-search .search-dropdown {
    left: 0;
    right: auto;
    width: max(100%, min(24rem, calc(100vw - 2rem)));
    margin-top: 0.4rem;
}

.search-hit {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 0.7rem;
    align-items: center;
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid #f1f1f1;
    text-decoration: none;
    /* On reprend la couleur au lieu de l'hériter de l'en-tête noir. */
    color: var(--izi-ink) !important;
}

.search-hit:last-child { border-bottom: 0; }

.search-hit:hover,
.search-hit.is-active {
    background: var(--izi-bg-soft);
}

.search-hit__media {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: var(--izi-bg-soft);
    overflow: hidden;
}

.search-hit__media img {
    width: 100%;
    height: 100%;
    /* Comme partout ailleurs : un visuel de produit se montre entier. */
    object-fit: contain;
    padding: 3px;
}

/* Pas de visuel disponible : un carré neutre plutôt qu'une image cassée. */
.search-hit__void {
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--izi-line);
    border-radius: 4px;
}

.search-hit__body {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.search-hit__name {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    font-size: 0.92rem;
    line-height: 1.3;
    color: var(--izi-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Le terme cherché, souligné : on voit pourquoi la suggestion remonte. */
.search-hit__name mark {
    background: rgba(255, 237, 0, 0.55);
    color: inherit;
    border-radius: 3px;
    padding: 0 0.1em;
}

/* « Option » : cette suggestion n'est pas un produit mais un choix à
   l'intérieur d'un produit. Sans cette étiquette, « A4 » et « A4 » se
   ressemblaient trop. */
.search-hit__tag {
    flex: none;
    padding: 0.08rem 0.4rem;
    border-radius: 999px;
    background: rgba(0, 159, 227, 0.12);
    color: var(--izi-cyan);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.search-hit__where,
.search-hit__price {
    font-size: 0.8rem;
    line-height: 1.3;
    color: var(--izi-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-hit__price {
    font-weight: 600;
    color: var(--izi-cyan);
}

/* Rien trouvé : on le dit, au lieu de refermer la liste sans explication. */
.search-empty {
    margin: 0;
    padding: 1rem;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--izi-muted);
}

.search-empty a {
    color: var(--izi-magenta) !important;
    font-weight: 700;
    text-decoration: underline;
}

/* Bandeau volontairement court : le configurateur doit rester visible à
   l'arrivée, sans avoir à faire défiler la page. */
.product-hero {
    display: grid;
    gap: 0;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    align-items: stretch;
    background: var(--izi-white);
    border: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
}

@media (max-width: 800px) { .product-hero { grid-template-columns: 1fr; } }
.product-hero img {
    width: 100%;
    height: 100%;
    min-height: 200px;
    max-height: 300px;
    object-fit: contain;
    object-position: center;
    background: #f7f7f7;
    padding: .75rem;
    border-right: 1px solid var(--izi-line);
}
@media (max-width: 800px) {
    .product-hero img { max-height: 220px; border-right: 0; border-bottom: 1px solid var(--izi-line); }
}
.product-info { padding: 1.4rem 1.6rem; }
.product-info h1 { font-family: var(--font-display); margin: 0 0 0.75rem; font-size: clamp(1.5rem, 3vw, 2rem); }

.flash {
    background: rgba(0, 159, 227, 0.1);
    color: var(--izi-cyan);
    border: 1px solid rgba(0, 159, 227, 0.25);
    padding: 0.8rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.form label { display: block; font-weight: 600; margin: 0.8rem 0 0.35rem; }
.form .row { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 700px) { .form .row { grid-template-columns: 1fr; } }

.checks {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border: 1px solid var(--izi-line);
    border-radius: 8px;
    padding: 0.75rem;
    background: #fff;
}

.pagination { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 1.5rem; }
.pagination a, .pagination span {
    padding: 0.4rem 0.7rem;
    border-radius: 8px;
    border: 1px solid var(--izi-line);
    background: #fff;
}

.pagination .active { background: var(--izi-magenta); color: #fff; border-color: var(--izi-magenta); }

.prose { line-height: 1.65; color: var(--izi-muted); }
.prose h2, .prose h3 { color: var(--izi-ink); font-family: var(--font-display); }

.quote-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--izi-line); }
.quote-table th, .quote-table td { padding: 0.75rem; border-bottom: 1px solid var(--izi-line); text-align: left; }
.quote-table th { background: var(--izi-bg-soft); font-size: 0.8rem; text-transform: uppercase; }

.quote-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.quote-badge__count {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--izi-magenta);
    color: #fff;
    border-radius: 999px;
    min-width: 1.25rem;
    height: 1.25rem;
    display: grid;
    place-items: center;
    font-size: 0.7rem;
    padding: 0 0.25rem;
    font-weight: 700;
}

.floating-help {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 60;
    background: #25d366;
    color: #fff;
    padding: 0.85rem 1.1rem;
    border-radius: 999px;
    font-weight: 700;
    box-shadow: 0 12px 30px rgba(37, 211, 102, 0.35);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.floating-help:hover { background: #1ebe57; color: #fff; }

.floating-help--icon {
    width: 56px;
    height: 56px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
}

.floating-help--icon .floating-help__label { display: none; }

.floating-help--icon::after {
    content: attr(data-tooltip);
    position: absolute;
    right: calc(100% + .6rem);
    top: 50%;
    transform: translateY(-50%);
    background: var(--izi-ink);
    color: #fff;
    font-size: .78rem;
    font-weight: 600;
    padding: .4rem .65rem;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
}

.floating-help--icon:hover::after,
.floating-help--icon:focus-visible::after { opacity: 1; }

.engagement-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.engagement-card {
    padding: 1.25rem;
    border: 1px solid var(--izi-line);
    border-radius: var(--radius);
    background: #fff;
}

.engagement-card h3 {
    font-family: var(--font-display);
    font-size: 1rem;
    margin: 0 0 0.5rem;
    color: var(--izi-magenta);
}

.realization-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.mega-nav { position: relative; z-index: 30; }
.site-topbar { background: #000; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.site-topbar__inner {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .7rem 0;
    flex-wrap: nowrap;
}
.site-search {
    position: relative;
    flex: 0 0 260px;
    max-width: 260px;
    min-width: 0;
    display: flex;
    align-items: stretch;
    margin-left: .75rem;
}
.site-search input {
    width: 100%;
    border: 0;
    border-radius: 999px 0 0 999px;
    padding: .6rem .9rem;
    font: inherit;
    background: #fff;
    border-right: 0;
    font-size: .88rem;
    color: var(--izi-ink);
}
.site-search input::placeholder { color: #888; }
.site-search__btn {
    border: 0;
    background: var(--izi-magenta);
    color: #fff;
    padding: 0 .95rem;
    border-radius: 0 999px 999px 0;
    cursor: pointer;
    flex-shrink: 0;
}
.site-topbar__tools {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: nowrap;
    margin-left: auto;
    flex-shrink: 0;
}
.site-topbar__phone {
    font-weight: 700;
    font-size: .82rem;
    color: #fff;
    white-space: nowrap;
}
.site-topbar__link,
.site-topbar__devis {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-weight: 600;
    font-size: .82rem;
    color: #fff;
    padding: .45rem .85rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    white-space: nowrap;
    transition: border-color .15s ease, background .15s ease;
}
.site-topbar__link:hover,
.site-topbar__devis:hover {
    border-color: #fff;
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}
.site-topbar__devis-count {
    background: var(--izi-magenta);
    color: #fff;
    border-radius: 999px;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 .3rem;
    font-size: .68rem;
    font-weight: 800;
    display: inline-grid;
    place-items: center;
}
.btn-mega-contact {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--izi-magenta);
    color: #fff;
    padding: .45rem .95rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: .82rem;
    border: 1px solid var(--izi-magenta);
}
.btn-mega-contact:hover { background: var(--izi-magenta-dark); color: #fff; border-color: var(--izi-magenta-dark); }

.site-nav { background: #000; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.site-nav__inner {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem 0;
    flex-wrap: nowrap;
    min-height: 46px;
}
.mega-nav__desktop {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.mega-nav__desktop::-webkit-scrollbar { display: none; }
.mega-nav__list {
    display: flex;
    align-items: center;
    gap: .1rem;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
    white-space: nowrap;
}
.mega-nav__item { position: relative; flex-shrink: 0; }
.mega-nav__trigger, .mega-nav__item--link a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .5rem .75rem;
    border: 0;
    background: transparent;
    font: inherit;
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
    cursor: pointer;
    border-radius: 8px;
}
.mega-nav__item--link a { text-decoration: none; }
.mega-nav__trigger:hover, .mega-nav__item--link a:hover { color: #fff; }
.mega-nav__item.is-open .mega-nav__trigger { background: var(--izi-magenta); color: #fff; }
.mega-nav__chev { font-size: .65rem; transition: transform .2s; }
.mega-nav__item.is-open .mega-nav__chev { transform: rotate(180deg); }
.mega-panel {
    position: absolute; left: 50%; transform: translateX(-50%); width: 100vw; top: 100%;
    background: #fff; border-top: 1px solid var(--izi-line); box-shadow: var(--shadow);
    max-height: min(70vh, 520px); overflow-y: auto;
}
.mega-panel__inner { padding: 1.5rem 0 2rem; }
.mega-panel__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.5rem 2rem; }
.mega-panel__grid--promo {
    grid-template-columns: 1fr 1fr 1fr 1fr minmax(200px, 240px);
    align-items: start;
}
.mega-panel__title { font-family: var(--font-display); font-size: .95rem; margin: 0 0 .75rem; text-transform: uppercase; }
.mega-panel__links { list-style: none; margin: 0; padding: 0; }
.mega-panel__links a { display: block; padding: .28rem 0; color: var(--izi-muted); font-size: .92rem; }
.mega-panel__links a:hover { color: var(--izi-magenta); }
.mega-panel__promo {
    position: relative; border-radius: 14px; overflow: hidden; min-height: 220px;
    background: var(--izi-bg-soft);
}
.mega-panel__promo img {
    width: 100%; height: 100%; min-height: 220px; object-fit: cover; display: block;
}
.mega-panel__promo span {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: .85rem 1rem; font-weight: 800; font-size: .85rem; color: #fff;
    background: linear-gradient(transparent, rgba(0,0,0,.65));
}
.mega-nav__toggle {
    display: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    padding: .5rem .85rem;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
}
.mega-mobile {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: #111;
    color: rgba(255, 255, 255, 0.85);
    padding: .5rem 1rem 1rem;
}
.mega-mobile__family { border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding: .5rem 0; }
.mega-mobile__family summary { font-weight: 800; cursor: pointer; color: #fff; }
.mega-mobile__column { margin: .5rem 0 .75rem 1rem; }
.mega-mobile__column ul { list-style: none; margin: .35rem 0 0; padding: 0; }
.mega-mobile__column a { display: block; padding: .25rem 0; color: rgba(255, 255, 255, 0.72); }
.mega-mobile__link {
    display: block;
    padding: .65rem 0;
    font-weight: 700;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Home sections */
/* Le titre est centré, donc le voile l'est aussi : une ellipse sombre au
   milieu, qui s'éclaircit vers les bords pour laisser respirer la photo.
   Le dégradé oblique d'avant était calé à gauche — il servait un texte
   aligné à gauche, et aurait laissé un titre centré sans contraste. */
.hero-full {
    position: relative; min-height: clamp(380px, 60vh, 580px);
    background:
        radial-gradient(ellipse 90% 80% at 50% 50%, rgba(0,0,0,.74) 0%, rgba(0,0,0,.58) 55%, rgba(0,0,0,.34) 100%),
        linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 30%, rgba(230,0,126,.18) 100%),
        var(--hero-image) center/cover no-repeat;
    display: flex; align-items: center; color: #fff;
}
.hero-full__content {
    padding: 4rem 0;
    max-width: 46rem;
    margin-inline: auto;
    text-align: center;
}
.hero-full h1 {
    font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.4rem);
    line-height: 1.05; margin: 0 0 1rem; letter-spacing: -.03em;
    /* Le navigateur équilibre les lignes plutôt que de laisser un mot seul
       en bas : sur un titre centré, une ligne orpheline se voit tout de suite. */
    text-wrap: balance;
}
.hero-full p {
    margin: 0 auto 1.75rem; font-size: 1.1rem; opacity: .92;
    max-width: 46ch; text-wrap: balance;
}

.trust-bar { background: #fff; border-bottom: 1px solid var(--izi-line); }
.trust-bar__grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
}
.trust-bar__item {
    display: flex; align-items: center; gap: .85rem; padding: 1.25rem 1rem;
    border-right: 1px solid var(--izi-line); color: var(--izi-ink);
}
.trust-bar__item:last-child { border-right: 0; }
.trust-bar__item strong { display: block; font-size: .95rem; }
.trust-bar__item span { color: var(--izi-muted); font-size: .85rem; }
.trust-bar__item svg { color: var(--izi-magenta); flex-shrink: 0; }

.section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.section-head h2 { margin: 0; }
.carousel-nav { display: flex; gap: .4rem; }
.carousel-btn {
    width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--izi-line);
    background: #fff; font-size: 1.25rem; cursor: pointer; line-height: 1;
}
.carousel-btn:hover { border-color: var(--izi-magenta); color: var(--izi-magenta); }
.carousel-track {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 240px);
    gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem;
    scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }

.product-tile {
    scroll-snap-align: start; background: var(--izi-bg-soft); border-radius: var(--radius-lg);
    overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; display: block;
}
.product-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.product-tile__img {
    aspect-ratio: 1;
    background: #f7f7f7;
    display: grid;
    place-items: center;
    border-bottom: 1px dashed #d4d4d8;
    overflow: hidden;
}
.product-tile__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    padding: 0.55rem;
}
.product-tile h3 {
    font-family: var(--font-display); font-size: .95rem; margin: .85rem 1rem .35rem;
    min-height: 2.4em;
}
.product-tile .badge { margin: 0 1rem 1rem; }

.catalog-grid .product-tile h3 {
    font-size: 0.88rem;
    margin: 0.7rem 0.75rem 0.3rem;
    min-height: 2.2em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.catalog-grid .product-tile .badge {
    margin: 0 0.75rem 0.85rem;
}

/* ── Bloc « Tendances du moment » ──────────────────────────────────────
   Le panneau de gauche était vide aux deux tiers : sa hauteur était dictée
   par quatre vignettes carrées, et le texte flottait au milieu. Les tuiles
   passent en 4/3, le bloc est plafonné, et le texte gagne une liste de
   liens qui occupe la place au lieu de la subir. */

.promo-banner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #fff;
    box-shadow: var(--shadow);
}

.promo-banner__copy {
    padding: clamp(1.75rem, 3vw, 2.75rem);
    display: grid;
    align-content: center;
    gap: 0.85rem;
}

.promo-banner__eyebrow {
    margin: 0;
    font: 800 0.72rem/1 var(--font-display);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--izi-magenta);
}

.promo-banner__copy h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.8vw, 2.1rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.promo-banner__copy > p:not(.promo-banner__eyebrow) {
    margin: 0;
    color: var(--izi-muted);
    max-width: 40ch;
    line-height: 1.6;
}

/* Les quatre noms, en pastilles : le bloc devient une porte d'entrée vers
   quatre rayons, au lieu d'une image de décoration. */
.promo-banner__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.15rem 0 0.35rem;
    padding: 0;
    list-style: none;
}

.promo-banner__chips a {
    display: inline-block;
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--izi-line);
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--izi-muted);
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.promo-banner__chips a:hover,
.promo-banner__chips a:focus-visible {
    border-color: var(--izi-magenta);
    color: var(--izi-magenta);
    background: rgba(230, 0, 126, 0.05);
}

.promo-banner__copy .btn { justify-self: start; }

/* ── Les tuiles ───────────────────────────────────────────────────────── */

.promo-banner__visual {
    background: linear-gradient(135deg, var(--izi-magenta) 0%, var(--izi-cyan) 100%);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
    padding: clamp(1rem, 2vw, 1.6rem);
    align-content: center;
}

.promo-tile {
    position: relative;
    display: block;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
    text-decoration: none;
    /* Les tuiles sont légèrement de travers, comme des tirages posés sur la
       table. Elles se redressent quand on les vise — c'est ce redressement
       qui dit qu'elles sont cliquables. */
    transform: rotate(-2deg);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.promo-tile:nth-child(even) { transform: rotate(2.5deg); }

.promo-tile:hover,
.promo-tile:focus-visible {
    transform: rotate(0deg) translateY(-5px) scale(1.02);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.promo-tile img {
    display: block;
    width: 100%;
    height: 100%;
    /* 4/3 au lieu du carré : à largeur égale, le bloc perd un bon tiers de
       sa hauteur, et le texte de gauche n'a plus de vide à combler. */
    aspect-ratio: 4 / 3;
    /* « contain » et non « cover » : un visuel de produit se montre entier.
       Rogner un scanner ou une chemise à rabats pour remplir le cadre revient
       à cacher ce qu'on est venu vendre. Le fond clair prend le reste — les
       vignettes sont déjà détourées sur blanc. */
    object-fit: contain;
    padding: 0.5rem;
}

/* Le nom, sur un voile qui part du bas : lisible sur une photo claire
   comme sur une photo sombre. */
.promo-tile__name {
    position: absolute;
    inset: auto 0 0 0;
    padding: 1.6rem 0.7rem 0.55rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.72) 60%);
    color: #fff;
    font: 700 0.8rem/1.25 var(--font-display);
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Une animation qui tourne et soulève n'a rien d'indispensable : on la
   retire pour qui a demandé moins de mouvement. */
@media (prefers-reduced-motion: reduce) {
    .promo-tile,
    .promo-tile:nth-child(even),
    .promo-tile:hover,
    .promo-tile:focus-visible {
        transform: none;
        transition: none;
    }
}

@media (max-width: 700px) {
    /* Les tuiles se redressent : de travers et petites, elles deviennent
       illisibles. */
    .promo-tile,
    .promo-tile:nth-child(even) { transform: none; }
    .promo-banner__copy .btn { justify-self: stretch; }
}

@media (max-width: 960px) {
    .mega-nav__desktop { display: none; }
    .mega-nav__toggle { display: inline-flex; }
    .mega-panel { display: none !important; }
    .site-topbar__phone { display: none; }
    .site-topbar__inner { flex-wrap: wrap; }
    .site-topbar__tools { margin-left: 0; flex: 1; justify-content: flex-end; }
    .site-nav__inner { flex-wrap: wrap; }
    .mega-panel__grid--promo { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
    .trust-bar__grid { grid-template-columns: 1fr; }
    .trust-bar__item { border-right: 0; border-bottom: 1px solid var(--izi-line); }
    .promo-banner { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .floating-help,
    .floating-help--icon {
        left: 1rem; right: 1rem;
        bottom: max(1rem, env(safe-area-inset-bottom));
        width: auto; height: auto;
        justify-content: center; border-radius: 12px;
        padding: 0.85rem 1.1rem;
    }
    .floating-help--icon .floating-help__label { display: inline; }
    .floating-help--icon .floating-help__icon { width: 22px; height: 22px; }
    .floating-help--icon::after { display: none; }
    .site-search {
        order: 3;
        flex: 1 1 100%;
        max-width: none;
        margin-left: 0;
        margin-top: .35rem;
    }
    .site-topbar__inner { padding: .65rem 0 .75rem; gap: .65rem; }
    .site-topbar__link span,
    .site-topbar__devis { font-size: .78rem; padding: .4rem .7rem; }
    .hero-full { min-height: 320px; }
}
@media (min-width: 961px) and (max-width: 1199px) {
    .mega-panel__grid--promo {
        grid-template-columns: 1fr 1fr 1fr minmax(180px, 220px);
    }
}
@media (min-width: 961px) { .mega-mobile { display: none !important; } }

/* ===== Product configurator (izi-contenant) ===== */
.configurator { background: #f5f5f5; border-radius: var(--radius-lg); padding: 1.25rem 1.25rem 1.75rem; margin-top: 1.5rem; }
.configurator h2 { margin-top: 0; }
.izi-tabs { background: #fff; border-radius: 14px; padding: 1rem; border: 1px solid var(--izi-line); overflow: visible; }
/* La barre d'étapes suit le défilement : sur les parcours longs (jusqu'à 14
   formats), on ne perd jamais de vue où l'on en est. */
.izi-tab-links {
    list-style: none;
    margin: 0 0 1.15rem;
    padding: .5rem 0;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: .45rem 0;
    position: sticky;
    top: calc(var(--izi-header-h) + .4rem);
    z-index: 20;
    background: var(--izi-white);
}
@media (max-width: 800px) { .izi-tab-links { position: static; } }
.izi-tab-links li {
    position: relative;
    z-index: 1;
    margin-right: -11px;
    flex: 0 1 auto;
}
.izi-tab-links li:has(a.active),
.izi-tab-links li:hover { z-index: 4; }
.izi-tab-links li:last-child { margin-right: 0; }
.izi-tab-links li a {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.15rem;
    min-height: 2.7rem;
    min-width: 7.25rem;
    padding: .55rem 1.55rem .55rem 1.4rem;
    background: #f3f4f6;
    color: var(--izi-muted);
    font-weight: 700;
    font-size: .85rem;
    border: 0;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%);
    transition: background .15s ease, color .15s ease;
}
.izi-tab-links li:first-child a {
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
    border-radius: 10px 0 0 10px;
    padding-left: 1rem;
}
.izi-tab-links li a .izi-tab-label { line-height: 1.2; }
.izi-tab-links li a .izi-tab-choice {
    font-weight: 500;
    font-size: 0.72rem;
    line-height: 1.25;
    color: var(--izi-muted);
    max-width: 11rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.izi-tab-links li:not(.disabled):not(:has(a.active)) a {
    background: #fce7f3;
    color: var(--izi-magenta);
}
.izi-tab-links li:not(.disabled):not(:has(a.active)) a .izi-tab-choice { color: var(--izi-magenta); }
.izi-tab-links li a.active {
    background: var(--izi-magenta);
    color: #fff;
}
.izi-tab-links li a.active .izi-tab-choice { color: rgba(255, 255, 255, .92); }
.izi-tab-links li.disabled a { opacity: .5; pointer-events: none; }
.izi-tab-links li.is-path-skipped { display: none; }
.izi-tab { display: none; }
.izi-tab.active { display: block; }
.izi-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .85rem; overflow: visible; }
.izi-row--schemes { grid-template-columns: repeat(auto-fill, 140px) !important; justify-content: start; }
.izi-image-block {
    position: relative;
    z-index: 0;
    overflow: visible;
    background: #fff; border: 2px solid var(--izi-line); border-radius: 12px; padding: .6rem;
    text-align: center; cursor: pointer; font: inherit; color: inherit; transition: border-color .15s, transform .15s;
}
.izi-option-badge {
    position: absolute;
    top: 0.4rem;
    left: 0.4rem;
    z-index: 3;
    max-width: calc(100% - 0.8rem);
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.izi-option-badge.is-recommended {
    background: var(--izi-magenta);
    color: #fff;
}
.izi-option-badge.is-popular {
    background: #374151;
    color: #fff;
}
.izi-image-block.is-filtered-out,
.izi-image-block[hidden] { display: none !important; }
.izi-cards-empty {
    margin: 0.75rem 0 0;
    padding: 0.85rem 1rem;
    background: #f8f8f8;
    border: 1px dashed #d4d4d8;
    border-radius: 10px;
    color: var(--izi-muted);
    font-size: 0.9rem;
}
.izi-image-block:hover,
.izi-image-block.is-selected,
.izi-image-block:focus-within,
.izi-image-block.is-help-open,
.izi-image-block:has(.izi-option-help.is-open),
.izi-image-block:has(.izi-option-help:hover) {
    border-color: var(--izi-magenta);
    transform: translateY(-2px);
    z-index: 20;
}
.izi-image-block.is-help-open,
.izi-image-block:has(.izi-option-help.is-open) {
    z-index: 40;
}
.izi-image-container {
    aspect-ratio: 1;
    background: #f3f4f6;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .35rem;
}
.izi-image-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.izi-image-placeholder { display: grid; place-items: center; height: 100%; font-weight: 700; color: var(--izi-muted); padding: .5rem; }

/* Schémas SVG (zone de marquage, etc.) — cartes uniformes */
.cfg-scheme-card {
    width: 140px;
    max-width: 140px;
    box-sizing: border-box;
    justify-self: start;
}
.cfg-scheme-card__media {
    aspect-ratio: 5 / 6;
    padding: .4rem;
    background: #f3f4f6;
}
.cfg-scheme-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.cfg-custom-scheme {
    width: 100%;
    height: 100%;
    display: block;
}
.cfg-custom-scheme svg {
    width: 100%;
    height: 100%;
    display: block;
}

.izi-image-name {
    margin: 0;
    font-weight: 700;
    font-size: .88rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    flex-wrap: wrap;
    line-height: 1.25;
}
.izi-image-name__label { text-align: center; }
.izi-image-dimensions { font-size: .75rem; color: var(--izi-muted); margin-top: .25rem; }

/* Point d’interrogation glossaire (hover / clic) */
.izi-option-help {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 999px;
    background: var(--izi-cyan);
    color: #fff;
    cursor: help;
    vertical-align: middle;
}
.izi-option-help__q {
    font: 700 .72rem/1 var(--font-display, Montserrat, sans-serif);
    pointer-events: none;
    user-select: none;
}
.izi-option-help__tip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + .5rem);
    transform: translateX(-50%);
    width: min(260px, 72vw);
    padding: .65rem .8rem;
    border-radius: 10px;
    background: var(--izi-ink);
    color: #fff;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease, visibility .15s ease;
    z-index: 50;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
}
.izi-option-help__tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--izi-ink);
}
.izi-option-help:hover .izi-option-help__tip,
.izi-option-help:focus-visible .izi-option-help__tip,
.izi-option-help.is-open .izi-option-help__tip {
    opacity: 1;
    visibility: visible;
}
.izi-option-help.is-open,
.izi-option-help:hover,
.izi-option-help:focus-visible {
    background: var(--izi-magenta);
}

.cfg-finishes {
    max-width: 40rem;
    padding: .25rem 0 1rem;
}
.cfg-finishes__intro {
    margin: 0 0 1.1rem;
    color: var(--izi-muted);
    font-size: .95rem;
    line-height: 1.45;
}
.cfg-finishes__group + .cfg-finishes__group {
    margin-top: 1.25rem;
}
.cfg-finishes__group-title {
    margin: 0 0 .65rem;
    font: 700 .95rem/1.2 var(--font-display);
    color: var(--izi-ink);
    text-transform: capitalize;
}
.cfg-finishes__checks {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem .85rem;
}
.cfg-finish-item {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .75rem;
    border: 1px solid var(--izi-line, #e8e8e8);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    font-size: .88rem;
    font-weight: 600;
}
.cfg-finish-item:has(input:checked) {
    border-color: var(--izi-magenta);
    background: rgba(230, 0, 126, 0.06);
    color: var(--izi-magenta);
}
.cfg-finish-item input {
    accent-color: var(--izi-magenta);
}

.cfg-finishes {
    max-width: 56rem;
    padding: .25rem 0 1rem;
}
.cfg-finishes__intro {
    margin: 0 0 1.1rem;
    color: var(--izi-muted);
    font-size: .95rem;
    line-height: 1.45;
}
.cfg-finishes__group + .cfg-finishes__group {
    margin-top: 1.5rem;
}
.cfg-finishes__group-title {
    margin: 0 0 .85rem;
    font: 700 .95rem/1.2 var(--font-display);
    color: var(--izi-ink);
    text-transform: capitalize;
}
.cfg-finishes__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .85rem;
}
.cfg-finishes__grid--simple {
    margin: .5rem 0 1rem;
}
.cfg-finish-card {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: .55rem;
    border: 2px solid var(--izi-line, #e8e8e8);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.cfg-finish-card:hover {
    border-color: rgba(0, 159, 227, .45);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .06);
}
.cfg-finish-card:has(input:checked) {
    border-color: var(--izi-magenta);
    box-shadow: 0 0 0 1px var(--izi-magenta), 0 10px 22px rgba(230, 0, 126, .12);
}
.cfg-finish-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.cfg-finish-card__media {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border-radius: 8px;
    background: #f4f4f5;
    border: 1px dashed #d4d4d8;
    overflow: hidden;
    margin-bottom: .55rem;
    padding: .35rem;
}
.cfg-finish-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.cfg-finish-card__placeholder {
    font-size: .72rem;
    font-weight: 700;
    color: var(--izi-muted);
    text-align: center;
    padding: .35rem;
    line-height: 1.25;
}
.cfg-finish-card__body {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    text-align: center;
}
.cfg-finish-card__name {
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--izi-ink);
}
.cfg-finish-card__desc {
    font-size: .7rem;
    font-weight: 500;
    color: var(--izi-muted);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cfg-finish-card--compact {
    padding: .4rem;
}
.cfg-finish-card--compact .cfg-finish-card__media {
    margin-bottom: .4rem;
}

/* Palette couleurs (étape type color) — pastilles uniformes */
.cfg-colors__grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, 112px);
    gap: .85rem;
    justify-content: start;
}
.cfg-colors__grid--simple {
    margin: .5rem 0 1rem;
}
.cfg-color-card {
    width: 112px;
    max-width: 112px;
    box-sizing: border-box;
    padding: .55rem .4rem .65rem;
}
.cfg-color-card .cfg-color-card__swatch {
    width: 72px;
    height: 72px;
    min-width: 72px;
    min-height: 72px;
    max-width: 72px;
    max-height: 72px;
    aspect-ratio: 1;
    border-radius: 50%;
    margin: 0 auto .45rem;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, .08);
    background-color: #f4f4f5;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    overflow: hidden;
}
.cfg-color-card .izi-image-name {
    font-size: .78rem;
    line-height: 1.2;
    min-height: 2.4em;
}
.cfg-color-card .izi-image-name__label {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cfg-color-card__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}
.cfg-color-pick {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    margin: 0 .35rem .5rem 0;
    cursor: pointer;
}
.cfg-color-pick input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.cfg-color-pick__swatch {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid #e4e4e7;
    background: #f4f4f5;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .65rem;
    text-align: center;
    overflow: hidden;
    flex-shrink: 0;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.cfg-color-pick:has(input:checked) .cfg-color-pick__swatch {
    border-color: var(--izi-magenta);
    box-shadow: 0 0 0 2px rgba(230, 0, 126, .25);
}
.cfg-color-pick__name {
    font-size: .8rem;
    color: #3f3f46;
}

.cfg-option-input {
    margin-top: 1.25rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--izi-line, #e8e8e8);
    border-radius: 12px;
    background: #fafafa;
    max-width: 520px;
}
.cfg-option-input__label {
    display: block;
    font-weight: 600;
    margin-bottom: .55rem;
    color: var(--izi-ink, #18181b);
}
.cfg-option-input__for {
    font-weight: 500;
    color: var(--izi-magenta, #e6007e);
}
.cfg-option-input__field {
    width: 100%;
    min-height: 88px;
    padding: .75rem .85rem;
    border: 1px solid #d4d4d8;
    border-radius: 8px;
    font: inherit;
    resize: vertical;
    background: #fff;
}
.cfg-option-input__field:focus {
    outline: 2px solid rgba(230, 0, 126, .35);
    border-color: var(--izi-magenta, #e6007e);
}

.format-container-v2 {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    padding: .5rem .25rem 1rem;
    align-items: flex-start;
}
.format-container-v2 h3 {
    font-family: var(--font-display);
    font-size: 1.05rem;
    margin: 0 0 1.1rem;
    color: var(--izi-ink);
}
.dimension-inputs-v2 {
    flex: 1 1 280px;
    min-width: min(100%, 280px);
}
.dimension-inputs-v2 .input-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}
.dimension-inputs-v2 .input-group > div {
    flex: 1 1 140px;
}
.dimension-inputs-v2 label {
    display: block;
    margin-bottom: .5rem;
    font-weight: 600;
    font-size: .9rem;
    color: var(--izi-muted);
}
.dimension-inputs-v2 input[type="number"] {
    width: 100%;
    padding: .85rem 1rem;
    border: 2px solid var(--izi-line);
    border-radius: 10px;
    font: inherit;
    font-size: 1rem;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.dimension-inputs-v2 input[type="number"]:focus {
    border-color: var(--izi-magenta);
    box-shadow: 0 0 0 3px rgba(230, 0, 126, 0.12);
    outline: none;
}
.dimension-preview-v2 {
    flex: 1 1 280px;
    min-width: min(100%, 280px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 2.5rem;
}
.preview-box {
    border: 2px dashed #ccc;
    padding: 1.25rem;
    position: relative;
    width: min(100%, 300px);
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #fafafa;
}
.cfg-preview-shape {
    width: 50%;
    height: 50%;
    background: linear-gradient(135deg, #f3f4f6 0%, #e8e8e8 100%);
    border: 2px solid var(--izi-magenta);
    border-radius: 4px;
    transition: width .3s ease, height .3s ease;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
}
.preview-height, .preview-width {
    position: absolute;
    font-size: .85rem;
    color: var(--izi-magenta);
    font-weight: 700;
    white-space: nowrap;
}
.preview-height {
    left: -4.5rem;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
}
.preview-width {
    bottom: -2.25rem;
    left: 50%;
    transform: translateX(-50%);
}
.preview-height span, .preview-width span {
    background: #fff;
    padding: 0 .35rem;
}
.izi-validator-container {
    text-align: center;
    margin-top: .5rem;
}
.dimension-inputs-v2 .izi-validator-container {
    text-align: left;
}
.validate-dimensions-btn {
    display: inline-block;
    padding: .85rem 1.5rem;
    background: var(--izi-magenta);
    color: #fff !important;
    text-decoration: none;
    border-radius: 10px;
    font-weight: 700;
    border: 0;
    cursor: pointer;
    transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
    font: inherit;
    font-size: .95rem;
}
.validate-dimensions-btn:hover {
    background: var(--izi-magenta-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(230, 0, 126, 0.25);
}

/* ── Le bouton dit quand il devient utile ──────────────────────────────
   Tant qu'il n'y a rien à valider, il reste en retrait : il est visible,
   mais il ne réclame pas. Dès qu'un choix est posé, il devient plein et
   gagne sa flèche — c'est ce changement d'état, permanent, qui porte le
   message. Une seule impulsion le souligne au passage, jamais un
   clignotement : ce qui se répète finit par harceler. */

.validate-dimensions-btn[data-ready='false'] {
    background: transparent;
    color: var(--izi-magenta) !important;
    box-shadow: inset 0 0 0 1.5px rgba(230, 0, 126, 0.35);
}

.validate-dimensions-btn[data-ready='false']:hover {
    background: rgba(230, 0, 126, 0.06);
    color: var(--izi-magenta-dark) !important;
    transform: none;
    box-shadow: inset 0 0 0 1.5px var(--izi-magenta);
}

.validate-dimensions-btn[data-ready='true']::after {
    content: ' →';
    /* La flèche apparaît avec l'état : elle dit où mène le clic. */
}

/* L'impulsion : une onde qui part du bouton et s'efface. Elle ne se joue
   qu'une fois, au moment où le bouton devient utile. */
.validate-dimensions-btn.is-awake {
    animation: izi-eveil 0.75s ease-out 1;
}

@keyframes izi-eveil {
    0% {
        box-shadow: 0 0 0 0 rgba(230, 0, 126, 0.55);
        transform: scale(1);
    }

    35% {
        transform: scale(1.045);
    }

    100% {
        box-shadow: 0 0 0 16px rgba(230, 0, 126, 0);
        transform: scale(1);
    }
}

/* Le changement d'état suffit à informer. L'animation, elle, n'est qu'un
   appui : on la retire pour qui a demandé moins de mouvement. */
@media (prefers-reduced-motion: reduce) {
    .validate-dimensions-btn.is-awake { animation: none; }
}
@media (max-width: 700px) {
    .dimension-preview-v2 { padding-top: .5rem; order: -1; }
    .preview-height { left: -.25rem; transform: translateY(-50%) rotate(-90deg) scale(.9); }
    .preview-width { bottom: -1.75rem; font-size: .8rem; }
}
.size-columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 1.25rem;
}
.size-container h4 {
    font-family: var(--font-display);
    margin: 0 0 1.25rem;
    font-size: 1.15rem;
    color: var(--izi-ink);
}
.size-column {
    flex: 1 1 200px;
    min-width: min(100%, 200px);
    background: #fafafa;
    border: 1px solid var(--izi-line);
    border-radius: 12px;
    padding: 1rem 1.1rem;
}
.size-column h5 {
    margin: 0 0 1rem;
    text-align: center;
    font-size: 1rem;
    color: var(--izi-muted);
    font-family: var(--font-display);
}
.size-input-group {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .65rem;
}
.size-input-group label {
    width: 2.25rem;
    font-weight: 700;
    color: var(--izi-ink);
}
.size-input-group input {
    flex: 1;
    padding: .55rem .75rem;
    border: 2px solid var(--izi-line);
    border-radius: 8px;
    font: inherit;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.size-input-group input:focus {
    border-color: var(--izi-magenta);
    box-shadow: 0 0 0 3px rgba(230, 0, 126, 0.1);
    outline: none;
}
.size-column-total {
    flex-basis: 100%;
    text-align: center;
    margin-top: .5rem;
    padding: 1rem;
    background: #fff;
    border: 2px dashed var(--izi-line);
    border-radius: 12px;
}
.size-column-total h5 {
    margin: 0;
    font-size: 1.1rem;
    font-family: var(--font-display);
}
.cfg-size-total { color: var(--izi-magenta); font-weight: 800; }

.special-flyers-container {
    text-align: center;
    padding: .5rem .25rem 1rem;
}
.special-flyers-container h4 {
    font-family: var(--font-display);
    margin: 0 0 1rem;
    font-size: 1.05rem;
    color: var(--izi-ink);
}
.special-flyers-container .cfg-free-input {
    padding: .85rem 1rem;
    border: 2px solid var(--izi-line);
    border-radius: 10px;
    margin-bottom: 1.25rem;
    width: min(100%, 240px);
    font: inherit;
    text-align: center;
}
.special-flyers-container .cfg-free-input:focus {
    border-color: var(--izi-magenta);
    box-shadow: 0 0 0 3px rgba(230, 0, 126, 0.12);
    outline: none;
}

.cfg-verify {
    padding: .35rem .15rem 1.1rem;
    text-align: left;
    max-width: 720px;
    margin: 0 auto;
}
.cfg-verify__head {
    margin: 0 0 1.15rem;
    padding: 1.1rem 1.2rem 1.15rem;
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(230, 0, 126, 0.1), rgba(0, 159, 227, 0.08) 55%, rgba(255, 237, 0, 0.12)),
        #fff;
    border: 1px solid rgba(230, 0, 126, 0.14);
    position: relative;
    overflow: hidden;
}
.cfg-verify__head::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(180deg, var(--izi-magenta), var(--izi-cyan));
}
.cfg-verify__eyebrow {
    margin: 0 0 .35rem;
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--izi-magenta);
}
.cfg-verify__product {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2.4vw, 1.45rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--izi-ink);
}
.cfg-verify__hint {
    margin: .45rem 0 0;
    color: var(--izi-muted);
    font-size: .9rem;
}
.cfg-summary {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.cfg-verify__grid,
.cfg-selection-list {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .75rem;
}
.cfg-verify-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background: #fff;
    border: 1px solid var(--izi-line);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(17, 17, 17, 0.04);
    animation: cfg-verify-in .38s ease both;
    animation-delay: calc(var(--cfg-i, 0) * 45ms);
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.cfg-verify-card:hover {
    border-color: rgba(230, 0, 126, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(230, 0, 126, 0.08);
}
.cfg-verify-card__media {
    aspect-ratio: 5 / 4;
    background: #eceff1;
    display: grid;
    place-items: center;
    padding: .55rem;
    border-bottom: 1px solid var(--izi-line);
}
.cfg-verify-card__media.is-empty {
    background:
        radial-gradient(circle at 30% 30%, rgba(230, 0, 126, 0.16), transparent 55%),
        radial-gradient(circle at 80% 70%, rgba(0, 159, 227, 0.14), transparent 50%),
        #f3f4f6;
}
.cfg-verify-card__svg {
    width: 100%;
    height: 100%;
    max-height: 110px;
    display: block;
}
.cfg-verify-card__img {
    width: 100%;
    height: 100%;
    max-height: 110px;
    object-fit: contain;
    display: block;
}
.cfg-verify-card__glyph {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: var(--izi-magenta);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1rem;
}
.cfg-verify-card__body {
    padding: .7rem .75rem .85rem;
    display: grid;
    gap: .2rem;
}
.cfg-verify-card__step {
    margin: 0;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--izi-cyan);
}
.cfg-verify-card__value {
    margin: 0;
    font-family: var(--font-display);
    font-size: .92rem;
    font-weight: 700;
    color: var(--izi-ink);
    line-height: 1.25;
}
.cfg-verify__qty {
    display: grid;
    justify-items: center;
    gap: .45rem;
    margin: 0 0 1.15rem;
    padding: 1rem;
    border-radius: 14px;
    background: var(--izi-bg-soft);
    border: 1px dashed rgba(230, 0, 126, 0.25);
}
.cfg-verify__qty-label {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: .95rem;
}
.cfg-verify__qty-row {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}
.cfg-verify__qty-btn {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 10px;
    border: 1px solid var(--izi-line);
    background: #fff;
    color: var(--izi-ink);
    font-size: 1.25rem;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
}
.cfg-verify__qty-btn:hover {
    border-color: var(--izi-magenta);
    color: var(--izi-magenta);
}
.cfg-verify__qty-input {
    width: 4.5rem;
    height: 2.35rem;
    text-align: center;
    border: 2px solid var(--izi-magenta);
    border-radius: 10px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.05rem;
}
.cfg-verify__qty-min {
    font-size: .75rem;
    color: var(--izi-muted);
}
@keyframes cfg-verify-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@media (prefers-reduced-motion: reduce) {
    .cfg-verify-card {
        animation: none;
    }
    .cfg-verify-card:hover {
        transform: none;
    }
}
.izi-content-table {
    width: auto;
    margin: 0 auto 1.25rem;
    border-collapse: collapse;
}
.izi-content-table td {
    padding: .5rem .65rem;
    border: none;
    background: transparent;
}
.izi-content-table label {
    font-weight: 700;
    font-size: .95rem;
    white-space: nowrap;
}
.izi-content-table input[type="number"] {
    padding: .65rem .85rem;
    border: 2px solid var(--izi-line);
    border-radius: 8px;
    width: 100px;
    font: inherit;
    font-size: 1rem;
    text-align: center;
}
.izi-content-table input[type="number"]:focus {
    border-color: var(--izi-magenta);
    box-shadow: 0 0 0 3px rgba(230, 0, 126, 0.1);
    outline: none;
}
.cfg-add-quote-btn {
    display: inline-block;
    padding: .9rem 1.75rem;
    background: var(--izi-magenta);
    color: #fff !important;
    border: 0;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    font: inherit;
    font-size: 1rem;
    transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.cfg-add-quote-btn:hover {
    background: var(--izi-magenta-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(230, 0, 126, 0.25);
}
@media (max-width: 700px) {
    .size-column { flex-basis: 100%; }
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Boutique — présentation atelier */
.shop { padding-bottom: 3.5rem; }
.shop-hero {
    background:
        linear-gradient(115deg, #0a0a0a 0%, #1a1a1a 55%, #2a0818 100%);
    color: #fff;
    padding: 2.25rem 0 2.5rem;
    margin-bottom: 1.75rem;
    position: relative;
    overflow: hidden;
}
.shop-hero::after {
    content: '';
    position: absolute;
    right: -4rem;
    top: -3rem;
    width: 18rem;
    height: 18rem;
    background: var(--izi-magenta);
    opacity: .28;
    transform: rotate(18deg);
    pointer-events: none;
}
.shop-hero__inner { position: relative; z-index: 1; }
.shop-hero__eyebrow {
    margin: 0 0 .5rem;
    font: 800 .72rem/1 var(--font-display);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--izi-cyan);
}
.shop-hero__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem 2rem;
}
.shop-hero__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.85rem, 4vw, 2.75rem);
    letter-spacing: -.03em;
    line-height: 1.05;
}
.shop-hero__lead {
    margin: .65rem 0 0;
    max-width: 36rem;
    color: rgba(255, 255, 255, .72);
    font-size: 1.02rem;
    line-height: 1.5;
}
.shop-search {
    display: flex;
    gap: .4rem;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    padding: .28rem .28rem .28rem .95rem;
    min-width: min(100%, 22rem);
}
.shop-search input {
    flex: 1;
    border: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    min-width: 0;
}
.shop-search input::placeholder { color: rgba(255, 255, 255, .45); }
.shop-search input:focus { outline: none; }
.shop-search__btn {
    border: 0;
    border-radius: 999px;
    background: var(--izi-magenta);
    color: #fff;
    font: 700 .85rem/1 var(--font-display);
    padding: .7rem 1.15rem;
    cursor: pointer;
}
.shop-search__btn:hover { background: var(--izi-magenta-dark); }

.shop-body {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}
.shop-nav {
    position: sticky;
    top: calc(var(--izi-header-h) + .8rem);
    background: #fff;
    border: 1px solid var(--izi-line);
    border-radius: 16px;
    padding: .85rem .7rem;
}
.shop-nav__title {
    margin: 0 .45rem .55rem;
    font: 800 .68rem/1 var(--font-display);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--izi-muted);
}
.shop-nav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .5rem .6rem;
    border-radius: 10px;
    color: var(--izi-ink);
    font-size: .88rem;
    font-weight: 600;
}
.shop-nav__link:hover { background: #f7f7f7; }
.shop-nav__link.is-active {
    background: #fff0f7;
    color: var(--izi-magenta);
}
.shop-nav__count {
    font-size: .72rem;
    font-weight: 700;
    color: var(--izi-muted);
    background: #f3f4f6;
    border-radius: 999px;
    padding: .12rem .45rem;
}
.shop-nav__link.is-active .shop-nav__count {
    background: #ffd0e8;
    color: var(--izi-magenta);
}

.shop-count {
    margin: 0 0 1rem;
    font-size: .88rem;
    color: var(--izi-muted);
}
.shop-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}
.shop-grid--chooser {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 720px) {
    .shop-grid,
    .shop-grid--chooser {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.1rem;
    }
}
@media (min-width: 1100px) {
    .shop-grid,
    .shop-grid--chooser {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1.15rem;
    }
}

.shop-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--izi-line);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .05);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.shop-card:hover {
    transform: translateY(-5px);
    border-color: transparent;
    box-shadow: 0 18px 40px rgba(230, 0, 126, .12);
}
.shop-card__media {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    background: #f3f4f6;
    overflow: hidden;
}
.shop-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    padding: .75rem;
}
.shop-card__fold {
    position: absolute;
    top: 0;
    right: 0;
    width: 3.1rem;
    height: 3.1rem;
    background: linear-gradient(225deg, var(--izi-yellow) 50%, transparent 51%);
}
.shop-card__body {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: 1.05rem 1.15rem 1.2rem;
    flex: 1;
}
.shop-card__kicker {
    font: 800 .65rem/1 var(--font-display);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--izi-cyan);
}
.shop-card__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(0.95rem, 1.4vw, 1.12rem);
    letter-spacing: -.02em;
    line-height: 1.2;
}
.shop-card__lead {
    color: var(--izi-muted);
    font-size: .9rem;
    line-height: 1.45;
    margin-top: .15rem;
}
.shop-card__cta {
    margin-top: auto;
    padding-top: .85rem;
    font: 700 .88rem/1 var(--font-display);
    color: var(--izi-magenta);
}

.shop-empty { color: var(--izi-muted); }
.shop-pages {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: 1.75rem;
}
.shop-pages__btn {
    display: inline-flex;
    padding: .45rem .9rem;
    border-radius: 999px;
    border: 1px solid var(--izi-line);
    font-weight: 700;
    font-size: .85rem;
    background: #fff;
}
.shop-pages__btn:hover { border-color: var(--izi-magenta); color: var(--izi-magenta); }
.shop-pages__btn.is-disabled { opacity: .4; pointer-events: none; }
.shop-pages__status { font-size: .85rem; color: var(--izi-muted); }

@media (max-width: 860px) {
    .shop-body { grid-template-columns: 1fr; }
    .shop-nav { position: static; display: flex; flex-wrap: wrap; gap: .35rem; }
    .shop-nav__title { width: 100%; }
    .shop-nav__link { border: 1px solid var(--izi-line); }
}

@media (prefers-reduced-motion: reduce) {
    .shop-card { transition: none; }
    .shop-card:hover { transform: none; }
}

/* Configuration choisie, rappelée sous chaque ligne du devis */
.quote-config {
    margin: .35rem 0 0;
    padding-left: 1rem;
    color: var(--izi-muted);
    font-size: .82rem;
    line-height: 1.45;
}
.quote-config li { margin: .1rem 0; }

/* Étape de finitions à deux niveaux : familles puis éléments */
.cfg-group-actions { margin-top: 1rem; }
.cfg-group-hint {
    margin: 0 0 .6rem;
    color: var(--izi-muted);
    font-size: .88rem;
}
.cfg-group-back {
    background: transparent;
    border: 1px solid var(--izi-line);
    border-radius: 999px;
    padding: .5rem 1rem;
    margin-right: .6rem;
    cursor: pointer;
    font: inherit;
    color: var(--izi-muted);
}
.cfg-group-back:hover { color: var(--izi-magenta); border-color: var(--izi-magenta); }

/* Repère des bornes de saisie sous les champs largeur / hauteur */
.cfg-dimension-hint {
    margin: .5rem 0 0;
    color: var(--izi-muted);
    font-size: .88rem;
}

/* La mention de tarification, annoncée une fois en tête de grille plutôt que
   répétée sur chaque carte, où elle ne distinguait plus rien. */
.shop-count {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .75rem;
}
.shop-count__note {
    font-size: .82rem;
    color: var(--izi-muted);
    opacity: .85;
}
/* Un prix ferme se lit comme un prix, pas comme une étiquette de rayon. */
.shop-card__kicker.is-price {
    color: var(--izi-ink);
    letter-spacing: .04em;
}

/* ── Guide de préparation des fichiers ─────────────────────────────────
   Une page de documentation : on y vient chercher une réponse précise, pas
   se laisser porter. D'où les blocs courts, les numéros, les schémas à côté
   du texte qu'ils illustrent, et une liste de contrôle à la fin. */

.guide-hero {
    max-width: 46rem;
    padding-bottom: 1rem;
}

.guide-hero__eyebrow {
    margin: 0 0 0.5rem;
    font: 800 0.72rem/1 var(--font-display);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--izi-magenta);
}

.guide-hero h1 {
    margin: 0 0 0.75rem;
    font-size: clamp(1.7rem, 4vw, 2.6rem);
    line-height: 1.12;
    letter-spacing: -0.03em;
}

.guide-hero__lead {
    margin: 0 0 1.5rem;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--izi-muted);
}

.guide-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

/* ── Les cinq règles ──────────────────────────────────────────────────── */

.guide-rules {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
}

.guide-rule {
    position: relative;
    padding: 1.4rem 1.3rem 1.3rem;
    background: var(--izi-white);
    border: 1px solid var(--izi-line);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.guide-rule__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-bottom: 0.75rem;
    border-radius: 50%;
    background: var(--izi-magenta);
    color: var(--izi-white);
    font: 800 0.95rem/1 var(--font-display);
}

.guide-rule--ask { background: #f7fcff; border-color: rgba(0, 159, 227, 0.3); }
.guide-rule--ask .guide-rule__num { background: var(--izi-whatsapp); }

.guide-rule h3 {
    margin: 0 0 0.4rem;
    font: 800 1.02rem/1.25 var(--font-display);
    letter-spacing: -0.01em;
    color: var(--izi-ink);
}

.guide-rule p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--izi-muted);
}

/* ── Texte et schéma côte à côte ──────────────────────────────────────── */

.guide-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem 2.5rem;
    align-items: center;
}

.guide-split h2 { margin-top: 0; }

.guide-split p,
.guide-list li {
    line-height: 1.6;
    color: var(--izi-muted);
}

.guide-list {
    margin: 0 0 1rem;
    padding-left: 1.1rem;
}

.guide-list li + li { margin-top: 0.6rem; }

.guide-figure {
    margin: 0;
    padding: 1.25rem;
    background: var(--izi-bg-soft);
    border: 1px solid var(--izi-line);
    border-radius: var(--radius-lg);
}

.guide-figure svg {
    display: block;
    width: 100%;
    height: auto;
}

.guide-figure figcaption {
    margin-top: 0.85rem;
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--izi-muted);
    text-align: center;
}

/* Une précision utile, mise en évidence sans crier. */
.guide-note {
    margin: 1rem 0 0;
    padding: 0.85rem 1rem;
    border-left: 3px solid var(--izi-cyan);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: rgba(0, 159, 227, 0.07);
    font-size: 0.92rem;
    line-height: 1.55;
}

/* ── Le tableau des résolutions ───────────────────────────────────────── */

.guide-table-wrap { overflow-x: auto; }

.guide-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.94rem;
}

.guide-table th,
.guide-table td {
    padding: 0.75rem 0.9rem;
    text-align: left;
    border-bottom: 1px solid var(--izi-line);
    line-height: 1.45;
}

.guide-table th {
    font: 800 0.74rem/1.3 var(--font-display);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--izi-ink);
    white-space: nowrap;
}

.guide-table td { color: var(--izi-muted); }
.guide-table tbody tr:hover { background: var(--izi-bg-soft); }

/* ── Les cartes de conseils ───────────────────────────────────────────── */

.guide-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
}

.guide-card {
    padding: 1.2rem 1.25rem;
    border: 1px solid var(--izi-line);
    border-radius: var(--radius);
    background: var(--izi-white);
}

.guide-card h3 {
    margin: 0 0 0.4rem;
    font: 800 0.98rem/1.25 var(--font-display);
    color: var(--izi-ink);
}

.guide-card p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--izi-muted);
}

.guide-card code,
.guide-checklist code {
    padding: 0.08em 0.35em;
    border-radius: 4px;
    background: var(--izi-bg-soft);
    font-size: 0.88em;
    color: var(--izi-ink);
}

/* ── La liste de contrôle ─────────────────────────────────────────────── */

.guide-checklist {
    padding: 1.75rem;
    border-radius: var(--radius-lg);
    background: var(--izi-black);
    color: rgba(255, 255, 255, 0.78);
}

.guide-checklist__head h2 {
    margin: 0 0 0.3rem;
    color: var(--izi-white);
}

.guide-checklist__head p {
    margin: 0 0 1.25rem;
    color: rgba(255, 255, 255, 0.55);
}

.guide-checklist ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
    gap: 0.6rem 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Une case à cocher dessinée : la liste se lit comme on la ferait à la main. */
.guide-checklist li {
    position: relative;
    padding-left: 1.9rem;
    font-size: 0.93rem;
    line-height: 1.5;
}

.guide-checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.1rem;
    width: 1.15rem;
    height: 1.15rem;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    border-radius: 4px;
}

.guide-checklist li::after {
    content: "";
    position: absolute;
    left: 0.34rem;
    top: 0.28rem;
    width: 0.42rem;
    height: 0.7rem;
    border: solid var(--izi-yellow);
    border-width: 0 2px 2px 0;
    transform: rotate(42deg);
}

.guide-checklist code {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
}

/* ── L'envoi du fichier ───────────────────────────────────────────────── */

.guide-send {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.5rem 2.5rem;
    padding: 1.75rem;
    border: 1px solid var(--izi-line);
    border-radius: var(--radius-lg);
    background: var(--izi-bg-soft);
}

.guide-send h2 { margin: 0 0 0.5rem; }
.guide-send p { margin: 0; line-height: 1.6; color: var(--izi-muted); }

.guide-send__actions {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

@media (max-width: 900px) {
    .guide-split,
    .guide-send { grid-template-columns: minmax(0, 1fr); }

    /* Le schéma passe sous son texte, jamais au-dessus : on lit d'abord la
       règle, on regarde le dessin ensuite. */
    .guide-split--reverse .guide-figure { order: 2; }
    .guide-send__actions { flex-direction: row; flex-wrap: wrap; }
}

@media (max-width: 700px) {
    .guide-hero__actions .btn,
    .guide-send__actions .btn { flex: 1 1 100%; }
    .guide-checklist { padding: 1.25rem; }
}

/* ── Typographie & descriptions riches (.prose) ───────────────────────── */
.prose {
    line-height: 1.6;
    color: var(--izi-ink);
}
.prose p {
    margin: 0 0 1rem;
}
.prose p:last-child {
    margin-bottom: 0;
}
.prose strong, .prose b {
    font-weight: 700;
}
.prose ul, .prose ol {
    margin: 0 0 1rem 1.25rem;
    padding: 0;
}
.prose li {
    margin-bottom: 0.35rem;
}
.prose table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    margin: 1rem 0 1.5rem;
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--izi-line);
}
.prose th, .prose td {
    padding: 0.75rem 1rem;
    border: 1px solid var(--izi-line);
    text-align: left;
    font-size: 0.9rem;
    vertical-align: top;
}
.prose th {
    background: var(--izi-bg-soft);
    font-weight: 700;
    color: var(--izi-ink);
}
.prose tr:nth-child(even) td {
    background: #fafafa;
}