/*
 * Contenu wysiwyg enrichi des actualites (#161849, portage prevu avec #160337).
 *
 * CSS statique, hors build gulp : ces regles etaient en ligne dans le gabarit
 * views/documents/News/details.html.php, qui les charge desormais via headLink.
 * Elles ne sont donc servies que sur les pages d'actualite.
 *
 * Emplacement volontaire : public/static/ n'est pas efface par `gulp clean`,
 * contrairement a public/build/. Aucune compilation n'est necessaire.
 */

.wysiwyg .sommaire-list { background: #f7f7f7; border: 0.1rem solid var(--grey-3); border-radius: 0.4rem; padding: 1.6rem 2rem 1.6rem 3.6rem; }
.wysiwyg .sommaire-list a { color: var(--black); text-decoration: none; }
.wysiwyg .sommaire-list a:hover { text-decoration: underline; }
.wysiwyg h2 { scroll-margin-top: 12rem; }

/* Citation mise en avant : vert, italique, centree, sans encadre (cf. maquette IDDSI). */
.wysiwyg blockquote { margin: 4rem 0; padding: 0; border: 0; text-align: center; font-style: italic; font-weight: 700; color: var(--green); }
.wysiwyg blockquote p:last-child { margin-bottom: 0; }

/* Bloc « A retenir », cf. maquette IDDSI : fond blanc, lisere vert epais a gauche, titre vert,
   puces carrees, texte en gras. Pleine largeur, l'article n'a pas de bloc « A lire aussi ». */
.wysiwyg .a-retenir { border-left: 0.5rem solid var(--green); padding: 0.4rem 0 0.4rem 2.4rem; margin: 4rem 0; }
.wysiwyg .a-retenir > p:first-child { color: var(--green); font-weight: 700; font-size: 2rem; margin-bottom: 2rem; }
.wysiwyg .a-retenir ul { list-style: none; padding-left: 0; margin: 0; }
.wysiwyg .a-retenir li { position: relative; padding-left: 2.2rem; font-weight: 700; line-height: 1.5; margin-bottom: 1.8rem; }
.wysiwyg .a-retenir li:last-child { margin-bottom: 0; }
.wysiwyg .a-retenir li::before { content: '\25AA'; position: absolute; left: 0; top: 0; color: var(--black); }

.wysiwyg .table-scroll { overflow-x: auto; margin: 3rem 0; }
.wysiwyg .table-scroll table { width: 100%; border-collapse: collapse; font-size: 1.4rem; min-width: 72rem; }
.wysiwyg .table-scroll th,
.wysiwyg .table-scroll td { padding: 1rem 1.2rem; text-align: left; vertical-align: top; border-bottom: 0.1rem solid var(--grey-3); }
.wysiwyg .table-scroll thead th { border-bottom: 0.2rem solid var(--green); color: var(--black); }
.wysiwyg .table-scroll tbody tr:nth-child(even) { background: #fafafa; }
.wysiwyg .table-scroll td img { display: block; width: 8rem; height: auto; margin: 0 0 0.8rem; border-radius: 0.4rem; }
/* Ligne de photos illustrant les colonnes : en en-tete sur ordinateur. La copie placee en tete de
   la premiere ligne de donnees ne sert qu'aux cartes mobiles, ou l'en-tete est masque. */
.wysiwyg .table-scroll thead img { display: block; width: 100%; max-width: 20rem; height: auto; }
.wysiwyg .table-scroll td > figure { display: none; }

/* Image deposee par glisser-deposer : CKEditor la place dans un paragraphe. */
.wysiwyg p img { display: block; width: 100%; height: auto; margin: 3rem auto; }

/* Bloc « texte et visuel cote a cote », pose depuis le dialogue « Creer une division » de
   l'editeur : la redaction y choisit une mise en page dans la liste « Style », sans saisir de
   classe (cf. static/js/ckeditor/config-news.js). Le visuel se place en tete du bloc, les
   paragraphes qui suivent l'habillent. flow-root : le conteneur englobe le flottant, la section
   suivante repart donc en pleine largeur sans dependre du clear des titres. */
.wysiwyg .rbc-img-right,
.wysiwyg .rbc-img-left { display: flow-root; margin: 3rem 0; }
.wysiwyg .rbc-img-right > p:first-child,
.wysiwyg .rbc-img-left > p:first-child { margin-top: 0; }
.wysiwyg .rbc-img-right img,
.wysiwyg .rbc-img-left img { width: 42%; margin: 0; }
.wysiwyg .rbc-img-right img { float: right; margin-left: 2.4rem; }
.wysiwyg .rbc-img-left img { float: left; margin-right: 2.4rem; }

.wysiwyg figure { margin: 3rem 0; }
.wysiwyg figure img { display: block; width: 100%; height: auto; }
.wysiwyg figcaption { font-size: 1.3rem; color: #666; margin-top: 0.8rem; text-align: center; }

.wysiwyg .img-row { display: flex; gap: 1.6rem; margin: 3rem 0; }
.wysiwyg .img-row img { flex: 1 1 0; min-width: 0; width: 100%; height: auto; margin: 0; }
.wysiwyg .img-row figure { flex: 1 1 0; min-width: 0; margin: 0; }

.wysiwyg .video-embed { position: relative; padding-top: 56.25%; margin: 3rem 0; }
.wysiwyg .video-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* Selecteurs d'element uniquement : l'editeur peut retirer les classes, pas les balises. */
.wysiwyg details { border: 0.1rem solid var(--grey-3); border-radius: 0.4rem; margin-bottom: 0.8rem; }
.wysiwyg details summary { cursor: pointer; padding: 1.4rem 4.4rem 1.4rem 1.6rem; font-weight: 700; list-style: none; position: relative; }
.wysiwyg details summary::-webkit-details-marker { display: none; }
.wysiwyg details summary::after { content: '+'; position: absolute; right: 1.6rem; top: 1.2rem; color: var(--green); font-weight: 700; font-size: 2rem; line-height: 1; }
.wysiwyg details[open] summary::after { content: '\2013'; }
.wysiwyg details > div { padding: 0 1.6rem 1.4rem; }
.wysiwyg details > div p:last-child { margin-bottom: 0; }

@media screen and (max-width: 767px) {
	/* Un visuel a 42 pour cent de large est illisible sur un telephone : le bloc s'empile. */
	.wysiwyg .rbc-img-right img,
	.wysiwyg .rbc-img-left img { float: none; width: 100%; margin: 0 0 2rem; }

	.wysiwyg .table-cards table { min-width: 0; }
	.wysiwyg .table-cards thead { display: none; }
	.wysiwyg .table-cards tr { display: block; border: 0.1rem solid var(--grey-3); border-radius: 0.4rem; margin-bottom: 1.2rem; padding: 0.8rem 1.2rem; }
	.wysiwyg .table-cards td { display: block; border: 0; padding: 0.6rem 0; }
	.wysiwyg .table-cards td[data-label]::before { content: attr(data-label); display: block; font-weight: 700; color: var(--green); font-size: 1.2rem; }
	/* La photo de la colonne ouvre la carte, avant son intitule. */
	.wysiwyg .table-cards td { display: flex; flex-direction: column; }
	.wysiwyg .table-cards td > figure { display: block; order: -1; margin: 0 0 0.8rem; }
	.wysiwyg .table-cards td > figure img { width: 100%; max-width: 30rem; border-radius: 0; }
}