/*
 * afla-style.css — Thème enfant AFLA / Famille Levesque
 * Chargé sur toutes les pages, utilisé par les patterns dynamiques
 *
 * Ce fichier contient uniquement les fondations globales :
 * variables, reset, typographie, blocs colorés, lien flèche, texte vertical.
 *
 * Les autres styles sont répartis dans css/ :
 *   css/components.css         — hero, navigation catégories, bandeau section,
 *                                grilles, cartes post, onglets, sidebar,
 *                                templates catégorie, grille archive, responsive
 *   css/article.css            — template générique rouge, styles de blocs,
 *                                mise en page article, éditeur Gutenberg,
 *                                colonnes texte+photos, feuille article
 *   css/forms.css              — formulaires AFLA
 *   css/mega-menu.css          — mega menu
 *   css/blocks/bandeau.css     — bloc afla/bandeau
 *   css/blocks/infos.css       — bloc afla/infos
 *   css/blocks/corps.css       — bloc afla/corps
 *   css/blocks/rubrique-titre.css — bloc afla/rubrique-titre
 *   css/blocks/highlight.css   — bloc afla/highlight
 *   css/blocks/archive.css     — bloc afla/archive
 */

/* ══════════════════════════════════════
   VARIABLES GLOBALES
   ══════════════════════════════════════ */
:root {
  --afla-rouge-1: #F5507A;
  --afla-rouge-2: #CC1045;
  --afla-rouge-3: #8B0A30;
  --afla-bleu-1:  #8FC4DC;
  --afla-bleu-2:  #5BA0C0;
  --afla-bleu-3:  #145F7A;
  --afla-or-1:    #F9DFA0;
  --afla-or-2:    #F5C842;
  --afla-or-3:    #B8821A;
  --afla-vert-1:  #A8D9A0;
  --afla-vert-2:  #6B9E5E;
  --afla-vert-3:  #384D28;
  --afla-creme:   #FDFBF0;
  --afla-blanc:   #FFFFFF;
  --afla-regle:   #E0DDD5;
  --afla-ink:     #1C1C1C;
  --afla-ink2:    #5A5A5A;
  --afla-ink3:    #999999;
  --afla-fh:      'Barlow Condensed', sans-serif;
  --afla-fb:      'Source Serif 4', serif;
  --afla-fu:      'Barlow', sans-serif;
}

/* ══════════════════════════════════════
   RESET PATTERNS
   ══════════════════════════════════════ */
.afla-pattern,
.afla-pattern * { box-sizing: border-box; }
.afla-pattern   { font-family: var(--afla-fb); font-size: 15px; line-height: 1.65; color: var(--afla-ink); }
.afla-pattern a { color: inherit; text-decoration: none; }

/* ══════════════════════════════════════
   TYPOGRAPHIE — Étiquettes rubriques
   ══════════════════════════════════════ */
.afla-rubrique {
  display: inline-block;
  font-family: var(--afla-fu);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding-bottom: 4px;
  border-bottom: 2.5px solid currentColor;
  margin-bottom: 14px;
}
.afla-rubrique.rb { color: var(--afla-bleu-3);  }
.afla-rubrique.ry { color: var(--afla-or-3);    }
.afla-rubrique.rr { color: var(--afla-rouge-2); }
.afla-rubrique.rv { color: var(--afla-vert-3);  }

/* ══════════════════════════════════════
   BLOCS COLORÉS
   ══════════════════════════════════════ */
.afla-bd { padding: 14px 18px; font-family: var(--afla-fb); font-style: italic; font-size: 14px; line-height: 1.5; color: #fff; }
.afla-bl { padding: 12px 16px; font-family: var(--afla-fb); font-size: 14px; line-height: 1.55; }
.afla-bd.b { background: var(--afla-bleu-3);  }
.afla-bd.y { background: var(--afla-or-3);    }
.afla-bd.r { background: var(--afla-rouge-2); }
.afla-bd.v { background: var(--afla-vert-3);  }
.afla-bl.b { background: #E8F4FA;              border-left: 3px solid var(--afla-bleu-2);  }
.afla-bl.y { background: var(--afla-or-1);    border-left: 3px solid var(--afla-or-2);    }
.afla-bl.r { background: #FDEEF3;             border-left: 3px solid var(--afla-rouge-1); }
.afla-bl.v { background: #EDF7E9;             border-left: 3px solid var(--afla-vert-2);  }

/* ══════════════════════════════════════
   LIEN FLÈCHE
   ══════════════════════════════════════ */
.afla-lf {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--afla-fu); font-size: 11px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase;
  padding-bottom: 3px; border-bottom: 2px solid currentColor;
  width: fit-content; transition: gap .15s;
}
.afla-lf:hover { gap: 14px; }

/* ════════════════════════════════════════════════════
   TEXTE VERTICAL — writing-mode helpers
   ════════════════════════════════════════════════════ */

/* Bas → haut  (lecture naturelle tournée 90° anti-horaire) */
.afla-v-up   { writing-mode: vertical-rl; transform: rotate(180deg); }

/* Haut → bas  (lecture tournée 90° horaire) */
.afla-v-down { writing-mode: vertical-rl; }

/* Haut → bas  (lettres droites, pas de rotation — idéal pour chiffres/majuscules) */
.afla-v-lr   { writing-mode: vertical-lr; }

/* ══════════════════════════════════════
   FOND TOURNANT (dégradé rotatif animé)
   Usage : <div class="rotating-bg cr"> (ou cb / cy / cv)
   ══════════════════════════════════════ */
@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.rotating-bg {
  --angle: 0deg;
  animation: afla-rotate-gradient 4s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}

.rotating-bg.cr {
  background: linear-gradient(var(--angle), #fff 50%, var(--afla-rouge-2) 50%);
}
.rotating-bg.cb {
  background: linear-gradient(var(--angle), #fff 50%, var(--afla-bleu-3) 50%);
}
.rotating-bg.cy {
  background: linear-gradient(var(--angle), #fff 50%, var(--afla-or-3) 50%);
}
.rotating-bg.cv {
  background: linear-gradient(var(--angle), #fff 50%, var(--afla-vert-3) 50%);
}

@keyframes afla-rotate-gradient {
  from { --angle: 0deg;   }
  to   { --angle: 360deg; }
}

/* ══════════════════════════════════════
   TEXTE TOURNANT (dégradé rotatif dans le texte)
   Usage : <span class="rotating-text cr"> (ou cb / cy / cv)
   ══════════════════════════════════════ */
.rotating-text {
  --angle: 0deg;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: afla-rotate-gradient 1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}

.rotating-text.cr {
  background-image: linear-gradient(var(--angle), #fff 50%, var(--afla-rouge-2) 50%);
}
.rotating-text.cb {
  background-image: linear-gradient(var(--angle), #fff 50%, var(--afla-bleu-3) 50%);
}
.rotating-text.cy {
  background-image: linear-gradient(var(--angle), #fff 50%, var(--afla-or-3) 50%);
}
.rotating-text.cv {
  background-image: linear-gradient(var(--angle), #fff 50%, var(--afla-vert-3) 50%);
}

/* ══════════════════════════════════════
   OPTION 1 — SHIMMER (balayage lumineux)
   Reflet qui passe sur le texte en continu.
   Usage : <span class="shimmer-text cr"> (ou cb / cy / cv)
   ══════════════════════════════════════ */
.shimmer-text {
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: afla-shimmer 2.4s linear infinite;
}

/* Fond blanc → reflet clair sur texte coloré */
.shimmer-text.cr {
  background-image: linear-gradient(110deg, var(--afla-rouge-2) 30%, var(--afla-rouge-1) 50%, var(--afla-rouge-2) 70%);
}
.shimmer-text.cb {
  background-image: linear-gradient(110deg, var(--afla-bleu-3) 30%, var(--afla-bleu-1) 50%, var(--afla-bleu-3) 70%);
}
.shimmer-text.cy {
  background-image: linear-gradient(110deg, var(--afla-or-3) 30%, var(--afla-or-2) 50%, var(--afla-or-3) 70%);
}
.shimmer-text.cv {
  background-image: linear-gradient(110deg, var(--afla-vert-3) 30%, var(--afla-vert-2) 50%, var(--afla-vert-3) 70%);
}

/* Variante fond coloré → reflet blanc sur texte blanc */
.shimmer-text.blanc {
  background-image: linear-gradient(110deg, rgba(255,255,255,.7) 30%, rgba(255,255,255,1) 50%, rgba(255,255,255,.7) 70%);
}

@keyframes afla-shimmer {
  from { background-position: 200% center; }
  to   { background-position: -200% center; }
}

/* ══════════════════════════════════════
   OPTION 2 — WIPE (révélation par clip)
   Le texte se dévoile de gauche à droite.
   Animation one-shot : ajouter .visible via JS au scroll/load.
   Usage : <span class="wipe-text cr"> + JS : el.classList.add('visible')
   ══════════════════════════════════════ */
.wipe-text {
  display: inline-block;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}
.wipe-text.visible {
  clip-path: inset(0 0% 0 0);
}

.wipe-text.cr { color: var(--afla-rouge-2); }
.wipe-text.cb { color: var(--afla-bleu-3);  }
.wipe-text.cy { color: var(--afla-or-3);    }
.wipe-text.cv { color: var(--afla-vert-3);  }

/* Variante fond coloré → texte blanc */
.wipe-text.blanc { color: #fff; }

/* Décalage pour les mots multiples : ajouter data-delay="0.1" etc. via JS */
.wipe-text[data-delay="1"] { transition-delay: .1s; }
.wipe-text[data-delay="2"] { transition-delay: .2s; }
.wipe-text[data-delay="3"] { transition-delay: .3s; }
.wipe-text[data-delay="4"] { transition-delay: .4s; }
.wipe-text[data-delay="5"] { transition-delay: .5s; }

/* ══════════════════════════════════════
   OPTION 3 — MIX-BLEND-MODE DIFFERENCE
   Texte toujours lisible sur n'importe quel fond.
   Aucune animation requise — effet permanent.
   Usage : <span class="blend-text">
   ══════════════════════════════════════ */
.blend-text {
  color: #fff;
  mix-blend-mode: difference;
}

/* Variante animée : pulsation subtile */
.blend-text.pulse {
  animation: afla-blend-pulse 3s ease-in-out infinite;
}

@keyframes afla-blend-pulse {
  0%, 100% { opacity: 1;   }
  50%      { opacity: .75; }
}

/* ══════════════════════════════════════
   VISIBILITÉ RESPONSIVE
   Aligné sur le breakpoint WP "Empiler sur mobile" : 781px
   mobile ≤ 781px · desktop > 781px
   ══════════════════════════════════════ */
@media (max-width: 781px) {
  .afla-hide-mobile  { display: none !important; }
}
@media (min-width: 782px) {
  .afla-hide-desktop { display: none !important; }
}