/* components.css — Éléments présents sur toutes les pages (via cadre.php) :
   barre d'infos, en-tête ancré, tiroir mobile, pied de page, bouton haut —
   plus les sections réutilisées sur plusieurs pages (manifeste, axes,
   chiffres, don, newsletter). */

/* ---------- Barre d'informations ---------- */
.topbar { background: var(--encre); color: rgba(251,246,241,.8); font-size: .8rem; }
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 8px 0; }
.tb-info { display: flex; gap: 20px; flex-wrap: wrap; }
.tb-info span { display: inline-flex; align-items: center; gap: 6px; }
.tb-info svg { width: 13px; height: 13px; color: var(--teal); }
.tb-social { display: flex; gap: 4px; }
.tb-social a { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; transition: var(--t); }
.tb-social a:hover { background: var(--rose); color: #fff; }
.tb-social svg { width: 14px; height: 14px; }
@media (max-width: 780px) { .tb-info span:nth-child(n+2) { display: none; } }

/* ---------- En-tête / navigation (ancrée) ---------- */
.nav { position: sticky; top: 0; z-index: 60; background: var(--creme); border-bottom: 1px solid var(--ligne); transition: box-shadow var(--t), background var(--t); }
.nav.scrolled { box-shadow: 0 8px 30px -22px rgba(46,20,40,.55); background: rgba(251,246,241,.97); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.nav .wrap { display: flex; align-items: center; gap: 24px; padding: 14px 0; }
.brand { display: flex; align-items: center; }
.brand-logo { height: 46px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 32px; margin-left: auto; }
.nav-links a { font-weight: 500; font-size: .95rem; position: relative; padding: 6px 0; }
.nav-links a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--deg-135); transition: width var(--t); border-radius: 2px; }
.nav-links a:hover::after, .nav-links a.current::after { width: 100%; }
.nav-links a.current { color: var(--rose-prof); }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.burger { display: none; width: 44px; height: 44px; border: 1px solid var(--ligne); border-radius: 12px; background: transparent; cursor: pointer; flex-direction: column; gap: 5px; align-items: center; justify-content: center; }
.burger span { width: 22px; height: 2px; background: var(--encre); border-radius: 2px; transition: var(--t); }
@media (max-width: 940px) { .nav-links { display: none; } .nav-actions .btn--sm { display: none; } .burger { display: flex; } .nav .wrap { padding: 12px 0; justify-content: space-between; } .brand-logo { height: 42px; } }

/* ---------- Tiroir mobile ---------- */
.nav-overlay { position: fixed; inset: 0; background: rgba(30,24,32,.5); opacity: 0; visibility: hidden; transition: var(--t); z-index: 70; }
.nav-overlay.on { opacity: 1; visibility: visible; }
.mobile-menu { position: fixed; top: 0; right: 0; height: 100%; width: min(86vw, 330px); background: var(--creme); z-index: 80; padding: 26px; transform: translateX(100%); transition: transform var(--t); box-shadow: var(--ombre); display: flex; flex-direction: column; gap: 4px; }
.mobile-menu.on { transform: none; }
.mm-close { align-self: flex-end; width: 42px; height: 42px; border: 1px solid var(--ligne); background: transparent; border-radius: 50%; cursor: pointer; display: grid; place-items: center; margin-bottom: 12px; }
.mm-close svg { width: 20px; height: 20px; }
.mm-links { display: flex; flex-direction: column; gap: 4px; }
.mm-links a:not(.btn) { padding: 15px 4px; font-family: var(--display); font-weight: 600; font-size: 1.3rem; border-bottom: 1px solid var(--ligne); color: var(--encre); }
.mm-links a:not(.btn).current { color: var(--rose-prof); }
.mm-links .btn { margin-top: 16px; justify-content: center; }

/* ---------- Pied de page ---------- */
.foot { background: var(--encre); color: rgba(251,246,241,.72); padding: clamp(52px,6vw,76px) 0 26px; }
.foot-cta { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding-bottom: 38px; margin-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,.12); }
.foot-cta h3 { color: var(--creme); font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.1rem); letter-spacing: -.02em; }
.foot-cta p { font-size: .92rem; margin-top: 6px; }
.foot-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1.3fr; gap: 38px; }
.foot .logo-carte { background: var(--creme); border-radius: 14px; padding: 12px 16px; display: inline-block; margin-bottom: 18px; }
.foot .logo-carte img { height: 42px; width: auto; }
.foot .desc { font-size: .88rem; max-width: 34ch; }
.foot-social { display: flex; gap: 8px; margin-top: 18px; }
.foot-social a { width: 38px; height: 38px; border-radius: 11px; border: 1px solid rgba(255,255,255,.16); display: grid; place-items: center; transition: var(--t); }
.foot-social a:hover { background: var(--deg-135); border-color: transparent; transform: translateY(-3px); }
.foot-social svg { width: 16px; height: 16px; }
.foot h4 { font-family: var(--corps); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--creme); font-weight: 600; margin-bottom: 16px; }
.foot ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.foot ul a, .foot ul li { font-size: .88rem; transition: color var(--t); }
.foot ul a:hover { color: var(--teal); }
.foot-contact ul li { display: flex; align-items: flex-start; gap: 9px; }
.foot-contact ul li svg { width: 15px; height: 15px; color: var(--teal); flex: none; margin-top: 2px; }
.foot-news { display: flex; background: rgba(255,255,255,.07); border-radius: 100px; padding: 5px; margin-top: 16px; }
.foot-news input { flex: 1; min-width: 0; background: transparent; border: none; color: var(--creme); padding: 10px 14px; font-family: var(--corps); font-size: .84rem; }
.foot-news input:focus { outline: none; }
.foot-news input::placeholder { color: rgba(251,246,241,.5); }
.foot-news button { border: none; background: var(--rose); color: #fff; width: 42px; border-radius: 100px; cursor: pointer; display: grid; place-items: center; flex: none; }
.foot-news button svg { width: 16px; height: 16px; }
.foot-partenaires { display: flex; gap: 14px 18px; align-items: baseline; flex-wrap: wrap; margin-top: 44px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.12); }
.fp-label { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(251,246,241,.5); font-weight: 600; flex: none; }
.fp-noms { font-size: .86rem; color: rgba(251,246,241,.72); }
.foot-bottom { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); font-size: .8rem; }
.foot-legal { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.foot-legal a { transition: color var(--t); }
.foot-legal a:hover { color: var(--teal); }
.foot-legal a:last-child { color: var(--teal); }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }

/* ---------- Bouton retour en haut ---------- */
.to-top { position: fixed; right: 20px; bottom: 20px; width: 48px; height: 48px; border-radius: 15px; background: var(--encre); color: var(--creme); border: none; cursor: pointer; z-index: 50; display: grid; place-items: center; box-shadow: var(--ombre); opacity: 0; visibility: hidden; transform: translateY(12px); transition: var(--t); }
.to-top.on { opacity: 1; visibility: visible; transform: none; }
.to-top svg { width: 20px; height: 20px; }
.to-top:hover { background: var(--rose); }


/* ===== Sections réutilisées ===== */
/* ---- MANIFESTE (à propos) : structure volontairement différente du hero ---- */
.manifeste { background: var(--encre); color: var(--creme); overflow: hidden; position: relative; }
.manifeste .pointille {
  position: absolute; inset: 0; z-index: 0; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.09) 1.2px, transparent 1.2px); background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 80% 20%, #000, transparent 70%);
  mask-image: radial-gradient(ellipse 70% 80% at 80% 20%, #000, transparent 70%);
}
.manifeste .wrap { position: relative; z-index: 1; }
.mani-grille { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(34px, 5vw, 70px); align-items: center; }
.mani-txt .eyebrow { color: var(--teal); }
.mani-txt .eyebrow::before { background: var(--teal); }
.mani-txt .titre { color: var(--creme); }
.mani-txt p { color: rgba(251,246,241,.72); margin-top: 18px; max-width: 52ch; }
.mani-axes { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; }
.chip { font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; padding: 8px 14px; border-radius: 100px; border: 1px solid rgba(255,255,255,.2); color: rgba(251,246,241,.9); }
.chip b { color: var(--teal); font-weight: 700; }
.mani-media { position: relative; }
.mani-media .cadre { position: relative; border-radius: var(--rayon-lg); overflow: hidden; box-shadow: var(--ombre); }
.mani-media .cadre img { width: 100%; aspect-ratio: 4/4.7; object-fit: cover; }
.mani-media .cadre::after { content: ""; position: absolute; inset: 0; background: linear-gradient(150deg, rgba(255,79,157,.14), transparent 45%, rgba(158,217,223,.2)); mix-blend-mode: screen; }
.mani-media .liseret { position: absolute; inset: -1.5px; border-radius: calc(var(--rayon-lg) + 1.5px); padding: 1.5px; background: var(--deg-135); z-index: -1; }
.mani-media .chip-an {
  position: absolute; right: -14px; bottom: 24px; background: var(--creme); color: var(--encre);
  border-radius: 16px; padding: 12px 18px; box-shadow: var(--ombre-sm); display: flex; align-items: center; gap: 11px;
}
.mani-media .chip-an .pt { width: 40px; height: 40px; border-radius: 11px; background: var(--deg-135); display: grid; place-items: center; color: #fff; }
.mani-media .chip-an .an { font-family: var(--display); font-weight: 800; font-size: 1.2rem; line-height: 1; }
.mani-media .chip-an .lg { font-family: var(--mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-doux); margin-top: 2px; }
@media (max-width: 880px) { .mani-grille { grid-template-columns: 1fr; } .mani-media { max-width: 440px; } .mani-media .chip-an { right: 6px; } }

/* ---- AXES (cartes) ---- */
.axes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.axe {
  background: #fff; border: 1px solid var(--ligne); border-radius: var(--rayon-lg); padding: 28px 26px;
  position: relative; overflow: hidden; transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.axe::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: var(--deg-135); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity var(--t); }
.axe:hover { transform: translateY(-7px); box-shadow: var(--ombre); border-color: transparent; }
.axe:hover::after { opacity: 1; }
.axe .ic { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; color: #fff; background: var(--deg-135); margin-bottom: 18px; }
.axe .ic svg { width: 25px; height: 25px; }
.axe .num { position: absolute; top: 22px; right: 24px; font-family: var(--mono); font-size: .74rem; color: var(--encre-doux); letter-spacing: .05em; }
.axe h4 { font-size: 1.28rem; margin-bottom: 9px; letter-spacing: -.02em; }
.axe p { font-size: .92rem; color: var(--encre-doux); }
@media (max-width: 900px) { .axes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .axes { grid-template-columns: 1fr; } }

/* ---- CHIFFRES ---- */
.chiffres { background: var(--encre); color: var(--creme); position: relative; overflow: hidden; }
.chiffres .aura-min { position: absolute; width: 500px; height: 500px; border-radius: 50%; filter: blur(90px); opacity: .3; background: radial-gradient(circle, var(--rose), transparent 60%); bottom: -240px; left: 10%; z-index: 0; }
.chiffres .wrap { position: relative; z-index: 1; }
.chiffres .eyebrow { color: var(--teal); } .chiffres .eyebrow::before { background: var(--teal); }
.chiffres .titre { color: var(--creme); }
.ch-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 52px; }
.ch { padding: 22px 12px; position: relative; }
.ch + .ch::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: rgba(255,255,255,.13); }
.ch .ic { width: 40px; height: 40px; color: var(--teal); margin-bottom: 14px; }
.ch .ic svg { width: 100%; height: 100%; }
.ch .n { font-family: var(--display); font-weight: 800; font-size: clamp(2.4rem, 1.4rem + 3vw, 3.5rem); letter-spacing: -.04em; line-height: 1; }
.ch .n .u { color: var(--rose); }
.ch .l { font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(251,246,241,.65); margin-top: 10px; }
@media (max-width: 720px) { .ch-grille { grid-template-columns: 1fr 1fr; gap: 8px; } .ch:nth-child(odd)::before { display: none; } }

/* ---- DON ---- */
.don { position: relative; color: var(--creme); overflow: hidden; }
.don .fond { position: absolute; inset: 0; z-index: -2; }
.don .fond img { width: 100%; height: 100%; object-fit: cover; }
.don .fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(30,24,32,.95) 28%, rgba(201,55,123,.8)); }
.don .wrap { position: relative; text-align: center; padding: clamp(72px, 9vw, 130px) 0; }
.don .eyebrow { color: var(--teal); justify-content: center; } .don .eyebrow::before { background: var(--teal); }
.don h2 { font-size: clamp(2.3rem, 1.3rem + 3.6vw, 3.8rem); margin: 16px auto 0; max-width: 18ch; letter-spacing: -.03em; }
.don p { max-width: 56ch; margin: 18px auto 30px; color: rgba(251,246,241,.85); }
.don .note { font-family: var(--mono); font-size: .72rem; margin-top: 16px; opacity: .7; }

/* ---- NEWSLETTER ---- */
.news { background: var(--wash-teal); border-radius: var(--rayon-xl); padding: clamp(38px, 5vw, 62px); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 40px; align-items: center; }
.news > div { min-width: 0; }
.news h3 { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.7rem); letter-spacing: -.03em; }
.news p { color: var(--encre-doux); margin-top: 12px; font-size: .96rem; }
.news-form { display: flex; gap: 8px; background: #fff; padding: 7px; border-radius: 100px; box-shadow: var(--ombre-sm); }
.news-form input { flex: 1; border: none; background: transparent; padding: 12px 18px; font-family: var(--corps); font-size: .95rem; }
.news-form input:focus { outline: none; }
.news-note { font-family: var(--mono); font-size: .68rem; letter-spacing: .03em; color: var(--encre-doux); margin-top: 12px; display: flex; align-items: center; gap: 7px; }
.news-note svg { width: 13px; height: 13px; }
.news-form input, .foot-news input { min-width: 0; }
@media (max-width: 780px) { .news { grid-template-columns: minmax(0,1fr); gap: 22px; } }
@media (max-width: 480px) {
  .news-form { flex-direction: column; }
  .news-form input { width: 100%; min-width: 0; }
  .news-form .btn { width: 100%; justify-content: center; }
}

/* Statut de la newsletter (pied de page sombre) */
.foot-news { flex-wrap: wrap; }
.foot-news .form-statut { flex: 1 1 100%; margin: 8px 8px 2px; font-size: .78rem; }
.foot-news .form-statut[data-ok="1"] { color: var(--teal); }
.foot-news .form-statut[data-ok="0"] { color: #ff9ec4; }

/* Statut d'envoi dans la pilule newsletter (section claire) */
.news-form { flex-wrap: wrap; }
.news-form .form-statut { flex: 1 1 100%; margin: 4px 12px 2px; }