/* Feuille MEGGA : ajouts au thème Webflow. Le thème n'est modifié qu'en un point,
   le contraste de trois textes de la page Carrières (voir la fin du fichier).

   Sélecteur de langue EN · FR · ES de la barre de navigation.
   Seul ajout visuel du site : il reprend les jetons du thème (couleurs de la
   barre, tailles, graisse) pour se fondre dans la variante claire comme dans
   la variante sombre, qui redéfinit ces jetons localement. */
.nav_lang {
  display: flex;
  align-items: center;
  gap: var(--size--size-1);
  margin-right: var(--size--size-9);
  font-size: var(--size--size-8);
  font-weight: var(--_typography---font-weight--medium);
  line-height: 1;
}
.nav_lang-link {
  padding: var(--size--size-3) var(--size--size-2);
  border-radius: var(--size--size-2);
  color: var(--_colors---beige--400);
  text-decoration: none;
  transition: color .2s;
}
a.nav_lang-link:hover { color: var(--_colors---grey--600); }
.nav_lang-link.is-current { color: var(--_colors---primary--black); }
a.nav_lang-link:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }

@media screen and (max-width: 991px) {
  .nav_lang { margin-right: var(--size--size-6); margin-left: calc(-1 * var(--size--size-2)); font-size: var(--size--size-9); }
  .nav_lang-link { color: var(--_colors---beige--600); }
}

/* ------------------------------------------------------------------------
   Ajustements de mise en page, chacun limité à un composant.
   Le thème n'est pas modifié : ces règles rattrapent des largeurs où le
   contenu MEGGA (mots plus longs, bouton ajouté) ou un défaut du gabarit
   cassait l'alignement prévu par le design.
   ------------------------------------------------------------------------ */

/* Produits (services/1.html) — entre 992 et ~1110 px, le bouton ajouté
   rend la carte plus haute que la photo carrée : la photo suit la carte. */
@media screen and (min-width: 992px) {
  .services_image-wrap { align-self: stretch; }
}
/* Produits — sur mobile, le recadrage 16:9 coupait la tête sur la photo CRM. */
@media screen and (max-width: 767px) {
  .services_item:nth-child(2) .services_image { object-position: 50% 20%; }
}

/* Travailler avec nous (accueil et pricing.html) — « Platforms » à 64 px
   élargissait la première colonne entre 992 et 1199 px. */
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .pricing_money { font-size: 3.25rem; }
}
/* … et entre 480 et 525 px les cartes débordaient : on empile comme sous 480 px. */
@media screen and (min-width: 480px) and (max-width: 525px) {
  .pricing_plans { display: flex; flex-flow: column; }
}

/* FAQ (faq.html) — SplitText clone chaque ligne d'une question en élément
   frère : sur petit écran la question se coupait en colonnes. */
.faq-v2_list .faq_question-block { flex-wrap: wrap; position: relative; padding-right: 3.5rem; min-height: 2.5rem; align-content: center; row-gap: 0; }
.faq-v2_list .faq_question { flex: 0 0 100%; }
.faq-v2_list .faq_button { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }

/* Contact — sous 480 px l'image disparaissait (défaut du gabarit : SplitText
   l'enveloppe dans une ligne de hauteur nulle). */
@media screen and (max-width: 479px) {
  .contact_img-wrap > .gsap_split_line { position: absolute !important; inset: 0 !important; height: auto !important; }
}

/* Réalisations — libellés blancs lisibles sur les photos claires. */
.case_block .label-plus_text { text-shadow: 0 1px 12px rgba(0, 0, 0, .45); }

/* Produits et accueil — les phrases longues du contenu MEGGA ne finissent pas sur un mot
   seul. Ne change que les coupures de ligne. */
.feature_text, .services_list-items li { text-wrap: pretty; }

/* Carrières — contraste WCAG AA (4,5:1), appliqué à la demande de Julien le
   13.09.2026. Trois textes du gabarit étaient sous le seuil : les descriptions
   des étapes (3,82:1) et les libellés « Step N » (3,81:1) sur la bande sombre,
   le libellé « Foundation » (3,44:1) de la carte claire. */
.section_hiring .hiring_step-desc { color: rgba(255, 255, 255, .6); }
.section_hiring .hiring_step-title-wrap .text-style-label { color: rgba(255, 255, 255, .6); }
.section_cards .cards_head .text-color-grey-250 { color: var(--_colors---beige--400); }

/* Changement de langue (js/megga-langue.js) : un voile de la couleur du fond
   (#f2efe9, celle du body) le temps que la page de l'autre langue arrive. Au
   départ, la page s'y efface ; à l'arrivée, il couvre la page vide du gabarit
   et le repositionnement, puis se lève. Aucune autre navigation n'est touchée. */
.megga-voile { position: fixed; inset: 0; z-index: 999999; pointer-events: none; opacity: 0; transition: opacity .22s ease; }
.megga-voile.is-on { opacity: 1; }
html.megga-arrivee::after { content: ""; position: fixed; inset: 0; z-index: 999999; pointer-events: none; background: #f2efe9; opacity: 1; transition: opacity .35s ease; }
html.megga-arrivee.megga-arrivee-fin::after { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .megga-voile, html.megga-arrivee::after { transition: none; } }

/* Pied de page, sur ordinateur (≥ 992 px) : trois colonnes équilibrées,
   demandées par Julien le 14.09.2026. Le gabarit prévoyait quatre colonnes de
   liens ; il n'en reste que deux (Pages, Bureaux), tassées à gauche. Désormais :
   la newsletter à gauche, les pages centrées sur la page, les bureaux contre
   le bord droit. Tablette et mobile gardent la mise en page du gabarit. */
@media screen and (min-width: 992px) {
  .footer_content { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .footer_links-wrapper { display: contents; }
  .footer_links-main.is-locations { justify-self: end; }
}

/* Accueil, « Our method » (js/megga-methode.js, qui pose .megga-methode) : les
   quatre étapes s'enchaînent toutes les 6 secondes quand la section est à
   l'écran, la barre de l'étape se remplissant pendant ce temps. Sans
   JavaScript, la section garde l'affichage du gabarit. */
/* Seule l'étape active montre son texte ; les autres gardent leur titre et
   leur icône. La hauteur ouverte (--megga-h) est mesurée par le script et
   suit la largeur. !important : les interactions de Webflow écrivent encore
   hauteur et opacité en ligne sur ces éléments, parfois après le script. */
.section_ops.megga-methode .tabs_text-wrap {
  height: 0 !important; opacity: 0 !important;
  transition: height .45s cubic-bezier(.22, .7, .2, 1), opacity .3s ease;
}
.section_ops.megga-methode .w-tab-link.w--current .tabs_text-wrap {
  height: var(--megga-h, auto) !important; opacity: 1 !important;
  transition: height .45s cubic-bezier(.22, .7, .2, 1), opacity .35s ease .1s;
}
.section_ops.megga-methode-sans-transition .tabs_text-wrap { transition: none !important; }
.section_ops.megga-methode .tabs_progress,
.section_ops.megga-methode .tabs_progress.is-active {
  background-color: var(--_colors---white--20);
  background-image: linear-gradient(90deg, var(--_colors---primary--white) var(--megga-p, 0%), transparent var(--megga-p, 0%));
}
.section_ops.megga-methode .w-tab-pane.w--tab-active { animation: megga-methode-fondu .45s ease both; }
/* Étapes inactives estompées, comme le prévoit le gabarit (.tabs_link à 0,4) :
   son animation d'apparition fixe l'opacité des liens à 1 et l'effaçait. */
.section_ops.megga-methode .tabs_link-title-wrap { transition: opacity .3s ease; }
.section_ops.megga-methode .tabs_link:not(.w--current) .tabs_link-title-wrap { opacity: .4; }
.section_ops.megga-methode .tabs_link:not(.w--current):hover .tabs_link-title-wrap { opacity: .7; }
@keyframes megga-methode-fondu { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .section_ops.megga-methode .tabs_text-wrap { transition: none; }
  .section_ops.megga-methode .w-tab-pane.w--tab-active { animation: none; }
}