/* >>> HTE ma-page-part3_ */
/* ma-page.css — page « Sécurité informatique » — préfixe hx
   Style tiré des captures de la maquette Healem : bleu #3350C9, menthe #50D2A0, bleu ciel #CDE6FB.
   Polices, couleurs, espacements, bordures, ombres et largeurs sont réglés dans le JSON ;
   ce fichier ne contient que le décor, les formes, les survols, l'habillage de l'accordéon et les animations. */

:root {
  --hx-blue: #3350C9;
  --hx-mint: #50D2A0;
  --hx-sky: #CDE6FB;
  --hx-violet: #4854F8;
  --hx-ink: #111111;
  --hx-soft: #E9EEFF;
}

/* ---------- Boutons (contour carré, majuscules : style maquette) ---------- */
.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);
}

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

/* ---------- Listes : neutralise les puces décoratives globales du thème ---------- */
.hx-ul .elementor-icon-list-item::before,
.hx-ul .elementor-icon-list-item::after,
.hx-list li::before,
.hx-list li::after {
  content: none !important;
  display: none !important;
}
.hx-ul .elementor-icon-list-items { margin: 0; padding: 0; }
.hx-ul .elementor-icon-list-item { background: none; padding-left: 0; }
.hx-richtext.hx-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hx-richtext.hx-list li {
  list-style: none;
  background: none;
  padding: 0;
  margin: 0 0 22px;
}
.hx-richtext.hx-list li:last-child { margin-bottom: 0; }

/* ---------- Photos : ratio, forme hexagonale, filet décoratif ---------- */
.hx-photo { position: relative; }
.hx-photo .elementor-widget-container { position: relative; z-index: 1; }
.hx-photo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.hx-photo--4-3 img { aspect-ratio: 4 / 3; }
.hx-photo--hex img {
  clip-path: polygon(17% 0, 83% 0, 100% 50%, 83% 100%, 17% 100%, 0 50%);
}
.hx-photo--hex::after {
  content: "";
  position: absolute;
  inset: -14px;
  transform: translate(16px, 16px);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 0;
}
.hx-ring--light::after {
  background-image: 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.5' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
.hx-ring--mint::after {
  background-image: 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.5' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
.hx-ring--blue::after {
  background-image: 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='%233350C9' stroke-width='1.5' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

/* ---------- Décor de sections ---------- */
.hx-hero { position: relative; overflow: hidden; }
.hx-hero > .e-con,
.hx-faqsec > .e-con { position: relative; z-index: 1; }
.hx-hero::before {
  content: "";
  position: absolute;
  left: -110px;
  top: 40px;
  width: 320px;
  height: 300px;
  background: 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") no-repeat center / 100% 100%;
  opacity: .5;
  pointer-events: none;
}
.hx-faqsec { position: relative; overflow: hidden; }
.hx-faqsec::before {
  content: "";
  position: absolute;
  left: -10%;
  top: 30%;
  width: 70%;
  height: 40%;
  background: radial-gradient(ellipse at center, rgba(80, 123, 255, .22), rgba(80, 123, 255, 0) 70%);
  filter: blur(18px);
  pointer-events: none;
}

/* ---------- Cartes et panneau ---------- */
.hx-card { transition: transform .25s ease, box-shadow .25s ease; }
.hx-card:hover { transform: translateY(-4px); }
.hx-panel { position: relative; }

/* ---------- Accordéon FAQ ---------- */
.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-title-icon { color: var(--hx-blue); }
.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; }

/* ---------- Apparition au scroll (actif seulement si le JS a posé hx-js) ---------- */
html.hx-js .hx-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
html.hx-js .hx-reveal.hx-in { opacity: 1; transform: none; }

/* ---------- Tablette ---------- */
@media (max-width: 1024px) {
  .hx-hero::before { width: 220px; height: 210px; left: -90px; }
  .hx-photo--hex::after { inset: -10px; transform: translate(12px, 12px); }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .hx-hero::before { display: none; }
  .hx-photo--hex::after { inset: -8px; transform: translate(8px, 8px); }
  .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-richtext.hx-list li { margin-bottom: 18px; }
  .hx-cta { padding: 32px 22px !important; }
  .hx-panel { padding: 26px 22px !important; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html.hx-js .hx-reveal { opacity: 1; transform: none; transition: none; }
  .hx-card, .hx-btn .elementor-button { transition: none; }
  .hx-card:hover { transform: none; }
}

/* GLOBAL PROPOSÉ — À VALIDER
   Aucune règle globale proposée : la police Rubik est déclarée dans les réglages typographiques du JSON
   (Elementor la charge depuis Google Fonts). */
/* <<< HTE ma-page-part3_ */

/* >>> HTE accueil */
/* =========================================================
   accueil.css — Healem — page d'accueil (préfixe « hx-ac- »)
   Style relevé sur les captures de la maquette : bleu #3350C9, menthe #50D2A0, ciel #CDE6FB, violet #4854F8, Rubik.
   Couleurs, polices, espacements, largeurs, bordures et ombres sont réglés dans le JSON ;
   ce fichier ne contient que le décor (vague, hexagones), les survols, l'habillage des onglets / de l'accordéon
   et les puces. Les classes sont toutes préfixées « hx-ac- » pour ne pas heurter celles des autres pages.
   Import : Importer mes JSON > champ CSS (bloc « accueil » conseillé).
   ========================================================= */

:root {
  --hx-ac-blue: #3350C9;
  --hx-ac-mint: #50D2A0;
  --hx-ac-sky: #CDE6FB;
  --hx-ac-violet: #4854F8;
  --hx-ac-ink: #111111;
  --hx-ac-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-ac-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-ac-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-ac-title .elementor-heading-title { text-wrap: balance; }
.hx-ac-title strong, .hx-ac-title b { font-weight: 700; }
.hx-ac-eyebrow .elementor-heading-title { text-transform: uppercase; letter-spacing: .04em; }
.hx-ac-tagline .elementor-heading-title { text-wrap: balance; }

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

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

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

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

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

/* ---------- Vague du hero et du bandeau de contact (dégradé natif + traînées en CSS) ---------- */
.hx-ac-wave { position: relative; overflow: hidden; isolation: isolate; }
.hx-ac-wave::before {
  content: ""; position: absolute; z-index: -1; left: -15%; right: -15%; top: 28%; height: 52%; pointer-events: none;
  background:
    radial-gradient(60% 45% at 38% 40%, rgba(8, 6, 150, .60), rgba(8, 6, 150, 0) 72%),
    radial-gradient(55% 40% at 62% 70%, rgba(176, 214, 255, .55), rgba(176, 214, 255, 0) 72%);
  transform: rotate(-14deg); filter: blur(12px);
}
.hx-ac-wave > .e-con, .hx-ac-wave > .e-con-inner { position: relative; z-index: 1; }
.hx-ac-hero::after {
  content: ""; position: absolute; z-index: 0; left: -90px; top: 34px; width: 330px; height: 300px; opacity: .55;
  background: var(--hx-ac-hex-line) no-repeat center / 100% 100%; pointer-events: none;
}
.hx-ac-cta__media.hx-ac-wave::before { top: 10%; height: 80%; }

/* ---------- Présentation : colonne d'icônes hexagonales ---------- */
.hx-ac-aside { border-left: 1px solid var(--hx-ac-sky); padding-left: 28px; }
.hx-ac-hexicon .elementor-widget-container {
  display: grid; place-items: center; width: 108px; height: 98px; margin-inline: auto;
  background: var(--hx-ac-hex-out) center / 100% 100% no-repeat;
}
.hx-ac-hexicon .elementor-icon { line-height: 1; }
.hx-ac-hexicon--float { position: absolute !important; left: -28px; bottom: -34px; z-index: 2; width: auto !important; }
.hx-ac-hexicon--float .elementor-widget-container { background-image: var(--hx-ac-hex-on-blue); width: 112px; height: 102px; }

/* ---------- Les 3 pôles : cartes à ombre décalée, logo à cheval sur la bordure ---------- */
.hx-ac-card { position: relative; transition: box-shadow .25s ease; }
.hx-ac-card:hover { box-shadow: -18px 18px 0 var(--hx-ac-sky) !important; }
.hx-ac-card__logo { width: fit-content !important; max-width: calc(100% - 24px); margin: -54px auto 6px !important; padding: 0 18px; background: #ffffff; }
.hx-ac-card__logo img { display: block; width: auto; max-width: 100%; max-height: 92px; margin: 0 auto; object-fit: contain; }

/* ---------- Onglets natifs : nos expertises ---------- */
.hx-ac-tabs .e-n-tabs-heading { justify-content: center; flex-wrap: wrap; gap: 6px 30px; margin-bottom: 20px; }
.hx-ac-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-ac-tabs .e-n-tab-title:hover,
.hx-ac-tabs .e-n-tab-title[aria-selected="true"] { color: var(--hx-ac-mint) !important; border-bottom-color: var(--hx-ac-mint) !important; }
.hx-ac-tabs .e-n-tab-title-text { color: inherit; font: inherit; text-transform: inherit; }
.hx-ac-tabs .e-n-tab-title:focus-visible { outline: 3px solid var(--hx-ac-mint); outline-offset: 3px; }
.hx-ac-tabs .e-n-tabs-content { counter-reset: hxac; }
.hx-ac-tabs .e-n-tabs-content > .e-con { counter-increment: hxac; }

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

/* ---------- Pourquoi / FAQ : fond clair ---------- */
.hx-ac-why, .hx-ac-faqsec { position: relative; overflow: hidden; isolation: isolate; }
.hx-ac-why::before, .hx-ac-faqsec::before {
  content: ""; position: absolute; z-index: -1; left: -10%; width: 80%; height: 46%; top: 54%; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(80, 123, 255, .22), rgba(80, 123, 255, 0) 70%); filter: blur(18px);
}
.hx-ac-why::before { top: 70%; }
.hx-ac-faqsec::before { top: -10%; }

/* accordéon natif : cartes à filet menthe, flèche qui pivote */
.hx-ac-faq .e-n-accordion-item { background: #ffffff; border: 1px solid var(--hx-ac-mint); margin: 0 0 16px; border-radius: 0; }
.hx-ac-faq .e-n-accordion-item[open] { border-width: 3px; }
.hx-ac-faq .e-n-accordion-item-title { padding: 20px 24px; color: var(--hx-ac-blue); cursor: pointer; }
.hx-ac-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-ac-blue);
}
.hx-ac-faq .e-n-accordion-item:not([open]) .e-n-accordion-item-title-text { color: var(--hx-ac-mint); }
.hx-ac-faq .e-n-accordion-item-title-icon { color: var(--hx-ac-blue); }
.hx-ac-faq .e-n-accordion-item:not([open]) .e-n-accordion-item-title-icon { color: var(--hx-ac-mint); }
.hx-ac-faq .e-n-accordion-item-title-icon .e-closed i, .hx-ac-faq .e-n-accordion-item-title-icon .e-closed svg { transform: rotate(45deg); }
.hx-ac-faq .e-n-accordion-item-title-icon .e-opened i, .hx-ac-faq .e-n-accordion-item-title-icon .e-opened svg { transform: rotate(-45deg); }
.hx-ac-faq .e-n-accordion-item-title:hover .e-n-accordion-item-title-text { text-decoration: underline; }
.hx-ac-faq .e-n-accordion-item-title:focus-visible { outline: 3px solid var(--hx-ac-blue); outline-offset: -3px; }
.hx-ac-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-ac-news-slot { width: 100%; }
.elementor-editor-active .hx-ac-news-slot { outline: 1px dashed var(--hx-ac-mint); outline-offset: -1px; }

/* ---------- Bandeau de contact ---------- */
.hx-ac-cta__text { box-shadow: none; }

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

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

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

/* >>> HTE informaticien-pau */
/* =========================================================
   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-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; }

/* ---------- 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; }

/* ---------- 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-card, .hx-btn .elementor-button, .hx-tabs .e-n-tab-title { transition: none; }
}

/* ---------- Tablette (≤ 1024 px) ---------- */
@media (max-width: 1024px) {
  .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-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; }
}
/* <<< HTE informaticien-pau */