:root{
    --ink: #141412;
    --ink-soft: #1b1a17;
    --paper: #e8e3d8;
    --paper-dim: #8a8579;
    --line: #322f29;
    --stamp: #a8402a;
  }

  *{ margin:0; padding:0; box-sizing:border-box; }

  html{ scroll-behavior:smooth; }

  body{
    background:var(--ink);
    color:var(--paper);
    font-family:'Newsreader', serif;
    font-weight:400;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }

  a{ color:inherit; text-decoration:none; }

  .mono{
    font-family:'IBM Plex Mono', monospace;
    letter-spacing:0.04em;
  }

  /* ============ NAV ============ */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(20,20,18,0.97);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{
    max-width:1400px; margin:0 auto;
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 32px;
    gap:24px;
  }
  .brand{
    font-family:'IBM Plex Mono', monospace;
    font-size:13px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--paper);
  }
  nav ul{
    display:flex; list-style:none; gap:28px;
    flex-wrap:wrap;
  }
  nav a{
    font-family:'IBM Plex Mono', monospace;
    font-size:11.5px;
    letter-spacing:0.09em;
    text-transform:uppercase;
    color:var(--paper-dim);
    padding-bottom:4px;
    border-bottom:1px solid transparent;
    transition:color .2s ease, border-color .2s ease;
  }
  nav a:hover{ color:var(--paper); }
  nav a.active{
    color:var(--stamp);
    border-bottom:1px solid var(--stamp);
  }
  nav a.home-link{
    color:var(--stamp);
    border:1px solid var(--stamp);
    padding:4px 10px;
  }
  nav a.nav-contact{
    color:var(--paper);
    border:1px solid var(--paper-dim);
    padding:4px 10px;
  }
  nav a.nav-contact:hover{ border-color:var(--stamp); color:var(--stamp); }
  nav a.nav-contact.active{ color:var(--stamp); border-color:var(--stamp); }
  nav a.home-link:hover{
    background:var(--stamp);
    color:var(--ink);
  }

  /* ============ HERO (resserré dans un cadre) ============ */
  .hero-wrap{
    max-width:1400px; margin:0 auto;
    padding:64px 32px 16px;
  }
  .hero{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,560px) 1fr;
    gap:48px;
    align-items:center;
  }
  .hero-frame{
    position:relative;
    border:1px solid var(--line);
    padding:14px 14px 18px;
    background:var(--ink-soft);
  }
  .hero-frame::before{
    content:"";
    position:absolute; top:0; left:18px; right:18px; height:1px;
    background-image:repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 14px);
    opacity:.9;
  }
  .hero-frame img{
    width:100%; display:block;
    filter:contrast(1.03);
  }
  .hero-frame figcaption{
    margin-top:12px;
    display:flex; justify-content:space-between; align-items:baseline;
    font-family:'IBM Plex Mono', monospace;
    font-size:11px; color:var(--paper-dim);
  }
  .hero-frame figcaption .plate-no{ color:var(--stamp); }

  .hero-text{}
  .hero-eyebrow{
    font-size:12px;
    color:var(--stamp);
    text-transform:uppercase;
    margin-bottom:14px;
  }
  .hero-name{
    font-size:clamp(36px, 5.5vw, 64px);
    font-weight:400;
    font-style:italic;
    line-height:1.05;
    color:var(--paper);
  }
  .hero-tagline{
    margin-top:16px;
    font-size:15px;
    color:var(--paper-dim);
    max-width:480px;
  }

  @media (max-width:900px){
    .hero{ grid-template-columns:1fr; }
    .hero-wrap{ padding:40px 18px 8px; }
  }

  /* ============ SECTION HEADER ============ */
  section.report{ max-width:1400px; margin:0 auto; padding:56px 32px 40px; }

  .report-head{
    display:grid;
    grid-template-columns:260px 1fr;
    gap:48px;
    padding-bottom:56px;
    border-bottom:1px solid var(--line);
    margin-bottom:56px;
  }
  .report-index{
    font-size:12px; color:var(--paper-dim); margin-bottom:18px;
  }
  .report-meta div{
    font-size:12px; color:var(--paper-dim);
    margin-bottom:8px;
    display:flex; justify-content:space-between;
    max-width:260px; gap:14px;
    border-bottom:1px dotted var(--line);
    padding-bottom:6px;
  }
  .report-meta span:last-child{ color:var(--paper); text-align:right; }

  .report-title{
    font-size:clamp(30px, 4vw, 46px);
    font-weight:400;
    margin-bottom:22px;
    line-height:1.08;
  }
  .report-intro{
    font-size:17px;
    color:var(--paper);
    max-width:640px;
    line-height:1.65;
  }
  .report-intro em{
    color:var(--paper);
    font-style:italic;
  }
  .report-intro .note{
    display:block; margin-top:18px;
    font-family:'IBM Plex Mono', monospace;
    font-size:11.5px;
    color:var(--paper-dim);
    letter-spacing:0.03em;
    font-style:normal;
  }

  /* ============ PLANCHE SUB-HEADER ============ */
  .planche-head{
    display:flex; align-items:baseline; justify-content:space-between;
    gap:20px; flex-wrap:wrap;
    margin-bottom:28px;
    padding-bottom:14px;
    border-bottom:1px solid var(--line);
  }
  .planche-title{
    font-size:22px; font-style:italic; font-weight:400;
    color:var(--paper);
  }
  .planche-count{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px; color:var(--paper-dim);
    text-transform:uppercase; letter-spacing:0.08em;
  }
  .planche-block{ margin-bottom:64px; }
  .planche-block:last-child{ margin-bottom:0; }

  /* ============ CONTACT SHEET GRID (cases uniformes, photo entière visible via letterboxing) ============ */
  .sheet{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:28px 24px;
  }
  figure.frame{
    position:relative;
    border:1px solid var(--line);
    padding:10px 10px 14px;
    background:var(--ink-soft);
    transition:border-color .25s ease, transform .25s ease;
  }
  figure.frame::before{
    content:"";
    position:absolute; top:0; left:14px; right:14px; height:1px;
    background-image:repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 14px);
    opacity:.9;
  }
  figure.frame:hover{
    border-color:var(--stamp);
    transform:translateY(-2px);
  }
  .frame-img-wrap{
    overflow:hidden;
    aspect-ratio: 4 / 3;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#0c0b09;
  }
  figure.frame img{
    width:100%; height:100%; display:block;
    object-fit:contain;
    transition:transform .5s ease;
  }
  figure.frame:hover img{
    transform:scale(1.02);
  }
  figcaption{
    margin-top:12px;
    display:flex; justify-content:space-between; align-items:baseline;
    gap:10px;
  }
  .plate-no{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px; color:var(--stamp);
    white-space:nowrap;
  }
  .plate-loc{
    font-family:'IBM Plex Mono', monospace;
    font-size:10.5px; color:var(--paper-dim);
    text-align:right;
  }
  .keeper-dot{
    display:inline-block; width:6px; height:6px; border-radius:50%;
    background:var(--stamp); margin-right:6px;
    opacity:0; transition:opacity .25s ease;
    position:relative; top:-1px;
  }
  figure.frame:hover .keeper-dot{ opacity:1; }

  /* ============ OTHER REPORTAGES INDEX ============ */
  .index-section{
    max-width:1400px; margin:40px auto 0; padding:64px 32px 40px;
    border-top:1px solid var(--line);
  }
  .index-label{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px; color:var(--paper-dim);
    text-transform:uppercase; letter-spacing:0.1em;
    margin-bottom:28px;
  }
  .index-list{ list-style:none; }
  .index-list li{
    display:flex; align-items:baseline; gap:20px;
    padding:20px 0;
    border-bottom:1px solid var(--line);
    color:var(--paper-dim);
  }
  .index-list li .num{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    width:24px;
  }
  .index-list li .title{
    font-size:22px; font-style:italic;
    flex:1;
  }
  .index-list li .status{
    font-family:'IBM Plex Mono', monospace;
    font-size:10.5px; text-transform:uppercase; letter-spacing:0.08em;
  }

  /* ============ FOOTER ============ */
  footer{
    max-width:1400px; margin:0 auto;
    padding:48px 32px 64px;
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px;
    font-family:'IBM Plex Mono', monospace;
    font-size:11px; color:var(--paper-dim);
    letter-spacing:0.03em;
  }

  /* ============ RESPONSIVE ============ */
  @media (max-width:900px){
    .report-head{ grid-template-columns:1fr; gap:24px; }
    .sheet{ grid-template-columns:repeat(2, 1fr); }
  }
  @media (max-width:600px){
    .nav-inner{ padding:14px 18px; }
    nav ul{ gap:16px; }
    section.report{ padding:48px 18px 20px; }
    .sheet{ grid-template-columns:1fr; }
    .index-section{ padding:48px 18px 20px; }
  }

  /* focus visibility */
  a:focus-visible{ outline:1px solid var(--stamp); outline-offset:3px; }

  /* ============ LIGHTBOX ============ */
  figure.frame{ cursor:zoom-in; }
  .hero-frame{ cursor:zoom-in; }

  .lightbox{
    position:fixed; inset:0; z-index:200;
    background:rgba(10,10,9,0.97);
    display:none;
    align-items:center; justify-content:center;
    padding:64px 24px;
  }
  .lightbox.open{ display:flex; }

  .lightbox-img-wrap{
    max-width:1200px; max-height:100%;
    display:flex; flex-direction:column; align-items:center;
    gap:18px;
  }
  .lightbox-img-wrap.wide{
    max-width:calc(100vw - 48px);
    width:calc(100vw - 48px);
  }
  .lightbox-img-wrap.wide img{
    width:calc(100vw - 48px);
    height:82vh;
    max-height:none;
    object-fit:contain;
  }
  .frame-img-wrap.matted img{
    box-shadow:0 0 0 1px #6e6a5c;
  }
  .lightbox img{
    max-width:100%; max-height:78vh;
    object-fit:contain;
    filter:contrast(1.02);
    box-shadow:0 30px 80px rgba(0,0,0,0.6);
  }
  .lightbox img.matted{
    box-shadow:0 0 0 1px #6e6a5c;
  }
  .lightbox-caption{
    display:flex; align-items:baseline; gap:14px;
    font-family:'IBM Plex Mono', monospace;
    font-size:14px;
    color:#b5b0a2;
  }
  .lightbox-caption .plate-no{ font-size:14px; }

  .lightbox-close{
    position:absolute; top:24px; right:32px;
    font-family:'IBM Plex Mono', monospace;
    font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--paper-dim);
    background:none; border:1px solid var(--line);
    padding:8px 14px;
    cursor:pointer;
    transition:color .2s ease, border-color .2s ease;
  }
  .lightbox-close:hover{ color:var(--paper); border-color:var(--stamp); }

  .lightbox-nav{
    position:absolute; top:50%; transform:translateY(-50%);
    background:none; border:1px solid var(--line);
    color:var(--paper-dim);
    font-family:'IBM Plex Mono', monospace;
    font-size:18px;
    width:44px; height:44px;
    cursor:pointer;
    transition:color .2s ease, border-color .2s ease;
  }
  .lightbox-nav:hover{ color:var(--paper); border-color:var(--stamp); }
  .lightbox-prev{ left:24px; }
  .lightbox-next{ right:24px; }

  @media (max-width:600px){
    .lightbox{ padding:48px 12px; }
    .lightbox-nav{ width:38px; height:38px; font-size:15px; }
    .lightbox-prev{ left:8px; }
    .lightbox-next{ right:8px; }
    .lightbox-close{ top:14px; right:14px; }
  }

  /* ============ MODE NOIR & BLANC (activé uniquement sur les pages photo N&B, via body.mono-tone) ============ */
  body.mono-tone .hero-frame img{ filter:grayscale(100%) contrast(1.05); }
  body.mono-tone figure.frame img{ filter:grayscale(100%) contrast(1.03); }
  body.mono-tone figure.frame:hover img{ filter:grayscale(85%) contrast(1.08); }
  body.mono-tone .lightbox img{ filter:grayscale(100%) contrast(1.03); }

  /* ============ MODE ÉDITION (légendes modifiables directement dans la page) ============ */
  #edit-toolbar{
    position:fixed; bottom:20px; right:20px; z-index:150;
    display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end;
  }
  .edit-btn{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px; letter-spacing:0.05em; text-transform:uppercase;
    background:var(--ink-soft); color:var(--paper);
    border:1px solid var(--line);
    padding:10px 14px;
    cursor:pointer;
    box-shadow:0 8px 24px rgba(0,0,0,0.4);
    transition:border-color .2s ease, color .2s ease;
  }
  .edit-btn:hover{ border-color:var(--stamp); color:var(--stamp); }
  .edit-btn-ghost{ opacity:.7; }
  .edit-btn-ghost:hover{ color:#c0392b; border-color:#c0392b; }

  body.edit-mode figure.frame{ border-color:rgba(168,64,42,0.4); }

  .plate-loc.editable, .report-intro.editable{
    outline:1px dashed var(--stamp);
    outline-offset:3px;
    cursor:text;
    background:rgba(168,64,42,0.06);
    border-radius:2px;
  }
  .plate-loc.editable:focus, .report-intro.editable:focus{
    outline:1px solid var(--stamp);
    background:rgba(168,64,42,0.12);
  }

  @media (max-width:600px){
    #edit-toolbar{ bottom:10px; right:10px; left:10px; }
    .edit-btn{ flex:1; text-align:center; }
  }

  /* ============ PAGE D'ACCUEIL ============ */
  .home-hero{
    max-width:900px; margin:0 auto;
    padding:80px 32px 8px;
    text-align:center;
  }
  .home-hero .hero-eyebrow{ text-align:center; }
  .home-hero .hero-name{ font-size:clamp(40px, 6vw, 72px); }
  .home-hero .hero-tagline{
    margin:20px auto 0; max-width:520px; text-align:center;
  }

  .intro-box{
    max-width:760px; margin:56px auto 0;
    padding:32px 36px;
    border:1px solid var(--line);
    background:var(--ink-soft);
  }
  .intro-box p{
    font-size:16px; line-height:1.7; color:var(--paper);
    margin:0 0 16px;
  }
  .intro-box p:last-child{ margin-bottom:0; }
  .home-contact{
    max-width:900px; margin:26px auto 0; padding:0 24px; text-align:center;
    font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.06em; color:var(--paper-dim);
  }
  .home-contact a{ color:var(--stamp); border-bottom:1px solid var(--stamp); }
  .home-contact a:hover{ color:var(--paper); border-color:var(--paper); }

  .showcase-wrap{
    max-width:1400px; margin:72px auto 0; padding:0 32px 80px;
  }
  .showcase-label{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px; color:var(--paper-dim);
    text-transform:uppercase; letter-spacing:0.08em;
    margin-bottom:24px;
    padding-bottom:14px;
    border-bottom:1px solid var(--line);
  }
  .showcase-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:36px 28px;
  }
  .showcase-card{
    display:block; text-decoration:none;
    color:var(--paper);
    border:1px solid var(--line);
    padding:10px 10px 14px;
    background:var(--ink-soft);
    transition:border-color .25s ease;
  }
  .showcase-card:hover{ border-color:var(--stamp); }
  .showcase-card .showcase-img-wrap{
    overflow:hidden;
    aspect-ratio:4/3;
    display:flex; align-items:center; justify-content:center;
    background:#0c0b09;
    margin-bottom:12px;
  }
  .showcase-card img{
    width:100%; height:100%; display:block;
    object-fit:contain;
    filter:contrast(1.02);
  }
  body.mono-tone .showcase-card img{ filter:grayscale(100%) contrast(1.03); }
  .showcase-card .showcase-title{
    font-size:15px; font-style:italic;
    text-align:center;
    border-bottom:1px solid transparent;
  }
  .showcase-card:hover .showcase-title{ border-bottom-color:var(--stamp); }

  @media (max-width:900px){
    .showcase-grid{ grid-template-columns:repeat(2, 1fr); }
    .intro-box{ margin:40px 18px 0; padding:24px 22px; }
    .home-hero{ padding:56px 18px 8px; }
  }
  @media (max-width:600px){
    .showcase-grid{ grid-template-columns:1fr 1fr; }
    .showcase-wrap{ padding:0 18px 56px; }
  }

  /* ============ DIAPORAMA ============ */
  .slideshow-btn{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px; letter-spacing:0.06em; text-transform:uppercase;
    color:var(--stamp);
    background:transparent;
    border:1px solid var(--stamp);
    padding:10px 20px;
    cursor:pointer;
    margin-bottom:48px;
    transition:background .2s ease, color .2s ease;
  }
  .slideshow-btn:hover{
    background:var(--stamp);
    color:var(--ink);
  }
  .lightbox-slideshow-indicator{
    font-size:11px;
    color:var(--paper-dim);
    margin-left:auto;
  }


  /* ============ SLIDESHOW TEXT CARDS ============ */
  .lightbox-card{
    position:absolute; inset:0; z-index:5;
    display:none; flex-direction:column; align-items:center; justify-content:flex-start;
    background:#0a0a09; padding:72px 28px 84px; overflow-y:auto; text-align:left; cursor:pointer;
  }
  .lightbox-card.show{ display:flex; }
  .lightbox-card-inner{ max-width:760px; margin:auto 0; width:100%; }
  .lightbox-card-kicker{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--stamp); margin-bottom:14px; }
  .lightbox-card-title{ font-size:clamp(26px,4vw,40px); line-height:1.15; margin-bottom:26px; color:var(--paper); }
  .lightbox-card-text{ font-size:clamp(16px,1.9vw,20px); line-height:1.65; color:#d6d1c2; }
  .lightbox-card-hint{ position:fixed; left:0; right:0; bottom:22px; text-align:center; font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.08em; color:#b5b0a2; pointer-events:none; }

  /* ============ LANGUAGE SWITCH ============ */
  nav li.lang-switch{ display:flex; align-items:center; gap:10px; margin-left:6px; }
  nav li.lang-switch a.lang-flag{ display:inline-flex; padding:0; border:0; line-height:0; opacity:0.45; transition:opacity .2s, transform .2s; }
  nav li.lang-switch a.lang-flag svg{ display:block; border:1px solid var(--line); border-radius:2px; }
  nav li.lang-switch a.lang-flag:hover{ opacity:0.9; }
  nav li.lang-switch a.lang-flag.active{ opacity:1; }
  nav li.lang-switch a.lang-flag.active svg{ border-color:var(--paper-dim); }
  .brand{ white-space:nowrap; }
  @media (min-width:901px){
    nav ul{ gap:14px; }
    nav a{ letter-spacing:0.04em; font-size:11px; }
    nav a.home-link, nav a.nav-contact{ padding:4px 8px; }
    nav li.lang-switch{ margin-left:2px; }
    .nav-inner{ padding-left:20px; padding-right:20px; gap:16px; }
  }

  /* ============ CONTACT ============ */
  .contact-form{ max-width:680px; margin:48px auto 80px; padding:0 24px; display:flex; flex-direction:column; gap:22px; position:relative; }
  .contact-form label{ display:flex; flex-direction:column; gap:8px; font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--paper-dim); }
  .contact-form input[type=text], .contact-form input[type=email], .contact-form select, .contact-form textarea{
    font:inherit; font-family:'Newsreader', serif; font-size:18px; letter-spacing:0; text-transform:none; color:var(--paper);
    background:transparent; border:1px solid var(--line); padding:12px 14px; border-radius:0; }
  .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{ outline:none; border-color:var(--stamp); }
  .contact-form select option{ background:#0a0a09; }
  .contact-form .contact-consent{ flex-direction:row; align-items:flex-start; gap:12px; text-transform:none; letter-spacing:0; font-size:12px; line-height:1.5; }
  .contact-form button{ align-self:flex-start; }
  .contact-status{ font-size:12px; color:var(--stamp); min-height:1em; }
  footer a{ color:inherit; }

  .lightbox-close{ z-index:20; }
  .lightbox-card-hint{ position:static !important; margin:44px auto 0; display:flex; flex-wrap:wrap; justify-content:center; gap:14px; pointer-events:auto !important; font-size:15px; }
  .lc-btn{ display:flex; align-items:center; gap:12px; cursor:pointer; background:transparent; color:#d6d1c2; border:1px solid #6e6a5c; padding:12px 18px; font-family:'IBM Plex Mono', monospace; text-align:left; }
  .lc-btn:hover{ border-color:var(--stamp); color:#fff; }
  .lc-main{ border-color:var(--stamp); }
  .lc-ico{ font-size:22px; line-height:1; min-width:24px; text-align:center; color:var(--stamp); }
  .lc-txt{ font-size:17px; display:flex; flex-direction:column; gap:3px; letter-spacing:0.04em; }
  .lc-txt small{ font-size:12px; color:#9a9588; letter-spacing:0.06em; }

  .lightbox-nav{ z-index:15; }

  .lightbox-card-sub{ display:block; margin-top:8px; font-size:clamp(16px,2vw,22px); font-style:italic; font-weight:400; color:#b5b0a2; }