/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
    background: var(--c-footer-bg);
    color: var(--c-footer-text);
    font-size: var(--fs-small);
    line-height: 1.7;
}

.site-footer__inner {
    display: grid;
    gap: var(--sp-24);
    max-width: var(--content-max);
    margin-inline: auto;
    padding: var(--sp-26) var(--section-px) var(--sp-20);
}

.site-footer__name {
    color: #ffffff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    margin-bottom: var(--sp-6);
}

.site-footer__heading {
    color: #ffffff;
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    margin-bottom: var(--sp-9);
}

.site-footer__address {
    font-style: normal; /* <address> est en italique par défaut */
}

.site-footer__dim {
    color: var(--c-footer-dim);
    margin-top: var(--sp-9);
}

.site-footer__links {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer a {
    color: var(--c-footer-text);
    text-decoration: none;
}

.site-footer a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* Cibles tactiles : sur mobile, chaque lien de liste doit faire 44 px de haut.
   Le texte reste à 12,5 px comme sur les filaires — c'est la zone cliquable
   qu'on agrandit, pas la typographie. */
.site-footer__links a,
.site-footer__address a {
    display: flex;
    align-items: center;
    min-height: var(--tap-min);
}

/* Le numéro et l'e-mail sont dans un <address> : on les sort du flux de texte
   pour qu'ils deviennent des cibles à part entière. */
.site-footer__address a {
    width: fit-content;
}

.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-8);
    align-items: center;
    max-width: var(--content-max);
    margin-inline: auto;
    padding: var(--sp-15) var(--section-px) var(--sp-20);
    border-top: 1px solid rgb(255 255 255 / 8%);
    color: var(--c-footer-dim);
}

.site-footer__legal a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
}

/* ==========================================================================
   Signature d'agence — charte Snoussi IA Dev Consulting
   --------------------------------------------------------------------------
   Forme imposée par docs/CHECKLIST-WEB-PROJECTS.md §1.4. Ne pas l'adapter au
   cas par cas : elle doit rester identique d'un site à l'autre.
   ========================================================================== */
.site-footer__signature {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 5px;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--sp-15) var(--section-px) var(--sp-20);
    border-top: 1px solid rgb(255 255 255 / 8%);
    /* Casse normale, sans interlettrage : c'est une phrase, pas un label.
       Les capitales espacées la faisaient lire comme un titre de section. */
    font-size: var(--fs-meta);
    color: var(--c-footer-dim);
    text-align: center;
}

.site-footer__signature a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    color: var(--c-orange);
    font-weight: 700;
    transition: color 0.15s ease;
}

.site-footer__signature a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* Cœur battant.

   `display: inline-block` est indispensable : `transform` n'a aucun effet sur
   une boîte purement en ligne.

   AUCUNE couleur imposée : le glyphe garde celle de l'emoji, rouge, comme sur
   les autres sites de l'agence. La règle « rouge réservé aux alertes » vaut
   pour l'interface du site, pas pour la signature de son auteur. */
.heartbeat {
    display: inline-block;
    transform-origin: center;
    animation: heartbeat-pulse 1.2s ease-in-out infinite;
    font-size: 14px;
}

@keyframes heartbeat-pulse {
    0%, 60%, 100% { transform: scale(1); }
    15%           { transform: scale(1.25); }
    30%           { transform: scale(1); }
    45%           { transform: scale(1.18); }
}

/* Flamme vacillante. Le pivot est en bas du glyphe : une flamme oscille par
   sa pointe, pas par son centre. */
.flame {
    display: inline-block;
    transform-origin: 50% 90%;
    animation: flame-flicker 0.9s ease-in-out infinite;
    font-size: 14px;
}

@keyframes flame-flicker {
    0%, 100% { transform: scale(1)    rotate(-2deg);   filter: brightness(1); }
    25%      { transform: scale(1.10) rotate(1.5deg);  filter: brightness(1.15); }
    50%      { transform: scale(0.95) rotate(-1.5deg); filter: brightness(0.95); }
    75%      { transform: scale(1.08) rotate(2deg);    filter: brightness(1.10); }
}

/* Deux animations perpétuelles en bas de page : elles doivent s'arrêter pour
   qui a demandé moins de mouvement. Le mouvement continu déclenche des
   troubles vestibulaires chez certaines personnes. */
@media (prefers-reduced-motion: reduce) {
    .heartbeat,
    .flame {
        animation: none;
    }
}

@media (min-width: 768px) {
    .site-footer__inner {
        grid-template-columns: 1.4fr 1fr 1fr;
        gap: var(--sp-34);
    }
}