/* ============================================================
   RESPONSIVE : tablette et smartphone
   ============================================================ */

/* ---------- Tablette et petits laptops ---------- */
@media (max-width: 960px) {
  .entete__burger { display: inline-flex; }

  /* Menu mobile : panneau en verre sous la barre */
  /* Placé par rapport à la pilule (le flou de la barre crée le repère) */
  .entete__nav {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    padding: 10px;
    border-radius: var(--rayon);
    background: color-mix(in srgb, var(--fond) 97%, transparent);
    border: 1px solid rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    backdrop-filter: blur(16px) saturate(1.5);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.25s var(--courbe), transform 0.25s var(--courbe), visibility 0.25s;
  }
  .entete.ouvert .entete__nav { opacity: 1; visibility: visible; transform: none; }
  .entete__liens { flex-direction: column; align-items: stretch; gap: 2px; }
  .entete__liens a {
    padding: 14px 14px;
    border-radius: var(--rayon-petit);
    font-size: 1.1rem;
    color: var(--texte);
  }
  .entete__liens a.entete__cta { margin: 8px 0 0; text-align: center; border-radius: var(--rayon-petit); }

  .hero__grille { grid-template-columns: 1fr; }
  .portrait { justify-self: start; max-width: 190px; }

  .apropos__grille { grid-template-columns: 1fr; }
  .competence { grid-template-columns: 1fr; }
  .competence .etiquettes { padding-left: 18px; }

  .carte-projet { grid-template-columns: 1fr; }
  .carte-projet__cote { border-left: 0; border-top: 1px solid var(--ligne); }

  .contact__bloc { grid-template-columns: 1fr; }
}

/* ---------- Smartphone ---------- */
@media (max-width: 640px) {
  body { font-size: 1rem; }

  .hero__actions .bouton { flex: 1 1 100%; }
  .portrait { max-width: 160px; }

  /* Frise : la période passe au-dessus du contenu, l'axe reste à gauche */
  .frise__etape {
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 0 14px;
  }
  .frise__periode {
    grid-column: 2;
    grid-row: 1;
    text-align: left;
    padding-top: 0;
    margin-bottom: 6px;
  }
  .frise__axe { grid-column: 1; grid-row: 1 / span 2; justify-content: flex-start; padding-left: 5px; }
  .frise__axe::before { left: 10px; }
  .frise__contenu { grid-column: 2; grid-row: 2; }
  .frise__noeud { margin-top: 5px; }

  .reperes div { grid-template-columns: 1fr; gap: 4px; }

  .fiche__grille { grid-template-columns: 1fr; }
  .fiche__liens .bouton { flex: 1 1 100%; }

  .contact__liens a { grid-template-columns: 72px minmax(0, 1fr) 16px; }

  .pied__grille { flex-direction: column; align-items: flex-start; }
}