/* ==========================================================================
   Florent Andarelli — logo animé du header + carré du curseur
   Se charge APRÈS styles.css, grille.css et suisse.css.
   Pour revenir en arrière : retirer la ligne fa-anim.css (et fa-anim.js)
   des pages et remettre les deux <img> du logo.
   ========================================================================== */

/* ---------- 1. Logo « fa » qui se dessine ----------
   Reprise vectorielle du GIF : le « a » commence par sa barre du haut,
   descend, revient vers la gauche, remonte et ferme sa panse ; le « f »
   monte du bas puis trace sa barre. Cycle de 1,9 s comme le GIF. */
.logo-fa-anime {
    display: inline-block;
    height: 24px;
    width: 24px;
    flex: 0 0 auto;
    color: #000;
    overflow: visible;
}
body.dark-mode .logo-fa-anime { color: #fff; }

.logo-fa-anime path {
    fill: none;
    stroke: currentColor;
    stroke-width: 37;
    stroke-linecap: butt;
    stroke-linejoin: miter;
    stroke-dasharray: 100 100;
    stroke-dashoffset: 0;
}
.logo-fa-anime .fa-a { animation: fa-trace-a 1.9s linear infinite; }
.logo-fa-anime .fa-f { animation: fa-trace-f 1.9s linear infinite; }

@keyframes fa-trace-a {
    0%, 10.5%  { stroke-dashoffset: 100; }
    52.6%, 100% { stroke-dashoffset: 0; }
}
@keyframes fa-trace-f {
    0%, 15.8%  { stroke-dashoffset: 100; }
    42.1%, 100% { stroke-dashoffset: 0; }
}

.logo:hover .logo-fa-anime { opacity: 0.7; }

@media (max-width: 768px) {
    .logo-fa-anime { height: 20px; width: 20px; }
}

/* Visiteurs qui demandent moins d'animations : logo fixe, complet */
@media (prefers-reduced-motion: reduce) {
    .logo-fa-anime path { animation: none !important; stroke-dashoffset: 0; }
}

/* ---------- 2. Carré autour du cercle du curseur ----------
   Un carré blanc de la même taille que le cercle, toujours visible,
   qui grandit avec lui au survol d'un lien ou d'un bouton.
   Même mélange « différence » que le cercle : noir sur fond clair,
   blanc sur fond sombre. */
.custom-cursor .cursor-carre {
    position: absolute;
    left: 50%;
    top: 50%;
    /* contenu du cercle + son bord : le trait du carré (2 px, centré)
       tombe exactement sur le contour extérieur du cercle */
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    transform: translate(-50%, -50%);
    overflow: visible;
    pointer-events: none;
}
.custom-cursor .cursor-carre path {
    fill: none;
    stroke: #fff;
    stroke-width: 2px;
    vector-effect: non-scaling-stroke;
    stroke-linecap: square;
}

/* ---------- 3. Listes « Ce que comprend la prestation » ----------
   Les éléments s'affichent en ligne : le point se place entre
   les éléments, et non plus sur la dernière lettre du mot. */
ul.tag-list {
    list-style: none;
    padding-left: 0;
    gap: 6px 0;
}
ul.tag-list li {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.tag-list li:not(:last-child)::after {
    content: "·";
    display: inline-block;
    margin: 0 14px;
    color: #999;
}