/* ===== Sémafor — GRC : scrollytelling épinglé (titre ancré dans la scène) ===== */
.grcp{background:#F5F7FA;font-family:'Poppins',system-ui,sans-serif}
[dir=rtl] .grcp{font-family:'Noto Sans Arabic','Cairo',sans-serif}
.grcp-wrap{max-width:1400px;margin:0 auto;padding:0 30px;width:100%;box-sizing:border-box}
.grcp-stagehead{text-align:center;max-width:820px;margin:0 auto}
.grcp-kick{display:inline-block;font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:13px;background:linear-gradient(90deg,#00a6d8,#b800c9,#e57600);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;margin-bottom:12px}
.grcp-stagehead h2{font-size:clamp(32px,4.4vw,50px);font-weight:500;line-height:1.18;color:#18365A;margin:0 0 10px}
.grcp-sub{color:#5A6473;font-size:17px;line-height:1.6;margin:0}
.grcp-pinner{max-width:1400px;margin:0 auto;width:100%;padding:0 30px;box-sizing:border-box}

/* cartes piliers (vue d'ensemble) */
.grcp-ovgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grcp-ovc{display:flex;flex-direction:column;align-items:flex-start;text-align:left;background:#fff;border:1px solid #e2e7ee;border-radius:18px;padding:32px 28px;cursor:pointer;transition:transform .25s,box-shadow .25s,border-color .25s;font:inherit;color:inherit}
[dir=rtl] .grcp-ovc{text-align:right;align-items:flex-end}
.grcp-ovc:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(19,33,60,.13);border-color:transparent}
.grcp-ovic{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(0,166,216,.12);margin-bottom:16px}
.grcp-ovic svg{width:28px;height:28px;stroke:#00A6D8}
.grcp-ovlbl{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#E57600;margin-bottom:8px}
.grcp-ovc h4{font-size:21px;color:#18365A;margin:0 0 10px;font-weight:600;line-height:1.25}
.grcp-ovc p{font-size:15px;color:#5A6473;line-height:1.6;margin:0 0 16px;flex:1}
.grcp-ovgo{font-weight:600;color:#00A6D8;font-size:14px}

/* pane détail (texte + visuel) */
.grcp-dgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,64px);align-items:center;background:#fff;border:1px solid #e2e7ee;border-radius:22px;padding:clamp(30px,4vw,54px)}
.grcp-detail.rev .grcp-dfig{order:-1}
[dir=rtl] .grcp-detail .grcp-dfig{order:-1}
[dir=rtl] .grcp-detail.rev .grcp-dfig{order:0}
.grcp-dlabel{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#E57600;margin-bottom:10px}
.grcp-detail h3{font-size:clamp(26px,3vw,36px);color:#18365A;font-weight:600;line-height:1.18;margin:0 0 14px}
.grcp-intro{font-size:17px;color:#5A6473;line-height:1.6;margin:0;max-width:60ch}
.grcp-how{margin-top:20px;border-inline-start:4px solid #FCA311;background:#fff8ee;border-radius:0 14px 14px 0;padding:18px 24px}
[dir=rtl] .grcp-how{border-radius:14px 0 0 14px}
.grcp-how-lbl{display:inline-block;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#E57600;font-size:13px;margin-bottom:7px}
.grcp-how p{margin:0;font-size:15.5px;color:#48535f;line-height:1.65}
.grcp-dfig{display:flex;justify-content:center}
.grcp-dfig svg{width:100%;max-width:380px;height:auto}

/* ---- repli (sans JS / mobile) : empilement avec titre en tête ---- */
.grcp-pin{position:relative;padding:72px 0 80px}
.grcp-stagehead{margin-bottom:40px}
.grcp-panebox{position:relative}
.grcp-pane{margin-bottom:24px}
.grcp-progress{display:none}

/* ---- mode épinglé (scrollytelling) — activé par JS ---- */
.grcp.pinmode .grcp-pin{padding:0}
.grcp.pinmode .grcp-stage{position:sticky;display:block;overflow:visible}
.grcp.pinmode .grcp-stagehead{margin:0 auto 26px}
.grcp.pinmode .grcp-panebox{position:relative}
.grcp.pinmode .grcp-pane{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0;padding:0;opacity:0;visibility:hidden;transform:translateY(18px);transition:opacity .34s ease,transform .34s ease,visibility 0s .34s;pointer-events:none;overflow:visible}
.grcp.pinmode .grcp-pane.on{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .34s ease,transform .34s ease,visibility 0s}
.grcp.pinmode .grcp-progress{display:flex;flex-direction:column;gap:11px;position:absolute;right:6px;top:50%;transform:translateY(-50%);z-index:5}
[dir=rtl] .grcp.pinmode .grcp-progress{right:auto;left:6px}
.grcp-pdot{width:11px;height:11px;border-radius:50%;border:0;background:#c7d0dc;cursor:pointer;transition:.28s;padding:0}
.grcp-pdot.on{background:#18365A;height:30px;border-radius:7px}

@media(max-width:900px){.grcp.pinmode .grcp-stage{position:static;height:auto;display:block;overflow:visible;padding:0}.grcp.pinmode .grcp-pane{position:relative;inset:auto;opacity:1;transform:none;margin-bottom:22px}.grcp.pinmode .grcp-progress{display:none}.grcp-ovgrid{grid-template-columns:1fr;gap:14px}.grcp-dgrid{grid-template-columns:1fr;gap:22px}.grcp-detail .grcp-dfig,.grcp-detail.rev .grcp-dfig{order:-1}.grcp-dfig svg{max-width:280px}}