/* Peau de Fleur Tattoo, site C, l'index d'herbier. Tokens de design.md, rien d'autre. */

@font-face { font-family: "Josefin Sans"; font-style: normal; font-weight: 300 400; font-display: swap; src: url("fonts/josefin-sans.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/newsreader.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/newsreader-italic.woff2") format("woff2"); }
@font-face { font-family: "Pinyon Script"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/pinyon-script.woff2") format("woff2"); }

:root {
  --rose-pale: #F1E4E4;
  --rose-poudre: #C39FA7;
  --encre-bleue: #2C335F;
  --noir-de-pose: #0B0A0B;
  --pervenche: #7F8FC4;
  --sauge: #66775C;

  /* l'échelle, de 390 à 1440 px */
  --fluide: ((100vw - 390px) / 1050);
  --t-hero: clamp(54px, calc(54px + 22 * var(--fluide)), 76px);
  --t-titre: clamp(34px, calc(34px + 16 * var(--fluide)), 50px);
  --t-sous-titre: clamp(22px, calc(22px + 4 * var(--fluide)), 26px);
  --t-texte: clamp(18px, calc(18px + 1 * var(--fluide)), 19px);
  --t-citation: clamp(22px, calc(22px + 6 * var(--fluide)), 28px);
  --t-legende: clamp(14px, calc(14px + 1 * var(--fluide)), 15px);
  --t-nom: clamp(30px, calc(30px + 4 * var(--fluide)), 34px);

  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px;
  --e-7: 48px; --e-8: 72px; --e-9: 112px; --e-10: 160px;
  --marge: 20px;
  --bande: var(--e-8);
  --barre-bas: 76px;
  --ecran: 100svh;
  --piste: 600px;

  --r-trait: 2px;
  --r-cercle: 50%;

  --courbe: cubic-bezier(0.22, 1, 0.36, 1);
  --duree: 900ms;

  --josefin: "Josefin Sans", "Futura", "Century Gothic", sans-serif;
  --newsreader: "Newsreader", "Georgia", serif;
  --pinyon: "Pinyon Script", "Snell Roundhand", cursive;
}
@media (min-width: 1024px) {
  :root { --marge: 64px; --bande: var(--e-9); --barre-bas: 0px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--e-5); }
body {
  margin: 0;
  background: var(--rose-pale);
  color: var(--encre-bleue);
  font-family: var(--newsreader);
  font-size: var(--t-texte);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding-bottom: var(--barre-bas);
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- les surfaces ---------- */
.papier { position: relative; background: var(--rose-poudre); isolation: isolate; }
.papier::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("img/papier-rose.webp") center / 512px repeat;
  opacity: .35; mix-blend-mode: multiply;
}
.calque { position: relative; background: var(--rose-pale); isolation: isolate; }
.calque::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("img/calque.webp") center / 768px repeat;
  opacity: .7;
}
.nuit { position: relative; background: var(--noir-de-pose); color: var(--rose-pale); isolation: isolate; }

/* ---------- les caractères ---------- */
.titre-hero, .titre, .sous-titre, .legende, .ligne { font-family: var(--josefin); }
.titre-hero { font-weight: 300; font-size: var(--t-titre); line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; }
.titre { font-weight: 300; font-size: var(--t-titre); line-height: 1.12; text-wrap: balance; }
.sous-titre { font-weight: 400; font-size: var(--t-sous-titre); line-height: 1.25; }
.legende { font-weight: 400; font-size: var(--t-legende); line-height: 1.3; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.texte { max-width: 22.5em; text-wrap: pretty; }
.citation { font-family: var(--newsreader); font-style: italic; font-size: var(--t-citation); line-height: 1.35; max-width: 30ch; text-wrap: balance; }
.nom { font-family: var(--pinyon); font-size: var(--t-nom); line-height: 1; font-weight: 400; text-decoration: none; white-space: nowrap; }
@media (min-width: 1024px) {
  .titre-hero { font-size: var(--t-hero); line-height: 1.08; }
}

/* ---------- le lien pointillé, qui devient trait ---------- */
.lien {
  text-decoration: none;
  padding-bottom: 3px;
  background-image:
    linear-gradient(currentColor, currentColor),
    radial-gradient(circle, currentColor 1px, transparent 1.3px);
  background-repeat: no-repeat, repeat-x;
  background-size: 0% 1.5px, 6px 3px;
  background-position: 0 100%, 0 100%;
  transition: background-size 300ms var(--courbe);
}
.nuit .lien { color: var(--pervenche); }
@media (hover: hover) and (pointer: fine) {
  .lien:hover { background-size: 100% 1.5px, 6px 3px; }
}
a:focus-visible, button:focus-visible { outline: 2px solid var(--encre-bleue); outline-offset: 2px; border-radius: var(--r-trait); }
.nuit a:focus-visible { outline-color: var(--rose-pale); }

/* ---------- le bouton, un seul dessin ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-3);
  height: 52px; padding: 0 var(--e-6);
  background: var(--encre-bleue); color: var(--rose-pale);
  font-family: var(--josefin); font-weight: 400; font-size: 17px; line-height: 1;
  text-decoration: none; border-radius: var(--r-trait);
  transition: background-color 200ms ease-out, transform 200ms ease-out;
}
.bouton svg { width: 18px; height: 18px; flex: none; }
.bouton span { padding-top: 3px; }
.nuit .bouton { box-shadow: 0 0 0 1px var(--rose-pale); }
@media (hover: hover) and (pointer: fine) {
  .bouton:hover { background: color-mix(in srgb, var(--encre-bleue) 80%, black); transform: translateY(-1px); }
}
.bouton:active { transform: translateY(0); transition-duration: 80ms; }

/* le bouton fixé sous le pouce, au téléphone */
.barre-bas {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  height: var(--barre-bas); padding: var(--e-3) var(--marge);
  background: var(--rose-pale);
  display: flex;
}
.barre-bas .bouton { flex: 1; }
@media (min-width: 1024px) { .barre-bas { display: none; } }

/* ---------- la ligne d'index : mot ........ valeur ---------- */
.ligne {
  display: flex; align-items: center; gap: var(--e-2);
  min-height: 44px; text-decoration: none; color: inherit;
}
.ligne-mot { flex: none; }
.ligne-val { flex: none; text-align: right; }
.fil { flex: 1 1 24px; min-width: 24px; height: 12px; align-self: center; color: inherit; }
.fil svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fil-points { stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-dasharray: .1 8; fill: none; }
.fil-masque { stroke: white; stroke-width: 10; fill: none; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.js .a-tracer .fil-masque { stroke-dashoffset: 1; }
.js .a-tracer.trace .fil-masque { stroke-dashoffset: 0; transition: stroke-dashoffset 420ms var(--courbe); }
.js .is-in .a-tracer .fil-masque { stroke-dashoffset: 0; transition: stroke-dashoffset 420ms var(--courbe) 300ms; }
.nuit .fil { color: var(--pervenche); }
/* sans script, le fil se dessine en CSS */
html:not(.js) .fil { background: radial-gradient(circle, currentColor 1px, transparent 1.3px) left center / 8px 4px repeat-x; }

.liste > li + li { margin-top: 0; }
.liste .ligne-mot { font-size: var(--t-sous-titre); font-weight: 400; line-height: 1.25; }
.liste .ligne-val { font-size: var(--t-legende); letter-spacing: .04em; font-variant-numeric: tabular-nums; line-height: 1.3; }
.liste-petite .ligne { min-height: 40px; }
.liste-petite .ligne-mot { font-size: var(--t-legende); letter-spacing: .04em; }
.liste-petite .ligne-val { font-size: var(--t-legende); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.ligne-val.long { white-space: normal; max-width: 62%; }
.point-agenda { display: inline-block; width: 8px; height: 8px; border-radius: var(--r-cercle); background: var(--sauge); margin-right: var(--e-2); vertical-align: 1px; }

/* ---------- la barre du haut ---------- */
.barre {
  height: 56px; padding: 0 var(--marge);
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
}
.barre .nom { color: var(--encre-bleue); padding-top: 6px; }
.barre .legende { font-size: 15px; }
.barre-liens { display: flex; align-items: center; gap: var(--e-6); }
@media (min-width: 1024px) {
  .barre { height: 88px; }
}

/* ---------- 1. l'index épinglé ---------- */
.index-piste { position: relative; height: calc(var(--ecran) + var(--piste)); }
.index {
  position: sticky; top: 0;
  height: calc(var(--ecran) - var(--barre-bas));
  display: flex; flex-direction: column;
  overflow: hidden;
}
.index-corps { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.fenetre {
  --h: clamp(200px, calc(var(--ecran) - 464px), 520px);
  position: relative; height: var(--h); flex: none;
  background: var(--noir-de-pose);
}
.fenetre-cadre { position: relative; height: 100%; aspect-ratio: 1; margin: 0 auto; max-width: 100%; }
.fenetre img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  mix-blend-mode: lighten; opacity: 0;
  transition: opacity 300ms var(--courbe);
}
.fenetre img.vu { opacity: 1; }
.index-texte { padding: var(--e-4) var(--marge) 0; }
.index .titre-hero { max-width: 12em; }
.index .liste { margin-top: var(--e-3); }
.index .ligne { height: 44px; }
.index .ligne-mot { transition: color 300ms var(--courbe); }
.index-bouton { display: none; }

/* le médaillon de la ligne active */
.med { flex: none; width: 40px; height: 40px; position: relative; color: var(--encre-bleue); }
.med svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.med-cercle { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-dasharray: .1 6.2; }
.med-masque { fill: none; stroke: white; stroke-width: 8; stroke-dasharray: 1 1; stroke-dashoffset: 1; transform: rotate(-90deg); transform-origin: 20px 20px; }
.med-feuille { fill: var(--sauge); opacity: 0; transition: opacity 300ms var(--courbe); }
.actif .med-masque { stroke-dashoffset: 0; transition: stroke-dashoffset 600ms var(--courbe); }
.actif .med-feuille { opacity: 1; transition-delay: 300ms; }

@media (min-width: 1024px) {
  .index { height: var(--ecran); }
  .index-corps {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
    gap: var(--e-8); padding: 0 var(--marge) var(--e-7);
  }
  .fenetre { order: 2; --h: min(600px, calc(var(--ecran) - 88px - 96px)); width: var(--h); }
  .index-texte { order: 1; padding: 0; max-width: 720px; }
  .index .liste { margin-top: var(--e-6); }
  .index .ligne { height: 66px; }
  .index .liste .ligne-mot { font-size: var(--t-titre); font-weight: 300; line-height: 1.12; }
  .index .med { width: 52px; height: 52px; }
  .index-bouton { display: inline-flex; margin-top: var(--e-6); }
}

/* ---------- 2. les planches ---------- */
.planches { padding: var(--bande) 0 calc(var(--bande) + var(--barre-bas)); }
.planches-tete { padding: 0 var(--marge); max-width: 900px; }
.planches-tete .texte { margin-top: var(--e-4); }
.planche { margin-top: var(--e-9); }
.planche-tete { padding: 0 var(--marge); }
.planche-nom { font-family: var(--josefin); font-weight: 300; font-size: var(--t-titre); line-height: 1.12; }
.planche-tete .liste { margin-top: var(--e-2); max-width: 420px; }
.planche-tete .texte, .planche-tete .citation { margin-top: var(--e-4); }
.planche-noir { position: relative; margin-top: var(--e-6); background: var(--noir-de-pose); color: var(--rose-pale); }
.planche-photo { position: relative; aspect-ratio: 1; }
.planche-photo img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: lighten; }
.planche-photo img.macro { mix-blend-mode: normal; }
.etiquettes { position: relative; padding: var(--e-5) var(--marge) var(--e-6); display: grid; gap: var(--e-2); }
.etiquette { display: flex; align-items: center; gap: var(--e-2); min-height: 32px; width: max-content; max-width: 100%; }
.etiquette .fil { flex: 0 0 24px; min-width: 24px; color: var(--pervenche); }
@media (min-width: 1024px) { .etiquette .fil { flex-basis: 40px; } }
.etiquette .ligne-mot { color: var(--rose-pale); }
.etiquette .ligne-val { color: var(--rose-pale); }
.guides { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.guide { fill: none; stroke: var(--pervenche); stroke-width: 2; stroke-linecap: round; stroke-dasharray: .1 8; }
.guide-point { fill: var(--pervenche); stroke: var(--noir-de-pose); stroke-width: 1.5; }
.loupe {
  position: absolute; right: var(--marge); bottom: var(--marge); width: 120px; height: 120px; border-radius: var(--r-cercle); overflow: hidden;
  outline: 2px dotted var(--pervenche); outline-offset: 5px;
}
.loupe img { width: 100%; height: 100%; object-fit: cover; }

@media (hover: hover) and (pointer: fine) {
  .planche-photo img:not(.macro) { transition: transform 600ms var(--courbe); }
  .planche:hover .planche-photo img:not(.macro) { transform: scale(1.02); }
}

@media (min-width: 1024px) {
  .planches-tete { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-8); max-width: none; align-items: end; }
  .planches-tete .texte { margin-top: 0; }
  .planche {
    display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--e-8); align-items: center; padding: 0 var(--marge);
  }
  .planche-tete { padding: 0; }
  .planche.miroir { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .planche.miroir .planche-tete { order: 2; }
  .planche-noir { margin-top: 0; display: grid; grid-template-columns: minmax(0, 1fr) 300px; min-height: 0; }
  .planche.miroir .planche-noir { grid-template-columns: 300px minmax(0, 1fr); }
  .planche.miroir .planche-photo { order: 2; }
  .etiquettes { display: block; padding: 0; }
  .etiquette { position: absolute; left: var(--e-6); }
  .planche.miroir .etiquette { left: auto; right: var(--e-6); }
  .loupe { right: var(--e-6); bottom: var(--e-6); }
}

/* ---------- 3. votre fleur, dessinée pour vous ---------- */
.fleur { padding: var(--bande) var(--marge) calc(var(--bande) + var(--barre-bas)); }
.fleur .citation { max-width: 20ch; }
.fleur-signe { margin-top: var(--e-3); }
.fleur .titre { margin-top: var(--e-8); max-width: 14em; }
.fleur .texte { margin-top: var(--e-4); }
.fleur-image { margin: var(--e-7) calc(var(--marge) * -1) 0; aspect-ratio: 1; overflow: hidden; }
.fleur-image img { width: 100%; height: 100%; object-fit: cover; }
.fleur .liste { margin-top: var(--e-7); }
.fleur .liste .ligne { min-height: 52px; }
.fleur .note { margin-top: var(--e-4); font-size: 16px; line-height: 1.5; max-width: 26em; }
@media (min-width: 1024px) {
  .fleur { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 0 var(--e-9); align-items: start; }
  .fleur-gauche { grid-column: 1; }
  .fleur-image { grid-column: 2; grid-row: 1 / span 2; margin: 0; position: sticky; top: var(--e-7); }
  .fleur .titre { margin-top: var(--e-9); }
}

/* ---------- 4. où la trouver ---------- */
.trouver { padding: var(--bande) var(--marge) calc(var(--bande) + var(--barre-bas)); overflow: hidden; }
.trouver::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -10% -30% auto auto; width: 900px; height: 600px;
  background: url("img/halo.jpg") center / cover no-repeat;
  mix-blend-mode: screen; opacity: .25;
}
.trouver-adresse { font-family: var(--josefin); font-weight: 300; font-size: var(--t-titre); line-height: 1.12; max-width: 13em; text-wrap: balance; }
.trouver .texte { margin-top: var(--e-4); color: var(--rose-pale); }
.trouver .liste { margin-top: var(--e-7); max-width: 720px; }
.trouver .liste .ligne-mot { font-size: var(--t-legende); letter-spacing: .04em; }
.trouver .liste .ligne { min-height: 48px; }
.trouver-actions { margin-top: var(--e-7); display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-5) var(--e-6); }
.trouver-actions .legende { color: var(--pervenche); }
@media (min-width: 1024px) {
  .trouver { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 0 var(--e-9); align-items: start; }
  .trouver .liste { margin-top: 0; }
}

/* ---------- le pied de page ---------- */
.pied { padding: var(--e-8) var(--marge) calc(var(--e-7) + var(--barre-bas)); }
.pied .nom { font-size: var(--t-nom); color: var(--encre-bleue); }
.pied .liste { margin-top: var(--e-5); max-width: 560px; }
.pied-legal { margin-top: var(--e-6); display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-5); }
@media (min-width: 1024px) {
  .pied { display: grid; grid-template-columns: 1fr minmax(0, 560px); gap: var(--e-8); align-items: start; }
  .pied .liste { margin-top: 0; }
  .pied-legal { grid-column: 2; margin-top: 0; }
}

/* ---------- le rendez-vous ---------- */
.rdv-tete { padding: var(--e-6) var(--marge) calc(var(--bande) + var(--barre-bas)); }
.rdv-chiffre { display: block; font-size: calc(var(--t-hero) * 2); line-height: .9; font-variant-numeric: tabular-nums; margin-bottom: var(--e-3); }
.rdv-tete .titre-hero { max-width: 13em; }
.rdv-tete .texte { margin-top: var(--e-4); }
.rdv-tete .liste { margin-top: var(--e-7); max-width: 760px; }
@media (min-width: 1024px) {
  .rdv-tete { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 0 var(--e-9); padding-top: var(--e-8); align-items: end; }
  .rdv-tete .liste { margin-top: 0; }
}

.etapes { padding: var(--bande) 0 calc(var(--bande) + var(--barre-bas)); }
.etape { padding: 0 var(--marge); }
.etape + .etape { margin-top: var(--e-9); }
.etape-image { margin: 0 calc(var(--marge) * -1); aspect-ratio: 1; overflow: hidden; }
.etape-image img { width: 100%; height: 100%; object-fit: cover; }
.etape-texte { margin-top: var(--e-5); }
.etape-texte .liste { max-width: 520px; }
.etape-texte .sous-titre { margin-top: var(--e-4); }
.etape-texte .texte { margin-top: var(--e-3); }
.etape-rond { width: 200px; height: 200px; border-radius: var(--r-cercle); overflow: hidden; }
.etape-rond img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) {
  .etape { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--e-9); align-items: center; }
  .etape:nth-child(even) .etape-image { order: 2; }
  .etape-image { margin: 0; }
  .etape-texte { margin-top: 0; }
}

.avant { padding: var(--bande) var(--marge) calc(var(--bande) + var(--barre-bas)); }
.avant .citation { max-width: 24ch; }
.avant-grille { margin-top: var(--e-8); display: grid; gap: var(--e-8); }
.avant-grille .sous-titre { margin-bottom: var(--e-3); }
.avant-soins { display: flex; gap: var(--e-5); align-items: center; margin-bottom: var(--e-5); }
.avant-soins .etape-rond { width: 120px; height: 120px; flex: none; }
@media (min-width: 1024px) {
  .avant-grille { grid-template-columns: 1fr 1fr; gap: var(--e-9); }
}

.semaine { margin-top: var(--e-5); }

/* ---------- les révélations ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); }
.js .reveal.is-in { opacity: 1; transform: none; transition: opacity var(--duree) var(--courbe), transform var(--duree) var(--courbe); transition-delay: calc(var(--rang, 0) * 80ms); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0ms !important; transition-delay: 0ms !important; animation: none !important; }
  .js .reveal { transform: none; }
  .js .reveal.is-in { transition: opacity 200ms ease-out !important; }
  .js .a-tracer .fil-masque, .med-masque { stroke-dashoffset: 0; }
}