/* ============================================================
   style.css
   ---------
   Reprend la charte graphique de merle-editions.fr :
   - Couleur principale : jaune #f4c64a
   - Style familial/jeux de société : rond, chaleureux, lisible

   Organisation du fichier :
   1. Variables (couleurs, espacements) — à modifier ici en premier
      si tu veux ajuster la charte globalement
   2. Reset de base
   3. Composants génériques (boutons, container)
   4. Header / Footer
   5. Pages spécifiques (accueil, produit, landing page)
   ============================================================ */

/* 1. Variables ------------------------------------------------ */
:root {
    --color-primary: #FFCF53;
    --color-primary-dark: #d9a92e;
    --color-text: #2b2b2b;
    --color-text-light: #6b6b6b;
    --color-background: #ffffff;
    --color-success: #4caf50;
    --color-error: #e53935;

    --font-main: 'Segoe UI', Roboto, Arial, sans-serif;

    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 32px;
    --spacing-xl: 64px;

    --radius: 12px; /* coins arrondis, cohérent avec un univers familial/jeux */
}

/* 2. Reset de base ---------------------------------------------- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-main);
    color: var(--color-text);
    background: #fff;
    line-height: 1.5;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Éditeur HTML : images centrées par défaut dans le contenu composé au back
   office (bandeau, landing, pages de contenu, bloc libre produit). */
.hero--custom img,
.landing-page__body img,
.cms-page__content img,
.product-freeform img {
    margin-left: auto;
    margin-right: auto;
}

/* …sauf dans les composants à disposition flex (colonnes, carrousel, slider),
   qui gèrent eux-mêmes le placement des images (spécificité plus forte). */
.hero--custom .mc-row img, .hero--custom .mc-slider img, .hero--custom .product-carousel img,
.landing-page__body .mc-row img, .landing-page__body .mc-slider img, .landing-page__body .product-carousel img,
.cms-page__content .mc-row img, .cms-page__content .mc-slider img, .cms-page__content .product-carousel img,
.product-freeform .mc-row img, .product-freeform .mc-slider img, .product-freeform .product-carousel img {
    margin-left: 0;
    margin-right: 0;
}

/* Listes dans les contenus riches (texte court/long produit, pages, landing) :
   le reset « * { padding: 0 } » supprime le retrait des <ul>/<ol>, donc les
   puces débordaient hors cadre et devenaient invisibles. On restaure un retrait
   et un marqueur visibles. */
.product-detail__short ul, .product-detail__short ol,
.product-detail__description ul, .product-detail__description ol,
.product-freeform ul, .product-freeform ol,
.landing-page__body ul, .landing-page__body ol,
.cms-page__content ul, .cms-page__content ol {
    margin: 0 0 1em;
    padding-left: 1.4em;
}
.product-detail__short ul, .product-detail__description ul,
.product-freeform ul, .landing-page__body ul, .cms-page__content ul {
    list-style: disc outside;
}
.product-detail__short ol, .product-detail__description ol,
.product-freeform ol, .landing-page__body ol, .cms-page__content ol {
    list-style: decimal outside;
}
.product-detail__short li, .product-detail__description li,
.product-freeform li, .landing-page__body li, .cms-page__content li {
    margin-bottom: 0.25em;
}

a {
    color: inherit;
    text-decoration: none;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* 3. Composants génériques ---------------------------------------- */
.btn {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius);
    font-weight: 600;
    cursor: pointer;
    border: none;
    box-shadow: 0 6px 18px 0 rgba(0, 0, 0, .12);
    transition: transform 0.1s ease, background-color 0.2s ease;
}

.btn:disabled,
.btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.btn--primary {
    background: var(--color-primary);
    color: var(--color-text);
}

.btn--primary:hover {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
}

.btn--large {
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: 1.1rem;
}

/* 4. Header / Footer ---------------------------------------------- */
.site-header {
    background: var(--color-primary);
    padding: var(--spacing-md) 0;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.logo img {
    height: 48px;
}

.main-nav {
    display: flex;
    gap: var(--spacing-lg);
}

.main-nav a:hover {
    color: var(--color-primary-dark);
}

.lang-switcher a {
    margin-left: var(--spacing-sm);
    font-weight: 600;
    color: var(--color-text-light);
}

.lang-switcher a.active {
    color: var(--color-text);
}

.currency-select {
    margin-left: var(--spacing-sm);
    font-size: 0.8rem;
    border: none;
    background: transparent;
    color: var(--color-text-light);
    cursor: pointer;
}

.header-search input {
    padding: 6px 10px;
    border-radius: var(--radius);
    border: 1px solid #ddd;
    font-size: 0.85rem;
    width: 160px;
}

.search-page {
    padding: var(--spacing-xl) 0;
}

.search-page__form {
    display: flex;
    gap: var(--spacing-sm);
    max-width: 480px;
    margin: var(--spacing-md) 0;
}

.search-page__form input {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius);
    border: 1px solid #ddd;
}

.search-page__popular {
    font-size: 0.85rem;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-lg);
}

.search-page__popular a {
    text-decoration: underline;
    margin-left: var(--spacing-sm);
}

.site-footer {
    margin-top: 0;
    padding: 0 0 var(--spacing-lg);
    background: #faf6ec;
    text-align: center;
    color: var(--color-text-light);
}

.site-footer__social a {
    text-decoration: underline;
}

/* 5. Pages spécifiques ---------------------------------------------- */

/* Page d'accueil */
.hero {
    background: var(--color-primary);
    padding: var(--spacing-xl) 0;
    text-align: center;
}

/* Bandeau d'accueil composé dans l'éditeur HTML : aucun fond ni marge imposés,
   tout est géré dans le contenu (l'éditeur maîtrise l'apparence). */
.hero--custom {
    background: none;
    padding: 0;
    text-align: left;
}

.hero h1 {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-sm);
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--spacing-lg);
    padding: var(--spacing-xl) 0;
}

.product-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 6px 18px 0 rgba(0, 0, 0, .12);
    transition: box-shadow 0.2s ease;
    margin-bottom: var(--spacing-md);
}

/* Prix aligné à droite dans les cartes (accueil, boutique, /jeux). */
.product-card .price {
    text-align: right;
}

.product-card:hover {
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
}

.product-card img {
    aspect-ratio: 1 / 1;
    /* Image entièrement visible dans le cadre (pas de recadrage) */
    object-fit: contain;
}

.product-card__image-wrap {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #faf7f2; /* fond doux derrière les images non carrées */
}

.product-card__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Image entièrement visible dans le cadre (pas de recadrage) */
    object-fit: contain;
    transition: opacity 0.2s ease;
}

.product-card__image--hover {
    opacity: 0;
}

.product-card:hover .product-card__image--main {
    opacity: 0;
}

.product-card:hover .product-card__image--hover {
    opacity: 1;
}

.product-card h2,
.product-card .price,
.product-card .btn {
    margin: var(--spacing-sm) var(--spacing-md);
}

/* Slider / carrousel (composant éditeur HTML). Look moderne : cadre arrondi +
   ombre, glissé horizontal fluide (remplacement progressif de gauche à droite),
   flèches rondes au survol, puces indicateurs, swipe tactile. */
.mc-slider {
    position: relative;
    overflow: hidden;
    width: 100%;
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
    background: #eee;
    touch-action: pan-y;
    user-select: none;
}
.mc-slider-track {
    display: flex;
    transition: transform .6s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}
.mc-slide {
    flex: 0 0 100%;
    display: block;
    position: relative;
}
.mc-slide img {
    width: 100%;
    display: block;
    object-fit: cover;
    -webkit-user-drag: none;
}
.mc-slide[href]:not([href=""]):not([href="#"]) { cursor: pointer; }

/* Flèches rondes translucides, révélées au survol du slider */
.mc-slider-prev, .mc-slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .85);
    color: #2b2b2b;
    border: none;
    border-radius: 50%;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
    opacity: 0;
    transition: opacity .25s ease, background .2s ease, transform .2s ease;
}
.mc-slider:hover .mc-slider-prev,
.mc-slider:hover .mc-slider-next { opacity: 1; }
.mc-slider-prev:hover, .mc-slider-next:hover { background: #fff; }
.mc-slider-prev { left: 14px; }
.mc-slider-next { right: 14px; }
.mc-slider-prev:active { transform: translateY(-50%) scale(.92); }
.mc-slider-next:active { transform: translateY(-50%) scale(.92); }

/* Puces indicateurs (générées côté front) */
.mc-slider-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 3;
}
.mc-slider-dots button {
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    cursor: pointer;
    transition: width .3s ease, background .3s ease;
}
.mc-slider-dots button.is-active {
    width: 26px;
    border-radius: 6px;
    background: #fff;
}

/* Image cliquable (lien posé depuis l'éditeur HTML) : curseur + effet hover
   pour signaler qu'elle est cliquable. */
.mc-linked-img, img[data-mc-href] {
    cursor: pointer;
    transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease;
}
.mc-linked-img:hover, img[data-mc-href]:hover {
    opacity: .9;
    transform: scale(1.015);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

/* Vidéo médiathèque + intégration YouTube (composants éditeur HTML) */
.mc-video-wrap { margin: 12px 0; }
.mc-video { width: 100%; display: block; border-radius: var(--radius); }
.mc-embed {
    position: relative; width: 100%; padding-top: 56.25%; /* 16:9 */
    margin: 12px 0; border-radius: var(--radius); overflow: hidden; background: #000;
}
.mc-embed iframe, .mc-embed__frame {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

/* Fiche produit */
/* Contenu de la fiche produit élargi jusqu'à 90vw (au lieu du .container 1200px).
   Double classe = spécificité supérieure à .container. */
.container.product-detail,
.container.product-freeform,
.container.related-products {
    max-width: 90vw;
}

.product-detail {
    display: grid;
    grid-template-columns: 1fr 1fr; /* galerie et infos : 50 % chacune */
    gap: var(--spacing-xl);
    padding: var(--spacing-xl) 0;
    align-items: start; /* la galerie ne s'étire plus à la hauteur des infos */
}

/* Les deux colonnes tiennent exactement 50 % : min-width:0 empêche une image
   large de faire déborder/élargir sa colonne. */
.product-detail__gallery,
.product-detail__info {
    min-width: 0;
}

/* Galerie fiche produit : mini carrousel vertical à gauche + image principale */
.product-detail__gallery {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

.product-detail__thumbs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 460px;
    overflow-y: auto;
    flex: 0 0 auto;
}

.product-detail__thumbs img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s ease;
}

.product-detail__thumbs img.active,
.product-detail__thumbs img:hover {
    border-color: var(--color-primary);
}

.product-detail__main {
    flex: 1 1 auto;
    min-width: 0;
    /* Cadre image FIXE : ratio carré constant, ne se redimensionne pas selon
       l'image ni la longueur de la description. Image centrée, entièrement
       visible dedans (contain). */
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #faf7f2;
    border-radius: var(--radius);
    overflow: hidden;
}

.product-detail__main img {
    width: 100%;
    height: 100%;
    /* Image principale entièrement visible dans la boîte, pas de recadrage */
    object-fit: contain;
    cursor: zoom-in; /* clic = ouverture en grand (lightbox) */
}

/* Lightbox fiche produit : au clic sur l'image, déroulé zoomé de toutes les
   images. Clic en dehors des images (le fond) pour revenir. */
.pd-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.88);
    overflow-y: auto;
    padding: 40px 24px;
}
.pd-lightbox[hidden] { display: none; }
.pd-lightbox__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}
.pd-lightbox__inner img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);
    cursor: default;
}
.pd-lightbox__close {
    position: fixed;
    top: 14px;
    right: 22px;
    font-size: 30px;
    line-height: 1;
    color: #fff;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 2001;
}

/* Bloc HTML libre pleine largeur sous la fiche produit */
.product-freeform {
    margin-top: var(--spacing-xl);
}

/* Produits associés en bas de fiche produit */
.related-products {
    margin-top: var(--spacing-xl);
}

.related-products h2 {
    margin-bottom: var(--spacing-md);
}

@media (max-width: 640px) {
    .product-detail__gallery { flex-direction: column-reverse; }
    .product-detail__thumbs { flex-direction: row; max-height: none; overflow-x: auto; }
}

.product-detail__price {
    font-size: 1.8rem;
    font-weight: 700;
    margin: var(--spacing-md) 0;
}

.reassurance-badges {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-md);
}

.stock-status {
    font-weight: 600;
    margin-bottom: var(--spacing-md);
}

.stock-status.in-stock {
    color: var(--color-success);
}

.stock-status.out-of-stock {
    color: var(--color-error);
}

.product-detail__description {
    margin: var(--spacing-lg) 0;
}

.rules-link {
    display: inline-block;
    margin-top: var(--spacing-md);
    text-decoration: underline;
}

.product-detail__files {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.product-detail__files .rules-link {
    margin-top: 0;
}

@media (max-width: 768px) {
    .product-detail {
        grid-template-columns: 1fr;
    }
}

/* Landing page de campagne pub : volontairement épurée, sans header/footer */
.landing-page {
    background: #faf6ec;
}

.landing-page__container {
    max-width: 90vw;
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-md);
    text-align: center;
}

.landing-page__logo {
    height: 56px;
    margin: 0 auto var(--spacing-lg);
}

.landing-page__hero-image {
    border-radius: var(--radius);
    margin-bottom: var(--spacing-lg);
}

.landing-page__subtitle {
    color: var(--color-text-light);
    margin: var(--spacing-sm) 0 var(--spacing-lg);
}

/* Bandeau d'accroche (points forts sous le titre) */
.landing-page__tagline {
    font-weight: 600;
    color: var(--color-text);
    margin: var(--spacing-sm) 0 var(--spacing-md);
}

/* Message d'urgence près des boutons */
.landing-page__urgency {
    color: #c0392b;
    font-weight: 600;
    margin-top: var(--spacing-sm);
}

/* Garantie / réassurance */
.landing-page__guarantee {
    color: var(--color-text-light);
    font-size: 0.9rem;
    margin-top: var(--spacing-sm);
}

.landing-page__buttons {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

/* ============================================================
   Responsive (mobile) — tout le site doit rester utilisable
   sur petit écran, particulièrement les landing pages (le
   trafic publicitaire est très majoritairement mobile) et le
   tunnel de commande (jamais perdre une vente sur un mauvais
   affichage mobile).
   ============================================================ */
/* Le bouton menu mobile n'apparaît qu'en dessous de 768px (caché sur desktop).
   DOIT rester AVANT la media query : sinon, à spécificité égale, cette règle
   (source plus tardive) écrasait le display:block mobile et cachait le bouton. */
.menu-toggle {
    display: none;
}

@media (max-width: 768px) {
    .site-header__inner {
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }

    .main-nav {
        order: 3;
        width: 100%;
        flex-direction: column;
        gap: var(--spacing-sm);
        display: none; /* masqué par défaut, ouvert via le bouton menu */
    }

    .main-nav.is-open {
        display: flex;
    }

    .menu-toggle {
        display: block;
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        order: -1;            /* placé en premier = à gauche du header */
        margin-right: auto;   /* pousse le reste (compte, panier) à droite */
    }

    /* Mobile : on masque le logo Merle pour laisser le toggle menu à gauche. */
    .site-header .logo {
        display: none;
    }

    .hero h1 {
        font-size: 1.8rem;
    }

    .hero {
        padding: var(--spacing-lg) 0;
    }

    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
        padding: var(--spacing-lg) 0;
    }

    .product-detail {
        grid-template-columns: 1fr;
        padding: var(--spacing-lg) 0;
        gap: var(--spacing-md);
    }

    /* Mobile : petite marge latérale pour que le texte ne colle pas aux bords. */
    .product-detail__info {
        margin-left: 8px;
        margin-right: 8px;
    }

    .cart-table {
        font-size: 0.85rem;
    }

    .cart-table__thumb {
        width: 40px;
        height: 40px;
    }

    .checkout-form__row--split {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .checkout-page,
    .account-dashboard,
    .cms-page {
        padding: var(--spacing-lg) var(--spacing-sm);
        max-width: 100%; /* 60vw serait trop étroit sur mobile */
    }

    .landing-page__container {
        padding: var(--spacing-lg) var(--spacing-sm);
    }

    /* Blocs « colonnes » de l'éditeur (2/3/4) : sur mobile, chaque colonne
       passe l'une sous l'autre et occupe 90% de la largeur (le !important
       neutralise la largeur en % posée en inline sur chaque cellule). */
    .mc-row {
        flex-direction: column;
        align-items: center;
    }

    .mc-row > * {
        width: 90% !important;
    }

    .landing-page__buttons .btn--large {
        width: 100%;
        text-align: center;
    }
}

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

    .metric-cards {
        grid-template-columns: 1fr 1fr;
    }
}
.error-page {
    text-align: center;
    padding: var(--spacing-xl) 0;
}

.error-page h1 {
    font-size: 4rem;
    color: var(--color-primary);
}

/* Panier */
.cart-page {
    padding: var(--spacing-xl) 0;
}

.cart-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--spacing-lg) 0;
}

.cart-table th {
    text-align: left;
    font-weight: 600;
    padding: var(--spacing-sm);
    border-bottom: 2px solid var(--color-primary);
    font-size: 0.85rem;
    color: var(--color-text-light);
}

.cart-table td {
    padding: var(--spacing-sm);
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}

.cart-table__thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--radius);
}

.cart-qty-form input[type="number"] {
    width: 60px;
    padding: 6px;
    border-radius: var(--radius);
    border: 1px solid #ddd;
}

.cart-remove-btn {
    background: none;
    border: none;
    color: var(--color-error);
    cursor: pointer;
    font-size: 1rem;
}

.cart-summary {
    text-align: right;
}

.cart-summary__total {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: var(--spacing-md);
}

/* Tunnel de commande */
.checkout-page {
    padding: var(--spacing-xl) 0;
    max-width: 60vw;
}

/* Point relais choisi : encadré vert + coche pour bien le mettre en avant. */
#relay-chosen.relay-chosen--set {
    margin-top: 12px;
    padding: 10px 14px;
    background: #e6f4ea;
    border: 1px solid #1e7e34;
    border-radius: 8px;
    color: #1e7e34;
    display: flex;
    align-items: center;
    gap: 10px;
}
#relay-chosen.relay-chosen--set::before {
    content: "✓";
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #1e7e34;
    color: #fff;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
}

/* Fiche produit : Téléchargements et Liens utiles présentés en fieldset. */
.product-detail__downloads,
.product-detail__links {
    min-width: 0;
    margin-top: 20px;
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}
.product-detail__downloads legend,
.product-detail__links legend {
    padding: 0 6px;
    font-size: 1rem;
    font-weight: 600;
}

.checkout-form h2 {
    margin: var(--spacing-lg) 0 var(--spacing-md);
    font-size: 1.2rem;
}

.checkout-form__row {
    margin-bottom: var(--spacing-md);
}

.checkout-form__row--split {
    display: flex;
    gap: var(--spacing-md);
}

.checkout-form input[type="text"],
.checkout-form input[type="email"],
.checkout-form input[type="tel"],
.checkout-form input[type="password"] {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius);
    border: 1px solid #ddd;
    font-family: var(--font-main);
}

.checkout-form__radio,
.checkout-form__checkbox {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.checkout-form__delay {
    color: var(--color-text-light);
    font-size: 0.85rem;
}

.checkout-summary {
    background: #faf6ec;
    border-radius: var(--radius);
    padding: var(--spacing-md);
    margin: var(--spacing-lg) 0;
}

.checkout-summary__line {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    margin-bottom: var(--spacing-sm);
}

.checkout-summary__total {
    font-weight: 700;
    margin-top: var(--spacing-sm);
    margin-bottom: 20px;
}

.order-pending {
    padding: var(--spacing-xl) 0;
    max-width: 640px;
}

.order-pending__box {
    background: #fff8e6;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius);
    padding: var(--spacing-md);
    margin: var(--spacing-md) 0;
}

/* Pages CMS (mentions légales, CGV...) */
.cms-page {
    padding: var(--spacing-xl) 0;
    max-width: 760px;
}

.cms-page__content {
    margin-top: var(--spacing-md);
    line-height: 1.7;
}

.cms-page__content h2 {
    margin: var(--spacing-lg) 0 var(--spacing-sm);
    font-size: 1.2rem;
}

.cms-page__content p {
    margin-bottom: var(--spacing-md);
}

/* Compte client */
.account-login {
    padding: var(--spacing-xl) 0;
    max-width: 400px;
}

.account-login__form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin: var(--spacing-lg) 0;
}

.account-login__form input {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius);
    border: 1px solid #ddd;
    font-family: var(--font-main);
}

.account-login__error {
    background: #fbe2e1;
    color: var(--color-error);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius);
    font-size: 0.9rem;
}

.account-login__hint {
    font-size: 0.85rem;
    color: var(--color-text-light);
}

.account-dashboard {
    padding: var(--spacing-xl) 0;
}

.account-dashboard__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.account-dashboard__logout {
    font-size: 0.85rem;
    text-decoration: underline;
    color: var(--color-text-light);
}

.account-dashboard__email {
    color: var(--color-text-light);
    margin-bottom: var(--spacing-lg);
}

.account-subnav {
    display: flex;
    gap: var(--spacing-lg);
    border-bottom: 1px solid #eee;
    margin-bottom: var(--spacing-lg);
    flex-wrap: wrap;
}

.account-subnav a {
    padding-bottom: var(--spacing-sm);
    font-size: 0.9rem;
    color: var(--color-text-light);
}

.account-subnav a.active {
    color: var(--color-text);
    border-bottom: 2px solid var(--color-primary);
    font-weight: 600;
}