.elementor-267 .elementor-element.elementor-element-1c7df82{--display:flex;}/* Start custom CSS for html, class: .elementor-element-fa2a055 *//* ================================================================
   SINEQUANONE ENGINEERING — Mission pilotage OPC
   Feuille de style — à lier depuis opc-sinequanone-engineering.html
   Seule image attendue : le hero, via url("#") en section 3.
   Les autres visuels sont des SVG inline dans le HTML.
   ================================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  --blue:#027FFF;
  --blue-dark:#0166CC;
  --blue-deep:#0B5CE0;
  --navy:#034A77;
  --ink:#1A2733;
  --red:#990005;

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

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

  --wrap:1200px;
  --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);text-decoration:none;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,h4{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;
}

/* Titres */
.h-2{font-size:34px;font-weight:600;color:var(--blue);margin:0 0 20px}
.h-2--center{text-align:center}
.h-2--rule::after{
  content:"";display:block;width:52px;height:3px;margin-top:14px;background:var(--blue);
}
.h-2--center.h-2--rule::after{margin-left:auto;margin-right:auto}
.h-3{font-size:20px;font-weight:600;color:var(--blue);margin:0 0 10px}

/* Listes à puces du contenu rédactionnel */
.rte ul{list-style:none;margin:0 0 1.2em}
.rte li{position:relative;padding-left:26px;margin-bottom:.55em}
.rte li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:8px;height:8px;background:var(--blue);
}
.rte .hl{color:var(--blue)}
.rte strong{font-weight:700}

/* Bouton */
.btn{
  display:inline-block;
  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)}

/* ---------- 3. Hero ---------- */
.hero{
  position:relative;
  display:flex;align-items:center;
  min-height:62vh;
  padding:110px 24px 90px;
  background-color:var(--navy);
  /* Image du hero : remplacer url("#") par le fichier réel */
  background-image:url("http://sinequanone-engineering.fr/wp-content/uploads/2026/08/547a17cb-cb45-4905-9063-554160d0cf0c.png");
  background-size:cover;background-position:top;background-repeat:no-repeat;
  overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(3,74,119,.2) 0%,rgba(3,74,119,.62) 100%);
}
.hero-inner{position:relative;max-width:var(--wrap);width:100%;margin:0 auto;text-align:right}
.hero h1{
  font-size:40px;font-weight:500;color:var(--white);
  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);
  text-align:center;
}

/* ---------- 4. Bandeau des activités ---------- */
.activities{border-bottom:1px solid var(--rule);background:var(--white)}
.activities__inner{
  display:flex;align-items:center;gap:18px;
  max-width:var(--wrap);margin:0 auto;padding:16px 24px;
}
.activities__label{
  flex:0 0 auto;
  font-size:12px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--muted);
  padding-right:18px;border-right:1px solid var(--rule);
}
.activities__list{
  display:flex;gap:6px;
  overflow-x:auto;scroll-behavior:smooth;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.activities__list::-webkit-scrollbar{display:none}
.activities__list a{
  flex:0 0 auto;white-space:nowrap;
  font-size:12.5px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;
  color:var(--muted);
  padding:8px 13px;border-radius:3px;
  transition:color .2s var(--ease),background .2s var(--ease);
}
.activities__list a:hover{color:var(--navy);background:var(--panel)}
.activities__list a[aria-current="page"]{color:var(--white);background:var(--blue)}

/* ---------- 5. Définition + encart ---------- */
.define{
  display:grid;grid-template-columns:1.45fr 1fr;gap:40px 50px;align-items:start;
  margin:70px auto 0;
}
.cta-box{
  padding:34px 30px;
  background:var(--panel);
  border-top:4px solid var(--blue);
}
.cta-box h2{font-size:21px;font-weight:600;color:var(--ink);margin-bottom:14px;line-height:1.4}
.cta-box p{font-size:15px}
.cta-box .btn{margin-top:20px}

/* ---------- 6. Trois raisons ---------- */
.reasons{margin:80px auto}
.reasons__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.reason{
  padding:44px 26px;
  background:var(--blue-deep);color:var(--white);
  border-radius:20px;
  transition:transform .3s var(--ease)}
.reason:hover{transform:translateY(-4px)}
.reason h3{font-size:20px;font-weight:600;color:var(--white);margin-bottom:14px}
.reason p{font-size:15px;color:rgba(255,255,255,.92);margin:0}

/* ---------- 7. Bénéfices ---------- */
.benefits{
  display:grid;grid-template-columns:1fr 1fr;gap:40px 50px;align-items:center;
  margin:80px auto;
}
.figure{
  padding:22px;
  background:var(--panel);
  border:1px solid var(--rule);
}
.figure svg{width:100%;height:auto;display:block}

/* ---------- 8. Les quatre tâches ---------- */
.tasks{margin:80px auto}
.tasks__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.task{
  display:flex;flex-direction:column;
  background:var(--white);
  border:1px solid var(--rule);border-radius:5px;
  box-shadow:0 0 10px rgba(0,0,0,.08);
  overflow:hidden;
  transition:box-shadow .3s var(--ease),transform .3s var(--ease);
}
.task:hover{box-shadow:0 4px 22px rgba(0,0,0,.14);transform:translateY(-4px)}
.task__visual{background:var(--panel-tint);padding:20px;border-bottom:1px solid var(--rule)}
.task__visual svg{width:100%;height:auto;display:block}
.task__body{padding:22px 22px 26px}
.task h3{font-size:18px;font-weight:600;color:var(--blue);margin-bottom:10px}
.task p{font-size:14.5px;margin:0}

/* ---------- 9. Méthodologie ---------- */
.method{margin:80px auto}
.method__figure{max-width:900px;margin:0 auto 44px}
.method__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 40px}
.method__grid ol{counter-reset:etape}
.method__grid li{
  position:relative;
  padding-left:44px;margin-bottom:26px;
}
.method__grid li:last-child{margin-bottom:0}
.method__grid li::before{
  counter-increment:etape;
  content:counter(etape,decimal-leading-zero);
  position:absolute;left:0;top:2px;
  width:30px;height:30px;display:grid;place-items:center;
  font-size:12px;font-weight:700;color:var(--white);
  background:var(--blue);
}
.method__grid h3{font-size:16.5px;font-weight:700;color:var(--navy);margin-bottom:5px}
.method__grid p{font-size:14.5px;margin:0}

/* ---------- 10. Outils ---------- */
.tools{background:var(--panel);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:70px 0}
.tools__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tool{
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  padding:30px 26px;
  background:var(--white);
  border:1px solid var(--rule);
}
.tool__icon{width:46px;height:46px;color:var(--blue)}
.tool__icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tool h3{font-size:17px;font-weight:600;color:var(--ink)}
.tool p{font-size:14.5px;color:var(--muted);margin:0}

/* ---------- 11. Pourquoi nous ---------- */
.why{margin:80px auto}
.why__lead{max-width:760px;margin-bottom:34px}
.why__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 40px}
.why__item{padding-left:22px;border-left:3px solid var(--blue)}
.why__item h3{font-size:17px;font-weight:600;color:var(--navy);margin-bottom:7px}
.why__item p{font-size:15px;margin:0}

/* ---------- 12. Appel final ---------- */
.closing{
  background:var(--navy);color:var(--white);
  padding:76px 24px;
  text-align:center;
}
.closing__inner{max-width:760px;margin:0 auto}
.closing h2{font-size:30px;font-weight:600;color:var(--white);margin-bottom:18px}
.closing p{color:rgba(255,255,255,.9)}
.closing strong{color:var(--white)}
.closing .btn{
  margin-top:26px;
  background:var(--white);color:var(--navy);border-color:var(--white);
}
.closing .btn:hover{background:var(--panel-tint);color:var(--navy);border-color:var(--panel-tint)}

/* ---------- 13. Animations ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}
.stagger>*{opacity:0;transform:translateY(18px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.stagger.is-visible>*{opacity:1;transform:none}
.stagger.is-visible>*:nth-child(2){transition-delay:.08s}
.stagger.is-visible>*:nth-child(3){transition-delay:.16s}
.stagger.is-visible>*:nth-child(4){transition-delay:.24s}

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

/* ================================================================
   14. RESPONSIVE
   ================================================================ */
@media (max-width:1024px){
  .hero{min-height:54vh;padding:90px 24px 74px}
  .hero-inner{text-align:center}
  .hero h1{font-size:34px}

  .activities__inner{flex-direction:column;align-items:stretch;gap:10px;padding:14px 18px}
  .activities__label{padding:0 0 8px;border-right:0;border-bottom:1px solid var(--rule)}

  .define{grid-template-columns:1fr;gap:34px;margin-top:52px}
  .reasons,.benefits,.tasks,.method,.why{margin:56px auto}
  .reasons__grid{grid-template-columns:1fr;gap:14px}
  .benefits{grid-template-columns:1fr;gap:30px}
  .tasks__grid{grid-template-columns:repeat(2,1fr)}
  .method__grid{grid-template-columns:1fr;gap:26px}
  .method__figure{margin-bottom:32px}
  .tools{padding:52px 0}
  .tools__grid{grid-template-columns:1fr}
  .why__grid{grid-template-columns:1fr;gap:22px}
  .closing{padding:60px 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:27px}
  .hero-sub{font-size:12px;letter-spacing:1.2px}

  .h-2{font-size:23px;margin-bottom:16px}
  .h-2--rule::after{width:42px;margin-top:11px}
  .h-3{font-size:18px}

  .activities__list a{font-size:11.5px;padding:7px 11px}

  .define{margin-top:42px;gap:28px}
  .cta-box{padding:26px 20px}
  .cta-box h2{font-size:19px}

  .reasons,.benefits,.tasks,.method,.why{margin:46px auto}
  .reason{padding:32px 22px;border-radius:14px}
  .reason h3{font-size:18px}

  .figure{padding:16px}
  .tasks__grid{grid-template-columns:1fr;gap:14px}
  .task__body{padding:20px 18px 22px}

  .method__grid li{padding-left:38px;margin-bottom:22px}
  .method__grid li::before{width:26px;height:26px;font-size:11px}

  .tools{padding:44px 0}
  .tool{padding:24px 20px}

  .why__item{padding-left:16px}

  .closing{padding:52px 18px}
  .closing h2{font-size:23px}
  .closing .btn{width:100%}
  .btn{width:100%;text-align:center}
}

@media (max-width:420px){
  .wrap{padding:0 14px}
  .hero{padding:62px 14px 52px}
  .hero h1{font-size:24px}
  .cta-box{padding:22px 16px}
  .closing{padding:44px 14px}
}

/* ================================================================
   NEUTRALISATION DU SOULIGNEMENT (thème + Elementor)
   ----------------------------------------------------------------
   Deux causes possibles, traitées ici toutes les deux :

   1. Ordre de chargement — le kit Elementor et le thème déclarent leur
      propre règle sur les liens et peuvent être chargés APRÈS cette
      feuille. À spécificité égale, la dernière règle gagne : le
      !important est le seul moyen fiable de reprendre la main.

   2. Propagation — text-decoration n'est pas héritée, elle est PEINTE
      par l'ancêtre sur toute sa descendance. Si un <p>, un <li> ou un
      conteneur Elementor porte un soulignement, écrire
      text-decoration:none sur le <a> enfant ne l'efface pas. Il faut
      couper la décoration sur les blocs porteurs — ce que fait le
      second groupe de sélecteurs.
   ================================================================ */

/* Liens et boutons : aucun soulignement, dans tous les états */
a,
a:link,
a:visited,
a:hover,
a:focus,
a:active,
button,
.btn,
.btn:link,
.btn:visited,
.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;
}

/* Blocs porteurs : on coupe la décoration à la source, sinon elle
   continue d'être peinte sur les liens enfants */
p, li, ul, ol,
h1, h2, h3, h4, h5, h6,
span, address, blockquote, figcaption, label,
.elementor-widget-container{
  text-decoration:none;
}

/* Un élément inline-block ou inline-flex ne reçoit pas la décoration
   peinte par son parent. Les boutons de cette feuille sont déjà en
   inline-flex : on ne touche qu'aux boutons générés par Elementor,
   sinon on écraserait leur alignement d'icône. */
.elementor-button{display:inline-block}

/*
   Pour rétablir le soulignement sur les seuls liens en pleine phrase
   (recommandé en accessibilité : la couleur seule ne suffit pas à
   signaler un lien), décommenter ce bloc :

   p a:not(.btn), li a:not(.btn){
     text-decoration:underline !important;
     text-decoration-thickness:1px;
     text-underline-offset:3px;
   }
*//* End custom CSS */