/* L'Ongle Chic, variation a : les pois qui se posent. Le design system : design.md. */

@font-face { font-family: "Bodoni Moda"; src: url("fonts/bodoni-moda-var.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("fonts/jost-var.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }

:root {
  --facade: #F2F1EE;
  --noir: #1F1A1C;
  --bordeaux: #7A1222;
  --rose: #E6BCC2;
  --gris: #7A7472;
  --monogramme: #B4596C;
  --accent: var(--bordeaux);
  --bordeaux-survol: color-mix(in srgb, var(--bordeaux) 78%, var(--noir));
  --douce-facade: color-mix(in srgb, var(--noir) 72%, var(--facade));
  --douce-noir: color-mix(in srgb, var(--facade) 76%, var(--noir));
  --douce-rose: color-mix(in srgb, var(--noir) 80%, var(--rose));
  --ombre-carte: 0 12px 28px color-mix(in srgb, var(--noir) 18%, transparent);

  --t-1: 60px; --t-2: 38px; --t-prix: 28px; --t-3: 20px; --t-texte: 17px; --t-petit: 14px;
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 80px; --e-9: 120px;
  --r-1: 6px; --r-rond: 999px;
  --gouttiere: var(--e-4); --bande: var(--e-7);
  --pinceau: cubic-bezier(.4, 0, .2, 1);
  --pois: cubic-bezier(.34, 1.4, .64, 1);
}
@media (max-width: 479px) { :root { --t-1: 40px; --t-2: 30px; } }
@media (min-width: 768px) { :root { --gouttiere: var(--e-6); --bande: var(--e-8); } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background-color: var(--facade); color: var(--noir); font-family: "Jost", system-ui, sans-serif; font-size: var(--t-texte); line-height: 1.55; font-weight: 400; overflow-x: clip; }
h1, h2, h3, p, ul, ol, figure, blockquote, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { max-width: 46ch; }
.cadre { width: 100%; max-width: calc(1200px + 2 * var(--gouttiere)); margin-inline: auto; padding-inline: var(--gouttiere); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2 { font-family: "Bodoni Moda", Georgia, serif; font-weight: 600; text-wrap: balance; }
h1 { font-size: var(--t-1); line-height: 1.05; }
h2 { font-size: var(--t-2); line-height: 1.1; }
h3 { font-size: var(--t-3); line-height: 1.3; font-weight: 500; }
.petit { font-size: var(--t-petit); line-height: 1.4; }
.prix { font-size: var(--t-prix); line-height: 1.1; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chiffre { font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---------- surfaces ---------- */
.s-facade { --douce: var(--douce-facade); --focus: var(--noir); position: relative; isolation: isolate; background-color: var(--facade); color: var(--noir); }
.s-noir { --douce: var(--douce-noir); --focus: var(--facade); position: relative; isolation: isolate; background-color: var(--noir); color: var(--facade); }
.s-noir::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("photos/pois-mannequin.webp") repeat 0 0 / 360px; mix-blend-mode: screen; opacity: 0.06; pointer-events: none; }
.s-noir::after { content: ""; position: absolute; top: 0; right: 0; width: min(60%, 700px); height: min(100%, 520px); z-index: -1; background: url("photos/lumieres.webp") no-repeat right top / cover; mix-blend-mode: screen; opacity: 0.35; pointer-events: none; }
.s-rose { --douce: var(--douce-rose); --focus: var(--noir); position: relative; isolation: isolate; background-color: var(--rose); color: var(--noir); }
/* le liseré du damassé, comme un ruban */
.s-rose::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; background: url("photos/damasse.webp") repeat-x 0 0 / 256px 12px; pointer-events: none; }
.douce { color: var(--douce); }
.grain { position: relative; overflow: hidden; }
.grain::after { content: ""; position: absolute; inset: 0; background: url("photos/grain.svg") 0 0 / 240px; mix-blend-mode: overlay; opacity: 0.04; pointer-events: none; }

/* ---------- les trois pois qui séparent les sections ---------- */
.pois3 { display: flex; gap: var(--e-2); margin-bottom: var(--e-5); }
.pois3 span { width: 6px; height: 6px; border-radius: var(--r-rond); }
.pois3 span:nth-child(1) { background-color: var(--noir); }
.pois3 span:nth-child(2) { background-color: var(--monogramme); }
.pois3 span:nth-child(3) { background-color: var(--bordeaux); }
.s-noir .pois3 span:nth-child(1) { background-color: var(--facade); }

/* ---------- l'en-tête ---------- */
.entete .cadre { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); min-height: 64px; }
.logo img { height: 36px; width: auto; }
.entete .bouton { min-height: 40px; padding: var(--e-2) var(--e-5); }
@media (min-width: 768px) { .logo img { height: 44px; } .entete .cadre { min-height: 80px; } }

/* ---------- boutons, liens ---------- */
.bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: var(--e-4) 28px; border-radius: var(--r-rond); background-color: var(--bordeaux); color: var(--facade); font-size: var(--t-texte); font-weight: 500; line-height: 1.2; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lien { font-weight: 500; text-decoration: none; background-image: linear-gradient(var(--bordeaux), var(--bordeaux)); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 1px; padding-bottom: 2px; }
.s-noir .lien { background-image: linear-gradient(currentColor, currentColor); }
@media (hover: hover) and (pointer: fine) {
  .bouton { transition: background-color 200ms ease-out, transform 200ms ease-out; }
  .bouton:hover { background-color: var(--bordeaux-survol); transform: translateY(-2px); }
  .bouton:active { transform: none; }
  .lien { background-size: 0% 1px; transition: background-size 300ms ease-out; }
  .lien:hover { background-size: 100% 1px; }
}
a:focus-visible { outline: 2px solid var(--focus, var(--noir)); outline-offset: 2px; border-radius: var(--r-1); }
.bouton:focus-visible { border-radius: var(--r-rond); }

/* ---------- le premier écran : la séquence des pois, épinglée sur 70 % de l'écran ---------- */
.premier { position: relative; height: calc(100svh + 70svh); }
.premier-fixe { position: sticky; top: 0; height: 100svh; min-height: 620px; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.premier-grille { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: var(--e-4); padding-bottom: var(--e-5); min-height: 0; }
.main { position: relative; margin: 0 calc(-1 * var(--gouttiere)); min-height: 0; overflow: hidden; }
.main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; opacity: 0; }
.main img.est-la { opacity: 1; }
/* le pied de la photo se fond dans la façade sur 120 px */
.main::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(180deg, transparent, var(--facade)); pointer-events: none; }
.premier-texte { display: grid; gap: var(--e-3); justify-items: start; }
.premier-texte h1 { max-width: 11em; }
.chiffres { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2) var(--e-5); }
.chiffres a { text-decoration: none; }
@media (min-width: 900px) {
  .premier-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 500px); grid-template-rows: minmax(0, 1fr); column-gap: var(--e-8); padding-bottom: var(--e-7); }
  .main { grid-column: 2; grid-row: 1; margin: 0; border-radius: var(--r-1); }
  .main::after { display: none; }
  .premier-texte { grid-column: 1; grid-row: 1; align-self: center; gap: var(--e-5); }
}

/* ---------- les bandes ---------- */
.bande { padding-block: var(--bande); }

/* le salon, sur noir */
.salon-tete { position: relative; margin-inline: calc(-1 * var(--gouttiere)); }
.salon-tete img { width: 100%; }
/* sur téléphone le titre passe au-dessus de la bannière, sur le noir ; sur le mur vide à partir de 768 px */
.salon-tete h2 { max-width: 9em; margin: 0 var(--gouttiere) var(--e-4); color: var(--facade); }
@media (min-width: 1280px) { .salon-tete h2 { position: absolute; top: var(--e-7); left: var(--e-7); margin: 0; color: var(--noir); } }
.salon-photos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); margin-top: var(--e-5); }
.salon-photos img { width: 100%; border-radius: var(--r-1); }
.salon-photos .large { grid-column: 1 / -1; }
.salon-texte { margin-top: var(--e-5); }
@media (min-width: 900px) {
  .salon-tete { margin-inline: 0; border-radius: var(--r-1); overflow: hidden; }
  .salon-photos { grid-template-columns: 2fr 1fr 1fr; }
  .salon-photos .large { grid-column: auto; }
}

/* les poses, sur façade, avec la serviette */
.poses::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("photos/serviette.webp") repeat 0 0 / 384px; mix-blend-mode: multiply; opacity: 0.12; pointer-events: none; }
.cartes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-6) var(--e-4); margin-top: var(--e-6); }
.carte figure { overflow: hidden; border-radius: var(--r-1); }
.carte img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.carte h3 { margin-top: var(--e-3); }
.carte p { margin-top: var(--e-1); }
@media (hover: hover) and (pointer: fine) {
  .carte { transition: transform 250ms ease-out; }
  .carte figure { transition: box-shadow 250ms ease-out; }
  .carte img { transition: transform 600ms var(--pinceau); }
  .carte:hover { transform: translateY(-3px); }
  .carte:hover figure { box-shadow: var(--ombre-carte); }
  .carte:hover img { transform: scale(1.03); }
}
.mosaique { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); margin-top: var(--e-7); align-items: start; }
.mosaique img { width: 100%; border-radius: var(--r-1); }
@media (min-width: 768px) { .cartes { grid-template-columns: repeat(4, minmax(0, 1fr)); } .mosaique { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* les prix, sur rose */
.prix-grille { display: grid; gap: var(--e-7); }
.carte-prix { margin-top: var(--e-5); }
.carte-prix li { display: grid; grid-template-columns: 5px minmax(0, 1fr) auto; gap: var(--e-3); align-items: baseline; padding-block: var(--e-3); border-bottom: 1px solid color-mix(in srgb, var(--noir) 22%, var(--rose)); }
.carte-prix li::before { content: ""; width: 5px; height: 5px; border-radius: var(--r-rond); background-color: var(--bordeaux); transform: translateY(-3px); }
.carte-prix .prix { color: var(--bordeaux); }
.carte-prix .sans-prix { font-size: var(--t-petit); color: var(--douce); text-align: right; }
.source { margin-top: var(--e-4); }
.prix-action { margin-top: var(--e-6); }
.gestes { display: grid; gap: var(--e-4); }
.geste { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--e-4); align-items: center; }
.geste img { width: 100%; border-radius: var(--r-1); aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 900px) { .prix-grille { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--e-8); align-items: start; } .geste { grid-template-columns: 180px minmax(0, 1fr); } }

/* les avis, sur noir */
.avis-grille { display: grid; gap: var(--e-7); }
.notes { display: flex; flex-wrap: wrap; gap: var(--e-5) var(--e-7); margin-top: var(--e-5); }
.notes div { display: grid; }
.citation p { font-family: "Bodoni Moda", Georgia, serif; font-size: var(--t-3); line-height: 1.4; font-weight: 500; max-width: 34ch; }
.citation figcaption { margin-top: var(--e-3); }
.avis-photo img { width: 100%; border-radius: var(--r-1); }
@media (min-width: 900px) { .avis-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-8); align-items: center; } }

/* venir, sur façade, avec le halo de vitrine */
.venir::after { content: ""; position: absolute; top: 0; left: 0; width: min(60%, 640px); height: min(100%, 480px); z-index: -1; background: url("photos/halo-vitrine.webp") no-repeat left top / cover; mix-blend-mode: screen; opacity: 0.4; pointer-events: none; }
.venir-grille { display: grid; gap: var(--e-7); }
.venir-corps { display: grid; gap: var(--e-4); justify-items: start; align-content: start; }
.adresse { font-size: var(--t-3); line-height: 1.3; font-weight: 500; }
.jours { border-collapse: collapse; width: 100%; max-width: 24rem; font-variant-numeric: tabular-nums; }
.jours th, .jours td { padding: 6px 0; text-align: left; border-bottom: 1px solid color-mix(in srgb, var(--gris) 45%, var(--facade)); }
.jours th { font-weight: 500; padding-right: var(--e-5); }
.jours tr.est-aujourdhui th, .jours tr.est-aujourdhui td { font-weight: 600; }
.jours tr.est-aujourdhui th { background-image: linear-gradient(var(--bordeaux), var(--bordeaux)); background-repeat: no-repeat; background-position: 0 90%; background-size: 2.2em 1px; }
.venir-photo img { width: 100%; border-radius: var(--r-1); }
@media (min-width: 900px) { .venir-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--e-8); } }

/* le pied, sur noir */
.pied { padding-block: var(--e-7); }
.pied-grille { display: grid; gap: var(--e-4); }
.pied-nom { font-family: "Bodoni Moda", Georgia, serif; font-size: var(--t-3); font-weight: 600; }
.pied-liens { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); }

/* ---------- le bouton épinglé ---------- */
.bouton-epingle { position: fixed; z-index: 30; left: 50%; bottom: var(--e-4); translate: -50% 0; box-shadow: var(--ombre-carte); opacity: 0; visibility: hidden; }
.bouton-epingle.est-visible { opacity: 1; visibility: visible; }
@media (min-width: 768px) { .bouton-epingle { display: none; } }

/* ---------- le mouvement ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* la photo s'ouvre depuis un pois, du centre de l'ongle du majeur jusqu'au cadre, en 800 ms */
  .js .premier:not(.est-arrive) .main { clip-path: circle(0 at 52% 53%); }
  .premier.est-arrive .main { animation: pois-ouvre 800ms var(--pinceau) both; }
  @keyframes pois-ouvre { from { clip-path: circle(0 at 52% 53%); } to { clip-path: circle(120% at 52% 53%); } }
  .js .premier:not(.est-arrive) h1 { opacity: 0; transform: translateY(24px); }
  .premier.est-arrive h1 { animation: monte 700ms var(--pinceau) 150ms both; }
  @keyframes monte { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
  .js .premier:not(.est-arrive) .chiffres { visibility: hidden; }
  /* les trois pois des séparateurs, l'un après l'autre, 240 ms chacun */
  .js .pois3:not(.est-vu) span { transform: scale(0); }
  .pois3.est-vu span { animation: pose 240ms var(--pois) both; }
  .pois3.est-vu span:nth-child(2) { animation-delay: 240ms; }
  .pois3.est-vu span:nth-child(3) { animation-delay: 480ms; }
  @keyframes pose { from { transform: scale(0); } to { transform: scale(1); } }
  .bouton-epingle { transition: opacity 200ms ease-out, visibility 0s linear 200ms; }
  .bouton-epingle.est-visible { transition: opacity 200ms ease-out, visibility 0s; }
  .js .a-revele { opacity: 0; transform: translateY(28px); transition: opacity 900ms var(--pinceau), transform 900ms var(--pinceau); transition-delay: calc(var(--i, 0) * 80ms); }
  .js .a-revele.est-vu { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .premier { height: auto; }
  .premier-fixe { position: relative; height: auto; min-height: 100svh; }
}