@font-face{
  font-family:'FuturaC';
  src:url('../fonts/futura-c.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'FuturaC';
  src:url('../fonts/futura-c-light.woff2') format('woff2');
  font-weight:300;
  font-style:normal;
  font-display:swap;
}

:root{
  --bg:#ffffff;
  --fg:#111111;
  --line-c:rgba(0,0,0,0.08);
  --ptab-h:48px;
}

/* ===== Base ===== */
html,body{margin:0;padding:0;height:100%;}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:'Roboto',system-ui,-apple-system,Arial,sans-serif;
  font-weight:500;
  overflow-x:hidden;
}
body.no-scroll{overflow:hidden;}

/* ? lock page derri�re quand About est ouvert */
body.about-open{ overflow:hidden; }

a{color:inherit;}
a:focus-visible{
  outline:2px solid currentColor;
  outline-offset:3px;
  border-radius:6px;
}

/* ===== Hero ===== */
.hero{
  width:100vw;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-top:var(--ptab-h);
  box-sizing:border-box;
  position:relative;
}

/* Traits verticaux des 5 colonnes en fond */
.hero::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(to right, transparent calc(20% - 0.25px), var(--line-c) calc(20% - 0.25px), var(--line-c) calc(20% + 0.25px), transparent calc(20% + 0.25px)),
    linear-gradient(to right, transparent calc(40% - 0.25px), var(--line-c) calc(40% - 0.25px), var(--line-c) calc(40% + 0.25px), transparent calc(40% + 0.25px)),
    linear-gradient(to right, transparent calc(60% - 0.25px), var(--line-c) calc(60% - 0.25px), var(--line-c) calc(60% + 0.25px), transparent calc(60% + 0.25px)),
    linear-gradient(to right, transparent calc(80% - 0.25px), var(--line-c) calc(80% - 0.25px), var(--line-c) calc(80% + 0.25px), transparent calc(80% + 0.25px));
}

/* ===== Container ===== */
.container{
  position:relative;
  width:90%;
  max-width:500px;
  text-align:center;
  container-type:inline-size;
  -webkit-tap-highlight-color:transparent;
  margin:0 auto;
  margin-bottom:100px;
}

/* Logo hero */
.logo{
  width:100%;
  max-width:500px;
  display:block;
  margin:0 auto;
  user-select:none;
  -webkit-user-drag:none;
  color:inherit;
  fill:currentColor;
}

/* retire l�outline bleu sur le logo du hero */
#logo:focus,
#logo:focus-visible{outline:none !important;}

/* ===== Typo responsive ===== */
.row,.word,.left-line{
  font-size:clamp(12px,3cqw,24px);
  line-height:1.6;
  font-weight:500;
}
@supports not (width:1cqw){
  .row,.word,.left-line{font-size:clamp(12px,3vw,24px);}
}

/* ===== Mots d�coratifs ===== */
.word{
  position:absolute;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  user-select:text;
  cursor:default;
  pointer-events:none;
}

/* ===== Habillage positions ===== */
.hello{top:-260%;left:0;text-align:left;}
.standard{top:-180%;left:0;text-align:left;}
.est{top:-180%;left:28%;text-align:left;}
.atelier{top:-100%;left:28%;text-align:left;}
.de{top:-100%;left:54%;text-align:left;}
.creation{top:-100%;right:0%;text-align:right;}
.dediee{bottom:-100%;left:0%;text-align:left;}
.ala{bottom:-100%;left:28%;text-align:left;}
.com{bottom:-100%;left:54%;text-align:right;}
.repr{bottom:-180%;left:28%;text-align:left;}
.archi{bottom:-180%;right:0%;text-align:right;}
.sta{bottom:-250%;right:0%;text-align:left;}
.social{top:550%;right:28%;text-align:left;}

/* ===== Rows ===== */
.row{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:0.8rem;
  text-align:left;
}

/* ===== Bloc cr�ation ===== */
.bloc-creation{
  position:absolute;
  top:350%;
  left:0;
  width:100%;

  display:grid;
  grid-template-columns:28% 1fr;
  column-gap:0.8rem;
  text-align:left;
}

.bloc-creation .col-left{grid-column:1;}
.bloc-creation .col-right{
  grid-column:2;
  position:relative;
  text-align:left;
  z-index:1;
}

/* lignes g�n�r�es par JS */
.left-line{
  opacity:0;
  visibility:hidden;
}

/* ===== Bloc social ===== */
.bloc-social{
  position:absolute;
  top:600%;
  left:0;
  width:100%;

  display:grid;
  grid-template-columns:28% 1fr;
  column-gap:0.8rem;
  text-align:left;
}

.bloc-social .col-left{grid-column:1;}
.bloc-social .col-right{
  grid-column:2;
  position:static;
  display:flex;
  gap:10px;
  align-items:center;
}

/* social masqu� au d�part (JS r�v�le) */
.bloc-social .col-left,
.bloc-social .col-right{
  opacity:0;
  visibility:hidden;
}

/* Ic�nes sociaux */
.socialico{
  width:22px;
  height:22px;
  fill:currentColor;
  display:inline-block;
  vertical-align:middle;
  line-height:1;
}

/* ===== Toggle alt (hero) + MASK FIX ===== */
.line-wrapper{
  position:relative;
  display:block;
  width:100%;
  z-index:1;
}

.line-wrapper.active{z-index:999;}

.line,.alt{display:block;width:100%;}

.line{
  cursor:pointer;
  text-decoration:underline;
  user-select:none;
}

.line-wrapper .alt{
  position:absolute;
  top:0;
  left:0;
  width:100%;

  background:var(--bg) !important;
  color:var(--fg) !important;

  z-index:1000;

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  white-space:normal;
  line-height:1.6;
  padding:2px 0;
}

.line-wrapper.active .line{opacity:0;visibility:hidden;}
.line-wrapper.active .alt{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  text-decoration:none;
}


/* ===== Galerie ===== */
.gallery{
  padding-left:20px;
  padding-right:20px;
  padding-bottom: 80px;
}

/* ===== GRID (4 / 3 / 2 / 1 colonnes) ===== */
.grid{
  display:grid;
  gap:20px;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  align-items:start;
}

/* laptop / desktop �troit */
@media (max-width:1200px){
  .grid{grid-template-columns:repeat(3, minmax(0, 1fr));}
}

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

/* mobile */
@media (max-width:620px){
  .grid{grid-template-columns:1fr;}
  .gallery{padding-left:20px;padding-right:20px;}
}

/* ===== Tile description (toggle) ===== */
.tile{
  display:flex;
  align-items:center;
  justify-content:center;

  width:100%;
  margin:0;
  position:relative;
  cursor:pointer;

  background:white;
  padding:20px;
  box-sizing:border-box;
}
.tile img{
  width:100%;
  height:auto;
  display:block;
  z-index:1;
  transition:opacity 160ms ease;
}

.tile-desc{
  position:absolute;
  inset:0;
  z-index:2;

  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  padding:20px;

  background:var(--bg);
  color:var(--fg);

  font-size:14px;
  line-height:1.4;

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transition:opacity 160ms ease;
}

.desc-box{
  border:none !important;
  padding:0 !important;
  max-width:85%;
}

/* �tat actif */
.tile.active img{opacity:0;}
.tile.active .tile-desc{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

/* contour uniquement sur la tuile (pas sur le texte) */
.tile.active::after{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid var(--fg);
  pointer-events:none;
  z-index:3;
}

/* ===== Wide: 2 colonnes ===== */
.tile.tile-wide{
  grid-column:span 2;
}

/* sur tablette/mobile on revient normal */
@media (max-width:1100px){
  .tile.tile-wide{grid-column:span 1;}
}

/* ===== About overlay ===== */
.about-overlay{
  position:fixed;
  top:0;
  left:0; right:0; bottom:0;
  z-index:9998;
  background:var(--bg);
  color:var(--fg);

  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity 200ms ease;

  /* scroll interne + scrollbar cachée */
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none; /* Firefox */
}
.about-overlay::-webkit-scrollbar{ width:0; height:0; } /* Chrome/Safari */

body.about-open .about-overlay{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

/* ===== ABOUT � 2 colonnes ===== */
.about-inner{
  padding:40px;
  max-width:700px;
}

.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
}

.about-col h2{
  font-size:12px;
  font-weight:700;
  margin:0 0 12px;
  text-transform:none;
  letter-spacing:0.04em;
}

.about-col p{
  margin:0;
  font-weight:400;
  font-size:12px;
  line-height:1.5;
  max-width:300px;
}
.about-col .eng{
  margin:0;
  font-weight:400;
  font-size:12px;
  font-style: italic;
  line-height:1.5;
  max-width:300px;
}

.contact{
  display:grid;
  grid-template-columns:80px 1fr; /* largeur de la "tabulation" */
  row-gap:4px;                    /* contr�le l��cart vertical */
  column-gap:12px;                /* espace entre label / valeur */
}

.cgauche{
  font-weight:500;
	font-size:12px;
}

.cdroite{
  font-weight:400;
	font-size:12px;
}

/* Responsive */
@media (max-width:600px){
  .about-grid{
    grid-template-columns:1fr;
    gap:10px;
  }
  .about-col p {
    max-width:none;
  }
	
  .about-col .eng {
    max-width:none;
  }	
}

/* ===== Scroll hint (bottom) ===== */
.scroll-hint{
  position: fixed;
  left: 50%;
  bottom: 36px;
  transform: translateX(-50%);
  z-index: 9997; /* sous le header (9999) */

  display: flex;
  gap: 8px;
  align-items: center;

  font-size: 25px;
  letter-spacing: 0.04em;
  text-transform: uppercase;

  opacity: 1;
  visibility: visible;
  pointer-events: none;

  transition: opacity 200ms ease, transform 200ms ease, visibility 200ms ease;
}

/* petite anim discr�te */
.scroll-hint .scroll-arrow{
  display:inline-block;
  animation: scrollHintBounce 1.2s infinite ease-in-out;
}

@keyframes scrollHintBounce{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

/* caché quand on a commencé à scroller */
.scroll-hint.is-hidden{
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(6px);
}

/* ===== Portfolio ===== */
.portfolio{
  width:100%;
  height:100vh;
  padding-top:var(--ptab-h);
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  background:var(--bg);
  overflow:hidden;
}

/* ===== Tab bar — fixe, remonte progressivement au scroll vers le portfolio ===== */
.ptab-bar{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  border-bottom:0.5px solid rgba(0,0,0,0.1);
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:9999;
  background:var(--bg);
  transform:translateY(100vh);
  will-change:transform;
  container-type:inline-size;
}

.ptab{
  padding:16px 24px;
  display:flex;
  align-items:baseline;
  gap:10px;
  cursor:pointer;
  background:none;
  border:none;
  border-right:0.5px solid rgba(0,0,0,0.1);
  font-family:inherit;
  color:#111;
  text-align:left;
  position:relative;
  transition:background 0.15s;
  box-sizing:border-box;
}

.ptab:last-child{ border-right:none; }
.ptab:hover{ background:rgba(0,0,0,0.02); }

.ptab.active::after{
  content:'';
  position:absolute;
  bottom:-1px; left:0; right:0;
  height:1.5px;
  background:#111;
}

.ptab-num{
  font-size:9px;
  color:rgba(0,0,0,0.28);
  font-weight:400;
}

.ptab-label{
  font-family:'Roboto',sans-serif;
  font-size:clamp(12px,2cqw,15px);
  font-weight:700;
  text-transform:none;
  letter-spacing:0;
  transition:color 0.15s;
}

.ptab.active .ptab-label{ color:#111; }
.ptab:not(.active) .ptab-label{ color:rgba(0,0,0,0.32); }

/* ===== Body layout ===== */
.portfolio-body{
  display:grid;
  grid-template-columns:20vw 1fr 20vw;
  grid-template-rows:1fr;
  flex:1;
  min-height:0;
  overflow:hidden;
  position:relative;
}

/* ===== Left column ===== */
.portfolio-left{
  border-right:0.5px solid rgba(0,0,0,0.1);
  overflow-y:auto;
  scrollbar-width:none;
  display:flex;
  flex-direction:column;
  padding:40px 32px 30px;
  box-sizing:border-box;
  position:relative;
}
.portfolio-left::-webkit-scrollbar{ display:none; }
.portfolio-left .pcategory{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
}
.portfolio-left .pcategory .plist-items{ margin-top:auto; }

/* Vue navigation — liste des catégories */
.pnav-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
}
.pnav-item{
  font-family:'Roboto',sans-serif;
  font-size:28px;
  font-weight:400;
  text-transform:none;
  letter-spacing:0.15em;
  line-height:1.1;
  padding:14px 0;
  border-top:0.5px solid rgba(0,0,0,0.1);
  cursor:pointer;
  color:var(--fg);
  transition:opacity 0.15s;
}
.pnav-item:last-child{ border-bottom:0.5px solid rgba(0,0,0,0.1); }
.pnav-item:hover{ opacity:0.45; }

/* Bouton retour */
.pcat-back{
  display:inline-block;
  font-family:'Roboto',sans-serif;
  font-size:10px;
  font-weight:700;
  text-transform:none;
  letter-spacing:0;
  color:rgba(0,0,0,0.4);
  background:none;
  border:none;
  padding:0 0 20px;
  cursor:pointer;
  transition:color 0.15s;
}
.pcat-back:hover{ color:var(--fg); }

/* Bouton retour vue détail */
.pdetail-back{
  display:inline-block;
  font-family:'Roboto',sans-serif;
  font-size:10px;
  font-weight:700;
  text-transform:none;
  letter-spacing:0;
  color:rgba(0,0,0,0.4);
  background:none;
  border:none;
  padding:0 0 20px;
  cursor:pointer;
  transition:color 0.15s;
}
.pdetail-back:hover{ color:var(--fg); }

/* Vue détail projet */
.pdetail-title{
  font-family:'Roboto',sans-serif;
  font-size:24px;
  font-weight:700;
  text-transform:none;
  letter-spacing:0;
  line-height:1.1;
  margin:0 0 8px;
}
.pdetail-location{
  font-size:10px;
  letter-spacing:0.1em;
  color:rgba(0,0,0,0.45);
  margin:0 0 24px;
}
.pdetail-desc{
  font-size:12px;
  font-weight:500;
  line-height:1.65;
  margin:0 0 28px;
}
.pdetail-meta{
  display:flex;
  flex-direction:column;
  gap:0;
}
.pdetail-meta-row{
  display:flex;
  justify-content:space-between;
  font-size:9px;
  letter-spacing:0.1em;
  border-top:0.5px solid rgba(0,0,0,0.08);
  padding:8px 0;
}
.pdetail-meta-row:last-child{ border-bottom:0.5px solid rgba(0,0,0,0.08); }
.pdetail-meta-key{ color:rgba(0,0,0,0.35); }
.pdetail-meta-val{ color:var(--fg); text-align:right; }

/* ===== Vue overview — 5 colonnes ===== */
.portfolio-overview{
  grid-column:1/-1;
  grid-row:1;
  display:none;
  flex-direction:row;
  min-height:0;
  flex:1;
}
.portfolio-body.is-overview>.portfolio-left,
.portfolio-body.is-overview>.portfolio-right,
.portfolio-body.is-overview>.portfolio-aside{
  display:none;
}
.portfolio-body.is-overview>.portfolio-overview{
  display:flex;
}
.pov-col{
  width:20vw;
  flex-shrink:0;
  border-right:0.5px solid rgba(0,0,0,0.1);
  overflow-y:auto;
  scrollbar-width:none;
  padding:20px 32px 30px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  transition:background 0.12s ease;
}
.pov-col:last-child{ border-right:none; }
.pov-col::-webkit-scrollbar{ display:none; }
.pov-col:hover{ background:rgba(0,0,0,0.018); }
.pov-col .pcategory{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
}
.pov-col .pcategory .plist-items,
.pov-col>.plist-items{ margin-top:auto; }
.pov-col .pcategory-title{
  min-height:2.2em;
  display:flex;
  align-items:flex-end;
}
body.at-portfolio .portfolio-overview{ overflow:hidden; }
body.at-portfolio .pov-col{ overflow-y:auto; }

/* Légende image — dans la colonne aside */
.portfolio-aside{
  border-left:0.5px solid rgba(0,0,0,0.1);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:24px 24px 30px;
  box-sizing:border-box;
}
.pcontent-caption{
  display:flex;
  flex-direction:column;
  opacity:0;
  transition:opacity 0.15s ease;
}
.pcontent-caption.is-visible{ opacity:1; }
.pcaption-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding:10px 0;
  border-top:0.5px solid rgba(0,0,0,0.08);
  gap:12px;
}
.pcaption-row:last-child{ border-bottom:0.5px solid rgba(0,0,0,0.08); }
.pcaption-key{
  font-size:9px;
  color:rgba(0,0,0,0.28);
  flex-shrink:0;
}
.pcaption-val{
  font-size:11px;
  font-weight:500;
  color:var(--fg);
  text-align:right;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}

/* Vue image — overlay 2 colonnes */
.pimage-overlay{
  position:absolute;
  top:0; bottom:0; right:20vw;
  left:20vw;
  background:var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
  box-sizing:border-box;
  z-index:20;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.15s ease;
  grid-column:1 / -1;
}
.pimage-overlay.is-open{
  opacity:1;
  pointer-events:auto;
}
.pimage-box{
  background:#f7f7f7;
  padding:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  box-sizing:border-box;
  overflow:hidden;
}
.pimage-view{
  mix-blend-mode:multiply;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
}
.pimage-close{
  position:absolute;
  top:14px;
  right:14px;
  background:none;
  border:none;
  cursor:pointer;
  font-size:18px;
  line-height:1;
  color:var(--fg);
  padding:4px 6px;
  opacity:0.5;
  z-index:1;
}
.pimage-close:hover{ opacity:1; }
.pcontent-img{ cursor:pointer; }

/* Vue catégorie (état par défaut) */
.pcategory{
  display:flex;
  flex-direction:column;
  flex:1;
}

.pcategory-title{
  font-family:'Roboto',sans-serif;
  font-size:32px;
  font-weight:700;
  line-height:1.1;
  text-transform:none;
  letter-spacing:0;
  margin:0 0 20px;
}

.pcategory-desc{
  font-size:14px;
  font-weight:700;
  color:var(--fg);
  line-height:1.6;
  margin:0 0 32px;
  white-space:pre-line;
}

.pcategory-meta{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.pmeta-row{
  display:flex;
  justify-content:space-between;
  font-size:9px;
  color:rgba(0,0,0,0.28);
  letter-spacing:0.1em;
  border-top:0.5px solid rgba(0,0,0,0.08);
  padding-top:8px;
}

.pcategory-cta{
  margin-top:32px;
  font-size:10px;
  letter-spacing:0.14em;
  color:rgba(0,0,0,0.5);
  border:none;
  border-bottom:0.5px solid rgba(0,0,0,0.25);
  background:none;
  font-family:inherit;
  padding:0 0 2px;
  cursor:pointer;
  display:inline-block;
  transition:color 0.15s;
  text-align:left;
}
.pcategory-cta:hover{ color:#111; }

/* Projets inline dans vue catégorie */
.pcategory .plist-items{
  margin-top:24px;
}

/* Vue liste projets */
.plist-back{
  display:block;
  font-size:10px;
  color:rgba(0,0,0,0.4);
  cursor:pointer;
  background:none;
  border:none;
  font-family:inherit;
  padding:0;
  margin-bottom:24px;
  transition:color 0.15s;
  text-align:left;
}
.plist-back:hover{ color:#111; }

.plist-cat-label{
  font-size:10px;
  font-weight:500;
  text-transform:none;
  letter-spacing:0.12em;
  margin:0 0 16px;
  display:block;
}

.plist-items{
  list-style:none;
  margin:0;
  padding:0;
}

.plist-item{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding:10px 0;
  border-top:0.5px solid rgba(0,0,0,0.08);
  cursor:pointer;
  gap:12px;
  transition:opacity 0.15s;
}
.plist-items li:last-child{ border-bottom:0.5px solid rgba(0,0,0,0.08); }
.plist-item:hover{ opacity:0.55; }
.plist-item.active{ opacity:1; }

/* Filtres type de document */
.pfilter-list{
  list-style:none;
  margin:auto 0 0;
  padding:0;
}
.pfilter-item{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding:10px 0;
  border-top:0.5px solid rgba(0,0,0,0.08);
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  color:rgba(0,0,0,0.28);
  transition:color 0.15s;
}
.pfilter-list li:last-child{ border-bottom:0.5px solid rgba(0,0,0,0.08); }
.pfilter-item:hover{ color:rgba(0,0,0,0.55); }
.pfilter-item.active{ color:var(--fg); }

/* Espacement uniforme — overview, colonne gauche et aside */
.pov-col .plist-item,
.pov-col .pfilter-item,
.portfolio-left .plist-item,
.portfolio-aside .plist-item{
  padding:6px 0;
  align-items:center;
  min-height:30px;
}
.pov-col .pfilter-item .plist-item-name{ color:var(--fg); }
.portfolio-aside .plist-item-name{
  overflow-wrap:break-word;
  white-space:normal;
  text-align:right;
}

.plist-item-num{
  font-size:9px;
  color:rgba(0,0,0,0.28);
  letter-spacing:0.08em;
  flex-shrink:0;
  width:20px;
}

.plist-item-name{
  font-weight:700;
  font-size:11px;
  font-weight:500;
  flex:1;
}

.plist-item-sub{
  display:block;
  font-size:11px;
  font-weight:inherit;
  color:inherit;
  margin-top:2px;
}

.plist-item-year{
  font-size:9px;
  color:rgba(0,0,0,0.35);
  flex-shrink:0;
}

/* Vue détail projet */
.pdetail-back{
  display:block;
  font-size:10px;
  color:rgba(0,0,0,0.4);
  cursor:pointer;
  background:none;
  border:none;
  font-family:inherit;
  padding:0;
  margin-bottom:28px;
  transition:color 0.15s;
  text-align:left;
}
.pdetail-back:hover{ color:#111; }

.pdetail-title{
  font-family:'Roboto',sans-serif;
  font-size:18px;
  font-weight:400;
  line-height:1.2;
  text-transform:none;
  letter-spacing:0.2em;
  margin:0 0 6px;
}

.pdetail-location{
  font-size:11px;
  color:rgba(0,0,0,0.4);
  margin:0 0 20px;
}

.pdetail-desc{
  font-size:11px;
  line-height:1.8;
  color:rgba(0,0,0,0.55);
  margin:0 0 32px;
}

.pdetail-meta{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.pdetail-meta-row{
  display:flex;
  justify-content:space-between;
  font-size:9px;
  letter-spacing:0.1em;
  border-top:0.5px solid rgba(0,0,0,0.08);
  padding-top:8px;
}

.pdetail-meta-key{ color:rgba(0,0,0,0.28); }
.pdetail-meta-val{ color:rgba(0,0,0,0.65); }

/* ===== Right column ===== */
.portfolio-right{
  overflow-y:auto;
  scrollbar-width:none;
  padding:32px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.portfolio-right::-webkit-scrollbar{ display:none; }

/* Mode grille 2 colonnes, scroll vertical */
.portfolio-right.is-scroll{
  padding:32px 32px 30px;
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  gap:16px;
  overflow-y:hidden;
  overflow-x:hidden;
  scrollbar-width:none;
}

.pcontent-col{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.portfolio-right.is-scroll::-webkit-scrollbar{ display:none; }

/* Déverrouillage du scroll droit une fois arrivé au portfolio */
body.at-portfolio{ overflow:hidden; }
body.at-portfolio .portfolio-right.is-scroll{ overflow-y:auto; }

.pcontent-img-wrap{
  background:#f7f7f7;
  padding:30px;
}

.pcontent-img{
  width:100%;
  height:auto;
  display:block;
  mix-blend-mode:multiply;
}

/* Mosaïque flex (vue catégorie) */
.pmosaic{
  display:flex;
  flex-direction:column;
  gap:4px;
  height:100%;
}

.pmosaic-row{
  display:flex;
  gap:4px;
}

.pmosaic-block{ flex:1; }
.pmosaic-block.x2{ flex:2; }
.pmosaic-block.x3{ flex:3; }

/* Grille projets (vue liste / détail) */
.pgrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:4px;
  align-items:start;
}

.pgrid-item{
  position:relative;
  overflow:hidden;
  cursor:pointer;
  transition:opacity 0.15s ease;
}

.pgrid-item.dimmed{ opacity:0.12; }
.pgrid-item.col-span-2{ grid-column:span 2; }

.pgrid-ph{ width:100%; display:block; }

.pgrid-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.55);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity 0.15s ease;
}

.pgrid-item:hover .pgrid-overlay{ opacity:1; }

.pgrid-overlay-text{
  font-size:9px;
  font-weight:400;
  text-transform:none;
  letter-spacing:0.12em;
  color:#fff;
  text-align:center;
  padding:0 12px;
  line-height:1.5;
}

/* ===== About panel ===== */
.pabout-left{
  padding:40px 32px;
}
.pabout-title{
  font-family:'Roboto',sans-serif;
  font-size:32px;
  font-weight:400;
  text-transform:none;
  letter-spacing:0.2em;
  margin:0 0 32px;
}
.pabout-section{ margin-bottom:28px; }
.pabout-section h2{
  font-size:9px;
  font-weight:700;
  margin:0 0 12px;
  color:rgba(0,0,0,0.4);
}
.pabout-contact{
  display:grid;
  grid-template-columns:60px 1fr;
  row-gap:4px;
  column-gap:12px;
  font-size:11px;
}
.pabout-contact .cl{ color:rgba(0,0,0,0.38); }
.pabout-contact .cv{ color:#111; }
.pabout-contact a{ color:inherit; text-decoration:none; border-bottom:0.5px solid rgba(0,0,0,0.2); }

.pabout-right{
  overflow-y:auto;
  scrollbar-width:none;
  padding:40px 40px 40px 32px;
  box-sizing:border-box;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:40px;
  align-items:start;
}
.pabout-right::-webkit-scrollbar{ display:none; }
.pabout-right h2{
  font-size:9px;
  font-weight:700;
  margin:0 0 12px;
  color:rgba(0,0,0,0.4);
}
.pabout-right p{
  font-size:11px;
  line-height:1.8;
  color:rgba(0,0,0,0.55);
  margin:0 0 16px;
}
.pabout-right .eng{
  font-size:11px;
  font-style:italic;
  line-height:1.8;
  letter-spacing:0.02em;
  color:rgba(0,0,0,0.35);
  margin:0 0 16px;
}

/* Colonne Standard — titre et texte renforcés */
.pabout-studio h2{
  font-size:22px;
  font-weight:700;
  line-height:1.1;
  color:var(--fg);
  margin:calc((32px - 22px) * 1.1) 0 20px;
  text-transform:none;
  letter-spacing:0;
}
.pabout-studio p{
  font-size:11px;
  font-weight:700;
  line-height:1.7;
  color:var(--fg);
}
.pabout-studio .eng{
  font-size:11px;
  font-weight:700;
}

/* Mentions légales (colonne gauche About) */
.pabout-legal{
  margin-top:28px;
  padding-top:20px;
  border-top:0.5px solid rgba(0,0,0,0.08);
}
.pabout-legal-section{ margin-bottom:24px; }
.pabout-legal h2{
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:rgba(0,0,0,0.4);
  margin:0 0 10px;
}
.pabout-legal h3{
  font-size:9px;
  font-weight:700;
  color:rgba(0,0,0,0.4);
  margin:0 0 6px;
}
.pabout-legal p{
  font-size:9px;
  line-height:1.7;
  color:rgba(0,0,0,0.55);
  margin:0 0 8px;
}
.pabout-legal a{
  color:inherit;
  text-decoration:none;
  border-bottom:0.5px solid rgba(0,0,0,0.2);
}
.pabout-legal a:hover{ color:var(--fg); }

/* ===== Footer logo (bouton retour) ===== */
.pf-footer-home{
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  display:block;
  line-height:0;
  color:var(--fg);
}
.pf-footer-logo{
  height:12px;
  width:auto;
  display:block;
}

/* ===== Portfolio footer ===== */
.pf-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 32px;
  border-top:0.5px solid rgba(0,0,0,0.1);
  flex-shrink:0;
}

.pf-footer p{
  font-size:9px;
  color:rgba(0,0,0,0.25);
  letter-spacing:0.1em;
  margin:0;
}

.pf-footer-links{
  display:flex;
  align-items:center;
  gap:18px;
}

.pf-footer-links a{
  font-size:9px;
  color:rgba(0,0,0,0.3);
  letter-spacing:0.1em;
  text-decoration:none;
  border-bottom:0.5px solid rgba(0,0,0,0.18);
}

/* ===== Swatches thème ===== */
.swatches{
  display:flex;
  gap:5px;
  align-items:center;
}
.swatch{
  width:14px;
  height:14px;
  border:none;
  padding:0;
  cursor:pointer;
  flex-shrink:0;
}
.swatch[data-theme="0"]{ background:#ffffff; box-shadow:0 0 0 1px rgba(0,0,0,0.25); }
.swatch[data-theme="1"]{ background:#ee3c96; }
.swatch[data-theme="2"]{ background:#1a1751; }
.swatch[data-theme="3"]{ background:#ffcd34; }
.swatch.active{ box-shadow:0 0 0 1px rgba(0,0,0,0.3); }
.swatch[data-theme="0"].active{ box-shadow:0 0 0 1px rgba(0,0,0,0.3); }
html[data-theme="dark"] .swatch.active{ box-shadow:0 0 0 1px rgba(255,255,255,0.4); }

#logo{ cursor:pointer; }

/* ===== Thème sombre (rose #ee3c96, marine #1a1751) ===== */
html[data-theme="dark"] .ptab-bar{
  border-bottom-color:rgba(255,255,255,0.12);
}
html[data-theme="dark"] .ptab{
  color:#fff;
  border-right-color:rgba(255,255,255,0.12);
}
html[data-theme="dark"] .ptab:hover{ background:rgba(255,255,255,0.05); }
html[data-theme="dark"] .ptab-num{ color:rgba(255,255,255,0.35); }
html[data-theme="dark"] .ptab:not(.active) .ptab-label{ color:rgba(255,255,255,0.5); }
html[data-theme="dark"] .ptab.active .ptab-label{ color:#fff; }
html[data-theme="dark"] .ptab.active::after{ background:#fff; }

html[data-theme="dark"] .portfolio-left,
html[data-theme="dark"] .pov-col{ border-right-color:rgba(255,255,255,0.12); }
html[data-theme="dark"] .pov-col:hover{ background:rgba(255,255,255,0.03); }
html[data-theme="dark"] .portfolio-aside{ border-left-color:rgba(255,255,255,0.12); }

html[data-theme="dark"] .plist-item{ border-top-color:rgba(255,255,255,0.12); }
html[data-theme="dark"] .plist-items li:last-child{ border-bottom-color:rgba(255,255,255,0.12); }
html[data-theme="dark"] .pfilter-item{ border-top-color:rgba(255,255,255,0.12); color:rgba(255,255,255,0.5); }
html[data-theme="dark"] .pfilter-list li:last-child{ border-bottom-color:rgba(255,255,255,0.12); }
html[data-theme="dark"] .pfilter-item.active{ color:#fff; }
html[data-theme="dark"] .pfilter-item:hover{ color:rgba(255,255,255,0.75); }
html[data-theme="dark"] .plist-item-num{ color:rgba(255,255,255,0.5); }
html[data-theme="dark"] .plist-item-year{ color:rgba(255,255,255,0.5); }
html[data-theme="dark"] .plist-item-name{ color:#fff; }
html[data-theme="dark"] .pcategory-desc{ color:#fff; }


html[data-theme="dark"] .pf-footer{ border-top-color:rgba(255,255,255,0.12); }

html[data-theme="dark"] .scroll-hint{ color:rgba(255,255,255,0.45); }

/* ======================================================
   RESPONSIVE — iPad (≤ 1024px)
   ====================================================== */
@media (max-width:1024px){
  .portfolio-body{
    grid-template-columns:240px 1fr;
  }
  .portfolio-left{
    padding:28px 20px;
  }
  .pcategory-title,.pabout-title{
    font-size:24px;
  }
  .pcontent-img-wrap{
    padding:16px;
  }
  .portfolio-right.is-scroll{
    padding:20px;
    gap:12px;
  }
  .pcontent-col{
    gap:12px;
  }
}

/* ======================================================
   RESPONSIVE — iPhone (≤ 767px)
   ====================================================== */
@media (max-width:767px){
  :root{
    --ptab-h:44px;
  }

  /* Tab bar — compact */
  .ptab{
    padding:10px 4px;
    gap:2px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }
  .ptab-num{ display:none; }
  .ptab-label{
    font-size:8px;
    letter-spacing:0.06em;
  }

  /* Portfolio — hauteur auto, scroll naturel */
  .portfolio{
    height:auto;
    min-height:100dvh;
    overflow:visible;
  }

  /* Désactiver le verrouillage page au portfolio sur mobile */
  body.at-portfolio{
    overflow:auto;
  }
  body.at-portfolio .portfolio-right.is-scroll{
    overflow:visible;
  }

  /* Portfolio body — colonne unique */
  .portfolio-body{
    grid-template-columns:1fr;
    overflow:visible;
  }

  /* Colonne gauche */
  .portfolio-left{
    border-right:none;
    border-bottom:none;
    padding:24px 16px;
    overflow:visible;
  }

  /* Bouton retour — barre blanche fixe en haut sur mobile */
  .portfolio-left .pdetail-back{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0;
    padding:16px !important;
    background:#fff;
    border-bottom:0.5px solid rgba(0,0,0,0.06);
    z-index:20;
  }
  /* Titre catégorie — espace sous le bouton retour */
  .portfolio-left .pcategory-title{
    min-height:calc(2.2em - 2px);
    display:flex;
    align-items:flex-end;
  }
  .pcategory-title,.pabout-title{
    font-size:32px;
  }
  .pcategory-desc{
    font-size:16px;
  }
  .pabout-left{
    padding:24px 16px;
  }

  /* Colonne droite — 1 colonne d'images */
  .portfolio-right,.portfolio-right.is-scroll{
    padding:16px;
    overflow:visible;
    height:auto;
    flex-direction:column;
  }
  .pcontent-col{
    width:100%;
  }
  .pcontent-img-wrap{
    padding:12px;
  }


  /* Colonne aside — masquée sur mobile */
  .portfolio-aside{
    display:none;
  }

  /* Footer */
  .pf-footer{
    padding:16px;
    flex-wrap:wrap;
    gap:12px;
  }
  .pf-footer-links{
    gap:12px;
    flex-wrap:wrap;
  }

  /* Overview mobile — 5 colonnes, titres verticaux */
  .portfolio-overview{
    height:auto;
    flex-shrink:0;
    counter-reset:ov-col;
  }
  body.at-portfolio .portfolio-overview{
    overflow:hidden;
  }
  .pov-col{
    padding:20px 0 20px;
    justify-content:flex-start;
    align-items:center;
    cursor:pointer;
    overflow:hidden;
    counter-increment:ov-col;
    gap:12px;
  }
  .pov-col .pcategory{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    flex:unset;
    min-height:0;
  }
  .pov-col .pcategory-title{
    writing-mode:vertical-rl;
    transform:rotate(180deg);
    font-size:42px;
    font-weight:400;
    min-height:unset;
    white-space:nowrap;
    display:block;
    letter-spacing:0.02em;
  }
  .pov-col .pcategory-desc,
  .pov-col .plist-items{
    display:none;
  }

}
.pright-dataviz { padding:0 \!important; overflow:hidden \!important; }

/* ======================================================
   RESPONSIVE — Dataviz / Territoire (toutes tailles)
   ====================================================== */
@media (max-width:767px){
  /* Panneau dataviz droit : hauteur proche du carré + scroll activé */
  .pright-dataviz{
    height:80vw \!important;
    min-height:260px;
    max-height:55vh;
    overflow:scroll \!important;
    flex-shrink:0;
  }
}

/* ======================================================
   RESPONSIVE — Grand écran (≥ 1600px)
   ====================================================== */
@media (min-width:1600px){
  .container{
    transform:scale(1.75);
    transform-origin:center center;
  }
  .pcategory-title,.pabout-title{
    font-size:clamp(32px, 2.19vw, 56px);
  }
  .pcategory-desc{
    font-size:clamp(14px, 0.96vw, 25px);
  }
  .plist-item-name,
  .plist-item-sub,
  .pfilter-item{
    font-size:clamp(11px, 0.616vw, 15px);
  }
  .plist-item-year,
  .plist-item-num,
  .ptab-num{
    font-size:clamp(9px, 0.492vw, 13px);
  }
  .pov-col .plist-item,
  .portfolio-left .plist-item,
  .portfolio-aside .plist-item{
    padding-left:24px !important;
  }
  .ptab-label{
    font-size:clamp(15px, 1.02vw, 26px);
  }
  .pdetail-back,.pcat-back{
    font-size:clamp(10px, 0.68vw, 18px);
  }
  /* Vue détail projet */
  .pdetail-title{
    font-size:clamp(18px, 1.23vw, 32px);
  }
  .pdetail-location,
  .pdetail-desc{
    font-size:clamp(11px, 0.75vw, 19px);
  }
  .pdetail-meta-row{
    font-size:clamp(9px, 0.615vw, 16px);
  }
  /* Légende aside (caption image) */
  .pcaption-key{
    font-size:clamp(9px, 0.615vw, 16px);
  }
  .pcaption-val{
    font-size:clamp(11px, 0.75vw, 19px);
  }
  /* Overlay image (hover projet) */
  .pgrid-overlay-text{
    font-size:clamp(9px, 0.615vw, 16px);
  }
}