/* Page Produits façon App Store : sphère d'icônes 3D, outils Honoré à la une, catalogue PAPATTIS, fiche d'appli */

/* ---------- Icônes d'appli (volume, reflet, tracé animé) ---------- */
.appli-icone,.fiche-icone .appli-icone{position:relative;display:grid;place-items:center;flex:none;border-radius:24%;overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 -6px 14px rgba(0,0,0,.18) inset,0 14px 26px -14px rgba(0,0,0,.55)}
.appli-icone::before,.tuile::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.45) 0%,rgba(255,255,255,.08) 38%,transparent 55%)}
.icone-jaune{background:linear-gradient(150deg,#ffe58c 0%,#fcc220 48%,#d99d00 100%);color:#16161a}.tuile.icone-jaune{--bord:#b07e00}
.icone-noir{background:linear-gradient(150deg,#3b3b40 0%,#18181b 48%,#0b0b0c 100%);color:#fcc220}.tuile.icone-noir{--bord:#000}
.icone-creme{background:linear-gradient(150deg,#ffffff 0%,#f1ebdb 48%,#ddd3ba 100%);color:#16161a}.tuile.icone-creme{--bord:#c9bfa4}
.icone-orange{background:linear-gradient(150deg,#ffc07a 0%,#ff8a1f 48%,#e86a00 100%);color:#fff}.tuile.icone-orange{--bord:#b85200}
.icone-corail{background:linear-gradient(150deg,#ffa59a 0%,#ff5a4e 48%,#e0392f 100%);color:#fff}.tuile.icone-corail{--bord:#b0251d}
.icone-bleu{background:linear-gradient(150deg,#86a9ff 0%,#2f6bff 48%,#1a4fd6 100%);color:#fff}.tuile.icone-bleu{--bord:#123ba3}
.icone-nuit{background:linear-gradient(150deg,#4a5890 0%,#1f2a5a 48%,#141c40 100%);color:#8fd3ff}.tuile.icone-nuit{--bord:#0b1130}
.icone-vert{background:linear-gradient(150deg,#6fe0ae 0%,#1fae74 48%,#118a5a 100%);color:#fff}.tuile.icone-vert{--bord:#0b6a44}
.icone-menthe{background:linear-gradient(150deg,#e2fbef 0%,#9be3c6 48%,#6cc9a4 100%);color:#0f3d2c}.tuile.icone-menthe{--bord:#4fa784}
.icone-violet{background:linear-gradient(150deg,#b9a0ff 0%,#7a4dff 48%,#5a2fe0 100%);color:#fff}.tuile.icone-violet{--bord:#4320b0}
.icone-rose{background:linear-gradient(150deg,#ffd6e7 0%,#ff9ec4 48%,#f2729f 100%);color:#5a1030}.tuile.icone-rose{--bord:#c94f7c}
.icone-ciel{background:linear-gradient(150deg,#d9f1ff 0%,#8fd3ff 48%,#5bb6ee 100%);color:#0b2f4d}.tuile.icone-ciel{--bord:#3b93c9}
.icone-terre{background:linear-gradient(150deg,#e8a77f 0%,#c46b3d 48%,#a3512a 100%);color:#fff3e6}.tuile.icone-terre{--bord:#7d3a1b}
.appli-icone svg,.tuile svg{position:relative;width:52%;height:52%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* le pictogramme se dessine, flotte, puis se redessine */
.tuile svg,.une .appli-icone svg{animation:flotte 4.5s ease-in-out infinite;animation-delay:var(--d,0s)}
.tuile svg *,.une .appli-icone svg *{stroke-dasharray:1;animation:trace 10s ease-in-out infinite;animation-delay:var(--d,0s)}
.appli:hover .appli-icone svg *,.appli:focus-visible .appli-icone svg *,.fiche .appli-icone svg *{stroke-dasharray:1;animation:trace-une 1.1s ease-out both}
@keyframes trace{0%{stroke-dashoffset:1}12%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:-1}}
@keyframes trace-une{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes flotte{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6%) rotate(-4deg)}}

/* ---------- Mur d'applis en 3D (façon Eidos) : fond clair, grandes icônes épaisses ---------- */
.sphere-zone{padding:0!important;isolation:isolate;position:relative;background:linear-gradient(180deg,#f3f3f4 0%,#e6e6e8 55%,#d9d9dc 100%);overflow:hidden}
.sphere{position:relative;height:min(82vh,820px);min-height:460px;overflow:hidden;cursor:grab;touch-action:none;outline:none;user-select:none;-webkit-user-select:none}
.sphere.glisse{cursor:grabbing}
.monde{position:absolute;left:50%;top:50%;width:0;height:0}
.tuile{display:grid;place-items:center;position:absolute;left:calc(var(--tuile) / -2);top:calc(var(--tuile) / -2);width:var(--tuile);height:var(--tuile);border:0;padding:0;cursor:pointer;
  border-radius:23%;will-change:transform;
  box-shadow:0 2px 0 rgba(255,255,255,.55) inset,0 -10px 24px rgba(0,0,0,.16) inset,0 22px 22px -14px rgba(0,0,0,.35)}
.tuile{--bord:rgba(0,0,0,.35)}
/* épaisseur : une tranche pleine sous l'icône, comme un objet posé */
.tuile{box-shadow:0 2px 0 rgba(255,255,255,.6) inset,0 -10px 24px rgba(0,0,0,.14) inset,0 9px 0 var(--bord),0 22px 22px -14px rgba(0,0,0,.35)!important}
.tuile svg{width:46%;height:46%;stroke-width:1.5;filter:drop-shadow(0 3px 2px rgba(0,0,0,.18))}
.tuile span{position:absolute;left:50%;bottom:-34px;transform:translateX(-50%);white-space:nowrap;font:600 15px var(--texte);color:var(--encre);opacity:0;transition:opacity .2s;pointer-events:none}
.tuile.survol span,.tuile:focus-visible span{opacity:1}
.tuile:focus-visible{outline:none}
.sphere.sur-tuile{cursor:pointer}
.tuile.survol svg,.tuile:focus-visible svg{scale:1.12;transition:scale .25s}
.sphere-voile{z-index:1500;position:absolute;left:0;right:0;bottom:0;height:34%;pointer-events:none;background:linear-gradient(180deg,rgba(217,217,220,0),rgba(150,150,155,.55))}
.sphere-legende{z-index:1600;position:absolute;left:clamp(16px,6vw,88px);bottom:clamp(18px,3vw,34px);margin:0;font:600 13px var(--texte);letter-spacing:.2em;text-transform:uppercase;color:var(--encre);pointer-events:none}
.sphere-aide{z-index:1600;position:absolute;left:50%;transform:translateX(-50%);top:16px;white-space:nowrap;color:var(--gris)!important;background:rgba(255,255,255,.82);padding:6px 14px;border-radius:999px;margin:0;font-size:13px;color:rgba(255,255,255,.9);pointer-events:none}
@media (max-width:700px){.sphere{height:62vh;min-height:400px}.sphere-aide{display:none}.sphere-legende{font-size:11px}}

/* la section qui suit la sphère démarre près d'elle */
.sphere-zone+.section{padding-top:clamp(48px,6vw,80px)}

/* ---------- Outils Honoré à la une : la capture sort au survol ---------- */
.produits-titre,.boutique h2{font-size:clamp(28px,3.2vw,44px);font-weight:800;letter-spacing:-.04em;line-height:1.05}
.produits-titre{margin-bottom:clamp(24px,3vw,40px)}
.produits-titre span,.boutique h2 span{color:#e8ad08}
.une-grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.une{position:relative;display:flex;flex-direction:column;gap:14px;background:#fff;border:1px solid var(--ligne);border-radius:22px;padding:22px;cursor:pointer;transition:transform .25s,box-shadow .25s}
.une:hover{transform:translateY(-4px);box-shadow:0 30px 50px -36px rgba(0,0,0,.45);z-index:5}
.une .appli-icone{width:68px;height:68px}
.une h3{font:800 19px var(--titre);letter-spacing:-.02em;display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.une p{color:var(--gris);font-size:14.5px;line-height:1.45}
.une .pastille{margin-top:auto;align-self:flex-start}
.etiquette{font:600 10.5px var(--texte);letter-spacing:.05em;text-transform:uppercase;background:var(--jaune);color:var(--encre);border-radius:999px;padding:3px 8px}
.pastille{display:inline-flex;align-items:center;justify-content:center;min-width:74px;padding:7px 16px;border-radius:999px;background:#ececee;color:var(--encre);font:600 13.5px var(--texte);text-transform:uppercase;letter-spacing:.02em}
.une .pastille:hover{background:var(--encre);color:var(--jaune)}
.une-photo{position:absolute;left:50%;bottom:calc(100% - 18px);width:min(520px,92vw);max-width:none;height:auto;max-height:320px;object-fit:cover;object-position:left top;border-radius:16px;border:1px solid var(--ligne);
  box-shadow:0 40px 70px -24px rgba(0,0,0,.5);opacity:0;pointer-events:none;transform:translate(-50%,18px) scale(.9);transform-origin:50% 100%;transition:opacity .25s,transform .35s cubic-bezier(.2,.8,.2,1.15)}
.une:hover .une-photo{opacity:1;transform:translate(-50%,0) scale(1)}
.une:nth-child(4n+1) .une-photo{left:0;transform:translate(0,18px) scale(.9);transform-origin:0 100%}
.une:nth-child(4n+1):hover .une-photo{transform:none}
.une:nth-child(4n) .une-photo{left:auto;right:0;transform:translate(0,18px) scale(.9);transform-origin:100% 100%}
.une:nth-child(4n):hover .une-photo{transform:none}
@media (hover:none){
  .une-photo{position:static;width:100%;max-height:180px;opacity:1;transform:none!important;box-shadow:none;order:5}
}
@media (max-width:1000px){.une-grille{grid-template-columns:repeat(2,minmax(0,1fr))}
  .une:nth-child(n) .une-photo{left:50%;right:auto;transform:translate(-50%,18px) scale(.9)}
  .une:nth-child(n):hover .une-photo{transform:translate(-50%,0)}}
@media (max-width:560px){.une-grille{grid-template-columns:1fr}}

/* ---------- Catalogue PAPATTIS (magasin d'applis) ---------- */
.boutique{background:#fff}
.boutique-intro{margin-top:16px;max-width:720px;font:600 clamp(17px,1.4vw,20px)/1.45 var(--titre);letter-spacing:-.01em;color:var(--encre)}
.filtres{display:flex;gap:8px;overflow-x:auto;margin:clamp(24px,3vw,36px) -16px 8px;padding:4px 16px 10px;scrollbar-width:none}
.filtres::-webkit-scrollbar{display:none}
.filtre{flex:none;border:1px solid var(--ligne);background:#fff;border-radius:999px;padding:9px 16px;font:600 14px var(--texte);color:var(--encre);cursor:pointer}
.filtre[aria-pressed="true"]{background:var(--encre);border-color:var(--encre);color:#fff}
.categorie{padding-top:clamp(22px,3vw,34px)}
.categorie[hidden]{display:none}
.categorie h3{font:800 22px var(--titre);letter-spacing:-.02em;padding-bottom:12px;border-bottom:1px solid var(--ligne);display:flex;align-items:baseline;gap:12px}
.categorie h3 span{font:400 14px var(--texte);color:var(--gris)}
.applis{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:28px}
.appli{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid #ececee;cursor:pointer;border-radius:4px}
.appli:focus-visible{outline:2px solid var(--jaune);outline-offset:4px}
.appli .appli-icone{width:62px;height:62px;transition:transform .25s}
.appli:hover .appli-icone{transform:translateY(-2px) rotate(-3deg) scale(1.05)}
.appli-texte{min-width:0;flex:1;display:grid;gap:3px}
.appli-texte b{font:700 15.5px var(--titre);letter-spacing:-.01em}
.appli-texte small{font-size:13.5px;line-height:1.35;color:var(--gris);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.appli .pastille{min-width:0;padding:6px 14px;font-size:12.5px}
.appli:hover .pastille{background:var(--encre);color:var(--jaune)}
.boutique-appel{display:block;margin-top:clamp(32px,4vw,48px);padding:22px 24px;border-radius:22px;background:var(--jaune);color:var(--encre);font-size:16px}
.boutique-appel .lien-fleche{margin-left:8px}
@media (max-width:1000px){.applis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.applis{grid-template-columns:1fr}}

/* ---------- Fiche d'appli ---------- */
.fiche{width:min(580px,calc(100vw - 32px));max-height:calc(100vh - 40px);border:0;border-radius:26px;padding:28px;box-shadow:0 40px 90px -20px rgba(0,0,0,.6);color:var(--encre)}
.fiche::backdrop{background:rgba(10,10,11,.55);backdrop-filter:blur(6px)}
.fiche[open]{animation:fiche-entree .35s cubic-bezier(.2,.8,.2,1.1)}
@keyframes fiche-entree{from{opacity:0;transform:translateY(24px) scale(.96)}}
.fiche-fermer{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:0;background:#ececee;font:600 20px/1 var(--texte);cursor:pointer}
.fiche-tete{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;align-items:center;padding-right:30px}
.fiche-icone .appli-icone{width:96px;height:96px}
.fiche-cat{font:600 12px var(--texte);text-transform:uppercase;letter-spacing:.08em;color:var(--gris)}
.fiche h3{font:800 26px var(--titre);letter-spacing:-.03em;margin-top:2px}
.fiche-bouton{grid-column:2;justify-self:start;margin-top:6px;padding:9px 20px;font-size:14px}
.fiche-texte{margin-top:20px;font-size:17px;line-height:1.5}
.fiche-photo{display:block;width:100%;height:auto;margin-top:18px;border-radius:16px;border:1px solid var(--ligne)}
.fiche-note{margin-top:16px;font-size:13.5px;color:var(--gris)}
@media (prefers-reduced-motion:reduce){.tuile svg,.tuile svg *,.une .appli-icone svg,.une .appli-icone svg *{animation:none;stroke-dasharray:none}}

.sphere:focus-visible{box-shadow:inset 0 0 0 3px var(--jaune)}


/* téléphone : globe allégé pour rester fluide (pictogrammes fixes, ombres simples) */
.sphere.leger .tuile svg,.sphere.leger .tuile svg *{animation:none!important;stroke-dasharray:none!important;filter:none!important}
.sphere.leger .tuile{box-shadow:0 7px 0 var(--bord)!important}
.sphere.leger .tuile::before{display:none}
.globe-toile{position:absolute;inset:0;width:100%;height:100%;display:block}

/* accueil : titre au-dessus du globe (lisible, ne cache pas les icônes), lien vers la page Produits */
.sphere-zone:has(.sphere-titre){display:flex;flex-direction:column}
.sphere-titre{order:-1;position:relative;z-index:1600;display:flex;align-items:flex-end;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;
  width:100%;max-width:1280px;margin:0 auto;padding:clamp(32px,4.5vw,64px) clamp(16px,6vw,88px) 0}
.sphere-titre .surtitre{color:var(--gris);margin-bottom:10px}
.sphere-titre h2{font-size:clamp(26px,3.2vw,46px);font-weight:800;letter-spacing:-.04em;line-height:1.05;color:var(--encre)}
.sphere-titre h2 span{color:#e8ad08}
.sphere-titre .btn{flex:none}
.sphere-zone:has(.sphere-titre) .sphere{height:min(70vh,700px)}
.sphere-zone:has(.sphere-titre) .sphere-aide{left:auto;right:clamp(16px,6vw,88px);transform:none;top:auto;bottom:clamp(16px,3vw,30px)}
@media (max-width:700px){
  .sphere-titre h2{font-size:26px}
  .sphere-zone:has(.sphere-titre) .sphere{height:56vh;min-height:360px}
}

/* chargement : rien n'apparaît tant que le globe n'est pas placé (sinon on voit une boule déformée) */
.sphere .tuile{visibility:hidden}
.globe-toile{opacity:0;transition:opacity .45s ease}
.sphere.toile-prete .globe-toile{opacity:1}

/* téléphone : hauteur « stable » (svh) — la barre d'adresse qui se replie ne doit pas redimensionner la boule */
@supports (height:1svh){
  @media (max-width:700px){
    .sphere{height:62svh}
    .sphere-zone:has(.sphere-titre) .sphere{height:56svh}
  }
}