.elementor-314 .elementor-element.elementor-element-4aecfd6{--display:flex;}/* Start custom CSS for html, class: .elementor-element-17805b5 *//* ================================================================
   SINEQUANONE ENGINEERING — Nos Certifications
   Feuille de style — à lier depuis certifications-sinequanone-engineering.html
   Seule image de décor attendue : le hero, via url("#") en section 3.
   Les logos sont des <img src="#"> à remplacer par les fichiers
   officiels des éditeurs (voir la note dans le HTML).
   ================================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  --blue:#027FFF;
  --blue-hero:#2575E5;
  --blue-dark:#0166CC;
  --navy:#034A77;
  --ink:#1A2733;

  --text:#2E2E2E;
  --muted:#66727D;
  --rule:#E2E8EF;
  --panel:#F7F9FB;
  --white:#fff;

  --ff:"Montserrat","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --wrap:1140px;
  --ease:cubic-bezier(.4,0,.2,1);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:32px;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--ff);
  font-size:16px;font-weight:400;line-height:1.75;
  color:var(--text);background:var(--white);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:rgba(2,127,255,.14);
}
img{max-width:100%;height:auto;display:block;border:0}
a{color:var(--blue);transition:color .2s var(--ease)}
a:hover{color:var(--navy)}
ul{margin:0;padding:0;list-style:none}
p{margin:0 0 1em;overflow-wrap:break-word}
p:last-child{margin-bottom:0}
h1,h2,h3{font-family:var(--ff);margin:0;line-height:1.3;overflow-wrap:break-word}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;width:100%}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- 3. Hero ---------- */
.hero{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  min-height:58vh;
  padding:104px 24px 88px;
  background-color:var(--blue-hero);
  /* Image du hero : remplacer url("#") par le fichier réel */
  background-image:url("http://sinequanone-engineering.fr/wp-content/uploads/2026/08/d1dd9118-ea02-4108-b5a7-669b79d7f941.png");
  background-size:cover;background-position:center;background-repeat:no-repeat;
  overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(3,74,119,.45),rgba(37,117,229,.35));
}
.hero-inner{position:relative;max-width:var(--wrap);width:100%;text-align:center}
.hero h1{
  font-size:72px;font-weight:500;color:var(--white);letter-spacing:1px;
  text-shadow:2px 2px 2px rgba(0,0,0,.3);
}
.hero-sub{
  margin:6px 0 0;
  font-size:20px;font-weight:500;letter-spacing:1.6px;color:var(--white);
  text-shadow:2px 2px 2px rgba(0,0,0,.3);
}

/* ---------- 4. Introduction ---------- */
.intro{max-width:720px;margin:76px auto 0;text-align:center}
.intro h2{font-size:34px;font-weight:600;color:var(--blue);margin-bottom:18px}
.intro h2::after{
  content:"";display:block;
  width:52px;height:3px;margin:14px auto 0;
  background:var(--blue);
}
.intro p{color:var(--text)}

/* ---------- 5. Groupes de certifications ---------- */
.groups{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;
  margin:56px auto 0;align-items:start;
}
.group__title{
  font-size:15px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--navy);
  padding-bottom:12px;margin-bottom:6px;
  border-bottom:1px solid var(--rule);
}
.cert{
  display:grid;grid-template-columns:130px 1fr;
  gap:26px;align-items:center;
  padding:26px 0;
  border-bottom:1px solid var(--rule);
}
.cert:last-child{border-bottom:0}

/* Cadre du logo — neutre, pour accueillir des marques aux formats variés */
.cert__logo{
  display:flex;align-items:center;justify-content:center;
  min-height:88px;padding:14px;
  background:var(--panel);
  border:1px solid var(--rule);
  transition:border-color .3s var(--ease);
}
.cert:hover .cert__logo{border-color:rgba(2,127,255,.4)}
.cert__logo img{max-width:120px;width:100%;height:auto}
/* Repli visible tant que le logo réel n'est pas téléversé */
.cert__logo img[src="#"]{display:none}
.cert__logo .placeholder{
  display:none;
  font-size:11.5px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;
  color:var(--muted);text-align:center;line-height:1.6;
}
.cert__logo img[src="#"] + .placeholder{display:block}

.cert__body h3{
  font-size:17px;font-weight:600;color:var(--ink);
  margin-bottom:6px;
}
.cert__body p{font-size:15px;color:var(--text);margin:0}
.cert__body strong{font-weight:700;color:var(--navy)}

/* ---------- 6. Démarche ---------- */
.approach{
  margin-top:64px;padding:36px 34px;
  background:var(--panel);
  border-left:3px solid var(--blue);
}
.approach h3{font-size:18px;font-weight:600;color:var(--ink);margin-bottom:12px}
.approach p{color:var(--text)}
.approach strong{font-weight:700;color:var(--navy)}

/* ---------- 7. Appel final ---------- */
.closing{
  margin-top:70px;
  padding:64px 24px;
  background:var(--white);
  border-top:1px solid var(--rule);
  text-align:center;
}
.closing__inner{max-width:680px;margin:0 auto}
.closing h2{font-size:26px;font-weight:600;color:var(--ink);margin-bottom:14px}
.closing p{color:var(--muted)}
.btn{
  display:inline-block;
  margin-top:24px;padding:14px 32px;
  font-size:15.5px;font-weight:600;
  color:var(--white);background:var(--blue);
  border:1px solid var(--blue);border-radius:4px;
  transition:background .25s var(--ease),border-color .25s var(--ease);
}
.btn:hover{color:var(--white);background:var(--blue-dark);border-color:var(--blue-dark)}

/* ---------- 8. Animations ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.001ms!important}
  .reveal{opacity:1!important;transform:none!important}
}

/* ================================================================
   9. RESPONSIVE
   ================================================================ */
@media (max-width:1024px){
  .hero{min-height:52vh;padding:88px 24px 72px}
  .hero h1{font-size:52px}

  .intro{margin-top:56px}
  .groups{grid-template-columns:1fr;gap:40px;margin-top:42px}
  .approach{margin-top:44px;padding:30px 26px}
  .closing{margin-top:52px;padding:52px 24px}
}

@media (max-width:767px){
  body{font-size:15px}
  .wrap{padding:0 18px}

  .hero{min-height:auto;padding:72px 18px 60px}
  .hero h1{font-size:38px;letter-spacing:.5px}
  .hero-sub{font-size:12px;letter-spacing:1.2px}

  .intro{margin-top:42px}
  .intro h2{font-size:24px;margin-bottom:14px}
  .intro h2::after{width:42px;margin-top:11px}

  .groups{margin-top:32px;gap:32px}
  .group__title{font-size:14px;letter-spacing:1.1px}
  .cert{grid-template-columns:100px 1fr;gap:18px;padding:20px 0}
  .cert__logo{min-height:74px;padding:11px}
  .cert__body h3{font-size:16px}
  .cert__body p{font-size:14.5px}

  .approach{margin-top:36px;padding:26px 20px}
  .closing{margin-top:42px;padding:44px 18px}
  .closing h2{font-size:22px}
  .btn{width:100%;text-align:center}
}

@media (max-width:420px){
  .wrap{padding:0 14px}
  .hero{padding:62px 14px 52px}
  .hero h1{font-size:32px}
  .cert{grid-template-columns:1fr;gap:14px}
  .cert__logo{max-width:200px}
  .closing{padding:38px 14px}
}

/* ================================================================
   NEUTRALISATION DU SOULIGNEMENT (thème + Elementor)
   Même bloc que sur les autres pages du site. Le !important règle le
   conflit d'ordre de chargement avec le kit Elementor, et le second
   groupe coupe la décoration sur les blocs porteurs — text-decoration
   est peinte par l'ancêtre, elle n'est pas héritée.
   ================================================================ */
a, a:link, a:visited, a:hover, a:focus, a:active,
button, .btn, .btn:hover, .btn:focus,
.elementor a, .elementor-widget-container a,
.elementor-button, .elementor-button:hover{
  text-decoration:none !important;
  -webkit-text-decoration:none !important;
  text-decoration-line:none !important;
  text-underline-offset:0;
}
p, li, ul, ol, h1, h2, h3, h4, h5, h6,
span, address, blockquote, figcaption, label, div, article, section,
.elementor-widget-container{
  text-decoration:none;
}
.elementor-button{display:inline-block}

/*
   Pour rétablir le soulignement sur les seuls liens en pleine phrase
   (recommandé en accessibilité), décommenter :

   .cert__body p a, .approach p a, .intro p a{
     text-decoration:underline !important;
     text-decoration-thickness:1px;
     text-underline-offset:3px;
     text-decoration-color:currentColor !important;
   }
*//* End custom CSS */