/* La feuille de getbercail.com : l'accueil (fr/en) et les pages legales (confidentialite,
 * conditions, suppression du compte).
 *
 * Une seule feuille pour toutes : des copies en ligne finissent toujours par diverger.
 * Couleurs de l'app (ui/theme/Theme.kt) : la sarcelle de la marque, le fond creme, l'encre, et
 * les quatre couleurs des modules. Une page legale qui ne ressemble pas a l'app donne
 * l'impression d'avoir ete envoye ailleurs, au moment precis ou l'on verifie a qui on parle. */

:root {
  --marque: #0F6E6B;
  --marque-pale: #D5EBE8;
  --encre: #1C1B1A;
  --encre-douce: #6E6862;
  --trait: #E2DCD3;
  --surface: #FFFFFF;
  --fond: #F5F2ED;
  --courses: #2E7D3E;
  --inventaire: #B5530F;
  --budget: #2459B8;
  --agenda: #6A3FB8;
  --largeur: 720px;
}

/* Le theme sombre suit le telephone : une page ouverte depuis l'app en sombre ne doit pas
 * s'allumer en blanc. */
@media (prefers-color-scheme: dark) {
  :root {
    --marque: #4FB3AD;
    --marque-pale: #173A38;
    --encre: #F2EEE8;
    --encre-douce: #A9A198;
    --trait: #3A3632;
    --surface: #211F1C;
    --fond: #141311;
    --courses: #6CC17D;
    --inventaire: #F0955A;
    --budget: #7FA6F0;
    --agenda: #B396EE;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 17px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: var(--largeur); margin: 0 auto; padding: 0 20px; }

/* --- Les pages legales --------------------------------------------------------------------- */

.page-tete { background: #0F6E6B; color: #fff; padding: 28px 0 28px; margin-bottom: 28px; }
.page-tete h1 { margin: 6px 0 4px; font-size: 30px; line-height: 1.2; }
.page-tete p { margin: 0; opacity: .9; }
.page-tete a { color: #fff; }
.page-tete .langue { margin-top: 10px; font-size: 15px; }

/* Le retour vers l'accueil : sans lui, on arrive sur la confidentialite depuis l'app et le
 * domaine est un cul-de-sac. */
.retour {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 14px; font-size: 14px; font-weight: 600;
  color: #fff; text-decoration: none; opacity: .9;
}
.retour img { width: 26px; height: 26px; border-radius: 8px; }
.retour:hover { opacity: 1; text-decoration: underline; }

h2 { font-size: 21px; margin: 34px 0 8px; line-height: 1.3; }
a { color: var(--marque); }
code { font-size: 15px; background: var(--marque-pale); padding: 1px 5px; border-radius: 5px; }

.note {
  background: var(--marque-pale); border-radius: 16px; padding: 16px 20px; margin: 20px 0;
}

table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 15px; background: var(--surface);
  border-radius: 14px; overflow: hidden; }
th, td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--trait); }
th { color: var(--encre-douce); font-weight: 600; }
tr:last-child td { border-bottom: none; }

/* Sur telephone, le tableau defile dans son cadre plutot que de deborder de la page. */
@media (max-width: 560px) {
  table { display: block; overflow-x: auto; }
}

footer { color: var(--encre-douce); font-size: 15px; padding: 30px 0 40px; border-top: 1px solid var(--trait); margin-top: 40px; }
footer .liens { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 10px; }

/* --- L'accueil ----------------------------------------------------------------------------- */

/* La bande de marque : sarcelle de l'icone, avec deux halos pour donner une source de lumiere.
 * Couleurs ecrites en dur : c'est l'identite, la meme en clair et en sombre. */
.hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  padding: 84px 0 110px;
  text-align: center;
  background:
    radial-gradient(760px 440px at 10% -10%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(680px 420px at 95% 5%, rgba(0, 30, 28, 0.45) 0%, rgba(0, 30, 28, 0) 60%),
    linear-gradient(165deg, #12807C 0%, #0F6E6B 45%, #0A4F4D 100%);
}
/* Le raccord vers la page, pour que la bande ne s'arrete pas net au-dessus de la galerie. */
.hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, var(--fond));
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; }

.choix-langue {
  position: absolute; top: 18px; right: 18px; z-index: 2;
  display: flex; gap: 2px; padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px);
}
.choix-langue a {
  color: #fff; text-decoration: none;
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
  padding: 6px 12px; border-radius: 999px; opacity: 0.8;
}
.choix-langue a:hover { opacity: 1; background: rgba(255, 255, 255, 0.12); }
.choix-langue a[aria-current="page"] { background: #fff; color: #0F6E6B; opacity: 1; }

/* L'icone a deja son fond sarcelle : arrondie comme sur le telephone, un liseré clair pour la
 * detacher de la bande de la meme couleur. */
.hero img.logo {
  width: 104px; height: 104px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 18px 44px rgba(0, 25, 24, 0.45);
  margin-bottom: 24px;
}

.hero h1 {
  margin: 0 0 14px;
  font-size: clamp(32px, 8.5vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.hero .accroche {
  margin: 0 auto;
  max-width: 34ch;
  font-size: clamp(17px, 2.6vw, 21px);
  line-height: 1.5;
  opacity: 0.92;
}

/* Les quatre modules, avec leur couleur, comme sur la banniere Play. */
.modules {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin: 28px 0 0; padding: 0; list-style: none;
}
.modules li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px; border-radius: 999px;
  background: #fff; color: #1C1B1A;
  font-size: 15px; font-weight: 600;
}
.modules li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--point); }

/* Pas de bouton vers Play tant que l'app n'est pas publiee : un bouton qui ne mene nulle part
 * est pire que pas de bouton. La pastille dit l'attente sans la promettre. */
.bientot {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 30px; padding: 11px 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 15px; font-weight: 600;
}
.bientot::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #7CE0A0; box-shadow: 0 0 0 4px rgba(124, 224, 160, 0.25);
}

/* La galerie : un rail qu'on pousse du doigt. Les captures sont brutes (sans titre dessus) :
 * une legende courte sous chacune dit ce qu'on regarde. */
.galerie {
  display: flex; gap: 18px;
  overflow-x: auto;
  padding: 30px 20px 12px;
  margin: 0;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.galerie::-webkit-scrollbar { display: none; }
@media (min-width: 2200px) { .galerie { justify-content: center; } }
.galerie figure { flex: none; width: 230px; margin: 0; scroll-snap-align: center; }
.galerie img {
  display: block;
  width: 230px; height: auto;
  border-radius: 22px;
  border: 1px solid var(--trait);
  box-shadow: 0 10px 28px rgba(40, 30, 20, 0.14);
  cursor: zoom-in;
}
.galerie img:focus-visible { outline: 3px solid var(--marque); outline-offset: 3px; }
.galerie figcaption {
  margin-top: 12px; padding: 0 4px;
  font-size: 14px; line-height: 1.45; color: var(--encre-douce); text-align: center;
}
.galerie figcaption b { display: block; color: var(--encre); font-size: 15px; }
@media (prefers-color-scheme: dark) {
  .galerie img { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5); }
}

.accueil { padding: 34px 20px 70px; }
.accueil > p, .accueil > h2 { max-width: var(--largeur); margin-left: auto; margin-right: auto; }
.accueil > h2 { margin-top: 44px; font-size: 24px; letter-spacing: -0.01em; }
.accueil .points, .accueil .franchise { max-width: 980px; margin-left: auto; margin-right: auto; }
.intro { font-size: 19px; }

.points { display: grid; gap: 16px; margin: 14px 0 0; padding: 0; list-style: none; }
@media (min-width: 620px) { .points { grid-template-columns: 1fr 1fr; gap: 18px 22px; } }
@media (min-width: 940px) { .points { grid-template-columns: repeat(3, 1fr); } }
.points li {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 18px;
  padding: 18px 20px;
  border-top: 4px solid var(--point, var(--marque));
}
.points b { display: block; margin-bottom: 4px; font-size: 16px; }
.points span { color: var(--encre-douce); font-size: 15px; line-height: 1.6; }

.franchise {
  margin-top: 34px;
  padding: 18px 22px;
  border-radius: 18px;
  background: var(--marque-pale);
  font-size: 15px;
}
.franchise p { margin: 0 0 10px; }
.franchise p:last-child { margin: 0; }

.c-courses { --point: var(--courses); }
.c-inventaire { --point: var(--inventaire); }
.c-budget { --point: var(--budget); }
.c-agenda { --point: var(--agenda); }
/* Sur la bande, les points gardent la couleur claire des modules : le fond des pastilles est blanc. */
.modules .c-courses { --point: #2E7D3E; }
.modules .c-inventaire { --point: #B5530F; }
.modules .c-budget { --point: #2459B8; }
.modules .c-agenda { --point: #6A3FB8; }

/* --- La galerie en grand ------------------------------------------------------------------- */
/* <dialog> : la touche Echap, le focus et le fond sombre viennent du navigateur. */

dialog.loupe {
  border: 0; padding: 0; background: transparent;
  max-width: 100vw; max-height: 100vh; overflow: visible;
}
dialog.loupe::backdrop { background: rgba(8, 20, 19, 0.88); }
.loupe-cadre { display: flex; align-items: center; gap: 10px; padding: 10px; }
.loupe img {
  max-width: min(90vw, 420px); max-height: 86vh;
  width: auto; height: auto;
  border-radius: 18px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.5);
}
.loupe button {
  flex: none; width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14); color: #fff;
  font-size: 22px; line-height: 1; cursor: pointer;
}
.loupe button:hover { background: rgba(255, 255, 255, 0.26); }
.loupe button:disabled { opacity: 0.25; cursor: default; }
.loupe-fermer { position: absolute; top: 14px; right: 14px; }
.loupe-compte {
  position: absolute; bottom: 16px; left: 0; right: 0;
  text-align: center; color: rgba(255, 255, 255, 0.75); font-size: 14px;
}
/* Sur un telephone, les fleches mangeraient l'image : on les descend sous elle. */
@media (max-width: 560px) {
  .loupe-cadre { flex-direction: column; }
  .loupe-cadre .loupe-avant { order: 2; }
  .loupe-cadre img { order: 1; }
  .loupe-cadre .loupe-apres { order: 3; }
  .loupe img { max-height: 70vh; }
  .loupe-compte { display: none; }
}