/* ==========================================================================
   Police hébergée sur le site (pas d'appel à Google Fonts, conforme RGPD)
   Bricolage Grotesque, police variable sous licence SIL Open Font License
   ========================================================================== */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/bricolage-grotesque-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Tokens (issus de la maquette Figma)
   ========================================================================== */
:root {
  --color-primary: #5a3bcc;
  --color-primary-hover: #4a2fb0;
  --color-ink: #110833;
  --color-muted: #4f4e55;
  --color-btn-secondary-bg: #f2f2f3;
  --color-btn-secondary-border: #dfdfdf;
  --color-btn-secondary-text: #434343;
  --color-border: #ddd;
  --color-bg: #fff;

  --font: "Bricolage Grotesque", system-ui, sans-serif;

  --container: 1280px;
  --gutter: 116px;
  --radius: 10px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  /* Pied de page toujours en bas de l'écran, même sur une page courte */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

main {
  flex: 1 0 auto;
}

h1, h2, h3, h4, p {
  margin: 0;
}

img {
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ==========================================================================
   Boutons
   ========================================================================== */

.btns {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease;
}

.btn--primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.btn--primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.btn--secondary {
  background: var(--color-btn-secondary-bg);
  border-color: var(--color-btn-secondary-border);
  color: var(--color-btn-secondary-text);
}

.btn--secondary:hover {
  background: #e7e7e9;
}

.btn:focus-visible,
.contact-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding-block: 32px;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-header .btns {
  flex-wrap: nowrap;
}

.brand {
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--color-muted);
}

.brand__name {
  font-weight: 500;
}

.brand strong {
  font-weight: 700;
}

.brand--light {
  color: #fff;
}

.brand__first {
  text-transform: none;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  padding-top: 64px;
}

.hero__text {
  max-width: 718px;
  font-size: 24px;
  line-height: 1.5;
}

.hero__text strong {
  font-weight: 600;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;
}

/* ==========================================================================
   Projets
   ========================================================================== */
.projects {
  padding-top: 64px;
  padding-bottom: 64px;
  scroll-margin-top: 110px; /* hauteur du header fixe */
}

.projects__inner {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.project-group {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.project-group__title {
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-muted);
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.project {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.project__media {
  position: relative;
  overflow: hidden;
  /* Ratio de la maquette : 410.67 × 342.18 */
  aspect-ratio: 410.667 / 342.18;
  background: var(--bg, #f2f2f3);
}

/* Carte cliquable : lien vers l'étude de cas */
a.project .project__media > * {
  transition: scale .4s ease;
}

a.project:hover .project__media > * {
  scale: 1.03;
}

a.project .project__title {
  transition: color .2s ease;
}

a.project:hover .project__title {
  color: var(--color-primary);
}

a.project:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}

.project__info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.project__title {
  font-size: 20px;
  font-weight: 600;
  line-height: normal;
}

.project__desc {
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-muted);
}

/* ==========================================================================
   Étude de cas
   ========================================================================== */
.case-hero {
  padding-block: 64px;
}

.case-hero__inner {
  display: grid;
  grid-template-columns: 616fr 628fr;
  align-items: center;
  gap: 36px;
}

.case-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}

.case-hero__heading {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.case-hero__title-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.back-link {
  position: relative;
  display: block;
  border-radius: var(--radius);
  transition: translate .2s ease;
}

/* Copie violette de la flèche, révélée au survol */
.back-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-primary);
  /* SVG intégré : un masque chargé depuis un fichier est bloqué en local (file://) */
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'%3E%3Cpath d='M10.8333 26L10.0673 25.234L9.30127 26L10.0673 26.766L10.8333 26ZM36.8333 27.0833C37.4316 27.0833 37.9167 26.5983 37.9167 26C37.9167 25.4017 37.4316 24.9167 36.8333 24.9167V26V27.0833ZM19.5 17.3333L18.734 16.5673L10.0673 25.234L10.8333 26L11.5994 26.766L20.266 18.0994L19.5 17.3333ZM10.8333 26L10.0673 26.766L18.734 35.4327L19.5 34.6667L20.266 33.9006L11.5994 25.234L10.8333 26ZM10.8333 26V27.0833H36.8333V26V24.9167H10.8333V26Z'/%3E%3C/svg%3E");
  -webkit-mask: var(--arrow) center / contain no-repeat;
  mask: var(--arrow) center / contain no-repeat;
  opacity: 0;
  transition: opacity .2s ease;
}

.back-link:hover {
  translate: -4px 0;
}

.back-link img {
  transition: opacity .2s ease;
}

.back-link:hover img {
  opacity: 0;
}

.back-link:hover::after {
  opacity: 1;
}

.back-link:focus-visible {
  outline: 2px solid var(--color-primary);
}

.case-hero__title {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.3;
}

.case-hero__lead {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tag {
  padding: 8px 10px;
  border: 1px solid #515151;
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 600;
  color: #515151;
}

/* Visuel du hero, au ratio 628 × 494 */
.case-hero__media {
  aspect-ratio: 628 / 494;
}

/* --- Infos clés --- */
.case-meta {
  padding-block: 64px;
}

.case-meta__list {
  display: flex;
  /* 64px de part et d'autre du séparateur */
  gap: 129px;
  margin: 0;
}

.case-meta__item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.case-meta__item + .case-meta__item {
  position: relative;
}

.case-meta__item + .case-meta__item::before {
  content: "";
  position: absolute;
  left: -65px;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--color-border);
}

.case-meta dt,
.case-section__title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  color: #515151;
}

.case-meta dd {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
}

/* --- Texte --- */
.case-content {
  padding-block: 48px;
}

.case-content__inner {
  display: flex;
  flex-direction: column;
  gap: 72px;
  max-width: 768px;
  margin-inline: auto;
}

.case-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.case-section__body {
  font-size: 18px;
  line-height: 1.5;
}

.case-section__body > * {
  margin: 0;
}

.case-section__body > * + * {
  margin-top: 1.5em;
}

.case-section__body > .lead-in + ul,
.case-section__body > .lead-in + ol {
  margin-top: 0;
}

.case-section__body ul,
.case-section__body ol {
  padding-left: 27px;
}

/* Étapes numérotées (Méthodes) : une ligne d'espace entre chaque étape */
.case-section__body ol > li + li {
  margin-top: 1.5em;
}

.case-section__body strong {
  font-weight: 700;
}

.placeholder {
  color: #8a8994;
  font-style: italic;
}

/* --- Galerie --- */
.case-gallery {
  padding-block: 72px;
}

.case-gallery__inner {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.case-gallery img {
  width: 100%;
  height: auto;
}

.case-gallery__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

/* --- Zoom des images (lightbox) --- */
.case-gallery img,
.case-hero__media img {
  cursor: zoom-in;
}

.lightbox {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 24px 0;
  border: 0;
  background: transparent;
  overflow-y: auto;
}

.lightbox::backdrop {
  background: rgba(30, 30, 30, 0.85);
}

.lightbox[open] {
  display: flex;
  animation: lightbox-in 0.2s ease;
}

/* L'image occupe tout l'espace disponible en gardant ses proportions
   (les visuels sont exportés en 2x, ils restent nets en grand) */
.lightbox__img {
  width: 94vw;
  height: 90vh;
  margin: auto;
  object-fit: contain;
  cursor: zoom-out;
}

.lightbox__btn {
  position: fixed;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font: inherit;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}

.lightbox__btn:hover,
.lightbox__btn:focus-visible {
  background: rgba(255, 255, 255, 0.24);
}

.lightbox__btn[hidden] {
  display: none;
}

.lightbox__close { top: 16px; right: 16px; }
.lightbox__prev  { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__next  { right: 16px; top: 50%; transform: translateY(-50%); }

@keyframes lightbox-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ==========================================================================
   V2 (maquettes Figma d'octobre)
   ========================================================================== */
.site-header { padding-block: 24px; }
.brand { display: inline-flex; align-items: center; gap: 26px; }
.brand__avatar { width: 60px; height: 60px; border-radius: 50%; }

.projects__inner { gap: 40px; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; }
.filter {
  padding: 8px 10px; border: 0; border-radius: var(--radius);
  background: #f2f2f3; color: var(--color-ink);
  font: inherit; font-size: 16px; font-weight: 500; cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.filter:hover { background: #e7e7e9; }
.filter[aria-pressed="true"] { background: var(--color-primary); color: #fff; }
.filter:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.project-grid { gap: 24px; }
.project { gap: 16px; }
.project[hidden] { display: none; }
.project__media img { width: 100%; height: 100%; object-fit: cover; }
.project__info { flex-direction: row; align-items: center; gap: 14px; }

/* Flèche noire à droite de la ligne « Nom du projet + catégorie » */
.project__arrow {
  flex-shrink: 0;
  margin-left: auto;
  color: #000;
  transition: translate .2s ease, color .2s ease;
}

a.project:hover .project__arrow,
a.project:focus-visible .project__arrow {
  translate: 4px 0;
  color: var(--color-primary);
}
.tag--sm { padding: 6px 8px; font-size: 14px; }

.case-hero__media { position: relative; overflow: hidden; background: var(--bg, #f2f2f3); }
.case-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.case-content__inner { gap: 40px; }
.case-figure { margin: 0; }
.case-figure img { width: 100%; height: auto; cursor: zoom-in; }

/* ==========================================================================
   Accessibilité
   ========================================================================== */

/* Texte lu par les lecteurs d'écran mais invisible à l'écran */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Lien « Aller au contenu » : apparaît uniquement à la navigation clavier */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
  outline: 2px solid var(--color-ink);
  outline-offset: 2px;
}

/* Animations coupées pour les personnes qui ont activé « réduire les animations » */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Deux visuels côte à côte, chacun cliquable séparément */
.case-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap, 20px);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--color-ink);
  color: #fff;
  padding-block: 24px;
}

.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.contact-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}

.contact-link:hover {
  text-decoration: underline;
}

.not-found {
  padding-block: 120px;
}

.not-found .hero__text {
  margin-top: 16px;
}

/* Liens dans les textes (mentions légales…) */
.case-section__body a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1200px) {
  :root {
    --gutter: 48px;
  }
}

/* Header : boutons empilés, nom et métier sur deux lignes, photo agrandie */
@media (max-width: 820px) {
  .site-header .btns {
    flex-direction: column;
    gap: 10px;
  }

  .site-header .brand {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-header .brand__text {
    display: flex;
    flex-direction: column;
  }

  .site-header .brand__sep {
    display: none;
  }

  .site-header .brand__avatar {
    width: 80px;
    height: 80px;
  }

  .projects {
    scroll-margin-top: 210px; /* header plus haut */
  }

  .brand {
    gap: 10px;
  }
}

@media (max-width: 900px) {
  .project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__inner {
    flex-wrap: wrap;
    column-gap: 32px;
  }

  .site-footer__inner .brand {
    flex-basis: 100%;
  }

  .case-hero__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .case-meta__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 64px;
  }

  .case-meta__item + .case-meta__item::before {
    display: none;
  }
}

@media (max-width: 640px) {
  :root {
    --gutter: 16px;
  }

  .site-header {
    padding-block: 20px;
  }

  .brand {
    gap: 12px;
    font-size: 14px;
  }

  .site-header .brand__avatar {
    width: 64px;
    height: 64px;
  }

  .hero {
    padding-top: 40px;
  }

  .projects {
  padding-top: 40px;
  padding-bottom: 40px;
}

  .hero__text {
    font-size: 20px;
  }

  .projects__inner {
    gap: 48px;
  }

  .project-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Doubles visuels : l'un sous l'autre sur mobile */
  .case-pair {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .site-footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .case-hero,
  .case-meta,
  .case-content,
  .case-gallery {
    padding-block: 40px;
  }

  .case-hero__title {
    font-size: 36px;
  }

  .case-meta__list {
    gap: 24px;
  }

  .case-meta dt,
  .case-section__title {
    font-size: 20px;
  }

  .case-section__body {
    font-size: 16px;
  }

  .case-content__inner {
    gap: 48px;
  }

  .case-gallery__inner {
    gap: 16px;
  }

  .case-gallery__row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Petits mobiles : header compacté pour éviter tout débordement */
@media (max-width: 420px) {
  .site-header .brand {
    min-width: 0;
  }

  .site-header .brand__avatar {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
  }

  .site-header .btn {
    padding: 10px 12px;
    font-size: 14px;
  }
}