:root{
    --ink:#07374b;
    --ink-deep:#052838;
    --ink-2:#2c4d5c;
    --ink-soft:#5a7480;
    --mute:#a8a39a;
    --rule:#ebe9e2;
    --paper:#f3f0e6;
    --paper-2:#ece8db;
    --white:#f7f5ee;
  }
  *{box-sizing:border-box; margin:0; padding:0}
  html,body{
    background:var(--white); color:var(--ink);
    font-family:"Manrope", -apple-system, system-ui, sans-serif;
    font-weight:300; font-size:15px; line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{background:var(--ink); color:var(--white)}
  img{display:block; max-width:100%}

  /* ──────────── nav (logo centré, lignes fines) ──────────── */
  nav.top{
    position:sticky; top:0; z-index:30;
    background:rgba(247,245,238,.96);
    backdrop-filter:saturate(150%) blur(10px);
    -webkit-backdrop-filter:saturate(150%) blur(10px);
    border-bottom:1px solid var(--rule);
  }
  nav.top .row-1{
    display:grid; grid-template-columns: 1fr auto 1fr;
    align-items:center;
    padding:18px 44px 8px;
  }
  nav.top .row-1 .lang{
    font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--mute);
    display:flex; align-items:center; gap:8px;
  }
  nav.top .row-1 .lang span{cursor:pointer}
  nav.top .row-1 .lang span.on{color:var(--ink); border-bottom:1px solid var(--ink)}
  nav.top .row-1 .lang i{display:inline-block; width:1px; height:9px; background:var(--rule)}
  nav.top .row-1 .word img{
    height:220px; width:auto; display:block; margin:0 auto;
    transition: height .25s ease;
  }
  nav.top.scrolled .row-1 .word img{height:110px}
  nav.top .row-1 .right-link{
    justify-self:end;
    font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--mute);
    text-decoration:none;
  }
  nav.top .row-1 .right-link:hover{color:var(--ink)}
  nav.top .row-2{
    display:flex; justify-content:center; gap:50px;
    padding:14px 44px 16px;
    border-top:1px solid var(--rule);
  }
  nav.top .row-2 a{
    color:var(--ink); text-decoration:none;
    font-family:"Cormorant Garamond", serif;
    font-weight:400; font-size:16px; letter-spacing:.04em; font-style:italic;
    padding-bottom:2px; border-bottom:1px solid transparent;
    transition: border-color .2s ease;
  }
  nav.top .row-2 a:hover{border-color:var(--ink)}

  /* ──────────── HERO photographique ──────────── */
  header.hero{
    position:relative; overflow:hidden;
    height:88vh; min-height:620px;
    display:flex; flex-direction:column; justify-content:flex-end;
    padding: 0 44px 56px;
    color:#fff;
  }
  header.hero .bg{
    position:absolute; inset:0;
    /* l'image est posée en inline sur chaque page (style="background-image:…") */
    background-size:cover; background-position: center 55%;
    transform:scale(1.02);
  }
  header.hero .bg::after{
    content:""; position:absolute; inset:0;
    background:
      linear-gradient(180deg, rgba(5,40,56,.35) 0%, rgba(5,40,56,0) 22%, rgba(5,40,56,0) 50%, rgba(5,40,56,.78) 100%);
  }
  header.hero .meta{
    position:relative; z-index:2;
    display:grid; grid-template-columns: 1fr auto; align-items:end; gap:60px;
  }
  header.hero h1{
    font-family:"Cormorant Garamond", serif;
    font-weight:300; font-size:clamp(40px, 5.6vw, 84px);
    line-height:1.04; letter-spacing:-.005em;
    max-width:16ch;
    text-shadow: 0 2px 30px rgba(0,0,0,.2);
  }
  header.hero h1 em{font-style:italic; font-weight:400}
  header.hero .right-meta{
    text-align:right; font-size:11px; letter-spacing:.22em; text-transform:uppercase;
    line-height:2; opacity:.95;
  }
  header.hero .right-meta b{font-weight:500}
  header.hero .scroll-tag{
    position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
    z-index:2; font-size:10px; letter-spacing:.32em; text-transform:uppercase; opacity:.85;
  }
  header.hero .scroll-tag::after{
    content:""; display:block; width:1px; height:34px; background:rgba(255,255,255,.55);
    margin:12px auto 0;
  }
  header.hero .roman-credit{
    position:absolute; top:30px; left:44px; z-index:2;
    font-family:"Cormorant Garamond", serif; font-style:italic;
    font-size:12px; letter-spacing:.18em; opacity:.85;
  }

  /* ──────────── ouverture / statement ──────────── */
  .opening{
    padding:120px 44px 60px;
    text-align:center;
    max-width:1100px; margin:0 auto;
  }
  .opening .roman{
    font-family:"Cormorant Garamond", serif; font-style:italic; font-weight:400;
    font-size:14px; letter-spacing:.34em; color:var(--ink-soft);
    text-transform:uppercase; margin-bottom:36px;
  }
  .opening h2.lead{
    font-family:"Cormorant Garamond", serif;
    font-weight:300; font-size:clamp(34px, 4.2vw, 60px);
    line-height:1.22; letter-spacing:-.005em;
    max-width:22ch; margin:0 auto;
  }
  .opening h2.lead em{font-style:italic; font-weight:400; color:var(--ink-deep)}
  .opening .signoff{
    margin-top:46px; font-size:11px; letter-spacing:.28em; text-transform:uppercase;
    color:var(--mute);
  }
  .opening .signoff::before, .opening .signoff::after{
    content:""; display:inline-block; width:36px; height:1px; background:var(--rule);
    vertical-align:middle; margin:0 16px;
  }

  /* ──────────── section header ──────────── */
  .section-rule{
    border-top:1px solid var(--rule);
    margin: 0 44px;
    padding-top:22px;
    display:grid; grid-template-columns: 1fr auto 1fr;
    align-items:baseline;
  }
  .section-rule .l{font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-soft)}
  .section-rule .c{
    text-align:center;
    font-family:"Cormorant Garamond", serif; font-style:italic;
    font-size:14px; letter-spacing:.06em; color:var(--ink-soft);
  }
  .section-rule .r{justify-self:end; font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--mute)}

  /* ──────────── projet : photo + carton ──────────── */
  .project{
    position:relative;
    padding:50px 44px 70px;
  }
  .project .image{
    position:relative;
    width:100%; margin:0 auto;
    aspect-ratio: var(--r, 3/2);
    overflow:hidden;
    background:var(--paper);
  }
  .project.size-l  .image{max-width:1500px}
  .project.size-m  .image{max-width:1180px}
  .project.size-s  .image{max-width:720px}
  .project.size-tall  .image{max-width:780px}
  .project.size-xtall .image{max-width:600px}
  .project .image img{
    width:100%; height:100%; object-fit:cover; display:block;
    transition: transform 1.6s cubic-bezier(.2,.7,.2,1);
  }
  .project:hover .image img{transform:scale(1.012)}
  .project.size-m  .label{max-width:1180px; margin-left:auto; margin-right:auto}
  .project.size-s  .label{max-width:720px; margin-left:auto; margin-right:auto}
  .project.size-tall  .label{max-width:780px; margin-left:auto; margin-right:auto}
  .project.size-xtall .label{max-width:600px; margin-left:auto; margin-right:auto}

  .project .label{
    display:grid; grid-template-columns: 1fr auto 1fr;
    margin-top:26px;
    align-items:end;
    column-gap:30px;
  }
  .project .label .n{
    font-family:"Cormorant Garamond", serif; font-style:italic;
    font-size:14px; letter-spacing:.18em; text-transform:uppercase;
    color:var(--ink-soft);
  }
  .project .label .title{
    text-align:center;
    font-family:"Cormorant Garamond", serif;
    font-weight:300; font-size:clamp(22px, 2.2vw, 30px);
    line-height:1.2; letter-spacing:-.005em;
  }
  .project .label .title small{
    display:block; margin-top:8px;
    font-family:"Manrope"; font-weight:400; font-style:normal;
    font-size:11px; letter-spacing:.2em; text-transform:uppercase;
    color:var(--ink-soft);
  }
  .project .label .y{
    justify-self:end;
    font-family:"Cormorant Garamond", serif; font-style:italic;
    font-size:14px; letter-spacing:.18em; color:var(--ink-soft);
    text-align:right;
  }
  .project .label .y .plus{
    display:block; margin-top:4px;
    font-style:normal; font-family:"Manrope", sans-serif; font-weight:400;
    font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--mute);
  }

  /* ──────────── galerie sous le hero du projet ──────────── */
  .project .gallery{
    display:flex; gap:14px;
    margin: 30px auto 0;
    max-width: 920px;
    padding: 0 6px;
  }
  .project .gallery .thumb{
    flex:1 1 0;
    height: 220px;
    overflow:hidden;
    background:var(--paper);
    position:relative;
    cursor:zoom-in;
  }
  .project .gallery .thumb img{
    width:100%; height:100%; object-fit:cover; display:block;
    transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
  }
  .project .gallery .thumb:hover img{ transform: scale(1.05); }
  .project .gallery .thumb::after{
    content: attr(data-cap);
    position:absolute; left:8px; bottom:8px;
    font-family:"Cormorant Garamond", serif; font-style:italic;
    font-size:11px; letter-spacing:.14em; color:#f7f5ee;
    background:rgba(7,55,75,.78);
    padding:3px 10px;
    pointer-events:none;
    opacity:0;
    transition: opacity .25s ease;
  }
  .project .gallery .thumb:hover::after{opacity:1}
  .project.size-l .gallery{max-width:1100px}
  .project.size-m .gallery{max-width:920px}
  .project.size-s .gallery, .project.size-tall .gallery, .project.size-xtall .gallery{max-width:780px}

  /* ──────────── interlude clair / sombre ──────────── */
  .interlude{
    padding:120px 44px;
    text-align:center;
  }
  .interlude .roman{
    font-family:"Cormorant Garamond", serif; font-style:italic; font-weight:400;
    font-size:13px; letter-spacing:.34em; color:var(--ink-soft);
    text-transform:uppercase; margin-bottom:30px;
  }
  .interlude blockquote{
    font-family:"Cormorant Garamond", serif;
    font-weight:300; font-style:italic;
    font-size:clamp(26px, 2.8vw, 42px); line-height:1.32; letter-spacing:-.005em;
    max-width:26ch; margin:0 auto;
  }
  .interlude .sig{
    margin-top:36px; font-size:10px; letter-spacing:.3em; text-transform:uppercase;
    color:var(--mute);
  }
  .interlude .sig::before, .interlude .sig::after{
    content:""; display:inline-block; width:30px; height:1px; background:var(--rule);
    vertical-align:middle; margin:0 14px;
  }
  .interlude.dark{background:var(--ink-deep); color:var(--white)}
  .interlude.dark .roman{color:rgba(255,255,255,.55)}
  .interlude.dark .sig{color:rgba(255,255,255,.55)}
  .interlude.dark .sig::before, .interlude.dark .sig::after{background:rgba(255,255,255,.25)}

  /* ──────────── atelier : éditorial 2 colonnes ──────────── */
  .atelier-spread{
    padding:100px 44px 60px;
  }
  .atelier-spread .body{
    display:grid; grid-template-columns: 5fr 6fr; gap:60px; align-items:start;
    max-width:1480px; margin:40px auto 0;
  }
  .atelier-spread .body h2{
    font-family:"Cormorant Garamond", serif;
    font-weight:300; font-size:clamp(34px, 4.4vw, 56px); line-height:1.08;
    letter-spacing:-.01em;
  }
  .atelier-spread .body h2 em{font-style:italic; font-weight:300}
  .atelier-spread .body .text{
    font-family:"Cormorant Garamond", serif;
    font-weight:400; font-size:18px; line-height:1.65; color:var(--ink-2);
    max-width:54ch;
  }
  .atelier-spread .body .text p + p{margin-top:14px}

  .atelier-photo{
    max-width:1480px; margin:0 auto;
    display:grid; grid-template-columns: 5fr 7fr; gap:40px;
    padding:60px 0 0;
  }
  .atelier-photo .ph{aspect-ratio:4/5; overflow:hidden}
  .atelier-photo .ph.wide{aspect-ratio:4/3}
  .atelier-photo .ph img{width:100%; height:100%; object-fit:cover; display:block}

  /* ──────────── stats / chiffres clés ──────────── */
  .atelier-stats{
    display:grid; grid-template-columns: repeat(4, 1fr); gap:20px;
    max-width:1480px; margin:90px auto 0;
    border-top:1px solid var(--rule); padding: 50px 44px 0;
  }
  .atelier-stats .stat .n{
    font-family:"Cormorant Garamond", serif;
    font-weight:300; font-size:clamp(40px,4.4vw,64px); line-height:1; letter-spacing:-.02em;
    color:var(--ink);
  }
  .atelier-stats .stat .l{
    margin-top:14px; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft);
  }

  /* ──────────── démarche : timeline verticale ──────────── */
  .demarche{
    padding:120px 44px;
    background:var(--paper);
    border-top:1px solid var(--rule);
    border-bottom:1px solid var(--rule);
    margin-top:120px;
  }
  .demarche-h{
    text-align:center; margin-bottom:80px;
  }
  .demarche-h .roman{
    font-family:"Cormorant Garamond", serif; font-style:italic; font-weight:400;
    font-size:13px; letter-spacing:.34em; color:var(--ink-soft);
    text-transform:uppercase; margin-bottom:24px;
  }
  .demarche-h h2{
    font-family:"Cormorant Garamond", serif;
    font-weight:300; font-size:clamp(34px, 4.4vw, 56px); line-height:1.08;
    letter-spacing:-.01em;
  }
  .demarche-h h2 em{font-style:italic}
  .timeline{
    max-width:880px; margin:0 auto;
    position:relative;
  }
  .timeline::before{
    content:""; position:absolute; left:80px; top:14px; bottom:14px;
    width:1px; background:var(--rule);
  }
  .timeline .step{
    display:grid; grid-template-columns: 80px 1fr;
    padding:28px 0;
    align-items:start;
  }
  .timeline .step + .step{border-top:1px solid var(--rule)}
  .timeline .step .marker{
    position:relative;
    font-family:"Cormorant Garamond", serif; font-style:italic; font-weight:300;
    font-size:30px; color:var(--ink); line-height:1;
  }
  .timeline .step .marker::after{
    content:""; position:absolute; left:60px; top:14px;
    width:9px; height:9px; border-radius:50%;
    background:var(--paper); border:1px solid var(--ink); z-index:1;
  }
  .timeline .step .body h4{
    font-family:"Cormorant Garamond", serif; font-weight:400; font-size:26px;
    line-height:1.15; margin-bottom:8px;
    padding-left:30px;
  }
  .timeline .step .body p{
    color:var(--ink-2); line-height:1.7; max-width:54ch;
    padding-left:30px;
  }
  .timeline .step .body .duration{
    margin-top:14px; font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--mute);
    padding-left:30px;
  }

  /* ──────────── index des ouvrages ──────────── */
  .index-table{
    padding:120px 44px 100px;
  }
  .index-table table{width:100%; border-collapse:collapse; max-width:1380px; margin:40px auto 0}
  .index-table table th{
    text-align:left; font-weight:500; font-size:10px; letter-spacing:.22em; text-transform:uppercase;
    color:var(--ink-soft); padding:10px 16px; border-bottom:1px solid var(--rule);
  }
  .index-table table th.r{text-align:right}
  .index-table table td{
    padding:18px 16px; border-bottom:1px solid var(--rule); vertical-align:middle;
    font-family:"Cormorant Garamond", serif;
  }
  .index-table table td .num{font-style:italic; color:var(--ink-soft); font-size:14px; letter-spacing:.18em}
  .index-table table td .tt{font-size:21px; font-weight:400; line-height:1.2}
  .index-table table td .by{
    font-family:"Manrope", sans-serif; font-weight:400; font-size:13px; color:var(--ink-2);
  }
  .index-table table td.r{text-align:right; font-style:italic; color:var(--ink-soft); font-size:14px; letter-spacing:.1em}
  .index-table table tr:hover td{background:var(--paper)}
  .index-table .arrow{
    display:inline-block; margin-left:12px; transition: transform .25s ease;
    color:var(--ink-soft);
  }
  .index-table table tr:hover .arrow{transform:translateX(6px); color:var(--ink)}
  .index-table .all{
    text-align:center; margin-top:40px;
  }

  /* ──────────── contact ──────────── */
  .contact{
    padding:140px 44px 100px;
    text-align:center;
  }
  .contact .roman{
    font-family:"Cormorant Garamond", serif; font-style:italic;
    font-size:13px; letter-spacing:.34em; color:var(--ink-soft);
    text-transform:uppercase; margin-bottom:30px;
  }
  .contact h2{
    font-family:"Cormorant Garamond", serif;
    font-weight:300; font-size:clamp(40px, 5vw, 72px); line-height:1.08;
    letter-spacing:-.01em; max-width:18ch; margin:0 auto;
  }
  .contact h2 em{font-style:italic; font-weight:300}
  .contact .infos{
    display:flex; justify-content:center; flex-wrap:wrap; gap:14px 60px;
    margin-top:60px;
  }
  .contact .infos .blk{min-width:200px}
  .contact .infos h5{
    font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--mute);
    font-weight:500; margin-bottom:10px;
  }
  .contact .infos p{
    font-family:"Cormorant Garamond", serif;
    font-weight:400; font-size:19px; line-height:1.4;
  }
  .contact .infos p a{color:inherit; text-decoration:none; border-bottom:1px solid var(--rule); padding-bottom:2px}
  .contact .infos p a:hover{border-color:var(--ink)}
  .contact .cta-row{margin-top:60px; display:flex; justify-content:center; gap:14px; flex-wrap:wrap}
  .btn{
    display:inline-flex; align-items:center; gap:14px;
    padding:14px 26px; border:1px solid var(--ink); color:var(--ink);
    text-decoration:none; font-size:11px; letter-spacing:.24em; text-transform:uppercase;
    transition: background .25s, color .25s, gap .25s;
    background:transparent; cursor:pointer;
  }
  .btn:hover{background:var(--ink); color:var(--white); gap:20px}
  .btn.solid{background:var(--ink); color:var(--white)}
  .btn.solid:hover{background:var(--ink-deep); color:var(--white)}
  .btn .arrow{font-family:serif; font-size:14px; line-height:1}

  /* ──────────── formulaire de contact ──────────── */
  .contact form{
    max-width:540px; margin:64px auto 0; text-align:left;
  }
  .contact .field{margin-bottom:32px}
  .contact .field label{
    display:block; font-size:10px; letter-spacing:.28em; text-transform:uppercase;
    color:var(--mute); font-weight:500; margin-bottom:10px;
  }
  .contact .field label .opt{letter-spacing:.12em; text-transform:none}
  .contact .field input,
  .contact .field select,
  .contact .field textarea{
    display:block; width:100%; background:transparent;
    border:0; border-bottom:1px solid var(--rule); border-radius:0;
    padding:8px 0; color:var(--ink);
    font-family:"Cormorant Garamond", serif; font-weight:400; font-size:19px; line-height:1.4;
    -webkit-appearance:none; appearance:none;
    transition:border-color .25s;
  }
  .contact .field textarea{resize:vertical; min-height:104px}
  .contact .field input:focus,
  .contact .field select:focus,
  .contact .field textarea:focus{outline:none; border-bottom-color:var(--ink)}
  .contact .field select{
    cursor:pointer; padding-right:24px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a8a39a' stroke-width='1'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 2px center; background-size:10px 6px;
  }
  .contact form .cta-row{margin-top:44px; justify-content:flex-start}
  .contact .rgpd{
    margin-top:30px; font-size:11px; line-height:1.7; color:var(--ink-soft);
  }
  .contact .rgpd a{color:inherit; border-bottom:1px solid var(--rule); text-decoration:none}
  .contact .rgpd a:hover{border-color:var(--ink)}
  .contact .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

  /* ──────────── page remerciement ──────────── */
  .merci{padding:160px 44px 140px; text-align:center}
  .merci .roman{
    font-family:"Cormorant Garamond", serif; font-style:italic;
    font-size:13px; letter-spacing:.34em; color:var(--ink-soft);
    text-transform:uppercase; margin-bottom:30px;
  }
  .merci h1{
    font-family:"Cormorant Garamond", serif;
    font-weight:300; font-size:clamp(38px, 4.6vw, 64px); line-height:1.08;
    letter-spacing:-.01em; max-width:20ch; margin:0 auto;
  }
  .merci h1 em{font-style:italic; font-weight:300}
  .merci p{max-width:46ch; margin:34px auto 0; color:var(--ink-2)}
  .merci .cta-row{margin-top:56px; display:flex; justify-content:center; gap:14px; flex-wrap:wrap}

  /* ──────────── footer ──────────── */
  footer{
    padding:36px 44px;
    border-top:1px solid var(--rule);
    display:grid; grid-template-columns: 1fr auto 1fr;
    align-items:center; gap:30px;
    font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--mute);
  }
  footer .word{
    font-family:"Cinzel", serif; text-transform:uppercase; letter-spacing:.22em;
    font-size:12px; color:var(--ink); text-align:center; font-weight:500;
  }
  footer .l, footer .r{display:flex; gap:24px}
  footer .r{justify-self:end}
  footer a{color:inherit; text-decoration:none}
  footer a:hover{color:var(--ink)}

  /* ──────────── page fade transition ──────────── */
  #page-fade{
    position:fixed; inset:0; z-index:90;
    background:var(--white);
    pointer-events:none;
    opacity:0;
    transition: opacity .45s cubic-bezier(.4,0,.2,1);
  }
  #page-fade.on{opacity:1; pointer-events:auto}

  /* ──────────── reveal ──────────── */
  .reveal{opacity:0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1; transform:none}
  .reveal.d2{transition-delay:.08s}
  .reveal.d3{transition-delay:.16s}
  .no-js .reveal{opacity:1; transform:none}
  @media (prefers-reduced-motion: reduce){
    .reveal{opacity:1; transform:none; transition:none}
  }

  /* responsive */
  @media (max-width: 900px){
    nav.top .row-1{grid-template-columns: auto 1fr auto; padding:14px 22px 6px}
    nav.top .row-1 .word img{height:110px}
    nav.top.scrolled .row-1 .word img{height:72px}
    nav.top .row-2{gap:24px; padding:10px 22px 14px; flex-wrap:wrap}
    nav.top .row-2 a{font-size:14px}
    header.hero{padding:0 22px 36px; height:80vh; min-height:560px}
    header.hero .meta{grid-template-columns:1fr; gap:24px}
    header.hero .right-meta{text-align:left}
    header.hero .roman-credit{left:22px; top:20px}
    .opening{padding:60px 22px 30px}
    .section-rule{margin:0 22px}
    .project{padding:30px 22px 50px}
    .project .label{grid-template-columns: 1fr; gap:10px; text-align:left}
    .project .label .title{text-align:left}
    .project .label .y{justify-self:start; text-align:left}
    .project .gallery{flex-wrap:wrap; gap:8px; max-width:none}
    .project .gallery .thumb{flex:1 1 calc(50% - 4px); height:150px}
    .interlude{padding:80px 22px}
    .atelier-spread{padding:60px 22px}
    .atelier-spread .body{grid-template-columns:1fr; gap:30px}
    .atelier-photo{grid-template-columns:1fr; gap:18px}
    .atelier-stats{grid-template-columns: repeat(2, 1fr); gap:30px 20px; padding:50px 22px 0; margin-top:60px}
    .demarche{padding:80px 22px}
    .timeline::before{display:none}
    .timeline .step{grid-template-columns: 1fr}
    .timeline .step .marker::after{display:none}
    .timeline .step .body h4,
    .timeline .step .body p,
    .timeline .step .body .duration{padding-left:0; margin-top:12px}
    .index-table{padding:80px 22px}
    .index-table td .tt{font-size:18px}
    .index-table table th, .index-table table td{padding:14px 8px}
    .contact{padding:80px 22px}
    .contact form{margin-top:48px}
    .contact form .cta-row{justify-content:center}
    .contact .field input,
    .contact .field select,
    .contact .field textarea{font-size:17px}
    .merci{padding:100px 22px 90px}
    footer{grid-template-columns:1fr; text-align:center; gap:16px}
    footer .l, footer .r{justify-self:center}
  }

  /* ════════════ Page Réalisations ════════════ */

  /* nav : lien de la page courante */
  nav.top .row-2 a.here{border-color:var(--ink)}

  /* en-tête de page (sans hero plein écran) */
  .page-head{
    padding:120px 44px 50px;
    text-align:center;
    max-width:1000px; margin:0 auto;
  }
  .page-head .roman{
    font-family:"Cormorant Garamond", serif; font-style:italic; font-weight:400;
    font-size:14px; letter-spacing:.34em; color:var(--ink-soft);
    text-transform:uppercase; margin-bottom:30px;
  }
  .page-head h1{
    font-family:"Cormorant Garamond", serif;
    font-weight:300; font-size:clamp(40px, 5.2vw, 76px); line-height:1.04;
    letter-spacing:-.01em;
  }
  .page-head h1 em{font-style:italic; font-weight:300}
  .page-head p{
    font-family:"Cormorant Garamond", serif;
    font-weight:400; font-size:clamp(18px, 2vw, 22px); line-height:1.5; color:var(--ink-2);
    max-width:46ch; margin:26px auto 0;
  }

  /* sommaire en grille de vignettes-couvertures */
  .sommaire{
    max-width:1480px; margin:60px auto 30px;
    padding:0 44px;
    display:grid; grid-template-columns: repeat(4, 1fr); gap:20px 18px;
  }
  .sommaire a{text-decoration:none; color:inherit; display:block}
  .sommaire .cover{
    aspect-ratio:4/5; overflow:hidden; background:var(--paper);
  }
  .sommaire .cover img{
    width:100%; height:100%; object-fit:cover; display:block;
    transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
  }
  .sommaire a:hover .cover img{transform:scale(1.05)}
  .sommaire .cap{margin-top:12px; display:flex; gap:10px; align-items:baseline}
  .sommaire .cap .num{
    font-family:"Cormorant Garamond", serif; font-style:italic;
    font-size:13px; letter-spacing:.16em; color:var(--ink-soft); flex:none;
  }
  .sommaire .cap .tt{
    font-family:"Cormorant Garamond", serif; font-weight:400;
    font-size:16px; line-height:1.25;
  }

  /* rappel : retour vers l'accueil / sélection en bas de page */
  .back-row{
    text-align:center; padding:30px 44px 110px;
  }

  @media (max-width: 900px){
    .page-head{padding:80px 22px 30px}
    .sommaire{grid-template-columns: repeat(2, 1fr); padding:0 22px; gap:14px 12px}
    .back-row{padding:20px 22px 70px}
  }

  /* ════════════ Nouvelle grille Réalisations (refonte 2026-05-28) ════════════ */

  /* Grille 6 projets — direction Van Duysen (3 cols desktop, beaucoup d'air) */
  .projets-grid{
    max-width:1480px;
    margin:80px auto 60px;
    padding:0 44px;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:80px 36px;
  }
  .projet-card{
    text-decoration:none; color:inherit;
    display:block;
  }
  .projet-card .cover{
    aspect-ratio: 4/5;
    overflow:hidden;
    background:var(--paper);
  }
  .projet-card .cover img,
  .projet-card .cover picture{
    width:100%; height:100%;
  }
  .projet-card .cover img{
    object-fit:cover; display:block;
    transition: transform 1.4s cubic-bezier(.2,.7,.2,1);
  }
  .projet-card:hover .cover img{transform:scale(1.04)}
  .projet-card .cap{
    text-align:center;
    margin-top:24px;
  }
  .projet-card .cap .roman{
    font-family:"Cinzel", serif;
    font-weight:500; font-size:10px; letter-spacing:.42em;
    color:var(--mute);
    margin-bottom:12px;
  }
  .projet-card .cap h2{
    font-family:"Cormorant Garamond", serif;
    font-weight:300; font-style:italic;
    font-size:30px; line-height:1.1;
    letter-spacing:-.005em;
    color:var(--ink-deep);
    margin:0;
  }
  .projet-card .cap .loc{
    margin-top:12px;
    font-family:"Cinzel", serif;
    font-weight:400; font-size:9.5px; letter-spacing:.32em;
    text-transform:uppercase;
    color:var(--ink-soft);
  }
  .projet-card .cap .loc .dot{
    display:inline-block; margin:0 6px;
    color:var(--mute);
  }
  .projet-card .cap .more{
    margin-top:14px;
    font-family:"Cinzel", serif;
    font-weight:500; font-size:10px; letter-spacing:.32em;
    text-transform:uppercase;
    color:var(--ink-soft);
    padding-bottom:3px;
    display:inline-block;
    border-bottom:1px solid var(--rule);
    transition: border-color .25s ease, color .25s ease;
  }
  .projet-card:hover .cap .more,
  .projet-card:active .cap .more{
    border-color:var(--ink);
    color:var(--ink);
  }

  /* Bloc Divers — séparé en bas, plus discret */
  .divers-block{
    max-width:1480px;
    margin:60px auto 100px;
    padding:0 44px;
  }
  .divers-rule{
    border-top:1px solid var(--rule);
    padding-top:22px;
    margin-bottom:50px;
    display:grid; grid-template-columns: 1fr auto 1fr;
    align-items:baseline;
  }
  .divers-rule .l{
    font-family:"Cinzel", serif;
    font-size:10px; letter-spacing:.32em; text-transform:uppercase;
    color:var(--ink-soft);
  }
  .divers-rule .c{
    text-align:center;
    font-family:"Cormorant Garamond", serif; font-style:italic;
    font-size:14px; letter-spacing:.04em; color:var(--ink-soft);
  }
  .divers-card{
    text-decoration:none; color:inherit;
    display:grid; grid-template-columns: 7fr 5fr;
    gap:48px;
    align-items:center;
    max-width:1180px; margin:0 auto;
  }
  .divers-card .thumbs{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:10px;
  }
  .divers-card .thumbs > div{
    aspect-ratio: 3/4;
    overflow:hidden;
    background:var(--paper);
  }
  .divers-card .thumbs img,
  .divers-card .thumbs picture{
    width:100%; height:100%;
  }
  .divers-card .thumbs img{
    object-fit:cover; display:block;
    transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
  }
  .divers-card:hover .thumbs img{transform:scale(1.04)}
  .divers-card .text h3{
    font-family:"Cormorant Garamond", serif;
    font-weight:300; font-style:italic;
    font-size:34px; line-height:1.1;
    color:var(--ink-deep);
    margin-bottom:18px;
  }
  .divers-card .text p{
    font-family:"Cormorant Garamond", serif;
    font-weight:400; font-size:17px; line-height:1.55;
    color:var(--ink-2);
    max-width:36ch;
  }
  .divers-card .text .more{
    margin-top:24px;
    font-family:"Cinzel", serif;
    font-weight:500; font-size:10px; letter-spacing:.32em;
    text-transform:uppercase;
    color:var(--ink-soft);
    padding-bottom:3px;
    display:inline-block;
    border-bottom:1px solid transparent;
    transition: border-color .25s ease, color .25s ease;
  }
  .divers-card:hover .text .more{
    border-color:var(--ink);
    color:var(--ink);
  }

  /* Footer site (commun avec les pages-projet) */
  footer.site{
    padding: 60px 44px 80px;
    text-align:center;
    background:var(--paper);
    border-top:1px solid var(--rule);
    color:var(--ink-soft);
  }
  footer.site .word{
    font-family:"Cinzel", serif;
    font-size:11px; letter-spacing:.32em; text-transform:uppercase;
    color:var(--ink);
    margin-bottom:14px;
  }
  footer.site .word::before, footer.site .word::after{
    content:"—"; margin:0 12px; color:var(--mute);
  }
  footer.site .links{
    font-family:"Cormorant Garamond", serif;
    font-style:italic; font-size:14px;
  }
  footer.site .links a{
    color:var(--ink-soft); text-decoration:none;
    margin:0 14px;
  }
  footer.site .links a:hover{ color:var(--ink); }
  footer.site .copy{
    margin-top:18px;
    font-size:10px; letter-spacing:.18em; text-transform:uppercase;
    color:var(--mute);
  }

  /* Responsive Réalisations refonte */
  @media (max-width: 1100px){
    .projets-grid{
      grid-template-columns: repeat(2, 1fr);
      gap:60px 30px;
    }
  }
  @media (max-width: 900px){
    .projets-grid{
      padding:0 22px;
      gap:50px 18px;
      margin-top:50px;
    }
    .projet-card .cap{margin-top:18px}
    .projet-card .cap h2{font-size:24px}
    .divers-block{padding:0 22px; margin-bottom:70px}
    .divers-rule{margin-bottom:30px}
    .divers-card{
      grid-template-columns: 1fr;
      gap:30px;
      text-align:center;
    }
    .divers-card .text p{margin:0 auto}
  }
  @media (max-width: 600px){
    .projets-grid{
      grid-template-columns: 1fr;
      gap:48px 0;
    }
    .projet-card .cover{aspect-ratio: 3/4}
  }

  /* ════════════ Page Atelier — format éditorial (refonte 2026-05-28) ════════════ */

  .editorial-head{
    padding: 90px 44px 30px;
    text-align: center;
    background: var(--white);
    max-width: 980px;
    margin: 0 auto;
  }
  .editorial-head .roman{
    font-family:"Cinzel", serif;
    font-weight:500; font-size:11px; letter-spacing:.42em;
    color:var(--mute);
    margin-bottom:24px;
  }
  .editorial-head h1{
    font-family:"Cormorant Garamond", serif;
    font-weight:300; font-style:italic;
    font-size:clamp(42px, 5.4vw, 72px);
    line-height:1;
    letter-spacing:-.01em;
    color:var(--ink-deep);
    margin-bottom:30px;
  }
  .editorial-head .sub{
    font-family:"Cinzel", serif;
    font-weight:400; font-size:10px; letter-spacing:.32em;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin-bottom:32px;
  }
  .editorial-head .sub .sep{
    display:inline-block; width:14px; height:1px;
    background:var(--mute);
    vertical-align:middle; margin:0 12px;
  }
  .editorial-head .lead{
    font-family:"Cormorant Garamond", serif;
    font-weight:400; font-size:clamp(18px, 2vw, 22px); line-height:1.6;
    color:var(--ink-2);
    max-width:46ch; margin:0 auto;
  }

  .editorial{
    max-width: 1480px;
    margin: 0 auto;
    padding: 60px 44px 80px;
  }
  .editorial section.bloc{
    padding: 80px 0;
    border-top: 1px solid var(--rule);
    display: grid;
    grid-template-columns: 1fr;
    gap: 50px;
    justify-items: center;
  }
  .editorial section.bloc:first-of-type{ border-top: 0; padding-top: 40px; }
  .editorial section.bloc .text{
    max-width: 56ch;
    text-align: center;
  }
  .editorial section.bloc .text .num{
    font-family:"Cinzel", serif;
    font-weight:500; font-size:10px; letter-spacing:.42em;
    color: var(--mute);
    margin-bottom: 18px;
  }
  .editorial section.bloc .text h2{
    font-family:"Cormorant Garamond", serif;
    font-weight:300; font-style:italic;
    font-size: clamp(28px, 3.2vw, 40px);
    line-height: 1.15;
    letter-spacing: -.005em;
    color: var(--ink-deep);
    margin-bottom: 22px;
  }
  .editorial section.bloc .text p{
    font-family:"Cormorant Garamond", serif;
    font-weight:400; font-size: 18px; line-height: 1.6;
    color: var(--ink-2);
  }
  .editorial section.bloc .text p + p{ margin-top: 12px; }
  .editorial section.bloc .photo{
    width: 100%;
    max-width: 960px;
    aspect-ratio: var(--r, 3/2);
    overflow: hidden;
    background: var(--paper);
  }
  .editorial section.bloc .photo img,
  .editorial section.bloc .photo picture{
    width: 100%; height: 100%;
  }
  .editorial section.bloc .photo img{
    object-fit: cover; display: block;
  }
  .editorial section.bloc .photo .legende{
    display: block;
    text-align: center;
    margin-top: 12px;
    font-family:"Cormorant Garamond", serif;
    font-style: italic;
    font-size: 12px;
    color: var(--mute);
    letter-spacing: .02em;
  }
  .editorial section.bloc.tall .photo{ aspect-ratio: 3/4; max-width: 720px; }
  .editorial section.bloc.wide .photo{ aspect-ratio: 16/9; max-width: 1180px; }

  /* Stats en bas de page Atelier */
  .editorial .stats{
    display:grid; grid-template-columns: repeat(4, 1fr); gap:20px;
    border-top:1px solid var(--rule);
    padding: 60px 0 0;
    margin-top: 30px;
  }
  .editorial .stats .stat{ text-align: center; }
  .editorial .stats .stat .n{
    font-family:"Cormorant Garamond", serif;
    font-weight:300; font-size:clamp(36px,4vw,56px); line-height:1; letter-spacing:-.02em;
    color:var(--ink);
  }
  .editorial .stats .stat .l{
    margin-top:14px; font-family:"Cinzel", serif;
    font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-soft);
  }

  @media (max-width: 900px){
    .editorial-head{ padding: 60px 22px 20px; }
    .editorial{ padding: 30px 22px 50px; }
    .editorial section.bloc{ padding: 50px 0; gap: 30px; }
    .editorial .stats{ grid-template-columns: repeat(2, 1fr); gap:30px 20px; padding-top:40px; }
  }

  /* ════════════ Hero rotation (refonte accueil 2026-05-28) ════════════ */

  header.hero .hero-stage{
    position:absolute; inset:0;
    z-index:0;
  }
  header.hero .hero-slide{
    position:absolute; inset:0;
    background-size: cover;
    background-position: center 55%;
    opacity: 0;
    transition: opacity 1.6s cubic-bezier(.4,0,.2,1);
    transform: scale(1.02);
    will-change: opacity;
  }
  header.hero .hero-slide.active{
    opacity: 1;
  }
  header.hero .hero-overlay{
    position:absolute; inset:0;
    z-index:1;
    background:
      linear-gradient(180deg, rgba(5,40,56,.35) 0%, rgba(5,40,56,0) 22%, rgba(5,40,56,0) 50%, rgba(5,40,56,.78) 100%);
    pointer-events: none;
  }
  header.hero .roman-credit,
  header.hero .meta,
  header.hero .scroll-tag{
    z-index: 2;
  }
  header.hero .scroll-tag{
    color: #fff;
    text-decoration: none;
  }
  header.hero .scroll-tag:hover{
    opacity: 1;
  }

  /* ════════════ Atelier teaser (refonte accueil 2026-05-28) ════════════ */

  .atelier-teaser{
    padding: 100px 44px 80px;
  }
  .atelier-teaser-body{
    display:grid;
    grid-template-columns: 5fr 6fr;
    gap: 70px;
    align-items: center;
    max-width: 1400px;
    margin: 60px auto 0;
  }
  .atelier-teaser-text h2{
    font-family:"Cormorant Garamond", serif;
    font-weight:300; font-size:clamp(32px, 4vw, 52px); line-height:1.08;
    letter-spacing:-.01em;
    color: var(--ink-deep);
    margin-bottom: 26px;
  }
  .atelier-teaser-text h2 em{font-style:italic; font-weight:300}
  .atelier-teaser-text p{
    font-family:"Cormorant Garamond", serif;
    font-weight:400; font-size:18px; line-height:1.65;
    color:var(--ink-2);
    max-width: 54ch;
    margin-bottom: 30px;
  }
  .atelier-teaser-photo{
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--paper);
  }
  .atelier-teaser-photo img,
  .atelier-teaser-photo picture{
    width: 100%; height: 100%;
  }
  .atelier-teaser-photo img{
    object-fit: cover; display: block;
    transition: transform 1.4s cubic-bezier(.2,.7,.2,1);
  }
  .atelier-teaser-photo:hover img{ transform: scale(1.02); }

  @media (max-width: 900px){
    .atelier-teaser{ padding: 60px 22px; }
    .atelier-teaser-body{
      grid-template-columns: 1fr;
      gap: 36px;
      margin-top: 40px;
    }
  }

  /* ════════════ Page Mentions légales (refonte 2026-05-28) ════════════ */
  .legal{
    max-width: 760px;
    margin: 0 auto;
    padding: 40px 44px 100px;
    font-family:"Cormorant Garamond", serif;
  }
  .legal section{
    padding: 36px 0;
    border-top: 1px solid var(--rule);
  }
  .legal section:first-of-type{ border-top: 0; padding-top: 16px; }
  .legal h2{
    font-family:"Cormorant Garamond", serif;
    font-weight: 300;
    font-size: 26px;
    line-height: 1.2;
    color: var(--ink-deep);
    margin-bottom: 18px;
  }
  .legal h2 em{ font-style: italic; }
  .legal p, .legal li{
    font-family:"Cormorant Garamond", serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink-2);
    margin-bottom: 10px;
  }
  .legal ul, .legal ol{
    padding-left: 22px;
    margin: 10px 0 14px;
  }
  .legal li{ margin-bottom: 6px; }
  .legal a{
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 1px;
  }
  .legal a:hover{ border-color: var(--ink); }
  .legal .placeholder{
    background: var(--paper);
    color: var(--ink);
    font-family:"Manrope", sans-serif;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: .05em;
    padding: 2px 8px;
    border-radius: 2px;
    text-transform: uppercase;
  }
  .legal .dl{
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 8px 18px;
    margin: 12px 0;
  }
  .legal .dl dt{
    font-family:"Cinzel", serif;
    font-weight: 400;
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-soft);
    padding-top: 3px;
  }
  .legal .dl dd{
    font-family:"Cormorant Garamond", serif;
    font-size: 17px;
    color: var(--ink-2);
    line-height: 1.4;
  }
  @media (max-width: 700px){
    .legal{ padding: 30px 22px 70px; }
    .legal .dl{ grid-template-columns: 1fr; gap: 2px 0; }
    .legal .dl dt{ padding-top: 14px; }
  }