/* Modules de la fiche voyant (voyants-fiches/modules.php), 15 octobre 2026.
   Repris de la maquette validée _nouveau-site/maquettes/fiche-voyant/fiche-complete.html.
   Or clair #B79E56 décor, or foncé #806B35 texte doré, pétrole #24363B, anthracite #34383A, gris #666A6D, vert dispo #3BAE72. */

/* ===== Étoiles ===== */
/* L'étoile est dessinée UNE fois ici (masque), plus de SVG recopié dans chaque étoile (21 octobre 2026).
   Deux couches : le fond (étoile pâle) et le plein (doré, coupé à --remplissage pour les demi-étoiles).
   Le masque est sur les couches, pas sur .vf-et : la lueur animée (filter sur .vf-et) n'est pas coupée. */
.vf-etoiles { display: inline-flex; gap: 2px; vertical-align: -2px; }
.vf-et { position: relative; display: inline-block; width: 17px; height: 17px; flex: 0 0 auto; }
.vf-et::before, .vf-et::after { content: ''; position: absolute; inset: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8l3 6.4 7 .8-5.2 4.8 1.4 6.9L12 17.2l-6.2 3.5 1.4-6.9L2 9l7-.8z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8l3 6.4 7 .8-5.2 4.8 1.4 6.9L12 17.2l-6.2 3.5 1.4-6.9L2 9l7-.8z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.vf-et::before { background: var(--vf-et-fond, #EFE6CC); }
.vf-et::after { background: var(--vf-et-plein, #C8AE62); clip-path: inset(0 calc(100% - var(--remplissage, 100%)) 0 0); }

/* ===== Carte sombre du haut : domaine, métiers, tarif en blanc (fond="clair" : couleurs foncées) ===== */
.vf-domaine, .vf-metiers, .vf-tarif { color: #fff; }
.vf-domaine { font-weight: 700; }
.vf-metiers { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; }
.vf-tarif { font-weight: 400; font-size: 14.5px; }
.vf-domaine.clair { color: #24363B; }
.vf-metiers.clair { color: #806B35; }
.vf-tarif.clair { color: #34383A; }

/* ===== Supports : une petite étoile dorée entre chacun ===== */
.vf-sep-or { display: inline-block; margin: 0 .55em; color: #B79E56; font-size: .62em; vertical-align: .2em; }

/* ===== Domaine et son picto (les 12 pictos validés le 8 octobre 2026) ===== */
.vf-domaine { display: inline-flex; align-items: center; gap: 10px; }
.vf-domaine .pd { width: 1.4em; height: 1.4em; flex: 0 0 auto; }
.pd { display: inline-block; vertical-align: middle; overflow: visible; fill: none; stroke: #b79e56; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pd .or { stroke: #e2c46e; stroke-width: 1.8; }
.pd .plein { fill: #b79e56; stroke: none; }
.pd .bat, .pd .g, .pd .d, .pd .etincelle, .pd .piece, .pd .etoile { transform-box: fill-box; transform-origin: center; }
.pd .t { stroke-dasharray: 1 1.2; animation: pd-trace 1.2s ease-out both; }
@keyframes pd-trace { from { stroke-dashoffset: 1.1px; } to { stroke-dashoffset: 0; } }
.pd-amour .bat { animation: pd-bat 2.4s ease-in-out 1.2s infinite; }
@keyframes pd-bat { 0%, 60%, 100% { transform: scale(1); } 10% { transform: scale(1.12); } 20% { transform: scale(1); } 30% { transform: scale(1.08); } }
.pd-rupture .felure { stroke-dasharray: 1 1.2; animation: pd-trace 1.6s ease-out .8s both, pd-kintsugi 3.6s ease-in-out 2.4s infinite; }
@keyframes pd-kintsugi { 0%, 100% { filter: drop-shadow(0 0 0 rgba(226, 196, 110, 0)); } 50% { filter: drop-shadow(0 0 3px rgba(226, 196, 110, .95)); } }
.pd-rencontres .g { animation: pd-g 4s ease-in-out 1.2s infinite; }
.pd-rencontres .d { animation: pd-d 4s ease-in-out 1.2s infinite; }
@keyframes pd-g { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(1.6px); } }
@keyframes pd-d { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-1.6px); } }
.pd-reconquerir .fleche { transform-box: view-box; transform-origin: 12px 12px; animation: pd-retour 4.5s ease-in-out 1.2s infinite; }
@keyframes pd-retour { 0%, 100% { transform: rotate(0); } 40%, 60% { transform: rotate(-35deg); } }
.pd-seduction .etincelle { animation: pd-scint 2.6s ease-in-out 1.2s infinite; }
@keyframes pd-scint { 0%, 100% { transform: scale(.6) rotate(0); opacity: .5; } 50% { transform: scale(1.15) rotate(45deg); opacity: 1; } }
.pd-fidelite .anneaux { transform-box: view-box; transform-origin: 12px 13px; animation: pd-osc 5s ease-in-out 1.2s infinite; }
@keyframes pd-osc { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.pd-conflits .fleau { transform-box: view-box; transform-origin: 12px 6px; animation: pd-balance 5s ease-in-out 1.2s infinite; }
@keyframes pd-balance { 0% { transform: rotate(0); } 15% { transform: rotate(-9deg); } 30% { transform: rotate(6deg); } 45% { transform: rotate(-3deg); } 60%, 100% { transform: rotate(0); } }
.pd-confiance .rayon { animation: pd-rayon 3s ease-in-out 1.2s infinite; }
@keyframes pd-rayon { 0%, 100% { opacity: .3; } 15% { opacity: 1; } 40% { opacity: .3; } }
.pd-pro .etoile { animation: pd-monte 3.4s ease-out 1.4s infinite; }
@keyframes pd-monte { 0% { transform: translateY(4px) scale(.4); opacity: 0; } 30% { opacity: 1; } 70% { opacity: 1; } 100% { transform: translateY(-5px) scale(1); opacity: 0; } }
.pd-famille .coeur { animation: pd-allume 3.2s ease-in-out 1.4s infinite; }
@keyframes pd-allume { 0%, 100% { fill: rgba(183, 158, 86, 0); } 50% { fill: rgba(183, 158, 86, .85); } }
.pd-finances .piece { animation: pd-pivote 4s ease-in-out 1.2s infinite; }
@keyframes pd-pivote { 0%, 55%, 100% { transform: scaleX(1); } 70% { transform: scaleX(.1); } 85% { transform: scaleX(1); } }
.pd-tous .etoile { animation: pd-scint 3s ease-in-out 1.2s infinite; }

/* ===== Ligne de note (carte du haut) : les étoiles brillent tour à tour ===== */
.vf-ligne-note { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 9px; font-size: 16px; line-height: 1.5; color: #e9e3d0; }
.vf-ligne-note b { color: #fff; font-weight: 700; }
.vf-ligne-note .vf-et { --vf-et-fond: rgba(255, 255, 255, .18); }
.vf-ligne-note .vf-et { animation: vf-lueur 3.6s ease-in-out infinite; animation-delay: calc(1s + var(--i) * .18s); }
@keyframes vf-lueur { 0%, 60%, 100% { filter: drop-shadow(0 0 0 rgba(240, 215, 140, 0)); } 30% { filter: drop-shadow(0 0 8px rgba(240, 210, 120, .95)) drop-shadow(0 0 2px #fff6d8); } }
.vf-ligne-note .vf-sep { color: #B79E56; font-size: 10px; margin-right: 9px; }
.vf-ligne-note .vf-conso { white-space: nowrap; }
.vf-ligne-note.clair { color: #666A6D; }
.vf-ligne-note.clair b { color: #24363B; }
.vf-ligne-note.clair .vf-et { --vf-et-fond: #EFE6CC; }
@media (max-width: 640px) { .vf-ligne-note .vf-conso .vf-sep { display: none; } }

/* ===== Disponibilité : pastille (sur la photo) ===== */
.vf-pouls { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #3BAE72; margin-right: 8px; flex: 0 0 auto; animation: vf-pouls 2.2s infinite; }
.vf-pouls.eteint { background: #8d9396; animation: none; }
@keyframes vf-pouls { 0% { box-shadow: 0 0 0 0 rgba(59, 174, 114, .55); } 70% { box-shadow: 0 0 0 9px rgba(59, 174, 114, 0); } 100% { box-shadow: 0 0 0 0 rgba(59, 174, 114, 0); } }
.vf-dispo { display: inline-flex; align-items: center; white-space: nowrap; background: #fff; color: #24363B; font-size: 13.5px; font-weight: 700; line-height: 1.3;
  padding: 6px 14px; border-radius: 5px; box-shadow: 0 0 0 1.5px #B79E56, 0 8px 20px rgba(0, 0, 0, .35); }
.vf-dispo.ferme { color: #666A6D; }
/* Placé dans un module juste sous le portrait : remonte sur le bas de la photo */
.vf-dispo.sur-photo { position: relative; z-index: 4; margin-top: -34px; }

/* ===== Planning des 7 prochains jours ===== */
.vf-planning { max-width: 820px; margin: 0 auto; }
.vf-planning .vf-statut { display: flex; align-items: center; justify-content: center; font-weight: 700; color: #24363B; font-size: 16px; margin: 0 0 14px; text-align: center; }
.vf-semaine { display: grid; gap: 7px; }
.vf-jour, .vf-graduation { display: grid; grid-template-columns: 74px 1fr 92px; gap: 10px; align-items: center; font-size: 13.5px; line-height: 1.35; }
.vf-graduation { font-size: 11px; color: #9aa0a3; }
.vf-graduation div { display: flex; justify-content: space-between; }
.vf-jour .nom { font-weight: 700; color: #24363B; }
.vf-jour .nom small { display: block; font-weight: 400; color: #666A6D; font-size: 11.5px; }
.vf-jour .piste { position: relative; height: 12px; background: #F3EFE4; border-radius: 2px; }
.vf-jour .bande { position: absolute; top: 0; bottom: 0; background: linear-gradient(90deg, #B79E56, #E2CF97); border-radius: 2px; transform: scaleX(0); transform-origin: left;
  animation: vf-pousse .9s cubic-bezier(.3, .7, .2, 1) forwards; animation-delay: calc(var(--i) * .09s); }
@keyframes vf-pousse { to { transform: scaleX(1); } }
.vf-jour .heures { text-align: right; color: #666A6D; }
.vf-jour.repos .heures { color: #9aa0a3; font-style: italic; }
.vf-jour.aujourdhui { background: #F8F4EA; margin: 0 -10px; padding: 4px 10px; border-radius: 2px; }
.vf-jour.aujourdhui .nom { color: #806B35; }
.vf-jour .maintenant { position: absolute; top: -5px; bottom: -5px; width: 2px; background: #3BAE72; box-shadow: 0 0 0 3px rgba(59, 174, 114, .2); }

/* ===== Avis : la note en anneau, la répartition, le fil qui défile ===== */
.vf-avis { display: grid; grid-template-columns: 280px 1fr; gap: 30px; align-items: start; }
@media (max-width: 760px) { .vf-avis { grid-template-columns: 1fr; } }
.vf-sceau { position: relative; width: 190px; height: 190px; margin: 0 auto 10px; }
.vf-sceau > svg { width: 100%; height: 100%; overflow: visible; }
.vf-sceau .piste { fill: none; stroke: #EFE6CC; stroke-width: 9; }
.vf-sceau .arc { fill: none; stroke: #C8AE62; stroke-width: 9; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(-90deg); transform-origin: 95px 95px; }
.vf-avis.vu .vf-sceau .arc { animation: vf-arc 2s cubic-bezier(.3, .7, .2, 1) .3s forwards; }
@keyframes vf-arc { to { stroke-dashoffset: var(--reste); } }
.vf-sceau .pointille { fill: none; stroke: rgba(183, 158, 86, .45); stroke-width: 1; stroke-dasharray: 1.5 5; transform-origin: 95px 95px; animation: vf-tourne 90s linear infinite; }
@keyframes vf-tourne { to { transform: rotate(360deg); } }
.vf-sceau .centre { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.vf-sceau .centre b { font-size: 48px; font-weight: 800; color: #24363B; line-height: 1; letter-spacing: -2px; }
.vf-sceau .centre .vf-etoiles { margin-top: 6px; }
.vf-sceau .centre .vf-et { width: 15px; height: 15px; animation: vf-lueur 3.6s ease-in-out infinite; animation-delay: calc(1s + var(--i) * .18s); }
.vf-sur { text-align: center; font-size: 14px; margin: 0 0 14px; }
.vf-repartition { display: grid; gap: 8px; }
.vf-repartition small { text-align: center; color: #666A6D; font-size: 12px; }
.vf-barre { display: grid; grid-template-columns: 34px 1fr 40px; gap: 8px; align-items: center; font-size: 13px; }
.vf-barre .lib { display: flex; align-items: center; gap: 3px; font-weight: 700; color: #24363B; }
.vf-barre .lib .vf-et { width: 13px; height: 13px; }
.vf-barre .piste { height: 9px; background: #F3EFE4; border-radius: 2px; overflow: hidden; }
.vf-barre .piste i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #B79E56, #E2CF97); transition: width 1.4s cubic-bezier(.3, .7, .2, 1); }
.vf-barre .nb { text-align: right; color: #666A6D; }
.vf-fil { position: relative; height: 520px; overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(transparent, #000 8%, #000 92%, transparent); }
.vf-fil .vf-colonne { display: grid; gap: 12px; animation: vf-defile var(--duree, 100s) linear infinite; }
.vf-fil:hover .vf-colonne { animation-play-state: paused; }
@keyframes vf-defile { to { transform: translateY(-50%); } }
.vf-carte-avis { background: #fff; border-radius: 2px; padding: 14px 18px; box-shadow: 0 0 0 1px #E8E1CF; }
.vf-carte-avis .vf-et { width: 15px; height: 15px; }
.vf-carte-avis p { margin: 4px 0 6px; padding: 0; font-size: 14.5px; line-height: 1.6; text-align: justify; hyphens: auto; }
.vf-carte-avis .qui { font-size: 12.5px; color: #666A6D; }
.vf-carte-avis .qui b { color: #24363B; }

/* ===== Questions fréquentes : lignes séparées par un filet doré ===== */
.vf-faq { border-top: 1px solid rgba(183, 158, 86, .5); }
.vf-faq details { border-bottom: 1px solid rgba(183, 158, 86, .5); }
.vf-faq summary { list-style: none; cursor: pointer; position: relative; padding: 14px 60px 14px 22px; font-size: 16.5px; font-weight: 600; color: #24363B; line-height: 1.45; text-align: left; }
.vf-faq summary::-webkit-details-marker { display: none; }
.vf-faq .plus { position: absolute; right: 18px; top: 50%; margin-top: -15px; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid #B79E56; transition: transform .4s, background .4s; }
.vf-faq .plus::before, .vf-faq .plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; background: #806B35; transform: translate(-50%, -50%); }
.vf-faq .plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.vf-faq details[open] .plus { transform: rotate(135deg); background: #F8F4EA; }
.vf-faq .reponse { padding: 0 22px 16px; font-size: 15px; animation: vf-deplie .5s ease; }
.vf-faq .reponse p { margin: 0; padding: 0; text-align: justify; hyphens: auto; }
@keyframes vf-deplie { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ===== Grille maison des voyants (shortcode voyants_grille), 15 octobre 2026 : photo carrée en grand, sans liseré ;
   toute la carte mène à la fiche, le bouton appelle ; les voyants absents aujourd'hui ne sont pas montrés ===== */
.vf-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.vf-carte { position: relative; background: #fff; border-radius: 2px; overflow: hidden; text-align: center; box-shadow: 0 0 0 1px #E8E1CF, 0 10px 28px rgba(36, 54, 59, .06);
  display: flex; flex-direction: column; transition: transform .3s, box-shadow .3s; }
.vf-carte:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px #B79E56, 0 16px 34px rgba(36, 54, 59, .12); }
.vf-carte.cachee { display: none; }
.vf-lien { position: absolute; inset: 0; z-index: 1; }
.vf-photo { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.vf-carte.plus-tard .vf-photo { filter: grayscale(.35); }
.vf-carte-texte { display: flex; flex-direction: column; align-items: center; flex: 1 1 auto; padding: 12px 12px 14px; }
.vf-prenom { font-size: 18px; font-weight: 700; color: #24363B; line-height: 1.3; }
/* La note est à la même hauteur dans toutes les cartes : la spécialité (1 ou 2 lignes) se cale juste au-dessus,
   les métiers (1 ou 2 lignes) juste en dessous ; la disponibilité et le bouton restent en bas */
.vf-carte-domaine { display: flex; align-items: flex-end; justify-content: center; width: 100%; min-height: 2.7em; margin-top: 2px; font-size: 14.5px; font-weight: 700; color: #806B35; line-height: 1.35; }
.vf-carte-note { display: inline-flex; align-items: center; gap: 7px; margin-top: 5px; font-size: 15.5px; color: #666A6D; }
.vf-carte-metiers { display: block; width: 100%; min-height: 2.9em; margin-top: 5px; font-size: 13px; color: #555A5D; line-height: 1.45; }
.vf-losange { display: inline-block; margin: 0 6px; font-size: 6.5px; color: #B79E56; vertical-align: 2px; }
@media (max-width: 640px) { .vf-carte-domaine { font-size: 13px; } .vf-carte-note { font-size: 14px; } .vf-carte-metiers { font-size: 11.5px; } .vf-losange { margin: 0 3px; font-size: 5.5px; } }
.vf-carte-note .vf-et { width: 17px; height: 17px; }
@media (max-width: 640px) { .vf-carte-note .vf-et { width: 15px; height: 15px; } }
.vf-carte-dispo { display: inline-flex; align-items: center; margin: auto 0 12px; padding-top: 8px; font-size: 12.5px; font-weight: 700; color: #34383A; }
.vf-carte .vf-bouton { margin-top: 0; }
.vf-carte.plus-tard .vf-carte-dispo { color: #666A6D; font-weight: 600; }
/* Le bouton passe au-dessus du lien de la carte : il appelle, la carte ouvre la fiche */
.vf-bouton { position: relative; z-index: 2; display: block; width: 100%; margin-top: auto; padding: 10px; border-radius: 5px; background: #974302; color: #fff; border: 1.5px solid #974302;
  font-size: 14px; font-weight: 700; text-decoration: none; text-align: center; line-height: 1.2; transition: background .25s; }
.vf-bouton:hover { background: #7c3702; color: #fff; }
/* Divi impose sa couleur de lien sur certaines pages (archive /voyants/) : le texte des boutons reste blanc
   (« Voir sa fiche » : pétrole, puis blanc au survol ; grisé : gris), quoi qu'il arrive (16 octobre 2026) */
a.vf-bouton, a.vf-bouton:hover, a.vf-bouton:focus, a.vf-bouton:visited { color: #fff !important; }
.vf-carte.plus-tard a.vf-bouton { color: #9AA0A6 !important; }
a.vf-bouton.vf-bouton-fiche, a.vf-bouton.vf-bouton-fiche:visited, .vf-carte.plus-tard a.vf-bouton.vf-bouton-fiche { color: #24363B !important; }
a.vf-bouton.vf-bouton-fiche:hover, a.vf-bouton.vf-bouton-fiche:focus { color: #fff !important; }
/* Carrousel : « Voir sa fiche », bordé d'or, plein pétrole au survol */
.vf-bouton-fiche { background: #fff; color: #24363B; border-color: #B79E56; }
.vf-bouton-fiche:hover { background: #24363B; color: #fff; border-color: #24363B; }
/* Voyant sans CB : deux autres tons de brique, de la même famille que la rouille (CB) */
.vf-bouton-audiotel { background: #B4582A; border-color: #B4582A; }
.vf-bouton-audiotel:hover { background: #964620; }
.vf-bouton-sms { background: #7E3420; border-color: #7E3420; }
.vf-bouton-sms:hover { background: #652816; }
/* ===== Coupon des fiches privées (shortcode voyant_coupon, version C « le sceau en marge ») ===== */
.vf-coupon { display: flex; align-items: center; gap: 18px; max-width: 760px; margin: 0 auto; padding: 14px 18px; border-top: 2px solid #E2CF97; border-bottom: 2px solid #E2CF97;
  background: linear-gradient(90deg, #FBF7EC, #fff 60%); font-family: 'Open Sans', Arial, sans-serif; }
.vf-coupon .od-sceau { position: static; left: auto; top: auto; flex: 0 0 58px; width: 58px; margin: 0; animation: vf-respire 4s ease-in-out infinite; }
@keyframes vf-respire { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.06) rotate(-4deg); } }
.vf-coupon-texte { flex: 1 1 auto; }
.vf-coupon-titre { margin: 0; padding: 0; font-size: 17px; font-weight: 800; line-height: 1.35; color: #24363B; }
.vf-coupon-titre span { font-size: 14px; font-weight: 600; color: #806B35; }
.vf-coupon-ligne { margin: 4px 0 0; padding: 0; font-size: 13.5px; line-height: 1.5; color: #555A5D; }
.vf-coupon-ligne b { letter-spacing: .14em; color: #24363B; }
.vf-coupon-ligne a { color: inherit; text-decoration: underline; }
.vf-coupon .vf-coupon-appel { flex: 0 0 auto; width: auto; padding: 11px 22px; font-size: 15px; }
.vf-coupon .vf-coupon-appel.appel-inactif { background: #F2F2F0; color: #9AA0A6; border-color: #C9CDD0; cursor: default; }
@media (max-width: 600px) { .vf-coupon { flex-wrap: wrap; justify-content: center; text-align: center; } .vf-coupon-texte { flex-basis: 100%; } .vf-coupon .vf-coupon-appel { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .vf-coupon .od-sceau { animation: none; } }

/* ===== Offre des fiches : le coupon qui déplie le formulaire, et la ligne du haut (19 octobre 2026) ===== */
.vf-offre { max-width: 760px; margin: 0 auto; width: 100%; }
.vf-offre [hidden], .vf-offre-lien[hidden] { display: none !important; }
.vf-offre .vf-coupon-appel { cursor: pointer; max-width: 260px; white-space: normal; line-height: 1.3; text-align: center; }
.vf-offre .vf-coupon-texte { flex: 1 1 300px; min-width: 0; }
.vf-offre-formulaire { margin: 18px auto 0; max-width: 560px; }
.vf-offre-formulaire .ftel { margin: 0 auto; }
/* Le repère « minutes offertes » (19 octobre 2026) : bouton du haut remplacé, pastille dorée sur les voyants privés */
[data-si-offre][hidden], [data-si-client][hidden], .vf-appeler [hidden] { display: none !important; }
.vf-appeler { display: block; text-align: center; }
.vf-appeler .vf-bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; max-width: 437px;
  min-height: 52px; padding: 8px 20px; border-radius: 5px; background: #974302; color: #fff;
  font-size: 22px; font-weight: 400; line-height: 1.2; text-decoration: none;
}
.vf-appeler .vf-bouton:hover { background: #7d3702; color: #fff; }
/* Voyant indisponible selon son planning (21 octobre 2026) : « Appeler » grisé et inactif, comme dans la grille */
/* Gris moyen, texte blanc : on voit qu'il est inactif, mais « Appeler » reste lisible (sur fond clair comme sur fond sombre) */
.vf-appeler .vf-bouton.appel-inactif, .vf-appeler .vf-bouton.appel-inactif:hover { background: #6B7073; color: #fff; cursor: default; pointer-events: none; }
/* « Indisponible » : sans le combiné de téléphone */
.vf-appeler .vf-bouton.appel-inactif svg { display: none; }
.vf-appeler .vf-appeler-offre { font-size: 20px; font-weight: 600; }
.vf-pastille-offre {
  position: absolute; top: 10px; left: 10px; z-index: 2; padding: 4px 10px; border-radius: 2px;
  background: #b79e56; color: #fff; font-size: 13px; font-weight: 700; line-height: 1.3; pointer-events: none;
  box-shadow: 0 2px 8px rgba(36, 54, 59, .25);
}
/* Plus lisible (19 octobre 2026 : « quasiment invisible »), sans devenir un bandeau. */
.vf-offre-lien { margin: 10px 0 0; padding: 0; text-align: center; font-size: 16px; line-height: 1.5; }
.vf-offre-lien a { color: #806B35; font-weight: 600; text-decoration: none; border-bottom: 2px solid #b79e56; }
.vf-offre-lien a:hover { border-bottom-color: #806B35; }
/* ===== Avis des pages de services (shortcode avis_services) : carrousel A, un avis à la fois,
   carte à double bordure dorée ; flèches de chaque côté sur ordinateur, glissé au doigt sur mobile ; pas de points ===== */
.vfa { max-width: 900px; margin: 0 auto; font-family: 'Open Sans', Arial, sans-serif; }
.vfa-scene { display: flex; align-items: center; gap: 16px; }
.vfa-carte { position: relative; flex: 1 1 auto; min-width: 0; padding: 38px 46px 30px; text-align: center; background: #fff; border: 1.5px solid #B79E56; border-radius: 2px;
  box-shadow: 0 10px 30px rgba(183, 158, 86, .14); touch-action: pan-y; }
.vfa-carte::before { content: ''; position: absolute; inset: 7px; border: 1px solid rgba(183, 158, 86, .4); border-radius: 2px; pointer-events: none; }
.vfa-guillemet { position: absolute; left: 26px; top: 4px; font-size: 90px; line-height: 1; font-weight: 700; color: rgba(183, 158, 86, .3); }
.vfa-piste { display: grid; }
.vfa-avis { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .6s, visibility .6s; }
.vfa-avis.is-on { opacity: 1; visibility: visible; }
.vfa-etoiles { display: flex; justify-content: center; gap: 4px; margin-bottom: 16px; }
.vfa-etoiles svg { width: 24px; height: 24px; fill: #B79E56; }
.vfa-texte { margin: 0; padding: 0; font-size: 17px; font-style: italic; line-height: 1.65; color: #333; }
.vfa-pied { margin: 16px 0 0; padding: 0; font-size: 14px; color: #666A6D; }
.vfa-auteur { font-weight: 700; color: #24363B; }
.vfa-date { font-size: 13px; }
.vfa-voyant { display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 600; color: #24363B; text-decoration: none; border-bottom: 1px solid rgba(183, 158, 86, .6); }
.vfa-voyant:hover { color: #000; border-bottom-color: #B79E56; }
.vfa-fleche { flex: 0 0 42px; width: 42px; height: 42px; padding: 0; border-radius: 50%; border: 1.5px solid #B79E56; background: #fff; color: #24363B; font-size: 24px; line-height: 38px;
  cursor: pointer; box-shadow: 0 6px 18px rgba(36, 54, 59, .1); transition: background .25s; }
.vfa-fleche:hover { background: #F7F1E1; }
.vfa-mention { margin: 12px 0 0; padding: 0; text-align: center; font-size: 12px; color: #8A8F93; }
@media (max-width: 640px) { .vfa-fleche { display: none; } .vfa-carte { padding: 32px 18px 24px; } .vfa-texte { font-size: 15.5px; } .vfa-guillemet { left: 12px; font-size: 70px; } }
/* « Voir plus de voyants disponibles » */
.vf-plus-cadre { margin: 22px 0 0; text-align: center; }
.vf-plus { padding: 11px 26px; border: 1.5px solid #B79E56; border-radius: 5px; background: #fff; color: #24363B; font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; transition: background .25s, color .25s; }
.vf-plus:hover { background: #24363B; color: #fff; border-color: #24363B; }
.vf-plus[hidden] { display: none; }
/* Fenêtre du coût, avant l'appel audiotel ou le SMS */
.vf-cout .boite { box-sizing: border-box; width: min(380px, 100%); padding: 26px 22px 18px; border-radius: 5px; background: #fff; text-align: center; box-shadow: 0 0 0 2px #E2CF97, 0 30px 80px rgba(0, 0, 0, .5); font-family: 'Open Sans', Arial, sans-serif; }
.vf-cout .titre { margin: 0 0 12px; padding: 0; font-size: 18px; font-weight: 700; color: #24363B; }
.vf-cout .ligne1 { margin: 0; padding: 0; font-size: 16px; font-weight: 700; color: #34383A; }
.vf-cout .ligne2 { margin: 4px 0 18px; padding: 0; font-size: 14px; color: #806B35; }
.vf-cout .majeurs { margin: -10px 0 16px; padding: 0; font-size: 12.5px; font-style: italic; color: #666A6D; }
.vf-cout .annuler { margin-top: 10px; padding: 6px 12px; border: 0; background: none; color: #666A6D; font-size: 13.5px; text-decoration: underline; cursor: pointer; }
/* Disponible plus tard aujourd'hui : « Appeler » grisé, inactif */
.vf-carte.plus-tard .vf-bouton { background: #F2F2F0; color: #9AA0A6; border-color: #C9CDD0; pointer-events: none; }
/* « Voir sa fiche » reste actif même s'il consulte plus tard */
.vf-carte.plus-tard .vf-bouton-fiche { background: #fff; color: #24363B; border-color: #B79E56; pointer-events: auto; }
.vf-carte.plus-tard .vf-bouton-fiche:hover { background: #24363B; color: #fff; border-color: #24363B; }
@media (max-width: 640px) { .vf-grille { grid-template-columns: 1fr 1fr; gap: 10px; } .vf-carte-texte { padding: 10px 8px 12px; } .vf-prenom { font-size: 16px; } }
/* Carrousel : 4 cartes entières sur ordinateur (3 sur tablette) avec des flèches, une carte à la fois sur mobile ;
   pas de barre de défilement */
.vf-carrousel-cadre { position: relative; }
.vf-grille.vf-carrousel { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 6px 2px 14px;
  scrollbar-width: none; -ms-overflow-style: none; }
.vf-grille.vf-carrousel::-webkit-scrollbar { display: none; }
.vf-grille.vf-carrousel.vf-centre { justify-content: center; }
.vf-grille.vf-carrousel { cursor: grab; user-select: none; -webkit-user-select: none; }
.vf-grille.vf-carrousel:active { cursor: grabbing; }
.vf-grille.vf-carrousel img { -webkit-user-drag: none; pointer-events: none; }
.vf-grille.vf-carrousel .vf-carte { flex: 0 0 calc((100% - 48px) / 4); scroll-snap-align: start; }
@media (max-width: 980px) { .vf-grille.vf-carrousel .vf-carte { flex-basis: calc((100% - 32px) / 3); } }
@media (max-width: 640px) { .vf-grille.vf-carrousel { gap: 12px; } .vf-grille.vf-carrousel .vf-carte { flex-basis: 100%; scroll-snap-stop: always; } }
.vf-fleche { position: absolute; z-index: 3; top: 34%; width: 42px; height: 42px; margin-top: -21px; padding: 0; border-radius: 50%; border: 1.5px solid #B79E56; background: #fff;
  color: #24363B; font-size: 24px; line-height: 38px; text-align: center; cursor: pointer; box-shadow: 0 6px 18px rgba(36, 54, 59, .15); transition: opacity .25s, background .25s; }
.vf-fleche:hover { background: #F7F1E1; }
.vf-fleche.prec { left: -16px; }
.vf-fleche.suiv { right: -16px; }
.vf-fleche[disabled] { opacity: 0; pointer-events: none; }
@media (max-width: 640px) { .vf-fleche { width: 36px; height: 36px; margin-top: -18px; line-height: 32px; font-size: 20px; } .vf-fleche.prec { left: 6px; } .vf-fleche.suiv { right: 6px; } }
/* Liste : la photo à gauche */
.vf-grille.vf-liste { grid-template-columns: 1fr 1fr; }
.vf-grille.vf-liste .vf-carte { flex-direction: row; text-align: left; }
.vf-grille.vf-liste .vf-photo { width: 140px; flex: 0 0 140px; }
.vf-grille.vf-liste .vf-carte-texte { align-items: flex-start; }
.vf-grille.vf-liste .vf-carte-domaine { min-height: 0; justify-content: flex-start; }
.vf-grille.vf-liste .vf-carte-metiers { min-height: 0; }
@media (max-width: 640px) { .vf-grille.vf-liste { grid-template-columns: 1fr; } }
.vf-aucun { text-align: center; color: #666A6D; margin: 20px 0; }

/* ===== Moteur de recherche (shortcode voyants_grille avec filtres="oui") ===== */
.vf-filtres { margin: 0 0 28px; }
.vf-recherche { position: relative; max-width: 520px; margin: 0 auto 18px; }
.vf-recherche input { width: 100%; padding: 12px 16px; border: 1px solid #DCD5C3; border-radius: 5px; background: #FCFBF8; font: 16px/1.4 'Open Sans', Arial, sans-serif; color: #34383A; outline: none; }
.vf-recherche input:focus { border-color: #B79E56; background: #fff; box-shadow: 0 0 0 3px rgba(183, 158, 86, .2); }
.vf-suggestions { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); background: #fff; border-radius: 5px; box-shadow: 0 0 0 1px #B79E56, 0 16px 40px rgba(36, 54, 59, .18); overflow: hidden; }
.vf-suggestions a { display: flex; align-items: center; gap: 12px; padding: 8px 12px; text-decoration: none; color: #24363B; border-top: 1px solid #F0EBDD; }
.vf-suggestions a:first-child { border-top: 0; }
.vf-suggestions a:hover, .vf-suggestions a:focus { background: #F8F4EA; }
.vf-suggestions img { width: 44px; height: 44px; object-fit: cover; border-radius: 2px; flex: 0 0 44px; }
.vf-suggestions b { display: block; font-size: 15px; }
.vf-suggestions small { display: block; font-size: 12px; color: #806B35; }
/* Le bloc déroulant des filtres : un clic l'ouvre ; groupes les uns sous les autres, boutons centrés */
.vf-deroulant { max-width: 860px; margin: 0 auto; }
.vf-deroulant summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; width: max-content; margin: 0 auto; padding: 10px 22px;
  border: 1.5px solid #B79E56; border-radius: 5px; background: #fff; color: #24363B; font: 700 15px/1.2 'Open Sans', Arial, sans-serif; }
.vf-deroulant summary::-webkit-details-marker { display: none; }
.vf-deroulant summary:hover, .vf-deroulant[open] summary { background: #F8F4EA; }
.vf-chevron { width: 9px; height: 9px; border-right: 2px solid #806B35; border-bottom: 2px solid #806B35; transform: rotate(45deg) translate(-2px, -2px); transition: transform .3s; }
.vf-deroulant[open] .vf-chevron { transform: rotate(-135deg) translate(-2px, -2px); }
.vf-deroulant-corps { margin-top: 14px; padding: 6px 16px 16px; border-top: 1px solid #E8E1CF; animation: vf-deplie .4s ease; }
.vf-groupe { margin: 16px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: #24363B; text-align: center; }
.vf-choix-ligne { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.vf-choix { display: inline-flex; align-items: center; padding: 8px 16px; border: 1px solid #DCD5C3; border-radius: 5px; background: #fff; color: #34383A; font: 600 14px/1.3 'Open Sans', Arial, sans-serif; cursor: pointer; transition: all .2s; }
.vf-choix:hover { border-color: #B79E56; }
.vf-choix[aria-pressed="true"] { border-color: #B79E56; background: #F8F4EA; color: #24363B; box-shadow: inset 0 0 0 1px #B79E56; }
.vf-choix .vf-pouls { animation: none; }
.vf-deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #E8E1CF; }
@media (max-width: 640px) { .vf-deux-colonnes { grid-template-columns: 1fr; } }
/* « Classer par » */
.vf-tri { min-width: 240px; padding: 9px 36px 9px 14px; border: 1.5px solid #E2CF97; border-radius: 5px; background: #fff; color: #24363B; font: 600 14px 'Open Sans', Arial, sans-serif; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #B79E56 50%), linear-gradient(135deg, #B79E56 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%; background-size: 6px 6px; background-repeat: no-repeat; }
.vf-tri:focus { outline: none; border-color: #B79E56; }
.vf-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 16px; }
.vf-effacer { border: 0; background: none; color: #24363B; text-decoration: underline; text-decoration-color: #B79E56; text-underline-offset: 3px; font: 400 14px 'Open Sans', Arial, sans-serif; cursor: pointer; }


/* ===== Vidéo : la vignette, puis la fenêtre par-dessus la page (shortcode voyant_video) ===== */
.vf-video { position: relative; display: block; width: 100%; max-width: 720px; margin: 0 auto; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 2px; cursor: pointer;
  background: #16242A center / cover no-repeat; overflow: hidden; box-shadow: 0 0 0 1px rgba(183, 158, 86, .6), 0 22px 50px rgba(36, 54, 59, .22); font-family: inherit; }
.vf-video::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22, 36, 42, .1), rgba(22, 36, 42, .7)); }
.vf-video .vf-lire { position: absolute; z-index: 2; left: 50%; top: 50%; width: 80px; height: 80px; margin: -50px 0 0 -40px; border-radius: 50%; background: rgba(255, 255, 255, .95);
  display: flex; align-items: center; justify-content: center; transition: transform .3s; }
.vf-video:hover .vf-lire { transform: scale(1.08); }
.vf-video .vf-lire::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid #E2CF97; animation: vf-onde 2.4s ease-out infinite; }
@keyframes vf-onde { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.vf-video .vf-lire svg { width: 28px; height: 28px; margin-left: 5px; fill: #974302; }
.vf-video .vf-legende { position: absolute; z-index: 2; left: 0; right: 0; bottom: 16px; text-align: center; color: #fff; font-weight: 700; font-size: 17px; line-height: 1.3; }
.vf-video .vf-legende small { display: block; font-weight: 400; font-size: 12.5px; color: #e9e3d0; }
@media (max-width: 640px) { .vf-video .vf-lire { width: 56px; height: 56px; margin: -40px 0 0 -28px; } .vf-video .vf-lire svg { width: 20px; height: 20px; } .vf-video .vf-legende { bottom: 8px; font-size: 14.5px; } }
/* Lecteur maison : la vidéo déborde un peu du cadre (le titre et le logo de la chaîne restent hors champ au démarrage),
   un voile transparent empêche la souris d'atteindre YouTube (pas de logo ni de barre de lecture au survol) */
.vf-video-page { --rogne: 64px; position: relative; width: 100%; max-width: 720px; margin: 0 auto; aspect-ratio: 16 / 9; overflow: hidden; background: #000; box-shadow: 0 0 0 2px #E2CF97; }
.vf-video-ecran { position: absolute; inset: 0; }
.vf-video-ecran iframe { position: absolute; top: calc(-1 * var(--rogne)); left: 50%; width: auto; max-width: none; height: calc(100% + 2 * var(--rogne)); aspect-ratio: 16 / 9; transform: translateX(-50%); border: 0; }
.vf-video-voile { position: absolute; inset: 0; z-index: 2; cursor: pointer; }
.vf-video-page.libre .vf-video-voile { display: none; }
.vf-video-page .vf-video-affiche { position: absolute; inset: 0; z-index: 3; max-width: none; aspect-ratio: auto; border-radius: 0; box-shadow: none; transition: opacity .4s, visibility .4s; }
.vf-video-page.joue .vf-video-affiche, .vf-video-page.charge .vf-video-affiche { opacity: 0; visibility: hidden; }
.vf-video-page.charge .vf-video-voile::after { content: ''; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  border: 3px solid rgba(226, 207, 151, .35); border-top-color: #E2CF97; animation: vf-tourne .8s linear infinite; }
@keyframes vf-tourne { to { transform: rotate(360deg); } }
@media (max-width: 640px) { .vf-video-page { --rogne: 46px; } }
.vf-fenetre .vf-video-page { position: absolute; inset: 0; max-width: none; aspect-ratio: auto; box-shadow: none; }
.vf-fenetre { position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(15, 26, 30, .88); animation: vf-ouvre .3s ease; }
@keyframes vf-ouvre { from { opacity: 0; } to { opacity: 1; } }
.vf-fenetre .cadre { position: relative; width: min(960px, 100%); aspect-ratio: 16 / 9; background: #000; box-shadow: 0 0 0 1px #B79E56, 0 30px 80px rgba(0, 0, 0, .6); }
.vf-fenetre iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vf-fenetre .fermer { position: absolute; top: -46px; right: 0; width: 38px; height: 38px; border-radius: 5px; border: 1.5px solid #B79E56; background: transparent; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }

/* Moins de mouvement : tout à l'arrêt, à l'état final */
@media (prefers-reduced-motion: reduce) {
  .vf-et, .pd *, .vf-pouls, .vf-fil .vf-colonne, .vf-sceau .pointille { animation: none !important; }
  .vf-jour .bande { animation: none; transform: none; }
  .vf-sceau .arc { animation: none !important; stroke-dashoffset: var(--reste); }
  .pd .t, .pd .felure { stroke-dashoffset: 0 !important; }
}