/*
* spacing-fix.css
* Fichier de correction d'espacement — Portfolio Kerim Koca
* À charger EN DERNIER dans , après tous les autres CSS
*
* Convention de variables d'espacement :
* --sp-xs = 0.5rem ( 8px) — micro-espaces, icônes, tags
* --sp-sm = 1rem ( 16px) — espacement intra-composant
* --sp-md = 1.5rem ( 24px) — espacement entre éléments proches
* --sp-lg = 2.5rem ( 40px) — espacement entre blocs
* --sp-xl = 4rem ( 64px) — espacement entre sections
* --sp-xxl = 6rem ( 96px) — grandes sections (hero, etc.)
*/
/* ============================================================
0. VARIABLES GLOBALES D'ESPACEMENT
============================================================ */
:root {
--sp-xs : 0.5rem;
--sp-sm : 1rem;
--sp-md : 1.5rem;
--sp-lg : 2.5rem;
--sp-xl : 4rem;
--sp-xxl : 6rem;
}
/* ============================================================
1. SECTIONS — padding vertical uniforme
============================================================ */
/* Toutes les sections reçoivent le même rythme */
section {
padding-top : var(--sp-xxl);
padding-bottom : var(--sp-xxl);
}
/* Section hero : un peu plus généreuse en haut (logo/nav) */
#accueil {
padding-top : calc(var(--sp-xxl) + 4rem); /* compense le header fixe */
padding-bottom : var(--sp-xxl);
}
/* Sections légères qui n'ont pas besoin d'autant d'air */
#cv {
padding-top : var(--sp-xl);
padding-bottom : var(--sp-xl);
}
/* ============================================================
2. TITRES DE SECTIONS — espace sous le titre unifié
============================================================ */
.section-title {
margin-bottom : var(--sp-lg);
}
/* ============================================================
3. SECTION À PROPOS
============================================================ */
.about-content {
gap : var(--sp-lg);
}
.about-text p {
margin-bottom : var(--sp-md);
}
.about-text p:last-child {
margin-bottom : 0;
}
.about-text .highlight-box {
margin-top : var(--sp-md);
margin-bottom : var(--sp-md);
}
.highlight-box h3 {
margin-bottom : var(--sp-sm);
}
.highlight-box p {
margin-bottom : 0;
}
/* ============================================================
4. SECTION ENTREPRISE
============================================================ */
.entreprise-intro {
margin-bottom : var(--sp-lg);
}
.entreprise-intro p {
margin-bottom : 0;
}
.entreprise-grid {
gap : var(--sp-md);
margin-bottom : 0; /* on retire les margin inline sur l'élément */
}
/* On cible le deuxième grid via sibling */
.entreprise-grid + .entreprise-grid {
margin-top : var(--sp-lg);
}
.entreprise-card {
padding : var(--sp-lg);
}
.entreprise-card h3 {
margin-bottom : var(--sp-sm);
}
.entreprise-card p,
.entreprise-card ul {
margin-bottom : 0;
}
.entreprise-card ul {
padding-left : var(--sp-md);
}
.entreprise-card li {
margin-bottom : var(--sp-xs);
}
.entreprise-card li:last-child {
margin-bottom : 0;
}
/* ============================================================
5. SECTION BTS SIO
============================================================ */
.bts-grid {
gap : var(--sp-md);
}
.bts-card {
padding : var(--sp-lg);
}
.bts-card h3 {
margin-bottom : var(--sp-sm);
}
.bts-card p {
margin-bottom : var(--sp-sm);
}
.bts-card p:last-child {
margin-bottom : 0;
}
/* ============================================================
6. SECTION PARCOURS / TIMELINE
============================================================ */
.timeline {
gap : 0; /* la séparation se fait via les items */
}
.timeline-item {
padding-bottom : var(--sp-lg);
margin-bottom : var(--sp-lg);
}
.timeline-item:last-child {
padding-bottom : 0;
margin-bottom : 0;
}
.timeline-item h3 {
margin-bottom : var(--sp-xs);
}
.timeline-item .date {
margin-bottom : var(--sp-sm);
}
.timeline-item p:last-child {
margin-bottom : 0;
}
/* ============================================================
7. SECTION COMPÉTENCES
============================================================ */
.skills-grid {
gap : var(--sp-md);
}
.skill-category {
padding : var(--sp-md);
}
.skill-category h3 {
margin-bottom : var(--sp-sm);
}
.skill-tag {
margin : calc(var(--sp-xs) / 2);
display : inline-block;
}
/* ============================================================
8. SECTION PROJETS
============================================================ */
/* Sous-titres Académiques / Personnels */
#projets > .container > div > h3 {
margin-bottom : var(--sp-lg);
}
/* Séparation entre les deux groupes */
#projets > .container > div:first-of-type {
margin-bottom : var(--sp-xxl);
}
.projects-grid {
gap : var(--sp-md);
}
.project-card {
display : flex;
flex-direction : column;
}
.project-content {
display : flex;
flex-direction : column;
flex : 1;
padding : var(--sp-lg);
gap : 0;
}
.project-content h3 {
margin-bottom : var(--sp-sm);
}
/* Le paragraphe description occupe tout l'espace disponible → cards de même hauteur */
.project-content p {
flex : 1;
margin-bottom : var(--sp-md);
/* On RETIRE tous les
de hack de hauteur via le HTML — ici on les cache si
le dev ne peut pas modifier le HTML pour le moment */
}
/* Suppression des
parasites dans les project-content */
.project-content br {
display : none;
}
.project-links {
margin-top : auto;
}
.project-link {
/* cohérence du bouton */
display : inline-block;
}
/* ============================================================
9. SECTION VEILLE TECHNOLOGIQUE
============================================================ */
.veille-intro {
margin-bottom : var(--sp-lg);
}
.veille-intro p {
margin-bottom : 0;
}
.veille-grid-java {
gap : var(--sp-md);
margin-bottom : var(--sp-xl);
}
.veille-card-java {
padding : var(--sp-lg);
display : flex;
flex-direction : column;
gap : 0;
}
.card-badge {
margin-bottom : var(--sp-sm);
align-self : flex-start;
}
.card-title {
margin-bottom : var(--sp-md);
}
.card-content {
flex : 1;
display : flex;
flex-direction: column;
gap : var(--sp-md);
margin-bottom : var(--sp-md);
}
.card-why,
.card-impact {
/* pas de gap supplémentaire, géré par .card-content */
}
.card-why h4,
.card-impact h4 {
margin-bottom : var(--sp-sm);
}
.card-why p,
.card-impact p {
margin-bottom : 0;
}
.card-impact ul {
padding-left : var(--sp-md);
margin-bottom : 0;
}
.card-impact li {
margin-bottom : var(--sp-xs);
}
.card-impact li:last-child {
margin-bottom : 0;
}
.card-source {
margin-top : auto;
padding-top : var(--sp-sm);
border-top : 1px solid rgba(255, 255, 255, 0.1);
}
/* Sources */
.veille-sources {
margin-bottom : var(--sp-xl);
}
.veille-sources h3 {
margin-bottom : var(--sp-md);
}
.sources-container {
gap : var(--sp-lg);
}
.sources-list {
padding-left : var(--sp-md);
margin-bottom : 0;
}
.sources-list li {
margin-bottom : var(--sp-sm);
}
.sources-list li:last-child {
margin-bottom : 0;
}
/* Footer veille */
.veille-footer {
/* pas de margin-top supplémentaire, le gap du parent suffit */
}
.result-card {
padding : var(--sp-lg);
}
.result-card h4 {
margin-bottom : var(--sp-sm);
}
.result-card p {
margin-bottom : 0;
}
/* ============================================================
10. SECTION CV
============================================================ */
.cv-container {
display : flex;
flex-direction : column;
align-items : center;
gap : var(--sp-lg);
}
.cv-container > p {
margin-bottom : 0;
}
/* ============================================================
11. SECTION CONTACT
============================================================ */
.contact-grid {
gap : var(--sp-lg);
}
.contact-form {
display : flex;
flex-direction : column;
gap : var(--sp-md);
}
.form-group {
display : flex;
flex-direction : column;
gap : var(--sp-xs);
}
.form-group label {
margin-bottom : 0; /* géré par gap */
}
.form-group input,
.form-group textarea {
margin-bottom : 0;
}
.contact-info {
display : flex;
flex-direction : column;
gap : var(--sp-md);
}
.contact-item {
padding-bottom : var(--sp-md);
}
.contact-item:last-child {
padding-bottom : 0;
}
.contact-item h3 {
margin-bottom : var(--sp-xs);
}
.contact-item a,
.contact-item p {
margin-bottom : 0;
}
/* ============================================================
12. MODALS — espacement interne uniforme
============================================================ */
.modal-content {
padding : 0; /* le padding est géré par header + body */
}
.modal-header {
padding : var(--sp-lg) var(--sp-xl);
margin-bottom : 0;
}
.modal-body {
padding : var(--sp-lg) var(--sp-xl) var(--sp-xl);
display : flex;
flex-direction : column;
gap : var(--sp-lg);
}
.modal-section {
/* les sections s'espacent via le gap du parent, plus de margin-bottom inline */
margin-bottom : 0;
}
.modal-section h3 {
margin-bottom : var(--sp-sm);
}
.modal-section p {
margin-bottom : var(--sp-sm);
}
.modal-section p:last-child {
margin-bottom : 0;
}
.modal-section ul {
padding-left : var(--sp-md);
margin-bottom : 0;
}
.modal-section li {
margin-bottom : var(--sp-xs);
}
.modal-section li:last-child {
margin-bottom : 0;
}
.modal-tech-stack {
display : flex;
flex-wrap : wrap;
gap : var(--sp-xs);
margin-top: var(--sp-xs);
}
.modal-tech-tag {
/* pas de margin individuel, géré par le gap */
margin : 0;
}
.modal-info-grid {
gap : var(--sp-sm);
}
.info-card {
padding : var(--sp-md);
}
.info-card h4 {
margin-bottom : var(--sp-xs);
}
.info-card p {
margin-bottom : 0;
}
/* Espace avant la zone ressources */
.modal-resources {
margin-top : 0; /* géré par gap du parent */
}
.modal-resources h4 {
margin-bottom : var(--sp-sm);
}
.resource-links {
display : flex;
flex-wrap : wrap;
gap : var(--sp-sm);
}
.resource-link {
/* cohérence */
margin : 0;
}
/* ============================================================
13. FOOTER
============================================================ */
footer {
padding-top : var(--sp-xl);
padding-bottom : var(--sp-xl);
}
footer p {
margin-bottom : var(--sp-sm);
}
.footer-social {
margin-top : var(--sp-sm);
}
/* ============================================================
14. RESPONSIVE — ajustements mobile
============================================================ */
@media (max-width: 768px) {
:root {
--sp-xl : 3rem;
--sp-xxl : 4rem;
}
section {
padding-top : var(--sp-xl);
padding-bottom : var(--sp-xl);
}
#accueil {
padding-top : calc(var(--sp-xl) + 4rem);
}
.modal-header {
padding : var(--sp-md) var(--sp-lg);
}
.modal-body {
padding : var(--sp-md) var(--sp-lg) var(--sp-lg);
gap : var(--sp-md);
}
}
@media (max-width: 480px) {
:root {
--sp-lg : 2rem;
--sp-xl : 2.5rem;
--sp-xxl : 3rem;
}
.modal-header {
padding : var(--sp-sm) var(--sp-md);
}
.modal-body {
padding : var(--sp-sm) var(--sp-md) var(--sp-md);
}
}