/* =====================================================================
   BISOUS DE MAMAN — feuille de style
   Héros à forme liquide, bande d'atouts lilas, cartes produits larges,
   bande « chaque jour », catégories, citation, avis, galerie, pied.
   ===================================================================== */

/* ------------------------------ 1. JETONS ------------------------------ */
:root {
  --creme:        #F6EDDF;   /* fond de page */
  --carte:        #FDF7EC;   /* même teinte, à peine plus claire */
  --creme-fonce:  #EFE2CE;
  --terracotta:   #BC5B34;
  --orange:       #C0562C;
  --lilas:        #C6B6DB;
  --lilas-fonce:  #9D82C4;
  --jaune:        #E9B44C;
  --olive:        #3B3A1E;
  --texte:        #5A5440;

  --f-titre: "Fraunces", "Iowan Old Style", Georgia, serif;
  --f-texte: "Poppins", "Segoe UI", system-ui, sans-serif;

  --large: 1560px;                        /* la page respire large, comme la ref */
  --marge: clamp(1.25rem, 4.4vw, 4.5rem);
  --transition: 240ms cubic-bezier(.2, .7, .3, 1);

  /* Le cœur en perles, en masque réutilisable */
  --coeur-perle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M60,100 C24,74 12,56 12,42 C12,28 24,20 34,20 C46,20 56,28 60,38 C64,28 74,20 86,20 C96,20 108,28 108,42 C108,56 96,74 60,100' fill='none' stroke='%23000' stroke-width='13' stroke-linecap='round' stroke-dasharray='0.1 15'/%3E%3C/svg%3E");
}

/* ------------------------------ 2. BASE ------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--texte);
  font-family: var(--f-texte);
  font-size: clamp(.95rem, .88rem + .28vw, 1.12rem);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3 {
  font-family: var(--f-titre);
  color: var(--olive);
  font-weight: 660;
  line-height: 1.03;
  letter-spacing: -.012em;
  margin: 0;
  font-variation-settings: "SOFT" 100, "WONK" 0;
}

h1 { font-size: clamp(2.9rem, 1.6rem + 4.4vw, 5.4rem); }
h2 { font-size: clamp(2rem, 1.2rem + 2.8vw, 3.7rem); }
p  { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
a  { color: inherit; text-decoration: none; }

:focus-visible { outline: 2.5px solid var(--orange); outline-offset: 3px; border-radius: 4px; }

.visuellement-cache {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.lien-evitement {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--olive); color: var(--creme);
  padding: .7em 1.2em; border-radius: 999px;
  transition: top 180ms ease;
}
.lien-evitement:focus { top: 12px; }

.conteneur { max-width: var(--large); margin-inline: auto; padding-inline: var(--marge); }

/* ------------------------------ 3. PETITS ÉLÉMENTS ------------------------------ */
.sur-titre {
  font-size: .82rem; font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 1.1rem;
}
.sur-titre--clair { color: var(--creme); opacity: .95; }

.vague { width: clamp(90px, 8vw, 118px); margin: 1.3rem 0 1.5rem; overflow: visible; }
.vague--lilas  { color: var(--lilas-fonce); }
.vague--orange { color: var(--orange); }
.vague--jaune  { color: var(--jaune); }

.btn {
  display: inline-flex; align-items: center; gap: .85em;
  background: var(--orange); color: var(--creme);
  font-family: var(--f-texte); font-size: .84rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  padding: 1.15em 2.1em;
  border: 0; border-radius: 10px;
  cursor: pointer;
  transition: background-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn svg { width: 21px; transition: transform var(--transition); }
.btn:hover { background: #A9481F; transform: translateY(-2px); box-shadow: 0 14px 26px rgba(188, 91, 52, .3); }
.btn:hover svg { transform: translateX(4px); }

.lien-souligne {
  display: inline-block;
  font-size: .82rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--olive);
  padding-bottom: .4em;
  border-bottom: 1.5px solid currentColor;
  transition: color var(--transition);
}
.lien-souligne:hover { color: var(--orange); }
.lien-souligne--clair { color: var(--creme); }
.lien-souligne--clair:hover { color: var(--jaune); }

/* ------------------------------ 3bis. ANIMATIONS PASSIVES ------------------------------ */
@keyframes defile { to { transform: translateX(-50%); } }
@keyframes tourne { to { transform: rotate(360deg); } }

/* Bandeau fin qui défile, tout en haut */
.bandeau {
  /* #A34A22 plutôt que le terracotta : même famille de teinte, mais le
     texte crème atteint le contraste AA (≈ 5.1:1) */
  background: #A34A22; color: var(--creme);
  overflow: hidden; padding: .6rem 0;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  position: relative; z-index: 6;
}
.bandeau__piste { display: flex; width: max-content; animation: defile 48s linear infinite; }
.bandeau__groupe { display: flex; align-items: center; gap: 1.7rem; padding-right: 1.7rem; flex: none; }
.bandeau__groupe li { white-space: nowrap; }
.bandeau:hover .bandeau__piste { animation-play-state: paused; }

/* Grand ruban défilant, entre deux sections */
.ruban {
  background: var(--jaune); color: var(--olive);
  overflow: hidden; padding: clamp(.9rem, 1.6vw, 1.4rem) 0;
}
.ruban__piste { display: flex; width: max-content; animation: defile 38s linear infinite; }
.ruban__groupe {
  display: flex; align-items: center; gap: clamp(1.4rem, 3vw, 2.6rem);
  padding-right: clamp(1.4rem, 3vw, 2.6rem); margin: 0; flex: none;
}
.ruban__groupe span {
  font-family: var(--f-titre); font-weight: 640;
  font-size: clamp(1.4rem, .9rem + 1.9vw, 2.6rem);
  line-height: 1.1; white-space: nowrap;
  font-variation-settings: "SOFT" 100, "WONK" 0;
}
/* Un petit cœur en perles entre chaque phrase */
.ruban__groupe i {
  flex: none; width: clamp(20px, 2vw, 30px); aspect-ratio: 1;
  background: currentColor;
  -webkit-mask: var(--coeur-perle) center / contain no-repeat;
          mask: var(--coeur-perle) center / contain no-repeat;
}
.ruban:hover .ruban__piste { animation-play-state: paused; }

/* Le rang de perles du pin et l'anneau de texte du rond tournent doucement */
.badge__perles { transform-origin: 80px 80px; animation: tourne 22s linear infinite; }
.rond-texte__anneau { transform-origin: 85px 85px; animation: tourne 26s linear infinite; }

/* Révélation douce à l'arrivée dans l'écran */
.reveler { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .3, 1); }
.reveler.est-visible { opacity: 1; transform: none; }
.collection__cartes .reveler:nth-child(2),
.categories__grille .reveler:nth-child(2),
.avis__grille .reveler:nth-child(2),
.atouts .reveler:nth-child(2) { transition-delay: .08s; }
.collection__cartes .reveler:nth-child(3),
.categories__grille .reveler:nth-child(3),
.avis__grille .reveler:nth-child(3),
.atouts .reveler:nth-child(3) { transition-delay: .16s; }
.categories__grille .reveler:nth-child(4),
.atouts .reveler:nth-child(4) { transition-delay: .24s; }

/* ------------------------------ 4. EN-TÊTE ------------------------------ */
.entete { background: var(--creme); position: relative; z-index: 5; }
.entete__inner {
  max-width: var(--large); margin-inline: auto;
  padding: 1.5rem var(--marge) 1.2rem;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 1rem;
}

.entete__nav { display: flex; gap: clamp(1.1rem, 2.5vw, 2.6rem); padding-top: .5rem; }
.entete__nav a,
.entete__actions a,
.entete__panier {
  font-size: .78rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--olive);
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--f-texte);
  transition: color var(--transition);
}
.entete__nav a:hover, .entete__actions a:hover, .entete__panier:hover { color: var(--orange); }
.entete__nav a[aria-current="page"] { color: var(--orange); border-bottom: 1.5px solid currentColor; padding-bottom: .25em; }

.logo { text-align: center; display: grid; justify-items: center; line-height: .9; }
.logo__mot {
  position: relative;
  font-family: var(--f-titre); font-weight: 700;
  font-size: clamp(1.8rem, 1.05rem + 1.95vw, 3.2rem);
  text-transform: uppercase; letter-spacing: .015em;
  color: var(--olive);
  font-variation-settings: "SOFT" 100, "WONK" 0;
}
.logo__perles { position: absolute; top: -.1em; right: -1.05em; display: grid; gap: 3px; }
.logo__perles i { width: 11px; height: 11px; border-radius: 50%; background: var(--lilas-fonce); }
.logo__perles i:nth-child(2) { width: 7px; height: 7px; background: var(--terracotta); justify-self: end; }
.logo__perles i:nth-child(3) { width: 5px; height: 5px; background: var(--jaune); }
.logo__tagline {
  margin-top: .7rem;
  font-size: .7rem; font-weight: 600;
  letter-spacing: .32em; text-transform: uppercase;
  color: var(--olive);
}

.entete__actions { display: flex; justify-content: flex-end; align-items: center; gap: clamp(1.1rem, 2.5vw, 2.2rem); padding-top: .5rem; }
.entete__panier { display: inline-flex; align-items: center; gap: .55em; }
.point { width: 11px; height: 11px; border-radius: 50%; background: var(--orange); }

/* ------------------------------ 5. HÉROS ------------------------------ */
.heros {
  position: relative; z-index: 3;   /* pour que le pin passe au-dessus de la bande lilas */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.28fr);
  align-items: center;
  min-height: clamp(440px, 44vw, 720px);
}

.heros__texte {
  position: relative; z-index: 1;
  padding-block: clamp(2rem, 3vw, 3rem);
  padding-inline: max(var(--marge), calc((100vw - var(--large)) / 2 + var(--marge))) clamp(1rem, 3vw, 3rem);
}
.heros h1 { max-width: 11ch; }
.heros__para { max-width: 36ch; margin-bottom: 2.1rem; }

.heros__visuel { position: static; }

/* La forme de forme.svg masque l'image. Elle est volontairement plus
   grande que la zone visible : son flanc droit et son bas sortent du
   cadre, qui coupe au bord de l'écran et au bas du héros.
   --forme-x : où commence la forme  ·  --forme-l : sa largeur
   --forme-y : recul du sommet, pour que le dôme respire sous l'en-tête */
.heros__cadre {
  --forme-x: 39%;
  --forme-l: 65vw;
  --forme-y: clamp(2px, .5vw, 8px);
  position: absolute; inset: 0 0 0 var(--forme-x);
  overflow: hidden; z-index: 0;
}
.heros__blob {
  position: absolute; left: 0; top: var(--forme-y);
  width: var(--forme-l);
  aspect-ratio: 1239.79 / 922.42;   /* la forme garde ses proportions */
  clip-path: url(#blob-heros);
  background: var(--terracotta);
}
/* bijou hero.png (1200 × 896) épouse le ratio de la forme :
   presque aucune coupe interne, donc pas d'effet de zoom. */
.heros__blob img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

/* Le pin : penché, et posé à cheval sur la bande lilas du dessous */
.badge {
  position: absolute;
  right: clamp(1.5rem, 5vw, 6rem);
  bottom: clamp(-5.2rem, -4vw, -3.2rem);
  width: clamp(112px, 10vw, 168px);
  transform: rotate(-13deg);
  filter: drop-shadow(0 10px 22px rgba(59, 58, 30, .22));
  animation: badge-flotte 6s ease-in-out infinite;
}
.badge svg { width: 100%; overflow: visible; }
.badge__texte {
  font-family: var(--f-texte); font-size: 14.5px; font-weight: 700;
  letter-spacing: .22em; fill: #8A5A2B;
}
@keyframes badge-flotte {
  0%, 100% { transform: rotate(-13deg) translateY(0); }
  50%      { transform: rotate(-7deg) translateY(-8px); }
}

/* ------------------------------ 6. ATOUTS ------------------------------ */
.atouts { background: var(--lilas); position: relative; z-index: 2; }
.atouts ul {
  max-width: var(--large); margin-inline: auto;
  padding: clamp(1.7rem, 2.4vw, 2.5rem) var(--marge);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.atouts li {
  display: flex; align-items: center; justify-content: center; gap: 1.1rem;
  padding-inline: clamp(.8rem, 2vw, 2rem);
  border-left: 1px solid rgba(59, 58, 30, .28);
}
.atouts li:first-child { border-left: 0; }
.atouts svg { width: 36px; flex: none; color: var(--olive); }
.atouts span {
  font-size: .8rem; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase;
  line-height: 1.55; color: var(--olive);
}

/* ------------------------------ 6ter. L'ATELIER ------------------------------
   Les mains détourées dépassent du bord gauche de l'écran,
   des légendes reliées par des pointillés, le texte à droite. */
.atelier {
  padding: clamp(3.5rem, 6vw, 6rem) 0 clamp(2.5rem, 4vw, 4rem);
  padding-right: max(var(--marge), calc((100vw - var(--large)) / 2 + var(--marge)));
  display: grid;
  grid-template-columns: minmax(0, .55fr) minmax(0, .45fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
  overflow: hidden;
}

/* L'image sort de l'écran à gauche ; --debord règle de combien */
.atelier__scene {
  margin: 0;
  --debord: clamp(60px, 9vw, 170px);
  margin-left: calc(var(--debord) * -1);
}
.scene__cadre { position: relative; }
/* Le bras est coupé net dans le fichier : on fond le bas de l'image */
.scene__photo {
  width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 97%);
          mask-image: linear-gradient(to bottom, #000 70%, transparent 97%);
}
.scene__fils {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
}
.scene__fils path {
  fill: none; stroke: var(--olive); stroke-width: 2;
  stroke-linecap: round; stroke-dasharray: .5 7;
  opacity: .85;
}
.scene__fils circle { fill: var(--terracotta); }

.legende {
  position: absolute; left: var(--lx); top: var(--ly);
  width: max-content; max-width: 190px;
  margin: 0; z-index: 2;
  font-size: .74rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  line-height: 1.7; color: var(--olive);
}
.scene__legendes-mobiles { display: none; }

.atelier__texte h2 { max-width: 14ch; }
.atelier__para { max-width: 44ch; margin-bottom: 1.7rem; }

/* ------------------------------ 7. COLLECTION ------------------------------ */
.collection {
  max-width: var(--large); margin-inline: auto;
  padding: clamp(4.5rem, 8vw, 8rem) var(--marge) clamp(3rem, 5vw, 5rem);
  display: grid;
  grid-template-columns: clamp(230px, 21vw, 320px) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.collection__intro p:not(.sur-titre) { max-width: 26ch; margin-bottom: 1.9rem; }

.collection__cartes {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.7vw, 1.75rem);
}
.carte {
  position: relative;
  background: var(--carte);
  border-radius: 24px;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.carte:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(59, 58, 30, .13); }

/* Le nom est un vrai lien vers la page du bijou, étendu à toute la carte */
.carte__lien { color: inherit; }
.carte__lien::after { content: ""; position: absolute; inset: 0; cursor: pointer; }

/* L'image occupe la majeure partie de la carte, comme la ref */
.carte__image { background: var(--fond, var(--creme-fonce)); }
.carte__image img { width: 100%; aspect-ratio: 1 / 1.04; object-fit: cover; }

.carte__infos { padding: 1.15rem clamp(1rem, 1.5vw, 1.5rem) 1.25rem; }
.carte h2,
.carte h3 {
  font-family: var(--f-texte);
  font-size: .92rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--olive);
  line-height: 1.3;
}
.carte__infos > p { font-size: .95rem; margin: .18rem 0 .5rem; }
.carte__pied { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.carte__prix { font-weight: 500; color: var(--olive); font-size: 1.05rem; }
.carte__plus {
  display: grid; place-items: center; flex: none;
  position: relative; z-index: 1;   /* au-dessus du lien étendu de la carte */
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--lilas-fonce); color: #fff;
  border: 0; cursor: pointer;
  transition: background-color var(--transition), transform var(--transition);
}
.carte__plus svg { width: 14px; }
.carte__plus:hover { background: var(--olive); transform: scale(1.08); }

/* ------------------------------ 8. BANDE « CHAQUE JOUR » ------------------------------
   Une bande, pas une section entière : hauteur contenue.
   Photo en fond, panneau terracotta liquide à gauche,
   panneau lilas à droite qui chevauche la photo et sort de l'écran. */
.bande-jour {
  position: relative;
  height: clamp(430px, 36vw, 620px);
  background: var(--creme-fonce);
  overflow: hidden;
}
/* Plus la bande est haute, plus on voit de la photo : elle paraît moins zoomée */
.bande-jour__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
}

.bande-jour__panneau {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 2;
  width: clamp(330px, 40%, 620px);
  background: var(--terracotta);
  clip-path: url(#blob-panneau);
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
  padding-inline: max(var(--marge), calc((100vw - var(--large)) / 2 + var(--marge))) clamp(3.5rem, 6vw, 6rem);
  display: grid; align-content: center; justify-items: start;
}
.bande-jour__panneau h2 { color: var(--creme); max-width: 12ch; font-size: clamp(1.8rem, 1.1rem + 2.2vw, 3rem); }
.bande-jour__para { color: var(--creme); opacity: .93; max-width: 27ch; margin-bottom: 1.7rem; font-size: .98rem; }

/* Le panneau lilas : même hauteur que la bande, à cheval sur la photo,
   et il déborde volontairement hors de l'écran à droite. */
.bande-jour__social {
  position: absolute; top: 0; bottom: 0; right: 0; z-index: 2;
  width: clamp(300px, 26%, 430px);
  margin-right: clamp(-6rem, -3.5vw, -2.5rem);
  background: var(--lilas);
  border-radius: 20px 0 0 20px;
  display: grid; align-content: center; justify-items: center;
  gap: 1rem; text-align: center;
  padding: clamp(1.4rem, 2.5vw, 2.2rem) clamp(3rem, 5vw, 4.5rem) clamp(1.4rem, 2.5vw, 2.2rem) clamp(1.4rem, 2.5vw, 2.4rem);
}
.rond-texte { width: clamp(118px, 10vw, 158px); color: var(--olive); }
.rond-texte svg { width: 100%; overflow: visible; }
.rond-texte__texte {
  font-family: var(--f-texte); font-size: 12.5px; font-weight: 700;
  letter-spacing: .3em; fill: var(--olive);
}
.bande-jour__liens {
  font-size: .82rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--olive); line-height: 2; margin: 0;
}

/* ------------------------------ 9. CATÉGORIES ------------------------------ */
.categories {
  max-width: var(--large); margin-inline: auto;
  padding: clamp(3rem, 5vw, 5rem) var(--marge) clamp(2rem, 3vw, 3rem);
}
.categories__entete {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1.2rem; margin-bottom: clamp(1.8rem, 3vw, 2.6rem);
}
.categories__entete h2 { max-width: 22ch; }

.categories__grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 1.7vw, 1.75rem); }
.categorie__image {
  background: var(--fond, var(--creme-fonce));
  border-radius: 24px; overflow: hidden; margin-bottom: 1rem;
}
.categorie__image img {
  width: 100%; aspect-ratio: 1 / 1.03; object-fit: cover;
  transition: transform 600ms cubic-bezier(.2, .7, .3, 1);
}
.categories__grille a:hover .categorie__image img { transform: scale(1.05); }
.categories__grille h3 {
  font-family: var(--f-texte); font-size: .92rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--olive);
}
.categories__grille p { font-size: .92rem; margin: .2rem 0 0; }

/* ------------------------------ 10. CITATION ------------------------------ */
.citation {
  background: var(--terracotta); color: var(--creme);
  padding: clamp(2.8rem, 5vw, 4.5rem) var(--marge);
  display: grid; justify-items: center; text-align: center;
}
.citation__coeur { width: 54px; color: var(--jaune); margin-bottom: 1.4rem; }
.citation__coeur svg { width: 100%; overflow: visible; }
.citation blockquote { margin: 0; }
.citation blockquote p {
  font-family: var(--f-titre); font-weight: 640;
  font-size: clamp(1.75rem, 1.05rem + 2.6vw, 3.4rem);
  line-height: 1.1; margin: 0; max-width: 22ch; color: var(--creme);
  text-wrap: balance;
  font-variation-settings: "SOFT" 100, "WONK" 0;
}
.citation .vague { margin: 1.4rem 0 1rem; }
.citation__auteur {
  font-size: .82rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  margin: 0; opacity: .9;
}

/* ------------------------------ 11. AVIS ------------------------------ */
.avis {
  max-width: var(--large); margin-inline: auto;
  padding: clamp(3rem, 5vw, 4.5rem) var(--marge) clamp(2rem, 3vw, 3rem);
}
.avis__entete { margin-bottom: clamp(1.8rem, 3vw, 2.6rem); }
.avis__grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.2rem, 2.4vw, 2.6rem); }
.avis__grille > li {
  background: var(--carte);
  border-radius: 24px;
  padding: clamp(1.5rem, 2.4vw, 2.2rem);
  display: grid; align-content: start; gap: .9rem;
}
.avis__perles { display: flex; gap: 5px; }
.avis__perles i { width: 9px; height: 9px; border-radius: 50%; background: var(--jaune); }
.avis__perles i:nth-child(even) { background: var(--terracotta); }
.avis blockquote { margin: 0; }
.avis blockquote p {
  font-family: var(--f-titre); font-weight: 500;
  font-size: 1.12rem; line-height: 1.45; margin: 0; color: var(--olive);
}
.avis__nom {
  font-size: .8rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--orange); margin: 0;
}

/* ------------------------------ 12. GALERIE ------------------------------
   Chaque photo chevauche la précédente et son bord gauche est découpé
   avec la même courbe liquide que la bande « chaque jour » : le joint
   entre deux images est donc irrégulier. */
.galerie { padding-top: clamp(2rem, 3vw, 3rem); }
.galerie__entete { max-width: var(--large); margin-inline: auto; padding: 0 var(--marge) clamp(1.5rem, 2.4vw, 2.2rem); }

.galerie__grille { display: flex; align-items: stretch; }
.galerie__grille li { flex: 1 1 0; min-width: 0; position: relative; overflow: hidden; }
.galerie__grille li + li {
  margin-left: clamp(-38px, -2.2vw, -20px);
  clip-path: url(#bord-galerie);
}
.galerie__grille img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  transition: transform 600ms cubic-bezier(.2, .7, .3, 1);
}
.galerie__grille li:hover img { transform: scale(1.06); }

/* ------------------------------ 12bis. PAGE COLLECTION ------------------------------ */
.tete-page {
  max-width: var(--large); margin-inline: auto;
  padding: clamp(1.5rem, 3vw, 3rem) var(--marge) clamp(1.5rem, 2.5vw, 2.5rem);
}
.fil-ariane {
  font-size: .78rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--orange); margin: 0 0 1.1rem;
}
.fil-ariane a { border-bottom: 1.5px solid transparent; transition: border-color var(--transition); }
.fil-ariane a:hover { border-bottom-color: currentColor; }
.fil-ariane span { margin-inline: .4em; opacity: .6; }
.tete-page h1 { font-size: clamp(2.5rem, 1.5rem + 3.4vw, 4.4rem); }
.tete-page__para { max-width: 48ch; margin: 0; }

.filtres { border-top: 1px solid rgba(59, 58, 30, .14); border-bottom: 1px solid rgba(59, 58, 30, .14); }
.filtres__inner {
  max-width: var(--large); margin-inline: auto;
  padding: 1.1rem var(--marge);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
}
.filtres__boutons { display: flex; flex-wrap: wrap; gap: .55rem; }
.puce {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--f-texte); font-size: .78rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--olive);
  background: transparent;
  border: 1.5px solid rgba(59, 58, 30, .3);
  border-radius: 999px;
  padding: .62em 1.15em;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}
.puce span { font-size: .72rem; opacity: .6; font-weight: 500; }
.puce:hover { border-color: var(--olive); }
.puce.est-active { background: var(--olive); border-color: var(--olive); color: var(--creme); }
.puce.est-active span { opacity: .7; }
.filtres__compte { font-size: .82rem; margin: 0; color: rgba(90, 84, 64, .8); }

.catalogue {
  max-width: var(--large); margin-inline: auto;
  padding: clamp(2rem, 3.5vw, 3.2rem) var(--marge) clamp(2rem, 3vw, 3rem);
}

/* Chaque famille ouvre sur une tuile de couleur qui prend la place
   d'une carte : la séparation se voit sans casser la grille. */
.famille + .famille { margin-top: clamp(2rem, 3.5vw, 3.4rem); }
.famille__grille {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: clamp(1rem, 1.7vw, 1.75rem);
}

.famille__intro {
  background: var(--fond);
  color: var(--encre-tuile);
  border-radius: 24px;
  padding: clamp(1.4rem, 2.2vw, 2rem);
  display: grid; align-content: center; justify-items: start;
  min-height: 260px;
}
.famille__numero {
  font-family: var(--f-titre); font-weight: 700;
  font-size: 1.05rem; letter-spacing: .1em;
  opacity: .6; margin: 0 0 .5rem;
}
.famille__intro h2 {
  color: inherit;
  font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.4rem);
  line-height: 1;
}
.famille__intro .vague { color: inherit; opacity: .75; width: clamp(72px, 6vw, 96px); margin: .9rem 0 1rem; }
.famille__note { font-size: .95rem; margin: 0 0 .9rem; max-width: 22ch; opacity: .92; }
.famille__compte {
  font-size: .74rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  margin: 0; opacity: .75;
}

.catalogue__vide {
  text-align: center; padding: 3rem 0;
  font-family: var(--f-titre); font-size: 1.3rem; color: var(--olive);
}

/* ------------------------------ 12ter. PERLES & ATELIER DES MÉLANGES ------------------------------ */
/* Les perles condensées dans les cartes de la boutique, selon le type */
.carte__ruban { margin: .1rem 0 .75rem; max-width: 168px; }
.carte__ruban svg { display: block; width: 100%; height: auto; }
.carte__ruban--tisse { max-width: 150px; }
.carte__ruban--gouttes { max-width: 66px; }

.melangeur {
  max-width: var(--large); margin-inline: auto;
  padding: clamp(1rem, 2vw, 2rem) var(--marge) clamp(2.5rem, 4vw, 4rem);
  display: grid;
  grid-template-columns: minmax(0, .48fr) minmax(0, .52fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}

.melangeur__titre { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.melangeur__sous-titre { font-size: .9rem; margin: .35rem 0 1.2rem; }
.pastille-accord {
  display: inline-block; width: 13px; aspect-ratio: 1; vertical-align: -1px;
  background: var(--terracotta);
  -webkit-mask: var(--coeur-perle) center / contain no-repeat;
          mask: var(--coeur-perle) center / contain no-repeat;
}

/* — Ton poignet : les bracelets choisis, empilés — */
.melangeur__poignet {
  position: sticky; top: 1.2rem;
  background: var(--carte);
  border-radius: 24px;
  padding: clamp(1.4rem, 2.2vw, 2rem);
}
.poignet { display: grid; gap: .9rem; }
.poignet__bijou {
  background: var(--creme);
  border-radius: 14px;
  padding: .85rem 1rem 1rem;
}
.poignet__entete { display: flex; align-items: center; gap: .7rem; margin-bottom: .6rem; }
.poignet__entete h3 {
  font-family: var(--f-texte); font-size: .82rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.poignet__type { font-size: .85rem; color: var(--texte); }
.poignet__prix { font-size: .85rem; font-weight: 600; color: var(--texte); margin-left: auto; }
.poignet__retirer {
  display: grid; place-items: center; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: transparent; color: var(--olive);
  border: 1.5px solid rgba(59, 58, 30, .3); cursor: pointer;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.poignet__retirer svg { width: 9px; }
.poignet__retirer:hover { background: var(--terracotta); border-color: var(--terracotta); color: var(--creme); }
.poignet__matrice svg { display: block; width: 100%; height: auto; }

.poignet__vide { font-size: .95rem; margin: .4rem 0 0; max-width: 34ch; }
.poignet__pied {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: 1.3rem;
}
.poignet__pied[hidden] { display: none; }
.poignet__total { margin: 0; font-size: .95rem; }
.poignet__total strong { font-family: var(--f-titre); font-size: 1.3rem; color: var(--olive); }

/* — La boîte à bracelets — */
.boite { display: grid; gap: .9rem; }
.boite__bijou {
  background: var(--carte);
  border: 2px solid transparent;
  border-radius: 18px;
  padding: 1rem 1.1rem 1.1rem;
  display: grid; gap: .55rem;
  transition: border-color var(--transition), opacity var(--transition);
}
.boite__entete { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; }
.boite__bijou h3 {
  font-family: var(--f-texte); font-size: .82rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: .45em;
}
.boite__note { font-size: .82rem; margin: 0; }
.boite__matrice svg { display: block; width: 100%; height: auto; }

/* Le cœur d'affinité, caché par défaut */
.boite__accord {
  width: 14px; aspect-ratio: 1; flex: none;
  background: var(--terracotta);
  -webkit-mask: var(--coeur-perle) center / contain no-repeat;
          mask: var(--coeur-perle) center / contain no-repeat;
  opacity: 0; transform: scale(.4);
  transition: opacity var(--transition), transform var(--transition);
}
.boite__bijou.est-conseille { border-color: var(--terracotta); }
.boite__bijou.est-conseille .boite__accord { opacity: 1; transform: scale(1); }
.boite__bijou.est-choisi { opacity: .55; }

.boite__bouton {
  justify-self: start;
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--f-texte); font-size: .74rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--olive);
  background: none; border: 0; padding: 0; cursor: pointer;
  transition: color var(--transition);
}
.boite__plus {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--lilas-fonce); color: #fff;
  transition: background-color var(--transition);
}
.boite__plus svg { width: 10px; }
.boite__bouton:hover { color: var(--orange); }
.boite__bouton:hover .boite__plus { background: var(--olive); }
.boite__bouton:disabled { cursor: default; color: var(--texte); }
.boite__bouton:disabled .boite__plus { background: rgba(59, 58, 30, .25); }

/* Étiquette posée sur l'image d'une carte */
.carte__image { position: relative; }
.carte__etiquette {
  position: absolute; top: .8rem; left: .8rem; z-index: 2;
  background: var(--carte); color: var(--olive);
  font-size: .66rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .42em .85em; border-radius: 999px;
}

.note-collection {
  background: var(--lilas);
  padding: clamp(2.2rem, 4vw, 3.5rem) var(--marge);
  display: grid; justify-items: center; text-align: center; gap: 1.2rem;
}
.note-collection__coeur { width: 46px; color: var(--terracotta); }
.note-collection__coeur svg { width: 100%; overflow: visible; }
.note-collection__texte {
  font-family: var(--f-titre); font-weight: 560;
  font-size: clamp(1.2rem, 1rem + .8vw, 1.7rem);
  line-height: 1.35; color: var(--olive);
  max-width: 34ch; margin: 0;
}

/* ------------------------------ 13. PIED DE PAGE ------------------------------ */
.pied { background: var(--creme); }
.pied__inner {
  max-width: var(--large); margin-inline: auto;
  padding: clamp(2.2rem, 3.5vw, 3.2rem) var(--marge) 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto auto;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}

.pied__titre {
  font-size: .86rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--olive); margin: 0 0 .45rem;
}
.pied__note { font-size: .9rem; margin: 0; max-width: 32ch; }

.pied__form { position: relative; display: flex; }
.pied__form input {
  flex: 1;
  font-family: var(--f-texte); font-size: .82rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--olive);
  background: transparent;
  border: 1.5px solid rgba(59, 58, 30, .5);
  border-radius: 6px;
  padding: 1.05em 3.2em 1.05em 1.3em;
  transition: border-color var(--transition);
}
.pied__form input::placeholder { color: rgba(59, 58, 30, .55); }
.pied__form input:focus { outline: none; border-color: var(--orange); }
.pied__form button {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center;
  width: 34px; height: 34px;
  background: none; border: 0; cursor: pointer; color: var(--orange);
  transition: transform var(--transition);
}
.pied__form button svg { width: 21px; }
.pied__form button:hover { transform: translateY(-50%) translateX(3px); }
.pied__message {
  position: absolute; left: 2px; top: calc(100% + .3rem);
  font-size: .8rem; color: var(--orange); margin: 0;
}

.pied__liens { display: flex; gap: clamp(1rem, 2vw, 2rem); }
.pied__liens a {
  font-size: .78rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--olive);
  transition: color var(--transition);
}
.pied__liens a:hover { color: var(--orange); }

.pied__social { display: flex; gap: .7rem; }
.pied__social a {
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1.5px solid rgba(59, 58, 30, .5);
  color: var(--olive);
  transition: border-color var(--transition), color var(--transition), transform var(--transition);
}
.pied__social svg { width: 19px; }
.pied__social a:hover { border-color: var(--orange); color: var(--orange); transform: translateY(-2px); }

.pied__copyright {
  max-width: var(--large); margin-inline: auto;
  padding: .6rem var(--marge) 1.8rem;
  font-size: .78rem; color: rgba(90, 84, 64, .75);
}

/* ------------------------------ 13bis. CARROUSEL DE LA COLLECTION ------------------------------ */
.collection__cartes[data-carrousel] {
  transition: opacity .28s ease, transform .28s ease;
}
.collection__cartes.est-transition { opacity: 0; transform: translateY(10px); }

.collection__points {
  grid-column: 1 / -1;
  display: flex; justify-content: center; gap: 1.1rem;
  margin-top: clamp(1.2rem, 2vw, 1.8rem);
}
.collection__points[hidden] { display: none; }
.point-groupe {
  position: relative;
  width: 12px; height: 12px; border-radius: 50%;
  background: transparent;
  border: 1.5px solid rgba(59, 58, 30, .45);
  padding: 0; cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition), transform var(--transition);
}
/* La pastille reste discrète, mais la zone tactile fait ~36px */
.point-groupe::before { content: ""; position: absolute; inset: -12px; }
.point-groupe:hover { transform: scale(1.2); }
.point-groupe.est-actif { background: var(--terracotta); border-color: var(--terracotta); }

/* ------------------------------ 13ter. PAGES SIMPLES ------------------------------ */
.page-simple {
  max-width: 720px; margin-inline: auto;
  padding: 0 var(--marge) clamp(3rem, 5vw, 4.5rem);
}
.page-simple__note { font-size: .92rem; margin: 2rem 0 0; }
.page-simple__note a,
.lien-texte { color: var(--orange); border-bottom: 1.5px solid currentColor; transition: color var(--transition); }
.page-simple__note a:hover,
.lien-texte:hover { color: var(--terracotta); }

.prose-page h2 {
  font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem);
  margin: 1.8em 0 .5em;
}
.prose-page h2:first-child { margin-top: 0; }
.prose-page strong { color: var(--olive); }

/* — FAQ en accordéons natifs — */
.faq details { border-top: 1.5px solid rgba(59, 58, 30, .16); }
.faq details:last-child { border-bottom: 1.5px solid rgba(59, 58, 30, .16); }
.faq summary {
  font-family: var(--f-titre); font-weight: 600;
  font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem);
  color: var(--olive);
  padding: 1.1em 2.2em 1.1em .2em;
  cursor: pointer; position: relative;
  list-style: none;
  transition: color var(--transition);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--orange); }
.faq summary::after {
  content: ""; position: absolute; right: .4em; top: 50%;
  width: 13px; height: 13px; transform: translateY(-50%);
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1.5v11M1.5 7h11' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1.5v11M1.5 7h11' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--transition);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 .2em 1.3em; margin: 0; max-width: 58ch; }

/* — Formulaire de contact — */
.formulaire { display: grid; gap: 1.3rem; justify-items: start; }
.formulaire__champ { display: grid; gap: .4rem; width: 100%; }
.formulaire label {
  font-size: .78rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--olive);
}
.formulaire input,
.formulaire textarea {
  width: 100%;
  font-family: var(--f-texte); font-size: 1rem;
  color: var(--olive);
  background: var(--carte);
  border: 1.5px solid rgba(59, 58, 30, .35);
  border-radius: 10px;
  padding: .85em 1em;
  transition: border-color var(--transition);
}
.formulaire textarea { resize: vertical; min-height: 130px; }
.formulaire input:focus,
.formulaire textarea:focus { outline: none; border-color: var(--orange); }
.formulaire [aria-invalid="true"] { border-color: var(--terracotta); }
.formulaire__erreur { font-size: .85rem; color: var(--terracotta); margin: 0; }
.formulaire__succes {
  background: var(--lilas);
  color: var(--olive);
  border-radius: 12px;
  padding: 1em 1.3em;
  font-size: .95rem; margin: 0;
}

/* — Page panier — */
.panier-page {
  max-width: var(--large); margin-inline: auto;
  padding: 0 var(--marge) clamp(3rem, 5vw, 4.5rem);
}
.panier-page__vide {
  display: grid; justify-items: center; text-align: center;
  gap: .4rem; padding: clamp(2rem, 4vw, 3.5rem) 0;
}
.panier-page__vide[hidden] { display: none; }
.panier-page__coeur { width: 54px; color: var(--lilas); margin-bottom: .6rem; }
.panier-page__coeur svg { width: 100%; overflow: visible; }
.panier-page__vide-titre {
  font-family: var(--f-titre); font-weight: 640;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  color: var(--olive); margin: 0;
}
.panier-page__vide-texte { margin: 0 0 1.4rem; }

.panier-page__plein {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 26vw, 360px);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
.panier-page__plein[hidden] { display: none; }

.panier-lignes { display: grid; gap: .9rem; }
.panier-ligne {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center; gap: clamp(.8rem, 2vw, 1.6rem);
  background: var(--carte);
  border-radius: 16px;
  padding: 1rem clamp(1rem, 2vw, 1.4rem);
}
.panier-ligne__infos h3 {
  font-family: var(--f-texte); font-size: .88rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
}
.panier-ligne__infos p { font-size: .82rem; margin: .15rem 0 0; }
.panier-ligne__quantite { display: flex; align-items: center; gap: .6rem; }
.panier-ligne__quantite button {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid rgba(59, 58, 30, .35);
  background: transparent; color: var(--olive);
  font-size: 1rem; line-height: 1; cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}
.panier-ligne__quantite button:hover { background: var(--olive); border-color: var(--olive); color: var(--creme); }
.panier-ligne__quantite span { min-width: 1.4em; text-align: center; font-weight: 600; color: var(--olive); }
.panier-ligne__prix { font-weight: 600; color: var(--olive); margin: 0; min-width: 5.2em; text-align: right; }
.panier-ligne__retirer {
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: transparent; color: var(--olive);
  border: 1.5px solid rgba(59, 58, 30, .3); cursor: pointer;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.panier-ligne__retirer svg { width: 9px; }
.panier-ligne__retirer:hover { background: var(--terracotta); border-color: var(--terracotta); color: var(--creme); }

.panier-recap {
  background: var(--carte);
  border-radius: 20px;
  padding: clamp(1.4rem, 2.4vw, 2rem);
  display: grid; gap: .7rem;
  position: sticky; top: 1.2rem;
}
.panier-recap h2 { font-size: 1.3rem; margin-bottom: .4rem; }
.panier-recap__ligne { display: flex; justify-content: space-between; margin: 0; font-size: .95rem; }
.panier-recap__ligne strong { color: var(--olive); }
.panier-recap__ligne--total {
  border-top: 1.5px solid rgba(59, 58, 30, .16);
  padding-top: .8rem; margin-top: .3rem;
  font-size: 1.05rem;
}
.panier-recap__note { font-size: .82rem; color: var(--orange); margin: 0; }
.panier-recap .btn { justify-content: center; margin-top: .5rem; }
.panier-recap__promesse { font-size: .82rem; margin: 0; }

/* ------------------------------ 13quater. FICHE BIJOU ------------------------------
   Sur ordinateur : un overlay qui monte du bas, jamais de défilement
   vertical dedans (horizontal si la place manque).
   Les mêmes blocs servent, empilés, sur la page bijou.html. */
body.fiche-ouverte { overflow: hidden; }

.voile {
  position: fixed; inset: 0; z-index: 180;
  background: rgba(59, 58, 30, .45);
  opacity: 0; transition: opacity .3s ease;
}
.voile.est-ouvert { opacity: 1; }

.fiche {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 190;
  background: var(--creme);
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -20px 60px rgba(59, 58, 30, .28);
  transform: translateY(102%);
  transition: transform .32s cubic-bezier(.2, .7, .3, 1);
}
.fiche.est-ouverte { transform: none; }

.fiche__fermer {
  position: absolute; top: 14px; right: max(var(--marge), 18px); z-index: 2;
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--creme); color: var(--olive);
  border: 1.5px solid rgba(59, 58, 30, .35); cursor: pointer;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.fiche__fermer svg { width: 12px; }
.fiche__fermer:hover { background: var(--olive); border-color: var(--olive); color: var(--creme); }

/* Une seule rangée : si ça déborde, ça défile horizontalement */
.fiche__defile {
  display: flex; align-items: stretch;
  gap: clamp(2rem, 3.5vw, 3.5rem);
  overflow-x: auto; overflow-y: hidden;
  padding: clamp(1.6rem, 2.6vw, 2.4rem) max(var(--marge), calc((100vw - var(--large)) / 2 + var(--marge))) clamp(1.8rem, 2.8vw, 2.6rem);
  scrollbar-width: thin;
}

.fiche__bloc { flex: 0 0 auto; display: grid; align-content: start; }
.fiche__identite { width: clamp(260px, 22vw, 330px); }
.fiche__vue { width: clamp(430px, 40vw, 620px); }

.fiche__etiquette {
  font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--orange); margin: 0 0 .55rem;
}
.fiche__titre {
  font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.4rem);
  line-height: 1;
}
.fiche__note { font-size: .92rem; margin: .3rem 0 .6rem; }
.fiche__histoire { font-size: .9rem; margin: 0 0 .8rem; max-width: 30ch; }
.fiche__prix {
  font-family: var(--f-titre); font-weight: 640;
  font-size: 1.5rem; color: var(--olive); margin: 0 0 .9rem;
}
.fiche__actions { display: flex; align-items: center; gap: 1.2rem; }
.fiche__actions .btn { padding: .9em 1.5em; }

/* La photo de mise en situation (page bijou uniquement) */
.fiche__photo {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 20px;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

.fiche__matrice { align-self: center; }
.fiche__matrice svg { display: block; width: 100%; height: auto; }
.fiche__matrice--gouttes { max-width: 190px; }
.fiche__matrice--fil { padding-block: 1.2rem; }

.fiche__chiffres {
  display: flex; flex-wrap: wrap; gap: .5rem .6rem;
  margin-top: 1rem;
}
.fiche__chiffres li {
  font-size: .78rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--olive);
  background: var(--carte);
  border: 1.5px solid rgba(59, 58, 30, .14);
  border-radius: 999px;
  padding: .45em 1em;
}
.fiche__chiffres strong { color: var(--terracotta); }

.fiche__minis { display: flex; gap: .8rem; }
.mini-bijou {
  display: grid; justify-items: start; gap: .3rem; align-content: start;
  width: 150px;
  background: var(--carte);
  border: 1.5px solid transparent;
  border-radius: 14px;
  padding: .85rem .95rem;
  cursor: pointer;
  font-family: var(--f-texte); text-align: left;
  transition: border-color var(--transition), transform var(--transition);
}
.mini-bijou:hover { border-color: var(--terracotta); transform: translateY(-3px); }
.mini-bijou__ruban { width: 100%; }
.mini-bijou__ruban svg { display: block; width: 100%; height: auto; max-height: 34px; }
.mini-bijou__nom {
  font-size: .74rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--olive); margin-top: .2rem;
}
.mini-bijou__prix { font-size: .78rem; color: var(--texte); }

/* — La page bijou.html : les mêmes blocs, posés en pleine page — */
.bijou-page {
  max-width: var(--large); margin-inline: auto;
  padding: clamp(1.5rem, 3vw, 3rem) var(--marge) clamp(3rem, 5vw, 4.5rem);
}
.bijou-page__attente { padding: 2rem 0; }
.bijou-page .fil-ariane { margin-bottom: clamp(1.4rem, 2.4vw, 2rem); }
.bijou-page .fil-ariane a { border-bottom: 1.5px solid transparent; transition: border-color var(--transition); }
.bijou-page .fil-ariane a:hover { border-bottom-color: currentColor; }

.fiche__page {
  display: grid;
  grid-template-columns: minmax(0, .42fr) minmax(0, .58fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
.fiche__page .fiche__identite,
.fiche__page .fiche__vue { width: auto; }
.fiche__page .fiche__titre { font-size: clamp(2.2rem, 1.6rem + 2vw, 3.4rem); }
.fiche__page .fiche__histoire { max-width: 40ch; }
.fiche__page .fiche__amis { grid-column: 1 / -1; margin-top: clamp(1rem, 2vw, 2rem); }
.fiche__page .fiche__minis { flex-wrap: wrap; }
.fiche__page .mini-bijou { width: clamp(150px, 20vw, 200px); }

.bijou-page__introuvable { display: grid; justify-items: start; gap: .6rem; padding: 2rem 0; }

/* ------------------------------ 14. TOAST ------------------------------ */
.toast {
  position: fixed; z-index: 300;
  left: 50%; bottom: 26px; transform: translate(-50%, 20px);
  background: var(--olive); color: var(--creme);
  padding: .85rem 1.5rem; border-radius: 999px;
  box-shadow: 0 14px 34px rgba(59, 58, 30, .3);
  pointer-events: none;   /* invisible, il ne doit rien bloquer sous le pouce */
  font-size: .9rem;
  opacity: 0; transition: opacity var(--transition), transform var(--transition);
  max-width: calc(100vw - 32px);
}
.toast.est-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast a { color: var(--jaune); text-decoration: underline; text-underline-offset: 2px; }

/* ------------------------------ 15. ADAPTATIF ------------------------------ */
@media (max-width: 1180px) {
  .collection { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; }
  .collection__intro { display: grid; }
  .collection__intro p:not(.sur-titre) { max-width: 46ch; }
  .bande-jour__panneau { width: clamp(320px, 46%, 520px); }
  .bande-jour__social { width: clamp(280px, 30%, 380px); }
  .pied__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 900px) {
  html { scroll-padding-top: 104px; }

  /* En mobile, l'en-tête devient compact et reste collé en haut :
     le nom à gauche, panier à droite, la navigation glisse dessous. */
  .entete {
    position: sticky; top: 0;
    background: color-mix(in srgb, var(--creme) 90%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 rgba(59, 58, 30, .12);
  }
  .entete__inner {
    grid-template-columns: auto 1fr;
    grid-template-areas: "logo actions" "nav nav";
    row-gap: .45rem;
    padding: .7rem var(--marge) .5rem;
  }
  .logo { grid-area: logo; display: flex; align-items: baseline; gap: .3em; line-height: 1; white-space: nowrap; }
  .logo__mot { font-size: 1.05rem; white-space: nowrap; }
  .logo__perles, .logo__tagline { display: none; }
  .entete__actions { grid-area: actions; justify-self: end; padding-top: 0; }
  /* « Recherche » fait doublon avec la navigation : on garde le panier */
  .entete__actions > a:not(.entete__panier) { display: none; }
  .entete__panier { white-space: nowrap; }
  .entete__nav {
    grid-area: nav;
    flex-wrap: nowrap; gap: 1.3rem;
    overflow-x: auto; padding: 0 0 .15rem;
    scrollbar-width: none;
  }
  .entete__nav::-webkit-scrollbar { display: none; }
  .entete__nav a { white-space: nowrap; }

  .collection { padding-top: clamp(2.5rem, 6vw, 3.5rem); }

  .heros { grid-template-columns: minmax(0, 1fr); min-height: 0; }

  .atelier { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; padding-right: 0; }
  .atelier__scene { --debord: 34px; max-width: 480px; }
  .atelier__texte { padding-inline: var(--marge); }
  .scene__legendes-mobiles { padding-inline: var(--marge); }
  .legende, .scene__fils { display: none; }
  .scene__legendes-mobiles { display: grid; gap: .5rem; margin-top: .4rem; }
  .scene__legendes-mobiles span {
    position: relative; padding-left: 1.2rem;
    font-size: .74rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--olive);
  }
  .scene__legendes-mobiles span::before {
    content: ""; position: absolute; left: 0; top: .32em;
    width: 8px; height: 8px; border-radius: 50%; background: var(--terracotta);
  }
  /* Le héros mobile : moins de texte, un titre qui remplit la largeur,
     et la photo posée juste dessous en dôme organique. */
  .heros { padding-bottom: 0; }
  .heros__texte { padding: 1.1rem var(--marge) 1.5rem; }
  .heros .sur-titre { margin-bottom: .5rem; }
  .heros h1 { font-size: clamp(2.7rem, 13.5vw, 3.6rem); max-width: 10ch; }
  .heros .vague { margin: .7rem 0 .9rem; }
  .heros__para { max-width: 26ch; font-size: 1.05rem; margin-bottom: 1.4rem; }
  .heros__suite { display: none; }   /* la deuxième phrase attend le grand écran */

  /* La forme liquide laisserait un vide : la photo prend toute la largeur,
     avec un sommet arrondi qui garde l'esprit de la bulle. */
  .heros__cadre {
    position: static; inset: auto;
    height: clamp(330px, 76vw, 470px);
    border-radius: 48% 52% 0 0 / 15% 13% 0 0;
  }
  .heros__blob {
    position: static; width: 100%; height: 100%;
    aspect-ratio: auto; clip-path: none;
  }
  .badge { right: var(--marge); bottom: -1.8rem; width: clamp(96px, 26vw, 124px); }

  .atouts ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem 0; }
  .atouts li { justify-content: flex-start; border-left: 0; padding-inline: .3rem; }

  .collection__cartes,
  .categories__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* La bande se déplie : panneau, photo, encart lilas */
  .bande-jour { height: auto; display: grid; overflow: visible; }
  .bande-jour__photo { position: static; height: clamp(240px, 52vw, 340px); order: 2; }
  .bande-jour__panneau {
    position: static; order: 1; width: auto; clip-path: none;
    padding: clamp(2rem, 6vw, 2.8rem) var(--marge) clamp(2.2rem, 6vw, 3rem);
  }
  .bande-jour__panneau h2 { max-width: 18ch; }
  /* L'encart lilas se met en ligne : le rond à gauche, les mots à droite */
  .bande-jour__social {
    position: static; order: 3; width: auto; margin-right: 0;
    border-radius: 0;
    padding: 1.3rem var(--marge);
    grid-auto-flow: column; grid-template-columns: auto 1fr;
    align-items: center; justify-items: start;
    gap: .3rem 1.1rem; text-align: left;
  }
  .bande-jour__social .rond-texte { width: 84px; grid-row: 1 / 3; }
  .bande-jour__liens { line-height: 1.5; }

  /* Sur téléphone, on va à l'essentiel : les phrases secondaires
     attendent le grand écran. */
  .texte-large { display: none; }

  /* Les avis deviennent un fil qu'on fait glisser, au lieu de trois
     blocs empilés qui allongent la page. */
  .avis__grille {
    display: flex; gap: .9rem;
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: .4rem; scrollbar-width: none;
  }
  .avis__grille::-webkit-scrollbar { display: none; }
  .avis__grille > li { flex: 0 0 80%; scroll-snap-align: start; border-top-width: 2px; }

  .melangeur { grid-template-columns: minmax(0, 1fr); }
  .melangeur__poignet { position: static; }

  .fiche__page { grid-template-columns: minmax(0, 1fr); }
  .fiche__page .fiche__vue { order: -1; }

  .panier-page__plein { grid-template-columns: minmax(0, 1fr); }
  .panier-recap { position: static; }
  .panier-ligne { grid-template-columns: minmax(0, 1fr) auto; row-gap: .7rem; }
  .panier-ligne__prix { text-align: left; min-width: 0; }

  /* La galerie devient une bande qu'on fait glisser du doigt,
     les joints irréguliers restent. */
  .galerie__grille { overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .galerie__grille li { flex: 0 0 clamp(180px, 48vw, 260px); scroll-snap-align: start; }

  .filtres__inner { justify-content: flex-start; }
  .puce { font-size: .875rem; min-height: 44px; padding-block: .6em; }

  .pied__inner { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .pied__form { width: 100%; flex-wrap: wrap; }
  /* Le message d'état revient dans le flux : il ne chevauche plus les liens */
  .pied__message { position: static; flex-basis: 100%; margin-top: .35rem; }

  /* ——— Ergonomie tactile : toutes les petites commandes passent à 44px ——— */
  .panier-ligne__quantite button,
  .panier-ligne__retirer,
  .poignet__retirer { width: 44px; height: 44px; }
  .panier-ligne__quantite { gap: .35rem; }
  .poignet__retirer svg { width: 11px; }
  .panier-ligne__retirer svg { width: 11px; }
  .pied__form button { width: 44px; height: 44px; right: 4px; }
  .pied__form input { padding-right: 4em; }
  .lien-souligne { font-size: .875rem; padding-top: .8em; margin-top: -.8em; padding-bottom: .55em; }

  /* La navigation compacte : cibles plus hautes, et un fondu à droite
     qui montre qu'elle continue */
  .entete__nav a, .entete__panier { padding-block: .65em; }
  .entete__nav {
    padding-right: 28px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }

  .bandeau { font-size: .8rem; }

  /* Le mélangeur : compte, total et bouton d'achat restent visibles
     en bas d'écran pendant qu'on choisit dans la boîte */
  .melangeur { padding-bottom: 6.5rem; }
  .poignet__pied:not([hidden]) {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    margin: 0;
    background: var(--carte);
    padding: .8rem var(--marge);
    box-shadow: 0 -10px 30px rgba(59, 58, 30, .18);
  }

  /* La page bijou : les perles retrouvent une vraie taille et défilent
     horizontalement dans leur bloc au lieu de s'écraser */
  .fiche__page .fiche__matrice { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .fiche__page .fiche__matrice svg { width: 900px; max-width: none; }
  .fiche__page .fiche__matrice--gouttes svg { width: auto; max-width: 220px; margin-inline: auto; }
}

@media (max-width: 560px) {
  /* Les cartes de la collection deviennent un fil qu'on fait glisser */
  .collection__cartes {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: .9rem;
    padding-bottom: .5rem;
    scrollbar-width: none;
  }
  .collection__cartes::-webkit-scrollbar { display: none; }
  .collection__cartes .carte { flex: 0 0 74%; scroll-snap-align: start; }

  /* Les atouts : l'icône passe au-dessus du texte, qui récupère
     toute la largeur de la colonne au lieu de se casser en quatre. */
  .atouts li { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .atouts span { font-size: .74rem; line-height: 1.5; }

  .categories__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }

  /* La collection en colonnes libres : les cartes ne s'alignent plus
     d'une colonne à l'autre, comme un mur Pinterest. La tuile d'intro
     occupe la place d'une carte : les familles de 3 pièces donnent
     deux colonnes équilibrées au lieu d'une colonne amputée. */
  .famille__grille { display: block; columns: 2; column-gap: .8rem; }
  .famille__grille > li { break-inside: avoid; margin-bottom: .8rem; }
  .famille__intro { min-height: 0; margin-bottom: .8rem; }

  /* Des hauteurs d'image qui varient : c'est ce décalage qui casse
     l'alignement entre la colonne de gauche et celle de droite. */
  .famille__grille .carte:nth-child(3n+2) .carte__image img { aspect-ratio: 1 / 1.3; }
  .famille__grille .carte:nth-child(3n+3) .carte__image img { aspect-ratio: 1 / .9; }
  .famille__grille .carte:nth-child(3n+4) .carte__image img { aspect-ratio: 1 / 1.55; }

  .famille__grille .carte__infos { padding: .85rem .9rem 1rem; }
  .famille__grille .carte h3 { font-size: .82rem; }
  .famille__grille .carte__infos > p { font-size: .85rem; }
  .famille__grille .carte__ruban { max-width: 100%; }

  /* Les filtres de la collection glissent sur une seule ligne */
  .filtres__boutons {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(var(--marge) * -1);
    padding-inline: var(--marge);
  }
  .filtres__boutons::-webkit-scrollbar { display: none; }
  .puce { white-space: nowrap; }

  /* Les matrices du mélangeur retrouvent une taille lisible */
  .boite__matrice, .poignet__matrice { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .boite__matrice svg, .poignet__matrice svg { width: 680px; max-width: none; }

  /* Le bouton et le lien « Composer » de la fiche s'empilent proprement */
  .fiche__actions { flex-wrap: wrap; row-gap: .9rem; }
  .btn { width: 100%; justify-content: center; }
  .entete__nav { gap: 1rem; }
  .entete__nav a { font-size: .8rem; letter-spacing: .08em; }
  .entete__actions { gap: 1.1rem; }
  .entete__actions a, .entete__panier { font-size: .8rem; letter-spacing: .08em; }
}

/* ------------------------------ 16. MOUVEMENT RÉDUIT ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  /* Les défilements s'arrêtent net plutôt que de sauter */
  .bandeau__piste, .ruban__piste,
  .badge, .badge__perles, .rond-texte__anneau { animation: none !important; }
  .badge { transform: rotate(-13deg); }
  .reveler { opacity: 1; transform: none; }
}