/* MEDIA QUERIES - RESPONSIVE DESIGN */

/* MOBILE : < 600px (par défaut, style-base.css suffit) */

/* TABLET : 600px - 1024px */
@media (min-width: 600px) and (max-width: 1024px) {
.container {
max-width: 100%;
padding: 0 1rem;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.75rem;
}
table {
font-size: 0.95rem;
}
th, td {
padding: 0.75rem 0.5rem;
}
nav ul {
gap: 1.5rem;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="date"],
textarea,
select {
padding: 0.65rem;
}
button,
.btn {
padding: 0.65rem 1.25rem;
}
}

/* DESKTOP : > 1024px */
@media (min-width: 1025px) {
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
}

/* LAYOUT 2 COLONNES */
main {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
}

/* COLONNE GAUCHE : EXPÉRIENCE PRO + DIPLÔMES */
.col-left {
grid-column: 1;
}

/* COLONNE DROITE : LANGUES + OS + LOGICIELS + LANGAGES + LOISIRS */
.col-right {
grid-column: 2;
}

/* AJUSTEMENTS TYPOGRAPHIE */
h1 {
font-size: 2.75rem;
}
h2 {
font-size: 2.2rem;
}
h3 {
font-size: 1.6rem;
}

/* TABLEAUX OPTIMISÉS POUR GRAND ÉCRAN */
table {
font-size: 1rem;
}
th, td {
padding: 1rem;
}

/* FORMULAIRES FULL-WIDTH */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="date"],
textarea,
select {
padding: 0.85rem;
}

/* FOOTER EN COLONNES AUSSI */
footer {
text-align: left;
padding: 3rem 0;
}

/* NAVIGATION : HORIZONTALE SUR GRAND ÉCRAN */
header .container {
padding: 0 2rem;
}
nav ul {
gap: 2.5rem;
}
}