/* ==========================================================================
   Section 8 - appel a l'action
   Derniere bande avant le blog et le pied de page.

   Le squelette vient du modele de reference. Mesures relevees dans
   la verite terrain home-1440.json sur leur bloc final : bande pleine
   largeur sur fond uni sombre, hauteur 388px, titre centre de 63,99px en
   graisse 400 avec un interlettrage de -1,92px et une seconde partie de
   phrase en couleur d'accent, puis UN SEUL bouton pilule de 222,5 par 56px
   dont la fleche est enfermee dans une pastille ronde de 36px remplie de
   l'accent.
   On reprend ces proportions et ce parti d'un bouton unique, et on remplace
   l'habillage : encre Numbers au lieu de leur vert sapin, Hw Cigars au lieu
   de leur grotesque, et les accents Numbers au lieu de leur orange.

   Toutes les classes sont prefixees .cta pour ne pas ecraser les feuilles des
   autres sections.
   ========================================================================== */

/* C'est ici que la palette respire.
   Sur le fond encre le rapport de force s'inverse : --vert n'y tient que
   1,92 pour 1, illisible, alors que le corail monte a 6,39 et le mauve a
   6,90. La section n'a donc plus besoin d'un vert eclairci fabrique pour
   l'occasion (l'ancien --cta-vert-vif, un #6bbf95 ecrit en dur hors palette) :
   elle prend les deux couleurs que la palette destine justement aux fonds
   sombres.
   Repartition : le MAUVE porte les petites capitales, sur-titre et libelles
   de modalites, c'est la voix calme ; le CORAIL porte le fragment accentue
   du titre, ses puces et le halo, c'est la voix qui appelle. Le VERT ne
   disparait pas pour autant, il tient l'aplat de la pastille du bouton, seul
   endroit du bloc pose sur un fond clair.
   Les traits et le texte secondaire restent derives du creme en opacite,
   pour suivre le fond sans introduire de nouvelles couleurs. */
.cta {
  --cta-trait: rgba(243, 242, 237, 0.16);
  --cta-texte-doux: rgba(243, 242, 237, 0.78);

  position: relative;
  /* Le halo deborde volontairement la bande, on le recadre ici. Cela evite
     aussi tout defilement horizontal parasite. */
  overflow: hidden;
  padding-top: var(--sp-section);
  padding-bottom: var(--sp-section);
  background-color: var(--ink);
  color: var(--cream);
}

/* Halo tres dilue derriere le titre, seul ornement de la section.
   Il etait en rgba(68, 148, 112, ...), soit l'ancien vert fige trois fois en
   dur, et sur l'encre il ne se voyait presque pas. Il passe au corail, la
   meme chaleur que le fragment accentue du titre qu'il enveloppe, et il est
   desormais pose par le TOKEN : la teinte vient de var(--corail), c'est
   l'opacite de la couche qui la dilue. Le degre est mesure, 0,18 : au-dela le
   fond local remonte assez pour manger le contraste des capitales mauves
   posees dessus. */
.cta__halo {
  position: absolute;
  top: -180px;
  left: 50%;
  width: 900px;
  height: 620px;
  transform: translateX(-50%);
  pointer-events: none;
  background-image: radial-gradient(closest-side, var(--corail), transparent 78%);
  opacity: 0.18;
}

.cta__conteneur {
  position: relative; /* passe au-dessus du halo */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* 6,90 pour 1 sur l'encre : le mauve est ici une excellente couleur de texte,
   alors qu'il serait illisible sur le creme des sections claires. */
.cta .cta__surtitre {
  color: var(--mauve);
}

/* Le titre porte son saut de ligne a toutes les largeurs : la phrase se coupe
   pile entre la partie neutre et la partie accentuee, et l'echelle de
   base.css garde la seconde ligne dans les 343px utiles a 375px. */
.cta .cta__titre {
  margin-top: var(--sp-titre);
  max-width: 880px;
  color: var(--cream);
}

/* 6,39 pour 1 sur l'encre. Le titre fait 64px, il lui en faudrait 3 : la
   marge est large. */
.cta .cta__accent {
  color: var(--corail);
}

.cta__chapo {
  margin-top: var(--sp-5);
  /* 56 caracteres : trois lignes pleines a 1440px, mesure de lecture
     confortable pour un texte centre. */
  max-width: 56ch;
  font-size: var(--t-corps);
  line-height: var(--t-corps-lh);
  color: var(--cta-texte-doux);
}

/* ---------------------------------------------------------------- le bouton */

.cta__actions {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-7);
}

/* Le bouton n'herite pas de .bouton de base.css : celui-ci fait 48px de haut
   avec 24px de padding a droite, alors qu'ici il faut loger une pastille de
   36px dans une pilule de 56px, ce qui impose un padding droit de 10px.
   Le libelle monte a 19px : le modele pose 20px sur un corps de texte de 16px,
   soit 1,25 fois ; applique a nos 17px cela donnerait 21px, trop lourd sous
   Hw Cigars et Inter melanges, on retient donc la valeur intermediaire. */
.cta__bouton {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  height: 56px;
  padding: 0 10px 0 28px;
  border-radius: var(--r-pill);
  background-color: var(--cream);
  color: var(--ink-strong);
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--transition) ease,
              transform var(--transition) ease;
}

.cta__bouton:hover {
  transform: translateY(-1px);
  background-color: var(--white);
}

/* Pastille ronde d'accent autour de la fleche : c'est le detail structurel
   qui donne son aplomb au bouton final du modele. Elle avance legerement au
   survol, comme un depart de mouvement vers la prise de rendez-vous. */
.cta__pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  background-color: var(--vert);
  transition: background-color var(--transition) ease,
              transform var(--transition) ease;
}

/* --vert et --vert-texte ont desormais la meme valeur : garder le second au
   survol ne changeait plus rien a l'ecran. La pastille bascule donc sur le
   corail sombre, qui donne un retour visible et rappelle l'accent du titre. */
.cta__bouton:hover .cta__pastille {
  background-color: var(--corail-sombre);
  transform: translateX(2px);
}

/* Le SVG de la fleche est noir a la source. Sur le vert plein il faut du
   blanc, d'ou l'inversion par filtre plutot qu'un second fichier.
   La fleche reste blanche au survol : sur --corail-sombre elle tient 6,4 pour
   1. Elle ne serait PAS lisible sur du corail plein (2,6), c'est bien la
   declinaison sombre qui est employee et non l'aplat. */
.cta__fleche {
  width: 16px;
  height: 16px;
  filter: invert(1);
}

/* base.css pose l'anneau de focus en --vert-texte, ce qui convient partout
   sauf ici : sur l'encre ce vert tombe a 1,92 pour 1 et l'anneau disparait au
   moment precis ou il sert. Il prend donc le mauve, 6,90 sur ce fond. */
.cta :focus-visible {
  outline-color: var(--mauve);
}

/* ----------------------------------------------------- les trois modalites */

/* Conditions non tarifaires des propositions. Un filet les separe du bloc
   d'action : c'est de l'information contractuelle, pas de l'argumentaire. */
.cta__modalites {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  width: 100%;
  max-width: 1000px;
  margin-top: var(--sp-8);
  padding-top: var(--sp-7);
  border-top: 1px solid var(--cta-trait);
}

.cta__modalite {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}

.cta__modalite-titre {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--t-micro);
  font-weight: 500;
  line-height: var(--t-micro-lh);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--mauve);
}

/* Point cale sur la ligne du libelle plutot que pose au-dessus : au-dessus il
   flottait sans rien tenir. Corail contre le mauve du libelle : les deux
   accents se repondent sur la meme ligne, a l'echelle du detail. */
.cta__puce {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background-color: var(--corail);
}

.cta__modalite-texte {
  max-width: 30ch;
  font-size: var(--t-petit);
  line-height: var(--t-petit-lh);
  color: var(--cta-texte-doux);
}

/* ==========================================================================
   RUPTURES
   ========================================================================== */

@media screen and (max-width: 991px) {
  .cta__halo {
    top: -150px;
    width: 760px;
    height: 520px;
  }

  .cta .cta__titre {
    max-width: 620px;
  }

  .cta__modalites {
    gap: var(--sp-4);
  }
}

@media screen and (max-width: 767px) {
  .cta .cta__titre {
    max-width: 480px;
  }

  .cta__chapo {
    max-width: 46ch;
  }

  /* Trois colonnes de modalites ne tiennent plus : on empile, et le filet
     superieur se double d'un filet entre chaque ligne pour garder la lecture
     separee. */
  .cta__modalites {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 420px;
  }

  .cta__modalite {
    padding: var(--sp-5) 0;
  }

  .cta__modalite + .cta__modalite {
    border-top: 1px solid var(--cta-trait);
  }

  .cta__modalite:first-child {
    padding-top: 0;
  }

  .cta__modalite:last-child {
    padding-bottom: 0;
  }
}

@media screen and (max-width: 479px) {
  .cta__halo {
    top: -120px;
    width: 500px;
    height: 400px;
  }

  /* Sur 343px de contenu utile, la pilule prend toute la largeur : le libelle
     est en white-space: nowrap et un bouton centre de 240px laisserait deux
     vides sur les cotes qui affaiblissent la fin de page. */
  .cta__actions {
    align-self: stretch;
  }

  .cta__bouton {
    justify-content: space-between;
    width: 100%;
    height: 54px;
    padding: 0 9px 0 22px;
    font-size: var(--t-corps);
  }

  .cta__modalite-texte {
    max-width: none;
  }
}