/* =========================================================
   Théo Mougeolle — Portfolio
   Design tokens — repris de la DA d'origine du site
   Titres : Nohemi (sans majuscules) — Karla (UI/boutons) — Montserrat (texte)
   Accent : #DB8204 (orange) — relevé sur les maquettes de la page contact
   ========================================================= */
@import url('https://api.fontshare.com/v2/css?f[]=nohemi@300,400,500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;500;600;700&family=Montserrat:wght@400;500;600&display=swap');
@font-face{
  font-family: 'Nohemi'; src: url('../fonts/Nohemi-Regular.woff') format('woff');
  font-weight: normal; font-style: normal; font-display: swap;
}

:root{
  /* Couleurs relevees au pixel sur les maquettes de la page contact */
  --bg: #0F1110;          /* le noir du site (l'ancien #0A0A0A etait trop fonce) */
  --ink: #FFFFFF;
  --muted: #909291;
  --line: rgba(255,255,255,.14);
  --accent: #DB8204;      /* orange, remplace l'ancien rouge #CC3366 */
  --accent-dark: #9c5c02;
  --surface: #535758;     /* gris des boutons et des surlignages */

  --display: 'Nohemi', -apple-system, BlinkMacSystemFont, sans-serif;
  --ui: 'Karla', -apple-system, sans-serif;
  --body: 'Montserrat', -apple-system, sans-serif;

  --max: 1800px;
  --gutter: clamp(16px, 2.5vw, 60px);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; background: var(--bg); }
body{
  margin:0; background: transparent; color: var(--ink);
  font-family: var(--body); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
h1,h2,h3{ margin:0; font-family: var(--display); font-weight:700; line-height:0.98; letter-spacing:-0.01em; }
p{ margin:0 0 1em; }
.wrap{ max-width: var(--max); margin:0 auto; padding: 0 var(--gutter); }

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

/* ---------- Scroll reveal ---------- */
/* ---------- Arrivée des textes : montée derrière un masque ----------
   Même geste que la phrase du hero (.tp-mask.intro) : le texte monte depuis
   le bas et se dévoile progressivement, avec un léger décalage d'une ligne
   à l'autre. */
/* Arrivée des textes mot par mot : chaque mot est dans un masque (.rw) et son
   contenu (.rw-in) monte depuis le bas, avec un décalage croissant d'un mot à
   l'autre. Rejouable : la classe .rw-go est ajoutée/retirée au scroll. */
.rise-words{ }
.rise-words .rw{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.14em; margin-bottom:-.14em; }
.rise-words .rw-in{ display:inline-block; transform: translateY(110%); }
.rise-words.rw-go .rw-in{
  transform: none;
  transition: transform .8s cubic-bezier(.19,1,.22,1);
  transition-delay: calc(var(--w, 0) * .06s);
}
@media (prefers-reduced-motion: reduce){
  .rise-words .rw-in{ transform: none; transition: none; }
}

/* Titres de carte : à l'arrivée, le nom (.ct-base) monte en bloc derrière le
   masque du .card-title, sans toucher aux lettres <i> (réservées au survol
   "Ouvrir"). Rejouable. */
.rise-title .ct-base{ transform: translateY(110%); }
.rise-title.rw-go .ct-base{
  transform: none;
  transition: transform .8s cubic-bezier(.19,1,.22,1);
}
@media (prefers-reduced-motion: reduce){
  .rise-title .ct-base{ transform: none; transition:none; }
}

.reveal{ opacity:0; transform: translateY(36px); transition: opacity .8s cubic-bezier(.16,.8,.3,1), transform .8s cubic-bezier(.16,.8,.3,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal-stagger > *{ opacity:0; transition: opacity .6s ease; will-change: transform, opacity; transform-origin: 50% 100%; }
.reveal-stagger.in > *{ opacity:1; }
.reveal-stagger.in > *:nth-child(1){ transition-delay: .02s; }
.reveal-stagger.in > *:nth-child(2){ transition-delay: .08s; }
.reveal-stagger.in > *:nth-child(3){ transition-delay: .14s; }
.reveal-stagger.in > *:nth-child(4){ transition-delay: .2s; }
.reveal-stagger.in > *:nth-child(5){ transition-delay: .26s; }
.reveal-stagger.in > *:nth-child(6){ transition-delay: .32s; }

/* ---------- Eyebrow / mono labels ---------- */
.eyebrow{
  font-family: var(--display); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}
.eyebrow .dot{ color: var(--accent); }

/* ---------- Header ---------- */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 50;
  background: transparent; border-bottom: none;
  mix-blend-mode: difference;
}
.site-header.menu-open{ mix-blend-mode: normal; background: var(--bg); }
.nav a{ color: #fff; }
.nav a::after{ background: #fff; }
.nav-toggle{ color: #fff; }
.site-header.menu-open .nav a,
.site-header.menu-open .nav-toggle{ color: var(--ink); }
.site-header.menu-open .nav a::after{ background: var(--ink); }
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; height: 80px; }
.logo{ display:flex; align-items:center; }
.logo img{ height: 30px; width:auto; filter: brightness(0) invert(1); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.logo:hover img{ transform: rotate(-8deg) scale(1.08); }
.nav{ display:flex; gap: clamp(16px, 3vw, 34px); align-items:center; }
.nav a{
  font-family: var(--ui); font-weight:600; font-size: 13px; letter-spacing: 0.03em; text-transform: uppercase;
  position: relative; padding: 6px 0;
}
.nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.nav a:hover::after, .nav a.active::after{ transform: scaleX(1); }
.nav a.active{ color: var(--accent); }
.nav a.tag-new{ position:relative; }
.nav a.tag-new::before{
  content:'NEW'; position:absolute; top:-14px; right:-22px; background:var(--accent); color:#fff;
  font-family:var(--display); font-size:8px; padding:2px 4px; border-radius:2px; letter-spacing:0.05em;
}
.nav-toggle{ display:none; }

@media (max-width: 760px){
  /* Le menu reste affiché dans la barre (Projets / Contact), pas de burger. */
  .nav{ gap: 22px; }
  .nav a{ font-size: 15px; }
  .nav-toggle{ display:none; }
}

main{ padding-top: 80px; will-change: transform; }
body.has-hero-video main{ padding-top: 0; }

/* ---------- Hero interactif — texte magnétique ---------- */
.tp-hero{
  position: relative; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 0 var(--gutter); box-sizing: border-box;
  color: #fff; font-family: var(--display), sans-serif;
  text-align: center; pointer-events: none;
}
.tp-mask{ display: block; width: 100%; }
.tp-mask.intro{ overflow: hidden; }
.tp-sentence{
  display: flex; flex-direction: column; align-items: center;
  font-size: clamp(1.8rem, 5.4vw, 4.2rem);
  line-height: 1.14; letter-spacing: -0.018em;
  text-align: center; margin: 0 auto; width: auto;
}
.tp-sentence .tp-part:first-child{ margin-bottom: 0.15em; }
.tp-mask.intro .tp-sentence{ animation: tp-rise 1s cubic-bezier(.19,1,.22,1) both; }
@keyframes tp-rise{ from{ transform: translateY(110%); } to{ transform: none; } }
.tp-part{ white-space: nowrap; display: block; }
.tp-word{
  position: relative; display: inline-block; white-space: nowrap;
  overflow: visible; text-align: center; will-change: width;
  transition: width .5s cubic-bezier(.22,1,.36,1);
}
.tp-word-cur{ display: inline; }
.tp-ghost{ position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none; }
.tp-ghost.go{ animation: tp-out .5s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes tp-out{ from{ transform: translateY(0); opacity: 1; } to{ transform: translateY(0.6em); opacity: 0; } }
.tp-ltr{ display: inline-block; will-change: transform, opacity; }
.tp-spc{ white-space: pre; }
@media (max-width: 759px){ .tp-hero{ justify-content: center; text-align: center; } }

/* ---------- Hero vidéo plein écran ---------- */
.hero-video{
  position: relative; z-index: 1; height: 100vh; min-height: 560px; overflow:hidden; background: var(--ink);
}
/* Le contenu qui suit le hero : il reste calé en haut de l'écran (JS) pendant
   qu'il apparaît en fondu par-dessus la vidéo. Fond transparent pour laisser
   voir le quadrillage placé dessous. */
.after-hero{ position: relative; z-index: 1; }
.hero-video video, .hero-video img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  /* Zoom : donne la marge nécessaire pour le parallax (la vidéo se déplace au
     scroll sans jamais laisser apparaître de bord vide). scale 1.2 = ~10% de
     marge de chaque côté, ce qui couvre le déplacement parallax maximal. */
  transform: scale(1.2); transform-origin: center center;
  will-change: transform;
}
.hero-video::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.5) 100%);
}
.hero-video .hero-video-content{
  position:absolute; inset:0; z-index:2;
}
.scroll-cue{
  position:absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index:2;
  color: #fff; font-family: var(--ui); font-size:11px; text-transform:uppercase; letter-spacing:.1em;
  display:flex; flex-direction:column; align-items:center; gap:8px; opacity:.85;
  transition: opacity .35s ease;
}
.scroll-cue::after{
  content:''; width:1px; height: 34px; background: rgba(255,255,255,.6);
  animation: scrollcue 1.8s ease-in-out infinite;
}
@keyframes scrollcue{ 0%{ transform: scaleY(0); transform-origin: top; } 50%{ transform: scaleY(1); transform-origin: top; } 51%{ transform-origin: bottom; } 100%{ transform: scaleY(0); transform-origin: bottom; } }

/* ---------- Hero ---------- */
.hero{ padding-top: clamp(64px, 13vw, 160px); padding-bottom: clamp(40px, 6vw, 80px); overflow:hidden; }
.hero h1{
  font-size: clamp(34px, 6.2vw, 78px); font-weight:600;
}
.hero h1 span{ color: var(--accent); }
.hero .role{ margin-top: 20px; font-family: var(--ui); font-size: clamp(14px, 1.7vw, 18px); color: var(--muted); max-width: 50ch; }

/* ---------- Sections ---------- */
.section{ padding-top: clamp(56px, 9vw, 120px); padding-bottom: clamp(56px, 9vw, 120px); }
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap: 20px;
  margin-bottom: clamp(30px, 4vw, 52px); padding-bottom: 18px;
}
.section-head h2{ font-size: clamp(24px, 3.6vw, 38px); font-weight:600; }
.section-head .see-all{ font-family: var(--ui); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.04em; color: var(--accent); white-space:nowrap; transition: letter-spacing .3s ease; }
.section-head .see-all:hover{ letter-spacing:.12em; }

/* About */
.about{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 72px); align-items:center; }
.about .img-wrap{ overflow:hidden; }
.about img{ transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.about .img-wrap:hover img{ transform: scale(1.06); }
.about p{ font-size: clamp(18px, 2.4vw, 24px); font-family: var(--ui); }
@media (max-width: 780px){ .about{ grid-template-columns: 1fr; } .about .img-wrap{ order:-1; } }

/* ---------- Gallery grid — cartes façon site d'origine ---------- */
.grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 28px 22px; }
.grid.grid-featured{ grid-template-columns: 1fr; }

.card{ display:block; }
/* Titre de carte : au survol, le titre monte lettre par lettre en décalé et
   "Ouvrir" arrive lettre par lettre au même rythme. overflow:hidden forme le
   masque ; on ajoute une marge en bas pour laisser les jambages respirer sans
   que "Ouvrir" (calé sur la ligne de base) ne déborde. */
.card-title{ position:relative; display:inline-block; overflow:hidden; vertical-align:top; line-height:1.1; }
.card-title .ct-base{ display:block; }
.card-title .ct-base i{
  display:inline-block; font-style:normal; white-space:pre;
  transform: none;
  transition: transform .5s cubic-bezier(.19,1,.22,1);
  transition-delay: calc(var(--l, 0) * 35ms);
}
.card-title .ct-hover{
  position:absolute; inset:0; display:block; color: var(--accent);
  pointer-events:none; line-height:inherit;
}
.card-title .ct-hover i{
  display:inline-block; font-style:normal; white-space:pre;
  transform: translateY(110%);
  transition: transform .5s cubic-bezier(.19,1,.22,1);
  transition-delay: calc(var(--l, 0) * 35ms);
}
.card.card-ready:hover .card-title .ct-base i{ transform: translateY(-110%); }
.card.card-ready:hover .card-title .ct-hover i{ transform: none; }
@media (prefers-reduced-motion: reduce){
  .card-title .ct-base i, .card-title .ct-hover i{ transition:none; transform:none; }
}

.card-media{ overflow:hidden; aspect-ratio: 4/3; background: #151515; position: relative; }
.card-media img, .card-media video{
  width:100%; height:100%; object-fit:cover; display:block;
  transform: scale(1.01);
  transition: transform .9s cubic-bezier(.2,.8,.2,1);
}
.card-media-live{ position: relative; background: #111; }
.card-media-live iframe{
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  pointer-events: none; transform: scale(1.01); transition: transform .9s cubic-bezier(.2,.8,.2,1);
}
.card.card-ready:hover .card-media-live iframe{ transform: scale(1.06); }
.card.card-ready:hover .card-media img{ transform: scale(1.08); }
.card h3{
  margin-top: 52px; font-size: clamp(30px, 4.4vw, 52px); font-weight:400; color: var(--ink);
}
.card .card-eyebrow{ margin-top: 4px; margin-bottom: 2px; }
.card-btn, .btn{
  display:inline-flex; align-items:center; gap:10px; margin-top:16px;
  background: var(--surface); color: var(--ink); font-family: var(--ui); font-weight:700;
  font-size:12px; text-transform:uppercase; letter-spacing:.06em;
  padding: 13px 22px; border-radius: 999px; border: 0;
  transition: background .3s ease, gap .3s ease;
}
.btn{ margin-top:0; }
.card:hover .card-btn, .btn:hover{ background: var(--accent); gap:14px; }
.card-btn svg, .btn svg{ width:13px; height:13px; transition: transform .3s ease; }
.card:hover .card-btn svg, .btn:hover svg{ transform: translateX(3px); }

/* Survol : chaque lettre monte et sa jumelle la remplace par le bas,
   avec un leger decalage d'une lettre a l'autre. */
.btn-label{ display:inline-block; overflow:hidden; vertical-align:top; position:relative; }
.btn-label .btn-row{ display:block; white-space:pre; }
.btn-label .btn-row-dup{ position:absolute; left:0; top:100%; }
.btn-label i{
  display:inline-block; font-style:normal; white-space:pre;
  transition: transform .42s cubic-bezier(.19,1,.22,1);
  transition-delay: calc(var(--i, 0) * 22ms);
}
.card:hover .btn-label i, .btn:hover .btn-label i{ transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce){
  .btn-label i{ transition: none; }
}

.card.card-only .card-media{
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:26px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  border: 1px solid var(--line);
}
.card.card-only.alt .card-media{ background: linear-gradient(135deg, #2b2b2b 0%, #000 100%); }
.card.card-only .card-media .note{ color: rgba(255,255,255,.85); font-family: var(--ui); font-size: 13px; }
.card.card-only .card-media .eyebrow{ color: rgba(255,255,255,.75); }

@media (max-width: 780px){
  .grid{ grid-template-columns: 1fr; gap: 36px; }
}

/* ---------- Project detail — images en grand ---------- */
.project-hero{ padding-top: clamp(56px,11vw,120px); }
.project-hero h1{ font-size: clamp(30px, 5.5vw, 60px); font-weight:400; }
/* Haut de page projet en deux colonnes : bloc texte à gauche, image à droite.
   Les colonnes s'empilent sous 900px. */
.project-lead{
  display:grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px);
  align-items:start; margin-top: clamp(28px, 5vw, 56px);
  padding-bottom: clamp(48px, 9vw, 120px);
}
.project-lead .project-lead-text{ min-width:0; }
.project-lead .project-lead-media{
  margin:0; overflow:hidden;
  aspect-ratio: 16 / 9; width:100%;
}
.project-lead .project-lead-media img{
  width:100%; height:100%; display:block; object-fit:cover;
}
@media (max-width: 900px){
  .project-lead{ grid-template-columns: 1fr; gap: 32px; padding-bottom: clamp(40px,8vw,80px); }
}
.meta-row{
  display:flex; flex-wrap:wrap; gap: 32px; margin-top: 30px;
  padding: 20px 0;
}
.meta-item .eyebrow{ margin-bottom:5px; }
.meta-item strong{ font-family: var(--ui); font-weight:700; font-size:15px; }
.project-body{ max-width: 70ch; font-size: 19px; margin: 40px 0 20px; font-family: var(--ui); }
.project-hero-media{ margin: 64px 0 20px; overflow:hidden; }
.project-hero-media img{ width:100%; }
.project-media{ display:grid; grid-template-columns: repeat(2,1fr); gap: 18px; margin-bottom: 18px; }
.project-media img{ width:100%; height:auto; display:block; }
.project-media.single{ grid-template-columns: 1fr; }
.media-caption{ font-size:13px; color:var(--muted); font-family:var(--ui); }
@media (max-width: 700px){ .project-media{ grid-template-columns: 1fr; } }

.back-link{
  display:inline-flex; align-items:center; gap:8px; font-family: var(--ui); font-weight:700;
  font-size:13px; text-transform:uppercase; letter-spacing:.04em; color: var(--muted); margin-top: 44px;
  transition: gap .3s ease, color .3s ease;
}
.back-link:hover{ color: var(--accent); gap:14px; }

/* ---------- Photo page masonry ---------- */
.photo-grid{ column-count: 2; column-gap: 18px; }
.photo-grid img{ margin-bottom:18px; transition: transform .5s ease, filter .4s ease; }
.photo-grid img:hover{ transform: scale(1.02); }
@media (max-width: 600px){ .photo-grid{ column-count:1; } }

/* ---------- Claude tab (placeholder) ---------- */
.claude-placeholder{
  border: 2px dashed var(--line); border-radius: 8px; padding: clamp(50px,8vw,100px) clamp(20px,4vw,40px);
  text-align:center;
}
.claude-placeholder h3{ font-size: clamp(19px,2.6vw,26px); font-weight:600; margin-bottom:14px; }
.claude-placeholder p{ font-family: var(--ui); color:var(--muted); max-width:52ch; margin:0 auto; }

/* ---------- Footer ---------- */
/* ---------- Section contact (maquette Figma 616:12) ----------
   Cotes reprises telles quelles : photo sur 2 colonnes, texte sur les
   colonnes 4 a 11, corps a 57px sur une maquette large de 1727px. */
.contact-grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap: 0 24px; align-items:start; }
.contact-side{ grid-column: 1 / span 2; }
.contact-text{ grid-column: 4 / span 8; }

.contact-photo{ aspect-ratio: 1 / 1; overflow:hidden; background:#151515; }
.contact-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

.contact-actions{ display:flex; align-items:center; gap:18px; margin-top: clamp(28px, 4.5vw, 74px); }
.social{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; color: var(--ink); transition: color .3s ease, transform .3s ease; }
.social svg{ width:100%; height:100%; }
.social:hover{ color: var(--accent); transform: translateY(-2px); }

.contact-text p{
  font-family: var(--display); font-weight: 400;
  font-size: clamp(24px, 3.3vw, 57px); line-height: 1.12; color: var(--ink);
  margin: 0 0 1.15em;
}
.contact-text p.dim{ color: var(--muted); }
.contact-text .lit{ color: var(--ink); font-weight:400; border-bottom: 6px solid var(--accent); }
a.lit{ transition: color .3s ease; }
a.lit:hover{ color: var(--accent); }
.contact-text mark{
  background: var(--surface); color: var(--ink);
  padding: 0 .06em; border-radius: 2px;
}

/* ---------- Footer (maquette Figma 619:325) ---------- */
.site-footer{ position: relative; z-index: 4; padding: 40px 0 34px; margin-top: clamp(60px, 10vw, 150px); }
/* Footer calé sur la grille 12 colonnes. Instagram et LinkedIn sont placés
   symétriquement de part et d'autre du logo (comme la maquette), pas côte à
   côte. Tout est aligné en bas, au niveau du bas du logo. */
.footer-grid{
  display:grid; grid-template-columns: repeat(12, 1fr); gap: 0 24px;
  align-items:end; min-height: 90px;
}
.footer-mail{ grid-column: 1 / span 3; display:flex; flex-direction:column; gap:6px; }
.footer-ig{ grid-column: 4 / span 1; justify-self:end; }
.footer-logo{ grid-column: 5 / span 4; justify-self:center; width: clamp(150px, 15vw, 250px); }
.footer-li{ grid-column: 9 / span 1; justify-self:start; }
.footer-links{ grid-column: 12 / span 1; display:flex; flex-direction:column; gap:6px; text-align:right; justify-self:end; }
.footer-logo img{ width:100%; height:auto; display:block; }
.site-footer a, .site-footer span{ font-family: var(--ui); font-size:15px; color:#fff; transition: color .3s ease; }
.site-footer a:hover{ color: var(--accent); }
.site-footer .social{ color:#fff; display:inline-flex; }
.site-footer .social svg{ width:19px; height:19px; }
@media (max-width: 720px){
  /* Mobile : 4 colonnes, 2 rangées.
     Rangée 1 : Contact (gauche) · [IG][LI] (2 colonnes centrales) · Projets (droite)
     Rangée 2 : email + copyright (gauche) · logo (droite)
     L'ordre HTML est : mail, ig, logo, li, links. On place chacun par zone. */
  .footer-grid{
    display:grid;
    grid-template-columns: 1fr auto auto 1fr;
    grid-template-rows: auto auto;
    row-gap: 46px; column-gap: 18px; align-items:center;
  }
  .footer-links{
    grid-column: 1 / -1; grid-row: 1;
    flex-direction:row; justify-content:space-between; align-items:center;
    justify-self:stretch; text-align:left; gap:0;
    pointer-events:none;
  }
  .footer-links a{ pointer-events:auto; }
  /* HTML = "Projets" puis "Contact" ; on veut Contact à gauche, Projets à droite */
  .footer-links a[href*="projets"]{ order:2; }
  .footer-links a[href*="contact"]{ order:1; }
  /* Les deux icônes, chacune dans sa colonne centrale, collées au centre. */
  .footer-ig{ grid-column: 2; grid-row: 1; justify-self:end; z-index:1; }
  .footer-li{ grid-column: 3; grid-row: 1; justify-self:start; z-index:1; }
  .footer-mail{ grid-column: 1 / 3; grid-row: 2; justify-self:start; }
  .footer-logo{ grid-column: 3 / -1; grid-row: 2; justify-self:end; width: clamp(115px, 32vw, 180px); order:0; }
}

/* Voile de fin de page : la page se floute et se voile pendant que les
   elements du footer apparaissent. Pilote au scroll (voir main.js). */
.footer-veil{
  position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background: linear-gradient(to top, rgba(217,217,217,.33) 0%, rgba(115,115,115,0) 59%);
}
.site-footer .footer-mail, .site-footer .footer-ig, .site-footer .footer-li,
.site-footer .footer-logo, .site-footer .footer-links{
  opacity: 0; transform: translateY(26px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.19,1,.22,1);
}
.site-footer.footer-in .footer-mail,
.site-footer.footer-in .footer-ig,
.site-footer.footer-in .footer-li,
.site-footer.footer-in .footer-logo,
.site-footer.footer-in .footer-links{ opacity:1; transform:none; }
.site-footer.footer-in .footer-ig{ transition-delay: .08s; }
.site-footer.footer-in .footer-li{ transition-delay: .14s; }
.site-footer.footer-in .footer-links{ transition-delay: .18s; }
.site-footer.footer-in .footer-logo{ transition-delay: .26s; }

/* La photo de contact arrive en dernier, une fois le texte termine. */
.contact-photo{ opacity:0; transform: scale(1.04); transition: opacity .8s ease, transform .9s cubic-bezier(.19,1,.22,1); }
.contact-photo.photo-in{ opacity:1; transform:none; }

@media (max-width: 900px){
  .contact-side{ grid-column: 1 / span 12; }
  .contact-text{ grid-column: 1 / span 12; margin-top: 34px; }
  .contact-photo{ max-width: 260px; }
  .footer-inner{ flex-wrap: wrap; justify-content: center; text-align:center; gap: 20px 28px; }
  .footer-right{ text-align:center; }
}
@media (prefers-reduced-motion: reduce){
  .contact-photo, .site-footer .footer-col, .site-footer .footer-social, .site-footer .footer-logo{
    opacity:1; transform:none; transition:none;
  }
}

/* ---------- Buttons ---------- */



/* ---------- Grille projets à tailles variées ---------- */
.pgrid{ display:grid; grid-template-columns: repeat(12, 1fr); gap: 0 24px; }
.pgrid .card{ margin-bottom: clamp(60px, 9vw, 130px); }
/* rangée 1 : grande + petite */
.pg-lead{ grid-column: 1 / span 7; }
.pg-a{ grid-column: 9 / span 4; margin-top: clamp(60px, 12vw, 180px); }
/* rangée 2 : petite + grande */
.pg-b{ grid-column: 1 / span 4; }
.pg-c{ grid-column: 6 / span 7; margin-top: clamp(60px, 12vw, 180px); }
/* rangée 3 : moyenne + moyenne */
.pg-d{ grid-column: 1 / span 5; }
.pg-e{ grid-column: 8 / span 5; margin-top: clamp(50px, 10vw, 150px); }
/* rangée 4 : grande centrée */
.pg-f{ grid-column: 3 / span 7; }
@media (max-width: 900px){
  .pgrid{ grid-template-columns: 1fr; gap: 0; }
  .pg-lead,.pg-a,.pg-b,.pg-c,.pg-d,.pg-e,.pg-f{ grid-column: 1; margin-top: 0; }
  .pgrid .card{ margin-bottom: 56px; }
}


/* ---------- Quadrillage overlay (façon référence) ---------- */
.grid-overlay{
  position: fixed; top: 0; bottom: 0; left: var(--gutter); right: var(--gutter);
  z-index: -1; pointer-events: none;
}
/* Seules les lignes verticales subsistent : elles reprennent les colonnes de
   la grille. Les barres horizontales et les croix ont ete retirees. */
.grid-overlay .gl-v{ position:absolute; top:0; bottom:0; width:1px; background: rgba(255,255,255,.06); }

/* ==========================================================================
   Preloader : voile plein écran affiché tant que la page n'est pas chargée.
   Le logo se remplit de bas en haut (calque coloré qui monte sous un masque
   à la forme du logo). Disparaît en fondu une fois le chargement terminé.
   ========================================================================== */
#preloader{
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  opacity: 1; transition: opacity .6s ease;
}
#preloader.is-done{ opacity: 0; pointer-events: none; }
.preloader-logo{
  position: relative;
  width: clamp(120px, 16vw, 220px);
  aspect-ratio: 1605.44 / 694.41;
}
/* Silhouette du logo, en gris sombre (fond non rempli) */
.preloader-logo::before,
.preloader-logo::after{
  content: ""; position: absolute; inset: 0;
  -webkit-mask: url("../img/misc/logo.svg") no-repeat center / contain;
          mask: url("../img/misc/logo.svg") no-repeat center / contain;
}
.preloader-logo::before{ background: #2a2d2c; }
/* Remplissage qui monte de bas en haut (hauteur pilotée par --fill) */
.preloader-logo::after{
  background: var(--ink);
  clip-path: inset(calc(100% - var(--fill, 0%)) 0 0 0);
  transition: clip-path .25s linear;
}
@media (prefers-reduced-motion: reduce){
  .preloader-logo::after{ transition: none; }
  #preloader{ transition: none; }
}