/* =========================================================
   custom.css — HEALEM — UN SEUL fichier pour tout le site (préfixe « hx- »)
   Remplace le custom.css du thème et les blocs CSS des pages précédentes.
   Style relevé sur les captures de la maquette : bleu #3350C9, menthe #50D2A0, ciel #CDE6FB, violet #4854F8, Rubik.
   Couleurs, polices, espacements, largeurs, bordures, ombres et fonds sont réglés dans les JSON (widgets natifs) ;
   ce fichier ne contient que le décor (vague, hexagones, halos), les survols, l'habillage des composants
   (onglets, accordéon, cartes, puces, boutons) et le responsive. Il sert TOUTES les pages : aucune règle propre à une page.
   Import : plugin Mammouth H-TIC > Importer mes JSON > CSS, SANS JSON et sans nom de bloc (ou bloc « custom »).
   ========================================================= */

:root {
  --hx-blue: #3350C9;
  --hx-mint: #50D2A0;
  --hx-sky: #CDE6FB;
  --hx-violet: #4854F8;
  --hx-ink: #111111;
  --hx-hex-out: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='17,3 83,3 97,50 83,97 17,97 3,50' fill='%23ffffff' fill-opacity='.55' stroke='%23CDE6FB' stroke-width='1.5' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --hx-hex-on-blue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='17,3 83,3 97,50 83,97 17,97 3,50' fill='%233350C9' stroke='%2350D2A0' stroke-width='1.5' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --hx-hex-ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='17,1 83,1 99,50 83,99 17,99 1,50' fill='none' stroke='%2350D2A0' stroke-width='1.6' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --hx-hex-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='17,1 83,1 99,50 83,99 17,99 1,50' fill='none' stroke='%23A9BCFF' stroke-width='1' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

/* ---------- Titres : parties en gras sur fond léger (comme la maquette) ---------- */
.hx-title .elementor-heading-title { text-wrap: balance; }
.hx-title strong, .hx-title b { font-weight: 700; }
.hx-eyebrow .elementor-heading-title { text-transform: uppercase; letter-spacing: .04em; }
.hx-tagline .elementor-heading-title { text-wrap: balance; }

/* ---------- Texte courant : gras bleu, listes ---------- */
.hx-rich p { margin: 0 0 1.1em; }
.hx-rich p:last-child { margin-bottom: 0; }
.hx-rich strong, .hx-rich b { color: var(--hx-blue); font-weight: 600; }
.hx-rich a { color: var(--hx-blue); text-decoration: underline; text-underline-offset: 3px; }
.hx-rich a:focus-visible { outline: 3px solid var(--hx-mint); outline-offset: 2px; }
.hx-on-dark strong, .hx-on-dark b { color: #ffffff; font-weight: 700; }
.hx-on-dark a { color: #ffffff; text-decoration-color: var(--hx-mint); }

/* puces hexagonales (neutralise les puces globales du thème) */
.hx-bullets ul { list-style: none; margin: 0 0 1.1em; padding: 0; }
.hx-bullets ul:last-child { margin-bottom: 0; }
.hx-bullets li {
  position: relative; list-style: none; margin: 0 0 6px; padding: 0 0 0 30px;
  font-weight: 600; color: var(--hx-blue); background: none;
}
.hx-bullets li::marker { content: none; }
.hx-bullets li::before {
  content: ""; display: block; position: absolute; left: 0; top: .22em; width: 17px; height: 19px;
  background: var(--hx-sky); clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
}
.hx-bullets li::after { content: none; display: none; }
.hx-bullets li strong { color: inherit; font-weight: 700; }
.hx-on-dark.hx-bullets li, .hx-on-dark .hx-bullets li { color: #ffffff; font-weight: 500; }
.hx-on-dark.hx-bullets li::before, .hx-on-dark .hx-bullets li::before { background: var(--hx-mint); }

/* liste sans puce (« Pourquoi faire confiance ») */
.hx-list ul { list-style: none; margin: 0; padding: 0; }
.hx-list li { list-style: none; margin: 0 0 22px; padding: 0; background: none; }
.hx-list li:last-child { margin-bottom: 0; }
.hx-list li::before, .hx-list li::after { content: none; display: none; }

/* ---------- Photos : simples widgets, ratio par classe (bords arrondis posés à la main dans Elementor) ---------- */
.hx-photo img { display: block; width: 100%; height: auto; object-fit: cover; }
.hx-photo--square img { aspect-ratio: 1 / 1; }
.hx-logo img { display: block; width: 100%; height: auto; object-fit: contain; }

/* ---------- Boutons : contour carré, capitales ---------- */
.hx-btn .elementor-button { transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.hx-btn--mint .elementor-button:hover, .hx-btn--mint .elementor-button:focus-visible {
  background-color: var(--hx-mint) !important; border-color: var(--hx-mint) !important; color: var(--hx-blue) !important;
}
.hx-btn--blue .elementor-button:hover, .hx-btn--blue .elementor-button:focus-visible {
  background-color: var(--hx-blue) !important; color: #ffffff !important;
}
.hx-btn .elementor-button:focus-visible { outline: 3px solid var(--hx-mint); outline-offset: 3px; }
.hx-btn--blue .elementor-button:focus-visible { outline-color: var(--hx-blue); }

/* ---------- Hero : contour d'hexagone décoratif (le fond est l'image posée dans le JSON) ---------- */
.hx-hero { position: relative; overflow: hidden; isolation: isolate; }
.hx-hero > .e-con { position: relative; z-index: 1; }
.hx-hero::after {
  content: ""; position: absolute; z-index: 0; left: -90px; top: 34px; width: 330px; height: 300px; opacity: .55;
  background: var(--hx-hex-line) no-repeat center / 100% 100%; pointer-events: none;
}
.hx-title--light strong, .hx-title--light b { color: #ffffff; }

/* ---------- Fil d'Ariane (JetBlocks), dans le hero ---------- */
.hx-breadcrumb, .hx-breadcrumb .jet-breadcrumbs__item { font-family: 'Rubik', sans-serif; font-size: 14px; line-height: 1.4; color: var(--hx-sky); }
.hx-breadcrumb .jet-breadcrumbs__item-link { color: var(--hx-sky); text-decoration: none; transition: color .2s ease; }
.hx-breadcrumb .jet-breadcrumbs__item-link:hover, .hx-breadcrumb .jet-breadcrumbs__item-link:focus-visible { color: var(--hx-mint); }
.hx-breadcrumb .jet-breadcrumbs__item-link:focus-visible { outline: 3px solid var(--hx-mint); outline-offset: 2px; }
.hx-breadcrumb .jet-breadcrumbs__item-sep { margin: 0 8px; color: var(--hx-mint); }
.hx-breadcrumb .jet-breadcrumbs__item-target { color: #ffffff; font-weight: 500; }

/* ---------- Icônes dans un hexagone (le widget Icône lui-même porte le contour) ---------- */
.hx-aside { border-left: 1px solid var(--hx-sky); padding-left: 28px; }
.hx-hexicon {
  display: grid; place-items: center; width: 108px; height: 98px; margin-inline: auto;
  background: var(--hx-hex-out) center / 100% 100% no-repeat;
}
.hx-hexicon .elementor-widget-container { display: grid; place-items: center; }
.hx-hexicon .elementor-icon { display: block; line-height: 1; }
.hx-hexicon--float {
  position: absolute !important; left: -28px; bottom: -34px; z-index: 2; width: 112px !important; height: 102px;
  background-image: var(--hx-hex-on-blue);
}

/* ---------- Les 3 pôles : numéro « .1. » au-dessus, carte à ombre décalée, logo à cheval sur la bordure ---------- */
.hx-poles { counter-reset: hxpole; }
.hx-pole { counter-increment: hxpole; }
.hx-pole::before {
  content: "." counter(hxpole) "."; display: block; text-align: center; color: var(--hx-sky);
  font-size: 35px; font-weight: 400; line-height: 1;
}
.hx-card { position: relative; transition: box-shadow .25s ease; }
.hx-card:hover { box-shadow: -18px 18px 0 var(--hx-sky) !important; }
.hx-card__logo { width: fit-content !important; max-width: calc(100% - 24px); padding: 0 18px; background: #ffffff; }
.hx-card__logo img { display: block; width: auto; max-width: 100%; max-height: 92px; margin: 0 auto; object-fit: contain; }

/* ---------- Cartes de contenu (sous-parties des pages) ---------- */
.hx-title--card .elementor-heading-title { text-wrap: balance; }
.hx-card--plain { margin-top: 0; }

/* ---------- Variantes de mise en page des pages de contenu ---------- */
/* photo : contour d'hexagone décalé */
.hx-photo--ring { position: relative; }
.hx-photo--ring::after {
  content: ""; position: absolute; inset: -12px; transform: translate(18px, 16px); z-index: 0; pointer-events: none;
  background: var(--hx-hex-ring) no-repeat center / 100% 100%;
}
.hx-photo--ring img { position: relative; z-index: 1; }

/* cartes « fonctionnalités » (listes) : filet menthe, icône hexagonale, ombre douce */
.hx-feature { border-top: 4px solid var(--hx-mint); box-shadow: 0 12px 32px rgba(51, 80, 201, .10); transition: transform .25s ease, box-shadow .25s ease; }
.hx-feature:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(51, 80, 201, .16); }
.hx-hexicon--small { width: 64px; height: 58px; margin-inline: 0; }
.hx-hexicon--small .elementor-icon { font-size: 26px; }

/* cartes douces (sous-parties) et cartes d'étapes (méthodes) */
.hx-card--soft { border-top: 4px solid var(--hx-blue); box-shadow: 0 12px 32px rgba(51, 80, 201, .10); }
.hx-card--soft:hover { box-shadow: 0 18px 38px rgba(51, 80, 201, .16) !important; transform: translateY(-3px); }
.hx-card--step { border-left: 6px solid var(--hx-mint); box-shadow: 0 10px 28px rgba(51, 80, 201, .09); }
.hx-card--step:hover { box-shadow: 0 10px 28px rgba(51, 80, 201, .09) !important; }

/* phrase mise en avant en fin de section */
.hx-callout { border-left: 6px solid var(--hx-mint); padding: 6px 0 6px 28px; }
.hx-callout p { font-size: 21px; font-weight: 500; line-height: 1.5; margin: 0; }

/* titre qui reste visible pendant le défilement des questions (page FAQ) */
@media (min-width: 1025px) { .hx-sticky { align-self: flex-start; position: sticky; top: 150px; } }

/* ---------- Onglets natifs : nos expertises ---------- */
.hx-tabs .e-n-tabs-heading { justify-content: center; flex-wrap: wrap; gap: 6px 30px; margin-bottom: 20px; }
.hx-tabs .e-n-tab-title {
  padding: 12px 2px; background: none !important; border: 0 !important; border-radius: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .55) !important; color: #ffffff !important;
  font-family: 'Rubik', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .02em; line-height: 1.2;
  text-transform: uppercase; transition: color .2s ease, border-color .2s ease;
}
.hx-tabs .e-n-tab-title:hover,
.hx-tabs .e-n-tab-title[aria-selected="true"] { color: var(--hx-mint) !important; border-bottom-color: var(--hx-mint) !important; }
.hx-tabs .e-n-tab-title-text { color: inherit; font: inherit; text-transform: inherit; }
.hx-tabs .e-n-tab-title:focus-visible { outline: 3px solid var(--hx-mint); outline-offset: 3px; }
.hx-tabs .e-n-tabs-content { counter-reset: hxac; }
.hx-tabs .e-n-tabs-content > .e-con { counter-increment: hxac; }

/* panneau : filet vertical + numéro décoratif (« .1. ») à gauche du texte */
.hx-panel__main { position: relative; border-left: 1px solid rgba(8, 20, 90, .55); padding-left: 56px !important; }
.hx-panel__main::before {
  content: "." counter(hxac) "."; position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%);
  padding: 14px 0; background: var(--hx-blue); color: var(--hx-ink); font-size: 35px; font-weight: 400; line-height: 1;
}
.hx-panel__media { position: relative; }

/* accordéon natif : cartes à filet menthe, flèche qui pivote */
.hx-faq .e-n-accordion-item { background: #ffffff; border: 1px solid var(--hx-mint); margin: 0 0 16px; border-radius: 0; }
.hx-faq .e-n-accordion-item[open] { border-width: 3px; }
.hx-faq .e-n-accordion-item-title { padding: 20px 24px; color: var(--hx-blue); cursor: pointer; }
.hx-faq .e-n-accordion-item-title-text {
  font-family: 'Rubik', sans-serif; font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--hx-blue);
}
.hx-faq .e-n-accordion-item:not([open]) .e-n-accordion-item-title-text { color: var(--hx-mint); }
.hx-faq .e-n-accordion-item-title-icon { color: var(--hx-blue); }
.hx-faq .e-n-accordion-item:not([open]) .e-n-accordion-item-title-icon { color: var(--hx-mint); }
.hx-faq .e-n-accordion-item-title-icon .e-closed i, .hx-faq .e-n-accordion-item-title-icon .e-closed svg { transform: rotate(45deg); }
.hx-faq .e-n-accordion-item-title-icon .e-opened i, .hx-faq .e-n-accordion-item-title-icon .e-opened svg { transform: rotate(-45deg); }
.hx-faq .e-n-accordion-item-title:hover .e-n-accordion-item-title-text { text-decoration: underline; }
.hx-faq .e-n-accordion-item-title:focus-visible { outline: 3px solid var(--hx-blue); outline-offset: -3px; }
.hx-faq .e-n-accordion-item > .e-con { padding: 0 24px 24px; }

/* ---------- Actualités : emplacement de la grille dynamique (rien à l'écran tant qu'il est vide) ---------- */
.hx-slot { width: 100%; }
.elementor-editor-active .hx-slot { outline: 1px dashed var(--hx-mint); outline-offset: -1px; }

/* ---------- Bandeau de contact ---------- */

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .hx-feature, .hx-card--soft { transition: none; }
  .hx-feature:hover, .hx-card--soft:hover { transform: none; }
  .hx-card, .hx-btn .elementor-button, .hx-tabs .e-n-tab-title { transition: none; }
}

/* ---------- Tablette (≤ 1024 px) ---------- */
@media (max-width: 1024px) {
  .hx-photo--ring::after { inset: -8px; transform: translate(10px, 10px); }
  .hx-hero::after { width: 220px; height: 205px; left: -90px; }
  .hx-aside { border-left: 0; padding-left: 0; }
  .hx-panel__main { border-left: 0; padding-left: 0 !important; }
  .hx-panel__main::before { display: none; }
  .hx-hexicon--float { position: relative !important; left: auto; bottom: auto; margin: -50px auto 0; }
  .hx-card__logo img { max-height: 76px; }
}

/* ---------- Mobile (≤ 767 px) ---------- */
@media (max-width: 767px) {
  .hx-photo--ring::after { display: none; }
  .hx-callout p { font-size: 18px; }
  .hx-hero::after { display: none; }
  .hx-faq .e-n-accordion-item-title { padding: 16px 18px; }
  .hx-faq .e-n-accordion-item-title-text { font-size: 18px; }
  .hx-faq .e-n-accordion-item > .e-con { padding: 0 18px 18px; }
  .hx-btn .elementor-button { width: 100%; text-align: center; }
  .hx-btn .elementor-button-content-wrapper { justify-content: center; }
  .hx-hexicon { width: 92px; height: 84px; }
}


:root {
  --forme-hexa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 780 713' preserveAspectRatio='none'%3E%3Cpath d='M210 0 L458 0 Q548 0 594 77 L754 342 Q780 385 760 431 L662 649 Q634 713 564 713 L340 713 Q250 713 198 640 L29 401 Q0 360 16 313 L91 85 Q120 0 210 0 Z'/%3E%3C/svg%3E");
}

.elementor-widget-image:not(.sans-forme) img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 780 / 713;
  object-fit: cover;
  -webkit-mask: var(--forme-hexa) center / 100% 100% no-repeat;
          mask: var(--forme-hexa) center / 100% 100% no-repeat;
}

/* ---------- Actualités : grille d'articles (widget Articles, classe « hx-news ») ---------- */
.hx-news .elementor-posts-container { column-gap: 10px; row-gap: 40px; }

/* Image : coins arrondis haut-gauche + bas-droit, ratio de la maquette */
.hx-news .elementor-post__thumbnail__link {
  position: relative; display: block; margin-bottom: 20px;
  border-radius: 40px 0 40px 0; overflow: hidden;
}
.hx-news .elementor-post__thumbnail { padding-bottom: 73% !important; border-radius: inherit; }
.hx-news .elementor-post__thumbnail img { transition: transform .5s ease; }
.hx-news .elementor-post:hover .elementor-post__thumbnail img { transform: translate(-50%, -50%) scale(1.04); }

/* Badge catégorie (bleu, posé en bas à gauche de l'image) */
.hx-news .elementor-post__thumbnail__link::after {
  content: none; position: absolute; left: 0; bottom: 14px; z-index: 2;
  padding: 8px 14px; background: var(--hx-blue); color: #ffffff;
  font-family: 'Rubik', sans-serif; font-size: 15px; font-weight: 300; line-height: 1.2;
  letter-spacing: .03em; text-transform: uppercase;
}
/* un bloc par catégorie : le texte vient de la classe category-{slug} de l'article */
.hx-news .category-innovation .elementor-post__thumbnail__link::after { content: "Innovation"; }
/* .hx-news .category-cybersecurite .elementor-post__thumbnail__link::after { content: "Cybersécurité"; } */

/* Bloc texte, aligné avec un retrait de 26px comme la maquette */
.hx-news .elementor-post__text { position: relative; margin: 0; padding: 0 26px; }

/* Titre masqué visuellement (absent de la maquette) mais conservé pour le SEO et l'accessibilité */
.hx-news .elementor-post__title {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Date : menthe, capitales */
.hx-news .elementor-post__meta-data {
  margin: 0 0 12px; font-family: 'Rubik', sans-serif; font-size: 14px; font-weight: 400;
  line-height: 1.3; letter-spacing: .02em; color: var(--hx-mint); text-transform: uppercase;
}
.hx-news .elementor-post-date { color: inherit; }

/* Extrait */
.hx-news .elementor-post__excerpt { margin: 0 0 22px; }
.hx-news .elementor-post__excerpt p {
  margin: 0; font-family: 'Rubik', sans-serif; font-size: 16px; font-weight: 400;
  line-height: 1.45; color: var(--hx-ink);
}

/* Lien « LIRE L'ACTUALITÉ → » : filet menthe + flèche */
/* Lien « LIRE L'ACTUALITÉ → » : un seul filet menthe + flèche */
.hx-news .elementor-post__text a.elementor-post__read-more,
.hx-news .elementor-post__text a.elementor-post__read-more:hover,
.hx-news .elementor-post__text a.elementor-post__read-more:focus,
.hx-news .elementor-post__text a.elementor-post__read-more:visited {
  display: inline-flex; align-items: center; gap: 10px; padding-bottom: 6px;
  border: 0; border-bottom: 1px solid var(--hx-mint);
  box-shadow: none; background-image: none;
  font-family: 'Rubik', sans-serif; font-size: 14px; font-weight: 400; line-height: 1.2;
  color: black !important; text-transform: uppercase;
  text-decoration: none !important;
}

.hx-news .elementor-post__read-more::after {
  content: ""; width: 18px; height: 12px; transition: transform .2s ease;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14' fill='none' stroke='%2350D2A0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7h17M12 1l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hx-news .elementor-post__read-more:hover::after { transform: translateX(4px); }
.hx-news .elementor-post__read-more:focus-visible,
.hx-news .elementor-post:has(.elementor-post__title a:focus-visible) .elementor-post__read-more {
  outline: 3px solid var(--hx-mint); outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .hx-news .elementor-post__thumbnail img,
  .hx-news .elementor-post__read-more::after { transition: none; }
  .hx-news .elementor-post:hover .elementor-post__thumbnail img { transform: translate(-50%, -50%); }
  .hx-news .elementor-post__read-more:hover::after { transform: none; }
}

@media (max-width: 1024px) {
  .hx-news .elementor-post__thumbnail__link { border-radius: 32px 0 32px 0; }
}
@media (max-width: 767px) {
  .hx-news .elementor-posts-container { row-gap: 32px; }
  .hx-news .elementor-post__thumbnail__link { border-radius: 28px 0 28px 0; }
  .hx-news .elementor-post__text { padding: 0 18px; }
  .hx-news .elementor-post__excerpt p { font-size: 15px; }
}

/* =========================================================
   ARTICLES (actualités) — le widget « Contenu de l'article » porte la classe art-cont
   Exception au préfixe hx- : classe posée à la main dans Elementor. Gabarit : intro, H2 / H3, puces hexagonales,
   séparateurs, citation, liens, images. Colonne de lecture ~ 820 px.
   ========================================================= */
.art-cont {
  width: 100%; max-width: 860px; margin-inline: auto; padding: 0 24px;
  font-family: 'Rubik', sans-serif; font-size: 17px; line-height: 1.75; color: var(--hx-ink);
}
.art-cont > *:first-child { margin-top: 0; }
.art-cont > *:last-child { margin-bottom: 0; }

/* texte */
.art-cont p { margin: 0 0 1.3em; }
.art-cont strong, .art-cont b { font-weight: 600; color: var(--hx-blue); }
.art-cont a { color: var(--hx-blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .2s ease; }
.art-cont a:hover { color: var(--hx-mint); }
.art-cont a:focus-visible { outline: 3px solid var(--hx-mint); outline-offset: 2px; }
/* chapô : premier paragraphe */
.art-cont > p:first-of-type { font-size: 21px; line-height: 1.6; font-weight: 400; color: var(--hx-ink); }
.art-cont > p:first-of-type strong { font-weight: 600; }

/* intertitres */
.art-cont h2, .art-cont h3 { font-family: 'Rubik', sans-serif; color: var(--hx-blue); scroll-margin-top: 160px; text-wrap: balance; }
.art-cont h2 { position: relative; margin: 2.1em 0 .8em; padding-top: 22px; font-size: 34px; font-weight: 400; line-height: 1.2; }
.art-cont h2::before { content: ""; position: absolute; top: 0; left: 0; width: 56px; height: 4px; background: var(--hx-mint); }
.art-cont h3 { margin: 1.9em 0 .55em; font-size: 24px; font-weight: 600; line-height: 1.3; }
.art-cont h2 strong, .art-cont h3 strong { font-weight: 700; }

/* listes : puces hexagonales */
.art-cont ul, .art-cont ol { list-style: none; margin: 0 0 1.5em; padding: 0; }
.art-cont li { position: relative; margin: 0 0 .6em; padding-left: 34px; background: none; }
.art-cont li::marker { content: none; }
.art-cont ul > li::before {
  content: ""; position: absolute; left: 0; top: .5em; width: 18px; height: 20px;
  background: var(--hx-sky); clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
}
.art-cont ol { counter-reset: artol; }
.art-cont ol > li { counter-increment: artol; }
.art-cont ol > li::before {
  content: counter(artol); position: absolute; left: 0; top: .15em; width: 24px; height: 27px; display: grid; place-items: center;
  background: var(--hx-blue); color: #fff; font-size: 13px; font-weight: 500; line-height: 1;
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
}
.art-cont li > ul, .art-cont li > ol { margin: .6em 0 0; }

/* séparateur : filet dégradé avec un hexagone au centre */
.art-cont hr, .art-cont .wp-block-separator {
  height: 20px; margin: 2.6em 0; border: 0; opacity: 1; max-width: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 86.6 100'%3E%3Cpath fill='%2350D2A0' d='M43.3 0 L80 21.65 Q86.6 25.5 86.6 33.15 L86.6 66.85 Q86.6 74.5 80 78.35 L43.3 100 Q36.7 100 33.3 98.1 L6.6 82.7 Q0 78.9 0 71.2 L0 28.8 Q0 21.1 6.6 17.3 L33.3 1.9 Q36.7 0 43.3 0 Z'/%3E%3C/svg%3E") center / 14px 16px no-repeat,
    linear-gradient(90deg, rgba(205, 230, 251, 0), var(--hx-sky) 20%, var(--hx-sky) 80%, rgba(205, 230, 251, 0)) center / 100% 1px no-repeat;
}

/* citation : encadré à filet menthe */
.art-cont blockquote {
  position: relative; margin: 2.2em 0; padding: 30px 34px 30px 40px; border: 0; border-left: 6px solid var(--hx-mint);
  background: #F3F8FE; color: var(--hx-blue); quotes: none;
}
.art-cont blockquote p { margin: 0; font-size: 22px; font-weight: 500; font-style: normal; line-height: 1.5; color: var(--hx-blue); }
.art-cont blockquote p + p { margin-top: .9em; }
.art-cont blockquote strong { font-weight: 600; color: inherit; }
.art-cont blockquote cite { display: block; margin-top: 14px; font-size: 14px; font-style: normal; color: var(--hx-ink); }

/* images, tableaux */
.art-cont figure, .art-cont .wp-block-image { margin: 2.2em 0; }
.art-cont img { display: block; max-width: 100%; height: auto; }
.art-cont figcaption { margin-top: 10px; font-size: 14px; color: #5a6070; text-align: center; }
.art-cont table { width: 100%; margin: 0 0 1.6em; border-collapse: collapse; font-size: 16px; }
.art-cont th { text-align: left; color: var(--hx-blue); font-weight: 600; background: #F3F8FE; }
.art-cont th, .art-cont td { padding: 12px 14px; border-bottom: 1px solid var(--hx-sky); }

@media (max-width: 767px) {
  .art-cont { padding: 0 20px; font-size: 16px; line-height: 1.7; }
  .art-cont > p:first-of-type { font-size: 18px; }
  .art-cont h2 { font-size: 27px; margin-top: 1.9em; }
  .art-cont h3 { font-size: 21px; }
  .art-cont blockquote { padding: 22px 22px 22px 26px; }
  .art-cont blockquote p { font-size: 19px; }
}

/* =========================================================
   ANIMATIONS — apparition au scroll (pilotée par custom.js), entrée du hero, survols, onglets / accordéon.
   Règles : rien n'est masqué sans JS (la classe html.hx-js n'est posée que par custom.js) ; tout est coupé si le visiteur a
   demandé « réduire les animations » ; aucune animation dans l'éditeur Elementor.
   ========================================================= */
:root { --hx-ease: cubic-bezier(.2, .7, .2, 1); }

/* défilement doux vers les ancres, en tenant compte du header fixe */
html { scroll-padding-top: 140px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---------- Apparition au scroll : custom.js pose data-hx (up | zoom) sur les éléments sous la ligne de flottaison ---------- */
html.hx-js [data-hx] {
  opacity: 0; transition: opacity .8s var(--hx-ease), transform .8s var(--hx-ease); transition-delay: var(--hx-d, 0s);
}
html.hx-js [data-hx="up"]   { transform: translate3d(0, 30px, 0); }
html.hx-js [data-hx="zoom"] { transform: translate3d(0, 18px, 0) scale(.94); }
html.hx-js [data-hx].is-in  { opacity: 1; transform: none; }
.elementor-editor-active [data-hx] { opacity: 1 !important; transform: none !important; }

/* ---------- Entrée du hero (CSS pur : s'exécute au chargement) ---------- */
@keyframes hxUp   { from { opacity: 0; transform: translate3d(0, 26px, 0); } to { opacity: 1; transform: none; } }
@keyframes hxZoom { from { opacity: 0; transform: scale(.92) translate3d(0, 20px, 0); } to { opacity: 1; transform: none; } }
@keyframes hxFloat { 50% { translate: 0 -10px; } }
@keyframes hxDrift { from { translate: 0 0; rotate: 0deg; } to { translate: 26px 18px; rotate: 8deg; } }
@keyframes hxFade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: no-preference) {
  .hx-hero .elementor-widget-jet-breadcrumbs,
  .hx-hero .elementor-widget-heading,
  .hx-hero .elementor-widget-text-editor,
  .hx-hero .elementor-widget-button { animation: hxUp .9s var(--hx-ease) both; }
  .hx-hero .elementor-widget-jet-breadcrumbs { animation-delay: .05s; }
  .hx-hero .elementor-widget-heading         { animation-delay: .15s; }
  .hx-hero .elementor-widget-text-editor     { animation-delay: .32s; }
  .hx-hero .elementor-widget-button          { animation-delay: .48s; }
  /* photo : apparition puis lente flottaison */
  .hx-hero .elementor-widget-image { animation: hxZoom 1.1s .2s var(--hx-ease) both, hxFloat 9s 1.4s ease-in-out infinite; }
  /* hexagone décoratif du hero qui dérive doucement */
  .hx-hero::after { animation: hxFade 1.4s .3s both, hxDrift 22s 1.7s ease-in-out infinite alternate; }
}

/* ---------- Onglets et accordéon : le contenu entre en fondu ---------- */
@keyframes hxPanelIn { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .hx-tabs .e-n-tabs-content > .e-con.e-active { animation: hxPanelIn .5s var(--hx-ease) both; }
  .hx-faq .e-n-accordion-item[open] > .e-con { animation: hxPanelIn .4s var(--hx-ease) both; }
  .hx-faq .e-n-accordion-item { transition: border-width .2s ease, box-shadow .25s ease; }
  .hx-faq .e-n-accordion-item:hover { box-shadow: 0 8px 22px rgba(80, 210, 160, .22); }
  .hx-faq .e-n-accordion-item-title-icon { transition: transform .3s ease; }
}

/* ---------- Survols ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hx-btn .elementor-button { transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .25s var(--hx-ease), box-shadow .25s ease; }
  .hx-btn .elementor-button:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(51, 80, 201, .22); }
  .hx-btn--mint .elementor-button:hover { box-shadow: 0 10px 20px rgba(80, 210, 160, .30); }
  .hx-btn .elementor-button:active { transform: translateY(-1px); }

  .hx-hexicon { transition: transform .35s var(--hx-ease); }
  .hx-hexicon:not(.hx-hexicon--float):hover { transform: translateY(-4px) scale(1.06); }
  .hx-feature:hover .hx-hexicon { transform: rotate(-6deg) scale(1.08); }

  .hx-photo--ring::after { transition: transform .5s var(--hx-ease); }
  .hx-photo--ring:hover::after { transform: translate(8px, 6px); }

  .hx-card--step { transition: transform .25s var(--hx-ease), border-color .25s ease; }
  .hx-card--step:hover { transform: translateX(6px); border-left-color: var(--hx-blue); }
  .hx-card__logo img { transition: transform .35s var(--hx-ease); }
  .hx-card:hover .hx-card__logo img { transform: scale(1.06); }

  .hx-rich a, .art-cont a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .3s ease, color .2s ease; }
  .hx-rich a:hover, .art-cont a:hover { background-size: 100% 1px; }
}

/* ---------- Barre de progression de lecture (pages d'article, créée par custom.js) ---------- */
.hx-progress {
  position: fixed; top: 0; left: 0; z-index: 10000; width: 100%; height: 3px; pointer-events: none;
  background: var(--hx-mint); transform: scaleX(0); transform-origin: 0 50%;
}
body.admin-bar .hx-progress { top: 32px; }
@media (max-width: 782px) { body.admin-bar .hx-progress { top: 46px; } }