/* Couleurs de l'app (Listance/Design/Theme.swift) ; le site suit le thème clair / sombre du système, comme l'app. */
:root {
  --fond: #F3F2EE;
  --carte: #FFFFFF;
  --contour: #E9E7E1;
  --encre: #1B1D22;
  --secondaire: #6A6C72;
  --puce: #F1EFEA;
  --peche: #F7DCCF;
  --peche-trait: #9A4A2A;
  --lilas: #E4DEF6;
  --lilas-trait: #5B4A9A;
  --ocre: #F6E8C3;
  --ocre-trait: #8A6414;
  --vert: #D6EBDD;
  --vert-trait: #2F7048;
  --lien: #2B59B8;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #151517;
    --carte: #202124;
    --contour: #2E2F33;
    --encre: #F2F1ED;
    --secondaire: #A3A5AB;
    --puce: #2B2C30;
    --peche: #4A3329;
    --peche-trait: #F2B49A;
    --lilas: #393454;
    --lilas-trait: #CBBFF2;
    --ocre: #4A4022;
    --ocre-trait: #EBCB7C;
    --vert: #28423A;
    --vert-trait: #A8DDB9;
    --lien: #A9C3F2;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 17px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

a { color: var(--lien); text-underline-offset: 2px; }

.page {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

/* En-tête : icône et nom, lien vers l'accueil */
.entete {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}
.entete a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  font-size: 19px;
}
.entete img { width: 40px; height: 40px; border-radius: 9px; }

h1 {
  font-size: clamp(30px, 7vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
h2 {
  font-size: 22px;
  line-height: 1.25;
  margin: 40px 0 12px;
}
h3 {
  font-size: 17px;
  margin: 0 0 4px;
}
p { margin: 0 0 14px; }

.chapeau {
  font-size: 20px;
  color: var(--secondaire);
  margin-bottom: 24px;
}
.discret { color: var(--secondaire); font-size: 15px; }

/* Accueil */
.heros { text-align: center; padding: 24px 0 8px; }
.heros img {
  width: 128px;
  height: 128px;
  border-radius: 29px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  margin-bottom: 20px;
}
.heros .chapeau { max-width: 520px; margin-left: auto; margin-right: auto; }

.carte {
  background: var(--carte);
  border: 1px solid var(--contour);
  border-radius: 22px;
  padding: 18px 20px;
}

.atouts {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  display: grid;
  gap: 12px;
}
.atout { display: flex; gap: 14px; align-items: flex-start; }
.pastille {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 20px;
}
.pastille.peche { background: var(--peche); color: var(--peche-trait); }
.pastille.lilas { background: var(--lilas); color: var(--lilas-trait); }
.pastille.ocre { background: var(--ocre); color: var(--ocre-trait); }
.pastille.vert { background: var(--vert); color: var(--vert-trait); }
.atout p { margin: 0; color: var(--secondaire); font-size: 16px; }

/* Assistance : questions dépliables */
details.carte { padding: 0; margin-bottom: 10px; }
details summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 20px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: "+";
  color: var(--secondaire);
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
}
details[open] summary::after { content: "−"; }
details .reponse { padding: 0 20px 16px; }
details .reponse p:last-child, details .reponse ol:last-child, details .reponse ul:last-child { margin-bottom: 0; }
summary:focus-visible, a:focus-visible { outline: 3px solid var(--lien); outline-offset: 2px; border-radius: 8px; }

ol, ul { padding-left: 22px; margin: 0 0 14px; }
li { margin-bottom: 4px; }

.libelle {
  background: var(--puce);
  border-radius: 6px;
  padding: 1px 6px;
  white-space: nowrap;
}

.contact { margin-top: 32px; }
.contact a { font-weight: 600; }

/* Pied de page */
.pied {
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid var(--contour);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 15px;
  color: var(--secondaire);
}
.pied a { color: var(--secondaire); }
.pied a[aria-current="page"] { color: var(--encre); font-weight: 600; text-decoration: none; }
/* Lien vers la même page dans l'autre langue (site/ en français, site/en/ en anglais) */
.pied .langue { margin-left: auto; }