/* ═══════════════════════════════════════════════
   LAYOUT PARTAGÉ — sous-pages /prestations/<slug>/
   Contient nav pilule, breadcrumb, hero, sections
   "Pour qui / Ce qu'on fait / Livrables", CTA bandeau
   et footer. Chaque sous-page n'écrit que le contenu.
═══════════════════════════════════════════════ */
:root {
    --bg:#FFFFFF; --fg:#111111; --muted:#666666; --muted2:#444; --border:#E0E0E0;
    --accent:#ff6b35; --acc2:#e0541f; --ivory:#E1E0CC;
    --mono:'JetBrains Mono',monospace;
    --sans:'Inter',sans-serif;
    --display:'Space Grotesk',sans-serif;
    --ease:cubic-bezier(.4,0,.2,1);
}
html[data-theme="dark"] {
    --bg:#0e0e0e; --fg:#f1f1f1; --muted:#9a9a9a; --muted2:#c4c4c4; --border:#262626;
}
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; }
body { font-family:var(--sans); background:var(--bg); color:var(--fg); -webkit-font-smoothing:antialiased; line-height:1.55; }
a { color:inherit; text-decoration:none; }

/* Navbar pilule (cohérente avec le reste du site) */
#nav {
    position:fixed; top:0; left:50%; transform:translateX(-50%);
    z-index:900; display:flex; align-items:center; gap:3rem;
    padding:.95rem 3.2rem; background:#000;
    border-radius:0 0 1.6rem 1.6rem;
}
.logo {
    font-family:var(--mono); font-size:.82rem; font-weight:700;
    letter-spacing:.02em; color:var(--ivory);
    display:flex; align-items:center;
}
.logo::after { content:'_'; color:var(--accent); animation:blink 1.2s step-end infinite; margin-left:.05em; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
.nav-links {
    display:flex; align-items:center; gap:2.2rem; list-style:none;
    font-family:var(--mono); font-size:.78rem;
}
.nav-links a { color:rgba(225,224,204,.8); transition:color .25s; }
.nav-links a:hover, .nav-links a.active { color:var(--ivory); }
.nav-links .nav-cta {
    color:#fff; background:var(--accent); border:1px solid var(--accent);
    padding:.32rem .95rem; border-radius:999px;
    font-weight:500;
    position:relative; overflow:hidden;
    transition:background .25s, border-color .25s, transform .25s, box-shadow .35s;
}
.nav-links .nav-cta > span { position:relative; z-index:1; }
.nav-links .nav-cta::before {
    content:''; position:absolute; inset:0; border-radius:inherit;
    background:radial-gradient(75% 100% at 50% 0%, rgba(255,220,180,.95) 0%, rgba(255,220,180,0) 75%);
    opacity:0; pointer-events:none; transition:opacity .5s ease;
}
.nav-links .nav-cta:hover::before { opacity:1; }
.nav-links .nav-cta:hover { background:var(--acc2); border-color:var(--acc2); transform:translateY(-1px); box-shadow:0 8px 28px rgba(255,107,53,.45); }

/* ─── Dropdown Prestations ─── */
.nav-links .has-dropdown { position:relative; }
.nav-links .has-dropdown > a {
    display:inline-flex; align-items:center; gap:.35rem;
}
.nav-links .dd-arrow {
    font-size:.55rem; opacity:.7;
    transition:transform .25s var(--ease);
    display:inline-block;
}
.nav-links .has-dropdown:hover .dd-arrow,
.nav-links .has-dropdown:focus-within .dd-arrow { transform:rotate(180deg); }
/* Pont invisible : étend la hit-zone du <li> sous le lien */
.nav-links .has-dropdown::after {
    content:''; position:absolute;
    top:100%; left:-1rem; right:-1rem; height:1.2rem;
}
.dropdown {
    position:absolute;
    top:calc(100% + .9rem);
    left:50%; transform:translate(-50%, -8px);
    background:#000; border-radius:1rem;
    padding:.55rem;
    min-width:240px;
    display:flex; flex-direction:column;
    gap:.05rem;
    opacity:0; pointer-events:none;
    transition:opacity .25s var(--ease), transform .25s var(--ease);
    box-shadow:0 20px 60px rgba(0,0,0,.5);
    z-index:1000;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
    opacity:1; pointer-events:auto;
    transform:translate(-50%, 0);
}
.dropdown a {
    padding:.6rem .9rem;
    color:rgba(225,224,204,.75);
    font-family:var(--mono); font-size:.72rem;
    text-decoration:none;
    border-radius:.45rem;
    display:flex; align-items:center; gap:.6rem;
    transition:color .2s, background .2s;
}
.dropdown a:hover { color:#fff; background:rgba(255,255,255,.07); }
.dropdown .dd-num {
    font-family:var(--mono); font-size:.6rem; font-weight:600;
    color:rgba(255,107,53,.7);
    letter-spacing:.05em;
    min-width:1.4rem;
}
.dropdown .dd-all {
    color:var(--accent);
    border-top:1px solid rgba(225,224,204,.1);
    margin-top:.3rem; padding-top:.8rem;
    justify-content:flex-start;
}

.nav-utils {
    display:inline-flex; align-items:center; gap:.5rem;
    padding-left:.9rem; margin-left:.2rem;
    border-left:1px solid rgba(225,224,204,.18);
}
.nav-lang, .nav-theme {
    background:none; border:none; cursor:pointer;
    color:rgba(225,224,204,.8);
    font-family:var(--mono); font-size:.72rem;
    transition:color .25s, background .25s;
}
.nav-theme {
    padding:.3rem; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
}
.nav-lang:hover, .nav-theme:hover { color:var(--ivory); }
.nav-theme:hover { background:rgba(225,224,204,.08); }
.theme-icon-wrap { position:relative; width:15px; height:15px; display:inline-flex; }
.theme-icon-wrap svg { position:absolute; inset:0; width:100%; height:100%; transition:transform .35s ease, opacity .3s ease; }
.theme-icon-wrap .theme-icon--sun { opacity:1; transform:rotate(0) scale(1); }
.theme-icon-wrap .theme-icon--moon { opacity:0; transform:rotate(90deg) scale(.5); }
html[data-theme="dark"] .theme-icon-wrap .theme-icon--sun { opacity:0; transform:rotate(-90deg) scale(.5); }
html[data-theme="dark"] .theme-icon-wrap .theme-icon--moon { opacity:1; transform:rotate(0) scale(1); }

/* Breadcrumb */
.breadcrumb { font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.22em; color:var(--muted); }
.breadcrumb ol { list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:.7rem; }
.breadcrumb li { display:inline-flex; align-items:center; gap:.7rem; }
.breadcrumb a { color:var(--muted); transition:color .25s; }
.breadcrumb a:hover { color:var(--fg); }
.breadcrumb [aria-current="page"] { color:var(--fg); }
.breadcrumb .sep { color:var(--border); }

/* Hero de page sous-prestation */
.page-hero {
    min-height:55vh; padding:140px 5% 80px;
    display:flex; flex-direction:column; justify-content:center;
    max-width:1600px; margin:0 auto;
}
.page-hero .breadcrumb { margin-bottom:2rem; }
.page-hero__eyebrow {
    font-family:var(--mono); font-size:.72rem;
    text-transform:uppercase; letter-spacing:.28em; color:var(--accent);
    margin-bottom:1.5rem;
    display:inline-flex; align-items:center; gap:.7rem;
}
.page-hero__eyebrow::before { content:''; width:32px; height:1px; background:var(--accent); }
.page-hero__title {
    font-family:var(--display); font-weight:600;
    font-size:clamp(2.2rem, 5vw, 4rem); line-height:1.05;
    letter-spacing:-.03em; color:var(--fg);
    max-width:42ch;
}
.page-hero__lead {
    margin-top:1.5rem; max-width:60ch;
    font-size:1.1rem; color:var(--muted); line-height:1.6;
}

/* Sections de détail (Pour qui / Ce qu'on fait / Livrables) */
.pdetail {
    max-width:1600px; margin:0 auto;
    padding:2rem 5% 3rem;
    display:grid; grid-template-columns:240px 1fr;
    gap:3rem 4rem;
    border-top:1px solid var(--border);
}
@media (max-width:860px) { .pdetail { grid-template-columns:1fr; gap:1.2rem; padding:2.5rem 5%; } }

.pdetail-label {
    font-family:var(--mono); font-size:.72rem; font-weight:600;
    text-transform:uppercase; letter-spacing:.22em; color:var(--accent);
    padding-top:.4rem;
    display:flex; align-items:flex-start; gap:.7rem;
}
.pdetail-label::before { content:''; flex:0 0 28px; height:1px; background:var(--accent); margin-top:.55rem; }

.pdetail-content { font-size:1rem; color:var(--muted2); line-height:1.7; }
.pdetail-content > * + * { margin-top:1rem; }
.pdetail-content h3 {
    position:relative;
    font-family:var(--display); font-weight:600;
    font-size:1.25rem; color:var(--fg);
    letter-spacing:-.01em; line-height:1.25;
    margin-top:1.6rem; padding-left:1.4rem;
}
.pdetail-content h3::before {
    content:''; position:absolute;
    left:0; top:.7em;
    width:.6rem; height:1px; background:var(--accent);
}
/* Si le h3 contient une icône .ic → on masque le tiret et l'icône le remplace */
.pdetail-content h3:has(.ic) { padding-left:0; }
.pdetail-content h3:has(.ic)::before { display:none; }
.pdetail-content h3 .ic {
    display:inline-block;
    width:1.05em; height:1.05em;
    margin-right:.7rem;
    vertical-align:-.18em;
    color:var(--accent);
    fill:none; stroke:currentColor; stroke-width:1.7;
    stroke-linecap:round; stroke-linejoin:round;
    opacity:0; transform:translateY(8px);
}
.pdetail-content h3 .ic.is-in {
    opacity:1; transform:translateY(0);
    transition:opacity .6s ease, transform .6s cubic-bezier(.5,0,0,1);
}
/* Radar : pulse infini sur les anneaux quand l'icône est visible */
.pdetail-content h3 .ic--radar .ring {
    transform-origin:center;
    animation:radarPulse 2.4s ease-out infinite;
}
.pdetail-content h3 .ic--radar .r2 { animation-delay:1.2s; }
@keyframes radarPulse {
    0%   { opacity:1;   transform:scale(.35); }
    80%  { opacity:0;   transform:scale(1); }
    100% { opacity:0;   transform:scale(1); }
}
@media (prefers-reduced-motion:reduce) {
    .pdetail-content h3 .ic--radar .ring { animation:none; }
}
.pdetail-content h3:first-child { margin-top:0; }
.pdetail-content p { font-size:1rem; line-height:1.7; }
.pdetail-content ul { list-style:none; padding:0; }
.pdetail-content ul li {
    position:relative; padding-left:1.4rem;
    margin-top:.65rem; line-height:1.6;
}
.pdetail-content ul li::before {
    content:''; position:absolute; left:0; top:.65rem;
    width:.6rem; height:1px; background:var(--accent);
}
.pdetail-content strong { color:var(--fg); font-weight:600; }

/* === Grilles de cards uniformes (Pour qui / Ce qu'on fait / Livrables) === */
.pdetail-cards {
    display:grid; gap:1.2rem;
    margin-top:.4rem;
}
.pdetail-cards--3 { grid-template-columns:repeat(3, 1fr); }
.pdetail-cards--2x2 { grid-template-columns:repeat(2, 1fr); }
.pdetail-cards--4 { grid-template-columns:repeat(4, 1fr); }

@media (max-width:1100px) {
    .pdetail-cards--4 { grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:760px) {
    .pdetail-cards--3, .pdetail-cards--2x2 { grid-template-columns:1fr; }
}
@media (max-width:520px) {
    .pdetail-cards--4 { grid-template-columns:1fr; }
}

.pdetail-card {
    position:relative;
    padding:1.6rem 1.4rem;
    background:#FAFAFA;
    border:1px solid var(--border);
    border-radius:1rem;
    display:flex; flex-direction:column;
    transition:border-color .3s cubic-bezier(.4,0,.2,1),
               transform .35s cubic-bezier(.4,0,.2,1),
               box-shadow .35s cubic-bezier(.4,0,.2,1);
}
html[data-theme="dark"] .pdetail-card { background:#161616; }
.pdetail-card:hover {
    border-color:var(--accent);
    transform:translateY(-2px);
    box-shadow:0 10px 28px rgba(255,107,53,.10), 0 2px 6px rgba(0,0,0,.04);
}
.pdetail-card__icon {
    width:40px; height:40px; margin-bottom:1rem;
    color:var(--muted);
    transition:color .3s cubic-bezier(.4,0,.2,1), transform .35s cubic-bezier(.4,0,.2,1);
    flex-shrink:0;
}
.pdetail-card:hover .pdetail-card__icon {
    color:var(--accent);
    transform:scale(1.06);
}
.pdetail-card__icon svg {
    width:100%; height:100%; fill:none;
    stroke:currentColor; stroke-width:1.5;
    stroke-linecap:round; stroke-linejoin:round; overflow:visible;
}
.pdetail-card__title {
    font-family:var(--display); font-weight:600;
    font-size:1.1rem; color:var(--fg);
    letter-spacing:-.01em; margin-bottom:.5rem;
    line-height:1.2;
}
.pdetail-card__body {
    font-size:.93rem; color:var(--muted);
    line-height:1.6;
}

/* Variante compacte pour Livrables (4 cards en ligne) */
.pdetail-cards--4 .pdetail-card { padding:1.3rem 1.1rem; }
.pdetail-cards--4 .pdetail-card__icon { width:30px; height:30px; margin-bottom:.7rem; color:var(--accent); }
.pdetail-cards--4 .pdetail-card__title { font-size:.95rem; margin-bottom:.35rem; }
.pdetail-cards--4 .pdetail-card__body { font-size:.85rem; line-height:1.55; }

/* Bandeau CTA sous-page */
.pdetail-cta {
    max-width:1600px; margin:4rem auto 0;
    padding:3.5rem 2.5rem;
    background:#0e0e0e; color:#f1f1f1;
    border-radius:1.2rem;
    display:grid; grid-template-columns:1.5fr 1fr;
    gap:2rem; align-items:center;
}
html[data-theme="dark"] .pdetail-cta { background:#1a1a1a; border:1px solid var(--border); }
@media (max-width:760px) { .pdetail-cta { grid-template-columns:1fr; padding:2.5rem 1.6rem; } }
.pdetail-cta h2 {
    font-family:var(--display); font-weight:600;
    font-size:clamp(1.5rem, 2.6vw, 2rem);
    line-height:1.2; letter-spacing:-.02em;
    max-width:24ch;
}
.pdetail-cta h2 .accent { color:var(--accent); }
.pdetail-cta p { margin-top:1rem; color:rgba(241,241,241,.65); font-size:1rem; line-height:1.55; max-width:38ch; }
.pdetail-cta__actions { display:flex; flex-direction:column; gap:.7rem; align-items:flex-start; }
.pdetail-cta__btn {
    font-family:var(--mono); font-size:.78rem; font-weight:500;
    text-transform:uppercase; letter-spacing:.15em;
    padding:1rem 1.6rem;
    background:var(--accent); color:#fff; border:1px solid var(--accent);
    transition:background .25s, transform .25s, box-shadow .35s;
    display:inline-flex; align-items:center; gap:.55rem;
}
.pdetail-cta__btn:hover { background:var(--acc2); border-color:var(--acc2); transform:translateY(-1px); box-shadow:0 8px 28px rgba(255,107,53,.35); }
.pdetail-cta__back {
    font-family:var(--mono); font-size:.74rem;
    color:rgba(241,241,241,.65); text-transform:uppercase; letter-spacing:.15em;
}
.pdetail-cta__back:hover { color:#fff; }

/* Footer */
.site-footer {
    border-top:1px solid var(--border);
    padding:2rem 5%; font-family:var(--mono); font-size:.72rem;
    color:var(--muted); display:flex; justify-content:space-between;
    max-width:1600px; margin:5rem auto 0;
}
.site-footer a:hover { color:var(--fg); }