/* Gallery 73 — feuille de style de la démo.
   Palette et typographies reprises de la planche de marque :
   marine #0D1B2A, ardoise #3A4656, or #C9A66B, gris #F2F2F2, Montserrat. */

:root {
  --marine: #0D1B2A;
  --ardoise: #3A4656;
  --or: #C9A66B;
  --or-clair: #E0C79A;
  --gris: #F2F2F2;
  --blanc: #FFFFFF;
  --texte: #0D1B2A;
  --doux: #6B7684;
  --bord: #E3E5E9;
  --large: 1280px;
  --police: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--police);
  color: var(--texte);
  background: var(--blanc);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Le site pilote beaucoup de panneaux avec l'attribut « hidden ». Toute
   règle « display: flex » ou « grid » posée dessus l'emporte sur le
   « display: none » implicite du navigateur, et l'élément reste visible
   sans que rien ne le signale. On tranche une fois pour toutes ici. */
[hidden] { display: none !important; }

h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
p { margin: 0 0 1rem; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ---------- Bandeau de démonstration ---------- */

.bandeau-demo {
  background: var(--or); color: var(--marine);
  text-align: center; padding: .5rem 1rem;
  font-size: .82rem; font-weight: 600; letter-spacing: .02em;
}
.bandeau-demo a { text-decoration: underline; }

/* ---------- Barres du haut ---------- */

.barre-promo {
  background: var(--marine); color: var(--blanc);
  text-align: center; padding: .6rem 1rem;
  font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
}
.barre-promo .separateur { color: var(--or); margin: 0 .6rem; }

.barre-services {
  display: flex; justify-content: center; gap: 2.5rem; flex-wrap: wrap;
  background: var(--gris); color: var(--ardoise);
  padding: .5rem 1rem; font-size: .74rem; font-weight: 500;
  letter-spacing: .04em;
}
.pictogramme { color: var(--or); margin-right: .35rem; }

/* ---------- En-tête ---------- */

.entete {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 2rem;
  padding: 1rem 2rem;
  max-width: var(--large); margin: 0 auto;
  background: var(--blanc);
}
.entete::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  border-bottom: 1px solid var(--bord);
}

.logo { display: flex; flex-direction: column; line-height: 1; }
.logo-mot {
  font-size: 1.7rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--marine);
}
.logo-chiffre { color: var(--or); margin-left: .12em; }
.logo-baseline {
  font-size: .58rem; font-weight: 600; letter-spacing: .34em;
  text-transform: uppercase; color: var(--doux); margin-top: .4rem;
}

.navigation { display: flex; gap: 1.6rem; flex: 1; }
.navigation a {
  font-size: .8rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: .3rem 0;
  border-bottom: 2px solid transparent;
}
.navigation a:hover { border-bottom-color: var(--or); }
.lien-outlet { color: var(--or); }

.outils-entete { display: flex; align-items: center; gap: .8rem; }
.recherche {
  display: flex; align-items: center; gap: .4rem;
  background: var(--gris); border-radius: 2px; padding: .45rem .7rem;
}
.recherche input {
  border: 0; background: none; font: inherit; font-size: .8rem;
  width: 190px; outline: none; color: var(--texte);
}
.icone {
  background: none; border: 0; cursor: pointer;
  font-size: 1.15rem; color: var(--marine); padding: .2rem; position: relative;
}
.icone:hover { color: var(--or); }
.compteur {
  position: absolute; top: -2px; right: -6px;
  background: var(--or); color: var(--marine);
  font-size: .62rem; font-weight: 800; line-height: 1;
  min-width: 16px; padding: .2rem .25rem; border-radius: 8px; text-align: center;
}

/* ---------- Boutons ---------- */

.bouton {
  display: inline-block; cursor: pointer; border: 1px solid transparent;
  padding: .85rem 1.8rem; font-family: var(--police);
  font-size: .78rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; transition: transform .15s, background .15s, color .15s;
}
.bouton:hover { transform: translateY(-1px); }
.bouton-or { background: var(--or); color: var(--marine); }
.bouton-or:hover { background: var(--or-clair); }
.bouton-clair { background: rgba(255, 255, 255, .12); color: var(--blanc); border-color: rgba(255, 255, 255, .5); }
.bouton-clair:hover { background: var(--blanc); color: var(--marine); }
.bouton-contour { border-color: var(--marine); color: var(--marine); }
.bouton-contour:hover { background: var(--marine); color: var(--blanc); }
.bouton-large { width: 100%; text-align: center; }

/* ---------- Textures denim (en attendant les photos) ---------- */

.denim-indigo, .denim-brut, .denim-noir, .denim-clair, .denim-gris, .denim-ecru {
  position: relative; overflow: hidden;
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .045) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, .06) 0 2px, transparent 2px 4px);
}
.denim-indigo { background-color: #2C4A7C; }
.denim-brut   { background-color: #1B3357; }
.denim-noir   { background-color: #14181D; }
.denim-clair  { background-color: #7FA0C4; }
.denim-gris   { background-color: #565F6B; }
.denim-ecru   { background-color: #C9C3B4; }

/* ---------- Héros ---------- */

.hero {
  background: linear-gradient(135deg, var(--marine) 0%, #16283F 55%, var(--ardoise) 100%);
  color: var(--blanc); padding: 6rem 2rem 6.5rem; position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .03) 0 3px, transparent 3px 6px);
  pointer-events: none;
}
/* Photo de devanture : elle prend toute la place quand le fichier existe,
   et disparaît d'elle-même sinon — le dégradé reste alors visible. */
.hero-fond {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 60%; z-index: 0;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(13, 27, 42, .94) 0%, rgba(13, 27, 42, .72) 45%, rgba(13, 27, 42, .35) 100%);
}
.hero-contenu { max-width: var(--large); margin: 0 auto; position: relative; z-index: 2; }

.note-google {
  display: flex; align-items: center; gap: .55rem; margin-top: 1.6rem;
  font-size: .88rem; color: rgba(255, 255, 255, .82);
}
.note-google .etoiles { color: var(--or); letter-spacing: .12em; }
.note-google .note-chiffre { font-size: 1.15rem; font-weight: 800; color: var(--blanc); }

/* Frise historique */
.histoire { background: var(--gris); max-width: none; }
.frise {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem; max-width: var(--large); margin: 0 auto;
}
.etape-histoire { background: var(--blanc); padding: 1.8rem; border-top: 3px solid var(--or); }
.etape-histoire .annee {
  font-size: 2rem; font-weight: 800; color: var(--or); line-height: 1; margin-bottom: .6rem;
}
.etape-histoire p { font-size: .92rem; margin: 0; }
.surtitre {
  color: var(--or); font-size: .74rem; font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase; margin-bottom: 1.1rem;
}
.hero h1 { font-size: clamp(2.2rem, 5.5vw, 4rem); max-width: 15ch; }
.hero-texte { max-width: 46ch; margin-top: 1.5rem; color: rgba(255, 255, 255, .82); font-size: 1.02rem; }
.hero-actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 2.2rem; }

/* ---------- Les deux mondes ---------- */

.mondes { display: grid; grid-template-columns: 1fr 1fr; }
.monde {
  min-height: 340px; padding: 2.5rem;
  display: flex; flex-direction: column; justify-content: flex-end;
  color: var(--blanc); position: relative; overflow: hidden;
}
.monde-homme { background: linear-gradient(160deg, #1B3357, #0D1B2A); }
.monde-femme { background: linear-gradient(160deg, #7FA0C4, #3A4656); }
.monde::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 5px);
}
.monde > * { position: relative; }
.monde-etiquette {
  font-size: .7rem; font-weight: 700; letter-spacing: .26em;
  text-transform: uppercase; color: var(--or);
}
.monde-titre { font-size: clamp(1.8rem, 3.4vw, 2.7rem); font-weight: 800; line-height: 1.1; margin: .6rem 0 1.2rem; }
.monde-lien {
  font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  border-bottom: 2px solid var(--or); padding-bottom: .3rem; align-self: flex-start;
}
.monde:hover .monde-lien { color: var(--or); }

/* ---------- Sections ---------- */

section { padding: 4.5rem 2rem; }
.selecteur, .univers, .nouveautes, .marques, .avis { max-width: var(--large); margin: 0 auto; }

.section-entete { text-align: center; margin-bottom: 2.5rem; }
.section-entete .surtitre { color: var(--or); }
.section-entete h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
.section-texte { max-width: 56ch; margin: 1rem auto 0; color: var(--doux); }

/* ---------- Sélecteur de style ---------- */

.pastilles { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.pastille {
  border: 1px solid var(--bord); padding: .6rem 1.2rem;
  font-size: .76rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.pastille:hover, .pastille.active { background: var(--marine); color: var(--blanc); border-color: var(--marine); }

/* ---------- Bandeau d'atouts ---------- */

/* Quatre atouts, donc quatre colonnes : en « auto-fit » la troisième largeur
   passait mais pas la quatrième, qui se retrouvait seule sur une ligne. */
.atouts {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--marine); color: var(--blanc); padding: 2.4rem 2rem;
  gap: 1.5rem; text-align: center;
}
.atout {
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  padding: 0 1rem;
}
/* Un filet sépare les colonnes, sauf devant la première. */
.atout + .atout { border-left: 1px solid rgba(255, 255, 255, .12); }
.atout .ic { width: 24px; height: 24px; color: var(--or); margin-bottom: .55rem; }
.atout strong { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; }
.atout span:last-child { font-size: .8rem; color: rgba(255, 255, 255, .68); }

/* Sous 820 px, quatre colonnes deviennent illisibles : on passe à 2 × 2,
   ce qui reste équilibré puisqu'il y a exactement quatre atouts. */
@media (max-width: 820px) {
  .atouts { grid-template-columns: repeat(2, 1fr); row-gap: 2.2rem; padding: 2rem 1.2rem; }
  /* Le filet ne sépare plus que les paires, pas les lignes entre elles. */
  .atout + .atout { border-left: 0; }
  .atout:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, .12); }
}

/* ---------- Univers ---------- */

/* Les catégories défilent latéralement plutôt que de s'empiler en mosaïque :
   une seule ligne, on pousse de côté. Même mécanique que les rails produits. */
.grille-univers {
  display: flex; gap: 1rem; overflow-x: auto;
  scroll-behavior: smooth; scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.grille-univers::-webkit-scrollbar { display: none; }
.carte-univers {
  aspect-ratio: 3 / 4; display: flex; align-items: flex-end; padding: 1.1rem;
  color: var(--blanc); font-weight: 700; font-size: .84rem;
  letter-spacing: .08em; text-transform: uppercase;
}
.carte-univers span { position: relative; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.carte-univers.denim-ecru { color: var(--marine); }
.carte-univers.denim-ecru span { text-shadow: none; }
.carte-univers:hover { outline: 2px solid var(--or); outline-offset: -6px; }

/* ---------- Produits ---------- */

.grille-produits {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.6rem;
}
.produit { display: flex; flex-direction: column; }
.produit-image {
  aspect-ratio: 3 / 4; margin-bottom: .9rem; position: relative;
}
/* En bas de la photo, et non en haut : sur un bonnet ou une casquette, le
   produit occupe le haut du cadre et l'étiquette lui passait dessus
   (client, 03.10). En bas, la photo reste entière. */
.badge {
  position: absolute; bottom: .8rem; left: .8rem; z-index: 2;
  background: var(--blanc); color: var(--marine);
  font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: .3rem .6rem;
}
.badge-or { background: var(--or); }
.produit-marque {
  font-size: .68rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--or); margin-bottom: .3rem;
}
.produit h3 { font-size: .95rem; font-weight: 600; margin-bottom: .4rem; }
.produit-prix { font-weight: 800; margin-bottom: .9rem; }
.bouton-produit {
  background: var(--marine); color: var(--blanc); width: 100%;
  padding: .7rem 1rem; font-size: .7rem; margin-top: auto;
}
.bouton-produit:hover { background: var(--or); color: var(--marine); }
.bouton-produit.ajoute { background: var(--or); color: var(--marine); }

/* ---------- Marques ---------- */

.marques { text-align: center; }
.bande-marques {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2.6rem;
  padding: 2rem 0; border-top: 1px solid var(--bord); border-bottom: 1px solid var(--bord);
}
.bande-marques span {
  font-size: 1.05rem; font-weight: 700; letter-spacing: .05em;
  color: var(--ardoise); opacity: .75;
}
.bande-marques span:hover { opacity: 1; color: var(--marine); }
.mention { font-size: .8rem; color: var(--doux); margin-top: 1rem; }

/* ---------- La boutique ---------- */

.boutique {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center;
  max-width: var(--large); margin: 0 auto;
}
.boutique-visuel { aspect-ratio: 4 / 5; }
.horaires { margin: 1.8rem 0; border-top: 1px solid var(--bord); padding-top: 1.2rem; }
.horaires h3 { font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--or); margin-bottom: .7rem; }
.horaires p { display: flex; justify-content: space-between; margin: 0 0 .35rem; font-size: .9rem; max-width: 320px; }
.horaires span:last-child { font-weight: 600; }
.adresse p { font-size: .95rem; }
.acces-actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.2rem; }

/* ---------- Avis ---------- */

.avis { background: var(--gris); max-width: none; }

/* Les avis défilent latéralement : on peut en aligner autant qu'on veut sans
   allonger la page, et il n'y a plus de dernière carte esseulée. */
.bandeau-avis { position: relative; max-width: var(--large); margin: 0 auto; }
.grille-avis {
  display: flex; gap: 1.5rem; overflow-x: auto;
  scroll-behavior: smooth; scroll-snap-type: x proximity;
  scrollbar-width: none; padding-bottom: .4rem;
}
.grille-avis::-webkit-scrollbar { display: none; }
.preuve {
  flex: 0 0 clamp(260px, 30vw, 340px); scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: var(--blanc); margin: 0; padding: 1.8rem;
}
/* La signature se pose en bas, pour que les cartes s'alignent malgré des
   avis de longueurs différentes. */
.preuve cite { margin-top: auto; padding-top: 1.2rem; }

/* La note globale, sous le titre de la section. */
.note-avis { margin-top: .9rem; font-size: .88rem; color: var(--doux); }
.note-avis .etoiles { margin-right: .4rem; }
.note-avis strong { color: var(--marine); font-size: 1rem; }
/* La note laissée par le client, en tête de son avis. Les étoiles creuses
   restent visibles pour qu'on lise « 4 sur 5 » et pas seulement « 4 ». */
.etoiles-avis {
  color: var(--or);
  letter-spacing: .18em;
  font-size: .95rem;
  margin: 0 0 .9rem;
  line-height: 1;
}

.etoiles-avis .vide { color: var(--bord); }

.bandeau-avis .fleche-rayons { top: 50%; transform: translateY(-50%); }
.bandeau-avis::before,
.bandeau-avis::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 44px;
  z-index: 2; pointer-events: none; opacity: 0; transition: opacity .2s;
}
.bandeau-avis::before { left: 0; background: linear-gradient(90deg, var(--gris), transparent); }
.bandeau-avis::after { right: 0; background: linear-gradient(270deg, var(--gris), transparent); }
.bandeau-avis.debord-gauche::before { opacity: 1; }
.bandeau-avis.debord-droite::after { opacity: 1; }
.etoiles { color: var(--or); letter-spacing: .2em; margin-bottom: .8rem; }
.preuve p { font-size: .92rem; }
.preuve cite {
  font-style: normal; font-weight: 700; font-size: .78rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--doux);
}

/* ---------- En-tête illustré de la boutique ---------- */

.entete-illustree {
  position: relative; overflow: hidden;
  min-height: 260px; display: flex; align-items: center;
  padding: 3rem 2rem; margin-bottom: 2rem;
  background-color: var(--marine); background-size: cover;
  /* 32 % : le sujet des deux photos est dans le tiers haut. */
  background-position: center 32%;
}
/* Voile uniforme : le titre est centré, il peut tomber n'importe où. */
.entete-illustree::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(12, 14, 17, .48);
}
.entete-illustree .section-entete { position: relative; z-index: 1; width: 100%; }
.entete-illustree .surtitre { color: var(--or); }
.entete-illustree h1 { color: var(--blanc); text-shadow: 0 2px 14px rgba(12, 14, 17, .8); }
.entete-illustree .section-texte { color: rgba(255, 255, 255, .86); }

.entete-femme { background-image: url("assets/photos/entete-femme.jpg"); }
.entete-homme { background-image: url("assets/photos/entete-homme.jpg"); }

@media (max-width: 860px) {
  .entete-illustree { min-height: 200px; padding: 2.2rem 1.2rem; }
}

/* ---------- Fiche produit : coloris et volets ---------- */

.bloc-coloris { margin: 1.4rem 0; }
.liste-coloris { display: flex; flex-wrap: wrap; gap: .5rem; }
.coloris {
  width: 52px; height: 66px; overflow: hidden; display: block;
  border: 2px solid transparent; background: var(--gris);
}
.coloris img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.coloris:hover { border-color: var(--bord); }
.coloris.actuel { border-color: var(--or); }
/* Un coloris épuisé reste visible : savoir qu'il existe compte, et il
   restera peut-être une pièce en magasin. */
.coloris.epuise img { filter: grayscale(.8) opacity(.5); }

.choix-longueurs .choix-taille { min-width: 46px; }

.volets-produit {
  grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.2rem; margin-top: 2.5rem;
}
.volet-produit { background: var(--gris); padding: 1.6rem; }
.volet-produit h2 {
  margin: 0 0 1rem; font-size: .88rem; letter-spacing: .1em; text-transform: uppercase;
}
.volet-produit p { font-size: .88rem; margin: 0 0 1rem; }
.volet-produit p:last-child { margin-bottom: 0; }
.volet-produit strong { color: var(--marine); }

.caracs { margin: 0; }
.carac {
  display: flex; gap: 1rem; padding: .5rem 0;
  border-bottom: 1px solid var(--bord); font-size: .88rem;
}
.carac:last-child { border-bottom: 0; }
.carac dt { flex: 0 0 40%; color: var(--doux); font-weight: 600; }
.carac dd { margin: 0; flex: 1; }
.entretien { text-transform: none; }

@media (max-width: 860px) {
  .volets-produit { grid-template-columns: 1fr; margin-top: 1.8rem; }
  .volet-produit { padding: 1.2rem; }
  .carac dt { flex-basis: 45%; }
}

/* ---------- Page Commande ---------- */

.commande { max-width: 780px; margin: 0 auto; padding: 1rem 2rem 4rem; }
.formulaire-commande { display: flex; flex-direction: column; gap: 1.6rem; }
/* « display: flex » l'emporte sur le « display: none » implicite de
   l'attribut hidden : sans cette ligne, le formulaire restait affiché
   sous le message de remerciement. */
.formulaire-commande[hidden] { display: none; }

.bloc-commande { border: 0; padding: 0; margin: 0; }
.bloc-commande legend {
  font-size: .78rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--or-chaud, var(--or));
  padding: 0 0 .9rem;
}

/* Le mode de réception est le premier choix : il change les champs
   demandés et les frais, il mérite d'être une vraie carte cliquable. */
.choix-mode {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: 1rem; margin-bottom: .6rem; cursor: pointer;
  background: var(--gris); border: 1px solid transparent;
}
.choix-mode:has(input:checked) { border-color: var(--or); background: var(--blanc); }
.choix-mode input { margin-top: .2rem; flex: none; accent-color: var(--or); }
.choix-mode span { display: block; font-size: .86rem; color: var(--doux); }
.choix-mode strong {
  display: block; color: var(--marine); font-size: .92rem; margin-bottom: .2rem;
}

.grille-champs { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.pleine-largeur { grid-column: 1 / -1; }
.formulaire-commande label {
  display: block; font-size: .76rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--doux);
}
.formulaire-commande .choix-mode { text-transform: none; letter-spacing: 0; }
.formulaire-commande input[type="text"],
.formulaire-commande input[type="email"],
.formulaire-commande input[type="tel"],
.formulaire-commande textarea {
  width: 100%; margin-top: .35rem; font: inherit; font-size: .9rem;
  text-transform: none; letter-spacing: 0; color: var(--texte);
  padding: .65rem .75rem; border: 1px solid var(--bord); background: var(--blanc);
}
.formulaire-commande input:focus, .formulaire-commande textarea:focus {
  outline: 2px solid var(--or); outline-offset: -1px;
}
.champs-livraison { margin-top: .9rem; }

.recap-lignes { border-top: 1px solid var(--bord); }
.recap-ligne {
  display: flex; align-items: baseline; gap: .8rem;
  padding: .6rem 0; border-bottom: 1px solid var(--bord); font-size: .88rem;
}
.recap-nom { flex: 1; }
.recap-qte { color: var(--doux); font-size: .82rem; }
.recap-prix { font-weight: 700; }
.recap-totaux { padding-top: .9rem; }
.recap-totaux p {
  display: flex; justify-content: space-between; margin: 0 0 .4rem; font-size: .88rem;
}
.recap-total {
  padding-top: .6rem; border-top: 1px solid var(--bord);
  font-size: 1rem !important; color: var(--marine);
}

.erreur-commande {
  padding: .8rem 1rem; margin: 0; font-size: .86rem;
  background: #FDF1F1; border-left: 3px solid #B3261E; color: #7A1C16;
}
.note-paiement { text-align: center; margin: 0; }

.merci-commande { text-align: center; padding: 3rem 1rem; }
.merci-commande h2 { margin: 0 0 .8rem; }
.merci-commande p { max-width: 460px; margin: 0 auto 1.6rem; color: var(--doux); }
.merci-commande .acces-actions { justify-content: center; }

@media (max-width: 640px) {
  .commande { padding: 1rem 1.2rem 3rem; }
  .grille-champs { grid-template-columns: 1fr; }
}

/* ---------- Page Services ---------- */

.services { max-width: 900px; margin: 0 auto; padding: 1rem 2rem 4rem; }

/* Sommaire : une carte par service, qui mène à sa propre page. Trois
   colonnes pour les trois services — une grille en deux colonnes laisserait
   la dernière carte seule sur sa ligne. */
.cartes-services {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem;
}
.carte-service {
  display: flex; flex-direction: column; align-items: flex-start;
  background: var(--gris); padding: 1.8rem; text-decoration: none; color: inherit;
  border-bottom: 2px solid transparent; transition: border-color .2s, transform .2s;
}
.carte-service:hover { border-bottom-color: var(--or); transform: translateY(-2px); }
.carte-service .ic { width: 28px; height: 28px; color: var(--or); margin-bottom: .9rem; }
.carte-service h3 {
  margin: 0 0 .5rem; font-size: 1rem; letter-spacing: .04em; text-transform: uppercase;
}
.carte-service p { margin: 0; font-size: .88rem; color: var(--doux); }
.carte-service-lien {
  margin-top: 1.1rem; font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--or-chaud, var(--or));
}

/* Page d'un service : il est seul, donc il prend toute la largeur. */
.service {
  display: flex; gap: 1.4rem; align-items: flex-start;
  background: var(--gris); padding: 2.2rem;
}
.service > .ic { width: 34px; height: 34px; color: var(--or); flex: none; margin-top: .2rem; }
.service-accroche {
  margin: 0 0 1.2rem; font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--or-chaud, var(--or));
}
.service-texte p { font-size: .95rem; margin: 0 0 .9rem; }
.service-texte p:last-child { margin-bottom: 0; }

/* Les trois autres services, en pied de page de service. */
.autres-services { margin-top: 2.4rem; text-align: center; }
.autres-services .surtitre { margin-bottom: .9rem; }
.liens-services { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.liens-services a {
  padding: .6rem 1.1rem; border: 1px solid var(--bordure, rgba(13, 27, 42, .18));
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; color: var(--marine);
}
.liens-services a:hover { border-color: var(--or); color: var(--or); }

.services-contact {
  margin-top: 2.4rem; padding: 1.8rem; text-align: center;
  background: var(--marine); color: var(--blanc);
}
.services-contact .acces-actions { justify-content: center; }
/* Le bloc est sur fond marine : un bouton-contour marine y est invisible.
   Il passe en blanc, comme .bouton-clair ailleurs (Fabio, 23.10). */
.services-contact .bouton-contour {
  border-color: rgba(255, 255, 255, .55);
  color: var(--blanc);
}
.services-contact .bouton-contour:hover { background: var(--blanc); color: var(--marine); }

@media (max-width: 860px) {
  .services { padding: 1rem 1.2rem 3rem; }
  .cartes-services { grid-template-columns: 1fr; }
  /* Sur téléphone l'icône passe au-dessus : côte à côte, il ne reste
     qu'une colonne de texte trop étroite pour être lisible. */
  .service { flex-direction: column; gap: .9rem; padding: 1.6rem; }
}

/* ---------- Infolettre ---------- */

.infolettre { background: var(--marine); color: var(--blanc); }
.infolettre-contenu { max-width: 620px; margin: 0 auto; text-align: center; }
.infolettre h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); margin-bottom: .8rem; }
.infolettre p { color: rgba(255, 255, 255, .78); }
.formulaire-infolettre { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin: 1.6rem 0 .8rem; }
.formulaire-infolettre input {
  flex: 1; min-width: 240px; max-width: 340px;
  border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .08);
  color: var(--blanc); padding: .85rem 1rem; font: inherit; font-size: .9rem;
}
.formulaire-infolettre input::placeholder { color: rgba(255, 255, 255, .5); }
.infolettre .mention { color: rgba(255, 255, 255, .55); }

/* ---------- Pied de page ---------- */

.pied { background: #081320; color: rgba(255, 255, 255, .75); padding: 3.5rem 2rem 1.5rem; }
.pied-contenu {
  max-width: var(--large); margin: 0 auto;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem;
}
.logo-pied { font-size: 1.4rem; color: var(--blanc); }
.pied h3 {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--or); margin-bottom: .9rem;
}
.pied a, .pied p { display: block; font-size: .88rem; margin-bottom: .45rem; }
.pied a:hover { color: var(--or); }
.pied .mention { color: rgba(255, 255, 255, .45); }
.pied-bas {
  max-width: var(--large); margin: 2.5rem auto 0; padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .78rem; text-align: center; color: rgba(255, 255, 255, .5);
}

/* ---------- Panier ---------- */

.panier { position: fixed; inset: 0; z-index: 60; }
.panier[hidden] { display: none; }
.panier-fond { position: absolute; inset: 0; background: rgba(13, 27, 42, .55); }
.panier-panneau {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%);
  background: var(--blanc); display: flex; flex-direction: column;
  animation: glisser .2s ease-out;
}
@keyframes glisser { from { transform: translateX(30px); opacity: .5; } }
.panier-entete {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.4rem 1.5rem; border-bottom: 1px solid var(--bord);
}
.panier-entete h2 { font-size: .9rem; letter-spacing: .16em; text-transform: uppercase; }
.panier-lignes { flex: 1; overflow-y: auto; padding: 1.2rem 1.5rem; }
.panier-vide { color: var(--doux); font-size: .9rem; }
.ligne-panier {
  display: flex; gap: .9rem; align-items: center;
  padding: .8rem 0; border-bottom: 1px solid var(--bord);
}
.ligne-panier .vignette { width: 52px; height: 66px; flex: none; }
.ligne-panier .details { flex: 1; }
.ligne-panier h3 { font-size: .84rem; font-weight: 600; }
.ligne-panier .prix-ligne { font-size: .82rem; color: var(--doux); }
.retirer { background: none; border: 0; color: var(--doux); cursor: pointer; font-size: 1rem; }
.retirer:hover { color: var(--marine); }
.panier-pied { padding: 1.3rem 1.5rem; border-top: 1px solid var(--bord); }
.panier-total { display: flex; justify-content: space-between; font-size: 1rem; margin-bottom: .4rem; }
.panier-total strong { font-weight: 800; }

/* ---------- Adaptation mobile ---------- */

@media (max-width: 980px) {
  .entete { flex-wrap: wrap; gap: 1rem; padding: 1rem; }
  .navigation { order: 3; width: 100%; overflow-x: auto; gap: 1.1rem; padding-bottom: .3rem; }
  .recherche input { width: 120px; }
  .mondes { grid-template-columns: 1fr; }
  .boutique { grid-template-columns: 1fr; gap: 2rem; }
  .boutique-visuel { aspect-ratio: 16 / 10; }
  .pied-contenu { grid-template-columns: 1fr 1fr; gap: 2rem; }
  section { padding: 3.2rem 1.2rem; }
  .hero { padding: 4rem 1.2rem; }
}

@media (max-width: 560px) {
  .barre-services { gap: 1rem; font-size: .68rem; }
  .pied-contenu { grid-template-columns: 1fr; }
  .grille-produits { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
}


/* ---------- Page catalogue ---------- */

.entete-catalogue { padding-bottom: 1rem; }
.entete-catalogue h1 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
.catalogue { max-width: var(--large); margin: 0 auto; padding-top: 1rem; }

/* ---------- Panneau de filtres ---------- */

.catalogue-corps {
  display: grid; grid-template-columns: 250px 1fr; gap: 2.5rem;
  align-items: start;
}
/* Le panneau suit le défilement : avec 2 400 articles, remonter chercher
   un critère à chaque fois serait pénible. */
/* …et il défile pour lui-même : ouvrir Taille ou Marques ne pousse plus la
   liste hors de l'écran, et la molette sur les filtres ne fait pas bouger
   les produits. */
.panneau-filtres {
  position: sticky; top: 90px;
  max-height: calc(100vh - 110px); overflow-y: auto;
  overscroll-behavior: contain; padding-right: .6rem;
  scrollbar-width: thin; scrollbar-color: var(--or) transparent;
}
.panneau-filtres::-webkit-scrollbar { width: 5px; }
.panneau-filtres::-webkit-scrollbar-thumb { background: var(--or); border-radius: 3px; }
.entete-panneau { display: flex; align-items: center; justify-content: space-between; }
.entete-panneau h2 {
  margin: 0 0 .4rem; font-size: .78rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
}
.fermer-filtres {
  display: none; font: inherit; font-size: 1.1rem; line-height: 1;
  background: none; border: 0; cursor: pointer; color: var(--texte); padding: .3rem;
}

.groupe-filtre { border-bottom: 1px solid var(--bord); }
.entete-groupe {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  font: inherit; font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; text-align: left;
  padding: .95rem 0; cursor: pointer; background: none; border: 0; color: var(--marine);
}
.entete-groupe::after {
  content: "⌄"; font-size: .9rem; line-height: 1; color: var(--doux);
  transition: transform .2s; transform-origin: center 40%;
}
.entete-groupe[aria-expanded="true"]::after { transform: rotate(180deg); }
.entete-groupe:hover { color: var(--or); }
/* Une rubrique qui filtre se repère au filet or, panneau replié ou non. */
.groupe-filtre.actif .entete-groupe { color: var(--or); }

.corps-groupe { padding-bottom: .8rem; max-height: 260px; overflow-y: auto; }
.option-filtre {
  width: 100%; display: flex; align-items: center;
  gap: .55rem; font: inherit; font-size: .82rem; text-align: left;
  padding: .38rem .3rem; cursor: pointer;
  background: none; border: 0; color: var(--texte);
}
.option-filtre .option-nom { flex: 1; }
.option-filtre:hover { color: var(--or); }
.option-filtre.choisie { font-weight: 700; color: var(--marine); }
/* Valeur que la sélection en cours ne donne plus : visible mais inerte,
   pour que la liste ne fonde pas sous les doigts. */
.option-filtre.epuisee { color: var(--bord); cursor: not-allowed; }
.option-filtre.epuisee:hover { color: var(--bord); }
.option-filtre.epuisee .option-nom { text-decoration: line-through; }
.option-filtre.epuisee .case-option { border-color: var(--bord); }
.option-compte { font-size: .72rem; color: var(--doux); flex: none; }

/* Case à cocher : elle annonce qu'une rubrique accepte plusieurs valeurs. */
.case-option {
  width: 14px; height: 14px; flex: none; position: relative;
  border: 1px solid var(--bord); background: var(--blanc);
}
.option-filtre:hover .case-option { border-color: var(--or); }
.option-filtre.choisie .case-option { background: var(--or); border-color: var(--or); }
.option-filtre.choisie .case-option::after {
  content: ""; position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px; border: solid var(--blanc);
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* Volet des filtres secondaires : matière et durabilité, repliés. */
.bouton-plus-filtres {
  width: 100%; font: inherit; font-size: .74rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; text-align: left;
  padding: .95rem 0; cursor: pointer;
  background: none; border: 0; border-bottom: 1px solid var(--bord);
  color: var(--doux);
}
.bouton-plus-filtres:hover { color: var(--or); }
.bouton-plus-filtres.actif { color: var(--or); }
.bouton-plus-filtres[aria-expanded="true"]::after { content: " ▴"; }
.bouton-plus-filtres[aria-expanded="false"]::after { content: " ▾"; }

.pied-panneau {
  display: flex; flex-direction: column; gap: .9rem; align-items: flex-start;
  padding-top: 1.1rem;
}
.barre-mobile { display: none; }
.barre-resultats { margin-bottom: 1rem; }
.fond-filtres { display: none; }

.bouton-petit { padding: .5rem 1rem; font-size: .68rem; }
.resultats { font-size: .82rem; color: var(--doux); font-weight: 600; }

/* Sous 1024 px le panneau devient un tiroir (téléphones et tablettes,
   client 23.09) : une colonne de 250 px prise sur l'écran ne laisserait
   plus rien aux photos des produits. */
@media (max-width: 1024px) {
  .catalogue-corps { grid-template-columns: 1fr; gap: 0; }
  .barre-mobile {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; margin-bottom: 1.2rem;
  }
  .barre-resultats { display: none; }
  .panneau-filtres {
    position: fixed; inset: 0 auto 0 0; z-index: 70; width: min(86vw, 320px);
    max-height: none;
    background: var(--blanc); padding: 1.2rem; overflow-y: auto;
    transform: translateX(-100%); transition: transform .25s;
    box-shadow: 0 0 40px rgba(13, 27, 42, .25);
  }
  .panneau-filtres.ouvert { transform: none; }
  .fermer-filtres { display: block; }
  .fond-filtres {
    display: block; position: fixed; inset: 0; z-index: 69;
    background: rgba(13, 27, 42, .5);
  }
  .fond-filtres[hidden] { display: none; }
  body.filtres-ouverts { overflow: hidden; }
}

/* La photo produit arrive du fournisseur : cadrage constant, fond neutre. */
.produit-image img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  background: var(--gris);
}
.produit-couleur { font-size: .78rem; color: var(--doux); margin-bottom: .5rem; }

/* Sur la fiche produit, là où le sélecteur de longueur ferait défaut. */
.mention-longueur-floue {
  font-size: .82rem;
  color: var(--doux);
  line-height: 1.5;
  margin: .2rem 0 0;
}

/* Le fournisseur n'a pas renseigné la longueur de jambe. On le dit plutôt
   que de laisser croire à une correspondance vérifiée. */
.produit-longueur-floue {
  font-size: .72rem;
  color: var(--doux);
  font-style: italic;
  margin: -.3rem 0 .5rem;
}
.tailles { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .7rem; }
.taille {
  font-size: .64rem; font-weight: 700; letter-spacing: .04em;
  border: 1px solid var(--bord); padding: .18rem .4rem; color: var(--ardoise);
}
.taille-plus { border-color: var(--or); color: var(--or); }
.vide-catalogue { grid-column: 1 / -1; text-align: center; color: var(--doux); padding: 3rem 0; }
.pied-catalogue { text-align: center; padding: 2.5rem 0 1rem; }

/* Pagination — trente articles par page. Les numéros restent assez grands
   pour être visés au pouce sur un téléphone. */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: 2.5rem 0 1rem;
}

.page-lien {
  min-width: 2.4rem;
  height: 2.4rem;
  padding: 0 .55rem;
  border: 1px solid var(--bord);
  background: #fff;
  color: var(--marine);
  font: inherit;
  font-size: .88rem;
  border-radius: 2px;
  cursor: pointer;
  transition: border-color .18s, color .18s, background .18s;
}

.page-lien:hover:not(:disabled) { border-color: var(--or); color: var(--or); }

.page-lien.courante {
  background: var(--marine);
  border-color: var(--marine);
  color: #fff;
  font-weight: 600;
  cursor: default;
}

.page-lien:disabled { opacity: .35; cursor: default; }

.page-fleche { font-size: 1.1rem; line-height: 1; }

.page-trou { color: var(--doux); padding: 0 .15rem; }

/* Le repère « Page 3 sur 28 » passe sous les numéros : il dit l'ampleur du
   rayon, ce qu'un ruban de chiffres seul ne raconte pas. */
.page-compte {
  flex-basis: 100%;
  text-align: center;
  margin-top: .7rem;
  font-size: .78rem;
  color: var(--doux);
}

@media (max-width: 560px) {
  .page-lien { min-width: 2.1rem; height: 2.1rem; font-size: .82rem; }
}

.ligne-panier img.vignette { object-fit: cover; background: var(--gris); }

@media (max-width: 560px) {
  .resultats { font-size: .76rem; }
}

/* Article épuisé : visible mais clairement hors d'atteinte. */
.produit-epuise .produit-image img { filter: grayscale(.7) opacity(.6); }
.produit-epuise h3, .produit-epuise .produit-prix { color: var(--doux); }
.badge-epuise { background: var(--ardoise); color: var(--blanc); }
.taille-absente { color: var(--bord); border-color: var(--bord); text-decoration: line-through; }
.bouton-indispo { background: var(--gris); color: var(--doux); cursor: not-allowed; }
.bouton-indispo:hover { background: var(--gris); color: var(--doux); transform: none; }
.case-dispo {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .82rem; font-weight: 600; color: var(--ardoise);
}
.case-dispo input { accent-color: var(--marine); width: 15px; height: 15px; }


/* ---------- Fiche produit ---------- */

.fil-ariane {
  max-width: var(--large); margin: 0 auto; padding: 1.2rem 2rem 0;
  font-size: .78rem; color: var(--doux);
}
.fil-ariane a:hover { color: var(--or); }

.fiche-produit {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem;
  max-width: var(--large); margin: 0 auto; padding: 2rem;
}
.galerie-produit { display: flex; flex-direction: column; gap: .8rem; }
.vue-principale { background: var(--gris); aspect-ratio: 3 / 4; overflow: hidden; }
.vue-principale img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.vignettes { display: flex; gap: .6rem; flex-wrap: wrap; }
.vignette-galerie {
  width: 72px; height: 92px; padding: 0; cursor: pointer;
  border: 1px solid var(--bord); background: var(--gris); overflow: hidden;
}
.vignette-galerie img { width: 100%; height: 100%; object-fit: cover; }
.vignette-galerie.active { border-color: var(--marine); border-width: 2px; }

.details-produit h1 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: .5rem; }
.ligne-couleur { font-size: .88rem; color: var(--doux); }
.prix-produit { font-size: 1.5rem; font-weight: 800; margin: 1rem 0 1.5rem; }
.alerte-stock {
  background: var(--gris); border-left: 3px solid var(--ardoise);
  padding: .9rem 1rem; font-size: .88rem;
}
.alerte-stock a { color: var(--marine); font-weight: 700; text-decoration: underline; }

.bloc-tailles { border-top: 1px solid var(--bord); padding-top: 1.4rem; margin-bottom: 1.5rem; }
.entete-tailles { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .8rem; }
.entete-tailles h2 { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; }
.entete-tailles .mention { margin: 0; color: var(--or); font-weight: 600; }

.choix-tailles { display: flex; flex-wrap: wrap; gap: .5rem; }
.choix-taille {
  min-width: 52px; padding: .7rem .8rem; cursor: pointer;
  border: 1px solid var(--bord); background: var(--blanc); color: var(--texte);
  font-family: var(--police); font-size: .82rem; font-weight: 600;
}
.choix-taille:hover:not(:disabled) { border-color: var(--marine); }
.choix-taille.choisie { background: var(--marine); color: var(--blanc); border-color: var(--marine); }
/* Indisponible : une barre en diagonale sur toute la case, comme le fait la
   concurrence. Un simple texte barré se confond avec un prix soldé. */
.choix-taille.indisponible {
  color: var(--doux); cursor: not-allowed; background: var(--blanc);
  position: relative; overflow: hidden;
}
.choix-taille.indisponible::after {
  content: ""; position: absolute; left: -10%; right: -10%; top: 50%;
  border-top: 1px solid var(--doux);
  /* La diagonale part d'un coin à l'autre quelle que soit la case. */
  transform: rotate(-32deg);
}
.rappel-taille { color: var(--rouge, #b42318); font-size: .82rem; margin: .8rem 0 0; font-weight: 600; }
.choix-tailles.secoue { animation: secousse .4s; }
@keyframes secousse {
  25% { transform: translateX(-5px); } 75% { transform: translateX(5px); }
}

.arguments-produit { list-style: none; padding: 0; margin: 1.8rem 0 0; }
.arguments-produit li {
  font-size: .86rem; padding: .7rem 0; border-bottom: 1px solid var(--bord); color: var(--doux);
}
.arguments-produit strong { color: var(--texte); }
.arguments-produit li:last-child { border-bottom: 0; }

.suggestions { max-width: var(--large); margin: 0 auto; }
.lien-produit { display: block; }
.taille-ligne { font-size: .74rem; color: var(--or); font-weight: 700; margin: 0; }

@media (max-width: 860px) {
  .fiche-produit { grid-template-columns: 1fr; gap: 2rem; padding: 1.2rem; }
}


/* ---------- Sous-navigation par rayon ---------- */

.sous-nav {
  position: sticky; top: 0; z-index: 35;
  background: var(--marine); border-bottom: 1px solid rgba(255, 255, 255, .12);
}
/* Le rayon femme compte plus de rubriques que celui de l'homme — et « Ma
   taille » vient s'ajouter au bout. À la largeur de page (1280), la barre
   femme dépassait de 140 px : les dernières rubriques (Chaussures,
   Accessoires) tombaient hors champ, sans rien pour dire qu'elles étaient
   là. Cette barre-ci a donc le droit d'être plus large que le reste de la
   page, et ses rubriques sont un peu resserrées. En dessous, elle occupe la
   fenêtre et défile comme avant. */
.sous-nav-contenu {
  max-width: min(1440px, 100%); margin: 0 auto; padding: 0 2rem;
  display: flex; align-items: center; gap: .2rem;
  overflow-x: auto; scrollbar-width: none;
}
.sous-nav-contenu::-webkit-scrollbar { display: none; }

.rubrique {
  font-size: .68rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--or); padding-right: 1.1rem; margin-right: .6rem;
  border-right: 1px solid rgba(255, 255, 255, .18); white-space: nowrap;
}
.lien-rayon {
  display: flex; align-items: center; gap: .35rem; white-space: nowrap;
  padding: .85rem .55rem; color: rgba(255, 255, 255, .78);
  font-size: .78rem; font-weight: 600; letter-spacing: .04em;
  border-bottom: 2px solid transparent;
}
.lien-rayon:hover { color: var(--blanc); }
.lien-rayon.actif { color: var(--blanc); border-bottom-color: var(--or); }
.compte-rayon { font-size: .66rem; color: rgba(255, 255, 255, .45); }
.lien-rayon.actif .compte-rayon { color: var(--or); }
.rayon-precision {
  color: var(--or); font-size: .78rem; font-weight: 700;
  padding-left: .6rem; white-space: nowrap;
}

/* La rubrique active se voit aussi dans la navigation principale. */
.navigation a.actif { border-bottom-color: var(--or); color: var(--marine); }

@media (max-width: 980px) {
  .sous-nav-contenu { padding: 0 1rem; }
  .rubrique { padding-right: .7rem; margin-right: .3rem; }
}


/* ---------- Sélecteur de style illustré ---------- */

.selecteur { max-width: var(--large); margin: 0 auto; padding: 3.5rem 2rem 4.5rem; }

.onglets-genre { display: flex; gap: .25rem; }
.onglet-genre {
  position: relative; cursor: pointer; border: 0; background: var(--gris);
  padding: .9rem 1.8rem; font-family: var(--police);
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ardoise);
}
.onglet-genre strong { font-weight: 800; }
.onglet-genre span { font-weight: 500; opacity: .75; }
.onglet-genre:hover { color: var(--marine); }
.onglet-genre.actif { background: var(--ardoise); color: var(--blanc); }
/* La petite pointe sous l'onglet actif, comme sur le modèle. */
.onglet-genre.actif::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 9px solid transparent; border-top-color: var(--ardoise); z-index: 2;
}

.bandeau-rayons {
  position: relative;
  background:
    radial-gradient(120% 90% at 50% 120%, rgba(58, 70, 86, .85) 0%, transparent 60%),
    linear-gradient(180deg, #16202E 0%, var(--marine) 100%);
  padding: 2.2rem 3rem 1.6rem;
}
/* Silhouette de relief en fond, discrète, façon montagne. */
.bandeau-rayons::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 74%;
  background-repeat: no-repeat; background-position: bottom; background-size: cover;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1200 300\" preserveAspectRatio=\"none\"><path fill=\"%23ffffff\" fill-opacity=\"0.035\" d=\"M0 300V170l150-90 130 70 120-110 160 120 140-80 170 110 150-60 180 90v80z\"/><path fill=\"%23ffffff\" fill-opacity=\"0.05\" d=\"M0 300V225l180-75 140 60 150-85 190 95 160-55 200 80 180-45v100z\"/><path fill=\"%23ffffff\" fill-opacity=\"0.07\" d=\"M0 300v-40l220 25 180-35 200 40 210-30 190 35 200-20v25z\"/></svg>');
  pointer-events: none;
}
.bandeau-rayons::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 62%;
  background:
    linear-gradient(135deg, transparent 42%, rgba(255, 255, 255, .028) 42% 58%, transparent 58%),
    linear-gradient(-135deg, transparent 38%, rgba(255, 255, 255, .022) 38% 62%, transparent 62%);
  pointer-events: none;
}

.piste-rayons {
  display: flex; gap: .6rem; overflow-x: auto; scroll-behavior: smooth;
  scrollbar-width: none; position: relative;
}
.piste-rayons::-webkit-scrollbar { display: none; }

.rayon-dessine {
  flex: 0 0 auto; width: 132px; padding: .6rem .4rem 1rem;
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  text-align: center;
}
.rayon-dessine svg { width: 106px; height: 138px; overflow: visible; }

/* Trois couches font le volume : le tissu en dégradé bleu, les plis en clair,
   les surpiqûres en foncé. Un aplat seul ne donne qu'un pictogramme. */
.rayon-dessine .corps { fill: url(#g73-tissu); stroke: none; }
.rayon-dessine .detail { fill: #8CA5BC; stroke: none; }
.rayon-dessine .fond { fill: #16202E; stroke: none; }
.rayon-dessine .pli {
  fill: none; stroke: rgba(255, 255, 255, .30);
  stroke-width: 1.5; stroke-linecap: round;
}
.rayon-dessine .couture {
  fill: none; stroke: #5F7B96; stroke-width: 1.4;
  stroke-linecap: round; stroke-dasharray: 2.5 2.5;
}
.rayon-dessine circle.couture { stroke-dasharray: none; fill: none; }

/* Le socle donne l'ombre portée du vêtement suspendu. */
.socle-rayon {
  display: block; position: relative;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .45));
}

.rayon-nom {
  font-size: .74rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--blanc); margin-top: .7rem;
}
.rayon-compte { font-size: .68rem; color: rgba(255, 255, 255, .45); }

.rayon-dessine:hover .corps { fill: url(#g73-tissu-or); }
.rayon-dessine:hover .detail { fill: #A3823F; }
.rayon-dessine:hover .couture { stroke: #7A6132; }
.rayon-dessine:hover .rayon-nom { color: var(--or); }

/* Photo du catalogue : uniquement pour les rayons sans dessin. */
.rayon-photo .socle-rayon {
  width: 106px; height: 138px; overflow: hidden; border-radius: 4px;
  background: #E8EDF2; filter: none;
}
.rayon-photo .socle-rayon img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 22%;
  transition: transform .35s;
}
.rayon-photo:hover .socle-rayon img { transform: scale(1.07); }

.fleche-rayons {
  position: absolute; top: 50%; transform: translateY(-60%);
  width: 34px; height: 60px; cursor: pointer; z-index: 3;
  background: rgba(13, 27, 42, .72); border: 1px solid rgba(255, 255, 255, .18);
  color: var(--blanc); font-size: 1.4rem; line-height: 1;
}
.fleche-rayons:hover { background: var(--or); color: var(--marine); border-color: var(--or); }
.fleche-rayons.precedent { left: .6rem; }
.fleche-rayons.suivant { right: .6rem; }

.jauge-rayons { height: 3px; background: rgba(255, 255, 255, .12); margin-top: 1.2rem; }
.jauge-rayons span { display: block; height: 100%; background: var(--or); transition: margin-left .2s; }

@media (max-width: 860px) {
  .selecteur { padding: 2.5rem 0 3rem; }
  .onglets-genre { padding: 0 1rem; }
  .bandeau-rayons { padding: 1.6rem 1rem 1.2rem; }
  .fleche-rayons { display: none; }
  .rayon-dessine { width: 108px; }
  .rayon-dessine svg { width: 74px; height: 100px; }
}

/* ---------- Bandeaux de produits (rails) ---------- */

/* La barre de défilement dorée sous le bandeau disait certes qu'il y avait
   une suite, mais elle traînait sous les boutons d'achat et n'invitait pas
   au geste. Deux flèches la remplacent, comme sur les avis et les catégories
   (client, 09.10). Le doigt, lui, fait défiler comme avant. */
.bandeau-rail { position: relative; }
.rail {
  display: flex; gap: 1.2rem; overflow-x: auto; padding-bottom: .2rem;
  scroll-behavior: smooth; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
}
.rail .produit { flex: 0 0 250px; scroll-snap-align: start; }
.rail::-webkit-scrollbar { display: none; }
/* Les flèches se posent sur la photo, et non au milieu de la vignette :
   plus bas elles tomberaient sur les tailles ou sur le bouton d'achat. */
.bandeau-rail .fleche-rayons { top: 28%; transform: translateY(-50%); }
.bandeau-rail .fleche-rayons.precedent { left: -.2rem; }
.bandeau-rail .fleche-rayons.suivant { right: -.2rem; }

.marque-mois { max-width: var(--large); margin: 0 auto; padding: 4rem 2rem 1rem; }
.marque-mois .section-texte a { font-weight: 700; color: var(--marine); text-decoration: underline; }

/* ---------- Tuiles des marques en vedette ---------- */

/* Trois vedettes, donc trois colonnes fixes : en largeur automatique la
   troisième pouvait passer à la ligne et se retrouver seule. */
.tuiles-marques { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.tuile-marque { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--marine); }
.tuile-marque img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
  opacity: .95; transition: transform .4s, opacity .25s;
}
.tuile-marque:hover img { transform: scale(1.06); opacity: 1; }
/* Le voile ne noircit plus toute la vignette : il se concentre derrière le
   nom, au centre, et laisse les bords de la photo intacts. */
.voile-tuile {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .5rem; text-align: center;
  background: radial-gradient(ellipse at center, rgba(13, 27, 42, .52) 0%, rgba(13, 27, 42, .18) 70%, transparent 100%);
}
.nom-tuile {
  color: var(--blanc); font-size: 1.15rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  text-shadow: 0 2px 14px rgba(13, 27, 42, .95);
}
.action-tuile {
  color: var(--or); font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; opacity: 0; transition: opacity .2s;
}
.tuile-marque:hover .action-tuile { opacity: 1; }
.action-tuile { text-shadow: 0 2px 12px rgba(13, 27, 42, .95); }

/* Sous 640 px, trois colonnes rendraient chaque photo minuscule : on empile,
   en vignettes plus basses pour ne pas allonger la page inutilement. */
@media (max-width: 640px) {
  .tuiles-marques { grid-template-columns: 1fr; }
  .tuile-marque { aspect-ratio: 16 / 9; }
}

/* ---------- Compléments d'en-tête ---------- */

.barre-promo a { text-decoration: underline; text-underline-offset: 3px; }
.barre-promo a:hover { color: var(--or); }
.pousse-droite { margin-left: auto; }
.barre-services a:hover { color: var(--marine); text-decoration: underline; }
.langues strong { color: var(--marine); }

.citation-maison {
  margin: 1.8rem 0; padding: 1.2rem 0 1.2rem 1.4rem;
  border-left: 3px solid var(--or); font-size: 1rem; font-style: italic; color: var(--ardoise);
}
.citation-maison cite {
  display: block; margin-top: .7rem; font-style: normal; font-size: .76rem;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--doux);
}

/* ---------- Annuaire des marques ---------- */

.annuaire-marques { max-width: var(--large); margin: 0 auto; padding: 1rem 2rem 4rem; }
.grille-marques {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1.2rem;
}
.carte-marque {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  border: 1px solid var(--bord); padding: 1.6rem 1rem 1.2rem; background: var(--blanc);
  transition: border-color .2s, transform .2s;
}
.carte-marque:hover { border-color: var(--or); transform: translateY(-2px); }
.cadre-logo {
  display: flex; align-items: center; justify-content: center;
  height: 64px; margin-bottom: .6rem;
}
.cadre-logo img { max-height: 64px; max-width: 150px; object-fit: contain; }
/* Le logotype composé sert tant qu'aucun fichier de logo n'est fourni ;
   c'est le script qui le masque une fois le vrai logo chargé. */
.logotype {
  font-size: 1.25rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--marine); text-align: center; line-height: 1.15;
}
.carte-marque:hover .logotype { color: var(--or); }
.nom-marque {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--doux);
}
.compte-marque { font-size: .74rem; color: var(--doux); }


/* ---------- Logotypes de substitution ---------- */
/* Utilisés tant que les logos officiels ne sont pas fournis : chaque maison a
   son traitement, pour que le mur de marques ne ressemble pas à une liste. */

.logo-serif-serre {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700; letter-spacing: -.02em; text-transform: none; font-size: 1.9rem;
}
.logo-large-souligne {
  letter-spacing: .3em; font-weight: 700; font-size: .95rem;
  padding-bottom: .35rem; border-bottom: 2px solid var(--or);
}
.logo-condense {
  font-weight: 800; letter-spacing: -.03em; font-size: 1.45rem;
  font-stretch: condensed; text-transform: none;
}
.logo-leger-large {
  font-weight: 400; letter-spacing: .42em; font-size: 1.1rem;
}
.logo-serif-espace {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400; letter-spacing: .16em; font-size: 1.05rem;
}
.logo-arrondi {
  font-family: "Segoe UI", system-ui, sans-serif;
  font-weight: 600; letter-spacing: .04em; text-transform: none;
  font-style: italic; font-size: 1.25rem;
}
.logo-bloc {
  font-weight: 800; letter-spacing: .06em; font-size: 2rem;
  background: var(--marine); color: var(--blanc); padding: .15rem .55rem;
}
.carte-marque:hover .logo-bloc { background: var(--or); color: var(--marine); }
.logo-deux-lignes {
  display: flex; flex-direction: column; align-items: center; line-height: 1.1;
}
.logo-deux-lignes span:last-child { font-size: .68em; opacity: .8; letter-spacing: .18em; }

/* ---------- Sélection d'univers (spec client) ---------- */

.univers-choix { max-width: var(--large); margin: 0 auto; padding: 3.5rem 2rem; }

/* Les deux grandes cartes deviennent des boutons de sélection. */
.univers-choix .mondes { margin-bottom: 2.2rem; }
.univers-choix .monde {
  border: 0; cursor: pointer; font-family: var(--police); text-align: left;
  border-radius: 2px; transition: box-shadow .18s, transform .18s;
}
/* État actif : le contour or entoure TOUTE la carte, comme demandé. */
.univers-choix .monde.actif {
  box-shadow: 0 0 0 4px var(--or), 0 10px 30px rgba(13, 27, 42, .25);
  transform: translateY(-2px);
}
.univers-choix .monde:not(.actif):hover { opacity: 1; }

/* Le bouton Découvrir reste une action séparée, bien visible dans la carte. */
.monde-decouvrir {
  align-self: flex-start; margin-top: 1.1rem; text-decoration: none;
  position: relative; z-index: 2;
}

.bloc-categories-univers { position: relative; }
.entete-categories { margin-bottom: 1.2rem; }
.entete-categories h2 {
  font-size: clamp(1.2rem, 2.4vw, 1.6rem); letter-spacing: .04em; text-transform: uppercase;
}

.voir-plus-categories {
  display: inline-block; margin-top: 1.2rem; float: right;
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--marine); border-bottom: 2px solid var(--or); padding-bottom: .25rem;
}
.voir-plus-categories:hover { color: var(--or); }

@media (max-width: 860px) {
  .voir-plus-categories { float: none; display: block; text-align: right; }
}


/* ============================================================
   REFONTE D'APRÈS LA MAQUETTE CLIENT
   Ce bloc arrive en dernier : il redéfinit ce que la maquette
   change et laisse le reste de la feuille intact.
   ============================================================ */

:root {
  --noir: #101215;      /* barres et tuiles sombres de la maquette */
  --charbon: #1A1E24;
  --or-chaud: #C8913F;  /* l'or des pictogrammes, plus cuivré */
}

/* ---------- Barre de réassurance ---------- */

.barre-reassurance { background: var(--noir); color: var(--blanc); }
.reassurance-piste {
  max-width: var(--large); margin: 0 auto;
  display: flex; justify-content: space-around; align-items: center; gap: 1.5rem;
  padding: .7rem 2rem;
}
.reassurance-item {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  white-space: nowrap;
}
.reassurance-item .ic { width: 17px; height: 17px; color: var(--or-chaud); flex: none; }

/* ---------- En-tête : menu / logo centré / outils ---------- */

.entete {
  position: sticky; top: 0; z-index: 40;
  display: block; max-width: none; margin: 0; padding: 0;
  background: var(--blanc); border-bottom: 1px solid var(--bord);
}
.entete::after { content: none; }

.entete-piste {
  max-width: var(--large); margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 1rem; padding: .85rem 1.5rem;
  /* Repère pour le rappel « Ma taille », qui vient se poser à gauche du
     logo sur téléphone. */
  position: relative;
}
.entete-piste .logo { justify-self: center; }
.entete-piste .outils-entete { justify-self: end; gap: .25rem; }

.entete .logo-mot {
  font-size: clamp(1.35rem, 2.6vw, 1.75rem); letter-spacing: .01em;
}

.icone {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; color: var(--noir);
  padding: 0; position: relative; transition: color .15s;
}
.icone .ic { width: 22px; height: 22px; }
.icone:hover { color: var(--or-chaud); }
.icone-menu { justify-self: start; }

.compteur {
  position: absolute; top: 3px; right: 2px;
  background: var(--or-chaud); color: var(--blanc);
  font-size: .6rem; font-weight: 800; line-height: 1;
  min-width: 16px; height: 16px; padding: 0 .25rem;
  border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
}

/* Volet de recherche : il ne prend de la place que lorsqu'on le demande. */
.volet-recherche { border-top: 1px solid var(--bord); background: var(--gris); }
.volet-recherche .recherche {
  max-width: var(--large); margin: 0 auto;
  display: flex; align-items: center; gap: .7rem;
  padding: .9rem 1.5rem; background: none; border-radius: 0;
}
.volet-recherche .ic { width: 20px; height: 20px; color: var(--doux); flex: none; }
.volet-recherche input {
  flex: 1; width: auto; border: 0; background: none; outline: none;
  font: inherit; font-size: .95rem; color: var(--texte);
}

/* ---------- Tiroir de navigation ---------- */

body.tiroir-ouvert { overflow: hidden; }

.tiroir { position: fixed; inset: 0; z-index: 60; }
.tiroir[hidden] { display: none; }
.tiroir-fond { position: absolute; inset: 0; background: rgba(16, 18, 21, .55); }
.tiroir-panneau {
  position: absolute; top: 0; left: 0; bottom: 0; width: min(340px, 86vw);
  background: var(--blanc); padding: 1.2rem 1.6rem 2rem;
  display: flex; flex-direction: column;
  overflow-y: auto; box-shadow: 0 0 40px rgba(16, 18, 21, .3);
  animation: tiroir-entre .22s ease-out;
}
@keyframes tiroir-entre { from { transform: translateX(-100%); } to { transform: none; } }

.tiroir-entete {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 1.2rem; margin-bottom: .6rem; border-bottom: 1px solid var(--bord);
}
.tiroir-entete .icone { width: 34px; height: 34px; font-size: 1.1rem; }

.tiroir-panneau > a {
  padding: .95rem 0; border-bottom: 1px solid var(--bord);
  font-size: .88rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.tiroir-panneau > a:hover { color: var(--or-chaud); }
.tiroir-panneau > a.lien-outlet { color: var(--or-chaud); }

/* Le pied du tiroir (adresse et téléphone) a été retiré le 25.09 à la demande
   du client : les deux figurent toujours au pied de page. La règle part avec
   lui — plus aucune page n'a cette classe. */

/* ---------- Héros en carrousel ---------- */

.hero {
  padding: 0; position: relative; overflow: hidden;
  min-height: clamp(440px, 52vw, 620px);
  display: grid; background: var(--noir);
}
.hero::before, .hero::after { content: none; }

.hero-slide {
  grid-area: 1 / 1; position: relative;
  display: flex; align-items: center;
  padding: 3rem 2rem 4.5rem;
  color: var(--blanc);
  opacity: 0; visibility: hidden; transition: opacity .6s ease;
}
.hero-slide.actif { opacity: 1; visibility: visible; }

/* Fond de secours tant que la photo n'est pas livrée. */
.hero-slide { background: linear-gradient(135deg, var(--noir) 0%, #1E2A38 55%, var(--ardoise) 100%); }
.hero-slide::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  /* Allégé à la demande du client : les deux visuels du haut de page
     (photo et vidéo) étaient noyés sous un voile à 92 %. Il ne reste que
     ce qu'il faut sous le texte ; l'ombre portée fait le reste. */
  background: linear-gradient(100deg, rgba(12, 14, 17, .58) 0%, rgba(12, 14, 17, .30) 45%, rgba(12, 14, 17, .04) 100%);
}
.hero-fond {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 35%; z-index: 0;
  filter: brightness(1.22) saturate(1.06);
}
.hero-contenu { text-shadow: 0 2px 14px rgba(12, 14, 17, .7); }
.hero-contenu {
  position: relative; z-index: 2;
  max-width: var(--large); width: 100%; margin: 0 auto;
}

/* Le sélecteur reprend « .hero » pour passer devant l'ancienne règle
   « .hero h1 », qui bridait le titre à 4rem et à 15 caractères de large. */
.hero .hero-marque, .hero .hero-titre {
  font-size: clamp(2.6rem, 7vw, 5.2rem); font-weight: 800;
  letter-spacing: -.01em; line-height: 1; margin: 0; max-width: none;
  text-transform: uppercase;
}
.hero .hero-marque .logo-chiffre { color: var(--or); margin-left: .12em; }
.hero-accroche {
  margin: .8rem 0 0; font-size: clamp(.95rem, 1.8vw, 1.45rem);
  font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255, 255, 255, .92);
}

/* Le filet or : deux traits qui encadrent la mention, ou un seul trait
   court lorsque le panneau n'a rien à écrire là. */
.hero-filet {
  display: flex; align-items: center; gap: .9rem;
  margin: 1.1rem 0 0;
  font-size: .78rem; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--or);
}
.hero-filet::before, .hero-filet::after {
  content: ""; height: 1px; width: 52px; background: var(--or); flex: none;
}
.hero-filet:empty { gap: 0; }
.hero-filet:empty::after { display: none; }
.hero-filet:empty::before { width: 96px; height: 2px; }

.hero-texte {
  max-width: 42ch; margin-top: 1.4rem;
  color: rgba(255, 255, 255, .82); font-size: 1rem;
}
.hero-actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 2rem; }
.hero .note-google { margin-top: 1.6rem; font-size: .82rem; }

.hero-puces {
  position: absolute; z-index: 3; bottom: 2rem; left: 50%;
  transform: translateX(-50%); width: 100%; max-width: var(--large);
  padding: 0 2rem; display: flex; gap: .7rem;
}
.hero-puce {
  width: 11px; height: 11px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1.5px solid rgba(255, 255, 255, .85); background: none;
  transition: background .2s, border-color .2s;
}
.hero-puce.actif { background: var(--or); border-color: var(--or); }
.hero-puce:hover { border-color: var(--or); }

/* ---------- Titres de section entre deux filets ---------- */

.section-entete h2, .titre-filets {
  display: flex; align-items: center; justify-content: center; gap: 1.2rem;
  text-transform: uppercase; letter-spacing: .08em;
}
.section-entete h2::before, .section-entete h2::after,
.titre-filets::before, .titre-filets::after {
  content: ""; height: 1px; background: var(--or); flex: 1; max-width: 120px;
}

/* Variante en ligne : titre à gauche, lien à droite (Nouveautés). */
.section-entete-ligne {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; text-align: left; margin-bottom: 1.8rem;
}
.section-entete-ligne h2 { display: block; letter-spacing: .04em; }
.section-entete-ligne h2::before, .section-entete-ligne h2::after { content: none; }
.lien-voir-tout {
  font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--or-chaud); white-space: nowrap;
}
.lien-voir-tout:hover { text-decoration: underline; }

/* ---------- Bannières Femme / Homme ---------- */

.univers-choix { padding: 3rem 2rem 4rem; }
.univers-choix .mondes { gap: 1.2rem; margin-bottom: 3rem; }

.univers-choix .monde {
  min-height: 0; aspect-ratio: 21 / 8; padding: 0;
  display: block; position: relative; overflow: hidden;
  background: var(--charbon); border: 0; border-radius: 0; cursor: pointer;
  transition: box-shadow .18s, transform .18s;
}
/* Le voile ne sert qu'à porter le texte : il reste dense à gauche, sous le
   titre, et s'efface presque complètement à droite pour laisser voir la
   photo. Sans dégradé du tout, « FEMME » deviendrait illisible sur un fond
   clair — c'est pour ça qu'il en reste un, mais bien plus léger qu'avant. */
.univers-choix .monde::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  /* Encore allégé à la demande du client : le voile ne garde que ce qu'il
     faut sous le titre, l'ombre portée fait le reste. */
  background: linear-gradient(90deg, rgba(12, 14, 17, .46) 0%, rgba(12, 14, 17, .12) 45%, rgba(12, 14, 17, 0) 100%);
}
.monde-fond {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%; z-index: 0;
  /* Les deux photos de campagne sont sombres d'origine : on les éclaircit
     plutôt que de réduire encore le voile, qui porte la lisibilité. */
  filter: brightness(1.16) saturate(1.06);
}
.monde-corps {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: 0 clamp(1.5rem, 4vw, 3rem); color: var(--blanc); text-align: left;
  /* Le voile étant allégé, c'est l'ombre portée qui garantit le contraste
     du titre, quelle que soit la photo posée derrière. */
  text-shadow: 0 2px 12px rgba(12, 14, 17, .75);
}
.univers-choix .monde-titre {
  font-size: clamp(1.6rem, 3.6vw, 2.9rem); font-weight: 800;
  text-transform: uppercase; letter-spacing: .02em; line-height: 1; margin: 0;
}
.univers-choix .monde-lien {
  margin-top: .7rem; font-size: .72rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  border-bottom: 2px solid var(--or); padding-bottom: .35rem;
}
.univers-choix .monde:hover .monde-lien { color: var(--or); }

/* L'univers retenu se reconnaît au cadre or, comme demandé. */
.univers-choix .monde.actif {
  box-shadow: 0 0 0 3px var(--or); transform: none;
}
.univers-choix .monde:not(.actif) { opacity: 1; }

/* ---------- Tuiles de catégories ---------- */

.grille-univers { gap: .9rem; }
.carte-univers {
  /* Largeur fixe : c'est elle qui crée le débordement à faire défiler.
     En 1fr les tuiles se seraient serrées pour tenir, et il n'y aurait
     plus rien à faire glisser. */
  flex: 0 0 clamp(150px, 20vw, 215px);
  scroll-snap-align: start;
  aspect-ratio: 4 / 3; position: relative; overflow: hidden;
  padding: 0; background-color: var(--charbon);
}

/* Le bandeau porte les flèches, posées par-dessus les bords du rail. */
.bandeau-categories { position: relative; }
.bandeau-categories .fleche-rayons { top: 50%; transform: translateY(-50%); }
/* Un voile signale qu'il reste des tuiles hors champ — mais seulement du
   côté où il en reste vraiment, sinon il masquerait le titre de la
   première tuile alors qu'on est déjà tout à gauche. */
.bandeau-categories::before,
.bandeau-categories::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 44px;
  z-index: 2; pointer-events: none; opacity: 0; transition: opacity .2s;
}
.bandeau-categories::before { left: 0; background: linear-gradient(90deg, var(--blanc), transparent); }
.bandeau-categories::after { right: 0; background: linear-gradient(270deg, var(--blanc), transparent); }
.bandeau-categories.debord-gauche::before { opacity: 1; }
.bandeau-categories.debord-droite::after { opacity: 1; }
.carte-univers-fond {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
/* Le voile ne couvre plus que le bas de la tuile, là où se pose le libellé.
   Le haut de la photo reste net : c'est lui qui donne envie de cliquer. */
.carte-univers::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, transparent 0%, rgba(12, 14, 17, .06) 45%, rgba(12, 14, 17, .62) 100%);
}
.carte-univers-corps {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  padding: 0 .6rem 1rem; text-align: center; color: var(--blanc);
  /* Le voile étant allégé, l'ombre porte seule la lisibilité du libellé. */
  text-shadow: 0 1px 8px rgba(12, 14, 17, .85);
}
.carte-univers-nom {
  font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding-bottom: .45rem; border-bottom: 2px solid var(--or);
}
.carte-univers-lien {
  margin-top: .5rem; font-size: .62rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .78);
}
.carte-univers:hover { outline: 0; }
.carte-univers:hover .carte-univers-fond { transform: scale(1.05); }
.carte-univers-fond { transition: transform .4s ease; }
.carte-univers:hover .carte-univers-lien { color: var(--or); }
/* La texture de secours reste lisible : on annule la variante claire. */
.carte-univers.denim-ecru { color: var(--blanc); }

.entete-categories { text-align: center; margin-bottom: 1.6rem; }
.entete-categories .surtitre { margin-bottom: .7rem; }

/* ---------- Cartes produit : cœur des favoris ---------- */

.produit { position: relative; }
.favori {
  position: absolute; top: .6rem; right: .6rem; z-index: 3;
  width: 34px; height: 34px; padding: 0; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .9); border-radius: 50%;
  color: var(--noir); transition: color .15s, background .15s;
}
.favori svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.favori:hover { color: var(--or-chaud); background: var(--blanc); }
.favori.actif { color: var(--or-chaud); }
.favori.actif svg { fill: currentColor; }

.grille-produits { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.rail .produit { flex: 0 0 280px; }

/* ---------- Adaptation mobile de la maquette ---------- */

@media (max-width: 980px) {
  .entete-piste { padding: .75rem 1rem; gap: .4rem; }
  /* Les trois promesses ne tiennent plus de front : plutôt que de les
     rogner jusqu'à l'illisible, on laisse la barre défiler du doigt. */
  .reassurance-piste {
    padding: .6rem 1rem; gap: 1.2rem; justify-content: flex-start;
    overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  }
  .reassurance-piste::-webkit-scrollbar { display: none; }
  .reassurance-item { font-size: .62rem; letter-spacing: .06em; }
  .reassurance-item .ic { width: 15px; height: 15px; }
  .volet-recherche .recherche { padding: .8rem 1rem; }

  .hero-slide { padding: 2.5rem 1.2rem 4rem; }
  .hero-puces { padding: 0 1.2rem; bottom: 1.5rem; }

  .univers-choix { padding: 2.2rem 1.2rem 3rem; }
  /* Côte à côte sur téléphone aussi (client, 21.09) : les deux univers
     restent sous le doigt, les catégories juste dessous. */
  .univers-choix .mondes { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .univers-choix .monde { aspect-ratio: 5 / 4; }
  .univers-choix .monde-corps { padding: 0 .9rem; justify-content: flex-end; padding-bottom: .9rem; }
  .univers-choix .monde-titre { font-size: 1.25rem; }
  .univers-choix .monde-lien { margin-top: .45rem; font-size: .6rem; letter-spacing: .14em; padding-bottom: .25rem; }

  .grille-univers { gap: .7rem; }
  .carte-univers { aspect-ratio: 1 / 1; }
  /* Sans flèches sur petit écran, le doigt suffit : on rend le voile
     latéral plus discret pour ne pas manger une tuile entière. */
  .bandeau-categories::before, .bandeau-categories::after { width: 22px; }
}

@media (max-width: 560px) {
  .reassurance-item { font-size: .55rem; gap: .3rem; }
  /* Cinq cibles tactiles sur 375 px : on resserre pour que le logo
     garde sa place au centre sans pousser la barre hors de l'écran. */
  .entete-piste { gap: .25rem; padding: .7rem .55rem; }
  .entete .logo-mot { font-size: 1.15rem; }
  .icone { width: 36px; height: 36px; }
  .icone .ic { width: 20px; height: 20px; }
  .section-entete h2::before, .section-entete h2::after,
  .titre-filets::before, .titre-filets::after { max-width: 40px; }
  .grille-produits { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .carte-univers-nom { font-size: .68rem; letter-spacing: .05em; }
  .carte-univers-lien { display: none; }
  .lien-voir-tout { font-size: .68rem; }
}

/* Sous 360 px, une tuile pleine largeur laisserait deviner la suivante :
   on resserre pour qu'on voie bien qu'il y en a d'autres à droite. */
@media (max-width: 360px) {
  .carte-univers { flex-basis: 128px; }
}

/* ---------- Mosaïque de secours (photos tirées du stock) ---------- */

/* Quand la photo de campagne manque, photos.js pose à sa place une bande
   d'articles réels. Le filtre les assombrit pour que le titre blanc reste
   lisible, y compris devant les packshots sur fond clair. */
.mosaique { display: flex; gap: 2px; background: var(--noir); overflow: hidden; }
.mosaique img {
  flex: 1 1 0; min-width: 0; height: 100%;
  object-fit: cover; object-position: center 18%;
  filter: brightness(.62) saturate(.85); display: block;
}

/* Moins l'écran est large, moins on garde de vignettes : en dessous, chacune
   deviendrait une bande trop étroite pour montrer quoi que ce soit. */
@media (max-width: 1100px) { .mosaique img:nth-child(n+6) { display: none; } }
@media (max-width: 860px)  { .mosaique img:nth-child(n+5) { display: none; } }
@media (max-width: 620px)  { .mosaique img:nth-child(n+4) { display: none; } }
@media (max-width: 420px)  { .mosaique img:nth-child(n+3) { display: none; } }


/* ---------- Marques du magasin (page À propos) ---------- */

/* Le carré à droite de la boutique reprend les cartes de l'annuaire des
   marques, sur un fond clair pour qu'elles se lisent comme sur leur page. */
.boutique-marques {
  background: var(--gris); padding: 1.8rem 1.5rem;
  display: flex; flex-direction: column; justify-content: center;
}
.titre-marques-magasin {
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--or); text-align: center; margin: 0 0 1.2rem;
}
.grille-marques-magasin { grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.grille-marques-magasin .carte-marque { padding: 1rem .6rem .8rem; }
.grille-marques-magasin .cadre-logo { height: 46px; margin-bottom: .3rem; }
.grille-marques-magasin .logotype { font-size: 1rem; }
/* Une marque vendue seulement en rayon n'a pas de page : pas d'effet de clic. */
.carte-marque-magasin:hover { border-color: var(--bord); transform: none; }
.carte-marque-magasin:hover .logotype { color: var(--marine); }
@media (max-width: 640px) {
  .grille-marques-magasin { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Offre du mois ---------- */

.offre-du-mois {
  max-width: var(--large); margin: 2.5rem auto; padding: 2rem 2.2rem;
  background: var(--marine); color: var(--blanc);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
}
.offre-du-mois .surtitre { color: var(--or); margin: 0 0 .5rem; }
.offre-titre { font-size: clamp(1.3rem, 2.6vw, 1.9rem); font-weight: 800; margin: 0; }
.offre-texte { margin: .5rem 0 0; color: rgba(255, 255, 255, .8); }
.offre-outlet { margin: 1.5rem auto 0; text-align: left; }

/* ---------- Description produit ---------- */

.description-produit { margin: 0 0 1.3rem; line-height: 1.65; color: var(--ardoise); }

/* ---------- Guide des tailles (page service et fenêtre de la fiche) ---------- */
.lien-guide {
  display: inline-flex; align-items: center; gap: .35rem;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: .74rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--marine);
  border-bottom: 2px solid var(--or); padding-bottom: .15rem; text-decoration: none;
}
.lien-guide:hover { color: var(--or-chaud, var(--or)); }
.lien-guide .ic { width: 16px; height: 16px; }

.mesurer { margin-top: 2.2rem; }
.mesurer h3, .guide-estimateur h3, .guide-tableaux h3 {
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 1rem;
}
.mesures-conseils { list-style: none; padding: 0; margin: 0 0 .8rem; display: grid; gap: .55rem; }
.mesures-conseils li { padding-left: 1rem; border-left: 3px solid var(--or); font-size: .92rem; }

.guide-estimateur { margin-top: 2.4rem; padding: 1.8rem; border: 1px solid var(--bord); }
.guide-tableaux { margin-top: 2.4rem; }
.tableau-maison { border-top: 1px solid var(--bord); padding: .9rem 0; }
.tableau-maison summary { cursor: pointer; font-weight: 700; font-size: .92rem; }
.tableau-maison[open] summary { color: var(--or-chaud, var(--or)); margin-bottom: .8rem; }

.estimateur { display: flex; flex-wrap: wrap; gap: .9rem 1.2rem; margin: 0 0 1.1rem; }
.champ-mesure { display: flex; flex-direction: column; gap: .3rem; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.champ-marque { margin-bottom: 1.2rem; max-width: 26rem; }
.champ-marque select { font: inherit; font-size: .92rem; text-transform: none; letter-spacing: 0; padding: .55rem .6rem; border: 1px solid var(--bord); background: var(--blanc); }
.saisie-cm { display: inline-flex; align-items: center; gap: .4rem; font-weight: 500; text-transform: none; letter-spacing: 0; }
.saisie-cm input {
  width: 6.2rem; font: inherit; font-size: 1rem; padding: .5rem .6rem;
  border: 1px solid var(--bord); background: var(--blanc);
}
.saisie-cm input:focus { outline: 2px solid var(--or); outline-offset: -1px; }

.verdict-taille { background: var(--gris); padding: 1rem 1.2rem; margin-bottom: 1.2rem; }
.verdict-taille p { margin: 0 0 .5rem; }
.verdict-taille p:last-child { margin-bottom: 0; }
.taille-conseillee { font-size: 1rem; }
.taille-conseillee strong { font-size: 1.3rem; color: var(--marine); }
.dispo-conseillee { font-size: .9rem; color: #2E7D4F; font-weight: 600; }
.dispo-conseillee.epuisee { color: var(--ardoise); font-weight: 500; }
.verdict-taille .bouton { margin-top: .4rem; }

.defile-tableau { overflow-x: auto; margin-bottom: .9rem; }
.tableau-tailles { border-collapse: collapse; width: 100%; font-size: .84rem; min-width: 22rem; }
.tableau-tailles th, .tableau-tailles td { padding: .45rem .6rem; border-bottom: 1px solid var(--bord); text-align: left; white-space: nowrap; }
.tableau-tailles thead th { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--doux); }
.tableau-tailles thead th span { text-transform: none; font-weight: 500; }
.tableau-tailles tbody th { font-weight: 700; }
.tableau-tailles tr.conseillee { background: #F6EEDF; }
.tableau-tailles tr.conseillee th { color: var(--or-chaud, var(--or)); }
.tableau-longueurs { min-width: 0; width: auto; }
.source-tableau { font-size: .74rem; }

.modale-tailles {
  border: 0; padding: 0; width: min(760px, 94vw); max-height: 90vh;
  box-shadow: 0 20px 60px rgba(13, 27, 42, .35);
}
.modale-tailles::backdrop { background: rgba(13, 27, 42, .55); }
.modale-tailles-contenu { padding: 1.6rem 1.8rem 1.8rem; }
.modale-tailles-entete { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .4rem; }
.modale-tailles-entete h2 { margin: 0; font-size: 1.3rem; }
.modale-tailles-entete .surtitre { margin: 0 0 .2rem; color: var(--or); }
.nom-tableau { margin: 0 0 1.1rem; color: var(--doux); font-size: .88rem; }
@media (max-width: 560px) {
  .modale-tailles-contenu { padding: 1.2rem 1rem 1.4rem; }
  .guide-estimateur { padding: 1.2rem 1rem; }
}

/* ---------- Carte cadeau : burger, formulaire, panier, commande ---------- */
.tiroir-panneau .ic-cadeau {
  width: 18px; height: 18px; color: var(--or); vertical-align: -3px; margin-left: .45rem;
}
.form-carte { margin-top: 1.6rem; }
.montants-carte { border: 0; padding: 0; margin: 0 0 1.1rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.montants-carte legend, .autre-montant label, .destinataire-carte {
  font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--doux);
}
.montants-carte legend { padding: 0; margin-bottom: .7rem; }
.montant-carte { position: relative; cursor: pointer; }
.montant-carte input { position: absolute; opacity: 0; pointer-events: none; }
.montant-carte span {
  display: inline-block; min-width: 5.6rem; padding: .75rem 1.1rem; text-align: center;
  border: 1px solid var(--bord); background: var(--blanc); color: var(--marine);
  font-weight: 700; font-size: .92rem; transition: border-color .15s, background .15s;
}
.montant-carte:hover span { border-color: var(--or); }
.montant-carte input:checked + span { background: var(--marine); border-color: var(--marine); color: var(--blanc); box-shadow: inset 0 -3px 0 var(--or); }
.montant-carte input:focus-visible + span { outline: 2px solid var(--or); outline-offset: 2px; }
.autre-montant { margin: 0 0 1.1rem; }
.autre-montant .saisie-cm { margin-top: .35rem; }
.autre-montant input { width: 7rem; font: inherit; font-size: 1rem; padding: .55rem .6rem; border: 1px solid var(--bord); }
.destinataire-carte { display: block; margin: 0 0 1.1rem; }
.destinataire-carte input {
  display: block; width: 100%; max-width: 24rem; margin-top: .35rem; font: inherit; font-size: .92rem;
  text-transform: none; letter-spacing: 0; color: var(--texte); padding: .6rem .7rem; border: 1px solid var(--bord);
}
.form-carte .erreur-commande { margin-bottom: 1rem; }
.confirmation-carte { margin-top: 1.4rem; padding: 1.1rem 1.3rem; background: var(--blanc); border-left: 3px solid var(--or); }
.confirmation-carte p { margin: 0 0 .5rem; }
.confirmation-carte p:last-child { margin: 0; }
.code-carte, .code-ligne {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-weight: 700; letter-spacing: .05em; color: var(--marine);
}
.code-carte { font-size: 1.05rem; background: #F6EEDF; padding: .15rem .5rem; white-space: nowrap; }
.code-ligne { font-size: .74rem; margin: .1rem 0 0; }
.recap-ligne .code-ligne { margin-left: .3rem; }
.vignette-cadeau { display: flex; align-items: center; justify-content: center; background: var(--marine); color: var(--or); }
.vignette-cadeau svg { width: 28px; height: 28px; }
.code-cadeau { margin-bottom: 1.1rem; }
.saisie-code { display: flex; gap: .5rem; align-items: stretch; margin-top: .35rem; }
.formulaire-commande .saisie-code input { margin-top: 0; max-width: 16rem; text-transform: uppercase; letter-spacing: .05em; }
.message-cadeau { margin: .5rem 0 0; font-size: .84rem; }
.message-cadeau.ok { color: #2E7D4F; }
.message-cadeau.ko { color: #B3261E; }
.recap-deduction span:last-child { color: #2E7D4F; font-weight: 700; }
.expire-carte { font-size: .88rem; color: var(--doux); margin-top: -.2rem; }
.expire-carte strong { color: var(--marine); }
.expire-ligne { display: block; font-size: .72rem; color: var(--doux); margin: .1rem 0 0; }

/* ---------- Jeans et pantalons : la photo entière ----------
   Les photos du fournisseur sont plus hautes que la vignette (2:3 contre
   3:4) : recadrées, elles perdaient les pieds. On les montre entières, de
   la taille aux chevilles, sur le gris de studio des photos. */
.produit-image.image-entiere img,
.vue-principale.image-entiere img {
  object-fit: contain; object-position: center; background: #E3E3E3;
}
.vue-principale.image-entiere { background: #E3E3E3; }

/* ---------- Lee et Wrangler, les maisons phares, en grand ---------- */
.carte-marque-vedette { border-color: var(--or); }
.carte-marque-vedette .logotype { font-size: 2.3rem; }
.carte-marque-vedette .nom-marque { font-size: 1.05rem; }
@media (min-width: 701px) {
  .grille-marques .carte-marque-vedette { grid-column: span 2; padding: 2.4rem 1rem 1.8rem; }
  .grille-marques .carte-marque-vedette .cadre-logo { height: 110px; }
  .grille-marques .carte-marque-vedette .cadre-logo img { max-height: 100px; max-width: 260px; }
  .grille-marques-magasin { grid-template-columns: repeat(6, 1fr); }
  .grille-marques-magasin .carte-marque { grid-column: span 2; }
  .grille-marques-magasin .carte-marque-vedette { grid-column: span 3; padding: 1.8rem .8rem 1.3rem; }
  .grille-marques-magasin .carte-marque-vedette .cadre-logo { height: 78px; }
  .grille-marques-magasin .carte-marque-vedette .logotype { font-size: 2rem; }
}
@media (max-width: 700px) {
  .grille-marques-magasin .carte-marque-vedette { grid-column: 1 / -1; }
  .grille-marques .carte-marque-vedette .logotype { font-size: 1.9rem; }
}

/* ---------- Carrousel des rayons : l'article en entier ----------
   Les tuiles étaient en paysage (4:3) et la photo, portrait, y était
   recadrée : on ne voyait qu'une bande — la taille d'un jean, le buste
   d'une veste. La tuile passe en portrait, la photo s'y affiche entière sur
   le gris de studio du fournisseur, et le libellé quitte la photo pour un
   bandeau dessous : il ne cache plus les pieds. */
.carte-univers {
  aspect-ratio: auto; height: auto; min-height: 0;
  display: flex; flex-direction: column; padding: 0;
  background: #E3E3E3;
}
.carte-univers::after { content: none; }
.carte-univers-fond {
  position: static; display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 4; object-fit: contain; object-position: center;
  background: #E3E3E3;
}
.carte-univers:hover .carte-univers-fond { transform: scale(1.03); }
.carte-univers-corps {
  height: auto; flex: none; justify-content: center;
  padding: .75rem .5rem .8rem; background: var(--marine);
}
.carte-univers-nom { text-shadow: none; }
.carte-univers span { text-shadow: none; }
@media (max-width: 900px) {
  .carte-univers { aspect-ratio: auto; }
}

/* Panier : la vignette montre tout l'article, pas un morceau de toile. */
.ligne-panier img.vignette { object-fit: contain; background: #E3E3E3; }
/* Le bandeau du libellé prend toute la largeur de la tuile : la règle
   d'origine alignait le contenu à droite (align-items: flex-end). */
.carte-univers { align-items: stretch; }
.carte-univers-corps { width: 100%; align-items: center; padding: .6rem .5rem .65rem; }
.carte-univers-nom { padding-bottom: .3rem; }
.carte-univers-lien { margin-top: .3rem; }
/* « Afficher tous les résultats » : à la suite des numéros, en or pour
   qu'on le repère sans le confondre avec une page. */
.page-lien.page-tout {
  width: auto; padding: 0 1rem; margin-left: .6rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  border-color: var(--or); color: var(--marine);
}
.page-lien.page-tout:hover { background: var(--or); color: var(--blanc); }
@media (max-width: 600px) {
  .page-lien.page-tout { flex-basis: 100%; margin: .6rem 0 0; }
}

/* ---------- Boutique : le carrousel des rayons de l'univers ---------- */
.rayons-univers { max-width: var(--large); margin: 0 auto; padding: 1.6rem 2rem .4rem; }
.rayons-univers .entete-categories { margin-bottom: 1rem; }
/* Le rayon ouvert se repère au filet or, comme les onglets de la barre. */
.carte-univers.courant { box-shadow: 0 0 0 3px var(--or); }
.carte-univers.courant .carte-univers-corps { background: var(--or); }
.carte-univers.courant .carte-univers-nom { border-bottom-color: var(--marine); }
@media (max-width: 700px) { .rayons-univers { padding: 1.2rem 1.2rem .2rem; } }

/* ---------- Logos des marques : cadre à largeur connue ----------
   Sans largeur, le cadre se réduisait à zéro et le logo — pourtant
   chargé — ne s'affichait pas : les cartes Lee et Wrangler paraissaient
   vides. Le cadre prend donc toute la largeur de la carte, et le logo s'y
   inscrit en entier. */
.cadre-logo { width: 100%; }
.cadre-logo img { max-width: min(150px, 100%); max-height: 100%; }
.grille-marques .carte-marque-vedette .cadre-logo img { max-width: min(260px, 100%); }

/* Sur la page La boutique, les cartes sont plus étroites : « WRANGLER »,
   très espacé, débordait de la sienne. */
.grille-marques-magasin .carte-marque-vedette .logotype { font-size: 1.45rem; }
.grille-marques-magasin .carte-marque-vedette .cadre-logo img { max-width: min(190px, 100%); }

/* « WRANGLER » est très espacé : sur la carte étroite de la page La
   boutique, il débordait encore sur les côtés. Sa taille suit la largeur
   de l'écran, son interlettrage est resserré, et le cadre coupe net ce
   qui dépasserait malgré tout. */
.grille-marques-magasin .carte-marque-vedette .logotype {
  font-size: clamp(.8rem, 1.6vw, 1.35rem); letter-spacing: .16em;
  max-width: 100%; overflow: hidden; text-overflow: clip;
}
.grille-marques-magasin .cadre-logo { overflow: hidden; }
/* Même souci sur les cartes ordinaires de cette grille (Napapijri) : on
   resserre l'interlettrage et on borne la largeur. */
.grille-marques-magasin .logotype { max-width: 100%; overflow: hidden; }
.grille-marques-magasin .logo-large-souligne { letter-spacing: .16em; }

/* ---------- La taille se choisit sur la vignette ----------
   Le bouton ajoutait au panier sans taille : la boutique recevait une
   commande qu'elle ne pouvait pas préparer. Les tailles deviennent des
   boutons, et l'ajout n'est possible qu'une fois l'une d'elles retenue. */
button.taille {
  font: inherit; font-size: .64rem; font-weight: 700; letter-spacing: .04em;
  background: none; cursor: pointer; border-radius: 0;
  transition: border-color .15s, background .15s, color .15s;
}
button.taille:hover { border-color: var(--or); color: var(--or); }
button.taille.choisie { background: var(--marine); border-color: var(--marine); color: var(--blanc); }
button.taille:focus-visible { outline: 2px solid var(--or); outline-offset: 1px; }
.bouton-produit:disabled { background: var(--gris); color: var(--doux); cursor: default; }
.bouton-produit:disabled:hover { background: var(--gris); color: var(--doux); }

/* ---------- Carrousel des rayons : des cases toutes pareilles ----------
   « Pantalons & Leggings » passait à la ligne et sa tuile devenait plus
   haute que ses voisines. Le libellé tient sur une ligne, et le bandeau a
   la même hauteur partout. */
.carte-univers-corps { height: 3.4rem; justify-content: center; }
.carte-univers-nom {
  white-space: nowrap; max-width: 100%;
  font-size: clamp(.5rem, .82vw, .72rem); letter-spacing: .06em;
}

/* ---------- Barre des rayons : changer d'univers d'un clic ---------- */
.bascule-univers {
  display: inline-flex; align-items: center; gap: .1rem; flex: none;
  margin-right: .4rem; padding-right: .8rem;
  border-right: 1px solid rgba(255, 255, 255, .18);
}
.lien-univers {
  font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .62); padding: .5rem .55rem; white-space: nowrap;
  transition: color .15s;
}
.lien-univers:hover { color: var(--blanc); }
.lien-univers.actif { color: var(--or); }

/* ---------- Maillots : la pièce assortie ----------
   Haut et bas se vendent séparément, chacun sa taille. La fiche propose
   donc l'autre moitié du maillot, sans l'imposer. */
.bloc-assorti { margin: 1.4rem 0; }
/* Les coordonnés SikSilk en proposent jusqu'à trois : sans cet écart, les
   cartes se touchaient et ne formaient plus qu'un bloc illisible. */
.cartes-assorties { display: grid; gap: .5rem; }
.carte-assortie {
  display: flex; align-items: center; gap: .9rem;
  border: 1px solid var(--bord); padding: .7rem .9rem; background: var(--blanc);
  transition: border-color .18s;
}
.carte-assortie:hover { border-color: var(--or); }
.carte-assortie img {
  width: 56px; height: 72px; object-fit: cover; flex: none; background: var(--gris);
}
.details-assortie { display: flex; flex-direction: column; gap: .15rem; flex: 1; min-width: 0; }
.nom-assortie { font-weight: 700; font-size: .92rem; color: var(--marine); }
.prix-assortie { font-weight: 700; font-size: .88rem; color: var(--marine); }
.voir-assortie {
  flex: none; font-size: .68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--or);
}

/* ======================================================================
   Notes du client du 15.09.2026
   ====================================================================== */

/* ---------- Vignette : la taille reprise des filtres ----------
   « Jeans 33 » + « L32 » cochés : la vignette le rappelle, et son bouton
   ajoute directement. Un lien discret permet d'en changer. */
.selection-carte { font-size: .74rem; color: var(--doux); margin: -.2rem 0 .5rem; }
.selection-carte strong { color: var(--marine); }
.modifier-selection {
  background: none; border: 0; padding: 0; font: inherit; font-size: .72rem;
  color: var(--or); text-decoration: underline; cursor: pointer;
}
.bouton-produit.bouton-pret { background: var(--marine); color: var(--blanc); }
.bouton-produit.bouton-pret:hover { background: var(--or); color: var(--marine); }

/* ---------- La fenêtre « taille et longueur » ---------- */
.modale-choix-taille {
  border: 0; padding: 0; width: min(460px, 94vw); max-height: 92vh;
  box-shadow: 0 20px 60px rgba(13, 27, 42, .35);
}
.modale-choix-taille::backdrop { background: rgba(13, 27, 42, .55); }
.choix-taille-contenu { padding: 1.4rem 1.5rem 1.5rem; }
.choix-taille-entete { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.2rem; }
.choix-taille-entete img { width: 64px; height: 86px; object-fit: cover; background: var(--gris); flex: none; }
.choix-taille-entete > div { flex: 1; min-width: 0; }
.choix-taille-entete h2 { font-size: 1.05rem; margin: .1rem 0 .15rem; }
.choix-taille-entete .mention { margin: 0; }
.choix-taille-prix { font-weight: 800; margin: .3rem 0 0; }
.modale-choix-taille .bloc-tailles { padding-top: 1rem; margin-bottom: 1rem; }
.modale-choix-taille .entete-tailles h3 { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; margin: 0; }
.modale-choix-taille .choix-taille { font: inherit; font-size: .84rem; cursor: pointer; }
.consigne-choix { font-size: .82rem; color: var(--or); font-weight: 600; min-height: 1.3em; margin: 0 0 .7rem; }
.modale-choix-taille [data-valider-choix]:disabled { background: var(--gris); color: var(--doux); cursor: default; }
.lien-fiche-choix {
  display: block; text-align: center; margin-top: .9rem;
  font-size: .76rem; font-weight: 600; color: var(--doux);
}
.lien-fiche-choix:hover { color: var(--or); }
@media (max-width: 560px) {
  /* Sur téléphone, la fenêtre se pose en bas de l'écran, sous le pouce. */
  .modale-choix-taille { width: 100vw; max-width: 100vw; margin: auto 0 0; max-height: 88vh; }
  .choix-taille-contenu { padding: 1.1rem 1rem 1.3rem; }
}

/* ---------- Confirmation d'ajout au panier ---------- */
.avis-panier {
  position: fixed; left: 50%; bottom: 1.2rem; z-index: 80;
  display: flex; align-items: center; gap: 1rem;
  width: max-content; max-width: calc(100vw - 2rem);
  background: var(--marine); color: var(--blanc);
  padding: .7rem .8rem .7rem 1.1rem; font-size: .84rem;
  box-shadow: 0 10px 30px rgba(13, 27, 42, .3);
  transform: translate(-50%, 150%); opacity: 0; pointer-events: none;
  transition: transform .25s ease-out, opacity .25s;
}
.avis-panier.visible { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.avis-panier .bouton { flex: none; }

/* ---------- Panier : quantités, retrait, retour à l'article ---------- */
.lien-ligne { flex: none; }
.ligne-panier h3 a:hover, .lien-recap:hover { color: var(--or); }
.lien-recap { text-decoration: underline; text-decoration-color: var(--bord); text-underline-offset: 3px; }
.quantite-ligne { display: inline-flex; align-items: center; gap: .35rem; margin-top: .35rem; }
.ligne-panier .quantite-ligne .prix-ligne { margin: 0 0 0 .6rem; }
.pas-quantite {
  width: 1.7rem; height: 1.7rem; padding: 0;
  border: 1px solid var(--bord); background: var(--blanc); color: var(--marine);
  font: inherit; font-size: .95rem; line-height: 1; cursor: pointer;
}
.pas-quantite:hover:not(:disabled) { border-color: var(--or); color: var(--or); }
.pas-quantite:disabled { opacity: .35; cursor: default; }
.valeur-quantite { min-width: 1.2rem; text-align: center; font-weight: 700; font-size: .86rem; }
.recap-ligne { align-items: center; flex-wrap: wrap; }
.recap-ligne .quantite-ligne { margin-top: 0; }
.recap-ligne .retirer { padding: 0 .1rem; }

/* ---------- « Voir plus » à la place des numéros de page ---------- */
.pagination .page-compte { margin: 0 0 .5rem; }
.page-progression { flex-basis: 100%; display: flex; justify-content: center; margin-bottom: 1.1rem; }
.page-piste { display: block; width: 240px; max-width: 70%; height: 3px; background: var(--bord); }
.page-piste span { display: block; height: 100%; background: var(--or); transition: width .3s; }
.page-lien.page-plus {
  background: var(--marine); border-color: var(--marine); color: var(--blanc);
  padding: 0 1.6rem; height: 2.8rem; font-weight: 700;
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
}
.page-lien.page-plus:hover { background: var(--or); border-color: var(--or); color: var(--marine); }
.pagination .page-lien.page-tout { height: 2.8rem; }
@media (max-width: 600px) {
  .page-lien.page-plus { flex-basis: 100%; }
}

/* ---------- Recherche sans résultat : jamais une impasse ---------- */
.vide-catalogue p { margin-bottom: .9rem; }
.actions-vide { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-bottom: 1rem; }
.vide-recherche .mention { max-width: 460px; margin: 1.2rem auto .6rem; }
.liens-vide { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.2rem; }
.liens-vide a {
  font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--marine); border-bottom: 2px solid var(--or); padding-bottom: .15rem;
}

/* ---------- Fiche produit : la galerie qui glisse ---------- */
.vue-principale { position: relative; }
.piste-galerie {
  display: flex; width: 100%; height: 100%;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.piste-galerie::-webkit-scrollbar { display: none; }
.piste-galerie:focus-visible { outline: 2px solid var(--or); outline-offset: -2px; }
.diapo-galerie, .diapo-visionneuse {
  flex: 0 0 100%; margin: 0; scroll-snap-align: start; scroll-snap-stop: always;
}
.diapo-galerie img { width: 100%; height: 100%; object-fit: cover; object-position: center top; cursor: zoom-in; }
.vue-principale.image-entiere .diapo-galerie img { object-fit: contain; object-position: center; }
.fleche-galerie {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 2.6rem; height: 2.6rem; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .88); color: var(--marine);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 10px rgba(13, 27, 42, .15);
  transition: opacity .2s, background .2s;
}
.fleche-galerie:hover:not(:disabled) { background: var(--or); }
.fleche-galerie:disabled { opacity: 0; pointer-events: none; }
.fleche-galerie.precedent { left: .7rem; }
.fleche-galerie.suivant { right: .7rem; }
.compteur-galerie {
  position: absolute; left: 50%; bottom: .8rem; transform: translateX(-50%);
  background: rgba(13, 27, 42, .72); color: var(--blanc);
  font-size: .72rem; font-weight: 600; letter-spacing: .08em; padding: .2rem .6rem;
}
.agrandir-galerie {
  position: absolute; right: .7rem; bottom: .7rem;
  width: 2.3rem; height: 2.3rem; border: 0; padding: 0;
  background: rgba(255, 255, 255, .88); color: var(--marine); cursor: pointer;
  display: grid; place-items: center;
}
.agrandir-galerie .ic { width: 18px; height: 18px; }
.agrandir-galerie:hover { background: var(--or); }
/* Au doigt, on glisse : les flèches encombreraient la photo. */
@media (hover: none) { .vue-principale .fleche-galerie { display: none; } }

/* ---------- La visionneuse plein écran ---------- */
.visionneuse {
  border: 0; padding: 0; margin: 0;
  width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh;
  background: rgba(13, 27, 42, .96); overflow: hidden;
}
.visionneuse::backdrop { background: rgba(13, 27, 42, .96); }
.diapo-visionneuse { height: 100vh; display: grid; place-items: center; padding: 3.5rem 4.5rem; }
/* Hauteur explicite : dans une cellule de grille, un max-height en pourcentage
   est ignoré, et la photo débordait de l'écran. */
.diapo-visionneuse img { width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 7rem); object-fit: contain; }
.visionneuse .fleche-galerie { background: rgba(255, 255, 255, .14); color: var(--blanc); width: 3rem; height: 3rem; }
.visionneuse .fleche-galerie:hover:not(:disabled) { background: var(--or); color: var(--marine); }
.visionneuse .fleche-galerie.precedent { left: 1rem; }
.visionneuse .fleche-galerie.suivant { right: 1rem; }
.visionneuse .compteur-galerie { bottom: 1.2rem; background: rgba(255, 255, 255, .14); }
.fermer-visionneuse {
  position: absolute; top: 1rem; right: 1rem;
  width: 2.8rem; height: 2.8rem; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: var(--blanc);
  font-size: 1.2rem; cursor: pointer;
}
.fermer-visionneuse:hover { background: var(--or); color: var(--marine); }
body.visionneuse-ouverte { overflow: hidden; }
@media (max-width: 700px) {
  .diapo-visionneuse { padding: 3.8rem .4rem 3.2rem; }
  .visionneuse .fleche-galerie { display: none; }
}

/* ---------- Raccourcis vers les filtres, en tête de liste ---------- */
/* La rangée défile en largeur sur téléphone : sans min-width à zéro, la
   colonne des produits prenait la largeur de la rangée entière et la page
   débordait de l'écran. */
.colonne-produits { min-width: 0; }
.raccourcis-filtres {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  padding: .9rem 1rem; margin-bottom: 1.2rem;
  background: var(--gris); border-left: 3px solid var(--or);
}
.raccourcis-titre {
  font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--marine); margin-right: .4rem;
}
.raccourci {
  display: inline-flex; align-items: center; gap: .35rem;
  font: inherit; font-size: .8rem; font-weight: 600; color: var(--marine);
  background: var(--blanc); border: 1px solid var(--bord); border-radius: 999px;
  padding: .45rem .9rem; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.raccourci:hover { border-color: var(--or); color: var(--or); }
.raccourci.actif { background: var(--marine); border-color: var(--marine); color: var(--blanc); }
.raccourci-compte {
  display: inline-grid; place-items: center; min-width: 1.2rem; height: 1.2rem;
  border-radius: 999px; background: var(--or); color: var(--marine);
  font-size: .68rem; font-weight: 800;
}
.raccourci-chevron { font-size: .7rem; opacity: .6; }
/* La rubrique ouverte par un raccourci se signale d'un éclat or. */
.groupe-filtre.signale { animation: signale 1.2s ease-out; }
@keyframes signale {
  0% { background: rgba(201, 166, 107, .35); }
  100% { background: transparent; }
}
@media (max-width: 900px) {
  /* Sur téléphone, la rangée défile au doigt plutôt que de s'empiler. */
  .raccourcis-filtres { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: .4rem 0 1rem; }
  .raccourcis-filtres::-webkit-scrollbar { display: none; }
  .raccourci { flex: none; }
  .raccourcis-titre { flex: none; }
}

/* ---------- Vignettes : feuilleter les photos sur place ----------
   Demande du client du 16.09.2026. Les flèches apparaissent au survol sur
   ordinateur ; au doigt, elles restent visibles et l'on peut aussi glisser. */
.produit-image { overflow: hidden; }
.lien-image { display: block; width: 100%; height: 100%; }
.piste-carte {
  display: flex; width: 100%; height: 100%;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
}
.piste-carte::-webkit-scrollbar { display: none; }
.piste-carte img { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.fleche-carte {
  position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
  width: 2.1rem; height: 2.1rem; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .9); color: var(--marine);
  font-size: 1.25rem; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 8px rgba(13, 27, 42, .15);
  opacity: 0; transition: opacity .2s, background .2s;
}
.fleche-carte.precedent { left: .5rem; }
.fleche-carte.suivant { right: .5rem; }
.produit-image:hover .fleche-carte:not(:disabled),
.fleche-carte:focus-visible { opacity: 1; }
.fleche-carte:hover { background: var(--or); }
.fleche-carte:disabled { opacity: 0 !important; pointer-events: none; }
.photo-unique .fleche-carte { display: none; }
@media (hover: none) {
  .fleche-carte:not(:disabled) { opacity: .85; }
  .fleche-carte { width: 1.9rem; height: 1.9rem; font-size: 1.1rem; }
}

/* ---------- Panier vide : « Commander » grisé et inerte ---------- */
.bouton.bouton-inactif,
.bouton.bouton-inactif:hover {
  background: var(--gris); color: var(--doux); cursor: not-allowed; pointer-events: none;
}

/* ---------- Services : quatre cartes depuis le Click & Collect ----------
   En trois colonnes, la quatrième carte restait seule sur sa ligne. */
.cartes-services { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .cartes-services { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .cartes-services { grid-template-columns: 1fr; } }
/* Deux blocs de service à la suite (Livraison, puis Click & Collect). */
.service + .service { margin-top: 1.2rem; }

/* ---------- « Tout effacer » les filtres ----------
   Lien discret en tête du panneau et à côté du compteur, affiché dès qu'un
   critère agit. Il retire les filtres, pas le rayon. */
.effacer-filtres {
  font: inherit; font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--marine);
  background: none; border: 0; padding: .35rem 0; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--or); text-underline-offset: 4px;
}
.effacer-filtres:hover { color: var(--or); }
.effacer-filtres:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
.panneau-filtres > .effacer-filtres { display: block; margin: -.1rem 0 .4rem; }
.barre-resultats { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }

/* Trait noir entre tailles en chiffres et tailles en lettres. */
.separateur-tailles { height: 3px; background: #000; margin: .5rem .3rem; border-radius: 1px; }
/* Intitulé de chaque groupe de tailles (US, EU, lettres). */
.intitule-tailles {
  margin: .2rem .3rem .3rem; font-size: .66rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--marine);
}
.mention-tailles-eu { margin: .5rem 0 0; font-size: .8rem; color: var(--ardoise); }

/* Salsa taille petit : encadré discret sous le choix de taille. */
.mention-salsa {
  margin: .7rem 0 0; padding: .6rem .8rem; font-size: .82rem; line-height: 1.45;
  color: var(--marine); background: #F6EEDF; border-left: 3px solid var(--or);
}

/* ---------- Alerte de retour en stock ----------
   Une taille épuisée porte une petite cloche ; la toucher ouvre l'encadré
   e-mail sous les tailles. Cloche or quand l'alerte est posée. */
.choix-taille.indisponible[data-alerte-taille] { cursor: pointer; }
.choix-taille.indisponible[data-alerte-taille]:hover { border-color: var(--or); color: var(--marine); }
.cloche-taille {
  position: absolute; top: 2px; right: 2px; width: 11px; height: 11px;
  color: var(--doux); line-height: 0; z-index: 1;
}
.cloche-taille .ic-cloche { width: 11px; height: 11px; }
.choix-taille.alerte-active .cloche-taille { color: var(--or); }
.choix-taille.alerte-active .cloche-taille .ic-cloche { fill: var(--or); }
.indice-alerte {
  display: flex; align-items: center; gap: .4rem;
  margin: .55rem 0 0; font-size: .78rem; color: var(--ardoise);
}
.indice-alerte .ic-cloche, .titre-alerte .ic-cloche { width: 15px; height: 15px; color: var(--or); flex: none; }
.alerte-retour {
  position: relative; margin-top: .7rem; padding: .9rem 2.2rem .9rem 1rem;
  background: #F6EEDF; border-left: 3px solid var(--or);
}
.titre-alerte { display: flex; align-items: center; gap: .45rem; margin: 0 0 .6rem; font-size: .88rem; color: var(--marine); }
.alerte-retour > .titre-alerte:only-of-type { margin: 0; }
.ligne-alerte { display: flex; gap: .5rem; flex-wrap: wrap; }
.ligne-alerte input {
  flex: 1 1 12rem; min-width: 0; font: inherit; font-size: .9rem;
  padding: .55rem .7rem; border: 1px solid var(--bord); background: var(--blanc);
}
.form-alerte .mention { margin: .5rem 0 0; font-size: .74rem; }
.erreur-alerte { margin: .5rem 0 0; font-size: .8rem; color: #B3261E; }
.fermer-alerte {
  position: absolute; top: .45rem; right: .5rem; background: none; border: 0;
  font-size: .95rem; cursor: pointer; color: var(--doux); padding: .2rem;
}
.fermer-alerte:hover { color: var(--marine); }

/* « Afficher plus » sous le Click & Collect, au moment de commander. */
.lien-plus-collect {
  display: inline; margin-left: .35rem; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--marine); text-decoration: underline; text-decoration-color: var(--or); text-underline-offset: 4px;
  white-space: nowrap;
}
.carte-collect .plus-collect { margin: -.3rem 1rem 1rem; }
/* La carte porte le fond et le cadre ; le label à l'intérieur n'en a plus. */
.carte-collect {
  margin-bottom: .6rem; background: var(--gris); border: 1px solid transparent;
}
.carte-collect:has(input:checked) { border-color: var(--or); background: var(--blanc); }
.carte-collect .choix-mode { margin-bottom: 0; background: none; border: 0; }
.plus-collect summary {
  display: inline-block; cursor: pointer; list-style: none;
  font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--marine); text-decoration: underline; text-decoration-color: var(--or); text-underline-offset: 4px;
}
.plus-collect summary::-webkit-details-marker { display: none; }
.plus-collect[open] summary { font-size: 0; }
.plus-collect[open] summary::after { content: "Afficher moins"; font-size: .76rem; }
.plus-collect {
  padding: .8rem 1rem; font-size: .86rem; line-height: 1.55;
  color: var(--texte); background: #F6EEDF; border-left: 3px solid var(--or);
}
.plus-collect strong { color: var(--marine); }
.plus-collect[hidden] { display: none; }

/* ---------- Remonter en haut de la page ----------
   Rond marine, flèche or, en bas à droite — au-dessus du badge Netlify de
   la démo, pour ne pas le masquer. */
.remonter-haut {
  position: fixed; right: 1.2rem; bottom: 5.2rem; z-index: 60;
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--marine); color: var(--or);
  box-shadow: 0 6px 18px rgba(13, 27, 42, .28);
  transition: background .18s, transform .18s;
}
.remonter-haut svg { width: 22px; height: 22px; }
.remonter-haut:hover { background: var(--or); color: var(--marine); transform: translateY(-2px); }
.remonter-haut:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
body.filtres-ouverts .remonter-haut, body.visionneuse-ouverte .remonter-haut { display: none; }
@media (max-width: 600px) { .remonter-haut { right: .9rem; bottom: 4.6rem; width: 42px; height: 42px; } }

/* ---------- Troisième panneau du héros : nos tailles (21.09) ---------- */
.hero-tailles { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.6rem; text-shadow: none; }
.hero-taille-bloc {
  display: flex; flex-direction: column; gap: .25rem; min-width: 12rem;
  padding: 1rem 1.2rem; background: rgba(12, 14, 17, .55); border-left: 3px solid var(--or);
  backdrop-filter: blur(3px);
}
.hero-taille-genre {
  font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--or);
}
.hero-taille-plage { font-size: clamp(1.5rem, 3.2vw, 2.2rem); font-weight: 800; color: #fff; line-height: 1.1; }
.hero-taille-plage em { font-style: normal; font-weight: 500; font-size: .6em; color: rgba(255, 255, 255, .8); }
.hero-taille-longueur { font-size: .9rem; color: rgba(255, 255, 255, .88); }
@media (max-width: 600px) {
  .hero-tailles { gap: .6rem; }
  .hero-taille-bloc { min-width: 0; flex: 1 1 8rem; padding: .8rem .9rem; }
  .hero-taille-plage { font-size: 1.25rem; white-space: nowrap; }
  .hero-taille-longueur { font-size: .8rem; }
}
/* ---------- Univers choisi : saut vers les catégories (21.09) ----------
   Les catégories de l'univers apparaissent en fondu, juste après le petit
   saut de la page : le visiteur voit que son clic a changé quelque chose. */
.bloc-categories-univers { scroll-margin-top: 140px; }
.bloc-categories-univers.apparition .grille-univers > * {
  animation: apparition-categorie .45s ease both;
}
.bloc-categories-univers.apparition .grille-univers > :nth-child(2) { animation-delay: .05s; }
.bloc-categories-univers.apparition .grille-univers > :nth-child(3) { animation-delay: .1s; }
.bloc-categories-univers.apparition .grille-univers > :nth-child(4) { animation-delay: .15s; }
.bloc-categories-univers.apparition .grille-univers > :nth-child(n+5) { animation-delay: .2s; }
@keyframes apparition-categorie {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bloc-categories-univers.apparition .grille-univers > * { animation: none; }
}
/* Panneau « Nos tailles » : duo femme / homme en jean à droite (choix C, 21.09). */
.hero-slide-tailles { background: #0D1B2A; }
.hero-slide-tailles::after { content: none; }
.hero-duo {
  position: absolute; top: 0; right: 0; bottom: 0; width: 52%; z-index: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.hero-duo img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; display: block; }
@media (max-width: 900px) {
  /* Sur petit écran, le duo passe en fond sous un voile, le texte par-dessus. */
  .hero-duo { width: 100%; }
  .hero-slide-tailles::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(13, 27, 42, .82) 0%, rgba(13, 27, 42, .55) 60%, rgba(13, 27, 42, .35) 100%);
  }
}@media (min-width: 901px) {
  /* Le texte reste sur le fond marine, sans mordre sur la photo (21.09). */
  .hero-slide-tailles .hero-contenu { max-width: none; width: calc(48% - 1rem); margin: 0; }
  .hero-slide-tailles .hero-titre { font-size: clamp(2rem, 4.3vw, 4.4rem); }
  .hero-slide-tailles .hero-taille-bloc { min-width: 0; flex: 1 1 0; }
  .hero-slide-tailles .hero-taille-plage { font-size: clamp(1.3rem, 2.4vw, 2.2rem); white-space: nowrap; }
}
/* ---------- Pastille 3 : « Votre taille n'est plus une exception » (23.09) ----------
   Deux carrés Homme / Femme, un bouton collé dessous, et le tiroir des
   tailles qui s'ouvre EN DESSOUS — jamais en plein écran. */
.hero-slide-tailles .hero-contenu { max-width: 720px; }
.hero-slide-tailles .hero-titre { font-size: clamp(1.9rem, 4vw, 3.4rem); }
.hero-titre-or { color: var(--or); }
.hero-slide-tailles .hero-texte { margin-top: 1rem; }

.tailles-carres { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: 1.6rem; }
.carre-taille {
  display: flex; flex-direction: column; gap: .25rem; align-items: flex-start;
  padding: 1rem 1.2rem; cursor: pointer; text-align: left;
  background: rgba(12, 14, 17, .62); border: 1px solid rgba(255, 255, 255, .18);
  color: var(--blanc); text-shadow: none; transition: border-color .15s, background .15s;
}
.carre-taille:hover { background: rgba(12, 14, 17, .74); }
.carre-taille.actif { border-color: var(--or); background: rgba(12, 14, 17, .82); }
.carre-genre {
  font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--or);
}
.carre-plage { font-size: clamp(1.2rem, 2.2vw, 1.7rem); font-weight: 800; line-height: 1.1; }
.carre-long { font-size: .84rem; color: rgba(255, 255, 255, .86); }

.bouton-trouver { display: block; width: 100%; margin-top: .8rem; }

.tiroir-taille {
  margin-top: .8rem; padding: 1.2rem; text-shadow: none;
  background: var(--blanc); color: var(--texte); border-top: 3px solid var(--or);
}
.tiroir-taille[hidden] { display: none; }
.tiroir-titre { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--marine); }
.tiroir-note { margin: .2rem 0 1rem; font-size: .84rem; color: var(--doux); }
.tiroir-label {
  margin: 1rem 0 .5rem; font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--marine);
}
.pastilles-tailles { display: flex; flex-wrap: wrap; gap: .4rem; }
.pastille-taille {
  min-width: 3rem; padding: .5rem .2rem; cursor: pointer;
  font: inherit; font-size: .88rem; font-weight: 700; color: var(--marine);
  background: var(--gris); border: 1px solid transparent; text-align: center;
}
.pastille-taille:hover { border-color: var(--marine); }
.pastille-taille.choisie { background: var(--or); border-color: var(--or); color: var(--marine); }
/* Couple W/L inexistant en rayon : la pastille reste lisible mais éteinte. */
.pastille-taille.indisponible { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.pastille-taille.indisponible:hover { border-color: inherit; }
.bouton-voir-tailles { display: block; width: 100%; margin-top: 1.2rem; text-align: center; }
.bouton-voir-tailles.inerte { background: var(--gris); color: var(--doux); cursor: default; }
.tiroir-micro { margin: .6rem 0 0; font-size: .86rem; color: var(--texte); }
.tiroir-liens { display: flex; gap: 1.2rem; flex-wrap: wrap; margin: .8rem 0 0; font-size: .82rem; }
.tiroir-liens a { color: var(--marine); text-decoration: underline; text-decoration-color: var(--or); text-underline-offset: 4px; }
.tiroir-liens a[hidden] { display: none; }
.tiroir-guide { font-style: italic; color: var(--doux) !important; }

/* Rappel de la taille enregistrée, dans la barre des rayons. */
/* ---------- Le rappel « Ma taille » dans l'en-tête (client, 09.10) ----------
   Il se lit à gauche de la loupe, sur toutes les pages. Sur téléphone
   l'en-tête est plein : il s'y réduit à une étiquette, et le détail s'ouvre
   au toucher, juste en dessous. */
.ma-taille { position: relative; display: flex; align-items: center; }
.ma-taille-pastille {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .35rem .2rem .7rem; white-space: nowrap;
  border: 1px solid rgba(201, 166, 107, .5);
}
.ma-taille-valeur { font-size: .78rem; font-weight: 700; color: var(--or); }
.ma-taille-valeur:hover { color: var(--marine); }
.ma-taille-mot { letter-spacing: .1em; text-transform: uppercase; font-size: .7rem; opacity: .85; }
.ma-taille-effacer {
  background: none; border: 0; padding: 0 .2rem; cursor: pointer;
  font: inherit; font-size: 1rem; line-height: 1; color: var(--doux);
}
.ma-taille-effacer:hover { color: var(--marine); }
.icone-ma-taille { display: none; }

@media (max-width: 760px) {
  /* L'étiquette seule, à gauche du logo et en doré : c'est là qu'on la voit,
     et la couleur dit qu'une taille est retenue (client, 09.10). L'en-tête
     est une grille à trois colonnes — plutôt que d'en ajouter une quatrième
     et de décentrer le logo, l'étiquette se pose entre le menu et lui. */
  .ma-taille {
    position: absolute; left: 3.05rem; top: 50%; transform: translateY(-50%);
  }
  .icone-ma-taille {
    display: inline-flex; color: var(--or);
    /* Un battement de cœur : deux pulsations puis une pause, pour attirer
       l'œil sans tourner en rond (client, 09.10). L'étiquette n'existe que
       si une taille est retenue — l'animation dit donc exactement ça. */
    animation: battement-taille 3s ease-in-out infinite;
  }
  .ma-taille.ouvert .icone-ma-taille { animation: none; }
  .ma-taille-pastille {
    /* Le rappel est à gauche : le panneau s'ouvre vers la droite, sinon il
       sortirait de l'écran. */
    display: none; position: absolute; top: calc(100% + .45rem); left: 0; right: auto; z-index: 40;
    padding: .4rem .5rem .4rem .8rem;
    background: var(--blanc); border-color: var(--bord);
    box-shadow: 0 6px 18px rgba(13, 27, 42, .18);
  }
  .ma-taille.ouvert .ma-taille-pastille { display: inline-flex; }
  .ma-taille.ouvert .icone-ma-taille { color: var(--marine); }
}

@media (max-width: 700px) {
  .hero-slide-tailles .hero-titre { font-size: clamp(1.5rem, 6vw, 2rem); }
  .carre-taille { padding: .7rem .8rem; }
  .carre-plage { font-size: 1.05rem; }
  .carre-long { font-size: .72rem; }
  .tiroir-taille { padding: .9rem; }
  /* Les pastilles se font défiler du doigt plutôt que d'empiler dix rangs. */
  .pastilles-tailles { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .4rem; }
  .pastille-taille { flex: none; }
}
/* ---------- Bouton flottant des filtres (client, 23.09) ----------
   Il suit le visiteur sur téléphone et tablette : ouvrir, refermer, et
   toujours à portée de pouce, même en bas d'une page de trente articles. */
.filtres-flottant { display: none; }
@media (max-width: 1024px) {
  .filtres-flottant {
    position: fixed; left: 1.2rem; bottom: 1.2rem; z-index: 68;
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .7rem 1.1rem; border: 0; border-radius: 999px; cursor: pointer;
    font: inherit; font-size: .78rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--blanc); background: var(--marine);
    box-shadow: 0 6px 20px rgba(13, 27, 42, .35);
  }
  .filtres-flottant svg { width: 16px; height: 16px; }
  /* Le nombre de filtres posés se détache en doré : c'est la seule
     information qui change sur ce bouton (client, 02.10). */
  .filtres-flottant [data-compte-filtres] { color: var(--or); }
  /* Un filtre est posé : le bouton entier passe en doré. Et ouvert, il passe
     par-dessus le voile pour refermer le tiroir. */
  .filtres-flottant.pose,
  .filtres-flottant.actif { background: var(--or); color: var(--marine); }
  .filtres-flottant.actif { z-index: 71; }
  /* Sur fond doré, le nombre reprend la couleur du texte. */
  .filtres-flottant.pose [data-compte-filtres],
  .filtres-flottant.actif [data-compte-filtres] { color: inherit; }
  body.filtres-ouverts .filtres-flottant { left: auto; right: 1.2rem; }
  /* Le bouton du haut fait double emploi avec le flottant. */
  .barre-mobile [data-ouvrir-filtres] { display: none; }
  .barre-mobile { justify-content: flex-end; }
}
/* Le nom écrit sous le logo faisait doublon : le logotype le dit déjà
   (client, 30.09). Il reste dans le HTML pour les lecteurs d'écran. */
.nom-marque {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Pastille 3 sur téléphone (client, 30.09) ----------
   Les deux carrés refusaient de se serrer sous leur contenu : la colonne
   Femme et le bouton « Trouver ma taille » sortaient de l'écran. Les
   colonnes peuvent maintenant rétrécir, et les pastilles se rangent sur
   plusieurs lignes plutôt qu'en un long rail à faire défiler. */
.tailles-carres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) {
  .hero-slide-tailles .hero-contenu { width: 100%; max-width: none; }
  .tailles-carres { gap: .5rem; margin-top: 1.1rem; }
  .carre-taille { padding: .6rem .7rem; }
  .carre-genre { font-size: .62rem; letter-spacing: .1em; }
  .carre-plage { font-size: 1rem; white-space: nowrap; }
  .carre-long { font-size: .68rem; }
  .bouton-trouver { padding: .8rem .6rem; font-size: .74rem; }
  .pastilles-tailles {
    flex-wrap: wrap; overflow-x: visible; max-height: 9.6rem; overflow-y: auto;
  }
  .pastille-taille { flex: 1 0 auto; min-width: 2.9rem; padding: .55rem .2rem; }
  .tiroir-taille { padding: .8rem; }
  .bouton-voir-tailles { padding: .85rem .6rem; }
}



/* ---------- Un bonnet sans photo montrable (client, 02.10) ----------
   Le fournisseur ne livre qu'un mannequin par bonnet. Dans l'univers d'en
   face, faute d'une prise du produit seul, la vignette porte le nom de la
   maison sur fond sable plutôt qu'une photo du mauvais côté. */
.produit-sans-photo { display: flex; align-items: center; justify-content: center; background: var(--sable, #f4f1ec); }
.produit-sans-photo .lien-image { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.sans-photo-mot {
  font-size: .9rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--doux);
}

/* ---------- Le mur des marques, en photos (client, 02.10) ----------
   La page reprend la vignette de « Marques en vedette » : la photo tient
   toute la tuile, le nom de la maison se pose au centre dessus. Les logos
   restent sur la page « La boutique », pour les maisons vendues en rayon. */
.grille-marques { gap: .8rem; }
.grille-marques .tuile-marque { aspect-ratio: 3 / 4; }
@media (min-width: 701px) {
  /* Les deux maisons phares tiennent deux colonnes : en 3/4 elles feraient
     une tour, on leur rend un format paysage. */
  .grille-marques .tuile-vedette { grid-column: span 2; aspect-ratio: 16 / 10; }
}
.compte-tuile {
  color: var(--or); font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(13, 27, 42, .95);
}
/* Sur téléphone, quatorze tuiles en colonne faisaient près de six écrans :
   deux colonnes, et les deux maisons phares en pleine largeur. */
@media (max-width: 640px) {
  .grille-marques { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .grille-marques .tuile-vedette { grid-column: span 2; aspect-ratio: 16 / 9; }
  .grille-marques .nom-tuile { font-size: .95rem; letter-spacing: .08em; }
  .grille-marques .tuile-vedette .nom-tuile { font-size: 1.3rem; }
  .grille-marques .compte-tuile { font-size: .64rem; }
}

/* ---------- Un diptyque pour une maison (client, 06.10) ----------
   Wrangler habille l'homme et la femme, et sa tuile est large : elle porte
   les deux campagnes côte à côte plutôt qu'une seule. Elles se touchent :
   le filet de séparation essayé d'abord tirait un trait noir au milieu de
   la vignette (client, 06.10). */
.duo-photos { position: absolute; inset: 0; display: flex; }
.duo-photos img {
  flex: 1 1 0; min-width: 0; width: 50%; height: 100%;
  object-fit: cover; object-position: center 25%;
}

/* ---------- La barre des rayons continue (client, 07.10) ----------
   Sur téléphone elle déborde largement : un dégradé et un chevron au bord
   disent qu'il y a une suite, et s'éteignent quand on est arrivé au bout.
   menu.js pose les classes au fil du défilement. */
.sous-nav::before,
.sous-nav::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 3.2rem;
  pointer-events: none; opacity: 0; transition: opacity .2s; z-index: 2;
}
.sous-nav::after {
  content: '›'; right: 0;
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: .7rem; color: var(--or); font-size: 1.4rem; line-height: 1;
  background: linear-gradient(to left, var(--marine) 45%, rgba(13, 27, 42, 0));
}
.sous-nav::before {
  left: 0;
  background: linear-gradient(to right, var(--marine) 45%, rgba(13, 27, 42, 0));
}
.sous-nav.suite-a-droite::after { opacity: 1; }
.sous-nav.suite-a-gauche::before { opacity: 1; }

/* Le battement de l'étiquette « Ma taille » sur téléphone (client, 09.10). */
@keyframes battement-taille {
  0%, 36%, 100% { transform: scale(1); }
  8%  { transform: scale(1.22); }
  18% { transform: scale(1); }
  26% { transform: scale(1.14); }
}

/* ------------------------------------------------------------------
   Conditions générales : la page de texte légal, et la case à cocher
   que Worldline exige sur la commande (pré-vérification Saferpay,
   21.10) — case jamais pré-cochée, acceptation active du porteur.
   ------------------------------------------------------------------ */

.texte-legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 1rem 2rem 4rem;
  color: var(--texte);
}
.texte-legal .legal-date {
  font-size: .8rem;
  color: var(--doux);
  margin: 0 0 2.2rem;
}
.texte-legal h3 {
  font-size: .95rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--marine);
  margin: 2.2rem 0 .7rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--bord);
}
.texte-legal h3:first-of-type { margin-top: 0; }
.texte-legal p { font-size: .9rem; line-height: 1.7; margin: 0 0 .9rem; }
/* Restreint aux liens du texte : sans le « p », cette regle passait devant
   .bouton-or et le bouton se retrouvait en dore sur dore (Fabio, 23.10). */
.texte-legal p a { color: var(--or); }
.texte-legal .services-contact { margin-top: 3rem; }

/* La case d'acceptation, sur la page de commande. */
.accepter-cgv {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  padding: 1rem 1.1rem;
  border: 1px solid var(--bord);
  border-radius: 10px;
  background: var(--gris);
  font-size: .86rem;
  line-height: 1.6;
  cursor: pointer;
}
.accepter-cgv input {
  margin-top: .15rem;
  flex: none;
  width: 18px;
  height: 18px;
  accent-color: var(--or);
}
.accepter-cgv:has(input:checked) { border-color: var(--or); background: var(--blanc); }
.accepter-cgv a { color: var(--or); font-weight: 600; }
/* Signalée en rouge seulement après une tentative d'envoi. */
.accepter-cgv.manque { border-color: #B3261E; background: #FDF0EF; }

/* Posée contre les champs d'adresse, pas détachée comme une note de bas de
   bloc : c'est une précision sur ce qu'on vient de saisir (Fabio, 23.10). */
.mention-pays { margin-top: .4rem; }