.elementor-767 .elementor-element.elementor-element-8500d24{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS *//* ═══════════════════════════════════════════════
   TOKENS GLOBAUX
   ⚠️ Ne pas modifier ces variables sans l'accord
   de votre développeur — elles sont utilisées
   partout sur la page
═══════════════════════════════════════════════ */
:root {
  --bg:     #F8F6F2;   /* Couleur de fond principal (beige chaud) */
  --ink:    #141414;   /* Couleur du texte principal (noir doux) */
  --ink-2:  #505050;   /* Couleur du texte secondaire (gris) */
  --stone:  #7A6A58;   /* Couleur d'accent (brun pierre) */
  --white:  #FFFFFF;   /* Blanc pur */
  --rule:   rgba(20,20,20,.1); /* Couleur des séparateurs */
  --sans:   'DM Sans', system-ui, sans-serif; /* Police principale */
  --ease:   cubic-bezier(.4,0,.2,1); /* Courbe d'animation */
  --px:     clamp(22px, 5.5vw, 88px);  /* Marge horizontale responsive */
  --py:     clamp(64px, 8vw, 120px);   /* Marge verticale responsive */
}

/* ═══════════════════════════════════════════════
   TYPOGRAPHIE GLOBALE
   Tailles de texte responsive (s'adaptent
   automatiquement à la taille de l'écran)
═══════════════════════════════════════════════ */

/* H1 hero — "Etat de Surfaces." */
.hero-h1 {
  font-size: clamp(52px, 9vw, 120px) !important;
  line-height: 0.92 !important;
  letter-spacing: -0.02em !important;
  font-weight: 300 !important;
  color: var(--bg) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Deuxième ligne du H1 "Surfaces." en italique gras */
.hero-h1 .line2 {
  display: block !important;
  font-style: italic !important;
  font-weight: 700 !important;
  margin-left: clamp(20px, 3vw, 56px) !important;
}

/* H2 des sections projets (résidentiel, médical, bureau) */
.sec-title {
  font-size: clamp(30px, 4vw, 56px) !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
}

/* H2 de la section agence et contact */
.agence-h2,
.contact-h2 {
  font-size: clamp(28px, 3.4vw, 48px) !important;
}

/* Texte courant (paragraphes) */
.agence-p {
  font-size: clamp(14px, 1.1vw, 16px) !important;
  line-height: 1.85 !important;
}

/* Petits labels uppercase (eyebrow, titres de section) */
.sec-eyebrow,
.agence-eye,
.contact-eye,
.hero-over {
  font-size: clamp(9px, 0.7vw, 11px) !important;
  letter-spacing: 0.38em !important;
  text-transform: uppercase !important;
}

/* ═══════════════════════════════════════════════
   HERO
   ⚠️ Ne pas modifier cette section
═══════════════════════════════════════════════ */

/* Accroche au-dessus du titre */
.hero-over {
  animation: fadeUp 0.9s 0.2s both !important;
}

/* Titre principal */
.hero-h1 {
  animation: fadeUp 0.9s 0.4s both !important;
}

/* Ligne + sous-titre */
.hero-rule {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-top: 24px !important;
  animation: fadeUp 0.9s 0.65s both !important;
}

.hero-rule-line {
  flex-shrink: 0 !important;
  width: 32px !important;
  height: 1px !important;
  background: rgba(248,246,242,.32) !important;
}

.hero-rule-text {
  font-size: 10px !important;
  font-weight: 300 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: rgba(248,246,242,.46) !important;
}

/* Animation d'entrée (utilisée sur hero-over, hero-h1, hero-rule) */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════
   SECTION "NOS UNIVERS"
   
   ✏️  CE QUE VOUS POUVEZ MODIFIER :
   - Les textes dans le widget HTML
   - Les URLs des images (src="...")
   
   ⚠️  NE PAS MODIFIER :
   - Les noms de classes CSS
   - La structure HTML
═══════════════════════════════════════════════ */

/* Conteneur principal de la section */
.categories {
  background: var(--white) !important;
  padding: var(--py) var(--px) !important;
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
}

/* ── Arrière-plans dynamiques au survol ── */
.cat-bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.cat-bg-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 0 !important;
  transform: scale(1.12) !important;
  transition: opacity .8s var(--ease), transform 8s cubic-bezier(.25,.46,.45,.94) !important;
}

/* Image de fond visible au survol */
.cat-bg-img.cat-bg-active {
  opacity: .88 !important;
  transform: scale(1) !important;
}

/* Le eyebrow et la grille passent au-dessus du fond */
.categories > .sec-eyebrow,
.categories > .cat-grid {
  position: relative !important;
  z-index: 1 !important;
}

/* ── Label "Nos univers" ── */
.sec-eyebrow {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: .38em !important;
  text-transform: uppercase !important;
  color: var(--stone) !important;
  margin-bottom: 40px !important;
}

.sec-eyebrow::before {
  content: '' !important;
  display: block !important;
  width: 20px !important;
  height: 1px !important;
  background: var(--stone) !important;
  flex-shrink: 0 !important;
}

/* ── Grille 3 colonnes ── */
.cat-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: clamp(14px, 1.6vw, 22px) !important;
}

/* ── Carte ── */
.cat-card {
  display: block !important;
  text-decoration: none !important;
  color: var(--ink) !important;
  background: var(--bg) !important;
  overflow: hidden !important;
  position: relative !important;
}

/* ── Conteneur image ── */
.cat-photo-wrap {
  overflow: hidden !important;
  background: transparent !important;
  position: relative !important;
  transition: background .5s !important;
}

/* ── Image de la carte ── */
.cat-photo-img {
  width: 100% !important;
  aspect-ratio: 3/2 !important;
  object-fit: cover !important;
  display: block !important;
  transition: opacity .5s var(--ease), transform .75s var(--ease), filter .5s !important;
}

.cat-photo-img.mat {
  filter: saturate(.72) contrast(1.06) brightness(.96) !important;
}

.cat-card:hover .cat-photo-img {
  transform: scale(1.05) !important;
  filter: saturate(.58) brightness(.88) contrast(1.1) !important;
}

/* ── Voile sombre sur l'image ── */
.cat-mat-veil {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    to bottom,
    rgba(20,20,16,.18) 0%,
    rgba(20,20,16,.32) 100%
  ) !important;
  z-index: 1 !important;
  pointer-events: none !important;
  transition: opacity .5s var(--ease) !important;
}

.cat-card:hover .cat-mat-veil {
  opacity: .55 !important;
}

/* ── Icône centrale (cercle glassmorphism) ── */
.cat-icon {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 4 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 96px !important;
  height: 96px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.06) !important;
  backdrop-filter: blur(6px) saturate(220%) brightness(1.1) !important;
  -webkit-backdrop-filter: blur(6px) saturate(220%) brightness(1.1) !important;
  border: 1px solid rgba(255,255,255,.65) !important;
  box-shadow:
    0 0 0 0.5px rgba(255,255,255,.18),
    0 6px 28px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.6) !important;
  transition: transform .45s var(--ease), box-shadow .4s !important;
  opacity: 1 !important;
}

.cat-card:hover .cat-icon {
  transform: translate(-50%, -53%) !important;
  box-shadow:
    0 0 0 0.5px rgba(255,255,255,.28),
    0 8px 36px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.75) !important;
}

.cat-icon svg {
  width: 40px !important;
  height: 40px !important;
  stroke: rgba(255,255,255,.88) !important;
  fill: none !important;
  stroke-width: 1 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)) !important;
  transition: stroke .4s !important;
}

.cat-card:hover .cat-icon svg {
  stroke: rgba(255,255,255,.98) !important;
}

/* ── Bloc texte sous l'image ── */
.cat-text {
  padding: 26px 28px 32px !important;
  background: var(--white) !important;
  border-top: 2px solid var(--bg) !important;
  display: block !important;
  transition: opacity .5s var(--ease), border-color .35s !important;
}

.cat-card:hover .cat-text {
  border-color: var(--stone) !important;
}

/* Numéro de catégorie (01, 02, 03) */
.cat-num {
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: .28em !important;
  color: var(--stone) !important;
  margin-bottom: 8px !important;
}

/* Nom de catégorie (Résidentiel, Médical...) */
.cat-name {
  font-size: clamp(20px, 2.4vw, 28px) !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  color: var(--ink) !important;
  margin-bottom: 10px !important;
}

/* Lien "Voir les projets" */
.cat-arrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--stone) !important;
  opacity: 0 !important;
  transform: translateX(-8px) !important;
  transition: opacity .35s, transform .35s var(--ease) !important;
}

.cat-card:hover .cat-arrow {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

.cat-arrow-line {
  width: 20px !important;
  height: 1px !important;
  background: var(--stone) !important;
  flex-shrink: 0 !important;
}

/* ── Effets sur les cartes non survolées ── */
.cat-grid.hov-active .cat-card:not(.hov) .cat-photo-img.mat { opacity: 0 !important; }
.cat-grid.hov-active .cat-card:not(.hov) .cat-mat-veil { opacity: 0 !important; }
.cat-grid.hov-active .cat-card:not(.hov) .cat-text { opacity: 0 !important; background: transparent !important; }
.cat-grid.hov-active .cat-card:not(.hov) { background: transparent !important; }
.cat-grid.hov-active .cat-card:not(.hov) .cat-photo-wrap { background: transparent !important; }

/* ── Animations d'apparition au scroll ── */
.reveal {
  opacity: 0 !important;
  transform: translateY(24px) !important;
  transition: opacity .8s var(--ease), transform .8s var(--ease) !important;
}

.reveal.in {
  opacity: 1 !important;
  transform: none !important;
}

.d1 { transition-delay: .1s !important; }
.d2 { transition-delay: .2s !important; }
.d3 { transition-delay: .3s !important; }

/* ── Responsive tablette et mobile ── */
@media (max-width: 768px) {
  .cat-grid {
    grid-template-columns: 1fr !important;
  }
  .cat-photo-img {
    aspect-ratio: 16/9 !important;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .cat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── Fix images de fond "Nos univers" ── */
#projets .cat-bg-img {
  opacity: 0 !important;
  transform: scale(1.12) !important;
  transition: opacity .8s var(--ease), transform 8s cubic-bezier(.25,.46,.45,.94) !important;
}

#projets .cat-bg-img.cat-bg-active {
  opacity: .88 !important;
  transform: scale(1) !important;
}/* End custom CSS */