/*
Theme Name: Page Builder Framework Child
Theme URI: https://wp-pagebuilderframework.com
Template: page-builder-framework
Author: David Vongries
Author URI: https://mapsteps.com
Description: Page Builder Framework is a super fast, lightweight (less than 50kb on the frontend) and highly customizible WordPress theme made to work with all page builders such as Elementor, Beaver Builder, Visual Composer, SiteOrigin, Divi, Thrive Architect, Brizy and more. It can be daunting to look for the perfect theme to pair with the page builder you love. Page Builder Framework is the only theme that has been specifically created for Page Builders. It has been written from ground up with SEO in mind, is 100% Gutenberg compatible and follows the latest web standards (HTML5 and schema.org markup). With its minimalistic approach and lots of customization options in the WordPress customizer, it enables you to build almost any type of website such as a Blog, Portfolio website, Agency website or WooCommerce storefront. Agency owners and Developers love Page Builder Framework for its flexibility and extendability when it comes to building outstanding client websites. If you’re not a coder, don’t worry! With endless options in the WordPress customizer it’s the perfect fit for users at any skill level. Are you using a Page Builder and still looking for the perfect theme? Look no further.
Tags: one-column,two-columns,left-sidebar,right-sidebar,custom-colors,custom-menu,featured-images,full-width-template,custom-logo,custom-background,threaded-comments,translation-ready,blog,news,e-commerce,theme-options,block-styles,wide-blocks
Version: 2.11.6.1758127041
Updated: 2025-09-17 16:37:21

*/

:root{
    --bg:#0a192f;
    --panel:#112240;
    --text:#c2c8da;
    --muted:#a8b2d1;
    --accent:#64ffda;
    --halo-size: 250px;           /* diamètre de l’anneau */
    --halo-border: 2px;          /* épaisseur du trait */
    --halo-rgb: 18,176,255;
    --container-max: 1200px;
    --container-gutter: clamp(16px, 4vw, 32px);
}
html{
    scroll-behavior:smooth;
    scroll-padding-top:80px;
    margin:0!important;
}
body{
    counter-reset:sec;
    background:var(--bg) !important;
    color:var(--text)!important;
    line-height:1.6;
    font-family: "Inter", sans-serif !important;
}
a{
    color:var(--accent);
    text-decoration:none
    
} 
a:hover{
    opacity:.9;
}
.wp-site-blocks,.site{
    max-width:1100px;
    margin:0 auto;
    padding:0 20px;
}

.section h2{
    color:#ccd6f6;
    font-size:clamp(28px,4vw,34px);
    margin:0 0 20px;
    position:relative;
    padding-left:56px;
}
.section h2::before{
    counter-increment:sec;
    content:"0" counter(sec) ".";
    position:absolute;
    left:0;
    top:0;
    color:var(--accent);
    font-family:ui-monospace,Menlo,monospace;
}
.card{
    background:var(--panel);
    border:1px solid rgba(100,255,218,.12);
    border-radius:12px;padding:18px;
}
.grid{
    display:grid;
    gap:20px;
}
@media(min-width:720px){
    .grid.cols-2{
        grid-template-columns:repeat(2,1fr)
    }
    .grid.cols-3{
        grid-template-columns:repeat(3,1fr)
    }
}
.card h3{
    color:#e6f1ff;
    margin:0 0 8px;
}
.small{
    color:#a8b2d1;
    font-size:.95rem;
}
.tags{
    margin-top:10px
} 
.tag{
    display:inline-block;
    padding:2px 8px;
    border:1px solid rgba(100,255,218,.35);
    border-radius:999px;
    font-size:.85rem;
    color:var(--muted);
    margin:0 6px 6px 0;
}


.hero h1{
    color:#e6f1ff;
    font-size:clamp(34px,6vw,46px);
    margin:.2em 0;
}
.hero p{
    max-width:720px;
}
.timeline{
    list-style:none;
    margin:0;
    padding:0;
}
.timeline li{
    margin:18px 0;
    padding-left:14px;
    border-left:2px solid rgba(100,255,218,.2);
}
.timeline li strong{
    color:#e6f1ff;
}
h3 {
    font-size: 25px;
    color: white!important;
}

.bloc_droite b {
    color: white;
}

@media (pointer:fine) {
  .cursor-halo{
    position: fixed;
        left: 0;
        top: 0;
        z-index: 9999;
        width: 1px;
        height: 1px;
        border-radius: 50%;
        background: rgba(var(--halo-rgb), .35);
        box-shadow: 0 0 300px 300px rgba(var(--halo-rgb), .35);
        pointer-events: none;
        transition: opacity .2s;
        will-change: transform;
        opacity: .4;
  }
  .cursor-halo.is-hidden{ opacity: 0; }
}


section#expertise {
    padding-top: 60px;
}
.navigation a {
    padding: 10px 0;
    text-transform: uppercase;
    font-size: 12px;
    color: rgb(100 116 139);
    font-weight: bold;
    letter-spacing: 2px;
    position: relative;
    padding-left: 50px;
    transition: .4s ease;
}

.navigation a:before {
content: "";
    height: 1px;
    left: 0;
    width: 30px;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    background: rgb(100 116 139);
    transition: .4s ease;
}

.site-nav a[aria-current="page"], .navigation a:hover {
  color: white;
  padding-left: 65px;
}

.site-nav a[aria-current="page"]::before, .navigation a:hover::before {
  width: 50px;           /* par ex. soulignement plein */
  background: white;
}

/* Accessibilité : aucune anim à réduire ici, mais on garde la porte ouverte */
@media (prefers-reduced-motion: reduce) { .cursor-halo{ transition: none; } }



/* Container classique (centré, avec gouttières) */
.container{
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

/* Variantes fréquentes */
.container--narrow{  --container-max: 800px; }
.container--wide{    --container-max: 1400px; }
.container--fluid{   max-width: none; }         /* pleine largeur, garde les gouttières */
.container--prose{   max-width: 65ch; }         /* lecture confortable (texte) */

/* Sections pleine largeur + container interne (pattern courant) */
.section{
    background: transparent;
    margin-bottom: 100px;
}

/* Points de rupture typiques (optionnel) */
@media (min-width: 768px){
  :root{ --container-max: 1100px; }
}
@media (min-width: 1200px){
  :root{ --container-max: 1200px; }
}
section#professionnel {
    padding-top: 60px;
}
.item-experience {
    display: flex;
    padding: 5px;
    transition: .4s ease;
    background: transparent;
    border: none;
    margin-bottom: 30px;
}
.download a {font-weight: 600;transition: .4s ease;}

.download a svg {
    margin-left: 5px;
    transition: .4s ease;
}

.download:hover svg {
    padding-left: 10px;
}

.item-experience:hover {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.item-experience:hover strong {
    color: #4fe190;
}
.download a:hover {
    color: #4fe190;
}
b, strong {
    font-weight: 700;
    color: white;
}
.item-experience .periode {
    width: 190px;
    letter-spacing: .025em;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    position: relative;
    top: 3px;
}
.skills {
    display: flex;
    flex-wrap: wrap;
    width: 150%;
    position: relative;
    left: -190px;
}
.skills p {
background: rgba(45, 212, 191, .1);
    color: rgb(94 234 212);
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 50px;
    margin: 5px 5px;
    width: fit-content;
    font-weight: 600;
}
.expertise .description {
    font-size: .875rem;
}
.entreprise {
    opacity: .7;
    font-size: 15px;
    font-weight: 600;
}
.expertise {
    width: 70%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.mi-strong {
    font-weight: 600;
    opacity: .7;
}
.titre {
    font-family: 'Inter';
    text-transform: uppercase;
    font-size: 20px !important;
    letter-spacing: 1px;
    padding: 25px 50px !important;
    margin-bottom: 40px !important;
    display: block;
    position: sticky !important;
    height: 75px;
    top: 0;
    background: rgba(15, 23, 42, .75);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    width: 120%;
    margin-left: -50px !important;
}
.titre:before{
    display: none;
}
.navigation {
    display: none;
}
.contact {
    display: flex;
    justify-content: flex-start;
}

.contact a {
    font-size: 25px;
    margin-right: 20px;
    color: var(--brand-color-alt);
}
@media (min-width: 1024px) {
  .bloc {
    display: flex;
    justify-content: space-between;
    gap: 1rem; /* 16px */
  }
    .gauche {
        position: sticky;
        top: 0;
        display: flex;
        max-height: 100vh;
        width: 48%;
        flex-direction: column;
        padding-top: 6rem;
        padding-bottom: 5rem;
        margin-bottom: 0;
        padding-right: 15%;
        justify-content: space-between;
  }
  .bloc_droite{
        width: 52%;
        padding-top: 7rem;
        padding-bottom: 6rem;
  }
  .titre {
        display: none;
    }
.navigation {
    display: flex;
    flex-direction: column;
}
}

.item-projet .skills {
    left: -160px;
}
.item-projet {
    display: flex;
    padding: 5px;
    margin-bottom: 20px;
}
.item-projet:hover {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.item-projet .image {
    width: 150px;
    margin-right: 15px;
}

.item-projet .image img {
    width: 100%;
    padding: 2px;
    border: 1px solid #ffffff40;
    border-radius: 5px;
}
.description-projet {
    font-size: .875rem;
    color: var(--text) !important;
}
.item-projet .description {
    width: 80%;
}

/*.item-projet .description h3 {*/
/*    font-size: 20px;*/
/*}*/

@media (max-width: 1024px) {
    .item-experience {
    position: relative;
    z-index: -1;
}
}

@media (max-width: 767px) {
    .skills {
        flex-wrap: wrap;
        width: 100%;
        position: relative;
        left: initial;
    }
    .item-experience {
        flex-direction: column;
    }
    .expertise {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .item-projet {
        display: flex;
        flex-direction: column-reverse;
    }
    .item-projet .skills {
        left: initial;
    }
    .item-projet .description {
        width: 100%;
    }
    .item-projet .image {
        width: 50%;
        margin-right: 15px;
        margin-top: 10px;
    }
}