/* Accueil · section 2 « Une plateforme pensée pour les entreprises » (S2-G-damier, approuvée le 3 nov. 2026).
   Tout est préfixé s2g- et limité à #plateforme-pensee pour éviter les conflits avec les autres styles. */
#plateforme-pensee{overflow-x:clip}
#plateforme-pensee .s2g-titre{font-family:var(--police-titres);font-weight:var(--graisse-titres);font-size:var(--t-3xl);line-height:1;letter-spacing:-.02em;max-width:16ch;color:var(--texte);margin:0}
#plateforme-pensee .s2g-titre em{font-style:normal;color:var(--texte);background:linear-gradient(transparent 62%,var(--accent) 62%,var(--accent) 92%,transparent 92%)}
.s2g-scene{perspective:1400px;margin-top:clamp(32px,4vw,56px)}
.s2g-grille{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px;gap:14px;--inc:1;transform:rotateX(calc(var(--inc)*18deg)) rotateZ(calc(var(--inc)*-4deg)) scale(calc(1 - var(--inc)*.06));transform-origin:50% 100%;transform-style:preserve-3d;will-change:transform}
.s2g-tuile{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;border-radius:var(--rayon);background:#FDFDFC;color:#21201C;border:1px solid #CFCECA;transition:transform .25s ease,border-color .3s,box-shadow .3s;transform-style:preserve-3d;box-shadow:0 2px 4px rgba(33,32,28,.08),0 24px 40px -18px rgba(33,32,28,.35),0 50px 80px -40px rgba(33,32,28,.25)}
.s2g-tuile:hover{box-shadow:0 4px 8px rgba(33,32,28,.1),0 40px 60px -20px rgba(33,32,28,.4)}
.s2g-tuile h3{position:relative;z-index:1;margin:0;font-family:var(--police-titres);font-weight:500;font-size:var(--t-l);line-height:1.2;transform:translateZ(40px)}
.s2g-t1{grid-column:span 2;grid-row:span 2}.s2g-t1 h3{font-size:var(--t-2xl);line-height:1.05}
.s2g-t4,.s2g-t7{grid-column:span 2}
.s2g-n{background:#202221;color:#ECEEED;border-color:#373B39;box-shadow:0 3px 6px rgba(16,18,17,.15),0 30px 50px -20px rgba(16,18,17,.55),0 60px 90px -45px rgba(16,18,17,.35)}
.s2g-t7{background:var(--accent);color:#101211;border-color:color-mix(in srgb,var(--accent) 70%,#21201C)}
.s2g-mv{position:absolute;inset:0;transform:translateZ(20px)}
.s2g-mv svg{position:absolute;inset:0;width:100%;height:100%}
.s2g-reseau-n g{stroke:#373B39;stroke-width:2}
.s2g-point{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--accent);animation:s2g-pul 2.4s infinite}
@keyframes s2g-pul{50%{transform:scale(1.8);opacity:.4}}
.s2g-bulle{position:absolute;right:18px;height:22px;border-radius:999px;background:#CFCECA;animation:s2g-monte 4s infinite}
@keyframes s2g-monte{0%{transform:translateY(20px);opacity:0}20%,80%{opacity:1}100%{transform:translateY(-60px);opacity:0}}
.s2g-dossier{position:absolute;top:22px;width:46px;height:34px;border-radius:6px;border:2px solid var(--accent);background:color-mix(in srgb,var(--accent) 20%,transparent)}
.s2g-roue{position:absolute;top:20px;right:20px;width:70px;height:70px;border:8px dashed #21201C;border-radius:50%;animation:s2g-tourne 6s linear infinite;transform:translateZ(20px)}
@keyframes s2g-tourne{to{rotate:360deg}}
.s2g-liens{position:absolute;top:10px;right:10px;width:60%;height:70%}
.s2g-liens line{stroke:#63635E;stroke-width:2;stroke-dasharray:6 6;animation:s2g-flux 1.2s linear infinite}
@keyframes s2g-flux{to{stroke-dashoffset:-12}}
.s2g-barres{position:absolute;top:24px;left:22px;right:22px;display:grid;gap:8px;transform:translateZ(20px)}
.s2g-barres i{height:8px;border-radius:9px;background:#373B39;overflow:hidden}
.s2g-barres i::after{content:"";display:block;height:100%;width:var(--w);background:var(--accent);animation:s2g-rempli 3s ease-in-out infinite alternate}
@keyframes s2g-rempli{from{width:10%}}
.s2g-prive{position:absolute;top:18px;right:22px;font-family:var(--police-donnees);font-size:var(--t-xs);border:2px solid #101211;border-radius:999px;padding:4px 12px;transform:translateZ(20px)}
@media (max-width:820px){.s2g-grille{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.s2g-grille{grid-template-columns:1fr}.s2g-t1,.s2g-t4,.s2g-t7{grid-column:span 1}.s2g-t1{grid-row:span 1}.s2g-tuile h3,.s2g-t1 h3{font-size:var(--t-l)}}
@media (prefers-reduced-motion:reduce){.s2g-grille{--inc:0!important;transform:none!important}#plateforme-pensee *{animation:none!important;transition:none!important}.s2g-tuile{transform:none!important}}
/* Rangées proportionnelles à la largeur (évite les tuiles écrasées en 4K) : ratio de la version 1440 (≈ 190 px pour une colonne de ≈ 325 px). */
.s2g-scene{container-type:inline-size}
.s2g-grille{--s2g-gap:clamp(14px,1.1cqw,28px);gap:var(--s2g-gap);grid-auto-rows:clamp(150px,calc((100cqw - 3*var(--s2g-gap))/4*.585),420px)}
@media (max-width:820px){.s2g-grille{grid-auto-rows:clamp(150px,calc((100cqw - var(--s2g-gap))/2*.62),300px)}}
@media (max-width:480px){.s2g-grille{grid-auto-rows:minmax(170px,auto)}}
/* Survol stable (pt509u) : la tuile est rendue à plat pour que overflow:hidden découpe vraiment les décors
   (les enfants en translateZ sortaient de la tuile et créaient un pli/reflet sur la tuile lime). */
.s2g-tuile{transform-style:flat;isolation:isolate;backface-visibility:hidden;transition:transform .18s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s}
.s2g-tuile h3,.s2g-mv,.s2g-roue,.s2g-barres,.s2g-prive{transform:none}
.s2g-tuile.s2g-quitte{transition-duration:.35s}