/* Vitrine_PageAccueil.css - styles de la page vitrine, repris de la maquette. */
/* Les polices communes aux quatre pages vivent dans Vitrine_Fonts.css. */

/* Filet : les feuilles de page sont chargées APRÈS, et une règle de classe
   (display:flex, display:grid…) bat [hidden] sans le !important. Le gabarit
   vitrine ne charge pas site.css, qui porte ce filet pour le reste du site. */
[hidden]{display:none!important;}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;}
::selection{background:#2388be;color:#fff;}
input,select,button,textarea{font-family:inherit;}
@keyframes mn-floatA{0%,100%{transform:translateY(0);}50%{transform:translateY(-11px);}}
@keyframes mn-floatB{0%,100%{transform:translateY(0);}50%{transform:translateY(9px);}}
@keyframes mn-aurora1{0%{transform:translate(0,0) scale(1);}33%{transform:translate(60px,40px) scale(1.18);}66%{transform:translate(-40px,30px) scale(.92);}100%{transform:translate(0,0) scale(1);}}
@keyframes mn-aurora2{0%{transform:translate(0,0) scale(1);}33%{transform:translate(-50px,30px) scale(.9);}66%{transform:translate(50px,-30px) scale(1.15);}100%{transform:translate(0,0) scale(1);}}
@keyframes mn-aurora3{0%{transform:translate(0,0) scale(1);}50%{transform:translate(40px,-50px) scale(1.2);}100%{transform:translate(0,0) scale(1);}}
@keyframes mn-shimmer{0%{background-position:0% 50%;}100%{background-position:200% 50%;}}
@keyframes mn-gridmove{to{background-position:46px 46px;}}
@keyframes mn-wordup{from{opacity:0;transform:translateY(28px) rotate(2deg);}to{opacity:1;transform:none;}}
@keyframes mn-draw{from{stroke-dashoffset:100;}to{stroke-dashoffset:0;}}
@keyframes mn-flow{to{stroke-dashoffset:-140;}}
@keyframes mn-marquee{to{transform:translateX(-50%);}}
@keyframes mn-ring{0%{transform:translate(-50%,-50%) scale(.55);opacity:.8;}100%{transform:translate(-50%,-50%) scale(1.9);opacity:0;}}
@keyframes mn-corepulse{0%,100%{box-shadow:0 0 60px 10px rgba(41,198,214,0.35),0 24px 60px -20px rgba(13,52,82,0.5);}50%{box-shadow:0 0 90px 22px rgba(41,198,214,0.5),0 24px 60px -20px rgba(13,52,82,0.5);}}
[data-reveal]:hover svg[data-icon] .draw{stroke-dasharray:100;animation:mn-draw 1.1s cubic-bezier(.5,0,.2,1) both;}
header nav a{white-space:nowrap;}
@media (max-width:1080px){
  a[data-navlink]{display:none !important;}
}
@media (max-width:920px){
  [data-rail]{display:none !important;}
  a[data-navlink]{display:none !important;}
  [data-float]{display:none !important;}
  [data-stack]{grid-template-columns:1fr !important;}
  [data-stack]>*{order:0 !important;}
  [data-stack] [data-mock]{order:3 !important;border-left:none !important;border-right:none !important;border-top:1px solid #eef3f8;}
  h1{font-size:37px !important;}
  section h2{font-size:31px !important;}
  section{padding-left:20px !important;padding-right:20px !important;}
  /* La base de données : le bandeau défilant des références est pleine largeur par
     construction, et ses blocs de texte portent déjà leur propre retrait de 28 px. La
     marge posée sur toutes les sections ci-dessus l'étranglait et doublait ce retrait. */
  #basededonnees{padding-left:0 !important;padding-right:0 !important;}
  #basededonnees > div:not([data-reveal]){padding-left:20px !important;padding-right:20px !important;}
  [data-hero-logo]{width:132px !important;}
}

/* Téléphone (375 px de référence). Les styles de la maquette sont EN LIGNE : d'où les
   !important, et des sélecteurs de structure (nth-child) commentés un à un, à relire si
   l'ordre des blocs de la maquette change. */
@media (max-width:600px){
  /* Rythme vertical : 100 px de haut et de bas par section est un rythme d'écran large ;
     sur un téléphone, il fait défiler un écran vide entre deux titres. */
  section{padding-top:60px !important;padding-bottom:60px !important;}
  #accueil{padding-top:44px !important;padding-bottom:40px !important;}
  [data-hero-logo]{width:120px !important;}
  /* Barre de confiance : une fois empilée, ses filets verticaux (enfants pairs) flottent
     entre les lignes. */
  #accueil > div:last-child > div:nth-child(even){display:none !important;}
  /* Cartes : 30 px de marge interne sur 335 px de large ne laissaient que 275 px au texte. */
  #laboratoire [data-tilt-card],#outil [data-tilt-card]{padding:24px 20px !important;}
  #securite > div > div:nth-child(2) > div{padding:26px 20px !important;}
  /* Trois moments clés : texte et capture se suivent de 28 px au lieu de 48. */
  #fonctionnalites [data-stack]{gap:28px !important;}
  /* Composition « VAD » (2e bloc) : ses deux vignettes flottantes sortaient de l'écran
     (right:-16px / left:-20px, la légende « Croquis d'aménagement » était coupée) et
     mordaient sur le titre suivant (bottom:-38px). Enfants 3 et 4 du bloc d'image = les
     deux vignettes ; l'image principale reçoit la marge qui leur fait de la place. */
  #fonctionnalites [data-stack]:nth-of-type(2) > div:first-child{margin-bottom:36px;}
  #fonctionnalites [data-stack]:nth-of-type(2) > div:first-child > div:nth-child(3){right:0 !important;}
  #fonctionnalites [data-stack]:nth-of-type(2) > div:first-child > div:nth-child(4){left:0 !important;}
  /* Légende « Croquis d'aménagement · 2D & 3D » : plus longue que sa vignette de 124 px, elle
     passe à la ligne au lieu d'être coupée par le cadre. */
  #fonctionnalites [data-stack]:nth-of-type(2) > div:first-child > div:nth-child(4) > div > div{white-space:normal !important;right:8px;line-height:1.3;}
  /* Clé d'accès : 54/48 px de marge interne ne laissaient que 240 px au texte. */
  #contact [data-stack] > div[data-reveal]{padding:36px 22px 30px !important;}
  #contact [data-stack] > div:last-child{padding:28px 20px 32px !important;}
  #contact h2{font-size:30px !important;}
  /* Formulaire : prénom/nom et mot de passe/confirmation côte à côte ne laissaient que
     130 px par champ (le placeholder « Votre prénom » était coupé). Google/Microsoft
     restent côte à côte, ils tiennent. */
  [data-step1] > div:nth-child(1),[data-step1] > div:nth-child(3),[data-sso-identity]{grid-template-columns:1fr !important;}
  /* 16 px au minimum sur une saisie : en dessous, iOS zoome sur le champ à la mise au point. */
  [data-signup] input[type="text"],[data-signup] input[type="email"],[data-signup] input[type="password"]{font-size:16px !important;}
  footer > div > div > img{height:92px !important;}
}
@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms !important;animation-iteration-count:1 !important;}}