/* =========================================================
   Mon Chai, page d'accueil responsive
   À charger APRÈS styles.css.

   État des lieux : sur index.html, seul l'écran d'accueil est du vrai HTML.
   Les trois suivants (Pourquoi + Assistant IA + Tarifs, À propos + FAQ,
   Notre actualité) et l'ancien pied de page sont des **images SVG de 1920 de
   large**, exportées de Figma avec le texte vectorisé : zéro balise <text>,
   donc rien qui puisse refluer, ni être lu par un moteur de recherche.

   Conséquence, assumée et documentée dans NOTES_PAGES_LOGICIEL.md :
   · l'écran d'accueil repasse en flux et devient réellement responsive ;
   · le pied de page est remplacé par le composant HTML partagé ;
   · les trois écrans dessinés gardent leurs 1920 et sont réduits d'un bloc,
     en attendant d'être reconstruits en HTML. Ils restent petits sur
     téléphone : aucune règle CSS ne peut agrandir un texte vectorisé.

   --echelle (largeur de fenêtre ÷ 1920) est publiée par script.js.
   ========================================================= */

@media (max-width:1199px){

  /* La scène n'est plus mise à l'échelle globalement (script.js coupe le
     transform sous 1200) : chaque écran se débrouille. */
  .page{ width:100%; transform:none; }
  .stage + .stage{ margin-top:0; }

  /* Repère de bureau, sans objet sur un écran tactile. */
  .dot-nav{ display:none; }


  /* ---------- Écran 1 : ACCUEIL ----------
     Vrai HTML : il peut refluer. */
  #accueil{
    position:relative;
    width:100%; height:auto; overflow:visible;
    display:flex; flex-direction:column;
    gap:clamp(20px,5vw,38px);
    padding:clamp(26px,6.5vw,54px) clamp(18px,5vw,48px) clamp(38px,9vw,70px);
  }
  #accueil .hero-photo{
    position:absolute; inset:0;
    width:100%; height:100%;
    background-position:center; background-size:cover;
    transform:none;
  }
  /* Voile : la photo est très contrastée en haut, les cartes translucides
     posées dessus y perdaient leur lisibilité. */
  #accueil::before{
    content:""; position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, rgba(33,27,24,.28), rgba(33,27,24,.12) 45%, rgba(33,27,24,.30));
    pointer-events:none;
  }

  .hero-card{
    position:relative; z-index:2;
    left:auto; top:auto; width:auto; height:auto;
    transform:none;
    padding:clamp(24px,6vw,44px) clamp(20px,5vw,40px) clamp(28px,7vw,44px);
    display:flex; flex-direction:column;
  }
  /* Les <br> forcent la composition du Figma : sur une colonne étroite ils
     produisent des lignes bancales, on laisse le texte se replier seul. */
  .hero-title br,
  .hero-lead br,
  .btn-gold br{ display:none; }

  .hero-title{
    position:static; left:auto; top:auto; width:auto;
    font-size:clamp(30px,7.4vw,54px); line-height:1.16;
  }
  .ornement{
    position:static; left:auto; top:auto;
    width:clamp(90px,24vw,160px);
    margin:clamp(16px,4vw,26px) 0 0;
  }
  .hero-lead{
    position:static; left:auto; top:auto; width:auto;
    font-size:clamp(15px,3.9vw,22px); line-height:1.55;
    margin-top:clamp(16px,4vw,26px);
  }

  .btn{
    position:static; left:auto; top:auto;
    width:100%; height:auto;
    display:flex; align-items:center; justify-content:center;
    padding:14px 18px;
    font-size:clamp(15px,3.7vw,19px); line-height:1.3;
  }
  .btn-gold{ margin-top:clamp(20px,5vw,32px); }
  .btn-light{ margin-top:12px; }


  /* ---------- Aperçu produit ----------
     Les 5 cartes étaient posées en absolu dans une boîte de 730 × 490 :
     elles passent en grille, la carte large occupant toute la ligne. */
  .apercu{
    position:relative; z-index:2;
    left:auto; top:auto; width:auto; height:auto;
    display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
    gap:clamp(8px,2.4vw,12px);
    padding:clamp(42px,10vw,56px) clamp(12px,3.2vw,18px) clamp(12px,3.2vw,18px);
  }
  .dots{ left:clamp(12px,3.2vw,18px); top:clamp(15px,3.8vw,19px); }
  .screen-title{
    right:clamp(12px,3.2vw,18px); top:clamp(13px,3.4vw,17px);
    font-size:clamp(11px,2.8vw,13px);
  }
  .dash-card{
    position:static; left:auto; top:auto; width:auto; height:auto;
    display:flex; flex-direction:column;
    padding:clamp(12px,3.2vw,16px) clamp(13px,3.4vw,17px) clamp(14px,3.6vw,18px);
  }
  .cw{ grid-column:1 / -1; background-size:cover; }
  .dash-card .kicker,
  .dash-card .number{ position:static; left:auto; top:auto; }
  .kicker{ white-space:normal; font-size:clamp(11px,2.9vw,13px); line-height:1.35; }
  .number{ font-size:clamp(21px,5.6vw,31px); line-height:1.1; margin:6px 0 2px; }
  .bar{ position:static; left:auto; top:auto; width:100%; margin-top:auto; }
  .dash-card .bar{ margin-top:12px; }


  /* ---------- Écrans encore dessinés dans des SVG ----------
     Réduits d'un bloc, en gardant leurs 1920 en interne.

     `zoom` et non `transform:scale()` : scale ne met à l'échelle QUE la boîte
     de l'élément, pas sa position. Les enfants en position absolue restaient
     à leur `top` d'origine (le bas de « Pourquoi » à 1150px, par exemple) et
     tombaient hors de la section réduite, d'où le grand vide blanc. `zoom` met à
     l'échelle la mise en page elle-même : positions, tailles et hauteur de la
     section suivent, sans rien changer au balisage.

     Sous 900 px, ils ne sont PLUS réduits : leurs couches dessinées sont
     masquées et des blocs mobiles en vrai HTML les remplacent
     (index-mobile.css). Le zoom ne subsiste qu'entre 900 et 1199 px, où
     l'échelle (≥ 0,47) reste lisible. */
  @media (min-width:900px){
    #parcours,
    #apropos-faq,
    #actualite{
      zoom:var(--echelle, 1);
    }
  }
}


/* =========================================================
   PALIER INTERMÉDIAIRE  900 → 1199

   Empilé, l'écran d'accueil donnait une carte de 940px de large et un titre
   qui traversait l'écran : une mise en page de téléphone étirée. On revient
   ici à la composition du Figma (carte à gauche, aperçu produit à
   droite), comme sur les 8 pages « Le logiciel ».
   ========================================================= */
@media (min-width:900px) and (max-width:1199px){
  #accueil{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:center;
    gap:clamp(18px,2.6vw,34px);
    padding:clamp(40px,5vw,68px) clamp(24px,3.4vw,44px) clamp(48px,6vw,80px);
  }

  .hero-title{ font-size:clamp(33px,4vw,46px); line-height:1.14; }
  .hero-lead{ font-size:clamp(15px,1.75vw,19px); line-height:1.55; }
  .btn{ font-size:clamp(14px,1.6vw,17px); padding:13px 16px; }
  .ornement{ width:clamp(100px,11vw,140px); }

  .apercu{ padding:46px clamp(12px,1.5vw,18px) clamp(12px,1.5vw,18px); }
  .number{ font-size:clamp(20px,2.6vw,29px); }
  .kicker{ font-size:clamp(11px,1.35vw,13px); }
}