/* ============================================================
   ATELIER 3A — feuille de style partagée
   ============================================================ */

:root{
  --ink:#17140F; --paper:#FAF8F4; --paper-alt:#F1EEE8; --paper-alt2:#EFECE5;
  --line:#DAD5CB; --gray:#8A8478; --gray-dark:#57534A;
  --f-display:'Archivo',sans-serif; --f-body:'IBM Plex Sans',sans-serif; --f-mono:'IBM Plex Mono',monospace;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0; background:var(--paper); font-family:var(--f-body); color:var(--ink); overflow-x:hidden;}
a{color:var(--ink); text-decoration:none;}
a:hover{color:var(--gray-dark);}
img{max-width:100%;}

.page{width:1440px; max-width:100%; background:var(--paper); font-family:var(--f-body); color:var(--ink); margin:0 auto;}

.ph{position:relative; width:100%; height:100%; overflow:hidden;
  background-image: repeating-linear-gradient(135deg, #D7D2C7 0px, #D7D2C7 1px, transparent 1px, transparent 27px), linear-gradient(160deg, #EEEBE4 0%, #DBD7CD 100%);
}
.ph-tag{position:absolute; left:14px; bottom:14px; padding:5px 10px; background:rgba(23,20,15,0.85); color:var(--paper); font-family:var(--f-mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase;}
.type-tag{position:absolute; left:14px; top:14px; padding:5px 10px; background:var(--paper); color:var(--ink); font-family:var(--f-mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; border:1px solid var(--line);}
.navlink{font-family:var(--f-mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase;}
.eyebrow{font-family:var(--f-mono); font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--gray-dark);}
.chip{font-family:var(--f-mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; padding:8px 16px; border:1px solid var(--line); color:var(--gray-dark); cursor:pointer; background:none;}
.chip.active{background:var(--ink); color:var(--paper); border-color:var(--ink);}

.meta-row{padding:16px 0; border-bottom:1px solid var(--line);}
.meta-label{font-family:var(--f-mono); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--gray); margin-bottom:7px;}
.meta-value{font-family:var(--f-body); font-size:15px; color:var(--ink);}
.meta-value.placeholder{color:var(--gray); font-style:italic;}
.collab-tag{display:inline-flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--gray-dark); border:1px solid var(--line); padding:6px 12px; margin-top:14px;}
.render-tag{position:absolute; left:12px; bottom:12px; padding:4px 9px; background:rgba(23,20,15,0.85); color:var(--paper); font-family:var(--f-mono); font-size:9.5px; letter-spacing:0.07em; text-transform:uppercase;}

/* Pole Maquette collab tag (block variant used on that page) */
.tech-item{padding:32px 28px; border-right:1px solid var(--line);}
.tech-item:last-child{border-right:none;}
.real-card{cursor:pointer;}
.real-card .thumb{position:relative; overflow:hidden;}
.real-card .thumb img{transition:transform .35s ease;}
.real-card:hover .thumb img{transform:scale(1.045);}
.real-card .thumb::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(23,20,15,0) 60%, rgba(23,20,15,0.45) 100%); opacity:0; transition:opacity .25s ease;}
.real-card:hover .thumb::after{opacity:1;}
.view-hint{position:absolute; left:14px; bottom:14px; display:flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--paper); opacity:0; transform:translateY(6px); transition:all .25s ease;}
.real-card:hover .view-hint{opacity:1; transform:translateY(0);}
.lightbox-overlay{position:fixed; inset:0; background:rgba(23,20,15,0.92); z-index:1000; display:none; align-items:center; justify-content:center; flex-direction:column;}
.lightbox-overlay.open{display:flex;}
.lightbox-frame{width:min(1100px,86%); max-height:78vh; position:relative; display:flex; align-items:center; justify-content:center;}
.lightbox-frame img{max-width:100%; max-height:78vh; object-fit:contain; box-shadow:0 20px 60px rgba(0,0,0,0.4);}
.lightbox-close{position:absolute; top:28px; right:36px; color:var(--paper); font-family:var(--f-mono); font-size:13px; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; background:none; border:1px solid rgba(250,248,244,0.4); padding:8px 16px;}
.lightbox-arrow{position:absolute; top:50%; transform:translateY(-50%); background:rgba(250,248,244,0.12); border:1px solid rgba(250,248,244,0.35); color:var(--paper); width:44px; height:44px; border-radius:50%; cursor:pointer; font-family:var(--f-body); font-size:20px; display:flex; align-items:center; justify-content:center;}
.lightbox-arrow:hover{background:rgba(250,248,244,0.22);}
.lightbox-arrow.prev{left:-64px;}
.lightbox-arrow.next{right:-64px;}
.lightbox-caption{margin-top:26px; text-align:center; color:var(--paper);}
.lightbox-caption .lb-title{font-family:var(--f-display); font-weight:600; font-size:18px; margin-bottom:6px;}
.lightbox-caption .lb-meta{font-family:var(--f-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:#C9C4B8;}
.lightbox-caption .lb-count{margin-top:10px; font-family:var(--f-mono); font-size:11px; color:#8A8478;}

/* Contact */
.field-label{font-family:var(--f-mono); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--gray-dark); margin-bottom:9px; display:block;}
.field-input{width:100%; border:none; border-bottom:1px solid var(--line); background:transparent; padding:11px 2px; font-family:var(--f-body); font-size:15px; color:var(--ink);}
.field-input::placeholder{color:var(--gray);}
.field-input:focus{outline:none; border-bottom-color:var(--ink);}
.field-group{margin-bottom:30px;}
.req-chip{font-family:var(--f-mono); font-size:11px; letter-spacing:0.05em; text-transform:uppercase; padding:10px 16px; border:1px solid var(--line); color:var(--gray-dark); cursor:pointer; background:none;}
.req-chip.active{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.info-row{padding:18px 0; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:20px;}
.info-label{font-family:var(--f-mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--gray);}
.info-value{font-size:14px; color:var(--ink); text-align:right;}
.submit-btn{display:inline-flex; align-items:center; gap:10px; font-family:var(--f-mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; background:var(--ink); color:var(--paper); padding:16px 28px; margin-top:12px; border:none; cursor:pointer;}
.submit-btn:hover{background:var(--gray-dark); color:var(--paper);}
.form-note{font-size:12.5px; color:var(--gray); margin-top:14px; display:none;}
.form-note.show{display:block;}

/* Reglementation */
.res-card{border:1px solid var(--line); padding:28px 26px;}
.res-tag{display:inline-block; padding:4px 9px; border:1px solid var(--line); font-family:var(--f-mono); font-size:10px; letter-spacing:0.06em; text-transform:uppercase; color:var(--gray-dark); margin-bottom:14px;}
.res-title{font-family:var(--f-display); font-weight:600; font-size:17px; margin-bottom:10px;}
.res-desc{font-size:13.5px; line-height:1.7; color:var(--gray-dark); margin-bottom:14px;}
.res-platform{font-family:var(--f-mono); font-size:11.5px; letter-spacing:0.04em; color:var(--ink); border-top:1px solid var(--line); padding-top:12px; display:flex; justify-content:space-between; align-items:center;}
.tip-num{font-family:var(--f-mono); font-size:12px; color:var(--gray); margin-bottom:10px;}

/* Agence */
.stat-item{padding:32px 28px; border-right:1px solid var(--line);}
.stat-item:last-child{border-right:none;}
.stat-num{font-family:var(--f-display); font-weight:600; font-size:22px; margin-bottom:8px;}
.stat-label{font-family:var(--f-mono); font-size:11px; letter-spacing:0.05em; text-transform:uppercase; color:var(--gray-dark);}
.section-title{font-family:var(--f-display); font-weight:600; font-size:26px; margin:0 0 20px;}
.placeholder-block{font-size:14px; line-height:1.8; color:var(--gray); font-style:italic; border:1px dashed var(--line); padding:24px; max-width:700px;}
.value-card{border:1px solid var(--line); padding:26px 24px;}
.tl-row{display:grid; grid-template-columns:140px 1fr; gap:24px; padding:20px 0; border-bottom:1px solid var(--line);}
.tl-year{font-family:var(--f-mono); font-size:12.5px; letter-spacing:0.04em; color:var(--gray-dark);}
.tl-place{font-family:var(--f-display); font-weight:600; font-size:15.5px; margin-bottom:5px;}
.tl-desc{font-size:13.5px; line-height:1.65; color:var(--gray-dark);}
.method-num{font-family:var(--f-mono); font-size:12px; color:var(--gray); margin-bottom:10px;}

/* ============================================================
   HEADER / MOBILE NAV
   ============================================================ */
.site-header{display:flex; align-items:center; justify-content:space-between; padding:26px 64px; border-bottom:1px solid var(--line); position:relative;}
.brand{display:flex; align-items:center; gap:14px;}
.brand-name{font-family:var(--f-display); font-weight:600; font-size:17px; letter-spacing:0.16em;}
.desktop-nav{display:flex; align-items:center; gap:40px;}
.desktop-nav a.current{border-bottom:1px solid var(--ink); padding-bottom:3px;}
.nav-toggle{display:none; background:none; border:none; cursor:pointer; padding:8px; margin:-8px; flex-direction:column; gap:5px; align-items:flex-end;}
.nav-toggle span{display:block; width:26px; height:2px; background:var(--ink);}
.nav-toggle span:nth-child(2){width:18px;}
.mobile-nav{display:none;}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{border-top:1px solid var(--line); padding:56px 64px 40px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px;}
.site-footer .foot-links{font-family:var(--f-mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; display:flex; flex-direction:column; gap:12px; color:var(--gray-dark);}
.site-footer .foot-contact{font-size:13px; color:var(--gray-dark); line-height:2;}
.copyright{padding:0 64px 32px; font-family:var(--f-mono); font-size:11px; color:var(--gray); letter-spacing:0.04em;}

/* ============================================================
   RESPONSIVE — tablette / mobile
   Les pages conservent des styles inline hérités de la maquette ;
   ces règles ciblent ces motifs précis pour les adapter sans
   toucher au balisage (attribut style + !important).
   ============================================================ */
@media (max-width: 1000px){
  .desktop-nav{display:none;}
  .nav-toggle{display:flex;}
  .mobile-nav{display:none; position:absolute; top:100%; left:0; right:0; background:var(--paper); border-bottom:1px solid var(--line); flex-direction:column; padding:8px 0; z-index:200; box-shadow:0 12px 24px rgba(23,20,15,0.08);}
  .mobile-nav.open{display:flex;}
  .mobile-nav a{padding:16px 32px; font-family:var(--f-mono); font-size:13px; letter-spacing:0.08em; text-transform:uppercase; border-bottom:1px solid var(--line);}
  .mobile-nav a:last-child{border-bottom:none;}
  .mobile-nav a.current{color:var(--gray-dark);}

  .site-header{padding:20px 24px;}

  /* Grid patterns → single/2-column stacks */
  [style*="grid-template-columns:repeat(3,minmax(0,1fr))"]{grid-template-columns:1fr 1fr !important; gap:20px !important;}
  [style*="grid-template-columns:repeat(4,minmax(0,1fr))"]{grid-template-columns:1fr 1fr !important; gap:20px !important;}
  [style*="grid-template-columns:1fr 420px"]{grid-template-columns:1fr !important; margin-top:0 !important;}
  [style*="grid-template-columns:1fr 400px"]{grid-template-columns:1fr !important;}
  [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr 1fr !important;}
  [style*="grid-template-columns:repeat(5,minmax(0,1fr))"]{grid-template-columns:1fr 1fr !important;}
  [style*="grid-template-columns:repeat(2,minmax(0,1fr))"]{grid-template-columns:1fr !important;}
  [style*="grid-template-columns:480px 1fr"]{grid-template-columns:1fr !important;}

  /* Generic paddings */
  [style*="padding:26px 64px"]{padding:20px 24px !important;}
  [style*="padding:24px 64px"]{padding:20px 24px !important;}
  [style*="padding:72px 64px"]{padding:44px 24px !important;}
  [style*="padding:64px 64px"]{padding:36px 24px !important;}
  [style*="padding:56px 64px"]{padding:36px 24px !important;}
  [style*="padding:96px 64px"]{padding:44px 24px !important;}
  [style*="padding:0 64px"]{padding-left:24px !important; padding-right:24px !important;}
  [style*="padding:44px 64px"]{padding:28px 24px !important;}
  [style*="padding:20px 64px"]{padding:16px 24px !important;}
  [style*="padding:48px 64px"]{padding:28px 24px !important;}
  [style*="padding:0 40px 0 64px"]{padding:0 20px !important;}

  /* Hero / large fixed heights */
  [style*="height:760px"]{height:440px !important;}
  [style*="height:620px"]{height:260px !important;}
  [style*="height:560px"]{height:280px !important;}
  [style*="height:520px"]{height:260px !important;}
  [style*="height:480px"]{height:240px !important;}
  [style*="height:420px"]{height:240px !important;}
  [style*="height:300px"]{height:200px !important;}
  [style*="height:320px"]{height:220px !important;}
  [style*="height:260px"]{height:200px !important;}
  [style*="height:230px"]{height:190px !important;}
  [style*="height:220px"]{height:180px !important;}

  /* Typography scale-down */
  [style*="font-size:56px"]{font-size:32px !important;}
  [style*="font-size:40px"]{font-size:28px !important;}
  [style*="font-size:38px"]{font-size:27px !important;}
  [style*="font-size:34px"]{font-size:26px !important;}
  [style*="font-size:32px"]{font-size:24px !important;}
  [style*="font-size:28px"]{font-size:22px !important;}

  /* Split panels / footer stack */
  .site-footer{grid-template-columns:1fr !important; gap:28px !important; padding:36px 24px 28px !important;}
  .copyright{padding:0 24px 24px !important;}

  [style*="left:64px; bottom:64px"]{left:24px !important; bottom:32px !important; max-width:88% !important;}
  [style*="max-width:740px"]{max-width:100% !important;}
}

@media (max-width: 600px){
  [style*="grid-template-columns:repeat(3,minmax(0,1fr))"]{grid-template-columns:1fr !important;}
  [style*="grid-template-columns:repeat(4,minmax(0,1fr))"]{grid-template-columns:1fr 1fr !important;}
  [style*="grid-template-columns:repeat(5,minmax(0,1fr))"]{grid-template-columns:1fr 1fr !important;}
  [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important;}
  .tech-item, .stat-item{border-right:none !important; border-bottom:1px solid var(--line);}
  [style*="font-size:56px"]{font-size:26px !important;}
  [style*="font-size:40px"]{font-size:24px !important;}
  .lightbox-arrow.prev{left:8px;}
  .lightbox-arrow.next{right:8px;}
}