/* =====================================================================
   Emotionn'elle — Charte graphique
   Palette issue du logo : violet + arc-en-ciel
   ===================================================================== */

:root {
    /* Marque */
    --violet:        #7C3AED;
    --violet-dark:   #3D1E63;
    --violet-soft:   #8A5BC4;
    --violet-tint:   #F3EEFA;
    --violet-tint-2: #E9DEF7;

    /* Arc-en-ciel */
    --rouge:  #E63E3E;
    --orange: #F59E0B;
    --jaune:  #F3C220;
    --vert:   #5AA94A;
    --bleu:   #1E84C4;
    --rose:   #EC4899;

    /* Neutres */
    --ink:    #2D2640;
    --muted:  #6B6480;
    --line:   #E7E2EF;
    --bg:     #FCFBFE;
    --white:  #FFFFFF;
    --success:#2E8B57;
    --danger: #D6453B;

    /* Système */
    --radius:    14px;
    --radius-lg: 22px;
    --radius-pill: 999px;
    --shadow-sm: 0 2px 8px rgba(61, 30, 99, .06);
    --shadow:    0 8px 28px rgba(61, 30, 99, .10);
    --shadow-lg: 0 18px 48px rgba(61, 30, 99, .16);
    --maxw: 1180px;
    --rainbow: linear-gradient(90deg, var(--rouge), var(--orange), var(--jaune), var(--vert), var(--bleu), var(--violet));

    --font-head: 'Fredoka', 'Segoe UI', sans-serif;
    --font-body: 'Nunito', 'Segoe UI', system-ui, sans-serif;
}

/* ----------------------------------------------------------------- Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.65;
    font-size: 17px;
}
img { max-width: 100%; display: block; }
a { color: var(--violet); text-decoration: none; }
a:hover { color: var(--violet-dark); }
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--violet-dark); line-height: 1.15; font-weight: 600; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1rem; }
button { font-family: inherit; }

/* --------------------------------------------------------------- Layout */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.section { padding: 64px 0; }
.section--tint { background: var(--violet-tint); }
.text-center { text-align: center; }
.lead { font-size: 1.15rem; color: var(--muted); max-width: 640px; }
.section-head { max-width: 720px; margin: 0 auto 42px; text-align: center; }
.section-head p { color: var(--muted); font-size: 1.1rem; }
.eyebrow {
    display: inline-block; font-family: var(--font-head); font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase; font-size: .8rem;
    color: var(--violet); background: var(--violet-tint-2);
    padding: 5px 14px; border-radius: var(--radius-pill); margin-bottom: 16px;
}

.rainbow-bar { height: 5px; background: var(--rainbow); border: 0; margin: 0; }
.rainbow-text {
    background: var(--rainbow); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

/* --------------------------------------------------------------- Boutons */
.btn {
    display: inline-flex; align-items: center; gap: 10px; justify-content: center;
    font-family: var(--font-head); font-weight: 600; font-size: 1rem;
    padding: 13px 26px; border-radius: var(--radius-pill); border: 2px solid transparent;
    cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    line-height: 1; text-align: center;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--violet); color: #fff; box-shadow: 0 6px 18px rgba(91,46,145,.28); }
.btn--primary:hover { background: var(--violet-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(91,46,145,.34); }
.btn--ghost { background: #fff; color: var(--violet); border-color: var(--violet-tint-2); }
.btn--ghost:hover { border-color: var(--violet); color: var(--violet-dark); }
.btn--rainbow { color: #fff; background: var(--rainbow); background-size: 180% 100%; box-shadow: var(--shadow); }
.btn--rainbow:hover { color: #fff; background-position: 100% 0; transform: translateY(-2px); }
.btn--lg { padding: 16px 34px; font-size: 1.1rem; }
.btn--block { display: flex; width: 100%; }
.btn--sm { padding: 9px 16px; font-size: .9rem; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------------------------------------------------------------- Header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 76px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { height: 50px; width: auto; }
.brand b { font-family: var(--font-head); font-size: 1.15rem; color: var(--violet-dark); font-weight: 600; line-height: 1; }
.brand span { display: block; font-size: .72rem; color: var(--muted); font-family: var(--font-body); letter-spacing: .02em; }
.nav-links { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.nav-links a { font-family: var(--font-head); font-weight: 500; color: var(--ink); padding: 9px 14px; border-radius: var(--radius-pill); font-size: .98rem; }
.nav-links a:hover { background: var(--violet-tint); color: var(--violet-dark); }
.nav-links a.active { color: var(--violet); background: var(--violet-tint); }

/* --- Menus déroulants --- */
.nav-links .has-sub { position: relative; }
.nav-links .has-sub > a { display: inline-flex; align-items: center; gap: 5px; }
.nav-links .caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .6; transition: transform .2s ease; }
.nav-links .sub-toggle { display: none; }
.subnav { position: absolute; top: 100%; left: 0; margin-top: 8px; min-width: 230px; list-style: none; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease; z-index: 60; }
.subnav::before { content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }
.nav-links .has-sub:hover > .subnav, .nav-links .has-sub:focus-within > .subnav { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-links .has-sub:hover > a .caret, .nav-links .has-sub:focus-within > a .caret { transform: rotate(180deg); }
.subnav a { display: block; padding: 10px 12px; border-radius: 10px; font-size: .95rem; font-weight: 500; white-space: nowrap; }

/* --- Pôles (page d'accueil) --- */
.pole-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pole-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 26px; box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.pole-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--c, var(--violet)); }
.pole-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.pole-card .role { font-family: var(--font-head); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--c, var(--violet)); font-weight: 600; margin-top: 10px; }
.pole-card h3 { margin: 4px 0; font-size: 1.3rem; }
.pole-card p { color: var(--muted); font-size: .97rem; margin: 6px 0 18px; }
.pole-card .more { margin-top: auto; font-family: var(--font-head); font-weight: 600; color: var(--c, var(--violet)); }
@media (max-width: 860px) { .pole-grid { grid-template-columns: 1fr; } }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.cart-link { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.cart-count {
    position: absolute; top: -6px; right: -8px; min-width: 20px; height: 20px;
    background: var(--rouge); color: #fff; border-radius: 50%; font-size: .72rem;
    font-weight: 700; display: grid; place-items: center; padding: 0 5px; font-family: var(--font-body);
}
.burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.burger span { display: block; width: 24px; height: 2.5px; background: var(--violet-dark); border-radius: 3px; margin: 5px 0; transition: .2s; }

/* ------------------------------------------------------------------ Hero */
.hero { position: relative; overflow: hidden; background:
    radial-gradient(1200px 480px at 80% -10%, var(--violet-tint-2), transparent 60%),
    radial-gradient(900px 420px at 0% 110%, #FDEFE9, transparent 55%), var(--white); }
.hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding: 72px 0; }
.hero h1 { margin-bottom: 18px; }
.hero p { font-size: 1.2rem; color: var(--muted); max-width: 520px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.hero__art { position: relative; display: grid; place-items: center; }
.hero__art .halo { position: absolute; inset: 0; margin: auto; width: 78%; aspect-ratio: 1; background: var(--rainbow); filter: blur(60px); opacity: .25; border-radius: 50%; }
.hero__art img { position: relative; width: min(420px, 90%); filter: drop-shadow(0 20px 40px rgba(61,30,99,.18)); }
.hero__trust { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 30px; }
.hero__trust div { display: flex; align-items: center; gap: 9px; font-weight: 700; color: var(--violet-dark); font-size: .95rem; }
.hero__trust .dot { width: 10px; height: 10px; border-radius: 50%; }

/* -------------------------------------------------------------- Catégories */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
.cat-card {
    display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: var(--radius-lg);
    background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
    transition: transform .15s ease, box-shadow .15s ease; position: relative; overflow: hidden;
}
.cat-card::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 5px; width: auto; bottom: auto; background: var(--c, var(--violet)); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.cat-card .emoji { font-size: 1.9rem; display: block; text-align: center; }
.cat-card h3 { margin: 0; text-align: center; }
.cat-card p { color: var(--muted); font-size: .95rem; margin: 0; text-align: center; }
.cat-card .more { margin-top: auto; font-family: var(--font-head); font-weight: 600; color: var(--c, var(--violet)); padding-top: 10px; text-align: center; }
.social-grid { grid-template-columns: repeat(4, 1fr); }
.social-logo { width: 48px; height: 48px; display: block; margin: 0 auto 12px; }
@media (max-width: 760px) { .social-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .social-grid { grid-template-columns: 1fr; } }
/* Variante : 3 colonnes centrées (grilles de 6 cartes — domaines, formats…) */
.cat-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 940px; margin-left: auto; margin-right: auto; }
@media (max-width: 720px) { .cat-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .cat-grid--3 { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------- Cartes produit */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 24px; }
.product-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm);
    transition: transform .15s ease, box-shadow .15s ease;
}
.product-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.product-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--violet-tint); display: grid; place-items: center; padding: 22px; }
.product-card__media img { width: 100%; height: 100%; object-fit: contain; }
.product-card__badge { position: absolute; top: 12px; left: 12px; background: var(--violet-dark); color: #fff; font-family: var(--font-head); font-weight: 600; font-size: .76rem; padding: 5px 12px; border-radius: var(--radius-pill); }
.product-card__body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; gap: 6px; }
.product-card__cat { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.product-card__body h3 { margin: 0; font-size: 1.15rem; }
.product-card__body p { color: var(--muted); font-size: .93rem; margin: 0; flex: 1; }
.product-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.price-from { font-family: var(--font-head); }
.price-from small { display: block; font-size: .72rem; color: var(--muted); font-weight: 400; }
.price-from b { font-size: 1.3rem; color: var(--violet-dark); }
/* La fourchette complète : le total d'entrée ET le meilleur prix à l'unité —
   sans le second, un produit vendu à l'exemplaire paraît cher. */
.price-from__unit { color: var(--vert) !important; font-weight: 600 !important; }
/* Configuration qui donne le prix d'appel (« A6 · 10 ex. ») — discrète, mais
   présente : sans elle la cliente ne sait pas d'où sort le montant affiché. */
.price-from__conf { display: block; color: var(--muted); font-size: .78rem; }

/* --------------------------------------------------------- Page produit */
.breadcrumb { font-size: .9rem; color: var(--muted); padding: 22px 0 0; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--violet); }
.product { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 32px 0 64px; align-items: start; }
.product__media-col { position: sticky; top: 100px; }
.product__media { background: var(--violet-tint); border-radius: var(--radius-lg); padding: 40px; display: grid; place-items: center; }
.product__media img { width: 100%; max-width: 380px; }
.product__thumbs { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.product__thumb { width: 72px; height: 72px; border: 2px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; cursor: pointer; padding: 5px; transition: border-color .15s; }
.product__thumb:hover { border-color: var(--violet-soft); }
.product__thumb.active { border-color: var(--violet); }
.product__thumb img { width: 100%; height: 100%; object-fit: contain; }
.specs { width: 100%; border-collapse: collapse; }
.specs th, .specs td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.specs th { color: var(--violet-dark); font-family: var(--font-head); font-weight: 600; width: 45%; }
.specs td { color: var(--ink); }
.product__info h1 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: 8px; }
.product__price { font-family: var(--font-head); font-size: 2rem; color: var(--violet-dark); font-weight: 600; margin: 8px 0 4px; }
.product__price .ht { font-size: .9rem; color: var(--muted); font-weight: 400; font-family: var(--font-body); }
/* Le prix est chiffré chez l'imprimeur à chaque changement d'option : on
   signale l'attente sans faire sauter la mise en page. */
.product__price [data-price].is-loading { opacity: .45; transition: opacity .15s; }
/* Prix à l'exemplaire : l'argument qui fait monter en quantité. */
.product__unit { margin: -2px 0 4px; color: var(--muted); font-size: .92rem; min-height: 1.2em; }
/* Port inclus — et dit tel quel, jamais « offert ». */
.product__shipping { margin: 0 0 10px; color: var(--vert); font-weight: 600; font-size: .92rem; }
/* Explication d'une option : « 0,85 mm » ne dit rien, son usage si. */
.option-note { margin: -6px 0 10px; color: var(--muted); font-size: .87rem; line-height: 1.45; }
/* Conditionnement : dit avant l'achat, jamais découvert à la réception. */
.product__packing { margin: -6px 0 10px; color: var(--muted); font-size: .88rem; }
/* Prestations retirées de la fiche pour la lisibilité, mais bien disponibles. */
.option-quote {
    margin: 18px 0 4px; padding: 12px 14px; font-size: .9rem; line-height: 1.5;
    background: color-mix(in srgb, var(--violet) 7%, #fff);
    border-left: 3px solid var(--violet); border-radius: 8px; color: var(--text);
}
.option-quote a { color: var(--violet-dark); font-weight: 700; white-space: nowrap; }
/* Format sur mesure : largeur × hauteur, en centimètres. */
.custom-size { margin: 12px 0 0; }
.custom-size[hidden] { display: none; }
.custom-size__presets { margin-bottom: 12px; }
.custom-size__fields { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.custom-size__fields label { display: flex; flex-direction: column; gap: 4px; font-size: .87rem; color: var(--muted); position: relative; }
.custom-size__fields input { width: 130px; padding: 10px 34px 10px 12px; border: 1px solid var(--bord, #dcd6e6); border-radius: 10px; font-size: 1rem; }
.custom-size__fields .unit { position: absolute; right: 12px; bottom: 11px; color: var(--muted); font-size: .87rem; pointer-events: none; }
.custom-size__x { padding-bottom: 12px; color: var(--muted); }

/* Sélecteur de modèle d'une fiche à variantes.
   Une grille de vignettes, jamais une liste déroulante : la cliente doit VOIR
   les quatorze stylos d'un coup d'œil, c'est là que se joue l'envie. */
.variantes { margin: 20px 0 24px; }
.variantes__label { display: block; font-family: var(--font-head); font-weight: 600; color: var(--violet-dark); margin-bottom: 10px; }
.variantes__grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.variante { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px;
            border: 1px solid var(--bord, #e3d9ec); border-radius: 12px; text-decoration: none;
            color: inherit; background: #fff; transition: border-color .15s, box-shadow .15s; }
.variante:hover { border-color: var(--violet, #5B2E91); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.variante--active { border-color: var(--violet, #5B2E91); border-width: 2px; padding: 7px 5px; }
.variante img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.variante__nom { font-size: .76rem; text-align: center; line-height: 1.25; }
.variante__prix { font-size: .78rem; font-weight: 700; color: var(--violet-dark); }
/* Quantite du prix d'appel : les minimums varient d'un modele a l'autre,
   sans elle deux prix ne sont pas comparables. */
.variante__qte { font-size: .68rem; color: var(--muted); text-align: center; line-height: 1.2; }

/* Accroche du modèle choisi : elle doit se détacher de celle de la famille,
   sans lui voler la vedette. */
.variantes__accroche { margin: 14px 0 0; padding: 12px 14px; border-left: 3px solid var(--violet, #5B2E91);
                       background: color-mix(in srgb, var(--violet, #5B2E91) 5%, #fff);
                       border-radius: 0 10px 10px 0; font-size: .93rem; line-height: 1.5; }

.option-group { margin: 22px 0; }
.option-group > label { display: block; font-family: var(--font-head); font-weight: 600; color: var(--violet-dark); margin-bottom: 10px; }
.choice-row { display: flex; flex-wrap: wrap; gap: 10px; }
.choice {
    position: relative; display: inline-flex; align-items: center; gap: 8px;
    border: 2px solid var(--line); border-radius: var(--radius); padding: 11px 16px;
    cursor: pointer; font-weight: 600; font-size: .95rem; background: #fff; transition: .15s;
}
.choice:hover { border-color: var(--violet-soft); }
.choice input { position: absolute; opacity: 0; }
.choice input:checked + span { color: var(--violet-dark); }
.choice:has(input:checked) { border-color: var(--violet); background: var(--violet-tint); box-shadow: inset 0 0 0 1px var(--violet); }
.choice--disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; filter: grayscale(1); }
.choice--disabled:hover { border-color: var(--line); }
.choice .plus { color: var(--muted); font-weight: 700; font-size: .85rem; }
select.choice-select { width: 100%; padding: 13px 16px; border: 2px solid var(--line); border-radius: var(--radius); font-size: 1rem; font-weight: 600; color: var(--ink); background: #fff; font-family: inherit; }

.field { margin: 18px 0; }
.field label { display: block; font-family: var(--font-head); font-weight: 600; color: var(--violet-dark); margin-bottom: 8px; }
.field .hint { font-weight: 400; font-size: .85rem; color: var(--muted); font-family: var(--font-body); }
input[type=text], input[type=email], input[type=tel], input[type=number], textarea, select {
    width: 100%; padding: 13px 15px; border: 2px solid var(--line); border-radius: var(--radius);
    font-size: 1rem; font-family: var(--font-body); color: var(--ink); background: #fff; transition: border-color .15s;
}
input:focus, textarea:focus, select:focus, .choice-select:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 4px var(--violet-tint-2); }
textarea { resize: vertical; min-height: 90px; }
input[type=file] { width: 100%; padding: 14px; border: 2px dashed var(--violet-soft); border-radius: var(--radius); background: var(--violet-tint); cursor: pointer; font-family: inherit; }

.qty-row { display: flex; align-items: center; gap: 14px; margin: 22px 0; }
.qty { display: inline-flex; align-items: center; border: 2px solid var(--line); border-radius: var(--radius-pill); overflow: hidden; }
.qty button { width: 42px; height: 44px; border: 0; background: #fff; font-size: 1.3rem; color: var(--violet); cursor: pointer; }
.qty button:hover { background: var(--violet-tint); }
.qty input { width: 52px; border: 0; text-align: center; font-weight: 700; font-size: 1.05rem; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; }

.features { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 10px; }
.features li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink); }
.features li::before { content: "✓"; color: var(--vert); font-weight: 900; flex: none; }
.product__meta { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 18px; font-size: .9rem; color: var(--muted); }
.product__meta b { color: var(--violet-dark); }

/* -------------------------------------------------------------- Panier */
.cart-layout { display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: start; padding: 32px 0 70px; }
.cart-items { display: flex; flex-direction: column; gap: 16px; }
.cart-item { display: grid; grid-template-columns: 92px 1fr auto; gap: 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-sm); }
.cart-item__media { width: 92px; height: 92px; background: var(--violet-tint); border-radius: var(--radius); display: grid; place-items: center; padding: 10px; }
.cart-item h3 { margin: 0 0 4px; font-size: 1.05rem; }
.cart-item__opts { font-size: .85rem; color: var(--muted); margin: 0; }
.cart-item__opts span { display: inline-block; margin-right: 10px; }
.cart-item__perso { font-size: .82rem; color: var(--muted); margin-top: 6px; }
.cart-item__file { font-size: .82rem; margin-top: 4px; }
.cart-item__right { text-align: right; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; gap: 10px; }
.cart-item__price { font-family: var(--font-head); font-weight: 600; color: var(--violet-dark); font-size: 1.1rem; }
.link-danger { color: var(--danger); background: none; border: 0; cursor: pointer; font-size: .85rem; font-family: var(--font-body); padding: 0; }
.link-danger:hover { text-decoration: underline; }

.summary { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); position: sticky; top: 100px; }
.summary h3 { margin-top: 0; }
.summary-row { display: flex; justify-content: space-between; padding: 8px 0; color: var(--muted); }
.summary-row.total { border-top: 2px solid var(--line); margin-top: 8px; padding-top: 14px; font-family: var(--font-head); font-size: 1.3rem; color: var(--violet-dark); font-weight: 600; }
.summary .btn { margin-top: 16px; }
.secure-note { display: flex; gap: 8px; align-items: center; justify-content: center; font-size: .82rem; color: var(--muted); margin-top: 14px; }

/* ----------------------------------------------------------------- Forms */
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-sm); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
.req { color: var(--rouge); }

/* ---------------------------------------------------------- Contact page */
.choice--act { display:flex; align-items:center; gap:14px; width:100%; padding:14px 16px; border-radius:var(--radius); border:2px solid var(--line); background:#fff; cursor:pointer; transition:border-color .15s, background .15s; }
.choice--act:hover { border-color:var(--violet-soft); }
.choice--act-sel { border-color:var(--violet); background:var(--violet-tint); }
.consent-row { display:flex; gap:10px; align-items:flex-start; margin:14px 0; font-size:.88rem; color:var(--muted); line-height:1.5; cursor:pointer; }
.consent-row input { margin-top:2px; width:17px; height:17px; accent-color:var(--violet); flex:none; }
.consent-row a { color:var(--violet); font-weight:600; }
.contact-pole { display:flex; align-items:center; gap:12px; font-size:.9rem; color:var(--muted); }
.contact-pole strong { color:var(--ink); display:block; }
@media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr !important; } }
/* ---------------------------------------------------------------- Alerts */
.alert { padding: 14px 18px; border-radius: var(--radius); margin-bottom: 16px; font-weight: 600; border: 1px solid transparent; }
.alert--success { background: #E8F6EE; color: #1E6B43; border-color: #BfE6CE; }
.alert--error { background: #FBEAE8; color: #A23129; border-color: #F2C7C2; }
.alert--info { background: var(--violet-tint); color: var(--violet-dark); border-color: var(--violet-tint-2); }

/* ----------------------------------------------------------------- Steps */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 22px; }
.step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; text-align: center; box-shadow: var(--shadow-sm); }
.step .num { width: 46px; height: 46px; border-radius: 50%; background: var(--rainbow); color: #fff; font-family: var(--font-head); font-weight: 600; display: grid; place-items: center; margin: 0 auto 14px; font-size: 1.2rem; }

/* ----------------------------------------------------------------- Footer */
.site-footer { background: var(--violet-dark); color: #D9CDEC; margin-top: 60px; }
.site-footer .rainbow-bar { margin-bottom: 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding: 54px 0 30px; }
.site-footer h4 { color: #fff; font-family: var(--font-head); margin: 0 0 14px; font-size: 1.05rem; }
.site-footer a { color: #D9CDEC; }
.site-footer a:hover { color: #fff; }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; font-size: .95rem; }
.footer-brand img { height: 54px; background: #fff; padding: 8px 12px; border-radius: var(--radius); }
.footer-brand p { margin-top: 14px; font-size: .92rem; max-width: 280px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.14); padding: 18px 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: .85rem; }

/* --------------------------------------------- Communication digitale */
.pick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; max-width: 940px; margin: 0 auto; align-items: stretch; }
.pick-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px 30px 28px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.pick-card--accent { border: 2px solid var(--violet); box-shadow: var(--shadow); }
.pick-card .tag { position: absolute; top: -15px; left: 26px; background: var(--rainbow); color: #fff; font-family: var(--font-head); font-weight: 600; font-size: .78rem; padding: 5px 15px; border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); }
.pick-card .emoji { font-size: 2.1rem; }
.pick-card h3 { font-size: 1.35rem; margin: 10px 0 2px; }
.pick-card .sub { color: var(--muted); margin-bottom: 16px; }
.pick-card .features { margin: 0 0 22px; flex: 1; }
@media (max-width: 760px) { .pick-grid { grid-template-columns: 1fr; } }

.stats-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 18px; }
.stat-big { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 20px; text-align: center; box-shadow: var(--shadow-sm); }
.stat-big b { font-family: var(--font-head); font-weight: 600; font-size: 2.6rem; color: var(--violet-dark); display: block; line-height: 1.05; margin-bottom: 6px; }
.stat-big span { color: var(--muted); font-size: .93rem; }

/* ------------------------------------------------------ Feature cards */
.feat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.feat-grid--3 { grid-template-columns: repeat(3, 1fr); }
.feat-grid--4 { grid-template-columns: repeat(4, 1fr); }
.feat-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px 26px; box-shadow: var(--shadow-sm); transition: box-shadow .18s ease, transform .18s ease; text-align: center; }
.feat-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.feat-icon { font-size: 2rem; display: block; margin: 0 auto 12px; }
.feat-card h3 { font-size: 1.1rem; margin: 0 0 8px; color: var(--violet-dark); }
.feat-card p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.6; }
@media (max-width: 900px) {
    .feat-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
    .feat-grid, .feat-grid--3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .feat-grid, .feat-grid--3, .feat-grid--4 { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------- Utilities */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.empty-state { text-align: center; padding: 60px 20px; }
.empty-state .emoji { font-size: 3.4rem; }
.badge-soft { display: inline-block; background: var(--violet-tint-2); color: var(--violet-dark); font-weight: 700; font-size: .78rem; padding: 4px 12px; border-radius: var(--radius-pill); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ------------------------------------------------------- Info-bar 3 col */
/* Barre Horaires / Téléphone / E-mail dans les pages de contact */
.info-bar { display:grid; grid-template-columns:1fr 1fr 1fr; background:var(--line); }
.info-bar > div { background:var(--bg); padding:14px 20px; }
.info-bar > div + div { border-left:1px solid var(--line); }
@media (max-width: 560px) {
    .info-bar { grid-template-columns:1fr; }
    .info-bar > div + div { border-left:none; border-top:1px solid var(--line); }
}

/* -------------------------------------------- Bandeau CTA (texte + bouton) */
/* Card sombre avec texte à gauche et bouton(s) à droite */
.cta-banner {
    border-radius:var(--radius-lg);
    padding:48px;
    display:grid;
    grid-template-columns:1.4fr auto;
    gap:24px;
    align-items:center;
}
@media (max-width: 700px) {
    .cta-banner { grid-template-columns:1fr; padding:32px 24px; text-align:center; }
    .cta-banner > div:last-child { display:flex; flex-direction:column; gap:12px; align-items:center; }
}

/* ------------------------------------------------------------ Responsive */
@media (max-width: 1120px) and (min-width: 761px) {
    /* La nav compte 6 entrées : on resserre pour éviter le retour à la ligne */
    .nav-links { gap: 2px; }
    .nav-links a { padding: 9px 9px; font-size: .9rem; }
    .brand span span { display: none; } /* masque le sous-titre, garde le nom */
}
@media (max-width: 960px) {
    .hero__grid { grid-template-columns: 1fr; padding: 48px 0; }
    .hero__art { order: -1; }
    .hero__art img { width: min(300px, 70%); }
    .product { grid-template-columns: 1fr; }
    .product__media-col { position: static; }
    .cart-layout { grid-template-columns: 1fr; }
    .summary { position: static; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
    .burger { display: block; }
    .nav-links {
        position: fixed; inset: 76px 0 auto 0; background: #fff; flex-direction: column;
        align-items: stretch; gap: 0; padding: 10px 16px 18px; border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow); transform: translateY(-130%); transition: transform .25s ease; z-index: 40;
    }
    .nav-links.open { transform: translateY(0); }
    .nav-links a { padding: 14px; border-radius: var(--radius); }
    .nav-links .has-sub { display: flex; flex-wrap: wrap; align-items: center; position: static; }
    .nav-links .has-sub > a { flex: 1; }
    .nav-links .has-sub > a .caret { display: none; }
    .nav-links .sub-toggle { display: flex; align-items: center; justify-content: center; width: 48px; align-self: stretch; background: none; border: 0; cursor: pointer; }
    .nav-links .sub-toggle::before { content: ""; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--violet-dark); transition: transform .2s ease; }
    .nav-links .has-sub.open-sub > .sub-toggle::before { transform: rotate(180deg); }
    .subnav { flex-basis: 100%; position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; margin: 0; padding: 0 0 6px; max-height: 0; overflow: hidden; transition: max-height .25s ease; }
    .nav-links .has-sub.open-sub > .subnav { max-height: 420px; }
    .subnav a { padding: 12px 14px 12px 26px; }
    .form-grid, .grid-2 { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .cart-item { grid-template-columns: 70px 1fr; }
    .cart-item__right { grid-column: 1 / -1; flex-direction: row; align-items: center; }
    .section { padding: 48px 0; }
}
@media (max-width: 480px) {
    .footer-grid { grid-template-columns: 1fr; }
    .brand span { display: none; }
    .hero__trust { gap: 14px; }
}

/* ============================ Espace client ============================ */
.muted { color: var(--muted, #6b7280); }
.table-scroll { overflow-x: auto; }

/* Authentification (connexion / inscription / mot de passe) */
.auth-wrap { max-width: 520px; margin: 0 auto; }
.auth-card { background: #fff; border: 1px solid var(--violet-tint-2, #ece7f5); border-radius: 16px; padding: 30px; box-shadow: 0 8px 30px rgba(80,40,120,.07); }
.auth-card h1 { margin: 0 0 6px; }
.auth-form { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.auth-form label { display: flex; flex-direction: column; gap: 5px; font-weight: 700; font-size: .9rem; }
.auth-form input { padding: 11px 13px; border: 1px solid #d9d3e6; border-radius: 10px; font: inherit; font-weight: 400; }
.auth-form input:focus { outline: 2px solid var(--violet, #6a3fd6); border-color: transparent; }
.auth-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth-links { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; font-size: .9rem; }

/* Tableau de bord client */
.account-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.account-head__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.account-panel { background: #fff; border: 1px solid var(--violet-tint-2, #ece7f5); border-radius: 16px; padding: 22px; }
.account-panel h2 { margin: 0 0 14px; font-size: 1.15rem; }
.account-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.account-table th, .account-table td { text-align: left; padding: 9px 8px; border-bottom: 1px solid #f0ecf8; }
.account-table th { font-size: .75rem; text-transform: uppercase; letter-spacing: .4px; color: var(--muted, #6b7280); }
.account-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.account-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid #f0ecf8; }
.account-list li:last-child { border-bottom: 0; padding-bottom: 0; }

/* Pastilles de statut */
.badge { display: inline-block; font-weight: 700; font-size: .72rem; padding: 3px 10px; border-radius: var(--radius-pill, 20px); background: #eee; color: #555; }
.badge--pending, .badge--new { background: #ede7f6; color: #5e35b1; }
.badge--paid, .badge--processing, .badge--bat-validated { background: #e3f2fd; color: #1565c0; }
.badge--shipped, .badge--delivered { background: #e8f5e9; color: #2e7d32; }
.badge--cancelled, .badge--failed { background: #fdecea; color: #c62828; }
.badge--bat-generated { background: #fff3e0; color: #e65100; }
.badge--bat-ordered { background: #e8f5e9; color: #2e7d32; }
.badge--bat-draft { background: #ede7f6; color: #5e35b1; }

/* Cartes BAT côté client */
.bat-client-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.bat-client-card { border: 1px solid #ece7f5; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.bat-client-card__thumb { aspect-ratio: 1; background: #f4f1fb; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; }
.bat-client-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.bat-client-card__body { padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.bat-client-card__body strong { font-size: .9rem; }
.bat-client-card__actions { margin-top: auto; padding: 0 10px 10px; display: flex; gap: 6px; }
.bat-client-card__actions form { margin: 0; }

@media (max-width: 820px) { .account-grid { grid-template-columns: 1fr; } }

/* Choix avec vignette (coloris textiles) : la pastille montre la teinte, et
   la photo principale suit au survol — comme sur le configurateur Print.com. */
.choice--visuel { padding: 6px 10px 6px 6px; gap: 8px; }
.choice__vignette { width: 30px; height: 30px; object-fit: cover; border-radius: 6px;
                    border: 1px solid var(--line); flex: 0 0 auto; }

/* Galerie dense : au-delà de 14 photos (coloris compris), on réduit les
   vignettes pour que tout reste consultable sans faire défiler la page. */
.product__thumbs--dense { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 6px; }
.product__thumbs--dense .product__thumb { width: 100%; height: auto; aspect-ratio: 1; padding: 0; }

/* La photo principale s'agrandit au clic. */
[data-zoomable] { cursor: zoom-in; }

/* Visionneuse plein écran */
.visionneuse { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center;
               justify-content: center; background: rgba(20, 14, 32, .92); padding: 40px; }
.visionneuse[hidden] { display: none; }
.visionneuse__img { max-width: min(92vw, 900px); max-height: 86vh; object-fit: contain;
                    border-radius: 12px; background: #fff; }
.visionneuse__fermer { position: absolute; top: 18px; right: 24px; font-size: 2.4rem; line-height: 1;
                       color: #fff; background: none; border: 0; cursor: pointer; }
.visionneuse__nav { position: absolute; top: 50%; transform: translateY(-50%); font-size: 3rem;
                    line-height: 1; color: #fff; background: none; border: 0; cursor: pointer;
                    padding: 10px 18px; opacity: .75; }
.visionneuse__nav:hover { opacity: 1; }
.visionneuse__nav--prec { left: 8px; }
.visionneuse__nav--suiv { right: 8px; }
.visionneuse__compteur { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
                         color: #fff; font-size: .9rem; opacity: .8; }
@media (max-width: 640px) {
    .visionneuse { padding: 16px; }
    .visionneuse__nav { font-size: 2.2rem; padding: 6px 10px; }
}

/* Tableau comparatif dans une description produit (papier couché / Synaps…).
   Il doit rester lisible sur un téléphone : d'où le défilement horizontal
   propre plutôt qu'un écrasement des colonnes. */
.product__desc .comparatif { width: 100%; border-collapse: collapse; margin: 1rem 0 1.4rem; font-size: .95rem; }
.product__desc .comparatif th,
.product__desc .comparatif td { padding: .55rem .7rem; text-align: left; border-bottom: 1px solid rgba(0,0,0,.08); }
.product__desc .comparatif thead th { font-weight: 700; border-bottom-width: 2px; }
.product__desc .comparatif tbody td:first-child { color: rgba(0,0,0,.6); white-space: nowrap; }
@media (max-width: 640px) {
    .product__desc .comparatif { display: block; overflow-x: auto; }
}

/* Combinaison refusée par l'imprimeur : le prix cède la place au message.
   Il doit se distinguer d'un montant sans crier — c'est une information,
   pas une erreur du client. */
.product__price.is-refuse { color: #b23a48; font-size: 1.15rem; }

/* Retour sur la ligne touchée après une action de la liste admin : sans marge
   de défilement, l'ancre colle la ligne sous l'en-tête fixe et on ne la voit
   pas. On la décale, et on la signale une seconde. */
tr[id^="p"]:target { scroll-margin-top: 120px; animation: ligne-vue 1.6s ease-out; }
@keyframes ligne-vue {
    0%, 40% { background: color-mix(in srgb, #2f7d8c 14%, transparent); }
    100%    { background: transparent; }
}

/* Le prix suit le client pendant qu'il choisit ses options.
   `position: sticky` dans la colonne d'informations : le bloc se décolle au
   défilement et se recolle sous l'en-tête, sans script. Il se distingue du
   fond quand il flotte, pour qu'on comprenne que c'est bien le prix courant. */
.product__prix-collant {
    position: sticky; top: 72px; z-index: 5;
    background: #fff; padding: 10px 14px; margin: 0 -14px 4px;
    border-radius: 12px;
    transition: box-shadow .2s, background .2s;
}
.product__prix-collant.est-colle {
    box-shadow: 0 6px 22px rgba(0, 0, 0, .10);
    background: color-mix(in srgb, var(--violet-dark, #5b3fa8) 4%, #fff);
}
.product__prix-collant .product__price { margin: 0; }
.product__prix-collant .product__unit  { margin: 2px 0 0; }

/* Écrans courts : un bloc collant mangerait la moitié de la hauteur utile. */
@media (max-height: 520px) {
    .product__prix-collant { position: static; box-shadow: none; }
}

/* Relais du prix collant sous la colonne d'achat : `sticky` s'arrête au bas de
   son conteneur, or la description et les caractéristiques viennent après, sur
   toute la largeur. Ce bandeau reprend le prix courant pendant cette lecture,
   et disparaît dès qu'on remonte dans la zone de commande. */
.prix-flottant {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 22px rgba(61, 30, 99, .10);
    transform: translateY(110%);
    transition: transform .22s ease;
    padding: 10px 0;
}
.prix-flottant.est-visible { transform: none; }
.prix-flottant__in {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.prix-flottant__prix { font-size: 1.35rem; font-weight: 800; color: var(--violet-dark); }
.prix-flottant__btn  { white-space: nowrap; }

@media (max-width: 560px) {
    .prix-flottant__prix { font-size: 1.15rem; }
    .prix-flottant__btn  { padding: 10px 16px; }
}
@media print { .prix-flottant { display: none; } }

/* Rappel de vérification des tarifs figés (back-office). Il doit se voir sans
   crier : c'est une échéance, pas une erreur. */
.alert--warn { background: #fff6e5; color: #7a5200; border-color: #f0d9a8; }
.alert--warn ul { font-weight: 400; padding-left: 18px; }
.alert--warn .muted { display: block; margin-top: 10px; font-weight: 400; font-size: .9em; }