/* ============================================================
   CRD Habitat — Design system
   Typographie, rayons, boutons, effets de scroll.
   Tailwind gère la mise en page ; ce fichier porte l'identité.
   ============================================================ */

:root {
  color-scheme: light;

  /* Palette */
  --ivoire: #F6F4EF;
  --ivoire-2: #EFECE3;
  --sable: #E6E0D4;
  --nuit: #0C1B2B;
  --nuit-2: #081321;
  --encre: #1A1A18;
  --pierre: #B3A288;
  --pierre-2: #8A7A61;

  /* Rayons */
  --r-sm: 0.875rem;
  --r-md: 1.25rem;
  --r-lg: 1.75rem;
  --r-xl: 2.5rem;
  --r-pill: 999px;

  /* Mouvement */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

html { scroll-padding-top: 6rem; }
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
::selection { background: var(--nuit); color: var(--ivoire); }

/* Typographie de titre : serif contemporaine, jamais grasse */
/* Titres en Montserrat : graisse légère, tracking resserré, accent en italique véritable */
.font-display { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 400; letter-spacing: -0.025em; }
.font-display em { font-style: italic; font-weight: 400; }

/* Label de section : sans majuscules forcées, un point de couleur devant */
.label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--pierre-2);
}
.label::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--pierre);
}
.label-light { color: rgba(246, 244, 239, 0.7); }
.label-light::before { background: var(--pierre); }

/* Le format lg garde sa générosité sur desktop et se resserre sur mobile
   (voir la section Formats plus bas). */

/* Étiquettes (pills) */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(12, 27, 43, 0.14);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--nuit);
  white-space: nowrap;
}
.tag-light { border-color: rgba(246, 244, 239, 0.22); color: rgba(246, 244, 239, 0.85); }
.tag-glass {
  border-color: rgba(246, 244, 239, 0.22);
  background: rgba(246, 244, 239, 0.1);
  color: var(--ivoire);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ------------------------------------------------------------
   Boutons : une vraie hiérarchie
   ------------------------------------------------------------ */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  border-radius: var(--r-pill);
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.45s var(--ease), color 0.45s var(--ease), border-color 0.45s var(--ease), transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.btn:active { transform: scale(0.97); }

/* Icône fine : le trait se redessine au survol (chaque tracé porte pathLength="1") */
.btn-ic {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  overflow: visible;
}
.btn-ic > * { stroke-dasharray: 1; stroke-dashoffset: 0; }
.btn:hover .btn-ic > * { animation: ic-draw 0.9s var(--ease-out) both; }
.btn:hover .btn-ic > *:nth-child(2) { animation-delay: 0.07s; }
.btn:hover .btn-ic > *:nth-child(3) { animation-delay: 0.14s; }
@keyframes ic-draw {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

/* Principal : plein bleu nuit */
.btn-primary {
  padding: 1.05rem 1.9rem;
  background: var(--nuit);
  color: var(--ivoire);
  box-shadow: 0 10px 30px -14px rgba(12, 27, 43, 0.5);
}
.btn-primary:hover { background: var(--nuit-2); box-shadow: 0 18px 38px -16px rgba(12, 27, 43, 0.6); }

/* Principal sur fond sombre : ivoire, qui bascule en bleu nuit au survol */
.btn-white {
  padding: 1.05rem 1.9rem;
  background: var(--ivoire);
  color: var(--nuit);
}
.btn-white:hover { background: var(--nuit); color: var(--ivoire); box-shadow: 0 18px 38px -16px rgba(8, 19, 33, 0.7); }

/* Secondaire : contour fin */
.btn-outline {
  padding: 1.05rem 1.8rem;
  border: 1px solid rgba(12, 27, 43, 0.22);
  color: var(--nuit);
  background: transparent;
}
.btn-outline:hover { background: var(--nuit); border-color: var(--nuit); color: var(--ivoire); }

/* Secondaire sur fond sombre : verre */
.btn-glass {
  padding: 1.05rem 1.8rem;
  border: 1px solid rgba(246, 244, 239, 0.24);
  background: rgba(246, 244, 239, 0.08);
  color: var(--ivoire);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.btn-glass:hover { background: var(--nuit); border-color: var(--nuit); color: var(--ivoire); }

/* Discret sur fond sombre : sans fond, contour à peine visible */
.btn-ghost {
  padding: 1.05rem 1.8rem;
  border: 1px solid rgba(246, 244, 239, 0.28);
  background: transparent;
  color: var(--ivoire);
}
.btn-ghost:hover { background: var(--nuit); border-color: var(--nuit); color: var(--ivoire); }

/* Formats */
.btn-sm { font-size: 0.78rem; gap: 0.6rem; }
.btn-sm.btn-primary, .btn-sm.btn-white, .btn-sm.btn-outline,
.btn-sm.btn-glass, .btn-sm.btn-ghost { padding: 0.82rem 1.4rem; }
.btn-sm .btn-ic { width: 0.95rem; height: 0.95rem; }

/* Mobile d'abord : à peine plus grand qu'un bouton standard */
.btn-lg { font-size: 0.9rem; gap: 0.8rem; }
.btn-lg.btn-primary, .btn-lg.btn-white, .btn-lg.btn-outline,
.btn-lg.btn-glass, .btn-lg.btn-ghost { padding: 1.15rem 1.7rem; }
.btn-lg .btn-ic { width: 1.1rem; height: 1.1rem; }
/* Desktop : le format généreux du hero */
@media (min-width: 768px) {
  .btn-lg { font-size: 1rem; gap: 2rem; }
  .btn-lg.btn-primary, .btn-lg.btn-white, .btn-lg.btn-outline,
  .btn-lg.btn-glass, .btn-lg.btn-ghost { padding: 1.5rem 2.9rem; }
  .btn-lg .btn-ic { width: 1.3rem; height: 1.3rem; }
}
/* Écran large mais peu haut : format intermédiaire, pour rendre au hero
   la hauteur que deux boutons de 64px lui prenaient. */
@media (min-width: 768px) and (max-height: 700px) {
  .btn-lg { font-size: 0.92rem; gap: 1.35rem; }
  .btn-lg.btn-primary, .btn-lg.btn-white, .btn-lg.btn-outline,
  .btn-lg.btn-glass, .btn-lg.btn-ghost { padding: 1.15rem 2.2rem; }
  .btn-lg .btn-ic { width: 1.15rem; height: 1.15rem; }
}

/* Tertiaire : lien texte avec flèche qui glisse */
.btn-link {
  gap: 0.6rem;
  padding: 0.2rem 0;
  border-radius: 0;
  color: currentColor;
}
.btn-link svg { width: 1rem; height: 1rem; transition: transform 0.5s var(--ease-out); }
.btn-link .btn-ic { width: 1.05rem; height: 1.05rem; }
.btn-link span { position: relative; }
.btn-link span::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -0.3rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease-out);
}
.btn-link:hover > svg:last-child { transform: translateX(0.3rem); }
.btn-link:hover span::after { transform: scaleX(1); transform-origin: left; }

/* Bouton rond (menu, flèches) */
.btn-round {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  border: 1px solid rgba(246, 244, 239, 0.24);
  background: rgba(246, 244, 239, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.btn-round:hover { background: rgba(246, 244, 239, 0.18); }

/* Bouton menu : mobile et tablette uniquement */
.burger {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
@media (min-width: 1520px) { .burger { display: none; } }

/* Lien de navigation discret */
.nav-link {
  padding: 0.6rem 1.5rem;
  margin: 0 0.5rem;
  border-radius: var(--r-pill);
  font-size: 1rem;
  font-weight: 500;
  color: inherit;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}
.nav-link:hover { background: rgba(246, 244, 239, 0.12); }
/* Juste après le seuil d'apparition de la nav (1520px), une marge de
   sécurité resserre les liens pour qu'ils ne frôlent jamais les boutons. */
@media (min-width: 1520px) and (max-width: 1620px) {
  .nav-link { font-size: 0.92rem; padding: 0.55rem 1.05rem; margin: 0 0.15rem; }
}

/* ------------------------------------------------------------
   Header : flottant, deux états, se cache en descendant
   ------------------------------------------------------------ */
#site-header {
  color: var(--ivoire);
  transition: color 0.5s var(--ease);
}
#site-header .nav-pill {
  border-radius: var(--r-pill);
  /* border: 1px solid rgba(246, 244, 239, 0.16);
  background: rgba(12, 27, 43, 0.18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px); */
  padding: 0.35rem;
  transition: background-color 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
#site-header .logo {
  display: block;
  flex-shrink: 0;
  padding: 0.55rem 1rem;
  margin-left: -1rem;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background-color 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
/* Le tracé bleu devient blanc pur sur les fonds sombres. */
#site-header .logo img {
  display: block;
  height: 2.5rem;
  width: auto;
  filter: brightness(0) invert(1);
  transition: filter 0.5s var(--ease);
}
@media (min-width: 768px) { #site-header .logo img { height: 3.1rem; } }
#site-header.is-scrolled { color: var(--nuit); }
#site-header.is-scrolled .logo {
  background: rgba(246, 244, 239, 0.82);
  border-color: rgba(12, 27, 43, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 12px 40px -18px rgba(12, 27, 43, 0.35);
}
#site-header.is-scrolled .logo img { filter: none; }
#site-header.is-scrolled.is-at-top .logo {
  background: var(--nuit);
  border-color: var(--nuit);
}
#site-header.is-scrolled.is-at-top .logo img { filter: brightness(0) invert(1); }
#site-header.menu-open .logo { background: transparent; border-color: transparent; box-shadow: none; }
#site-header.is-scrolled.is-at-top.menu-open .logo { background: transparent; border-color: transparent; }
#site-header.menu-open .logo img { filter: brightness(0) invert(1); }
#site-header.is-scrolled .nav-pill {
  background: rgba(246, 244, 239, 0.82);
  border-color: rgba(12, 27, 43, 0.08);
  box-shadow: 0 12px 40px -18px rgba(12, 27, 43, 0.35);
}
#site-header.is-scrolled .nav-link:hover { background: rgba(12, 27, 43, 0.06); }
#site-header.is-scrolled .btn-round { border-color: rgba(12, 27, 43, 0.14); background: rgba(246, 244, 239, 0.82); }
#site-header.is-scrolled .btn-white { background: var(--nuit); color: var(--ivoire); }
#site-header.is-scrolled .btn-white:hover { background: var(--nuit-2); }
#site-header.is-scrolled .btn-ghost { color: var(--nuit); border-color: rgba(12, 27, 43, 0.18); background: rgba(246, 244, 239, 0.82); }
#site-header.is-scrolled .btn-ghost:hover { background: var(--nuit); border-color: var(--nuit); color: var(--ivoire); }
#site-header.menu-open { color: var(--ivoire); }
#site-header.menu-open .nav-pill { opacity: 0; pointer-events: none; }
#site-header.menu-open .btn-round { border-color: rgba(246, 244, 239, 0.24); background: rgba(246, 244, 239, 0.08); }

/* Les actions passent dans le menu mobile sans comprimer le logo. */
@media (max-width: 1539px), (max-height: 700px) {
  #site-header .header-bar .btn { display: none; }
  #site-header .burger { display: inline-flex; }
}

/* Écrans peu hauts (portables 1440x624, 1366x630) : la navigation passe en
   menu vertical et le bandeau s'affine, pour dégager le haut de page.
   Au-dessus de 700px de haut, rien ne change : le 1920x1080 garde sa barre
   horizontale et ses proportions d'origine. */
@media (max-height: 700px) {
  #site-header .nav-pill { display: none; }
  #site-header .burger { display: inline-flex; }
  #site-header .header-bar { padding-top: 0.65rem; padding-bottom: 0.65rem; }
  #site-header .logo { padding-top: 0.4rem; padding-bottom: 0.4rem; }
  #site-header .logo img { height: 2.3rem; }
  #mobile-menu { display: flex; padding-top: 6rem; }
  #mobile-menu .mobile-link { font-size: 2rem; }
}

/* Menu mobile plein écran */
#mobile-menu {
  transition: opacity 0.6s var(--ease), visibility 0.6s;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: max(2rem, env(safe-area-inset-bottom));
}
#mobile-menu.is-open { opacity: 1; visibility: visible; }
#mobile-menu:not(.is-open) { opacity: 0; visibility: hidden; }
#mobile-menu .menu-item {
  opacity: 0;
  transform: translateY(1.6rem);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
#mobile-menu.is-open .menu-item { opacity: 1; transform: translateY(0); }
/* Marge proportionnelle entre les six liens (A propos … Espace client) :
   elle suit la hauteur disponible plutôt qu'une valeur fixe, pour rester
   confortable sur un grand écran sans jamais déborder sur un petit. */
.mobile-nav .mobile-link { margin-top: clamp(0.35rem, 2.4vh, 1rem); }
.mobile-nav .mobile-link:first-child { margin-top: 0; }
.menu-bar { transform-origin: center; transition: transform 0.5s var(--ease), opacity 0.3s; }
#menu-toggle.is-open .menu-bar:nth-child(1) { transform: translateY(4px) rotate(45deg); }
#menu-toggle.is-open .menu-bar:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* ------------------------------------------------------------
   Hero : collé sous la page, la suite glisse par-dessus
   ------------------------------------------------------------ */
.hero { position: sticky; top: 0; height: 100svh; }

/* Rythme vertical du hero.
   Chaque valeur est bornée par la largeur ET par la hauteur du viewport :
   les bornes hautes reproduisent exactement le rendu 1920x1080, et tout se
   resserre de soi-même sur les portables peu hauts (1440x624, 1366x630)
   sans jamais déborder du cadre. */
.hero-content {
  padding-top: clamp(5.5rem, 12vh, 7rem);
  padding-bottom: clamp(4rem, 10.2vh, 6rem);
}
.hero-title { font-size: clamp(2.2rem, min(10.4vw, 22vh), 9.5rem); }
.hero-tagline {
  margin-top: clamp(0.5rem, 3vh, 1.75rem);
  font-size: clamp(1rem, min(2.4vw, 3.6vh), 1.875rem);
}
.hero-lede {
  margin-top: clamp(1.25rem, 4.7vh, 2.75rem);
  font-size: clamp(0.95rem, min(1.4vw, 2.2vh), 1.2rem);
  line-height: 1.8;
}
.hero-actions { margin-top: clamp(1.5rem, 6vh, 3.5rem); }
@media (min-width: 768px) { .hero-lede { line-height: 1.85; } }

/* Écrans peu hauts : le bandeau d'adresse se resserre pour ne jamais
   venir toucher les boutons. */
@media (max-height: 760px) {
  .hero .hero-baseline { padding-bottom: 1.35rem; }
}

/* Dernier recours (mobile paysage, très petites fenêtres) : plutôt que de
   comprimer davantage, le hero s'étire et la page défile normalement. */
@media (max-height: 520px) {
  .hero { position: relative; height: auto; min-height: 100svh; }
  .hero-content { padding-top: 5.5rem; padding-bottom: 3.5rem; }
  .hero-baseline { display: none; }
}
.hero-media { position: absolute; inset: 0; transform: scale(1.12); transition: transform 2.4s var(--ease-out); }
body.is-ready .hero-media { transform: scale(1); }
.hero-media.is-live { transition: none; }
.hero-content { will-change: transform, opacity; }
.hero-word { display: inline-block; overflow: hidden; vertical-align: top; }
/* Titre : pas d'espace parasite dans la sélection */
.hero-title { white-space: nowrap; }
/* Signature ajustée à la largeur exacte du titre (interlettrage calculé en JS) */
.hero-tagline { display: inline-block; white-space: nowrap; }
.hero-word > span { display: inline-block; transform: translateY(110%); transition: transform 1.3s var(--ease-out); transition-delay: var(--d, 0ms); }
body.is-ready .hero-word > span { transform: translateY(0); }
.hero-fade { opacity: 0; transform: translateY(1.2rem); transition: opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out); transition-delay: var(--d, 0ms); }
body.is-ready .hero-fade { opacity: 1; transform: none; }

.scroll-line { position: relative; width: 1px; height: 3.5rem; background: rgba(246, 244, 239, 0.18); overflow: hidden; }
.scroll-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ivoire);
  transform-origin: top;
  animation: scroll-line 2.2s var(--ease) infinite;
}
@keyframes scroll-line {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* Rideau : le contenu qui recouvre le hero */
.curtain {
  position: relative;
  z-index: 10;
  background: var(--ivoire);
  border-top-left-radius: var(--r-xl);
  border-top-right-radius: var(--r-xl);
  box-shadow: 0 -30px 80px -40px rgba(0, 0, 0, 0.5);
}
@media (min-width: 768px) {
  .curtain { border-top-left-radius: 3.5rem; border-top-right-radius: 3.5rem; }
}

/* Sur ordinateur, le texte et ses boutons définissent la hauteur du visuel. */
@media (min-width: 1024px) {
  #la-maison .intro-visual { min-height: 0; }
  #la-maison .intro-image {
    position: absolute;
    inset: 0 0 0 auto;
    width: calc(100% - 2rem);
    height: 100%;
    aspect-ratio: auto;
  }
  /* Le cadre partage directement la ligne des cartes, sans hauteur en pourcentage. */
  #crd-management .management-image {
    min-height: 0;
    align-self: stretch;
    aspect-ratio: auto;
  }
  #crd-management .management-image img { position: absolute; inset: 0; }
}

/* ------------------------------------------------------------
   Images : cadres arrondis, parallaxe, révélation
   ------------------------------------------------------------ */
.frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--sable);
  transform: translateZ(0);
}
@media (min-width: 768px) { .frame { border-radius: var(--r-lg); } }
.frame-xl { border-radius: var(--r-lg); }
@media (min-width: 768px) { .frame-xl { border-radius: var(--r-xl); } }
.frame img, .frame video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Parallaxe : l'image est agrandie et glisse dans son cadre via un calque */
[data-parallax] .px { position: absolute; inset: 0; will-change: transform; }
[data-parallax] img { transform: scale(1.2); }

/* Révélation : un voile (couleur de la section) se retire vers le bas + zoom arrière.
   Un voile plutôt qu'un clip-path : un élément entièrement clippé n'est jamais
   considéré visible par IntersectionObserver. */
[data-reveal="img"]::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 2;
  background: var(--reveal-bg, var(--ivoire));
  transform-origin: bottom;
  transition: transform 1.3s var(--ease-out);
}
[data-reveal="img"] img { transform: scale(1.25); transition: transform 1.8s var(--ease-out); }
[data-reveal="img"].hover-zoom.is-visible img { transition: transform 1.4s var(--ease-out); }
[data-reveal="img"].is-visible::after { transform: scaleY(0); }
[data-reveal="img"].is-visible img { transform: scale(1); }
[data-reveal="img"][data-parallax].is-visible img { transform: scale(1.2); }

/* Révélation : fondu + montée */
[data-reveal="up"], [data-reveal="fade"] {
  opacity: 0;
  transform: translateY(2.2rem);
  transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
[data-reveal="fade"] { transform: none; }
[data-reveal="up"].is-visible, [data-reveal="fade"].is-visible { opacity: 1; transform: none; }

/* Révélation mot à mot des titres */
[data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
[data-split] .w > * { display: inline-block; transform: translateY(112%); transition: transform 1.1s var(--ease-out); transition-delay: var(--d, 0ms); }
[data-split].is-visible .w > * { transform: translateY(0); }

/* Filet qui se dessine */
[data-reveal="line"] { transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease-out); }
[data-reveal="line"].is-visible { transform: scaleX(1); }

/* Zoom au survol */
.hover-zoom img { transition: transform 1.4s var(--ease-out); }
.hover-zoom:hover img, a:hover .hover-zoom img { transform: scale(1.05); }
[data-parallax].hover-zoom:hover img, a:hover [data-parallax].hover-zoom img { transform: scale(1.26); }

/* ------------------------------------------------------------
   Galerie horizontale pilotée par le scroll (desktop)
   ------------------------------------------------------------ */
.hscroll-track { display: flex; align-items: center; will-change: transform; }
@media (max-width: 1023px) {
  .hscroll { height: auto !important; }
  .hscroll-pin { position: relative !important; height: auto !important; }
  .hscroll-track {
    transform: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1.25rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1rem;
  }
  .hscroll-track::-webkit-scrollbar { display: none; }
  .hscroll-item { scroll-snap-align: start; }
}
/* Tablette : l'accroche du snap suit la marge de section (px-10) */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .hscroll-track { scroll-padding-inline: 2.5rem; }
}

/* ------------------------------------------------------------
   Réalisations : double image + curseur "Voir"
   ------------------------------------------------------------ */
.project .img-alt { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s var(--ease); }
.project:hover .img-alt { opacity: 1; }
.project .frame img { transition: transform 1.4s var(--ease-out), opacity 0.9s var(--ease); }
.project:hover .frame img { transform: scale(1.04); }

@media (min-width: 1024px) {
  .home-projects-grid { column-gap: 2rem; row-gap: 2.5rem; }
  .home-projects-grid > .project:nth-child(2) { margin-top: 6rem; }
  .home-projects-grid > .project:nth-child(4) { margin-top: 4rem; }
}

#cursor-pill {
  position: fixed;
  left: 0; top: 0;
  z-index: 40;
  pointer-events: none;
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.3rem;
  border-radius: var(--r-pill);
  background: var(--ivoire);
  color: var(--nuit);
  font-size: 0.76rem;
  font-weight: 500;
  box-shadow: 0 14px 40px -14px rgba(12, 27, 43, 0.5);
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
#cursor-pill.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@media (hover: hover) and (pointer: fine) { #cursor-pill { display: inline-flex; } }

/* ------------------------------------------------------------
   Services : lignes interactives
   ------------------------------------------------------------ */
.service-row {
  border-top: 1px solid rgba(12, 27, 43, 0.12);
  transition: padding-left 0.5s var(--ease);
}
.service-row:last-child { border-bottom: 1px solid rgba(12, 27, 43, 0.12); }
@media (min-width: 1024px) {
  .service-row:hover, .service-row.is-active { padding-left: 1.25rem; }
}
.service-row .svc-arrow { opacity: 0; transform: translateX(-0.5rem); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.service-row:hover .svc-arrow, .service-row.is-active .svc-arrow { opacity: 1; transform: none; }

#services-visual img { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s var(--ease), transform 1.6s var(--ease-out); transform: scale(1.06); }
#services-visual img.is-on { opacity: 1; transform: scale(1); }

/* ------------------------------------------------------------
   CRD Management : bulles en verre, transparentes plutôt que
   remplies, pour rester légères sur le fond bleu nuit profond.
   ------------------------------------------------------------ */
.mgmt-card {
  position: relative;
  border: 1px solid rgba(246, 244, 239, 0.12);
  background: linear-gradient(165deg, rgba(246, 244, 239, 0.07), rgba(246, 244, 239, 0.02));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: inset 0 1px 0 rgba(246, 244, 239, 0.08);
  transition: border-color 0.5s var(--ease), background-color 0.5s var(--ease);
}
.mgmt-card:hover { border-color: rgba(246, 244, 239, 0.22); }

/* ------------------------------------------------------------
   Formulaire
   ------------------------------------------------------------ */
.field {
  width: 100%;
  padding: 1.05rem 1.3rem;
  border-radius: var(--r-md);
  border: 1px solid rgba(12, 27, 43, 0.12);
  background: #fff;
  font-size: 0.9rem;
  color: var(--encre);
  outline: none;
  transition: border-color 0.4s var(--ease), background-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.field::placeholder { color: rgba(26, 26, 24, 0.4); }
.field:focus { border-color: var(--nuit); background: #fff; box-shadow: 0 0 0 4px rgba(12, 27, 43, 0.06); }

/* Chiffres */
.stat-number { font-variant-numeric: lining-nums tabular-nums; }

/* ------------------------------------------------------------
   Pied de page
   Trois colonnes : marque (texte, bouton, petit logo), navigation,
   coordonnées. Les liens des coordonnées portent un pictogramme.
   ------------------------------------------------------------ */
.foot-head { margin-bottom: 1.1rem; font-size: 0.72rem; font-weight: 500; color: var(--pierre); }
.foot-list { font-size: 0.875rem; line-height: 1.7; color: rgba(246, 244, 239, 0.7); }
.foot-list a { transition: color 0.35s var(--ease); }
.foot-list a:hover, .foot-list a[aria-current] { color: var(--ivoire); }

.foot-link { display: inline-flex; align-items: center; gap: 0.55rem; }
.foot-link svg { flex: none; width: 0.95rem; height: 0.95rem; transition: transform 0.4s var(--ease); }
/* Adresse sur deux lignes : la flèche s'aligne sur la première */
.foot-link.is-addr { align-items: flex-start; }
.foot-link.is-addr svg { width: 0.75rem; height: 0.75rem; margin-top: 0.45em; }
.foot-link.is-addr:hover svg { transform: translate(2px, -2px); }

/* Logo blanc, seul dans la colonne de gauche et centré sur la hauteur
   des listes. Le PNG a ~12 % de marges transparentes : la boîte fait
   27 % du conteneur pour un logo visible d'environ 24 %. */
.foot-logo { display: inline-block; max-width: 100%; transition: opacity 0.35s var(--ease); }
.foot-logo:hover { opacity: 0.85; }
.foot-logo img { display: block; width: clamp(14rem, 25vw, 30rem); max-width: 100%; height: auto; }

.foot-bottom {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(246, 244, 239, 0.1);
  font-size: 0.72rem;
  color: rgba(246, 244, 239, 0.45);
}
.foot-bottom a { transition: color 0.35s var(--ease); }
.foot-bottom a:hover, .foot-bottom a[aria-current] { color: var(--ivoire); }
@media (min-width: 640px) {
  .foot-bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* Accessibilité : mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  .hero-media, .hero-word > span, .hero-fade { transition: none; transform: none; opacity: 1; }
  [data-reveal], [data-split] .w > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  [data-reveal="img"]::after { display: none; }
  [data-parallax] img { transform: none !important; }
  .scroll-line::after { animation: none; }
  html { scroll-behavior: auto; }
}