/* ============================================================================
   RAM — Plaquette imprimable A4 · version simple & impactante
   (photos en grand, grandes affirmations, peu de texte)
   ========================================================================== */
@font-face { font-family:'Anton';   src:url('../fonts/anton-400.woff2')   format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Oswald';  src:url('../fonts/oswald-300.woff2')  format('woff2'); font-weight:300; font-display:swap; }
@font-face { font-family:'Oswald';  src:url('../fonts/oswald-600.woff2')  format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Oswald';  src:url('../fonts/oswald-700.woff2')  format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Archivo'; src:url('../fonts/archivo-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Archivo'; src:url('../fonts/archivo-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Archivo'; src:url('../fonts/archivo-700.woff2') format('woff2'); font-weight:700; font-display:swap; }

:root {
  --ink:#08080a; --ink-2:#0e0e12; --fg:#ece9e4; --muted:#9a988f; --muted-2:#6a675f; --steel:#c9ccce;
  --line:rgba(236,233,228,.14); --line-2:rgba(236,233,228,.3);
  --f-display:'Anton','Arial Narrow',Impact,sans-serif; --f-head:'Oswald','Arial Narrow',sans-serif;
  --f-text:'Archivo',system-ui,'Segoe UI',Arial,sans-serif;
}
* { box-sizing:border-box; }
html,body { margin:0; }
body { background:#17171a; color:var(--fg); font-family:var(--f-text); line-height:1.5; -webkit-font-smoothing:antialiased; }

/* ---- Barre d'outils (écran uniquement) ---- */
.toolbar { position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:rgba(8,8,10,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); padding:14px clamp(16px,4vw,40px); }
.toolbar .t { font-family:var(--f-head); font-weight:600; text-transform:uppercase; letter-spacing:.14em; font-size:13px; color:var(--muted); }
.toolbar .actions { display:flex; align-items:center; gap:14px; }
.toolbar .hint { color:var(--muted-2); font-size:12px; max-width:38ch; }
.pbtn { font-family:var(--f-text); font-weight:700; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; padding:13px 22px; border:1px solid transparent; cursor:pointer; text-decoration:none; }
.pbtn--solid { background:var(--fg); color:var(--ink); }
.pbtn--line { border-color:var(--line-2); color:var(--fg); }

/* ---- Pages A4 ---- */
.sheet { display:flex; flex-direction:column; align-items:center; gap:22px; padding:30px 12px 60px; }
.page { width:210mm; height:297mm; background:var(--ink); position:relative; overflow:hidden; padding:18mm 16mm; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.page.full { padding:0; }

.pfoot { position:absolute; left:16mm; right:16mm; bottom:9mm; display:flex; justify-content:space-between; color:var(--muted-2); font-size:8.5pt; letter-spacing:.14em; text-transform:uppercase; z-index:3; }
.pfoot.light { color:rgba(255,255,255,.72); }

/* Repère de section + espacement généreux avant le titre */
.pmark { display:flex; align-items:center; gap:14px; border-top:1px solid var(--line-2); padding-top:12px; margin-bottom:16mm; }
.pmark .no { font-family:var(--f-display); font-size:12pt; color:var(--steel); }
.pmark .lbl { font-family:var(--f-text); font-weight:700; font-size:9pt; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); }
.pmark .rule { flex:1; height:1px; background:var(--line); }
.pmark .tag { font-size:8.5pt; letter-spacing:.22em; text-transform:uppercase; color:var(--muted-2); }

/* line-height aéré : évite que les accents des CAPITALES se touchent */
.p-h { font-family:var(--f-display); text-transform:uppercase; line-height:1.04; font-size:38pt; margin:0 0 12mm; }

/* Marques de coupe dans les coins (effet catalogue imprimé) */
.page::before, .page::after { content:""; position:absolute; width:16px; height:16px; z-index:4; pointer-events:none;
  background:
    linear-gradient(rgba(236,233,228,.45),rgba(236,233,228,.45)) center/1.5px 100% no-repeat,
    linear-gradient(rgba(236,233,228,.45),rgba(236,233,228,.45)) center/100% 1.5px no-repeat; }
.page::before { top:9mm; right:9mm; }
.page::after  { bottom:9mm; left:9mm; }

/* Chevron devant le libellé de repère */
.pmark .lbl::before { content:"\203A\00A0\00A0"; color:var(--steel); }

/* Titre bi-graisse souligné */
.dtitle2 { font-family:var(--f-head); text-transform:uppercase; line-height:1.02; margin:0; }
.dtitle2 .l1 { display:block; font-weight:300; letter-spacing:.05em; font-size:24pt; }
.dtitle2 .l2 { display:block; font-weight:700; letter-spacing:.005em; font-size:29pt; }
.dtitle2 .u  { display:block; width:22mm; height:2px; background:var(--steel); margin-top:6mm; opacity:.85; }

/* ============================================================================
   PAGE 1 · COUVERTURE
   ========================================================================== */
.cover { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.cover::before { content:""; position:absolute; inset:0; background:radial-gradient(58% 42% at 50% 40%, rgba(160,170,182,.16), transparent 72%); }
.cover .metiers { position:relative; color:var(--steel); letter-spacing:.36em; text-transform:uppercase; font-size:10pt; margin-bottom:11mm; }
.cover-logo { position:relative; width:135mm; margin:0 auto 13mm; }
.cover-logo img { width:100%; filter:drop-shadow(0 12px 30px rgba(0,0,0,.6)); }
.cover .baseline { position:relative; font-family:var(--f-display); text-transform:uppercase; line-height:1.08; font-size:31pt; max-width:15ch; margin:0 auto; }
.cover .cmeta { position:relative; display:flex; gap:14mm; justify-content:center; margin-top:15mm; color:var(--fg);
  font-family:var(--f-head); font-weight:600; text-transform:uppercase; letter-spacing:.1em; font-size:11pt; }
.cover .cmeta span { display:block; color:var(--muted-2); font-size:8pt; letter-spacing:.2em; margin-top:2mm; }
.cover .cover-name { position:relative; font-family:var(--f-head); font-weight:600; text-transform:uppercase; letter-spacing:.34em; font-size:14pt; color:var(--steel); margin-top:2mm; }

/* Page de clôture : logo centré (comme la couverture) */
.endpage { display:flex; align-items:center; justify-content:center; }
.endpage::before { content:""; position:absolute; inset:0; background:radial-gradient(55% 40% at 50% 50%, rgba(160,170,182,.15), transparent 72%); }
.end-logo { position:relative; width:115mm; }
.end-logo img { width:100%; filter:drop-shadow(0 12px 30px rgba(0,0,0,.6)); }

/* ============================================================================
   PAGE 2 · PHOTO PLEINE PAGE + PHRASE FORTE
   ========================================================================== */
.hero-photo { position:absolute; inset:0; }
.hero-photo img { width:100%; height:100%; object-fit:cover; filter:grayscale(.15) contrast(1.06) brightness(.7); }
.hero-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,8,10,.35) 0%, rgba(8,8,10,.15) 40%, rgba(8,8,10,.92) 100%); }
.hero-cap { position:absolute; left:16mm; right:16mm; bottom:22mm; z-index:2; }
.hero-cap .metiers { color:var(--steel); letter-spacing:.3em; text-transform:uppercase; font-size:9pt; margin-bottom:7mm; }
.hero-cap .big { font-family:var(--f-display); text-transform:uppercase; line-height:1.05; font-size:34pt; margin:0; max-width:19ch; }
.hero-cap .sub { color:#dcdad5; font-size:11pt; margin-top:7mm; max-width:52ch; }

/* ============================================================================
   PAGE 3 · RÉALISATIONS — petites vignettes
   ========================================================================== */
.pgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:3mm; }
.pgrid .cell { position:relative; overflow:hidden; background:var(--ink-2); aspect-ratio:1/1; }
.pgrid .cell img { width:100%; height:100%; object-fit:cover; filter:grayscale(.08) contrast(1.04); }
.pgrid .cell .lb { position:absolute; left:0; right:0; bottom:0; padding:9mm 3mm 2.5mm; background:linear-gradient(transparent, rgba(8,8,10,.85));
  color:#fff; font-family:var(--f-head); font-weight:600; text-transform:uppercase; letter-spacing:.04em; font-size:7.5pt; }
.pnote { color:var(--muted); font-size:9.5pt; margin-top:8mm; max-width:60ch; }

/* Exemples avant / après (grille 2×3) */
.ex-grid { display:grid; grid-template-columns:1fr 1fr; gap:7mm 8mm; }
.ex-card-t { font-family:var(--f-head); font-weight:600; text-transform:uppercase; letter-spacing:.02em; font-size:11pt; line-height:1.1; margin-bottom:3mm; min-height:10mm; }
.ex-card-imgs { display:grid; grid-template-columns:1fr 1fr; gap:3mm; }
.eci { position:relative; margin:0; overflow:hidden; background:var(--ink-2); }
.eci img { width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; display:block; filter:grayscale(.05) contrast(1.03); }
.eci span { position:absolute; top:0; left:0; background:rgba(8,8,10,.78); color:#fff; font-size:6.5pt; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:1mm 2.2mm; }

/* ============================================================================
   PAGE 4 · SAVOIR-FAIRE + CONTACT
   ========================================================================== */
.verbs { display:flex; flex-wrap:wrap; gap:4mm 10mm; margin:0 0 7mm; line-height:1; }
.verbs span { font-family:var(--f-display); text-transform:uppercase; font-size:38pt; line-height:1; }
.verbs span:nth-child(2) { color:var(--muted-2); }
.sf-line { color:var(--muted); font-size:11pt; max-width:56ch; margin:0 0 16mm; }

.contact-block { border-top:1px solid var(--line-2); padding-top:12mm; }
.contact-block .big { font-family:var(--f-display); text-transform:uppercase; line-height:1.04; font-size:32pt; margin:0 0 7mm; }
.contact-block .mail { display:inline-block; font-family:var(--f-head); font-weight:600; font-size:14pt; border-bottom:1px solid var(--line-2); padding-bottom:2mm; margin-bottom:12mm; }
.people { display:grid; grid-template-columns:1fr 1fr; gap:6mm; }
.person2 { border-top:1px solid var(--line); padding-top:5mm; }
.person2 .role { color:var(--muted); font-size:8.5pt; letter-spacing:.16em; text-transform:uppercase; }
.person2 .name { font-family:var(--f-head); font-weight:600; text-transform:uppercase; font-size:14pt; margin:1.5mm 0; }
.person2 .tel { font-family:var(--f-head); font-weight:600; font-size:15pt; }

/* ============================================================================
   IMPRESSION
   ========================================================================== */
@page { size:A4; margin:0; }
@media print {
  /* Fond sombre AUSSI sur le body : plus jamais de bande blanche en bas de page */
  html, body { background:var(--ink); color:var(--fg); }
  .toolbar { display:none !important; }
  .sheet { display:block; padding:0; gap:0; }
  .page { box-shadow:none; margin:0; page-break-after:always; break-after:page; }
  .page:last-child { page-break-after:auto; break-after:auto; }
  html, body, .page, .page * { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}
@media (max-width:800px) {
  .page { width:100%; height:auto; min-height:auto; padding:26px 20px; }
  .page.full { min-height:80vh; padding:0; }
  .cover-logo { width:72%; }
  .cover .baseline, .hero-cap .big, .p-h, .verbs span, .contact-block .big { font-size:27pt; }
  .pgrid { grid-template-columns:repeat(2,1fr); }
  .people { grid-template-columns:1fr; }
}