.elementor-572 .elementor-element.elementor-element-6bc5c1ca{--display:flex;}/* Start custom CSS for html, class: .elementor-element-95c17b6 *//* =========================================================================
   MAZIRAB · À propos · CSS isolé (préfixe mz-about__)
   À coller dans : Elementor > Réglages de la page > Avancé > CSS personnalisé
   (ou dans une balise style du widget HTML). Aucune règle ne sort de .mz-about.
   Réglages courants, dans la racine ci-dessous : couleurs (--mz-*), cadrage du portrait
   (--mz-portrait-y : 0% = haut de la photo, 100% = bas) et --mz-anchor-offset (hauteur à
   laisser sous un menu fixe, pour que les liens d'ancre ne passent pas dessous).
   ========================================================================= */

/* 1. Racine : coupe l'héritage du thème, palette, valeurs qui changent selon l'écran */
.mz-about{
  --mz-blue:#1a3dbe;--mz-blue-light:#2b52d8;--mz-navy:#0d1b2a;--mz-orange:#e87832;
  --mz-muted:#667085;--mz-pale:#f4f6fa;--mz-line:#dfe5f0;
  --mz-portrait-y:20%;
  --mz-label:var(--mz-blue);--mz-accent:var(--mz-blue);--mz-text:var(--mz-muted);--mz-focus:var(--mz-blue-light);
  --mz-gutter:24px;--mz-section-y:90px;--mz-anchor-offset:100px;
  --mz-cols-a:1.05fr .95fr;--mz-cols-b:.8fr 1.2fr;--mz-split-gap:70px;
  --mz-values-cols:2;--mz-roles-cols:2;
  --mz-hero-min:420px;--mz-hero-pt:90px;--mz-hero-pb:60px;--mz-h1-ls:-1.5px;
  --mz-veil:linear-gradient(90deg,rgba(9,24,58,.94) 0%,rgba(9,24,58,.84) 70%,rgba(9,24,58,.6) 100%);
  --mz-steps-pad:30px 30px 26px;--mz-cta-y:70px;
  --mz-portrait-w:420px;--mz-portrait-off:18px;--mz-btn-grow:0;--mz-btn-basis:auto;
  all:initial;
  display:block;display:flow-root;
  isolation:isolate;overflow:hidden;overflow:clip;
  box-sizing:border-box;
  color:var(--mz-navy);background:#fff;
  font:400 16px/1.55 Geist,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

/* 2. Remise à zéro des éléments utilisés. « .mz-about.mz-about » (0,2,0) passe devant
      « .elementor-kit-5 h2 » (0,1,1) ; :where() n'ajoute aucune spécificité. */
.mz-about *,.mz-about ::before,.mz-about ::after{box-sizing:border-box}
.mz-about.mz-about :where(h1,h2,h3,p,ul,ol,li){margin:0;padding:0;color:inherit;font:inherit;letter-spacing:normal;text-transform:none;list-style:none}
.mz-about.mz-about :where(h1,h2,h3){line-height:1.1;text-wrap:balance}
.mz-about.mz-about :where(span,strong){color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit}

/* 3. Structure */
.mz-about .mz-about__wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 var(--mz-gutter)}
.mz-about .mz-about__section{padding:var(--mz-section-y) 0;scroll-margin-top:var(--mz-anchor-offset)}
.mz-about .mz-about__section--alt{background:var(--mz-pale)}
.mz-about .mz-about__section--dark{color:#fff;background:var(--mz-navy);--mz-label:#9db8ff;--mz-accent:#8fb0ff;--mz-text:#bdcbe1;--mz-focus:#fff}
.mz-about .mz-about__split{display:grid;grid-template-columns:var(--mz-cols-a);gap:var(--mz-split-gap);align-items:center}
.mz-about .mz-about__split--leader{grid-template-columns:var(--mz-cols-b)}

/* 4. Titres et textes */
.mz-about .mz-about__label{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--mz-label)}
.mz-about .mz-about__label::before{content:"";width:25px;height:2px;background:currentColor}
.mz-about .mz-about__head{max-width:650px;margin-bottom:38px}
.mz-about .mz-about__title{margin:13px 0 18px;font-size:clamp(28px,4vw,46px);font-weight:900;letter-spacing:-1.2px}
.mz-about .mz-about__hl{color:var(--mz-accent)}
.mz-about .mz-about__copy{max-width:620px;margin-bottom:16px;font-size:16px;color:var(--mz-text)}
.mz-about .mz-about__copy:last-child{margin-bottom:0}

/* 5. Boutons : tout passe par 3 variables, les états :hover / :visited ne peuvent pas être écrasés par le thème */
.mz-about .mz-about__btn{--mz-btn-bg:transparent;--mz-btn-bd:transparent;--mz-btn-fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:var(--mz-btn-grow) 1 var(--mz-btn-basis);
  padding:14px 26px;border-width:2px;border-style:solid;border-radius:4px;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:700;line-height:1;letter-spacing:.4px;text-transform:uppercase}
.mz-about .mz-about__btn,.mz-about .mz-about__btn:is(:hover,:focus,:active,:visited){border-color:var(--mz-btn-bd);background:var(--mz-btn-bg);color:var(--mz-btn-fg);text-decoration:none;box-shadow:none}
.mz-about .mz-about__btn--secondary{--mz-btn-bd:var(--mz-blue);--mz-btn-fg:var(--mz-blue)}
.mz-about .mz-about__btn--white{--mz-btn-bg:#fff;--mz-btn-bd:#fff;--mz-btn-fg:var(--mz-blue)}
.mz-about .mz-about__btn--outline-white{--mz-btn-bd:#fff}
.mz-about .mz-about__actions{display:flex;flex-wrap:wrap;gap:12px}
.mz-about .mz-about__actions--center{justify-content:center}
.mz-about .mz-about__actions--top{margin-top:28px}
.mz-about .mz-about__svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* 6. Bandeau principal : l'image est une vraie balise img (prioritaire), le voile est un pseudo-élément.
      Taille par min/max plutôt que width/height : si le fichier image manque, le navigateur n'affiche pas d'icône « image cassée ». */
.mz-about .mz-about__hero{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:var(--mz-hero-min);color:#fff;background:#09183a;--mz-label:#9db8ff;--mz-focus:#fff}
.mz-about .mz-about__bg{position:absolute;inset:0;z-index:-1;display:block;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:cover}
.mz-about .mz-about__hero::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--mz-veil)}
.mz-about .mz-about__hero-inner{padding-top:var(--mz-hero-pt);padding-bottom:var(--mz-hero-pb)}
.mz-about .mz-about__crumb{margin-bottom:20px}
.mz-about .mz-about__crumb-list{display:flex;flex-wrap:wrap;gap:8px;font-size:12px;color:#ccd8ef}
.mz-about .mz-about__crumb-item+.mz-about__crumb-item::before{content:"\203A";content:"\203A" / "";margin-right:8px}
.mz-about .mz-about__crumb-link{display:block}
.mz-about .mz-about__crumb-link,.mz-about .mz-about__crumb-link:is(:hover,:focus,:active,:visited){color:#fff;background:none;text-decoration:none}
.mz-about .mz-about__h1{max-width:900px;margin:16px 0 18px;font-size:clamp(34px,4.6vw,54px);font-weight:900;letter-spacing:var(--mz-h1-ls)}
.mz-about .mz-about__accent{display:block;color:var(--mz-orange)}
.mz-about .mz-about__lead{max-width:640px;font-size:17px;color:#d9e2f2}

/* 7. Navigation dans la page */
.mz-about .mz-about__jump{background:var(--mz-pale);border-bottom:1px solid var(--mz-line)}
.mz-about .mz-about__jump-list{display:flex;flex-wrap:wrap;gap:6px 28px;padding:15px 0}
.mz-about .mz-about__jump-link{display:block;padding:4px 0;border-bottom:2px solid transparent;font-size:12px;font-weight:700;letter-spacing:.3px}
.mz-about .mz-about__jump-link,.mz-about .mz-about__jump-link:is(:hover,:focus,:active,:visited){color:var(--mz-blue);background:none;text-decoration:none}

/* 8. Histoire : priorités */
.mz-about .mz-about__steps{padding:var(--mz-steps-pad);background:var(--mz-pale);border-left:3px solid var(--mz-blue);border-radius:0 4px 4px 0}
.mz-about .mz-about__steps-title{margin-bottom:20px;font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--mz-blue)}
.mz-about .mz-about__step{display:grid;grid-template-columns:112px 1fr;gap:16px;align-items:baseline;padding:14px 0;border-top:1px solid var(--mz-line)}
.mz-about .mz-about__step:first-child{padding-top:0;border-top:0}
.mz-about .mz-about__step-num{font-size:24px;font-weight:900;line-height:1;color:var(--mz-blue)}
.mz-about .mz-about__step-text{font-size:15px}

/* 9. Notre façon de travailler */
.mz-about .mz-about__values{display:grid;grid-template-columns:repeat(var(--mz-values-cols),1fr);gap:20px}
.mz-about .mz-about__value{padding:30px;background:#fff;border:1px solid var(--mz-line);border-radius:4px}
.mz-about .mz-about__value-num{display:block;margin-bottom:14px;font-size:13px;font-weight:800;letter-spacing:2px;color:var(--mz-blue)}
.mz-about .mz-about__value-title{margin-bottom:10px;font-size:20px;font-weight:800;letter-spacing:-.3px}
.mz-about .mz-about__value-text{font-size:15px;color:var(--mz-muted)}

/* 10. Le mot du dirigeant */
.mz-about .mz-about__portrait{width:100%;max-width:var(--mz-portrait-w)}
.mz-about .mz-about__portrait-img{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center var(--mz-portrait-y);border:0;border-radius:4px;box-shadow:var(--mz-portrait-off) var(--mz-portrait-off) 0 #e8edfb}

/* 11. L'équipe */
.mz-about .mz-about__roles{display:grid;grid-template-columns:repeat(var(--mz-roles-cols),1fr);gap:14px}
.mz-about .mz-about__role{display:flex;align-items:center;gap:14px;padding:20px;font-weight:700;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.18);border-radius:4px}
.mz-about .mz-about__role .mz-about__svg{width:26px;height:26px;color:#9db8ff}

/* 12. Informations légales et appel final */
.mz-about .mz-about__legal{padding:26px 0;background:var(--mz-pale);border-top:1px solid var(--mz-line)}
.mz-about .mz-about__legal-text{font-size:13px;color:var(--mz-muted)}
.mz-about .mz-about__legal-name{font-weight:700;color:var(--mz-navy)}
.mz-about .mz-about__cta{padding:var(--mz-cta-y) var(--mz-gutter);text-align:center;color:#fff;background:var(--mz-blue);--mz-focus:#fff}
.mz-about .mz-about__cta-title{margin-bottom:28px;font-size:clamp(28px,4vw,46px);font-weight:900;letter-spacing:-1px}

/* 13. Clavier */
.mz-about .mz-about__crumb-link:focus-visible,.mz-about .mz-about__jump-link:focus-visible,.mz-about .mz-about__btn:focus-visible{outline:3px solid var(--mz-focus);outline-offset:3px}

/* 14. Écran : quatre seuils. Les media queries ne redéfinissent que des variables. */
@media (max-width:1000px){
  .mz-about{--mz-veil:linear-gradient(rgba(9,24,58,.86),rgba(9,24,58,.86))}
}
@media (max-width:900px){
  .mz-about{--mz-cols-a:1fr;--mz-cols-b:1fr;--mz-split-gap:42px}
}
@media (max-width:700px){
  .mz-about{--mz-values-cols:1}
}
@media (max-width:600px){
  .mz-about{--mz-gutter:18px;--mz-section-y:65px;--mz-hero-min:460px;--mz-hero-pt:70px;--mz-hero-pb:45px;--mz-h1-ls:-1px;
    --mz-steps-pad:24px 20px;--mz-roles-cols:1;--mz-cta-y:60px;--mz-portrait-w:300px;--mz-portrait-off:10px;
    --mz-btn-grow:1;--mz-btn-basis:100%}
}

/* 15. Souris et mouvement : survols seulement avec une vraie souris, animations seulement si autorisées */
@media (hover:hover){
  .mz-about .mz-about__crumb-link:hover{text-decoration:underline}
  .mz-about .mz-about__jump-link:hover{border-bottom-color:var(--mz-blue)}
  .mz-about .mz-about__btn--secondary:hover{--mz-btn-bg:#eef2ff}
  .mz-about .mz-about__btn--white:hover{--mz-btn-bg:#eef2ff;--mz-btn-bd:#eef2ff}
  .mz-about .mz-about__btn--outline-white:hover{--mz-btn-bg:rgba(255,255,255,.14)}
}
@media (prefers-reduced-motion:no-preference){
  .mz-about .mz-about__btn{transition:background-color .2s,border-color .2s,color .2s,transform .2s}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .mz-about .mz-about__btn--white:hover{transform:translateY(-2px)}
}/* End custom CSS */