/* Peekolor — page de présentation. Couleurs et polices de l'app (Design/Theme.swift). */
@font-face{font-family:"Fredoka";src:url("polices/Fredoka.woff2") format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Nunito";src:url("polices/Nunito.woff2") format("woff2");font-weight:200 1000;font-display:swap}

:root{
  --fond:#F1ECF6;--fond-2:#E9E2F2;--papier:#FFFBF2;--carte:#FFFFFF;
  --encre:#2A2340;--doux:#5E5873;--trait:#E4DDEC;
  --accent:#56529A;--accent-fonce:#36326A;--accent-clair:#ECE6F5;
  --orange:#F28C38;--rose:#E8508A;--bleu:#3F86C9;--vert:#3E8E5E;--jaune:#F5C542;--turquoise:#2BB3B1;
  --ombre:0 18px 40px -18px rgba(42,35,64,.35);
  --rayon:28px;
  --titre:"Fredoka",ui-rounded,"SF Pro Rounded",system-ui,sans-serif;
  --texte:"Nunito",system-ui,-apple-system,sans-serif;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --fond:#1F1B2A;--fond-2:#262036;--carte:#2C2640;
  --encre:#F1ECF6;--doux:#B9B2C9;--trait:#3A3450;--accent-clair:#3A3358;
  --ombre:0 18px 40px -18px rgba(0,0,0,.6);
}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--fond);color:var(--encre);font:18px/1.6 var(--texte);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:var(--accent)}
@media (prefers-color-scheme:dark){a{color:#B7B2F2}}
h1,h2,h3{font-family:var(--titre);font-weight:600;line-height:1.1;margin:0;letter-spacing:-.01em}
h2{font-size:clamp(2rem,4.4vw,3.1rem)}
h3{font-size:1.35rem}
p{margin:0}
.conteneur{width:min(1160px,100% - 32px);margin-inline:auto}
.saut{position:absolute;left:-999px;top:8px;background:var(--accent);color:#fff;padding:8px 14px;border-radius:12px;z-index:20}
.saut:focus{left:16px}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:8px}

/* En-tête */
.entete{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--fond) 82%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s}
.entete.defile{border-bottom-color:var(--trait)}
.entete .conteneur{display:flex;align-items:center;gap:20px;height:68px}
.marque{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--encre);font:600 1.5rem var(--titre)}
.marque img{width:40px;height:40px;border-radius:11px;box-shadow:0 4px 10px -4px rgba(42,35,64,.5)}
.menu{display:flex;gap:4px;margin-left:auto}
.menu a{color:var(--encre);text-decoration:none;font-weight:700;font-size:15px;padding:8px 12px;border-radius:999px}
.menu a:hover{background:var(--accent-clair)}
.langue{font-weight:800;font-size:14px;text-decoration:none;color:var(--doux);border:1.5px solid var(--trait);padding:5px 11px;border-radius:999px}
.langue:hover{color:var(--encre);border-color:var(--doux)}
@media (max-width:860px){.menu{display:none}.langue{margin-left:auto}}

/* Boutons */
.bouton{display:inline-flex;align-items:center;gap:10px;font:700 17px var(--texte);text-decoration:none;border-radius:999px;padding:14px 24px;transition:transform .15s,box-shadow .15s}
.bouton.principal{background:var(--accent);color:#fff;box-shadow:0 5px 0 var(--accent-fonce),0 14px 24px -10px rgba(54,50,106,.6)}
.bouton.principal:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--accent-fonce),0 18px 28px -10px rgba(54,50,106,.6)}
.bouton.principal:active{transform:translateY(4px);box-shadow:0 1px 0 var(--accent-fonce)}
.bouton.doux{color:var(--encre);background:var(--carte);box-shadow:0 2px 0 var(--trait)}
.bouton.doux:hover{transform:translateY(-2px)}
.badge-store{display:inline-flex;align-items:center;gap:12px;background:#000;color:#fff;border-radius:14px;padding:10px 18px 10px 14px;text-decoration:none;line-height:1.15}
.badge-store svg{width:26px;height:26px;flex:none}
.badge-store small{display:block;font-size:12px;opacity:.85;font-weight:600}
.badge-store strong{font:600 19px var(--titre);letter-spacing:.01em}
@media (prefers-color-scheme:dark){.badge-store{background:#fff;color:#000}}

/* Ouverture */
.ouverture{position:relative;padding:56px 0 96px;overflow:hidden}
.ouverture::before{content:"";position:absolute;inset:-20% -10% auto;height:120%;background:
  radial-gradient(40% 50% at 85% 30%,color-mix(in srgb,var(--jaune) 32%,transparent),transparent 70%),
  radial-gradient(35% 45% at 10% 80%,color-mix(in srgb,var(--rose) 18%,transparent),transparent 70%),
  radial-gradient(30% 40% at 60% 90%,color-mix(in srgb,var(--turquoise) 18%,transparent),transparent 70%);pointer-events:none}
.ouverture .conteneur{position:relative;display:grid;grid-template-columns:1.02fr 1fr;gap:64px;align-items:center}
.surtitre{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
@media (prefers-color-scheme:dark){.surtitre{color:#B7B2F2}}
.surtitre .pastille{width:10px;height:10px;border-radius:50%;background:var(--orange);box-shadow:16px 0 0 var(--rose),32px 0 0 var(--bleu);margin-right:32px}
.ouverture h1{font-size:clamp(2.6rem,6vw,4.6rem);margin:18px 0 22px}
.ouverture h1 em{font-style:normal;background:linear-gradient(100deg,var(--orange),var(--rose) 45%,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.chapeau{font-size:1.2rem;color:var(--doux);max-width:34ch}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:32px}
.note-store{font-size:14px;color:var(--doux);margin-top:14px}

/* Toile à révéler */
.scene{position:relative;padding-top:92px}
.renard-coucou{position:absolute;top:8px;left:50%;width:min(46%,230px);transform:translateX(-50%);z-index:3;pointer-events:none;filter:drop-shadow(0 6px 8px rgba(42,35,64,.18))}
.toile{position:relative;aspect-ratio:1;border-radius:var(--rayon);overflow:hidden;background:var(--papier);box-shadow:0 0 0 10px var(--papier),0 0 0 11px var(--trait),0 40px 60px -30px rgba(42,35,64,.55);touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none}
.toile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.toile .colorie{clip-path:inset(0 calc(100% - var(--p,50%)) 0 0)}
.poignee{position:absolute;top:0;bottom:0;left:var(--p,50%);width:4px;margin-left:-2px;background:#fff;box-shadow:0 0 0 1px rgba(42,35,64,.15);z-index:2;pointer-events:none}
.poignee span{position:absolute;top:50%;left:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:var(--accent);box-shadow:0 4px 0 var(--accent-fonce),0 10px 20px -6px rgba(0,0,0,.4);display:grid;place-items:center}
.poignee svg{width:26px;height:26px;color:#fff}
.toile:focus-visible{outline-offset:14px}
.palette{display:flex;justify-content:center;gap:10px;margin-top:30px}
.palette span{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font:700 16px var(--titre);color:#fff;background:var(--c);box-shadow:inset 0 -4px 0 rgba(0,0,0,.14);transition:transform .2s}
.palette span:first-child{transform:translateY(-6px);outline:3px solid var(--carte);box-shadow:inset 0 -4px 0 rgba(0,0,0,.14),0 0 0 6px var(--c)}
.indice{text-align:center;margin-top:16px;font-size:15px;font-weight:700;color:var(--doux)}

/* Sections */
.section{padding:104px 0}
.entete-section{max-width:720px;margin:0 auto 56px;text-align:center}
.entete-section p{margin-top:18px;font-size:1.15rem;color:var(--doux)}
.bande{background:var(--fond-2)}

/* Étapes */
.etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:etape}
.etape{background:var(--carte);border-radius:var(--rayon);padding:32px;box-shadow:var(--ombre);position:relative}
.etape .numero{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;font:600 26px var(--titre);color:#fff;background:var(--c);box-shadow:inset 0 -5px 0 rgba(0,0,0,.15);margin-bottom:22px;transform:rotate(-6deg)}
.etape:nth-child(2) .numero{transform:rotate(5deg)}
.etape p{color:var(--doux);margin-top:10px}

/* Niveaux */
.niveaux{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.niveau{background:var(--carte);border-radius:24px;padding:16px 16px 20px;box-shadow:var(--ombre)}
.niveau img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:16px;border:1px solid var(--trait);background:var(--papier)}
.niveau h3{margin-top:16px}
.niveau .chiffres{font-weight:800;font-size:15px;color:var(--accent);margin-top:4px}
@media (prefers-color-scheme:dark){.niveau .chiffres{color:#B7B2F2}}
.niveau p{font-size:15px;color:var(--doux);margin-top:6px;line-height:1.45}
.astuce{display:flex;align-items:center;gap:14px;justify-content:center;margin-top:36px;color:var(--doux);font-weight:600}
.astuce svg{width:28px;height:28px;color:var(--accent);flex:none}

/* Galerie qui défile */
.galerie{overflow:hidden;padding:8px 0 4px;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.rangee{display:flex;gap:18px;width:max-content;animation:defile 70s linear infinite}
.rangee+.rangee{margin-top:18px;animation-direction:reverse;animation-duration:80s}
.rangee img{width:220px;height:220px;border-radius:22px;object-fit:cover;box-shadow:0 0 0 6px var(--papier),var(--ombre);margin:6px}
.galerie:hover .rangee{animation-play-state:paused}
@keyframes defile{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.rangee{animation:none}.galerie{overflow-x:auto}}

/* Voyage : écrans */
.voyage{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.liste{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:14px}
.liste li{display:flex;gap:14px;align-items:flex-start;font-weight:600}
.liste li::before{content:"";flex:none;width:26px;height:26px;margin-top:1px;border-radius:9px;background:var(--c,var(--accent)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/16px no-repeat}
.liste li:nth-child(4n+1){--c:var(--orange)}.liste li:nth-child(4n+2){--c:var(--bleu)}.liste li:nth-child(4n+3){--c:var(--vert)}.liste li:nth-child(4n+4){--c:var(--rose)}
.ecrans{position:relative;height:620px;margin-inline:28px}
.telephone{--l:min(270px,38%);position:absolute;width:var(--l);border-radius:44px;padding:9px;background:#1b1828;box-shadow:0 40px 60px -28px rgba(42,35,64,.6)}
.telephone img{border-radius:36px;aspect-ratio:1320/2868;object-fit:cover;width:100%}
.telephone:nth-child(1){left:0;top:60px;rotate:-7deg}
.telephone:nth-child(2){left:calc(50% - var(--l) / 2);top:0;z-index:2}
.telephone:nth-child(3){right:0;top:70px;rotate:7deg}

/* À deux */
.ensemble{background:linear-gradient(160deg,#4B4790,#36326A);color:#fff;border-radius:44px;padding:72px 56px;position:relative;overflow:hidden}
.ensemble::after{content:"";position:absolute;inset:auto -80px -120px auto;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(245,197,66,.28),transparent 70%)}
.ensemble .haut{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.ensemble h2{color:#fff}
.ensemble .haut p{color:#E2DEF5;font-size:1.15rem;margin-top:18px}
.ensemble .gratuit{display:inline-block;margin-top:22px;background:var(--jaune);color:#3a2a00;font-weight:800;font-size:14px;padding:6px 14px;border-radius:999px;text-transform:uppercase;letter-spacing:.05em}
.styles{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:48px;position:relative;z-index:1}
.style{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);border-radius:24px;padding:18px 18px 22px}
.style img{height:120px;width:100%;object-fit:contain;margin-bottom:12px}
.style h3{color:#fff;font-size:1.2rem}
.style p{color:#D6D1EE;font-size:15px;line-height:1.45;margin-top:6px}

/* Cartes */
.cartes{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.vitrine{perspective:1000px;display:grid;place-items:center}
.holo{position:relative;width:min(340px,82vw);border-radius:30px;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.8,.2,1);box-shadow:0 50px 70px -30px rgba(42,35,64,.6);will-change:transform}
.holo.suit{transition:transform .08s linear}
.holo img{border-radius:30px;width:100%}
.holo::after{content:"";position:absolute;inset:0;border-radius:30px;mix-blend-mode:overlay;opacity:.7;background:
  radial-gradient(circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.55),transparent 34%),
  linear-gradient(115deg,transparent 22%,rgba(255,0,170,.4) 38%,rgba(0,220,255,.4) 50%,rgba(255,230,0,.4) 62%,transparent 78%);
  background-size:100% 100%,240% 240%;background-position:center,var(--bx,50%) var(--by,50%);pointer-events:none}
.raretes{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.raretes span{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:15px;padding:7px 14px 7px 10px;border-radius:999px;background:var(--carte);box-shadow:0 2px 0 var(--trait)}
.raretes span::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--c)}
.cartes p.texte{color:var(--doux);font-size:1.15rem;margin-top:18px}

/* Famille */
.atouts{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.atout{background:var(--carte);border-radius:24px;padding:24px;box-shadow:var(--ombre)}
.atout svg{width:34px;height:34px;color:var(--c);margin-bottom:14px}
.atout h3{font-size:1.15rem}
.atout p{font-size:15px;color:var(--doux);margin-top:6px;line-height:1.45}
.atout:nth-child(8n+1){--c:var(--orange)}.atout:nth-child(8n+2){--c:var(--rose)}.atout:nth-child(8n+3){--c:var(--bleu)}.atout:nth-child(8n+4){--c:var(--vert)}
.atout:nth-child(8n+5){--c:var(--turquoise)}.atout:nth-child(8n+6){--c:var(--accent)}.atout:nth-child(8n+7){--c:var(--orange)}.atout:nth-child(8n+8){--c:var(--rose)}
@media (prefers-color-scheme:dark){.atout:nth-child(8n+6){--c:#B7B2F2}}

/* Fin */
.fin{text-align:center;padding:40px 0 110px}
.fin .boite{background:var(--papier);color:#2A2340;border-radius:44px;padding:64px 32px 56px;box-shadow:var(--ombre);position:relative}
.fin img.assis{width:150px;margin:-130px auto 8px;filter:drop-shadow(0 10px 12px rgba(42,35,64,.2))}
.fin h2{color:#2A2340}
.fin p{max-width:56ch;margin:18px auto 0;color:#5E5873;font-size:1.15rem}
.fin .actions{justify-content:center}
.fin .bouton.doux{background:#fff;color:#2A2340;box-shadow:0 2px 0 #E4DDEC}
.fin .badge-store{background:#000;color:#fff}

.pied{border-top:1px solid var(--trait);padding:36px 0 48px;font-size:15px;color:var(--doux)}
.pied .conteneur{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between}
.pied nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.pied a{color:var(--doux);font-weight:700;text-decoration:none}
.pied a:hover{color:var(--encre);text-decoration:underline}

/* Apparition au défilement (seulement si le JavaScript tourne) */
.js .apparait{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.js .apparait.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .apparait{opacity:1;transform:none;transition:none}}

/* Tablette et téléphone */
@media (max-width:1000px){
  .niveaux{grid-template-columns:repeat(3,1fr)}
  .atouts{grid-template-columns:repeat(2,1fr)}
  .styles{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .ouverture{padding:28px 0 72px}
  .ouverture .conteneur,.voyage,.cartes,.ensemble .haut{grid-template-columns:1fr;gap:40px}
  .ouverture .texte{text-align:center}
  .chapeau{margin-inline:auto}
  .actions{justify-content:center}
  .scene{max-width:520px;margin-inline:auto;width:100%}
  .etapes{grid-template-columns:1fr}
  .section{padding:76px 0}
  .ecrans{height:auto;margin-inline:-16px;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 16px 30px}
  .telephone{position:static;rotate:none!important;flex:none;width:230px;scroll-snap-align:center}
  .ensemble{padding:52px 22px;border-radius:32px}
  .cartes .vitrine{order:-1}
}
@media (max-width:560px){
  body{font-size:17px}
  .niveaux{grid-template-columns:repeat(2,1fr)}
  .niveau:last-child{grid-column:1/-1}
  .niveau:last-child img{aspect-ratio:2/1}
  .atouts,.styles{grid-template-columns:1fr}
  .palette span{width:38px;height:38px;border-radius:12px}
  .rangee img{width:160px;height:160px;border-radius:18px}
  .scene{padding-top:70px}
  .fin .boite{padding:56px 20px 44px;border-radius:32px}
}