/* ======================================================
   Le Radar Culturel — « LE RELEVÉ », logique Paul Rand (A3)
   Réduction. Une idée géométrique : anneau + un point rouge.
   Aplats francs, asymétrie, air. Le point rouge = le déplacement,
   motif récurrent. Bichromie bleu de Prusse / vermillon sur pierre.
   Bricolage Grotesque · Newsreader · Courier Prime
   ====================================================== */

:root{
  --paper:#E4E1D6;
  --paper-2:#EEECE3;
  --grid:rgba(31,43,82,0.06);
  --ink:#191B1E;
  --ink-2:#41444A;
  --ink-3:#6E7178;
  --blue:#1F2B52;
  --blue-2:#36447A;
  --red:#E5231A;
  --rule:#C7C3B6;
  --display:'Bricolage Grotesque','Archivo',sans-serif;
  --serif:'Newsreader',Georgia,serif;
  --type:'Courier Prime','Courier New',monospace;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:18px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
}
::selection{background:var(--red);color:var(--paper);}
a{color:inherit;text-decoration:none;}
a.link{border-bottom:1px solid currentColor;padding-bottom:1px;transition:.15s;}
a.link:hover{color:var(--red);border-color:var(--red);}
img{max-width:100%;height:auto;display:block;}

.shell{max-width:940px;margin:0 auto;padding:0 0 100px;}
.shell>*{margin-left:36px;margin-right:36px;}

/* dot motif — le point rouge récurrent */
.topstrip{
  display:flex;justify-content:space-between;gap:24px;align-items:center;
  font-family:var(--type);font-size:12px;letter-spacing:0.02em;text-transform:uppercase;color:var(--blue);
  padding:16px 0 14px;border-bottom:1px solid var(--blue);
}
.topstrip .ed{color:var(--red);font-weight:700;}

/* ---- Frontispiece : titre + idéogramme, asymétrie + air ---- */
.frontispiece{
  padding:64px 0 60px;border-bottom:1px solid var(--blue);
  display:grid;grid-template-columns:1fr 280px;gap:48px;align-items:center;
}
.frontispiece .fp-text{min-width:0;}
.frontispiece img.lockup{width:122px;margin:0 0 34px;mix-blend-mode:multiply;}
.frontispiece .eyebrow{
  font-family:var(--type);font-size:13px;letter-spacing:0.01em;color:var(--blue-2);
  margin-bottom:22px;display:flex;gap:12px;align-items:center;
}
.frontispiece .eyebrow::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--red);flex:none;}
.frontispiece h1{
  font-family:var(--display);font-weight:800;font-size:92px;line-height:0.86;
  letter-spacing:-0.04em;margin:0 0 26px;color:var(--ink);text-wrap:balance;
}
.frontispiece h1 .dot{color:var(--red);}
.frontispiece .deck{
  font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.48;
  color:var(--ink-2);max-width:520px;margin:0;text-wrap:pretty;
}

/* idéogramme radar : anneau + point rouge (le déplacement) */
.ideogram{justify-self:end;width:260px;height:260px;}
.ideogram svg{width:100%;height:100%;display:block;overflow:visible;}

/* ---- Meta row : trois aplats, air ---- */
.meta-row{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--blue);}
.meta-row span{
  font-family:var(--type);font-size:12.5px;letter-spacing:0.01em;color:var(--ink);
  padding:18px 0;border-left:1px solid var(--rule);display:flex;flex-direction:column;gap:4px;
}
.meta-row span:first-child{border-left:0;}
.meta-row span::before{content:attr(data-k);color:var(--blue-2);font-size:11px;text-transform:uppercase;letter-spacing:0.06em;}

/* ---- Sections : grand chiffre, point rouge en regard ---- */
.section-head{
  display:grid;grid-template-columns:150px 1fr;gap:30px;align-items:start;
  padding-top:56px;margin-top:60px;margin-bottom:30px;border-top:1px solid var(--blue);
}
.section-num{
  font-family:var(--display);font-weight:800;font-size:84px;line-height:0.78;
  letter-spacing:-0.05em;color:var(--blue);padding-top:2px;position:relative;
}
.section-num::after{content:"";position:absolute;left:1px;top:-14px;width:11px;height:11px;border-radius:50%;background:var(--red);}
.section-title{
  font-family:var(--display);font-weight:800;font-size:42px;line-height:0.98;
  letter-spacing:-0.03em;margin:6px 0 0;text-wrap:balance;color:var(--ink);
}
.section-deck{
  grid-column:2;font-family:var(--serif);font-size:18.5px;line-height:1.52;
  color:var(--ink-2);margin:16px 0 0;max-width:560px;text-wrap:pretty;
}

/* ---- Prose ---- */
.prose{display:grid;grid-template-columns:150px 1fr;gap:30px;}
.prose .num{font-family:var(--type);font-size:12.5px;letter-spacing:0.01em;color:var(--blue-2);padding-top:7px;}
.prose-body{font-family:var(--serif);font-size:19px;line-height:1.64;color:var(--ink);max-width:600px;}
.prose-body p{margin:0 0 18px;}
.prose-body p:last-child{margin-bottom:0;}
.prose-body em{font-style:italic;}

.callout{
  font-family:var(--display);font-weight:700;font-size:34px;line-height:1.12;
  color:var(--blue);margin:40px 0 40px 180px;padding:0;max-width:580px;
  text-wrap:balance;letter-spacing:-0.02em;position:relative;
}
.callout::before{content:"";position:absolute;left:-180px;top:14px;width:120px;height:6px;background:var(--red);}

/* ---- Sample : feuille de relevé, sobre ---- */
.sample-frame{margin-top:16px;margin-left:180px;padding:0;background:var(--paper-2);border:1px solid var(--blue);position:relative;}
.sample-eyebrow{
  font-family:var(--type);font-size:11.5px;letter-spacing:0.01em;color:var(--paper-2);
  padding:12px 28px;margin:0;background:var(--blue);display:flex;justify-content:space-between;
}
.sample-mat{font-family:var(--display);font-weight:800;font-size:30px;line-height:0.96;letter-spacing:-0.035em;text-align:left;margin:0;padding:24px 28px 4px;color:var(--ink);}
.sample-mat em{font-style:normal;}
.sample-stand{font-family:var(--serif);font-style:italic;font-size:15.5px;line-height:1.5;color:var(--ink-2);text-align:left;margin:0;padding:0 28px 20px;border-bottom:1px solid var(--rule);}
.sample-item{display:grid;grid-template-columns:54px 1fr;gap:20px;padding:22px 28px;border-top:1px solid var(--rule);}
.sample-item:first-of-type{border-top:0;}
.sample-num{font-family:var(--display);font-weight:800;font-size:26px;line-height:1;color:var(--blue);padding-top:2px;position:relative;}
.sample-num::before{content:"";position:absolute;left:1px;top:-9px;width:7px;height:7px;border-radius:50%;background:var(--red);}
.sample-title{font-family:var(--display);font-weight:700;font-size:20px;line-height:1.16;letter-spacing:-0.025em;color:var(--ink);margin:0 0 9px;}
.sample-body{font-family:var(--serif);font-size:16.5px;line-height:1.56;color:var(--ink-2);margin:0;}
.sample-body em{font-style:italic;}
.sample-src{font-family:var(--type);font-size:12.5px;letter-spacing:0.01em;color:var(--blue-2);margin:12px 0 0;}
.sample-src a{border-bottom:1px solid currentColor;padding-bottom:1px;transition:color .15s,border-color .15s;}
.sample-src a:hover{color:var(--red);}

/* ---- Subscribe : aplat bleu franc ---- */
.subscribe{
  margin-top:16px;margin-left:180px;padding:36px 32px 38px;background:var(--blue);
  color:var(--paper);position:relative;border:0;
}
.subscribe::after{content:"";position:absolute;top:22px;right:26px;width:16px;height:16px;border-radius:50%;background:var(--red);}
.subscribe-head{font-family:var(--type);font-size:13px;font-weight:700;letter-spacing:0.01em;color:var(--paper);margin:0 0 10px;}
.subscribe-deck{font-family:var(--display);font-weight:700;font-size:25px;line-height:1.12;letter-spacing:-0.02em;color:var(--paper);margin:0 0 26px;max-width:520px;}
form.brevo{display:grid;gap:15px;max-width:100%;}
form.brevo .row{display:grid;gap:7px;}
form.brevo .row.row-2{grid-template-columns:1fr 1fr;gap:15px;}
form.brevo label{font-family:var(--type);font-size:12px;letter-spacing:0.01em;color:rgba(255,255,255,0.78);}
form.brevo label span[style]{color:rgba(255,255,255,0.55)!important;}
form.brevo .req{color:var(--red);margin-left:2px;}
form.brevo input[type="email"],form.brevo input[type="text"]{
  appearance:none;-webkit-appearance:none;border:1px solid rgba(255,255,255,0.4);background:rgba(255,255,255,0.06);
  padding:14px 15px;font-family:var(--type);font-size:15px;line-height:1.4;color:var(--paper);border-radius:0;transition:.15s;
}
form.brevo input::placeholder{color:rgba(255,255,255,0.45);}
form.brevo input:focus{outline:none;border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red);background:rgba(255,255,255,0.1);}
form.brevo .consent{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start;margin-top:4px;font-family:var(--serif);font-size:14.5px;line-height:1.5;color:rgba(255,255,255,0.82);}
form.brevo .consent input{margin-top:4px;accent-color:var(--red);}
form.brevo .consent a.link{color:var(--paper);}
form.brevo button{
  margin-top:8px;appearance:none;border:0;background:var(--red);color:var(--paper);
  padding:16px 32px;font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:-0.01em;
  cursor:pointer;border-radius:0;transition:.15s;justify-self:start;
}
form.brevo button:hover{background:var(--paper);color:var(--blue);}
form.brevo .formnote{font-family:var(--serif);font-style:italic;font-size:14px;line-height:1.5;color:rgba(255,255,255,0.6);margin-top:4px;}
form.brevo .formnote a{font-style:normal;border-bottom:1px solid currentColor;}
.formmsg{margin:16px 0 0 180px;padding:16px 20px;border-left:6px solid var(--red);background:var(--paper-2);font-family:var(--serif);font-size:16px;line-height:1.5;display:none;}
.formmsg.show{display:block;}
.formmsg.success{border-color:var(--blue);}

/* ---- Notes / FAQ ---- */
.notes{display:grid;grid-template-columns:150px 1fr 1fr;gap:30px;padding-top:24px;border-top:1px solid var(--rule);margin-top:24px;}
.notes:first-of-type{margin-top:0;}
.notes>.section-num{font-size:34px;padding-top:2px;}
.notes>.section-num::after{top:-9px;width:8px;height:8px;}
.notes h3{font-family:var(--display);font-weight:700;font-size:18px;line-height:1.18;letter-spacing:-0.02em;color:var(--ink);margin:0 0 9px;}
.notes p{font-family:var(--serif);font-size:16px;line-height:1.58;margin:0 0 12px;color:var(--ink-2);}
.notes em{font-style:italic;}

/* ---- Footer ---- */
footer.foot{margin-top:90px;padding-top:20px;border-top:1px solid var(--blue);display:grid;grid-template-columns:150px 1fr 1fr;gap:30px;align-items:start;}
footer.foot .section-num{font-family:var(--display);font-weight:800;font-size:30px;color:var(--red);padding-top:2px;}
footer.foot .section-num::after{content:"";display:none;}
footer.foot .signature{font-family:var(--display);font-weight:700;font-size:17px;color:var(--ink);}
footer.foot .signature .meta{display:block;font-family:var(--type);font-size:12px;letter-spacing:0.01em;color:var(--blue-2);margin-top:6px;}
footer.foot nav{font-family:var(--type);font-size:12.5px;letter-spacing:0.01em;display:flex;flex-wrap:wrap;gap:18px;justify-content:flex-end;align-items:baseline;}
footer.foot nav a{color:var(--blue);border-bottom:1px solid transparent;padding-bottom:1px;}
footer.foot nav a:hover{border-color:var(--red);color:var(--red);}
.colophon-rule{grid-column:1 / -1;border-top:1px solid var(--rule);margin-top:28px;padding-top:16px;font-family:var(--type);font-size:12px;letter-spacing:0.01em;color:var(--ink-3);}
.colophon-rule em{font-style:italic;}

/* ---- Responsive ---- */
@media(max-width:860px){
  .shell>*{margin-left:20px;margin-right:20px;}
  .frontispiece{grid-template-columns:1fr;gap:36px;padding:44px 0 40px;}
  .ideogram{justify-self:start;width:200px;height:200px;}
  .frontispiece h1{font-size:58px;}
  .section-head,.prose,.notes,footer.foot{grid-template-columns:1fr;gap:12px;}
  .section-deck{grid-column:auto;}
  .section-num{padding-top:0;}
  .section-num::after{top:auto;bottom:-2px;}
  .callout{margin-left:0;padding-top:18px;}
  .callout::before{left:0;top:0;}
  .sample-frame,.subscribe,.formmsg{margin-left:0;}
  .section-title{font-size:32px;}
  .meta-row{grid-template-columns:1fr;}
  .meta-row span{border-left:0;border-top:1px solid var(--rule);}
  .meta-row span:first-child{border-top:0;}
  form.brevo .row.row-2{grid-template-columns:1fr;}
  footer.foot nav{justify-content:flex-start;}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}