/* ========================================================================== REFONTE FIXES — correctifs ciblés post-retours client (fichier séparé pour éviter les conflits d'édition avec components.css). ========================================================================== */ /* -------------------------------------------------------------------------- (fix 2) TITLEBAR PAGE ÉQUIPE : respiration sous le header. Retour client 05/06 22h : le titre orange "L'ÉQUIPE SUP'AFFAIRES" est trop collé au header. On pousse TOUT le contenu de la titlebar (titre + watermark + breadcrumb) de 2.5rem sous le header fixe, la bande navy grandit d'autant. Combiné au fix margin-top -7.5rem (components.css), le titre tombe à ~188px (header bottom = 140px) : 48px d'air. -------------------------------------------------------------------------- */ .page-id-146 .l-main > .l-section:first-of-type > .l-section-h { padding-top: calc(var(--header-height) + 2.5rem) !important; } /* -------------------------------------------------------------------------- (fix 3) FLÈCHES CARROUSELS EN TABLETTE : suppression du scroll horizontal. QA responsive 06/06 : les carrousels (partenaires, témoignages) utilisent le style Impreza "on_sides_outside" qui pousse les flèches HORS du conteneur (translateX ±100%, 35px). À ≤1024px le conteneur est bord à bord : la flèche droite déborde de 13px et crée un scroll horizontal (défaut présent aussi sur le site actuellement en ligne, mesuré identique). Fix : sous 1024px, les flèches restent au bord intérieur du carrousel. -------------------------------------------------------------------------- */ @media (max-width: 1380px) { .owl-carousel.arrows-hor-pos_on_sides_outside .owl-prev, .owl-carousel.arrows-hor-pos_on_sides_outside .owl-next { transform: none !important; } } /* -------------------------------------------------------------------------- (fix 4) HEADER TABLETTE/MOBILE : CONTACT + burger alignés à droite. QA responsive 06/06 : sur le live, le JS header Impreza déplace le bouton Contact et le menu dans la cellule droite en layout tablette/mobile. Notre header statique garde tout dans la cellule gauche : Contact + burger restaient collés au logo. Fix : en mode burger (≤900px = mobileWidth du header), margin-left:auto sur le bouton Contact pousse le groupe Contact + burger au bord droit, comme le live. La marge droite Impreza du nav (22px) est neutralisée pour que le burger atteigne le bord de cellule. -------------------------------------------------------------------------- */ @media (max-width: 975px) { .l-header .l-subheader.at_middle .l-subheader-cell.at_left > a.w-btn.ush_btn_5 { margin-left: auto; } .l-header .l-subheader.at_middle .l-subheader-cell.at_left > nav.w-nav { margin-right: 0; } } /* -------------------------------------------------------------------------- (fix 4bis) ZONE BURGER ÉTENDUE 900-975px : même compacté, le menu desktop ne tient pas sous ~976px (il manque ~57px). Le CSS Impreza câble le burger à max-width:899px ; on étend la bascule à 975px, synchronisée avec le JS (mobileWidth:976 dans header.php). -------------------------------------------------------------------------- */ @media screen and (min-width: 900px) and (max-width: 975px) { .w-nav.ush_menu_1 > .w-nav-list.level_1 { display: none; } .ush_menu_1 .w-nav-control { display: flex; } } /* -------------------------------------------------------------------------- (fix 5) MENU DESKTOP 976-1180px : l'item "Actualités" était coupé au bord. Défaut présent aussi sur le site en ligne actuel (mesuré à 1024px : item tronqué "AC..."). Le menu desktop a besoin de ~1180px pour tenir avec ses espacements par défaut. Entre 976 et 1220px on resserre l'espacement horizontal des items de niveau 1 pour que les 5 entrées + Contact tiennent sans débordement ni scroll horizontal. -------------------------------------------------------------------------- */ @media (min-width: 976px) and (max-width: 1220px) { .l-header .w-nav.ush_menu_1 .w-nav-list.level_1 > .w-nav-item > .w-nav-anchor { padding-left: 0.55rem; padding-right: 0.55rem; font-size: 0.9em; } .l-header .l-subheader.at_middle .l-subheader-cell.at_left > a.w-btn.ush_btn_5 { margin-right: 0.5rem; } } /* -------------------------------------------------------------------------- (fix 6) MEGA MENU : pages filières accessibles (retour Baptiste 06/06). Les titres de colonnes BTS / Bachelor / Mastère deviennent des liens vers les pages filières (formations-bac2-bts, -bac3-bachelor, -bac5-mastere). Hover sobre : le nom passe à l'orange, rien d'autre ne bouge. En mobile, lien "Découvrir la filière ..." en tête de chaque accordéon. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- (fix 7) H1 STRUCTURELS (SEO 06/06) : 9 pages n'avaient aucun H1. Les titres visuels (p / h3) ont été convertis en h1 à classes identiques. Ces règles neutralisent les styles h1 du thème pour un rendu strictement identique à l'élément d'origine (gate pixel-diff). -------------------------------------------------------------------------- */ /* Pages formulaires (inscription JPO/soirée, dossier candidature) : la classe us_custom porte déjà tout en !important sauf line-height/margin. Marges = réplique des règles p du thème (1.5rem desktop, 1rem ≤600px, 0 si dernier enfant). */ h1.w-text.us_custom_62166c98 { line-height: 1.6 !important; margin: 0 0 1.5rem !important; } @media screen and (max-width: 600px) { h1.w-text.us_custom_62166c98 { margin-bottom: 1rem !important; } } h1.w-text.us_custom_62166c98:last-child { margin-bottom: 0 !important; } /* Titres orange des titlebars contact / équipe : le style est sur le wrapper us_custom (2vw, weight 100, uppercase) - le h1 doit TOUT hériter. */ .us_custom_8bdd8e48 .wpb_wrapper > h1, .us_custom_ca6b596e .wpb_wrapper > h1 { font-family: inherit; font-size: inherit; font-weight: inherit; font-style: inherit; line-height: inherit; letter-spacing: inherit; text-transform: inherit; margin: 0; } /* Réplique de la règle mobile du thème ".sup-txt-fg p {font-size:30px; padding-top:130px}" (live-main.css ≤1024) qui ne ciblait que les p. Ciblé sur contact/équipe uniquement (le h1 de la page alternance 145 vient d'un h2 qui ne recevait PAS cette règle). */ @media (max-width: 1024px) { .us_custom_ca6b596e .wpb_wrapper > h1 { font-size: 30px !important; padding-top: 130px !important; } } /* Page espace-entreprise (140) : h1 "Votre recrutement" ex-div w-text. La classe us_custom_30593d02 porte fs 35px/900/uppercase en !important ; on réplique le line-height et margin du div d'origine. */ h1.w-text.us_custom_30593d02 { line-height: 1.6 !important; margin: 0 !important; } /* Page alternance (145) : h1 ex-h2 de titlebar. Valeurs exactes du h2 d'origine (vars --h2-* du thème) mesurées à 1600 et 390 : identiques. */ .us_custom_e35a8d8e .wpb_wrapper > h1 { font-size: 30px !important; font-weight: 800 !important; line-height: 30px !important; margin: 0 !important; padding: 0 !important; text-transform: none !important; } a.sx-mega__col-head--link { text-decoration: none; cursor: pointer; } a.sx-mega__col-head--link:hover .sx-mega__col-name, a.sx-mega__col-head--link:focus-visible .sx-mega__col-name { color: var(--sx-orange, #FF7F00); } .sx-mega-acc__link--filiere .sx-mega-acc__txt { color: var(--sx-orange-d, #e06f00); font-weight: 600; } /* -------------------------------------------------------------------------- (retour Manon 25/06) PAGE NOTRE ÉCOLE : le titre "SUP'AFFAIRES LORIENT" etait en Thin (font-weight:100, herite du CSS live). Passage en Bold. -------------------------------------------------------------------------- */ .us_custom_8f9ef08a, .us_custom_8f9ef08a .w-text-value { font-weight: 700 !important; } /* (26/06) NOTE : le restyle des cartes de la grille formations (bordure/ombre propres + retrait du contour des badges) a ete RETIRE sur consigne de Baptiste : la preprod doit rester IDENTIQUE au site live (deja valide page par page). Les cartes heritent donc du design d'origine (live-theme-options.css). */ /* ========================================================================== (retour Baptiste 26/06) PAGES FORMATIONS : alignement sur le design du LIVE. - Icones des encadres = les VRAIES icones SVG du live (diplome / loupe / user-skills / toque), rendues en mask colore (blanc sur boites foncees, bleu marine sur boites claires). Plus de carres vides. - Tarifs descend a cote de "vous obtenez" (2 colonnes). - Moyens/Rythme passent dans la colonne de gauche (comble le vide). - Reglement = encadre bleu clair + toque. Poursuite/Emplois = titres script. ========================================================================== */ /* -- Icones SVG (mask) des encadres -------------------------------------- */ .sx-fo-box__ico { flex: 0 0 auto; display: inline-block; width: 34px; height: 34px; margin-right: .55rem; vertical-align: middle; background-color: #ffffff; /* couleur de l'icone (boites foncees orange/navy) */ -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } .sx-fo-box__ico--diploma { -webkit-mask-image: url(../icons/supaffaires-icon-diploma.svg); mask-image: url(../icons/supaffaires-icon-diploma.svg); } .sx-fo-box__ico--zoom { -webkit-mask-image: url(../icons/supaffaires-icon-zoom.svg); mask-image: url(../icons/supaffaires-icon-zoom.svg); } .sx-fo-box__ico--skills { -webkit-mask-image: url(../icons/supaffaires-icon-user-skills.svg); mask-image: url(../icons/supaffaires-icon-user-skills.svg); } .sx-fo-box__ico--hat { -webkit-mask-image: url(../icons/supaffaires-icon-hat.svg); mask-image: url(../icons/supaffaires-icon-hat.svg); } /* boites claires (cyan) : icone bleu marine pour le contraste */ .sx-fo-box--cyan .sx-fo-box__ico { background-color: #003b60; } /* -- Intro 2 colonnes : top-aligne (pas d'etirement -> plus de grand vide blanc dans la colonne de gauche). ----------------------------------- */ .sx-fo-intro { align-items: flex-start !important; } .sx-fo-peda-block { margin-top: 2rem; } .sx-fo-peda-block .sx-fo-h2 { margin-bottom: .8rem; } /* -- Section "vous obtenez" + Tarifs : 2 colonnes (comme le live) -------- */ .sx-fo-final { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; margin: 2.5rem 0; } .sx-fo-final__obtention { background: #e9f5fc; border-radius: 18px; padding: 30px 32px; } .sx-fo-final__obtention .sx-fo-h2 { margin-top: 0; } .sx-fo-final__tarifs { margin: 0; } @media (max-width: 880px) { .sx-fo-final { grid-template-columns: 1fr; } } /* -- Reglement d'examen : encadre bleu clair + toque (comme le live) ----- */ .sx-fo-reglement { background: #e9f5fc; border-radius: 18px; padding: 30px 32px; margin: 2.5rem 0; } .sx-fo-reglement__title { display: flex; align-items: center; margin-top: 0; } .sx-fo-reglement .sx-fo-box__ico { background-color: #2a9fd6; } /* -- Poursuite / Emplois : titres en police script orange (comme le live) - */ .sx-fo-debouches__title--script { font-family: 'Lie to me', 'Brush Script MT', cursive; font-weight: 400; font-size: 2.4rem; line-height: 1.1; color: var(--sx-orange, #ff7f00); text-transform: none; } /* ========================================================================== (retours Manon 26/06) Ajustements visuels signales sur la preprod. ========================================================================== */ /* (M1) BANNIERE / SLIDER : le titre "Nos portes sont toujours ouvertes !" cassait en 2 lignes en laissant le "!" SEUL sur sa ligne aux largeurs ~1100-1280px (la police Montserrat servie via Google Fonts rend ~6px plus large que la version du live -> le titre debordait du calque de 6px et le "!" partait a la ligne). text-wrap:balance equilibre les deux lignes : le "!" reste colle a "ouvertes", plus jamais orphelin. */ #n2-ss-2 .n2-ss-layer .n2-ss-text, .n2-font-8ceed26e3b355210b37b21e62902e4ab, .n2-font-8ceed26e3b355210b37b21e62902e4ab-hover { /* -0.004em compense les ~6px que Montserrat (Google Fonts) rend en plus par rapport au live -> le titre tient sur 1 ligne aux memes largeurs que le live (imperceptible a l'oeil). */ letter-spacing: -0.004em !important; /* filet de securite : aux largeurs ou le titre wrappe vraiment en 2 lignes, balance equilibre les 2 lignes -> le "!" ne reste jamais seul. */ text-wrap: balance !important; } /* (M2) GRILLE "TOUTES NOS FORMATIONS" : retrait des liserets colores (barre droite + barre basse) autour des cartes (retour Manon : "les bordures sur les encarts formations"). On conserve l'espacement (margin), on supprime uniquement les bordures decoratives. Scope strict .sup-formations-pro : le blog (.sx-blog-card) et les offres (.sup-offres-alternance) ne sont pas touches. */ .sup-formations-pro article.us_portfolio_category-bts .w-grid-item-h, .sup-formations-pro article.us_portfolio_category-bachelor .w-grid-item-h, .sup-formations-pro article.us_portfolio_category-mastere .w-grid-item-h { border-right: 0 !important; border-bottom: 0 !important; } /* (M3) BADGES RYTHME BAC+ (page "vos etudes superieures en alternance") : "BAC +3" (us-btn-style_11) et "BAC +4/5" (us-btn-style_12) cassaient en 2 lignes ("BAC" / "+3") alors que "BAC +2" tenait sur 1 ligne. Cause : ces 2 lignes ont un texte voisin plus long qui comprime le badge (flex) sous sa largeur de contenu -> le texte du badge wrappe. nowrap remonte la largeur min-content du badge -> le flex ne le comprime plus -> 1 seule ligne, comme BAC+2. Scope strict _11/_12 = uniquement ces 2 badges (zero effet ailleurs). */ .w-btn.us-btn-style_11, .w-btn.us-btn-style_12, .w-btn.us-btn-style_11 .w-btn-label, .w-btn.us-btn-style_12 .w-btn-label { white-space: nowrap !important; } /* ========================================================================== (fix 8 — retours Baptiste 09/07 post go-live) RESPONSIVE HEADER + HERO. Defauts herites du clone pixel-perfect de l'ancien site (le live d'avant avait les memes) : on ameliore maintenant que la fidelite n'est plus la contrainte. ========================================================================== */ /* -- (8a) DESKTOP : vide blanc / chevauchement variable entre le menu et le slider. Cause : wrapper Impreza data-us-scroll (parallaxe translate_y 0.5x) autour du slider hero -> le JS applique un transform vertical dependant du viewport et du scroll (mesure -17px a -50px selon largeur, peut etre positif = bande blanche sous le menu). On neutralise la parallaxe : le hero reste toujours colle sous le header, a toutes les largeurs. CSS !important > style inline pose par us.core. */ .us_custom_a3dda067 .w-html.has_scroll_effects, .us_custom_a3dda067 .w-html.has_translate_y { transform: none !important; } /* -- (8b) HERO SLIDER : typo proportionnee en tablette et mobile. Les tailles du slider sont des % d'une base 16px SANS variante device (titre "Nos portes..." = 362.5% = 58px meme sur un ecran de 390px, slide de 836px de haut). La hauteur du slider est recalculee par le JS d'apres le contenu -> reduire la typo compacte aussi le slide. Hashes n2-font-* = classes generees figees dans live-main.css : - 8ceed26e... = "Nos portes sont toujours ouvertes !" (58px) - 74fd13f8... = "Vous accompagnez pour decrocher..." (45px) - 02d1a4ee... = h1 "Sup Affaires, l'ecole de commerce..." (45px) - 37213fe7... = eyebrow "Decouvrir" - e526d2c6... = paragraphes conseillers (Berenice/Melanie/Lea/Mathis) */ @media (max-width: 1199px) { .n2-font-8ceed26e3b355210b37b21e62902e4ab-hover { font-size: 42px !important; line-height: 1.3 !important; } .n2-font-74fd13f8756388b4a3969d878b6d3d34-hover { font-size: 36px !important; line-height: 1.3 !important; } .n2-font-02d1a4eee2645f8b0338190dae514e12-hover { font-size: 34px !important; line-height: 1.35 !important; } } @media (max-width: 700px) { .n2-font-8ceed26e3b355210b37b21e62902e4ab-hover { font-size: 27px !important; line-height: 1.3 !important; } .n2-font-74fd13f8756388b4a3969d878b6d3d34-hover { font-size: 24px !important; line-height: 1.3 !important; } .n2-font-02d1a4eee2645f8b0338190dae514e12-hover { font-size: 24px !important; line-height: 1.35 !important; } .n2-font-37213fe73f82b18706d4317a894623bc-hover { font-size: 14px !important; } .n2-font-e526d2c64ae14ceb5500e00679d4903b-paragraph { font-size: 13px !important; line-height: 1.5 !important; } } /* -- (8c) HEADER MOBILE/TABLETTE compact. Les hauteurs de barre sont GENEREES dans live-main.css par breakpoint (:root --header-height + line-height/height sur .at_middle + hack .l-header:before{content:'80'} lu par us.core pour les offsets sticky/ancres). Le JSON us-header-settings ne pilote PAS les hauteurs (verifie 09/07) : on override donc les 4 mecanismes ensemble, en dernier dans la cascade. Mobile 80->64px, tablette 80->72px. us-header-settings.json aligne. */ @media (max-width: 600px) { :root { --header-height: 64px; --header-sticky-height: 56px; } .l-header:before { content: '64'; } .l-header.sticky:before { content: '56'; } .l-subheader.at_middle { line-height: 64px; height: 64px; } .l-header.sticky .l-subheader.at_middle { line-height: 56px; height: 56px; } .l-header .l-subheader.at_middle .w-image img { max-height: 36px; width: auto; } .l-header a.w-btn.us-btn-style_2.ush_btn_5 { font-size: 12px; padding: 0.9em 1.7em; } } @media (min-width: 601px) and (max-width: 1024px) { :root { --header-height: 72px; --header-sticky-height: 60px; } .l-header:before { content: '72'; } .l-subheader.at_middle { line-height: 72px; height: 72px; } }