/* ===============================
   TYPOGRAPHIE — ORKNEY
================================ */
@font-face {
  font-family: "Orkney";
  src: url("fonts/Orkney Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Orkney";
  src: url("fonts/Orkney Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Orkney";
  src: url("fonts/Orkney Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ===============================
   VARIABLES
================================ */
:root {
  --yellow: #ffe06d;
  --white: #ffffff;
  --black: #000000;

  --site-width: 1300px;      /* largeur globale des contenus */
  --about-width: 1280px;     /* largeur du cadre "à propos" */
  --about-padding: 26px;     /* padding interne du cadre "à propos" */
  --project-width: 1100px; /* ajuste entre 1080–1180 selon ton œil */
}

/* ===============================
   RESET
================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "Orkney", sans-serif;
  color: var(--white);
  background: rgba(30, 30, 30, 1);	
}

html, body {
  height: 100%;
}


/* ===============================
   HEADER (validé)
================================ */
.site-header {
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(20, 20, 20, 1);
  z-index: 10;
}

.header-inner {
  width: 100%;
  padding: 6px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (min-width: 1600px) {
  .header-inner { padding: 6px 40px; }
}

.logo { height: 45px; display: block; }
.logo-link { display: inline-flex; }

/* NAV + séparateurs + hover cadre */
.main-nav { display: flex; align-items: center; }

.main-nav a {
  position: relative;
  margin-left: 28px;
  padding: 6px 12px;
  text-decoration: none;
  color: var(--white);
  font-weight: 500;
  transition: color 180ms ease;
}

/* séparateur vertical (sauf premier) */
.main-nav a::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.35);
}
.main-nav a:first-child::before { display: none; }

/* hover cadre (coins) */
.main-nav a::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 200ms ease;
  background:
    linear-gradient(var(--yellow), var(--yellow)) left top / 15px 1px no-repeat,
    linear-gradient(var(--yellow), var(--yellow)) left top / 1px 15px no-repeat,
    linear-gradient(var(--yellow), var(--yellow)) right bottom / 15px 1px no-repeat,
    linear-gradient(var(--yellow), var(--yellow)) right bottom / 1px 15px no-repeat;
}
.main-nav a:hover { color: var(--yellow); }
.main-nav a:hover::after { opacity: 1; }


/* ===============================
   HEADER — patch mobile uniquement
================================ */

/* Caché sur desktop */
.nav-toggle,
.mobile-nav { display: none; }

@media (max-width: 900px) {

  /* On cache la nav desktop, on garde le fond/structure du header validé */
  .main-nav { display: none; }

  /* Optionnel : cacher le logo sur mobile (comme tu voulais au départ) */
/*   .logo-link { display: none; } */

  .header-inner {
    justify-content: flex-end; /* si logo caché, hamburger à droite */
    gap: 0;
	padding: 22px 24px;
  }

  .nav-toggle{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 32px;
    height: 25px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
  }

  .nav-toggle span{
    display: block;
    width: 100%;
    height: 2px;
    background: var(--white);
    transition: transform 300ms ease, opacity 200ms ease, background 200ms ease;
  }

  .nav-toggle:hover span { background: var(--yellow); }

  .site-header.is-open .nav-toggle span:nth-child(1){
    transform: translateY(8px) rotate(45deg);
  }
  .site-header.is-open .nav-toggle span:nth-child(2){
    opacity: 0;
  }
  .site-header.is-open .nav-toggle span:nth-child(3){
    transform: translateY(-8px) rotate(-45deg);
  }

  .mobile-nav{
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: rgba(20, 20, 20, 1);
    border-top: 1px solid rgba(255,255,255,0.12);
    padding: 10px 24px 14px;
    display: none;
  }

  .site-header.is-open .mobile-nav{ display: block; }

  .mobile-nav a{
    display: block;
    padding: 12px 6px;
    text-decoration: none;
    color: var(--white);
    font-weight: 500;         /* cohérent avec ton header desktop */
    letter-spacing: 0.06em;
  }

  .mobile-nav a:hover{ color: var(--yellow); }
}



/* ===============================
   HERO VIDEO
================================ */
.hero {
  height: 100vh;
  overflow: hidden;
}
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===============================
   SECTIONS (gabarit global)
================================ */
.section {
  position: relative;
  padding: 150px 20px 40px;
}


.section-content {
  max-width: var(--site-width);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* ===============================
   A PROPOS (maquette)
================================ */
/* Titre : style typo inchangé */
.section-title {
  display: inline-flex;
  gap: 10px;
  align-items: baseline;
  font-size: 30px;
  letter-spacing: 0.1em;
}

.section-title__pre { color: var(--white); font-weight: 300; }
.section-title__main { color: var(--yellow); font-weight: 700; }

/* Accrochage AU CADRE BLANC (coin haut-gauche) */
.section-title--frame {
  position: absolute;
  line-height: 0;
  /* on vise le trait horizontal du cadre (tout en haut) */
  top: 0;
  left: 0;

  /* on se place au coin haut-gauche du cadre */
  transform: translate(var(--about-padding), 0);

  /* centrage vertical sur le trait du cadre (1px) */


  /* texte après le trait */
  padding-left: 60px; /* 60px + 14px */

  margin-bottom: 0;
  z-index: 3;

  justify-content: flex-start;
  pointer-events: none;
}



/* Cadre blanc (coins) */
.about-frame {
  position: relative;            /* IMPORTANT pour accrocher le titre */
  max-width: var(--about-width);
  margin: 0 auto;
  padding: var(--about-padding);
}

.about-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(var(--white), var(--white)) left top / 60px 1px no-repeat,
    linear-gradient(var(--white), var(--white)) left top / 1px 60px no-repeat,
    linear-gradient(var(--white), var(--white)) right bottom / 60px 1px no-repeat,
    linear-gradient(var(--white), var(--white)) right bottom / 1px 60px no-repeat;
}

/* Image panoramique */
.about-card { position: relative; overflow: hidden; }
.about-image {
  width: 100%;
  height: 320px;       /* bandeau panoramique (ajuste si besoin) */
  object-fit: cover;
  display: block;
}

/* Image "à propos" cliquable */
.about-image-link {
  display: block;
}

.about-image-link img {
  transition: transform 400ms ease, filter 400ms ease;
}

.about-image-link:hover img {
  transform: scale(1.03);
  filter: brightness(1.05);
}


/* Texte overlay */
.about-text {
  position: absolute;
  left: 56px;
  top: 50%;
  transform: translateY(-45%);
  max-width: 440px;

  display: flex;
  flex-direction: column;
  align-items: stretch;
  color: var(--white);
}

/* Texte medium, 16px, justifié, dernière ligne à gauche */
.about-text p {
  font-weight: 300;
  font-size: 17px;
  line-height: 1.3;
  text-align: justify;
  text-align-last: left;
  margin-bottom: 13px;
	letter-spacing: 0.03em;
}

/* CTA aligné à droite du paragraphe, cadre interne (sans influencer l’alignement) */
.cta-frame {
  align-self: flex-end;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--white);
  text-decoration: none;

  padding: 6px 14px;      /* espace réservé */
  position: relative;
  box-sizing: border-box;
  transition: color 180ms ease;
}

.cta-frame:hover { color: var(--yellow); }

.cta-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
  background:
    linear-gradient(var(--yellow), var(--yellow)) left top / 15px 1px no-repeat,
    linear-gradient(var(--yellow), var(--yellow)) left top / 1px 15px no-repeat,
    linear-gradient(var(--yellow), var(--yellow)) right bottom / 15px 1px no-repeat,
    linear-gradient(var(--yellow), var(--yellow)) right bottom / 1px 15px no-repeat;
}
.cta-frame:hover::after { opacity: 1; }

/* Responsive à propos */
@media (max-width: 900px) {
  .about-text {
    left: 24px;
    right: 24px;
    max-width: none;
  }
}



/* =========================================
   A PROPOS (HOME) — mobile : image 3:2 + texte dessous sans fond
========================================= */
@media (max-width: 900px) {

  /* 1) On transforme le conteneur image en "cadre" 3:2 */
  .about-image-link{
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
  }

  /* 2) L’image remplit le cadre, et on décale le cadrage vers la droite */
  .about-image{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 85% center; /* teste 60% / 65% / 75% */
    display: block;
  }

  /* 3) On enlève l’overlay : texte dans le flux, dessous, sans fond */
  .about-text{
    position: static;
    transform: none;
    max-width: none;
    margin-top: 18px;
    padding: 0;
    background: none;
  }
}







/* ===============================
   MON DERNIER PROJET — base (même langage que "à propos")
================================ */

/* Cadre blanc */
.project-frame {
  position: relative;
  max-width: var(--project-width);     
  margin: 0 auto;
  padding: var(--about-padding);
}

.project-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(var(--white), var(--white)) left top / 60px 1px no-repeat,
    linear-gradient(var(--white), var(--white)) left top / 1px 60px no-repeat,
    linear-gradient(var(--white), var(--white)) right bottom / 60px 1px no-repeat,
    linear-gradient(var(--white), var(--white)) right bottom / 1px 60px no-repeat;
}

/* Titre accroché au cadre (comme "à propos") */
.section-title--project {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(var(--about-padding), 0);
  margin-top: -18px;         /* centrage optique sur le trait 1px */
  padding-left: 60px;        /* laisse respirer depuis le coin (pas de ligne ajoutée) */
  z-index: 3;
  pointer-events: none;
  justify-content: flex-start;
}

/* Layout texte / image */
.project-card {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr; /* texte légèrement dominant */
  gap: 46px;
  align-items: center;
}

/* Texte : mêmes paramètres que "à propos" */
.project-text {
  max-width: 525px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.project-title {
  font-weight: 500;
  font-size: 18px;
  margin-bottom: 18px;
  letter-spacing: 0.02em;
}

/* On force les paragraphes de cette zone à reprendre la "patte" about */
.project-text p {
  font-weight: 300;       /* Medium */
  font-size: 16px;
  line-height: 1.3;
  text-align: justify;
  text-align-last: left;
  margin-bottom: 22px;
  letter-spacing: 0.03em; /* comme ton about */
}

/* Lien : on réutilise .cta-frame (déjà défini) et il s'aligne à droite grâce à align-self */
.project-text .cta-frame {
  align-self: flex-end;
}

/* Image droite */
.project-image {
  overflow: hidden;
}

.project-image img {
  width: 100%;
  height: auto;       /* ratio natif conservé */
  display: block;
  transition: transform 400ms ease, filter 400ms ease;
}


.project-image a {
  display: block;
}

.project-image a:hover img {
  transform: scale(1.03);
  filter: brightness(1.05);
}

/* Responsive */
@media (max-width: 900px) {
  .project-card {
    grid-template-columns: 1fr;
    gap: 22px;
	  padding-top : 30px;
  }

  .project-text {
    max-width: none;
  }

  .project-image img {
    height: 260px;
  }
}


/* =========================================
   HOME — "Mon dernier projet" (MOBILE FIX)
========================================= */
@media (max-width: 900px) {

  

  /* 2) Stop la déformation : on rogne proprement */
  .last-project .project-image {
    aspect-ratio: 3 / 2;   /* ou 16/9 si tu préfères */
    overflow: hidden;
  }

  .last-project .project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;      /* rogne sans déformer */
    display: block;
  }

  /* IMPORTANT : neutralise l’ancienne règle qui forçait height:260px */
  /* (comme on met height:100% ici, l'ancienne ne s'applique plus visuellement) */
}

@media (max-width: 900px) {
  .section.last-project { padding-bottom: 70px; }
  .section.works { padding-top: 70px; } /* au lieu du padding global */
}



/* ===============================
   TRAVAUX
================================ */

/* Fond spécifique — Tous mes travaux */
.section.works {
  background: rgb(20, 20, 20);
}

.works-frame {
  position: relative;
  max-width: var(--about-width);      /* même largeur que "à propos" */
  margin: 0 auto;
  padding: var(--about-padding);
	 display: flex;
  flex-direction: column;
}

.works-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(var(--white), var(--white)) left top / 60px 1px no-repeat,
    linear-gradient(var(--white), var(--white)) left top / 1px 60px no-repeat,
    linear-gradient(var(--white), var(--white)) right bottom / 60px 1px no-repeat,
    linear-gradient(var(--white), var(--white)) right bottom / 1px 60px no-repeat;
}

/* Titre accroché au cadre (même logique que les autres) */
.section-title--works {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(var(--about-padding), 0);
  margin-top: -18px;          /* centrage optique sur le trait 1px */
  padding-left: 60px;         /* respiration depuis le coin */
  z-index: 3;
  pointer-events: none;
  justify-content: flex-start;
}

/* On donne juste un peu d’air au contenu à l’intérieur du cadre */
.works-frame .works-grid {
  margin-top: 26px; /* garde ton rythme actuel */
}




.works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 26px;
}

.works-grid a { overflow: hidden; display: block; }
.works-grid img {
  width: 100%;
  display: block;
  transition: transform 400ms ease, filter 400ms ease;
}
.works-grid a:hover img {
  transform: scale(1.05);
  filter: brightness(1.1);
}

@media (max-width: 900px) {
  .works-grid { grid-template-columns: 1fr; }
}


/* CTA "voir tous les travaux" — bas droite, sous les images */
.works-cta {
  align-self: flex-end;
  margin-top: 22px;
}


/* ===============================
   FOOTER — centré (version finale)
================================ */

.site-footer {
  background: rgba(0, 0, 0, 1);
  padding: 20px 20px;
}

.footer-inner {
  max-width: var(--site-width);
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px; /* espace réduit entre logos et copyright */
}

/* Réseaux sociaux */
.socials {
  display: flex;
  gap: 8px;
}

.socials img {
  width: 32px;
  opacity: 1;
  transition: opacity 200ms ease, transform 200ms ease;
}

.socials img:hover {
  opacity: 1;
  transform: scale(1.08);
}

/* Copyright */
.footer-inner p {
  font-size: 16px;
  opacity: 0.9;
	font-weight: 300;
  text-align: center;
}




/* -------------------------------------------------------------------------------------------------- */



/* ===============================
   TITRE DE PAGE — cadre en coins (jaune)
================================ */
.about-title {
  padding-top: 80px;
  padding-bottom: 20px;
}

.page-about .about-title + .section {
  padding-top: 30px;
}


.about-title .section-content {
  display: flex;
  justify-content: center;
}

.page-title-corners {
  position: relative;
  padding: 14px 28px;
}

.page-title-corners span {
  font-size: 32px;
  letter-spacing: 0.1em;
  font-weight: 500;
  color: var(--yellow);
}

/* cadre en coins, identique à "en savoir plus" */
.page-title-corners::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    linear-gradient(var(--yellow), var(--yellow)) left top / 30px 1px no-repeat,
    linear-gradient(var(--yellow), var(--yellow)) left top / 1px 30px no-repeat,

    linear-gradient(var(--yellow), var(--yellow)) right bottom / 30px 1px no-repeat,
    linear-gradient(var(--yellow), var(--yellow)) right bottom / 1px 30px no-repeat;
}



/* BIOGRAPHIE */
.about-bio-grid {
  display: grid;
  grid-template-columns: 500px 1fr;
  gap: 50px;
  align-items: center;
}

/* Photo carrée */
.about-bio-photo {
  width: 500px;
  height: 500px;
  overflow: hidden;
}

.about-bio-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Texte */
.about-bio-text p {
  font-weight: 300;
  font-size: 16px;
  line-height: 1.3;
  text-align: justify;
  text-align-last: left;
  letter-spacing: 0.03em;
  margin-bottom: 18px;
}

.about-bio-text p:last-of-type {
  font-weight: 500; /* Medium */
}

/* Cadre jaune — Biographie & démarche */
.about-frame--highlight::before {
  background:
    linear-gradient(var(--yellow), var(--yellow)) left top / 60px 1px no-repeat,
    linear-gradient(var(--yellow), var(--yellow)) left top / 1px 60px no-repeat,
    linear-gradient(var(--yellow), var(--yellow)) right bottom / 60px 1px no-repeat,
    linear-gradient(var(--yellow), var(--yellow)) right bottom / 1px 60px no-repeat;
}


/* =========================================
   PAGE À PROPOS — BIOGRAPHIE MOBILE FIX
========================================= */
@media (max-width: 900px) {

  .about-bio-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .about-bio-photo {
    width: 100%;
    height: auto;      /* on enlève la hauteur fixe */
    aspect-ratio: auto; /* on annule le 3:2 */
  }

  .about-bio-photo img {
    width: 100%;
    height: auto;      /* conserve le ratio naturel */
    object-fit: contain;
    display: block;
  }

}






/* ===============================
   SAVOIR-FAIRE
================================ */



.section-skills {
  background-color: rgb(20, 20, 20);
	 padding-top: 90px;
  padding-bottom: 90px;
}



/* Grille : 3 en haut, 2 en bas centrés */
.skills-grid-5 {
  padding-top: 30px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px 72px; /* vertical / horizontal */
  max-width: 1100px;   /* ajuste entre 980 et 1100 selon ton œil */
  margin: 26px auto 0;
}

/* Ligne 2 centrée (2 items) */
.skills-grid-5 .skill-card:nth-child(4) {
  grid-column: 1 / 2;
}
.skills-grid-5 .skill-card:nth-child(5) {
  grid-column: 2 / 3;
}

/* Cartes */
.skill-card {
  min-width: 0;
}

/* Titre : uppercase bold + petit coin en haut à droite */
.skill-title {
  position: relative;
  display: inline-block;
  padding-right: 26px; /* réserve la place du coin */
  margin-bottom: 14px;

  font-weight: 700; /* Bold */
  font-size: 15px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--white);
}

/* petit coin (blanc) en haut à droite du titre */
.skill-title::after {
  content: "";
  position: absolute;
  top: -12px;
  right: 5px;
  width: 25px;
  height: 25px;
  pointer-events: none;

  background:
    /* trait horizontal */
    linear-gradient(var(--white), var(--white)) right top / 25px 1px no-repeat,
    /* trait vertical */
    linear-gradient(var(--white), var(--white)) right top / 1px 25px no-repeat;
}

/* Paragraphe : mêmes paramètres "comme d'hab" */
.skill-card p {
  font-weight: 300;       /* Medium */
  font-size: 16px;
  line-height: 1.6;
  text-align: justify;
  text-align-last: left;
  letter-spacing: 0.02em;
  margin: 0;
}

/* Responsive */
@media (max-width: 1100px) {
  .skills-grid-5 {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .skills-grid-5 .skill-card:nth-child(4),
  .skills-grid-5 .skill-card:nth-child(5) {
    grid-column: auto;
  }
}


/* ===============================
   TRAVAUX — page Travaux
================================ */

/* Titre de page */
.works-title {
  padding-top: 80px;
  padding-bottom: 20px; /* espace réduit sous le titre */
}

.works-title .section-content {
  display: flex;
  justify-content: center;
}

/* Grille projets */
.section.works-list {
  padding: 40px 20px 60px; /* espace resserré entre titre et grille */
}

.works-grid-4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 60px;
}

/* Carte projet */
.work-card {
  width: 100%;
}

.work-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Cadre détaché */
.work-frame {
  position: relative;
  padding: 26px;
  padding-top: 34px;          /* espace sous le coin */
  display: flex;
  flex-direction: column;
  gap: 22px;                  /* plus d’espace image → texte */
}

/* Coin haut gauche — blanc permanent */
.work-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: background 200ms ease;
  background:
    linear-gradient(var(--white), var(--white)) left top / 50px 1px no-repeat,
    linear-gradient(var(--white), var(--white)) left top / 1px 50px no-repeat;
}

/* Image */
.work-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.work-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms ease, filter 400ms ease;
}

/* Texte */
.work-meta {
  display: flex;
  flex-direction: column;
  padding-top: 15px;
	gap: 3px;
}

.work-title {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--white);
  transition: color 180ms ease;
}

.work-subtitle {
  font-size: 14px;
  font-weight: 300;
  color: var(--white);
  opacity: 0.9;
  transition: color 180ms ease;
}

/* Hover */
.work-frame:hover .work-media img {
  transform: scale(1.03);
  filter: brightness(1.05);
}

.work-frame:hover::before {
  background:
    linear-gradient(var(--yellow), var(--yellow)) left top / 50px 1px no-repeat,
    linear-gradient(var(--yellow), var(--yellow)) left top / 1px 50px no-repeat;
}

/* Média projet : image + vidéo */
.work-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

/* Image au-dessus par défaut */
.work-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  transition: opacity 300ms ease;
}

/* Vidéo en dessous */
.work-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}

/* Hover : on révèle la vidéo */
.work-frame:hover .work-media img {
  opacity: 0;
}

.work-frame:hover .work-video {
  opacity: 1;
}

.work-card:hover .work-title,
.work-card:hover .work-subtitle {
  color: var(--yellow);
}




/* Responsive */
@media (max-width: 900px) {
  .works-grid-4 {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}



/* ===============================
   CONTACT — page Contact
================================ */

.page-contact main {
  padding-top: 0;
}

/* Titre (réutilise .page-title-corners) */
.contact-title {
  padding-top: 80px;
  padding-bottom: 20px;
}

.contact-title .section-content {
  display: flex;
  justify-content: center;
}

/* Section */
.contact-section {
  padding: 40px 20px 70px;
}

/* Cadre blanc */
.contact-frame {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: var(--about-padding);
}

.contact-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(var(--white), var(--white)) left top / 60px 1px no-repeat,
    linear-gradient(var(--white), var(--white)) left top / 1px 60px no-repeat,
    linear-gradient(var(--white), var(--white)) right bottom / 60px 1px no-repeat,
    linear-gradient(var(--white), var(--white)) right bottom / 1px 60px no-repeat;
}

/* Intro */
.contact-intro {
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.03em;
  line-height: 1.4;
  margin-bottom: 22px;
  max-width: 720px;
}

/* Form */
.contact-form {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

.contact-label {
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.9;
}

.contact-input,
.contact-textarea {
  width: 100%;
  font-family: "Orkney", sans-serif;
  color: var(--white);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 12px 14px;
  outline: none;
  letter-spacing: 0.02em;
  font-weight: 300;
  font-size: 15px;
}

.contact-textarea {
  resize: vertical;
  min-height: 160px;
}

.contact-input:focus,
.contact-textarea:focus {
  border-color: rgba(255, 224, 109, 0.6);
}

/* Bouton (on réutilise cta-frame, mais on enlève le look "lien") */
.contact-submit {
  justify-self: end;
  background: transparent;
  border: 0;
  cursor: pointer;
}

/* Infos sous form */
.contact-infos {
  margin-top: 10px;
  display: grid;
  gap: 10px;
}

.contact-mail {
  font-weight: 300;
  font-size: 15px;
  letter-spacing: 0.02em;
  opacity: 0.95;
}

.contact-mail-link {
  color: var(--white);
  text-decoration: none;
  padding-bottom: 2px;
  transition: color 180ms ease, border-color 180ms ease;
}

.contact-mail-link:hover {
  color: var(--yellow);
  border-color: rgba(255, 224, 109, 0.6);
}

.contact-socials-title {
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.03em;
  line-height: 1.4;
	margin-top: 20px;
  margin-bottom: 0px;
  max-width: 720px;
}


/* Réseaux en dessous (réutilise .socials) */
.contact-socials {
  margin-top: 0px;
	gap: 10px;
}

/* Footer copyright seul */
.site-footer--copyright-only .socials {
  display: none;
}

/* Optionnel */
.contact-status {
  margin-top: 5px;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.02em;
  min-height: 1.2em; /* évite le saut de layout */
  opacity: 0.9;
}

.contact-status[data-type="success"] { color: var(--yellow); }
.contact-status[data-type="error"] { color: #ff8b8b; }
.contact-status[data-type="loading"] { color: var(--white); opacity: 0.8; }


.page-contact main {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-contact .site-footer {
  margin-top: auto; /* pousse le footer tout en bas */
}


/* ===============================
   PAGE PROJET
================================ */

.page-project .section {
  padding: 120px 20px 40px;
}

/* ===============================
   BLOC PRINCIPAL
================================ */

.page-project .project-frame {
  position: relative;
  max-width: var(--about-width);
  margin: 0 auto;
  padding: var(--about-padding);
}

.page-project .project-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(var(--white), var(--white)) left top / 60px 1px no-repeat,
    linear-gradient(var(--white), var(--white)) left top / 1px 60px no-repeat,
    linear-gradient(var(--white), var(--white)) right bottom / 60px 1px no-repeat,
    linear-gradient(var(--white), var(--white)) right bottom / 1px 60px no-repeat;
}

/* ===============================
   LAYOUT VIDÉO / TEXTE
================================ */

/* Base */
.page-project .project-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  grid-template-areas: "media info";
  gap: 46px;
  align-items: start;
}

.page-project .project-layout:not(.project-layout--two-videos) .project-media { grid-area: media; }
.page-project .project-layout:not(.project-layout--two-videos) .project-info  { grid-area: info; }


/* Variante miroir */
.page-project .project-layout--reverse {
  grid-template-columns: 0.85fr 1.15fr;
  grid-template-areas: "info media";
}

/* Responsive */
@media (max-width: 900px) {
  .page-project .project-layout,
  .page-project .project-layout--reverse {
    grid-template-columns: 1fr;
    grid-template-areas:
      "media"
      "info";
    gap: 22px;
  }
}

/* ===============================
   MÉDIA
================================ */

.page-project .project-media {
  width: 100%;
}

.page-project .project-media-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.page-project .project-media-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.page-project .project-media-video {
  width: 100%;
  height: auto;
  display: block;
}



.project-media-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* On garde le cadre (crochets) à la même largeur,
   mais on rétrécit le contenu à l'intérieur */
.page-project--mozart .project-frame .project-layout{
  max-width: 900px;     /* ajuste (900 / 1000 / 1100…) */
  margin: 0 auto;       /* centre le contenu */
  gap: 70px;
grid-template-columns: 1.75fr 1.8fr;
}

/* Optionnel : si tu veux un peu plus d’air dans le cadre */
.page-project--mozart .project-frame{
  padding-left: 70px;
  padding-right: 70px;
}


@media (max-width: 900px) {
  .page-project--mozart .project-frame .project-layout {
    max-width: 100%;
    grid-template-columns: 1fr;
  }
}




/* ===============================
   TEXTE PROJET
================================ */

.page-project .project-info {
  display: flex;
  flex-direction: column;
}

.page-project .project-name {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  color: var(--yellow);
}

.page-project .project-subtitle {
  font-weight: 300;
  font-size: 14px;
  opacity: 0.9;
  margin-bottom: 18px;
}



.page-project .project-desc {
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  text-align: justify;
  text-align-last: left;
  letter-spacing: 0.03em;
	padding-bottom: 10px;
}




/* -------------------------------
   ESPACEMENTS ENTRE SECTIONS
   -> rapproche le bloc crédits du bloc principal
-------------------------------- */

/* si tu as <section class="section project-main"> */
.page-project .section.project-main {
  padding-bottom: 30px; /* ajuste 20–50 */
}

/* si tu as <section class="section project-credits"> */
.page-project .section.project-credits {
  padding-top: 30px;    /* ajuste 20–50 */
}






/* -------------------------------
   CRÉDITS
-------------------------------- */

/* IMPORTANT : on aligne le contenu à gauche dans cette section,
   pour que le cadre crédits parte du même axe que la vidéo. */
.page-project .section.project-credits .section-content {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

/* Cadre crédits */
.page-project .credits-frame {
  position: relative;
  max-width: 900px; /* comme tu as choisi */
  padding: 26px;    /* respiration identique partout */
  margin: 0;        /* ferré à gauche */
}

.page-project .credits-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* coin haut gauche */
    linear-gradient(var(--white), var(--white)) left top / 50px 1px no-repeat,
    linear-gradient(var(--white), var(--white)) left top / 1px 50px no-repeat,

    /* coin bas droite (même respiration que le coin haut gauche via padding identique) */
    linear-gradient(var(--white), var(--white)) right bottom / 50px 1px no-repeat,
    linear-gradient(var(--white), var(--white)) right bottom / 1px 50px no-repeat;
}

.page-project .credits-title {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
  color: var(--yellow);
}

.page-project .credits-text p {
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.03em;
  margin-bottom: 10px;
}

.page-project .credits-text strong {
  font-weight: 500;
}

/* Responsive */
@media (max-width: 900px) {
  .page-project .project-layout {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}


/* -------------------------------
   GALERIE — page projet
-------------------------------- */

.page-project .section.project-gallery {
  padding-top: 30px;   /* proche des crédits */
  padding-bottom: 60px;
}

.page-project .gallery-frame {
  position: relative;
  max-width: var(--about-width);
  margin: 0 auto;
  padding: var(--about-padding);
}

.page-project .gallery-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(var(--white), var(--white)) left top / 60px 1px no-repeat,
    linear-gradient(var(--white), var(--white)) left top / 1px 60px no-repeat,
    linear-gradient(var(--white), var(--white)) right bottom / 60px 1px no-repeat,
    linear-gradient(var(--white), var(--white)) right bottom / 1px 60px no-repeat;
}

.page-project .gallery-title {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-bottom: 18px;
  color: var(--yellow);
}

/* Grille 2x4 */
.page-project .gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

/* Items */
.page-project .gallery-item {
  display: block;
  overflow: hidden;
  text-decoration: none;
}

.page-project .gallery-item img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;   /* cohérent avec tes visuels */
  object-fit: cover;
  display: block;
  transition: transform 400ms ease, filter 400ms ease;
}

/* Feedback hover (même patte que tes works) */
.page-project .gallery-item:hover img {
  transform: scale(1.05);
  filter: brightness(1.1);
}

/* Responsive */
@media (max-width: 1100px) {
  .page-project .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .page-project .gallery-grid {
    grid-template-columns: 1fr;
  }
}


/* -------------------------------
   LIGHTBOX (fade + icônes)
-------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;

  /* fade */
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 0ms linear 220ms;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 220ms ease, visibility 0ms;
}

/* fond */
.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
}

/* zone de centrage */
.lightbox__panel {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 40px 20px;
}

/* image + petit zoom/fade */
.lightbox__img {
  max-width: min(1100px, 92vw);
  max-height: 82vh;
  width: auto;
  height: auto;
  display: block;

  opacity: 0;
  transform: scale(0.985);
  transition: opacity 180ms ease, transform 180ms ease;
}

.lightbox.is-open .lightbox__img {
  opacity: 1;
  transform: scale(1);
}

/* Boutons */
.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: absolute;
  border: 0;
  background: transparent;
  color: var(--white);
  cursor: pointer;
  padding: 10px 12px;
  transition: opacity 180ms ease, transform 180ms ease, color 180ms ease;
  opacity: 0.85;
}

.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover {
  color: var(--yellow);
  opacity: 1;
  transform: scale(1.06);
}

/* Croix */
.lightbox__close {
  top: 58px;
  right: 18px;
  width: 44px;
  height: 44px;
}

.lightbox__close::before,
.lightbox__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 2px;
  background: currentColor;
  transform-origin: center;
}

.lightbox__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.lightbox__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Flèches */
.lightbox__prev,
.lightbox__next {
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
}

.lightbox__prev { left: 18px; }
.lightbox__next { right: 18px; }

.lightbox__prev::before,
.lightbox__next::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 12px;
  height: 12px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

.lightbox__prev::before {
  transform: rotate(-135deg);
}

.lightbox__next::before {
  transform: rotate(45deg);
}

/* Coins jaunes (optionnel, cohérent) */
.lightbox__panel::after {
  content: "";
  position: absolute;
  inset: 18px;
  pointer-events: none;
  opacity: 0.9;
  background:
    linear-gradient(var(--yellow), var(--yellow)) left top / 30px 1px no-repeat,
    linear-gradient(var(--yellow), var(--yellow)) left top / 1px 30px no-repeat,
    linear-gradient(var(--yellow), var(--yellow)) right bottom / 30px 1px no-repeat,
    linear-gradient(var(--yellow), var(--yellow)) right bottom / 1px 30px no-repeat;
}

/* Mobile : flèches en bas */
@media (max-width: 600px) {
  .lightbox__prev,
  .lightbox__next {
    top: auto;
    bottom: 18px;
    transform: none;
  }
}





/* Variante : 2 vidéos (2 lignes) dans un seul bloc */
.project-layout--two-videos {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  grid-template-rows: auto auto;
  gap: 46px;
  align-items: start;
  margin-top: 22px; /* comme ton layout actuel */
}

/* Placement explicite (lisible) */
.project-media--v1 { grid-column: 1; grid-row: 1; }
.project-info--v1  { grid-column: 2; grid-row: 1; }

.project-media--v2 { grid-column: 1; grid-row: 2; }
.project-info--v2  { grid-column: 2; grid-row: 2; }

/* Le sous-titre seul : même style, juste un peu “calé” verticalement */
.project-info--v2 {
  display: flex;
  align-items: flex-start;
}

/* Mobile */
@media (max-width: 900px) {
  .project-layout--two-videos {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    gap: 22px;
  }

  .project-media--v1 { grid-column: 1; grid-row: 1; }
  .project-info--v1  { grid-column: 1; grid-row: 2; }

  .project-media--v2 { grid-column: 1; grid-row: 3; }
  .project-info--v2  { grid-column: 1; grid-row: 4; }
}


/* =========================================
   TITRES ACCROCHÉS AUX CADRES — MOBILE
   (accueil + à propos)
========================================= */
@media (max-width: 900px) {

  /* taille globale des titres (à propos, dernier projet, travaux, savoir-faire...) */
  .section-title{
    font-size: 24px;     /* avant : 30px */
    gap: 8px;
    letter-spacing: 0.08em;
  }

  /* optionnel : la “patte” horizontale avant le texte peut être un peu plus courte */
  .section-title--frame,
  .section-title--project,
  .section-title--works{
    padding-left: 44px;  /* avant : 60px */
  }
	
.section-title--project {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(var(--about-padding), 0);
  margin-top: -16px;         /* centrage optique sur le trait 1px */
  padding-left: 60px;        /* laisse respirer depuis le coin (pas de ligne ajoutée) */
  z-index: 3;
  pointer-events: none;
  justify-content: flex-start;
}	

}