:root{
  --bg:#FFFFFF;
  --panel:#F2F2EF;
  --ink:#2B2B2B;
  --stone:#767676;
  --sans:'Helvetica Neue', Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}

a{color:inherit; text-decoration:none;}
:focus-visible{outline:2px solid var(--ink); outline-offset:3px;}
img,svg{display:block; max-width:100%;}

.wrap{max-width:1240px; margin:0 auto; padding:0 48px;}

/* ---------- préchargeur ---------- */
.preloader{
  position:fixed; inset:0; z-index:1000;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
}
.preloader-stage{
  position:relative;
  display:grid;
  place-items:center;
}
.preloader-percent,
.preloader-title{
  grid-area:1 / 1;
  will-change:opacity, transform;
  transform-origin:center center;
}
.preloader-percent{
  font-size:clamp(3.2rem, 11vw, 7.5rem); font-weight:900; color:var(--ink);
  font-variant-numeric:tabular-nums; letter-spacing:-.03em;
}
.preloader-title{
  font-weight:400; letter-spacing:-.01em; white-space:pre;
  font-size:clamp(2.4rem, 9vw, 6rem);
  opacity:1;
  position:relative;
  display:inline-block;
}
.preloader-title .char{
  display:inline-block;
  opacity:0;
}
/* "p" et "h" en gras : les initiales de Pierre Huiban cachées dans "parch" */
.preloader-title .char.bold{
  font-weight:800;
}
.preloader-title .caret{
  position:absolute;
  top:.1em; bottom:.1em; left:0;
  width:.025em;
  background:var(--ink);
  opacity:0;
}
.preloader-title .caret.blink{
  animation:caret-blink .85s steps(1,end) infinite;
}
@keyframes caret-blink{
  0%,49%{ opacity:1; }
  50%,100%{ opacity:0; }
}

/* ---------- header (titre centré, statique) ---------- */
header{
  position:sticky; top:0; z-index:55;
  background:var(--bg);
  padding:26px 0;
  text-align:center;
}
body.home-page.in-contact header{background:#EDEDED;}
.site-title{
  font-weight:400; font-size:1.3rem; letter-spacing:-.01em;
}
/* "p" et "h" en gras : les initiales de Pierre Huiban cachées dans "parch" */
.site-title .bold{
  font-weight:800;
}
.menu-btn{
  display:flex; position:fixed; top:22px; right:22px; z-index:70;
  flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px;
}
.menu-btn span{width:22px; height:2px; background:var(--ink); display:block;}

/* ---------- sélecteur de langue ---------- */
.lang-switch{
  position:fixed; top:30px; left:22px; z-index:70;
  display:flex; align-items:center; gap:7px;
}
.lang-option{
  background:none; border:0; padding:4px 2px; cursor:pointer;
  font-family:var(--sans); font-size:.78rem; font-weight:700; letter-spacing:.05em;
  color:var(--stone);
  transition:color .2s ease;
}
.lang-option.active{color:var(--ink);}
.lang-option:hover{color:var(--ink);}
.lang-sep{color:var(--stone); opacity:.5; font-size:.78rem;}

/* ---------- accueil : quand on atteint le contact, le menu/langue laissent place à un bouton "remonter" ---------- */
body.home-page .lang-switch, body.home-page .menu-btn{
  transition:opacity .3s ease, visibility .3s ease;
}
body.home-page.in-contact .lang-switch, body.home-page.in-contact .menu-btn{
  opacity:0; visibility:hidden; pointer-events:none;
}
.scroll-top-btn{
  display:flex; align-items:center; justify-content:center;
  position:fixed; top:16px; right:22px; z-index:70;
  width:44px; height:44px; border-radius:12px;
  background:var(--panel); border:0; cursor:pointer; color:var(--ink);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s ease;
}
body.home-page.in-contact .scroll-top-btn{
  opacity:1; visibility:visible; transform:translateY(0);
}
.scroll-top-btn svg{width:18px; height:18px;}

/* ---------- mobile nav overlay ---------- */
.mobile-nav{
  position:fixed; inset:0; z-index:65; background:var(--bg);
  display:flex; flex-direction:column; justify-content:center; gap:28px; padding:40px;
  transform:translateX(100%); transition:transform .4s ease;
}
.mobile-nav.open{transform:translateX(0);}
.mobile-nav a{
  font-size:1.3rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  position:relative; width:fit-content;
}
.mobile-nav a::after{
  content:''; position:absolute; right:0; bottom:-6px; height:2px;
  width:0%; background:var(--ink); transition:width .4s cubic-bezier(.65,0,.35,1);
}
.mobile-nav a.active::after{width:100%;}

.img-placeholder{background:#D9D9D6; border-radius:14px;}

/* ---------- accueil : le slideshow occupe le premier écran, le contact est "révélé" en dessous (façon MAD) ---------- */
body.home-page{min-height:100vh; display:flex; flex-direction:column;}
body.home-page.in-contact{background:#EDEDED;}
body.home-page main{flex:1; display:flex; flex-direction:column;}

/* ---------- slideshow projets (une vignette à la fois, page d'accueil) ---------- */
.tiles-section{
  position:relative; z-index:1;
  background:var(--bg); /* opaque : masque le contact tant qu'on ne l'a pas atteint */
  min-height:100vh;
  display:flex; align-items:flex-start; /* colle sous le header plutôt que centrer, comme la référence */
  padding:20px 0 0;
}
.tiles-section .wrap{
  width:100%; max-width:none; /* plein largeur façon MAD, pas de colonne resserrée */
  padding:0 24px;
}
.slideshow{
  max-width:calc(88vh * 16 / 9); /* borne raisonnable sur les écrans très larges, sinon quasi plein écran */
  margin:0 auto; /* centre l'ensemble vignette + barre de progression */
}
.slideshow-stage{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:28px;
  overflow:hidden;
  background:#D9D9D6;
}
.slideshow .slideshow-stage{
  aspect-ratio:16/7.8; /* grande vignette collée sous le header, comme la référence */
}
.project-tile{
  position:absolute; inset:0;
  display:block; width:100%; height:100%;
  border:0; margin:0; padding:0;
  cursor:pointer;
  opacity:0; visibility:hidden;
  transition:opacity .5s ease;
}
.project-tile.active{opacity:1; visibility:visible;}

/* transition "on entre dans la photo" au clic sur une vignette, avant d'ouvrir la fiche projet */
.zoom-veil{
  position:fixed; z-index:999;
  background-color:#D9D9D6; background-size:cover; background-position:center;
  transition:top .65s cubic-bezier(.65,0,.35,1), left .65s cubic-bezier(.65,0,.35,1),
             width .65s cubic-bezier(.65,0,.35,1), height .65s cubic-bezier(.65,0,.35,1),
             border-radius .65s cubic-bezier(.65,0,.35,1);
  will-change:top, left, width, height, border-radius;
}
body.is-transitioning > header,
body.is-transitioning > .lang-switch,
body.is-transitioning > .menu-btn,
body.is-transitioning > .scroll-top-btn,
body.is-transitioning > .mobile-nav,
body.is-transitioning > main,
body.is-transitioning > footer{
  opacity:.05;
  transition:opacity .5s ease;
  pointer-events:none;
}

/* la couche "image" se floute et s'éclaircit au survol (prête pour les vraies photos) */
.tile-media{
  position:absolute; inset:0;
  background:#D9D9D6;
  transition:filter .5s ease;
}
.project-tile:hover .tile-media, .project-tile:focus-visible .tile-media,
.slideshow-stage:hover .tile-media{
  filter:blur(8px) brightness(1.2);
}

/* photos réelles, par projet */
[data-project="05"] .tile-media{
  background-image:url('../images/wip/02-batiment.jpg');
  background-position:center;
  background-color:#FFFFFF;
}
/* accueil : l'image de la vignette WIP remplit toute la vignette, comme les autres projets */
.project-tile[data-project="05"] .tile-media{
  background-size:cover;
}
/* page Travaux : les 5 vignettes sont étroites, l'image reste zoomée comme les autres */
.work-panel[data-project="05"] .tile-media{
  background-size:cover;
}
[data-project="01"] .tile-media{
  /* croquis d'UTEM : toujours 86 % de la largeur de la vignette, quelle que soit sa forme */
  background-image:url('../images/utem-sketch.jpg?v=86');
  background-size:86% auto;
  background-repeat:no-repeat;
  background-position:center;
  background-color:#FFFFFF;
}
[data-project="02"] .tile-media{
  /* Corvetto : bâtiment centré avec de l'air autour, bords de l'image en dégradé transparent sur le ton du sol */
  background-image:url('../images/corvetto-cover.webp?v=2');
  background-size:78% auto;
  background-repeat:no-repeat;
  background-position:center;
  background-color:#D7D7D7;
}
/* page Travaux : vignettes étroites et hautes, l'image remplit la hauteur et on voit le centre du bâtiment */
.work-panel[data-project="02"] .tile-media{background-size:cover;}
[data-project="03"] .tile-media{
  background-image:url('../images/aven.jpg');
  background-size:cover;
  background-position:center;
}
[data-project="04"] .tile-media{
  background-image:url('../images/various-works.jpg?v=2');
  background-size:cover;
  background-position:center;
}

/* le texte reste net, superposé, et n'apparaît qu'au survol : discret, en coin, très fin */
/* un dégradé sombre derrière le texte garantit la lisibilité même sur une photo sombre */
.tile-info{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; flex-direction:column; align-items:flex-start;
  gap:5px; padding:90px 28px 22px;
  background:linear-gradient(to top, rgba(0,0,0,.6) 0%, rgba(0,0,0,.32) 55%, rgba(0,0,0,0) 100%);
  opacity:0;
  transform:translateY(4px);
  transition:opacity .35s ease, transform .35s ease;
  pointer-events:none;
}
.project-tile:hover .tile-info, .project-tile:focus-visible .tile-info,
.slideshow-stage:hover .tile-info{
  opacity:1;
  transform:translateY(0);
}
.tile-name{
  font-weight:200; font-size:1.15rem; letter-spacing:.02em;
  text-transform:uppercase; color:#FFFFFF;
  text-shadow:0 1px 12px rgba(0,0,0,.4);
}
.tile-location, .tile-date{
  font-weight:100; font-size:.72rem; letter-spacing:.06em;
  text-transform:uppercase; color:rgba(255,255,255,.78);
  text-shadow:0 1px 10px rgba(0,0,0,.4);
}
.tile-date:empty, .tile-location:empty{display:none;}

.slideshow-progress{
  display:flex; gap:6px; margin-top:20px;
}
.progress-seg{
  flex:1; height:1px; border-radius:1px; overflow:visible;
  background:#E4E4E1; cursor:pointer;
  padding:6px 0; background-clip:content-box;
  box-sizing:content-box; /* pour que le padding agrandisse la zone cliquable sans écraser le trait visible */
}
.progress-fill{
  display:block; height:100%; width:0%; background:var(--ink); border-radius:1px;
}

/* ---------- page Travaux : vignettes côte à côte, celle survolée s'étire plein écran ---------- */
.works-accordion{
  display:flex;
  gap:6px;
  width:100%;
  height:78vh;
  margin:28px 0;
  padding:0 6px;
  box-sizing:border-box;
}
.work-panel{
  position:relative;
  flex:1;
  min-width:0;
  border:0; padding:0; margin:0;
  overflow:hidden;
  cursor:pointer;
  background:#D9D9D6;
  border-radius:28px;
  transition:flex .7s cubic-bezier(.65,0,.35,1);
}
.works-accordion:hover .work-panel{flex:0.55;}
.works-accordion:hover .work-panel:hover{flex:6;}

.work-panel:hover .tile-info{opacity:1; transform:translateY(0);}
.works-accordion:hover .work-panel:not(:hover) .tile-media{filter:brightness(.7);}

@media (max-width:800px){
  .works-accordion{flex-direction:column; height:auto;}
  .work-panel{flex:none !important; height:220px; border-radius:18px;}
  .work-panel .tile-info{opacity:1; transform:none;}
  .works-accordion:hover .work-panel:not(:hover) .tile-media{filter:none;}
}

/* ---------- fiche projet : héros plein écran, animation d'entrée façon "zoom dans la photo" ---------- */
.project-hero{
  position:relative; width:calc(100% - 12px); height:88vh;
  margin:0 auto;
  display:flex; align-items:flex-end;
  overflow:hidden;
  border-radius:28px;
}
/* la vignette cliquée finit son zoom déjà à pleine taille et pleine opacité (voir .zoom-veil) :
   l'image de la fiche projet reprend exactement cet état, sans re-zoomer ni disparaître,
   pour que l'arrivée sur la page prolonge le mouvement au lieu de le couper */
.project-hero-media{
  position:absolute; inset:0;
  background:#D9D9D6; background-size:cover; background-position:center;
  opacity:0;
}
.project-hero-media.is-ready{
  opacity:1;
  transition:opacity .2s ease;
}
.project-hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.6) 0%, rgba(0,0,0,.18) 45%, rgba(0,0,0,0) 75%);
}
.project-hero-info{
  position:relative; z-index:1; width:100%;
  padding:0 48px 56px;
  opacity:0; transform:translateY(16px);
  animation:heroInfoIn .7s ease .35s both;
}
@keyframes heroInfoIn{ to{ opacity:1; transform:translateY(0); } }
.project-title{
  font-family:var(--sans); font-weight:200; font-size:clamp(2.2rem, 6vw, 4.8rem);
  line-height:1.05; color:#FFFFFF; text-transform:uppercase; letter-spacing:.01em;
  margin:0 0 12px; text-shadow:0 2px 24px rgba(0,0,0,.35);
}
.project-meta{
  display:flex; flex-wrap:wrap; gap:10px 24px;
  font-weight:100; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.82);
}

.project-body{padding:64px 0 24px; max-width:760px;}
.project-description{
  font-weight:200; font-size:1.15rem; line-height:1.75; color:var(--ink);
  white-space:pre-line;
}
.project-credit{
  font-weight:200; font-size:.85rem; line-height:1.6; letter-spacing:.01em;
  color:var(--stone); margin-top:22px;
}
.project-description:empty, .project-credit:empty{display:none;}
/* galerie des documents du projet : cartes grises arrondies, images fondues dans le fond (multiply) */
.project-gallery{
  padding:0; width:calc(100% - 12px); margin:56px auto 0;
  display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:6px;
}
.gallery-item{margin:0; min-width:0; display:flex; flex-direction:column; grid-column:span 3;}
.gallery-item.is-third{grid-column:span 2;}
.gallery-item.is-full{grid-column:1 / -1;}
.gallery-item.is-center{grid-column:1 / -1; width:calc(50% - 3px); justify-self:center;}
.gallery-card{
  flex:1; display:flex; align-items:center; justify-content:center;
  width:100%; margin:0; border:0; cursor:zoom-in;
  padding:clamp(14px, 2.6vw, 44px);
  background:var(--panel); border-radius:28px;
}
.gallery-card img{width:100%; height:auto; display:block; mix-blend-mode:multiply;}
/* rendus au fond non blanc : image plein cadre dans la carte, sans fondu */
.gallery-item.is-bleed .gallery-card{padding:0; overflow:hidden; align-items:stretch;}
.gallery-item.is-bleed .gallery-card img{mix-blend-mode:normal; object-fit:cover;}
.gallery-item figcaption{
  padding:12px 6px 22px;
  font-weight:200; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--stone);
}

.gallery-item.is-book .gallery-card{cursor:pointer;}

/* livret : un livre qui s'ouvre (feuilles 3D autour de la reliure) */
.bookviewer{
  --ratio:.707;
  --ph:min(calc(100vh - 150px), calc(46.6vw / var(--ratio)));
  --pw:calc(var(--ph) * var(--ratio));
  position:fixed; inset:0; z-index:1200;
  display:flex; flex-direction:column; align-items:center;
  background:#EDEDED;
  opacity:0; visibility:hidden;
  transition:opacity .4s ease, visibility .4s ease;
}
.bookviewer.is-open{opacity:1; visibility:visible;}
.book-stage{
  flex:1; min-height:0; width:100%; padding-top:26px;
  display:flex; align-items:center; justify-content:center;
  perspective:2800px; cursor:pointer; touch-action:pan-y;
}
.book{
  position:relative; width:calc(var(--pw) * 2); height:var(--ph);
  transform-style:preserve-3d;
  transition:transform .9s cubic-bezier(.65,0,.35,1);
}
.book[data-state="front"]{transform:translateX(calc(var(--pw) * -.5));}
.book[data-state="back"]{transform:translateX(calc(var(--pw) * .5));}
.book-leaf{
  position:absolute; top:0; left:50%; width:var(--pw); height:var(--ph);
  transform-origin:left center; transform-style:preserve-3d;
  transition:transform .9s cubic-bezier(.65,0,.35,1), z-index 0s linear .45s;
}
.book-leaf.is-flipped{transform:rotateY(-180deg);}
.book-face{
  position:absolute; inset:0; overflow:hidden; background:#FFFFFF;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.05);
}
.book-face.is-back{transform:rotateY(180deg);}
.book-face img{display:block; width:100%; height:100%; object-fit:cover;}
.book-face::after{content:''; position:absolute; inset:0; pointer-events:none;}
.book-face.is-front::after{background:linear-gradient(to right, rgba(0,0,0,.16), rgba(0,0,0,0) 9%);}
.book-face.is-back::after{background:linear-gradient(to left, rgba(0,0,0,.16), rgba(0,0,0,0) 9%);}
.book.no-anim, .book.no-anim .book-leaf{transition:none !important;}
.book-count{
  padding:0 0 26px;
  font-weight:200; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--stone); font-variant-numeric:tabular-nums;
}

/* agrandissement au clic : plein écran, clic sur l'image = zoom taille réelle */
.lightbox{
  position:fixed; inset:0; z-index:1200;
  display:flex; flex-direction:column;
  background:var(--bg);
  opacity:0; visibility:hidden;
  transition:opacity .35s ease, visibility .35s ease;
}
.lightbox.is-open{opacity:1; visibility:visible;}
.lightbox-stage{flex:1; min-height:0; display:flex; overflow:auto; padding:68px 76px 8px;}
.lightbox-stage img{
  margin:auto; width:auto; height:auto; cursor:zoom-in;
  max-width:calc(100vw - 152px); max-height:calc(100vh - 160px);
}
.lightbox.is-zoomed .lightbox-stage img{max-width:none; max-height:none; cursor:zoom-out;}
.lightbox-caption{
  text-align:center; padding:14px 24px 22px;
  font-weight:200; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--stone);
}
.lightbox-close{
  position:absolute; top:16px; right:22px; z-index:1;
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border:0; border-radius:12px; cursor:pointer;
  background:var(--panel); color:var(--ink);
}
.lightbox-close svg{width:18px; height:18px;}
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:1;
  background:none; border:0; cursor:pointer; padding:14px;
  font-family:var(--sans); font-size:1.5rem; font-weight:200; color:var(--ink);
  opacity:.45; transition:opacity .25s ease;
}
.lightbox-nav:hover{opacity:1;}
.lightbox-prev{left:12px;}
.lightbox-next{right:12px;}
@media (max-width:800px){
  .project-gallery{grid-template-columns:1fr;}
  .gallery-item, .gallery-item.is-center, .gallery-item.is-third{grid-column:1 / -1; width:auto;}
  .gallery-card{border-radius:18px;}
  .lightbox-stage{padding:64px 12px 8px;}
  .lightbox-stage img{max-width:calc(100vw - 24px);}
  .lightbox-nav{top:auto; bottom:8px; transform:none;}
}

.project-nav{
  display:flex; justify-content:space-between; align-items:center;
  padding:32px 0 64px; margin-top:24px; border-top:1px solid #D8D8D4;
  font-weight:200; font-size:.85rem; letter-spacing:.04em; text-transform:lowercase; color:var(--stone);
}
.project-nav a{display:inline-flex; align-items:center; gap:8px; color:var(--stone); transition:color .25s ease;}
.project-nav a:hover{color:var(--ink);}

/* UTEM : croquis sur fond blanc, donc texte sombre et pas de dégradé (comme WIP) */
[data-project="01"] .project-hero-media{background-image:url('../images/utem-sketch.jpg?v=86'); background-size:86% auto; background-repeat:no-repeat; background-color:#FFFFFF;}
[data-project="01"] .project-hero{background:#FFFFFF;}
[data-project="01"] .project-hero-scrim{display:none;}
[data-project="01"] .project-title{color:var(--ink); text-shadow:none;}
[data-project="01"] .project-meta{color:var(--stone);}
/* page Travaux : les vignettes sont étroites et hautes, le dessin y est cadré serré sur son centre, en gros */
.work-panel[data-project="01"] .tile-media{background-image:url('../images/utem-wide.jpg?v=86'); background-size:cover;}
[data-project="02"] .project-hero-media{background-image:url('../images/corvetto-cover.webp?v=2'); background-size:78% auto; background-repeat:no-repeat; background-color:#D7D7D7;}
[data-project="02"] .project-hero{background:#D7D7D7;}
[data-project="03"] .project-hero-media{background-image:url('../images/aven.jpg');}
[data-project="04"] .project-hero-media{background-image:url('../images/various-works.jpg?v=2');}
/* WIP : image sur fond blanc, donc texte sombre, pas de dégradé, et la maquette reste au-dessus du texte */
[data-project="05"] .project-hero-media{
  background-image:url('../images/wip.jpg');
  background-color:#FFFFFF; background-size:contain; background-repeat:no-repeat;
  inset:0 0 clamp(160px, 27vh, 250px) 0;
}
[data-project="05"] .project-hero{background:#FFFFFF;}
[data-project="05"] .project-hero-scrim{display:none;}
[data-project="05"] .project-title{color:var(--ink); text-shadow:none;}
[data-project="05"] .project-meta{color:var(--stone);}

@media (max-width:700px){
  .project-hero{height:70vh; border-radius:18px;}
  .project-hero-info{padding:0 24px 36px;}
  .project-nav{flex-wrap:wrap; gap:16px;}
}

/* ---------- section shell ---------- */
section{padding:120px 0;}
.section-head{margin-bottom:56px;}
.section-head h2{font-weight:700; font-size:clamp(1.8rem,3.2vw,2.5rem); margin-bottom:10px;}
.section-head p{color:var(--stone); font-size:.95rem; max-width:50ch;}

/* ---------- about ---------- */
#apropos{background:var(--bg);}
.about-grid{
  display:grid; grid-template-columns:0.7fr 1.3fr; gap:0;
  border-top:3px solid var(--ink);
}
.about-col{padding:48px 56px 48px 0; border-right:3px solid var(--ink);}
.about-col:last-child{border-right:0; padding-left:56px; padding-right:0;}
.about-col h4{font-weight:700; font-size:1rem; margin-bottom:20px;}
.about-col ul{list-style:none;}
.about-col li{
  font-size:.92rem; padding:8px 0;
  display:flex; justify-content:space-between; gap:12px;
}
.about-col li span{color:var(--stone);}
.about-text p{max-width:58ch; margin-bottom:24px; font-size:1.02rem; line-height:1.75;}

/* ---------- contact : très épuré, Helvetica Thin, minuscules ---------- */
#contact{min-height:100vh; display:flex; align-items:center;}
body.home-page #contact{background:#EDEDED;} /* gris clair façon MAD */
body.home-page #contact{position:sticky; bottom:0; z-index:0;}
#contact .wrap{width:100%;}
.contact-simple{
  display:flex; flex-direction:column; align-items:flex-start; gap:30px;
  text-transform:lowercase;
}
.contact-label{
  font-weight:600; font-size:.78rem; letter-spacing:.1em; color:var(--stone);
}
.contact-link{
  font-weight:100; font-size:1.05rem;
  line-height:1.15; color:var(--stone);
  border-bottom:1px solid transparent; padding-bottom:2px;
  transition:color .25s ease, border-color .25s ease;
}
.contact-link:hover{color:var(--ink); border-bottom-color:var(--ink);}

/* formulaire de contact : champs sans cadre, label flottant, soulignement animé */
.contact-form{width:100%; max-width:640px; display:flex; flex-direction:column; gap:6px;}
.field{position:relative; padding-top:26px;}
.field input,
.field textarea{
  display:block; width:100%; border:0; border-bottom:1px solid var(--stone);
  background:transparent; font-family:var(--sans); font-weight:200;
  font-size:1.3rem; color:var(--ink); padding:4px 0 10px; resize:none;
  text-transform:none; transition:border-color .3s ease;
}
.field textarea{line-height:1.5; overflow:hidden;}
.field input:focus, .field textarea:focus{outline:0;}
.field label{
  position:absolute; left:0; top:30px; color:var(--stone);
  font-weight:200; font-size:1.3rem; letter-spacing:0; text-transform:lowercase;
  pointer-events:none; transition:top .3s cubic-bezier(.65,0,.35,1), font-size .3s cubic-bezier(.65,0,.35,1), color .3s ease, letter-spacing .3s ease;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label{
  top:0; font-size:.72rem; letter-spacing:.1em; color:var(--stone);
}
.field-line{
  position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--ink); transform:scaleX(0); transform-origin:left;
  transition:transform .4s cubic-bezier(.65,0,.35,1);
}
.field:focus-within .field-line{transform:scaleX(1);}

.contact-submit{
  align-self:flex-start; margin-top:28px; display:inline-flex; align-items:center; gap:10px;
  background:none; border:0; padding:0 0 6px; cursor:pointer;
  font-family:var(--sans); font-weight:200; font-size:1.05rem; letter-spacing:.02em;
  color:var(--ink); text-transform:lowercase; border-bottom:1px solid var(--ink);
  transition:gap .3s cubic-bezier(.65,0,.35,1), opacity .3s ease;
}
.contact-submit:hover{gap:16px;}
.contact-submit:disabled{opacity:.45; cursor:default; gap:10px;}
.submit-icon{display:flex; width:16px; height:16px;}
.submit-icon svg{width:100%; height:100%; display:block;}
.submit-icon .icon-spin{animation:submitSpin .8s linear infinite; transform-origin:center;}
@keyframes submitSpin{to{transform:rotate(360deg);}}
.contact-form-status{
  min-height:1.2em; margin:14px 0 0; font-weight:200; font-size:.85rem; letter-spacing:.02em;
  color:var(--stone); opacity:0; transform:translateY(-4px);
  transition:opacity .35s ease, transform .35s ease;
}
.contact-form-status.is-visible{opacity:1; transform:translateY(0);}
.contact-form-status.is-error{color:#B3492D;}

.contact-meta{
  display:flex; flex-wrap:wrap; gap:8px 32px;
  font-weight:200; font-size:1.05rem; color:var(--stone);
}
.contact-socials{display:flex; gap:36px;}
.social-link{
  position:relative; display:inline-flex; align-items:baseline; gap:6px;
  font-family:var(--sans); font-weight:200; font-size:1.05rem; letter-spacing:.02em;
  color:var(--ink); text-transform:lowercase; padding-bottom:4px;
}
.social-link::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--ink); transform:scaleX(0); transform-origin:left;
  transition:transform .35s cubic-bezier(.65,0,.35,1);
}
.social-link:hover::after, .social-link:focus-visible::after{transform:scaleX(1);}
.social-arrow{
  display:inline-block; font-size:.8em; opacity:0; transform:translate(-4px,3px);
  transition:opacity .3s ease, transform .3s ease;
}
.social-link:hover .social-arrow, .social-link:focus-visible .social-arrow{opacity:1; transform:translate(0,0);}

@media (max-width:640px){
  .field input, .field textarea, .field label{font-size:1.1rem;}
}


/* ---------- page À propos : le CV, dans le langage du site (cartes arrondies, Helvetica fin) ---------- */
#apropos.cv-section{padding:0 0 90px;}
.cv{
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, .66fr) minmax(0, 1fr);
  gap:6px;
  width:calc(100% - 12px); margin:0 auto;
  min-height:calc(100vh - 150px);
}
.cv-col{min-width:0; display:flex; flex-direction:column; justify-content:space-between; gap:56px;}
.cv-left, .cv-right{background:var(--panel); border-radius:28px; padding:clamp(28px, 3.4vw, 52px);}
.cv-center{justify-content:center; gap:0; padding:0 clamp(8px, 1.2vw, 20px);}

.cv-contact{display:flex; flex-direction:column; gap:3px; text-transform:lowercase;}
.cv-contact a{
  align-self:flex-start; width:fit-content;
  font-weight:200; font-size:1.05rem; letter-spacing:.02em; color:var(--ink);
  border-bottom:1px solid transparent; transition:border-color .25s ease;
}
.cv-contact a:hover{border-bottom-color:var(--ink);}

.cv-h{
  margin:0 0 22px;
  font-weight:600; font-size:.78rem; letter-spacing:.1em; text-transform:lowercase; color:var(--stone);
}
.cv-text{margin:0; font-weight:200; font-size:1.08rem; line-height:1.75; color:var(--ink);}
.cv-about{margin-bottom:54px;}
.cv-skills dt{
  font-weight:200; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--stone);
  margin-bottom:3px;
}
.cv-skills dd{margin:0 0 20px; font-weight:200; font-size:1.08rem; line-height:1.5; color:var(--ink);}
.cv-entry{margin-bottom:34px;}
.cv-entry:last-child{margin-bottom:0;}
.cv-role{
  display:flex; flex-direction:column; gap:4px; margin:0 0 12px;
  font-weight:200; font-size:1.12rem; letter-spacing:.02em; text-transform:uppercase; line-height:1.3; color:var(--ink);
}
.cv-org{font-weight:100; font-size:.72rem; letter-spacing:.06em; color:var(--stone);}

.cv-name{
  display:block; white-space:nowrap; text-transform:uppercase;
  font-weight:200; line-height:.92; letter-spacing:-.02em; font-size:7vw; color:var(--ink);
}
.cv-photo{
  display:block; width:100%; height:auto; margin:10px 0;
  aspect-ratio:383 / 358; object-fit:cover; border-radius:28px;
}
@media (max-width:900px){
  .cv{grid-template-columns:1fr; min-height:0;}
  .cv-center{order:-1; padding:28px 18px;}
  .cv-left, .cv-right{border-radius:18px; gap:44px;}
  .cv-photo{border-radius:18px;}
}

/* ---------- footer ---------- */
footer{padding:40px 0 60px; border-top:1px solid #D8D8D4;}
body.home-page.in-contact footer{background:#EDEDED;}
.footer-row{
  display:flex; justify-content:space-between; align-items:center; font-size:.82rem; color:var(--stone);
}
.footer-row a{color:var(--stone);}
.footer-row a:hover{color:var(--ink);}

@media (max-width: 960px){
  .wrap{padding:0 24px;}
  header{padding:20px 0;}

  .about-grid{grid-template-columns:1fr; border-top:3px solid var(--ink);}
  .about-col{border-right:0; border-bottom:3px solid var(--ink); padding:32px 0;}
  .about-col:last-child{border-bottom:0; padding-left:0;}

  section{padding:80px 0;}
}

@media (max-width: 700px){
  .slideshow-stage{aspect-ratio:4/3; border-radius:18px;}
}