/* home.css — PROMETI */

/* ══ SCROLLBAR ══ */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(14,165,233,0.35);border-radius:4px}
::-webkit-scrollbar-button{display:none;height:0;width:0}

/* ══ VARIABLES ══ */
:root{
  --navy-deepest : #020a16;
  --navy-deep    : #07101e;
  --navy         : #091526;
  --navy-mid     : #152233;
  --navy-light   : #11263d;
  --navy-lighter : #183553;

  --blue         : #0ea5e9;
  --blue-dark    : #0284c7;
  --blue-light   : #38bdf8;
  --blue-glow    : rgba(14,165,233,0.18);
  --orange       : #f97316;
  --orange-dark  : #ea6c0a;
  --green        : #22c55e;

  --txt-white    : #ffffff;
  --txt-light    : rgba(255,255,255,0.88);
  --txt-muted    : rgba(255,255,255,0.52);
  --txt-dark     : #0f172a;
  --txt-gray     : #64748b;

  --font-display : 'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  --font-body    : 'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;

  --radius       : 14px;
  --radius-sm    : 8px;
  --radius-lg    : 22px;
  --ease         : cubic-bezier(.4,0,.2,1);
  --tr           : .22s;
}

/* ══ RESET ══ */
*,*::before,*::after{ box-sizing:border-box; }
button,input,textarea,select{ font-family:inherit; font-size:inherit; }
html{ font-size:16px; height:100%; scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%; scrollbar-gutter:stable; overflow-y:scroll; }
body{ height:100%; margin:0; font-family:var(--font-body); font-size:1rem; color:var(--txt-dark); background:#152233; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:clip; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; }

/* ══ ACCESSIBILITÉ ══ */
/* Skip link */
.skip-link{
  position:fixed; top:0; left:50%;
  transform:translateX(-50%) translateY(-100%);
  z-index:10000;
  padding:10px 28px;
  background:#0ea5e9; color:#fff;
  font-weight:700; font-size:14px; letter-spacing:.02em;
  border-radius:0 0 6px 6px;
  text-decoration:none; white-space:nowrap;
  transition:transform .18s ease;
}
.skip-link:focus-visible{
  transform:translateX(-50%) translateY(0);
}
/* Focus visible */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid #0ea5e9;
  outline-offset:3px;
  border-radius:3px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:2px solid #0ea5e9;
  outline-offset:1px;
  border-radius:3px;
}
.container{ width:min(1200px,92%); margin:0 auto; }

/* ══════════════════════════════════════════════════
   NAVBAR
   ══════════════════════════════════════════════════ */
.navbar{
  position:fixed; top:0; left:0; right:0; z-index:200;
  background:linear-gradient(135deg, rgba(62,132,186,0.97) 0%, rgba(46,108,160,0.97) 55%, rgba(34,88,136,0.97) 100%);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  border-bottom:4px solid rgba(255,255,255,0.80);
  box-shadow:0 1px 0 rgba(14,165,233,0.14), 0 6px 32px rgba(0,0,0,0.24);
  transition:background .28s var(--ease), backdrop-filter .28s var(--ease),
             border-color .28s var(--ease), box-shadow .28s var(--ease);
}
.navbar.scrolled{
  background:linear-gradient(135deg, rgba(62,132,186,0.92) 0%, rgba(46,108,160,0.92) 55%, rgba(34,88,136,0.92) 100%);
  -webkit-backdrop-filter:blur(26px); backdrop-filter:blur(26px);
  border-bottom-color:rgba(255,255,255,0.60);
  box-shadow:0 1px 0 rgba(14,165,233,0.08), 0 8px 28px rgba(0,0,0,0.16);
}

.nav-container{
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; height:70px;
  padding:0 40px; gap:24px;
  width:min(1400px,100%); margin:0 auto;
  transition:height .28s var(--ease);
}
.navbar.scrolled .nav-container{ height:60px; }
/* Largeur réservée fixe : le logo principal et son repli (onerror) n'ont pas
   le même format (≈4.7:1 contre ≈1.2:1). Sans largeur fixe, un repli vers
   l'image de secours rétrécirait brutalement cette colonne de la grille et
   décalerait tout le reste de la navbar (liens centrés, boutons à droite). */
.brand{ display:inline-flex; align-items:center; justify-content:flex-start; text-decoration:none; flex-shrink:0; width:220px; }
.brand-logo{
  height:46px; max-width:100%; width:auto; display:block;
  object-fit:contain;
  image-rendering:auto;
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
  will-change:transform;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,0.12));
}

/* Un seul calque GPU pour TOUTE la rangée de liens : tous les liens partagent
   ainsi le même arrondi sous-pixel, ce qui évite le micro-décalage relatif
   entre liens adjacents au survol (plus visible avec des mots courts comme
   en anglais, où chaque pixel d'écart représente une plus grande proportion
   de la largeur du mot). Promouvoir CHAQUE lien séparément serait pire : des
   calques indépendants peuvent s'arrondir chacun différemment au pixel près. */
.nav-links{
  display:flex; gap:2px; align-items:center; justify-content:center;
  transform:translateZ(0); -webkit-transform:translateZ(0);
  contain:layout;
}
.nav-links a{
  color:rgba(255,255,255,0.60); font-weight:600; font-size:13.5px;
  padding:8px 13px; border-radius:7px;
  transition:color var(--tr);
  white-space:nowrap; letter-spacing:.3px; position:relative;
  isolation:isolate; flex:0 0 auto;
}
/* Fond de survol sur un calque indépendant (::before) : ne modifie jamais la
   boîte du lien lui-même, donc aucun risque de décalage des voisins quel que
   soit la langue / longueur du texte. */
.nav-links a::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:7px;
  background:rgba(255,255,255,0.06); opacity:0; transition:opacity var(--tr);
}
.nav-links a:hover{ color:#fff; }
.nav-links a:hover::before{ opacity:1; }
.nav-links a.active{ color:#fff; }
.nav-links a.active::after{
  content:""; position:absolute; bottom:0; left:13px; right:13px;
  height:4px; border-radius:999px;
  background:#fff;
  box-shadow:0 0 12px rgba(255,255,255,0.70), 0 0 4px rgba(255,255,255,0.90);
}


.nav-right{ display:flex; align-items:center; gap:14px; justify-content:flex-end; }

/* ══════════════════════════════════════════════════
   SÉLECTEUR DE LANGUE — Dropdown drapeau
══════════════════════════════════════════════════ */
.lang-switch{
  position:relative;
  display:inline-flex;
}

/* Bouton globe + flèche ▼ */
.lang-globe-btn{
  display:inline-flex; align-items:center; gap:5px;
  padding:8px 11px; border-radius:10px;
  border:1px solid rgba(14,165,233,0.30);
  background:rgba(14,165,233,0.10);
  color:#fff; cursor:pointer;
  transition:background .20s var(--ease), border-color .20s var(--ease), transform .18s var(--ease);
  flex-shrink:0;
}
.lang-globe-btn:hover{
  background:rgba(14,165,233,0.20);
  border-color:rgba(14,165,233,0.50);
  transform:translateY(-1px);
}
.lang-globe-btn.open{
  background:rgba(14,165,233,0.24);
  border-color:var(--blue);
}
/* Icône globe */
.lang-globe-btn .lang-globe-svg{
  width:17px; height:17px;
  stroke:#fff; stroke-width:1.8; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
  pointer-events:none; flex-shrink:0;
}
/* Flèche ▼ */
.lang-trigger-arrow{
  width:10px; height:10px; flex-shrink:0;
  stroke:rgba(255,255,255,0.80); stroke-width:2.5; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .24s var(--ease);
}
.lang-globe-btn.open .lang-trigger-arrow{ transform:rotate(180deg); }


/* ── Dropdown ── */
.lang-dropdown{
  display:none;
  position:absolute;
  top:calc(100% + 10px); right:0;
  background:#ffffff;
  border-radius:14px;
  border:1px solid #e2e8f0;
  box-shadow:0 20px 56px rgba(15,23,42,0.18), 0 4px 16px rgba(15,23,42,0.08);
  min-width:150px;
  z-index:600;
  overflow:hidden;
}
@-webkit-keyframes langDropIn{
  from{ opacity:0; -webkit-transform:translateY(-10px) scale(0.96); transform:translateY(-10px) scale(0.96); }
  to{ opacity:1; -webkit-transform:translateY(0) scale(1); transform:translateY(0) scale(1); }
}
@keyframes langDropIn{
  from{ opacity:0; transform:translateY(-10px) scale(0.96); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.lang-dropdown.open{
  display:block;
  -webkit-animation:langDropIn .22s cubic-bezier(.22,1,.36,1) both;
  animation:langDropIn .22s cubic-bezier(.22,1,.36,1) both;
}

/* Options */
.lang-dropdown-item{
  display:flex; align-items:center; gap:11px;
  width:100%; padding:12px 16px;
  border:none; background:transparent; cursor:pointer;
  text-align:left; font-family:var(--font-body);
  transition:background .15s;
}
.lang-dropdown-item + .lang-dropdown-item{ border-top:1px solid #f1f5f9; }
.lang-dropdown-item:hover{ background:#f8fafc; }
.lang-dropdown-item.active{ background:#f0f9ff; }

/* Drapeau dans le dropdown */
.lang-flag-img{
  width:28px; height:20px; flex-shrink:0;
  border-radius:4px; object-fit:cover;
  display:block;
  box-shadow:0 1px 4px rgba(0,0,0,0.20);
}

.lang-label{
  flex:1; font-size:13.5px; font-weight:700;
  color:#0f172a; letter-spacing:.06em; text-transform:uppercase;
}

.lang-check-icon{
  width:13px; height:13px; flex-shrink:0;
  stroke:#0ea5e9; stroke-width:2.5; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
  opacity:0; transition:opacity .15s;
}
.lang-dropdown-item.active .lang-check-icon{ opacity:1; }

/* .lang-opt utilisé uniquement comme hook JS — reset minimal */
.lang-opt{ font:inherit; cursor:pointer; }

/* ── Bouton Contactez-nous — premium gradient ── */
.btn-contact-nav{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 30px; border-radius:10px; border:none;
  min-width:200px; justify-content:center;
  background:linear-gradient(135deg,#0284c7 0%,#0ea5e9 100%);
  color:#fff;
  font-family:var(--font-display);
  font-weight:800; font-size:14px; cursor:pointer;
  white-space:nowrap; letter-spacing:.08em; text-transform:uppercase;
  box-shadow:0 6px 22px rgba(14,165,233,0.42), inset 0 1px 0 rgba(255,255,255,0.20);
  transition:transform var(--tr), box-shadow var(--tr), filter var(--tr);
  position:relative; overflow:hidden;
}
/* Reflet supérieur permanent */
.btn-contact-nav::before{
  content:""; position:absolute;
  top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent 10%,rgba(255,255,255,0.40) 50%,transparent 90%);
  pointer-events:none;
}
/* Shimmer glissant au survol */
.btn-contact-nav::after{
  content:""; position:absolute;
  top:0; left:-70%; width:45%; height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,0.16),transparent);
  transform:skewX(-15deg);
  transition:left .55s ease;
  pointer-events:none;
}
.btn-contact-nav:hover::after{ left:130%; }
.btn-contact-nav svg{
  width:14px; height:14px; stroke:#fff; stroke-width:2.5;
  fill:none; stroke-linecap:round; stroke-linejoin:round;
  flex-shrink:0;
  transition:transform .22s ease;
}
.btn-contact-nav:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(14,165,233,0.56), inset 0 1px 0 rgba(255,255,255,0.22);
  filter:brightness(1.06);
}
.btn-contact-nav:hover svg{ transform:rotate(-8deg) scale(1.10); }

.burger{
  display:none; width:40px; height:40px;
  border:1px solid rgba(255,255,255,0.14); background:rgba(255,255,255,0.06);
  border-radius:7px; cursor:pointer; flex-direction:column;
  align-items:center; justify-content:center; gap:5px; padding:0;
}
.burger span{ display:block; height:2px; width:20px; background:rgba(255,255,255,0.82); border-radius:2px; }

.nav-mobile{
  display:none; padding:10px 20px 20px;
  background:rgba(2,10,22,0.98); border-top:1px solid rgba(255,255,255,0.06);
}
.nav-mobile.open{ display:block; }
.nav-mobile a{
  display:block; padding:11px 14px; border-radius:8px;
  color:rgba(255,255,255,0.68); font-weight:600; margin-top:4px;
  background:rgba(255,255,255,0.04); transition:background var(--tr), color var(--tr);
}
.nav-mobile a:hover{ background:rgba(255,255,255,0.08); color:#fff; }
.nav-mobile a.active{ color:var(--blue); font-weight:700; }

.mobile-contact-info{
  margin-top:12px; padding:14px; border-radius:10px;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07);
}
.mobile-contact-info a{
  display:flex; align-items:center; padding:9px 0; color:rgba(255,255,255,0.65);
  font-weight:600; font-size:15px; border-bottom:1px solid rgba(255,255,255,0.06);
  background:none; border-radius:0; margin-top:0; transition:color var(--tr);
}
.mobile-contact-info a svg{ width:17px; height:17px; flex-shrink:0; }
.mobile-contact-info a:last-child{ border-bottom:none; }
.mobile-contact-info a:hover{ color:#fff; background:none; }

/* ══════════════════════════════════════════════════
   HERO — left-aligned, full-height, premium
   ══════════════════════════════════════════════════ */
.hero{
  position:relative; min-height:100vh; overflow:hidden;
  padding-top:70px; display:flex; align-items:center;
  justify-content:flex-start;
}

.hero-slider{ position:absolute; inset:0; z-index:0; }
.hero-slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transform:scale(1.04);
  transition:opacity 0.7s ease-in-out, transform 4s ease;
  filter:brightness(1.08) contrast(1.08) saturate(1.10);
  image-rendering:-webkit-optimize-contrast;
}
.hero-slide.is-active{ opacity:1; transform:scale(1.08); }

/* Overlay : dégradé latéral gauche + assombrissement global */
.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg,  rgba(7,16,30,0.92) 0%, rgba(7,16,30,0.70) 55%, rgba(7,16,30,0.35) 100%),
    linear-gradient(180deg, rgba(7,16,30,0.25) 0%, rgba(7,16,30,0.15) 50%, rgba(7,16,30,0.60) 100%);
}

/* Content — bien à gauche */
.hero-content{
  position:relative; z-index:2; color:#fff;
  padding:60px 0 60px max(32px, calc((100vw - 1500px)/2 + 52px));
  max-width:min(740px, 62vw);
  display:flex; flex-direction:column; align-items:flex-start;
}

/* Pill badge — design épuré, sans fond chargé */
.hero-pill{
  display:inline-flex; align-items:center; gap:10px;
  margin-bottom:28px;
}
.hero-pill-line{
  display:block; width:32px; height:2px;
  background:var(--blue); border-radius:999px; flex-shrink:0;
}
.hero-pill-text{
  font-family:var(--font-display);
  font-size:14px; font-weight:800; letter-spacing:.24em;
  text-transform:uppercase; color:rgba(255,255,255,0.55);
}

/* Main title — condensed bold uppercase, tout unifié */
.hero-title{
  margin:0 0 20px;
  font-family:var(--font-display);
  font-size:clamp(26px,2.8vw,44px);
  font-weight:800; font-style:normal;
  line-height:1.08; letter-spacing:.04em;
  text-transform:uppercase; color:#fff;
  text-shadow:0 4px 24px rgba(0,0,0,0.38);
}
.hero-title-accent{ color:var(--blue); }

/* Description */
.hero-text{
  margin:0 0 32px;
  color:rgba(255,255,255,0.68);
  font-size:15px; line-height:1.76;
  max-width:520px; font-weight:500;
}

/* CTA buttons */
.hero-cta{
  display:flex; gap:14px; flex-wrap:wrap;
  align-items:center;
}
.btn-hero-primary{
  display:inline-flex; align-items:center; gap:8px;
  height:43px; padding:0 32px; border-radius:5px;
  background:var(--blue); color:#fff;
  font-family:var(--font-display);
  font-size:17px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; white-space:nowrap;
  box-shadow:0 6px 28px rgba(14,165,233,0.36);
  transition:background var(--tr), transform var(--tr), box-shadow var(--tr);
}
.btn-hero-primary svg{ width:15px; height:15px; stroke:#fff; stroke-width:2.5; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.btn-hero-primary:hover{ background:var(--blue-dark); transform:translateY(-2px); box-shadow:0 12px 36px rgba(14,165,233,0.48); }

.btn-hero-ghost{
  display:inline-flex; align-items:center;
  padding:15px 28px; border-radius:5px;
  background:transparent; border:1px solid rgba(255,255,255,0.28);
  color:rgba(255,255,255,0.80);
  font-family:var(--font-display);
  font-size:16px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; white-space:nowrap;
  transition:background var(--tr), border-color var(--tr), color var(--tr);
}
.btn-hero-ghost:hover{ background:rgba(255,255,255,0.07); border-color:rgba(255,255,255,0.50); color:#fff; }

/* Scroll indicator — reste à gauche */
.hero-scroll-indicator{
  position:absolute; bottom:36px; left:max(32px, calc((100vw - 1500px)/2 + 52px));
  display:flex; flex-direction:column; align-items:center; gap:6px; z-index:2;
}
.hero-scroll-line{
  width:1px; height:44px;
  background:linear-gradient(180deg, rgba(14,165,233,0.85), transparent);
  animation:scrollPulse 1.8s ease-in-out infinite;
}
@keyframes scrollPulse{
  0%,100%{ opacity:.35; transform:scaleY(0.6) translateY(-4px); }
  50%{ opacity:1; transform:scaleY(1) translateY(0); }
}

/* Dots — centrés sur la photo */
.hero-dots{
  position:absolute; bottom:28px;
  left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:7px; z-index:2;
}
.dot{
  width:7px; height:7px; border-radius:999px;
  background:rgba(255,255,255,0.22); border:none; padding:0; cursor:pointer;
  transition:width .36s var(--ease), background .36s var(--ease);
  -webkit-appearance:none; appearance:none; flex-shrink:0;
}
.dot.active{ width:22px; background:#fff; }
.dot:hover:not(.active){ background:rgba(255,255,255,0.50); }

/* Intitulé du slide courant — bas droite */
.hero-slide-label{
  position:absolute; bottom:28px;
  right:max(36px, calc((100vw - 1500px)/2 + 52px));
  display:flex; align-items:center; gap:11px;
  padding:9px 18px 9px 14px;
  background:rgba(2,10,22,0.62); backdrop-filter:blur(14px);
  border-left:2px solid var(--blue); border-radius:0 6px 6px 0;
  z-index:2;
  transition:opacity .22s ease, transform .22s ease;
}
.hero-slide-label.is-changing{ opacity:0; transform:translateY(4px); }
.hero-slide-label-num{
  font-size:10.5px; font-weight:800; letter-spacing:.18em;
  color:var(--blue); white-space:nowrap;
}
.hero-slide-label-sep{
  width:1px; height:13px; background:rgba(255,255,255,0.18); flex-shrink:0;
}
.hero-slide-label-text{
  font-size:11.5px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:rgba(255,255,255,0.82);
  white-space:nowrap;
}

/* ══════════════════════════════════════════════════
   QUI SOMMES-NOUS — dark premium split layout
   ══════════════════════════════════════════════════ */
.about-section{ position:relative; overflow:visible; background:#fff; box-shadow:0 8px 40px rgba(7,16,30,0.08); }
.about-inner{
  display:grid; grid-template-columns:1fr 1fr;
  min-height:460px;
  overflow:visible;
}

/* Left panel — photo via CSS background (double fallback : png → jpeg → gradient) */
.about-left{
  position:relative; overflow:hidden; min-height:460px;
  background:
    linear-gradient(160deg, rgba(2,10,22,0.22) 0%, rgba(7,16,30,0.08) 45%, rgba(2,10,22,0.32) 100%),
    url('Images01/qui-sommes-nous-03.png') center center/cover no-repeat,
    linear-gradient(145deg, #020d1c 0%, #071630 50%, #0d1f38 100%);
  display:flex; align-items:flex-end; justify-content:flex-end;
}

/* Badge — coin bas-droite, style corporate épuré */
.about-badge{
  position:absolute; bottom:0; right:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:18px 26px 16px;
  background:rgba(2,8,18,0.90);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  border-top:1px solid rgba(14,165,233,0.38);
  border-left:1px solid rgba(14,165,233,0.20);
  z-index:10; min-width:112px;
  box-shadow:-5px -5px 24px rgba(0,0,0,0.52), inset 0 1px 0 rgba(255,255,255,0.04);
  overflow:hidden;
}
/* Accent line en haut */
.about-badge::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--blue) 0%, rgba(14,165,233,0.18) 100%);
}
.about-badge::after{ display:none; }
.about-badge-num{
  font-family:var(--font-display);
  font-size:46px; font-weight:900; line-height:1;
  color:#fff; letter-spacing:-.02em;
  text-shadow:0 0 30px rgba(14,165,233,0.28);
  position:relative; z-index:1;
}
.about-badge-text{
  font-size:7.5px; font-weight:800; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(255,255,255,0.52);
  line-height:1.6; text-align:center;
  position:relative; z-index:1; margin-top:6px;
}

/* Right panel — blanc propre */
.about-right{
  background:#fff;
  padding:52px 52px 52px 60px;
  display:flex; flex-direction:column; justify-content:center;
  border-left:none;
  position:relative; overflow:hidden;
  box-shadow:-4px 0 32px rgba(7,16,30,0.10);
}
/* Glow discret top-right */
.about-right::before{
  content:""; position:absolute; top:-60px; right:-60px;
  width:320px; height:260px; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse, rgba(14,165,233,0.04) 0%, transparent 65%);
}
.about-right > *{ position:relative; z-index:1; }

.about-eyebrow{
  margin:0 0 16px;
  font-size:11px; font-weight:800;
  letter-spacing:.24em; text-transform:uppercase;
  color:rgba(14,165,233,0.85);
}
.about-title{
  margin:0 0 20px;
  font-family:var(--font-display);
  font-size:clamp(22px, 2.4vw, 38px);
  font-weight:900; font-style:normal;
  line-height:.96; letter-spacing:.03em;
  text-transform:uppercase; color:#020a16;
}
.about-title-accent{ color:var(--blue); }
.about-text{
  margin:0 0 14px;
  font-size:14px; color:rgba(10,20,35,0.62);
  line-height:1.76; font-weight:400; max-width:480px;
}

/* Stats 2×2 — dark cards sur fond blanc (contraste premium) */
.about-stats{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  margin:22px 0 28px; max-width:420px;
}
.about-stat{
  background:rgba(14,165,233,0.06); border-radius:10px; padding:18px 22px;
  display:flex; flex-direction:column; gap:6px;
  border:1px solid rgba(14,165,233,0.20);
  border-left:3px solid var(--blue);
  box-shadow:0 4px 18px rgba(7,16,30,0.08);
  transition:border-color var(--tr), box-shadow var(--tr), background var(--tr), transform var(--tr);
}
.about-stat:hover{
  background:rgba(14,165,233,0.10);
  border-color:rgba(14,165,233,0.38);
  box-shadow:0 8px 26px rgba(7,16,30,0.12);
  transform:translateY(-2px);
}
/* Chiffres — dark sur fond blanc */
.about-stat-num{
  font-family:var(--font-display);
  font-size:38px; font-weight:900; line-height:1;
  color:#07101e; letter-spacing:-.02em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:geometricPrecision;
}
/* Suffixe « + » en bleu */
.about-stat-sup{
  font-size:48%; font-weight:900; color:var(--blue);
  vertical-align:super; line-height:1.2;
}
.about-stat-label{
  font-size:11px; font-weight:700;
  color:rgba(7,16,30,0.58);
  letter-spacing:.05em; text-transform:uppercase;
  line-height:1.45;
}

.btn-about{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 32px; border-radius:4px;
  background:linear-gradient(135deg, #3e84ba 0%, #2e6ca0 100%);
  color:#fff;
  font-family:var(--font-display);
  font-size:13px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; width:fit-content;
  border:1px solid rgba(255,255,255,0.18);
  box-shadow:0 6px 24px rgba(30,77,120,0.38), 0 1px 0 rgba(255,255,255,0.12) inset;
  transition:background .30s ease, transform .30s cubic-bezier(.22,1,.36,1), box-shadow .30s ease;
  position:relative; overflow:hidden;
}
.btn-about::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,0.10) 0%, transparent 60%);
  pointer-events:none;
}
.btn-about svg{ width:15px; height:15px; stroke:#fff; stroke-width:2.5; fill:none; stroke-linecap:round; stroke-linejoin:round; transition:transform .26s ease; }
.btn-about:hover{ background:linear-gradient(135deg, #4a96d0 0%, #3878b2 100%); transform:translateY(-3px); box-shadow:0 12px 36px rgba(30,77,120,0.45), 0 1px 0 rgba(255,255,255,0.15) inset; }
.btn-about:hover svg{ transform:translateX(4px); }

/* ══════════════════════════════════════════════════
   NOS SERVICES — 4 cards with background images
   ══════════════════════════════════════════════════ */
.services-section{
  background:#ffffff;
  padding:96px 0; position:relative; overflow:hidden;
}
.services-section::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(14,165,233,0.10) 1px, transparent 1px);
  background-size:36px 36px; pointer-events:none;
}

/* ── Adaptations textes pour fond blanc ────────────────────── */
.services-section .section-eyebrow{
  color:var(--blue);
}
.services-section .section-title-v2,
.services-header .section-title-v2{
  color:var(--navy-deepest);
}
.services-section .section-title-accent{
  color:var(--blue);
}
/* Nav-tabs : spécificité renforcée (.services-section) pour fond blanc */
.services-section .srv-nav-tab{
  color:#0c2e4a;
  background:rgba(14,165,233,0.10);
  border:1.5px solid rgba(14,165,233,0.55);
}
.services-section .srv-nav-tab:hover{
  background:rgba(14,165,233,0.20);
  border-color:var(--blue);
  color:var(--navy-deepest);
  box-shadow:0 4px 16px rgba(14,165,233,0.22), inset 0 1px 0 rgba(255,255,255,0.50);
}
.services-section .srv-nav-tab.active{
  background:rgba(14,165,233,0.14);
  border-color:rgba(14,165,233,0.60);
  color:#0c2e4a;
}

/* Section head left-align override pour services et réalisations */
.services-section .section-head,
/* Header row NOS RÉALISATIONS — même structure que actus-header */
.real-header{
  display:flex; align-items:flex-end;
  justify-content:space-between; gap:24px; margin-bottom:36px;
  position:relative; z-index:1;
}
.real-see-all{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-display); font-size:16.5px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:var(--blue);
  white-space:nowrap; flex-shrink:0; align-self:flex-end;
  padding:0; border:none; background:none;
  transition:color .26s ease, transform .28s ease;
}
.real-see-all::after{ content:'→'; font-size:13px; transition:transform .28s ease; }
.real-see-all:hover{ color:var(--blue-dark); }
.real-see-all:hover::after{ transform:translateX(4px); }
/* Header row EXPERTISE MULTI-TECHNIQUE — même structure que actus/real headers */
.services-header{
  display:flex; align-items:flex-end;
  justify-content:space-between; gap:24px; margin-bottom:24px;
  position:relative; z-index:1;
}
.services-see-all{
  font-family:var(--font-display); font-size:16.5px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:var(--blue);
  white-space:nowrap; flex-shrink:0; align-self:flex-end; padding-bottom:4px;
  transition:color var(--tr), transform var(--tr);
}
.services-see-all:hover{ color:var(--blue-dark); transform:translateX(3px); }
/* Titre "EXPERTISE MULTI-TECHNIQUE" réduit */
.services-section .section-title-v2,
.services-header .section-title-v2{
  font-size:clamp(22px, 2.4vw, 38px);
  white-space:nowrap;
}

/* Tabs de navigation services */
.srv-nav-tabs{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-bottom:32px; position:relative; z-index:1;
}
.srv-nav-tab{
  display:inline-flex; align-items:center;
  padding:8px 18px; border-radius:6px;
  border:1px solid rgba(14,165,233,0.38);
  background:rgba(14,165,233,0.11);
  color:rgba(255,255,255,0.88);
  font-family:var(--font-display);
  font-size:13px; font-weight:800; letter-spacing:.10em;
  text-transform:uppercase; cursor:pointer; white-space:nowrap;
  position:relative; overflow:hidden;
  transition:background .24s ease, border-color .24s ease, color .24s ease,
             transform .24s ease, box-shadow .24s ease;
}
/* Shimmer discret au hover */
.srv-nav-tab::after{
  content:""; position:absolute;
  top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,0.10), transparent);
  transform:skewX(-15deg);
  transition:left .45s ease;
  pointer-events:none;
}
.srv-nav-tab:hover{
  background:rgba(14,165,233,0.20);
  border-color:rgba(14,165,233,0.60);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(14,165,233,0.28), inset 0 1px 0 rgba(255,255,255,0.14);
}
.srv-nav-tab:hover::after{ left:120%; }
/* Active visuellement identique à la base — aucune différenciation voulue */
.srv-nav-tab.active{
  background:rgba(14,165,233,0.11);
  border-color:rgba(14,165,233,0.38);
  color:rgba(255,255,255,0.88);
  box-shadow:none;
  transform:none;
}
/* Séparateur épuré entre tabs et cards */
.srv-divider{
  position:relative; z-index:1;
  margin:0 0 36px;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(14,165,233,0.55) 20%,
    rgba(14,165,233,0.80) 50%,
    rgba(14,165,233,0.55) 80%,
    transparent 100%
  );
}
.srv-divider::before,
.srv-divider::after{ content:none; }

/* ══ EXPERTISE MULTI-TECHNIQUE — Showcase Grid 2×2 Premium ══ */

.srv-showcase{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:2px;
  background:rgba(255,255,255,.07);
  border-radius:14px; overflow:hidden;
  position:relative; z-index:1;
  box-shadow:0 50px 120px rgba(0,0,0,.50);
}

.srv-showcase-item{
  display:flex; flex-direction:column;
  background:var(--navy-deep);
  overflow:hidden; cursor:default;
}

.srv-showcase-visual{
  position:relative;
  height:clamp(170px,20vw,260px);
  overflow:hidden; flex-shrink:0;
}

.srv-showcase-visual::before{
  content:""; position:absolute; inset:0;
  background-color:var(--navy-deep);
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center 40%;
  transform:scale(1.04);
  filter:saturate(.96) brightness(.94);
  transition:transform .75s cubic-bezier(.25,.46,.45,.94), filter .50s;
}
.srv-showcase-item:hover .srv-showcase-visual::before{
  transform:scale(1.09);
  filter:saturate(1.06) brightness(1.02);
}

/* Images EXPERTISE MULTI-TECHNIQUE — règles autonomes (toutes les propriétés background déclarées explicitement) */
.bg-fluide .srv-showcase-visual::before {
  background-color:var(--navy-deep);
  background-image:url("Images01/cvc-et-fluides.png");
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center 40%;
}
.bg-maintenance .srv-showcase-visual::before {
  background-color:var(--navy-deep);
  background-image:url("Images01/maintennacne-multi-technique.png");
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center 35%;
}
.bg-it .srv-showcase-visual::before {
  background-color:var(--navy-deep);
  background-image:url("Images01/telecommunications-et-it.png");
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center 40%;
}
.bg-elec .srv-showcase-visual::before {
  background-color:var(--navy-deep);
  background-image:url("Images01/Electricite.png");
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center 40%;
}

.srv-showcase-visual::after{
  content:""; position:absolute;
  bottom:0; left:0; right:0; height:72px;
  background:linear-gradient(to top, var(--navy-deep), transparent);
  pointer-events:none;
}

.srv-showcase-num{
  position:absolute; top:18px; left:18px; z-index:1;
  font-family:var(--font-display);
  font-size:10px; font-weight:900; letter-spacing:.24em;
  color:#fff;
  background:rgba(2,8,20,.48);
  border:1px solid rgba(255,255,255,.22);
  padding:5px 12px; border-radius:3px;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}

.srv-showcase-info{
  position:relative;
  padding:22px 28px 28px;
  display:flex; flex-direction:column; flex:1;
  background:#28405c;
}

.srv-showcase-info::before{
  content:""; position:absolute;
  top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--blue) 0%, var(--blue-light,#38bdf8) 100%);
  transform:scaleX(0); transform-origin:left;
  transition:transform .42s cubic-bezier(.4,0,.2,1);
}
.srv-showcase-item:hover .srv-showcase-info::before{ transform:scaleX(1); }

.srv-showcase-tag{
  display:block;
  font-size:9px; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--blue);
  margin-bottom:10px;
}

.srv-showcase-title{
  font-family:var(--font-display);
  font-size:clamp(18px,2.0vw,26px);
  font-weight:900; letter-spacing:.07em;
  text-transform:uppercase; color:#fff;
  margin:0 0 12px; line-height:1.14;
  transition:letter-spacing .38s;
}
.srv-showcase-item:hover .srv-showcase-title{ letter-spacing:.10em; }

.srv-showcase-desc{
  font-size:13px; font-weight:400;
  color:rgba(255,255,255,.60);
  line-height:1.74; margin:0; flex:1;
}

.srv-showcase-cta{
  display:inline-flex; align-items:center; gap:7px;
  margin-top:20px; padding-top:16px;
  border-top:1px solid rgba(255,255,255,.07);
  font-size:9.5px; font-weight:800;
  letter-spacing:.20em; text-transform:uppercase;
  color:var(--blue); text-decoration:none; align-self:flex-end;
  transition:color .22s, gap .22s, letter-spacing .22s;
}
.srv-showcase-cta:hover{ color:#fff; gap:11px; letter-spacing:.25em; }


@media(max-width:860px){
  .srv-showcase{ grid-template-columns:1fr 1fr; }
  .srv-showcase-visual{ height:clamp(140px,19vw,200px); }
}

@media(max-width:540px){
  .srv-showcase{ grid-template-columns:1fr; border-radius:10px; }
  .srv-showcase-visual{ height:220px; }
  .srv-showcase-info{ padding:18px 20px 22px; }
  .srv-showcase-title{ font-size:19px; }
}


/* ══════════════════════════════════════════════════
   CERTIFICATIONS & PARTENARIATS
   ══════════════════════════════════════════════════ */
.certif-section{
  background:#28405c;
  border-top:1px solid rgba(14,165,233,0.18);
  border-bottom:1px solid rgba(14,165,233,0.12);
}
.certif-inner{
  display:flex; align-items:center;
  width:min(1300px,96%); margin:0 auto;
  padding:40px 40px; gap:48px; flex-wrap:wrap;
}
.certif-left{ flex-shrink:0; }
.certif-title{
  margin:0; font-family:var(--font-display);
  font-size:16px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,0.78); white-space:nowrap;
}
.certif-sep{ width:1px; align-self:stretch; min-height:48px; background:rgba(255,255,255,0.12); flex-shrink:0; }
.certif-right{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; flex:1; }
.certif-logos{ display:flex; gap:24px; align-items:stretch; }

/* Logo box — distinct et travaillé pour chaque partenaire */
.certif-logo-box{
  padding:0; border-radius:12px;
  border:1px solid rgba(255,255,255,0.12);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:6px;
  width:190px; height:80px;
  overflow:hidden; position:relative;
  transition:transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}
.certif-logo-box:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 32px rgba(0,0,0,0.30);
  border-color:rgba(14,165,233,0.35);
}

/* Fond blanc — logos en couleurs officielles */
.certif-logo-box:nth-child(1),
.certif-logo-box:nth-child(2),
.certif-logo-box:nth-child(3){
  background:#fff;
  box-shadow:0 4px 20px rgba(0,0,0,0.22);
}

/* Pas d'overlay — fond est déjà dark */
.certif-logo-box::before{
  content:none;
}

/* Pas de ligne accent en bas */
.certif-logo-box::after{ content:none; }

.certif-logo-box img{
  width:auto; max-width:140px; max-height:46px;
  object-fit:contain; padding:0 14px;
  display:block; margin:auto;
  filter:none; opacity:1;
  transition:opacity var(--tr), transform var(--tr);
}
.certif-logo-box:hover img{ opacity:.92; transform:scale(1.05); }

/* Logo cliquable — certificat */
.certif-logo-link{
  display:flex; align-items:center; justify-content:center;
  text-decoration:none;
  position:relative; overflow:hidden;
  cursor:pointer;
  background:none; border:none; padding:0; margin:0;
  font:inherit; line-height:1;
  vertical-align:middle;
}
.certif-logo-link:hover img{ opacity:.80; transform:scale(1.04); }

/* Legrand — taille renforcée pour équilibre visuel avec Schneider & Eaton */
.certif-logo-box:nth-child(3) img{
  max-width:180px; max-height:64px; padding:0 8px;
  transform:scale(1.12);
  transform-origin:center;
}
/* Noms discrets — placeholder jusqu'à ajout des vrais logos */
.certif-logo-box span{
  font-family:var(--font-display);
  font-size:10px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,0.18); /* très discret */
  text-align:center; padding:0 8px;
  position:relative; z-index:1;
}


/* ══════════════════════════════════════════════════
   NOS RÉALISATIONS — premium cards with image area
   ══════════════════════════════════════════════════ */
/* Titre "PROJETS & RÉFÉRENCES" réduit */
.real-section .section-title-v2{
  font-size:clamp(22px, 2.4vw, 38px);
  color:#0a1628;
  white-space:nowrap;
}
.real-section .section-eyebrow{
  color:rgba(14,165,233,.90);
}
.real-section .section-title-accent{
  color:var(--blue);
}
.real-section .real-see-all{
  color:var(--blue);
}
.real-section .real-see-all:hover{
  color:var(--blue-dark);
}

.real-section{
  background:#ffffff; padding:96px 0;
  position:relative; overflow:hidden;
  border-top:1px solid rgba(0,0,0,0.06);
  border-bottom:1px solid rgba(0,0,0,0.06);
}
.real-section::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(14,165,233,0.08) 1px, transparent 1px);
  background-size:36px 36px; pointer-events:none;
}

/* ── Grille 3+2 centrée ─────────────────────────────────── */
.real-cards{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:24px;
  margin-top:52px; position:relative; z-index:1;
}
/* Ligne 1 : 3 cartes égales */
.real-card:nth-child(1){ grid-column: 1 / span 2; }
.real-card:nth-child(2){ grid-column: 3 / span 2; }
.real-card:nth-child(3){ grid-column: 5 / span 2; }
/* Ligne 2 : 2 cartes centrées */
.real-card:nth-child(4){ grid-column: 2 / span 2; }
.real-card:nth-child(5){ grid-column: 4 / span 2; }

.real-card{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:12px;
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .32s ease, box-shadow .32s ease, border-color .32s ease;
}
.real-card:hover{
  transform:translateY(-6px);
  box-shadow:0 28px 64px rgba(0,0,0,0.42), 0 0 0 1px rgba(14,165,233,0.18);
  border-color:rgba(14,165,233,0.28);
}

/* ── Zone image — hauteur généreuse pour futures photos ─── */
.real-card-img{
  position:relative; height:220px; overflow:hidden;
  background:linear-gradient(145deg,#0a1928 0%,#0f2642 60%,#0c1d30 100%);
  display:flex; align-items:center; justify-content:center;
}
/* Grille subtile de fond */
.real-card-img::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(14,165,233,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,165,233,0.04) 1px, transparent 1px);
  background-size:32px 32px; pointer-events:none;
}
/* Barre accent bas */
.real-card-img::after{
  content:""; position:absolute; bottom:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, transparent 0%, var(--blue) 30%, rgba(14,165,233,0.35) 70%, transparent 100%);
  z-index:3;
}

/* Photo réelle — couvre le placeholder dès qu'elle existe */
.real-card-photo{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; object-fit:cover; object-position:center;
  display:block;
  -webkit-transition:-webkit-transform .70s cubic-bezier(.4,0,.2,1);
  transition:transform .70s cubic-bezier(.4,0,.2,1);
  filter:brightness(0.92) saturate(1.08);
  -webkit-transform:translateZ(0); transform:translateZ(0);
  will-change:transform;
}
.real-card:hover .real-card-photo{ -webkit-transform:scale(1.04); transform:scale(1.04); }

/* Overlay dégradé sur la photo */
.real-card-photo-overlay{
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg, rgba(2,10,22,0.04) 0%, rgba(2,10,22,0.20) 100%);
  pointer-events:none;
}


/* Badge catégorie */
.real-badge{
  position:absolute; top:16px; left:16px;
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 12px; border-radius:4px;
  font-family:var(--font-display);
  font-size:10.5px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; z-index:4;
  backdrop-filter:blur(4px);
}
.real-badge-blue  { background:rgba(14,165,233,0.88); color:#fff; box-shadow:0 2px 12px rgba(14,165,233,0.35); }
.real-badge-orange{ background:rgba(234,88,12,0.88);  color:#fff; box-shadow:0 2px 12px rgba(234,88,12,0.30); }
.real-badge-green { background:rgba(22,163,74,0.88);  color:#fff; box-shadow:0 2px 12px rgba(22,163,74,0.30); }
.real-badge-violet{ background:rgba(124,58,237,0.88); color:#fff; box-shadow:0 2px 12px rgba(124,58,237,0.30); }

/* ── Corps de carte ─────────────────────────────────────── */
.real-card-body{
  padding:22px 22px 24px;
  display:flex; flex-direction:column; gap:10px; flex:1;
  border-top:1px solid rgba(255,255,255,0.06);
}
.real-card-sector{
  font-family:var(--font-display); font-size:10px; font-weight:800;
  letter-spacing:.20em; text-transform:uppercase;
  color:var(--blue); margin:0;
}
.real-card-title{
  margin:0; font-family:var(--font-display);
  font-size:16px; font-weight:800; letter-spacing:.03em;
  text-transform:uppercase; color:#fff; line-height:1.18;
}
.real-card-loc{
  margin:0; font-size:12px; color:rgba(255,255,255,0.42);
  font-weight:600; letter-spacing:.04em;
  display:flex; align-items:center; gap:5px;
}
.real-card-loc svg{
  width:11px; height:11px; flex-shrink:0;
  stroke:currentColor; fill:none; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
.real-card-divider{
  width:28px; height:2px;
  background:linear-gradient(90deg, var(--blue), rgba(14,165,233,0.25));
  border-radius:2px; flex-shrink:0;
}
.real-card-desc{
  margin:0; font-size:13px;
  color:rgba(255,255,255,0.50); line-height:1.70; font-weight:400; flex:1;
}


/* ══════════════════════════════════════════════════
   PROJ SHOWCASE — cinématique interactif
   ══════════════════════════════════════════════════ */

.proj-showcase{
  position:relative; z-index:1;
  margin-top:52px;
  border-radius:18px; overflow:hidden;
  box-shadow:0 32px 80px rgba(0,0,0,.48), 0 0 0 1px rgba(255,255,255,.07);
}

/* ── Scène : image gauche / contenu droit ── */
.proj-stage{
  display:grid;
  grid-template-columns:57% 43%;
  height:460px;
}

/* ── Panneau image ── */
.proj-img-panel{
  position:relative; overflow:hidden;
}
.proj-imgs{
  position:absolute; inset:0;
}
.proj-img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:center;
  opacity:0;
  transform:scale(1.04);
  transition:opacity .90s ease-in-out,
             transform .90s ease-in-out;
  will-change:opacity,transform;
  backface-visibility:hidden;
}
.proj-img.is-active{
  opacity:1;
  transform:scale(1.00);
}
.proj-img-overlay{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, transparent 50%, rgba(5,12,26,.82) 100%),
    linear-gradient(180deg, rgba(5,12,26,.14) 0%, rgba(5,12,26,.24) 100%);
  pointer-events:none;
}

/* Compteur "01 / 05" positionné bas-gauche de l'image */
.proj-counter{
  position:absolute; bottom:26px; left:28px; z-index:2;
  display:flex; align-items:baseline; gap:5px;
  font-family:var(--font-display);
}
.proj-counter-cur{
  font-size:30px; font-weight:900; color:#fff;
  line-height:1; letter-spacing:-.04em;
  text-shadow:0 2px 12px rgba(0,0,0,.55);
}
.proj-counter-sep{
  font-size:13px; font-weight:400; color:rgba(255,255,255,.40);
}
.proj-counter-tot{
  font-size:13px; font-weight:700; color:rgba(255,255,255,.40);
}

/* ── Panneau contenu ── */
.proj-content-panel{
  position:relative; overflow:hidden;
  background:#28405c;
  border-left:1px solid rgba(14,165,233,.18);
  display:flex; flex-direction:column; justify-content:center;
}

/* Dot-grid */
.proj-content-panel::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:radial-gradient(rgba(14,165,233,.055) 1px, transparent 1px);
  background-size:26px 26px;
}

/* Barre lumineuse verticale gauche */
.proj-content-panel::after{
  content:''; position:absolute; left:0; top:18%; bottom:18%; width:2px;
  background:linear-gradient(180deg, transparent 0%, rgba(14,165,233,.70) 50%, transparent 100%);
}

/* ── Slide ── */
.proj-slide{
  position:absolute; inset:0;
  padding:36px 40px 36px 40px;
  display:flex; flex-direction:column; justify-content:center; gap:0;
  opacity:0;
  transform:translateY(16px);
  transition:opacity .55s ease-in-out,
             transform .55s ease-in-out;
  pointer-events:none;
  z-index:1;
  will-change:opacity,transform;
  backface-visibility:hidden;
}
.proj-slide.is-active{
  opacity:1; transform:translateY(0); pointer-events:auto;
}

/* Secteur — ligne tag élégante */
.proj-sector{
  font-family:var(--font-display); font-size:13px; font-weight:800;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--blue); margin:0 0 13px;
  display:flex; align-items:center; gap:8px;
}
.proj-sector::before{
  content:''; display:inline-block;
  width:18px; height:1.5px;
  background:var(--blue); border-radius:1px; flex-shrink:0;
}

/* Titre */
.proj-title{
  font-size:clamp(18px, 1.9vw, 26px);
  font-weight:700; color:#ffffff;
  line-height:1.22; letter-spacing:-.020em;
  margin:0 0 16px;
}

/* Divider */
.proj-divider{
  width:100%; height:1px; flex-shrink:0;
  background:rgba(255,255,255,.08);
  margin-bottom:14px;
}

/* Localisation — icône bleue */
.proj-loc{
  display:flex; align-items:center; gap:6px;
  font-size:12px; color:rgba(255,255,255,.52);
  font-weight:600; letter-spacing:.03em;
  margin:0 0 14px;
}
.proj-loc svg{
  stroke:var(--blue); fill:none; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; flex-shrink:0;
}

/* Description */
.proj-desc{
  font-size:13px; line-height:1.78;
  color:rgba(255,255,255,.70);
  margin:0 0 22px; font-weight:400;
}

/* CTA — minimaliste et premium */
.proj-cta{
  display:inline-flex; align-items:center; gap:9px;
  align-self:flex-start; text-decoration:none;
  font-family:var(--font-display); font-size:14px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue);
  padding-bottom:4px;
  border-bottom:1.5px solid rgba(14,165,233,.40);
  transition:color .26s ease, border-color .26s ease, gap .26s ease;
}
.proj-cta svg{
  stroke:currentColor; fill:none; stroke-width:2.5;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .28s cubic-bezier(.22,1,.36,1);
}
.proj-cta:hover{
  color:#fff; border-color:rgba(255,255,255,.60); gap:14px;
}
.proj-cta:hover svg{ transform:translateX(4px); }

/* ── Navigation onglets ── */
.proj-nav{
  display:grid; grid-template-columns:repeat(5, 1fr);
  border-top:1px solid rgba(14,165,233,.18);
  background:#28405c;
}
.proj-nav-btn{
  position:relative;
  padding:18px 16px 20px;
  display:flex; align-items:flex-start; gap:13px;
  text-align:left; cursor:pointer;
  background:transparent; border:none; outline:none;
  border-right:1px solid rgba(255,255,255,.05);
  transition:background .24s ease;
  overflow:hidden;
}
.proj-nav-btn:last-child{ border-right:none; }
.proj-nav-btn:hover{ background:rgba(14,165,233,.10); }
.proj-nav-btn.is-active{ background:rgba(14,165,233,.16); }

/* Barre de progression — pilotée par JS via rAF */
.proj-nav-bar{
  position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--blue);
  transform:scaleX(0); transform-origin:left center;
  will-change:transform;
}

/* Numéro — colonne gauche, aligné avec le haut du texte */
.proj-nav-num{
  font-family:var(--font-display);
  font-size:15px; font-weight:900; letter-spacing:.04em; line-height:1.5;
  color:rgba(255,255,255,.20); flex-shrink:0;
  transition:color .24s ease;
}
.proj-nav-btn.is-active .proj-nav-num{ color:var(--blue); }
.proj-nav-btn:hover:not(.is-active) .proj-nav-num{ color:rgba(255,255,255,.38); }

/* Colonne droite : catégorie + nom */
.proj-nav-info{ display:flex; flex-direction:column; gap:4px; min-width:0; }

/* Catégorie — élément principal en bleu */
.proj-nav-cat{
  display:block; font-size:15.5px; font-weight:700; line-height:1.3;
  color:rgba(14,165,233,.60); letter-spacing:.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:color .24s ease;
}
.proj-nav-btn.is-active .proj-nav-cat{ color:var(--blue); }
.proj-nav-btn:hover:not(.is-active) .proj-nav-cat{ color:rgba(14,165,233,.82); }

/* Nom du projet — secondaire, discret */
.proj-nav-name{
  display:block; font-family:var(--font-display); font-size:12px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.25); line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:color .24s ease;
}
.proj-nav-btn.is-active .proj-nav-name{ color:rgba(255,255,255,.72); }
.proj-nav-btn:hover:not(.is-active) .proj-nav-name{ color:rgba(255,255,255,.40); }

/* ── Responsive ── */
@media(max-width:1080px){
  .proj-stage{ grid-template-columns:52% 48%; height:400px; }
  .proj-slide{ padding:30px 28px 30px 28px; }
  .proj-nav-btn{ padding:16px 14px 18px; }
  .proj-nav-name{ font-size:11px; }
}
@media(max-width:820px){
  .proj-stage{ grid-template-columns:1fr; height:auto; }
  .proj-img-panel{ height:260px; }
  .proj-content-panel{ height:auto; }
  .proj-img-overlay{ background:linear-gradient(180deg,rgba(5,12,26,.08) 0%,rgba(5,12,26,.28) 100%); }
  .proj-slide{ position:relative; inset:auto; padding:28px 24px; }
  .proj-slide:not(.is-active){ display:none; }
  .proj-slide::before{ font-size:70px; }
  .proj-nav-num{ font-size:14px; }
  .proj-nav-name{ font-size:10px; }
  .proj-nav-cat{ display:none; }
}
@media(max-width:560px){
  .proj-nav{ overflow-x:auto; }
  .proj-nav-btn{ padding:11px 10px 12px; min-width:58px; }
  .proj-nav-name{ display:none; }
}

/* ══════════════════════════════════════════════════
   REAL BENTO — grille premium 5 projets
   ══════════════════════════════════════════════════ */
.real-bento{
  display:grid;
  grid-template-columns:1.55fr 1fr 1fr;
  grid-template-rows:340px 340px;
  gap:14px;
  margin-top:52px;
  position:relative; z-index:1;
}
.rbento-hero{
  grid-row:1 / span 2;
  grid-column:1;
}

.rbento-card{
  position:relative; border-radius:18px; overflow:hidden;
  cursor:pointer; text-decoration:none;
  display:flex; flex-direction:column; justify-content:flex-end;
  background:#040c18;
  box-shadow:0 8px 32px rgba(0,0,0,.30);
  transition:transform .42s cubic-bezier(.22,1,.36,1), box-shadow .42s ease;
}
.rbento-card:hover{
  transform:translateY(-5px);
  box-shadow:0 32px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(14,165,233,.18);
}

/* Grand numéro décoratif */
.rbento-card::before{
  content:attr(data-num);
  position:absolute; top:14px; right:18px;
  font-size:clamp(60px,5.5vw,84px); font-weight:900;
  font-family:var(--font-display);
  color:rgba(255,255,255,.06);
  line-height:1; letter-spacing:-.04em;
  z-index:2; pointer-events:none;
  transition:color .42s ease, transform .42s ease;
}
.rbento-card:hover::before{
  color:rgba(14,165,233,.11);
  transform:translateY(-5px);
}

/* Trait accent coloré qui se déroule au hover */
.rbento-card::after{
  content:'';
  position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--blue) 0%, rgba(14,165,233,.35) 70%, transparent 100%);
  z-index:5;
  transform:scaleX(0); transform-origin:left center;
  transition:transform .48s cubic-bezier(.22,1,.36,1);
}
.rbento-card:hover::after{ transform:scaleX(1); }

/* Image */
.rbento-img{
  position:absolute; inset:0;
}
.rbento-img img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  display:block;
  filter:brightness(.82) saturate(1.12);
  transition:transform 1.0s cubic-bezier(.22,1,.36,1), filter .50s ease;
  will-change:transform;
}
.rbento-card:hover .rbento-img img{
  transform:scale(1.07);
  filter:brightness(.78) saturate(1.15);
}

/* Dégradé overlay */
.rbento-overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(
    180deg,
    rgba(4,10,22,.04) 0%,
    rgba(4,10,22,.28) 42%,
    rgba(4,10,22,.88) 78%,
    rgba(4,10,22,.96) 100%
  );
  transition:background .50s ease;
}
.rbento-card:hover .rbento-overlay{
  background:linear-gradient(
    180deg,
    rgba(4,10,22,.10) 0%,
    rgba(4,10,22,.40) 42%,
    rgba(4,10,22,.92) 78%,
    rgba(4,10,22,.98) 100%
  );
}

/* Badge */
.rbento-card .real-badge{
  position:absolute; top:18px; left:18px; z-index:3;
}

/* Corps de contenu */
.rbento-body{
  position:relative; z-index:2;
  padding:20px 22px 24px;
}
.rbento-body-hero{
  padding:30px 34px 38px;
}

.rbento-sector{
  font-family:var(--font-display); font-size:10px; font-weight:800;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--blue); margin:0 0 9px;
}

.rbento-title{
  font-size:16px; font-weight:700;
  color:#ffffff; margin:0 0 10px;
  line-height:1.22; letter-spacing:-.01em;
}
.rbento-title-hero{
  font-size:clamp(21px,2.1vw,29px);
  margin:0 0 14px;
  letter-spacing:-.025em;
}

.rbento-loc{
  display:flex; align-items:center; gap:5px;
  font-size:11.5px; color:rgba(255,255,255,.50);
  font-weight:600; margin:0 0 12px;
}
.rbento-loc svg{
  stroke:currentColor; fill:none; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; flex-shrink:0;
}

.rbento-desc{
  font-size:13.5px; line-height:1.76;
  color:rgba(255,255,255,.78);
  margin:0 0 22px;
}
.rbento-desc-sm{
  font-size:12px; line-height:1.68;
  color:rgba(255,255,255,.65);
  margin:0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}

/* CTA (hero uniquement) */
.rbento-cta{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-size:11.5px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue);
  padding:9px 0; border-bottom:1.5px solid rgba(14,165,233,.45);
  opacity:0; transform:translateY(8px);
  transition:opacity .38s ease .06s, transform .38s cubic-bezier(.22,1,.36,1) .06s, border-color .26s ease;
}
.rbento-cta svg{
  stroke:currentColor; fill:none; stroke-width:2.5;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .28s ease;
}
.rbento-hero:hover .rbento-cta{ opacity:1; transform:translateY(0); }
.rbento-hero:hover .rbento-cta:hover{ border-color:var(--blue); }
.rbento-hero:hover .rbento-cta svg{ transform:translateX(5px); }

/* Entrée échelonnée */
.real-bento .rbento-card:nth-child(1){ --reveal-delay:0s; }
.real-bento .rbento-card:nth-child(2){ --reveal-delay:.07s; }
.real-bento .rbento-card:nth-child(3){ --reveal-delay:.13s; }
.real-bento .rbento-card:nth-child(4){ --reveal-delay:.19s; }
.real-bento .rbento-card:nth-child(5){ --reveal-delay:.25s; }
.real-bento .rbento-card.reveal{ transition-delay:var(--reveal-delay,0s); }

/* ── Responsive ── */
@media(max-width:1100px){
  .real-bento{
    grid-template-columns:1fr 1fr;
    grid-template-rows:400px 280px 280px;
  }
  .rbento-hero{ grid-column:1 / span 2; grid-row:1; }
}
@media(max-width:640px){
  .real-bento{
    grid-template-columns:1fr;
    grid-template-rows:auto;
  }
  .rbento-hero{ grid-column:1; min-height:420px; }
  .rbento-card:not(.rbento-hero){ min-height:260px; }
}

/* ══════════════════════════════════════════════════
   REAL SHOWCASE — layout éditorial asymétrique
   ══════════════════════════════════════════════════ */
.real-showcase{
  display:grid;
  grid-template-columns:1fr 420px;
  gap:20px;
  margin-top:52px;
  position:relative; z-index:1;
  align-items:stretch;
}

/* ── Projet featured (gauche) ── */
.real-featured{
  position:relative; border-radius:18px; overflow:hidden;
  min-height:560px; cursor:pointer;
  display:flex; flex-direction:column; justify-content:flex-end;
  text-decoration:none;
  box-shadow:0 24px 72px rgba(0,0,0,.36);
}
.real-featured-img{
  position:absolute; inset:0;
}
.real-featured-img img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  display:block;
  transition:transform .90s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.real-featured:hover .real-featured-img img{ transform:scale(1.05); }
.real-featured-overlay{
  position:absolute; inset:0;
  background:linear-gradient(
    180deg,
    rgba(2,8,20,.10) 0%,
    rgba(2,8,20,.30) 40%,
    rgba(2,8,20,.82) 100%
  );
  transition:background .60s ease;
}
.real-featured:hover .real-featured-overlay{
  background:linear-gradient(
    180deg,
    rgba(2,8,20,.15) 0%,
    rgba(2,8,20,.40) 40%,
    rgba(2,8,20,.88) 100%
  );
}
.real-featured .real-badge{
  position:absolute; top:24px; left:24px; z-index:3;
}
.real-featured-content{
  position:relative; z-index:2;
  padding:40px 36px 36px;
}
.real-featured-sector{
  font-family:var(--font-display); font-size:10.5px; font-weight:800;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--blue); margin:0 0 14px;
}
.real-featured-title{
  font-size:clamp(22px,2vw,30px); font-weight:700;
  color:#fff; margin:0 0 14px; line-height:1.18; letter-spacing:-.02em;
}
.real-featured-loc{
  display:flex; align-items:center; gap:6px;
  font-size:12.5px; color:rgba(255,255,255,.52);
  font-weight:600; margin:0 0 16px;
}
.real-featured-loc svg{
  stroke:currentColor; fill:none; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; flex-shrink:0;
}
.real-featured-desc{
  font-size:14px; line-height:1.72; color:rgba(255,255,255,.68);
  margin:0 0 24px;
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .55s cubic-bezier(.22,1,.36,1), opacity .40s ease;
}
.real-featured:hover .real-featured-desc{ max-height:120px; opacity:1; }
.real-featured-cta{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-size:12px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--blue);
  opacity:0; transform:translateY(6px);
  transition:opacity .40s ease .1s, transform .40s cubic-bezier(.22,1,.36,1) .1s;
}
.real-featured-cta svg{
  stroke:currentColor; fill:none; stroke-width:2.5;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .30s ease;
}
.real-featured:hover .real-featured-cta{ opacity:1; transform:translateY(0); }
.real-featured:hover .real-featured-cta svg{ transform:translateX(4px); }

/* Ligne déco bleue en bas du featured */
.real-featured::after{
  content:''; position:absolute; bottom:0; left:0; right:0;
  height:3px; z-index:4;
  background:linear-gradient(90deg, var(--blue) 0%, rgba(14,165,233,.30) 60%, transparent 100%);
}

/* ── Stack droite (4 items) ── */
.real-stack{
  display:flex; flex-direction:column;
  border-radius:18px; overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(8,20,40,.60);
  box-shadow:0 20px 56px rgba(0,0,0,.28);
}
.real-item{
  display:grid; grid-template-columns:96px 1fr auto;
  align-items:center; gap:18px;
  padding:20px 22px;
  border-bottom:1px solid rgba(255,255,255,.06);
  text-decoration:none; cursor:pointer;
  transition:background .25s ease;
  position:relative;
}
.real-item:last-child{ border-bottom:none; }
.real-item:hover{ background:rgba(14,165,233,.05); }
.real-item::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--blue); border-radius:0 2px 2px 0;
  transform:scaleY(0); transform-origin:center;
  transition:transform .30s cubic-bezier(.22,1,.36,1);
}
.real-item:hover::before{ transform:scaleY(1); }

.real-item-thumb{
  width:96px; height:72px; border-radius:10px; overflow:hidden;
  flex-shrink:0; background:rgba(255,255,255,.04);
}
.real-item-thumb img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  display:block;
  transition:transform .60s cubic-bezier(.22,1,.36,1);
}
.real-item:hover .real-item-thumb img{ transform:scale(1.10); }

.real-item-body{ min-width:0; }
.real-item-sector{
  font-family:var(--font-display); font-size:9.5px; font-weight:800;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--blue); margin:0 0 5px;
}
.real-item-title{
  font-size:13.5px; font-weight:700; color:#fff;
  margin:0 0 6px; line-height:1.22;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:color .22s ease;
}
.real-item:hover .real-item-title{ color:rgba(255,255,255,.88); }
.real-item-loc{
  display:flex; align-items:center; gap:4px;
  font-size:11px; color:rgba(255,255,255,.38);
  font-weight:600; margin:0 0 6px;
}
.real-item-loc svg{
  stroke:currentColor; fill:none; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; flex-shrink:0;
}
.real-item-desc{
  font-size:12px; line-height:1.60; color:rgba(255,255,255,.45);
  margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.real-item-badge{
  font-family:var(--font-display); font-size:9px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase;
  padding:4px 9px; border-radius:4px;
  flex-shrink:0; white-space:nowrap;
  align-self:flex-start;
}

/* Responsive */
@media(max-width:1024px){
  .real-showcase{ grid-template-columns:1fr; }
  .real-featured{ min-height:420px; }
  .real-stack{ border-radius:14px; }
}
@media(max-width:640px){
  .real-item{ grid-template-columns:76px 1fr; }
  .real-item-badge{ display:none; }
  .real-item-thumb{ width:76px; height:58px; }
}

/* ══════════════════════════════════════════════════
   NOS PARTENAIRES — image-based ticker
   ══════════════════════════════════════════════════ */
/* Titre "NOS RÉFÉRENCES" réduit */
.partenaires-section .section-title-v2{
  font-size:clamp(24px, 2.6vw, 40px);
}
.partenaires-section .section-eyebrow{
  margin-top:-6px;
  margin-bottom:18px;
}

/* Lignes décoratives de part et d'autre du titre */
.ref-title-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
}
.ref-title-line{
  position:relative;
  flex:0 1 230px;
  height:1.5px;
  border-radius:999px;
  background:linear-gradient(90deg, transparent 0%, rgba(14,165,233,.22) 40%, rgba(14,165,233,.90) 100%);
}
.ref-title-line::after{
  content:'';
  position:absolute; top:50%; right:-4px;
  width:5px; height:5px; border-radius:50%;
  background:var(--blue);
  transform:translateY(-50%);
  box-shadow:0 0 8px rgba(14,165,233,.55);
}
.ref-title-wrap .ref-title-line:last-child{
  background:linear-gradient(270deg, transparent 0%, rgba(14,165,233,.22) 40%, rgba(14,165,233,.90) 100%);
}
.ref-title-wrap .ref-title-line:last-child::after{
  right:auto; left:-4px;
}
@media (max-width:680px){
  .ref-title-line{ flex-basis:70px; }
}
@media (max-width:480px){
  .ref-title-line{ display:none; }
  .services-section .section-title-v2,
  .services-header .section-title-v2,
  .real-section .section-title-v2{ white-space:normal; }
}
/* ══════════════════════════════════════════════════
   CRÉDIBILITÉ — RÉSULTATS PAR SECTEUR
   ══════════════════════════════════════════════════ */
/* ── SECTION AU SERVICE DE TOUS LES SECTEURS ── */
.credibility-section{
  background:#fff;
  padding:96px 0 44px;
  position:relative;
  overflow:hidden;
}
.credibility-section::before{
  content:'';
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:900px; height:500px;
  background:radial-gradient(ellipse at center, rgba(14,165,233,.05) 0%, transparent 68%);
  pointer-events:none;
}
.credibility-section .section-title-v2{
  font-size:clamp(24px, 2.6vw, 40px);
  color:#0a1628;
}
.credibility-section .section-eyebrow{
  color:var(--blue-dark);
}

/* ── Grille de panneaux ── */
.credibility-panels{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  margin-top:52px;
  gap:1px;
  background:#e4ecf4;
  border-radius:20px;
  overflow:hidden;
  border:1px solid #e4ecf4;
  box-shadow:0 4px 24px rgba(10,22,40,.05);
  position:relative;
}

/* Chaque panneau */
.cred-panel{
  position:relative;
  padding:40px 14px 36px;
  display:flex;
  flex-direction:column;
  background:#fff;
  overflow:hidden;
  cursor:default;
  transition:background .36s ease;
}
.cred-panel:hover{
  background:#f4f9fd;
}

/* Lueur au bas du panneau */
.cred-panel-glow{
  position:absolute;
  bottom:-60px; left:50%;
  transform:translateX(-50%);
  width:200px; height:200px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(14,165,233,.14) 0%, transparent 70%);
  pointer-events:none;
  opacity:0;
  transition:opacity .45s ease, transform .45s ease;
}
.cred-panel:hover .cred-panel-glow{
  opacity:1;
  transform:translateX(-50%) translateY(-20px);
}

/* Ligne lumineuse en haut — se déploie au hover */
.cred-panel::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:1.5px;
  background:linear-gradient(90deg, transparent 0%, var(--blue) 50%, transparent 100%);
  opacity:0;
  transition:opacity .36s ease;
}
.cred-panel:hover::before{ opacity:1; }

/* Ligne lumineuse permanente très subtile */
.cred-panel::after{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(14,165,233,.30) 50%, transparent 100%);
}

/* Entête : icône + nom secteur */
.cred-panel-top{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:28px;
}
.cred-panel-ico{
  color:var(--blue-dark);
  opacity:1;
  flex-shrink:0;
  transition:color .30s ease;
}
.cred-panel:hover .cred-panel-ico{ color:var(--blue); }

.cred-sector{
  font-family:var(--font-display);
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--blue-dark);
  padding-bottom:7px;
  border-bottom:1px solid rgba(10,22,40,.16);
  transition:color .30s ease, border-color .30s ease;
}
.cred-panel:hover .cred-sector{
  color:var(--blue);
  border-bottom-color:var(--blue);
}

/* Chiffre outline */
.cred-panel-metric{
  display:flex;
  align-items:baseline;
  gap:2px;
  margin-bottom:28px;
}
.cred-num{
  font-family:var(--font-display);
  font-size:clamp(52px,5.1vw,68px);
  font-weight:900;
  line-height:.88;
  letter-spacing:-.04em;
  color:#1c232c;
  text-shadow:0 1px 0 rgba(10,22,40,.08);
  -webkit-text-stroke:0 transparent;
  transition:color .38s ease, text-shadow .38s ease;
}
.cred-panel:hover .cred-num{
  color:var(--blue);
  text-shadow:0 0 36px rgba(14,165,233,.22);
}
.cred-plus{
  font-family:var(--font-display);
  font-size:clamp(18px,1.7vw,24px);
  font-weight:900;
  line-height:1;
  align-self:flex-start;
  margin-top:6px;
  color:var(--blue-dark);
  -webkit-text-fill-color:var(--blue-dark);
  transition:color .38s ease, -webkit-text-fill-color .38s ease;
}
.cred-panel:hover .cred-plus{
  color:var(--blue);
  -webkit-text-fill-color:var(--blue);
}

/* Intitulé — style titre professionnel, lisible sur 1 ou 2 lignes */
.cred-desc{
  font-size:12px;
  font-weight:700;
  line-height:1.42;
  color:#0a1628;
  letter-spacing:.005em;
  margin-top:auto;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:color .30s ease;
}
@media(max-width:980px){
  .cred-desc{ white-space:normal; overflow:visible; text-overflow:unset; }
}
.cred-panel:hover .cred-desc{ color:var(--blue-dark,#0284c7); }

@media (max-width:980px){
  .credibility-panels{ grid-template-columns:repeat(3,1fr); border-radius:16px; }
  .cred-panel{ padding:34px 24px 30px; }
  .cred-desc{ white-space:normal; }
}
@media (max-width:600px){
  .credibility-panels{ grid-template-columns:repeat(2,1fr); border-radius:12px; }
  .cred-num{ font-size:clamp(42px,10vw,56px); }
  .cred-panel{ padding:28px 20px 26px; }
}
.partenaires-section{
  background:#28405c; padding:96px 0;
  overflow:hidden; position:relative;
}
.partenaires-section::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(14,165,233,0.06) 1px, transparent 1px);
  background-size:36px 36px; pointer-events:none;
}

.partenaires-ticker{
  position:relative; overflow:hidden;
  border-top:1px solid rgba(255,255,255,0.06);
  border-bottom:1px solid rgba(255,255,255,0.06);
  padding:20px 0 8px;
}
.partenaires-ticker::before,
.partenaires-ticker::after{
  content:""; position:absolute; top:0;
  width:160px; height:100%; z-index:2; pointer-events:none;
}
.partenaires-ticker::before{ left:0; background:linear-gradient(to right, var(--navy-mid) 0%, transparent 100%); }
.partenaires-ticker::after{ right:0; background:linear-gradient(to left, var(--navy-mid) 0%, transparent 100%); }

.partenaires-track{
  display:flex; align-items:center; gap:0;
  width:max-content;
  animation:tickerScroll 78s linear infinite;
}
@keyframes tickerScroll{
  0%  { transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .partenaires-track{ animation:none; }
}

/* Logo image box — fond blanc, légèrement agrandi */
.partenaire-item{
  width:206px; height:100px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  margin:0 11px; padding:0; position:relative;
  border-radius:12px; overflow:hidden;
  background:#ffffff;
  border:1px solid rgba(0,0,0,0.08);
  box-shadow:0 4px 18px rgba(0,0,0,0.12);
  transition:box-shadow var(--tr), transform var(--tr), border-color var(--tr);
}
.partenaire-item:hover{
  box-shadow:0 10px 28px rgba(14,165,233,0.20);
  border-color:rgba(14,165,233,0.35);
  transform:translateY(-3px);
}

/* Logo — padding minimal pour un affichage maximal du logo */
.partenaire-item img{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%;
  object-fit:contain;
  padding:4px 8px;
  filter:none; opacity:1;
  transition:opacity var(--tr), transform var(--tr);
}
.partenaire-item:hover img{ opacity:.90; transform:scale(1.04); }
/* Logos naturellement petits — zoom pour mieux occuper la card */
.partenaire-item--lg img{
  padding:0;
  transform:scale(1.30);
  transform-origin:center center;
}
.partenaire-item--lg:hover img{
  opacity:.90;
  transform:scale(1.38);
}
/* Modificateur taille + (Finatech, Tanger Med) */
.partenaire-item--xl img{ transform:scale(1.48); }
.partenaire-item--xl:hover img{ transform:scale(1.56); }
/* Modificateur taille ++ (TGCC uniquement) */
.partenaire-item--xxl img{ transform:scale(1.85); }
.partenaire-item--xxl:hover img{ transform:scale(1.93); }
/* Modificateur taille - (Attijariwafa, Région Souss) */
.partenaire-item--xs img{ transform:scale(1.12); }
.partenaire-item--xs:hover img{ transform:scale(1.20); }
/* Fond blanc garanti + mix-blend pour intégration propre du logo */
.partenaire-item--white{ background:#fff !important; }
.partenaire-item--white img{ mix-blend-mode:multiply; padding:4px 10px; }

/* Texte fallback — visible seulement si l'image ne charge pas */
.partenaire-item span{
  position:relative; z-index:2;
  font-family:var(--font-display);
  font-size:12.5px; font-weight:800;
  letter-spacing:.10em; text-transform:uppercase;
  color:rgba(7,16,30,0.62); white-space:nowrap;
  text-align:center; padding:0 8px;
  transition:color var(--tr);
}
.partenaire-item:hover span{ color:rgba(7,16,30,0.82); }
/* Masquer le span quand l'image est bien chargée (src valide) */
.partenaire-item img:not([src=""]):not([src*="undefined"]) + span{ display:none; }

/* ══════════════════════════════════════════════════
   NOS DERNIÈRES ACTUS — Editorial strip
   ══════════════════════════════════════════════════ */
.actus-section{
  background:#fff; padding:44px 0 96px;
  position:relative; overflow:hidden;
}
.actus-section::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(14,165,233,.06) 1px, transparent 1px);
  background-size:40px 40px; pointer-events:none;
}

.actus-header{
  display:flex; align-items:flex-end;
  justify-content:space-between; gap:24px; margin-bottom:52px;
  position:relative; z-index:1;
}
.actus-eyebrow{
  margin:0 0 12px; font-size:12px; font-weight:800;
  text-transform:uppercase; letter-spacing:.22em; color:rgba(14,165,233,.90);
}
.actus-title{
  margin:0; font-family:var(--font-display);
  font-size:clamp(24px, 2.6vw, 40px);
  font-weight:900; text-transform:uppercase;
  letter-spacing:.02em; line-height:1.05; color:#0a1628;
}
.actus-title-accent{ color:var(--blue); }
.actus-see-all{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-display); font-size:16.5px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:var(--blue);
  white-space:nowrap; flex-shrink:0; align-self:flex-end;
  padding:0; border:none; background:none;
  transition:color .26s ease, transform .28s ease;
}
.actus-see-all:hover{ color:var(--blue-dark); }

/* ─── Strip container ─── */
.actus-strip{
  position:relative; z-index:1;
  border-top:1px solid rgba(10,22,40,.10);
  padding-top:48px;
}

/* ─── Article row ─── */
.actu-row{
  display:grid;
  grid-template-columns:1fr 380px;
  gap:0 48px;
  align-items:center;
}
@media(max-width:900px){
  .actu-row{ grid-template-columns:1fr; }
  .actu-row-img{ display:none; }
}

/* Colonne centrale : contenu éditorial */
.actu-row-body{
  display:flex; flex-direction:column; gap:0; padding:8px 0 8px;
}
.actu-row-meta{
  display:flex; align-items:center; gap:12px; margin-bottom:20px;
}
.actu-row-tag{
  display:inline-block; padding:5px 13px;
  background:rgba(14,165,233,.10);
  border:1px solid rgba(14,165,233,.28);
  border-radius:3px;
  font-family:var(--font-display); font-size:10.5px;
  font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue);
}
.actu-row-dot{
  width:3px; height:3px; border-radius:50%;
  background:rgba(10,22,40,.20); flex-shrink:0;
}
.actu-row-date{
  font-size:12px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(10,22,40,.40);
}
.actu-row-title{
  margin:0 0 18px; font-family:var(--font-display);
  font-size:clamp(22px,2.2vw,30px); font-weight:900;
  line-height:1.16; letter-spacing:.01em;
  color:var(--blue); text-transform:uppercase;
}
.actu-row-desc{
  margin:0 0 32px; font-size:15px; line-height:1.76;
  color:rgba(10,22,40,.55); font-weight:400; max-width:520px;
}
.actu-row-cta{
  display:inline-flex; align-items:center; gap:12px;
  padding:12px 26px;
  border:1.5px solid rgba(10,22,40,.18);
  border-radius:6px;
  background:rgba(10,22,40,.04);
  font-family:var(--font-display); font-size:12px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(10,22,40,.70);
  align-self:flex-start;
  transition:background .26s ease, border-color .26s ease, color .26s ease, gap .26s ease;
}
.actu-row-cta svg{ flex-shrink:0; transition:transform .26s ease; }
.actu-row-cta:hover{
  background:rgba(14,165,233,.10);
  border-color:rgba(14,165,233,.45);
  color:var(--blue); gap:16px;
}
.actu-row-cta:hover svg{ transform:translateX(4px); }

/* Colonne droite : image cadrée */
.actu-row-img{
  border-radius:14px; overflow:hidden;
  aspect-ratio:1/1;
  max-width:320px; margin-left:auto;
  background:#091525;
  border:1px solid rgba(10,22,40,.08);
  box-shadow:0 8px 32px rgba(7,21,38,.10), 0 24px 60px rgba(7,21,38,.08);
  position:relative; cursor:pointer;
}
.actu-row-img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(14,165,233,.10) 0%, transparent 55%);
  opacity:0;
  transition:opacity .65s cubic-bezier(.25,.46,.45,.94);
  pointer-events:none;
}
.actu-row-img:hover::after{ opacity:1; }
.actu-row-img img{
  width:100%; height:100%; object-fit:contain; object-position:center;
  display:block; will-change:transform;
  transition:transform .90s cubic-bezier(.25,.46,.45,.94),
             filter .90s cubic-bezier(.25,.46,.45,.94);
  filter:brightness(1) saturate(1.02);
}
.actu-row-img:hover img{
  transform:scale(1.04);
  filter:brightness(1.05) saturate(1.12);
}

/* ══════════════════════════════════════════════════
   SECTION PLAQUETTE — compact
   ══════════════════════════════════════════════════ */
.prem-section{ position:relative; overflow:hidden; }

/* ══════════════════════════════════════════════════
   DOCS HUB — Hub de téléchargement premium
   ══════════════════════════════════════════════════ */
.docs-hub-section{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,rgba(62,132,186,1) 0%,32%,rgba(46,108,160,1) 55%,76%,rgba(34,88,136,1) 100%);
  padding:72px 0 80px;
}
.docs-hub-section::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 80% at 50% 0%,rgba(255,255,255,0.06) 0%,transparent 70%);
}
.docs-hub-inner{
  width:min(1140px,92%); margin:0 auto; position:relative; z-index:1;
}

/* En-tête */
.docs-hub-header{ text-align:center; margin-bottom:60px; }
.docs-hub-eyebrow{
  display:block;
  font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  font-size:11px; font-weight:700; letter-spacing:.30em; text-transform:uppercase;
  color:rgba(255,255,255,0.55); margin-bottom:16px;
}
.docs-hub-title{
  font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  font-size:clamp(36px,5vw,58px); font-weight:900;
  text-transform:uppercase; letter-spacing:.06em;
  color:#ffffff; line-height:1; margin:0 0 18px;
}
.docs-hub-line{
  width:56px; height:3px; margin:0 auto 20px;
  background:rgba(255,255,255,0.35); border-radius:2px;
}
.docs-hub-sub{
  font-size:15px; color:rgba(255,255,255,0.62);
  max-width:520px; margin:0 auto; line-height:1.70;
}

/* Grille */
.docs-hub-grid{
  display:grid; grid-template-columns:1fr 1px 1fr; gap:0; align-items:stretch;
}
.docs-hub-sep{
  background:rgba(255,255,255,0.12);
  margin:0 48px;
  border-radius:1px;
}

/* Carte document */
.doc-card{
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:24px; padding:40px 36px;
  display:flex; flex-direction:column; gap:0;
  transition:background .25s, border-color .25s, transform .25s;
  backdrop-filter:blur(4px);
}
.doc-card:hover{
  background:rgba(255,255,255,0.11);
  border-color:rgba(255,255,255,0.22);
  transform:translateY(-4px);
}

.doc-card-top{
  display:flex; align-items:center; gap:14px; margin-bottom:24px;
}
.doc-card-icon{
  width:48px; height:48px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.16);
  border-radius:14px;
}
.doc-card-icon svg{ width:22px; height:22px; stroke:rgba(255,255,255,0.85); }
.doc-card-icon--accent{ background:rgba(14,165,233,0.18); border-color:rgba(14,165,233,0.30); }
.doc-card-icon--accent svg{ stroke:#7dd3fc; }

.doc-card-badge{
  font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  font-size:10px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,0.50);
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12);
  padding:4px 10px; border-radius:20px;
}
.doc-card-badge--accent{
  color:rgba(125,211,252,0.90); background:rgba(14,165,233,0.12);
  border-color:rgba(14,165,233,0.25);
}

.doc-card-title{
  font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  font-size:clamp(22px,2.5vw,28px); font-weight:900;
  text-transform:uppercase; letter-spacing:.04em;
  color:#ffffff; margin:0 0 12px; line-height:1.1;
}
.doc-card-desc{
  font-size:14px; color:rgba(255,255,255,0.58);
  line-height:1.72; margin:0; flex:1;
}
.doc-card-divider{
  height:1px; background:rgba(255,255,255,0.10);
  margin:28px 0;
}
.doc-card-actions{ display:flex; flex-direction:column; gap:12px; }

/* Boutons */
.doc-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 20px; border-radius:12px;
  font-size:12.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none; transition:opacity .20s, transform .20s, box-shadow .20s;
}
.doc-btn svg{ width:15px; height:15px; flex-shrink:0; }
.doc-btn--primary{
  background:rgba(255,255,255,0.95); color:#0a1f3d;
  box-shadow:0 4px 20px rgba(0,0,0,0.18);
}
.doc-btn--primary:hover{ opacity:.90; transform:translateY(-1px); box-shadow:0 8px 28px rgba(0,0,0,0.24); }
.doc-btn--ghost{
  background:rgba(255,255,255,0.08); color:rgba(255,255,255,0.85);
  border:1px solid rgba(255,255,255,0.18);
}
.doc-btn--ghost:hover{ background:rgba(255,255,255,0.14); transform:translateY(-1px); }

/* Responsive */
@media(max-width:860px){
  .docs-hub-grid{ grid-template-columns:1fr; gap:24px; }
  .docs-hub-sep{ display:none; }
}
@media(max-width:540px){
  .docs-hub-section{ padding:52px 0 60px; }
  .doc-card{ padding:30px 24px; }
}
.prem-dl-inner{
  position:relative;
  display:grid; grid-template-columns:1.15fr 0.85fr;
  min-height:30px;
}

.prem-dl-left{
  position:relative;
  background-color:#0a1929;
  background-image:
    linear-gradient(135deg, rgba(8,18,45,0.75) 0%, rgba(10,28,65,0.58) 50%, rgba(8,18,45,0.72) 100%),
    url('Images01/etude-et-conception.png');
  background-size: 100% 100%, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  padding:0px max(48px, calc((100vw - 1120px)/2)) 0px max(48px, calc((100vw - 1120px)/2 + 24px));
  display:flex; flex-direction:column; justify-content:center; z-index:1;
}
.prem-dl-left::after{ display:none; }
.prem-dl-left::before{ display:none; }

/* ── Séparateur — relief lumineux ── */
.prem-sep{
  position:absolute;
  left:57.5%;
  top:0; bottom:0;
  width:64px;
  transform:translateX(-50%);
  z-index:10;
  pointer-events:none;
}

.prem-sep-glow{ display:none; }
.prem-sep-shimmer{ display:none; }

.prem-sep-ridge{
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    transparent              0%,
    rgba(6,28,68,0.06)      15%,
    rgba(6,28,68,0.14)      36%,
    rgba(6,28,68,0.07)      43%,
    rgba(180,222,252,0.70)  47%,
    rgba(244,251,255,0.97)  50%,
    rgba(210,237,255,0.55)  53%,
    rgba(240,249,255,0.18)  65%,
    transparent              82%
  );
  -webkit-mask-image:linear-gradient(
    180deg,
    transparent           0%,
    rgba(0,0,0,0.12)      5%,
    rgba(0,0,0,0.42)     12%,
    rgba(0,0,0,0.78)     19%,
    black                27%,
    black                73%,
    rgba(0,0,0,0.78)     81%,
    rgba(0,0,0,0.42)     88%,
    rgba(0,0,0,0.12)     95%,
    transparent          100%
  );
  mask-image:linear-gradient(
    180deg,
    transparent           0%,
    rgba(0,0,0,0.12)      5%,
    rgba(0,0,0,0.42)     12%,
    rgba(0,0,0,0.78)     19%,
    black                27%,
    black                73%,
    rgba(0,0,0,0.78)     81%,
    rgba(0,0,0,0.42)     88%,
    rgba(0,0,0,0.12)     95%,
    transparent          100%
  );
}

.prem-dl-eyebrow{
  margin:0 0 10px; font-size:15px; font-weight:600; letter-spacing:2px;
  color:rgba(255,255,255,0.92); text-transform:uppercase;
  text-shadow:0 1px 8px rgba(0,0,0,0.50);
}
.prem-dl-heading{
  margin:0 0 8px; font-size:clamp(26px,2.8vw,40px);
  font-weight:900; letter-spacing:.12em; line-height:1; color:#fff;
  font-family:var(--font-display);
}
.prem-dl-sub{
  margin:0 0 24px; font-size:16px; font-weight:500; letter-spacing:2px;
  color:rgba(255,255,255,0.92); text-transform:lowercase;
  text-shadow:0 1px 8px rgba(0,0,0,0.50);
}
.prem-dl-btns{ display:flex; gap:20px; flex-wrap:wrap; }
.prem-dl-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 22px; border-radius:4px;
  background:rgba(255,255,255,0.08); border:2px solid rgba(255,255,255,0.85);
  color:#fff; font-size:13px; font-weight:700; letter-spacing:.3px;
  text-decoration:none; white-space:nowrap;
  transition:background .20s ease, border-color .20s ease, transform .20s ease;
}
.prem-dl-btn svg{ width:13px; height:13px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.prem-dl-btn:hover{ background:var(--blue); border-color:var(--blue); color:#fff; transform:translateY(-2px); }

.prem-dl-right{
  position:relative;
  background:linear-gradient(145deg,#f0f7ff 0%,#e8f3fb 55%,#ddeef8 100%);
  display:flex; align-items:center; justify-content:center;
  padding:36px 56px;
  overflow:hidden;
}
.prem-dl-right::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(circle, rgba(34,88,136,0.05) 1px, transparent 1px);
  background-size:26px 26px; pointer-events:none;
}
.prem-dl-right::after{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:500px; height:380px;
  background:radial-gradient(ellipse, rgba(46,108,160,0.10) 0%, rgba(62,132,186,0.04) 50%, transparent 72%);
  pointer-events:none;
}

/* ═══════════════════════════════════════════
   MOCKUP LIVRE 3D — Plaquette institutionnelle
   ═══════════════════════════════════════════ */
.prem-book-3d{
  position:relative; z-index:2;
  filter:
    drop-shadow(0 40px 72px rgba(8,20,42,0.52))
    drop-shadow(0 12px 36px rgba(22,64,110,0.34))
    drop-shadow(0  4px 12px rgba(0,0,0,0.20));
  transition:filter .45s ease, transform .45s cubic-bezier(.34,1.56,.64,1);
}
.prem-dl-right:hover .prem-book-3d{
  filter:
    drop-shadow(0 56px 96px rgba(8,20,42,0.44))
    drop-shadow(0 18px 52px rgba(22,64,110,0.28));
  transform:translateY(-12px);
}

/* ── Couverture principale (sans tranche) ── */
.prem-book-front{
  position:relative;
  width:220px; height:316px;
  border-radius:11px;
  display:flex; flex-direction:row;
  overflow:visible;
  transform:perspective(900px) rotateY(-24deg) rotateX(4deg);
  transition:transform .55s cubic-bezier(.34,1.56,.64,1);
}
.prem-book-front::before{ display:none; }

/* Pages côté droit */
.prem-book-front::after{
  content:"";
  position:absolute; right:-11px; top:14px; bottom:14px; width:11px;
  background:repeating-linear-gradient(0deg,#f4f9fd 0px,#f4f9fd 1.5px,#dce8f2 1.5px,#dce8f2 3px);
  border-radius:0 4px 4px 0;
  box-shadow:4px 0 10px rgba(0,0,0,0.20), 2px 0 6px rgba(0,0,0,0.10);
}
.prem-dl-right:hover .prem-book-front{
  transform:perspective(900px) rotateY(-11deg) rotateX(2deg);
}

/* ══ COUVERTURE — même couleur que navbar ══ */
.prem-book-cover{
  flex:1; position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  background:linear-gradient(135deg,
    #3e84ba 0%,
    #2e6ca0 55%,
    #225888 100%
  );
  border-radius:11px;
  box-shadow:
    inset -10px 0 28px rgba(0,0,0,0.14),
    inset  0  4px 16px rgba(255,255,255,0.06);
}

/* Fond décoratif CSS */
.prem-book-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.prem-book-bg::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(180,215,255,0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180,215,255,0.09) 1px, transparent 1px);
  background-size:20px 20px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,0.90) 0%, transparent 60%);
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0.90) 0%, transparent 60%);
}

/* Voile de lisibilité — léger pour garder la vraie couleur navbar */
.prem-book-overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(
    180deg,
    transparent           0%,
    rgba(0,0,0,0.08)     40%,
    rgba(0,0,0,0.32)     72%,
    rgba(0,0,0,0.52)    100%
  );
}

/* Gloss */
.prem-book-gloss{
  position:absolute; inset:0; z-index:6; pointer-events:none;
  background:linear-gradient(130deg,
    rgba(255,255,255,0.14)  0%,
    rgba(255,255,255,0.06) 26%,
    transparent 44%,
    rgba(0,0,0,0.07) 100%
  );
}

/* En-tête logo — fond blanc, logo en vraies couleurs */
.prem-book-hd{
  position:relative; z-index:2;
  padding:14px 14px 14px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.96);
  border-bottom:1px solid rgba(255,255,255,0.20);
}
.prem-book-logo{
  height:50px; width:auto; max-width:180px; object-fit:contain;
  image-rendering:-webkit-optimize-contrast;
  image-rendering:crisp-edges;
  filter:brightness(1.05) contrast(1.10) saturate(1.10);
}

/* Corps titre — remonté, centré */
.prem-book-bd{
  position:relative; z-index:2; flex:1;
  padding:22px 14px 10px 14px;
  display:flex; flex-direction:column; justify-content:flex-start; align-items:center; text-align:center;
}
.prem-book-bd-rule{
  width:26px; height:2px; margin-bottom:13px;
  background:linear-gradient(90deg, rgba(255,255,255,0.90), rgba(255,255,255,0.40));
  border-radius:2px;
}
.prem-book-bd-title{
  font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  font-size:20px; font-weight:900; letter-spacing:.07em; text-transform:uppercase;
  color:#ffffff; line-height:1.10; margin:0 0 28px;
  text-shadow:0 2px 12px rgba(0,0,0,0.50);
}
.prem-book-bd-sep{
  width:80%; height:1px; margin-bottom:13px;
  background:rgba(255,255,255,0.35);
}
.prem-book-bd-domain{
  font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  font-size:9px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:#ffffff; line-height:1.4; margin:0;
  white-space:nowrap;
  text-shadow:0 1px 10px rgba(0,0,0,0.55);
}

/* Tranche droite — PROMETI · 2026 vertical */
.prem-book-rstrip{
  width:26px; flex-shrink:0;
  background:linear-gradient(180deg, #1a3d5c 0%, #122c44 100%);
  border-radius:0 11px 11px 0;
  display:flex; align-items:center; justify-content:center;
  box-shadow:inset 2px 0 8px rgba(0,0,0,0.25);
}
.prem-book-rstrip-txt{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  font-size:8px; font-weight:800; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,0.90);
  text-shadow:0 0 10px rgba(100,180,255,0.40);
}

/* Pied de couverture — PROMETI · 2026 aligné à droite */
.prem-book-ft{
  position:relative; z-index:2;
  background:rgba(2,8,28,0.82);
  padding:11px 14px 11px 14px;
  display:flex; align-items:center; justify-content:flex-end;
  border-top:0.5px solid rgba(255,255,255,0.18);
}
.prem-book-ft-txt{
  font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  font-size:11px; font-weight:900; letter-spacing:.28em; text-transform:uppercase;
  color:#ffffff;
  text-shadow:
    0 0 18px rgba(140,210,255,0.95),
    0 0  8px rgba(140,210,255,0.70),
    0  1px 4px rgba(0,0,0,0.80);
  filter:drop-shadow(0 0 4px rgba(120,200,255,0.60));
}

.prem-dl-fallback{ width:min(360px,84%); transform:perspective(900px) rotateY(-14deg) rotateX(3deg); border-radius:7px; overflow:hidden; transition:transform .50s var(--ease);
  filter:drop-shadow(0 24px 48px rgba(2,84,153,0.18)) drop-shadow(0 4px 14px rgba(2,84,153,0.12)); }
.prem-dl-right:hover .prem-dl-fallback{ transform:perspective(900px) rotateY(-6deg) rotateX(1deg) translateY(-6px); }
.prem-fallback-cover{ background:linear-gradient(135deg, rgba(62,132,186,1) 0%, rgba(46,108,160,1) 55%, rgba(34,88,136,1) 100%); border:1px solid rgba(255,255,255,0.18); box-shadow:0 36px 70px rgba(10,22,40,0.42), inset 0 1px 0 rgba(255,255,255,0.12); padding:38px 34px 34px; display:flex; flex-direction:column; align-items:flex-start; min-height:260px; position:relative; overflow:hidden; }
.prem-fallback-pattern{ position:absolute; inset:0; background-image:linear-gradient(rgba(96,165,250,0.04) 1px, transparent 1px),linear-gradient(90deg, rgba(96,165,250,0.04) 1px, transparent 1px); background-size:22px 22px; }
.prem-fallback-logo{ height:32px; width:auto; object-fit:contain; image-rendering:auto; position:relative; z-index:1; margin-bottom:auto; }
.prem-fallback-lines{ position:relative; z-index:1; margin:28px 0 24px; width:100%; display:flex; flex-direction:column; gap:9px; }
.prem-fallback-lines div{ height:2px; border-radius:999px; background:rgba(255,255,255,0.11); }
.prem-fallback-lines div:first-child{ width:70%; background:rgba(96,165,250,0.38); }
.prem-fallback-lines div:nth-child(2){ width:88%; }
.prem-fallback-lines div:nth-child(3){ width:58%; }
.prem-fallback-lines div:last-child{ width:76%; }
.prem-fallback-badge{ position:relative; z-index:1; display:inline-block; padding:5px 12px; border:1px solid rgba(96,165,250,0.32); border-radius:3px; font-size:9.5px; font-weight:800; letter-spacing:3px; color:rgba(96,165,250,0.76); text-transform:uppercase; }

/* ══════════════════════════════════════════════════
   SECTION CONTACT — 2 colonnes : info + carte
   ══════════════════════════════════════════════════ */
.contact-section{
  background:#28405c; padding:96px 0;
  position:relative; overflow:hidden;
}
.contact-section::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(14,165,233,0.06) 1px, transparent 1px);
  background-size:36px 36px; pointer-events:none;
}
.contact-inner{
  display:grid; grid-template-columns:1fr 1fr;
  gap:48px; align-items:stretch;
  position:relative; z-index:1;
}

/* Left: contact info */
.contact-info-col{}
.contact-main-title{
  margin:0 0 28px;
  font-family:var(--font-display);
  font-size:clamp(22px, 2.4vw, 38px);
  font-weight:900; line-height:.96; letter-spacing:.03em;
  text-transform:uppercase; color:#fff;
  white-space:nowrap;
}
@media(max-width:640px){
  .contact-main-title{ white-space:normal; }
}
.contact-main-title span{ color:var(--blue); }

.contact-item{
  display:flex; align-items:center;
  gap:14px; min-height:58px; /* plus compact */
  padding:12px 16px; border-radius:8px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.07);
  transition:background var(--tr), border-color var(--tr);
  margin-bottom:10px; /* fallback sans wrapper .contact-items */
  box-sizing:border-box;
}
.contact-item:last-of-type{ margin-bottom:0; }
.contact-item:hover{ background:rgba(255,255,255,0.06); border-color:rgba(14,165,233,0.20); }
.contact-item-icon{
  width:24px; height:24px;
  background:none; border:none; box-shadow:none;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; color:var(--blue);
}
.contact-item-icon svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.contact-item-body{ flex:1; min-width:0; }
.contact-item-label{
  display:block; font-size:10.5px; font-weight:800;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,0.40); margin-bottom:5px;
}
.contact-item-val{
  font-size:13.5px; font-weight:600;
  color:rgba(255,255,255,0.78); line-height:1.52;
}
.ci-hours-row{
  display:flex; align-items:baseline; gap:16px;
}
.ci-hours-row + .ci-hours-row{ margin-top:5px; }
.ci-hours-day{
  flex:0 0 64px;
  color:rgba(255,255,255,0.50); font-weight:600;
}
.ci-hours-time{
  color:#fff; font-weight:700; letter-spacing:.01em;
}
.contact-item-val a{
  color:rgba(255,255,255,0.78); text-decoration:none;
  transition:color var(--tr);
}
.contact-item-val a:hover{ color:#fff; }
.contact-item-sub{
  display:block; font-size:12.5px; font-weight:500;
  color:rgba(255,255,255,0.40); margin-top:2px;
}


/* ── Colonne carte Google Maps ───────────────────────────────── */
.contact-map-col{ display:flex; flex-direction:column; }
.contact-map-title{
  margin:0 0 16px;
  font-family:var(--font-display);
  font-size:14px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,0.55);
}
.contact-map-wrap{
  position:relative;
  border-radius:14px; overflow:hidden;
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 16px 48px rgba(0,0,0,0.50);
  flex:1; min-height:400px;
}
.contact-map-wrap iframe{
  position:absolute;
  top:-160px; right:0; bottom:0; left:0;
  width:100%; height:calc(100% + 160px);
  border:0; display:block;
}
.map-directions-btn{
  position:absolute; top:14px; left:14px; z-index:10;
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 14px;
  background:rgba(10,18,30,0.82);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:8px;
  color:rgba(255,255,255,0.88);
  font-size:12px; font-weight:600; letter-spacing:.04em;
  text-decoration:none;
  transition:background .2s, color .2s, border-color .2s;
  box-shadow:0 4px 14px rgba(0,0,0,0.35);
}
.map-directions-btn svg{
  width:13px; height:13px; flex-shrink:0;
  stroke:var(--blue);
}
.map-directions-btn:hover{
  background:rgba(10,18,30,0.96);
  border-color:rgba(255,255,255,0.30);
  color:#fff;
}

/* ══════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════ */
.site-footer{
  background:#28405c; position:relative; overflow:hidden;
}
.site-footer::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(14,165,233,0.50), transparent);
}
.site-footer::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(800px 260px at 18% 0%, rgba(14,165,233,0.05), transparent 68%);
}
.footer-inner{
  position:relative; z-index:1; width:min(1260px,92%); margin:0 auto;
  padding:56px 0 40px;
  display:grid; grid-template-columns:1.5fr 0.9fr 1.1fr 1.15fr;
  gap:48px; align-items:start;
}
.footer-brand-logo{ height:42px; width:auto; display:block; margin-bottom:18px; object-fit:contain; image-rendering:auto; -webkit-transform:translateZ(0); transform:translateZ(0); filter:drop-shadow(0 1px 2px rgba(0,0,0,0.10)); }
.footer-brand-desc{ font-size:13.5px; line-height:1.90; color:#fff; font-weight:500; }
.footer-col-title{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:2px; color:var(--blue); margin:0 0 18px; padding-bottom:10px; border-bottom:1.5px solid rgba(14,165,233,0.35); }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px; }
.footer-col ul li a{ display:inline-flex; align-items:center; font-size:14px; font-weight:600; color:rgba(255,255,255,0.65); text-decoration:none; padding:4px 0; position:relative; transition:color .20s ease, padding-left .20s ease; }
.footer-col ul li a::before{ content:"›"; font-size:14px; line-height:1; opacity:0; transform:translateX(-6px); color:rgba(255,255,255,0.38); transition:opacity .20s ease, transform .20s ease, width .20s ease, margin-right .20s ease; width:0; overflow:hidden; margin-right:0; }
.footer-col ul li a:hover{ color:#fff; padding-left:13px; }
.footer-col ul li a:hover::before{ opacity:1; transform:translateX(0); width:10px; margin-right:4px; }
.footer-col-contact .footer-col-title{ color:var(--blue) !important; }
.footer-col-contact p:not(.footer-col-title){ font-size:13.5px; color:#fff; font-weight:500; line-height:1.80; margin:0 0 10px; }
.footer-col-contact a{ color:#fff; text-decoration:none; transition:color .18s ease; }
.footer-col-contact a:hover{ color:var(--blue); }
.footer-contact-item{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:#fff; font-weight:500; line-height:1.70; margin:0 0 13px; }
.footer-contact-item:last-child{ margin-bottom:0; }
.footer-contact-item a{ color:#fff; text-decoration:none; transition:color .18s ease; font-size:14.5px; }
.footer-contact-item--fax a{ font-size:14.5px; font-weight:600; }
.footer-contact-item--fax .footer-contact-icon,
.footer-contact-item--fax .footer-contact-icon svg{ width:22px; height:22px; }      
.footer-contact-item a:hover{ color:var(--blue); }
.footer-contact-icon{ flex-shrink:0; width:20px; height:20px; margin-top:2px; display:flex; align-items:center; justify-content:center; color:var(--blue); }
.footer-contact-icon svg{ width:20px; height:20px; stroke:currentColor; fill:none; }
.footer-social-links{ display:flex; gap:10px; margin-bottom:16px; }
.footer-social-btn{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:9px; background:rgba(255,255,255,0.09); border:1.5px solid rgba(255,255,255,0.32); color:rgba(255,255,255,0.90); text-decoration:none; transition:background var(--tr), border-color var(--tr), color var(--tr), transform var(--tr); }
.footer-social-btn svg{ width:17px; height:17px; display:block; }
.footer-social-x:hover { background:#000; border-color:#fff; color:#fff; transform:translateY(-2px); }
.footer-social-li:hover{ background:#0A66C2; border-color:#0A66C2; color:#fff; transform:translateY(-2px); }
.footer-social-desc{ font-size:14px; line-height:1.85; color:#fff; font-weight:500; margin:0; max-width:210px; }
/* ── Certification strip ── */
.footer-certs{
  position:relative; z-index:1;
  width:min(1260px,92%); margin:0 auto;
  padding:20px 0;
  border-top:1px solid rgba(255,255,255,.07);
  display:flex; align-items:center; justify-content:center;
  gap:0; flex-wrap:nowrap;
}
.footer-cert-item{
  display:flex; align-items:center; gap:14px;
  padding:0 48px;
  flex-shrink:1; min-width:0;
}
.footer-cert-item:not(:last-child){
  border-right:1px solid rgba(255,255,255,.10);
}
.footer-cert-icon{
  width:50px; height:50px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border-radius:11px; padding:6px;
  border:1px solid rgba(14,165,233,0.20);
  box-shadow:0 4px 14px rgba(0,0,0,0.18);
  overflow:hidden;
}
.footer-cert-icon svg{ width:40px; height:40px; }
.footer-cert-icon img{
  width:100%; height:100%; object-fit:contain; display:block;
}
/* TÜV NORD — fond sombre, mêmes dimensions qu'Autodesk */
.footer-cert-icon:has(img[src*="nord"]){
  background:#091525;
  padding:0;
  width:50px; height:50px;
  border-color:rgba(14,165,233,.15);
}
.footer-cert-icon img[src*="nord"]{
  object-fit:cover;
}
.footer-cert-body{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.footer-cert-label{
  font-size:10.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.14em; color:var(--blue); line-height:1;
}
.footer-cert-name{
  font-size:14px; font-weight:700;
  color:rgba(255,255,255,.75); line-height:1.2;
}
.footer-cert-sub{
  font-size:11.5px; font-weight:500;
  color:rgba(255,255,255,.40); line-height:1.2;
}
.footer-bottom{ position:relative; z-index:1; width:min(1260px,92%); margin:0 auto; border-top:1px solid rgba(255,255,255,0.20); box-shadow:0 -1px 0 rgba(14,165,233,0.10); padding:18px 0 22px; display:flex; align-items:center; justify-content:center; }
.footer-copy-text{ font-size:13px; font-weight:600; color:rgba(255,255,255,0.70); letter-spacing:.25px; text-align:center; margin:0; }

/* ══════════════════════════════════════════════════
   COOKIE POPUP — RGPD (glassmorphism flottant)
   ══════════════════════════════════════════════════ */
.cookie-banner{
  position:fixed; bottom:0; left:0; right:0; z-index:9998;
  display:flex; justify-content:center; align-items:stretch;
  padding:0;
  pointer-events:none;
  opacity:0;
  visibility:hidden;         /* accessibilité : masqué aux lecteurs d'écran tant qu'invisible */
  transform:translateY(100%); /* départ hors-écran vers le bas — aucun flash possible */
  transition:opacity .40s cubic-bezier(.4,0,.2,1),
             transform .40s cubic-bezier(.4,0,.2,1),
             visibility 0s linear .40s;
}
.cookie-banner.visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:all;
  transition:opacity .40s cubic-bezier(.4,0,.2,1),
             transform .40s cubic-bezier(.4,0,.2,1),
             visibility 0s linear 0s;
}
.cookie-inner{
  position:relative; overflow:hidden;
  background:#152233;
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border-top:1px solid rgba(14,165,233,0.28);
  border-radius:0;
  box-shadow:0 -8px 40px rgba(0,0,0,.45);
  padding:18px max(28px, calc((100vw - 1280px)/2 + 28px));
  width:100%;
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
}
/* Accent supérieur */
.cookie-inner::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,rgba(14,165,233,0.60),transparent);
}
/* Lueur radiale subtile */
.cookie-inner::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 5% 50%, rgba(14,165,233,0.07) 0%, transparent 65%);
}
.cookie-text{
  display:flex; align-items:center; gap:16px; flex:1; min-width:220px;
  position:relative; z-index:1;
}
.cookie-text svg{
  flex-shrink:0; width:26px; height:26px; stroke:#0ea5e9;
  filter:drop-shadow(0 0 7px rgba(14,165,233,0.55));
}
.cookie-text p{
  font-size:13.5px; line-height:1.62; color:rgba(255,255,255,.78); margin:0;
}
.cookie-text p a{ color:#38bdf8; text-decoration:none; font-weight:600; }
.cookie-text p a:hover{ text-decoration:underline; color:#7dd3fc; }
.cookie-actions{
  display:flex; gap:12px; flex-shrink:0; align-items:center;
  position:relative; z-index:1;
}
.cookie-btn-refuse{
  height:34px; padding:0 18px;
  border:1.5px solid rgba(14,165,233,0.30); border-radius:10px;
  background:rgba(14,165,233,0.06); color:rgba(255,255,255,0.72);
  font-size:13px; font-weight:600; cursor:pointer; letter-spacing:.04em;
  white-space:nowrap;
  transition:border-color .22s ease, color .22s ease, background .22s ease;
}
.cookie-btn-refuse:hover{
  border-color:rgba(14,165,233,0.55); color:#fff;
  background:rgba(14,165,233,0.13);
}
.cookie-btn-accept{
  height:34px; padding:0 22px;
  border-radius:10px; border:none;
  background:linear-gradient(135deg,#0ea5e9 0%,#0369a1 100%);
  color:#fff; font-size:13px; font-weight:700; cursor:pointer; letter-spacing:.04em;
  white-space:nowrap;
  box-shadow:0 2px 14px rgba(14,165,233,0.38),
             inset 0 1px 0 rgba(255,255,255,0.18);
  transition:box-shadow .22s ease, transform .22s ease, filter .22s ease;
}
.cookie-btn-accept:hover{
  transform:translateY(-2px); filter:brightness(1.08);
  box-shadow:0 6px 22px rgba(14,165,233,0.52),
             inset 0 1px 0 rgba(255,255,255,0.18);
}
@media(max-width:640px){
  .cookie-inner{ flex-direction:column; align-items:flex-start; gap:14px; padding:18px 20px; }
  .cookie-actions{ width:100%; }
  .cookie-btn-refuse,.cookie-btn-accept{ flex:1; text-align:center; padding:11px 16px; }
}
.footer-copy-text strong{ color:var(--blue); font-weight:800; }
.footer-copy-text a{ color:rgba(255,255,255,0.70); text-decoration:none; font-weight:600; }
.footer-copy-text a:hover{ color:var(--blue-light); text-decoration:underline; }

/* ══════════════════════════════════════════════════
   SECTION HEAD (shared)
   ══════════════════════════════════════════════════ */
.section-head{ text-align:center; margin-bottom:52px; position:relative; z-index:1; }
.section-eyebrow{ display:block; margin:0 0 14px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.22em; color:rgba(14,165,233,0.80); }
.section-title-v2{ margin:0; font-family:var(--font-display); font-size:clamp(42px,5.5vw,76px); font-weight:900; font-style:normal; line-height:.96; letter-spacing:.03em; text-transform:uppercase; color:#fff; }
.section-title-accent{ color:var(--blue); }

/* ══════════════════════════════════════════════════
   BACK TO TOP + REVEAL
   ══════════════════════════════════════════════════ */
.to-top{
  position:fixed; right:24px; bottom:24px; width:44px; height:44px;
  border-radius:var(--radius-sm); border:1.5px solid rgba(14,165,233,0.40);
  background:rgba(9,21,38,0.88); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  color:var(--blue-light); cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,0.32); opacity:0; transform:translateY(10px);
  pointer-events:none; transition:background var(--tr) var(--ease),border-color var(--tr) var(--ease),
  color var(--tr) var(--ease),transform var(--tr) var(--ease),opacity .22s ease,bottom .30s ease; z-index:80;
}
.to-top.show{ opacity:1; transform:translateY(0); pointer-events:auto; }
.to-top:hover{ background:var(--blue); border-color:var(--blue); color:#fff; transform:translateY(-2px); box-shadow:0 6px 20px rgba(14,165,233,.32); }
/* Décale la flèche au-dessus de la bannière cookies tant qu'elle est visible */
body.cookie-open .to-top{ bottom:calc(var(--cookie-h, 90px) + 16px); }

.reveal{ opacity:0; transform:translateY(22px); transition:opacity .70s ease, transform .70s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
/* Fallback production : si l'IntersectionObserver ne se déclenche pas (erreur JS),
   les éléments deviennent visibles au bout de 1.2 s — aucun contenu ne reste caché. */
@keyframes reveal-safe-fallback{ to{ opacity:1; transform:translateY(0); } }
.reveal:not(.is-visible){ animation:reveal-safe-fallback .5s 1.2s ease forwards; }

/* ══════════════════════════════════════════════════
   PREMIUM REDESIGN — Overrides visuels v4
   ══════════════════════════════════════════════════ */

/* ── Hero : overlay équilibré — lisibilité texte + photos nettes ── */
.hero-overlay{
  background:
    linear-gradient(100deg, rgba(2,10,22,0.95) 0%, rgba(7,16,30,0.72) 45%, rgba(7,16,30,0.12) 100%),
    linear-gradient(180deg, rgba(7,16,30,0.18) 0%, rgba(7,16,30,0.06) 40%, rgba(7,16,30,0.65) 100%);
}

/* ── Hero : ligne d'accroche — taille calibrée ── */
.hero-title{
  font-size:clamp(26px, 2.8vw, 44px);
  line-height:1.08;
  letter-spacing:.04em;
  text-shadow:0 4px 24px rgba(0,0,0,0.40), 0 2px 8px rgba(0,0,0,0.28);
}

/* ── Hero : accent bleu avec lueur ── */
.hero-title-accent{
  color:var(--blue);
  text-shadow:0 0 40px rgba(14,165,233,0.55), 0 4px 24px rgba(0,0,0,0.40);
}

/* ── Hero : texte de description plus lisible ── */
.hero-text{
  font-size:15.5px;
  color:rgba(255,255,255,0.72);
  line-height:1.80;
  letter-spacing:.01em;
}

/* ── Hero : pill badge — ligne bleue plus longue ── */
.hero-pill-line{
  width:42px; height:2px;
  background:linear-gradient(90deg, var(--blue), rgba(14,165,233,0.40));
}
.hero-pill-text{
  font-size:14px; letter-spacing:.26em;
  color:rgba(255,255,255,0.60);
}

/* ── Hero : metrics inline ── */
.hero-metrics{
  display:flex; align-items:center; gap:0;
  margin:0 0 34px;
  padding:16px 22px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.10);
  border-left:3px solid var(--blue);
  border-radius:6px;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  width:fit-content;
  box-shadow:0 8px 28px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.06);
}
.hero-metric{
  display:flex; flex-direction:column; align-items:center;
  padding:0 22px;
}
.hero-metric-num{
  font-family:var(--font-display);
  font-size:30px; font-weight:900; line-height:1;
  color:#fff; letter-spacing:.02em;
}
.hero-metric-num sup{
  font-size:58%; color:var(--blue);
  vertical-align:super; font-weight:900;
}
.hero-metric-label{
  font-size:11.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,255,255,0.46);
  margin-top:5px; white-space:nowrap;
}
.hero-metric-sep{
  width:1px; height:38px; align-self:center;
  background:rgba(255,255,255,0.12); flex-shrink:0;
}

/* ── Hero : bouton ghost plus élégant ── */
.btn-hero-ghost{
  height:43px; padding:0 28px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.32);
  color:rgba(255,255,255,0.88);
  font-size:13px; letter-spacing:.12em;
  transition:background var(--tr), border-color var(--tr), color var(--tr), transform var(--tr), box-shadow var(--tr);
}
.btn-hero-ghost:hover{
  background:rgba(14,165,233,0.15);
  border-color:rgba(14,165,233,0.60);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(14,165,233,0.22);
}

/* ── About section : ombre plus prononcée ── */
.about-section{
  box-shadow:0 12px 60px rgba(7,16,30,0.14), 0 2px 0 rgba(14,165,233,0.10);
}

/* ── About : badge numérique plus premium ── */
.about-badge-num{
  font-size:52px;
  background:linear-gradient(160deg,#fff 40%,rgba(14,165,233,0.85));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ── About : stats — gradient plus visible ── */
.about-stat{
  background:linear-gradient(145deg, rgba(14,165,233,0.07) 0%, rgba(14,165,233,0.03) 100%);
  border-radius:12px;
  padding:20px 22px;
  border-left:3px solid var(--blue);
  box-shadow:0 4px 20px rgba(7,16,30,0.10), inset 0 1px 0 rgba(255,255,255,0.06);
}
.about-stat:hover{
  background:linear-gradient(145deg, rgba(14,165,233,0.14) 0%, rgba(14,165,233,0.06) 100%);
  transform:translateY(-3px);
  box-shadow:0 10px 30px rgba(7,16,30,0.16);
}
.about-stat-num{
  font-size:42px;
  background:linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.about-stat-sup{
  -webkit-text-fill-color:var(--blue); color:var(--blue);
}

/* ── About : titre avec espacement accru ── */
.about-title{
  font-size:clamp(22px, 2.4vw, 38px);
  line-height:1.00;
  letter-spacing:.04em;
}

/* ── Services section : taille titre restaurée ── */
.services-section .section-title-v2,
.services-header .section-title-v2{
  font-size:clamp(22px, 2.4vw, 38px);
}

/* ── Services cards : overlay plus dramatique au hover ── */
.srv-legacy-card::after{
  background:linear-gradient(175deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.72) 75%, rgba(0,0,0,0.82) 100%);
  transition:background .30s ease;
}
.srv-legacy-card:hover::after{
  background:linear-gradient(175deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.60) 60%, rgba(0,0,0,0.80) 100%);
}

/* ── Services : accent de couleur plus visible en bas de card ── */
.srv-legacy-card .srv-card-accent{
  height:3px;
  background:linear-gradient(90deg, transparent 0%, rgba(14,165,233,0.80) 35%, rgba(14,165,233,0.80) 65%, transparent 100%);
  opacity:.70;
  transition:opacity .30s ease, height .30s ease;
}
.srv-legacy-card:hover .srv-card-accent{
  opacity:1; height:3px;
}

/* ── Services : titre de card plus impactant ── */
.srv-legacy-title{
  font-size:21px;
  letter-spacing:.10em;
  text-shadow:0 2px 10px rgba(0,0,0,0.40);
}

/* ── Réalisations : image zoom harmonisé (standard Capital humain) ── */
.real-card-img{ overflow:hidden; }
.real-card-photo{
  -webkit-transform:translateZ(0); transform:translateZ(0);
  -webkit-transition:-webkit-transform .70s cubic-bezier(.4,0,.2,1), filter .70s ease;
  transition:transform .70s cubic-bezier(.4,0,.2,1), filter .70s ease;
  filter:brightness(0.92) saturate(1.08);
  will-change:transform;
}
.real-card:hover .real-card-photo{
  -webkit-transform:scale(1.04); transform:scale(1.04);
  filter:brightness(1.00) saturate(1.10);
}

/* ── Réalisations : overlay image pour meilleur contraste badge ── */
.real-card-img::after{
  background:linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(7,16,30,0.55) 100%);
  z-index:2; pointer-events:none;
}

/* ── Réalisations : hover card plus dramatique ── */
.real-card:hover{
  transform:translateY(-7px);
  box-shadow:0 32px 72px rgba(0,0,0,0.50), 0 0 0 1px rgba(14,165,233,0.18);
  border-color:rgba(14,165,233,0.22);
}


/* ── Ticker références ── */
.partenaires-section{
  background:#28405c;
  padding:96px 0;
}

/* ── Contact : items plus lisibles ── */
.contact-item{
  padding:14px 18px;
  border-radius:10px;
  transition:background var(--tr), border-color var(--tr), transform var(--tr);
}
.contact-item:hover{
  background:rgba(255,255,255,0.07);
  border-color:rgba(14,165,233,0.28);
  transform:translateX(3px);
}
.contact-item-icon{
  width:24px; height:24px;
  background:none; border:none; box-shadow:none;
}

/* ── Titres de section : taille restaurée ── */
.section-title-v2{
  font-size:clamp(42px, 5.5vw, 76px);
  letter-spacing:.03em;
}

/* ── Section eyebrow : accent bleu plus visible ── */
.section-eyebrow{
  letter-spacing:.26em;
  color:rgba(14,165,233,0.88);
}

/* ── Ligne décorative entre hero et contenu ── */
.about-section::before{
  content:""; display:block; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, transparent 0%, var(--blue) 30%, var(--blue-light) 50%, var(--blue) 70%, transparent 100%);
  opacity:.70;
}

/* ══════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════ */
@media (max-width:1200px){
  /* srv-legacy-grid stays 2 columns until 720px */
}
/* ─────────────────────────────────────────────────────
   FOOTER RESPONSIVE — cascade unique et sans conflits
   1100px → 980px → 720px → 480px
───────────────────────────────────────────────────── */
@media (max-width:1100px){
  .footer-inner{ grid-template-columns:1fr 1fr; gap:32px; row-gap:44px; }
  .footer-col{ padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,0.08); }
  .footer-col:nth-last-child(-n+2){ border-bottom:none; padding-bottom:0; }
  .footer-cert-item{ padding:0 32px; }
  .about-right{ padding:56px 48px 56px 68px; }
  .actus-grid{ grid-template-columns:1fr 1fr; }
  .actu-card--featured{ grid-column:auto; }
  .actu-img--tall{ height:190px; }
  .contact-inner{ grid-template-columns:1fr; gap:36px; }
}
@media (max-width:980px){
  .nav-links{ display:none; }
  .btn-contact-nav{ display:none; }
  .lang-switch{ display:none; }
  .burger{ display:flex; }
  .nav-container{ grid-template-columns:auto 1fr; }

  .hero-content{ max-width:90vw; padding:60px 0 60px 24px; }
  .hero-scroll-indicator{ left:24px; }
  /* dots restent centrés même sur mobile */
  .hero-dots{ left:50%; transform:translateX(-50%); bottom:20px; }
  .hero-slide-label{ right:16px; bottom:60px; padding:7px 12px 7px 10px; }
  .hero-slide-label-text{ font-size:10.5px; }
  .hero-slide-label-num{ font-size:9.5px; }

  .about-inner{ grid-template-columns:1fr; }
  .about-left{ min-height:320px; }
  .about-right{ padding:48px 32px; }
  .about-badge{ right:0; bottom:0; }

  .real-cards{ grid-template-columns:1fr 1fr; }

  .certif-inner{ flex-direction:column; gap:22px; padding:28px 24px; }
  .certif-sep{ display:none; }
  .certif-tags{ margin-left:0; }

  .prem-dl-inner{ grid-template-columns:1fr; }
  .prem-dl-right{ min-height:280px; }
  .prem-dl-left{ padding:52px 32px; }
  .prem-sep{ display:none; }

  .footer-inner{ grid-template-columns:1fr 1fr; gap:24px; row-gap:36px; }
  .footer-col{ padding-bottom:28px; border-bottom:1px solid rgba(255,255,255,0.08); }
  .footer-col:nth-last-child(-n+2){ border-bottom:none; padding-bottom:0; }
  .footer-cert-item{ padding:0 20px; }
  .actus-header{ flex-direction:column; align-items:flex-start; gap:8px; }
  .real-header{ flex-direction:column; align-items:flex-start; gap:8px; }
  .services-header{ flex-direction:column; align-items:flex-start; gap:8px; }
}
@media (max-width:720px){
  .hero-metrics{ display:none; }
  .hero-title{ font-size:clamp(28px,10vw,48px); }
  .real-cards{ grid-template-columns:1fr; }
  .actus-grid{ grid-template-columns:1fr; }
  .about-stats{ grid-template-columns:1fr 1fr; }
  .certif-logos{ flex-wrap:wrap; }
  .hero-cta{ flex-direction:column; align-items:flex-start; }
  .srv-legacy-grid{ grid-template-columns:1fr; }

  /* ── Footer colonne unique dès 720px ── */
  .footer-inner{ grid-template-columns:1fr; gap:0; padding:40px 0 28px; }
  .footer-brand{ padding-bottom:28px; border-bottom:1px solid rgba(255,255,255,.10); }
  .footer-col{
    border-top:none !important; border-bottom:1px solid rgba(255,255,255,.10) !important;
    padding-top:28px !important; padding-bottom:28px !important;
  }
  .footer-col:last-child{ border-bottom:none !important; padding-bottom:4px !important; }
  /* Certifications : liste verticale, séparateurs horizontaux */
  .footer-certs{ flex-direction:column; gap:0; padding:10px 0; }
  .footer-cert-item{
    border-right:none !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
    padding:16px 20px !important;
    justify-content:flex-start;
  }
  .footer-cert-item:last-child{ border-bottom:none !important; }
  /* Copyright – retour à la ligne + centrage */
  .footer-bottom{ flex-wrap:wrap; gap:4px; padding:14px 0 18px; }
  .footer-copy-text{ font-size:12.5px; overflow-wrap:anywhere; }
  /* Bouton retour en haut – légèrement remonté sur tablette */
  .to-top{ right:16px; bottom:20px; }
}
@media (max-width:580px){
  /* ── Footer mobile compact ── */
  .footer-inner{ padding:28px 0 18px; }
  .footer-brand{ padding-bottom:20px; }
  .footer-col{ padding-top:20px !important; padding-bottom:20px !important; }
  .footer-col:last-child{ padding-bottom:2px !important; }
  .footer-cert-item{ padding:13px 14px !important; }
  .footer-copy-text{ font-size:11.5px; }
  .to-top{ width:40px; height:40px; right:12px; bottom:16px; }

  /* Navbar */
  .nav-container{ padding:0 16px; }

  /* QUI SOMMES-NOUS */
  .about-right{ padding:36px 20px; }
  .about-stats{ gap:8px; }
  .btn-about{ padding:12px 22px; font-size:12px; }

  /* Section téléchargement */
  .prem-dl-left{ padding:44px 20px; }
  .prem-dl-btns{ flex-direction:column; }
  .prem-dl-btn{ justify-content:center; }

  /* Sections générales */
  .real-cards{ grid-template-columns:1fr; }
  .services-section{ padding:56px 0; }
  .real-section{ padding:56px 0; }
  .actus-section{ padding:56px 0; }
  .actu-row{ grid-template-columns:1fr; }
  .actu-row-img{ display:none; }
  .contact-section{ padding:56px 0; }
  .partenaires-section{ padding:56px 0; }
  .credibility-section{ padding:56px 0; }
  .contact-map-wrap{ min-height:280px; }

  /* srv-showcase mobile : une seule colonne */
  .srv-showcase{ grid-template-columns:1fr; border-radius:10px; }
  .srv-showcase-visual{ height:200px; }
  .srv-showcase-info{ padding:18px 18px 22px; }

  /* Projets responsive */
  .proj-stage{ grid-template-columns:1fr; height:auto; }
  .proj-img-panel{ min-height:240px; }

  /* Certifications */
  .certif-inner{ padding:24px 16px; gap:16px; }
}


/* ══════════════════════════════════════════════════
   COMPATIBILITÉ CROSS-BROWSER — NAVBAR
   Chrome · Edge · Firefox · Safari
   ══════════════════════════════════════════════════ */

/* 1. Reset apparence native des boutons (Safari / iOS / Firefox) */
.lang-globe-btn,
.btn-contact-nav,
.burger,
.lang-dropdown-item,
.lang-opt {
  -webkit-appearance: none;
  -moz-appearance:    none;
  appearance:         none;
  outline: none;
}

/* 2. Transitions avec préfixes pour anciens WebKit */
.lang-globe-btn,
.btn-contact-nav,
.lang-trigger-arrow {
  -webkit-transition: all .22s cubic-bezier(.4,0,.2,1);
          transition: all .22s cubic-bezier(.4,0,.2,1);
}
.nav-links a{
  -webkit-transition: color .22s cubic-bezier(.4,0,.2,1);
          transition: color .22s cubic-bezier(.4,0,.2,1);
}
.nav-links a::before{
  -webkit-transition: opacity .22s cubic-bezier(.4,0,.2,1);
          transition: opacity .22s cubic-bezier(.4,0,.2,1);
}

/* 3. Transform avec préfixes (hover effects) */
.lang-globe-btn:hover,
.btn-contact-nav:hover {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
}
.lang-globe-btn.open .lang-trigger-arrow {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

/* 4. Garantit la hauteur minimale navbar (cohérence Firefox/Safari) */
.navbar {
  min-height: 70px;
}
.nav-container {
  min-height: 70px;
}

/* 5. Stabilité de la ligne active (rendu sous-ligne cross-browser) */
.nav-links a {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.nav-links a.active::after {
  display: block;
  content: "" !important;
}

/* 6. Fallback gap flexbox pour Safari < 14.1 */
.nav-links a + a   { margin-left: 2px; }
.nav-right > * + * { margin-left: 14px; }
.lang-dropdown-item > * + * { margin-left: 11px; }
/* Annule le margin si gap est supporté nativement */
@supports (gap: 1px) {
  .nav-links a + a   { margin-left: 0; }
  .nav-right > * + * { margin-left: 0; }
  .lang-dropdown-item > * + * { margin-left: 0; }
}

/* 7. Cohérence d'affichage des SVGs dans les boutons */
.btn-contact-nav svg,
.lang-globe-btn svg {
  display: inline-block;
  vertical-align: middle;
  -webkit-flex-shrink: 0;
          flex-shrink: 0;
}

/* 8. Assure le rendu correct du backdrop-filter (fallback Firefox < 103) */
@supports not (backdrop-filter: blur(1px)) {
  .navbar {
    background: rgba(2, 10, 22, 0.98) !important;
  }
}

/* 9. line-height explicite pour cohérence typographique cross-browser */
.nav-links a {
  line-height: 1.2;
}
.btn-contact-nav {
  line-height: 1;
}