/* ============================================================
   LADY ORIGAMI — site vitrine temporaire
   ============================================================ */

/* ---------- Polices auto-hébergées ---------- */
@font-face {
  font-family: 'Jost'; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url('../fonts/jost-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost'; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url('../fonts/jost-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                 U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                 U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Jetons ---------- */
:root {
  --blanc:  #FFFFFF;
  --ivoire: #FAF8F5;
  --encre:  #1A1A1A;
  --gris:   #6E6E6E;
  --trait:  #E7E3DD;

  --jade:   #1EB482;
  --rose:   #E33174;
  --prune:  #AA285A;
  --corail: #D84830;
  --terre:  #C86428;
  --or:     #E0A33C;

  --display: 'Jost', 'Futura', 'Century Gothic', 'Avenir Next', system-ui, sans-serif;
  --texte:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --marge: clamp(1.25rem, 5vw, 5.5rem);
  --pile:  clamp(5rem, 12vh, 9rem);
  --sortie: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  -webkit-text-size-adjust: 100%;
  /* Pas de `overflow-x` global ici : sur <html> comme sur <body>, il perturbe
     le défilement du document et la navigation par ancres. Les deux seuls
     éléments qui débordent (la trame du hero et la bande de papiers) sont
     rognés par leur propre section — voir .hero et .matiere. */
}

body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--texte);
  font-size: clamp(1rem, .55vw + .87rem, 1.075rem);
  line-height: 1.72;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

::selection { background: var(--rose); color: #fff; }

:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Lien d'évitement : masqué sans sortir du flux horizontal
   (pas de `left: -9999px`, qui peut créer un débordement). */
.saut {
  position: absolute; top: 0; left: 0; z-index: 100;
  background: var(--encre); color: #fff;
  padding: .75rem 1.25rem;
  clip-path: inset(50%);
  white-space: nowrap;
}
.saut:focus { clip-path: none; }

/* ---------- Typographie partagée ---------- */
.surtitre {
  font-family: var(--display);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gris);
  margin: 0 0 1.4rem;
}
.surtitre::before {
  content: ""; display: inline-block;
  width: 1.75rem; height: 1px; margin-right: .9rem;
  vertical-align: .3em;
  background: linear-gradient(90deg, var(--or), var(--rose));
}

.titre {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2.1rem, 4.6vw, 4rem);
  line-height: 1.08;
  letter-spacing: -.015em;
  margin: 0 0 1.6rem;
}
.titre em {
  font-style: normal;
  background: linear-gradient(96deg, var(--or), var(--corail) 42%, var(--rose) 74%, var(--prune));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.titre--centre { text-align: center; }

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem var(--marge);
  background: rgba(255,255,255,0);
  transition: background .45s var(--sortie), padding .45s var(--sortie),
              box-shadow .45s var(--sortie);
}
.nav--pose {
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  padding-top: .85rem; padding-bottom: .85rem;
  box-shadow: 0 1px 0 var(--trait);
}

.nav__marque {
  display: block; line-height: 0;
  opacity: 0; transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .45s var(--sortie), transform .45s var(--sortie);
}
.nav--pose .nav__marque { opacity: 1; transform: none; pointer-events: auto; }
.nav__marque img { width: 118px; }

/* Sur le hero, les liens se posent sur la trame de pliage : sans fond ils
   deviennent illisibles. On leur donne un encart blanc translucide, aux coins
   coupés comme un pli. Il s'efface une fois que la barre entière passe au
   blanc, pour ne pas empiler deux cadres. */
.nav__liens {
  display: flex; gap: clamp(1rem, 2.4vw, 2.4rem);
  list-style: none; margin: 0;
  padding: .6rem clamp(1rem, 1.8vw, 1.5rem);
  font-family: var(--display);
  font-size: .78rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;

  /* Pas de filet ici : un `box-shadow: inset` ne longe pas les diagonales
     d'un clip-path, il s'arrête aux coins coupés. Le blanc à 92 % suffit à
     détacher l'encart de la trame, qui est très pâle. */
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  clip-path: polygon(
    10px 0, 100% 0,
    100% calc(100% - 10px), calc(100% - 10px) 100%,
    0 100%, 0 10px
  );
  transition: background .45s var(--sortie), padding .45s var(--sortie);
}
.nav--pose .nav__liens {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding-block: 0;
  padding-inline: 0;
  clip-path: none;
}
.nav__liens a {
  position: relative;
  text-decoration: none;
  padding-bottom: 3px;
  white-space: nowrap;
}
.nav__liens a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--or), var(--rose));
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--sortie);
}
.nav__liens a:hover::after,
.nav__liens a:focus-visible::after { transform: scaleX(1); transform-origin: left; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid; place-items: center;
  padding: 7rem var(--marge) 5rem;
  overflow: hidden;
}

.hero__motif {
  position: absolute; inset: 50% auto auto 50%;
  width: min(148vh, 132vw); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  opacity: .5;
  pointer-events: none;
}
.hero__plis path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: plier 1.5s var(--sortie) forwards;
  animation-delay: calc(var(--i) * 22ms + 120ms);
}
@keyframes plier { to { stroke-dashoffset: 0; } }

.hero__contenu {
  position: relative; z-index: 1;
  text-align: center;
  max-width: 46rem;
}
/* voile radial : garde le texte lisible par-dessus la trame */
.hero__contenu::before {
  content: ""; position: absolute; z-index: -1;
  inset: -14vh -12vw;
  background: radial-gradient(ellipse at center,
              #fff 0%, rgba(255,255,255,.95) 42%, rgba(255,255,255,0) 74%);
}

.hero__logo {
  width: min(28rem, 78vw);
  margin: 0 auto 2.4rem;
  opacity: 0; transform: translateY(14px);
  animation: monter 1.1s var(--sortie) .55s forwards;
}

.hero__accroche {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.05rem, 2.1vw, 1.5rem);
  line-height: 1.5;
  letter-spacing: .06em;
  margin: 0 0 1.2rem;
  opacity: 0; transform: translateY(14px);
  animation: monter 1.1s var(--sortie) .75s forwards;
}

.hero__signe {
  font-family: var(--display);
  font-size: .74rem; font-weight: 500;
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--gris);
  margin: 0;
  opacity: 0; transform: translateY(14px);
  animation: monter 1.1s var(--sortie) .92s forwards;
}

@keyframes monter { to { opacity: 1; transform: none; } }

.hero__descendre {
  position: absolute; left: 50%; bottom: 2.6rem;
  transform: translateX(-50%);
  width: 2rem; height: 3.4rem;
  display: grid; place-items: center;
  opacity: 0;
  animation: monter 1s var(--sortie) 1.5s forwards;
}
.hero__descendre span {
  display: block; width: 1px; height: 2.6rem;
  background: linear-gradient(180deg, var(--trait), var(--rose));
  transform-origin: top;
  animation: filer 2.3s ease-in-out infinite;
}
@keyframes filer {
  0%, 100% { transform: scaleY(.35); opacity: .4; }
  50%      { transform: scaleY(1);   opacity: 1; }
}

/* ============================================================
   SECTIONS GÉNÉRIQUES
   ============================================================ */
.section {
  padding: var(--pile) var(--marge);
  max-width: 84rem;
  margin-inline: auto;
}

/* ---------- Savoir-faire ---------- */
.savoir {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.savoir__texte p { margin: 0 0 1.15rem; color: #333; }
.savoir__texte b { font-weight: 600; color: var(--encre); }
.chapo {
  font-size: 1.16em;
  line-height: 1.6;
  color: var(--encre) !important;
}
.savoir__signature {
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: .1em;
  margin-top: 2rem !important;
  color: var(--gris) !important;
}
.savoir__signature::before {
  content: ""; display: block;
  width: 2.5rem; height: 1px; margin-bottom: 1rem;
  background: linear-gradient(90deg, var(--rose), var(--jade));
}

.savoir__image { margin: 0; }

/* Deux coins opposés rabattus, pour casser le carré de la photo et rappeler
   le pli. Volontairement asymétrique : une coupe est plus franche que l'autre,
   comme une feuille repliée à la main. */
.savoir__image picture {
  display: block;
  overflow: hidden;
  clip-path: polygon(
    13% 0,   100% 0,
    100% 87%, 87% 100%,
    0 100%,   0 13%
  );
}
.savoir__image img {
  width: 100%;
  transform: scale(1.04);
  transition: transform 1.4s var(--sortie);
}
.savoir__image.est-visible img { transform: none; }
.savoir__image figcaption {
  font-family: var(--display);
  font-size: .74rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gris);
  margin-top: 1rem;
}

/* ============================================================
   MOSAÏQUE
   ============================================================ */
.modeles { padding-block: var(--pile); }

.modeles__intro {
  max-width: 38rem;
  margin: 0 auto clamp(2.75rem, 6vw, 4.5rem);
  padding-inline: var(--marge);
  text-align: center;
}
.modeles__intro .surtitre { text-align: center; }
.modeles__note { color: var(--gris); margin: 0; }

.mosaique {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  background: var(--trait);
  border-block: 1px solid var(--trait);
}

.tuile {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--blanc);
  aspect-ratio: 1;
}
.tuile img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--sortie);
}
/* pli de couleur révélé au survol, en coin */
.tuile::after {
  content: "";
  position: absolute; right: 0; bottom: 0;
  width: 3.25rem; height: 3.25rem;
  background: linear-gradient(315deg, var(--rose) 0 48%, transparent 48%);
  opacity: 0;
  transform: translate(28%, 28%);
  transition: opacity .5s var(--sortie), transform .5s var(--sortie);
  pointer-events: none;
}
.tuile:nth-child(4n+2)::after { background: linear-gradient(315deg, var(--jade)   0 48%, transparent 48%); }
.tuile:nth-child(4n+3)::after { background: linear-gradient(315deg, var(--or)     0 48%, transparent 48%); }
.tuile:nth-child(4n)::after   { background: linear-gradient(315deg, var(--corail) 0 48%, transparent 48%); }

@media (hover: hover) {
  .tuile:hover img { transform: scale(1.07); }
  .tuile:hover::after { opacity: 1; transform: none; }
}

/* révélation en cascade */
.mosaique .tuile,
.autres__trio .tuile {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .62s var(--sortie), transform .62s var(--sortie);
  transition-delay: calc(var(--n, 0) * 45ms);
}
.mosaique .tuile.est-visible,
.autres__trio .tuile.est-visible { opacity: 1; transform: none; }

/* ---------- Autres pièces ---------- */
.autres {
  max-width: 84rem;
  margin: clamp(3.5rem, 8vw, 6rem) auto 0;
  padding-inline: var(--marge);
}
.autres__ligne {
  font-family: var(--display);
  font-size: clamp(.85rem, 1.5vw, 1rem);
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-align: center;
  color: var(--gris);
  margin: 0 0 2rem;
}
.autres__trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.5rem, 1.5vw, 1.25rem);
}

/* ============================================================
   MATIÈRE
   ============================================================ */
.matiere {
  padding-block: var(--pile);
  background: var(--ivoire);
  overflow: hidden;
}
.matiere__texte {
  max-width: 40rem;
  margin: 0 auto clamp(2.75rem, 6vw, 4.25rem);
  padding-inline: var(--marge);
}
.matiere__texte p { color: #333; margin: 0 0 2rem; }

.matiere__points {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .9rem;
}
.matiere__points li {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: .75rem;
  align-items: baseline;
  padding-top: .9rem;
  border-top: 1px solid var(--trait);
  color: #333;
}
.matiere__points span {
  font-family: var(--display);
  font-size: .8rem; font-weight: 500; letter-spacing: .1em;
  background: linear-gradient(120deg, var(--or), var(--rose));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.bande { width: 100%; }
.bande__piste {
  display: flex;
  gap: clamp(.75rem, 2vw, 1.75rem);
  padding-inline: var(--marge);
  will-change: transform;
}
.bande__piste img {
  flex: 0 0 clamp(11rem, 26vw, 20rem);
  aspect-ratio: 1;
  object-fit: cover;
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact { text-align: center; }
.contact__bloc { max-width: 40rem; margin-inline: auto; }
.contact__bloc .surtitre { text-align: center; }

.contact__avis {
  color: var(--gris);
  margin: 0 auto 2.75rem;
  max-width: 30rem;
}

.contact__liste {
  list-style: none; margin: 0 0 2rem; padding: 0;
  display: grid; gap: .35rem;
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.6vw, 1.75rem);
  font-weight: 300;
}
.contact__liste a { text-decoration: none; }
.contact__liste a:hover { color: var(--rose); }

.contact__reseaux {
  list-style: none; margin: 0 0 2.5rem; padding: 0;
  display: flex; justify-content: center; gap: 2rem;
  font-family: var(--display);
  font-size: .8rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
}
.contact__reseaux a {
  text-decoration: none;
  border-bottom: 1px solid var(--trait);
  padding-bottom: 3px;
  transition: border-color .35s var(--sortie), color .35s var(--sortie);
}
.contact__reseaux a:hover { color: var(--rose); border-color: var(--rose); }

.contact__lieu {
  font-family: var(--display);
  font-size: .78rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gris); margin: 0;
}

/* ============================================================
   PIED
   ============================================================ */
.pied {
  text-align: center;
  padding: 3.5rem var(--marge) 3rem;
  border-top: 1px solid var(--trait);
  font-size: .85rem;
  color: var(--gris);
}
.pied p { margin: 0 0 .35rem; }
.pied__grue { width: 34px; margin: 0 auto 1.5rem; opacity: .55; }
.pied__mention { font-size: .78rem; opacity: .8; }

/* ============================================================
   RÉVÉLATION AU SCROLL
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .95s var(--sortie), transform .95s var(--sortie);
}
[data-reveal].est-visible { opacity: 1; transform: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* 20 tuiles : 5, 4 puis 2 colonnes — toujours des rangées pleines */
@media (max-width: 1000px) {
  .mosaique { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 900px) {
  .savoir { grid-template-columns: 1fr; }
  .savoir__image { order: -1; }
  /* l'image ne doit pas manger tout l'écran une fois la mise en page empilée */
  .savoir__image picture { max-height: 62vh; }
  .savoir__image img { height: 62vh; object-fit: cover; object-position: center 38%; }
  .hero__motif { opacity: .38; }
}

@media (max-width: 640px) {
  .mosaique { grid-template-columns: repeat(2, 1fr); }
  .autres__trio { grid-template-columns: 1fr; gap: 2px; }
  .nav { padding-inline: 1.25rem; }
  .nav__liens { gap: .9rem; font-size: .68rem; letter-spacing: .12em; }
  .nav__marque img { width: 92px; }
  .contact__reseaux { gap: 1.5rem; }
}

/* Sous 560 px, le logotype et les quatre liens ne tiennent plus sur une ligne :
   la barre ne garde que les liens, centrés. La marque reste portée par le hero
   et le pied de page. */
@media (max-width: 560px) {
  .nav { justify-content: center; padding-inline: 1rem; }
  .nav__marque { display: none; }
  .nav__liens { gap: .8rem; font-size: .66rem; letter-spacing: .08em; }
}

@media (max-width: 360px) {
  .nav__liens { gap: .6rem; font-size: .62rem; letter-spacing: .04em; }
}

/* ============================================================
   MOUVEMENT RÉDUIT — tout est affiché, rien ne bouge
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .hero__plis path { stroke-dashoffset: 0; }
  .hero__logo, .hero__accroche, .hero__signe, .hero__descendre { opacity: 1; transform: none; }
  [data-reveal],
  .mosaique .tuile,
  .autres__trio .tuile { opacity: 1; transform: none; }
  .savoir__image img { transform: none; }
  .bande__piste { transform: none !important; }
}