/* ============================================================
   Bertin Océane — Portfolio
   Reconstruction fidèle du design Canva (toile fixe 1024 px,
   mise à l'échelle responsive). Chaque élément est positionné
   à sa coordonnée exacte du design.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #ffffff;
}

/* La toile : largeur fixe du design (1024 px), mise à l'échelle par JS.
   .frame masque tout débordement ; .canvas est le repère des coordonnées. */
.frame {
  width: 100%;
  overflow: hidden;
  background: #ffffff;
}
.canvas {
  position: relative;
  width: 1024px;
  height: 4879px;
  margin: 0 auto;
  transform-origin: top left;
}

/* Composants de section : regroupent le markup sans changer la mise en page
   (les enfants gardent leurs coordonnées absolues sur la toile). */
.sec { display: contents; }

/* Bandes de fond pleine largeur */
.band {
  position: absolute;
  left: 0;
  width: 1024px;
  z-index: 0;
}

/* Cartes / pastilles / barres (formes vectorielles du design) */
.card {
  position: absolute;
  z-index: 1;
}

/* Images placées à leurs coordonnées exactes */
.im {
  position: absolute;
  object-fit: cover;
  z-index: 2;
}

/* Photo dans un cadre Canva : la fenêtre rogne la photo, le box-shadow
   intérieur dessine la bordure colorée du cadre. */
.im-frame {
  position: absolute;
  overflow: hidden;
  z-index: 2;
}
.im-frame img {
  position: absolute;
  object-fit: cover;
}

/* Contours seuls (fenêtres, cartes, pastilles) — bordure sans remplissage */
.outline {
  position: absolute;
  z-index: 4;
}

/* Icônes de fenêtre (zoom, partage, rafraîchir) en haut à droite */
.win-icon {
  position: absolute;
  z-index: 5;
}
.win-icon svg { width: 100%; height: 100%; display: block; }

/* « + » blanc centré dans un bouton rond */
.plus-btn {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff9f0;
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  padding-bottom: 3px;
}

/* Textes (lignes positionnées individuellement, pas de retour ligne) */
.tx {
  position: absolute;
  z-index: 5;
  white-space: nowrap;
  line-height: 1.05;
  font-weight: 400;
}