/* Cible le wrapper de l'image dans une carte désactivée */
.anfield-radio.pf-disabled .an-pf-field-image-wrap {
  position: relative;          /* nécessaire pour placer les pseudo-éléments */
  display: block;              /* s'étend sur la largeur de l'image */
  overflow: hidden;            /* pour bien clipper les coins arrondis si besoin */
}

/* (optionnel) si tu veux des coins arrondis harmonisés */
.anfield-radio .an-pf-field-image {
  width: 100%;
  height: auto;
  border-radius: 10px;         /* ajuste la valeur si besoin */
}

/* Voile gris sur TOUTE la photo */
.anfield-radio.pf-disabled .an-pf-field-image-wrap::before {
  content: "";
  position: absolute;
  inset: 0;                    /* couvre 100% de la photo */
  background: rgba(0, 0, 0, 0.18);  /* gris léger */
  border-radius: 10px;         /* même rayon que l’image si tu l’as mis */
  z-index: 1;
  pointer-events: none;
}

/* Gros X rouge, centré sur TOUTE la photo */
.anfield-radio.pf-disabled .an-pf-field-image-wrap::after {
  content: "X";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: clamp(28px, 4vw, 48px);
  color: rgba(255, 0, 0, 0.95);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  z-index: 2;
  pointer-events: none;
}
/* ===========================
   Réglages globaux (tunable)
   =========================== */
.js-an-pf-fields-wrap {
  --pf-gap: 16px;                 /* espace entre groupes */
  --pf-radius: 12px;              /* arrondi des coins des groupes */
  --pf-bg: #fff;                  /* fond par défaut */
  --pf-border: 1px solid #e9ecef; /* bordure */
  --pf-shadow-light: 0 4px 12px rgba(0,0,0,.06);
  --pf-shadow-strong: 0 12px 28px rgba(0,0,0,.16);
  --pf-pad: 14px;                 /* padding interne de chaque field */
  --pf-anim-duration: .35s;
  --pf-anim-ease: cubic-bezier(.25,.1,.25,1);
}

/* Style de base appliqué aux fields de nos groupes */
#field_21, #field_22, #field_23,
#field_2,  #field_3,  #field_1,  #field_4,  #field_5,  #field_6,  #field_7,
#field_9,  #field_8,
#field_10, #field_15,
#field_11, #field_16, #field_17,
#field_12, #field_19,
#field_13, #field_18,
#field_14, #field_20 {
  background: var(--pf-bg);
  border: var(--pf-border);
  padding: var(--pf-pad);
  margin: 0;
  box-shadow: none;
}

/* ========== Groupe 1 : 23 / 24 / 25 (toujours #fff, hors logique actif/inactif) ========== */
#field_21 { margin-top: var(--pf-gap); border-radius: var(--pf-radius) var(--pf-radius) 0 0; }
#field_22 { border-top: 0; }
#field_23 { border-top: 0; border-radius: 0 0 var(--pf-radius) var(--pf-radius); margin-bottom: var(--pf-gap); }

/* ========== Groupe 2 : 2 / 3 / 1 / 4 / 5 / 6 / 7 ========== */
#field_2  { margin-top: var(--pf-gap); border-radius: var(--pf-radius) var(--pf-radius) 0 0; }
#field_3, #field_1, #field_4, #field_5, #field_6 { border-top: 0; }
#field_7  { border-top: 0; border-radius: 0 0 var(--pf-radius) var(--pf-radius); margin-bottom: var(--pf-gap); }

/* ========== Groupe 3 : 9 / 8 ========== */
#field_9  { margin-top: var(--pf-gap); border-radius: var(--pf-radius) var(--pf-radius) 0 0; }
#field_8  { border-top: 0; border-radius: 0 0 var(--pf-radius) var(--pf-radius); margin-bottom: var(--pf-gap); }

/* ========== Groupe 4 : 10 / 15 ========== */
#field_10 { margin-top: var(--pf-gap); border-radius: var(--pf-radius) var(--pf-radius) 0 0; }
#field_15 { border-top: 0; border-radius: 0 0 var(--pf-radius) var(--pf-radius); margin-bottom: var(--pf-gap); }

/* ========== Groupe 5 : 11 / 16 / 17 ========== */
#field_11 { margin-top: var(--pf-gap); border-radius: var(--pf-radius) var(--pf-radius) 0 0; }
#field_16 { border-top: 0; }
#field_17 { border-top: 0; border-radius: 0 0 var(--pf-radius) var(--pf-radius); margin-bottom: var(--pf-gap); }

/* ========== Groupe 6 : 12 / 19 ========== */
#field_12 { margin-top: var(--pf-gap); border-radius: var(--pf-radius) var(--pf-radius) 0 0; }
#field_19 { border-top: 0; border-radius: 0 0 var(--pf-radius) var(--pf-radius); margin-bottom: var(--pf-gap); }

/* ========== Groupe 7 : 13 / 18 ========== */
#field_13 { margin-top: var(--pf-gap); border-radius: var(--pf-radius) var(--pf-radius) 0 0; }
#field_18 { border-top: 0; border-radius: 0 0 var(--pf-radius) var(--pf-radius); margin-bottom: var(--pf-gap); }

/* ========== Groupe 8 : 14 / 21 ========== */
#field_14 { margin-top: var(--pf-gap); border-radius: var(--pf-radius) var(--pf-radius) 0 0; }
#field_20 { border-top: 0; border-radius: 0 0 var(--pf-radius) var(--pf-radius); margin-bottom: var(--pf-gap); }

/* ----- Anti "double-bordure" si un field intermédiaire d’un groupe est masqué ----- */
#field_21.an-pf-hide + #field_22,
#field_22.an-pf-hide + #field_23,
#field_2.an-pf-hide  + #field_3,
#field_3.an-pf-hide  + #field_1,
#field_1.an-pf-hide  + #field_4,
#field_4.an-pf-hide  + #field_5,
#field_5.an-pf-hide  + #field_6,
#field_6.an-pf-hide  + #field_7,
#field_9.an-pf-hide  + #field_8,
#field_10.an-pf-hide + #field_15,
#field_11.an-pf-hide + #field_16,
#field_16.an-pf-hide + #field_17,
#field_12.an-pf-hide + #field_19,
#field_13.an-pf-hide + #field_18,
#field_14.an-pf-hide + #field_20 {
  border-top: 0;
}

/* ----- Ombre (par défaut : légère) appliquée sur le "début" visible du groupe ----- */
#field_21,
#field_2,
#field_9,
#field_10,
#field_11,
#field_12,
#field_13,
#field_14 { box-shadow: var(--pf-shadow-light); }

/* Si le premier est masqué, on transfère l’ombre au suivant visible */
#field_21.an-pf-hide + #field_22,
#field_22.an-pf-hide + #field_23,
#field_2.an-pf-hide  + #field_3,
#field_3.an-pf-hide  + #field_1,
#field_1.an-pf-hide  + #field_4,
#field_4.an-pf-hide  + #field_5,
#field_5.an-pf-hide  + #field_6,
#field_6.an-pf-hide  + #field_7,
#field_9.an-pf-hide  + #field_8,
#field_10.an-pf-hide + #field_15,
#field_11.an-pf-hide + #field_16,
#field_16.an-pf-hide + #field_17,
#field_12.an-pf-hide + #field_19,
#field_13.an-pf-hide + #field_18,
#field_14.an-pf-hide + #field_20 {
  box-shadow: var(--pf-shadow-light);
}

/* ----- États visuels Oui/Non (?? EXCLURE 23/24/25 de la bascule) ----- */
/* Inactif = "Non": fond gris clair */
.pf-group-inactive:not(#field_21):not(#field_22):not(#field_23) {
  background: #f7f7f7 !important;
}
/* Actif = "Oui": fond blanc (déjà blanc) + OMBRE FORTE sur début de groupe */
.pf-group-active#field_2,
.pf-group-active#field_9,
.pf-group-active#field_10,
.pf-group-active#field_11,
.pf-group-active#field_12,
.pf-group-active#field_13,
.pf-group-active#field_14,
.pf-group-active#field_2.an-pf-hide  + #field_3,
.pf-group-active#field_3.an-pf-hide  + #field_1,
.pf-group-active#field_1.an-pf-hide  + #field_4,
.pf-group-active#field_4.an-pf-hide  + #field_5,
.pf-group-active#field_5.an-pf-hide  + #field_6,
.pf-group-active#field_6.an-pf-hide  + #field_7,
.pf-group-active#field_9.an-pf-hide  + #field_8,
.pf-group-active#field_10.an-pf-hide + #field_15,
.pf-group-active#field_11.an-pf-hide + #field_16,
.pf-group-active#field_16.an-pf-hide + #field_17,
.pf-group-active#field_12.an-pf-hide + #field_19,
.pf-group-active#field_13.an-pf-hide + #field_18,
.pf-group-active#field_14.an-pf-hide + #field_20 {
  box-shadow: var(--pf-shadow-strong) !important;
}

/* ---------- Animation ouverture/fermeture douce ---------- */
.js-an-pf-fields-wrap .an-pf-field {
  overflow: hidden;
  transition:
    max-height var(--pf-anim-duration) var(--pf-anim-ease),
    opacity    calc(var(--pf-anim-duration) - .1s) ease,
    margin     var(--pf-anim-duration) var(--pf-anim-ease),
    padding    var(--pf-anim-duration) var(--pf-anim-ease),
    border     var(--pf-anim-duration) var(--pf-anim-ease);
  will-change: max-height, opacity;
}
.js-an-pf-fields-wrap .an-pf-field.an-pf-hide {
  display: block !important;
  max-height: 0 !important;
  opacity: 0;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-top-width: 0 !important;
  border-bottom-width: 0 !important;
  transform: translateY(-4px);
}
.js-an-pf-fields-wrap .an-pf-field:not(.an-pf-hide) {
  max-height: 2000px;
  opacity: 1;
  transform: translateY(0);
}
#pf-style-10,#pf-style-5,#pf-style-35,
#pf-style-60,#pf-style-80,#pf-style-98,#pf-style-112,#pf-style-129,
#pf-style-133,#pf-style-136,#pf-style-142,#pf-style-138,#pf-style-144 {display:none;}
/* Fonts */

@font-face {
    font-family: "Amazone";
    src: url("../fonts/OnlineWebFonts/Amazone/c8b268b709e1b89dbafdccf64928e488.woff2") format("woff2"),
         url("../fonts/OnlineWebFonts/Amazone/c8b268b709e1b89dbafdccf64928e488.woff") format("woff");
    font-display: swap;
}
.pf-145 { font-family: "Amazone"; font-size: 22px; }

.pf-146 { font-family: "Comic Sans MS"; font-size: 22px; }

@font-face {
    font-family: "Fiolex Girls";
    src: url("../fonts/OnlineWebFonts/FiolexGirls/70a5625015b31701b72ebd705f531544.woff2") format("woff2"),
         url("../fonts/OnlineWebFonts/FiolexGirls/70a5625015b31701b72ebd705f531544.woff") format("woff");
    font-display: swap;
}
.pf-147 { font-family: "Fiolex Girls"; font-size: 31px; }

@font-face {
    font-family: "Walt Disney Script v4.1";
    src: url("../fonts/OnlineWebFonts/WaltDisneyScript41/ac9867a6602b0b640e27d39b2fda4bfd.woff2") format("woff2"),
         url("../fonts/OnlineWebFonts/WaltDisneyScript41/ac9867a6602b0b640e27d39b2fda4bfd.woff") format("woff");
    font-display: swap;
}
.pf-148 { font-family: "Walt Disney Script v4.1"; font-size: 22px; }

@font-face {
    font-family: "SF Action Man Bold";
    src: url("../fonts/OnlineWebFonts/SFActionManBold/a3b7e77a9230f498f547fbf91396cf0e.woff2") format("woff2"),
         url("../fonts/OnlineWebFonts/SFActionManBold/a3b7e77a9230f498f547fbf91396cf0e.woff") format("woff");
    font-display: swap;
}
.pf-149 { font-family: "SF Action Man Bold"; font-size: 22px; }

@font-face {
    font-family: "Segoe Print";
    src: url("../fonts/OnlineWebFonts/SegoePrint/3e7c392e6314d3043afade17def0975c.woff2") format("woff2"),
         url("../fonts/OnlineWebFonts/SegoePrint/3e7c392e6314d3043afade17def0975c.woff") format("woff");
    font-display: swap;
}
.pf-150 { font-family: "Segoe Print"; font-size: 22px; }

@font-face {
    font-family: "Wrexham Script";
    src: url("../fonts/OnlineWebFonts/WrexhamScript/3dc71b7c9b89256a4d798867a9704d73.woff2") format("woff2"),
         url("../fonts/OnlineWebFonts/WrexhamScript/3dc71b7c9b89256a4d798867a9704d73.woff") format("woff");
    font-display: swap;
}
.pf-151 { font-family: "Wrexham Script"; font-size: 22px; }

@font-face {
    font-family: "Jester Regular";
    src: url("../fonts/OnlineWebFonts/JesterRegular/5855b7e2faaf4916e2a5189631057a7e.woff2") format("woff2"),
         url("../fonts/OnlineWebFonts/JesterRegular/5855b7e2faaf4916e2a5189631057a7e.woff") format("woff");
    font-display: swap;
}
.pf-152 { font-family: "Jester Regular"; font-size: 22px; }

@font-face {
    font-family: "The Urban Way";
    src: url("../fonts/OnlineWebFonts/TheUrbanWay/hinted-TheUrbanWay.woff2") format("woff2"),
         url("../fonts/OnlineWebFonts/TheUrbanWay/hinted-TheUrbanWay.woff") format("woff");
    font-display: swap;
}
.pf-153 { font-family: "The Urban Way"; font-size: 22px; }
.pf-154 { font-family: 'arial'; font-size: 22px; }

/*color*/
#an_productfields .control-label {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 10px;
  background: #f2f2f2;
  display: block;
  text-align: center;
  padding: 7px 0;
  line-height: 25px;
}
.an-pf-field-type-radio .anfield-radio { position: relative; }
.an-pf-field-type-radio .anfield-radio label { -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 10px; box-shadow: inset 0px 0px 13px 0px rgba(0, 0, 0, 0.2); -webkit-transition: opacity 0.3s ease 0s; -o-transition: opacity 0.3s ease 0s; transition: opacity 0.3s ease 0s; display: inline-block; cursor: pointer; width: 100%; height: 100%; text-align: center; padding: 5px;margin: 0;}
.an-pf-field-type-radio .anfield-radio label input { cursor: pointer; opacity: 0; filter: alpha(opacity=0); position: absolute; }
.an-pf-field-type-radio .anfield-radio label span { line-height: 30px; }
.an-pf-field-type-radio .anfield-radio label  { font-weight: 700; font-size: 16px; background: #fff;}
.an-pf-field-type-radio .anfield-radio label:hover, .an-pf-field-type-radio .anfield-radio.selected label { box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.4); background: #BBEF48;}
#an_productfields .anfield-radio {
  float: left;
  padding: 3px;
  margin: 0;
}
.an-pf-field-type-radio .anfield-radio.selected::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;

  width: 35px;
  height: 35px;

  background-color: #76a600;

-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 17l-4-4 2-2 2 2 8-8 2 2z'/></svg>") no-repeat center;
mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 17l-4-4 2-2 2 2 8-8 2 2z'/></svg>") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;

  opacity: 1;
  visibility: visible;
}
.labeltitle { display: block; font-size: 19px; font-weight: bold; margin: 0; text-align: left; }
#pf-style-155 label { background: #ffb0d6 none repeat scroll 0 0; color: #000; }
#pf-style-156 label { background: #ff1cd5; color: #fff; }
#pf-style-157 label { background: #a10684; color: #ffffff; }
#pf-style-158 label { background: #000000; color: #ffffff; }
#pf-style-159 label { background: #8ca5ff none repeat scroll 0 0; color: #ffffff; }
#pf-style-160 label { background: #0eb0e6; color: #000000; }
#pf-style-161 label { background: #0000ad; color: #ffffff; }
#pf-style-162 label { background: #ffffff; color: #000000; }
#pf-style-163 label { background: #feff57; color: #000000; }
#pf-style-164 label { background: #ed7f10; color: #ffffff; }
#pf-style-165 label { background: #f30800; color: #ffffff; }
#pf-style-166 label { background: #955628; color: #ffffff; }
#pf-style-167 label { background: #89ff49; color: #ffffff; }
#pf-style-168 label { background: #009f05; color: #ffffff; }

/*button*/
.an-pf-field-num-1 .an_155 input { color: #ffb0d6; -webkit-text-fill-color: #ffb0d6;}
.an-pf-field-num-1 .an_156 input { color: #ff1cd5; -webkit-text-fill-color: #ff1cd5;}
.an-pf-field-num-1 .an_157 input { color: #a10684; -webkit-text-fill-color: #a10684;}
.an-pf-field-num-1 .an_158 input { color: #000000; -webkit-text-fill-color: #000000;}
.an-pf-field-num-1 .an_159 input { color: #8ca5ff; -webkit-text-fill-color: #8ca5ff;}
.an-pf-field-num-1 .an_160 input { color: #0eb0e6; -webkit-text-fill-color: #0eb0e6;}
.an-pf-field-num-1 .an_161 input { color: #0000ad; -webkit-text-fill-color: #0000ad;}
.an-pf-field-num-1 .an_162 input { color: #ffffff; -webkit-text-fill-color: #ffffff;background: #cdcdcd;}
.an-pf-field-num-1 .an_163 input { color: #feff57; -webkit-text-fill-color: #feff57;background: #cdcdcd;}
.an-pf-field-num-1 .an_164 input { color: #ed7f10; -webkit-text-fill-color: #ed7f10;}
.an-pf-field-num-1 .an_165 input { color: #f30800;-webkit-text-fill-color: #f30800;}
.an-pf-field-num-1 .an_166 input { color: #955628;-webkit-text-fill-color: #955628;}
.an-pf-field-num-1 .an_167 input { color: #89ff49; -webkit-text-fill-color: #89ff49;}
.an-pf-field-num-1 .an_168 input { color: #009f05; -webkit-text-fill-color: #009f05;}
.an-pf-field-num-1 #an_145 input { font-family: "Amazone"; }
.an-pf-field-num-1 #an_146 input { font-family: "Comic Sans MS"; }
.an-pf-field-num-1 #an_147 input { font-family: "Fiolex Girls"; font-size: 35px; }
.an-pf-field-num-1 #an_148 input { font-family: "Walt Disney Script v4.1"; }
.an-pf-field-num-1 #an_149 input { font-family: "SF Action Man Bold"; }
.an-pf-field-num-1 #an_150 input { font-family: "Segoe Print"; }
.an-pf-field-num-1 #an_151 input { font-family: "Wrexham Script"; }
.an-pf-field-num-1 #an_152 input { font-family: "Jester Regular"; }
.an-pf-field-num-1 #an_153 input { font-family: "The Urban Way"; }
.an-pf-field-num-1 #an_154 input { font-family: "arial"; }
#pf-style-1 label, #pf-style-2 label, #pf-style-3 label, #pf-style-4 label {-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}
.pf-physiologique, .pf-anatomique, .pf-cerise, .pf-lovi_dynamic {display:none;}
/* ===== Tooltips sur les titres des radios ANPF ===== */

/* Le label sert d’ancre pour le tooltip */
.an-pf-field-type-radio .anfield-radio label {
  position: relative;
}

/* Ré-initialise .sr-only seulement dans le contexte ANPF + style tooltip */
.an-pf-field-type-radio .anfield-radio label .sr-only {
  position: absolute;               /* on s’affiche comme un tooltip */
  left: 50%;
  bottom: 100%;                     /* au-dessus du label */
  transform: translate(-50%, -10px);
  background: #000;
  color: #fff;
  padding: 2px 10px;
  border-radius: 3px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 5;

  /* on annule le “vrai” sr-only */
  width: auto; height: auto; margin: 0; overflow: visible;
  clip: auto; border: 0;

  /* état masqué par défaut */
  opacity: 0; visibility: hidden;
  transition: all .3s ease;
}

/* Affichage au survol ou au focus clavier */
.an-pf-field-type-radio .anfield-radio label:hover .sr-only,
.an-pf-field-type-radio .anfield-radio label:focus-within .sr-only {
  opacity: 1; visibility: visible;
  transform: translate(-50%, -15px);
}

/* (Optionnel) petite flèche du tooltip */
.an-pf-field-type-radio .anfield-radio label .sr-only::after {
  content: "";
  position: absolute; left: 50%; top: 100%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #000;
}

@media (max-width: 767px) {
	.an-pf-field-type-radio .anfield-radio.selected::after {
    
    bottom: 5px;
    right: 5px;
    line-height: 18px;
    font-size: 18px;
	}
	.an-pf-field-type-radio .anfield-radio label span {
    font-size: 17px;
}
#field_21 .anfield-radio {
     height: 45px !important; 
}
}
#field_22 .anfield-radio {
     height: 50px; 
}