/* ==========================================================================
   Composition PARTAGÉE des pages d'atterrissage produit (vigiacces.com,
   mezur.com…) : entête simple, icône de marque, héros duo avec carte de
   connexion entreprise, dialogue de sortie, pied minimal.
   Toute l'identité visuelle (couleurs, typographie, boutons, cartes, champs,
   trame de fond, modes clair/sombre) vient du thème partagé theme.css — ne
   rien dupliquer d'ici : le commun des atterrissages vit ICI, le thème du
   site vit dans public/css/theme.css, et chaque page ne garde que ses textes.
   ========================================================================== */

/* Entête simple : mot-symbole à gauche, lien + bascule de thème à droite.
   Même matière que l'entête du site (verre dépoli collant). */
.at-entete {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--entete-fond);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bordure);
}
.at-entete .conteneur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.9rem;
}
.at-marque { font-size: 1rem; }
.at-entete-droite { display: flex; align-items: center; gap: 1rem; }
.at-lien-entete { font-size: 0.9rem; color: var(--texte-2); }
.at-lien-entete:hover { color: var(--accent-clair); }
/* bouton d'appel à l'action dans l'entête : même gabarit compact que le CTA
   de navigation de softinov.com (.nav-principale .btn-nav) */
.at-bouton-entete { padding: 0.5rem 1.15rem; font-size: 0.9rem; }

/* Page compacte : le héros colle à l'entête et au pied (le thème lui donne
   clamp(5rem, 12vh, 9rem) / clamp(4rem, 9vh, 7rem) de padding, pensé pour
   une page longue). */
.heros { padding-block: 2rem 2.5rem; }
/* Titre plafonné à 50px (le thème le monte à 4rem/64px). */
.heros h1 { font-size: clamp(2.3rem, 5.2vw, 3.125rem); }

/* Icône de marque au-dessus du héros, en deux variantes basculées par thème
   (comme les logos clients de softinov.com). Le conteneur du héros est
   plafonné à 60rem par le thème : on lève ce plafond pour que l'icône
   s'aligne sur le bord gauche de la grille duo. */
.heros .at-icone-zone { max-width: none; margin-bottom: 2.4rem; }
.at-icone {
  display: block;
  width: 150px;
  height: 150px;
  border-radius: calc(var(--rayon) * 1.6);
  border: 1px solid var(--bordure);
}
.at-icone--clair { display: none; }
:root[data-theme="clair"] .at-icone--sombre { display: none; }
:root[data-theme="clair"] .at-icone--clair { display: block; }

/* Héros : la grille duo du thème, resserrée (la carte de connexion est
   plus étroite qu'une maquette produit). */
.heros .at-duo { grid-template-columns: 1.3fr 1fr; align-items: start; }
/* deux paragraphes d'amorce, rapprochés entre eux */
.at-duo .amorce { margin-bottom: 1.1rem; }
/* page courte : le halo bas du héros serait tranché net par l'overflow de la
   section juste au-dessus du pied — on le retire, le halo haut-droit suffit */
.heros::after { content: none; }

/* Carte de connexion */
.at-connexion { max-width: 26rem; justify-self: end; width: 100%; }
.at-connexion h2 { font-size: 1.6rem; margin-bottom: 1.2rem; }
.at-connexion .formulaire { margin-top: 0.4rem; }
.at-bouton-connexion { justify-content: center; width: 100%; }
.at-connexion .note-formulaire { margin-top: 1.1rem; }

/* Dialogue de sortie vers softinov.com. margin: auto rétabli : le reset
   global du thème (* { margin: 0 }) écrase le centrage natif des <dialog>
   — même leçon que la modale du plan sur softinov.com. */
.at-dialogue {
  margin: auto;
  width: min(92vw, 30rem);
  padding: 2rem 2.2rem;
  border: 1px solid var(--bordure-survol);
  border-radius: var(--rayon);
  background: var(--carte-pleine);
  color: var(--texte);
  box-shadow: var(--ombre-survol);
}
.at-dialogue::backdrop {
  background: rgba(4, 7, 11, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
:root[data-theme="clair"] .at-dialogue::backdrop { background: rgba(20, 32, 43, 0.45); }
.at-dialogue h2 { font-size: 1.3rem; margin-bottom: 0.7rem; }
.at-dialogue p { color: var(--texte-2); margin-bottom: 1.6rem; }
.at-dialogue-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }

/* Pied minimal, accolé au héros (l'écart vient du padding bas du héros) */
.at-pied {
  border-top: 1px solid var(--bordure);
  padding-block: 1.6rem;
  font-size: 0.9rem;
  color: var(--texte-3);
  position: relative;
  z-index: 1;
}
.at-pied a { color: var(--texte-2); }
.at-pied a:hover { color: var(--accent-clair); }

@media (max-width: 820px) {
  .heros .at-duo { grid-template-columns: 1fr; gap: 2.5rem; }
  .at-connexion { justify-self: stretch; max-width: none; }
}