/* =========================================================================
   École des Réseaux Sociaux / School of Social Networks
   Design tokens — couleurs, typographie, espacements, accessibilité.
   Police choisie pour la lisibilité enfant + accessibilité :
     Titres  : Fredoka (arrondie, amicale, couvre le latin étendu PL/PT/IT/ES)
     Corps   : Inter   (excellente lisibilité écran)
   ========================================================================= */

:root {
  /* Palette de marque (reprise des écrans validés) */
  --ssn-coral:        #F76B6B;   /* primaire / hero / footer */
  --ssn-coral-600:    #E85656;
  --ssn-indigo:       #6A5AE0;   /* coin enfants / sections violettes */
  --ssn-indigo-600:   #5A49D6;
  --ssn-teal:         #20C9A6;   /* coin parents */
  --ssn-yellow:       #FFD23F;   /* cartes */
  --ssn-ink:          #1F2138;   /* texte principal */
  --ssn-ink-soft:     #4A4D63;
  --ssn-paper:        #FFFFFF;
  --ssn-paper-2:      #F6F7FB;   /* fonds de section clairs */
  --ssn-line:         #E6E8F0;

  /* Couleurs thématiques des cartes (pastilles validées) */
  --ssn-cat-donnees:      #FF2EA6;  /* Données personnelles */
  --ssn-cat-reputation:   #FFC93C;  /* Réputation et identité */
  --ssn-cat-sante:        #38C6E8;  /* Santé et bien-être */
  --ssn-cat-critique:     #2ECC71;  /* Pensée critique et confiance */
  --ssn-cat-positifs:     #FF7A45;  /* Comportements positifs et proactifs */
  --ssn-cat-dangereux:    #8C7AE6;  /* Potentiellement dangereux */
  --ssn-cat-mercantilisme:#2D7FF9;  /* Mercantilisme */
  --ssn-cat-vieprivee:    #27AE60;  /* Vie privée et sécurité */

  /* Typographie */
  --ssn-font-display: "Fredoka", system-ui, sans-serif;
  --ssn-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Échelle d'espacement */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* Rayons & ombres */
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-pill: 9999px;
  --sh-card: 0 8px 24px rgba(31,33,56,.10);
  --sh-pop:  0 14px 40px rgba(31,33,56,.16);

  --ssn-header-h: 80px;
  --ssn-container: 1180px;
}

/* ----------------------------- Reset léger ----------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--ssn-font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ssn-ink);
  background: var(--ssn-paper);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ssn-indigo-600); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--ssn-font-display);
  font-weight: 600;
  line-height: 1.15;
  color: var(--ssn-ink);
  margin: 0 0 var(--sp-4);
}
h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.3rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); }
p  { margin: 0 0 var(--sp-4); }

/* --------------------------- Accessibilité ----------------------------- */
:focus-visible {
  outline: 3px solid var(--ssn-indigo);
  outline-offset: 2px;
  border-radius: 4px;
}
.ssn-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10000;
  background: var(--ssn-ink); color: #fff; padding: 12px 18px;
  border-radius: 0 0 var(--r-sm) 0; font-weight: 600;
}
.ssn-skip-link:focus { left: 0; }
.ssn-visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* ----------------------------- Layout utils ---------------------------- */
.ssn-container { width: 100%; max-width: var(--ssn-container); margin: 0 auto; padding: 0 var(--sp-5); }
.ssn-btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--ssn-font-display); font-weight: 600; font-size: 1rem;
  padding: 12px 26px; border-radius: var(--r-pill); border: 0; cursor: pointer;
  background: var(--ssn-indigo); color: #fff; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.ssn-btn:hover { background: var(--ssn-indigo-600); transform: translateY(-1px); text-decoration: none; }
.ssn-btn--coral { background: var(--ssn-coral); }
.ssn-btn--coral:hover { background: var(--ssn-coral-600); }

/* =================== Contenu issu du WordPress =================== */
.ssn-prose { font-size: 1.05rem; }

.ssn-prose img {
  margin: var(--sp-5) auto; border-radius: var(--r-md);
  max-width: 100%; height: auto; display: block;
}
/* Placeholders WP sans dimensions utiles */
.ssn-prose img[src*="placeholder"] { display: none; }

.ssn-prose h2 { margin-top: var(--sp-7); }
.ssn-prose h3 { margin-top: var(--sp-5); }

/* Artefacts WP à masquer */
.ssn-prose svg { display: none; }
.ssn-prose .ssn-question-header svg,
.ssn-prose .ssn-prog-star svg { display: flex; }
.ssn-prose input[type="range"] { display: none; }

/* Compteur "messages envoyés" → discret */
.ssn-prose h4 {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ssn-ink-soft); font-weight: 600; margin: var(--sp-1) 0 var(--sp-4);
}

/* Premier paragraphe : texte d'intro mis en valeur */
.ssn-prose > p:first-of-type {
  font-size: 1.1rem; color: var(--ssn-ink-soft); line-height: 1.7;
}

/* Liens-boutons (tags thématiques catégories) */
.ssn-prose a[role="button"] {
  display: inline-block; margin: var(--sp-1); padding: 8px 18px;
  background: var(--ssn-paper-2); border: 1px solid var(--ssn-line);
  border-radius: var(--r-pill); font-weight: 600; font-size: .9rem;
  color: var(--ssn-ink); text-decoration: none;
}
.ssn-prose a[role="button"]:hover { background: var(--ssn-line); text-decoration: none; }

/* (overrides dans layout.css — bande intro collée au héro) */