/* Reset */ * { margin: 0; padding: 0; } *, *::before, *::after { box-sizing: border-box; } /* Variables */ :root{ --accent-color:#7b61ff; --text-color:#ffffff; --header-bg: rgba(0,0,0,.9); --card-bg:rgba(255,255,255,.08); --card-border:rgba(255,255,255,.2); } /* Base */ html, body{ background:#000; color:var(--text-color); font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif; line-height:1.6; } /* Fond image discret (identique au comportement d'avant) */ .page-formation { position: relative; min-height: 100vh; /* ✅ fix : valeur positive */ } /* APRÈS */ .page-formation::before { content: ""; position: fixed; left: 0; right: 0; bottom: 0; top: -600px; /* = hauteur du header (mets 148px si c’est ta valeur) */ background: url("../img/fond_formation.jpg") center top / cover no-repeat; /* image alignée en haut */ opacity: .2; z-index: 0; /* ne passe plus derrière le fond */ pointer-events: none; } /* Sur mobile, si le header n’est pas fixe ou est plus petit, on remet à 0 */ @media (max-width: 768px){ .page-formation::before { top: 0; } } /* Pas d’overlay au-dessus */ .page-formation::after { display: none; } /* ====== Contenu principal ====== */ .main-content{ max-width: 1200px; margin: 0 auto; padding: 148px 20px 60px; /* sous header fixe */ } .page-title{ text-align:center; font-size:3rem; font-weight:700; margin-bottom: 4rem; color:var(--text-color); text-shadow:2px 2px 4px rgba(0,0,0,.8); opacity:0; transform:translateY(20px); animation:fadeInUp .8s ease forwards; } /* Timeline en zigzag */ .timeline{ position:relative; width:100%; margin:-250px auto; padding-top:var(--timeline-top-offset,0px); } .timeline::before{ content:""; position:absolute; top:230px; bottom:-150px; left:50%; width:3px; background:#fff; transform:translateX(-50%); box-shadow:0 0 10px rgba(255,255,255,.3); } .timeline-item{ position:relative; margin:40px 0; opacity:0; transform:translateY(30px); animation:fadeInUp .6s ease forwards; } .timeline-item:nth-child(1){ animation-delay:.2s; } .timeline-item:nth-child(2){ animation-delay:.4s; } .timeline-item:nth-child(3){ animation-delay:.6s; } .timeline-item:nth-child(4){ animation-delay:.8s; } .timeline-item:nth-child(5){ animation-delay:1s; } @keyframes fadeInUp{ to{ opacity:1; transform:translateY(0); } } .timeline-point{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:20px; height:20px; background:#fff; border-radius:50%; z-index:2; box-shadow:0 0 0 4px rgba(255,255,255,.2); transition:all .3s ease; } .timeline-item:hover .timeline-point{ background:var(--accent-color); box-shadow:0 0 0 6px rgba(123,97,255,.3); transform:translate(-50%,-50%) scale(1.2); } .timeline-item.left .timeline-line, .timeline-item.right .timeline-line{ position:absolute; left:50%; top:50%; width:140px; height:3px; background:#fff; transition:all .3s ease; } .timeline-item.left .timeline-line{ transform:translate(-100%,-50%); } .timeline-item.right .timeline-line{ transform:translateY(-50%); } .timeline-item:hover .timeline-line{ background:var(--accent-color); box-shadow:0 0 8px rgba(123,97,255,.4); } /* Cartes */ .timeline-card{ position:relative; background:var(--card-bg); border:1px solid var(--card-border); padding:20px 24px; border-radius:12px; color:#fff; width:min(700px, calc(50vw - 180px)); transition:all .3s ease; text-align:left; } .timeline-item.left .timeline-card{ margin-left: calc(50% - 90px - min(700px, calc(50vw - 180px))); } .timeline-item.right .timeline-card{ margin-left: calc(50% + 100px); } .timeline-card:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.25); background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.3); } /* En-tête carte */ .card-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; } .school-name{ font-weight:600; font-size:1.85rem; text-align:left; } .school-logo{ max-height:120px; width:auto; } .school-logo-dalzon{ max-height:80px; width:auto; } .formation-title{ margin:0 0 8px; font-size:1.2rem; font-weight:600; color:var(--text-color); text-shadow:1px 1px 2px rgba(0,0,0,.5); } .formation-description{ margin:0 0 12px; line-height:1.55; opacity:.95; color:rgba(255,255,255,.9); font-size:.9rem; text-align:left; } .formation-details{ display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:.5rem; } .institution{ color:var(--accent-color); font-weight:600; font-size:.85rem; } .year{ color:rgba(255,255,255,.7); font-weight:500; background:rgba(255,255,255,.1); padding:.3rem .8rem; border-radius:12px; border:1px solid rgba(255,255,255,.2); font-size:.8rem; margin-bottom:.5rem; } .accent{ color:var(--accent-color); text-decoration:underline; } /* Responsive */ @media (max-width: 768px){ .main-content{ padding: 20px 15px 40px; } .page-title{ font-size:2.5rem; margin-bottom:3rem; } .timeline{ margin:40px auto; } .timeline-item{ margin:40px 0; } /* Empiler et contraindre les cartes sans débordement à droite */ .timeline-card{ width:100%; max-width:100%; margin:0 auto !important; text-align:left !important; padding:16px 16px; } .timeline-item.left .timeline-line, .timeline-item.right .timeline-line{ display:none; } .timeline-point, .point-connector{ display:none !important; } .timeline::before{ display:none; } .card-header{ flex-direction:column; align-items:flex-start; gap:8px; } .school-logo{ max-height:36px; } .tl-logo{ float:left !important; margin-right:12px !important; margin-left:0 !important; } .formation-title{ font-size:1rem; } .formation-description{ font-size:.85rem; } .formation-details{ flex-direction:column; align-items:flex-start; gap:.3rem; } } @media (max-width: 480px){ .page-title{ font-size:2rem; } .timeline-card{ width:100%; max-width:100%; padding:14px 14px; } .formation-title{ font-size:.95rem; } .formation-description{ font-size:.8rem; } } /* Honneurs */ .honor-details{ display:flex; justify-content:flex-start; align-items:center; flex-wrap:wrap; gap:.5rem; } .honor-details .year{ color:#d4af37; margin-bottom:.5rem; } /* ===== Header formation (copie conforme de Compétences) ===== */ .page-formation .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 2000; width: 100%; background: var(--header-bg, rgba(0, 0, 0, 0.9)); border-bottom: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: saturate(1.05) blur(4px); } .page-formation .header-nav { max-width: 1400px; margin: 0 auto; padding: 0 20px; display: grid; align-items: center; gap: 16px; grid-template-columns: auto 1fr auto auto; height: 45px; min-height: 45px; } .page-formation .logo { color: var(--text-color); text-decoration: none; font-weight: 800; letter-spacing: 0.2px; font-size: 1.05rem; white-space: nowrap; line-height: 45px; transition: color 0.2s ease; } .page-formation .logo:hover, .page-formation .logo:focus-visible { color: var(--accent-color, #7b61ff); } .page-formation .nav-menu { list-style: none; display: flex; gap: 22px; white-space: nowrap; justify-self: end; min-width: 0; } /* Harmonisation header mobile (hauteur + alignement logo) */ @media (max-width: 900px) { .page-formation .logo { font-size: 1.2rem; } } .page-formation .nav-menu a { position: relative; display: inline-block; color: var(--text-color); text-decoration: none; font-weight: 600; letter-spacing: 0.2px; padding-bottom: 0; line-height: 45px; border-bottom: 2px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; outline: none; } .page-formation .nav-menu a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--accent-color); transition: width 0.22s ease; } .page-formation .nav-menu a:hover::after, .page-formation .nav-menu a:focus-visible::after { width: 100%; } .page-formation .nav-menu a.is-active { border-bottom: 2px solid var(--accent-color); } .page-formation .nav-menu a.is-active:hover, .page-formation .nav-menu a.is-active:focus { border-bottom-color: transparent; } .page-formation .nav-menu a.is-active:hover::after, .page-formation .nav-menu a.is-active:focus::after { width: 0; opacity: 0; } /* Toggle (même géométrie) */ .page-formation .lang-toggle { --w: 96px; --h: 24px; --pad: 4px; --thumb-w: 48px; --thumb-h: 22px; --thumb-left-fr: 0px; --thumb-left-en: 48px; --fr-x: 0px; --en-x: -4px; position: static; top: auto; right: auto; z-index: auto; width: var(--w); height: var(--h); background: #000; border-radius: 999px; overflow: hidden; cursor: pointer; border: px solid #fff; opacity: 1; justify-self: end; margin-left: 12px; } .page-formation .lang-track { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--pad); } .page-formation .lang-seg { flex: 0 0 calc(50% - var(--pad)); display: flex; align-items: center; justify-content: center; font-size: 0.95rem; font-weight: 700; color: #fff; z-index: 2; user-select: none; pointer-events: none; line-height: 1; } .page-formation .seg-fr { transform: translateX(var(--fr-x)); } .page-formation .seg-en { transform: translateX(var(--en-x)); } .page-formation .lang-thumb { position: absolute; top: 50%; left: var(--thumb-left-fr); width: var(--thumb-w); height: var(--thumb-h); transform: translateY(-50%); background: rgba(255,255,255,0.1); border-radius: 999px; box-shadow: 0 0 0 2px #fff; transition: left 220ms ease; pointer-events: none; z-index: 1; } .page-formation .lang-thumb::before { content: ""; position: absolute; inset: 3px; border-radius: 999px; background: rgba(0,0,0,0.1); transition: background 220ms ease; } .page-formation .lang-toggle.is-en .lang-thumb { left: var(--thumb-left-en); }