@charset "UTF-8";

/* ====================================================
   ESSORS INC. — Page « Rabais sur abonnement »
   Feuille de style propre à la campagne.
   Version 1.0 | Août 2026

   Cette feuille se charge APRÈS style.css et ne redéfinit
   aucun sélecteur global : tout est préfixé « qb- » ou
   confiné à .qb-page. Le gabarit du site (en-tête, nav,
   bannière témoins, pied de page) conserve donc son
   apparence habituelle.

   POLICES — aucune police externe n'est chargée ici.
   On réutilise les polices auto-hébergées du site
   (--font-heading / --font-ui), conformément au retrait
   volontaire de Google Fonts (Loi 25) et à la directive
   CSP « font-src 'self' ».

   CONTRASTES — vérifiés WCAG 2.1 AA :
     #9BE58A sur #0C2B0C ........ 10,2:1
     #FFD100 sur #0C2B0C ........ 10,5:1
     #7DB77D sur #0C2B0C .........6,5:1
     #2CA01C sur #0C2B0C .........4,5:1  (accents et grand texte)
     #FFFFFF sur #1B7A12 .........5,5:1  (boutons pleins)
     #0C2B0C sur #FFD100 .........9,5:1
   Ne pas éclaircir ces valeurs sans revalider.
   ==================================================== */


/* ====================================================
   01. JETONS DE LA CAMPAGNE
   ==================================================== */

.qb-page {
  /* Palette dérivée du vert QuickBooks */
  --qb-encre:       #0C2B0C;   /* vert très foncé — fonds */
  --qb-encre-2:     #164516;   /* vert foncé secondaire */
  --qb-vert:        #2CA01C;   /* vert d'accent — bordures, grand texte */
  --qb-vert-fonce:  #1B7A12;   /* vert des surfaces cliquables (texte blanc AA) */
  --qb-surligneur:  #FFD100;
  --qb-menthe:      #9BE58A;
  --qb-menthe-doux: #7DB77D;
  --qb-clair:       #E7F5DF;
  --qb-texte:       #152315;
  --qb-texte-doux:  #4E614E;

  --qb-contenu-w:   1040px;
}

/* Conteneur propre à la campagne — plus étroit que le .container du site,
   pour garder des lignes de texte lisibles (65-75 caractères). */
.qb-contenu {
  max-width: var(--qb-contenu-w);
  margin-inline: auto;
  padding-inline: var(--sp-3);
}


/* ====================================================
   02. HÉRO
   ==================================================== */

.qb-hero {
  background: var(--qb-encre);
  color: var(--c-blanc);
  padding: var(--sp-7) 0 var(--sp-8);
  overflow: hidden;
}

.qb-hero .breadcrumb,
.qb-hero .breadcrumb a,
.qb-hero .breadcrumb [aria-current] {
  color: var(--qb-menthe-doux);
}

.qb-hero .breadcrumb a:hover {
  color: var(--qb-menthe);
}

.qb-eyebrow {
  display: block;
  font-family: var(--font-ui);
  color: var(--qb-menthe);
  letter-spacing: 0.18em;
  font-weight: 600;
  font-size: var(--text-label);
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}

.qb-hero h1 {
  font-family: var(--font-heading);
  line-height: 1.05;
  color: var(--c-blanc);
  margin: 0;
}

/* « Jusqu'à » fait partie intégrante du titre — exigence de conformité :
   le pourcentage ne doit jamais apparaître seul dans un titre. */
.qb-h1-jusqua {
  display: block;
  font-family: var(--font-ui);
  color: var(--qb-vert);
  letter-spacing: 0.14em;
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  text-transform: uppercase;
  margin-bottom: 0.15em;
}

.qb-h1-taux {
  display: block;
  font-size: clamp(3.2rem, 9vw, 6.5rem);
  letter-spacing: -0.01em;
}

.qb-marque {
  display: inline-block;
  background: var(--qb-surligneur);
  color: var(--qb-encre);
  padding: 0.08em 0.22em;
  transform: rotate(-1.2deg);
  margin-top: 0.18em;
  font-size: clamp(1.4rem, 3.6vw, 2.6rem);
  letter-spacing: 0.01em;
}

.qb-sous-titre {
  font-size: var(--text-body-lg);
  max-width: 34em;
  margin: var(--sp-4) 0 0;
  color: var(--qb-clair);
}

.qb-sous-titre strong { color: var(--c-blanc); }

.qb-barre {
  color: var(--qb-menthe);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

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

.qb-micro {
  margin-top: var(--sp-4);
  font-size: var(--text-small);
  color: var(--qb-menthe-doux);
  max-width: 44em;
}


/* ====================================================
   03. BOUTONS DE LA CAMPAGNE
   ==================================================== */

.qb-btn {
  display: inline-block;
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 1rem 2rem;
  border-radius: 999px;
  transition: transform var(--tr-base), background-color var(--tr-base);
}

.qb-btn:hover { transform: translateY(-2px); }

.qb-btn--jaune {
  background: var(--qb-surligneur);
  color: var(--qb-encre);
}
.qb-btn--jaune:hover { background: #FFDC3D; }

.qb-btn--plein {
  background: var(--qb-vert-fonce);
  color: var(--c-blanc);
}
.qb-btn--plein:hover { background: #166310; }

.qb-btn--contour {
  background: transparent;
  color: var(--c-blanc);
  border: 2px solid var(--qb-menthe);
  padding: calc(1rem - 2px) calc(2rem - 2px);
}
.qb-btn--contour:hover { background: rgba(155, 229, 138, 0.14); }


/* ====================================================
   04. CALCULATRICE
   ==================================================== */

.qb-calculatrice { padding: var(--sp-7) 0; }

.qb-page h2 {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  line-height: 1.15;
  margin-bottom: var(--sp-1);
}

.qb-intro {
  color: var(--qb-texte-doux);
  max-width: 38em;
  margin-bottom: var(--sp-5);
}

.qb-calc-carte {
  background: var(--c-blanc);
  border: 2px solid var(--qb-encre);
  border-radius: 20px;
  padding: var(--sp-5);
  box-shadow: 8px 8px 0 var(--qb-vert);
}

.qb-consigne {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--text-h4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--sp-2);
}

.qb-selecteur {
  display: flex;
  gap: 0.625rem;
  flex-wrap: wrap;
}

.qb-forfait-btn {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.02em;
  padding: 0.75rem 1.375rem;
  border-radius: 999px;
  cursor: pointer;
  border: 2px solid var(--qb-encre);
  background: var(--c-blanc);
  color: var(--qb-encre);
  transition: transform var(--tr-base), background-color var(--tr-base);
}

.qb-forfait-btn:hover { transform: translateY(-2px); }

.qb-forfait-btn[aria-pressed="true"] {
  background: var(--qb-vert-fonce);
  border-color: var(--qb-vert-fonce);
  color: var(--c-blanc);
}

.qb-calc-resultats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.qb-calc-bloc {
  background: var(--c-fond);
  border-radius: 14px;
  padding: var(--sp-3);
}

.qb-etiquette {
  font-family: var(--font-ui);
  font-size: var(--text-small);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--qb-texte-doux);
  font-weight: 600;
}

.qb-valeur {
  font-family: var(--font-heading);
  font-size: 2rem;
  color: var(--qb-encre);
  font-variant-numeric: tabular-nums;
  margin-top: 0.25rem;
}

.qb-valeur .qb-barre {
  text-decoration: line-through;
  text-decoration-thickness: 3px;
  text-decoration-color: var(--qb-vert);
  color: var(--qb-texte-doux);
}

.qb-calc-bloc--fort { background: var(--qb-encre); }
.qb-calc-bloc--fort .qb-etiquette { color: var(--qb-menthe); }
.qb-calc-bloc--fort .qb-valeur { color: var(--qb-surligneur); }

.qb-badge {
  display: inline-block;
  background: var(--qb-surligneur);
  color: var(--qb-encre);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.375rem 1rem;
  border-radius: 999px;
  margin-top: var(--sp-3);
  transform: rotate(-1.2deg);
}

.qb-calc-note {
  margin-top: var(--sp-3);
  font-size: var(--text-small);
  color: var(--qb-texte-doux);
}


/* ====================================================
   05. COMPARAISON
   ==================================================== */

.qb-comparaison {
  background: var(--qb-encre-2);
  color: var(--c-blanc);
  padding: var(--sp-7) 0;
}

.qb-comparaison h2 { color: var(--c-blanc); }

.qb-comp-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

.qb-comp-carte {
  border-radius: 18px;
  padding: var(--sp-4);
}

.qb-comp-carte h3 {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--text-h3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--sp-2);
}

.qb-comp-carte ul { list-style: none; margin: 0; padding: 0; }
.qb-comp-carte li { padding: 0.625rem 0; }

.qb-comp-carte--eux {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.qb-comp-carte--eux li {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: #DCEFD4;
}

.qb-comp-carte--nous {
  background: var(--qb-surligneur);
  color: var(--qb-encre);
}
.qb-comp-carte--nous li { border-top: 1px solid rgba(12, 43, 12, 0.18); }


/* ====================================================
   06. ÉTAPES
   ==================================================== */

.qb-etapes { padding: var(--sp-7) 0; }

.qb-etapes-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}

.qb-num {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--text-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-blanc);
  background: var(--qb-vert-fonce);
  display: inline-block;
  padding: 0.25rem 0.875rem;
  border-radius: 999px;
  margin-bottom: var(--sp-2);
}

.qb-etape h3 {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  margin-bottom: 0.5rem;
}

.qb-etape p { color: var(--qb-texte-doux); }


/* ====================================================
   07. FAQ
   ==================================================== */

.qb-faq { padding: 0 0 var(--sp-7); }

.qb-faq-titre { margin-bottom: var(--sp-4); }

.qb-faq details {
  border-top: 2px solid var(--qb-encre);
  padding: var(--sp-3) 0;
}

.qb-faq details:last-of-type { border-bottom: 2px solid var(--qb-encre); }

.qb-faq summary {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--text-h4);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
}

.qb-faq summary::-webkit-details-marker { display: none; }

.qb-faq summary::after {
  content: "+";
  font-family: var(--font-ui);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--qb-vert-fonce);
  flex-shrink: 0;
}

.qb-faq details[open] summary::after { content: "\2212"; }

.qb-faq details p {
  margin-top: 0.875rem;
  color: var(--qb-texte-doux);
  max-width: 46em;
}


/* ====================================================
   08. FORMULAIRE
   ==================================================== */

.qb-formulaire {
  background: var(--qb-encre);
  color: var(--c-blanc);
  padding: var(--sp-7) 0;
}

.qb-formulaire h2 { color: var(--c-blanc); }

.qb-formulaire .qb-intro {
  color: #C6EFB8;
  max-width: 36em;
  margin-bottom: var(--sp-4);
}

/* Le formulaire réutilise .contact-form (validation + envoi par main.js).
   On ne réhabille ici que ce qui doit passer du fond clair au fond vert :
   les règles du site sont écrites pour un formulaire sur fond pâle et
   tomberaient sous le seuil AA une fois posées sur --qb-encre. */
.qb-formulaire .contact-form label { color: var(--c-blanc); }

/* Astérisque « champ obligatoire » : --c-rouge donne 1,7:1 sur le vert
   foncé. On passe au jaune de la campagne (10,5:1). */
.qb-formulaire .contact-form .form-group label span[aria-hidden] {
  color: var(--qb-surligneur);
}

/* Messages d'erreur : --c-rouge est illisible ici; ce rose clair
   donne 8,3:1 sur --qb-encre. */
.qb-formulaire .contact-form .field-error { color: #FFC9C5; }

.qb-consentement {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: var(--text-small);
  color: #C6EFB8;
  margin: var(--sp-4) 0;
}

.qb-consentement input { margin-top: 0.25rem; accent-color: var(--qb-surligneur); }
.qb-consentement label { color: #C6EFB8; }
.qb-consentement a { color: var(--qb-menthe); }

/* La case à cocher n'est pas dans un .form-group : elle échappe donc au
   « min-height: 52px; width: 100% » des champs du site, ce qui est voulu.
   On lui donne quand même une cible tactile décente (mobile). */
.qb-consentement input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

/* Champ honeypot — invisible pour les humains, atteint par les bots.
   Retiré du flux sans display:none (que certains bots détectent). */
.qb-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Message de confirmation. On reprend le jaune de la campagne plutôt que
   le vert pâle du site, qui disparaîtrait sur --qb-encre.
   « p » doit être repris explicitement : la règle « .form-success p » du
   site impose --c-texte-sec, soit 3,7:1 sur le jaune — sous le seuil AA. */
.qb-formulaire .form-success {
  background: var(--qb-surligneur);
  color: var(--qb-encre);
  border-radius: 14px;
  padding: var(--sp-4);
  border: none;
  text-align: left;
}

.qb-formulaire .form-success h3,
.qb-formulaire .form-success p,
.qb-formulaire .form-success a { color: var(--qb-encre); }


/* ====================================================
   08b. BADGE DE CERTIFICATION PROADVISOR
   ====================================================
   Badge officiel fourni par Intuit, affiché en vertu de
   l'entente ProAdvisor. Il ne doit être ni recadré, ni
   recoloré, ni filtré : c'est une condition d'utilisation
   de la marque. D'où l'absence délibérée de « filter »,
   « mix-blend-mode », « opacity » ou de fond appliqué ici.

   Le fichier est un PNG à fond transparent de 372 × 420.
   Les attributs width/height du HTML portent ces valeurs
   natives — le navigateur en tire le rapport d'aspect et
   réserve la bonne place au chargement — et la largeur
   réelle est imposée ci-dessous, « height: auto »
   garantissant que les proportions ne bougent pas.
   ==================================================== */

.qb-certif {
  display: block;
  height: auto;
}

.qb-certif--form {
  width: 140px;
  margin-bottom: var(--sp-3);
}

.qb-certif--faq {
  width: 120px;
  margin-top: var(--sp-2);
}


/* ====================================================
   09. MENTIONS LÉGALES DE LA CAMPAGNE
   ==================================================== */

.qb-mentions {
  padding: var(--sp-5) 0;
  font-size: 0.78rem;
  line-height: 1.65;
  color: var(--qb-texte-doux);
  background: var(--c-fond-section);
}

.qb-mentions p { max-width: 62em; margin-bottom: 0.5rem; }


/* ====================================================
   10. RESPONSIVE — ~80 % du trafic vient de Facebook mobile
   ==================================================== */

@media (max-width: 768px) {
  .qb-hero { padding: var(--sp-5) 0 var(--sp-6); }
  .qb-calculatrice,
  .qb-comparaison,
  .qb-etapes,
  .qb-formulaire { padding: var(--sp-6) 0; }

  .qb-calc-carte {
    padding: var(--sp-3);
    box-shadow: 5px 5px 0 var(--qb-vert);
  }

  /* Les boutons de forfait deviennent une grille à deux colonnes :
     plus de cibles tactiles pleine largeur, moins de retours à la ligne. */
  .qb-selecteur { display: grid; grid-template-columns: 1fr 1fr; }
  .qb-forfait-btn { width: 100%; }

  .qb-cta-groupe { gap: 0.75rem; }
  .qb-btn { width: 100%; text-align: center; }
}

@media (max-width: 480px) {
  .qb-valeur { font-size: 1.75rem; }
  .qb-calc-resultats { grid-template-columns: 1fr; gap: var(--sp-2); }
}


/* ====================================================
   11. MOUVEMENT RÉDUIT
   ==================================================== */

@media (prefers-reduced-motion: reduce) {
  .qb-btn:hover,
  .qb-forfait-btn:hover { transform: none; }
}


/* ====================================================
   12. IMPRESSION
   ==================================================== */

@media print {
  .qb-hero,
  .qb-comparaison,
  .qb-formulaire {
    background: #FFF !important;
    color: #000 !important;
  }
  .qb-hero h1,
  .qb-comparaison h2,
  .qb-formulaire h2 { color: #000 !important; }
  .qb-cta-groupe { display: none; }
}