/* ============================================================
   Code Secret — site officiel
   ------------------------------------------------------------
   Même identité que l'application : palette pastel, Fraunces
   pour les titres, Quicksand pour le texte, cartes arrondies et
   ombres douces. Feuille indépendante de celle du jeu : le site
   et l'application évoluent séparément.
   ============================================================ */
:root{
  --rose:#F6D3DC;      --rose-deep:#E9AEBF;
  --lavande:#DFD8F6;   --lavande-deep:#BFB2EA;
  --ciel:#D2E6F8;      --ciel-deep:#A7CBEC;
  --peche:#FBDCC6;     --menthe:#CFEBDB;
  --creme:#FFFBF7;

  --ink:#5C4B57;
  --ink-soft:#93838F;
  --ink-faint:#B9ACB5;

  --card:#FFFFFF;
  --radius-lg:26px;
  --radius-md:18px;
  --shadow-soft:0 8px 24px rgba(140,110,130,.08);
  --shadow-card:0 14px 38px rgba(150,120,140,.10);

  --mesure:min(760px, 100% - 44px);
}

*{box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:"Quicksand",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);
  font-size:16px;line-height:1.65;
  background:
    radial-gradient(1000px 520px at 12% -8%, var(--rose) 0%, transparent 62%),
    radial-gradient(820px 480px at 92% 4%, var(--lavande) 0%, transparent 60%),
    radial-gradient(760px 520px at 50% 108%, var(--ciel) 0%, transparent 60%),
    var(--creme);
  background-attachment:fixed;
  min-height:100vh;
  display:flex;flex-direction:column;
}

.enveloppe{width:var(--mesure);margin-inline:auto;}

/* ---------- en-tête ---------- */
.entete{padding:38px 0 10px;text-align:center;}
.logo{
  width:96px;height:96px;margin:0 auto 20px;
  border-radius:32px;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--rose),var(--lavande) 65%,var(--ciel));
  box-shadow:var(--shadow-card),inset 0 -6px 14px rgba(255,255,255,.7);
}
.logo svg{width:54px;height:54px;display:block;}
.marque{
  font-family:"Fraunces",Georgia,serif;
  font-size:clamp(34px, 7vw, 46px);line-height:1.08;
  font-weight:600;margin:0;letter-spacing:-.5px;
}
.marque em{font-style:italic;color:#C98BA3;}
.accroche{
  margin:16px auto 0;max-width:430px;
  font-size:clamp(15px, 3.6vw, 17px);color:var(--ink-soft);font-weight:500;
}

/* ---------- contenu ---------- */
main{flex:1 0 auto;padding-bottom:48px;}
.carte{
  background:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.95);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
  padding:26px 26px 28px;
  margin-top:22px;
}
.carte > :first-child{margin-top:0;}
.carte > :last-child{margin-bottom:0;}

h1.titre-page{
  font-family:"Fraunces",Georgia,serif;
  font-size:clamp(28px, 6vw, 36px);font-weight:600;
  margin:34px 0 4px;line-height:1.15;
}
.maj{color:var(--ink-faint);font-size:13.5px;font-weight:600;margin:0 0 6px;}

h2{
  font-family:"Fraunces",Georgia,serif;
  font-size:clamp(20px, 4.4vw, 23px);font-weight:600;
  margin:30px 0 10px;line-height:1.25;
}
h3{font-size:16.5px;font-weight:700;margin:22px 0 6px;}
p{margin:0 0 14px;}
ul{margin:0 0 14px;padding-left:22px;}
li{margin-bottom:7px;}
strong{color:var(--ink);}
a{color:#B0718C;text-decoration:underline;text-underline-offset:3px;}
a:hover{color:#8E5872;}

.etapes{counter-reset:etape;list-style:none;padding:0;margin:0;}
.etapes li{
  counter-increment:etape;position:relative;
  padding-left:46px;margin-bottom:16px;
}
.etapes li::before{
  content:counter(etape);position:absolute;left:0;top:-1px;
  width:32px;height:32px;border-radius:12px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--rose),var(--lavande));
  color:#6B4756;font-weight:700;font-size:15px;
}

.boutons{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;}
.bouton{
  flex:1 1 220px;
  display:block;padding:15px 20px;border-radius:var(--radius-md);
  text-align:center;text-decoration:none;font-weight:700;font-size:15.5px;
  box-shadow:var(--shadow-soft);
  transition:transform .15s ease;
}
.bouton:hover{transform:translateY(-2px);}
.bouton-jouer{background:linear-gradient(135deg,var(--menthe),#E2F1E8 60%,var(--ciel));color:#48685A;}
.bouton-second{background:rgba(255,255,255,.9);color:var(--ink);}

.note{
  background:var(--creme);border-radius:var(--radius-md);
  padding:15px 18px;margin:18px 0;font-size:14.5px;color:var(--ink-soft);
}
.note strong{color:var(--ink);}

.contact{
  background:linear-gradient(135deg,rgba(246,211,220,.5),rgba(223,216,246,.45));
  border-radius:var(--radius-md);padding:20px 14px;margin:18px 0;text-align:center;
}
/* L'adresse doit tenir sur une ligne même sur un écran étroit :
   une taille fluide vaut mieux qu'une coupure en plein milieu du
   mot. overflow-wrap ne sert que de filet, si l'adresse changeait
   pour une plus longue. */
.contact .adresse{
  display:block;margin-top:6px;
  font-size:clamp(13.5px, 4vw, 17px);font-weight:700;
  overflow-wrap:anywhere;
}

/* ---------- pied de page ---------- */
.pied{
  flex:0 0 auto;
  border-top:1px solid rgba(255,255,255,.9);
  background:rgba(255,255,255,.55);
  padding:26px 0 30px;text-align:center;
}
.pied nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin-bottom:14px;}
.pied a{font-size:14.5px;font-weight:600;}
.pied .mention{font-size:13px;color:var(--ink-faint);margin:0;}

@media (min-width:760px){
  :root{ --mesure:min(720px, 100% - 80px); }
  .entete{padding-top:56px;}
  .carte{padding:32px 34px 34px;}
}

/* ---------- disponibilité : iOS / Android ----------
   Le site présente le jeu, il ne le fait pas jouer : ce bloc
   remplace l'ancien bouton « Jouer maintenant ». Les vignettes
   sont des pictogrammes maison, pas les badges officiels
   App Store / Google Play (à déposer tels quels une fois le
   jeu publié, sans les redessiner). */
.plateformes{
  list-style:none;margin:22px 0 4px;padding:0;
  display:flex;flex-wrap:wrap;gap:14px;
}
.plateforme{
  flex:1 1 210px;
  background:var(--creme);border-radius:var(--radius-md);
  padding:18px 16px;text-align:center;
  box-shadow:var(--shadow-soft);
}
.plateforme-logo{
  width:58px;height:58px;margin:0 auto 12px;
  border-radius:20px;display:grid;place-items:center;
  background:linear-gradient(145deg,#FFFFFF,var(--lavande) 130%);
  box-shadow:inset 0 -4px 10px rgba(255,255,255,.8);
}
.plateforme-logo svg{width:32px;height:32px;display:block;}
.plateforme-nom{
  display:block;font-weight:700;font-size:15.5px;color:var(--ink);
}
.plateforme-etat{
  display:block;margin-top:3px;
  font-size:13.5px;color:var(--ink-soft);
}