/*
 * Multimédia Concept - reproduction du design du site historique (template kane)
 * sur Cassiopeia. Fichier user.css : chargé nativement par Cassiopeia, jamais
 * écrasé par les mises à jour Joomla.
 * Palette : fond #111111 / #222222, accent #42c5bf, texte clair.
 */

/* ---------- polices auto-hébergées (aucun appel à Google Fonts) ---------- */
@font-face {
  font-family: 'Open Sans'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(../fonts/open-sans-var-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(../fonts/open-sans-var-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto'; font-style: normal; font-weight: 300; font-display: swap;
  src: url(../fonts/roboto-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto'; font-style: normal; font-weight: 300; font-display: swap;
  src: url(../fonts/roboto-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- base ---------- */
:root {
  --mc-accent: #42c5bf;
  --mc-dark: #111111;
  --mc-darker: #222222;
  --mc-text: #d8d8d8;
}
body.site {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: var(--mc-text);
  background-color: var(--mc-dark);
}
h1, h2, h3, h4, h5, h6 { font-family: 'Open Sans', sans-serif; }
a { color: var(--mc-accent); }
a:hover { color: #66d8d3; }

/* pleine largeur : par defaut .site-grid contraint le composant entre main-start et main-end */
.site-grid .container-component { grid-column: full-start / full-end; }
.site-grid .container-footer { grid-column: full-start / full-end; }

/* neutraliser le cadre clair de Cassiopeia */
.site-grid { gap: 0; }
.container-component, .com-content-article, .container-main { background: transparent; }
.container-component { padding: 0 !important; margin: 0 !important; max-width: none !important; }
main { padding: 0; }
.com-content-article__body { margin: 0; }
.body .grid-child { padding: 0; }
.container-banner, .container-top-a, .container-top-b, .container-bottom-a, .container-bottom-b { display: none; }

/* ---------- entête / navigation ---------- */
.container-header {
  background: rgba(17, 17, 17, .96);
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}
.container-header .grid-child { padding: 0 20px; }
.navbar-brand, .brand-logo, .site-title { display: none; }
.container-nav { padding: 0; }
.mod-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 10px 0;
}
.mod-menu li a {
  display: block;
  padding: 10px 16px;
  color: #ffffff;
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.mod-menu li a:hover, .mod-menu li.active > a { color: var(--mc-accent); }

/* ---------- pages intérieures (mentions légales, CGV) ---------- */
.com-content-article__title {
  color: var(--mc-accent);
  text-align: center;
  font-weight: 800;
  padding: 60px 20px 0;
}
.mc-legal-wrap, .com-content-article > *:not(section) { max-width: 1140px; margin-left: auto; margin-right: auto; }
.com-content-article > p, .com-content-article > h2, .com-content-article > h3, .com-content-article > ul {
  max-width: 1140px; margin-left: auto; margin-right: auto; padding: 0 20px;
}
.com-content-article > h2 { color: var(--mc-accent); font-size: 24px; margin-top: 40px; font-weight: 700; }
.com-content-article > p, .com-content-article > ul { color: var(--mc-text); line-height: 1.75; }
.com-content-article { padding-bottom: 60px; }

/* ---------- sections one-page ---------- */
.mc-section { padding: 100px 20px; }
.mc-dark { background-color: var(--mc-dark); }
.mc-darker { background-color: var(--mc-darker); }
.mc-light { background-color: #ffffff; color: #333333; }
.mc-title {
  text-align: center;
  color: var(--mc-accent);
  font-size: 50px;
  font-weight: 800;
  margin: 0 0 18px;
  line-height: 1.2;
}
.mc-title.mc-left { text-align: left; }
.mc-subtitle {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 50px;
  font-size: 16px;
  line-height: 1.7;
}
.mc-light .mc-subtitle { color: #555555; }

/* ---------- hero ---------- */
.mc-hero {
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 80px 20px;
  background: linear-gradient(rgba(10, 12, 16, .45), rgba(10, 12, 16, .45)), url(/images/background-multimedia-concept.jpg) center/cover no-repeat;
}
.mc-hero-logo { margin-bottom: 40px; }
.mc-hero h1 {
  color: #ffffff;
  font-weight: 800;
  font-size: 34px;
  line-height: 1.4;
  margin: 0 0 14px;
}
.mc-hero-sub { color: #ffffff; font-size: 25px; font-weight: 300; margin: 0; }
@media (min-width: 1200px) { .mc-hero h1 { white-space: nowrap; } }
@media (max-width: 1199.98px) { .mc-hero h1 { font-size: 2.8vw; } }
@media (max-width: 767.98px) { .mc-hero h1 { font-size: 26px; white-space: normal; } .mc-hero-sub { font-size: 19px; } }

/* ---------- section affichage dynamique (reprend les classes du site J3) ---------- */
.mc-ad-flex { display: flex; flex-wrap: wrap; align-items: center; gap: 40px; max-width: 1100px; margin: 0 auto; text-align: left; }
.mc-ad-txt { flex: 1 1 460px; min-width: 300px; font-size: 16px; line-height: 1.7; color: #333333; }
.mc-ad-img { flex: 1 1 380px; min-width: 280px; text-align: center; }
.mc-ad-img img { max-width: 100%; height: auto; }
.mc-btn-ss { display: inline-block; background-color: var(--mc-accent); color: #111111 !important; padding: 14px 34px; font-weight: 600; text-decoration: none !important; border-radius: 3px; transition: opacity .2s; }
.mc-btn-ss:hover { opacity: .8; }
.mc-ad-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; max-width: 1100px; margin: 45px auto 0; }
.mc-badge { border: 1px solid #e2e2e2; border-radius: 8px; padding: 14px 22px; font-size: 14px; color: #555555; background: #fafafa; text-align: center; }
.mc-badge strong { display: block; font-size: 17px; color: #222222; margin-bottom: 2px; }
.mc-ad-h3 { text-align: center; margin: 45px 0 18px; font-size: 22px; color: #333333; font-weight: 700; }
.mc-ad-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 900px; margin: 0 auto; }
.mc-chip { border: 1px solid var(--mc-accent); border-radius: 20px; padding: 8px 20px; color: #2a8a86 !important; font-size: 14px; font-weight: 600; text-decoration: none !important; transition: all .2s; }
.mc-chip:hover { background-color: var(--mc-accent); color: #111111 !important; }

/* ---------- consulting ---------- */
.mc-2col { display: flex; flex-wrap: wrap; align-items: center; gap: 50px; max-width: 1140px; margin: 0 auto; }
.mc-2col-img { flex: 1 1 380px; min-width: 280px; text-align: center; }
.mc-2col-img img { max-width: 100%; height: auto; }
.mc-2col-txt { flex: 1 1 520px; min-width: 300px; line-height: 1.8; }
.mc-2col-txt .mc-title { font-size: 40px; margin-bottom: 24px; }

/* ---------- formations ---------- */
.mc-feat-wrap { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 40px; max-width: 1200px; margin: 0 auto; }
.mc-feat-col { flex: 1 1 300px; min-width: 260px; display: flex; flex-direction: column; gap: 38px; }
.mc-feat-img { flex: 0 1 360px; min-width: 260px; text-align: center; }
.mc-feat-img img { max-width: 100%; height: auto; }
.mc-feat { display: flex; align-items: center; gap: 18px; }
.mc-feat-right .mc-feat { flex-direction: row-reverse; text-align: right; }
.mc-feat-ico {
  flex: 0 0 auto;
  width: 64px; height: 64px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--mc-accent);
  border: 1px solid var(--mc-accent);
  border-radius: 50%;
  font-size: 18px;
}
.mc-feat h3 { font-size: 16px; font-weight: 700; color: var(--mc-accent); margin: 0; line-height: 1.4; }

/* ---------- expertise ---------- */
.mc-expertise {
  background: linear-gradient(rgba(10, 12, 16, .62), rgba(10, 12, 16, .62)), url(/images/graphisme-creativite.jpg) 50% 0/cover no-repeat fixed;
  padding-top: 140px; padding-bottom: 140px;
}
.mc-exp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 44px 30px; max-width: 1140px; margin: 0 auto; text-align: center; }
.mc-exp img { border-radius: 50%; margin-bottom: 14px; }
.mc-exp h3 { color: #ffffff; font-size: 26px; font-weight: 800; margin: 0 0 8px; }
.mc-exp p { color: #e6e6e6; font-weight: 600; font-size: 14px; margin: 0; }



/* ---------- contact + formulaire ---------- */
#contact .mc-subtitle a { color: var(--mc-accent); text-decoration: none; }
#div_form_contact { max-width: 900px; margin: 0 auto; text-align: left; }
#div_form_contact .row-fluid { display: flex; flex-wrap: wrap; gap: 0 20px; }
#div_form_contact .contact-label, #div_form_contact .contact-message { flex: 1 1 220px; margin-bottom: 16px; padding: 0; }
#div_form_contact label { display: block; color: #ffffff; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
#div_form_contact .star { color: var(--mc-accent); }
#div_form_contact input[type="text"], #div_form_contact input[type="email"], #div_form_contact textarea {
  width: 100%;
  background: #2b2b2b;
  border: 1px solid #3d3d3d;
  border-radius: 3px;
  color: #ffffff;
  padding: 10px 12px;
  font-size: 15px;
}
#div_form_contact input:focus, #div_form_contact textarea:focus { outline: none; border-color: var(--mc-accent); }
#div_form_contact textarea { min-height: 140px; }
#div_form_contact fieldset { border: 0; padding: 0; line-height: 1.5 !important; }
#div_form_contact .btn.validate {
  background: var(--mc-accent);
  border: 0;
  color: #111111;
  font-weight: 700;
  padding: 13px 40px;
  border-radius: 3px;
}
#div_form_contact .btn.validate:hover { opacity: .85; }

/* ---------- pied de page ---------- */
.container-footer { background: #0c0c0c; padding: 0; }
.container-footer .grid-child { padding: 0; }
.mc-footer { text-align: center; padding: 45px 20px 30px; }
.mc-footer-logo { margin-bottom: 18px; }
.mc-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 34px; margin-bottom: 16px; }
.mc-footer-links a { color: var(--mc-text); text-decoration: none; font-size: 14px; }
.mc-footer-links a:hover { color: var(--mc-accent); }
.mc-footer-copy { color: #777777; font-size: 13px; margin: 0; }

/* ---------- bandeau cookies ---------- */
.mc-ck-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  background: #111111;
  border-top: 1px solid #2c2c2c;
  padding: 16px 22px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 26px;
}
.mc-ck-text { color: #ffffff; font-size: 14px; margin: 0; max-width: 760px; }
.mc-ck-text a { color: var(--mc-accent); }
.mc-ck-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.mc-ck-btn {
  background: var(--mc-accent); color: #000000;
  border: 2px solid var(--mc-accent); border-radius: 3px;
  font-weight: 700; font-size: 13px; padding: 9px 18px; cursor: pointer;
}
.mc-ck-btn.mc-ck-alt { background: #111111; color: var(--mc-accent); }
.mc-ck-btn:hover { filter: opacity(.75); }
.mc-ck-modal {
  position: fixed; inset: 0; z-index: 1001;
  background: rgba(0, 0, 0, .65);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.mc-ck-modal-box { background: #1c1c1c; border-radius: 6px; max-width: 640px; width: 100%; max-height: 85vh; overflow-y: auto; padding: 26px 30px; }
.mc-ck-modal-box h3 { color: var(--mc-accent); margin-top: 0; }
.mc-ck-cat { margin: 18px 0; }
.mc-ck-cat label { color: #ffffff; }
.mc-ck-cat p { color: #bbbbbb; font-size: 13px; margin: 6px 0 0; }
.mc-ck-float {
  position: fixed; left: 14px; bottom: 14px; z-index: 999;
  background: #111111; color: var(--mc-accent);
  border: 1px solid var(--mc-accent); border-radius: 3px;
  font-weight: 700; font-size: 12px; padding: 8px 14px; cursor: pointer;
}
[hidden] { display: none !important; }

/* ---------- divers ---------- */
.mod-languages, .container-search { display: none; }
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 70px; }

/* ================= v2 : retours de validation visuelle ================= */

/* ---------- navigation : une seule ligne ---------- */
.mod-menu { flex-wrap: nowrap; overflow-x: auto; justify-content: center; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mod-menu::-webkit-scrollbar { display: none; }
.mod-menu li { flex: 0 0 auto; }
.mod-menu li a { white-space: nowrap; }
@media (max-width: 1199.98px) { .mod-menu { justify-content: flex-start; padding-left: 6px; } .mod-menu li a { padding: 10px 11px; font-size: 13px; } }

/* ---------- mises en forme de texte (reprises du site historique) ---------- */
.mc-hl { background-color: var(--mc-accent); color: #111111; padding: 3px 6px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.mc-accent-b { color: var(--mc-accent); font-weight: 700; }
.mc-accent-big { color: var(--mc-accent); font-size: 23px; }

/* ---------- apparitions au defilement ---------- */
.mc-anim { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s ease; will-change: opacity, transform; }
.mc-anim[data-anim="fade-down"] { transform: translateY(-26px); }
.mc-anim[data-anim="fade-left"] { transform: translateX(-36px); }
.mc-anim[data-anim="fade-right"] { transform: translateX(36px); }
.mc-anim[data-anim="zoom-in"] { transform: scale(.88); }
.mc-anim.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .mc-anim { opacity: 1; transform: none; transition: none; } }

/* ---------- carrousels en fondu (mecanisme commun Expertise / Clients) ---------- */
.mc-slider { position: relative; margin: 0 auto; text-align: center; }
.mc-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; pointer-events: none; }
.mc-slide.is-active { position: relative; opacity: 1; pointer-events: auto; }
.mc-dots { display: flex; justify-content: center; gap: 10px; margin-top: 34px; }
.mc-dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid #ffffff; background: transparent; cursor: pointer; padding: 0; }
.mc-dot.is-active { background: var(--mc-accent); border-color: var(--mc-accent); }
/* habillage Expertise */
.mc-exp-slider { max-width: 860px; }
.mc-exp-slider .mc-slide img, .mc-exp-ico { border-radius: 50%; margin-bottom: 14px; }
.mc-exp-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px;
  background: var(--mc-accent); color: #111111; font-size: 30px;
}
.mc-exp-slider h3 { color: #ffffff; font-size: 34px; font-weight: 800; margin: 0 0 10px; }
.mc-exp-slider .mc-slide p { color: #e6e6e6; font-weight: 600; font-size: 15px; margin: 0; }
@media (max-width: 767.98px) { .mc-exp-slider h3 { font-size: 26px; } }
/* habillage Clients : une planche de logos a la fois, en grand comme sur le site historique */
.mc-clients-slider { max-width: 1100px; }
.mc-clients-slider .mc-slide img { max-width: 100%; height: auto; }
.mc-clients-slider .mc-dot { border-color: #888888; }

/* ================= v4 : retours post-bascule ================= */

/* menu : seul le scroll-spy decide de l etat actif (neutralise default/aria-current de Joomla) */
.mod-menu li a, .mod-menu li.default > a, .mod-menu li.active > a, .mod-menu a[aria-current] {
  color: #ffffff; text-decoration: none; border-bottom: 2px solid transparent;
}
.mod-menu li a.is-current { color: var(--mc-accent); border-bottom-color: var(--mc-accent); }
.mod-menu li a:hover { color: var(--mc-accent); }

/* apparition avec rebond (image formations, comme le bounceIn du site historique) */
.mc-anim[data-anim="bounce-in"] { transform: scale(.3); opacity: 0; transition: none; }
.mc-anim[data-anim="bounce-in"].is-in { animation: mc-bounce-in .9s cubic-bezier(.215,.61,.355,1) both; }
@keyframes mc-bounce-in {
  0% { opacity: 0; transform: scale(.3); }
  50% { opacity: 1; transform: scale(1.05); }
  70% { transform: scale(.95); }
  100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .mc-anim[data-anim="bounce-in"], .mc-anim[data-anim="bounce-in"].is-in { animation: none; opacity: 1; transform: none; }
}

/* message de confirmation apres envoi du formulaire */
.mc-toast {
  position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%);
  z-index: 1200; max-width: 520px; width: calc(100% - 40px);
  background: #1c1c1c; color: #ffffff;
  border: 1px solid var(--mc-accent); border-radius: 6px;
  padding: 18px 46px 18px 22px; font-size: 15px; line-height: 1.6;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .5);
}
.mc-toast strong { color: var(--mc-accent); }
.mc-toast-close {
  position: absolute; top: 8px; right: 12px;
  background: none; border: 0; color: #999999; font-size: 22px; cursor: pointer; padding: 0;
}
.mc-toast-close:hover { color: #ffffff; }

/* ================= v5 : mises en avant sur fond clair (section affichage dynamique) ================= */
/* le turquoise #42c5bf manque de contraste sur blanc : declinaison foncee, coherente avec les chips */
.mc-light .mc-accent-b { color: #2a8a86; font-weight: 700; }
.mc-light .mc-accent-big { color: #2a8a86; font-size: 21px; }
.mc-light .mc-subtitle strong { color: #222222; }
/* le surlignage garde le turquoise plein, lisible sur les deux fonds */
.mc-light .mc-hl { background-color: var(--mc-accent); color: #111111; }

/* ================= v6 : mobile, header, cascades, micro-interactions ================= */

/* ---------- header : flex + logo qui apparait apres le hero ---------- */
.container-header { display: flex; align-items: center; justify-content: center; min-height: 56px; transition: box-shadow .3s; }
.container-header .grid-child { padding: 0 14px; }
.navbar-brand { display: block; }
.navbar-brand .brand-logo img.logo { height: 34px; width: auto; display: block; }
@media (min-width: 1200px) {
  .navbar-brand { opacity: 0; transform: translateX(-8px); transition: opacity .35s, transform .35s; pointer-events: none; }
  .container-header.is-scrolled .navbar-brand { opacity: 1; transform: none; pointer-events: auto; }
  .container-header.is-scrolled { box-shadow: 0 2px 14px rgba(0, 0, 0, .45); }
  .container-header { justify-content: space-between; }
  .container-header::after { content: ""; width: 103px; } /* equilibre le logo pour garder la nav centree */
}

/* ---------- burger + navigation mobile ---------- */
.mc-burger { display: none; }
@media (max-width: 1199.98px) {
  .container-header { justify-content: space-between; }
  .mc-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 10px;
    background: none; border: 0; cursor: pointer; margin-right: 8px;
  }
  .mc-burger span { display: block; height: 2px; width: 100%; background: #ffffff; border-radius: 1px; transition: transform .3s, opacity .3s; }
  body.mc-nav-open .mc-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.mc-nav-open .mc-burger span:nth-child(2) { opacity: 0; }
  body.mc-nav-open .mc-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .container-nav {
    position: fixed; top: 56px; left: 0; right: 0; z-index: 99;
    background: rgba(17, 17, 17, .98);
    max-height: 0; overflow: hidden;
    transition: max-height .35s ease;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .5);
  }
  body.mc-nav-open .container-nav { max-height: 70vh; overflow-y: auto; }
  .mod-menu { flex-direction: column; align-items: stretch; padding: 8px 0 14px; gap: 0; overflow: visible; }
  .mod-menu li a { padding: 14px 24px; font-size: 15px; border-bottom: 0; border-left: 3px solid transparent; }
  .mod-menu li a.is-current { border-left-color: var(--mc-accent); border-bottom: 0; }
}

/* ---------- hero : entree orchestree + zoom lent du fond ---------- */
.mc-hero { position: relative; overflow: hidden; }
.mc-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(rgba(10, 12, 16, .45), rgba(10, 12, 16, .45)), url(/images/background-multimedia-concept.jpg) center/cover no-repeat;
  animation: mc-kenburns 22s ease-in-out infinite alternate;
}
.mc-hero { background: #0a0c10; } /* le fond visuel est porte par ::before */
.mc-hero > * { position: relative; z-index: 1; }
@keyframes mc-kenburns { from { transform: scale(1); } to { transform: scale(1.07); } }
.mc-hero .mc-anim > * { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.mc-hero .mc-anim.is-in > *:nth-child(1) { transition-delay: .05s; }
.mc-hero .mc-anim.is-in > *:nth-child(2) { transition-delay: .25s; }
.mc-hero .mc-anim.is-in > *:nth-child(3) { transition-delay: .45s; }
.mc-hero .mc-anim.is-in > * { opacity: 1; transform: none; }

/* ---------- apparitions en cascade (features, badges, chips) ---------- */
.mc-anim .mc-feat, .mc-ad-badges.mc-anim .mc-badge {
  opacity: 0; transform: translateY(16px);
  transition: opacity .55s ease, transform .55s ease;
}
.mc-anim.is-in .mc-feat, .mc-ad-badges.mc-anim.is-in .mc-badge { opacity: 1; transform: none; }
.mc-anim.is-in > .mc-feat:nth-child(1), .mc-ad-badges.mc-anim.is-in .mc-badge:nth-child(1) { transition-delay: .05s; }
.mc-anim.is-in > .mc-feat:nth-child(2), .mc-ad-badges.mc-anim.is-in .mc-badge:nth-child(2) { transition-delay: .18s; }
.mc-anim.is-in > .mc-feat:nth-child(3), .mc-ad-badges.mc-anim.is-in .mc-badge:nth-child(3) { transition-delay: .31s; }
.mc-anim.is-in > .mc-feat:nth-child(4), .mc-ad-badges.mc-anim.is-in .mc-badge:nth-child(4) { transition-delay: .44s; }

/* ---------- micro-interactions ---------- */
.mc-badge { transition: transform .25s, box-shadow .25s; }
.mc-badge:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0, 0, 0, .10); }
.mc-2col-img img, .mc-feat-img img, .mc-ad-img img { transition: transform .4s ease; }
.mc-2col-img:hover img, .mc-feat-img:hover img, .mc-ad-img:hover img { transform: scale(1.025); }
.mc-feat-ico { transition: background-color .25s, color .25s; }
.mc-feat:hover .mc-feat-ico { background-color: var(--mc-accent); color: #111111; }

/* ---------- descriptions des formations ---------- */
.mc-feat-txt p { margin: 6px 0 0; font-size: 13px; color: #9a9a9a; line-height: 1.5; }

/* ---------- footer : coordonnees ---------- */
.mc-footer-coord { color: #999999; font-size: 13px; margin: 0 0 8px; }
.mc-footer-coord a { color: var(--mc-accent); text-decoration: none; }

/* ---------- bouton remonter en haut ---------- */
.mc-top {
  position: fixed; right: 16px; bottom: 16px; z-index: 998;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(17, 17, 17, .9); color: var(--mc-accent);
  border: 1px solid var(--mc-accent); font-size: 18px; cursor: pointer;
  transition: background-color .25s, color .25s;
}
.mc-top:hover { background: var(--mc-accent); color: #111111; }

/* ---------- accessibilite : tout debrayer en mouvement reduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .mc-hero::before { animation: none; }
  .mc-hero .mc-anim > *, .mc-anim .mc-feat, .mc-ad-badges.mc-anim .mc-badge { opacity: 1; transform: none; transition: none; }
  .container-nav { transition: none; }
}

/* ================= v7 : carrousel clients soigne + animations rejouables ================= */

/* planches presentees en carte : cadre blanc, coins arrondis, ombre profonde */
.mc-clients-slider { padding: 0 54px; }
.mc-clients-slider .mc-slide img {
  border-radius: 10px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
  display: block;
  margin: 0 auto;
}
/* entree glissee-fondue de la planche active */
.mc-clients-slider .mc-slide.is-active { animation: mc-slide-in .65s ease both; }
@keyframes mc-slide-in {
  from { opacity: 0; transform: translateX(46px); }
  to { opacity: 1; transform: none; }
}

/* fleches de navigation */
.mc-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(17, 17, 17, .55); color: #ffffff;
  border: 1px solid rgba(255, 255, 255, .35);
  font-size: 16px; line-height: 1; cursor: pointer;
  transition: background-color .25s, border-color .25s, color .25s;
}
.mc-arrow:hover { background: var(--mc-accent); border-color: var(--mc-accent); color: #111111; }
.mc-arrow-prev { left: 0; }
.mc-arrow-next { right: 0; }
@media (max-width: 767.98px) {
  .mc-clients-slider { padding: 0 40px; }
  .mc-arrow { width: 34px; height: 34px; font-size: 13px; }
}

/* les fleches ne concernent que le slider clients ; garde-fou si ajoutees ailleurs */
.mc-exp-slider .mc-arrow { display: none; }

/* animations rejouables : le retrait de .is-in reprepare l etat initial sans transition
   visible pendant le defilement sortant */
.mc-anim:not(.is-in) { transition-duration: 0s; }
.mc-anim:not(.is-in) .mc-feat, .mc-ad-badges.mc-anim:not(.is-in) .mc-badge { transition-duration: 0s; }
.mc-hero .mc-anim:not(.is-in) > * { transition-duration: 0s; }

@media (prefers-reduced-motion: reduce) {
  .mc-clients-slider .mc-slide.is-active { animation: none; }
}

/* ================= v8 : pied de page centre ================= */
/* Cassiopeia met le footer en flex space-between : le module cookies (contenu fixed,
   sans emprise visuelle) occupait la premiere colonne et poussait le pied de page a droite */
.footer .grid-child { display: block; padding: 0; }
.footer .mod-custom { width: 100%; }

/* ================= v9 : telephone en-tete, CTA devis, page 404 ================= */

/* telephone dans la barre (position search de Cassiopeia, reactivee) */
.container-search { display: block; }
.mc-header-tel {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--mc-accent) !important; text-decoration: none;
  font-family: 'Open Sans', sans-serif; font-weight: 700; font-size: 14px;
  white-space: nowrap; padding: 10px 14px;
}
.mc-header-tel:hover { color: #ffffff !important; }
@media (min-width: 1200px) {
  .container-nav { display: flex; align-items: center; }
  .container-header::after { content: none; } /* le telephone remplace l equilibrage */
}
@media (max-width: 1199.98px) {
  /* sur mobile le telephone rejoint le panneau du menu */
  .container-search { border-top: 1px solid #2a2a2a; }
  .mc-header-tel { padding: 14px 24px; display: flex; }
}

/* CTA devis */
.mc-cta-row { text-align: center; margin: 40px 0 0; }
.mc-btn-outline { background: transparent; color: var(--mc-accent) !important; border: 2px solid var(--mc-accent); }
.mc-btn-outline:hover { background: var(--mc-accent); color: #111111 !important; opacity: 1; }

/* page 404 aux couleurs du site */
.error_site { background-color: var(--mc-dark); }
.error_site .site-grid { min-height: 55vh; }
.error_site .page-header { color: var(--mc-accent); text-align: center; font-weight: 800; padding: 70px 20px 0; }
.error_site .card { background: transparent; border: 0; color: var(--mc-text); max-width: 760px; margin: 0 auto; text-align: center; }
.error_site .card-body { color: var(--mc-text); }
.error_site .card a { color: var(--mc-accent); }

/* ================= v10 : menu complet + telephone qui cohabitent ================= */
@media (min-width: 1200px) {
  /* le menu garde la priorite d espace, le telephone ne le compresse plus */
  .container-nav { flex: 1 1 auto; min-width: 0; justify-content: center; }
  .mod-menu { flex: 0 1 auto; overflow-x: visible; }
  .mod-menu li a { padding: 10px 12px; font-size: 13.5px; }
  .container-search { flex: 0 0 auto; }
  .mc-header-tel { font-size: 13px; padding: 10px 10px; }
}

/* ================= v11 : barre de navigation stable, sans debordement ================= */

/* filet global : rien ne doit provoquer de defilement horizontal de la page */
body.site { overflow-x: hidden; }

@media (min-width: 1200px) {
  /* logo et telephone sortent du flux : le menu seul dicte la largeur, centre, sans compression */
  .container-header { position: sticky; }
  .navbar-brand { position: absolute; left: 20px; top: 11px; }
  .container-search { position: absolute; right: 16px; top: 0; display: none; }
  .container-nav { flex: 1 1 auto; justify-content: center; }
  .mod-menu { flex-wrap: nowrap; overflow: visible; justify-content: center; }
  .mod-menu li a { padding: 10px 10px; font-size: 13px; }
}
/* le telephone n apparait dans la barre que lorsqu il y a reellement la place */
@media (min-width: 1440px) {
  .container-search { display: block; }
  .mod-menu li a { padding: 10px 13px; font-size: 14px; }
}

/* ================= v12 : logo header reellement visible + centrage exact ================= */
/* la regle historique ".navbar-brand, .brand-logo { display:none }" n etait levee
   que pour .navbar-brand : le lien .brand-logo restait masque, logo invisible */
.navbar-brand .brand-logo { display: block; }
@media (min-width: 1200px) {
  /* le conteneur vide du logo ne doit plus decaler le menu du centre */
  .container-header { justify-content: center; }
  .container-header > .grid-child:not(.container-nav) { position: absolute; left: 20px; top: 11px; padding: 0; }
  .navbar-brand { position: static; }
}