/* =========================================================
AKLIO — style-v2.8.css
Réorganisé le 22/08/2026
Ce fichier contient le CSS commun à TOUTES les pages du site.
Les CGV (et leur mise en page @media print) ont été extraites
dans un fichier séparé : cgv.css — voir plus bas dans ce
commentaire pour savoir où le charger.
SOMMAIRE
1. COULEURS & VARIABLES (palette, univers de marque)
2. BASE (polices @font-face, reset global)
3. TITRES (h1–h6 génériques, titres de section)
4. PARAGRAPHES (typographie du texte courant)
5. STRUCTURE & COMPOSANTS (header, footer, navigation,
hero, boutons, sections, formulaires, cookies,
mentions légales, page recrutement…)
6. CARTES (intro, programmes, enseignants, méthode, FAQ,
choix, cartes visuelles/expand, recrutement…)
7. MOBILE / RESPONSIVE (@media, du plus large au plus étroit)
8. COMPOSANTS PARTAGÉS (variantes de section colorées,
boucles décoratives, dual-buttons) — génériques,
utilisables sur n'importe quelle page
CGV.CSS — À charger uniquement sur les 2 pages concernées
(CGV AKLIO Home et CGV AKLIO Immersion), en plus de ce fichier :
HOMEPAGE.CSS — À charger uniquement sur la page d'accueil,
en plus de ce fichier (styles propres à la home : sections
"à propos", méthode, ambition, offres, professeurs, FAQ...) :
========================================================= */
/* =========================================================
1. COULEURS & VARIABLES
========================================================= */
/* =========================================================
AKLIO COLOR PALETTE (Marine Flohic - Charte Graphique)
=========================================================
Couleurs principales
#FDF8E8 Almond
#597BFF Cornflower
#333499 Navy
#B5D6FF Sky Blue
#FBBB0E Corn
#FF7903 Orange
#FF5805 Orange Red
#FFD81E Yellow
----- ajouté par P.
#2F8F67 Vert
Couleur secondaires
#000066 Dark Blue
#E5F3FF Pale Blue
#FFFABB Pale Yellow
#FFE7A8 Pale Orange
----- ajouté par P.
#E2F4CF Pale Vert
#FBE9A7 Pale2 Yellow
Autres
#FFFFFF White
#000000 Black
========================================================= */
:root {
/* Couleurs principales */
--almond: #FDF8E8;
--cornflower: #597BFF;
--cornflower-text: #4564D9;
--navy: #333499;
--sky-blue: #B5D6FF;
--corn: #FBBB0E;
--orange: #FF7903;
--orange-red: #FF5805;
--yellow: #FFD81E;
--vert: #2F8F67;
/* Couleurs secondaires */
--dark-blue: #000066;
--pale-blue: #E5F3FF;
--pale-yellow1: #FFFABB;
--pale-orange: #FFE7A8;
--pale-vert: #E2F4CF;
--pale-yellow: #FBE9A7;
/* Autres couleurs */
--white: #FFFFFF;
--black: #000000; /* Pas utilisé pour les textes */
/* Typographie AKLIO */
--text: var(--dark-blue);
--heading: var(--navy);
--muted: var(--navy);
/* Fonctions de la charte */
--primary: var(--navy);
--secondary: var(--cornflower);
--accent: var(--orange);
--accent-red: var(--orange-red);
--bg: var(--almond);
--background: var(--almond);
--border: rgba(89, 123, 255, 0.18);
--shadow: 0 18px 45px rgba(0, 0, 102, 0.10);
--radius: 18px;
--max: 1180px;
}
/* =========================================================
VARIANTES DE SECTION — COULEURS AKLIO
========================================================= */
.section-blue {
--section-heading: var(--cornflower-text);
--section-accent: var(--cornflower);
--section-soft: var(--pale-blue);
}
.section-navy {
--section-heading: var(--navy);
--section-accent: var(--navy);
--section-soft: var(--pale-blue);
}
.section-yellow {
--section-heading: var(--corn);
--section-accent: var(--corn);
--section-soft: var(--pale-yellow);
}
.section-orange {
--section-heading: var(--orange);
--section-accent: var(--orange);
--section-soft: var(--pale-orange);
}
/* =========================================================
UNIVERS AKLIO
Variables sémantiques disponibles dans toutes les pages :
--universe-strong
--universe-soft
--universe-accent
--universe-text-on-accent
--universe-text
--universe-text-on-strong
--universe-thread
--header-bg
--header-text
--footer-bg
--footer-text
--legal-notice-bg
--legal-notice-text
========================================================= */
/* ==========================
AKLIO GÉNÉRAL
Bleu Conrflower
========================== */
.universe-general {
--universe-strong: var(--cornflower);
--universe-soft: var(--pale-blue);
--universe-accent: var(--navy);
--universe-text-on-accent: var(--almond);
--universe-text: var(--dark-blue);
--universe-text-on-strong: var(--almond);
--universe-thread: var(--almond);
--header-bg: var(--cornflower);
--header-text: var(--almond);
--footer-bg: var(--cornflower);
--footer-text: var(--almond);
--legal-notice-bg: var(--pale-blue);
--legal-notice-text: var(--dark-blue);
}
/* ==========================
AKLIO HOME
Corn
========================== */
.universe-home {
--universe-strong: var(--corn);
--universe-soft: var(--pale-yellow);
--universe-accent: var(--navy);
--universe-text-on-accent: var(--almond);
--universe-text: var(--dark-blue);
--universe-text-on-strong: var(--dark-blue);
--universe-thread: var(--sky-blue);
--header-bg: var(--corn);
--header-text: var(--dark-blue);
--footer-bg: var(--corn);
--footer-text: var(--dark-blue);
--legal-notice-bg: var(--pale-yellow);
--legal-notice-text: var(--dark-blue);
}
/* ==========================
AKLIO Academy
Orange
========================== */
.universe-academie {
--universe-strong: var(--orange);
--universe-soft: var(--pale-orange);
--universe-accent: var(--cornflower);
--universe-text-on-accent: var(--almond);
--universe-text: var(--dark-blue);
--universe-text-on-strong: var(--almond);
--universe-thread: var(--navy);
--header-bg: var(--orange);
--header-text: var(--dark-blue);
--footer-bg: var(--orange);
--footer-text: var(--dark-blue);
--legal-notice-bg: var(--pale-orange);
--legal-notice-text: var(--dark-blue);
}
/* ==========================
AKLIO PRÉPAS
Rattaché graphiquement à Academy
========================== */
.universe-prepas {
--universe-strong: var(--orange);
--universe-soft: var(--pale-orange);
--universe-accent: var(--cornflower);
--universe-text-on-accent: var(--almond);
--universe-text: var(--dark-blue);
--universe-text-on-strong: var(--almond);
--universe-thread: var(--navy);
--header-bg: var(--orange);
--header-text: var(--dark-blue);
--footer-bg: var(--orange);
--footer-text: var(--dark-blue);
--legal-notice-bg: var(--pale-orange);
--legal-notice-text: var(--dark-blue);
}
/* ==========================
AKLIO IMMERSION
Cornflower
========================== */
.universe-immersion {
--universe-strong: var(--cornflower);
--universe-soft: var(--pale-blue);
--universe-accent: var(--orange);
--universe-text-on-accent: var(--almond);
--universe-text: var(--dark-blue);
--universe-text-on-strong: var(--almond);
--universe-thread: var(--sky-blue);
--header-bg: var(--cornflower);
--header-text: var(--almond);
--footer-bg: var(--cornflower);
--footer-text: var(--almond);
--legal-notice-bg: var(--pale-blue);
--legal-notice-text: var(--dark-blue);
}
/* ==========================
AKLIO IMMERSION
Vert (essai de Philippe car couleur n'est pas dans charte graphique de Marine)
========================== */
/*
.universe-immersion {
--universe-strong: var(--vert);
--universe-soft: var(--pale-vert);
--universe-accent: var(--orange);
--universe-text-on-accent: var(--almond);
--universe-text: var(--dark-blue);
--universe-text-on-strong: var(--almond);
--universe-thread: var(--orange);
--header-bg: var(--vert);
--header-text: var(--almond);
--footer-bg: var(--vert);
--footer-text: var(--almond);
}
*/
/* ==========================
AKLIO BUSINESS
Navy
========================== */
.universe-business {
--universe-strong: var(--navy);
--universe-soft: var(--pale-blue);
--universe-accent: var(--cornflower);
--universe-text-on-accent: var(--almond);
--universe-text: var(--dark-blue);
--universe-text-on-strong: var(--almond);
--universe-thread: var(--cornflower);
--header-bg: var(--navy);
--header-text: var(--almond);
--footer-bg: var(--navy);
--footer-text: var(--almond);
--legal-notice-bg: var(--pale-blue);
--legal-notice-text: var(--dark-blue);
}
/* ==========================
RECRUTEMENT — rattaché à Academy
========================== */
.universe-recrutement {
--universe-strong: var(--orange);
--universe-soft: var(--pale-orange);
--universe-accent: var(--cornflower);
--universe-text-on-accent: var(--almond);
--universe-text: var(--dark-blue);
--universe-text-on-strong: var(--almond);
--universe-thread: var(--navy);
--header-bg: var(--orange);
--header-text: var(--dark-blue);
--footer-bg: var(--orange);
--footer-text: var(--dark-blue);
--legal-notice-bg: var(--pale-orange);
--legal-notice-text: var(--dark-blue);
}
/* ==========================
BECOME A HOST FAMILY — rattaché à Immersion
========================== */
.universe-become-a-host-family {
--universe-strong: var(--cornflower);
--universe-soft: var(--pale-blue);
--universe-accent: var(--orange);
--universe-text-on-accent: var(--almond);
--universe-text: var(--dark-blue);
--universe-text-on-strong: var(--almond);
--universe-thread: var(--sky-blue);
--header-bg: var(--cornflower);
--header-text: var(--almond);
--footer-bg: var(--cornflower);
--footer-text: var(--almond);
--legal-notice-bg: var(--pale-blue);
--legal-notice-text: var(--dark-blue);
}
/* =========================================================
2. BASE — polices et reset global
========================================================= */
/* ============================================================
PARTIE DESKTOP — styles de base (toutes tailles d'écran)
============================================================ */
/* MONTSERRAT — polices variables (couvre tous les poids 100-900) */
@font-face {
font-family: 'Montserrat';
src: url('/fonts/Montserrat/Montserrat-VariableFont_wght.ttf') format('truetype-variations');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Montserrat';
src: url('/fonts/Montserrat/Montserrat-Italic-VariableFont_wght.ttf') format('truetype-variations');
font-weight: 100 900;
font-style: italic;
font-display: swap;
}
/* NEW FARM — fichiers statiques par graisse */
@font-face {
font-family: 'New Farm';
src: url('/fonts/New-Farm/fonts/fonts_com-New_Farm_Thin.woff') format('woff');
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'New Farm';
src: url('/fonts/New-Farm/fonts/fonts_com-New_Farm_Light.woff') format('woff');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'New Farm';
src: url('/fonts/New-Farm/fonts/fonts_com-New_Farm_Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'New Farm';
src: url('/fonts/New-Farm/fonts/fonts_com-New_Farm_Medium.woff') format('woff');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'New Farm';
src: url('/fonts/New-Farm/fonts/fonts_com-New_Farm_Bold.woff') format('woff');
font-weight: 700;
font-style: normal;
font-display: swap;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Montserrat', Arial, sans-serif;
}
img {
max-width: 100%;
display: block;
}
a {
color: inherit;
text-decoration: none;
}
/* =========================================================
3. TITRES
========================================================= */
/* TYPO */
h1, h2, h3 {
font-family: 'New Farm', Georgia, serif;
}
h1 {
font-size: clamp(58px, 7vw, 104px);
line-height: 0.95;
letter-spacing: -1px;
}
h2 {
font-size: clamp(32px, 4vw, 46px);
line-height: 1.15;
text-align: center;
}
h3 {
font-size: 22px;
line-height: 1.2;
}
.section > h2,
.section-lead {
max-width: 880px;
margin-left: auto;
margin-right: auto;
}
.section-lead {
margin-top: 18px;
text-align: center;
}
/* =========================================================
TEXTES SUR FOND UNIVERS FORT
========================================================= */
.section-universe h1,
.section-universe h2,
.section-universe h3,
.section-universe h4,
.section-universe h5,
.section-universe h6,
.section-universe p,
.section-universe .section-lead {
color: var(--universe-text-on-strong);
}
.section-neutral h1,
.section-neutral h2,
.section-neutral h3,
.section-neutral h4,
.section-neutral h5,
.section-neutral h6 {
color: var(--universe-text);
}
.section-universe-soft h1,
.section-universe-soft h2,
.section-universe-soft h3,
.section-universe-soft h4,
.section-universe-soft h5,
.section-universe-soft h6 {
color: var(--universe-text);
}
/* =========================================================
4. PARAGRAPHES
========================================================= */
p {
margin: 0;
color: var(--muted);
font-size: 17px;
}
/* =========================================================
TYPOGRAPHIE — PARAGRAPHES
========================================================= */
/* Paragraphes éditoriaux — alignement par défaut à gauche */
.section p {
text-align: left;
hyphens: none;
}
/* Cartes : conserver l'alignement à gauche */
.program-card p,
.method-card p,
.method-item p,
.teacher-card p,
.intro-card p,
.expand-card p {
text-align: left;
hyphens: none;
}
/* Les introductions de section restent centrées et sans césure */
.section p.section-lead {
text-align: center;
hyphens: none;
-webkit-hyphens: none;
}
/* =========================================================
5. STRUCTURE & COMPOSANTS
(header, footer, navigation, hero, boutons, sections,
formulaires, cookies, mentions légales, recrutement…)
========================================================= */
/* =========================================================
Acces espace client
========================================================= */
.client-space-link {
position: relative;
display: inline-flex;
align-items: center;
}
.client-space-icon {
width: 18px;
height: 18px;
object-fit: contain;
flex-shrink: 0;
}
.client-space-icon svg {
display: block;
width: 100%;
height: 100%;
}
.client-space-tooltip {
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
padding: 6px 10px;
border-radius: 6px;
background: var(--dark-blue);
color: var(--white);
font-size: 0.75rem;
font-weight: 500;
white-space: nowrap;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.15s ease;
z-index: 1000;
}
.client-space-link:hover .client-space-tooltip,
.client-space-link:focus-visible .client-space-tooltip {
opacity: 1;
visibility: visible;
}
/* =========================================================
HEADER / FOOTER
========================================================= */
.aklio-header a,
.aklio-header a:visited {
color: inherit;
}
/* FOOTER */
/* fusion de 2 règles identiques/complémentaires */
.aklio-footer {
background:var(--footer-bg);
color:var(--footer-text);
padding:48px 24px 60px;
text-align:center;
}
.aklio-footer a,
.aklio-footer a:visited {
color: inherit;
}
/* HEADER */
.aklio-header{
background: var(--header-bg, var(--almond));
color: var(--header-text, var(--primary));
width:100%;
}
.aklio-header-inner {
max-width: var(--max);
margin: 0 auto;
padding: 14px 24px;
display: flex;
align-items: center;
gap: 30px;
}
.logo {
display: flex;
align-items: center;
}
.logo img {
height: 60px;
width: auto;
display: block;
}
.logo a {
display: inline-flex;
align-items: center;
transition: transform 0.2s ease, opacity 0.2s ease;
}
.logo a:hover {
transform: scale(1.05);
opacity: 0.82;
}
.nav {
display: flex;
gap: 28px;
align-items: center;
flex-wrap: wrap;
flex: 1;
}
.nav a {
font-size: 15px;
font-weight: 600;
transition:
opacity 0.2s ease,
transform 0.2s ease;
}
.nav a:hover {
opacity: 0.70;
}
/* HERO BANNER */
.hero-banner {
position: relative;
width: 100%;
max-width: none;
margin: 0;
border-radius: 0;
overflow: hidden;
}
/*
.hero-banner > img {
width: 100%;
height: 720px;
object-fit: cover;
object-position: center top
}
*/
.hero-banner > img {
width: 100%;
height: auto;
display: block;
}
/* HERO — PAGE D'ACCUEIL */
/* ⚠ la 2e règle d'origine masquait ce dégradé pour TOUTES les pages,
pas seulement l'accueil (comportement inchangé) */
.hero-banner::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to right,
rgba(10,37,64,0.70),
rgba(10,37,64,0.25),
rgba(10,37,64,0.05)
);
z-index: 1;
display: none;
}
.hero-overlay {
position: absolute;
inset: 0;
color: var(--almond);
z-index: 2;
}
.hero-brand {
display: inline-block;
margin-bottom: 18px;
letter-spacing: 3px;
font-size: 14px;
font-weight: 800;
text-transform: uppercase;
}
.hero-overlay h1 {
position: absolute;
top: 70px;
left: 80px;
color: var(--almond);
font-size: clamp(38px, 5vw, 64px);
line-height: 1.02;
max-width: none;
white-space: nowrap;
}
/* fusion de 2 règles ; la version « page d'accueil » (bottom/max-width) l'emportait déjà sur la version générique — comportement conservé à l'identique */
.hero-bottom {
position: absolute;
left: 80px;
bottom: 55px;
max-width: 1050px;
}
.hero-bottom p {
text-shadow: none;
}
.hero-home-aklio .hero-overlay h1 {
font-size: clamp(30px, 3vw, 42px);
max-width: 760px;
line-height: 1.08;
white-space: normal;
}
.hero-home-aklio .hero-bottom p {
font-size: 17px;
max-width: 560px;
line-height: 1.45;
}
.hero-home-aklio .hero-bottom {
left: 50%;
transform: translateX(-50%);
bottom: 48px;
width: min(90%, 900px);
max-width: 900px;
text-align: center;
}
.hero-level-page .hero-top {
position: absolute;
top: 70px;
left: 80px;
right: 80px;
}
.hero-level-page .hero-top .hero-brand {
margin-bottom: 14px;
}
.hero-level-page .hero-top h1 {
position: static;
font-size: clamp(36px, 4vw, 52px);
max-width: 920px;
white-space: normal;
}
.hero-overlay p {
margin-top: 22px;
color: var(--almond);
font-size: 20px;
max-width: 680px;
}
.hero-overlay .hero-buttons {
margin-top: 32px;
}
.hero-overlay .btn-primary {
background: color-mix(
in srgb,
var(--almond) 70%,
transparent
);
color: var(--universe-strong);
}
.hero-overlay .btn-secondary {
background: color-mix(
in srgb,
var(--universe-strong) 60%,
transparent
);
color: var(--almond);
border: 1.5px solid rgba(255,255,255,0.75);
}
.hero-overlay .btn-primary:hover {
background: var(--almond);
color: var(--universe-strong);
}
.hero-overlay .btn-secondary:hover {
background: var(--universe-strong);
color: var(--almond);
border-color: var(--almond);
}
.hero-bottom h1 {
position: static;
margin: 0;
color: var(--almond);
font-size: clamp(38px, 4.5vw, 58px);
line-height: 1.02;
white-space: normal;
}
.hero-homepage::after {
display: none;
}
.hero-homepage .hero-bottom h1,
.hero-home-aklio .hero-bottom h1,
.hero-level-page .hero-top h1 {
text-shadow: none;
}
.hero-home-aklio .hero-bottom h1 {
font-size: clamp(24px, 2.2vw, 32px);
line-height: 1.08;
max-width: 700px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
/* PAGE MERCI */
.merci-page .hero-buttons {
display: flex;
width: 100%;
margin: 28px auto 0;
justify-content: center;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
/* BUTTONS */
.hero-actions-section .hero-buttons {
justify-content: center;
margin-top: 0;
}
.hero-buttons {
display: flex;
justify-content: center;
gap: 16px;
margin-top: -70px; /* remonte visuellement les boutons sur le bas du hero */
position: relative;
z-index: 2;
padding-bottom: 24px;
}
.buttons {
display: flex;
gap: 18px;
flex-wrap: wrap;
margin-top: 28px;
}
.btn {
display: inline-block;
padding: 14px 26px;
border-radius: 999px;
font-size: 15px;
font-weight: 700;
}
.btn-primary {
background: var(--primary);
color: var(--almond);
}
.btn-secondary {
background: color-mix(
in srgb,
var(--primary) 5%,
transparent
);
color: var(--primary);
border: 1.5px solid var(--primary);
}
/* =========================================================
Bouton primaire et secondaire sur fond univers fort
===========================================================
.section-universe .btn-primary {
background: var(--universe-text-on-strong);
color: var(--universe-strong);
}
.section-universe .btn-primary:hover {
background: color-mix(
in srgb,
var(--universe-text-on-strong) 85%,
transparent
);
color: var(--universe-strong);
}
.section-universe .btn-secondary {
background: transparent;
color: var(--universe-text-on-strong);
border-color: var(--universe-text-on-strong);
}
.section-universe .btn-secondary:hover {
background: var(--universe-text-on-strong);
color: var(--universe-strong);
}
/* Bouton primaire et secondaire sur fond univers soft
.section-universe-soft .btn-primary,
.section-neutral .btn-primary {
background: var(--universe-strong);
color: var(--universe-text-on-strong);
}
.section-universe-soft .btn-primary:hover,
.section-neutral .btn-primary:hover {
background: color-mix(
in srgb,
var(--universe-text-on-strong) 80%,
transparent
);
color: var(--universe-strong);
border-color: var(--universe-strong);
}
.section-universe-soft .btn-secondary,
.section-neutral .btn-secondary {
background: color-mix(
in srgb,
var(--universe-text-on-strong) 80%,
transparent
);
color: var(--universe-strong);
border-color: var(--universe-strong);
}
.section-universe-soft .btn-secondary:hover,
.section-neutral .btn-secondary:hover {
background: var(--universe-strong);
color: var(--universe-text-on-strong);
}
*/
/* SECTIONS */
.section {
padding-top: 24px;
padding-right: 24px;
padding-bottom: 24px;
padding-left: 24px;
}
.section-white {
background: var(--white);
}
.section-soft {
background: var(--bg);
}
/* SPLIT */
.split {
max-width: var(--max);
margin: 0 auto;
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 90px;
align-items: center;
}
.split h2 {
text-align: left;
margin-bottom: 28px;
}
.split p + p {
margin-top: 22px;
}
.split-photo img {
width: 100%;
height: 330px;
object-fit: cover;
border-radius: 28px;
box-shadow: var(--shadow);
transition: transform 0.35s ease;
}
/* =========================
Pour l emplacement photo ambition de la page d'accueil
========================= */
.homepage-ambition .split-photo {
display: flex;
align-items: center;
justify-content: center;
overflow: visible;
}
.homepage-ambition .split-photo img {
width: auto;
max-width: 100%;
height: auto;
max-height: 280px;
object-fit: contain;
border-radius: 0;
box-shadow: none;
}
/* =========================
PHOTOS DE CONTENU — HOVER
========================= */
.split-photo {
overflow: hidden;
}
.split-photo:hover img {
transform: scale(1.025);
}
.about-intro {
max-width: 1000px;
margin: 0 auto;
}
.about-intro h2 {
text-align: center;
}
.about-intro p {
max-width: 850px;
margin-left: auto;
margin-right: auto;
text-align: left;
hyphens: none;
}
.about-intro p + p {
margin-top: 1.25rem;
}
.about-values {
max-width: 900px;
margin: 0 auto;
}
.about-value + .about-value {
margin-top: 2rem;
}
.about-page .split {
grid-template-columns: 2fr 1fr;
}
/* =========================================================
DUAL PANEL
========================================================= */
.dual-panel {
max-width: var(--max);
margin: 0 auto;
display: grid;
grid-template-columns: 86px 1fr 86px 1fr;
gap: 34px;
align-items: center;
}
.panel-icon {
width: 74px;
height: 74px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 34px;
}
/* Fond blanc */
.section-neutral .panel-icon.dark {
background: var(--universe-strong);
color: var(--universe-text-on-strong);
}
.section-neutral .panel-icon.light {
background: var(--universe-soft);
color: var(--universe-text);
}
/* Fond univers fort */
.section-universe .panel-icon.dark,
.section-universe .panel-icon.light {
background: var(--universe-soft);
color: var(--universe-text);
}
/* CONTACT PAGE */
.contact-hero h1 {
max-width: 900px;
margin: 0 auto;
text-align: center;
font-size: clamp(42px, 6vw, 78px);
}
.contact-hero {
background: var(--almond);
color: var(--universe-text);
border-top: 3px solid var(--universe-strong);
border-bottom: 3px solid var(--universe-strong);
}
.contact-hero h1 {
max-width: 900px;
margin: 0 auto;
text-align: center;
font-size: clamp(42px, 6vw, 78px);
}
.contact-hero h1,
.contact-hero h2,
.contact-hero p,
.contact-hero .section-lead {
color: var(--universe-text);
}
.contact-layout {
max-width: var(--max);
margin: 0 auto;
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 48px;
align-items: start;
}
.contact-intro h2 {
text-align: left;
margin-bottom: 24px;
}
.contact-intro p {
margin-bottom: 32px;
}
.contact-page {
background: var(--universe-soft);
}
.contact-form {
border-radius: 28px;
padding: 42px;
box-shadow: var(--shadow);
background: var(--almond);
color: var(--universe-text);
}
.contact-form h2 {
text-align: left;
margin-bottom: 28px;
}
/* PAGE MERCI */
.merci-page {
background: var(--almond);
color: var(--universe-text);
text-align: center;
border-bottom: 3px solid var(--universe-strong);
}
.merci-page h1 {
color: var(--universe-text);
font-size: clamp(30px, 4vw, 48px);
line-height: 1.15;
}
.merci-page .section-lead {
max-width: 720px;
margin: 20px auto 28px;
color: var(--universe-text);
font-size: clamp(16px, 1.5vw, 19px);
line-height: 1.6;
}
.merci-page .hero-buttons {
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
margin-bottom: 18px;
}
.form-grid-single {
grid-template-columns: 1fr;
}
.contact-form input,
.contact-form textarea {
width: 100%;
border-radius: 12px;
padding: 16px 18px;
font-family: 'Montserrat', Arial, sans-serif;
font-size: 16px;
background: var(--almond);
color: var(--universe-text);
border: 1.5px solid var(--universe-soft);
}
.contact-form textarea {
resize: vertical;
margin-bottom: 22px;
}
.contact-form input:focus,
.contact-form textarea:focus {
outline: none;
border-color: var(--universe-strong);
}
.sap-only,
.prepas-only {
display: none;
}
body.sap-active .sap-only,
body.prepas-active .prepas-only {
display: block;
}
.conditional-fields {
margin: 22px 0;
padding: 22px;
border-radius: 16px;
background: var(--bg);
}
.conditional-fields h3 {
margin-bottom: 16px;
font-size: 22px;
}
.form-submit-wrap {
width: 100%;
display: flex;
justify-content: center;
margin-top: 30px;
}
.privacy-consent {
max-width: 760px;
margin: 24px auto 0;
display: flex;
align-items: flex-start;
gap: 12px;
}
.privacy-consent input[type="checkbox"] {
width: auto !important;
margin-top: 6px;
flex-shrink: 0;
}
.privacy-consent span {
line-height: 1.6;
}
/* COOKIE BANNER */
.cookie-banner {
position: fixed;
bottom: 24px;
left: 24px;
right: 24px;
z-index: 9999;
background: var(--almond);
border-radius: 20px;
box-shadow: 0 20px 50px rgba(10,37,64,.18);
padding: 24px;
}
.cookie-content {
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
}
.cookie-text {
max-width: 700px;
}
.cookie-text strong {
display: block;
margin-bottom: 8px;
color: var(--primary);
}
.cookie-actions {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.cookie-actions a {
font-size: 14px;
font-weight: 600;
color: var(--primary);
}
/* AMBITION HIGHLIGHT */
.ambition-highlight {
display: inline-block;
margin: 24px 0 30px;
padding: 14px 18px;
background: var(--universe-soft);
border-left: 4px solid var(--primary);
border-radius: 10px;
color: var(--universe-text);
font-size: 20px;
line-height: 1.45;
font-weight: 700;
}
.section-universe p.ambition-highlight {
color: var(--universe-text);
}
/* UTILITIES */
.buttons-center {
justify-content: center;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* HERO BRANDING / PAGE LABEL */
.hero-branding {
margin-bottom: 48px;
}
.hero-logo {
width: 180px; /* à ajuster selon le rendu */
height: auto;
display: block;
}
.hero-page-label {
display: inline-block;
margin-bottom: 24px;
font-family: "Montserrat", Arial, sans-serif;
font-size: 14px;
font-weight: 800;
letter-spacing: 3px;
text-transform: uppercase;
color: #fff;
}
/* LEGAL NOTICE */
.legal-notice {
padding: 20px 0;
border-bottom: 1px solid var(--universe-soft);
background: var(--legal-notice-bg);
color: var(--legal-notice-text);
text-align: center;
}
.legal-notice .container {
max-width: 750px;
margin: 0 auto;
padding: 0 20px;
}
.legal-notice p {
margin: 0;
font-size: 0.85rem;
line-height: 1.7;
color: inherit;
}
.legal-notice a,
.legal-notice a:visited {
color: inherit;
}
.legal-links {
margin-top: 12px;
}
.legal-links a,
.legal-links a:visited {
color: inherit;
font-size: .85rem;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: .2s;
}
.legal-links a:hover {
border-bottom-color: currentColor;
}
/* ============================================================
Pré-footer - SAP / AKLIO HOME
============================================================ */
.home-tax-content {
max-width: 1100px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 48px;
}
.home-tax-text {
flex: 1;
}
.home-tax-sap-logo {
flex: 0 0 auto;
width: auto;
height: 90px;
object-fit: contain;
transition: transform 0.2s ease, opacity 0.2s ease;
}
a:hover .home-tax-sap-logo {
transform: scale(1.04);
opacity: 0.88;
}
.home-tax-buttons {
justify-content: center;
margin-top: 28px;
}
/* NAVIGATION — SOUS-MENU "PROGRAMMES" AU SURVOL */
.nav-item.has-submenu {
position: relative;
display: inline-flex;
align-items: center;
}
.submenu {
position: absolute;
top: 100%;
left: 0;
margin-top: 14px;
min-width: 230px;
background: var(--almond);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 10px;
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
z-index: 100;
}
.nav-item.has-submenu:hover > .submenu,
.nav-item.has-submenu:focus-within > .submenu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.submenu a {
display: block;
padding: 12px 16px;
border-radius: 12px;
white-space: nowrap;
font-size: 15px;
font-weight: 600;
color: var(--text);
transition: background 0.2s ease, color 0.2s ease;
}
.submenu a:hover {
background: var(--bg);
color: var(--primary);
}
.submenu a,
.submenu a:visited {
color: var(--text);
}
/* Zone tampon invisible pour éviter que le menu se ferme
pendant le trajet de la souris vers le sous-menu.
Restreinte au premier niveau (directement dans .nav) pour ne pas
déborder sur les liens du sous-menu (ex: Academy, Business...). */
.nav > .nav-item.has-submenu::after {
content: "";
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 14px;
}
/* Sous-sous-menu : AKLIO Home > Primaire / Collège / Lycée */
.has-submenu-nested {
position: relative;
display: block;
justify-content: space-between;
align-items: center;
}
.nav-item.has-submenu.has-submenu-nested {
display: block;
width: 100%;
}
.has-submenu-nested > a::after {
content: "›";
float: right;
margin-left: 12px;
font-weight: 700;
}
.submenu-nested {
top: -10px;
left: 100%;
margin-top: 0;
margin-left: 8px;
}
.submenu-label {
font-size: 15px;
font-weight: 600;
color: var(--text);
}
.nav-link-row > .submenu-label {
flex: 1;
display: block;
padding: 12px 16px;
}
/* Zone tampon horizontale pour le passage souris vers le sous-sous-menu */
.has-submenu-nested::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 100%;
width: 12px;
}
/* HEADER AKLIO HOME (variante) */
.aklio-home-header {
max-width: 1440px;
gap: 42px;
}
.aklio-home-header .nav {
flex: 1;
}
.aklio-header-text {
display: flex;
flex-direction: column;
align-items: flex-end;
text-align: right;
line-height: 1.1;
}
/* Logo de l’univers à droite, au-dessus de la signature. */
.aklio-header-universe-logo {
display: block;
width: 160px;
height: auto;
max-height: 60px;
object-fit: contain;
object-position: right center;
flex-shrink: 0;
}
.universe-home .aklio-header-universe-logo {
width: 120px;
}
.universe-academie .aklio-header-universe-logo {
width: 155px;
}
.universe-prepas .aklio-header-universe-logo {
width: 155px;
}
.aklio-header-name{
font-family: "Montserrat", Arial, sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 1;
letter-spacing: 0;
color: inherit;
white-space: nowrap;
}
.aklio-header-tagline{
margin-top: 5px;
font-family: "Montserrat", Arial, sans-serif;
font-size: 11px;
font-weight: 500;
line-height: 1.2;
color: inherit;
opacity: .75;
white-space: nowrap;
}
.aklio-home-header-sap {
width: auto !important;
height: 38px;
max-width: none !important;
object-fit: contain;
flex-shrink: 0;
}
/* Hover bloc univers du header (inclut la transition au survol) */
.header-brand {
flex: 0 0 auto;
display: flex;
justify-content: flex-end;
align-items: center;
gap:18px;
order: 2;
margin-left: auto;
transition: transform 0.2s ease, opacity 0.2s ease;
}
.header-brand-link{
display:flex;
align-items:center;
gap:18px;
text-decoration:none;
color:inherit;
}
.header-brand-link:hover{
opacity:.85;
}
.header-brand:hover {
transform: scale(1.025);
opacity: 0.88;
}
.teacher-divider{
margin:70px auto;
width:120px;
border:0;
border-top:1px solid rgba(0,0,0,.15);
}
.teacher-eyebrow{
display:inline-block;
margin-bottom:12px;
letter-spacing:.25em;
text-transform:uppercase;
font-size:.8rem;
font-weight:700;
color:var(--primary) /* corrigé : --color-primary n'existait pas dans :root */;
}
.teacher-recruit{
max-width:880px;
margin:auto;
text-align:center;
}
.teacher-recruit h3{
margin-bottom:20px;
}
.teacher-recruit .hero-buttons{
justify-content:center;
}
.teacher-recruit p {
text-align: left;
hyphens: none;
}
.teacher-intro{
font-size:1.2rem;
margin-bottom: 18px;
}
/* =========================================================
RECRUTEMENT PROFESSEURS
========================================================= */
.recruitment-hero{
text-align:center;
}
.recruitment-hero .section-lead{
max-width:780px;
margin-left:auto;
margin-right:auto;
}
.recruitment-hero-buttons{
display:flex;
justify-content:center;
align-items:center;
gap:16px;
flex-wrap:wrap;
}
/* Final application section */
.recruitment-application{
align-items:center;
}
.recruitment-application-content{
max-width:620px;
}
.recruitment-application-buttons{
justify-content:flex-start;
}
.recruitment-hero h1{
font-size: clamp(36px, 4vw, 52px);
line-height: 1;
margin-bottom: 20px;
}
/* =========================================================
MENU HAMBURGER MOBILE
========================================================= */
/* Invisibles sur ordinateur */
.menu-toggle,
.submenu-toggle {
display: none;
}
.nav-link-row {
display: contents;
}
.section-universe {
background: var(--universe-strong);
color: var(--universe-text-on-strong);
}
.section-universe-soft {
background: var(--universe-soft);
color: var(--universe-text);
}
.section-neutral {
background: var(--almond);
color: var(--universe-text);
}
/* =========================================================
6. CARTES
========================================================= */
/* =========================================================
Rules for page d accueil
Cartes claires sur fond univers fort
===========================================================*/
.section-universe .teacher-card {
color: var(--universe-text);
}
.section-universe .teacher-card h3,
.section-universe .teacher-card p {
color: var(--universe-text);
}
/* =========================================================
CARTES UNIVERS — PAGE À PROPOS
========================================================= */
.about-page .program-card.universe-home,
.about-page .program-card.universe-academie,
.about-page .program-card.universe-business,
.about-page .program-card.universe-immersion {
background: var(--almond);
color: var(--universe-text);
border: 2px solid var(--universe-strong);
}
.about-page .program-card h3,
.about-page .program-card p {
color: var(--universe-text);
}
.about-page .program-card .program-card-link {
color: var(--universe-strong);
}
.about-page .program-card {
position: relative;
}
.about-page .program-card-badge {
position: absolute;
top: 18px;
right: 18px;
width: 55px;
height: auto;
}
.about-page .program-card h3 {
padding-right: 70px;
}
/* INTRO */
.intro-grid {
max-width: var(--max);
margin: 46px auto 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
}
.intro-card,
.program-card,
.teacher-card {
background: var(--universe-soft);
padding: 34px 28px;
border-radius: var(--radius);
box-shadow: var(--shadow);
}
/* CARTES — BASE */
.intro-card,
.program-card,
.teacher-card {
background: var(--universe-soft);
color: var(--universe-text);
padding: 34px 28px;
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.intro-card,
.program-card,
.teacher-card,
.method-card {
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}
.intro-card:hover,
.program-card:hover,
.teacher-card:hover,
.method-card:hover {
transform: translateY(-3px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
/* CARTES SUR FOND UNIVERS */
.section-universe .intro-card,
.section-universe .program-card,
.section-universe .teacher-card {
background: var(--universe-soft);
color: var(--universe-text);
}
.section-universe .intro-card h3,
.section-universe .intro-card p,
.section-universe .program-card h3,
.section-universe .program-card p,
.section-universe .program-card li,
.section-universe .teacher-card h3,
.section-universe .teacher-card p {
color: var(--universe-text);
}
/* Titres et textes */
.intro-card h3,
.program-card h3,
.teacher-card h3 {
color: var(--universe-text);
}
.intro-card p,
.program-card p,
.teacher-card p,
.intro-card li,
.program-card li,
.teacher-card li {
color: var(--universe-text);
}
.section-universe-soft .intro-card,
.section-universe-soft .program-card,
.section-universe-soft .teacher-card {
background: var(--almond);
color: var(--universe-text);
}
.intro-card {
text-align: center;
min-height: 230px;
display: flex;
flex-direction: column;
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}
.icon,
.method-icon,
.program-icon {
font-size: 36px;
margin-bottom: 18px;
display: inline-block;
}
.intro-card h3 {
min-height: 2.4em;
margin-bottom: 6px;
}
/* METHOD */
.method-row {
max-width: var(--max);
margin: 58px auto 0;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
}
.method-row-four {
grid-template-columns: repeat(4, 1fr);
}
.method-item {
text-align: center;
padding: 0 28px;
border-right: 1px solid var(--border);
}
.method-item:last-child {
border-right: none;
}
.method-icon {
width: 78px;
height: 78px;
border-radius: 50%;
background: var(--alomond);
color: var(--universe-text);
box-shadow: var(--shadow);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
}
.section-universe .method-card {
background: var(--universe-soft);
color: var(--universe-text);
}
.section-universe .method-card h3,
.section-universe .method-card p {
color: var(--universe-text);
}
.section-universe .method-card .method-icon {
background: var(--universe-strong);
color: var(--universe-text-on-strong);
}
.method-item h3 {
margin-bottom: 18px;
}
/* PROGRAMS */
.program-grid {
max-width: var(--max);
margin: 48px auto 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.program-grid-2x2 {
max-width: 900px;
grid-template-columns: repeat(2, 1fr);
}
.program-card {
background: var(--almond);
}
.program-title {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 18px;
}
.program-icon {
font-size: 34px;
margin: 0;
}
.program-card p {
margin-bottom: 18px;
}
.program-card ul {
color: var(--muted);
padding-left: 22px;
margin: 0 0 22px;
}
.program-card a {
font-weight: 800;
}
.method-card-grid {
max-width: var(--max);
margin: 48px auto 0;
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 22px;
}
.method-card {
grid-column: span 2;
padding: 32px 28px;
text-align: center;
background: var(--universe-soft);
color: var(--universe-text);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.method-card:nth-child(4) {
grid-column: 2 / span 2;
}
.method-card:nth-child(5) {
grid-column: 4 / span 2;
}
.method-card h3,
.method-card p {
color: var(--universe-text);
}
/* TEACHERS */
.teacher-grid {
max-width: 860px;
margin: 46px auto 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.teacher-card {
background: var(--almond);
}
.teacher-btn {
display: block;
width: fit-content;
margin: 32px auto 0;
}
/* FAQ */
.faq-grid {
max-width: 980px;
margin: 42px auto 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.faq-grid-two {
grid-template-columns: repeat(2, 1fr);
}
details {
background: var(--almond);
border: 1px solid var(--border);
border-radius: 14px;
padding: 22px 24px;
box-shadow: 0 10px 25px rgba(10,37,64,0.05);
}
summary {
cursor: pointer;
font-weight: 800;
color: var(--primary);
list-style: none;
}
summary::after {
content: "+";
float: right;
font-size: 22px;
}
details[open] summary::after {
content: "–";
}
details p {
margin-top: 16px;
}
.choice-grid {
display: grid;
gap: 18px;
}
.choice-card {
display: block;
background: var(--almond);
border: 1.5px solid var(--border);
border-radius: var(--radius);
padding: 26px;
box-shadow: 0 10px 25px rgba(10,37,64,0.05);
cursor: pointer;
transition: 0.2s;
}
.choice-card input {
display: none;
}
.choice-card:hover,
.choice-card.active {
border-color: var(--primary);
transform: translateY(-3px);
}
.choice-card.active {
background: var(--primary);
color: var(--almond);
}
.choice-card.active small,
.choice-card.active .choice-icon {
color: var(--almond);
}
.choice-icon {
display: block;
font-size: 34px;
margin-bottom: 12px;
color: var(--primary);
}
.choice-card strong {
display: block;
font-size: 20px;
margin-bottom: 8px;
}
.choice-card small {
display: block;
color: var(--muted);
line-height: 1.5;
}
.sap-card {
position: relative;
}
.choice-sap-badge {
display: block;
width: 54px;
height: auto;
margin-left: auto; /* pousse le logo à droite */
margin-bottom: 12px;
}
/* VISUAL PROGRAM CARDS */
.visual-programs {
align-items: stretch;
}
.visual-card {
position: relative;
min-height: 420px;
overflow: hidden;
padding: 0;
background: var(--universe-strong);
color: var(--universe-text-on-strong);
display: flex;
align-items: flex-end;
border-radius: 24px;
box-shadow: var(--shadow);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.visual-card::after {
display: none;
}
.visual-card:hover {
transform: translateY(-8px);
box-shadow: 0 24px 60px rgba(10,37,64,0.18);
}
.visual-card img {
display: none;
}
.visual-card:hover img {
transform: none;
}
.visual-card-content {
position: relative;
z-index: 2;
padding: 30px;
}
.visual-card h3,
.visual-card p {
color: var(--universe-text-on-strong);
text-shadow: none;
}
.visual-card h3 {
margin-bottom: 12px;
}
.badge {
display: inline-block;
margin-bottom: 14px;
padding: 7px 12px;
border-radius: 999px;
background: var(--universe-soft);
color: var(--universe-text);
font-size: 13px;
font-weight: 800;
}
.visual-list {
margin-top: 12px;
}
.visual-list p {
color: var(--universe-text-on-strong);
margin-bottom: 8px;
font-size: 15px;
line-height: 1.5;
text-shadow: none;
}
/* EXPANDING PROGRAM CARDS */
.programs-expand {
max-width: 1500px;
margin: 60px auto 0;
display: flex;
gap: 14px;
height: 500px;
}
.programs-expand-accueil {
max-width: 1500px;
margin: 60px auto 0;
display: flex;
gap: 14px;
height: 350px;
}
.expand-card {
position: relative;
flex: 1;
overflow: hidden;
border-radius: 28px;
background: var(--universe-strong);
color: var(--universe-text-on-strong);
transition: flex .45s ease, transform .25s ease, box-shadow .25s ease;
border: 2px solid var(--universe-strong);
}
.expand-card:hover {
flex: 1.45;
box-shadow: 0 24px 60px rgba(0, 0, 102, 0.18);
}
.expand-card > img:first-child {
display: none;
}
.expand-card:hover > img:first-child {
transform: none;
}
.expand-card::after {
display: none;
}
.expand-card .badge {
background: var(--universe-strong);
color: var(--universe-text-on-strong);
}
.homepage-programs .expand-card::after {
display: none;
}
.homepage-programmes {
padding-bottom: 180px;
}
.homepage-professeurs {
padding-bottom: 50px;
}
.expand-content {
position: absolute;
inset: 0;
z-index: 2;
padding: 30px;
display: flex;
flex-direction: column;
}
.expand-header {
display: flex;
flex-direction: column;
gap: 10px;
}
.expand-header h3 {
margin: 0;
color: var(--universe-text-on-strong);
font-size: 22px;
font-weight: 600;
line-height: 1.05;
text-shadow: none;
}
.expand-header h3 span {
display: block;
font-size: 34px;
font-weight: 700;
letter-spacing: 1px;
}
.expand-header .badge {
width: fit-content;
margin: 0;
}
.expand-details {
margin-top: auto;
opacity: 0;
transform: translateY(18px);
pointer-events: none;
transition: opacity .35s ease, transform .35s ease;
}
.expand-card:hover .expand-details {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.expand-details p {
color: var(--universe-text-on-strong);
margin-bottom: 8px;
font-size: 15px;
line-height: 1.45;
font-weight: 600;
text-shadow: none;
}
.expand-link {
margin-top: 20px;
font-size: 14px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--universe-text-on-strong);
transition: all .25s ease;
}
.expand-card .expand-details p {
color: var(--universe-text-on-strong);
font-weight: 600;
text-shadow: none;
}
.expand-card .expand-header h3,
.expand-card .expand-header h3 span {
color: var(--universe-text-on-strong);
text-shadow: none;
}
.expand-card:hover .expand-link {
color: var(--universe-text-on-strong);
letter-spacing: 1.5px;
}
/* =========================================================
EXPAND CARDS — CENTRAGE AU REPOS
HOME + ACADEMY
========================================================= */
@media (min-width: 981px) {
.expand-card .expand-header {
position: absolute;
top: 50%;
left: 30px;
right: 30px;
transform: translateY(-50%);
align-items: center;
text-align: center;
transition:
top .35s ease,
transform .35s ease;
}
.expand-card:hover .expand-header {
top: 30px;
transform: translateY(0);
align-items: center;
text-align: center;
}
.expand-card .expand-details {
position: absolute;
left: 30px;
right: 30px;
bottom: 30px;
margin-top: 0;
}
}
.sap-badge {
position: absolute;
top: 18px;
right: 18px;
width: 46px !important;
height: auto !important;
max-width: 46px !important;
z-index: 4;
}
/* HOME BENEFITS */
.home-benefits-grid {
max-width: 900px;
margin: 42px auto 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
.home-benefits-grid .intro-card {
padding: 38px 34px;
display: flex;
flex-direction: column;
}
.home-benefits-grid .btn {
margin-top: auto;
align-self: center;
}
.intro-card:hover {
transform: translateY(-3px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
/* Teaching opportunities */
.recruitment-program-grid{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:28px;
max-width:1180px;
margin:42px auto 0;
}
.recruitment-program-card{
display:flex;
flex-direction:column;
height:100%;
}
.recruitment-program-card .program-title{
margin-bottom:16px;
}
.recruitment-program-card h4{
margin:22px 0 10px;
font-size:1rem;
}
.recruitment-card-intro{
margin-bottom:0;
}
.recruitment-program-card ul{
margin-top:0;
}
.recruitment-program-note{
max-width:850px;
margin:36px auto 0;
text-align:center;
font-weight:600;
}
/* Recruitment process */
.recruitment-process-grid{
display:grid;
grid-template-columns:repeat(5, minmax(0, 1fr));
gap:22px;
max-width:1280px;
margin:42px auto 0;
}
.recruitment-process-item{
height:100%;
}
.recruitment-process-item .method-icon{
margin-left:auto;
margin-right:auto;
}
.program-card a,
.program-card a:visited {
font-weight: inherit;
color: inherit;
}
/* =========================================================
7. MOBILE / RESPONSIVE
========================================================= */
@media (max-width: 1180px) {
/* Header AKLIO Home (variante) — espacement */
.aklio-home-header {
gap: 24px;
}
.aklio-home-header .nav {
gap: 22px;
}
.aklio-home-header-tagline {
display: none;
}
}
@media (max-width: 1100px) {
/* Responsive */
.recruitment-process-grid {
grid-template-columns:repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 560px) {
.homepage-programmes {
padding-bottom: 90px;
}
.homepage-professeurs {
padding-bottom: 90px;
}
}
@media (max-width: 980px) {
/* ============================================================
PARTIE MOBILE / RESPONSIVE — surcharges par @media (max-width)
Regroupe toutes les adaptations tablette/mobile du site.
Chaque bloc cible les mêmes composants que dans la partie
desktop ci-dessus (header, hero, contact, programmes, CGV,
navigation, menu hamburger...).
============================================================ */
/* RESPONSIVE */
/* Header, hero, sections générales */
.aklio-header-inner {
flex-direction: row;
gap: 14px;
flex-wrap: wrap;
align-items: center;
padding: 18px 20px;
}
/* NAVIGATION PRINCIPALE */
.nav {
justify-content: flex-start;
gap: 0;
position: relative;
z-index: 1001;
order: 4;
display: none;
width: 100%;
flex: 0 0 100%;
flex-direction: column;
align-items: stretch;
padding: 12px 0 4px;
background: var(--header-bg);
color: var(--header-text);
}
/*
.hero-banner {
margin: 18px 16px 56px;
min-height: 520px;
width: auto;
}
.hero-banner > img {
height: 520px;
}
.hero-banner {
margin: 18px 16px 56px;
min-height: 0;
width: auto;
}
*/
.hero-actions-section .btn {
padding: 10px 16px;
font-size: 14px;
}
.hero-actions-section .hero-buttons {
gap: 10px;
}
.hero-banner > img {
height: auto;
}
.hero-overlay {
inset: 0;
}
.hero-overlay h1 {
top: 36px;
left: 28px;
right: 28px;
font-size: 36px;
white-space: normal;
}
.hero-bottom {
left: 28px;
right: 28px;
bottom: 42px;
max-width: none;
}
.hero-home-aklio .hero-overlay h1 {
font-size: 30px;
}
.hero-level-page .hero-top {
top: 36px;
left: 28px;
right: 28px;
}
.hero-level-page .hero-top h1 {
font-size: 30px;
}
.hero-overlay p {
font-size: 17px;
}
.hero-banner {
width: 100%;
height: clamp(220px, 40vw, 360px);
min-height: 0;
margin: 0;
overflow: hidden;
}
.hero-banner > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
.hero-banner > img {
object-position: 54% center;
}
.split,
.dual-panel {
grid-template-columns: 1fr;
gap: 40px;
}
.intro-grid,
.program-grid,
.teacher-grid,
.faq-grid {
grid-template-columns: 1fr;
}
.method-row {
grid-template-columns: 1fr;
gap: 26px;
}
.method-item {
border-right: none;
padding: 0;
}
.split h2,
.dual-panel h2 {
text-align: center;
}
.hero-buttons {
margin-top: 0; /* ils repassent sous le Canva */
padding: 20px 20px 24px;
justify-content: center;
}
/* Page Contact */
.contact-layout,
.form-grid {
grid-template-columns: 1fr;
}
.contact-intro h2,
.contact-form h2 {
text-align: center;
}
/* Cartes programmes (expand) */
.programs-expand,
.programs-expand-accueil {
flex-direction: column;
height: auto;
}
.expand-card {
min-height: 420px;
}
.expand-card:hover {
flex: 1;
}
.expand-details {
opacity: 1;
transform: none;
pointer-events: auto;
}
/* Bannière cookies */
.cookie-content {
flex-direction: column;
align-items: flex-start;
}
/* Header AKLIO Home (variante) — textes */
/* Hover logo AKLIO principal */
.aklio-home-header-text {
align-items: center;
text-align: center;
}
/* =========================================================
NAVIGATION MOBILE — MENU HAMBURGER ET SOUS-MENUS
========================================================= */
/* HEADER */
.aklio-header {
position: relative;
z-index: 1000;
background: var(--header-bg);
color: var(--header-text);
}
.logo {
order: 1;
}
.logo img {
height: 38px;
}
.client-space-icon,
.client-space-icon svg {
width: 18px;
height: 18px;
max-width: 18px;
max-height: 18px;
flex: 0 0 18px;
}
/* BOUTON HAMBURGER */
.menu-toggle {
order: 1;
display: flex;
width: 44px;
height: 44px;
padding: 10px;
border: 0;
border-radius: 10px;
background: transparent;
cursor: pointer;
flex-direction: column;
justify-content: center;
gap: 5px;
}
.menu-toggle-line {
display: block;
width: 24px;
height: 2px;
margin: 0 auto;
background: var(--header-text);
border-radius: 2px;
transition:
transform 0.2s ease,
opacity 0.2s ease;
}
.menu-toggle.is-active .menu-toggle-line:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.menu-toggle.is-active .menu-toggle-line:nth-child(2) {
opacity: 0;
}
.menu-toggle.is-active .menu-toggle-line:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
.nav.is-open {
display: flex;
}
.nav > a,
.nav > .nav-item {
width: 100%;
border-bottom: 1px solid var(--border);
}
.nav > a {
display: block;
padding: 15px 4px;
}
/* LIGNES AVEC LIEN ET BOUTON + */
.nav-item.has-submenu,
.has-submenu-nested {
position: relative;
display: block;
width: 100%;
}
.nav-link-row {
position: relative;
z-index: 1;
display: flex;
align-items: center;
width: 100%;
}
.nav-link-row > a {
flex: 1;
display: block;
padding: 15px 4px;
}
.submenu-toggle {
position: relative;
z-index: 2;
display: flex;
width: 44px;
min-width: 44px;
height: 44px;
padding: 0;
align-items: center;
justify-content: center;
border: 0;
background: transparent;
color: var(--header-text);
font-family: inherit;
font-size: 24px;
font-weight: 500;
cursor: pointer;
touch-action: manipulation;
}
/* SOUS-MENUS FERMÉS */
.submenu,
.submenu-nested {
position: static;
display: none;
width: 100%;
min-width: 0;
margin: 0;
opacity: 1;
visibility: visible;
transform: none;
border-radius: 0;
box-shadow: none;
background: transparent;
pointer-events: none;
}
.submenu {
padding: 0 0 8px 14px;
}
.submenu-nested {
padding: 0 0 8px 16px;
}
/* SOUS-MENUS OUVERTS PAR JAVASCRIPT */
.nav-item.has-submenu.submenu-is-open > .submenu {
display: block;
pointer-events: auto;
}
.has-submenu-nested.submenu-is-open > .submenu-nested {
display: block;
pointer-events: auto;
}
/* LIENS DES SOUS-MENUS */
.submenu .nav-item {
width: 100%;
}
.submenu a,
.submenu-nested a {
position: relative;
z-index: 1;
display: block;
width: 100%;
white-space: normal;
pointer-events: auto;
background: var(--almond);
}
.submenu a {
padding: 12px;
}
.submenu-nested a {
padding: 11px 12px;
font-size: 14px;
font-weight: 500;
}
/* AUCUN HOVER NE CONTRÔLE LES MENUS SUR MOBILE */
.nav-item.has-submenu:hover > .submenu,
.nav-item.has-submenu:focus-within > .submenu,
.has-submenu-nested:hover > .submenu-nested,
.has-submenu-nested:focus-within > .submenu-nested {
display: none;
pointer-events: none;
}
.nav-item.has-submenu.submenu-is-open > .submenu,
.has-submenu-nested.submenu-is-open > .submenu-nested {
display: block;
pointer-events: auto;
}
/* SUPPRESSION DES ANCIENS INDICATEURS ET ZONES DE SURVOL */
.has-submenu-nested > a::after,
.nav > .nav-item.has-submenu::after,
.has-submenu-nested::before {
display: none;
}
}
@media (max-width: 800px) {
.recruitment-program-grid {
grid-template-columns:1fr;
}
.recruitment-process-grid {
grid-template-columns:repeat(2, minmax(0, 1fr));
}
/* Home benefits + grille 2x2 */
.home-benefits-grid,
.program-grid-2x2 {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.section-universe,
.section-universe-soft,
.section-neutral {
padding-left: 20px;
padding-right: 20px;
}
.section-universe h2,
.section-universe-soft h2,
.section-neutral h2 {
text-align: left;
}
.home-tax-content {
flex-direction: column;
text-align: center;
gap: 24px;
}
.home-tax-sap-logo {
height: 70px;
}
.intro-grid,
.program-grid,
.teacher-grid,
.faq-grid,
.home-benefits-grid {
width: 100%;
min-width: 0;
}
.intro-card,
.program-card,
.teacher-card,
details {
width: 100%;
min-width: 0;
max-width: 100%;
}
}
@media (max-width: 720px) {
/* Page CGV */
.cgv-page {
padding: 36px 14px 70px;
}
.cgv-hero {
padding: 32px 22px;
}
.cgv-toc ol {
columns: 1;
}
.cgv-document {
padding: 28px 20px;
}
.cgv-document h2 {
font-size: 30px;
}
.cgv-article h3 {
font-size: 21px;
}
.cgv-print-actions {
justify-content: center;
margin-top: 0;
}
}
@media (max-width: 560px) {
.recruitment-process-grid {
grid-template-columns:1fr;
}
.recruitment-hero-buttons,
.recruitment-application-buttons {
flex-direction:column;
align-items:stretch;
}
.recruitment-hero-buttons .btn,
.recruitment-application-buttons .btn {
width:100%;
text-align:center;
}
}
/* changement temporaire à intégrer - pour tester différentes couleurs */
.aklio-header {
--header-text: var(--dark-blue);
background: var(--almond);
color: var(--dark-blue);
width: 100%;
border-bottom: 3px solid var(--universe-strong);
}
.aklio-header .nav a,
.aklio-header .aklio-header-name,
.aklio-header .aklio-header-tagline {
color: var(--dark-blue);
}
@media (max-width: 980px) {
.universe-business .aklio-header .nav a,
.universe-business .aklio-header .nav .submenu-label,
.universe-business .aklio-header .nav .submenu-toggle {
color: var(--universe-soft);
background: var(--universe-strong);
}
}
/* NOTICE LÉGALE DE L'UNIVERS */
.legal-notice {
padding: 20px 0;
background: var(--legal-notice-bg);
color: var(--legal-notice-text);
border-top: 3px solid var(--universe-strong);
border-bottom: 0;
text-align: center;
}
/* FOOTER PRINCIPAL */
.aklio-footer {
background: var(--footer-bg);
color: var(--footer-text);
border-top: 3px solid var(--universe-strong);
padding: 48px 24px 60px;
text-align: center;
}
.ambition-highlight {
display: inline-block;
margin: 24px 0 30px;
padding: 14px 18px;
border-left: 4px solid var(--universe-strong);
border-radius: 10px;
font-size: 20px;
line-height: 1.45;
font-weight: 700;
}
/* Sur fond neutre Almond */
.section-neutral .ambition-highlight {
background: var(--universe-soft);
color: var(--universe-text);
}
/* Sur fond univers soft */
.section-universe-soft .ambition-highlight {
background: var(--almond);
color: var(--universe-text);
}
/* Sur fond univers fort */
.section-universe .ambition-highlight {
background: var(--universe-soft);
color: var(--universe-text);
}
/* =========================================================
TEST GLOBAL — NOUVEAU STYLE DES BOUTONS AKLIO
À placer TOUT À LA FIN du CSS
========================================================= */
/* =========================================================
FONDS NEUTRES ET UNIVERSE-SOFT
========================================================= */
/* PRIMARY */
body .section-neutral .btn-primary,
body .section-universe-soft .btn-primary {
background: var(--universe-accent);
color: var(--universe-text-on-accent);
border: 2px solid var(--universe-accent);
font-weight: 700;
}
body .section-neutral .btn-primary:hover,
body .section-universe-soft .btn-primary:hover {
opacity: 0.82;
}
/* SECONDARY */
body .section-neutral .btn-secondary,
body .section-universe-soft .btn-secondary {
background: transparent;
color: var(--universe-accent);
border: 2px solid var(--universe-accent);
font-weight: 600;
}
body .section-neutral .btn-secondary:hover,
body .section-universe-soft .btn-secondary:hover {
background: var(--universe-accent);
color: var(--universe-text-on-accent);
border-color: var(--universe-accent);
}
/* =========================================================
FOND UNIVERSE-STRONG
========================================================= */
/* PRIMARY */
body .section-universe .btn-primary {
background: var(--almond);
color: var(--universe-strong);
border: 2px solid var(--almond);
font-weight: 700;
}
body .section-universe .btn-primary:hover {
background: transparent;
color: var(--universe-text-on-strong);
border-color: var(--almond);
}
/* SECONDARY */
body .section-universe .btn-secondary {
background: transparent;
color: var(--universe-text-on-strong);
border: 1px solid color-mix(
in srgb,
var(--almond) 65%,
transparent
);
font-weight: 600;
}
body .section-universe .btn-secondary:hover {
background: var(--almond);
color: var(--universe-strong);
border-color: var(--almond);
}
/* =========================================================
BOUTONS HORS SECTION
========================================================= */
body .btn-primary {
border-width: 2px;
}
body .btn-secondary {
border-width: 2px;
}
/* =========================================================
8. COMPOSANTS PARTAGÉS — issus de l'ajustement graphique
"Clara" (ex style-v3.css), génériques à tout le site.
========================================================= */
/* =========================================================
VARIANTES DE SECTION — PALETTE AKLIO
Classes utilitaires réutilisables sur toutes les pages :
appliquer .section-blue / .section-navy / .section-yellow /
.section-orange à une section pour recolorer titres et accents.
========================================================= */
.section-blue {
--section-heading: var(--cornflower-text);
--section-accent: var(--cornflower);
--section-soft: var(--pale-blue);
}
.section-navy {
--section-heading: var(--navy);
--section-accent: var(--navy);
--section-soft: var(--pale-blue);
}
.section-yellow {
--section-heading: var(--corn);
--section-accent: var(--corn);
--section-soft: var(--pale-yellow);
}
.section-orange {
--section-heading: var(--orange);
--section-accent: var(--orange);
--section-soft: var(--pale-orange);
}
.section-blue h2,
.section-navy h2,
.section-yellow h2,
.section-orange h2 {
color: var(--section-heading);
}
/* =========================================================
2. HEROES CANVA — BASE / PC
========================================================= */
.section-orange-solid {
background: var(--orange);
color: var(--white);
}
.section-orange-solid h2,
.section-orange-solid p,
.section-orange-solid .teacher-eyebrow {
color: var(--white);
}
/* Compléments — panneau univers / dual-panel */
.section-universe-soft .panel-icon.dark,
.section-universe-soft .dual-panel .method-icon {
background: var(--universe-strong);
color: var(--universe-text-on-strong);
}
.section-universe-soft .panel-icon.light {
background: var(--almond);
color: var(--universe-text);
}
.dual-panel h2 {
text-align: left;
font-size: 32px;
margin-bottom: 16px;
}
.dual-panel .btn {
margin-top: 22px;
}
/* Footer — navigation */
.aklio-footer p {
color: inherit;
font-size: 14px;
margin-bottom: 12px;
}
.footer-nav {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 18px;
margin-top: 10px;
}
.aklio-footer .footer-nav a {
color: inherit;
font-size: 14px;
transition: opacity .2s ease;
}
.aklio-footer .footer-nav a:hover {
opacity: .75;
}
/* =========================================================
RESPONSIVE — HERO BANNER (tablette, ≤980px)
========================================================= */
@media (max-width: 980px) {
.hero-banner {
width: 100%;
height: clamp(220px, 40vw, 360px);
min-height: 0;
margin: 0;
overflow: visible;
}
.hero-banner > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 54% center;
}
}
/* =========================================================
RESPONSIVE — NAVIGATION & HERO (mobile, ≤560px)
========================================================= */
@media (max-width: 560px) {
.header-brand {
display: none;
}
.aklio-header-inner {
padding: 8px 14px;
gap: 8px;
flex-wrap: nowrap;
}
.logo img {
height: 30px;
}
.menu-toggle {
width: 36px;
height: 36px;
padding: 7px;
}
.menu-toggle-line {
width: 21px;
}
.hero-buttons,
.buttons {
flex-direction: column;
align-items: center;
gap: 10px;
}
.hero-buttons .btn,
.buttons .btn {
width: auto;
min-width: 200px;
text-align: center;
}
.hero-actions-section .hero-buttons {
gap: 6px;
}
.hero-actions-section .btn {
padding: 7px 10px;
font-size: 12px;
line-height: 1.2;
border-radius: 8px;
}
}
/* =========================================================
BOUCLES DÉCORATIVES AKLIO — système réutilisable
(.section-with-loop > .section-loop.[position])
========================================================= */
.section-with-loop {
position: relative;
overflow: visible;
}
.section-loop {
position: absolute;
width: 300px;
height: auto;
z-index: 0;
pointer-events: none;
}
.section-with-loop > *:not(.section-loop) {
position: relative;
z-index: 1;
}
/* Haut droite */
.section-loop.top-right {
top: -20px;
right: -30px;
}
/* Haut gauche */
.section-loop.top-left {
top: -20px;
left: -30px;
}
/* Bas droite */
.section-loop.bottom-right {
bottom: -20px;
right: -30px;
}
/* Bas gauche */
.section-loop.bottom-left {
bottom: -20px;
left: -30px;
}
/* Haut centre */
.section-loop.top-middle {
top: -20px;
left: 50%;
transform: translateX(-50%);
}
/* Bas centre */
.section-loop.bottom-middle {
bottom: -20px;
left: 50%;
transform: translateX(-50%);
}
/* Centre */
.section-loop.middle {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@media (max-width: 700px) {
.section-loop {
width: 105px;
}
.section-loop.top-right {
top: -10px;
right: -35px;
}
.section-loop.top-left {
top: -10px;
left: -35px;
}
.section-loop.bottom-right {
bottom: -10px;
right: -35px;
}
.section-loop.bottom-left {
bottom: -10px;
left: -35px;
}
.section-loop.top-middle {
top: -10px;
left: 50%;
transform: translateX(-50%);
}
.section-loop.bottom-middle {
bottom: -10px;
left: 50%;
transform: translateX(-50%);
}
.section-loop.middle {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
.section-with-overflow-loop {
position: relative;
overflow: visible;
}
.section-with-overflow-loop > *:not(.section-loop) {
position: relative;
z-index: 1;
}
/* =========================================================
BOUTONS DOUBLES (dual-buttons) — composant réutilisable
========================================================= */
.dual-buttons-section {
padding-top: 20px;
padding-bottom: 60px;
position: relative;
overflow: visible;
z-index: 2;
}
.dual-buttons-section .section-loop {
z-index: 3;
}
.dual-buttons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
max-width: var(--max);
margin: 0 auto;
}
.dual-buttons-left,
.dual-buttons-right {
display: flex;
align-items: center;
justify-content: center;
}
.dual-buttons-right {
gap: 16px;
flex-wrap: wrap;
}
@media (max-width: 700px) {
.dual-buttons {
display: flex;
flex-direction: column;
gap: 14px;
}
.dual-buttons-left,
.dual-buttons-right {
display: flex;
flex-direction: column;
align-items: stretch;
width: 100%;
gap: 14px;
}
.dual-buttons .btn {
width: 100%;
max-width: none;
margin: 0;
text-align: center;
}
}
/* --- Boucles entre sections Teach with AKLIO --- */
.homepage-teach-buttons .teach-loop-left {
top: -50px;
left: -30px;
}
.homepage-teach-buttons .teach-loop-right {
top: -70px;
right: -30px;
}
@media (max-width: 700px) {
.homepage-teach-buttons .teach-loop-left {
top: -30px;
left: -35px;
}
.homepage-teach-buttons .teach-loop-right {
top: -50px;
right: -35px;
}
}
/* Boucle devant le logo */
.home-logo-loop {
z-index: 2;
}
/* Texte toujours devant la boucle */
.section-with-overflow-loop .section-lead {
position: relative;
z-index: 3;
}/* =========================================================
HEADER / MENU MOBILE — CORRECTION FINALE
========================================================= */
@media (max-width: 980px) {
.aklio-header {
width: 100%;
max-width: 100%;
overflow: visible;
}
.aklio-header-inner {
position: relative;
width: 100%;
max-width: 100%;
box-sizing: border-box;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
padding: 12px 14px;
gap: 10px;
}
/* Logo à gauche */
.logo {
order: 1;
flex: 0 0 auto;
}
/* Hamburger / X à droite */
.menu-toggle,
.menu-toggle.is-active {
order: 3;
position: relative;
top: auto;
right: auto;
margin-left: auto;
flex: 0 0 44px;
width: 44px;
height: 44px;
z-index: 1100;
}
/* Menu déroulant sous le bandeau */
.nav {
order: 4;
position: relative;
inset: auto;
flex: 0 0 100%;
width: 100%;
max-width: 100%;
height: auto;
margin: 0;
padding: 12px 0 4px;
box-sizing: border-box;
overflow: visible;
display: none;
}
.nav.is-open {
display: flex;
flex-direction: column;
align-items: stretch;
}
/* Aucun élément du menu ne peut dépasser */
.nav > a,
.nav > .nav-item,
.nav .nav-link-row,
.nav .submenu,
.nav .submenu-nested {
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
.nav a,
.nav-link-row > a {
min-width: 0;
white-space: normal;
}
.submenu-toggle {
flex: 0 0 44px;
}
}
/* =========================================================
PETITS ÉCRANS
On supprime la partie droite du header
========================================================= */
@media (max-width: 560px) {
.header-brand {
display: none;
}
.aklio-header-inner {
padding: 8px 14px;
gap: 8px;
}
.logo img {
height: 30px;
}
.menu-toggle,
.menu-toggle.is-active {
width: 36px;
height: 36px;
flex-basis: 36px;
padding: 7px;
}
.menu-toggle-line {
width: 21px;
}
}
/* =========================================================
CONTACT — coordonnées directes
========================================================= */
.contact-direct {
max-width: 900px;
margin: 0 auto 28px;
text-align: center;
}
.contact-direct p {
text-align: center;
hyphens: none;
}
.contact-direct-links {
margin-top: 10px;
font-weight: 700;
color: var(--universe-strong);
}
.contact-direct-links a,
.contact-direct-links a:visited {
color: var(--universe-strong);
text-decoration: none;
}
.contact-direct-links a:hover {
text-decoration: underline;
}
.contact-direct-links .contact-separator {
margin: 0 12px;
color: var(--universe-strong);
}
.contact-email-display {
color: inherit;
}
/* Boucles décoratives au premier plan — page contact recrutement */
.section-with-loop > .section-loop {
z-index: 3;
}
.section-with-loop > *:not(.section-loop) {
position: relative;
z-index: 1;
}
/* Boucle entre le hero et la section formulaire */
.contact-hero {
position: relative;
overflow: visible;
}
.contact-hero .contact-hero-loop {
bottom: -100px;
left: -30px;
z-index: 2;
}
/* Le texte du hero reste devant la boucle */
.contact-hero > h1,
.contact-hero > .section-lead {
position: relative;
z-index: 3;
}
/* Notre ambition — boucle Orange derrière le contenu */
.homepage-ambition {
position: relative;
overflow: visible;
}
.homepage-ambition .ambition-loop-orange {
z-index: 1;
}
.homepage-ambition > h2,
.homepage-ambition > .split {
position: relative;
z-index: 2;
}
/* =========================================================
BOUCLES — PROTECTION DE LA ZONE DE LECTURE
Desktop > 950px : comportement actuel inchangé
========================================================= */
/* Tablette / petit écran */
@media (max-width: 950px) {
.section-loop.top-right {
right: -90px;
}
.section-loop.top-left {
left: -90px;
}
.section-loop.bottom-right {
right: -90px;
}
.section-loop.bottom-left {
left: -90px;
}
}
/* Téléphone */
@media (max-width: 700px) {
.section-loop {
width: 105px;
}
.section-loop.top-right {
top: -10px;
right: -75px;
}
.section-loop.top-left {
top: -10px;
left: -75px;
}
.section-loop.bottom-right {
bottom: -10px;
right: -75px;
}
.section-loop.bottom-left {
bottom: -10px;
left: -75px;
}
}
/* =========================================================
FOOTER — RÉSEAUX SOCIAUX
========================================================= */
.footer-social {
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
margin: 12px 0;
}
.footer-social a {
display: inline-flex;
align-items: center;
justify-content: center;
}
.footer-social img {
display: block;
width: 24px;
height: 24px;
object-fit: contain;
}
.footer-social a:hover img {
opacity: 0.7;
}
/* =========================================================
POUR EVITER L AFFICHAGE DU BANDEAU COOKIES SI ACCORD EXISTE DÉJÀ
========================================================= */
[hidden] {
display: none !important;
}
/* =========================================================
LOGO UNIVERS DANS LE HEADER
========================================================= */
@media (min-width: 981px) {
.aklio-header .nav {
column-gap: 20px;
}
}