/* ==========================================================================
   3A-ARCHITECTURE — RESPONSIVE
   Doit être chargé en dernier : ce fichier ne contient que des adaptations
   aux petites largeurs, jamais de style de base.

   Points de rupture :
     1200px — portables 13"
     1024px — tablette paysage / bascule du menu en burger
      760px — tablette portrait
      520px — mobile
   ========================================================================== */

/* --------------------------------------------------------------------------
   ≤ 1200px
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .expertise {
    grid-template-columns: 260px 1fr;
    gap: var(--space-xl);
  }

  .contact {
    grid-template-columns: 320px 1fr;
    gap: var(--space-xl);
  }

  .signature,
  .architecte {
    gap: var(--space-xl);
  }

  .missions-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 5 colonnes deviennent étroites avant même le prochain point de rupture
     (1024 px) : 3 colonnes ici donnent 3 + 2, plus lisible que 5 cartes
     comprimées. */
  .videos-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .site-footer {
    grid-template-columns: 240px repeat(2, 1fr);
    row-gap: var(--space-lg);
  }
}

/* --------------------------------------------------------------------------
   ≤ 1024px — bascule du menu en panneau plein écran
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {

  /* --- Navigation --------------------------------------------------------- */
  .nav-toggle {
    display: flex;
    order: 3;
  }

  .site-nav > .btn {
    display: none;
  }

  .nav-menu {
    position: fixed;
    inset: var(--nav-height) 0 0 0;
    z-index: var(--z-nav);
    flex-direction: column;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-xl) var(--gutter);
    background: rgba(26, 23, 21, 0.97);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity var(--t-medium), transform var(--t-medium), visibility var(--t-medium);
  }

  .nav-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  /* Sur le panneau sombre, les liens restent clairs quel que soit l'état
     de la barre. */
  .nav-menu a:not(.btn),
  .site-nav.is-scrolled .nav-menu a:not(.btn),
  .site-nav--solid .nav-menu a:not(.btn) {
    font-size: 1rem;
    letter-spacing: var(--ls-wider);
    color: var(--blanc);
  }

  .nav-menu a::after {
    display: none;
  }

  .nav-menu .btn {
    display: inline-block;
    margin-top: var(--space-sm);
  }

  .nav-menu .btn::after {
    display: none;
  }

  /* --- Sections ----------------------------------------------------------- */
  .signature,
  .architecte,
  .expertise,
  .contact,
  .projet-fiche {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  /* L'image repasse au-dessus du texte sur toutes les fiches */
  .projet-fiche--inverse .projet-fiche__media {
    order: 0;
  }

  /* L'image passe sous le texte et cesse de déborder */
  .signature-media {
    max-width: 460px;
  }

  .signature-media::after {
    display: none;
  }

  .signature-media .glass-card {
    left: auto;
    right: 16px;
    bottom: 16px;
  }

  .expertise-intro h2 {
    max-width: 24rem;
  }

  .diff-grid {
    grid-template-columns: 1fr;
    max-width: 44rem;
  }

  /* Le carnet passe en colonne unique : deux colonnes de texte sous 1024 px
     donneraient des lignes trop courtes pour être confortables. */
  .carnet-grille {
    grid-template-columns: 1fr;
    max-width: 44rem;
  }

  .carnet-sommaire ol {
    grid-template-columns: repeat(2, 1fr);
  }

  .videos-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Le groupe de liens en pleine largeur repasse en colonne simple */
  .link-group--large,
  .link-group--large .link-items {
    grid-column: auto;
    grid-template-columns: 1fr;
  }

  .links-grid {
    gap: var(--space-md);
  }

  /* --- Hero --------------------------------------------------------------- */
  .hero-controls {
    bottom: var(--space-xl);
  }

  .hero-scroll-hint {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   ≤ 760px
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {

  /* --- Hero --------------------------------------------------------------- */
  .hero {
    min-height: 560px;
  }

  /* Voile plus dense : le texte passe au-dessus de l'image sur toute la
     largeur, il lui faut un fond plus sombre. */
  .hero-veil {
    background:
      linear-gradient(to right, rgba(8, 6, 4, 0.90) 0%, rgba(8, 6, 4, 0.72) 60%, rgba(8, 6, 4, 0.55) 100%),
      linear-gradient(to top,   rgba(8, 6, 4, 0.80) 0%, transparent 55%);
  }

  .hero-body {
    padding-bottom: 7rem;
  }

  .hero-watermark {
    display: none;
  }

  .hero-actions .btn {
    flex: 1 1 auto;
  }

  .hero-stats {
    gap: var(--space-md);
  }

  .hero-stat + .hero-stat {
    padding-left: 0;
    border-left: none;
  }

  .hero-controls {
    left: var(--gutter);
    right: var(--gutter);
    bottom: var(--space-md);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  /* Les commandes occupent désormais toute la largeur en bas : la mention
     passe au-dessus d'elles plutôt que dessous. */
  .hero-credit {
    bottom: calc(var(--space-md) + 3.5rem);
  }

  /* --- Grilles ------------------------------------------------------------ */
  .projets-grid {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .projet-card:nth-child(n) {
    grid-column: 1 / -1;
  }

  .projets-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  .expertise-grid,
  .missions-grid,
  .videos-grid,
  .links-grid,
  .avis-grid,
  .carnet-grille,
  .carnet-sommaire ol,
  .art-nav,
  .form {
    grid-template-columns: 1fr;
  }

  .carnet-theme__titre {
    font-size: 1.5rem;
  }

  /* Une seule colonne : le lien « suivant » se réaligne à gauche, sinon la
     paire se lit en accordéon. */
  .art-nav__lien--suiv {
    text-align: left;
  }

  .avis-actions .btn {
    flex: 1 1 auto;
  }

  .expertise-grid,
  .missions-grid {
    gap: var(--space-xs);
  }

  /* --- Blocs texte -------------------------------------------------------- */
  .missions-cta,
  .cta-band {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }

  .missions-cta {
    padding: var(--space-lg) 1.75rem;
  }

  .cta-band__inner {
    padding-left: var(--space-md);
  }

  .difference::after {
    right: -40px;
    opacity: 0.6;
  }

  /* --- Chronologie : l'année passe au-dessus du contenu ------------------- */
  .timeline::before,
  .timeline-item::after {
    display: none;
  }

  .timeline-item {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

  .tl-year {
    padding-right: 0;
    text-align: left;
  }

  /* --- Pied de page ------------------------------------------------------- */
  .site-footer {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
    text-align: left;
  }

  .footer-bottom a:first-child {
    margin-left: 0;
  }

  .footer-bottom a {
    margin-left: 0;
    margin-right: var(--space-md);
  }
}

/* --------------------------------------------------------------------------
   ≤ 520px
   -------------------------------------------------------------------------- */
@media (max-width: 520px) {
  .nav-logo {
    height: 42px;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-stat__num {
    font-size: 1.5rem;
  }

  .slide-arrows button {
    width: 36px;
    height: 36px;
  }

  .architecte-identite {
    flex-direction: column;
  }

  .architecte-portrait {
    width: 96px;
  }

  .expertise-item,
  .mission-card,
  .diff-card {
    padding: var(--space-md) 1.25rem;
  }

  .link-group {
    padding: var(--space-md) 1rem;
  }

  .signature-media .glass-card {
    position: static;
    margin-top: var(--space-sm);
  }
}

/* --------------------------------------------------------------------------
   Écrans larges
   La mise en page reste volontairement pleine largeur (parti pris du site) ;
   on se contente d'aérer les marges et de retenir les colonnes de texte.
   -------------------------------------------------------------------------- */
@media (min-width: 1700px) {
  :root {
    --gutter: 5rem;
  }

  .signature-text,
  .architecte-bio,
  .section-intro {
    max-width: 40rem;
  }
}