/**
 * Page d'enseigne — feuille de la page
 *
 * Chargée APRÈS `?f=palette` (le palette.css du groupe, exporté par le thème d'un magasin).
 *
 * ⚠️ AUCUNE VARIABLE N'EST DÉCLARÉE ICI, pas même en valeur par défaut : à spécificité égale la
 * feuille chargée en second gagne, et un `:root` de défauts écraserait l'export en silence — la
 * page resterait « correcte », aux mauvaises couleurs.
 *
 * ⚠️ SEULS LES 8 TOKENS DE L'INVARIANT MIROIR sont consommés (primaire, primaire-texte,
 * secondaire, arriere-plan, forte, forte-texte, texte-principal, ombre-legere) : ce sont les seuls
 * présents dans les DEUX sources possibles de palette.css — l'export du thème, ou le repli sur
 * `frontend/css/cc-variables-frontend.css` du plugin. Un token propre au thème (texte-corps,
 * fond-page, bordures…) laisserait la propriété sans valeur en repli.
 *
 * Les polices passent par `var(--cc-police-*, <générique>)` : le repli plugin n'en porte aucune,
 * la famille générique sert alors de secours.
 *
 * @file        style.css
 * @package     CaisseConnect
 * @subpackage  Facade
 * @since       1.7.0
 * @version     1.7.0
 * @author      Microlibre <contact@microlibre.net>
 * @copyright   2026 Microlibre
 * @license     GPL-2.0+ https://www.gnu.org/licenses/gpl-2.0.html
 * @link        https://microlibre.net/caisse-connect
 */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body.cc-facade {
    margin: 0;
    padding: 0;
    background: var(--cc-couleur-front-arriere-plan);
    color: var(--cc-couleur-front-texte-principal);
    font-family: var(--cc-police-texte, system-ui, sans-serif);
    font-size: 17px;
    line-height: 1.6;
}

.cc-facade-entete {
    padding: 32px 20px 8px;
    text-align: center;
}

.cc-facade-logo {
    display: block;
    margin: 0 auto 12px;
    max-width: 240px;
    max-height: 140px;
    height: auto;
}

.cc-facade-titre {
    margin: 0;
    font-family: var(--cc-police-titres, Georgia, serif);
    font-size: 2rem;
    line-height: 1.2;
}

.cc-facade-corps {
    max-width: 1080px;
    margin: 0 auto;
    padding: 8px 20px 48px;
}

.cc-facade-contenu {
    max-width: 720px;
    margin: 0 auto 32px;
    text-align: center;
}

.cc-facade-contenu img {
    max-width: 100%;
    height: auto;
}

.cc-facade-contenu a {
    color: var(--cc-couleur-front-forte);
}

.cc-facade-magasins {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.cc-facade-magasin {
    padding: 20px;
    border-radius: 10px;
    background: var(--cc-couleur-front-secondaire);
    box-shadow: 0 2px 6px var(--cc-couleur-front-ombre-legere);
    text-align: center;
}

.cc-facade-magasin--avant {
    grid-column: 1 / -1;
    border: 2px solid var(--cc-couleur-front-primaire);
}

.cc-facade-magasin-logo {
    display: block;
    margin: 0 auto 12px;
    max-width: 160px;
    max-height: 90px;
    height: auto;
}

.cc-facade-magasin-nom {
    margin: 0 0 10px;
    font-family: var(--cc-police-titres, Georgia, serif);
    font-size: 1.3rem;
    line-height: 1.3;
}

.cc-facade-magasin-nom a {
    color: var(--cc-couleur-front-forte);
    text-decoration: none;
}

.cc-facade-magasin-nom a:hover,
.cc-facade-magasin-nom a:focus {
    text-decoration: underline;
}

.cc-facade-magasin-adresse,
.cc-facade-magasin-horaires,
.cc-facade-magasin-contact {
    margin: 0 0 10px;
    font-size: 0.95rem;
}

.cc-facade-magasin-contact span {
    display: block;
}

.cc-facade-magasin-contact a {
    color: var(--cc-couleur-front-forte);
}

.cc-facade-magasin-choix {
    margin: 14px 0 0;
}

.cc-facade-bouton {
    display: inline-block;
    padding: 10px 22px;
    border: 0;
    border-radius: 6px;
    background: var(--cc-couleur-front-primaire);
    color: var(--cc-couleur-front-primaire-texte);
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
}

.cc-facade-bouton:hover,
.cc-facade-bouton:focus {
    background: var(--cc-couleur-front-forte);
    color: var(--cc-couleur-front-forte-texte);
}

.cc-facade-vide {
    text-align: center;
}

.cc-facade-pied {
    padding: 0 20px 32px;
    text-align: center;
    font-size: 0.85rem;
    opacity: 0.8;
}

@media (max-width: 600px) {
    .cc-facade-titre {
        font-size: 1.6rem;
    }

    .cc-facade-corps {
        padding: 8px 16px 32px;
    }
}