/* ✳ Page d'une création (/realisations/<slug>/) — s'ajoute à style.css, même gabarit que les pages légales */
.projet-page{min-height:100vh;display:flex;flex-direction:column}
.projet{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:28px 44px;align-items:start;padding:22px 3.3% 40px}
.projet-crumbs{grid-column:1/-1;margin:0 0 10px;align-items:center;color:var(--muted);font-size:11px;letter-spacing:.5px;display:flex;flex-wrap:wrap;gap:8px}
.projet-crumbs a:hover{color:var(--fg)}
.projet-media{min-width:0;background:#080908;border-radius:16px;overflow:hidden;max-height:80vh;display:flex;justify-content:center;align-items:center;width:100%}
.projet-media video,.projet-media img{display:block;width:100%;height:100%;max-height:80vh;object-fit:contain;background:#080908}
.projet-text{position:sticky;top:24px}
.projet-text h1{font-family:Barlow Condensed,Arial Narrow,Impact,sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:-1px;font-size:clamp(38px,5vw,72px);line-height:.92;margin:18px 0 16px;text-wrap:balance;overflow-wrap:anywhere}
.projet-desc{font-size:16px;line-height:1.65;margin:0 0 20px;max-width:46ch}
.projet-cats{list-style:none;padding:0;margin:0 0 26px;display:flex;flex-wrap:wrap;gap:8px}
.projet-cta{margin:0}
.projet-similar{border-top:1px solid var(--line);padding:30px 3.3% 40px}
.projet-similar h2{font-size:17px;font-weight:600;margin:0 0 18px;color:var(--lime)}
.projet-similar ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.projet-similar a{display:block}
.projet-similar img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:12px;background:#22251c}
.projet-similar b{display:block;font-size:12px;font-weight:500;line-height:1.35;margin-top:8px}
.projet-similar a:hover b{color:var(--lime)}
.projet-page footer{margin-top:auto}
@media (max-width:1000px){.projet{grid-template-columns:minmax(0,1fr)}.projet-text{position:static}.projet-similar ul{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.projet{padding:16px 5% 30px}.projet-similar{padding:24px 5% 30px}.projet-similar ul{grid-template-columns:repeat(2,minmax(0,1fr))}.projet-desc{font-size:14px}}
/* Pages savoir-faire (/production-video-ia…) : même gabarit, texte en une colonne lisible */
.savoir-faire{padding:22px 3.3% 40px;max-width:820px}
.savoir-faire h1{font-family:Barlow Condensed,Arial Narrow,Impact,sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:-1px;font-size:clamp(38px,5vw,72px);line-height:.92;margin:18px 0 22px;text-wrap:balance}
.savoir-faire > p{font-size:16px;line-height:1.65;margin:0 0 16px;max-width:62ch}
.savoir-faire .projet-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.projet-page footer .footer-links + .footer-links{margin-top:-6px}
@media (max-width:700px){.savoir-faire{padding:16px 5% 30px}.savoir-faire > p{font-size:14px}}
/* ---------- Page savoir-faire en images (production hybride) ---------- */
.sf{padding:0 3.3% 48px}
.sf h2{font-size:clamp(22px,2.4vw,32px);font-weight:700;letter-spacing:-.02em;margin:0 0 22px}
.sf-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:32px 56px;align-items:center;padding:22px 0 56px}
.sf-hero h1{font-family:Barlow Condensed,Arial Narrow,Impact,sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:-1px;font-size:clamp(44px,6vw,92px);line-height:.9;margin:18px 0 20px;text-wrap:balance}
.sf-lead{font-size:clamp(17px,1.5vw,21px);line-height:1.5;max-width:34ch;margin:0 0 26px;color:var(--fg)}
.sf-hero .projet-cta{display:flex;flex-wrap:wrap;gap:10px}
.sf-hero-media{position:relative;display:block;border-radius:18px;overflow:hidden;background:#22251c;aspect-ratio:4/3}
.sf-hero-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out,ease)}
.sf-hero-media:hover img{transform:scale(1.03)}
.sf-play{position:absolute;left:16px;bottom:16px;display:inline-flex;align-items:center;gap:8px;max-width:calc(100% - 32px);padding:10px 14px;border-radius:99px;background:#111210d9;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sf-play span{color:var(--lime)}
.sf-steps{border-top:1px solid var(--line);padding:44px 0}
.sf-steps ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sf-steps li{padding:24px;border:1px solid var(--line);border-radius:16px;background:#ffffff05}
.sf-num{display:block;font:600 12px/1 ui-monospace,Menlo,monospace;color:var(--lime);margin-bottom:28px}
.sf-steps h3{margin:0 0 8px;font-size:20px;font-weight:700;letter-spacing:-.01em}
.sf-steps p{margin:0;color:#b9bfaf;font-size:15px;line-height:1.55}
.sf-uses{border-top:1px solid var(--line);padding:44px 0}
.sf-uses ul{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.sf-uses li{padding:12px 18px;border:1px solid var(--line);border-radius:99px;font-size:15px}
.sf-uses p{max-width:68ch;margin:0 0 12px;color:#b9bfaf;font-size:15px;line-height:1.65}
.sf-gallery{border-top:1px solid var(--line);padding:44px 0}
.sf-gallery ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.sf-gallery a{display:block}
.sf-gallery img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;background:#22251c;transition:opacity .2s}
.sf-gallery a:hover img{opacity:.85}
.sf-gallery b{display:block;margin-top:10px;font-size:14px;font-weight:500}
.sf-gallery a:hover b{color:var(--lime)}
.sf-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-top:12px;padding:32px;border-radius:20px;background:#ffffff08;border:1px solid var(--line)}
.sf-band p{margin:0;font-family:Barlow Condensed,Arial Narrow,Impact,sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(30px,4vw,56px);line-height:.95}
.sf-band .primary:not(.hero-cta){padding:14px 24px;font-size:15px}
/* Bandeau : même bouton que l'accueil (styles .hero-cta de style.css), sans marge haute */
.sf-band .hero-cta-wrap .hero-cta{margin-top:0}
@media (max-width:1000px){.sf-hero{grid-template-columns:minmax(0,1fr)}.sf-steps ol{grid-template-columns:minmax(0,1fr)}.sf-gallery ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.sf{padding:0 5% 36px}.sf-hero{padding:16px 0 36px}.sf-steps,.sf-uses,.sf-gallery{padding:32px 0}.sf-band{padding:22px}.sf-band .primary:not(.hero-cta){flex:1 1 100%;justify-content:center}.sf-band .hero-cta-wrap{flex:1 1 100%}}
@media (prefers-reduced-motion:reduce){.sf-hero-media img{transition:none}.sf-hero-media:hover img{transform:none}}

/* ---------- Production hybride : étapes en nombre libre, questions fréquentes, liens vers les autres savoir-faire ---------- */
.sf-steps ol{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.sf-faq{border-top:1px solid var(--line);padding:44px 0}
.sf-faq-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.sf-faq-item{padding:20px 0;border-top:1px solid var(--line)}
.sf-faq h3{margin:0 0 8px;font-size:18px;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.sf-faq p{margin:0;max-width:62ch;color:#b9bfaf;font-size:15px;line-height:1.65}
.sf-links{border-top:1px solid var(--line);padding:44px 0}
.sf-links ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.sf-links a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid var(--line);border-radius:99px;font-size:15px;transition:border-color .2s,color .2s}
.sf-links a:hover,.sf-links a:focus-visible{border-color:var(--lime);color:var(--lime)}
@media (max-width:1000px){.sf-faq-list{grid-template-columns:minmax(0,1fr)}}
@media (max-width:700px){.sf-faq,.sf-links{padding:32px 0}}

/* ---------- Mode édition de l'admin (page-edit.js) : barre en bas, textes modifiables sur place ---------- */
.sf [hidden],.savoir-faire [hidden],.projet-similar [hidden]{display:none!important}
body.pe-on{padding-bottom:96px}
.pe-bar{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));translate:-50% 0;z-index:70;display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:8px;width:max-content;max-width:calc(100vw - 20px);padding:8px;background:#0e100df5;border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 40px #0009}
.pe-bar .pill,.pe-bar .primary{min-height:40px}
.pe-status{padding:0 8px;font-size:12px;color:var(--muted);max-width:280px}
.pe-seo{flex:1 0 100%;display:grid;gap:10px;padding:8px 4px 4px;max-width:560px}
.pe-seo label{display:grid;gap:5px;font-size:12px;color:var(--muted)}
.pe-seo textarea{width:100%;resize:vertical;padding:9px 11px;font:14px/1.45 inherit;color:var(--fg);background:#1b1d18;border:1px solid var(--line);border-radius:8px}
.pe-seo textarea:focus-visible{outline:2px solid var(--lime);outline-offset:1px}
.pe-seo small{font-size:11px}
.pe-seo small.over{color:#ffb38a}
.pe-editing [data-text]{outline:1px dashed #5d6055;outline-offset:4px;border-radius:2px;cursor:text}
.pe-editing [data-text]:hover{outline-color:var(--muted)}
.pe-editing [data-text]:focus{outline:2px solid var(--lime)}
.pe-editing [data-text]:empty::before{content:"Texte masqué : écris ici pour l’afficher";color:var(--muted);font-style:italic;font-weight:400;text-transform:none}
@media (max-width:700px){.pe-status{flex:1 0 100%;text-align:center}}
/* ✳ Bandeau de contact des pages du studio : le bouton ne dépasse jamais la largeur du téléphone */
.sf-band .hero-cta-wrap{min-width:0}
.sf-band .hero-cta-wrap .hero-cta>span:first-child{min-width:0;white-space:normal}