/* Mise en page partagée des études de cas — Nemo Ciment
   Volontairement DIFFÉRENTE de /blog/article.css (pas de bannière photo pleine largeur avec
   titre en surimpression, pas de sommaire collant en colonne latérale) : le visuel avant/après
   sert de hero, les chiffres clés arrivent tout de suite après, et une "fiche projet" remplace
   le sommaire en colonne latérale. S'appuie sur /assets/css/styles.css pour tout le socle
   (nav, boutons .btn/.btn-primary, em en Gasoek One, .wrap) — ne redéfinit que ce qui
   est propre aux pages de réalisations.
   Usage : <link rel="stylesheet" href="/realisations/case-study.css"> après styles.css. */

.case-narrow { max-width: 800px; margin: 0 auto; padding: 0 24px; text-align: center; }

/* --- hero --- */
.case-hero { padding: 148px 0 0; }
.case-hero h1 { font-size: clamp(32px, 4.6vw, 50px); line-height: 1.1; margin: 18px 0 16px; }
.case-lead { font-size: 18px; color: #d0d0d4; margin: 0 auto 20px; max-width: 640px; }
.case-meta { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 13px; color: var(--muted); margin-bottom: 40px; }

/* --- comparateur avant/après (curseur à glisser) --- */
.compare { margin: 0; }
.compare-media { position: relative; overflow: hidden; border-radius: 20px; border: 1px solid var(--line); background: #0c0a16; aspect-ratio: 1600/847; cursor: ew-resize; touch-action: pan-y; user-select: none; }
.compare-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.compare-before-wrap { position: absolute; inset: 0; overflow: hidden; clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.compare-handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 0; transform: translateX(-50%); }
.compare-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); background: linear-gradient(180deg, transparent, rgba(34,197,94,.85), transparent); box-shadow: 0 0 12px rgba(34,197,94,.6); }
.compare-grip { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); border-radius: 50%; background: #101013; border: 1.5px solid var(--pink); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 18px rgba(0,0,0,.45); }
.compare-grip svg { width: 18px; height: 18px; }
.compare-tag { position: absolute; top: 16px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #dff6e8; background: rgba(10,10,12,.72); border: 1px solid var(--line); padding: 6px 13px; border-radius: 999px; pointer-events: none; backdrop-filter: blur(6px); }
.compare-tag.before { left: 16px; }
.compare-tag.after { right: 16px; }
.compare-cap { margin-top: 12px; font-family: var(--font-mono); font-size: 12.5px; color: var(--muted-2); text-align: center; }
.case-hero-compare { margin: 0 auto 0; max-width: 1120px; }
.case-hero-compare .compare-media { aspect-ratio: 1600/847; }
@media (max-width: 600px) { .compare-grip { width: 36px; height: 36px; } }

/* --- bandeau de chiffres, juste sous le hero --- */
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1120px; margin: 28px auto 0; padding: 0 24px; }
.stat { border: 1px solid var(--line); border-radius: 16px; padding: 22px 22px 20px; background: rgba(255,255,255,.02); text-align: center; }
.stat b { display: block; font-family: var(--font-display); font-size: 32px; color: var(--ink); line-height: 1; }
.stat span { display: block; margin-top: 10px; font-size: 13.5px; color: var(--muted); line-height: 1.4; }

/* --- corps : texte + fiche projet en colonne (remplace le sommaire des articles de blog) --- */
.case-layout { max-width: 1120px; margin: 70px auto 0; padding: 0 24px; display: grid; grid-template-columns: 1fr 280px; gap: 56px; align-items: start; }
.case-content { max-width: 700px; min-width: 0; }
.case-content h2 { font-size: 28px; margin: 0 0 16px; }
.case-content p { margin: 0 0 18px; color: #d0d0d4; font-size: 17px; line-height: 1.7; }
.case-content section + section { margin-top: 46px; }
.case-content ul.fancy { list-style: none; margin: 6px 0 24px; display: flex; flex-direction: column; gap: 11px; }
.case-content ul.fancy li { position: relative; padding-left: 30px; color: #d0d0d4; font-size: 16.5px; }
.case-content ul.fancy li::before { content: "✦"; position: absolute; left: 0; top: 1px; color: var(--pink); font-size: 14px; }
.case-content strong, .case-content b { color: var(--pink); font-weight: 600; }

.case-sidebar { position: sticky; top: 88px; }
.case-card { border: 1px solid rgba(34,197,94,.32); border-radius: 18px; padding: 24px 22px; background: linear-gradient(180deg, rgba(34,197,94,.11), rgba(34,197,94,.03)); }
.case-card .lab { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--pink); font-weight: 600; display: flex; align-items: center; gap: 9px; margin-bottom: 18px; }
.case-card .lab::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--violet), var(--pink)); }
.case-card dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); margin: 18px 0 8px; }
.case-card dt:first-of-type { margin-top: 0; }
.case-card dd { font-size: 15px; color: var(--ink); line-height: 1.4; }
.case-card dd a, .case-card dd a:visited, .case-card dd a:active { color: var(--pink); }
.case-card dd a:hover { text-decoration: underline; }
.case-card .chips { display: flex; flex-wrap: wrap; gap: 7px; }
.case-card .chip { font-family: var(--font-mono); font-size: 11.5px; color: #dff6e8; background: rgba(34,197,94,.14); border: 1px solid rgba(34,197,94,.32); padding: 4px 11px; border-radius: 999px; }

/* --- galerie avant/après secondaire (dans le corps) --- */
.compare-gallery { display: flex; flex-direction: column; gap: 30px; margin: 20px 0 8px; }

/* --- captures d'écran encadrées ---
   Pour les études de cas sans avant/après (projets créés de zéro) : le hero porte une
   capture unique au lieu du comparateur à curseur, et le corps peut intercaler des
   captures seules, par deux, ou une bande de captures mobiles défilable. */
.case-hero-shot { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.shot { margin: 26px 0; }
.shot-frame { border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: #0c0a16; }
.shot-frame img { display: block; width: 100%; height: auto; }
.shot-cap { margin-top: 12px; font-family: var(--font-mono); font-size: 12.5px; color: var(--muted-2); text-align: center; line-height: 1.5; }
.shot-narrow { max-width: 520px; margin-left: auto; margin-right: auto; }
/* capture d'un écran de téléphone : on ne l'agrandit pas au-delà de sa largeur réelle,
   sinon elle est interpolée et perd sa netteté. */
.shot-phone { max-width: 390px; margin-left: auto; margin-right: auto; }

/* bande de captures mobiles : défilement horizontal plutôt que 5 images empilées */
.phones { display: flex; gap: 16px; overflow-x: auto; margin: 26px 0 8px; padding-bottom: 14px; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: rgba(34,197,94,.45) rgba(255,255,255,.05); }
.phones::-webkit-scrollbar { height: 8px; }
.phones::-webkit-scrollbar-track { background: rgba(255,255,255,.05); border-radius: 99px; }
.phones::-webkit-scrollbar-thumb { background: rgba(34,197,94,.45); border-radius: 99px; }
.phones::-webkit-scrollbar-thumb:hover { background: rgba(34,197,94,.65); }
.phones figure { flex: 0 0 200px; margin: 0; scroll-snap-align: start; }
.phones img { display: block; width: 100%; height: auto; border-radius: 20px; border: 1px solid var(--line); background: #0c0a16; }
.phones figcaption { margin-top: 10px; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted-2); text-align: center; line-height: 1.45; }
/* légende qui suit la bande : alignée à gauche comme une note, et détachée du paragraphe suivant */
.case-content .phones + .shot-cap { text-align: left; margin: 6px 0 26px; }

/* --- cadres d'appareil, dessinés en CSS ---
   Volontairement pas de mockup PSD importé : ça imposerait une étape Photoshop à chaque
   nouvelle capture et plusieurs Mo de PNG par image. Ici le cadre est du CSS pur, la capture
   reste un JPEG ordinaire posé dedans, et une seule classe suffit pour la réalisation suivante.
   À réserver aux captures d'écran ENTIER : une fenêtre modale recadrée dans un cadre de
   navigateur ferait un faux visuel. Celles-là gardent `.shot-frame`. */

/* fenêtre de navigateur, pour les captures desktop */
.device-browser { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: #0c0a16; box-shadow: 0 20px 45px rgba(0,0,0,.5); }
.device-browser .db-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: rgba(255,255,255,.045); border-bottom: 1px solid var(--line); }
.device-browser .db-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.device-browser .db-dot:nth-child(1) { background: #ff5f57; }
.device-browser .db-dot:nth-child(2) { background: #febc2e; }
.device-browser .db-dot:nth-child(3) { background: #28c840; }
.device-browser .db-url { flex: 1; margin-left: 10px; height: 20px; border-radius: 99px; background: rgba(255,255,255,.06); }
.device-browser img { display: block; width: 100%; height: auto; }
@media (max-width: 600px) {
  .device-browser .db-bar { padding: 8px 10px; gap: 5px; }
  .device-browser .db-dot { width: 7px; height: 7px; }
  .device-browser .db-url { height: 14px; }
}

/* téléphone, pour les captures 390 × 844 */
.device-phone { position: relative; border-radius: 40px; padding: 9px; background: linear-gradient(155deg, #33333b 0%, #16161a 38%, #26262d 72%, #131317 100%); box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 18px 38px rgba(0,0,0,.55); }
.device-phone img { display: block; width: 100%; height: auto; border-radius: 32px; }
/* boutons latéraux : volume à gauche, veille à droite */
.device-phone::before { content: ""; position: absolute; left: -2px; top: 96px; width: 3px; height: 34px; border-radius: 4px; background: #2f2f37; box-shadow: 0 46px 0 #2f2f37; }
.device-phone::after { content: ""; position: absolute; right: -2px; top: 132px; width: 3px; height: 54px; border-radius: 4px; background: #2f2f37; }
@media (max-width: 600px) {
  .device-phone { border-radius: 32px; padding: 7px; }
  .device-phone img { border-radius: 26px; }
}
.phones .device-phone { border-radius: 30px; padding: 6px; }
.phones .device-phone img { border-radius: 25px; }
.phones .device-phone::before { top: 62px; height: 22px; box-shadow: 0 30px 0 #2f2f37; }
.phones .device-phone::after { top: 86px; height: 34px; }

/* bloc « le problème / ce que j'ai fait » */
.case-solve { border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; margin: 24px 0; background: rgba(255,255,255,.02); }
.case-solve > div + div { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.case-solve .t { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 7px; }
.case-solve p { margin: 0; font-size: 16px; }

/* liste à filet vertical, pour les énumérations techniques */
.case-content ul.tech { list-style: none; margin: 6px 0 24px; display: grid; gap: 12px; }
.case-content ul.tech li { border-left: 2px solid rgba(34,197,94,.35); padding: 1px 0 1px 15px; color: #d0d0d4; font-size: 16.5px; }

/* --- graphiques de résultats --- */
.chart-block { margin: 30px 0; }
.chart-frame { border: 1px solid var(--line); border-radius: 16px; padding: 22px 20px 14px; background: linear-gradient(180deg, rgba(34,197,94,.05), transparent); }
.chart-frame svg { display: block; width: 100%; height: auto; }
.chart-cap { margin-top: 10px; font-family: var(--font-mono); font-size: 12.5px; color: var(--muted-2); text-align: center; }
/* Une légende reste petite et grise même dans la colonne de texte : `.case-content p`
   (une classe + un élément) l'emportait sur `.chart-cap` / `.shot-cap` seules, et les
   légendes s'affichaient donc à la taille du corps de texte. */
.case-content .chart-cap, .case-content .shot-cap { font-size: 12.5px; line-height: 1.5; color: var(--muted-2); margin: 10px 0 0; }
.case-content .shot-cap { margin-top: 12px; }
.chart-legend { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 12px; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

/* Un schéma large écrasé dans une colonne étroite devient illisible (4 px de texte sur
   téléphone). Plutôt que de le faire défiler horizontalement, chaque schéma existe en deux
   versions dans le HTML : `.schema-large` en rangées pour les grands écrans, `.schema-small`
   empilée verticalement en dessous. Une seule est affichée à la fois, jamais de défilement.
   Le seuil de 1080 px n'est pas cosmétique : entre 901 et 1080 px la fiche projet en colonne
   latérale réduit `.case-content` sous 690 px, largeur à laquelle la version en rangées
   redevient trop petite. */
.chart-frame svg { display: block; width: 100%; height: auto; }
.chart-frame svg.schema-small { display: none; }
@media (max-width: 1080px) {
  .chart-frame svg.schema-large { display: none; }
  .chart-frame svg.schema-small { display: block; max-width: 380px; margin-left: auto; margin-right: auto; }
}
/* Sur téléphone, on rend au cadre les 16 px de marge horizontale qu'il prenait sur le
   dessin : autant de gagné sur la taille du texte du schéma. */
@media (max-width: 600px) {
  .chart-frame { padding: 18px 12px 12px; }
}

/* --- FAQ --- */
.case-faq { margin: 10px 0 0; display: flex; flex-direction: column; gap: 10px; }
.case-faq details { border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.02); overflow: hidden; }
.case-faq summary { list-style: none; cursor: pointer; padding: 17px 18px; font-family: var(--font-display); font-size: 18px; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 12px; transition: color .2s; }
.case-faq summary:hover { color: var(--pink); }
.case-faq details[open] summary { color: var(--pink); }
.case-faq summary::-webkit-details-marker { display: none; }
.case-faq .ico { flex: none; width: 22px; height: 22px; position: relative; margin-left: auto; }
.case-faq .ico::before, .case-faq .ico::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; border-radius: 2px; background: var(--violet); transform: translate(-50%, -50%); transition: transform .35s cubic-bezier(.16,.84,.3,1), background .2s; }
.case-faq .ico::after { transform: translate(-50%, -50%) rotate(90deg); }
.case-faq details[open] .ico::after { transform: translate(-50%, -50%) rotate(0); }
.case-faq details[open] .ico::before { background: var(--pink); }
.case-faq .acc { height: 0; overflow: hidden; transition: height .32s cubic-bezier(.22,.61,.36,1); }
.case-faq .acc-in { opacity: 0; transform: translateY(6px); transition: opacity .26s ease .05s, transform .32s cubic-bezier(.22,.61,.36,1); padding: 0 18px 17px; color: #d0d0d4; font-size: 16px; }
.case-faq .acc-in.show { opacity: 1; transform: none; }

/* --- CTA de fin --- */
.case-cta { max-width: 700px; margin: 60px auto 80px; padding: 32px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(180deg, rgba(34,197,94,.08), transparent); text-align: center; }
.case-cta p { font-family: var(--font-display); font-size: 22px; margin-bottom: 18px; color: var(--ink); }

@media (max-width: 900px) {
  .case-hero { padding-top: 118px; }
  .case-layout { grid-template-columns: 1fr; gap: 40px; }
  .case-sidebar { display: none; }
  .stat-row { grid-template-columns: 1fr; }
  .case-meta { display: none; }
  .compare-tag { top: 8px; font-size: 9.5px; padding: 4px 9px; }
  .compare-tag.before { left: 8px; }
  .compare-tag.after { right: 8px; }
}

/* --- curseur custom + variante au survol d'un cliquable (même bloc que sur tout le site) --- */
@media (pointer: fine) {
  html.nc-on, html.nc-on * { cursor: none !important; }
  .nc-cur { position: fixed; left: 0; top: 0; width: 28px; height: 28px; margin: -14px 0 0 -14px; z-index: 99999; pointer-events: none; opacity: 0; transition: opacity .18s ease; will-change: transform; }
  .nc-cur .nc-ring { position: absolute; inset: 0; border: 1.5px solid #22c55e; border-radius: 50%; opacity: .9; transition: transform .08s cubic-bezier(.34,1.56,.64,1), border-color .08s ease, background-color .08s ease, opacity .08s ease; }
  .nc-cur .nc-dot { position: absolute; left: 50%; top: 50%; width: 4.8px; height: 4.8px; margin: -2.4px 0 0 -2.4px; border-radius: 50%; background: #22c55e; transition: transform .08s ease, background-color .08s ease; }
  .nc-cur.is-active .nc-ring { transform: scale(1.8); border-color: #22c55e; background: rgba(34,197,94,.20); opacity: 1; }
  .nc-cur.is-active .nc-dot { transform: scale(.5); background: #22c55e; }
  .nc-cur.is-down .nc-ring { transform: scale(1.25); }
}
@media (pointer: fine) {
  body { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2728%27%20height%3D%2728%27%20viewBox%3D%270%200%2028%2028%27%3E%3Ccircle%20cx%3D%2714%27%20cy%3D%2714%27%20r%3D%279%27%20fill%3D%27none%27%20stroke%3D%27%2322c55e%27%20stroke-width%3D%271.5%27%20opacity%3D%270.9%27%2F%3E%3Ccircle%20cx%3D%2714%27%20cy%3D%2714%27%20r%3D%272.4%27%20fill%3D%27%2322c55e%27%2F%3E%3C%2Fsvg%3E") 14 14, auto; }
  a, button, label, [role=slider] { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2734%27%20height%3D%2734%27%20viewBox%3D%270%200%2034%2034%27%3E%3Ccircle%20cx%3D%2717%27%20cy%3D%2717%27%20r%3D%2712%27%20fill%3D%27rgba%2834%2C197%2C94%2C0.16%29%27%20stroke%3D%27%2322c55e%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%2717%27%20cy%3D%2717%27%20r%3D%272.6%27%20fill%3D%27%2322c55e%27%2F%3E%3C%2Fsvg%3E") 17 17, pointer; }
}

/* Un lien se distingue d'une mise en evidence : italique dans tout le texte courant. */
.case-content p a, .case-content li a, .case-content dd a, .case-content .acc-in a { font-style: italic; }