/* ═══════════════════════════════════════════
   MOBILE — max-width: 768px
   Ne touche PAS au desktop (> 768px)
═══════════════════════════════════════════ */
@media (max-width: 768px) {

  :root { --px: 5.5vw; }

  html { background: #ffffff; }
  body { overflow-x: hidden; }

  /* Textes monospace : pas de coupure bizarre */
  p, .project-card__desc, .project-section__text,
  .about-hero__bio p, .project-card__title {
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: none;
  }
  /* Cadre : plus d'espace sur les côtés */
  .frame {
    top: 8px; bottom: 8px;
    left: 14px; right: 14px;
    border-radius: 10px;
  }

  /* ══════════════════════
     NAVIGATION + BURGER
  ══════════════════════ */
  .nav {
    padding: 2.8rem 10vw 1rem;
    position: relative;
    align-items: center;
  }

  .nav__logo-img { width: 120px; }

  /* Cache les liens par défaut */
  .nav__links {
    display: none;
    position: absolute; /* absolute au lieu de fixed pour échapper au transform de .site */
    top: 0; left: 0; right: 0;
    min-height: 100vh;
    background: var(--bg);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    z-index: 9990;
  }

  .nav__links.open { display: flex; }

  .nav__link { font-size: 1.3rem; }

  /* Bouton hamburger */
  .nav-burger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    z-index: 9991;
    background: none;
    border: none;
    padding: 6px;
  }

  .nav-burger span {
    display: block;
    width: 26px;
    height: 2px;
    background: var(--dark);
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: center;
  }

  .nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-burger.open span:nth-child(2) { opacity: 0; }
  .nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* ══════════════════════
     PAGE D'ACCUEIL
  ══════════════════════ */
  .hero__title {
    font-size: clamp(2.3rem, 13.5vw, 4.2rem);
    text-align: center;
  }

  .hero {
    padding: 0 4vw;
    justify-content: center;
    min-height: 100svh; /* centrage sur la hauteur visible mobile */
    margin-top: -5.5rem;
  }
  /* Le contenu se taille sur le titre — les bulles restent dans ses limites */
  .hero__content {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
  }

  /* DA + designer graphique → droite dans le bloc */
  .hero__tags-right { justify-content: flex-end; }

  /* 2026 → gauche dans le bloc */
  .hero__tags-left { justify-content: flex-start; }

  .tag {
    font-size: 1rem;
    padding: 0.6rem 1.2rem;
  }

  /* ══════════════════════
     PAGE À PROPOS
  ══════════════════════ */
  #about-hero-section,
  .about-hero {
    padding-top: 0.5rem !important;
    padding-left: var(--px);
    padding-right: var(--px);
    padding-bottom: 2.2rem !important;
  }

  .about-hero__grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-height: auto;
  }

  .about-hero__left { width: 100%; gap: 1.5rem; }

  .about-hero__name {
    font-size: clamp(2.4rem, 11vw, 4.2rem);
    letter-spacing: 0.06em;
  }

  .about-hero__bio p { font-size: 0.85rem; }
  .about-hero__bio { max-width: 100%; }

  .about-hero__right {
    position: relative;
    width: 100%;
    margin-left: 0;
  }

  .about-hero__photo-wrap { width: 100%; border-radius: 6px; }

  .about-hero__photo {
    height: 65vw;
    max-height: 65vw;
    border-radius: 6px;
  }

  .about-hero__caption { font-size: 1rem; margin-top: 1.2rem; }

  /* Encart 1 (#F6F2F1) — moins d'arrondi */
  .about-hero { border-radius: 0 0 30px 30px; }

  /* Outils — icônes plus petites, padding égal haut/bas */
  .tools { padding-bottom: 1rem !important; }
  .tools__card {
    padding: 1.5rem var(--px);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 0;
  }
  .tools__icons {
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  .tools { border-radius: 0 0 30px 30px; }
  .tools__icons { gap: 1rem; flex-wrap: wrap; justify-content: center; }
  .tool-icon { width: 42px; height: 42px; border-radius: 9px; }
  .tool-icon span { font-size: 0.75rem; }
  .tool-icon img { width: 42px; height: 42px; border-radius: 9px; }

  /* Timeline — garder 2 colonnes + espacement */
  .timeline { padding-top: calc(100px + 5.5rem) !important; padding-bottom: 7rem; }
  .timeline__grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    row-gap: 2rem;
  }
  .timeline__title { font-size: 0.8rem; }
  .timeline__company, .timeline__date { font-size: 0.75rem; }
  .tl-left { padding-right: 0.7rem; }
  .tl-right { padding-left: 0.7rem; }

  /* Dots centrés exactement sur la barre */
  .tl-left.tl-dot::after {
    right: calc(-1.25rem - 5px);
  }
  .tl-right.tl-dot::before {
    left: calc(-1.25rem - 5px);
  }

  /* Footer about — moins d'arrondi */
  .footer-wrap { border-radius: 30px 30px 0 0 !important; }


  .footer__inner {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  .footer__title {
    font-size: clamp(2.4rem, 11vw, 4.2rem) !important;
    margin-bottom: 2rem !important;
  }

  .footer__contact {
    margin-bottom: 2.8rem !important;
  }

  .footer__contact a,
  .footer__contact span { font-size: 1rem; }

  .footer__bottom {
    flex-direction: column;
    gap: 1.2rem;
    align-items: flex-start;
  }

  .footer__nav { gap: 1.5rem; }
  .footer__link { font-size: 1rem; }
  .footer__logo-img { width: 110px; }

  /* Arrondi global mobile */
  .footer { border-radius: 30px 30px 0 0 !important; }

  /* ══════════════════════
     PAGE PROJETS
  ══════════════════════ */
  .projects-hero { padding-top: 1.5rem !important; padding-bottom: 2.2rem !important; }

  .projects-title { font-size: clamp(2.1rem, 10vw, 3.7rem); }

  .projects-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 0 var(--px) 4rem;
  }

  .project-card__title { font-size: 1rem; }
  .project-card__subtitle { font-size: 1rem; }
  .project-card__desc { font-size: 0.85rem; }
  .project-card__desc br { display: none; }
  .project-tag { font-size: 0.78rem; padding: 0.35rem 0.8rem; }

  /* ══════════════════════
     PAGES PROJET DETAIL
  ══════════════════════ */
  .project-page-title { padding-top: 5.5rem !important; padding-bottom: 1rem; }

  .project-title { font-size: clamp(2.1rem, 10vw, 3.7rem); }

  .project-hero {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 0 var(--px) 1.5rem;
  }

  .project-hero__img-wrap { aspect-ratio: 4/3; }
  /* Neutralise complètement project-hero--stretch sur mobile */
  .project-hero--stretch { align-items: start; }
  .project-hero--stretch .project-hero__img-wrap { aspect-ratio: 4/3; height: auto; }
  .project-hero--stretch .project-hero__img { height: auto; }
  .project-hero__text { padding-left: 0; }

  .project-section__label { font-size: 0.95rem; }
  .project-section__text { font-size: 0.85rem; line-height: 1.6; }

  .project-section--grid2,
  .project-section--grid3,
  .project-section--grid-asym,
  .project-section--grid-asym-r {
    grid-template-columns: 1fr;
  }

  /* Standardisation espacements entre sections photo */
  .project-section--full,
  .project-section--margined,
  .project-section--grid2,
  .project-section--grid-asym,
  .project-section--grid-asym-r { padding-top: 0.8rem !important; }

  /* Gap uniforme dans les grilles */
  .project-section--grid2,
  .project-section--grid-asym,
  .project-section--grid-asym-r { gap: 0.8rem; }

  /* Hauteur uniforme des photos */
  .project-section--full img,
  .project-section--margined img,
  .project-section--grid2 img,
  .project-section--grid-asym img,
  .project-section--grid-asym-r img { height: 75vw !important; object-fit: cover; width: 100%; min-height: unset !important; }

  /* Espacement sous la dernière section photo */
  .project-section:last-of-type { padding-bottom: 5rem !important; }

  .project-section--centered {
    margin: 1.5rem var(--px);
    padding: 1.5rem 1.2rem;
    border-radius: 8px;
  }

  .project-cta { font-size: 0.9rem; padding: 0.7rem 2rem; }

  /* Salon SPF */
  .salon-top { grid-template-columns: 1fr; height: auto; }
  .salon-left-col { height: auto; }
  .salon-img-right { height: 60vw; }
  .salon-bottom { grid-template-columns: 1fr; gap: 1rem; }

  /* ══════════════════════
     PAGE CONTACT
  ══════════════════════ */
  .contact-hero { padding-top: 9.5rem !important; }
  .contact-title { font-size: clamp(2.1rem, 10vw, 3.7rem); }
  .contact-info__name,
  .contact-info__item { font-size: 0.95rem; }
  .contact-info__card { gap: 1.2rem !important; }
  .contact-info__message p { font-size: 0.85rem; }
  .contact-info { padding-top: calc(100px + 2rem) !important; padding-bottom: 5rem !important; }

}