@charset "UTF-8";
/* =====================================================================
 * vealive — COUCHE DE STYLE DU SITE (chargée après les styles de la page)
 * =====================================================================
 *
 * ── CE QUE J'AI DÉCOUVERT EN ARRIVANT, ET QUI COMPTE ────────────────────
 *
 * 1. LE SITE EN LIGNE N'EST PAS LA COPIE LOCALE DU PROJET. Le fichier du
 *    serveur contient 173 lignes qui n'existent pas dans le dépôt, et il met
 *    ses styles dans un bloc <style> INTERNE au lieu de `vealive-site.css`.
 *    Une première version de cette couche redéfinissait donc des variables
 *    `--vl-*`… QUI N'EXISTENT PAS ICI. Elle n'a rien changé.
 *    Cette version-ci parle la VRAIE langue du site :
 *      --bg --band --line --ink --muted --accent --accent-dark --accent-soft
 *      --radius --shadow
 *
 * 2. LES COULEURS NE SONT PAS TOUCHÉES. Le propriétaire a dit : « la couleur
 *    est déjà bonne ». L'accent du site (#B754F9) et le violet de
 *    l'application (#8B18E6) sont deux violets voisins ; on n'y touche pas.
 *
 * 3. CE FICHIER CORRIGE LE PLACEMENT : largeur de lecture, taille des titres,
 *    espacement entre les sections, respiration des cartes et des grilles.
 *    C'est le reproche exact du propriétaire : « le placement des détails,
 *    des informations et du texte n'est pas bon ».
 *
 * ── POURQUOI IL GAGNE SUR LES STYLES DE LA PAGE ────────────────────────
 * Il est chargé APRÈS le bloc <style> interne. À spécificité ÉGALE, la
 * dernière règle l'emporte : chaque sélecteur ci-dessous reprend donc
 * exactement celui du site (.wrap, h1, .card, .grid…).
 *
 * ── POUR TOUT ANNULER ──────────────────────────────────────────────────
 * Retirer les deux blocs marqués AURORA de
 * `resources/views/site/layout.blade.php`. Rien d'autre n'a été modifié.
 * ===================================================================== */

/* La police de l'application, pour que le site et l'app se ressemblent.
   Chargée ici plutôt qu'ajoutée à la page : une ligne, aucun fichier touché. */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* =====================================================================
 * 1. MESURES : largeur, rayon, ombres
 * ---------------------------------------------------------------------
 * Aucune couleur : uniquement des mesures et une ombre teintée de la marque,
 * ce qui donne la « lumière » du style aurora sans ajouter d'élément.
 * ===================================================================== */
:root {
  --radius: 16px;
  --shadow: 0 1px 2px rgba(20, 22, 26, .04), 0 18px 44px -30px rgba(139, 24, 230, .45);
  --vl-degrade-texte: linear-gradient(96deg, #8A18F0 0%, #1078F0 100%);
}

body {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.62;
}

/* =====================================================================
 * 2. LE CONTENEUR ET LE RYTHME DES SECTIONS
 * ---------------------------------------------------------------------
 * 1040 px était étroit : le texte s'étalait sur peu de place et les blocs
 * semblaient serrés. 1160 px laisse respirer sans casser la lecture.
 * ===================================================================== */
.wrap { max-width: 1160px; padding: 0 24px; }

main { padding: 56px 0 88px; }

.hero { padding: 40px 0 22px; }
.hero .actions { gap: 14px; margin-top: 28px; }

h1 {
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -.03em;
  margin: 0 0 18px;
  max-width: 22ch;
}

h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.14;
  letter-spacing: -.022em;
  margin: 58px 0 16px;
  max-width: 30ch;
}

h3 { font-size: 1.08rem; line-height: 1.28; margin: 0 0 8px; }

/* La longueur de ligne : au-delà de ~75 caractères, l'œil perd sa place.
   C'est la correction la plus visible sur « le placement des textes ». */
main p, main li { max-width: 74ch; }
p { margin: 0 0 15px; }

.lead { font-size: 1.14rem; line-height: 1.6; max-width: 62ch; }

/* =====================================================================
 * 3. LES BLOCS : cartes, grilles, bandes
 * ===================================================================== */
.card { padding: 26px; }
.card + .card { margin-top: 22px; }

.grid { gap: 22px; }
/* `auto-fit` : sur une tablette, trois colonnes trop serrées passent à deux
   toutes seules, au lieu de comprimer le texte. */
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.band { padding: 46px 0; margin: 46px 0; }

/* Les pastilles et les petits libellés gagnent un peu d'air : ils étaient
   collés au texte qu'ils introduisent. */
.pill { padding: 6px 13px; }
.small { font-size: 13.5px; line-height: 1.55; }
.muted { line-height: 1.6; }

.btn { padding: 12px 22px; }
.btn-lg { padding: 15px 28px; font-size: 1.03rem; }

/* =====================================================================
 * 4. LES AURORES (style « Aurora UI » de la base ui-ux-pro-max)
 * ---------------------------------------------------------------------
 * Trois halos aux couleurs de la marque, très flous, qui dérivent LENTEMENT
 * (9 à 13 s). Le mouvement doit se SENTIR, pas se voir.
 * ===================================================================== */
.vl-aurora { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.vl-aurora i {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(80px); opacity: .34; mix-blend-mode: multiply;
}
.vl-aurora i:nth-child(1) {
  width: 46vw; height: 46vw; left: -10vw; top: -16vw;
  background: radial-gradient(circle, #D01FF0, transparent 68%);
  animation: vl-derive-1 11s ease-in-out infinite;
}
.vl-aurora i:nth-child(2) {
  width: 42vw; height: 42vw; right: -8vw; top: -10vw;
  background: radial-gradient(circle, #1078F0, transparent 68%);
  animation: vl-derive-2 13s ease-in-out infinite;
}
.vl-aurora i:nth-child(3) {
  width: 38vw; height: 38vw; left: 34%; top: 12vw;
  background: radial-gradient(circle, #8A18F0, transparent 68%);
  animation: vl-derive-3 9s ease-in-out infinite;
}
@keyframes vl-derive-1 { 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(4vw,3vw,0) scale(1.12)} }
@keyframes vl-derive-2 { 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(-4vw,2vw,0) scale(1.08)} }
@keyframes vl-derive-3 { 0%,100%{transform:translate3d(0,0,0) scale(1.05)} 50%{transform:translate3d(3vw,-3vw,0) scale(.96)} }

/* Le contenu passe AU-DESSUS des aurores, sans changer sa mise en page. */
body > header, body > main, body > footer { position: relative; z-index: 1; }

/* Un mot mis en valeur par le dégradé de l'application (à utiliser peu). */
.vl-degrade-texte {
  background: var(--vl-degrade-texte);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* =====================================================================
 * 5. TÉLÉPHONES ET TABLETTES
 * ---------------------------------------------------------------------
 * Les styles du site réduisent h1 à 27 px sous 780 px. Comme cette couche
 * est chargée après, elle doit REDONNER des tailles mobiles correctes,
 * sinon les grands titres du bureau s'appliqueraient aux téléphones.
 * ===================================================================== */
@media (max-width: 780px) {
  .wrap { padding: 0 18px; }
  main { padding: 32px 0 60px; }
  .hero { padding: 26px 0 14px; }
  h1 { font-size: 1.9rem; line-height: 1.12; max-width: none; }
  h2 { font-size: 1.42rem; margin: 40px 0 12px; max-width: none; }
  .lead { font-size: 1.06rem; }
  .grid { gap: 16px; }
  .card { padding: 20px; }
  .band { padding: 34px 0; margin: 34px 0; }
}

@media (min-width: 781px) and (max-width: 1024px) {
  .grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}

/* Une ombre large et un flou coûtent cher sur un petit processeur. */
@media (max-width: 640px) {
  .vl-aurora i { filter: blur(56px); opacity: .28; }
}

/* Accessibilité : mouvement réduit → les aurores se figent. */
@media (prefers-reduced-motion: reduce) {
  .vl-aurora i { animation: none !important; }
}

/* ==========================================================================
   LE LOADER DE VEALIVE — NEUF CARRES QUI TOURNENT, UNE COULEUR QUI DEFILE.
   Modele fourni par le proprietaire, adapte aux couleurs de la marque : la
   couleur VOYAGE entre le violet et l'or PENDANT que le carre tourne.
   Un seul geste, donc : un tour, un aller-retour de couleur.
   ========================================================================== */
@property --vl-loader-teinte{
  syntax:'<color>';
  inherits:false;
  initial-value:#B754F9;
}
.vl-loader{
  --vl-violet:#B754F9;
  --vl-or:#F0A868;
  --c:no-repeat linear-gradient(var(--vl-loader-teinte) 0 0);
  width:45px;height:45px;
  background:var(--c),var(--c),var(--c),var(--c),var(--c),var(--c),var(--c),var(--c),var(--c);
  background-size:16px 16px;
  animation:vl-loader-taille 1s infinite,vl-loader-positions 1s infinite,vl-loader-couleur 1s infinite;
}
@keyframes vl-loader-taille{
  0%,100%{width:45px;height:45px}
  35%,65%{width:65px;height:65px}
}
@keyframes vl-loader-positions{
  0%,40%{background-position:0 0,0 50%,0 100%,50% 100%,100% 100%,100% 50%,100% 0,50% 0,50% 50%}
  60%,100%{background-position:0 50%,0 100%,50% 100%,100% 100%,100% 50%,100% 0,50% 0,0 0,50% 50%}
}
@keyframes vl-loader-couleur{
  0%,100%{--vl-loader-teinte:#B754F9}
  50%{--vl-loader-teinte:#F0A868}
}
/* Version discrete, pour un bouton : 18 px, sans respiration. */
.vl-loader.vl-petit{
  width:18px;height:18px;background-size:6px 6px;
  animation:vl-loader-positions 1s infinite,vl-loader-couleur 1s infinite;
}
@media (prefers-reduced-motion:reduce){
  .vl-loader{animation:none;--vl-loader-teinte:#B754F9}
}

/* ==========================================================================
   LE LOADER SUR LES BOUTONS OCCUPES, SANS TOUCHER AUX PAGES.
   
   Les pages de connexion, d'inscription et de paiement desactivent leur bouton
   pendant l'attente (`button.disabled = true`). Ce selecteur s'en sert : des que
   le bouton est occupe, le loader apparait DANS le bouton.
   
   Aucune page n'a donc ete modifiee, et tout nouveau bouton occupe en profite
   automatiquement.
   ========================================================================== */
form button[type=submit]:disabled::after{
  content:'';
  display:inline-block;
  vertical-align:-3px;
  margin-left:10px;
  width:16px;height:16px;
  --c:no-repeat linear-gradient(#fff 0 0);
  background:var(--c),var(--c),var(--c),var(--c),var(--c),var(--c),var(--c),var(--c),var(--c);
  background-size:6px 6px;
  animation:vl-loader-positions 1s infinite;
}
@media (prefers-reduced-motion:reduce){
  form button[type=submit]:disabled::after{animation:none}
}

/* ==========================================================================
   CONTRASTE DES BOUTONS PRINCIPAUX — CORRECTIF D'ACCESSIBILITE.
   Blanc sur #B754F9 = 3,72:1, sous le seuil de 4,5:1 exige pour du texte de
   15 px (accessibility.md > Vision : « Up to 17 pts — All — 4.5:1 »).
   Le fond passe a #9333D9, la teinte d'appui que le site utilise deja : 5,65:1.
   Aucune couleur nouvelle n'est inventee, et rien d'autre n'est touche.
   ========================================================================== */
.btn-primary{background:#9333D9}
.btn-primary:hover{background:#7B22BC}