/* ============================================================================
   SYSTÈME DE RECTANGLES DÉCORATIFS - CCP
   ============================================================================

   Rectangles colorés décoratifs positionnés via JS.
   Couleurs : rouge, orange, bleu, vert (variables du design system).
   Masqués sur mobile (< 768px).

   ============================================================================ */


/* ============================================================================
   HERO - Configuration pour les rectangles internes
   ============================================================================ */

.laika-hero {
  position: relative;
  /* overflow: visible — défini dans hero.css — nécessaire pour le scroll-indicator (bottom: -50px) */
}

.laika-hero-home {
  position: relative;
  overflow: hidden; /* Les rectangles ne débordent jamais du hero-home */
}


/* ============================================================================
   COMPOSANTS - Configuration pour les rectangles internes
   ============================================================================ */

.press-cards,
.contact,
.newsletter {
  position: relative;
  /* Pas d'overflow hidden :
     - press-cards n'a pas de blips
     - contact/newsletter : blips horizontaux vont au bord de l'écran */
}

.team,
.chiffres {
  position: relative;
}

/* text-columns utilisé pour grouping avec press-cards : pas d'overflow hidden */
.text-columns {
  position: relative;
}

/* vous-intro et theme-nav : pas de blips */

/* Sections footer — accueillent les blips décoratifs */
.footer-return,
.footer-contact,
.footer-newsletter,
.footer-legal {
  position: relative;
}


/* ============================================================================
   CONTAINER HERO (rectangles à l'intérieur du hero)
   ============================================================================ */

.deco-rects-hero {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 3; /* Au-dessus du dégradé (z-index: 2), au même niveau que le contenu */
}


/* ============================================================================
   CONTAINER COMPONENT (rectangles à l'intérieur des composants)
   ============================================================================ */

.deco-rects-component {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 2; /* Au-dessus du contenu du composant */
}

/* Container étendu pour blips externes (team, chiffres) */
.deco-rects-component--external {
  top: -40px !important;
  bottom: auto !important;
}


/* ============================================================================
   CONTAINER PRINCIPAL (rectangles des côtés de la page)
   ============================================================================ */

.deco-rects-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* La hauteur réelle sera définie par JS */
  pointer-events: none;
  z-index: 2; /* Au-dessus du contenu de base, sous le header (z-index: 100) */
  overflow: hidden; /* Empêcher scrollbar horizontal */
}


/* ============================================================================
   RECTANGLE DE BASE
   ============================================================================ */

.deco-rect {
  position: absolute;
  pointer-events: none;
}


/* ============================================================================
   MODIFIERS COULEUR
   ============================================================================ */

.deco-rect--rouge {
  background-color: var(--color-rouge);
}

.deco-rect--orange {
  background-color: var(--color-orange);
}

.deco-rect--bleu {
  background-color: var(--color-bleu);
}

.deco-rect--vert {
  background-color: var(--color-vert);
}


/* ============================================================================
   MODIFIERS ORIENTATION
   ============================================================================ */

.deco-rect--vertical {
  transition: top 1.2s ease-in-out; /* Animation verticale */
}

.deco-rect--horizontal {
  transition: left 1.2s ease-in-out; /* Animation horizontale */
}


/* ============================================================================
   RESPONSIVE
   ============================================================================ */

/* Tablette - pas de changement pour l'instant, on ajustera plus tard */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) and (orientation: portrait) and (max-width: 1032px) {

}

/* Mobile - masquer les blips externes (team, chiffres) qui débordent sur les bords */
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (orientation: portrait) and (max-width: 1032px) {
  .deco-rects-component--external {
    display: none;
  }
}