/* Start custom CSS *//* ============================================================
   OTOITURE — DESIGN SYSTEM v4 « Épuré / Liquid Glass »
   À coller UNE fois dans : Elementor → Réglages du site → CSS personnalisé
   Cible le DOM Elementor natif (conteneurs + widgets) : la home est
   100% éditable, ce CSS pose la direction artistique.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
:root{
 --blue:#003D7A;--blue2:#0057B7;--ink:#001F3F;--sky:#E8F1FB;--red:#E63946;
 --paper:#F8FAFC;--txt:#0F172A;--txt2:#475569;--line:#E7ECF3;--white:#fff;
 --ease:cubic-bezier(.4,0,.2,1);--shadow:0 18px 50px rgba(2,32,71,.10);--shadowS:0 1px 3px rgba(2,32,71,.05)}

/* base typographie sur les sections taguées .oto4 */
.oto4,.oto4 *{font-family:'Inter',system-ui,-apple-system,sans-serif}
.oto4{color:var(--txt);-webkit-font-smoothing:antialiased}
.oto4 .elementor-heading-title{font-family:'Space Grotesk',sans-serif;letter-spacing:-.02em;line-height:1.08}

/* conteneur centré */
.oto4-container{max-width:1200px;margin-inline:auto;width:100%}

/* ---- eyebrow (widget Titre, balise div, classe .oto4-eyebrow) ---- */
.oto4-eyebrow .elementor-heading-title{display:inline-flex;align-items:center;gap:8px;
 font-family:'Inter',sans-serif;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
 color:var(--blue);background:rgba(0,61,122,.06);border:1px solid rgba(0,61,122,.14);
 padding:7px 15px 7px 13px;border-radius:999px;line-height:1}
.oto4-eyebrow .elementor-heading-title::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red);display:inline-block}
.oto4-dark .oto4-eyebrow .elementor-heading-title,.oto4-onblue .oto4-eyebrow .elementor-heading-title{color:#fff;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}

/* ---- titres ---- */
.oto4-display .elementor-heading-title{font-weight:700;font-size:clamp(2.5rem,5.4vw,4.4rem);line-height:1.03}
.oto4-h2 .elementor-heading-title{font-weight:700;font-size:clamp(1.9rem,3.4vw,2.9rem)}
.oto4-h3 .elementor-heading-title{font-weight:600;font-size:1.25rem;letter-spacing:-.01em}
.oto4-lead .elementor-widget-container{font-size:clamp(1.02rem,1.3vw,1.18rem);line-height:1.6;color:var(--txt2)}
.oto4-sub .elementor-widget-container{color:var(--txt2);line-height:1.6}
.oto4-onblue .oto4-lead .elementor-widget-container{color:rgba(255,255,255,.85)}
.oto4-onblue .oto4-sub .elementor-widget-container{color:rgba(255,255,255,.72)}
.oto4-navlogo img{height:32px;width:auto;display:block}
.oto4-flogo img{height:34px;width:auto;display:block}

/* ---- boutons (no underline, pilule, hover lift) ---- */
.oto4-btn .elementor-button{display:inline-flex;align-items:center;gap:10px;min-height:54px;padding:16px 30px;
 border-radius:999px;font-family:'Inter',sans-serif;font-weight:600;font-size:1rem;text-decoration:none!important;
 border:1.6px solid transparent;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background-color .3s var(--ease),color .3s var(--ease)}
.oto4-btn .elementor-button:hover{text-decoration:none!important}
.oto4-btn .elementor-button svg,.oto4-btn .elementor-button i{font-size:17px}
.oto4-btn--primary .elementor-button{background:var(--blue);color:#fff;box-shadow:0 10px 26px rgba(0,61,122,.26)}
.oto4-btn--primary .elementor-button:hover{background:var(--ink);transform:translateY(-3px);box-shadow:0 16px 36px rgba(0,61,122,.32)}
.oto4-btn--ghost .elementor-button{background:rgba(255,255,255,.7);color:var(--blue);border-color:rgba(0,61,122,.16);backdrop-filter:blur(12px)}
.oto4-btn--ghost .elementor-button:hover{background:#fff;transform:translateY(-3px);box-shadow:var(--shadow)}
.oto4-btn--line .elementor-button{background:transparent;color:var(--txt);border-color:var(--red)}
.oto4-btn--line .elementor-button:hover{background:rgba(230,57,70,.06);transform:translateY(-3px)}
.oto4-btn--white .elementor-button{background:#fff;color:var(--blue)}
.oto4-btn--white .elementor-button:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.2)}
.oto4-onblue .oto4-btn--line .elementor-button,.oto4-dark .oto4-btn--line .elementor-button{color:#fff;border-color:rgba(255,255,255,.55)}
.oto4-onblue .oto4-btn--line .elementor-button:hover{background:rgba(255,255,255,.12)}

/* ---- glass / cartes (conteneurs) ---- */
.oto4-glass{background:rgba(255,255,255,.62)!important;backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);
 border:1px solid rgba(255,255,255,.7)!important;border-radius:26px!important;box-shadow:var(--shadow)!important}
.oto4-glassd{background:rgba(255,255,255,.07)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
 border:1px solid rgba(255,255,255,.16)!important;border-radius:26px!important}
.oto4-card{background:#fff!important;border:1px solid var(--line)!important;border-radius:22px!important;box-shadow:var(--shadowS)!important;
 transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.oto4-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)!important}

/* ---- chip icône (widget Icône) ---- */
.oto4-chip .elementor-icon{width:54px;height:54px;border-radius:16px;display:inline-flex;align-items:center;justify-content:center;
 background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;box-shadow:0 8px 20px rgba(0,61,122,.22)}
.oto4-chip .elementor-icon svg,.oto4-chip .elementor-icon i{width:24px;height:24px;font-size:22px;fill:none}
.oto4-chip--soft .elementor-icon{background:var(--sky);color:var(--blue);box-shadow:none}

/* ---- stats en widgets Titre (toujours visibles, sans JS) ---- */
.oto4-statnum .elementor-heading-title{font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--blue);
 font-size:clamp(2.3rem,3.6vw,3.1rem);line-height:1}
.oto4-statlbl .elementor-heading-title{font-family:'Inter',sans-serif;color:var(--txt2);font-size:.95rem;font-weight:500;letter-spacing:0}
.oto4-dark .oto4-statnum .elementor-heading-title{color:#fff}
.oto4-dark .oto4-statlbl .elementor-heading-title{color:rgba(255,255,255,.7)}

/* ---- listes à puces check (widget Icon-list) ---- */
.oto4-list .elementor-icon-list-icon svg{fill:none;stroke:var(--blue);width:18px;height:18px}
.oto4-list .elementor-icon-list-text{color:var(--txt2);font-size:.96rem}
.oto4-dark .oto4-list .elementor-icon-list-icon svg{stroke:#7db2ff}
.oto4-dark .oto4-list .elementor-icon-list-text{color:rgba(255,255,255,.82)}

/* ---- images ---- */
.oto4-media img{border-radius:16px;width:100%;height:100%;object-fit:cover;display:block}

/* ---- sections : fonds ---- */
.oto4-mesh{background:radial-gradient(60% 75% at 6% -8%,#EAF2FE 0%,transparent 60%),radial-gradient(55% 65% at 106% 112%,#EAF2FE 0%,transparent 60%),var(--white)}
.oto4-paper{background:var(--paper)}
.oto4-dark{background:radial-gradient(70% 90% at 82% -12%,#0a2d5a 0%,transparent 60%),var(--ink)}
.oto4-cta{background:linear-gradient(120deg,var(--blue),var(--blue2) 62%,#0a66c2)}

/* ---- hero ---- */
.oto4-hero{position:relative}
.oto4-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(0,16,36,.86),rgba(0,40,84,.62) 55%,rgba(0,61,122,.4));z-index:0}
.oto4-hero>*{position:relative;z-index:1}
.oto4-trust .elementor-icon-list-icon svg{stroke:#7db2ff}
.oto4-trust .elementor-icon-list-text{color:rgba(255,255,255,.92);font-weight:500}

/* ---- carte formulaire ---- */
.oto4-formcard{padding:30px!important;position:relative}
.oto4-fbadge .elementor-heading-title{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.88);
 border:1px solid #fff;box-shadow:0 10px 24px rgba(2,32,71,.16);color:var(--blue);font-family:'Inter',sans-serif;
 font-size:.8rem;font-weight:600;padding:9px 14px;border-radius:999px;letter-spacing:0;text-transform:none}
.oto4 .wpcf7-form input:not([type=submit]):not([type=checkbox]),.oto4 .wpcf7-form select,.oto4 .wpcf7-form textarea{
 width:100%;background:rgba(255,255,255,.7);border:1px solid var(--line);border-radius:13px;padding:13px 15px;
 font:500 15px Inter,sans-serif;color:var(--txt);margin-bottom:11px}
.oto4 .wpcf7-form input:focus,.oto4 .wpcf7-form select:focus,.oto4 .wpcf7-form textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,61,122,.14);background:#fff}
.oto4 .wpcf7-form .wpcf7-submit{width:100%;min-height:54px;background:var(--blue);color:#fff;border:none;border-radius:999px;font:600 1.02rem Inter,sans-serif;cursor:pointer;transition:.25s}
.oto4 .wpcf7-form .wpcf7-submit:hover{background:var(--ink)}

/* ---- liste numérotée « La différence » ---- */
.oto4-step{counter-increment:oto4s;position:relative}
.oto4-step .elementor-heading-title::before{content:"0" counter(oto4s);font-family:'Space Grotesk',sans-serif;color:var(--blue);
 opacity:.25;font-size:1.4rem;margin-right:10px}
.oto4-steps{counter-reset:oto4s}

/* ---- témoignages ---- */
.oto4-tcard{padding:26px!important}
.oto4-stars .elementor-heading-title{color:#F5A623;letter-spacing:3px;font-family:'Inter';font-size:1.05rem}
.oto4-quote .elementor-widget-container{color:var(--txt);font-size:1rem;line-height:1.6}
.oto4-who .elementor-heading-title{font-family:'Inter';font-size:.92rem;color:var(--txt);font-weight:600;letter-spacing:0}

/* ---- bande TV ---- */
.oto4-tv img{height:34px;width:auto;filter:brightness(0) invert(1);opacity:.62;transition:.3s}
.oto4-tv img:hover{filter:none;opacity:1}

/* ---- téléphone géant ---- */
.oto4-phone .elementor-heading-title{font-family:'Space Grotesk';font-weight:700;font-size:clamp(2rem,4.2vw,2.8rem);color:#fff}

/* ---- before/after slider (widget HTML) ---- */
.oto4-ba{position:relative;width:100%;aspect-ratio:1000/545;border-radius:18px;overflow:hidden;background:#111;
 box-shadow:0 16px 40px rgba(2,32,71,.18);user-select:none;touch-action:none}
.oto4-ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.oto4-ba .oto4-ba-b{clip-path:inset(0 calc(100% - var(--p,50%)) 0 0)}
.oto4-ba-l{position:absolute;top:12px;padding:5px 11px;border-radius:999px;font:600 11px Inter,sans-serif;letter-spacing:.06em;color:#fff;background:rgba(0,16,36,.5);backdrop-filter:blur(6px)}
.oto4-ba-l--b{left:12px}.oto4-ba-l--a{right:12px}
.oto4-ba-h{position:absolute;top:0;bottom:0;left:var(--p,50%);width:2px;background:rgba(255,255,255,.92);transform:translateX(-1px);cursor:ew-resize}
.oto4-ba-h>span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);border:1px solid #fff;display:flex;align-items:center;justify-content:center;color:var(--blue);box-shadow:0 4px 16px rgba(0,0,0,.22)}
.oto4-ba-h svg{width:18px;height:18px;stroke:var(--blue);fill:none}
.oto4-ba-cap{margin-top:9px;font:600 .92rem Inter,sans-serif;color:#fff}
.oto4-ba-cap span{display:block;font-weight:400;font-size:.8rem;color:rgba(255,255,255,.6)}

/* ---- header nav verre ---- */
.oto4-nav{background:rgba(255,255,255,.72)!important;backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
 border:1px solid rgba(255,255,255,.7)!important;border-radius:999px!important;box-shadow:0 10px 34px rgba(2,32,71,.12)!important}
.oto4-nav .oto4-navlink .elementor-heading-title,.oto4-nav .oto4-navlink a{font-family:'Inter';font-weight:500;font-size:.95rem;color:var(--txt)}
.oto4-tel .elementor-heading-title{font-family:'Inter';font-weight:700;color:var(--blue);font-size:1rem;letter-spacing:0}

/* ---- footer bleu ---- */
.oto4-footer{background:linear-gradient(180deg,#0a4f9e 0%,#003D7A 100%)}
.oto4-footer .elementor-heading-title{color:#fff}
.oto4-footer .oto4-fcol-title .elementor-heading-title{font-family:'Inter';font-size:1rem;font-weight:600}
.oto4-footer .oto4-flink .elementor-heading-title,.oto4-footer .oto4-flink a{font-family:'Inter';font-weight:400;font-size:.94rem;color:rgba(255,255,255,.72)}
.oto4-footer .oto4-bdg .elementor-heading-title{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.28);
 color:#fff;border-radius:999px;padding:7px 15px;font-family:'Inter';font-size:.8rem;font-weight:600;letter-spacing:0;text-transform:none}
.oto4-footer .oto4-mini .elementor-widget-container{color:rgba(255,255,255,.7);font-size:.9rem;line-height:1.6}

/* ---- entrée douce (CSS pur, visible sans JS) ---- */
@keyframes oto4in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.oto4-reveal{animation:oto4in .6s var(--ease)}

/* ---- responsive ---- */
@media(max-width:880px){
 .oto4-tv img{height:26px}
}
@media(prefers-reduced-motion:reduce){.oto4 *{animation:none!important;transition:none!important}}/* End custom CSS */