/* Shared navigation; native scrolling also works without JavaScript. */
.home-carousel { --carousel-gap: 1.5rem; --home-carte-hauteur: 30rem; color: var(--coges-text-primary); }
.home-carousel-track { display: flex; gap: var(--carousel-gap); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; padding-bottom: .5rem; }
.home-carousel-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.home-carousel[data-carousel-ready] .home-carousel-track { scrollbar-width: none; }
.home-carousel[data-carousel-ready] .home-carousel-track::-webkit-scrollbar { display: none; }
.home-carousel-controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.5rem 0 0 auto; width: fit-content; max-width: 100%; padding: 1rem 0 0; border-top: 1px solid var(--coges-border); }
.home-carousel-controls[hidden] { display: none; }
.home-carousel-count { flex-shrink: 0; font-size: .75rem; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: .08em; color: var(--coges-text-secondary); white-space: nowrap; }
.home-carousel-arrows { display: flex; gap: .375rem; }
.home-carousel-arrow { flex-shrink: 0; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid var(--coges-border); border-radius: 50%; background: transparent; color: var(--coges-text-primary); transition: background-color .18s, border-color .18s, color .18s; }
.home-carousel-arrow[aria-disabled="true"] { opacity: .25; cursor: default; }
.home-carousel-arrow:not([aria-disabled="true"]):hover { background: var(--coges-link); border-color: var(--coges-link); color: #fff; }
.home-carousel-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
.home-carousel-dot { display: grid; place-items: center; width: 1.5rem; height: 2.75rem; padding: 0; border: 0; background: transparent; }
.home-carousel-dot[hidden] { display: none; }
.home-carousel-dot span { display: block; width: .25rem; height: .25rem; background: var(--coges-text-secondary); border-radius: 1rem; transition: width .18s, background-color .18s; }
.home-carousel-dot[aria-current="true"] span { width: 1.125rem; height: .1875rem; background: var(--coges-link); }
.home-carousel :focus-visible { outline: 3px solid var(--coges-link); outline-offset: 4px; }
/* Une solution par diapositive : la fiche prend toute la largeur de la piste.
 * Le partage en deux colonnes -- texte a gauche, visuel a droite au-dela de
 * 768 px, comme les cas clients -- vient des classes Bootstrap du gabarit. */
.home-solution { display: flex; }

/* Hauteur plafonnee. Les deux carrousels partagent --home-carte-hauteur : a
 * partir de 768 px, leurs cartes la tiennent exactement, quel que soit le
 * texte saisi dans l'admin. Les limites de lignes laissent passer les textes
 * actuels -- jusqu'a neuf lignes de resume a 800 px -- et ne servent que de
 * garde-fou. En dernier recours, c'est le paragraphe qui retrecit : le titre
 * et le bouton restent toujours visibles. */
.client-story-content h3,
.home-solution-texte h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.client-story-content > p:not(.client-story-result),
.home-solution-texte .card-body > p:not(.home-solution-editeur) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 10; overflow: hidden; }
.client-story-content .client-story-result { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
@media (min-width: 768px) {
  .client-story { height: var(--home-carte-hauteur); }
  .client-story-content { min-height: 0; overflow: hidden; }
  .client-story-content > *,
  .home-solution-texte .card-body > * { flex-shrink: 0; }
  .client-story-content > p:not(.client-story-result),
  .home-solution-texte .card-body > p:not(.home-solution-editeur) { flex-shrink: 1; min-height: 0; }
  .home-solution-texte .card-body { display: flex; flex-direction: column; align-items: start; max-height: var(--home-carte-hauteur); }
  /* La carte porte h-100 (height: 100% !important) : le plafond passe donc
   * par min- et max-height, qui l'emportent sur height. */
  .home-solution .card { min-height: var(--home-carte-hauteur); max-height: var(--home-carte-hauteur); overflow: hidden; }
  .home-solution .card > .row { flex: 1 1 auto; flex-wrap: nowrap; min-height: 0; }
  .home-solution .home-solution-texte { flex: 1 1 0; width: auto; min-width: 0; max-height: 100%; overflow: hidden; }
  /* De 768 a 991 px, la colonne visuelle est une moitie de carte, plus haute
   * que large : l'apercu 6:5 y reste entier, centre sur le fond du film. */
  .home-solution .home-solution-visuel { align-self: stretch; display: flex; align-items: center; }
  .home-solution .home-solution-visuel > * { width: 100%; }
}
@media (min-width: 992px) {
  /* Au-dela, la colonne visuelle n'est plus une moitie de carte, dont les
   * proportions changeraient avec l'ecran (0,98 a 1,35) : sa largeur se
   * deduit de la hauteur, en 6:5, le format de l'apercu et du film. Le texte
   * prend le reste. Les 2 px otes sont les bordures de la carte. */
  .home-solution .home-solution-visuel {
    flex: 0 0 auto;
    width: calc((var(--home-carte-hauteur) - 2px) * 6 / 5);
  }
}
/* Sur telephone, le visuel 9:16 occupe toute la largeur de la carte : le
 * plafond de hauteur essaye le 2026-10-25 le reduisait a une bande etroite
 * entre deux aplats, qui ne se lisait plus comme un format vertical. */
/* Recours, si le visuel manque : le bord du film, sombre ou clair. */
.home-solution-visuel { background: #0d172d; }
[data-coges-theme="light"] .home-solution-visuel { background: #f0f5fe; }
/* Original client layout: photograph and text in separate columns. */
.client-stories { padding-block: clamp(3rem, 6vw, 6rem); }
.client-stories-heading { margin-bottom: 2rem; }
.client-stories-eyebrow { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1rem; color: var(--coges-link); }
/* L'editeur, sous le nom du produit : une mention discrete, en casse normale. */
.home-solution-texte .home-solution-editeur { font-size: .875rem; line-height: 1.5; margin: 0 0 1rem; color: var(--coges-text-secondary); }
/* position: relative borne le lien etire du titre a la carte : toute la
 * carte, photographie comprise, mene au cas, comme une carte Solutions. */
.client-story { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; background: var(--coges-surface); }
.client-story-visual { position: relative; min-height: var(--home-carte-hauteur); overflow: hidden; }
.client-story-visual img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
.client-story-client { position: absolute; left: 1.5rem; bottom: 1.5rem; padding: .65rem 1rem; background: #fff; color: #171a22; font-weight: 600; max-width: calc(100% - 3rem); }
/* Le texte de la carte Solutions reprend celui des cas clients : memes
 * marges, meme surtitre, memes couleurs, et il part du haut de la carte. */
.client-story-content,
.home-solution-texte .card-body { padding: clamp(1.5rem, 4vw, 3.5rem); display: flex; flex-direction: column; align-items: start; }
.home-solution-texte .card-body { color: var(--coges-text-primary); }
.home-solution .home-solution-texte { align-self: stretch; }
.client-stories-stage { position: relative; }
/* Float at the card foot, centered on the column seam, without sizing the card. */
.client-stories-stage > .home-carousel-controls { position: absolute; top: auto; left: calc(100% * 1.1 / 2.1); right: auto; bottom: 3.3rem; transform: translate(-50%, 50%); width: fit-content; max-width: calc(100% - 2rem); margin: 0; padding: .375rem .625rem; gap: .75rem; background: var(--coges-surface); background: color-mix(in srgb, var(--coges-surface) 95%, transparent); border: 1px solid var(--coges-border-soft); border-radius: 3rem; box-shadow: 0 .25rem 1rem #0001; backdrop-filter: blur(8px); }
.client-stories-stage .home-carousel-pagination { flex-wrap: nowrap; }
.client-stories-stage .home-carousel-dot { width: 1.25rem; }
.client-story-content h3,
.home-solution-texte h3 { line-height: 1.35; color: inherit; }
.client-story-content > p,
.home-solution-texte .card-body > p { color: var(--coges-text-secondary); }
.client-story-content .client-story-result { border-left: 3px solid var(--coges-link); padding-left: 1rem; color: inherit; font-weight: 600; }
@media (max-width: 767.98px) {
  .home-carousel-track { --carousel-gap: 1rem; }
  .home-carousel-controls { margin-inline: auto; gap: .5rem; }
  .client-story { grid-template-columns: 1fr; }
  .client-story-visual { min-height: 0; aspect-ratio: 4 / 3; }
  .client-story-client { max-width: calc(100% - 3rem); }
  .client-story-content,
  .home-solution-texte .card-body { padding: 1.5rem; }
  /* Sur telephone, les commandes quittent la surimpression -- a cheval sur le
   * bord, elles sortaient de la carte -- et se placent dessous, comme celles
   * de Nos solutions. */
  .client-stories-stage > .home-carousel-controls { position: static; transform: none; margin: 1rem auto 0; gap: .5rem; }
}
@media (max-width: 359.98px) {
  .client-stories-stage .home-carousel-count { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .home-carousel-arrow, .home-carousel-dot span { transition: none; }
}
/* En fin de feuille, pour l'emporter sur les marges de base ci-dessus. */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* La colonne de texte n'a que 340 px : on reprend un peu de marge, pour
   * que les resumes actuels tiennent sans etre coupes. */
  .client-story-content,
  .home-solution-texte .card-body { padding: 1.5rem 1.75rem; }
  .client-story-content .client-stories-eyebrow,
  .home-solution-texte .home-solution-editeur { margin-bottom: .75rem; }
  .client-story-content .client-story-cta,
  .home-solution-texte .see-more { margin-top: 1rem !important; }
}
/* Rubrique Cas clients : les memes cartes que l'accueil, l'une sous l'autre. */
.client-stories-liste { display: grid; gap: 1.5rem; }
/* Page d'un cas : le resultat valide garde le filet de la carte. */
.clientStoryPage .client-story-result { border-left: 3px solid var(--coges-link); padding-left: 1rem; font-weight: 600; }
/* Page d'un cas : la typographie est celle de .page-body, comme les articles ;
 * seulement de l'air entre les parties du recit. */
.client-story-recit h3:not(:first-child) { margin-top: 2.5rem; }
.client-story-recit h4 { margin-top: 1.75rem; }
/* L'entite qui a realise la mission : l'encadre auteur des Perspectives
 * (.avatar-logo, coges-theme.css) ; « Realise par » en intitule discret. */
.client-story-entite-role { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--coges-text-secondary); margin-bottom: .25rem; }
/* Les puces de theme : sans la marge basse des boutons ni le decalage de 3 px
 * que le theme donne a .cat-label et .tag-label, pour rester sur la ligne. */
.client-story-themes .btn { margin: 0; }
.client-story-themes ul { top: 0; }
/* Categorie et mot-cle forment un seul groupe : peu d'ecart entre eux, un point
 * de separation quand ils tiennent sur la meme ligne, comme les reperes du titre. */
.client-story-themes { gap: .5rem 1rem; }
/* Sur telephone, les deux blocs passent l'un sous l'autre : pas de point en tete de ligne. */
@media (min-width: 576px) {
  .client-story-themes > div + div::before { content: ""; width: .3rem; height: .3rem; margin-right: .5rem; border-radius: 50%; background: currentColor; opacity: .5; }
}
/* Les reperes sous le titre : sur telephone, un par ligne, sans les points
 * qui resteraient seuls en bout de ligne. */
@media (max-width: 575.98px) {
  .client-story-reperes .list-inline-item { display: block; margin-right: 0; }
  .client-story-reperes .client-story-sep { display: none; }
}