/* ==========================================================================
   Faustine Lancel — feuille de style
   Recréée à partir de l'ancien site Carrd (mêmes tailles, couleurs, grilles).
   ========================================================================== */

:root {
  --text: #111111;
  --muted: #707070;
  --accent: #F66333;        /* survol des boutons du menu, icônes */
  --accent-dark: #D64B1E;
  --btn: #999999;           /* boutons "Site de la compagnie" */
  --btn-hover: #555555;
  --panel: #FFFFFF;
  --panel-alt: #F7F7F7;     /* bloc "Archives" */
  --box: #F9F9F9;           /* encadrés clairs */
  --box-dark: #F1F1F1;      /* encadrés distribution */
  --width: 50rem;
}

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

html { font-size: 18pt; }
@media (max-width: 1680px) { html { font-size: 13pt; } }
@media (max-width: 980px)  { html { font-size: 11pt; } }

body {
  margin: 0;
  min-height: 100vh;
  min-width: 320px;
  overflow-x: hidden;
  background: #000;
  color: var(--text);
  font-family: 'Quicksand', sans-serif;
  font-weight: 400;
  line-height: 1;
  -webkit-text-size-adjust: none;
  overflow-wrap: break-word;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
strong { font-weight: 700; }

/* ---------- Vidéo de fond ---------- */
#bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url(../videos/bg.jpg) center / cover no-repeat;
  transform: scale(1); /* calque à part : évite que la vidéo passe devant le contenu */
}
#bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
}

/* ---------- Mise en page ---------- */
#main {
  position: relative;
  z-index: 1;
  width: var(--width);
  max-width: 100%;
  margin: 0 auto;
  padding: 2rem;
}

/* ---------- En-tête ---------- */
#header {
  text-align: center;
  padding-bottom: 1.5rem;
}
#header .logo { display: inline-block; }
#header .logo img { margin: 0 auto; }
.menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.75rem;
}
.btn-nav,
.btn {
  display: inline-flex;
  align-items: center;
  height: 1.625rem;
  padding: 0 0.8125rem 0 calc(0.8125rem + 0.05rem);
  border-radius: 0.375rem;
  font-size: 0.75em;
  letter-spacing: 0.05rem;
  white-space: nowrap;
  text-decoration: none;
  color: #fff;
  transition: background-color 0.25s ease;
}
.btn-nav { background: rgba(255, 255, 255, 0.071); }
.btn-nav:hover { background: var(--accent); }
.btn { background: var(--btn); }
.btn:hover { background: var(--btn-hover); }

/* ---------- Pages ---------- */

.banner { width: 100%; }

.panel { background: var(--panel); }

/* ---------- Grille des projets ---------- */
.grid,
.grid-title {
  display: flex;
  justify-content: center;
  gap: 1.875rem;
  padding: 2rem 6rem;
  background: var(--panel);
}
.grid.alt, .grid-title.alt { background: var(--panel-alt); }
.grid > .card { flex: 1 1 0; min-width: 0; }
.grid.single > .card { flex: 0 1 auto; }

.grid-title h2 {
  margin: 0;
  font-size: 1em;
  font-weight: 700;
  letter-spacing: 0.025rem;
  line-height: 1.125;
  text-align: center;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
}
.card-img {
  display: block;
  width: 10rem;
  max-width: 100%;
  border-radius: 0.75rem;
  overflow: hidden;
}
.card-img.sm { width: 7rem; }
.card-img img { width: 100%; }

.card-title {
  margin: 0;
  font-size: 1em;
  font-weight: 700;
  line-height: 1.125;
  letter-spacing: 0.025rem;
}
.card-title.sm { font-size: 0.875em; }
.card-title a { text-decoration: none; }
.card-company {
  font-size: 0.875em;
  line-height: 1.125;
  letter-spacing: 0.025rem;
  color: var(--muted);
}
.card-year {
  font-size: 0.75em;
  line-height: 1.125;
  color: var(--muted);
}
.card-year {
  padding: 0.25em 0.5em;
  border-radius: 0.25em;
  background: rgba(144, 144, 144, 0.25);
  font-family: 'Lucida Console', 'Courier New', monospace;
  font-size: 0.675em;
}

/* ---------- Pages projet / bio : 2 colonnes ---------- */
.cols {
  display: flex;
  align-items: flex-start;
  gap: 3.5rem;
  padding: 3rem 3.375rem;
  text-align: left;
}
.col-main { flex: 0 0 calc(60% - 1.75rem); min-width: 0; }
.col-side { flex: 0 0 calc(40% - 1.75rem); min-width: 0; }
.col-main > * + *,
.col-side > * + * { margin-top: 1.375rem; }

/* Blocs de texte */
.t-body    { font-size: 1em;     line-height: 1.375; }
.t-body.airy { line-height: 1.625; }
.t-lead    { font-size: 0.875em; line-height: 1.375; }
.t-light   { font-size: 0.875em; line-height: 1.375; font-weight: 300; }
.t-small   { font-size: 0.75em;  line-height: 1.375; }
.t-credits { font-size: 0.75em;  line-height: 1.5; }
[class^="t-"] p + p { margin-top: 1rem; }
[class^="t-"] a { text-decoration: underline; }

.box      { background: var(--box);      padding: 30px; }
.box-dark { background: var(--box-dark); padding: 30px; }

.links { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Images dans les pages */
.img-full    { width: 100%; }
.img-auto    { max-width: 100%; }
.img-rounded { border-radius: 0.5rem; max-width: 100%; }
.img-logo    { width: 6.875rem; }
.img-portrait { border-radius: 0.25rem; }

/* Icônes de contact */
.icons {
  display: flex;
  gap: 0.625rem;
  margin: 1.688rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 1.625em;
}
.icons a { display: block; width: 1em; height: 1em; }
.icons svg { width: 100%; height: 100%; fill: var(--accent); transition: fill 0.25s ease; }
.icons a:hover svg { fill: var(--accent-dark); }

/* ---------- Mobile ---------- */
@media (max-width: 736px) {
  .grid, .grid-title { padding: 2rem; gap: 2.375rem; flex-direction: column; align-items: center; }
  .grid > .card { flex: none; width: 100%; }
  .cols { flex-direction: column; gap: 3.5rem; padding: 3rem 2rem; }
  .col-main, .col-side { flex: none; width: 100%; }
  .btn-nav, .btn { padding-left: calc(0.05rem + 0.8125rem); }
}
@media (max-width: 360px) {
  #main { padding: 1.5rem; }
  .grid, .grid-title { padding: 1.5rem; }
  .cols { padding: 2.25rem 1.5rem; }
  .menu { gap: 0.75rem; }
}