/* Site d'Atlas Domination — les couleurs du jeu : bleu nuit, or, gemmes cyan. */
:root {
  --nuit: #070f1f;
  --nuit-2: #0c1830;
  --nuit-3: #12223f;
  --bord: #2a3c62;
  --or: #d9b45c;
  --or-clair: #f2d995;
  --cyan: #56d4e6;
  --texte: #ebe5d3;
  --texte-2: #a8b3c8;
  --titre: "Baskerville", "Libre Baskerville", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --corps: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--nuit);
  color: var(--texte);
  font: 17px/1.6 var(--corps);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--or-clair); text-underline-offset: 3px; }
a:hover { color: var(--cyan); }
h1, h2, h3 { font-family: var(--titre); font-weight: 700; line-height: 1.2; text-wrap: balance; margin: 0; }

.enveloppe { max-width: 1080px; margin: 0 auto; padding-inline: 20px; }

/* --- Accueil ------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(88vh, 760px);
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: 64px 72px;
  background:
    linear-gradient(180deg, rgba(7, 15, 31, .55) 0%, rgba(7, 15, 31, .35) 45%, var(--nuit) 100%),
    url("/img/fond.webp") center / cover no-repeat;
}
.hero .enveloppe { display: grid; justify-items: center; gap: 22px; }
.hero .logo { width: min(640px, 92vw); filter: drop-shadow(0 6px 24px rgba(0, 0, 0, .6)); }
.hero h1 {
  font-size: clamp(1.6rem, 4.2vw, 2.6rem);
  color: var(--texte);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .7);
}
.hero p.chapo {
  margin: 0;
  max-width: 34em;
  font-size: 1.1rem;
  color: var(--texte);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .8);
}
.bientot {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  border: 1.5px solid var(--or);
  border-radius: 999px;
  background: rgba(7, 15, 31, .72);
  color: var(--or-clair);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .85rem;
}
.bientot::before {
  content: "";
  width: 9px; height: 9px;
  background: var(--cyan);
  transform: rotate(45deg);
  box-shadow: 0 0 10px var(--cyan);
}

.atouts { display: grid; gap: 72px; padding-block: 48px 88px; }
.atout {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 40px;
  align-items: center;
}
.atout:nth-child(even) { grid-template-columns: 1fr 1.25fr; }
.atout:nth-child(even) figure { order: 2; }
.atout figure {
  margin: 0;
  border: 1px solid var(--bord);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
.atout .texte { min-width: 0; }
.atout .numero {
  font-family: var(--titre);
  color: var(--or);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .82rem;
}
.atout h2 { font-size: clamp(1.5rem, 3vw, 2rem); color: var(--or-clair); margin-block: 6px 12px; }
.atout p { margin: 0; color: var(--texte-2); max-width: 32em; }

/* --- Pages de texte (confidentialité, assistance) --------------------------------------- */
.barre {
  border-bottom: 1px solid var(--bord);
  background: var(--nuit-2);
}
.barre .enveloppe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 12px;
}
.barre .marque { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--texte); }
.barre .marque img { width: 40px; height: 40px; border-radius: 9px; }
.barre .marque span { font-family: var(--titre); font-weight: 700; font-size: 1.1rem; letter-spacing: .03em; }
.barre nav { display: flex; gap: 18px; flex-wrap: wrap; font-size: .95rem; }
.barre nav a { color: var(--texte-2); text-decoration: none; }
.barre nav a:hover, .barre nav a[aria-current] { color: var(--or-clair); }

.page { max-width: 46rem; margin: 0 auto; padding: 44px 20px 80px; }
.page h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); color: var(--or-clair); }
.page .date { color: var(--texte-2); font-size: .92rem; margin-block: 8px 28px; }
.page h2 {
  font-size: 1.3rem;
  color: var(--or-clair);
  margin-block: 36px 10px;
  padding-top: 18px;
  border-top: 1px solid var(--bord);
}
.page h3 { font-size: 1.05rem; font-family: var(--corps); color: var(--texte); margin-block: 22px 6px; }
.page p, .page li { color: var(--texte); }
.page ul { padding-left: 1.2em; }
.page li { margin-block: 6px; }
.page strong { color: var(--or-clair); font-weight: 600; }
.resume {
  background: var(--nuit-3);
  border: 1px solid var(--bord);
  border-left: 3px solid var(--cyan);
  border-radius: 10px;
  padding: 16px 20px;
}
.resume p { margin: 0; }

.contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  background: var(--nuit-3);
  border: 1px solid var(--or);
  border-radius: 12px;
  padding: 16px 20px;
  margin-block: 18px;
}
.contact .adresse { font-size: 1.1rem; font-weight: 600; color: var(--or-clair); word-break: break-all; user-select: all; }
.contact button {
  font: inherit;
  font-size: .9rem;
  color: var(--nuit);
  background: var(--or);
  border: 0;
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
}
.contact button:hover { background: var(--or-clair); }

details {
  border: 1px solid var(--bord);
  border-radius: 10px;
  background: var(--nuit-2);
  margin-block: 10px;
}
details summary {
  cursor: pointer;
  padding: 14px 18px;
  font-weight: 600;
  list-style: none;
}
details summary::-webkit-details-marker { display: none; }
details summary::before { content: "◆"; color: var(--cyan); font-size: .7em; margin-right: 12px; vertical-align: 2px; }
details[open] summary::before { color: var(--or); }
details > div { padding: 0 18px 14px 42px; color: var(--texte-2); }
details > div p { color: var(--texte-2); margin-block: 6px; }

/* --- Pied de page ------------------------------------------------------------------------ */
footer {
  border-top: 1px solid var(--bord);
  background: var(--nuit-2);
  color: var(--texte-2);
  font-size: .92rem;
}
footer .enveloppe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-block: 24px;
}
footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
footer a { color: var(--texte-2); }

@media (max-width: 760px) {
  body { font-size: 16px; }
  .atout, .atout:nth-child(even) { grid-template-columns: 1fr; gap: 18px; }
  .atout:nth-child(even) figure { order: 0; }
  .atouts { gap: 52px; }
  .barre .marque span { display: none; }
}