/*!
Theme Name: iD4Connect
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: id4connect
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ============================================
   iD4Connect — DESIGN SYSTEM
   ============================================ */

/* ── TOKENS GLOBAUX ── */
:root {
  --orange: #F97316;
  --orange-d: #EA6C0A;
  --orange-pale: #FFF7ED;
  --orange-border: #FED7AA;
  --green: #16A34A;
  --green-pale: #F0FDF4;
  --green-border: #BBF7D0;
  --red: #DC2626;
  --red-pale: #FEF2F2;
  --red-border: #FECACA;
  --blue-pale: #EFF6FF;
  --purple-pale: #F5F3FF;
  --font: 'Inter', sans-serif;
  --r-xs: 5px;
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 100px;
  --tr: 0.16s ease;
  --hh: 64px;
}

/* ── LIGHT MODE ── */
:root, [data-theme="light"] {
  --bg: #F5F4F0;
  --card: #FFFFFF;
  --section: #EEEDEA;
  --t9: #111827;
  --t7: #374151;
  --t5: #6B7280;
  --t4: #9CA3AF;
  --border: #E5E3DE;
  --border-s: #D1CFCA;
  --sh-sm: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  --sh: 0 4px 16px rgba(0,0,0,.08);
  --sh-lg: 0 12px 40px rgba(0,0,0,.10);
}

/* ── DARK MODE ── */
[data-theme="dark"] {
  --bg: #0C1221;
  --card: #162032;
  --section: #0A0E1A;
  --t9: #F9FAFB;
  --t7: #D1D5DB;
  --t5: #6B7280;
  --t4: #4B5563;
  --border: #1F2D3D;
  --border-s: #2D3F52;
  --sh-sm: 0 1px 3px rgba(0,0,0,.3);
  --sh: 0 4px 16px rgba(0,0,0,.3);
  --sh-lg: 0 12px 40px rgba(0,0,0,.4);
  --orange-pale: rgba(249,115,22,.08);
  --orange-border: rgba(249,115,22,.2);
  --green-pale: rgba(22,163,74,.08);
  --green-border: rgba(22,163,74,.2);
  --red-pale: rgba(220,38,38,.08);
  --red-border: rgba(220,38,38,.2);
  --blue-pale: rgba(59,130,246,.08);
  --purple-pale: rgba(139,92,246,.08);
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--t9);
  -webkit-font-smoothing: antialiased;
  padding-top: var(--hh);
  transition: background .25s, color .25s;
}
img { max-width: 100%; height: auto; }
a { color: inherit; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 32px; }

/* ── ACCESSIBILITÉ (_s) ── */
.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  height: 1px; margin: -1px; overflow: hidden; padding: 0;
  position: absolute !important; width: 1px; word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: #f1f1f1; border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0,0,0,.6); clip: auto !important;
  clip-path: none; color: #21759b; display: block; font-size: .875rem;
  font-weight: 700; height: auto; left: 5px; line-height: normal;
  padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto;
  z-index: 100000;
}

/* ============================================
   HEADER
   ============================================ */

#hdr {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--hh);
  background: var(--card);
  border-bottom: 1px solid var(--border);
  z-index: 1000;
  transition: background .25s, border-color .25s;
}
#hdr.scrolled { box-shadow: var(--sh-sm); }

.hdr-in {
  max-width: 1160px; margin: 0 auto; height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px; gap: 8px;
}

/* Logo */
.hdr-logo { display: flex; align-items: center; gap: 9px; text-decoration: none; flex-shrink: 0; }
.hdr-logo img { height: 48px; width: auto; max-height: 48px; }

/* Nav desktop */
.hdr-nav { display: flex; align-items: center; gap: 2px; flex: 1; justify-content: center; }
.nav-item { position: relative; }

.nav-btn {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 11px; font-size: 13.5px; font-weight: 500; font-family: var(--font);
  color: var(--t7); background: none; border: none; border-radius: var(--r-sm);
  cursor: pointer; text-decoration: none; white-space: nowrap; transition: all var(--tr);
}
.nav-btn:hover, .nav-item.open > .nav-btn { color: var(--t9); background: var(--section); }

.chev { width: 11px; height: 11px; flex-shrink: 0; transition: transform var(--tr); color: var(--t4); }
.nav-item.open .chev { transform: rotate(180deg); }

/* Dropdowns */
.drop {
  position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
  padding: 8px; min-width: 188px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease; box-shadow: var(--sh);
}
.drop::before { content: ''; position: absolute; top: -8px; left: 0; right: 0; height: 8px; background: transparent; }
.nav-item.open .drop { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%); }

.drop.wide { min-width: 300px; display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 8px; }

.drop-lbl {
  grid-column: 1 / -1; padding: 5px 9px 2px;
  font-size: 10px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--orange); opacity: .7;
}

.drop-item {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 9px; font-size: 13px; font-weight: 500; font-family: var(--font);
  color: var(--t7); text-decoration: none; border-radius: var(--r-xs); transition: all var(--tr);
}
.drop-item:hover { background: var(--orange-pale); color: var(--orange); }

.di-svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--t4); }
.drop-item:hover .di-svg { color: var(--orange); }

/* Zone droite */
.hdr-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Bouton thème */
.theme-btn {
  width: 32px; height: 32px; background: var(--section);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--tr); color: var(--t5);
}
.theme-btn:hover { border-color: var(--border-s); color: var(--t9); }
.theme-btn svg { width: 15px; height: 15px; }
.icon-moon, .icon-sun { display: none; }
[data-theme="light"] .icon-moon { display: block; }
[data-theme="dark"]  .icon-sun  { display: block; }

/* CTA */
.hdr-cta {
  display: flex; align-items: center; gap: 5px;
  padding: 8px 16px; background: var(--orange); color: white;
  font-size: 13px; font-weight: 600; font-family: var(--font);
  border-radius: var(--r-sm); text-decoration: none;
  transition: all var(--tr); border: none; cursor: pointer;
}
.hdr-cta:hover { background: var(--orange-d); }

/* Burger mobile */
.burger { display: none; flex-direction: column; gap: 4px; cursor: pointer; padding: 7px; background: none; border: none; }
.burger span { display: block; width: 19px; height: 1.5px; background: var(--t7); border-radius: 2px; }

/* Menu mobile */
.mob-menu {
  display: none; position: fixed; top: var(--hh); left: 0; right: 0; bottom: 0;
  background: var(--card); padding: 16px 20px; overflow-y: auto; z-index: 999;
  border-top: 1px solid var(--border);
}
.mob-menu.open { display: block; }

.mob-lnk {
  display: block; padding: 10px 11px; font-size: 14.5px; font-weight: 500; font-family: var(--font);
  color: var(--t7); text-decoration: none; border-radius: var(--r-sm); margin-bottom: 2px;
  transition: all var(--tr); cursor: pointer; background: none; border: none; width: 100%; text-align: left;
}
.mob-lnk:hover { background: var(--section); color: var(--t9); }

.mob-sub { padding-left: 10px; display: none; margin-bottom: 6px; }
.mob-sub.open { display: block; }
.mob-sub a {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 11px; font-size: 13px; font-weight: 500; font-family: var(--font);
  color: var(--t5); text-decoration: none; border-radius: var(--r-xs); transition: all var(--tr);
}
.mob-sub a:hover { color: var(--orange); background: var(--orange-pale); }

.mob-cta {
  display: block; text-align: center; margin-top: 18px; padding: 12px;
  background: var(--orange); color: white; font-size: 14px; font-weight: 600;
  font-family: var(--font); border-radius: var(--r-sm); text-decoration: none;
}

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
  .hdr-nav, .hdr-cta { display: none; }
  .burger { display: flex; }
}
@media (max-width: 600px) {
  .hdr-in, .wrap { padding: 0 20px; }
}

/* ============================================
   FOOTER
   ============================================ */

#ftr {
  font-family: var(--font, 'Inter', sans-serif);
  background: #0F172A;
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 56px 0 0;
}

.ftr-in { max-width: 1160px; margin: 0 auto; padding: 0 32px; }

.ftr-top {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px; padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.ftr-brand .ftr-logo { display: flex; align-items: center; gap: 9px; text-decoration: none; margin-bottom: 14px; }
.ftr-brand .ftr-logo img { height: 28px; width: auto; max-height: 28px; }
.ftr-tagline { font-size: 13px; color: #4B5563; line-height: 1.7; max-width: 240px; }

.ftr-col h4 {
  font-size: 10px; font-weight: 700; color: #6B7280;
  letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 14px;
}
.ftr-col ul { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.ftr-col ul li a { font-size: 13px; color: #4B5563; text-decoration: none; transition: color .16s; }
.ftr-col ul li a:hover { color: #F97316; }

.ftr-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0; flex-wrap: wrap; gap: 12px;
}
.ftr-copy { font-size: 12px; color: #374151; }
.ftr-links { display: flex; gap: 16px; }
.ftr-links a { font-size: 12px; color: #374151; text-decoration: none; transition: color .16s; }
.ftr-links a:hover { color: #F97316; }

@media (max-width: 900px) {
  .ftr-top { grid-template-columns: 1fr 1fr; }
  .ftr-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .ftr-top { grid-template-columns: 1fr; }
  .ftr-in { padding: 0 20px; }
  .ftr-bottom { flex-direction: column; text-align: center; }
}

/* ============================================
   CONTENU (base pour les pages)
   ============================================ */

.site-main {
  padding: 40px 0;
}

.entry-content,
.page-content {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 32px;
}

@media (max-width: 600px) {
  .entry-content,
  .page-content {
    padding: 0 20px;
  }
}