/* =====================================================
   EMPREINTE-MOI — CSS COMPILÉ
   Système de design complet
   ===================================================== */

/* === Reset & Base === */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; }
p { margin: 0; padding: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { cursor: pointer; }
input, button, textarea, select { font: inherit; }
img { max-width: 100%; height: auto; display: block; }
table { border-collapse: collapse; }

/* === Variables charte Empreinte-Moi === */
:root {
    --color-navy: #1B3A6B;
    --color-navy-light: #2C5282;
    --color-gold: #C9A84C;
    --color-gold-light: #E8C86A;
    /* Taille commune des mini-titres. Elles valaient 10, 10,5 et 11 px selon la
       page, sans raison. */
    --eyebrow-size: 0.8125rem;
    --color-cream: #FAF8F4;
    --color-cream-dark: #F0EDE6;
    --color-text: #1A1A1A;
    --color-text-muted: #666666;
    --color-border: #E0DBD0;
    --color-success: #2D7A4F;
    --color-error: #C0392B;
    --color-warning: #E67E22;

    --font-serif: 'Cormorant Garamond', Georgia, serif;
    --font-sans: 'Montserrat', sans-serif;
    --font-body: 'Lato', sans-serif;

    --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --shadow: 0 4px 24px rgba(27, 58, 107, 0.10);
    --shadow-lg: 0 12px 48px rgba(27, 58, 107, 0.15);
}

/* === Base === */
body {
    font-family: var(--font-body);
    background: var(--color-cream);
    color: var(--color-text);
    line-height: 1.7;
    /* Pied de page collé au bas de la fenêtre : sur les pages courtes, le
       footer remontait et laissait une bande vide en dessous. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
#main-content { flex: 1 0 auto; }
a { text-decoration: none; color: inherit; }

/* =====================================================
   _typography.css
   ===================================================== */
/* === Typography === */
h1, .h1 {
    font-family: var(--font-serif);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 300;
    line-height: 1.0;
    color: var(--color-navy);
}
h2, .h2 {
    font-family: var(--font-serif);
    font-size: clamp(1.8rem, 3vw, 3rem);
    font-weight: 300;
    line-height: 1.1;
    color: var(--color-navy);
}
h3, .h3 {
    font-family: var(--font-sans);
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    font-weight: 600;
    color: var(--color-navy);
}
h4, .h4 {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-navy);
}
.eyebrow {
    font-family: var(--font-sans);
    font-size: var(--eyebrow-size);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-gold);
}
.text-muted { color: var(--color-text-muted); }

/* =====================================================
   _buttons.css
   ===================================================== */
/* === Buttons === */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 14px 32px;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}
.btn-primary { background: var(--color-navy); color: #fff; border-color: var(--color-navy); }
.btn-primary:hover { background: var(--color-navy-light); }
.btn-gold { background: var(--color-gold); color: #fff; border-color: var(--color-gold); }
.btn-gold:hover { background: var(--color-gold-light); }
.btn-outline { background: transparent; color: var(--color-navy); border-color: var(--color-navy); }
.btn-outline:hover { background: var(--color-navy); color: #fff; }
.btn-outline-white { background: transparent; color: #fff; border-color: rgba(255,255,255,0.6); }
.btn-outline-white:hover { background: rgba(255,255,255,0.1); }
.btn-sm { padding: 10px 22px; font-size: 0.625rem; }
.btn-lg { padding: 18px 40px; font-size: 0.75rem; }

/* Rangée d'actions en bas de formulaire : retour à gauche, validation à droite.
   Trois précautions, chacune nécessaire :
   - `flex-wrap` : sous la largeur de confort, la validation passe à la ligne
     au lieu de comprimer la rangée ;
   - `min-width: 0` : un élément flex refuse par défaut de rétrécir sous sa
     largeur de contenu. Avec `white-space: nowrap` hérité de `.btn`, cette
     largeur est celle du libellé entier — `flex: 1` ne pouvait donc jamais
     réduire le bouton, qui débordait du cadre ;
   - `white-space: normal` : en dernier recours, sur un écran très étroit ou
     avec une police agrandie, le libellé se coupe sur deux lignes plutôt que
     de sortir de son bouton. */
.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: stretch;
}
.form-actions > .btn {
    min-width: 0;
    justify-content: center;
    text-align: center;
}
/* Avertissement de recette : volontairement voyant, il ne doit jamais passer
   inaperçu sur une page qui annonce une commande confirmée. */
.checkout-demo-banner {
    margin-bottom: 24px;
    padding: 14px 18px;
    background: #FDF3D8;
    border: 1.5px solid #C9A84C;
    font-family: var(--font-sans);
    font-size: .8125rem;
    line-height: 1.6;
    color: #6B5410;
    text-align: left;
}
.checkout-demo-banner strong {
    display: block;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .6875rem;
    margin-bottom: 4px;
}

.form-actions__back { flex: 0 0 auto; }
.form-actions__next {
    flex: 1 1 260px;
    white-space: normal;
}

/* =====================================================
   _forms.css
   ===================================================== */
/* === Forms === */
.form-group { margin-bottom: 1.5rem; }
.form-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text);
    margin-bottom: 0.5rem;
}
.form-control {
    display: block;
    width: 100%;
    padding: 12px 16px;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--color-text);
    background: #fff;
    border: 1px solid var(--color-border);
    transition: border-color var(--transition), box-shadow var(--transition);
    outline: none;
}
.form-control:focus {
    border-color: var(--color-navy);
    box-shadow: 0 0 0 3px rgba(27, 58, 107, 0.1);
}
.form-control.is-invalid { border-color: var(--color-error); }
.form-error {
    font-size: 0.8125rem;
    color: var(--color-error);
    margin-top: 0.375rem;
}
.form-hint {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-top: 0.375rem;
}

/* =====================================================
   _layout.css
   ===================================================== */
/* === Layout === */

.container-xl {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}
@media (max-width: 768px) {
    .container-xl { padding: 0 20px; }
}

.section { padding: 80px 0; }
.section--sm { padding: 48px 0; }
.section--lg { padding: 120px 0; }

/* Promo Banner */
.promo-banner {
    background: var(--color-navy);
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
    padding: 10px;
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* Flash Messages */
.flash {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-left: 4px solid;
    margin-bottom: 16px;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    position: relative;
}
.flash--success {
    background: #edf7f0;
    border-color: var(--color-success);
    color: var(--color-success);
}
.flash--error {
    background: #fdf0ee;
    border-color: var(--color-error);
    color: var(--color-error);
}
.flash--warning {
    background: #fef9ec;
    border-color: var(--color-warning, #E67E22);
    color: #8a5000;
}
.flash--info {
    background: #e8f0fb;
    border-color: var(--color-navy-light);
    color: var(--color-navy);
}
.flash-icon {
    flex-shrink: 0;
    font-size: 1rem;
}
.flash-close {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.125rem;
    color: inherit;
    opacity: 0.6;
    padding: 0;
    line-height: 1;
}
.flash-close:hover { opacity: 1; }

/* Page Header */
/* ── En-tête de page ────────────────────────────────────────────────────────
   Bandeau commun à Modèles, La Revue, Contact, Carte cadeau, Panier, fiches et
   pages CMS.

   Le fond n'est pas un aplat : c'est une étoffe. Un sergé à 45°, tissé à 3 %
   de blanc, plus une lueur haute — la matière même des chemises, rendue en
   deux dégradés et zéro image. À cette opacité la luminance ne bouge pas : les
   contrastes mesurés plus bas restent valables.

   Trois défauts mesurés avant refonte :
   1. Fil d'Ariane et chapô de La Revue et Contact à **1,96:1** (#666 sur
      marine, via `.breadcrumb--dark` prévue pour les fonds clairs).
   2. Le `h1` global impose `line-height: 1.0` : les titres à deux lignes se
      touchaient.
   3. Le titre courait sur toute la largeur, le chapô tenait dans 520 px : les
      deux blocs ne s'alignaient sur rien. */
.page-header {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--color-navy);
    border-bottom: 1px solid rgba(201, 168, 76, 0.28);
    padding: 76px 0 80px;
    color: #fff;
}

/* Le tissage. `repeating-linear-gradient` à 45°, si discret qu'il se devine
   plutôt qu'il ne se voit — c'est le but : une étoffe ne s'annonce pas. */
.page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        repeating-linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.030) 0 1px,
            transparent 1px 5px
        ),
        radial-gradient(120% 90% at 22% -10%, rgba(93, 130, 190, 0.34) 0%, transparent 62%),
        linear-gradient(180deg, var(--color-navy) 0%, #14274A 100%);
    background-color: var(--color-navy);
}

.page-header > * { position: relative; }

/* Amorce de couture : un trait d'or court, posé au-dessus du sur-titre comme
   une marque de craie sur le tissu. Il donne au bloc un point de départ —
   sans lui, le sur-titre flottait dans le vide. */
.page-header .eyebrow::before {
    content: '';
    display: block;
    width: 42px;
    height: 1px;
    margin-bottom: 18px;
    background: linear-gradient(90deg, var(--color-gold) 0%, rgba(201, 168, 76, 0) 100%);
}

.page-header h1,
.page-header .h1 {
    color: #fff;
    /* Ces bandeaux portent des titres longs : « Nos modèles de chemises sur
       mesure Homme & Femme ». */
    font-size: clamp(2rem, 3.6vw, 3.25rem);
    line-height: 1.14;
    /* Mesure en `em`, pas en `ch` : le « 0 » de Cormorant est étroit, et
       `20ch` ne donnait que 440 px — le titre devenait plus étroit que son
       propre chapô. `15em` suit la taille du titre. */
    max-width: 15em;
    margin-bottom: 22px;
    text-wrap: balance;
}

/* Rythme porté par les éléments, pas par un `gap` : toutes les pages n'ont pas
   de fil d'Ariane, et un `gap` y laisserait un trou. */
.page-header .breadcrumb { margin-bottom: 30px; }
.page-header .eyebrow    { margin-bottom: 14px; }

/* Chapô. `.catalogue-subtitle` et `.journal-header-sub` faisaient le même
   travail avec deux tailles et deux couleurs : ce sont des alias. */
.page-header__lead,
.page-header .catalogue-subtitle,
.page-header .journal-header-sub {
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.82);
    max-width: 60ch;
    margin: 0;
}

/* Révélation au chargement : un seul mouvement orchestré, de haut en bas,
   plutôt que des effets dispersés. */
@media (prefers-reduced-motion: no-preference) {
    .page-header .breadcrumb,
    .page-header .eyebrow,
    .page-header h1,
    .page-header .h1,
    .page-header__lead,
    .page-header .catalogue-subtitle,
    .page-header .journal-header-sub {
        /* `backwards` et non `both` : l'état de départ ne s'applique que
           pendant le délai, et l'élément retrouve son style normal à la fin.
           Avec `both`, `opacity: 0` reste l'état de repos — si l'animation ne
           démarre pas, l'en-tête est simplement invisible. Un ornement ne doit
           jamais pouvoir effacer le contenu. */
        animation: pageHeaderRise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
    }
    .page-header .breadcrumb { animation-delay: 0.02s; }
    .page-header .eyebrow    { animation-delay: 0.10s; }
    .page-header h1,
    .page-header .h1         { animation-delay: 0.18s; }
    .page-header__lead,
    .page-header .catalogue-subtitle,
    .page-header .journal-header-sub { animation-delay: 0.28s; }
}

@keyframes pageHeaderRise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

@media (max-width: 768px) {
    .page-header { padding: 52px 0 56px; }
    .page-header h1 { max-width: none; margin-bottom: 18px; }
    .page-header .breadcrumb { margin-bottom: 24px; }
    .page-header .eyebrow::before { width: 32px; margin-bottom: 14px; }
    .page-header__lead,
    .page-header .catalogue-subtitle,
    .page-header .journal-header-sub { font-size: 1rem; }
}

/* ── Fil d'Ariane ───────────────────────────────────────────────────────────
   Un repère de navigation, pas un titre. Il affichait le H1 entier de la page
   — « Nos modèles de chemises sur mesure Homme & Femme », 47 caractères — en
   11 px gras espacés : plus long et plus lourd que ce qu'il désigne. Les
   libellés sont désormais les noms courts du menu, ceux qui correspondent aux
   URL, et la graisse redescend à 500. */
.breadcrumb {
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}
.breadcrumb__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.breadcrumb__item {
    display: inline-flex;
    align-items: center;
}
.breadcrumb a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition);
}
.breadcrumb a:hover { color: var(--color-gold); }
.breadcrumb [aria-current="page"] { color: rgba(255, 255, 255, 0.92); }

/* Séparateur : une barre oblique fine plutôt qu'un chevron. Elle pèse moins
   dans la ligne et rappelle le trait de craie du sur-titre. */
.breadcrumb__sep {
    width: 1px;
    height: 9px;
    margin: 0 12px;
    background: rgba(255, 255, 255, 0.34);
    transform: rotate(18deg);
}

/* Ancien balisage (fils d'Ariane hors bandeau, non encore migrés). */
.breadcrumb-sep {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.625rem;
    margin: 0 6px;
}
.breadcrumb--dark,
.breadcrumb--dark a { color: var(--color-text-muted); }
.breadcrumb--dark a:hover { color: var(--color-navy); }
.breadcrumb--dark .breadcrumb-sep { color: var(--color-border); }

/* =====================================================
   _nav.css
   ===================================================== */
/* === Navigation === */

.site-header {
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 2px 8px rgba(27, 58, 107, 0.06);
}

.header-main {
    display: flex;
    align-items: center;
    gap: 32px;
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    gap: 32px;
}

/* Logo
   Le logo de la marque, posé en SVG. Il portait auparavant trois `<span>`
   colorés qui imitaient la typographie ; ce n'était pas le logo, et rien ne
   garantissait qu'il lui ressemble encore après un changement de police.

   La hauteur est fixée, la largeur suit : le rapport du dessin est de 6,3 pour
   1, et le contraindre en largeur écraserait la baseline « chemise sur-mesure
   française » que le logo contient. */
.logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.logo img {
    display: block;
    width: auto;
    height: 30px;
}
.logo--footer img {
    height: 28px;
}
/* Tunnel de commande : barre allégée, le logo y est plus discret. */
.logo--compact img {
    height: 30px;
}
/* Pages de connexion : le logo est seul et centré, il peut respirer. */
.logo--auth img {
    height: 46px;
    margin: 0 auto;
}

/* Main Navigation */
.main-nav ul,
.nav-list {
    display: flex;
    flex-direction: row;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
}
.main-nav a,
.nav-link {
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text);
    padding: 0 16px;
    height: 72px;
    display: flex;
    align-items: center;
    border-bottom: 2px solid transparent;
    transition: all var(--transition);
    white-space: nowrap;
}
.main-nav a:hover,
.main-nav a.active,
.nav-link:hover,
.nav-link.active {
    color: var(--color-navy);
    border-bottom-color: var(--color-gold);
}

/* Header Actions */
.header-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}
.header-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-family: var(--font-sans);
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    transition: color var(--transition);
    position: relative;
}
.header-action-btn svg {
    width: 20px;
    height: 20px;
    stroke: var(--color-navy);
    fill: none;
    stroke-width: 1.5;
    transition: stroke var(--transition);
}
.header-action-btn:hover { color: var(--color-navy); }
.header-action-btn:hover svg { stroke: var(--color-gold); }
.header-action-btn.active { color: var(--color-gold); }
.header-action-btn.active svg { stroke: var(--color-gold); }

/* Cart Badge */
.cart-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--color-gold);
    color: #fff;
    font-size: 0.5rem;
    font-weight: 700;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Language Switcher */
.lang-switcher {
    display: flex;
    align-items: center;
    gap: 4px;
}
.lang-btn {
    font-family: var(--font-sans);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 8px;
    border: 1px solid var(--color-border);
    background: transparent;
    cursor: pointer;
    color: var(--color-text-muted);
    transition: all var(--transition);
}
.lang-btn:hover,
.lang-btn.active {
    border-color: var(--color-navy);
    color: var(--color-navy);
}

/* Hamburger */
.nav-burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}
.nav-burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-navy);
    transition: all var(--transition);
}

/* Mobile Drawer */
.nav-drawer {
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform var(--transition);
    overflow-y: auto;
    padding: 24px;
}
.nav-drawer.is-open {
    transform: translateX(0);
}
.nav-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-border);
}
.nav-drawer-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--color-navy);
}
.nav-drawer .nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}
.nav-drawer .nav-link {
    height: auto;
    padding: 14px 0;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--color-border);
    width: 100%;
    border-left: none;
}

/* Responsive */
@media (max-width: 1024px) {
    .main-nav { display: none; }
    .nav-burger { display: flex; }
    .header-inner { height: 60px; }
    .header-action-btn span { display: none; }
}
@media (max-width: 768px) {
    .header-inner {
        padding: 0 20px;
        height: 56px;
    }
}

/* =====================================================
   _hero.css
   ===================================================== */
/* === Hero === */

.hero {
    position: relative;
    background: linear-gradient(160deg, #0d2340 0%, var(--color-navy) 60%, #2a4a7f 100%);
    min-height: 88vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% 30%, rgba(201, 168, 76, 0.08) 0%, transparent 60%);
    pointer-events: none;
    z-index: 1;
}

/* ── Hero avec photo de fond ───────────────────────────────────────────
   Fond d'attente volontairement brun-sombre et non bleu marine : c'est la
   teinte moyenne des photos d'atelier, donc l'arrivée de l'image ne produit
   plus de bascule de couleur visible. Le contraste du texte blanc et de
   l'accroche dorée y reste largement au-dessus du seuil AA.
   Surchargeable par bloc via le champ « couleur de fond » du CMS. */
.hero--has-image {
    background: #2a241e;
}

.hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
}
.hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Cadrage calé vers le haut : sur les écrans très larges la section est
       plus plate que l'image et le rognage vertical couperait les visages. */
    object-position: 50% 20%;
}

/* Voile dégradé : dense à gauche où se trouve le texte, quasi nul à droite
   pour ne pas éteindre les sujets. Calibré pour tenir le contraste AA. */
.hero--has-image::before {
    background:
        linear-gradient(100deg,
            rgba(9, 22, 40, 0.80) 0%,
            rgba(9, 22, 40, 0.70) 30%,
            rgba(9, 22, 40, 0.42) 50%,
            rgba(9, 22, 40, 0.14) 72%,
            rgba(9, 22, 40, 0.06) 100%),
        linear-gradient(to top, rgba(9, 22, 40, 0.45) 0%, transparent 42%);
}

.hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 80px 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: end;
}

.hero-content { /* left column */ }

.hero-eyebrow {
    font-family: var(--font-sans);
    font-size: var(--eyebrow-size);
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: 20px;
}

.hero-title {
    font-family: var(--font-serif);
    font-size: clamp(3rem, 5vw, 5rem);
    font-weight: 300;
    color: #fff;
    line-height: 1.0;
    margin-bottom: 24px;
}
.hero-title em {
    color: var(--color-gold);
    display: block;
    font-style: italic;
}

.hero-subtitle {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.8;
    margin-bottom: 36px;
    max-width: 480px;
}

.hero-ctas {
    display: flex;
    flex-direction: row;
    gap: 16px;
    flex-wrap: wrap;
}

.hero-stats {
    display: flex;
    flex-direction: row;
    gap: 40px;
    flex-wrap: wrap;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin-top: 48px;
    padding-top: 32px;
}
.hero-stat-value {
    font-family: var(--font-serif);
    font-size: 2rem;
    font-weight: 600;
    color: var(--color-gold);
    display: block;
}
.hero-stat-label {
    font-family: var(--font-sans);
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
    display: block;
}

.hero-visual {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 20px;
    justify-content: center;
}

/* Page Hero — interior pages */
.page-hero {
    background: var(--color-navy);
    padding: 64px 0;
    color: #fff;
}
.page-hero h1,
.page-hero .h1 {
    color: #fff;
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    margin-bottom: 12px;
}

/* Responsive */
@media (max-width: 1024px) {
    .hero {
        min-height: 70vh;
        align-items: center;
    }
    .hero-inner {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 60px 20px;
    }
    .hero-visual { display: none; }

    /* Le cadrage portrait place les sujets en haut : le texte descend dans la
       zone calme du bas plutôt que de leur passer sur le visage. */
    .hero--has-image {
        min-height: 88vh;
        align-items: flex-end;
    }
    .hero-media img { object-position: 50% 12%; }

    /* Le bloc de texte fait presque 500px : sans ce resserrement il remonte
       jusqu'en haut de la section et recouvre les visages. */
    .hero--has-image .hero-eyebrow  { margin-bottom: 14px; }
    .hero--has-image .hero-title    { margin-bottom: 18px; }
    .hero--has-image .hero-subtitle { margin-bottom: 28px; }
    .hero--has-image .hero-stats {
        margin-top: 24px;
        padding-top: 20px;
    }

    /* Voile vertical, et non plus latéral : en une seule colonne le texte
       occupe toute la largeur.
       Le palier haut est calé sur le début du texte (~37% de la section) :
       en dessous, les libellés tombent sur les chemises blanches et le
       contraste s'effondre — l'or sur blanc ne passe à aucune opacité
       raisonnable. Au-dessus du palier, la photo reste franche. */
    .hero--has-image::before {
        background: linear-gradient(to bottom,
            rgba(9, 22, 40, 0.10) 0%,
            rgba(9, 22, 40, 0.20) 16%,
            rgba(9, 22, 40, 0.92) 33%,
            rgba(9, 22, 40, 0.94) 60%,
            rgba(9, 22, 40, 0.97) 100%);
    }
}
@media (max-width: 768px) {
    .hero { min-height: 60vh; }
    /* Hauteur calée sur le bloc de texte (~440px) : en dessous, il remonte
       jusque sur les visages. Mesuré, pas choisi au jugé.
       `svh` évite que la barre d'URL mobile ne rogne la section au chargement ;
       `vh` reste pour les navigateurs qui ne connaissent pas l'unité. */
    .hero--has-image {
        min-height: 92vh;
        min-height: 92svh;
    }
    .hero-inner { padding: 48px 20px; }
    .hero-title { font-size: clamp(2.25rem, 8vw, 3.5rem); }
    .hero-stats { gap: 24px; }
}

/* =====================================================
   _footer.css
   ===================================================== */
/* === Footer === */

/* Reassurance bar */
.footer-reassurance {
    background: var(--color-cream-dark);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: 28px 0;
}
.reassurance-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}
.reassurance-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-navy);
}
.reassurance-item svg,
.reassurance-item .icon {
    color: var(--color-gold);
    fill: none;
    stroke: var(--color-gold);
    flex-shrink: 0;
}

/* Footer Main */
.site-footer {
    background: var(--color-navy);
    /* Ancre le filigrane ci-dessous, et l'empêche de déborder la page. */
    position: relative;
    overflow: hidden;
}

/* Filigrane de l'empreinte.

   Le losange figure déjà dans le logo, en séparateur entre « EMPREINTE » et
   « MOI » : le poser une seconde fois à côté du nom le ferait apparaître deux
   fois dans le même bloc, à trente pixels d'écart. Ici il est seul, assez
   grand pour qu'on lise le dessin des crêtes, et assez pâle pour ne rien
   disputer au texte.

   Décoratif : posé en pseudo-élément, il reste hors du flux du document et
   invisible aux lecteurs d'écran, qui n'ont rien à y lire.

   `brightness(0) invert(1)` ramène le losange rouge et marine à un blanc pur —
   à 5 % sur du marine, les couleurs d'origine tourneraient au brun sale. */
.site-footer::after {
    content: "";
    position: absolute;
    right: -60px;
    bottom: -80px;
    width: 420px;
    height: 420px;
    /* Variante silhouette, et non le fichier de marque : celui-ci porte deux
       losanges pleins blancs derrière le dessin, qui garantissent la lisibilité
       de l'empreinte sur n'importe quel fond. Blanchis avec le reste, ils
       remplissaient le losange d'un aplat et l'empreinte disparaissait dedans.
       Pas de `filter` non plus — le fichier est déjà blanc. */
    background: url("/img/brand/empreinte-blanche.svg") center / contain no-repeat;
    opacity: 0.10;
    pointer-events: none;
}

/* Sous 900 px le pied de page se replie en une colonne : le filigrane
   passerait derrière le texte au lieu de l'accompagner. */
@media (max-width: 900px) {
    .site-footer::after { display: none; }
}
.footer-main {
    padding: 80px 0;
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 60px;
}
.footer-brand { }
.footer-tagline {
    font-size: 0.75rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 16px;
    max-width: 280px;
}
.footer-col-title {
    font-family: var(--font-sans);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(201, 168, 76, 0.85);
    margin-bottom: 16px;
}
.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.footer-links a,
.footer-links li a {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    transition: color var(--transition);
    display: block;
}
.footer-links a:hover,
.footer-links li a:hover {
    color: var(--color-gold);
}
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 24px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.35);
}
.footer-bottom a {
    color: rgba(255, 255, 255, 0.35);
    transition: color var(--transition);
}
.footer-bottom a:hover { color: rgba(255, 255, 255, 0.6); }

/* Responsive */
@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
    .footer-brand { grid-column: 1 / -1; }
    .reassurance-list { gap: 32px; }
}
@media (max-width: 640px) {
    .footer-grid { grid-template-columns: 1fr; }
    .footer-main { padding: 48px 0; }
    .footer-bottom { flex-direction: column; text-align: center; }
    .reassurance-list { gap: 20px; flex-direction: column; align-items: flex-start; padding: 0 20px; }
}

/* =====================================================
   _cards.css
   ===================================================== */
/* === Cards === */

/* ---- Model Card ---- */
.model-card {
    background: #fff;
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--transition), transform var(--transition);
    overflow: hidden;
}
.model-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

/* Les visuels de modèles sont carrés et cadrés au plus juste : un rapport
   4/3 en `cover` rognait le col en haut et le bas de la chemise. On montre
   l'image entière, sur un fond clair qui prolonge la photo plutôt que de la
   souligner. */
.model-card-img {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #fff;
}
.model-card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform var(--transition);
}
.model-card:hover .model-card-img img {
    transform: scale(1.04);
}

.model-card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(27, 58, 107, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition);
}
.model-card:hover .model-card-overlay { opacity: 1; }

.model-card-body {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.model-card-label {
    font-family: var(--font-sans);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-gold);
}
.model-card-title {
    font-family: var(--font-serif);
    font-size: 1.375rem;
    font-weight: 400;
    color: var(--color-navy);
    line-height: 1.2;
}
.model-card-price {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}
/* `margin-top: auto` pousse le lien en bas de la carte : sans lui, un titre
   sur deux lignes — « Chemisier femme jean motifs » — décalait son
   « Découvrir » plus bas que celui des cartes voisines. */
.model-card-cta {
    display: inline-block;
    margin-top: auto;
    padding-top: 12px;
    font-family: var(--font-sans);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-navy);
    border-bottom: 1px solid var(--color-navy);
    padding-bottom: 2px;
    transition: color var(--transition), border-color var(--transition);
    align-self: flex-start;
}
.model-card-cta:hover {
    color: var(--color-gold);
    border-color: var(--color-gold);
}

/* ---- Article / Blog Card ---- */
.article-card {
    background: #fff;
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--transition), transform var(--transition);
    overflow: hidden;
}
.article-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}
.article-card-img {
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: var(--color-cream-dark);
    flex-shrink: 0;
}
.article-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition);
}
.article-card:hover .article-card-img img {
    transform: scale(1.03);
}
.article-card-body {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.article-card-date {
    font-family: var(--font-sans);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-gold);
}
.article-card-title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--color-navy);
    line-height: 1.3;
}
.article-card-excerpt {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    line-height: 1.7;
    flex: 1;
}
.article-card-link {
    display: inline-block;
    margin-top: 12px;
    font-family: var(--font-sans);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-navy);
    border-bottom: 1px solid var(--color-navy);
    padding-bottom: 2px;
    transition: color var(--transition), border-color var(--transition);
    align-self: flex-start;
}
.article-card-link:hover {
    color: var(--color-gold);
    border-color: var(--color-gold);
}

/* ---- Account Dashboard Card ---- */
.account-card {
    background: #fff;
    border: 1px solid var(--color-border);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: box-shadow var(--transition), border-color var(--transition);
    cursor: pointer;
}
.account-card:hover {
    box-shadow: var(--shadow);
    border-color: var(--color-navy);
}
.account-card-icon {
    font-size: 1.5rem;
    color: var(--color-gold);
    margin-bottom: 4px;
}
.account-card-title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--color-navy);
}
.account-card-desc {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* =====================================================
   _badges.css
   ===================================================== */
/* === Badges === */

[class^="badge--"],
[class*=" badge--"] {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 2px;
    white-space: nowrap;
}

.badge--pending {
    background: #f5f3ee;
    color: #666;
}
.badge--paid {
    background: #edf7f0;
    color: var(--color-success);
}
.badge--production {
    background: rgba(27, 58, 107, 0.1);
    color: var(--color-navy);
}
.badge--shipped {
    background: rgba(100, 60, 180, 0.1);
    color: #6423b5;
}
.badge--delivered {
    background: rgba(45, 122, 79, 0.12);
    color: var(--color-success);
}
.badge--cancelled {
    background: rgba(192, 57, 43, 0.1);
    color: var(--color-error);
}
.badge--refunded {
    background: #f0f0f0;
    color: #888;
}
.badge--default {
    background: rgba(201, 168, 76, 0.15);
    color: #8B6914;
}

/* =====================================================
   _tables.css
   ===================================================== */
/* === Tables === */

.data-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid var(--color-border);
}

.data-table thead th {
    font-family: var(--font-sans);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    padding: 12px 16px;
    border-bottom: 2px solid var(--color-navy);
    text-align: left;
    background: var(--color-cream-dark);
    white-space: nowrap;
}

.data-table tbody tr {
    border-bottom: 1px solid var(--color-border);
    transition: background var(--transition);
}
.data-table tbody tr:last-child {
    border-bottom: none;
}
.data-table tbody tr:hover {
    background: var(--color-cream);
}

.data-table td {
    padding: 16px;
    font-size: 0.8125rem;
    color: var(--color-text);
    vertical-align: middle;
}
.data-table td:last-child {
    text-align: right;
}

.table-ref {
    font-weight: 700;
    color: var(--color-navy);
}
.table-muted {
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    display: block;
    margin-top: 2px;
}
.table-action {
    font-family: var(--font-sans);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-navy);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: border-color var(--transition), color var(--transition);
    border-bottom: 1px solid transparent;
}
.table-action:hover {
    border-bottom-color: var(--color-gold);
    color: var(--color-gold);
}

/* Responsive overflow wrapper */
.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* =====================================================
   _account.css
   ===================================================== */
/* === Account / Espace Client === */

/* Layout */
.account-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 40px;
    align-items: start;
    /* `container-xl` ne pose qu'un retrait horizontal : sans ces marges, le
       contenu touche le menu en haut et le pied de page en bas. */
    padding-top: 48px;
    padding-bottom: 80px;
}

/* Sidebar */
.account-sidebar {
    background: #fff;
    border: 1px solid var(--color-border);
    position: sticky;
    top: 88px;
}

.sidebar-section {
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
}
.sidebar-section:last-child { border-bottom: none; }

.sidebar-section-title {
    font-family: var(--font-sans);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    padding: 6px 24px 8px;
    display: block;
}

.sidebar-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 24px;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-muted);
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: all var(--transition);
    text-decoration: none;
}
.sidebar-link:hover {
    background: var(--color-cream);
    color: var(--color-navy);
}
.sidebar-link.active {
    background: rgba(27, 58, 107, 0.05);
    color: var(--color-navy);
    font-weight: 700;
    border-left-color: var(--color-gold);
}
.sidebar-link--danger { color: var(--color-error); }
.sidebar-link--danger:hover { color: var(--color-error); background: rgba(192, 57, 43, 0.05); }

.sidebar-badge {
    background: var(--color-navy);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 0.5625rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 100px;
    margin-left: auto;
}

/* Account Hero */
.account-hero {
    background: var(--color-navy);
    padding: 48px 0 56px;
    margin-bottom: -24px;
}
.account-hero-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}
.account-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(201, 168, 76, 0.25);
    border: 2px solid var(--color-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-gold);
    flex-shrink: 0;
}
.account-hero-name {
    font-family: var(--font-serif);
    font-size: 2rem;
    font-weight: 300;
    color: #fff;
    line-height: 1.1;
}
.account-hero-email {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 4px;
}
.account-hero-welcome {
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 5px;
}

/* Account Stats */
.account-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-left: auto;
}
.account-stat {
    padding: 14px 20px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}
.account-stat-value {
    display: block;
    font-family: var(--font-serif);
    font-size: 1.75rem;
    font-weight: 400;
    color: var(--color-gold);
}
.account-stat-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 3px;
}

/* Account Content */
.account-content {
    min-width: 0;
}
.account-content-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 24px;
    gap: 16px;
    flex-wrap: wrap;
}
.account-content-title {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    font-weight: 300;
    color: var(--color-navy);
    margin-bottom: 4px;
}
.account-content-sub {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* Tabs */
.tabs {
    display: flex;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 24px;
    gap: 0;
    overflow-x: auto;
}
.tab-btn {
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 11px 18px;
    cursor: pointer;
    border: none;
    background: none;
    color: var(--color-text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all var(--transition);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
}
.tab-btn:hover { color: var(--color-navy); }
.tab-btn.active {
    color: var(--color-navy);
    border-bottom-color: var(--color-gold);
}
.tab-count {
    background: var(--color-cream-dark);
    color: var(--color-navy);
    font-size: 0.5625rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 100px;
}

/* Measures Grid */
.measure-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.measure-card {
    background: #fff;
    border: 1px solid var(--color-border);
    padding: 22px;
}
.measure-card--primary {
    border-color: var(--color-gold);
}
.measure-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    position: relative;
}
.measure-card-name {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    color: var(--color-navy);
    margin-bottom: 3px;
}
.measure-card-date {
    font-size: 0.6875rem;
    color: var(--color-text-muted);
}
.measure-values {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
}
.measure-item {
    text-align: center;
    padding: 9px 6px;
    background: var(--color-cream);
}
.measure-key {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-top: 2px;
}
.measure-val {
    display: block;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-navy);
}

/* Responsive */
@media (max-width: 900px) {
    .account-layout {
        grid-template-columns: 1fr;
    }
    .account-sidebar {
        position: static;
    }
    .account-stats {
        grid-template-columns: repeat(2, 1fr);
        margin-left: 0;
        margin-top: 20px;
    }
    .account-hero-inner {
        flex-wrap: wrap;
        padding: 0 20px;
    }
}
@media (max-width: 640px) {
    .account-stats { grid-template-columns: repeat(2, 1fr); }
    .account-hero { padding: 32px 0 40px; }
    .account-hero-name { font-size: 1.5rem; }
}

/* =====================================================
   _checkout.css
   ===================================================== */
/* === Checkout / Tunnel d'achat === */

/* Header */
.checkout-header {
    background: #fff;
    border-bottom: 1px solid var(--color-border);
    padding: 0 40px;
    height: 70px;
    display: flex;
    align-items: center;
}
.checkout-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Stepper */
.checkout-stepper {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.stepper-step {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    padding: 0 18px;
    position: relative;
}
.stepper-step + .stepper-step::before {
    content: '›';
    position: absolute;
    left: 0;
    font-size: 1.125rem;
    color: var(--color-border);
    font-weight: 300;
}
.stepper-step.--done { color: var(--color-gold); }
.stepper-step.--active { color: var(--color-navy); }

.stepper-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-cream-dark);
    border: 1.5px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--color-text-muted);
    flex-shrink: 0;
}
.stepper-step.--done .stepper-num {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: #fff;
}
.stepper-step.--active .stepper-num {
    background: var(--color-navy);
    border-color: var(--color-navy);
    color: #fff;
}

.stepper-label {
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: inherit;
}
.stepper-step.--active .stepper-label { color: var(--color-navy); }

/* Layout */
.checkout-layout {
    max-width: 1200px;
    margin: 0 auto;
    padding: 36px 40px;
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 48px;
    align-items: start;
}

/* Checkout Card */
.checkout-card {
    background: #fff;
    border: 1px solid var(--color-border);
    padding: 28px 32px;
    margin-bottom: 20px;
}
.checkout-card-title {
    font-family: var(--font-sans);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-navy);
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 24px;
}
.checkout-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 0;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 24px;
}
.checkout-card-num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--color-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.checkout-card-heading {
    font-family: var(--font-serif);
    font-size: 1.375rem;
    font-weight: 300;
    color: var(--color-navy);
}

/* Order Summary */
.order-summary {
    background: #fff;
    border: 1px solid var(--color-border);
    position: sticky;
    top: 88px;
}
.order-summary-header {
    padding: 18px 22px;
    border-bottom: 1px solid var(--color-border);
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.order-summary-items {
    padding: 18px 22px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.order-summary-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.order-summary-totals {
    padding: 18px 22px;
    border-bottom: 1px solid var(--color-border);
}

/* Order item parts */
.order-item-img {
    width: 52px;
    height: 64px;
    background: var(--color-cream);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.375rem;
}
.order-item-name {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-navy);
    margin-bottom: 4px;
}
.order-item-details {
    font-size: 0.625rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    flex: 1;
}
.order-item-price {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-navy);
    flex-shrink: 0;
}

/* Totals */
.total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-bottom: 9px;
}
.total-row--main {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--color-navy);
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
    margin-top: 4px;
    margin-bottom: 0;
}
.total-label { }
.total-amount {
    font-weight: 700;
    color: var(--color-navy);
}
.total-free {
    color: var(--color-success);
    font-weight: 700;
}
.total-discount {
    color: var(--color-success);
    font-weight: 700;
}

.order-summary-cta {
    padding: 18px 22px;
    border-bottom: 1px solid var(--color-border);
}

/* Payment tabs */
.payment-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.payment-tab {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border: 2px solid var(--color-border);
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-muted);
    transition: all var(--transition);
    background: transparent;
}
.payment-tab:hover,
.payment-tab.active {
    border-color: var(--color-navy);
    color: var(--color-navy);
    background: rgba(27, 58, 107, 0.04);
}

/* Address recap */
.address-recap {
    background: var(--color-cream);
    border: 1px solid var(--color-border);
    padding: 18px 26px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.address-recap-label {
    font-family: var(--font-sans);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}
.address-recap-value {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-navy);
}
.address-recap-sub {
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* Secure badge */
.secure-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    color: var(--color-text-muted);
}

/* Responsive */
@media (max-width: 900px) {
    .checkout-layout {
        grid-template-columns: 1fr;
        padding: 24px 20px;
    }
    .order-summary {
        position: static;
    }
    .checkout-header {
        padding: 0 20px;
        height: auto;
        min-height: 60px;
    }
}
@media (max-width: 640px) {
    .stepper-label { display: none; }
    .stepper-step { padding: 0 12px; }
    .checkout-card { padding: 20px; }
}

/* =====================================================
   _catalogue.css
   ===================================================== */
/* === Catalogue === */

/* Catalogue Header */
.catalogue-header {
    background: var(--color-navy);
    padding: 56px 0 48px;
    color: #fff;
}
.catalogue-header h1,
.catalogue-header .h1 {
    color: #fff;
    margin-bottom: 12px;
}
.catalogue-subtitle {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.65);
    max-width: 520px;
}

/* Catalogue Body */
.catalogue-body {
    padding: 56px 0;
}

/* Filters */
.catalogue-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 32px;
}
.filter-pill {
    font-family: var(--font-sans);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 7px 16px;
    border: 1.5px solid var(--color-border);
    background: #fff;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: 100px;
    transition: all var(--transition);
}
.filter-pill:hover {
    border-color: var(--color-navy);
    color: var(--color-navy);
}
.filter-pill.active {
    background: var(--color-navy);
    border-color: var(--color-navy);
    color: #fff;
}

/* Models Grid */
.models-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 32px;
}
.models-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--color-text-muted);
    font-family: var(--font-sans);
    font-size: 0.875rem;
}

/* Model Detail Page */
.model-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
    padding: 64px 0;
}
.model-detail-label {
    font-family: var(--font-sans);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: 10px;
    display: block;
}
.model-detail-title {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 300;
    color: var(--color-navy);
    line-height: 1.1;
    margin-bottom: 12px;
}
.model-detail-price {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    font-weight: 400;
    color: var(--color-navy);
    margin-bottom: 20px;
}
.model-detail-desc {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    line-height: 1.8;
    margin-bottom: 28px;
}
.model-detail-specs {
    border-top: 1px solid var(--color-border);
    margin-bottom: 28px;
}
.spec-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.8125rem;
}
.spec-key {
    font-family: var(--font-sans);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.spec-val {
    color: var(--color-navy);
    font-weight: 600;
    text-align: right;
}
.model-detail-ctas {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* CTA Banner */
.catalogue-cta-banner {
    background: var(--color-navy);
    text-align: center;
    padding: 64px 40px;
    margin-top: 64px;
}
.catalogue-cta-banner h2 { color: #fff; }
.catalogue-cta-banner p { color: rgba(255, 255, 255, 0.65); margin-bottom: 28px; }

/* Responsive */
@media (max-width: 900px) {
    .model-detail {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}
@media (max-width: 640px) {
    .catalogue-body { padding: 36px 0; }
    .catalogue-header { padding: 40px 0 32px; }
}

/* =====================================================
   _auth.css
   ===================================================== */
/* === Auth Pages === */

.auth-page {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-cream);
    padding: 60px 24px;
}

.auth-box {
    background: #fff;
    border: 1px solid var(--color-border);
    padding: 48px;
    width: 100%;
    max-width: 480px;
    box-shadow: var(--shadow);
}

.auth-logo {
    text-align: center;
    margin-bottom: 32px;
}

.auth-title {
    font-family: var(--font-serif);
    font-size: 2rem;
    font-weight: 300;
    color: var(--color-navy);
    text-align: center;
    margin-bottom: 8px;
}

.auth-subtitle {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    text-align: center;
    margin-bottom: 28px;
    line-height: 1.6;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0;
    font-family: var(--font-sans);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

.auth-footer {
    text-align: center;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-top: 24px;
}
.auth-footer a {
    color: var(--color-navy);
    font-weight: 700;
    transition: color var(--transition);
}
.auth-footer a:hover { color: var(--color-gold); }

/* Responsive */
@media (max-width: 640px) {
    .auth-page { padding: 32px 16px; }
    .auth-box { padding: 32px 24px; }
    .auth-title { font-size: 1.625rem; }
}

/* =====================================================
   _journal.css
   ===================================================== */
/* === Journal / La Revue EM === */

/* Journal Index Header */
.journal-header {
    text-align: center;
    padding: 80px 24px 56px;
}
.journal-header h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    margin-bottom: 16px;
}
.journal-header-sub {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Journal Grid */
.journal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 32px;
    padding-bottom: 80px;
}

/* Article Page */
.article-page {
    padding: 60px 0 80px;
}

.article-hero-img {
    width: 100%;
    max-height: 480px;
    object-fit: cover;
    display: block;
    margin-bottom: 48px;
}

.article-header {
    max-width: 780px;
    margin: 0 auto 32px;
}

.article-meta {
    font-family: var(--font-sans);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: 12px;
    display: block;
}

.article-title {
    font-family: var(--font-serif);
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    font-weight: 300;
    color: var(--color-navy);
    line-height: 1.15;
    margin-bottom: 20px;
}

/* Article Content / Prose */
.article-content {
    max-width: 780px;
    margin: 0 auto;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--color-text);
}
.article-content h2 {
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 300;
    color: var(--color-navy);
    margin-top: 48px;
    margin-bottom: 16px;
}
.article-content h3 {
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-navy);
    margin-top: 32px;
    margin-bottom: 12px;
}
.article-content p {
    margin-bottom: 20px;
}
.article-content img {
    width: 100%;
    height: auto;
    display: block;
    margin: 32px 0;
}
.article-content a {
    color: var(--color-navy);
    font-weight: 600;
    border-bottom: 1px solid var(--color-gold);
    transition: color var(--transition), border-color var(--transition);
}
.article-content a:hover {
    color: var(--color-gold);
}
.article-content ul,
.article-content ol {
    padding-left: 24px;
    margin-bottom: 20px;
}
.article-content li {
    margin-bottom: 8px;
}
.article-content blockquote {
    border-left: 3px solid var(--color-gold);
    padding: 16px 24px;
    margin: 32px 0;
    background: var(--color-cream-dark);
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-style: italic;
    color: var(--color-navy);
}

/* Back link */
.article-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 48px;
    font-family: var(--font-sans);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-navy);
    border-bottom: 1px solid transparent;
    transition: border-color var(--transition), color var(--transition);
}
.article-back:hover {
    border-bottom-color: var(--color-gold);
    color: var(--color-gold);
}

/* Responsive */
@media (max-width: 640px) {
    .journal-header { padding: 48px 20px 40px; }
    .article-page { padding: 40px 0 60px; }
    .article-hero-img { max-height: 280px; margin-bottom: 32px; }
}

/* =====================================================
   _home.css
   ===================================================== */
/* === Homepage Sections === */

/* Value Bar */
.value-bar {
    background: #fff;
    border-bottom: 1px solid var(--color-border);
    padding: 24px 0;
}
.value-bar-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}
.value-bar-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-navy);
}
.value-bar-item .icon,
.value-bar-item svg {
    color: var(--color-gold);
    stroke: var(--color-gold);
    flex-shrink: 0;
}
.value-bar-item-sub {
    font-size: 0.6875rem;
    font-weight: 400;
    color: var(--color-text-muted);
    text-transform: none;
    letter-spacing: 0;
    display: block;
    margin-top: 1px;
}

/* Section: Configurateur CTA */
.section-configurator {
    background: var(--color-cream-dark);
    padding: 80px 0;
}
.section-configurator-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.configurator-mock {
    background: var(--color-navy);
    border-radius: 3px;
    overflow: hidden;
    display: flex;
    min-height: 400px;
    box-shadow: var(--shadow-lg);
}
.configurator-mock-sidebar {
    background: rgba(0, 0, 0, 0.2);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 160px;
    flex-shrink: 0;
}
.configurator-mock-title {
    font-family: var(--font-sans);
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
    margin-bottom: 8px;
}
.configurator-step-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    background: rgba(255, 255, 255, 0.06);
    border-left: 2px solid transparent;
    border-radius: 2px;
    font-family: var(--font-sans);
    font-size: 0.625rem;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: all var(--transition);
}
.configurator-step-item.active {
    background: rgba(201, 168, 76, 0.15);
    border-left-color: var(--color-gold);
    color: var(--color-gold-light);
}
.configurator-step-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
}
.configurator-step-item.active .configurator-step-dot {
    background: var(--color-gold);
}

/* Section: Inspirations */
.section-inspirations {
    padding: 80px 0;
    background: #fff;
}
.section-title-center {
    text-align: center;
    margin-bottom: 48px;
}
.section-title-center .eyebrow { margin-bottom: 12px; }
.section-title-center h2 { margin-bottom: 0; }
/* `:not(.eyebrow)` — cette règle habille le paragraphe de description, mais un
   mini-titre est lui aussi un `<p>`. `.section-title-center p` (0,1,1) l'emporte
   sur `.eyebrow` (0,1,0) : « Nos modèles » se retrouvait gris sur l'accueil,
   seul mini-titre du site à ne pas être doré. */
.section-title-center p:not(.eyebrow) {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    max-width: 520px;
    margin: 12px auto 0;
    line-height: 1.7;
}

.inspirations-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.inspiration-card {
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.inspiration-card-img {
    height: 320px;
    background: var(--color-cream-dark);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    transition: all var(--transition);
}
.inspiration-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition);
}
.inspiration-card:hover .inspiration-card-img img {
    transform: scale(1.04);
}
.inspiration-card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(27, 58, 107, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition);
}
.inspiration-card:hover .inspiration-card-overlay {
    background: rgba(27, 58, 107, 0.55);
}
.inspiration-card-overlay-btn {
    opacity: 0;
    transform: translateY(8px);
    transition: all var(--transition);
    font-family: var(--font-sans);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    padding: 10px 20px;
    background: none;
    cursor: pointer;
}
.inspiration-card:hover .inspiration-card-overlay-btn {
    opacity: 1;
    transform: translateY(0);
}
.inspiration-card-name {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-navy);
    margin-top: 14px;
    margin-bottom: 3px;
}
.inspiration-card-desc {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* Section: Brand Story */
.section-brand {
    background: var(--color-navy);
    padding: 80px 0;
}
.brand-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}
.brand-title {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 300;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 20px;
}
.brand-title em {
    color: var(--color-gold);
    font-style: italic;
}
.brand-eyebrow { margin-bottom: 20px; }
.brand-text {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.9;
    margin-bottom: 20px;
}
.brand-stats {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 28px;
    margin-top: 28px;
}
.brand-stat-val {
    display: block;
    font-family: var(--font-serif);
    font-size: 2.5rem;
    font-weight: 400;
    color: var(--color-gold);
    line-height: 1;
}
.brand-stat-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 6px;
}
.brand-img-placeholder {
    height: 440px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Section: Journal (Home) */
.section-journal {
    background: var(--color-cream-dark);
    padding: 80px 0;
}
.journal-home-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}
.journal-home-grid .article-card:first-child .article-card-img {
    height: 340px;
}

/* Section header with action */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
    flex-wrap: wrap;
    gap: 16px;
}

/* Responsive */
@media (max-width: 1024px) {
    .inspirations-grid { grid-template-columns: repeat(2, 1fr); }
    .brand-grid { gap: 48px; }
    .journal-home-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .section-configurator-grid { grid-template-columns: 1fr; }
    .brand-grid { grid-template-columns: 1fr; }
    .brand-img-placeholder { display: none; }
    .value-bar-list { gap: 24px; }
    .inspirations-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 480px) {
    .inspirations-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   COOKIE CONSENT BANNER (RGPD)
   ============================================================================ */
.cookie-banner {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--color-navy, #1B3A6B);
    color: var(--color-cream, #FAF8F4);
    padding: 1.25rem 1.5rem;
    transform: translateY(100%);
    transition: transform .35s ease;
    z-index: 9999;
    box-shadow: 0 -4px 20px rgba(0,0,0,.15);
    font-family: 'Lato', sans-serif;
}
.cookie-banner--visible { transform: translateY(0); }
.cookie-banner__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.cookie-banner__text {
    margin: 0;
    flex: 1;
    min-width: 280px;
    font-size: .95rem;
    line-height: 1.5;
}
.cookie-banner__text a {
    color: var(--color-gold, #C9A84C);
    text-decoration: underline;
}
.cookie-banner__actions {
    display: flex;
    gap: .5rem;
    flex-shrink: 0;
}
.cookie-banner .btn-outline {
    border-color: var(--color-cream, #FAF8F4);
    color: var(--color-cream, #FAF8F4);
}
.cookie-banner .btn-outline:hover {
    background: var(--color-cream, #FAF8F4);
    color: var(--color-navy, #1B3A6B);
}
@media (max-width: 600px) {
    .cookie-banner__inner { flex-direction: column; text-align: center; }
    .cookie-banner__actions { width: 100%; justify-content: center; }
}

/* ============================================================
   STOCK BADGES (catalogue cards)
   ============================================================ */
.stock-badge {
    display: inline-block;
    margin-top: 6px;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    border-radius: 2px;
}
.stock-badge--out {
    background: #f4e4e4;
    color: #A02020;
    border: 1px solid #A02020;
}
.stock-badge--low {
    background: #fff5e0;
    color: #8a6a14;
    border: 1px solid #C9A84C;
}

/* ============================================================
   FOOTER NEWSLETTER
   ============================================================ */
.footer-newsletter { margin-top: 20px; max-width: 320px; }
.footer-newsletter-label {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255,255,255,.75);
    margin-bottom: 8px;
}
.footer-newsletter-row {
    display: flex;
    gap: 0;
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.05);
}
.footer-newsletter-input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 10px 12px;
    color: #fff;
    font-size: .9rem;
    outline: none;
}
.footer-newsletter-input::placeholder { color: rgba(255,255,255,.5); }
.footer-newsletter-btn {
    background: var(--color-gold);
    color: var(--color-navy);
    border: none;
    padding: 10px 16px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: .75rem;
    cursor: pointer;
    transition: background .15s;
}
.footer-newsletter-btn:hover { background: #d4b761; }
.footer-newsletter-legal {
    font-size: .7rem;
    color: rgba(255,255,255,.5);
    margin-top: 8px;
    line-height: 1.4;
}

/* ==== Configurator preview ==== */
.configurator-layout {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.configurator-layout__main {
    flex: 1 1 auto;
    min-width: 0;
}
.configurator-layout.has-preview {
    flex-direction: row;
    align-items: flex-start;
}
.shirt-preview {
    flex: 0 0 360px;
    position: sticky;
    top: 2rem;
    background: var(--color-cream);
    border: 1px solid var(--color-gold);
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(27, 58, 107, 0.06);
}
.shirt-preview__title {
    font-family: 'Cormorant Garamond', serif;
    color: var(--color-navy);
    font-size: 1.25rem;
    margin: 0 0 1rem;
    text-align: center;
    letter-spacing: 0.04em;
}
.shirt-preview__svg {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}
.shirt-preview__summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.25rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
}
.shirt-preview__summary .pill {
    display: inline-block;
    background: var(--color-navy);
    color: var(--color-cream);
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.shirt-preview__summary .pill--accent {
    background: var(--color-gold);
    color: var(--color-navy);
    font-weight: 600;
}

@media (max-width: 900px) {
    .configurator-layout.has-preview {
        flex-direction: column;
    }
    .shirt-preview {
        flex: 1 1 auto;
        position: sticky;
        top: auto;
        bottom: 0;
        width: 100%;
        max-height: 40vh;
        overflow-y: auto;
        z-index: 20;
        border-radius: 8px 8px 0 0;
        padding: 1rem;
    }
    .shirt-preview__svg {
        max-height: 25vh;
    }
    .shirt-preview__summary {
        margin-top: 0.75rem;
    }
}

/* ==== Home page ==== */
.home-hero__preview {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    padding: 32px;
    border-radius: 4px;
    max-width: 340px;
}
.home-hero__preview-title {
    font-family: var(--font-sans);
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: 20px;
}
.home-hero__preview-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.home-hero__preview-price-wrap {
    margin-top: 20px;
    text-align: right;
}
.home-hero__preview-price {
    font-family: var(--font-serif);
    font-size: 2rem;
    font-weight: 300;
    color: #fff;
}
.home-config__heading-em {
    color: var(--color-gold);
    font-style: italic;
}
.home-config__lead {
    font-size: .875rem;
    color: var(--color-text-muted);
    line-height: 1.8;
    max-width: 480px;
    margin-bottom: 32px;
}
.home-config__mock {
    border-radius: 4px;
    overflow: hidden;
}
.home-config__mock-main {
    flex: 1;
    padding: 24px;
    background: rgba(255, 255, 255, .04);
}
.home-config__mock-title {
    font-family: var(--font-sans);
    font-size: .5625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--color-gold);
    margin-bottom: 16px;
}
.home-config__mock-swatches {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 20px;
}
.home-config__mock-price-wrap {
    text-align: right;
}
.home-config__mock-price {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    color: #fff;
}
.home-model-card-link {
    text-decoration: none;
}
.home-model-card__placeholder {
    width: 100%;
    height: 100%;
    background: var(--color-cream-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
}
.home-models__more {
    text-align: center;
    margin-top: 48px;
}
.home-brand__img-placeholder {
    height: 440px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
    opacity: .25;
}
.home-journal__article-link {
    text-decoration: none;
}
.home-journal__article-link--small {
    text-decoration: none;
    flex: 1;
}
.home-journal__featured-img {
    height: 340px;
}
.home-journal__img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.home-journal__img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    opacity: .25;
}
.home-journal__img-placeholder--small {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    opacity: .25;
}
.home-journal__featured-placeholder {
    height: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    opacity: .25;
}
.home-journal__small-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    opacity: .25;
}
.home-journal__right-col {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.home-journal__article-card--flex {
    flex: 1;
}

/* ==== Order detail page ==== */
.order-sidebar__logout-btn {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
}
.order-breadcrumb {
    margin-bottom: 24px;
}
.order-header {
    margin-bottom: 24px;
}
.order-header__date {
    color: #999;
    font-size: .875rem;
}
.order-status-card {
    background: #fff;
    border: 1px solid #E0DBD0;
    padding: 24px;
    margin-bottom: 28px;
}
.order-status-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.order-status-row__note {
    font-size: .875rem;
    color: #666;
}
.order-timeline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.order-timeline__step {
    display: flex;
    align-items: center;
    gap: 6px;
}
.order-timeline__icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}
.order-timeline__separator {
    color: #ccc;
    font-size: 16px;
    margin: 0 2px;
}
.order-tracking {
    margin-top: 16px;
    padding: 16px 20px;
    background: #f5f3ef;
    border-left: 4px solid var(--color-gold, #C9A84C);
}
.order-tracking__label {
    margin: 0 0 6px;
    font-size: .8125rem;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.order-tracking__value {
    margin: 0;
    font-size: .9375rem;
    color: var(--color-navy, #1B3A6B);
}
.order-details-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 28px;
    align-items: start;
}
.order-items__heading {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-navy, #1B3A6B);
    margin-bottom: 16px;
}
.order-table__th--center {
    text-align: center;
}
.order-table__th--right {
    text-align: right;
}
.order-table__qty {
    text-align: center;
    color: #666;
}
.order-table__total {
    text-align: right;
    font-weight: 700;
}
.order-table__promo-label {
    color: #2D7A4F;
    font-size: .875rem;
}
.order-table__promo-amount {
    text-align: right;
    color: #2D7A4F;
    font-weight: 600;
}
.order-table__total-row {
    border-top: 2px solid var(--color-navy, #1B3A6B);
}
.order-table__total-cell {
    text-align: right;
}
.order-table__total-value {
    font-family: var(--font-serif, 'Cormorant Garamond', serif);
    font-size: 1.25rem;
    color: var(--color-navy, #1B3A6B);
}
.order-shipping-card {
    background: #fff;
    border: 1px solid #E0DBD0;
    padding: 24px;
}
.order-shipping-card__title {
    font-size: .875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #999;
    margin-bottom: 14px;
}
.order-shipping-card__body {
    font-size: .875rem;
    color: #444;
    line-height: 1.7;
    margin: 0;
}
.order-shipping-card__email {
    font-size: .8125rem;
    color: #999;
    margin-top: 12px;
    margin-bottom: 0;
}

/* ==== Measurement profiles ==== */
.measurement-empty {
    color: var(--color-text-secondary);
    margin: 24px 0;
}
.measurement-card {
    background: #fff;
    border: 1px solid var(--color-cream-dark);
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 16px;
}
.measurement-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}
.measurement-card__name {
    font-size: 1rem;
}
.measurement-card__default-badge {
    font-size: .75rem;
    background: var(--color-gold);
    color: #fff;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: 8px;
}
.measurement-card__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.measurement-btn {
    padding: 4px 12px;
    border: 1px solid var(--color-navy);
    border-radius: 4px;
    background: transparent;
    color: var(--color-navy);
    font-size: .75rem;
    cursor: pointer;
}
.measurement-btn--danger {
    padding: 4px 12px;
    border: none;
    border-radius: 4px;
    background: #dc3545;
    color: #fff;
    font-size: .75rem;
    cursor: pointer;
}
.measurement-card__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
    font-size: .8125rem;
}
.measurement-field {
    background: var(--color-cream);
    padding: 6px 10px;
    border-radius: 3px;
}
.measurement-field__label {
    color: var(--color-text-secondary);
    display: block;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.measurement-field__value {
    font-weight: 500;
}
.measurement-form {
    background: var(--color-cream);
    border-radius: 4px;
    padding: 24px;
    margin-top: 24px;
}
.measurement-form__title {
    font-size: 1.125rem;
    margin-bottom: 20px;
}
.measurement-form__group {
    margin-bottom: 16px;
}
.measurement-form__label {
    display: block;
    font-size: .875rem;
    font-weight: 500;
    margin-bottom: 4px;
}
.measurement-form__name-input {
    width: 100%;
    max-width: 300px;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: .875rem;
}
.measurement-form__fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
/* Chemise à plat : douze champs, deux colonnes comme sur l'ancien écran. */
.measurement-form__fields--two-col {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* Intitulé de sous-étape, repris du configurateur pour que les deux écrans
   se lisent de la même façon. */
.measurement-form__step {
    font-family: var(--font-sans);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-navy);
    margin: 28px 0 14px;
}
.measurement-form__step:first-of-type { margin-top: 8px; }

.measurement-methods,
.measurement-sizes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px;
}

.measurement-form__hint {
    font-size: .8125rem;
    color: #6b6b6b;
    line-height: 1.7;
    margin: 12px 0 0;
}

/* Les six mesures complémentaires, repliées par défaut. */
.measurement-extra {
    border-top: 1px solid var(--color-border);
    padding-top: 16px;
    margin-bottom: 24px;
}
.measurement-extra > summary {
    cursor: pointer;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--color-navy);
    margin-bottom: 16px;
}
.measurement-extra > summary:hover { color: var(--color-gold); }

.measurement-videos { margin-top: 8px; }

.measurement-card__meta {
    font-size: .75rem;
    letter-spacing: .04em;
    color: #8a8a8a;
    margin: 0 0 14px;
}
.measurement-form__field-label {
    display: block;
    font-size: .8125rem;
    margin-bottom: 4px;
}
.measurement-form__input-wrap {
    position: relative;
}
.measurement-form__input {
    width: 100%;
    padding: 8px 36px 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: .875rem;
}
.measurement-form__unit {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-secondary);
    font-size: .8125rem;
}
.measurement-form__actions {
    display: flex;
    gap: 12px;
}
.measurement-form__save {
    padding: 10px 24px;
    background: var(--color-navy);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: .875rem;
    font-weight: 500;
}
.measurement-form__cancel {
    padding: 10px 24px;
    border: 1px solid var(--color-navy);
    background: transparent;
    color: var(--color-navy);
    border-radius: 4px;
    cursor: pointer;
    font-size: .875rem;
}
.measurement-add-btn {
    margin-top: 16px;
    padding: 10px 20px;
    border: 1px solid var(--color-navy);
    background: transparent;
    color: var(--color-navy);
    border-radius: 4px;
    cursor: pointer;
    font-size: .875rem;
}
.measurement-flash {
    padding: 12px 16px;
    margin-bottom: 16px;
    border-radius: 4px;
}

/* ==== Contact page ==== */
.contact-page__container {
    max-width: 800px;
    padding: 56px 0;
}
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 48px;
    align-items: start;
}
.contact-success {
    background: #edf7f0;
    border-left: 4px solid #2D7A4F;
    padding: 24px 28px;
    border-radius: 0 4px 4px 0;
    margin-bottom: 32px;
}
.contact-success__title {
    margin: 0;
    color: #2D7A4F;
    font-weight: 600;
    font-size: 1rem;
}
.contact-success__text {
    margin: 10px 0 0;
    color: #444;
    font-size: .875rem;
}
.contact-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.contact-form__group--mb-16 {
    margin-bottom: 16px;
}
.contact-form__group--mb-24 {
    margin-bottom: 24px;
}
.contact-info {
    background: var(--color-navy);
    color: #fff;
    padding: 40px;
}
.contact-info__title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 24px;
}
.contact-info__block {
    margin-bottom: 20px;
}
.contact-info__block--last {
    margin-bottom: 28px;
}
.contact-info__label {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-gold, #C9A84C);
    margin-bottom: 6px;
}
.contact-info__link {
    color: #fff;
    text-decoration: none;
    font-size: .9375rem;
}
.contact-info__text {
    color: rgba(255, 255, 255, .85);
    font-size: .9375rem;
    margin: 0;
}
.contact-info__lead {
    color: rgba(255, 255, 255, .75);
    font-size: .875rem;
    line-height: 1.7;
    margin-bottom: 24px;
}
.contact-info__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.contact-info__item {
    color: rgba(255, 255, 255, .8);
    font-size: .875rem;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.contact-info__bullet {
    color: var(--color-gold, #C9A84C);
    flex-shrink: 0;
}

/* ==== Cart component ==== */
.cart-empty {
    text-align: center;
    padding: 60px 24px;
}
.cart-empty__text {
    font-size: 1rem;
    color: #888;
    margin-bottom: 24px;
}
.cart-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 32px;
}
.cart-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--color-cream-dark);
    border-radius: 4px;
}
.cart-line__info {
    flex: 1;
}
.cart-line__name {
    display: block;
    font-size: .9375rem;
    margin-bottom: 4px;
}
.cart-line__meta {
    font-size: .8125rem;
    color: #888;
}
.cart-line__total {
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-navy);
    min-width: 80px;
    text-align: right;
}
.cart-line__edit {
    font-family: var(--font-sans);
    font-size: .8125rem;
    color: var(--color-navy, #1B2A4A);
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: 4px 8px;
    white-space: nowrap;
}
.cart-line__edit:hover { color: var(--color-gold, #C9A84C); }
.cart-line__remove {
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
    font-size: 1.25rem;
    line-height: 1;
    padding: 4px 8px;
}

/* Bandeau du configurateur quand on rouvre une chemise du panier. */
.cfg-editing-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    padding: 12px 16px;
    background: rgba(201, 168, 76, .1);
    border-left: 3px solid var(--color-gold, #C9A84C);
    font-family: var(--font-sans);
    font-size: .875rem;
    color: #4a4a4a;
}
.cfg-editing-banner a {
    color: var(--color-navy, #1B2A4A);
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}
.cart-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-top: 1px solid #E0DBD0;
    font-size: .9375rem;
    color: #666;
}
.cart-summary__promo-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    color: #2D7A4F;
    font-size: .9375rem;
}
.cart-summary__promo-label {
    display: flex;
    align-items: center;
    gap: 8px;
}
.cart-summary__promo-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
    font-size: .8125rem;
    padding: 0 4px;
    text-decoration: underline;
}
.cart-summary__discount {
    font-weight: 600;
}
.cart-promo {
    margin-bottom: 16px;
}
.cart-promo__label {
    display: block;
    font-size: .8125rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.cart-promo__row {
    display: flex;
    gap: 8px;
}
.cart-promo__input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #E0DBD0;
    border-radius: 4px;
    font-size: .875rem;
    background: #fff;
}
.cart-promo__apply {
    padding: 10px 16px;
    background: var(--color-navy);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: .875rem;
    cursor: pointer;
    white-space: nowrap;
}
.cart-promo__error {
    margin: 6px 0 0;
    font-size: .8125rem;
    color: #C0392B;
}
.cart-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-top: 2px solid var(--color-navy);
    margin-bottom: 32px;
}
.cart-total__label {
    font-family: var(--font-serif);
    font-size: 1.125rem;
}
.cart-total__amount {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    color: var(--color-navy);
}
.cart-checkout-btn {
    display: block;
    text-align: center;
    padding: 16px;
}

/* =====================================================================
   CMS custom blocks (front-office rendering).
   Server-side: src/Service/BlockRenderer.php → render*().
   Editor:      public/editorjs/custom-blocks.js + cms_editor controller.
   ===================================================================== */
.cms-btn { display: inline-block; padding: 12px 28px; border-radius: 3px; text-decoration: none;
           font-weight: 600; font-size: 14px; letter-spacing: .3px; transition: all .2s; }
.cms-btn--gold    { background: var(--color-gold); color: var(--color-navy); }
.cms-btn--gold:hover    { background: #b89640; color: var(--color-navy); }
.cms-btn--navy    { background: var(--color-navy); color: #fff; }
.cms-btn--navy:hover    { background: #0f2548; color: #fff; }
.cms-btn--outline { background: transparent; color: var(--color-navy); border: 2px solid var(--color-navy); }
.cms-btn--outline:hover { background: var(--color-navy); color: #fff; }

.cms-button-wrap { margin: 24px 0; }
.cms-delimiter { border: 0; border-top: 1px solid #e0e0e0; margin: 32px auto; max-width: 200px; }

.cms-columns { display: grid; gap: 24px; margin: 24px 0; }
.cms-columns--50-50 { grid-template-columns: 1fr 1fr; }
.cms-columns--33-66 { grid-template-columns: 1fr 2fr; }
.cms-columns--66-33 { grid-template-columns: 2fr 1fr; }
@media (max-width: 768px) { .cms-columns { grid-template-columns: 1fr !important; } }

.cms-hero {
    padding: 60px 30px; margin: 32px 0; border-radius: 6px;
    background-size: cover; background-position: center;
    background-color: var(--color-navy); color: #fff; text-align: center;
}
.cms-hero__inner { max-width: 700px; margin: 0 auto; }
.cms-hero h2 { font-family: 'Cormorant Garamond', serif; font-size: 38px; margin: 0 0 12px; color: #fff; }
.cms-hero p { font-size: 17px; margin: 0 0 20px; opacity: .95; }

.cms-cta-banner {
    display: flex; justify-content: space-between; align-items: center; gap: 24px;
    padding: 24px 32px; background: var(--color-cream); border: 1px solid var(--color-gold);
    border-radius: 4px; margin: 24px 0;
}
.cms-cta-banner strong { font-family: 'Cormorant Garamond', serif; font-size: 22px; color: var(--color-navy); }
@media (max-width: 600px) { .cms-cta-banner { flex-direction: column; text-align: center; } }

.cms-text-image { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; margin: 32px 0; }
.cms-text-image--right .cms-ti-image { order: 2; }
.cms-text-image img { width: 100%; height: auto; border-radius: 4px; display: block; }
@media (max-width: 768px) { .cms-text-image { grid-template-columns: 1fr; } .cms-text-image--right .cms-ti-image { order: 0; } }

.cms-accordion { margin: 24px 0; display: flex; flex-direction: column; gap: 8px; }
.cms-accordion-item { border: 1px solid #e0e0e0; border-radius: 4px; overflow: hidden; }
.cms-accordion-item summary {
    padding: 14px 18px; cursor: pointer; font-weight: 600; color: var(--color-navy);
    background: #fafafa; list-style: none; outline: none;
}
.cms-accordion-item summary::-webkit-details-marker { display: none; }
.cms-accordion-item summary::after { content: '+'; float: right; font-size: 18px; color: var(--color-gold); }
.cms-accordion-item[open] summary::after { content: '–'; }
.cms-accordion-body { padding: 16px 18px; background: #fff; }

.cms-spacer { width: 100%; }
.cms-image { margin: 24px 0; text-align: center; }
.cms-image img { max-width: 100%; height: auto; border-radius: 4px; }
.cms-image figcaption { margin-top: 8px; font-size: 13px; color: #666; font-style: italic; }
.cms-embed { margin: 24px 0; }
.cms-table { width: 100%; border-collapse: collapse; margin: 24px 0; }
.cms-table th, .cms-table td { padding: 10px 14px; border: 1px solid #e0e0e0; text-align: left; }
.cms-table th { background: var(--color-cream); font-weight: 700; }

/* ========== Dynamic content blocks (articles / fabrics / models) ========== */
/* 80px de respiration, comme `.section` : à 48px les blocs dynamiques
   touchaient presque la bande de réassurance et le pied de page. */
.cms-dyn { margin: 80px auto; max-width: 1280px; padding: 0 24px; }

/* En-tête de section (bloc `section_header`).
   Il sortait sans aucune marge verticale : l'accroche « LA REVUE EM » touchait
   la section précédente. On lui donne la même respiration que les autres
   blocs. */
.cms-section-head { margin-top: 80px; }

/* Un en-tête suivi de sa liste forme un seul ensemble : sans cette règle,
   80px les séparaient — plus que l'espace qui les isolait du reste de la
   page, et le titre semblait appartenir à la section du dessus. */
.cms-section-head + .cms-dyn { margin-top: 28px; }
.cms-dyn--align-center { text-align: center; }
.cms-dyn--align-center .cms-dyn-grid { justify-content: center; }
.cms-dyn--align-left { text-align: left; margin-left: 0; }
.cms-dyn--align-left .cms-dyn-title { text-align: left; }
.cms-dyn--align-left .cms-dyn-title::after { left: 0; transform: none; }
.cms-dyn--align-full { max-width: none; padding: 0; }
.cms-dyn-title {
    font-family: 'Cormorant Garamond', serif; font-size: 2rem; color: var(--color-navy);
    text-align: center; margin: 0 0 32px; position: relative; padding-bottom: 16px;
}
.cms-dyn-title::after {
    content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 60px; height: 2px; background: var(--color-gold);
}

/* Grid layout — generic 3-column responsive grid (cards adapt to whatever .article-card / .model-card exists) */
.cms-dyn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }

/* List layout — vertical, image left + text right */
.cms-dyn-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.cms-dyn-list-item {
    background: #fff; border: 1px solid #ececec; border-radius: 6px; overflow: hidden;
    transition: box-shadow .2s, transform .2s;
}
.cms-dyn-list-item:hover { box-shadow: 0 6px 18px rgba(27, 58, 107, 0.08); transform: translateY(-1px); }
.cms-dyn-list-link {
    display: grid; grid-template-columns: 180px 1fr; gap: 20px; align-items: center;
    padding: 16px; text-decoration: none; color: inherit;
}
.cms-dyn-list-thumb { width: 100%; height: 120px; object-fit: cover; border-radius: 4px; }
.cms-dyn-list-thumb--placeholder {
    display: flex; align-items: center; justify-content: center; font-size: 40px; color: #fff;
    background: var(--color-navy);
}
.cms-dyn-list-meta { font-size: 0.8rem; color: var(--color-text-muted); margin: 0 0 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.cms-dyn-list-title { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; margin: 0 0 6px; color: var(--color-navy); }
.cms-dyn-list-excerpt { margin: 0 0 8px; color: #555; line-height: 1.5; font-size: 0.95rem; }
.cms-dyn-list-cta { color: var(--color-gold); font-weight: 600; font-size: 0.9rem; }
@media (max-width: 600px) {
    .cms-dyn-list-link { grid-template-columns: 1fr; }
    .cms-dyn-list-thumb { height: 200px; }
}

/* Carousel — horizontal scroll, no JS required */
.cms-dyn-carousel {
    display: flex; gap: 20px; overflow-x: auto; padding: 8px 4px 24px;
    scroll-snap-type: x mandatory; scrollbar-color: var(--color-gold) #f0f0f0;
}
.cms-dyn-carousel::-webkit-scrollbar { height: 8px; }
.cms-dyn-carousel::-webkit-scrollbar-track { background: #f0f0f0; border-radius: 4px; }
.cms-dyn-carousel::-webkit-scrollbar-thumb { background: var(--color-gold); border-radius: 4px; }
.cms-dyn-carousel-item { flex: 0 0 300px; scroll-snap-align: start; }

/* Fabrics-specific cards (no .fabric-card exists; we define our own) */
.cms-dyn-fabric-card {
    display: block; background: #fff; border: 1px solid #ececec; border-radius: 6px;
    overflow: hidden; text-decoration: none; color: inherit;
    transition: box-shadow .2s, transform .2s;
}
.cms-dyn-fabric-card:hover { box-shadow: 0 6px 18px rgba(27, 58, 107, 0.12); transform: translateY(-2px); }
.cms-dyn-fabric-img { aspect-ratio: 4 / 3; overflow: hidden; background: #f6f6f6; }
.cms-dyn-fabric-img img { width: 100%; height: 100%; object-fit: cover; }
.cms-dyn-fabric-img-placeholder { width: 100%; height: 100%; }
.cms-dyn-fabric-body { padding: 14px 16px; }
.cms-dyn-fabric-name { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; color: var(--color-navy); margin: 0 0 4px; }
.cms-dyn-fabric-price { margin: 0; color: var(--color-gold); font-weight: 600; font-size: 0.95rem; }

/* ════════════════════════════════════════════════════════════════════
   CONFIGURATEUR — 3-column layout, mirrors ressources/maquetes-test/02
   ════════════════════════════════════════════════════════════════════ */
.cfg-app {
    --cfg-sidebar-w: 280px;
    --cfg-preview-w: 360px;
    --cfg-header-h: 64px;   /* site header offset, adjust if it changes */
    --cfg-border: #E0DBD0;
    --cfg-mid: #555;
    --cfg-light: #999;
    background: #F0EDE6;
    /* Lock the height exactly to the viewport (minus the site header) so
       only the middle column scrolls. The sidebar and the preview stay put
       like the bottom bar. */
    height: calc(100vh - var(--cfg-header-h));
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cfg-topbar {
    background: #fff;
    border-bottom: 1px solid var(--cfg-border);
    padding: 0 32px;
    height: 50px;
    display: flex; align-items: center; gap: 20px;
    flex-shrink: 0;
}
.cfg-breadcrumb { font-size: 11px; color: var(--cfg-light); white-space: nowrap; }
.cfg-breadcrumb b { color: var(--color-navy); }
.cfg-sep { margin: 0 4px; opacity: .4; }
.cfg-progress-track {
    flex: 1; height: 4px; background: #F0EDE6; border-radius: 2px; overflow: hidden;
}
.cfg-progress-fill {
    height: 100%;
    background: linear-gradient(to right, var(--color-navy), var(--color-gold));
    transition: width .3s;
}
.cfg-progress-label {
    font-size: 11px; font-weight: 700; color: var(--color-navy); white-space: nowrap;
}
.cfg-reset-btn {
    font-family: var(--font-sans);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #C0392B;
    background: transparent;
    border: 1px solid #C0392B;
    padding: 6px 12px;
    border-radius: 100px;
    cursor: pointer;
    white-space: nowrap;
    transition: all .15s ease;
}
.cfg-reset-btn:hover { background: #C0392B; color: #fff; }

.cfg-layout {
    display: grid;
    grid-template-columns: var(--cfg-sidebar-w) 1fr var(--cfg-preview-w);
    flex: 1;
    min-height: 0;
    overflow: hidden;   /* contain each column's own scroll */
}
.cfg-layout--full { grid-template-columns: 1fr; }
.cfg-layout--full .cfg-preview { display: none; }

/* SIDEBAR */
.cfg-sidebar {
    background: var(--color-navy);
    overflow-y: auto;
    padding: 20px 0;
}
.cfg-sb-title {
    font-size: 9px; font-weight: 700; letter-spacing: .25em;
    text-transform: uppercase; color: rgba(255,255,255,.3);
    padding: 0 24px 12px;
}
.cfg-step {
    display: flex; align-items: center; gap: 12px;
    width: 100%;
    padding: 12px 24px;
    border: 0; background: transparent;
    border-left: 3px solid transparent;
    text-align: left;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    color: inherit;
}
.cfg-step[disabled] { cursor: default; opacity: .55; }
.cfg-step:hover:not([disabled]) { background: rgba(255,255,255,.04); }
.cfg-step.is-active { background: rgba(201,168,76,.12); border-left-color: #E8C86A; }
.cfg-step.is-done { border-left-color: var(--color-gold); }
.cfg-step-num {
    width: 28px; height: 28px; border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
    color: rgba(255,255,255,.35);
    flex-shrink: 0;
}
.cfg-step.is-active .cfg-step-num {
    background: rgba(201,168,76,.3); border-color: var(--color-gold); color: #E8C86A;
}
.cfg-step.is-done .cfg-step-num {
    background: var(--color-gold); border-color: var(--color-gold); color: #fff;
}
.cfg-step-info { display: flex; flex-direction: column; min-width: 0; }
.cfg-step-name { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.7); }
.cfg-step.is-active .cfg-step-name { color: #fff; }
.cfg-step-choice { font-size: 10px; color: rgba(255,255,255,.3); margin-top: 2px; }
.cfg-step.is-done .cfg-step-choice { color: var(--color-gold); opacity: .7; }

/* MAIN */
.cfg-main {
    overflow-y: auto;
    padding: 32px 40px;
    background: var(--color-cream);
    position: relative;
}
.cfg-step-bg {
    font-family: "Cormorant Garamond", serif;
    font-size: 80px; font-weight: 300;
    color: rgba(27,58,107,.07);
    line-height: 1; margin: 0 0 -18px;
}
.cfg-step-h {
    font-family: "Cormorant Garamond", serif;
    font-size: 32px; font-weight: 300;
    color: var(--color-navy);
    margin: 0 0 8px;
}
.cfg-step-h--lg { font-size: 42px; }
.cfg-step-p {
    font-size: 13px; color: var(--cfg-mid); line-height: 1.7;
    margin: 0 0 24px;
    max-width: 65ch;
}

/* Filters */
.cfg-filters {
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
    margin: 0 0 20px;
}
.cfg-search {
    flex: 1; min-width: 180px; max-width: 280px;
    border: 1.5px solid var(--cfg-border); border-radius: 100px;
    padding: 6px 16px; font-size: 12px;
    font-family: var(--font-sans); outline: none;
    background: #fff;
}
.cfg-search:focus { border-color: var(--color-gold); }
.cfg-pill-select {
    font-size: 11px; font-weight: 600; letter-spacing: .04em;
    padding: 6px 12px;
    border: 1.5px solid var(--cfg-border); border-radius: 100px;
    cursor: pointer; background: #fff;
    color: var(--cfg-mid); appearance: none;
    padding-right: 26px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23555' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
}
.cfg-pill-select:focus { border-color: var(--color-navy); color: var(--color-navy); }

/* Fabric grid */
.cfg-fab-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}
.cfg-fab {
    cursor: pointer;
    border: 2px solid var(--cfg-border);
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    padding: 0;
    transition: border-color .15s, transform .15s;
    text-align: left;
    font: inherit;
    color: inherit;
}
.cfg-fab:hover { border-color: var(--color-navy); transform: translateY(-2px); }
.cfg-fab.is-selected { border-color: var(--color-gold); }
.cfg-fab-swatch {
    height: 92px;
    background-size: cover;
    background-position: center;
    background-color: #FAF8F4;
    position: relative;
    overflow: hidden;
}
/* La pastille est une vraie image, pas un fond CSS, pour que le navigateur
   puisse différer le chargement de celles qui sont hors écran. */
.cfg-fab-swatch__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cfg-fab-check {
    position: absolute; top: 8px; right: 8px;
    width: 20px; height: 20px;
    background: var(--color-gold); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; color: #fff; font-weight: 700;
    opacity: 0;
}
.cfg-fab.is-selected .cfg-fab-check { opacity: 1; }
.cfg-fab-body { padding: 8px 10px; }
.cfg-fab-name {
    font-size: 11px; font-weight: 700; color: var(--color-navy); margin: 0 0 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cfg-fab-comp { font-size: 10px; color: var(--cfg-light); margin: 0; }
.cfg-fab-price { font-size: 11px; color: var(--color-gold); font-weight: 700; margin: 3px 0 0; }

/* Gender selection */
.cfg-gender-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 600px;
    margin: 32px 0 32px;
}
.cfg-gender {
    background: #fff;
    border: 2px solid var(--cfg-border);
    border-radius: 4px;
    padding: 36px 24px;
    cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    color: var(--color-navy);
    transition: border-color .15s, background .15s, color .15s;
}
.cfg-gender:hover { border-color: var(--color-navy); }
.cfg-gender.is-selected {
    border-color: var(--color-navy);
    background: var(--color-navy);
    color: #fff;
}
.cfg-gender-label {
    font-family: var(--font-sans);
    font-weight: 700; font-size: .875rem; letter-spacing: .1em;
    text-transform: uppercase;
}
.cfg-start-btn { font-size: 12px; }

/* PREVIEW */
.cfg-preview {
    background: #fff;
    border-left: 1px solid var(--cfg-border);
    display: flex; flex-direction: column;
    overflow-y: auto;
}
.cfg-preview__head {
    padding: 14px 20px;
    border-bottom: 1px solid var(--cfg-border);
    font-size: 10px; font-weight: 700; letter-spacing: .2em;
    text-transform: uppercase; color: var(--cfg-light);
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: space-between;
}
.cfg-preview__flip {
    background: transparent;
    border: 1px solid var(--color-navy);
    color: var(--color-navy);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 100px;
    cursor: pointer;
    transition: all .15s ease;
}
.cfg-preview__flip:hover { background: var(--color-navy); color: #fff; }
.cfg-preview__visual {
    padding: 20px;
    background: var(--color-cream);
    display: flex; align-items: center; justify-content: center;
    border-bottom: 1px solid var(--cfg-border);
}
.cfg-preview__visual svg { max-width: 100%; max-height: 320px; width: auto; height: auto; }

.cfg-preview__summary { padding: 14px 24px; }
.cfg-sr {
    display: flex; justify-content: space-between; padding: 7px 0;
    border-bottom: 1px solid var(--cfg-border);
}
.cfg-sr:last-child { border-bottom: 0; }
.cfg-sk {
    font-size: 10px; color: var(--cfg-light); font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
}
.cfg-sv {
    font-size: 12px; font-weight: 700; color: var(--color-navy);
    max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cfg-sv.is-empty { color: var(--cfg-light); font-weight: 400; }

.cfg-preview__price {
    padding: 14px 24px;
    background: var(--color-cream);
    border-top: 1px solid var(--cfg-border);
    display: flex; justify-content: space-between; align-items: center;
    flex-shrink: 0;
}
.cfg-pl { font-size: 10px; color: var(--cfg-light); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.cfg-pv { font-family: "Cormorant Garamond", serif; font-size: 28px; font-weight: 600; color: var(--color-navy); }
.cfg-pv.is-empty { color: #b8b8b8; font-weight: 300; }
.cfg-preview__price--empty {
    text-align: center;
    padding: 16px 12px;
    font-style: italic;
    color: #999;
}

/* Fabric hero — the main visual of the preview panel now that the SVG
   is gone. Large fabric photo + name + colour, neutral placeholder
   before a fabric is picked. */
.cfg-preview__hero {
    margin: 0;
    padding: 24px;
    background: var(--color-cream, #FAF8F4);
    border-bottom: 1px solid var(--cfg-border, #E0DBD0);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.cfg-preview__hero-img,
.cfg-preview__hero-swatch {
    width: 100%;
    aspect-ratio: 1;
    max-width: 280px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--cfg-border);
    box-shadow: 0 4px 18px rgba(27,58,107,.08);
}
.cfg-preview__hero-meta { text-align: center; }
.cfg-preview__hero-name {
    font-family: var(--font-serif);
    font-size: 18px;
    color: var(--color-navy);
    margin: 0;
    line-height: 1.25;
}
.cfg-preview__hero-sub {
    font-family: var(--font-sans);
    font-size: 11px;
    color: var(--color-gold);
    margin: 4px 0 0;
    letter-spacing: .15em;
    text-transform: uppercase;
}
.cfg-preview__hero--empty { padding: 36px 24px; }
.cfg-preview__hero-placeholder {
    text-align: center;
    color: #888;
}
.cfg-preview__hero-placeholder span {
    display: block;
    font-size: 56px;
    line-height: 1;
    margin-bottom: 14px;
    opacity: .5;
}
.cfg-preview__hero-placeholder p {
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
    max-width: 240px;
    margin-inline: auto;
}
.cfg-free { font-size: 10px; color: #2D7A4F; font-weight: 700; }

/* BOTTOM */
.cfg-bottom {
    background: #fff;
    border-top: 1px solid var(--cfg-border);
    padding: 14px 32px;
    display: flex; justify-content: space-between; align-items: center;
    flex-shrink: 0;
}
/* Bouton « Étape suivante » et, tant que l'étape n'est pas faite, la phrase
   qui dit ce qu'on attend. Elle se place au-dessus pour rester lisible sur
   mobile, où la barre du bas est déjà à l'étroit. */
.cfg-next {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    min-width: 0;
}
.cfg-next-hint {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 11px;
    line-height: 1.4;
    color: #9a7b1f;
    text-align: right;
}
.cfg-next .btn[disabled] {
    opacity: .45;
    cursor: not-allowed;
}

/* Enregistrement des mesures dans le compte client. */
.cfg-modal--narrow { max-width: 460px; }
.cfg-save-profile { margin-top: 4px; }
.cfg-save-profile[disabled] { opacity: .45; cursor: not-allowed; }
.cfg-save-feedback {
    margin: 0 0 14px;
    padding: 10px 14px;
    font-family: var(--font-sans);
    font-size: .8125rem;
    line-height: 1.5;
    border-left: 3px solid;
}
.cfg-save-feedback--success { background: #EEF6EE; border-color: #4C8A4C; color: #2F5F2F; }
.cfg-save-feedback--error   { background: #FBEDED; border-color: #B14B4B; color: #7C2F2F; }

.cfg-dots { display: flex; gap: 6px; align-items: center; }
.cfg-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #F0EDE6; border: 1.5px solid var(--cfg-border);
}
.cfg-dot.is-current { width: 24px; border-radius: 4px; background: var(--color-navy); border-color: var(--color-navy); }
.cfg-dot.is-done { background: var(--color-gold); border-color: var(--color-gold); }

/* Tablet / Mobile fallback */
@media (max-width: 1100px) {
    .cfg-layout { grid-template-columns: 220px 1fr; }
    .cfg-preview { display: none; }
}
@media (max-width: 720px) {
    .cfg-layout { grid-template-columns: 1fr; }
    .cfg-sidebar { display: none; }
    .cfg-main { padding: 24px 16px; }
    .cfg-bottom { padding: 12px 16px; }
}

/* ── Compat: legacy step templates (still using .eyebrow/h2/.text-muted) ── */
.cfg-main .step .eyebrow {
    font-family: var(--font-sans);
    font-size: var(--eyebrow-size); font-weight: 700; letter-spacing: .15em;
    text-transform: uppercase; color: var(--color-gold);
    margin: 0 0 8px;
}
.cfg-main .step h2 {
    font-family: "Cormorant Garamond", serif;
    font-size: 32px; font-weight: 300;
    color: var(--color-navy);
    margin: 0 0 8px; line-height: 1.15;
}
.cfg-main .step .text-muted {
    font-size: 13px; color: #555; line-height: 1.7;
    margin: 0 0 24px; max-width: 65ch;
}

/* Hide the per-step duplicate prev/next buttons — they exist in legacy
   step templates but we now expose nav through .cfg-bottom. */
.cfg-main .step > div[style*="justify-content:space-between"]:has(button[data-live-action-param="prevStep"]) {
    display: none !important;
}
.cfg-main .step > div[style*="justify-content:space-between"]:has(button[data-live-action-param="nextStep"]) {
    display: none !important;
}

/* Polish option grids that legacy step templates render (cut, collar, etc.) */
.cfg-main .step .option-card,
.cfg-main .step .config-option {
    border: 2px solid #E0DBD0;
    background: #fff;
    border-radius: 4px;
    transition: border-color .15s, transform .15s;
}
.cfg-main .step .option-card:hover,
.cfg-main .step .config-option:hover { border-color: var(--color-navy); transform: translateY(-2px); }
.cfg-main .step .option-card.is-selected,
.cfg-main .step .config-option.is-selected { border-color: var(--color-gold); }

/* ════════════════════════════════════════════════════════════════════
   CONFIGURATEUR — sticky bottom + fabric info modal + price polish
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. Sticky bottom nav bar ──
   Reserve space at the bottom of the main column and pin the nav bar to
   the viewport so admins always see "Étape suivante" without scrolling. */
.cfg-app { padding-bottom: 0; }
.cfg-main { padding-bottom: 90px; }
.cfg-bottom {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 30;
    box-shadow: 0 -4px 16px rgba(27,58,107,.08);
}

/* ── 2. Fabric card with info button overlay ──
   The card was a single <button>; it's now a wrapper holding the info
   trigger (top-right) + a full-size "select" button under it. */
.cfg-fab {
    position: relative;
    cursor: default;
}
.cfg-fab-info {
    position: absolute;
    top: 6px; right: 6px;
    z-index: 3;
    width: 26px; height: 26px;
    border: 0;
    background: rgba(27,58,107,.85);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, transform .15s;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.cfg-fab-info:hover {
    background: var(--color-gold);
    transform: scale(1.08);
}
.cfg-fab-select {
    border: 0;
    background: transparent;
    padding: 0;
    width: 100%;
    cursor: pointer;
    display: block;
    text-align: inherit;
    color: inherit;
    font: inherit;
}

/* Make the WHOLE card (info button included) reflect selection */
.cfg-fab.is-selected { border-color: var(--color-gold) !important; }

/* ── 3. Info modal ──
   Backdrop overlay + centered white panel. Closes on backdrop click
   (handled in fabric_info_controller.js#backdropClose). */
.cfg-fab-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 28, 56, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: cfg-modal-in .15s ease-out;
}
.cfg-fab-modal[hidden] { display: none; }
@keyframes cfg-modal-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.cfg-fab-modal__panel {
    background: #fff;
    border-radius: 8px;
    max-width: 480px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 24px 60px rgba(0,0,0,.3);
    animation: cfg-modal-slide .2s ease-out;
}
@keyframes cfg-modal-slide {
    from { transform: translateY(12px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.cfg-fab-modal__close {
    position: absolute;
    top: 12px; right: 12px;
    width: 32px; height: 32px;
    border: 0;
    background: rgba(255,255,255,.9);
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--color-navy);
    z-index: 2;
    transition: background .15s, color .15s;
}
.cfg-fab-modal__close:hover {
    background: var(--color-navy);
    color: #fff;
}
.cfg-fab-modal__img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
    background: var(--color-cream);
}
.cfg-fab-modal__body {
    padding: 24px 28px;
}
.cfg-fab-modal__ref {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin: 0 0 8px;
}
.cfg-fab-modal__title {
    font-family: "Cormorant Garamond", serif;
    font-size: 28px;
    font-weight: 600;
    color: var(--color-navy);
    margin: 0 0 12px;
    line-height: 1.15;
}
.cfg-fab-modal__meta {
    display: flex; flex-wrap: wrap; gap: 6px 8px;
    margin: 0 0 16px;
}
.cfg-fab-modal__meta span {
    background: var(--color-cream);
    color: var(--color-navy);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 100px;
    border: 1px solid var(--cfg-border, #E0DBD0);
}
.cfg-fab-modal__meta span:empty { display: none; }
.cfg-fab-modal__desc {
    color: #555;
    font-size: 13.5px;
    line-height: 1.65;
    margin: 0 0 20px;
}
.cfg-fab-modal__price {
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid var(--cfg-border, #E0DBD0);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}
.cfg-fab-modal__price-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #999;
}
.cfg-fab-modal__price strong {
    font-family: "Cormorant Garamond", serif;
    font-size: 26px;
    font-weight: 600;
    color: var(--color-navy);
}

/* ── Multi-section step (step 2 — Coupe & Silhouette) ── */
.cfg-sub { margin-bottom: 40px; }
.cfg-sub:last-child { margin-bottom: 0; }
.cfg-sub-h {
    font-family: "Cormorant Garamond", serif;
    font-size: 22px;
    font-weight: 400;
    color: var(--color-navy);
    margin: 0 0 4px;
}
.cfg-sub-p {
    font-size: 12px;
    color: #777;
    margin: 0 0 16px;
}

/* Option cards (cuts, backs, cuffs, collars, pockets, buttons) */
.cfg-opt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 14px;
}
.cfg-opt {
    cursor: pointer;
    border: 2px solid #E0DBD0;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    padding: 0;
    text-align: left;
    font: inherit;
    color: inherit;
    transition: border-color .15s, transform .15s, box-shadow .15s;
    display: flex;
    flex-direction: column;
}
.cfg-opt:hover {
    border-color: var(--color-navy);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(27,58,107,.08);
}
.cfg-opt.is-selected {
    border-color: var(--color-gold);
    background: var(--color-cream);
}
.cfg-opt-img {
    width: 100%;
    aspect-ratio: 1;
    /* `contain` keeps the whole illustration visible (the legacy SVG-style
       images have their drawing right up to the edges — `cover` would crop
       it). Padding adds breathing room so the picture isn't glued to the
       card border. */
    object-fit: contain;
    object-position: center;
    display: block;
    padding: 14px;
    background: #fff;
    /* Sharpen the small (1-6 KB) legacy raster images when scaled up. */
    image-rendering: -webkit-optimize-contrast;
}
.cfg-opt-img-placeholder {
    width: 100%;
    aspect-ratio: 1;
    background: var(--color-cream);
    display: flex; align-items: center; justify-content: center;
    font-size: 48px;
    color: rgba(27,58,107,.3);
}
.cfg-opt-body { padding: 10px 12px; }
.cfg-opt-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-navy);
    margin: 0 0 4px;
    line-height: 1.3;
}
.cfg-opt-desc {
    font-size: 11px;
    color: #888;
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cfg-opt-surcharge {
    font-size: 11px;
    color: var(--color-gold);
    font-weight: 700;
    margin: 4px 0 0;
}

/* ── Section labels (used by step 3 to mark "Les + commandés" and
      "Tous les cols" — no surrounding box, just a small uppercase label
      with a discreet gold underline). ── */
.cfg-section-label {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--font-sans);
    font-size: var(--eyebrow-size);
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin: 8px 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(201,168,76,.2);
}
.cfg-section-label--quiet {
    color: #999;
    border-bottom-color: var(--cfg-border, #E0DBD0);
    margin-top: 28px;
}
.cfg-section-label__star { color: var(--color-gold); font-size: 14px; line-height: 1; }

/* Discreet medal in the corner of featured cards — same card chrome
   as a regular option, just a small gold dot. */
.cfg-opt.is-featured { position: relative; }
.cfg-opt.is-featured:hover { border-color: var(--color-gold); }
.cfg-opt.is-featured.is-selected { border-color: var(--color-gold); }
.cfg-opt-medal {
    position: absolute;
    top: 6px; right: 6px;
    z-index: 2;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--color-gold);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}

/* Group chip inside featured card body (e.g. "Casual" / "Chic") */
.cfg-opt-chip {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-gold);
    background: rgba(201,168,76,.08);
    padding: 2px 8px;
    border-radius: 100px;
    margin-bottom: 4px;
}

/* ── Step 6 (Finitions) — clickable emplacement cards (with line-drawing
      icons) that open a modal fabric picker. "Je ne souhaite pas" auto-
      advances. None of these choices affect the price. ── */
.cfg-skip-btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #fff;
    background: #C0392B;            /* red like legacy "JE NE SOUHAITE PAS" */
    border: 1px solid #C0392B;
    padding: 12px 22px;
    border-radius: 2px;
    cursor: pointer;
    margin-bottom: 28px;
    transition: all .15s ease;
}
.cfg-skip-btn:hover { background: #a73224; border-color: #a73224; }

.cfg-finish-block {
    border-top: 1px solid var(--cfg-border, #E0DBD0);
    padding: 32px 0;
}
.cfg-finish-block:first-of-type { border-top: 0; padding-top: 0; }
.cfg-finish-head { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; }
.cfg-finish-num {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1.5px solid var(--color-navy);
    background: transparent;
    color: var(--color-navy);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-sans);
    font-size: 13px; font-weight: 700;
}
.cfg-finish-title {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--color-navy);
    margin: 0;
}

/* Emplacement cards (4-up grid). Each shows a line-drawing icon; if a fabric
   is picked, a small chip overlays the icon. The CTA below changes from
   "Choisissez votre tissu" to "Modifiez votre tissu" (gold when active). */
/* Uniform grid that fills the column. Same card chrome for every
   sub-section (col / poignet / poche / plastron) so the page reads as one. */
.cfg-empl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 18px;
}
.cfg-empl { display: flex; flex-direction: column; gap: 10px; }
.cfg-empl-card {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    background: #fff;
    border: 1px solid var(--cfg-border, #E0DBD0);
    padding: 18px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.cfg-empl-card:hover { border-color: var(--color-navy); }
.cfg-empl-card.is-picked {
    border-color: var(--color-gold);
    box-shadow: 0 0 0 1px var(--color-gold);
    background: var(--color-cream);
}
.cfg-empl-card--neutral { background: #fff; }
.cfg-empl-card img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
}
.cfg-empl-glyph {
    font-size: 48px;
    color: #b3b3b3;
    font-weight: 300;
}
.cfg-empl-thumb {
    position: absolute;
    bottom: 6px; left: 6px;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--color-gold) center / cover no-repeat;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.cfg-empl-thumb::after {
    content: '✕';
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    color: #fff;
    font-weight: 700;
    opacity: 0;            /* the ✕ is just a hover affordance; subtle */
    pointer-events: none;
}
.cfg-empl-label {
    font-family: var(--font-serif);
    font-size: 13px;
    color: #444;
    margin: 0;
    text-align: center;
}
.cfg-empl-btn {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-sans);
    font-size: 10.5px;
    font-weight: 600;
    color: #fff;
    background: #2C3E50;
    border: 1px solid #2C3E50;
    padding: 7px 10px;
    border-radius: 100px;
    cursor: pointer;
    transition: all .15s ease;
    white-space: nowrap;
    width: 100%;
}
.cfg-empl-btn:hover { background: #1f2c3b; }
.cfg-empl-btn.is-active {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: #fff;
}

/* Poche — same grid + card chrome as the emplacements. */
.cfg-poche-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 18px;
}
.cfg-poche-card {
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cfg-poche-card img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--cfg-border, #E0DBD0);
    transition: border-color .15s ease, box-shadow .15s ease;
}
/* Repli quand l'illustration est introuvable : une initiale sobre plutôt que
   l'icône d'image cassée du navigateur. Mêmes dimensions et mêmes états que
   l'image, pour que la grille ne bouge pas. */
.cfg-poche-noimg {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--cfg-border, #E0DBD0);
    font-family: var(--font-serif);
    font-size: 2.5rem;
    font-weight: 300;
    color: var(--color-navy);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.cfg-poche-card:hover img,
.cfg-poche-card:hover .cfg-poche-noimg { border-color: var(--color-navy); }
.cfg-poche-card.is-selected img,
.cfg-poche-card.is-selected .cfg-poche-noimg {
    border-color: var(--color-gold);
    box-shadow: 0 0 0 1px var(--color-gold);
    background: var(--color-cream);
}
.cfg-poche-radio {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--font-sans);
    font-size: 13px;
    color: #444;
}
.cfg-radio {
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 1.5px solid #999;
    display: inline-block;
    position: relative;
}
.cfg-radio.is-on { border-color: #C0392B; }
.cfg-radio.is-on::after {
    content: '';
    position: absolute; inset: 2px;
    border-radius: 50%;
    background: #C0392B;
}

/* Fabric-picker modal — covers viewport, dismisses on backdrop click. */
.cfg-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(20, 32, 56, .55);
    z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    animation: cfg-modal-fade .15s ease;
}
@keyframes cfg-modal-fade { from { opacity: 0; } to { opacity: 1; } }
.cfg-modal {
    background: #fff;
    max-width: 900px;
    width: 100%;
    max-height: 80vh;
    display: flex; flex-direction: column;
    border-radius: 6px;
    box-shadow: 0 12px 40px rgba(0,0,0,.25);
    overflow: hidden;
}
.cfg-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--cfg-border, #E0DBD0);
}
.cfg-modal-head h3 {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 600;
    color: var(--color-navy);
    margin: 0;
}
.cfg-modal-close {
    background: transparent;
    border: 0;
    font-size: 20px;
    color: #888;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}
.cfg-modal-close:hover { color: var(--color-navy); }
.cfg-modal-body {
    overflow-y: auto;
    padding: 20px 24px;
}
.cfg-modal-fabrics {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 12px;
}
.cfg-finish-fab {
    border: 2px solid var(--cfg-border, #E0DBD0);
    background: #fff;
    padding: 0;
    cursor: pointer;
    border-radius: 4px;
    overflow: hidden;
    transition: all .15s ease;
    text-align: center;
}
.cfg-finish-fab img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}
.cfg-finish-fab-name {
    display: block;
    font-family: var(--font-sans);
    font-size: 10px;
    color: #555;
    padding: 4px 6px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cfg-finish-fab:hover { border-color: var(--color-navy); }

/* Embroidery step (#7) — text input + dropdown shared with finitions. */
.cfg-input {
    width: 100%;
    max-width: 360px;
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--color-navy);
    background: #fff;
    border: 1px solid var(--cfg-border, #E0DBD0);
    padding: 10px 14px;
    border-radius: 2px;
    outline: none;
    transition: border-color .15s ease;
}
.cfg-input:focus { border-color: var(--color-navy); }
.cfg-input-help {
    font-size: 11px;
    color: #888;
    margin: 6px 0 0;
}
.cfg-select-wrap { max-width: 360px; }
.cfg-select {
    width: 100%;
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--color-navy);
    background: #fff;
    border: 1px solid var(--cfg-border, #E0DBD0);
    padding: 10px 14px;
    border-radius: 2px;
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--color-navy) 50%),
        linear-gradient(135deg, var(--color-navy) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) center,
        calc(100% - 12px) center;
    background-size: 6px 6px;
    background-repeat: no-repeat;
    cursor: pointer;
}
.cfg-select:focus { outline: none; border-color: var(--color-navy); }

/* Step 8 — Mesures. Method tabs, sized form, video grid, standard sizes. */
.cfg-method-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.cfg-method-tab {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--color-navy);
    background: #fff;
    border: 1.5px solid var(--color-navy);
    padding: 12px 22px;
    border-radius: 2px;
    cursor: pointer;
    transition: all .15s ease;
}
.cfg-method-tab:hover { background: rgba(27,58,107,.06); }
.cfg-method-tab.is-active {
    background: var(--color-navy);
    color: #fff;
}

.cfg-measure-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 460px;
}
/* Chemise-à-plat lays the 12 fields into 2 columns to mirror the legacy screen. */
.cfg-measure-form--two-col {
    max-width: 920px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    column-gap: 40px;
}
.cfg-measure-row {
    display: grid;
    grid-template-columns: 1fr 90px 30px;
    align-items: center;
    gap: 14px;
}
.cfg-measure-label {
    font-family: var(--font-sans);
    font-size: 13px;
    color: #333;
}
.cfg-measure-unit {
    font-family: var(--font-sans);
    font-size: 12px;
    color: #888;
}
.cfg-input--small { width: 90px; max-width: 90px; padding: 8px 12px; text-align: center; }

.cfg-size-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.cfg-size-btn {
    width: 60px;
    height: 60px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-navy);
    background: #fff;
    border: 1.5px solid var(--cfg-border, #E0DBD0);
    border-radius: 2px;
    cursor: pointer;
    transition: all .15s ease;
}
.cfg-size-btn:hover { border-color: var(--color-navy); }
.cfg-size-btn.is-selected {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: #fff;
}

.cfg-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 22px;
}
.cfg-video { display: flex; flex-direction: column; gap: 8px; }
.cfg-video .cfg-video-trigger { margin-top: auto; }
.cfg-video-label {
    font-family: var(--font-sans);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .15em;
    color: #555;
    margin: 0;
}
.cfg-video-help {
    font-size: 12px;
    color: #6b6b6b;
    line-height: 1.45;
    margin: 0;
}
.cfg-video-trigger {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
    border: 0;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
}
.cfg-video-trigger img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .25s ease;
}
.cfg-video-trigger:hover img { transform: scale(1.03); }
.cfg-video-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 56px; height: 56px;
    border-radius: 50%;
    background: rgba(204, 0, 0, .92);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    box-shadow: 0 4px 18px rgba(0,0,0,.35);
}

/* Step 9 — Récapitulatif. Hero band on cream, table + sticky aside.
   Strong navy header on each card adds the missing color/structure. */
.cfg-summary-hero {
    background: linear-gradient(180deg, var(--color-cream, #FAF8F4) 0%, #fff 100%);
    border-left: 3px solid var(--color-gold);
    padding: 20px 22px;
    margin: 8px 0 28px;
}
.cfg-summary-kicker {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin: 0 0 6px;
}
.cfg-summary-h {
    font-family: var(--font-serif);
    font-size: 32px;
    font-weight: 300;
    color: var(--color-navy);
    margin: 0 0 4px;
}
.cfg-summary-sub {
    font-size: 13px;
    color: #6b6b6b;
    margin: 0;
}

.cfg-summary-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 32px;
    margin: 0 0 32px;
}

/* Left: card with navy header strip. */
.cfg-summary-table {
    background: #fff;
    border: 1px solid var(--cfg-border, #E0DBD0);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(27,58,107,.05);
}
.cfg-summary-thead {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--color-navy);
    color: #fff;
    padding: 14px 20px;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
}
.cfg-summary-thead-pill {
    background: rgba(201,168,76,.18);
    color: var(--color-gold);
    border-radius: 100px;
    padding: 4px 12px;
    font-size: 10px;
    letter-spacing: .12em;
}
.cfg-summary-row {
    display: grid;
    grid-template-columns: 220px 1fr auto;
    gap: 18px;
    align-items: start;
    padding: 16px 22px;
    border-bottom: 1px solid var(--cfg-border, #E0DBD0);
    transition: background .15s ease;
}
.cfg-summary-row:last-child { border-bottom: 0; }
.cfg-summary-row:nth-child(even) { background: rgba(250,248,244,.5); } /* alternate zebra on cream */
.cfg-summary-row:hover { background: rgba(201,168,76,.05); }

.cfg-summary-label {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-navy);
    padding-top: 2px;
}
/* Pastille du récapitulatif : reprend le numéro et la graisse de .cfg-step-num
   du fil d'étapes, pour que la ligne « 3 Col » se rattache visuellement à
   l'étape 3 vers laquelle renvoie son bouton « Modifier ». */
.cfg-summary-icon {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: rgba(201,168,76,.12);
    color: var(--color-gold);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.cfg-summary-value { min-width: 0; }
.cfg-summary-main {
    font-family: var(--font-serif);
    font-size: 16px;
    color: #1a1a1a;
}
.cfg-summary-main.is-empty { color: #b0b0b0; font-style: italic; font-size: 13px; }
.cfg-summary-extras {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    font-family: var(--font-sans);
    font-size: 12px;
    color: #555;
}
.cfg-summary-extras li { padding: 2px 0; }
.cfg-summary-extras li::before { content: '— '; color: var(--color-gold); font-weight: 700; }
.cfg-summary-edit {
    background: transparent;
    border: 1px solid var(--color-navy);
    color: var(--color-navy);
    font-family: var(--font-sans);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 100px;
    align-self: center;
    transition: all .15s ease;
}
.cfg-summary-edit:hover { background: var(--color-navy); color: #fff; }

/* Right: aside with navy header band + fabric thumb. */
.cfg-summary-aside {
    background: #fff;
    border: 1px solid var(--cfg-border, #E0DBD0);
    border-radius: 6px;
    height: max-content;
    position: sticky;
    top: 96px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(27,58,107,.08);
}
.cfg-summary-aside-head {
    background: var(--color-navy);
    color: #fff;
    padding: 16px 18px;
    display: flex; align-items: center; gap: 12px;
}
.cfg-summary-fabric-thumb {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--color-cream) center / cover no-repeat;
    border: 2px solid var(--color-gold);
    flex-shrink: 0;
}
.cfg-summary-aside-meta { min-width: 0; }
.cfg-summary-aside-line1 {
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin: 0 0 2px;
}
.cfg-summary-aside-line2 {
    font-family: var(--font-serif);
    font-size: 14px;
    color: #fff;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cfg-summary-aside-body {
    padding: 26px 22px 22px;
    text-align: center;
}
.cfg-summary-eyebrow {
    font-family: var(--font-sans);
    font-size: var(--eyebrow-size);
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #888;
    margin: 0 0 8px;
}
.cfg-summary-price {
    font-family: var(--font-serif);
    font-size: 48px;
    font-weight: 300;
    color: var(--color-navy);
    margin: 0;
    line-height: 1.05;
}
.cfg-summary-price.is-empty { color: #c2c2c2; }
.cfg-summary-vat {
    font-size: 11px;
    color: #888;
    margin: 4px 0 22px;
}
.cfg-summary-cta {
    display: block;
    width: 100%;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, var(--color-gold) 0%, #b59440 100%);
    border: 0;
    padding: 16px 18px;
    border-radius: 2px;
    cursor: pointer;
    transition: filter .15s ease, transform .15s ease;
    box-shadow: 0 4px 12px rgba(201,168,76,.3);
}
.cfg-summary-cta:hover { filter: brightness(.95); transform: translateY(-1px); }
.cfg-summary-perks {
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
    text-align: left;
}
.cfg-summary-perks li {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--font-sans);
    font-size: 12px;
    color: #555;
    padding: 5px 0;
}
.cfg-summary-perks li span {
    color: var(--color-gold);
    font-size: 11px;
}

@media (max-width: 900px) {
    .cfg-summary-grid { grid-template-columns: 1fr; }
    .cfg-summary-aside { position: static; }
    .cfg-summary-row { grid-template-columns: 1fr; }
    .cfg-summary-edit { justify-self: start; }
}

/* YouTube modal — centered overlay. Clicking the backdrop / ✕ / Esc
   closes it. The iframe scales to fit the viewport while keeping
   16/9 ratio. */
.yt-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, .82);
    z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    padding: 32px;
    animation: yt-fade .15s ease;
}
@keyframes yt-fade { from { opacity: 0 } to { opacity: 1 } }
.yt-modal {
    position: relative;
    width: 100%;
    max-width: 1100px;
}
.yt-modal-close {
    position: absolute;
    top: -42px; right: 0;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 26px;
    cursor: pointer;
    line-height: 1;
    padding: 6px 10px;
}
.yt-modal-close:hover { color: var(--color-gold); }
.yt-modal-frame {
    aspect-ratio: 16 / 9;
    width: 100%;
    background: #000;
    box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.yt-modal-frame iframe {
    width: 100%; height: 100%;
    border: 0;
    display: block;
}

/* =========================================================================
   La Marque — bespoke page styles. Self-contained, scoped under .brand-page.
   ========================================================================= */
.brand-page {
    --brand-navy: var(--color-navy, #1B3A6B);
    --brand-gold: var(--color-gold, #C9A84C);
    --brand-cream: var(--color-cream, #FAF8F4);
    --brand-ink: #1a1a1a;
    --brand-mid: #5a5a5a;
    background: #fff;
}

/* Shared atoms */
.brand-page .brand-eyebrow {
    font-family: var(--font-sans);
    font-size: var(--eyebrow-size);
    font-weight: 700;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--brand-gold);
    margin: 0 0 12px;
}
.brand-page .brand-eyebrow--dark { color: var(--brand-navy); }
.brand-page .brand-eyebrow--gold { color: var(--brand-gold); }
.brand-page .brand-hr {
    width: 60px;
    height: 2px;
    background: var(--brand-gold);
    border: 0;
    margin: 0 auto;
}
.brand-page .brand-section-head {
    text-align: center;
    margin: 0 auto 56px;
}

.brand-page .brand-btn {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    padding: 16px 28px;
    text-decoration: none;
    border-radius: 2px;
    transition: all .2s ease;
}
.brand-page .brand-btn--gold {
    background: var(--brand-gold);
    color: #fff;
    border: 1px solid var(--brand-gold);
}
.brand-page .brand-btn--gold:hover { background: #b59440; border-color: #b59440; }
.brand-page .brand-btn--ghost {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,.6);
}
.brand-page .brand-btn--ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.brand-page .brand-btn--outline {
    background: transparent;
    color: var(--brand-navy);
    border: 1px solid var(--brand-navy);
}
.brand-page .brand-btn--outline:hover { background: var(--brand-navy); color: #fff; }

/* Hero — full-bleed photo, dark overlay, centred copy */
.brand-page .brand-hero {
    position: relative;
    min-height: 78vh;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    isolation: isolate;
}
.brand-page .brand-hero__bg {
    position: absolute; inset: 0;
    z-index: -2;
}
.brand-page .brand-hero__bg img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 30%;
    filter: grayscale(.2);
}
.brand-page .brand-hero__overlay {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(27,58,107,.55) 0%, rgba(27,58,107,.75) 100%);
    z-index: -1;
}
.brand-page .brand-hero__inner {
    max-width: 760px;
    padding: 100px 24px;
    text-align: center;
    color: #fff;
}
.brand-page .brand-hero .brand-eyebrow {
    color: var(--brand-gold);
}
.brand-page .brand-hero__title {
    font-family: var(--font-serif);
    font-size: clamp(36px, 5vw, 60px);
    font-weight: 300;
    line-height: 1.1;
    margin: 0 0 24px;
    color: #fff;
}
.brand-page .brand-hero__lead {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255,255,255,.92);
    max-width: 580px;
    margin: 0 auto 36px;
}
.brand-page .brand-hero__ctas {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
}

/* Pull quote */
.brand-page .brand-quote {
    background: var(--brand-cream);
    text-align: center;
    padding: 80px 24px;
    border-bottom: 1px solid #ECE6DA;
}
.brand-page .brand-quote__mark {
    font-family: var(--font-serif);
    font-size: 120px;
    line-height: .8;
    color: var(--brand-gold);
    margin: 0 0 -20px;
}
.brand-page .brand-quote__body {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.45;
    color: var(--brand-navy);
    max-width: 720px;
    margin: 0 auto;
    padding: 0;
    border: 0;
}
.brand-page .brand-quote__body cite {
    display: block;
    margin-top: 18px;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--brand-gold);
}

/* Values — 3 cards */
.brand-page .brand-values {
    padding: 96px 24px;
    max-width: 1200px;
    margin: 0 auto;
}
.brand-page .brand-values__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 36px;
}
.brand-page .brand-value {
    text-align: center;
    padding: 32px 24px;
    border-top: 2px solid var(--brand-gold);
    background: var(--brand-cream);
    border-radius: 2px;
    transition: transform .25s ease, box-shadow .25s ease;
}
.brand-page .brand-value:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(27,58,107,.08);
}
.brand-page .brand-value__num {
    font-family: var(--font-serif);
    font-size: 14px;
    color: var(--brand-gold);
    letter-spacing: .3em;
    display: block;
    margin-bottom: 12px;
}
.brand-page .brand-value__t {
    font-family: var(--font-serif);
    font-size: 26px;
    font-weight: 400;
    color: var(--brand-navy);
    margin: 0 0 14px;
}
.brand-page .brand-value__b {
    font-size: 14px;
    color: var(--brand-mid);
    line-height: 1.65;
    margin: 0;
}

/* Story — two rows, image + text, alternating */
.brand-page .brand-story {
    padding: 64px 24px 96px;
    max-width: 1200px;
    margin: 0 auto;
    display: flex; flex-direction: column; gap: 80px;
}
.brand-page .brand-story__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.brand-page .brand-story__row--reverse .brand-story__media { order: -1; }
.brand-page .brand-story__media img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 4px;
    filter: grayscale(.15) contrast(1.05);
}
.brand-page .brand-story__t {
    font-family: var(--font-serif);
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 300;
    color: var(--brand-navy);
    margin: 0 0 22px;
    line-height: 1.2;
}
.brand-page .brand-story__text p {
    font-size: 15px;
    color: var(--brand-mid);
    line-height: 1.8;
    margin: 0 0 16px;
}
.brand-page .brand-story__text p:last-child { margin-bottom: 0; }

/* Stats strip */
.brand-page .brand-stats {
    background: var(--brand-navy);
    padding: 56px 24px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
    text-align: center;
    color: #fff;
}
.brand-page .brand-stat__n {
    font-family: var(--font-serif);
    font-size: clamp(34px, 4vw, 48px);
    font-weight: 300;
    color: var(--brand-gold);
    margin: 0 0 6px;
    line-height: 1;
}
.brand-page .brand-stat__l {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255,255,255,.75);
    margin: 0;
}

/* Final CTA band */
.brand-page .brand-cta {
    background: linear-gradient(180deg, var(--brand-cream) 0%, #fff 100%);
    text-align: center;
    padding: 96px 24px;
}
.brand-page .brand-cta__mark {
    width: 56px; height: 56px;
    object-fit: contain;
    margin: 0 auto 18px;
    display: block;
    opacity: .8;
}
.brand-page .brand-cta__t {
    font-family: var(--font-serif);
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 300;
    color: var(--brand-navy);
    margin: 0 0 14px;
}
.brand-page .brand-cta__b {
    font-size: 15px;
    color: var(--brand-mid);
    margin: 0 auto 32px;
    max-width: 480px;
}
.brand-page .brand-cta__btns {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
}

@media (max-width: 720px) {
    .brand-page .brand-story__row {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .brand-page .brand-story__row--reverse .brand-story__media { order: 0; }
}

/* =========================================================================
   Editorial blocks — La Marque page. Distinct from the homepage chrome:
   full-bleed asymmetric layouts, large serif typography, vertical labels,
   navy + gold + cream accents.
   ========================================================================= */
.ed-eyebrow {
    font-family: var(--font-sans);
    font-size: var(--eyebrow-size);
    font-weight: 700;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--color-navy);
    margin: 0 0 18px;
}
.ed-eyebrow--gold { color: var(--color-gold); }
.ed-btn {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    padding: 17px 30px;
    text-decoration: none;
    border-radius: 0;
    transition: all .22s ease;
    border: 1px solid transparent;
}
.ed-btn--gold { background: var(--color-gold); color: #fff; border-color: var(--color-gold); }
.ed-btn--gold:hover { background: #b59440; border-color: #b59440; }
.ed-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.ed-btn--ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.ed-btn--outline-navy { background: transparent; color: var(--color-navy); border-color: var(--color-navy); }
.ed-btn--outline-navy:hover { background: var(--color-navy); color: #fff; }

/* Hero */
.ed-hero { position: relative; background: var(--color-cream); min-height: 92vh; overflow: hidden; }
.ed-hero__inner { display: grid; grid-template-columns: 1fr 1.15fr; min-height: 92vh; gap: 0; }
.ed-hero__text { padding: 100px 80px 80px 130px; display: flex; flex-direction: column; justify-content: center; position: relative; }
.ed-hero__title {
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: clamp(56px, 8vw, 110px);
    line-height: .92;
    color: var(--color-navy);
    margin: 0 0 32px;
    letter-spacing: -.02em;
}
.ed-hero__title span { display: block; }
.ed-hero__title em { display: block; font-style: italic; color: var(--color-gold); font-weight: 300; }
.ed-hero__lead { font-family: var(--font-body); font-size: 17px; line-height: 1.7; color: #3a3a3a; max-width: 460px; margin: 0 0 36px; }
.ed-hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.ed-hero__ctas .ed-btn--ghost { color: var(--color-navy); border-color: var(--color-navy); }
.ed-hero__ctas .ed-btn--ghost:hover { background: var(--color-navy); color: #fff; }
.ed-hero__meta {
    position: absolute;
    bottom: 32px; left: 130px;
    font-family: var(--font-sans);
    font-size: 10.5px; font-weight: 600; letter-spacing: .25em; text-transform: uppercase;
    color: #888; margin: 0;
}
.ed-hero__meta::before { content: ''; display: inline-block; width: 24px; height: 1px; background: var(--color-gold); vertical-align: middle; margin-right: 12px; }
.ed-hero__figure { position: relative; margin: 0; overflow: hidden; }
.ed-hero__figure img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; filter: grayscale(.1) contrast(1.04); }
.ed-hero__figure figcaption {
    position: absolute;
    bottom: 28px; right: 28px;
    background: rgba(27,58,107,.85);
    color: #fff; padding: 8px 16px;
    font-family: var(--font-sans);
    font-size: 10px; letter-spacing: .25em; text-transform: uppercase;
}

/* Manifesto */
.ed-manifesto { background: #fff; padding: 130px 0 110px; border-bottom: 1px solid #ECE6DA; }
.ed-manifesto__inner { max-width: 1180px; margin: 0 auto; padding: 0 60px; position: relative; }
.ed-manifesto__eyebrow { text-align: left; margin-bottom: 28px; }
.ed-manifesto__eyebrow::after { content: ''; display: block; width: 50px; height: 2px; background: var(--color-gold); margin-top: 18px; }
.ed-manifesto__body { position: relative; column-count: 2; column-gap: 60px; }
.ed-manifesto__para { font-family: var(--font-serif); font-size: 19px; line-height: 1.65; color: #2a2a2a; margin: 0 0 22px; break-inside: avoid; }
.ed-dropcap { float: left; font-family: var(--font-serif); font-size: 110px; line-height: .88; color: var(--color-gold); font-weight: 400; margin: 6px 14px 0 0; padding: 0; }
.ed-manifesto__pull { column-span: all; margin: 32px auto 40px; max-width: 720px; text-align: center; border-top: 1px solid #ECE6DA; border-bottom: 1px solid #ECE6DA; padding: 36px 20px; }
.ed-manifesto__pull-mark { font-family: var(--font-serif); font-size: 80px; line-height: .8; color: var(--color-gold); margin: 0 0 -8px; }
.ed-manifesto__pull blockquote { font-family: var(--font-serif); font-style: italic; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.4; color: var(--color-navy); margin: 0; border: 0; padding: 0; }
.ed-manifesto__pull cite { display: block; margin-top: 16px; font-family: var(--font-sans); font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; color: var(--color-gold); }

/* Values */
.ed-values { background: var(--color-cream); padding: 130px 60px; border-bottom: 1px solid #ECE6DA; }
.ed-values__head { text-align: center; margin: 0 auto 90px; max-width: 700px; }
.ed-values__head .ed-eyebrow { color: var(--color-gold); margin-bottom: 14px; }
.ed-values__head .ed-eyebrow::after,
.ed-values__head .ed-eyebrow::before { content: ''; display: inline-block; width: 32px; height: 1px; background: var(--color-gold); vertical-align: middle; margin: 0 14px; }
.ed-values__title { font-family: var(--font-serif); font-weight: 300; font-size: clamp(36px, 4.5vw, 56px); color: var(--color-navy); margin: 0; line-height: 1.1; }
.ed-values__list { list-style: none; margin: 0 auto; padding: 0; max-width: 1240px; display: flex; flex-direction: column; gap: 90px; }
.ed-value { display: grid; grid-template-columns: 280px 1fr; gap: 48px; align-items: center; }
.ed-value--right { grid-template-columns: 1fr 280px; direction: rtl; }
.ed-value--right > * { direction: ltr; }
.ed-value__num { font-family: var(--font-serif); font-style: italic; font-weight: 300; font-size: clamp(120px, 16vw, 220px); line-height: .85; color: var(--color-gold); text-align: center; opacity: .85; }
.ed-value__title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(32px, 3.4vw, 44px); color: var(--color-navy); margin: 0 0 18px; line-height: 1.1; }
.ed-value__title::before { content: ''; display: block; width: 40px; height: 2px; background: var(--color-gold); margin-bottom: 24px; }
.ed-value__body { font-family: var(--font-body); font-size: 16px; line-height: 1.75; color: #444; max-width: 520px; margin: 0; }

/* Timeline */
.ed-timeline { background: var(--color-navy); color: #fff; padding: 130px 0; position: relative; overflow: hidden; }
.ed-timeline::before { content: ''; position: absolute; top: 90px; right: -40px; width: 200px; height: 1px; background: var(--color-gold); transform: rotate(-35deg); opacity: .5; }
.ed-timeline__inner { max-width: 1240px; margin: 0 auto; padding: 0 60px; }
.ed-timeline__head { max-width: 640px; margin: 0 0 90px; }
.ed-timeline__title { font-family: var(--font-serif); font-weight: 300; font-size: clamp(36px, 4.5vw, 58px); color: #fff; margin: 0; line-height: 1.05; }
.ed-timeline__body { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.ed-timeline__list { list-style: none; padding: 0; margin: 0; position: relative; }
.ed-timeline__list::before { content: ''; position: absolute; left: 95px; top: 6px; bottom: 6px; width: 1px; background: rgba(201,168,76,.4); }
.ed-timeline__item { display: grid; grid-template-columns: 90px 1fr; align-items: baseline; gap: 36px; padding: 0 0 38px; position: relative; }
.ed-timeline__item:last-child { padding-bottom: 0; }
.ed-timeline__dot { position: absolute; left: 92px; top: 14px; width: 7px; height: 7px; border-radius: 50%; background: var(--color-gold); box-shadow: 0 0 0 3px var(--color-navy); }
.ed-timeline__year { font-family: var(--font-serif); font-style: italic; font-weight: 300; font-size: 30px; color: var(--color-gold); text-align: left; }
.ed-timeline__event { font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: #fff; margin: 0 0 8px; }
.ed-timeline__desc { font-family: var(--font-body); font-size: 14.5px; line-height: 1.7; color: rgba(255,255,255,.7); margin: 0; }
.ed-timeline__figure { margin: 0; position: relative; }
.ed-timeline__figure::before { content: ''; position: absolute; top: 18px; left: 18px; right: -18px; bottom: -18px; border: 1px solid var(--color-gold); z-index: 0; }
.ed-timeline__figure img { width: 100%; aspect-ratio: 3/4; object-fit: cover; position: relative; z-index: 1; filter: grayscale(.15) contrast(1.05); }

/* Atelier */
.ed-atelier { background: #fff; position: relative; overflow: hidden; }
.ed-atelier__inner { display: grid; grid-template-columns: 1.1fr 1fr; align-items: stretch; min-height: 80vh; }
.ed-atelier__figure { margin: 0; overflow: hidden; }
.ed-atelier__figure img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.2) contrast(1.06); }
.ed-atelier__text { padding: 100px 80px; display: flex; flex-direction: column; justify-content: center; background: var(--color-cream); }
.ed-atelier__title { font-family: var(--font-serif); font-weight: 300; font-size: clamp(36px, 4.5vw, 62px); color: var(--color-navy); line-height: 1.02; margin: 0 0 30px; }
.ed-atelier__title span { display: block; }
.ed-atelier__title em { display: block; font-style: italic; color: var(--color-gold); font-weight: 300; }
.ed-atelier__lead { font-family: var(--font-body); font-size: 17px; line-height: 1.75; color: #3a3a3a; max-width: 480px; margin: 0 0 32px; }
.ed-atelier__marquee { background: var(--color-navy); color: var(--color-gold); padding: 20px 0; overflow: hidden; border-top: 1px solid #ECE6DA; border-bottom: 1px solid #ECE6DA; }
.ed-atelier__marquee-track { display: flex; align-items: center; gap: 36px; white-space: nowrap; animation: edMarquee 38s linear infinite; }
.ed-atelier__marquee-text { font-family: var(--font-serif); font-style: italic; font-weight: 300; font-size: 32px; letter-spacing: .04em; }
.ed-atelier__marquee-sep { color: var(--color-gold); font-size: 14px; }
@keyframes edMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Credo */
.ed-credo { background: radial-gradient(ellipse at center top, rgba(201,168,76,.18) 0%, transparent 60%), linear-gradient(180deg, #14274a 0%, var(--color-navy) 100%); color: #fff; padding: 140px 60px; text-align: center; position: relative; overflow: hidden; }
.ed-credo::before, .ed-credo::after { content: ''; position: absolute; width: 1px; height: 80px; background: var(--color-gold); left: 50%; }
.ed-credo::before { top: 0; transform: translate(-50%, -40px); }
.ed-credo::after { bottom: 0; transform: translate(-50%, 40px); }
.ed-credo__inner { max-width: 900px; margin: 0 auto; }
.ed-credo__stack { font-family: var(--font-serif); font-weight: 300; font-size: clamp(48px, 7vw, 98px); line-height: .98; color: #fff; margin: 24px 0 32px; letter-spacing: -.01em; }
.ed-credo__stack span { display: block; }
.ed-credo__stack span:nth-child(2) { font-style: italic; color: var(--color-gold); }
.ed-credo__sub { font-family: var(--font-body); font-size: 16px; line-height: 1.75; color: rgba(255,255,255,.78); max-width: 560px; margin: 0 auto 40px; }

/* Responsive */
@media (max-width: 960px) {
    .ed-hero__inner { grid-template-columns: 1fr; }
    .ed-hero__text { padding: 70px 40px 60px 70px; }
    .ed-hero__meta { left: 70px; bottom: 24px; }
    .ed-hero__figure { min-height: 50vh; }
    .ed-manifesto { padding: 70px 0; }
    .ed-manifesto__inner { padding: 0 30px; }
    .ed-manifesto__body { column-count: 1; }
    .ed-values { padding: 70px 30px; }
    .ed-values__list { gap: 50px; }
    .ed-value, .ed-value--right { grid-template-columns: 1fr; direction: ltr; gap: 8px; text-align: center; }
    .ed-value__title::before { margin-left: auto; margin-right: auto; }
    .ed-value__body { margin-left: auto; margin-right: auto; }
    .ed-timeline { padding: 70px 0; }
    .ed-timeline__inner { padding: 0 30px; }
    .ed-timeline__body { grid-template-columns: 1fr; gap: 40px; }
    .ed-atelier__inner { grid-template-columns: 1fr; }
    .ed-atelier__figure { min-height: 40vh; }
    .ed-atelier__text { padding: 60px 30px; }
    .ed-credo { padding: 80px 30px; }
}
@media (max-width: 600px) {
    .ed-hero__text { padding: 56px 24px; }
    .ed-hero__meta { left: 24px; }
}

/* Editorial steps */
.ed-steps { background: #fff; padding: 110px 60px; }
.ed-steps__inner { max-width: 1180px; margin: 0 auto; }
.ed-steps__head { max-width: 640px; margin: 0 0 60px; }
.ed-steps__title { font-family: var(--font-serif); font-weight: 300; font-size: clamp(32px, 4vw, 50px); color: var(--color-navy); margin: 0 0 16px; line-height: 1.08; }
.ed-steps__intro { font-family: var(--font-body); font-size: 16px; line-height: 1.75; color: #555; margin: 0; }
.ed-steps__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 40px 50px; }
.ed-step { display: grid; grid-template-columns: 64px 1fr; gap: 20px; align-items: start; }
.ed-step__num {
    font-family: var(--font-serif); font-style: italic; font-weight: 300;
    font-size: 46px; line-height: 1; color: var(--color-gold);
    border-right: 1px solid rgba(201,168,76,.35); padding-right: 16px; text-align: right;
}
.ed-step__title { font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--color-navy); margin: 6px 0 10px; }
.ed-step__desc { font-family: var(--font-body); font-size: 14.5px; line-height: 1.7; color: #555; margin: 0; }

/* Video guide */
.ed-videos { background: var(--color-cream); padding: 110px 60px; border-top: 1px solid #ECE6DA; }
.ed-videos__inner { max-width: 1240px; margin: 0 auto; }
.ed-videos__head { max-width: 680px; margin: 0 0 50px; }
.ed-videos__title { font-family: var(--font-serif); font-weight: 300; font-size: clamp(32px, 4vw, 50px); color: var(--color-navy); margin: 0 0 16px; line-height: 1.08; }
.ed-videos__intro { font-family: var(--font-body); font-size: 16px; line-height: 1.75; color: #555; margin: 0; }
.ed-videos__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 32px; }
.ed-video { margin: 0; display: flex; flex-direction: column; }
.ed-video__caption { order: 1; margin-bottom: 12px; }
.ed-video__title { font-family: var(--font-sans); font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--color-navy); margin: 0 0 8px; }
.ed-video__desc { font-family: var(--font-body); font-size: 13.5px; line-height: 1.65; color: #666; margin: 0; }
.ed-video__trigger {
    order: 2; margin-top: auto; position: relative; width: 100%; aspect-ratio: 16/9;
    background: #000; border: 0; padding: 0; cursor: pointer; overflow: hidden;
}
.ed-video__trigger img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.ed-video__trigger:hover img { transform: scale(1.04); }
.ed-video__play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 56px; height: 56px; border-radius: 50%; background: rgba(204,0,0,.92);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 21px; box-shadow: 0 4px 18px rgba(0,0,0,.35);
}
@media (max-width: 960px) {
    .ed-steps { padding: 64px 30px; }
    .ed-videos { padding: 64px 30px; }
    .ed-steps__list { grid-template-columns: 1fr; gap: 30px; }
}

/* =========================================================================
   Gift card purchase page (/carte-cadeau)
   ========================================================================= */
/* Même famille que `.page-header` : dégradé, filet doré, mêmes proportions.
   La composition reste centrée — c'est une page d'offre, pas une page de
   rubrique — mais la typographie et les contrastes sont les mêmes. */
.gc-hero {
    background: linear-gradient(180deg, var(--color-navy) 0%, #14274a 100%);
    border-bottom: 1px solid rgba(201, 168, 76, 0.28);
    color: #fff; padding: 72px 24px 76px; text-align: center;
}
.gc-hero__inner { max-width: 680px; margin: 0 auto; }
.gc-eyebrow {
    font-family: var(--font-sans); font-size: var(--eyebrow-size); font-weight: 700;
    letter-spacing: .3em; text-transform: uppercase; color: var(--color-gold); margin: 0 0 14px;
}
/* Le H1 du cahier des charges est une phrase entière, plus seulement
   « Offrez le sur-mesure » : à 54px il occupait quatre lignes d'écran. */
.gc-title {
    font-family: var(--font-serif); font-weight: 300; font-size: clamp(28px, 3.6vw, 40px);
    margin: 0 0 16px; color: #fff; line-height: 1.15;
}
.gc-title em { font-style: italic; color: var(--color-gold); }
.gc-lead {
    font-size: 1.0625rem; line-height: 1.7;
    color: rgba(255, 255, 255, 0.82);
    max-width: 60ch; margin: 0 auto;
}

.gc-page {
    max-width: 1120px; margin: 0 auto; padding: 56px 24px 80px;
    display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 40px; align-items: start;
}
.gc-form { background: #fff; border: 1px solid var(--color-border, #E0DBD0); border-radius: 6px; padding: 28px; }
.gc-block { padding: 0 0 26px; margin-bottom: 26px; border-bottom: 1px solid #f0ece4; }
.gc-block:last-of-type { border-bottom: 0; margin-bottom: 0; }
.gc-block__title {
    display: flex; align-items: center; gap: 12px;
    font-family: var(--font-sans); font-size: 12px; font-weight: 700;
    letter-spacing: .15em; text-transform: uppercase; color: var(--color-navy); margin: 0 0 20px;
}
.gc-num {
    width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--color-navy);
    display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
}
.gc-amounts { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.gc-amount { position: relative; cursor: pointer; }
.gc-amount input { position: absolute; opacity: 0; pointer-events: none; }
.gc-amount span {
    display: block; padding: 13px 22px; border: 1.5px solid var(--color-border, #E0DBD0);
    border-radius: 3px; font-family: var(--font-sans); font-size: 14px; font-weight: 600;
    color: var(--color-navy); background: #fff; transition: all .15s ease;
}
.gc-amount:hover span { border-color: var(--color-navy); }
.gc-amount input:checked + span {
    background: var(--color-gold); border-color: var(--color-gold); color: #fff;
}
.gc-field { margin-bottom: 16px; }
.gc-field label {
    display: block; font-family: var(--font-sans); font-size: 11.5px; font-weight: 600;
    letter-spacing: .06em; color: #555; margin-bottom: 6px;
}
.gc-field input, .gc-field textarea {
    width: 100%; padding: 11px 14px; border: 1px solid var(--color-border, #E0DBD0);
    border-radius: 3px; font-family: var(--font-body); font-size: 14px; color: #1a1a1a;
    background: #fff; outline: none; transition: border-color .15s ease;
}
.gc-field input:focus, .gc-field textarea:focus { border-color: var(--color-navy); }
.gc-field--inline input { max-width: 200px; }
.gc-hint { display: block; font-size: 11.5px; color: #999; margin-top: 5px; }
.gc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 18px; }
.gc-errors {
    background: #fdecea; border: 1px solid #f5c6c2; color: #a02b21;
    padding: 14px 18px; border-radius: 4px; margin-bottom: 22px; font-size: 13px;
}
.gc-errors ul { margin: 8px 0 0; padding-left: 18px; }
.gc-actions { margin-top: 26px; }
.gc-submit {
    width: 100%; padding: 17px; background: var(--color-gold); color: #fff; border: 0;
    border-radius: 2px; font-family: var(--font-sans); font-size: 12.5px; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase; cursor: pointer; transition: background .15s ease;
}
.gc-submit:hover { background: #b59440; }
.gc-legal { font-size: 11.5px; color: #999; text-align: center; margin: 14px 0 0; }

.gc-side { position: sticky; top: 100px; }
.gc-preview__card {
    background: linear-gradient(145deg, var(--color-navy) 0%, #14274a 100%);
    border-radius: 8px; padding: 30px 24px; text-align: center; color: #fff;
    box-shadow: 0 12px 32px rgba(27,58,107,.22);
}
.gc-preview__brand { font-family: var(--font-serif); font-size: 20px; margin: 0 0 4px; }
.gc-preview__brand span { color: var(--color-gold); }
.gc-preview__label {
    font-family: var(--font-sans); font-size: 9.5px; letter-spacing: .25em;
    text-transform: uppercase; color: rgba(255,255,255,.55); margin: 0 0 20px;
}
.gc-preview__amount {
    font-family: var(--font-serif); font-size: 40px; font-weight: 300;
    color: var(--color-gold); margin: 0 0 18px; line-height: 1;
}
.gc-preview__code {
    font-family: monospace; font-size: 14px; letter-spacing: 3px;
    color: rgba(255,255,255,.45); margin: 0;
}
.gc-perks { list-style: none; margin: 24px 0 0; padding: 0; }
.gc-perks li {
    display: flex; gap: 10px; align-items: flex-start;
    font-family: var(--font-sans); font-size: 12.5px; color: #555; padding: 7px 0; line-height: 1.5;
}
.gc-perks li span { color: var(--color-gold); font-size: 11px; flex-shrink: 0; margin-top: 2px; }

@media (max-width: 900px) {
    .gc-page { grid-template-columns: 1fr; }
    .gc-side { position: static; order: -1; }
}

/* Customer order detail — tracking deep-link + invoice download */
.order-tracking__link {
    display: inline-block;
    margin-top: 8px;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--color-navy);
    text-decoration: none;
    border-bottom: 1px solid var(--color-gold);
    padding-bottom: 2px;
}
.order-tracking__link:hover { color: var(--color-gold); }

.order-invoice {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    margin-top: 18px; padding-top: 18px;
    border-top: 1px solid var(--color-border, #E0DBD0);
}
.order-invoice__label {
    font-family: var(--font-sans); font-size: 11px; font-weight: 700;
    letter-spacing: .15em; text-transform: uppercase; color: var(--color-navy); margin: 0 0 3px;
}
.order-invoice__hint { font-size: 12px; color: #888; margin: 0; }
.order-invoice__btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 20px; background: var(--color-navy); color: #fff;
    border-radius: 3px; text-decoration: none;
    font-family: var(--font-sans); font-size: 11.5px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    transition: background .15s ease;
}
.order-invoice__btn:hover { background: #142d54; color: #fff; }

/* Rangées de boutons d'appel : dès qu'elles s'empilent, les boutons prennent la
   même largeur.
   Sans cela chacun garde celle de son libellé, et la colonne paraît bancale sur
   téléphone et tablette — « Lancer le configurateur » plus étroit que
   « Découvrir nos modèles », alors qu'ils sont l'un sous l'autre. Le défaut ne
   se voit jamais sur un large écran, où les boutons restent côte à côte. */
@media (max-width: 768px) {
    .hero-ctas,
    .ed-hero__ctas,
    .brand-page .brand-hero__ctas,
    .model-detail-ctas,
    .btn-row {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Bloc de réassurance sous le configurateur : il explique le sur-mesure en
   ligne sans peser sur le parcours, qui reste au-dessus. */
.cfg-seo {
    background: var(--color-cream, #FAF8F4);
    border-top: 1px solid var(--color-border, #E0DBD0);
    padding: 56px 24px;
}
.cfg-seo__inner { max-width: 760px; margin: 0 auto; }
.cfg-seo__title,
.cfg-seo__subtitle {
    font-family: var(--font-serif);
    font-weight: 300;
    color: var(--color-navy);
    margin: 0 0 16px;
}
.cfg-seo__title { font-size: clamp(24px, 3vw, 32px); }
.cfg-seo__subtitle { font-size: clamp(19px, 2.2vw, 23px); margin-top: 32px; }
.cfg-seo p {
    font-family: var(--font-sans);
    font-size: .9375rem;
    line-height: 1.75;
    color: #4a4a4a;
    margin: 0 0 16px;
}
.cfg-seo a {
    color: var(--color-navy);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.cfg-seo a:hover { color: var(--color-gold); }

/* ── Intro éditoriale de La Revue ───────────────────────────────────────────
   Le hub n'affichait qu'une grille de vignettes : rien à indexer, aucun
   chemin vers les pages qui vendent. Même traitement typographique que le
   bloc de réassurance du configurateur. */
.journal-intro {
    max-width: 760px;
    padding: 56px 24px 0;
}
.journal-intro p {
    font-family: var(--font-sans);
    font-size: .9375rem;
    line-height: 1.75;
    color: #4a4a4a;
    margin: 0 0 16px;
}
.journal-intro__title {
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: clamp(19px, 2.2vw, 23px);
    color: var(--color-navy);
    margin: 32px 0 16px;
}
.journal-intro a {
    color: var(--color-navy);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.journal-intro a:hover { color: var(--color-gold); }

/* ── Carte cadeau : contenu éditorial sous le formulaire ────────────────────
   La page reste transactionnelle ; ce bloc se lit après, sans concurrencer
   le formulaire ni allonger le chemin d'achat. */
.gc-editorial {
    background: var(--color-cream, #FAF8F4);
    border-top: 1px solid var(--color-border, #E0DBD0);
    padding: 56px 24px;
}
.gc-editorial__inner { max-width: 760px; margin: 0 auto; }
.gc-editorial__title {
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: clamp(19px, 2.2vw, 23px);
    color: var(--color-navy);
    margin: 32px 0 12px;
}
.gc-editorial__title:first-child { margin-top: 0; }
.gc-editorial p {
    font-family: var(--font-sans);
    font-size: .9375rem;
    line-height: 1.75;
    color: #4a4a4a;
    margin: 0;
}
.gc-editorial a {
    color: var(--color-navy);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.gc-editorial a:hover { color: var(--color-gold); }

/* ── Contact : liens dans les motifs de contact ─────────────────────────────
   La carte est sur fond marine ; l'or y donne 4,93:1, contrairement au fond
   crème où il tombe à 2,15 (voir la note sur les mini-titres). */
.contact-info__item { line-height: 1.6; }
.contact-info__item a {
    color: var(--color-gold, #C9A84C);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.contact-info__item a:hover { color: #fff; }


/* Bouton « Voir tous les modèles » sous une liste dynamique. Centré, détaché
   de la grille : il conclut la section au lieu de rivaliser avec les cartes. */
.cms-dyn-more {
    display: flex;
    justify-content: center;
    margin-top: 36px;
}

/* Le héros de la carte cadeau est centré : son fil d'Ariane suit. */
.gc-hero .breadcrumb__list { justify-content: center; }
.gc-hero .breadcrumb { margin-bottom: 26px; }

/* ── Photo du récit de marque ───────────────────────────────────────────────
   Elle héritait de `.brand-img-placeholder` et `.home-brand__img-placeholder`,
   écrites pour la boîte à emoji affichée quand aucune image n'est choisie :
   `opacity: .25` sur fond marine — d'où le voile bleu —, une hauteur figée à
   440 px, une bordure et un `font-size` de 5rem qui n'a aucun sens sur une
   balise `img`.

   La photo occupe désormais toute la hauteur de la colonne de texte : les deux
   blocs partagent le même bord haut et le même bord bas. */
.brand-photo {
    width: 100%;
    height: 100%;
    min-height: 440px;
    object-fit: cover;
    display: block;
}

/* `stretch` et non `center` : centrée, la photo flottait au milieu d'une
   colonne de texte plus haute qu'elle. */
.section-brand .brand-grid { align-items: stretch; }

@media (max-width: 900px) {
    /* En colonne unique, une photo pleine hauteur écraserait le texte. */
    .brand-photo { min-height: 320px; height: auto; aspect-ratio: 4 / 3; }
}