/* Pages éditoriales (produits, sur mesure, dépôts, entreprise) : texte courant, encadrés, listes. */

/* Texte courant, à une largeur de lecture confortable */
.prose {
    max-width: 68ch;
    font: var(--type-body-lg);
    color: var(--text-secondary);
}

.prose > * + * {
    margin-top: var(--space-4);
}

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

.prose ul {
    padding-left: var(--space-5);
    list-style: square;
}

.prose li::marker {
    color: var(--red-500);
}

.prose li + li {
    margin-top: var(--space-2);
}

/* Titre de section écrit à la main (hors SectionHeader), suivi de son texte */
h2 + .prose {
    margin-top: var(--space-6);
}

/* Deux colonnes sur ordinateur : texte à gauche, encadré à droite */
.split {
    display: grid;
    gap: var(--space-10);
}

@media (min-width: 960px) {
    .split {
        grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
        align-items: start;
        gap: var(--space-16);
    }
}

/* Encadré « bon à savoir » */
.note {
    padding: var(--space-6);
    background: var(--surface-subtle);
    border: var(--border-width) solid var(--border-default);
    border-radius: var(--radius-md);
}

.section--subtle .note {
    background: var(--surface-card);
}

.note__title {
    font: var(--type-h4);
}

.note > p {
    margin-top: var(--space-3);
    color: var(--text-secondary);
}

.note .button {
    margin-top: calc(var(--space-6) + 8px);
}

/* Liste à cocher : ce qu'il faut préparer pour une demande */
.checklist {
    display: grid;
    gap: var(--space-4);
    max-width: 68ch;
}

.checklist li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-3);
    font: var(--type-body-lg);
}

.checklist svg {
    width: 20px;
    height: 20px;
    margin-top: 4px;
    color: var(--green-500);
}

/* Termes et définitions (types de pliages, accessoires) */
.terms {
    display: grid;
    gap: var(--space-5) var(--space-10);
}

@media (min-width: 720px) {
    .terms {
        grid-template-columns: repeat(2, 1fr);
    }
}

.terms div {
    padding-top: var(--space-4);
    border-top: var(--border-width) solid var(--border-default);
}

.terms dt {
    font: var(--type-h4);
}

.terms dd {
    margin: var(--space-1) 0 0;
    color: var(--text-secondary);
}

/* Référence d'un lot décomposée : le code en grand, puis la signification de chaque partie */
.lot-code {
    display: grid;
    gap: var(--space-6);
}

.lot-code__value {
    padding: var(--space-6);
    word-spacing: 0.4em;
    background: var(--surface-inverse-deep);
    border-radius: var(--radius-md);
    font: var(--weight-regular) clamp(var(--text-lg), 2vw + 0.5rem, var(--text-3xl)) / 1.2 var(--font-mono);
    color: var(--text-inverse);
}

.lot-code__value span {
    text-decoration: underline;
    text-decoration-color: var(--text-accent-inverse);
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
}

.lot-code__legend {
    display: grid;
    gap: var(--space-3) var(--space-8);
}

@media (min-width: 720px) {
    .lot-code__legend {
        grid-template-columns: repeat(2, 1fr);
    }
}

.lot-code__legend div {
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: var(--space-4);
    align-items: baseline;
}

.lot-code__legend dt {
    font: var(--type-mono);
    color: var(--text-accent);
}

.lot-code__legend dd {
    margin: 0;
}

/* Cartes vers les pages voisines */
.related {
    display: grid;
    gap: var(--space-4);
}

@media (min-width: 600px) {
    .related {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6);
    }
}

/* Quatre colonnes au plus : deux cartes voisines gardent la taille des cartes de l'accueil */
@media (min-width: 1100px) {
    .related {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Fin de section : texte d'accompagnement sous une liste ou une grille */
.section-note {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: var(--border-width) solid var(--border-default);
    max-width: 80ch;
    color: var(--text-secondary);
}

/* Coordonnées (page d'un dépôt) : intitulé à gauche, valeur à droite */
.facts {
    display: grid;
    gap: var(--space-5);
    margin-top: var(--space-8);
}

.facts div {
    display: grid;
    gap: var(--space-1) var(--space-6);
    padding-top: var(--space-4);
    border-top: var(--border-width) solid var(--border-default);
}

@media (min-width: 600px) {
    .facts div {
        grid-template-columns: 8rem 1fr;
    }
}

.facts dt {
    font: var(--type-label);
    color: var(--text-secondary);
}

.facts dd {
    margin: 0;
    font: var(--type-body-lg);
}

.facts dd a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.facts dd svg {
    width: 16px;
    height: 16px;
}

.facts__lines li + li {
    margin-top: var(--space-1);
}

.facts__heading {
    margin-block: var(--space-8) var(--space-4);
    font: var(--type-h4);
}

/* Cartes des dépôts : trois colonnes sur ordinateur */
.depots-list {
    display: grid;
    gap: var(--space-10);
}

@media (min-width: 960px) {
    .depots-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Galerie de photos (page d'un dépôt) */
.gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

@media (min-width: 960px) {
    .gallery {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-6);
    }
}

.gallery img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radius-lg);
}

/* Signature de PBAB en grand, sur fond anthracite */
.note--signature {
    display: grid;
    place-items: center;
    min-height: 220px;
    background: var(--surface-inverse-deep);
    border-color: var(--surface-inverse-deep);
}

.note > .signature {
    margin: 0;
    font: var(--weight-bold) clamp(var(--text-2xl), 2vw + 1rem, var(--text-4xl)) / 1.05 var(--font-display);
    letter-spacing: var(--tracking-caps);
    text-align: center;
    text-transform: uppercase;
    color: var(--text-inverse);
}

/* Pagination des listes publiques (conseils, actualités) */
.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-8);
    align-items: center;
    justify-content: center;
    margin-top: var(--space-10);
    font: var(--type-body);
}

.pagination a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--weight-semibold);
}

.pagination svg {
    width: 16px;
    height: 16px;
}

/* Rubrique sans article publié */
.empty-state {
    display: grid;
    gap: var(--space-3);
    justify-items: start;
    max-width: 60ch;
    padding: var(--space-8);
    border: var(--border-width) dashed var(--border-strong);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
}

.empty-state__title {
    font: var(--type-h4);
    color: var(--text-primary);
}

.empty-state .admin-actions {
    margin-top: calc(var(--space-4) + 8px);
}