/* ============================================================
   site.css — ajouts propres au site unique.
   Chargé après custom.css, qui reste la feuille commune aux deux
   sites et n'est pas modifiée. Ne contient donc QUE ce qui n'existe
   nulle part ailleurs.
   ============================================================ */

/* ----- Barre de navigation, entre 992 et 1199 px -----
   Sept entrées depuis le retour d'« Accueil » : à 992 px il ne restait que
   19 px de marge, et le moindre écart de rendu d'une machine à l'autre
   faisait passer le menu sur deux lignes. On interdit la coupure des
   libellés et on reprend la place sur l'espacement, dans cette seule
   tranche de largeur. Le bouton « Se connecter » est épargné : rogner son
   rembourrage l'écraserait. */
.navbar-nav .nav-link {
  white-space: nowrap;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  /* custom.css pose « padding: 0.5rem 1rem !important » sur .nav-link ;
     ce fichier étant commun aux deux sites, on répond de même. */
  .navbar-nav .nav-link:not(.btn) {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
}

/* ----- Piège à robots du formulaire de contact -----
   Même règle que dans conseil.css, que les pages du site principal ne
   chargent pas. Décalé hors écran plutôt que masqué par « display:none » :
   beaucoup de robots sautent justement les champs en display:none, et le
   piège ne prendrait plus personne.
   Le conteneur est en position absolue, donc hors du flux : il n'occupe
   aucune hauteur entre les deux champs voisins. */
.k-piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ----- Étiquettes de secteur sur les cartes de partenaires -----
   custom.css ne prévoyait qu'une mention unique, « .k-logiciel-secteur ».
   Un éditeur qui couvre une douzaine de métiers en demande plusieurs, et
   plusieurs mentions empilées se liraient comme une liste. Des pastilles
   reprennent la forme des anciens boutons de filtre, qui disparaissent. */
/* Posées sous la description, et poussées en bas de la carte : les séries
   d'étiquettes n'ont pas la même longueur d'un éditeur à l'autre, et sans
   cela elles flottaient chacune à une hauteur différente. */
.k-logiciel-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 1.1rem;
}

@media (min-width: 576px) {
  .k-logiciel-tags {
    margin-top: auto;
    padding-top: 1.1rem;
  }
}

.k-logiciel-tag {
  padding: 0.18rem 0.62rem;
  background: var(--k-gray-bg);
  border: 1px solid var(--k-border);
  border-radius: 20px;
  font-family: 'Jost', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--k-orange);
  white-space: nowrap;
}

/* ----- Titres des deux nouvelles sections de l'accueil -----
   Sans cette règle elles sortaient à 48 px quand le titre d'accueil est
   à 41,6 px : « .display-5 » seul vaut calc(1.425rem + 2.1vw), et c'est
   la page qui le borne. On reprend donc le même bornage que partout
   ailleurs sur le site. */
#aires h2.display-5,
#actualites h2.display-5 {
  color: var(--k-dark) !important;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem) !important;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}

#aires p.fs-4,
#actualites p.fs-4 {
  color: var(--k-muted) !important;
  font-weight: 400 !important;
  font-size: 1.05rem !important;
  line-height: 1.75;
  font-family: 'Jost', sans-serif !important;
  max-width: 54rem;
  margin: 0 auto;
}

/* L'air entre le chapeau et ce qui suit. custom.css le réglait pour le
   seul #parcours : nos deux sections reprennent ses classes mais pas son
   identifiant, et se retrouvaient collées à leurs cartes. Mêmes valeurs,
   pour que le rythme de la page reste le même. */
#aires .k-parcours-intro,
#actualites .k-parcours-intro {
  margin-bottom: 2.75rem;
}

#actualites .k-parcours-cta {
  margin-top: 2.75rem;
}

@media (max-width: 991.98px) {
  #aires .k-parcours-intro,
  #actualites .k-parcours-intro {
    margin-bottom: 2rem;
  }

  #actualites .k-parcours-cta {
    margin-top: 2rem;
  }
}

/* ----- Les trois portes -----
   La bande grise reprend le rôle que tenait le parcours des formalités :
   sans elle, quatre sections blanches se suivaient sans respiration. */
#aires {
  background: var(--k-gray-bg);
}

/* La carte est un lien entier, et non un bloc avec un lien dedans : la
   cible est plus grande, et au clavier il n'y a qu'un arrêt par porte. */
.k-porte {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.9rem 1.6rem 1.6rem;
  background: #fff;
  border: 1px solid var(--k-border);
  border-radius: 16px;
  text-decoration: none;
  transition: all 0.25s ease;
}

.k-porte:hover {
  border-color: var(--k-orange2);
  box-shadow: 0 10px 30px rgba(26, 26, 46, 0.09);
  transform: translateY(-4px);
}

/* L'icône et le nom de l'aire forment un bloc centré, posé au-dessus du
   texte qui, lui, reste aligné à gauche pour se lire.
   « .feature » arrive de custom.css en inline-flex avec 1,2 rem sous lui :
   il faut passer en flex pour que les marges automatiques centrent, et
   resserrer l'écart pour que le nom appartienne visiblement à l'icône. */
.k-porte .feature {
  display: flex !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 0.55rem !important;
}

.k-porte-aire {
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--k-orange);
  margin: 0 0 1.1rem;
}

.k-porte-titre {
  font-family: 'Jost', sans-serif;
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--k-dark);
  margin: 0 0 0.6rem;
}

.k-porte-intro {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--k-muted);
  margin: 0 0 1.1rem;
}

/* Sur trois colonnes, le titre tient sur une ligne dans une carte et sur
   deux dans les autres, et le chapeau fait de même : sans réserve, les trois
   listes à puces démarraient à des hauteurs différentes. Inutile en colonne
   unique, où les cartes se suivent au lieu de se côtoyer. */
@media (min-width: 992px) {
  .k-porte-titre {
    min-height: 2.92rem;
  }

  .k-porte-intro {
    min-height: 2.82rem;
  }
}

/* Une liste à puces dit en quatre lignes ce qu'un paragraphe dirait en
   quatre lignes aussi — mais elle se parcourt du regard. */
.k-porte-liste {
  list-style: none;
  padding: 0;
  margin: 0 0 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.k-porte-liste li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--k-dark);
}

.k-porte-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 0.72rem;
  height: 0.42rem;
  border-left: 2px solid var(--k-orange);
  border-bottom: 2px solid var(--k-orange);
  transform: rotate(-45deg);
}

/* Poussé en bas : les trois liens s'alignent même si les listes n'ont pas
   le même nombre de lignes. */
.k-porte-lien {
  margin-top: auto;
  font-family: 'Jost', sans-serif;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--k-orange-lien);
}

.k-porte-lien::after {
  content: "→";
  display: inline-block;
  margin-left: 0.35rem;
  transition: transform 0.2s ease;
}

.k-porte:hover .k-porte-lien::after {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .k-porte:hover { transform: none; }
  .k-porte:hover .k-porte-lien::after { transform: none; }
}

/* ----- Fil des derniers articles, sur l'accueil -----
   Une bande qui se fait défiler à la main plutôt qu'un carrousel :
   on voit trois articles à la fois au lieu d'un seul, rien ne bouge
   tout seul sous les yeux du lecteur, et sur mobile le geste est
   celui qu'on attend. L'accrochage (scroll-snap) évite de s'arrêter
   au milieu d'une carte. */
.k-fil-zone {
  position: relative;
}

.k-fil {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0.4rem 0.2rem 1.2rem;
  scrollbar-width: thin;
  scrollbar-color: var(--k-border) transparent;
}

.k-fil::-webkit-scrollbar {
  height: 6px;
}

.k-fil::-webkit-scrollbar-thumb {
  background: var(--k-border);
  border-radius: 3px;
}

/* La largeur suit l'écran : trois cartes et un bout de la quatrième,
   ce qui dit au lecteur qu'il y a quelque chose à droite. */
.k-fil-carte {
  flex: 0 0 clamp(16rem, 27vw, 20rem);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--k-border);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  transition: all 0.25s ease;
}

.k-fil-carte:hover {
  border-color: var(--k-orange2);
  box-shadow: 0 8px 24px rgba(26, 26, 46, 0.08);
  transform: translateY(-3px);
}

/* Les illustrations du blog sont carrées : on les recadre en bandeau
   pour que les cartes aient toutes la même tête. */
.k-fil-img {
  aspect-ratio: 16 / 9;
  background: var(--k-gray-bg);
  overflow: hidden;
}

.k-fil-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.k-fil-corps {
  padding: 1.1rem 1.2rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
}

.k-fil-date {
  font-family: 'Jost', sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--k-orange);
  margin: 0;
}

.k-fil-titre {
  font-family: 'Jost', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--k-dark);
  margin: 0;
}

.k-fil-res {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--k-muted);
  margin: 0;
}

/* Les deux flèches ne servent qu'à la souris : au doigt on fait
   glisser, et elles sont donc masquées sous 992 px. */
.k-fil-fleche {
  position: absolute;
  top: 38%;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--k-border);
  background: #fff;
  color: var(--k-dark);
  font-size: 1.1rem;
  line-height: 1;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(26, 26, 46, 0.12);
  cursor: pointer;
  transition: all 0.2s ease;
}

.k-fil-fleche:hover {
  border-color: var(--k-orange2);
  color: var(--k-orange);
}

/* Une flèche qui ne mène nulle part est trompeuse : le script la
   cache quand on est déjà au bout. */
.k-fil-fleche[hidden] {
  display: none !important;
}

.k-fil-prec { left: -0.6rem; }
.k-fil-suiv { right: -0.6rem; }

@media (min-width: 992px) {
  .k-fil-fleche { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .k-fil { scroll-behavior: auto; }
  .k-fil-carte:hover { transform: none; }
}

/* ============================================================
   Mobile : trois blancs de l'accueil, resserrés à 24 px.

   Rien au-delà de 576 px ; le bureau garde ses mesures.

     entre l'écran de l'application et « Maîtrisez »   40 -> 24
     entre « ...travailler avec nous. » et la carte    32 -> 24
     sous le bouton « Tous les articles »              48 -> 24

   Le premier blanc n'est pas une marge posée sous l'image : c'est la
   marge haute de la colonne de texte. Sur téléphone les deux colonnes
   du bandeau sont inversées par « order », l'image passe au-dessus, et
   cette marge se retrouve entre les deux.

   « :not(:only-child) » tient l'accueil et le conseil séparés. Les deux
   pages partagent « #hero », mais l'accueil y met deux colonnes — texte
   et image — là où le conseil n'en a qu'une. Un premier essai sans cette
   précision a descendu le bandeau du conseil de 20 px : la règle y
   trouvait l'unique colonne et lui imposait une marge que le conseil
   avait justement mise à zéro. La forme retenue ne peut pas l'atteindre,
   non par prudence mais par construction — et cette feuille n'est de
   toute façon pas chargée par les pages du conseil.

   Ces trois règles vivent ici et non dans custom.css : site.css se
   charge en dernier, et « #aires .k-parcours-intro » y est déjà défini.
   Une règle identique posée plus haut serait perdante.
   ============================================================ */
@media (max-width: 576px) {

  /* le bandeau : l'image est au-dessus du titre */
  #hero > div:first-child:not(:only-child) {
    margin-top: 1.5rem !important;
  }

  /* l'introduction des trois portes, et celle du fil des articles */
  #aires .k-parcours-intro,
  #actualites .k-parcours-intro {
    margin-bottom: 1.5rem !important;
  }

  /* la fin de la page, sous le bouton */
  section#actualites.py-5 {
    padding-bottom: 1.5rem !important;
  }
}