/* 2026-09-16 : ajustements ciblés de la page d'accueil publique (hero + #feature + #testi) */
/* Ordre mobile de .landing : deja corrige en retirant hidden-xs/visible-xs dans vConnexion.html. */
/* 2026-09-18 : .landing.parallax/.overlay est aussi la classe du bandeau-titre des pages signup/ */
/* pwdreset/openclass (vSignUp.html etc.) - qui utilisent toujours .overlay.backgreen3B, jamais */
/* present sur le hero d'accueil. :not(.backgreen3B) exclut ces bandeaux partout ci-dessous pour */
/* qu'ils restent fideles a la production, tout en gardant le hero d'accueil (vConnexion.html, */
/* affiche en home_header sur toutes ces pages) redessine partout ou il apparait. */

/* ----- Largeur de contenu : le vrai .container n'a AUCUN max-width (etire sur toute la largeur */
/* d'ecran), alors que la maquette (.wrap) plafonne a 1140px centre. Ecart majeur constate en */
/* comparaison directe sur ecran large. Scope aux 4 sections publiques uniquement. */
.landing .overlay:not(.backgreen3B) .container,#feature .container,#testi .container,#contact .container{
    max-width:1140px !important;
    padding-left:24px !important;
    padding-right:24px !important;
}

/* ----- Hero : le vrai titre est un <p class="intro_msg">, jamais un <h1> — */
/* la regle existante .landing h1{font-size:56px} ne s'appliquait donc jamais. */
/* Section raccourcie (100vh -> 85vh) sur demande explicite : recadre l'image de fond (moins */
/* de hauteur visible) et remonte le bloc logo/texte/carte, tout en gardant un padding haut/bas */
/* symetrique autour du contenu. */
.landing.parallax:has(> .overlay:not(.backgreen3B)){min-height:85vh;position:relative;overflow:hidden}
.landing.parallax .overlay:not(.backgreen3B){min-height:85vh;display:flex;align-items:center;padding:64px 0}
/* La maquette centre les 2 colonnes l'une par rapport a l'autre (.hero-row .wrap{display:flex; */
/* align-items:center}) - le .row Bootstrap reel n'est pas flex, ses colonnes sont juste alignees */
/* en haut, jamais recentrees entre elles. Decale tout le bloc logo/texte vers le haut par rapport */
/* a la maquette (ou il est centre par rapport a la carte, plus haute) - d'ou le desalignement. */
.landing.parallax .overlay:not(.backgreen3B) .container > .row{display:flex !important;align-items:center !important;flex-wrap:wrap}
/* Flou d'arriere-plan identique a la maquette (filter:blur(2px) via ::before dedie). */
/* Premier essai avec background-position:inherit desynchronise du plugin parallax JS reel */
/* (qui deplace le fond original en live) - couture visible au scroll. Corrige en fixant une */
/* position STATIQUE (jamais d'inherit) : le calque flou ne suit plus le JS, mais le recouvre */
/* entierement (inset:0, meme z-index que le fond original), donc plus aucun risque de couture. */
.landing.parallax:has(> .overlay:not(.backgreen3B))::before{
    content:"";position:absolute;inset:0;
    background-image:inherit;
    background-position:center 30%;
    background-size:cover;
    background-repeat:no-repeat;
    filter:blur(2px);
    z-index:0;
}
.landing.parallax > .overlay:not(.backgreen3B){position:relative;z-index:1}

/* Logo : la regle reelle .logo{margin:50px 0 10px 50px} decale le logo par rapport au texte */
/* en dessous (qui n'a pas ce retrait) - la maquette l'aligne sur la meme colonne, sans marge laterale. */
.landing .col-md-7 .logo{margin:0 0 14px 0 !important}
.landing .intro_msg{
    font-size:42px;
    font-weight:400;
    line-height:1.2;
    color:#fff;
    margin:22px 0 18px;
    text-shadow:0 1px 3px rgba(0,0,0,.5);
}
@media (max-width:767px){
    .landing .intro_msg{font-size:30px}
}

/* Mot "simplement." isole via 2 spans ajoutes dans intro_msg_title (fr.php/en.php) */
.landing .intro_msg .hl-word{color:#25AAE1}
.landing .intro_msg .hl-dot{color:#8DC63F}

/* Paragraphes sous le titre : le vrai site les rend tous en blanc pur 17px identique, */
/* la maquette les nuance (lede vs lignes secondaires plus petites/attenuees). */
.landing .landing-text p.text-justify{color:#dfeaf3 !important;max-width:520px}
.landing .landing-text + .landing-text p:first-child,
.landing .landing-text + .landing-text p:last-child{
    font-size:14.5px !important;
    color:#c8d6e2 !important;
}
.landing .btn3BSchnormallink{color:#fff !important;font-weight:700 !important}
.landing .btn3BSchnormallink:hover{color:#F26522 !important}
/* Bouton CTA "Creez une classe" du hero : etait traite comme un badge (padding 2px 5px) */
/* Scope volontairement large (.btn3BSch n'existe que sur cette page) */
.btn3BSch{
    padding:13px 30px !important;
    font-size:15px !important;
    font-weight:700;
    border-radius:100px !important;
    margin:12px 0 !important;
    display:inline-block;
    box-shadow:0 10px 26px -8px rgba(237,108,48,.55);
}

/* "Creer un compte" (.btn3B) : redevient un simple lien texte dans la carte de connexion. */
/* Scope a .singupbloc pour ne jamais toucher .btn3B ailleurs dans l'appli connectee. */
.singupbloc .btn3B{
    background:transparent !important;
    border:none !important;
    padding:0 !important;
    border-radius:0 !important;
    color:#cfe6fb !important;
    font-weight:700;
}
.singupbloc .btn3B:hover{color:#fff !important}

/* Bouton "Se connecter" : couleur historique du site (#3eb0f7) -> bleu du logo, uniquement sur cette carte */
.signup-header .btn-success{background-color:#25AAE1 !important}

/* Retrait interieur haut/bas reduit pour aligner la carte avec le logo (haut) et la derniere */
/* phrase "...Contactez-nous" (bas) de la colonne texte, sur demande explicite. Largeur elargie */
/* legerement (380 -> 420px, cf .col-md-5.col-xs-12 plus bas). */
.signup-header{padding:4px 24px 4px !important}

/* Champs + bouton de la carte connexion : Bootstrap .input-lg/.btn-lg les rend a 55px/rayon 0, */
/* la maquette les veut a 46-48px/rayon 2px comme le formulaire de contact. */
.signup-header .form-control.input-lg{height:46px !important;border-radius:2px !important;font-size:15px !important}
.signup-header input[name="plf_cnx"]{height:48px !important;border-radius:2px !important;font-weight:400 !important;font-size:16px !important}
.signup-header .oauth-btn{height:46px !important}
/* Espacements internes resserres (avec le padding de carte reduit ci-dessus) pour rapprocher */
/* la hauteur totale de la carte de celle du bloc logo/texte en face. */
.signup-header .oauth-login-section{margin-bottom:8px !important}
.signup-header .oauth-or-sep{margin:0 0 8px !important}
.signup-header .form-group{margin-bottom:8px !important}
.signup-header .form-group.last{margin-bottom:8px !important}

/* Bas de carte (mdp oublie / langue) : les colonnes Bootstrap (col-sm-5/col-sm-7) sont trop */
/* etroites a cette taille de police et font passer "Mot de passe oublie ?" sur 2 lignes. */
/* La maquette utilise un flex simple sans largeur figee (.foot-links), avec un separateur */
/* horizontal au-dessus (absent sur le vrai site - le padding-top:20px existant ne suffit pas). */
.signup-header .btn-section{
    display:flex !important;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 12px;
    margin-top:8px !important;
    padding-top:6px !important;
    border-top:1px solid rgba(255,255,255,.25) !important;
}
.signup-header .btn-section p{width:auto !important;float:none !important;padding:0 !important;white-space:nowrap;margin:0}

/* Titre "Connexion" : ajoute le petit trait degrade (n'existait pas du tout sur le vrai site). */
/* Scope a .signup-header : .form-title est aussi utilise (sans ce wrapper) par vConnexionForm.html, */
/* reutilise ailleurs (inscription, mdp oublie, compte cree) - jamais toucher ces ecrans. */
/* La regle reelle .form-title a padding-top:20px, jamais annulee - avec les 24px de padding */
/* de la carte, ca fait 44px avant "CONNEXION" au lieu des 32px (24+8) de la maquette. */
.signup-header .form-title{position:relative;font-size:26px !important;font-weight:400 !important;padding-top:0 !important;margin-bottom:6px !important}
.signup-header .form-title::after{
    content:"";display:block;width:56px;height:4px;border-radius:2px;
    margin:14px auto 0;
    background:linear-gradient(90deg,#F26522,#8DC63F 50%,#25AAE1);
}

/* Bouton Facebook : fond bleu -> fond blanc + icone bleue, comme Google a cote */
.oauth-btn-facebook{background-color:#fff !important;border-color:#dadada !important;color:#1877F2 !important}
.oauth-btn-facebook:hover,.oauth-btn-facebook:focus{background-color:#f5f5f5 !important;color:#1877F2 !important}

/* Padding haut/bas uniformise a 100px (valeur de #testi, prise comme reference commune) sur */
/* toutes les sections publiques : #feature, #testi et #contact respirent tous de la meme facon. */
#feature{background:#fff !important;padding:100px 0 !important}
#feature .feature-title-inline{text-align:left;margin:0 0 34px}
#feature .feature-title-inline h2{
    text-align:left;
    color:#222 !important;
    font-size:29px !important;
    font-weight:300 !important;
    /* Le vrai h2 a margin-top:15px (effondrement de marge), decalant le titre sous le haut */
    /* reel de sa colonne - l'image en face n'a pas cet ecart. Neutralise pour aligner les deux. */
    margin-top:0 !important;
}
#feature .feature-title-inline p{font-size:15px !important}
/* Titres des 6 items : gris + demi-gras sur le vrai site, noir + gras sur la maquette */
#feature .feat-list h4{color:#222 !important;font-weight:700 !important}
#feature .feat-list p{font-size:13.5px !important}
/* .row-feat a un padding-top:50px herite (en plus des 64px de #feature), et l'image ne */
/* remplit pas la hauteur de la colonne texte (souvent plus haute) - deux sources d'ecart */
/* entre l'espace au-dessus de l'image et celui en dessous. Neutralise + image etiree en */
/* hauteur (object-fit:cover) pour que les deux colonnes fassent exactement la meme hauteur, */
/* garantissant un retrait haut = retrait bas quel que soit le contenu texte. */
#feature .row-feat{padding-top:0 !important;display:flex !important;align-items:stretch !important}
#feature .feature-img{height:100%}
#feature .feature-img img{border-radius:8px;width:100%;height:100%;object-fit:cover}
/* Sous 991px (meme seuil que le passage en colonne de Bootstrap .col-md-4/.col-md-8), le flex */
/* row ci-dessus gardait l'image et le texte cote a cote au lieu de s'empiler - et height:100% */
/* s'appliquait a un conteneur dont la hauteur n'est plus definie par la ligne, ecrasant l'image */
/* a une hauteur quasi nulle. Retour a un empilement vertical simple, image en hauteur naturelle. */
/* Empilee, l'image et le bloc titre/texte (2 colonnes Bootstrap sans marge entre elles) se */
/* touchent directement (0px mesure en reel) - la meme respiration est deja utilisee ailleurs */
/* sur cette page (34px sous feature-title-inline, avant la 1ere feat-list). */
@media (max-width:991px){
    #feature .row-feat{flex-direction:column}
    #feature .feature-img{height:auto}
    #feature .feature-img img{height:auto}
    #feature .feature-title-inline{margin-top:34px}
}

/* Icones #feature : remplacees en SVG dans vHome.html (identiques a la maquette, au lieu de Pe-icon-7-stroke) */
.feat-ic{display:inline-block;width:34px;height:34px;vertical-align:middle}
.feat-ic svg{width:100%;height:100%;display:block}
/* .inner a "float:left;padding-left:15px" sur le vrai site (prevu pour cohabiter avec l'ancien */
/* <i> qui flottait aussi a gauche). Notre icone SVG n'est qu'en inline-block (pas flottante) : */
/* l'incompatibilite fait "s'envoler" .inner, qui finit empile a droite du bloc. Flexbox fiable. */
#feature .feat-list{display:flex !important;align-items:flex-start;gap:14px}
#feature .feat-list .inner{float:none !important;padding-left:0 !important;margin-left:0 !important;flex:1;min-width:0}
/* .feat-list est un col-sm-6 Bootstrap (padding:0 15px) : le gouttiere gauche de 15px decale */
/* l'icone de la colonne gauche par rapport au titre au-dessus, qui n'a pas ce retrait. */
/* :nth-child(even) = positions 2,4,6 = colonne gauche (feature-title-inline occupe la position 1). */
/* Scope a >=768px (seuil reel de .col-sm-6 Bootstrap) : en dessous, les .feat-list s'empilent sur une */
/* seule colonne et n'ont plus de gouttiere a annuler - applique sans ce garde-fou, la regle retirait */
/* le retrait gauche d'un item sur deux meme en pile mobile, decalant les icones en zigzag. */
@media (min-width:768px){
    #feature .feat-list:nth-child(even){padding-left:0 !important}
}
/* .feature-title-inline est le 1er enfant de .col-md-8, donc les .feat-list demarrent a la position 2 */
.feat-list:nth-child(3n+2) .feat-ic{color:#25AAE1 !important}
.feat-list:nth-child(3n)   .feat-ic{color:#F26522 !important}
.feat-list:nth-child(3n+1) .feat-ic{color:#8DC63F !important}

/* Padding deja 100px sur le vrai site, rendu explicite ici pour ne plus dependre d'un */
/* heritage implicite (valeur de reference commune aux 3 sections, cf #feature/#contact). */
#testi{background:#f6f9fc !important;padding:100px 0 !important}
#testi h2{font-size:29px !important;font-weight:300;color:#222 !important;text-transform:none;letter-spacing:normal}
#testi .title-line{
    width:56px !important;
    height:4px !important;
    border-radius:2px !important;
    background:linear-gradient(90deg,#F26522,#8DC63F 50%,#25AAE1);
    /* Colle directement aux cartes en dessous - retrait de meme hauteur (64px) que celui */
    /* du hero/#feature, pour respirer avant la grille de temoignages. */
    margin-bottom:64px !important;
}
/* Icone temoignage : remplacee en SVG (etait Pe-icon-7-stroke grise) */
#testi .icontestimonoial{width:52px;height:52px;color:#25AAE1 !important}
/* Nom de l'ecole cite : etait bleu, la maquette le met en gris neutre, pas en italique */
#testi .company{color:#777 !important;font-style:normal !important}
/* Nom de l'intervenant : gras sur la maquette, texte simple sur le vrai site */
#testi .client-info{font-weight:700}
#testi .client-info .company{font-weight:400}

/* "Nous" (Contact) : la maquette finale ne definit AUCUNE regle .highlight ici — "Nous" et */
/* "contacter" sont le meme blanc uni. Sans override, .highlight retombe sur la regle globale */
/* du vrai site (#3eb0f7 !important) - il faut forcer explicitement le blanc pour neutraliser. */
.contact-left .highlight{color:#fff !important}
.contact-left h2{font-size:28px !important;font-weight:300 !important;margin-bottom:22px !important;position:relative}
.contact-left h2::after{
    content:"";display:block;width:56px;height:4px;border-radius:2px;
    margin:14px 0 0;
    background:linear-gradient(90deg,#F26522,#8DC63F 50%,#25AAE1);
}
/* Icones + liens du bloc adresse : etaient bleu vif, la maquette les met en blanc/gris clair ; remplacees en SVG */
/* Meme technique de flou CSS que le hero (position statique, cf plus haut) */
#contact .contact.parallax{position:relative;overflow:hidden}
#contact .contact.parallax::before{
    content:"";position:absolute;inset:0;
    background-image:inherit;
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    filter:blur(2px);
    z-index:0;
}
#contact .contact.parallax > .overlay{position:relative;z-index:1}

.contact-left a{color:#fff !important}
.contact-left .feat-ic{width:16px;height:16px;color:#dfe6ec !important;margin-right:8px}
/* .ul-address n'a jamais de padding-left reinitialise (seul .ul-address li{list-style:none} */
/* existe) : le retrait par defaut du navigateur pour les puces persiste meme sans puce visible. */
.contact-left .ul-address{padding-left:0 !important;margin:0 !important}
.contact-left .ul-address li{display:flex;align-items:center;padding-right:0 !important}

/* ----- Formulaire de contact : champs/bouton ne correspondaient pas a la maquette ----- */
#contact .contact-right .form-control{
    border:none !important;
    border-radius:2px !important;
    height:auto !important;
    padding:12px 16px !important;
    background:rgba(255,255,255,.95) !important;
    font-size:14px !important;
}
/* La vraie textarea a rows="20" en HTML (hauteur intrinseque enorme) - min-height ne peut pas */
/* la reduire, il faut une height explicite pour retomber sur les 120px de la maquette. */
#contact .contact-right textarea.form-control{height:120px !important;resize:vertical}
/* Texte d'aide sous Email : etait passe en bleu par erreur via .highlight, remis clair/neutre */
#contact .contact-right .help-block{color:rgba(255,255,255,.65) !important;font-size:12px !important;margin-top:6px}
/* Bouton Envoyer : Bootstrap le rend pleine largeur + bleu historique, corrige comme la maquette. */
/* Le vrai bouton a height:55px fixe avec line-height:45px (mismatch) - le texte se cale en */
/* haut de la boite au lieu d'etre centre. Flex align-items/justify-content : centrage fiable */
/* quelle que soit la hauteur imposee, sans devoir neutraliser height/line-height directement. */
#contact .contact-right .btn-success{
    background-color:#25AAE1 !important;
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    width:auto !important;
    padding:13px 34px !important;
    border-radius:2px !important;
    font-weight:700;
    font-size:14px;
    line-height:normal !important;
    border:none !important;
}
/* #contact-form .btn{height:55px} (ID + classe, specificite forte) imposait la hauteur fixe */
/* a l'origine du desalignement vertical du texte - retiree, height:auto laisse le padding decider. */
#contact-form .btn{height:auto !important}

/* ----- Temoignages : cartes statiques (3 visibles), plus de carrousel owl -----*/
/* #owl-testi renomme en #testi-grid dans vHome.html pour desactiver l'init JS ($("#owl-testi").owlCarousel) */
.testi-grid-cards{
    display:grid !important;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
    width:100% !important;
}
@media (max-width:820px){.testi-grid-cards{grid-template-columns:1fr}}
.testi-grid-cards .testi-item{
    width:auto !important;margin-top:0 !important;
    background:#fff;border-radius:10px;padding:30px 24px;text-align:center;
}
.testi-grid-cards .testi-item .box{margin:0}
.testi-grid-cards .testi-item .box .message{padding:0;font-size:14px;line-height:1.65}
.testi-grid-cards .client-pic{margin-bottom:16px}
.testi-grid-cards .client-info{margin-top:16px;font-size:13.5px}
.testi-grid-cards .client-info .client-name{margin-top:0;font-size:13.5px}

/* ----- Carte de connexion : largeur fixe comme la maquette (380px), pas 41% de colonne ----- */
.col-md-5.col-xs-12{width:420px !important;float:right}
@media (max-width:991px){.col-md-5.col-xs-12{width:100% !important;float:none}}

/* "Lato" retiree (ne se chargeait de toute facon jamais, retombait silencieusement sur */
/* Helvetica/Arial - meme nettoyage applique aux fichiers CSS de base du vrai site). */
/* :not(.fa) exclut Font Awesome (icones Facebook/langue) : leur glyphe depend de leur police dediee */
.landing .overlay:not(.backgreen3B),.landing .overlay:not(.backgreen3B) *:not(.fa),#feature,#feature *:not(.fa),#testi,#testi *:not(.fa),#contact,#contact *:not(.fa){
    font-family:"Helvetica Neue",Arial,sans-serif !important;
}

/* ----- Logo hero : rendu a sa taille native 300x158, trop grand par rapport a la maquette ----- */
.col-md-7 .logo img{height:68px !important;width:auto !important}
@media (max-width:767px){.col-md-7 .logo img{height:52px !important}}
/* Logo peu visible sur fond sombre/flou - encadre avec coins legerement arrondis, meme */
/* transparence que la carte de connexion (.signup-header, rgba(255,255,255,.2)). */
.landing .col-md-7 .logo{
    display:inline-block;
    background:rgba(255,255,255,.2);
    padding:8px 14px;
    border-radius:6px;
}