/* ==========================================================================
   Pages secondaires : projets.html et technique.html
   ========================================================================== */

/* ============ EN-TÊTE DE PAGE ============ */

.page__entete {
    padding-top: calc(var(--header-height) + var(--space-12));
    padding-bottom: var(--space-10);
}

.page__entete .section__header {
    margin-bottom: var(--space-8);
}

.page__intro {
    max-width: 62ch;
    margin: 0 auto;
    text-align: center;
    font-size: var(--font-lg);
    line-height: 1.8;
    color: var(--text-secondary);
}

/* ============ FAMILLES DE PROJETS ============ */

.famille--alt {
    background: var(--bg-secondary);
}

/* Aucune mesure imposée : l'en-tête borde exactement les cartes en dessous.
   Une limite en ch était en place, mais elle coupait le chapô à mi-chemin de
   la carte, ce qui se lisait comme un alignement raté. Le confort de lecture
   y perd, la ligne monte à ~114 caractères là où l'usage typographique
   s'arrête vers 75, et c'est un arbitrage assumé en faveur de l'alignement.
   Si le pavé devient pénible à lire, la piste est d'agir sur la longueur des
   textes plutôt que de remettre une limite qui recréerait la coupure. */
.famille__entete {
    margin-bottom: var(--space-12);
}

.famille__titre {
    font-size: var(--font-3xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin-bottom: var(--space-4);
}

/* Pas de text-wrap: balance ici. Il avait été mis quand l'en-tête était
   limité en largeur, pour éviter un mot seul en dernière ligne. Maintenant que
   l'en-tête borde les cartes, il produit l'effet inverse : il répartit le texte
   sur des lignes courtes de longueur voisine, qui n'atteignent plus le bord
   droit. Le chapô « Autres projets » tenait ainsi sur deux lignes de 736 et
   702 px dans une largeur de 1136. Le retour à la ligne ordinaire remplit la
   ligne, donc épouse la carte. */
.famille__chapo {
    color: var(--text-secondary);
    line-height: 1.8;
}

/* ============ PROJET ============ */

.projet {
    padding: var(--space-8);
    background: var(--bg-primary);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
}

.projet+.projet {
    margin-top: var(--space-8);
}

.projet--large {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--space-10);
    align-items: start;
}

.projet__visuel {
    display: grid;
    gap: var(--space-8);
    align-content: start;
}

/* Une vue du produit, avec sa légende : les trois interfaces d'un même
   logiciel se lisent mieux nommées que juxtaposées sans explication. */
.vue {
    margin: 0;
}

.vue__legende {
    margin-top: var(--space-3);
    font-size: var(--font-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}

.vue__legende strong {
    color: var(--text-primary);
    font-weight: var(--font-semibold);
}

/* Les vues secondaires n'ont pas à peser autant que la première. */
.vue+.vue .fenetre {
    box-shadow: var(--shadow-md);
}

.projet__logo {
    display: block;
    width: 100%;
    max-width: 220px;
    height: auto;
}

/* Fiche rattachée à la précédente : décalée et bordée à gauche, pour qu'on
   la lise comme le prolongement d'un produit et non comme un produit de plus. */
.projet--compagnon {
    margin-left: var(--space-10);
    border-left: 3px solid var(--primary-color);
}

.projet__rattachement {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    font-size: var(--font-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-light);
}

.projet__rattachement::before {
    content: '\21B3';
    font-size: 1.1em;
    color: var(--primary-color);
}

.projet__titre {
    font-size: var(--font-2xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.projet__role {
    font-size: var(--font-sm);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--primary-color);
    margin-bottom: var(--space-5);
}

.projet__texte {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: var(--space-4);
}

.projet__points {
    list-style: none;
    margin: 0 0 var(--space-6);
    padding: 0;
    display: grid;
    gap: var(--space-2);
}

.projet__points li {
    position: relative;
    padding-left: var(--space-6);
    color: var(--text-secondary);
    line-height: 1.7;
}

.projet__points li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: var(--font-bold);
}

.projet__liens {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.projet__liens .btn {
    gap: var(--space-2);
}

.projet__note {
    margin-top: var(--space-5);
    font-size: var(--font-sm);
    color: var(--text-light);
    line-height: 1.6;
}

/* Retiré : la grille de petites cartes et ses vignettes.
   Les projets de la troisième famille sont présentés comme les autres,
   en fiches complètes, pour ne pas créer deux traitements sur une même page. */

/* ============ PAGE TECHNIQUE ============ */

.tech--alt {
    background: var(--bg-secondary);
}

.tech__titre {
    font-size: var(--font-3xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin-bottom: var(--space-8);
}

.tech__sous-titre {
    font-size: var(--font-xl);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: var(--space-10) 0 var(--space-4);
}

.tech__texte {
    max-width: 72ch;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: var(--space-4);
}

.tech__avert {
    max-width: 72ch;
    margin: var(--space-8) auto 0;
    padding: var(--space-4) var(--space-5);
    background: var(--bg-gradient-light);
    border-left: 3px solid var(--accent-color);
    border-radius: var(--radius-lg);
    font-size: var(--font-sm);
    color: var(--text-secondary);
    line-height: 1.7;
}

.tech__avert a {
    color: var(--primary-color);
    font-weight: var(--font-medium);
}

/* Sommaire */
.tech__sommaire-bloc {
    padding-block: var(--space-8);
}

.tech__sommaire {
    max-width: 72ch;
    margin: 0 auto;
    padding: var(--space-5) var(--space-6);
    background: var(--bg-primary);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-xl);
}

.tech__sommaire-titre {
    font-size: var(--font-sm);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-light);
    margin-bottom: var(--space-3);
}

.tech__sommaire ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-6);
}

.tech__sommaire a {
    color: var(--primary-color);
    font-weight: var(--font-medium);
    text-decoration: none;
}

.tech__sommaire a:hover {
    text-decoration: underline;
}

/* Listes techniques */
.tech__liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-5);
    max-width: 82ch;
}

.tech__liste li {
    position: relative;
    padding-left: var(--space-6);
    color: var(--text-secondary);
    line-height: 1.8;
}

.tech__liste li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-color);
}

.tech__liste strong {
    color: var(--text-primary);
    font-weight: var(--font-semibold);
}

.tech code {
    padding: 0.15em 0.45em;
    background: var(--bg-secondary);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.9em;
    color: var(--text-primary);
}

.tech--alt code {
    background: var(--bg-primary);
}

/* Chiffres */
.tech__chiffres {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.tech__chiffre {
    padding: var(--space-5);
    background: var(--bg-primary);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-xl);
    text-align: center;
}

.tech__chiffre-valeur {
    display: block;
    font-size: var(--font-3xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.tech__chiffre-label {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--font-sm);
    color: var(--text-secondary);
}

/* Tableau */
.tech__table-enveloppe {
    /* Un tableau ne doit jamais forcer la page à défiler horizontalement :
       il défile dans son propre conteneur. */
    overflow-x: auto;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-xl);
    background: var(--bg-primary);
}

.tech__table {
    width: 100%;
    border-collapse: collapse;
    min-width: 40rem;
}

.tech__table th,
.tech__table td {
    padding: var(--space-4) var(--space-5);
    text-align: left;
    vertical-align: top;
    border-bottom: var(--border-width) solid var(--border-color);
    line-height: 1.7;
}

.tech__table thead th {
    font-size: var(--font-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-light);
    background: var(--bg-secondary);
}

.tech__table tbody th {
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    white-space: nowrap;
}

.tech__table td {
    color: var(--text-secondary);
}

.tech__table tbody tr:last-child th,
.tech__table tbody tr:last-child td {
    border-bottom: 0;
}

/* ============ APPEL DE FIN DE PAGE ============ */

.page__appel {
    text-align: center;
    background: var(--bg-secondary);
    border-top: var(--border-width) solid var(--border-color);
}

.page__appel-titre {
    font-size: var(--font-3xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin-bottom: var(--space-4);
}

.page__appel-texte {
    max-width: 56ch;
    margin: 0 auto var(--space-8);
    color: var(--text-secondary);
    line-height: 1.8;
}

.page__appel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: center;
}

.page__appel-actions .btn {
    gap: var(--space-2);
}

/* ============ ADAPTATION AUX PETITS ÉCRANS ============ */

@media screen and (max-width: 968px) {

    .projet--large {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .projet--compagnon {
        margin-left: 0;
    }

    .tech__chiffres {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 640px) {

    .tech__chiffres {
        grid-template-columns: 1fr;
    }

    .projet {
        padding: var(--space-5);
    }

    .page__appel-actions {
        flex-direction: column;
    }
}