:root{
  --nuit:#14152B;
  --indigo:#332F52;
  --indigo-clair:#3E3A66;
  --rouge:#E03127;
  --cyan:#46A5CC;
  --cyan-clair:#6FC0E2;
  --blanc:#F4F3F9;
  --gris:#A9A5C4;
  --display:"Archivo",system-ui,sans-serif;
  --body:"Karla",system-ui,sans-serif;
  --gut:clamp(20px,5vw,64px);
  --max:1000px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--nuit);color:var(--blanc);font-family:var(--body);font-weight:300;font-size:clamp(16px,1.05vw,17.5px);line-height:1.75;-webkit-font-smoothing:antialiased}
a{color:var(--cyan-clair)}
:focus-visible{outline:2px solid var(--cyan-clair);outline-offset:3px}

/* haut */
.top{border-bottom:1px solid rgba(169,165,196,.14)}
.top__in{max-width:var(--max);margin:0 auto;padding:18px var(--gut);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.mark{font-family:var(--display);font-weight:800;font-size:1.15rem;letter-spacing:.02em;color:var(--blanc);text-decoration:none}
.mark em{font-style:normal;color:var(--rouge)}
.back{font-family:var(--display);font-weight:600;font-size:.9rem;color:var(--gris);text-decoration:none;transition:color .25s}
.back:hover,.back:focus-visible{color:var(--cyan-clair)}

/* entête de page */
.hero{max-width:var(--max);margin:0 auto;padding:clamp(48px,7vw,88px) var(--gut) 24px}
.kicker{font-family:var(--display);font-weight:600;font-size:.85rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan-clair);margin:0 0 14px}
.hero h1{font-family:var(--display);font-weight:800;font-size:clamp(2.4rem,6vw,4.4rem);line-height:1;letter-spacing:-.025em;margin:0 0 22px}
.hero h1 em{font-style:normal;color:var(--rouge)}
.lede{font-size:clamp(1.02rem,1.5vw,1.2rem);color:#DCD9EC;max-width:60ch;margin:0}

/* sections */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.sec{padding:clamp(40px,6vw,72px) 0;border-top:1px solid rgba(169,165,196,.14)}
.sec--alt{background:var(--indigo)}
.sec h2{font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,3.2vw,2.3rem);line-height:1.1;letter-spacing:-.015em;margin:0 0 22px;position:relative;padding-bottom:14px}
.sec h2::after{content:"";position:absolute;left:0;bottom:0;width:56px;height:3px;background:var(--rouge);border-radius:2px}
.sec h3{font-family:var(--display);font-weight:700;font-size:1.2rem;margin:0 0 10px;color:#fff}
.sec p{color:#DAD7EA;max-width:70ch;margin:0 0 16px}
.sec p.lst{padding-left:18px;border-left:3px solid var(--indigo-clair)}
.sec p:last-child{margin-bottom:0}
.note{font-size:.88rem;color:var(--gris)}
.quote{font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.3;color:#fff;max-width:36ch;margin:0 auto;text-align:center}

/* chips d'information */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 30px}
.chip{font-family:var(--display);font-weight:600;font-size:.92rem;color:#E7E5F3;background:var(--indigo-clair);border-left:4px solid var(--cyan);border-radius:6px;padding:10px 16px}
.chip--rouge{border-left-color:var(--rouge)}

/* cartes */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.card{background:var(--indigo);border-left:4px solid var(--cyan);border-radius:8px;padding:24px 24px 26px}
.card--big{font-family:var(--display);font-weight:800;font-size:clamp(1.8rem,3.4vw,2.6rem);color:#fff;line-height:1.1;margin:0 0 6px}
.card .label{font-family:var(--display);font-weight:600;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan-clair);margin:0 0 10px}
.card p{margin:0 0 10px;color:#D6D3EA;font-size:.96rem}
.card p:last-child{margin-bottom:0}
.card a{font-weight:600}

/* tableau */
.table-wrap{overflow-x:auto;border-radius:8px;border:1px solid rgba(169,165,196,.2);margin-top:20px}
table{width:100%;border-collapse:collapse;font-size:.95rem;color:#E7E5F3;min-width:520px}
th,td{text-align:left;padding:12px 16px;border-bottom:1px solid rgba(169,165,196,.16);vertical-align:top}
thead th{font-family:var(--display);font-weight:700;background:var(--indigo);color:#fff}

/* pied */
footer{background:var(--nuit);border-top:2px solid rgba(169,165,196,.16);padding:40px 0 30px;margin-top:40px}
.foot{max-width:var(--max);margin:0 auto;padding:0 var(--gut);display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:center}
.foot a{color:var(--gris);font-size:.92rem;text-decoration:none;transition:color .25s}
.foot a:hover,.foot a:focus-visible{color:var(--cyan-clair)}
.copy{width:100%;text-align:center;color:var(--gris);font-size:.82rem;margin-top:8px}

@media (max-width:640px){
  .cards{grid-template-columns:1fr}
}