/* ===== PHÉ-NIX — DESIGN SYSTEM (style Apple, base claire) ===== */

/* TOKENS */
:root {
  --bg:          #FFFFFF;   /* fond principal */
  --bg-soft:     #F5F5F7;   /* gris Apple — sections de respiration */
  --ink:         #1D1D1F;   /* texte principal (quasi-noir) */
  --ink-soft:    #6E6E73;   /* texte secondaire */
  --hairline:    #D2D2D7;   /* filets / bordures */
  --accent:      #E8500E;   /* orange Phé-Nix, profond */
  --accent-deep: #C7440B;   /* hover */
  --accent-soft: rgba(232,80,14,0.08);
  /* L'orange de marque #E8500E n'atteint que 3.76 sur blanc et 3.14 sur le rose
     des cartes : sous le seuil de 4.5 exige pour du petit texte. Il reste la
     couleur des SURFACES (boutons, pastilles, degrades, la flamme), ou il porte
     la marque et ou aucun seuil ne s'applique de la meme facon. Pour du TEXTE
     sur fond clair, cette version plus profonde passe partout : 5.63 sur blanc,
     4.70 dans le pire cas mesure sur les 13 pages. */
  --accent-texte: #B73F0B;
  --accent-texte-fort: #8B3008;  /* survol du texte */
  --accent-clair: #FF8A3D;       /* texte orange sur fond sombre : 8.07 */
  --bg-warm:     #FBF4EF;   /* pêche très clair — chaleur entre les blancs */
  --bg-sable:    #F3E3D3;   /* sable chaud — sépare deux sections blanches */
  --bg-terre:    #E8D5C4;   /* terre douce — le ton le plus affirmé du clair */
  --ink-soft-warm: #59595E; /* texte secondaire sur sable/terre : --ink-soft n'y
                               atteint que 4.04, sous le seuil d'accessibilité */
  --warm-line:   #EDE0D7;   /* filet chaud */
  --radius:      14px;
  --maxw:        1080px;
}

/* RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* overflow-x: clip plutot que hidden. « hidden » cree un conteneur de
   defilement qui desactive position: sticky pour tous les descendants ;
   « clip » coupe le debordement sans cet effet de bord. La ligne hidden
   reste en repli pour les navigateurs qui ne connaissent pas clip. */
html { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
/* La selection de texte porte la braise plutot que le bleu du systeme. */
::selection { background: rgba(232,80,14,0.22); color: var(--ink); }
a { color: inherit; }
ul { list-style: none; }

/* TYPOGRAPHIE — Inter partout, la taille fait la hiérarchie */
h1, h2, h3, h4 { font-family: 'Inter', sans-serif; color: var(--ink); }
h1 { font-size: clamp(44px, 6.5vw, 80px); font-weight: 700; line-height: 1.05; letter-spacing: -0.025em; }
h2 { font-size: clamp(32px, 4vw, 50px); font-weight: 700; line-height: 1.1;  letter-spacing: -0.02em; }
h3 { font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
p  { font-family: 'Inter', sans-serif; font-size: 17px; line-height: 1.65; color: var(--ink-soft); }

/* EYEBROW — petite étiquette d'accent */
.eyebrow {
  font-family: 'Inter', sans-serif;
  font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent-texte);
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 20px;
}

/* BOUTONS — minimalistes, accent plein, hover subtil */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 15px;
  padding: 14px 30px; border-radius: 12px; border: none;
  cursor: pointer; text-decoration: none;
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 2px 10px rgba(232,80,14,0.16); }
.btn-primary:hover { background: var(--accent-deep); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(232,80,14,0.30); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost, .btn-ghost-dark { background: transparent; border: 1px solid var(--hairline); color: var(--ink); }
.btn-ghost:hover, .btn-ghost-dark:hover { border-color: var(--ink); background: rgba(0,0,0,0.02); }
.btn-sm { padding: 9px 20px; font-size: 13.5px; border-radius: 10px; }
.btn-lg { padding: 16px 38px; font-size: 16px; }
/* Focus visible — accessibilité & finition pro */
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ===== HEADER / NAV ===== */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: 56px; display: flex; align-items: center;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
.nav-inner {
  display: flex; align-items: center; width: 100%;
  max-width: 1320px; margin: 0 auto; padding: 0 40px;
}
.nav-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; margin-right: 32px; }
/* le logo porte déjà le lettrage : pas de texte à côté */
.nav-logo img { height: 46px; width: auto; display: block; }

.nav-links { display: flex; align-items: center; flex: 1; justify-content: center; }
.nav-links a {
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500;
  color: var(--ink-soft); text-decoration: none;
  padding: 8px 16px; transition: color 0.2s; white-space: nowrap; position: relative;
}
.nav-links a::after {
  content: ''; position: absolute; left: 16px; right: 16px; bottom: 2px; height: 2px;
  background: var(--accent); border-radius: 2px;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }

.nav-ctas { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-left: 32px; }

/* HAMBURGER — bouton visible avec fond et pulsation d'attention */
/* Sélecteur de langue — visible en tout temps, sur tous les formats */
.lang-switch {
  display: flex; align-items: center; gap: 2px; flex-shrink: 0;
  margin-left: 14px; padding: 3px;
  background: rgba(0,0,0,0.05); border-radius: 999px;
}
.lang-btn {
  border: none; background: none; cursor: pointer;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 12px;
  letter-spacing: 0.03em; color: var(--ink-soft);
  padding: 5px 10px; border-radius: 999px;
  transition: background 0.2s, color 0.2s;
}
.lang-btn:hover { color: var(--ink); }
.lang-btn.actif { background: var(--accent); color: #fff; }

/* Bouton menu : pastille avec le mot « Menu » — une icône seule ne dit pas
   au visiteur qu'il y a d'autres pages derrière. */
.nav-hamburger {
  display: none; flex-direction: row; justify-content: center; align-items: center; gap: 9px;
  background: var(--accent); border: none; border-radius: 999px; cursor: pointer;
  height: 44px; padding: 0 18px 0 15px; width: auto;
  margin-left: auto; z-index: 1001; position: relative;
  box-shadow: 0 4px 14px rgba(232,80,14,0.38);
  animation: navPulseRing 2s ease-out 4;
}
.ham-lignes { display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.nav-hamburger span span,
.ham-lignes span { display: block; width: 19px; height: 2.5px; background: #fff; border-radius: 2px; transition: all 0.25s; }
.ham-txt {
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14px;
  letter-spacing: 0.02em; color: #fff; line-height: 1;
}
.nav-hamburger.open .ham-lignes span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open .ham-lignes span:nth-child(2) { opacity: 0; }
.nav-hamburger.open .ham-lignes span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
@keyframes navPulseRing {
  0%   { box-shadow: 0 4px 14px rgba(232,80,14,0.38), 0 0 0 0 rgba(232,80,14,0.55); }
  70%  { box-shadow: 0 4px 14px rgba(232,80,14,0.38), 0 0 0 14px rgba(232,80,14,0); }
  100% { box-shadow: 0 4px 14px rgba(232,80,14,0.38), 0 0 0 0 rgba(232,80,14,0); }
}
@media (prefers-reduced-motion: reduce) { .nav-hamburger { animation: none; } }

/* MENU MOBILE */
.nav-mobile-panel {
  /* top+bottom ne suffisent pas : le header parent a un backdrop-filter, ce qui
     en fait le bloc conteneur du panneau fixed. On force donc la hauteur en dvh. */
  display: none; position: fixed; top: 56px; left: 0; right: 0; bottom: auto;
  height: calc(100vh - 56px); height: calc(100dvh - 56px);
  background: #fff;
  padding: 24px 28px 40px; z-index: 1002; flex-direction: column; overflow-y: auto;
}
.nav-mobile-panel.open { display: flex; }
.nav-mobile-panel a {
  font-family: 'Inter', sans-serif; font-size: 18px; color: var(--ink);
  text-decoration: none; padding: 16px 4px;
  border-bottom: 1px solid var(--hairline); transition: color 0.2s;
}
.nav-mobile-panel a:hover, .nav-mobile-panel a.active { color: var(--accent-texte); }
.nav-mobile-ctas { display: flex; gap: 10px; margin-top: 24px; padding-top: 20px; }
.nav-mobile-ctas .btn { flex: 1; }

/* ===== HERO SOUS-PAGES ===== */
.section-header { max-width: 580px; }
.page-hero {
  min-height: 56vh; display: flex; align-items: center; justify-content: center;
  text-align: center; position: relative; overflow: hidden;
  background: var(--bg-soft); padding: 140px 40px 80px;
}
.page-hero-content { position: relative; z-index: 2; max-width: 740px; }
.page-hero-content h1 { color: #fff; margin: 18px 0 22px; }
.page-hero-content p { color: rgba(255,255,255,0.82); font-size: 18px; line-height: 1.6; }

/* ===== FOOTER (foncé — image du phénix en fond, assombrie) ===== */
.site-footer {
  position: relative; isolation: isolate;
  background: #140c1e center/cover no-repeat;
  background-image: url('hero-phenix.jpg');
  border-top: 1px solid rgba(255,255,255,0.10);
  padding: 72px 40px 36px;
}
/* Voile sombre : garde les lueurs violet/orangé, atténue le phénix pour la lisibilité */
.site-footer::before {
  /* -1px en haut : l'image de fond déborde sous la bordure, le voile doit la couvrir aussi */
  content: ''; position: absolute; inset: -1px 0 0 0; z-index: -1;
  background: linear-gradient(180deg, rgba(16,9,24,0.90) 0%, rgba(16,9,24,0.94) 100%);
}
.footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 56px; max-width: var(--maxw); margin: 0 auto 48px; }
.footer-logo { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; }
.footer-logo span { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 18px; color: #fff; }
.footer-desc { font-size: 14px; color: rgba(255,255,255,0.68); line-height: 1.6; margin-bottom: 22px; max-width: 320px; }
.footer-socials { display: flex; gap: 10px; }
.social-icon {
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.20);
  display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.72);
  text-decoration: none; transition: all 0.2s;
}
.social-icon { transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), border-color 0.2s, color 0.2s, background 0.2s; }
.social-icon:hover { border-color: var(--accent-texte); color: #fff; background: var(--accent); transform: translateY(-3px); }
/* h3 et non h4 : le balisage est passe en h3 pour supprimer le saut de niveau
   dans la hierarchie des titres, et ce selecteur n'avait pas suivi. Les trois
   titres heritaient alors du noir du body sur fond sombre : 1,13 pour 1. */
.footer-col h3 { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: #fff; margin-bottom: 18px; }
.footer-col ul { display: flex; flex-direction: column; gap: 12px; }
.footer-col a { font-family: 'Inter', sans-serif; font-size: 14px; color: rgba(255,255,255,0.68); text-decoration: none; transition: color 0.2s, transform 0.2s; display: inline-block; }
.footer-col a:hover { color: #fff; transform: translateX(3px); }
.footer-place { font-family: 'Inter', sans-serif; font-size: 14px; color: rgba(255,255,255,0.45); }
.footer-bottom {
  max-width: var(--maxw); margin: 0 auto; display: flex; justify-content: space-between; align-items: center;
  padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.12);
  font-family: 'Inter', sans-serif; font-size: 13px; color: rgba(255,255,255,0.55);
}

/* ===== SCROLL REVEAL (subtil) ===== */
.reveal, .reveal-left, .reveal-right {
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
/* Le masquage n'est applique que si le JavaScript a demarre (classe « js »
   posee en tete de page). Sans cela, une panne de script laissait douze
   sections completement invisibles pour le visiteur. */
.js .reveal       { opacity: 0; transform: translateY(28px); }
.js .reveal-left  { opacity: 0; transform: translateX(-32px); }
.js .reveal-right { opacity: 0; transform: translateX(32px); }
.reveal.visible, .reveal-left.visible, .reveal-right.visible { opacity: 1; transform: none; }
/* Filet de securite : si rien n'a revele les sections apres 3 s, on les montre. */
html.reveal-secours .reveal, html.reveal-secours .reveal-left, html.reveal-secours .reveal-right { opacity: 1 !important; transform: none !important; }
.reveal-d1 { transition-delay: 0.10s; }
.reveal-d2 { transition-delay: 0.20s; }
.reveal-d3 { transition-delay: 0.30s; }
.reveal-d4 { transition-delay: 0.40s; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right { transition: none; opacity: 1; transform: none; }
}

/* ===== LIVE DOT + HERO CHIP ===== */
/* Point fixe : le halo qui pulsait a l'infini simulait une activite en direct
   qui n'existe pas. C'est un tic de gabarit, pas une information. */
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.hero-event-chip {
  display: inline-flex; align-items: center; gap: 10px;
  /* 12 % de blanc laissait le lettrage du logo traverser la pastille.
     Le flou ici n'est pas un ornement : il detache un lien du fond photo. */
  background: rgba(20,12,30,0.58); border: 1px solid rgba(255,255,255,0.28);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: 40px; padding: 8px 18px;
  font-family: 'Inter', sans-serif; font-size: 13px; color: #fff; margin-top: 24px;
}

/* ===== SCROLL TO TOP ===== */
.scroll-top-btn {
  position: fixed; bottom: 28px; right: 24px; width: 44px; height: 44px;
  background: rgba(255,255,255,0.9); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--hairline); border-radius: 12px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.3s, transform 0.3s, border-color 0.2s; z-index: 996; color: var(--ink);
}
.scroll-top-btn.visible { opacity: 1; transform: none; }
.scroll-top-btn:hover { border-color: var(--ink); }

/* ===== BARRE DON MOBILE ===== */
/* Barre de navigation du bas (mobile) — reprend les sections du menu du haut */
.mobile-nav-bar {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 995;
  grid-template-columns: repeat(5, 1fr);
  padding: 7px 3px calc(5px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,0.96); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid var(--hairline);
}
.mobile-nav-bar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  text-decoration: none; color: var(--ink-soft);
  font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: -0.01em;
  padding: 6px 1px; border-radius: 12px; transition: color 0.2s, background 0.2s;
}
.mobile-nav-bar a svg { width: 20px; height: 20px; flex-shrink: 0; }
.mobile-nav-bar a.active { color: var(--accent-texte); background: var(--accent-soft); }
/* Case « Don » : pastille orange pleine, le chemin de don reste visible en tout temps */
.mobile-nav-bar a.nav-don { color: var(--accent-texte); font-weight: 700; }
.mobile-nav-bar a.nav-don svg {
  width: 34px; height: 34px; padding: 7px; border-radius: 50%;
  background: var(--accent); color: #fff;
  box-shadow: 0 3px 10px rgba(232,80,14,0.40);
}
.mobile-nav-bar a.nav-don.active { background: transparent; }

/* ===== RESPONSIVE ===== */
/* Dès que le menu du haut se replie, la barre du bas prend le relais —
   sinon les tablettes se retrouvaient sans navigation visible. */
@media (max-width: 860px) {
  /* La navigation passe entièrement par la barre du bas : le bouton « Menu »
     faisait doublon et encombrait la barre du haut. */
  .nav-links, .nav-hamburger, .nav-mobile-panel { display: none; }
  /* sur tablette il reste de la place pour l'appel au don en haut */
  .nav-ctas { display: block; margin-left: auto; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 40px; }
  /* Évite tout débordement horizontal des animations sur mobile */
  .reveal-left, .reveal-right { transform: translateY(28px); }
  .mobile-nav-bar { display: grid; }
  /* l'espace est pris dans le bas de page : son fond foncé passe derrière la barre,
     au lieu d'une bande blanche qu'aurait créée une marge sur le corps */
  .site-footer { padding-bottom: calc(36px + 86px); }
  /* la flèche de retour en haut se place au-dessus de la barre, sinon elle
     recouvrait la dernière case du menu */
  .scroll-top-btn { bottom: calc(92px + env(safe-area-inset-bottom)); right: 16px; }
}
/* Sur tablette la barre reste centrée plutôt qu'étirée sur toute la largeur */
@media (min-width: 601px) and (max-width: 860px) {
  .mobile-nav-bar { padding-left: 12%; padding-right: 12%; }
}
@media (max-width: 600px) {
  .nav-inner { padding: 0 20px; }
  .footer-inner { grid-template-columns: 1fr; gap: 36px; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
  .site-footer { padding: 56px 24px calc(36px + 86px); }
  .page-hero { padding: 120px 24px 64px; }
  /* CTA pleine largeur sur mobile — plus « app », plus pro */
  .btn-lg { width: 100%; }
}