/* Landing « Application sur mesure 5 000 € HT » · FlairDigital (marque propre : violet #9333EA + Inter).
 * Direction 01 « Studio clay » choisie le 14/10 (explorations/tour-01) : prolonge les pubs
 * (lavande, cartes glassy, objets clay). Mobile d'abord : tout est écrit pour 390 px, le bloc
 * @media en bas ne fait qu'élargir. Rayons : 24 px cartes, 14 px champs, pilule pour les boutons.
 */
@font-face { font-family: "Inter"; src: url("public/fonts/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
  --violet: #9333ea; --violet-fonce: #6b21a8; --violet-clair: #f3ecff; --lavande: #f5efff; --lavande-2: #e9dcff;
  --nuit: #12081f; --encre: #1a1033; --gris: #5a5374; --filet: #ddd2f3; --vert: #15803d; --rouge: #e11d48; --rouge-texte: #be123c;
  --ombre: 0 18px 40px rgba(76, 29, 149, .16);
  --fixe-h: 84px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
/* hidden doit toujours gagner : sinon un display: flex de composant le ré-affiche (squelette de l'agenda posé par-dessus les boutons) */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: "Inter", system-ui, -apple-system, sans-serif; color: var(--encre); background: var(--lavande); -webkit-font-smoothing: antialiased; line-height: 1.5; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 30; background: var(--encre); color: #fff; padding: 10px 14px; border-radius: 10px; text-decoration: none; }
.skip:focus { top: 12px; }

/* Boutons : un seul libellé de réservation sur toute la page, « Réserver mon appel » */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 28px; border: 0; border-radius: 999px;
  background: var(--violet); color: #fff; font-weight: 750; font-size: 17px; text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: 0 14px 30px rgba(147, 51, 234, .32), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .2s cubic-bezier(.16, 1, .3, 1), background-color .2s; }
.btn:hover { background: #7e22ce; }
.btn:active { transform: translateY(1px) scale(.98); }
.btn small { font-weight: 500; font-size: 14px; color: #f3e8ff; }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 14px; box-shadow: none; }
.btn-large { width: 100%; }
.btn-clair { background: #fff; color: var(--encre); box-shadow: inset 0 0 0 1.5px var(--filet); }
.btn-clair:hover { background: var(--violet-clair); }
.btn[disabled] { opacity: .7; cursor: progress; }
.lien { background: none; border: 0; padding: 8px 4px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; color: var(--gris); font-size: 14px; }

/* Premier écran : pastilles à gauche, fusée à droite (sur mobile l'objet reste visible) */
.hero { position: relative; overflow: hidden; background: radial-gradient(circle at 50% 46%, #fff 0%, var(--lavande) 42%, var(--lavande-2) 100%); }
.halo { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; pointer-events: none; }
.halo.a { width: 420px; height: 420px; background: #c084fc; left: -180px; top: 120px; }
.halo.b { width: 380px; height: 380px; background: #f0abfc; right: -160px; bottom: 40px; }
.nav { height: 64px; display: flex; align-items: center; justify-content: space-between; position: relative; }
.nav img { width: 116px; }
.hero-in { position: relative; text-align: center; padding: 8px 0 32px; }
h1 { font-size: 30px; line-height: 1.12; font-weight: 850; letter-spacing: -.035em; max-width: 880px; margin: 0 auto; text-wrap: balance; }
.barre { position: relative; display: inline-block; color: var(--gris); }
.barre::after { content: ""; position: absolute; left: -4px; right: -4px; top: 52%; height: 5px; border-radius: 3px; background: var(--rouge); transform-origin: left; }
.scene { position: relative; height: 292px; margin: 14px auto 0; max-width: 760px; }
.fusee { position: absolute; right: 4px; bottom: 0; width: 128px; filter: drop-shadow(0 26px 34px rgba(76, 29, 149, .28)); }
.chip { position: absolute; left: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 12px 16px; border-radius: 20px;
  background: rgba(255, 255, 255, .8); border: 1.5px solid #fff; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: var(--ombre), inset 0 1px 0 #fff; text-align: left; }
.chip b { font-size: 21px; font-weight: 850; letter-spacing: -.03em; color: var(--violet); line-height: 1.1; }
.chip span { font-size: 13px; font-weight: 600; color: var(--gris); margin-top: 2px; }
.chip.c1 { top: 6px; } .chip.c2 { top: 100px; } .chip.c3 { top: 194px; }
.sous { font-size: 16px; color: var(--gris); max-width: 460px; margin: 16px auto 18px; }
.btn-hero { width: 100%; max-width: 420px; }

/* Réservation : deux modes, créneau Cal.com ou rappel */
.resa { padding: 56px 0 64px; background: radial-gradient(circle at 70% 0%, #a855f7 0%, var(--violet) 40%, var(--violet-fonce) 100%); color: #fff; scroll-margin-top: 0; }
.resa:focus { outline: none; }
.resa-tete h2 { font-size: 30px; line-height: 1.1; font-weight: 850; letter-spacing: -.035em; }
.resa-tete p { margin-top: 10px; font-size: 16px; color: #f3e8ff; max-width: 560px; }
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 22px 0 14px; padding: 4px; border-radius: 999px; background: rgba(18, 8, 31, .28); }
.modes button { min-height: 48px; border: 0; border-radius: 999px; background: transparent; color: #f3e8ff; font-weight: 700; font-size: 15px; cursor: pointer; transition: background-color .2s, color .2s; }
.modes button[aria-selected="true"] { background: #fff; color: var(--violet-fonce); box-shadow: 0 6px 16px rgba(18, 8, 31, .2); }
.panneau { background: #fff; color: var(--encre); border-radius: 24px; box-shadow: 0 40px 90px rgba(18, 8, 31, .35); overflow: hidden; }

.cal-zone { position: relative; min-height: 560px; }
.cal-embed { width: 100%; min-height: 560px; }
.cal-embed.waiting { opacity: 0; }
.cal-attente { position: absolute; inset: 0; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.cal-attente p { font-size: 14px; color: var(--gris); }
.sk { display: block; border-radius: 14px; background: linear-gradient(90deg, var(--violet-clair), #faf6ff, var(--violet-clair)); background-size: 200% 100%; animation: reflet 1.4s linear infinite; }
.sk-titre { height: 28px; width: 60%; } .sk-grille { height: 300px; } .sk-ligne { height: 48px; }
.cal-msg { padding: 28px 22px; }
.cal-msg p { font-size: 16px; }
.cal-msg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.cal-zone:has([data-cal="error"]:not([hidden])), .cal-zone:has([data-cal="soon"]:not([hidden])) { min-height: 0; }
.cal-zone:has([data-cal="error"]:not([hidden])) .cal-embed, .cal-zone:has([data-cal="soon"]:not([hidden])) .cal-embed { min-height: 0; }

.rappel { padding: 22px 20px 24px; }
.champs { display: grid; gap: 16px; }
.champ { display: grid; gap: 6px; }
.champ label { font-size: 15px; font-weight: 700; }
.facultatif { font-weight: 500; color: var(--gris); font-size: 13px; }
.champ input, .champ select, .champ textarea { width: 100%; min-height: 52px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid #cfc3e6; background: #fff; font-size: 16px; }
.champ textarea { resize: vertical; min-height: 88px; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(147, 51, 234, .2); }
.champ input[aria-invalid="true"] { border-color: var(--rouge-texte); }
.aide { font-size: 13px; color: var(--gris); }
.erreur { font-size: 14px; font-weight: 600; color: var(--rouge-texte); }
.erreur-envoi { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: #fff1f2; }
.mention { margin: 18px 0 14px; font-size: 13px; color: var(--gris); }
.pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rappel-ok { padding: 34px 22px; }
.rappel-ok:focus { outline: none; }
.rappel-ok-titre { font-size: 26px; font-weight: 850; letter-spacing: -.03em; color: var(--violet-fonce); }
.rappel-ok p + p { margin-top: 8px; color: var(--gris); }

/* Le prix d'avant l'IA */
h2 { font-size: 30px; line-height: 1.1; font-weight: 850; letter-spacing: -.035em; max-width: 640px; text-wrap: balance; }
.prix { padding: 64px 0; background: var(--lavande); }
.duel { display: grid; gap: 14px; margin-top: 26px; }
.carte { border-radius: 24px; padding: 24px; }
.carte h3 { font-size: 15px; font-weight: 700; }
.carte.avant { background: #ece6f7; color: var(--gris); }
.carte.avant s { text-decoration-color: var(--rouge); text-decoration-thickness: 4px; }
.carte.nous { background: var(--violet); color: #fff; box-shadow: 0 28px 60px rgba(147, 51, 234, .35); }
.carte.nous p:not(.montant) { color: #f3e8ff; }
.montant { font-size: 46px; font-weight: 900; letter-spacing: -.045em; margin-top: 8px; line-height: 1; }
.carte p:not(.montant) { margin-top: 10px; font-size: 16px; }

/* Preuves : écrans fictifs */
.preuves { padding: 64px 0; background: linear-gradient(180deg, var(--lavande) 0%, #fff 100%); }
.bento { display: grid; gap: 14px; margin-top: 26px; }
.cel { border-radius: 24px; padding: 20px; background: #fff; box-shadow: 0 14px 40px rgba(76, 29, 149, .08); overflow: hidden; position: relative; }
.cel h3 { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.cel > p { font-size: 14px; color: var(--gris); margin-top: 4px; }
.cel.v { background: radial-gradient(circle at 80% 0%, #a855f7, var(--violet) 50%, var(--violet-fonce)); color: #fff; }
.cel.v > p { color: #ead8ff; }
.cel.n { background: var(--nuit); color: #fff; }
.cel.n > p { color: #c4b8dd; }
.ui { margin-top: 16px; border-radius: 16px; background: #fff; color: var(--encre); padding: 14px; font-size: 13px; position: relative; z-index: 1; }
.cel:not(.v):not(.n) .ui { background: #f6f1ff; }
.bulle { padding: 9px 12px; border-radius: 14px; margin-top: 8px; max-width: 86%; line-height: 1.35; }
.bulle:first-child { margin-top: 0; }
.bulle.ia { background: var(--violet-clair); border-bottom-left-radius: 4px; }
.bulle.moi { background: var(--violet); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kpi { background: #fff; border-radius: 12px; padding: 10px; }
.kpi small { display: block; color: var(--gris); font-size: 11px; font-weight: 600; }
.kpi b { font-size: 22px; letter-spacing: -.03em; }
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.col small { display: block; font-size: 10px; font-weight: 700; color: var(--gris); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.fiche { background: #fff; border-radius: 10px; padding: 8px; margin-bottom: 6px; font-weight: 700; font-size: 12px; box-shadow: 0 4px 10px rgba(76, 29, 149, .08); }
.fiche.chaude { outline: 2px solid var(--violet); }
.rdv { margin-top: 10px; padding: 9px 12px; border-radius: 12px; background: #dcfce7; color: var(--vert); font-weight: 750; max-width: 70%; }
.blocs { position: absolute; right: -16px; bottom: -34px; width: 104px; }

/* Fin de page */
.fin { padding: 56px 0 72px; background: #fff; text-align: center; }
.fin h2 { margin: 0 auto 22px; }
.pied { padding: 28px 0 calc(28px + var(--fixe-h)); background: #fff; border-top: 1px solid var(--filet); font-size: 14px; color: var(--gris); }
.pied .wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pied nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; }
.pied a, .pied .lien { text-underline-offset: 3px; padding: 12px 0; min-height: 44px; display: inline-flex; align-items: center; } /* cible tactile 44 px */

/* Barre fixe mobile : le bouton de réservation reste à un pouce */
.fixe { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(245, 239, 255, 0), rgba(245, 239, 255, .92) 35%); transform: translateY(110%); transition: transform .35s cubic-bezier(.16, 1, .3, 1); pointer-events: none; }
.fixe.on { transform: none; pointer-events: auto; }

/* Bandeau de consentement : Refuser a le même poids qu'Accepter (CNIL) */
/* Compact (relecture du 14/10) : sur un 320x568 l'ancien bandeau couvrait 45 % du 1er écran et son bouton */
.consent { position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 25; padding: 10px 12px; border-radius: 16px; background: #fff; box-shadow: 0 12px 40px rgba(18, 8, 31, .28); font-size: 13px; line-height: 1.35; }
.consent a { color: var(--violet-fonce); }
.consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.consent .btn-sm { min-height: 44px; }

/* Animations : entrée du premier écran, apparitions au défilement, reflet du chargement */
@media (prefers-reduced-motion: no-preference) {
  .js .fusee { animation: decoller .9s .1s cubic-bezier(.16, 1, .3, 1) both; }
  .js .chip { animation: monter .7s cubic-bezier(.16, 1, .3, 1) both; }
  .js .chip.c1 { animation-delay: .45s; } .js .chip.c2 { animation-delay: .55s; } .js .chip.c3 { animation-delay: .65s; }
  .js .barre::after { animation: rayer .45s .35s cubic-bezier(.16, 1, .3, 1) both; }
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1); }
  .js [data-reveal].in { opacity: 1; transform: none; }
  .js .duel .carte.nous[data-reveal] { transition-delay: .12s; }
  .panneau.entre { animation: monter .35s cubic-bezier(.16, 1, .3, 1) both; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .sk { animation: none; } }
@keyframes rayer { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes decoller { from { transform: translateY(70px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes monter { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes reflet { to { background-position: -200% 0; } }
@media (prefers-reduced-transparency: reduce) { .chip { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* Petits écrans (iPhone SE, 360 px) : les pastilles rétrécissent pour laisser la fusée visible */
@media (max-width: 370px) {
  h1 { font-size: 27px; }
  .chip { padding: 10px 12px; } .chip b { font-size: 18px; } .chip span { font-size: 12px; }
  .fusee { width: 110px; }
}

/* Tablette et ordinateur : la composition orbitale des maquettes */
@media (min-width: 768px) {
  .wrap { padding: 0 40px; }
  .nav { height: 76px; }
  h1 { font-size: 52px; }
  .scene { height: 400px; }
  .fusee { right: auto; left: 50%; width: 210px; margin-left: -105px; }
  .chip { padding: 16px 22px; }
  .chip b { font-size: 30px; } .chip span { font-size: 14px; }
  .chip.c1 { left: 20px; top: 40px; } .chip.c2 { left: auto; right: 10px; top: 130px; } .chip.c3 { left: 60px; top: auto; bottom: 40px; }
  .sous { font-size: 18px; }
  .btn-hero { width: auto; }
  .resa { padding: 80px 0; }
  .resa-tete { text-align: center; }
  .resa-tete h2, .resa-tete p { margin-left: auto; margin-right: auto; }
  .resa-tete h2 { font-size: 44px; }
  .resa-tete p { font-size: 18px; }
  .modes { max-width: 420px; margin: 28px auto 18px; }
  .panneau { max-width: 1000px; margin: 0 auto; }
  .rappel { padding: 32px; }
  .champs { grid-template-columns: 1fr 1fr; gap: 18px 20px; }
  .champ-large { grid-column: 1 / -1; }
  .rappel .btn-large { width: auto; min-width: 260px; }
  h2 { font-size: 44px; }
  .prix, .preuves { padding: 88px 0; }
  .duel { grid-template-columns: 1fr 1.25fr; align-items: end; }
  .carte { padding: 32px; }
  .montant { font-size: 56px; }
  .carte.nous .montant { font-size: 72px; }
  .bento { grid-template-columns: 1.4fr 1fr; }
  .cel { padding: 26px; min-height: 270px; }
  .blocs { width: 120px; right: -18px; bottom: -30px; }
  .fin { padding: 88px 0; }
  .pied { padding-bottom: 28px; }
  .pied .wrap { flex-direction: row; justify-content: space-between; }
  /* Sur ordinateur, la barre devient une pastille flottante en bas à droite */
  .fixe { left: auto; right: 24px; bottom: 24px; padding: 0; background: none; }
  .fixe .btn-large { width: auto; }
  .consent { left: auto; right: 24px; bottom: 24px; max-width: 420px; }
}