/* ====================================================================
   VISUALISATION 3D — à coller À LA FIN de /assets/style.css
   Tout est préfixé .v3d- : aucun risque de casser une règle existante.
   ==================================================================== */

/* --- 1. La barre de navigation passe à 8 liens : on resserre un peu.
       Sans ça, « Visualisation 3D » fait passer le menu sur deux lignes
       entre 1000 et 1300 px de large.                                --- */
@media (min-width:641px) and (max-width:1300px){
  nav.main{gap:24px}
  nav.main a{font-size:14px}
}

/* --- 2. La section de contact est SOMBRE (var(--charcoal)).
       Les boutons .btn y seraient noirs sur noir : illisibles.
       On les inverse, uniquement dans ce contexte.                   --- */
.contact-section .btn-solid{
  background:var(--paper);
  color:var(--ink);
  border-color:var(--paper);
}
.contact-section .btn-solid:hover{
  background:var(--bronze);
  border-color:var(--bronze);
  color:var(--paper);
}
.contact-section .btn-outline{
  color:#E6E5E1;
  border-color:#4a4d52;
}
.contact-section .btn-outline:hover{
  border-color:var(--bronze);
  color:var(--bronze);
}

/* --- 3. La démonstration en direct --- */
.v3d-demo{
  display:grid;
  grid-template-columns:minmax(0,380px) minmax(0,1fr);
  gap:48px;
  align-items:start;
}

/* --- le "téléphone" qui contient la démo réelle --- */
.v3d-phone{
  position:relative;
  border:1px solid rgba(21,23,26,.16);
  border-radius:22px;
  background:#0e1116;
  padding:8px;
  box-shadow:0 18px 44px rgba(21,23,26,.13);
}
.v3d-phone::before{                 /* l'encoche, pour que ça se lise comme un téléphone */
  content:"";
  position:absolute;
  top:16px; left:50%;
  width:74px; height:5px;
  transform:translateX(-50%);
  background:#2a3441;
  border-radius:100px;
  z-index:2;
  pointer-events:none;
}
.v3d-phone iframe{
  display:block;
  width:100%;
  height:660px;
  border:0;
  border-radius:15px;
  background:#0e1116;
}

/* --- colonne de droite --- */
.v3d-side h3{
  font-family:"Space Grotesk",sans-serif;
  font-size:24px;
  line-height:1.2;
  letter-spacing:-.01em;
  margin:12px 0 10px;
}
.v3d-side p{
  margin:0 0 20px;
  max-width:44ch;
}
.v3d-qr{
  width:168px;
  padding:12px;
  background:#fff;
  border:1px solid rgba(21,23,26,.14);
  margin:0 0 18px;
}
.v3d-qr img{
  display:block;
  width:100%;
  height:auto;
  image-rendering:pixelated;
}

/* --- les limites, dites honnêtement --- */
.v3d-limits{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px 40px;
  max-width:980px;
}
.v3d-limits li{
  position:relative;
  padding-left:22px;
  line-height:1.62;
}
.v3d-limits li::before{
  content:"";
  position:absolute;
  left:0; top:.62em;
  width:10px; height:1px;
  background:#8A6541;             /* le bronze déjà utilisé par .kicker */
}
.v3d-limits b{font-weight:600}

/* --- teaser sur la page d'accueil --- */
.v3d-teaser{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,320px);
  gap:44px;
  align-items:center;
}
.v3d-teaser-copy h3{
  font-family:"Space Grotesk",sans-serif;
  font-size:30px;
  line-height:1.15;
  letter-spacing:-.015em;
  margin:12px 0 14px;
}
.v3d-teaser-copy p{margin:0 0 22px;max-width:56ch}
.v3d-teaser-media{
  border:1px solid rgba(21,23,26,.14);
  background:#e7e5df;
  aspect-ratio:4/3;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.v3d-teaser-media img{width:100%;height:100%;object-fit:cover;display:block}

@media (max-width:1220px){ .v3d-products{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:900px){
  .v3d-products{grid-template-columns:1fr}
  .v3d-demo{grid-template-columns:1fr;gap:34px}
  .v3d-phone{max-width:380px}
  .v3d-phone iframe{height:600px}
  .v3d-limits{grid-template-columns:1fr;gap:16px}
  .v3d-teaser{grid-template-columns:1fr;gap:28px}
  .v3d-teaser-media{order:-1}
}
@media (max-width:560px){
  .v3d-phone iframe{height:560px}
  .v3d-teaser-copy h3{font-size:25px}
}

/* --- 4. les deux produits configurables --- */
.v3d-products{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.v3d-prod{
  display:flex;
  flex-direction:column;
  background:var(--panel);
  color:inherit;
  transition:background .2s ease;
}
.v3d-prod:hover{background:#fbfaf8}
.v3d-prod-img{display:block;aspect-ratio:4/3;overflow:hidden;background:#e7e5df}
.v3d-prod-img img{width:100%;height:100%;object-fit:cover;display:block}
.v3d-prod-body{display:flex;flex-direction:column;padding:26px 28px 30px}
.v3d-prod-body h3{font-size:1.2rem;margin:10px 0 10px}
.v3d-prod-body p{font-size:14.5px;color:#54585E;flex-grow:1;margin:0}
.v3d-prod-body .more{
  margin-top:18px;
  font-family:'IBM Plex Mono', monospace;
  font-size:13px;
  color:var(--bronze-dark);
}
.v3d-prod:hover .more{text-decoration:underline}

/* --- 5. bascule pergola / garde-corps dans la demonstration --- */
.v3d-switch{
  display:inline-flex;
  border:1px solid rgba(21,23,26,.18);
  margin-bottom:22px;
}
.v3d-switch button{
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;
  padding:9px 16px;
  border:0;
  background:transparent;
  color:#54585E;
  cursor:pointer;
}
.v3d-switch button+button{border-left:1px solid rgba(21,23,26,.18)}
.v3d-switch button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

/* ====================================================================
   Correctif d'ordre de cascade.
   Les requêtes média ci-dessus (lignes 148-161) sont déclarées AVANT la
   règle de base .v3d-products, qui les écrasait : la grille restait donc
   à quatre colonnes sur mobile et débordait de l'écran. On redéclare ici,
   en fin de feuille, les seules règles concernées.
   ==================================================================== */
@media (max-width:1220px){
  .v3d-products{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:900px){
  .v3d-products{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .v3d-prod-body{padding:22px 20px 24px;}
  .v3d-switch{flex-wrap:wrap;}
}