/* ==========================================================================
Cadran Talents — sections basses de l'accueil + pied de page (refonte 2026)
Feuille autonome : aucune classe du template d'origine n'est réutilisée,
tout est préfixé `k-`. Supprimer ce fichier et le ` qui portait le seul bouton de contact devient
une rangée, sinon la pastille se placerait au-dessus du bouton. */
.k-navend {
display: flex;
align-items: center;
gap: clamp(0.5rem, 1.2vw, 1rem);
}
/* Menu mobile : même carte blanche que la liste et le bouton voisins, et même
entrée décalée — une pastille immobile au milieu d'éléments qui montent se
remarquerait immédiatement. */
.c-menu-mobile_nav .k-lang {
--k-lang-bg: #fff;
--k-lang-pill: var(--k-cream);
display: flex;
width: calc(100% - calc(var(--spacing, 0.25rem) * 8));
margin: 0 calc(var(--spacing, 0.25rem) * 4) calc(var(--spacing, 0.25rem) * 2);
padding: 5px;
border-radius: var(--radius-sm, 10px);
font-size: 0.8125rem;
opacity: 0;
transform: translate3d(0, calc(var(--spacing, 0.25rem) * 4), 0);
transition-property: transform, opacity;
transition-duration: var(--transition-duration-fast, 0.4s);
transition-timing-function: var(--ease, ease);
}
html.has-menu-mobile-open .c-menu-mobile_nav .k-lang {
opacity: 1;
transform: translate3d(0, 0, 0);
}
.c-menu-mobile_nav .k-lang__opt {
flex: 1;
text-align: center;
padding-block: 0.6875rem;
border-radius: calc(var(--radius-sm, 10px) - 4px);
}
/* Pied de page : `order` la renvoie en fin de rangée, la barre étant en flex
avec `justify-content: space-between`. */
.k-footer__bar .k-lang {
--k-lang-bg: rgba(232, 238, 245, 0.1);
--k-lang-pill: var(--k-on-navy);
--k-lang-on: var(--k-navy);
--k-lang-off: rgba(232, 238, 245, 0.62);
order: 3;
}
/* -- Mouvement réduit ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
.k-sec *,
.k-footer * {
transition-duration: 0.01ms !important;
}
.k-entry__a:hover,
.k-entry__a:focus-visible {
padding-inline: 0;
}
.k-entry__thumb {
display: none !important;
}
}
/* -- Icône du bouton d'en-tête -------------------------------------------- */
/* Remplace le curseur animé Rive hérité du gabarit. Une pastille et une flèche
disent mieux l'action, reprennent le vocabulaire des flèches des sections, et
retirent au passage la dernière dépendance Rive héritée. Le nom du fichier
d'origine est consigné dans le README, qui lui n'est pas servi. */
.k-cta-icon {
width: 100%;
height: 100%;
display: block;
overflow: visible;
}
.k-cta-icon__disc {
fill: var(--k-azure, #2b8fe0);
transition: fill 0.3s var(--k-ease);
}
.k-cta-icon__arrow {
stroke: #fff;
stroke-width: 2;
transition: transform 0.42s var(--k-ease);
transform-origin: center;
}
/* La flèche avance, le disque fonce : le bouton répond au survol. */
.c-button-quote:hover .k-cta-icon__arrow {
transform: translateX(3px);
}
.c-button-quote:hover .k-cta-icon__disc {
fill: var(--k-deep, #1c6bb8);
}
@media (prefers-reduced-motion: reduce) {
.k-cta-icon__arrow { transition: none; }
}
/* -- Correction : superpositions de l'accueil ----------------------------- */
/* 1. Les quatre tuiles d'arguments sont en `z-index:3`, plusieurs personnages
en `z-index:10` : ils passaient DEVANT et masquaient le début de chaque
ligne de texte. Les tuiles repassent au-dessus. */
.c-homepage-timeline-cards {
z-index: 20;
}
/* 2. Dans l'introduction, le bloc de texte est en `z-index:1` et l'illustration
en `z-index:2`. Sur large écran ils sont côte à côte, mais sous 1000 px ils
se superposent et l'illustration passe sur le chapô. On remonte le texte
au-dessus et on lui donne le fond crème de la section : il reste lisible
quoi qu'il y ait derrière. */
@media (max-width: 999.98px) {
.c-homepage-timeline_intro > .container {
position: relative;
z-index: 4;
}
.c-homepage-timeline_intro > .container > .grid {
background: var(--k-cream);
border-radius: 10px;
padding-block: clamp(1rem, 3vw, 2rem);
}
}
/* -- Correction : en-tête mobile ------------------------------------------ */
/* Mesuré à 485 px : logo 175 px + bloc CTA 245 px = 420 px pour une barre qui
n'en offre que ~350 sur un téléphone de 390 px. L'en-tête débordait.
On raccourcit l'intitulé du bouton — le texte complet reste dans le DOM,
donc le nom accessible du lien ne change pas — et on resserre le logo. */
@media (max-width: 520px) {
.c-menu-mobile_contact {
font-size: 0;
padding-inline: 0.75rem;
white-space: nowrap;
}
.c-menu-mobile_contact::after {
content: "Recruter";
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: -0.02em;
}
}
@media (max-width: 420px) {
.c-menu-mobile_logo .svg-logo,
.c-menu-mobile_logo svg {
max-width: 118px;
}
.c-menu-mobile_bar {
padding-inline: 0.625rem 0.5rem;
}
}
/* -- Correction : repère de défilement du hero ----------------------------- */
/* `.kt-scroll` est en `absolute; bottom:5vh` dans `.c-hero-home`. Ce conteneur
enveloppant toute la page, le repère se retrouvait ancré au bas du document,
par-dessus le pied de page (z-index 4). On le ramène dans le premier écran,
là où il a un sens. */
.kt-scroll {
top: calc(100svh - 14vh);
bottom: auto;
}