— affichée en tête du tableau, ton sobre.
Le navigateur la rend au-dessus par défaut (`caption-side: top`) et la
lie au tableau pour les lecteurs d'écran. */
.blog-block-table__caption {
caption-side: top;
text-align: left;
padding: var(--blog-space-3) var(--blog-space-4);
font-size: var(--blog-text-sm);
font-weight: 600;
color: var(--blog-text-secondary);
border-bottom: 1px solid var(--blog-border);
}
.blog-block-table__head {
background: var(--blog-surface-muted);
}
.blog-block-table__head th {
text-align: left;
font-weight: 600;
padding: var(--blog-space-3) var(--blog-space-4);
border-bottom: 1px solid var(--blog-border);
white-space: nowrap;
}
/* Plancher de largeur des colonnes. Sans lui, `width: 100%` + `table-layout`
auto écrasent les colonnes pour tenir dans le conteneur → cellules de prose
repliées à « 3 mots par ligne », et le wrapper `overflow-x` ci-dessus ne
scrolle jamais (le tableau ne déborde pas). Avec un plancher, les colonnes
restent lisibles et un tableau trop large déborde → scroll horizontal propre
(comportement standard des comparatifs mobiles). */
.blog-block-table__body td {
padding: var(--blog-space-3) var(--blog-space-4);
border-bottom: 1px solid var(--blog-border);
min-width: 7rem;
overflow-wrap: break-word;
hyphens: auto;
}
.blog-block-table__head th {
min-width: 7rem;
}
/* 1re colonne (axe de lecture) : en gras + plancher un peu plus large pour que
les libellés courts tiennent sur une ligne. Pas de nowrap → les libellés
longs wrappent encore, sans forcer la largeur (pas de scroll en plus). */
.blog-block-table__body td:first-child {
font-weight: 600;
min-width: 9.5rem;
}
.blog-block-table__body tr:last-child td {
border-bottom: none;
}
.blog-block-table__body tr:nth-child(even) td {
background: var(--blog-surface-muted);
}
/* ==== ./blog/components/_block-steps.css ==== */
/* presseIA — blog : bloc steps
───────────────────────────────
Liste d'étapes numérotées (block_type = 'steps'). Compteur CSS rond
accentué à gauche, titre + description par étape.
Markup dans `templates/blog/blocks/_block.html.twig`.
*/
/* Sélecteur typé `ol.blog-block-steps` pour passer devant
`.blog-article-body ol { padding-left: var(--blog-space-5) }` qui
sinon ajoute 20px de padding-left au hasard de l'héritage. Le bloc
steps gère son propre offset via padding-left sur __item (place pour
le rond numéroté absolu). */
ol.blog-block-steps,
ul.blog-block-steps {
list-style: none;
counter-reset: blog-steps;
padding: 0;
margin: 0;
}
.blog-block-steps__item {
counter-increment: blog-steps;
position: relative;
padding-left: calc(var(--blog-space-7) + var(--blog-space-2));
margin-bottom: var(--blog-space-4);
min-height: var(--blog-space-7);
}
.blog-block-steps__item:last-child {
margin-bottom: 0;
}
.blog-block-steps__item::before {
content: counter(blog-steps);
position: absolute;
left: 0;
top: 0;
width: var(--blog-space-7);
height: var(--blog-space-7);
display: flex;
align-items: center;
justify-content: center;
background: var(--blog-color-accent);
color: var(--blog-text-onAccent);
font-family: var(--blog-font-heading);
font-weight: 700;
font-size: var(--blog-text-base);
border-radius: 50%;
flex-shrink: 0;
}
.blog-block-steps__title {
font-family: var(--blog-font-heading);
font-size: var(--blog-text-base);
font-weight: 600;
color: var(--blog-text-primary);
margin: 0 0 var(--blog-space-1) 0;
}
.blog-block-steps__body {
margin: 0;
color: var(--blog-text-primary);
}
/* ==== ./blog/components/_block-pros-cons.css ==== */
/* presseIA — blog : bloc pros_cons
────────────────────────────────────
Tableau comparatif points forts / points faibles (block_type = 'pros_cons').
Deux colonnes côte-à-côte ≥ 768px, empilées en mobile. Bordure accentuée
verte (pros) et rouge sobre (cons).
Markup dans `templates/blog/blocks/_block.html.twig`.
*/
.blog-block-pros-cons {
display: grid;
grid-template-columns: 1fr;
gap: var(--blog-space-4);
}
@media (min-width: 768px) {
.blog-block-pros-cons {
grid-template-columns: 1fr 1fr;
}
}
.blog-block-pros-cons__column {
padding: var(--blog-space-4);
border-radius: var(--blog-radius-md);
border: 1px solid var(--blog-border);
background: var(--blog-surface-elevated);
}
.blog-block-pros-cons__column--pros {
border-left: 3px solid var(--blog-color-success, #16a34a);
}
.blog-block-pros-cons__column--cons {
border-left: 3px solid var(--blog-color-danger, #b91c1c);
}
.blog-block-pros-cons__title {
display: flex;
align-items: center;
gap: var(--blog-space-2);
font-family: var(--blog-font-heading);
font-size: var(--blog-text-base);
font-weight: 700;
margin: 0 0 var(--blog-space-3) 0;
}
.blog-block-pros-cons__column--pros .blog-block-pros-cons__title {
color: var(--blog-color-success, #16a34a);
}
.blog-block-pros-cons__column--cons .blog-block-pros-cons__title {
color: var(--blog-color-danger, #b91c1c);
}
.blog-block-pros-cons__list {
list-style: none;
padding: 0;
margin: 0;
color: var(--blog-text-primary);
}
.blog-block-pros-cons__list li {
position: relative;
padding-left: var(--blog-space-5);
margin-bottom: var(--blog-space-2);
font-size: var(--blog-text-sm);
line-height: var(--blog-leading-normal);
}
.blog-block-pros-cons__list li:last-child {
margin-bottom: 0;
}
.blog-block-pros-cons__list li::before {
position: absolute;
left: 0;
top: 0;
font-weight: 700;
}
.blog-block-pros-cons__column--pros .blog-block-pros-cons__list li::before {
content: "+";
color: var(--blog-color-success, #16a34a);
}
.blog-block-pros-cons__column--cons .blog-block-pros-cons__list li::before {
content: "−";
color: var(--blog-color-danger, #b91c1c);
}
/* ==== ./blog/components/_block-faq.css ==== */
/* presseIA — blog : bloc faq
─────────────────────────────
Accordéon FAQ vanilla (block_type = 'faq'). Remplace l'accordion
Bootstrap data-bs-toggle=collapse. Animé via max-height transition,
ARIA expanded synchronisé par `assets/js/blog/accordion.js`.
Markup dans `templates/blog/blocks/_block.html.twig`.
*/
.blog-block-faq {
border: 1px solid var(--blog-border);
border-radius: var(--blog-radius-md);
overflow: hidden;
background: var(--blog-surface-elevated);
}
.blog-block-faq__item + .blog-block-faq__item {
border-top: 1px solid var(--blog-border);
}
.blog-block-faq__header {
margin: 0;
}
.blog-block-faq__toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: var(--blog-space-4) var(--blog-space-5);
background: transparent;
border: none;
text-align: left;
font-family: inherit;
font-size: var(--blog-text-base);
font-weight: 600;
color: var(--blog-text-primary);
cursor: pointer;
transition: background 0.15s;
}
.blog-block-faq__toggle:hover {
background: var(--blog-surface-muted);
}
.blog-block-faq__toggle:focus-visible {
outline: 2px solid var(--blog-color-accent);
outline-offset: -2px;
}
.blog-block-faq__toggle[aria-expanded="true"] {
color: var(--blog-color-accent);
background: var(--blog-color-accent-soft);
}
.blog-block-faq__icon {
flex-shrink: 0;
margin-left: var(--blog-space-3);
transition: transform 0.2s ease-out;
color: var(--blog-text-muted);
}
.blog-block-faq__toggle[aria-expanded="true"] .blog-block-faq__icon {
transform: rotate(180deg);
color: var(--blog-color-accent);
}
.blog-block-faq__panel {
overflow: hidden;
max-height: 0;
transition: max-height 0.25s ease-out;
}
.blog-block-faq__panel[data-blog-accordion-open] {
max-height: var(--blog-block-faq-panel-max, 40rem);
}
.blog-block-faq__body {
padding: 0 var(--blog-space-5) var(--blog-space-4);
color: var(--blog-text-primary);
line-height: var(--blog-leading-relaxed);
}
/* ==== ./blog/components/_block-image.css ==== */
/* presseIA — blog : bloc image (illustration inline)
────────────────────────────────────────────────────
Illustration intra-article proposée par le Writer et générée
post-EIC par asset.generate.inline_images. Format hérité du
hero (MediaImageGuidelines.aspectRatio, typiquement 16:9), mais
composition différente : sujet centré (≠ off-center hero pour
overlay title).
Markup : `templates/blog/blocks/_block.html.twig`
Validator : `BlockValidation::imageFailure()`
*/
.blog-block-image {
margin: var(--blog-space-5) 0;
width: 100%;
}
.blog-block-image__media {
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: var(--blog-radius-md);
background: var(--blog-surface-muted);
}
.blog-block-image__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 0;
}
/* Placeholder affiché quand asset_id manque (bloc Writer pré-génération,
échec partiel post-EIC, ou toggle autoGenerateInlineImages off). Visuel
discret : pas d'erreur intrusive — juste un repère neutre que ce slot
éditorial existe. Aussi vu sur /design/contents pour documenter le bloc. */
.blog-block-image__placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--blog-text-muted);
font-size: 2.5rem;
opacity: 0.4;
}
.blog-block-image__caption {
margin: var(--blog-space-2) 0 0 0;
font-size: var(--blog-text-sm);
color: var(--blog-text-muted);
font-style: italic;
text-align: center;
line-height: var(--blog-leading-snug);
}
/* ==== ./blog/components/_block-cta.css ==== */
/* presseIA — blog : bloc cta
─────────────────────────────
Appel à l'action (block_type = 'cta'). Bouton large centré, contraste
fort sur l'accent média. Pas de variantes secondaires pour rester
éditorial sobre (cf. brief : 1 CTA principal max).
Markup dans `templates/blog/blocks/_block.html.twig`.
*/
.blog-block-cta {
display: flex;
justify-content: center;
padding-block: var(--blog-space-3);
}
/* Sélecteur préfixé `a.blog-block-cta__button` pour passer devant
`.blog-body a { color: var(--blog-link) }` (spécificité 0,1,1) qui
sinon donnait au texte la couleur accent du média = couleur du fond
du bouton, texte invisible. */
a.blog-block-cta__button {
display: inline-flex;
align-items: center;
gap: var(--blog-space-2);
padding: var(--blog-space-3) var(--blog-space-6);
background: var(--blog-color-accent);
color: var(--blog-text-onAccent);
font-weight: 600;
font-size: var(--blog-text-base);
border-radius: var(--blog-radius-md);
text-decoration: none;
transition: background 0.15s, transform 0.1s;
}
a.blog-block-cta__button:hover {
background: var(--blog-color-accent-hover);
color: var(--blog-text-onAccent);
transform: translateY(-1px);
}
a.blog-block-cta__button:focus-visible {
outline: 2px solid var(--blog-color-accent);
outline-offset: 2px;
}
a.blog-block-cta__button--ghost {
background: transparent;
color: var(--blog-color-accent);
border: 1px solid var(--blog-color-accent);
}
a.blog-block-cta__button--ghost:hover {
background: var(--blog-color-accent-soft);
color: var(--blog-color-accent);
}
/* ==== ./blog/components/_block-callout.css ==== */
/* presseIA — blog : bloc callout (encadré éditorial)
─────────────────────────────────────────────────────
Encadré sémantique avec 4 variants (info, tip, warning, important).
Visuellement détaché du fil de prose principal — sert quand une info
utile casse le rythme narratif sans mériter sa propre section.
Markup : `templates/blog/blocks/_block.html.twig`
Validator : `BlockValidation::calloutFailure()` (variant requis, title
5-80 chars, body 40-400 chars)
Structure :
.blog-block-callout (--variant)
.blog-block-callout__icon
.blog-block-callout__body
.blog-block-callout__title
.blog-block-callout__text
*/
.blog-block-callout {
display: flex;
gap: var(--blog-space-4);
align-items: flex-start;
padding: var(--blog-space-4) var(--blog-space-5);
margin-block: var(--blog-space-5);
border-radius: var(--blog-radius-md);
border-left: 4px solid var(--blog-callout-accent, var(--blog-color-accent));
background: var(--blog-callout-bg, var(--blog-color-accent-soft));
color: var(--blog-text-primary);
}
.blog-block-callout__icon {
flex: 0 0 auto;
width: 2rem;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
color: var(--blog-callout-accent, var(--blog-color-accent));
font-size: 1.25rem;
/* Aligne l'icone sur la baseline du title (compense l'altitude visuelle
des icones Font Awesome) */
line-height: 1;
padding-top: 0.125rem;
}
.blog-block-callout__body {
flex: 1 1 auto;
min-width: 0;
}
.blog-block-callout__title {
font-family: var(--blog-font-heading);
font-size: var(--blog-text-base);
font-weight: 700;
line-height: var(--blog-leading-snug);
margin: 0 0 var(--blog-space-2) 0;
color: var(--blog-callout-accent, var(--blog-text-primary));
}
.blog-block-callout__text {
font-size: var(--blog-text-base);
line-height: var(--blog-leading-normal);
margin: 0;
color: var(--blog-text-primary);
}
/* ── Variants sémantiques ──────────────────────────────────────────────
Chaque variant override 2 custom-props : --blog-callout-accent (icone +
title + border-left) et --blog-callout-bg (fond doux). Ça garde
l'architecture lisible : un seul endroit où changer la couleur d'un
variant, pas du sélecteur composé partout.
*/
.blog-block-callout--info {
--blog-callout-accent: var(--blog-color-info);
--blog-callout-bg: var(--blog-color-info-soft);
}
.blog-block-callout--tip {
--blog-callout-accent: var(--blog-color-success);
--blog-callout-bg: var(--blog-color-success-soft);
}
.blog-block-callout--warning {
--blog-callout-accent: var(--blog-color-warning);
--blog-callout-bg: var(--blog-color-warning-soft);
}
.blog-block-callout--important {
--blog-callout-accent: var(--blog-color-accent);
--blog-callout-bg: var(--blog-color-accent-soft);
}
/* Mobile : on garde le flex (icone + body) mais on réduit le padding
horizontal pour respirer sur les petits écrans. */
@media (max-width: 575.98px) {
.blog-block-callout {
padding: var(--blog-space-3) var(--blog-space-4);
gap: var(--blog-space-3);
}
.blog-block-callout__icon {
width: 1.5rem;
height: 1.5rem;
font-size: 1rem;
}
}
/* ==== ./blog/components/_block-big-number.css ==== */
/* presseIA — blog : bloc big_number (chiffre clé en exergue)
──────────────────────────────────────────────────────────
Chiffre frappant + descriptif court + source optionnelle.
Bloc visuellement détaché, centré sur le chiffre (taille XL),
alignement vertical par défaut. Sert quand un chiffre est
SI saillant qu'il mérite d'être lu en premier au scan.
Markup : `templates/blog/blocks/_block.html.twig`
Validator : `BlockValidation::bigNumberFailure()`
(value 1-30 chars, label 5-120 chars, source 5-100 ou null)
Structure :
.blog-block-big-number
.blog-block-big-number__value (chiffre en XL)
.blog-block-big-number__label (descriptif court)
.blog-block-big-number__source (attribution, optionnelle)
*/
.blog-block-big-number {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--blog-space-2);
padding: var(--blog-space-5) var(--blog-space-4);
margin-block: var(--blog-space-5);
border-radius: var(--blog-radius-md);
background: var(--blog-color-accent-soft);
border-top: 3px solid var(--blog-color-accent);
}
.blog-block-big-number__value {
font-family: var(--blog-font-heading);
font-size: clamp(2.5rem, 6vw, 4rem);
line-height: 1;
font-weight: 800;
color: var(--blog-color-accent);
letter-spacing: var(--blog-tracking-tight, -0.02em);
}
.blog-block-big-number__label {
font-size: var(--blog-text-lg);
line-height: var(--blog-leading-snug);
font-weight: 500;
margin: 0;
color: var(--blog-text-primary);
max-width: 32rem;
}
.blog-block-big-number__source {
font-size: var(--blog-text-xs);
letter-spacing: var(--blog-tracking-wide);
text-transform: uppercase;
color: var(--blog-text-muted);
margin: var(--blog-space-1) 0 0 0;
}
/* Mobile : on resserre le padding vertical mais on garde le chiffre
XL — c'est l'élément clé du bloc, le compresser détruit son rôle. */
@media (max-width: 575.98px) {
.blog-block-big-number {
padding: var(--blog-space-4) var(--blog-space-3);
}
}
/* ==== ./blog/components/_footer.css ==== */
/* presseIA — blog : footer
─────────────────────────────
Pied de page éditorial : marque + signaux sociaux, navigation catégories,
menu secondaire du média, signup newsletter inline (sera factorisé en
macro au Lot 4.6), filet copyright + liens légaux.
Markup dans `templates/blog/_footer.html.twig`.
*/
.blog-footer {
background: var(--blog-surface-muted);
border-top: 1px solid var(--blog-border);
padding-block: var(--blog-space-7) var(--blog-space-5);
color: var(--blog-text-secondary);
}
/* Mobile : compression du padding pour rester cohérent avec les sections
au-dessus. La séparation visuelle avec le contenu se fait via le
background + border-top, plus besoin de margin-top. */
@media (max-width: 767.98px) {
.blog-footer {
padding-block: var(--blog-space-gutter);
}
}
.blog-footer__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--blog-space-5);
margin-bottom: var(--blog-space-5);
}
@media (min-width: 768px) {
.blog-footer__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) {
.blog-footer__grid {
grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.5fr);
}
}
/* Colonne brand : nom + tagline + social */
.blog-footer__column {
min-width: 0;
}
.blog-footer__brand-name {
font-family: var(--blog-font-heading);
font-weight: 700;
font-size: var(--blog-text-lg);
color: var(--blog-text-primary);
margin-bottom: var(--blog-space-2);
}
.blog-footer__brand-tagline {
font-size: var(--blog-text-sm);
color: var(--blog-text-muted);
margin: 0 0 var(--blog-space-3) 0;
line-height: var(--blog-leading-normal);
}
.blog-footer__social {
display: flex;
gap: var(--blog-space-3);
font-size: var(--blog-text-lg);
}
.blog-footer__social-link {
color: var(--blog-text-muted);
transition: color 0.15s;
text-decoration: none;
}
.blog-footer__social-link:hover {
color: var(--blog-color-accent);
}
/* Colonnes liens */
.blog-footer__column-title {
font-family: var(--blog-font-heading);
font-size: var(--blog-text-sm);
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--blog-tracking-wide);
color: var(--blog-text-primary);
margin: 0 0 var(--blog-space-3) 0;
}
.blog-footer__links {
display: grid;
gap: var(--blog-space-2);
}
.blog-footer__link {
color: var(--blog-text-secondary);
text-decoration: none;
font-size: var(--blog-text-sm);
transition: color 0.15s;
}
.blog-footer__link:hover {
color: var(--blog-color-accent);
}
/* La newsletter du footer est rendue par la macro newsletter_signup
(variant=footer) — styles dans `_newsletter-signup.css`. */
/* Filet bottom : copyright + liens légaux */
.blog-footer__bottom {
padding-top: var(--blog-space-3);
border-top: 1px solid var(--blog-border);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--blog-space-2);
font-size: var(--blog-text-sm);
color: var(--blog-text-muted);
}
.blog-footer__copyright {
margin: 0;
}
.blog-footer__legal-links {
display: flex;
flex-wrap: wrap;
gap: var(--blog-space-4);
}
.blog-footer__legal-link {
color: var(--blog-text-muted);
text-decoration: none;
transition: color 0.15s;
}
.blog-footer__legal-link:hover {
color: var(--blog-text-primary);
}
/* ==== ./blog/components/_newsletter-signup.css ==== */
/* presseIA — blog : newsletter-signup
─────────────────────────────────────
Formulaire d'inscription newsletter réutilisable, partagé entre le
footer (variant --footer, compact) et la section homepage inline
(variant --inline, pleine largeur side-by-side).
Macro Twig dans `templates/blog/_newsletter_signup.html.twig`.
*/
.blog-newsletter-signup {
display: flex;
flex-direction: column;
gap: var(--blog-space-3);
}
/* Variant inline : 2 colonnes ≥ lg, pitch et form côte-à-côte */
@media (min-width: 992px) {
.blog-newsletter-signup--inline {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--blog-space-5);
align-items: center;
}
}
.blog-newsletter-signup__pitch-wrap {
min-width: 0;
}
.blog-newsletter-signup__form-wrap {
min-width: 0;
}
/* Titre — taille variable selon le variant */
.blog-newsletter-signup__title {
font-family: var(--blog-font-heading);
font-weight: 700;
color: var(--blog-text-primary);
margin: 0 0 var(--blog-space-2) 0;
line-height: var(--blog-leading-snug);
}
.blog-newsletter-signup--footer .blog-newsletter-signup__title {
font-size: var(--blog-text-sm);
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--blog-tracking-wide);
margin-bottom: var(--blog-space-3);
}
.blog-newsletter-signup--inline .blog-newsletter-signup__title {
font-size: var(--blog-text-xl);
}
@media (min-width: 768px) {
.blog-newsletter-signup--inline .blog-newsletter-signup__title {
font-size: var(--blog-text-2xl);
}
}
/* Pitch sous le titre */
.blog-newsletter-signup__pitch {
font-size: var(--blog-text-sm);
color: var(--blog-text-muted);
margin: 0;
line-height: var(--blog-leading-normal);
}
.blog-newsletter-signup--inline .blog-newsletter-signup__pitch {
font-size: var(--blog-text-base);
}
/* Alert bandeau pending / already-confirmed */
.blog-newsletter-signup__alert {
padding: var(--blog-space-2) var(--blog-space-3);
border-radius: var(--blog-radius-sm);
font-size: var(--blog-text-sm);
margin-bottom: var(--blog-space-2);
}
.blog-newsletter-signup__alert--pending {
background: rgba(var(--blog-color-accent-rgb), 0.1);
color: var(--blog-color-accent-hover);
border: 1px solid rgba(var(--blog-color-accent-rgb), 0.25);
}
.blog-newsletter-signup__alert--info {
background: var(--blog-surface-elevated);
color: var(--blog-text-secondary);
border: 1px solid var(--blog-border);
}
/* Form input-group : input + submit collés, bord arrondi extérieur */
.blog-newsletter-signup__form {
display: flex;
align-items: stretch;
gap: 0;
}
.blog-newsletter-signup__input {
flex: 1 1 auto;
min-width: 0;
border: 1px solid var(--blog-border);
border-right: none;
border-radius: var(--blog-radius-md) 0 0 var(--blog-radius-md);
background: var(--blog-surface-elevated);
color: var(--blog-text-primary);
font-family: inherit;
}
.blog-newsletter-signup--footer .blog-newsletter-signup__input {
padding: var(--blog-space-2) var(--blog-space-3);
font-size: var(--blog-text-sm);
}
.blog-newsletter-signup--inline .blog-newsletter-signup__input {
padding: var(--blog-space-3) var(--blog-space-4);
font-size: var(--blog-text-base);
}
.blog-newsletter-signup__input:focus {
outline: none;
border-color: var(--blog-color-accent);
box-shadow: 0 0 0 3px rgba(var(--blog-color-accent-rgb), 0.15);
position: relative;
z-index: 1;
}
.blog-newsletter-signup__submit {
flex: 0 0 auto;
background: var(--blog-color-accent);
color: var(--blog-text-onAccent);
border: 1px solid var(--blog-color-accent);
border-radius: 0 var(--blog-radius-md) var(--blog-radius-md) 0;
font-weight: 600;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
font-family: inherit;
}
.blog-newsletter-signup--footer .blog-newsletter-signup__submit {
padding: var(--blog-space-2) var(--blog-space-4);
font-size: var(--blog-text-sm);
}
.blog-newsletter-signup--inline .blog-newsletter-signup__submit {
padding: var(--blog-space-3) var(--blog-space-5);
font-size: var(--blog-text-base);
}
.blog-newsletter-signup__submit:hover {
background: var(--blog-color-accent-hover);
border-color: var(--blog-color-accent-hover);
}
.blog-newsletter-signup__submit:focus-visible {
outline: 2px solid var(--blog-color-accent);
outline-offset: 2px;
}
.blog-newsletter-signup__honeypot {
position: absolute;
left: -9999px;
}
/* Wrapper de la section homepage `_newsletter_inline` — bande pleine
largeur sur fond teinté accent-soft, intercalée entre deux sections
éditoriales. Padding vertical aligné sur --blog-space-section-y pour
une présence forte sans rupture avec le rythme des autres sections.
Bordures 2px haut/bas qui marquent visuellement la coupure éditoriale
(correctif #4 review catalogue). */
.blog-newsletter-inline {
background: var(--blog-color-accent-soft);
border-top: 1px solid var(--blog-border);
border-bottom: 1px solid var(--blog-border);
padding-block: var(--blog-space-section-y);
}
/* ==== ./blog/components/_pagination.css ==== */
/* presseIA — blog : pagination
────────────────────────────────
Barre de pagination réutilisable pour catégorie, tag, recherche.
Markup dans `templates/blog/_pagination.html.twig` (macro pagination).
*/
.blog-pagination {
margin-top: var(--blog-space-6);
margin-bottom: var(--blog-space-4);
}
.blog-pagination__list {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--blog-space-1);
list-style: none;
margin: 0;
padding: 0;
}
.blog-pagination__item {
display: flex;
}
.blog-pagination__link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--blog-space-2);
min-width: 2.5rem;
height: 2.5rem;
padding: 0 var(--blog-space-3);
border: 1px solid var(--blog-border);
border-radius: var(--blog-radius-md);
background: var(--blog-surface-elevated);
color: var(--blog-text-primary);
font-size: var(--blog-text-sm);
font-weight: 500;
text-decoration: none;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.blog-pagination__link:hover {
background: var(--blog-color-accent-soft);
border-color: var(--blog-color-accent);
color: var(--blog-color-accent);
}
.blog-pagination__link:focus-visible {
outline: 2px solid var(--blog-color-accent);
outline-offset: 2px;
}
.blog-pagination__link--current {
background: var(--blog-color-accent);
border-color: var(--blog-color-accent);
color: var(--blog-text-onAccent);
font-weight: 700;
cursor: default;
}
.blog-pagination__link--current:hover {
background: var(--blog-color-accent);
color: var(--blog-text-onAccent);
}
.blog-pagination__link--disabled {
background: transparent;
border-color: var(--blog-border);
color: var(--blog-text-muted);
cursor: not-allowed;
opacity: 0.5;
}
.blog-pagination__link--disabled:hover {
background: transparent;
border-color: var(--blog-border);
color: var(--blog-text-muted);
}
.blog-pagination__ellipsis {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.5rem;
height: 2.5rem;
color: var(--blog-text-muted);
font-weight: 600;
}
/* Label texte des boutons prev/next — caché sur mobile pour gagner de la place */
.blog-pagination__label {
display: none;
}
@media (min-width: 576px) {
.blog-pagination__label {
display: inline;
}
}
/* ==== ./blog/components/_archive.css ==== */
/* presseIA — blog : archive (catégorie / tag / recherche)
────────────────────────────────────────────────────────
Styling commun aux pages listing : en-tête de section avec breadcrumb,
titre et count d'articles, puis grille d'articles cards. La pagination
est portée par `_pagination.css`.
Markup dans `templates/blog/category.html.twig` et `tag.html.twig`.
*/
.blog-archive-header {
background: var(--blog-surface-elevated);
border-bottom: 1px solid var(--blog-border);
/* Aligné sur `.blog-article-hero` pour que le breadcrumb soit à la
même hauteur entre la page liste (catégorie/tag) et la page
article — sinon décalage visible quand on navigue entre les deux. */
padding-block: var(--blog-space-5);
}
/* Mobile : aligne le padding vertical sur le gutter horizontal pour
éviter l'asymétrie sur viewport étroite (cf. même pattern dans
_article-hero.css et _layout.css). */
@media (max-width: 767.98px) {
.blog-archive-header {
padding-block: var(--blog-space-gutter);
}
}
.blog-archive-header__breadcrumb {
margin-bottom: var(--blog-space-3);
font-size: var(--blog-text-sm);
}
.blog-archive-header__breadcrumb .breadcrumb {
margin: 0;
}
.blog-archive-header__breadcrumb a {
color: var(--blog-text-muted);
text-decoration: none;
}
.blog-archive-header__breadcrumb a:hover {
color: var(--blog-color-accent);
}
.blog-archive-header__intro {
min-width: 0;
}
.blog-archive-header__title {
font-family: var(--blog-font-heading);
font-size: var(--blog-text-2xl);
font-weight: 700;
line-height: var(--blog-leading-tight);
color: var(--blog-text-primary);
margin: 0 0 var(--blog-space-1) 0;
}
@media (min-width: 768px) {
.blog-archive-header__title {
font-size: var(--blog-text-4xl);
}
}
.blog-archive-header__description {
margin: 0;
color: var(--blog-text-muted);
font-size: var(--blog-text-base);
line-height: var(--blog-leading-normal);
}
/* Tag header : variante compacte avec avatar icône */
.blog-archive-header--tag .blog-archive-header__intro {
display: flex;
align-items: center;
gap: var(--blog-space-3);
}
/* Corps : grille d'articles + pagination */
.blog-archive {
padding-block: var(--blog-space-6);
}
@media (max-width: 767.98px) {
.blog-archive {
padding-block: var(--blog-space-gutter);
}
}
/* Liste verticale de cards horizontales (image gauche, body droite, un
article par ligne). Pattern "manuel utile / service" : on lit ligne à
ligne plutôt qu'on scanne une grille. S'applique à toutes les pages
archive (catégorie / tag / recherche / auteur). */
.blog-archive-grid {
display: flex;
flex-direction: column;
gap: var(--blog-space-4);
}
/* Desktop : card horizontale (image gauche + body droite). Sur mobile,
on garde la card verticale d'origine (image au-dessus, body dessous) —
un layout horizontal en colonne 120px serait trop écrasé. */
@media (min-width: 768px) {
.blog-archive-grid > .blog-article-card {
display: grid;
grid-template-columns: 240px 1fr;
gap: 0;
}
/* Media : ratio 3/2 fixe, ne s'étire PAS verticalement même si le body
est plus haut (titre long sur plusieurs lignes). Sans align-self: start
la media hérite du `align-items: stretch` du grid et l'image se
retrouve étirée → tailles inégales d'une card à l'autre.
Override de .blog-media (aspect-ratio: 16/9). */
.blog-archive-grid > .blog-article-card .blog-article-card__media {
aspect-ratio: 3 / 2;
align-self: start;
}
/* Titre limité à 2 lignes pour garder la rangée alignée et éviter
qu'un titre fleuve écrase la verticale d'une card par rapport à ses
voisines. Mobile : pas de clamp, la card est verticale et le titre
est libre. */
.blog-archive-grid > .blog-article-card .blog-article-card__title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
.blog-archive__empty {
padding: var(--blog-space-6);
background: var(--blog-surface-muted);
border: 1px solid var(--blog-border);
border-radius: var(--blog-radius-md);
text-align: center;
color: var(--blog-text-muted);
}
/* ==== ./blog/components/_search.css ==== */
/* presseIA — blog : recherche
───────────────────────────────
Page de recherche : form, en-tête résultats, état vide.
La grille des résultats réutilise `.blog-archive-grid` et la pagination
réutilise `.blog-pagination` (cf. _archive.css et _pagination.css).
Markup dans `templates/blog/search.html.twig`.
*/
.blog-search {
padding-block: var(--blog-space-6);
}
@media (max-width: 767.98px) {
.blog-search {
padding-block: var(--blog-space-gutter);
}
}
.blog-search__header {
margin-bottom: var(--blog-space-5);
}
.blog-search__title {
font-family: var(--blog-font-heading);
font-size: var(--blog-text-2xl);
font-weight: 700;
color: var(--blog-text-primary);
margin: 0 0 var(--blog-space-4) 0;
line-height: var(--blog-leading-tight);
}
@media (min-width: 768px) {
.blog-search__title {
font-size: var(--blog-text-3xl);
}
}
/* Form recherche : input + bouton */
.blog-search-form {
display: flex;
flex-wrap: wrap;
gap: var(--blog-space-2);
align-items: stretch;
}
.blog-search-form__field {
position: relative;
flex: 1 1 16rem;
min-width: 0;
display: flex;
align-items: stretch;
background: var(--blog-surface-elevated);
border: 1px solid var(--blog-border);
border-radius: var(--blog-radius-md);
transition: border-color 0.15s, box-shadow 0.15s;
}
.blog-search-form__field:focus-within {
border-color: var(--blog-color-accent);
box-shadow: 0 0 0 3px rgba(var(--blog-color-accent-rgb), 0.15);
}
.blog-search-form__icon {
display: flex;
align-items: center;
justify-content: center;
padding-inline: var(--blog-space-3);
color: var(--blog-text-muted);
flex-shrink: 0;
}
.blog-search-form__input {
flex: 1 1 auto;
min-width: 0;
padding: var(--blog-space-3) 0;
border: none;
background: transparent;
color: var(--blog-text-primary);
font-size: var(--blog-text-base);
font-family: inherit;
}
.blog-search-form__input:focus {
outline: none;
}
.blog-search-form__clear {
display: flex;
align-items: center;
justify-content: center;
padding-inline: var(--blog-space-3);
color: var(--blog-text-muted);
text-decoration: none;
transition: color 0.15s;
flex-shrink: 0;
}
.blog-search-form__clear:hover {
color: var(--blog-text-primary);
}
.blog-search-form__submit {
flex: 0 0 auto;
padding: 0 var(--blog-space-5);
background: var(--blog-color-accent);
color: var(--blog-text-onAccent);
border: 1px solid var(--blog-color-accent);
border-radius: var(--blog-radius-md);
font-size: var(--blog-text-base);
font-weight: 600;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
font-family: inherit;
}
.blog-search-form__submit:hover {
background: var(--blog-color-accent-hover);
border-color: var(--blog-color-accent-hover);
}
.blog-search-form__submit:focus-visible {
outline: 2px solid var(--blog-color-accent);
outline-offset: 2px;
}
/* En-tête de résultats : "X résultats pour « query »" */
.blog-search__results-summary {
color: var(--blog-text-muted);
font-size: var(--blog-text-base);
margin: var(--blog-space-5) 0 var(--blog-space-4) 0;
}
.blog-search__results-summary strong {
color: var(--blog-text-primary);
font-weight: 600;
}
/* État vide : aucun résultat */
.blog-search__empty {
margin-top: var(--blog-space-5);
padding: var(--blog-space-7) var(--blog-space-5);
background: var(--blog-surface-muted);
border: 1px solid var(--blog-border);
border-radius: var(--blog-radius-md);
text-align: center;
}
.blog-search__empty-icon {
font-size: var(--blog-text-4xl);
color: var(--blog-text-muted);
display: block;
margin-bottom: var(--blog-space-3);
}
.blog-search__empty-title {
color: var(--blog-text-primary);
font-weight: 600;
margin: 0 0 var(--blog-space-1) 0;
}
.blog-search__empty-hint {
color: var(--blog-text-muted);
font-size: var(--blog-text-sm);
margin: 0;
}
/* ==== ./blog/components/_error.css ==== */
/* presseIA — blog : pages d'erreur (404, 5xx)
──────────────────────────────────────────────
Pages standalone affichées via TwigBundle/Exception. Layout sobre :
code d'erreur en gros chiffres, titre, hint, deux boutons d'action.
Markup dans `templates/bundles/TwigBundle/Exception/error*.html.twig`.
*/
.blog-error {
padding-block: var(--blog-space-9) var(--blog-space-8);
text-align: center;
}
@media (max-width: 767.98px) {
.blog-error {
padding-block: var(--blog-space-gutter);
}
}
.blog-error__code {
font-family: var(--blog-font-heading);
font-size: clamp(4rem, 18vw, 9rem);
font-weight: 800;
line-height: 1;
letter-spacing: var(--blog-tracking-tight);
color: var(--blog-color-accent);
margin: 0 0 var(--blog-space-3) 0;
}
.blog-error__title {
font-family: var(--blog-font-heading);
font-size: var(--blog-text-2xl);
font-weight: 700;
color: var(--blog-text-primary);
line-height: var(--blog-leading-tight);
margin: 0 0 var(--blog-space-3) 0;
}
@media (min-width: 768px) {
.blog-error__title {
font-size: var(--blog-text-4xl);
}
}
.blog-error__hint {
max-width: 36rem;
margin: 0 auto var(--blog-space-6);
color: var(--blog-text-muted);
font-size: var(--blog-text-base);
line-height: var(--blog-leading-normal);
}
.blog-error__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--blog-space-3);
}
/* Sélecteur préfixé `a.blog-error__action` pour passer devant
`.blog-body a { color: var(--blog-link) }` (spécificité 0,1,1) qui
sinon donnait au texte la couleur accent du média = couleur du fond
du bouton primary, texte invisible. */
a.blog-error__action {
display: inline-flex;
align-items: center;
gap: var(--blog-space-2);
padding: var(--blog-space-3) var(--blog-space-5);
border: 1px solid var(--blog-border);
border-radius: var(--blog-radius-md);
background: var(--blog-surface-elevated);
color: var(--blog-text-primary);
font-weight: 500;
text-decoration: none;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
a.blog-error__action:hover {
background: var(--blog-color-accent-soft);
border-color: var(--blog-color-accent);
color: var(--blog-color-accent);
}
a.blog-error__action--primary {
background: var(--blog-color-accent);
border-color: var(--blog-color-accent);
color: var(--blog-text-onAccent);
}
a.blog-error__action--primary:hover {
background: var(--blog-color-accent-hover);
border-color: var(--blog-color-accent-hover);
color: var(--blog-text-onAccent);
}
a.blog-error__action:focus-visible {
outline: 2px solid var(--blog-color-accent);
outline-offset: 2px;
}
/* ==== ./blog/components/_category-grid.css ==== */
/* presseIA — blog : section category_grid (V2)
────────────────────────────────────────────────
Grille de cards navigationnelles vers les catégories du média.
Chaque card : cover image (ou initiale dégradée fallback) + nom +
count d'articles. Tap zone large, hover discret.
Markup dans `templates/blog/sections/_category_grid.html.twig`.
*/
.blog-category-grid {
padding-block: var(--blog-space-section-y);
}
.blog-category-grid__header {
margin-bottom: var(--blog-space-5);
}
.blog-category-grid__title {
font-family: var(--blog-font-heading);
font-size: var(--blog-text-2xl);
font-weight: 700;
color: var(--blog-text-primary);
margin: 0;
line-height: var(--blog-leading-tight);
}
.blog-category-grid__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--blog-space-4);
}
@media (min-width: 768px) {
.blog-category-grid__list {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 992px) {
.blog-category-grid__list {
grid-template-columns: repeat(4, 1fr);
}
}
/* Card catégorie : image en haut, nom + count en bas */
.blog-category-grid__card {
display: flex;
flex-direction: column;
border: 1px solid var(--blog-border);
border-radius: var(--blog-radius-md);
background: var(--blog-surface-elevated);
overflow: hidden;
text-decoration: none;
color: inherit;
transition: transform 0.15s ease-out, border-color 0.15s, box-shadow 0.15s;
}
.blog-category-grid__card:hover {
transform: translateY(-2px);
border-color: var(--blog-color-accent);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
.blog-category-grid__card:focus-visible {
outline: 2px solid var(--blog-color-accent);
outline-offset: 2px;
}
/* Zone média : image ou fallback "initiale" */
.blog-category-grid__media {
aspect-ratio: 16 / 10;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: linear-gradient(
135deg,
var(--blog-color-accent-soft),
rgba(var(--blog-color-accent-rgb), 0.25)
);
}
.blog-category-grid__image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.blog-category-grid__initial {
font-family: var(--blog-font-heading);
font-size: var(--blog-text-5xl);
font-weight: 800;
color: var(--blog-color-accent);
line-height: 1;
letter-spacing: var(--blog-tracking-tight);
}
/* Corps : nom + count */
.blog-category-grid__body {
padding: var(--blog-space-3) var(--blog-space-4);
display: flex;
flex-direction: column;
gap: var(--blog-space-1);
}
.blog-category-grid__name {
font-family: var(--blog-font-heading);
font-weight: 700;
font-size: var(--blog-text-base);
color: var(--blog-text-primary);
transition: color 0.15s;
}
.blog-category-grid__card:hover .blog-category-grid__name {
color: var(--blog-color-accent);
}
.blog-category-grid__count {
font-size: var(--blog-text-sm);
color: var(--blog-text-muted);
}
/* ==== ./blog/components/_featured-dossier.css ==== */
/* presseIA — blog : section featured_dossier
--------------------------------------------
Section "dossier éditorial fort" : un seul article mis en avant
façon magazine — bandeau image cinéma (21:9), bloc texte centré
ramassé en dessous, sur surface muted pour se distinguer des
autres sections homepage.
Markup :
*/
.blog-featured-dossier {
background: var(--blog-surface-muted);
/* padding-block hérité de .blog-section via --blog-space-section-y
— homogénéisation au correctif #6 review catalogue. */
}
/* Mode dégradé : pas d'image hero disponible. On resserre le padding
vertical pour ne pas laisser une bande vide perçue comme un trou dans
le flux (correctif #3 review catalogue). */
.blog-featured-dossier--no-media {
padding-block: var(--blog-space-7);
}
@media (max-width: 767.98px) {
.blog-featured-dossier--no-media {
padding-block: var(--blog-space-gutter);
}
}
.blog-featured-dossier--no-media .blog-featured-dossier__title {
/* Titre plus serré quand pas d'image — la hiérarchie change. */
margin-bottom: var(--blog-space-3);
}
.blog-featured-dossier__shell {
max-width: 64rem;
margin-inline: auto;
padding-inline: var(--blog-space-gutter);
}
/* Label "dossier" — petit chapeau accent au-dessus de l'image,
évoque la rubrique magazine. Centré pour rester cohérent
avec le body. */
.blog-featured-dossier__label {
display: flex;
align-items: center;
justify-content: center;
gap: var(--blog-space-2);
text-transform: uppercase;
letter-spacing: var(--blog-tracking-wide);
font-size: var(--blog-text-xs);
font-weight: 700;
color: var(--blog-color-accent);
margin-bottom: var(--blog-space-4);
}
.blog-featured-dossier__label-dot {
width: 0.4rem;
height: 0.4rem;
border-radius: 50%;
background: var(--blog-color-accent);
flex-shrink: 0;
}
/* Image bandeau cinéma. Lien englobant pour zone de clic large
(l'image et le titre pointent au même endroit). */
.blog-featured-dossier__media {
display: block;
aspect-ratio: 21 / 9;
overflow: hidden;
border-radius: var(--blog-radius-md);
background: var(--blog-surface-elevated);
margin-bottom: var(--blog-space-6);
}
.blog-featured-dossier__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.blog-featured-dossier__media:hover img {
transform: scale(1.02);
}
.blog-featured-dossier__media .blog-img-placeholder {
width: 100%;
height: 100%;
border-radius: 0;
}
/* Bloc texte centré sous l'image — largeur de lecture confortable. */
.blog-featured-dossier__body {
max-width: 44rem;
margin-inline: auto;
text-align: center;
}
.blog-featured-dossier__body > .blog-kicker {
margin-bottom: var(--blog-space-3);
}
.blog-featured-dossier__title {
font-size: var(--blog-text-3xl);
line-height: var(--blog-leading-tight);
margin: 0 0 var(--blog-space-4);
}
@media (min-width: 768px) {
.blog-featured-dossier__title {
font-size: var(--blog-text-4xl);
}
}
@media (min-width: 1200px) {
.blog-featured-dossier__title {
font-size: var(--blog-text-5xl);
}
}
.blog-featured-dossier__title a {
color: inherit;
text-decoration: none;
transition: color 0.15s;
}
.blog-featured-dossier__title a:hover {
color: var(--blog-color-accent);
}
/* Dek : excerpt en lead, italique serif léger — feeling magazine.
Hérite font-heading via `.blog-body h1…h6`, donc passer en serif
ici via héritage n'est pas dispo (c'est un ). On reste sur
font-body avec italic pour la nuance éditoriale. */
.blog-featured-dossier__dek {
font-size: var(--blog-text-lg);
line-height: var(--blog-leading-relaxed);
color: var(--blog-text-secondary);
margin: 0 0 var(--blog-space-5);
font-style: italic;
}
/* Méta : centrée pour s'aligner sur le bloc body. */
.blog-featured-dossier__body .blog-meta {
justify-content: center;
}
/* ==== ./blog/components/_hero-section.css ==== */
/* presseIA — blog : sections hero homepage
------------------------------------------
Partagé par les sections `hero_main_with_sidebar` et
`hero_with_secondary_cards` (Lot 5.3).
Classes :
.blog-hero-section wrapper article principal
.blog-hero-title titre — taille hero secondaire par défaut
.blog-hero-title--xl variante hero principal homepage (plus grosse)
.blog-hero-kickers groupe kicker + badge "À la une"
.blog-hero-aside sidebar verticale d'articles compacts
.blog-hero-aside__item article horizontal compact (image + body)
.blog-hero-aside__media image carrée 6rem
.blog-hero-aside__title h3 compact
Les règles de hover sur `.blog-hero-title a` et
`.blog-card-title a` restent dans `blog.css` (utilitaires
transverses) pour ne pas dupliquer.
*/
/* ── Titre hero — sizes ─────────────────────────────────────────── */
.blog-hero-title {
font-size: var(--blog-text-2xl);
line-height: var(--blog-leading-tight);
margin: 0 0 var(--blog-space-3);
}
/* Hero principal homepage — taille éditoriale progressive selon viewport,
resserrée d'un cran à chaque palier pour s'aligner sur la posture
"manuel utile / service" du reste du blog (titres pages moins gros). */
.blog-hero-title--xl {
font-size: var(--blog-text-2xl);
margin-bottom: var(--blog-space-4);
}
@media (min-width: 768px) {
.blog-hero-title--xl {
font-size: var(--blog-text-3xl);
}
}
@media (min-width: 1200px) {
.blog-hero-title--xl {
font-size: var(--blog-text-4xl);
}
}
/* ── Kickers (groupe catégorie + badge "À la une") ─────────────── */
.blog-hero-kickers {
display: flex;
flex-wrap: wrap;
gap: var(--blog-space-2);
margin-bottom: var(--blog-space-3);
}
/* ── Media hero (espacement standardisé sous l'image) ──────────── */
.blog-hero-section__media {
margin-bottom: var(--blog-space-4);
}
/* Espacement entre le hero principal et la rangée de cards
secondaires (hero_with_secondary_cards). Sélecteur spécifique
au pattern — pas un utilitaire général. Calibré à space-4 (16px)
pour atterrir sur ~40-48px ressenti avec le gutter g-4 de la row
Bootstrap qui suit (correctif #8 review catalogue). */
.blog-hero-section + .row {
margin-top: var(--blog-space-4);
}
/* ── Sidebar verticale (hero_main_with_sidebar) ─────────────────── */
.blog-hero-aside {
display: flex;
flex-direction: column;
gap: var(--blog-space-4);
height: 100%;
}
.blog-hero-aside__item {
display: flex;
gap: var(--blog-space-3);
align-items: flex-start;
}
.blog-hero-aside__media {
flex: 0 0 6rem;
width: 6rem;
}
.blog-hero-aside__body {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--blog-space-1);
}
.blog-hero-aside__title {
font-size: var(--blog-text-base);
line-height: var(--blog-leading-snug);
margin: 0;
}
/* ==== ./blog/components/_vertical-list.css ==== */
/* presseIA — blog : section vertical_list
----------------------------------------
Liste verticale dense d'articles enrichie :
- thumbnail carrée 88×88 à gauche
- titre + excerpt 2 lignes au centre
- meta à droite sur lg+, sous le contenu sinon
- quand `--numbered` : gros chiffre serif à l'extrême gauche
(classement éditorial type Most Popular)
Remplace l'ancien usage de `.list-group .list-group-flush` Bootstrap.
Markup :
*/
.blog-vertical-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
counter-reset: blog-vertical-rank;
}
.blog-vertical-list__item {
display: flex;
gap: var(--blog-space-3);
align-items: flex-start;
padding-block: var(--blog-space-4);
border-bottom: 1px solid var(--blog-border);
}
.blog-vertical-list__item:first-child {
padding-top: 0;
}
.blog-vertical-list__item:last-child {
border-bottom: 0;
padding-bottom: 0;
}
/* Chiffre de classement — gros chiffre serif à l'extrême gauche.
Style "Most Popular" éditorial. */
.blog-vertical-list__rank {
flex: 0 0 auto;
font-family: var(--blog-font-heading);
font-weight: 700;
font-size: 3.5rem;
line-height: 0.9;
color: var(--blog-color-accent);
min-width: 3rem;
text-align: center;
align-self: center;
user-select: none;
}
/* Thumbnail carrée — link wrapper pour cliquabilité visuelle */
.blog-vertical-list__thumb {
flex: 0 0 auto;
width: 88px;
height: 88px;
overflow: hidden;
border-radius: 4px;
display: block;
background: var(--blog-surface-muted);
}
.blog-vertical-list__thumb img,
.blog-vertical-list__thumb .blog-img-placeholder {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Bloc contenu — flex column, prend tout l'espace restant */
.blog-vertical-list__body {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--blog-space-1);
}
.blog-vertical-list__title {
font-size: var(--blog-text-lg);
line-height: var(--blog-leading-snug);
margin: 0;
/* line-clamp 2 lignes pour homogénéiser les hauteurs */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-clamp: 2;
overflow: hidden;
}
.blog-vertical-list__excerpt {
font-size: var(--blog-text-sm);
color: var(--blog-text-secondary);
line-height: var(--blog-leading-normal);
margin: 0;
max-width: 70ch;
/* line-clamp 2 lignes */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-clamp: 2;
overflow: hidden;
}
/* Mobile : thumbnail réduite + rank plus petit */
@media (max-width: 575px) {
.blog-vertical-list__rank {
font-size: 2.25rem;
min-width: 2rem;
}
.blog-vertical-list__thumb {
width: 64px;
height: 64px;
}
.blog-vertical-list__excerpt {
display: none;
}
}
/* ==== ./blog/components/_grid-articles.css ==== */
/* grid_articles — grille d'articles flex avec dernière ligne centrée
automatiquement quand `count(items) % cols != 0`.
Volontairement en flexbox (vs CSS Grid) pour bénéficier de
`justify-content: center` qui centre les items orphelins de la
dernière ligne sans tricks `:nth-child(N of)`. Sur les lignes pleines,
`justify-content: center` est un no-op (la largeur cumulée des items
+ gaps = 100%, pas d'espace à distribuer). */
.blog-grid-articles {
display: flex;
flex-wrap: wrap;
gap: var(--blog-space-4);
justify-content: center;
}
.blog-grid-articles__item {
/* width par défaut (mobile-first) : pleine largeur sur < sm */
width: 100%;
}
/* sm+ : 2 colonnes pour les 2 variantes */
@media (min-width: 576px) {
.blog-grid-articles__item {
width: calc((100% - var(--blog-space-4)) / 2);
}
}
/* lg+ : 3 ou 4 colonnes selon le variant */
@media (min-width: 992px) {
.blog-grid-articles--cols-3 > .blog-grid-articles__item {
width: calc((100% - 2 * var(--blog-space-4)) / 3);
}
.blog-grid-articles--cols-4 > .blog-grid-articles__item {
width: calc((100% - 3 * var(--blog-space-4)) / 4);
}
}
/* ==== ./blog/components/_category-spotlight.css ==== */
/* category_spotlight (V2) — projecteur sur une catégorie.
Différenciation vs feature_with_mini_cards : un eyebrow "DANS LA
CATÉGORIE" en haut + titre catégorie large. Pattern éditorial qui
signale immédiatement la bascule thématique au lecteur.
(correctif #5 review catalogue) */
.blog-category-spotlight__header {
margin-bottom: var(--blog-space-5);
}
.blog-category-spotlight__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--blog-space-1);
text-transform: uppercase;
letter-spacing: var(--blog-tracking-wider, 0.08em);
font-size: var(--blog-text-xs);
font-weight: 700;
color: var(--blog-color-accent);
margin-bottom: var(--blog-space-2);
}
.blog-category-spotlight__eyebrow-arrow {
font-size: var(--blog-text-base);
line-height: 1;
color: var(--blog-color-accent);
}
.blog-category-spotlight__heading-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--blog-space-4);
flex-wrap: wrap;
border-bottom: 2px solid var(--blog-text-primary);
padding-bottom: var(--blog-space-3);
}
.blog-category-spotlight__title {
font-family: var(--blog-font-heading);
font-weight: 700;
font-size: var(--blog-text-3xl);
line-height: var(--blog-leading-tight);
margin: 0;
color: var(--blog-text-primary);
}
@media (min-width: 768px) {
.blog-category-spotlight__title {
font-size: var(--blog-text-4xl);
}
}
/* ==== ./blog/components/_thumb-list.css ==== */
/* Thumb-list — liste à thumbnail horizontale partagée (sidebar
feature_with_mini_cards + category_spotlight).
Format : thumbnail carrée 80×80 à gauche (flex-shrink:0), bloc texte
à droite (flex:1). Titre line-clamp 2 lignes. Séparateur fin entre
items. Responsive : pas de bascule verticale en mobile — on garde
la densité.
Distinct de `_vertical-list.css` qui est pleine largeur et accueille
un excerpt. */
.blog-thumb-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.blog-thumb-list__item {
display: flex;
gap: var(--blog-space-3);
align-items: flex-start;
padding-block: var(--blog-space-3);
border-bottom: 1px solid var(--blog-border);
}
.blog-thumb-list__item:first-child {
padding-top: 0;
}
.blog-thumb-list__item:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.blog-thumb-list__thumb {
flex: 0 0 auto;
width: 80px;
height: 80px;
overflow: hidden;
border-radius: 4px;
display: block;
background: var(--blog-surface-muted);
}
.blog-thumb-list__thumb img,
.blog-thumb-list__thumb .blog-img-placeholder {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.blog-thumb-list__body {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--blog-space-1);
}
.blog-thumb-list__title {
font-family: var(--blog-font-heading);
font-size: var(--blog-text-base);
font-weight: 700;
line-height: var(--blog-leading-snug);
margin: 0;
color: var(--blog-text-primary);
/* line-clamp 2 lignes — homogénéise la hauteur des items et
garantit que la sidebar reste compacte pour matcher la featured. */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-clamp: 2;
overflow: hidden;
}
.blog-thumb-list__title a {
color: inherit;
text-decoration: none;
transition: color 0.15s;
}
.blog-thumb-list__title a:hover {
color: var(--blog-color-accent);
}
/* ==== ./blog/components/_prose.css ==== */
/* presseIA — blog : prose (markdown rendu)
------------------------------------------
Styling générique pour du HTML libre généré par un filtre markdown
(content_page, bio auteur, descriptions…). Distinct de
`.blog-article-body` qui style des blocs ContentBlock structurés.
Markup :
{{ html_brut_markdown_render|raw }}
*/
.blog-prose {
font-size: var(--blog-text-base);
line-height: var(--blog-leading-relaxed);
color: var(--blog-text-primary);
}
.blog-prose > * {
margin-top: 0;
margin-bottom: 0;
}
.blog-prose > * + * {
margin-top: var(--blog-space-4);
}
/* Titres internes */
.blog-prose h2 {
font-size: var(--blog-text-2xl);
line-height: var(--blog-leading-tight);
margin-top: var(--blog-space-7);
margin-bottom: var(--blog-space-3);
}
/* Mobile : resserrage du saut avant h2 (cf. _article-body.css). */
@media (max-width: 767.98px) {
.blog-prose h2 {
margin-top: var(--blog-space-5);
}
}
.blog-prose h2:first-child {
margin-top: 0;
}
.blog-prose h3 {
font-size: var(--blog-text-xl);
line-height: var(--blog-leading-tight);
margin-top: var(--blog-space-6);
margin-bottom: var(--blog-space-2);
}
.blog-prose h4 {
font-size: var(--blog-text-lg);
line-height: var(--blog-leading-tight);
margin-top: var(--blog-space-5);
margin-bottom: var(--blog-space-2);
}
/* Liens — accent sobre, underline visible (vs reset du `.blog-body a`
global qui n'a pas d'underline par défaut). */
.blog-prose a {
color: var(--blog-color-accent);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.blog-prose a:hover {
color: var(--blog-color-accent-hover);
text-decoration-thickness: 2px;
}
/* Listes */
.blog-prose ul,
.blog-prose ol {
padding-left: var(--blog-space-5);
}
.blog-prose ul { list-style: disc; }
.blog-prose ol { list-style: decimal; }
.blog-prose li + li {
margin-top: var(--blog-space-2);
}
/* Citation */
.blog-prose blockquote {
padding: var(--blog-space-3) var(--blog-space-5);
border-left: 3px solid var(--blog-color-accent);
background: var(--blog-surface-muted);
border-radius: 0 var(--blog-radius-sm) var(--blog-radius-sm) 0;
font-style: italic;
color: var(--blog-text-secondary);
}
.blog-prose blockquote > p:last-child {
margin-bottom: 0;
}
/* Code */
.blog-prose code {
font-family: var(--blog-font-mono);
font-size: 0.9em;
background: var(--blog-surface-muted);
padding: 0.1em 0.35em;
border-radius: var(--blog-radius-xs);
}
.blog-prose pre {
background: var(--blog-color-neutral-950);
color: var(--blog-color-neutral-50);
padding: var(--blog-space-4);
border-radius: var(--blog-radius-sm);
overflow-x: auto;
font-family: var(--blog-font-mono);
font-size: var(--blog-text-sm);
line-height: var(--blog-leading-snug);
}
.blog-prose pre code {
background: transparent;
padding: 0;
color: inherit;
font-size: inherit;
}
/* Tableau */
.blog-prose table {
width: 100%;
border-collapse: collapse;
font-size: var(--blog-text-sm);
}
.blog-prose th,
.blog-prose td {
text-align: left;
padding: var(--blog-space-2) var(--blog-space-3);
border-bottom: 1px solid var(--blog-border);
}
.blog-prose th {
background: var(--blog-surface-muted);
font-weight: 600;
}
/* Séparateur horizontal */
.blog-prose hr {
border: 0;
height: 1px;
background: var(--blog-border);
margin: var(--blog-space-6) 0;
}
/* Image inline */
.blog-prose img {
border-radius: var(--blog-radius-sm);
max-width: 100%;
height: auto;
}
/* ==== ./blog/components/_content-page.css ==== */
/* presseIA — blog : page de contenu statique (mentions légales,
CGU, politique de confidentialité…).
---------------------------------------------------------------
Largeur de lecture confortable (44rem via `.blog-container-narrow`),
header avec border-bottom sobre, corps via `.blog-prose` pour le
markdown rendu.
*/
.blog-content-page__header {
padding-bottom: var(--blog-space-4);
margin-bottom: var(--blog-space-6);
border-bottom: 1px solid var(--blog-border);
}
.blog-content-page__title {
font-size: var(--blog-text-2xl);
line-height: var(--blog-leading-tight);
margin: 0 0 var(--blog-space-2);
}
@media (min-width: 768px) {
.blog-content-page__title {
font-size: var(--blog-text-4xl);
}
}
.blog-content-page__updated {
font-size: var(--blog-text-sm);
color: var(--blog-text-muted);
margin: 0;
}
/* ==== ./blog/components/_contact.css ==== */
/* presseIA — blog : page contact
--------------------------------
Layout split chaleureux : bloc édito (3 raisons d'écrire + note
modération) à gauche, formulaire dans une card à droite. Sur
mobile : empilé, édito au-dessus.
*/
.blog-contact-header {
margin-bottom: var(--blog-space-6);
text-align: center;
}
.blog-contact-header__title {
font-size: var(--blog-text-2xl);
line-height: var(--blog-leading-tight);
margin: 0 0 var(--blog-space-3);
}
@media (min-width: 768px) {
.blog-contact-header__title {
font-size: var(--blog-text-4xl);
}
}
.blog-contact-header__pitch {
font-size: var(--blog-text-lg);
color: var(--blog-text-secondary);
max-width: 36rem;
margin: 0 auto;
line-height: var(--blog-leading-relaxed);
}
/* Grille split — desktop ≥ lg, empilé en dessous */
.blog-contact-grid {
display: grid;
gap: var(--blog-space-6);
}
@media (min-width: 992px) {
.blog-contact-grid {
grid-template-columns: 5fr 7fr;
gap: var(--blog-space-7);
align-items: start;
}
}
/* Aside édito — 3 raisons d'écrire + note */
.blog-contact-aside {
display: flex;
flex-direction: column;
gap: var(--blog-space-5);
}
.blog-contact-aside__reason {
display: flex;
gap: var(--blog-space-3);
align-items: flex-start;
}
.blog-contact-aside__reason-icon {
flex: 0 0 2.25rem;
width: 2.25rem;
height: 2.25rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--blog-color-accent-soft);
color: var(--blog-color-accent);
font-size: var(--blog-text-base);
}
.blog-contact-aside__reason-body {
flex: 1 1 auto;
}
.blog-contact-aside__reason-title {
font-family: var(--blog-font-heading);
font-size: var(--blog-text-base);
font-weight: 700;
margin: 0 0 var(--blog-space-1);
color: var(--blog-text-primary);
}
.blog-contact-aside__reason-pitch {
font-size: var(--blog-text-sm);
color: var(--blog-text-muted);
margin: 0;
line-height: var(--blog-leading-snug);
}
.blog-contact-aside__note {
padding: var(--blog-space-4);
background: var(--blog-surface-muted);
border-radius: var(--blog-radius-md);
font-size: var(--blog-text-sm);
color: var(--blog-text-secondary);
line-height: var(--blog-leading-snug);
margin: 0;
}
/* Actions du formulaire — bouton aligné à droite */
.blog-contact-form-actions {
display: flex;
justify-content: flex-end;
margin-top: var(--blog-space-4);
}
/* Espacement entre l'alerte succès et la grille en dessous */
.blog-contact-alert {
margin-bottom: var(--blog-space-5);
}
/* ==== ./blog/components/_author-page.css ==== */
/* presseIA — blog : page auteur
-------------------------------
En-tête simple : breadcrumb + titre + nb articles. La carte de visite
complète (avatar + bio enrichie) est désormais portée par
`templates/blog/sidebar/_author_card.html.twig` (cf. `_sidebar.css`).
Le listing d'articles utilise `.blog-archive-grid`, partagé avec
catégorie / tag / recherche.
*/
.blog-author-header {
background: var(--blog-surface-elevated);
border-bottom: 1px solid var(--blog-border);
padding-block: var(--blog-space-6);
}
@media (max-width: 767.98px) {
.blog-author-header {
padding-block: var(--blog-space-gutter);
}
}
.blog-author-header__breadcrumb {
margin-bottom: var(--blog-space-4);
font-size: var(--blog-text-sm);
}
.blog-author-header__title {
font-size: var(--blog-text-2xl);
line-height: var(--blog-leading-tight);
margin: 0 0 var(--blog-space-2) 0;
}
@media (min-width: 768px) {
.blog-author-header__title {
font-size: var(--blog-text-4xl);
}
}
.blog-author-header__subtitle {
margin: 0;
color: var(--blog-text-muted);
font-size: var(--blog-text-base);
}
/* ==== ./blog/components/_newsletter-status.css ==== */
/* presseIA — blog : page de statut newsletter (confirmed / unsubscribed).
--------------------------------------------------------------------
Page de feedback courte, centrée, avec une grande icône d'état.
*/
.blog-newsletter-status {
max-width: 36rem;
margin-inline: auto;
padding-inline: var(--blog-space-gutter);
text-align: center;
}
.blog-newsletter-status__icon {
font-size: 3rem;
line-height: 1;
margin-bottom: var(--blog-space-4);
}
.blog-newsletter-status__icon--success {
color: var(--blog-color-success);
}
.blog-newsletter-status__icon--neutral {
color: var(--blog-text-muted);
}
.blog-newsletter-status__title {
font-size: var(--blog-text-2xl);
line-height: var(--blog-leading-tight);
margin: 0 0 var(--blog-space-3);
}
.blog-newsletter-status__pitch {
font-size: var(--blog-text-base);
color: var(--blog-text-secondary);
line-height: var(--blog-leading-relaxed);
margin: 0 0 var(--blog-space-5);
}
/* ==== ./blog/components/_consent.css ==== */
/* presseIA — blog : bannière consent RGPD
----------------------------------------
Overlay assombri plein écran + barre d'action ancrée en bas. Affichée tant
qu'aucun cookie `presseia_consent` n'a été posé. Conditionnée au provider
analytics côté Twig :
- ga4 / matomo → cookies de tracking → bannière requise
- plausible / umami → privacy-friendly natifs → pas de bannière
Le voile (.blog-consent) assombrit la page pour forcer l'attention sans
bloquer la lecture ; cliquer le voile ne vaut PAS consentement (aucun
handler) → conforme RGPD (pas d'acceptation implicite).
Pilotée par `assets/js/blog/consent.js` :
- data-blog-consent (wrapper, classe is-hidden quand cookie posé)
- data-blog-consent-accept (bouton accepter)
- data-blog-consent-decline (bouton refuser)
- data-blog-consent-open (rouvre la bannière, ex: footer)
*/
.blog-consent {
position: fixed;
inset: 0;
z-index: 1050;
display: flex;
align-items: flex-end;
background: rgba(0, 0, 0, 0.55);
animation: blog-consent-fade-in 0.2s ease-out;
}
.blog-consent.is-hidden {
display: none;
}
@keyframes blog-consent-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.blog-consent {
animation: none;
}
}
/* Barre d'action pleine largeur, fond surface + liseré accent marqué. */
.blog-consent__bar {
width: 100%;
background: var(--blog-surface-elevated);
border-top: 3px solid var(--blog-color-accent);
box-shadow: var(--blog-shadow-lg);
padding-block: var(--blog-space-4);
}
.blog-consent__inner {
max-width: var(--blog-bp-xxl);
margin-inline: auto;
padding-inline: var(--blog-space-gutter);
display: flex;
flex-direction: column;
gap: var(--blog-space-3);
}
@media (min-width: 768px) {
.blog-consent__inner {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: var(--blog-space-5);
}
}
.blog-consent__body {
flex: 1 1 auto;
min-width: 0;
}
.blog-consent__title {
font-family: var(--blog-font-heading);
font-weight: 700;
font-size: var(--blog-text-lg);
margin: 0 0 var(--blog-space-1);
color: var(--blog-text-primary);
}
.blog-consent__pitch {
margin: 0;
font-size: var(--blog-text-sm);
color: var(--blog-text-secondary);
line-height: var(--blog-leading-snug);
}
.blog-consent__pitch a {
color: var(--blog-color-accent);
text-decoration: underline;
}
.blog-consent__actions {
display: flex;
gap: var(--blog-space-2);
flex-shrink: 0;
flex-wrap: wrap;
}
/* Bouton "Préférences cookies" stylé comme un lien dans le footer
(le markup natif est