/*
 * Contenu des pages (templates/front/page.html.twig).
 * 1. Typographie commune au contenu HTML historique (CKEditor) et aux blocs de l'éditeur par blocs.
 * 2. Blocs de l'éditeur par blocs (Editor.js) : rendus par templates/front/blocs/.
 */

/* 1. Typographie du contenu */
.contenu-page.ck-content { --ck-content-font-family: inherit; --ck-content-font-size: inherit; --ck-content-font-color: inherit; --ck-content-line-height: inherit; }
.contenu-page, .contenu-page.ck-content { font-family: var(--police-texte); font-size: 18px; line-height: 1.65; color: var(--texte); }
.contenu-page p, .contenu-page li { color: inherit; font-size: inherit; line-height: inherit; }
.contenu-page > :first-child { margin-top: 0; }
.contenu-page h2 { margin: 56px 0 14px; font-size: clamp(28px, 3vw, 38px); line-height: 1.1; }
.contenu-page h3 { margin: 40px 0 12px; font-size: clamp(23px, 2.4vw, 30px); line-height: 1.15; }
.contenu-page h4 { margin: 28px 0 8px; font-size: 22px; }
.contenu-page p { margin: 0 0 16px; }
.contenu-page ul, .contenu-page ol { margin: 0 0 18px; padding-left: 24px; display: flex; flex-direction: column; gap: 6px; }
.contenu-page a:not(.bouton):not(.bouton-lien) { color: var(--texte); text-decoration: underline; text-decoration-color: var(--couleur-principale); text-decoration-thickness: 2px; }
.contenu-page a:not(.bouton):not(.bouton-lien):hover { text-decoration-thickness: 3px; }
/* liens ouverts dans un nouvel onglet : annoncés (RGAA 13.2) */
.contenu-page a[target="_blank"]::after { content: "\00a0↗"; content: "\00a0↗" / " (nouvelle fenêtre)"; }
.contenu-page img { border-radius: var(--rayon); }
.contenu-page figcaption { margin-top: 8px; font-size: 15px; color: var(--texte-discret); }
.contenu-page .texte-intro { font-size: 1.25em; line-height: 1.5; }
.contenu-page .encadre { padding: 22px 24px; border: 0; border-radius: 20px; }
.contenu-page .encadre-info { background: var(--principale-douce); }
.contenu-page .encadre-alerte { background: var(--alerte-fond); color: var(--alerte-texte); }
.contenu-page blockquote.citation-avant {
    margin: 32px 0; padding: 32px 36px; border: 0; border-radius: var(--rayon-grand);
    background: var(--couleur-secondaire); color: #fff; font-style: normal;
    font-family: var(--police-titres); font-weight: 800; font-size: clamp(24px, 3vw, 36px); line-height: 1.15; letter-spacing: -0.02em;
}
.contenu-page blockquote.citation-avant p { margin: 0; }
.contenu-page a.bouton-lien {
    display: inline-flex; align-items: center; min-height: 50px; padding: 0 26px; border-radius: 999px;
    background: var(--couleur-principale); color: #fff; font-weight: 700;
}
.contenu-page a.bouton-lien:hover, .contenu-page a.bouton-lien:focus { background: var(--principale-fonce); color: #fff; filter: none; }
.contenu-page figure.table { margin: 24px 0; border-radius: 20px; border: 1px solid var(--bordure); overflow-x: auto; }
.contenu-page table { width: 100%; border-collapse: collapse; font-size: 17px; }
.contenu-page table caption { caption-side: top; text-align: left; padding: 16px 20px 10px; font-family: var(--police-titres); font-weight: 700; }
.contenu-page th, .contenu-page td { padding: 11px 20px; border: 0; text-align: left; }
.contenu-page thead th { background: var(--couleur-secondaire); color: #fff; }
.contenu-page table.tableau-alterne tbody tr:nth-child(even) { background: var(--fond-doux); }

/* 2. Blocs de l'éditeur par blocs (templates/front/blocs/) */
.contenu-blocs { display: flow-root; }
.contenu-blocs > * { margin-block: 0 24px; }
.contenu-blocs > h2 { clear: both; margin-top: 56px; }
/* l'encadré « à droite du texte qui suit » flotte à côté du titre et du texte suivants */
.contenu-blocs > .bloc-encadre--droite + h2 { clear: none; margin-top: 0; }
.bloc-etapes, .bloc-chiffres { clear: both; }
.contenu-blocs > h3 { margin-top: 40px; }
.contenu-blocs > :first-child { margin-top: 0; }
.contenu-page .petit-texte { font-size: 15px; color: var(--texte-discret); }
.liste-cases { list-style: none; padding-left: 0 !important; }
.liste-cases li { position: relative; padding-left: 34px; }
.liste-cases li::before { content: ""; position: absolute; left: 0; top: 4px; width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--bordure-forte); }
.liste-cases li.est-coche::before { background: var(--anthracite) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat; border-color: var(--anthracite); }

/* Encadrés « À savoir », « Important », « Conseil » */
.bloc-encadre { display: flex; gap: 16px; align-items: flex-start; padding: 22px 24px; border-radius: 20px; background: var(--principale-douce); }
.bloc-encadre p { margin: 0; }
.bloc-encadre__icone { flex: none; width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; background: var(--couleur-principale); color: #fff; }
.bloc-encadre--important { background: var(--alerte-fond); color: var(--alerte-texte); }
.bloc-encadre--important .bloc-encadre__icone { background: var(--alerte-accent); }
.bloc-encadre--conseil { background: var(--dispo-fond); color: #0F4A2E; }
.bloc-encadre--conseil .bloc-encadre__icone { background: var(--dispo-texte); }
@media (min-width: 900px) {
    .bloc-encadre--droite { float: right; width: min(40%, 480px); margin: 6px 0 24px 48px; }
}

/* Étapes */
.bloc-etapes { list-style: none; padding: 0 !important; display: grid !important; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px !important; }
.bloc-etapes li { display: flex; flex-direction: column; gap: 6px; padding: 24px; border-radius: 20px; background: var(--fond-doux); }
.bloc-etapes li:last-child:not(:first-child) { background: var(--principale-douce); }
.bloc-etapes__numero { width: 46px; height: 46px; border-radius: 999px; display: grid; place-items: center; margin-bottom: 6px; background: var(--couleur-secondaire); color: #fff; font-family: var(--police-titres); font-weight: 800; font-size: 21px; }
.bloc-etapes li:last-child:not(:first-child) .bloc-etapes__numero { background: var(--couleur-principale); }
.bloc-etapes__titre { font-size: 20px; line-height: 1.25; }
.bloc-etapes__texte { font-size: 16px; color: var(--texte-moyen); line-height: 1.5; }

/* Chiffres clés */
.bloc-chiffres { list-style: none; padding: 0 !important; display: grid !important; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px !important; }
.bloc-chiffres li { display: flex; flex-direction: column; gap: 4px; padding: 22px 24px; border-radius: 20px; border: 2px solid var(--anthracite); }
.bloc-chiffres li:last-child:not(:first-child) { background: var(--couleur-principale); border-color: var(--couleur-principale); color: #fff; }
.bloc-chiffres strong { font-family: var(--police-titres); font-weight: 800; font-size: clamp(34px, 3.6vw, 46px); line-height: 1; letter-spacing: -0.03em; }
.bloc-chiffres span { font-size: 17px; line-height: 1.35; }

/* Images */
.bloc-image { margin-inline: 0; }
.bloc-image img { display: block; width: 100%; height: auto; border-radius: 20px; }
@media (min-width: 760px) {
    .bloc-image--gauche { float: left; width: 38%; margin: 6px 40px 16px 0; }
    .bloc-image--droite { float: right; width: 38%; margin: 6px 0 16px 40px; }
}
.bloc-image-texte { display: flex; flex-wrap: wrap; border-radius: 24px; overflow: hidden; background: var(--fond-doux); clear: both; }
.bloc-image-texte--droite { flex-direction: row-reverse; }
.bloc-image-texte__image { flex: 1 1 420px; min-width: 0; min-height: 300px; max-height: 460px; object-fit: cover; border-radius: 0 !important; }
.bloc-image-texte__texte { flex: 1 1 420px; min-width: 0; padding: 40px 44px; display: flex; flex-direction: column; justify-content: center; }
.bloc-image-texte__texte h2 { margin: 0 0 12px !important; }
.bloc-image-texte__texte p:last-child { margin-bottom: 0; }
@media (max-width: 600px) { .bloc-image-texte__texte { padding: 28px 22px; } }
.bloc-galerie { list-style: none; padding: 0 !important; display: grid !important; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px !important; clear: both; }
.bloc-galerie figure { margin: 0; }
.bloc-galerie img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; }
.bloc-galerie figcaption { margin-top: 6px; font-size: 14px; }

/* Citation mise en avant */
.bloc-citation { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; margin-inline: 0; padding: 36px 40px; border-radius: 26px; background: var(--couleur-secondaire); color: #fff; clear: both; }
.bloc-citation blockquote { flex: 1 1 480px; margin: 0; }
.bloc-citation blockquote p { margin: 0; font-family: var(--police-titres); font-weight: 800; font-size: clamp(26px, 3.4vw, 42px); line-height: 1.1; letter-spacing: -0.025em; }
.bloc-citation figcaption { flex: 0 1 260px; margin: 0; padding-left: 20px; border-left: 3px solid var(--couleur-principale); font-size: 16px; color: var(--texte-sur-fonce); }
@media (max-width: 600px) { .bloc-citation { padding: 28px 24px; } }

/* Tableau */
.bloc-tableau { clear: both; }

/* Séparateur */
.bloc-separateur { display: flex; align-items: center; gap: 16px; margin-block: 48px !important; color: var(--couleur-principale); clear: both; }
.bloc-separateur span { flex: 1 1 auto; height: 2px; background: var(--bordure); }

/* Questions fréquentes */
.bloc-faq { border-top: 1px solid var(--bordure); clear: both; }
.bloc-faq__question { border-bottom: 1px solid var(--bordure); }
.bloc-faq__question summary {
    display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0;
    font-family: var(--police-titres); font-weight: 700; font-size: 21px; line-height: 1.25; cursor: pointer; list-style: none;
}
.bloc-faq__question summary::-webkit-details-marker { display: none; }
.bloc-faq__question summary::after {
    content: "+"; flex: none; width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center;
    background: var(--fond-doux); font-size: 24px; font-weight: 700; transition: transform .2s ease;
}
.bloc-faq__question[open] summary::after { content: "−"; background: var(--couleur-secondaire); color: #fff; }
.bloc-faq__reponse { padding: 0 52px 20px 0; }
.bloc-faq__reponse p { margin: 0; }

/* Fichier à télécharger */
.bloc-fichier a {
    display: inline-flex; align-items: center; gap: 14px; padding: 14px 20px 14px 14px; border-radius: 18px;
    border: 2px solid var(--anthracite); background: #fff; color: var(--texte); text-decoration: none !important; box-shadow: var(--ombre-etiquette);
}
.bloc-fichier a:hover { transform: translateY(-2px); color: var(--texte); }
.bloc-fichier__icone { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--principale-douce); color: var(--principale-fonce); }
.bloc-fichier__texte { display: flex; flex-direction: column; line-height: 1.3; }
.bloc-fichier__infos { font-size: 14px; color: var(--texte-discret); }

/* Bouton */
.bloc-bouton { clear: both; }
.contenu-page .bloc-bouton a.bouton { text-decoration: none; }