/* louislemauff.photos
   Reprise de la maquette Claude Design « Portfolio photographique épuré ».
   Toutes les valeurs de l'identité sont dans le bloc :root ci-dessous. */

:root {
  --fond: #fbfbfa;
  --encre: #1a1a1a;
  --gris: #6f6f6f;
  --gris-clair: #8f8f8f;
  --ombre: 0 1px 4px rgba(0, 0, 0, 0.08);

  --texte: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --etiquette: 13px;
  --lettrage: 0.18em;

  --hauteur-couverture: 64vh;   /* hauteur des couvertures sur l'accueil */
  --ecart-rail: 72px;           /* espace entre deux couvertures */
  --colonne: 1080px;            /* largeur de lecture des pages collection */
  --marge: 48px;
}

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

html {
  background: var(--fond);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--texte);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--gris-clair); }

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

:focus-visible {
  outline: 2px solid var(--encre);
  outline-offset: 4px;
}

/* le titre est déjà gravé dans l'image de couverture : on le garde dans la
   page pour Google et les lecteurs d'écran, sans le dessiner deux fois */
.titre-cache, .titre-collection {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------------- en-tête */

.entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 32px var(--marge);
  flex: 0 0 auto;
}

.marque img { height: 34px; width: auto; }
.marque:hover { opacity: 0.7; }

.signature {
  margin: 0;
  font-size: var(--etiquette);
  letter-spacing: var(--lettrage);
  text-transform: uppercase;
  color: var(--gris);
}

/* ------------------------------------------------------------- accueil */

.accueil {
  flex: 1;
  display: flex;
  align-items: center;
  width: 100%;
  overflow: hidden;
  padding-bottom: 40px;
}

.rail {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 24px var(--marge);
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  overscroll-behavior-x: contain;
}

.rail::-webkit-scrollbar { display: none; }
.rail.attrape { cursor: grabbing; }

.piste {
  display: flex;
  align-items: center;
  gap: var(--ecart-rail);
  margin: 0;
  padding: 0;
  list-style: none;
  width: max-content;
}

.carte { flex: 0 0 auto; }

.lien-collection img {
  height: var(--hauteur-couverture);
  width: auto;
  box-shadow: var(--ombre);
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity 0.25s ease;
}

.lien-collection:hover img { opacity: 0.88; }

/* ---------------------------------------------------- page collection */

.collection {
  flex: 1;
  width: min(var(--colonne) + 2 * var(--marge), 100%);
  margin: 0 auto;
  padding: 8px var(--marge) 120px;
}

.retour {
  margin: 0;
  font-size: var(--etiquette);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
}

.retour a:hover { color: var(--encre); }

.couverture {
  margin: 64px auto 0;
  width: min(620px, 100%);
}

.couverture img { width: 100%; box-shadow: var(--ombre); }

.suite {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 120px;
  margin-top: 120px;
}

.photo { margin: 0; width: 100%; }
.photo img { width: 100%; box-shadow: var(--ombre); }

.vide {
  font-size: var(--etiquette);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
}

/* passage d'une collection à l'autre */
.voisines {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  margin-top: 120px;
  padding-top: 32px;
  border-top: 1px solid rgba(26, 26, 26, 0.1);
  font-size: var(--etiquette);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
}

.voisine:hover { color: var(--encre); }
.voisine .fleche { color: var(--gris-clair); }

/* ---------------------------------------------------------- introuvable */

.introuvable {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  padding: 0 var(--marge) 120px;
}

.introuvable h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 400;
}

.introuvable p {
  margin: 0;
  font-size: var(--etiquette);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
}

/* ----------------------------------------------------------------- pied */

.pied {
  flex: 0 0 auto;
  padding: 0 var(--marge) 24px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
}

.pied p { margin: 0; }
.accueil ~ .pied { display: none; }   /* l'accueil tient dans l'écran */

/* ------------------------------------------------- écrans intermédiaires */

@media (max-width: 1100px) {
  :root { --marge: 32px; --ecart-rail: 48px; --hauteur-couverture: 58vh; }
}

/* ------------------------------------------------------------- téléphone
   Le rail horizontal qui défile tout seul n'a pas de sens au doigt :
   sur téléphone les couvertures s'empilent verticalement. */

@media (max-width: 780px) {
  :root { --marge: 20px; }

  .entete { padding: 20px var(--marge); gap: 16px; }
  .marque img { height: 26px; }
  .signature { font-size: 11px; letter-spacing: 0.12em; }

  .accueil {
    display: block;
    overflow: visible;
    padding-bottom: 0;
  }

  .rail {
    overflow: visible;
    padding: 8px var(--marge) 64px;
    cursor: auto;
  }

  .piste {
    flex-direction: column;
    align-items: center;
    gap: 56px;
    width: auto;
  }

  .carte { width: 100%; max-width: 460px; }

  .lien-collection img {
    height: auto;
    width: 100%;
  }

  .accueil ~ .pied { display: block; }

  .couverture { margin-top: 40px; }
  .suite { gap: 64px; margin-top: 64px; }
  .voisines { margin-top: 72px; flex-direction: column; gap: 16px; }
  .collection { padding-bottom: 72px; }
}

/* --------------------------------------------------- téléphones étroits
   À 320 px de large, le logo et la signature se touchent : on resserre
   la signature pour garder de l'air entre les deux. */

@media (max-width: 400px) {
  .marque img { height: 22px; }
  .signature { font-size: 10px; letter-spacing: 0.08em; }
}

/* ------------------------------------------------------------- confort */

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  .entete, .voisines, .retour, .pied { display: none; }
  .photo img, .couverture img { box-shadow: none; }
}