/* HITOP — feuille de style commune, simplifiée et à contraste élevé.
   Palette unique : texte sombre, fonds clairs, bleu foncé pour les actions.
   Tous les boutons définissent explicitement leur couleur de texte et de fond. */

:root {
  color-scheme: light;
  --ink: #172033;
  --muted: #475569;
  --blue: #064da3;
  --blue-hover: #043b7d;
  --blue-soft: #eff6ff;
  --surface: #f5f7fa;
  --surface-2: #eaf0f6;
  --border: #cbd5e1;
  --white: #fff;
  --green: #14532d;
  --radius: 12px;
  --radius-lg: 20px;
  --pill: 999px;
  --shadow: 0 8px 24px rgb(23 32 51 / 8%);
  --shadow-lg: 0 18px 48px rgb(23 32 51 / 14%);
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; }
body { margin: 0; color: var(--ink); background: var(--white); font: 16px/1.65 var(--font); }
img, video, iframe { max-width: 100%; }
img { height: auto; }
svg { max-width: 100%; }
a { color: var(--blue); text-decoration-thickness: .08em; text-underline-offset: .16em; }
a:hover { color: var(--blue-hover); }
a:visited { color: var(--blue); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .65; }
input, select, textarea { max-width: 100%; }
:focus-visible { outline: 3px solid #9a4d00; outline-offset: 3px; }
::selection { color: var(--ink); background: #bfdbfe; }

h1, h2, h3, h4, h5, h6 { margin: 0 0 .75em; color: var(--ink); font-weight: 750; line-height: 1.2; text-wrap: balance; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); letter-spacing: -.03em; }
h2 { font-size: clamp(1.55rem, 3.3vw, 2.45rem); letter-spacing: -.02em; }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.45rem); }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1rem; }
ul, ol { padding-left: 1.4rem; }
li + li { margin-top: .35rem; }
strong, b { font-weight: 750; }
small { font-size: .875em; }
hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }

.container, .page-container { width: min(100% - 2.5rem, 1160px); margin-inline: auto; }
.section { padding-block: clamp(3.25rem, 7vw, 6.25rem); }
.section.bg-warm, .section.bg-gray, .bg-gray-50, .bg-gray-100, .bg-light { background: var(--surface); }
.bg-white { background: var(--white); }
.bg-navy { background: var(--ink); color: var(--white); }
.bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4, .bg-navy p { color: var(--white); }
.section-head { margin-bottom: clamp(2rem, 5vw, 3.75rem); }
.section-head.center, .center, .text-center, .has-text-align-center { text-align: center; }
.section-title { margin-bottom: .8rem; }
.lead, .subtitle, .section-subtitle, .hero-subtitle { max-width: 68ch; color: var(--muted); font-size: 1.08rem; line-height: 1.75; }
.section-head.center .lead { margin-inline: auto; }
.eyebrow, .label-pill { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1rem; color: var(--blue); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.label-pill { padding: .4rem .8rem; border-radius: var(--pill); background: var(--blue-soft); letter-spacing: .04em; }
.label-pill::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; }
.text-muted, .text-light, .muted, .text-secondary, .text-note, .form-hint { color: var(--muted) !important; }

/* Boutons : variantes autonomes pour éviter les collisions de couleur. */
.btn, .button, .cta-button, .wp-element-button, .wp-block-button__link,
button.btn, input[type="submit"], input[type="button"] {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 46px; max-width: 100%; padding: .75rem 1.25rem;
  border: 2px solid transparent; border-radius: var(--pill);
  font-weight: 750; line-height: 1.25; text-align: center; text-decoration: none;
  text-shadow: none; opacity: 1; box-shadow: none; transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.btn svg, .button svg { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; }
.btn-gold, .btn-blue, .btn-primary, .button-primary, .button-blue, .cta-button,
.wp-element-button, .wp-block-button__link, .btn-primary:visited, .btn-blue:visited,
.btn-gold:visited, button.btn-gold, button.btn-blue, input[type="submit"] {
  color: var(--white) !important; background: var(--blue) !important; border-color: var(--blue) !important;
}
.btn-gold:hover, .btn-blue:hover, .btn-primary:hover, .button-primary:hover, .button-blue:hover,
.cta-button:hover, .wp-element-button:hover, .wp-block-button__link:hover,
button.btn-gold:hover, button.btn-blue:hover, input[type="submit"]:hover {
  color: var(--white) !important; background: var(--blue-hover) !important; border-color: var(--blue-hover) !important; transform: translateY(-1px);
}
.btn-white, .btn-white:link, .btn-white:visited, .button-white {
  color: var(--ink) !important; background: var(--white) !important; border-color: var(--border) !important;
}
.btn-white:hover, .btn-white:focus-visible, .button-white:hover { color: var(--ink) !important; background: var(--surface) !important; border-color: #64748b !important; }
.btn-ghost, .btn-outline, .btn-ghost:link, .btn-ghost:visited, .btn-outline:link, .btn-outline:visited {
  color: var(--blue) !important; background: var(--white) !important; border-color: var(--blue) !important;
}
.btn-ghost:hover, .btn-outline:hover { color: var(--blue-hover) !important; background: var(--blue-soft) !important; border-color: var(--blue-hover) !important; }
.btn-lg { min-height: 52px; padding: .9rem 1.55rem; }
.btn-block, .btn-full { display: flex; width: 100%; }
.actions, .hero-actions, .confirmation-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }
.cta-band { padding: clamp(2.5rem, 6vw, 4.5rem) 0; color: var(--white); background: var(--blue-hover); }
.cta-band h1, .cta-band h2, .cta-band h3, .cta-band p, .cta-band li { color: var(--white); }
.cta-band .btn-gold, .cta-band a.btn-gold, .cta-band a.btn-gold:visited {
  color: var(--blue-hover) !important; background: var(--white) !important; border-color: var(--white) !important;
}
.cta-band .btn-gold:hover { color: var(--ink) !important; background: #eaf0f6 !important; border-color: #eaf0f6 !important; }
.cta-band .btn-white, .cta-band a.btn-white:visited { color: var(--ink) !important; background: var(--white) !important; border-color: var(--white) !important; }

/* Navigation commune */
#nav, .navbar { position: sticky; top: 0; z-index: 100; background: var(--white); border-bottom: 1px solid var(--border); }
#nav { padding: .7rem 0; }
#nav.scrolled { box-shadow: 0 3px 18px rgb(23 32 51 / 8%); }
.nav-inner, .nav-container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.nav-logo img, .logo img { display: block; width: auto; max-height: 52px; }
.nav-links, .nav-menu { display: flex; align-items: center; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.nav-links > li, .nav-menu > li { margin: 0; }
.nav-links a, .nav-menu a, .nav-link { display: inline-flex; align-items: center; min-height: 42px; padding: .55rem .7rem; border-radius: 8px; color: var(--ink); font-size: .92rem; font-weight: 650; text-decoration: none; }
.nav-links a:hover, .nav-menu a:hover, .nav-link:hover { color: var(--blue-hover); background: var(--surface); }
.nav-cta > a, .nav-cta > a:link, .nav-cta > a:visited { color: var(--white) !important; background: var(--blue) !important; border-radius: var(--pill); padding-inline: 1rem; }
.nav-cta > a:hover { color: var(--white) !important; background: var(--blue-hover) !important; }
.nav-drop { position: relative; }
.nav-drop > a::after { content: "▾"; margin-left: .35rem; font-size: .75em; }
.drop-menu, .submenu, .blog-submenu { position: absolute; top: 100%; left: 0; z-index: 110; min-width: 245px; margin: 0; padding: .5rem; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); list-style: none; opacity: 0; visibility: hidden; transform: translateY(.3rem); transition: .15s ease; }
.nav-drop:hover .drop-menu, .nav-drop:focus-within .drop-menu, .nav-drop:hover .submenu, .nav-drop:focus-within .submenu { opacity: 1; visibility: visible; transform: none; }
.drop-menu li { margin: 0; }
.drop-menu a, .submenu a, .blog-submenu a { display: block; width: 100%; padding: .65rem .75rem; color: var(--ink) !important; background: var(--white) !important; border-radius: 6px; }
.drop-menu a:hover, .submenu a:hover, .blog-submenu a:hover { color: var(--blue-hover) !important; background: var(--blue-soft) !important; }
.burger, .hamburger { display: none; padding: .55rem; border: 1px solid var(--border); border-radius: 8px; background: var(--white); }
.burger span { display: block; width: 24px; height: 2px; margin: 4px 0; background: var(--ink); }
.nav-overlay { display: none; position: fixed; inset: 0; z-index: 99; overflow-y: auto; padding: 5.5rem 1.25rem 2rem; background: var(--white); }
.nav-overlay.open { display: flex; flex-direction: column; gap: .2rem; }
.nav-overlay h5 { margin: 1rem 0 .25rem; color: var(--muted); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.nav-overlay a { display: block; padding: .8rem; color: var(--ink); font-weight: 650; text-decoration: none; border-radius: 8px; }
.nav-overlay a:hover { color: var(--blue-hover); background: var(--surface); }
.nav-overlay .cta-link, .nav-overlay a.cta-link:visited { margin-top: .8rem; color: var(--white) !important; background: var(--blue) !important; text-align: center; }

/* Accueil : hero, preuves et cartes */
#hero { position: relative; min-height: 75vh; overflow: hidden; background: var(--surface); }
.hero-bg { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(#cbd5e1 1px, transparent 1px); background-size: 28px 28px; opacity: .35; }
.hero-glow, .hero-glow-2 { position: absolute; border-radius: 50%; pointer-events: none; background: #dbeafe; filter: blur(3px); }
.hero-glow { top: -12rem; right: -8rem; width: 32rem; height: 32rem; }
.hero-glow-2 { bottom: -12rem; left: -8rem; width: 24rem; height: 24rem; }
.hero-body { position: relative; z-index: 1; padding: clamp(5rem, 10vw, 8rem) 0 4rem; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); align-items: center; gap: clamp(2rem, 5vw, 4rem); }
.hero-badge { display: inline-block; margin-bottom: 1rem; padding: .45rem .75rem; color: var(--blue-hover); background: #dbeafe; border-radius: var(--pill); font-size: .85rem; font-weight: 750; }
.hero-title { max-width: 14ch; margin-bottom: 1.2rem; }
.hero-intro { max-width: 65ch; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.18rem); }
.hero-signature { display: flex; align-items: center; gap: .75rem; margin: 1.4rem 0; font-weight: 700; }
.hero-signature img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.hero-signature small { color: var(--muted); font-weight: 500; }
.hero-reassurance { margin-top: 1rem; color: var(--muted); font-size: .9rem; }
.hero-card { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-lg); }
.hero-card-header { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.2rem; background: var(--surface); border-bottom: 1px solid var(--border); }
.hero-card-dots { display: flex; gap: .3rem; }
.hero-card-dots span { width: .55rem; height: .55rem; border-radius: 50%; background: #64748b; }
.hero-card-title { color: var(--ink); font-weight: 750; }
.hero-card-body { padding: 1.2rem; }
.accomp-step { display: flex; align-items: flex-start; gap: .8rem; padding: .75rem 0; }
.accomp-step + .accomp-step { border-top: 1px solid var(--border); }
.accomp-num, .accomp-circle { display: grid; place-items: center; flex: 0 0 2rem; width: 2rem; height: 2rem; border-radius: 50%; color: var(--white); background: var(--blue); font-weight: 800; }
.accomp-num.pending { color: var(--ink); background: var(--surface-2); }
.accomp-text strong, .accomp-text span { display: block; }
.accomp-text span { color: var(--muted); font-size: .9rem; }
.hero-stats { display: flex; align-items: center; justify-content: space-around; gap: 1rem; padding: 1.5rem 0; color: var(--white); background: var(--ink); text-align: center; }
.hero-stats .container { display: flex; align-items: center; justify-content: space-around; gap: 1rem; }
.hero-stat-num { color: var(--white); font-size: clamp(1.35rem, 3vw, 2rem); font-weight: 850; }
.hero-stat-label { color: #e2e8f0; font-size: .86rem; }
.hero-stat-sep { width: 1px; height: 2.5rem; background: #64748b; }

.problem-grid, .pg-2col, .contact-grid, .about-intro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.problem-cards, .proof-grid, .services-grid, .testi-grid, .pricing-grid, .pcard-grid, .gallery-grid, .logos-grid, .formation-grid, .value-grid, .kpi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.problem-card, .proof-card, .service-card, .srv-card, .value-card, .price-card, .testi-card, .pcard, .about-card, .kpi-box, .project-step, .feature-card, .card { min-width: 0; padding: 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); color: var(--ink); box-shadow: 0 3px 12px rgb(23 32 51 / 4%); }
.problem-card { display: flex; gap: .85rem; }
.problem-card.highlight { border-color: #93b4dc; background: var(--blue-soft); }
.problem-icon, .proof-icon, .value-icon, .srv-icon { font-size: 1.5rem; }
.problem-card p, .proof-card p, .service-card p, .srv-card p, .value-card p, .price-card p, .testi-card p, .pcard p { color: var(--muted); }
.proof-num, .kpi-num { color: var(--blue-hover); font-size: 2rem; font-weight: 850; }
.proof-label, .kpi-label { color: var(--muted); }
.services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.srv-card { display: flex; flex-direction: column; gap: .5rem; }
.srv-link, .pcard-link { display: inline-flex; align-items: center; gap: .3rem; margin-top: auto; font-weight: 750; }

/* Tarifs, témoignages, portfolio et étapes */
.price-card { position: relative; }
.price-card.featured { border: 2px solid var(--blue); box-shadow: var(--shadow); }
.price-name { font-size: 1.1rem; font-weight: 800; }
.price-sub, .price-desc, .price-note { color: var(--muted); }
.price-amount { margin: .8rem 0; color: var(--ink); font-size: 2rem; font-weight: 850; }
.price-amount span { color: var(--muted); font-size: .9rem; font-weight: 500; }
.price-features { padding-left: 1.2rem; }
.price-badge { display: inline-block; padding: .3rem .65rem; color: var(--white); background: var(--blue); border-radius: var(--pill); font-size: .8rem; font-weight: 750; }
.price-check { color: var(--green); font-weight: 800; }
.testi-card { display: flex; flex-direction: column; gap: .7rem; }
.testi-stars { color: #8a4b00; letter-spacing: .1em; }
.testi-quote { color: var(--ink); }
.testi-author { display: flex; align-items: center; gap: .7rem; margin-top: auto; }
.testi-author span, .testi-card time, .testi-rating-count { color: var(--muted); font-size: .9rem; }
.testi-av { width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; }
.testi-rating { color: var(--ink); font-weight: 800; }
.pcard { overflow: hidden; padding: 0; }
.pcard-img img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.pcard-body { padding: 1rem; }
.pcard-cat { color: var(--blue-hover); font-size: .8rem; font-weight: 800; text-transform: uppercase; }
.pcard-title { margin: .3rem 0; }
.pcard-desc { color: var(--muted); }
.project-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 2rem 0; }
.project-step-number { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; margin-bottom: .7rem; color: var(--white); background: var(--blue); border-radius: 50%; font-weight: 800; }
.accomp-timeline { display: grid; gap: 1rem; }
.accomp-row { display: flex; align-items: flex-start; gap: 1rem; }
.accomp-info { flex: 1; }

/* Pages de contenu */
.page-hero { padding: 7rem 0 3rem; background: var(--surface); border-bottom: 1px solid var(--border); }
.page-hero h1 { max-width: 20ch; margin-bottom: .8rem; }
.page-hero p { max-width: 70ch; color: var(--muted); font-size: 1.1rem; }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1.4rem; color: var(--muted); font-size: .9rem; }
.breadcrumb a { color: var(--blue); }
.tldr-box { padding: 1.25rem 0; background: var(--blue-soft); border-block: 1px solid #bfdbfe; }
.tldr-inner { display: flex; align-items: flex-start; gap: .8rem; }
.tldr-inner strong { display: block; margin-bottom: .3rem; }
.tldr-inner p { margin: 0; color: var(--ink); }
.prose, .page-content, .blog-article { max-width: 78ch; margin-inline: auto; color: var(--ink); }
.prose p, .page-content p, .blog-article p { margin-bottom: 1.1rem; }
.prose h2, .page-content h2, .blog-article h2 { margin-top: 2.2rem; }
.prose h3, .page-content h3, .blog-article h3 { margin-top: 1.6rem; }
.prose ul, .prose ol, .page-content ul, .page-content ol, .blog-article ul, .blog-article ol { margin: 0 0 1.3rem; }
.prose a, .page-content a, .blog-article a { color: var(--blue); font-weight: 650; }
.related-aside { width: min(100% - 2.5rem, 900px); margin: 2rem auto; padding: 1.2rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.related-aside > p { font-weight: 800; }
.related-aside ul { margin-bottom: 0; }
.service-quick-cta { margin: 1.75rem 0 2.25rem; padding: 1.25rem; border: 1px solid var(--border); border-left: 4px solid var(--blue); border-radius: var(--radius); background: var(--blue-soft); }
.service-quick-cta p { color: var(--ink); }
.service-quick-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; }
.service-quick-cta__phone, .service-quick-cta__phone:visited { color: var(--blue-hover); font-weight: 800; }

/* FAQ accessible */
.faq-wrap { display: grid; gap: .75rem; }
.faq-item { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); }
.faq-btn { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: 1rem 1.1rem; color: var(--ink) !important; background: var(--white); text-align: left; font-weight: 750; }
.faq-btn:hover, .faq-btn[aria-expanded="true"] { color: var(--blue-hover) !important; background: var(--surface); }
.faq-ico { flex: 0 0 auto; color: var(--blue); }
.faq-body { color: var(--ink); background: var(--white); }
.faq-body-inner { padding: 0 1.1rem 1rem; }

/* Formulaires et contact */
.contact-items { display: grid; gap: .8rem; }
.contact-cta { padding: 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.hitop-contact-form { margin-top: 2rem; padding: clamp(1rem, 3vw, 2rem); color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.hitop-contact-form h3 { color: var(--ink); }
.hitop-contact-form .form-intro { color: var(--muted); }
.hitop-contact-form .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.hitop-contact-form .form-field, .form-field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.hitop-contact-form .form-field--full { grid-column: 1 / -1; }
.hitop-contact-form label, label { color: var(--ink); font-weight: 700; line-height: 1.45; }
.hitop-contact-form input:not([type="checkbox"]):not([type="radio"]), .hitop-contact-form select, .hitop-contact-form textarea,
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), select, textarea {
  width: 100%; min-width: 0; padding: .75rem .85rem; color: var(--ink); background: var(--white);
  border: 1px solid #64748b; border-radius: 8px; line-height: 1.45;
}
input::placeholder, textarea::placeholder { color: #475569; opacity: 1; }
textarea { resize: vertical; }
.hitop-contact-form .form-consent { display: flex; align-items: flex-start; gap: .65rem; margin: 1rem 0; }
.hitop-contact-form .form-consent input { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin-top: .2rem; accent-color: var(--blue); }
.hitop-contact-form .form-consent label { font-weight: 500; }
.hitop-contact-form .form-consent a { color: var(--blue-hover); text-decoration: underline; }
.hitop-contact-form button[type="submit"] { width: auto; min-height: 48px; color: var(--white) !important; background: var(--blue) !important; border: 2px solid var(--blue) !important; }
.hitop-contact-form .form-hint { margin-top: .9rem; color: var(--muted) !important; font-size: .875rem; }
.form-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.contact-status { margin-bottom: 1rem; padding: .85rem 1rem; color: #7c2d12 !important; background: #fff7ed; border: 1px solid #c2410c; border-radius: 8px; font-weight: 700; }
.contact-status[hidden], .hidden { display: none !important; }

/* Footer et partage */
footer { padding: 3rem 0 1rem; color: #f8fafc; background: #172033; }
footer h2, footer h3, footer h4, footer p { color: #f8fafc; }
footer a, footer a:visited { color: #e2e8f0; }
footer a:hover { color: var(--white); text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 2rem; }
.footer-brand p { max-width: 34ch; color: #e2e8f0; }
.footer-logo img { width: auto; max-width: 180px; max-height: 75px; object-fit: contain; }
.footer-grid ul { padding: 0; list-style: none; }
.footer-grid li { margin: .4rem 0; }
.footer-updated { display: block; margin-top: 1.5rem; color: #cbd5e1; font-size: .85rem; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #475569; color: #e2e8f0; }
.share-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1rem; }
.share-label { color: #f8fafc; font-weight: 750; }
.share-btn, .share-btn:visited { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: .45rem .7rem; color: var(--white) !important; background: #334155; border: 1px solid #64748b; border-radius: 8px; text-decoration: none; font-weight: 700; }
.share-btn svg { width: 1rem; height: 1rem; }
.share-btn.fb { color: var(--white) !important; background: #145dbb; border-color: #145dbb; }
.share-btn.li { color: var(--white) !important; background: #0a66c2; border-color: #0a66c2; }
.share-btn.wa { color: #083b20 !important; background: #25d366; border-color: #25d366; }
.share-btn.tw { color: var(--white) !important; background: #111; border-color: #111; }
.share-btn.mail, .share-btn.copy { color: var(--ink) !important; background: var(--white); border-color: var(--border); }
.share-btn.copy.copied { color: var(--white) !important; background: #087a4b; border-color: #087a4b; }

/* Barre de contact fixe sur mobile */
.hitop-mobile-cta { display: none; }
.hitop-mobile-cta__call, .hitop-mobile-cta__quote { color: var(--white) !important; background: var(--blue) !important; border: 1px solid var(--blue) !important; }
.hitop-mobile-cta__quote { color: var(--blue-hover) !important; background: var(--white) !important; border-color: var(--white) !important; }

/* Portfolio, médias et utilitaires conservés */
.gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gallery-grid img, .portfolio-grid img { display: block; width: 100%; height: auto; border-radius: 8px; }
.portfolio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.logos-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; }
.logos-grid img { max-width: 100%; max-height: 72px; margin: auto; object-fit: contain; }
.audio-player, audio { max-width: 100%; }
.error-page { min-height: 65vh; display: grid; place-content: center; padding: 3rem 1.25rem; text-align: center; }
.error-code { color: var(--blue); font-size: clamp(4rem, 12vw, 8rem); font-weight: 900; line-height: 1; }
.error-title { font-size: clamp(1.8rem, 5vw, 3rem); }
.error-desc { max-width: 60ch; margin: 0 auto 1.5rem; color: var(--muted); }
.confirmation { max-width: 760px; margin: 3rem auto; padding: 2rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }

/* Petites classes utilitaires réellement utilisées */
.flex { display: flex; } .flex-col { flex-direction: column; } .flex-grow { flex-grow: 1; }
.items-center { align-items: center; } .items-start { align-items: flex-start; } .justify-center { justify-content: center; }
.block { display: block; } .inline-block { display: inline-block; } .w-full { width: 100%; }
.text-left { text-align: left; } .text-white { color: var(--white) !important; } .text-gray-900 { color: var(--ink) !important; }
.text-gray-800, .text-gray-700, .text-gray-600, .text-gray-500 { color: var(--muted) !important; }
.text-red-600, .text-red-700, .text-red-500 { color: #b91c1c !important; } .text-green-600 { color: #166534 !important; }
.bg-blue-50 { background: var(--blue-soft); } .bg-red-50 { background: #fef2f2; } .bg-red-600 { color: var(--white); background: #b91c1c; }
.border { border: 1px solid var(--border); } .border-gray-300, .border-blue-200, .border-red-200 { border-color: var(--border); }
.rounded-lg { border-radius: 8px; } .rounded-xl { border-radius: var(--radius); } .rounded-2xl { border-radius: var(--radius-lg); }
.shadow-xl { box-shadow: var(--shadow-lg); } .p-3 { padding: .75rem; } .p-4 { padding: 1rem; } .p-5 { padding: 1.25rem; } .p-8 { padding: 2rem; }
.px-4 { padding-inline: 1rem; } .px-6 { padding-inline: 1.5rem; } .py-3 { padding-block: .75rem; } .py-12 { padding-block: 3rem; }
.mb-1 { margin-bottom: .25rem; } .mb-2 { margin-bottom: .5rem; } .mb-3 { margin-bottom: .75rem; } .mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; }
.mt-1 { margin-top: .25rem; } .mt-2 { margin-top: .5rem; } .mt-3 { margin-top: .75rem; } .mt-4 { margin-top: 1rem; } .mt-32 { margin-top: 2rem; } .mt-56 { margin-top: 3.5rem; }
.ml-2 { margin-left: .5rem; } .gap-3 { gap: .75rem; } .gap-4 { gap: 1rem; } .space-y-4 > * + * { margin-top: 1rem; }
.text-xs { font-size: .75rem; } .text-sm { font-size: .875rem; } .text-lg { font-size: 1.125rem; } .text-xl { font-size: 1.25rem; } .text-3xl { font-size: 1.875rem; } .text-6xl { font-size: 3.75rem; }
.font-medium { font-weight: 500; } .font-semibold { font-weight: 650; } .font-bold { font-weight: 750; } .leading-relaxed { line-height: 1.65; }
.underline { text-decoration: underline; } .w-10 { width: 2.5rem; } .h-10 { height: 2.5rem; } .w-12 { width: 3rem; } .h-12 { height: 3rem; } .flex-shrink-0 { flex-shrink: 0; }
.mb-28 { margin-bottom: 1.75rem; } .mb-64 { margin-bottom: 4rem; } .max-w-2xl { max-width: 42rem; } .min-h-screen { min-height: 100vh; }
.text-red-600, .text-red-700 { color: #b91c1c; }

/* Animations discrètes, désactivées si demandé par le système */
.fade-up { animation: fade-up .5s ease both; }
.delay-06 { animation-delay: .06s; } .delay-07 { animation-delay: .07s; } .delay-08 { animation-delay: .08s; }
.delay-12 { animation-delay: .12s; } .delay-14 { animation-delay: .14s; } .delay-16 { animation-delay: .16s; }
.delay-18 { animation-delay: .18s; } .delay-21 { animation-delay: .21s; } .delay-24 { animation-delay: .24s; }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes bounce-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
.animate-pulse { animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .65; } }
.animate-glow { animation: pulse 2s ease-in-out infinite; }
.bounce-in { animation: bounce-in .35s ease both; }
.transition, .transition-colors { transition: color .18s ease, background-color .18s ease, border-color .18s ease; }
.transform { transform: translateZ(0); } .hover\:scale-105:hover { transform: scale(1.05); }
.hover\:bg-gray-200:hover { background: #e2e8f0; } .hover\:bg-red-700:hover { background: #991b1b; color: var(--white); }
.hover\:text-red-700:hover { color: #991b1b; } .focus\:outline-none:focus { outline: none; } .focus\:ring-2:focus { box-shadow: 0 0 0 2px #64748b; } .focus\:ring-red-500:focus { box-shadow: 0 0 0 3px #b91c1c; }

@media (max-width: 1024px) {
  .container, .page-container { width: min(100% - 2rem, 1160px); }
  .nav-links, .nav-menu { gap: 0; }
  .nav-links a, .nav-menu a { padding-inline: .5rem; font-size: .86rem; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(260px, .85fr); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .container, .page-container { width: min(100% - 1.5rem, 1160px); }
  .section { padding-block: 3rem; }
  #nav { padding: .55rem 0; }
  .nav-links, .nav-menu { display: none; }
  .burger, .hamburger { display: block; }
  .hero-body { padding: 6.5rem 0 3rem; }
  .hero-grid, .problem-grid, .pg-2col, .contact-grid, .about-intro { grid-template-columns: minmax(0, 1fr); }
  .hero-grid { gap: 2rem; }
  .hero-title { max-width: 18ch; }
  .hero-stats .container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-stat-sep { display: none; }
  .problem-cards, .proof-grid, .services-grid, .testi-grid, .pricing-grid, .pcard-grid, .gallery-grid, .portfolio-grid, .formation-grid, .value-grid, .kpi-grid, .project-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-hero { padding: 6rem 0 2.5rem; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  .hitop-contact-form .form-grid { grid-template-columns: minmax(0, 1fr); }
  .hitop-contact-form .form-field--full { grid-column: auto; }
  .hitop-contact-form button[type="submit"] { width: 100%; white-space: normal; }
  .hitop-mobile-cta { position: fixed; z-index: 90; right: 0; bottom: 0; left: 0; display: flex; gap: .6rem; padding: .65rem max(.75rem, env(safe-area-inset-right)) calc(.65rem + env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left)); background: var(--white); border-top: 1px solid var(--border); box-shadow: 0 -4px 18px rgb(23 32 51 / 10%); }
  .hitop-mobile-cta > a { flex: 1; display: inline-flex; justify-content: center; align-items: center; min-height: 44px; padding: .6rem .7rem; border-radius: var(--pill); font-size: .9rem; font-weight: 800; text-align: center; text-decoration: none; }
  body { padding-bottom: 4.5rem; overflow-wrap: anywhere; }
  .service-quick-cta__actions { align-items: stretch; flex-direction: column; }
  .service-quick-cta__actions > * { text-align: center; }
}
@media (max-width: 520px) {
  .problem-cards, .proof-grid, .services-grid, .testi-grid, .pricing-grid, .pcard-grid, .gallery-grid, .portfolio-grid, .formation-grid, .value-grid, .kpi-grid, .project-steps, .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-actions, .actions, .confirmation-actions { align-items: stretch; flex-direction: column; }
  .hero-actions .btn, .actions .btn, .confirmation-actions .btn { width: 100%; white-space: normal; }
  .footer-bottom { flex-direction: column; }
  .share-btn { font-size: .85rem; }
  .page-hero { padding-top: 5.5rem; }
  .confirmation { margin: 1.5rem auto; padding: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Compatibilité des quelques composants historiques encore présents dans les pages. */
.footer-section { min-width: 0; }
.footer-content { display: grid; gap: 1.5rem; }
.footer-inline { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.footer-legal { color: #e2e8f0; font-size: .9rem; }
.pcard-over { padding: 1rem; color: var(--white); background: var(--blue-hover); }
.pcard-over a, .pcard-over a:visited { color: var(--white); }
.wp-block-post-title { color: var(--ink); }
.ci { display: flex; align-items: flex-start; gap: .75rem; }
.ci-icon { flex: 0 0 auto; color: var(--blue); }
.about-avatar { width: 7rem; height: 7rem; border-radius: 50%; object-fit: cover; }
.about-contact-btns { display: flex; flex-wrap: wrap; gap: .75rem; }
.about-story { max-width: 75ch; }
.why-visual { padding: 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.project-cta { margin-top: 1.5rem; }
.text-gray-400 { color: #475569 !important; }
.duration-200 { transition-duration: .2s; }
@media (min-width: 768px) {
  .md\\:block { display: block !important; }
  .md\\:hidden { display: none !important; }
}
@media (min-width: 640px) {
  .sm\\:flex-row { flex-direction: row !important; }
}


/* V23 — typographie plus soignée et icônes cohérentes, sans dépendance externe */
html { font-synthesis: none; text-rendering: optimizeLegibility; }
body { font-feature-settings: "kern" 1, "liga" 1; letter-spacing: .005em; }
h1, h2, h3, h4, h5, h6 { letter-spacing: -.025em; font-weight: 720; }
h1 { line-height: 1.12; }
h2 { line-height: 1.18; }
p, li { text-wrap: pretty; }
button, input, select, textarea { font-family: var(--font); }
.proof-icon, .problem-icon, .value-icon, .srv-icon, .ci-icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; color: var(--blue); line-height: 1;
}
.proof-icon, .problem-icon, .value-icon {
  width: 2.75rem; height: 2.75rem; border-radius: .85rem;
  background: var(--blue-soft); color: var(--blue-hover);
}
.proof-icon svg, .problem-icon svg, .value-icon svg, .srv-icon svg, .ci-icon svg {
  display: block; width: 1.45rem; height: 1.45rem; max-width: none;
  flex: 0 0 auto; overflow: visible;
}
.srv-icon { width: 3rem; height: 3rem; margin-bottom: .4rem; border-radius: .9rem; background: var(--blue-soft); }
.srv-icon svg { width: 1.6rem; height: 1.6rem; }
.ci-icon svg { width: 1.35rem; height: 1.35rem; }
.problem-icon { font-size: 1rem; }
.proof-card, .service-card, .srv-card, .value-card, .problem-card {
  min-width: 0;
}


/* V24 — correctifs transversaux typographie, FAQ et icônes.
   Règles explicites pour éviter les styles natifs de bouton et les héritages incohérents. */
:root {
  --font: Arial, Helvetica, sans-serif;
}
body {
  font-family: Arial, Helvetica, sans-serif;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
  letter-spacing: normal;
  text-wrap: initial;
}
h1 { letter-spacing: -.015em; }
h2 { letter-spacing: -.01em; }

/* Titres de sections : taille et retour à la ligne prévisibles. */
.section-title {
  max-width: 28ch;
  margin-inline: auto;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* FAQ : bouton entièrement stylé, sans bordure/relief natifs du navigateur. */
.faq-item { min-width: 0; }
.faq-btn,
.faq-btn:link,
.faq-btn:visited {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 3.25rem;
  margin: 0;
  padding: 1rem 1.1rem;
  border: 0;
  border-radius: 0;
  color: var(--ink) !important;
  background: var(--white) !important;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: left;
  text-decoration: none;
  text-shadow: none;
  white-space: normal;
  box-shadow: none;
}
.faq-btn:hover,
.faq-btn:focus-visible,
.faq-btn[aria-expanded="true"] {
  color: var(--blue-hover) !important;
  background: var(--surface) !important;
}
.faq-btn:focus-visible { outline-offset: -3px; }
.faq-btn .faq-ico {
  display: block;
  width: 1.25rem;
  min-width: 1.25rem;
  height: 1.25rem;
  max-width: none;
  flex: 0 0 1.25rem;
  color: var(--blue);
  stroke: currentColor;
}
.faq-body { color: var(--ink); font-size: 1rem; line-height: 1.7; }
.faq-body-inner { overflow-wrap: anywhere; }

/* SVG et icônes : taille maîtrisée, aucun étirement des pictogrammes. */
svg { flex-shrink: 0; vertical-align: middle; }
.proof-icon svg, .problem-icon svg, .value-icon svg, .srv-icon svg,
.ci-icon svg, .faq-ico, .btn svg, .button svg {
  display: block;
  width: 1.25em;
  height: 1.25em;
  max-width: none;
  flex: 0 0 auto;
}
button, input, select, textarea { font-family: Arial, Helvetica, sans-serif; }

@media (max-width: 600px) {
  .container, .page-container { width: min(100% - 2rem, 1160px); }
  .section-title { max-width: 100%; }
  .faq-btn { gap: .65rem; padding: .9rem; font-size: .98rem; }
}


/* Correctifs de sécurité pour éviter les SVG géants ou déformés */
svg { max-width: 100%; }
.btn svg, .hero-reassurance svg, .share-btn svg, .social-link svg {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
  vertical-align: -0.15em;
}
.hero-card svg, .accomp-num svg { width: 1em; height: 1em; }

/* V26 — layouts robustes : cartes de problèmes, icônes et contenus longs */
.problem-cards {
  display: grid;
  /* La colonne droite de .problem-grid est déjà limitée : les cartes doivent
     s'empiler, pas se répartir en trois colonnes trop étroites. */
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-content: start;
  min-width: 0;
}
.problem-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  min-width: 0;
  width: 100%;
  padding: clamp(1rem, 2vw, 1.35rem);
  overflow-wrap: anywhere;
}
.problem-card > div:last-child { flex: 1 1 auto; min-width: 0; }
.problem-card h3, .problem-card h4, .problem-card p {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}
.problem-card h4 { margin: 0 0 .5rem; font-size: 1rem; line-height: 1.4; }
.problem-card p { margin: 0; line-height: 1.55; }
.problem-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.75rem;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  border-radius: .75rem;
  background: var(--blue-soft);
  color: var(--blue-hover);
  font-size: 1.25rem;
}
.problem-icon svg {
  display: block;
  width: 1.35rem;
  height: 1.35rem;
  max-width: 1.35rem;
  max-height: 1.35rem;
  flex: 0 0 1.35rem;
  overflow: visible;
}
/* Même principe pour les autres grilles : les colonnes ne peuvent pas
   rétrécir au-delà de leur contenu et provoquer des débordements. */
.proof-grid, .services-grid, .testi-grid, .pricing-grid, .pcard-grid,
.gallery-grid, .logos-grid, .formation-grid, .value-grid, .kpi-grid,
.project-steps, .footer-grid { min-width: 0; }
.proof-grid > *, .services-grid > *, .testi-grid > *, .pricing-grid > *,
.pcard-grid > *, .gallery-grid > *, .logos-grid > *, .formation-grid > *,
.value-grid > *, .kpi-grid > *, .project-steps > *, .footer-grid > * { min-width: 0; }
@media (min-width: 769px) {
  .problem-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 4vw, 3.5rem); }
}
@media (max-width: 768px) {
  .problem-grid { grid-template-columns: minmax(0, 1fr); }
  .problem-cards { grid-template-columns: minmax(0, 1fr); }
}


/* V27 — garde-fous communs après audit des composants */
/* Toutes les grilles de cartes doivent respecter la largeur de leur conteneur. */
.problem-grid, .pg-2col, .contact-grid, .about-intro,
.problem-cards, .proof-grid, .services-grid, .testi-grid, .pricing-grid,
.pcard-grid, .gallery-grid, .portfolio-grid, .logos-grid, .formation-grid,
.value-grid, .kpi-grid, .project-steps, .footer-grid {
  min-width: 0;
}
.problem-grid > *, .pg-2col > *, .contact-grid > *, .about-intro > *,
.problem-cards > *, .proof-grid > *, .services-grid > *, .testi-grid > *,
.pricing-grid > *, .pcard-grid > *, .gallery-grid > *, .portfolio-grid > *,
.logos-grid > *, .formation-grid > *, .value-grid > *, .kpi-grid > *,
.project-steps > *, .footer-grid > * {
  min-width: 0;
  max-width: 100%;
}
/* Les médias et SVG ne doivent jamais élargir une carte ou une colonne. */
img, video, canvas { max-width: 100%; height: auto; }
svg { max-width: 100%; }
/* Les textes longs restent lisibles sans pousser la mise en page. */
.problem-card, .proof-card, .service-card, .srv-card, .value-card,
.price-card, .testi-card, .pcard, .about-card, .kpi-box, .project-step,
.feature-card, .card { overflow-wrap: anywhere; }
.problem-card img, .problem-card svg, .proof-card img, .proof-card svg,
.service-card img, .service-card svg, .srv-card img, .srv-card svg,
.value-card img, .value-card svg, .price-card img, .price-card svg,
.testi-card img, .testi-card svg, .pcard img, .pcard svg {
  flex-shrink: 0;
}
/* Boutons et liens d'action : pas de texte écrasé ni de dépassement. */
.btn, .faq-btn, .share-btn { max-width: 100%; overflow-wrap: anywhere; }
.btn { white-space: normal; }
@media (max-width: 768px) {
  .problem-grid, .pg-2col, .contact-grid, .about-intro {
    grid-template-columns: minmax(0, 1fr);
  }
  .problem-cards { grid-template-columns: minmax(0, 1fr); }
}