/* ==========================================================================
   CRÉAPROD-JISTA V2 — Responsive
   Phase 1 : header + hero uniquement (audit complet prévu en phase 5).
   ========================================================================== */

@media (max-width: 640px) {
  .container { padding: 0 var(--space-sm); }
}

/* Bascule en menu hamburger : dès que le header devient trop étroit pour
   afficher logo + 7 liens + CTA sur une seule ligne sans les compresser. */
@media (max-width: 1200px) {
  .nav-toggle { display: flex; }
  .primary-nav {
    position: fixed; inset: 0 0 0 auto; width: min(320px, 80vw);
    background: var(--color-bg-deep); padding: 6rem var(--space-md) var(--space-md);
    transform: translateX(100%); transition: transform var(--transition-slow);
    z-index: 101; border-left: 1px solid rgba(182,140,42,0.15);
  }
  .primary-nav.is-open { transform: translateX(0); }
  .primary-nav ul { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
}
@media (min-width: 1201px) {
  .nav-backdrop { display: none; }

  /* Correction audit du 14/09/2026 (point 1) : le CTA "Parler de mon projet"
     dépassait du header à 1366px/1440px. En cause : le header est capé par
     --max-width (1240px), donc sa zone de contenu réelle ne dépasse jamais
     ~1176px, quelle que soit la largeur d'écran (1366, 1440, 1920...) — le
     menu complet (logo + 7 liens + CTA) avait besoin d'environ 100px de plus.
     Resserrage des espacements et légère réduction du CTA/des liens
     uniquement à partir de 1201px (le menu mobile, en dessous, n'est pas
     concerné) : aucun lien ni information supprimé, aucune couleur ni police
     changée. Vérifié sans dépassement à 1201, 1280, 1366, 1440 et 1920px.

     Resserrage complémentaire du 16/09/2026 : l'ajout du lien "Blog" (8e
     lien de menu, cf. mise en avant du blog) faisait à nouveau déborder le
     CTA de quelques pixels à 1201px précisément (juste au-dessus du seuil
     qui bascule en menu mobile). Nouveau resserrage des mêmes propriétés,
     un peu plus marqué : aucun lien retiré, toujours aucune couleur ni
     police changée. Revérifié sans dépassement à 1201, 1220, 1280, 1366,
     1440 et 1920px. */
  .header-inner { gap: 0.75rem; }
  .primary-nav ul { gap: 0.8rem; }
  .primary-nav a { font-size: 0.82rem; }
  .nav-cta { padding: 0.7rem 1rem; font-size: 0.76rem; }
}

/* Hero : la composition à deux colonnes (texte + mockups) devient une
   colonne unique en dessous de 960px ; le mockup passe après le texte et
   se réduit pour ne jamais dépasser l'écran. */
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-content { padding-left: 0; }
  .hero-content::before { display: none; }
  .hero-eyebrow { justify-content: center; }
  .hero-subtitle { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .hero-client-access { text-align: center; }
  .hero-client-actions { justify-content: center; }
  .hero-trust { justify-content: center; }
  .hero-visual { min-height: 0; margin-top: var(--space-lg); }
  .hero-stage {
    max-width: 360px; aspect-ratio: auto; perspective: none;
    height: auto; /* le plafond en vh du bureau ne concerne pas l'empilement mobile */
    display: flex; flex-direction: column; align-items: center; gap: var(--space-md);
  }
  /* Bug corrigé : ".collage-device" reste "position: absolute" avec ses
     coordonnées --x/--y de bureau tant qu'on ne le repasse pas explicitement
     en flux normal ici — sans cette règle, les 3 écrans du Hero se
     superposaient exactement les uns sur les autres au lieu de s'empiler
     proprement sous le texte. */
  .hero-stage .collage-device {
    position: static; width: 100%; max-width: 320px; margin: 0 auto;
    animation: none !important; opacity: 1 !important;
    transform: none !important;
  }
  .hero-stage .collage-device:hover { transform: none !important; }
  .hero-stage .collage-shadow { display: none; }
  .hero-orbit { display: none; }
  .hero-desk { display: none; }
  .hero-visual-caption { position: static; transform: none; display: block; margin-top: var(--space-sm); }
  /* La carte-preuve flottante n'a de sens qu'en surimpression d'un grand
     visuel ; sur mobile (visuel empilé et réduit), elle est simplement
     retirée plutôt que de chevaucher le contenu. */
  .hero-proof-card { display: none; }
  /* Le monogramme de fond suit la scène d'écrans, réduite sur mobile
     (.hero-stage passe à 360px max) : sans cette règle, le clamp() pensé
     pour le bureau resterait trop large pour la colonne empilée. */
  .hero-logo-mark { width: clamp(260px, 78vw, 380px); }
}

@media (max-width: 480px) {
  .hero-title { font-size: clamp(2rem, 10vw, 2.6rem); }
  /* En dessous de 480px, les deux boutons "Déjà client ?" passent l'un sous
     l'autre plutôt que de se comprimer côte à côte, pour rester lisibles et
     ne jamais déborder. */
  .hero-client-actions { flex-direction: column; align-items: stretch; }
  .hero-client-btn { justify-content: center; }
}

/* Barre de repères : 4 -> 2 colonnes, bordures verticales retirées (elles
   n'ont de sens qu'alignées sur une seule ligne). */
@media (max-width: 700px) {
  .hero-stats-grid { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-lg); }
  .hero-stat { border-left: none; }
}

/* Section "Expertises" : 3 -> 2 -> 1, bandeau en pile sous 900px */
@media (max-width: 900px) {
  .expertise-grid { grid-template-columns: repeat(2, 1fr); }
  .expertise-bar-list { flex-direction: column; align-items: stretch; }
  .expertise-bar-item { border-right: none; border-bottom: 1px solid rgba(182,140,42,0.2); justify-content: flex-start; }
  .expertise-bar-item:last-child { border-bottom: none; }
}
@media (max-width: 600px) {
  .expertise-grid { grid-template-columns: 1fr; }
}

/* Page "Paiement" : 2 -> 1 (les cartes Acompte/Facture contiennent plus de
   texte que les cartes d'expertise habituelles, on repasse donc en colonne
   unique un peu plus tôt, dès la tablette portrait). */
@media (max-width: 760px) {
  .payment-grid { grid-template-columns: 1fr; }
}

/* Section "Projets en cours" : la composition en scène absolue (faite pour
   le grand écran, comme sur la maquette de référence) n'a pas de sens sur
   petit écran où les étiquettes et écrans se chevaucheraient. En dessous de
   960px, on repasse en pile simple : chaque écran pleine largeur, avec son
   étiquette affichée juste en dessous au lieu de flotter dessus. */
@media (max-width: 960px) {
  .projects-layout { grid-template-columns: 1fr; }
  .projects-badge { margin-left: auto; margin-right: auto; }
  .projects-collage {
    aspect-ratio: auto; display: flex; flex-direction: column; gap: var(--space-lg);
    margin-top: var(--space-lg);
  }
  .collage-device {
    position: static; width: 100% !important; max-width: 420px; margin: 0 auto;
    display: flex; flex-direction: column; align-items: center;
    transform: none !important; perspective: none;
  }
  .collage-device:hover,
  .collage-device.is-visible:hover { transform: none !important; }
  .collage-label {
    position: static; transform: none !important; order: 2; margin-top: var(--space-sm);
  }
  .collage-device.is-monitor::after,
  .collage-device.is-laptop::after { width: 100%; margin: 0; }
  /* Ombres au sol et halos décoratifs : pensés pour la scène 3D du grand
     écran, sans objet une fois repassé en simple pile verticale. */
  .collage-shadow,
  .projects-collage::before,
  .projects-collage::after { display: none; }
  /* Accent "Réalisé" : rejoint la pile, à plat, sans inclinaison. */
  .collage-realised {
    position: static; width: 100% !important; max-width: 420px; margin: 0 auto;
    transform: none !important;
  }
  /* Le défilement automatique "premier plan" n'a de sens que dans la scène
     3D du grand écran : sur mobile (pile verticale), tous les écrans
     restent visibles et lisibles au même niveau. */
  .projects-collage.is-cycling .collage-device.is-visible:not(.is-featured) {
    filter: none;
  }
  .collage-device.is-visible.is-featured { transform: none !important; }
}
@media (max-width: 600px) {
  .projects-values { justify-content: flex-start; }
}

/* Preuve client : 3 -> 1 (3 cartes ne se divisent pas proprement en 2) */
@media (max-width: 860px) {
  .proof-grid { grid-template-columns: 1fr; }
}

/* Tarifs (synthèse) : 4 -> 2 -> 1 */
@media (max-width: 860px) {
  .pricing-teaser-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .pricing-teaser-grid { grid-template-columns: 1fr; }
}

/* Pied de page : empile proprement sur mobile */
@media (max-width: 700px) {
  .footer-inner { flex-direction: column; gap: var(--space-md); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* Pages intérieures : grille de services 3 -> 2 -> 1 */
@media (max-width: 900px) {
  .service-grid-dark { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .service-grid-dark { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .realisations-grid { grid-template-columns: 1fr; }
}

/* Section "Pourquoi Créaprod-JISTA" : 4 -> 2 -> 1 */
@media (max-width: 860px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg) var(--space-md); }
}
@media (max-width: 480px) {
  .why-grid { grid-template-columns: 1fr; }
  /* Zone de clic généreuse et galerie en 2 colonnes : plus confortable au
     doigt qu'une grille dense pensée pour le grand écran. */
  .why-trigger { padding: var(--space-sm) 0; }
  .why-gallery { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
}

/* Méthode : timeline horizontale -> parcours vertical unique dès la tablette
   portrait (01 -> 02 -> ... -> 06), plutôt qu'une grille 2 colonnes qui
   rendrait les 6 étapes trop denses pour rester lisibles. Le numéro passe à
   côté du titre (comme une liste d'étapes) au lieu d'être posé au-dessus. */
@media (max-width: 860px) {
  .method-timeline { grid-template-columns: 1fr; gap: var(--space-md); }
  .method-timeline::before,
  .method-progress-fill { display: none; }
  .method-step { padding: 0 0 0 3rem; min-height: 2.4rem; }
  .method-step-number { top: 0; left: 0; }

  /* Panneau détaillé : toujours en une colonne, texte au-dessus du visuel
     quelle que soit l'étape (l'alternance gauche/droite n'a de sens qu'à
     partir d'une largeur suffisante). */
  .method-panel-inner,
  .method-panel-inner.is-reversed { grid-template-columns: 1fr; }
  .method-panel-inner.is-reversed .method-panel-text,
  .method-panel-inner.is-reversed .method-panel-visual { order: initial; }
  .method-panel-desc,
  .method-panel-inner.is-reversed .method-panel-desc { max-width: none; margin-left: 0; }
  .method-panel { margin-top: var(--space-md); }
}

/* ----- Page "Blog" : grille des cartes article, 2 -> 1 (ajouté le 16/09/2026
   pour l'intégration du premier article, cf. .blog-grid dans components.css) ----- */
@media (max-width: 700px) {
  .blog-grid { grid-template-columns: 1fr; }
}

/* ----- Mise en page éditoriale des articles (ajouté le 16/09/2026) -----
   Le trio ".article-trio" repasse en 1 colonne sur mobile ; les autres
   blocs (citation, questions, manifeste, conclusion) sont déjà fluides
   (clamp(), flex-wrap) et n'ont besoin d'aucune règle supplémentaire. */
@media (max-width: 700px) {
  .article-trio { grid-template-columns: 1fr; }
}

/* ----- Page "Book créatif" (book.html) ----- */
@media (max-width: 860px) {
  .book-intro-layout { grid-template-columns: 1fr; }
  .book-stack { margin-top: var(--space-lg); }
}
@media (max-width: 900px) {
  .book-events-grid { grid-template-columns: repeat(2, 1fr); }
  .book-events-grid .book-plate { grid-column: span 2 !important; }
  .book-events-grid .book-plate:nth-child(5) img { max-height: none; }
}