/* ══════════════════════════════════════════════════════════════
   LEAD MAGNETS — TYPE « CALCULATEUR » (calculateur budgetaire)
   Feuille du type, chargee EN PLUS de leadmagnets/assets/leadmagnets.css
   sur les seules pages du parcours.

   CE QU ELLE NE CONTIENT PAS : le questionnaire. Panneau, progression,
   question, options, ecran d attente viennent du socle, et c est pour
   cela que les trois types se ressemblent. Il ne reste ici que ce qui
   est vraiment propre au calculateur : les champs chiffres, l ecran de
   resultat et son montant.

   Elle suppose style.css deja chargee, dont elle lit les variables
   --gdn-*. Tout reste dans la grammaire du site : pilules, rayon 25px
   pour les cartes, 15px pour les elements internes, vert de marque
   comme seule couleur d action.
   ══════════════════════════════════════════════════════════════ */

/* Colonne de lecture unique pour tout le parcours, identique a celle du
   quiz d entree : six questions et un tableau de chiffres n ont aucun
   besoin de toute la largeur, et une ligne trop longue se relit mal. Le
   meme conteneur porte le formulaire et le resultat pour que le passage
   de l un a l autre ne deplace rien a l ecran. */
.gdn-calc-container {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── L accroche ─────────────────────────────────────────────────── */
.gdn-calc-intro { text-align: center; margin-bottom: 32px; }

.gdn-calc-titre {
  font-size: 1.875rem; font-weight: 500; line-height: 1.25;
  color: var(--gdn-black);
  text-wrap: balance;
  margin: 0 0 16px;
}
@media (min-width: 768px) { .gdn-calc-titre { font-size: 2.375rem; } }

.gdn-calc-accroche {
  font-size: 1.125rem; font-weight: 400; line-height: 1.6;
  color: #111111;
  text-wrap: pretty;
  margin: 0 0 12px;
}
.gdn-calc-intro__note { font-size: .875rem; color: #111111; margin: 0; }

.gdn-calc-recommencer { text-align: center; margin: 20px 0 0; }
.gdn-calc-recommencer a { font-size: .75rem; color: var(--gdn-grey); text-decoration: underline; }
.gdn-calc-recommencer a:hover { color: var(--gdn-green); }

/* ══════════════════════════════════════════════════════════════
   LA QUESTION
   ══════════════════════════════════════════════════════════════ */

/* Plus d air autour de l intitule que sur les deux quiz.

   POURQUOI ICI ET NON DANS leadmagnets.css : `.gdn-lm-question` sert
   aussi le diagnostic complet et le quiz d entree, tous deux en
   production. La regle est donc portee par le formulaire du
   calculateur, et elle ne peut rien deplacer ailleurs.

   POURQUOI PLUS D AIR : une question de calculateur se lit avant de
   saisir un nombre, pas avant de choisir dans une liste. Collee a son
   champ, elle se lisait comme son etiquette et l oeil sautait
   directement au chiffre. Detachee, elle redevient la question a
   laquelle on repond.

   Le retrait bas s ajoute aux 16px que le gabarit pose deja sur le
   bloc suivant (`mt-3`), d ou une valeur volontairement modeste ici. */
.gdn-calc-form .gdn-lm-question {
  display: block;
  margin: 10px 0 14px;
}
@media (min-width: 768px) {
  .gdn-calc-form .gdn-lm-question { margin: 18px 0 18px; }
}

/* La carte respire d autant : six questions courtes dans une carte
   serree donnent un formulaire administratif, quand ce parcours doit se
   parcourir une question a la fois. */
.gdn-calc-form .gdn-lm-card { padding: 28px 24px; }
@media (min-width: 768px) {
  .gdn-calc-form .gdn-lm-card { padding: 34px 32px; }
}

/* ══════════════════════════════════════════════════════════════
   LES CHAMPS CHIFFRES
   C est la seule chose que le questionnaire de ce type a de plus que
   celui des deux autres : un nombre a saisir, avec son unite.
   ══════════════════════════════════════════════════════════════ */

/* Le champ et son unite sur une meme ligne, l unite collee au champ :
   « 35 € » se lit d un bloc, et l unite posee en bout de ligne se
   lisait comme une legende sans rapport. */
.gdn-calc-nombre {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Large mais pas pleine largeur : un champ de 12 caracteres qui
   s etale sur 700px invite a y ecrire une phrase. */
.gdn-calc-champ {
  max-width: 190px;
  font-size: 1.375rem;
  font-weight: 500;
  color: #111111;
  text-align: right;
  padding: 12px 16px;
}

/* Les fleches natives du champ nombre : masquees. Elles sont minuscules,
   inaccessibles au doigt, et elles retrecissent la zone de frappe la ou
   ce parcours est surtout consulte, sur telephone. La saisie au clavier
   et le pave numerique (inputmode) restent les deux vraies entrees. */
.gdn-calc-champ::-webkit-outer-spin-button,
.gdn-calc-champ::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gdn-calc-champ[type="number"] { -moz-appearance: textfield; appearance: textfield; }

.gdn-calc-unite {
  font-size: 1.125rem;
  font-weight: 500;
  color: #111111;
  white-space: nowrap;
}

/* ── La liste deroulante ──────────────────────────────────────────
   Variante d affichage d un choix, pour les questions a beaucoup de
   paliers. Meme largeur contenue que le champ nombre : une liste qui
   s etale sur toute la colonne se lit comme un champ de recherche.

   `appearance: none` et le chevron dessine en fond : les navigateurs
   rendent le chevron natif a des tailles tres differentes, et sur un
   champ de ce corps il arrivait minuscule et decolle du bord. */
.gdn-calc-liste { display: flex; }

.gdn-calc-select {
  max-width: 260px;
  width: 100%;
  font-size: 1.125rem;
  font-weight: 500;
  color: #111111;
  padding: 12px 42px 12px 16px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23111111' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
}
/* Cible tactile : 44px de haut au minimum, comme les options. */
@media (max-width: 575.98px) { .gdn-calc-select { min-height: 48px; } }

/* Le champ libre de l option « Autre ». Il apparait sous les options,
   decale, pour se lire comme leur prolongement et non comme une
   septieme question. */
.gdn-calc-saisie {
  padding-left: 16px;
  border-left: 2px solid var(--gdn-green);
}

/* ══════════════════════════════════════════════════════════════
   L ECRAN DE RESULTAT
   ══════════════════════════════════════════════════════════════ */
.gdn-calc-resultat,
.gdn-calc-suite-ecran {
  background: #fff;
  border: 1px solid var(--gdn-border);
  border-radius: var(--gdn-radius-card);
  padding: 32px;
  box-shadow: 0 18px 44px rgba(0,0,0,.07);
}
@media (max-width: 575.98px) {
  .gdn-calc-resultat,
  .gdn-calc-suite-ecran { padding: 22px; }
}

.gdn-calc-resultat__tete {
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--gdn-border);
}

.gdn-calc-eyebrow {
  font-size: .75rem; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gdn-grey);
  margin: 0 0 8px;
}

/* LE MONTANT EST LE TITRE. C est ce que le visiteur est venu chercher,
   et la seule chose qu il retiendra. Il porte donc le plus gros corps de
   l ecran, contrairement aux deux autres types ou aucun chiffre ne
   s affiche jamais.

   Le corps est plafonne et redescend par palier plutot que de deborder :
   un montant a six chiffres doit tenir dans la largeur d un telephone
   sans couper ni pousser une barre de defilement horizontale. */
/* Corps volontairement contenu depuis l ajout du tableau par horizon : le
   montant annuel n est plus seul a porter le resultat, et un titre a 2,25rem
   au-dessus d un tableau qui redit le meme chiffre en plus gros faisait deux
   annonces concurrentes sur le meme ecran. Il reste le plus gros texte de la
   page, il n en est plus le seul evenement. */
.gdn-calc-resultat__titre {
  font-size: 1.25rem; font-weight: 500; line-height: 1.25;
  color: #111111;
  text-wrap: balance;
  margin: 0 0 12px;
}
@media (min-width: 576px) { .gdn-calc-resultat__titre { font-size: 1.5rem; } }
@media (min-width: 768px) { .gdn-calc-resultat__titre { font-size: 1.75rem; } }

.gdn-calc-resultat__detail {
  font-size: 1.0625rem; font-weight: 400; line-height: 1.55;
  color: #111111;
  margin: 0 0 10px;
}
.gdn-calc-resultat__explication {
  font-size: .9375rem; line-height: 1.6;
  color: #111111;
  margin: 0 0 12px;
}

/* Les hypotheses, en une ligne sous le resultat. Au corps des notes : le
   tableau qui les detaillait est parti dans le document, mais un montant
   affiche sans dire sur quoi il repose n est pas verifiable. */
.gdn-calc-resultat__hypotheses {
  font-size: .8125rem; line-height: 1.55;
  color: var(--gdn-grey);
}

/* Avertissement de borne basse. Pose avant le detail, il qualifie tout
   ce qui suit : sans lui, quelqu un qui reprend son travail dix fois par
   mois lirait un chiffre deux fois trop petit en le croyant exact. */
.gdn-calc-prudent {
  background: #f5f4f2;
  border-left: 3px solid var(--gdn-green);
  border-radius: 0 15px 15px 0;
  padding: 14px 18px;
  font-size: .9375rem;
  line-height: 1.55;
  color: #111111;
  margin: 0 0 24px;
}

/* ── La comparaison par horizon ─────────────────────────────────
   Deux colonnes de chiffres, cote a cote. C est l ECART entre elles
   qui porte l information : la colonne de droite n est donc pas mise
   en avant par une couleur ou un fond, seule la ligne du cout l est.
   Un fond d alarme sur la projection ferait de la peur l argument. */
.gdn-calc-horizons { margin-bottom: 28px; }

.gdn-calc-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 12px;
}

.gdn-calc-table th,
.gdn-calc-table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--gdn-border);
  font-size: .9375rem;
  color: #111111;
  text-align: right;
  white-space: nowrap;
  vertical-align: baseline;
}

/* La colonne des libelles : a gauche, et elle seule peut revenir a la
   ligne. Les chiffres, eux, ne se coupent jamais. */
.gdn-calc-table tbody th,
.gdn-calc-table thead th:first-child {
  text-align: left;
  font-weight: 400;
  white-space: normal;
  padding-left: 0;
}

.gdn-calc-table thead th {
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gdn-grey);
  border-bottom-color: #cfcbc6;
}

/* La ligne du cout : celle que l oeil doit trouver sans la chercher. */
.gdn-calc-table__fort th,
.gdn-calc-table__fort td {
  font-size: 1.0625rem;
  font-weight: 500;
  border-bottom: 2px solid var(--gdn-black);
}
.gdn-calc-table tbody tr:last-child th,
.gdn-calc-table tbody tr:last-child td { border-bottom-width: 2px; }

/* Sous 420px, deux colonnes de chiffres et un libelle ne tiennent plus.
   Le tableau se resserre plutot que de deborder : le libelle passe au
   corps des notes et les marges internes se reduisent. Redimensionner en
   proportion, jamais laisser deborder. */
@media (max-width: 419.98px) {
  .gdn-calc-table th,
  .gdn-calc-table td { padding: 10px 6px; font-size: .875rem; }
  .gdn-calc-table tbody th { font-size: .8125rem; }
  .gdn-calc-table__fort th,
  .gdn-calc-table__fort td { font-size: .9375rem; }
}

/* ── Le detail du calcul ────────────────────────────────────────
   Un ordre de grandeur dont on cache les etapes n est pas verifiable, et
   celui-ci se veut discutable : ces tableaux sont ce qui permet au
   lecteur de le contester plutot que de le croire ou de l ignorer. */
.gdn-calc-detail { margin-bottom: 28px; }

.gdn-calc-detail__titre {
  font-size: .8125rem; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gdn-grey);
  margin: 24px 0 10px;
}
.gdn-calc-detail__titre:first-child { margin-top: 0; }

.gdn-calc-lignes { margin: 0 0 4px; }

/* Libelle a gauche, valeur a droite et alignee : c est ainsi qu on
   compare deux lignes d un coup d oeil. En dessous de 480px la valeur
   passe sous son libelle plutot que de le comprimer a trois mots par
   ligne. */
.gdn-calc-ligne {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--gdn-border);
}
.gdn-calc-ligne dt {
  font-size: .9375rem; font-weight: 400; color: #111111;
  margin: 0;
}
.gdn-calc-ligne dd {
  font-size: .9375rem; font-weight: 500; color: #111111;
  text-align: right;
  white-space: nowrap;
  margin: 0;
}
/* La ligne du montant : celle que l oeil doit trouver sans la chercher. */
.gdn-calc-ligne--fort { border-bottom-width: 2px; border-bottom-color: var(--gdn-black); }
.gdn-calc-ligne--fort dt,
.gdn-calc-ligne--fort dd { font-size: 1.0625rem; font-weight: 500; }

@media (max-width: 479.98px) {
  .gdn-calc-ligne { flex-direction: column; gap: 2px; }
  .gdn-calc-ligne dd { text-align: left; }
}

/* ── Ce que le montant veut dire ────────────────────────────────
   La tranche interprete le chiffre, et elle peut conclure que le sujet
   ne justifie rien. Aucune teinte d alarme d une tranche a l autre : le
   bloc est le meme partout, seul son texte change. Un fond rouge sur la
   tranche haute ferait de la peur l argument, et ce n est pas le nôtre. */
.gdn-calc-tranche {
  background: var(--gdn-black);
  border-radius: var(--gdn-radius-card);
  padding: 28px;
  margin: 0 0 28px;
}
@media (max-width: 575.98px) { .gdn-calc-tranche { padding: 22px; } }

.gdn-calc-tranche__titre {
  font-size: 1.1875rem; font-weight: 500; line-height: 1.35;
  color: #ffffff;
  text-wrap: balance;
  margin: 0 0 10px;
}
@media (min-width: 768px) { .gdn-calc-tranche__titre { font-size: 1.375rem; } }

.gdn-calc-tranche__texte {
  font-size: .9375rem; line-height: 1.65;
  color: #e6e4e2;
  margin: 0 0 14px;
}

/* Sur quoi la conclusion se lit. Au corps des notes et en retrait de
   teinte : c est une precision, pas un argument. Mais elle est LA,
   parce que le titre de la page annonce un cout annuel et que ce bloc
   conclut sur trois ans. */
.gdn-calc-tranche__base {
  font-size: .8125rem; line-height: 1.55;
  color: #a8a5a2;
  margin: 0 0 20px;
}

/* ── La capture ─────────────────────────────────────────────────
   Elle arrive APRES le calcul complet, jamais avant : le lecteur a deja
   recu ce pour quoi il est venu. */
.gdn-calc-optin {
  background: #f5f4f2;
  border-radius: var(--gdn-radius-card);
  padding: 28px;
  margin: 0 0 28px;
}
@media (max-width: 575.98px) { .gdn-calc-optin { padding: 22px; } }

.gdn-calc-optin--fait { background: #eef7f1; }

.gdn-calc-optin__pitch { margin-bottom: 20px; }

.gdn-calc-optin__titre {
  font-size: 1.0625rem; font-weight: 500; color: #111111;
  margin: 0 0 6px;
}
.gdn-calc-optin__texte {
  font-size: .9375rem; line-height: 1.6; color: #111111;
  margin: 0;
}
.gdn-calc-optin__form { max-width: 460px; }

/* Le second bloc de rendez-vous de l ecran de resultat a ete retire :
   le bouton du bloc noir mene deja directement a Calendly, et deux
   appels a l action identiques qui se suivent n en font pas un plus
   fort. Ses regles partent avec lui plutot que de rester en dormance.

   ── Ce que le rendez-vous apporte, sur l ecran de confirmation ── */
.gdn-calc-moments-bloc { margin: 28px 0; }

.gdn-calc-moments__titre {
  font-size: 1.1875rem; font-weight: 500; color: #111111;
  text-wrap: balance;
  margin: 0 0 8px;
}
.gdn-calc-moments__intro {
  font-size: .9375rem; line-height: 1.6; color: #111111;
  margin: 0 0 20px;
}

.gdn-calc-moments { display: grid; gap: 14px; }

.gdn-calc-moment {
  border-left: 2px solid var(--gdn-green);
  padding: 2px 0 2px 16px;
}
.gdn-calc-moment__titre { font-size: .9375rem; font-weight: 500; color: #111111; margin: 0 0 4px; }
.gdn-calc-moment__suite { font-size: .875rem; line-height: 1.6; color: #111111; }

/* ── Les sorties ────────────────────────────────────────────────
   Deux cartes cote a cote, qui passent l une sous l autre des que la
   largeur ne permet plus de les lire : chacune porte un titre et une
   phrase, et deux colonnes de 150px n en laissent lire aucune. */
.gdn-calc-suites {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.gdn-calc-suite {
  display: block;
  border: 1px solid var(--gdn-border);
  border-radius: 15px;
  padding: 18px 20px;
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.gdn-calc-suite:hover { border-color: var(--gdn-green); transform: translateY(-2px); }

.gdn-calc-suite__titre {
  display: block;
  font-size: .9375rem; font-weight: 500; color: #111111;
  margin-bottom: 4px;
}
.gdn-calc-suite__texte {
  display: block;
  font-size: .8125rem; line-height: 1.5; color: #111111;
}
.gdn-calc-suite--sec { background: #faf9f8; }