/**
 * Sunugafa — Styles globaux
 * -------------------------------------------------------------------------
 * Design tokens et styles de base extraits fidèlement du template source
 * (ASSETS/template/index.html). Ces styles sont partagés par TOUT le site.
 * Les styles spécifiques aux sections/widgets vivent dans le plugin
 * sunugafa-elementor (un fichier CSS par widget).
 * -------------------------------------------------------------------------
 */

/* ========================================================================
   1. DESIGN TOKENS (variables globales)
   ======================================================================== */
:root {
  /* Couleurs de marque */
  --snf-green:  #00A8E8;   /* cyan principal */
  --snf-green2: #00D9FF;   /* cyan clair (hover/accent) */
  --snf-yellow: #FFD700;   /* jaune / ambre */
  --snf-orange: #FFD700;   /* alias historique du template */
  --snf-violet: #7B2FBE;
  --snf-navy:   #1A2A3A;   /* fonds sombres, nav */
  --snf-navy-deep: #060D15;/* footer */

  /* Neutres */
  --snf-ink:   #111111;    /* texte principal */
  --snf-paper: #F5F0E8;    /* fond crème */
  --snf-white: #FFFFFF;
  --snf-muted: #777777;    /* texte secondaire */
  --snf-border: #E8E2D8;   /* filets / séparateurs crème */

  /* Alias sémantiques (compat template : --green, --teal, --amber…) */
  --green:  var(--snf-green);
  --green2: var(--snf-green2);
  --teal:   var(--snf-green);
  --amber:  var(--snf-yellow);
  --yellow: var(--snf-yellow);
  --orange: var(--snf-yellow);
  --violet: var(--snf-violet);
  --navy:   var(--snf-navy);
  --ink:    var(--snf-ink);
  --paper:  var(--snf-paper);
  --white:  var(--snf-white);
  --muted:  var(--snf-muted);

  /* Typographie */
  --fd: 'Josefin Sans', sans-serif;               /* display / titres */
  --fh: 'Josefin Sans', sans-serif;               /* headings / labels UI */
  --fb: 'Inter', sans-serif;                      /* corps de texte */
  --fs: 'Playfair Display', Georgia, serif;       /* serif éditorial */

  /* Rythme / conteneur */
  --snf-container: 1280px;
  --snf-radius: 14px;
  --snf-radius-sm: 4px;
}

/* ========================================================================
   2. RESET LÉGER
   ======================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--fb);
  background: var(--snf-paper);
  color: var(--snf-ink);
  /* `clip` empêche le débordement horizontal SANS créer de conteneur de
     défilement (contrairement à `hidden` qui casserait position:sticky). */
  overflow-x: hidden; /* repli anciens navigateurs */
  overflow-x: clip;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--snf-green); text-decoration: none; transition: color .2s; }
a:hover { color: var(--snf-green2); }

/* ========================================================================
   3. TYPOGRAPHIE DE BASE
   ======================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--fd);
  letter-spacing: .03em;
  line-height: 1.05;
  color: var(--snf-ink);
  margin: 0 0 .5em;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 700; }

/* ========================================================================
   4. BLOCS PARTAGÉS (labels de section, titres, sous-titres)
   Réutilisés partout — repris à l'identique du template.
   ======================================================================== */
.s-label {
  font-family: var(--fh);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.s-label::before {
  content: '';
  display: block;
  width: 24px;
  height: 3px;
  background: currentColor;
  border-radius: 2px;
}

.s-title {
  font-family: var(--fd);
  font-size: clamp(2rem, 3.6vw, 3.4rem);
  line-height: 1;
  letter-spacing: .02em;
  margin: 0 0 14px;
}

.s-sub {
  font-size: .95rem;
  color: var(--snf-muted);
  max-width: 540px;
  line-height: 1.72;
  margin: 0 0 40px;
}

.section-pad { padding: 80px 6%; margin: 0; }

/* ========================================================================
   5. BOUTONS
   ======================================================================== */
.btn-fill {
  display: inline-block;
  background: var(--snf-green);
  color: var(--snf-white);
  font-family: var(--fh);
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 14px 30px;
  border-radius: var(--snf-radius-sm);
  border: 2px solid var(--snf-green);
  transition: all .22s;
  cursor: pointer;
}
.btn-fill:hover { background: transparent; color: var(--snf-green2); border-color: var(--snf-green2); }

.btn-outline {
  display: inline-block;
  background: transparent;
  color: var(--snf-white);
  font-family: var(--fh);
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 14px 30px;
  border-radius: var(--snf-radius-sm);
  border: 2px solid rgba(255, 255, 255, .28);
  transition: all .22s;
  cursor: pointer;
}
.btn-outline:hover { border-color: var(--snf-green2); color: var(--snf-green2); }

/* Retour tactile au clic (micro-interaction). */
.btn-fill:active,
.btn-outline:active { transform: scale(.97); }

@media (prefers-reduced-motion: reduce) {
  .btn-fill:active,
  .btn-outline:active { transform: none; }
}

/* ========================================================================
   6. ANIMATIONS PARTAGÉES
   ======================================================================== */
@keyframes snf-fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

.reveal.anim {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal.anim.visible { opacity: 1; transform: translateY(0); }

/* Respect des préférences d'accessibilité */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ========================================================================
   7. UTILITAIRES & ACCESSIBILITÉ
   ======================================================================== */
.snf-container { max-width: var(--snf-container); margin-inline: auto; }

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
  clip: auto !important;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: .875rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* Cible de lien d'évitement / focus visible clavier */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--snf-green);
  outline-offset: 2px;
}

/* Sécurité anti-débordement : les longs mots ne cassent jamais la mise en page. */
.s-title,
.hero-h1,
.snf-tl__title,
.snf-alerts__card-title { overflow-wrap: anywhere; }

/* Décalage des ancres : le header collant (66 px) ne masque plus la cible. */
:target,
[id] { scroll-margin-top: 78px; }

/* Retour tactile au toucher sur les cartes cliquables. */
.snf-alerts__card:active,
.oc-card:active,
.snf-tst__card:active { transform: scale(.985); }
@media (prefers-reduced-motion: reduce) {
  .snf-alerts__card:active,
  .oc-card:active,
  .snf-tst__card:active { transform: none; }
}

/* ========================================================================
   8. RESPONSIVE MOBILE (rythme vertical & titres)
   ======================================================================== */
@media (max-width: 767px) {
  /* Densité verticale réduite (~40 %) : moins de défilement à vide. */
  .section-pad { padding: 48px 6%; }
}

@media (max-width: 480px) {
  /* Bornes basses réellement adaptées aux petits écrans. */
  .s-title { font-size: clamp(2rem, 8vw, 2.6rem); }
}