/* ============================================================
   TRESOR REEL — Landing page
   Style : e-commerce mode, minimaliste, premium
   Convention : BEM (block__element--modifier)
   Approche : desktop d'abord, responsive en bas du fichier
   ============================================================ */


/* ============================================================
   1. RESET & BASE
   ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    /* Base 16px — toutes les tailles sont calculées à partir de là */
    font-size: 16px;
    scroll-behavior: smooth;
    /* Scroll-snap "proximity" : aligne sur une section UNIQUEMENT si
       l'utilisateur s'arrête près d'elle. Beaucoup plus doux que
       'mandatory' qui forcerait l'alignement à chaque scroll.
       Vire cette ligne si tu trouves ça encore trop intrusif. */
    scroll-snap-type: y proximity;
}

body.page {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 300;
    color: #fff;
    background-color: #0a0a0a; /* fond sombre par défaut, l'image hero couvre tout */
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

ul {
    list-style: none;
}

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

/* Utilitaire : texte visible uniquement pour Google et les lecteurs
   d'écran (caché visuellement). Sert à enrichir le H1 sans toucher au
   design. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ============================================================
   2. NAVIGATION
   Position : fixe en haut
   Fond    : transparent (l'image hero passe à travers)
   3 zones : gauche / logo centré / droite
   ============================================================ */

.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background-color: transparent; /* aucun fond, aucune ombre, aucune bordure */
    /* padding vertical compact, horizontal 40px comme demandé */
    padding: 28px 24px;
    /* Transitions pour les changements d'état (hidden / revealed)
       pilotés par main.js en fonction du scroll. */
    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.3s ease,
        backdrop-filter 0.3s ease,
        -webkit-backdrop-filter 0.3s ease,
        padding 0.3s ease;
    will-change: transform;
}

/* État 1 : on scrolle vers le bas → la nav se cache vers le haut */
.nav--hidden {
    transform: translateY(-100%);
}

/* État 2 : on scrolle vers le haut (après avoir descendu) →
   la nav revient avec un fond blanc translucide flouté
   (effet "frosted glass" type Apple / Sézane).
   On voit lééégèrement à travers, le texte passe en sombre. */
.nav--revealed {
    background-color: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    padding-top: 22px;
    padding-bottom: 22px;
    /* Liseré bas très discret pour décoller la nav du contenu */
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

/* Couleurs des liens en état "revealed" : texte sombre pour rester
   lisible sur le fond clair translucide. */
.nav--revealed .nav__link,
.nav--revealed .nav__logo,
.nav--revealed .nav__lang,
.nav--revealed .nav__lang-link,
.nav--revealed .nav__lang-sep {
    color: #0a0a0a;
}

.nav__inner {
    /* Grille à 3 colonnes : gauche | centre | droite */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 40px;
}

.nav__list {
    display: flex;
    gap: 36px; /* espacement large entre les liens */
}

.nav__list--left {
    justify-self: start;
}

.nav__list--right {
    justify-self: end;
}

.nav__link {
    color: #fff;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.04em;
    /* transition douce sur l'opacité au survol + sur la couleur
       quand la nav passe en état "revealed" (fond clair) */
    transition: opacity 0.25s ease, color 0.3s ease;
}

.nav__link:hover {
    opacity: 0.6;
}

/* Logo central — police serif type Times/Georgia (Cormorant Garamond) */
.nav__logo {
    font-family: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
    font-size: 26px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #fff;
    /* Centrage exact via la colonne auto du grid */
    justify-self: center;
    white-space: nowrap;
    transition: color 0.3s ease;
}

/* Switcher de langue (FR | EN) — petit, discret, dernier item à droite */
.nav__lang {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: #fff;
}

.nav__lang-link {
    color: #fff;
    opacity: 0.5;
    transition: opacity 0.25s ease, color 0.3s ease;
}

.nav__lang-link:hover {
    opacity: 1;
}

/* Langue active : pleine opacité, non cliquable */
.nav__lang-link--active {
    opacity: 1;
    pointer-events: none;
    cursor: default;
}

.nav__lang-sep {
    opacity: 0.4;
    font-size: 11px;
}


/* ============================================================
   3. HERO
   Image plein écran 100vh + 2 blocs en bas (gauche / droite)
   ============================================================ */

.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
    background-color: #1a1a1a;
    /* Point d'ancrage pour le scroll-snap (couplé à scroll-snap-type sur <html>) */
    scroll-snap-align: start;
}

/* Image de fond plein écran (cover) — fond sombre en fallback. */
.hero__media {
    position: absolute;
    inset: 0;
    background-color: #1c1c1c;
    background-image:
        url('../assets/images/herotresor.webp'),
        radial-gradient(ellipse at center, #2a2a2a 0%, #141414 60%, #0a0a0a 100%);
    background-size: cover, cover;
    /* Position verticale (logique CSS) :
         0%   = on voit le HAUT de la photo
         50%  = centré (défaut)
         100% = on voit le BAS de la photo
       25% garde la tête du sujet bien dans le cadre. */
    background-position: center 25%, center;
    background-repeat: no-repeat, no-repeat;
}

/* Overlay haut : dégradé sombre pour garder la nav blanche lisible
   sans assombrir le reste de l'image */
.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.35) 0%,
        rgba(0, 0, 0, 0.10) 25%,
        rgba(0, 0, 0, 0)    50%,
        rgba(0, 0, 0, 0.15) 100%
    );
    pointer-events: none;
}


/* ----- Blocs caption (bas-gauche et bas-droite) ----- */

.hero__caption {
    position: absolute;
    bottom: 40px;
    z-index: 2;
}

.hero__caption--left {
    left: 40px;
}

.hero__caption--right {
    right: 40px;
    max-width: 380px; /* limite la largeur du paragraphe descriptif */
    text-align: right;
}


/* ----- Bloc bas-gauche : CHAPITRE 01 + lien ----- */

.hero__title {
    /* Sans-serif, bold, majuscules, très grand */
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 92px;
    line-height: 0.95;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 18px;
    /* relative pour pouvoir coller le sup en exposant */
    position: relative;
    display: inline-block;
}

.hero__title-sup {
    /* "01" en exposant collé à la fin du mot */
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.05em;
    vertical-align: super;
    margin-left: 4px;
    /* léger ajustement vertical pour bien coller au mot */
    top: -0.4em;
    position: relative;
}

.hero__cta {
    display: inline-block;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: opacity 0.25s ease;
}

.hero__cta:hover {
    opacity: 0.7;
}


/* ----- Bloc bas-droite : paragraphe ----- */

.hero__lede {
    color: #fff;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.7;
    letter-spacing: 0.01em;
}


/* ============================================================
   4. SECTION VIDÉO DE MARQUE
   Plein écran (100vh) juste sous le hero.
   Vidéo de fond en boucle + voile sombre + nom de marque centré.
   ============================================================ */

.brand-video {
    position: relative;
    width: 100%;
    /* Hauteur calée sur le ratio 16:9 de la vidéo (= 100vw × 9/16).
       Plafonnée à 100vh pour ne jamais dépasser la fenêtre.
       Résultat :
       - Plein écran 16:9 → section pile au ratio de la vidéo, ZÉRO crop
       - Demi-écran    → section réduite (~50vh), toujours ZÉRO crop
       - Mobile portrait → cappée par min-height, mini crop (acceptable) */
    height: min(100vh, 56.25vw);
    min-height: 380px;
    overflow: hidden;
    /* Fallback : si la vidéo ne charge pas, fond sombre uni. */
    background-color: #0a0a0a;
    /* Point d'ancrage pour le scroll-snap */
    scroll-snap-align: start;
}

/* Vidéo de fond — autoplay/muted/loop/playsinline pour autoriser
   la lecture automatique sur tous les navigateurs (Chrome, Safari iOS, etc.). */
.brand-video__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* cover : la vidéo remplit toute la section sans déformation,
       avec un léger crop si le ratio diffère. */
    object-fit: cover;
    object-position: center;
    /* z-index 1 : la vidéo est en dessous de l'overlay et du titre. */
    z-index: 1;
    /* Flou doux sur la vidéo — décommenter pour activer.
       Utile si la vidéo a trop de détails et "fight" avec le texte. */
    /* filter: blur(2px); */
}

/* Voile sombre semi-transparent — fait ressortir le nom de marque
   et unifie visuellement n'importe quelle vidéo de fond. */
.brand-video__overlay {
    position: absolute;
    inset: 0;
    /* Opacité ajustable entre 0.3 (clair) et 0.6 (sombre).
       0.45 = bon compromis pour la plupart des vidéos. */
    background-color: rgba(0, 0, 0, 0.45);
    z-index: 2;
    pointer-events: none;
}

/* Nom de marque "Tresor Reel" parfaitement centré sur la section.
   Même famille serif que le logo de la nav (Cormorant Garamond). */
.brand-video__title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    margin: 0;
    font-family: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
    font-weight: 500;
    font-size: 80px;
    line-height: 1;
    letter-spacing: 0.04em;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    /* Très léger relief pour décoller le texte de la vidéo si jamais
       la zone derrière reste claire malgré l'overlay. */
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}


/* ============================================================
   5. SECTION PRODUITS — "Le pull"
   3 colonnes (1 par coloris) · fond clair · clic vignette =
   échange entre vue de face et vue de dos.
   ============================================================ */

.products {
    /* Fond blanc — enchaîne directement avec la section Headwear
       (également blanche), zéro rupture visuelle. Padding vertical
       très resserré pour le flow moderne demandé. */
    background-color: #ffffff;
    color: #1a1a1a;
    padding: 14px 0 16px;
}

.products__grid {
    /* Grille pleine largeur, 3 colonnes égales, gap minimal entre
       les cartes (rendu "carreaux serrés" modernes). */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    width: 100%;
    max-width: none;
    padding: 0 24px;
}

.products__item {
    display: flex;
    flex-direction: column;
}

/* Conteneur visuel — ratio portrait 3:4, standard textile mode
   (Sézane, COS, AMI...). Sert de "scène" sur laquelle on superpose
   les deux vues (face + dos) en cross-fade. */
.products__visual {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    /* Fallback de couleur si jamais aucune image ne charge */
    background-color: #e8e6e1;
}

.products__visual--taupe { background-color: #98836C; }
.products__visual--noir  { background-color: #1C1A1B; }
.products__visual--creme { background-color: #DED6CB; }

/* Les deux vues (face / dos) sont stackées au même endroit, en
   permanence chargées. Le swap se fait par cross-fade d'opacité :
   on ne voit JAMAIS le fond apparaître entre les deux. */
.products__view {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    z-index: 1;
    /* Cross-fade premium — 0.5s avec un easing standard material */
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* État par défaut : face visible, dos invisible */
.products__view--front { opacity: 1; }
.products__view--back  { opacity: 0; }

/* État "is-back" (toggle JS) : on inverse les deux opacités */
.products__visual.is-back .products__view--front { opacity: 0; }
.products__visual.is-back .products__view--back  { opacity: 1; }


/* Label coloris affiché directement sur l'image (bas droite, opposé
   de la vignette pour équilibre visuel). z-index 4 → reste lisible
   même quand le voile "Bientôt" est actif. */
.products__label {
    position: absolute;
    bottom: 18px;
    right: 18px;
    z-index: 4;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    /* Texte-shadow doux pour rester lisible quelle que soit la photo */
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    margin: 0;
}


/* Vignette — AU-DESSUS de l'overlay pour rester cliquable même
   quand le hover assombrit le card.
   Ratio 4:5 = exactement celui des photos produits (1122×1402).
   Avec object-fit: contain, la photo remplit pile la vignette,
   aucun "trait" de fond coloré ne dépasse sur les côtés. */
.products__thumb {
    position: absolute;
    bottom: 16px;
    left: 16px;
    z-index: 3;
    width: 56px;
    height: 70px; /* 56 × 1.25 = ratio 4:5 */
    padding: 0;
    margin: 0;
    border: 2px solid #fff;
    /* Fond exactement aligné sur le fond des PNG produits (#ECEBED).
       Garantit qu'aucun sub-pixel de mismatch ne soit visible
       (sinon on voit un mince trait coloré sur les bords). */
    background-color: #ECEBED;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    outline: none;
}

/* (Les modifiers --taupe / --noir / --creme sur la vignette ont été
   retirés : toutes utilisent désormais le même fond #ECEBED pour
   matcher le fond des photos PNG. Les classes restent en HTML pour
   compatibilité future éventuelle, mais ne pilotent plus rien ici.) */

.products__thumb:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

.products__thumb:focus-visible {
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
}

/* Mini-images dans la vignette — même logique de cross-fade que
   les grandes vues, mais inversée : par défaut on affiche la vue
   OPPOSÉE à celle de la grande image (donc le dos).
   contain → la photo entière est visible, jamais coupée. Le fond
   coloré de la vignette montre autour. */
.products__thumb-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* État par défaut : vignette montre le DOS (puisque la grande image est en face) */
.products__thumb-img--back  { opacity: 1; }
.products__thumb-img--front { opacity: 0; }

/* État "is-back" : on a inversé, la vignette montre maintenant la FACE */
.products__visual.is-back .products__thumb-img--back  { opacity: 0; }
.products__visual.is-back .products__thumb-img--front { opacity: 1; }

/* (.products__name retiré : le nom de coloris est désormais affiché
   directement SUR l'image via .products__label.) */


/* ============================================================
   6. SECTION HEADWEAR — Casquette, mise en page éditoriale
   Grille 2 colonnes (image | espace blanc + texte).
   Esthétique : beaucoup de blanc, gros titre serif, corps fin sans-serif.
   ============================================================ */

.headwear {
    background-color: #ffffff;
    color: #1a1a1a;
    /* Padding-top resserré pour enchaîner avec la section vidéo,
       padding-bottom très serré pour coller directement à la
       section pull qui suit (tac-tac, sans rupture). */
    padding: 40px 24px 24px;
}

.headwear__grid {
    display: grid;
    /* 1fr / 1fr : image et colonne texte de même largeur (image
       légèrement réduite vs ancien 1.15fr). align-items: start →
       les deux colonnes démarrent en haut sans s'étirer l'une sur
       l'autre ; le texte ne se retrouve plus collé tout en bas sur
       grand écran. */
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    width: 100%;
    align-items: start;
}


/* ----- Colonne gauche : grand carré 1:1 ----- */

.headwear__hero {
    margin: 0;
    height: 100%;
    /* Le figure remplit la hauteur de la rangée; l'img dedans
       fait elle-même son carré 1:1. */
}

/* Image principale — carré (matche le ratio source 1254×1254). */
.headwear__hero-img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
    background-color: #ECEBED;
    display: block;
}


/* ----- Colonne droite : vignettes + texte ----- */

.headwear__side {
    display: flex;
    flex-direction: column;
    /* Hauteur naturelle (vignettes + texte) — les deux colonnes
       ne s'alignent plus en hauteur, l'image dépasse simplement
       sous le texte sur grand écran. */
}

/* 2 vignettes côte à côte — ratio 4:5 pour matcher les photos
   sources (1122×1402), donc zéro crop. */
.headwear__thumbs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.headwear__thumb {
    margin: 0;
}

.headwear__thumb-img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center;
    background-color: #ECEBED;
    display: block;
}


/* ----- Bloc texte éditorial ----- */

.headwear__copy {
    /* Le texte vient juste sous les vignettes, séparé par un
       padding-top généreux. Plus de margin-top: auto qui poussait
       le bloc tout en bas de la colonne — sur grand écran ça
       décrochait totalement les vignettes du texte. */
    padding-top: 80px;
    /* Largeur de lecture confortable (~52 caractères au max) */
    max-width: 460px;
}

/* Surtitre / kicker — Inter, très petit, ultra-lettré */
.headwear__kicker {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #8a8579;
    margin-bottom: 28px;
}

/* Grand titre — serif, fin, très grand pour le contraste éditorial */
.headwear__title {
    font-family: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
    font-weight: 400;
    font-size: 68px;
    line-height: 1.02;
    letter-spacing: -0.01em;
    color: #1a1a1a;
    margin-bottom: 32px;
}

/* Corps de texte — Inter léger, line-height aéré pour le confort */
.headwear__text {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 1.75;
    letter-spacing: 0.005em;
    color: #2a2a2a;
    margin-bottom: 36px;
}

/* Lien d'action — sobre, fin, souligné avec offset */
.headwear__cta {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #1a1a1a;
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 1px;
    transition: opacity 0.25s ease, text-underline-offset 0.25s ease;
}

.headwear__cta:hover {
    opacity: 0.6;
    text-underline-offset: 8px;
}


/* ============================================================
   6.bis SECTION POLOS — Polo noir + Polo crème
   Mise en page éditoriale 2 colonnes :
   - Gauche : grille 2 cartes carrées (hover = cross-fade face↔dos)
   - Droite : grand bloc "Collection" pleine hauteur (image + texte)
   Proportion : bloc droit carré (1/1) → 2 cartes carrées à gauche
   tiennent dans la moitié haute de sa hauteur, le bas de la colonne
   gauche reste libre pour de futurs produits.
   ============================================================ */

.polos {
    background-color: #ffffff;
    color: #1a1a1a;
    /* Rythme serré : enchaîne tac-tac avec les sections voisines, très
       peu de blanc entre les chapitres (cf. casquette → pull). */
    padding: 20px 24px 24px;
}

.polos__grid {
    /* 2 colonnes 50/50. align-items: start → les deux colonnes
       gardent leur hauteur naturelle, le bas de la colonne gauche
       reste libre comme demandé. */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}


/* ----- Colonne gauche : grille 2 cartes ----- */

.polos__products {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    /* La colonne gauche ne s'étire PAS sur toute la hauteur du bloc
       droit : on la laisse à sa hauteur naturelle (= hauteur des 2
       cartes), ce qui laisse l'espace blanc en dessous demandé. */
    align-self: start;
}

.polos__card {
    display: flex;
    flex-direction: column;
    /* Contexte pour poser le nom du coloris PAR-DESSUS l'image */
    position: relative;
}

/* Visuel produit — carré 1:1, fond gris clair neutre.
   Le produit est centré sans crop (object-fit: contain dans les
   img filles). Les deux vues sont stackées et se cross-fadent au
   survol via une classe hover sur le visuel. */
.polos__visual {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    /* L'image remplit désormais toute la carte (cf. .polos__view : plus
       de padding), donc le fond intégré au PNG couvre tout le cadre et
       AUCUN anneau de cette couleur n'apparaît autour de la photo.
       Cette valeur ne sert plus que de fond d'attente pendant le
       chargement de l'image. */
    background-color: #E5E5E5;
}

/* Les deux photos sont stackées en permanence et chargées.
   Le swap se fait par cross-fade d'opacité — jamais on ne voit
   le fond gris apparaître entre les deux. */
.polos__view {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* contain : le polo entier reste visible, centré, sans rognage.
       Image carrée dans un cadre carré → elle remplit exactement la
       carte. Pas de padding : ainsi le fond intégré au PNG couvre
       tout le cadre (aucun anneau de la couleur de carte visible
       autour), quelle que soit la couleur de fond du fichier (crème,
       kaki, etc.). Le vêtement garde sa marge propre, déjà présente
       dans le PNG. */
    object-fit: contain;
    object-position: center;
    display: block;
    transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.polos__view--front { opacity: 1; }

/* La photo de DOS est cadrée ~6 % plus petite que la photo de FACE
   dans les fichiers source (vêtement shooté un peu plus loin). Sans
   correction, le survol front→back donne une impression de "dézoom".
   On agrandit donc la vue de dos pour caler la taille du vêtement sur
   celle de face → le fondu devient un vrai cross-fade sur place, sans
   saut d'échelle. Transform statique (non animée) : seule l'opacité
   transitionne. overflow:hidden sur .polos__visual masque le léger
   débordement du fond. */
.polos__view--back {
    opacity: 0;
    transform: scale(1.065);
    transform-origin: center;
}

/* Cross-fade au survol (uniquement appareils avec pointeur fin) */
@media (hover: hover) {
    .polos__visual:hover .polos__view--front { opacity: 0; }
    .polos__visual:hover .polos__view--back  { opacity: 1; }
}

/* Nom du coloris affiché SUR l'image (bas droite), comme les pulls */
.polos__name {
    position: absolute;
    bottom: 16px;
    right: 16px;
    z-index: 2;
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}


/* ----- Colonne droite : bloc collection pleine hauteur ----- */

.polos__collection {
    position: relative;
    /* Carré : avec la grille 50/50, le bloc droit a une largeur de
       50% de la section ; en aspect-ratio 1:1 il est donc carré.
       Résultat : les 2 cartes carrées à gauche (chacune 25% de
       largeur, soit 25% en hauteur) tiennent exactement dans la
       moitié haute du bloc droit. */
    aspect-ratio: 1 / 1;
    overflow: hidden;
    /* Fallback de couleur si l'image de fond n'est pas posée */
    background-color: #e8e6e1;
}

/* Image de fond du bloc collection — composition produit éditoriale. */
.polos__collection-media {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: url('../assets/images/products/MAN/POLO/polo-composition.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Voile sombre subtil en bas → garde le texte lisible même quand
   l'image de fond sera posée (et quelle qu'elle soit). */
.polos__collection-veil {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 45%,
        rgba(0, 0, 0, 0.35) 100%
    );
    pointer-events: none;
}

/* Contenu (kicker / titre / paragraphe / lien) — collé en bas
   à gauche, marges généreuses pour l'effet éditorial. */
.polos__collection-content {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 40px 48px;
    max-width: 560px;
    color: #fff;
}

.polos__collection-kicker {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 18px;
}

.polos__collection-title {
    font-family: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
    font-weight: 400;
    font-size: 64px;
    line-height: 1.02;
    letter-spacing: -0.01em;
    color: #fff;
    margin-bottom: 18px;
}

.polos__collection-text {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 1.7;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 26px;
    max-width: 440px;
}

/* Lien "DISCOVER" — souligné, fin, espacé, en bas du bloc */
.polos__collection-link {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 1px;
    transition: opacity 0.25s ease, text-underline-offset 0.25s ease;
}

.polos__collection-link:hover {
    opacity: 0.75;
    text-underline-offset: 9px;
}


/* ============================================================
   7. SECTION TEE-SHIRTS — "Le tee", lookbook plein largeur
   Bande bord-à-bord de 3 coloris (blanc / gris / noir). Chaque
   cellule est un carré 1:1 (= ratio source 1254²) → l'image remplit
   pile la cellule : aucun crop du vêtement, aucun letterbox, et le
   fond intégré au PNG couvre tout (pas d'anneau de couleur de carte).
   Survol = cross-fade face↔dos en pur CSS (pas de JS).
   ============================================================ */

.tees {
    background-color: #ffffff;
    color: #1a1a1a;
    /* Rythme serré : enchaîne tac-tac sous la section Polos et au-dessus
       du chapitre Survêt, très peu de blanc entre les chapitres. */
    padding: 16px 0 24px;
}

/* Intro éditoriale minimale, centrée (le seul texte de la section) */
.tees__intro {
    text-align: center;
    margin-bottom: 28px;
    /* Padding latéral uniquement sur le texte, pas sur la bande */
    padding: 0 24px;
}

.tees__kicker {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #8a8579;
    margin-bottom: 16px;
}

.tees__title {
    font-family: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
    font-weight: 400;
    font-size: 56px;
    line-height: 1.02;
    letter-spacing: -0.01em;
    color: #1a1a1a;
    margin: 0;
}

/* Bande 3 colonnes égales — plus collées : un léger gap entre les
   cartes + un padding latéral les détachent des bords de l'écran.
   Les cellules sont donc un peu plus petites, avec une fine ligne de
   respiration entre elles. */
.tees__band {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    width: 100%;
    padding: 0 24px;
}

.tees__item {
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Scène carrée 1:1 — l'image carrée la remplit exactement */
.tees__visual {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    /* Fond d'attente proche du fond des PNG (visible juste le temps
       du chargement, ensuite l'image couvre tout). */
    background-color: #EDECEC;
}

/* Les 2 vues stackées en permanence, échangées par cross-fade */
.tees__view {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.tees__view--front { opacity: 1; }

/* La vue de DOS est cadrée ~2 % plus petite que la FACE dans les
   fichiers source. On la cale à la taille de la face pour que le
   survol soit un vrai fondu sur place, sans impression de "dézoom".
   Transform statique (non animée) : seule l'opacité transitionne. */
.tees__view--back {
    opacity: 0;
    transform: scale(1.02);
    transform-origin: center;
}

/* Cross-fade au survol (appareils à pointeur fin uniquement) */
@media (hover: hover) {
    .tees__visual:hover .tees__view--front { opacity: 0; }
    .tees__visual:hover .tees__view--back  { opacity: 1; }
}

/* Nom du coloris affiché SUR l'image (bas droite), comme les pulls */
.tees__name {
    position: absolute;
    bottom: 16px;
    right: 16px;
    z-index: 2;
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}


/* ============================================================
   7.bis SECTION SURVÊTS — "Le survêt", 2 carrés
   En-tête éditorial asymétrique (index 04 + filet), distinct des
   chapitres précédents. Les deux cartes révèlent le DOS au survol
   (pur CSS, pas de clic/tap). Carte droite = Survêt 01 configurable :
   pastilles de couleur DANS le carré ; le JS ne change que la couleur,
   le survol gère le dos.
   Images source en 4:5 portrait dans des cartes carrées → object-fit
   contain + fond de carte calé EXACTEMENT sur le fond de chaque PNG
   (crème #EBE6E7, gris #E9E5E5, noir #C3C0BF) → aucun cadre visible.
   ============================================================ */

.survets {
    background-color: #ffffff;
    color: #1a1a1a;
    /* Rythme serré : enchaîne tac-tac sous le chapitre Tee (très peu de
       blanc), gutter 24px standard. Bottom court avant le footer sombre. */
    padding: 14px 24px 28px;
}

/* ----- En-tête éditorial asymétrique ----- */
.survets__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-bottom: 28px;
    padding-bottom: 18px;
    /* Filet fin sous l'en-tête → signature éditoriale, casse avec les
       intros centrées des autres chapitres. */
    border-bottom: 1px solid #e7e4df;
}

.survets__heading {
    display: flex;
    align-items: baseline;
    gap: 18px;
}

/* Grand index décoratif "04" en serif clair */
.survets__index {
    font-family: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
    font-weight: 400;
    font-size: 30px;
    line-height: 1;
    color: #c4bdb0;
    /* Chiffres alignés, léger lettrage */
    letter-spacing: 0.02em;
    font-variant-numeric: lining-nums;
}

.survets__title {
    font-family: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
    font-weight: 400;
    font-size: 52px;
    line-height: 1;
    letter-spacing: -0.01em;
    color: #1a1a1a;
    margin: 0;
}

/* Accroche à droite — Inter, lettrée, discrète */
.survets__lead {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #9a958c;
    margin: 0;
}

/* 2 carrés côte à côte */
.survets__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    width: 100%;
}

.survet {
    display: flex;
    flex-direction: column;
}

/* Scène carrée 1:1. */
.survet__visual {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    /* Fallback neutre, visible uniquement le temps du chargement
       (ensuite le backdrop flou ci-dessous couvre tout). */
    background-color: #E8E4E2;
}

/* Backdrop flou : copie zoomée + floutée de la PHOTO elle-même, posée
   derrière la vue nette. Comme l'image est en 4:5 dans un carré, il
   reste ~10 % de vide à gauche/droite ; ce backdrop les remplit avec
   le MÊME fond de salle (la photo n'est pas monochrome : il y a la
   lumière et le dégradé du studio). Résultat : la lumière se prolonge
   en continu, plus aucune "coupure sèche" comme avec un aplat de
   couleur. L'URL est fournie par --survet-bg (inline / JS). */
.survet__visual::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--survet-bg);
    background-size: cover;
    background-position: center;
    /* Léger zoom : évite que le flou laisse apparaître des bords. */
    transform: scale(1.2);
    filter: blur(28px);
}

/* Les vues empilées (au-dessus du backdrop), échangées par cross-fade */
.survet__view {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    opacity: 0;
    transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Le dos du Survêt 01 est cadré ~2-3 % plus petit que la face → on le
   cale à la taille de la face pour un fondu sans saut d'échelle. */
.survet--config .survet__view[data-side="back"] {
    transform: scale(1.025);
    transform-origin: center;
}

/* --- Carte gauche (Survêt 02 noir) : dos au survol, pur CSS --- */
.survet__visual--noir2 .survet__view--front { opacity: 1; }
.survet__visual--noir2 .survet__view--back  { opacity: 0; }

@media (hover: hover) {
    .survet__visual--noir2:hover .survet__view--front { opacity: 0; }
    .survet__visual--noir2:hover .survet__view--back  { opacity: 1; }
}

/* --- Carte droite (Survêt 01) : la FACE de la couleur active est
   visible par défaut ; au survol on bascule sur le DOS de cette même
   couleur. Le JS ne fait que changer data-color sur le visuel. --- */
.survet--config .survet__visual[data-color="creme"] .survet__view[data-color="creme"][data-side="front"],
.survet--config .survet__visual[data-color="gris"]  .survet__view[data-color="gris"][data-side="front"] {
    opacity: 1;
}

@media (hover: hover) {
    .survet--config .survet__visual[data-color="creme"]:hover .survet__view[data-color="creme"][data-side="front"],
    .survet--config .survet__visual[data-color="gris"]:hover  .survet__view[data-color="gris"][data-side="front"] {
        opacity: 0;
    }
    .survet--config .survet__visual[data-color="creme"]:hover .survet__view[data-color="creme"][data-side="back"],
    .survet--config .survet__visual[data-color="gris"]:hover  .survet__view[data-color="gris"][data-side="back"] {
        opacity: 1;
    }
}

/* ----- Pastilles de couleur, posées DANS le carré (bas gauche) ----- */
.survet__swatches {
    position: absolute;
    left: 18px;
    bottom: 18px;
    z-index: 4;
    display: flex;
    gap: 9px;
}

.survet__swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--swatch, #ccc);
    border: 1px solid rgba(0, 0, 0, 0.16);
    /* Légère ombre pour décoller la pastille de la photo */
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.14);
    padding: 0;
    cursor: pointer;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.survet__swatch:hover {
    transform: scale(1.14);
}

/* Anneau de sélection autour de la pastille active */
.survet__swatch.is-active {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px #1a1a1a;
}

.survet__swatch:focus-visible {
    outline: 2px solid #1a1a1a;
    outline-offset: 3px;
}

/* ----- Légende sous la carte — nom serif + coloris raffiné ----- */
.survet__caption {
    padding-top: 18px;
}

/* Nom du produit — serif (rappelle les titres), plus présent */
.survet__name {
    font-family: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 1.1;
    color: #1a1a1a;
    margin: 0 0 5px;
}

/* Coloris affiché SUR l'image (bas droite), comme les pulls ; mis à
   jour par le JS pour la carte configurable (data-cname). z-index 4
   pour rester au-dessus des vues ; les pastilles sont en bas à gauche. */
.survet__color {
    position: absolute;
    bottom: 18px;
    right: 18px;
    z-index: 4;
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

/* Texte réservé aux lecteurs d'écran */
.survet__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ============================================================
   8. FOOTER
   Bloc sombre éditorial qui ferme la page.
   Trois étages :
     1. Newsletter (ancre #newsletter)
     2. Colonnes (brand + 3 colonnes de liens)
     3. Bandeau bas (copyright + légal + langue)
   ============================================================ */

.footer {
    background-color: #0a0a0a;
    color: #fff;
    font-family: 'Inter', sans-serif;
    /* Bordure haute très discrète pour décoller du blanc des sections
       du dessus sans casser la transition. */
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}


/* ----- Kicker générique du footer (même style partout) ----- */

.footer__kicker {
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}


/* ----- ÉTAGE 1 — Newsletter ----- */

.footer__newsletter {
    padding: 96px 24px 80px;
    /* Liseré bas très discret pour séparer du bloc colonnes */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer__newsletter-inner {
    /* Bloc centré, largeur limitée pour une lecture confortable */
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.footer__newsletter .footer__kicker {
    margin-bottom: 22px;
}

/* Titre "Réservez votre pièce." — police moderne (Space Grotesk),
   dans l'esprit du hero, plus contemporaine que le serif. */
.footer__newsletter-title {
    font-family: var(--font-modern);
    font-weight: 600;
    font-size: 54px;
    line-height: 1.04;
    letter-spacing: -0.02em;
    color: #fff;
    margin-bottom: 18px;
}

.footer__newsletter-text {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 36px;
}


/* ----- Formulaire newsletter ----- */

.footer__form {
    max-width: 520px;
    margin: 0 auto;
    text-align: left;
}

/* Label visuellement caché mais accessible (technique sr-only) */
.footer__form-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.footer__form-row {
    /* Input à gauche + bouton à droite, sur la même ligne, séparés
       par un liseré simple. Pas de "card", pas de bordure exotique. */
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    transition: border-color 0.25s ease;
}

.footer__form-row:focus-within {
    border-bottom-color: #fff;
}

.footer__form-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.02em;
    padding: 14px 4px;
}

.footer__form-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
    font-weight: 300;
}

.footer__form-input:-webkit-autofill,
.footer__form-input:-webkit-autofill:hover,
.footer__form-input:-webkit-autofill:focus {
    /* Évite le fond bleu/jaune Chrome sur autofill */
    -webkit-text-fill-color: #fff;
    transition: background-color 5000s ease-in-out 0s;
}

.footer__form-button {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    padding: 14px 6px 14px 20px;
    transition: opacity 0.25s ease, letter-spacing 0.25s ease;
}

.footer__form-button:hover {
    opacity: 0.7;
    letter-spacing: 0.28em;
}

.footer__form-button:focus-visible {
    outline: 1px solid rgba(255, 255, 255, 0.5);
    outline-offset: 4px;
}

.footer__form-note {
    margin-top: 14px;
    font-size: 11px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.02em;
}


/* ----- ÉTAGE 2 — Colonnes (brand + 3 colonnes de liens) ----- */

.footer__main {
    padding: 72px 24px 56px;
}

.footer__main-inner {
    /* Grille 4 colonnes : 2fr (brand large) + 1fr + 1fr + 1fr (liens).
       align-items: start → tout démarre en haut, le bloc brand respire
       sur la hauteur des colonnes. */
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 48px;
    align-items: start;
}

/* Bloc marque */
.footer__brand {
    max-width: 320px;
}

.footer__logo {
    display: inline-block;
    font-family: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
    font-weight: 500;
    font-size: 30px;
    letter-spacing: 0.02em;
    color: #fff;
    margin-bottom: 20px;
    transition: opacity 0.25s ease;
}

.footer__logo:hover {
    opacity: 0.7;
}

.footer__tagline {
    font-size: 13px;
    font-weight: 300;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
}

/* Colonnes de liens */
.footer__col {
    /* Pas de styles d'éléments imbriqués imposés par nav par défaut */
}

.footer__col-title {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 22px;
}

.footer__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer__link {
    display: inline-block;
    color: #fff;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.01em;
    /* Souligné fin invisible par défaut, apparaît au survol */
    background-image: linear-gradient(#fff, #fff);
    background-repeat: no-repeat;
    background-size: 0% 1px;
    background-position: 0 100%;
    transition: background-size 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.25s ease;
    padding-bottom: 2px;
}

.footer__link:hover {
    background-size: 100% 1px;
}

/* Bloc "Suivre" — réseaux à venir + e-mail de contact */
.footer__soon {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 14px;
    max-width: 240px;
}

.footer__contact {
    font-size: 14px;
    font-weight: 400;
}


/* ----- ÉTAGE 3 — Bandeau bas (copyright / langue) ----- */

.footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 22px 24px;
}

.footer__bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.footer__copy {
    font-size: 11px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.05em;
}

.footer__legal {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Modifier --legal : taille réduite, opacité atténuée — c'est du légal */
.footer__link--legal {
    font-size: 11px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.05em;
}

/* Switcher langue — calé sur le style de la nav pour cohérence */
.footer__lang {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.7);
}

.footer__lang-link {
    color: #fff;
    opacity: 0.5;
    transition: opacity 0.25s ease;
}

.footer__lang-link:hover {
    opacity: 1;
}

.footer__lang-link--active {
    opacity: 1;
    pointer-events: none;
    cursor: default;
}

.footer__lang-sep {
    opacity: 0.4;
    font-size: 10px;
}


/* ============================================================
   7. RESPONSIVE
   Approche desktop-first. On adapte vers le bas.
   ============================================================ */

/* --- Grands écrans (27" / 32" / 4K) ---
   Sections produits + headwear restent pleine largeur, sans cap.
   On retouche juste la taille des éléments cliquables (vignettes
   produit + label) pour qu'ils restent proportionnés. La section
   headwear reprend son comportement de base — l'image grandit
   naturellement avec le viewport. */
@media (min-width: 1600px) {

    .products {
        padding: 14px 0 16px;
    }

    .products__grid {
        gap: 14px;
        padding: 0 24px;
    }

    .products__thumb {
        width: 56px;
        height: 70px;
        bottom: 18px;
        left: 18px;
    }

    .products__label {
        font-size: 12px;
        bottom: 18px;
        right: 18px;
    }
}

/* --- Écrans très larges (32" 4K, ultra-wide 2200px+) --- */
@media (min-width: 2200px) {

    .products__thumb {
        width: 60px;
        height: 75px;
        bottom: 20px;
        left: 20px;
    }

    .products__label {
        font-size: 13px;
        bottom: 20px;
        right: 20px;
    }
}

/* --- Tablette --- */
@media (max-width: 1024px) {

    .nav {
        padding: 24px 24px;
    }

    .nav__list {
        gap: 24px;
    }

    .hero__title {
        font-size: 72px;
    }

    .brand-video__title {
        font-size: 64px;
    }

    .hero__caption--left {
        left: 28px;
    }

    .hero__caption--right {
        right: 28px;
        max-width: 320px;
    }

    .hero__caption {
        bottom: 32px;
    }

    .products {
        padding: 12px 0 14px;
    }

    .products__grid {
        gap: 10px;
        padding: 0 24px;
    }

    .products__thumb {
        width: 50px;
        height: 62px; /* 50 × 1.25 = ratio 4:5 */
        bottom: 14px;
        left: 14px;
    }

    .products__label {
        font-size: 11px;
        bottom: 14px;
        right: 14px;
    }

    /* Headwear — tablette : padding-top serré, titre ramené */
    .headwear {
        padding: 32px 24px 20px;
    }

    .headwear__grid {
        gap: 32px;
    }

    .headwear__thumbs {
        gap: 10px;
    }

    .headwear__title {
        font-size: 54px;
    }

    .headwear__copy {
        padding-top: 48px;
    }

    /* Polos — tablette : on resserre, le titre rétrécit. La grille
       reste en 2 colonnes (le bloc droit reste carré, donc encore
       confortable). */
    .polos {
        padding: 18px 24px 24px;
    }

    .polos__grid {
        gap: 18px;
    }

    .polos__products {
        gap: 10px;
    }

    .polos__collection-content {
        padding: 32px 36px;
    }

    .polos__collection-title {
        font-size: 48px;
    }

    .polos__collection-text {
        font-size: 13px;
    }

    /* Tees — tablette : on garde la bande 3 colonnes (cellules carrées
       encore confortables), on réduit juste le titre. */
    .tees__title {
        font-size: 44px;
    }

    /* Survêts — tablette : 2 carrés encore confortables, titre réduit */
    .survets__title {
        font-size: 44px;
    }

    /* Footer — tablette : on resserre les paddings et on passe les
       colonnes en 2×2 (brand prend toute la ligne du haut). */
    .footer__newsletter {
        padding: 72px 24px 64px;
    }

    .footer__newsletter-title {
        font-size: 52px;
    }

    .footer__main {
        padding: 56px 24px 44px;
    }

    .footer__main-inner {
        grid-template-columns: 1fr 1fr;
        gap: 40px 32px;
    }

    .footer__brand {
        grid-column: 1 / -1;
        max-width: none;
    }

    .footer__bottom {
        padding: 20px 24px;
    }

    .footer__legal {
        gap: 18px;
    }
}

/* --- Mobile --- */
@media (max-width: 720px) {

    .nav {
        padding: 20px 16px;
    }

    /* Sur mobile : on cache les liens latéraux, on garde le logo centré.
       (À étoffer plus tard avec un menu burger si besoin) */
    .nav__list {
        display: none;
    }

    .nav__inner {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .nav__logo {
        font-size: 22px;
    }

    .hero__title {
        font-size: 48px;
    }

    .hero__title-sup {
        font-size: 12px;
    }

    .brand-video__title {
        font-size: 42px;
    }

    /* Sur mobile, les deux captions passent l'une au-dessus de l'autre
       pour rester lisibles. La droite passe à gauche aussi. */
    .hero__caption--left {
        left: 20px;
        bottom: 180px;
    }

    .hero__caption--right {
        right: 20px;
        left: 20px;
        bottom: 24px;
        max-width: none;
        text-align: left;
    }

    .hero__lede {
        font-size: 13px;
    }

    /* Section produits — passage à 1 colonne empilée sur mobile.
       La grille reste pleine largeur (gap 0). La vignette reste
       cliquable et bien visible. */
    .products {
        padding: 18px 0 56px;
    }

    .products__grid {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 0 16px;
        max-width: none;
    }

    .products__thumb {
        width: 48px;
        height: 60px; /* 48 × 1.25 = ratio 4:5 */
        bottom: 12px;
        left: 12px;
    }

    .products__label {
        font-size: 11px;
        bottom: 12px;
        right: 12px;
    }

    /* Headwear — mobile : passage en 1 colonne empilée.
       Ordre : grande image → vignettes → texte. */
    .headwear {
        padding: 24px 16px 18px;
    }

    .headwear__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .headwear__copy {
        padding-top: 12px;
        margin-top: 0;
        max-width: none;
    }

    .headwear__title {
        font-size: 42px;
    }

    .headwear__text {
        font-size: 14px;
    }

    .headwear__thumbs {
        gap: 8px;
    }

    /* Polos — mobile : empilement 1 colonne. Le bloc collection
       perd son carré (cassant en portrait) et prend une hauteur
       fixe lisible. Les cartes passent à 2 colonnes serrées
       (le polo reste un produit identifiable même petit). */
    .polos {
        padding: 16px 16px 24px;
    }

    .polos__grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .polos__products {
        gap: 10px;
    }

    .polos__collection {
        /* On abandonne le carré sur mobile : trop grand en portrait.
           Hauteur fixe qui garde un cadrage paysage agréable. */
        aspect-ratio: auto;
        height: 60vh;
        min-height: 360px;
    }

    .polos__collection-content {
        padding: 28px 24px;
    }

    .polos__collection-title {
        font-size: 40px;
        margin-bottom: 14px;
    }

    /* Tees — mobile : 3 carrés côte à côte deviennent trop petits, on
       empile en une seule colonne pleine largeur (effet lookbook
       vertical). Titre et paddings resserrés. */
    .tees {
        padding: 14px 0 24px;
    }

    .tees__band {
        grid-template-columns: 1fr;
        /* Même gutter que le reste du site sur mobile (16px). Le gap
           de 16px sert désormais de respiration verticale entre les
           tees empilés. */
        padding: 0 16px;
    }

    .tees__title {
        font-size: 36px;
    }

    /* Survêts — mobile : les 2 carrés s'empilent en 1 colonne, gutter
       16px standard, titre réduit, rythme serré. */
    .survets {
        padding: 12px 16px 24px;
    }

    .survets__grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .survets__title {
        font-size: 36px;
    }

    .polos__collection-text {
        font-size: 13px;
        margin-bottom: 22px;
    }

    /* Footer — mobile : tout s'empile, paddings serrés, bouton du
       formulaire passe sous l'input pour rester lisible et tapable. */
    .footer__newsletter {
        padding: 56px 16px 48px;
    }

    .footer__newsletter-title {
        font-size: 38px;
    }

    .footer__newsletter-text {
        font-size: 13px;
        margin-bottom: 28px;
    }

    .footer__form-row {
        flex-direction: column;
        align-items: stretch;
        border-bottom: none;
        gap: 14px;
    }

    .footer__form-input {
        border-bottom: 1px solid rgba(255, 255, 255, 0.35);
        padding: 12px 2px;
    }

    .footer__form-button {
        padding: 14px 0;
        text-align: left;
        border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    }

    .footer__main {
        padding: 44px 16px 36px;
    }

    .footer__main-inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .footer__brand {
        max-width: none;
    }

    .footer__col-title {
        margin-bottom: 16px;
    }

    .footer__bottom {
        padding: 20px 16px 28px;
    }

    .footer__bottom-inner {
        /* Sur mobile on empile dans un ordre lisible : légal au milieu,
           copyright en bas, switcher en haut (pratique pour changer
           de langue rapidement). */
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .footer__legal {
        justify-content: flex-start;
        gap: 14px 18px;
    }
}


/* ============================================================
   9. CHAPITRE 02 — FEMME
   Univers visuel dédié à la ligne femme. Tous les titres de cette
   zone utilisent la police display "Bodoni Moda" (haute couture,
   moderne, fort contraste) → rupture nette avec le Cormorant
   Garamond des chapitres homme. Variable dédiée pour pouvoir
   changer cette police d'un seul endroit.
   ============================================================ */

:root {
    --font-femme: 'Bodoni Moda', 'Cormorant Garamond', Georgia, serif;
    /* Grotesque contemporain — sert aux libellés "techniques" (étiquettes
       de section), pour casser la répétition des titres serif centrés. */
    --font-modern: 'Space Grotesk', 'Inter', sans-serif;
}


/* ----- 9.1 Bannière d'ouverture (image campagne + voile noir) ----- */

.femme {
    background-color: #0a0a0a;
}

.femme__banner {
    position: relative;
    width: 100%;
    /* Bandeau généreux mais pas plein écran : il ouvre le chapitre
       sans rivaliser avec le hero. */
    height: min(86vh, 760px);
    min-height: 460px;
    overflow: hidden;
    scroll-snap-align: start;
}

/* Image de campagne. Léger zoom au repos qui s'amplifie doucement
   au survol → la bannière "respire". */
.femme__banner-media {
    position: absolute;
    inset: 0;
    background-image: url('../assets/images/products/WOMAN/VESTE/banierefemme.webp');
    background-size: cover;
    background-position: center 28%;
    background-repeat: no-repeat;
    transform: scale(1.04);
    transition: transform 8s ease-out;
}

@media (hover: hover) {
    .femme__banner:hover .femme__banner-media {
        transform: scale(1.10);
    }
}

/* Voile noir demandé : aplat + dégradé pour ancrer le grand titre
   blanc quelle que soit la luminosité de la photo (la campagne est
   très claire). */
.femme__banner-veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.50) 0%,
            rgba(0, 0, 0, 0.28) 38%,
            rgba(0, 0, 0, 0.48) 100%
        ),
        rgba(0, 0, 0, 0.18);
    pointer-events: none;
}

/* Contenu centré sur la bannière */
.femme__banner-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 24px;
    color: #fff;
}

.femme__kicker {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 22px;
    /* compense le letter-spacing du dernier caractère pour rester
       optiquement centré */
    padding-left: 0.42em;
}

/* Grand titre display — police moderne couture.
   font-variation-settings pilote 2 axes du Bodoni Moda :
     - wght 600  → graisse plus marquée
     - opsz 24   → optical size BAS : réduit le contraste gras/fin,
                   donc les déliés (traits fins du M, du E…) restent
                   visibles même à très grande taille. À 96 (display)
                   ils disparaissaient. */
.femme__title {
    font-family: var(--font-femme);
    font-weight: 600;
    font-optical-sizing: none;
    font-variation-settings: "opsz" 24, "wght" 600;
    font-size: clamp(56px, 12vw, 168px);
    line-height: 0.9;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 26px;
    text-shadow: 0 6px 48px rgba(0, 0, 0, 0.45);
}

.femme__lede {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 1.7;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.9);
    max-width: 460px;
    margin: 0 0 34px;
}

/* CTA contour — se remplit de blanc au survol */
.femme__cta {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #fff;
    padding: 14px 32px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.femme__cta:hover {
    background-color: #fff;
    color: #0a0a0a;
    border-color: #fff;
}


/* ----- 9.2 La veste — éditorial 2 colonnes ----- */

.femme-veste {
    background-color: #ffffff;
    color: #1a1a1a;
    /* Resserré : enchaîne tac-tac sous la bannière femme et au-dessus
       du survêt (même rythme serré que les chapitres homme). */
    padding: 22px 24px 14px;
}

.femme-veste__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 44px;
    align-items: center;
}

/* Visuel : 2 vues empilées, cross-fade face↔dos au survol (pur CSS) */
.femme-veste__visual {
    position: relative;
    margin: 0;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    /* fond calé sur le crème du PNG → aucun cadre visible avec contain */
    background-color: #EFEBE3;
}

.femme-veste__view {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* contain : la veste entière reste visible (broderies du bas
       comprises), jamais rognée. */
    object-fit: contain;
    object-position: center;
    display: block;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.femme-veste__view--front { opacity: 1; }

.femme-veste__view--back {
    opacity: 0;
    transform: scale(1.02);
    transform-origin: center;
}

@media (hover: hover) {
    .femme-veste__visual:hover .femme-veste__view--front { opacity: 0; }
    .femme-veste__visual:hover .femme-veste__view--back  { opacity: 1; }
}

.femme-veste__copy {
    max-width: 460px;
}

.femme-veste__kicker {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #8a8579;
    margin-bottom: 26px;
}

/* Titre — police femme moderne, grand et raffiné.
   opsz 28 + wght 600 → déliés visibles, pas de traits fantômes. */
.femme-veste__title {
    font-family: var(--font-femme);
    font-weight: 600;
    font-optical-sizing: none;
    font-variation-settings: "opsz" 28, "wght" 600;
    font-size: 64px;
    line-height: 1.02;
    letter-spacing: 0.005em;
    color: #1a1a1a;
    margin: 0 0 30px;
}

.femme-veste__text {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 1.75;
    letter-spacing: 0.005em;
    color: #2a2a2a;
    margin-bottom: 34px;
}

.femme-veste__cta {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #1a1a1a;
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 1px;
    transition: opacity 0.25s ease, text-underline-offset 0.25s ease;
}

.femme-veste__cta:hover {
    opacity: 0.6;
    text-underline-offset: 8px;
}


/* ----- 9.3 Le survêt femme — bande 3 coloris ----- */

.femme-survets {
    background-color: #ffffff;
    color: #1a1a1a;
    /* Padding minimal : la section enchaîne directement sous la veste
       et au-dessus du footer (rythme serré comme le reste du site). */
    padding: 10px 0 16px;
}

/* Étiquette de section — version minimale, alignée à GAUCHE, en police
   moderne (Space Grotesk). Remplace l'ancien combo kicker + titre serif
   centré, devenu répétitif. */
.femme-survets__tag {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 0 24px;
    margin: 0 0 12px;
}

.femme-survets__word {
    font-family: var(--font-modern);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: #1a1a1a;
}

.femme-survets__sub {
    font-family: var(--font-modern);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #b0a99e;
}

.femme-survets__band {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    width: 100%;
    padding: 0 24px;
}

.femme-survet {
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Scène portrait 3:4 (= ratio des PNG survêt). Backdrop flou =
   copie zoomée/floutée de la photo, qui prolonge la lumière du
   studio sur les côtés (même technique que les survêts homme). */
.femme-survet__visual {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background-color: #E8E4E2;
}

.femme-survet__visual::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--survet-bg);
    background-size: cover;
    background-position: center;
    transform: scale(1.2);
    filter: blur(28px);
}

.femme-survet__view {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.femme-survet__view--front { opacity: 1; }

.femme-survet__view--back {
    opacity: 0;
    transform: scale(1.02);
    transform-origin: center;
}

@media (hover: hover) {
    .femme-survet__visual:hover .femme-survet__view--front { opacity: 0; }
    .femme-survet__visual:hover .femme-survet__view--back  { opacity: 1; }
}

/* Nom du coloris affiché SUR l'image (bas droite), comme les pulls */
.femme-survet__name {
    position: absolute;
    bottom: 16px;
    right: 16px;
    z-index: 2;
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}


/* ----- 9.4 Responsive Femme ----- */

@media (max-width: 1024px) {

    .femme__banner {
        height: min(70vh, 560px);
    }

    .femme-veste {
        padding: 16px 24px 12px;
    }

    .femme-veste__grid {
        gap: 32px;
    }

    .femme-veste__title {
        font-size: 52px;
    }
}

@media (max-width: 720px) {

    .femme__banner {
        height: 78vh;
        min-height: 440px;
    }

    .femme__lede {
        font-size: 14px;
    }

    /* Veste : empilement 1 colonne (image puis texte) */
    .femme-veste {
        padding: 14px 16px 10px;
    }

    .femme-veste__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .femme-veste__copy {
        max-width: none;
    }

    .femme-veste__title {
        font-size: 44px;
        margin-bottom: 22px;
    }

    /* Survêts : les 3 cartes s'empilent en 1 colonne pleine largeur */
    .femme-survets {
        padding: 8px 0 22px;
    }

    .femme-survets__band {
        grid-template-columns: 1fr;
        padding: 0 16px;
    }

    .femme-survets__tag {
        padding: 0 16px;
    }
}


/* ============================================================
   9.5 ROBE & POLO FEMME
   Réutilisent la carte survêt (.femme-survet*) : backdrop flou +
   contain + cross-fade face↔dos au survol + étiquette moderne
   (.femme-survets__tag). On ne fait qu'ajuster la grille et le
   ratio du visuel. Mini paddings → enchaînement serré.
   ============================================================ */

/* ----- La robe : duo 2 colonnes, visuel 4:5 (= ratio source) ----- */
.femme-robe {
    background-color: #ffffff;
    color: #1a1a1a;
    padding: 8px 0 16px;
}

.femme-robe__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    width: 100%;
    padding: 0 24px;
}

.femme-robe .femme-survet__visual {
    aspect-ratio: 4 / 5;
}

/* ----- Le polo femme : bande 3 coloris, visuel carré (= ratio source) ----- */
.femme-polos {
    background-color: #ffffff;
    color: #1a1a1a;
    padding: 8px 0 18px;
}

.femme-polos .femme-survet__visual {
    aspect-ratio: 1 / 1;
}

@media (max-width: 720px) {

    /* La robe reste en duo (2 colonnes) même sur mobile : deux pièces
       côte à côte se lisent comme une paire. Le polo, lui, suit la règle
       mobile de .femme-survets__band (1 colonne). */
    .femme-robe {
        padding: 6px 0 14px;
    }

    .femme-robe__grid {
        gap: 10px;
        padding: 0 16px;
    }

    .femme-polos {
        padding: 6px 0 16px;
    }
}


/* ============================================================
   10. PRÉCOMMANDE — formulaire d'intérêt
   Posé dans le bloc sombre du footer (#newsletter). Réutilise
   .footer__newsletter-inner (centré, max 720px) + .footer__kicker
   et .footer__newsletter-title/text pour le titre & le chapeau.
   Ici : pastilles de sélection (pièces), champs e-mail / note,
   bouton d'envoi, et message d'état. À la soumission, le JS
   construit un e-mail prérempli (mailto) vers la marque.
   ============================================================ */

.preorder__form {
    max-width: 560px;
    margin: 8px auto 0;
    text-align: left;
}

/* Honeypot anti-bot : sorti de l'écran, invisible et inaccessible aux
   humains (aria-hidden + tabindex -1 côté HTML). Les bots le remplissent
   → le PHP rejette. Ne PAS utiliser display:none (certains bots l'ignorent). */
.preorder__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ----- Sélecteur de pièces (pastilles / chips) ----- */
.preorder__fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 26px;
}

.preorder__legend {
    display: block;
    width: 100%;
    padding: 0;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 16px;
}

.preorder__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

/* La case réelle est masquée ; le <span> sert de pastille cliquable */
.preorder__chip {
    position: relative;
    cursor: pointer;
}

.preorder__chip input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    margin: 0;
}

.preorder__chip span {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.85);
    padding: 9px 16px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    user-select: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.preorder__chip:hover span {
    border-color: rgba(255, 255, 255, 0.6);
}

/* Pastille cochée : pleine, inversée */
.preorder__chip input:checked + span {
    background-color: #fff;
    color: #0a0a0a;
    border-color: #fff;
}

.preorder__chip input:focus-visible + span {
    outline: 2px solid rgba(255, 255, 255, 0.65);
    outline-offset: 2px;
}

/* ----- Champs e-mail / note ----- */
.preorder__row {
    margin-bottom: 18px;
}

.preorder__label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 8px;
}

.preorder__input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.02em;
    padding: 12px 2px;
    outline: none;
    transition: border-color 0.25s ease;
}

.preorder__input::placeholder {
    color: rgba(255, 255, 255, 0.4);
    font-weight: 300;
}

.preorder__input:focus {
    border-bottom-color: #fff;
}

.preorder__textarea {
    resize: vertical;
    min-height: 48px;
    line-height: 1.6;
}

/* ----- Bouton d'envoi ----- */
.preorder__submit {
    width: 100%;
    margin-top: 10px;
    background-color: #fff;
    color: #0a0a0a;
    border: 1px solid #fff;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    padding: 16px 24px;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.preorder__submit:hover {
    background-color: transparent;
    color: #fff;
}

.preorder__submit:focus-visible {
    outline: 1px solid rgba(255, 255, 255, 0.6);
    outline-offset: 4px;
}

/* ----- Message d'état (sous le bouton) ----- */
.preorder__feedback {
    margin-top: 16px;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.25s ease;
}

.preorder__feedback--ok  { color: #bfe3c2; }
.preorder__feedback--err { color: #f0b3b3; }

@media (max-width: 720px) {
    .preorder__submit {
        letter-spacing: 0.18em;
    }
}