.clock-wrap{
--size: min(700px, 90vw);
--radius: calc(var(--size) * 0.42);
--icon: clamp(38px, 10vw, 100px);
--center: clamp(200px, 18vw, 450px);
--title-gap: 10px;
--tooltip-offset: calc(var(--title-gap) + 2.6em);
position: relative;
width: var(--size);
height: var(--size);
margin: 0 auto;
background: transparent;
overflow: visible;
}
.clock-center-wrap{
--center-x-offset: 0px;
--center-y-offset: 12px;
position: absolute;
top: 50%;
left: 50%;
width: var(--center);
height: auto;
transform: translate(-50%, -50%) translate(var(--center-x-offset), var(--center-y-offset));
animation: centerPulseWrap 3.2s ease-in-out infinite;
z-index: 4;
cursor: pointer;
}
.clock-center-wrap .clock-center{
position: relative;
display: block;
width: 100%;
height: auto;
transform: none;
animation: none;
pointer-events: auto;
}
.clock-center-bubble{
position: absolute;
left: 50%;
bottom: calc(100% + 18px);
width: min(360px, 70vw);
padding: 16px 18px;
border-radius: 20px;
background: #fff;
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.16);
color: #2f2a26;
font-size: 14px;
line-height: 1.5;
text-align: center;
white-space: normal;
text-transform: none;
opacity: 0;
pointer-events: none;
transform: translateX(-50%) translateY(10px);
transition: opacity .28s ease, transform .28s ease;
z-index: 99999;
}
.clock-center-bubble::before{
content: "";
position: absolute;
left: 50%;
bottom: -8px;
width: 16px;
height: 16px;
background: #fff;
transform: translateX(-50%) rotate(45deg);
}
.clock-center-wrap:hover .clock-center-bubble{
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* chaque icône est positionnée par son CENTRE */
.clock-icon{
position: absolute;
top: 50%;
left: 50%;
width: var(--icon);
height: var(--icon);
text-decoration: none;
z-index: 3;
opacity: 0;
transform:
translate(-50%, -50%)
rotate(var(--angle))
translateX(var(--radius))
rotate(calc(var(--angle) * -1));
animation: iconReveal .7s ease forwards;
isolation: isolate;
}
.clock-icon:hover{
z-index: 10000;
}
/* image */
.clock-icon .icon-img{
display: block;
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
transition: transform .25s ease;
}
.clock-icon .icon-title{
position: absolute;
top: calc(100% + var(--title-gap));
left: 50%;
transform: translateX(-50%) translateY(8px);
margin: 0;
width: max-content;
max-width: 180px;
text-align: center;
white-space: normal;
font-size: 13px;
font-weight: 500;
line-height: 1.2;
color: #333;
letter-spacing: .04em;
text-transform: none;
opacity: 0;
animation: textReveal .6s ease forwards;
animation-delay: .25s;
z-index: 2;
pointer-events: none;
}
.clock-icon .icon-hover-text{
position: absolute;
top: calc(100% + var(--tooltip-offset));
left: 50%;
width: min(320px, 42vw);
padding: 14px 16px;
border-radius: 18px;
background: #fff;
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.14);
color: #2f2a26;
font-size: 14px;
line-height: 1.5;
text-align: center;
white-space: normal;
text-transform: none;
opacity: 0;
pointer-events: none;
transform: translateX(-50%) translateY(10px);
transition: opacity .28s ease, transform .28s ease;
z-index: 99999;
}
.clock-icon .icon-hover-text::before{
content: "";
position: absolute;
top: -8px;
left: 50%;
width: 16px;
height: 16px;
background: #fff;
transform: translateX(-50%) rotate(45deg);
}
/* hover sur toutes les icônes */
.clock-icon:hover .icon-img{
transform: scale(1.12);
}
.clock-icon:hover .icon-hover-text{
opacity: 1;
transform: translateX(-50%) translateY(7px);
}
.i4 .icon-hover-text,
.i5 .icon-hover-text,
.i7 .icon-hover-text,
.i8 .icon-hover-text{
top: auto;
bottom: calc(100% + var(--tooltip-offset));
transform: translateX(-50%) translateY(0px);
}
.i4 .icon-hover-text::before,
.i5 .icon-hover-text::before,
.i7 .icon-hover-text::before,
.i8 .icon-hover-text::before{
top: auto;
bottom: -8px;
}
.i4:hover .icon-hover-text,
.i5:hover .icon-hover-text,
.i7:hover .icon-hover-text,
.i8:hover .icon-hover-text{
transform: translateX(-50%) translateY(30px);
}
/* positions */
.i1 { --angle: -90deg; animation-delay: 0.20s; }
.i2 { --angle: -130deg; animation-delay: 0.40s; }
.i3 { --angle: -170deg; animation-delay: 0.60s; }
.i4 { --angle: -210deg; animation-delay: 0.80s; }
.i5 { --angle: -250deg; animation-delay: 1.00s; }
.i7 { --angle: -290deg; animation-delay: 1.20s; }
.i8 { --angle: -330deg; animation-delay: 1.40s; }
.i9 { --angle: -370deg; animation-delay: 1.60s; }
.i10 { --angle: -410deg; animation-delay: 1.80s; }
/* images normales */
.i1 .icon-img { background-image: url("https://www.poyetherapie.fr/icones/1.png"); }
.i2 .icon-img { background-image: url("https://www.poyetherapie.fr/icones/2.png"); }
.i3 .icon-img { background-image: url("https://www.poyetherapie.fr/icones/3.png"); }
.i4 .icon-img { background-image: url("https://www.poyetherapie.fr/icones/4.png"); }
.i5 .icon-img { background-image: url("https://www.poyetherapie.fr/icones/5.png"); }
.i7 .icon-img { background-image: url("https://www.poyetherapie.fr/icones/7.png"); }
.i8 .icon-img { background-image: url("https://www.poyetherapie.fr/icones/8.png"); }
.i9 .icon-img { background-image: url("https://www.poyetherapie.fr/icones/9.png"); }
.i10 .icon-img { background-image: url("https://www.poyetherapie.fr/icones/10.png"); }
/* images hover */
.i1:hover .icon-img { background-image: url("https://www.poyetherapie.fr/icones/1b.png"); }
.i2:hover .icon-img { background-image: url("https://www.poyetherapie.fr/icones/2b.png"); }
.i3:hover .icon-img { background-image: url("https://www.poyetherapie.fr/icones/3b.png"); }
.i4:hover .icon-img { background-image: url("https://www.poyetherapie.fr/icones/4b.png"); }
.i5:hover .icon-img { background-image: url("https://www.poyetherapie.fr/icones/5b.png"); }
.i7:hover .icon-img { background-image: url("https://www.poyetherapie.fr/icones/7b.png"); }
.i8:hover .icon-img { background-image: url("https://www.poyetherapie.fr/icones/8b.png"); }
.i9:hover .icon-img { background-image: url("https://www.poyetherapie.fr/icones/9b.png"); }
.i10:hover .icon-img { background-image: url("https://www.poyetherapie.fr/icones/10b.png"); }
@keyframes iconReveal{
0%{
opacity: 0;
filter: blur(6px);
}
100%{
opacity: 1;
filter: blur(0);
}
}
@keyframes textReveal{
from{
opacity: 0;
transform: translateX(-50%) translateY(8px);
}
to{
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
@keyframes centerPulseWrap{
0%, 100%{
transform: translate(-50%, -50%) translate(var(--center-x-offset), var(--center-y-offset)) scale(1);
}
50%{
transform: translate(-50%, -50%) translate(var(--center-x-offset), var(--center-y-offset)) scale(1.03);
}
}
@media (max-width: 767px){
.clock-wrap{
--size: 92vw;
--radius: calc(var(--size) * 0.40);
--icon: clamp(34px, 9vw, 70px);
--center: clamp(140px, 32vw, 220px);
--title-gap: 8px;
--tooltip-offset: calc(var(--title-gap) + 2.8em);
}
.clock-icon .icon-title{
font-size: 11px;
max-width: 130px;
}
.clock-icon .icon-hover-text{
width: min(260px, 70vw);
font-size: 12px;
}
.clock-center-bubble{
width: min(280px, 76vw);
font-size: 12px;
padding: 13px 15px;
}
}
Le Blason de la Poyéthérapie est le symbole des éléments et des principes fondamentaux qui la composent. À son pied se trouvent les 3 devises de la Poyéthérapie : Cognoscis, Corrigis, Relinquis.
LA POYÉTHÉRAPIE
Le Papillon symbole de la légèreté et la douceur des harmonisations par les invites digitales : « Le poids d’un Papillon qui se pose sur une Fleur ». Ces invites digitales sont les outils des harmonisations.
OÙ SE SITUE LA POYÉTHÉRAPIE ?
La Map Monde symbole de la Situation de la Poyéthérapie dans le Monde de la Thérapie Manuelle.
LE PARADIGME DE LA POYÉTHÉRAPIE
La Fleur à 5 pétales est le symbole des 5 éléments qui composent le paradigme de la Poyéthérapie : un pétale pour ses principes, un pétale pour ses théories, un pétale pour sa Méthodes, un pétale pour sa Valeur, un pétale pour ses 3 devises.
LA PANOPLIE DU CHEVALIERLOS INCALAFOND
Le Chevalier LOS INCALAFOND dispose de la Panoplie Thérapeutique afin de remplir sa Mission du Bien être de la Personne.
LE TRÉSOR DE LA POYÉTHÉRAPIE
Coffre rempli de Pièces d’Or symbole d’une Pièce d’Or pour chaque découverte de la Poyéthérapie.
NIVEAU THÉRAPEUTIQUE STRUCTUREL
Le Bouclier Sacré et le Glaive Sternal sont les symboles du Concept du Sacro-Crâne et du Concept du Sterno-Crâne. Qui sont les deux Piliers fondateurs du Niveau Thérapeutique Structurel.
NIVEAU THÉRAPEUTIQUE ÉNERGÉTIQUE
Le Tao symbole Taoïste du Yin et du Yang fonctionnement de l’Univers et de l’être Humain c’est à dire du Macrocosme et du microcosme.
NIVEAU THÉRAPEUTIQUE INFORMATIONNEL
Les 7 Chakras symboles de la Tradition Indo-Tibétaine.
NIVEAU SPIRITUEL
La Fleur de Lotus symbole de l’éveil spirituel.
ACTUALITÉ
Conférence Poyéthérapie – Avril 2027 à Pau
En avril 2027, une conférence consacrée à la Poyéthérapie se tiendra à Pau, au cœur du Béarn, dans un cadre propice à l’échange, à la découverte et à la compréhension du corps. Cette rencontre sera l’occasion de présenter une approche douce, globale et respectueuse,...
Cabinet de La Bruyère et Ecole de St christophe
7 route du Bois de Not, LA BRUYERE, 03120 SAINT CHRISTOPHE
06 08 40 29 85
Nous nous situons à 10km de Vichy, 70km de Clermont-Ferrand, 150 km de Lyon
