/* ============================================================================
   plaquette.css — gabarit des 36 plaquettes outil.
   Charger APRÈS assets/jetons.css, et JAMAIS avec etik.css : plusieurs noms de
   classe (.card, .kicker, .wrap, footer) existent des deux côtés avec des
   définitions différentes.

   Origine : les 36 plaquettes embarquaient chacune ~7,4 Ko de CSS en ligne,
   soit 268 Ko dupliqués. 34 étaient strictement identiques ; auditpharma et rh
   ajoutaient les règles d'icônes Lucide. Ce fichier est leur SURENSEMBLE,
   converti au canon — aucune des deux ne perd de style.

   Ce que la conversion corrige, au-delà des couleurs :
   les sur-titres (.kicker), les étiquettes (.way .tag) et les rôles (.node
   .who) étaient en #F26A45 sur crème, soit ≈ 2,9:1. Le canon l'interdit
   explicitement — « sur fond clair, le corail ne porte pas de texte, à aucune
   taille ». Ils passent en teal-deep (7,71:1). Les deux endroits où du corail
   reste porteur de sens sur fond clair (les ✕ de la colonne « avant ») passent
   à corail-encre #D12D00, la seule valeur corail que le canon mesure comme
   lisible — 4,53:1 sur sa propre surface.
   ============================================================================ */

:root{
  /* Alias locaux : les plaquettes parlent d'accent et de corail, le canon parle
     de teal et de grades. On mappe ici, une fois, plutôt que dans 36 fichiers. */
  --accent:      var(--teal-deep);
  --accent-soft: var(--teal);
  --accent-pale: var(--teal-soft);
  --coral:       var(--corail);
  --coral-pale:  var(--corail-soft);
  --coral-encre: #D12D00;        /* canon, table des grades — ✎ calculée, cf. jetons.css */
  --bord-coral:  #F6CFC2;
  --bord-accent: #C9DEE4;
  --surface:     #ffffff;
  --surface-hi:  #F6F3EA;        /* surface de la famille chaude */
  --bord-fort:   #D8D1BF;        /* plein chaud */
}

*{box-sizing:border-box; margin:0; padding:0;}
html{ background:var(--sol); }
body{
  font-family:var(--texte); background:var(--sol); color:var(--ink);
  line-height:1.55; -webkit-font-smoothing:antialiased;
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
img,svg{ max-width:100%; height:auto; }

/* Ces plaquettes sont faites pour être imprimées et données à l'équipe :
   la mise en page papier fait partie du livrable, pas d'un bonus. */
@media print{
  @page{ margin:14mm 12mm; }
  section{ padding:26px 0; }
  .hero{ border-radius:0 0 18px 18px; }
  .quickwin,.card,.way,.col,.node{ break-inside:avoid; }
}

.wrap{ max-width:980px; margin:0 auto; padding:0 22px; }
section{ padding:46px 0; }
h1,h2,h3{ font-family:var(--display); font-weight:700; line-height:1.15; }
.mono{ font-family:var(--tech); }
.pill{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:5px 11px; border-radius:99px; }

/* Icônes Lucide inline (tracés extraits de lucide-static). stroke=currentColor
   → l'icône prend la couleur de son conteneur. Venait de rh et auditpharma. */
.icn{ width:1em; height:1em; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vertical-align:-.15em; flex-shrink:0; }

/* ---- Hero ---- */
.hero{ background:linear-gradient(135deg, var(--teal-deep) 0%, var(--teal) 58%, var(--corail) 150%); color:#fff; border-radius:0 0 28px 28px; overflow:hidden; position:relative; }
.hero::after{ content:""; position:absolute; inset:0; background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 9px); opacity:.5; pointer-events:none; }
.hero .wrap{ position:relative; padding-top:34px; padding-bottom:48px; }
.brand{ display:flex; align-items:center; gap:9px; font-weight:700; font-size:16px; letter-spacing:.01em; }
/* La marque est une TUILE, pas un disque : le rayon suit celui du SVG
   (rx 21.6 sur une boîte de 96, soit 22,5 %). border-radius:50% la
   déformerait en pastille — c'était l'ancien alphabet de disques. */
.brand .dot{ width:26px; height:26px; border-radius:6px; display:inline-block; vertical-align:middle; }
.hero h1{ font-size:clamp(30px,5.4vw,52px); font-weight:700; margin-top:26px; letter-spacing:-.015em; }
.hero h1 .em{ color:var(--corail); }
.hero .lead{ font-size:clamp(15px,2.4vw,19px); max-width:640px; margin-top:16px; color:rgba(255,255,255,.92); }
.hero .promise{ margin-top:22px; display:inline-flex; align-items:center; gap:10px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); padding:11px 16px; border-radius:12px; font-size:14px; }
.hero .promise .icn{ font-size:18px; }
.hero .url{ margin-top:18px; font-family:var(--tech); font-size:13px; color:rgba(255,255,255,.85); }
.dlbtn{ display:inline-flex; align-items:center; gap:9px; margin-top:20px; background:#fff; color:var(--accent); text-decoration:none; font-weight:700; font-size:14px; padding:13px 20px; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.18); transition:transform .15s var(--ease-enter); }
.dlbtn:hover{ transform:translateY(-2px); }
.dlbtn .icn{ font-size:17px; }

/* ---- Titraille de section ---- */
.kicker{ font-family:var(--tech); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-weight:600; }
h2.title{ font-size:clamp(23px,3.6vw,33px); margin-top:8px; }
.sub{ color:var(--muted); margin-top:10px; max-width:680px; font-size:15px; }

/* ---- Grilles et cartes ---- */
.grid{ display:grid; gap:16px; margin-top:26px; }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
@media(max-width:720px){ .g2,.g3{ grid-template-columns:1fr; } }

.card{ background:var(--surface); border:1px solid var(--filet); border-radius:16px; padding:22px; box-shadow:0 1px 2px rgba(28,26,22,.04); }
.card .ico{ font-size:26px; color:var(--accent-soft); line-height:1; }
.card h3{ font-size:17px; margin-top:12px; }
.card p{ font-size:13.5px; color:var(--muted); margin-top:7px; }
.card .who{ display:inline-block; margin-top:11px; font-family:var(--tech); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); }

/* ---- Avant / après ---- */
.ba{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:26px; }
@media(max-width:720px){ .ba{ grid-template-columns:1fr; } }
.ba .col{ border-radius:16px; padding:22px; }
.ba .before{ background:var(--coral-pale); border:1px solid var(--bord-coral); }
.ba .after{ background:var(--accent-pale); border:1px solid var(--bord-accent); }
.ba h3{ font-size:16px; display:flex; align-items:center; gap:8px; }
.ba ul{ list-style:none; margin-top:12px; display:flex; flex-direction:column; gap:9px; }
.ba li{ font-size:13.5px; display:flex; gap:9px; align-items:flex-start; }
/* Ces glyphes portent le sens de la ligne (nié / obtenu) : ils doivent tenir
   leur contraste, ce qui exclut le corail de base. */
.ba .before li::before{ content:"\2715"; color:var(--coral-encre); font-weight:700; }
.ba .after  li::before{ content:"\2713"; color:var(--accent); font-weight:700; }

/* ---- Encart plein ---- */
.quickwin{ background:var(--accent); color:#fff; border-radius:22px; padding:34px; position:relative; overflow:hidden; }
.quickwin::after{ content:""; position:absolute; right:-40px; top:-40px; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle, rgba(246,132,81,.5), transparent 70%); }
.quickwin .pill{ background:rgba(255,255,255,.16); color:var(--corail-soft); }
.quickwin h2{ font-size:clamp(22px,3.4vw,30px); margin-top:14px; position:relative; }
.quickwin p{ margin-top:12px; max-width:660px; color:rgba(255,255,255,.9); position:relative; font-size:15px; }
.quickwin .big{ margin-top:18px; font-family:var(--display); font-size:19px; font-weight:600; position:relative; }
.quickwin .big b{ color:var(--corail); }

/* ---- Usages ---- */
.ways{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:24px; }
@media(max-width:720px){ .ways{ grid-template-columns:1fr; } }
.way{ background:var(--surface); border:1px solid var(--filet); border-radius:14px; padding:18px; }
.way .tag{ font-family:var(--tech); font-size:11px; color:var(--accent); }
.way h3{ font-size:15px; margin-top:5px; }
.way p{ font-size:13px; color:var(--muted); margin-top:6px; }

.feat{ display:flex; gap:13px; align-items:flex-start; padding:14px 0; border-top:1px solid var(--filet); }
.feat .b{ flex-shrink:0; width:34px; height:34px; border-radius:9px; background:var(--accent-pale); color:var(--accent-soft); display:flex; align-items:center; justify-content:center; font-size:17px; }
.feat h4{ font-size:14px; font-weight:700; font-family:var(--texte); }
.feat p{ font-size:13px; color:var(--muted); margin-top:2px; }

/* ---- Déroulé numéroté ---- */
.flow{ margin-top:26px; display:flex; flex-direction:column; gap:0; }
.node{ display:flex; gap:16px; }
.rail{ display:flex; flex-direction:column; align-items:center; }
.rail .num{ width:36px; height:36px; border-radius:50%; background:var(--accent); color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; box-shadow:0 0 0 4px var(--accent-pale); font-variant-numeric:tabular-nums; }
.rail .line{ width:2px; flex:1; background:linear-gradient(var(--accent),var(--coral)); margin:4px 0; min-height:18px; }
.node:last-child .rail .line{ display:none; }
.node .body{ padding-bottom:22px; flex:1; }
.node h3{ font-size:16px; display:flex; align-items:center; gap:8px; }
.node h3 .icn{ font-size:18px; color:var(--accent-soft); }
.node .who{ font-family:var(--tech); font-size:11px; letter-spacing:.05em; color:var(--accent); text-transform:uppercase; }
.node p{ font-size:13.5px; color:var(--muted); margin-top:5px; }
.chip{ display:inline-block; font-family:var(--tech); font-size:11px; background:var(--surface-hi); border:1px solid var(--filet); border-radius:6px; padding:2px 8px; margin-top:8px; color:var(--ink); }

/* ---- Pied ---- */
footer{ background:var(--surface-hi); border-top:1px solid var(--filet); margin-top:30px; }
footer .wrap{ padding:30px 22px; display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center; }
footer .url{ font-family:var(--tech); font-size:14px; color:var(--accent); font-weight:500; }
footer .sig{ font-size:12px; color:var(--muted); }
.divider{ height:1px; background:var(--filet); margin:0; }