/* ===================================================================
   GOSSELICO — Thème LinkStack
   Conçu d'après la charte graphique de l'association Gosselico.
   Fond noir, motifs colorés flottants, boutons en cascade.
   Mobile-first.
   =================================================================== */

/* Palette & tokens
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
  /* Gamme colorée officielle (charte p.8) */
  --gs-violet: #8969A1;
  --gs-rose:   #D6619E;
  --gs-vert:   #4F9073;
  --gs-creme:  #E4DDCC;
  --gs-orange: #D25C2A;
  --gs-noir:   #000000;
  --gs-gris:   #2A2A28;

  /* Rôles */
  --bg:            var(--gs-noir);
  --surface:       rgba(228, 221, 204, 0.06);  /* crème très transparent */
  --surface-hover: rgba(228, 221, 204, 0.12);
  --border:        rgba(228, 221, 204, 0.16);
  --text:          var(--gs-creme);
  --text-muted:    rgba(228, 221, 204, 0.62);
  --accent:        var(--gs-violet);

  /* Typo — Avenir, police officielle du site gosselico.fr */
  --font: 'Avenir', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Mesures */
  --maxw: 560px;
  --radius: 18px;
  --gap: 0.6rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Reset léger
–––––––––––––––––––––––––––––––––––––––––––––––––– */
* { box-sizing: border-box; }

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font);
  font-weight: 400;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Voile radial discret pour donner de la profondeur au fond noir */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(137, 105, 161, 0.18), transparent 60%),
    radial-gradient(90% 70% at 100% 110%, rgba(214, 97, 158, 0.12), transparent 60%);
}

/* Layout LinkStack
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  z-index: 1;
  width: 100%;
  /* plus étroit que l'écran → on voit un CADRE de motifs tout autour.
     mobile : ~80% de la largeur ; desktop : plafonné par --maxw. */
  max-width: min(var(--maxw), 80vw);
  margin: 0 auto;
  padding: clamp(1.5rem, 5vh, 2.5rem) 0 clamp(1.5rem, 5vh, 2.5rem);
  text-align: center;
}

/* Sur très petit écran, 80vw serait minuscule → on remonte un peu la part
   de l'encart tout en gardant une vraie marge de motifs sur les côtés. */
@media (max-width: 560px) {
  .container { max-width: 86vw; }
}

.row { width: 100%; }

/* Encart NOIR opaque — même teinte que le fond principal du site officiel
   (--background-main #14100D). Carte sombre qui ressort sur le pattern, et
   sur laquelle les boutons crème (style du site) ressortent. */
.column {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: 0 !important;
  padding: clamp(1.75rem, 4vh, 2.25rem) clamp(1.1rem, 5vw, 1.6rem) clamp(1.1rem, 2.5vh, 1.4rem);
  background: #14100D;                 /* background-main du site */
  border: none;                        /* pas de bordure, comme le site */
  border-radius: 26px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

/* Avatar / Logo
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#avatar,
.rounded-avatar {
  width: 92px !important;
  height: 92px !important;
  min-width: 92px !important;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto 0.9rem;
  padding: 11px;
  background: var(--gs-gris);
  border: 2px solid var(--border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

#avatar:hover,
.rounded-avatar:hover {
  transform: scale(1.04) rotate(-3deg);
  box-shadow: 0 14px 40px rgba(137, 105, 161, 0.45);
}

/* Titre & bio
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1 {
  font-size: clamp(1.6rem, 6vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.4rem;
  color: var(--text);
  line-height: 1.15;
}

.bio,
#bio,
p.bio {
  font-size: 1rem;
  color: var(--text-muted);
  max-width: 38ch;
  margin: 0 auto 1.1rem;
  line-height: 1.55;
}

a { color: var(--gs-rose); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Icônes sociales
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.social-icon-div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin: 0 auto 1.2rem;
  max-width: 100%;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--text);                    /* sur encart noir : icône crème */
  border: 1.5px solid transparent;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease);
}

.social-icon {
  font-size: 1.25rem;
  line-height: 1;
  color: var(--text) !important;
}

.social-link:hover {
  transform: translateY(-3px);
  color: #fff;                           /* sur la pastille colorée */
}
.social-icon-div .social-link:hover .social-icon { color: #fff !important; }

/* teintes de survol par position — rappel de la gamme colorée */
.social-icon-div .social-link:nth-child(5n+1):hover { background: var(--gs-violet); }
.social-icon-div .social-link:nth-child(5n+2):hover { background: var(--gs-rose); }
.social-icon-div .social-link:nth-child(5n+3):hover { background: var(--gs-vert); }
.social-icon-div .social-link:nth-child(5n+4):hover { background: var(--gs-orange); }
.social-icon-div .social-link:nth-child(5n+5):hover { background: var(--gs-noir); } /* crème invisible sur crème → noir */

/* Boutons (liens)
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Boutons calqués sur le site officiel gosselico.fr :
   fond crème plein, texte noir, coins à 4px (style Gutenberg "fill"). */
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 46px;
  padding: 0.62rem 1.2rem;
  margin: 0 0 var(--gap);
  background: var(--gs-creme);          /* crème plein, comme le site */
  /* (le dernier bouton perd sa marge basse plus bas → pas de vide résiduel) */
  color: var(--gs-noir);                /* texte noir */
  border: none;
  border-radius: 4px;                   /* coins du site (4px) */
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: transform 0.18s var(--ease), background 0.18s var(--ease),
              box-shadow 0.18s var(--ease);
}

/* Hover calqué sur le site officiel : le bouton devient CREUX — fond
   transparent (laisse voir l'encart noir), bordure crème, texte crème.
   On neutralise aussi le scale(1.1) natif de LinkStack (effet zoom). */
.button.button-hover:hover,
.button.button-hover:focus,
.button:hover,
.button:focus-visible {
  transform: none !important;
  background: transparent;
  color: var(--gs-creme);
  box-shadow: inset 0 0 0 1.5px var(--gs-creme);  /* bordure crème nette */
  text-decoration: none;
  outline: none;
}
.button:active { transform: none !important; }

/* Boutons SANS icône — texte seul, centré, comme les liens du site officiel.
   Choix le plus solide : aucun logo à gérer, donc aucun souci de favicon
   coloré / blanc / à fond plein, quel que soit le futur lien ajouté.
   On masque l'icône (img ou <i> font-awesome) à l'intérieur du bouton. */
.button img.icon,
.button i.icon {
  display: none !important;
}

/* Animation d'entrée en cascade.
   LinkStack fournit --delay sur chaque bouton sous la forme "1s", "2s"…
   (1 = 1er bouton). On le multiplie par un SCALAIRE sans unité (valide en
   calc, contrairement à "× 0.07s" qui donnerait des s²). "both" garantit
   qu'un bouton reste visible une fois l'animation finie. */
.button-entrance {
  animation: gsRise 0.55s var(--ease) both;
  animation-delay: calc(var(--delay, 0) * 0.09 + 0.15s);
}

.fadein {
  animation: gsFade 0.7s var(--ease) both;
}
#avatar.fadein { animation-delay: 0.05s; }
h1.fadein     { animation-delay: 0.15s; }
.social-icon-div.fadein { animation-delay: 0.3s; }

@keyframes gsRise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes gsFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Footer
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* LinkStack pose une grosse marge inline sur le footer (margin:5% 0 35px) et
   un padding-bottom:50px sur le crédit → c'est ça le gros vide noir sous le
   dernier bouton. On la neutralise (!important car style inline). Le footer
   reste juste sous les liens, l'encart suit la hauteur du contenu (dynamique). */
.column .footer {
  margin: 0.75rem 0 0 0 !important;
  color: var(--text-muted);
  font-size: 0.85rem;
}
.column .footer a, footer a { color: var(--text-muted); }
/* crédit "powered by LinkStack" : on supprime son padding-bas démesuré */
.column .credit-hover { padding-bottom: 0 !important; }
/* le .container interne du footer ne doit pas réintroduire de padding vertical */
.column .footer .container,
.column > .container { padding-top: 0; padding-bottom: 0; }

/* Sélection & scrollbar
–––––––––––––––––––––––––––––––––––––––––––––––––– */
::selection { background: var(--gs-rose); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: var(--gs-violet) transparent; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: var(--gs-violet); border-radius: 4px; }

/* Accessibilité : mouvement réduit
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .button-entrance, .fadein { opacity: 1 !important; }
}

/* Print
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media print {
  body::after, #gs-motifs { display: none !important; }
  .button { background: #fff; color: #000; border-color: #ccc; box-shadow: none; }
}

/* ===================================================================
   GOSSELICO THEME — Association Gosselico
   =================================================================== */