/*
 * Sections de la page d'accueil
 * Reprise de `Site SecuriKeys IT - complet/site/style.css` (T005-V01).
 * Regles extraites telles quelles, puis prefixees `body.home main`.
 * Ce prefixe a deux roles :
 *   - `main` exclut structurellement l'en-tete et le pied de page, valides
 *     en T004-V01, que la couche accueil ne doit pas deborder ;
 *   - `body.home` l'emporte sur l'echelle typographique et les composants
 *     provisoires du theme, plus specifiques et encore utilises ailleurs.
 * Il disparaitra quand cette echelle provisoire sera retiree.
 * Les regles des autres pages sont ecartees.
 */
/* T005-V08 — regle de base de la reference (`section { scroll-margin-top }`) :
 * les ancres #packs et #pourquoi s'arretent sous l'en-tete collant. */
body.home main section{scroll-margin-top: calc(var(--header-h) + 12px);}
body.home main .hero{position: relative;
  background: var(--navy-700);
  color: var(--white);
  padding: 96px 0 84px;
  overflow: hidden;}
body.home main .hero-bg{position: absolute; inset: 0; overflow: hidden;}
body.home main .hero-blob{position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  opacity: 0.5;
  will-change: transform;}
body.home main .hero-blob--navy{width: 460px; height: 460px;
  background: radial-gradient(circle at 62% 38%, var(--navy-500), var(--navy-700) 75%);
  bottom: -220px; left: -120px;
  opacity: 0.35;
  animation: heroDriftB 19s ease-in-out infinite;
  animation-delay: -6s;}
body.home main .hero-blob--accent{width: 420px; height: 420px;
  background: radial-gradient(circle at 45% 55%, var(--navy-300), transparent 70%);
  top: 28%; left: 40%;
  opacity: 0.4;
  animation: heroDriftC 22s ease-in-out infinite;
  animation-delay: -11s;}
body.home main .hero-grid{position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at top, black, transparent 75%);}
body.home main .hero-vignette{position: absolute; inset: 0;
  background: radial-gradient(ellipse at 42% 42%, transparent 42%, rgba(7,10,15,.4) 100%);}
body.home main .hero-grain{position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: overlay;}
body.home main .hero-depth3d{position: absolute; inset: 0; overflow: hidden; pointer-events: none;}
body.home main .hero-depth3d, body.home main .hero-depth3d *{pointer-events: none !important;}
body.home main .hero-mac3d{position: absolute;
  top: 50%;
  right: 2%;
  transform: translateY(-50%);
  width: 460px;
  height: 460px;
  display: none;
  /* Le conteneur reste transparent aux événements — sa boîte de 460 px
     déborde sur le héros et bloquerait les clics alentour. Seul le canvas
     les reçoit, sinon le clic sur l'écran du portable n'atteint jamais
     Three.js. */
  pointer-events: none;
  z-index: 1;
  /* Soft navy vignette behind the (transparent-canvas) laptop, fading into
     the hero's own gradient — no visible rectangular panel seam, and the
     3D content itself stays un-clipped since this paints behind the canvas,
     not through a mask on it. */
  background: radial-gradient(circle at 50% 55%, #202631 0%, #202631 34%, rgba(32,38,49,.55) 55%, transparent 78%);}
body.home main .hero-inner{position: relative;}
body.home main .hero-inner > *{max-width: 720px;}
@media (min-width: 1180px){
body.home main .hero-mac3d{display: block;
    /* Centred in the space left over between the copy column and the screen
       edge, instead of pinned to the right.
         wrap content starts at  50vw - 566px   (1180px grid + 24px padding)
         copy is capped at 560px → its right edge is  50vw - 6px
         midpoint of the remaining gap to 100vw is    75vw - 3px
         minus half the 460px width →                 75vw - 233px
       Derived from those two constants, so the gap on each side of the
       laptop stays equal at every width and it can never reach the text. */
    right: auto;
    left: calc(75vw - 233px);}
body.home main .hero .hero-inner > *{max-width: 560px;}
}
body.home main .hero h1{color: var(--white); margin-bottom: 20px;}
body.home main .hero-tagline{font-size: 1.22rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  color: rgba(255,255,255,.9);
  max-width: 620px;
  margin-bottom: 12px;}
body.home main .hero-lead{font-size: 1.12rem;
  color: rgba(255,255,255,.78);
  max-width: 620px;
  margin-bottom: 34px;}
body.home main .hero-actions{display: flex; flex-wrap: wrap; align-items: stretch; gap: 14px; margin-bottom: 40px;}
body.home main .hero-tags{display: flex; flex-wrap: wrap; align-items: center;}
body.home main .hero-tags li{font-size: 0.92rem;
  font-weight: 600;
  color: rgba(255,255,255,.75);}
body.home main .hero-tags li + li::before{content: "·";
  display: inline-block;
  margin: 0 12px;
  color: rgba(255,255,255,.35);}
body.home main .stats{background: var(--navy-900); padding: 44px 0;}
body.home main .stats-grid{display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;}
body.home main .stat-card{text-align: center; padding-inline: 12px;}
body.home main .stat-num, body.home main .stat-suffix{font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: 2.6rem;
  color: var(--lime-500);}
body.home main .stat-suffix{font-size: 1.6rem;}
body.home main .stat-card p{color: rgba(255,255,255,.65); font-size: 0.92rem; margin-top: 6px;}
body.home main .competences{padding: 88px 0; background: var(--paper); position: relative; overflow: hidden;}
body.home main .competences::before{content: "";
  position: absolute;
  width: 560px; height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--lime-100), transparent 70%);
  top: -200px; right: -180px;
  opacity: 0.6;
  pointer-events: none;
  animation: lightDriftSlow 34s ease-in-out infinite;}
body.home main .skills-grid{display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;}
body.home main .skill-card{display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  text-align: left;
  /* Brand navy card on the white section — high contrast by default, and it
     brightens on hover instead of the old grey→white shift. */
  background: var(--navy-700);
  border: 1px solid var(--navy-500);
  border-radius: var(--r-lg);
  padding: 26px 24px;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              opacity var(--dur-slow) var(--ease-out);
  min-height: 44px;}
body.home main .skill-card:hover, body.home main .skill-card:focus-visible{transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--lime-500);
  background: var(--navy-600);}
body.home main .skill-card:active{transform: translateY(-1px) scale(0.99);}
body.home main .skill-icon{display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 14px;
  /* Darker tile inside the navy card; flips to solid lime on hover so the
     colour change is unmistakable. */
  background: var(--navy-900);
  color: var(--lime-500);
  transition: background var(--dur-base), color var(--dur-base), transform var(--dur-base) var(--ease-out);}
body.home main .skill-card:hover .skill-icon{background: var(--lime-500); color: var(--navy-700); transform: rotate(-6deg) scale(1.06);}
body.home main .skill-card h3{font-size: 1.08rem; margin-bottom: 2px; color: var(--white);}
body.home main .skill-card p{font-size: 0.92rem; color: rgba(255,255,255,.72);}
body.home main .skill-more{margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--lime-500);}
body.home main .skill-more svg{transition: transform var(--dur-base) var(--ease-out);}
body.home main .skill-card--ask{background: var(--lime-500);
  border-color: var(--lime-600);}
body.home main .skill-card--ask:hover, body.home main .skill-card--ask:focus-visible{background: var(--lime-600);
  border-color: var(--navy-700);}
body.home main .skill-card--ask .skill-icon{background: var(--navy-700); color: var(--lime-500);}
body.home main .skill-card--ask:hover .skill-icon{background: var(--navy-900); color: var(--lime-500);}
body.home main .skill-card--ask h3{color: var(--navy-700);}
body.home main .skill-card--ask p{color: var(--navy-800);}
body.home main .skill-card--ask .skill-more{color: var(--navy-700);}
body.home main .skill-card:hover .skill-more svg{transform: translateX(4px);}
body.home main .why{padding: 88px 0; background: var(--paper-soft); position: relative; overflow: hidden;}
body.home main .why::before{content: "";
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(32,38,49,.05), transparent 70%);
  bottom: -200px; left: -160px;
  pointer-events: none;
  animation: lightDriftSlow 30s ease-in-out infinite reverse;}
body.home main .why-inner{display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;}
body.home main .why-list{display: flex; flex-direction: column; gap: 16px; margin: 26px 0 32px;}
body.home main .why-list li{display: flex; align-items: flex-start; gap: 12px; font-weight: 500; color: var(--ink);}
body.home main .why-list svg{flex-shrink: 0; margin-top: 1px;}
body.home main .why-blocks{display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 56px;
  row-gap: 46px;
  margin-top: 72px;}
body.home main .why-block{padding-top: 22px;
  border-top: 1px solid var(--line-strong);
  display: flex;
  flex-direction: column;
  transition: opacity var(--dur-slow) var(--ease-out);}
body.home main .why-block h3{font-size: 1.02rem; margin-bottom: 12px; letter-spacing: -0.01em;}
body.home main .why-block p{font-size: 0.94rem; color: var(--ink-soft); line-height: 1.65;}
body.home main .why-block-link{margin-top: auto;
  padding-top: 16px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.85rem; font-weight: 700; color: var(--navy-700);}
body.home main .why-block-link svg{transition: transform var(--dur-base) var(--ease-out);}
body.home main .why-block:hover .why-block-link svg{transform: translateX(4px);}
body.home main .why-block-todo{margin-top: 12px;
  font-size: 0.85rem !important;
  font-style: italic;
  color: var(--ink-faint) !important;}
body.home main .why-visual{display: flex; justify-content: center;}
body.home main .orbit-card{width: 280px; height: 280px;
  border-radius: 32px;
  background: var(--navy-700);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  box-shadow: var(--shadow-lg);
  position: relative;}
body.home main .orbit-card::before{content: "";
  position: absolute; inset: -14px;
  border: 1.5px dashed var(--line-strong);
  border-radius: 40px;}
body.home main .logo-3d{width: 100%; height: 100%;}
body.home main .partners{padding: 80px 0; background: var(--paper);}
body.home main .partners-grid{display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 48px;
  max-width: 980px;
  margin-inline: auto;}
body.home main .partners-grid li.partner--logo{display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-fast);}
body.home main .partners-grid li.partner--logo img{height: 32px;
  width: auto;
  display: block;}
body.home main .partners-grid li.partner--logo:hover{transform: translateY(-3px);}
body.home main #zone{margin-top: 72px;}
body.home main .zone-head{max-width: none; margin-bottom: 40px;}
body.home main .hdf-map-wrap{max-width: 900px;
  margin: 0 auto 56px;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);}
body.home main .hdf-map{width: 100%; height: auto; display: block; overflow: visible;}
body.home main .hdf3d{position: relative;
  /* Le viewBox annonce 760x560 mais les contours n'en occupent que 434x528 :
     la région est plus HAUTE que large. Inclinée à 58°, sa profondeur se
     comprime de 0,85, ce qui donne un rapport apparent proche du carré. */
  aspect-ratio: 1 / 0.97;
  max-width: 660px;
  margin: 0 auto;}
body.home main .hdf3d canvas{display: block; width: 100%; height: 100%;}
body.home main .hdf3d.is-ready > .hdf-map{display: none;}
body.home main .hdf3d:not(.is-ready){aspect-ratio: auto;}
body.home main .hdf3d-labels{position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;}
body.home main .hdf3d-label{position: absolute;
  top: 0;
  left: 0;
  /* Le script écrit un translate() en pixels ; la mise en place autour du point
     se fait ici, pour qu'il n'ait pas à connaître la largeur du libellé. */
  margin: -10px 0 0 10px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: rgba(18, 22, 29, 0.86);
  color: var(--white);
  font-family: "Poppins", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);}
body.home main .hdf3d-label.is-visible{opacity: 1;}
@media (max-width: 600px){
body.home main .hdf3d-label{font-size: 0.72rem; padding: 2px 7px; margin: -9px 0 0 8px;}
}
body.home main .hdf3d-aide{display: none;
  margin: 6px 0 0;
  text-align: center;
  font-size: 0.82rem;
  color: var(--ink-faint);}
@media (hover: none){
body.home main .hdf3d-aide{display: block;}
}
body.home main .hdf-shapes path{stroke: #fff;
  stroke-width: 2.4;
  stroke-linejoin: round;
  transition: fill var(--dur-base) var(--ease-out);}
body.home main .hdf-shapes path:hover{fill: var(--lime-600);}
body.home main .hdf-hq{fill: var(--lime-500); stroke: var(--navy-900); stroke-width: 1.6;}
body.home main .hdf-hq-halo{fill: var(--lime-500); opacity: 0.28; animation: hdfPulse 2.8s ease-in-out infinite; transform-origin: center; transform-box: fill-box;}
body.home main .hdf-hq-label{font-family: "Poppins", sans-serif; font-weight: 700; font-size: 14px;
  fill: #fff; pointer-events: none;
  paint-order: stroke; stroke: rgba(18,22,29,.7); stroke-width: 3.2px; stroke-linejoin: round;}
body.home main .hdf-hq-sub{font-family: "Poppins", sans-serif; font-weight: 600; font-size: 10.5px;
  fill: var(--lime-500); letter-spacing: 0.04em; pointer-events: none;
  paint-order: stroke; stroke: rgba(18,22,29,.7); stroke-width: 3px; stroke-linejoin: round;}
body.home main .zone-notes{display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px 40px;}
body.home main .zone-note{padding-left: 18px; border-left: 2px solid var(--lime-500);}
body.home main .zone-note h3{font-size: 1rem; margin-bottom: 8px;}
body.home main .zone-note p{font-size: 0.94rem; color: var(--ink-soft);}
body.home main .packs{padding: 88px 0; background: var(--navy-700); position: relative; overflow: hidden;}
body.home main .packs-bg{position: absolute; inset: 0; overflow: hidden; pointer-events: none;}
body.home main .packs-blob{position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform;}
body.home main .packs-blob--a{width: 480px; height: 480px;
  background: radial-gradient(circle at 35% 35%, var(--lime-700), transparent 72%);
  top: -180px; right: -120px;
  opacity: 0.3;
  animation: packsDriftA 24s ease-in-out infinite;}
body.home main .packs-blob--b{width: 420px; height: 420px;
  background: radial-gradient(circle at 60% 40%, var(--navy-300), transparent 72%);
  bottom: -180px; left: -100px;
  opacity: 0.35;
  animation: packsDriftB 28s ease-in-out infinite;
  animation-delay: -8s;}
body.home main .packs-depth3d{position: absolute; inset: 0; pointer-events: none;}
body.home main .packs-depth3d, body.home main .packs-depth3d *{pointer-events: none !important;}
body.home main .packs h2{color: var(--white);}
body.home main .packs-grid{display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;}
body.home main .pack-card{background: var(--navy-800);
  border: 1.5px solid var(--navy-500);
  border-radius: var(--r-lg);
  overflow: hidden;
  scroll-margin-top: calc(var(--header-h) + 12px);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out),
              opacity var(--dur-slow) var(--ease-out);}
body.home main .pack-card:hover{border-color: var(--navy-400);}
body.home main .pack-card.is-featured{border-color: var(--lime-500);
  box-shadow: 0 0 0 1px var(--lime-500), var(--shadow-lg);}
body.home main .pack-badge{display: none;
  background: var(--lime-500);
  color: var(--navy-700);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 7px;}
body.home main .pack-card.is-featured .pack-badge{display: block;}
body.home main .pack-head{width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--white);
  padding: 28px 26px 22px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;}
body.home main .pack-head:hover .pack-name{color: var(--lime-500);}
body.home main .pack-name{font-family: "Poppins", sans-serif; font-weight: 700; font-size: 1.2rem; transition: color var(--dur-fast);}
body.home main .pack-role{font-size: 0.86rem; color: rgba(255,255,255,.55); margin-bottom: 10px;}
body.home main .pack-price{display: flex; align-items: baseline; gap: 6px;}
body.home main .pack-price .amount{font-family: "Poppins", sans-serif; font-size: 2.1rem; font-weight: 800; color: var(--lime-500);}
body.home main .pack-price .period{font-size: 0.85rem; color: rgba(255,255,255,.55);}
body.home main .pack-from{font-size: 0.76rem; color: rgba(255,255,255,.45); margin-top: 2px;}
body.home main .pack-toggle{margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--white);}
body.home main .pack-toggle svg{transition: transform var(--dur-base) var(--ease-out);}
body.home main .pack-head[aria-expanded="true"] .pack-toggle svg{transform: rotate(180deg);}
body.home main .pack-body{max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-slow) var(--ease-in-out);}
body.home main .pack-body-inner{overflow: hidden;}
body.home main .pack-features{padding: 4px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  border-top: 1px solid var(--navy-500);
  padding-top: 18px;
  margin: 0 26px;}
body.home main .pack-features li{display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  color: rgba(255,255,255,.82);}
body.home main .pack-features svg{flex-shrink: 0; margin-top: 2px; color: var(--lime-500);}
body.home main .pack-features .pack-includes-label{color: var(--lime-500);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 6px 0 -2px;}
body.home main .pack-note{margin: 14px 26px 0;
  font-size: 0.78rem;
  color: rgba(255,255,255,.5);
  font-style: italic;}
body.home main .pack-cta{margin: 20px 26px 26px; display: block; text-align: center;}
body.home main .contact{padding: 96px 0; background: var(--paper); position: relative; overflow: hidden;}
body.home main .contact::before{content: "";
  position: absolute;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--lime-050), transparent 72%);
  top: -180px; left: -160px;
  pointer-events: none;
  animation: lightDriftSlow 32s ease-in-out infinite;
  animation-delay: -10s;}
body.home main .contact-inner{display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;}
body.home main .contact-info{margin-top: 30px; display: flex; flex-direction: column; gap: 16px;}
body.home main .contact-info li{display: flex; align-items: center; gap: 12px; color: var(--ink); font-weight: 500;}
body.home main .contact-info svg{color: var(--navy-700); flex-shrink: 0;}
body.home main .contact-info a:hover{text-decoration: underline;}
body.home main .contact-form{background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px;}
body.home main .esn-bande{background: var(--navy-700);
  padding: 96px 0 104px;
  position: relative;
  overflow: hidden;}
body.home main .esn-bande-grille{display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 56px;
  align-items: center;}
body.home main .esn-bande-mark{width: 240px; height: auto; justify-self: end; pointer-events: none;}
body.home main .esn-bande-inner{max-width: 860px;}
body.home main .esn-bande h2{color: var(--white);
  font-size: clamp(2rem, 1.3rem + 3.3vw, 3.9rem);
  letter-spacing: -0.015em;
  line-height: 1.12;
  margin-bottom: 26px;}
body.home main .esn-bande-lead{font-size: 1.18rem;
  color: rgba(255, 255, 255, 0.78);
  max-width: 700px;
  margin-bottom: 36px;}
@media (max-width: 1080px){
body.home main .esn-bande-grille{grid-template-columns: minmax(0, 1fr); gap: 0;}
body.home main .esn-bande-mark{display: none;}
}
@media (max-width: 900px){
body.home main .esn-bande{padding: 60px 0 64px;}
}
@media (max-width: 1024px){
body.home main .skills-grid{grid-template-columns: repeat(2, 1fr);}
body.home main .packs-grid{grid-template-columns: 1fr; max-width: 480px; margin-inline: auto;}
body.home main .why-inner{grid-template-columns: 1fr;}
body.home main .why-blocks{grid-template-columns: repeat(2, 1fr); column-gap: 40px;}
body.home main .why-visual{order: -1;}
body.home main .orbit-card{width: 220px; height: 220px;}
body.home main .contact-inner{grid-template-columns: 1fr; gap: 40px;}
body.home main .stats-grid{gap: 20px;}
}
@media (max-width: 768px){
body.home main .hero{padding: 56px 0 56px;}
body.home main .hero-actions{flex-direction: column; align-items: stretch;}
body.home main .stats-grid{grid-template-columns: 1fr; gap: 28px;}
body.home main .competences, body.home main .why, body.home main .packs, body.home main .contact{padding: 60px 0;}
body.home main .skills-grid{grid-template-columns: 1fr;}
body.home main .why-blocks{grid-template-columns: 1fr; row-gap: 34px; margin-top: 48px;}
body.home main .contact-form{padding: 24px;}
body.home main .contact-info a{display: inline-block; padding: 7px 0;}
}
@media (max-width: 480px){
body.home main .pack-price .amount{font-size: 1.8rem;}
}
@media print{
body.home main .hero-bg, body.home main .hero-mac3d, body.home main .hero-depth3d, body.home main .logo-3d, body.home main .packs-depth3d{display: none;}
}
body.home main .merci{background: var(--paper-soft);
  padding: 10px 0 0;
  overflow: hidden;}
body.home main .merci-inner{display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;}
body.home main .merci-robot{width: 200px; height: 200px; flex: none;}
body.home main .merci-robot, body.home main .merci-robot *{pointer-events: none !important;}
body.home main .merci-bulle{position: relative;
  /* Remontée à hauteur de tête. Relevé sur un rendu : dans un canevas de
     200px, le centre de la tête est à 54px du haut, soit 46px au-dessus du
     centre du canevas. La marge basse vaut donc le double, l'alignement
     centré ne remontant l'élément que de la moitié. Et une marge gauche
     négative rattrape le vide que le robot laisse à droite de son canevas. */
  margin: 0 0 92px -18px;
  padding: 11px 19px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--navy-700);
  white-space: nowrap;}
body.home main .merci-bulle::before, body.home main .merci-bulle::after{content: "";
  position: absolute;
  top: 50%;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;}
body.home main .merci-bulle::before{left: -10px;
  margin-top: -9px;
  border-right: 10px solid var(--line);}
body.home main .merci-bulle::after{left: -8px;
  margin-top: -8px;
  border-right: 9px solid var(--paper);}
@media (max-width: 600px){
body.home main .merci-robot{width: 130px; height: 130px;}
body.home main .merci-bulle{margin: 0 0 60px -12px;
    padding: 9px 14px;
    font-size: 0.86rem;
    white-space: normal;
    max-width: 42vw;}
}
body.home main .photo-band{position: relative;
  height: 320px;
  overflow: hidden;
  /* Fond tenu avant l'arrivée de l'image : pas de flash blanc. */
  background: var(--navy-700);}
body.home main .photo-band img{display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;}
body.home main .photo-band::after{content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(32, 38, 49, 0.16), rgba(32, 38, 49, 0.40));
  pointer-events: none;}
@media (max-width: 900px){
body.home main .photo-band{height: 240px;}
}
@media (max-width: 560px){
body.home main .photo-band{height: 170px;}
}
body.home main .photo-band--datacenter{margin-top: 72px;}
@media (max-width: 560px){
body.home main .photo-band--datacenter{margin-top: 48px;}
}
body.home main .clients{padding: 80px 0; background: var(--paper); overflow: hidden;}
body.home main .clients-titre{margin: 0;}
body.home main .clients-toggle{display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  /* Le titre est la seule commande de la section : sa zone tactile doit
     atteindre les 44 px recommandés, que la hauteur du texte ne donne pas. */
  padding: 8px 6px;
  margin: -8px -6px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: color var(--dur-fast) var(--ease-out);}
body.home main .clients-toggle:hover{color: var(--navy-500);}
body.home main .clients-toggle svg{flex: none;
  color: var(--navy-500);
  transition: transform var(--dur-base) var(--ease-out);}
body.home main .clients-toggle[aria-expanded="true"] svg{transform: rotate(180deg);}
body.home main .clients-bandeau{position: relative;
  margin-top: 34px;
  overflow: hidden;
  /* Les logos s'effacent aux deux bords au lieu d'apparaître d'un coup. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);}
body.home main .clients-piste{display: flex; gap: 18px; width: max-content;}
body.home main .clients-piste.is-anime{animation: clients-defile linear infinite;}
body.home main .clients-bandeau:hover .clients-piste.is-anime{animation-play-state: paused;}
body.home main .client-tuile{flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: var(--white);}
body.home main .client-tuile img{/* Dimensions en pixels, jamais en pourcentage. Dans une piste dont la
     hauteur dépend de son contenu, « max-height: 100% » n'a pas de
     référence : la règle est ignorée, l'image se cale sur sa largeur et
     déborde de sa case — c'est ce qui coupait les logos.
     object-fit: contain garantit qu'aucune marque n'est recadrée ni
     déformée : elle est mise en boîte, avec du blanc autour. */
  width: 152px;
  height: 78px;
  object-fit: contain;}
body.home main .clients-tous{display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 18px;
  margin-top: 34px;}
@media (prefers-reduced-motion: reduce){
body.home main .clients-piste.is-anime{animation: none;}
body.home main .clients-bandeau{overflow-x: auto;}
}
@media (max-width: 640px){
body.home main .clients{padding: 56px 0;}
body.home main .client-tuile{padding: 11px;}
body.home main .client-tuile img{width: 120px; height: 62px;}
body.home main .clients-tous{grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px;}
}
body.home main .hero-mac3d canvas{pointer-events: auto;}
@keyframes spin{
 to { transform: rotate(360deg); } 
}
@keyframes heroDriftB{

  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(120px, -90px) scale(1.22); }

}
@keyframes heroDriftC{

  0%, 100% { transform: translate(-60px, 34px) scale(1); }
  50%      { transform: translate(90px, -70px) scale(1.28); }

}
@keyframes lightDriftSlow{

  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(40px, -30px) scale(1.1); }

}
@keyframes hdfPulse{

  0%, 100% { transform: scale(1);   opacity: 0.28; }
  50%      { transform: scale(1.35); opacity: 0.10; }

}
@keyframes packsDriftA{

  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-70px, 60px) scale(1.15); }

}
@keyframes packsDriftB{

  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(80px, -50px) scale(1.18); }

}
@keyframes clients-defile{

  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }

}