/* =====================================================================
   L'ÊTRE SUBTIL — letresubtil.ca
   Système de design : palette, typographie, composants.

   Palette tirée du site actuel (letresubtil.com, theme-color #7B6B8F) :
     mauve améthyste .... #7B6B8F   identité, liens, accents
     mauve profond ...... #5C4E6E   titres, barre supérieure
     brume lavande ...... #EDE8F2   fonds de section, survols
     sauge .............. #8FA08A   végétal, réussite, «🌿»
     or doux ............ #C2A878   boutons secondaires, filets
     sable .............. #FAF7F2   fond de page
     encre .............. #332E3A   texte

   À charger APRÈS portail.css : ce fichier redéfinit les variables du
   portail existant, donc toute l'interface héritée change de couleur
   sans qu'on touche au HTML.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Jost:wght@300;400;500;600&display=swap');

:root{
  /* ---- Palette (bleu du logo de L'Être Subtil) ----
     Les noms restent « mauve » pour compatibilité, mais portent
     désormais le bleu du logo, un peu plus clair pour les bandes. */
  --mauve:#3C4D80;      --mauve-fonce:#2A3763;   --mauve-nuit:#1E2C5C;
  --lavande:#E6E9F3;    --lavande-2:#F2F4FA;
  --sauge:#8FA08A;      --or:#C2A878;            --or-clair:#E8DCC6;
  --sable:#FAF7F2;      --creme:#FFFFFF;
  --encre:#29252E;      --doux:#5F5869;          --bord:#E7E0DA;
  --vert:#5E7F5A;       --rouge:#B4544F;

  /* ---- Compatibilité : variables du portail hérité ---- */
  --encre-2:var(--mauve-nuit);
  --bleu:var(--mauve);  --bleu-fonce:var(--mauve-fonce);
  --fond:var(--sable);  --carte:var(--creme);  --texte:var(--encre);

  /* ---- Typographie ---- */
  --titre:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --corps:'Jost', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* ---- Formes ---- */
  --rayon:14px;  --rayon-l:22px;
  --ombre:0 1px 2px rgba(51,46,58,.05), 0 10px 30px rgba(42,55,99,.07);
  --ombre-l:0 20px 50px rgba(42,55,99,.13);
  --transition:.22s cubic-bezier(.4,0,.2,1);
}

body{
  font-family:var(--corps);
  font-weight:300;
  font-size:15px;
  line-height:1.7;
  background:var(--sable);
  color:var(--encre);
  letter-spacing:.01em;
}

h1,h2,h3,h4,.titre-serif{
  font-family:var(--titre);
  font-weight:500;
  letter-spacing:.005em;
  color:var(--mauve-nuit);
  line-height:1.25;
  text-wrap:balance;            /* titres équilibrés : pas tassés en colonne */
}
h1{font-size:clamp(30px,4.5vw,50px)}
h2{font-size:clamp(24px,3.2vw,36px)}
h3{font-size:21px}

a{color:var(--mauve);text-decoration:none;transition:var(--transition)}
a:hover{color:var(--mauve-fonce);text-decoration:none}

/* Filet décoratif — remplace les traits durs par un dégradé doux */
.filet{height:1px;border:0;background:linear-gradient(90deg,transparent,var(--or),transparent);margin:34px 0}
.filet-court{width:64px;height:2px;border:0;background:var(--or);margin:18px 0}

/* Surtitre en petites capitales espacées */
.surtitre{
  font-size:11px;text-transform:uppercase;letter-spacing:.22em;
  color:var(--mauve);font-weight:500;
}

/* =====================================================================
   Habillage du portail hérité (topbar / menu)
   ===================================================================== */
.topbar{
  background:linear-gradient(135deg,var(--mauve-nuit),var(--mauve-fonce));
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar .role{color:var(--or-clair);letter-spacing:.2em;font-size:9.5px}
.topbar .util,.topbar .util a{color:#E6DFEE}
.menu-h{background:rgba(30,44,92,.96);backdrop-filter:saturate(1.4) blur(6px)}
.menu-h a{color:#DCD4E6;font-family:var(--corps);font-weight:400;font-size:12.5px;letter-spacing:.03em}
.menu-h a.actif{color:#fff;border-bottom-color:var(--or)}
.barre-haut{background:transparent;border-bottom:1px solid var(--bord)}
.barre-haut h1{font-family:var(--titre);font-size:26px;font-weight:500;color:var(--mauve-nuit)}
.contenu{max-width:1160px;padding:30px 22px 60px}

/* =====================================================================
   Cartes
   ===================================================================== */
.carte{
  background:var(--creme);
  border:1px solid var(--bord);
  border-radius:var(--rayon);
  box-shadow:var(--ombre);
  transition:var(--transition);
}
.carte-pad{padding:26px}
.carte-titre{font-family:var(--titre);font-size:20px;font-weight:500;color:var(--mauve-nuit)}

/* =====================================================================
   Boutons
   ===================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--corps);font-size:13px;font-weight:400;letter-spacing:.11em;
  text-transform:uppercase;
  padding:13px 30px;border-radius:999px;border:1px solid transparent;
  cursor:pointer;transition:var(--transition);
}
.btn-primaire{background:var(--mauve);color:#fff;box-shadow:0 6px 18px rgba(60,77,128,.28)}
.btn-primaire:hover{background:var(--mauve-fonce);color:#fff;transform:translateY(-1px);
  box-shadow:0 10px 26px rgba(60,77,128,.34)}
.btn-contour{background:transparent;color:var(--mauve-fonce);border-color:var(--or)}
.btn-contour:hover{background:var(--or-clair);color:var(--mauve-nuit)}
.btn-doux{background:var(--lavande);color:var(--mauve-fonce)}
.btn-doux:hover{background:#E3DBEC}
.btn-petit{padding:8px 18px;font-size:11px}

/* =====================================================================
   PORTAIL MEMBRE — grille de ressources
   ===================================================================== */
.espace-intro{
  background:linear-gradient(135deg,var(--lavande-2),var(--creme));
  border:1px solid var(--bord);border-radius:var(--rayon-l);
  padding:34px 36px;margin-bottom:34px;position:relative;overflow:hidden;
}
.espace-intro::after{
  content:'';position:absolute;right:-60px;top:-60px;width:220px;height:220px;
  border-radius:50%;background:radial-gradient(circle,rgba(194,168,120,.16),transparent 70%);
}
.espace-intro h2{margin-bottom:6px}
.espace-intro p{color:var(--doux);max-width:60ch}

.groupe-titre{
  display:flex;align-items:baseline;gap:14px;margin:44px 0 6px;
}
.groupe-titre h2{font-size:29px}
.groupe-soustitre{color:var(--doux);font-style:italic;font-family:var(--titre);font-size:17px;
  margin-bottom:20px}

.grille-res{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}

.res{
  background:var(--creme);border:1px solid var(--bord);border-radius:var(--rayon);
  overflow:hidden;display:flex;flex-direction:column;transition:var(--transition);
}
.res:hover{transform:translateY(-3px);box-shadow:var(--ombre-l);border-color:#DCD2E4}
.res-vignette{
  height:132px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--mauve-fonce),var(--mauve));
  color:rgba(255,255,255,.9);font-size:34px;position:relative;
}
.res[data-type="document"]  .res-vignette{background:linear-gradient(135deg,#7E7466,var(--or))}
.res[data-type="rencontre"] .res-vignette{background:linear-gradient(135deg,#6E8069,var(--sauge))}
.res[data-type="lien"]      .res-vignette{background:linear-gradient(135deg,#6B6478,#9A8FA8)}
.res-etiquette{
  position:absolute;top:12px;left:12px;background:rgba(255,255,255,.9);color:var(--mauve-nuit);
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;padding:4px 11px;border-radius:999px;
}
.res-corps{padding:20px 22px 22px;flex:1;display:flex;flex-direction:column}
.res-semaine{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--or);
  font-weight:500;margin-bottom:6px}
.res h3{font-family:var(--titre);font-size:21px;font-weight:500;margin-bottom:8px}
.res p{color:var(--doux);font-size:13.5px;line-height:1.6;flex:1}
.res-pied{margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.res-note{font-size:11.5px;color:var(--doux)}
.res-bloquee{opacity:.55}
.res-bloquee .res-vignette{filter:grayscale(.7)}

/* Bandeau d'avertissement discret */
.avis-confid{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--lavande-2);border-left:3px solid var(--or);
  border-radius:0 10px 10px 0;padding:15px 18px;margin:26px 0;
  font-size:12.5px;color:var(--doux);line-height:1.6;
}

/* =====================================================================
   LECTEUR VIDÉO PROTÉGÉ
   ===================================================================== */
.lecteur-page{background:#17141C;color:#EDE8F2;min-height:100vh}
.lecteur-cadre{
  position:relative;width:100%;aspect-ratio:16/9;background:#000;
  border-radius:var(--rayon);overflow:hidden;box-shadow:var(--ombre-l);
}
.lecteur-cadre iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Voile transparent : intercepte TOUS les clics destinés au lecteur
   distant (titre, bouton « Regarder sur YouTube », menu contextuel).
   Nos propres contrôles sont dessinés par-dessus. */
.voile{position:absolute;inset:0;z-index:5;background:transparent;cursor:pointer}

/* Filigrane dynamique : nom + courriel du membre, déplacé régulièrement */
.filigrane{
  position:absolute;z-index:6;pointer-events:none;
  font-family:var(--corps);font-size:12px;letter-spacing:.06em;
  color:rgba(255,255,255,.34);text-shadow:0 1px 3px rgba(0,0,0,.6);
  transition:top 1.4s ease, left 1.4s ease;
}

/* Barre de contrôle maison */
.ctrl{
  position:absolute;left:0;right:0;bottom:0;z-index:7;
  display:flex;align-items:center;gap:14px;padding:14px 18px;
  background:linear-gradient(transparent,rgba(0,0,0,.82));
  opacity:0;transition:opacity .25s;
}
.lecteur-cadre:hover .ctrl,.ctrl.visible{opacity:1}
.ctrl button{
  background:none;border:0;color:#fff;cursor:pointer;font-size:17px;line-height:1;
  padding:6px 8px;border-radius:8px;transition:var(--transition);
}
.ctrl button:hover{background:rgba(255,255,255,.14)}
.ctrl .piste{flex:1;height:4px;background:rgba(255,255,255,.26);border-radius:3px;cursor:pointer;position:relative}
.ctrl .piste .lu{position:absolute;inset:0 auto 0 0;width:0;background:var(--or);border-radius:3px}
.ctrl .temps{font-size:11.5px;color:#D8D0E2;font-variant-numeric:tabular-nums;min-width:88px;text-align:right}

/* =====================================================================
   Documents
   ===================================================================== */
.doc-cadre{width:100%;height:min(82vh,900px);border:1px solid var(--bord);
  border-radius:var(--rayon);background:var(--creme);overflow:hidden}
.doc-cadre iframe,.doc-cadre object{width:100%;height:100%;border:0;display:block}

/* =====================================================================
   Site public — sections
   ===================================================================== */
.hero{
  position:relative;padding:clamp(70px,11vw,140px) 24px;text-align:center;
  background:radial-gradient(ellipse at 50% 0%,var(--lavande) 0%,var(--sable) 62%);
}
.hero .surtitre{display:block;margin-bottom:18px}
.hero h1{max-width:26ch;margin:0 auto 20px;text-wrap:balance;line-height:1.14}
.hero p{max-width:60ch;margin:0 auto 34px;color:var(--doux);font-size:17px}

.section{padding:clamp(56px,8vw,104px) 24px}
.section-claire{background:var(--creme)}
.section-lavande{background:var(--lavande-2)}
.contenu-etroit{max-width:760px;margin:0 auto}
.contenu-large{max-width:1160px;margin:0 auto}

/* Citation / respiration — le ton du site actuel est très «posé» */
.souffle{
  font-family:var(--titre);font-style:italic;font-size:clamp(20px,2.6vw,27px);
  line-height:1.6;color:var(--mauve-fonce);text-align:center;max-width:26ch;
  margin:0 auto;
}

/* =====================================================================
   Formulaires
   ===================================================================== */
input[type=text],input[type=email],input[type=password],input[type=tel],
input[type=date],input[type=datetime-local],input[type=number],select,textarea{
  box-sizing:border-box;max-width:100%;
  font-family:var(--corps);font-size:14px;font-weight:300;color:var(--encre);
  background:var(--creme);border:1px solid var(--bord);border-radius:10px;
  padding:11px 14px;width:100%;transition:var(--transition);
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--mauve);box-shadow:0 0 0 3px rgba(60,77,128,.14);
}
label{display:block;font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:#2E2933;font-weight:500;margin-bottom:7px}

/* =====================================================================
   Accessibilité & impression
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}
@media print{
  .topbar,.menu-h,.ctrl,.btn{display:none !important}
}
@media(max-width:640px){
  .carte-pad{padding:20px}
  .espace-intro{padding:24px 22px}
  .grille-res{grid-template-columns:1fr}
}

/* =====================================================================
   ADMINISTRATION SUR MOBILE
   Corrige la barre du haut qui débordait et les tableaux trop larges.
   Chargé après portail.css : ces règles ont le dernier mot.
   ===================================================================== */
@media(max-width:820px){

  /* --- Barre du haut : garder seulement l'essentiel visible --- */
  .topbar{flex-wrap:nowrap;gap:8px;padding:10px 12px;align-items:center}
  .topbar .fl{min-width:0;flex:1 1 auto}
  .topbar .marque{min-width:0;display:flex;flex-direction:column;line-height:1.05}
  .topbar .marque .nom{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar .marque-embleme{width:32px;height:32px}
  .topbar .role{display:none}

  /* Les liens texte de droite disparaissent : tout passe par le menu
     hamburger, où on les ajoute (voir plus bas). On ne garde que
     « Déconnexion », en pictogramme compact. */
  .topbar .util{gap:0;flex-shrink:0}
  .topbar .util a{display:none}
  .topbar .util a[href$="logout.php"]{
    display:inline-flex;align-items:center;justify-content:center;
    width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.12);
    font-size:0;position:relative;
  }
  .topbar .util a[href$="logout.php"]::before{
    content:"⏻";font-size:17px;color:#EFE9F4;
  }
}

/* Un tableau ne doit jamais déformer la page : il défile dans sa carte. */
.tab{display:table;width:100%;min-width:560px}
.carte-pad{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Sur très petit écran, le titre de carte et ses boutons s'empilent. */
@media(max-width:600px){
  .carte-titre{flex-direction:column;align-items:flex-start;gap:12px}
  .carte-titre > span:last-child{flex-wrap:wrap}
}

/* Le menu latéral mobile : liens de service ajoutés en bas, séparés. */
.menu-h .menu-mobile-sup{display:none}
@media(max-width:820px){
  .menu-h .menu-mobile-sup{
    display:block;margin-top:auto;padding-top:14px;
    border-top:1px solid rgba(255,255,255,.12);
  }
}

/* Le panneau de menu mobile doit défiler si les liens dépassent l'écran. */
@media(max-width:820px){
  .menu-h .menu-inner{overflow-y:auto;-webkit-overflow-scrolling:touch}
}

/* =====================================================================
   FORMULAIRES EN LIGNE DE L'ADMINISTRATION
   Sur grand écran : les champs s'alignent côte à côte et se répartissent.
   Sur mobile : chaque champ prend toute la largeur, l'un sous l'autre.
   Remplace les grilles à colonnes fixes qui s'écrasaient sur téléphone.
   ===================================================================== */
.form-ligne{
  display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;
}
.form-ligne > div{
  flex:1 1 180px;   /* chaque champ occupe au moins 180px, puis grandit */
  min-width:0;
}
.form-ligne > div:last-child,
.form-ligne button{
  flex:0 0 auto;    /* le bouton garde sa taille naturelle */
}
.form-ligne label{white-space:normal}
.form-ligne input,
.form-ligne select,
.form-ligne textarea{width:100%}

@media(max-width:640px){
  .form-ligne{flex-direction:column;align-items:stretch;gap:14px}
  .form-ligne > div{flex:1 1 auto;width:100%}
  .form-ligne button{width:100%}
  /* Les libellés ne s'affichent plus jamais en escalier */
  .form-ligne label{font-size:11px;letter-spacing:.08em}
}


/* Placeholders un peu plus lisibles (par défaut trop pâles) */
::placeholder{color:#79727F;opacity:1}
input::placeholder,textarea::placeholder{color:#79727F;opacity:1}

/* =====================================================================
   HABILLAGE DES MODULES DE GESTION (clients, factures, services,
   fournisseurs, commandes, rapports, comptabilité, rendez-vous,
   forfaits). Ces modules héritent de portail.css : on efface ici les
   dernières teintes bleues « génériques » pour tout garder dans la
   palette mauve de L'Être Subtil, et on assure le rendu sur mobile.
   (subtil.css est chargé APRÈS portail.css : ces règles l'emportent.)
   ===================================================================== */

/* Variable d'accent utilisée par le tri des tableaux et certains survols. */
:root{
  --amber: var(--or);
  --orange: var(--mauve-fonce);
  --bleu: var(--mauve);
  --bleu-fonce: var(--mauve-fonce);
}

/* Liens, boutons primaires, focus : déjà mauves via --bleu, on verrouille. */
a{color:var(--mauve)}
.btn-pri,.btn-primaire{background:var(--mauve);border-color:var(--mauve);color:#fff}
.btn-pri:hover,.btn-primaire:hover{background:var(--mauve-fonce);border-color:var(--mauve-fonce)}
.btn-actif{background:var(--mauve);border-color:var(--mauve);color:#fff}

/* Survols de boutons et de lignes : lavande au lieu du gris-bleu. */
.btn:hover{background:var(--lavande-2,#F1ECF6)}
.tab th{background:#F3EFF8;color:var(--mauve-nuit)}
.tab tbody tr:hover{background:var(--lavande-2,#F6F2FA)}

/* Indicateur de tri (était ambre OrdiCloud). */
.tab th[data-tri]:hover{color:var(--mauve)}
.tab th[data-tri] .tri-ind{color:var(--mauve)}

/* Badges / pastilles de statut neutres : teinte mauve douce par défaut. */
.badge{background:var(--lavande,#EDE7F3);color:var(--mauve-fonce)}

/* Alerte « info » et notes privées : étaient bleues en dur. */
.alerte-info{background:var(--lavande-2,#F3EFF8);border-color:#D8CCE6;color:var(--mauve-nuit)}
.note-bloc.prive{background:var(--lavande-2,#F3EFF8);border-color:#D8CCE6}
.note-bloc .tag.prv{background:#D8CCE6;color:var(--mauve-nuit)}
.note-bloc .tag.cli{background:#E7DEF0;color:var(--mauve-fonce)}

/* Lien actif du menu : liseré or (déjà réglé) — on garde la cohérence. */
.menu-h a.actif{border-bottom-color:var(--or)}

/* Champ en focus : halo mauve (et non bleu) partout dans la gestion. */
input:focus,select:focus,textarea:focus{
  border-color:var(--mauve);
  box-shadow:0 0 0 3px rgba(60,77,128,.16);
}

/* -------- Responsive : les grilles inline des modules s'empilent -------- */
@media(max-width:860px){
  /* Toute grille à 2 colonnes (saisie compta, commandes/factures de la
     fiche membre, bandeaux de synthèse) repasse en une seule colonne. */
  [style*="grid-template-columns:1.4fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="repeat(auto-fit"]{
    grid-template-columns:1fr !important;
  }
}

/* Les formulaires « en ligne » (filtres, saisie rapide) : déjà gérés par
   .form-ligne ; pour les .fl inline des nouveaux modules, on enveloppe. */
@media(max-width:600px){
  form.fl{flex-wrap:wrap}
  form.fl .champ{flex:1 1 100%;min-width:0}
  form.fl button{width:100%}
}

/* Les tableaux larges (factures, compta, agenda) défilent horizontalement
   dans leur carte plutôt que de casser la mise en page. */
.carte{overflow-x:auto}
.tab{min-width:0}
@media(min-width:620px){ .tab{min-width:560px} }

/* =====================================================================
   BANDE DU HAUT COMPACTE (−40% de hauteur)
   Réduit la barre d'administration et le menu pour gagner de l'espace.
   ===================================================================== */
.topbar{padding:4px 22px !important}
.topbar .marque-embleme{width:24px !important;height:24px !important}
.topbar .marque .nom{font-size:18px}
.topbar .role{font-size:9px}
.menu-h .menu-inner{padding:0 14px}
.menu-h a{padding:5px 11px !important;font-size:12px}
.menu-h{top:40px}
.barre-haut{padding:7px 22px}
.barre-haut h1{font-size:22px}
@media(max-width:820px){
  .topbar{padding:6px 12px !important}
  .menu-h{top:0}
}

/* =====================================================================
   BOUTONS DE LA GESTION — compacts
   Le .btn général est grand et arrondi (style du site public). Dans la
   gestion (conteneur .app), on le rend plus petit et plus sobre.
   N'affecte PAS le site public (qui n'a pas .app).
   ===================================================================== */
.app .btn{
  padding:7px 15px;border-radius:8px;font-size:12.5px;
  letter-spacing:.02em;text-transform:none;font-weight:500;gap:6px;
}
.app .btn-sm{padding:5px 11px;font-size:12px}
.app .btn-pri,.app .btn-primaire{background:var(--mauve);color:#fff;box-shadow:none}
.app .btn-pri:hover,.app .btn-primaire:hover{background:var(--mauve-fonce);transform:none;box-shadow:none}


/* =====================================================================
   MENU DE GESTION — deux lignes équilibrées (7 onglets par ligne)
   Grille régulière : les 14 entrées se répartissent 7 + 7, centrées,
   sans barre de défilement. (Desktop ; mobile = tiroir inchangé.)
   ===================================================================== */
@media(min-width:821px){
  .menu-h .menu-inner{
    display:grid;
    grid-template-columns:repeat(7,auto);
    justify-content:center;align-items:stretch;
    column-gap:4px;row-gap:2px;
    overflow-x:visible;
    padding:4px 14px;max-width:1200px;
  }
  .menu-h a{
    justify-content:center;text-align:center;
    border-bottom-width:2px;white-space:nowrap;
  }
}
/* Écrans plus étroits : 5 par ligne pour ne pas serrer. */
@media(min-width:821px) and (max-width:1150px){
  .menu-h .menu-inner{grid-template-columns:repeat(5,auto)}
}