/* ==========================================================================
   revealsme — couche visuelle "enhance"
   Purement additive : aucune structure, aucune couleur de marque modifiée.
   Palette conservée : --bg #F5F1E8 · --rose #7A3E46 · --or #A8795D · --em #60705F
   ========================================================================== */

:root {
  --grad-brand: linear-gradient(135deg, #7A3E46 0%, #93524F 45%, #A8795D 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(122, 62, 70, .10), rgba(168, 121, 93, .10));
  --grad-surface: linear-gradient(165deg, #FDFBF6 0%, #FBF8F1 55%, #F3EEE3 100%);
  --grad-line: linear-gradient(90deg, transparent, rgba(122, 62, 70, .28), rgba(168, 121, 93, .22), transparent);
  --glow-rose: 0 14px 34px -14px rgba(122, 62, 70, .45);
  --glow-soft: 0 18px 50px -22px rgba(33, 30, 26, .28);
}

/* --- Ambiance : halos très doux, fixés derrière le contenu ---------------- */
body::before {
  content: "";
  position: fixed;
  inset: -20vh -10vw;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(52vw 42vw at 12% -6%, rgba(122, 62, 70, .11), transparent 62%),
    radial-gradient(46vw 40vw at 92% 8%, rgba(168, 121, 93, .13), transparent 64%),
    radial-gradient(60vw 48vw at 50% 108%, rgba(96, 112, 95, .10), transparent 66%);
  filter: blur(4px);
  animation: rmDrift 24s var(--ease, ease-in-out) infinite alternate;
}

@keyframes rmDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(0, -2.2%, 0) scale(1.05); }
}

/* Le contenu reste au-dessus du halo */
nav, header, main, footer, section, .wrap, .hero { position: relative; z-index: 1; }

/* --- Navigation : verre teinté ------------------------------------------- */
nav {
  background: linear-gradient(180deg, rgba(251, 248, 241, .92), rgba(245, 241, 232, .82));
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid transparent;
  border-image: var(--grad-line) 1;
}
.logo em {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- Titres : dégradé d'encre -------------------------------------------- */
h1, h2.big {
  background: linear-gradient(120deg, #211E1A 0%, #4A3A36 58%, #7A3E46 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
h1 span, h2.big span {
  background: linear-gradient(120deg, #8C8177, #A8795D);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- Badges / eyebrow ----------------------------------------------------- */
.eyebrow, .plan .tag {
  background: var(--grad-brand-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
.eyebrow { border-color: rgba(122, 62, 70, .3); }

/* --- Boutons -------------------------------------------------------------- */
.cta {
  position: relative;
  overflow: hidden;
  background: var(--grad-brand);
  border-color: rgba(122, 62, 70, .9);
  box-shadow: var(--glow-rose);
  transition: transform .2s var(--ease, ease), box-shadow .25s var(--ease, ease), filter .25s ease;
}
.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 249, 243, .3) 48%, transparent 74%);
  transform: translateX(-130%);
  transition: transform .7s var(--ease, ease);
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 20px 42px -16px rgba(122, 62, 70, .55); }
.cta:hover::after { transform: translateX(130%); }
.cta:active { transform: translateY(0); }
.cta.ghost {
  background: linear-gradient(160deg, rgba(255, 255, 255, .85), rgba(234, 228, 216, .55));
  box-shadow: 0 8px 22px -16px rgba(33, 30, 26, .5);
}
.cta.ghost:hover { border-color: rgba(122, 62, 70, .35); }

/* --- Cartes et surfaces --------------------------------------------------- */
.card, .plan, .proof, .nope div {
  position: relative;
  background-image: var(--grad-surface);
  box-shadow: var(--glow-soft);
  transition: transform .28s var(--ease, ease), box-shadow .28s var(--ease, ease), border-color .28s ease;
}
.card::before, .plan::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--grad-line);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .28s ease;
  pointer-events: none;
}
.card:hover, .plan:hover { transform: translateY(-3px); box-shadow: 0 26px 60px -26px rgba(122, 62, 70, .35); }
.card:hover::before, .plan:hover::before { opacity: 1; }

.card .ic {
  background: var(--grad-brand-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}

.plan.feature {
  background-image: linear-gradient(165deg, #FDFAF4 0%, #FBF6EC 60%, #F5EDE1 100%);
  box-shadow: 0 24px 60px -28px rgba(122, 62, 70, .45);
}
.plan.feature::before { opacity: .9; }

/* --- Séparateurs de sections --------------------------------------------- */
section, .rule { border-top-color: transparent; }
section::before, .rule::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--grad-line);
}
.rule { position: relative; }

/* --- Démo de chiffrement -------------------------------------------------- */
.proof textarea, .cipher {
  background-image: linear-gradient(160deg, rgba(234, 228, 216, .85), rgba(245, 241, 232, .7));
}
.cipher {
  background-image: linear-gradient(160deg, rgba(96, 112, 95, .09), rgba(234, 228, 216, .8));
}

/* --- Visuels -------------------------------------------------------------- */
img[src*="coffre"] {
  filter: drop-shadow(0 26px 46px rgba(122, 62, 70, .28));
  transition: transform .5s var(--ease, ease), filter .5s ease;
}
img[src*="coffre"]:hover { transform: translateY(-4px) scale(1.012); }

/* --- Pied de page ---------------------------------------------------------- */
footer {
  position: relative;
  background-image: linear-gradient(180deg, rgba(245, 241, 232, 0), rgba(234, 228, 216, .55));
}

/* --- Liens de contenu ------------------------------------------------------ */
main a:not(.cta):not(.logo), section p a, footer a {
  background-image: linear-gradient(90deg, rgba(122, 62, 70, .5), rgba(168, 121, 93, .5));
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .25s ease, color .25s ease;
}
main a:not(.cta):not(.logo):hover, footer a:hover { background-size: 100% 2px; }

/* --- Accessibilité --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .cta, .card, .plan, img[src*="coffre"] { transition: none; }
  .cta:hover, .card:hover, .plan:hover, img[src*="coffre"]:hover { transform: none; }
}

/* ==========================================================================
   Footer professionnel — structure complète (aucune modification du texte)
   ========================================================================== */

.site-footer {
  position: relative;
  margin-top: 0;
  padding: 64px 0 40px;
  background:
    linear-gradient(180deg, rgba(245, 241, 232, 0) 0%, rgba(234, 228, 216, .5) 30%, rgba(228, 220, 205, .62) 100%);
  border-top: 1px solid transparent;
  color: var(--t2);
  font-size: 14px;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--grad-line);
}
.site-footer::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 220px;
  pointer-events: none;
  background: radial-gradient(60% 100% at 50% 100%, rgba(122, 62, 70, .07), transparent 70%);
}
.site-footer > .shell,
.site-footer > .wrap { position: relative; z-index: 1; }

/* Bloc marque */
.site-footer .brand-foot {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 14px;
  max-width: 460px;
  padding-bottom: 34px;
}
.site-footer .brand-foot img {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  padding: 4px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .9), rgba(234, 228, 216, .7));
  box-shadow: 0 8px 22px -12px rgba(33, 30, 26, .5);
}
.site-footer .brand-foot strong {
  display: block;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--t1);
  margin-bottom: 6px;
}
.site-footer .brand-foot span {
  display: block;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--t2);
}

/* Colonnes de liens */
.site-footer .foot-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px 28px;
  margin: 0 0 36px;
  padding: 32px 0;
  border-top: 1px solid rgba(216, 208, 194, .8);
  border-bottom: 1px solid rgba(216, 208, 194, .8);
}
.site-footer .foot-col { display: flex; flex-direction: column; gap: 10px; }
.site-footer .foot-col h4 {
  margin: 0 0 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t3);
}
.site-footer .foot-col a {
  position: relative;
  width: fit-content;
  font-size: 14px;
  line-height: 1.45;
  color: var(--t2);
  background: none;
  border: 0;
  transition: color .2s ease, transform .2s ease;
}
.site-footer .foot-col a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 1px;
  width: 0;
  background: var(--grad-brand);
  transition: width .25s var(--ease, ease);
}
.site-footer .foot-col a:hover { color: var(--rose); transform: translateX(2px); }
.site-footer .foot-col a:hover::after { width: 100%; }

/* Bandeau bas */
.site-footer .foot-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
}
.site-footer .foot-bottom p {
  margin: 0;
  max-width: 620px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--t3);
}
.site-footer .foot-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.site-footer .foot-meta a {
  display: inline-flex;
  align-items: center;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid rgba(216, 208, 194, .9);
  background: linear-gradient(160deg, rgba(255, 255, 255, .85), rgba(245, 241, 232, .6));
  font-size: 13px;
  font-weight: 600;
  color: var(--t2);
  transition: color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.site-footer .foot-meta a:hover {
  color: var(--rose);
  border-color: rgba(122, 62, 70, .35);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -14px rgba(122, 62, 70, .6);
}
.site-footer .foot-meta a:last-child {
  background: var(--grad-brand);
  border-color: transparent;
  color: #FFF9F3;
  box-shadow: var(--glow-rose);
}
.site-footer .foot-meta a:last-child:hover { color: #FFF9F3; }

@media (max-width: 860px) {
  .site-footer .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; }
}
@media (max-width: 520px) {
  .site-footer { padding: 46px 0 34px; }
  .site-footer .foot-grid { grid-template-columns: 1fr; }
  .site-footer .foot-bottom { flex-direction: column; align-items: flex-start; }
  .site-footer .foot-meta { margin-left: 0; }
}

/* ==========================================================================
   Cartes — matière, profondeur, hiérarchie
   ========================================================================== */

.card, .plan, .linkcard, .proof, .nope div {
  border-radius: 18px;
  border: 1px solid rgba(216, 208, 194, .9);
  background-image: var(--grad-surface);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 16px 40px -26px rgba(33, 30, 26, .45);
}
.card, .linkcard { overflow: hidden; }
.card::after, .linkcard::after {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 1px;
  background: var(--grad-line);
  opacity: .55;
}
.linkcard { position: relative; transition: transform .28s var(--ease, ease), box-shadow .28s var(--ease, ease), border-color .28s ease; }
.linkcard:hover {
  transform: translateY(-3px);
  border-color: rgba(122, 62, 70, .3);
  box-shadow: 0 26px 55px -28px rgba(122, 62, 70, .45);
}
.linkcard strong { letter-spacing: -.015em; }

.card h3 { letter-spacing: -.02em; }
.num, .step .n { color: var(--rose); }
.step .n {
  background: var(--grad-brand-soft);
  border-color: rgba(122, 62, 70, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}

.quote {
  border-left: 3px solid transparent;
  border-image: linear-gradient(180deg, #7A3E46, #A8795D) 1 100%;
  background-image: linear-gradient(120deg, rgba(122, 62, 70, .07), rgba(168, 121, 93, .04));
}
.note { background-image: linear-gradient(120deg, rgba(122, 62, 70, .06), rgba(168, 121, 93, .03)); }
.note.warn { background-image: linear-gradient(120deg, rgba(168, 121, 93, .08), rgba(122, 62, 70, .03)); }

/* Conteneur du footer : garantit la gouttière même sans site-content.css */
.site-footer .shell,
.site-footer .wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding-left: 22px;
  padding-right: 22px;
}

/* Brand integrity: the REVEALSME mark is static. It never inherits reveal/glow animations. */
.brand-mark, .app-brand-mark, .brand-foot img, .logo-mark, img[src*="revealsme-mark"], img[src*="logo-pack"] {
  animation: none !important;
  transform: none;
}

/* ==========================================================================
   V12 — PREMIUM VISUAL SYSTEM
   Direction artistique : mémoire nocturne + papier précieux
   Couche esthétique uniquement. Aucun sélecteur métier, aucune logique JS.
   ========================================================================== */

:root {
  --rm-ink: #211E1A;
  --rm-rose: #7A3E46;
  --rm-terracotta: #A8795D;
  --rm-paper: #F5F1E8;
  --rm-surface: #FBF8F1;
  --rm-surface-2: #EAE4D8;
  --rm-line: #D8D0C2;
  --rm-shadow-xs: 0 1px 2px rgba(33,30,26,.05), 0 5px 15px rgba(33,30,26,.035);
  --rm-shadow-sm: 0 10px 28px -18px rgba(33,30,26,.32), 0 1px 0 rgba(255,255,255,.72) inset;
  --rm-shadow-md: 0 24px 60px -30px rgba(33,30,26,.36), 0 2px 0 rgba(255,255,255,.52) inset;
  --rm-shadow-rose: 0 28px 65px -30px rgba(122,62,70,.48), 0 2px 0 rgba(255,255,255,.42) inset;
  --rm-brand: linear-gradient(135deg, #6E3740 0%, #7A3E46 38%, #9B6357 72%, #A8795D 100%);
  --rm-brand-soft: linear-gradient(135deg, rgba(122,62,70,.11), rgba(168,121,93,.085));
  --rm-paper-gradient: linear-gradient(145deg, rgba(255,255,255,.78) 0%, rgba(251,248,241,.96) 42%, rgba(239,233,222,.86) 100%);
  --rm-paper-gradient-deep: linear-gradient(145deg, #FCFAF5 0%, #F7F1E7 55%, #EDE4D7 100%);
}

/* Atmosphère globale : plusieurs couches lumineuses, sans modifier le fond de marque. */
body::before {
  background:
    radial-gradient(42vw 34vw at 8% -2%, rgba(122,62,70,.13), transparent 70%),
    radial-gradient(38vw 34vw at 95% 6%, rgba(168,121,93,.15), transparent 72%),
    radial-gradient(52vw 30vw at 52% 107%, rgba(96,112,95,.095), transparent 72%);
  filter: blur(7px) saturate(108%);
  opacity: .92;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.09), transparent 18%, transparent 82%, rgba(122,62,70,.025)),
    radial-gradient(80% 40% at 50% 0%, rgba(255,255,255,.12), transparent 75%);
  mix-blend-mode: normal;
}

/* Header / navigation : verre chaud + ligne de lumière. */
nav,
header {
  box-shadow: 0 10px 30px -25px rgba(33,30,26,.42), 0 1px 0 rgba(255,255,255,.55) inset;
}
nav::after,
header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(122,62,70,.22), rgba(168,121,93,.28), transparent);
  pointer-events: none;
}
.navbar,
header .wrap {
  position: relative;
}
.navlinks a:not(.cta) {
  position: relative;
  transition: color .22s ease, transform .22s var(--ease, ease);
}
.navlinks a:not(.cta)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -7px;
  height: 1px;
  background: var(--rm-brand);
  transition: right .26s var(--ease, ease);
}
.navlinks a:not(.cta):hover { transform: translateY(-1px); }
.navlinks a:not(.cta):hover::after { right: 0; }

/* Hero : halo local derrière le titre. */
.hero {
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  width: min(760px, 92vw);
  height: min(430px, 58vw);
  left: 50%;
  top: 4%;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 35% 45%, rgba(122,62,70,.12), transparent 58%),
    radial-gradient(ellipse at 72% 36%, rgba(168,121,93,.11), transparent 60%);
  filter: blur(16px);
}
.hero h1 {
  text-wrap: balance;
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
}
.hero p.lede { text-wrap: pretty; }

/* CTA premium : lumière diagonale + profondeur sans néon. */
.cta {
  isolation: isolate;
  box-shadow: var(--rm-shadow-rose);
  background: var(--rm-brand);
  border-color: rgba(110,55,64,.92);
  text-shadow: 0 1px 1px rgba(33,30,26,.16);
}
.cta::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.19), rgba(255,255,255,0) 48%);
  pointer-events: none;
  z-index: -1;
}
.cta::after {
  background: linear-gradient(105deg, transparent 12%, rgba(255,248,243,.08) 38%, rgba(255,255,255,.34) 50%, rgba(255,248,243,.07) 62%, transparent 88%);
}
.cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 32px 72px -31px rgba(122,62,70,.58), 0 2px 0 rgba(255,255,255,.48) inset;
  filter: saturate(1.04) brightness(1.015);
}
.cta.ghost {
  background: linear-gradient(150deg, rgba(255,255,255,.82), rgba(245,241,232,.55));
  border-color: rgba(216,208,194,.92);
  color: var(--t1);
}
.cta.ghost:hover {
  box-shadow: 0 20px 42px -26px rgba(33,30,26,.36), 0 1px 0 rgba(255,255,255,.9) inset;
}

/* Badges : petite matière éditoriale. */
.eyebrow,
.plan .tag {
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 24px -20px rgba(122,62,70,.58), 0 1px 0 rgba(255,255,255,.82) inset;
}
.eyebrow::after,
.plan .tag::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 10%, rgba(255,255,255,.28) 50%, transparent 88%);
  transform: translateX(-120%);
  animation: rmSheen 8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes rmSheen {
  0%, 72%, 100% { transform: translateX(-120%); }
  84% { transform: translateX(120%); }
}

/* Cartes : matériau, rebond lumineux et hover plus précis. */
.card,
.plan,
.linkcard,
.proof,
.nope div,
.setting-card,
.coach-sidebar,
.coach-main,
.modal,
.drawer {
  background-image: var(--rm-paper-gradient);
  border-color: rgba(216,208,194,.84);
  box-shadow: var(--rm-shadow-sm);
}
.card::before,
.plan::before,
.linkcard::before,
.setting-card::before {
  opacity: .28;
  background: linear-gradient(135deg, rgba(255,255,255,.8), transparent 36%, rgba(122,62,70,.06) 100%);
  -webkit-mask: none;
  mask: none;
  padding: 0;
  border-radius: inherit;
}
.card::after,
.linkcard::after {
  left: 18px;
  right: 18px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), rgba(168,121,93,.12), transparent);
  opacity: .62;
}
.card:hover,
.plan:hover,
.linkcard:hover,
.setting-card:hover {
  transform: translateY(-5px);
  border-color: rgba(122,62,70,.24);
  box-shadow: var(--rm-shadow-md);
}
.card:hover::after,
.linkcard:hover::after {
  opacity: 1;
}
.plan.feature {
  background-image: var(--rm-paper-gradient-deep);
  border-color: rgba(122,62,70,.32);
  box-shadow: var(--rm-shadow-rose);
}
.plan.feature::before { opacity: .9; }

/* Icônes, numéros, petits éléments de UI. */
.card .ic,
.step .n,
.icon-action,
.switch {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 7px 20px -16px rgba(122,62,70,.44);
}
.card .ic,
.step .n {
  background: var(--rm-brand-soft);
  border: 1px solid rgba(122,62,70,.10);
}
.icon-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -18px rgba(122,62,70,.5), 0 1px 0 rgba(255,255,255,.7) inset;
}

/* Preuve/chiffrement et zones techniques. */
.proof {
  position: relative;
  overflow: hidden;
}
.proof::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 120% at 0 0, rgba(122,62,70,.075), transparent 60%);
  pointer-events: none;
}
.proof textarea,
.cipher,
input,
textarea,
select {
  box-shadow: inset 0 1px 0 rgba(33,30,26,.045), inset 0 -1px 0 rgba(255,255,255,.5);
}
.proof textarea:focus,
input:focus,
textarea:focus,
select:focus {
  box-shadow: 0 0 0 3px rgba(122,62,70,.10), inset 0 1px 0 rgba(255,255,255,.5);
}

/* Sections : alternance de lumière très subtile. */
section:nth-of-type(even) {
  background-image: linear-gradient(180deg, rgba(234,228,216,.12), rgba(245,241,232,0));
}
section::before,
.rule::before {
  background: linear-gradient(90deg, transparent 4%, rgba(122,62,70,.20) 32%, rgba(168,121,93,.20) 68%, transparent 96%);
}

/* Quotes / notes : aspect feuille éditoriale. */
.quote,
.note,
.care {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 18px 42px -30px rgba(33,30,26,.28);
}
.quote { position: relative; overflow: hidden; }
.quote::after,
.note::after,
.care::after {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  right: -80px;
  top: -80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168,121,93,.08), transparent 68%);
  pointer-events: none;
}

/* Footer : véritable zone de marque, plus architecturée. */
.site-footer {
  isolation: isolate;
  overflow: hidden;
  margin-top: 28px;
  padding: 78px 0 42px;
  background:
    radial-gradient(40% 80% at 88% 100%, rgba(168,121,93,.10), transparent 70%),
    radial-gradient(38% 90% at 8% 10%, rgba(122,62,70,.075), transparent 72%),
    linear-gradient(180deg, rgba(245,241,232,.14) 0%, rgba(234,228,216,.72) 48%, rgba(222,213,200,.82) 100%);
  border-top: 1px solid rgba(216,208,194,.88);
  box-shadow: 0 -20px 60px -55px rgba(33,30,26,.35) inset;
}
.site-footer::before {
  height: 2px;
  background: linear-gradient(90deg, transparent 3%, rgba(122,62,70,.30) 28%, rgba(168,121,93,.34) 72%, transparent 97%);
}
.site-footer::after {
  height: 320px;
  background:
    radial-gradient(55% 80% at 50% 115%, rgba(122,62,70,.105), transparent 72%),
    radial-gradient(22% 50% at 92% 40%, rgba(168,121,93,.07), transparent 70%);
  opacity: .9;
}
.site-footer .brand-foot {
  position: relative;
  max-width: 620px;
  padding: 0 0 34px;
}
.site-footer .brand-foot::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 16px;
  width: min(340px, 70%);
  height: 1px;
  background: linear-gradient(90deg, rgba(122,62,70,.34), rgba(168,121,93,.22), transparent);
}
.site-footer .brand-foot img {
  width: 44px;
  height: 44px;
  padding: 6px;
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(239,233,222,.72));
  box-shadow: 0 13px 30px -18px rgba(33,30,26,.55), 0 1px 0 rgba(255,255,255,.85) inset;
}
.site-footer .brand-foot strong {
  font-size: 18px;
  letter-spacing: -.035em;
}
.site-footer .brand-foot span {
  max-width: 560px;
  line-height: 1.75;
}
.site-footer .foot-grid {
  position: relative;
  grid-template-columns: 1.45fr repeat(3, 1fr);
  gap: 38px 28px;
  margin: 12px 0 28px;
  padding: 36px 0 34px;
  border-top: 1px solid rgba(216,208,194,.72);
  border-bottom: 1px solid rgba(216,208,194,.72);
}
.site-footer .foot-col {
  min-width: 0;
}
.site-footer .foot-col h4 {
  color: var(--rose);
  margin-bottom: 12px;
  font-size: 10px;
  letter-spacing: .16em;
}
.site-footer .foot-col a {
  padding: 3px 0;
  font-size: 13px;
  color: var(--t2);
  transition: color .2s ease, transform .2s var(--ease, ease);
}
.site-footer .foot-col a:hover {
  color: var(--t1);
  transform: translateX(3px);
}
.site-footer .foot-col a::after { bottom: -1px; }
.site-footer .foot-bottom {
  position: relative;
  gap: 22px 34px;
  padding-top: 6px;
}
.site-footer .foot-bottom p {
  max-width: 680px;
  font-size: 11.5px;
}
.site-footer .foot-meta {
  gap: 8px;
}
.site-footer .foot-meta a {
  min-height: 36px;
  padding: 8px 14px;
  background: rgba(255,255,255,.45);
  box-shadow: 0 8px 24px -18px rgba(33,30,26,.36), inset 0 1px 0 rgba(255,255,255,.66);
}
.site-footer .foot-meta a:last-child {
  background: var(--rm-brand);
  box-shadow: 0 16px 34px -18px rgba(122,62,70,.52), inset 0 1px 0 rgba(255,255,255,.20);
}

/* Dark mode : surfaces nocturnes, lumière chaude, sans surcontraste. */
html[data-theme="dark"] body::before,
html.theme-dark body::before {
  opacity: .82;
  background:
    radial-gradient(42vw 34vw at 8% -2%, rgba(122,62,70,.20), transparent 70%),
    radial-gradient(38vw 34vw at 95% 6%, rgba(168,121,93,.14), transparent 72%),
    radial-gradient(52vw 30vw at 52% 107%, rgba(96,112,95,.09), transparent 72%);
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .plan,
html[data-theme="dark"] .linkcard,
html[data-theme="dark"] .proof,
html[data-theme="dark"] .nope div,
html[data-theme="dark"] .setting-card,
html[data-theme="dark"] .coach-sidebar,
html[data-theme="dark"] .coach-main,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .drawer,
html.theme-dark .card,
html.theme-dark .plan,
html.theme-dark .linkcard,
html.theme-dark .proof,
html.theme-dark .nope div,
html.theme-dark .setting-card,
html.theme-dark .coach-sidebar,
html.theme-dark .coach-main,
html.theme-dark .modal,
html.theme-dark .drawer {
  background-image: linear-gradient(145deg, rgba(41,37,33,.98), rgba(35,32,29,.98) 56%, rgba(29,27,24,.99));
  border-color: rgba(126,111,94,.30);
  box-shadow: 0 24px 64px -34px rgba(0,0,0,.74), 0 1px 0 rgba(255,255,255,.035) inset;
}
html[data-theme="dark"] .site-footer,
html.theme-dark .site-footer {
  background:
    radial-gradient(45% 80% at 88% 100%, rgba(168,121,93,.12), transparent 70%),
    radial-gradient(38% 90% at 8% 10%, rgba(122,62,70,.13), transparent 72%),
    linear-gradient(180deg, rgba(27,25,22,.55), #211E1A 100%);
  border-top-color: rgba(126,111,94,.30);
}
html[data-theme="dark"] .site-footer .brand-foot img,
html.theme-dark .site-footer .brand-foot img {
  background: linear-gradient(145deg, rgba(53,47,42,.95), rgba(36,33,29,.95));
  box-shadow: 0 15px 34px -20px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06);
}

/* Logo integrity : jamais de transform/animation, même si un parent reçoit un effet. */
.brand-mark,
.app-brand-mark,
.brand-foot img,
.logo-mark,
img[src*="revealsme-mark"],
img[src*="logo-pack"] {
  animation: none !important;
  transform: none !important;
  filter: none;
}

/* Motion accessible : toutes les animations décoratives restent désactivables. */
@media (prefers-reduced-motion: reduce) {
  body::before,
  .eyebrow::after,
  .plan .tag::after { animation: none !important; }
  .hero::before { filter: blur(11px); }
  .card:hover,
  .plan:hover,
  .linkcard:hover,
  .setting-card:hover,
  .cta:hover,
  .icon-action:hover,
  .site-footer .foot-col a:hover { transform: none !important; }
}

/* Responsive : conserver la densité visuelle sans surcharger les petits écrans. */
@media (max-width: 860px) {
  .site-footer .foot-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hero::before { width: 110vw; height: 420px; }
}
@media (max-width: 620px) {
  body::before { filter: blur(9px); opacity: .72; }
  .hero::before { height: 340px; top: 0; }
  .site-footer { padding-top: 58px; }
  .site-footer .foot-grid { gap: 24px 16px; }
  .site-footer .foot-meta a { flex: 0 1 auto; }
}
@media (max-width: 480px) {
  .site-footer .foot-grid { grid-template-columns: 1fr; }
  .site-footer .brand-foot { gap: 12px; }
  .site-footer .brand-foot img { width: 40px; height: 40px; }
  .card:hover,
  .plan:hover,
  .linkcard:hover { transform: translateY(-2px); }
}


/* V13 — Responsive / Coach / Premium finish */
html,body{width:100%;max-width:100%;overflow-x:clip}body{isolation:isolate}img,svg,video,canvas{max-width:100%}button,a,input,textarea,select{min-width:0}
main,section,header,footer,.screen,.wrap,.shell,.cols,.panel,.coach-shell,.coach-sidebar,.coach-main,.chat,.thread,.settings-shell,.settings-pane{min-width:0}.wrap,.shell{width:100%}
.cols,.coach-shell{width:min(100% - 48px,1180px);margin-inline:auto}@media(max-width:600px){.cols,.coach-shell{width:min(100% - 30px,1180px)}}
.panel,.card,.setting-card,.coach-main,.coach-sidebar{position:relative;overflow:hidden;box-shadow:var(--rm-shadow-md,0 24px 60px -30px rgba(33,30,26,.36)),inset 0 1px 0 rgba(255,255,255,.52)}
.panel,.card,.setting-card{background-image:var(--rm-paper-gradient,linear-gradient(145deg,#fff 0%,#fbf8f1 52%,#f0eadf 100%))}.panel::after,.card::after,.setting-card::after,.coach-main::after,.coach-sidebar::after{content:"";position:absolute;inset:1px;border-radius:inherit;pointer-events:none;background:radial-gradient(60% 40% at 18% 0%,rgba(255,255,255,.34),transparent 65%);opacity:.7}
.card,.plan,.linkcard,.setting-card,.kind,.mood,.prov button,.opt{transition:transform .28s var(--ease,ease),box-shadow .3s var(--ease,ease),border-color .25s ease,background .25s ease}.card:hover,.plan:hover,.linkcard:hover,.setting-card:hover{transform:translateY(-4px);box-shadow:0 28px 66px -32px rgba(122,62,70,.32),0 2px 0 rgba(255,255,255,.55) inset}.kind:hover,.mood:hover,.prov button:hover,.opt:hover{transform:translateY(-1px);box-shadow:0 12px 25px -22px rgba(122,62,70,.35)}
header{background:color-mix(in srgb,var(--bg) 88%,transparent)!important;backdrop-filter:blur(20px) saturate(132%);-webkit-backdrop-filter:blur(20px) saturate(132%)}header .hbar{position:relative}
header .hbar::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);pointer-events:none}
.coach-shell{grid-template-columns:minmax(230px,280px) minmax(0,1fr);border-radius:22px;overflow:hidden;box-shadow:0 32px 90px -46px rgba(33,30,26,.34)}.coach-sidebar{min-height:640px;background:radial-gradient(85% 55% at 0% 0%,rgba(122,62,70,.06),transparent 70%),linear-gradient(150deg,#fbf8f1,#eee8dc);border-radius:20px 0 0 20px}.coach-main{min-height:640px;display:flex;flex-direction:column;background:radial-gradient(70% 40% at 100% 0%,rgba(168,121,93,.07),transparent 72%),linear-gradient(150deg,#fffdf8,#f5efe4);border-radius:0 20px 20px 0}.coach-main .chat{flex:1;min-height:0}.chat{display:flex;flex-direction:column;min-width:0}.thread{min-width:0;max-width:100%}
.composer{position:relative;display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;align-items:end;gap:8px;padding:10px;margin-top:14px;border:1px solid rgba(216,208,194,.95);border-radius:18px;background:rgba(251,248,241,.9);box-shadow:0 15px 42px -26px rgba(33,30,26,.36),inset 0 1px 0 rgba(255,255,255,.82)}.composer-tools{display:inline-flex;align-items:center;gap:5px}.composer-tool,.send{width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center;border:1px solid var(--line);border-radius:12px;background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(234,228,216,.58));color:var(--t2);transition:transform .18s var(--ease),border-color .2s,box-shadow .2s,background .2s}.composer-tool:hover,.composer-tool.on{transform:translateY(-1px);color:var(--rose);border-color:rgba(122,62,70,.35);box-shadow:0 10px 24px -18px rgba(122,62,70,.45);background:var(--grad-brand-soft)}.composer-tool.on{box-shadow:0 0 0 3px rgba(122,62,70,.08),0 10px 24px -18px rgba(122,62,70,.45)}.composer textarea{width:100%;min-width:0;min-height:42px;max-height:180px;margin:0!important;border:0!important;background:transparent!important;box-shadow:none!important;padding:9px 5px!important}.composer textarea:focus{outline:none!important}.send{background:var(--rm-brand);color:#fff9f3;border-color:rgba(122,62,70,.55);box-shadow:0 12px 26px -16px rgba(122,62,70,.65)}.send:hover{transform:translateY(-2px);box-shadow:0 17px 30px -15px rgba(122,62,70,.72)}
.coach-attachment-preview{margin-top:9px}.coach-attachment{display:grid;grid-template-columns:62px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px;border:1px solid rgba(122,62,70,.15);border-radius:13px;background:linear-gradient(135deg,rgba(122,62,70,.055),rgba(168,121,93,.055))}.coach-attachment img{width:62px;height:62px;object-fit:cover;border-radius:9px;border:1px solid var(--line)}.coach-attachment b,.coach-attachment span{display:block;min-width:0;overflow-wrap:anywhere}.coach-attachment b{font-size:12.5px;color:var(--t1)}.coach-attachment span{margin-top:3px;font-size:10.5px;color:var(--t3);line-height:1.45}.coach-attachment button{width:30px;height:30px;border:1px solid var(--line);border-radius:9px;color:var(--t2)}
.bub{max-width:min(78%,760px);overflow-wrap:anywhere;word-break:break-word}.bub.me{margin-left:auto;background-image:var(--rm-brand);box-shadow:0 14px 32px -20px rgba(122,62,70,.65)}.bub.co{background-image:linear-gradient(145deg,rgba(255,255,255,.88),rgba(239,233,223,.86));box-shadow:var(--rm-shadow-sm)}
.site-footer{width:100%;margin-left:0!important;margin-right:0!important;overflow:hidden;isolation:isolate;background:radial-gradient(70% 110% at 88% 100%,rgba(168,121,93,.12),transparent 70%),radial-gradient(48% 90% at 8% 0%,rgba(122,62,70,.10),transparent 72%),linear-gradient(180deg,rgba(234,228,216,.25),rgba(224,214,199,.84))}.site-footer::before{height:2px;background:linear-gradient(90deg,transparent,rgba(122,62,70,.26),rgba(168,121,93,.34),transparent)}.site-footer>.shell,.site-footer>.wrap{box-sizing:border-box;width:min(100% - 44px,1120px);max-width:1120px;margin-inline:auto;padding-inline:0}.site-footer .brand-foot{width:100%;max-width:720px}.site-footer .foot-grid,.site-footer .foot-bottom{width:100%}.site-footer .foot-col a{max-width:100%;overflow-wrap:anywhere}.site-footer .foot-meta{justify-content:flex-end}
@media(max-width:860px){.site-footer>.shell,.site-footer>.wrap{width:min(100% - 36px,1120px)}.site-footer .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.coach-shell{grid-template-columns:1fr;border-radius:18px}.coach-sidebar{display:none}.coach-main{border-radius:18px;min-height:600px}.coach-mobilebar{overflow-x:auto;scrollbar-width:none;padding-bottom:2px}.coach-mobilebar::-webkit-scrollbar{display:none}}
@media(max-width:600px){.site-footer{padding:50px 0 34px}.site-footer>.shell,.site-footer>.wrap{width:min(100% - 30px,1120px)}.site-footer .foot-grid{grid-template-columns:1fr;gap:22px;padding-block:26px}.site-footer .foot-bottom{align-items:flex-start}.site-footer .foot-meta{justify-content:flex-start;width:100%}.coach-shell{width:min(100% - 30px,1180px)}.coach-main{padding:15px!important;min-height:calc(100dvh - 145px)}.composer{grid-template-columns:auto minmax(0,1fr) auto;padding:7px;border-radius:15px}.composer-tool,.send{width:38px;height:38px;flex-basis:38px;border-radius:11px}.bub{max-width:90%}.coach-attachment{grid-template-columns:52px minmax(0,1fr) auto}.coach-attachment img{width:52px;height:52px}}
@media(max-width:390px){.coach-mobilebar button{padding-inline:10px}.composer{gap:5px}.composer-tools{gap:3px}.composer-tool,.send{width:36px;height:36px;flex-basis:36px}}
html[data-theme="dark"] .composer,html.theme-dark .composer{background:rgba(33,31,27,.92);border-color:rgba(126,111,94,.38);box-shadow:0 24px 65px -38px rgba(0,0,0,.82),inset 0 1px 0 rgba(255,255,255,.035)}html[data-theme="dark"] .composer-tool,html.theme-dark .composer-tool{background:linear-gradient(145deg,rgba(55,49,43,.98),rgba(39,35,31,.98));border-color:rgba(126,111,94,.32);color:var(--t2)}html[data-theme="dark"] .coach-main,html.theme-dark .coach-main{background:radial-gradient(70% 40% at 100% 0%,rgba(168,121,93,.10),transparent 72%),linear-gradient(150deg,#24211d,#1c1a17)}html[data-theme="dark"] .coach-sidebar,html.theme-dark .coach-sidebar{background:radial-gradient(85% 55% at 0% 0%,rgba(181,107,117,.11),transparent 70%),linear-gradient(150deg,#24211d,#1c1a17)}html[data-theme="dark"] .bub.co,html.theme-dark .bub.co{background-image:linear-gradient(145deg,rgba(53,48,42,.98),rgba(39,35,30,.98))}html[data-theme="dark"] .coach-attachment,html.theme-dark .coach-attachment{background:linear-gradient(135deg,rgba(181,107,117,.10),rgba(185,138,104,.08));border-color:rgba(181,107,117,.25)}
@media(prefers-reduced-motion:reduce){body::before{animation:none!important}.card:hover,.plan:hover,.linkcard:hover,.setting-card:hover,.kind:hover,.mood:hover,.prov button:hover,.opt:hover,.composer-tool:hover,.send:hover{transform:none!important}}


/* =====================================================================
   V14 — TRUE FULL-BLEED FOOTER + MOBILE NAV + PWA INSTALL ACTION
   Visual/layout layer only. No business logic is changed.
   ===================================================================== */
html, body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Full-bleed footer: background reaches both viewport edges while its
   content remains comfortably readable. */
.site-footer {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  box-sizing: border-box !important;
  overflow: clip !important;
}
.site-footer > .shell,
.site-footer > .wrap {
  width: min(100% - 40px, 1180px) !important;
  max-width: 1180px !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
  box-sizing: border-box !important;
}
.site-footer .foot-grid {
  width: 100% !important;
}
.site-footer .foot-bottom {
  width: 100% !important;
}

/* Mobile navigation: keep the important "Découvrir" action visible.
   Secondary links collapse, but the main discovery + open actions remain. */
@media (max-width: 820px) {
  .menu {
    gap: 8px !important;
    min-width: 0;
  }
  .menu a:first-child {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    padding: 7px 10px;
    border: 1px solid rgba(122,62,70,.20);
    border-radius: 999px;
    background: rgba(122,62,70,.055);
    color: var(--rose);
    font-size: 12px;
    font-weight: 600;
  }
  .menu a:not(.pill):not(:first-child) {
    display: none !important;
  }
  .menu .pill {
    display: inline-flex !important;
    white-space: nowrap;
    font-size: 12px;
    padding: 7px 10px;
  }
}

@media (max-width: 430px) {
  .site-footer > .shell,
  .site-footer > .wrap {
    width: calc(100% - 28px) !important;
  }
  .menu {
    gap: 6px !important;
  }
  .menu a:first-child,
  .menu .pill {
    font-size: 11.5px;
    padding: 7px 9px;
  }
}

/* PWA installation action */
.install-app {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(122,62,70,.28);
  background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(245,241,232,.68));
  color: var(--rose);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  box-shadow: 0 10px 26px -18px rgba(33,30,26,.45), inset 0 1px 0 rgba(255,255,255,.7);
  transition: transform .2s var(--ease, ease), box-shadow .2s ease, border-color .2s ease;
}
.install-app:hover {
  transform: translateY(-1px);
  border-color: rgba(122,62,70,.42);
  box-shadow: 0 14px 30px -18px rgba(122,62,70,.38), inset 0 1px 0 rgba(255,255,255,.78);
}
.install-app:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 3px;
}
html.theme-dark .install-app,
html[data-theme="dark"] .install-app {
  background: linear-gradient(145deg, rgba(53,47,42,.95), rgba(36,33,29,.95));
  border-color: rgba(181,107,117,.34);
  color: #F0C4C0;
  box-shadow: 0 14px 32px -20px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.06);
}
@media (prefers-reduced-motion: reduce) {
  .install-app:hover { transform: none; }
}

/* Index mobile navigation: expose Découvrir in the top-right action area. */
.discover-mobile { display:none; }
@media (max-width:620px) {
  .navlinks { gap:7px !important; min-width:0; }
  .navlinks .discover-mobile { display:inline-flex !important; align-items:center; justify-content:center; white-space:nowrap; padding:7px 10px; border:1px solid rgba(122,62,70,.20); border-radius:999px; background:rgba(122,62,70,.055); color:var(--rose); font-size:12px; font-weight:600; }
  .navlinks > a:not(.cta):not(.discover-mobile) { display:none !important; }
  .navlinks .cta.sm { display:inline-flex !important; white-space:nowrap; }
}
@media (max-width:390px) { .navlinks .discover-mobile, .navlinks .cta.sm { font-size:11px; padding:7px 8px; } }


/* =====================================================================
   V15 — MOBILE HEADER + TRUE FOOTER COMPOSITION
   Corrects the observed phone layout: no clipped actions, no content
   glued to the viewport edge, and a full-bleed footer with a centered grid.
   ===================================================================== */

/* Never let the application header become wider than its viewport. */
header .wrap,
header .hbar,
header .header-actions,
header nav { min-width: 0; max-width: 100%; }
header .hbar { flex-wrap: nowrap; }
header .logo { min-width: 0; white-space: nowrap; }
header .header-actions { flex: 0 0 auto; }

/* Application discovery action: deliberately visible, compact and stable. */
.discover-app {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 6px 11px;
  border: 1px solid rgba(122,62,70,.22);
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(245,241,232,.62));
  color: var(--rose);
  text-decoration: none !important;
  font-size: 12px;
  font-weight: 650;
  box-shadow: 0 8px 20px -16px rgba(33,30,26,.45), inset 0 1px 0 rgba(255,255,255,.7);
  white-space: nowrap;
  transition: transform .18s var(--ease,ease), box-shadow .2s ease, border-color .2s ease;
}
.discover-app:hover {
  transform: translateY(-1px);
  border-color: rgba(122,62,70,.38);
  box-shadow: 0 12px 24px -17px rgba(122,62,70,.42), inset 0 1px 0 rgba(255,255,255,.8);
}
html.theme-dark .discover-app,
html[data-theme="dark"] .discover-app {
  background: linear-gradient(145deg, rgba(53,47,42,.96), rgba(36,33,29,.96));
  border-color: rgba(181,107,117,.32);
  color: #F0C4C0;
}

/* App footer is now outside the main .wrap; keep its background full-bleed
   and its content centered inside a readable measure. */
.site-footer {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.site-footer > .footer-inner {
  width: min(calc(100% - 40px), 1180px) !important;
  max-width: 1180px !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
  box-sizing: border-box !important;
}
.site-footer .brand-foot { max-width: 760px; }
.site-footer .foot-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
}

/* Public pages: use the mobile width intelligently rather than leaving
   three quarters of the footer visually empty. */
@media (max-width: 700px) {
  .site-footer > .shell,
  .site-footer > .wrap,
  .site-footer > .footer-inner {
    width: calc(100% - 32px) !important;
  }
  .site-footer .foot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 28px;
  }
  .site-footer .foot-col a { width: fit-content; max-width: 100%; }
}
@media (max-width: 460px) {
  header .shield,
  header #badge { display: none !important; }
  header .hbar { gap: 7px; min-height: 58px; }
  header .app-brand-mark { width: 30px; height: 30px; }
  header .logo { font-size: 17px; }
  header .header-actions { gap: 4px; }
  header .icon-action { width: 32px; height: 32px; }
  .discover-app { min-height: 32px; padding: 5px 9px; font-size: 11px; }
  header nav { width: 100%; }
  header nav button { padding: 11px 12px; font-size: 12px; }

  .site-footer { padding: 42px 0 34px !important; }
  .site-footer > .shell,
  .site-footer > .wrap,
  .site-footer > .footer-inner { width: calc(100% - 28px) !important; }
  .site-footer .brand-foot { gap: 10px; }
  .site-footer .foot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 20px;
    margin-top: 24px;
  }
  .site-footer .foot-col { min-width: 0; }
  .site-footer .foot-col a { font-size: 12px; overflow-wrap: anywhere; }
  .site-footer .foot-bottom { gap: 18px; }
  .site-footer .foot-meta { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer .foot-meta a,
  .site-footer .foot-meta .install-app { width: 100%; min-width: 0; }
}
@media (max-width: 350px) {
  header .app-brand-mark { display: none; }
  header .logo { font-size: 16px; }
  .discover-app { padding-inline: 8px; }
  header .icon-action { width: 30px; height: 30px; }
  header nav button { padding-inline: 10px; }
  .site-footer .foot-grid { column-gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .discover-app:hover { transform: none; }
}


/* V15.1 — final viewport discipline and mobile composition */
@media (max-width: 600px) {
  header .wrap { padding-inline: 12px; }
  header .hbar { width: 100%; }
  header .spacer { min-width: 0; }
  header nav { display: flex; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
  /* Dix onglets sur 380 px défilent forcément. Un dégradé sur le bord droit
     dit qu'il y a une suite, plutôt qu'un mot coupé net. Il s'efface quand
     on atteint la fin — sinon il suggère une suite qui n'existe pas. */
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); }
header nav::-webkit-scrollbar { display: none; }
header nav.at-end { -webkit-mask-image: none; mask-image: none; }
  header nav button { flex: 0 0 auto; }

  /* The footer uses the whole viewport for its background, but a deliberate
     inner measure so links never sit against the screen edge. */
  .site-footer .footer-inner,
  .site-footer > .shell,
  .site-footer > .wrap { padding-inline: 0 !important; }
  .site-footer .brand-foot { padding-inline: 2px; }
  .site-footer .foot-grid { width: 100%; }
}

/* Public landing header: balanced mobile composition. */
@media (max-width: 620px) {
  nav .navbar { min-width: 0; padding-inline: 15px; }
  nav .navbar > a:first-child { min-width: 0; flex: 1 1 auto; }
  nav .navbar > a:first-child .logo { font-size: 18px; }
  nav .navlinks { flex: 0 0 auto; margin-left: auto; gap: 6px; }
  nav .navlinks .discover-mobile,
  nav .navlinks .cta.sm { flex: 0 0 auto; }
}