/*
Theme Name: ACS Expertise v1.2
Theme URI: https://acs-expertise.com
Author: ACS Expertise
Author URI: https://acs-expertise.com
Description: Thème officiel ACS EXPERTISE – version corrigée responsive.
Version: 1.2.0
License: GNU General Public License v2 or later
Text Domain: acs-expertise
*/

/* ============================================================
   CSS VARIABLES — Charte Graphique ACS Expertise v1.0
   ============================================================ */
:root {
   --navy: #071A3D;
   --blue: #003F87;
   --blue-light: #0B3D91;
   --blue-pale: #CFF1FF;
   --gold: #37BFFF;
   --slate: #5F6B7A;
   --white: #FFFFFF;
   --off-white: #F5F7FA;
   --gray-light: #E2E8F0;
   --text: #4A5568;
   --text-dark: #071A3D;
   --text-light: #5F6B7A;
   --font-main: 'Plus Jakarta Sans', 'DM Sans', 'Segoe UI', Aptos, sans-serif;
   --radius: 6px;
   --radius-lg: 12px;
   --shadow: 0 4px 24px rgba(34, 46, 90, 0.10);
   --shadow-lg: 0 12px 40px rgba(34, 46, 90, 0.16);
   --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   --max-width: 1140px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0
}

/* FIX: empêche le scroll horizontal sur mobile */
html {
   font-size: 16px;
   scroll-behavior: smooth;
   overflow-x: hidden
}

body {
   font-family: var(--font-main);
   color: var(--text);
   background: var(--white);
   line-height: 1.7;
   -webkit-font-smoothing: antialiased;
   overflow-x: hidden
}

img {
   max-width: 100%;
   height: auto;
   display: block
}

a {
   color: var(--blue);
   text-decoration: none;
   transition: var(--transition)
}

a:hover {
   color: var(--navy)
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
   outline: 3px solid rgba(226, 232, 240, .55);
   outline-offset: 3px;
}

ul,
ol {
   padding-left: 1.25rem
}

p {
   margin-bottom: 1rem
}

p:last-child {
   margin-bottom: 0
}

.container {
   max-width: var(--max-width);
   margin: 0 auto;
   padding: 0 1.5rem
}


.about-vision-wrap {
   display: grid;
   grid-template-columns: minmax(0, .95fr) minmax(360px, 1.35fr);
   gap: clamp(2.5rem, 5vw, 5.5rem);
   align-items: center;
}

.about-vision-copy {
   max-width: 600px;
}

.about-vision-image {
   background: var(--off-white);
   border-radius: var(--radius-lg);
   padding: 0;
   box-shadow: 0 22px 60px rgba(34, 46, 90, .18);
   overflow: hidden;
   min-height: clamp(420px, 44vw, 620px);
   position: relative;
   isolation: isolate;
   transform: translateZ(0);
}

.about-vision-image::after {
   content: '';
   position: absolute;
   inset: auto 0 0;
   height: 34%;
   background: linear-gradient(180deg, rgba(34, 46, 90, 0), rgba(34, 46, 90, .18));
   pointer-events: none;
}

.about-vision-image img {
   width: 100%;
   height: 100%;
   min-height: inherit;
   display: block;
   border-radius: var(--radius-lg);
   object-fit: cover;
   object-position: center;
   transition: transform .7s ease;
}

.about-vision-image:hover img {
   transform: scale(1.035);
}

.vision-point {
   padding: .35rem 0;
   border-radius: var(--radius);
   transition: transform .25s ease, background .25s ease, padding .25s ease;
}

.vision-point:hover {
   transform: translateX(6px);
   background: rgba(235, 240, 250, .75);
   padding-left: .65rem;
}

@media (max-width: 768px) {
   .about-vision-wrap {
      grid-template-columns: 1fr;
      gap: 2rem;
   }

   .about-vision-image {
      min-height: clamp(280px, 72vw, 430px);
   }
}


/* TYPOGRAPHY */
h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: var(--font-main);
   color: var(--navy);
   line-height: 1.2
}

h1 {
   font-size: clamp(1.6rem, 5vw, 2.75rem);
   font-weight: 700
}

.hero h1 {
   font-size: clamp(2rem, 5.5vw, 3.5rem)
}

.hero-services-panel {
   position: relative;
   max-width: 940px;
   margin-top: clamp(1.6rem, 3vw, 2.4rem);
   padding: 1.5rem 1.15rem 1.15rem;
   border: 1px solid rgba(34, 46, 90, .4);
   border-radius: var(--radius-lg);
   background: var(--gold);
   box-shadow: 0 22px 54px rgba(6, 14, 40, .14);
   backdrop-filter: blur(10px);
}

.hero-services-label {
   position: absolute;
   top: 0;
   left: 1.15rem;
   transform: translateY(-50%);
   display: inline-flex;
   align-items: center;
   min-height: 30px;
   padding: .35rem 1rem;
   border-radius: 999px;
   background: var(--navy);
   color: var(--gold);
   font-size: .72rem;
   font-weight: 800;
   letter-spacing: .08em;
   text-transform: uppercase;
   box-shadow: 0 12px 22px rgba(6, 14, 40, .24);
}

.hero-services-grid {
   display: grid;
   grid-template-columns: repeat(6, minmax(0, 1fr));
   gap: .75rem;
}

.hero-service-card {
   display: flex;
   flex-direction: column;
   align-items: center;
   min-width: 0;
   min-height: 150px;
   padding: .95rem .65rem;
   border-right: 1px solid rgba(34, 46, 90, .15);
   color: var(--navy);
   text-align: center;
   transition: transform .28s ease, background .28s ease, box-shadow .28s ease;
}

.hero-service-card:last-child {
   border-right: 0;
}

.hero-service-card svg {
   width: 31px;
   height: 31px;
   margin-bottom: .65rem;
   fill: var(--navy);
   filter: drop-shadow(0 4px 6px rgba(34, 46, 90, .15));
}

.hero-service-card span {
   display: block;
   margin-bottom: .35rem;
   color: var(--navy);
   font-size: .74rem;
   font-weight: 800;
   line-height: 1.25;
   text-transform: uppercase;
}

.hero-service-card small {
   display: block;
   color: rgba(34, 46, 90, .78);
   font-size: .68rem;
   line-height: 1.35;
}

.hero-service-card:hover {
   transform: translateY(-5px);
   background: rgba(34, 46, 90, .05);
   color: var(--navy);
   box-shadow: 0 16px 34px rgba(34, 46, 90, .12);
}

h2 {
   font-size: clamp(1.2rem, 3.5vw, 2rem);
   font-weight: 600
}

h3 {
   font-size: clamp(0.95rem, 2.5vw, 1.25rem);
   font-weight: 500
}

h4 {
   font-size: 1rem;
   font-weight: 600
}

body,
p,
li {
   font-size: 0.88rem;
   font-weight: 400
}

.section-label,
.mention {
   display: inline-block;
   font-size: 0.68rem;
   font-weight: 600;
   letter-spacing: 0.18em;
   text-transform: uppercase;
   color: var(--blue);
   margin-bottom: 0.75rem
}

.slogan {
   font-size: 0.88rem;
   font-style: italic;
   color: var(--text-light)
}

.section-title {
   font-family: var(--font-main);
   color: var(--navy);
   margin-bottom: 1rem
}

.section-subtitle {
   font-size: 0.88rem;
   color: var(--text-light);
   max-width: 600px;
   line-height: 1.8
}

/* ============================================================
   BUTTONS
   FIX: min-height 44px pour touch targets accessibles sur mobile
   ============================================================ */
.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: .5rem;
   padding: .85rem 2rem;
   min-height: 44px;
   border-radius: var(--radius);
   font-family: var(--font-main);
   font-size: .85rem;
   font-weight: 600;
   letter-spacing: .03em;
   cursor: pointer;
   border: 2px solid transparent;
   transition: var(--transition);
   text-decoration: none;
   white-space: nowrap
}

.btn-primary {
   background: var(--white);
   color: var(--navy);
   border-color: var(--gold)
}

.btn-primary:hover {
   background: #CBD5E1;
   border-color: #CBD5E1;
   color: var(--navy);
   transform: translateY(-2px);
   box-shadow: 0 8px 24px rgba(226, 232, 240, .35)
}

.btn .btn-primary {
   background: white
}

.btn-outline {
   background: transparent;
   color: var(--white);
   border-color: rgba(255, 255, 255, .7)
}

.btn-outline:hover {
   background: var(--white);
   color: var(--navy);
   border-color: var(--white)
}

.btn-outline-blue {
   background: transparent;
   color: var(--blue);
   border-color: var(--blue)
}

.btn-outline-blue:hover {
   background: var(--blue);
   color: var(--white)
}

.btn-navy {
   background: var(--navy);
   color: var(--white);
   border-color: var(--navy)
}

.btn-navy:hover {
   background: var(--blue);
   border-color: var(--blue);
   transform: translateY(-2px)
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1000;
   background: rgba(34, 46, 90, .97);
   backdrop-filter: blur(12px);
   border-bottom: 1px solid rgba(255, 255, 255, .08);
   transition: var(--transition)
}

.site-header.scrolled {
   box-shadow: 0 4px 30px rgba(34, 46, 90, .30)
}

.header-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 72px
}

.site-logo {
   display: flex;
   align-items: center;
   gap: .75rem;
   text-decoration: none;
   flex-shrink: 0
}

.logo-icon {
   width: 100px;
   height: 45px;
   background: white;
   border-radius: var(--radius);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0
}

.logo-icon svg {
   width: 22px;
   height: 22px;
   fill: var(--navy)
}

.logo-text {
   line-height: 1.1
}

.logo-text .brand {
   display: block;
   font-size: 1.05rem;
   font-weight: 700;
   color: white;
   letter-spacing: .04em
}

.logo-text .tagline {
   display: block;
   font-size: .58rem;
   font-weight: 400;
   color: rgba(255, 255, 255, .45);
   letter-spacing: .14em;
   text-transform: uppercase
}

.main-nav {
   display: flex;
   align-items: center;
   gap: .25rem
}

.main-nav a {
   font-size: .83rem;
   font-weight: 500;
   color: rgba(255, 255, 255, .8);
   padding: .5rem .9rem;
   min-height: 44px;
   display: flex;
   align-items: center;
   border-radius: var(--radius);
   transition: var(--transition)
}

.main-nav a:hover,
.main-nav a.active {
   color: var(--white);
   background: rgba(255, 255, 255, .08)
}

.nav-cta {
   margin-left: .75rem;
   background: var(--white) !important;
   color: var(--navy) !important;
   font-weight: 700 !important;
   padding: .5rem 1.2rem !important;
   border-radius: var(--radius) !important
}

.nav-cta:hover {
   background: #CBD5E1 !important
}

/* FIX: hamburger avec touch target 44×44 */
.hamburger {
   display: none;
   flex-direction: column;
   gap: 5px;
   cursor: pointer;
   padding: 10px;
   background: none;
   border: none;
   min-width: 44px;
   min-height: 44px;
   align-items: center;
   justify-content: center
}

.hamburger span {
   display: block;
   width: 24px;
   height: 2px;
   background: white;
   border-radius: 2px;
   transition: var(--transition)
}

/* Hamburger actif → croix */
.hamburger.open span:nth-child(1) {
   transform: translateY(7px) rotate(45deg)
}

.hamburger.open span:nth-child(2) {
   opacity: 0;
   transform: scaleX(0)
}

.hamburger.open span:nth-child(3) {
   transform: translateY(-7px) rotate(-45deg)
}

/* MOBILE NAV */
.mobile-nav {
   display: none;
   position: fixed;
   top: 72px;
   left: 0;
   right: 0;
   bottom: 0;
   background: var(--navy);
   z-index: 999;
   padding: 2rem 1.5rem;
   flex-direction: column;
   gap: .5rem;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch
}

.mobile-nav.open {
   display: flex
}

.mobile-nav a {
   font-size: 1.05rem;
   font-weight: 500;
   color: rgba(255, 255, 255, .85);
   padding: 1rem 1.2rem;
   min-height: 48px;
   display: flex;
   align-items: center;
   border-radius: var(--radius);
   border-bottom: 1px solid rgba(255, 255, 255, .07)
}

.mobile-nav a:hover {
   background: rgba(255, 255, 255, .06);
   color: white
}

.mobile-nav a.btn-primary {
   margin-top: 1rem;
   justify-content: center;
   color: var(--navy)
}

.mobile-nav a.btn-primary:hover {
   color: white
}


/* ── FAQ TABS ─────────────────────────────────────────── */
.faq-tabs {
   display: flex;
   gap: .5rem;
   margin-bottom: 2rem;
   background: white;
   border: 1px solid var(--gray-light);
   border-radius: var(--radius-lg);
   padding: .4rem;
}

.faq-tab {
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: .45rem;
   padding: .75rem 1rem;
   border: none;
   border-radius: var(--radius);
   background: transparent;
   font-family: var(--font-main);
   font-size: .8rem;
   font-weight: 600;
   color: var(--text-light);
   cursor: pointer;
   transition: var(--transition);
}

.faq-tab svg {
   width: 16px;
   height: 16px;
   fill: currentColor;
   flex-shrink: 0;
}

.faq-tab:hover {
   background: var(--off-white);
   color: var(--navy);
}

.faq-tab.active {
   background: var(--navy);
   color: var(--white);
}

.faq-tab.active svg {
   fill: var(--gold);
}

/* Panels */
.faq-panel {
   display: none;
}

.faq-panel.active {
   display: block;
}

/* Mobile : onglets empilés */
@media (max-width: 600px) {
   .faq-tabs {
      flex-direction: column;
   }

   .faq-tab {
      justify-content: flex-start;
   }
}


/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
   background: var(--navy);
   color: rgba(255, 255, 255, .7);
   padding: 4rem 0 0
}

.footer-grid {
   display: grid;
   grid-template-columns: 1.5fr 1fr 1fr;
   gap: 3rem;
   padding-bottom: 3rem;
   border-bottom: 1px solid rgba(255, 255, 255, .1)
}

.footer-brand .brand {
   color: white;
   font-size: 1.15rem
}

.footer-brand p {
   font-size: .83rem;
   line-height: 1.8;
   margin-top: 1rem;
   color: rgba(255, 255, 255, .5)
}

.footer-slogan {
   font-size: .82rem;
   font-style: italic;
   color: var(--gold);
   margin-top: .5rem !important
}

.footer-col h4 {
   font-size: .65rem;
   font-weight: 600;
   letter-spacing: .16em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .38);
   margin-bottom: 1.25rem
}

.footer-col ul {
   list-style: none;
   padding: 0
}

.footer-col ul li {
   margin-bottom: .6rem
}

.footer-col ul li a {
   font-size: .83rem;
   color: rgba(255, 255, 255, .62);
   transition: var(--transition)
}

.footer-col ul li a:hover {
   color: white;
   padding-left: 4px
}

.footer-contact-item {
   display: flex;
   gap: .75rem;
   margin-bottom: .9rem;
   font-size: .83rem;
   color: rgba(255, 255, 255, .62)
}

.footer-contact-item svg {
   flex-shrink: 0;
   width: 15px;
   height: 15px;
   margin-top: 3px;
   fill: var(--gold)
}

.footer-contact-item svg.whatsapp-icon,
.contact-info-icon .whatsapp-icon {
   fill: #25D366;
}

.footer-contact-item a {
   color: rgba(255, 255, 255, .62)
}

.footer-bottom {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 1.5rem 0;
   font-size: .76rem;
   color: rgba(255, 255, 255, .32)
}


/* ============================================================
   SECTION SPACING
   FIX: padding réduit sur mobile via clamp
   ============================================================ */
.section {
   padding: clamp(3rem, 6vw, 5rem) 0
}

.section-lg {
   padding: clamp(4rem, 8vw, 7rem) 0
}

.section-sm {
   padding: clamp(2rem, 4vw, 3rem) 0
}

.section-header {
   margin-bottom: clamp(2rem, 4vw, 3.5rem)
}

.section-header.centered {
   text-align: center
}

.section-header.centered .section-subtitle {
   margin: 0 auto
}

/* ============================================================
   PAGE HERO
   FIX: padding réduit sur mobile
   ============================================================ */
.page-hero {
   background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
   padding: clamp(5rem, 10vw, 8rem) 0 clamp(2.5rem, 5vw, 4rem);
   margin-top: 72px;
   position: relative;
   overflow: hidden
}

.page-hero::before {
   content: '';
   position: absolute;
   top: 0;
   right: -10%;
   width: 50%;
   height: 100%;
   background: url("data:image/svg+xml,%3Csvg width='600' height='400' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='300' cy='200' r='300' fill='none' stroke='rgba(255,255,255,0.04)' stroke-width='80'/%3E%3C/svg%3E") center/cover no-repeat;
   animation: floatSoft 9s ease-in-out infinite
}

.page-hero .container {
   position: relative
}

.page-hero-label {
   font-size: .75rem;
   font-weight: 600;
   letter-spacing: .18em;
   text-transform: uppercase;
   color: var(--gold);
   margin-bottom: .75rem
}

/* TEXTE PLUS GRAND + PLEINE LARGEUR */
.page-hero h1 {
   color: white;
   max-width: 100%;
   font-size: clamp(2rem, 5vw, 3.5rem);
   line-height: 1.08
}

.page-hero p {
   color: rgba(255, 255, 255, .7);
   font-size: clamp(.95rem, 1.5vw, 1.15rem);
   max-width: 100%;
   margin-top: 1.25rem;
   line-height: 1.8
}

/* DIVIDERS */
.divider-line {
   width: 48px;
   height: 3px;
   background: var(--gold);
   border-radius: 2px;
   margin: 1rem 0 1.5rem
}

.centered .divider-line {
   margin: 1rem auto 1.5rem
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
   background: white;
   border-radius: var(--radius-lg);
   border: 1px solid var(--gray-light);
   padding: 2rem;
   transition: var(--transition)
}

.card:hover {
   border-color: var(--blue);
   box-shadow: var(--shadow-lg);
   transform: translateY(-6px)
}

.service-card {
   display: flex;
   flex-direction: column;
}

/* SERVICE CARD */
.service-icon {
   width: 50px;
   height: 50px;
   background: var(--blue-pale);
   border-radius: var(--radius-lg);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 1.25rem;
   transition: var(--transition)
}

.service-icon svg {
   width: 22px;
   height: 22px;
   fill: var(--blue);
   transition: var(--transition)
}

.card:hover .service-icon {
   background: var(--navy)
}

.card:hover .service-icon svg {
   fill: var(--gold)
}

.service-card h3 {
   font-size: 1rem;
   margin-bottom: .6rem;
   color: var(--navy)
}

.service-card p {
   font-size: .83rem;
   color: var(--text-light);
   line-height: 1.75
}

.service-card .read-more {
   display: inline-flex;
   align-items: center;
   gap: .4rem;
   font-size: .78rem;
   font-weight: 600;
   color: var(--blue);
   margin-top: 1rem;
   transition: var(--transition);
   background: transparent;
   border: 0;
   cursor: pointer;
   padding: 0;
   font-family: var(--font-main)
}

.service-card .read-more:hover {
   gap: .7rem;
   color: var(--navy)
}

.service-card .read-more svg {
   width: 13px;
   height: 13px;
   transition: transform .25s ease
}

.service-card.open .read-more svg {
   transform: rotate(90deg)
}

.service-card-extra {
   max-height: 0;
   overflow: hidden;
   opacity: 0;
   transition: max-height .3s ease, opacity .25s ease, margin-top .25s ease;
   margin-top: 0
}

.service-card.open .service-card-extra {
   max-height: 220px;
   opacity: 1;
   margin-top: .9rem
}

.service-card-extra ul {
   display: flex;
   flex-direction: column;
   gap: .35rem;
   margin: 0;
   padding-left: 1rem
}

.service-card-extra li {
   color: var(--text-light);
   font-size: .82rem;
   line-height: 1.65
}

/* VALUE CARD
   FIX: flex-wrap pour éviter le débordement sur très petit écran */
.value-card {
   display: flex;
   flex-wrap: wrap;
   gap: 1.25rem;
   padding: 1.75rem;
   background: white;
   border-radius: var(--radius-lg);
   border: 1px solid var(--gray-light);
   transition: var(--transition)
}

.value-card:hover {
   border-color: var(--blue);
   box-shadow: var(--shadow)
}

.value-num {
   font-size: 1.8rem;
   font-weight: 700;
   color: var(--gold);
   line-height: 1;
   flex-shrink: 0;
   width: 42px
}

.value-card h4 {
   font-size: .92rem;
   margin-bottom: .35rem
}

.value-card p {
   font-size: .8rem;
   color: var(--text-light)
}

/* STATS BAR */
.stats-bar {
   background: var(--navy);
   padding: clamp(2rem, 4vw, 3rem) 0
}

.stats-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1rem;
   text-align: center
}

.stat-item {
   padding: 1rem
}

.stat-number {
   font-size: clamp(1.8rem, 4vw, 2.5rem);
   font-weight: 700;
   color: var(--gold);
   line-height: 1
}

.stat-label {
   font-size: .76rem;
   color: rgba(255, 255, 255, .48);
   margin-top: .4rem;
   letter-spacing: .05em
}

/* TEAM CARD */
.team-card {
   text-align: center;
   padding: 2.5rem 2rem;
   background: white;
   border-radius: var(--radius-lg);
   border: 1px solid var(--gray-light);
   transition: var(--transition)
}

.team-card:hover {
   border-color: var(--blue);
   box-shadow: var(--shadow);
   transform: translateY(-3px)
}

.team-avatar {
   width: 72px;
   height: 72px;
   background: linear-gradient(135deg, var(--navy), var(--blue));
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 1.25rem;
   font-size: 1.4rem;
   font-weight: 700;
   color: var(--gold);
   border: 3px solid var(--gold)
}

.team-card h3 {
   font-size: 1rem;
   margin-bottom: .25rem
}

.team-card .role {
   font-size: .72rem;
   color: var(--gold);
   font-weight: 600;
   letter-spacing: .08em;
   text-transform: uppercase
}

.team-card p {
   font-size: .82rem;
   color: var(--text-light);
   margin-top: .75rem;
   line-height: 1.7
}

.team-expertise {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: .4rem;
   margin-top: .9rem
}

.expertise-tag {
   font-size: .68rem;
   font-weight: 600;
   color: var(--blue);
   background: var(--blue-pale);
   padding: .25rem .7rem;
   border-radius: 20px
}

/* ============================================================
   CONTACT FORM
   ============================================================ */
.contact-form {
   display: flex;
   flex-direction: column;
   gap: 1.25rem
}

#contact-form {
   scroll-margin-top: 96px
}

.form-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1.25rem
}

.form-group {
   display: flex;
   flex-direction: column;
   gap: .4rem
}

.form-group label {
   font-size: .78rem;
   font-weight: 600;
   color: var(--text-dark);
   letter-spacing: .02em
}

.form-group input,
.form-group select,
.form-group textarea {
   padding: .85rem 1rem;
   border: 1.5px solid var(--gray-light);
   border-radius: var(--radius);
   font-family: var(--font-main);
   font-size: .88rem;
   color: var(--text);
   background: var(--off-white);
   transition: var(--transition);
   outline: none;
   width: 100%;
   /* FIX: empêche le zoom iOS sur focus (font-size >= 16px) */
   font-size: max(16px, .88rem)
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
   border-color: var(--blue);
   background: white;
   box-shadow: 0 0 0 3px rgba(46, 64, 128, .08)
}

.form-group textarea {
   resize: vertical;
   min-height: 130px
}

/* CONTACT INFO CARD
   FIX: flex-wrap pour éviter le débordement */
.contact-info-card {
   display: flex;
   flex-wrap: wrap;
   gap: 1.25rem;
   align-items: flex-start;
   padding: 1.5rem;
   background: var(--off-white);
   border-radius: var(--radius-lg);
   border: 1px solid var(--gray-light);
   margin-bottom: 1rem
}

.contact-info-icon {
   width: 44px;
   height: 44px;
   background: var(--navy);
   border-radius: var(--radius);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0
}

.contact-info-icon svg {
   width: 20px;
   height: 20px;
   fill: var(--gold)
}

.contact-info-text {
   flex: 1;
   min-width: 0
}

.contact-info-text h4 {
   font-size: .7rem;
   text-transform: uppercase;
   letter-spacing: .1em;
   color: var(--slate);
   font-weight: 600;
   margin-bottom: .3rem
}

.contact-info-text p,
.contact-info-text a {
   font-size: .88rem;
   color: var(--navy);
   font-weight: 500;
   word-break: break-word
}

/* CTA SECTION */
.cta-section {
   background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
   padding: clamp(3rem, 6vw, 5rem) 0;
   text-align: center;
   position: relative;
   overflow: hidden
}

.cta-section::before {
   content: '';
   position: absolute;
   inset: 0;
   background: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='40' fill='none' stroke='rgba(255,255,255,0.03)' stroke-width='1'/%3E%3C/svg%3E") repeat;
   background-size: 80px;
   animation: gridDrift 20s linear infinite
}

.cta-section::after {
   content: '';
   position: absolute;
   left: 15%;
   right: 15%;
   bottom: 0;
   height: 1px;
   background: linear-gradient(90deg, transparent, rgba(226, 232, 240, .85), transparent);
   animation: sweepLine 4.8s ease-in-out infinite
}

.cta-section .container {
   position: relative
}

.cta-section h2 {
   color: white;
   max-width: 640px;
   margin: 0 auto 1rem
}

.cta-section p {
   color: rgba(255, 255, 255, .75);
   font-size: .95rem;
   max-width: 520px;
   margin: 0 auto 2rem
}

.cta-buttons {
   display: flex;
   gap: 1rem;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap
}

.services-intro-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 1rem;
}

.services-intro-row .btn {
   margin-left: auto;
   margin-right: auto;
}

.service-card .btn {
   align-self: center;
   margin-left: auto;
   margin-right: auto;
}

/* BREADCRUMB */
.breadcrumb {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: .5rem;
   font-size: .76rem;
   color: rgba(255, 255, 255, .5);
   margin-bottom: 1.5rem
}

.breadcrumb a {
   color: rgba(255, 255, 255, .6)
}

.breadcrumb a:hover {
   color: white
}

.breadcrumb span {
   color: rgba(255, 255, 255, .35)
}

.breadcrumb .current {
   color: var(--gold)
}

/* ACCORDION */
.accordion-item {
   border: 1px solid var(--gray-light);
   border-radius: var(--radius);
   overflow: hidden;
   margin-bottom: .75rem
}

.accordion-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 1.25rem 1.5rem;
   min-height: 56px;
   cursor: pointer;
   background: white;
   transition: var(--transition);
   user-select: none
}

.accordion-header:hover {
   background: var(--off-white)
}

.accordion-header h4 {
   font-size: .9rem;
   color: var(--navy)
}

.accordion-header .chevron {
   width: 20px;
   height: 20px;
   fill: var(--slate);
   transition: transform .3s;
   flex-shrink: 0
}

.accordion-item.open .chevron {
   transform: rotate(180deg)
}

.accordion-body {
   max-height: 0;
   overflow: hidden;
   transition: max-height .35s ease, padding .35s;
   padding: 0 1.5rem;
   font-size: .85rem;
   color: var(--text-light);
   line-height: 1.8
}

.accordion-item.open .accordion-body {
   max-height: 600px;
   padding: 1rem 1.5rem 1.5rem
}

/* ============================================================
   GRIDS – Desktop
   ============================================================ */
.grid-2 {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 2rem
}

.grid-3 {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 2rem
}

.grid-4 {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1.5rem
}

/* ============================================================
   HOMEPAGE HERO
   FIX: utilise 100svh (small viewport height) pour iOS Safari
        et fallback 100vh
   ============================================================ */
.hero {
   min-height: 100vh;
   min-height: 100svh;
   background:
      radial-gradient(circle at 18% 25%, rgba(226, 232, 240, .20) 0, rgba(226, 232, 240, 0) 32%),
      linear-gradient(150deg, rgba(10, 15, 40, 0.75) 0%, rgba(26, 35, 80, 0.65) 55%, rgba(0, 80, 200, 0.55) 100%),
      url('https://acs-expertise.com/wp-content/uploads/2026/05/pexels-mikhail-nilov-9301297-scaled.jpg') center/cover no-repeat;
   display: flex;
   align-items: center;
   position: relative;
   overflow: hidden;
   margin-top: 0;
   padding-top: 72px
}

.hero-grid-bg {
   position: absolute;
   inset: 0;
   background-image: linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
   background-size: 64px 64px;
   mask-image: linear-gradient(90deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, .18));
   pointer-events: none;
   animation: gridDrift 18s linear infinite
}

.hero-content {
   position: relative;
   z-index: 2;
   max-width: 980px;
   padding: clamp(3rem, 8vw, 5rem) 0
}

.hero-badge {
   display: inline-flex;
   align-items: center;
   gap: .5rem;
   padding: .4rem 1rem;
   background: rgba(226, 232, 240, .15);
   border: 1px solid rgba(226, 232, 240, .35);
   border-radius: 30px;
   font-size: .75rem;
   font-weight: 600;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: var(--gold);
   margin-bottom: 1.5rem;
   /* FIX: ne déborde plus sur petit écran */
   flex-wrap: wrap;
   max-width: 100%
}

.hero-badge-dot {
   width: 6px;
   height: 6px;
   background: var(--gold);
   border-radius: 50%;
   flex-shrink: 0
}

.hero h1 {
   color: white;
   line-height: 1.12;
   margin-bottom: .75rem
}

.hero h1 em {
   color: var(--gold);
   font-style: italic
}

.hero-slogan {
   font-size: 1.15rem;
   font-style: italic;
   color: rgba(255, 255, 255, .55);
   margin-bottom: .75rem
}

.hero-tagline {
   display: block;
   font-size: .85rem;
   font-weight: 600;
   letter-spacing: .16em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .35);
   margin-bottom: 1.75rem
}

.hero-text {
   font-size: 1.05rem;
   color: rgba(255, 255, 255, .7);
   max-width: 720px;
   margin-bottom: 2.5rem;
   line-height: 1.8
}

.hero-actions {
   display: flex;
   gap: 1rem;
   flex-wrap: wrap
}

.hero-scroll {
   position: absolute;
   bottom: 2rem;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: .5rem;
   color: rgba(255, 255, 255, .3);
   font-size: .65rem;
   letter-spacing: .1em;
   text-transform: uppercase;
   animation: bounce 2s ease-in-out infinite
}

.hero-scroll svg {
   width: 18px;
   height: 18px;
   fill: currentColor
}

@keyframes bounce {

   0%,
   100% {
      transform: translateX(-50%) translateY(0)
   }

   50% {
      transform: translateX(-50%) translateY(6px)
   }
}

@keyframes gridDrift {
   from {
      background-position: 0 0, 0 0;
   }

   to {
      background-position: 64px 64px, 64px 64px;
   }
}

@keyframes slowPulse {

   0%,
   100% {
      transform: scale(1);
      opacity: .75;
   }

   50% {
      transform: scale(1.08);
      opacity: .35;
   }
}

@keyframes floatSoft {

   0%,
   100% {
      transform: translate3d(0, 0, 0);
   }

   50% {
      transform: translate3d(0, -18px, 0);
   }
}

@keyframes sweepLine {
   from {
      transform: translateX(-120%);
   }

   to {
      transform: translateX(120%);
   }
}

/* FEATURES STRIP
   FIX: gap réduit + wrap mieux géré */
.features-strip {
   background: linear-gradient(180deg, #fff 0%, var(--off-white) 100%);
   border-top: 1px solid var(--gray-light);
   border-bottom: 1px solid var(--gray-light);
   padding: 2rem 0;
   position: relative;
   overflow: hidden
}

.features-strip::after {
   content: '';
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   height: 1px;
   background: linear-gradient(90deg, transparent, rgba(226, 232, 240, .75), transparent);
   animation: sweepLine 5.5s ease-in-out infinite;
}

.features-list {
   display: flex;
   flex-wrap: wrap;
   gap: 1rem 1.5rem;
   align-items: center;
   justify-content: center
}

.feature-item {
   display: flex;
   align-items: center;
   gap: .65rem;
   font-size: .83rem;
   font-weight: 500;
   color: var(--navy);
   padding: .55rem .75rem;
   border-radius: var(--radius);
   transition: transform .25s ease, background .25s ease, box-shadow .25s ease
}

.feature-item:hover {
   background: white;
   box-shadow: var(--shadow);
   transform: translateY(-2px)
}

.feature-item svg {
   width: 17px;
   height: 17px;
   fill: var(--gold);
   flex-shrink: 0
}

/* WHY US */
.why-us-section {
   position: relative;
   overflow: hidden;
}

.why-us-section::before {
   content: '';
   position: absolute;
   inset: 8% auto auto -120px;
   width: 260px;
   height: 260px;
   border: 1px solid rgba(226, 232, 240, .22);
   border-radius: 50%;
   pointer-events: none;
   animation: slowPulse 6s ease-in-out infinite;
}

.why-us-section::after {
   content: '';
   position: absolute;
   right: -80px;
   bottom: 12%;
   width: 180px;
   height: 180px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(46, 64, 128, .10), rgba(46, 64, 128, 0) 68%);
   pointer-events: none;
   animation: floatSoft 8s ease-in-out infinite;
}

.why-us-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 4rem;
   align-items: center
}

.why-us-image {
   position: relative;
   border-radius: var(--radius-lg);
   overflow: hidden;
   box-shadow: 0 22px 60px rgba(34, 46, 90, .18);
   width: 100%;
   min-height: clamp(360px, 38vw, 520px);
   display: block;
   object-fit: cover;
   object-position: center;
   transition: transform .75s ease, box-shadow .35s ease, filter .35s ease;
}

.why-us-image:hover {
   transform: translateY(-4px) scale(1.015);
   filter: saturate(1.04) contrast(1.02);
   box-shadow: 0 28px 70px rgba(34, 46, 90, .22);
}

.why-us-visual {
   background: linear-gradient(135deg, var(--navy), var(--blue));
   border-radius: var(--radius-lg);
   padding: 3rem;
   display: flex;
   flex-direction: column;
   gap: 1.5rem
}

.why-us-stat-card {
   background: rgba(255, 255, 255, .07);
   border: 1px solid rgba(255, 255, 255, .12);
   border-radius: var(--radius);
   padding: 1.25rem 1.5rem
}

.why-us-stat-card .num {
   font-size: 1.9rem;
   font-weight: 700;
   color: var(--gold);
   line-height: 1
}

.why-us-stat-card .lbl {
   font-size: .78rem;
   color: rgba(255, 255, 255, .55);
   margin-top: .25rem
}

.why-list {
   list-style: none;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 1rem
}

.why-list li {
   display: flex;
   gap: 1rem;
   align-items: flex-start;
   padding: 1.25rem;
   border-radius: var(--radius);
   background: var(--off-white);
   border: 1px solid var(--gray-light);
   font-size: .85rem;
   color: var(--text-light);
   transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease
}

.why-list li:hover {
   transform: translateX(6px);
   border-color: rgba(46, 64, 128, .22);
   box-shadow: var(--shadow)
}

.why-list li svg {
   width: 17px;
   height: 17px;
   fill: var(--gold);
   flex-shrink: 0;
   margin-top: 2px
}

.why-list li strong {
   display: block;
   font-size: .88rem;
   color: var(--navy);
   margin-bottom: .2rem
}

/* PROCESS STEPS */
.process-step {
   display: flex;
   gap: 1.5rem;
   align-items: flex-start;
   margin-bottom: 2rem
}

.step-num {
   width: 42px;
   height: 42px;
   background: var(--navy);
   color: var(--gold);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.1rem;
   font-weight: 700;
   flex-shrink: 0;
   border: 2px solid var(--gold)
}

.step-content h4 {
   margin-bottom: .3rem;
   font-size: .92rem
}

.step-content p {
   font-size: .83rem;
   color: var(--text-light)
}

/* MAP */
.map-placeholder {
   background: transparent;
   border-radius: var(--radius-lg);
   height: 80px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   border: 2px dashed transparent;
   color: transparent;
   gap: .75rem;
   text-align: center;
   padding: 2rem
}

.map-placeholder svg {
   width: 36px;
   height: 36px;
   fill: var(--blue);
   opacity: .5
}

.map-placeholder p {
   font-size: .8rem;
   opacity: .7
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeUp {
   from {
      opacity: 0;
      transform: translateY(20px)
   }

   to {
      opacity: 1;
      transform: translateY(0)
   }
}

.fade-up {
   animation: fadeUp .6s ease forwards
}

.fade-up-delay-1 {
   animation-delay: .1s;
   opacity: 0
}

.fade-up-delay-2 {
   animation-delay: .2s;
   opacity: 0
}

.fade-up-delay-3 {
   animation-delay: .3s;
   opacity: 0
}

/* ============================================================
   RESPONSIVE — TABLETTE LARGE (≤ 1024px)
   ============================================================ */
@media(max-width:1024px) {
   .footer-grid {
      grid-template-columns: 1fr 1fr
   }

   .footer-brand {
      grid-column: 1/-1
   }

   .why-us-grid {
      gap: 2.5rem
   }

   .grid-4 {
      grid-template-columns: repeat(2, 1fr)
   }
}

/* ============================================================
   RESPONSIVE — TABLETTE (≤ 900px)
   FIX: nouveau breakpoint intermédiaire
   ============================================================ */
@media(max-width:900px) {
   .grid-3 {
      grid-template-columns: repeat(2, 1fr)
   }

   .stats-grid {
      grid-template-columns: repeat(2, 1fr)
   }

   .why-us-grid {
      grid-template-columns: 1fr;
      gap: 2rem
   }

   .why-us-visual {
      padding: 2rem
   }

   .hero-text {
      max-width: 100%
   }
}

/* ============================================================
   RESPONSIVE — MOBILE (≤ 768px)
   ============================================================ */
@media(max-width:768px) {

   /* Navigation */
   .main-nav {
      display: none
   }

   .hamburger {
      display: flex
   }

   /* Grilles → 1 colonne */
   .grid-2,
   .grid-3,
   .grid-4 {
      grid-template-columns: 1fr
   }

   .form-row {
      grid-template-columns: 1fr
   }

   .stats-grid {
      grid-template-columns: repeat(2, 1fr)
   }

   /* Footer */
   .footer-grid {
      grid-template-columns: 1fr;
      gap: 2rem
   }

   .footer-bottom {
      flex-direction: column;
      gap: .5rem;
      text-align: center
   }

   /* Hero */
   .hero-content {
      padding: 3rem 0 4rem
   }

   .hero-scroll {
      display: none
   }

   /* masqué sur mobile, peu utile */

   /* Features strip */
   .features-list {
      gap: .75rem;
      justify-content: flex-start
   }

   .feature-item {
      width: calc(50% - .375rem)
   }

   /* CTA */
   .cta-buttons {
      flex-direction: column;
      align-items: center
   }

   .cta-buttons .btn {
      width: 100%;
      max-width: 320px
   }

   /* Section header */
   .section-header {
      margin-bottom: 2rem
   }

   /* Cartes */
   .card {
      padding: 1.5rem
   }

   .team-card {
      padding: 2rem 1.5rem
   }

   .value-card {
      padding: 1.25rem
   }

   /* Why Us */
   .why-us-grid {
      grid-template-columns: 1fr
   }

   /* Accordion */
   .accordion-header {
      padding: 1rem 1.25rem
   }

   .accordion-body {
      padding: 0 1.25rem
   }

   .accordion-item.open .accordion-body {
      padding: .75rem 1.25rem 1.25rem
   }

   /* Contact */
   .contact-info-card {
      padding: 1.25rem
   }
}

/* ============================================================
   RESPONSIVE — MOBILE SMALL (≤ 480px)
   ============================================================ */
@media(max-width:480px) {

   /* Stats → 1 colonne */
   .stats-grid {
      grid-template-columns: 1fr
   }

   /* Hero actions → colonne */
   .hero-actions {
      flex-direction: column
   }

   .hero-actions .btn {
      width: 100%;
      justify-content: center
   }

   /* Boutons pleine largeur */
   .btn {
      justify-content: center
   }

   /* Features : 1 item par ligne */
   .feature-item {
      width: 100%
   }

   /* Logo : masquer le tagline sur très petit écran */
   .logo-text .tagline {
      display: none
   }

   /* Process step: réduire gap */
   .process-step {
      gap: 1rem
   }

   .step-num {
      width: 36px;
      height: 36px;
      font-size: .95rem
   }

   /* Contact info card: empiler icone + texte */
   .contact-info-card {
      flex-direction: row
   }

   /* Formulaire */
   .form-group input,
   .form-group select,
   .form-group textarea {
      padding: .75rem .85rem
   }

   /* Page hero */
   .page-hero {
      padding: 4rem 0 2rem
   }
}

/* ============================================================
   UTILITAIRE : Réduit les animations pour les utilisateurs
   qui préfèrent moins de mouvement (accessibilité)
   ============================================================ */
@media(prefers-reduced-motion:reduce) {

   *,
   *::before,
   *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important
   }

   .hero-scroll {
      animation: none
   }
}

/* ============================================================
   RESPONSIVE CORRECTIONS GLOBALES — AJOUT 2026
   Ces règles neutralisent les grilles inline et stabilisent
   l'affichage mobile/tablette du thème ACS Expertise.
   ============================================================ */

/* Utilitaires de mise en page */
.responsive-two-col,
.contact-page-grid,
.about-mission-grid,
.about-process-grid {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   gap: 4rem;
   align-items: center;
}

.about-process-grid {
   align-items: start;
}

.about-vision-wrap {
   max-width: none;
}

.about-values-card {
   background: linear-gradient(135deg, var(--navy), var(--blue));
   border-radius: var(--radius-lg);
   padding: 3rem;
   color: white;
   min-width: 0;
}

.services-intro-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 1rem;
}

.service-label {
   display: block;
   margin-bottom: .4rem;
   font-size: .68rem;
   font-weight: 600;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--gold);
}

.why-us-image {
   width: 100%;
   min-height: 320px;
   max-height: 520px;
   object-fit: cover;
   border-radius: var(--radius-lg);
}

.audience-section {
   position: relative;
   overflow: hidden;
   background:
      radial-gradient(circle at 90% 12%, rgba(226, 232, 240, .13), transparent 26rem),
      linear-gradient(180deg, #ffffff 0%, #f7f9fd 100%);
}

.audience-section::before {
   content: '';
   position: absolute;
   width: 280px;
   height: 280px;
   left: -110px;
   top: 70px;
   border: 42px solid rgba(34, 46, 90, .045);
   border-radius: 50%;
   animation: floatSoft 10s ease-in-out infinite;
}

.audience-layout {
   position: relative;
   display: grid;
   grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
   gap: clamp(2rem, 5vw, 4rem);
   align-items: start;
}

.audience-copy {
   position: sticky;
   top: 105px;
}

.audience-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 1rem;
}

.audience-card {
   display: flex;
   gap: .95rem;
   min-width: 0;
   padding: 1.2rem;
   border: 1px solid rgba(34, 46, 90, .10);
   border-radius: var(--radius-lg);
   background: rgba(255, 255, 255, .9);
   box-shadow: 0 12px 30px rgba(34, 46, 90, .07);
   transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.audience-card:hover {
   transform: translateY(-5px);
   border-color: rgba(226, 232, 240, .65);
   box-shadow: 0 18px 42px rgba(34, 46, 90, .13);
}

.audience-icon {
   width: 38px;
   height: 38px;
   min-width: 38px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: var(--radius);
   background: var(--navy);
   color: var(--gold);
   box-shadow: 0 10px 22px rgba(34, 46, 90, .18);
   transition: transform .28s ease, background .28s ease, color .28s ease;
}

.audience-icon svg {
   width: 19px;
   height: 19px;
   fill: currentColor;
}

.audience-card:hover .audience-icon {
   transform: rotate(-5deg) scale(1.06);
   background: var(--gold);
   color: var(--navy);
}

.audience-card h3 {
   margin-bottom: .35rem;
   font-size: .98rem;
   color: var(--navy);
}

.audience-card p {
   color: var(--text-light);
   font-size: .82rem;
   line-height: 1.65;
}

/* Contact */
.contact-page-grid {
   grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
   gap: 3.5rem;
   align-items: start;
}

.contact-title {
   font-size: 1.8rem;
   margin-bottom: 1rem;
}

.contact-intro-text {
   color: var(--text-light);
   font-size: .9rem;
   line-height: 1.8;
   margin-bottom: 2rem;
}

.contact-form-card {
   background: white;
   border: 1px solid var(--gray-light);
   border-radius: var(--radius-lg);
   padding: 2.5rem;
   box-shadow: var(--shadow);
}

.contact-form-card h3 {
   margin-bottom: .4rem;
}

.form-subtitle {
   font-size: .88rem;
   color: var(--text-light);
   margin-bottom: 2rem;
}

.form-alert {
   padding: 1.25rem 1.5rem;
   border-radius: var(--radius);
   margin-bottom: 2rem;
   display: flex;
   align-items: center;
   gap: 1rem;
}

.form-alert-success {
   background: #f0fdf4;
   border: 1px solid #86efac;
   color: #15803d;
}

.form-alert-error {
   background: #fef2f2;
   border: 1px solid #fca5a5;
   color: #dc2626;
}

.consent-row {
   display: flex;
   align-items: flex-start;
   gap: .75rem;
   margin-bottom: .5rem;
}

.consent-row input {
   width: 16px;
   height: 16px;
   min-width: 16px;
   margin-top: .25rem;
   accent-color: var(--blue);
}

.consent-row label {
   font-size: .82rem;
   color: var(--text-light);
   cursor: pointer;
   line-height: 1.6;
}

.form-submit-btn {
   width: 100%;
   justify-content: center;
   margin-top: .5rem;
   padding: 1rem;
}

.contact-benefits-section {
   background: var(--off-white);
   border-top: 1px solid var(--gray-light);
}

.contact-benefits-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 2rem;
   text-align: center;
}

.contact-benefit-card {
   padding: 1.5rem;
}

.contact-benefit-icon {
   width: 52px;
   height: 52px;
   background: var(--blue-pale);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 1rem;
}

.contact-benefit-card h4 {
   font-size: 1rem;
   margin-bottom: .4rem;
}

.contact-benefit-card p {
   font-size: .85rem;
   color: var(--text-light);
}

/* Sécurité anti-débordements */
.card,
.service-card,
.contact-form-card,
.about-values-card,
.footer-col,
.footer-brand,
.process-step,
.why-list li {
   min-width: 0;
}

.section-title,
.page-hero h1,
.hero h1,
.service-card h3,
.accordion-header h4 {
   overflow-wrap: anywhere;
}

/* Tablettes */
@media (max-width: 1024px) {
   .contact-page-grid {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
      gap: 2rem;
   }

   .about-vision-wrap {
      grid-template-columns: minmax(0, 1fr) minmax(320px, 1.1fr);
      gap: 2.75rem;
   }

   .about-vision-image {
      min-height: clamp(360px, 48vw, 520px);
   }

   .about-mission-grid,
   .about-process-grid {
      gap: 2.5rem;
   }
}

/* Navigation tablette/mobile */
@media (max-width: 900px) {
   .main-nav {
      display: none;
   }

   .hamburger {
      display: flex;
   }

   .contact-page-grid,
   .contact-benefits-grid,
   .about-mission-grid,
   .about-vision-wrap,
   .about-process-grid,
   .responsive-two-col {
      grid-template-columns: 1fr !important;
   }

   .about-vision-copy {
      max-width: none;
   }

   .about-values-card,
   .contact-form-card {
      padding: 2rem;
   }

   .services-intro-row {
      justify-content: center;
      text-align: center;
   }

   .services-intro-row .btn {
      width: auto;
   }
}

/* Mobiles */
@media (max-width: 768px) {
   .container {
      padding: 0 1rem;
   }

   .header-inner {
      height: 68px;
   }

   .logo-icon {
      width: 82px;
      height: 38px;
   }

   .logo-text .tagline {
      display: none;
   }

   .mobile-nav {
      top: 68px;
   }

   .page-hero {
      margin-top: 68px;
      padding-top: 5rem;
   }

   .hero {
      padding-top: 68px;
      min-height: auto;
      background-position: 62% center;
   }

   .grid-2,
   .grid-3,
   .grid-4,
   .stats-grid,
   .footer-grid,
   .form-row,
   .why-us-grid {
      grid-template-columns: 1fr !important;
   }

   .footer-bottom {
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
      gap: .5rem;
   }

   .hero-actions,
   .cta-buttons {
      flex-direction: column;
      align-items: center;
   }

   .btn,
   .hero-actions .btn,
   .cta-buttons .btn,
   .services-intro-row .btn {
      width: 100%;
      max-width: 320px;
      white-space: normal;
      text-align: center;
   }

   .card,
   .contact-form-card,
   .about-values-card {
      padding: 1.4rem;
   }

   .contact-info-card {
      flex-wrap: nowrap;
      padding: 1.2rem;
   }

   .why-us-image {
      min-height: 240px;
   }
}

/* Petits mobiles */
@media (max-width: 480px) {

   body,
   p,
   li {
      font-size: .86rem;
   }

   .section {
      padding: 2.5rem 0;
   }

   .section-sm {
      padding: 2rem 0;
   }

   .page-hero h1,
   .hero h1 {
      font-size: 2rem;
   }

   .hero-slogan {
      font-size: .95rem;
   }

   .hero-tagline {
      font-size: .68rem;
      letter-spacing: .1em;
   }

   .hero-text {
      font-size: .92rem;
   }

   .service-card h3 {
      font-size: .95rem;
   }

   .accordion-header {
      padding: 1rem;
   }

   .accordion-body {
      padding-left: 1rem;
      padding-right: 1rem;
   }

   .contact-info-card {
      gap: .8rem;
   }

   .contact-info-icon {
      width: 38px;
      height: 38px;
   }

   .contact-benefit-card {
      padding: 1rem;
   }
}




/* ============================================================
   SERVICES DETAIL — Layout 5 cartes + animation
   ============================================================ */
.services-detail-grid {
   display: grid;
   grid-template-columns: repeat(6, minmax(0, 1fr));
   gap: 1.6rem;
   align-items: stretch;
}

.service-detail-card {
   grid-column: span 2;
   position: relative;
   overflow: hidden;
   background: var(--white);
   border: 1px solid var(--gray-light);
   border-radius: var(--radius-lg);
   padding: 2rem;
   min-height: 100%;
   display: flex;
   flex-direction: column;
   box-shadow: 0 8px 28px rgba(34, 46, 90, 0.07);
   transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
   animation: serviceFadeUp .7s ease both;
}

.service-detail-card:nth-child(1),
.service-detail-card:nth-child(2) {
   grid-column: span 3;
}

.service-detail-card:nth-child(1) {
   animation-delay: .05s;
}

.service-detail-card:nth-child(2) {
   animation-delay: .12s;
}

.service-detail-card:nth-child(3) {
   animation-delay: .19s;
}

.service-detail-card:nth-child(4) {
   animation-delay: .26s;
}

.service-detail-card:nth-child(5) {
   animation-delay: .33s;
}

.service-detail-card::before {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, rgba(34, 46, 90, .08), rgba(226, 232, 240, .08));
   opacity: 0;
   transition: opacity .35s ease;
   pointer-events: none;
}

.service-detail-card::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 4px;
   background: linear-gradient(90deg, var(--gold), var(--blue));
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .35s ease;
}

.service-detail-card:hover {
   transform: translateY(-8px);
   border-color: rgba(46, 64, 128, .35);
   box-shadow: 0 18px 46px rgba(34, 46, 90, 0.14);
}

.service-detail-card:hover::before {
   opacity: 1;
}

.service-detail-card:hover::after {
   transform: scaleX(1);
}

.service-detail-top {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   margin-bottom: 1.4rem;
   position: relative;
   z-index: 1;
}

.service-detail-icon {
   width: 54px;
   height: 54px;
   border-radius: 14px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--blue-pale);
   transition: background .35s ease, transform .35s ease;
}

.service-detail-icon svg {
   width: 24px;
   height: 24px;
   fill: var(--blue);
   transition: fill .35s ease;
}

.service-detail-card:hover .service-detail-icon {
   background: var(--navy);
   transform: rotate(-4deg) scale(1.05);
}

.service-detail-card:hover .service-detail-icon svg {
   fill: var(--gold);
}

.service-detail-number {
   font-size: .78rem;
   font-weight: 700;
   letter-spacing: .12em;
   color: rgba(34, 46, 90, .28);
}

.service-detail-card h3 {
   position: relative;
   z-index: 1;
   font-size: 1.05rem;
   line-height: 1.35;
   margin-bottom: .75rem;
   color: var(--navy);
}

.service-detail-desc {
   position: relative;
   z-index: 1;
   font-size: .86rem;
   color: var(--text-light);
   margin-bottom: 1rem;
}

.service-detail-list {
   position: relative;
   z-index: 1;
   display: flex;
   flex-direction: column;
   gap: .55rem;
   list-style: none;
   padding: 0;
   margin: 0 0 1.4rem;
}

.service-detail-list li {
   display: flex;
   align-items: flex-start;
   gap: .55rem;
   font-size: .83rem;
   line-height: 1.55;
   color: var(--text);
}

.service-detail-check {
   width: 18px;
   height: 18px;
   min-width: 18px;
   border-radius: 50%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: rgba(226, 232, 240, .16);
   color: var(--gold);
   font-size: .72rem;
   font-weight: 700;
   margin-top: .12rem;
}

.service-detail-link {
   position: relative;
   z-index: 1;
   margin-top: auto;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: .5rem;
   align-self: flex-start;
   min-height: 42px;
   padding: .72rem 1.1rem;
   border-radius: var(--radius);
   border: 1.5px solid var(--blue);
   color: var(--blue);
   font-size: .82rem;
   font-weight: 700;
   transition: var(--transition);
}

.service-detail-link svg {
   width: 15px;
   height: 15px;
   fill: currentColor;
   transform: rotate(180deg);
   transition: transform .3s ease;
}

.service-detail-link:hover {
   background: var(--navy);
   border-color: var(--navy);
   color: var(--white);
   transform: translateY(-2px);
}

.service-detail-link:hover svg {
   transform: rotate(180deg) translateX(-3px);
}

@keyframes serviceFadeUp {
   from {
      opacity: 0;
      transform: translateY(22px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

@media (max-width: 1024px) {
   .services-detail-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .service-detail-card,
   .service-detail-card:nth-child(1),
   .service-detail-card:nth-child(2) {
      grid-column: span 1;
   }

   .service-detail-card:nth-child(5) {
      grid-column: 1 / -1;
   }
}

@media (max-width: 700px) {
   .services-detail-grid {
      grid-template-columns: 1fr;
      gap: 1.2rem;
   }

   .service-detail-card,
   .service-detail-card:nth-child(1),
   .service-detail-card:nth-child(2),
   .service-detail-card:nth-child(5) {
      grid-column: 1 / -1;
   }

   .service-detail-card {
      padding: 1.5rem;
   }

   .service-detail-icon {
      width: 48px;
      height: 48px;
   }

   .service-detail-card h3 {
      font-size: 1rem;
   }

   .service-detail-link {
      width: 100%;
   }
}

/* ============================================================
   FOOTER USEFUL LINKS — Site web + réseaux dans Coordonnées
   ============================================================ */
.footer-bottom a {
   color: rgba(255, 255, 255, .52);
   text-decoration: none;
   transition: var(--transition);
}

.footer-bottom a:hover {
   color: var(--gold);
}


.footer-links-group {
   display: flex;
   align-items: center;
   gap: .65rem;
   flex-wrap: wrap;
   margin-top: 1.2rem;
   padding-left: 1.65rem;
}

.footer-links-group a {
   width: 34px;
   height: 34px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: rgba(255, 255, 255, .08);
   border: 1px solid rgba(255, 255, 255, .14);
   color: rgba(255, 255, 255, .78);
   font-size: .78rem;
   font-weight: 700;
   line-height: 1;
   transition: var(--transition);
}

.footer-links-group a.social-site {
   background: var(--blue);
   border-color: rgba(255, 255, 255, .18);
   color: white;
}

.footer-links-group a.social-x {
   background: #0F1419;
   border-color: #0F1419;
   color: white;
}

.footer-links-group a.social-linkedin {
   background: #0A66C2;
   border-color: #0A66C2;
   color: white;
}

.footer-links-group a.social-facebook {
   background: #1877F2;
   border-color: #1877F2;
   color: white;
}

.footer-links-group a.social-instagram {
   background:
      radial-gradient(circle at 30% 110%, #FFDC80 0 18%, #F77737 28%, #E1306C 45%, #833AB4 68%, #405DE6 100%);
   border-color: transparent;
   color: white;
}

.footer-links-group a:first-child {
   width: 34px;
   min-width: 34px;
   padding: 0;
   border-radius: 50%;
}

.footer-links-group a svg {
   width: 15px;
   height: 15px;
   fill: currentColor;
   flex-shrink: 0;
}

.footer-links-group a:hover {
   transform: translateY(-2px);
   filter: brightness(1.08);
   box-shadow: 0 10px 22px rgba(0, 0, 0, .18);
}

@media (max-width: 768px) {
   .footer-links-group {
      padding-left: 0;
   }

   .hero-services-panel {
      padding: 1.4rem .8rem .8rem;
   }

   .hero-services-label {
      left: 50%;
      transform: translate(-50%, -50%);
   }

   .hero-services-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .hero-service-card {
      min-height: 132px;
      border-right: 0;
      border-bottom: 1px solid rgba(255, 255, 255, .10);
      padding: .9rem .6rem;
   }

   .audience-layout {
      grid-template-columns: 1fr;
   }

   .audience-copy {
      position: static;
   }

   .audience-grid {
      grid-template-columns: 1fr;
   }
}

/* ======================== NOUVELLES SECTIONS : ENGAGEMENTS & EXPERTS ======================== */
.commitments-section {
   padding: 6rem 0;
}

.stats-banner {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 2rem;
   text-align: center;
   background: var(--navy);
   padding: 2.5rem;
   border-radius: var(--radius-lg);
   margin-bottom: 4rem;
   box-shadow: var(--shadow-lg);
   color: var(--white);
}

.stat-item {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
}

.stat-number {
   font-size: 2.5rem;
   font-weight: 700;
   color: var(--gold);
}

.stat-label {
   color: var(--blue-pale);
   font-size: 0.9rem;
   text-transform: uppercase;
   letter-spacing: 0.05em;
}

.commitments-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 2rem;
   margin-top: 3rem;
}

.commitment-card {
   background: var(--white);
   border: 1px solid var(--gray-light);
   border-radius: var(--radius-lg);
   padding: 2.5rem 1.5rem;
   text-align: center;
   transition: var(--transition);
   box-shadow: var(--shadow);
}

.commitment-card:hover {
   transform: translateY(-5px);
   box-shadow: var(--shadow-lg);
   border-color: var(--navy);
}

.commitment-icon {
   width: 64px;
   height: 64px;
   margin: 0 auto 1.5rem;
   background: var(--blue-pale);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: var(--transition);
}

.commitment-card:hover .commitment-icon {
   background: var(--navy);
}

.commitment-icon svg {
   width: 32px;
   height: 32px;
   fill: var(--navy);
   transition: var(--transition);
}

.commitment-card:hover .commitment-icon svg {
   fill: var(--gold);
}

.commitment-card h3 {
   color: var(--navy);
   font-size: 1.2rem;
   margin-bottom: 1rem;
   font-weight: 700;
}

.commitment-card p {
   color: var(--text);
   font-size: 0.95rem;
   line-height: 1.6;
}

.experts-section {
   padding: 6rem 0;
   background: var(--white);
}

.experts-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 2.5rem;
   margin-top: 3rem;
}

.expert-card {
   border-radius: var(--radius-lg);
   overflow: hidden;
   box-shadow: var(--shadow);
   transition: var(--transition);
   background: var(--off-white);
   border: 1px solid var(--gray-light);
}

.expert-card:hover {
   transform: translateY(-8px);
   box-shadow: var(--shadow-lg);
}

.expert-image {
   width: 100%;
   height: 300px;
   background: var(--gray-light);
   overflow: hidden;
}

.expert-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.5s ease;
}

.expert-card:hover .expert-image img {
   transform: scale(1.05);
}

.expert-info {
   padding: 1.5rem;
   text-align: center;
   background: var(--navy);
   color: var(--white);
   border-top: 4px solid var(--gold);
}

.expert-info h3 {
   margin: 0 0 0.5rem;
   font-size: 1.25rem;
   font-weight: 700;
   color: var(--white);
}

.expert-info span {
   display: block;
   font-size: 0.9rem;
   color: var(--gold);
   text-transform: uppercase;
   letter-spacing: 1px;
   font-weight: 600;
}

@media (max-width: 768px) {
   .stats-banner {
      grid-template-columns: 1fr;
      gap: 1.5rem;
   }
}



/* ============================================================
   HOME FINAL — CORRECTIONS INCLUSES
   Alternance stricte : BLEU / GRIS / BLEU / BLANC-GRIS / BLEU
   Charte : bleu principal + cyan moderne
   ============================================================ */

:root {
   --charte-blue: #003F87;
   --charte-night: #071A3D;
   --charte-blue-2: #0B3D91;
   --charte-cyan: #37BFFF;
   --charte-cyan-soft: #CFF1FF;
   --charte-grey-bg: #F5F7FA;
   --charte-border: #E2E8F0;
}

/* Sécurité générale */
.home-blue-hero,
.home-expertises-section,
.home-engagement-section,
.home-soft-strip,
.home-about-section,
.home-audience-section,
.home-final-cta {
   position: relative;
   overflow: hidden;
}

.home-blue-hero .container,
.home-expertises-section .container,
.home-engagement-section .container,
.home-soft-strip .container,
.home-about-section .container,
.home-audience-section .container,
.home-final-cta .container {
   position: relative;
   z-index: 2;
}

/* ============================================================
   1. HERO — FOND BLEU
   ============================================================ */
.home-blue-hero {
   margin-top: 0;
   padding: 9rem 0 5.5rem;
   min-height: auto;
   background:
      radial-gradient(circle at 82% 14%, rgba(55, 191, 255, .18), transparent 28%),
      linear-gradient(135deg, var(--charte-night) 0%, var(--charte-blue) 100%);
}

.home-blue-hero-bg {
   position: absolute;
   inset: 0;
   background-image:
      linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
   background-size: 70px 70px;
   opacity: .38;
   pointer-events: none;
}

.home-blue-hero::after {
   content: '';
   position: absolute;
   right: -13rem;
   top: 7rem;
   width: 33rem;
   height: 33rem;
   border-radius: 50%;
   border: 80px solid rgba(255, 255, 255, .045);
   pointer-events: none;
}

.home-blue-hero-layout {
   display: grid;
   grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
   gap: clamp(2.5rem, 5vw, 4rem);
   align-items: center;
}

.home-blue-hero-copy h1 {
   color: white;
   font-size: clamp(2.6rem, 5.3vw, 5rem);
   line-height: .98;
   letter-spacing: -.055em;
   margin-bottom: 1.2rem;
}

.home-blue-hero-copy h1 span {
   color: var(--charte-cyan);
}

.home-blue-hero-copy .hero-badge {
   background: transparent;
   border: 0;
   padding: 0;
   color: var(--charte-cyan);
   letter-spacing: .18em;
   box-shadow: none;
}

.home-blue-hero-copy .hero-text {
   max-width: 590px;
   color: rgba(255, 255, 255, .78);
}

.home-blue-hero-copy .hero-slogan {
   color: rgba(255, 255, 255, .62);
}

.home-blue-hero-copy .hero-tagline {
   color: rgba(255, 255, 255, .42);
}

.home-blue-hero-copy .btn-primary {
   background: var(--charte-cyan);
   border-color: var(--charte-cyan);
   color: var(--charte-night);
}

.home-blue-hero-copy .btn-primary:hover {
   background: white;
   border-color: white;
   color: var(--charte-night);
}

.home-blue-hero-copy .btn-outline {
   border-color: rgba(255, 255, 255, .72);
   color: white;
}

.home-blue-hero-image {
   position: relative;
   min-height: 470px;
   overflow: hidden;
   clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%, 30% 0);
   border-left: 6px solid var(--charte-cyan);
   box-shadow: -20px 0 60px rgba(0, 0, 0, .25);
}

.home-blue-hero-image::before {
   content: '';
   position: absolute;
   inset: 0;
   z-index: 1;
   background: linear-gradient(90deg, rgba(7, 26, 61, .45), rgba(7, 26, 61, .05));
   pointer-events: none;
}

.home-blue-hero-image img {
   width: 100%;
   height: 100%;
   min-height: 470px;
   object-fit: cover;
   object-position: center;
}

/* Neutralise les anciens éléments du hero si le vieux markup existe encore */
.hero-services-panel {
   display: none;
}

/* ============================================================
   2. NOS EXPERTISES — FOND GRIS
   ============================================================ */
.home-expertises-section {
   background: var(--charte-grey-bg);
   padding: 4.8rem 0;
}

.home-section-header {
   text-align: center;
   max-width: 760px;
   margin: 0 auto 3rem;
}

.home-section-header .section-label {
   color: var(--charte-blue);
}

.home-section-header h2 {
   color: var(--charte-night);
   font-size: clamp(1.7rem, 3vw, 2.45rem);
   margin-bottom: .8rem;
}

.home-section-header p {
   color: var(--text-light);
   max-width: 620px;
   margin: 0 auto;
}

.home-expertises-grid {
   display: grid;
   grid-template-columns: repeat(6, minmax(0, 1fr));
   background: white;
   border: 1px solid rgba(7, 26, 61, .08);
   border-radius: 20px;
   overflow: hidden;
   box-shadow: 0 20px 55px rgba(7, 26, 61, .08);
}

.home-expertise-card {
   min-height: 245px;
   padding: 2rem 1rem;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   color: var(--text);
   border-right: 1px solid rgba(7, 26, 61, .08);
   transition: var(--transition);
}

.home-expertise-card:last-child {
   border-right: 0;
}

.home-expertise-icon {
   width: 54px;
   height: 54px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 1.15rem;
   border-radius: 16px;
   background: var(--charte-cyan-soft);
}

.home-expertise-icon svg {
   width: 28px;
   height: 28px;
   fill: var(--charte-blue);
}

.home-expertise-card h3 {
   color: var(--charte-night);
   text-transform: uppercase;
   font-size: .78rem;
   letter-spacing: .05em;
   font-weight: 800;
   margin-bottom: .75rem;
}

.home-expertise-card p {
   font-size: .78rem;
   color: var(--text-light);
   line-height: 1.65;
   margin-bottom: 1rem;
}

.home-expertise-card span {
   margin-top: auto;
   color: var(--charte-blue);
   font-size: .72rem;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: .06em;
}

.home-expertise-card span::after {
   content: ' →';
   color: var(--charte-cyan);
}

.home-expertise-card:hover {
   background: var(--charte-night);
   transform: translateY(-8px);
   box-shadow: 0 18px 45px rgba(7, 26, 61, .16);
}

.home-expertise-card:hover h3,
.home-expertise-card:hover p,
.home-expertise-card:hover span {
   color: white;
}

.home-expertise-card:hover .home-expertise-icon {
   background: rgba(55, 191, 255, .14);
}

.home-expertise-card:hover .home-expertise-icon svg {
   fill: var(--charte-cyan);
}

/* ============================================================
   3. NOTRE ENGAGEMENT — FOND BLEU
   ============================================================ */
.home-engagement-section {
   background:
      radial-gradient(circle at 82% 25%, rgba(55, 191, 255, .17), transparent 26%),
      linear-gradient(135deg, var(--charte-night), var(--charte-blue));
   padding: 4.3rem 0;
   color: white;
}

.home-engagement-layout {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(420px, .95fr);
   gap: 3rem;
   align-items: center;
}

.home-engagement-copy .section-label {
   color: var(--charte-cyan);
}

.home-engagement-copy h2 {
   color: white;
   font-size: clamp(1.6rem, 3vw, 2.4rem);
   margin-bottom: .8rem;
}

.home-engagement-copy p {
   color: rgba(255, 255, 255, .72);
   max-width: 540px;
}

.home-engagement-stats {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1.2rem;
}

.home-stat-item {
   text-align: center;
   padding: 1.2rem 1rem;
   border-left: 1px solid rgba(255, 255, 255, .16);
}

.home-stat-item strong {
   display: block;
   font-size: clamp(2rem, 4vw, 3.1rem);
   line-height: 1;
   color: var(--charte-cyan);
   margin-bottom: .55rem;
}

.home-stat-item span {
   display: block;
   color: rgba(255, 255, 255, .68);
   font-size: .78rem;
}

/* ============================================================
   4. FEATURES — FOND BLANC/GRIS
   ============================================================ */
.home-soft-strip {
   background: white;
   border-top: 0;
   border-bottom: 1px solid var(--charte-border);
}

.home-soft-strip .feature-item svg {
   fill: var(--charte-cyan);
}

/* ============================================================
   5. POURQUOI NOUS CHOISIR — FOND GRIS
   ============================================================ */
.home-about-section {
   background: var(--charte-grey-bg);
   padding: 5rem 0;
}

.home-about-layout {
   display: grid;
   grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr);
   gap: 4rem;
   align-items: center;
}

.home-about-copy {
   background: white;
   border-radius: 22px;
   border: 1px solid rgba(7, 26, 61, .08);
   padding: clamp(1.7rem, 3vw, 3rem);
   box-shadow: 0 18px 50px rgba(7, 26, 61, .07);
}

.home-about-copy .section-label {
   color: var(--charte-blue);
}

.home-about-copy p {
   color: var(--text-light);
   line-height: 1.85;
}

.home-about-copy .btn-primary {
   margin-top: 1.6rem;
   background: var(--charte-blue);
   border-color: var(--charte-blue);
   color: white;
}

.home-about-copy .btn-primary:hover {
   background: var(--charte-night);
   border-color: var(--charte-night);
   color: white;
}

.home-about-image {
   min-height: 380px;
   border-radius: 22px;
   overflow: hidden;
   box-shadow: 0 24px 65px rgba(7, 26, 61, .16);
}

.home-about-image img {
   width: 100%;
   height: 100%;
   min-height: 380px;
   object-fit: cover;
}

/* ============================================================
   6. AUDIENCE — FOND BLANC
   ============================================================ */
.home-audience-section {
   background: white;
}

.home-audience-section .audience-icon {
   background: var(--charte-night);
   color: var(--charte-cyan);
}

.home-audience-section .audience-card:hover {
   border-color: rgba(55, 191, 255, .45);
}

.home-audience-section .audience-card:hover .audience-icon {
   background: var(--charte-cyan);
   color: var(--charte-night);
}

/* ============================================================
   7. CTA FINAL — FOND BLEU
   ============================================================ */
.home-final-cta {
   background:
      radial-gradient(circle at 78% 20%, rgba(55, 191, 255, .18), transparent 26%),
      linear-gradient(135deg, var(--charte-night), var(--charte-blue));
}

.home-final-cta .btn-primary {
   background: var(--charte-cyan);
   border-color: var(--charte-cyan);
   color: var(--charte-night);
}

.home-final-cta .btn-primary:hover {
   background: white;
   border-color: white;
   color: var(--charte-night);
}

/* ============================================================
   Harmonisation globale avec nouvelle charte
   ============================================================ */
.divider-line {
   background: var(--charte-cyan);
}

.section-label,
.mention {
   color: var(--charte-blue);
}

.site-footer,
.site-header,
.mobile-nav {
   background: var(--charte-night);
}

.footer-contact-item svg,
.footer-slogan,
.breadcrumb .current,
.value-num,
.stat-number,
.team-card .role,
.team-avatar,
.service-label,
.step-num {
   color: var(--charte-cyan);
   fill: var(--charte-cyan);
   border-color: var(--charte-cyan);
}

/* ============================================================
   RESPONSIVE HOME FINAL
   ============================================================ */
@media (max-width: 1100px) {

   .home-blue-hero-layout,
   .home-engagement-layout,
   .home-about-layout {
      grid-template-columns: 1fr;
   }

   .home-blue-hero-image {
      min-height: 340px;
      clip-path: none;
      border-left: 0;
      border-radius: 22px;
   }

   .home-blue-hero-image img {
      min-height: 340px;
   }

   .home-expertises-grid {
      grid-template-columns: repeat(3, 1fr);
   }

   .home-expertise-card:nth-child(3) {
      border-right: 0;
   }
}

@media (max-width: 768px) {
   .home-blue-hero {
      padding: 7rem 0 3.5rem;
   }

   .home-blue-hero-copy h1 {
      font-size: 2.45rem;
   }

   .home-blue-hero-image,
   .home-blue-hero-image img {
      min-height: 280px;
   }

   .home-expertises-grid,
   .home-engagement-stats {
      grid-template-columns: 1fr;
   }

   .home-expertise-card {
      min-height: auto;
      border-right: 0;
      border-bottom: 1px solid rgba(7, 26, 61, .08);
   }

   .home-stat-item {
      border-left: 0;
      border-top: 1px solid rgba(255, 255, 255, .16);
   }

   .home-about-image,
   .home-about-image img {
      min-height: 280px;
   }

   .home-about-layout,
   .home-engagement-layout {
      gap: 2rem;
   }
}

@media (max-width: 480px) {
   .home-blue-hero-copy h1 {
      font-size: 2.15rem;
   }

   .home-section-header {
      margin-bottom: 2rem;
   }

   .home-expertises-section,
   .home-about-section {
      padding: 3.5rem 0;
   }

   .home-engagement-section {
      padding: 3.2rem 0;
   }
}

/* ============================================================
   HOME — NOS EXPERTS
   Respect de la charte actuelle : bleu nuit / bleu / cyan
   ============================================================ */

.home-experts-section {
   background:
      radial-gradient(circle at 82% 18%, rgba(55, 191, 255, .14), transparent 28%),
      linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
   padding: clamp(3.8rem, 6vw, 5rem) 0;
   color: var(--white);
   position: relative;
   overflow: hidden;
}

.home-experts-section::before {
   content: '';
   position: absolute;
   right: -120px;
   top: -120px;
   width: 310px;
   height: 310px;
   border-radius: 50%;
   border: 54px solid rgba(255, 255, 255, .045);
   pointer-events: none;
}

.home-experts-layout {
   position: relative;
   z-index: 1;
   display: grid;
   grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
   gap: clamp(2rem, 4vw, 4rem);
   align-items: center;
}

.home-experts-copy .section-label {
   color: var(--gold);
}

.home-experts-copy h2 {
   color: var(--white);
   font-size: clamp(1.6rem, 3vw, 2.45rem);
   line-height: 1.15;
   margin-bottom: 1rem;
}

.home-experts-copy p {
   color: rgba(255, 255, 255, .72);
   font-size: .92rem;
   line-height: 1.85;
   max-width: 540px;
}

.home-experts-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 1.2rem;
}

.home-expert-card {
   min-height: 250px;
   padding: 1.65rem 1.35rem;
   border-radius: var(--radius-lg);
   background: rgba(255, 255, 255, .075);
   border: 1px solid rgba(255, 255, 255, .13);
   box-shadow: 0 18px 46px rgba(0, 0, 0, .16);
   transition: var(--transition);
}

.home-expert-card:hover {
   transform: translateY(-7px);
   background: rgba(255, 255, 255, .11);
   border-color: rgba(55, 191, 255, .45);
}

.home-expert-icon {
   width: 54px;
   height: 54px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 16px;
   background: rgba(55, 191, 255, .13);
   margin-bottom: 1.25rem;
}

.home-expert-icon svg {
   width: 27px;
   height: 27px;
   fill: var(--gold);
}

.home-expert-card h3 {
   color: var(--white);
   font-size: .95rem;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: .06em;
   margin-bottom: .75rem;
}

.home-expert-card p {
   color: rgba(255, 255, 255, .68);
   font-size: .82rem;
   line-height: 1.7;
}

/* Responsive Nos experts */
@media (max-width: 1024px) {
   .home-experts-layout {
      grid-template-columns: 1fr;
   }

   .home-experts-copy p {
      max-width: 720px;
   }
}

@media (max-width: 768px) {
   .home-experts-grid {
      grid-template-columns: 1fr;
   }

   .home-expert-card {
      min-height: auto;
   }
}