/*
  Les dessins animés du bandeau « Comment fonctionne… » (shortcode « comment-ca-marche », dessin 1A à 4C).
  Un seul fichier pour les douze dessins : écrit une fois dans la page, au premier shortcode.
  Or #b79e56, fond blanc. CSS seul, sans JavaScript.
*/
/* Le cercle du dessin va jusqu'au bord de son cadre, et certains dessins montent un peu au-dessus
   pendant l'animation : le dessin est descendu de 20 px, sans changer la hauteur totale du module
   (le réglage +20 en haut / -20 en bas que l'utilisateur faisait à la main dans Divi, 8 octobre 2026). */
.ce-anim { width: 200px; max-width: 100%; margin: 20px auto -20px; }
.ce-anim svg { display: block; width: 100%; height: auto; overflow: visible; }
.ce-anim .ce-t, .ce-anim .ce-tb, .ce-anim .ce-tv { fill: none; stroke: #b79e56; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ce-anim .ce-tb { fill: #fff; }
.ce-anim .ce-tv { fill: rgba(183, 158, 86, .16); }
.ce-anim .ce-fin { stroke-width: 1.3; }
.ce-anim .ce-pale { stroke: rgba(183, 158, 86, .42); }
.ce-anim .ce-blanc { stroke: #fff; }
.ce-anim .ce-plein { fill: #b79e56; stroke: none; }
.ce-anim .ce-voile { fill: rgba(183, 158, 86, .14); stroke: none; }
.ce-anim .ce-lueur { filter: drop-shadow(0 0 4px rgba(183, 158, 86, .65)); }
.ce-anim .ce-chiffre { fill: #b79e56; font-family: 'Open Sans', Arial, sans-serif; font-weight: 600; }
.ce-anim .ce-c { transform-box: fill-box; transform-origin: center; }

/* Le cercle autour, commun aux douze dessins, comme le sceau */
.ce-anim .ce-tourne { transform-box: view-box; transform-origin: 50% 50%; animation: ce-tour 80s linear infinite; }
@keyframes ce-tour { to { transform: rotate(360deg); } }
.ce-anim .ce-respire { animation: ce-respire 3.2s ease-in-out infinite; }
@keyframes ce-respire { 0%, 100% { transform: scale(.92); opacity: .75; } 50% { transform: scale(1.06); opacity: 1; } }
.ce-anim .ce-scintille { animation: ce-scintille 2.8s ease-in-out infinite; }
@keyframes ce-scintille { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* 1A · Le halo qui choisit */
.ce-anim .ce-1a-halo { animation: ce-1a-halo 6s ease-in-out infinite; }
@keyframes ce-1a-halo { 0%, 25% { transform: translateX(-48px); } 33.3%, 58.3% { transform: translateX(0); } 66.6%, 91.6% { transform: translateX(48px); } 100% { transform: translateX(-48px); } }
.ce-anim .ce-1a-m { animation: ce-1a-m 6s ease-in-out infinite; }
@keyframes ce-1a-m { 0%, 25% { transform: scale(1.12); } 33.3%, 91.6% { transform: scale(1); } 100% { transform: scale(1.12); } }

/* 1B · La fiche du voyant */
.ce-anim .ce-1b-e { fill: #b79e56; stroke: #b79e56; stroke-width: .8; stroke-linejoin: round; animation: ce-1b-e 5s ease-in-out infinite backwards; }
@keyframes ce-1b-e { 0%, 5% { fill-opacity: 0; } 15%, 75% { fill-opacity: 1; } 85%, 100% { fill-opacity: 0; } }
.ce-anim .ce-1b-loupe { animation: ce-1b-loupe 7s ease-in-out infinite; }
@keyframes ce-1b-loupe { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-30px, -26px); } 50% { transform: translate(-12px, 6px); } 75% { transform: translate(-34px, 20px); } }

/* 1C · L'éventail des voyants */
.ce-anim .ce-1c-m { animation: ce-1c-m 7.5s ease-in-out infinite; }
@keyframes ce-1c-m {
  0% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 0 rgba(183, 158, 86, 0)); }
  8%, 18% { transform: translateY(-10px) scale(1.15); filter: drop-shadow(0 0 5px rgba(183, 158, 86, .75)); }
  26%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 0 rgba(183, 158, 86, 0)); }
}

/* 2A · Les champs qui se remplissent */
.ce-anim .ce-2a-l1 { animation: ce-2a-l1 6s ease-in-out infinite; }
.ce-anim .ce-2a-l2 { animation: ce-2a-l2 6s ease-in-out infinite; }
.ce-anim .ce-2a-l3 { animation: ce-2a-l3 6s ease-in-out infinite; }
@keyframes ce-2a-l1 { 0% { stroke-dashoffset: 1.1px; } 10%, 80% { stroke-dashoffset: 0; } 88%, 100% { stroke-dashoffset: 1.1px; } }
@keyframes ce-2a-l2 { 0%, 12% { stroke-dashoffset: 1.1px; } 22%, 80% { stroke-dashoffset: 0; } 88%, 100% { stroke-dashoffset: 1.1px; } }
@keyframes ce-2a-l3 { 0%, 24% { stroke-dashoffset: 1.1px; } 34%, 80% { stroke-dashoffset: 0; } 88%, 100% { stroke-dashoffset: 1.1px; } }
.ce-anim .ce-2a-btn { fill: #b79e56; animation: ce-2a-btn 6s ease-in-out infinite; }
@keyframes ce-2a-btn { 0%, 34% { fill-opacity: 0; } 40%, 80% { fill-opacity: 1; } 88%, 100% { fill-opacity: 0; } }
.ce-anim .ce-2a-coche { animation: ce-2a-coche 6s ease-in-out infinite; }
/* L'opacité en plus : Chrome laisse sinon un point à l'angle de la coche cachée */
@keyframes ce-2a-coche { 0%, 42% { stroke-dashoffset: 1.1px; opacity: 0; } 43% { opacity: 1; } 50%, 80% { stroke-dashoffset: 0; } 85% { opacity: 1; } 86%, 100% { stroke-dashoffset: 1.1px; opacity: 0; } }

/* 2B · La plume */
.ce-anim .ce-2b-l1 { animation: ce-2a-l1 7s linear infinite; }
.ce-anim .ce-2b-l2 { animation: ce-2a-l2 7s linear infinite; }
.ce-anim .ce-2b-l3 { animation: ce-2a-l3 7s linear infinite; }
.ce-anim .ce-2b-plume { animation: ce-2b-plume 7s linear infinite; }
@keyframes ce-2b-plume {
  0% { transform: translate(0, 0); } 10% { transform: translate(60px, 0); }
  12% { transform: translate(0, 18px); } 22% { transform: translate(60px, 18px); }
  24% { transform: translate(0, 36px); } 34% { transform: translate(60px, 36px); }
  42%, 78% { transform: translate(62px, 56px); } 90%, 100% { transform: translate(0, 0); }
}
.ce-anim .ce-2b-sceau { animation: ce-2b-sceau 7s ease-in-out infinite; }
@keyframes ce-2b-sceau { 0%, 38% { transform: scale(0); opacity: 0; } 44% { transform: scale(1.4); opacity: 1; } 48%, 80% { transform: scale(1); opacity: 1; } 88%, 100% { transform: scale(0); opacity: 0; } }

/* 2C · L'envoi */
.ce-anim .ce-2c-l1 { animation: ce-2c-l1 6s ease-in-out infinite; }
.ce-anim .ce-2c-l2 { animation: ce-2c-l2 6s ease-in-out infinite; }
.ce-anim .ce-2c-l3 { animation: ce-2c-l3 6s ease-in-out infinite; }
@keyframes ce-2c-l1 { 0% { stroke-dashoffset: 1.1px; } 8%, 82% { stroke-dashoffset: 0; } 90%, 100% { stroke-dashoffset: 1.1px; } }
@keyframes ce-2c-l2 { 0%, 10% { stroke-dashoffset: 1.1px; } 18%, 82% { stroke-dashoffset: 0; } 90%, 100% { stroke-dashoffset: 1.1px; } }
@keyframes ce-2c-l3 { 0%, 20% { stroke-dashoffset: 1.1px; } 28%, 82% { stroke-dashoffset: 0; } 90%, 100% { stroke-dashoffset: 1.1px; } }
.ce-anim .ce-2c-btn { fill: #b79e56; animation: ce-2c-btn 6s ease-in-out infinite; }
@keyframes ce-2c-btn { 0%, 28% { fill-opacity: 0; } 34%, 82% { fill-opacity: 1; } 90%, 100% { fill-opacity: 0; } }
.ce-anim .ce-2c-avion { animation: ce-2c-avion 6s ease-in-out infinite; }
@keyframes ce-2c-avion {
  0%, 34% { transform: translate(-60px, 62px) scale(.6); opacity: 0; }
  38% { transform: translate(-56px, 58px) scale(1); opacity: 1; }
  64% { transform: translate(0, 0) scale(1); opacity: 1; }
  70%, 100% { transform: translate(6px, -6px) scale(1); opacity: 0; }
}
.ce-anim .ce-2c-trace { animation: ce-2c-trace 6s ease-in-out infinite; }
@keyframes ce-2c-trace { 0%, 36% { opacity: 0; } 46%, 70% { opacity: 1; } 80%, 100% { opacity: 0; } }

/* 3A · Le combiné qui sonne */
.ce-anim .ce-3a-sonne { animation: ce-3a-sonne 3s ease-in-out infinite; }
@keyframes ce-3a-sonne { 0% { transform: rotate(0); } 4% { transform: rotate(-9deg); } 8% { transform: rotate(9deg); } 12% { transform: rotate(-9deg); } 16% { transform: rotate(9deg); } 20% { transform: rotate(-5deg); } 24%, 100% { transform: rotate(0); } }
.ce-anim .ce-3a-onde { animation: ce-3a-onde 3s ease-in-out infinite backwards; }
@keyframes ce-3a-onde { 0% { opacity: .12; } 8%, 18% { opacity: 1; } 34%, 100% { opacity: .12; } }

/* 3B · L'appel entrant */
.ce-anim .ce-3b-onde { animation: ce-3b-onde 2.4s ease-out infinite; }
@keyframes ce-3b-onde { 0% { transform: scale(1); opacity: .85; } 100% { transform: scale(1.9); opacity: 0; } }
.ce-anim .ce-3b-vibre { animation: ce-3b-vibre 2.4s linear infinite; }
@keyframes ce-3b-vibre { 0%, 60%, 100% { transform: translateX(0); } 64% { transform: translateX(-1.5px); } 68% { transform: translateX(1.5px); } 72% { transform: translateX(-1.5px); } 76% { transform: translateX(1.5px); } 80% { transform: translateX(0); } }

/* 3C · Le cadran */
.ce-anim .ce-3c-flash { animation: ce-3c-flash 6s ease-out infinite backwards; }
@keyframes ce-3c-flash { 0% { opacity: 0; } 2% { opacity: .45; } 8%, 100% { opacity: 0; } }
.ce-anim .ce-3c-appel { animation: ce-3c-appel 6s ease-in-out infinite; }
@keyframes ce-3c-appel { 0%, 50% { transform: scale(1); } 56% { transform: scale(1.18); } 62% { transform: scale(1); } 68% { transform: scale(1.18); } 74%, 100% { transform: scale(1); } }
.ce-anim .ce-3c-onde { animation: ce-3c-onde 6s ease-out infinite; }
@keyframes ce-3c-onde { 0%, 52% { transform: scale(1); opacity: 0; } 54% { opacity: .9; } 80%, 100% { transform: scale(2.1); opacity: 0; } }

/* 4A · La boule de cristal */
.ce-anim .ce-4a-e { animation: ce-4a-e 4s ease-in-out infinite backwards; }
@keyframes ce-4a-e { 0% { transform: translateY(8px) scale(.5); opacity: 0; } 30%, 70% { opacity: 1; } 100% { transform: translateY(-14px) scale(1); opacity: 0; } }

/* 4B · La conversation */
.ce-anim .ce-4b-g { animation: ce-4b-g 7s ease-in-out infinite; }
@keyframes ce-4b-g { 0% { transform: scale(.6); opacity: 0; } 8%, 85% { transform: scale(1); opacity: 1; } 92%, 100% { transform: scale(.6); opacity: 0; } }
.ce-anim .ce-4b-d { animation: ce-4b-d 7s ease-in-out infinite; }
@keyframes ce-4b-d { 0%, 24% { transform: scale(.6); opacity: 0; } 32%, 85% { transform: scale(1); opacity: 1; } 92%, 100% { transform: scale(.6); opacity: 0; } }
.ce-anim .ce-4b-points { animation: ce-4b-points 7s linear infinite; }
@keyframes ce-4b-points { 0%, 32% { opacity: 0; } 34%, 54% { opacity: 1; } 57%, 100% { opacity: 0; } }
.ce-anim .ce-4b-p { animation: ce-4b-p .9s ease-in-out infinite; }
@keyframes ce-4b-p { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-3px); } }
.ce-anim .ce-4b-etoile { animation: ce-4b-etoile 7s ease-in-out infinite; }
@keyframes ce-4b-etoile { 0%, 56% { transform: scale(.3); opacity: 0; } 62% { transform: scale(1.2); opacity: 1; } 66%, 85% { transform: scale(1); opacity: 1; } 92%, 100% { transform: scale(.3); opacity: 0; } }

/* 4C · La carte révélée */
.ce-anim .ce-4c-dos { animation: ce-4c-dos 7s ease-in-out infinite; }
@keyframes ce-4c-dos { 0%, 28% { transform: scaleX(1); } 36%, 86% { transform: scaleX(.01); } 94%, 100% { transform: scaleX(1); } }
.ce-anim .ce-4c-face { animation: ce-4c-face 7s ease-in-out infinite; }
@keyframes ce-4c-face { 0%, 36% { transform: scaleX(.01); filter: none; } 44%, 78% { transform: scaleX(1); filter: drop-shadow(0 0 6px rgba(183, 158, 86, .6)); } 86%, 100% { transform: scaleX(.01); filter: none; } }
.ce-anim .ce-4c-eclat { animation: ce-4c-eclat 7s ease-out infinite; }
@keyframes ce-4c-eclat { 0%, 42% { transform: scale(.3); opacity: 0; } 50% { transform: scale(1.2); opacity: 1; } 64%, 100% { transform: scale(.3); opacity: 0; } }

/* Pour qui a demandé à son appareil de réduire les mouvements */
@media (prefers-reduced-motion: reduce) { .ce-anim * { animation: none !important; } }