/* =====================================================
   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. 15 px depuis la DA de novembre 2026 : écrits en
       phrases, plus en capitales, ils se lisent comme du texte. */
    --eyebrow-size: 0.9375rem;
    --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 === */
/* Titres en sans empattement, graisse 500, approche resserrée : la DA de
   l'accueil (novembre 2026, sur le modèle de lechemiseur.fr) étendue à tout le
   site. Le Cormorant reste chargé pour les quelques citations qui le
   demandent ; il ne fait plus les titres. */
h1, .h1 {
    font-family: var(--font-sans);
    font-size: clamp(2.25rem, 4.6vw, 4.25rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -.03em;
    color: var(--color-navy);
    text-wrap: balance;
}
h2, .h2 {
    font-family: var(--font-sans);
    font-size: clamp(1.625rem, 2.8vw, 2.75rem);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -.025em;
    color: var(--color-navy);
    text-wrap: balance;
}
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);
}
/* Mini-titre : un libellé discret, écrit comme une phrase. Les capitales
   dorées espacées « faisaient IA » (retour client, novembre 2026). */
.eyebrow {
    font-family: var(--font-sans);
    font-size: var(--eyebrow-size);
    font-weight: 500;
    letter-spacing: 0;
    color: var(--color-text-muted);
}
.text-muted { color: var(--color-text-muted); }

/* =====================================================
   _buttons.css
   ===================================================== */
/* === Buttons === */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0;
    padding: 13px 28px;
    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: #12294D; border-color: #12294D; color: #fff; }
/* « Doré » de nom seulement : le blanc sur l'or ne faisait que 2,3:1. Le
   bouton d'appel principal est marine, comme celui de l'accueil. */
.btn-gold { background: var(--color-navy); color: #fff; border-color: var(--color-navy); }
.btn-gold:hover { background: #12294D; border-color: #12294D; color: #fff; }
.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: 9px 20px; font-size: 0.8125rem; }
.btn-lg { padding: 16px 34px; font-size: 1rem; }

/* 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; }
/* Libellés écrits comme des phrases (DA de novembre 2026), plus en capitales
   espacées. */
.form-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0;
    color: #14213D;
    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);
    border-radius: 6px;
    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; }

/* ── En-tête de page ────────────────────────────────────────────────────────
   Commun à Modèles, fiches modèle, La Revue, articles, Contact, Panier et pages
   CMS (FAQ, CGV…). Sur le modèle des têtes de rubrique de l'accueil
   (novembre 2026) : fond clair, fil d'Ariane discret, un grand titre en sans
   empattement, la phrase d'accroche dessous. Plus de bandeau marine.

   Mesures conservées de la version précédente :
   1. Le texte du bandeau passe AA (4,5:1) sur son fond — vérifié par
      `PageHeaderStaysReadableTest`, qui calcule les contrastes déclarés ici.
   2. Le titre garde un interligne qui respire (les titres longs passent à la
      ligne : « Nos modèles de chemises sur mesure Homme & Femme »). */
/* Fond : celui de la page (pas d'aplat), pour que l'en-tête et le contenu
   ne forment qu'une seule surface. */
.page-header {
    position: relative;
    background: transparent;
    padding: clamp(36px, 4.4vw, 64px) 0 clamp(40px, 4.4vw, 64px);
    color: var(--hm-ink, #2A2A2A);
}

.page-header h1,
.page-header .h1 {
    max-width: 18ch;
    margin: 0 0 clamp(18px, 2vw, 28px);
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: clamp(2.25rem, 4.8vw, 4.5rem);
    line-height: 1.06;
    letter-spacing: -.035em;
    color: #14213D;
    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: clamp(28px, 3.6vw, 52px); }
.page-header .eyebrow    { margin-bottom: 12px; }

/* Chapô. `.catalogue-subtitle` et `.journal-header-sub` sont des alias. */
.page-header__lead,
.page-header .catalogue-subtitle,
.page-header .journal-header-sub {
    max-width: 52ch;
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.125rem;
    line-height: 1.65;
    color: #2A2A2A;
}

/* Entrée au chargement : le titre monte en place, la phrase suit.
   `backwards` et non `both` : l'état de départ ne vaut que pendant le délai —
   si l'animation ne démarre pas, l'en-tête reste entier. */
@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 {
        animation: pageHeaderRise .9s cubic-bezier(.2, .7, .1, 1) backwards;
    }
    .page-header .eyebrow    { animation-delay: .06s; }
    .page-header h1,
    .page-header .h1         { animation-delay: .12s; }
    .page-header__lead,
    .page-header .catalogue-subtitle,
    .page-header .journal-header-sub { animation-delay: .26s; }
}

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

@media (max-width: 768px) {
    .page-header h1 { max-width: none; font-size: clamp(2rem, 9vw, 2.75rem); }
    .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. */
/* Sur fond clair depuis la DA de novembre 2026 : en phrases, sans capitales
   espacées. #5F6368 sur blanc : 6,2:1. */
.breadcrumb {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0;
    color: #5F6368;
}
.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: #14213D; text-decoration: underline; text-underline-offset: 4px; }
.breadcrumb [aria-current="page"] { color: #14213D; }

/* 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(20, 33, 61, 0.3);
    transform: rotate(18deg);
}

/* Ancien balisage (fils d'Ariane hors bandeau, non encore migrés). */
.breadcrumb-sep {
    color: rgba(20, 33, 61, 0.4);
    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 {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
/* Petit drapeau français au bout de la signature « chemise sur-mesure
   française » (demande client du 10/11/2026). Posé en absolu : il ne prend
   aucune place dans l'en-tête, qui tient au pixel près entre 1200 et 1439 px
   (`TheHeaderFitsOnALaptopTest`). Positions en % de la largeur du logo : la
   signature finit à 85 % du dessin, sa ligne est centrée à 86 % de sa hauteur. */
.logo__flag {
    position: absolute;
    left: calc(85.2% + 4px);
    top: 86%;
    width: 10px;
    height: 7px;
    border-radius: 1px;
    background: linear-gradient(90deg, #002654 0 33.34%, #FFFFFF 33.34% 66.67%, #CE1126 66.67%);
    box-shadow: 0 0 0 .5px rgba(20, 33, 61, .35);
    transform: translateY(-50%);
    pointer-events: none;
}
.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 */

/* ⚠️ L'en-tête complet réclame 1435 px : logo 188 + menu 912 (huit entrées)
   + actions 191 + deux écarts de 32 + deux marges de 40. Le menu burger, lui,
   n'apparaissait qu'à 1024 px. Entre les deux, la barre débordait et TOUTE page
   du site affichait une barre de défilement horizontale — sur un portable
   1280 ou 1366, c'est-à-dire les tailles d'écran les plus répandues. Invisible
   sur un grand écran comme sur téléphone, donc exactement là où l'on ne teste
   pas (constaté le 08/10/2026).
   Palier intermédiaire : on resserre avant de basculer sur le menu, pour
   garder les huit entrées visibles le plus longtemps possible. */
@media (max-width: 1439px) {
    .header-inner { padding: 0 24px; gap: 20px; }
    .main-nav a, .nav-link { padding: 0 10px; }
    /* Les pictogrammes restent, leurs libellés partent : un panier et une
       silhouette se lisent sans texte, et c'est 84 px regagnés. */
    .header-action-btn span { display: none; }
    .header-actions { gap: 16px; }
}

@media (max-width: 1199px) {
    .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;
    /* Version dédiée au filigrane, et non le fichier de marque.
       Dans le vectoriel, les losanges rouge et marine sont PLEINS : ce sont
       deux losanges blancs posés par-dessus qui creusent les contours. Blanchir
       le fichier, ou en retirer ces blancs, donne dans les deux cas un losange
       plein — c'est le défaut qu'on a vu à l'écran.
       On part donc du rendu aplati, où les contours existent déjà comme pixels,
       et on remplace le blanc par de la transparence. Pas de `filter` : le
       fichier est déjà blanc. */
    background: url("/img/brand/empreinte-filigrane.png") 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;
}
/* Tunnel de commande : le bandeau d'étapes REMPLACE l'en-tête du site.

   Les quatre pages posent `page-checkout` sur le corps depuis l'origine, et
   aucune règle ne lui correspondait : la classe avait l'air de faire quelque
   chose et ne faisait rien. Le logo s'affichait donc deux fois, à cinquante
   pixels d'intervalle, avec la navigation complète au-dessus du tunnel.

   Retirer la navigation pendant le paiement est l'intention d'origine — le
   bandeau porte déjà le logo, cliquable vers l'accueil, et la mention du
   paiement sécurisé. C'est aussi l'usage : on n'offre pas de sortie à
   quelqu'un qui est en train de payer. */
body.page-checkout .site-header {
    display: none;
}

.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);
}
/* Bloc de texte posé directement sur la page (accueil, pages éditoriales),
   sans conteneur autour : il porte lui-même la marge latérale, sinon le texte
   touche les bords de l'écran sur téléphone. La largeur maximale s'élargit
   d'autant, pour garder la même ligne de lecture sur grand écran. */
main > .cms-block--richtext,
.cms-page-content--editorial > .cms-block--richtext {
    max-width: calc(780px + 80px);
    padding-left: 40px;
    padding-right: 40px;
}
@media (max-width: 768px) {
    main > .cms-block--richtext,
    .cms-page-content--editorial > .cms-block--richtext {
        padding-left: 20px;
        padding-right: 20px;
    }
}
.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;
}

/* ============================================================
   MODÈLE INDISPONIBLE  (tissu arrêté par le fournisseur)
   ------------------------------------------------------------
   ⚠ Distinct de `.stock-badge--out`, qui dit une rupture passagère d'une
   marchandise suivie. Ici le tissu n'existe plus au catalogue : le modèle
   reste visible mais n'est plus cliquable (la balise `<a>` devient `<div>`
   dans les gabarits — désactiver visuellement un lien le laisse cliquable
   au clavier).

   ⚠ Ces règles doivent rester APRÈS `.model-card:hover` (vers la ligne
   1166) : même spécificité, c'est l'ordre du fichier qui tranche. Remontées
   plus haut, la carte continuerait de se soulever et de zoomer au survol,
   c'est-à-dire de se comporter comme un lien.
   ============================================================ */
.model-unavailable {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    /* ⚠️ Indispensable : le visuel voisin porte `opacity: .8`, ce qui le promeut
       dans la couche des éléments positionnés. Venant APRÈS la bande dans le
       document, il la recouvrait — bande bleue délavée sous une photo
       translucide, illisible, alors que les styles calculés annonçaient du
       blanc sur marine. Vu en capture, jamais dans le DOM. */
    z-index: 1;
    margin: 0;
    padding: 9px 12px;
    background: var(--color-navy);
    color: #fff;                 /* 9,3:1 sur le marine */
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: center;
}

/* Hors d'un visuel (bloc liste, favoris) : pas de cadre où poser la bande. */
.model-unavailable--inline {
    position: static;
    display: inline-block;
    margin-top: 6px;
    padding: 4px 10px;
    border-radius: 2px;
    letter-spacing: 0.05em;
}

/* La carte ne se comporte plus comme un lien. */
.model-card--unavailable {
    cursor: default;
}
.model-card--unavailable:hover {
    box-shadow: none;
    transform: none;
}
.model-card--unavailable:hover .model-card-img img {
    transform: none;
}
/* Le visuel montre un tissu qu'on ne vend plus : il s'efface, sans que la
   couleur porte l'information à elle seule — la bande l'écrit. */
.model-card--unavailable .model-card-img img {
    filter: grayscale(0.85);
    opacity: 0.75;
}

/* Note sous le titre, dans le corps de la carte. */
.model-card-note {
    margin: 2px 0 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: #5A5247;
}

/* Fiche modèle : la bande se pose sur le grand visuel. */
.model-detail-image--unavailable {
    position: relative;
}
.model-detail-image--unavailable img {
    filter: grayscale(0.85);
    opacity: 0.8;
}
.model-detail-unavailable {
    margin: 0 0 4px;
    padding: 10px 14px;
    background: #F8E8BC;
    border-left: 4px solid #8A6E1E;
    color: #4A4034;              /* 8,5:1 sur le fond */
    font-size: 0.875rem;
    line-height: 1.6;
}

/* Le pictogramme de repli d'une carte sans photo, extrait du style en ligne :
   il est rendu tantôt en lien, tantôt en simple boîte. */
.model-card-img__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--color-cream-dark);
    font-size: 3rem;
}

/* ============================================================
   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;
    /* Les boutons touchaient la grille de vidéos qui les précède : rien ne les
       séparait du bloc « Aide en vidéo ». */
    margin-top: 28px;
    flex-wrap: wrap;
    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 ==== */
/* DA de novembre 2026 : à gauche, une photo de l'atelier et les coordonnées
   en grand ; à droite, le formulaire sur une carte blanche ; dessous, sur
   fond papier, les trois pages qui répondent déjà aux questions fréquentes. */
.contact-main { padding: clamp(8px, 1vw, 16px) 0 clamp(88px, 9vw, 128px); }
.contact-page__container {
    max-width: 1320px;
    /* Haut et bas seulement : `padding: 56px 0` effaçait la marge latérale
       de `.container-xl`, et le formulaire touchait les bords du téléphone. */
    padding-top: 0;
    padding-bottom: 0;
}
.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(40px, 6vw, 96px);
    align-items: start;
}

/* Coordonnées */
.contact-info { position: sticky; top: 96px; }
.contact-info__photo {
    margin: 0 0 clamp(28px, 3vw, 40px);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: 6px;
    background: #E7E2D8;
}
.contact-info__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.contact-info__title {
    margin: 0 0 8px;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: clamp(26px, 2.4vw, 34px);
    line-height: 1.15;
    letter-spacing: -.025em;
    color: #14213D;
}
.contact-channels { margin: 0 0 28px; }
.contact-channel {
    padding: 18px 0;
    border-bottom: 1px solid rgba(20, 33, 61, .14);
}
.contact-channel dd { margin: 0; }
.contact-info__label {
    margin: 0 0 4px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    color: #5F6368;
}
.contact-info__link {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: clamp(20px, 1.8vw, 26px);
    line-height: 1.25;
    letter-spacing: -.015em;
    color: #14213D;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.contact-info__link:hover { color: #14213D; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.contact-info__link:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 4px; }
.contact-info__text { margin: 0; font-family: var(--font-sans); font-size: 17px; font-weight: 500; color: #14213D; }
.contact-info__lead,
.contact-info__closing { margin: 0 0 12px; font-family: var(--font-body); font-size: 15px; line-height: 1.7; color: #5F6368; }

/* Formulaire */
.contact-form-card {
    padding: clamp(28px, 3.4vw, 48px);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(20, 33, 61, .04), 0 12px 40px rgba(20, 33, 61, .06);
}
.contact-form-card .form-group { margin-bottom: 20px; }
.contact-form-card .form-control {
    min-height: 52px;
    padding: 14px 16px;
    border-color: #DDD8CE;
    font-size: 16px;
}
.contact-form-card textarea.form-control { min-height: 180px; resize: vertical; }
.contact-form-card .form-control:focus { border-color: #14213D; box-shadow: 0 0 0 3px rgba(20, 33, 61, .08); }
.contact-form-card .btn { min-height: 52px; padding: 14px 32px; }
.contact-form__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 16px;
}
.contact-form__group--mb-16,
.contact-form__group--mb-24 { margin-bottom: 20px; }
.contact-success {
    margin-bottom: 28px;
    padding: 24px 28px;
    border-left: 3px solid #2D7A4F;
    border-radius: 0 6px 6px 0;
    background: #edf7f0;
}
.contact-success__title { margin: 0; font-family: var(--font-sans); font-weight: 600; font-size: 18px; color: #2D7A4F; }
.contact-success__text { margin: 8px 0 0; font-size: 15px; color: #2A2A2A; }

/* ==== Contact — orientations avant écriture ====
   Trois colonnes à filet, comme les valeurs de La Marque : un numéro discret,
   un titre, une phrase, un lien fléché. */
.contact-help { padding: clamp(80px, 9vw, 128px) 0; background: #F6F4F0; }
.contact-help__head { margin-bottom: clamp(40px, 5vw, 72px); }
.contact-help__title {
    max-width: 16ch;
    margin: 0 0 clamp(16px, 2vw, 24px);
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: clamp(34px, 4.2vw, 64px);
    line-height: 1.04;
    letter-spacing: -.035em;
    color: #14213D;
}
.contact-help__lead { max-width: 48ch; margin: 0; font-family: var(--font-body); font-size: 18px; line-height: 1.65; color: #2A2A2A; }
.contact-help__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 48px clamp(28px, 3vw, 48px);
}
/* Conteneur flex : tout texte y est enveloppé (`ContactControllerTest`). */
.contact-help__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-top: 22px;
    border-top: 1px solid rgba(20, 33, 61, .18);
}
.contact-help__num { margin-bottom: clamp(16px, 2vw, 32px); font-family: var(--font-sans); font-size: 15px; font-weight: 500; color: #5F6368; }
.contact-help__card-title { margin: 0; font-family: var(--font-sans); font-weight: 600; font-size: clamp(20px, 1.8vw, 24px); line-height: 1.25; letter-spacing: -.02em; color: #14213D; }
.contact-help__card-text { flex: 1; margin: 0 0 8px; font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: #2A2A2A; }
.contact-help__link { white-space: nowrap; }

@media (max-width: 1024px) {
    .contact-layout { grid-template-columns: minmax(0, 1fr); }
    .contact-info { position: static; }
    .contact-info__photo { aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
    .contact-form__row { grid-template-columns: minmax(0, 1fr); }
    .contact-form-card { padding: 24px 20px; }
    .contact-help__lead { font-size: 16px; }
}

/* ==== 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));
    /* Sur téléphone, `100vh` compte la place de la barre d'adresse repliée :
       la barre du bas passait sous la barre d'outils du navigateur. */
    height: calc(100dvh - 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 */
}
/* Récapitulatif : plus de barre latérale, la colonne unique prend tout.
   ⚠️ Écrit avec DEUX classes, à dessein. Les media queries de fin de feuille
   redéfinissent `.cfg-layout { grid-template-columns: 220px 1fr }` sous
   1100 px ; à spécificité égale, la dernière règle l'emporte, et le
   récapitulatif se retrouvait dans la colonne de 220 px prévue pour la barre
   latérale — le tableau des choix réduit à 2 px de large, la page presque
   vide. Invisible sur un grand écran et sur mobile, visible sur un portable
   ou une tablette, exactement là où on ne teste pas. */
.cfg-layout.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: var(--font-sans);
    font-size: 80px; font-weight: 300;
    color: rgba(27,58,107,.07);
    line-height: 1; margin: 0 0 -18px;
}
/* Titres d'étape : la typographie du reste du site (DA de novembre 2026). */
.cfg-step-h {
    font-family: var(--font-sans);
    font-size: 30px; font-weight: 500; letter-spacing: -.025em; line-height: 1.12;
    color: var(--color-navy);
    margin: 0 0 8px;
}
.cfg-step-h--lg { font-size: clamp(30px, 3vw, 40px); }
.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: var(--font-sans); 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-sans);
    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: var(--font-sans);
    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. Barre de navigation ancrée au bas de l'ÉCRAN ──
   ⚠️ `position: sticky` ne tenait pas : `.cfg-app` porte `overflow: hidden`,
   ce qui en fait le conteneur de défilement de la barre. Elle collait donc au
   bas de l'APPLICATION, pas de la fenêtre — et comme la page continue sous le
   configurateur (texte de réassurance, puis pied de page), le premier
   défilement emportait la barre hors de l'écran avec le bouton
   « Étape suivante ». Sur une page où chaque étape se franchit par ce bouton,
   c'est le parcours d'achat qui s'interrompt (constaté par le client le
   08/10/2026). `fixed` est le seul moyen de sortir de ce conteneur.
   La place à lui réserver est sa hauteur réelle, republiée dans
   `--cfg-bottom-h` par `cfg_bottom_bar_controller.js` : elle change avec la
   phrase « il reste à choisir… », la langue et les trois rangées du
   téléphone. Le repli couvre le rendu avant que le script ne réponde. */
.cfg-app { padding-bottom: var(--cfg-bottom-h, 70px); }
.cfg-main { padding-bottom: 90px; }
.cfg-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 30;
    box-shadow: 0 -4px 16px rgba(27,58,107,.08);
}
/* Rien ne doit finir caché derrière la barre : ni la fin du texte sous le
   configurateur, ni le pied de page. */
body.page-configurateur { padding-bottom: var(--cfg-bottom-h, 70px); }

/* ── 1 bis. Barres du haut et du bas, téléphone ──
   La barre du bas alignait sur une seule rangée « Retour », les dix points
   d'avancement et « Étape suivante » : à 375 px le bouton de droite sortait de
   l'écran au récapitulatif (« VALIDER » coupé), et la phrase « Choisissez
   votre col pour continuer » faisait descendre le bouton plus bas que
   « Retour ». Trois rangées fixes : points, consigne, puis les deux boutons
   côte à côte, de même hauteur. `.cfg-next` s'efface (`display: contents`)
   pour que sa consigne et son bouton se rangent dans la grille. */
@media (max-width: 720px) {
    .cfg-topbar { padding: 0 16px; gap: 12px; }
    .cfg-breadcrumb { display: none; }
    .cfg-reset-btn { padding: 6px 10px; letter-spacing: .06em; }

    .cfg-main { padding-bottom: 32px; }
    .cfg-bottom {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        grid-template-areas:
            "dots dots"
            "hint hint"
            "prev next";
        column-gap: 10px;
        row-gap: 8px;
        align-items: stretch;
        padding: 10px 16px 12px;
    }
    .cfg-bottom > .cfg-dots { grid-area: dots; justify-content: center; }
    .cfg-bottom .cfg-next { display: contents; }
    .cfg-bottom .cfg-next-hint { grid-area: hint; text-align: center; font-size: 12px; }
    .cfg-bottom > .btn-outline { grid-area: prev; }
    .cfg-bottom .cfg-next > .btn,
    .cfg-bottom > .btn-gold { grid-area: next; }
    .cfg-bottom .btn {
        width: 100%;
        min-width: 0;
        min-height: 48px;
        padding: 12px 10px;
        white-space: normal;
        line-height: 1.3;
        letter-spacing: .08em;
        text-align: center;
        justify-content: center;
    }
}

/* ── 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: var(--font-sans);
    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: var(--font-sans);
    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: var(--font-sans);
    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) */
/* Titre de famille au-dessus d'une grille d'options (boutons : nacres,
   synthétiques, naturels). Discret : il sépare, il ne concurrence pas le
   titre de l'étape. */
.cfg-opt-family {
    margin: 26px 0 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-navy);
}
.cfg-opt-family:first-of-type { margin-top: 4px; }

.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-sans);
    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-sans);
    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-sans);
    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-sans);
    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-sans);
    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-sans);
    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-sans);
    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-sans);
    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-sans);
    font-size: 120px;
    line-height: .8;
    color: var(--brand-gold);
    margin: 0 0 -20px;
}
.brand-page .brand-quote__body {
    font-family: var(--font-sans);
    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-sans);
    font-size: 14px;
    color: var(--brand-gold);
    letter-spacing: .3em;
    display: block;
    margin-bottom: 12px;
}
.brand-page .brand-value__t {
    font-family: var(--font-sans);
    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-sans);
    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-sans);
    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-sans);
    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; }
}

/* Blocs éditoriaux (`ed-*` : La Marque, Excellence, Prise de mesures) : leur
   dessin vit dans la section « DA du site (novembre 2026) », plus bas. */

/* =========================================================================
   Gift card purchase page (/carte-cadeau)
   DA de novembre 2026 : l'en-tête des autres pages ; le formulaire en deux
   étapes, sans boîte ; la carte en aperçu — le visuel de la page — qui reste
   à l'écran pendant qu'on le remplit ; les textes de fond sur papier, en deux
   colonnes.
   ========================================================================= */
.page-header .gc-title {
    max-width: 18ch;
    margin: 0 0 clamp(18px, 2vw, 28px);
    font-family: var(--font-sans); font-weight: 500; font-size: clamp(34px, 4.4vw, 68px);
    letter-spacing: -.035em; color: #14213D; line-height: 1.05;
    text-wrap: balance;
}
.gc-title em { font-style: normal; color: inherit; }
.gc-lead { max-width: 48ch; margin: 0; font-family: var(--font-body); font-size: 1.125rem; line-height: 1.65; color: #2A2A2A; }

.gc-page {
    box-sizing: border-box;
    max-width: 1320px; margin: 0 auto;
    padding: clamp(24px, 3vw, 48px) clamp(20px, 4vw, 56px) clamp(88px, 9vw, 128px);
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(40px, 6vw, 96px); align-items: start;
}
.gc-form { padding: 0; border: 0; background: none; }
.gc-block { padding: 0 0 clamp(32px, 4vw, 48px); margin-bottom: clamp(32px, 4vw, 48px); border-bottom: 1px solid rgba(20, 33, 61, .14); }
.gc-block:last-of-type { border-bottom: 0; margin-bottom: 0; }
.gc-block__title {
    display: flex; align-items: baseline; gap: 14px;
    margin: 0 0 24px;
    font-family: var(--font-sans); font-size: clamp(22px, 2vw, 28px); font-weight: 500;
    letter-spacing: -.025em; color: #14213D;
}
.gc-num { font-size: 15px; font-weight: 500; letter-spacing: 0; color: #5F6368; }

.gc-amounts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; }
.gc-amount { position: relative; cursor: pointer; }
.gc-amount input { position: absolute; opacity: 0; pointer-events: none; }
.gc-amount span {
    display: flex; align-items: center; justify-content: center;
    min-height: 56px; padding: 12px 16px;
    border: 1.5px solid #DDD8CE; border-radius: 999px; background: #fff;
    font-family: var(--font-sans); font-size: 16px; font-weight: 600; color: #14213D;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.gc-amount:hover span { border-color: #14213D; }
.gc-amount input:checked + span { background: #14213D; border-color: #14213D; color: #fff; }
.gc-amount input:focus-visible + span { outline: 2px solid var(--color-gold); outline-offset: 3px; }

.gc-field { margin-bottom: 20px; }
.gc-field label {
    display: block; margin-bottom: 8px;
    font-family: var(--font-sans); font-size: 14px; font-weight: 500; letter-spacing: 0; color: #14213D;
}
.gc-field input, .gc-field textarea {
    box-sizing: border-box; width: 100%; min-height: 52px; padding: 14px 16px;
    border: 1px solid #DDD8CE; border-radius: 6px; background: #fff;
    font-family: var(--font-body); font-size: 16px; color: #1a1a1a;
    outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.gc-field textarea { min-height: 140px; resize: vertical; }
.gc-field input:focus, .gc-field textarea:focus { border-color: #14213D; box-shadow: 0 0 0 3px rgba(20, 33, 61, .08); }
.gc-field--inline input { max-width: 240px; }
.gc-hint { display: block; margin-top: 6px; font-size: 13px; color: #5F6368; }
/* Avertissement de montant hors bornes, sous le champ libre. Le texte PORTE
   l'information : la couleur ne fait que la souligner. Reprend le rouge des
   erreurs du formulaire (#a02b21, 6,5:1 sur le fond clair) pour qu'un
   avertissement et un refus se ressemblent. */
.gc-warning {
    display: block;
    margin: 8px 0 0;
    padding: 10px 12px;
    border-left: 3px solid #a02b21;
    border-radius: 0 6px 6px 0;
    background: #fdecea;
    color: #a02b21;
    font-size: 14px;
    line-height: 1.5;
}
.gc-warning[hidden] { display: none; }
.gc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 0 16px; }
.gc-errors {
    margin-bottom: 28px; padding: 16px 20px;
    border-left: 3px solid #a02b21; border-radius: 0 6px 6px 0;
    background: #fdecea; color: #a02b21; font-size: 15px;
}
.gc-errors ul { margin: 8px 0 0; padding-left: 18px; }
.gc-actions { margin-top: 32px; }
.gc-submit {
    width: 100%; min-height: 58px; padding: 16px 28px;
    border: 0; border-radius: 999px; background: #14213D; color: #fff;
    font-family: var(--font-sans); font-size: 16px; font-weight: 600; letter-spacing: 0;
    cursor: pointer; transition: background-color .2s ease;
}
.gc-submit:hover { background: #22325A; }
.gc-submit:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 4px; }
.gc-legal { margin: 14px 0 0; font-size: 13px; color: #5F6368; text-align: center; }

/* La carte, en aperçu : au format d'une carte bancaire, une étoffe marine
   (sergé discret, comme l'en-tête d'autrefois), le montant en grand. */
.gc-side { position: sticky; top: 100px; }
.gc-preview__card {
    position: relative;
    overflow: hidden;
    display: flex; flex-direction: column;
    aspect-ratio: 1.586;
    padding: clamp(22px, 2.4vw, 32px);
    border-radius: 16px;
    background:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 6px),
        radial-gradient(120% 90% at 85% 0%, rgba(93, 130, 190, .35) 0%, transparent 60%),
        linear-gradient(160deg, #1B3A6B 0%, #14213D 100%);
    color: #fff; text-align: left;
    box-shadow: 0 24px 60px rgba(20, 33, 61, .28);
}
.gc-preview__brand { margin: 0; font-family: var(--font-sans); font-size: 18px; font-weight: 600; letter-spacing: .01em; }
.gc-preview__label { margin: 4px 0 0; font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .72); }
.gc-preview__amount {
    margin: auto 0 6px;
    font-family: var(--font-sans); font-size: clamp(40px, 4.4vw, 60px); font-weight: 500;
    letter-spacing: -.035em; line-height: 1; color: #fff;
}
.gc-preview__code { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; letter-spacing: .18em; color: rgba(255, 255, 255, .6); }
.gc-perks { margin: 32px 0 0; padding: 0; list-style: none; }
.gc-perks li {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 14px 0; border-top: 1px solid rgba(20, 33, 61, .12);
    font-family: var(--font-sans); font-size: 15px; font-weight: 500; line-height: 1.45; color: #14213D;
}
.gc-perks li:last-child { border-bottom: 1px solid rgba(20, 33, 61, .12); }
.gc-perks__icon { flex: none; margin-top: 2px; color: #14213D; }

/* Textes de fond : sous le formulaire, jamais autour (cahier des charges). */
.gc-editorial { padding: clamp(80px, 9vw, 128px) 0; background: #F6F4F0; }
.gc-editorial__inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(40px, 5vw, 64px) clamp(40px, 6vw, 96px);
    max-width: 1320px;
}
.gc-editorial__item { padding-top: 22px; border-top: 1px solid rgba(20, 33, 61, .18); }
.gc-editorial__title {
    margin: 0 0 14px;
    font-family: var(--font-sans); font-weight: 600; font-size: clamp(20px, 1.8vw, 24px);
    line-height: 1.25; letter-spacing: -.02em; color: #14213D;
}
.gc-editorial p { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.75; color: #2A2A2A; }
.gc-editorial a { color: #14213D; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.gc-editorial a:hover { color: #14213D; text-underline-offset: 2px; }

@media (max-width: 1024px) {
    .gc-page { grid-template-columns: minmax(0, 1fr); }
    /* La carte d'abord : on voit ce qu'on offre avant de remplir. */
    .gc-side { position: static; order: -1; max-width: 460px; }
}
@media (max-width: 640px) {
    .gc-amounts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gc-editorial__inner { grid-template-columns: minmax(0, 1fr); }
    .gc-lead { font-size: 1rem; }
}

/* 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; }

/* =========================================================================
   Accueil — refonte (novembre 2026). Préfixe `hm-`.

   Sur le modèle demandé par le client (lechemiseur.fr) : couverture plein
   écran sous un en-tête transparent, titres en sans empattement et en phrases
   (jamais en capitales espacées), boutons arrondis, fonds blancs. AUCUN
   mini-titre au-dessus d'un titre, AUCUN bandeau de chiffres : les chiffres
   se lisent dans les phrases.

   Ces classes ne vivent que dans les gabarits des blocs de l'accueil
   (`templates/cms/blocks/`), jamais sous une enveloppe de page : l'aperçu du
   back-office rend les blocs sans elle, et doit montrer la même chose.

   ⚠️ Animations : tout état de départ (opacité, décalage, rideau) est écrit
   SOUS `.hm--motion`, classe posée par `reveal_controller` seulement si le
   navigateur peint et que le visiteur n'a pas demandé à réduire les
   animations. Sans elle, la page est entière. Ne jamais écrire un état caché
   hors de ce préfixe : une panne de script ferait disparaître du contenu.
   ========================================================================= */
:root {
    --hm-ink: #2A2A2A;
    --hm-muted: #5F6368;
    --hm-paper: #F6F4F0;
    --hm-title: #14213D;
    --hm-ease: cubic-bezier(.2, .7, .1, 1);
}

.hm-wrap {
    box-sizing: border-box;
    width: 100%;
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(20px, 4vw, 56px);
    padding-right: clamp(20px, 4vw, 56px);
}

/* ── En-tête de l'accueil : transparent sur la couverture ────────────────────
   `is-overlay` n'est posée QUE par home_header_controller : sans script,
   l'en-tête reste blanc, donc lisible une fois la photo dépassée. */
body.page-home .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transition: background-color .35s var(--hm-ease), border-color .35s var(--hm-ease), box-shadow .35s var(--hm-ease);
}
.logo .logo__img--light { display: none; }
.site-header.is-overlay {
    background: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
}
.site-header.is-overlay .logo .logo__img--dark { display: none; }
.site-header.is-overlay .logo .logo__img--light { display: block; }
.site-header.is-overlay .main-nav a,
.site-header.is-overlay .header-action-btn,
.site-header.is-overlay .lang-btn { color: #fff; }
.site-header.is-overlay .main-nav a:hover,
.site-header.is-overlay .main-nav a.active { color: #fff; border-bottom-color: #fff; }
.site-header.is-overlay .header-action-btn svg { stroke: #fff; }
.site-header.is-overlay .header-action-btn:hover svg { stroke: #fff; }
.site-header.is-overlay .lang-btn { border-color: rgba(255, 255, 255, .55); }
.site-header.is-overlay .lang-btn:hover { border-color: #fff; color: #fff; }
.site-header.is-overlay .nav-burger span { background: #fff; }

/* ── Typographie commune ─────────────────────────────────────────────────── */
.hm-title {
    margin: 0 0 20px;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: clamp(30px, 3.2vw, 46px);
    line-height: 1.12;
    letter-spacing: -.02em;
    color: var(--hm-title);
    text-wrap: balance;
}
.hm-title em { font-style: normal; }

.hm-lead {
    max-width: 46ch;
    margin: 0 0 32px;
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.7;
    color: var(--hm-ink);
}

/* Bouton arrondi : l'appel principal. Les appels « voir tout » sont des liens
   fléchés (`.hm-arrow`). Même forme que les boutons du reste du site (`.btn`,
   plus bas). */
.hm-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 14px 28px;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    transition: background-color .3s var(--hm-ease), color .3s var(--hm-ease);
}
.hm-pill--light { background: #fff; color: var(--hm-title); }
.hm-pill--light:hover { background: #EFEBE3; color: var(--hm-title); }
.hm-pill--dark { background: var(--color-navy); color: #fff; }
.hm-pill--dark:hover { background: #12294D; color: #fff; }

.hm-link {
    display: inline-block;
    padding: 4px 0;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--hm-title);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 6px;
    transition: text-underline-offset .25s var(--hm-ease);
}
.hm-link:hover { text-underline-offset: 3px; }
.hm-link--light { color: #fff; }

.hm-pill:focus-visible,
.hm-link:focus-visible,
.hm-model__link:focus-visible,
.hm-story__link:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 4px;
}


/* ── 1. Couverture ───────────────────────────────────────────────────────── */
.hm-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    min-height: 100svh;
    overflow: hidden;
    background: linear-gradient(135deg, #10284D 0%, var(--color-navy) 100%);
    color: #fff;
}
.hm-hero--photo { background: #16171B; }
.hm-hero__media,
.hm-hero__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.hm-hero__media { z-index: -2; }
/* Recadrage par la droite : les personnages restent sur la droite de
   l'écran, la moitié gauche — sombre — porte le texte. */
.hm-hero__media img { object-fit: cover; object-position: 15% 30%; }
/* Voile léger : en haut pour l'en-tête, à gauche pour le titre, en bas pour
   la légende et le bouton. Le reste de la photo reste intact. */
.hm-hero--photo::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(10, 12, 16, .5) 0%, rgba(10, 12, 16, 0) 22%),
        linear-gradient(90deg, rgba(10, 12, 16, .62) 0%, rgba(10, 12, 16, .3) 40%, rgba(10, 12, 16, 0) 66%),
        linear-gradient(0deg, rgba(10, 12, 16, .55) 0%, rgba(10, 12, 16, 0) 26%);
}
.hm-hero__inner {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    padding-top: 120px;
    padding-bottom: 32px;
}
/* Le texte reste dans la moitié sombre de la photo : au-delà, la phrase
   passait sur la chemise blanche. */
.hm-hero__text { max-width: min(660px, 40vw); margin-top: auto; margin-bottom: auto; }
.hm-hero__title {
    margin: 0 0 18px;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: clamp(40px, 4.6vw, 76px);
    line-height: 1.04;
    letter-spacing: -.028em;
    color: #fff;
    text-wrap: balance;
}
.hm-hero__line { display: block; }
.hm-hero__lead {
    max-width: 44ch;
    margin: 0;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: clamp(17px, 1.35vw, 21px);
    line-height: 1.5;
    color: rgba(255, 255, 255, .94);
}
.hm-hero__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 32px;
}
.hm-hero__caption {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, .92);
}
.hm-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 28px;
    margin-left: auto;
}

/* Entrée de la couverture : en CSS seul, sans rien cacher qui dépende d'un
   script. Sous `.hm` (la page publique) seulement : dans le canevas du
   back-office, le bloc est redessiné à chaque retouche. */
@keyframes hm-settle { from { transform: scale(1.04); } to { transform: none; } }
@keyframes hm-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
    .hm .hm-hero__media img { animation: hm-settle 2.4s var(--hm-ease) both; }
    .hm .hm-hero__title,
    .hm .hm-hero__lead,
    .hm .hm-hero__foot { animation: hm-rise .9s var(--hm-ease) both; }
    .hm .hm-hero__title { animation-delay: .15s; }
    .hm .hm-hero__lead { animation-delay: .3s; }
    .hm .hm-hero__foot { animation-delay: .5s; }
}

/* ── Liseré d'engagements (bloc encore disponible, retiré de l'accueil) ──── */
.hm-ribbon { background: var(--hm-paper); }
.hm-ribbon__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 40px;
    margin: 0 auto;
    padding-top: 18px;
    padding-bottom: 18px;
    list-style: none;
}
.hm-ribbon__item { font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--hm-title); }

/* ── 2. Section « feature » : le nuancier ────────────────────────────────── */
.hm-split { padding: clamp(80px, 9vw, 128px) 0; background: #fff; }
.hm-split__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(40px, 6vw, 96px);
    align-items: center;
}
.hm-split__grid--reverse > .hm-split__text { order: 2; }
.hm-split__grid--solo { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
.hm-split__figure { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 4px; }
.hm-split__figure img { width: 100%; height: 100%; object-fit: cover; }

/* Une page de liasse d'échantillons : coupons aux bords crantés,
   référence dessous. */
.hm-swatches {
    margin: 0;
    padding: clamp(18px, 2.2vw, 32px);
    background: var(--hm-paper);
    border-radius: 4px;
}
.hm-swatches__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(14px, 1.6vw, 22px) clamp(10px, 1.3vw, 16px);
    margin: 0;
    padding: 0;
    list-style: none;
}
.hm-swatch { margin: 0; }
.hm-swatch__cloth {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #E7E2D8;
    /* Bords crantés, comme un coupon taillé aux ciseaux à cranter. Un
       navigateur sans masque montre un coupon droit : rien ne casse. */
    --hm-pinking: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 10px 51% repeat-x,
                  conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 10px 51% repeat-x;
    -webkit-mask: var(--hm-pinking);
            mask: var(--hm-pinking);
}
.hm-swatch__cloth img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--hm-ease);
}
.hm-swatch:hover .hm-swatch__cloth img { transform: scale(1.08); }
.hm-swatch__ref {
    display: block;
    margin-top: 8px;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--hm-muted);
}

/* ── 3. Têtes de rubrique : un grand titre, une phrase, un lien fléché ───
   Sur le modèle de la référence : le titre fait la section, en très grand,
   sur deux lignes ; la phrase et l'appel « voir tout » vont dessous. */
.hm-head { padding: clamp(88px, 9vw, 136px) 0 0; background: #fff; }
.hm-display {
    max-width: 13ch;
    margin: 0;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: clamp(40px, 5.4vw, 84px);
    line-height: 1.02;
    letter-spacing: -.035em;
    color: var(--hm-title);
    text-wrap: balance;
}
.hm-head__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    gap: 20px 40px;
    margin-top: clamp(24px, 3vw, 40px);
}
.hm-head__lead {
    grid-column: 1;
    max-width: 40ch;
    margin: 0;
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.6;
    color: var(--hm-ink);
}
.hm-head__row > .hm-arrow { grid-column: 2; justify-self: start; }
.hm-head__row > .hm-arrow:only-child { grid-column: 1; }
.hm-head--center .hm-head__inner { text-align: center; }
.hm-head--center .hm-display { margin-inline: auto; }
.hm-head--center .hm-head__row { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.hm-head--center .hm-head__row > * { grid-column: 1; justify-self: center; }

/* Lien fléché : les appels « voir tout ». La flèche avance au survol. */
.hm-arrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--hm-title);
    text-decoration: none;
}
.hm-arrow:hover { color: var(--hm-title); }
.hm-arrow__icon { flex: none; transition: transform .3s var(--hm-ease); }
.hm-arrow:hover .hm-arrow__icon,
a.hm-model__link:hover .hm-model__more .hm-arrow__icon { transform: translateX(4px); }
.hm-arrow:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 4px; }

/* ── 4. Rangées à faire glisser (modèles, Revue) ─────────────────────────
   La rangée part de la marge du site et file jusqu'au bord droit de l'écran :
   la carte coupée dit qu'il y a une suite. Défilement natif (scroll-snap),
   aucun script nécessaire pour faire glisser ; `hm_slider_controller.js`
   n'ajoute que la barre de progression et les flèches.
   `--hm-card-w` règle la largeur des cartes ; `--hm-img-ratio` (hauteur /
   largeur de la photo) place les flèches au milieu des photos. */
.hm-slider {
    --hm-g: clamp(20px, 4vw, 56px);
    --hm-edge: max(var(--hm-g), calc((100% - 1320px) / 2 + var(--hm-g)));
    position: relative;
}
.hm-slider__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--hm-card-w);
    column-gap: clamp(16px, 2vw, 28px);
    margin: 0;
    padding: 0 var(--hm-g) 0 var(--hm-edge);
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--hm-edge) var(--hm-g);
    scrollbar-width: none;
}
.hm-slider__track::-webkit-scrollbar { display: none; }
.hm-slider__track > * { scroll-snap-align: start; }
.hm-slider__foot {
    display: flex;
    align-items: center;
    gap: 24px 48px;
    margin-top: 40px;
}
.hm-slider__bar {
    position: relative;
    flex: 0 1 640px;
    height: 2px;
    overflow: hidden;
    background: #E4E2DE;
}
.hm-slider__thumb {
    position: absolute;
    inset: 0 auto 0 0;
    width: 30%;
    background: var(--hm-title);
}
.hm-slider__foot > .hm-arrow { margin-left: auto; }
.hm-slider__arrow {
    position: absolute;
    z-index: 2;
    top: calc(var(--hm-card-w) * var(--hm-img-ratio, 1.25) / 2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    color: var(--hm-title);
    box-shadow: 0 2px 14px rgba(0, 0, 0, .14);
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color .25s var(--hm-ease);
}
.hm-slider__arrow[hidden] { display: none; }
.hm-slider__arrow:hover { background: #fff; }
.hm-slider__arrow:disabled { visibility: hidden; }
.hm-slider__arrow--prev { left: calc(var(--hm-edge) - 24px); }
.hm-slider__arrow--next { right: 20px; }
.hm-slider__arrow:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; }

/* Modèles : photo, puis nom + prix à gauche et « Personnaliser → » à droite.
   Pas de description sous la carte (décision client du 09/11/2026). Chaque
   carte partage ses deux rangées avec ses voisines (`subgrid`) : un nom sur
   deux lignes repousse la rangée entière. */
.hm-models { padding: clamp(40px, 4vw, 56px) 0 clamp(88px, 9vw, 128px); background: #fff; }
.hm-slider--models { --hm-card-w: clamp(260px, 26vw, 420px); --hm-img-ratio: 1.25; }
.hm-models__grid { grid-template-rows: repeat(2, auto); row-gap: 0; }
.hm-model {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: 0;
    margin: 0;
}
.hm-model__link {
    display: grid;
    grid-row: 1 / -1;
    grid-template-rows: subgrid;
    row-gap: 0;
    color: inherit;
    text-decoration: none;
}
.hm-model__link:hover { color: inherit; }
.hm-model__img {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 6px;
    background: #F0EEEA;
}
.hm-model__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--hm-ease); }
a.hm-model__link:hover .hm-model__img img { transform: scale(1.03); }
.hm-model__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-top: 18px;
}
.hm-model__name {
    margin: 0;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 17px;
    line-height: 1.3;
    color: var(--hm-title);
}
.hm-model__meta { margin: 4px 0 0; font-family: var(--font-sans); font-size: 14px; color: var(--hm-muted); }
.hm-model__price { color: var(--hm-muted); }
.hm-model__more {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--hm-title);
}

/* ── 5. La maison ────────────────────────────────────────────────────────── */
/* Disposition « cover » (accueil) : la photo en plein écran, le titre en
   grand en haut à droite, le texte et le bouton en bas à gauche — comme les
   grandes sections photo de la référence. Texte blanc sur voile : la photo
   choisie doit être sombre. */
.hm-cover {
    position: relative;
    isolation: isolate;
    display: flex;
    min-height: min(100svh, 940px);
    overflow: hidden;
    background: #121212;
    color: #fff;
}
.hm-cover__media { position: absolute; inset: 0; z-index: -2; margin: 0; }
.hm-cover__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.hm-cover::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(8, 9, 12, .6) 0%, rgba(8, 9, 12, 0) 40%),
        linear-gradient(0deg, rgba(8, 9, 12, .82) 0%, rgba(8, 9, 12, .35) 36%, rgba(8, 9, 12, 0) 60%);
}
.hm-cover__inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 48px;
    padding-top: clamp(56px, 7vw, 104px);
    padding-bottom: clamp(48px, 6vw, 88px);
}
.hm-cover__title {
    align-self: flex-end;
    max-width: 13ch;
    margin: 0;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: clamp(40px, 5.4vw, 84px);
    line-height: 1.02;
    letter-spacing: -.035em;
    text-align: right;
    color: #fff;
    text-wrap: balance;
}
.hm-cover__body { max-width: 46ch; }
.hm-cover__para {
    margin: 0 0 12px;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    color: rgba(255, 255, 255, .92);
}
.hm-cover__cta { margin-top: 16px; }

/* Disposition « split » : la photo d'un côté, le texte de l'autre. */
.hm-atelier {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 600px;
    background: var(--hm-paper);
}
.hm-atelier--reverse .hm-atelier__figure { order: 2; }
.hm-atelier--text-only { grid-template-columns: minmax(0, 1fr); }
.hm-atelier--text-only .hm-atelier__text { margin: 0 auto; }
.hm-atelier__figure { position: relative; min-height: 420px; margin: 0; overflow: hidden; }
.hm-atelier__figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hm-atelier__text {
    align-self: center;
    justify-self: center;
    box-sizing: border-box;
    width: 100%;
    max-width: 680px;
    padding: clamp(56px, 7vw, 112px) clamp(24px, 6vw, 96px);
}
.hm-atelier__para {
    margin: 0 0 18px;
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.75;
    color: var(--hm-ink);
}
.hm-atelier__cta { margin: 28px 0 0; }

/* ── 6. La Revue : photo, date, titre ───────────────────────────────────── */
.hm-journal { padding: clamp(40px, 4vw, 56px) 0 clamp(88px, 9vw, 128px); background: #fff; }
.hm-slider--journal { --hm-card-w: clamp(280px, 30vw, 460px); --hm-img-ratio: .6667; }
.hm-story { margin: 0; }
.hm-story__link { display: block; color: inherit; text-decoration: none; }
.hm-story__link:hover { color: inherit; }
.hm-story__img {
    aspect-ratio: 3 / 2;
    margin-bottom: 18px;
    overflow: hidden;
    border-radius: 6px;
    background: var(--hm-paper);
}
.hm-story__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--hm-ease); }
.hm-story__link:hover .hm-story__img img { transform: scale(1.03); }
.hm-story__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 40px;
    color: rgba(27, 58, 107, .2);
}
.hm-story__date {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--hm-muted);
}
.hm-story__title {
    margin: 0;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 19px;
    line-height: 1.35;
    color: var(--hm-title);
}
.hm-story__link:hover .hm-story__title {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
}

/* ── 7. Le texte de fond, en bas de page ─────────────────────────────────── */
.hm-guide { padding: clamp(72px, 8vw, 112px) 0; background: var(--hm-paper); }
/* Avec photo : la photo à gauche (elle accompagne la lecture), le texte à
   droite. Sans photo : le premier titre à gauche, le texte à droite. Seul en
   colonne, le texte laissait la moitié de l'écran vide. */
.hm-guide__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(40px, 6vw, 96px);
    align-items: start;
}
.hm-guide:not(.hm-guide--photo) .hm-guide__grid { grid-template-columns: minmax(0, 1fr); }
/* Avec photo : le titre passe en grand au-dessus des deux colonnes, comme les
   têtes de rubrique. Le corps du texte s'efface (`display: contents`) pour que
   ses enfants se rangent dans la grille de la section — le contenu, lui, n'est
   pas réécrit. */
.hm-guide--photo .hm-guide__grid { row-gap: 0; }
.hm-guide--photo .hm-guide__body { display: contents; }
.hm-guide--photo .hm-guide__body > * { grid-column: 2; max-width: 640px; }
.hm-guide--photo .hm-guide__body > h2:first-child {
    grid-column: 1 / -1;
    grid-row: 1;
    max-width: 22ch;
    margin: 0 0 clamp(40px, 5vw, 72px);
    font-weight: 500;
    font-size: clamp(36px, 4.6vw, 72px);
    line-height: 1.04;
    letter-spacing: -.035em;
}
.hm-guide--photo .hm-guide__figure { grid-column: 1; grid-row: 2 / span 40; }
/* Dans le canevas du back-office, le texte reste un seul bloc modifiable. */
.em-wys.hm-guide--photo .hm-guide__body { display: block; grid-column: 2; grid-row: 2; }
.hm-guide__figure {
    position: sticky;
    top: 96px;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    border-radius: 4px;
    background: #E7E2D8;
}
.hm-guide__figure img { width: 100%; height: 100%; object-fit: cover; }
.hm-guide__body { max-width: 680px; }
.hm-guide:not(.hm-guide--photo) .hm-guide__body {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(40px, 6vw, 96px);
    max-width: none;
}
.hm-guide:not(.hm-guide--photo) .hm-guide__body > * { grid-column: 2; }
.hm-guide:not(.hm-guide--photo) .hm-guide__body > h2:first-child {
    grid-column: 1;
    grid-row: 1 / span 40;
    align-self: start;
    position: sticky;
    top: 96px;
}
.hm-guide__body > h2 {
    margin: 0 0 24px;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: clamp(26px, 2.6vw, 38px);
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--hm-title);
    text-wrap: balance;
}
.hm-guide__body > h3 {
    margin: 36px 0 12px;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 19px;
    line-height: 1.35;
    color: var(--hm-title);
}
.hm-guide__body > p {
    margin: 0 0 18px;
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.75;
    color: var(--hm-ink);
}
.hm-guide__body a {
    color: var(--hm-title);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

/* ── Entrées au défilement (sous `.hm--motion` uniquement) ───────────────── */
.hm--motion [data-reveal="stagger"] .hm-swatch,
.hm--motion [data-reveal="stagger"] .hm-model,
.hm--motion [data-reveal="stagger"] .hm-story {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .8s var(--hm-ease), transform .8s var(--hm-ease);
    transition-delay: calc(var(--i, 0) * 55ms);
}
.hm--motion [data-reveal="stagger"].is-in .hm-swatch,
.hm--motion [data-reveal="stagger"].is-in .hm-model,
.hm--motion [data-reveal="stagger"].is-in .hm-story {
    opacity: 1;
    transform: none;
}
/* Photos : un fondu court, la photo se pose (léger recul). Pas de rideau de
   haut en bas : la photo qui se découvrait ligne à ligne en 1,2 s ressemblait
   exactement à une image qui charge mal (retour client du 10/11/2026). */
.hm--motion [data-reveal="unveil"] img {
    opacity: 0;
    transform: scale(1.04);
    transition: opacity .6s var(--hm-ease), transform 1.4s var(--hm-ease);
}
.hm--motion [data-reveal="unveil"].is-in img { opacity: 1; transform: none; }
/* Titres de rubrique : ils montent en place. */
.hm--motion [data-reveal="rise"] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 1s var(--hm-ease), transform 1s var(--hm-ease);
}
.hm--motion [data-reveal="rise"].is-in { opacity: 1; transform: none; }
/* Photo plein écran : elle se pose (léger recul), puis le texte monte. */
.hm--motion [data-reveal="cover"] .hm-cover__media img {
    transform: scale(1.1);
    transition: transform 2.4s var(--hm-ease);
}
.hm--motion [data-reveal="cover"] .hm-cover__title,
.hm--motion [data-reveal="cover"] .hm-cover__body {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 1s var(--hm-ease), transform 1s var(--hm-ease);
}
.hm--motion [data-reveal="cover"] .hm-cover__body { transition-delay: .25s; }
.hm--motion [data-reveal="cover"].is-in .hm-cover__media img,
.hm--motion [data-reveal="cover"].is-in .hm-cover__title,
.hm--motion [data-reveal="cover"].is-in .hm-cover__body { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .hm-swatch__cloth img,
    .hm-model__img img,
    .hm-story__img img { transition: none; }
}
/* À l'impression, rien n'attend le défilement : une section jamais atteinte à
   l'écran serait sortie blanche sur le papier. */
@media print {
    .hm--motion [data-reveal="stagger"] .hm-swatch,
    .hm--motion [data-reveal="stagger"] .hm-model,
    .hm--motion [data-reveal="stagger"] .hm-story { opacity: 1; transform: none; }
    .hm--motion [data-reveal="unveil"] img { opacity: 1; transform: none; }
    .hm--motion [data-reveal="rise"],
    .hm--motion [data-reveal="cover"] .hm-cover__title,
    .hm--motion [data-reveal="cover"] .hm-cover__body { opacity: 1; transform: none; }
}

/* ── Tablette et téléphone ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .hm-split__grid,
    .hm-atelier { grid-template-columns: minmax(0, 1fr); }
    .hm-split__grid--reverse > .hm-split__text { order: 0; }
    .hm-atelier--reverse .hm-atelier__figure { order: 0; }
    .hm-atelier__figure { min-height: 0; aspect-ratio: 4 / 3; }
    .hm-guide__grid,
    .hm-guide:not(.hm-guide--photo) .hm-guide__body { grid-template-columns: minmax(0, 1fr); }
    .hm-guide__figure { position: static; aspect-ratio: 4 / 3; }
    .hm-guide__body { max-width: none; }
    .hm-guide:not(.hm-guide--photo) .hm-guide__body > * { grid-column: 1; }
    .hm-guide:not(.hm-guide--photo) .hm-guide__body > h2:first-child { grid-row: auto; position: static; }

    .hm-guide--photo .hm-guide__body > *,
    .hm-guide--photo .hm-guide__body > h2:first-child { grid-column: 1; grid-row: auto; max-width: none; }
    .hm-guide--photo .hm-guide__body > h2:first-child { order: -1; margin-bottom: 32px; }
    .hm-guide--photo .hm-guide__figure { grid-column: 1; grid-row: auto; margin-bottom: 32px; }

    .hm-slider--models { --hm-card-w: 42vw; }
    .hm-slider--journal { --hm-card-w: 46vw; }
    .hm-head__row { grid-template-columns: minmax(0, 1fr); }
    .hm-head__row > .hm-arrow { grid-column: 1; }
}
/* Téléphone et tablette tenue en portrait : la photo portrait (servie par
   les mêmes media que les <source> du gabarit) se lit en entier. */
@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
    .hm-hero { --hm-head-h: 60px; }
}
@media (max-width: 768px) {
    .hm-hero { --hm-head-h: 56px; }
}
@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
    /* Téléphone, sur le modèle de la référence : la photo commence SOUS
       l'en-tête et garde toute sa largeur — recadrée en hauteur, elle passait
       derrière le menu et coupait les têtes. Elle se fond ensuite dans l'aplat
       sombre de son propre bas.
       Titre, phrase et bouton sont centrés sous les chemises, la légende
       reste en bas à gauche.
       ⚠️ Plus haut, le texte tombe sur la chemise blanche. */
    .hm-hero--portrait { background: #0E0B07; }
    .hm-hero--portrait .hm-hero__media {
        inset: var(--hm-head-h) 0 auto;
        height: auto;
        -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
        mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
    }
    .hm-hero--portrait .hm-hero__media img {
        position: relative;
        inset: auto;
        display: block;
        height: auto;
    }
    .hm-hero--portrait::before {
        background: linear-gradient(180deg, rgba(14, 11, 7, 0) 0%, rgba(14, 11, 7, 0) 40%,
            rgba(14, 11, 7, .5) 54%, rgba(14, 11, 7, .82) 68%, rgba(14, 11, 7, .9) 100%);
    }
    /* Sans visuel portrait, la photo paysage reste en fond, voilée. */
    .hm-hero--photo:not(.hm-hero--portrait)::before {
        background: linear-gradient(0deg, rgba(10, 12, 16, .9) 0%, rgba(10, 12, 16, .6) 50%, rgba(10, 12, 16, .35) 100%);
    }
    .hm-hero__inner { padding-top: 96px; padding-bottom: 20px; }
    /* Le texte commence là où finissent les chemises (≈ 2/3 de la largeur de
       la photo portrait, sous l'en-tête). */
    .hm-hero--portrait .hm-hero__inner { padding-top: calc(var(--hm-head-h) + 64vw); }
    .hm-hero__text { max-width: none; margin: auto 0 0; text-align: center; }
    .hm-hero__title {
        margin-bottom: 12px;
        font-size: clamp(28px, 8.2vw, 38px);
        line-height: 1.12;
        letter-spacing: -.02em;
    }
    .hm-hero__lead { max-width: 34ch; margin-inline: auto; font-size: 16px; }
    /* Le pied se défait : bouton sous la phrase, légende tout en bas. */
    .hm-hero__foot { display: contents; }
    .hm-hero .hm-hero__ctas {
        order: 1;
        margin: 24px 0 0;
        flex-direction: column;
        align-items: center;
        gap: 14px;
    }
    .hm-hero__ctas .hm-pill { order: -1; min-width: 220px; padding: 13px 20px; font-size: 14px; }
    .hm-hero__ctas .hm-link { font-size: 14px; }
    .hm-hero__caption { order: 2; margin-top: auto; padding-top: 28px; font-size: 13px; }
}
@media (max-width: 760px) {
    .hm-pill { white-space: normal; }
    .hm-swatches__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hm-slider--models { --hm-card-w: 78vw; }
    .hm-slider--journal { --hm-card-w: 82vw; }
    .hm-slider__foot { flex-wrap: wrap; margin-top: 28px; }
    .hm-slider__bar { flex: 1 1 100%; }
    .hm-slider__foot > .hm-arrow { margin-left: 0; }
    /* Au doigt, les flèches gênent plus qu'elles n'aident : la barre suffit. */
    .hm-slider__arrow { display: none; }
    .hm-head__lead { font-size: 16px; }
    .hm-cover { min-height: 92svh; }
    .hm-cover__media img { object-position: 55% 30%; }
    .hm-cover::before {
        background:
            linear-gradient(180deg, rgba(8, 9, 12, .65) 0%, rgba(8, 9, 12, 0) 36%),
            linear-gradient(0deg, rgba(8, 9, 12, .9) 0%, rgba(8, 9, 12, .55) 45%, rgba(8, 9, 12, 0) 70%);
    }
    .hm-cover__title { align-self: flex-start; text-align: left; font-size: clamp(34px, 9.6vw, 44px); }
    .hm-cover__para { font-size: 15px; }
}

/* =========================================================================
   DA du site (novembre 2026) — la DA de l'accueil étendue aux autres pages.

   Mêmes règles que l'accueil : titres en sans empattement, graisse 500,
   approche resserrée, écrits en phrases ; fonds blancs et papier ; boutons
   arrondis, appels secondaires en liens fléchés ; photos aux coins adoucis ;
   entrées au défilement. Rien de doré, aucune capitale espacée.

   ⚠️ Le back-office reste branché : les blocs éditoriaux (`ed-*`) gardent
   EXACTEMENT leur balisage, leurs champs et leurs classes — seul leur dessin
   change, ici. Le canevas de l'éditeur (`public/editorjs/custom-blocks.js`)
   construit les mêmes classes et charge cette même feuille : son aperçu suit
   tout seul. Changer un nom de classe ici, c'est le changer aussi là-bas.

   Animations : les états de départ ne vivent que sous `.hm--motion` (posée
   par `reveal_controller`, désormais sur `<main>` de toutes les pages). Sans
   script, ou avec « réduire les animations », chaque page est entière.
   ========================================================================= */

/* ── Socle des blocs éditoriaux ─────────────────────────────────────────── */
.ed-hero__text,
.ed-atelier__text,
.ed-manifesto__inner,
.ed-values,
.ed-timeline__inner,
.ed-steps__inner,
.ed-videos__inner,
.ed-credo__inner { --hm-g: clamp(20px, 4vw, 56px); }

.ed-manifesto__inner,
.ed-timeline__inner,
.ed-steps__inner,
.ed-videos__inner,
.ed-credo__inner {
    box-sizing: border-box;
    width: 100%;
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--hm-g);
    padding-right: var(--hm-g);
}

/* Mini-titre : un libellé discret, écrit comme une phrase (le contenu en
   capitales est ramené en minuscules par `app:pages:apply-redesign`). */
.ed-eyebrow,
.ed-eyebrow--gold {
    margin: 0 0 18px;
    font-family: var(--font-sans);
    font-size: var(--eyebrow-size);
    font-weight: 500;
    letter-spacing: 0;
    color: var(--hm-muted);
}

/* Grand titre de section : le même que les têtes de rubrique de l'accueil. */
.ed-values__title,
.ed-timeline__title,
.ed-steps__title,
.ed-videos__title,
.ed-atelier__title {
    max-width: 16ch;
    margin: 0;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: clamp(36px, 4.6vw, 72px);
    line-height: 1.04;
    letter-spacing: -.035em;
    color: var(--hm-title);
    text-wrap: balance;
}
.ed-atelier__title span,
.ed-atelier__title em,
.ed-hero__title span,
.ed-hero__title em { display: inline; font-style: normal; color: inherit; font-weight: inherit; }

/* Boutons : la forme et la typographie de l'accueil. L'arrondi lui-même est
   posé plus bas, par la règle commune à tous les boutons du site. */
.ed-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 14px 28px;
    border: 1.5px solid transparent;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0;
    text-decoration: none;
    transition: background-color .3s var(--hm-ease), color .3s var(--hm-ease), border-color .3s var(--hm-ease);
}
.ed-btn--gold { background: var(--color-navy); border-color: var(--color-navy); color: #fff; }
.ed-btn--gold:hover { background: #12294D; border-color: #12294D; color: #fff; }
.ed-btn--ghost,
.ed-btn--outline-navy { background: transparent; border-color: var(--hm-title); color: var(--hm-title); }
.ed-btn--ghost:hover,
.ed-btn--outline-navy:hover { background: var(--hm-title); color: #fff; }
.ed-btn:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 4px; }

/* ── Couverture d'une page éditoriale ───────────────────────────────────── */
/* `container-type` : la marge du texte se calcule sur la largeur du BLOC
   (`cqw`), pas de la fenêtre — dans le canevas du back-office, plus étroit
   que l'écran, le texte gardait sinon une marge de pleine page. */
.ed-hero { position: relative; overflow: hidden; background: #fff; container-type: inline-size; }
.ed-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: min(calc(100svh - 72px), 880px);
}
/* Le texte s'aligne sur la marge du site, la photo file jusqu'au bord. */
.ed-hero__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(56px, 7vw, 112px) clamp(32px, 5vw, 88px) clamp(48px, 6vw, 96px) max(var(--hm-g), calc((100vw - 1320px) / 2 + var(--hm-g)));
    padding-left: max(var(--hm-g), calc((100cqw - 1320px) / 2 + var(--hm-g)));
}
.ed-hero__title {
    max-width: 14ch;
    margin: 0 0 clamp(20px, 2.4vw, 32px);
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: clamp(40px, 4.8vw, 80px);
    line-height: 1.02;
    letter-spacing: -.04em;
    color: var(--hm-title);
    text-wrap: balance;
}
.ed-hero__lead {
    max-width: 44ch;
    margin: 0 0 36px;
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.65;
    color: var(--hm-ink);
}
.ed-hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.ed-hero__meta {
    margin: clamp(40px, 5vw, 72px) 0 0;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--hm-muted);
}
.ed-hero__figure { position: relative; min-height: 420px; margin: 0; overflow: hidden; background: var(--hm-paper); }
.ed-hero__figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.ed-hero__figure figcaption {
    position: absolute;
    left: 24px;
    bottom: 24px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--hm-title);
}
/* Entrée au chargement, en CSS seul : la photo se pose, le texte monte.
   Sous `.cms-page-content--editorial` (la page publique) seulement — dans le
   canevas du back-office, le bloc est redessiné à chaque retouche. */
@media (prefers-reduced-motion: no-preference) {
    .cms-page-content--editorial .ed-hero__figure img { animation: hm-settle 2.4s var(--hm-ease) both; }
    .cms-page-content--editorial .ed-hero__text > * { animation: hm-rise .9s var(--hm-ease) both; }
    .cms-page-content--editorial .ed-hero__title { animation-delay: .1s; }
    .cms-page-content--editorial .ed-hero__lead { animation-delay: .22s; }
    .cms-page-content--editorial .ed-hero__ctas { animation-delay: .34s; }
    .cms-page-content--editorial .ed-hero__meta { animation-delay: .46s; }
}

/* ── Manifeste : une grande phrase, puis la citation à gauche (elle reste en
   place pendant la lecture) et le texte à droite ────────────────────────── */
.ed-manifesto { padding: clamp(88px, 9vw, 136px) 0; background: #fff; border: 0; }
.ed-manifesto__eyebrow { margin-bottom: 28px; }
.ed-manifesto__body {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(40px, 6vw, 96px);
    align-items: start;
}
.ed-manifesto__body > * { grid-column: 2; max-width: 640px; }
.ed-manifesto__para {
    margin: 0 0 20px;
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.75;
    color: var(--hm-ink);
    break-inside: avoid;
}
/* Le premier paragraphe ouvre en grand, sur toute la largeur. La lettrine
   (champ `drop_cap`) se fond dans le mot : rien n'est retiré du contenu.
   `p` : dans le canevas du back-office, le texte est un seul `div`
   modifiable, qui garde la taille de lecture. */
p.ed-manifesto__para:first-of-type {
    grid-column: 1 / -1;
    grid-row: 1;
    max-width: 30ch;
    margin-bottom: clamp(48px, 5vw, 72px);
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: clamp(26px, 2.8vw, 42px);
    line-height: 1.22;
    letter-spacing: -.02em;
    color: var(--hm-title);
}
.ed-dropcap { float: none; margin: 0; padding: 0; font: inherit; color: inherit; }
.ed-manifesto__pull {
    position: sticky;
    top: 96px;
    grid-column: 1;
    grid-row: 2 / span 40;
    max-width: none;
    margin: 0;
    padding: 28px 0 0;
    border: 0;
    border-top: 1px solid rgba(20, 33, 61, .18);
    text-align: left;
}
.ed-manifesto__pull-mark { display: none; }
.ed-manifesto__pull blockquote {
    max-width: 26ch;
    margin: 0;
    padding: 0;
    border: 0;
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 500;
    font-size: clamp(24px, 2.4vw, 36px);
    line-height: 1.2;
    letter-spacing: -.025em;
    color: var(--hm-title);
}
.ed-manifesto__pull blockquote::before { content: open-quote; }
.ed-manifesto__pull blockquote::after { content: close-quote; }
.ed-manifesto__pull cite {
    display: block;
    margin-top: 18px;
    font-family: var(--font-sans);
    font-style: normal;
    font-size: 15px;
    font-weight: 500;
    color: var(--hm-muted);
}

/* ── Valeurs : trois colonnes, un filet, un numéro discret ──────────────── */
.ed-values { padding: clamp(88px, 9vw, 136px) 0; background: var(--hm-paper); border: 0; }
.ed-values__head,
.ed-values__list {
    box-sizing: border-box;
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--hm-g);
    padding-right: var(--hm-g);
}
.ed-values__head { margin-bottom: clamp(48px, 6vw, 88px); text-align: left; }
.ed-values__head .ed-eyebrow { margin-bottom: 18px; color: var(--hm-muted); }
.ed-values__head .ed-eyebrow::before,
.ed-values__head .ed-eyebrow::after { content: none; }
.ed-values__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 48px clamp(28px, 3vw, 48px);
    list-style: none;
}
.ed-value,
.ed-value--right {
    display: block;
    direction: ltr;
    padding-top: 22px;
    border-top: 1px solid rgba(20, 33, 61, .18);
    text-align: left;
}
.ed-value__num {
    display: block;
    margin-bottom: clamp(28px, 3vw, 48px);
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    line-height: 1;
    color: var(--hm-muted);
    text-align: left;
    opacity: 1;
}
.ed-value__title {
    margin: 0 0 14px;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: clamp(22px, 2vw, 28px);
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--hm-title);
}
.ed-value__title::before { content: none; }
.ed-value__body { max-width: 42ch; margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: var(--hm-ink); }

/* ── Histoire : la frise à gauche, le portrait à droite ─────────────────── */
.ed-timeline { padding: clamp(88px, 9vw, 136px) 0; background: #fff; color: var(--hm-ink); }
.ed-timeline::before { content: none; }
.ed-timeline__head { max-width: none; margin: 0 0 clamp(48px, 6vw, 88px); }
.ed-timeline__title { color: var(--hm-title); }
.ed-timeline__body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.ed-timeline__list { position: relative; margin: 0; padding: 0; list-style: none; }
.ed-timeline__list::before { content: none; }
.ed-timeline__item {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 24px;
    align-items: baseline;
    padding: 22px 0;
    border-top: 1px solid #E3DED4;
}
.ed-timeline__item:last-child { padding-bottom: 22px; border-bottom: 1px solid #E3DED4; }
.ed-timeline__dot { display: none; }
.ed-timeline__year {
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: -.01em;
    color: var(--hm-title);
}
.ed-timeline__event {
    margin: 0 0 6px;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: -.01em;
    text-transform: none;
    color: var(--hm-title);
}
.ed-timeline__desc { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: var(--hm-ink); }
.ed-timeline__figure { position: sticky; top: 96px; margin: 0; overflow: hidden; border-radius: 6px; background: var(--hm-paper); }
.ed-timeline__figure::before { content: none; }
.ed-timeline__figure img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: none; }

/* ── Étapes : une grille, un filet, un numéro discret ───────────────────── */
.ed-steps { padding: clamp(88px, 9vw, 136px) 0; background: #fff; }
.ed-steps__head { max-width: none; margin: 0 0 clamp(48px, 6vw, 88px); }
.ed-steps__intro,
.ed-videos__intro {
    max-width: 48ch;
    margin: clamp(20px, 2.4vw, 32px) 0 0;
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.65;
    color: var(--hm-ink);
}
.ed-steps__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 48px clamp(28px, 3vw, 48px);
    margin: 0;
    padding: 0;
    list-style: none;
}
.ed-step { display: block; padding-top: 22px; border-top: 1px solid rgba(20, 33, 61, .18); }
.ed-step__num {
    display: block;
    margin-bottom: clamp(20px, 2.4vw, 36px);
    padding: 0;
    border: 0;
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    line-height: 1;
    color: var(--hm-muted);
    text-align: left;
}
.ed-step__title {
    margin: 0 0 10px;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -.01em;
    text-transform: none;
    color: var(--hm-title);
}
.ed-step__desc { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: var(--hm-ink); }

/* ── Atelier : la photo d'un côté, le texte sur papier de l'autre ───────── */
.ed-atelier { position: relative; overflow: hidden; background: var(--hm-paper); }
.ed-atelier__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; min-height: 640px; }
.ed-atelier__figure { position: relative; min-height: 420px; margin: 0; overflow: hidden; }
.ed-atelier__figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: none; }
.ed-atelier__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    box-sizing: border-box;
    width: 100%;
    max-width: 680px;
    padding: clamp(56px, 7vw, 112px) clamp(24px, 6vw, 96px);
    background: transparent;
}
.ed-atelier__title { margin-bottom: clamp(20px, 2.4vw, 32px); }
.ed-atelier__lead { max-width: 46ch; margin: 0 0 32px; font-family: var(--font-body); font-size: 17px; line-height: 1.75; color: var(--hm-ink); }
/* L'appel de l'atelier est un lien fléché, comme les « voir tout » de
   l'accueil. */
.ed-atelier .ed-btn {
    min-height: 0;
    padding: 4px 0;
    border: 0;
    background: none;
    font-size: 16px;
    color: var(--hm-title);
}
.ed-atelier .ed-btn::after { content: '→'; margin-left: 10px; transition: transform .3s var(--hm-ease); }
.ed-atelier .ed-btn:hover { background: none; color: var(--hm-title); }
.ed-atelier .ed-btn:hover::after { transform: translateX(4px); }

/* ── Credo : le bandeau de fin, sombre ──────────────────────────────────── */
.ed-credo {
    position: relative;
    overflow: hidden;
    padding: clamp(96px, 10vw, 152px) 0;
    background: var(--hm-title);
    color: #fff;
    text-align: left;
}
.ed-credo::before,
.ed-credo::after { content: none; }
.ed-credo .ed-eyebrow { color: rgba(255, 255, 255, .78); }
.ed-credo__stack {
    margin: 0 0 clamp(28px, 3vw, 44px);
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: clamp(48px, 7vw, 112px);
    line-height: .98;
    letter-spacing: -.045em;
    color: #fff;
}
.ed-credo__stack span { display: block; }
.ed-credo__stack span:nth-child(2) { font-style: normal; color: rgba(255, 255, 255, .62); }
.ed-credo__sub {
    max-width: 46ch;
    margin: 0 0 36px;
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .86);
}
.ed-credo .ed-btn--gold { background: #fff; border-color: #fff; color: var(--hm-title); }
.ed-credo .ed-btn--gold:hover { background: #EFEBE3; border-color: #EFEBE3; color: var(--hm-title); }

/* ── Guide vidéo ────────────────────────────────────────────────────────── */
.ed-videos { padding: clamp(88px, 9vw, 136px) 0; background: var(--hm-paper); border: 0; }
.ed-videos__head { max-width: none; margin: 0 0 clamp(40px, 5vw, 72px); }
.ed-videos__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 48px clamp(24px, 2.4vw, 36px); }
.ed-video { display: flex; flex-direction: column; margin: 0; }
.ed-video__caption { order: 2; margin: 18px 0 0; }
.ed-video__title {
    margin: 0 0 6px;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 17px;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    color: var(--hm-title);
}
.ed-video__desc { margin: 0; font-family: var(--font-body); font-size: 15px; line-height: 1.65; color: var(--hm-muted); }
/* La vignette (servie par YouTube en 4/3) est recadrée en 16/9 ; le lecteur
   n'est créé qu'au clic (`youtube-lite`). */
.ed-video__trigger {
    order: 1;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-top: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 6px;
    background: #000;
    cursor: pointer;
}
.ed-video__trigger img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--hm-ease); }
.ed-video__trigger:hover img { transform: scale(1.03); }
.ed-video__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 64px;
    height: 64px;
    padding-left: 4px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, .94);
    color: var(--hm-title);
    font-size: 18px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
}
.ed-video__trigger:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 4px; }

/* ── Bloc « accordéon » (FAQ) ───────────────────────────────────────────── */
.cms-accordion__title {
    margin: 0;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.35;
    letter-spacing: -.01em;
    color: var(--hm-title);
}
.cms-accordion__question { gap: 16px; padding: 22px 0; }
.cms-accordion__sign {
    flex: none;
    font-family: var(--font-sans);
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    color: var(--hm-title);
    transition: transform .3s var(--hm-ease);
}
.cms-accordion__item[open] .cms-accordion__sign { transform: rotate(45deg); }

/* ── Modèles (/modeles) : les cartes de l'accueil, en grille ────────────── */
.catalogue-body { padding: clamp(8px, 1vw, 16px) 0 clamp(88px, 9vw, 128px); }
.catalogue-filters { gap: 10px; margin-bottom: clamp(32px, 4vw, 56px); }
.filter-pill {
    min-height: 44px;
    padding: 10px 22px;
    border: 1.5px solid #D9D4CA;
    border-radius: 999px;
    background: #fff;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--hm-title);
}
.filter-pill:hover { border-color: var(--hm-title); color: var(--hm-title); }
.filter-pill.active { background: var(--hm-title); border-color: var(--hm-title); color: #fff; }
.filter-pill:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; }

.models-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: clamp(48px, 5vw, 72px) clamp(16px, 2vw, 28px);
}
.model-card { border: 0; background: transparent; overflow: visible; }
.model-card:hover { box-shadow: none; transform: none; }
.model-card-img { aspect-ratio: 4 / 5; border-radius: 6px; background: #F0EEEA; }
.model-card-img img { object-fit: cover; transition: transform 1.2s var(--hm-ease); }
.model-card:hover .model-card-img img { transform: scale(1.03); }
/* « Personnaliser » se pose en bas de la photo au survol, sans voile. */
.model-card-overlay { align-items: flex-end; justify-content: flex-start; padding: 16px; background: none; }
.model-card-overlay .btn { background: #fff; border-color: #fff; color: var(--hm-title); }
.model-card-overlay .btn:hover { background: #EFEBE3; border-color: #EFEBE3; }
.model-card-body { gap: 4px; padding: 18px 0 0; }
.model-card-title { order: 1; margin: 0; font-family: var(--font-sans); font-weight: 600; font-size: 17px; line-height: 1.3; letter-spacing: 0; color: var(--hm-title); }
.model-card-label { order: 2; font-family: var(--font-sans); font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--hm-muted); }
.model-card-price { order: 3; margin: 0; font-family: var(--font-sans); font-size: 14px; color: var(--hm-muted); }
.model-card-body > .stock-badge,
.model-card-note { order: 4; }
.model-card-cta {
    order: 5;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0 0;
    border: 0;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--hm-title);
}
.model-card-cta:hover { color: var(--hm-title); }
.model-card-cta:hover .hm-arrow__icon { transform: translateX(4px); }

/* Bandeau « Vous ne trouvez pas ? » : sur papier, le titre en grand. */
.catalogue-cta-banner { margin-top: 0; padding: clamp(80px, 9vw, 128px) 0; background: var(--hm-paper); text-align: left; }
.catalogue-cta-banner h2 {
    max-width: 18ch;
    margin: 0 0 20px;
    font-size: clamp(36px, 4.6vw, 72px);
    line-height: 1.04;
    letter-spacing: -.035em;
    color: var(--hm-title);
}
.catalogue-cta-banner p { max-width: 52ch; margin: 0 0 32px; font-size: 18px; line-height: 1.65; color: var(--hm-ink); }

/* ── Fiche modèle ───────────────────────────────────────────────────────── */
.model-detail { gap: clamp(40px, 6vw, 96px); padding: clamp(8px, 1vw, 16px) 0 clamp(88px, 9vw, 128px); }
.model-detail-image img { border-radius: 6px; }
.model-detail-label {
    margin-bottom: 12px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--hm-muted);
}
.model-detail-title {
    margin-bottom: 16px;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: clamp(28px, 2.8vw, 40px);
    line-height: 1.1;
    letter-spacing: -.03em;
    color: var(--hm-title);
}
.model-detail-price { font-family: var(--font-sans); font-weight: 600; font-size: 22px; letter-spacing: -.01em; color: var(--hm-title); }
.model-detail-price span { font-weight: 500; color: var(--hm-muted); }
.model-detail-desc { font-size: 17px; line-height: 1.75; color: var(--hm-ink); }
.model-detail-specs { border-top-color: #E3DED4; }
.spec-row { padding: 14px 0; border-bottom-color: #E3DED4; font-size: 15px; }
.spec-key { font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--hm-muted); }
.spec-val { color: var(--hm-title); }

/* ── La Revue (/revue) : une mise en page de magazine ───────────────────────
   Le nom en très grand ; l'article à la une, photo et texte côte à côte ;
   puis la grille — deux grandes cartes, puis des rangées de trois. Les cartes
   (`journal/_card.html.twig`, partagées avec « À lire aussi ») portent la
   date, le temps de lecture et le titre, pas de résumé. Sur téléphone, après
   les deux premières, une liste compacte : vignette à gauche, titre à droite. */
.page-header .journal-hero__title { max-width: none; margin-bottom: clamp(20px, 2.4vw, 32px); font-size: clamp(56px, 9vw, 144px); line-height: .94; letter-spacing: -.05em; }
.journal-hero__sub {
    display: block;
    max-width: 30ch;
    margin-top: clamp(14px, 1.6vw, 22px);
    font-size: clamp(22px, 2.4vw, 34px);
    line-height: 1.18;
    letter-spacing: -.02em;
    color: var(--hm-muted);
}
/* Le tiret reste dans le H1 (cahier des charges SEO, mot pour mot) mais ne
   s'affiche pas : le retour à la ligne sépare déjà le nom du sujet (retour
   client du 10/11/2026). */
.journal-hero__dash { display: none; }

.journal-meta { margin: 0; font-family: var(--font-sans); font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--hm-muted); }
.journal-kicker {
    display: inline-block;
    margin: 0 0 18px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--hm-title);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
}

/* À la une */
.journal-feature { padding: clamp(8px, 1vw, 16px) 0 clamp(72px, 8vw, 120px); }
.journal-feature__card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
}
.journal-feature__img { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; background: var(--hm-paper); }
.journal-feature__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--hm-ease); }
.journal-feature__card:hover .journal-feature__img img { transform: scale(1.03); }
.journal-feature__title {
    max-width: 18ch;
    margin: 14px 0 20px;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: clamp(30px, 3.4vw, 52px);
    line-height: 1.06;
    letter-spacing: -.035em;
    color: var(--hm-title);
}
/* Le lien du titre couvre toute la carte. */
.journal-feature__link { color: inherit; text-decoration: none; }
.journal-feature__link::after { content: ''; position: absolute; inset: 0; }
.journal-feature__link:hover { color: inherit; }
.journal-feature__link:focus-visible { outline: none; }
.journal-feature__card:focus-within { outline: 2px solid var(--color-gold); outline-offset: 8px; border-radius: 6px; }
.journal-feature__excerpt { max-width: 46ch; margin: 0 0 28px; font-family: var(--font-body); font-size: 17px; line-height: 1.7; color: var(--hm-ink); }
.journal-feature__card:hover .hm-arrow__icon { transform: translateX(4px); }

/* Tous les articles */
.journal-list { padding: 0 0 clamp(88px, 9vw, 136px); }
.journal-list__title {
    margin: 0 0 clamp(32px, 4vw, 56px);
    padding-top: clamp(28px, 3vw, 40px);
    border-top: 1px solid rgba(20, 33, 61, .16);
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: clamp(28px, 3vw, 44px);
    line-height: 1.1;
    letter-spacing: -.03em;
    color: var(--hm-title);
}
.journal-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(48px, 5vw, 72px) clamp(20px, 2.4vw, 36px);
    padding-bottom: 0;
}
.journal-empty { grid-column: 1 / -1; margin: 0; color: var(--hm-muted); }

.article-card { position: relative; grid-column: span 2; border: 0; background: transparent; overflow: visible; }
.article-card:hover { box-shadow: none; transform: none; }
.journal-grid:not(.journal-grid--related) .article-card:nth-child(-n+2) { grid-column: span 3; }
.article-card-img { height: auto; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; background: var(--hm-paper); }
.journal-grid:not(.journal-grid--related) .article-card:nth-child(-n+2) .article-card-img { aspect-ratio: 3 / 2; }
.article-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--hm-ease); }
.article-card:hover .article-card-img img { transform: scale(1.03); }
.article-card-img__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 40px;
    color: rgba(27, 58, 107, .2);
}
.article-card-body { gap: 8px; padding: 18px 0 0; }
.article-card-title {
    margin: 0;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -.015em;
    color: var(--hm-title);
}
.journal-grid:not(.journal-grid--related) .article-card:nth-child(-n+2) .article-card-title { font-size: clamp(22px, 2vw, 28px); font-weight: 500; letter-spacing: -.025em; line-height: 1.2; }
/* Le lien du titre couvre toute la carte. */
.article-card-link {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    letter-spacing: inherit;
    text-transform: none;
    color: inherit;
    text-decoration: none;
}
.article-card-link::after { content: ''; position: absolute; inset: 0; }
.article-card-link:hover { color: inherit; }
.article-card:hover .article-card-title,
.article-card-link:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.article-card-link:focus-visible { outline: none; }
.article-card:focus-within { outline: 2px solid var(--color-gold); outline-offset: 6px; border-radius: 6px; }

/* Présentation du hub, en bas : le premier paragraphe en grand à gauche. */
.journal-about { padding: clamp(80px, 9vw, 128px) 0; background: var(--hm-paper); }
.container-xl.journal-intro {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(40px, 6vw, 96px);
    align-items: start;
    max-width: 1320px;
    padding-top: 0;
}
.journal-intro > * { grid-column: 2; max-width: 640px; }
.journal-intro p { margin: 0 0 18px; font-family: var(--font-body); font-size: 17px; line-height: 1.75; color: var(--hm-ink); }
.journal-intro > p:first-child {
    position: sticky;
    top: 96px;
    grid-column: 1;
    grid-row: 1 / span 10;
    margin: 0;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: clamp(20px, 1.8vw, 26px);
    line-height: 1.35;
    letter-spacing: -.015em;
    color: var(--hm-title);
}
.journal-intro__title { margin: 32px 0 14px; font-family: var(--font-sans); font-weight: 600; font-size: clamp(20px, 1.8vw, 24px); letter-spacing: -.02em; color: var(--hm-title); }
.journal-intro a { color: var(--hm-title); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.journal-intro a:hover { color: var(--hm-title); text-underline-offset: 2px; }

/* ── Article de La Revue ────────────────────────────────────────────────── */
.page-header.article-head h1 { max-width: 20ch; }
.article-head .journal-meta { margin-bottom: clamp(16px, 1.8vw, 24px); }
.article-head .breadcrumb [aria-current="page"] { display: inline-block; max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
/* Le chapô : la première phrase de l'article, en plus grand. */
.article-lead {
    max-width: 52ch;
    margin: 0;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: clamp(19px, 1.6vw, 22px);
    line-height: 1.5;
    letter-spacing: -.01em;
    color: var(--hm-title);
}
.article-cover { margin: 0 0 clamp(48px, 6vw, 88px); }
.article-hero-img {
    display: block;
    width: 100%;
    max-height: 680px;
    margin: 0;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 6px;
}
.article-page { padding: 0 0 clamp(72px, 8vw, 112px); }
.article-page .article-content { max-width: 680px; font-size: 18px; line-height: 1.8; color: var(--hm-ink); }
.article-content h2 {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: clamp(24px, 2.4vw, 32px);
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--hm-title);
}
.article-content h3 { font-size: 19px; color: var(--hm-title); }
.article-content a { border-bottom: 0; color: var(--hm-title); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.article-content a:hover { color: var(--hm-title); text-underline-offset: 2px; }
.article-content img { border-radius: 6px; }
.article-content blockquote {
    margin: 40px 0;
    padding: 4px 0 4px 24px;
    border-left: 2px solid var(--hm-title);
    background: none;
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 500;
    font-size: clamp(20px, 2vw, 26px);
    line-height: 1.35;
    letter-spacing: -.015em;
    color: var(--hm-title);
}
.article-sign {
    max-width: 680px;
    margin: 48px auto 0;
    padding-top: 24px;
    border-top: 1px solid rgba(20, 33, 61, .16);
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    color: var(--hm-title);
}
.journal-related { padding: clamp(80px, 9vw, 120px) 0; background: var(--hm-paper); }
.journal-related__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 32px;
    margin-bottom: clamp(32px, 4vw, 56px);
}
.journal-related__head .journal-list__title { margin: 0; padding: 0; border: 0; }
.journal-related .article-card-img { background: #E7E2D8; }
.article-back-row { max-width: 680px; margin: 40px auto 0; }
.article-back { gap: 10px; margin: 0; font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--hm-title); }
.article-back:hover { border-bottom-color: transparent; color: var(--hm-title); text-decoration: underline; text-underline-offset: 5px; }

@media (max-width: 1024px) {
    .journal-feature__card { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .journal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .article-card,
    .journal-grid:not(.journal-grid--related) .article-card:nth-child(-n+2) { grid-column: auto; }
    .journal-grid--related .article-card:nth-child(3) { display: none; }
    .container-xl.journal-intro { grid-template-columns: minmax(0, 1fr); }
    .journal-intro > *,
    .journal-intro > p:first-child { position: static; grid-column: 1; grid-row: auto; max-width: none; }
    .journal-intro > p:first-child { margin-bottom: 28px; }
}
@media (max-width: 760px) {
    .page-header .journal-hero__title { font-size: clamp(52px, 16vw, 72px); }
    .journal-hero__sub { font-size: 20px; }
    .journal-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .journal-grid--related .article-card:nth-child(3) { display: grid; }
    .journal-grid:not(.journal-grid--related) .article-card:nth-child(-n+2) { margin-bottom: 40px; }
    /* Au-delà des deux premières : une liste compacte, vignette à gauche. */
    .journal-grid:not(.journal-grid--related) .article-card:nth-child(n+3),
    .journal-grid--related .article-card {
        display: grid;
        grid-template-columns: 104px minmax(0, 1fr);
        gap: 16px;
        align-items: center;
        padding: 16px 0;
        border-top: 1px solid rgba(20, 33, 61, .12);
    }
    .journal-grid:not(.journal-grid--related) .article-card:nth-child(n+3) .article-card-img,
    .journal-grid--related .article-card .article-card-img { aspect-ratio: 1 / 1; }
    .journal-grid:not(.journal-grid--related) .article-card:nth-child(n+3) .article-card-body,
    .journal-grid--related .article-card .article-card-body { padding: 0; gap: 4px; }
    .journal-grid:not(.journal-grid--related) .article-card:nth-child(n+3) .article-card-title,
    .journal-grid--related .article-card .article-card-title { font-size: 16px; }
    .journal-grid .article-card-img__placeholder { font-size: 22px; }
    .journal-meta { font-size: 13px; }
    .journal-feature__excerpt { font-size: 16px; }
    .article-page .article-content { font-size: 17px; }
    .article-head .breadcrumb [aria-current="page"] { max-width: 18ch; }
    .article-lead { font-size: 18px; }
}

/* ── Entrées au défilement, pages intérieures (sous `.hm--motion`) ──────── */
.hm--motion [data-reveal="stagger"] .ed-value,
.hm--motion [data-reveal="stagger"] .ed-step,
.hm--motion [data-reveal="stagger"] .ed-timeline__item,
.hm--motion [data-reveal="stagger"] .ed-video,
.hm--motion [data-reveal="stagger"] .model-card,
.hm--motion [data-reveal="stagger"] .article-card,
.hm--motion [data-reveal="stagger"] .contact-help__card {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .8s var(--hm-ease), transform .8s var(--hm-ease);
    transition-delay: calc(var(--i, 0) * 55ms);
}
.hm--motion [data-reveal="stagger"].is-in .ed-value,
.hm--motion [data-reveal="stagger"].is-in .ed-step,
.hm--motion [data-reveal="stagger"].is-in .ed-timeline__item,
.hm--motion [data-reveal="stagger"].is-in .ed-video,
.hm--motion [data-reveal="stagger"].is-in .model-card,
.hm--motion [data-reveal="stagger"].is-in .article-card,
.hm--motion [data-reveal="stagger"].is-in .contact-help__card { opacity: 1; transform: none; }
@media print {
    .hm--motion [data-reveal="stagger"] .ed-value,
    .hm--motion [data-reveal="stagger"] .ed-step,
    .hm--motion [data-reveal="stagger"] .ed-timeline__item,
    .hm--motion [data-reveal="stagger"] .ed-video,
    .hm--motion [data-reveal="stagger"] .model-card,
    .hm--motion [data-reveal="stagger"] .article-card,
    .hm--motion [data-reveal="stagger"] .contact-help__card { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .model-card-img img,
    .article-card-img img,
    .ed-video__trigger img { transition: none; }
}

/* ── Tablette et téléphone ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .ed-hero__inner,
    .ed-atelier__inner,
    .ed-timeline__body { grid-template-columns: minmax(0, 1fr); }
    .ed-hero__inner { min-height: 0; }
    /* La photo d'abord, comme la couverture de l'accueil sur téléphone. */
    .ed-hero__figure { order: -1; min-height: 0; aspect-ratio: 4 / 3; }
    .ed-hero__text { padding: 40px var(--hm-g) 64px; }
    .ed-atelier__figure { min-height: 0; aspect-ratio: 4 / 3; }
    .ed-atelier__text { max-width: none; padding: 56px var(--hm-g) 72px; }
    .ed-timeline__figure { position: static; max-width: 520px; }
    .ed-manifesto__body { grid-template-columns: minmax(0, 1fr); }
    .ed-manifesto__body > *,
    .ed-manifesto__pull { grid-column: 1; grid-row: auto; max-width: none; }
    .ed-manifesto__pull { position: static; margin: 0 0 40px; }
}
@media (max-width: 760px) {
    .ed-hero__figure { aspect-ratio: 4 / 5; max-height: 72svh; }
    .ed-hero__title { font-size: clamp(36px, 10vw, 48px); }
    .ed-hero__lead,
    .ed-steps__intro,
    .ed-videos__intro,
    .ed-credo__sub { font-size: 16px; }
    .ed-timeline__item { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .ed-credo__stack { font-size: clamp(44px, 13vw, 64px); }
    .catalogue-cta-banner p { font-size: 16px; }
    /* Au doigt, pas de survol : « Personnaliser » reste sous la carte. */
    .model-card-overlay { display: none; }
    /* Deux cartes par ligne, comme une vitrine : une seule obligeait à faire
       défiler dix écrans de chemises. */
    .models-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 12px; }
    .model-card-title { font-size: 15px; }
    .model-card-label,
    .model-card-price { font-size: 13px; }
    .model-card-cta { font-size: 14px; }
}

/* Boutons arrondis, sur tout le site (décision client du 09/11/2026) : la
   forme des boutons de l'accueil devient celle de tous les boutons — un site
   aux boutons carrés partout sauf sur l'accueil paraissait fait de deux pièces.
   Placé ici, après toutes les définitions de ces boutons : à spécificité
   égale, la dernière règle l'emporte (`.ed-btn` déclare `border-radius: 0`). */
.btn,
.ed-btn,
.cms-btn,
.cfg-skip-btn,
.cfg-summary-cta,
.order-invoice__btn { border-radius: 999px; }

/* 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,
    .hm-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 : son dessin vit dans la section « DA du site
   (novembre 2026) » (`.journal-about`, `.journal-intro`). */

/* 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;
}


/* ── 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; }
}

/* ── Pages éditoriales en cage (CGV, mentions légales, confidentialité) ──── */
.cms-page-cage { max-width: 900px; padding-top: 56px; padding-bottom: 56px; }

/* Bloc HTML brut : il vient de l'ancien site ou d'une commande d'installation,
   sans classes. On lui donne une typographie de document juridique lisible. */
.cms-block--html h2 { font-size: 1.5rem; margin: 40px 0 16px; }
.cms-block--html h3 { font-size: 1.2rem; margin: 28px 0 12px; }
.cms-block--html p, .cms-block--html li { line-height: 1.65; }
.cms-block--html ul { padding-left: 22px; margin: 12px 0 20px; }
.cms-block--html li { margin-bottom: 8px; }
.cms-block--html table { width: 100%; border-collapse: collapse; margin: 20px 0 28px; font-size: .9rem; }
.cms-block--html th, .cms-block--html td { padding: 10px 12px; border: 1px solid var(--color-border, #E0DBD0); text-align: left; vertical-align: top; }
.cms-block--html th { background: var(--color-cream); font-weight: 700; }
/* Un tableau à quatre colonnes ne tient pas dans 335 px : il défile dans son
   propre cadre plutôt que d'élargir toute la page. */
.cms-block--html table { display: block; overflow-x: auto; max-width: 100%; }

/* Pastilles de tissu de l'aperçu du configurateur (accueil).
   L'image est une vraie balise et non un fond CSS : `loading="lazy"` ne
   s'applique pas aux fonds, et ces six vignettes sont au premier écran. */
.home-config__mock-swatch {
    position: relative;
    aspect-ratio: 1;
    border-radius: 2px;
    overflow: hidden;
    background: rgba(255, 255, 255, .06);
}
.home-config__mock-swatch img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.home-config__mock-swatch.is-selected {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

/* ── Téléphone : plus rien ne déborde de la fenêtre ──────────────────────────
   Mesuré à 375 px de large : TOUTES les pages faisaient 406 px, soit 31 px de
   défilement horizontal. Deux causes, sans rapport avec le contenu des pages :

   1. L'en-tête. Logo (188 px) + actions (165 px) + marges (40 px) = 393 px,
      dans une rangée flex qui refuse de plier. Le logo se réduit ici, et les
      actions se resserrent.
   2. Le héros de l'accueil. `.btn` porte `white-space: nowrap`, et une piste
      `1fr` d'une grille ne descend jamais sous la largeur minimale de son
      contenu (`min-width: auto`) : le bouton « Créer votre chemise sur mesure
      en ligne » imposait 470 px à toute la colonne. Sur un téléphone, le
      libellé peut passer à la ligne.

   ⚠️ Ce bloc doit rester EN FIN DE FEUILLE : une media query n'ajoute aucune
   spécificité, et une règle générale placée après elle la reprendrait. */
@media (max-width: 480px) {
    /* Nom et email côte à côte : 180 px chacun, trop étroit pour une adresse. */
    .contact-form__row { grid-template-columns: 1fr; }
    .header-inner { padding: 0 16px; }
    .logo img { height: 24px; }
    .logo__flag { width: 8px; height: 5.5px; left: calc(85.2% + 3px); }
    .header-actions { gap: 12px; }

    .hero-inner > * { min-width: 0; }
    .hero-ctas .btn {
        white-space: normal;
        text-align: center;
        line-height: 1.3;
    }
}