/* Distri Cycle, maquette. Le design system de la marque : design.md. */

@font-face { font-family: "Barlow Condensed"; src: url("fonts/barlow-condensed-700i.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/barlow-condensed-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  /* palette */
  --ciel: #3FC7E6;
  --crepi: #EDE6D6;
  --cambouis: #181413;
  --rouge: #BC2B25;
  --vert: #0D9034;
  --accent: var(--rouge);
  --rouge-survol: color-mix(in srgb, var(--rouge) 80%, var(--cambouis));
  --rouge-appuye: color-mix(in srgb, var(--rouge) 65%, var(--cambouis));

  /* texte */
  --t-1: 72px;
  --t-2: 40px;
  --t-chiffre: 52px;
  --t-3: 22px;
  --t-texte: 17px;
  --t-petit: 14px;
  --t-bouton: 18px;

  /* espacement */
  --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;

  /* rayons */
  --r-1: 2px;
  --r-pill: 999px;

  /* les deux courbes : le coup de pédale, la roue libre */
  --pedale: cubic-bezier(.65, 0, .35, 1);
  --roue-libre: cubic-bezier(.22, .8, .26, 1);

  --gouttiere: var(--e-4);
  --bande: var(--e-7);
  --largeur: 1200px;
  --bord: max(var(--gouttiere), calc((100vw - var(--largeur)) / 2));
}
@media (max-width: 479px) {
  :root { --t-1: 52px; --t-2: 32px; --t-chiffre: 40px; }
}
@media (min-width: 768px) {
  :root { --gouttiere: var(--e-6); --bande: var(--e-8); }
}

/* surfaces */
.s-ciel { --fond: var(--ciel); --texte: var(--cambouis); --texte-doux: var(--cambouis); --focus: var(--cambouis); }
.s-crepi { --fond: var(--crepi); --texte: var(--cambouis); --texte-doux: color-mix(in srgb, var(--cambouis) 76%, var(--crepi)); --focus: var(--cambouis); }
.s-cambouis { --fond: var(--cambouis); --texte: var(--crepi); --texte-doux: color-mix(in srgb, var(--crepi) 74%, var(--cambouis)); --focus: var(--crepi); }
.s-ciel, .s-crepi, .s-cambouis {
  position: relative;
  isolation: isolate;
  background-color: var(--fond);
  color: var(--texte);
}
/* les lames du rideau à 0,1 en multiply sur le ciel ; le crépi à 0,3 */
.s-ciel::before, .s-crepi::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-repeat: repeat;
  background-size: 512px;
  pointer-events: none;
}
.s-ciel::before { background-image: url("photos/lames.webp"); opacity: 0.1; mix-blend-mode: multiply; }
.s-crepi::before { background-image: url("photos/crepi.webp"); opacity: 0.3; }
/* les bandes cambouis : la poussière dans un rai de lumière en haut à gauche, le halo de lampe en haut à droite */
.a-calques { overflow: hidden; }
.a-calques::before, .a-calques::after {
  content: "";
  position: absolute;
  top: 0;
  z-index: -1;
  width: min(70%, 900px);
  aspect-ratio: 3 / 2;
  background-repeat: no-repeat;
  background-size: cover;
  mix-blend-mode: screen;
  pointer-events: none;
}
.a-calques::before { left: 0; background-image: url("photos/poussiere.webp"); background-position: top left; opacity: 0.35; }
.a-calques::after { right: 0; background-image: url("photos/halo.webp"); background-position: top right; opacity: 0.3; }

/* base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background-color: var(--cambouis); }
body {
  margin: 0;
  font-family: "Barlow", system-ui, sans-serif;
  font-size: var(--t-texte);
  line-height: 1.45;
  font-weight: 400;
  background-color: var(--crepi);
  color: var(--cambouis);
}
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-1); }
/* 62 caractères par ligne au plus : en Barlow un caractère moyen est plus étroit que le 0, d'où 54ch */
p { max-width: 54ch; }
.cadre { width: 100%; max-width: calc(var(--largeur) + 2 * var(--gouttiere)); margin-inline: auto; padding-inline: var(--gouttiere); }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

h1, h2 { font-family: "Barlow Condensed", "Barlow", sans-serif; font-weight: 700; font-style: italic; text-wrap: balance; }
h1 { font-size: var(--t-1); line-height: 0.95; }
h2 { font-size: var(--t-2); line-height: 1.05; }

/* le filet vert, blanc, rouge de leurs montants de vitrine : 48 × 4 px, trois tiers égaux */
.filet {
  display: block;
  width: 48px;
  height: 4px;
  background: linear-gradient(90deg, var(--vert) 0 33.33%, var(--crepi) 33.33% 66.66%, var(--rouge) 66.66% 100%);
  transform-origin: left center;
}

/* un lien : soulignement de 2 px qui se dessine de gauche à droite au survol */
.lien {
  text-decoration: none;
  font-weight: 600;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  padding-bottom: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .lien { transition: background-size 300ms ease-out; }
  .lien:hover { background-size: 100% 2px; }
}

/* le seul bouton plein */
.bouton {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding: var(--e-4) 28px;
  border-radius: var(--r-pill);
  background-color: var(--rouge);
  color: var(--crepi);
  font-size: var(--t-bouton);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .bouton { transition: background-color 200ms ease-out, transform 200ms ease-out; }
  .bouton:hover { background-color: var(--rouge-survol); transform: translateY(-2px); }
}
.bouton:active { background-color: var(--rouge-appuye); transform: none; }

/* la pastille d'ouverture, son point rouge */
.pastille {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  max-width: none;
  padding: 6px var(--e-3);
  border-radius: var(--r-pill);
  background-color: var(--crepi);
  color: var(--cambouis);
  font-size: var(--t-petit);
  line-height: 1.4;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pastille::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background-color: var(--rouge); }
.pastille.est-ferme::before { background-color: transparent; box-shadow: inset 0 0 0 1.5px var(--cambouis); }
/* les chiffres : une colonne 0 à 9 deux fois, qui fait un tour sous le pouce et se repose sur l'heure */
.compteur { display: inline-flex; }
.chiffre { display: inline-block; height: 1.4em; overflow: hidden; vertical-align: top; }
.chiffre-colonne { display: flex; flex-direction: column; will-change: transform; }
.chiffre-colonne span { display: block; height: 1.4em; line-height: 1.4em; }

/* ---------- en-tête ---------- */
.entete-grille {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding-block: var(--e-3);
}
.logotype { display: inline-grid; gap: 3px; text-decoration: none; width: max-content; }
.logotype-nom { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-style: italic; font-size: var(--t-3); line-height: 1; }
/* le téléphone : au survol il passe en --t-3 souligné, dans une place réservée à cette taille, rien ne bouge autour */
.entete-tel {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: calc(var(--t-3) * 6.3);
  height: calc(var(--t-3) * 1.3);
  font-size: var(--t-petit);
  font-variant-numeric: tabular-nums;
  background-position: 100% 100%;
}
@media (hover: hover) and (pointer: fine) {
  .entete-tel { transition: font-size 200ms ease-out, background-size 300ms ease-out; }
  .entete-tel:hover { font-size: var(--t-3); background-size: 100% 2px; }
}

/* ---------- premier écran ---------- */
/* la section fait un écran et 70 % : son contenu reste épinglé le temps que le rideau monte, puis la page reprend */
.premier { position: relative; height: 170svh; }
.premier-fixe {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
}
.hero-texte { padding-block: var(--e-2) var(--e-5); }
.hero-texte .filet { margin-top: var(--e-3); }
.hero-service { margin-top: var(--e-3); max-width: 34ch; font-weight: 500; }
.hero-action { margin-top: var(--e-4); }
.hero-preuve { margin-top: var(--e-3); font-size: var(--t-petit); line-height: 1.4; font-weight: 600; }
.rideau {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background-color: var(--cambouis);
}
.rideau img, .rideau canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.rideau img { object-fit: cover; object-position: 50% 50%; }
.rideau.a-canvas img { visibility: hidden; }
/* le grain de 6 % sur l'image générée */
.rideau::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("photos/grain.svg");
  background-size: 256px;
  mix-blend-mode: overlay;
  opacity: 0.06;
  pointer-events: none;
}
/* le pied de la séquence se fond dans le crépi de la bande suivante, 120 px */
.rideau-pied {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  height: 120px;
  background: linear-gradient(to bottom, transparent, var(--crepi));
  pointer-events: none;
}
.rideau .pastille { position: absolute; z-index: 2; top: var(--e-3); left: var(--gouttiere); }

@media (min-width: 1024px) {
  .premier-fixe {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .entete { grid-column: 1; grid-row: 1; }
  .entete .cadre { max-width: none; padding-left: var(--bord); padding-right: var(--e-7); }
  .hero-texte { grid-column: 1; grid-row: 2; align-self: center; max-width: none; padding-left: var(--bord); padding-right: var(--e-7); padding-bottom: var(--e-8); }
  .rideau { grid-column: 2; grid-row: 1 / -1; }
  .rideau .pastille { top: var(--e-5); left: var(--e-5); }
}

/* ---------- la bande qui annonce la suite : l'atelier ---------- */
.atelier { padding-block: var(--bande); }
.atelier h2 + .filet { margin-top: var(--e-3); }
.atelier-intro { margin-top: var(--e-4); color: var(--texte-doux); }
.atelier-liste { margin-top: var(--e-6); border-top: 1px solid color-mix(in srgb, var(--cambouis) 20%, var(--crepi)); max-width: 40rem; }
.atelier-liste li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--e-4);
  align-items: baseline;
  padding-block: var(--e-3);
  border-bottom: 1px solid color-mix(in srgb, var(--cambouis) 20%, var(--crepi));
}
.atelier-liste .nom { font-family: "Barlow Condensed", sans-serif; font-size: var(--t-3); line-height: 1.2; font-weight: 600; }
.atelier-liste .prix { font-variant-numeric: tabular-nums; font-weight: 500; }

/* ---------- pied ---------- */
.pied { padding-block: var(--e-7); }
.pied-grille { display: grid; gap: var(--e-4); }
.pied-legal { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); font-size: var(--t-petit); color: var(--texte-doux); }

/* ---------- le bouton épinglé, téléphone seulement, quand le rideau est levé ---------- */
.bouton-epingle {
  position: fixed;
  left: 50%;
  bottom: var(--e-4);
  z-index: 30;
  translate: -50% 0;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease-out, visibility 0s linear 200ms;
}
.bouton-epingle.est-visible { opacity: 1; visibility: visible; transition: opacity 200ms ease-out, visibility 0s; }
@media (max-width: 767px) { .pied { padding-bottom: calc(var(--e-7) + 80px); } }
@media (min-width: 768px) { .bouton-epingle { display: none; } }

/* ---------- le moment d'arrivée ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* le texte part au premier rendu, sans attendre le script ni les images : plein à 850 ms à toutes les largeurs */
  .premier .a-monte { animation: monte 700ms var(--roue-libre) 150ms both; }
  .premier .hero-texte .filet { animation: trace 600ms var(--pedale) both; }
  @keyframes monte { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
  @keyframes trace { from { transform: scaleX(0); } to { transform: scaleX(1); } }

  .js .a-revele { opacity: 0; transform: translateY(28px); transition: opacity 900ms var(--roue-libre), transform 900ms var(--roue-libre); transition-delay: calc(var(--i, 0) * 80ms); }
  .js .a-revele.est-vu { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  /* la façade rideau levé, sans épinglage */
  .premier { height: auto; }
  .premier-fixe { position: relative; height: 100svh; }
  .bouton-epingle, .bouton-epingle.est-visible { transition: none; }
}