/* Landing page de commande Opinel – styles préfixés .opinel pour ne pas interférer avec le site */
.opinel {
    /* Charte GROUPE CIDES (Figma « GROUPE CIDES ») */
    --op-ink: #1A272B;
    --op-text: #1E1E1E;
    --op-muted: #5F5F5F;
    --op-placeholder: #717171;
    --op-line: #D7D8D7;
    --op-bg: #ffffff;
    --op-soft: #F3F3F3;
    --op-accent: #1A272B;
    --op-accent-2: #F28E19;
    --op-accent-2-dark: #D88225;
    --op-shadow: 0 6px 22.5px rgba(221, 221, 221, .7);
    --op-danger: #b3261e;
    --op-ok: #1e6b3a;
    font-family: "Plus Jakarta Sans", Helvetica, Arial, sans-serif;
    color: var(--op-ink);
    font-size: 16px;
    line-height: 1.45;
}
.opinel *, .opinel *::before, .opinel *::after { box-sizing: border-box; }
.opinel [hidden] { display: none !important; }
.opinel ::placeholder { color: var(--op-placeholder); opacity: 1; }
.opinel h2 { font-size: 2rem; line-height: 1.1; margin: 0 0 1rem; color: var(--op-ink); font-weight: 800; }
.opinel-title { display: flex; align-items: center; gap: 16px; }
.opinel-title img { flex: none; width: 29px; height: 43px; }
.opinel-intro p { margin: 0 0 2rem; color: var(--op-text); font-size: 1.0625rem; line-height: 1.35; }
.opinel-req { color: var(--op-accent-2-dark); }
.opinel-opt { color: var(--op-muted); font-weight: normal; font-size: .85em; }
.opinel-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.opinel-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.opinel-card {
    background: var(--op-bg);
    border: 0;
    border-radius: 0;
    box-shadow: var(--op-shadow);
    padding: 2.5rem 3rem;
    margin: 0 0 2rem;
    min-width: 0;
}
.opinel-card > legend {
    float: left; width: 100%; margin: 0 0 1.6rem; padding: 0;
    font-weight: 800; font-size: 1.75rem; line-height: 1; color: var(--op-ink);
}
.opinel-grid { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; }
@media (max-width: 600px) { .opinel-grid { grid-template-columns: 1fr; } }

.opinel-field label { display: block; font-weight: 700; margin-bottom: .5rem; font-size: 1rem; color: var(--op-text); }
.opinel-field input, .opinel-field textarea, .opinel-tools input {
    width: 100%; font: inherit; color: inherit;
    padding: 14px 24px; line-height: 1.2; border: 1px solid var(--op-muted); border-radius: 4px; background: #fff;
}
.opinel input:focus, .opinel textarea:focus, .opinel button:focus-visible, .opinel summary:focus-visible {
    outline: 2px solid var(--op-accent-2); outline-offset: 1px; border-color: var(--op-accent);
}
.opinel-field.has-error input, .opinel-field.has-error textarea { border-color: var(--op-danger); }
.opinel-error { color: var(--op-danger); font-size: .88rem; margin: .3rem 0 0; }
.opinel-error--block { margin: 0 0 .8rem; font-weight: 600; }
.opinel-alert {
    background: #fdecea; color: var(--op-danger); border: 1px solid #f5c2bd;
    padding: .8rem 1rem; border-radius: 4px; margin-bottom: 1rem; font-weight: 600;
}
.opinel-help { clear: both; color: var(--op-text); margin: 0 0 1rem; }

.opinel-tools { display: flex; gap: .75rem; align-items: center; margin-bottom: 1rem; }
.opinel-tools input { flex: 1; }
.opinel-link { background: none; border: 0; color: var(--op-accent); text-decoration: underline; cursor: pointer; font: inherit; white-space: nowrap; padding: .3rem; }
.opinel-noresult { color: var(--op-muted); font-style: italic; }

.opinel-univers { margin-top: 1.1rem; }
.opinel-univers__title {
    font-size: .875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--op-accent-2-dark);
    margin: 0 0 .6rem; font-weight: 800; display: flex; align-items: center; gap: .55rem;
}

.opinel-gamme { border: 1px solid var(--op-line); border-radius: 4px; margin-bottom: .5rem; background: var(--op-soft); }
.opinel-gamme > summary {
    list-style: none; cursor: pointer; padding: .8rem 1rem;
    display: flex; justify-content: space-between; align-items: center; gap: .75rem;
    font-weight: 600; border-radius: 4px;
}
.opinel-gamme > summary::-webkit-details-marker { display: none; }
.opinel-gamme > summary::before {
    content: ""; flex: none; width: .55rem; height: .55rem;
    border-right: 2px solid var(--op-accent-2-dark); border-bottom: 2px solid var(--op-accent-2-dark);
    transform: rotate(-45deg); transition: transform .15s; margin-right: .2rem;
}
.opinel-gamme[open] > summary::before { transform: rotate(45deg); }
.opinel-gamme__title { flex: 1; }
.opinel-gamme__meta { display: flex; align-items: center; gap: .5rem; font-weight: normal; }
.opinel-gamme__count { color: var(--op-muted); font-size: .85rem; white-space: nowrap; }
.opinel-badge {
    background: var(--op-accent-2); color: var(--op-ink); border-radius: 999px; font-size: .78rem; font-weight: 700;
    min-width: 1.5rem; padding: .1rem .45rem; text-align: center;
}
.opinel-badge[hidden] { display: none; }
.opinel-gamme__body { background: #fff; border-top: 1px solid var(--op-line); border-radius: 0 0 4px 4px; padding: .4rem 1rem .6rem; }
.opinel-gamme__desc { color: var(--op-muted); font-size: .9rem; margin: .4rem 0 .5rem; }

.opinel-products { list-style: none; margin: 0; padding: 0; }
.opinel-product {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .55rem 0; border-bottom: 1px solid var(--op-soft);
}
.opinel-product:last-child { border-bottom: 0; }
.opinel-product.is-selected .opinel-product__name { color: var(--op-accent); font-weight: 600; }
.opinel-product__name { flex: 1; min-width: 0; cursor: pointer; }
.opinel-product__meta { display: flex; flex-wrap: wrap; gap: .25rem .8rem; font-size: .8rem; color: var(--op-muted); font-weight: normal; margin-top: .1rem; }
.opinel-ref { font-variant-numeric: tabular-nums; }

.opinel-qty { display: flex; align-items: center; flex: none; }
.opinel-qty input {
    width: 4.2rem; text-align: center; font: inherit; padding: .45rem .2rem;
    border: 1px solid var(--op-muted); border-left: 0; border-right: 0; border-radius: 0; -moz-appearance: textfield; appearance: textfield;
}
.opinel-qty input::-webkit-outer-spin-button, .opinel-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.opinel-qty__btn {
    width: 2.2rem; height: 2.35rem; border: 1px solid var(--op-muted); background: var(--op-soft); color: var(--op-accent);
    font-size: 1.15rem; line-height: 1; cursor: pointer;
}
.opinel-qty__btn:first-child { border-radius: 4px 0 0 4px; }
.opinel-qty__btn:last-child { border-radius: 0 4px 4px 0; }
.opinel-qty__btn:hover { background: var(--op-line); }

.opinel-submitbar {
    position: sticky; bottom: 0; z-index: 5;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    background: var(--op-ink); color: #fff; border: 0; border-radius: 4px;
    padding: .8rem 1rem; box-shadow: 0 -4px 18px rgba(23, 39, 43, .18);
}
.opinel-summary { margin: 0; font-weight: 600; }
.opinel-btn {
    display: inline-block; background: var(--op-accent-2); color: var(--op-ink); border: 0; border-radius: 4px;
    padding: 16px 32px; font: inherit; font-size: .875rem; font-weight: 600; line-height: 1.3; cursor: pointer; text-decoration: none;
}
.opinel-btn:hover { background: var(--op-accent-2-dark); }
.opinel-btn[disabled] { opacity: .6; cursor: wait; }
.opinel-btn--ghost { background: transparent; color: var(--op-ink); border: 1px solid var(--op-ink); }
.opinel-btn--ghost:hover { background: var(--op-soft); }

.opinel-success {
    background: #fff; border: 1px solid var(--op-line); border-left: 4px solid var(--op-accent-2); border-radius: 0; box-shadow: var(--op-shadow); padding: 2.5rem 3rem;
}
.opinel-success h2 { color: var(--op-ink); }

@media (max-width: 600px) {
    .opinel h2 { font-size: 1.5rem; }
    .opinel-card { padding: 1.5rem 1rem; }
    .opinel-card > legend { font-size: 1.375rem; }
    .opinel-field input, .opinel-field textarea, .opinel-tools input { padding: 12px 16px; }
    .opinel-gamme__body { padding: .3rem .7rem .5rem; }
    .opinel-gamme__count { display: none; }
    .opinel-product { gap: .6rem; }
    .opinel-submitbar { justify-content: center; text-align: center; }
    .opinel-btn { width: 100%; }
}

/* Récapitulatif de la sélection */
.opinel-recap__title { margin: 0 0 1.25rem; font-size: 1.75rem; line-height: 1; font-weight: 800; color: var(--op-ink); }
.opinel-recap__table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.opinel-recap__table th, .opinel-recap__table td { text-align: left; padding: .7rem .5rem; border-bottom: 1px solid var(--op-line); vertical-align: middle; }
.opinel-recap__table thead th { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--op-muted); font-weight: 700; border-bottom: 2px solid var(--op-ink); }
.opinel-recap__table tfoot th, .opinel-recap__table tfoot td { font-weight: 800; color: var(--op-ink); border-bottom: 0; }
.opinel-recap__table strong { display: block; font-weight: 700; color: var(--op-ink); }
.opinel-recap__meta { display: block; font-size: .8rem; color: var(--op-muted); margin-top: .1rem; }
.opinel-recap__num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.opinel-recap .opinel-link { padding: 0; }
@media (max-width: 600px) {
    .opinel-recap__title { font-size: 1.375rem; }
    .opinel-recap__table th, .opinel-recap__table td { padding: .6rem .3rem; }
}

/* Mise en page du site – maquette Figma « GROUPE CIDES » (page Nos marques / Opinel, page Contact) */
html, body.opinel-page { margin: 0; background: #fff; }
.opinel-page *, .opinel-page *::before, .opinel-page *::after { box-sizing: border-box; }
body.opinel-page { font-family: "Plus Jakarta Sans", Helvetica, Arial, sans-serif; color: #1E1E1E; }
.opinel-univers__title::before {
    content: ""; flex: none; width: 8.3px; height: 11.9px; background: url("img/flamme-puce.svg") no-repeat center / contain;
}
.opinel-submitbar .opinel-summary { color: #fff; }
.opinel-submitbar .opinel-btn:focus-visible { outline-color: #fff; }

.cides-btn {
    display: inline-flex; align-items: center; justify-content: center; min-height: 50px;
    padding: 16px 32px; border-radius: 4px; background: #F28E19; color: #17272B;
    font-weight: 600; font-size: 14px; line-height: 1.2; text-decoration: none; white-space: nowrap;
}
.cides-btn:hover { background: #D88225; }
.cides-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Bandeau hero : photo + dégradés bleu-gris */
.cides-hero {
    position: relative; color: #fff; min-height: 380px; display: flex; flex-direction: column;
    background-color: #1A272B;
    background-image:
        linear-gradient(-1.93deg, rgba(26, 39, 43, .06) 49%, rgba(26, 39, 43, .6) 86.7%),
        radial-gradient(ellipse at 72% 51%, rgba(26, 39, 43, .07) 2.8%, rgba(26, 39, 43, .7) 92.2%),
        url("img/hero-1920.jpg");
    background-size: cover; background-position: center 37.5%;
}
@media (max-width: 960px) {
    .cides-hero {
        background-image:
            linear-gradient(-1.93deg, rgba(26, 39, 43, .06) 49%, rgba(26, 39, 43, .6) 86.7%),
            radial-gradient(ellipse at 72% 51%, rgba(26, 39, 43, .07) 2.8%, rgba(26, 39, 43, .7) 92.2%),
            url("img/hero-960.jpg");
    }
}
.cides-hero__bar {
    width: 100%; max-width: 1440px; margin: 0 auto; padding: 32px 104px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.cides-hero__logo { display: block; line-height: 0; }
.cides-hero__logo img { width: 173px; height: auto; display: block; }
.cides-hero__title { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 8px 16px 56px; text-align: center; }
.cides-hero__title h1 { margin: 0; font-size: 64px; line-height: 1; font-weight: 800; color: #fff; }
.cides-hero__crumb { margin: 0; font-size: 12px; }
.cides-hero__crumb a { color: #fff; text-decoration: none; }
.cides-hero__crumb a:hover { text-decoration: underline; }
.cides-hero__crumb span { color: #F28E19; }

/* Bloc marque Opinel */
.cides-brand {
    max-width: 1232px; margin: 72px auto 0; padding: 16px 60px; min-height: 164px;
    background: #1A272B; color: #fff; border-radius: 16px;
    display: flex; align-items: center; gap: 64px;
}
.cides-brand__logo { flex: none; display: block; width: 268px; line-height: 0; border-radius: 4px; transition: opacity .15s; }
.cides-brand__logo img { display: block; width: 100%; height: auto; }
.cides-brand__logo:hover { opacity: .85; }
.cides-brand__logo:focus-visible { outline: 2px solid #F28E19; outline-offset: 6px; }
.cides-brand__text { flex: 1; margin: 0; font-size: 12px; line-height: 1.35; }

.opinel-main { max-width: 1040px; margin: 0 auto; padding: 72px 16px 104px; }

/* Pied de page */
.cides-footer { background: #1A272B; border-top: 1px solid #111D21; color: #fff; padding: 56px 48px 32px; font-size: 13px; line-height: 1.6; }
.cides-footer__grid {
    max-width: 1344px; margin: 0 auto; padding-bottom: 48px; border-bottom: 1px solid #111D21;
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 48px;
}
.cides-footer__brand img { width: 210px; height: auto; display: block; margin-bottom: 20px; }
.cides-footer__brand p { margin: 0 0 20px; max-width: 280px; }
.cides-footer__slogan { font-size: 16px; font-weight: 700; }
.cides-footer__col h2 { margin: 0 0 20px; font-size: 14px; line-height: 1.25; font-weight: 800; letter-spacing: 1.98px; text-transform: uppercase; color: #F28E19; }
.cides-footer__col p { margin: 0 0 10px; }
.cides-footer a { color: #fff; text-decoration: none; }
.cides-footer a:hover { text-decoration: underline; }
.cides-footer__bottom { max-width: 1344px; margin: 0 auto; padding-top: 32px; font-size: 12px; color: #F3F3F3; }

@media (max-width: 1100px) {
    .cides-hero__bar { padding: 24px 32px; }
    .cides-brand { margin: 48px 16px 0; gap: 32px; padding: 24px 32px; }
    .cides-brand__logo { width: 200px; }
}
@media (max-width: 700px) {
    .cides-hero { min-height: 300px; }
    .cides-hero__bar { padding: 16px; }
    .cides-hero__logo img { width: 130px; }
    .cides-hero__bar .cides-btn { min-height: 42px; padding: 12px 18px; }
    .cides-hero__title h1 { font-size: 38px; }
    .cides-brand { flex-direction: column; align-items: flex-start; gap: 20px; padding: 28px 24px; margin-top: 32px; }
    .cides-brand__logo { width: 180px; }
    .cides-brand__text { font-size: 13px; }
    .opinel-main { padding: 48px 16px 64px; }
    .cides-footer { padding: 40px 16px 24px; }
    .cides-footer__grid { grid-template-columns: 1fr; gap: 28px; padding-bottom: 32px; }
    .cides-footer__bottom { padding-top: 24px; }
}