/* Secal Regalia® — plg_system_secalscripts — feuille 08 : accueil
   Chargée sur : page d'accueil (tuiles). */

/* ============================================================================
   PAGE D'ACCUEIL
   ----------------------------------------------------------------------------
   Tout est préfixé par .secal-home : aucune règle ne peut déborder sur le
   template Creator CK ni sur HikaShop.

   Le HTML correspondant se colle dans l'article Joomla (éditeur en mode Code
   source). Ne remets pas de balise <style> dans l'article : le filtre de
   contenu de Joomla la supprime à l'enregistrement.
   ============================================================================ */

.secal-home {
    --texte: rgba(0, 0, 0, .88);
    --gris: rgba(0, 0, 0, .55);
    --trait: rgba(0, 0, 0, .12);
    --voile: rgba(0, 0, 0, .035);
    --azur: #2DA0CE;

    /* Couleurs officielles des organisations */
    --rotary: #17458F;
    --interact: #00A2E0;
    --innerwheel: #FFD100;
    --rotaract: #D41367;

    --chrome: 300px;   /* hauteur mesurée de #wrapper_header + #wrapper_footer */

    color: var(--texte);
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    justify-content: center;   /* grille centrée dans la hauteur disponible */
    gap: 14px;
    min-height: calc(100vh - var(--chrome));
    padding: 16px 0;
}

.secal-home * { box-sizing: border-box; }

/* Pleine largeur pour la seule page d'accueil.
   :has() cible le conteneur du template uniquement quand la page contient
   .secal-home — les autres pages gardent leur largeur habituelle. */
body:has(.secal-home) #wrapper > .inner,
body:has(.secal-home) #maincontent,
body:has(.secal-home) #maincontent > .inner {
    max-width: none;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* Repli pour les navigateurs sans :has() : la grille déborde de son
   conteneur par des marges négatives. */
@supports not selector(:has(*)) {
    .secal-home {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        padding-left: 16px;
        padding-right: 16px;
    }
}

.secal-home h1,
.secal-home h2,
.secal-home h3 {
    /* Hérite de la police du template (Open Sans) plutôt que d'en imposer une */
    font-family: inherit;
    font-weight: 600;
    line-height: 1.15;
    margin: 0;
    color: inherit;
}

.secal-home p { margin: 0; }
.secal-home a { text-decoration: none; }

.secal-home a:focus-visible {
    outline: 3px solid var(--azur);
    outline-offset: 2px;
}

/* ---------- Grille -------------------------------------------------------- */
.secal-grille {
    /* "flex: 0 1 auto" plutôt que "flex: 1" : la grille prend la hauteur de son
       contenu et se laisse centrer, au lieu de s'étirer sur toute la zone. */
    flex: 0 1 auto;
    display: grid;
    grid-template-columns: 1.6fr 1.6fr 1fr 1fr;
    grid-template-rows: repeat(2, minmax(200px, 1fr));
    gap: 14px;
}

/* Carré 2 × 2 des boutiques, colonnes 1 et 2 */
.secal-club-1 { grid-column: 1; grid-row: 1; }
.secal-club-2 { grid-column: 2; grid-row: 1; }
.secal-club-3 { grid-column: 1; grid-row: 2; }
.secal-club-4 { grid-column: 2; grid-row: 2; }

/* Deux tuiles verticales, pleine hauteur des colonnes 3 et 4 */
.secal-v { grid-row: 1 / span 2; }
.secal-v-1 { grid-column: 3; }
.secal-v-2 { grid-column: 4; }

/* ---------- Tuiles -------------------------------------------------------- */
.secal-tuile {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 24px 26px;
    overflow: hidden;
}

.secal-tuile h2 { font-size: clamp(1.2rem, 1.6vw, 1.7rem); }
.secal-tuile h3 { font-size: clamp(1.15rem, 1.5vw, 1.6rem); }

/* Boutons repris du style HikaShop (.hikabtn) : même bleu, même bleu au
   survol, pour que l'accueil et la boutique se répondent.
   Le sélecteur inclut "a" et la couleur porte !important : les règles de
   lien du template sont plus spécifiques et reprenaient la main au survol,
   ce qui rendait le texte invisible. */
a.secal-lien {
    align-self: flex-start;
    margin-top: auto;
    padding: 10px 22px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: var(--azur);
    color: #fff !important;
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

a.secal-lien:hover,
a.secal-lien:focus {
    background: #2589AE;
    color: #fff !important;
    text-decoration: none;
}

/* Sur les tuiles colorées, un bouton bleu se perdrait dans le fond.
   Bouton blanc plein à texte foncé : lisible sur les quatre couleurs,
   et cohérent avec l'identité noir et blanc de la marque. */
.secal-club a.secal-lien {
    background: #fff;
    border-color: rgba(0, 0, 0, .1);
    color: rgba(0, 0, 0, .88) !important;
}

.secal-club a.secal-lien:hover,
.secal-club a.secal-lien:focus {
    background: rgba(255, 255, 255, .82);
    color: rgba(0, 0, 0, .88) !important;
}

/* ---------- Tuiles des organisations -------------------------------------- */
.secal-club {
    justify-content: flex-start;
    gap: 12px;
}

.secal-club img {
    height: 80px;
    width: auto;
    max-width: 100%;
    align-self: flex-start;
}

.secal-club ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: clamp(.78rem, .9vw, .92rem);
    opacity: .85;
}

.secal-club li { padding: 2px 0; }

.secal-rotary { background: var(--rotary); color: #fff; }
/* Texte blanc demandé par le client. À savoir : sur ce bleu, le contraste
   n'est que de 2,9 (seuil d'accessibilité : 4,5). En noir il serait de 7,2.
   Si la lisibilité pose problème, assombrir --interact vers #0077A3 permet
   de garder le blanc en repassant au-dessus du seuil. */
.secal-interact { background: var(--interact); color: #fff; }
/* Texte en bleu Rotary sur le jaune Inner Wheel : contraste 6,3, au-dessus
   du seuil d'accessibilité de 4,5. */
.secal-innerwheel { background: var(--innerwheel); color: var(--rotary); }
.secal-rotaract { background: var(--rotaract); color: #fff; }

/* ---------- Tuiles verticales --------------------------------------------- */
.secal-v {
    gap: 12px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .45);
}

/* Zone image des tuiles verticales.
   "object-fit: contain" garde la photo entière sans la déformer, quelles que
   soient ses proportions ; "flex-shrink" lui permet de céder de la hauteur
   quand la tuile manque de place, au lieu de pousser le texte dehors. */
.secal-v svg,
.secal-v-image {
    width: 100%;
    max-width: 100%;
    max-height: 190px;
    height: auto;
    margin: 4px auto 10px;
    object-fit: contain;
    flex-shrink: 1;
    min-height: 0;
    display: block;
}

.secal-v svg { max-width: 140px; }

.secal-v p { font-size: clamp(.78rem, .9vw, .9rem); color: var(--gris); }
.secal-v .secal-lien { color: var(--azur); }

/* Tuile Fanions : deux boutons empilés en bas, à la même largeur
   (« Créer mon fanion » vers l'atelier, « Commander mes fanions » vers la
   boutique). La tuile ne grandit pas : le diaporama, qui occupe l'espace
   restant, cède la hauteur nécessaire.
   « Créer » est en contour (blanc, filet et texte bleus) : le bouton plein
   reste la commande, dans l'identité noir et blanc + bleu de la marque.
   Le !important des couleurs répond à celui de a.secal-lien. */
.secal-boutons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
}

.secal-boutons a.secal-lien {
    align-self: stretch;
    margin-top: 0;
    padding: 10px 8px;
    font-size: .85rem;
    text-align: center;
}

.secal-boutons a.secal-lien-second {
    background: #fff;
    border-color: var(--azur);
    color: var(--azur) !important;
}

.secal-boutons a.secal-lien-second:hover,
.secal-boutons a.secal-lien-second:focus {
    background: var(--azur);
    color: #fff !important;
}

.secal-etiquette {
    align-self: flex-start;
    padding: 3px 10px;
    background: var(--azur);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
}

.secal-specs {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: clamp(.76rem, .88vw, .88rem);
    color: var(--gris);
}

.secal-specs li {
    position: relative;
    padding: 3px 0 3px 16px;
}

/* Puce en forme de fanion plutôt qu'une pastille */
.secal-specs li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 9px;
    height: 9px;
    background: var(--azur);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* ---------- Effets visuels ------------------------------------------------
   Sobres, conformes à une identité noir et blanc : un léger soulèvement au
   survol, une apparition en fondu décalée à l'ouverture. Tout est neutralisé
   si le visiteur a désactivé les animations dans son système. */

.secal-tuile {
    transition: transform .18s ease, box-shadow .18s ease;
}

.secal-tuile:hover,
.secal-tuile:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .13);
}

/* Le focus clavier reste instantané : pas de transition à traverser avant de
   voir où l'on se trouve. */
.secal-home a:focus-visible {
    transition: none;
}

/* Apparition à l'ouverture : colonnes de gauche à droite, 130 ms d'écart. */
@keyframes secal-apparition {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.secal-tuile {
    animation: secal-apparition .8s ease-out backwards;
}

.secal-club-1 { animation-delay: 0ms; }
.secal-club-2 { animation-delay: 130ms; }
.secal-club-3 { animation-delay: 130ms; }
.secal-club-4 { animation-delay: 260ms; }
.secal-v-1    { animation-delay: 390ms; }
.secal-v-2    { animation-delay: 520ms; }

/* Accessibilité : aucun mouvement si le système du visiteur le demande. */
@media (prefers-reduced-motion: reduce) {
    .secal-tuile {
        animation: none;
        transition: none;
    }

    .secal-tuile:hover,
    .secal-tuile:focus-within {
        transform: none;
    }
}

/* ---------- Mobile et tablette -------------------------------------------- */
@media (max-width: 1000px) {
    .secal-home { min-height: 0; }

    .secal-grille {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }

    .secal-grille > * {
        grid-column: auto;
        grid-row: auto;
    }

    .secal-v svg { max-height: 150px; }
    .secal-agrement { margin-left: 0; }
}

@media (min-width: 1001px) and (max-width: 1400px) {
    .secal-grille { grid-template-columns: 1.3fr 1.3fr 1fr 1fr; }

    /* Les tuiles sont plus étroites : le logo est ramené à une taille
       intermédiaire pour laisser la place au texte. */
    .secal-club img { height: 60px; }
}