/* ============================================================
   DPC Informatique FSE — Styles additionnels
   theme.json gère tokens, typographie et couleurs.
   Ce fichier gère les effets avancés, animations, composants.
   ============================================================ */

/* === SKIP LINK === */
.skip-link { position:absolute; top:-999px; left:1rem; z-index:9999; padding:.5rem 1.2rem; background:#0078A0; color:#fff; border-radius:8px; font-weight:600; font-family:'DM Sans',system-ui,sans-serif; }
.skip-link:focus { top:.75rem; }

/* === TOPBAR === */
.dpc-topbar { background:#0A1628; color:rgba(255,255,255,.72); font-size:.75rem; font-family:'DM Sans',system-ui,sans-serif; }
.dpc-topbar a { color:rgba(255,255,255,.85); text-decoration:none; }
.dpc-topbar a:hover { color:#fff; }
.dpc-topbar-inner { display:flex; justify-content:space-between; align-items:center; padding:.375rem 2rem; flex-wrap:wrap; gap:.5rem; }
.dpc-topbar-left { display:flex; gap:1.25rem; align-items:center; }
.dpc-topbar-item { display:flex; align-items:center; gap:.375rem; }
.dpc-topbar-item svg { color:#28C8F0; flex-shrink:0; }
.dpc-topbar-phone { display:flex; align-items:center; gap:.375rem; color:#28C8F0; font-weight:600; }

/* === HEADER === */
.dpc-site-header { position:sticky; top:0; z-index:100; background:rgba(255,255,255,.97); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid rgba(0,120,160,.1); transition:box-shadow .2s; }
.dpc-site-header.scrolled { box-shadow:0 4px 16px rgba(0,120,160,.12); }
.dpc-header-inner { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:.875rem 2rem; max-width:1200px; margin-inline:auto; }
.dpc-logo img { height:46px; width:auto; }
.dpc-nav { display:flex; align-items:center; gap:.125rem; }
.dpc-nav a { font-family:'DM Sans',system-ui,sans-serif; font-size:.813rem; font-weight:500; padding:.4rem .75rem; border-radius:8px; color:#2A4A5E; text-decoration:none; transition:background .15s, color .15s; }
.dpc-nav a:hover { background:#E8F9FD; color:#0078A0; }
.dpc-nav a.current-menu-item, .dpc-nav a[aria-current="page"] { color:#0078A0; font-weight:600; }
.dpc-nav a.nav-support { background:#16A34A; color:#fff !important; border-radius:20px; padding:.35rem .875rem; font-weight:600; font-size:.75rem; display:inline-flex; align-items:center; gap:.35rem; }
.dpc-nav a.nav-support:hover { background:#15803D; }
.dpc-header-cta { display:flex; align-items:center; gap:.75rem; flex-shrink:0; }
.dpc-btn-devis { display:inline-flex; align-items:center; gap:.375rem; padding:.5rem 1.125rem; background:#0078A0; color:#fff !important; border-radius:8px; font-family:'DM Sans',system-ui,sans-serif; font-size:.75rem; font-weight:600; text-decoration:none; transition:background .15s, transform .15s; }
.dpc-btn-devis:hover { background:#003C50; transform:translateY(-1px); }
.dpc-nav-toggle { display:none; width:44px; height:44px; flex-direction:column; justify-content:center; align-items:center; gap:5px; border-radius:8px; border:none; background:none; cursor:pointer; transition:background .15s; }
.dpc-nav-toggle:hover { background:#E8F9FD; }
.dpc-nav-toggle span { display:block; width:21px; height:2px; background:#0A1628; border-radius:2px; transition:transform .25s, opacity .25s; }
.dpc-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.dpc-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.dpc-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

@media (max-width:1023px) {
  .dpc-nav-toggle { display:flex; }
  .dpc-nav { position:fixed; inset:72px 0 0 0; flex-direction:column; align-items:flex-start; padding:1.5rem; background:#fff; border-top:1px solid rgba(0,120,160,.1); box-shadow:0 20px 40px rgba(0,0,0,.15); transform:translateX(100%); transition:transform .25s ease-out; overflow-y:auto; z-index:99; }
  .dpc-nav.is-open { transform:translateX(0); }
  .dpc-nav a { width:100%; font-size:1rem; padding:.75rem 1rem; }
}

/* === HERO === */
.dpc-hero { background:#fff; position:relative; overflow:hidden; }
.dpc-hero-bg { position:absolute; inset:0; background:linear-gradient(135deg,#0A1628 0%,#0078A0 55%,#1E40AF 100%); }
.dpc-hero-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:48px 48px; }
.dpc-hero-content { position:relative; z-index:1; }
.dpc-hero-eyebrow { display:inline-flex; align-items:center; gap:.5rem; background:rgba(40,200,240,.15); border:1px solid rgba(40,200,240,.3); border-radius:20px; padding:.25rem .875rem .25rem .5rem; font-family:'DM Sans',system-ui,sans-serif; font-size:.75rem; font-weight:600; color:#28C8F0; }
.dpc-hero-eyebrow::before { content:''; width:7px; height:7px; border-radius:50%; background:#28C8F0; animation:dpc-pulse 2s infinite; }
@keyframes dpc-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.4)} }
.dpc-hero-underline { text-decoration-line:underline; text-decoration-color:#28C8F0; text-underline-offset:4px; text-decoration-thickness:3px; }
.dpc-hero-stats { display:flex; flex-wrap:wrap; gap:1.5rem; padding-top:1.25rem; border-top:1px solid rgba(255,255,255,.12); }
.dpc-hero-stat-num { font-family:'Space Grotesk',system-ui,sans-serif; font-size:1.375rem; font-weight:800; color:#28C8F0; }
.dpc-hero-stat-lbl { font-size:.688rem; color:rgba(255,255,255,.55); margin-top:2px; font-family:'DM Sans',system-ui,sans-serif; }
.dpc-hero-panel { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:16px; padding:1.25rem; position:relative; overflow:hidden; }
.dpc-hero-panel::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#0078A0,#28C8F0); }
.dpc-feat-row { display:flex; align-items:center; gap:.625rem; padding:.625rem .75rem; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.08); border-radius:10px; margin-bottom:.5rem; transition:background .15s; }
.dpc-feat-row:last-child { margin-bottom:0; }
.dpc-feat-row:hover { background:rgba(255,255,255,.12); }
.dpc-feat-icon { width:34px; height:34px; background:#0078A0; border-radius:7px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.dpc-feat-icon svg { width:16px; height:16px; color:#fff; }
.dpc-feat-label { font-family:'DM Sans',system-ui,sans-serif; font-size:.813rem; font-weight:500; color:rgba(255,255,255,.88); }
.dpc-feat-sub { font-size:.688rem; color:rgba(255,255,255,.5); margin-top:1px; }
.dpc-feat-badge { margin-left:auto; font-size:.625rem; font-weight:600; color:#28C8F0; background:rgba(40,200,240,.15); border-radius:20px; padding:2px 8px; white-space:nowrap; flex-shrink:0; }

/* === SECTION HEADERS === */
.dpc-eyebrow { display:inline-flex; align-items:center; gap:.5rem; font-family:'DM Sans',system-ui,sans-serif; font-size:.688rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:#0078A0; }
.dpc-eyebrow::before { content:''; display:block; width:18px; height:2px; background:#28C8F0; border-radius:1px; flex-shrink:0; }

/* === BENTO SERVICES === */
.dpc-bento { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; }
@media(max-width:768px) { .dpc-bento { grid-template-columns:1fr; } }
@media(min-width:769px) and (max-width:1023px) { .dpc-bento { grid-template-columns:repeat(2,1fr); } }
.dpc-bcard { background:#fff; border:1px solid rgba(0,120,160,.1); border-radius:14px; padding:1.375rem; transition:all .22s; position:relative; overflow:hidden; }
.dpc-bcard:hover { border-color:#0078A0; transform:translateY(-3px); box-shadow:0 8px 28px rgba(0,120,160,.1); }
.dpc-bcard.is-main { grid-column:span 2; }
@media(max-width:768px) { .dpc-bcard.is-main { grid-column:span 1; } }
.dpc-bcard.is-cyan { background:#0078A0; border-color:#0078A0; }
.dpc-bcard.is-dark { background:#0A1628; border-color:#0A1628; }
.dpc-bcard.is-plain { background:#fff; border-color:rgba(0,120,160,.1); }
.dpc-bcard-tag { font-size:.625rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:#64748B; margin-bottom:.625rem; font-family:'DM Sans',system-ui,sans-serif; }
.dpc-bcard.is-cyan .dpc-bcard-tag, .dpc-bcard.is-dark .dpc-bcard-tag { color:rgba(255,255,255,.45); }
.dpc-bcard-icon { width:44px; height:44px; background:#E8F9FD; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:.75rem; }
.dpc-bcard-icon svg { width:22px; height:22px; color:#0078A0; }
.dpc-bcard.is-cyan .dpc-bcard-icon { background:rgba(255,255,255,.2); }
.dpc-bcard.is-cyan .dpc-bcard-icon svg { color:#fff; }
.dpc-bcard.is-dark .dpc-bcard-icon { background:rgba(255,255,255,.08); }
.dpc-bcard.is-dark .dpc-bcard-icon svg { color:#28C8F0; }
.dpc-bcard-title { font-family:'Space Grotesk',system-ui,sans-serif; font-size:.938rem; font-weight:700; color:#0A1628; margin-bottom:.3rem; }
.dpc-bcard.is-cyan .dpc-bcard-title, .dpc-bcard.is-dark .dpc-bcard-title { color:#fff; }
.dpc-bcard-text { font-size:.75rem; color:#64748B; line-height:1.65; font-family:'DM Sans',system-ui,sans-serif; }
.dpc-bcard.is-cyan .dpc-bcard-text { color:rgba(255,255,255,.82); }
.dpc-bcard.is-dark .dpc-bcard-text { color:rgba(255,255,255,.6); }
.dpc-bcard-link { display:inline-flex; align-items:center; gap:.3rem; font-size:.75rem; font-weight:600; color:#0078A0; margin-top:.75rem; text-decoration:none; transition:gap .15s; font-family:'DM Sans',system-ui,sans-serif; }
.dpc-bcard-link svg { width:13px; height:13px; transition:transform .15s; }
.dpc-bcard:hover .dpc-bcard-link svg { transform:translateX(3px); }
.dpc-bcard.is-cyan .dpc-bcard-link, .dpc-bcard.is-dark .dpc-bcard-link { color:#28C8F0; }
.dpc-bcard-list { display:flex; flex-direction:column; gap:.35rem; margin-top:.625rem; }
.dpc-bcard-list li { display:flex; align-items:center; gap:.4rem; font-size:.75rem; color:#0A1628; font-family:'DM Sans',system-ui,sans-serif; }
.dpc-bcard-list li::before { content:''; width:5px; height:5px; background:#0078A0; border-radius:50%; flex-shrink:0; }
.dpc-bcard.is-dark .dpc-bcard-list li { color:rgba(255,255,255,.8); }
.dpc-bcard.is-dark .dpc-bcard-list li::before { background:#28C8F0; }
.dpc-bcard-num { font-family:'Space Grotesk',system-ui,sans-serif; font-size:2.5rem; font-weight:800; color:#0078A0; line-height:1; }
.dpc-bcard.is-cyan .dpc-bcard-num { color:#fff; }
.dpc-bcard-coming { display:inline-flex; align-items:center; gap:.35rem; font-size:.688rem; font-weight:600; color:#64748B; background:#F1F5F9; border-radius:20px; padding:.2rem .625rem; margin-top:.75rem; border:1px solid #E2E8F0; font-family:'DM Sans',system-ui,sans-serif; }

/* === WHY CARDS === */
.dpc-why-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; }
@media(max-width:768px) { .dpc-why-grid { grid-template-columns:repeat(2,1fr); } }
.dpc-why-card { background:#fff; border:1px solid rgba(0,120,160,.1); border-radius:12px; padding:1.375rem; text-align:center; transition:all .2s; }
.dpc-why-card:hover { border-color:#0078A0; box-shadow:0 6px 20px rgba(0,120,160,.08); transform:translateY(-2px); }
.dpc-why-icon { width:52px; height:52px; background:#E8F9FD; border-radius:12px; display:flex; align-items:center; justify-content:center; margin:0 auto .875rem; }
.dpc-why-icon svg { width:26px; height:26px; color:#0078A0; }
.dpc-why-title { font-family:'Space Grotesk',system-ui,sans-serif; font-size:.875rem; font-weight:700; color:#0A1628; margin-bottom:.3rem; }
.dpc-why-text { font-size:.75rem; color:#64748B; line-height:1.55; font-family:'DM Sans',system-ui,sans-serif; }

/* === TÉLÉCHARGEMENTS === */
.dpc-dl-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media(max-width:640px) { .dpc-dl-grid { grid-template-columns:1fr; } }
.dpc-dl-group { background:#F0FAFE; border:1px solid rgba(0,120,160,.12); border-radius:14px; padding:1rem; }
.dpc-dl-group-hd { display:flex; align-items:center; gap:.5rem; font-family:'Space Grotesk',system-ui,sans-serif; font-size:.875rem; font-weight:700; color:#0A1628; margin-bottom:.875rem; padding-bottom:.625rem; border-bottom:1px solid rgba(0,120,160,.12); }
.dpc-dl-group-hd svg { width:17px; height:17px; color:#0078A0; }
.dpc-dl-item { display:flex; align-items:center; gap:.625rem; padding:.625rem .75rem; background:#fff; border:1px solid rgba(0,120,160,.1); border-radius:9px; margin-bottom:.5rem; transition:all .16s; text-decoration:none; color:inherit; }
.dpc-dl-item:last-child { margin-bottom:0; }
.dpc-dl-item:hover { background:#0078A0; border-color:#0078A0; transform:translateX(3px); }
.dpc-dl-item:hover .dpc-dl-name, .dpc-dl-item:hover .dpc-dl-info { color:#fff; }
.dpc-dl-item:hover .dpc-dl-ico { background:rgba(255,255,255,.18); }
.dpc-dl-item:hover .dpc-dl-ico svg { color:#fff; }
.dpc-dl-ico { width:34px; height:34px; background:#E8F9FD; border-radius:7px; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .16s; }
.dpc-dl-ico svg { width:17px; height:17px; color:#0078A0; transition:color .16s; }
.dpc-dl-name { font-size:.75rem; font-weight:600; color:#0A1628; transition:color .16s; font-family:'DM Sans',system-ui,sans-serif; }
.dpc-dl-info { font-size:.656rem; color:#64748B; margin-top:1px; transition:color .16s; font-family:'DM Sans',system-ui,sans-serif; }
.dpc-dl-arr { margin-left:auto; }
.dpc-dl-arr svg { width:14px; height:14px; color:#64748B; transition:color .16s; }
.dpc-dl-item:hover .dpc-dl-arr svg { color:#fff; }

/* === PARTENAIRES CARROUSEL === */
.dpc-partners-wrap { overflow:hidden; position:relative; }
.dpc-partners-wrap::before, .dpc-partners-wrap::after { content:''; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none; }
.dpc-partners-wrap::before { left:0; background:linear-gradient(90deg,#fff,transparent); }
.dpc-partners-wrap::after { right:0; background:linear-gradient(270deg,#fff,transparent); }
.dpc-partners-track { display:flex; gap:1rem; animation:dpc-scroll 22s linear infinite; width:max-content; }
.dpc-partners-track:hover { animation-play-state:paused; }
@keyframes dpc-scroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.dpc-partner-chip { background:#F0FAFE; border:1px solid rgba(0,120,160,.12); border-radius:10px; padding:.875rem 1.75rem; min-width:140px; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .16s; }
.dpc-partner-chip img { max-height:40px; width:auto; object-fit:contain; filter:grayscale(.2); transition:filter .16s; }
.dpc-partner-chip:hover { border-color:#0078A0; }
.dpc-partner-chip:hover img { filter:grayscale(0); }
.dpc-partner-chip.text-only { font-size:.813rem; font-weight:600; color:#64748B; font-family:'DM Sans',system-ui,sans-serif; }
.dpc-partner-chip.text-only:hover { color:#0078A0; background:#E8F9FD; }

/* === CTA BAND === */
.dpc-cta-inner { display:flex; align-items:center; justify-content:space-between; gap:1.25rem; flex-wrap:wrap; }
.dpc-cta-eyebrow { font-size:.688rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:#28C8F0; margin-bottom:.35rem; font-family:'DM Sans',system-ui,sans-serif; }
.dpc-cta-title { font-family:'Space Grotesk',system-ui,sans-serif; font-size:1.375rem; font-weight:800; color:#fff; letter-spacing:-.02em; margin-bottom:.2rem; }
.dpc-cta-sub { font-size:.813rem; color:rgba(255,255,255,.5); font-family:'DM Sans',system-ui,sans-serif; }
.dpc-cta-btns { display:flex; gap:.75rem; flex-wrap:wrap; flex-shrink:0; }
.dpc-btn-white { display:inline-flex; align-items:center; gap:.4rem; padding:.625rem 1.375rem; background:#fff; color:#0078A0; border-radius:8px; font-family:'DM Sans',system-ui,sans-serif; font-size:.813rem; font-weight:700; text-decoration:none; transition:all .15s; }
.dpc-btn-white:hover { background:#E8F9FD; color:#003C50; }
.dpc-btn-phone { display:inline-flex; align-items:center; gap:.4rem; padding:.625rem 1.375rem; border:1.5px solid rgba(255,255,255,.25); color:#fff; border-radius:8px; font-family:'DM Sans',system-ui,sans-serif; font-size:.813rem; font-weight:600; text-decoration:none; transition:all .15s; }
.dpc-btn-phone:hover { background:rgba(255,255,255,.1); color:#fff; }

/* === FOOTER === */
.dpc-footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:2rem; }
@media(max-width:768px) { .dpc-footer-grid { grid-template-columns:1fr; gap:1.5rem; } }
.dpc-footer-logo { height:36px; width:auto; filter:brightness(0) invert(1); opacity:.85; }
.dpc-footer-tagline { font-size:.75rem; color:rgba(255,255,255,.42); line-height:1.75; max-width:230px; font-family:'DM Sans',system-ui,sans-serif; }
.dpc-footer-heading { font-size:.625rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.28); margin-bottom:.875rem; font-family:'DM Sans',system-ui,sans-serif; }
.dpc-footer-links { display:flex; flex-direction:column; gap:.5rem; }
.dpc-footer-links a { font-size:.75rem; color:rgba(255,255,255,.5); text-decoration:none; display:flex; align-items:center; gap:.375rem; transition:color .15s; font-family:'DM Sans',system-ui,sans-serif; }
.dpc-footer-links a svg { width:13px; height:13px; color:#28C8F0; flex-shrink:0; }
.dpc-footer-links a:hover { color:#fff; }
.dpc-footer-support-link { color:#4ADE80 !important; font-weight:600; }
.dpc-footer-support-link:hover { color:#86EFAC !important; }
.dpc-footer-contact-item { display:flex; align-items:flex-start; gap:.5rem; font-size:.75rem; color:rgba(255,255,255,.5); margin-bottom:.5rem; font-family:'DM Sans',system-ui,sans-serif; }
.dpc-footer-contact-item svg { width:13px; height:13px; color:#28C8F0; flex-shrink:0; margin-top:2px; }
.dpc-footer-bottom { border-top:1px solid rgba(255,255,255,.06); padding-top:.875rem; margin-top:1.75rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem; font-size:.688rem; color:rgba(255,255,255,.24); font-family:'DM Sans',system-ui,sans-serif; }

/* === PAGE HERO === */
.dpc-page-hero { position:relative; overflow:hidden; }
.dpc-page-hero-bg { position:absolute; inset:0; background:linear-gradient(135deg,#0A1628,#0078A0); }
.dpc-page-hero-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px); background-size:40px 40px; }
.dpc-page-hero-content { position:relative; z-index:1; }
.dpc-page-tag { display:inline-flex; align-items:center; gap:.375rem; font-size:.688rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:#28C8F0; font-family:'DM Sans',system-ui,sans-serif; }
.dpc-breadcrumb { display:flex; align-items:center; gap:.5rem; font-size:.75rem; color:rgba(255,255,255,.4); font-family:'DM Sans',system-ui,sans-serif; }
.dpc-breadcrumb a { color:rgba(255,255,255,.6); text-decoration:none; }
.dpc-breadcrumb a:hover { color:#fff; }

/* === SERVICE DETAILS === */
.dpc-srv-detail { background:#fff; border:1px solid rgba(0,120,160,.1); border-radius:14px; padding:1.375rem; display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start; transition:all .2s; }
.dpc-srv-detail:hover { border-color:#0078A0; box-shadow:0 6px 20px rgba(0,120,160,.08); }
.dpc-sd-icon { width:54px; height:54px; background:#E8F9FD; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.dpc-sd-icon svg { width:26px; height:26px; color:#0078A0; }
.dpc-sd-title { font-family:'Space Grotesk',system-ui,sans-serif; font-size:1.063rem; font-weight:700; color:#0A1628; margin-bottom:.3rem; }
.dpc-sd-text { font-size:.813rem; color:#64748B; line-height:1.65; margin-bottom:.625rem; font-family:'DM Sans',system-ui,sans-serif; }
.dpc-sd-list { display:flex; flex-direction:column; gap:.3rem; }
.dpc-sd-list li { display:flex; align-items:center; gap:.45rem; font-size:.75rem; color:#0A1628; font-family:'DM Sans',system-ui,sans-serif; }
.dpc-sd-list li::before { content:''; width:5px; height:5px; background:#0078A0; border-radius:50%; flex-shrink:0; }

/* === CONTACT === */
.dpc-contact-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:1.25rem; }
@media(max-width:768px) { .dpc-contact-grid { grid-template-columns:1fr; } }
.dpc-cinfo-item { display:flex; gap:.875rem; align-items:flex-start; padding:1rem; background:#F0FAFE; border-radius:10px; border:1px solid rgba(0,120,160,.12); margin-bottom:.75rem; }
.dpc-ci-icon { width:40px; height:40px; background:#E8F9FD; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.dpc-ci-icon svg { width:18px; height:18px; color:#0078A0; }
.dpc-ci-lbl { font-size:.625rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#64748B; margin-bottom:2px; font-family:'DM Sans',system-ui,sans-serif; }
.dpc-ci-val { font-size:.875rem; font-weight:600; color:#0A1628; font-family:'DM Sans',system-ui,sans-serif; }
.dpc-ci-sub { font-size:.75rem; color:#64748B; margin-top:2px; font-family:'DM Sans',system-ui,sans-serif; }
.dpc-support-box { background:#0A1628; border-radius:12px; padding:1.125rem; margin-top:.75rem; border:1px solid rgba(40,200,240,.15); }
.dpc-support-box-title { display:flex; align-items:center; gap:.5rem; font-family:'Space Grotesk',system-ui,sans-serif; font-size:.875rem; font-weight:700; color:#fff; margin-bottom:.4rem; }
.dpc-support-box-title svg { width:16px; height:16px; color:#4ADE80; }
.dpc-support-box p { font-size:.75rem; color:rgba(255,255,255,.55); margin-bottom:.875rem; line-height:1.6; font-family:'DM Sans',system-ui,sans-serif; }

/* === FORMULAIRE CONTACT === */
.dpc-contact-form { display:flex; flex-direction:column; gap:.75rem; }
.dpc-form-row { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
@media(max-width:480px) { .dpc-form-row { grid-template-columns:1fr; } }
.dpc-form-group { display:flex; flex-direction:column; gap:.3rem; }
.dpc-form-group label { font-size:.75rem; font-weight:600; color:#0A1628; font-family:'DM Sans',system-ui,sans-serif; }
.dpc-form-group label span { color:#DC2626; }
.dpc-form-group input, .dpc-form-group textarea { width:100%; padding:.563rem .75rem; border:1.5px solid #E2E8F0; border-radius:8px; font-size:.813rem; color:#0A1628; background:#fff; font-family:'DM Sans',system-ui,sans-serif; transition:border-color .15s; min-height:40px; }
.dpc-form-group input:focus, .dpc-form-group textarea:focus { outline:none; border-color:#0078A0; box-shadow:0 0 0 3px rgba(0,120,160,.1); }
.dpc-form-group input::placeholder, .dpc-form-group textarea::placeholder { color:#64748B; }
.dpc-form-group textarea { min-height:110px; resize:vertical; }
.dpc-form-success { display:flex; align-items:flex-start; gap:.875rem; padding:1rem 1.25rem; background:#F0FDF4; border:1px solid #BBF7D0; border-radius:10px; }
.dpc-form-success strong { color:#166534; display:block; font-size:.875rem; font-family:'DM Sans',system-ui,sans-serif; }
.dpc-form-success p { font-size:.813rem; color:#15803D; font-family:'DM Sans',system-ui,sans-serif; }
.dpc-form-error { padding:.875rem 1rem; background:#FEF2F2; border:1px solid #FECACA; border-radius:10px; font-size:.813rem; color:#DC2626; font-family:'DM Sans',system-ui,sans-serif; }

/* === PARTENAIRES PAGE === */
.dpc-partners-page { display:flex; flex-wrap:wrap; gap:.875rem; justify-content:center; }
.dpc-partner-logo-box { background:#fff; border:1px solid rgba(0,120,160,.1); border-radius:10px; padding:1rem 2rem; display:flex; align-items:center; justify-content:center; min-width:140px; min-height:80px; transition:all .18s; }
.dpc-partner-logo-box img { max-height:50px; width:auto; object-fit:contain; }
.dpc-partner-logo-box:hover { border-color:#0078A0; box-shadow:0 4px 12px rgba(0,120,160,.08); }
.dpc-partner-logo-box.text-only { font-size:.875rem; font-weight:600; color:#64748B; font-family:'DM Sans',system-ui,sans-serif; }
.dpc-partner-logo-box.text-only:hover { color:#0078A0; background:#E8F9FD; }

/* === ANIMATIONS SCROLL === */
@media(prefers-reduced-motion:no-preference) {
  .dpc-fade-up { opacity:0; transform:translateY(20px); transition:opacity .5s ease-out, transform .5s ease-out; }
  .dpc-fade-up.in-view { opacity:1; transform:none; }
}

/* === JS HEADER SCROLL === */

/* === NAVIGATION ITEMS === */
.wp-block-navigation a {
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: 0.813rem !important;
  font-weight: 500 !important;
  padding: 0.4rem 0.75rem !important;
  border-radius: 8px !important;
  color: #2A4A5E !important;
  transition: background 0.15s, color 0.15s !important;
}
.wp-block-navigation a:hover {
  background: #E8F9FD !important;
  color: #0078A0 !important;
}
.wp-block-navigation .current-menu-item > a,
.wp-block-navigation a[aria-current="page"] {
  color: #0078A0 !important;
  font-weight: 600 !important;
}
/* Support link stays green */
.wp-block-navigation a[href*="support.dpc-informatique"] {
  background: #16A34A !important;
  color: #fff !important;
  border-radius: 20px !important;
  padding: 0.35rem 0.875rem !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
}
.wp-block-navigation a[href*="support.dpc-informatique"]:hover {
  background: #15803D !important;
}

/* === COVER BLOCK full width fix === */
.wp-block-cover.alignfull {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
}

/* === PARTNER TRACK overflow fix === */
.dpc-partners-wrap {
  overflow: hidden !important;
}
.dpc-partners-track {
  animation: dpc-scroll 22s linear infinite !important;
  width: max-content !important;
}

/* === SECTION spacing reset === */
.wp-block-group.alignfull > .wp-block-group__inner-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ============================================================
   FORMULAIRE DE CONTACT
   ============================================================ */
.dpc-contact-form {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.dpc-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.875rem;
}
@media (max-width: 600px) { .dpc-form-row { grid-template-columns: 1fr; } }
.dpc-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.dpc-form-group label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #0A1628;
  font-family: 'DM Sans', system-ui, sans-serif;
}
.dpc-form-group label span { color: #DC2626; }
.dpc-form-group input,
.dpc-form-group textarea {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1.5px solid #E2E8F0;
  border-radius: 8px;
  font-size: 0.875rem;
  color: #0A1628;
  background: #fff;
  font-family: 'DM Sans', system-ui, sans-serif;
  transition: border-color 0.15s, box-shadow 0.15s;
  min-height: 44px;
}
.dpc-form-group input:focus,
.dpc-form-group textarea:focus {
  outline: none;
  border-color: #0078A0;
  box-shadow: 0 0 0 3px rgba(0,120,160,0.1);
}
.dpc-form-group input::placeholder,
.dpc-form-group textarea::placeholder { color: #94A3B8; }
.dpc-form-group textarea { min-height: 130px; resize: vertical; }
.dpc-contact-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  background: #0078A0;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
  width: 100%;
  justify-content: center;
  min-height: 50px;
}
.dpc-contact-form button[type="submit"]:hover {
  background: #003C50;
  transform: translateY(-1px);
}
.dpc-form-success {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1rem 1.25rem;
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  border-radius: 10px;
  margin-bottom: 1rem;
}
.dpc-form-success strong { color: #166534; display: block; font-size: 0.875rem; margin-bottom: 0.2rem; }
.dpc-form-success p { font-size: 0.813rem; color: #15803D; margin: 0; }
.dpc-form-error {
  padding: 0.875rem 1rem;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: 10px;
  font-size: 0.813rem;
  color: #DC2626;
  margin-bottom: 1rem;
}

/* ============================================================
   PAGE SERVICE — cartes détaillées
   ============================================================ */
.wp-block-column .wp-block-heading + .wp-block-list {
  padding-left: 1.25rem;
}

/* ============================================================
   COVER BLOCK — s'assure que le dégradé couvre toute la largeur
   ============================================================ */
.wp-block-cover.alignfull {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.entry-content .wp-block-cover.alignfull,
.wp-site-blocks .wp-block-cover.alignfull {
  width: 100vw !important;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}

/* ============================================================
   FOOTER — règles de base manquantes
   ============================================================ */
.dpc-footer {
  background: #0A1628;
  color: rgba(255,255,255,0.7);
  font-family: 'DM Sans', system-ui, sans-serif;
}
.dpc-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.5rem 2rem 1.25rem;
}
.dpc-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.dpc-footer-contact {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.dpc-footer a {
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: color 0.15s;
}
.dpc-footer a:hover { color: #fff; }
.dpc-footer-support { color: #4ADE80 !important; font-weight: 600; }
.dpc-footer-support:hover { color: #86EFAC !important; }

/* ============================================================
   TOPBAR — règles de base manquantes
   ============================================================ */
.dpc-topbar {
  background: #0A1628;
  font-family: 'DM Sans', system-ui, sans-serif;
}
.dpc-topbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.375rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.dpc-topbar-left {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.72);
}
.dpc-topbar-left span { font-size: 0.75rem; color: rgba(255,255,255,0.72); }
.dpc-topbar a {
  color: #28C8F0;
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 600;
}
.dpc-topbar a:hover { color: #fff; }

/* ============================================================
   HEADER — règles de base manquantes
   ============================================================ */
.dpc-site-header {
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,120,160,0.1);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: box-shadow 0.2s;
}
.dpc-site-header.scrolled { box-shadow: 0 4px 16px rgba(0,120,160,0.12); }
.dpc-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.875rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}
.dpc-logo-wrap { flex-shrink: 0; }
.dpc-logo-link { text-decoration: none; display: flex; align-items: center; }
.dpc-logo-link img { height: 46px; width: auto; display: block; }
.dpc-header-phone {
  font-size: 0.75rem;
  font-weight: 600;
  color: #0078A0;
  text-decoration: none;
  white-space: nowrap;
  display: none; /* masqué sur mobile, visible tablette+ */
}
@media (min-width: 768px) { .dpc-header-phone { display: flex; align-items: center; gap: 0.375rem; } }
.dpc-header-cta { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }

/* === PARTNER CAROUSEL — améliorations visuelles === */
.dpc-partners-track {
  animation: dpc-scroll 32s linear infinite !important;
}
.dpc-partners-track:hover {
  animation-play-state: paused !important;
}
@keyframes dpc-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* === LOGO HEADER — injection dynamique === */
#dpc-logo-header img {
  height: 46px;
  width: auto;
  display: block;
}

/* ============================================================
   RESPONSIVE MOBILE / TABLETTE
   ============================================================ */

/* === TOPBAR === */
@media (max-width: 767px) {
  .dpc-topbar-inner { flex-direction: column; gap: 0.25rem; padding: 0.5rem 1rem; text-align: center; }
  .dpc-topbar-left { flex-direction: column; gap: 0.25rem; }
}

/* === HEADER === */
/* ===== NAV DESKTOP ===== */
@media (min-width: 1024px) {
  .dpc-nav {
    display: flex !important;
    position: static !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    flex-direction: row !important;
    overflow: visible !important;
    transition: none !important;
    visibility: visible !important;
  }
  .dpc-nav a {
    font-size: 0.813rem !important;
    padding: 0.4rem 0.75rem !important;
    border-bottom: none !important;
    border-radius: 8px !important;
  }
  .dpc-nav a.nav-support {
    margin: 0 !important;
    width: auto !important;
    border-radius: 20px !important;
    padding: 0.35rem 0.875rem !important;
  }
  .dpc-nav-toggle { display: none !important; }
  .dpc-btn-devis { display: inline-flex !important; }
  .dpc-header-phone { display: flex !important; }
}

/* ===== NAV MOBILE ===== */
@media (max-width: 1023px) {
  .dpc-header-inner { padding: 0.75rem 1rem; }
  .dpc-header-phone { display: none !important; }
  .dpc-btn-devis { display: none !important; }
  .dpc-nav-toggle { display: flex !important; z-index: 1001; }

  /* Panneau : caché hors écran à droite — sans transform */
  .dpc-nav {
    position: fixed !important;
    top: 0 !important;
    right: -320px !important;   /* caché à droite */
    width: 300px !important;
    height: 100vh !important;
    background: #fff !important;
    z-index: 1002 !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-shadow: -4px 0 32px rgba(0,0,0,0.18) !important;
    transition: right 0.28s ease !important;
    transform: none !important;
    display: flex !important;
    left: auto !important;
  }

  /* Panneau ouvert */
  .dpc-nav.is-open {
    right: 0 !important;
  }

  /* Liens */
  .dpc-nav a {
    display: block !important;
    width: 100% !important;
    font-size: 1.0625rem !important;
    font-weight: 500 !important;
    padding: 1rem 1.5rem !important;
    color: #0A1628 !important;
    border-bottom: 1px solid rgba(0,120,160,0.08) !important;
    border-radius: 0 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
  }
  .dpc-nav a:active { background: #F0FAFE !important; color: #0078A0 !important; }
  .dpc-nav a.nav-support {
    margin: 0.75rem 1.25rem !important;
    width: calc(100% - 2.5rem) !important;
    background: #16A34A !important;
    color: #fff !important;
    border-radius: 10px !important;
    border: none !important;
    text-align: center !important;
    padding: 0.875rem 1rem !important;
    font-weight: 600 !important;
  }
}

/* Overlay — couvre UNIQUEMENT la partie gauche (hors panneau nav) */
.dpc-nav-overlay {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  right: 0;              /* par défaut couvre tout */
  background: rgba(10, 22, 40, 0.55);
  z-index: 1001;          /* EN DESSOUS du panneau nav (1002) */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
  backdrop-filter: blur(2px);
}
.dpc-nav-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;  /* cliquable uniquement sur la zone gauche */
}

/* Empêcher scroll horizontal global */
html { overflow-x: hidden; }
body { overflow-x: hidden; }
body.nav-open { overflow: hidden !important; }

/* === HERO === */
@media (max-width: 767px) {
  .dpc-hero-section > div { grid-template-columns: 1fr !important; gap: 2rem !important; padding: 3rem 1.25rem !important; }
  .dpc-hero-section > div > div:last-child { display: none; } /* cacher panel solutions sur mobile */
  h1 { font-size: clamp(1.75rem, 8vw, 2.5rem) !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .dpc-hero-section > div { grid-template-columns: 1fr !important; gap: 2.5rem !important; padding: 4rem 2rem !important; }
  .dpc-hero-section > div > div:last-child { display: none; }
}

/* === SERVICES — grille responsive === */
@media (max-width: 767px) {
  /* Ligne 1 : une colonne */
  div[style*="grid-template-columns:65%"] { grid-template-columns: 1fr !important; }
  /* Ligne 2 : 2 colonnes sur mobile */
  div[style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2,1fr) !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  div[style*="grid-template-columns:65%"] { grid-template-columns: 1fr !important; }
  div[style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2,1fr) !important; }
}

/* === POURQUOI — 2 colonnes sur mobile === */
@media (max-width: 767px) {
  div[style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2,1fr) !important; }
}

/* === CONTACT — une colonne sur mobile === */
@media (max-width: 1023px) {
  div[style*="grid-template-columns:42%"] { grid-template-columns: 1fr !important; }
  div[style*="position:sticky;top:100px"] { position: static !important; }
}

/* === PARTENAIRES PAGE — grille === */
@media (max-width: 767px) {
  div[style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 480px) {
  div[style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
}

/* === SERVICE DETAIL — réduire padding === */
@media (max-width: 767px) {
  div[style*="padding:4rem 2rem"] { padding: 2.5rem 1.25rem !important; }
  div[style*="padding:3.5rem 2rem"] { padding: 2rem 1.25rem !important; }
  div[style*="padding:3rem 2rem"] { padding: 2rem 1.25rem !important; }
}

/* === TÉLÉCHARGEMENTS === */
@media (max-width: 640px) {
  div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
}

/* === CTA BANDEAU === */
@media (max-width: 767px) {
  div[style*="background:linear-gradient(135deg,#0A1628"] div[style*="display:flex;align-items:center;justify-content:space-between"] {
    flex-direction: column !important;
    text-align: center !important;
  }
  div[style*="background:linear-gradient(135deg,#0A1628"] div[style*="display:flex;gap:0.75rem;flex-wrap:wrap;flex-shrink:0"] {
    justify-content: center !important;
    width: 100% !important;
  }
}

/* === FOOTER === */
@media (max-width: 767px) {
  .dpc-footer-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
  .dpc-footer-inner { padding: 2rem 1.25rem 1rem !important; }
  .dpc-footer-bottom { flex-direction: column !important; text-align: center !important; gap: 0.5rem !important; }
}

/* === FORMULAIRE CONTACT === */
@media (max-width: 600px) {
  div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
}

/* === HERO STATS === */
@media (max-width: 480px) {
  div[style*="display:flex;flex-wrap:wrap;gap:2rem;padding-top:1.5rem"] {
    gap: 1rem !important;
  }
  div[style*="display:flex;flex-wrap:wrap;gap:2rem;padding-top:1.5rem"] > div {
    flex: 1 1 40% !important;
  }
}

/* ============================================================
   NAV PANEL HEADER — caché sur desktop, visible mobile
   ============================================================ */
.dpc-nav-panel-header {
  display: none; /* caché par défaut = desktop */
}
.dpc-nav-panel-title {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 800;
  color: #0078A0;
}
.dpc-nav-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #F0FAFE;
  cursor: pointer;
  font-size: 1.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0A1628;
  flex-shrink: 0;
}
.dpc-nav-close:hover { background: #E8F9FD; }

/* Empêcher le scroll ET le débordement quand menu ouvert */
body.nav-open {
  overflow: hidden !important;
}
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

@media (max-width: 1023px) {
  /* Afficher le header du panneau uniquement sur mobile */
  .dpc-nav-panel-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 1.125rem 1.5rem;
    border-bottom: 2px solid #0078A0;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 1;
    flex-shrink: 0;
  }
}

@media (min-width: 1024px) {
  /* Sur desktop : le header du panneau est invisible et ne prend pas de place */
  .dpc-nav-panel-header {
    display: none !important;
  }
  /* S'assurer que le nav n'a pas d'overflow caché sur desktop */
  .dpc-nav {
    overflow: visible !important;
  }
}