/* ============================================================
   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 — s'étendent au-delà du canvas via --scale */
.band {
  position: absolute;
  left: calc((1024px - 100vw / var(--scale, 1)) / 2);
  width: calc(100vw / var(--scale, 1));
  z-index: 0;
}

/* Fondu doux entre deux bandes de couleur */
.band-fade {
  position: absolute;
  left: calc((1024px - 100vw / var(--scale, 1)) / 2);
  width: calc(100vw / var(--scale, 1));
  z-index: 0;
  pointer-events: none;
}

/* Grain sur les bandes de couleur unie */
.band--grainy::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.68' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.07;
  pointer-events: none;
  z-index: 1;
}

/* 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;
}

/* Épingle de localisation (pastille strasbourg) */
.loc-pin {
  position: absolute;
  z-index: 4;
}
.loc-pin svg { width: 100%; height: 100%; display: block; }

/* Carrousel de projets (pages générées depuis projects.json) */
.proj-carousel { position: absolute; z-index: 2; overflow: hidden; }
.proj-track { display: flex; height: 100%; transition: transform 0.35s ease; }
.proj-page { flex: 0 0 100%; position: relative; height: 100%; }

/* Vignette d'un projet (positionnée selon la disposition Canva) */
.proj-card {
  position: absolute;
  z-index: 2;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 5px 12px rgba(50, 20, 45, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.proj-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.proj-card:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(50, 20, 45, 0.34); }

/* Flèches de défilement du carrousel */
.carousel-arrow {
  position: absolute;
  z-index: 6;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: #cb78b9;
  color: #fff9f0;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 4px;
  box-shadow: 0 3px 9px rgba(60, 25, 55, 0.28);
  transition: background 0.15s ease;
}
.carousel-arrow:hover { background: #b85fa5; }

/* Petit cercle « ajouter » (rose + « + ») en haut à droite de chaque vignette */
.proj-add {
  position: absolute;
  z-index: 5;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #cb78b9;
  color: #fff9f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  padding-bottom: 2px;
}

/* Libellé sous une vignette (dans le flux de la cellule) */
.proj-card-label {
  position: absolute;
  z-index: 5;
  text-align: center;
  color: #fff9f0;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.18;
  word-break: break-word;
}
/* Libellé sous un dossier (positionné en absolu sur la toile) */
.proj-folder-label {
  position: absolute;
  z-index: 5;
  text-align: center;
  color: #fff9f0;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

/* Dossiers cliquables de l'accueil (image + libellé) — navigation vers les zones */
.im--nav { cursor: pointer; z-index: 6; transition: transform 0.15s ease; }
.im--nav:hover { transform: translateY(-3px); }
.tx--nav { cursor: pointer; }
.tx--nav:hover { text-decoration: underline; }

/* Dossiers de navigation (Mes passions / éducation) — au-dessus du carrousel */
.proj-folder { position: absolute; z-index: 3; cursor: pointer; }
.proj-folder img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Modal de détail projet (overlay plein écran, hors toile) */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(60, 25, 55, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-backdrop[hidden] { display: none; }
.modal-box {
  position: relative;
  width: min(520px, 92vw);
  max-height: 90dvh;
  overflow-y: auto;
  background: #fff9f0;
  border-radius: 22px;
  padding: 36px 32px 30px;
  box-shadow: 0 20px 60px rgba(40, 15, 40, 0.42);
}
.modal-close {
  position: absolute;
  top: 12px;
  right: 18px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 30px;
  line-height: 1;
  color: #aa4093;
}
.modal-img { width: 100%; height: 190px; object-fit: cover; border-radius: 14px; margin-bottom: 16px; display: block; }
.modal-img[hidden] { display: none; }
.modal-title { color: #722963; font-size: 26px; margin-bottom: 12px; padding-right: 28px; word-break: break-word; }
.modal-tech { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.tech-tag {
  background: #e7c3e1;
  color: #722963;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 13px;
  border-radius: 20px;
}
.modal-desc { color: #4a3145; font-size: 16px; line-height: 1.55; margin-bottom: 24px; }
.modal-links { display: flex; flex-wrap: wrap; gap: 10px; }
.modal-link {
  display: inline-block;
  background: #cb78b9;
  color: #fff9f0;
  text-decoration: none;
  font-weight: 700;
  padding: 11px 24px;
  border-radius: 26px;
  transition: background 0.15s ease;
}
.modal-link:hover { background: #b85fa5; }

/* Bouton « Mes projets » (rose doux, bordure tendre, pastille œil claire) */
.proj-btn {
  position: absolute;
  z-index: 1;
  border-radius: 24px;
  background: #e7c3e1;
  border: 3px solid #f7ebf3;
  box-shadow: 0 4px 10px rgba(110, 40, 95, 0.12);
}
.proj-eye-pill {
  position: absolute;
  z-index: 1;
  border-radius: 9px;
  background: #f0dcec;
}

/* Queue (pointe) de la bulle de chat « Éducation » */
.bubble-tail {
  position: absolute;
  z-index: 1;
}
.bubble-tail svg { width: 100%; height: 100%; display: block; }

/* Icône panneau + chevron de la barre de titre */
.win-sidebar {
  position: absolute;
  z-index: 5;
}
.win-sidebar svg { width: 100%; height: 100%; display: block; }

/* Carte crème avec ombre douce (au lieu d'une image à liseré noir) */
.soft-card {
  position: absolute;
  z-index: 1;
  background: #fff9f0;
  box-shadow: 0 12px 34px rgba(60, 25, 55, 0.20);
}

/* 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;
}

/* ===== Zone Compétences (repensée, hors PDF — fenêtres « macOS » du site) ===== */
/* Titre centré de la section */
.skills-heading {
  position: absolute;
  z-index: 5;
  text-align: center;
  font-size: 85px;
  color: #722963;
  white-space: nowrap;
}
/* Fenêtre (atouts ou groupe technique) : corps crème + ombre douce, comme les
   fenêtres « Mes passions » / « fullstack_developer » du reste de la maquette. */
.skill-win {
  position: absolute;
  z-index: 1;
  background: #fff9f0;
  border-radius: 18px;
  padding: 18px 24px 38px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 34px rgba(60, 25, 55, 0.20);
}
/* Barre de titre : 3 pastilles violettes + titre */
.skill-win-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.win-dots { display: inline-flex; gap: 7px; flex: 0 0 auto; }
.win-dots i { width: 11px; height: 11px; border-radius: 50%; background: #722962; }
.skill-win-title {
  color: #722963;
  font-size: 22px;
  font-weight: 700;
  font-style: italic;
}
/* Atouts : liste verticale, puce ronde rose, répartie sur la hauteur de la fenêtre */
.atout-list { display: flex; flex-direction: column; flex: 1; justify-content: space-between; gap: 12px; }
.atout-item {
  display: flex;
  align-items: center;
  gap: 13px;
  color: #722963;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.1;
}
.atout-item::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #cb78b9;
  flex: 0 0 auto;
}
/* Compétences techniques : étiquettes (chips) rose tendre, comme les badges techno
   de la modale projet (.tech-tag). Passent à la ligne automatiquement. */
.skill-chips { display: flex; flex-wrap: wrap; gap: 10px; align-content: flex-start; }
.skill-chip {
  background: #e7c3e1;
  color: #722963;
  font-size: 15px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 20px;
  line-height: 1;
}

/* Logo CAPCOD (absent du PDF) recréé : dégradé magenta→violet + lettrage espacé */
.capcod-logo {
  position: absolute;
  z-index: 1;
  border-radius: 14px;
  background: linear-gradient(160deg, #b81e74 0%, #8e2a86 48%, #3a1c5c 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff9f0;
  font-weight: 800;
  font-size: 36px;
  letter-spacing: 7px;
  padding-left: 7px;   /* compense le letter-spacing pour recentrer */
}

/* Zone « Mes expériences » : tâches réalisées par carte entreprise (puce coche).
   La couleur est posée en inline (claire sur la carte bleue, marine sinon). */
.exp-tasks {
  position: absolute;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.exp-task {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.12;
}
.exp-task::before {
  content: "\2713";   /* ✓ dans une pastille pleine (couleur du thème via --c) */
  color: #fff9f0;
  background: var(--c, currentColor);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  font-size: 9px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-top: 1px;
}

/* ===== Zone Contact : formulaire (fenêtre macOS) + liens du téléphone ===== */
/* Formulaire posé dans la fenêtre de gauche (envoi par mailto). Panneau crème
   translucide pour rester lisible par-dessus le ciel, dans le langage du site. */
.contact-form {
  position: absolute;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 26px 24px;
  border-radius: 0 0 18px 18px;   /* corps de fenêtre : aligné sous la barre de titre */
  background: #fff9f0;
  box-shadow: 0 14px 34px rgba(60, 25, 55, 0.18);
}
.cf-intro { color: #722963; font-size: 19px; font-weight: 700; font-style: italic; }
.cf-field {
  font-family: inherit;
  font-size: 15px;
  color: #4a3145;
  background: #fff;
  border: 1.5px solid #e7c3e1;
  border-radius: 11px;
  padding: 10px 13px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cf-field::placeholder { color: #b79bae; }
.cf-field:focus { border-color: #cb78b9; box-shadow: 0 0 0 3px rgba(203, 120, 185, 0.18); }
.cf-msg { flex: 1; resize: none; line-height: 1.4; }
.cf-send {
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: #fff9f0;
  background: #cb78b9;
  border: none;
  border-radius: 24px;
  padding: 11px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.cf-send:hover { background: #b85fa5; }

/* Voile pastel renforcé sur le floral du téléphone : motif en texture douce,
   les cartes de l'écran ressortent nettement. */
.contact-veil {
  position: absolute;
  z-index: 2;
  border-radius: 30px;
  background: linear-gradient(160deg, rgba(255, 249, 245, 0.66), rgba(250, 226, 240, 0.74));
  pointer-events: none;
}

/* Écran du téléphone : cartes posées sur le floral voilé (z-index 3) */
/* CV : bouton d'action rose (téléchargement) */
.ph-cv {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #cb78b9;
  color: #fff9f0;
  border-radius: 16px;
  text-decoration: none;
  font-size: 23px;
  font-weight: 700;
  font-style: italic;
  box-shadow: 0 6px 16px rgba(90, 30, 75, 0.30);
  transition: background 0.15s ease, transform 0.15s ease;
}
.ph-cv:hover { background: #b85fa5; transform: translateY(-2px); }
.ph-cv svg { width: 24px; height: 24px; flex: 0 0 auto; }
/* localisation / mail : carte claire (icône ronde marine + libellé + valeur) */
.ph-row {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  background: #fff9f0;
  border-radius: 16px;
  text-decoration: none;
  box-shadow: 0 5px 14px rgba(90, 30, 75, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ph-row:hover { transform: translateY(-2px); box-shadow: 0 9px 20px rgba(90, 30, 75, 0.26); }
.ph-row-ic {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #081f5c;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ph-row-ic svg { width: 21px; height: 21px; display: block; }
.ph-row-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ph-row-title { color: #081f5c; font-size: 16px; font-weight: 700; line-height: 1.1; }
.ph-row-sub {
  color: #4a3145;
  font-size: 12px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Réseaux : ligne d'icônes rondes centrées en bas du téléphone */
.ph-socials {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.ph-social {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff9f0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(90, 30, 75, 0.24);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ph-social:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(90, 30, 75, 0.32); }
.ph-social svg { width: 54%; height: 54%; display: block; }

/* 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;
}