@charset "UTF-8";

/* ============================================================
   PAGES D'ATTERRISSAGE — campagne Google Ads (Réseau de Recherche)
   ============================================================

   Feuille ADDITIVE, chargée après css/style.css. Même contrat que
   css/paie.css et css/rabais-abonnement.css : ne redéfinit aucun
   sélecteur global, tout est préfixé « att- » ou restreint à la
   classe de corps « atterrissage ».

   Une seule feuille sert TOUTES les pages d'atterrissage de la
   campagne (/comptable-obnl, /service-paie, /comptable-pme, et
   leurs pages de remerciement). Une page d'atterrissage n'a donc
   rien à elle en CSS : elle porte <body class="atterrissage">, et
   tout ce qui varie d'une page à l'autre est dans le HTML (textes,
   photo du héros, attributs du formulaire).

   Le principe de mise en page : le visiteur arrive d'une annonce
   avec une intention précise. Le formulaire vit donc DANS le héros,
   visible sans défiler sur un écran d'ordinateur courant
   (1366 × 768), et se répète en bas de page pour celui qui a lu
   avant de se décider.

   Palette du site (marine #0D1540) : aucun jeton de campagne,
   sauf le sable des coches, repris de css/paie.css.
   ============================================================ */


/* ============================================================
   00. JETON LOCAL
   ============================================================
   --paie-sable n'existe que sous .paie-page : on ne peut pas s'y
   adosser ici. Même valeur, nom propre à cette feuille. */

.atterrissage {
  --att-sable: #C9A469;
}


/* ============================================================
   01. HÉROS — compléments de .page-header
   ============================================================
   Photographie décorative sous voile marine, même mécanique que
   .paie-hero-bg / .paie-hero-overlay. Différence : le dégradé
   remonte en opacité vers la droite, là où vit la carte du
   formulaire — la photo ne doit pas « percer » autour d'elle et
   donner l'impression d'une carte qui flotte sur une image
   chargée. */

.att-hero {
  /* .page-header impose 120 px de marge verticale : ici, chaque
     pixel gagné rapproche le bouton d'envoi de la ligne de
     flottaison. */
  padding-block: var(--sp-5);
}

.att-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.att-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

.att-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(13, 21, 64, 0.94) 0%,
    rgba(13, 21, 64, 0.84) 45%,
    rgba(13, 21, 64, 0.90) 100%
  );
}

/* .page-header .container porte déjà position/z-index; on le
   répète pour que la feuille ne dépende pas de cet ordre. */
.att-hero .container {
  position: relative;
  z-index: 2;
}

.att-hero-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}

@media (min-width: 1024px) {
  .att-hero-grille {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 480px);
    gap: var(--sp-6);
    align-items: center;
  }
}

/* Titre ramené à l'échelle d'un h2, légèrement relevé : sur une
   page d'atterrissage, le h1 reprend la requête de l'annonce et
   s'étire sur deux ou trois lignes — à --text-h1, il repousserait
   le formulaire sous la ligne de flottaison. */
.att-hero h1 {
  font-size: clamp(1.875rem, 3.3vw, 3rem);
  max-width: 24ch;
  margin-bottom: var(--sp-3);
}

.att-hero .page-header-desc {
  color: rgba(255, 255, 255, 0.78);
}


/* ============================================================
   02. TÉLÉPHONE ET PREUVES — colonne texte du héros
   ============================================================
   Une part importante des visiteurs d'une annonce préfère appeler :
   le numéro est donc un vrai lien tel:, assez gros pour être vu au
   premier coup d'œil et touché au pouce sur mobile. */

.att-telephone {
  margin-top: var(--sp-4);
}

.att-telephone a {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--c-blanc);
  text-decoration: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.3);
  transition: border-color var(--tr-base);
}

.att-telephone a:hover {
  border-color: var(--c-blanc);
}

.att-telephone a:focus-visible {
  outline: 3px solid var(--c-blanc);
  outline-offset: 4px;
}

.att-telephone p {
  margin-top: 0.25rem;
  font-size: var(--text-small);
  color: rgba(255, 255, 255, 0.72);
}

/* Trois faits vérifiables, pas d'affirmations : la déontologie
   CPA interdit les promesses de résultat et les comparaisons. */
.att-preuves {
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
}

.att-preuves li {
  position: relative;
  padding: 0.3rem 0 0.3rem 1.75rem;
  font-size: var(--text-body);
  color: rgba(255, 255, 255, 0.85);
}

.att-preuves li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.3rem;
  font-weight: 700;
  color: var(--att-sable);
}


/* ============================================================
   03. CARTE FORMULAIRE — modificateur de .contact-form-card
   ============================================================
   La carte reste sur fond blanc : les styles de formulaire de
   style.css sont déjà conformes AA, aucune surcharge de contraste.
   Le modificateur ne fait que resserrer — le padding de 80 px et
   les écarts de 32 px de la page Contact rendraient le formulaire
   trop haut pour tenir dans le héros. */

.att-form-card {
  padding: var(--sp-4);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

.att-form-card h2 {
  font-size: var(--text-h4);
  margin-bottom: var(--sp-3);
}

.att-form-card .form-grid {
  gap: var(--sp-2);
}

/* Message facultatif : trois lignes suffisent, 140 px de hauteur
   minimale (valeur de style.css) en imposeraient près de cinq. */
.att-form-card textarea {
  min-height: 88px;
}

.att-form-card .btn {
  width: 100%;
  margin-top: var(--sp-3);
}

/* Le message de succès vit dans la carte; sans retouche, ses
   marges internes de 64 px l'écrasent dans une colonne de 480 px. */
.att-form-card .form-success {
  padding: var(--sp-4) var(--sp-3);
}


/* ============================================================
   04. SECTIONS DE CONTENU — services, « Pourquoi Essors »
   ============================================================
   .services-grid / .service-item et .diff-grid / .diff-item de
   style.css s'emploient tels quels. On corrige seulement les
   marges pensées pour l'accueil : la marge basse de .services-grid
   (80 px) suppose un bouton « Tous nos services » en dessous, et
   l'en-tête de section à 80 px creuse un vide sur des sections
   aussi courtes. */

.atterrissage .section-header {
  margin-bottom: var(--sp-5);
}

.atterrissage .services-grid {
  margin-bottom: 0;
  padding: 0;
}

.att-fond-alterne {
  background-color: var(--c-fond-section);
}


/* ============================================================
   05. FORMULAIRE DU BAS
   ============================================================
   scroll-margin-top : l'en-tête est collant; sans cette marge, un
   lien vers #soumission-bas en masquerait le titre. */

.att-formulaire {
  background-color: var(--c-fond-section);
  scroll-margin-top: 90px;
}

.att-formulaire .contact-form-card {
  max-width: 760px;
  margin-inline: auto;
}

.att-formulaire .section-header {
  max-width: 760px;
  margin-inline: auto;
}

.att-formulaire .contact-form .btn {
  margin-top: var(--sp-3);
}

/* Même raison pour l'ancre du héros (#soumission), visée par le
   bouton du menu mobile. */
.att-form-card {
  scroll-margin-top: 90px;
}

/* Honeypot : masqué hors flux, sans display:none que certains
   bots détectent. Copie de .paie-honeypot. */
.att-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Mention de confidentialité (Loi 25) : tient lieu de case de
   consentement sur ce formulaire court. Le lien doit rester
   repérable comme lien — souligné, pas seulement coloré. */
.att-note {
  margin-top: var(--sp-3);
  font-size: 0.8125rem;
  line-height: 1.55;
}

.att-note a {
  color: var(--c-marine);
  text-decoration: underline;
}


/* ============================================================
   06. PAGE DE REMERCIEMENT — <body class="atterrissage atterrissage--merci">
   ============================================================
   Destination de la redirection après envoi : c'est son
   chargement qui compte comme conversion dans Google Ads. Page
   courte, sans formulaire. */

.atterrissage--merci .page-header {
  padding-block: var(--sp-7);
}

.atterrissage--merci .page-header-desc {
  color: rgba(255, 255, 255, 0.78);
}

/* Les liens de style.css héritent de la couleur et ne sont pas
   soulignés : dans un paragraphe, le numéro ne se distinguerait
   plus du texte. */
.atterrissage--merci .page-header-desc a {
  color: var(--c-blanc);
  text-decoration: underline;
  white-space: nowrap;
}

.att-merci-actions {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}


/* ============================================================
   06b. BLOC CONSTRUCTION — sert UNIQUEMENT à /service-paie
   ============================================================
   Bloc distinct exigé par le plan de campagne (annonces « paie
   CCQ »). Bande marine calquée sur .paie-construction de
   css/paie.css, qu'on ne peut pas réutiliser : elle n'existe que
   dans cette autre feuille. Le rouge de .cta-band n'est pas voulu
   ici. .eyebrow--light, .divider--light et .btn--white viennent
   de style.css.

   scroll-margin-top : l'ancre #construction peut être la cible
   directe d'une annonce; l'en-tête collant en masquerait le titre. */

.att-construction {
  background-color: var(--c-marine);
  scroll-margin-top: 90px;
}

.att-construction .section-header h2,
.att-construction h3 {
  color: var(--c-blanc);
}

.att-construction p {
  color: rgba(255, 255, 255, 0.72);
  max-width: 62ch;
}

.att-construction p + p {
  margin-top: var(--sp-3);
}

.att-construction .btn {
  margin-top: var(--sp-5);
}


/* ============================================================
   07. RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
  .att-hero {
    padding-block: var(--sp-4);
  }

  .att-form-card {
    padding: var(--sp-3);
  }

  .att-merci-actions .btn,
  .att-formulaire .btn,
  .att-construction .btn,
  .atterrissage .cta-band .btn {
    width: 100%;
    text-align: center;
  }
}