/* Nouveau site public — port du handoff "Accueil v3.dc.html".
   Tout est en position absolue par rapport au viewport (pas de scroll). */

*, *::before, *::after { box-sizing: border-box; }
:root {
  --ico-lien: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
  --ico-croix: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23111' stroke-width='1.5' stroke-linecap='square'%3E%3Cpath d='M4 4L16 16M16 4L4 16'/%3E%3C/svg%3E");
}
/* Contenu pour les lecteurs d'écran et les moteurs de recherche : présent dans la page, invisible. */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
html, body { margin: 0; height: 100%; }
body {
  background: #fff;
  color: #111;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: #111; text-decoration: none; }

.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #ddd;
  font-family: soleil, 'Jost', sans-serif;
  color: #111;
}
/* Fond : deux calques en fondu enchaîné. Chaque calque est dimensionné et
   placé par v2.js pour que le point de cadrage de la photo tombe au centre. */
.bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; isolation: isolate; }
.bg.clickable { cursor: pointer; }
.bgl {
  position: absolute; left: 0; top: 0;
  background-size: 100% 100%; background-repeat: no-repeat;
  opacity: 0; transition: opacity 1.8s ease;
}
.bgl.on { opacity: 1; }

/* Pli central d'une revue ouverte */
.fold-shadow {
  position: absolute; top: 0; bottom: 0; left: 48.5%;
  width: 14px; margin-left: -7px; z-index: 1; pointer-events: none;
  background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.08) 35%, rgba(0,0,0,.12) 50%, rgba(255,255,255,.06) 60%, rgba(0,0,0,0) 100%);
}
.fold-line {
  position: absolute; top: 0; bottom: 0; left: 48.5%;
  width: 1px; z-index: 1; pointer-events: none;
  background: rgba(20,20,20,.45); filter: blur(.7px);
}

/* Cadres papier */
.paper {
  background: #f3f1ea;
  font-size: clamp(9px, .72vw, 12px);
  letter-spacing: .01em;
}
.plus {
  position: absolute; left: 4px; bottom: -14px;
  font-size: 16px; line-height: 1; color: #111;
}

/* Logo */
.logo {
  position: absolute; left: 3%; top: 4.5%; z-index: 5;
  background: #fff;
  padding: 6px 10px 4px;
  font-family: baskerville-urw, 'Baskerville URW', 'Libre Baskerville', Baskerville, serif;
  font-size: clamp(16px, 1.9vw, 30px);
  line-height: 1.15;
  letter-spacing: .01em;
  color: #111;
}
.logo:hover, .about a:hover, .detail a:hover { color: #666; }
body.about-open .logo::after {
  content: ''; position: absolute; left: calc(100% + 6px); top: 0; bottom: 0;
  width: calc(1.15em + 10px);
  background: var(--ico-croix) center / 70% no-repeat;
}
body.about-open .logo:hover::after { opacity: .55; }
.about-close:hover, .about-closed a:hover { color: #666; }

/* Grilles */
.g6 {
  display: grid;
  grid-template-columns: 1.4fr .9fr 1.5fr 1.3fr 1fr 2.1fr;
  column-gap: 10px;
  align-items: start;
}
.g3 {
  display: grid;
  grid-template-columns: .9fr 1.4fr 3.2fr;
  column-gap: 10px;
}
.c3 { grid-column: 2 / span 2; text-wrap: pretty; }
.s2 { grid-column: span 2; }
.s23 { grid-column: 2 / span 2; text-wrap: pretty; }
.s4 { grid-column: span 4; text-wrap: pretty; }
.closed > .s4 { grid-column: 3 / -1; }
.big { font-size: 1.6em; line-height: 1; font-weight: 600; }
.big.code { letter-spacing: .04em; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Cadre projet (haut droite) : s'ouvre au survol */
.panel {
  position: absolute; right: 1.2vw; top: 1.2vw; z-index: 4;
  width: 46%; min-width: 300px;
  height: auto;
  padding: 1.1vw 1.4vw 1.3vw 2.4vw;
  line-height: 1.25;
  display: flex; flex-direction: column;
}
.panel.open { height: calc(100% - 2.4vw); }
.panel .head {
  padding: 7px 0;
  border-top: 1px solid #111; border-bottom: 1px solid #111;
  flex: none;
}
.panel .closed { padding-top: 6px; color: #111; }
.panel a.closed[href] { cursor: pointer; }
.panel a.closed[href]:hover { color: #666; }
.panel.open .closed { display: none; }
.panel .list {
  display: none; flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: none;
}
.panel .list::-webkit-scrollbar { display: none; }
.panel.open .list { display: block; }
@media (min-width: 761px) {
  .panel:hover { height: calc(100% - 2.4vw); }
  .panel:hover .closed { display: none; }
  .panel:hover .list { display: block; }
}

.row[hidden] { display: none; }
.row {
  padding: 7px 0;
  border-bottom: 1px solid #111;
  color: #111;
  cursor: pointer;
  transition: color .15s ease;
}
.row.noclick { color: #b4b0a6; cursor: default; }

/* Aperçu carré de la 1re image du projet survolé */
.preview {
  position: absolute;
  top: 4.5%;
  left: calc(54% - 2.8vw - min(21vw, 340px));
  width: min(21vw, 340px);
  aspect-ratio: 1 / 1;
  z-index: 4;
  background: #c4b7a3 center / cover no-repeat;
  pointer-events: none;
  display: none;
}
.preview.on { display: block; }

/* Bloc "À propos" (Accueil) : lien fermé, panneau ouvert à gauche */
/* Le mot « À propos » ne bouge pas à l'ouverture : le petit bloc fermé est placé
   (bas relevé de la réserve --pb du bloc ouvert, marge gauche identique) pour que
   son texte tombe exactement sur celui de la ligne du bas du bloc ouvert, qui
   garde sous elle la place des mentions légales. */
.about, .about-closed { --pb: calc(.8vw + 1.25em + 6px); }
.about-closed {
  position: absolute; left: 1.3%; bottom: calc(3% + var(--pb) - .7vw); z-index: 3;
  padding: .7vw calc(1.7vw + 10px);
  line-height: 1.35; font-weight: 600; white-space: nowrap;
}
.about-closed[hidden] { display: none; }
.about {
  position: absolute; left: 1.3%; top: 0; bottom: 3%; z-index: 4;
  width: 28%; min-width: 300px;
  padding: calc(4.5vh + 1.9vw + 34px) 1.4vw var(--pb) calc(1.7vw + 10px);
  line-height: 1.35;
  display: flex; flex-direction: column;
}
.about[hidden] { display: none; }
.about-body {
  flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
  border-top: 1px solid #111;
}
.about-body::-webkit-scrollbar { display: none; }
.about .g2 {
  padding: 7px 0 9px; border-bottom: 1px solid #111;
}
.about .g2:last-child { border-bottom: 0; }
.about-text { text-wrap: pretty; }
.about .formation-logo { display: block; margin-top: .8em; max-height: 2.9em; max-width: 100%; width: auto; }
.about .about-text + .formation-logo { margin-top: .8em; }
.about .g2 > .formation-logo:first-child { margin-top: 0; }
.about .assoc { margin-top: .8em; }
.about-text p { margin: 0 0 .8em; }
.about-text > :last-child { margin-bottom: 0; }
.about .pubs { display: grid; grid-template-columns: 3em 1fr; column-gap: 8px; row-gap: 3px; }
.about .ul { text-decoration: underline; text-underline-offset: 2px; }
/* Petite icône « lien » après chaque lien externe de À propos */
.about a[href^="http"]::after {
  content: ''; display: inline-block; width: .85em; height: .85em;
  margin-left: .3em; vertical-align: -.1em; background: currentColor;
  -webkit-mask: var(--ico-lien) center / contain no-repeat; mask: var(--ico-lien) center / contain no-repeat;
}
.about-legal {
  position: absolute; left: calc(1.7vw + 10px); right: 1.4vw; bottom: .8vw;
  display: flex; justify-content: space-between; font-size: .9em; color: #555;
}
.about-close { flex: none; padding-top: 7px; border-top: 1px solid #111; font-weight: 600; }

/* Bloc détails (vue Projet) : le texte long apparaît au survol */
.detail {
  position: absolute; left: 3.75%; top: 53%; z-index: 3;
  width: 42%; min-width: 300px; max-height: 38%;
  display: flex; flex-direction: column;
  padding: .6vw 1.4vw .8vw;
  line-height: 1.3;
}
.detail > .g3:first-child { padding-bottom: 5px; }
.detail .details {
  row-gap: 1px; padding: 5px 0;
  border-top: 1px solid #111; border-bottom: 1px solid #111;
}
.detail .lab { font-weight: 600; }
.detail .sp { margin-top: .7em; }
.detail .credits { padding-top: 5px; }
.detail .long {
  display: none; flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
  margin-top: 8px;
}
.detail .long::-webkit-scrollbar { display: none; }
/* Au départ : la description du projet seule (et le +). Le reste apparaît au survol,
   ou au toucher sur téléphone (.open). Sans description, tout reste affiché. */
.detail > .details, .detail > .credits { display: none; }
.detail.open > .details, .detail.open > .credits, .detail.no-lead > .details, .detail.no-lead > .credits { display: grid; }
.detail.open .long, .detail.no-lead .long { display: grid; }
@media (min-width: 761px) {
  .detail:hover > .details, .detail:hover > .credits, .detail:hover .long { display: grid; }
}
.long-text p { margin: 0 0 .8em; }
.long-text p:last-child { margin-bottom: 0; }
.long-text > *:last-child { margin-bottom: 0; }
.long-text a { text-decoration: underline; }

/* Images de la galerie (vue Projet) et de l'À propos (Accueil) — positionnées par v2.js */
#images .im {
  position: absolute; cursor: pointer;
  background: #b8b2a6;
}
#images .im > div {
  width: 100%; height: 100%;
  background: center / cover no-repeat;
}

/* ---------- Version téléphone ----------
   Pas de survol : le menu et le texte long du bloc détails s'ouvrent au toucher
   (classe .open posée par v2.js). Pas de pli central, pas d'aperçu carré, pas
   d'image du bureau dans « À propos ». */
@media (max-width: 760px) {
  .fold-shadow, .fold-line, .preview { display: none !important; }
  .paper { font-size: 12px; }
  .logo { top: 10px; font-size: 19px; }

  .g6 { grid-template-columns: 1.5fr .9fr 1.5fr 1.3fr 1fr; column-gap: 8px; }
  .g6 > *, .g3 > * { min-width: 0; overflow-wrap: anywhere; }
  .g6 > .big { overflow-wrap: normal; }
  .panel .g6 > :nth-child(6) { display: none; }
  .s2 { grid-column: span 2; }
  .s4 { grid-column: span 3; }
  .g3 { grid-template-columns: 1.15fr 1.4fr 2.6fr; column-gap: 8px; }

  /* Menu : pleine largeur avec une petite marge autour, texte sous le logo */
  .panel {
    left: 8px; right: 8px; top: 8px; width: auto; min-width: 0;
    padding: 48px 14px 12px;
  }
  .panel.open { height: calc(100% - 16px); }
  .panel.open .plus { display: none; }
  .panel .list { -webkit-overflow-scrolling: touch; }
  .row { padding: 10px 0; }
  body.page-accueil .row[hidden] { display: grid; }

  /* Bloc détails : en bas, pleine largeur, jamais plus d'une demi-page */
  .detail {
    left: 0; right: 0; top: auto; bottom: 0;
    width: 100%; min-width: 0;
    max-height: 50vh; max-height: 50dvh;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 10px 14px 12px;
    cursor: pointer;
  }
  .detail > * { flex: none; }
  .detail .long { overflow: visible; }
  .detail .plus { position: static; display: block; width: max-content; margin-top: 6px; transition: transform .2s ease; }
  .detail.open .plus { transform: rotate(45deg); }

  /* À propos : plein écran sous le logo, le menu est masqué pendant la lecture */
  .about {
    left: 0; right: 0; top: 0; bottom: 0;
    width: 100%; min-width: 0;
    padding: 56px 14px var(--pb);
  }
  body.about-open .panel { display: none; }
  .about, .about-closed { --pb: calc(12px + 1.25em + 6px); }
  .about-closed { left: 0; bottom: calc(var(--pb) - 10px); padding: 10px 14px; }
  .about-legal { left: 14px; right: 14px; bottom: 12px; }
  body.page-projet .about-closed { display: none; }
}