/* ==========================================================================
   K4RK — feuille de style écrite à la main (lot A4)

   Remplace le bundle Quasar (270 235 octets) par les quelques règles que la
   page utilise réellement. CSS natif, un seul fichier, aucun préprocesseur.

   Les fichiers de police arrivent au lot A6 : les blocs @font-face ci-dessous
   déclarent déjà les bons chemins (/assets/fonts/, .woff2).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Polices
   -------------------------------------------------------------------------- */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/inter-900.woff2") format("woff2");
}

@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/roboto-400.woff2") format("woff2");
}

@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/roboto-700.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   Jetons de design
   Le bloc :root reprend les variables de couleur du site en ligne (sa
   variable de marque y vaut #eb1c25) et l'échelle d'espacement.
   -------------------------------------------------------------------------- */
:root {
  --brand: #eb1c25;
  --text: #000;
  --text-muted: #757575;
  --surface: #fff;
  --separator: rgba(0,0,0,.12);

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 48px;

  --header-height: 82px; /* logo 50px + 2 x 16px */
  --page-width: 1200px;
}

/* --------------------------------------------------------------------------
   Base et typographie
   Les valeurs de titres sont celles de la feuille Quasar du site (h1..h6).
   -------------------------------------------------------------------------- */
*,
*::before,
*:after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

body {
  font-family: Roboto, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.5;
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 { font-size: 6rem;     font-weight: 300; line-height: 6rem;     letter-spacing: -.01562em; }
h2 { font-size: 3.75rem;  font-weight: 300; line-height: 3.75rem;  letter-spacing: -.00833em; }
h3 { font-size: 3rem;     font-weight: 400; line-height: 3.125rem; letter-spacing: normal; }
h4 { font-size: 2.125rem; font-weight: 400; line-height: 2.5rem;   letter-spacing: .00735em; }
h5 { font-size: 1.5rem;   font-weight: 400; line-height: 2rem;     letter-spacing: normal; }
h6 { font-size: 1.25rem;  font-weight: 500; line-height: 2rem;     letter-spacing: .0125em; }

p {
  margin: 0 0 16px;
}

img {
  max-width: 100%;
}

button {
  font: inherit;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Défilement fluide
   Règles fournies par Lenis 1.3.27 (adaptées de dist/lenis.css).
   -------------------------------------------------------------------------- */
html.lenis,
html.lenis body {
  height: auto;
}

/* Réserve en permanence la gouttière de la barre de défilement : quand
   Lenis est arrêté (fenêtre de détail ouverte), `overflow: clip` supprime la
   barre sans déplacer la page de sa largeur. */
html.lenis {
  scrollbar-gutter: stable;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

/* Lenis n'est pas chargé en mode mouvement réduit: le CSS verrouille alors le
   fond de page lui-même quand une fenêtre de détail est ouverte. */
body:has(dialog[open]) {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   En-tête : bandeau fixe en haut, fond blanc
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 100;
  padding: 0 12px; /* même retrait que la barre d'outils du site */
  background: var(--surface);
}

.site-logo {
  display: block;
  width: 100%;
  height: 50px;
  margin: 16px 0;
  object-fit: contain;
  object-position: center;
}

/* --------------------------------------------------------------------------
   Conteneur de page
   -------------------------------------------------------------------------- */
.site-main {
  max-width: var(--page-width);
  margin: 0 auto;
  /* Espacement intérieur : empêche l'effondrement de la marge haute du <h1>
     (0,67 em) tout en gardant le contenu sous le bandeau fixe. */
  padding: var(--header-height) 24px 0;
}

/* --------------------------------------------------------------------------
   Titres de section
   -------------------------------------------------------------------------- */
.section-title {
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(0,0,0,.12);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero-title--desktop {
  display: none;
  font-size: 6rem;
  font-weight: 300;
  line-height: 6rem;
  letter-spacing: -.01562em;
}

.hero-title--mobile {
  font-size: 3.75rem;
  font-weight: 300;
  line-height: 3.75rem;
  letter-spacing: -.00833em;
  text-align: center;
  margin-bottom: 48px;
}

.hero-paragraph {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 400;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Compétences
   2 groupes par ligne, 3 dès 1024px, 4 dès 1440px.
   A3 pose .vertical-section sur la cellule de grille alors que le site en
   ligne la pose sur le libellé : on neutralise la règle sur la cellule (avec
   une spécificité supérieure) et on la reporte sur le libellé.
   -------------------------------------------------------------------------- */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

/* Spécificité (0,2,0) : l'emporte sur .vertical-section quelle que soit
   l'ordre, pour neutraliser la règle du site sur la cellule de grille. */
.skills-grid > .skill-group {
  position: relative;
  display: block;
  font-size: inherit;
  left: auto;
  top: auto;
  transform: none;
  writing-mode: horizontal-tb;
  text-transform: none;
  background: transparent;
  padding: 0;
  margin-bottom: 16px;
}

.skill-group-label {
  contain: layout;
  display: flex;
  font-size: 14px;
  left: 3px;
  position: absolute;
  text-transform: uppercase;
  top: 0;
  transform: rotate(-180deg);
  writing-mode: tb-rl;
  background: white;
  padding: 10px 0;
}

.skill-list {
  list-style: none;
  margin: 0 16px;
  padding: 0;
  border-left: 1px solid black;
}

.skill-item {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 8px 16px;
}

/* --------------------------------------------------------------------------
   Projets
   -------------------------------------------------------------------------- */
.projects-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.project-card {
  position: relative;
  display: grid;
  grid-template-columns: 41.6667% 1fr;
  width: 100%;
  margin: 0;
  padding: 0;
  color: inherit;
  text-align: left;
  background: var(--surface);
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
}

.project-thumbnail {
  display: block;
  height: 250px; /* vignette 250 px sous 1024 px (site d'origine : lt.md) */
  grid-column: 1;
  grid-row: 1 / span 2;
}

.project-thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-card-title {
  display: block;
  grid-column: 2;
  padding: 16px 16px 0;
  margin-bottom: 16px;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 900;
}

.project-card-description {
  display: block;
  grid-column: 2;
  padding: 0 16px 16px;
}

/* --------------------------------------------------------------------------
   Valeurs — même grille que les projets
   -------------------------------------------------------------------------- */
.values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.value-title {
  margin-bottom: 16px;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 900;
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact {
  margin-bottom: 48px;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
}

.contact-paragraph {
  margin: 48px 0;
  font-size: 1.5rem;
  line-height: 2rem;
  color: var(--text-muted);
}

.contact-action {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Bouton : contour de la couleur de marque, texte en majuscules. */
.contact-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.572em;
  padding: 4px 16px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.715em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--brand);
  background: transparent;
  border-radius: 3px;
  border: 1px solid currentColor;
}

/* Infobulle : adresse, fond de la couleur de marque, texte blanc. */
.contact-button[title]:after {
  content: attr(title);
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 10;
  padding: 4px 8px;
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
  white-space: nowrap;
  color: #fff;
  background: var(--brand);
  border-radius: 4px;
  transform: translate(-50%, 8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s;
  pointer-events: none;
}

.contact-button[title]:hover:after,
.contact-button[title]:focus-visible:after {
  opacity: 1;
  visibility: visible;
}

/* --------------------------------------------------------------------------
   Fenêtre de détail
   -------------------------------------------------------------------------- */
.project-dialog {
  display: none;
  padding: 48px;
  background: var(--surface);
  border: none;
  overflow: auto;
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity .28s ease,
    transform .28s cubic-bezier(.2, .7, .3, 1),
    display .28s allow-discrete,
    overlay .28s allow-discrete;
}

.project-dialog[open] {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  opacity: 1;
  transform: none;
}

@starting-style {
  .project-dialog[open] {
    opacity: 0;
    transform: translateY(16px);
  }
}

.project-dialog::backdrop {
  background-color: rgba(0, 0, 0, 0);
  transition:
    background-color .28s ease,
    display .28s allow-discrete,
    overlay .28s allow-discrete;
}

.project-dialog[open]::backdrop {
  background-color: rgba(0, 0, 0, .4);
}

@starting-style {
  .project-dialog[open]::backdrop {
    background-color: rgba(0, 0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-dialog,
  .project-dialog::backdrop {
    transition: none;
  }
}

.project-dialog-close-form {
  position: absolute;
  top: 48px;
  right: 48px;
  margin: 0;
}

.project-dialog-close {
  padding: 0;
  font-size: 24px;
  line-height: 1;
  color: inherit;
  background: transparent;
  border: none;
  cursor: pointer;
}

.project-dialog-title {
  margin-bottom: 24px;
  font-size: 2.125rem;
  font-weight: 400;
  line-height: 2.5rem;
  letter-spacing: .00735em;
}

.project-gallery-image {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 16px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Points de rupture
   -------------------------------------------------------------------------- */
@media (min-width: 600px) {
  /* le titre supérieur remplace la variante mobile */
  .hero-title--desktop { display: block; }
  .hero-title--mobile { display: none; }

  /* titre de la fenêtre de détail */
  .project-dialog-title {
    font-size: 3.75rem;
    font-weight: 300;
    line-height: 3.75rem;
    letter-spacing: -.00833em;
  }
}

@media (min-width: 1024px) {
  /* conteneur de page : on ne touche qu'aux retraits horizontaux pour ne pas
     écraser le padding-top de 82 px. */
  .site-main { padding-right: 48px; padding-left: 48px; }

  /* grilles */
  .skills-grid { grid-template-columns: repeat(3, 1fr); }
  .projects-grid { grid-template-columns: repeat(3, 1fr); }

  /* vignette : hauteur automatique à partir de 1024 px (site d'origine) */
  .project-thumbnail { height: auto; }
  .values-grid { grid-template-columns: repeat(3, 1fr); }
  .contact-grid { grid-template-columns: 1fr 1fr; }

  /* fenêtre de détail : description 66,67 % / galerie 33,33 % */
  .project-dialog[open] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    column-gap: 24px;
    align-content: start;
  }

  .project-dialog-title { grid-column: 1 / -1; }
  .project-dialog-description { grid-column: 1; }
  .project-gallery { grid-column: 2; }
}

@media (min-width: 1440px) {
  .skills-grid { grid-template-columns: repeat(4, 1fr); }
}

/* --------------------------------------------------------------------------
   Règles propres au site — reprises telles quelles.
   Comme dans le build en ligne, ce bloc personnalisé est placé après les
   règles de composants : .inter-bold (900) l'emporte donc sur les graisses
   de base des titres.
   -------------------------------------------------------------------------- */
.inter-bold {
  font-family: Inter, sans-serif;
  font-weight: 900;
}

.outline {
  color: #fff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.vertical-section {
  contain: layout;
  display: flex;
  font-size: 14px;
  left: 3px;
  position: absolute;
  text-transform: uppercase;
  top: 0;
  transform: rotate(-180deg);
  writing-mode: tb-rl;
  background: white;
  padding: 10px 0;
}

/* --------------------------------------------------------------------------
   Pages secondaires
   -------------------------------------------------------------------------- */
.legal {
  max-width: 68ch;
  line-height: 1.7;
}

.legal h1,
.legal h2,
.legal h3,
.legal h4,
.legal h5,
.legal h6 {
  margin: var(--space-xl) 0 var(--space-md);
}

.legal ul,
.legal ol {
  margin: 0 0 var(--space-lg);
  padding-left: var(--space-lg);
}

.legal li + li {
  margin-top: var(--space-sm);
}

.legal dl {
  margin: 0 0 var(--space-lg);
}

.legal dd {
  margin: var(--space-xs) 0 var(--space-md);
}

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */
.site-footer {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-lg) var(--space-xl);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
  text-align: center;
}

.site-footer-copyright {
  margin-bottom: var(--space-sm);
}

.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer-links li {
  display: flex;
  align-items: center;
}

.site-footer-links li + li::before {
  content: "·";
  margin: 0 var(--space-sm);
}

.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--text-muted);
}

.site-footer a:hover {
  text-decoration: underline;
}

.site-footer a:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Crédit photo
   -------------------------------------------------------------------------- */
.project-credit {
  margin-top: var(--space-lg);
  font-size: .875rem;
  color: var(--text-muted);
}

.project-credit a {
  color: inherit;
}