/* ------------------------------------------------------------------
   Gabarit article (Theme Builder, maquette Figma 2138:1328) : hero,
   sommaire, carte de la colonne de gauche. Le corps (blocs Gutenberg)
   est plus bas, sous .fp-corps.
------------------------------------------------------------------ */
/* fond du hero selon la couleur de la thématique (variantes de la maquette) */
.fp-article-hero { background-color: #F8F5FC; }
.fp-th-cyan .fp-article-hero { background-color: #F2FDFF; }
.fp-th-bleu .fp-article-hero { background-color: #F5F8FD; }
.fp-th-orange .fp-article-hero { background-color: #FFF7F5; }
.fp-th-vert .fp-article-hero { background-color: #F2F9F1; }
.fp-th-bleu-gris .fp-article-hero { background-color: #F0F8FB; }
.fp-th-jaune .fp-article-hero { background-color: #FFFCF5; }
.fp-article-hero .elementor-shortcode { line-height: 0; }
.fp-fil-ariane { display: flex; align-items: center; gap: 6px; min-width: 0; font-family: "Inter", sans-serif; font-size: 13px; line-height: 1.5; color: #303B4A; }
.fp-fil-ariane a { flex: 0 0 auto; color: #0B1016; text-decoration: none; }
.fp-fil-ariane a:hover { text-decoration: underline; }
.fp-fil-ariane svg { flex: 0 0 13px; color: #4A5668; }
.fp-fil-ariane span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fp-etiquettes { display: flex; flex-wrap: wrap; gap: 8px; }
.fp-tag--blanc { background: #FFFFFF; color: #303B4A; }
.fp-signature { display: flex; flex-wrap: wrap; align-items: center; column-gap: 11px; row-gap: 6px; font-family: "Inter", sans-serif; font-size: 16px; font-weight: 500; line-height: 1.5; color: #4A5668; }
.fp-signature-auteur { display: inline-flex; align-items: center; gap: 8px; margin-right: -1px; color: #303B4A; }
.fp-signature-photo { flex: 0 0 26px; width: 26px !important; height: 26px !important; border-radius: 50%; object-fit: cover; }
.fp-signature-point { width: 3px; height: 3px; border-radius: 50%; background: #303B4A; }
.fp-modification { font-family: "Inter", sans-serif; font-size: 13px; line-height: 1.5; color: #303B4A; }
/* sommaire (widget Table des matières, classe fp-sommaire). Un seul titre actif mis en avant :
   le premier titre visible (les suivants, aussi marqués actifs par Elementor, restent normaux). */
.fp-sommaire .elementor-toc__header { padding: 0 0 19.75px; border-bottom: 1px solid #D4DAE2; background: transparent; }
.fp-sommaire .elementor-toc__header-title { font-family: "PP Mori", sans-serif; font-size: 20px; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; color: #0F1F1E; }
.fp-sommaire .elementor-toc__body { padding: 5px 0 0; max-height: none; }
.fp-sommaire .elementor-toc__list-wrapper { margin: 0; padding: 0; list-style: none; }
.fp-sommaire .elementor-toc__list-item { margin: 0; }
.fp-sommaire .elementor-toc__list-item::marker, .fp-sommaire .elementor-toc__list-item-text-wrapper::before { content: none; display: none; }
.fp-sommaire .elementor-toc__list-item-text-wrapper { display: flex; }
.fp-sommaire .elementor-toc__list-item-text-wrapper > i, .fp-sommaire .elementor-toc__list-item-text-wrapper > svg { display: none; }
.fp-sommaire .elementor-toc__list-item-text { display: block; flex: 1 1 auto; margin: 0; padding: 5px 20px; border-radius: 8px; font-family: "PP Mori", sans-serif; font-size: 15px; font-weight: 600; line-height: 1.4; color: #1A222E; text-decoration: none; transition: background-color .2s, color .2s, padding .2s, margin .2s; }
.fp-sommaire .elementor-toc__list-item-text:hover { color: #336299; text-decoration: none; }
.fp-sommaire .elementor-toc__list-item-text.elementor-item-active { margin: 10px 0; padding: 10.5px 20px; background: #F0F7FF; color: #336299; line-height: 1.5; text-decoration: none; }
.fp-sommaire .elementor-toc__list-item:has(.elementor-item-active) ~ .elementor-toc__list-item .elementor-item-active,
.fp-sommaire .elementor-toc__list-item-text-wrapper:has(.elementor-item-active) + .elementor-toc__list-wrapper .elementor-item-active { margin: 0; padding: 5px 20px; background: transparent; color: #1A222E; line-height: 1.4; }
.fp-sommaire .elementor-toc__list-wrapper .elementor-toc__list-wrapper { padding-left: 0; }
@media (min-width: 1025px) { .fp-sommaire .elementor-toc__toggle-button { display: none; } }
/* « Dernière modification » calée en bas de la colonne : sa ligne de base s'aligne sur le bas de l'image */
.elementor .elementor-widget.fp-modif-bas { margin-top: auto; margin-bottom: -5px; padding-top: 20px; }
.fp-modification { display: block; }
@media (max-width: 767px) {
	.fp-signature-auteur { flex: 0 0 100%; }
	.fp-signature-auteur + .fp-signature-point { display: none; }
}
/* Corps de l'article (blocs Gutenberg). Maquette Figma 2138:1328, colonne de 783 px. */
.fp-corps { font-family: "Inter", sans-serif; font-size: 20px; line-height: 1.7; color: #303B4A; }
.fp-corps > *, .fp-corps .wp-block-group > *, .fp-corps .wp-block-group__inner-container > * { margin-top: 0; margin-bottom: 0; }
.fp-corps > * + * { margin-top: 20px; }
.fp-corps p { font-size: inherit; line-height: inherit; }
.fp-corps a { color: #2B4EDE; text-decoration: underline; text-underline-offset: 2px; }
.fp-corps strong, .fp-corps b { font-weight: 500; color: inherit; }
.fp-corps h2, .fp-corps h3 { font-family: "PP Mori", sans-serif; font-weight: 600; color: #0B1016; }
.fp-corps h2 { font-size: 42px; line-height: 1.25; letter-spacing: -0.02em; }
.fp-corps h3 { font-size: 28px; line-height: 1.25; letter-spacing: -0.01em; }
.fp-corps > * + h2 { margin-top: 24px; }
.fp-corps > h2 + * { margin-top: 14px; }
.fp-corps > * + h3 { margin-top: 36px; }
.fp-corps > h3 + * { margin-top: 20px; }
/* après un lien avec flèche, le titre suivant remonte (maquette : 57 px entre le lien et le titre) */
.fp-corps > .is-style-fp-lien-fleche + h2, .fp-corps > .is-style-fp-lien-fleche + span + h2 { margin-top: 14px; }
.fp-corps > .is-style-fp-lien-fleche + h3, .fp-corps > .is-style-fp-lien-fleche + span + h3 { margin-top: 25.6px; }
/* listes : puces violettes de 8 px */
.fp-corps ul { list-style: none; margin-left: 0; padding-left: 24px; }
.fp-corps ul li { position: relative; }
.fp-corps ul li + li { margin-top: 4px; }
.fp-corps ul li::before { content: ""; position: absolute; left: -24px; top: calc(0.85em - 4px); width: 8px; height: 8px; border-radius: 50%; background: #9841E3; }
.fp-corps ol { padding-left: 24px; }
.fp-corps ol li + li { margin-top: 4px; }
/* lien avec flèche (style de paragraphe « Lien avec flèche ») */
.fp-corps .is-style-fp-lien-fleche a { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; color: #2B4EDE; text-decoration: none; }
.fp-corps .is-style-fp-lien-fleche a::after { content: ""; flex: 0 0 12px; width: 12px; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 6h8M6.5 2.5L10 6l-3.5 3.5' stroke='%232B4EDE' stroke-width='1.54' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.fp-corps .is-style-fp-lien-fleche a:hover { text-decoration: underline; }
/* encadré bleu */
.fp-corps .is-style-fp-encadre { position: relative; isolation: isolate; overflow: hidden; padding: 28px 36px; border-radius: 10px; background: #F0F7FF; }
.fp-corps .is-style-fp-encadre::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("/wp-content/uploads/2026/10/article-encadre-texture.webp") center top / cover no-repeat; mix-blend-mode: color-burn; opacity: .55; /* .42 dans Figma, mais le rendu Figma est plus contraste : .55 mesure equivalent */ pointer-events: none; } /* texture au cadrage de la maquette 2138:1408 (783 px de large, 400 px de haut) */
.fp-corps .is-style-fp-encadre p { font-family: "PP Mori", sans-serif; font-size: 19px; line-height: 1.7; color: #1C3092; }
.fp-corps .is-style-fp-encadre p + p { margin-top: 12px; }
/* témoignage : filet bleu à gauche, citation, auteur avec photo, lien */
.fp-corps > .is-style-fp-temoignage { margin: 36px 34px 36px 36px; padding: 8px 36px 0 40px; border-left: 0.7px solid #203DBB; }
.fp-corps .is-style-fp-temoignage > p:first-child, .fp-corps .is-style-fp-temoignage > .wp-block-group__inner-container > p:first-child { font-family: "PP Mori", sans-serif; font-size: 19px; line-height: 1.6; color: #1C3092; }
.fp-corps .fp-temoignage-auteur { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.fp-corps .fp-temoignage-auteur figure, .fp-corps .fp-temoignage-auteur .wp-block-image { flex: 0 0 28px; width: 28px; height: 28px; margin: 0; border-radius: 50%; overflow: hidden; background: #1C3092; }
.fp-corps .fp-temoignage-auteur img { display: block; width: 28px !important; height: 28px !important; object-fit: cover; border-radius: 50%; }
.fp-corps .fp-temoignage-auteur p { margin: 0; font-family: "Inter", sans-serif; font-size: 17px; line-height: 1.22; color: #1C3092; }
.fp-corps .is-style-fp-temoignage .is-style-fp-lien-fleche { margin-top: 31px; font-size: 17px; }
/* blocs « Découvrez comment la société X » */
.fp-corps > .is-style-fp-cta-cas, .fp-corps > .is-style-fp-cta-cas-image { position: relative; isolation: isolate; overflow: hidden; max-width: 669px; margin: 60px auto; border: 1px solid #C7CFFA; border-radius: 10px; background: #2B4EDE; color: #FFFFFF; }
.fp-corps .is-style-fp-cta-cas::before, .fp-corps .is-style-fp-cta-cas-image::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("/wp-content/uploads/2026/10/article-encart-texture.webp") center / cover no-repeat; mix-blend-mode: color-burn; opacity: .55; pointer-events: none; } /* texture exportee du cadre de la maquette 2138:1439 (rotation -20,5 deg, 669x236) */
.fp-corps .is-style-fp-cta-cas { padding: 34px 24px 39px; text-align: center; }
.fp-corps .fp-cta-titre { margin: 0; font-family: "PP Mori", sans-serif; font-size: 24px; font-weight: 600; line-height: 1.22; color: #FFFFFF; }
.fp-corps .is-style-fp-cta-cas .wp-block-buttons { justify-content: center; margin-top: 21.2px; }
.fp-corps .is-style-fp-cta-cas-image { display: grid; grid-template-columns: 218px minmax(0, 1fr); column-gap: 36px; align-items: stretch; padding: 0 36px 0 0; }
.fp-corps .is-style-fp-cta-cas-image > .wp-block-group__inner-container { display: contents; }
.fp-corps .is-style-fp-cta-cas-image .wp-block-image { margin: 0; height: 100%; }
/* !important : Gutenberg ecrit en ligne width / height:auto / aspect-ratio quand l'image est redimensionnee ou que ses dimensions sont connues ; l'image doit toujours remplir la colonne de gauche */
.fp-corps .is-style-fp-cta-cas-image .wp-block-image { width: 100% !important; max-width: none !important; }
.fp-corps .is-style-fp-cta-cas-image .wp-block-image img { display: block; width: 100% !important; height: 100% !important; max-width: none; aspect-ratio: auto !important; object-fit: cover; object-position: center; }
.fp-corps .is-style-fp-cta-cas-image .fp-cta-texte { align-self: center; padding: 26px 0 39px; }
.fp-corps .is-style-fp-cta-cas-image .wp-block-buttons { margin-top: 29.2px; }
.fp-corps .wp-block-button.is-style-fp-bouton-blanc .wp-block-button__link { display: inline-flex; align-items: center; gap: 10px; padding: 16.24px 49px; border: 0; border-radius: 12px; background: #FFFFFF; color: #0B1016; font-family: "Inter", sans-serif; font-size: 16px; font-weight: 500; line-height: 1.22; letter-spacing: -0.02em; text-decoration: none; }
.fp-corps .wp-block-button.is-style-fp-bouton-blanc .wp-block-button__link::after { content: ""; flex: 0 0 10px; width: 10px; height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M1.5 5h7M5.5 2l3 3-3 3' stroke='%230B1016' stroke-width='1.29' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.fp-corps .wp-block-button.is-style-fp-bouton-blanc .wp-block-button__link:hover { background: #E7EBF0; color: #0B1016; }
.fp-corps .is-style-fp-cta-cas-image .wp-block-button.is-style-fp-bouton-blanc .wp-block-button__link { padding: 12px 24px; }
.fp-corps .wp-block-image img { border-radius: 10px; }
.fp-corps .fp-temoignage-auteur img, .fp-corps .is-style-fp-cta-cas-image img { border-radius: 0; }
/* tablette et mobile */
@media (max-width: 1024px) {
	.fp-corps { font-size: 18px; }
	.fp-corps h2 { font-size: 34px; }
	.fp-corps > .is-style-fp-temoignage { margin: 32px 0; padding: 8px 0 0 32px; }
}
@media (max-width: 767px) {
	.fp-corps { font-size: 17px; }
	.fp-corps h2 { font-size: 26px; }
	.fp-corps h3 { font-size: 24px; }
	.fp-corps > * + h3 { margin-top: 32px; }
	.fp-corps > .is-style-fp-lien-fleche + h3, .fp-corps > .is-style-fp-lien-fleche + span + h3 { margin-top: 22px; }
	.fp-corps > .is-style-fp-temoignage { padding-left: 20px; }
	.fp-corps .is-style-fp-temoignage > p:first-child, .fp-corps .is-style-fp-temoignage > .wp-block-group__inner-container > p:first-child { font-size: 17px; }
	.fp-corps .fp-temoignage-auteur p, .fp-corps .is-style-fp-temoignage .is-style-fp-lien-fleche { font-size: 15px; }
	.fp-corps .is-style-fp-encadre { padding: 20px; }
	.fp-corps .is-style-fp-encadre p { font-size: 17px; }
	.fp-corps > .is-style-fp-cta-cas, .fp-corps > .is-style-fp-cta-cas-image { margin: 40px auto; }
	.fp-corps .is-style-fp-cta-cas { padding: 28px 20px 32px; }
	.fp-corps .fp-cta-titre { font-size: 20px; }
	.fp-corps .is-style-fp-cta-cas-image { grid-template-columns: minmax(0, 1fr); padding: 0; }
	.fp-corps .is-style-fp-cta-cas-image .wp-block-image { height: 160px; }
	.fp-corps .is-style-fp-cta-cas-image .fp-cta-texte { padding: 24px 20px 28px; }
	.fp-corps .is-style-fp-cta-cas-image .wp-block-buttons { margin-top: 20px; }
	.fp-corps .wp-block-button.is-style-fp-bouton-blanc .wp-block-button__link, .fp-corps .is-style-fp-cta-cas-image .wp-block-button.is-style-fp-bouton-blanc .wp-block-button__link { padding: 14px 24px; }
}

/* Image de la carte grise (champ ACF art_carte_image, choisie dans l’article) */
.fp-article-carte { max-width:100%; }
.fp-article-carte .fp-carte-image { display:block; width:auto; max-width:100%; height:auto; margin-bottom:28px; }
/* Articles : titre de la carte (ka02tit2) sous l'image, 31 px entre le bas de l'image et le haut des capitales (maquette 2424:2378) */
body.single-post .fp-article-carte .fp-carte-image { margin-bottom:24px; }

/* Style « Bloc cas client avec image » applique a un groupe sans image dans le groupe : on retombe sur la presentation centree */
.fp-corps .is-style-fp-cta-cas-image:not(:has(.wp-block-image)) { display:block; padding:34px 24px 39px; text-align:center; }
.fp-corps .is-style-fp-cta-cas-image:not(:has(.wp-block-image)) .wp-block-buttons { justify-content:center; margin-top:21.2px; }
.fp-corps .is-style-fp-cta-cas-image:not(:has(.wp-block-image)) .fp-cta-texte { padding:0; }

/* ------------------------------------------------------------------------------------------
   Articles seulement (pas les cas d'usage) : tailles demandées par Émilie le 15 oct.
   Ordinateur et tablette : texte 18, H2 35, H3 26. Mobile inchangé (règles ≤ 767 ci-dessus).
   H4 : 20 px, 600, sur toutes les tailles.
------------------------------------------------------------------ */
@media (width > 767px) {
	body.single-post .fp-corps { font-size: 18px; }
	body.single-post .fp-corps h2 { font-size: 35px; }
	body.single-post .fp-corps h3 { font-size: 26px; }
}
body.single-post .fp-corps h4 { font-family: "PP Mori", sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: 0; color: #0B1016; }
body.single-post .fp-corps > * + h4 { margin-top: 28px; }
body.single-post .fp-corps > h4 + * { margin-top: 12px; }

/* Articles seulement : espace avant les H2 +50 % (24 -> 36 px ; apres un lien avec fleche 14 -> 21 px), demande du 15 oct. */
body.single-post .fp-corps > * + h2 { margin-top: 36px; }
body.single-post .fp-corps > .is-style-fp-lien-fleche + h2, body.single-post .fp-corps > .is-style-fp-lien-fleche + span + h2 { margin-top: 21px; }

/* Verbatim (temoignage) jamais en italique, articles et cas d'usage (15 oct.) ; la societe de l'auteur reste en italique */
.fp-corps .is-style-fp-temoignage > p:first-child em, .fp-corps .is-style-fp-temoignage > p:first-child i, .fp-corps .is-style-fp-temoignage > .wp-block-group__inner-container > p:first-child em { font-style: normal; }

/* Cas d'usage : fond du hero identique pour tous (#F5F8FD), quel que soit le secteur. La couleur par thematique des articles n'est pas concernee. */
body.single-cas-dusage .fp-article-hero { background-color: #F5F8FD; }

/* Cas d'usage : pastille du secteur dans le hero, meme code couleur que les pastilles secteur des cas clients (Sante = Medico-social).
   Collectivites, Secteur associatif et Evenementiel n'ont pas d'equivalent cas client : ils gardent la couleur reglee sur le secteur. */
body.single-cas-dusage .fp-etiquettes .fp-tag.fp-tag--secteur-sante { background:#F1F3FE; color:#2B4EDE; }
body.single-cas-dusage .fp-etiquettes .fp-tag.fp-tag--secteur-mutuelles-et-assurance { background:#F2FDFF; color:#009FBD; }
body.single-cas-dusage .fp-etiquettes .fp-tag.fp-tag--secteur-banque { background:#F4FDFA; color:#10BBA9; }
body.single-cas-dusage .fp-etiquettes .fp-tag.fp-tag--secteur-industrie { background:#F0F2F5; color:#666F8E; }
body.single-cas-dusage .fp-etiquettes .fp-tag.fp-tag--secteur-societes-de-conseil { background:#F8F5FC; color:#9841E3; }

/* Bouton bleu avec flèche (style de bloc fp-bouton-bleu) : mêmes CTA que les boutons bleus Elementor du site */
.fp-corps .wp-block-button.is-style-fp-bouton-bleu .wp-block-button__link { display: inline-flex; align-items: center; gap: 10px; padding: 16.24px 49px; border: 0; border-radius: 12px; background: #2B4EDE; color: #FFFFFF; font-family: "Inter", sans-serif; font-size: 16px; font-weight: 500; line-height: 1.22; letter-spacing: -0.02em; text-decoration: none; transition: background .2s; }
.fp-corps .wp-block-button.is-style-fp-bouton-bleu .wp-block-button__link::after { content: ""; flex: 0 0 10px; width: 10px; height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M1.5 5h7M5.5 2l3 3-3 3' stroke='%23FFFFFF' stroke-width='1.29' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.fp-corps .wp-block-button.is-style-fp-bouton-bleu .wp-block-button__link:hover { background: #3D5FE5; color: #FFFFFF; }
@media (max-width: 767px) { .fp-corps .wp-block-button.is-style-fp-bouton-bleu .wp-block-button__link { padding: 14px 24px; } }
