/* ========================================
   ABOUT.CSS - REFACTORISÉ
   ======================================== */

/* ---- CLASSES UTILITAIRES COMMUNES ---- */

/* Classe pour tous les conteneurs avec grille */
.grid-section {
    display: grid;
    grid-template-columns: subgrid;
    gap: var(--gap-medium);
}

/* Classe pour tous les labels */
.section-label {
    text-align: center;
    font-weight: normal;
}

/* Classe pour tous les textes de contenu */
.section-text {
    line-height: var(--line-height);
}

/* ---- CONTENEURS SPÉCIFIQUES ---- */

/* Design */
.design-container {
    grid-column: 1 / 6;
    grid-row: 2 / 4;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: auto 1fr;
    gap: var(--gap-medium);
}

.design-label {
    grid-column: 1 / 2;
    text-align: center;
}

.design-text {
    grid-column: 2 / 5;
    line-height: var(--line-height);
}

/* Recherche */
.research-container {
    grid-column: 1 / 5;
    grid-row: 4 / 6;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: auto 1fr;
    gap: var(--gap-medium);
}

.research-label {
    grid-column: 1 / 2;
    text-align: center;
}

.research-text {
    grid-column: 2 / 9;
    line-height: var(--line-height);
}

/* Services */
.service-container {
    grid-column: 5 / 9;
    grid-row: 4 / 7;
    display: grid;
    grid-template-columns: subgrid;
    gap: var(--gap-medium);
}

.service-label {
    grid-column: 1 / 2;
    text-align: center;
}

.service-categorie {
    grid-column: 2 / 6;
    display: grid;
    grid-template-columns: subgrid;
}

/* Catégories de services - Structure commune */
.web,
.print,
.identity {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}

.web {
    grid-column: 1 / 1;
}

.print {
    grid-column: 2 / 2;
}

.identity {
    grid-column: 3 / 3;
}

/* Labels et textes - Factorisation */
.web-label,
.print-label,
.identity-label {
    font-weight: normal;
}

.web-text,
.print-text,
.identity-text {
    display: flex;
    flex-direction: column;
    line-height: var(--line-height);
}

/* Soft Skills */
.soft-skill-container {
    grid-column: 5 / 9;
    grid-row: 2 / 4;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: auto 1fr;
    gap: var(--gap-medium);
}

.soft-skill-label {
    font-weight: normal;
    text-align: center;
}

.soft-skill-text {
    display: flex;
    flex-direction: column;
    line-height: var(--line-height);
}

/* Site (Colophon) */
.site-container {
    grid-column: 1 / 6;
    grid-row: 6 / 7;
    display: grid;
    grid-template-columns: subgrid;
    gap: var(--gap-medium);
}

.site-label {
    grid-column: 1 / 2;
    text-align: center;
}

.site-text {
    grid-column: 2 / 5;
    line-height: var(--line-height);
}