@charset "UTF-8";
/* ---------------------------------------------------------------------------------------------
   pied-de-page.css — brique « pied-de-page » (JulienWeb, 08/10/2026).

   Le pied de page, version 2 : la marque (grand logo animé, nom, métiers, booking), le menu sur une rangée,
   les réseaux sur une autre, une ligne de bas (copyright, mentions).
   Fond clair, texte indigo (12,01:1 sur blanc) : le pied d'origine posait du blanc sur l'orange
   (2,35:1). L'orange ne sert qu'au filet du haut, aux tesselles et au soulignement de survol.

   1. Le cadre
   2. La carte
   3. Les liens
   4. La ligne de bas
   --------------------------------------------------------------------------------------------- */


/* -- 1. Le cadre ------------------------------------------------------------------------------ */

.jws-pied {
    margin: 48px 0 0;
    padding: 40px 0 0;
    border-top: 1px dashed var(--jws-orange, #f39200);   /* 12/10 (Julien) : le filet des titres de section (.section-row, style.css), a la place du trait plein de 4 px */
    background: #fff;
    color: var(--jws-encre, #262830);
    font-family: var(--jws-police, 'Open Sans', sans-serif);
    font-size: 15px;
    line-height: 1.5;
}

/* Le fond : le logo du site en très grand (rosace-fond.svg, 08/10, idée et choix de Julien : « leur
   motif, c'est leur logo en géant »). C'est la rosace de la brique logo-net passée en tons d'indigo
   par outils/pied-de-page/fond.js. 620 px : la taille où on la reconnaît encore dans un pied de
   291 px de haut ; à 1 100 px il n'en reste que des éclats (essayé). Elle dépasse à droite, coupée
   en haut et en bas. Réglages : --jws-pied-rang (son côté), --jws-pied-motif (l'opacité).
   Essayés avant, la même nuit : bottom.png du pied d'origine réduit et atténué ; trois motifs
   dessinés (étoiles et ondes, posé une heure ; ondes concentriques ; étoile et croix) ; deux en
   aplats d'indigo clair.
   12/10 : Ourida veut un pied plus coloré. Le fond est la rosace de logo-net telle quelle (orange,
   crème, indigo), à 0,14 : c'est l'essai « F5 » capturé le 08/10 à côté de l'indigo. Revenir aux tons
   d'indigo (le choix de Julien du 08/10) : url("rosace-fond.svg") et --jws-pied-motif: .22. */
.jws-pied {
    --jws-pied-rang: 620px;
    --jws-pied-sortie: 70px;   /* de combien la rosace depasse du bord droit */
    --jws-pied-motif: .88;  /* 12/10 : .14 (essai F5), puis .4, puis .88 avec le contour blanc du texte ci-dessous (choix de Julien sur captures) */
    /* A .88 la rosace passe sous le menu, les reseaux et les mentions : un contour blanc net de 2 px detache les lettres
       (essai « A », prefere a l'ombre douce). Huit directions ; text-shadow s'herite, les icones en police le recoivent. */
    --jws-pied-contour: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1.4px 1.4px 0 #fff, -1.4px 1.4px 0 #fff, 1.4px -1.4px 0 #fff, -1.4px -1.4px 0 #fff;
    text-shadow: var(--jws-pied-contour);
    --jws-pied-tour: 240s;  /* 12/10 : la duree d'un tour de la rosace (demande de Julien : « tres lentement ») */
    position: relative;
    isolation: isolate;
    overflow: hidden;       /* la rosace est plus haute que le pied : elle est coupee ici, plus par sa boite */
    overflow: clip;
}

/* 12/10 : la rosace tourne tres lentement, dans le sens des aiguilles d'une montre (demande de Julien). Pour
   tourner sur elle-meme, elle n'est plus un fond pose dans la boite du pied : c'est un carre a sa taille, place
   au meme endroit (70 px hors du bord droit, centre en hauteur), qui tourne autour de son centre. A l'arret
   (« moins de mouvement » demande au navigateur), le rendu est celui d'avant, au pixel pres. */
.jws-pied::before {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(var(--jws-pied-sortie) * -1);
    width: var(--jws-pied-rang);
    height: var(--jws-pied-rang);
    margin-top: calc(var(--jws-pied-rang) / -2);
    z-index: -1;
    opacity: var(--jws-pied-motif);
    pointer-events: none;
    /* ?v= : une adresse appelée depuis une feuille n'a pas de version, le navigateur gardait l'ancienne rosace sept jours
       (Julien, 12/10 : « footer je vois toujours l'ancien »). À changer chaque fois que rosace.svg change. */
    background: url("../logo-net/rosace.svg?v=20261012b") no-repeat center / contain;
    animation: jws-pied-tourne var(--jws-pied-tour) linear infinite;
}

/* 12/10, ESSAI demande par Julien : un degrade blanc pose sur la largeur de la rosace, blanc a son bord gauche (sous le menu),
   transparent au bord droit de la page. Il ne tourne pas ; il est au-dessus de la rosace et sous le texte.
   Le retirer : supprimer cette regle. */
.jws-pied::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: calc(var(--jws-pied-rang) - var(--jws-pied-sortie));
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));   /* 02 h 25 : sens inverse du premier essai, blanc sous le menu, rosace pleine au bord droit */
}

@keyframes jws-pied-tourne {
    to {
        rotate: 360deg;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jws-pied::before {
        animation: none;
    }
}

/* Téléphone : la rosace passerait derrière le menu et les réseaux. Plus petite, dans le coin du bas. */
@media (max-width: 575.98px) {
    .jws-pied {
        --jws-pied-rang: 440px;
        --jws-pied-sortie: 190px;
    }

    .jws-pied::before {
        top: auto;
        right: calc(var(--jws-pied-sortie) * -1);
        bottom: -170px;
        margin-top: 0;
    }
}

/* La marque à gauche, les liens à droite, centrés en hauteur sur le logo. */
.jws-pied__haut {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 24px 48px;
}

@media (min-width: 992px) {
    .jws-pied__haut {
        grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    }
}


/* -- 2. La marque ------------------------------------------------------------------------------
   Un grand logo, sans carte derrière (08/10, demande de Julien). Le thème donne des marges et une
   largeur à .logo-theme : elles sont remises à zéro ici, le logo fait la taille dite. */

.jws-pied__marque {
    display: flex;
    align-items: center;
    gap: 24px;
}

.jws-pied .jws-pied__logo {
    flex: 0 0 auto;
    float: none;
    width: var(--jws-pied-logo, 120px);
    height: var(--jws-pied-logo, 120px);
    margin: 0;
    padding: 0;
    line-height: 0;
}

.jws-pied .jws-pied__logo .logo-theme-img {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
}

.jws-pied .jws-pied__logo img {
    display: block;
    width: var(--jws-pied-logo, 120px);
    height: var(--jws-pied-logo, 120px);
    max-width: none;
    margin: 0;
}

@media (min-width: 992px) {
    .jws-pied {
        --jws-pied-logo: 150px;
    }
}

/* 220 px : les métiers passent sur deux lignes, et le menu garde sa rangée à droite. */
.jws-pied__qui {
    min-width: 0;
    max-width: 220px;
}

.jws-pied__nom,
.jws-pied__metiers,
.jws-pied__booking {
    margin: 0;
}

.jws-pied__nom {
    color: var(--jws-indigo, #312783);
    font-family: var(--jws-police-titre, 'Poppins', 'Open Sans', sans-serif);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
}

.jws-pied__metiers {
    margin-top: 4px;
    color: var(--jws-encre-3, #555);
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.jws-pied__booking {
    margin-top: 10px;
    overflow-wrap: anywhere;
}


/* -- 3. Les liens ----------------------------------------------------------------------------
   Le menu sur une rangée, en Poppins un peu plus gros ; les réseaux sur une rangée dessous. Plus
   de colonne des artistes (retirée le 08/10 : ils sont déjà dans le menu et sur les pages). */

.jws-pied__liste {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.jws-pied__liste li {
    margin: 0;
    padding: 0;
}

.jws-pied a {
    color: var(--jws-indigo, #312783);
    text-decoration: none;
}

.jws-pied__liste a,
.jws-pied__booking a {
    display: inline-block;
    padding: 4px 0;
    border-bottom: 2px solid transparent;
    line-height: 1.4;
}

.jws-pied__liste a:hover,
.jws-pied__booking a:hover {
    border-bottom-color: var(--jws-orange, #f39200);
    color: var(--jws-indigo-fonce, #241d63);
}

.jws-pied a:focus-visible {
    outline: 3px solid var(--jws-indigo, #312783);
    outline-offset: 3px;
    border-radius: 2px;
}

.jws-pied__liste--site {
    gap: 4px 24px;
}

.jws-pied__liste--site a {
    font-family: var(--jws-police-titre, 'Poppins', 'Open Sans', sans-serif);
    font-size: 18px;
    font-weight: 700;
}

/* Grand écran : 17 px et 18 px d'écart, les huit entrées tiennent sur une rangée à côté de la marque
   (668 px de place à 1200 px de conteneur). */
@media (min-width: 992px) {
    .jws-pied__liste--site {
        gap: 4px 18px;
    }

    .jws-pied__liste--site a {
        font-size: 17px;
    }
}

.jws-pied__suivre {
    margin-top: 16px;
}

.jws-pied__liste--suivre {
    gap: 2px 26px;
}

.jws-pied__liste--suivre a {
    font-size: 16px;
}

.jws-pied__liste--suivre .fa {
    width: 1.2em;
    margin-right: 6px;
    font-size: 1.15em;
    text-align: center;
}

@media (pointer: coarse) {
    .jws-pied__liste a,
    .jws-pied__booking a {
        padding: 9px 0;
    }
}


/* -- 4. La ligne de bas ----------------------------------------------------------------------- */

.jws-pied__bas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;    /* 12/10 (Ourida) : liens puis copyright, à gauche ; plus rien à droite sur le logo du fond */
    gap: 6px 24px;
    margin: 32px 0 0;
    padding: 16px 0 20px;
    /* 12/10 (Julien) : plus de filet au-dessus du copyright ; un seul trait dans le pied, celui du haut */
    font-size: 13px;
}

.jws-pied__copyright {
    margin: 0;
    color: var(--jws-encre-3, #555);
}

.jws-pied__liste--mentions {
    gap: 0 20px;
}

.jws-pied__liste--mentions a {
    text-decoration: underline;
    text-underline-offset: 3px;
}