/* =====================================================================================================
   Finesty — pictogrammes des listes (chantier « pictogrammes »)
   Pastille ronde 36 px (32 px mobile) fond or clair, picto SVG trait 1,75 px bleu #2F5765 + accent or
   #DAAE51. Les pictos sont des <symbol> injectés une fois par page (voir source-live/appliquer-pictos.py)
   et référencés par <svg class="fy-ico__svg"><use href="#fy-ico-…"></use></svg>.
   Animation d'apparition (pop + dessin du trait) uniquement quand icons.js pose html.fy-ico-js ; sans JS
   ou en prefers-reduced-motion tout est visible immédiatement.
   ===================================================================================================== */
:root {
  --fy-ico-size: 36px;          /* diamètre de la pastille */
  --fy-ico-glyph: 22px;         /* taille du picto */
  --fy-ico-bg: rgba(218, 174, 81, 0.16);
  --fy-ico-color: #2F5765;
  --fy-ico-accent: #DAAE51;
  --fy-ico-stroke: 1.9;         /* 1,9 unités de viewBox = 1,75 px à 22 px */
}

/* ---- 1. Pastille ------------------------------------------------------------------------------- */
/* (sélecteurs renforcés : components.css étire tout `.fy-checks li > span` en flex 1 1 auto) */
.fy-ico, .fy-checks li > span.fy-ico, li > span.fy-ico, .fy-note__title > span.fy-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--fy-ico-size);
  height: var(--fy-ico-size);
  border-radius: 50%;
  background: var(--fy-ico-bg);
  color: var(--fy-ico-color);
  vertical-align: middle;
  box-sizing: border-box;
}
.fy-ico > .fy-ico__svg,
.fy-ico > svg.fy-ico__svg {
  display: block;
  width: var(--fy-ico-glyph) !important;
  height: var(--fy-ico-glyph) !important;
  margin: 0 !important;
  fill: none !important;
  stroke: currentColor;
  stroke-width: var(--fy-ico-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
/* variantes de pastille */
.fy-ico--sm { --fy-ico-size: 32px; --fy-ico-glyph: 19px; --fy-ico-stroke: 2.1; }
.fy-ico--lg { --fy-ico-size: 48px; --fy-ico-glyph: 27px; --fy-ico-stroke: 1.6; }
.fy-ico--blue { --fy-ico-bg: rgba(47, 87, 101, 0.10); }
.fy-ico--white { --fy-ico-bg: #fff; }
/* sur fond bleu : pastille blanche translucide, trait blanc, accent or */
.fy-section--blue .fy-ico, .fy-cta-band .fy-ico, .fy-card--blue .fy-ico, .fy-footer .fy-ico, .fy-ico--on-blue {
  --fy-ico-bg: rgba(255, 255, 255, 0.14);
  --fy-ico-color: #fff;
}

/* ---- 2. Listes à coches (.fy-checks) ---------------------------------------------------------- */
.fy-checks.fy-checks--ico li { min-height: var(--fy-ico-size); margin-bottom: 14px; }
.fy-checks.fy-checks--ico li:last-child { margin-bottom: 0; }
.fy-checks.fy-checks--ico li > .fy-ico { margin-top: 0; flex: 0 0 var(--fy-ico-size); width: var(--fy-ico-size); min-width: var(--fy-ico-size); }
/* le texte est centré sur la première ligne face à la pastille (repli fixe puis calcul en lh) */
.fy-checks.fy-checks--ico li > .fy-ico + span { padding-top: 5px; padding-top: calc((var(--fy-ico-size) - 1lh) / 2); }
.fy-checks--sm.fy-checks--ico li > .fy-ico + span { padding-top: 6px; padding-top: calc((var(--fy-ico-size) - 1lh) / 2); }
.fy-checks--tight.fy-checks--ico li { margin-bottom: 10px; }
.fy-checks--sm.fy-checks--ico li { margin-bottom: 12px; }
/* Particuliers : libellé Kanit sur sa ligne (fy-li-title) → la pastille est centrée sur ce libellé */
.fy-checks.fy-checks--ico li > .fy-ico + span > .fy-li-title { display: block; }

/* ---- 3. Listes Elementor (colonne texte des calculateurs, #estimer) --------------------------- */
ul.elementor-icon-list-items.fy-ico-elist .elementor-icon-list-item { display: flex; align-items: flex-start; }
ul.elementor-icon-list-items.fy-ico-elist .elementor-icon-list-icon {
  display: flex; align-items: center; justify-content: center;
  width: auto; margin-top: 0 !important; padding-right: 14px !important; flex: 0 0 auto;
}
ul.elementor-icon-list-items.fy-ico-elist .elementor-icon-list-icon .fy-ico { --fy-ico-size: 38px; --fy-ico-glyph: 23px; --fy-ico-stroke: 1.85; }
ul.elementor-icon-list-items.fy-ico-elist .elementor-icon-list-text { padding-top: 6px; padding-top: calc((38px - 1lh) / 2); }
/* rythme : l'écart entre deux entrées doit nettement dépasser l'interligne du texte (26 px),
   sinon les paragraphes se lisent comme un seul bloc — 18 + 18 = 36 px entre deux textes */
ul.elementor-icon-list-items.fy-ico-elist .elementor-icon-list-item:not(:first-child) { margin-top: 18px !important; }
ul.elementor-icon-list-items.fy-ico-elist .elementor-icon-list-item:not(:last-child) { padding-bottom: 18px !important; }
ul.elementor-icon-list-items.fy-ico-elist .elementor-icon-list-text { line-height: 1.6; }

/* ---- 4. Listes des sections « illustration + texte » (widget 2005c46, puces CSS d'origine) ------- */
body.finesty-inner .elementor-element.elementor-element-2005c46 ul.fy-ico-list li { display: flex; align-items: flex-start; gap: 14px; padding-left: 0; margin: 0 0 14px; min-height: var(--fy-ico-size); }
body.finesty-inner .elementor-element.elementor-element-2005c46 ul.fy-ico-list li:last-child { margin-bottom: 0; }
body.finesty-inner .elementor-element.elementor-element-2005c46 ul.fy-ico-list li::before { content: none; display: none; }
body.finesty-inner .elementor-element.elementor-element-2005c46 ul.fy-ico-list li > .fy-ico-body { flex: 1 1 auto; min-width: 0; padding-top: 5px; padding-top: calc((var(--fy-ico-size) - 1lh) / 2); }
body.finesty-inner .elementor-element.elementor-element-2005c46 ul.fy-ico-list li > .fy-ico-body > .fy-li-title { line-height: 1.55; }

/* ---- 5. Cartes à picto (fy-card--icon) : même pastille ronde, picto 32 px ---------------------- */
.fy-card__icon.fy-card__icon--ico {
  border-radius: 50%;
  background: var(--fy-ico-bg);
  color: var(--fy-ico-color);
  --fy-ico-bg: rgba(218, 174, 81, 0.16);
  --fy-ico-color: #2F5765;
}
.fy-card__icon.fy-card__icon--ico.fy-card__icon--gold { --fy-ico-bg: rgba(47, 87, 101, 0.10); }
.fy-card__icon.fy-card__icon--ico .fy-ico__svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.fy-card--blue .fy-card__icon.fy-card__icon--ico { --fy-ico-bg: rgba(255, 255, 255, 0.14); --fy-ico-color: #fff; }
.fy-accomp .fy-card__title .fy-ico { margin-right: 2px; }

/* ---- 6. Encadrés note : picto du titre en pastille 32 px --------------------------------------- */
.fy-note__title.fy-note__title--ico { display: flex; align-items: center; gap: 10px; }
.fy-note__title.fy-note__title--ico .fy-ico { --fy-ico-size: 32px; --fy-ico-glyph: 19px; --fy-ico-stroke: 2.1; }
.fy-note--blue .fy-note__title--ico .fy-ico { --fy-ico-bg: rgba(47, 87, 101, 0.10); }
.fy-section--blue .fy-note__title--ico .fy-ico { --fy-ico-bg: rgba(255, 255, 255, 0.14); --fy-ico-color: #fff; }

/* ---- 7. Frise fy-steps : numéro remplacé par un picto (si la frise reçoit data-ico) ------------ */
.fy-steps__num.fy-steps__num--ico { padding: 0; }
.fy-steps__num.fy-steps__num--ico .fy-ico { --fy-ico-size: 100%; --fy-ico-glyph: 30px; --fy-ico-bg: transparent; width: 100%; height: 100%; }

/* ---- 8. Pied de page : coordonnées ------------------------------------------------------------ */
.fy-footer__list--contact li { align-items: flex-start; gap: 12px; }
.fy-footer__list--contact .fy-ico { --fy-ico-size: 32px; --fy-ico-glyph: 17px; --fy-ico-stroke: 2.1; --fy-ico-bg: rgba(255, 255, 255, 0.10); --fy-ico-color: #fff; }
.fy-footer__list--contact li > .fy-ico + span, .fy-footer__list--contact li > .fy-ico + a { padding-top: 4px; padding-top: calc((32px - 1lh) / 2); }

/* ---- 9. Bloc « Contactez-nous » (fy-contact-bridge) : pictos dans les cercles 48 px ------------ */
.fy-contact-bridge__icon .fy-ico__svg { display: block; width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.fy-contact-bridge__icon--pillar .fy-ico__svg { --fy-ico-accent: #24454F; }

/* ---- 10. Animation d'apparition (pop doux + dessin du trait), seulement avec icons.js ----------- */
html.fy-ico-js .fy-ico:not(.is-in) { opacity: 0; transform: scale(0.8); }
html.fy-ico-js .fy-ico { will-change: transform, opacity; }
html.fy-ico-js .fy-ico.is-in {
  opacity: 1; transform: none;
  transition: opacity 0.35s ease var(--fy-ico-delay, 0s), transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) var(--fy-ico-delay, 0s);
}
html.fy-ico-js .fy-ico:not(.is-in) .fy-ico__svg { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.fy-ico-js .fy-ico.is-in .fy-ico__svg {
  stroke-dasharray: 1; stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.6s ease-out calc(var(--fy-ico-delay, 0s) + 0.12s);
}
html.fy-ico-js .fy-ico.is-in.is-done { will-change: auto; }
html.fy-ico-js .fy-ico.is-in.is-done .fy-ico__svg { stroke-dasharray: none; }
/* (les pastilles des cartes et du bloc Contactez-nous portent le SVG sans .fy-ico : elles ne s'animent pas) */
@media (prefers-reduced-motion: reduce) {
  html.fy-ico-js .fy-ico, html.fy-ico-js .fy-ico:not(.is-in) { opacity: 1 !important; transform: none !important; transition: none !important; will-change: auto; }
  html.fy-ico-js .fy-ico .fy-ico__svg, html.fy-ico-js .fy-ico:not(.is-in) .fy-ico__svg { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; transition: none !important; }
}

/* ---- 11. Mobile ------------------------------------------------------------------------------- */
@media (max-width: 767px) {
  :root { --fy-ico-size: 32px; --fy-ico-glyph: 19px; --fy-ico-stroke: 2.1; }
  .fy-checks.fy-checks--ico li > .fy-ico + span { padding-top: 4px; padding-top: calc((var(--fy-ico-size) - 1lh) / 2); }
  ul.elementor-icon-list-items.fy-ico-elist .elementor-icon-list-icon .fy-ico { --fy-ico-size: 32px; --fy-ico-glyph: 19px; --fy-ico-stroke: 2.1; }
  ul.elementor-icon-list-items.fy-ico-elist .elementor-icon-list-text { padding-top: 4px; padding-top: calc((32px - 1lh) / 2); }
  ul.elementor-icon-list-items.fy-ico-elist .elementor-icon-list-icon { padding-right: 12px !important; }
  /* sections « illustration + texte » : puces en pile de cartes centrées, pastille au-dessus du texte */
  body.finesty-inner .elementor-element.elementor-element-2005c46 ul.fy-checks--ico li > .fy-ico,
  body.finesty-inner .elementor-element.elementor-element-2005c46 ul.fy-ico-list li > .fy-ico { display: flex; margin: 0 auto 10px; }
  body.finesty-inner .elementor-element.elementor-element-2005c46 ul.fy-checks--ico li > .fy-ico + span,
  body.finesty-inner .elementor-element.elementor-element-2005c46 ul.fy-ico-list li > .fy-ico-body { display: block; padding-top: 0; text-align: center; }
  body.finesty-inner .elementor-element.elementor-element-2005c46 ul.fy-ico-list li { display: block; padding-left: 0; gap: 0; }
  body.finesty-inner .elementor-element.elementor-element-2005c46 ul.fy-ico-list li > .fy-ico-body > .fy-li-title { line-height: 1.3; }
  .fy-card__icon.fy-card__icon--ico .fy-ico__svg { width: 28px; height: 28px; stroke-width: 1.6; }
  .fy-footer__list--contact li { align-items: center; }
  .fy-footer__list--contact li > .fy-ico + span, .fy-footer__list--contact li > .fy-ico + a { padding-top: 10px; }
}

/* ---------------------------------------------------------------------
   Pictos centrés verticalement sur leur texte (et non plus calés sur la première ligne), dans toutes les listes
   --------------------------------------------------------------------- */
.fy-checks.fy-checks--ico li { align-items: center !important; }
.fy-checks.fy-checks--ico li > .fy-ico + span,
.fy-checks--sm.fy-checks--ico li > .fy-ico + span { padding-top: 0 !important; }
ul.elementor-icon-list-items.fy-ico-elist .elementor-icon-list-item { align-items: center !important; }
ul.elementor-icon-list-items.fy-ico-elist .elementor-icon-list-text { padding-top: 0 !important; }
body.finesty-inner .elementor-element.elementor-element-2005c46 ul.fy-ico-list li { align-items: center; }
body.finesty-inner .elementor-element.elementor-element-2005c46 ul.fy-ico-list li > .fy-ico-body { padding-top: 0 !important; }
.fy-footer__list--contact li { align-items: center !important; }
.fy-footer__list--contact li > .fy-ico + span, .fy-footer__list--contact li > .fy-ico + a { padding-top: 0 !important; }
@media (max-width: 767px) {
  .fy-checks.fy-checks--ico li > .fy-ico + span { padding-top: 0 !important; }
  ul.elementor-icon-list-items.fy-ico-elist .elementor-icon-list-text { padding-top: 0 !important; }
}
/* listes Elementor (colonne des calculateurs) : le thème décale l'icône de 5 px vers le bas (--icon-vertical-offset) */
ul.elementor-icon-list-items.fy-ico-elist .elementor-icon-list-icon { top: 0 !important; --icon-vertical-offset: 0px; }

/* mobile — listes-cartes des sections « illustration + texte » (widget 2005c46) : une ligne par carte, picto à gauche,
   titre et texte ferrés à gauche (remplace la composition centrée) */
@media (max-width: 767px) {
  body.finesty-inner .elementor-element.elementor-element-2005c46 :is(ul.fy-checks--ico, ul.fy-ico-list) > li {
    display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 14px !important; text-align: left !important;
  }
  body.finesty-inner .elementor-element.elementor-element-2005c46 :is(ul.fy-checks--ico, ul.fy-ico-list) > li > .fy-ico { flex: 0 0 auto; margin: 0 !important; }
  body.finesty-inner .elementor-element.elementor-element-2005c46 ul.fy-checks--ico > li > .fy-ico + span,
  body.finesty-inner .elementor-element.elementor-element-2005c46 ul.fy-ico-list > li > .fy-ico-body { flex: 1 1 auto; min-width: 0; text-align: left !important; padding-top: 2px !important; }
  body.finesty-inner .elementor-element.elementor-element-2005c46 :is(.fy-li-title, .fy-li-text) { text-align: left !important; }
}