@media screen and (max-width: 1400px) {
  #profile {
    height: 83vh;
    margin-bottom: 6rem;
  }
  .about-containers {
    flex-wrap: wrap;
  }
  #contact,
  #projects {
    height: fit-content;
  }
}

@media screen and (max-width: 1200px) {
  #desktop-nav {
    display: none;
  }
  body{ padding-top: 0; }

  #hamburger-nav {
    display: flex;
  }
  #experience,
  .experience-details-container {
    margin-top: 2rem;
  }
  #profile,
  .section-container {
    display: block;
  }
  .arrow {
    display: none;
  }
  section,
  .section-container {
    height: fit-content;
  }
  section {
    margin: 0 5%;
  }
  .section__pic-container {
    width: 275px;
    height: 275px;
    margin: 0 auto 2rem;
  }
  .about-containers {
    margin-top: 0;
  }
}

@media screen and (max-width: 600px) {
  #contact,

  #profile {
    height: 83vh;
    margin-bottom: 0;

  }

  article {
    font-size: 1rem;
  }

  .about-containers,
  .contact-info-upper-container,
  .btn-container {
    flex-wrap: wrap;
  }
  .contact-info-container {
    margin: 0;
  }
  .contact-info-container p,
  .nav-links li a {
    font-size: 1rem;
  }
  .experience-sub-title {
    font-size: 1.25rem;
  }
  .logo {
    font-size: 1.5rem;
  }
  .nav-links {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }
  .section__pic-container {
    width: auto;
    height: 46vw;
    justify-content: center;
  }
  .section__text__p2 {
    font-size: 1.25rem;
  }
  .title {
    font-size: 2rem;
  }
  .text-container {
    text-align: justify;
  }
}

/* === PAGE D’ACCUEIL MOBILE === */
@media (max-width: 768px) {
  #profile {
    display: flex;               /* <<< indispensable pour réactiver le flex */
    flex-direction: column;
    justify-content: center;     /* centre verticalement */
    align-items: center;         /* centre horizontalement */
    min-height: 100svh;          /* meilleure unité sur mobile */
    height: auto;                /* on laisse min-height gérer */
    margin-bottom: 0;
    text-align: center;
    padding: 0 1rem;
  }

  .section__text {
    max-width: 90%;
  }
  .title1 { font-size: 2rem; }
  .section__text__p2 { font-size: 1.2rem; }
  .btn-container { justify-content: center; }

  #offres .title {
    text-align: center;           /* centre le texte */
    width: 100%;                  /* s'assure qu'il prend toute la largeur */
    display: block;
    margin: 0 auto 1.5rem auto;   /* centre et ajoute un peu d'espace en bas */
    line-height: 1.2;             /* évite que les deux lignes soient trop espacées */
  }

  /* On réduit aussi les marges du conteneur */
  #offres {
    margin: 0 1rem;               /* évite que la section pousse le titre à gauche */
  }

  /* ===== NAV MOBILE MODERNE ===== */
  /* ===== NAV MOBILE MODERNE ===== */
  #hamburger-nav{
    display:none;                 /* affiché via media query */
    align-items:center;
    justify-content:space-between;
    padding: 0 1rem;
    height: 13vh;
    position: sticky;
    top: 0;
    background:#fff;
    z-index:1001;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
  }

  /* Bouton burger rond */
  /* Bouton burger */
  .hamburger-btn{
    --size: 48px;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,.1);
    background:#fff;
    display: flex;
    align-items: center;
    justify-content: center;
    /* >>> AJOUTE : empiler verticalement */
    flex-direction: column;
    gap: 5px;                /* espace entre les barres */
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    transition: transform .2s, box-shadow .2s;
  }

  /* Une barre */
  .hamburger-btn .line{
    width: 24px;
    height: 2px;
    background:#000;
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
  }



  /* Animation en X à l'ouverture */
  .hamburger-btn[aria-expanded="true"] .line:nth-child(1){
    transform: translateY(7px) rotate(45deg);
  }
  .hamburger-btn[aria-expanded="true"] .line:nth-child(2){
    opacity: 0;
  }
  .hamburger-btn[aria-expanded="true"] .line:nth-child(3){
    transform: translateY(-7px) rotate(-45deg);
  }
  .hamburger-btn[aria-expanded="true"] {
    position: fixed;      /* on le détache du flux normal */
    top: 1.2rem;          /* un peu d'espace depuis le haut */
    right: 1.2rem;        /* le colle au bord droit */
    z-index: 1100;        /* au-dessus du menu */
    background: #fff;     /* cercle blanc visible sur fond sombre */
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
    border: none;
    transition: transform 0.25s ease, opacity 0.25s ease, right 0.25s ease;
  }

  @media (max-width: 1200px){
    body { padding-top: 0; }
  }

  /* Overlay + bottom-sheet */
  .mobile-menu[hidden]{ display:none; }
  .mobile-menu{ position:fixed; inset:0; z-index:1000; }
  .mobile-backdrop{
    position:absolute; inset:0;
    background:rgba(0,0,0,.35);
    backdrop-filter: blur(6px);
    opacity:0; transition: opacity .25s ease;
  }
  .mobile-menu.open .mobile-backdrop{ opacity:1; }

  /* Était en bas → maintenant en haut */
  .mobile-sheet{
    position: absolute;
    left: 50%;
    top: 0;
    height: 100vh;/* ↓ au lieu de bottom:0 */
    transform: translate(-50%, -100%);        /* part au-dessus de l’écran */
    width: min(720px, 96vw);
    background: #fff;
    border-radius: 0 0 24px 24px;             /* coins arrondis en bas */
    box-shadow: 0 10px 30px rgba(0,0,0,.25);  /* ombre vers le bas */
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: max(16px, env(safe-area-inset-top))
    clamp(16px, 4vw, 28px)
    1rem;                            /* padding top pour encoche */
    transition: transform .28s ease;
  }

  /* État ouvert */
  .mobile-menu.open .mobile-sheet{
    transform: translate(-50%, 0);            /* glisse depuis le haut */
  }


  .sheet-header{
    display:flex; align-items:center; justify-content:space-between;
    padding-top:.25rem;
  }
  .sheet-close{
    width:44px; height:44px; border:1px solid rgba(0,0,0,.1);
    border-radius:999px; background:#fff;
    font-size:1.5rem; line-height:1; cursor:pointer;
    box-shadow:0 2px 8px rgba(0,0,0,.06);
  }
  .sheet-close:active{ transform:scale(.96); }

  .sheet-links{ list-style:none; margin:.25rem 0 0; padding:0; }
  .sheet-links li + li{ border-top:1px solid #f0f0f0; }
  .sheet-links a{
    display:block; padding:18px 4px;
    font-size: clamp(18px, 4.8vw, 28px);
    font-weight:500; color:#111; text-decoration:none;
    letter-spacing:.2px;
  }
  .sheet-links a:hover{ color:#e8bc00; }
  .sheet-links a:active{ background:#f7f7f7; border-radius:12px; }

  .sheet-cta{ width:100%; margin-top:.25rem; border-radius:999px; padding:14px 18px; }

  /* Animation apparition (stagger) */
  @keyframes fadeUp{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }
  .mobile-menu.open .sheet-links li{ animation: fadeUp .28s ease forwards; }
  .sheet-links li:nth-child(1){ animation-delay:.05s }
  .sheet-links li:nth-child(2){ animation-delay:.10s }
  .sheet-links li:nth-child(3){ animation-delay:.15s }
  .sheet-links li:nth-child(4){ animation-delay:.20s }

  /* verrouillage scroll quand ouvert */
  .body-lock{ overflow:hidden; }

  /* Afficher la nav mobile < 1200px */
  @media (max-width:1200px){
    #desktop-nav{ display:none; }
    #hamburger-nav{ display:flex; }
  }
  /* === CENTRAGE DU FORMULAIRE SUR MOBILE === */
  .contact-form {
    width: 100%;
    max-width: 500px;         /* limite la largeur max pour garder une belle forme */
    margin: 0 auto;           /* centre horizontalement */
    padding: 1.5rem;          /* espace intérieur équilibré */
    box-sizing: border-box;   /* évite le débordement du padding */
  }

  .contact-form div {
    width: 100%;
  }

  .contact-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.4rem;
    color: #333;
  }

  .contact-form input,
  .contact-form textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    border: 1px solid #ccc;
    font-size: 1rem;
    box-sizing: border-box;
  }

  .contact-form button {
    display: block;
    margin: 1.5rem auto 0 auto;   /* centre le bouton */
  }
  @media (max-width: 700px){
    footer .nav-links{ flex-direction: column; gap: 12px; }
  }

}