/* ==========================================================================
OURTECH — Surcouche d'identité visuelle, bi-thème
--------------------------------------------------------------------------
Chargée APRÈS style.css / responsive.css. Aucun fichier du template n'est
modifié : retirer le de cette feuille restaure le rendu d'origine.
Deux thèmes, pilotés par l'attribut data-theme sur :
data-theme="dark" -> le rendu d'origine (violet sur fond sombre)
data-theme="light" -> déclinaison claire de la même marque
Le violet de marque #761FE3 est commun aux deux : un seul univers, deux
ambiances. Le thème est posé par le script inline en tête de index.html.
========================================================================== */
/* --------------------------------------------------------------------------
1. Jetons de couleur par thème
Le template lit ses propres variables (--main-color, --color-two…) partout.
En mode sombre on ne touche à rien : les valeurs d'origine s'appliquent.
En mode clair on les réécrit, ce qui bascule les ~9 000 lignes d'un coup.
-------------------------------------------------------------------------- */
/* --- Mode sombre : jetons propres à la surcouche uniquement --------------- */
html[data-theme="dark"] {
--ot-ink: #FFFFFF;
--ot-muted: #BDBDBD;
--ot-border: rgba(255,255,255,0.10);
--ot-surface: #1C1C1C;
--ot-surface-2: #242424;
--ot-accent: #761FE3;
--ot-accent-2: #A855F7;
--ot-accent-soft: rgba(118,31,227,0.20);
--ot-halo: rgba(118,31,227,0.30);
--ot-shadow: rgba(0,0,0,0.45);
--ot-radius: 12px;
/* Décor */
--ot-dot: rgba(255,255,255,0.07);
--ot-glow-1: rgba(118,31,227,0.26);
--ot-glow-2: rgba(168,85,247,0.18);
--ot-panel: linear-gradient(150deg, rgba(118,31,227,0.22) 0%, rgba(168,85,247,0.06) 60%, transparent 100%);
}
/* --- Mode clair : remappage complet -------------------------------------- */
html[data-theme="light"] {
/* Violet de marque, inchangé : c'est le lien entre les deux thèmes. */
--main-color: rgb(118,31,227);
--main-color-rgb: 118,31,227;
--color-two: rgb(255,255,255); /* fond de page */
--color-two-rgb: 255,255,255;
--color-three: rgb(75,69,96); /* texte secondaire */
--color-three-rgb: 75,69,96;
--color-four: rgb(250,248,255); /* surface teintée violet */
--color-four-rgb: 250,248,255;
--color-five: rgb(147,51,234); /* violet clair */
--color-five-rgb: 147,51,234;
--color-six: rgb(107,100,120); /* texte tertiaire */
--color-six-rgb: 107,100,120;
--color-seven: rgb(250,248,255); /* surface encadrée */
--color-seven-rgb: 250,248,255;
--color-eight: rgb(233,229,240); /* bordures */
--color-eight-rgb: 233,229,240;
--color-nine: rgb(245,242,251); /* surface douce */
--color-nine-rgb: 245,242,251;
--color-ten: rgb(233,229,240);
--color-ten-rgb: 233,229,240;
/* Le template écrit la quasi-totalité de son texte en --white-color :
il était conçu pour un fond sombre. Sur fond clair, cela donnait du
blanc sur blanc — c'est ce qui rendait les pages intérieures illisibles.
Inverser la variable rend lisibles ~150 règles d'un seul coup, et rend
du même geste corrects les voiles rgba(--white-color-rgb, …) qui
servent de bordures et de surfaces discrètes.
Les 20 règles où elle sert de FOND sont rétablies plus bas, et le blanc
est restauré sur tous les blocs à fond sombre. */
--white-color: rgb(26,21,35);
--white-color-rgb: 26,21,35;
--ot-ink: #1A1523;
--ot-muted: #4B4560;
--ot-border: #E9E5F0;
--ot-surface: #FAF8FF;
--ot-surface-2: #F5F2FB;
--ot-accent: #761FE3;
--ot-accent-2: #4C1D95;
--ot-accent-soft: rgba(118,31,227,0.09);
--ot-halo: rgba(118,31,227,0.16);
--ot-shadow: rgba(26,21,35,0.10);
--ot-radius: 12px;
/* Décor */
--ot-dot: rgba(118,31,227,0.13);
--ot-glow-1: rgba(118,31,227,0.14);
--ot-glow-2: rgba(147,51,234,0.10);
--ot-panel: linear-gradient(150deg, rgba(118,31,227,0.14) 0%, rgba(147,51,234,0.05) 60%, transparent 100%);
}
/* Dégradé de marque, commun aux deux thèmes. */
html[data-theme="light"] { --ot-gradient: linear-gradient(112deg, #761FE3 0%, #4C1D95 100%); }
html[data-theme="dark"] { --ot-gradient: linear-gradient(112deg, #A855F7 0%, #761FE3 100%); }
/* Transition douce à la bascule, sans animer les transformations. */
html[data-theme] body,
html[data-theme] .main-header,
html[data-theme] .counter-block_two-inner,
html[data-theme] .ot-cta_inner,
html[data-theme] .main-footer {
transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease;
}
/* --------------------------------------------------------------------------
2. Base & typographie (les deux thèmes)
-------------------------------------------------------------------------- */
body {
color: var(--ot-muted);
font-size: 16px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html[data-theme="light"] body { background-color: #FFFFFF; }
h1, h2, h3, h4, h5, h6 {
font-family: 'Inter', sans-serif;
color: var(--ot-ink);
font-weight: 700;
line-height: 1.14;
letter-spacing: -0.025em;
}
h1 { font-size: 60px; }
h2 { font-size: 42px; }
h3 { font-size: 28px; }
h4 { font-size: 22px; }
h5 { font-size: 18px; }
a { color: var(--ot-accent); }
html[data-theme="dark"] a:hover { color: var(--ot-accent-2); }
html[data-theme="light"] a:hover { color: var(--ot-accent-2); }
/* Le template pose du Lora italique sur les mots accentués. On repasse en
Inter et on marque l'accent par un dégradé : plus caractériel qu'un aplat. */
.sec-title_heading span,
.banner-one_heading span {
font-family: 'Inter', sans-serif !important;
font-style: normal !important;
text-transform: none !important;
color: var(--ot-accent);
}
/* Le dégradé n'est appliqué que si le navigateur sait le découper au texte.
Sans ce garde-fou, un navigateur sans background-clip:text afficherait du
texte transparent, donc invisible. Ne jamais l'utiliser sur un contenu dont
les enfants sortent du flux (cf. les chiffres odometer plus bas). */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
.sec-title_heading span,
.banner-one_heading span {
background: var(--ot-gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
}
/* Le trait dégradé posé sous les mots accentués fait « template ». */
.sec-title_heading span::before { display: none !important; }
html[data-theme="light"] ::-webkit-scrollbar-track { background: var(--ot-surface); }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background-color: #C9BEE0; }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background-color: var(--ot-accent); }
/* --------------------------------------------------------------------------
3. Suppression des effets « gadget »
Curseur personnalisé et préchargeur animé : les deux marqueurs les plus
visibles d'un template acheté. Retirés dans les deux thèmes.
-------------------------------------------------------------------------- */
.cursor,
.cursor-follower,
.loader-wrap,
.preloader,
#handle-preloader {
display: none !important;
}
body { cursor: auto !important; }
a, button, .template-btn, .ot-theme-toggle { cursor: pointer !important; }
/* --------------------------------------------------------------------------
4. Bouton de bascule de thème
-------------------------------------------------------------------------- */
.ot-theme-toggle {
position: relative;
width: 40px;
height: 40px;
flex: 0 0 40px;
padding: 0px;
margin-left: 14px;
border-radius: 50%;
background: transparent;
border: 1px solid var(--ot-border);
color: var(--ot-ink);
display: inline-flex;
align-items: center;
justify-content: center;
transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}
.ot-theme-toggle:hover {
border-color: var(--ot-accent);
background-color: var(--ot-accent-soft);
color: var(--ot-accent);
}
.ot-theme-toggle:focus-visible {
outline: 2px solid var(--ot-accent);
outline-offset: 2px;
}
.ot-theme-toggle svg {
width: 18px;
height: 18px;
display: block;
}
/* Une seule icône visible à la fois : soleil en sombre, lune en clair. */
html[data-theme="dark"] .ot-theme-toggle .ot-icon-moon,
html[data-theme="light"] .ot-theme-toggle .ot-icon-sun {
display: none;
}
/* --------------------------------------------------------------------------
5. Logos
logo.svg contient « TECH » en blanc : illisible sur fond clair. On sert
donc une variante encre foncée en mode clair.
-------------------------------------------------------------------------- */
html[data-theme="dark"] .ot-logo-light,
html[data-theme="light"] .ot-logo-dark {
display: none !important;
}
.logo-box .logo img,
.footer-logo img,
.nav-logo img {
max-height: 34px;
width: auto;
}
/* --------------------------------------------------------------------------
6. En-tête & navigation
-------------------------------------------------------------------------- */
/* Fond quasi opaque plutôt qu'un backdrop-filter : sur un en-tête qui devient
fixe au défilement, le flou d'arrière-plan se recalcule à chaque image et
se paie cher. Le rendu est presque identique. */
html[data-theme="light"] .main-header {
background-color: rgba(255,255,255,0.97);
border-bottom: 1px solid var(--ot-border);
}
html[data-theme="light"] .main-header .main-menu .navigation > li > a {
color: var(--ot-ink);
}
.main-header .main-menu .navigation > li > a {
font-size: 15px;
font-weight: 500;
letter-spacing: -0.01em;
}
.main-header .main-menu .navigation > li:hover > a,
.main-header .main-menu .navigation > li.current > a {
color: var(--ot-accent);
}
html[data-theme="dark"] .main-header .main-menu .navigation > li:hover > a {
color: var(--ot-accent-2);
}
/* Menus déroulants : cartes posées, cohérentes avec le thème actif. */
.main-header .main-menu .navigation > li > ul,
.main-header .main-menu .navigation > li > ul > li > ul {
background-color: var(--ot-surface);
border: 1px solid var(--ot-border);
border-radius: 12px;
box-shadow: 0 14px 38px var(--ot-shadow);
padding: 6px;
width: 16.5rem;
}
html[data-theme="light"] .main-header .main-menu .navigation > li > ul,
html[data-theme="light"] .main-header .main-menu .navigation > li > ul > li > ul {
background-color: #FFFFFF;
}
.main-header .main-menu .navigation > li > ul > li > a,
.main-header .main-menu .navigation > li > ul > li > ul > li > a {
color: var(--ot-ink);
background: transparent;
font-size: 15px;
font-weight: 500;
border-radius: 8px !important;
border-bottom: none;
padding: 10px 14px;
}
.main-header .main-menu .navigation > li > ul > li > a:hover,
.main-header .main-menu .navigation > li > ul > li > ul > li > a:hover {
color: var(--ot-accent);
background-color: var(--ot-accent-soft);
}
html[data-theme="light"] .mobile-nav-toggler { color: var(--ot-ink); }
/* Uniquement en grand écran : à partir de 1023px le template repasse
.outer-box en display:block pour empiler burger et boutons. */
@media only screen and (min-width: 1024px) {
.outer-box { display: flex; align-items: center; }
}
/* --------------------------------------------------------------------------
7. Boutons
Le template animait un cercle plein au survol et faisait défiler deux
libellés superposés. On garde un bouton franc, avec le dégradé de marque.
-------------------------------------------------------------------------- */
.btn-style-one,
.btn-style-two {
font-size: 15px;
font-weight: 600;
letter-spacing: -0.01em;
padding: 14px 26px;
border-radius: 9px;
transition: transform 160ms ease, box-shadow 180ms ease,
background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.btn-style-one::before,
.btn-style-two::before { display: none !important; }
.btn-style-one .btn-wrap .text-two,
.btn-style-two .btn-wrap .text-two { display: none !important; }
.btn-style-one:hover .btn-wrap .text-one:first-child,
.btn-style-two:hover .btn-wrap .text-one:first-child { transform: none !important; }
.btn-style-one .btn-wrap,
.btn-style-two .btn-wrap { float: none; overflow: visible; }
/* Primaire — dégradé de marque, léger relief au survol. */
.btn-style-one {
background: var(--ot-gradient);
color: #FFFFFF;
border: none;
box-shadow: 0 4px 14px rgba(118,31,227,0.28);
}
.btn-style-one:hover {
transform: translateY(-1px);
box-shadow: 0 8px 22px rgba(118,31,227,0.38);
}
.btn-style-one .btn-wrap .text-one { color: #FFFFFF; }
/* Secondaire — contour. */
.btn-style-two {
background-color: transparent;
border: 1px solid var(--ot-border);
color: var(--ot-ink);
}
.btn-style-two:hover {
border-color: var(--ot-accent);
background-color: var(--ot-accent-soft);
}
.btn-style-two .btn-wrap .text-one { color: var(--ot-ink); }
.btn-style-two:hover .btn-wrap .text-one { color: var(--ot-accent); }
.main-header_buttons .template-btn { padding: 11px 20px; font-weight: 600; }
/* --------------------------------------------------------------------------
8. Bandeau d'accueil
-------------------------------------------------------------------------- */
.banner-one {
position: relative;
padding-top: 190px;
padding-bottom: 50px;
overflow: hidden;
}
html[data-theme="light"] .banner-one {
background-color: var(--ot-surface);
border-bottom: 1px solid var(--ot-border);
}
/* Halo violet diffus : c'est lui qui porte le caractère du bandeau. */
.banner-one::before {
position: absolute;
content: '';
left: 50%;
top: -140px;
width: 1100px;
height: 620px;
transform: translateX(-50%);
pointer-events: none;
z-index: 0;
background: radial-gradient(ellipse at center, var(--ot-halo) 0%, transparent 68%);
}
.banner-one .auto-container { position: relative; z-index: 1; }
/* En mode clair, le visuel d'origine (ac.svg) est orange corail et se rend
tronqué : le halo et la typographie le remplacent. Il reste en mode sombre,
où le rendu d'origine est conservé. */
html[data-theme="light"] .banner-one_image,
html[data-theme="light"] .banner-one_shadow,
html[data-theme="light"] .banner-one_icon {
display: none !important;
}
.banner-one_title {
font-size: 14px;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--ot-accent);
background-color: var(--ot-accent-soft);
border: 1px solid rgba(118,31,227,0.22);
border-radius: 100px;
padding: 7px 18px;
}
html[data-theme="dark"] .banner-one_title { color: #C99BFF; }
.banner-one_heading {
font-size: 60px;
margin-top: 24px;
margin-bottom: 18px;
color: var(--ot-accent);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
.banner-one_heading {
background: var(--ot-gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
}
.banner-one_text {
color: var(--ot-muted);
font-size: 18px;
line-height: 1.6;
max-width: 620px;
}
.banner-one_newsletter { max-width: none; }
.banner-one .newsletter-box {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
margin-top: 34px;
}
/* Hiérarchie entre les deux appels à l'action du bandeau. */
.banner-one .newsletter-box .template-btn:nth-child(2) {
background: transparent;
border: 1px solid var(--ot-border);
color: var(--ot-ink);
box-shadow: none;
}
.banner-one .newsletter-box .template-btn:nth-child(2) .text-one { color: var(--ot-ink); }
.banner-one .newsletter-box .template-btn:nth-child(2):hover {
border-color: var(--ot-accent);
background-color: var(--ot-accent-soft);
}
.banner-one .newsletter-box .template-btn:nth-child(2):hover .text-one { color: var(--ot-accent); }
/* --------------------------------------------------------------------------
9. Titres de section
-------------------------------------------------------------------------- */
.sec-title_title {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.12em;
color: var(--ot-accent);
}
html[data-theme="dark"] .sec-title_title { color: #C99BFF; }
.sec-title_heading {
color: var(--ot-ink);
font-size: 42px;
margin-top: 14px;
}
.sec-title_text {
color: var(--ot-muted);
font-size: 17px;
line-height: 1.7;
margin-top: 18px;
}
/* Variante « light » du template : posée sur le bandeau violet des clients. */
.sec-title.light .sec-title_title { color: rgba(255,255,255,0.78); }
.sec-title.light .sec-title_heading { color: #FFFFFF; }
.sec-title.light .sec-title_heading span {
background: none;
-webkit-text-fill-color: #FFFFFF;
color: #FFFFFF;
}
.sec-title.light .sec-title_text { color: rgba(255,255,255,0.82); opacity: 1; }
/* --------------------------------------------------------------------------
10. Sections de contenu (Consultants / Clients / OURPASS)
-------------------------------------------------------------------------- */
.conversation-one,
.livechat { padding: 95px 0px; }
/* Le rythme des fonds est porté par la classe .ot-tinted posée dans le HTML,
et non par un nth-of-type : ajouter une section suffisait à tout décaler. */
.ot-tinted {
position: relative;
background-color: var(--ot-surface);
}
/* Motif de points : donne de la matière au fond teinté sans le charger. */
.ot-tinted::before {
position: absolute;
content: '';
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
z-index: 0;
pointer-events: none;
background-image: radial-gradient(var(--ot-dot) 1px, transparent 1px);
background-size: 24px 24px;
}
.ot-tinted > * { position: relative; z-index: 1; }
.livechat_image-outer::before { display: none !important; }
.livechat_image-outer img,
.conversation-one_image img { border-radius: var(--ot-radius); }
.livechat-list { margin-top: 28px; }
.livechat-list li {
color: var(--ot-ink);
font-size: 16px;
font-weight: 500;
line-height: 1.55;
margin-bottom: 14px;
padding-left: 36px;
position: relative;
}
.livechat-list li i {
position: absolute;
left: 0px;
top: 2px;
width: 23px;
height: 23px;
font-size: 11px;
line-height: 23px;
text-align: center;
border-radius: 50%;
color: #FFFFFF;
background: var(--ot-gradient);
}
.livechat-options { margin-top: 32px; gap: 12px; }
.livechat_button { margin-right: 0px; }
.livechat-agent {
background-color: var(--ot-surface);
color: var(--ot-ink);
border: 1px solid var(--ot-border);
box-shadow: 0 10px 28px var(--ot-shadow);
border-radius: 100px;
font-weight: 600;
}
html[data-theme="light"] .livechat-agent { background-color: #FFFFFF; }
html[data-theme="light"] .livechat-layer,
html[data-theme="light"] .livechat-icon,
html[data-theme="light"] .livechat_image-outer .color-layer {
display: none !important;
}
/* --------------------------------------------------------------------------
11. Bandeau clients
-------------------------------------------------------------------------- */
.clients-one { padding: 20px 0px 95px; }
.clients-one .inner-container {
background: var(--ot-gradient);
border-radius: 18px;
padding: 76px 80px;
}
/* Les quatre logos clients sont des images ENTIÈREMENT OPAQUES (fond blanc
inclus, aucune transparence). Toute tentative de les passer en silhouette
blanche — filter: brightness(0) invert(1) — les transforme en rectangles
blancs pleins et les efface. On les pose donc sur une pastille blanche,
couleurs d'origine intactes. */
.clients-one .clients-box {
background: #FFFFFF;
border-radius: 10px;
padding: 12px 18px;
margin: 0px 10px;
transition: transform 200ms ease, box-shadow 200ms ease;
}
.clients-one .clients-box img {
max-height: 44px;
width: auto;
filter: none;
opacity: 1;
}
.clients-one .clients-box:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}
/* Rangée figée : les logos sont répartis une seule fois, sans duplication.
Le conteneur du template imposait une hauteur fixe et un débord masqué,
utiles au défilement mais inutiles ici. */
.clients-one .clients-box_one {
min-height: 0px;
overflow: visible;
}
.clients-one .ot-clients-row {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 22px;
}
.clients-one .ot-clients-row .clients-box { margin: 0px; }
/* Les fondus latéraux servaient à estomper les bords du défilement. Sans
défilement ils n'ont plus d'objet, et leur aplat de --main-color ne
raccordait de toute façon pas avec le fond en dégradé. */
.clients-one .clients-box_one::before,
.clients-one .clients-box_one::after {
display: none !important;
}
/* --------------------------------------------------------------------------
12. Chiffres clés
-------------------------------------------------------------------------- */
.counter-one { padding-bottom: 95px; }
.counter-one .inner-container { background-color: transparent; padding: 0px; }
.counter-block_two-inner {
background: var(--ot-surface) !important;
border: 1px solid var(--ot-border);
border-radius: 14px;
padding: 32px 28px;
height: 100%;
transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
html[data-theme="light"] .counter-block_two-inner { background: #FFFFFF !important; }
.counter-block_two-inner::before { display: none !important; }
.counter-block_two-inner:hover {
transform: translateY(-3px);
border-color: rgba(118,31,227,0.42);
box-shadow: 0 14px 34px var(--ot-shadow);
}
/* Surtout PAS de dégradé découpé au texte ici : la bibliothèque odometer place
les chiffres dans des .odometer-digit-inner en position absolute. Hors flux,
ils ne reçoivent pas le fond découpé mais héritent de color: transparent —
les chiffres deviennent invisibles. Aplat de couleur, donc. */
.counter-block_two-count {
font-size: 46px;
font-weight: 700;
letter-spacing: -0.035em;
color: var(--ot-accent);
background: none;
-webkit-background-clip: border-box;
background-clip: border-box;
}
html[data-theme="dark"] .counter-block_two-count { color: #C99BFF; }
.counter-block_two-title {
color: var(--ot-ink);
font-size: 17px;
font-weight: 600;
margin-top: 10px;
}
.counter-block_two-text {
color: var(--ot-muted);
font-size: 15px;
line-height: 1.6;
margin-top: 8px;
}
/* Le survol repeignait toute la carte : trop appuyé, le relief suffit. */
.counter-block_two .color-layer,
.counter-block_two-inner:hover .color-layer { display: none !important; }
.counter-block_two-inner:hover .counter-block_two-count { color: var(--ot-accent-2); }
html[data-theme="dark"] .counter-block_two-inner:hover .counter-block_two-count { color: #FFFFFF; }
/* --------------------------------------------------------------------------
13. Section de relance finale
-------------------------------------------------------------------------- */
.ot-cta { position: relative; padding: 0px 0px 95px; }
.ot-cta_inner {
position: relative;
overflow: hidden;
background: var(--ot-gradient);
border-radius: 18px;
padding: 68px 72px;
text-align: center;
}
/* Halo clair en haut du bloc, pour éviter l'aplat. */
.ot-cta_inner::before {
position: absolute;
content: '';
left: 50%;
top: -180px;
width: 720px;
height: 360px;
transform: translateX(-50%);
pointer-events: none;
background: radial-gradient(ellipse at center, rgba(255,255,255,0.22) 0%, transparent 70%);
}
.ot-cta_inner > * { position: relative; }
.ot-cta_heading { color: #FFFFFF; font-size: 38px; margin-bottom: 14px; }
.ot-cta_text {
color: rgba(255,255,255,0.82);
font-size: 17px;
line-height: 1.65;
max-width: 620px;
margin: 0 auto 32px;
}
.ot-cta_buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
/* Sur le violet plein, le primaire passe en blanc. */
.ot-cta_buttons .btn-style-one {
background: #FFFFFF;
box-shadow: 0 4px 14px rgba(0,0,0,0.16);
}
.ot-cta_buttons .btn-style-one .text-one { color: var(--ot-accent); }
.ot-cta_buttons .btn-style-one:hover { box-shadow: 0 8px 22px rgba(0,0,0,0.24); }
.ot-cta_buttons .btn-style-two {
border-color: rgba(255,255,255,0.34);
color: #FFFFFF;
}
.ot-cta_buttons .btn-style-two .text-one { color: #FFFFFF; }
.ot-cta_buttons .btn-style-two:hover {
background-color: rgba(255,255,255,0.10);
border-color: rgba(255,255,255,0.62);
}
.ot-cta_buttons .btn-style-two:hover .text-one { color: #FFFFFF; }
/* --------------------------------------------------------------------------
14. Pied de page
-------------------------------------------------------------------------- */
.main-footer {
background-color: var(--ot-surface);
border-top: 1px solid var(--ot-border);
padding-top: 0px;
}
html[data-theme="light"] .footer_pattern { display: none !important; }
.main-footer .widgets-section { padding: 66px 0px 24px; }
.footer-widget { margin-bottom: 34px; }
.footer-title {
color: var(--ot-ink);
font-size: 15px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 18px;
}
.footer-widget_text {
color: var(--ot-muted);
font-size: 15px;
line-height: 1.7;
max-width: 320px;
}
.footer-pages_list li { margin-bottom: 11px; }
.footer-pages_list li a { color: var(--ot-muted); font-size: 15px; font-weight: 400; }
.footer-pages_list li a:hover { color: var(--ot-accent); }
.footer-widget .footer-logo { margin-bottom: 18px; }
.main-footer .footer-bottom {
padding: 22px 0px;
background-color: transparent;
border-top: 1px solid var(--ot-border);
}
.footer-bottom .inner-container { gap: 16px; }
.footer-copyright,
.footer-bottom a { color: var(--ot-muted); font-size: 14px; }
.footer-copyright a { color: var(--ot-muted); font-weight: 600; }
.footer-bottom a:hover,
.footer-copyright a:hover { color: var(--ot-accent); }
.ot-footer_legal { display: flex; gap: 22px; flex-wrap: wrap; }
/* --------------------------------------------------------------------------
15. Bouton « retour en haut »
-------------------------------------------------------------------------- */
html[data-theme="light"] .progress-wrap {
background-color: #FFFFFF;
box-shadow: 0 4px 16px var(--ot-shadow);
}
/* --------------------------------------------------------------------------
16. Menu mobile
-------------------------------------------------------------------------- */
.mobile-menu .menu-box { background-color: #1A1523; }
.mobile-menu .navigation > li > a { color: rgba(255,255,255,0.88); font-weight: 500; }
.mobile-menu .navigation > li > a:hover { color: #FFFFFF; }
/* ==========================================================================
17. Relief & décor
La page était juste, mais trop neutre : beaucoup de blanc, peu de matière.
Cette section ajoute du caractère sans quitter le registre pro — halos
diffus, motifs discrets, panneaux sous les visuels, accents de couleur.
Tout est décoratif : pointer-events: none et pseudo-éléments uniquement,
aucune incidence sur la mise en page ni sur l'accessibilité.
========================================================================== */
/* --- Bandeau : trame de points par-dessus le halo ------------------------- */
.banner-one::after {
position: absolute;
content: '';
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
z-index: 0;
pointer-events: none;
background-image: radial-gradient(var(--ot-dot) 1px, transparent 1px);
background-size: 26px 26px;
-webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
}
/* --- Halos diffus derrière les sections de contenu ------------------------ */
.conversation-one,
.counter-one {
position: relative;
overflow: hidden;
}
/* Dégradés radiaux, PAS filter: blur().
Un blur de 90 px sur un cercle de 620 px oblige le navigateur à recomposer
une grande surface à chaque image pendant le défilement — c'était la cause
principale des à-coups. Un dégradé radial produit le même halo diffus et
se peint une fois pour toutes. */
.conversation-one::before,
.counter-one::before {
position: absolute;
content: '';
width: 760px;
height: 760px;
z-index: 0;
pointer-events: none;
}
.conversation-one::before {
right: -240px;
top: -200px;
background: radial-gradient(circle closest-side, var(--ot-glow-1) 0%, transparent 100%);
}
.counter-one::before {
left: -260px;
bottom: -280px;
background: radial-gradient(circle closest-side, var(--ot-glow-2) 0%, transparent 100%);
}
.conversation-one > *,
.counter-one > * { position: relative; z-index: 1; }
/* --- Sur-titres en pastille ---------------------------------------------- */
.sec-title_title {
display: inline-block;
padding: 7px 16px;
border-radius: 100px;
background-color: var(--ot-accent-soft);
border: 1px solid rgba(118,31,227,0.20);
}
html[data-theme="dark"] .sec-title_title {
border-color: rgba(201,155,255,0.28);
}
/* Sur le bandeau violet plein, la pastille passe en blanc translucide. */
.sec-title.light .sec-title_title {
background-color: rgba(255,255,255,0.14);
border-color: rgba(255,255,255,0.30);
}
/* --- Panneaux sous les illustrations -------------------------------------
Les visuels flottaient sur du blanc. Un panneau teinté les ancre et
rattrape l'hétérogénéité du jeu d'images hérité du thème. */
.conversation-one_image,
.livechat_image-outer {
position: relative;
border-radius: 20px;
background: var(--ot-panel);
padding: 26px;
}
.conversation-one_image img,
.livechat_image-outer img {
position: relative;
border-radius: 14px;
}
/* --- Cartes chiffres : filet d'accent en tête ----------------------------- */
.counter-block_two-inner {
position: relative;
overflow: hidden;
}
.counter-block_two-inner::after {
position: absolute;
content: '';
left: 0px;
top: 0px;
right: 0px;
height: 3px;
pointer-events: none;
background: var(--ot-gradient);
transform: scaleX(0.34);
transform-origin: left center;
transition: transform 260ms ease;
}
.counter-block_two-inner:hover::after { transform: scaleX(1); }
/* --- Puces cochées : légère ombre colorée --------------------------------- */
.livechat-list li i {
box-shadow: 0 3px 8px rgba(118,31,227,0.28);
}
/* --- Bandeau clients : liseré lumineux ------------------------------------ */
.clients-one .inner-container {
position: relative;
overflow: hidden;
}
.clients-one .inner-container::after {
position: absolute;
content: '';
left: -10%;
top: -60%;
width: 55%;
height: 220%;
pointer-events: none;
transform: rotate(18deg);
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.10) 50%, transparent 100%);
}
.clients-one .inner-container > * { position: relative; z-index: 1; }
/* ==========================================================================
18. Signatures
Les éléments qui font qu'on reconnaît la page. Repris des partis pris les
plus solides des sites primés 2026 — grain, typographie cinétique, grille
bento, révélations au défilement — mais déclinés sur le violet OURTECH et
dosés pour rester crédibles sur un site de prestation.
Principe directeur : la page doit rester juste sans une seule animation.
========================================================================== */
/* --- Grain -----------------------------------------------------------------
Une trame de bruit très légère sur toute la page. C'est le remède le plus
direct au rendu « plat » : elle casse l'uniformité des aplats sans qu'on
sache consciemment ce qu'on regarde. */
body::after {
position: fixed;
content: '';
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
z-index: 9998;
pointer-events: none;
/* Dimensions en valeurs absolues, sans '%' : dans une data-URI non encodée,
un pourcentage littéral peut être lu comme une séquence d'échappement. */
background-image: url("data:image/svg+xml;utf8,");
}
html[data-theme="light"] body::after { opacity: 0.05; }
html[data-theme="dark"] body::after { opacity: 0.07; }
/* --- Bandeau cinétique -----------------------------------------------------
Typographie en mouvement continu, alternant plein et contour. */
.ot-ticker {
position: relative;
overflow: hidden;
padding: 26px 0px;
background-color: var(--ot-surface);
border-top: 1px solid var(--ot-border);
border-bottom: 1px solid var(--ot-border);
}
.ot-ticker_track {
display: flex;
width: max-content;
animation: ot-ticker-scroll 44s linear infinite;
/* Promeut la bande sur sa propre couche : l'animation continue n'oblige
plus le navigateur à repeindre la section à chaque image. */
will-change: transform;
}
.ot-ticker_group { display: flex; }
.ot-ticker span {
display: block;
white-space: nowrap;
padding: 0px 26px;
font-size: 40px;
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.035em;
text-transform: uppercase;
color: var(--ot-ink);
}
/* Un mot sur deux en contour : le contraste plein/vide crée le rythme. */
.ot-ticker span:nth-child(even) { color: var(--ot-accent); }
@supports (-webkit-text-stroke: 1px black) {
.ot-ticker span:nth-child(even) {
color: transparent;
-webkit-text-stroke: 1px var(--ot-accent);
}
}
.ot-ticker:hover .ot-ticker_track { animation-play-state: paused; }
@keyframes ot-ticker-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* --- Titre du bandeau : dégradé en lente dérive ---------------------------- */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
.banner-one_heading {
background-size: 240% 100%;
animation: ot-gradient-drift 11s ease-in-out infinite alternate;
}
}
@keyframes ot-gradient-drift {
from { background-position: 0% 50%; }
to { background-position: 100% 50%; }
}
/* --- Grille bento pour les chiffres ----------------------------------------
Quatre colonnes égales, c'est un tableau. Une composition asymétrique avec
une carte vedette, c'est une page qu'on retient. */
@media only screen and (min-width: 992px) {
.counter-one .row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
margin: 0px;
}
/* Neutralise le dimensionnement Bootstrap des colonnes. */
.counter-one .counter-block_two {
width: auto !important;
max-width: none;
flex: none;
padding: 0px;
margin: 0px;
}
/* Consultants = carte vedette, sur deux rangées à gauche. */
.counter-one .counter-block_two:nth-child(2) { grid-column: 1 / 3; grid-row: 1 / 3; }
.counter-one .counter-block_two:nth-child(1) { grid-column: 3 / 4; grid-row: 1 / 2; }
.counter-one .counter-block_two:nth-child(3) { grid-column: 4 / 5; grid-row: 1 / 2; }
.counter-one .counter-block_two:nth-child(4) { grid-column: 3 / 5; grid-row: 2 / 3; }
.counter-one .counter-block_two-inner {
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.counter-one .counter-block_two:nth-child(2) .counter-block_two-inner {
background: var(--ot-gradient) !important;
border-color: transparent;
padding: 42px 38px;
}
.counter-one .counter-block_two:nth-child(2) .counter-block_two-count,
.counter-one .counter-block_two:nth-child(2):hover .counter-block_two-count {
color: #FFFFFF;
font-size: 96px;
}
.counter-one .counter-block_two:nth-child(2) .counter-block_two-title {
color: #FFFFFF;
font-size: 22px;
}
.counter-one .counter-block_two:nth-child(2) .counter-block_two-text {
color: rgba(255,255,255,0.82);
font-size: 16px;
}
/* Le filet d'accent n'a pas de sens sur la carte déjà pleine. */
.counter-one .counter-block_two:nth-child(2) .counter-block_two-inner::after {
display: none;
}
}
/* --- Révélations au défilement ---------------------------------------------
La classe .ot-reveal est posée par le script, jamais dans le HTML : si le
JavaScript ne s'exécute pas, rien n'est masqué. Une révélation qui échoue
ne doit jamais effacer du contenu. */
/* Course courte et durée réduite : la révélation doit accompagner le regard,
pas le faire attendre. Seuls opacity et transform sont animés — les deux
seules propriétés que le navigateur sait traiter sans recalculer la page. */
.ot-reveal {
opacity: 0;
transform: translateY(16px);
transition: opacity 420ms cubic-bezier(0.22,0.61,0.36,1),
transform 420ms cubic-bezier(0.22,0.61,0.36,1);
}
.ot-reveal.ot-in {
opacity: 1;
transform: none;
}
/* ==========================================================================
19. Rythme sombre du haut de page
Le haut restait clinique : bandeau presque vide sur fond quasi blanc.
Deux blocs sombres — le bandeau d'accueil et la section OURPASS — donnent
au parcours une respiration : sombre, clair, teinté, sombre, puis le
bandeau cinétique. Cette alternance est ce qui empêche la page de se lire
comme un document.
========================================================================== */
/* --- Section sombre générique --------------------------------------------
On ne réécrit pas chaque composant : on redéfinit localement les jetons,
et toutes les règles existantes suivent d'elles-mêmes. */
/* Sur tout bloc à fond sombre, --white-color doit redevenir blanc : sinon le
texte du template, qui l'utilise partout, deviendrait sombre sur sombre. */
html[data-theme="light"] .ot-dark-section,
html[data-theme="light"] .banner-one,
html[data-theme="light"] .page-title,
html[data-theme="light"] .clients-one .inner-container,
html[data-theme="light"] .ot-cta_inner,
html[data-theme="light"] .mobile-menu .menu-box,
html[data-theme="light"] .counter-block_two:nth-child(2) .counter-block_two-inner {
--white-color: rgb(255,255,255);
--white-color-rgb: 255,255,255;
}
html[data-theme="light"] .ot-dark-section,
html[data-theme="light"] .banner-one,
html[data-theme="light"] .page-title {
--ot-ink: #FFFFFF;
--ot-muted: rgba(255,255,255,0.74);
--ot-border: rgba(255,255,255,0.16);
--ot-surface: rgba(255,255,255,0.06);
--ot-accent: #C4A5FF;
--ot-accent-soft: rgba(255,255,255,0.12);
--ot-dot: rgba(255,255,255,0.08);
--ot-shadow: rgba(0,0,0,0.40);
color: rgba(255,255,255,0.74);
}
html[data-theme="light"] .ot-dark-section {
position: relative;
overflow: hidden;
background: linear-gradient(150deg, #1A1523 0%, #2E1065 100%);
border-top: none;
border-bottom: none;
}
/* Halo pour éviter l'aplat sur les grandes surfaces sombres. */
html[data-theme="light"] .ot-dark-section::after {
position: absolute;
content: '';
right: -200px;
top: -180px;
width: 760px;
height: 760px;
z-index: 0;
pointer-events: none;
background: radial-gradient(circle closest-side, rgba(118,31,227,0.62) 0%, transparent 100%);
}
html[data-theme="light"] .ot-dark-section > * { position: relative; z-index: 1; }
/* Le sur-titre en pastille et les puces doivent virer au clair. */
html[data-theme="light"] .ot-dark-section .sec-title_title,
html[data-theme="light"] .banner-one .banner-one_title {
border-color: rgba(255,255,255,0.28);
}
html[data-theme="light"] .ot-dark-section .livechat-list li i {
background: rgba(255,255,255,0.16);
box-shadow: none;
}
/* La pastille « OURPASS » reste blanche sur le fond sombre : son texte doit
donc rester foncé, sans quoi il hérite du blanc de la section. */
html[data-theme="light"] .ot-dark-section .livechat-agent {
background-color: #FFFFFF;
color: #1A1523;
border-color: transparent;
}
/* Panneau des visuels : plus lumineux pour se détacher du fond sombre. */
html[data-theme="light"] .ot-dark-section .livechat_image-outer {
background: linear-gradient(150deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.03) 65%, transparent 100%);
}
/* Le bouton plein du bloc sombre passe en blanc, comme dans le bandeau. */
html[data-theme="light"] .ot-dark-section .btn-style-one {
background: #FFFFFF;
box-shadow: 0 6px 20px rgba(0,0,0,0.28);
}
html[data-theme="light"] .ot-dark-section .btn-style-one .text-one { color: #4C1D95; }
/* --- Bandeau d'accueil sombre -------------------------------------------- */
html[data-theme="light"] .banner-one {
background: linear-gradient(158deg, #1A1523 0%, #2E1065 52%, #4C1D95 100%);
border-bottom: none;
padding-top: 215px;
padding-bottom: 105px;
}
/* Dégradé de maillage : trois foyers lumineux plutôt qu'un aplat. */
html[data-theme="light"] .banner-one::before {
width: 100%;
height: 100%;
left: 0px;
top: 0px;
transform: none;
background:
radial-gradient(circle at 18% 12%, rgba(147,51,234,0.55) 0%, transparent 42%),
radial-gradient(circle at 82% 8%, rgba(118,31,227,0.45) 0%, transparent 46%),
radial-gradient(circle at 50% 96%, rgba(196,165,255,0.28) 0%, transparent 52%);
}
html[data-theme="light"] .banner-one_heading {
background: linear-gradient(104deg, #FFFFFF 0%, #E9D8FF 46%, #C4A5FF 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
html[data-theme="light"] .banner-one_title {
color: #FFFFFF;
background-color: rgba(255,255,255,0.12);
}
html[data-theme="light"] .banner-one_text { color: rgba(255,255,255,0.80); }
/* Sur fond sombre, le bouton plein passe en blanc : c'est lui qui doit
capter le regard, pas le dégradé violet noyé dans le fond. */
html[data-theme="light"] .banner-one .newsletter-box .template-btn:nth-child(1) {
background: #FFFFFF;
box-shadow: 0 6px 20px rgba(0,0,0,0.28);
}
html[data-theme="light"] .banner-one .newsletter-box .template-btn:nth-child(1) .text-one {
color: #4C1D95;
}
html[data-theme="light"] .banner-one .newsletter-box .template-btn:nth-child(2) {
border-color: rgba(255,255,255,0.34);
}
html[data-theme="light"] .banner-one .newsletter-box .template-btn:nth-child(2) .text-one,
html[data-theme="light"] .banner-one .newsletter-box .template-btn:nth-child(2):hover .text-one {
color: #FFFFFF;
}
html[data-theme="light"] .banner-one .newsletter-box .template-btn:nth-child(2):hover {
background-color: rgba(255,255,255,0.10);
border-color: rgba(255,255,255,0.62);
}
/* --- Arguments du bandeau -------------------------------------------------
Volontairement PAS des chiffres : ceux-ci sont déjà la matière du bloc
bento en bas de page, les répéter ici affaiblissait les deux. On met donc
en avant ce qui distingue l'offre, repris de la copie des sections. */
.ot-hero-points {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 14px;
margin-top: 44px;
}
.ot-hero-points li {
position: relative;
flex: 0 1 236px;
padding: 18px 22px 18px 50px;
border-radius: 14px;
text-align: left;
border: 1px solid var(--ot-border);
background-color: var(--ot-surface);
}
.ot-hero-points li i {
position: absolute;
left: 20px;
top: 21px;
width: 20px;
height: 20px;
font-size: 10px;
line-height: 20px;
text-align: center;
border-radius: 50%;
color: #4C1D95;
background-color: rgba(255,255,255,0.92);
}
.ot-hero-points strong {
display: block;
font-size: 16px;
font-weight: 650;
line-height: 1.3;
letter-spacing: -0.015em;
margin-bottom: 3px;
color: var(--ot-ink);
}
.ot-hero-points span {
display: block;
font-size: 14px;
line-height: 1.45;
color: var(--ot-muted);
}
/* --- En-tête posé sur le bandeau sombre -----------------------------------
Tant qu'on n'a pas défilé, l'en-tête flotte sur le bandeau : fond
transparent, texte clair, logo à « TECH » blanc. Dès que le template
ajoute .fixed-header, il redevient une barre blanche opaque et reprend
le logo à encre foncée.
ATTENTION — tout ce bloc est réservé aux grands écrans. En dessous de
1024px, le template repasse .main-header en position:relative : l'en-tête
ne survole plus le bandeau, il se pose au-dessus, sur le fond de page.
Un fond transparent avec du texte blanc y devient illisible. */
@media only screen and (min-width: 1024px) {
html[data-theme="light"] .main-header:not(.fixed-header) {
/* L'en-tête survole le bandeau sans en être un descendant : il n'hérite
donc pas de son --white-color. On le repose ici. */
--white-color: rgb(255,255,255);
--white-color-rgb: 255,255,255;
background-color: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
border-bottom-color: transparent;
}
html[data-theme="light"] .main-header:not(.fixed-header) .main-menu .navigation > li > a,
html[data-theme="light"] .main-header:not(.fixed-header) .mobile-nav-toggler,
html[data-theme="light"] .main-header:not(.fixed-header) .ot-theme-toggle {
color: #FFFFFF;
}
html[data-theme="light"] .main-header:not(.fixed-header) .main-menu .navigation > li:hover > a {
color: #C4A5FF;
}
html[data-theme="light"] .main-header:not(.fixed-header) .ot-theme-toggle {
border-color: rgba(255,255,255,0.34);
}
html[data-theme="light"] .main-header:not(.fixed-header) .ot-theme-toggle:hover {
border-color: #FFFFFF;
background-color: rgba(255,255,255,0.12);
color: #FFFFFF;
}
html[data-theme="light"] .main-header:not(.fixed-header) .btn-style-two .text-one { color: #FFFFFF; }
html[data-theme="light"] .main-header:not(.fixed-header) .btn-style-two { border-color: rgba(255,255,255,0.34); }
/* Permutation du logo selon l'état de l'en-tête, en mode clair uniquement.
Le pied de page conserve la règle générale. */
html[data-theme="light"] .main-header:not(.fixed-header) .ot-logo-dark { display: inline-block !important; }
html[data-theme="light"] .main-header:not(.fixed-header) .ot-logo-light { display: none !important; }
} /* fin @media (min-width: 1024px) — en-tête en survol */
/* Ces deux règles valent à toutes les largeurs : une fois défilé, l'en-tête
est une barre blanche, donc logo à encre foncée. */
html[data-theme="light"] .main-header.fixed-header .ot-logo-dark { display: none !important; }
html[data-theme="light"] .main-header.fixed-header .ot-logo-light { display: inline-block !important; }
/* Barre blanche opaque une fois défilé. */
html[data-theme="light"] .main-header.fixed-header .header-lower {
background-color: rgba(255,255,255,0.97);
border-bottom: 1px solid var(--ot-border);
}
/* --- Bandeau de titre des pages intérieures -------------------------------
Les autres pages ouvrent sur un .page-title, l'équivalent du bandeau de
l'accueil. On lui donne le même traitement sombre : cohérence de parcours,
et surtout l'en-tête transparent posé dessus reste lisible partout.
Sans ça, du texte blanc se serait retrouvé sur un fond clair. */
html[data-theme="light"] .page-title {
position: relative;
overflow: hidden;
margin-top: 0px;
padding: 205px 0px 110px;
background: linear-gradient(158deg, #1A1523 0%, #2E1065 52%, #4C1D95 100%);
}
/* Décors du thème d'origine, illisibles sur ce fond. */
html[data-theme="light"] .page-title-icon,
html[data-theme="light"] .page-title-icon-two,
html[data-theme="light"] .page-title-shadow,
html[data-theme="light"] .page-title-shadow_two {
display: none !important;
}
/* Même dégradé de maillage que le bandeau d'accueil. */
html[data-theme="light"] .page-title::before {
position: absolute;
content: '';
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
z-index: 0;
pointer-events: none;
background:
radial-gradient(circle at 18% 12%, rgba(147,51,234,0.50) 0%, transparent 42%),
radial-gradient(circle at 82% 8%, rgba(118,31,227,0.42) 0%, transparent 46%);
}
html[data-theme="light"] .page-title > * { position: relative; z-index: 1; }
.page-title h2 {
color: var(--ot-ink);
font-size: 46px;
letter-spacing: -0.03em;
}
.page-title .bread-crumb li,
.page-title .bread-crumb li a { color: var(--ot-muted); font-size: 15px; }
.page-title .bread-crumb li a:hover { color: #FFFFFF; }
/* --- Contrepartie de l'inversion de --white-color -------------------------
Les vingt endroits où le template l'emploie comme FOND et non comme texte.
Sans ça, ces éléments deviendraient des pastilles sombres. */
html[data-theme="light"] .btn-style-three,
html[data-theme="light"] .video-one_play span,
html[data-theme="light"] .video-box .overlay-box span,
html[data-theme="light"] .service-detail_play span,
html[data-theme="light"] .member-block_one-play span,
html[data-theme="light"] .slider-two_arrow:hover,
html[data-theme="light"] .testimonial-block_two-quote,
html[data-theme="light"] .conversation-one-text,
html[data-theme="light"] .conversation-one-list li a:hover,
html[data-theme="light"] .conversation-search_box .form-group button:hover,
html[data-theme="light"] .slider-one_video .play-box:hover .fa,
html[data-theme="light"] .steps-one .dots-layer .dot-one,
html[data-theme="light"] .steps-one .dots-layer .dot-two,
html[data-theme="light"] .service-block_three-inner:hover .service-block_three-icon,
html[data-theme="light"] .price-block_one.active .price-block_one-inner .price-one_button,
html[data-theme="light"] .price-block_two.active .price-block_two-icon,
html[data-theme="light"] .price-block_two.active .price-block_two-inner .price-two_button,
html[data-theme="light"] .value-block_one.active .value-block_one-icon,
html[data-theme="light"] .info-block_one.active .info-block_one-icon {
background-color: #FFFFFF;
}
/* --- Images de gabarit du template ----------------------------------------
Ces fichiers ne sont pas des visuels : ce sont les rectangles gris livrés
avec le thème, portant leurs dimensions écrites dessus (« 600 X 600 »).
Ils étaient affichés tels quels sur about, match, register et faq.
Masqués ici plutôt que supprimés du HTML : réversible, et le jour où de
vraies images arrivent il suffit de changer le src. */
img[src*="resource/cta.png"],
img[src*="resource/story.png"],
img[src*="resource/team-1.jpg"],
img[src*="resource/team-2.jpg"],
img[src*="resource/author-2.png"],
img[src*="resource/author-3.png"],
img[src*="resource/author-4.png"],
img[src*="resource/service-detail"] {
display: none !important;
}
/* --- Décors résiduels du template, dans les deux thèmes -------------------
Ces couches décoratives accompagnaient les illustrations d'origine. Depuis
qu'elles sont remplacées par des maquettes d'interface, elles n'ont plus
de rôle et brouillent la lecture — en clair comme en sombre. */
.banner-one_shadow,
.banner-one_icon,
.livechat-layer,
.livechat-icon,
.livechat_image-outer .color-layer,
.footer_pattern {
display: none !important;
}
/* --- Section Consultants : moins de blanc nu ------------------------------ */
html[data-theme="light"] .conversation-one {
background-color: #FFFFFF;
}
html[data-theme="light"] .conversation-one::before {
width: 820px;
height: 820px;
background: radial-gradient(circle closest-side, rgba(118,31,227,0.26) 0%, transparent 100%);
}
/* ==========================================================================
20. Graphismes réseau
Les illustrations stock — trois styles différents, personnages plats
génériques — sont remplacées par des compositions dérivées du polyèdre du
logo : nœuds, arêtes, facettes triangulaires. Même vocabulaire pour les
quatre, chacune racontant sa section.
Elles sont en SVG inline plutôt qu'en ![]()
précisément pour que le CSS
pilote leurs couleurs : un fichier externe ne saurait pas s'adapter au
thème ni aux sections sombres.
========================================================================== */
.ot-net {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
.ot-net_facets polygon { fill: var(--ot-net-facet); }
.ot-net_edges line {
stroke: var(--ot-net-edge);
stroke-width: 1.4;
opacity: 0.55;
}
.ot-net_nodes circle { fill: var(--ot-net-node); }
.ot-net_core { fill: var(--ot-net-core); }
/* Dernier maillon d'OURPASS : rompu après consultation. */
.ot-net_edge-dash {
stroke: var(--ot-net-edge);
stroke-width: 1.4;
opacity: 0.5;
stroke-dasharray: 5 7;
}
.ot-net_node-open {
fill: none;
stroke: var(--ot-net-edge);
stroke-width: 2;
opacity: 0.7;
}
/* --- Couleurs par contexte ------------------------------------------------ */
html[data-theme="light"] {
--ot-net-facet: #8B5CF6;
--ot-net-edge: #A78BFA;
--ot-net-node: #7C3AED;
--ot-net-core: #5B21B6;
}
html[data-theme="dark"] {
--ot-net-facet: #A855F7;
--ot-net-edge: #C4A5FF;
--ot-net-node: #C4A5FF;
--ot-net-core: #E9D8FF;
}
/* Sections sombres en mode clair : mêmes valeurs que le thème sombre. */
html[data-theme="light"] .ot-dark-section,
html[data-theme="light"] .banner-one {
--ot-net-facet: #A855F7;
--ot-net-edge: #C4A5FF;
--ot-net-node: #C4A5FF;
--ot-net-core: #E9D8FF;
}
/* --- Le graphisme du bandeau redevient visible --------------------------- */
html[data-theme="light"] .banner-one_image { display: block !important; }
.banner-one_image {
position: relative;
max-width: 620px;
margin: 56px auto 0;
opacity: 0.9;
}
/* Dérive très lente de la constellation : une seule transformation animée,
donc composée par le GPU sans repeindre la section. */
.banner-one_image .ot-net {
transform-origin: 50% 50%;
animation: ot-net-drift 46s ease-in-out infinite alternate;
will-change: transform;
}
@keyframes ot-net-drift {
from { transform: rotate(-2.2deg) scale(1); }
to { transform: rotate(2.2deg) scale(1.035); }
}
/* ==========================================================================
21. Maquettes d'interface
Les illustrations sont remplacées par des représentations épurées des
vrais outils OURTECH. C'est le parti pris quasi universel des références
2026 (Figma, Calendly, Loom) : montrer le produit plutôt que le suggérer.
Règle retenue de la veille : UN parcours clair par maquette, jamais toute
la surface du produit.
Construites en HTML/CSS — nettes à toute résolution, quelques Ko, et les
couleurs suivent le thème comme le reste de la page.
========================================================================== */
.ot-ui {
position: relative;
border-radius: 14px;
overflow: hidden;
border: 1px solid var(--ot-ui-border);
background-color: var(--ot-ui-bg);
box-shadow: 0 24px 60px var(--ot-shadow);
font-size: 13px;
line-height: 1.45;
text-align: left;
}
/* --- Barre de navigateur -------------------------------------------------- */
.ot-ui_bar {
display: flex;
align-items: center;
gap: 6px;
padding: 11px 14px;
border-bottom: 1px solid var(--ot-ui-border);
background-color: var(--ot-ui-bar);
}
.ot-ui_dot {
width: 9px;
height: 9px;
border-radius: 50%;
background-color: var(--ot-ui-line);
}
.ot-ui_url {
margin-left: 10px;
padding: 3px 12px;
border-radius: 20px;
font-size: 11px;
font-style: normal;
color: var(--ot-ui-soft);
background-color: var(--ot-ui-field);
}
/* --- Corps ---------------------------------------------------------------- */
.ot-ui_body { padding: 20px; }
.ot-ui_title {
font-size: 15px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--ot-ui-ink);
margin-bottom: 16px;
}
.ot-ui_label {
display: block;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--ot-ui-soft);
margin-bottom: 5px;
}
.ot-ui_field {
display: flex;
align-items: center;
gap: 7px;
padding: 9px 12px;
margin-bottom: 13px;
border-radius: 8px;
border: 1px solid var(--ot-ui-border);
background-color: var(--ot-ui-field);
color: var(--ot-ui-ink);
font-size: 13px;
}
.ot-ui_field--focus { border-color: var(--ot-accent); }
/* Curseur de saisie */
.ot-ui_caret {
display: inline-block;
width: 1.5px;
height: 14px;
background-color: var(--ot-accent);
animation: ot-ui-caret 1.1s step-end infinite;
}
@keyframes ot-ui-caret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
.ot-ui_dots { letter-spacing: 2px; color: var(--ot-ui-soft); }
.ot-ui_row { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.ot-ui_row > * { margin-bottom: 0px; }
.ot-ui_grow { flex: 1; }
.ot-ui_select {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 9px 12px;
border-radius: 8px;
border: 1px solid var(--ot-ui-border);
background-color: var(--ot-ui-field);
color: var(--ot-ui-ink);
white-space: nowrap;
}
.ot-ui_select span:last-child { color: var(--ot-ui-soft); font-size: 10px; }
/* Interrupteur */
.ot-ui_switch {
position: relative;
width: 34px;
height: 19px;
border-radius: 20px;
flex: 0 0 34px;
background: var(--ot-gradient);
}
.ot-ui_switch::after {
position: absolute;
content: '';
right: 3px;
top: 3px;
width: 13px;
height: 13px;
border-radius: 50%;
background-color: #FFFFFF;
}
.ot-ui_btn {
display: block;
padding: 11px;
border-radius: 8px;
text-align: center;
font-size: 13px;
font-weight: 600;
color: #FFFFFF;
background: var(--ot-gradient);
}
/* --- Cartes de résultat --------------------------------------------------- */
.ot-ui_results { margin-top: 16px; }
.ot-ui_card {
display: flex;
align-items: center;
gap: 11px;
padding: 11px 13px;
margin-top: 9px;
border-radius: 10px;
border: 1px solid var(--ot-ui-border);
background-color: var(--ot-ui-field);
}
.ot-ui_avatar {
flex: 0 0 26px;
width: 26px;
height: 26px;
border-radius: 8px;
background: var(--ot-gradient);
opacity: 0.85;
}
.ot-ui_card-main { flex: 1; min-width: 0px; }
.ot-ui_card-title {
font-size: 12.5px;
font-weight: 600;
color: var(--ot-ui-ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ot-ui_card-title,
.ot-ui_card-meta { display: block; }
.ot-ui_card-meta { font-size: 11px; color: var(--ot-ui-soft); }
/* --- Étapes (section Clients) --------------------------------------------- */
.ot-ui_step {
display: flex;
align-items: center;
gap: 11px;
padding: 11px 0px;
border-bottom: 1px solid var(--ot-ui-border);
}
.ot-ui_step:last-child { border-bottom: none; }
.ot-ui_step-icon {
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 50%;
font-size: 10px;
line-height: 22px;
text-align: center;
color: #FFFFFF;
background: var(--ot-gradient);
}
.ot-ui_step-icon--todo {
background: none;
border: 1.5px solid var(--ot-ui-line);
line-height: 19px;
color: var(--ot-ui-soft);
}
.ot-ui_step-label { flex: 1; font-size: 12.5px; color: var(--ot-ui-ink); }
/* --- Tableau de bord (section OURSCOPE) ----------------------------------- */
.ot-ui_tabs {
display: flex;
gap: 6px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.ot-ui_tab {
padding: 5px 12px;
border-radius: 20px;
font-size: 11px;
font-weight: 600;
color: var(--ot-ui-soft);
border: 1px solid var(--ot-ui-border);
}
.ot-ui_tab--on {
color: #FFFFFF;
border-color: transparent;
background: var(--ot-gradient);
}
.ot-ui_tiles {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 9px;
margin-bottom: 14px;
}
.ot-ui_tile {
padding: 12px 11px;
border-radius: 10px;
border: 1px solid var(--ot-ui-border);
background-color: var(--ot-ui-field);
}
.ot-ui_tile b {
display: block;
font-size: 19px;
font-weight: 700;
letter-spacing: -0.03em;
color: var(--ot-ui-ink);
}
.ot-ui_tile span {
display: block;
font-size: 10px;
line-height: 1.3;
color: var(--ot-ui-soft);
}
/* Barre de progression */
.ot-ui_meter {
height: 5px;
border-radius: 5px;
margin-top: 8px;
overflow: hidden;
background-color: var(--ot-ui-border);
}
.ot-ui_meter i {
display: block;
height: 100%;
border-radius: 5px;
background: var(--ot-gradient);
}
.ot-ui_tag {
flex: 0 0 auto;
padding: 3px 9px;
border-radius: 20px;
font-size: 10px;
font-weight: 600;
color: var(--ot-accent);
background-color: var(--ot-accent-soft);
border: 1px solid var(--ot-ui-border);
}
.ot-ui_tag--done { color: #16A34A; background-color: rgba(22,163,74,0.10); }
.ot-ui_tag--dead { color: var(--ot-ui-soft); background-color: transparent; }
/* Apparition échelonnée des résultats, en boucle.
La boucle est nécessaire : ces maquettes sont sous la ligne de flottaison,
une animation jouée une seule fois au chargement serait terminée avant
qu'on arrive dessus. Les cartes restent visibles ~75% du cycle. */
.ot-ui_card--in {
opacity: 0;
animation: ot-ui-pop 9s cubic-bezier(0.22,0.61,0.36,1) infinite;
}
.ot-ui_card--in:nth-of-type(1) { animation-delay: 0.2s; }
.ot-ui_card--in:nth-of-type(2) { animation-delay: 0.55s; }
.ot-ui_card--in:nth-of-type(3) { animation-delay: 0.9s; }
@keyframes ot-ui-pop {
0% { opacity: 0; transform: translateY(10px); }
8%, 84% { opacity: 1; transform: none; }
96%, 100% { opacity: 0; transform: translateY(10px); }
}
/* --- Vie des maquettes ----------------------------------------------------
Trois mouvements lents et indépendants, tous en transform ou opacity
uniquement, donc composés par le GPU sans repeindre la page. */
.ot-ui {
animation: ot-ui-float 7.5s ease-in-out infinite alternate;
will-change: transform;
}
.ot-dark-section .ot-ui { animation-duration: 8.5s; }
.ot-ourscope .ot-ui { animation-duration: 6.5s; }
@keyframes ot-ui-float {
from { transform: translateY(0); }
to { transform: translateY(-9px); }
}
/* Reflet qui balaie le cadre, comme sur un écran réel. */
.ot-ui::after {
position: absolute;
content: '';
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
z-index: 2;
pointer-events: none;
transform: translateX(-100%);
background: linear-gradient(104deg, transparent 42%, var(--ot-ui-shine) 50%, transparent 58%);
animation: ot-ui-sweep 9s ease-in-out infinite;
}
@keyframes ot-ui-sweep {
0%, 68% { transform: translateX(-100%); }
86%, 100% { transform: translateX(100%); }
}
/* La barre de progression se remplit en boucle. */
.ot-ui_meter i { animation: ot-ui-meter 9s ease-in-out infinite; }
@keyframes ot-ui-meter {
0% { transform: scaleX(0); }
22%, 84% { transform: scaleX(1); }
100% { transform: scaleX(0); }
}
.ot-ui_meter i { transform-origin: left center; }
/* ==========================================================================
Plan de travail du bandeau
Le bandeau montrait un formulaire de recherche, trop proche du dépôt de
candidature juste en dessous. Remplacé par un format large et court :
du code à gauche, un suivi de projet à droite. Registre technologie et
gestion de projet, sans redite avec les sections suivantes.
========================================================================== */
.ot-ui--wide { font-size: 12px; }
.ot-ui_split {
display: grid;
grid-template-columns: 1.05fr 1fr;
}
.ot-ui_pane { padding: 16px 18px; }
.ot-ui_pane + .ot-ui_pane { border-left: 1px solid var(--ot-ui-border); }
.ot-ui_pane-title {
display: flex;
align-items: center;
gap: 7px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--ot-ui-soft);
margin-bottom: 13px;
}
/* --- Volet code ----------------------------------------------------------- */
.ot-code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 11.5px;
line-height: 1.85;
}
.ot-code_line { display: flex; gap: 12px; white-space: nowrap; }
.ot-code_num {
flex: 0 0 16px;
text-align: right;
color: var(--ot-ui-soft);
opacity: 0.55;
}
.ot-code_txt { color: var(--ot-ui-ink); }
.tk-k { color: var(--ot-code-key); }
.tk-s { color: var(--ot-code-str); }
.tk-c { color: var(--ot-ui-soft); font-style: italic; }
.tk-f { color: var(--ot-code-fn); }
/* Les lignes s'écrivent l'une après l'autre, puis le cycle recommence.
Seule la largeur du masque est animée, pas le texte lui-même. */
.ot-code_line--type {
overflow: hidden;
animation: ot-code-type 9s steps(28, end) infinite;
}
@keyframes ot-code-type {
0% { max-width: 0; }
26% { max-width: 100%; }
88% { max-width: 100%; }
100% { max-width: 100%; }
}
/* --- Volet suivi de projet ------------------------------------------------ */
.ot-kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.ot-kanban_head {
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--ot-ui-soft);
margin-bottom: 7px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ot-kanban_card {
height: 26px;
margin-bottom: 6px;
border-radius: 7px;
border: 1px solid var(--ot-ui-border);
background-color: var(--ot-ui-field);
position: relative;
overflow: hidden;
}
.ot-kanban_card::before {
position: absolute;
content: '';
left: 9px;
top: 8px;
height: 4px;
width: 52%;
border-radius: 4px;
background-color: var(--ot-ui-line);
}
.ot-kanban_card::after {
position: absolute;
content: '';
left: 9px;
top: 16px;
height: 3px;
width: 32%;
border-radius: 3px;
background-color: var(--ot-ui-line);
opacity: 0.6;
}
.ot-kanban_card--on {
border-color: transparent;
background: var(--ot-gradient);
}
.ot-kanban_card--on::before,
.ot-kanban_card--on::after { background-color: rgba(255,255,255,0.75); }
/* Une carte progresse de colonne en colonne, en boucle. */
.ot-kanban_card--move { animation: ot-kanban-move 9s ease-in-out infinite; }
@keyframes ot-kanban-move {
0%, 22% { transform: translate(0, 0); }
33%, 55% { transform: translate(calc(100% + 7px), -32px); }
66%, 88% { transform: translate(calc(200% + 14px), -64px); }
100% { transform: translate(0, 0); }
}
/* --- Jetons par contexte -------------------------------------------------- */
html[data-theme="light"] {
--ot-code-key: #7C3AED;
--ot-code-str: #0E9F6E;
--ot-code-fn: #2563EB;
--ot-ui-bg: #FFFFFF;
--ot-ui-bar: #F5F2FB;
--ot-ui-field: #FAF8FF;
--ot-ui-border: #E9E5F0;
--ot-ui-ink: #1A1523;
--ot-ui-soft: #6B6478;
--ot-ui-line: #D8D0E6;
--ot-ui-shine: rgba(118,31,227,0.07);
}
html[data-theme="dark"],
html[data-theme="light"] .ot-dark-section,
html[data-theme="light"] .banner-one {
--ot-code-key: #C4A5FF;
--ot-code-str: #6EE7B7;
--ot-code-fn: #93C5FD;
--ot-ui-bg: #221C30;
--ot-ui-bar: #2C2440;
--ot-ui-field: #2A2338;
--ot-ui-border: rgba(255,255,255,0.12);
--ot-ui-ink: #FFFFFF;
--ot-ui-soft: rgba(255,255,255,0.60);
--ot-ui-line: rgba(255,255,255,0.22);
--ot-ui-shine: rgba(255,255,255,0.09);
}
/* Dans les blocs sombres, l'accent des étiquettes doit rester lisible. */
html[data-theme="light"] .ot-dark-section .ot-ui_tag,
html[data-theme="light"] .banner-one .ot-ui_tag {
color: #C4A5FF;
background-color: rgba(255,255,255,0.10);
}
/* --- Mise en place -------------------------------------------------------- */
/* Le panneau teinté qui portait les illustrations n'a plus lieu d'être :
la maquette a son propre cadre. */
.conversation-one_image,
.livechat_image-outer {
background: none;
padding: 0px;
}
/* Format large et court : le bandeau porte un plan de travail, pas un
formulaire. Il occupe toute la largeur utile plutôt que la colonne de texte. */
.banner-one_image {
max-width: 880px;
margin: 54px auto 0;
opacity: 1;
}
html[data-theme="light"] .banner-one_image { display: block !important; }
/* ==========================================================================
22. Pages intérieures
Contact, connexion, inscription, candidature, tarifs, recherche de CV.
Le template y puise dans cinq variables différentes selon les blocs, avec
des sélecteurs très spécifiques. Plutôt que suivre chaque règle, on
normalise les familles de composants. Le !important est assumé ici : il
n'y a pas d'autre moyen de passer devant des sélecteurs de ce niveau.
========================================================================== */
/* --- Champs de formulaire ------------------------------------------------- */
html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="email"],
html[data-theme="light"] input[type="password"],
html[data-theme="light"] input[type="tel"],
html[data-theme="light"] input[type="search"],
html[data-theme="light"] input[type="number"],
html[data-theme="light"] input[type="date"],
html[data-theme="light"] input[type="url"],
html[data-theme="light"] select,
html[data-theme="light"] textarea {
background-color: #FFFFFF !important;
border: 1px solid var(--ot-border) !important;
color: var(--ot-ink) !important;
border-radius: 10px !important;
font-size: 15px !important;
box-shadow: none;
transition: border-color 160ms ease, box-shadow 160ms ease;
}
html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus {
border-color: var(--ot-accent) !important;
box-shadow: 0 0 0 3px rgba(118,31,227,0.12);
outline: none;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color: #8B8397 !important; opacity: 1; }
html[data-theme="light"] input::-webkit-input-placeholder,
html[data-theme="light"] textarea::-webkit-input-placeholder { color: #8B8397 !important; }
html[data-theme="light"] label,
html[data-theme="light"] .register-form label,
html[data-theme="light"] .form-label {
color: var(--ot-ink) !important;
font-weight: 500;
}
html[data-theme="light"] .register-form .check-box label { color: var(--ot-muted) !important; }
html[data-theme="light"] .register-form .creat-account { color: var(--ot-muted); }
/* Champ de fichier : le contrôle natif reste illisible sans cadrage. */
html[data-theme="light"] input[type="file"] {
color: var(--ot-ink) !important;
padding: 11px 14px;
border: 1px dashed var(--ot-border) !important;
border-radius: 10px;
background-color: var(--ot-surface) !important;
width: 100%;
}
/* --- Sections des pages intérieures --------------------------------------- */
html[data-theme="light"] .contact-info,
html[data-theme="light"] .team-detail_form,
html[data-theme="light"] .register-one,
html[data-theme="light"] .price-four,
html[data-theme="light"] .map-one {
background-color: var(--ot-surface);
border-color: var(--ot-border);
}
html[data-theme="light"] .contact-info { border-bottom: 1px solid var(--ot-border); }
html[data-theme="light"] .team-detail_form { border-top: 1px solid var(--ot-border); }
/* Cartes : coordonnées, tarifs, services, valeurs. */
html[data-theme="light"] .info-block_one-inner,
html[data-theme="light"] .price-block_four-inner,
html[data-theme="light"] .service-block_two-inner,
html[data-theme="light"] .choose-block_three-inner,
html[data-theme="light"] .register-one .register-form_outer,
html[data-theme="light"] .team-detail_form-outer {
background-color: #FFFFFF !important;
border: 1px solid var(--ot-border);
border-radius: 14px;
box-shadow: 0 10px 30px rgba(26,21,35,0.05);
}
/* Titres et textes de ces cartes. */
html[data-theme="light"] .info-block_one-title,
html[data-theme="light"] .price-block_four-title,
html[data-theme="light"] .service-block_two-heading,
html[data-theme="light"] .service-block_two-heading a,
html[data-theme="light"] .choose-block_three-title { color: var(--ot-ink) !important; }
html[data-theme="light"] .info-block_one-text,
html[data-theme="light"] .info-block_one-text a,
html[data-theme="light"] .price-block_four-text,
html[data-theme="light"] .service-block_two-text,
html[data-theme="light"] .choose-block_three-text { color: var(--ot-muted) !important; }
html[data-theme="light"] .info-block_one-text a:hover,
html[data-theme="light"] .service-block_two-heading a:hover { color: var(--ot-accent) !important; }
/* Listes des offres tarifaires. */
html[data-theme="light"] .price-block_four-list li { color: var(--ot-muted); }
html[data-theme="light"] .price-block_four-list li i { color: var(--ot-accent); }
/* Prix et montants. */
html[data-theme="light"] .price-block_four-price,
html[data-theme="light"] .price-block_four-price span { color: var(--ot-ink) !important; }
/* Icônes rondes des blocs. */
html[data-theme="light"] .info-block_one-icon,
html[data-theme="light"] .choose-block_three-icon {
color: var(--ot-accent);
background-color: var(--ot-accent-soft);
}
/* Tableaux — historique de facturation, résultats de recherche. */
html[data-theme="light"] table { color: var(--ot-ink); }
html[data-theme="light"] table th {
color: var(--ot-ink);
background-color: var(--ot-surface);
border-color: var(--ot-border) !important;
}
html[data-theme="light"] table td {
color: var(--ot-muted);
border-color: var(--ot-border) !important;
}
/* --------------------------------------------------------------------------
23. Adaptations mobiles
-------------------------------------------------------------------------- */
@media only screen and (max-width: 991px) {
h1 { font-size: 42px; }
h2 { font-size: 32px; }
.banner-one { padding-top: 135px; }
.banner-one_heading { font-size: 42px; }
.banner-one_text { font-size: 17px; }
.banner-one::before { width: 700px; height: 420px; top: -100px; }
.sec-title_heading { font-size: 32px; }
.conversation-one,
.livechat { padding: 62px 0px; }
.clients-one .inner-container { padding: 48px 24px; }
.counter-one { padding-bottom: 62px; }
.ot-cta { padding-bottom: 62px; }
.ot-cta_inner { padding: 46px 28px; }
.ot-cta_heading { font-size: 29px; }
.main-footer .widgets-section { padding: 50px 0px 8px; }
.footer-widget_text { max-width: none; }
.ot-theme-toggle { margin-left: 10px; }
.ot-ticker { padding: 18px 0px; }
.ot-ticker span { font-size: 26px; padding: 0px 18px; }
/* L'en-tête ne survole plus le bandeau à cette largeur : le template
ramène le retrait à 100px, on ne le regonfle pas. */
html[data-theme="light"] .banner-one { padding-top: 110px; padding-bottom: 64px; }
.ot-hero-points { margin-top: 32px; gap: 10px; }
.ot-hero-points li { flex: 1 1 100%; padding: 14px 18px 14px 46px; }
.ot-hero-points li i { left: 17px; top: 16px; }
.ot-hero-points strong { font-size: 15px; }
.ot-hero-points span { font-size: 13px; }
/* Les panneaux sous les visuels mangeaient de la largeur utile. */
.conversation-one_image,
.livechat_image-outer { padding: 16px; border-radius: 16px; }
/* La grille bento est réservée au grand écran, mais la carte vedette
mérite de rester identifiable une fois les cartes empilées. */
.counter-one .counter-block_two:nth-child(2) .counter-block_two-inner {
background: var(--ot-gradient) !important;
border-color: transparent;
}
.counter-one .counter-block_two:nth-child(2) .counter-block_two-count,
.counter-one .counter-block_two:nth-child(2):hover .counter-block_two-count { color: #FFFFFF; }
.counter-one .counter-block_two:nth-child(2) .counter-block_two-title { color: #FFFFFF; }
.counter-one .counter-block_two:nth-child(2) .counter-block_two-text { color: rgba(255,255,255,0.82); }
.counter-one .counter-block_two:nth-child(2) .counter-block_two-inner::after { display: none; }
.banner-one_image { max-width: 620px; margin-top: 40px; }
/* Les deux volets passent l'un sous l'autre. */
.ot-ui_split { grid-template-columns: 1fr; }
.ot-ui_pane + .ot-ui_pane {
border-left: none;
border-top: 1px solid var(--ot-ui-border);
}
.ot-ui_body { padding: 16px; }
.ot-ui_title { font-size: 14px; margin-bottom: 13px; }
.ot-ui_tiles { gap: 7px; }
.ot-ui_tile { padding: 10px 9px; }
.ot-ui_tile b { font-size: 17px; }
/* Le bandeau clients respire mal en pastilles serrées. */
.clients-one .ot-clients-row { gap: 14px; }
.clients-one .clients-box { padding: 10px 14px; }
.clients-one .clients-box img { max-height: 34px; }
}
/* --- En-tête compact ------------------------------------------------------
Sous 1024px le template passe .outer-box en display:block. Le bouton de
thème (inline-flex) et le burger (block) se retrouvaient alors sur deux
lignes distinctes. On les remet sur une rangée, alignés à droite. */
@media only screen and (max-width: 1023px) {
.main-header .outer-box {
display: flex;
align-items: center;
justify-content: flex-end;
}
.ot-theme-toggle { margin-left: 8px; flex-shrink: 0; }
.main-header .mobile-nav-toggler { margin-left: 12px; }
}
@media only screen and (max-width: 767px) {
.banner-one_heading { font-size: 35px; }
.sec-title_heading { font-size: 27px; }
.banner-one .newsletter-box { flex-direction: column; }
.banner-one .newsletter-box .template-btn { width: 100%; }
.banner-one .newsletter-box .btn-wrap { float: none; display: block; }
.footer-bottom .inner-container { flex-direction: column; text-align: center; }
.ot-footer_legal { justify-content: center; }
.ot-cta_buttons { flex-direction: column; }
.ot-cta_buttons .template-btn { width: 100%; }
.ot-cta_buttons .btn-wrap { float: none; display: block; }
}
/* --- Téléphones : palier qui manquait ------------------------------------- */
@media only screen and (max-width: 575px) {
.banner-one_heading { font-size: 30px; }
.banner-one_text { font-size: 16px; }
.banner-one_title { font-size: 13px; padding: 6px 14px; }
.sec-title_heading { font-size: 24px; }
.sec-title_text { font-size: 16px; }
.ot-ticker { padding: 14px 0px; }
.ot-ticker span { font-size: 20px; padding: 0px 13px; }
.conversation-one,
.livechat { padding: 48px 0px; }
.conversation-one_image,
.livechat_image-outer { padding: 12px; }
.livechat-list li { font-size: 15px; padding-left: 32px; }
.counter-block_two-inner { padding: 24px 20px; }
.counter-block_two-count { font-size: 38px; }
.clients-one { padding-bottom: 56px; }
.clients-one .inner-container { padding: 38px 18px; border-radius: 14px; }
.ot-cta_inner { padding: 36px 20px; border-radius: 14px; }
.ot-cta_heading { font-size: 24px; }
.ot-cta_text { font-size: 16px; }
.main-footer .widgets-section { padding: 40px 0px 4px; }
.footer-title { font-size: 14px; margin-bottom: 14px; }
/* Deux logos par ligne plutôt qu'une file étirée. */
.clients-one .ot-clients-row .clients-box { flex: 0 0 calc(50% - 7px); text-align: center; }
/* Maquettes : on resserre sans casser la lisibilité. */
.ot-ui { font-size: 12px; }
.ot-ui_body { padding: 14px; }
.ot-ui_url { font-size: 10px; }
.ot-ui_field, .ot-ui_select { padding: 8px 10px; font-size: 12px; }
.ot-ui_card { padding: 9px 10px; }
.ot-ui_card-title { font-size: 12px; }
.ot-ui_tile b { font-size: 15px; }
.ot-ui_tile span { font-size: 9px; }
.ot-ui_tag { padding: 2px 7px; font-size: 9px; }
.banner-one_image { max-width: 100%; }
.ot-ui_pane { padding: 13px 14px; }
.ot-code { font-size: 10.5px; line-height: 1.75; }
.ot-kanban { gap: 5px; }
.ot-kanban_card { height: 22px; }
.ot-kanban_head { font-size: 8.5px; }
}
/* --------------------------------------------------------------------------
22. Accessibilité — respect de « animations réduites »
Tout ce qui bouge s'arrête, mais rien ne disparaît : le contenu révélé
reste visible, le bandeau cinétique reste lisible à l'arrêt.
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.btn-style-one:hover,
.counter-block_two-inner:hover,
.clients-one .clients-box:hover { transform: none; }
/* Le filet d'accent reste affiché, mais sans balayage. */
.counter-block_two-inner::after { transition: none; transform: scaleX(1); }
.ot-ticker_track { animation: none; }
.banner-one_heading { animation: none; }
/* Les cartes des maquettes démarrent à opacity:0 et sont révélées PAR
l'animation. Couper l'animation sans forcer opacity:1 les effacerait —
le même piège que les chiffres odometer. Même logique pour la ligne de
code, dont la largeur est pilotée par l'animation. */
.ot-ui_card--in { opacity: 1; animation: none; }
.ot-code_line--type { animation: none; max-width: 100%; overflow: visible; }
.ot-ui_meter i { animation: none; transform: none; }
.ot-ui_caret,
.ot-ui,
.ot-kanban_card--move { animation: none; }
.ot-ui::after { animation: none; opacity: 0; }
.ot-reveal { opacity: 1; transform: none; transition: none; }
html[data-theme] body,
html[data-theme] .main-header,
html[data-theme] .counter-block_two-inner,
html[data-theme] .ot-cta_inner,
html[data-theme] .main-footer { transition: none; }
}