/* ==========================================================================
   UNEAR — design.css : la direction visuelle du site (refonte d'octobre 2026).
   Chargée APRÈS style.css sur toutes les pages : style.css apporte les
   tokens de l'app, les boutons, les maquettes téléphone, la pile de photos
   et la mise en forme des pages légales ; ce fichier pose par-dessus :
     · le menu (logo flottant + trois traits → petit panneau déroulant),
       qui remplace l'ancienne barre de navigation ;
     · la page d'accueil (photo plein cadre, bandeau défilant, sections
       sans cartes, FAQ en deux colonnes, appel final) ;
     · le pied de page sombre, commun à toutes les pages.

   Direction : structure « pro » et immersive, photos pour l'histoire et le
   côté social, fond crème (aucun dégradé dans le fond), dégradés de l'app
   dans les icônes 3D (assets/images), les boutons et les mots d'accent.
   Titres en Familjen Grotesk, texte en Bricolage. Depuis le 2026-10-26,
   plus de mots d'accent (ni serif italique ni dégradé) : jugé « marqueur
   d'IA ». Inspirations : trycandle.app et lexya.co.

   Pages : <body class="r"> partout ; les pages sans hero (contact, légales,
   jeu, 404) ajoutent « r-page ». Le menu est piloté par js/menu.js.
   ========================================================================== */
:root{
  /* Fond crème chaud : les dégradés de marque ne sont PAS dans le fond,
     seulement dans les icônes, les boutons et les mots d'accent. */
  --paper:       #FAF6F0;
  --cream:       #F3ECE2;
  --paper-80:    rgba(250, 246, 240, .80);
  --paper-60:    rgba(250, 246, 240, .60);
  --paper-20:    rgba(250, 246, 240, .20);
  --paper-12:    rgba(250, 246, 240, .12);
  --grad-violet: linear-gradient(100deg, var(--violet) 0%, var(--brand-start) 100%);
  --grad-violet: linear-gradient(100deg, var(--violet) 0%, var(--brand-start) 100%);
  --ink-12:      rgba(29, 29, 29, .12);
  --shade-top:   rgba(29, 29, 29, .38);
  --shade-bot:   rgba(29, 29, 29, .82);
  --shade-band:  rgba(29, 29, 29, .58);

}

html{ scroll-padding-top:0; }
body.r{ background:var(--cream); }


/* --------------------------------------------------------------------------
   Typographie commune
   -------------------------------------------------------------------------- */
/* Grands titres de l'accueil uniquement : sur les pages r-page (légales,
   contact, jeu), les h2 gardent la mise en forme de style.css (.legal h2). */
.r:where(:not(.r-page)) h2{
  font-size:clamp(40px, 6.2vw, 92px);
  font-weight:800;
  line-height:.98;
  letter-spacing:-.035em;
  max-width:none;
}
.r h1 em, .r h2 em, .r-foot-tag em{ font-style:normal; }
.r-eyebrow{
  font-size:12px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--grey);
  margin-bottom:22px;
}
.r-lead{ font-size:clamp(17px, 1.5vw, 20px); font-weight:300; color:var(--dark-grey); max-width:560px; margin-top:26px; }

/* Rythme vertical unique : même marge en haut et en bas de chaque section.
   Les règles #how / #story ci-dessous neutralisent celles de style.css
   (#how{padding-top:20px}, #story{padding-bottom:64px}…), écrites pour
   l'ancienne page et qui déséquilibraient ces deux sections — un id
   l'emporte sur une classe, d'où les sélecteurs avec id. */
:root{ --sec:clamp(64px, 7.5vw, 104px); }
.r main section{ padding:var(--sec) 0; }
.r main #how{ padding-top:var(--sec); }
.r main #story{ padding-bottom:var(--sec); }

/* ==========================================================================
   MENU — logo + trois traits, petit panneau déroulant
   ========================================================================== */
.menu-logo{ position:absolute; top:22px; left:clamp(20px, 3vw, 40px); z-index:60; }
.menu-logo img{ width:40px; height:40px; border-radius:11px; box-shadow:var(--shadow-sm); }

/* Menu discret, à la trycandle.app (2026-10-26) : trois traits fins sans fond,
   et un petit panneau sombre et flouté qui descend sous le bouton. Le bouton
   est en haut de page et part au défilement : fixe, ses traits blancs auraient
   disparu sur les sections claires. Le HTML (liste + sous-menu Contact + bouton
   Télécharger) n'a pas changé : le sous-menu est simplement mis à plat. */
.menu-btn{
  position:absolute;
  top:22px; right:clamp(12px, 3vw, 32px);
  z-index:110;
  width:40px; height:40px;
  padding:0; border:none; background:none;
  cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px;
}
.menu-btn span{
  display:block; width:22px; height:1.5px; border-radius:1px;
  background:var(--paper); opacity:.8;
  transition:opacity .2s ease;
}
.menu-open .menu-btn span{ opacity:1; }
@media (hover:hover) and (pointer:fine){
  .menu-btn:hover span{ opacity:1; }
}
/* pages sans photo en haut (contact, légales, jeu, 404) : traits foncés */
.r-page .menu-btn span{ background:var(--ink); }

.menu-panel{
  position:absolute;
  top:66px; right:clamp(12px, 3vw, 32px);
  z-index:100;
  width:220px;
  padding:8px;
  border-radius:16px;
  background:rgba(29, 29, 29, .76);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:0 24px 48px -12px rgba(0, 0, 0, .35);
  color:var(--paper);
  opacity:0; transform:translateY(-4px);
  pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
}
.menu-open .menu-panel{ opacity:1; transform:none; pointer-events:auto; transition-duration:.2s; }

/* le contenu du panneau : une simple colonne de liens */
.menu-panel .menu-in{ width:auto; max-width:none; margin:0; padding:0; }
.menu-list{ list-style:none; }
.menu-list a, .menu-sub a, .menu-foot .btn{
  display:block;
  padding:11px 14px;
  border-radius:11px;
  font-family:var(--font-body);
  font-size:14px; font-weight:600; line-height:1.2; letter-spacing:0;
  color:rgba(250, 246, 240, .72);
  transition:background-color .15s ease, color .15s ease;
}
@media (hover:hover) and (pointer:fine){
  .menu-list a:hover, .menu-sub a:hover, .menu-foot .btn:hover{ background:rgba(250, 246, 240, .10); color:var(--paper); }
}
.menu-list a:active, .menu-sub a:active, .menu-foot .btn:active{ background:rgba(250, 246, 240, .10); color:var(--paper); }
/* sous-menu Contact mis à plat : Support et Collaboration deviennent deux liens */
.menu-sub-btn{ display:none; }
.menu-sub{ display:block; }
.menu-sub a b{ font-weight:inherit; }
.menu-sub a span{ display:none; }
/* Télécharger : un lien comme les autres, juste séparé par un filet */
.menu-foot{ margin-top:6px; padding-top:6px; border-top:1px solid rgba(250, 246, 240, .12); }
.menu-foot .btn{
  width:100%; text-align:left;
  background:none; box-shadow:none; transform:none;
  color:var(--paper);
}

/* ==========================================================================
   1. HERO — photo plein cadre, texte centré (inspiration trycandle.app,
   lab-hero.html du 2026-10-26)
   ========================================================================== */
.r-hero{
  position:relative;
  min-height:100vh; min-height:100svh;
  display:flex; align-items:center;
  padding:120px 24px clamp(120px, 18vh, 170px); /* bas : place des pastilles */
  overflow:hidden;
  color:var(--paper);
  background:var(--ink);
  text-align:center;
}
.r-hero-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  /* Pas de zoom : le collage (16/9) est affiché à sa taille de recadrage
     minimale. `cover` rogne seulement ce qui dépasse quand la fenêtre n'est
     pas exactement en 16/9. */
  object-position:50% 50%;
}
.r-hero-shade{
  position:absolute; inset:0;
  /* Le dégradé monte du bas et fond la photo dans le noir du bandeau qui
     suit. Le collage est très chargé en blanc : un halo sombre derrière le
     texte centré le garde lisible. */
  background:
    radial-gradient(60% 45% at 50% 55%, rgba(29,29,29,.55) 0%, transparent 70%),
    linear-gradient(180deg, rgba(29,29,29,.45) 0%, rgba(29,29,29,.25) 30%, rgba(29,29,29,.55) 60%, var(--ink) 100%);
}
.r-hero-in{
  position:relative;
  width:100%; max-width:760px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center;
}
.r-hero h1{
  font-size:clamp(36px, 4.4vw, 58px);
  font-weight:700;
  line-height:1.05;
  max-width:none;
  text-wrap:balance;
}
.r-hero-sub{
  font-size:clamp(16px, 1.3vw, 18px); font-weight:300; line-height:1.5;
  color:var(--paper-80);
  max-width:440px;
  margin-top:18px;
  text-wrap:pretty;
}
.r-hero .r-stores{ justify-content:center; margin-top:32px; }
/* Sur téléphone, le texte descend vers le bas, dans la zone la plus sombre */
@media (max-width:560px){
  .r-hero{ align-items:flex-end; padding-bottom:clamp(110px, 16vh, 150px); }
  .hero-chip{ padding:6px 14px 6px 8px; }
  .hero-chip img{ height:22px; }
  .hero-chip span{ font-size:14px; }
}


/* ==========================================================================
   2. POUR QUI — pastilles en bas du hero
   ========================================================================== */
/* Plus de section bandeau depuis le 2026-10-26 : les publics défilent en
   pastilles en bas du hero, dans la zone la plus sombre du dégradé (là où
   trycandle.app met ses lauriers). Bords fondus par un masque. */
.hero-chips{
  position:absolute; left:0; right:0; bottom:clamp(24px, 4vh, 40px);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.r-marquee-row{
  display:flex; align-items:center; gap:12px;
  width:max-content;
  animation:r-marquee 55s linear infinite;
}
.hero-chip{
  display:flex; align-items:center; gap:10px;
  padding:8px 18px 8px 10px;
  border:1px solid var(--paper-20); border-radius:999px;
  background:rgba(29, 29, 29, .35);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  white-space:nowrap;
}
.hero-chip img{ height:28px; width:auto; flex:none; }
.hero-chip span{ font-family:var(--font-display); font-size:16px; font-weight:500; color:var(--paper-80); }
@keyframes r-marquee{ to{ transform:translateX(-50%); } }

/* ==========================================================================
   3. ICÔNES FLOTTANTES (appel final) — le manifeste « Not another feed. /
   A reason to show up. » est retiré le 2026-10-26 : sa phrase devient le
   titre de la section « pourquoi ».
   ========================================================================== */
.r-float{
  position:absolute;
  width:clamp(64px, 8vw, 116px); height:auto;
  pointer-events:none;
  filter:drop-shadow(0 18px 24px rgba(29, 29, 29, .14));
  animation:r-float 6s ease-in-out infinite;
}
@keyframes r-float{
  0%, 100%{ transform:translateY(0) rotate(var(--rot, 0deg)); }
  50%     { transform:translateY(-12px) rotate(calc(var(--rot, 0deg) + 4deg)); }
}
.r-float--a{ left:6%;  top:-10px;  --rot:-12deg; }
.r-float--b{ right:7%; bottom:-20px; --rot:10deg; animation-delay:-2.5s; }
.r-float--c{ left:8%;  top:8%;    --rot:-10deg; }
.r-float--d{ right:9%; top:2%;    --rot:12deg; animation-delay:-2s; }
.r-float--e{ right:16%; bottom:-6%; --rot:-6deg; width:clamp(54px, 6vw, 88px); animation-delay:-4s; }

/* ==========================================================================
   4. COMMENT ÇA MARCHE — étapes texte + clip de l'app
   ========================================================================== */
.r-how{ background:var(--ink); color:var(--paper); } /* le même noir que le bas du hero : continuité */
/* Une étape = un texte + un clip de l'app en boucle, à la BeReal ; une étape
   sur deux, le clip passe à gauche. Les clips portent déjà le téléphone, rendu
   sur la couleur exacte de la section (--paper) : aucun cadre autour. */
.r-steps{ list-style:none; }
.r-step{
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
  gap:clamp(32px, 6vw, 96px);
  max-width:1000px; margin:0 auto;
}
.r-step + .r-step{ margin-top:clamp(40px, 6vw, 96px); }
.r-step:nth-child(even) .r-step-media{ order:-1; }
.r-step h3{ font-size:clamp(26px, 2.6vw, 38px); line-height:1.1; }
.r-step p{
  margin-top:14px; max-width:420px;
  font-size:clamp(16px, 1.3vw, 18px); font-weight:300; line-height:1.55;
  color:var(--paper-80);
}
.r-step-media{ display:flex; justify-content:center; }
.r-step-media video{
  display:block;
  width:clamp(280px, 34vw, 440px); height:auto; aspect-ratio:3 / 4;
  background:var(--ink);
}

.r-how-visual{ position:relative; }

/* ==========================================================================
   5. NOTRE HISTOIRE — chapitre clair
   ========================================================================== */
.r-story{ background:var(--paper); color:var(--ink); } /* même clair que la FAQ qui suit */
.r-story h2{ font-size:clamp(40px, 5vw, 72px); }
.r-story .story-text p{ color:var(--dark-grey); font-size:17px; }
.r-story .story-text p strong{ color:var(--ink); }
.r-story .story-sign{ color:var(--ink); }


/* ==========================================================================
   9. FAQ — colonne collante + liste à filets
   ========================================================================== */
.r-faq{ background:var(--paper); }
.r-faq-in{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.35fr); gap:clamp(40px, 6vw, 96px); align-items:start; }
.r-faq-side{ position:sticky; top:40px; }
.r-faq h2{ font-size:clamp(40px, 4.8vw, 72px); }
.r-contact-links{ margin-top:36px; border-top:1px solid var(--ink-12); }
.r-contact-links a{
  display:block; position:relative;
  padding:18px 40px 18px 0;
  border-bottom:1px solid var(--ink-12);
  transition:color .2s ease;
}
.r-contact-links a > *{ transition:transform .25s cubic-bezier(.23,1,.32,1); }
.r-contact-links a::after{
  content:"\2192"; position:absolute; right:4px; top:50%;
  transform:translateY(-50%);
  font-size:22px; transition:transform .25s ease;
}
@media (hover:hover) and (pointer:fine){
.r-contact-links a:hover{ color:var(--violet); }
}
@media (hover:hover) and (pointer:fine){
.r-contact-links a:hover > *{ transform:translateX(8px); }
}
@media (hover:hover) and (pointer:fine){
.r-contact-links a:hover::after{ transform:translate(4px, -50%); }
}
.r-contact-links b{ display:block; font-size:22px; font-weight:700; letter-spacing:-.01em; }
.r-contact-links span{ display:block; font-size:14px; font-weight:300; color:var(--grey); }

.r .faq{ max-width:none; margin:0; }
.r .faq-cat{ margin:48px 0 4px; }
.r .faq-cat:first-child{ margin-top:0; }
.r .item{
  background:none; border:none; border-bottom:1px solid var(--ink-12);
  border-radius:0; margin-bottom:0;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.r .item.open{ border-color:var(--ink-12); }
.r .q{ padding:22px 0; font-size:18px; transition:color .2s ease; }
@media (hover:hover) and (pointer:fine){
.r .q:hover{ color:var(--violet); }
}
.r .item.open .q{ font-weight:600; }
.r .a-inner{ padding:0 0 24px; font-size:16px; }

/* ==========================================================================
   10. DERNIER APPEL
   ========================================================================== */
.r main .r-cta{
  text-align:center;
  padding:clamp(40px, 5vw, 64px) 0 clamp(90px, 10vw, 140px);
  background:var(--paper);
}
.r-cta .wrap{ position:relative; }
/* la FAQ perd une partie de son padding bas : l'appel final la suit de près */
.r main .r-faq{ padding-bottom:clamp(40px, 5vw, 64px); }
.r-cta h2{ font-size:clamp(44px, 6.2vw, 92px); }
.r-cta .r-stores{ justify-content:center; margin-top:44px; }
.r-socials{ margin-top:36px; gap:6px; }
.r-socials a{ width:48px; height:48px; border:none; border-radius:0; background:none; }
@media (hover:hover) and (pointer:fine){
.r-socials a:hover{ color:var(--violet); border-color:transparent; }
}
.r-socials svg{ width:26px; height:26px; }

/* ==========================================================================
   FOOTER — encre, nom de marque géant
   ========================================================================== */
.r-foot{
  background:var(--ink); color:var(--paper);
  border-top:none;
  padding:clamp(56px, 6vw, 80px) 0 32px;
}
.r-foot-top{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:48px; }
.r-foot-tag{ font-family:var(--font-display); font-size:clamp(26px, 3vw, 40px); font-weight:700; line-height:1.1; letter-spacing:-.03em; }
.r-foot-nav{ display:flex; gap:clamp(32px, 5vw, 72px); flex-wrap:wrap; }
.r-foot-nav h3{ font-family:var(--font-body); font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--paper-60); margin-bottom:14px; }
.r-foot-nav a{ display:block; font-size:15px; padding:4px 0; color:var(--paper-80); transition:color .2s; }
@media (hover:hover) and (pointer:fine){
.r-foot-nav a:hover{ color:var(--brand-start); }
}
.r-foot-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  /* l'espace venait du nom géant, retiré : on le recrée ici */
  margin-top:clamp(48px, 6vw, 72px);
  padding-top:22px; border-top:1px solid var(--paper-12);
  font-size:13px; color:var(--paper-60);
}
.r-foot .foot-lang a[aria-current]{ color:var(--paper); }
@media (hover:hover) and (pointer:fine){
  .r-foot .foot-lang a:hover{ color:var(--paper); }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:980px){
  .r-faq-in{ grid-template-columns:1fr; }
  .r-faq-side{ position:static; }
  /* Une seule colonne : le texte de « Notre histoire » passe avant les photos */
  .r-story .deck-wrap{ order:2; }
}
@media (max-width:560px){
  .r-float--a, .r-float--c{ left:2%; }
  .r-float--b, .r-float--d{ right:2%; }
  .r .q{ font-size:16px; padding:18px 0; }
}
@media (prefers-reduced-motion:reduce){
  .r-marquee-row{ animation:none; }
  .r-float{ animation:none; }
}

/* Correctifs après rendu ---------------------------------------------------- */
/* .story-text p (style.css) grossissait l'étiquette « Our story » */
.r-story .story-text .r-eyebrow{ font-size:12px; margin-top:0; }

/* Titres en Familjen Grotesk (choix du 2026-10-26, lab-polices.html) :
   la famille s'arrête à 700, et son dessin demande un interlettrage moins
   serré que Bricolage. Sélecteur renforcé (html body.r) pour passer devant
   les réglages de section, dont .r-hero h1:lang(fr). */
html body.r :is(h1, h2){ font-weight:700; letter-spacing:-.03em; }

/* Tactile (skill mobile-native, 2026-10-26) : pas de flash gris au toucher,
   donc chaque élément pressable a son propre retour sur :active. */
html{ -webkit-tap-highlight-color:transparent; }
.r .q:active{ color:var(--violet); }
.r-contact-links a:active{ color:var(--violet); }


/* Étapes de « Comment ça marche » sur téléphone : le clip au-dessus du texte */
@media (max-width:760px){
  .r-step{ grid-template-columns:1fr; text-align:center; gap:16px; }
  .r-step .r-step-media, .r-step:nth-child(even) .r-step-media{ order:-1; }
  .r-step p{ margin-left:auto; margin-right:auto; }
}