/* ═══════════════════════════════════════════════════════════════════════════
   Gabarit « BULLE » — logiciel-therapeute.ch (11/08/2026, demande user)
   ═══════════════════════════════════════════════════════════════════════════
   Bulle, tel que le SiteBuilder le définit (config.py → GABARITS["bulle"]) :
     en-tête FLOTTANT (une pilule détachée du haut) · cartes à OMBRE (aucun
     bord, aucun filet) · coins 36 px · rythme aéré · titres centrés · héros
     centré · largeur 1040 px · boutons pilule · grille 300 px · médaillons
     RONDS. C'est le gabarit du portail cours-ai.com.
   ⚠️ Remplace la couche « Galet » du même jour : le user a tranché pour Bulle.

   ⚠️ C'est une COUCHE, pas une réécriture : `main.css` et les styles en ligne
   de l'accueil restent en place, cette feuille passe par-dessus. Deux raisons —
   on ne réécrit pas 20 ko de CSS d'un site marchand en production, et le
   retour arrière tient en une ligne (retirer le <link>).
   ⚠️ Elle est chargée par les DIX pages, y compris l'accueil et Vision qui
   n'utilisent PAS main.css : ces deux-là partagent malgré tout 28 noms de
   classes avec elle (brand, container, section-head, site-header, btn…), ce
   qui suffit à leur donner le même visage. Le <link> doit venir APRÈS leur
   bloc <style>, sinon il perd.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --radius:36px;          /* Bulle : coins 36 px */
  --radius-sm:18px;
  --container:1040px;     /* Bulle : largeur 1040 px */
  --bulle-ombre:0 14px 40px -14px rgba(10,20,55,.20);
  --bulle-ombre-forte:0 22px 60px -18px rgba(10,20,55,.30);
}

/* ── L'EN-TÊTE FLOTTE ──────────────────────────────────────────────────────
   Le geste signature de Bulle : la barre n'est plus collée au bord de la
   fenêtre, c'est une PILULE posée dessus, avec sa marge et son ombre. Le logo
   reste au-dessus du menu (le tout tient sur deux lignes centrées).
   ⚠️ `height:70px` doit sauter, sinon les deux lignes se chevauchent.
   ⚠️ Le fond translucide n'a de sens qu'avec le flou : sans `backdrop-filter`,
   le texte de la page se lit à travers la pilule. */
.site-header{
  border-bottom:0 !important; background:transparent !important;
  backdrop-filter:none !important; padding:14px 0 0}
.site-header .container{
  flex-direction:column !important; height:auto !important;
  gap:12px; padding:14px 22px 16px; justify-content:center;
  width:min(var(--container),calc(100% - 28px));
  background:rgba(255,255,255,.86); backdrop-filter:blur(14px);
  border:1px solid rgba(10,20,55,.08); border-radius:36px;
  box-shadow:0 18px 44px rgba(10,20,55,.12)}
.brand{justify-content:center}
.main-nav{justify-content:center; flex-wrap:wrap}
.main-nav a{border-radius:999px}          /* Galet : tout est pilule */

/* ── LE LOGO : la fleur d'armoise ──────────────────────────────────────────
   Remplace la pastille « ✦ » en dégradé. ⚠️ `content:""` seul ne suffit pas :
   la règle d'origine pose un caractère ET un fond dégradé, il faut neutraliser
   les deux. */
.brand::before{
  content:"" !important;
  width:42px !important; height:42px !important;
  background:url(../img/artemisia-fleur.png) center/contain no-repeat !important;
  border-radius:0 !important; box-shadow:none !important;
}

/* ── LES CARTES : de l'ombre, plus un seul bord ────────────────────────────
   Galet dit « carte: ombre » et « filets: False ». Les bords de 1 px et les
   filets colorés de gauche/haut disparaissent ; c'est l'ombre portée qui
   détache la carte du fond. */
.feature-card,
.catalog-grid .tool-card,
.catalog-grid>article,
.faq-item,
.step-card,
.capability-card{
  border:0 !important;
  border-radius:var(--radius) !important;
  box-shadow:var(--bulle-ombre) !important;
  background:var(--frmi-card,#fff);
}
.feature-card::before{display:none !important}   /* le filet teal de gauche */
.tool-card{border-top:0 !important}              /* le filet de catégorie */
.feature-card:hover,
.catalog-grid>*:hover{box-shadow:var(--bulle-ombre-forte) !important}

/* ⚠️ La couleur de catégorie du catalogue ne disparaît pas avec le filet :
   elle reste portée par la pastille `.cat-badge`, qui est l'endroit où on la
   lit vraiment. */
.cat-badge{border-radius:999px}

/* ── LES IMAGES ────────────────────────────────────────────────────────────
   Coins 32 px partout. ⛔ On ne rend PAS circulaires les captures d'écran en
   cadre navigateur (.feature-img.has-image) : un rond sur une capture large
   coupe l'interface, ce que Galet ne demande nulle part. Le rond est réservé
   aux vignettes carrées. */
.feature-img,.tool-thumb,.frame{border-radius:var(--radius) !important;overflow:hidden}
.tool-icon{border-radius:50% !important}

/* ── GRILLES À 300 px, ET QUI RESPIRENT ────────────────────────────────────
   Les grilles étaient figées à 3 colonnes : sur une tablette la troisième
   carte débordait. `auto-fit` + 300 px est la valeur du gabarit et corrige
   l'affichage étroit au passage. */
.feature-grid,.capability-grid,.steps-grid{
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr)) !important;
  gap:24px !important;
}

/* ── TITRES CENTRÉS, RYTHME AÉRÉ ───────────────────────────────────────────*/
.section-head{text-align:center;margin-bottom:60px}
section{padding-top:78px;padding-bottom:78px}

/* ── LE PIED DE PAGE ───────────────────────────────────────────────────────
   Le seul filet conservé : celui qui sépare les mentions légales. Il porte une
   information (fin du contenu), il n'est pas décoratif. */
.site-footer{border-radius:var(--radius) var(--radius) 0 0}

/* ── PETITS ÉCRANS ─────────────────────────────────────────────────────────
   L'en-tête centré tient déjà en colonne ; on resserre seulement les marges. */
@media(max-width:760px){
  .site-header{padding-top:10px}
  .site-header .container{gap:10px;padding:12px 14px 14px;border-radius:28px}
  .main-nav{gap:2px}
  .main-nav a{padding:8px 11px;font-size:.9rem}
  section{padding-top:56px;padding-bottom:56px}
}

/* ── LES TROIS LOGOS D'HÉRITAGE, ramenés à un seul ─────────────────────────
   🚨 Le site portait TROIS marquages différents selon la page (relevé le
   11/08) : l'accueil un `<span class="dot">✦</span>`, Vision une image
   `logo-artemisia-512.png` (le mot-marque sur fond navy), les huit autres le
   pseudo-élément `.brand::before`. Poser la fleur sans neutraliser les deux
   premiers donnait DEUX logos côte à côte sur l'accueil.
   On masque donc les variantes, et `::before` — commun aux trois — porte la
   fleur seule. */
.brand .dot{display:none !important}
.brand img.blogo{display:none !important}
/* Vision n'a QUE l'image : sans texte à côté, la fleur seule serait muette. */
.brand:has(img.blogo)::after{content:"ArtemisIA";font-family:var(--display,inherit);
  font-weight:800;font-size:1.15rem;color:var(--frmi-navy,#000B33);letter-spacing:-.01em}

/* ── LES SAUTS D'ANCRE NE DOIVENT PAS PASSER SOUS LA PILULE ────────────────
   🚨 Défaut créé par l'en-tête collant : « Voir le logiciel ↓ », les ancres du
   pied de page et tout `scrollIntoView()` amenaient le titre visé DERRIÈRE
   l'en-tête flottant — on atterrissait sur un texte tronqué. `scroll-padding`
   est honoré par les navigateurs pour les deux cas ; une seule ligne suffit,
   et elle ne coûte rien quand l'en-tête n'est pas là. */
html{scroll-padding-top:180px}
@media(max-width:760px){html{scroll-padding-top:150px}}

/* ── DEUX CATÉGORIES DE PLUS AU CATALOGUE (11/08/2026) ─────────────────────
   La liste du Manager fait foi : elle ajoute « Naturopathie (MTE) » et
   « Médecine tibétaine (Sowa Rigpa) ». `--cat-mtt` existait déjà dans main.css
   (posé en juillet, resté inerte depuis) ; `--cat-mte` est neuf. Sans ces deux
   couleurs, les pastilles des nouvelles cartes tomberaient sur le teal par
   défaut et la catégorie ne se lirait plus. */
:root{--cat-mte:#2F7D5B}
.cat-badge.cat-mte,.tool-card.cat-mte{--c:var(--cat-mte)}