/* Sols à flocons */

/* Titres : graisse de la maquette (600) */
.flo-hero__title,
.flo-h2,
.flo-cta__title { font-weight: 600; }
.flo-h2 { font-size: clamp(34px, 3.6vw, 52px); }

/* --------------------------------------------------------------------------
   Hero : texte à gauche, visuel à fond perdu à droite, médaillon matière
   -------------------------------------------------------------------------- */
.flo-hero {
  --edge: calc(max(0px, (100vw - var(--maxw)) / 2) + var(--gutter));
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: clamp(640px, calc(100svh - var(--header-h)), 820px);
  background: var(--cream);
}
.flo-hero__text {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: clamp(32px, 3.5vw, 56px) clamp(40px, 6vw, 112px) clamp(56px, 6vw, 96px) var(--edge);
}
.flo-hero__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 32px;
}
.flo-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(52px, 6.95vw, 100px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--noir);
  max-width: 7.2em;
}
.flo-hero .lead { max-width: 440px; }
.flo-hero__media {
  aspect-ratio: auto;
  height: 100%;
  border-radius: 0;
}
.js .flo-hero__media[data-reveal] { clip-path: inset(0 0 0 100%); }
.js .flo-hero__media[data-reveal].is-revealed { clip-path: inset(0); transition: clip-path 1.4s var(--ease-out) 0.1s; }
.flo-hero__media .badge { left: auto; right: 24px; bottom: 24px; }

.flo-hero__medallion {
  position: absolute;
  left: 50%;
  top: 72%;
  z-index: 3;
  width: clamp(160px, 17.5vw, 252px);
  aspect-ratio: 1;
  margin: calc(clamp(160px, 17.5vw, 252px) / -2) 0 0 calc(clamp(160px, 17.5vw, 252px) / -2);
  border: 8px solid var(--cream);
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgb(23 23 25 / 0.55);
  transform: translate3d(0, var(--parallax, 0px), 0);
  animation: flo-medal-in 1.4s var(--ease-out) 0.6s both;
}
.flo-hero__medallion img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.35);
  animation: flo-spin 90s linear infinite;
}
@keyframes flo-medal-in { from { opacity: 0; scale: 0.6; } }
@keyframes flo-spin { to { transform: scale(1.35) rotate(360deg); } }

@media (max-width: 900px) {
  .flo-hero { grid-template-columns: 1fr; min-height: 0; }
  .flo-hero__text { padding-inline: var(--gutter); gap: 40px; }
  .flo-hero__media { height: auto; aspect-ratio: 4 / 3; }
  /* Le médaillon chevauche le haut du visuel (hauteur du visuel = 75vw) */
  .flo-hero__medallion { left: auto; right: var(--gutter); top: calc(100% - 75vw - 66px); margin: 0; width: 132px; border-width: 6px; }
}

/* --------------------------------------------------------------------------
   01 · Présentation + coupe de principe
   -------------------------------------------------------------------------- */
.flo-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
  gap: clamp(48px, 7.8vw, 112px);
  align-items: start;
}
.flo-intro__text { font-size: 17px; max-width: 48ch; }

.flo-coupe { display: flex; flex-direction: column; gap: 14px; padding-top: 36px; }
.flo-coupe__caption {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.flo-coupe__layers { display: flex; flex-direction: column; }
.flo-layer {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(176px, 1fr);
  gap: clamp(20px, 2.2vw, 32px);
  align-items: center;
  min-height: 50px;
  cursor: default;
}
.flo-layer__band {
  display: block;
  height: var(--h, 40px);
  border-radius: 2px;
  background: var(--band, #8f908e);
  transform-origin: left;
  transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
}
.js .flo-layer[data-reveal] .flo-layer__band { transform: scaleX(0); }
.js .flo-layer.is-revealed .flo-layer__band {
  transform: none;
  transition: transform 1.1s var(--ease-out) calc(var(--d, 0) * 1ms), box-shadow 0.6s var(--ease-out);
}
.flo-layer__label { display: flex; flex-direction: column; gap: 4px; }
.flo-layer__title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
  transition: color 0.3s;
}
.flo-layer__num { font-size: 11px; color: var(--gold-ink); letter-spacing: 0.08em; }
.flo-layer__hint { padding-left: 24px; font-size: 13px; color: var(--muted); }

.flo-layer--vernis { --h: 30px; }
.flo-layer--vernis .flo-layer__band { --band: #e9e6de; box-shadow: inset 0 0 0 1px rgb(23 23 25 / 0.12); }
.flo-layer--flocons { --h: 44px; }
.flo-layer--flocons .flo-layer__band { background: #8f908e url("/assets/img/flocons/coupe-flocons.svg") left center / auto 100% repeat-x; }
.flo-layer--base { --h: 40px; }
.flo-layer--primaire { --h: 20px; }
.flo-layer--primaire .flo-layer__band { --band: #5e6064; }
.flo-layer--support { --h: 118px; align-items: start; margin-top: 8px; }
.flo-layer--support .flo-layer__band { background: #b9b5aa url("/assets/img/flocons/coupe-support.svg") left top / auto 100% repeat-x; }

@media (hover: hover) {
  .flo-layer:hover .flo-layer__band { transform: translateX(6px); box-shadow: -6px 0 0 0 var(--gold); }
  .flo-layer--vernis:hover .flo-layer__band { box-shadow: inset 0 0 0 1px rgb(23 23 25 / 0.12), -6px 0 0 0 var(--gold); }
  .flo-layer:hover .flo-layer__title { color: var(--gold-ink); }
}

@media (max-width: 1080px) {
  .flo-intro { grid-template-columns: 1fr; }
  .flo-coupe { padding-top: 0; }
}
@media (max-width: 560px) {
  .flo-layer { grid-template-columns: 38% minmax(0, 1fr); gap: 16px; min-height: 56px; }
  .flo-layer__title { font-size: 15px; }
  .flo-layer__hint { padding-left: 0; font-size: 12px; }
  .flo-layer--support { --h: 88px; }
}

/* --------------------------------------------------------------------------
   02 · Combinaisons
   -------------------------------------------------------------------------- */
.flo-swatches {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 40px 24px;
}
.flo-swatch { display: flex; flex-direction: column; gap: 18px; }
.flo-swatch__sample {
  position: relative;
  aspect-ratio: 237 / 300;
  border-radius: var(--radius);
  overflow: hidden;
}
.flo-swatch__sample img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}
.flo-swatch__sample::after {
  /* Reflet de vernis qui balaie l’échantillon au survol */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgb(255 255 255 / 0.28) 50%, transparent 65%);
  transform: translateX(-110%);
  transition: transform 1.1s var(--ease-out);
  pointer-events: none;
}
.flo-swatch__name {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.flo-swatch__name span { font-size: 11px; color: var(--gold-ink); letter-spacing: 0.08em; }
.flo-swatch__dots { display: flex; gap: 6px; margin-top: -4px; }
.flo-swatch__dots i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgb(23 23 25 / 0.16);
  transition: transform 0.4s var(--ease-out);
}
@media (hover: hover) {
  .flo-swatch:hover .flo-swatch__sample img { transform: scale(1.12) rotate(4deg); }
  .flo-swatch:hover .flo-swatch__sample::after { transform: translateX(110%); }
  .flo-swatch:hover .flo-swatch__dots i { transform: translateY(-3px); }
  .flo-swatch:hover .flo-swatch__dots i:nth-child(2) { transition-delay: 0.04s; }
  .flo-swatch:hover .flo-swatch__dots i:nth-child(3) { transition-delay: 0.08s; }
  .flo-swatch:hover .flo-swatch__dots i:nth-child(4) { transition-delay: 0.12s; }
  .flo-swatch:hover .flo-swatch__dots i:nth-child(5) { transition-delay: 0.16s; }
}
@media (max-width: 1080px) { .flo-swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .flo-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; } }

.flo-mention {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 56px;
  font-size: 14px;
  color: var(--muted);
}
.flo-mention .icon { width: 16px; height: 16px; margin-top: 2px; color: var(--gold-ink); }

/* --------------------------------------------------------------------------
   03 · Contextes
   -------------------------------------------------------------------------- */
.flo-contexts__head {
  padding-top: 56px;
  margin-bottom: 48px;
  border-top: 1px solid var(--line);
}
.flo-contexts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 24px;
  align-items: start;
}
.flo-context { gap: 18px; }
.flo-context__title { display: flex; align-items: center; gap: 10px; }
.flo-context__title .icon { width: 18px; height: 18px; color: var(--gold-ink); transition: transform 0.5s var(--ease-out); }
@media (hover: hover) {
  .flo-context:hover .media > img { --media-scale: 1.05; }
  .flo-context:hover .flo-context__title .icon { transform: translateX(-2px) rotate(-10deg); }
}
@media (max-width: 1080px) { .flo-contexts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .flo-contexts { grid-template-columns: 1fr; }
  .flo-context .media { aspect-ratio: 4 / 3; }
}

/* --------------------------------------------------------------------------
   04 · Adhérence & performances
   -------------------------------------------------------------------------- */
.flo-perf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.16fr);
  gap: clamp(48px, 7.8vw, 112px);
  align-items: start;
}
.flo-perf__title { font-size: clamp(32px, 3.35vw, 48px); text-wrap: pretty; }
.flo-perf .lead { font-size: 17px; }
.flo-perf__box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: var(--anthracite);
  font-size: 15px;
  color: var(--white);
}
.flo-perf__kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.flo-factors { padding-top: 8px; }
.flo-factors__label {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.flo-factor {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 28px;
  align-items: baseline;
  padding-block: 26px;
  border-bottom: 1px solid var(--line);
}
.flo-factor::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease-out);
}
.flo-factor__num { font-family: var(--font-heading); font-size: 12px; font-weight: 600; color: var(--gold); }
.flo-factor__title {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  transition: transform 0.5s var(--ease-out), color 0.3s;
}
@media (hover: hover) {
  .flo-factor:hover::after { transform: scaleX(1); }
  .flo-factor:hover .flo-factor__title { transform: translateX(6px); color: var(--gold); }
}
@media (max-width: 1080px) { .flo-perf { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .flo-factor { grid-template-columns: 28px minmax(0, 1fr); gap: 8px 16px; }
  .flo-factor .text-sm { grid-column: 2; }
}

/* --------------------------------------------------------------------------
   06 · FAQ
   -------------------------------------------------------------------------- */
.flo-faq {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
  gap: clamp(48px, 8.3vw, 120px);
  align-items: start;
}
.flo-faq__aside { align-items: flex-start; }
@media (min-width: 901px) {
  .flo-faq__aside { position: sticky; top: calc(var(--header-h) + 32px); }
}
@media (max-width: 900px) { .flo-faq { grid-template-columns: 1fr; } }