/* ------------------------------------------------------------------
   composants.css — en-tête, boutons, cartes, badges, lightbox, pied.
   Aucune valeur littérale : tout vient de tokens.css.
   ------------------------------------------------------------------ */

/* ================= EN-TÊTE ================= */

.entete {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--fond) 82%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bordure);
}
.entete__interieur {
  max-width: var(--conteneur); margin-inline: auto;
  padding: var(--e-12) var(--gouttiere);
  display: flex; align-items: center; gap: var(--e-18); flex-wrap: wrap;
}

.logo { display: flex; flex-direction: column; text-decoration: none; line-height: 1; }
.logo__nom {
  font-family: var(--police-titre); font-weight: var(--g-gras);
  font-size: var(--t-logo); letter-spacing: var(--ls-section);
  color: var(--marque); text-transform: lowercase;
}
.logo__nom--pied { font-size: var(--t-titre3); }
.logo__signature {
  font-weight: var(--g-extra); font-size: var(--t-surtitre);
  letter-spacing: var(--ls-surtitre); text-transform: uppercase;
  color: var(--marque); opacity: .72; margin-top: var(--e-4);
}

.nav { margin-left: auto; display: flex; align-items: center; gap: var(--e-6); flex-wrap: wrap; }
.nav__liste { display: flex; gap: var(--e-4); flex-wrap: wrap; }
.nav__lien {
  display: block; position: relative;
  padding: var(--e-8) var(--e-12);
  border-radius: var(--rad-sm);
  font-weight: var(--g-gras); font-size: var(--t-corps-sm);
  text-decoration: none;
  transition: background var(--transition);
}
.nav__lien:hover { background: var(--doux-ambre-fond); }
.nav__lien.est-actif::after {
  content: ''; position: absolute; left: var(--e-12); right: var(--e-12); bottom: 2px;
  height: 3px; border-radius: 3px; background: var(--grad-accent);
}
.nav__social { margin-left: var(--e-6); }
@media (max-width: 560px) { .nav__social { display: none; } }

/* ================= BOUTONS ================= */

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-8);
  padding: var(--e-14) var(--e-24);
  border: 2px solid transparent; border-radius: var(--rad-pill);
  font-weight: var(--g-extra); font-size: var(--t-corps-sm);
  text-decoration: none; cursor: pointer;
  transition: transform var(--transition), background var(--transition), color var(--transition);
  /* Cible tactile confortable : le trafic est majoritairement mobile (§1). */
  min-height: 44px;
}
.bouton:hover { transform: translateY(-2px); }
.bouton--sombre  { background: var(--texte); color: var(--fond); }
.bouton--clair   { background: var(--fond-carte); color: var(--texte); }
.bouton--contour { background: transparent; color: var(--texte); border-color: var(--texte); }
.bouton--contour:hover { background: var(--texte); color: var(--fond); }
.bouton--marque  { background: var(--grad-marque); color: #FFFFFF; box-shadow: var(--ombre-marque); }

.rangee-boutons { display: flex; gap: var(--e-12); flex-wrap: wrap; margin-top: var(--e-26); }

/* ================= CARTOUCHES, PASTILLES, BADGES ================= */

.cartouche {
  display: inline-flex; align-items: center; gap: var(--e-8);
  padding: var(--e-6) var(--e-14); border-radius: var(--rad-pill);
  font-weight: var(--g-extra); font-size: var(--t-eyebrow);
  background: var(--doux-ambre-fond); border: 1px solid var(--doux-ambre-bordure);
  color: var(--doux-ambre-texte);
}
.cartouche[data-teinte="bleu"]   { background: var(--doux-bleu-fond);   border-color: var(--doux-bleu-bordure);   color: var(--doux-bleu-texte); }
.cartouche[data-teinte="vert"]   { background: var(--doux-vert-fond);   border-color: var(--doux-vert-bordure);   color: var(--doux-vert-texte); }
.cartouche[data-teinte="violet"] { background: var(--doux-violet-fond); border-color: var(--doux-violet-bordure); color: var(--doux-violet-texte); }

.pastille { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: currentColor; }
.pastille--vert  { background: var(--vert); }
.pastille--rose  { background: var(--rose); }
.pastille--bleu  { background: var(--bleu); }
.pastille--rouge { background: var(--marque); }

/* Le couple fond/texte vient de [data-couleur] dans tokens.css : impossible
   de produire un badge illisible depuis l'interface d'édition. */
.badge {
  background: var(--c-fond); color: var(--c-texte);
  font-weight: var(--g-extra); font-size: var(--t-eyebrow);
  padding: var(--e-6) var(--e-12); border-radius: var(--rad-pill);
  white-space: nowrap;
}

/* ================= HERO ================= */

.hero { display: flex; flex-wrap: wrap; gap: var(--grille-gap-lg); align-items: center; padding-block: var(--section-y-lg) var(--e-20); }
.hero__texte  { flex: 1 1 440px; min-width: min(100%, 300px); max-width: 640px; }
/* Marge intérieure : les vignettes flottantes débordent de -6 % et seraient
   rognées par overflow-x: hidden sur un écran étroit. */
.hero__visuel { flex: 1 1 420px; min-width: min(100%, 280px); position: relative;
                display: flex; justify-content: center; padding: var(--e-40); }
.hero__intro  { font-size: var(--t-corps-lg); color: var(--texte-doux); max-width: 34em; margin-top: var(--e-20); }
.hero__halo {
  position: absolute; inset: 6%; border-radius: var(--rad-xl);
  background: var(--grad-halo); transform: rotate(-4deg);
}
/* Chaque emplacement d'image reprend la contrainte de la maquette. Un ratio
   seul ne suffit pas : sans max-width, un cadre 1/1 dans un conteneur flex qui
   grandit devient un carré de 700 px de côté. La maquette borne partout —
   min(560px, 100%) pour le hero, min(330px, 100%) pour le portrait, etc. */

/* -- Collage du hero : une grande photo et deux vignettes flottantes -- */
.hero__collage {
  position: relative;
  width: min(560px, 100%);
  aspect-ratio: 1 / 1;
}
.hero__cadre {
  position: absolute; inset: 0;
  border-radius: var(--rad-xl); box-shadow: var(--ombre-xl);
}
.hero__flottante {
  position: absolute; aspect-ratio: 1 / 1;
  border: 5px solid var(--fond-carte);
  border-radius: var(--rad-media); box-shadow: var(--ombre-lg);
  animation: flottement var(--duree-flottement) ease-in-out infinite;
}
.hero__flottante--bas  { width: 44%; right: -6%; bottom: -6%; }
.hero__flottante--haut { width: 38%; left: -7%; top: -4%;
                         animation-duration: var(--duree-flottement-lent); }
@keyframes flottement {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

/* -- Images à ratio naturel : la maquette ne les recadre pas, elle les borne.
      La carte de visite fait 558×980 : lui imposer 3/4 la rognerait. -- */
.media-borne { width: 100%; margin-inline: auto; }
.media-borne > picture > img,
.media-borne > img {
  display: block; width: 100%; height: auto;
  border-radius: var(--rad-xl); box-shadow: var(--ombre-xl);
}
.media-borne--portrait { max-width: 330px; }
.media-borne--carte    { max-width: 360px; }

/* -- Portrait metal : 4/5 recadré, borné à 300 px -- */
.portrait__cadre {
  position: relative; width: 100%; max-width: 300px;
  aspect-ratio: 4 / 5;
  border-radius: var(--rad-xl); box-shadow: var(--ombre-xl);
}

/* ================= MARQUEE ================= */

.marquee { overflow: hidden; padding-block: var(--e-26) var(--e-8); }
.marquee__piste { display: flex; gap: var(--e-16); width: max-content; animation: defilement var(--duree-marquee) linear infinite; }
.marquee__vignette {
  width: 210px; height: 158px; flex: 0 0 auto;
  border-radius: var(--rad-media); overflow: hidden; box-shadow: var(--ombre-sm);
}

@keyframes defilement { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Mouvement réduit : la bande devient scrollable à la main plutôt que figée. */
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; }
  .marquee__piste { animation: none; }
}

/* ================= CARTES ================= */

.carte-creation {
  position: relative; background: var(--fond-carte);
  border-radius: var(--rad-media); overflow: hidden;
  box-shadow: var(--ombre-sm); transition: transform var(--transition), box-shadow var(--transition);
}
.carte-creation:hover { transform: translateY(-4px); box-shadow: var(--ombre-lg); }
.carte-creation__lien { text-decoration: none; display: block; }
/* Le cadre impose le ratio, l'image le remplit et déborde proprement. */
.carte-creation__media { aspect-ratio: 1 / 1; background: var(--fond-media); }
/* La maquette présente illustrations et dessins en 3/4, pas en carré. */
.carte-creation--portrait .carte-creation__media,
.carte-creation--overlay .carte-creation__media { aspect-ratio: 3 / 4; }

/* ---- Mosaïque : la disposition de la galerie ----
   La maquette n'utilise pas de grille ici mais des COLONNES CSS, et laisse
   chaque image à sa hauteur naturelle. Les tailles varient donc d'une carte à
   l'autre — c'est exactement ce qui donne son rythme à la page. */
.mosaique {
  columns: 280px;
  column-gap: var(--grille-gap);
}
.mosaique > * {
  break-inside: avoid;          /* une carte n'est jamais coupée en deux colonnes */
  -webkit-column-break-inside: avoid;
  width: 100%;
  margin-bottom: var(--e-16);
}
.carte-creation--mosaique .carte-creation__media { aspect-ratio: auto; }
.carte-creation--mosaique .carte-creation__media picture,
.carte-creation--mosaique .carte-creation__media img {
  display: block; width: 100%; height: auto; object-fit: fill;
}

/* Titre posé sur l'image, sur un dégradé sombre. Le dégradé remonte assez haut
   pour que le texte reste lisible même sur une photo claire, et l'ombre portée
   rattrape les cas extrêmes — un aplat de couleur ne suffit pas ici, le fond
   étant une photographie quelconque. */
.carte-creation__surtitre {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: var(--e-22) var(--e-14) var(--e-12);
  color: #FFFFFF; text-align: left;
  font-weight: var(--g-extra); font-size: var(--t-corps-sm);
  background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, .45) 55%, transparent);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
  pointer-events: none;
}
.carte-creation__pied { padding: var(--e-12) var(--e-14); display: flex; justify-content: space-between; gap: var(--e-8); align-items: baseline; }
.carte-creation__titre { font-family: var(--police-corps); font-weight: var(--g-extra); font-size: var(--t-corps-sm); }
.carte-creation__prix { font-family: var(--police-titre); font-weight: var(--g-gras); font-size: var(--t-corps-sm); color: var(--texte-doux); }
.carte-creation .badge { position: absolute; top: var(--e-10); left: var(--e-10); }
.media-absent { display: block; width: 100%; height: 100%; background: var(--fond-media); }

.carte-univers, .carte-tarif, .carte-format, .panneau {
  background: var(--fond-carte); border: 1px solid var(--bordure);
  border-radius: var(--rad-lg); padding: var(--e-22) var(--e-24) var(--e-26);
  box-shadow: var(--ombre);
}
.carte-univers { text-decoration: none; display: flex; flex-direction: column; gap: var(--e-10); transition: transform var(--transition), box-shadow var(--transition); }
.carte-univers:hover { transform: translateY(-5px); box-shadow: var(--ombre-lg); }
.carte-univers__titre { font-weight: var(--g-demi); font-size: var(--t-titre3); }
.carte-univers__texte { color: var(--texte-doux); font-size: var(--t-corps-sm); }
.carte-univers__cta { margin-top: auto; font-weight: var(--g-extra); font-size: var(--t-corps-sm); color: var(--c-accent); }

.carte-tarif__entete, .carte-format__entete { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-10); }
.carte-tarif__titre { font-weight: var(--g-demi); font-size: var(--t-titre3); }
.carte-tarif__prix, .carte-format__prix { font-family: var(--police-titre); font-weight: var(--g-gras); font-size: var(--t-titre3); color: var(--c-accent); }
.carte-tarif__texte, .carte-format__texte { color: var(--texte-doux); font-size: var(--t-corps-sm); margin-top: var(--e-10); }
.carte-format__nom { font-family: var(--police-titre); font-weight: var(--g-gras); font-size: var(--t-titre3); }

.liste-tarifs { display: flex; flex-direction: column; gap: var(--e-10); margin-top: var(--e-18); }
.ligne-tarif {
  display: flex; align-items: center; gap: var(--e-14);
  background: var(--fond); border: 1px solid var(--bordure);
  border-radius: var(--rad-sm); padding: var(--e-12) var(--e-16);
}
.ligne-tarif__prix { font-family: var(--police-titre); font-weight: var(--g-gras); font-size: var(--t-titre3); color: var(--c-accent); min-width: 4.5ch; }
.ligne-tarif__libelle { font-weight: var(--g-extra); font-size: var(--t-corps-sm); color: var(--texte-doux); }

/* ================= BLOCS SOMBRES ================= */

.bloc-nuit, .bloc-metal {
  border-radius: var(--rad-xl); padding: var(--e-40) var(--e-34);
  color: #FFFFFF; background: var(--grad-nuit);
}
.bloc-metal { background: var(--grad-metal); flex: 1 1 380px; }
.bloc-nuit__texte { color: var(--texte-sur-nuit); margin-block: var(--e-12) var(--e-22); max-width: 46em; }

.duo { display: flex; flex-wrap: wrap; gap: var(--grille-gap-lg); align-items: center; }
.duo__texte  { flex: 1 1 360px; min-width: min(100%, 300px); }
.duo__visuel { flex: 1 1 300px; min-width: min(100%, 260px); position: relative; display: flex; justify-content: center; }
.duo__visuel--etroit { flex: 0 1 300px; }

/* ================= ÉTAPES ================= */

.etapes { display: grid; gap: var(--e-16); grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.etape {
  background: var(--fond-carte); border: 1px solid var(--bordure);
  border-radius: var(--rad); padding: var(--e-22) var(--e-20) var(--e-24);
  box-shadow: var(--ombre-sm);
}
.etape__numero {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--rad-sm);
  background: var(--c-fond); color: var(--c-texte);
  font-family: var(--police-titre); font-weight: var(--g-gras); font-size: var(--t-titre4);
}
.etape__titre { font-weight: var(--g-demi); font-size: var(--t-titre4); margin-top: var(--e-14); }
.etape__texte { color: var(--texte-doux); font-size: var(--t-corps-sm); margin-top: var(--e-8); }

/* ================= FILTRES ================= */

.filtres { display: flex; gap: var(--e-10); flex-wrap: wrap; margin-bottom: var(--e-24); }
.filtre {
  background: var(--fond-carte); color: var(--texte);
  border: 2px solid var(--bordure-forte); border-radius: var(--rad-pill);
  padding: var(--e-10) var(--e-18); font-weight: var(--g-extra); font-size: var(--t-corps-sm);
  cursor: pointer; min-height: 44px;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.filtre.est-actif { background: var(--texte); color: var(--fond); border-color: var(--texte); }
.galerie__vide { color: var(--texte-doux); }

/* ================= LIGHTBOX ================= */

.lightbox {
  border: none; padding: 0; margin: 0;
  width: 100%; height: 100%; max-width: 100vw; max-height: 100svh;
  background: transparent; color: #FFFFFF;
  overflow: hidden;
}
.lightbox::backdrop { background: rgba(17, 13, 10, .88); backdrop-filter: blur(6px); }

.lightbox__figure {
  margin: 0; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--e-16);
  padding: var(--e-56) var(--e-16) var(--e-24);
  /* Le balayage horizontal est géré en JS : on désactive le geste natif pour
     qu'il ne fasse pas défiler la page pendant le glissement. */
  touch-action: pan-y;
}

.lightbox__scene {
  display: flex; align-items: center; justify-content: center;
  min-height: 0; flex: 1; width: 100%;
}
/* L'image se voit ENTIÈRE : contain et bornage à la hauteur de fenêtre.
   Les cartes, elles, recadrent en cover — c'est voulu, et c'est l'inverse ici. */
.lightbox__image {
  width: auto; height: auto;
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  border-radius: var(--rad-media);
  box-shadow: var(--ombre-lightbox);
}

.lightbox__legende {
  display: flex; align-items: center; justify-content: center;
  gap: var(--e-12); flex-wrap: wrap; text-align: center;
  flex: 0 0 auto;
}
.lightbox__titre {
  font-family: var(--police-titre); font-weight: var(--g-demi);
  font-size: var(--t-titre3);
}
.lightbox__compteur {
  font-size: var(--t-meta); font-weight: var(--g-extra);
  color: var(--texte-sur-nuit);
}

/* Bande de vignettes : n'apparaît que pour une création à plusieurs photos. */
.lightbox__photos {
  display: flex; gap: var(--e-8); justify-content: center; flex-wrap: wrap;
  flex: 0 0 auto;
}
.lightbox__photo {
  width: 56px; height: 56px; padding: 0; cursor: pointer;
  border: 2px solid transparent; border-radius: var(--rad-sm);
  overflow: hidden; background: none; opacity: .55;
  transition: opacity var(--transition), border-color var(--transition);
}
.lightbox__photo img { width: 100%; height: 100%; object-fit: cover; }
.lightbox__photo:hover { opacity: .85; }
.lightbox__photo.est-active { opacity: 1; border-color: #FFFFFF; }

.lightbox__fermer, .lightbox__nav {
  position: fixed; z-index: 2;
  width: 48px; height: 48px; border: none; border-radius: 50%;
  background: rgba(255, 255, 255, .18); color: #FFFFFF;
  font-size: var(--t-titre3); line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition);
}
.lightbox__fermer:hover, .lightbox__nav:hover { background: rgba(255, 255, 255, .34); }
.lightbox__fermer { top: var(--e-16); right: var(--e-16); }
.lightbox__nav { top: 50%; transform: translateY(-50%); font-size: 30px; }
.lightbox__nav--prec { left: var(--e-12); }
.lightbox__nav--suiv { right: var(--e-12); }

/* Sur écran étroit, les flèches passent en bas : au milieu elles couvriraient
   l'image. Le balayage reste le geste principal, mais les boutons demeurent —
   les retirer priverait de navigation qui ne peut pas balayer. */
@media (max-width: 700px) {
  .lightbox__figure { padding: var(--e-56) var(--e-12) var(--e-56); }
  .lightbox__nav { top: auto; bottom: var(--e-12); transform: none; width: 44px; height: 44px; }
  .lightbox__nav--prec { left: var(--e-20); }
  .lightbox__nav--suiv { right: var(--e-20); }
}

/* ================= CONTACT ================= */

.liste-contacts { display: grid; gap: var(--e-12); margin-block: var(--e-26); }
.contact {
  display: flex; align-items: center; gap: var(--e-14);
  background: var(--fond-carte); border: 1px solid var(--bordure);
  border-radius: var(--rad-media); padding: var(--e-14) var(--e-18);
  text-decoration: none; min-height: 44px;
  transition: border-color var(--transition);
}
.contact:hover { border-color: var(--c-fond); }
.contact__icone {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--rad-sm); flex: 0 0 auto;
  background: var(--c-fond); color: var(--c-texte);
  font-weight: var(--g-extra); font-size: var(--t-corps-sm);
}
.contact__texte { display: flex; flex-direction: column; min-width: 0; }
.contact__label { font-weight: var(--g-extra); font-size: var(--t-corps-sm); }
.contact__note { font-size: var(--t-meta); color: var(--texte-meta); }

/* ================= PIED ================= */

.pied { border-top: 1px solid var(--bordure); margin-top: var(--e-56); background: var(--fond-doux); }
.pied__interieur {
  max-width: var(--conteneur); margin-inline: auto;
  padding: var(--e-30) var(--gouttiere);
  display: flex; flex-wrap: wrap; gap: var(--e-18); align-items: center; justify-content: space-between;
}
.pied__baseline { color: var(--texte-meta); font-size: var(--t-meta); margin-top: var(--e-4); }
.pied__liens { display: flex; gap: var(--e-20); flex-wrap: wrap; font-size: var(--t-corps-sm); }
.pied__liens a { color: var(--texte-doux); text-decoration: none; font-weight: var(--g-gras); }
.pied__liens a:hover { color: var(--texte); text-decoration: underline; }

/* ---- Carte vêtement : deux faces côte à côte, comme dans la maquette ---- */

.carte-vetement {
  position: relative;
  background: var(--fond-carte); border: 1px solid var(--bordure);
  border-radius: var(--rad-lg); overflow: hidden; box-shadow: var(--ombre);
  display: flex; flex-direction: column;
}
.carte-vetement__faces {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  background: var(--bordure);
}
.carte-vetement__face { aspect-ratio: 3 / 4; background: var(--fond-media); display: block; }
.carte-vetement__pied {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e-12); padding: var(--e-20) var(--e-22) var(--e-24); flex: 1;
}
.carte-vetement .badge { position: absolute; top: var(--e-10); left: var(--e-10); }

/* ---- Reels Instagram : trois vignettes verticales, comme la maquette ---- */

.reels { display: flex; gap: var(--e-14); justify-content: center; flex-wrap: wrap; }
.reel {
  position: relative; width: 128px; aspect-ratio: 9 / 16;
  border-radius: var(--rad-media); overflow: hidden;
  box-shadow: var(--ombre-lg); flex: 0 0 auto;
  transition: transform var(--transition);
}
.reel:hover { transform: translateY(-5px); }
.reel__lecture {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .15);
}
.reel__lecture::after {
  content: ''; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  /* Triangle de lecture centré dans la pastille. */
  display: flex; align-items: center; justify-content: center;
}
.reel__lecture::before {
  content: ''; position: absolute; z-index: 1;
  width: 0; height: 0; margin-left: 3px;
  border-left: 13px solid var(--texte);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}
.bloc-nuit__duo { display: flex; gap: var(--e-34); align-items: center; flex-wrap: wrap; }
.bloc-nuit__texte-zone { flex: 1 1 320px; min-width: min(100%, 280px); }
.bloc-nuit__reels { flex: 1 1 300px; min-width: min(100%, 260px); }

/* ---- Croquis des faces, page Vêtements ---- */
.croquis { flex: 0 1 300px; min-width: min(100%, 210px); text-align: center; }
.croquis img { max-width: 280px; margin-inline: auto; height: auto; }
.panneau__duo { display: flex; gap: var(--e-26); flex-wrap: wrap; align-items: center; }
.panneau__duo > div:first-child { flex: 1 1 320px; min-width: min(100%, 270px); }

/* ---- Visuels des cartes « Trois univers » et « formats » ---- */

/* La carte univers présente son visuel entier sur un fond teinté, sans le
   recadrer : c'est le parti de la maquette. D'où `contain` et non `cover`,
   et une marge intérieure qui laisse respirer l'image. */
.carte-univers { padding: 0; overflow: hidden; }
.carte-univers__media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--c-doux);
}
.carte-univers__media picture,
.carte-univers__media img {
  position: absolute; inset: var(--e-18);
  width: calc(100% - var(--e-18) * 2);
  height: calc(100% - var(--e-18) * 2);
  object-fit: contain;
  border-radius: var(--rad-sm);
}
.carte-univers__prix { position: absolute; top: var(--e-14); right: var(--e-14); }
.carte-univers__corps {
  padding: var(--e-22) var(--e-24) var(--e-26);
  display: flex; flex-direction: column; gap: var(--e-10); flex: 1;
}

/* Les cartes de format montrent un bandeau photo recadré. */
.carte-tarif--illustree { padding: 0; overflow: hidden; }
.carte-tarif--illustree .carte-tarif__entete,
.carte-tarif--illustree .carte-tarif__texte { padding-inline: var(--e-22); }
.carte-tarif--illustree .carte-tarif__entete { padding-top: var(--e-18); }
.carte-tarif--illustree .carte-tarif__texte  { padding-bottom: var(--e-22); }
/* Un RATIO plutôt qu'une hauteur fixe : une hauteur de 190 px dans une carte
   de 425 px produit un bandeau de ratio 2,24, alors que deux des trois photos
   sont quasi carrées (0,98 et 1,03). object-fit: cover en rognait donc plus de
   la moitié de la hauteur — le travail n'était plus lisible. Un ratio suit la
   largeur de la carte et rogne beaucoup moins, aux deux tailles d'écran. */
.carte-tarif__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--fond-media);
}
/* La page Chaussures est celle des tarifs : la photo y a un peu plus de place,
   comme dans la maquette qui lui donnait déjà 210 px contre 190. */
.carte-tarif__media--haute { aspect-ratio: 5 / 4; }
.carte-tarif__prix { position: absolute; top: var(--e-12); right: var(--e-12); }

/* ---- Vignettes épinglées sur une image ----
   La maquette en pose deux, au même dessin mais ancrées différemment :
   « coucou, c'est moi » en bas à gauche du portrait, « 100 % fait main » en
   haut à droite de la carte de visite. Une seule règle, deux modificateurs. */

.media-vignette { position: relative; display: inline-block; width: 100%; }
.media-vignette--portrait { max-width: 330px; }
.media-vignette--carte    { max-width: 360px; }

.vignette-collee {
  position: absolute; z-index: 2;
  background: var(--jaune); color: var(--sur-jaune);
  font-family: var(--police-titre); font-weight: var(--g-gras);
  font-size: var(--t-corps-sm);
  padding: var(--e-10) var(--e-16); border-radius: var(--rad-sm);
  box-shadow: var(--ombre);
  animation: oscillation var(--duree-oscillation) ease-in-out infinite;
}
.vignette-collee--bas-gauche  { bottom: -16px; left: -14px;  transform: rotate(-7deg); }
.vignette-collee--haut-droite { top: -18px;    right: -10px; transform: rotate(-6deg); }
@keyframes oscillation {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}

/* ================= BANDE DU HAUT ================= */

/* Le bandeau ne disparaît jamais : il RÉDUIT. Au défilement il ne garde que le
   logo à gauche et le bouton Menu à droite ; revenu au sommet, il retrouve sa
   hauteur et son contenu. C'est le même élément qui change de taille, il n'y a
   rien qui s'en aille ni rien qui le remplace. */

.nav__bascule {
  display: none;
  align-items: center; gap: var(--e-10);
  min-height: 44px; padding: var(--e-8) var(--e-16);
  border: 2px solid var(--bordure-forte); border-radius: var(--rad-pill);
  background: var(--fond-carte); color: var(--texte);
  font-weight: var(--g-extra); font-size: var(--t-corps-sm);
  cursor: pointer; margin-left: auto;
}
.nav__bascule-traits {
  width: 16px; height: 2px; background: currentColor;
  box-shadow: 0 -5px currentColor, 0 5px currentColor;
}

@media (max-width: 760px) {
  /* Au repos, la navigation occupe une ligne sous le logo : six entrées ne
     tiennent pas à côté de lui. */
  .entete__interieur { flex-wrap: wrap; gap: var(--e-10); }
  .nav { width: 100%; margin-left: 0; order: 3; }
  .nav__liste { width: 100%; }

  /* Tout ce qui change de taille est transitionné, et par les jetons de durée
     du site — donc immédiat sous prefers-reduced-motion. */
  .entete__interieur { transition: padding var(--transition); }
  .logo__nom { transition: font-size var(--transition); }
  .nav {
    overflow: hidden; max-height: 60svh;
    transition: max-height var(--transition), opacity var(--transition),
                visibility var(--transition), margin var(--transition);
  }

  /* --- Bandeau réduit --- */
  .entete.est-reduite .entete__interieur { padding-block: var(--e-6); }
  .entete.est-reduite .logo__nom { font-size: var(--t-titre3); }
  .entete.est-reduite .logo__signature { display: none; }
  .entete.est-reduite .nav__bascule { display: inline-flex; }

  /* La navigation se replie. `visibility: hidden` et pas seulement une hauteur
     nulle : sans elle, six liens invisibles resteraient atteignables au clavier. */
  .entete.est-reduite:not(.est-ouverte) .nav {
    max-height: 0; opacity: 0; visibility: hidden; margin: 0;
  }
}

/* ================= APPEL À L'ACTION FLOTTANT ================= */

.cta-bulle {
  position: fixed; z-index: 60;
  right: var(--gouttiere);
  bottom: calc(var(--e-20) + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center;
  min-height: 56px;
  border-radius: var(--rad-pill);
  background: var(--grad-marque);
  /* Texte FONCÉ et non blanc : sur l'extrémité rose du dégradé, le blanc
     plafonne à 3,14:1. Le foncé tient de 4,57:1 à 5,89:1 sur toute sa
     longueur — le dégradé demandé est conservé, la lisibilité aussi. */
  color: var(--texte);
  box-shadow: var(--ombre-marque);
  text-decoration: none; overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.cta-bulle:hover { transform: translateY(-2px); box-shadow: var(--ombre-xl); }

.cta-bulle__icone {
  flex: 0 0 auto; width: 56px; height: 56px;
  display: grid; place-items: center;
}
.cta-bulle__icone svg { width: 24px; height: 24px; }

/* Replié au repos. `max-width` et non `display:none` : le libellé reste dans
   le document, donc dans le nom accessible du lien. */
.cta-bulle__texte {
  max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap;
  font-weight: var(--g-extra); font-size: var(--t-corps-sm);
  transition: max-width var(--transition), opacity var(--transition),
              padding-right var(--transition);
}

/* L'élargissement au survol n'a de sens que là où le survol existe : sur un
   écran tactile, `:hover` reste collé après le toucher. */
@media (hover: hover) {
  .cta-bulle:hover .cta-bulle__texte { max-width: 24ch; opacity: 1; padding-right: var(--e-22); }
}
/* Au clavier, l'élargissement doit se produire partout, survol ou non. */
.cta-bulle:focus-visible .cta-bulle__texte { max-width: 24ch; opacity: 1; padding-right: var(--e-22); }

/* Sur mobile, la bulle reste compacte : elle n'occupe que 56 px dans un coin
   au lieu de barrer la largeur. Le pied de page lui réserve tout de même sa
   place, sinon elle recouvrirait les derniers liens. */
@media (max-width: 760px) {
  .pied--avec-cta .pied__interieur {
    padding-bottom: calc(56px + var(--e-30) + env(safe-area-inset-bottom, 0px));
  }
}

/* ---- Bascule de langue ---- */

.bascule-langue {
  display: inline-flex; align-items: center; gap: 2px;
  min-height: 44px; padding: var(--e-6) var(--e-12);
  border: 2px solid var(--bordure-forte); border-radius: var(--rad-pill);
  font-weight: var(--g-extra); font-size: var(--t-meta);
  text-decoration: none; color: var(--texte);
  transition: border-color var(--transition), background var(--transition);
}
.bascule-langue:hover { background: var(--fond-carte); border-color: var(--texte); }
.bascule-langue__actif { color: var(--texte); }
.bascule-langue__autre { color: var(--texte-meta); }
.bascule-langue__actif::after { content: '·'; margin-inline: 3px; color: var(--texte-meta); }