/*--- Fonts ---*/
@font-face {
	font-family: 'Helvetica Now Display';
	src: local('HelveticaNowDisplay-Bold'), local('Helvetica-Now-Display-Bold'),
		url('../fonts/HelveticaNowDisplay-Bold.woff2') format('woff2'),
		url('../fonts/HelveticaNowDisplay-Bold.woff') format('woff'),
		url('../fonts/HelveticaNowDisplay-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
	font-family: 'Inter';
	src: local('Inter'),
		url('../fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
}

/* --- Variables pour les thèmes --- */
:root {
	/* Light mode par défaut */
	--bg: #f4f5f7;
    --title: #111;
	--text: #111;
	--subtext: #555;
	--card-bg: #fff; 
	--card-border: #ddd; 
	--hover-bg: #f0f0f0; 
	--hover-text: #000;
    --accent: #555; /* Accent Bleu Général (client) */

    /* Couleurs des blocs thématiques (Light Mode) */
    --notes-bg: #e3f2ff; /* Bleu Pastel Clair */
    --notes-text: #111;
    --consulting-bg: #f1e0ff; /* Violet Pastel Clair */
    --consulting-text: #111;
}

body.dark-mode {
    /* Variables de thème sombres (elles sont maintenant appliquées au body et affectent tous les enfants) */
    --bg: #1a1a1d;
    --title: #fff;
    --text: #fff;
    --subtext: #aaa;
    --card-bg: #2a2d31;
    --card-border: #3a3d45;
    --hover-bg: #3a3d45;
    --hover-text: #fff;
    --accent: #fff; 
    
    /* Couleurs des blocs thématiques (Dark Mode) */
    --notes-bg: #223344; 
    --notes-text: #fff;
    --consulting-bg: #302040;
    --consulting-text: #fff;
}

html {
    /* Nouvelle règle pour s'assurer que l'élément racine prend 100% de la hauteur */
    height: 100%; 
    /* Ceci est la clé : empêche tout défilement sur l'ensemble de la page */
    overflow: hidden; 
}

/* --- Body & Layout --- */
body {
	font-family: 'Inter', sans-serif;
	overflow-x: hidden;
	background: var(--bg);
    transition: background-color 0.4s ease;
    min-height: 100vh; /* Doit prendre la hauteur minimale de la fenêtre */
    display: flex;
    flex-direction: column;
}

main {
	flex-grow: 1;
    padding: 30px 20px; 
	box-sizing: border-box;
	max-width: 600px;
    margin: 0 auto;
    width: 100%;
}

.content-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	width: 100%;
	max-width: 600px; 
	color: var(--text);
	padding-bottom: 30px;
}

/* --- Switch (Position: fixed) --- */
#theme-toggle {
	position: fixed;
	top: 20px;
	right: 20px;
	opacity: 0;
	width: 0;
	height: 0;
	z-index: 100;
}

.toggle-label {
	position: fixed;
	top: 20px;
	right: 20px;
	width: 40px;
	height: 40px;
	cursor: pointer;
	background: none;
	border: none;
	z-index: 100;
}

.toggle-label::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 40px;
	height: 40px;
	/* Icône Soleil (jaune) */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cline x1='12' y1='1' x2='12' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='23'/%3E%3Cline x1='4.22' y1='4.22' x2='5.64' y2='5.64'/%3E%3Cline x1='18.36' y1='18.36' x2='19.78' y2='19.78'/%3E%3Cline x1='1' y1='12' x2='3' y2='12'/%3E%3Cline x1='21' y1='12' x2='23' y2='12'/%3E%3Cline x1='4.22' y1='19.78' x2='5.64' y2='18.36'/%3E%3Cline x1='18.36' y1='5.64' x2='19.78' y2='4.22'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 24px;
	opacity: 1;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

#theme-toggle:checked + .toggle-label {
	background-color: transparent; /* Utilise une couleur de carte sombre */
    border-color: var(--card-border);
}

.toggle-label::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 40px;
	height: 40px;
	/* Icône Lune (bleue - utilisant l'accent) */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235d93d9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 24px;
	opacity: 0;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

#theme-toggle:checked + .toggle-label::before {
	opacity: 0;
	transform: rotate(180deg);
}

#theme-toggle:checked + .toggle-label::after {
	opacity: 1;
	transform: rotate(0deg);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235d93d9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
}

/* --- Profile & Text --- */
.profile-pic {
    border-radius: 50%;
    width: 120px;
    height: 120px;
    object-fit: cover;
    margin-bottom: 35px;
    border: 3px solid var(--card-border);
    transition: border-color 0.4s ease;
    display: block;
}

h1 {
	font-size: 1.8rem;
	font-family: 'Helvetica Now Display', sans-serif;
	margin-bottom: 15px;
	color: var(--title);
	transition: color 0.4s ease;
}

.bio {
	color: var(--subtext);
	margin-bottom: 45px;
	font-size: 1rem;
	transition: color 0.4s ease;
}

/* --- Links (Bento Structure) --- */
.links {
	display: grid; 
	grid-template-columns: 1fr; /* 1 colonne par défaut sur mobile */
	gap: 20px; 
	width: 100%;
}

.link {
	background: var(--card-bg);
	border-radius: 10px;
	padding: 25px; 
	text-decoration: none;
	color: var(--text);
	font-weight: 600;
	border: 1px solid var(--card-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); 
	transition: all 0.25s ease, box-shadow 0.3s ease;
	text-align: left;
    
    /* CORRECTION: Structure verticale, position relative pour la flèche */
	display: flex;
	flex-direction: column; 
	justify-content: space-between; 
	min-height: 100px;
    position: relative; 
}

#theme-toggle:checked ~ main .link {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.link-content {
    display: flex;
    flex-direction: column; 
    justify-content: space-between;
    flex-grow: 1;
    min-height: 50px;
    text-align: left;
    width: 100%;
}
.link-title {
	font-family: 'Helvetica Now Display', sans-serif;
	font-weight: 700;
	font-size: 1.1rem;
	margin-bottom: 5px;
	color: var(--text); 
	transition: color 0.25s ease;
    /* Pour aligner l'icône du titre et servir d'ancre à la flèche */
    display: flex;
    align-items: center;
    position: relative; 
}
.link-title svg {
    stroke: currentColor;
    transition: all 0.25s ease;
}
.link-subtitle {
	font-weight: 400;
	font-size: 0.8rem;
	color: var(--subtext);
	line-height: 1.3;
	transition: color 0.25s ease;
}

/* --- NOUVEAU: Style de la flèche (Positionnée en haut à droite du titre) --- */
.arrow-icon {
    /* Positionnement absolu par rapport au .link-title */
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    
    display: none; /* Cachée par défaut sur mobile (sera visible sur desktop) */
    align-self: center;
    flex-shrink: 0;
}
.arrow-icon svg {
    width: 20px;
    height: 20px;
    stroke: var(--subtext); /* Gris par défaut */
    transition: stroke 0.25s ease;
}


/* --- Effets au survol (général) --- */
.link:hover {
	background: var(--hover-bg);
	transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
#theme-toggle:checked ~ main .link:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

/* Les éléments de texte/icône dans les liens par défaut prennent l'accent Light Mode */
.link:hover:not(.social-box) .link-title,
.link:hover:not(.social-box) .link-title svg,
.link:hover:not(.social-box) .arrow-icon svg {
	color: var(--accent); 
    stroke: var(--accent);
}
.link:hover:not(.social-box) .link-subtitle {
    color: var(--accent);
}

/* FIX HOVER DARK MODE (Texte + Flèche devient BLANC) */
#theme-toggle:checked ~ main .link:hover:not(.bento-notes):not(.bento-consulting) .link-title,
#theme-toggle:checked ~ main .link:hover:not(.bento-notes):not(.bento-consulting) .link-title svg,
#theme-toggle:checked ~ main .link:hover:not(.bento-notes):not(.bento-consulting) .link-subtitle,
#theme-toggle:checked ~ main .link:hover .arrow-icon svg {
	/* var(--text) est blanc en Dark Mode */
	color: var(--text); 
    stroke: var(--text);
}


/* --- Styles spécifiques aux BOXES COLORÉES (Notes & Consulting) --- */

/* NOTES (Bleu Personnalisé) */
.bento-notes {
    background: var(--notes-bg);
    border-color: var(--notes-bg);
}
.bento-notes .link-title, .bento-notes .link-title svg {
    color: var(--notes-text);
    stroke: var(--notes-text);
}
.bento-notes .link-subtitle {
    color: color-mix(in srgb, var(--notes-text) 80%, transparent);
}
.bento-notes .arrow-icon svg {
    stroke: color-mix(in srgb, var(--notes-text) 50%, transparent);
}
.bento-notes:hover {
    background: color-mix(in srgb, var(--notes-bg) 95%, black);
    border-color: color-mix(in srgb, var(--notes-bg) 95%, black);
}

.bento-notes:hover .link-title, 
.bento-notes:hover .link-subtitle,
a.link.bento-notes:hover .link-title svg {
    /* Texte Titre + Sous-titre + Icône de titre: rgb(26,26,29, 0.5) */
    color: #111; 
}

a.link.bento-notes:hover .arrow-icon svg {
    /* Flèche: #111 */
    stroke: #111;
    color: #111;
}


/* CONSULTING (Violet Personnalisé) */
.bento-consulting {
    background: var(--consulting-bg);
    border-color: var(--consulting-bg);
}
.bento-consulting .link-title, .bento-consulting .link-title svg {
    color: var(--consulting-text);
    stroke: var(--consulting-text);
}
.bento-consulting .link-subtitle {
    color: color-mix(in srgb, var(--consulting-text) 80%, transparent);
}
.bento-consulting .arrow-icon svg {
    stroke: color-mix(in srgb, var(--consulting-text) 50%, transparent);
}
.bento-consulting:hover {
    background: color-mix(in srgb, var(--consulting-bg) 95%, black);
    border-color: color-mix(in srgb, var(--consulting-bg) 95%, black);
}

.bento-consulting:hover .link-title, 
.bento-consulting:hover .link-subtitle,
a.link.bento-consulting:hover .link-title svg {
    /* Texte Titre + Sous-titre + Icône de titre: rgb(26,26,29, 0.8) */
    color: #111;
}

a.link.bento-consulting:hover .arrow-icon svg {
    /* Flèche: #111 */
    stroke: #111;
    color: #111;
}


/* --- Styles spécifiques aux BOXES SOCIALES (Minimalistes) --- */

.social-box {
    text-align: center;
    justify-content: center;
    align-items: center;
    /* NOUVEAU: Réduire la hauteur minimale */
    min-height: 80px; 
    padding: 15px;
}

.social-box .link-content {
    /* Garde l'alignement central pour le contenu social */
    align-items: center;
    text-align: center;
    flex-direction: column; 
    padding: 0;
    margin-right: 0;
    height: 100%; 
    justify-content: space-around;
}

.social-box .link-content .social-icon-large {
    flex-grow: 0; 
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 5px;
    
    /* NOUVEAU: Correction de position pour la flèche sociale */
    position: relative; 
    width: 100%;
}
.social-box .link-content .social-icon-large svg {
    width: 30px;
    height: 30px;
    stroke: var(--text);
    transition: all 0.25s ease;
}

/* NOUVEAU: Flèche dans les boîtes sociales */
.social-box .arrow-icon {
    /* Positionnement absolu pour la flèche dans l'icône sociale */
    position: absolute;
    right: 0;
    top: 0; 
    transform: none; 
    display: none; /* Cachée par défaut sur mobile (sera visible sur desktop) */
}

/* On force le titre et le sous-titre des boîtes sociales à rester en bas et petits */
.social-box .link-title {
    font-size: 0.9rem;
    font-weight: 500;
}
.social-box .link-subtitle {
    font-size: 0.8rem;
    color: var(--subtext);
    margin-top: 5px;
}

/* Couleurs spécifiques aux réseaux sociaux au survol (Light Mode) */
.social-box:hover.bento-x .link-title, .social-box:hover.bento-x .link-subtitle { color: #000; }
.social-box:hover.bento-x .social-icon-large svg { stroke: #000; }

.social-box:hover.bento-linkedin .link-title, .social-box:hover.bento-linkedin .link-subtitle { color: #0a66c2; }
.social-box:hover.bento-linkedin .social-icon-large svg { stroke: #0a66c2; }

.social-box:hover.bento-youtube .link-title, .social-box:hover.bento-youtube .link-subtitle { color: #ff0000; }
.social-box:hover.bento-youtube .social-icon-large svg { stroke: #ff0000; }

/* Couleurs spécifiques aux réseaux sociaux au survol (Dark Mode) */
#theme-toggle:checked ~ main .social-box:hover .link-title,
#theme-toggle:checked ~ main .social-box:hover .link-subtitle {
    color: var(--text); /* Texte blanc */
}
#theme-toggle:checked ~ main .social-box:hover .social-icon-large svg,
#theme-toggle:checked ~ main .social-box:hover .arrow-icon svg {
    stroke: var(--text); /* Icône et flèche blanches */
}


/* --- Footer --- */
footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 15px 20px;
	z-index: 50;
	box-sizing: border-box;
}

.footer-content {
	display: flex;
	align-items: center;
	justify-content: center; 
	max-width: 1200px;
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
}

.footer-text {
	font-size: 0.9rem;
	color: var(--subtext);
	transition: color 0.4s ease;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}


/* --- Responsive (Style Bento Corrigé) --- */

/* TABLETTE (à partir de 480px) - Disposition en 2 colonnes */
@media (min-width: 480px) {
	.links {
		grid-template-columns: 1fr 1fr; 
	}
    /* Notes et Consulting (les 2 premiers) prennent 100% */
    .links a:nth-child(1), 
    .links a:nth-child(2) {
        grid-column: span 2;
    }
    /* X et LinkedIn (3e et 4e) prennent 50% chacun */
    .links a:nth-child(3),
    .links a:nth-child(4) {
        grid-column: span 1;
    }
    /* YouTube (5e) prend 100% */
    .links a:nth-child(5) {
        grid-column: span 4;
    }
    
    /* Afficher la flèche sur tous les blocs */
    .arrow-icon {
        display: flex;
    }
	.social-box {
        min-height: 80px; /* Moins haut que les 100px par défaut */
        padding: 15px; /* Assurez-vous que le padding est raisonnable */
    }
}


/* DESKTOP (à partir de 768px) - Vrai Bento Asymétrique (Grille 4 Colonnes) */
@media (min-width: 768px) {
    .links {
		grid-template-columns: 1fr 1fr 1fr 1fr; /* 4 colonnes pour l'asymétrie */
        grid-auto-rows: minmax(100px, auto); /* Hauteur de ligne de base */
	}
    
    /* Ligne 1: Notes (50% Large, Double Hauteur) */
    .links a:nth-child(1) { /* Notes */
        grid-column: span 2; 
        grid-row: span 2; /* Rendre le bloc plus haut */
    }

    /* Ligne 1 suite / Ligne 2 début: Consulting (50% Large, Simple Hauteur) */
    .links a:nth-child(2) { /* Consulting */
        grid-column: span 2;
        grid-row: span 1;
    }

    /* Ligne 2: X (25% Large, Simple Hauteur) */
    .links a:nth-child(3) { /* X */
        grid-column: span 1;
        grid-row: span 1;
    }

    /* Ligne 2: LinkedIn (25% Large, Simple Hauteur) */
    .links a:nth-child(4) { /* LinkedIn */
        grid-column: span 1;
        grid-row: span 1;
    }

    /* Ligne 2: YouTube (50% Large, Simple Hauteur) */
    .links a:nth-child(5) { /* YouTube */
        grid-column: span 4;
        grid-row: span 1;
    }

    /* Ajustements cosmétiques pour les blocs sociaux sur desktop */
    .social-box {
        justify-content: space-around;
        padding-top: 25px;
        padding-bottom: 25px;
        min-height: auto;
    }
    .social-box .link-content .social-icon-large svg {
        width: 30px;
        height: 30px;
    }
}


/* --- Responsive Mobile (Ajustements cosmétiques) --- */
@media (max-width: 479px) {
	.content-wrapper {
        padding-bottom: 40px; /* Augmenter l'espace sur mobile */
    }
    /* Mobile: 1 seule colonne */
    .links {
        gap: 15px; 
    }
    .link {
        padding: 18px;
    }
    .link-title {
        font-size: 1rem;
    }
    .link-subtitle {
        font-size: 0.85rem;
    }
    /* Flèche cachée sur mobile (trop de désordre) */
    .arrow-icon {
        display: none !important;
    }
	/* Redéfinir la grille de .links pour 3 colonnes */
    .links {
        grid-template-columns: repeat(3, 1fr); /* 3 colonnes pour X, LinkedIn, YouTube */
        gap: 10px; /* Réduire l'espace pour les très petits mobiles */
    }
    
    /* Étape 2: Forcer Notes et Consulting (1er et 2ème) à prendre toute la largeur (3 colonnes) */
    .links a:nth-child(1), 
    .links a:nth-child(2) {
        grid-column: span 3;
    }
    
    /* Les 3 liens sociaux (3e, 4e, 5e) prendront naturellement 1 colonne chacun. */
    
    /* Ajustements cosmétiques existants: */
    .link {
        padding: 18px;
    }
    .link-title {
        font-size: 1rem;
    }
    .link-subtitle {
        font-size: 0.85rem;
    }
    /* Flèche cachée sur mobile (trop de désordre) */
    .arrow-icon {
        display: none !important;
    }

	.social-box {
        min-height: 60px; 
        padding: 15px;
}

@media (max-width: 768px) {
	main {
		padding: 25px 15px;
	}
	.toggle-label {
		width: 48px;
		height: 28px;
		top: 15px;
		right: 15px;
	}
	.toggle-label::before,
	.toggle-label::after {
		width: 42px;
		height: 42px;
		background-size: 24px;
		top: -7px;
		left: -3px;
	}
	#theme-toggle {
		top: 12px;
		right: 12px;
	}
}