/* =========================================================
   ReCognition — feuille de style
   Structure inspirée de memogo.fr / direction visuelle inspirée
   de twinbru.com, iventions.com et agenceepic.com
   ========================================================= */

:root{
  /* =========================
     CHARTE ReCOGNITION
     (valeurs finales — direction artistique Apple,
     seules celles qui gagnaient réellement la cascade
     sont conservées ici)
     ========================= */

  /* Couleurs principales */
  --ink:#0A0A0C;
  --ink-soft:#8A8A91;

  --bg:#F5F5F7;
  --card:#FFFFFF;
  --bone:#E8E8ED;

  /* Palette Apple */
  --apple-black:#000000;
  --apple-dark:#0A0A0C;
  --apple-dark-2:#151517;
  --apple-gray:#86868B;
  --apple-light:#F5F5F7;
  --apple-blue:#2997FF;
  --apple-blue-deep:#0071E3;

  /* Couleur principale */
  --violet:#7B61FF;
  --violet-deep:#5E44D6;
  --violet-tint:#EEECFF;

  /* Erreur / attention */
  --coral:#FF5A4F;
  --coral-tint:#FFF0EE;

  /* Validation */
  --sage:#34C759;
  --purple:#420743;

  /* Accents secondaires */
  --amber:#FFB340;
  --teal:#32ADE6;
  --plum:#AF52DE;
  --orange:#FF6B35;
  --teal-light:#64D2FF;

  /* Bordures */
  --line:rgba(0,0,0,.10);
  --line-soft:rgba(0,0,0,.06);

  /* Ombres */
  --shadow-lg:
    0 50px 100px -45px rgba(0,0,0,.42);

  --shadow-sm:
    0 20px 45px -25px rgba(0,0,0,.25);

/* =========================
   CHARTE TYPOGRAPHIQUE
   ========================= */

--font-display:
  -apple-system,
  BlinkMacSystemFont,
  "SF Pro Display",
  "SF Pro Text",
  "Helvetica Neue",
  Arial,
  sans-serif;

--font-body:
  -apple-system,
  BlinkMacSystemFont,
  "SF Pro Text",
  "Helvetica Neue",
  Arial,
  sans-serif;

--font-mono:
  "SFMono-Regular",
  Menlo,
  Monaco,
  Consolas,
  "Liberation Mono",
  "Courier New",
  monospace;

  /* Couvertures / hero produit */
  --cover-navy:#172033;
  --cover-blue:#0057FF;
  --cover-blue-light:#168BFF;
  --cover-red:#FF1111;
  --cover-orange:#FF9F3F;
  --cover-lime:#E7FF35;
  --cover-green:#00D83D;
  --cover-magenta:#E83DFF;
  --cover-white:#F7F8FC;

  /* Mise en page */
  --wrap:90vw;
  --ring-radius:186px;

  /* Rayons */
  --radius-lg:28px;
  --radius-md:18px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  cursor:auto;
}
@media (pointer:fine){
  body.has-custom-cursor, body.has-custom-cursor a, body.has-custom-cursor button{ cursor:none; }
}

img{max-width:100%;display:block;}
a{color:inherit; text-decoration:none;}

.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--ink); color:var(--bg); padding:12px 18px; z-index:1000;
  border-radius:0 0 8px 0; font-family:var(--font-mono); font-size:14px;
}
.skip-link:focus{left:0;}

:focus-visible{outline:3px solid var(--violet); outline-offset:3px;}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 32px; justify-content: center; align-items: center;}
@media (max-width:600px){ .wrap{padding:0 20px;} }

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.02;
  letter-spacing:-0.01em;
  margin:0 0 0.5em;
  color:var(--ink);
}

.lede{font-size:1.15em; max-width:58ch; color:var(--ink-soft);}

/* -------- custom cursor -------- */
.cursor-dot,.cursor-ring{
  position:fixed; top:0; left:0; pointer-events:none; z-index:9999;
  border-radius:50%; transform:translate(-50%,-50%);
  display:none;
}
@media (pointer:fine){
  .cursor-dot,.cursor-ring{display:block;}
}
.cursor-dot{width:7px; height:7px; background:var(--violet);}
.cursor-ring{
  width:34px; height:34px; border:1.5px solid var(--ink);
  opacity:.55; transition:width .2s ease, height .2s ease, border-color .2s ease, opacity .2s ease, background .2s ease;
}
.cursor-ring.is-active{
  width:64px; height:64px; border-color:var(--violet); background:rgba(79,63,240,0.08); opacity:1;
}

/* -------- eyebrow / numbered labels -------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-weight:600;
  font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--violet);
}
.eyebrow .num{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:26px; height:26px; padding:0 6px;
  background:var(--ink); color:var(--bg); border-radius:7px;
  font-size:11.5px;
}

/* -------- buttons -------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-weight:700; font-size:15.5px;
  padding:15px 28px; border-radius:999px; border:2px solid transparent;
  cursor:pointer; transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, background .3s ease, color .3s ease, border-color .3s ease;
  line-height:1.2; white-space:nowrap;
}
.btn:hover{transform:translateY(-3px);   cursor: pointer; text-decoration: underline;}
.btn-primary{background:var(--violet); color:#fff;}
.btn-primary:hover{background:var(--violet-deep); box-shadow:var(--shadow-sm);   cursor: pointer;text-decoration: underline;}
.btn-ghost-light{background:transparent; border-color:rgba(240, 241, 246, 0.55); color:var(--bg);}
.btn-ghost-light:hover{background:rgba(246,245,240,.12); border-color:var(--bg);   cursor: pointer; text-decoration: underline;}
.btn-outline{background:transparent; border-color:var(--ink); color:var(--ink);}
.btn-outline:hover{background:var(--ink); color:var(--bg);  cursor: pointer; text-decoration: underline;}
.btn-block{width:100%;}
.btn-small{
  all:unset; box-sizing:border-box; font-family:var(--font-body); font-weight:700; font-size:14px;
  padding:11px 22px; border-radius:999px; background:var(--ink); color:var(--bg); cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; transition:background .2s ease;
}
.btn-small:hover{background:var(--violet-deep);   cursor: pointer; text-decoration: underline;}
.btn-small.secondary{background:transparent; border:1.5px solid var(--ink); color:var(--ink);}
.btn-small.secondary:hover{background:var(--ink); color:var(--bg);   cursor: pointer; text-decoration: underline;}

/* -------- nav -------- */
header.site-nav{
  position:sticky; top:0; z-index:100;
  background:rgb(255, 255, 255);
  border-bottom:1px solid var(--line-soft);
  height: 10vh;
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px; max-width:var(--wrap); margin:0 auto;
  height: 10vh;
  background: #fff;
}
#favicon{
  height: 10vh;
  width: auto;
  min-height: 67px;
}
/* Le lien brand doit aligner l’icône + le texte */
.brand {
  display: flex;
  align-items: center;
  gap: 12px; /* espace entre l’icône et le texte */
  text-decoration: none;
  color: inherit;
}

/* Taille du favicon dans le header */
.brand-icon img {
  width: auto;
  height: 10vh;
  object-fit: contain;
  display: block;
  min-height: 45px;
  min-width: 45px;
}
.nav-inner.btn{
  padding:10px 22px;
  font-size:14.5px;
}

/* Pour éviter que le texte RECOGNITION ne bouge */
.brand-name {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-align: center;
  margin-right: 12px;
}
@media screen and (max-width: 490px){
  #sabonner{
    width:5vw;
    font-size: 0.6em;
  }
}
@media screen and (max-width: 390px){
  .brand-name{
    font-size: 0.5em;
  }
}
.brand{
  display:flex; align-items:center;
  font-family:var(--font-display); font-weight:700; font-size:1.4em;
  color:var(--ink);
}
.brand .accent-dot{color:var(--violet);}
.brand-mark{width:28px;height:28px;flex:none;}
.nav-links{display:flex; gap:30px; list-style:none; margin:0; padding:0; font-size:14.5px; font-weight:700;}
.nav-links a{opacity:.75; transition:opacity .2s ease, color .2s ease; position:relative;}
.nav-links a:hover{opacity:1; color:var(--violet);}
@media (max-width:900px){ .nav-links{display:none;} }
.nav-cta{padding:11px 22px; font-size:14px;}

/* Empêche le contenu du header de déborder */
.nav-inner{
  box-sizing:border-box;
  width:100%;
  min-width:0;
}

/* Le bloc de marque ne peut pas pousser les autres éléments */
.brand{
  min-width:0;
  flex-shrink:1;
}

/* Les liens restent contenus dans leur espace */
.nav-links{
  min-width:0;
  flex-shrink:1;
}

/* Le bouton conserve sa taille */
.nav-cta{
  flex-shrink:0;
}

/* À partir de 900px : navigation complète */
@media screen and (min-width:901px){

  .nav-inner{
    gap:20px;
  }

  .nav-links{
    gap:clamp(12px,2vw,30px);
  }
}

/* Sous 900px : on masque les liens */
@media screen and (max-width:900px){

  .nav-links{
    display:none;
  }

  .nav-inner{
    justify-content:space-between;
  }
}

/* -------- hero -------- */
/* Mise en page du hero : conteneur produit, contenu texte, CTA, méta.
   (la définition de .hero et .hero-inner elles-mêmes vit plus bas,
   dans la section "HERO PRODUIT — COUVERTURE ReCOGNITION" : ce sont
   ces règles qui pilotent réellement la grille à 2 colonnes.) */
.hero-product{
  display:flex; justify-content:center; align-items:center;
  width:100%; position:relative;
}
.hero-cta{
  display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.5rem;
}
.hero-meta{
  display:flex; gap:2rem; flex-wrap:wrap; margin-top:2rem;
}

/* -------- benefits strip -------- */
.benefits-strip{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--card);
}
.benefits-row{
  display:grid; grid-template-columns:repeat(5,1fr);
  max-width:var(--wrap); margin:0 auto;
}
@media (max-width:980px){ .benefits-row{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .benefits-row{grid-template-columns:1fr;} }
.benefit-item{
  display:flex; align-items:center; gap:12px; padding:24px 28px;
  border-right:1px solid var(--line); font-size:14px; font-weight:700;
}
.benefit-item:last-child{border-right:none;}
@media (max-width:980px){ .benefit-item:nth-child(2n){border-right:none;} .benefit-item{border-bottom:1px solid var(--line);} }
@media (max-width:560px){ .benefit-item{border-right:none !important;} }
.benefit-item svg{width:22px; height:22px; flex:none; color:var(--violet);}

/* -------- sections -------- */
section{padding:clamp(80px,9vw,132px) 0;}
.section-head{max-width:64ch; margin-bottom:52px;}
.section-head h2{font-size:clamp(2rem,3.8vw,3rem); margin-top:.4em;}
.section-split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
@media (max-width:900px){ .section-split{grid-template-columns:1fr; gap:40px;} }

.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);}
.reveal.is-visible{opacity:1; transform:none;}
.reveal-delay-1.is-visible{transition-delay:.08s;}
.reveal-delay-2.is-visible{transition-delay:.16s;}

/* mensuel */
.theme-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px;}
.theme-pill{
  font-family:var(--font-mono); font-size:13px; font-weight:600;
  padding:10px 18px; border-radius:999px; border:1px solid var(--line);
  background:var(--card);
}
.theme-pill[data-theme="raisonnement"]{
  background: #ff0000;
}
.theme-pill[data-theme="orientation"]{
  background: #eff843;
}
.theme-pill[data-theme="memoire"]{
  background: #f89f43;
}
.theme-pill[data-theme="fonctions-executives"]{
  background: #00da30;
}
.theme-pill[data-theme="attention"]{
  background: #ef43f8;
}
.theme-pill[data-theme="langage"]{
  background: #0057ff;
}
.theme-pill {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity .6s ease,
        transform .6s ease;
}

.theme-pill.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.mockup-wrap{position:relative; height:380px;}
.mockup-card{
  position:absolute; width:72%; aspect-ratio:3/4; border-radius:20px;
  box-shadow:var(--shadow-lg); padding:26px; display:flex; flex-direction:column; justify-content:space-between;
  font-family:var(--font-mono);
}
.mockup-card.m1{background:var(--violet); color:#fff; top:0; left:0; transform:rotate(-6deg); z-index:1;}
.mockup-card.m2{background:var(--card); color:var(--ink); border:1px solid var(--line); top:6%; right:0; transform:rotate(4deg); z-index:2;}
.mockup-top{font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.7;}
.mockup-word{font-family:var(--font-display); font-weight:700; font-size:1.9rem;}
.mockup-bottom{font-size:11px; opacity:.65;}

/* a qui s'adresse */
.public-section{background:var(--ink); color:var(--bg);}
.public-section .eyebrow{color:var(--coral);}
.public-section .lede{color:rgba(246,245,240,.75);}
.public-lede{
  text-align: center;
  margin: 0 auto 40px;
}
.title-public-cards h2{
  text-align: center;
  color:white !important;
}
.eyebrow-muted{
 color: var(--ink-soft);
}
.public-cards{display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:12px;}
@media (max-width:900px){ .public-cards{grid-template-columns:1fr;} }
@media screen and (max-width: 340px){
  .public-card.is-visible{
    padding:5px;
  }
}
@media screen and (max-width: 350px){
  #abonner,#compétences{
    font-size: 31.4px !important;
  }
}
.public-card{
  background:rgba(246,245,240,.05); border:1px solid rgba(246,245,240,.16); border-radius:var(--radius-lg); padding:32px;
  transition:background .3s ease, border-color .3s ease, transform .3s ease;
}
.public-card:hover{background:rgba(246,245,240,.09); border-color:rgba(246,245,240,.3); transform:translateY(-4px);}
.public-card .num{
  font-family:var(--font-mono); font-size:13px; color:var(--coral); display:block; margin-bottom:16px; letter-spacing:.08em;
}
.public-card h3{font-size:1.25rem; margin-bottom:.5em; color:var(--bg);}
.public-card p{margin:0; color:rgba(246,245,240,.7); font-size:.98em;}
.levels-note{
  margin-top:38px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:13.5px; color:rgba(246,245,240,.7);
}

.level-chip{display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border:1px solid rgba(246,245,240,.25); border-radius:999px;}
.level-dot{width:8px;height:8px;border-radius:50%;}

/* competences */
.competences-section{position:relative;}
.wheel-layout{display:grid; grid-template-columns:auto 1fr; gap:70px; align-items:start; margin-top:24px; width:80%;height:auto}
@media (max-width:980px){ .wheel-layout{grid-template-columns:1fr; justify-items:center;} }

.wheel-column{display:flex; flex-direction:column; align-items:center; gap:24px;}
.wheel-visual{position:relative; width:372px; height:372px; flex:none;}
@media (max-width:520px){
  .wheel-visual{width:280px; height:280px;}
  :root{--ring-radius:132px;}
}
.wheel-pointer{
  position:absolute; top:-4px; left:50%; transform:translateX(-50%);
  width:0; height:0; border-left:11px solid transparent; border-right:11px solid transparent;
  border-top:16px solid var(--ink); z-index:5; filter:drop-shadow(0 2px 2px rgba(0,0,0,.25));
}
.wheel-track{
  position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(
    var(--violet) 0deg 60deg,
    var(--coral) 60deg 120deg,
    var(--ink-soft) 120deg 180deg,
    var(--sage) 180deg 240deg,
    var(--amber) 240deg 300deg,
    var(--teal) 300deg 360deg
  );
  box-shadow: inset 0 0 0 8px var(--bg), var(--shadow-lg);
  transition: transform .9s cubic-bezier(.16,1,.3,1);
}
.wheel-hub{
  position:absolute; top:50%; left:50%; width:44%; height:44%; margin:-22% 0 0 -22%;
  border-radius:50%; background:var(--card); box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:12px; gap:6px;
}
.wheel-hub svg{width:32px;height:32px; color:var(--ink);}
.wheel-hub .hub-label{font-family:var(--font-display); font-weight:700; font-size:.98rem;}

.wheel-buttons{position:absolute; inset:0;}
.wheel-btn{
  position:absolute; top:50%; left:50%; width:80px; height:80px; margin:-40px;
  transform: rotate(calc(60deg * var(--i) + 30deg)) translate(0, calc(-1 * var(--ring-radius))) rotate(calc(-60deg * var(--i) - 30deg));
}
@media (max-width:520px){ .wheel-btn{width:60px; height:60px; margin:-30px;} }
.wheel-btn button{
  all:unset; box-sizing:border-box;
  width:100%; height:100%; border-radius:50%;
  background:var(--card); border:2px solid var(--line);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  cursor:pointer; transition: all .25s ease;
  text-align:center;
}
.wheel-btn button svg{width:19px; height:19px;}
.wheel-btn button .wb-label{font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:.02em; line-height:1.1; padding:0 4px;}
.wheel-btn button:hover{border-color:var(--violet); transform:scale(1.08); cursor:pointer; text-decoration: underline;}
.wheel-btn button[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--bg);}

.legend{display:flex; flex-wrap:wrap; flex-direction: column; gap:10px; max-width:400px; justify-content:center;}
.legend-item{display:flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:11.5px; color:var(--ink-soft);}
.legend-dot{width:9px;height:9px;border-radius:50%; flex:none;}

.exercise-panel{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(26px,4vw,44px); min-height:340px; box-shadow:var(--shadow-sm);
}
@media screen and (max-width: 390px){
  .exercise-panel{
    padding:5px;
  }
}
.exercise-panel .ex-eyebrow{display:flex; align-items:center; gap:10px; margin-bottom:8px;}
.ex-icon-badge{
  width:36px;height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--violet); color:#fff; flex:none;
}
.ex-icon-badge svg{width:18px;height:18px;}
.exercise-panel h3{font-size:1.55rem; margin-bottom:.3em;}
.ex-instruction{color:var(--ink-soft); margin-bottom:24px; max-width:62ch;}
.ex-status{font-family:var(--font-mono); font-size:13px; color:var(--violet); font-weight:700; margin:14px 0;}
.ex-actions{margin-top:24px; display:flex; gap:12px; flex-wrap:wrap;}

/* exercise widgets (shared) */
.letters-grid{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; max-width:460px;}
@media (max-width:480px){ .letters-grid{grid-template-columns:repeat(6,minmax(0,1fr));} }
@media screen and (max-width:480px){
  .letters-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
}
  

.letter-cell{
  all:unset; box-sizing:border-box; aspect-ratio:1; min-height:44px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:700; font-size:1.1rem;
  background:var(--bg); border:1.5px solid var(--line); border-radius:10px; cursor:pointer;
  transition:all .15s ease;
}
.letter-cell:hover{border-color:var(--violet);}
.letter-cell.found{background:var(--sage); border-color:var(--sage); color:#fff; cursor:default;}
.letter-cell.wrong{background:var(--coral); border-color:var(--coral); color:#fff;}

.word-grid{display:flex; flex-wrap:wrap; gap:10px;}
.word-chip{
  all:unset; box-sizing:border-box;
  padding:12px 20px; border-radius:999px; border:1.5px solid var(--line); background:var(--bg);
  font-weight:700; cursor:pointer; transition:all .18s ease; font-size:.98em;
}
.word-chip:hover{border-color:var(--violet);}
.word-chip[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink);}
.word-chip.correct{background:var(--sage); border-color:var(--sage); color:#fff;}
.word-chip.missed{background:var(--card); border-color:var(--coral); color:var(--coral); box-shadow:inset 0 0 0 1.5px var(--coral);}
.word-chip.wrong{background:var(--coral); border-color:var(--coral); color:#fff;}
.word-chip:disabled{cursor:default;}

.memory-timer{font-family:var(--font-mono); font-size:2.5rem; font-weight:700; color:var(--violet); margin:12px 0;}

.stroop-word{font-family:var(--font-display); font-weight:700; font-size:3.3rem; margin:20px 0; letter-spacing:.01em;}
.stroop-options{display:flex; flex-wrap:wrap; gap:12px;}
.stroop-btn{
  all:unset; box-sizing:border-box; padding:14px 26px; border-radius:12px; border:1.5px solid var(--line);
  background:var(--bg); font-weight:700; cursor:pointer; transition:all .18s ease;
}
.stroop-btn:hover{border-color:var(--violet);   cursor: pointer; text-decoration: underline;}
.stroop-btn.correct{background:var(--sage); border-color:var(--sage); color:#fff;}
.stroop-btn.wrong{background:var(--coral); border-color:var(--coral); color:#fff;}
.stroop-btn:disabled{cursor:default; opacity:.9;}

.analogy-sentence{font-size:1.3rem; margin:16px 0 24px; font-family:var(--font-display); font-weight:500;}
.analogy-sentence .blank{border-bottom:2px dashed var(--violet); padding:0 6px;}
.options-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; max-width:520px;}
@media (max-width:480px){ .options-grid{grid-template-columns:1fr;} }
.option-btn{
  all:unset; box-sizing:border-box; padding:15px 20px; border-radius:12px; border:1.5px solid var(--line);
  background:var(--bg); font-weight:700; cursor:pointer; text-align:left; transition:all .18s ease;
}
.option-btn:hover{border-color:var(--violet);   cursor: pointer; text-decoration: underline;}
.option-btn.correct{background:var(--sage); border-color:var(--sage); color:#fff;}
.option-btn.wrong{background:var(--coral); border-color:var(--coral); color:#fff;}
.option-btn:disabled{cursor:default;}

.orient-block{margin-bottom:28px;}
.orient-block:last-child{margin-bottom:0;}
.orient-q{font-weight:700; margin-bottom:12px;}

.feedback-box{
  margin-top:18px; padding:16px 20px; border-radius:14px; font-weight:700; font-size:.95em;
  display:none;
}
.feedback-box.show{display:block;}
.feedback-box.ok{background:var(--violet-tint); color:var(--violet-deep);}
.feedback-box.ko{background:var(--coral-tint); color:#B7411F;}
.feedback-box p{margin:5px 0 0; font-weight:400; color:var(--ink-soft);}


/* ========== DEVINETTES ========== */


.riddles-section{ background:#F5F5F7; }

.riddle-card{
  max-width:640px; margin:0 auto;
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:clamp(28px,4vw,44px);
  box-shadow:var(--shadow-sm);
}

.riddle-progress{
  display:flex; gap:9px; justify-content:center; margin-bottom:30px;
}
.riddle-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--line);
  transition:background .3s ease, transform .3s ease;
}
.riddle-dot.is-active{ background:var(--apple-blue); transform:scale(1.35); }
.riddle-dot.is-done{ background:var(--sage); }
.riddle-dot.is-wrong{ background:var(--coral); }

.riddle-eyebrow{
  font-family:var(--font-mono); font-size:12px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
  text-align:center; margin-bottom:10px;
}
.riddle-question{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.2rem,2.4vw,1.5rem);
  text-align:center; margin-bottom:26px; line-height:1.3;
}
.riddle-options{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;
}
@media (max-width:560px){ .riddle-options{ grid-template-columns:1fr; } }

.riddle-actions{ margin-top:26px; display:flex; justify-content:center; }

.riddle-score{
  text-align:center;
}
.riddle-score-num{
  font-family:var(--font-display); font-weight:700;
  font-size:3rem; color:var(--apple-blue); margin-bottom:6px;
}
.riddle-score-label{
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:20px;
}
.riddle-score-msg{
  color:var(--ink-soft); max-width:46ch; margin:0 auto 28px;
}
.riddle-score-actions{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
}
/* auteure */
.expertise-grid{display:grid; grid-template-columns:auto 1fr; gap:56px; align-items:start;}
@media (max-width:820px){ .expertise-grid{grid-template-columns:1fr; text-align:center;} }
.avatar {
width: 40vw;
height:auto;
aspect-ratio: 1 / 1;
  margin: 0 auto;
  overflow: hidden;
  flex: none;
}

.avatar img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center;
}
.expertise-text.btn-ghost-light {
  text-decoration: underline;
  background: #FFFFFF;
  color: #000;
  box-shadow: white;
}
.expertise-text.btn-ghost-light:hover{
  background: var(--apple-blue);
  color: white;
  background: #000;
  border: white;
}
.faq-answer a{
  color: var(--apple-blue);
  text-decoration: underline;
}
.faq-section a{
  color: var(--apple-blue);
  text-decoration: underline;
}
#traitements h2{
  color: white;
}
#traitements h2#traitements-sources{
  color: #000;
}
#traitements-src a{
  color: var(--ink-soft);
}

.traitements.public-card {
    position: relative;
    display: flex;
    flex-direction: column;
}

.traitements.public-card .btn-ghost-light {
    margin-top: auto;
    align-self: center;
}
#sla.a, #aphasie.a, #alzheimer.a, #dft.a, #corps-de-lewy.a, #parkinson.a, #app.a {
  text-decoration: underline;
  color: var(--apple-blue);
}
#aa{
  text-decoration: underline;
  color: var(--apple-blue);
}
.expertise-text svg {
    width: 30px;
    height: 30px;
    color: #0A66C2;
    margin-top: 15px;
}
.hero-content svg{
      width: 30px;
    height: 30px;
    color: #0A66C2;
    margin-top: 15px;
}
.nav-inner svg{
      width: 30px;
    height: 30px;
    color: #0A66C2;
    margin-top: 10px;
    margin-left: 5px;
}
/* =========================================================
   AVATAR — ANIMATION 3D AU SCROLL
   ========================================================= */

.avatar {
  perspective: 900px;
  transform-style: preserve-3d;

  /* état initial : invisible et décalé */
  opacity: 0;
  transform:
    perspective(900px)
    rotateY(-70deg)
    rotateX(25deg)
    translate3d(120px, -40px, 80px)
    scale(.78);
}

/* L'avatar ne démarre que lorsque son parent .reveal
   devient visible */

.expertise-grid.is-visible .avatar {
  animation:
    avatarTiltIn
    .9s
    cubic-bezier(.22, 1, .36, 1)
    .12s
    both;
}

@keyframes avatarTiltIn {

  0% {
    opacity: 0;

    transform:
      perspective(900px)
      rotateY(-70deg)
      rotateX(25deg)
      translate3d(120px, -40px, 80px)
      scale(.78);
  }

  55% {
    opacity: 1;

    transform:
      perspective(900px)
      rotateY(12deg)
      rotateX(-5deg)
      translate3d(-8px, 4px, 20px)
      scale(1.04);
  }

  78% {
    transform:
      perspective(900px)
      rotateY(-4deg)
      rotateX(2deg)
      translate3d(3px, -2px, 5px)
      scale(.99);
  }

  100% {
    opacity: 1;

    transform:
      perspective(900px)
      rotateY(0deg)
      rotateX(0deg)
      translate3d(0, 0, 0)
      scale(1);
  }
}


/* Image de profil */

.avatar img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center;

  border-radius: 50%;
}
.credentials{list-style:none; margin:26px 0 0; padding:0; display:flex; flex-direction:column; gap:14px;}
@media (max-width:820px){ .credentials{align-items:center;} }
.credentials li{display:flex; gap:10px; align-items:flex-start; font-family:var(--font-mono); font-size:13.5px; color:var(--ink-soft);}
@media (max-width:820px){ .credentials li{flex-direction:column; align-items:center; gap:2px;} }
.credentials li svg{width:16px;height:16px; flex:none; margin-top:3px; color:var(--violet);}
.expertise-text p{color:var(--ink-soft); max-width:66ch;}
.expertise-text h3{font-size:1.12em; color:var(--ink); margin-bottom:.4em;}
.expertise-cta{margin-top:26px;}

/* abonnements */
#abonner, #orth{
  color:white
}
.pricing-grid{display:grid; grid-template-columns:repeat(2,2fr); gap:28px; margin-top:18px;}
@media (max-width:820px){ .pricing-grid{grid-template-columns:1fr;} }
.price-card{
  background:var(--card); border:1.5px solid var(--line); border-radius:var(--radius-lg); padding:38px;
  display:flex; flex-direction:column; transition:transform .3s ease, box-shadow .3s ease; width: 80%; height: auto; margin: 0 5% 0 5%;
}
@media screen and (max-width: 390px){
  .price-card{
    padding:5px;
  }
}
#buy,#bbuy{
  font-size:clamp(13px, 3.5vw, 24px);
  line-height:1.2;
  text-align:center;
  white-space:normal;
  overflow-wrap:break-word;
  word-break:normal;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}

.price-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg);}
.price-card.featured{border-color:var(--violet); box-shadow:var(--shadow-sm); position:relative;}
.price-tag{
  position:absolute; top:-15px; right:30px; background:var(--violet); color:#fff;
  font-family:var(--font-mono); font-weight:700; font-size:11.5px; letter-spacing:.06em;
  padding:7px 16px; border-radius:999px; text-transform:uppercase;
}
.price-card h3{font-size:1.35rem; margin-bottom:4px;}
.price-card .price{font-family:var(--font-display); font-size:2.9rem; font-weight:700; margin:16px 0 4px;}
.price-card .price span{font-family:var(--font-mono); font-size:.85rem; font-weight:600; color:var(--ink-soft);}
.price-card .price-sub{font-size:.9em; color:var(--ink-soft); margin-bottom:24px;}
.feature-list{list-style:none; margin:0 0 30px; padding:0; display:flex; flex-direction:column; gap:13px; flex:1;}
.feature-list li{display:flex; gap:10px; align-items:flex-start; font-size:.98em;}
.feature-list li svg{width:18px; height:18px; flex:none; margin-top:3px; color:var(--sage);}
.secure-note{
  display:flex; align-items:center; gap:10px; justify-content:center; margin-top:32px;
  font-family:var(--font-mono); font-size:12.5px; color:var(--ink-soft);
}

.paper-note{margin-top:22px; text-align:center; font-size:.95em; color:var(--ink-soft); max-width:60ch; margin-left:auto; margin-right:auto;}
.paper-note a{text-decoration:underline; font-weight:700; color:var(--ink);}
#mail, #ortho{
	place-self: center;
	background: linear-gradient(90deg, #00f, #0ff, #00f) -100%/ 200%;
	/* being excessively careful with compat, 
	 * though this has been supported unprefixed and 
	 * in the shorthand across major browsers for a while */
	-webkit-background-clip: text;
	        background-clip: text;
	/* use color, don't use -webkit-text-fill-color anymore, 
	 * was meant to solve a problem we haven't had in years */
	color: transparent;
	animation: shimmer 2s linear infinite
}
#mail, #ortho :hover{
  text-decoration: underline #00f;
}


@keyframes shimmerHeartbeat {
  /* -------- repos -------- */
  0%   { transform: scale(1);     filter: brightness(1)    hue-rotate(0deg);  background-position: -150% 0; }

  /* -------- T (lub) : montée lente, sommet doux, redescente lente -------- */
  20% { transform: scale(1.018); filter: brightness(1.08) hue-rotate(8deg);  background-position: -90% 0;  }
  40% { transform: scale(1);     filter: brightness(1)    hue-rotate(0deg);  background-position: -30% 0;  }

  /* -------- pause courte entre les deux battements -------- */

  /* -------- T (dub) : deuxième montée, légèrement plus discrète -------- */
  60% { transform: scale(1.012); filter: brightness(1.05) hue-rotate(6deg);  background-position: 40% 0;   }
  80% { transform: scale(1);     filter: brightness(1)    hue-rotate(0deg);  background-position: 90% 0;   }


}

#mail, #ortho{
  animation: shimmerHeartbeat 6s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}


/* trust badges */
.badges-strip{background:var(--ink); color:var(--bg);}
.badges-row{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(246,245,240,.14); border-radius:var(--radius-lg); overflow:hidden;}
@media (max-width:820px){ .badges-row{grid-template-columns:repeat(2,1fr);} }
.badge-item{background:var(--ink); padding:34px 28px; display:flex; flex-direction:column; gap:10px;}
.badge-item svg{width:24px;height:24px; color:var(--coral);}
.badge-item strong{font-family:var(--font-display); font-size:1.05rem; font-weight:700;}
.badge-item span{font-size:13.5px; color:rgba(246,245,240,.65);}

/* faq */
.faq-list{ display:flex; flex-direction:column; gap:14px; margin-top:8px;}
.faq-list details{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md); padding:8px 24px; transition:border-color .2s ease;}
.faq-list details[open]{border-color:var(--violet);}
.faq-list summary{
  cursor:pointer; list-style:none; padding:16px 0; font-weight:700; font-size:1.06em;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq-list summary::-webkit-details-marker{display:none;}
.faq-list summary .chev{transition:transform .25s ease; flex:none; color:var(--violet);}
.faq-list details[open] summary .chev{transform:rotate(180deg);}
.faq-list .faq-answer{padding:0 0 20px; color:var(--ink-soft);}

/* newsletter band */
.newsletter-band{
  background:var(--violet); color:#fff; border-radius:var(--radius-lg);
  padding:56px clamp(28px,5vw,64px); display:flex; justify-content:space-between; align-items:center; gap:40px; flex-wrap:wrap;
}
.newsletter-band h2{color:#fff; font-size:clamp(1.8rem,3vw,2.4rem); max-width:16ch;}
.newsletter-band p{color:rgba(255,255,255,.8); max-width:44ch; margin:0;}
.newsletter-form{display:flex; gap:10px; flex-wrap:wrap;}
.newsletter-form input{
  font-family:var(--font-body); font-size:15px; padding:15px 20px; border-radius:999px; border:none;
  min-width:240px; background:rgba(255,255,255,.14); color:#fff;
}
.newsletter-form input::placeholder{color:rgba(255,255,255,.65);}
.newsletter-form button{
  all:unset; box-sizing:border-box; background:#fff; color:var(--violet-deep); font-weight:700;
  padding:15px 26px; border-radius:999px; cursor:pointer; transition:transform .2s ease;
}
.newsletter-form button:hover{transform:translateY(-2px); cursor: pointer; text-decoration: underline;}
.newsletter-msg{width:100%; font-size:13.5px; margin-top:4px; color:rgba(255,255,255,.85); min-height:1.2em;}

/* footer */
footer{background:var(--ink); color:rgba(246,245,240,.75); padding:70px 0 36px; font-size:.92em;}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:48px;}
@media (max-width:760px){ .footer-grid{grid-template-columns:1fr;} }
.disclaimer{
  background:rgba(246,245,240,.05); border:1px solid rgba(246,245,240,.15);
  border-radius:var(--radius-md); padding:24px 26px; margin-bottom:8px;
}
.disclaimer h4{color:var(--coral); font-family:var(--font-mono); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:12px;}
.disclaimer p{margin:0;}
footer h4.legal-title{color:var(--bg); font-family:var(--font-mono); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:16px;}
.legal-block dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:7px 16px; font-size:.95em;}
.legal-block dt{color:rgba(246,245,240,.48);}
.legal-block dd{margin:0;}
.footer-bottom{
  margin-top:44px; padding-top:26px; border-top:1px solid rgba(246,245,240,.14);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.85em; color:rgba(246,245,240,.5);
}
footer a{text-decoration:underline;}
footer a:hover{color:var(--coral);}

/* =========================================================
   HERO PRODUIT — COUVERTURE ReCOGNITION
   (variables --cover-* déplacées dans le :root principal)
   ========================================================= */

/* Hero principal */

.hero{
  position:relative;
  min-height:calc(100svh - 64px);
  display:flex;
  align-items:center;
  overflow:hidden;
  background:
    radial-gradient(
      55% 60% at 15% 45%,
      rgba(41,151,255,.13),
      transparent 70%
    ),
    radial-gradient(
      45% 50% at 88% 15%,
      rgba(123,97,255,.10),
      transparent 70%
    ),
    #000;
  color:#fff;
  padding:
    clamp(70px,9vw,120px)
    0
    clamp(80px,10vw,130px);
}

.hero-inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:
    minmax(340px,.88fr)
    minmax(440px,1.12fr);
  gap:clamp(55px,8vw,110px);
  align-items:center;
}

/* Lumières décoratives */

.hero-glow{
  position:absolute;
  width:420px;
  height:420px;
  border-radius:50%;
  filter:blur(100px);
  pointer-events:none;
  opacity:.28;
}

.hero-glow-blue{
  background:var(--cover-blue);
  left:-180px;
  bottom:-180px;
}

.hero-glow-magenta{
  background:var(--cover-magenta);
  right:-220px;
  top:-220px;
}

/* Image de couverture */

/* =========================================================
   MAGAZINE 3D
   Adaptation du CSS Book Effect
   ========================================================= */

.sf-magazine{
  --magazine-pages-1:#e7e7e9;
  --magazine-pages-2:#f1f1f3;
  --magazine-pages-3:#fafafa;

  width:min(100%,430px);
  margin:0 auto;
}


/* ---------------------------------------------------------
   Objet 3D
   --------------------------------------------------------- */

.magazine-wrapper{
  display:block;
  position:relative;

  width:100%;
  aspect-ratio:448 / 613;

  perspective:1400px;

  text-decoration:none;

  transform-style:preserve-3d;

  transition:
    transform .35s ease;

  will-change:transform;
}


/* ---------------------------------------------------------
   Toutes les couches du magazine
   --------------------------------------------------------- */

.magazine-wrapper > div{
  position:absolute;

  left:0;
  top:0;

  width:100%;
  height:100%;

  border-radius:
    0
    4px
    4px
    0;

  transform-style:preserve-3d;

  transform-origin:
    0% 50% 0;

  transition:
    transform .55s cubic-bezier(.2,.75,.2,1);

  will-change:transform;

  box-shadow:
    1px 0 4px -1px rgba(0,0,0,.12);
}


/* ---------------------------------------------------------
   Pages
   --------------------------------------------------------- */

.magazine-page-1{
  background:var(--magazine-pages-1);

  transform:
    translateZ(-3px);
}

.magazine-page-2{
  background:var(--magazine-pages-2);

  transform:
    translateZ(-6px);
}

.magazine-page-3{
  background:var(--magazine-pages-3);

  transform:
    translateZ(-9px);
}


/* ---------------------------------------------------------
   Tranches / pages visibles
   --------------------------------------------------------- */

.magazine-page{
  overflow:hidden;
}

.magazine-page::after{
  content:"";

  position:absolute;

  top:3px;
  right:2px;
  bottom:3px;
  left:10px;

  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,.025) 0,
      rgba(0,0,0,.025) 1px,
      transparent 1px,
      transparent 3px
    );

  opacity:.65;

  pointer-events:none;
}


/* ---------------------------------------------------------
   Couverture
   --------------------------------------------------------- */

.magazine-cover{
  z-index:4;

  overflow:hidden;

  background:#111;

  transform:
    translateZ(12px);

  box-shadow:
    0 0 0 1px rgba(255,255,255,.12),
    8px 10px 25px rgba(0,0,0,.28);
}


/* Image réelle de la couverture */

.magazine-cover-image{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;

  border-radius:
    0
    4px
    4px
    0;

  user-select:none;
  -webkit-user-drag:none;
}


/* ---------------------------------------------------------
   État normal
   --------------------------------------------------------- */

.magazine-wrapper{
  filter:
    drop-shadow(
      25px 35px 35px rgba(0,0,0,.28)
    );

  transform:
    rotateY(-4deg)
    rotateZ(-1deg);
}


/* ---------------------------------------------------------
   Interaction 3D
   --------------------------------------------------------- */

.magazine-wrapper:hover{
  transform:
    rotateY(0deg)
    rotateZ(0deg)
    translateY(-5px);
}


/* Les pages commencent à s'ouvrir */

.magazine-wrapper:hover .magazine-page-1{
  transform:
    rotateY(-10deg)
    translateZ(-3px);
}

.magazine-wrapper:hover .magazine-page-2{
  transform:
    rotateY(-18deg)
    translateZ(-6px);
}

.magazine-wrapper:hover .magazine-page-3{
  transform:
    rotateY(-24deg)
    translateZ(-9px);
}


/* La couverture pivote autour de la reliure */

.magazine-wrapper:hover .magazine-cover{
  transform:
    rotateY(-34deg)
    translateZ(12px);

  box-shadow:
    4px 8px 20px rgba(0,0,0,.35);
}


/* ---------------------------------------------------------
   Ombre sous le magazine
   --------------------------------------------------------- */

.magazine-wrapper::after{
  content:"";

  position:absolute;

  left:8%;
  right:4%;
  bottom:-28px;

  height:45px;

  background:rgba(0,0,0,.35);

  filter:blur(24px);

  transform:
    translateZ(-30px)
    rotate(-2deg);

  opacity:.65;

  pointer-events:none;

  transition:
    transform .55s ease,
    opacity .55s ease;
}

.magazine-wrapper:hover::after{
  transform:
    translateZ(-30px)
    translateX(15px)
    rotate(-1deg);

  opacity:.48;
}


/* ---------------------------------------------------------
   Légende
   --------------------------------------------------------- */

.hero-product-caption{
  position:relative;
  z-index:5;

  width:min(100%,430px);

  margin-top:35px;

  display:flex;
  justify-content:space-between;
  gap:20px;

  font-family:var(--font-mono);
  font-size:10px;

  letter-spacing:.08em;
  text-transform:uppercase;

  color:rgba(247,248,252,.55);
}

.hero-product-caption{
  width:min(100%,430px);
  margin-top:24px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(247,248,252,.58);
}

/* Texte du hero */

.hero-content{
  max-width:650px;
}

.hero .eyebrow{
  color:var(--cover-lime);
}

.hero .eyebrow::before{
  background:currentColor;
}

/* .hero-title et .hero-title span : styles fusionnés plus bas
   (section "Direction artistique inspirée Apple"), avec ajustement
   de taille pour le nouveau H1 plus long (SEO). */
#ortho{
    font-size:clamp(1.3rem,2.2vw,2rem)
}
.hero-lede{
  max-width:58ch;
  margin-top:28px;
  color:rgba(247,248,252,.76);
  font-size:clamp(1.05rem,1.5vw,1.2rem);
}

.hero-cta{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:34px;
}

.hero .btn-primary{
  background:var(--cover-red);
  color:#fff;
  border-color:var(--cover-red);
  box-shadow:0 12px 30px rgba(255,17,17,.22);
}

.hero .btn-primary:hover{
  background:#D90000;
  border-color:#D90000;
  box-shadow:0 18px 40px rgba(255,17,17,.32);
  cursor: pointer;
  text-decoration: underline;
}

.hero .btn-ghost-light{
  color:var(--cover-white);
  border-color:rgba(247,248,252,.45);
  background:transparent;
}

.hero .btn-ghost-light:hover{
  color:var(--cover-navy);
  background:var(--cover-white);
  border-color:var(--cover-white);
  cursor: pointer;
  text-decoration: underline;
}

/* Informations commerciales */

.hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:28px;
  margin-top:40px;
  padding-top:24px;
  border-top:1px solid rgba(247,248,252,.14);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(247,248,252,.5);
}

.hero-meta span{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.hero-meta strong{
  color:var(--cover-white);
  font-family:var(--font-display);
  font-size:1.05rem;
  letter-spacing:0;
  text-transform:none;
}

/* Adaptation mobile */

@media (max-width:900px){

  .hero{
    min-height:auto;
    padding:60px 0 80px;
  }

  .hero-inner{
    grid-template-columns:1fr;
    gap:50px;
  }

  .hero-product{
    order:-1;
  }

  .hero-product-frame{
    width:min(82vw,390px);
  }

  .hero-product-caption{
    width:min(82vw,390px);
  }

  .hero-content{
    max-width:none;
    text-align:center;
  }

  /* .hero-title : styles définis dans la media query finale plus bas */

  .hero-lede{
    margin-left:auto;
    margin-right:auto;
  }

  .hero-cta{
    justify-content:center;
  }

  .hero-meta{
    justify-content:center;
    text-align:left;
  }
}

@media (max-width:520px){

  .hero{
    padding-top:40px;
  }

  .hero-product-frame{
    width:88vw;
    padding:9px;
  }

  .hero-product-caption{
    width:88vw;
    font-size:9px;
  }

  /* .hero-title : styles définis dans la media query finale plus bas */

  .hero-cta{
    flex-direction:column;
  }

  .hero-cta .btn{
    width:100%;
  }

  .hero-meta{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    text-align:center;
  }
}
/* =========================================================
   ReCognition — Direction artistique inspirée Apple
   (variables déplacées dans le :root principal en tête de fichier)
   ========================================================= */


/* =========================================================
   BASE
   ========================================================= */

html{
  background:var(--apple-light);
}

body{
  background:black;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.55;
  letter-spacing:-.01em;
}

h1,
h2,
h3,
h4{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-.035em;
  line-height:1.05;
}

.lede{
  color:#6E6E73;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

header.site-nav{
  background:white;
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.08);
}

.nav-inner{
  padding-top:15px;
  padding-bottom:15px;
  display: flex;
  justify-content: center;
  width: 90%;
}

.brand{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-.035em;
  
}

.brand .accent-dot{
  color:var(--apple-blue);
}

.brand-mark{
  opacity:.9;
}

.nav-links{
  gap:28px;
  font-size:13px;
  font-weight:500;
}

.nav-links a{
  color:#4A4A4F;
  opacity:1;
  transition:
    color .25s ease,
    opacity .25s ease;
}

.nav-links a:hover{
  color:var(--apple-blue);
  opacity:1;
}


/* =========================================================
   BOUTONS
   ========================================================= */

.btn{
  font-size:15px;
  font-weight:600;
  padding:13px 23px;
  border-radius:999px;
  transition:
    transform .3s cubic-bezier(.2,.8,.2,1),
    background .3s ease,
    box-shadow .3s ease,
    color .3s ease;
}

.btn:hover{
  transform:translateY(-2px);
  cursor: pointer;
  text-decoration: underline;
}

.btn-primary{
  background:white;
  color:var(--apple-blue);
  border-color:var(--apple-blue);
  box-shadow:none;
}
#buy{
  background:var(--apple-blue);
  color:white;
  border-color:var(--apple-blue);
  box-shadow:none;
}
#buy:hover{
  background: var(--apple-blue-deep);
}
.btn-primary:hover{
  background:var(--apple-blue-deep);
  color:white;
  box-shadow:
    0 10px 30px rgba(0,113,227,.22);
  cursor: pointer;
  text-decoration: underline;
}

.btn-outline{
  border-color:#1D1D1F;
  color:#1D1D1F;
}

.btn-outline:hover{
  background:#1D1D1F;
  color:#fff;
  cursor: pointer;
  text-decoration: underline;
}

.btn-ghost-light{
  border-color:rgba(255,255,255,.35);
  color:#fff;
  background:transparent;
}

.btn-ghost-light:hover{
  border-color:#fff;
  background:#fff;
  color:#000;
  cursor: pointer;
  text-decoration: underline;
}


/* =========================================================
   HERO
   (règles .hero et .hero-inner fusionnées plus haut, dans la
   section "HERO PRODUIT — COUVERTURE ReCOGNITION")
   ========================================================= */


/* Halo lumineux */

.hero-glow{
  filter:blur(120px);
  opacity:.18;
}

.hero-glow-blue{
  background:#2997FF;
}

.hero-glow-magenta{
  background:#7B61FF;
}


/* Couverture */

.hero-product-frame{
  width:min(100%,430px);

  padding:10px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.16),
      rgba(255,255,255,.025)
    );

  border:1px solid rgba(255,255,255,.18);

  border-radius:26px;

  box-shadow:
    0 60px 120px rgba(0,0,0,.55),
    0 0 80px rgba(41,151,255,.08);

  transform:none;

  transition:
    transform .7s cubic-bezier(.2,.8,.2,1),
    box-shadow .7s ease;
}

.hero-product-frame::before{
  inset:-1px;
  border:none;
  border-radius:27px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.24),
      transparent 35%,
      transparent 65%,
      rgba(255,255,255,.08)
    );

  opacity:.7;
}

.hero-product-frame:hover{
  transform:
    translateY(-10px)
    scale(1.012);

  box-shadow:
    0 75px 140px rgba(0,0,0,.6),
    0 0 100px rgba(41,151,255,.12);
}

.hero-cover-image{
  border-radius:17px;
}


/* Légende sous le produit */

.hero-product-caption{
  margin-top:22px;
  color:#6E6E73;
  font-size:10px;
  letter-spacing:.08em;
}


/* Texte */

.hero .eyebrow{
  color:#86868B;
}

.hero .eyebrow::before{
  background:#86868B;
}

.hero-title{
  max-width:23ch;
  margin:.35em 0 .35em;
  font-size:
    clamp(2.1rem,3.4vw,3.4rem);

  line-height:1.08;
  letter-spacing:-.02em;

  color:#F5F5F7;
}

.hero-title span{
  display:block;
  font-style:italic;
  font-weight:500;
  color:#fff;

  background:
    linear-gradient(
      90deg,
      #FFFFFF 0%,
      #A9CFFF 45%,
      #2997FF 100%
    );

  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;

  text-shadow:none;
}

.hero-lede{
  color:#A1A1A6;
  font-size:clamp(1.05rem,1.4vw,1.18rem);
  max-width:52ch;
}

.hero-meta{
  border-top-color:rgba(255,255,255,.12);
  color:#6E6E73;
}

.hero-meta strong{
  color:#F5F5F7;
}


/* =========================================================
   SECTIONS GÉNÉRALES
   ========================================================= */

section{
  padding:
    clamp(90px,10vw,150px)
    0;
}

.section-head{
  max-width:62ch;
  margin-bottom:60px;
}

.section-head h2{
  font-size:
    clamp(2.4rem,5vw,4.2rem);

  letter-spacing:-.05em;
}

.section-head .eyebrow{
  color:var(--apple-gray);
}


/* =========================================================
   MENSUEL
   ========================================================= */

#mensuel{
  background:#F5F5F7;
}

.theme-pill{
  background:#fff;
  border-color:rgba(0,0,0,.08);
  box-shadow:0 4px 15px rgba(0,0,0,.035);
  transition:
    transform .3s ease,
    box-shadow .3s ease;
}

.theme-pill:hover{
  transform:translateY(-3px);
  box-shadow:
    0 12px 28px rgba(0,0,0,.08);
  background: var(--apple-blue);
  color: white;
  text-decoration: underline ;
  cursor: pointer;
}


/* =========================================================
   SECTION PUBLIC
   ========================================================= */

.public-section{
  background:#000;
  color:#F5F5F7;
  border:none;
}

.public-section .eyebrow{
  color:#86868B;
}

.public-section .lede{
  color:#86868B;
}

.public-card{
  background:#151517;
  border:1px solid rgba(255,255,255,.10);
  border-radius:24px;

  padding:34px;

  transition:
    transform .4s cubic-bezier(.2,.8,.2,1),
    background .4s ease,
    border-color .4s ease;
}

.public-card:hover{
  background:#1C1C1E;
  border-color:rgba(255,255,255,.18);
  transform:translateY(-6px);
}

.public-card .num{
  color:#86868B;
}

.public-card h3{
  color:#F5F5F7;
}

.public-card p{
  color:#86868B;
}

.levels-note{
  color:#86868B;
}

.level-chip{
  background:#151517;
  border-color:rgba(255,255,255,.14);
}


/* =========================================================
   COMPÉTENCES / ROUE
   ========================================================= */

.competences-section{
  background:#F5F5F7;
}

.wheel-track{
  background:
    conic-gradient(
      #2997FF 0deg 60deg,
      #7B61FF 60deg 120deg,
      #48484A 120deg 180deg,
      #34C759 180deg 240deg,
      #FF9F0A 240deg 300deg,
      #32ADE6 300deg 360deg
    );

  box-shadow:
    inset 0 0 0 8px #F5F5F7,
    0 30px 70px -30px rgba(0,0,0,.35);
}

.wheel-hub{
  background:#fff;
  box-shadow:
    0 20px 50px -25px rgba(0,0,0,.35);
}

.wheel-btn button{
  background:#fff;
  border-color:rgba(0,0,0,.10);

  box-shadow:
    0 10px 25px -15px rgba(0,0,0,.3);
}

.wheel-btn button:hover{
  border-color:var(--apple-blue);
  box-shadow:
    0 15px 30px -15px rgba(0,113,227,.25);
  text-decoration: underline;
  cursor: pointer;
}

.wheel-btn button[aria-pressed="true"]{
  background:#000;
  border-color:#000;
  color:#fff;
}

.exercise-panel{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:28px;

  box-shadow:
    0 30px 70px -35px rgba(0,0,0,.25);
}

.ex-icon-badge{
  background:#000;
  color:#fff;
}

.ex-status{
  color:var(--apple-blue);
}
@media screen and (max-width: 382px){
.wheel-column{
width: 40vw;
height: auto;
margin: auto;
}
}
@media screen and (max-width:383.33){
  #wheelTrack{
  transform:scale(0.3);
  transform-origin:center center;
}
  }

  
/* =========================================================
   WIDGETS D'EXERCICES
   ========================================================= */

.letter-cell,
.word-chip,
.stroop-btn,
.option-btn{
  background:#F5F5F7;
  border-color:rgba(0,0,0,.10);
}

.letter-cell:hover,
.word-chip:hover,
.stroop-btn:hover,
.option-btn:hover{
  border-color:var(--apple-blue);
    cursor: pointer;
  text-decoration: underline;
}

.letter-cell.found,
.word-chip.correct,
.stroop-btn.correct,
.option-btn.correct{
  background:#34C759;
  border-color:#34C759;
  color:#fff;
}

.letter-cell.wrong,
.word-chip.wrong,
.stroop-btn.wrong,
.option-btn.wrong{
  background:#FF453A;
  border-color:#FF453A;
  color:#fff;
}

.memory-timer{
  color:#000;
}


/* =========================================================
   EXPERTISE
   ========================================================= */

.expertise-section{
  background:#000;
  color:#F5F5F7;
}

.expertise-section .eyebrow{
  color:#86868B;
}

.expertise-text p{
  color:#86868B;
}

.expertise-text h3{
  color:#F5F5F7;
}


.credentials li{
  color:#86868B;
}

.credentials li svg{
  color:#2997FF;
}


/* =========================================================
   ABONNEMENTS
   ========================================================= */

.pricing-grid{
  gap:24px;
}

.price-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:28px;

  box-shadow:
    0 20px 50px -35px rgba(0,0,0,.3);

  transition:
    transform .4s cubic-bezier(.2,.8,.2,1),
    box-shadow .4s ease;
}

.price-card:hover{
  transform:translateY(-8px);

  box-shadow:
    0 35px 75px -35px rgba(0,0,0,.35);
}

.price-card.featured{
  border-color:var(--apple-blue);

  box-shadow:
    0 30px 70px -30px rgba(0,113,227,.25);
}

.price-tag{
  background:var(--apple-blue);
  color:#fff;
}

.price-card .price{
  color:#000;
}

.feature-list li svg{
  color:#34C759;
}

.secure-note{
  color:#86868B;
}


/* =========================================================
   FAQ
   ========================================================= */

.faq-section{
  background:#F5F5F7;
  border-top:1px solid rgba(0,0,0,.06);
}

.faq-list details{
  background:#fff;
  border-color:rgba(0,0,0,.08);
  border-radius:20px;

  transition:
    border-color .25s ease,
    box-shadow .25s ease;
}

.faq-list details:hover{
  border-color:rgba(0,0,0,.16);
}

.faq-list details[open]{
  border-color:rgba(41,151,255,.45);

  box-shadow:
    0 15px 40px -25px rgba(0,0,0,.25);
}

.faq-list summary .chev{
  color:var(--apple-blue);
}

.faq-list .faq-answer{
  color:#6E6E73;
}
.btn-ghost-light-faq{
  color: rgb(255, 255, 255);
  background: #000;
  margin-top: 10px;
}

/* =========================================================
   NEWSLETTER / BANDES
   ========================================================= */

.newsletter-band{
  background:#000;
  border-radius:30px;
  box-shadow:
    0 40px 90px -45px rgba(0,0,0,.4);
}

.newsletter-band h2{
  color:#F5F5F7;
}

.newsletter-band p{
  color:#86868B;
}


/* =========================================================
   BADGES
   ========================================================= */

.badges-strip{
  background:#000;
}

.badges-row{
  background:rgba(255,255,255,.08);
  border-radius:28px;
}

.badge-item{
  background:#151517;
}

.badge-item svg{
  color:#2997FF;
}

.badge-item span{
  color:#86868B;
}


/* =========================================================
   FOOTER
   ========================================================= */

footer{
  background:#000;
  color:#86868B;
  border-top:1px solid rgba(255,255,255,.08);
}

.disclaimer{
  background:#151517;
  border-color:rgba(255,255,255,.10);
}

.disclaimer h4{
  color:#F5F5F7;
}

footer h4.legal-title{
  color:#F5F5F7;
}

.legal-block dt{
  color:#515154;
}

.footer-bottom{
  border-top-color:rgba(255,255,255,.10);
  color:#515154;
}

footer a{
  transition:color .2s ease;
}

footer a:hover{
  color:#2997FF;
}


/* MARQUEE : classes non utilisées dans le HTML actuel, supprimées. */


/* =========================================================
   ANIMATIONS / REVEAL
   ========================================================= */

.reveal{
  opacity:0;
  transform:translateY(35px);
  transition:
    opacity .9s cubic-bezier(.2,.7,.2,1),
    transform .9s cubic-bezier(.2,.7,.2,1);
}

.reveal.is-visible{
  opacity:1;
  transform:none;
}

.theme-row > * {
  opacity: 0;
  transform:
    translateY(-600px)
    rotateX(-30deg)
    scale(0);

  transform-origin: 50% 100%;
}

.theme-row.is-visible > * {
  animation:
    slide-in-elliptic-top-fwd
    0.7s
    cubic-bezier(0.250, 0.460, 0.450, 0.940)
    both;
}

.theme-row.is-visible > *:nth-child(1) {
  animation-delay: 0s;
}

.theme-row.is-visible > *:nth-child(2) {
  animation-delay: 0.15s;
}

.theme-row.is-visible > *:nth-child(3) {
  animation-delay: 0.30s;
}

.theme-row.is-visible > *:nth-child(4) {
  animation-delay: 0.45s;
}

.theme-row.is-visible > *:nth-child(5) {
  animation-delay: 0.60s;
}

.theme-row.is-visible > *:nth-child(6) {
  animation-delay: 0.75s;
}

@keyframes slide-in-elliptic-top-fwd {
  0% {
    transform:
      translateY(-600px)
      rotateX(-30deg)
      scale(0);

    transform-origin: 50% 100%;
    opacity: 0;
  }

  100% {
    transform:
      translateY(0)
      rotateX(0)
      scale(1);

    transform-origin: 50% 1400px;
    opacity: 1;
  }
}
/* =========================================================
   H2 — ÉLABORÉ PAR UNE ORTHOPHONISTE
   ========================================================= */

.expertise-section h2 {
  opacity: 0;

  transform:
    translateY(-500px)
    rotateX(-30deg)
    scale(0);

  transform-origin: 50% 100%;
}

#ortho.is-visible {
  animation:
    slide-in-elliptic-top-fwd
    0.8s
    cubic-bezier(0.250, 0.460, 0.450, 0.940)
    both,
    shimmerHeartbeat 6s cubic-bezier(0.45, 0, 0.2, 1) infinite;
  
}
.hero-content h2{
  animation: shimmerHeartbeat 6s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}
@keyframes slide-in-elliptic-top-fwd {
  0% {
    transform:
      translateY(-500px)
      rotateX(-30deg)
      scale(0);

    transform-origin: 50% 100%;
    opacity: 0;
  }

  100% {
    transform:
      translateY(0)
      rotateX(0)
      scale(1);

    transform-origin: 50% 1400px;
    opacity: 1;
  }
  
}
/* PRICING GRID — ANIMATION */

.pricing-grid > * {
  opacity: 0;

  transform:
    translateY(-500px)
    rotateX(-30deg)
    scale(0);

  transform-origin: 50% 100%;
}

.pricing-grid.is-visible > * {
  animation:
    pricing-slide-in
    0.8s
    cubic-bezier(0.250, 0.460, 0.450, 0.940)
    both;
}

.pricing-grid.is-visible > *:nth-child(1) {
  animation-delay: 0s;
}

.pricing-grid.is-visible > *:nth-child(2) {
  animation-delay: 0.2s;
}

@keyframes pricing-slide-in {
  0% {
    transform:
      translateY(-500px)
      rotateX(-30deg)
      scale(0);

    transform-origin: 50% 100%;
    opacity: 0;
  }

  100% {
    transform:
      translateY(0)
      rotateX(0)
      scale(1);

    transform-origin: 50% 1400px;
    opacity: 1;
  }
}
/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:900px){

  .hero{
    min-height:auto;
    padding-top:70px;
  }

  .hero-inner{
    grid-template-columns:1fr;
  }

  .hero-product{
    order:-1;
  }

  .hero-title{
    max-width:none;
    font-size:clamp(2rem,6.5vw,2.9rem);
  }

  .hero-content{
    text-align:center;
  }

  .hero-lede{
    margin-left:auto;
    margin-right:auto;
  }

  .hero-cta{
    justify-content:center;
  }

  .hero-meta{
    justify-content:center;
  }
}

@media (max-width:520px){

  .hero{
    padding-top:45px;
  }

  .hero-product-frame{
    width:88vw;
    border-radius:20px;
  }

  .hero-cover-image{
    border-radius:13px;
  }

  .hero-title{
    font-size:clamp(1.7rem,7.5vw,2.3rem);
  }

  section{
    padding-top:80px;
    padding-bottom:80px;
  }

  .section-head h2{
    font-size:clamp(2.3rem,10vw,3.2rem);
  }
}
/* =========================================================
   LEVELS NOTE — RESPONSIVE
   ========================================================= */

.levels-note {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;

  transition:
    flex-direction .45s ease,
    gap .45s ease,
    transform .45s ease;
}

@media (max-width: 830px) {

  .levels-note {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;

    gap: 10px;

    width: min(100%, 360px);
    margin-left: auto;
    margin-right: auto;
  }

  .levels-note > span:first-child {
    text-align: center;
    margin-bottom: 4px;
  }

  .level-chip {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;

    transition:
      transform .35s ease,
      opacity .35s ease;
  }

  .level-chip:hover {
    transform: translateY(-2px);
  }
}
.public-card{
  opacity:0;
  transform:translateY(40px);
  transition:
    background .3s ease,
    border-color .3s ease,
    opacity .6s cubic-bezier(.16,1,.3,1),
    transform .6s cubic-bezier(.16,1,.3,1);
}
.public-card.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* =========================================================
   PAGES EXTERNES - faq - faq-domaines-cognitifs - sources
   ========================================================= */
.sources a{
  color: var(--apple-blue);
  text-decoration: underline;
}
.sources a:hover{
  color: var(--apple-blue-deep);
}

@media screen and (min-width:900px){
  .faq-list{
  width: 90vw;
  margin: auto;
  justify-content: center;
  }
  .faq-answer{
    width: 90%;
    margin: 0 5% 0 5%;
  }
}


@media screen and (max-width: 465px){
  #sla,#aphasie,#alzheimer,#dft,#corps-de-lewy,#parkinson,#app{
    width: 80vw;
    padding: 5px;
  }
  #aa{
    width: 100%;
    font-size: 0.7em;
    height: auto;
  }
  #traitements h2{
  font-size: 1.8em;
}
.disclaimer{
  width:80%
}
.legal-block{
  font-size: 0.8em;
}
}
.public-cards{
  display: grid;

}

.ul::-webkit-details-marker{display:none;}
#memoire .public-cards{
  display: grid;
  grid-template-columns:repeat(1,1fr);
}
#memoire .public-card{
    opacity: 1;
}
#memoire, .public-card h4{
  color: white;
  padding: 1px;
}
#attention #intro{
  color: var(--ink-soft);
}
#attention .public-cards{
  display: grid;
  grid-template-columns:repeat(1,1fr);
}
#attention .public-card{
    opacity: 1;
}
#attention, .public-card h4{
  color: white;
  padding: 1px;
}
#quellessontmessources{
  color: #000;
}
#attention h2{
  color: white;
}
#recognition-seniors .public-cards{
  display: grid;
  grid-template-columns:repeat(1,1fr);
}
#recognition-seniors .public-card{
    opacity: 1;
}
#recognition-seniors, .public-card h4{
  color: white;
  padding: 1px;
}
#recognition-seniors h2{
  color: white;
}

#raisonnement .public-cards{
  display: grid;
  grid-template-columns:repeat(1,1fr);
}
#raisonnement .public-card{
    opacity: 1;
}

#raisonnement.public-card h4{
  color: white;
  padding: 1px;
}
#raisonnement h2{
  color: white;
}
#orientation .public-cards{
  display: grid;
  grid-template-columns:repeat(1,1fr);
}
#orientation .public-card{
    opacity: 1;
}
#orientation .public-card h4{
  color: white;
  padding: 1px;
}
#orientation h2{
  color: white;
}
#langage .public-cards{
  display: grid;
  grid-template-columns:repeat(1,1fr);
}
#langage .public-card{
    opacity: 1;
}
#langage .public-card h4{
  color: white;
  padding: 1px;
}
#langage h2{
  color: white;
}
#fonctions-executives .public-cards{
  display: grid;
  grid-template-columns:repeat(1,1fr);
}
#fonctions-executives .public-card{
    opacity: 1;

}
#fonctions-executives .public-card h4{
  color: white;
  padding: 1px;
}
#fonctions-executives h2{
  color: white;
}
#fonctions-executives  #ortho{
    color: transparent;
  }
#langage  #ortho{
    color: transparent;
  }
#orientation #ortho{
    color: transparent;
  }
#raisonnement #ortho{
    color: transparent;
  }
#attention #ortho{
  color: transparent;
}
#recognition-seniors #ortho{
  color: transparent;
}
.recognition-potential-buyers-modal{position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:1rem;background:rgba(10,18,28,.68);overflow:auto}.recognition-potential-buyers-card{position:relative;width:min(100%,640px);max-height:calc(100vh - 2rem);overflow:auto;background:#fffdf8;color:#1d1e24;padding:clamp(1.35rem,4vw,2.25rem);box-shadow:0 24px 80px rgba(0,0,0,.28);border:1px solid #d8d1c3;border-radius:14px}.recognition-potential-buyers-close{position:absolute;right:.8rem;top:.7rem;border:0;background:transparent;color:#1d1e24;font-size:1.8rem;line-height:1;cursor:pointer}.recognition-potential-buyers-kicker{margin:0 0 .45rem;color:#0d6c5e;text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;font-weight:700}.recognition-potential-buyers-card h2{margin:.25rem 2rem .8rem;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.08}.recognition-potential-buyers-card p{line-height:1.55}.recognition-potential-buyers-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem 1rem;margin:1.2rem 0}.recognition-potential-buyers-grid label{display:grid;gap:.3rem;font-weight:650}.recognition-potential-buyers-grid input{width:100%;box-sizing:border-box;padding:.7rem;border:1px solid #c9c4ba;border-radius:6px;background:#fff;font:inherit}.recognition-potential-buyers-full{grid-column:1/-1}.recognition-potential-buyers-grid small{font-weight:400;color:#5e625f}.recognition-potential-buyers-consent{display:flex;gap:.55rem;align-items:flex-start;font-size:.9rem;line-height:1.45;margin:1rem 0}.recognition-potential-buyers-consent input{margin-top:.2rem}.recognition-potential-buyers-consent a{color:#0d6c5e}.recognition-potential-buyers-honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}.recognition-potential-buyers-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.2rem}.recognition-potential-buyers-actions button{cursor:pointer}.recognition-potential-buyers-result{min-height:1.5em;color:#0d6c5e;font-weight:650}.recognition-potential-buyers-open{overflow:hidden}@media(max-width:560px){.recognition-potential-buyers-grid{grid-template-columns:1fr}.recognition-potential-buyers-full{grid-column:auto}.recognition-potential-buyers-actions{flex-direction:column}.recognition-potential-buyers-actions button{width:100%}}