/* Commun a toutes les pages : couleurs, reset, bouton, en-tete, pied de page noir,
   temoignages qui defilent, revelations au scroll. landing.css, accueil.css et
   article.css ne gardent que ce qui est propre a leur type de page. */
:root{
  --noir:#0D0D0D; --corail:#E24A5C; --corail-fonce:#B53B4A;
  --ivoire:#F7F2EA; --creme:#FDFBF7; --taupe:#CFC6BA; --rose:#FDDFE3;
  --texte:#2B2723; --gris:#6E665C; --max:1140px;
}
*{box-sizing:border-box}
.btn{display:inline-block;background:var(--corail);color:#fff;text-decoration:none;
     font-weight:700;font-size:1.06rem;padding:17px 36px;border-radius:999px;
     box-shadow:0 8px 24px rgba(226,74,92,.28);transition:.18s}
.btn:hover{background:var(--corail-fonce);transform:translateY(-2px)}

/* en-tete : logo, baseline, reseaux, nav, CTA. Les tailles sont dans chaque feuille de type. */
header.site{position:sticky;top:0;z-index:10;background:var(--creme)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between}
.header-brand{display:flex;align-items:center;gap:16px}
.header-brand a{flex-shrink:0;display:block}
.header-brand img.logo-mark{width:auto;display:block;flex-shrink:0}
.baseline-tag:empty{display:none}
.social-links{display:flex;align-items:center;gap:10px}
.social-links a{color:var(--gris);display:flex}
nav a{text-decoration:none;white-space:nowrap}
nav a.cta{font-weight:700;padding:11px 22px;font-size:.94rem}

/* pied de page noir (accueil, blog, cgv, mentions) */
footer.site{background:var(--noir);color:var(--creme);padding:34px 0 40px;font-size:.85rem}
footer.site .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:center}
footer.site a{color:var(--creme);opacity:.8;text-decoration:none;font-size:.85rem}
footer.site .baseline{font-family:"Playfair Display",serif;font-style:italic;opacity:.85}
footer.site .footer-links a{margin:0 0 0 18px}
@media(max-width:600px){
  footer.site .wrap{justify-content:center;text-align:center}
  footer.site .baseline{width:100%;text-align:center;margin:0 0 6px}
  footer.site .footer-links a{margin:0 9px}
}

/* temoignages qui defilent (accueil, landings) ; page.js lance l'animation quand la bande est visible */
.marquee{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.marquee-track{display:flex;gap:20px;width:max-content;animation:marquee 60s linear infinite;animation-play-state:paused}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.marquee-track{animation:none}}
.temoin-card{background:#fff;border:1px solid var(--taupe);border-radius:14px;padding:22px 24px;width:300px;flex:0 0 auto}
.temoin-card .head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.temoin-card .head img{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:none}
.temoin-card p{font-size:.9rem;color:var(--texte);margin:0;line-height:1.55}
.temoin-card .who{font-size:.8rem;font-weight:700;color:var(--corail-fonce)}
.temoin-card .avatar-init{width:42px;height:42px;border-radius:50%;background:var(--corail);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem;flex:none}
.temoin-card .tp-badge{display:block;font-size:.72rem;color:#00b67a;font-weight:700;margin-top:2px;text-decoration:none}
.temoin-card .tp-badge:hover{text-decoration:underline}
@media(max-width:900px){
  /* au doigt, un carrousel natif a la place du defilement automatique */
  .marquee{overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 26px 12px;scrollbar-width:none;-webkit-mask-image:none;mask-image:none}
  .marquee::-webkit-scrollbar{display:none}
  .marquee-track{animation:none;gap:14px}
  .temoin-card{width:min(300px,78vw);scroll-snap-align:start}
}

/* revelations douces au scroll (page.js pose .reveal puis .in) */
@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
  .reveal.in{opacity:1;transform:none}
  .mysteres .mc{opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease}
  .mysteres.in .mc{opacity:1;transform:none}
}