/************************************************************
	PLATEFORMES — archive + fiche
	Chargé uniquement sur ce contenu (voir functions.php).

	S'appuie sur le socle de design de tarifs.css : variables
	--trf-*, .trf-section, .trf-step-*, .trf-btn, .trf-sidenav.
	Ce fichier ne contient QUE les composants propres aux
	plateformes.
************************************************************/

/************************************************************
	ARCHIVE — LISTE DES PLATEFORMES
************************************************************/
.plt-liste {
    border-top: 1px solid var(--trf-line);
}

/* Carte = une ligne éditoriale pleine largeur : numéro à gauche, contenu au
   centre, flèche à droite. Une grille plutôt qu'un flex, pour que les trois
   colonnes restent alignées d'une carte à l'autre quelle que soit la
   longueur des textes. */
.plt-carte {
    position: relative;
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr) 4rem;
    align-items: start;
    gap: clamp(1rem, 3vw, 3rem);
    padding: clamp(2rem, 4vw, 3.5rem) 0;
    border-bottom: 1px solid var(--trf-line);
    color: var(--trf-fg);
    text-decoration: none;
}

a.plt-carte:hover,
a.plt-carte:focus-visible {
    text-decoration: none;
    color: var(--trf-fg);
}

/* Le fond se remplit par le bas au survol, comme .trf-btn : même grammaire
   d'interaction sur toute la page. */
.plt-carte::before {
    content: '';
    position: absolute;
    inset: 0 -1.5rem;
    z-index: -1;
    background: var(--trf-soft);
    opacity: 0;
    transition: opacity 0.45s var(--trf-ease);
    border-radius: var(--trf-radius-md);
}

a.plt-carte:hover::before,
a.plt-carte:focus-visible::before {
    opacity: 1;
}

.plt-carte-num {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--trf-muted);
    padding-top: 0.6em;
}

.plt-carte-corps {
    display: block;
    min-width: 0;
}

.plt-carte-nom {
    display: block;
    font-size: clamp(2.2rem, 5.2vw, 5.4rem);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: -0.04em;
}

.plt-carte-baseline {
    display: block;
    margin-top: 1rem;
    max-width: 44ch;
    font-size: clamp(1.15rem, 1.7vw, 1.6rem);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.015em;
}

.plt-carte-texte {
    display: block;
    margin-top: 1rem;
    max-width: 62ch;
    font-size: clamp(1.05rem, 1.2vw, 1.25rem);
    line-height: 1.6;
    color: var(--trf-muted);
}

.plt-carte-fleche {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-top: 0.5em;
    color: var(--trf-fg);
    transition: transform 0.45s var(--trf-ease);
}

a.plt-carte:hover .plt-carte-fleche {
    transform: translate(0.35rem, -0.35rem);
}

@media (max-width: 767.98px) {
    .plt-carte {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.75rem 1rem;
    }

    /* Le numéro passe au-dessus du nom, la flèche reste sur sa ligne. */
    .plt-carte-num {
        grid-column: 1;
        padding-top: 0;
    }

    .plt-carte-fleche {
        grid-column: 2;
        grid-row: 1;
        padding-top: 0;
        align-items: flex-start;
    }

    .plt-carte-corps {
        grid-column: 1 / -1;
    }

    .plt-carte::before {
        inset: 0 -0.75rem;
    }
}

/************************************************************
	FICHE — HERO IMAGE + PARALLAXE

	Le cadre média (.projet-hero) et la parallaxe
	(initProjetHeroParallax dans custom.js) sont ceux des fiches
	projet : mêmes classes, même code, rien n'est dupliqué ici.
	La section de titre porte .projet-intro, c'est la feuille
	blanche qui vient recouvrir l'image figée.

	Seul le calage vertical est à reprendre : tarifs.css est
	chargé APRÈS custom.css, son .trf-hero réimposerait donc son
	décalage de 104px sous le header fixe — inutile puisque le
	hero image occupe déjà le haut de la page.
************************************************************/
.trf-hero.projet-intro {
    padding-top: clamp(3rem, 6vw, 6rem);
}

/************************************************************
	FICHE — BANDEAU DE REPÈRES
************************************************************/
.plt-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: clamp(3rem, 6vw, 6rem) 0 0;
    padding: 0;
    border-top: 1px solid var(--trf-line);
}

/* Le filet est porté à GAUCHE des colonnes suivantes, jamais à droite :
   avec une bordure à droite, le trait se retrouvait à bonne distance du
   texte qu'il suivait mais collé à celui qu'il précédait. Ici chaque filet
   a le même air de part et d'autre. */
.plt-meta-item {
    padding: 1.5rem 2rem 0 0;
}

.plt-meta-item + .plt-meta-item {
    padding-left: 2rem;
    border-left: 1px solid var(--trf-line);
}

.plt-meta dt {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--trf-muted);
    margin-bottom: 0.5rem;
}

.plt-meta dd {
    margin: 0;
    font-size: clamp(0.95rem, 1.1vw, 1.15rem);
    font-weight: 500;
    line-height: 1.3;
}

/* Deux colonnes : le filet ne subsiste qu'entre les deux colonnes d'une
   même ligne, et chaque ligne reprend au bord gauche. */
@media (max-width: 991.98px) {
    .plt-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 1.75rem;
    }

    .plt-meta-item {
        padding-right: 1.5rem;
    }

    .plt-meta-item + .plt-meta-item {
        padding-left: 1.5rem;
    }

    .plt-meta-item:nth-child(odd) {
        padding-left: 0;
        border-left: 0;
    }
}

/* Une seule colonne : plus de filet vertical, on sépare à l'horizontale. */
@media (max-width: 575.98px) {
    .plt-meta {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0;
    }

    .plt-meta-item,
    .plt-meta-item + .plt-meta-item {
        padding: 1.25rem 0;
        border-left: 0;
        border-bottom: 1px solid var(--trf-line);
    }

    .plt-meta-item:last-child {
        border-bottom: 0;
    }
}

/************************************************************
	FICHE — SECTIONS

	Une seule mise en page, répétée : numéro + titre à gauche,
	texte libre à droite. Tout le reste (listes, intertitres,
	mises en gras) vient du wysiwyg, d'où les styles ci-dessous
	portés sur les balises plutôt que sur des classes.
************************************************************/
.plt-section-titre {
    margin: 0;
    font-size: clamp(1.7rem, 3.2vw, 3.4rem);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.025em;
}

@media (max-width: 991.98px) {
    .plt-section-titre {
        margin-bottom: 2rem;
    }
}

.plt-section-texte {
    max-width: 68ch;
    font-size: clamp(1.05rem, 1.2vw, 1.25rem);
    line-height: 1.6;
    color: var(--trf-muted);
}

.plt-section-texte > *:first-child { margin-top: 0; }
.plt-section-texte > *:last-child { margin-bottom: 0; }

.plt-section-texte p {
    margin: 0 0 1.25rem;
}

.plt-section-texte strong {
    color: var(--trf-fg);
    font-weight: 500;
}

/* Intertitre dans le wysiwyg : sous le titre de section, au-dessus du texte. */
.plt-section-texte h3,
.plt-section-texte h4 {
    margin: 2.5rem 0 0.75rem;
    color: var(--trf-fg);
    font-size: clamp(1.1rem, 1.4vw, 1.35rem);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

.plt-section-texte ul,
.plt-section-texte ol {
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}

/* Filet entre les items plutôt qu'une puce : c'est la grammaire des listes
   du reste du site (formules, comparatifs). */
.plt-section-texte li {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--trf-line);
}

.plt-section-texte li:first-child {
    border-top: 1px solid var(--trf-line);
}

.plt-section-texte a {
    color: var(--trf-fg);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

/************************************************************
	CTA FINAL
************************************************************/
.plt-cta-titre {
    margin-top: 1rem;
    font-size: clamp(2.2rem, 5.2vw, 6rem);
}

.plt-cta-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}