/* ============================================================
   conseil.kompto.com — ajouts propres au site Conseil.
   Ne contient QUE ce qui n'existe pas déjà dans custom.css :
   le reste (bandes, cartes, boutons, contacts, pied de page)
   est repris tel quel du site principal, pour que les deux
   sites se ressemblent sans dupliquer une ligne de style.
   ============================================================ */

/* ----- Marque du site -----
   Le logo seul laisserait croire qu'on est sur kompto.com. Le mot
   « Conseil » posé à côté dit lequel des deux sites on regarde, sans
   fabriquer un second logo. */
.navbar-brand .k-marque {
  display: inline-block;
  margin-left: 0.55rem;
  padding-bottom: 0.1rem;
  font-family: 'Jost', sans-serif;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--k-orange2);
  vertical-align: middle;
}

/* ----- Sélecteur de langue dans la barre de navigation ----- */
.k-langues {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin-left: 0.9rem;
  padding-left: 0.9rem;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.k-langue {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  font-family: 'Jost', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: all 0.2s ease;
}

.k-langue:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.k-langue-active {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
}

/* Le menu se replie sous 1200px (navbar-expand-xl), pas sous 992px :
   c'est donc là que le séparateur vertical du sélecteur de langue n'a
   plus de sens. */
@media (max-width: 991.98px) {
  .k-langues {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
    margin-top: 0.6rem;
  }
}

/* ----- Bouton sous le titre d'accueil ----- */
.k-hero-cta {
  margin-top: 1.6rem;
  margin-bottom: 0;
}

/* ----- Les situations d'entrée -----
   Même logique visuelle que les cartes du site principal :
   pastille à pictogramme, titre, une ligne d'explication. */
.k-entrees {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}

/* Ces cartes ne sont pas des liens : elles décrivent une situation, elles ne
   mènent nulle part. Le survol est donc gardé pour le plaisir de l'œil —
   bord orange, légère élévation — mais sans curseur « main », qui
   promettrait un clic qui n'existe pas. */
.k-entree {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem 1.35rem;
  background: #fff;
  border: 1px solid var(--k-border);
  border-radius: 14px;
  transition: all 0.25s ease;
}

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

/* .k-doc vient de custom.css, qui ne prévoit pas de transition : sans cette
   ligne, le survol s'appliquerait d'un coup au lieu de glisser. */
.k-doc {
  transition: all 0.25s ease;
}

/* Trois cas de figure, pas trois étapes : une pastille à pictogramme,
   comme ailleurs sur le site, plutôt qu'un chiffre qui ferait croire à un ordre. */
.k-entree .feature {
  align-self: center;
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  margin-bottom: 0.85rem !important;
}

.k-entree .feature svg {
  width: 19px !important;
  height: 19px !important;
}

.k-entree-titre {
  font-family: 'Jost', sans-serif;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--k-dark);
  margin-bottom: 0.4rem;
}

.k-entree-desc {
  font-family: 'Jost', sans-serif;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--k-muted);
}

/* Six cas en une seule colonne feraient une section interminable sur
   tablette et sur téléphone : deux colonnes tant que la largeur le permet,
   une seule en dessous. */
@media (max-width: 991.98px) {
  .k-entrees { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575.98px) {
  .k-entrees { grid-template-columns: 1fr; }
}

/* ----- Bande sombre -----
   Entre les six situations et les sept domaines, deux grilles de cartes,
   une troisième grille n'apporterait rien et ferait bégayer la page. Cette
   bande dit la même chose sans boîtes : un fond sombre comme le bandeau de
   tarifs du site principal, une phrase qui porte, puis trois colonnes
   séparées par un simple filet. */
/* Le dégradé d'origine virait à peine : la bande paraissait un bloc noir.
   Un foyer orange posé dans l'angle bas-droit rend le virage visible et
   relie la bande au dessin de l'accueil. */
.k-band-sombre {
  background:
    radial-gradient(135% 125% at 100% 100%,
      rgba(240, 106, 18, 0.72) 0%,
      rgba(240, 106, 18, 0.30) 32%,
      rgba(240, 106, 18, 0.06) 58%,
      rgba(240, 106, 18, 0) 74%),
    linear-gradient(150deg, #1a1a2e 0%, #1e1a2b 50%, #2a1a1a 100%) !important;
}

/* Le titre de section est gris très foncé par défaut (règle héritée) :
   sur le bleu nuit de cette bande, il faut le passer en blanc. */
.k-band-sombre h2 {
  color: #fff;
}

.k-sombre-lead {
  max-width: 46rem;
  margin-bottom: 2.25rem;
  font-family: 'Jost', sans-serif;
  font-size: 1.22rem;
  line-height: 1.6;
  color: #fff;
}

/* Deux par rangée et non quatre de front : à quatre colonnes, chaque
   paragraphe tombe à moins de 150 px de large et se lit en colonne de
   journal. Trois colonnes laisseraient le quatrième point seul sur sa
   rangée, au tiers de la largeur. */
.k-raisons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 0;
}

.k-raison {
  padding: 0 1.6rem;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}

/* Celui de gauche ouvre la rangée — pas de filet ; celui de droite la
   ferme — pas de marge perdue sur le bord. */
.k-raison:nth-child(odd) {
  padding-left: 0;
  border-left: none;
}

.k-raison:nth-child(even) {
  padding-right: 0;
}

/* Certains titres tiennent sur deux lignes et d'autres sur une : sans
   cette réserve, les paragraphes d'une même rangée ne démarrent pas à la
   même hauteur et le filet qui les sépare souligne le décalage. */
/* Un h3 depuis que la bande a un titre : les quatre points en dépendent,
   ils en sont les sous-titres. L'interligne est fixé ici parce qu'un titre
   hérite sinon de 1.2, plus serré que le paragraphe qu'il était avant. */
.k-raison-nom {
  min-height: 2.35rem;
  margin-bottom: 0.45rem;
  font-family: 'Jost', sans-serif;
  font-size: 0.98rem;
  line-height: 1.5;
  font-weight: 600;
  color: #fff;
}

.k-raison-desc {
  margin-bottom: 0;
  font-family: 'Jost', sans-serif;
  font-size: 0.86rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
}

/* Les trois langues sont un argument de vente, pas une mention de bas de
   page : un filet les détache des trois colonnes et les met à une taille
   qu'on ne saute pas en lisant. */
.k-sombre-langues {
  margin-top: 2.5rem;
  margin-bottom: 0;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-family: 'Jost', sans-serif;
  font-size: 1.1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
}

.k-sombre-langues b {
  color: var(--k-orange2);
  font-weight: 600;
}

@media (max-width: 767.98px) {
  .k-raisons {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }

  .k-raison {
    padding: 1.4rem 0 0;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }

  .k-raison:first-child {
    padding-top: 0;
    border-top: none;
  }

  /* En colonne unique, les titres se suivent : plus rien à aligner. */
  .k-raison-nom {
    min-height: 0;
  }

  .k-sombre-lead {
    font-size: 1.1rem;
  }
}

/* ----- Encadré technique -----
   Sert au bloc MLI / GAFI : un ton de document, pas de publicité.
   Filet orange à gauche pour le distinguer du texte courant sans
   l'isoler dans une boîte qui serait sautée à la lecture. */
.k-encadre {
  margin-top: 1.5rem;
  padding: 1.15rem 1.35rem;
  background: var(--k-gray-bg);
  border-left: 3px solid var(--k-orange);
  border-radius: 0 10px 10px 0;
}

.k-encadre p {
  font-family: 'Jost', sans-serif;
  font-size: 0.89rem;
  line-height: 1.7;
  color: var(--k-dark);
  margin-bottom: 0.7rem;
}

.k-encadre-fin {
  margin-bottom: 0 !important;
  color: var(--k-muted) !important;
}

/* ----- Bouton d'envoi, centré dans le panneau -----
   Le bouton est un inline-block : il faut le passer en bloc pour que les
   marges automatiques le centrent. Ce centrage valait auparavant sous
   576px seulement. */
#demarrer .btn-dark {
  display: block;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ----- Appel à écrire, sous les six situations -----
   Un bouton et non un lien dans la phrase : c'est la seule sortie de la
   section depuis que les six cartes ne sont plus cliquables. */
.k-entrees-cta {
  margin-top: 1.1rem;
  margin-bottom: 0;
  text-align: center;
}

/* ----- Cibles des liens du menu -----
   La barre est en « sticky » et mesure 111px : sans cette réserve, le haut
   de la section visée se retrouve caché dessous après le saut. 112px est
   la valeur déjà retenue pour #demarrer sur kompto.com, et elle laisse une
   marge sous le seuil du scrollspy (hauteur de barre + 20) : à l'arrivée,
   la section est bien celle qui est surlignée. */
#hero,
#parcours,
#equipe,
#services,
#contact {
  scroll-margin-top: 112px;
}

/* ----- Contacts : la même largeur que le reste de la page -----
   Le bloc débordait la colonne de texte (68rem contre 862 px) et, dans la
   carte de gauche, la moitié droite restait vide. Il tient maintenant dans
   la colonne commune (offset-lg-2 / col-lg-8, posée dans le HTML) ; la
   borne de 68rem n'a donc plus lieu d'être.
   2fr / 3fr : la carte des coordonnées ne prend que ce que son texte
   demande — l'adresse, la plus longue ligne, tient en deux lignes comme
   aujourd'hui — et le formulaire récupère le reste.
   Le plancher de 19.5rem n'est pas décoratif : entre 992 et 1200px, 2fr
   tombait à 224px, l'adresse passait à quatre lignes et le numéro de
   téléphone se coupait avant sa pastille WhatsApp. */
.k-contact-grid {
  max-width: none;
}

/* Sous 992px la grille passe à une colonne (custom.css). La règle ci-dessous
   étant écrite plus tard, il faut la borner, sinon elle l'emporterait. */
@media (min-width: 992px) {
  .k-contact-grid {
    grid-template-columns: minmax(19.5rem, 2fr) minmax(0, 3fr);
  }

  /* La carte garde la hauteur du formulaire, mais son contenu reste en
     haut : le vide va tout en bas au lieu d'être réparti entre adresse,
     email et téléphones. Sans cette ligne, « align-content » vaut
     « normal », donc « stretch » : les lignes auto de la grille se
     partageaient les 160 px d'écart avec le formulaire, et chaque bloc
     traînait une cinquantaine de pixels de vide.
     Écart fixe et non réparti : à hauteur égale avec le formulaire, la
     carte a 160 px de plus que son texte, et les répartir écartait les
     blocs de 74 px. 2.3rem tient le double de l'écart hérité sans aller
     jusque-là ; le reste du vide se range en bas de la carte. */
  .k-contact-cols {
    align-content: start;
    gap: 2.3rem;
  }

  /* Le bouton garde le même écart que les blocs entre eux : la marge
     négative héritée le rapprochait de 12px des téléphones. Sélecteur
     à deux classes, sinon celui de custom.css l'emporte. */
  .k-contact-info .k-contact-actions {
    margin-top: 0;
  }
}

/* ----- Nom de la société dans le panneau contact ----- */
.k-contact-nom {
  font-family: 'Jost', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--k-dark);
  margin-bottom: 1.4rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--k-border);
}

/* ----- Titres du panneau sombre -----
   Le panneau #demarrer a un fond bleu nuit, mais la règle qui
   éclaircit son titre sur le site principal vise « h2.display-5 ».
   Nos titres sont en « fs-4 » : sans ces deux lignes, ils restent
   gris foncé sur bleu nuit, donc illisibles. */
#demarrer h2 {
  color: #fff !important;
}

#demarrer > p {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* ----- Rappel de confidentialité, sous l'accroche du formulaire -----
   Classe à part et non .k-form-note : cette dernière est la mention de
   brouillon, qui disparaîtra quand le formulaire enverra réellement.
   Sélecteur avec #demarrer car « #demarrer > p » fixe déjà la couleur
   en !important : une simple classe ne l'emporterait pas.
   La marge négative annule celle du paragraphe précédent — les deux
   lignes forment un seul chapeau, pas deux paragraphes. */
#demarrer > p.k-form-discretion {
  margin-top: -0.6rem;
  margin-bottom: 0;
  font-size: 0.85rem;
  font-style: italic;
}

/* ----- Repli sans JavaScript -----
   Le paragraphe est dans le formulaire, donc hors de portée de
   « #demarrer > p » : sans cette règle il reste gris foncé sur bleu nuit. */
#demarrer noscript p {
  margin-bottom: 1rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
}

#demarrer noscript a {
  color: #fff;
}

/* ----- Piège à robots dans le formulaire -----
   Hors écran plutôt que « display: none » ou « visibility: hidden » : les
   robots qui valent la peine d'être arrêtés sautent ces deux-là, mais
   remplissent un champ simplement décalé.
   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;
}

/* ----- Message de retour après envoi -----
   custom.css le met en « var(--k-muted) », gris foncé : lisible sur le
   fond clair du site principal, illisible sur le bleu nuit d'ici.
   Centré comme le bouton qu'il suit. */
#demarrer #response_message {
  margin-top: 0.8rem;
  font-family: 'Jost', sans-serif;
  font-size: 0.85rem;
  line-height: 1.5;
  text-align: center;
  color: rgba(255, 255, 255, 0.85) !important;
}

/* ----- Barre de navigation, entre 992 et 1199 px -----
   Six entrées, et des libellés plus longs en anglais et en italien qu'en
   français : laissés libres, ils se coupaient en deux lignes et la barre
   doublait de hauteur. On interdit la coupure — le menu le plus long tient
   alors sur une ligne dès 992 px — et la barre peut se replier au palier
   habituel au lieu de 1200. */
.navbar-nav .nav-link {
  white-space: nowrap;
}

/* Entre 992 et 1199 px la place manque de 56 px : on la reprend sur
   l'espacement, 16 px de chaque cote de chaque lien, et sur le filet qui
   precede les langues. Au-dela de 1199 px tout revient comme avant. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  /* custom.css pose « padding: 0.5rem 1rem !important » sur .nav-link ;
     ce fichier etant intouchable, il faut repondre avec la meme arme. */
  .navbar-nav .nav-link {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  .k-langues {
    margin-left: 0.5rem;
    padding-left: 0.5rem;
  }
}

/* ----- Fenêtre de confirmation d'envoi -----
   Le numéro est donné au format international, pour des visiteurs qui
   appellent de l'étranger : il est trop long pour la largeur de la
   fenêtre et se coupait en deux. */
#apresEnvoiModal a[href^="tel:"] {
  white-space: nowrap;
}

/* ----- Bandeau d'accueil, pleine largeur -----
   Même ossature que l'accueil de kompto.com : #hero est déjà défini dans
   custom.css (pleine largeur, texte à gauche, dessin en fond à droite).
   On ne redéfinit ici que ce qui change d'un site à l'autre — le fichier
   du dessin, son cadrage, et la hauteur de la bande, le site Conseil
   n'ayant pas de capture d'écran à loger à droite. */
#hero {
  min-height: 0;
  padding: 5.5rem 5% 5rem !important;
  border-bottom: none;
}

/* Le décalage de -30px sert, sur kompto.com, à remonter la colonne de
   texte au niveau de la capture voisine. Ici il n'y a pas de voisine. */
#hero > div:first-child {
  margin-top: 0;
}

/* Le dessin est fourni déjà recadré (640x400) : il n'y a plus de
   débordement à compenser, on le pose simplement à droite de la bande,
   à sa hauteur, et il garde son cadrage d'origine. */
#hero::after {
  /* Le tracé vectoriel pesait 954 Ko : trop lourd pour la première image
     d'une page ouverte depuis l'étranger. Il est rendu ici en 1280x800,
     la plus grande taille à laquelle il s'affiche, soit 185 Ko.
     L'original vectoriel est conservé dans _originaux-png. */
  background: url('../assets/piega-B2.webp') no-repeat;
  background-position: right 55px top -22px;
  background-size: auto 100%;
}

/* Le titre et le chapô sont bornés en largeur : au-delà, la ligne devient
   trop longue pour être lue d'un trait, et le texte viendrait buter sur le
   dessin sur les très grands écrans. */
/* Le titre est revenu à deux lignes courtes : il tient à la taille d'origine
   (clamp jusqu'à 2.6rem, héritée de custom.css) sans toucher le dessin. */
#hero h1 {
  max-width: 44rem;
  margin-bottom: 0.65rem;
}

/* La promesse ne faisait pas un bon titre : trop longue, et détachée de la
   première idée. Elle passe en appendice, à la taille du texte courant. */
.k-hero-promesse {
  margin-bottom: 1.3rem;
  font-family: 'Jost', sans-serif;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--k-orange2);
}

#hero p.fs-4 {
  margin-bottom: 0 !important;
  max-width: 34rem;
}

@media (max-width: 991px) {
  #hero {
    padding: 3.5rem 1.5rem 3.25rem !important;
  }

  /* kompto.com masque ce dessin sous 992px et le remplace, derrière la
     capture d'écran, par un second fichier. Le site Conseil n'a pas de
     capture : plutôt que de laisser la bande entièrement blanche, on
     garde le dessin, très atténué, derrière le texte. */
  #hero::after {
    display: block;
    background-position: right -30px center;
    background-size: auto 85%;
    opacity: 0.4;
  }
}

/* Le titre tient sur une ligne de plus en étroit : « Investir » seul,
   puis « en Côte d'Ivoire ». Ce saut n'existe pas au-delà du téléphone. */
.k-saut-mobile {
  display: none;
}

@media (max-width: 576px) {
  .k-saut-mobile {
    display: inline;
  }

  /* Sur un écran étroit, le dessin ne tient pas à côté du texte : il passe
     au-dessus, débordant des deux côtés de l'écran, et le titre vient se
     poser sur sa partie basse, la plus claire. */
  #hero {
    padding: 7rem 1.2rem 2.5rem !important;
  }

  #hero::after {
    background-position: center top -80px;
    background-size: 135% auto;
    opacity: 1;
  }

  /* Le titre est centré sous 576px (règle héritée) : son appendice le suit. */
  .k-hero-promesse {
    text-align: center;
  }

  /* Sur un écran étroit, le bouton d'accueil est centré dans la page,
     comme les deux autres le sont à toutes les largeurs. */
  .k-hero-cta {
    text-align: center;
  }
}