/* ============================================================
   Essai « recnote.framer.website » — 27/09/2026, demande Maxime : boutons brillants + encadrés à anneau.
   Fichier séparé, chargé après da.css. Pour retirer l'essai : supprimer le <link> dans les pages.
   ============================================================ */
:root { --rn-o1: #FC805C; --rn-o2: #D8321A; --rn-ring: rgba(26,24,19,.07); --rn-ring-2: rgba(26,24,19,.11); }

/* ---- Boutons : pilule orange brillante (reflet en haut, ombre interne en bas, anneau doux) ; secondaire = noir brillant */
.btn:not(.nav__cta) { height: 48px; padding: 0 24px; font-size: 15px; font-weight: 500; border: 0; color: #fff;
  background: linear-gradient(162deg, var(--rn-o1) 18%, var(--rn-o2) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), inset 0 0 0 1px rgba(255,255,255,.14), inset 0 -2px 0 rgba(0,0,0,.16), 0 0 0 3px rgba(216,50,26,.14);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.btn:not(.nav__cta):hover { filter: brightness(1.06); transform: translateY(-1px); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), inset 0 0 0 1px rgba(255,255,255,.16), inset 0 -2px 0 rgba(0,0,0,.16), 0 0 0 3px rgba(216,50,26,.2); }
.btn--lg:not(.nav__cta) { height: 54px; padding: 0 28px; font-size: 16px; }
.btn--sm:not(.nav__cta) { height: 40px; padding: 0 18px; font-size: 14px; }
.btn--ghost:not(.nav__cta) { color: #fff; background: linear-gradient(180deg, #3D3A35 0%, #1A1813 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 0 1px rgba(255,255,255,.06), inset 0 -2px 0 rgba(0,0,0,.5), 0 0 0 3px var(--rn-ring-2); }
.btn--ghost:not(.nav__cta):hover { filter: brightness(1.15); background: linear-gradient(180deg, #47433d 0%, #23211d 100%); }
.form-card .btn:not(.nav__cta) { height: auto; min-height: 48px; padding: 12px 20px; }
.form-card .btn[disabled] { filter: saturate(.35); opacity: .55; transform: none; }

/* ---- Encadrés : plus de filet, coins 20 px, anneau doux autour (comme les cartes recnote) */
.card, .form-card, .team__card, .duel__col, .apprend__stage, .agenda-card, .app, .team__initiales { border: 0; border-radius: 20px; box-shadow: 0 0 0 3px var(--rn-ring); }
.win, .chat-demo { border: 0; border-radius: 24px; box-shadow: 0 0 0 5px rgba(26,24,19,.06); }
.win .win__bar { border-bottom-color: rgba(26,24,19,.08); }
.assistant { border-radius: 24px; box-shadow: 0 0 0 5px rgba(26,24,19,.12); }
.duel__col .win { box-shadow: 0 0 0 3px var(--rn-ring); }
.tache, .etape, .assistant__form, .agenda-card__ini { border-radius: 14px; }
.etape { border: 0; box-shadow: 0 0 0 2px rgba(26,24,19,.06); }
.tache { border-style: solid; border-color: rgba(26,24,19,.12); }
@media (max-width: 960px) { .btn:not(.nav__cta) { height: 46px; } .btn--lg:not(.nav__cta) { height: 52px; } }
/* ---- Boutons centrés, téléphone et ordinateur (demande Maxime 27/09) : Rejouer, barre d'appel empilée, carte agenda */
.rejouer { display: flex; width: fit-content; margin-left: auto; margin-right: auto; }
.cta__in { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 26px; }
.cta__in > .btn:not(.nav__cta) { align-self: center; margin-left: auto; margin-right: auto; }
.cta__gauche { justify-content: center; }
.agenda-card .btn:not(.nav__cta) { justify-self: center; width: fit-content; }
/* ---- Bouton flottant « Parler à Bobby » : même recette que les autres boutons (demande Maxime 27/09) */
.bobby-flottant__btn { font-weight: 500; border: 0; background: linear-gradient(162deg, var(--rn-o1) 18%, var(--rn-o2) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), inset 0 0 0 1px rgba(255,255,255,.14), inset 0 -2px 0 rgba(0,0,0,.16), 0 0 0 3px rgba(216,50,26,.14); }
.bobby-flottant__btn:hover { filter: brightness(1.06); transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), inset 0 0 0 1px rgba(255,255,255,.16), inset 0 -2px 0 rgba(0,0,0,.16), 0 0 0 3px rgba(216,50,26,.2); }
.bobby-flottant__btn.is-cache { transform: translateY(8px); }
/* ---- Titres comme recnote (demande Maxime 27/09, capture du hero) : graisse moyenne 500, lettres très serrées, interligne 1,0 */
h1, h2, .d, .h, .titre { font-weight: 500; letter-spacing: -.04em; line-height: 1.02; }
h3, .h3, .parcours__txt h3, .agenda-card__titre, .cta__txt, .brands__label { font-weight: 500; letter-spacing: -.025em; }
.d { font-size: clamp(44px, 5vw, 64px); }
.h { font-size: clamp(34px, 3.2vw, 46px); }
.p { color: var(--ink); }
h1 em, h1 b, h1 strong, .d em, .h em, .d b, .h b { font-weight: 500; }   /* Bobby sans gras (demande Maxime) */
h1 em, .d em, .h em { color: var(--ink); font-style: normal; }   /* Bobby en noir dans les titres (demande Maxime) */
/* Titre d'accueil : 3 lignes fixées sur grand écran (les blocs mot par mot de l'animation coupent sinon avant « ? » et « . ») */
@media (min-width: 1100px) { .hero__titre { white-space: nowrap; } }
@media (max-width: 1099px) { .hero__titre br { display: none; } }
/* ---- Survol : le fond dégradé reste (le CSS commun passait le bouton de la barre d’appel en blanc au survol) */
.btn:not(.nav__cta):hover, .cta .btn:not(.nav__cta), .cta .btn:not(.nav__cta):hover, .dark .btn:not(.nav__cta):hover { background: linear-gradient(162deg, var(--rn-o1) 18%, var(--rn-o2) 100%); color: #fff; border-color: transparent; }
.btn--ghost:not(.nav__cta):hover, .cta .btn--ghost:not(.nav__cta):hover { background: linear-gradient(180deg, #47433d 0%, #23211d 100%); }

/* ---- Scène des bulles plus fine (demande Maxime 27/09) : traits fins et réguliers, point à l'arrivée, pastilles nettes, dessin adouci */
.fils line { stroke-width: 1.25; stroke-opacity: .8; transition: none; }
.fils .pt { fill: var(--accent); opacity: 0; transition: opacity .25s ease; }
.bulle__in { border-color: rgba(26,24,19,.13); box-shadow: none; }
.bulle__in img { image-rendering: auto; }
.noeud .tete-main .croquis .t { opacity: .07; }
.noeud .tete-main { stroke-width: 1.9; }
.noeud .tete-main .t-passe { opacity: .45; }
.noeud__nom { font-weight: 600; letter-spacing: -.03em; }
/* ---- FAQ, d'après la référence Recnote envoyée par Axel (27/09) : titre à gauche, questions en cartes à droite.
   La réponse se déploie (grille 0fr → 1fr), la question passe en orange, le + pivote en ×. */
.faq-bloc__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
.faq-bloc__tete { position: sticky; top: 120px; }
.faq-bloc__titre { font-size: clamp(40px, 4.4vw, 64px); font-weight: 600; line-height: 1.02; letter-spacing: -.035em; color: var(--ink); margin-bottom: 18px; }
.faq-bloc__tete p { max-width: 350px; font-size: 16px; line-height: 1.4; color: var(--ink-2); margin-bottom: 28px; }
.faq-bloc__tete .btn { display: inline-flex; }
.faq { max-width: none; margin: 0; border: 0; display: flex; flex-direction: column; gap: 10px; }
.faq__item { display: grid; grid-template-rows: auto 0fr; padding: 0; border: 1px solid rgba(26,24,19,.09); border-radius: 10px; background: #F4F2EE;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
  transition: grid-template-rows .42s cubic-bezier(.2,.8,.2,1), border-color .25s ease, background .25s ease; }
.faq__item:hover { background: #F7F5F1; }
.faq__item.is-open { grid-template-rows: auto 1fr; border-color: var(--accent); background: #F7F5F1; }
.faq__q { align-items: center; padding: 20px 22px; font-size: 17px; font-weight: 400; letter-spacing: -.005em; color: var(--ink); border-radius: 10px; transition: color .2s ease; }
.faq__q:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.faq__item.is-open .faq__q { color: var(--accent); }
.faq__q span { flex: none; display: inline-block; width: 22px; text-align: center; font-size: 24px; font-weight: 300; line-height: 1; color: var(--ink); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.faq__item.is-open .faq__q span { transform: rotate(45deg); }
.faq__item .faq__a, .faq__item:not(.is-open) .faq__a, html.js .faq__item:not(.is-open) .faq__a { display: block; overflow: hidden; min-height: 0; max-width: none; margin: 0; padding: 0 64px 0 22px; font-size: 16px; line-height: 1.45; color: var(--ink-2);
  opacity: 0; transform: translateY(-6px); transition: opacity .3s ease, transform .35s cubic-bezier(.2,.8,.2,1), padding-bottom .42s cubic-bezier(.2,.8,.2,1); }
.faq__item.is-open .faq__a { opacity: 1; transform: none; padding-bottom: 20px; margin-top: -6px; transition-delay: .08s, .08s, 0s; }
@media (max-width: 960px) {
  .faq-bloc__grille { grid-template-columns: none; gap: 36px; }
  .faq-bloc__tete { position: static; }
  .faq__q { padding: 18px; font-size: 16px; }
  .faq__item .faq__a, .faq__item:not(.is-open) .faq__a, html.js .faq__item:not(.is-open) .faq__a { padding: 0 18px; font-size: 15px; }
  .faq__item.is-open .faq__a { padding-bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) { .faq__item, .faq__item .faq__a, .faq__q span { transition: none; } }

/* ============================================================
   Blog (/blog et /blog/<article>), d'après lunio-template.framer.website/blog — demande Axel, 27/09/2026.
   Un cadre centré bordé de filets, en-tête sur trame de points, article à la une, filtres en pilule, grille 3 colonnes à filets.
   ============================================================ */
.b-page { padding: 112px var(--gutter) 96px; }
.b-cadre { position: relative; max-width: 1200px; margin: 0 auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); border-top: 1px solid var(--line); background: #F4F2EE; }
.b-tete { position: relative; overflow: hidden; padding: 72px 24px 64px; text-align: center; border-bottom: 1px solid var(--line);
  background-color: #F4F2EE; background-image: radial-gradient(rgba(26,24,19,.13) 1px, transparent 1.2px); background-size: 14px 14px; }
.b-tete::before, .b-tete::after { content: ""; position: absolute; bottom: -5px; width: 9px; height: 9px; background: var(--line-2); transform: rotate(45deg); }
.b-tete::before { left: -5px; } .b-tete::after { right: -5px; }
.b-etiquette { font-family: var(--mono); font-size: 14px; letter-spacing: .02em; color: var(--ink-3); margin-bottom: 18px; }
.b-titre { font-size: clamp(40px, 5vw, 64px); font-weight: 600; line-height: 1.02; letter-spacing: -.04em; color: var(--ink); }
.b-titre .b-titre__accent { color: var(--accent); }
.b-deco { position: absolute; top: 50%; width: clamp(90px, 11vw, 150px); height: auto; pointer-events: none; }
.b-deco--g { left: -18px; transform: translateY(-50%) rotate(-8deg); animation: b-flotte 6s ease-in-out infinite; }
.b-deco--d { right: -4px; transform: translateY(-50%) rotate(8deg); animation: b-flotte-d 6s ease-in-out -3s infinite; }
@keyframes b-flotte { 50% { transform: translateY(-56%) rotate(-5deg); } }
@keyframes b-flotte-d { 50% { transform: translateY(-56%) rotate(5deg); } }

.b-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--ink-2); }
.b-meta time { margin-left: auto; }
.b-tag { --t: var(--accent); display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border: 1px solid var(--t); border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--t); background: color-mix(in srgb, var(--t) 7%, transparent); white-space: nowrap; }
.b-tag--productivite { --t: #E0440F; } .b-tag--economie { --t: #15803D; } .b-tag--etudes { --t: #2563EB; } .b-tag--droit { --t: #9333EA; }

.b-une { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 40px; border-bottom: 1px solid var(--line); }
.b-une__img { display: block; overflow: hidden; border-radius: 6px; aspect-ratio: 16 / 8.5; }
.b-une__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.b-une:hover .b-une__img img { transform: scale(1.03); }
.b-une h2 { margin: 26px 0 18px; font-size: clamp(24px, 2.4vw, 32px); font-weight: 500; line-height: 1.2; letter-spacing: -.02em; }
.b-une h2 a:hover { color: var(--accent); }
.b-une p { font-size: 15px; line-height: 1.6; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.b-lire { display: inline-flex; align-items: center; height: 40px; margin-top: 26px; padding: 0 18px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--ink);
  background: #fff; box-shadow: 0 0 0 1px rgba(26,24,19,.12); transition: box-shadow .2s ease, transform .2s ease; }
.b-lire:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(26,24,19,.2); }

.b-filtres-zone { display: flex; justify-content: center; padding: 18px 16px; border-bottom: 1px solid var(--line); background: #EFECE6; }
.b-filtres { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: #E6E2DA; box-shadow: inset 0 0 0 1px rgba(26,24,19,.06); overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.b-filtre { flex: none; height: 34px; padding: 0 16px; border-radius: 999px; font-size: 14px; color: var(--ink-2); transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.b-filtre:hover { color: var(--ink); }
.b-filtre.is-on { background: #fff; color: var(--ink); font-weight: 500; box-shadow: 0 0 0 1px rgba(26,24,19,.06); }

.b-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 32px; border-bottom: 1px solid var(--line); }
.b-carte { display: flex; flex-direction: column; padding: 8px; border-radius: 22px; background: #fff;
  box-shadow: 0 0 0 1px rgba(26,24,19,.07); transition: box-shadow .3s ease; }
.b-carte:hover { box-shadow: 0 0 0 1px rgba(26,24,19,.1); }
.b-carte__img { display: block; overflow: hidden; border-radius: 15px; aspect-ratio: 3 / 2; background: #EFECE6; }
.b-carte__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.b-carte:hover .b-carte__img img { transform: scale(1.04); }
.b-carte__corps { flex: 1; display: flex; flex-direction: column; padding: 30px 22px 18px; }
.b-carte__corps time { font-size: 14px; color: var(--ink-2); }
.b-carte h3 { margin: 12px 0 12px; font-size: 17px; font-weight: 500; line-height: 1.5; letter-spacing: -.01em; color: var(--ink); transition: color .2s ease; }
.b-carte:hover h3 { color: var(--accent); }
.b-carte p { font-size: 14.5px; line-height: 1.6; color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.b-auteur { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 34px; font-size: 14px; color: var(--ink); }
.b-auteur img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.b-carte.is-une, .b-carte.is-cache { display: none; }
.b-grille.is-filtre .b-carte.is-une:not(.is-cache) { display: flex; }
.b-vide { padding: 48px 24px; text-align: center; color: var(--ink-3); border-bottom: 1px solid var(--line); }

/* page article */
.b-article__tete { max-width: 800px; margin: 0 auto; padding: 64px 32px 40px; }
.b-retour { display: inline-block; margin-bottom: 32px; font-size: 14px; color: var(--ink-2); }
.b-retour:hover { color: var(--accent); }
.b-article__tete .b-meta { justify-content: flex-start; } .b-article__tete .b-meta time { margin-left: 4px; } .b-article__tete .b-meta > span:last-child::before { content: "·"; margin-right: 12px; }
.b-article__tete h1 { margin: 22px 0 18px; font-size: clamp(32px, 4vw, 48px); font-weight: 600; line-height: 1.08; letter-spacing: -.035em; }
.b-chapo { font-size: 18px; line-height: 1.55; color: var(--ink-2); }
.b-article__img { display: block; max-width: 1040px; margin: 0 auto; padding: 0 32px; }
.b-article__img img { width: 100%; height: auto; border-radius: 8px; }
.b-prose { max-width: 720px; margin: 0 auto; padding: 48px 32px 72px; font-size: 17px; line-height: 1.7; color: #35322C; }
.b-prose > * + * { margin-top: 18px; }
.b-prose h2 { margin-top: 44px; font-size: 26px; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; color: var(--ink); }
.b-prose h3 { margin-top: 32px; font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.b-prose ul, .b-prose ol { padding-left: 22px; } .b-prose li + li { margin-top: 8px; }
.b-prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.b-prose blockquote { margin-left: 0; padding-left: 18px; border-left: 3px solid var(--accent); color: var(--ink-2); font-style: italic; }
.b-prose img { max-width: 100%; height: auto; border-radius: 8px; }
.b-suite { padding: 22px 30px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; }
.b-suite .b-etiquette { margin: 0; }
.b-grille--suite .b-carte.is-une { display: flex; }

@media (max-width: 960px) {
  .b-page { padding: 96px 16px 64px; }
  .b-une { grid-template-columns: none; gap: 24px; padding: 20px; }
  .b-grille { grid-template-columns: none; gap: 16px; padding: 16px; }
  .b-carte__corps { padding: 22px 16px 14px; }
  .b-deco { width: 76px; top: 26%; } .b-deco--g { left: -14px; } .b-deco--d { right: -14px; }
  .b-tete { padding: 64px 16px 48px; }
  .b-filtres-zone { justify-content: flex-start; }
  .b-article__tete { padding: 44px 20px 28px; } .b-article__img { padding: 0 20px; } .b-prose { padding: 36px 20px 56px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .b-deco { animation: none; } .b-carte__img img, .b-une__img img { transition: none; } }