@charset "UTF-8";

/* Shared hero-wave component. The SVG markup is rendered once by components.js. */
:root {
  --page-accent: #dce6d6;
  --hero-wave-surface: #fcfcfb;
}

body[data-page="accueil"] { --page-accent: #f5e3d0; --hero-wave-surface: #faf9f7; }
body[data-page="agence"] { --page-accent: #f1dccb; }
body[data-page="realisations"] { --page-accent: #d8e2d0; }
body[data-page="photos"],
body[data-page="video"] { --page-accent: #dce6d6; }
body[data-page="charte"],
body[data-page="print"] { --page-accent: #d8e2d0; }
body[data-page="social"] { --page-accent: #f1dccb; }
body[data-page="catalogue"],
body[data-page="web"] { --page-accent: #dce7d8; }
body[data-page="contact"] { --page-accent: #ded8e9; }
body[data-page="mentions"],
body[data-page="confidentialite"] { --page-accent: #dce6d6; }
body[data-page="news"] { --page-accent: #d6c1a3; --hero-wave-surface: #f6eee5; }

[data-hero-wave].hero-wave {
  position: absolute;
  z-index: 3;
  inset: auto 0 0;
  width: 100%;
  height: clamp(44px, 3vw, 52px);
  overflow: visible;
  line-height: 0;
  pointer-events: none;
  /* Pas d'animation d'entrée : la vague est la jonction entre le hero et la
     section qui suit. Comme cette section s'affiche immédiatement, toute
     apparition différée de la vague créait une cassure visible au chargement. */
}

[data-hero-wave].hero-wave > .wave-bg {
  position: absolute;
  inset: 0 0 -1px;
  width: calc(100% + 4px);
  height: 100%;
  max-width: none;
  margin-left: -2px;
  /* Le tracé descend volontairement très loin sous la ligne de vague. Le
     viewport SVG doit donc rester rogné ; seul le sceau, frère du SVG, est
     autorisé à dépasser dans la section suivante. */
  overflow: hidden;
  shape-rendering: geometricPrecision;
}

[data-hero-wave] .hero-wave-surface { fill: var(--hero-wave-surface); }

/* Le décor d'extension est construit depuis la vraie partie gauche de chaque
   illustration. Le visuel principal se fond dessus puis reste ancré à droite,
   sans bande verticale, flou artificiel ni déformation du sujet. */
@media (min-width: 901px) {
  .hero,
  .portfolio-hero {
    isolation: isolate;
    background-image: var(--hero-edge, var(--hero-image)) !important;
    background-position: center bottom !important;
    /* Les assets edge sont des bandes verticales 1 px issues du bord réel du
       visuel : on étire uniquement ce dégradé de couleur, sans agrandir ni
       flouter une image raster. */
    background-size: 100% 100% !important;
  }
  .hero::before,
  .portfolio-hero::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 0;
    /* Les sources sont panoramiques et leur sujet est proche du centre. Ce
       décalage responsive place le personnage juste à droite de la colonne de
       texte, sans étirer ni rogner verticalement le visuel. */
    background: var(--hero-image) calc(100% + var(--hero-art-shift, clamp(200px, calc(1150px - 40vw), 720px))) bottom / auto 100% no-repeat;
    pointer-events: none;
  }
  .portfolio-hero::after {
    z-index: 1;
  }
  .hero-content,
  .hero-inner,
  .portfolio-hero-inner { z-index: 2; }
  [data-hero-wave].hero-wave { z-index: 4; }
}

@media (max-width: 700px) {
  [data-hero-wave].hero-wave { height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-hero-wave].hero-wave {
    opacity: 1;
    transform: none;
    animation: none;
  }
}