/* ==========================================================================
LES UNIVERSITÉS CEFAT — SYSTÈME DE DESIGN
--------------------------------------------------------------------------
Direction : institutionnel, éditorial, sans arrondi ni ombre.
Le bleu marine porte la page, le carmin ne sert qu'aux points focaux.
Chargé après cefat-theme.css : cette feuille fait autorité.
========================================================================== */
/* ==========================================================================
1. JETONS
========================================================================== */
:root {
/* Couleurs — charte CEFAT approfondie */
--navy: #142C55;
--navy-deep: #0A1830;
--navy-mid: #1E3D6E;
--navy-line: rgba(255, 255, 255, 0.16);
--carmine: #B21F2A;
--carmine-dark:#8E1821;
--red-bright: #E03131; /* continuité du logo, micro-accents sur fond clair */
/* Sur navy, le carmin tombe à 2.05:1 et le rouge vif à 3.06:1 — sous le
seuil AA. Version éclaircie du même rouge : 5.03:1 sur navy, 6.45:1
sur navy profond. Réservée au texte posé sur fond sombre. */
--red-on-dark: #F97362;
--forest: #1F5D3A; /* Accra / Ghana */
/* Vert de marque WhatsApp. Leur vert vif (#25D366) ne donne que 1.79:1 sur
l'ivoire ; c'est leur déclinaison foncée qui est lisible, à 6.91:1. */
--whatsapp: #075E54;
--paper: #FFFFFF;
--paper-warm: #F4F3F0;
--paper-warm-2:#EDEBE6;
--rule: #DEDCD6;
--rule-strong: #C4C1B9;
--ink: #121417;
/* Voile posé sur les photos (hero, légendes). Retour au bleu nuit de marque
— c'est --navy-deep (#0A1830), donné en composantes RVB pour pouvoir en
moduler l'alpha. Les opacités restent celles allégées avec le graphite :
la photo respire davantage qu'à l'origine. */
--veil: 10, 24, 48;
--ink-2: #4A4F57;
--ink-3: #696F79; /* 5.06:1 sur blanc, 4.56:1 sur la bande chaude — AA */
/* Typographie */
--font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
--font-alt: 'Raleway', 'Instrument Sans', system-ui, sans-serif;
--font-sans: 'Instrument Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
/* Instrument Serif n'existe qu'en une graisse (400) et n'a aucun axe
variable : plus de paliers optiques à piloter. Son contraste est
bien plus faible que celui de Fraunces, elle tient donc en petit. */
--fs-display: clamp(2.75rem, 6.4vw, 5.25rem);
--fs-h1: clamp(2.25rem, 4.6vw, 3.75rem);
--fs-h2: clamp(1.875rem, 3.2vw, 2.75rem);
--fs-h3: clamp(1.25rem, 1.9vw, 1.625rem);
--fs-h4: clamp(1.0625rem, 1.4vw, 1.25rem);
--fs-eyebrow: 0.75rem;
--lh-tight: 1.08;
--lh-title: 1.18;
--lh-body: 1.6;
/* Rythme */
--section-y: clamp(4.5rem, 9vw, 8.5rem);
--gutter: clamp(1.25rem, 4vw, 3rem);
--stack-lg: clamp(2.5rem, 5vw, 4.5rem);
--stack-md: clamp(1.5rem, 3vw, 2.5rem);
/* Espacements hérités (conservés pour compatibilité) */
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
--spacing-2xl: 3rem;
/* Alias historiques : d'anciennes règles y font encore référence */
--cefat-red: var(--carmine);
--cefat-red-hover: var(--carmine-dark);
--cefat-red-light: rgba(178, 31, 42, 0.07);
--cefat-blue: var(--navy);
--cefat-blue-dark: var(--navy-deep);
--cefat-blue-light: var(--navy-mid);
--cefat-blue-soft: var(--paper-warm);
--cefat-text-dark: var(--ink);
--cefat-text-body: var(--ink-2);
--cefat-text-muted: var(--ink-3);
--cefat-bg-light: var(--paper-warm);
--cefat-bg-white: var(--paper);
--cefat-border: var(--rule);
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* ==========================================================================
2. BASE
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
font-family: var(--font-sans);
font-size: 1rem;
line-height: var(--lh-body);
letter-spacing: 0.2px;
color: var(--ink-2);
background: var(--paper);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
color: var(--ink);
font-weight: 400;
letter-spacing: 0.01em;
line-height: var(--lh-title);
margin: 0 0 0.5em;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); letter-spacing: 0.012em; }
h5, h6 { font-size: 1rem; letter-spacing: 0.012em; }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
a { color: var(--navy); text-decoration: none; transition: color 0.2s var(--ease); }
a:hover { color: var(--carmine); }
img { max-width: 100%; height: auto; }
strong, b { font-weight: 600; color: var(--ink); }
::selection { background: var(--navy); color: #fff; }
/* Focus clavier visible partout */
:focus-visible {
outline: 2px solid var(--carmine);
outline-offset: 3px;
}
.hero__rail a:focus-visible,
.footer-link a:focus-visible,
.corridor__stop:focus-visible {
outline-color: #fff;
}
/* ==========================================================================
3. NEUTRALISATION BOOTSTRAP
La bibliothèque arrondit et ombre par défaut ; la direction ne le veut pas.
========================================================================== */
.rounded, .rounded-1, .rounded-2, .rounded-3, .rounded-4, .rounded-5,
.rounded-circle, .rounded-pill, .rounded-top, .rounded-end,
.rounded-bottom, .rounded-start,
.card, .form-control, .form-select, .badge, .btn, .alert, .modal-content,
.list-group, .list-group-item, .input-group-text, .accordion-item {
border-radius: 0 !important;
}
/* Exception : les pastilles vraiment circulaires restent circulaires */
.rounded-circle.p-2, .rounded-circle.p-3,
.campus-pin-icon, .play-video-btn, .whatsapp-float {
border-radius: 50% !important;
}
/* Les icônes sociales suivent la géométrie du site : angles vifs. */
.footer-social a { border-radius: 0 !important; }
.shadow, .shadow-sm, .shadow-lg, .card, .form-control, .form-select, .btn {
box-shadow: none !important;
}
/* Remappage des couleurs utilitaires sur la charte */
.text-danger { color: var(--carmine) !important; }
.text-primary { color: var(--navy) !important; }
.text-success { color: var(--forest) !important; }
.text-dark { color: var(--ink) !important; }
.text-muted { color: var(--ink-3) !important; }
.text-secondary { color: var(--ink-2) !important; }
.text-white-50 { color: rgba(255, 255, 255, 0.62) !important; }
.text-warning { color: #8A6412 !important; } /* 3.85:1 → 5.4:1 sur blanc */
.bg-danger { background-color: var(--carmine) !important; }
.bg-primary { background-color: var(--navy) !important; }
.bg-success { background-color: var(--forest) !important; }
.bg-dark { background-color: var(--navy-deep) !important; }
.bg-light { background-color: var(--paper-warm) !important; }
.border-danger { border-color: var(--carmine) !important; }
.border-primary { border-color: var(--navy) !important; }
.border-success { border-color: var(--forest) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end {
border-color: var(--rule) !important;
}
.card {
border: 1px solid var(--rule);
background: var(--paper);
}
.badge {
font-family: var(--font-sans);
font-weight: 600;
font-size: 0.6875rem;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.4em 0.75em;
}
blockquote {
margin: 0 0 var(--stack-md);
padding: 1.25rem 0 1.25rem 1.5rem;
border-left: 3px solid var(--carmine);
background: none !important;
font-family: var(--font-display);
font-size: 1.1875rem;
line-height: 1.5;
font-style: normal !important;
color: var(--ink);
}
/* ==========================================================================
4. RYTHME VERTICAL
Les utilitaires du thème sont réécrits pour une cadence unique.
========================================================================== */
.pt-120, .pt-200 { padding-top: var(--section-y) !important; }
.pb-120, .pb-90, .pb-200 { padding-bottom: var(--section-y) !important; }
.pt-90 { padding-top: var(--section-y) !important; }
.mb-80, .mb-60 { margin-bottom: var(--stack-lg) !important; }
.mb-30 { margin-bottom: var(--stack-md) !important; }
.mt-120 { margin-top: var(--section-y) !important; }
section { position: relative; }
.container {
max-width: 1340px;
padding-left: var(--gutter);
padding-right: var(--gutter);
}
/* En-tête, barre haute et panneaux du mega menu partagent la grille du site :
le logo doit s'aligner verticalement sur le titre du hero, pas déborder
à gauche. (Une largeur d'en-tête plus généreuse n'est plus nécessaire
depuis la neutralisation des marges parasites du thème sur le menu.) */
/* Le thème d'origine forçait certains titres en blanc parce que ces sections
étaient sombres chez lui (`.service-details-four h2 { color:#fff }`). Nos
bandes sont claires : on ré-affirme l'encre, avec la spécificité qu'il faut.
Les intitulés en carmin (.section-title2 h5/span) restent prioritaires. */
.band-warm h2, .band-warm h3, .band-warm h4,
.service-details-four h2, .service-details-four h3,
.counter-area2 h2, .counter-area2 h3 { color: var(--ink); }
/* Bandes alternées : c'est ce qui structure la lecture au défilement */
.band-warm { background: var(--paper-warm); }
.band-navy { background: var(--navy); color: rgba(255, 255, 255, 0.78); }
.band-navy h1, .band-navy h2, .band-navy h3,
.band-navy h4, .band-navy h5 { color: #fff; }
.band-navy h1, .band-navy h2, .campus-band h2,
.band-navy h3, .band-navy h4, .campus-band h3, .campus-band h4,
.newslater-area2 h3, .newslater-area2 h4, .page-head h3, .page-head h4,
/* Utilitaires conservés */
.max-w-600 { max-width: 600px; }
.max-w-700 { max-width: 700px; }
.max-w-800 { max-width: 800px; }
.letter-spacing-1 { letter-spacing: 0.05em; }
.letter-spacing-2 { letter-spacing: 0.14em; }
.fs-11 { font-size: 0.6875rem !important; }
.fs-12 { font-size: 0.75rem !important; }
.fs-13 { font-size: 0.8125rem !important; }
.fs-14 { font-size: 0.875rem !important; }
.fs-15 { font-size: 0.9375rem !important; }
.fs-16 { font-size: 1rem !important; }
.lead, .hero-subtitle { font-size: 1.0625rem; line-height: var(--lh-body); }
/* ==========================================================================
5. BARRE HAUTE
========================================================================== */
.header-top {
/* Reste pleine et dans le flux : seule la barre de menu passe sur la photo.
Sa hauteur est relevée en JS (--topbar-h) pour caler la barre de menu
juste dessous — elle disparaît sous 992px. */
position: relative;
z-index: 201;
/* Même bleu que la bande des chiffres sous le slider et que la barre de
menu une fois collante (--navy, #142C55). */
background: var(--navy);
color: #fff;
font-size: 0.8125rem;
padding: 0.35rem 0;
/* Le thème pose `.header-top{border-bottom:1px solid #e6e6e6}` à
spécificité égale : retirer notre déclaration lui rendait la main, il
faut donc annuler explicitement. */
border-bottom: none;
}
.header-top a { color: #fff; }
/* Le texte étant déjà blanc plein, le survol se signale par un soulignement
plutôt que par un changement de couleur, qui n'aurait plus de marge. */
.header-top a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
/* La seule icône du bandeau est celle de l'e-mail : elle suit son libellé
en blanc plutôt que de faire une tache de couleur isolée. */
.header-top i { color: #fff; }
.header-cta ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 1.75rem;
flex-wrap: wrap;
}
.header-cta.justify-content-end ul { justify-content: flex-end; }
.header-cta li { display: flex; align-items: center; gap: 0.5rem; }
/* L'agrément porte désormais le vrai logo du FDFP. Plus d'aplat carmin :
c'est une marque tierce, elle garde ses couleurs et se pose sur une plaque
blanche — son encre bleue serait illisible sur le navy du bandeau. */
.fdfp-top-badge {
display: inline-flex;
align-items: center;
gap: 0.55rem;
background: none;
color: #fff;
padding: 0;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.fdfp-top-badge__logo {
display: block;
height: 22px;
width: auto;
background: #fff;
padding: 3px 7px;
border-radius: 2px;
}
/* Le bandeau ne porte plus que l'agrément et le sélecteur de langue, tous
deux calés à droite. Les listes du thème sont centrées par défaut. */
.header-top .header-cta ul { justify-content: flex-end; }
/* Les du thème sont en display:block : le badge, en inline-flex, reposait
sur une ligne de base et entraînait sous lui l'espace réservé aux jambages.
Il se retrouvait 3px au-dessus de l'axe du bandeau. */
.header-top .header-cta ul li { display: flex; align-items: center; }
.header-top .header-cta ul {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: clamp(1rem, 1.8vw, 1.75rem);
margin: 0;
padding: 0;
list-style: none;
}
.header-top .header-cta ul li { margin: 0 !important; }
.header-top .row {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
}
.header-top [class*="col-lg-"] {
flex: 0 1 auto;
width: auto;
max-width: none;
}
/* Aucune des deux colonnes ne se casse en deux lignes. */
.header-top .header-cta ul { flex-wrap: nowrap; }
/* Bandeau supérieur : contacts à gauche, agrément et langue à droite. */
.header-top__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(1rem, 2vw, 2rem);
}
.header-top__contact {
display: flex;
align-items: center;
gap: clamp(1rem, 1.8vw, 1.75rem);
margin: 0;
padding: 0;
list-style: none;
}
.header-top__contact a {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
white-space: nowrap;
transition: color 0.2s var(--ease);
}
.header-top__contact a:hover { color: #fff; }
.header-top__contact i { font-size: 0.6875rem; }
.lang-switch-btn {
background: none;
border: 1px solid rgba(255, 255, 255, 0.28);
color: rgba(255, 255, 255, 0.7);
font-family: var(--font-sans);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.1em;
padding: 0.3rem 0.7rem;
cursor: pointer;
transition: all 0.2s var(--ease);
}
.lang-switch-btn + .lang-switch-btn { margin-left: -1px; }
/* Drapeaux posés en image de fond plutôt qu'en balisage : le sélecteur est
dupliqué quatre fois par page sur onze pages, un ::before évite d'y
injecter 44 SVG. Le drapeau est décoratif — l'intitulé FR / EN reste le
porteur de sens pour les lecteurs d'écran. */
.lang-switch-btn::before {
content: "";
display: inline-block;
vertical-align: -1px;
width: 1.125rem;
height: 0.75rem;
margin-right: 0.4rem;
background-size: cover;
background-position: center;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14);
}
.lang-switch-btn[data-lang="fr"]::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2060%2040%22%3E%3Crect%20width%3D%2220%22%20height%3D%2240%22%20fill%3D%22%23002395%22%2F%3E%3Crect%20x%3D%2220%22%20width%3D%2220%22%20height%3D%2240%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2240%22%20width%3D%2220%22%20height%3D%2240%22%20fill%3D%22%23ED2939%22%2F%3E%3C%2Fsvg%3E"); }
.lang-switch-btn[data-lang="en"]::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2060%2040%22%3E%3Crect%20width%3D%2260%22%20height%3D%2240%22%20fill%3D%22%23012169%22%2F%3E%3Cpath%20d%3D%22M0%200%2060%2040M60%200%200%2040%22%20stroke%3D%22%23fff%22%20stroke-width%3D%229%22%2F%3E%3Cpath%20d%3D%22M0%200%2060%2040M60%200%200%2040%22%20stroke%3D%22%23C8102E%22%20stroke-width%3D%224%22%2F%3E%3Cpath%20d%3D%22M30%200V40M0%2020H60%22%20stroke%3D%22%23fff%22%20stroke-width%3D%2213%22%2F%3E%3Cpath%20d%3D%22M30%200V40M0%2020H60%22%20stroke%3D%22%23C8102E%22%20stroke-width%3D%227%22%2F%3E%3C%2Fsvg%3E"); }
.lang-switch-btn:hover { color: #fff; border-color: rgba(255, 255, 255, 0.6); }
/* La langue active prend l'ivoire de la bande « Un Réseau de 4 Pôles
d'Excellence » : sur le navy du bandeau supérieur, l'aplat clair marque la
sélection plus nettement que le carmin, qui se confondait avec le bouton
« Candidater » juste au-dessous. */
.lang-switch-btn.active {
background: var(--paper-warm);
border-color: var(--paper-warm);
color: var(--navy);
}
/* Le sélecteur de langue du tiroir mobile est sur fond clair */
.mobile-drawer .lang-switch-btn {
border-color: var(--rule);
color: var(--ink-2);
padding: 0.6rem;
font-size: 0.75rem;
}
/* Le tiroir mobile est déjà sur fond clair : l'ivoire ne s'y détacherait
pas, la sélection y reste marquée par le navy plein. */
.mobile-drawer .lang-switch-btn.active {
background: var(--navy);
border-color: var(--navy);
color: #fff;
}
/* ==========================================================================
6. EN-TÊTE ET NAVIGATION
========================================================================== */
/* En-tête sombre. La barre utilitaire et la barre de menu ne forment plus
qu'un seul bloc : la page enchaîne chrome sombre → photo → contenu clair,
au lieu d'intercaler une bande blanche entre deux zones foncées. */
.menu-area {
/* Transparente au repos, posée sur la photo du hero. Elle reprend le bleu
de marque dès que la page défile : passé le hero, les liens blancs se
retrouveraient sinon sur du contenu clair. */
background: transparent;
border-bottom: 1px solid rgba(255, 255, 255, 0.14);
position: absolute;
top: var(--topbar-h, 44px);
left: 0;
right: 0;
z-index: 200;
transition: box-shadow 0.25s var(--ease);
}
/* Variante blanche du logo fournie pour les surfaces sombres. Le fichier
conserve son canal alpha : aucun fond ni filtre n'est ajouté au logo. */
.menu-area .logo img {
display: block;
height: 54px;
max-height: none;
width: auto;
filter: none;
}
/* Restreint aux entrées de premier niveau. En visant `ul li a`, la règle
descendait aussi dans les méga-menus et y peignait les 24 liens en blanc
sur fond blanc : seuls survivaient les libellés qui portent leur propre
couleur. Les noms de domaines, eux, disparaissaient. */
.menu-area .main-menu > nav > ul > li > a { color: rgba(255, 255, 255, 0.85); }
.menu-area .main-menu > nav > ul > li > a:hover,
.menu-area .main-menu > nav > ul > li.active > a,
.menu-area .main-menu > nav > ul > li:hover > a { color: #fff; }
/* Et le thème, lui, peint tous les liens de sous-menu en #4f4f4f avec une
spécificité (0,2,3) que `.megamenu .mm-* a` (0,2,1) ne battait pas. On
ramène les liens des méga-menus sur les jetons du site ; les règles plus
spécifiques qui suivent (carmin du catalogue, etc.) restent prioritaires. */
.main-menu .megamenu a,
.main-menu .megamenu ul li a { color: var(--ink); }
.menu-area .mobile-nav-toggle {
color: #fff;
border-color: rgba(255, 255, 255, 0.28);
}
/* Plus de menu collant : la barre défile avec la page. */
.logo img { max-height: 54px; width: auto; }
/* La grille Bootstrap fige le logo à 3/12 : trop étroit une fois le bouton
« Candidater » présent, et le menu débordait sous le logo. On passe la
rangée en flex non-cassable et on laisse le menu absorber le reste. */
@media (min-width: 992px) {
.menu-area > .container > .row {
flex-wrap: nowrap;
--bs-gutter-x: 1rem;
}
.menu-area > .container > .row > [class*="col-"]:first-child {
flex: 0 0 auto;
width: auto;
}
.menu-area > .container > .row > [class*="col-"]:last-child {
flex: 1 1 auto;
width: auto;
min-width: 0;
}
}
/* Le thème tirait le menu de -40px et espaçait les de 40px de marge :
avec le bouton « Candidater » présent, ça le faisait chevaucher « Contact ». */
.main-menu { margin: 0 !important; position: static !important; }
.main-menu ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0;
}
.main-menu ul li { position: relative; margin: 0 !important; display: block; }
.main-menu > nav > ul > li > a {
display: flex;
align-items: center;
gap: 0.35rem;
padding: 1.9rem 1rem;
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0.01em;
color: var(--ink-2);
position: relative;
white-space: nowrap; /* « Les 4 Entités » ne doit jamais passer à la ligne */
}
.main-menu > nav > ul > li > a::after {
content: "";
position: absolute;
left: 1rem;
right: 1rem;
bottom: 1.35rem;
height: 1px;
background: var(--carmine);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.28s var(--ease);
}
.main-menu > nav > ul > li:hover > a,
.main-menu > nav > ul > li.active > a { color: var(--navy); }
.main-menu > nav > ul > li:hover > a::after,
.main-menu > nav > ul > li.active > a::after { transform: scaleX(1); }
.main-menu > nav > ul > li.active > a { color: var(--carmine); }
.main-menu .has-sub > a i.fa-chevron-down {
font-size: 0.5625rem;
opacity: 0.5;
transition: transform 0.25s var(--ease);
}
.main-menu .has-sub:hover > a i.fa-chevron-down { transform: rotate(180deg); }
/* --------------------------------------------------------------------------
MEGA MENU
Trois contenus de nature différente, donc trois formes : les entités sont
un choix (vignettes), les formations une progression (rail gradué), les
campus un parcours qui franchit une frontière (le corridor de l'accueil).
Fond blanc, comme la section « Mot du Fondateur » : le panneau prolonge
l'en-tête clair au lieu d'ouvrir un trou sombre au-dessus du hero.
-------------------------------------------------------------------------- */
/* Le panneau se cale sur l'en-tête, pas sur l'onglet : bord à bord. */
.main-menu ul li.has-mega { position: static; }
/* Le thème pose `.main-menu ul li a { padding:20px 0 }` — spécificité (0,1,3),
supérieure à une classe seule. Les racines de composants sont donc
préfixées par `.megamenu` (0,2,0), ce qui l'emporte sur le comptage
d'éléments. Sans ça : paddings écrasés et pastilles remplacées par le
`content:"+"` du thème. */
.megamenu a { color: inherit; text-decoration: none; }
/* Le panneau s'aligne sur le CONTENU de l'en-tête, pas sur la boîte du
conteneur : celle-ci fait 1340px marges intérieures comprises (48px de
chaque côté), ses bords tombaient donc en dehors du logo et du bouton.
1340 - 96 = 1244, la largeur utile. */
.megamenu {
position: absolute;
top: 100%;
left: 50%;
right: auto;
width: min(1244px, calc(100% - 6rem));
background: var(--paper);
border: 1px solid var(--rule);
box-shadow: 0 24px 44px rgba(10, 24, 48, 0.13);
opacity: 0;
visibility: hidden;
transform: translateX(-50%) translateY(-6px);
transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
z-index: 400;
text-align: left;
}
.has-mega:hover > .megamenu,
.has-mega.is-open > .megamenu {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
/* Le panneau porte déjà la largeur : l'intérieur ne fait que reproduire
la gouttière, pour que son contenu s'aligne sur le logo. */
.megamenu__inner {
padding: clamp(2rem, 2.6vw, 2.5rem) var(--gutter) clamp(2rem, 2.6vw, 2.5rem);
}
.megamenu__lede {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-3);
margin: 0.75rem 0 1.375rem;
}
/* Pied commun : chaque panneau se termine sur une sortie explicite */
.megamenu__foot {
border-top: 1px solid var(--rule);
margin-top: clamp(2rem, 3vw, 2.75rem);
padding: 1.1rem 0;
}
.megamenu .mm-foot__link {
display: inline-flex;
align-items: center;
gap: 0.55rem;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--navy);
}
.megamenu .mm-foot__link i { font-size: 0.6875rem; transition: transform 0.25s var(--ease); }
.megamenu .mm-foot__link:hover { color: var(--carmine); }
.megamenu .mm-foot__link:hover i { transform: translateX(4px); }
/* --- Variante 1 : les 4 entités, en vignettes --- */
/* Panneau « Formations » : deux entrées de lecture -----------------------
L'échelle horizontale suggérait une progression BTS → MBA, mais son
quatrième cran, « Régimes d'études », n'est pas un niveau : la ligne
menait à un cul-de-sac logique. On sépare les deux vraies façons de
chercher un programme — par diplôme, ou par domaine. */
.mm-two {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: clamp(2rem, 3.5vw, 3.5rem);
align-items: start;
}
.mm-col__title {
margin: 0 0 0.35rem;
padding-bottom: 0.85rem;
border-bottom: 1px solid var(--ink-3);
font-family: var(--font-alt);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink);
}
/* Les domaines sur deux colonnes : sept lignes en une seule colonne
déséquilibraient le panneau face aux quatre diplômes. */
.megamenu .mm-domaines {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 clamp(1.5rem, 2.5vw, 2.5rem);
}
.megamenu .mm-domaines li { margin: 0 !important; }
.megamenu .mm-domaines a {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem;
padding: 0.7rem 0;
border-bottom: 1px solid var(--rule);
font-family: var(--font-alt);
font-size: 0.875rem;
font-weight: 500;
line-height: 1.35;
color: var(--ink);
text-decoration: none;
transition: color 0.2s var(--ease);
}
.main-menu .megamenu .mm-domaines a:hover { color: var(--carmine); }
/* Sept domaines dans une grille de deux colonnes laissaient la case en bas
à droite vide. Le huitième pavé est le renvoi au catalogue complet : il
comble le trou et rend un service que le menu n'offrait pas. */
.main-menu .megamenu .mm-domaines__tout a {
font-weight: 600;
color: var(--carmine);
}
.megamenu .mm-domaines__tout i {
flex: none;
font-size: 0.75rem;
transition: transform 0.25s var(--ease);
}
.megamenu .mm-domaines__tout a:hover i { transform: translateX(4px); }
/* Le nombre de programmes : ce qui décide d'un clic. */
.megamenu .mm-domaines em {
flex: none;
font-family: var(--font-display);
font-style: normal;
font-size: 1rem;
font-variant-numeric: tabular-nums;
color: var(--carmine);
}
/* Bandeau de filtre actif sur la page formations */
.filtre-actif {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.75rem 1.25rem;
margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
padding-bottom: 1rem;
border-bottom: 1px solid var(--ink-3);
}
.filtre-actif__label {
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--carmine);
}
.filtre-actif__nom {
font-family: var(--font-alt);
font-size: 1.0625rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--ink);
}
.filtre-actif__n { font-size: 0.8125rem; color: var(--ink-3); }
.filtre-actif__reset {
margin-left: auto;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--navy);
text-decoration: none;
border-bottom: 1px solid transparent;
padding-bottom: 2px;
}
.filtre-actif__reset:hover { color: var(--carmine); border-bottom-color: var(--carmine); }
@media (max-width: 991.98px) {
.mm-two { grid-template-columns: minmax(0, 1fr); }
.megamenu .mm-domaines { grid-template-columns: minmax(0, 1fr); }
}
/* Panneau « À Propos » : les rubriques de la section à gauche, les quatre
établissements à droite. Sans cette grille, les liens s'empilaient en
pleine largeur et leur intitulé se confondait avec leur description. */
.mm-about {
display: grid;
/* Trois leviers pour élargir les écoles sans casser la colonne de gauche :
le rapport passe à 0.36 (à 0.32, deux descriptions passaient sur deux
lignes et allongeaient tout le menu de 36px), la gouttière se resserre
et le rembourrage des cartes se réduit plus bas. */
grid-template-columns: minmax(0, 0.36fr) minmax(0, 1fr);
gap: clamp(1.5rem, 2.4vw, 2.25rem);
align-items: start;
}
.mm-links { display: flex; flex-direction: column; }
.megamenu .mm-link {
display: block;
padding: 0.85rem 0;
border-bottom: 1px solid var(--rule);
text-decoration: none;
}
.megamenu .mm-link:first-child { border-top: 1px solid var(--ink-3); }
.mm-link__name {
display: block;
font-family: var(--font-alt);
font-size: 0.9375rem;
font-weight: 600;
letter-spacing: -0.015em;
line-height: 1.3;
color: var(--ink);
transition: color 0.2s var(--ease);
}
.mm-link__desc {
display: block;
margin-top: 0.25rem;
font-size: 0.8125rem;
line-height: 1.4;
color: var(--ink-3);
}
.megamenu .mm-link:hover .mm-link__name { color: var(--carmine); }
.mm-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
}
/* Colonnes flex : le cycle est poussé en bas, donc les quatre pastilles
s'alignent même quand les descriptions font une ou deux lignes. */
.megamenu .mm-card {
display: flex;
flex-direction: column;
/* 32px de chaque côté mangeaient un tiers de la carte : la vignette n'en
gardait que 129px. */
padding: 0 clamp(0.875rem, 1.3vw, 1.25rem);
border-left: 1px solid var(--rule);
}
/* La carte reste fixe au survol : déplacer tout le bloc faisait remonter le
cartouche du logo jusqu'au bord supérieur et donnait l'impression qu'il
sortait de la vignette. L'animation reste portée par la photo et le filet. */
.megamenu .mm-card:first-child { border-left: none; }
/* Au survol d'une carte, les autres s'estompent : le choix se détache */
/* Rien ne s'éteint : seule la carte survolée bouge. */
.mm-grid--compact .mm-card__img { height: 96px; }
.mm-grid--compact .mm-card { padding-bottom: 0.25rem; }
.mm-card__img {
display: block;
position: relative;
height: 128px;
overflow: hidden;
margin-bottom: 1.2rem;
}
/* Même traitement que sur les cartes de la page : un voile marine léger
harmonise les photos, tandis que le logo exact de l'établissement reste
net au premier plan. */
.mm-card__img::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: rgba(var(--veil), 0.12);
transition: background-color 0.3s var(--ease);
}
.megamenu .mm-card:hover .mm-card__img::before {
background: rgba(var(--veil), 0.05);
}
/* Le filet se déroule de gauche à droite au survol. */
.mm-card__img::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
z-index: 3;
background: var(--carmine);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.32s var(--ease);
}
.megamenu .mm-card:hover .mm-card__img::after { transform: scaleX(1); }
.mm-card__img > img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s var(--ease);
}
.megamenu .mm-card:hover .mm-card__img > img { transform: scale(1.05); }
.mm-card__brand {
position: absolute;
left: 0;
top: 0;
z-index: 2;
display: grid;
place-items: center;
width: clamp(3.75rem, 44%, 4.75rem);
aspect-ratio: 4 / 3;
padding: 0.4rem;
background: rgba(255, 255, 255, 0.96);
border-right: 1px solid rgba(10, 24, 48, 0.15);
border-bottom: 2px solid var(--carmine);
}
.mm-card__brand img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.mm-card__name {
display: block;
font-family: var(--font-alt);
font-weight: 600;
font-size: 0.9375rem;
letter-spacing: -0.018em;
line-height: 1.3;
color: var(--ink);
margin-bottom: 0.45rem;
}
.megamenu .mm-card:hover .mm-card__name { color: var(--carmine); }
.mm-card__desc {
display: block;
font-size: 0.8125rem;
line-height: 1.55;
color: var(--ink-3);
margin-bottom: 1.1rem;
}
.mm-card__lvl {
display: inline-block;
align-self: flex-start;
margin-top: auto; /* aligne les pastilles sur une même ligne */
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--carmine);
border: 1px solid var(--rule);
padding: 0.35rem 0.65rem;
transition: border-color 0.22s var(--ease);
}
.megamenu .mm-card:hover .mm-card__lvl { border-color: var(--carmine); }
/* --- Variantes 2 et 3 : un rail continu, gradué de gauche à droite --- */
/* L'espace au-dessus du rail se prend en marge, pas en padding : un padding
décalerait les colonnes vers le bas sans emmener le rail, et les pastilles
se retrouveraient détachées de la ligne. */
.mm-ladder,
.mm-corridor {
position: relative;
display: grid;
align-items: start;
margin-top: 0.5rem;
}
.mm-ladder { grid-template-columns: repeat(5, 1fr); }
.mm-ladder--4 { grid-template-columns: repeat(4, 1fr); }
.mm-corridor { grid-template-columns: repeat(5, 1fr); }
/* Une seule ligne traverse toute la rangée — plus de segments flottants.
Sur les formations elle se teinte vers le carmin : la progression se lit
sans décaler les colonnes. */
.mm-ladder::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: var(--rule);
}
.mm-ladder::before {
background: linear-gradient(90deg, var(--rule) 0%, var(--rule-strong) 55%, var(--carmine) 100%);
}
.megamenu .mm-step,
.megamenu .mm-stop {
display: block;
position: relative;
padding-top: 1.5rem;
}
.megamenu .mm-step { padding-right: 1.5rem; }
.megamenu .mm-stop {
padding-top: 0;
padding-inline: clamp(0.875rem, 1.3vw, 1.25rem);
text-align: left;
border-left: 1px solid var(--rule);
}
.megamenu .mm-stop:first-child { border-left: none; padding-left: 0; }
/* Le passage de frontière : un filet carmin au lieu d'une colonne vide
portant un intitulé suspendu dans le blanc. */
.megamenu .mm-stop--gh { border-left-color: var(--carmine); }
/* Vignette de campus : le rail ne disait que des noms de villes, difficile
de se projeter. Format paysage court — la vignette doit informer sans
faire du méga-menu une galerie. */
.mm-stop__img {
display: block;
height: 84px;
overflow: hidden;
margin-bottom: 0.85rem;
background: var(--paper-warm);
}
.mm-stop__img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s var(--ease);
}
.megamenu .mm-stop:hover .mm-stop__img img { transform: scale(1.06); }
/* Pastille posée sur le rail */
.megamenu .mm-step::before {
content: "";
position: absolute;
top: -4px;
width: 9px;
height: 9px;
background: var(--paper);
border: 1px solid var(--rule-strong);
transition: background-color 0.22s var(--ease), border-color 0.22s var(--ease);
}
.megamenu .mm-step::before { left: 0; }
.megamenu .mm-step:hover::before {
background: var(--carmine);
border-color: var(--carmine);
}
.mm-step__lvl {
display: block;
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--carmine);
margin-bottom: 0.6rem;
}
.mm-step__name,
.mm-stop__name {
display: block;
font-family: var(--font-display);
font-size: 1.0625rem;
line-height: 1.25;
color: var(--ink);
margin-bottom: 0.35rem;
}
.megamenu .mm-step:hover .mm-step__name,
.megamenu .mm-stop:hover .mm-stop__name { color: var(--carmine); }
.mm-step__desc {
display: block;
font-size: 0.8125rem;
line-height: 1.55;
color: var(--ink-3);
}
.mm-stop__meta {
display: block;
font-size: 0.625rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-3);
}
/* La frontière : une rupture nette dans le rail, pas un simple libellé */
.mm-border {
position: relative;
padding: 1.5rem 1.75rem 0;
text-align: center;
}
.mm-border::before {
content: "";
position: absolute;
top: -6px;
left: 50%;
width: 1px;
height: 13px;
background: var(--carmine);
}
.mm-border::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: var(--paper); /* masque le rail sous le marqueur */
}
.mm-border span {
display: block;
font-size: 0.5625rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--carmine);
font-weight: 600;
white-space: nowrap;
}
/* L'onglet ouvert garde son filet, comme s'il tenait le panneau */
.has-mega:hover > a,
.has-mega.is-open > a { color: var(--navy); }
.has-mega:hover > a::after,
.has-mega.is-open > a::after { transform: scaleX(1); }
.header-btn .btn-cefat-primary { padding: 0.8rem 1.4rem; }
.mobile-nav-toggle {
background: var(--navy);
border: none;
color: #fff;
width: 44px;
height: 44px;
font-size: 1.0625rem;
cursor: pointer;
}
/* Tiroir mobile */
.mobile-drawer {
position: fixed;
top: 0;
right: 0;
width: min(360px, 88vw);
height: 100%;
background: var(--paper);
border-left: 1px solid var(--rule);
padding: 1.5rem;
overflow-y: auto;
transform: translateX(100%);
transition: transform 0.35s var(--ease);
z-index: 1200;
}
.mobile-drawer.open { transform: translateX(0); }
/* Le nouveau mot-symbole est blanc et transparent. L'en-tête du tiroir
reprend donc naturellement le bleu de navigation ; le fond appartient au
tiroir, pas au fichier du logo. */
.mobile-drawer__header {
margin: -1.5rem -1.5rem 1rem !important;
padding: 1rem 1.5rem;
background: var(--navy);
}
.mobile-drawer__header .close-drawer {
color: #fff;
border-color: rgba(255, 255, 255, 0.35);
}
.mobile-drawer-overlay {
position: fixed;
inset: 0;
background: rgba(10, 24, 48, 0.55);
opacity: 0;
visibility: hidden;
transition: all 0.3s var(--ease);
z-index: 1100;
}
.mobile-drawer-overlay.open { opacity: 1; visibility: visible; }
.close-drawer {
background: none;
border: 1px solid var(--rule);
width: 38px;
height: 38px;
cursor: pointer;
color: var(--ink);
}
.mobile-menu-links { list-style: none; margin: 0; padding: 0; }
.mobile-menu-links li { border-bottom: 1px solid var(--rule); }
.mobile-menu-links li a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.95rem 0;
font-size: 0.9375rem;
font-weight: 500;
color: var(--ink);
}
.mobile-menu-links li a i { color: var(--ink-3); font-size: 0.75rem; }
.mobile-menu-links li ul.mobile-submenu {
list-style: none;
margin: 0;
padding: 0 0 0.5rem 0.9rem;
max-height: 0;
overflow: hidden;
border-left: 2px solid var(--rule);
transition: max-height 0.3s var(--ease);
}
.mobile-menu-links li.open ul.mobile-submenu { max-height: 420px; }
.mobile-menu-links li ul.mobile-submenu li { border: none; }
.mobile-menu-links li ul.mobile-submenu li a {
padding: 0.5rem 0;
font-size: 0.8125rem;
font-weight: 400;
color: var(--ink-2);
}
/* ==========================================================================
7. BOUTONS
========================================================================== */
.btn-cefat-primary,
.btn-cefat-secondary,
.btn-cefat-outline {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 1rem 1.75rem;
font-family: var(--font-sans);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
border: 1px solid transparent;
border-radius: 0 !important;
cursor: pointer;
transition: background-color 0.22s var(--ease), color 0.22s var(--ease), border-color 0.22s var(--ease);
}
.btn-cefat-primary {
background: var(--carmine);
color: #fff;
border-color: var(--carmine);
}
.btn-cefat-primary:hover {
background: var(--carmine-dark);
border-color: var(--carmine-dark);
color: #fff;
}
.btn-cefat-secondary {
background: var(--navy);
color: #fff;
border-color: var(--navy);
}
.btn-cefat-secondary:hover {
background: var(--navy-deep);
border-color: var(--navy-deep);
color: #fff;
}
.btn-cefat-outline {
background: transparent;
color: var(--navy);
border-color: var(--navy);
}
.btn-cefat-outline:hover {
background: var(--navy);
color: #fff;
}
.btn-sm { padding: 0.7rem 1.15rem; font-size: 0.75rem; }
/* Le bouton secondaire est navy : invisible sur une bande navy. Sur fond
sombre il repasse en contour blanc, comme dans le hero. */
.campus-band .btn-cefat-secondary,
.band-navy .btn-cefat-secondary,
.newslater-area2 .btn-cefat-secondary,
.page-head .btn-cefat-secondary {
background: transparent;
border-color: rgba(255, 255, 255, 0.45);
color: #fff;
}
.campus-band .btn-cefat-secondary:hover,
.band-navy .btn-cefat-secondary:hover,
.newslater-area2 .btn-cefat-secondary:hover,
.page-head .btn-cefat-secondary:hover {
background: #fff;
border-color: #fff;
color: var(--navy-deep);
}
/* Les flèches avancent au survol : un seul geste, répété partout */
.btn-cefat-primary i.fa-arrow-right,
.btn-cefat-secondary i.fa-arrow-right,
.dept-row__cta i {
transition: transform 0.25s var(--ease);
}
.btn-cefat-primary:hover i.fa-arrow-right,
.btn-cefat-secondary:hover i.fa-arrow-right,
.dept-row__cta:hover i { transform: translateX(4px); }
.btn-outline-primary {
border: 1px solid var(--navy);
color: var(--navy);
background: transparent;
text-transform: uppercase;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
padding: 0.75rem 1.25rem;
}
.btn-outline-primary:hover { background: var(--navy); color: #fff; }
/* ==========================================================================
8. TITRES DE SECTION
========================================================================== */
.section-title2 { margin-bottom: var(--stack-md); }
.section-title2 h5 {
font-family: var(--font-sans);
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
text-decoration: none; /* le thème soulignait cet intitulé */
color: var(--carmine);
/* 17.6px de marge plus l'interlignage des deux lignes creusaient 23px
optiques entre le surtitre et le titre qu'il annonce. */
margin-bottom: 0.35rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
/* Le centrage vient souvent d'un .text-center posé sur la colonne parente,
pas sur .section-title2 : les deux cas doivent être couverts. */
.section-title2.text-center h5,
.text-center .section-title2 h5 { justify-content: center; }
/* Filet d'accroche : remplace l'ancien soulignement */
.section-title2 h5::before {
content: "";
width: 28px;
height: 1px;
background: currentColor;
flex: none;
}
.section-title2 h2 {
font-size: var(--fs-h2);
margin-bottom: 0.6rem;
max-width: 22ch;
}
.section-title2.text-center h2,
.text-center .section-title2 h2 { max-width: none; }
/* Plus d'italique souligné : le contraste se fait par la couleur seule */
.section-title2 h2 span {
color: var(--carmine);
font-style: normal;
text-decoration: none;
border: none;
}
.section-title2 p {
color: var(--ink-3);
max-width: 62ch;
margin: 0;
}
.section-title2.text-center p,
.text-center .section-title2 p { margin-inline: auto; }
.band-navy .section-title2 h5,
.campus-band .section-title2 h5,
.newslater-area2 .section-title2 h5,
.band-navy .section-title2 p,
.campus-band .section-title2 p,
.newslater-area2 .section-title2 p { color: rgba(255, 255, 255, 0.68); }
/* --------------------------------------------------------------------------
ROUGE SUR FOND SOMBRE
Toutes les zones navy reprennent --red-on-dark ; le carmin et le rouge vif
n'y sont pas lisibles. Regroupé ici pour rester vérifiable d'un coup d'œil.
-------------------------------------------------------------------------- */
.band-navy .section-title2 h5,
.campus-band .section-title2 h5,
.newslater-area2 .section-title2 h5,
.page-head__eyebrow,
.newslater-area2 .section-title2 h2 span,
.corridor__border span,
.corridor__stop--gh .corridor__meta,
.band-navy .text-danger,
.campus-band .text-danger,
.newslater-area2 .text-danger,
.page-head .text-danger,
.footer-top .text-danger,
.header-top .text-danger,
.hero-slider-area .text-danger,
.trust-icon,
.footer-link ul li a i,
.campus-meta li i { color: var(--red-on-dark) !important; }
.page-head__eyebrow::before,
.band-navy .section-title2 h5::before,
.campus-band .section-title2 h5::before,
.newslater-area2 .section-title2 h5::before,
.corridor__border::before,
.corridor__stop--gh::after,
.corridor__stop:hover::after { background: var(--red-on-dark); border-color: var(--red-on-dark); }
/* ==========================================================================
9. HERO
========================================================================== */
.hero-slider-area {
position: relative;
background: var(--navy-deep);
color: #fff;
overflow: hidden;
isolation: isolate;
}
.hero__media {
position: absolute;
inset: 0;
z-index: -2;
}
/* Pile de diapositives : elles se superposent et se croisent en fondu.
Un léger zoom lent pendant l'affichage donne du mouvement à une photo
fixe, sans la faire dériver hors cadre. */
.hero__slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.9s var(--ease);
overflow: hidden;
}
.hero__slide.is-active { opacity: 1; }
/* Le sujet de la photo des diplômés est au centre du cliché : il tombait
sous la moitié gauche du voile, qui est presque opaque. On rétrécit le
cadre par la gauche — le groupe passe dans la moitié droite, là où le
voile s'éclaircit, et il est rendu plus petit puisque `cover` s'ajuste
alors sur une boîte moins large. La bande libérée à gauche prend la
couleur du voile et s'y confond. */
.hero__media { background: rgb(var(--veil)); }
.hero__slide--droite { left: 26%; }
@media (max-width: 991.98px) {
/* Sur téléphone le texte occupe toute la largeur : la photo reprend le
plein cadre, sinon elle se réduirait à une bande. */
.hero__slide--droite { left: 0; }
}
.hero__media img,
.hero__slide-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 35%;
}
/* Le mouvement part serré et s'ouvre : la photo entre agrandie puis se
repose à sa taille réelle. Durée calée sur les 6s de la diapositive —
à 9s le mouvement était coupé aux deux tiers et n'arrivait jamais à son
terme, ce qui donnait une dérive sans fin plutôt qu'un plan qui se pose. */
.hero__slide.is-active .hero__slide-img {
animation: hero-derive 6.4s var(--ease) forwards;
}
@keyframes hero-derive {
from { transform: scale(1.09); }
to { transform: scale(1); }
}
/* Les trois messages se relaient au même endroit : le bloc réserve la
hauteur du plus haut pour que les boutons ne sautent pas d'une
diapositive à l'autre. */
/* Depuis que .hero__say n'enveloppe plus que le texte, le paragraphe y est
p:last-child : la règle générique l.133 remet sa marge basse à zéro et il
venait coller aux boutons. L'espace avant l'action appartient donc au bloc. */
.hero__say { animation: hero-monte 0.6s var(--ease); margin-bottom: var(--stack-md); }
.hero__say[hidden] { display: none; }
@keyframes hero-monte {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
/* Vignettes de navigation, reprises de la référence : elles montrent où
l'on va au lieu d'aligner trois points anonymes. */
/* Vignettes en colonne, à droite : elles prennent la place du rail des
cycles, que le méga-menu Formations couvre désormais. La colonne défile
si la hauteur du hero ne suffit pas. */
.hero__side {
/* Les vignettes restent à droite du texte, mais en rangée d'affiches plutôt
qu'en pile de bandeaux : format portrait, légende sous l'image, flèches
au-dessus de la rangée. */
flex-direction: column;
align-items: stretch;
gap: 0.9rem;
}
.hero__nav {
display: flex;
flex-direction: row;
align-items: flex-start;
min-width: 0;
gap: clamp(0.6rem, 1vw, 0.875rem);
}
.hero__thumb {
display: flex;
flex-direction: column;
flex: 1 1 0;
min-width: 0;
padding: 0;
border: none;
background: none;
text-align: left;
cursor: pointer;
opacity: 0.55;
transition: opacity 0.28s var(--ease);
}
/* Descente progressive de la hauteur : 2/3 (237px) dominait le titre, puis
4/5 (197px), 9/10 (175px). Le carré la pose à 158px — le cadrage reste
celui d'une vignette et non d'un bandeau paysage. */
.hero__thumb img {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
}
/* Légende : on sait ce qu'on va afficher avant de cliquer. */
/* La légende passe sous l'image : plus de dégradé posé sur la photo, et le
titre se lit sur le voile du bandeau. */
.hero__thumb-lgd {
position: relative;
width: 100%;
padding-top: 0.6rem;
font-family: var(--font-alt);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.04em;
line-height: 1.35;
color: rgba(255, 255, 255, 0.72);
text-align: left;
transition: color 0.28s var(--ease);
}
.hero__thumb.is-active .hero__thumb-lgd { color: #fff; }
.hero__thumb:hover { opacity: 0.85; }
.hero__thumb.is-active { opacity: 1; }
.hero__thumb:focus-visible { outline: 2px solid var(--red-on-dark); outline-offset: 3px; }
/* Jauge de progression : la barre carmin se remplit le temps de la
diapositive, on sait quand la suivante arrive. */
/* Portée par la légende plutôt que par le bouton : posée en bas du bouton,
elle se serait retrouvée sous le texte au lieu de fermer l'image. */
.hero__thumb-lgd::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: var(--red-on-dark);
transform: scaleX(0);
transform-origin: left;
}
.hero__thumb.is-active .hero__thumb-lgd::before { animation: hero-jauge 6s linear forwards; }
/* En pause (survol, focus, onglet caché), la jauge se fige où elle en est.
Sans cela elle finissait sa course et restait pleine : le trait semblait
bloqué alors que c'est la rotation qui était suspendue. */
.hero-slider-area.est-en-pause .hero__thumb.is-active .hero__thumb-lgd::before { animation-play-state: paused; }
@keyframes hero-jauge { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero__arrows {
display: flex;
flex: none;
/* Au-dessus de la rangée alors qu'elles la suivent dans le balisage :
l'ordre du DOM garde les flèches après les vignettes qu'elles pilotent. */
order: -1;
justify-content: flex-end;
gap: 0.5rem;
}
.hero__arrow {
width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
background: none;
border: 1px solid rgba(255, 255, 255, 0.3);
color: rgba(255, 255, 255, 0.85);
font-size: 0.8125rem;
cursor: pointer;
transition: background-color 0.22s var(--ease), border-color 0.22s var(--ease), color 0.22s var(--ease);
}
.hero__arrow:hover {
background: var(--carmine);
border-color: var(--carmine);
color: #fff;
}
.hero__arrow:focus-visible { outline: 2px solid var(--red-on-dark); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
.hero__slide { transition: none; }
.hero__slide.is-active .hero__slide-img { animation: none; }
.hero__say { animation: none; }
.hero__thumb.is-active .hero__thumb-lgd::before { animation: none; transform: scaleX(1); }
}
/* Voile dégradé : le texte reste lisible quelle que soit la photo déposée.
Deux couches — l'horizontale porte le titre, la verticale porte le rail. */
.hero__scrim {
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(180deg, rgba(var(--veil), 0.50) 0%, rgba(var(--veil), 0.18) 45%, rgba(var(--veil), 0.72) 100%),
/* Le voile horizontal est repris pour appuyer franchement sur la moitié
gauche, celle qui porte les titres : plus opaque au départ, et la
descente vers la droite est repoussée pour que la photo ne réapparaisse
qu'au-delà de la colonne de texte. */
linear-gradient(100deg,
rgba(var(--veil), 1) 0%,
rgba(var(--veil), 0.985) 40%,
rgba(var(--veil), 0.86) 68%,
rgba(var(--veil), 0.50) 100%);
}
.hero__grid {
display: grid;
/* La colonne des affiches a besoin de plus que 0.6fr : à 354px, les trois
tombaient à 109px de large et leur légende partait sur trois lignes. */
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
gap: clamp(2rem, 4vw, 4rem);
/* Les deux colonnes se terminent sur la même ligne — le bas de la rangée
d'affiches tombe sur celle des trois gages. `align-items: end` cale les
colonnes sur le bas de la rangée, `align-content: center` recentre la
rangée dans la hauteur du bandeau : l'alignement reste exact quelle que
soit la largeur, là où un décalage fixe ne valait que pour une seule. */
align-items: end;
align-content: center;
/* 78vh laissait 95px de blanc au-delà de ce que la colonne la plus haute
réclame : le bandeau se resserre sans jamais comprimer son contenu. */
min-height: clamp(520px, 73vh, 730px);
/* Le texte et la bande s'empilent désormais : le rembourrage se resserre
pour que le bandeau ne regagne pas la hauteur qu'on vient de lui ôter. */
padding-top: clamp(2rem, 3.5vw, 3rem);
padding-bottom: clamp(2rem, 3.5vw, 3rem);
}
.hero-content { max-width: 46rem; }
/* Le hero était le seul endroit à poser ce niveau d'information dans un aplat
plein : un rectangle de plus dans une zone qui en compte déjà beaucoup
(bandeau d'agrément, deux boutons, trois vignettes, deux flèches). Il reprend
l'idiome des surtitres de section — filet de 28px + capitales espacées.
Le carmin tombant à 2.05:1 sur fond sombre, c'est --red-on-dark qui sert. */
.hero-badge {
display: flex;
align-items: center;
gap: 0.75rem;
font-family: var(--font-sans);
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--red-on-dark);
margin-bottom: 1.5rem;
}
.hero-badge::before {
content: "";
flex: none;
width: 28px;
height: 1px;
background: currentColor;
}
.hero-title {
font-size: var(--fs-display);
/* Resserré sous --lh-tight (1.08), mais pas au-delà : mesure par colonne
d'encre, le pire couple est « Un cursus qui » / « franchit la frontière »
— le jambage du q passe à 81px du h. En dessous de 0.97 ils se touchent. */
line-height: 1.02;
letter-spacing: 0.008em;
color: #fff;
margin-bottom: 1.5rem;
}
.hero-title span { color: #fff; }
/* Le span forçait chaque titre sur deux lignes. Il reste comme charnière de
traduction ; la coupure, quand elle arrive en petit écran, est répartie. */
.hero-title { text-wrap: balance; }
.hero-subtitle {
color: rgba(255, 255, 255, 0.76);
max-width: 48ch;
margin-bottom: var(--stack-md);
}
.hero-actions { margin-bottom: var(--stack-md); }
.hero-actions .btn-cefat-secondary {
background: transparent;
border-color: rgba(255, 255, 255, 0.42);
color: #fff;
}
.hero-actions .btn-cefat-secondary:hover {
background: #fff;
border-color: #fff;
color: var(--navy-deep);
}
/* Trois repères, chacun coiffé de son propre filet — le même procédé que les
repères des fiches d'entité et de la frise. Les pictogrammes sont retirés :
trois symboles hétéroclites (toque, globe, ordinateur portable) ne formaient
pas une famille, et aucun n'ajoutait d'information au libellé. */
.hero-trust-badges {
list-style: none;
margin: 0 !important;
padding: 0 !important;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0 clamp(1.25rem, 2.4vw, 2.25rem);
border-top: 0 !important;
max-width: 40rem;
}
.hero-trust-item {
padding-top: 0.85rem;
border-top: 1px solid rgba(255, 255, 255, 0.32);
text-align: center;
}
.trust-text {
display: block;
font-family: var(--font-alt);
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.35;
letter-spacing: 0.01em;
color: rgba(255, 255, 255, 0.88);
}
@media (max-width: 575.98px) {
.hero-trust-badges { grid-template-columns: 1fr; gap: 0; }
.hero-trust-item:first-child { padding-top: 0.85rem; }
}
/* --- Rail d'entrée : quatre cycles, séparés par des filets --- */
.hero__rail { align-self: center; }
.hero__rail-title {
font-family: var(--font-sans);
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
margin-bottom: 0.5rem;
}
.hero__rail ul { list-style: none; margin: 0; padding: 0; }
.hero__rail li { border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
.hero__rail li:first-child { border-top: 1px solid rgba(255, 255, 255, 0.2); }
.hero__rail a {
display: block;
padding: 1.15rem 0;
color: #fff;
position: relative;
}
.hero__rail-label {
font-family: var(--font-display);
font-size: 1.375rem;
letter-spacing: 0.012em;
display: block;
transition: transform 0.25s var(--ease);
}
.hero__rail-note {
font-size: 0.8125rem;
color: rgba(255, 255, 255, 0.6);
display: block;
margin-top: 0.15rem;
}
.hero__rail a::after {
content: "\f061"; /* flèche FontAwesome */
font-family: "Font Awesome 6 Free";
font-weight: 900;
position: absolute;
right: 0;
top: 1.35rem;
font-size: 0.75rem;
opacity: 0;
transform: translateX(-6px);
transition: all 0.25s var(--ease);
}
.hero__rail a:hover::after { opacity: 1; transform: translateX(0); }
.hero__rail a:hover .hero__rail-label { transform: translateX(6px); }
/* Le seul moment orchestré de la page : le rail se révèle en séquence */
.hero__rail li {
animation: rail-in 0.6s var(--ease) backwards;
}
.hero__rail li:nth-child(1) { animation-delay: 0.15s; }
.hero__rail li:nth-child(2) { animation-delay: 0.25s; }
.hero__rail li:nth-child(3) { animation-delay: 0.35s; }
.hero__rail li:nth-child(4) { animation-delay: 0.45s; }
@keyframes rail-in {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
/* ==========================================================================
10. BARRE DE CHIFFRES
========================================================================== */
/* ==========================================================================
11. MOT DU FONDATEUR
========================================================================== */
/* Titre pleine largeur, puis la photo face au bloc de parole. La section
reste large et basse : rien ne dépasse le pli sur un portable. */
.about-area { background: var(--paper); }
#about {
padding-top: clamp(1.75rem, 2.8vw, 2.75rem) !important;
/* La frise fermait la section à 44px du bord : trop serré pour un bloc qui
porte cinq jalons et qui précède une bande de couleur. */
padding-bottom: clamp(3rem, 5vw, 4.5rem) !important;
}
/* ---- Bandeau de titre ---- */
/* Le titre est passé dans la colonne de droite, au même niveau que la photo.
Il ne fait donc plus la largeur du site : l'échelle de titre de section y
serait démesurée, elle descend d'un cran. */
.founder-head {
margin-bottom: clamp(1.5rem, 2.4vw, 2rem);
padding-bottom: clamp(1rem, 1.6vw, 1.25rem);
border-bottom: 1px solid var(--rule);
}
.founder-head__eyebrow {
display: flex;
align-items: center;
gap: 0.75rem;
margin: 0 0 0.9rem;
font-family: var(--font-sans);
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--carmine);
}
/* Pas de filet d'amorce ici, contrairement aux autres surtitres du site. */
/* Le titre porte la section : plus grand qu'un h2 courant, tenu sur deux
lignes par la mesure, et l'interligne resserré — à cette taille, 1.18
creusait un couloir blanc entre les deux lignes. */
.founder-head h2 {
margin: 0;
max-width: none;
font-size: clamp(1.875rem, 2.6vw, 2.625rem);
line-height: 1.04;
/* Pas d'équilibrage des lignes : il raccourcissait la première pour égaliser
les deux, et le titre n'atteignait plus le bord de la colonne alors que la
citation en dessous, elle, le touche. */
text-wrap: pretty;
}
/* Titre tout en bleu : plus d'accent carmin sur « entité par entité », qui
passe à la ligne — le span sert désormais de coupure, plus d'accent. */
.founder-head h2, .founder-head h2 span { color: var(--navy); }
.founder-head h2 span { display: block; }
/* ---- Photo + parole, côte à côte ---- */
.founder-lead {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
gap: clamp(2rem, 3.5vw, 3.5rem);
align-items: stretch;
/* Aucun filet ici : le ruban des domaines, juste au-dessus, sépare déjà la
section. Deux traits à 170px d'écart se répétaient sans rien dire de plus.
La légende étant repassée dans l'image, la compensation de sa hauteur
hors flux (--legende) n'a plus lieu d'être. */
padding-top: clamp(0.75rem, 1.4vw, 1.25rem);
margin-bottom: clamp(2.5rem, 4.5vw, 4rem);
}
.founder-media { margin: 0; position: relative; display: flex; flex-direction: column; overflow: hidden; }
/* La photo se règle sur la colonne de parole au lieu d'imposer sa hauteur :
un cadrage 4/5 donnait 720px, plus qu'un écran d'ordinateur portable pour
une image d'accompagnement. Base flex à 0 — sans cela elle apporte sa
hauteur intrinsèque au calcul de la rangée et c'est elle qui décide. */
.founder-media img {
display: block;
width: 100%;
flex: 1 1 0;
min-height: 320px;
/* Plus de plafond : la photo se règle sur la colonne de droite, qui porte
maintenant le titre en plus du témoignage et du récit. */
object-fit: cover;
border-radius: 0 !important;
box-shadow: none !important;
/* Reprise de contraste : les vues de drone sortent voilées par la brume
d'altitude, le blanc du bâtiment vire au gris et le toit se ternit.
Valeurs basses — au-delà, le toit rouge sature et bave sur le ciel. */
filter: saturate(1.1) contrast(1.06);
}
/* Légende de presse : elle dit ce que la photo montre — des étudiants, pas
le fondateur — et évite que l'image passe pour un portrait signé. */
.founder-media figcaption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 6.5rem 1.25rem 1.25rem;
/* Le pied de la photo se ferme sur un aplat : le dégradé part de rien en
haut et arrive au voile plein sous la légende. Il est étalé sur une
grande hauteur — c'est cette longueur qui l'empêche de se lire comme
une barre posée sur l'image. */
background: linear-gradient(180deg,
rgba(var(--veil), 0) 0%,
rgba(var(--veil), 0.30) 34%,
rgba(var(--veil), 0.72) 64%,
rgba(var(--veil), 0.97) 100%);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
line-height: 1.4;
/* Deux `color` se suivaient : le blanc était écrasé par `--ink-3`, et la
légende sortait en gris sur un fond sombre. */
color: #fff;
}
/* Citation, signature et contexte forment un seul bloc face à la photo.
Empilés en trois bandes, ils laissaient un trou sous la signature et une
seconde colonne de texte à moitié vide. */
.founder-say { display: flex; flex-direction: column; }
.founder-quote { margin: 0; }
/* Les guillemets sont dans le paragraphe, pas au-dessus : ponctuation
ouvrante et fermante, en carmin et une taille au-dessus du texte. Ils sont
posés en pseudo-éléments plutôt que dans la chaîne traduite pour rester
stylables sans toucher aux traductions. line-height nul : ils ne creusent
pas la boîte de ligne. */
.founder-quote blockquote::before,
.founder-quote blockquote::after {
color: var(--carmine);
font-size: 1.3em;
line-height: 0;
vertical-align: -0.04em;
}
.founder-quote blockquote::before { content: "\201C"; }
.founder-quote blockquote::after { content: "\201D"; }
/* Guillemets courbes en français aussi : le chevron double partait dans une
autre direction graphique. Un seul jeu de glyphes, un seul calage. */
/* Citation en Raleway, adossée à un filet carmin : un encadrement sans boîte,
dans la langue du reste du site. Le récit qui suit est en Instrument Sans à
15px — la fonte et le corps suffisent à séparer les deux blocs, qui se
lisaient auparavant comme un seul pavé. */
.founder-quote blockquote {
margin: 0;
padding: 0.15rem 0 0.25rem clamp(1.25rem, 2.2vw, 1.75rem);
border: 0;
border-left: 2px solid var(--carmine);
background: none !important;
font-family: var(--font-alt);
font-size: clamp(1.125rem, 1.75vw, 1.5rem);
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.014em;
font-style: normal !important;
color: var(--ink);
text-indent: 0;
}
/* L'attribution s'aligne sur le texte de la citation, pas sur son filet. */
.founder-sign { padding-left: clamp(1.25rem, 2.2vw, 1.75rem); }
/* Attribution de citation. Le nom et la fonction sur une même ligne de base
faisaient se heurter deux registres — un serif de 20px contre des capitales
de 11px. Ils reprennent deux lignes, mais serrées, précédées du filet carmin
qui sert déjà de marque d'amorce aux surtitres du site. */
/* Plus de filet d'amorce : la citation en porte déjà un, sur toute sa
hauteur. Le nom et la fonction s'alignent donc au fer du texte cité. */
.founder-sign {
margin-top: 1rem;
display: block;
}
.founder-sign__name {
display: block;
font-family: var(--font-alt);
font-size: 1.0625rem;
font-weight: 600;
letter-spacing: -0.012em;
line-height: 1.35;
color: var(--ink);
}
/* La fonction n'est pas un surtitre : les capitales carmin criaient plus fort
que le nom qu'elles accompagnent. Gris, bas de casse, sans interlettrage. */
.founder-sign__role {
display: block;
font-size: 0.8125rem;
letter-spacing: 0;
text-transform: none;
font-weight: 400;
line-height: 1.45;
color: var(--ink-3);
}
/* ---- Le contexte, au second plan, ferme la colonne ----
Il tient sous la signature au lieu d'occuper sa propre bande : la colonne
de droite atteint la hauteur de la photo, les deux se terminent ensemble. */
.founder-note {
/* Le corps et la couleur distinguent déjà le récit du témoignage :
l'écart suffit à les séparer, un filet de plus les aurait empilés. */
margin: clamp(1rem, 1.7vw, 1.5rem) 0 0;
/* Même mesure que la citation : le récit occupe toute la colonne. */
font-size: 0.9375rem;
line-height: 1.5;
color: var(--ink-3);
}
.founder-note strong { color: var(--ink-2); }
/* ---- Les quatre repères : une seule rangée filetée ----
La grille 2×2 empilait quatre lignes et rouvrait le vide que la section
venait de perdre. Un filet court au-dessus de chaque repère reprend le
signe du chapeau, sans pastille ni coche. */
.founder-facts {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(1.25rem, 2.5vw, 2.5rem);
}
.founder-facts li {
padding-top: 0.85rem;
border-top: 1px solid var(--rule-strong);
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.3;
color: var(--ink);
}
/* ---- Repli ---- */
.founder-facts.founder-facts--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 991.98px) {
.founder-facts.founder-facts--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.founder-lead { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
.founder-media img { flex: none; height: clamp(200px, 38vw, 300px); }
.founder-media figcaption { position: static; }
.founder-lead { margin-bottom: clamp(2rem, 3.5vw, 3rem); }
.founder-quote blockquote { max-width: 42ch; }
.founder-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
.founder-facts,
.founder-facts.founder-facts--5 { grid-template-columns: minmax(0, 1fr); gap: 0; }
.founder-facts li { padding-block: 0.75rem; }
.founder-facts li:last-child { border-bottom: 1px solid var(--rule-strong); }
}
/* ==========================================================================
11 bis. CATALOGUE DES PROGRAMMES (LMD)
==========================================================================
27 filières : en cartes, la page devenait un mur de 27 blocs. Une liste
filetée à deux colonnes tient le même contenu sur un tiers de la hauteur et
se parcourt en diagonale, comme un catalogue d'université. */
.prog-catalogue {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(2rem, 4vw, 3.5rem);
}
.prog-group__title {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
margin: 0 0 0.25rem;
padding-bottom: 0.9rem;
border-bottom: 1px solid var(--ink-3);
font-family: var(--font-alt);
font-size: 1.125rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--ink);
}
.prog-group__count {
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-3);
}
.prog-list { list-style: none; margin: 0; padding: 0; }
.prog-item a {
display: grid;
grid-template-columns: 3.25rem minmax(0, 1fr) auto;
align-items: baseline;
gap: 0.9rem;
padding: 0.8rem 0;
border-bottom: 1px solid var(--rule);
text-decoration: none;
color: inherit;
transition: background-color 0.18s ease, padding-left 0.18s ease;
}
.prog-item a:hover,
.prog-item a:focus-visible {
background: var(--paper-warm);
padding-left: 0.6rem;
}
/* Le code de filière sert de repère de balayage : chasse fixe pour que les
trois lettres s'alignent d'une ligne à l'autre. */
.prog-code {
font-family: var(--font-alt);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.08em;
font-variant-numeric: tabular-nums;
color: var(--carmine);
}
.prog-name {
font-family: var(--font-alt);
font-size: 0.9375rem;
font-weight: 500;
line-height: 1.35;
color: var(--ink);
}
.prog-meta {
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-3);
white-space: nowrap;
}
@media (max-width: 767.98px) {
.prog-catalogue { grid-template-columns: minmax(0, 1fr); }
.prog-item a { grid-template-columns: 3rem minmax(0, 1fr); }
/* La durée passe sous l'intitulé : sur trois colonnes à cette largeur,
les noms longs se cassaient en quatre lignes. */
.prog-meta { grid-column: 2; padding-top: 0.15rem; }
}
/* ==========================================================================
11 ter. HISTORIQUE DU GROUPE
==========================================================================
Frise horizontale : cinq dates sur une ligne se lisent d'un coup d'œil,
là où une frise verticale aurait ajouté cinq écrans de défilement. */
/* Bande ivoire : les fiches d'entité au-dessus sont sur blanc, l'historique
se détache donc sans qu'on ait besoin d'un filet de plus. Le cran le plus
clair (--paper-warm, #F4F3F0) ne s'écartait du blanc que de 11 valeurs —
à peine perceptible. --paper-warm-2 double l'écart en restant clair. */
.group-story { background: var(--paper-warm-2); }
.group-story__head { margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.group-story__eyebrow {
display: flex; align-items: center; gap: 0.75rem;
margin: 0 0 0.9rem;
font-family: var(--font-sans);
font-size: var(--fs-eyebrow);
font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--carmine);
}
.group-story__eyebrow::before {
content: ""; flex: none; width: 28px; height: 1px; background: currentColor;
}
.group-story h2 {
margin: 0 0 1.25rem;
font-size: var(--fs-h2);
line-height: 0.95;
max-width: none;
}
.group-story__lede {
margin: 0;
max-width: 62ch;
font-size: 0.9375rem;
line-height: 1.55;
color: var(--ink-3);
}
.timeline {
list-style: none; margin: 0 0 clamp(2.25rem, 4vw, 3.25rem); padding: 0;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: clamp(1rem, 2vw, 2rem);
}
.timeline__step {
position: relative;
padding-top: 1.6rem;
border-top: 1px solid var(--rule-strong);
}
/* Le point marque la date sur la ligne, comme un repère de règle. */
.timeline__step::before {
content: "";
position: absolute; top: -4px; left: 0;
width: 7px; height: 7px;
background: var(--carmine);
}
.timeline__year {
display: block;
font-family: var(--font-display);
font-size: clamp(1.75rem, 3vw, 2.5rem);
line-height: 1;
font-variant-numeric: tabular-nums;
color: var(--carmine);
margin-bottom: 0.5rem;
}
.timeline__label {
display: block;
font-family: var(--font-alt);
font-size: 0.875rem;
font-weight: 500;
line-height: 1.35;
color: var(--ink);
}
.group-facts {
list-style: none; margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(1rem, 2vw, 2rem);
border-top: 2px solid var(--carmine);
padding-top: 1.5rem;
}
.group-facts li { display: flex; flex-direction: column; gap: 0.35rem; }
.group-facts strong {
font-family: var(--font-display);
font-size: clamp(2rem, 3.4vw, 2.75rem);
line-height: 1;
font-variant-numeric: tabular-nums;
color: var(--ink);
}
.group-facts span {
font-size: 0.75rem; font-weight: 600;
letter-spacing: 0.1em; text-transform: uppercase;
line-height: 1.4; color: var(--ink-3);
}
@media (max-width: 991.98px) {
.timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
.group-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.75rem; }
}
@media (max-width: 479.98px) {
.timeline { grid-template-columns: minmax(0, 1fr); }
}
/* ==========================================================================
11 quater. RÉGIMES D'ÉTUDES
========================================================================== */
/* Un régime par rangée, et non deux côte à côte. Chaque rangée se partage en
deux volets — l'intitulé et le public à gauche, ce que le régime recouvre à
droite — comme les rangées de domaines de cette même page. Empilés sans ce
partage, les blocs se seraient étirés sur toute la largeur du conteneur. */
.study-modes {
display: grid;
grid-template-columns: 1fr;
gap: 0;
}
.study-mode {
display: grid;
grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
/* La seconde rangée prend toute la hauteur restante (celle de la liste) :
sans align-self, le public se retrouvait à mi-hauteur, détaché de son
intitulé. */
grid-template-rows: auto 1fr;
column-gap: clamp(1.5rem, 3vw, 3rem);
align-items: start;
padding: clamp(1.5rem, 2.6vw, 2rem) 0;
border-top: 1px solid var(--ink-3);
}
.study-mode__title { grid-column: 1; grid-row: 1; }
.study-mode__who { grid-column: 1; grid-row: 2; align-self: start; margin-top: 0.4rem; }
.study-mode__list { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 767.98px) {
.study-mode { grid-template-columns: 1fr; }
.study-mode__title, .study-mode__who, .study-mode__list { grid-column: 1; grid-row: auto; }
}
.study-mode__title {
margin: 0 0 0.25rem;
font-family: var(--font-alt);
font-size: 1.125rem; font-weight: 700;
letter-spacing: -0.01em; color: var(--ink);
}
.study-mode__who {
margin: 0;
font-size: 0.6875rem; font-weight: 600;
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--carmine);
}
.study-mode__list { list-style: none; margin: 0; padding: 0; }
.study-mode__list li {
position: relative;
padding: 0.65rem 0 0.65rem 1.4rem;
border-bottom: 1px solid var(--rule);
font-family: var(--font-alt);
font-size: 0.9375rem; font-weight: 500; line-height: 1.4;
color: var(--ink);
}
/* Filet court plutôt qu'une coche : ce sont des modalités, pas des étapes
franchies — même règle que les repères du mot du fondateur. */
.study-mode__list li::before {
content: "";
position: absolute; left: 0; top: 1.25em;
width: 10px; height: 1px; background: var(--carmine);
}
.study-modes__note {
margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
padding-top: 1.25rem;
border-top: 1px solid var(--rule);
font-size: 0.875rem; line-height: 1.55; color: var(--ink-3);
}
.study-modes__note strong { color: var(--ink-2); }
@media (max-width: 767.98px) {
.study-modes { grid-template-columns: minmax(0, 1fr); }
}
/* Cible d'ancre : l'en-tête collant fait 84px, on réserve la place pour que
le titre visé ne se retrouve pas dessous. */
[id]:target { scroll-margin-top: 108px; }
/* ==========================================================================
NAVIGATION ENTRE FICHES D'ENTITÉ
Depuis une fiche, on passe aux trois autres sans repasser par la liste.
========================================================================== */
.entity-nav {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1rem, 2vw, 1.75rem);
}
.entity-nav__item {
display: flex;
flex-direction: column;
gap: 0.35rem;
padding-top: 0.9rem;
border-top: 2px solid var(--carmine);
text-decoration: none;
transition: opacity 0.25s var(--ease);
}
.entity-nav__item:hover { opacity: 0.62; }
.entity-nav__label {
font-size: 0.625rem; font-weight: 600;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--ink-3);
}
.entity-nav__name {
font-family: var(--font-alt);
font-size: 0.9375rem; font-weight: 600;
line-height: 1.35; color: var(--ink);
}
@media (max-width: 767.98px) {
.entity-nav { grid-template-columns: minmax(0, 1fr); }
}
/* ==========================================================================
FRISE CHRONOLOGIQUE DU RÉSEAU
==========================================================================
Cinq étiquettes alignées ne disaient pas la durée : elles se lisaient
comme une liste de faits sans lien. Ici la ligne traverse les cinq dates,
l'année passe au-dessus en gros chiffres, l'intitulé en dessous. Le regard
suit le temps de gauche à droite. */
.frise {
--frise-ecart: clamp(0.75rem, 1.6vw, 1.5rem);
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: var(--frise-ecart);
counter-reset: none;
}
/* Trois rangées : l'année, la ligne, l'intitulé. La rangée centrale a une
hauteur fixe pour que la ligne reste rectiligne d'une colonne à l'autre,
quelle que soit la longueur des intitulés. */
.frise__jalon {
display: grid;
grid-template-rows: auto 1.5rem auto;
align-content: start;
}
.frise__annee {
font-family: var(--font-display);
font-size: clamp(1.875rem, 3.2vw, 2.75rem);
line-height: 1;
font-variant-numeric: tabular-nums lining-nums;
color: var(--ink-2);
}
.frise__rail {
position: relative;
align-self: center;
}
/* Le segment déborde dans la gouttière pour que la ligne soit continue. */
.frise__rail::before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: calc(100% + var(--frise-ecart));
height: 1px;
background: var(--rule-strong);
}
/* Le dernier jalon arrête la ligne au lieu de la laisser filer dans le vide. */
.frise__jalon:last-child .frise__rail::before { width: 100%; }
/* Repère carré, comme les autres marqueurs de la page. */
.frise__rail::after {
content: "";
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 7px;
height: 7px;
background: var(--carmine);
}
/* L'étape la plus récente : un anneau la désigne comme le point où en est
le réseau aujourd'hui. */
.frise__jalon:last-child .frise__rail::after {
box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--carmine);
}
.frise__nom {
font-family: var(--font-alt);
font-size: 0.875rem;
font-weight: 500;
line-height: 1.35;
color: var(--ink);
}
@media (max-width: 991.98px) {
.frise { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2rem; }
/* Sur deux rangées, une ligne qui traverse le retour à la ligne serait
fausse : chaque jalon reprend un filet court au-dessus de son année. */
.frise__jalon { grid-template-rows: auto 1.25rem auto; }
.frise__rail::before { width: 100%; }
}
@media (max-width: 575.98px) {
.frise { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Chiffres clés : cadence resserrée ------------------------------------
136px de marge haut et bas plus 72px sous le titre, pour quatre nombres
sur une ligne : la section faisait 756px de haut pour 90px de contenu
utile. Scopé, le rythme des autres sections est intact. */
#chiffres,
.counter-area2 .section-title2 {
margin-bottom: clamp(1.75rem, 3vw, 2.5rem) !important;
}
/* « Un Réseau Fort, des Diplômes Reconnus et un Avenir Garanti » : titre tout
en bleu, coupé en deux par le span. La mesure de 22ch le cassait en trois,
d'où le max-width levé — c'est le span qui décide de la coupure. */
.counter-area2 .section-title2 h2 { max-width: none; }
.counter-area2 .section-title2 h2,
.counter-area2 .section-title2 h2 span { color: var(--navy); }
.counter-area2 .section-title2 h2 span { display: block; }
/* « Expertise Académique & Formations d'Avenir » : titre tout en bleu, et le
span sert de coupure — plus d'accent carmin sur sa seconde moitié.
Scopé : les trois autres bandeaux gardent le leur. */
#formations .section-title2 h2,
#formations .section-title2 h2 span { color: var(--navy); }
#formations .section-title2 h2 span { display: block; }
/* « Un Réseau de 4 Pôles d'Excellence » : titre tout en bleu, sans accent
carmin sur sa seconde moitié. */
#entites .section-title2 h2,
#entites .section-title2 h2 span { color: var(--navy); }
/* « 5 Campus Modernes en Côte d'Ivoire & Ghana » : sur le navy de la bande,
le titre passe tout en blanc et le span sert de coupure. */
.campus-band .section-title2 h2,
.campus-band .section-title2 h2 span { color: #fff; }
.campus-band .section-title2 h2 span { display: block; }
/* Candidature en ligne. Le rembourrage est scopé à l'identifiant parce que
le thème impose le sien ; sans !important il ne passerait pas. Le filet de
clôture se place juste au-dessus du pied de page, d'où un bas resserré. */
#candidature-section {
/* Le bandeau descend : la bande ivoire commençait trop près du surtitre. */
padding-top: clamp(4.5rem, 8vw, 7rem) !important;
padding-bottom: clamp(1.25rem, 2.2vw, 1.75rem) !important;
}
/* ==========================================================================
PARTENARIATS & AMBASSADEURS
==========================================================================
Quatre tuiles à icônes mettaient sur le même plan un ministère et un
ambassadeur, avec deux étoiles jaunes identiques pour les deux personnes.
Trois groupes nommés, en listes filetées : on voit ce qui relève de
l'agrément, du réseau professionnel, et des personnes. */
/* Ivoire : les chiffres qui précèdent sont sur blanc, la candidature qui suit
sur navy — la section se détache des deux. */
.partners {
background: var(--paper-warm);
/* Le filet de séparation vient de la section du dessus, qui pose déjà
28 px sous lui : le rembourrage haut est réduit d'autant pour que le
titre remonte au lieu de flotter à 100 px du trait. */
padding: clamp(1.5rem, 2.6vw, 2.25rem) 0 clamp(2.75rem, 5vw, 4.5rem);
}
/* Un filet en tête, pour détacher la section des chiffres qui la précède.
Il est porté par l'en-tête et non par la section : celle-ci est pleine
largeur, il aurait traversé l'écran au lieu de s'arrêter au contenu.
Rien en dessous du chapeau — la barre d'onglets porte déjà son propre
filet, deux traits s'y seraient suivis à 40px d'écart. */
.partners__head { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.partners h2 {
margin: 0;
font-size: var(--fs-h2);
line-height: 0.95;
max-width: none;
}
/* Titre tout en bleu : plus d'accent carmin sur la seconde moitié. */
.partners h2, .partners h2 span { color: var(--navy); }
/* Trois onglets ; le panneau ouvert pose son contenu à gauche et sa photo à
droite. Les colonnes de texte nu étaient plates, et trois listes empilées
côte à côte laissaient des bas de colonne en escalier. */
.partners__onglets {
display: flex;
flex-wrap: wrap;
gap: clamp(1.25rem, 2.6vw, 2.5rem);
/* 36px de marge s'ajoutaient aux 14px de rembourrage de la première entrée :
51px séparaient l'onglet de son contenu. */
margin-bottom: clamp(0.5rem, 1vw, 0.875rem);
border-bottom: 1px solid var(--rule-strong);
}
.partners__onglet {
position: relative;
padding: 0 0 0.9rem;
background: none;
border: 0;
font-family: var(--font-alt);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-3);
cursor: pointer;
transition: color 0.2s var(--ease);
}
.partners__onglet:hover { color: var(--ink); }
.partners__onglet.est-actif { color: var(--carmine); }
.partners__onglet::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -1px;
height: 2px;
background: var(--carmine);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.25s var(--ease);
}
.partners__onglet.est-actif::after { transform: scaleX(1); }
.partners__onglet:focus-visible { outline: 2px solid var(--carmine); outline-offset: 3px; }
/* Sans script, les trois panneaux restent lisibles à la suite. */
.partners__panneaux.est-pilote .partners__panneau:not(.est-actif) { display: none; }
/* Sans photo, le panneau n'est plus qu'une liste. Elle se répartit en autant
de colonnes que la place en autorise : trois entrées tiennent sur une
rangée, deux sur deux colonnes. Le plancher stabilise la hauteur d'un
onglet à l'autre — les panneaux n'ont pas le même nombre d'entrées. */
.partners__panneau { min-height: 9rem; }
.partners__panneau .partners__list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
column-gap: clamp(1.75rem, 3.5vw, 3.25rem);
}
.partners__group-title {
margin: 0 0 0.25rem;
padding-bottom: 0.9rem;
border-bottom: 1px solid var(--rule-strong);
color: var(--carmine);
font-family: var(--font-alt);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink);
}
.partners__list { list-style: none; margin: 0; padding: 0; }
.partners__list li {
padding: 0.9rem 0;
border-bottom: 1px solid var(--rule);
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.partners__name {
font-family: var(--font-alt);
font-size: 1rem;
font-weight: 600;
line-height: 1.35;
color: var(--ink);
}
/* Le seul chiffre de la section mérite d'être lu comme un chiffre. */
.partners__name strong {
font-family: var(--font-display);
font-weight: 400;
font-size: 1.25rem;
color: var(--carmine);
font-variant-numeric: tabular-nums;
}
.partners__meta {
font-size: 0.8125rem;
line-height: 1.4;
color: var(--ink-3);
}
@media (max-width: 991.98px) {
}
@media (max-width: 575.98px) {
}
/* ==========================================================================
PAGE FORMATIONS
==========================================================================
La page mélangeait trois grammaires : pilules Bootstrap, cartes à ombre
et coins arrondis, et la liste filetée du catalogue LMD. Tout passe à
cette dernière — c'est celle du reste du site. */
.cycle-tabs {
display: flex;
flex-wrap: wrap;
gap: 0;
border-bottom: 1px solid var(--rule);
margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.cycle-tab {
padding: 0.85rem 1.15rem;
margin-bottom: -1px;
border-bottom: 2px solid transparent;
font-family: var(--font-alt);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--ink-3);
text-decoration: none;
white-space: nowrap;
transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.cycle-tab i { margin-right: 0.4rem; font-size: 0.75rem; }
.cycle-tab:hover { color: var(--ink); }
.cycle-tab.is-active { color: var(--carmine); border-bottom-color: var(--carmine); }
/* Le BTS n'a qu'un seul groupe : il occupe toute la largeur au lieu de
laisser une colonne vide à droite. */
.prog-catalogue--large { grid-template-columns: minmax(0, 1fr); }
.prog-catalogue--large .prog-item a { grid-template-columns: 4rem minmax(0, 1fr) auto; }
/* Executive MBA : le seul programme mis en avant. Bande pleine largeur
plutôt qu'une carte esseulée dans une grille de trois. */
.mba-highlight {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: clamp(1.25rem, 3vw, 2.5rem);
margin-top: clamp(2.5rem, 4.5vw, 3.5rem);
/* Bande ivoire : l'Executive MBA ferme le catalogue et doit se distinguer
des groupes de programmes, sans passer au sombre. --paper-warm-2 est le
même ton que la bande historique de la page des entités. */
background: var(--paper-warm-2);
padding: clamp(1.75rem, 3.2vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem);
border-top: 0;
}
.mba-highlight__body { flex: 1 1 22rem; min-width: 0; }
.mba-highlight__eyebrow {
margin: 0 0 0.5rem;
font-size: 0.6875rem; font-weight: 600;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--carmine);
}
.mba-highlight__title {
margin: 0 0 0.5rem;
font-family: var(--font-alt);
font-size: clamp(1.125rem, 1.6vw, 1.375rem);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--ink);
}
.mba-highlight__desc {
margin: 0;
max-width: 60ch;
font-size: 0.9375rem;
line-height: 1.5;
color: var(--ink-2);
}
/* Intitulés de section de la page : le h3 du thème est en serif ; ici ce
sont des repères de navigation, pas des titres éditoriaux. */
#bts h3, #licence h3, .study-modes ~ * h3 {
font-family: var(--font-alt);
font-weight: 700;
letter-spacing: -0.02em;
}
/* ==========================================================================
FICHE D'ENTITÉ
==========================================================================
Le bandeau porte déjà le nom et la présentation : le contenu les répétait
mot pour mot. Il donne maintenant ce qui n'y figure pas — diplômes, durée,
reconnaissance, campus — et le formulaire de candidature sur place. */
.entity-page { background: var(--paper); }
.entity-page__h2 {
margin: 0 0 1.1rem;
font-family: var(--font-alt);
font-size: 1.125rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--ink);
padding-bottom: 0.9rem;
border-bottom: 1px solid var(--ink-3);
}
/* Les faits : quatre colonnes, deux rangées.
En deux colonnes de couples clé/valeur, chaque colonne avait ses propres
filets : dès qu'une valeur passait sur deux lignes, les séparateurs de
gauche et de droite cessaient d'être alignés. Ici les cellules d'une même
rangée partagent leur hauteur, les filets restent donc alignés. */
.entity-facts {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(1.5rem, 2.6vw, 2.25rem);
margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}
.entity-facts__item {
display: flex;
flex-direction: column;
gap: 0.45rem;
padding-top: 0.9rem;
border-top: 1px solid var(--ink-3);
min-width: 0;
}
.entity-facts__k {
margin: 0;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--carmine);
}
.entity-facts__v {
margin: 0; /* porte une marge gauche par défaut */
font-family: var(--font-alt);
font-size: 0.9375rem;
font-weight: 500;
line-height: 1.4;
color: var(--ink);
}
.entity-facts__v strong {
font-family: var(--font-display);
font-weight: 400;
font-size: 1.25rem;
color: var(--carmine);
font-variant-numeric: tabular-nums;
}
/* Filières à gauche, formulaire à droite. */
.entity-split {
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
gap: clamp(2rem, 4vw, 3.5rem);
align-items: start;
margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.entity-fields__list { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.entity-fields__list li {
position: relative;
padding: 0.7rem 0 0.7rem 1.4rem;
border-bottom: 1px solid var(--rule);
font-family: var(--font-alt);
font-size: 0.9375rem;
font-weight: 500;
line-height: 1.4;
color: var(--ink);
}
.entity-fields__list li::before {
content: "";
position: absolute; left: 0; top: 1.3em;
width: 10px; height: 1px; background: var(--carmine);
}
.entity-fields__link {
display: inline-flex; align-items: center; gap: 0.5rem;
font-size: 0.75rem; font-weight: 600;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--navy); text-decoration: none;
border-bottom: 1px solid transparent; padding-bottom: 2px;
}
.entity-fields__link:hover { color: var(--carmine); border-bottom-color: var(--carmine); }
/* Le panneau moderne, quand la fiche l'utilise : fond ivoire pour se
détacher du blanc de la page, comme la carte qu'il remplace. */
.entity-apply .cand-panneau {
background: var(--paper-warm);
border-color: var(--rule-strong);
}
.entity-apply .cand-champ { background: var(--paper); }
@media (max-width: 1199.98px) {
.entity-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
.entity-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.entity-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
.entity-facts { grid-template-columns: minmax(0, 1fr); }
}
/* ==========================================================================
12. LES 4 ENTITÉS
========================================================================== */
/* Toute la carte est le lien : la cible ne se limite plus au « En savoir
plus » de 120px de large. */
.entity-card {
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
height: 100%;
background: var(--paper);
border: none;
border-radius: 0 !important;
box-shadow: none !important;
}
.entity-card-img {
position: relative;
overflow: hidden;
aspect-ratio: 3 / 2;
}
.entity-card-img > img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s var(--ease);
}
.entity-card:hover .entity-card-img > img { transform: scale(1.05); }
/* Une teinte marine très légère harmonise les quatre photos, dont les
températures de couleur sont différentes. Elle reste sous le cartouche :
chaque logo associé demeure parfaitement net et dans ses vraies couleurs. */
.entity-card-img::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: rgba(var(--veil), 0.12);
transition: background-color 0.35s var(--ease);
}
.entity-card:hover .entity-card-img::after,
.entity-card:focus-visible .entity-card-img::after {
background: rgba(var(--veil), 0.05);
}
/* La photo présente l'école ; le cartouche signe l'établissement. Placé
dans l'angle supérieur gauche, sur la zone vide de la salle, il laisse les
étudiants et l'enseignant visibles et ne
participe pas au zoom de la photo au survol. Le logo reste transparent :
c'est le cartouche de la carte, pas l'image, qui assure le contraste. */
.entity-card-brand {
position: absolute;
left: 0;
top: 0;
z-index: 2;
display: grid;
place-items: center;
width: clamp(6.75rem, 36%, 8.25rem);
aspect-ratio: 4 / 3;
padding: clamp(0.55rem, 1vw, 0.75rem);
background: rgba(255, 255, 255, 0.96);
border-right: 1px solid rgba(10, 24, 48, 0.15);
border-bottom: 3px solid var(--carmine);
}
.entity-card-brand img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
/* Le badge de type d'établissement rejoint la pastille de cycle sur une
même ligne, en pied de carte : aplat navy face au contour carmin. */
.entity-badge {
display: inline-block;
background: var(--navy);
color: #fff;
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
padding: 0.35rem 0.5rem;
line-height: 1.45;
white-space: nowrap;
}
.entity-card--focus .entity-badge { background: var(--navy-deep); }
/* Le cycle d'études : gris foncé, sans aplat. Les quatre libellés portaient
quatre couleurs différentes — carmin, navy, navy foncé et un vert hors
palette — pour une information de même nature sur les quatre fiches. */
.entity-cycle {
display: inline-block;
background: none;
padding: 0;
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
line-height: 1.45;
white-space: nowrap;
color: var(--ink-2);
}
.entity-card-tags {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 0.3rem;
min-width: 0;
}
/* Si la place venait à manquer, c'est la pastille de cycle qui se resserre,
pas la ligne qui se casse en deux. */
.entity-card-tags > * { min-width: 0; }
.entity-card-body {
padding: 1.4rem 1.25rem 1.1rem;
flex: 1 1 auto;
}
/* min-height: 2.5em réservait deux lignes et demie même pour un titre sur
une ligne — c'est ce qui creusait le vide avant la description. Inutile
ici : c'est .entity-card-footer (margin-top:auto) qui aligne les cartes. */
/* Raleway 600, comme les intitulés de filières : le filet synthétique
(-webkit-text-stroke) n'a plus lieu d'être, la graisse est réelle. */
.entity-card-body h4 {
font-family: var(--font-alt);
font-weight: 600;
font-size: clamp(1rem, 1.15vw, 1.0625rem);
letter-spacing: -0.02em;
word-spacing: -0.03em;
line-height: 1.3;
color: #0A0C0F;
margin-bottom: 0.45rem;
text-wrap: balance;
}
/* --ink-2 (8.2:1) plutôt que --ink-3 (5.1:1) : ces descriptions portent
l'argument de chaque école, elles doivent se lire sans effort. */
.entity-card-body p {
font-size: 0.875rem;
line-height: 1.5;
color: var(--ink-2);
margin: 0;
}
/* Le pied de carte empile désormais le cycle au-dessus du lien :
c'est ce chevauchement qui cassait la mise en page. */
.entity-card-footer {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
padding: 0.9rem 1.25rem 1.15rem;
margin-top: auto;
}
.entity-card-footer .badge {
background: transparent !important;
color: var(--carmine) !important;
border: 1px solid transparent;
/* le contour ajoute 2px de haut : on les reprend sur le padding pour que
les deux pastilles fassent exactement la même hauteur */
padding: calc(0.35rem - 1px) 0.5rem;
font-size: 0.625rem;
letter-spacing: 0.07em;
line-height: 1.45;
}
/* Le focus se dessine sur la carte entière, pas sur un mot du pied. */
.entity-card:focus-visible {
outline: 2px solid var(--carmine);
outline-offset: 3px;
}
/* --------------------------------------------------------------------------
CARROUSEL DES ENTITÉS
Trois cartes visibles, la quatrième au bout de la flèche. Le défilement
est natif (scroll-snap) plutôt que piloté par transform : on hérite du
glissement tactile, de la molette horizontale et du focus clavier.
-------------------------------------------------------------------------- */
.entity-carousel { position: relative; --ec-gap: clamp(1rem, 1.5vw, 1.375rem); }
.entity-carousel__viewport {
display: flex;
gap: var(--ec-gap);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
}
.entity-carousel__viewport::-webkit-scrollbar { display: none; }
.entity-carousel__viewport:focus-visible { outline: 2px solid var(--carmine); outline-offset: 4px; }
/* L'espacement passe par `gap` et non par un padding porté par les cartes :
avec un padding, la 3e carte s'arrêtait 24px avant le bord du conteneur
et ne tombait donc pas sous la flèche de droite. Le gap ne compte que
entre les cartes, les bords extérieurs restent alignés sur la grille. */
.entity-slide {
flex: 0 0 calc((100% - 3 * var(--ec-gap)) / 4);
min-width: 0;
scroll-snap-align: start;
}
.entity-slide > .entity-card { height: 100%; }
/* La barre de flèches appartient visuellement au carrousel, pas au titre :
elle se colle aux cartes plutôt que de flotter au milieu du vide. */
.entity-carousel__nav {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
/* Le bloc titre porte .mb-60 (72px) : trop pour cette section. Resserré,
mais pas au point de coller le titre aux fiches — le chapeau qui les
séparait a été retiré, l'écart devait reprendre un peu d'air. */
#entites .section-title2.mb-60 {
margin-bottom: clamp(1.5rem, 2.6vw, 2.25rem) !important;
}
.ec-arrow {
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid var(--rule-strong);
color: var(--navy);
font-size: 0.875rem;
cursor: pointer;
transition: background-color 0.22s var(--ease), border-color 0.22s var(--ease), color 0.22s var(--ease);
}
.ec-arrow:hover:not(:disabled) { background: var(--navy); border-color: var(--navy); color: #fff; }
.ec-arrow:disabled { opacity: 0.3; cursor: default; }
@media (prefers-reduced-motion: reduce) {
.entity-carousel__viewport { scroll-behavior: auto; }
.megamenu .mm-card:hover .mm-card__img > img { transform: none; }
.mm-card__img::after { transition: none; }
}
/* Les quatre cartes tiennent de front au-delà de 1200px : la barre de
flèches ne commanderait plus rien, on la retire. Elle revient dès qu'une
carte sort du cadre. */
@media (min-width: 1200px) {
.entity-carousel__nav { display: none; }
}
@media (max-width: 1199.98px) {
.entity-slide { flex-basis: calc((100% - 2 * var(--ec-gap)) / 3); }
}
@media (max-width: 991.98px) {
.entity-slide { flex-basis: calc((100% - var(--ec-gap)) / 2); }
}
@media (max-width: 575.98px) {
.entity-carousel { --ec-gap: 1rem; }
.entity-slide { flex-basis: 86%; }
.entity-carousel__nav { justify-content: center; }
}
/* Colonne focale : la deuxième entité s'inverse en carmin */
.entity-card--focus {
background: var(--carmine);
border-color: var(--carmine);
}
.entity-card--focus:hover { border-color: var(--carmine-dark); background: var(--carmine-dark); }
.entity-card--focus .entity-badge { background: var(--navy-deep); }
.entity-card--focus .entity-card-body h4 { color: #fff; }
.entity-card--focus .entity-card-body p { color: rgba(255, 255, 255, 0.92); }
.entity-card--focus .entity-card-footer { border-top-color: rgba(255, 255, 255, 0.25); }
.entity-card--focus .entity-card-footer .badge {
color: #fff !important;
border-color: rgba(255, 255, 255, 0.4);
}
.entity-card--focus .entity-card-footer a { color: #fff; }
.entity-card--focus .entity-card-footer a:hover { color: rgba(255, 255, 255, 0.75); }
/* ==========================================================================
13. DOMAINES DE FORMATION
L'échelle de diplômes remplace la numérotation : sept domaines ne sont
pas une séquence, mais les cycles proposés sont une vraie information.
========================================================================== */
.departments-post { list-style: none; margin: 0; padding: 0; }
.departments-post > li { border-top: 1px solid var(--rule); margin-bottom: 0 !important; }
.departments-post > li:last-child { border-bottom: 1px solid var(--rule); }
.dept-row {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.85fr) auto;
gap: clamp(1.25rem, 3vw, 3rem);
align-items: center;
/* 24px en haut comme en bas laissaient 48px de blanc entre la description
d'une ligne et l'intitulé de la suivante, filet compris. */
padding: clamp(0.65rem, 1vw, 0.875rem) clamp(0rem, 2vw, 1.75rem);
transition: background-color 0.25s var(--ease);
}
.dept-row:hover { background: var(--paper-warm); }
/* Six lignes courtes ne justifient pas la pleine cadence verticale :
scopé à cette section pour ne pas toucher au rythme du reste du site. */
#formations { padding-top: clamp(3.5rem, 6vw, 6rem) !important; padding-bottom: clamp(3.5rem, 6vw, 6rem) !important; }
#formations .section-title2 { margin-bottom: clamp(1.75rem, 3vw, 2.5rem) !important; }
/* Vignette à gauche du couple titre + description. Format carré et taille
calée sur la hauteur utile de la ligne, pour ne pas la faire grandir. */
.dept-row__main {
display: flex;
align-items: flex-start;
gap: clamp(1rem, 1.4vw, 1.5rem);
min-width: 0;
}
/* Numéro d'ordre : largeur fixe pour que tous les titres s'alignent sur
la même verticale, chiffres tabulaires pour que 01 et 10 aient la même
chasse. aria-hidden : c'est le titre qui porte le sens, pas le numéro. */
.dept-row__num {
flex: 0 0 auto;
width: 3.25rem;
font-family: var(--font-display);
font-size: 1.875rem;
font-variant-numeric: tabular-nums lining-nums;
line-height: 1;
color: var(--rule-strong);
padding-top: 0.12em;
transition: color 0.25s var(--ease);
user-select: none;
}
.dept-row:hover .dept-row__num { color: var(--carmine); }
.dept-row__text { display: block; min-width: 0; }
@media (max-width: 575.98px) {
.dept-row__num { width: 2.5rem; font-size: 1.5rem; }
}
/* Ces intitulés sont du contenu fonctionnel qu'on parcourt des yeux, pas
un titre éditorial : Instrument Sans en 600 leur donne le poids qu'un
serif à graisse unique ne peut pas fournir. C'est le traitement que la
page de référence réserve à son plus petit niveau de titre. */
.dept-row__title {
font-family: var(--font-alt);
font-weight: 600;
font-size: clamp(1.125rem, 1.2vw, 1.3125rem);
/* Raleway a une chasse large et un crénage aéré : sans resserrage, ces
intitulés s'étirent sur toute la colonne. */
letter-spacing: -0.022em;
word-spacing: -0.04em;
line-height: 1.3;
margin-bottom: 0.45rem;
}
.dept-row__title a { color: var(--ink); }
.dept-row:hover .dept-row__title a { color: var(--carmine); }
.dept-row__desc {
font-size: 0.875rem;
color: var(--ink-3);
margin: 0;
max-width: 56ch;
}
.dept-row__levels {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.dept-level {
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--navy);
border: 1px solid var(--rule);
padding: 0.35rem 0.65rem;
white-space: nowrap;
}
.dept-row:hover .dept-level { border-color: var(--rule-strong); }
.dept-row__cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--navy);
white-space: nowrap;
border-bottom: 1px solid transparent;
padding-bottom: 2px;
}
.dept-row__cta:hover { color: var(--carmine); border-bottom-color: var(--carmine); }
/* ==========================================================================
14. LES 5 CAMPUS — LE CORRIDOR
Signature de la page : le réseau franchit une frontière, et c'est là que
la langue d'enseignement change. Le rail le dit littéralement.
========================================================================== */
.campus-band { background: var(--navy); color: rgba(255, 255, 255, 0.75); }
.campus-band h2, .campus-band h3, .campus-band h4 { color: #fff; }
/* Le rail est dessiné par .corridor__track : pas de second filet ici. */
.corridor {
margin: clamp(2rem, 3vw, 2.5rem) 0 0;
}
/* Le rail est une commande, pas une section : il se rapproche de son
intitulé plutôt que de flotter au milieu de la bande. */
#campus .section-title2 { margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
/* Le bouton clôt la section : 136px sous lui creusaient un vide inutile
avant la bande suivante. Scopé à #campus, la cadence globale est intacte. */
#campus { padding-bottom: clamp(2.5rem, 4.5vw, 4rem) !important; }
.corridor__track {
display: grid;
grid-template-columns: repeat(4, 1fr) auto 1fr;
align-items: start;
gap: 0;
}
.corridor__stop {
display: block;
position: relative;
width: 100%;
background: none;
border: none;
font: inherit;
cursor: pointer;
padding: 1.5rem 0.75rem 0;
text-align: center;
color: rgba(255, 255, 255, 0.62);
}
/* La ligne continue traverse toutes les étapes */
.corridor__stop::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: var(--navy-line);
}
.corridor__stop::after {
content: "";
position: absolute;
top: -4px;
left: 50%;
transform: translateX(-50%);
width: 9px;
height: 9px;
background: var(--navy);
border: 1px solid rgba(255, 255, 255, 0.5);
transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.corridor__stop:hover { color: #fff; }
.corridor__stop:hover::after { background: var(--red-bright); border-color: var(--red-bright); }
/* Noms de villes du rail : Raleway 600, comme les autres intitulés de
contenu. Crénage négatif — Raleway a une chasse plus large que le serif. */
.corridor__name {
display: block;
font-family: var(--font-alt);
font-weight: 600;
font-size: clamp(1.0625rem, 1.02vw, 1.1875rem);
color: #fff;
letter-spacing: -0.015em;
}
.corridor__meta {
display: block;
font-size: 0.6875rem;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-top: 0.35rem;
}
/* La frontière : rupture verticale explicite entre les deux pays */
.corridor__border {
position: relative;
padding: 1.75rem 1.25rem 0;
text-align: center;
}
.corridor__border::before {
content: "";
position: absolute;
top: -10px;
left: 50%;
width: 1px;
height: 30px;
background: var(--red-bright);
}
.corridor__border span {
display: block;
font-size: 0.625rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--red-bright);
font-weight: 600;
}
.corridor__stop--gh::after { border-color: var(--red-bright); }
.corridor__stop--gh .corridor__meta { color: rgba(255, 255, 255, 0.75); }
/* --------------------------------------------------------------------------
PANNEAU CAMPUS
Le corridor pilote un panneau unique et large : une seule photo bien
cadrée plutôt que cinq vignettes serrées, et le rail devient utile.
-------------------------------------------------------------------------- */
.corridor__stop.is-active { color: #fff; }
.corridor__stop.is-active::after {
background: var(--red-on-dark);
border-color: var(--red-on-dark);
transform: translateX(-50%) scale(1.25);
}
.corridor__stop.is-active .corridor__name { color: var(--red-on-dark); }
.corridor__stop:focus-visible { outline: 2px solid var(--red-on-dark); outline-offset: 4px; }
/* Photo et texte se partagent la largeur au lieu de se superposer : plus de
voile dégradé, c'est le bord franc entre la photo et un aplat uni qui
sépare les deux moitiés. L'aplat est --navy-deep, un cran plus sombre que
la bande, pour que le panneau se détache aussi de son fond. */
.campus-panel {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
overflow: hidden;
min-height: clamp(320px, 33vw, 440px);
margin-top: clamp(2rem, 3.5vw, 3rem);
border: 1px solid var(--navy-line);
animation: campus-in 0.35s var(--ease);
}
.campus-panel[hidden] { display: none; }
@keyframes campus-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* La photo est posée en absolu dans sa cellule : sans hauteur définie sur le
parent, un `height: 100%` sur l'image ne se résoudrait pas. */
.campus-panel__media {
position: relative;
overflow: hidden;
}
.campus-panel__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.campus-panel__body {
background: var(--navy-deep);
padding: clamp(1.75rem, 3vw, 3rem);
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
.campus-panel__eyebrow {
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--red-on-dark);
margin: 0 0 0.9rem;
}
/* Le texte passe sur la photo : il repasse en blanc. */
.campus-panel .campus-panel__title {
font-family: var(--font-alt);
font-weight: 600;
font-size: clamp(1.5rem, 2vw, 1.875rem);
letter-spacing: -0.02em;
line-height: 1.2;
color: #fff;
margin: 0 0 1.1rem;
}
.campus-panel__addr,
.campus-panel__prog {
display: flex;
align-items: flex-start;
gap: 0.6rem;
font-size: 0.9375rem;
line-height: 1.5;
color: rgba(255, 255, 255, 0.9);
margin: 0 0 0.6rem;
}
.campus-panel__addr i,
.campus-panel__prog i {
color: var(--red-on-dark);
font-size: 0.8125rem;
margin-top: 0.32em;
flex: none;
}
.campus-panel__prog { margin-bottom: var(--stack-md); }
@media (max-width: 767.98px) {
/* Les deux moitiés s'empilent : la photo prend un rapport fixe puisqu'elle
n'a plus de colonne voisine pour lui donner sa hauteur. */
.campus-panel {
grid-template-columns: minmax(0, 1fr);
min-height: 0;
}
.campus-panel__media { aspect-ratio: 16 / 10; }
}
@media (prefers-reduced-motion: reduce) {
.campus-panel { animation: none; }
}
/* Tuiles campus */
.campus-card {
display: block;
background: transparent;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
height: 100%;
}
.campus-card-img {
position: relative;
overflow: hidden;
aspect-ratio: 4 / 3;
margin-bottom: 1rem;
}
.campus-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s var(--ease);
}
.campus-card:hover .campus-card-img img { transform: scale(1.05); }
.campus-flag {
position: absolute;
bottom: 0;
left: 0;
background: var(--navy-deep);
color: #fff;
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 0.4rem 0.75rem;
}
.campus-card-content { padding: 0; }
.campus-card-content h4 {
font-size: 1.1875rem;
color: #fff;
margin-bottom: 0.35rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.campus-card-content p { color: rgba(255, 255, 255, 0.62); }
.campus-meta { list-style: none; margin: 0.75rem 0 0; padding: 0; }
.campus-meta li {
display: flex;
align-items: flex-start;
gap: 0.5rem;
font-size: 0.8125rem;
color: rgba(255, 255, 255, 0.62);
padding: 0.3rem 0;
}
.campus-meta li i { color: var(--red-bright); font-size: 0.75rem; margin-top: 0.35em; }
/* Sur fond clair (page campus.html) les tuiles s'inversent */
.band-light .campus-card-content h4 { color: var(--ink); }
.band-light .campus-card-content p,
.band-light .campus-meta li { color: var(--ink-3); }
/* Carte schématique des 5 campus (campus.html) */
.map-svg-wrapper { position: relative; }
.map-svg-wrapper svg { display: block; background: none !important; border-radius: 0 !important; }
.campus-pin {
position: absolute;
transform: translate(-50%, -50%);
cursor: pointer;
display: block;
}
.campus-pin-icon {
width: 32px;
height: 32px;
background: var(--navy-mid);
border: 1px solid rgba(255, 255, 255, 0.35);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
margin-inline: auto;
transition: background-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.campus-pin:hover .campus-pin-icon,
.campus-pin.active .campus-pin-icon {
background: var(--carmine);
border-color: var(--carmine);
transform: scale(1.12);
}
.campus-pin--gh .campus-pin-icon { border-color: var(--red-bright); }
.campus-pin-label {
position: absolute;
top: 118%;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.75);
}
.campus-pin:hover .campus-pin-label { color: #fff; }
/* ==========================================================================
15. VIDÉO
========================================================================== */
/* --------------------------------------------------------------------------
AFFICHE VIDÉO
Emplacement photo : assets/img/hero/video-bg.jpg — cadrage 16:9.
L'ancienne version noyait la photo sous un voile à 82% sur toute la
largeur : autant ne pas en mettre. Ici l'image est une affiche cadrée,
le dégradé n'assombrit que la zone de texte.
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
AFFICHE VIDÉO
Emplacement photo : assets/img/hero/video-bg.jpg — cadrage 16:9.
Un seul cadre : la vidéo principale à gauche, la galerie des 4 entités
posée dessus à droite sur un voile. Le dégradé n'assombrit que les zones
de texte — la photo reste visible, contrairement au voile à 82% d'avant.
-------------------------------------------------------------------------- */
/* --- Volet gauche : lecture de la vidéo principale --- */
/* Cercle au trait et centré, avec une onde qui signale qu'il est actif.
Un disque plein masquait la photo au milieu du cadre. */
/* Onde concentrique : une seule, lente, elle attire sans clignoter */
@keyframes play-pulse {
0% { transform: scale(1); opacity: 0.75; }
70% { transform: scale(1.45); opacity: 0; }
100% { transform: scale(1.45); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
}
/* --- Volet droit : la galerie, dans le même cadre --- */
/* Panneau pleine hauteur, collé au bord droit du cadre. */
/* flex: 1 → les quatre vignettes se répartissent sur toute la hauteur.
Un filet sépare chaque vidéo, plutôt qu'un contour complet par carte. */
/* Neutralise l'apparence native du bouton : la vignette reste une vignette */
/* Vidéo actuellement chargée dans le lecteur */
/* Cercle au trait, pas un disque plein : l'aperçu reste visible dessous. */
/* Voile neutre : le rouge sur la photo salissait l'image. */
@media (max-width: 991.98px) {
}
@media (max-width: 575.98px) {
}
/* ==========================================================================
16. CHIFFRES CLÉS
Quatre boîtes égales ne hiérarchisent rien, et la barre de chiffres du
haut de page occupe déjà ce registre. Ici, le taux d'insertion prend la
parole — c'est la seule proportion, donc la seule à porter une jauge —
et les trois dénombrements l'accompagnent en liste.
========================================================================== */
.counter-area2 {
/* Même blanc que la section des actualités. */
background: var(--paper);
padding-top: clamp(2.5rem, 4.5vw, 3.5rem) !important;
/* Respiration sous la bande de chiffres, avant la coupure de couleur. */
padding-bottom: clamp(4.5rem, 8vw, 7rem) !important;
}
/* Le thème impose trois choses sur `.count` : un remplissage transparent
avec contour, `color:#fff` et `font-size:48px`. Sur fond clair et à cette
échelle, les trois sont à neutraliser — le span hérite de son parent. */
.counter-area2 .count {
-webkit-text-fill-color: currentColor;
-webkit-text-stroke: 0;
color: inherit;
font: inherit;
line-height: inherit;
margin: 0;
display: inline;
}
/* Les trois rangs — chiffre, intitulé, précision — sont partagés par les
quatre colonnes via `subgrid` : ils s'alignent quel que soit le nombre de
lignes de l'intitulé. Sans cela, « Taux d'Insertion Professionnelle » sur
deux lignes décalait sa colonne de 13px par rapport aux trois autres. */
.stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto auto auto;
align-items: start;
border-top: 1px solid var(--rule-strong);
}
.stat-cell {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid;
row-gap: 0.5rem;
padding: clamp(1.5rem, 2.6vw, 2rem) clamp(1rem, 2vw, 2rem);
text-align: center;
border-left: 1px solid var(--rule);
}
/* Navigateurs sans subgrid : au moins les hauts de cellule s'alignent. */
@supports not (grid-template-rows: subgrid) {
.stat-cell { display: block; }
}
.stat-cell:first-child { border-left: none; }
.stat-cell__num {
display: flex;
align-items: baseline;
justify-content: center;
font-family: var(--font-display);
font-size: clamp(3rem, 5.5vw, 4.75rem);
line-height: 1;
letter-spacing: -0.015em;
color: var(--navy);
margin: 0 0 1rem;
font-variant-numeric: tabular-nums; /* la largeur ne saute pas pendant le décompte */
}
/* Le « % » suit le chiffre auquel il appartient : il ferait une tache
carmin isolée sur une bande où plus rien n'est rouge. */
.stat-cell__unit {
font-size: 0.36em;
color: var(--navy);
margin-left: 0.08em;
}
.stat-cell__label {
font-family: var(--font-alt);
font-weight: 600;
font-size: 1rem;
letter-spacing: -0.015em;
color: var(--ink);
/* Marge basse retirée : les rangées du subgrid posent déjà 8 px, la marge
s'y ajoutait et détachait la légende de son intitulé. */
margin: 0;
}
.stat-cell__sub {
font-size: 0.8125rem;
/* Une seule ligne : 1.5 réservait du blanc au-dessus des lettres. */
line-height: 1.3;
color: var(--ink-2);
margin: 0;
}
/* Le passage à deux colonnes se fait à 992px et non à 768px : sur une
tablette, quatre colonnes de 173px cassaient « Taux d'Insertion
Professionnelle » sur trois lignes. */
@media (max-width: 991.98px) {
.stats { grid-template-columns: repeat(2, 1fr); }
.stat-cell:nth-child(odd) { border-left: none; }
.stat-cell:nth-child(n+3) { border-top: 1px solid var(--rule); }
}
@media (max-width: 419.98px) {
.stats { grid-template-columns: 1fr; }
.stat-cell { border-left: none; }
.stat-cell + .stat-cell { border-top: 1px solid var(--rule); }
}
/* ==========================================================================
17. CANDIDATURE
========================================================================== */
/* Le thème dessine ici une carte blanche (`.newslater-area2 .container`
avec background:#fff et bordure) prévue pour un bloc newsletter clair.
Notre section est navy pleine largeur : le texte blanc y devenait
invisible. On rend le conteneur à son rôle de simple gouttière. */
.newslater-area2 > .container {
background: transparent;
border: none;
padding: 0 var(--gutter);
}
.newslater-area2 {
background: var(--navy-deep);
padding: var(--section-y) 0;
color: rgba(255, 255, 255, 0.75);
}
.newslater-area2 .section-title2 h2 { color: #fff; }
.newslater-area2 .section-title2 h2 span { color: var(--red-bright); }
.admission-card {
background: var(--paper);
border: 1px solid var(--rule);
padding: clamp(1.75rem, 4vw, 2.75rem);
}
.admission-card h3 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.admission-card p { font-size: 0.875rem; color: var(--ink-3); margin-bottom: var(--stack-md); }
.form-label {
font-family: var(--font-sans);
font-size: 0.6875rem !important;
font-weight: 600 !important;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-2);
margin-bottom: 0.4rem;
}
.form-control, .form-select {
border: 1px solid var(--rule);
padding: 0.85rem 1rem;
font-family: var(--font-sans);
font-size: 0.9375rem;
color: var(--ink);
background-color: var(--paper);
transition: border-color 0.2s var(--ease);
}
.form-control::placeholder { color: var(--ink-3); }
.form-control:focus, .form-select:focus {
border-color: var(--navy);
box-shadow: none !important;
outline: none;
}
/* ==========================================================================
18. PARTENAIRES
========================================================================== */
.partner-tile {
border: 1px solid var(--rule);
background: var(--paper) !important;
padding: 1.25rem 1rem !important;
text-align: center;
min-width: 170px;
transition: border-color 0.25s var(--ease);
}
.partner-tile:hover { border-color: var(--navy); }
/* ==========================================================================
19. PIED DE PAGE
========================================================================== */
/* Même bleu que le bandeau utilitaire en haut de page (--navy, #142C55).
Il reste distinct de la section de candidature qui le précède, en
--navy-deep : la page s'ouvre et se ferme sur la même valeur. */
.footer-top {
background: var(--navy);
color: rgba(255, 255, 255, 0.6);
padding: clamp(3rem, 5.5vw, 4.5rem) 0 0;
font-size: 0.875rem;
}
/* Même fichier transparent, sans fond ajouté, dans le pied de page sombre. */
.footer-top .footer-widget img {
display: block;
height: 54px;
max-height: none;
width: auto;
filter: none;
}
.f-widget-title h2 {
font-family: var(--font-sans);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
margin-bottom: 1.5rem;
padding-bottom: 0.85rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.f-widget-title h2::after { display: none; }
.footer-link ul { list-style: none; margin: 0; padding: 0; }
.footer-link ul li { margin-bottom: 0.7rem; }
.footer-link ul li a {
color: rgba(255, 255, 255, 0.6);
font-size: 0.875rem;
display: flex;
align-items: baseline;
gap: 0.5rem;
}
.footer-link ul li a i { font-size: 0.625rem; color: var(--red-bright); }
.footer-link ul li a:hover { color: #fff; }
/* Le thème met .f-contact en flex : les lignes d'adresse, d'e-mail et de
téléphone se retrouvaient côte à côte, chacune écrasée sur trois lettres. */
.f-contact { display: block !important; }
.f-contact p { margin-bottom: 0.6rem; line-height: 1.6; }
.f-contact a { color: rgba(255, 255, 255, 0.85); }
.f-contact a:hover { color: #fff; }
/* En fond sombre, le gras doit s'éclaircir et non passer à l'encre foncée */
.footer-top strong, .footer-top b,
.copyright-wrap strong, .copyright-wrap b,
.band-navy strong, .campus-band strong,
.newslater-area2 strong, .page-head strong { color: #fff; }
.footer-social { display: flex; gap: 0.6rem; }
.footer-social a {
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.22);
color: rgba(255, 255, 255, 0.7);
font-size: 0.875rem;
transition: all 0.22s var(--ease);
}
.footer-social a:hover { background: var(--carmine); border-color: var(--carmine); color: #fff; }
/* Bande de mentions dans le navy du pied de page qui la contient : le bloc
sombre redevient d'un seul tenant. C'est un filet clair, et non plus un
changement de fond, qui détache les mentions des colonnes. Il est porté
par le conteneur pour s'arrêter à la largeur du contenu. */
.copyright-wrap {
background: var(--navy);
border-top: 0;
padding: 0 0 1.5rem;
/* 112px séparaient la dernière colonne des mentions : la marge de 72px
s'ajoutait aux 40px que chaque colonne porte déjà en bas. */
margin-top: clamp(1.25rem, 2.2vw, 1.75rem) !important;
font-size: 0.8125rem;
}
/* Le filet est porté par le paragraphe et non par le conteneur : celui-ci a
48px de rembourrage latéral, le trait débordait donc de la colonne du logo
et de celle du contact. Sur le paragraphe, il tombe exactement sur les
mêmes bords que les filets des colonnes au-dessus. */
.copyright-wrap > .container > p {
border-top: 1px solid rgba(255, 255, 255, 0.16);
padding-top: 1.5rem;
}
.copyright-wrap .container,
.copyright-wrap p,
.copyright-wrap .text-white-50 { color: rgba(255, 255, 255, 0.72) !important; }
.copyright-wrap a { color: rgba(255, 255, 255, 0.85); }
.copyright-wrap a:hover { color: #fff; }
/* ==========================================================================
20. FLOTTANTS ET MODALE
========================================================================== */
.whatsapp-float {
position: fixed;
bottom: 26px;
right: 26px;
width: 54px;
height: 54px;
background: #1F8A4C;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
z-index: 900;
transition: transform 0.25s var(--ease);
}
.whatsapp-float:hover { transform: scale(1.08); color: #fff; }
.whatsapp-tooltip {
position: absolute;
right: 68px;
background: var(--navy-deep);
color: #fff;
font-size: 0.75rem;
padding: 0.5rem 0.85rem;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.22s var(--ease);
}
.whatsapp-float:hover .whatsapp-tooltip { opacity: 1; }
/* ==========================================================================
21. EN-TÊTE DE PAGE INTÉRIEURE
========================================================================== */
.page-head {
background: var(--navy);
color: rgba(255, 255, 255, 0.7);
/* Le bandeau montait à 647px, dont 104 de vide sous le fil d'Ariane.
Rembourrage haut et bas resserrés séparément : le bas n'a rien à porter. */
padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(1.5rem, 2.8vw, 2.75rem);
position: relative;
isolation: isolate;
overflow: hidden;
}
/* Photo de bandeau. Une balise ![]()
plutôt qu'une url() dans une variable
CSS : dans une variable, le chemin relatif est résolu depuis la feuille
de style (assets/css/) et non depuis la page — l'image ne se chargeait
pas. Une balise résout depuis le document. */
.page-head__media {
position: absolute;
inset: 0;
z-index: -2;
display: block;
overflow: hidden;
}
.page-head__media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 40%;
display: block;
}
.page-head:has(.page-head__media)::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(180deg, rgba(10, 24, 48, 0.45) 0%, rgba(10, 24, 48, 0.25) 45%, rgba(10, 24, 48, 0.65) 100%),
linear-gradient(100deg, rgba(10, 24, 48, 0.88) 0%, rgba(10, 24, 48, 0.70) 45%, rgba(10, 24, 48, 0.34) 100%);
}
.page-head__eyebrow {
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--red-bright);
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.1rem;
}
.page-head__eyebrow::before {
content: "";
width: 28px;
height: 1px;
background: var(--red-bright);
flex: none;
}
.page-head h1 {
color: #fff;
font-size: var(--fs-h1);
margin-bottom: 0.75rem;
/* 18ch valait 497px : les titres longs passaient sur trois lignes, la
dernière ne portant qu'un mot. Mesure élargie, et lignes égalisées. */
max-width: 26ch;
text-wrap: balance;
}
.page-head p {
color: rgba(255, 255, 255, 0.68);
/* 62ch valait 661px et les chapeaux courts débordaient de 22px sur une
seconde ligne. Élargi juste assez pour qu'ils tiennent d'un tenant. */
max-width: 48rem;
margin: 0;
}
/* Bouton posé sous le chapeau du bandeau, au-dessus du fil d'Ariane.
Sélecteur à deux classes : `.page-head p { margin: 0 }` (0,1,1) écrasait
une règle de classe seule (0,1,0) et le bouton restait collé au texte. */
.page-head .page-head__actions { margin: var(--stack-md) 0 0; }
.page-head__actions .btn-cefat-secondary i { font-size: 0.75rem; }
.page-head__crumbs {
margin-top: var(--stack-md);
padding-top: 1.1rem;
border-top: 1px solid var(--navy-line);
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
}
.page-head__crumbs a { color: rgba(255, 255, 255, 0.5); }
.page-head__crumbs a:hover { color: #fff; }
/* ==========================================================================
22. RESPONSIVE
========================================================================== */
@media (max-width: 1399.98px) {
/* Premier niveau uniquement : sinon ce padding retomberait sur les liens
des panneaux du mega menu. */
.main-menu > nav > ul > li > a { padding: 1.75rem 0.7rem; font-size: 0.8125rem; }
.main-menu > nav > ul > li > a::after { left: 0.7rem; right: 0.7rem; }
.header-btn .btn-cefat-primary { padding: 0.75rem 1rem; font-size: 0.75rem; }
.logo img { max-height: 48px; }
/* La barre haute passait sur deux lignes : on resserre plutôt que de laisser
le badge FDFP tomber seul sous les autres entrées. */
.header-cta ul { gap: 1.1rem; flex-wrap: nowrap; }
.header-top { font-size: 0.75rem; }
}
/* Mesuré : logo + 7 entrées + bouton réclament ~1000px une fois les marges
parasites du thème neutralisées. Sous 1200px on bascule sur le tiroir
plutôt que de tasser jusqu'à la casse. */
@media (max-width: 1199.98px) {
.main-menu { display: none !important; }
.header-btn { display: none !important; }
.mobile-nav-toggle { display: inline-flex !important; align-items: center; justify-content: center; }
}
@media (max-width: 991.98px) {
.hero__grid {
grid-template-columns: 1fr;
gap: var(--stack-lg);
min-height: 0;
padding-top: var(--section-y);
padding-bottom: var(--section-y);
}
.hero__rail { max-width: 30rem; }
.hero-content { max-width: none; }
.dept-row {
grid-template-columns: 1fr;
gap: 1rem;
align-items: start;
}
.dept-row__cta { justify-self: start; }
.corridor__track {
grid-template-columns: repeat(2, 1fr);
gap: 1.75rem 0;
}
.corridor__border {
grid-column: 1 / -1;
padding: 0.5rem 0 0;
}
.corridor__border::before { display: none; }
}
@media (max-width: 575.98px) {
.corridor__track { grid-template-columns: 1fr; }
.btn-cefat-primary,
.btn-cefat-secondary,
.btn-cefat-outline { width: 100%; justify-content: center; }
.hero-actions { flex-direction: column; align-items: stretch; }
}
/* ==========================================================================
23. MOUVEMENT RÉDUIT
========================================================================== */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.hero__rail li { animation: none; }
}
/* ==========================================================================
24. IMPRESSION
========================================================================== */
@media print {
.header-top, .menu-area, .mobile-drawer, .whatsapp-float,
.footer-social { display: none !important; }
body { color: #000; }
}
/* L'en-tête étant hors flux, la première section démarre à y=0 : on lui rend
la hauteur du bandeau pour que le contenu ne passe pas dessous. */
/* La hauteur de la barre s'AJOUTE au rembourrage propre de chaque section :
la remplacer collait le surtitre des pages internes sous le menu. */
.hero-slider-area { padding-top: var(--menu-h, 84px); }
.page-head { padding-top: calc(clamp(2.5rem, 5vw, 4.5rem) + var(--menu-h, 84px)); }
@media (max-width: 991.98px) {
.menu-area { top: 0; }
}
/* ==========================================================================
RUBAN DÉFILANT DES DOMAINES
==========================================================================
Deux files identiques se suivent dans une piste en surcharge cachée. Chacune
se translate de sa propre largeur : quand la première a fini sa course, la
seconde occupe exactement sa place de départ et la boucle ne se voit pas.
Un masque en dégradé estompe les deux bords, pour que les mots entrent et
sortent au lieu d'être tranchés net. */
/* Le ruban occupe sa propre bande, entre le slider et « Notre Histoire ».
Le bord sombre du hero le délimite en haut ; un filet le sépare en bas. */
.ruban-area {
background: var(--paper);
padding: clamp(1.5rem, 2.6vw, 2.25rem) 0 clamp(0.75rem, 1.2vw, 1rem);
}
.ruban {
display: grid;
grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr);
gap: clamp(2rem, 4vw, 4rem);
align-items: center;
padding-bottom: clamp(1.25rem, 2.2vw, 1.875rem);
border-bottom: 1px solid var(--rule);
}
.ruban__lede {
/* 12px de marge plus l'interlignage des deux blocs creusaient 23px
optiques entre la phrase et le lien qui la prolonge. */
margin: 0 0 0.3rem;
font-family: var(--font-alt);
font-size: clamp(0.9375rem, 1.05vw, 1.0625rem);
font-weight: 600;
line-height: 1.4;
letter-spacing: -0.012em;
color: var(--ink);
}
.ruban__lien {
display: inline-flex;
align-items: center;
gap: 0.45rem;
/* Une ligne unique n'a pas besoin de 1.6 d'interlignage : le blanc qu'il
réserve au-dessus des lettres s'ajoutait à l'écart. */
line-height: 1.25;
font-size: 0.8125rem;
font-weight: 600;
color: var(--carmine);
text-decoration: none;
}
.ruban__lien i { font-size: 0.75rem; transition: transform 0.25s var(--ease); }
.ruban__lien:hover i { transform: translateX(4px); }
.ruban__piste {
display: flex;
overflow: hidden;
min-width: 0;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.ruban__file {
display: flex;
align-items: center;
flex: none;
gap: clamp(2.5rem, 5vw, 5rem);
margin: 0;
padding: 0 clamp(2.5rem, 5vw, 5rem) 0 0;
list-style: none;
animation: ruban-defile 34s linear infinite;
}
@keyframes ruban-defile { to { transform: translateX(-100%); } }
/* Le survol suspend la course : sans cela, viser un mot serait un jeu. */
.ruban__piste:hover .ruban__file,
.ruban__piste:focus-within .ruban__file { animation-play-state: paused; }
.ruban__mot a {
display: block;
white-space: nowrap;
font-family: var(--font-alt);
font-size: clamp(1.0625rem, 1.35vw, 1.375rem);
font-weight: 500;
letter-spacing: -0.015em;
color: var(--ink-3);
text-decoration: none;
transition: color 0.22s var(--ease);
}
.ruban__mot a:hover { color: var(--carmine); }
.ruban__mot a:focus-visible { outline: 2px solid var(--carmine); outline-offset: 4px; }
@media (max-width: 767.98px) {
.ruban { grid-template-columns: 1fr; gap: 1.5rem; }
}
/* Mouvement réduit : la file s'arrête et devient un rail qu'on fait glisser
soi-même. La copie n'a alors plus d'objet. */
@media (prefers-reduced-motion: reduce) {
.ruban__file { animation: none; }
.ruban__piste { overflow-x: auto; }
.ruban__file[aria-hidden="true"] { display: none; }
}
/* ==========================================================================
PAGE DES ENTITÉS — FICHES
==========================================================================
La page était restée en Bootstrap brut : cartes à ombre et angles arrondis,
pastilles jaune et vert hors palette, coches rouges, deux gros boutons par
bloc. Elle reprend ici la langue du reste du site — filets fins, ordinal en
gris, capitales carmin pour la qualification, liens texte plutôt que pavés. */
.entites-area {
background: var(--paper);
padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(3rem, 6vw, 5.5rem);
}
.ent-fiche {
display: grid;
grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
gap: clamp(2rem, 4vw, 4rem);
align-items: stretch;
padding: clamp(2.25rem, 4vw, 3.5rem) 0;
border-top: 1px solid var(--rule);
}
.ent-fiche:first-child { border-top: 0; padding-top: 0; }
.ent-fiche__media {
position: relative;
margin: 0;
overflow: hidden;
min-height: 100%;
}
.ent-fiche__media > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s var(--ease);
}
.ent-fiche:hover .ent-fiche__media > img { transform: scale(1.035); }
/* Même signature photo + logo que sur l'accueil et le méga-menu. Le voile
harmonise les quatre prises de vue ; le logo reste fixe au premier plan. */
.ent-fiche__media::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: rgba(var(--veil), 0.12);
transition: background-color 0.35s var(--ease);
}
.ent-fiche:hover .ent-fiche__media::after {
background: rgba(var(--veil), 0.05);
}
.ent-fiche__brand {
position: absolute;
left: 0;
top: 0;
z-index: 2;
display: grid;
place-items: center;
width: clamp(8rem, 34%, 10.5rem);
aspect-ratio: 4 / 3;
padding: clamp(0.65rem, 1.2vw, 0.9rem);
background: rgba(255, 255, 255, 0.96);
border-right: 1px solid rgba(10, 24, 48, 0.15);
border-bottom: 3px solid var(--carmine);
}
.ent-fiche__brand img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
/* L'ordinal remplace le « 1. » qui était collé au nom : même procédé que la
liste des domaines en page d'accueil. */
.ent-fiche__rang {
margin: 0 0 0.5rem;
font-family: var(--font-display);
font-size: clamp(1.5rem, 2vw, 2rem);
line-height: 1;
color: var(--rule-strong);
}
/* Les deux pastilles colorées deviennent une ligne de qualification. */
.ent-fiche__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.7rem;
margin: 0 0 0.6rem;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--carmine);
}
.ent-fiche__meta span + span::before {
content: "·";
margin-right: 0.7rem;
color: var(--rule-strong);
}
.ent-fiche__nom {
margin: 0 0 0.75rem;
font-size: clamp(1.5rem, 2.1vw, 2.125rem);
line-height: 1.1;
letter-spacing: -0.015em;
color: var(--ink);
}
.ent-fiche__desc {
margin: 0 0 clamp(1.25rem, 2vw, 1.75rem);
font-size: 0.9375rem;
line-height: 1.55;
color: var(--ink-2);
}
.ent-fiche__label {
margin: 0 0 0.6rem;
font-family: var(--font-alt);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-3);
}
/* Liste filetée plutôt que cochée : la coche rouge répétée douze fois sur la
page était un tic de gabarit, et elle n'apportait aucune information. */
.ent-fiche__liste {
margin: 0 0 clamp(1.25rem, 2vw, 1.75rem);
padding: 0;
list-style: none;
}
.ent-fiche__liste li {
padding: 0.55rem 0;
border-top: 1px solid var(--rule);
font-size: 0.875rem;
line-height: 1.45;
color: var(--ink-2);
}
.ent-fiche__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.65rem;
margin: 0;
}
.ent-fiche__lien {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
min-height: 44px;
padding: 0.7rem 0.95rem;
background: var(--navy);
border: 1px solid var(--navy);
font-family: var(--font-alt);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.035em;
color: #fff;
text-decoration: none;
transition: background-color 0.22s var(--ease), border-color 0.22s var(--ease), color 0.22s var(--ease);
}
.ent-fiche__lien--2 {
background: transparent;
border-color: var(--rule-strong);
color: var(--navy);
}
.ent-fiche__lien i { font-size: 0.75rem; transition: transform 0.25s var(--ease); }
.ent-fiche__lien:hover i { transform: translateX(4px); }
.ent-fiche__lien--2:hover i { transform: translate(2px, -2px); }
.ent-fiche__lien:hover {
background: var(--carmine);
border-color: var(--carmine);
color: #fff;
}
.ent-fiche__lien--2:hover {
background: var(--navy);
border-color: var(--navy);
color: #fff;
}
@media (max-width: 991.98px) {
.ent-fiche { grid-template-columns: 1fr; gap: 1.5rem; }
.ent-fiche__media {
min-height: 0;
aspect-ratio: 4 / 3;
}
}
@media (prefers-reduced-motion: reduce) {
.ent-fiche__media > img,
.ent-fiche__media::after { transition: none; }
.ent-fiche:hover .ent-fiche__media > img { transform: none; }
}
/* ==========================================================================
BANDE DES CHIFFRES — page des entités
==========================================================================
Les quatre chiffres fermaient l'historique en bas de page ; ils ouvrent
désormais la page, juste sous le bandeau. Le filet carmin de 2px qui les
coiffait était une marque de clôture — en tête de page il ferait barrage
entre la photo et le contenu. Un filet gris fin les sépare des fiches. */
.faits-area {
background: var(--paper);
padding: clamp(1.75rem, 3vw, 2.5rem) 0 0;
}
.faits-area .group-facts {
border-top: 0;
padding-top: 0;
padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
border-bottom: 1px solid var(--rule);
}
@media (max-width: 767.98px) {
.faits-area .group-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.5rem; }
}
/* ==========================================================================
CATALOGUE DES FORMATIONS — en-têtes de cycle
==========================================================================
Les trois cycles étaient annoncés par un h3 Bootstrap en bleu gras, étranger
à la page comme au reste du site. Ils reprennent l'idiome des en-têtes de
section : filet carmin, surtitre en capitales, titre en serif d'affichage. */
.catalogue-area {
background: var(--paper);
padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem);
}
.cat-bloc { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.cat-bloc:last-of-type { margin-bottom: 0; }
.cat-head {
margin-bottom: clamp(1.5rem, 2.6vw, 2.25rem);
padding-bottom: clamp(1rem, 1.6vw, 1.25rem);
border-bottom: 1px solid var(--rule);
}
.cat-head__eyebrow {
display: flex;
align-items: center;
gap: 0.75rem;
margin: 0 0 0.75rem;
font-family: var(--font-sans);
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--carmine);
}
.cat-head__eyebrow::before {
content: "";
flex: none;
width: 28px;
height: 1px;
background: currentColor;
}
.cat-head__title {
margin: 0 0 0.6rem;
font-size: clamp(1.625rem, 2.4vw, 2.375rem);
line-height: 1.06;
letter-spacing: -0.015em;
color: var(--ink);
}
.cat-head__lede {
margin: 0;
max-width: 62ch;
font-size: 0.9375rem;
line-height: 1.55;
color: var(--ink-3);
}
/* ==========================================================================
ACTUALITÉS — page d'accueil
==========================================================================
Trois brèves en colonnes filetées, sans carte ni ombre : le même vocabulaire
que le reste de la page. Le contenu et les traductions viennent des clés de
actualites.html, il n'y a donc qu'une source à tenir à jour. */
.actus-area {
background: var(--paper);
padding: clamp(3rem, 6vw, 5rem) 0;
}
.actus-head {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 1rem 2rem;
margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
padding-bottom: clamp(1rem, 1.6vw, 1.25rem);
border-bottom: 1px solid var(--rule);
}
.actus-head__eyebrow {
display: flex;
align-items: center;
gap: 0.75rem;
margin: 0 0 0.6rem;
font-family: var(--font-sans);
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--carmine);
}
.actus-head__eyebrow::before {
content: "";
flex: none;
width: 28px;
height: 1px;
background: currentColor;
}
.actus-head__title {
margin: 0;
font-size: clamp(1.625rem, 2.4vw, 2.375rem);
line-height: 1.06;
letter-spacing: -0.015em;
color: var(--navy);
}
.actus-head__lien {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-family: var(--font-alt);
font-size: 0.8125rem;
font-weight: 600;
color: var(--carmine);
text-decoration: none;
white-space: nowrap;
}
.actus-head__lien i { font-size: 0.75rem; transition: transform 0.25s var(--ease); }
.actus-head__lien:hover i { transform: translateX(4px); }
.actus {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1.75rem, 3.5vw, 3rem);
}
.actu__media {
display: block;
margin-bottom: 1.1rem;
overflow: hidden;
}
.actu__media img {
display: block;
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
transition: transform 0.5s var(--ease);
}
.actu:hover .actu__media img { transform: scale(1.04); }
.actu__meta {
margin: 0 0 0.5rem;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--carmine);
}
.actu__titre {
margin: 0 0 0.6rem;
font-family: var(--font-alt);
font-size: clamp(1rem, 1.25vw, 1.1875rem);
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.015em;
}
.actu__titre a { color: var(--navy); text-decoration: none; }
.actu:hover .actu__titre a { color: var(--carmine); }
.actu__desc {
margin: 0 0 0.9rem;
font-size: 0.875rem;
line-height: 1.55;
color: var(--ink-3);
}
.actu__lien {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: var(--font-alt);
font-size: 0.8125rem;
font-weight: 600;
/* Le carmin est passé sur le survol : la surmention reste lisible sans
poser trois rouges par carte (badge, titre survolé, lien). */
color: var(--ink);
text-decoration: none;
transition: color 0.25s var(--ease);
}
.actu__lien:hover, .actu__lien:focus-visible { color: var(--carmine); }
.actu__lien i { font-size: 0.7rem; transition: transform 0.25s var(--ease); }
.actu__lien:hover i { transform: translateX(4px); }
@media (max-width: 991.98px) {
.actus { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.actus .actu:last-child { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
.actus { grid-template-columns: 1fr; }
.actus .actu:last-child { grid-column: auto; }
}
/* Panneaux du catalogue. Masqués seulement une fois la barre prise en main par
le script : sans JavaScript, les quatre cycles restent lisibles à la suite. */
.cycle-tabs.est-pilote ~ .cat-bloc[data-panneau]:not(.est-actif) { display: none; }
/* ==========================================================================
CANDIDATURE EN LIGNE
==========================================================================
Refonte : la section était restée en utilitaires Bootstrap — pastilles
rouges rondes numérotées, icône WhatsApp verte hors palette, carte à angles
arrondis et ombre. Elle reprend la langue du site : surtitre fileté, titre
en serif, ordinaux gris, panneau à angles vifs. */
/* Filet de clôture : la section des partenariats qui suit porte le même
ivoire, il faut un trait pour marquer la limite. Porté par un pseudo-élément du
conteneur, dont la boîte de contenu fait la largeur utile — posé sur la
section, pleine largeur, il aurait traversé l'écran. */
.cand-area > .container::after {
content: "";
display: block;
height: 1px;
background: var(--rule-strong);
/* Le filet se rapproche du pied de page : il annonce la bascule plutôt que
de clore le formulaire. L'écart au-dessus grandit d'autant. */
margin-top: clamp(3.5rem, 6.5vw, 5.5rem);
}
.cand-area {
/* Même ivoire que la section des partenariats juste au-dessus. Le passage
au fond clair impose de reprendre toutes les couleurs de la section,
réglées jusqu'ici pour du navy. */
background: var(--paper-warm);
padding: clamp(3rem, 6vw, 5rem) 0 clamp(1.25rem, 2.2vw, 1.75rem);
}
.cand-grille {
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
gap: clamp(2.5rem, 5vw, 5rem);
align-items: start;
}
/* ---- Colonne de gauche ---- */
.cand-intro__eyebrow {
display: flex;
align-items: center;
gap: 0.75rem;
/* 14px de marge plus l'interlignage des deux lignes creusaient 19px
optiques entre le surtitre et le titre qu'il annonce. */
margin: 0 0 0.35rem;
line-height: 1.3;
font-family: var(--font-sans);
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--carmine);
}
.cand-intro__eyebrow::before {
content: "";
flex: none;
width: 28px;
height: 1px;
background: currentColor;
}
.cand-intro__titre {
margin: 0 0 1rem;
font-size: clamp(1.75rem, 2.6vw, 2.625rem);
line-height: 1.06;
letter-spacing: -0.015em;
/* Titre tout en bleu : plus d'accent carmin sur « Candidature en Ligne ». */
color: var(--navy);
}
.cand-intro__titre span { color: var(--navy); }
.cand-intro__lede {
margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
max-width: 46ch;
font-size: 0.9375rem;
line-height: 1.6;
color: var(--ink-3);
}
/* Les trois étapes : ordinaux gris et filets, au lieu des pastilles rondes. */
.cand-parcours {
list-style: none;
margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
padding: 0;
}
.cand-parcours li {
display: grid;
grid-template-columns: 2.25rem minmax(0, 1fr);
align-items: baseline;
gap: 0.9rem;
padding: 0.85rem 0;
border-top: 1px solid var(--rule);
font-size: 0.875rem;
line-height: 1.45;
color: var(--ink-2);
}
.cand-parcours__n {
font-family: var(--font-display);
font-size: 1.0625rem;
/* --rule-strong tombait à 1.62:1 sur l'ivoire : lisible en gros corps sur
les fiches d'entité, illisible à 17px ici. */
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
.cand-aide {
margin: 0;
padding-top: clamp(1.25rem, 2.2vw, 1.75rem);
border-top: 1px solid var(--rule);
}
.cand-aide__quoi {
display: block;
/* L'écart de boîte ne faisait que 5px, mais l'interlignage des deux lignes
— 7px pour l'une, 10px pour l'autre — creusait optiquement le double. */
margin-bottom: 0.1rem;
line-height: 1.3;
font-size: 0.75rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-3);
}
.cand-aide__lien {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-alt);
font-size: 1.0625rem;
font-weight: 600;
line-height: 1.25;
color: var(--whatsapp);
text-decoration: none;
}
.cand-aide__lien i { color: var(--whatsapp); }
.cand-aide__lien:hover { color: var(--whatsapp); text-decoration: underline; text-underline-offset: 3px; }
/* ---- Le panneau du formulaire ---- */
.cand-panneau {
background: var(--paper);
border: 1px solid var(--rule);
padding: clamp(1.75rem, 3vw, 2.5rem);
}
.cand-panneau__titre {
margin: 0 0 0.4rem;
font-family: var(--font-display);
font-size: clamp(1.25rem, 1.7vw, 1.5rem);
line-height: 1.2;
color: var(--ink);
}
.cand-panneau__note {
margin: 0 0 clamp(1.5rem, 2.4vw, 2rem);
font-size: 0.8125rem;
line-height: 1.5;
color: var(--ink-3);
}
/* Les huit champs se répartissent en deux étapes nommées : on sait ce qu'on
remplit et où l'on en est, au lieu d'affronter huit cases d'un bloc. */
/* Groupe et titre plutôt que fieldset et legend : la légende d'un fieldset
n'est pas un enfant de grille ordinaire, elle occupait une cellule au lieu
de couvrir la rangée et décalait tous les champs. */
.cand-etape { border: 0; margin: 0 0 clamp(1.5rem, 2.4vw, 2rem); padding: 0; }
.cand-etape:last-of-type { margin-bottom: clamp(1.75rem, 2.8vw, 2.25rem); }
.cand-etape__titre {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 0.6rem;
margin: 0 0 0.35rem;
padding: 0 0 0.65rem;
border-bottom: 1px solid var(--rule);
font-family: var(--font-alt);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-2);
}
.cand-etape__n {
font-family: var(--font-display);
font-size: 0.9375rem;
color: var(--carmine);
}
.cand-etape { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 1rem; }
.cand-groupe { margin: 0; min-width: 0; }
.cand-etiquette {
display: block;
margin-bottom: 0.35rem;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-3);
}
.cand-champ {
display: block;
width: 100%;
padding: 0.7rem 0.85rem;
font-family: var(--font-sans);
font-size: 0.9375rem;
color: var(--ink);
background: var(--paper);
border: 1px solid var(--rule-strong);
border-radius: 0;
transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.cand-champ:focus {
outline: none;
border-color: var(--carmine);
box-shadow: 0 0 0 3px rgba(178, 31, 42, 0.12);
}
.cand-champ::placeholder { color: var(--rule-strong); }
select.cand-champ { appearance: none; background-image: none; padding-right: 2rem; cursor: pointer; }
.cand-envoi {
display: flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
width: 100%;
padding: 0.95rem 1.25rem;
background: var(--carmine);
border: 0;
color: #fff;
font-family: var(--font-alt);
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
transition: background-color 0.22s var(--ease);
}
.cand-envoi:hover { background: var(--carmine-dark); }
.cand-envoi i { font-size: 0.8125rem; transition: transform 0.25s var(--ease); }
.cand-envoi:hover i { transform: translateX(4px); }
@media (max-width: 991.98px) {
.cand-grille { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
.cand-etape { grid-template-columns: 1fr; }
}
/* ---- Page dédiée : le même panneau, seul au centre ---------------------- */
/* Le formulaire de cette page était resté au gabarit Bootstrap — en-têtes
`h5 text-primary` avec icône, `form-control` arrondis, encart `bg-light`,
bouton pilule. Il reprend maintenant le panneau de la page d'accueil, dont
les titres d'étape sont en Raleway. */
.cand-page {
background: var(--paper-warm);
padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem);
}
.cand-page .cand-panneau {
max-width: 54rem;
margin: 0 auto;
}
.cand-page .cand-etape__titre {
/* Le titre d'étape porte la structure sur une page qui n'a que ça :
un cran au-dessus du panneau de la page d'accueil. */
font-size: 0.8125rem;
margin-bottom: 0.9rem;
padding-bottom: 0.75rem;
}
.cand-page .cand-etape__n { font-size: 1.0625rem; }
/* L'étape de validation n'a qu'un seul contrôle : il occupe la rangée. */
.cand-etape--plein { grid-template-columns: minmax(0, 1fr); }
.cand-accord {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: 0.7rem;
margin: 0;
}
.cand-accord label {
font-size: 0.8125rem;
line-height: 1.55;
color: var(--ink-2);
}
.cand-case {
width: 1rem;
height: 1rem;
margin: 0.2rem 0 0;
accent-color: var(--carmine);
flex: none;
}
.cand-panneau__pied {
margin: clamp(1.25rem, 2vw, 1.5rem) 0 0;
padding-top: clamp(1rem, 1.8vw, 1.25rem);
border-top: 1px solid var(--rule);
font-size: 0.75rem;
line-height: 1.55;
color: var(--ink-3);
}
/* ==========================================================================
PAGE DES CAMPUS — SOMMAIRE ET FICHES
==========================================================================
Les deux sections qui suivaient le bandeau venaient du gabarit d'origine :
une carte SVG faite de deux quadrilatères qui ne ressemblaient à aucune
frontière, puis cinq cartes arrondies à ombre portée, pastilles rouges,
vertes et bleues, et boutons pilules. Rien de tout cela n'existe ailleurs
sur le site depuis la refonte. On reprend ici la langue des fiches
d'entité : filets fins, ordinal gris, qualification en capitales carmin,
liens texte.
========================================================================== */
.camp-index {
padding: clamp(2.75rem, 5vw, 4.5rem) 0;
}
.camp-index__grille {
display: grid;
grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
gap: clamp(2rem, 4vw, 4.5rem);
align-items: start;
}
.camp-index__eyebrow {
display: flex;
align-items: center;
gap: 0.75rem;
margin: 0 0 0.35rem;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--red-on-dark);
}
.camp-index__eyebrow::before {
content: "";
width: 28px;
height: 1px;
background: currentColor;
flex: none;
}
.camp-index__titre {
margin: 0 0 0.9rem;
font-size: clamp(1.625rem, 2.6vw, 2.375rem);
line-height: 1.08;
letter-spacing: -0.015em;
color: #fff;
}
.camp-index__texte {
margin: 0;
font-size: 0.9375rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.78);
}
.camp-index__liste {
margin: 0;
padding: 0;
list-style: none;
}
/* Le filet du haut ferme la première ligne : sans lui, la colonne commençait
dans le vide alors que la colonne de gauche commence sur un surtitre. */
.camp-index__liste > li:first-child .camp-index__ligne { border-top: 1px solid var(--navy-line); }
.camp-index__ligne {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto auto;
align-items: baseline;
gap: 0 clamp(0.85rem, 1.6vw, 1.5rem);
padding: clamp(0.85rem, 1.5vw, 1.1rem) 0;
border-bottom: 1px solid var(--navy-line);
text-decoration: none;
transition: background 0.2s var(--ease);
}
.camp-index__ligne:hover,
.camp-index__ligne:focus-visible {
background: rgba(255, 255, 255, 0.06);
}
.camp-index__n {
font-family: var(--font-display);
font-size: 1rem;
/* 0.42 donnait 3.68:1 à 16px — sous le seuil AA. Même erreur que les
ordinaux des entités : un gris calibré pour du grand corps. */
color: rgba(255, 255, 255, 0.55);
}
.camp-index__ville {
font-family: var(--font-alt);
font-size: clamp(1rem, 1.3vw, 1.1875rem);
font-weight: 600;
letter-spacing: -0.012em;
color: #fff;
}
.camp-index__meta {
font-size: 0.75rem;
letter-spacing: 0.02em;
color: rgba(255, 255, 255, 0.66);
text-align: right;
}
.camp-index__ligne i {
font-size: 0.7rem;
color: var(--red-on-dark);
transition: transform 0.25s var(--ease);
}
.camp-index__ligne:hover i { transform: translateX(4px); }
@media (max-width: 991.98px) {
.camp-index__grille { grid-template-columns: 1fr; gap: 1.75rem; }
}
@media (max-width: 575.98px) {
/* La qualification passe sous la ville plutôt que d'être écrasée à droite. */
.camp-index__ligne { grid-template-columns: auto minmax(0, 1fr) auto; }
.camp-index__meta {
grid-column: 2 / -1;
text-align: left;
margin-top: 0.2rem;
}
}
/* --- Les cinq fiches ---------------------------------------------------- */
.camp-area {
background: var(--paper);
padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(3rem, 6vw, 5.5rem);
}
.camp-fiche {
display: grid;
grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
gap: clamp(2rem, 4vw, 4rem);
align-items: start;
padding: clamp(2.25rem, 4vw, 3.5rem) 0;
border-top: 1px solid var(--rule);
scroll-margin-top: calc(var(--header-h, 128px) + 1rem);
}
.camp-fiche:first-child { border-top: 0; padding-top: 0; }
.camp-fiche__media { margin: 0; overflow: hidden; }
.camp-fiche__media img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.camp-fiche__rang {
margin: 0 0 0.5rem;
font-family: var(--font-display);
font-size: clamp(1.5rem, 2vw, 2rem);
line-height: 1;
color: var(--rule-strong);
}
.camp-fiche__meta {
margin: 0 0 0.6rem;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--carmine);
}
.camp-fiche__nom {
margin: 0 0 0.75rem;
font-size: clamp(1.5rem, 2.1vw, 2.125rem);
line-height: 1.1;
letter-spacing: -0.015em;
color: var(--navy);
}
.camp-fiche__desc {
margin: 0 0 clamp(1.25rem, 2vw, 1.75rem);
font-size: 0.9375rem;
line-height: 1.55;
color: var(--ink-2);
}
.camp-fiche__liste {
margin: 0 0 clamp(1.25rem, 2vw, 1.75rem);
padding: 0;
list-style: none;
}
.camp-fiche__liste li {
padding: 0.55rem 0;
border-top: 1px solid var(--rule);
font-size: 0.875rem;
line-height: 1.45;
color: var(--ink-2);
}
.camp-fiche__actions { margin: 0; }
.camp-fiche__lien,
.camp-tuile__lien {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-family: var(--font-alt);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--carmine);
text-decoration: none;
}
.camp-fiche__lien i,
.camp-tuile__lien i { font-size: 0.75rem; transition: transform 0.25s var(--ease); }
.camp-fiche__lien:hover i,
.camp-tuile__lien:hover i { transform: translateX(4px); }
/* --- Les trois campus régionaux ---------------------------------------- */
.camp-grille {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1.75rem, 3.5vw, 3rem);
padding-top: clamp(2.25rem, 4vw, 3.5rem);
border-top: 1px solid var(--rule);
}
.camp-tuile { scroll-margin-top: calc(var(--header-h, 128px) + 1rem); }
.camp-tuile__media { margin: 0 0 1.1rem; overflow: hidden; }
.camp-tuile__media img {
display: block;
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
}
.camp-tuile__meta {
margin: 0 0 0.5rem;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--carmine);
}
.camp-tuile__nom {
margin: 0 0 0.6rem;
font-family: var(--font-alt);
font-size: clamp(1rem, 1.25vw, 1.1875rem);
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.015em;
color: var(--navy);
}
.camp-tuile__desc {
margin: 0 0 0.9rem;
font-size: 0.875rem;
line-height: 1.55;
color: var(--ink-3);
}
.camp-tuile__liste {
margin: 0 0 1rem;
padding: 0;
list-style: none;
}
.camp-tuile__liste li {
padding: 0.5rem 0;
border-top: 1px solid var(--rule);
font-size: 0.8125rem;
line-height: 1.45;
color: var(--ink-2);
}
@media (max-width: 991.98px) {
.camp-fiche { grid-template-columns: 1fr; gap: 1.5rem; }
.camp-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
.camp-grille { grid-template-columns: 1fr; }
}
/* ==========================================================================
PAGE DE CONTACT
==========================================================================
Les coordonnées étaient cinq pastilles rondes rouges empilées dans une
carte arrondie à ombre portée, et le formulaire une seconde carte du même
genre. Ici : liste filetée à gauche, panneau de formulaire identique à
celui des candidatures à droite.
========================================================================== */
.ct-area {
background: var(--paper-warm);
padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem);
}
.ct-grille {
display: grid;
grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
gap: clamp(2rem, 4vw, 4rem);
align-items: start;
}
.ct-coord__titre {
margin: 0 0 clamp(1.25rem, 2vw, 1.75rem);
font-size: clamp(1.375rem, 1.9vw, 1.75rem);
line-height: 1.15;
letter-spacing: -0.015em;
color: var(--navy);
}
.ct-liste { margin: 0; }
.ct-ligne {
display: grid;
gap: 0.3rem;
padding: clamp(0.85rem, 1.5vw, 1.1rem) 0;
border-top: 1px solid var(--rule);
}
.ct-ligne:first-child { border-top: 1px solid var(--rule-strong); }
.ct-ligne dt {
font-family: var(--font-alt);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-3);
}
.ct-ligne dd {
margin: 0;
font-size: 0.9375rem;
line-height: 1.6;
color: var(--ink-2);
}
.ct-ligne dd a { color: var(--ink); text-decoration: none; }
.ct-ligne dd a:hover { color: var(--carmine); }
.ct-whatsapp {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-family: var(--font-alt);
font-weight: 600;
color: var(--whatsapp) !important;
}
.ct-whatsapp:hover { color: var(--whatsapp) !important; text-decoration: underline; text-underline-offset: 3px; }
.ct-note {
display: block;
margin-top: 0.15rem;
font-size: 0.75rem;
color: var(--ink-3);
}
.ct-fondateur {
margin: clamp(1.25rem, 2vw, 1.75rem) 0 0;
padding-top: clamp(1rem, 1.6vw, 1.25rem);
border-top: 1px solid var(--rule-strong);
font-size: 0.8125rem;
color: var(--ink-3);
}
.ct-fondateur strong { color: var(--ink); }
/* Le panneau reprend celui des candidatures ; seule la grille du bloc de
champs change, le message occupant toute la largeur. */
.ct-panneau .cand-etape { margin-bottom: clamp(1.5rem, 2.4vw, 2rem); }
.cand-groupe--plein { grid-column: 1 / -1; }
textarea.cand-champ { resize: vertical; min-height: 8rem; line-height: 1.55; }
/* Réponse du formulaire dans la page, à la place de la modale bloquante. */
.ct-retour {
margin: 0 0 1.25rem;
padding: 0.85rem 1rem;
border-left: 3px solid;
font-size: 0.875rem;
line-height: 1.5;
}
.ct-retour--succes { border-color: var(--whatsapp); background: rgba(7, 94, 84, 0.06); color: var(--ink); }
.ct-retour--erreur { border-color: var(--carmine); background: rgba(178, 31, 42, 0.06); color: var(--ink); }
@media (max-width: 991.98px) {
.ct-grille { grid-template-columns: 1fr; }
}
/* ==========================================================================
PAGE DES ACTUALITÉS
==========================================================================
La page reprenait à l'identique les trois cartes de l'accueil : elle
n'apportait rien de plus. Le premier sujet passe en tête d'affiche, les
deux autres suivent dans les tuiles déjà définies pour l'accueil.
========================================================================== */
.actus-page {
background: var(--paper);
padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5.5rem);
}
.actu-une {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
gap: clamp(2rem, 4vw, 3.5rem);
align-items: center;
padding-bottom: clamp(2.25rem, 4vw, 3.5rem);
margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
border-bottom: 1px solid var(--rule-strong);
}
.actu-une__media { margin: 0; overflow: hidden; }
.actu-une__media img {
display: block;
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
transition: transform 0.5s var(--ease);
}
.actu-une:hover .actu-une__media img { transform: scale(1.03); }
.actu-une__meta {
margin: 0 0 0.6rem;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--carmine);
}
.actu-une__titre {
margin: 0 0 0.9rem;
font-size: clamp(1.5rem, 2.4vw, 2.25rem);
line-height: 1.1;
letter-spacing: -0.015em;
}
.actu-une__titre a { color: var(--navy); text-decoration: none; }
.actu-une:hover .actu-une__titre a { color: var(--carmine); }
.actu-une__desc {
margin: 0 0 clamp(1.1rem, 1.8vw, 1.5rem);
font-size: 0.9375rem;
line-height: 1.6;
color: var(--ink-2);
}
/* Deux sujets seulement sous la tête d'affiche : la grille de trois de
l'accueil laisserait une colonne vide. */
.actus--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 991.98px) {
.actu-une { grid-template-columns: 1fr; gap: 1.5rem; }
}
@media (max-width: 767.98px) {
.actus--2 { grid-template-columns: 1fr; }
}
/* ==========================================================================
MISE AU POINT MOBILE
==========================================================================
Relevé fait sur les 11 pages à 390px : aucun débordement horizontal, mais
deux familles de défauts revenaient partout.
1. Les micro-libellés en capitales tombaient entre 10 et 11px. Calibrés
pour un écran de bureau où la ligne est longue, ils deviennent pénibles
à lire sur téléphone.
2. Les liens d'action isolés ne faisaient que 16 à 22px de haut. Le seuil
confortable au doigt est de 44px : on ajoute la hauteur en rembourrage
vertical, sans changer la typographie ni l'aspect au repos.
========================================================================== */
@media (max-width: 767.98px) {
/* --- 1. Les micro-libellés remontent à 12px --------------------------- */
.entity-badge,
.entity-cycle,
.entity-nav__label,
.dept-level,
.corridor__meta,
.campus-panel__eyebrow,
.actu__meta,
.actu-une__meta,
.camp-index__eyebrow,
.camp-tuile__meta,
.camp-fiche__meta,
.ent-fiche__meta,
.entity-facts__k,
.prog-group__count,
.prog-code,
.prog-meta,
.cand-etiquette,
.ct-ligne dt,
.copyright-wrap p,
.header-top__contact a {
font-size: 0.75rem;
}
/* Le crénage des capitales se resserre quand le corps monte, sinon les
libellés longs passent sur deux lignes là où ils tenaient sur une. */
.entity-badge,
.entity-cycle,
.actu__meta,
.actu-une__meta,
.camp-tuile__meta,
.camp-fiche__meta,
.ent-fiche__meta,
.camp-index__eyebrow { letter-spacing: 0.1em; }
/* --- 2. Les liens d'action atteignent 44px de haut -------------------- */
.ruban__lien,
.dept-row__cta,
.actus-head__lien,
.actu__lien,
.cand-aide__lien,
.ent-fiche__lien,
.camp-fiche__lien,
.camp-tuile__lien,
.entity-fields__link,
.ct-whatsapp,
.partners__onglet,
.footer-link ul li a,
.f-contact a,
.copyright-wrap a {
min-height: 44px;
display: inline-flex;
align-items: center;
}
/* Le remboursement de hauteur ne doit pas rouvrir les écarts qu'on a
resserrés : la marge basse des blocs concernés se réduit d'autant. */
.ruban__lede { margin-bottom: 0; }
.actu__desc, .actu-une__desc { margin-bottom: 0.35rem; }
.ent-fiche__liste, .camp-fiche__liste { margin-bottom: 0.5rem; }
/* La case à cocher de consentement : 16px est sous le seuil, et c'est le
seul contrôle de son étape. */
.cand-case { width: 1.25rem; height: 1.25rem; margin-top: 0.1rem; }
.cand-accord label { min-height: 44px; display: flex; align-items: center; }
/* Les onglets des partenariats servent de navigation : ils doivent se
toucher aussi facilement qu'un bouton. */
.partners__onglet { padding-top: 0.5rem; padding-bottom: 0.5rem; }
/* Second passage : les libellés que le premier relevé n'avait pas
rattrapés, faute de classe propre ou parce qu'ils vivent dans le
gabarit d'origine. */
.corridor__border span,
.founder-media figcaption,
.f-widget-title h2,
.page-head__crumbs { font-size: 0.75rem; }
/* Le fil d'Ariane reste une navigation secondaire : on lui donne de quoi
être touché sans en faire une barre de boutons. */
.page-head__crumbs a { display: inline-block; padding: 0.4rem 0; }
/* Le lien du logo était en flux inline : sa boîte cliquable faisait la
hauteur d'une ligne, pas celle de l'image qu'il entoure. */
.logo a { display: inline-block; }
/* Réseaux sociaux et arrêts du corridor : 37 et 38px, juste sous le seuil. */
.footer-social a { width: 44px; height: 44px; }
.corridor__stop { min-height: 44px; }
}
/* --- 3. Le bandeau principal reste pilotable au doigt --------------------
Sous 992px, `d-none d-lg-flex` masquait toute la colonne de droite : les
trois diapositives défilaient sans qu'on puisse les parcourir ni même
savoir qu'il y en avait plusieurs. On rend les flèches, pas les vignettes,
qui coûteraient trop de hauteur sur un écran de téléphone. */
@media (max-width: 991.98px) {
.hero__side.d-none { display: flex !important; }
.hero__nav { display: none; }
.hero__arrows {
order: 0;
justify-content: flex-start;
margin-top: 0.25rem;
}
.hero__arrow { width: 48px; height: 48px; }
}