*{box-sizing:border-box}body{margin:0;font:11px Arial,sans-serif;color:#111;background:#fff}.side{position:fixed;width:285px;height:100vh;padding:18px 20px;display:flex;flex-direction:column;background:#fff}.brand{display:block;width:220px;max-width:100%;height:auto;margin:0 0 25px 0}.nav,.tools{display:flex;flex-direction:column;gap:3px;text-transform:uppercase}.nav a,.tools a,.index-link{color:#111;text-decoration:none}.nav a:hover,.tools a:hover,.index-link:hover{text-decoration:underline;text-underline-offset:2px}.active{text-decoration:underline!important;text-underline-offset:2px}.tools{margin-top:26px}.copy{margin-top:auto;color:#777}.main{margin-left:285px;padding:10px 10px 20px 0}.head{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid #111;padding:2px 0 10px;margin-bottom:10px;text-transform:uppercase}.head h1{font:16px Arial,sans-serif;margin:0;font-weight:400}.project-meta{text-align:right}.project-meta p{margin:3px 0 0;color:#777}.project-type{color:#4b2382}.index-link{display:block}.stack{display:flex;flex-direction:column;gap:10px}.stack img{display:block;width:100%;height:auto;border:0;outline:0}
.home-main{margin-left:285px;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}.damier-cadre{--fond:#fff;--lettre:#cfccc4;--mot:#161616;--accent:#6a3df2;--corps:4.2cqi;--largeur:640px;container-type:inline-size;width:min(62vw,640px);max-width:var(--largeur)}.damier{display:grid;grid-template-columns:repeat(15,1fr);aspect-ratio:1;background:var(--fond);font-family:"DM Mono",ui-monospace,monospace;font-size:18px;font-size:var(--corps);user-select:none;cursor:pointer}.damier span{display:flex;align-items:center;justify-content:center;line-height:1;color:var(--lettre);transition:color .6s ease}.damier span.on{color:var(--mot);font-weight:500}.damier span.on.accent{color:var(--accent)}.damier.fini span.on{color:var(--accent)}
@media(max-width:760px){.side{position:relative;width:auto;height:auto}.brand{width:190px;margin-bottom:18px}.nav,.copy{display:none}.tools{flex-direction:row}.main,.home-main{margin-left:0;padding:0 8px}.home-main{min-height:65vh}.damier-cadre{width:min(92vw,640px)}}

/* Présentation éditoriale des pages projet */
.project-intro{display:grid;grid-template-columns:minmax(300px,1.35fr) minmax(170px,.7fr) minmax(150px,.55fr);column-gap:36px;align-items:start;border-bottom:1px solid #111;padding:18px 0 16px;margin-bottom:10px;text-transform:uppercase}
.project-title{font:400 19px/1.15 Arial,sans-serif;margin:10px 0 0;letter-spacing:0}
.project-client{font:400 11px/1.3 Arial,sans-serif;margin:13px 0 0}
.project-description{grid-column:1 / 3;max-width:720px;margin:22px 0 0;font:400 11px/1.45 Arial,sans-serif;text-transform:none}
.project-navmeta{grid-column:3;grid-row:1 / 3;text-align:right;align-self:start}
.project-navmeta .index-link{margin:0 0 30px}
.project-navmeta .project-type{display:block;color:#4b2382;margin:0;font:400 11px/1.25 Arial,sans-serif}
@media(max-width:900px){.project-intro{grid-template-columns:1fr 180px}.project-title{grid-column:1}.project-client{grid-column:1}.project-description{grid-column:1}.project-navmeta{grid-column:2;grid-row:1 / 4}}
@media(max-width:760px){.project-intro{display:block;padding:14px 0}.project-title{font-size:17px}.project-client{margin-top:14px}.project-description{margin-top:18px}.project-navmeta{text-align:left;margin-top:22px}.project-navmeta .index-link{margin-bottom:18px}}

/* Page projet : titre/client en casse normale, jamais en capitales */
.project-page .project-head h1{
  text-transform:none !important;
  letter-spacing:0 !important;
}

/* Correction effective du titre/client de la page projet */
.project-intro .project-title{
  text-transform:none !important;
}

/* L'Idiot — hiérarchie du bloc projet */
.project-intro .project-title,
.project-intro .project-client{
  text-transform:none !important;
}
.project-client{
  margin-top:4px;
  font-size:11px;
  line-height:1.25;
}

/* Aligne par le bas le descriptif et la nature du travail,
   juste au-dessus du filet. */
.project-meta{
  display:flex;
  align-items:flex-end;
}
.project-type{
  margin-top:auto !important;
  margin-bottom:0 !important;
  padding-bottom:0 !important;
}

/* Ajustements typographiques — page L'Idiot */
.project-intro .project-title{
  font-size:21px !important;
  line-height:1.15;
  font-weight:400 !important;
}
.project-intro .project-client{
  font-size:10px !important;
  line-height:1.25;
  font-weight:400 !important;
  text-transform:none !important;
}
.image-caption{
  font-size:10px;
  line-height:1.2;
  font-weight:400;
  margin:2px 0 5px;
  text-transform:none;
}

/* VERSION 8 — réglages définitifs de la page L'Idiot */
.project-intro{
  align-items:stretch;
}
.project-intro .project-title{
  grid-column:1 / 3;
  grid-row:1;
  margin:10px 0 0;
  font-size:21px !important;
  line-height:1.15;
  font-weight:400 !important;
  text-transform:none !important;
}
.project-intro .project-client{
  grid-column:1 / 3;
  grid-row:2;
  margin:5px 0 0;
  font-size:10px !important;
  line-height:1.25;
  font-weight:400 !important;
  text-transform:none !important;
}
.project-intro .project-description{
  grid-column:1 / 3;
  grid-row:3;
  margin:22px 0 0;
}
.project-intro .project-navmeta{
  grid-column:3;
  grid-row:1 / 4;
  align-self:stretch;
  display:flex;
  flex-direction:column;
  text-align:right;
}
.project-intro .project-navmeta .index-link{
  margin:0;
}
.project-intro .project-navmeta .project-type{
  margin-top:auto !important;
  margin-bottom:0 !important;
  padding:0 !important;
  color:#4b2382;
}
.image-caption{
  color:#4b2382 !important;
  text-align:right;
  font-size:10px;
  line-height:1.2;
  font-weight:400;
  margin:0 0 -5px 0;
  text-transform:none;
}
@media(max-width:900px){
  .project-intro .project-title,
  .project-intro .project-client,
  .project-intro .project-description{grid-column:1}
  .project-intro .project-navmeta{grid-column:2;grid-row:1 / 4}
}
@media(max-width:760px){
  .project-intro .project-navmeta{display:block;text-align:left;margin-top:22px}
  .project-intro .project-navmeta .index-link{margin-bottom:18px}
  .project-intro .project-navmeta .project-type{margin-top:0 !important}
  .image-caption{text-align:right}
}

/* VERSION 9 — légende collée au premier carré bleu */
.stack .first-caption{
  display:block;
  width:100%;
  margin:0 0 3px 0 !important;
  padding:0 !important;
  text-align:right;
  color:#4b2382 !important;
  line-height:1;
}
.stack .first-caption + img{
  margin-top:0 !important;
}

/* VERSION 10 — commanditaire légèrement plus présent */
.project-intro .project-client{
  font-size:11px !important;
  font-weight:400 !important;
}

/* VERSION 13 — légende du premier visuel au-dessus de l'oiseau noir */
.stack .first-caption{
  width:100%;
  box-sizing:border-box;
  text-align:left !important;
  padding-left:6.5% !important;
  padding-right:0 !important;
  margin:0 0 3px 0 !important;
  color:#4b2382 !important;
}

/* VERSION 14 — légende alignée sur le bord gauche du carré bleu/cartes de visite */
.stack .first-caption{
  width:100%;
  box-sizing:border-box;
  text-align:left !important;
  padding-left:25.4% !important;
  padding-right:0 !important;
  margin:0 0 3px 0 !important;
  color:#4b2382 !important;
}

/* VERSION 15 — légende alignée exactement sur le bord gauche de 0.jpg */
.stack .first-caption{
  width:100%;
  box-sizing:border-box;
  text-align:left !important;
  padding-left:0 !important;
  padding-right:0 !important;
  margin:0 0 3px 0 !important;
  color:#4b2382 !important;
}

/* L'IDIOT — suppression du filet + légende superposée au visuel 0.jpg */
.project-intro{
  border-bottom:none !important;
}
.first-visual-overlay{
  position:relative;
  width:100%;
}
.first-visual-overlay > img{
  display:block;
  width:100%;
  height:auto;
}
.first-visual-overlay .first-caption{
  position:absolute !important;
  z-index:2;
  top:10px;
  left:10px;
  margin:0 !important;
  padding:0 !important;
  width:auto !important;
  color:#4b2382 !important;
  font-size:10px !important;
  line-height:1.1 !important;
  font-weight:400 !important;
  text-align:left !important;
}

/* Animation de l'oiseau — remplace 1.jpg */
.bird-animation{
  display:block;
  width:100%;
  aspect-ratio:948 / 660;
  height:auto;
  border:0;
  margin:0;
  padding:0;
  overflow:hidden;
  background:#fff;
}

/* Légende animation motif / oiseau */
.bird-animation-wrap{position:relative;width:100%;}
.bird-caption{position:absolute;z-index:10;left:14px;top:12px;font-size:10px;line-height:1.1;font-weight:400;color:#4b2382;text-align:left;margin:0;pointer-events:none;}


/* Légende sur le visuel 3 */
.visual-caption-overlay{position:relative;width:100%;}
.visual-caption-overlay > img{display:block;width:100%;height:auto;}
.visual-caption{position:absolute;z-index:10;left:14px;top:12px;font-size:10px;line-height:1.25;font-weight:400;color:#4b2382;text-align:left;margin:0;max-width:48%;pointer-events:none;}

/* VERSION 10 — réglage des légendes */
/* Légende du visuel 2 : toujours sur une seule ligne */
.visual-caption{
  max-width:none !important;
  white-space:nowrap !important;
  width:max-content !important;
}

/* Légende de l'animation : éclaircie localement sans masquer le dessin */
.bird-caption{
  top:12px !important;
  left:14px !important;
  padding:4px 9px 5px 7px !important;
  background:rgba(255,255,255,.78) !important;
  box-shadow:0 0 12px 9px rgba(255,255,255,.58) !important;
  border-radius:2px;
}

@media (max-width:700px){
  .visual-caption{font-size:8px !important;left:8px !important;top:8px !important;}
  .bird-caption{font-size:9px !important;left:9px !important;top:8px !important;}
}

/* Structure commune des pages projet : texte de présentation puis respiration avant le premier visuel */
.project-intro{
  margin-bottom:28px;
}
.project-intro .project-description{
  max-width:760px;
  margin-top:18px;
  font-size:11px;
  line-height:1.45;
  font-weight:400;
  text-transform:none !important;
}