/* ==================================================================
   Beauté Digitale — systeme de design de l'application d'administration
   Direction artistique : epure chic. Les deux couleurs du logo portent
   toute la charte — le bleu nuit #212842 pour le texte et les actions,
   le rose #E4B5B1 pour les accents et les aplats.
   Toutes les classes et variables historiques sont conservees.

   Contrainte de contraste : le rose de marque est CLAIR (1.82:1 avec du
   blanc). Il ne porte donc jamais de texte blanc — il sert de fond, de
   trait ou de halo, et le texte pose dessus est le bleu nuit (7.98:1).
   Pour les aplats qui ont besoin de blanc, --bs-rose-deep (4.93:1).
   ================================================================== */

:root {
    /* --- Fonds ----------------------------------------------------- */
    --bs-bg: #f8f8fb;
    --bs-surface: #ffffff;
    --bs-surface-alt: #fbfbfd;
    --bs-cream: #f4eeec;
    --bs-beige: #e3d9d7;
    --bs-taupe: #ada7ad;

    /* --- Texte ----------------------------------------------------- */
    --bs-ink: #212842;        /* bleu nuit du logo — 14.5:1 sur blanc */
    --bs-ink-soft: #5b6079;   /* 6.19:1 sur blanc */
    --bs-muted: #8a8fa3;      /* 3.21:1 — jamais pour une information essentielle */

    /* --- Accents --------------------------------------------------- */
    --bs-navy: #212842;       /* couleur de marque, alias explicite */
    --bs-rose: #e4b5b1;       /* rose du logo : traits, halos, aplats */
    --bs-rose-soft: #f5e3e1;
    --bs-rose-deep: #a35d56;  /* derive assombri : seul rose qui porte du blanc */
    --bs-sage: #7f9077;
    --bs-sage-soft: #dbe2d4;

    /* --- Etats ----------------------------------------------------- */
    /* Assombries d'un cran : le fond passe de creme a bleute, plus clair,
       et ces deux teintes tombaient juste sous 4.5:1 sur les aplats teintes
       du comparateur (mesure sur le banc d'essai, pas a l'oeil). */
    --bs-danger: #9b403a;
    --bs-success: #5d7352;
    --bs-warning: #a87f38;

    /* --- Traits et formes ------------------------------------------ */
    --bs-line: rgba(33, 40, 66, 0.10);
    --bs-line-strong: rgba(33, 40, 66, 0.18);
    --bs-radius: 12px;
    --bs-radius-sm: 8px;
    --bs-radius-xs: 6px;

    /* Ombres en couches : diffuse + contact. Opacites tres basses. */
    --bs-shadow: 0 1px 2px rgba(33,40,66,0.04), 0 12px 32px -12px rgba(33,40,66,0.16);
    --bs-shadow-sm: 0 1px 2px rgba(33,40,66,0.04), 0 6px 16px -8px rgba(33,40,66,0.12);
    --bs-shadow-lg: 0 2px 4px rgba(33,40,66,0.04), 0 24px 56px -20px rgba(33,40,66,0.22);

    /* --- Typographie ----------------------------------------------- */
    --bs-font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --bs-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* --- Rythme ---------------------------------------------------- */
    --bs-gutter: 1.6rem;
    --bs-maxw: 1180px;
    --bs-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--bs-font-body);
    font-size: 0.9375rem;
    color: var(--bs-ink);
    background: var(--bs-bg);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "kern" 1;
}

/* --- Titrage --------------------------------------------------------
   Le serif est a fort contraste : il demande une graisse moyenne et un
   interlignage serre pour tenir son elegance. En dessous de ~1.05rem il
   perd sa lisibilite, on bascule alors sur le sans-serif.
   ------------------------------------------------------------------ */
h1, h2, h3, h4 {
    font-family: var(--bs-font-heading);
    font-weight: 500;
    color: var(--bs-ink);
    line-height: 1.18;
    letter-spacing: -0.005em;
    margin: 0 0 0.45em;
    text-wrap: balance;
}
h1 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--bs-rose-deep); text-decoration: none; transition: color 0.15s var(--bs-ease); }
a:hover { color: var(--bs-ink); text-decoration: underline; text-underline-offset: 2px; }

hr { border: 0; border-top: 1px solid var(--bs-line); margin: 1.6rem 0; }

::selection { background: var(--bs-rose-soft); color: var(--bs-ink); }

:focus-visible {
    outline: 2px solid var(--bs-rose);
    outline-offset: 2px;
    border-radius: var(--bs-radius-xs);
}

/* --- Marque ---------------------------------------------------------- */
.bs-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-family: var(--bs-font-heading);
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--bs-ink);
    text-decoration: none;
}
.bs-brand:hover { text-decoration: none; color: var(--bs-ink); }
/* Le logo porte le nom : hauteur imposee, largeur libre pour ne jamais le
   deformer quel que soit le rapport du fichier. */
.bs-brand__logo {
    height: 34px;
    width: auto;
    max-width: 100%;
    display: block;
}
/* Pastille historique, conservee pour les gabarits qui l'utilisent encore. */
.bs-brand__mark {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--bs-rose) 0%, var(--bs-navy) 100%);
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.5), 0 2px 6px -2px rgba(33,40,66,0.25);
    display: inline-block;
    flex: none;
}

/* --- Ecran d'authentification --------------------------------------- */
/* Panneau bleu nuit + panneau clair. C'est le seul ecran ou le bleu de la
   marque devient une surface : le logo y passe donc en variante inversee,
   et le rose sert d'accent (7.98:1 sur le bleu, verifie). */
.bs-auth-body { background: var(--bs-navy); }

.bs-auth {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
}

/* --- Panneau de marque ---------------------------------------------- */
.bs-auth__aside {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    /* Photo de fond, recouverte d'un voile bleu nuit. Les couches sont
       empilees dans cet ordre : voile de marque, degrades roses, puis la
       photo. Le voile est assez dense pour que le texte reste lisible quelle
       que soit la photo — mesure a 8:1 minimum sur la zone de texte. */
    background:
        linear-gradient(180deg, rgba(33,40,66,0.86), rgba(33,40,66,0.94)),
        radial-gradient(760px 520px at 14% 10%, rgba(228,181,177,0.22), transparent 64%),
        radial-gradient(680px 480px at 88% 96%, rgba(228,181,177,0.14), transparent 60%),
        var(--bs-photo, none) center / cover no-repeat,
        var(--bs-navy);
    color: #fff;
    padding: 3.5rem clamp(2.5rem, 4vw, 4.5rem);
    display: flex;
    align-items: center;
}
/* Grain tres fin : casse le degrade et lui donne de la matiere. Genere en
   SVG plutot qu'en image, pour ne rien telecharger. */
.bs-auth__aside::before {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    opacity: 0.5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
}
.bs-auth__aside-inner {
    display: flex;
    flex-direction: column;
    gap: clamp(2.4rem, 5vh, 4rem);
    width: 100%;
    max-width: 34rem;
    margin-inline: auto;
}
.bs-brand__logo--lg { height: 46px; }

.bs-auth__pitch h2 {
    font-size: clamp(2.1rem, 1.4rem + 2.1vw, 3.1rem);
    line-height: 1.12;
    font-weight: 500;
    letter-spacing: -0.015em;
    color: #fff;
    margin: 0.9rem 0 0;
}
/* Pas d'italique ici : aucune fonte italique n'est embarquee (voir fonts.css),
   le navigateur la SYNTHETISERAIT par simple inclinaison. Sur un serif a fort
   contraste en 49px, ce faux italique se voit immediatement — les lettres d'un
   vrai italique Garamond ont un dessin different, pas juste une pente.
   La distinction passe donc par la couleur et le retour a la ligne. */
.bs-auth__pitch h2 em {
    display: block;
    font-style: normal;
    color: var(--bs-rose);
}
.bs-auth__lead {
    margin: 1.4rem 0 0;
    max-width: 42ch;
    color: rgba(255,255,255,0.76);
    line-height: 1.65;
}
.bs-auth__features { list-style: none; padding: 0; margin: 2.2rem 0 0; }
.bs-auth__features li {
    position: relative;
    padding: 0.5rem 0 0.5rem 1.85rem;
    color: rgba(255,255,255,0.9);
    font-size: 0.94rem;
}
/* Coche dessinee au trait : deux segments en rotation, aucun glyphe a charger. */
.bs-auth__features li::before,
.bs-auth__features li::after {
    content: "";
    position: absolute;
    background: var(--bs-rose);
    border-radius: 1px;
}
.bs-auth__features li::before { left: 2px;   top: 1.24rem; width: 5px;  height: 2px; transform: rotate(45deg); }
.bs-auth__features li::after  { left: 4.5px; top: 1.12rem; width: 10px; height: 2px; transform: rotate(-50deg); }

.bs-auth__legal {
    margin: 0;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    color: rgba(255,255,255,0.5);
}

/* --- Panneau du formulaire ------------------------------------------- */
.bs-auth__panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(2rem, 5vh, 4rem) clamp(1.5rem, 4vw, 3.5rem);
    background: var(--bs-surface);
}
.bs-auth__card { width: 100%; max-width: 25rem; }

.bs-auth__title {
    font-size: clamp(1.9rem, 1.5rem + 1.1vw, 2.35rem);
    line-height: 1.15;
    font-weight: 500;
    letter-spacing: -0.015em;
    margin: 0.55rem 0 0;
}
.bs-auth__sub { margin: 0.5rem 0 0; color: var(--bs-ink-soft); }
.bs-auth__form { margin-top: 2rem; }
.bs-auth__form .bs-field { margin-bottom: 1.15rem; }

.bs-auth__switch {
    margin: 1.75rem 0 0;
    padding-top: 1.4rem;
    border-top: 1px solid var(--bs-line);
    font-size: 0.9rem;
    color: var(--bs-ink-soft);
    text-align: center;
}

/* Surtitre en capitales espacees : marqueur editorial de la charte. */
.bs-overline {
    margin: 0;
    font-family: var(--bs-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bs-ink-soft);
}
.bs-overline--accent { color: var(--bs-rose); }

.bs-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.bs-link-quiet {
    font-size: 0.82rem;
    color: var(--bs-ink-soft);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.bs-link-quiet:hover { color: var(--bs-rose-deep); border-bottom-color: currentColor; }

/* Case « Rester connecté » (connexion persistante). */
.bs-remember {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: -0.25rem 0 1.1rem;
    font-size: 0.9rem;
    color: var(--bs-ink-soft);
    cursor: pointer;
    user-select: none;
}
.bs-remember input { width: 1.05rem; height: 1.05rem; accent-color: var(--bs-rose-deep); cursor: pointer; }

/* Sélecteur de couleur + champ HEX (hex-color.js) : le HEX est la représentation
   par défaut, éditable, à côté de la pastille. */
/* Flex (pas inline-flex) + width:100% : le duo pastille + champ occupe la
   largeur du champ de formulaire et ne DÉBORDE jamais de la colonne. La pastille
   est fixe, le champ HEX prend le reste et peut rétrécir (min-width:0). */
.js-hexwrap { display: flex; align-items: center; gap: 0.5rem; width: 100%; max-width: 100%; }
.js-hexwrap input[type="color"] {
    width: 2.8rem; height: 2.6rem; min-height: 0; padding: 2px; flex: none; cursor: pointer;
}
.js-hexfield {
    flex: 1 1 auto; min-width: 0; width: auto; text-transform: lowercase; letter-spacing: 0.02em;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

/* Champ + bouton incruste (afficher / masquer le mot de passe). */
.bs-input-group { position: relative; display: flex; }
.bs-input-group .bs-input { padding-right: 5.25rem; }
.bs-input-group__btn {
    position: absolute;
    right: 0.35rem; top: 50%; transform: translateY(-50%);
    border: 0;
    background: transparent;
    padding: 0.35rem 0.6rem;
    border-radius: var(--bs-radius-xs);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--bs-ink-soft);
    cursor: pointer;
}
.bs-input-group__btn:hover { color: var(--bs-navy); background: var(--bs-cream); }

@media (max-width: 900px) {
    .bs-auth { grid-template-columns: 1fr; }
    .bs-auth__aside { padding: 2.25rem 1.5rem; }
    .bs-auth__aside-inner { gap: 1.5rem; max-width: 34rem; }
    .bs-auth__pitch h2 { font-size: 1.75rem; }
    /* Sur mobile le pitch ne doit pas repousser le formulaire sous la ligne
       de flottaison : on garde la promesse, on retire la demonstration. */
    .bs-auth__lead,
    .bs-auth__features,
    .bs-auth__legal { display: none; }
    .bs-brand__logo--lg { height: 38px; }
    .bs-auth__panel { padding: 2.25rem 1.5rem 3rem; }
}

/* --- Cartes ---------------------------------------------------------- */
.bs-card {
    background: var(--bs-surface);
    border-radius: var(--bs-radius);
    box-shadow: var(--bs-shadow-sm);
    padding: 1.75rem;
    border: 1px solid var(--bs-line);
}
/* Contenu pleine largeur (tableaux) : doit defiler horizontalement en mobile,
   jamais etre rogne. overflow-y reste masque pour conserver les coins arrondis. */
.bs-card--flush { padding: 0; overflow-x: auto; overflow-y: hidden; }

/* --- Formulaires ------------------------------------------------------ */
.bs-field { margin-bottom: 1.05rem; }
.bs-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--bs-ink-soft);
    margin-bottom: 0.35rem;
}
.bs-input, .bs-select, textarea.bs-input {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--bs-beige);
    border-radius: var(--bs-radius-sm);
    background: var(--bs-surface);
    color: var(--bs-ink);
    font-size: 0.9375rem;
    font-family: inherit;
    line-height: 1.5;
    transition: border-color 0.15s var(--bs-ease), box-shadow 0.15s var(--bs-ease);
}
/* Format genereux, reserve aux ecrans ou le formulaire EST la page
   (authentification) : la cible tactile passe a 48px. */
.bs-input--lg { padding: 0.82rem 1rem; font-size: 1rem; }
.bs-input::placeholder, textarea.bs-input::placeholder { color: var(--bs-muted); }
.bs-input:hover, .bs-select:hover { border-color: var(--bs-taupe); }
.bs-input:focus, .bs-select:focus, textarea.bs-input:focus {
    outline: none;
    border-color: var(--bs-rose);
    box-shadow: 0 0 0 3px var(--bs-rose-soft);
}
textarea.bs-input { resize: vertical; min-height: 6rem; }

.bs-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236a635b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    padding-right: 2.2rem;
}

input[type="color"].bs-input { height: 42px; padding: 0.2rem; cursor: pointer; }

/* --- Boutons ---------------------------------------------------------- */
.bs-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
    padding: 0.62rem 1.15rem;
    border-radius: var(--bs-radius-sm);
    border: 1px solid transparent;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s var(--bs-ease), color 0.15s var(--bs-ease),
                border-color 0.15s var(--bs-ease), box-shadow 0.15s var(--bs-ease),
                transform 0.08s var(--bs-ease);
}
.bs-btn:hover { text-decoration: none; }
.bs-btn:active { transform: translateY(1px); }

.bs-btn--primary {
    background: var(--bs-navy); color: #fff;
    box-shadow: 0 1px 2px rgba(33,40,66,0.18);
}
.bs-btn--primary:hover { background: #2e3757; color: #fff; box-shadow: var(--bs-shadow-sm); }

/* Le rose de marque ne passe pas le contraste AA avec du texte blanc
   (1.82:1) : le bouton utilise la teinte profonde derivee, le rose clair
   reste pour les aplats et les traits. */
.bs-btn--accent {
    background: var(--bs-rose-deep); color: #fff;
    box-shadow: 0 1px 2px rgba(163,93,86,0.24);
}
.bs-btn--accent:hover { background: #8c4c46; color: #fff; box-shadow: var(--bs-shadow-sm); }

.bs-btn--ghost {
    background: var(--bs-surface); color: var(--bs-ink);
    border-color: var(--bs-beige);
}
.bs-btn--ghost:hover { background: var(--bs-cream); border-color: var(--bs-taupe); color: var(--bs-ink); }

.bs-btn--danger { background: transparent; color: var(--bs-danger); border-color: rgba(168,73,66,0.28); }
.bs-btn--danger:hover { background: rgba(168,73,66,0.07); color: var(--bs-danger); }

.bs-btn--block { width: 100%; }
.bs-btn--disabled, .bs-btn:disabled { opacity: 0.45; pointer-events: none; }
.bs-btn--sm { padding: 0.38rem 0.75rem; font-size: 0.82rem; border-radius: var(--bs-radius-xs); }
.bs-btn--lg { padding: 0.85rem 1.4rem; font-size: 0.98rem; border-radius: var(--bs-radius-sm); }
.bs-btn--xs { padding: 0.25rem 0.55rem; font-size: 0.76rem; border-radius: var(--bs-radius-xs); }

/* --- Alertes / messages flash ---------------------------------------- */
.bs-alert {
    border-radius: var(--bs-radius-sm);
    padding: 0.8rem 1rem;
    margin-bottom: 1.1rem;
    font-size: 0.9rem;
    border: 1px solid transparent;
    border-left-width: 3px;
}
.bs-alert--error   { background: #fdf4f3; color: var(--bs-danger);  border-color: rgba(168,73,66,0.20); border-left-color: var(--bs-danger); }
.bs-alert--success { background: #f4f7f2; color: #52654a; border-color: rgba(97,120,86,0.20); border-left-color: var(--bs-success); }
.bs-alert--warning { background: #fbf6ec; color: #7a5c1f; border-color: rgba(168,127,56,0.22); border-left-color: var(--bs-warning); }

/* --- Loader plein écran pendant la génération du site ---------------- */
@keyframes bd-spin { to { transform: rotate(360deg); } }
.bd-import-loader {
    position: fixed; inset: 0; z-index: 20000;
    display: flex; align-items: center; justify-content: center;
    background: var(--bs-navy, #212842); color: #fff; text-align: center;
}
.bd-import-loader[hidden] { display: none; }
.bd-import-loader__box { max-width: 30rem; padding: 2rem; }
.bd-import-loader__spin {
    width: 46px; height: 46px; margin: 0 auto 1.5rem; border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.25); border-top-color: #fff;
    animation: bd-spin 0.8s linear infinite;
}
.bd-import-loader__title { font-family: var(--bs-font-heading, Georgia, serif); font-size: 1.4rem; margin: 0 0 0.7rem; }
.bd-import-loader__step {
    font-size: 1.05rem; min-height: 1.6em; margin: 0 0 1rem;
    opacity: 1; transform: translateY(0);
    transition: opacity 0.26s ease, transform 0.26s ease;
}
.bd-import-loader__step.is-swap { opacity: 0; transform: translateY(8px); }
.bd-import-loader__hint { font-size: 0.85rem; opacity: 0.7; margin: 0; }
@media (prefers-reduced-motion: reduce) {
    .bd-import-loader__spin { animation: none; }
    .bd-import-loader__step { transition: none; }
}

/* --- « Vos besoins » : chips de prestations reliées ------------------ */
.bs-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.3rem 0.25rem 0.6rem; background: var(--bs-cream); border: 1px solid var(--bs-line); border-radius: 999px; font-size: 0.85rem; }
.bs-chip__x { border: 0; background: transparent; cursor: pointer; font-size: 1rem; line-height: 1; color: var(--bs-ink-soft); padding: 0 0.15rem; }
.bs-chip__x:hover { color: var(--bs-danger); }
.bs-select--sm { font-size: 0.85rem; padding: 0.35rem 0.5rem; }

/* --- Liste des pages (réordonnancement + imbrication) ---------------- */
.bd-pages { display: flex; flex-direction: column; gap: 0.4rem; }
.bd-pages--pinned { margin-bottom: 0.4rem; }
.bd-page {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    background: var(--bs-surface); border: 1px solid var(--bs-line);
    border-radius: var(--bs-radius-sm);
}
/* Rubrique du site (Prestations, Vos besoins…) : positionnable, non éditable. */
.bd-page--marker { background: var(--bs-cream); border-style: dashed; }
/* Décalage visuel d'une page imbriquée (2e niveau) + connecteur. */
.bd-page[data-depth="1"] { margin-left: 2.2rem; position: relative; }
.bd-page[data-depth="1"]::before {
    content: ""; position: absolute; left: -1.1rem; top: 50%; width: 0.7rem; height: 1px;
    background: var(--bs-line-strong);
}
/* Page saisie : soulevée (elle suit le pointeur), au-dessus des voisines. */
.bd-page.is-dragging {
    box-shadow: var(--bs-shadow-lg, 0 12px 32px rgba(33,40,66,0.18));
    border-color: var(--bs-line-strong);
    position: relative;
}
/* Aperçu « imbrication » : la page va passer sous celle du dessus. */
.bd-page.is-nesting { outline: 2px solid var(--bs-rose-deep, #a35d56); outline-offset: -2px; }
.bd-pages.is-reordering { cursor: grabbing; }
.bd-page__pin { width: 1.2rem; text-align: center; flex: none; }
.bd-page__nest { display: inline-flex; gap: 0.1rem; flex: none; }
/* Titre + badges alignés avec des gouttières ; le chemin (/slug) passe sur sa
   propre ligne. Évite que titre et badges se collent/chevauchent. */
.bd-page__info { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; }
.bd-page__info > strong { line-height: 1.2; }
.bd-page__info > div { flex-basis: 100%; margin: 0.05rem 0 0; }
.bd-page .bs-grip { cursor: grab; touch-action: none; flex: none; }
.bd-page .bs-grip:active { cursor: grabbing; }

/* Mobile : la ligne d'une page passe en 2 rangées — infos en haut, actions
   (boutons / « Position dans le menu… ») en dessous, pleine largeur. Sans cela,
   le texte des actions écrasait le titre (chevauchement). */
@media (max-width: 640px) {
    .bd-page { flex-wrap: wrap; align-items: flex-start; }
    .bd-page__info { flex: 1 1 auto; }
    .bd-page .bs-node__actions {
        flex-basis: 100%; width: 100%; justify-content: flex-start;
        margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--bs-line);
    }
    .bd-page[data-depth="1"] { margin-left: 1.2rem; }
    .bd-page[data-depth="1"]::before { left: -0.7rem; width: 0.5rem; }
}
/* Besoins : réordonnancement à plat (même modèle que les pages). */
.bd-need.is-dragging {
    box-shadow: var(--bs-shadow-lg, 0 12px 32px rgba(33,40,66,0.18));
    border-color: var(--bs-line-strong);
    position: relative;
}
[data-needs].is-reordering { cursor: grabbing; }
/* L'en-tête est aligné en haut (bs-node__head) : on recentre la poignée sur la
   hauteur du champ de saisie plutôt que de la coller au bord supérieur. */
.bd-need .bs-grip { cursor: grab; touch-action: none; align-self: center; }
.bd-need .bs-grip:active { cursor: grabbing; }

/* --- Page « Illustrer » (aperçu + recherche de photos) -------------- */
/* Accordéon d'univers (page « Illustrer les prestations »). */
.bd-accordion { overflow: hidden; }
.bd-accordion__head {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1rem 1.1rem; cursor: pointer; list-style: none; user-select: none;
}
.bd-accordion__head::-webkit-details-marker { display: none; }
.bd-accordion__head::after {
    content: "▾"; color: var(--bs-muted); transition: transform 0.2s ease; margin-left: auto;
}
.bd-accordion[open] > .bd-accordion__head::after { transform: rotate(180deg); }
.bd-accordion__head:hover { background: var(--bs-cream); }
.bd-accordion__title { font-weight: 600; }
.bd-accordion__body { padding: 0 1.1rem 1.1rem; }

/* Onglets (écran SEO) : une famille de contenu par onglet. */
.bs-tabs {
    display: flex; gap: 0.25rem; flex-wrap: wrap;
    border-bottom: 1px solid var(--bs-line, #e3e3e8);
}
.bs-tab {
    padding: 0.55rem 0.9rem; border-radius: 8px 8px 0 0;
    color: var(--bs-muted, #7a7a86); text-decoration: none;
    border: 1px solid transparent; border-bottom: 0;
    margin-bottom: -1px; /* recouvre le trait du conteneur */
}
.bs-tab:hover { background: var(--bs-cream, #f7f5f2); color: var(--bs-ink, #212842); }
.bs-tab.is-active {
    background: var(--bs-surface, #fff); color: var(--bs-ink, #212842); font-weight: 600;
    border-color: var(--bs-line, #e3e3e8);
}
.bs-tab__count {
    display: inline-block; margin-left: 0.35rem; padding: 0 0.4rem;
    border-radius: 999px; background: var(--bs-cream, #f7f5f2);
    font-size: 0.75rem; font-weight: 500; color: var(--bs-muted, #7a7a86);
}
.bs-tab.is-active .bs-tab__count { background: var(--bs-line, #e3e3e8); color: var(--bs-ink, #212842); }

/* Jauge de longueur d'un champ SEO : compteur + trait, sous le champ.
   Orange = trop court, vert = bonne longueur, rouge = dépassement. */
.bs-gauge {
    display: flex; align-items: center; gap: 0.55rem;
    margin-top: 0.35rem;
}
.bs-gauge__num {
    font-size: 0.78rem; font-variant-numeric: tabular-nums; /* pas de sautillement */
    color: var(--bs-muted, #7a7a86); flex: none; min-width: 3.6rem;
}
.bs-gauge__bar {
    flex: 1; height: 3px; border-radius: 999px;
    background: var(--bs-line, #e3e3e8); overflow: hidden;
}
.bs-gauge__bar > i {
    display: block; height: 100%; width: 0;
    border-radius: inherit; background: currentColor;
    transition: width 0.15s ease;
}
/* La couleur d'état est portée par la jauge et héritée par le trait. */
.bs-gauge.is-short { color: #c77b28; }
.bs-gauge.is-ok    { color: #2e7d54; }
.bs-gauge.is-over  { color: #b3261e; }
.bs-gauge.is-short .bs-gauge__num,
.bs-gauge.is-ok .bs-gauge__num,
.bs-gauge.is-over .bs-gauge__num { color: currentColor; font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
    .bs-gauge__bar > i { transition: none; }
}

/* Tarif de l'abonnement (écran Abonnements). */
.bs-price {
    display: inline-block; margin: 0.5rem 0 0;
    padding: 0.35rem 0.75rem; border-radius: 999px;
    background: var(--bs-cream, #f7f5f2); color: var(--bs-ink, #212842);
    font-size: 0.95rem;
}

/* Détail des notes par critère (écran Avis) : libellé au-dessus, note en
   dessous — même lecture que sur le site. */
.bs-criteria {
    list-style: none; margin: 0; padding: 0; flex: 1;
    display: flex; flex-wrap: wrap; gap: 0.5rem 2rem;
}
.bs-criterion { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 7rem; }
.bs-criterion__label { font-size: 0.82rem; color: var(--bs-muted, #7a7a86); line-height: 1.25; }
.bs-criterion__note { font-size: 1.15rem; font-weight: 600; color: var(--bs-ink, #212842); }

/* Éditeur visuel : destination d'un bouton / d'une carte.
   Repliée par défaut — une icône ✎ n'apparaît qu'au survol, pour ne pas
   encombrer l'aperçu avec un formulaire permanent. */
.bd-link { position: relative; display: inline-block; vertical-align: middle; }
.bd-link__btn {
    opacity: 0; transition: opacity 0.15s ease;
    width: 1.7rem; height: 1.7rem; margin-left: 0.35rem;
    border: 1px solid var(--bs-line, #e3e3e8); border-radius: 50%;
    background: #fff; color: #212842; cursor: pointer; font-size: 0.8rem; line-height: 1;
}
.bd-block:hover .bd-link__btn,
.bd-link__btn:focus-visible,
.bd-link:has(.bd-link__panel:not([hidden])) .bd-link__btn { opacity: 1; }
.bd-link__btn:hover { background: var(--bs-cream, #f7f5f2); }
.bd-link__panel {
    position: absolute; z-index: 40; top: calc(100% + 6px); left: 0;
    min-width: 270px; padding: 0.6rem;
    display: flex; flex-direction: column; gap: 0.4rem;
    background: #fff; border: 1px solid var(--bs-line, #e3e3e8); border-radius: 10px;
    box-shadow: 0 14px 34px rgba(33, 40, 66, 0.16);
    text-align: left;
}
.bd-link__panel[hidden] { display: none; }
.bd-link__lbl { font-size: 0.72rem; color: var(--bs-muted, #7a7a86); text-transform: uppercase; letter-spacing: 0.06em; }
.bd-link__select, .bd-link__input {
    font: inherit; font-size: 0.85rem; padding: 0.35rem 0.45rem;
    border: 1px solid var(--bs-line, #e3e3e8); border-radius: 6px; background: #fff; color: #212842;
}
.bd-link__done {
    align-self: flex-end; border: 0; background: var(--bs-navy, #212842); color: #fff;
    padding: 0.3rem 0.7rem; border-radius: 6px; font-size: 0.8rem; cursor: pointer;
}
/* Photo d'une carte dans l'éditeur : cadrée comme sur le site. */
.bd-block .card[data-item] { position: relative; }
.bd-block .card[data-item] .card__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.bd-itemimg:empty { display: none; }

.bd-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 1rem; }
.bd-photo { border: 1px solid var(--bs-line); border-radius: var(--bs-radius-sm); overflow: hidden; background: var(--bs-surface); display: flex; flex-direction: column; }
.bd-photo__thumb { position: relative; aspect-ratio: 4 / 3; background: var(--bs-cream); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.bd-photo__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bd-photo__empty { color: var(--bs-muted); font-size: 0.85rem; }
/* Icône d'import : posée sur l'image, révélée au survol. */
.bd-photo__edit {
    position: absolute; inset: 0; margin: auto; width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%; cursor: pointer;
    background: rgba(27, 32, 54, 0.72); color: #fff;
    opacity: 0; transition: opacity 0.15s, transform 0.15s; transform: scale(0.9);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.bd-photo__thumb:hover .bd-photo__edit, .bd-photo__edit:focus-visible { opacity: 1; transform: scale(1); }
.bd-photo__thumb:hover::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.18); }
.bd-photo__edit { z-index: 2; }
.bd-photo__title { margin: 0; padding: 0.7rem 0.8rem; font-size: 0.98rem; }
.bd-photo__results { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; max-height: 260px; overflow-y: auto; }
.bd-photo__opt { flex: 0 0 auto; width: 76px; height: 58px; border: 1px solid var(--bs-line); border-radius: 6px; padding: 0; overflow: hidden; cursor: pointer; background: none; }
.bd-photo__opt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bd-photo__opt:hover { border-color: var(--bs-rose-deep, #a35d56); }
.bd-photo__opt.is-loading { opacity: 0.5; pointer-events: none; }
.bd-photo__note { color: var(--bs-muted); font-size: 0.82rem; padding: 0.2rem 0; }

/* Modale d'illustration (importer OU rechercher). */
.bd-photomodal { border: 0; padding: 0; background: transparent; width: min(34rem, calc(100vw - 2rem)); border-radius: var(--bs-radius); }
.bd-photomodal::backdrop { background: rgba(21, 26, 43, 0.5); }
.bd-photomodal__box { position: relative; background: var(--bs-surface); border: 1px solid var(--bs-line); border-radius: var(--bs-radius); box-shadow: var(--bs-shadow-lg); padding: 1.5rem; }
.bd-photomodal__close { position: absolute; top: 0.6rem; right: 0.8rem; background: transparent; border: 0; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--bs-ink-soft); }
.bd-photomodal__title { margin: 0 0 1.1rem; font-size: 1.15rem; }
.bd-photomodal__section { padding: 0.9rem 0; border-top: 1px solid var(--bs-line); }
.bd-photomodal__section:first-of-type { border-top: 0; padding-top: 0; }
.bd-photomodal__lead { margin: 0 0 0.6rem; font-weight: 600; font-size: 0.95rem; }

/* --- Éditeur de texte riche (blocs « Texte ») ------------------------ */
.bs-editor { border: 1px solid var(--bs-line-strong); border-radius: var(--bs-radius-sm); overflow: hidden; background: var(--bs-surface); }
.bs-editor__toolbar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem;
    padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--bs-line);
    background: var(--bs-surface-alt);
}
.bs-editor__btn {
    border: 1px solid transparent; background: transparent; cursor: pointer;
    font: inherit; font-size: 0.82rem; line-height: 1; color: var(--bs-ink);
    padding: 0.35rem 0.55rem; border-radius: var(--bs-radius-xs);
}
.bs-editor__btn:hover { background: var(--bs-cream); }
.bs-editor__btn:disabled { opacity: 0.4; cursor: default; background: transparent; }
.bs-editor__sep { width: 1px; align-self: stretch; margin: 0.15rem 0.2rem; background: var(--bs-line); }
.bs-editor__visual {
    min-height: 12rem; padding: 0.9rem 1rem; border: 0; border-radius: 0;
    outline: none; overflow-y: auto;
}
.bs-editor__visual:focus { box-shadow: none; }
.bs-editor__visual h2 { font-size: 1.3rem; margin: 1rem 0 0.4rem; }
.bs-editor__visual h3 { font-size: 1.1rem; margin: 0.9rem 0 0.35rem; }
.bs-editor__visual p { margin: 0 0 0.7rem; }
.bs-editor__visual ul, .bs-editor__visual ol { margin: 0 0 0.7rem 1.3rem; }
.bs-editor__visual blockquote { margin: 0 0 0.7rem; padding-left: 0.9rem; border-left: 3px solid var(--bs-beige); color: var(--bs-ink-soft); }
.bs-editor__source { border: 0; border-radius: 0; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.85rem; }

/* --- Structure de l'application --------------------------------------- */
.bs-app { min-height: 100vh; display: flex; flex-direction: column; }

.bs-topbar {
    background: rgba(255,255,255,0.85);
    backdrop-filter: saturate(160%) blur(8px);
    -webkit-backdrop-filter: saturate(160%) blur(8px);
    border-bottom: 1px solid var(--bs-line);
    padding: 0.85rem var(--bs-gutter);
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 20;
}
.bs-topbar__user {
    display: flex; align-items: center; gap: 0.9rem;
    color: var(--bs-ink-soft); font-size: 0.875rem;
}

.bs-main {
    flex: 1;
    padding: 2.25rem var(--bs-gutter) 4rem;
    width: 100%;
}

/* --- Navigation secondaire -------------------------------------------- */
.bs-nav {
    background: var(--bs-surface);
    border-bottom: 1px solid var(--bs-line);
    position: sticky; top: 61px; z-index: 19;
}
.bs-nav__inner {
    padding: 0 var(--bs-gutter);
    display: flex; align-items: center; gap: 0.25rem;
    overflow-x: auto; scrollbar-width: none;
}
.bs-nav__inner::-webkit-scrollbar { display: none; }
.bs-nav__link {
    padding: 0.85rem 0.8rem;
    color: var(--bs-ink-soft);
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color 0.15s var(--bs-ease), border-color 0.15s var(--bs-ease);
}
.bs-nav__link:hover { color: var(--bs-ink); text-decoration: none; }
.bs-nav__link--active { color: var(--bs-ink); border-bottom-color: var(--bs-rose); }
.bs-nav__cta {
    margin-left: auto; color: var(--bs-rose-deep);
    font-weight: 500; font-size: 0.9rem; white-space: nowrap;
    padding-left: 1rem;
}

/* --- Badges ------------------------------------------------------------ */
.bs-badge {
    display: inline-block;
    padding: 0.16rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: var(--bs-cream);
    color: var(--bs-ink-soft);
    border: 1px solid var(--bs-line);
    vertical-align: middle;
}
/* Pastilles : 11px en capitales, donc soumises au seuil AA de 4.5:1.
   Les teintes de texte sont assombries en consequence. */
.bs-badge--published, .bs-badge--active { background: var(--bs-sage-soft); color: #435039; border-color: rgba(127,144,119,0.28); }
.bs-badge--draft, .bs-badge--invited    { background: #f2ead9; color: #6a5a3f; border-color: rgba(185,143,69,0.26); }
.bs-badge--generated                    { background: var(--bs-rose-soft); color: #7b4c48; border-color: rgba(228,181,177,0.55); }
.bs-badge--importing                    { background: #e5e8ef; color: #4e5773; border-color: rgba(78,87,115,0.20); }
.bs-badge--suspended                    { background: #f4dcd9; color: #8f3c36; border-color: rgba(168,73,66,0.26); }

/* --- Utilitaires -------------------------------------------------------- */
.bs-muted { color: var(--bs-ink-soft); }
.bs-mt-1 { margin-top: 0.6rem; }
.bs-mt-2 { margin-top: 1.25rem; }
.bs-text-center { text-align: center; }
.bs-flex-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

/* --- Etat vide ---------------------------------------------------------- */
.bs-empty {
    text-align: center;
    padding: 3.25rem 1.25rem;
    color: var(--bs-ink-soft);
    border: 1px dashed var(--bs-beige);
    border-radius: var(--bs-radius);
    background: var(--bs-surface-alt);
}
.bs-empty p:first-child { margin-top: 0; }

/* --- Cartes statistiques ------------------------------------------------ */
.bs-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; }
.bs-stat {
    background: var(--bs-surface);
    border-radius: var(--bs-radius);
    box-shadow: var(--bs-shadow-sm);
    border: 1px solid var(--bs-line);
    padding: 1.15rem 1.25rem;
    display: flex; flex-direction: column; gap: 0.2rem;
}
.bs-stat--soft { background: var(--bs-cream); box-shadow: none; }

/* Variantes COLORÉES (tuiles du tableau de bord) : barre d'accent en haut,
   fond très légèrement teinté, et valeur dans la couleur d'accent. La valeur
   est grande (≥ 24px) donc le seuil AA « grand texte » (3:1) s'applique. */
.bs-stat--brand, .bs-stat--live, .bs-stat--draft, .bs-stat--rose {
    border-top: 3px solid var(--stat-accent);
    background: linear-gradient(180deg, var(--stat-tint), var(--bs-surface) 60%);
}
.bs-stat--brand .bs-stat__value,
.bs-stat--live  .bs-stat__value,
.bs-stat--draft .bs-stat__value,
.bs-stat--rose  .bs-stat__value { color: var(--stat-accent); }
.bs-stat--brand { --stat-accent: var(--bs-navy);      --stat-tint: rgba(33, 40, 66, 0.06); }
.bs-stat--live  { --stat-accent: var(--bs-success);   --stat-tint: rgba(93, 115, 82, 0.12); }
.bs-stat--draft { --stat-accent: var(--bs-warning);   --stat-tint: rgba(168, 127, 56, 0.12); }
.bs-stat--rose  { --stat-accent: var(--bs-rose-deep); --stat-tint: rgba(163, 93, 86, 0.10); }

.bs-stat__value {
    font-family: var(--bs-font-heading);
    font-size: 2.1rem; font-weight: 500;
    color: var(--bs-ink); line-height: 1;
    font-variant-numeric: lining-nums tabular-nums;
}
.bs-stat__label { font-size: 0.8125rem; color: var(--bs-ink-soft); }

/* --- En-tete d'ecran de projet -------------------------------------------
   Un seul gabarit pour tous les ecrans : titre a gauche, action courante et
   menu « Actions » a droite. Chaque ecran portait avant ses propres boutons de
   navigation, differents d'une page a l'autre.
   -------------------------------------------------------------------------- */
.bs-pagehead {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
}
.bs-pagehead__text { min-width: 0; }
.bs-pagehead__project {
    margin: 0; font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--bs-ink-soft);
}
.bs-pagehead h1 { font-size: 1.8rem; margin: 0.25rem 0 0; }
.bs-pagehead__sub { margin: 0.3rem 0 0; }
.bs-pagehead__tools { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* --- Menu deroulant ------------------------------------------------------
   `details/summary` plutot qu'un composant JavaScript : le deroulement est
   natif, donc il fonctionne meme si le script ne charge pas. Le script ne sert
   qu'a refermer au clic exterieur et a la touche Echap.
   -------------------------------------------------------------------------- */
.bs-menu { position: relative; }
.bs-menu > summary {
    list-style: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 0.4rem;
}
.bs-menu > summary::-webkit-details-marker { display: none; }
.bs-menu__chev { transition: transform 0.18s var(--bs-ease); }
.bs-menu[open] .bs-menu__chev { transform: rotate(180deg); }
.bs-menu__panel {
    position: absolute; top: calc(100% + 0.4rem); right: 0; z-index: 40;
    min-width: 15rem;
    display: flex; flex-direction: column;
    padding: 0.35rem;
    background: var(--bs-surface);
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-radius);
    box-shadow: var(--bs-shadow-lg);
}
.bs-menu__item {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.5rem 0.65rem;
    border-radius: var(--bs-radius-xs);
    font-size: 0.9rem;
    color: var(--bs-ink);
    text-decoration: none;
    white-space: nowrap;
}
.bs-menu__item:hover { background: var(--bs-cream); text-decoration: none; color: var(--bs-navy); }
.bs-menu__item.is-current { color: var(--bs-rose-deep); font-weight: 500; }
.bs-menu__item--danger { color: var(--bs-danger); }
.bs-menu__item--danger:hover { background: rgba(155,64,58,0.07); color: var(--bs-danger); }
.bs-menu__sep { height: 1px; background: var(--bs-line); margin: 0.35rem 0.3rem; }

/* --- Liste des articles (blog) : poignée + vignette + infos ----------------- */
.bs-node.bd-post { padding: 0.7rem 0.9rem; }
.bd-post { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; }
.bd-post > .bs-grip { flex: none; }
.bd-post__thumb {
    width: 68px; height: 50px; flex: none; object-fit: cover;
    border: 1px solid var(--bs-line); border-radius: 6px;
}
.bd-post__thumb--empty {
    display: flex; align-items: center; justify-content: center;
    background: var(--bs-cream); border-style: dashed; color: var(--bs-muted); font-size: 1.1rem;
}
.bd-post__info { flex: 1 1 200px; min-width: 0; }
.bd-post__title { display: block; font-size: 1rem; line-height: 1.3; color: var(--bs-ink); }
.bd-post__meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.2rem; }
.bd-post__actions { display: flex; gap: 0.3rem; align-items: center; flex-wrap: wrap; flex: none; }

/* --- Écran Modèles : grille de cartes ------------------------------------- */
.bs-templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.2rem; }
.bs-template { display: flex; flex-direction: column; background: var(--bs-surface); border: 1px solid var(--bs-line); border-radius: var(--bs-radius); overflow: hidden; }
.bs-template.is-current { border-color: var(--bs-rose-deep, #a35d56); box-shadow: inset 0 0 0 2px var(--bs-rose, #d9b3ae); }
.bs-template__shot { position: relative; aspect-ratio: 16 / 10; background: var(--bs-cream); }
.bs-template__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bs-template__swatch { display: block; width: 100%; height: 100%; }
.bs-template__tag { position: absolute; top: 0.5rem; left: 0.5rem; background: rgba(21,26,43,.72); color: #fff; font-size: 0.72rem; padding: 0.2rem 0.5rem; border-radius: 6px; }
.bs-template__body { flex: 1; display: flex; flex-direction: column; gap: 0.4rem; padding: 0.9rem 1rem 1rem; }
.bs-template__head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.bs-template__name { font-size: 1.1rem; margin: 0; }
.bs-template__desc { color: var(--bs-muted); font-size: 0.9rem; margin: 0; }
.bs-template__actions { margin-top: auto; display: flex; gap: 0.4rem; flex-wrap: wrap; padding-top: 0.5rem; }

/* --- Idées d'articles (blog) : titre en évidence, angle à la ligne ----------
   .bs-node.bd-idea (et non .bd-idea seul) car `.bs-node { padding:0 }`, défini
   plus loin dans ce fichier, l'emporterait sinon à spécificité égale. */
.bs-node.bd-idea { padding: 0.9rem 1.1rem; }
.bd-idea__head { display: flex; justify-content: space-between; gap: 1rem 1.5rem; align-items: flex-start; flex-wrap: wrap; }
.bd-idea__text { flex: 1 1 260px; min-width: 0; }
.bd-idea__title { display: block; font-size: 1.05rem; line-height: 1.3; color: var(--bs-ink); }
.bd-idea__angle { display: block; color: var(--bs-muted); font-size: 0.9rem; margin-top: 0.2rem; }
.bd-idea__actions { display: flex; gap: 0.4rem; align-items: flex-start; flex-wrap: wrap; flex: none; }
.bd-idea__formbtns { display: flex; gap: 0.4rem; align-items: center; }

/* Édition EN PLACE : la vue s'efface, le formulaire occupe la même colonne. */
.bd-idea__form { display: none; }
.bd-idea__toggle:checked ~ .bd-idea__head .bd-idea__view { display: none; }
.bd-idea__toggle:checked ~ .bd-idea__head .bd-idea__form { display: flex; flex-direction: column; gap: 0.5rem; }
.bd-idea__toggle:checked ~ .bd-idea__head .bd-idea__modif { display: none; }

/* --- Éditeur de lien à onglets (formulaires classiques) -------------------- */
.bs-linkfield { display: flex; flex-direction: column; gap: 0.5rem; }
.bs-linkfield__tabs { display: flex; gap: 0.25rem; width: max-content; background: var(--bs-cream); padding: 0.25rem; border-radius: 9px; }
.bs-linkfield__tab {
    border: 0; background: transparent; cursor: pointer; font: inherit;
    font-size: 0.85rem; font-weight: 500; color: var(--bs-muted); padding: 0.35rem 0.75rem; border-radius: 7px;
}
.bs-linkfield__tab.is-active { background: var(--bs-surface); color: var(--bs-navy); box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.bs-linkfield__pane[hidden] { display: none; }
.bs-linkfield__check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
.bs-linkfield__check input { width: auto; margin: 0; }

/* --- Espace de travail d'un projet : barre latérale gauche + contenu ---------
   La navigation entre écrans du projet est calée à gauche et suit le défilement
   (sticky), présente sur tous les écrans de gestion. */
.bs-worksite {
    display: flex; gap: 1.5rem; align-items: flex-start;
    width: 100%;
    padding: 2.25rem var(--bs-gutter) 4rem;
}
.bs-main--proj { flex: 1; min-width: 0; max-width: none; margin: 0; padding: 0; }

.bs-projnav {
    flex: none; width: 220px; align-self: flex-start;
    position: sticky; top: 7rem;
    background: var(--bs-surface); border: 1px solid var(--bs-line);
    border-radius: 12px; padding: 0.6rem;
}
.bs-projnav__name {
    margin: 0.2rem 0.4rem 0.6rem; font-size: 0.78rem; font-weight: 600;
    color: var(--bs-navy); text-transform: uppercase; letter-spacing: 0.06em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bs-projnav__list { display: flex; flex-direction: column; gap: 2px; }
.bs-projnav__item {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.55rem 0.6rem; border-radius: 9px;
    font-size: 0.9rem; color: var(--bs-ink); text-decoration: none; line-height: 1.2;
}
.bs-projnav__item .bs-ico { flex: none; }
.bs-projnav__item:hover { background: var(--bs-cream); color: var(--bs-navy); text-decoration: none; }
.bs-projnav__item.is-active { background: var(--bs-navy); color: #fff; font-weight: 500; }
.bs-projnav__foot {
    margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--bs-line);
    display: flex; flex-direction: column; gap: 2px;
}
.bs-projnav__item--muted { color: var(--bs-muted); font-size: 0.85rem; }

/* Sous 900px : la barre repasse en bandeau horizontal au-dessus du contenu. */
@media (max-width: 900px) {
    .bs-worksite { flex-direction: column; gap: 1rem; }
    .bs-projnav { position: static; top: auto; width: 100%; }
    .bs-projnav__list { flex-direction: row; flex-wrap: wrap; }
    .bs-projnav__foot { flex-direction: row; }
}

/* --- Barre de filtres ----------------------------------------------------
   Les listes deroulantes se dimensionnent sur leur contenu. Avec une base
   figee (`flex: 0 1 200px`) et `width:100%` herite de `.bs-select`,
   « Toutes les plateformes » etait tronque.
   -------------------------------------------------------------------------- */
.bs-filters { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.bs-filters .bs-input { flex: 1 1 220px; min-width: 0; }
.bs-filters .bs-select {
    flex: 0 0 auto;
    width: auto;
    /* Reserve la place de la fleche du selecteur, qui se superpose sinon au
       dernier caractere de l'option la plus longue. */
    padding-right: 2.4rem;
}

/* --- Liste de projets -----------------------------------------------------
   Une ligne pleine largeur par projet. En grille de cartes, onze boutons
   identiques s'empilaient sur quatre rangs dans 288px : illisible, et sans
   aucune hierarchie entre « Supprimer » et « Aperçu ».
   -------------------------------------------------------------------------- */
.bs-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
.bs-project {
    background: var(--bs-surface);
    border-radius: var(--bs-radius);
    box-shadow: var(--bs-shadow-sm);
    border: 1px solid var(--bs-line);
    /* Trois bandes empilees : identite, edition, actions. Les actions restent
       TOUJOURS sous les liens d'edition — cote a cote, leur ordre changeait
       d'un projet a l'autre selon le nombre de liens, et l'oeil ne trouvait
       plus « Publier » au meme endroit d'une ligne a la suivante. */
    display: flex;
    flex-direction: row;
    align-items: stretch;
    overflow: hidden;
    transition: box-shadow 0.2s var(--bs-ease), border-color 0.2s var(--bs-ease);
}
.bs-project:hover { box-shadow: var(--bs-shadow); border-color: var(--bs-line-strong); }

/* Corps de la carte : reprend l'empilement identite / edition / actions. */
.bs-project__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Aperçu de la page d'accueil : le VRAI site public rendu dans une iframe, mise
   à l'échelle en vignette carrée (viewport logique 1300×1300 réduit à 250/1300
   ≈ 0.1923). L'iframe est inerte (pointer-events:none, lazy) — c'est le lien
   parent qui ouvre le site. */
.bs-project__thumb {
    position: relative; flex-shrink: 0; display: block;
    width: 250px; height: 250px; overflow: hidden;
    background: var(--bs-cream); border-right: 1px solid var(--bs-line);
    text-decoration: none;
}
.bs-project__thumb iframe {
    position: absolute; top: 0; left: 0; border: 0;
    width: 1300px; height: 1300px;
    transform: scale(0.1923); transform-origin: top left;
    pointer-events: none;
}
.bs-project__thumb-hint {
    position: absolute; right: 0.4rem; bottom: 0.4rem; z-index: 2;
    background: rgba(33, 40, 66, 0.85); color: #fff;
    font-size: 0.68rem; padding: 0.15rem 0.5rem; border-radius: 6px;
    opacity: 0; transition: opacity 0.2s var(--bs-ease);
}
.bs-project__thumb:hover .bs-project__thumb-hint { opacity: 1; }
.bs-project__thumb--empty {
    display: flex; align-items: center; justify-content: center; text-align: center;
    color: var(--bs-muted); font-size: 0.76rem; padding: 0.6rem; line-height: 1.35;
}

.bs-project__id { min-width: 0; padding: 1.05rem 1.35rem 0.85rem; }
.bs-project__meta {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.78rem; color: var(--bs-ink-soft);
}
.bs-project h3 {
    font-size: 1.2rem; margin: 0.45rem 0 0;
    overflow-wrap: anywhere;
}
.bs-project__owner { font-size: 0.85rem; color: var(--bs-ink-soft); margin: 0.1rem 0 0; }

/* Bande « modifier » : des destinations, pas des actions. Les habiller en
   boutons les mettait au meme rang que « Publier » ou « Supprimer ». Fond
   legerement teinte et filets : la zone se lit d'un coup d'oeil. */
.bs-project__edit {
    display: flex; flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem 0.35rem;
    min-width: 0;
    padding: 0.5rem 1.35rem;
    background: var(--bs-surface-alt);
    border-top: 1px solid var(--bs-line);
    border-bottom: 1px solid var(--bs-line);
}
.bs-project__edit a {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.86rem;
    color: var(--bs-ink-soft);
    text-decoration: none;
    padding: 0.35rem 0.6rem;
    border-radius: var(--bs-radius-xs);
    white-space: nowrap;
    transition: background 0.15s var(--bs-ease), color 0.15s var(--bs-ease);
}
.bs-project__edit a:hover { color: var(--bs-navy); background: var(--bs-cream); }
/* Pastille en tete de bande : nomme la zone sans l'alourdir. */
.bs-project__edit-label {
    font-size: 0.68rem; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
    /* Discret par la taille et la graisse, pas par un gris pale : en capitales
       de 11px, --bs-muted tombe a 3.11:1 sur l'aplat de la bande. */
    color: var(--bs-ink-soft);
    margin-right: 0.4rem;
}

/* Icones dessinees au trait : aucune police d'icones a charger, elles heritent
   de la couleur du lien. */
.bs-ico { width: 15px; height: 15px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; }

.bs-project__do {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.75rem 1.35rem 0.85rem;
}
/* La suppression est repoussee au bout de la bande, apres un separateur : on ne
   la clique pas par reflexe en visant le bouton d'a cote. */
.bs-project__delete {
    margin-left: auto;
    font-size: 0.8rem;
    /* Discret par la taille et l'absence de cadre, pas par un gris pale :
       --bs-muted tombe a 3.21:1, insuffisant pour une commande. */
    color: var(--bs-ink-soft);
    text-decoration: none;
    padding-left: 0.85rem;
    border-left: 1px solid var(--bs-line);
    white-space: nowrap;
}
.bs-project__delete:hover { color: var(--bs-danger); }

/* --- Tableaux ------------------------------------------------------------ */
.bs-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.bs-table th, .bs-table td { padding: 0.8rem 1rem; text-align: left; }
.bs-table thead th {
    background: var(--bs-cream);
    color: var(--bs-ink-soft);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}
.bs-table thead th:first-child { border-top-left-radius: var(--bs-radius-sm); }
.bs-table thead th:last-child  { border-top-right-radius: var(--bs-radius-sm); }
.bs-table tbody tr { border-top: 1px solid var(--bs-line); }
.bs-table tbody tr:hover { background: var(--bs-surface-alt); }

/* --- Grille de formulaire ------------------------------------------------ */
.bs-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }

code {
    background: var(--bs-cream);
    padding: 0.1rem 0.38rem;
    border-radius: var(--bs-radius-xs);
    font-size: 0.85em;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    color: var(--bs-ink);
}
kbd {
    display: inline-block;
    background: var(--bs-surface);
    border: 1px solid var(--bs-beige);
    border-bottom-width: 2px;
    border-radius: var(--bs-radius-xs);
    padding: 0.05rem 0.38rem;
    font-size: 0.8em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--bs-ink);
}

/* --- Assistant : indicateur d'etapes ------------------------------------- */
.bs-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem; padding: 0; margin: 1.25rem 0 0; }
.bs-step {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.35rem 0.9rem 0.35rem 0.35rem;
    border-radius: 999px;
    background: var(--bs-surface);
    border: 1px solid var(--bs-line);
    font-size: 0.84rem;
    transition: border-color 0.15s var(--bs-ease);
}
.bs-step__num {
    width: 23px; height: 23px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 600;
    background: var(--bs-cream); color: var(--bs-ink-soft);
    flex: none;
}
.bs-step--current { border-color: var(--bs-rose); box-shadow: 0 0 0 3px var(--bs-rose-soft); }
/* Rose de marque + bleu nuit : 7.98:1. Le blanc y serait illisible (1.82:1). */
.bs-step--current .bs-step__num { background: var(--bs-rose); color: var(--bs-navy); }
.bs-step--current .bs-step__label { color: var(--bs-ink); font-weight: 500; }
.bs-step--done .bs-step__num { background: var(--bs-sage); color: #fff; }
.bs-step--todo { opacity: 0.6; }
.bs-step__label { color: var(--bs-ink-soft); }

/* --- Indicateurs de progression ------------------------------------------ */
.bs-spinner {
    width: 44px; height: 44px; border-radius: 50%; margin: 0 auto;
    border: 3px solid var(--bs-beige);
    border-top-color: var(--bs-rose);
    animation: bs-spin 0.85s linear infinite;
}
@keyframes bs-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .bs-spinner { animation-duration: 2.5s; }
    * { scroll-behavior: auto !important; }
}
.bs-check {
    width: 54px; height: 54px; border-radius: 50%; margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: var(--bs-sage-soft); color: #435039;
    font-size: 1.7rem; font-weight: 600;
    box-shadow: 0 0 0 6px rgba(127,144,119,0.10);
}

/* --- Arbre du catalogue (apercu) ------------------------------------------ */
.bs-tree { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.bs-tree__cat {
    background: var(--bs-surface); border-radius: var(--bs-radius);
    border: 1px solid var(--bs-line); box-shadow: var(--bs-shadow-sm);
    padding: 1.25rem 1.35rem;
}
.bs-tree__cat-title {
    font-size: 1.2rem; margin: 0 0 0.6rem;
    padding-bottom: 0.55rem; border-bottom: 1px solid var(--bs-line);
}
.bs-tree__theme { margin-top: 0.85rem; }
.bs-tree__theme-title { font-weight: 600; font-size: 0.875rem; color: var(--bs-ink-soft); }
.bs-tree__services { list-style: none; padding: 0; margin: 0.3rem 0 0; }
.bs-tree__services li {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: 0.35rem 0; font-size: 0.9rem;
    border-top: 1px solid var(--bs-line);
}

/* --- Editeur de structure --------------------------------------------------
   Arborescence en accordeons : categories ouvertes, thematiques repliees. A
   l'import une fiche compte parfois vingt thematiques et deux cents
   prestations — tout derouler rendait la page inutilisable des le premier
   ecran.
   ---------------------------------------------------------------------------- */
.bs-tree { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.5rem; }

.bs-node {
    background: var(--bs-surface);
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-radius);
    box-shadow: var(--bs-shadow-sm);
    padding: 0;
}
.bs-node--theme { background: var(--bs-surface-alt); margin-top: 0.6rem; box-shadow: none; }
.bs-node--hidden { opacity: 0.55; }

.bs-node__head {
    display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap;
    padding: 0.9rem 1.15rem;
    cursor: pointer;
    list-style: none;
    border-radius: var(--bs-radius);
}
.bs-node__head::-webkit-details-marker { display: none; }
.bs-node__head:hover { background: var(--bs-surface-alt); }
.bs-node--theme > .bs-node__head:hover { background: var(--bs-cream); }
.bs-node[open] > .bs-node__head { border-radius: var(--bs-radius) var(--bs-radius) 0 0; }

/* Chevron d'accordeon, dessine au trait. */
.bs-node__chev {
    width: 9px; height: 9px; flex: none;
    border-right: 1.8px solid var(--bs-ink-soft);
    border-bottom: 1.8px solid var(--bs-ink-soft);
    transform: rotate(-45deg);
    transition: transform 0.2s var(--bs-ease);
}
.bs-node[open] > .bs-node__head .bs-node__chev { transform: rotate(45deg); }

.bs-node__title { font-size: 1.2rem; margin: 0; display: flex; align-items: center; gap: 0.5rem; }
.bs-node__title--theme {
    font-size: 1rem; font-family: var(--bs-font-body);
    font-weight: 600; color: var(--bs-ink-soft);
}
/* Compteur : pousse les actions a droite et resume ce qui est replie. C'est la
   SEULE information visible d'une thematique fermee — elle doit donc etre
   lisible, pas decorative (--bs-muted tombe a 3.11:1). */
.bs-node__count {
    margin-right: auto;
    font-size: 0.8rem; color: var(--bs-ink-soft);
    white-space: nowrap;
}
.bs-node__actions { display: flex; gap: 0.3rem; align-items: center; flex-wrap: wrap; }
.bs-node__body { padding: 0 1.15rem 1rem; }

/* --- Poignee de glisser-deposer --------------------------------------------
   Six points : la convention universelle du « saisissable ». L'element n'est
   rendu glissable qu'au contact de la poignee, sinon tout clic sur un titre ou
   un bouton amorcait un glisser.
   ---------------------------------------------------------------------------- */
.bs-grip {
    width: 16px; height: 20px; flex: none;
    cursor: grab;
    /* Indispensable au tactile : sans cela, le premier mouvement du doigt fait
       defiler la page au lieu de saisir l'element. */
    touch-action: none;
    border-radius: 3px;
    background-image: radial-gradient(currentColor 1.4px, transparent 1.5px);
    background-size: 6px 6px;
    background-position: 1px 3px;
    background-repeat: repeat;
    color: var(--bs-muted);
}
.bs-grip:hover, .bs-grip:focus-visible { color: var(--bs-navy); }
.bs-grip:active { cursor: grabbing; }
.bs-grip--inline { display: inline-block; vertical-align: -0.35em; height: 14px; }

/* --- Pendant le reordonnancement ------------------------------------------
   Le module de glisser n'ecrit PAS dans le DOM tant qu'on n'a pas lache : il
   ne fait que translater les elements. Les voisins s'ecartent et laissent un
   ESPACE VIDE a l'endroit ou l'element atterrira — c'est cet espace qui rend
   le geste lisible, bien plus qu'un trait d'insertion.
   ---------------------------------------------------------------------------- */
[data-sortable].is-reordering { position: relative; }
/* Pendant le geste, rien d'autre ne doit reagir au survol. */
[data-sortable].is-reordering .bs-node__head:hover { background: transparent; }

/* L'element saisi reste parfaitement LISIBLE : c'est l'espace ouvert sous lui
   qui renseigne, pas son effacement. Une opacite a 0.4 rendait le libelle
   illisible au moment precis ou l'on cherche a le situer. */
.bs-node.is-dragging, .bs-svc.is-dragging {
    opacity: 0.97;
    background: var(--bs-surface);
    border-radius: var(--bs-radius-sm);
    box-shadow: 0 10px 26px -8px rgba(33, 40, 66, 0.32);
    cursor: grabbing;
    /* Aucune transition sur l'element saisi : il doit coller au pointeur. */
    transition: none !important;
    position: relative;
}
.bs-node.is-dragging { border-color: var(--bs-rose); }
.bs-svc.is-dragging { outline: 1px solid var(--bs-rose); }

/* Curseur coherent sur toute la page le temps du geste, meme hors de la liste. */
body.bs-en-glissement { cursor: grabbing; user-select: none; }

[data-sortable].is-saving { opacity: 0.6; pointer-events: none; }

/* ── Toasts ────────────────────────────────────────────────────────────
   Notifications fixes en haut de page. Elles flottent au-dessus du contenu
   (position: fixed) : rien n'est poussé, donc aucun décalage de hauteur —
   c'est ce qui reglait le saut apres un glisser-deposer. Un seul et meme
   composant sert les messages flash du serveur (masquer, supprimer, publier…)
   ET les alertes JavaScript du reordonnancement. */
.bs-toasts {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    width: max-content;
    max-width: min(32rem, calc(100vw - 2rem));
    pointer-events: none;
}
.bs-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    padding: 0.8rem 0.9rem 0.8rem 1rem;
    border-radius: var(--bs-radius-sm, 10px);
    border: 1px solid var(--bs-line);
    border-left: 3px solid var(--bs-navy);
    background: var(--bs-surface, #fff);
    box-shadow: var(--bs-shadow-lg, 0 12px 32px rgba(33, 40, 66, 0.18));
    font-size: 0.92rem;
    line-height: 1.4;
    color: var(--bs-ink, #212842);
    animation: bs-toast-in 260ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.bs-toast--error   { background: #fdf4f3; color: var(--bs-danger); border-color: rgba(168, 73, 66, 0.20); border-left-color: var(--bs-danger); }
.bs-toast--success { background: #f4f7f2; color: #52654a;          border-color: rgba(97, 120, 86, 0.20); border-left-color: var(--bs-success); }
.bs-toast__msg  { flex: 1; }
.bs-toast__close {
    flex: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 1.15rem;
    line-height: 1;
    color: inherit;
    opacity: 0.55;
    padding: 0.1rem 0.15rem;
    margin: -0.15rem -0.1rem 0 0;
}
.bs-toast__close:hover { opacity: 1; }
.bs-toast.is-leaving { animation: bs-toast-out 200ms ease forwards; }
@keyframes bs-toast-in  { from { opacity: 0; transform: translateY(-0.6rem); } to { opacity: 1; transform: none; } }
@keyframes bs-toast-out { to   { opacity: 0; transform: translateY(-0.6rem); } }

/* ── Modale de confirmation ────────────────────────────────────────────
   Remplace window.confirm() : meme role (bloquer jusqu'a une reponse) mais
   habillee a la charte. <dialog> natif : focus piege et Echap geres par le
   navigateur, aucune bibliotheque. */
.bs-modal {
    border: 0;
    padding: 0;
    background: transparent;
    width: min(28rem, calc(100vw - 2rem));
    color: var(--bs-ink);
}
.bs-modal::backdrop { background: rgba(21, 26, 43, 0.5); }
.bs-modal__box {
    background: var(--bs-surface, #fff);
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-radius, 14px);
    box-shadow: var(--bs-shadow-lg, 0 24px 60px rgba(21, 26, 43, 0.3));
    padding: 1.6rem 1.6rem 1.3rem;
}
.bs-modal__title { margin: 0 0 0.5rem; font-size: 1.2rem; line-height: 1.2; }
.bs-modal__msg   { margin: 0 0 1.4rem; color: var(--bs-ink-soft, #5b6079); font-size: 0.95rem; line-height: 1.45; }
.bs-modal__actions { display: flex; justify-content: flex-end; gap: 0.6rem; }
.bs-modal[open]           { animation: bs-modal-in 200ms ease; }
.bs-modal[open]::backdrop { animation: bs-backdrop-in 200ms ease; }
@keyframes bs-modal-in    { from { opacity: 0; transform: translateY(0.5rem) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes bs-backdrop-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .bs-toast, .bs-toast.is-leaving,
    .bs-modal[open], .bs-modal[open]::backdrop { animation: none; }
}

/* Les fleches ↑ ↓ ne disparaissent QUE si le glisser-deposer est arme : sans
   JavaScript elles restent le seul moyen de reordonner. */
.has-dnd .bs-nojs-move { display: none; }

.bs-svc-list { list-style: none; padding: 0; margin: 0.6rem 0 0; }
/* Zone de dépôt visible même quand la catégorie est vide (glisser une prestation
   depuis une autre catégorie). */
.bs-svc-list:empty {
    min-height: 2.2rem; border: 1px dashed var(--bs-line); border-radius: var(--bs-radius-sm);
    margin-bottom: 0.4rem;
}
/* Catégorie ciblée par un glisser inter-catégories : mise en évidence. */
.bs-node--cat.bs-drop-cible {
    outline: 2px dashed var(--bs-rose, #c98b86); outline-offset: 3px;
    background: color-mix(in srgb, var(--bs-rose, #c98b86) 8%, transparent);
    border-radius: var(--bs-radius-sm);
}
.bs-svc {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.5rem 0; border-top: 1px solid var(--bs-line); flex-wrap: wrap;
}
.bs-svc__info { flex: 1; min-width: 0; }
.bs-svc__name { font-weight: 500; }
.bs-svc__meta { font-size: 0.85rem; color: var(--bs-ink-soft); }

.bs-inline-add { display: flex; gap: 0.5rem; margin-top: 0.7rem; }
.bs-node__body > .bs-inline-add { margin-top: 0.9rem; }

/* Repli discret pour reintroduire le niveau thematique quand il a ete masque. */
.bs-souslevel { margin-top: 1rem; }
.bs-souslevel > summary {
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--bs-ink-soft);
    list-style: none;
}
.bs-souslevel > summary::-webkit-details-marker { display: none; }
.bs-souslevel > summary::before { content: "+ "; }
.bs-souslevel > summary:hover { color: var(--bs-navy); }
.bs-souslevel[open] > summary::before { content: "− "; }
.bs-inline-add .bs-input { flex: 1; }

/* --- Personnalisation graphique --------------------------------------------- */
/* --- Studio de charte -------------------------------------------------------
   Reglages a gauche, vrai site a droite. La colonne d'apercu est collante :
   on modifie une couleur en bas du panneau sans perdre des yeux ce qu'elle
   change.
   ---------------------------------------------------------------------------- */
.bs-studio {
    display: grid;
    grid-template-columns: minmax(320px, 400px) 1fr;
    gap: 1.25rem;
    align-items: start;
}
.bs-studio__panel { min-width: 0; }
.bs-studio__preview {
    position: sticky;
    top: calc(57px + 46px + 1rem);   /* barre + navigation + respiration */
    min-width: 0;
}
.bs-studio__bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; margin-bottom: 0.6rem; flex-wrap: wrap;
}
.bs-studio__stage {
    background: var(--bs-surface-alt);
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-radius);
    padding: 0.75rem;
    box-shadow: var(--bs-shadow-sm);
    display: flex; justify-content: center; align-items: flex-start;
    overflow: hidden;
    transition: opacity 0.2s var(--bs-ease);
}
.bs-studio.is-loading .bs-studio__stage { opacity: 0.45; }
/* L'iframe est rendue à la vraie largeur du device puis réduite par
   `transform: scale()` (design.js) — fiable partout, iOS Safari compris. Le
   conteneur `screen` porte la taille RÉDUITE (sa boîte de layout), l'iframe est
   scalée depuis son coin haut-gauche à l'intérieur. */
.bs-studio__screen {
    overflow: hidden;
    border-radius: var(--bs-radius-sm);
    background: #fff;
    box-shadow: var(--bs-shadow-sm);
    flex: none;
}
.bs-studio__frame {
    display: block;
    border: 0;
    background: #fff;
    /* width / height / transform posés par design.js */
}
.bs-studio__stage--empty { display: block; }

/* --- Choix du theme ----------------------------------------------------------
   La selection etait rendue par une classe posee cote serveur : cliquer ne
   changeait donc rien tant qu'on n'avait pas soumis. `:has(:checked)` fait
   reagir la carte immediatement.
   ---------------------------------------------------------------------------- */
.bs-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.7rem; }
.bs-theme {
    display: block; cursor: pointer; position: relative;
    background: var(--bs-surface);
    border: 1.5px solid var(--bs-line);
    border-radius: var(--bs-radius);
    padding: 0.65rem; text-align: center;
    transition: border-color 0.15s var(--bs-ease), box-shadow 0.15s var(--bs-ease);
}
.bs-theme:hover { border-color: var(--bs-taupe); }
.bs-theme__input { position: absolute; opacity: 0; pointer-events: none; }
.bs-theme:has(.bs-theme__input:checked) {
    border-color: var(--bs-rose);
    box-shadow: 0 0 0 3px var(--bs-rose-soft);
}
/* Pastille « Actif » : n'apparaît que sur le modèle sélectionné (rendu clair du
   modèle en place, en plus du liseré rosé). Poussée à droite de la ligne. */
.bs-theme__badge {
    display: none; flex: none; margin-left: auto;
    background: var(--bs-rose-deep); color: #fff;
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 0.15rem 0.5rem; border-radius: 999px; white-space: nowrap;
}
.bs-theme:has(.bs-theme__input:checked) .bs-theme__badge { display: inline-block; }
/* Repli pour les moteurs sans :has() — le contour de focus reste le signal. */
.bs-theme__input:focus-visible + .bs-theme__shot { outline: 2px solid var(--bs-rose-deep); outline-offset: 2px; }
.bs-theme__shot {
    display: block; height: 84px; margin-bottom: 0.5rem;
    border-radius: var(--bs-radius-sm); overflow: hidden;
    background: var(--bs-cream);
}
.bs-theme__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bs-theme__swatch { display: block; width: 100%; height: 100%; }
.bs-theme__name { display: block; font-weight: 600; font-size: 0.88rem; }
.bs-theme__desc { display: block; font-size: 0.76rem; margin-top: 0.15rem; color: var(--bs-ink-soft); line-height: 1.4; }

/* Variante LISTE : un thème par ligne, pastille réduite, texte à droite.
   La grille en colonnes rendait les cartes hautes et le nom illisible. */
.bs-themes--list { display: flex; flex-direction: column; gap: 0.5rem; }
.bs-themes--list .bs-theme {
    display: flex; align-items: center; gap: 0.75rem;
    text-align: left; padding: 0.5rem 0.65rem;
}
.bs-themes--list .bs-theme__shot {
    flex: none; width: 52px; height: 34px; margin-bottom: 0;
}
.bs-themes--list .bs-theme__texte { min-width: 0; }
.bs-themes--list .bs-theme__desc {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Variante GALERIE : grande vignette d'aperçu + titre seul (pas de descriptif).
   La vignette (maquette SVG du modèle) prime ; le titre suffit à l'identifier. */
.bs-themes--gallery { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.9rem; }
.bs-themes--gallery .bs-theme { display: block; text-align: center; padding: 0.55rem; }
.bs-themes--gallery .bs-theme__shot {
    height: auto; aspect-ratio: 16 / 10; margin-bottom: 0.55rem;
    border: 1px solid var(--bs-line);
}
.bs-themes--gallery .bs-theme__shot svg,
.bs-themes--gallery .bs-theme__shot img { width: 100%; height: 100%; display: block; object-fit: cover; }
.bs-themes--gallery .bs-theme__name { font-size: 0.95rem; }
/* Pastille « Actif » en surimpression sur la vignette (le flux gallery n'est
   pas flex → l'ancrage margin-left:auto ne s'applique pas). */
.bs-themes--gallery .bs-theme__badge {
    position: absolute; top: 0.55rem; right: 0.55rem; margin: 0;
}

/* --- Modèle : aperçu compact du modèle ACTIF + choix en MODALE ---------------
   7 modèles en galerie inline poussaient les options loin sous la ligne de
   flottaison. On n'affiche que le modèle en place ; la galerie passe en modale. */
.bs-modelnow { display: flex; align-items: center; gap: 0.9rem; margin-top: 0.4rem; }
.bs-modelnow__shot {
    flex: none; width: 96px; aspect-ratio: 16 / 10; overflow: hidden;
    border-radius: var(--bs-radius-sm); border: 1px solid var(--bs-line);
    background: var(--bs-cream);
}
.bs-modelnow__shot svg, .bs-modelnow__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Aperçu « vrai site » d'un modèle : iframe rendue à taille ordinateur puis
   réduite par transform:scale() (dimensions posées en JS). Inerte : c'est le
   label/radio parent qui sélectionne le modèle. */
.bs-theme__shot, .bs-modelnow__shot { position: relative; }
.bs-preview-frame {
    position: absolute; top: 0; left: 0;
    width: 1280px; height: 800px; transform: scale(0.15); transform-origin: top left;
    border: 0; pointer-events: none; background: #fff;
}
.bs-modelnow__meta { min-width: 0; margin-right: auto; }
.bs-modelnow__label { display: block; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bs-ink-soft); }
.bs-modelnow__name { font-size: 1.02rem; }

.bs-thememodal {
    width: min(880px, 94vw); max-height: 86vh; padding: 0; border: none;
    border-radius: 16px; background: var(--bs-surface, #fff); color: inherit;
    box-shadow: 0 24px 60px rgba(21, 26, 43, 0.28);
}
.bs-thememodal::backdrop { background: rgba(21, 26, 43, 0.5); backdrop-filter: blur(2px); }
.bs-thememodal__head {
    display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--bs-line); position: sticky; top: 0; z-index: 1;
    background: var(--bs-surface, #fff);
}
.bs-thememodal__head strong { font-size: 1.05rem; margin-right: auto; }
.bs-thememodal__close {
    border: none; background: none; font-size: 1.3rem; line-height: 1; cursor: pointer;
    color: var(--bs-ink-soft); padding: 0.15rem 0.45rem; border-radius: 8px;
}
.bs-thememodal__close:hover { background: var(--bs-cream); }
.bs-thememodal__body { padding: 1rem 1.15rem 1.3rem; overflow-y: auto; max-height: calc(86vh - 62px); }

/* --- Choix de police ---------------------------------------------------------
   Un nom de police ne dit rien : chaque option est rendue dans son propre
   dessin.
   ---------------------------------------------------------------------------- */
.bs-fontset { border: 0; padding: 0; margin: 0 0 1.1rem; }
.bs-fontset > .bs-label { padding: 0; margin-bottom: 0.4rem; }
.bs-font {
    display: flex; align-items: baseline; gap: 0.75rem;
    padding: 0.5rem 0.7rem; cursor: pointer;
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-radius-sm);
    margin-bottom: 0.35rem;
    transition: border-color 0.15s var(--bs-ease), background 0.15s var(--bs-ease);
}
.bs-font:hover { border-color: var(--bs-taupe); }
.bs-font input { position: absolute; opacity: 0; pointer-events: none; }
.bs-font:has(input:checked) {
    border-color: var(--bs-rose);
    background: var(--bs-rose-soft);
}
.bs-font__specimen { font-size: 1.35rem; line-height: 1.2; flex: 1; color: var(--bs-ink); }
.bs-font__specimen--body { font-size: 1rem; }
/* Specimen sous un select de police : montre le rendu du choix courant. */
.bs-select--font { font-size: 1rem; }
.bs-select--font option { font-size: 1.05rem; padding: 0.2rem; }
[data-specimen-for] {
    display: block; margin-top: 0.5rem; padding: 0.55rem 0.7rem;
    background: var(--bs-cream); border-radius: var(--bs-radius-sm);
    color: var(--bs-ink); line-height: 1.3;
}
.bs-font__name { font-size: 0.74rem; color: var(--bs-ink-soft); white-space: nowrap; }

.bs-design-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; align-items: start; }

/* --- Previsualisation (admin) ------------------------------------------------ */
.preview-toolbar { display: flex; gap: 0.35rem; justify-content: center; }
.preview-toolbar .is-active { background: var(--bs-ink); color: #fff; border-color: var(--bs-ink); }
.preview-stage {
    display: flex; justify-content: center;
    background: var(--bs-cream);
    border-radius: var(--bs-radius);
    padding: 1.4rem;
    border: 1px solid var(--bs-line);
}
/* Dimensions pilotées par preview.js (transform: scale). Le conteneur clippe
   l'iframe rendue à la vraie largeur du device puis réduite. */
.preview-frame {
    margin: 0 auto;
    overflow: hidden;
    border-radius: var(--bs-radius);
    background: #fff;
    box-shadow: var(--bs-shadow-lg);
    border: 1px solid var(--bs-line);
}
.preview-frame iframe {
    display: block;
    border: 0;
    background: #fff;
}

/* --- Ecran de synchronisation (differences) ---------------------------------- */
.diff-list { display: flex; flex-direction: column; gap: 0.6rem; }
.diff-item {
    background: var(--bs-surface);
    border: 1px solid var(--bs-line);
    border-left-width: 3px;
    border-radius: var(--bs-radius-sm);
    padding: 0.9rem 1.1rem;
    transition: background 0.15s var(--bs-ease), opacity 0.15s var(--bs-ease);
}
.diff-item--added    { border-left-color: var(--bs-success); }
.diff-item--modified { border-left-color: var(--bs-warning); }
.diff-item--removed  { border-left-color: var(--bs-danger); }
.diff-item[data-decision="accepted"] { background: #f4f7f2; }
.diff-item[data-decision="rejected"] { background: #faf5f4; opacity: 0.7; }
.diff-item__head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.diff-item__entity {
    color: var(--bs-ink-soft); font-size: 0.72rem;
    text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
}
.diff-item__field { color: var(--bs-ink-soft); font-size: 0.9rem; }
.diff-badge--added    { background: var(--bs-sage-soft); color: #435039; border-color: rgba(127,144,119,0.28); }
.diff-badge--modified { background: #f3e8d3; color: #7d6231; border-color: rgba(185,143,69,0.28); }
.diff-badge--removed  { background: #f4dcd9; color: var(--bs-danger); border-color: rgba(168,73,66,0.26); }
.diff-item__values {
    margin: 0.55rem 0; font-size: 0.92rem;
    display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
}
.diff-old { color: var(--bs-danger); text-decoration: line-through; text-decoration-color: rgba(168,73,66,0.4); }
.diff-new { color: var(--bs-success); font-weight: 600; }
.diff-arrow { color: var(--bs-muted); }
.diff-item__actions { display: flex; align-items: center; gap: 0.4rem; }
.diff-item__state { font-size: 0.78rem; color: var(--bs-ink-soft); margin-right: auto; }
.diff-item[data-decision="accepted"] .diff-accept { background: var(--bs-success); color: #fff; border-color: var(--bs-success); }
.diff-item[data-decision="rejected"] .diff-reject { background: var(--bs-danger); color: #fff; border-color: var(--bs-danger); }

/* --- Onglet referencement ------------------------------------------------------ */
.serp { padding: 0.6rem 0; }
.serp__url { color: #3d6b2c; font-size: 0.82rem; }
.serp__title { color: #1a0dab; font-size: 1.15rem; margin: 0.15rem 0; font-family: var(--bs-font-body); font-weight: 400; }
.serp__desc { color: #4d5156; font-size: 0.9rem; }
.seo-checks { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.seo-checks li { padding: 0.3rem 0; font-size: 0.9rem; }
.seo-checks .is-ok { color: var(--bs-success); }
.seo-checks .is-ko { color: var(--bs-ink-soft); }
.jsonld {
    background: #24221f; color: var(--bs-beige);
    border-radius: var(--bs-radius-sm); padding: 0.95rem;
    font-size: 0.78rem; overflow: auto; max-height: 340px; white-space: pre;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* --- Adaptatif ------------------------------------------------------------------ */
@media (max-width: 980px) {
    .bs-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
    :root { --bs-gutter: 1.1rem; }
    /* Le panneau de marque n'est PLUS masque ici : depuis qu'il porte le logo,
       le supprimer laissait un ecran de connexion sans marque du tout. Il se
       reduit a un bandeau (voir la requete a 900px), il ne disparait pas. */
    .bs-form-grid { grid-template-columns: 1fr; }
    .bs-design-grid { grid-template-columns: 1fr; }
    /* En dessous de 860px, deux colonnes ne tiennent plus : l'apercu passe
       sous les reglages et cesse d'etre collant. */
    .bs-studio { grid-template-columns: 1fr; }
    .bs-studio__preview { position: static; }
    /* La hauteur du frame est pilotée par design.js (transform:scale) — ne pas
       la figer ici, sinon l'aperçu mobile est déformé. */
    .bs-project__edit-label { display: none; }
    .bs-nav { top: 57px; }
    .bs-main { padding-top: 1.6rem; }
}
@media (max-width: 680px) {
    /* Carte projet empilee : l'apercu passe en banniere pleine largeur au-dessus
       du corps (l'iframe est agrandie pour remplir la largeur d'un mobile). */
    .bs-project { flex-direction: column; }
    .bs-project__thumb {
        width: 100%; height: 178px;
        border-right: 0; border-bottom: 1px solid var(--bs-line);
    }
    .bs-project__thumb iframe { transform: scale(0.34); transform-origin: top left; }
}
@media (max-width: 520px) {
    .bs-stats { grid-template-columns: 1fr; }
    .bs-card { padding: 1.25rem; }
    .bs-topbar__user span:first-child { display: none; }
    /* Sur une colonne etroite, « Supprimer » repousse en bout de ligne
       atterrissait seul sur un rang : il revient a la suite, sans filet. */
    .bs-project__delete { margin-left: 0; padding-left: 0; border-left: 0; }
    .bs-project__id, .bs-project__edit, .bs-project__do { padding-left: 1.1rem; padding-right: 1.1rem; }
}

/* (Les styles de l'éditeur de lien du canvas — pastille + modale — vivent dans
   le <style> de app/Views/cms/canvas.php : le canvas ne charge pas app.css.) */