/* ==================================================================== *
* ACTUS — feuille de style des pages d'articles *
* *
* Chargée uniquement sur les pages d'articles (body.actus) via le *
* template actus/_base.php. La page liste (body.actus-liste) n'en a *
* pas besoin et garde ses règles dans styles.css. *
* *
* Convention HTML d'un article : *
* *
* *
* *
*
*
* …
*
* … …
*
* … *
* *
*
par un ) */
.actus .bloc-title time {
display: block;
font-family: helveticaBold;
font-size: 13px;
letter-spacing: 2.2px;
color: #fff;
text-align: center;
text-transform: uppercase;
margin-bottom: 18px;
opacity: 0.92;
}
/* Le H1 du bandeau hérite des règles globales (h1 blanc 40px), pas
* besoin de le réécrire ici. */
/* ====================================================================
* CORPS D'ARTICLE — wrapper .article
* Tout le contenu rédigé entre …
* ==================================================================== */
/* Paragraphe — aligné sur le style global Avicap (18px / 24px hérité) */
.article p {
font-size: 18px;
color: var(--actus-color-body);
margin-bottom: 10px;
}
.article p + p { margin-top: 10px; }
/* Mise en gras dans le corps : helveticaBold + noir pur pour ressortir */
.article p strong,
.article li strong {
font-family: helveticaBold;
color: var(--actus-color-strong);
}
/* Chapo (premier paragraphe d'introduction) */
.article-chapo {
font-family: helveticaBold;
font-size: 18px;
color: var(--actus-color-strong);
margin-bottom: 30px;
}
/* Liens inline — hérite la taille du paragraphe, vert accent, soulignés */
.article a {
color: var(--actus-color-accent);
font-size: inherit;
font-family: inherit;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: text-decoration-thickness 0.15s;
}
.article a:hover { text-decoration-thickness: 2px; }
/* ====================================================================
* TITRES DE SECTION DANS LE CORPS
* H2 grande section / H3 section / H4 sous-section / H5 détail
* ==================================================================== */
.article h2 {
font-family: helveticaBold;
font-size: 34px;
line-height: 1.2;
color: var(--actus-color-heading);
text-transform: none;
margin-top: 70px;
margin-bottom: 20px;
letter-spacing:0px
}
.article h3 {
font-family: helveticaBold;
font-size: 28px;
line-height: 1.25;
color: var(--actus-color-heading);
margin-top: 60px;
margin-bottom: 16px;
}
.article h4 {
font-family: helveticaBold;
font-size: 22px;
line-height: 1.3;
color: var(--actus-color-heading);
text-transform: none;
margin-top: 40px;
margin-bottom: 12px;
}
.article h5 {
font-family: helveticaBold;
font-size: 18px;
line-height: 1.4;
color: var(--actus-color-heading);
text-transform: none;
margin-top: 30px;
margin-bottom: 10px;
}
/* Un titre qui suit immédiatement un titre de niveau supérieur ne
reprend pas la grosse marge top (évite des blancs vides). */
.article h2 + h3,
.article h2 + h4,
.article h2 + h5,
.article h3 + h4,
.article h3 + h5,
.article h4 + h5 { margin-top: 16px; }
/* ====================================================================
* LISTES
* ==================================================================== */
.article ul,
.article ol {
margin: 14px 0 20px;
padding-left: 0;
list-style-position: outside;
font-size: 18px;
/* line-height hérité du body (24px absolu) */
}
/* UL — puces vertes custom */
.article ul {
list-style: none;
}
.article ul > li {
position: relative;
padding-left: 26px;
margin-bottom: 8px;
color: var(--actus-color-body);
}
.article ul > li::before {
content: "•";
color: var(--actus-color-accent);
font-family: helveticaBold;
position: absolute;
left: 2px;
top: -4px;
font-size: 28px;
line-height: 1;
}
/* UL imbriquée — tiret simple via list-style-type custom (CSS Lists 3) */
.article ul ul {
list-style: "- " outside;
padding-left: 24px;
margin: 6px 0;
font-size: 17px;
}
.article ul ul > li { padding-left: 0; }
.article ul ul > li::before { content: none; }
/* OL — numéro dans un cercle vert */
.article ol {
counter-reset: section;
list-style: none;
}
.article ol > li {
position: relative;
padding-left: 38px;
margin-bottom: 10px;
counter-increment: section;
color: var(--actus-color-body);
}
.article ol > li::before {
content: counter(section);
position: absolute;
left: 0;
top: 2px;
width: 24px;
height: 24px;
line-height: 24px;
border-radius: 50%;
background: var(--actus-color-accent);
color: #fff;
font-family: helveticaBold;
font-size: 13px;
text-align: center;
}
/* ====================================================================
* ENCADRÉS / APLATS
* 3 variantes : .encadre-info / .encadre-retenir / .encadre-chiffres
* ==================================================================== */
.article .encadre {
padding: 24px 28px;
margin: 32px 0;
border-radius: 4px;
}
.article .encadre p:last-child { margin-bottom: 0; }
.article .encadre-label {
display: block;
font-family: helveticaBold;
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--actus-color-accent);
margin-bottom: 8px;
}
.article .encadre-info {
background: var(--actus-color-bg-alt);
border-left: 4px solid var(--actus-color-accent);
}
.article .encadre-retenir {
background: var(--actus-color-accent-soft);
}
.article .encadre-chiffres {
display: flex;
align-items: center;
gap: 28px;
background: var(--actus-color-bg-alt);
border-left: 4px solid var(--actus-color-accent);
}
.article .encadre-chiffres .nombre {
font-family: helveticaBold;
font-size: 56px;
line-height: 1;
color: var(--actus-color-accent);
flex-shrink: 0;
}
.article .encadre-chiffres .legende {
font-size: 17px;
line-height: 1.45;
color: var(--actus-color-body);
}
/* ====================================================================
* CITATION (blockquote)
* iowanItalic, barre verticale verte
* ==================================================================== */
.article blockquote {
border-left: 4px solid var(--actus-color-accent);
padding: 8px 0 8px 24px;
margin: 32px 0;
font-family: iowanItalic;
font-size: 20px;
line-height: 1.5;
color: var(--actus-color-body);
}
.article blockquote cite {
display: block;
margin-top: 12px;
font-family: helveticaBold;
font-style: normal;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--actus-color-heading);
}
/* ====================================================================
* TABLEAU
* Centralisé (auparavant chaque article définissait td en inline)
* ==================================================================== */
.article table {
width: 100%;
border-collapse: collapse;
margin: 28px 0;
font-size: 16px;
}
.article table th {
background: var(--actus-color-accent);
color: #fff;
font-family: helveticaBold;
text-align: left;
padding: 12px 14px;
font-size: 14px;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.article table td {
padding: 12px 14px;
border-bottom: 1px solid var(--actus-color-border);
line-height: 1.45;
color: var(--actus-color-body);
}
.article table tr:nth-child(even) td { background: var(--actus-color-bg-alt); }
/* ====================================================================
* SÉPARATEUR
* ==================================================================== */
.article hr {
border: 0;
height: 1px;
background: var(--actus-color-border);
margin: 56px auto;
width: 80px;
}
/* ====================================================================
* FAQ (section de fin d'article)
* Convention : avec h3 + h4 (questions) + p
* Rythme un peu plus serré que les sections normales pour bien lier
* visuellement chaque Q/R.
* ==================================================================== */
.article .faq {
margin-top: 60px;
padding: 30px 0 0 0; /* override le padding 80px 0 global de */
border-top: 1px solid var(--actus-color-border);
}
.article .faq h3 {
margin-top: 0;
}
.article .faq h4 {
margin-top: 30px;
margin-bottom: 6px;
}
.article .faq h4 + p {
margin-top: 0;
}
/* Annule la marge basse de la dernière réponse pour éviter un blanc
superflu avant la fermeture de la section. */
.article .faq > *:last-child {
margin-bottom: 0;
}
/* ====================================================================
* RESPONSIVE
* Reprend la logique mobile-first existante (cf. styles.css)
* ==================================================================== */
@media screen and (max-width: 64em) {
.actus .bloc-title { position: inherit; }
.actus header { position: relative; }
.actus .bloc-title { background: none !important; }
}
@media screen and (max-width: 46em) {
.article p,
.article ul,
.article ol,
.article-chapo { font-size: 14px; }
.article h2 { font-size: 24px; line-height: 1.2; margin-top: 40px; }
.article h3 { font-size: 20px; line-height: 24px; margin-top: 30px; }
.article h4 { font-size: 18px; margin-top: 24px; }
.article h5 { font-size: 16px; margin-top: 20px; }
.article .encadre { padding: 18px 20px; margin: 24px 0; }
.article .encadre-chiffres { flex-direction: column; align-items: flex-start; gap: 14px; }
.article .encadre-chiffres .nombre { font-size: 42px; }
.article table { font-size: 14px; }
.article table th { font-size: 12px; padding: 8px 10px; }
.article table td { padding: 8px 10px; }
}