@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Cabin:wght@400;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

:root{
  --walnut-1:#4a3122;      /* cadre bois foncé */
  --walnut-2:#33200f;
  --mahogany-1:#7d3218;    /* panneau intérieur acajou */
  --mahogany-2:#4d1c0d;
  --maple-1:#e6c286;       /* érable clair (reliefs) */
  --maple-2:#c39a5c;
  --brass:#c9a227;
  --brass-light:#f0d98a;
  --parchment:#f2e2c2;
  --ink:#2a1a10;
  --muted:#e0c9a4;
  --radius: 26px;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:"Cabin",system-ui,sans-serif;
  color:var(--parchment);
  background-color:#5b3a22;
  background-image:
    radial-gradient(ellipse at top,#8a5c36 0%,transparent 60%),
    radial-gradient(ellipse at bottom,#2b1a0e 0%,transparent 70%),
    repeating-linear-gradient(92deg,#5d3c23 0 4px,#66432a 4px 9px,#573721 9px 12px,#6b482d 12px 18px);
  background-blend-mode:soft-light,multiply,normal;
  min-height:100vh;
  padding:24px 14px 60px;
  -webkit-font-smoothing:antialiased;
}

.lang-selector{max-width:880px;margin:0 auto 18px;display:flex;justify-content:flex-end}
.lang-selector select{
  font-family:"JetBrains Mono",monospace;font-size:12px;
  padding:8px 14px;border-radius:999px;
  border:1px solid rgba(201,162,39,.55);
  background:linear-gradient(180deg,#5c3b22,#3d2614);
  color:var(--maple-1);cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12);
}

/* ===== Plaque : cadre noyer avec entailles d'angle ===== */
.plaque{
  position:relative;max-width:880px;margin:0 auto;
  padding:26px;
  background:
    linear-gradient(180deg,var(--walnut-1),var(--walnut-2)),
    repeating-linear-gradient(115deg,rgba(0,0,0,.16) 0 3px,transparent 3px 8px);
  background-blend-mode:normal,overlay;
  border-radius:var(--radius);
  box-shadow:
    0 34px 70px -26px rgba(0,0,0,.75),
    inset 0 2px 0 rgba(255,255,255,.14),
    inset 0 -3px 6px rgba(0,0,0,.55);
  /* entailles arrondies dans les 4 angles, comme sur l'icône */
  -webkit-mask:
    radial-gradient(circle 34px at 0 0,transparent 33px,#000 34px),
    radial-gradient(circle 34px at 100% 0,transparent 33px,#000 34px),
    radial-gradient(circle 34px at 0 100%,transparent 33px,#000 34px),
    radial-gradient(circle 34px at 100% 100%,transparent 33px,#000 34px);
  -webkit-mask-composite:source-in;
  mask:
    radial-gradient(circle 34px at 0 0,transparent 33px,#000 34px),
    radial-gradient(circle 34px at 100% 0,transparent 33px,#000 34px),
    radial-gradient(circle 34px at 0 100%,transparent 33px,#000 34px),
    radial-gradient(circle 34px at 100% 100%,transparent 33px,#000 34px);
  mask-composite:intersect;
}

/* filet laiton du cadre */
.plaque::before{
  content:"";position:absolute;inset:13px;border-radius:16px;
  border:2px solid rgba(201,162,39,.6);
  box-shadow:0 0 0 1px rgba(0,0,0,.35), inset 0 0 0 1px rgba(240,217,138,.25);
  pointer-events:none;
}

.rivet{position:absolute;width:20px;height:20px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#ffeeb0,var(--brass) 55%,#6d5410 100%);
  box-shadow:0 2px 4px rgba(0,0,0,.65), inset 0 -2px 3px rgba(0,0,0,.35);}
.rivet-tl{top:30px;left:30px}.rivet-tr{top:30px;right:30px}
.rivet-bl{bottom:30px;left:30px}.rivet-br{bottom:30px;right:30px}

/* ===== Panneau acajou intérieur ===== */
.panel{
  position:relative;
  border-radius:14px;
  padding:52px 30px 40px;
  background:
    radial-gradient(ellipse at 50% 8%,rgba(255,196,120,.22),transparent 62%),
    linear-gradient(180deg,var(--mahogany-1),var(--mahogany-2)),
    repeating-linear-gradient(92deg,rgba(0,0,0,.14) 0 2px,transparent 2px 7px);
  background-blend-mode:screen,normal,overlay;
  box-shadow:
    inset 0 3px 10px rgba(0,0,0,.6),
    inset 0 -3px 10px rgba(0,0,0,.5),
    0 0 0 2px rgba(201,162,39,.45);
}

.logo{display:block;margin:0 auto 20px;max-width:260px;width:64%;height:auto;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.55))}

h1{
  font-family:"Abril Fatface",serif;font-weight:400;text-align:center;
  font-size:clamp(2.5rem,7.5vw,3.8rem);line-height:1.05;
  background:linear-gradient(180deg,var(--maple-1),var(--maple-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 2px 0 rgba(0,0,0,.45), 0 -1px 0 rgba(255,255,255,.18);
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.55));
}
h1 .c{
  background:linear-gradient(180deg,var(--brass-light),#9c7a15);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.tagline{
  display:block;text-align:center;margin-top:12px;
  font-family:"JetBrains Mono",monospace;font-size:.75rem;
  text-transform:uppercase;letter-spacing:.2em;color:var(--brass-light);
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
h2{
  font-family:"Abril Fatface",serif;font-weight:400;font-style:italic;
  font-size:1.75rem;text-align:center;margin-bottom:14px;
  background:linear-gradient(180deg,var(--brass-light),#a8811a);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.6));
}
h3{font-family:"Abril Fatface",serif;font-weight:400;font-size:1.2rem;text-align:center;
  color:var(--maple-1);text-shadow:0 2px 3px rgba(0,0,0,.6)}
p{line-height:1.68;color:var(--parchment)}
.lead{text-align:center;font-size:1.05rem;max-width:56ch;margin:0 auto;color:var(--muted)}

/* séparateur laiton gravé */
.divider{
  position:relative;height:14px;margin:34px auto;max-width:460px;
}
.divider::before{
  content:"";position:absolute;top:6px;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(201,162,39,.85),transparent);
  box-shadow:0 1px 0 rgba(0,0,0,.5);
}
.divider::after{
  content:"◈";position:absolute;left:50%;top:-6px;transform:translateX(-50%);
  color:var(--brass-light);font-size:15px;text-shadow:0 2px 3px rgba(0,0,0,.7);
  background:var(--mahogany-2);padding:0 10px;
}

/* médaillon mission, comme la niche gravée de l'icône */
.mission-box{
  margin-top:24px;padding:24px 22px;border-radius:18px;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(0,0,0,.35),transparent 70%),
    linear-gradient(180deg,#5f2413,#3d1509);
  border:2px solid rgba(201,162,39,.5);
  box-shadow:inset 0 4px 12px rgba(0,0,0,.6), 0 6px 16px rgba(0,0,0,.35);
}
.mission-item{display:flex;align-items:center;gap:16px;padding:14px 0;
  border-top:1px solid rgba(201,162,39,.22);font-size:1rem}
.mission-item:first-of-type{border-top:none}
.badge{
  width:38px;height:38px;flex:0 0 38px;border-radius:50%;
  display:grid;place-items:center;
  background:radial-gradient(circle at 35% 28%,#f6dc9a,var(--brass) 58%,#6c5210);
  box-shadow:0 3px 6px rgba(0,0,0,.55), inset 0 -2px 4px rgba(0,0,0,.35), inset 0 2px 3px rgba(255,255,255,.35);
  color:#3a2607;font-size:17px;line-height:1;
}

.btn-container{display:flex;justify-content:center;margin-top:10px}
.btn-install{
  display:inline-block;text-align:center;text-decoration:none;
  padding:18px 38px;border-radius:18px;
  font-family:"Abril Fatface",serif;font-style:italic;font-size:1.2rem;
  color:#3a2607;
  background:linear-gradient(180deg,#ffe9a8,var(--brass) 55%,#8d6d12);
  border:2px solid #4a3116;
  box-shadow:0 10px 22px -8px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.6), inset 0 -3px 6px rgba(0,0,0,.3);
  transition:transform .15s ease, filter .15s ease;
  text-shadow:0 1px 0 rgba(255,255,255,.45);
}
.btn-install:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn-install div{font-family:"JetBrains Mono",monospace;font-style:normal;font-size:.7rem;
  letter-spacing:.16em;margin-top:5px;text-transform:uppercase;text-shadow:none}
.note{text-align:center;color:var(--muted);font-family:"JetBrains Mono",monospace;
  font-size:.74rem;letter-spacing:.1em;margin-bottom:20px;text-transform:uppercase}

.timeline{position:relative;margin-top:8px;padding-left:30px}
.timeline::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:4px;border-radius:2px;
  background:linear-gradient(180deg,#c9a227,#6c5210);box-shadow:0 0 0 1px rgba(0,0,0,.5)}
.timeline-item{position:relative;margin-bottom:18px;padding:16px 18px;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,225,175,.14),rgba(0,0,0,.22));
  border:1px solid rgba(201,162,39,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 6px 14px -8px rgba(0,0,0,.7)}
.timeline-item::before{content:"";position:absolute;left:-30px;top:22px;width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#ffeeb0,var(--brass) 58%,#6d5410);
  box-shadow:0 2px 4px rgba(0,0,0,.7)}
.timeline-date{font-family:"JetBrains Mono",monospace;font-size:.7rem;text-transform:uppercase;
  letter-spacing:.15em;color:var(--brass-light);margin-bottom:6px}
.timeline-item b{font-family:"Abril Fatface",serif;font-weight:400;font-style:italic;
  font-size:1.12rem;color:var(--maple-1)}

footer{margin-top:34px;text-align:center;border-top:1px solid rgba(201,162,39,.3);padding-top:20px}
footer p{font-family:"JetBrains Mono",monospace;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin:4px 0}

@media (max-width:520px){
  .plaque{padding:18px}
  .panel{padding:34px 18px 28px}
  .rivet{width:15px;height:15px}
  .rivet-tl{top:22px;left:22px}.rivet-tr{top:22px;right:22px}
  .rivet-bl{bottom:22px;left:22px}.rivet-br{bottom:22px;right:22px}
}