@charset "UTF-8";

/* ============================================================
   PAGE « SERVICE DE PAIE » — /paie
   ============================================================

   Feuille ADDITIVE, chargée après css/style.css. Même contrat que
   css/rabais-abonnement.css : ne redéfinit aucun sélecteur global,
   tout est préfixé « paie- ».

   Contrairement à la page QuickBooks, cette page reste dans la
   palette du site (marine #0D1540) : elle n'a donc AUCUN jeton de
   campagne à elle. Tout vient des variables de style.css, et la
   feuille se limite aux compléments que style.css n'offre pas :
   le groupe de boutons du héros, la bande construction, les deux
   cartes de portée du service, et la mécanique du formulaire
   (honeypot, consentement) transposée de la page QuickBooks.
   ============================================================ */


/* ============================================================
   01. HÉROS — compléments de .page-header
   ============================================================
   Photographie en arrière-plan, même mécanique et mêmes valeurs
   de voile que le héros de l'accueil (.hero-bg / .hero-overlay) :
   l'image est décorative sous le contenu, et le dégradé marine
   soutenu garantit le contraste du texte quel que soit le
   recadrage d'object-fit. */

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

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

.paie-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(13, 21, 64, 0.93) 0%,
    rgba(13, 21, 64, 0.82) 45%,
    rgba(13, 21, 64, 0.58) 100%
  );
}

.paie-hero .container {
  position: relative;
  z-index: 2;
}

.paie-cta-groupe {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: var(--sp-5);
}


/* ============================================================
   01b. MISE EN PAGE — compacité
   ============================================================
   Les sections de cette page sont courtes (un titre, un
   paragraphe, un visuel) : l'espacement générique de
   .section-header (80 px) y creusait de grands vides. On le
   resserre, et les sections illustrées passent en deux colonnes
   texte | visuel pour occuper la largeur au lieu de s'empiler. */

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

.paie-split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: center;
}

.paie-split .section-header {
  margin-bottom: var(--sp-4);
}

.paie-split .paie-figure {
  margin: 0;
  max-width: none;
}

@media (min-width: 901px) {
  /* Alterner le côté du visuel d'une section à l'autre, sans
     toucher à l'ordre du DOM (sur mobile, le texte reste premier). */
  .paie-split--inverse .paie-figure {
    order: -1;
  }
}

@media (max-width: 900px) {
  .paie-split {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
}


/* ============================================================
   02. BANDE CONSTRUCTION — bloc démarqué, fond marine
   ============================================================
   Destination possible d'une publicité (ancre #construction) :
   scroll-margin-top évite que l'en-tête horizontal mobile masque
   le début de la section à l'atterrissage. */

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

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

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

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

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


/* ============================================================
   02b. FIGURES DE SECTION
   ============================================================ */

.paie-figure {
  margin: var(--sp-5) 0 0;
  max-width: 760px;
}

.paie-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--c-separateur);
}

/* Sur la bande marine, la bordure claire du fond pâle serait
   criarde : on l'adoucit. */
.paie-construction .paie-figure img {
  border-color: rgba(255, 255, 255, 0.14);
}


/* ============================================================
   03. PORTÉE DU SERVICE — couvert / non couvert
   ============================================================
   Volontairement asymétrique : la carte marine « Couvert » est le
   morceau fort, avec des coches; « Non couvert » n'est qu'une note
   en marge, bordure à gauche, qui n'occupe que la place de son
   contenu. Deux cartes jumelles à filets horizontaux donnaient un
   air de tableau d'affichage — et la blanche, à moitié vide,
   s'étirait pour égaler la marine.

   Le sable des coches est repris des visuels de la campagne
   (accent des jours de paie sur la ligne de temps) : c'est le seul
   jeton local de cette feuille, tout le reste vient de style.css. */

.paie-page {
  --paie-sable: #C9A469;
}

.paie-portee-grille {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: center;
}

.paie-portee-carte {
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}

.paie-portee-carte h3 {
  font-size: var(--text-h4);
  margin-bottom: var(--sp-3);
}

.paie-portee-carte ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.paie-portee-carte li {
  position: relative;
  padding: 0.45rem 0 0.45rem 1.9rem;
  font-size: var(--text-small);
  line-height: 1.6;
}

.paie-portee-carte li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.45rem;
  font-weight: 700;
  color: var(--paie-sable);
}

.paie-portee-carte--couvert {
  background-color: var(--c-marine);
}

.paie-portee-carte--couvert h3 {
  color: var(--c-blanc);
}

.paie-portee-carte--couvert li {
  color: rgba(255, 255, 255, 0.82);
}

.paie-portee-note {
  align-self: center;
  border-left: 2px solid var(--c-separateur);
  padding-left: var(--sp-4);
}

.paie-portee-note h3 {
  font-size: var(--text-h4);
  color: var(--c-marine);
  margin-bottom: var(--sp-2);
}

.paie-portee-note ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.paie-portee-note li {
  position: relative;
  padding: 0.35rem 0 0.35rem 1.6rem;
  font-size: var(--text-small);
  line-height: 1.6;
  color: var(--c-texte-sec);
}

.paie-portee-note li::before {
  content: "✕";
  position: absolute;
  left: 0;
  top: 0.45rem;
  font-size: 0.85em;
  color: var(--c-texte-sec);
  opacity: 0.55;
}

.paie-portee-note p {
  margin-top: var(--sp-3);
  font-size: var(--text-small);
  color: var(--c-marine);
  font-weight: 600;
}


/* ============================================================
   04. FORMULAIRE — compléments seulement
   ============================================================
   Le formulaire est posé sur fond clair dans .contact-form-card :
   les styles de style.css sont déjà conformes AA, aucune surcharge
   de contraste n'est nécessaire (contrairement à la page QuickBooks,
   dont le formulaire vit sur fond foncé). */

.paie-formulaire {
  scroll-margin-top: 90px;
}

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

.paie-consentement {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: var(--text-small);
  color: var(--c-texte-sec);
  margin: var(--sp-4) 0;
}

.paie-consentement input[type="checkbox"] {
  margin-top: 0.25rem;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

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


/* ============================================================
   05. RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
  .paie-cta-groupe {
    width: 100%;
  }

  .paie-cta-groupe .btn {
    width: 100%;
    text-align: center;
  }

  .paie-portee-grille {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
}