.elementor-121 .elementor-element.elementor-element-a50d68a{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-be38ddc *//* POLICES — déclarez Montserrat et Outfit dans
Elementor > Site Settings > Typographie globale.
Elementor les charge alors lui-même : aucun @font-face ici. */
/* ---------- Jetons de marque et socle (aucun sélecteur global) ---------- */
.sqn-abt{
font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
font-size:16px;line-height:1.7;color:#2E2E2E;
-webkit-font-smoothing:antialiased}
.sqn-abt *,.sqn-abt *::before,.sqn-abt *::after{box-sizing:border-box}
.sqn-abt img{max-width:100%;height:auto;display:block}
.sqn-abt a{color:inherit;text-decoration:none;-webkit-text-decoration-color:transparent;text-decoration-color:transparent}
.sqn-abt p{margin:0 0 1em}
.sqn-abt p:last-child{margin-bottom:0}
.sqn-abt h1,.sqn-abt h2,.sqn-abt h3{margin:0;font-weight:700;line-height:1.25;color:#1D8FDB}
.sqn-abt h1{font-size:32px}
.sqn-abt h2{font-size:32px}
.sqn-abt h3{font-size:24px}
.sqn-abt :focus-visible{outline:3px solid #6FB440;outline-offset:3px}
.sqn-abt .sqn-shell{width:100%;max-width:1200px;margin-left:auto;margin-right:auto;
padding-left:20px;padding-right:20px}
.sqn-abt__sec{padding-top:56px;padding-bottom:56px}
.sqn-abt__head{text-align:center;max-width:900px;margin:0 auto 40px}
/* ---------- Boutons ---------- */
.sqn-abt .sqn-btn{display:inline-block;border:0;cursor:pointer;font-family:inherit;font-size:16px;
font-weight:500;line-height:1;padding:16px 30px;border-radius:15px;
background:#053D76;color:#fff;
transition:background .3s cubic-bezier(.22,.61,.36,1),color .3s cubic-bezier(.22,.61,.36,1),
transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .3s cubic-bezier(.22,.61,.36,1)}
.sqn-abt .sqn-btn:hover{background:#1D8FDB;transform:translateY(-2px);
box-shadow:0 8px 20px rgba(5,61,118,.28)}
.sqn-abt .sqn-btn--white{background:#fff;color:#1D8FDB}
.sqn-abt .sqn-btn--white:hover{background:#6FB440;color:#fff;
box-shadow:0 8px 20px rgba(111,180,64,.35)}
.sqn-abt .sqn-btn--ghost{background:transparent;color:#053D76;
box-shadow:inset 0 0 0 2px #053D76}
.sqn-abt .sqn-btn--ghost:hover{background:#053D76;color:#fff;
box-shadow:inset 0 0 0 2px #053D76}
/* ==========================================================================
HERO
========================================================================== */
/* PALETTE — valeurs écrites en clair (plus de variables CSS).
Bleu vif #1D8FDB Navy #053D76 Bleu moyen #14599A
Vert #6FB440 Vert clair #8CCD55 Texte #2E2E2E
Gris fond #F3F6F9 Filets #E2E8EE Sombre #141414
Rayon 15px · Ombre 0 0 10px rgba(0,0,0,.5) · Largeur utile 1200px
Pour changer une couleur : rechercher-remplacer sur son code hexadécimal. */
.sqn-abt__hero{position:relative;z-index:0;overflow:hidden;display:flex;align-items:center;
min-height:68vh;background:#1D8FDB}
.sqn-abt__herobg{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-2}
.sqn-abt__herobg img{width:100%;height:100%;object-fit:cover;object-position:bottom right;
animation:sqnAbtKb 30s ease-in-out infinite alternate}
@keyframes sqnAbtKb{from{transform:scale(1.03)}to{transform:scale(1.1)}}
.sqn-abt__hero::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;
background:linear-gradient(120deg,rgba(29,143,219,.92) 40%,rgba(5,61,118,.7))}
.sqn-abt__heroin{padding-top:110px;padding-bottom:100px;text-align:center;
display:flex;flex-direction:column;align-items:center;gap:20px}
.sqn-abt__heroin h1{color:#fff;max-width:860px}
.sqn-abt__heroin p{color:rgba(255,255,255,.95);max-width:640px;margin:0;font-size:17px}
.sqn-abt__rule{width:70px;height:4px;background:#6FB440;border-radius:4px}
.sqn-up{opacity:0;transform:translateY(22px);animation:sqnAbtUp .8s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes sqnAbtUp{to{opacity:1;transform:none}}
.sqn-d1{animation-delay:.15s}.sqn-d2{animation-delay:.3s}.sqn-d3{animation-delay:.45s}
/* ==========================================================================
MISSION
========================================================================== */
.sqn-abt__split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.sqn-abt__img{width:100%;border-radius:15px;box-shadow:2px 8px 23px 3px rgba(0,0,0,.12)}
.sqn-abt__btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
/* ==========================================================================
POURQUOI NOUS CHOISIR — blocs en alternance
========================================================================== */
.sqn-abt__rows{padding-top:10px}
.sqn-abt__row{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;
padding-top:40px;padding-bottom:40px}
.sqn-abt__row + .sqn-abt__row{border-top:1px solid #E2E8EE}
.sqn-abt__row--alt .sqn-abt__rowimg{order:2}
.sqn-abt__rowimg img{width:100%;border-radius:15px;box-shadow:2px 8px 23px 3px rgba(0,0,0,.12);
transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.sqn-abt__row:hover .sqn-abt__rowimg img{transform:translateY(-6px)}
.sqn-abt__rowtxt h3{color:#1D8FDB;margin-bottom:14px}
.sqn-abt__tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:1.6px;
text-transform:uppercase;color:#6FB440;margin-bottom:10px}
/* ==========================================================================
MÉTHODE — 3 colonnes
========================================================================== */
.sqn-abt__method{background:#F3F6F9}
.sqn-abt__m3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.sqn-abt__mcard{background:#fff;border-radius:15px;padding:30px 26px;
box-shadow:2px 8px 23px 3px rgba(0,0,0,.12);display:flex;flex-direction:column;gap:12px;
transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s cubic-bezier(.22,.61,.36,1)}
.sqn-abt__mcard:hover{transform:translateY(-8px);box-shadow:0 16px 38px rgba(5,61,118,.2)}
.sqn-abt__mnum{display:block;font-size:40px;font-weight:700;line-height:1;color:#4FA9E8}
.sqn-abt__mcard h3{font-size:20px;color:#053D76}
.sqn-abt__mcard p{font-size:15px}
.sqn-abt__mcta{text-align:center;margin-top:36px}
/* ==========================================================================
NOTRE HISTOIRE — frise
========================================================================== */
.sqn-abt__hist{position:relative;z-index:0;overflow:hidden;
padding-top:60px;padding-bottom:60px;color:#fff}
.sqn-abt__histbg{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-2}
.sqn-abt__histbg img{width:100%;height:100%;object-fit:cover}
.sqn-abt__hist::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;
background:linear-gradient(180deg,rgba(5,61,118,.93),rgba(20,89,154,.93))}
.sqn-abt__hist h2{color:#fff}
.sqn-abt__track{display:flex;gap:24px;overflow-x:auto;padding-top:6px;padding-bottom:10px;cursor:grab}
.sqn-abt__track::-webkit-scrollbar{display:none}
.sqn-abt__track.sqn-is-drag{cursor:grabbing}
.sqn-abt__step{flex:0 0 calc((100% - 48px)/3);background:#fff;
border-radius:15px;padding:28px 26px 30px;color:#2E2E2E;
box-shadow:2px 8px 23px 3px rgba(0,0,0,.12);display:flex;flex-direction:column;
transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.sqn-abt__step:hover{transform:translateY(-6px)}
.sqn-abt__year{display:block;font-size:34px;font-weight:700;line-height:1;color:#1D8FDB}
.sqn-abt__bar{width:52px;height:4px;background:#6FB440;border-radius:4px;
margin-top:14px;margin-bottom:16px;transition:width .4s cubic-bezier(.22,.61,.36,1)}
.sqn-abt__step:hover .sqn-abt__bar{width:92px}
.sqn-abt__step h3{font-size:19px;color:#053D76;margin-bottom:10px}
.sqn-abt__step p{font-size:15px}
.sqn-abt__nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:26px}
.sqn-abt__nbtn{width:48px;height:48px;border:0;border-radius:50%;background:#fff;
color:#1D8FDB;font-size:18px;cursor:pointer;display:flex;align-items:center;
justify-content:center;transition:background .3s,color .3s,transform .25s cubic-bezier(.22,.61,.36,1)}
.sqn-abt__nbtn:hover{background:#6FB440;color:#fff;transform:scale(1.08)}
.sqn-abt__dots{display:flex;gap:8px}
.sqn-abt__dots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;
background:rgba(255,255,255,.45);cursor:pointer;transition:background .3s,width .3s cubic-bezier(.22,.61,.36,1)}
.sqn-abt__dots button[aria-current="true"]{background:#fff;width:26px;border-radius:5px}
/* ==========================================================================
NOS VALEURS
========================================================================== */
.sqn-abt__vals{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.sqn-abt__val{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;
padding:28px 20px;border-radius:15px;background:#fff;
box-shadow:2px 8px 23px 3px rgba(0,0,0,.12);
transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s cubic-bezier(.22,.61,.36,1)}
.sqn-abt__val:hover{transform:translateY(-8px);box-shadow:0 16px 38px rgba(5,61,118,.2)}
.sqn-abt__vico{width:74px;height:74px;color:#1D8FDB;
transition:transform .45s cubic-bezier(.22,.61,.36,1),color .3s}
.sqn-abt__val:hover .sqn-abt__vico{transform:scale(1.08) rotate(-3deg);color:#6FB440}
.sqn-abt__vico svg{width:100%;height:100%;display:block}
.sqn-abt__val h3{font-size:17px;letter-spacing:1.4px;text-transform:uppercase;color:#053D76}
.sqn-abt__val p{font-size:15px}
/* ==========================================================================
RÉVÉLATION AU DÉFILEMENT
========================================================================== */
.sqn-rv{opacity:0;transform:translateY(26px);
transition:opacity .75s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1)}
.sqn-rv.sqn-in{opacity:1;transform:none}
/* ==========================================================================
RESPONSIVE — seuils alignés sur Elementor
========================================================================== */
@media(max-width:1024px){
.sqn-abt__split,.sqn-abt__row{grid-template-columns:1fr;gap:30px}
.sqn-abt__row--alt .sqn-abt__rowimg{order:0}
.sqn-abt__m3{grid-template-columns:1fr;gap:20px}
.sqn-abt__vals{grid-template-columns:repeat(2,1fr)}
.sqn-abt__step{flex-basis:calc((100% - 24px)/2)}
}
@media(max-width:767px){
.sqn-abt h1{font-size:24px}
.sqn-abt h2{font-size:24px}
.sqn-abt h3{font-size:20px}
.sqn-abt__hero{min-height:60vh}
.sqn-abt__heroin{padding-top:80px;padding-bottom:70px}
.sqn-abt__heroin p{font-size:15px}
.sqn-abt__sec{padding-top:40px;padding-bottom:40px}
.sqn-abt__row{padding-top:28px;padding-bottom:28px}
.sqn-abt__head{margin-bottom:28px}
.sqn-abt__vals{grid-template-columns:1fr}
.sqn-abt__step{flex-basis:88%}
.sqn-abt__btns .sqn-btn{width:100%;text-align:center}
}
@media(prefers-reduced-motion:reduce){
.sqn-abt *,.sqn-abt *::before,.sqn-abt *::after{
animation-duration:.01ms!important;animation-iteration-count:1!important;
transition-duration:.01ms!important}
.sqn-rv{opacity:1;transform:none}
.sqn-up{opacity:1;transform:none;animation:none}
.sqn-abt__herobg img{animation:none}
}
/* ==========================================================================
NEUTRALISATION DU SOULIGNEMENT (thème + Elementor)
--------------------------------------------------------------------------
La règle .sqn-abt a du socle ne suffisait pas, pour deux raisons :
1. ORDRE DE CHARGEMENT — le kit Elementor et le thème peuvent cibler
.elementor a ou .elementor-widget-container a, à spécificité égale ou
supérieure, et être chargés après cette feuille. Le !important est ici
le seul moyen de ne pas dépendre de l'ordre d'enqueue.
2. PROPAGATION — text-decoration n'est pas héritée : elle est PEINTE par
l'ancêtre sur toute sa descendance en flux. Si un , un
ou le
conteneur Elementor porte un soulignement, écrire text-decoration:none
sur le enfant ne l'efface pas. Il faut couper la décoration sur les
blocs porteurs — c'est l'objet du deuxième groupe.
Le namespace .sqn-abt est conservé partout, sauf pour la seule règle qui
doit viser le conteneur Elementor situé AU-DESSUS du composant : CSS ne
permet pas de sélectionner un parent, et une décoration peinte par cet
ancêtre ne peut être annulée depuis l'intérieur.
========================================================================== */
/* Liens et boutons du composant : aucun trait, dans tous les états */
.sqn-abt a,
.sqn-abt a:link,
.sqn-abt a:visited,
.sqn-abt a:hover,
.sqn-abt a:focus,
.sqn-abt a:active,
.sqn-abt button,
.sqn-abt .sqn-btn,
.sqn-abt .sqn-btn:link,
.sqn-abt .sqn-btn:visited,
.sqn-abt .sqn-btn:hover,
.sqn-abt .sqn-btn:focus,
.sqn-abt .elementor-button,
.sqn-abt .elementor-button:hover{
text-decoration:none !important;
-webkit-text-decoration:none !important;
text-decoration-line:none !important;
text-underline-offset:0;
border-bottom:0}
/* Blocs porteurs : on coupe la décoration à la source */
.sqn-abt p,.sqn-abt li,.sqn-abt ul,.sqn-abt ol,
.sqn-abt h1,.sqn-abt h2,.sqn-abt h3,.sqn-abt h4,.sqn-abt h5,.sqn-abt h6,
.sqn-abt span,.sqn-abt address,.sqn-abt blockquote,
.sqn-abt figcaption,.sqn-abt label,.sqn-abt div{
text-decoration:none}
/* Seule règle hors namespace : le conteneur Elementor qui enveloppe le
composant. Une décoration peinte par lui traverse .sqn-abt sans qu'on
puisse l'annuler depuis l'intérieur. Retirez-la si elle vous gêne
ailleurs sur le site. */
.elementor-widget-container:has(.sqn-abt){text-decoration:none}
/* Repli pour les navigateurs sans :has() — portée volontairement large,
mais limitée aux widgets HTML d'Elementor. */
@supports not .elementor-121 .elementor-element.elementor-element-be38ddc(:has(*)){
.elementor-widget-html .elementor-widget-container{text-decoration:none}
}
/*
ACCESSIBILITÉ — sans soulignement, la couleur devient le seul signal de
lien, ce qui pose problème aux daltoniens. Pour rétablir un trait fin sur
les seuls liens en pleine phrase, sans toucher aux boutons ni aux menus,
décommenter :
.sqn-abt p a:not(.sqn-btn),
.sqn-abt li a:not(.sqn-btn){
text-decoration:underline !important;
text-decoration-thickness:1px;
text-underline-offset:3px;
text-decoration-color:currentColor !important}
*//* End custom CSS */