/* ==========================================================================
   Pages du Prisme IA · feuille unique des trois numéros.
   Ces pages sont ouvertes depuis la newsletter, souvent sur un téléphone,
   souvent en deux minutes. Donc une colonne, pas de décor, et le prompt
   lisible du premier coup d'œil. Mêmes jetons que le reste du site.
   ========================================================================== */
:root{
  --paper:#FFFFFF; --bone:#FAF7F2; --ink:#1C1A17; --graphite:#6A645C;
  --mist:#E9E3DA; --clay-700:#8F3F26; --clay-600:#C05A38; --clay-200:#ECC6B2;
  --clay-50:#F8ECE4;
  --serif:'Cormorant Garamond','Cormorant Fallback',Georgia,serif;
  --sans:'Jost','Jost Fallback',Arial,sans-serif;
  --r:8px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:var(--sans); color:var(--ink); background:var(--bone);
  line-height:1.68; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:720px;margin:0 auto;padding-inline:20px;}

/* ---------- en-tête ---------- */
.top{padding-block:34px 0;}
.mark{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;width:max-content;}
.mark svg{width:30px;height:30px;flex:none;}
.mark .w{font-family:var(--serif);font-weight:600;font-size:23px;letter-spacing:-.01em;}
.mark .ia{font-family:var(--sans);font-weight:600;font-size:10px;color:var(--clay-600);
  vertical-align:super;letter-spacing:.06em;margin-left:1px;}

header.hd{padding-block:40px 0;}
.kicker{font-size:11px;font-weight:600;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--clay-600);margin-bottom:15px;}
h1{font-family:var(--serif);font-weight:600;font-size:clamp(32px,6.4vw,46px);
  line-height:1.1;letter-spacing:-.01em;text-wrap:balance;}
.chapo{margin-top:16px;font-size:17.5px;color:var(--graphite);max-width:58ch;}

/* ---------- encadré « ce qu'il te faut » ---------- */
.besoin{
  margin-top:28px;background:var(--clay-50);border:1px solid var(--clay-200);
  border-radius:14px;padding:16px 20px;font-size:15px;color:var(--ink);
}
.besoin b{font-weight:600;}

/* ---------- bloc du prompt ---------- */
.code{margin-top:30px;border:1px solid var(--mist);border-radius:14px;
  background:var(--paper);overflow:hidden;}
.code .bar{
  display:flex;align-items:center;gap:10px;padding:11px 16px;
  background:var(--clay-50);border-bottom:1px solid var(--mist);
  font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--clay-700);
}
.code .bar .pt{width:7px;height:7px;border-radius:50%;background:var(--clay-600);flex:none;}
.code .bar .sp{margin-left:auto;}
.copy{
  font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.04em;
  color:#fff;background:var(--clay-600);border:0;border-radius:100px;
  padding:7px 16px;cursor:pointer;transition:background .15s;white-space:nowrap;
}
.copy:hover{background:var(--clay-700);}
.copy.ok{background:#4A6B52;}
.code pre{
  margin:0;padding:22px 20px;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:13.5px;line-height:1.75;color:var(--ink);
  white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;
}

/* ---------- les réglages ---------- */
h2{font-family:var(--serif);font-weight:600;font-size:clamp(25px,4.6vw,32px);
  line-height:1.2;margin-top:52px;text-wrap:balance;}
h2 em{font-style:italic;color:var(--clay-600);}
ol.reglages{margin-top:22px;list-style:none;counter-reset:r;}
ol.reglages li{
  counter-increment:r;position:relative;padding-left:46px;margin-bottom:20px;
  font-size:16.5px;max-width:62ch;
}
ol.reglages li::before{
  content:counter(r);position:absolute;left:0;top:-1px;
  width:30px;height:30px;border-radius:50%;background:var(--clay-50);
  border:1px solid var(--clay-200);color:var(--clay-700);
  font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;
}

/* ---------- la checklist du 03 ---------- */
ol.liste{margin-top:26px;list-style:none;counter-reset:c;}
ol.liste li{
  counter-increment:c;position:relative;padding:18px 20px 18px 62px;
  margin-bottom:12px;background:var(--paper);border:1px solid var(--mist);
  border-radius:14px;font-size:16.5px;
}
ol.liste li::before{
  content:counter(c);position:absolute;left:20px;top:17px;
  width:28px;height:28px;border-radius:50%;background:var(--clay-600);color:#fff;
  font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;
}

/* ---------- appel à l'action ---------- */
.cta{margin-top:54px;padding-top:34px;border-top:1px solid var(--mist);}
.btn{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  background:var(--clay-600);color:#fff;font-weight:500;font-size:16px;
  padding:15px 30px;border-radius:100px;transition:background .18s;
}
.btn:hover{background:var(--clay-700);}
.btn svg{width:16px;height:16px;flex:none;}

/* ---------- pied ---------- */
footer{margin-top:60px;padding-block:26px 44px;border-top:1px solid var(--mist);
  font-size:14.5px;color:var(--graphite);}
footer a{color:var(--clay-700);text-underline-offset:3px;}

@media (max-width:460px){
  .top{padding-block:26px 0;}
  header.hd{padding-block:30px 0;}
  .code pre{font-size:12.5px;padding:18px 16px;}
  .cta{margin-top:42px;}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;}}