/* ==========================================================================
   Design « scene » — nouvelle identité (maquette Codex, octobre 2026)
   Chargée uniquement quand le visiteur a choisi ce design (/design/scene),
   APRÈS style-theatralement.css : tout est préfixé par body.design-scene,
   le design classique n'est jamais touché.
   1. Jetons et base   2. En-tête   3. Pied   4. Accueil   5. Habillage des pages existantes
   ========================================================================== */

/* ---------- 1. Jetons et base ---------- */
.design-scene {
    --scene-papier: #f6f3eb;
    --scene-papier-clair: #fffdf8;
    --scene-encre: #25251f;
    --scene-rouge: #c33725;
    --scene-rouge-clair: #e99783;
    --scene-trait: #d8d5ca;
    --scene-trait-champ: #8f8d82; /* contour des champs et cases à cocher : contraste ≥ 3:1 sur le fond papier */
    --scene-gris: #626257;
    --scene-sauge: #e8ebdf;
    --scene-ocre: #b79848;
    --scene-serif: Georgia, "Times New Roman", serif;
    --scene-sans: Arial, "Helvetica Neue", sans-serif;
    --scene-haut-entete: 82px; /* hauteur de l'en-tête fixé (ajustée selon la largeur plus bas) */

    /* Bootstrap suit les jetons */
    --bs-body-bg: var(--scene-papier);
    --bs-body-color: var(--scene-encre);
    --bs-body-font-family: var(--scene-sans);
    --bs-link-color: var(--scene-encre);
    --bs-link-hover-color: var(--scene-rouge);
    --bs-border-color: var(--scene-trait);
    --bs-primary: var(--scene-rouge);

    background: var(--scene-papier);
    color: var(--scene-encre);
    font-family: var(--scene-sans);
    font-size: 15px;
    line-height: 1.5;
}

/* liens survolés en rouge, sauf les boutons et éléments actifs qui passent sur fond sombre (leur texte reste clair) */
.design-scene a:not(.btn, .scene-btn, .scene-outline, .page-link, .active, [aria-current]):hover { color: var(--scene-rouge); }
.design-scene a.scene-outline:hover { color: #fff; }
.design-scene a:focus-visible,
.design-scene button:focus-visible,
.design-scene input:not(.form-control, .form-check-input, [type="search"]):focus-visible { outline: 3px solid var(--scene-rouge); outline-offset: 4px; }
/* champs en focus : un seul indicateur (bordure foncée + halo rouge léger), à la place du halo bleu de l'ancien design et du contour rouge */
.design-scene .form-control:focus, .design-scene .form-select:focus, .design-scene textarea:focus,
.design-scene .scene-toolbar input:focus, .design-scene .scene-toolbar select:focus, .design-scene .scene-recherche-champ input:focus {
    outline: none !important; border-color: var(--scene-encre) !important; box-shadow: 0 0 0 3px rgba(195, 55, 37, .18) !important;
}
.design-scene .scene-recherche-champ input:focus { box-shadow: none !important; }
.design-scene .scene-recherche-champ:focus-within { border-bottom-color: var(--scene-rouge); }
.design-scene .troupe-editor:focus-within { border-color: var(--scene-encre) !important; box-shadow: 0 0 0 3px rgba(195, 55, 37, .18); }
.design-scene .troupe-editor .ProseMirror:focus { outline: none; }

.scene-wrap { max-width: 1280px; margin: 0 auto; padding: 0 48px; }

.scene-eyebrow { font-size: 13px; text-transform: uppercase; letter-spacing: 1.3px; display: flex; gap: 12px; align-items: center; }
.scene-eyebrow::before { content: ''; width: 24px; height: 1px; background: currentColor; }

.scene-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 35px; background: var(--scene-rouge); color: #fff !important; padding: 14px 22px; border: 0; font-size: 13px; transition: background .2s; }
.scene-btn:hover { background: var(--scene-encre); }

.scene-lien { font-size: 13px; border-bottom: 1px solid; padding-bottom: 4px; display: inline-block; }

/* ---------- 2. En-tête ---------- */
.scene-topline { background: var(--scene-encre); color: var(--scene-papier); text-align: center; padding: 7px; font-size: 13px; letter-spacing: 1.6px; text-transform: uppercase; }

.scene-entete-zone { background: var(--scene-papier); z-index: 1021; }
.scene-entete-zone .scene-wrap { position: relative; } /* la recherche globale s'ouvre sous la barre */
.scene-entete-zone { position: sticky; top: 0; }
.scene-entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 28px; padding: 16px 0; border-bottom: 1px solid var(--scene-trait); }
/* une seule barre de rubriques : entre le logo et les outils sur grand écran, sous le logo sinon */
.scene-nav { display: flex; gap: 26px; font-size: 14px; white-space: nowrap; flex: 1; justify-content: center; }
.scene-nav a { padding: 4px 0; border-bottom: 2px solid transparent; }
.scene-nav a.active { color: var(--scene-rouge); border-bottom-color: var(--scene-rouge); }
@media (max-width: 899px) {
    .scene-entete { padding-bottom: 0; }
    .scene-nav { order: 3; flex-basis: 100%; justify-content: flex-start; gap: 22px; margin-top: 14px; padding: 10px 0; border-top: 1px solid var(--scene-trait); overflow-x: auto; scrollbar-width: none; }
    .scene-nav::-webkit-scrollbar { display: none; }
}
@media (max-width: 620px) {
    /* mobile : logo et outils (recherche, notifications, compte) toujours sur une seule ligne, même connecté */
    .scene-entete { flex-wrap: wrap; column-gap: 8px; }
    .scene-entete > .scene-marque { flex: 1 1 auto; min-width: 0; }
    .scene-outils { margin-left: auto; }
    .scene-outils .btn-comment { padding: 6px; }
    .design-scene .scene-outils .dropdown-toggle.btn-comment { padding: 3px 6px 3px 3px; }
    .scene-outils .me-1 { margin-right: 0 !important; }
}
@media (max-width: 380px) {
    .scene-marque { font-size: 21px !important; letter-spacing: -1px; }
}
@media (max-width: 620px) {
    /* mobile : l'en-tête défile avec la page (il serait trop haut fixé) ; un fondu indique que les rubriques continuent à droite */
    .scene-entete-zone { position: static; }
    .scene-nav { -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); padding-right: 30px; }
}

.scene-marque { font: bold 30px var(--scene-serif); letter-spacing: -1.4px; color: var(--scene-encre); line-height: 1; }
.scene-marque b { color: var(--scene-rouge); }
.scene-marque small { font: 10px/1 var(--scene-sans) !important; display: block; letter-spacing: 3px; margin-top: 7px; text-transform: uppercase; }
.scene-marque:hover { color: var(--scene-encre) !important; }


.scene-outils { display: flex; align-items: center; flex-shrink: 0; }
.scene-outils .btn-comment { font-size: 1.05rem; color: var(--scene-encre); }
.scene-outils .btn-orange { border-radius: 0 !important; background: transparent; color: var(--scene-encre); border: 1px solid var(--scene-encre); padding: 9px 17px; font-size: 13px; }
.scene-outils .btn-orange:hover { background: var(--scene-encre); color: #fff; }
.scene-outils .btn-orange .fa-lg { font-size: 1em; }
.scene-outils .recherche-globale { background: var(--scene-papier) !important; border-color: var(--scene-trait) !important; }


/* ---------- 3. Pied ---------- */
.scene-pied { border-top: 1px solid var(--scene-trait); padding: 35px 0 40px; margin-top: 40px; font-size: 14px; color: #6b6a60; }
.scene-pied-haut { display: grid; grid-template-columns: 300px 1fr; gap: 50px; }
.scene-pied-intro p { margin: 10px 0 0; }
.scene-pied-texte { line-height: 1.7; }
.scene-pied-colonnes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.scene-pied h5 { font: 13px var(--scene-sans); letter-spacing: 1.3px; text-transform: uppercase; color: var(--scene-encre); margin: 0 0 10px; }
.scene-pied ul { list-style: none; padding: 0; margin: 0 0 22px; }
.scene-pied-intro .scene-pied-texte { margin-top: 16px; }
.scene-pied-presentations { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; border-top: 1px solid var(--scene-trait); margin-top: 18px; padding-top: 28px; }
.scene-pied-presentations h5 { font: normal 19px var(--scene-serif); letter-spacing: 0; text-transform: none; margin-bottom: 8px; }
.scene-pied-presentations p { margin: 0; line-height: 1.7; }
.scene-pied li { padding: 3px 0; }
.scene-note { background: #eae6db; padding: 10px; text-align: center; font-size: 13px; letter-spacing: .5px; }
.scene-note a { border-bottom: 1px solid; }

/* ---------- 4. Accueil ---------- */
.scene-hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; padding: 40px 0 50px; align-items: center; }
.design-scene .scene-hero-titre { font: normal clamp(54px, 5.8vw, 82px)/.99 var(--scene-serif); letter-spacing: -4px; margin: 25px 0; }
.scene-hero-titre em { color: var(--scene-rouge); }
.scene-intro { max-width: 390px; color: var(--scene-gris); font-size: 16px; line-height: 1.7; }
.scene-hero .scene-btn { margin-top: 15px; }

/* affiche : étiquettes, mots et phrase du bas dans le flux (l'affiche s'agrandit plutôt que de laisser les textes se chevaucher) */
.scene-affiche { position: relative; background: var(--scene-rouge); color: var(--scene-papier); min-height: 430px; display: flex; flex-direction: column; overflow: hidden; padding: 25px 30px 23px; transform: rotate(2deg); box-shadow: 10px 12px 0 #e6e1d6; }
.scene-affiche::before { content: ''; position: absolute; inset: 65px 25px 25px; border: 1px solid var(--scene-rouge-clair); border-radius: 50% 50% 0 0; }
.scene-affiche-label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; letter-spacing: 2px; font-size: 13px; }
.scene-affiche-mot { flex: 1; display: flex; align-items: center; justify-content: center; padding: 34px 0 46px; font: italic clamp(54px, 6.2vw, 92px)/.85 var(--scene-serif); letter-spacing: -.06em; text-align: center; transform: rotate(-9deg); }
.scene-affiche-pied { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.scene-affiche-bas { font-size: 13px; letter-spacing: 2px; padding-bottom: 2px; }
.scene-asterisque { flex-shrink: 0; font: 84px/.7 var(--scene-serif); transform: rotate(12deg); margin: 0 -4px -4px 0; }

.scene-recherche { border-top: 1px solid var(--scene-trait); border-bottom: 1px solid var(--scene-trait); display: flex; align-items: center; gap: 24px; padding: 20px 0; }
.scene-recherche label { font: 22px var(--scene-serif); white-space: nowrap; }
.scene-recherche-champ { display: flex; flex: 1; border-bottom: 1px solid var(--scene-trait-champ); }
.scene-recherche-champ input { width: 100%; background: transparent; border: 0; padding: 12px; outline-offset: 0; }
.scene-recherche-champ button { background: transparent; border: 0; color: var(--scene-rouge); font-size: 24px; }

.scene-acces { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--scene-trait); padding: 24px 0; }
.scene-acces a { padding: 0 22px; border-left: 1px solid var(--scene-trait); }
.scene-acces a:first-child { border: 0; padding-left: 0; }
.scene-acces span { color: var(--scene-rouge); font-size: 13px; }
.scene-acces strong { display: block; font: normal 23px var(--scene-serif); margin: 6px 0; }
.scene-acces small { color: #68685c; }

.scene-section { padding: 53px 0; }
.scene-section-tete { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 27px; }
.scene-section-tete h2 { font: 36px/1.1 var(--scene-serif); margin: 9px 0 0; letter-spacing: -1px; }

.scene-cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.scene-carte { display: block; border: 1px solid var(--scene-trait); padding: 25px; position: relative; transition: transform .2s, background .2s; }
.scene-carte:hover { transform: translateY(-4px); background: var(--scene-papier-clair); color: var(--scene-encre) !important; }
.scene-carte h3 { font: 25px/1.15 var(--scene-serif); margin: 16px 0; }
.scene-carte p { font-size: 14px; color: var(--scene-gris); line-height: 1.65; margin-bottom: 23px; }
.scene-tag { font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }
.scene-carte-pied { border-top: 1px solid var(--scene-trait); padding-top: 15px; font-size: 13px; display: flex; justify-content: space-between; gap: 10px; }
.scene-carte-pied span:last-child { color: var(--scene-rouge); font-size: 19px; line-height: 1; }
.scene-carte-num { color: var(--scene-rouge); font: italic 27px var(--scene-serif); float: right; }

.scene-impro { background: var(--scene-sauge); padding: 35px 38px; display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; margin: 0 0 10px; }
.scene-impro h2 { font: 38px var(--scene-serif); margin: 10px 0; }
.scene-impro p { font-size: 14px; color: #5f6558; }
.scene-impro-demo { border-left: 1px solid #c0c6b5; padding-left: 35px; }
.scene-impro-demo small { font-size: 13px; letter-spacing: 1.5px; }
.scene-impro-demo p { font: 21px/1.4 var(--scene-serif); color: var(--scene-encre); min-height: 59px; }
.scene-impro-demo .scene-btn { background: var(--scene-encre); }
.scene-impro-demo .scene-btn:hover { background: var(--scene-rouge); }

.scene-bibliotheque { display: grid; grid-template-columns: 280px 1fr; gap: 45px; border-top: 1px solid var(--scene-trait); }
.scene-bibliotheque h2, .scene-communaute h2 { font: 36px var(--scene-serif); margin: 12px 0; }
.scene-bibliotheque p, .scene-communaute p { color: var(--scene-gris); max-width: 400px; }
.scene-filtres { display: flex; gap: 7px; flex-wrap: wrap; margin: 20px 0; }
.scene-filtres a { padding: 6px 12px; border: 1px solid var(--scene-trait); border-radius: 20px; font-size: 13px; }
.scene-filtres a:hover { background: var(--scene-encre); color: #fff !important; }
.scene-livre { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--scene-trait); }
.scene-livre-icone { height: 58px; background: #d9b75d; display: grid; place-items: center; font: italic 25px var(--scene-serif); border-left: 4px solid var(--scene-ocre); color: var(--scene-encre); }
.scene-livre:nth-child(3n+2) .scene-livre-icone { background: #adb69a; border-color: #879478; }
.scene-livre:nth-child(3n) .scene-livre-icone { background: #ca8973; border-color: #ad6b57; }
.scene-livre h3 { font: 23px var(--scene-serif); margin: 0 0 4px; }
.scene-livre p { margin: 0; font-size: 13px; color: #6d6c60; }
.scene-livre > span { font-size: 13px; color: #68685c; white-space: nowrap; }

.scene-communaute { border-top: 1px solid var(--scene-trait); display: grid; grid-template-columns: 1fr 1fr; gap: 45px; }
.scene-communaute h2 { font-size: 43px; line-height: 1.1; margin: 16px 0; }
.scene-troupe { padding: 17px 0; border-bottom: 1px solid var(--scene-trait); display: flex; justify-content: space-between; align-items: center; }
.scene-troupe strong { font: normal 20px var(--scene-serif); }
.scene-troupe small { display: block; color: #777569; margin-top: 5px; }
.scene-troupe span { color: var(--scene-rouge); }
/* accueil : début de la présentation des textes et des troupes, sur deux lignes au plus */
.scene-extrait { font-size: 14px !important; line-height: 1.6; color: var(--scene-gris) !important; margin: 6px 0 0 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.scene-troupe > div { min-width: 0; padding-right: 20px; }
.scene-livre { align-items: start; }
.scene-livre > span { padding-top: 6px; }

/* ---------- 4 bis. Pages de rubrique (maquette : .pagehero, .folio, .toolbar, .listing, .band) ---------- */
.scene-pagehero { padding: 45px 0 30px; display: grid; grid-template-columns: 1fr 250px; gap: 30px; }
.scene-surtitre { margin: 0; font: 13px var(--scene-sans) !important; letter-spacing: 2px !important; }
.scene-pagehero-titre { font: normal 62px/1.06 var(--scene-serif); letter-spacing: -2.8px; margin: 25px 0; }
.scene-pagehero-titre em { color: var(--scene-rouge); }
.scene-pagehero p { max-width: 620px; color: var(--scene-gris); }
.scene-pagehero p + p { margin-top: -6px; }
.scene-pagehero-action { margin-top: 18px; }
/* bandeau compact des pages filtrées : le titre utile en grand, l'intro sur deux lignes au plus */
.scene-pagehero-compact { grid-template-columns: 1fr; padding: 35px 0 22px; }
.design-scene .scene-pagehero-compact .scene-pagehero-titre { font: normal 46px/1.08 var(--scene-serif); letter-spacing: -1.8px; margin: 16px 0 14px; }
.scene-pagehero-compact p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.scene-folio { background: var(--scene-rouge); color: var(--scene-papier); display: grid; place-content: center; text-align: center; font: italic 72px var(--scene-serif); transform: rotate(2deg); margin: 25px 5px; min-height: 220px; line-height: 1; }
.scene-folio small { font: 13px var(--scene-sans); letter-spacing: 2px; margin-top: 14px; font-style: normal; display: block; }

.scene-toolbar { display: flex; gap: 20px; justify-content: space-between; align-items: center; border-top: 1px solid var(--scene-trait); padding: 12px 0 24px; }
.scene-toolbar .scene-filtres { margin: 0; }
.scene-toolbar > input, .scene-toolbar-form input, .scene-toolbar-form select { background: #fff; border: 1px solid var(--scene-trait-champ); padding: 10px 14px; font-size: 13px; color: var(--scene-encre); }
.scene-toolbar > input { width: 280px; max-width: 100%; }
.scene-toolbar-form { display: flex; gap: 8px; flex-shrink: 0; }
.scene-toolbar-form input { width: 260px; }
.scene-toolbar-form button { background: var(--scene-rouge); color: #fff; border: 0; padding: 0 16px; font-size: 18px; }
.scene-toolbar-form button:hover { background: var(--scene-encre); }
.scene-filtres a.active, .scene-sousfiltres a.active, .scene-villes a.active { background: var(--scene-encre); color: #fff !important; border-color: var(--scene-encre); }
.scene-filtres a span { opacity: .55; margin-left: 6px; font-size: 13px; }
.scene-sousfiltres { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -12px 0 20px; }
.scene-sousfiltres > span { font-size: 13px; letter-spacing: 1.3px; text-transform: uppercase; margin-right: 8px; color: var(--scene-gris); }
.scene-sousfiltres a { min-width: 30px; text-align: center; padding: 4px 10px; border: 1px solid var(--scene-trait); border-radius: 20px; font-size: 13px; }
.scene-sousfiltres a:hover { border-color: var(--scene-encre); }

.scene-hint { font-size: 13px; color: var(--scene-gris); margin: 0 0 18px; }
.scene-hint a { border-bottom: 1px solid; }
.scene-vide { padding: 40px; border: 1px solid var(--scene-trait); color: var(--scene-gris); margin: 20px 0; }

.scene-cartes .scene-carte { min-height: 210px; display: flex; flex-direction: column; }
.scene-cartes .scene-carte .scene-carte-pied { margin-top: auto; }
.scene-cartes .scene-carte h3 { font-size: 28px; }
.scene-carte-num { position: absolute; top: 22px; right: 25px; }
.scene-carte .scene-carte-resume { font-size: 14px; line-height: 1.6; color: var(--scene-gris); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: -8px; }
.scene-carte p + .scene-carte-resume { margin-top: -12px; }
.scene-carte h3 + .scene-carte-resume { margin-top: 0; }
/* utilitaires du design classique repris dans les blocs partagés : pas en dessous de 13 px */
.design-scene .fs0-7, .design-scene .fs0-8 { font-size: 13px !important; }
.scene-cartes-mono { grid-template-columns: 1fr !important; }
.scene-col-carte > .scene-carte { width: 100%; display: flex; flex-direction: column; }
.scene-col-carte .scene-carte-pied { margin-top: auto; }
.scene-carte-lien { position: relative; }
.scene-carte-lien h3 a::after { content: ""; position: absolute; inset: 0; }
.scene-carte-lien:hover { transform: translateY(-4px); background: var(--scene-papier-clair); }
.scene-carte-action { position: relative; z-index: 1; color: var(--scene-rouge); font-size: 13px !important; border-bottom: 1px solid; }
.scene-etiquette { font-size: 13px !important; letter-spacing: 1px; text-transform: uppercase; border: 1px solid var(--scene-trait); padding: 3px 8px; color: var(--scene-gris) !important; }
.scene-etiquette-rouge { border-color: var(--scene-rouge); color: var(--scene-rouge) !important; }
.scene-date-annulee { opacity: .5; }

.scene-pagination { display: flex; justify-content: center; margin: 40px 0 10px; }

.scene-band { padding: 30px; background: var(--scene-sauge); margin: 45px 0; display: flex; justify-content: space-between; gap: 25px; align-items: center; }
.scene-band h2 { font: 28px var(--scene-serif); margin: 0 0 8px; }
.scene-band p { margin: 0; color: var(--scene-gris); font-size: 14px; }
.scene-band .scene-btn { flex-shrink: 0; }

.scene-villes { columns: 5 170px; column-gap: 30px; font-size: 13px; }
.scene-villes a { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--scene-trait); break-inside: avoid; }
.scene-villes a span { color: var(--scene-gris); font-size: 13px; }
.scene-villes a.active { padding-left: 8px; padding-right: 8px; }

.scene-acces-2 { grid-template-columns: repeat(2, 1fr); margin-top: 35px; border-top: 1px solid var(--scene-trait); }
.scene-carte-geo { margin-bottom: 30px; border: 1px solid var(--scene-trait); }
.scene-carte-geo > * { border-radius: 0 !important; }
.scene-sources { font-size: 13px; color: var(--scene-gris); margin: 30px 0 0; }
.scene-sources a { border-bottom: 1px solid; }
.scene-biographie { display: grid; grid-template-columns: 280px 1fr; gap: 45px; border-top: 1px solid var(--scene-trait); margin-top: 40px; }
.scene-biographie h2 { font: 36px var(--scene-serif); margin: 12px 0; }
.scene-biographie .auteur-biographie { line-height: 1.75; }

.scene-btn-petit { padding: 9px 14px; gap: 14px; font-size: 13px; }

/* dates de représentation (agenda d'une ville, fiche troupe…) */
.scene-date { display: grid; grid-template-columns: 64px 1fr auto; gap: 22px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--scene-trait); }
.scene-date-jour { text-align: center; border-left: 3px solid var(--scene-rouge); padding: 4px 0; }
.scene-date-jour strong { display: block; font: italic 32px/1 var(--scene-serif); color: var(--scene-rouge); }
.scene-date-jour small { display: block; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; }
.scene-date h3 { font: 22px var(--scene-serif); margin: 0 0 3px; }
.scene-date p { margin: 0; font-size: 13px; }
.scene-date-meta { color: var(--scene-gris); margin-top: 3px !important; }
.scene-date-fleche { color: var(--scene-rouge); font-size: 20px; }

/* générateur d'improvisation (maquette : .generator, .controls, .prompt) */
.scene-generateur { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; padding-bottom: 60px; }
.scene-controles { border: 1px solid var(--scene-trait); padding: 28px; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.scene-controles label { display: block; width: 100%; font-size: 13px; }
.scene-controles select { display: block; width: 100%; padding: 12px; margin-top: 8px; border: 1px solid var(--scene-trait-champ); background: var(--scene-papier); color: var(--scene-encre); }
.scene-elements { list-style: none; padding: 0; margin: 0; width: 100%; font-size: 13px; }
.scene-elements li { padding: 10px 0; border-bottom: 1px solid var(--scene-trait); display: flex; justify-content: space-between; gap: 15px; }
.scene-elements li span:first-child { font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--scene-gris); padding-top: 3px; white-space: nowrap; }
.scene-elements li span:last-child { font: 17px var(--scene-serif); text-align: right; }
.scene-elements li small { display: block; font: 13px var(--scene-sans); color: var(--scene-gris); }
.scene-prompt { background: var(--scene-sauge); padding: 35px; }
.scene-prompt small { font-size: 13px; letter-spacing: 1px; }
.scene-prompt h2 { font: 31px var(--scene-serif); margin: 14px 0 6px; }
.scene-prompt > p { font: 24px/1.5 var(--scene-serif); margin: 0 0 10px; }
.scene-timer { font: 50px var(--scene-serif); display: block; margin: 18px 0; }
.scene-outline { border: 1px solid var(--scene-encre); padding: 10px 17px; font-size: 13px; background: transparent; color: var(--scene-encre); }
.scene-outline:hover { background: var(--scene-encre); color: #fff; }
.scene-note-petite, .scene-prompt > p.scene-note-petite { font: 13px/1.5 var(--scene-sans); color: var(--scene-gris); margin: 0; }

@media (max-width: 900px) {
    .scene-pagehero-titre { font-size: 50px; }
    .scene-toolbar { flex-wrap: wrap; }
}
@media (max-width: 620px) {
    .scene-pagehero { grid-template-columns: 1fr; padding: 30px 0 20px; }
    /* mobile : le titre utile (le <h1>) remplace la grande phrase, l'intro tient en deux lignes */
    .scene-topline { display: none; }
    .scene-pagehero-phrase { display: none; }
    .design-scene h1.scene-surtitre::before { display: none; }
    .design-scene h1.scene-surtitre { font: normal 34px/1.1 var(--scene-serif) !important; letter-spacing: -1px !important; text-transform: none; margin: 4px 0 12px; display: block; }
    .scene-pagehero > div > p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; }
    .design-scene .scene-pagehero-compact .scene-pagehero-titre { font-size: 34px; letter-spacing: -1px; }
    .scene-pagehero, .scene-pagehero-compact { padding: 22px 0 14px; }
    .scene-pagehero-titre { font-size: 42px; letter-spacing: -1.5px; margin: 18px 0; }
    .scene-folio { display: none; }
    .scene-toolbar { display: block; }
    .scene-toolbar > input, .scene-toolbar-form { width: 100%; margin-top: 14px; }
    .scene-toolbar-form { flex-wrap: wrap; }
    .scene-toolbar-form input { flex: 1 1 100%; width: 100%; }
    .scene-toolbar-form select { flex: 1; }
    .scene-band { display: block; }
    .scene-band .scene-btn { margin-top: 15px; }
    .scene-acces-2 { grid-template-columns: 1fr; }
    .scene-acces-2 a:nth-child(2) { border: 0; padding-left: 0; }
    .scene-generateur, .scene-biographie { grid-template-columns: 1fr; }
    .scene-date { grid-template-columns: 54px 1fr; }
    .scene-date-action { grid-column: 2; }
    .scene-cartes .scene-carte h3 { font-size: 24px; }
}

/* ---------- 4 ter. Fiches (maquette : fenêtre de détail — étiquette, grand titre, .detailmeta, texte aéré) ---------- */
.scene-fiche-tete { padding: 40px 0 30px; display: grid; grid-template-columns: 1fr 250px; gap: 40px; align-items: center; border-bottom: 1px solid var(--scene-trait); margin-bottom: 40px; }
.scene-fiche-tete-seule { grid-template-columns: 1fr; }
.scene-fiche-rubrique:hover { color: var(--scene-rouge); }
.design-scene .scene-fiche-tete h1 { font: normal 58px/1.05 var(--scene-serif); letter-spacing: -2.4px; margin: 22px 0 12px; }
.scene-fiche-accent { font: italic 24px/1.3 var(--scene-serif); color: var(--scene-rouge); margin: 0 0 18px; }
.scene-fiche-accent a { color: inherit; border-bottom: 1px solid var(--scene-rouge-clair); }
.scene-fiche-tags { margin: 0 0 18px; }
.scene-fiche-tags span { padding: 6px 12px; border: 1px solid var(--scene-trait); border-radius: 20px; font-size: 13px; }
.scene-detailmeta { padding: 14px 0; border-top: 1px solid var(--scene-trait); border-bottom: 1px solid var(--scene-trait); color: var(--scene-gris); font-size: 13px; }
.scene-detailmeta:empty { display: none; }
.scene-fiche-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 20px; }
.scene-fiche-actions .btn { border-radius: 0 !important; margin: 0 !important; padding: 9px 16px; font-size: 13px; }
.scene-fiche-visuel { display: grid; place-items: center; }
.scene-fiche-visuel img { max-width: 100%; }
.scene-fiche-logo { max-height: 200px; padding: 18px; background: var(--scene-papier-clair); border: 1px solid var(--scene-trait); transform: rotate(2deg); box-shadow: 8px 10px 0 #e6e1d6; }
.scene-fiche-affiche { max-height: 340px; transform: rotate(2deg); box-shadow: 10px 12px 0 #e6e1d6; }
.scene-fiche-note { font-size: 13px; color: var(--scene-gris); margin: -20px 0 30px; }
.scene-couverture { margin-top: 30px; height: 260px; overflow: hidden; }
.scene-couverture img { width: 100%; height: 100%; object-fit: cover; }

.scene-fiche { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 60px; align-items: start; }
.scene-fiche-cote { display: flex; flex-direction: column; gap: 18px; }
.scene-fiche-cote:has(> .scene-fiche-cote-fixe) { align-self: stretch; }
.scene-fiche-cote-fixe { position: sticky; top: calc(var(--scene-haut-entete) + 14px); max-height: calc(100vh - var(--scene-haut-entete) - 30px); overflow-y: auto; padding-right: 6px; scrollbar-width: thin; scrollbar-color: var(--scene-trait) transparent; }
.scene-fiche-cote-fixe::-webkit-scrollbar { width: 4px; }
.scene-fiche-cote-fixe::-webkit-scrollbar-thumb { background: var(--scene-trait); }
.scene-fiche-cote .scene-carte { min-height: 0; }

.scene-prose { font-size: 16px; line-height: 1.8; }
.scene-prose h2, .scene-prose h3 { font-family: var(--scene-serif); margin: 1.6em 0 .5em; }
.scene-prose img { max-width: 100%; height: auto; }
.scene-prose a { border-bottom: 1px solid var(--scene-rouge-clair); }
.scene-chapeau { font: 22px/1.5 var(--scene-serif); margin: 0 0 28px; }
.scene-article-image { width: 100%; margin-bottom: 30px; }

.scene-encart { background: var(--scene-sauge); padding: 28px 30px; margin: 35px 0; }
.scene-encart > p:last-child, .scene-encart .scene-prose > :last-child { margin-bottom: 0; }
.scene-encart-blanc { background: var(--scene-papier-clair); border: 1px solid var(--scene-trait); margin: 0; padding: 24px; }
.scene-section-serree { padding: 40px 0 0; }
.scene-section-serree .scene-section-tete h2 { font-size: 30px; }
.scene-details { margin-top: 20px; }
.scene-details summary { font-size: 13px; color: var(--scene-gris); cursor: pointer; }

.scene-coordonnees { list-style: none; padding: 0; margin: 0; font-size: 15px; }
.scene-coordonnees li { padding: 9px 0; border-bottom: 1px solid var(--scene-trait); }
.scene-coordonnees li:last-child { border: 0; padding-bottom: 0; }

/* blocs partagés avec le design classique, posés dans la colonne de côté */
.design-scene .scene-fiche-cote > .p-4.border, .design-scene .scene-fiche-cote > .p-3.border, .design-scene .scene-fiche-cote > div > .p-3.border { background: var(--scene-papier-clair) !important; border: 1px solid var(--scene-trait) !important; padding: 24px !important; margin: 0 !important; font-size: 13px; }
.design-scene .scene-fiche-cote h3.typo { font: normal 22px var(--scene-serif); margin-bottom: 14px; }
.design-scene .scene-fiche-cote .icon { width: 22px; height: 22px; fill: var(--scene-encre); }
.design-scene .scene-fiche-cote .btn-orange, .design-scene .scene-fiche-cote .btn-outline-secondary { font-size: 13px; }
.design-scene .btn-outline-secondary { --bs-btn-color: var(--scene-encre); --bs-btn-border-color: var(--scene-encre); --bs-btn-hover-bg: var(--scene-encre); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: var(--scene-encre); }

/* lecteur de texte */
.design-scene .scene-lecteur-outils { top: var(--scene-haut-entete); background: #3a3a33 !important; border-top: 0; border-bottom: 0; padding: 0; margin-bottom: 20px; z-index: 1010; }
.design-scene .scene-lecteur-outils .container-fluid { padding: 0; }
.design-scene .scene-lecteur-outils .navbar-nav-textes { gap: 4px; }
.design-scene .scene-lecteur-outils .navbar-nav-textes a { font-size: 13px; letter-spacing: .5px; text-transform: uppercase; border-right: 0; padding: 12px 14px; }
.design-scene .scene-lecteur-outils .navbar-nav-textes a { color: var(--scene-papier) !important; }
.design-scene .scene-lecteur-outils .navbar-nav-textes a:hover { background: #4b4b43 !important; color: #fff !important; }
.design-scene .scene-lecteur-outils .navbar-nav-textes a.orange, .design-scene .scene-lecteur-outils .navbar-nav-textes .fa-heart { color: var(--scene-rouge-clair) !important; }
.design-scene .menu-chapitres { background: #fff; border-top: 1px solid var(--scene-trait); border-bottom: 1px solid var(--scene-trait); box-shadow: 0 8px 18px rgba(37, 37, 31, .08); top: 100%; left: 0; z-index: 5; }
.scene-lecture { font: 17px/1.8 var(--scene-serif); }
.scene-lecture h1, .scene-lecture h2, .scene-lecture h3 { font-family: var(--scene-serif); letter-spacing: -.5px; }
.scene-lecture h1 { font-size: 34px; }
.scene-lecture h2 { font-size: 26px; }
.scene-lecture .personnage { font-family: var(--scene-sans); font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; }
.scene-lecture .didascalie { color: var(--scene-gris); }
.scene-lecture-astuce { margin-bottom: 10px !important; }
.scene-role { padding: 8px 0 6px; font-size: 14px; }
.scene-role a { font-family: var(--scene-serif); font-size: 16px; }
.scene-role-description { display: block; color: var(--scene-gris); font-size: 13px; margin-top: 4px; }
.design-scene .role-barre { height: 3px; border-radius: 0; background: var(--scene-trait); }
.design-scene .role-barre span { border-radius: 0; background: var(--scene-rouge); }
.scene-tableau .table { --bs-table-bg: transparent; font-size: 13px; }
.scene-tableau th { font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: normal; color: var(--scene-gris); }
.design-scene .scene-bouton-flottant { position: fixed; right: 18px; bottom: 18px; width: 54px; height: 54px; border-radius: 50% !important; z-index: 1020; box-shadow: 4px 5px 0 #e6e1d6; }
.design-scene .scene-offcanvas { background: var(--scene-papier); }

/* fiche texte : les personnages à gauche, une colonne de lecture d'environ 70 caractères à droite, calées à gauche.
   La colonne des personnages s'étire sur toute la hauteur du texte pour que la liste reste fixe pendant la lecture */
.scene-lecteur .scene-fiche { grid-template-columns: 280px minmax(0, 680px); justify-content: start; gap: 60px; }
.scene-lecteur .scene-fiche-cote { order: -1; align-self: stretch; }
@media (max-width: 991px) { .scene-lecteur .scene-fiche { grid-template-columns: minmax(0, 680px); } } /* personnages dans le panneau mobile */
/* en-tête resserré : pas d'étiquette (le fil d'Ariane la donne), thèmes et infos sur une même ligne */
.design-scene .scene-lecteur .scene-fiche-tete { padding: 8px 0 20px; margin-bottom: 24px; }
.scene-lecteur .scene-fiche-tete > div { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; }
.scene-lecteur .scene-fiche-tete > div > * { flex-basis: 100%; }
.scene-lecteur .scene-fiche-rubrique { display: none; }
.scene-lecteur-prive .scene-fiche-rubrique { display: flex; margin-top: 18px; } /* texte privé : pas de fil d'Ariane, le lien « Mes textes » le remplace */
.design-scene .scene-lecteur .scene-fiche-tete h1 { font-size: 50px; margin: 6px 0 6px; }
.scene-lecteur .scene-fiche-accent { margin-bottom: 14px; }
.scene-lecteur .scene-fiche-tete .scene-fiche-tags, .scene-lecteur .scene-fiche-tete .scene-detailmeta { flex-basis: auto; margin: 0; }
.scene-lecteur .scene-detailmeta { padding: 0; border: 0; }
/* barre d'outils : toute la largeur de la colonne (le design classique la limite à 600 px, centrée) */
.design-scene .scene-lecteur .scene-lecteur-outils { max-width: none; margin: 0 0 20px; border-bottom-width: 0; }
.scene-lecteur .scene-lecteur-outils .navbar-nav-textes { width: 100%; }
/* publicités : Google réserve la hauteur de l'annonce puis laisse l'emplacement vide quand il n'en a pas (data-ad-status="unfilled") :
   on le masque, comme Google le recommande ; une annonce affichée est séparée du texte par un filet et une mention */
.design-scene ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
.design-scene .py-2:has(> ins.adsbygoogle[data-ad-status="filled"]) { border-top: 1px solid var(--scene-trait); border-bottom: 1px solid var(--scene-trait); padding: 22px 0 14px !important; margin: 10px 0 20px; position: relative; }
.design-scene .py-2:has(> ins.adsbygoogle[data-ad-status="filled"])::before { content: "Publicité"; position: absolute; top: 2px; left: 0; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--scene-gris); }
/* début du texte : l'emplacement publicitaire ne réserve pas de place tant qu'il est vide, premier titre moins décollé */
.scene-lecteur .scene-lecture > .py-2 { padding: 0 !important; }
.scene-lecteur .scene-lecture > h1:first-of-type, .scene-lecteur .scene-lecture > h2:first-of-type { margin-top: 1.2rem !important; }
.scene-lecteur .scene-lecture .mt-5 { margin-top: 2.2rem !important; }

/* commentaires d'exercice */
.design-scene .scene-commentaires .comment-textarea { background: var(--scene-papier-clair); border-radius: 0; }
.design-scene .scene-commentaires .pop-delete { background: var(--scene-papier-clair) !important; }
.scene-aimer .fa-heart { color: var(--scene-rouge); }

/* troupe, spectacle, salle */
.scene-cartes-2 { grid-template-columns: repeat(2, 1fr); }
.scene-cartes-2 .scene-carte h3 { font-size: 24px; }
.scene-cartes-2 .scene-prose { font-size: 14px; color: var(--scene-gris); margin-bottom: 20px; }
.scene-affiches { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 26px; }
.scene-affiche-carte { display: block; }
.scene-affiche-carte img, .scene-affiche-carte-vide { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; margin-bottom: 12px; transition: transform .2s; }
.scene-affiche-carte-vide { background: var(--scene-rouge); color: var(--scene-papier); display: grid; place-items: center; font: italic 64px var(--scene-serif); }
.scene-affiche-carte:hover img, .scene-affiche-carte:hover .scene-affiche-carte-vide { transform: rotate(2deg); }
.scene-affiche-carte strong { display: block; font: normal 19px/1.2 var(--scene-serif); }
.scene-affiche-carte small { color: var(--scene-gris); }
.scene-membres { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 26px; text-align: center; }
.scene-membre strong { display: block; font: normal 17px var(--scene-serif); }
.scene-membre small { color: var(--scene-gris); font-size: 13px; }
.scene-membre img { border-radius: 50%; display: block; margin: 0 auto 8px; }
.scene-membre-initiales { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 8px; display: grid; place-items: center; background: var(--scene-sauge); font: italic 24px var(--scene-serif); }
.scene-galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.scene-galerie a { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.scene-galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.scene-galerie a:hover img { transform: scale(1.04); }
.scene-galerie-modale .modal-content { border-radius: 0; }
.scene-videos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.scene-ligne-document { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border: 1px solid var(--scene-trait); background: var(--scene-papier-clair); margin-bottom: 14px; }
.scene-ligne-document > div { flex: 1; min-width: 0; }
.scene-ligne-document small { display: block; color: var(--scene-gris); font-size: 13px; }

/* lexique */
.scene-toolbar-collante { position: sticky; top: var(--scene-haut-entete); background: var(--scene-papier); z-index: 5; }
.scene-lettres a { min-width: 32px; text-align: center; padding: 5px 9px; }
.scene-lexique-lettre { display: grid; grid-template-columns: 120px 1fr; gap: 30px; border-top: 1px solid var(--scene-trait); padding: 26px 0; scroll-margin-top: 170px; }
.scene-lexique-initiale { font: italic 72px/1 var(--scene-serif); color: var(--scene-rouge); }
.scene-lexique-termes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 30px; }
.scene-lexique-termes a { padding: 12px 0; border-bottom: 1px solid var(--scene-trait); }
.scene-lexique-termes strong { display: block; font: normal 19px var(--scene-serif); }
.scene-lexique-termes small { color: var(--scene-gris); font-size: 13px; }
.scene-definition { font: 19px/1.8 var(--scene-serif); }
.scene-voir-aussi { margin: 35px 0 0; }
.scene-precedent-suivant { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: end; border-top: 1px solid var(--scene-trait); margin-top: 40px; padding-top: 20px; }
.scene-precedent-suivant a small { display: block; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--scene-gris); }
.scene-precedent-suivant div a { font: 19px var(--scene-serif); }
.scene-sousfiltres-encart { margin: 0 0 14px; }

/* recherche */
.scene-pagehero-recherche { grid-template-columns: 1fr; padding-bottom: 10px; }
.scene-resultats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 30px; }
.scene-resultat { padding: 14px 0; border-bottom: 1px solid var(--scene-trait); min-width: 0; }
.scene-resultat strong { display: block; font: normal 19px/1.25 var(--scene-serif); }
.scene-resultat small { display: block; color: var(--scene-gris); font-size: 13px; margin-top: 3px; }
.scene-resultat-liens { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; font-size: 13px; }

@media (max-width: 900px) {
    .scene-fiche { grid-template-columns: 1fr; gap: 40px; }
    .design-scene .scene-fiche-tete h1 { font-size: 46px; }
    .scene-resultats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
    .scene-fiche-tete { grid-template-columns: 1fr; padding: 28px 0 22px; gap: 20px; margin-bottom: 28px; }
    .scene-fiche-tete .scene-folio { display: none; }
    .scene-fiche-visuel { justify-content: start; }
    .scene-fiche-logo { max-height: 110px; }
    .scene-fiche-affiche { max-height: 260px; }
    .design-scene .scene-fiche-tete h1 { font-size: 38px; letter-spacing: -1.2px; }
    .scene-fiche-accent { font-size: 19px; }
    .scene-couverture { height: 160px; margin-top: 16px; }
    .scene-cartes-2, .scene-videos, .scene-resultats { grid-template-columns: 1fr; }
    .scene-lexique-lettre { grid-template-columns: 1fr; gap: 6px; }
    .scene-lexique-initiale { font-size: 48px; }
    .scene-chapeau { font-size: 19px; }
    .scene-lecture { font-size: 16px; }
    .design-scene .scene-lecteur-outils .navbar-nav-textes a { padding: 10px 11px; }
    .scene-toolbar-collante { position: static; }
    .scene-precedent-suivant { grid-template-columns: 1fr 1fr; }
    .scene-precedent-suivant > .scene-lien { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- 5. Habillage des pages existantes (Bootstrap + classes du site) ---------- */
.design-scene .container, .design-scene .container-xxl.troupe-gestion,
.design-scene .container-fluid.footer .container { max-width: 1280px; padding-left: 48px; padding-right: 48px; }

.design-scene h1, .design-scene h2, .design-scene h3, .design-scene h4,
.design-scene .h1, .design-scene .h2, .design-scene .h3 { font-family: var(--scene-serif); font-weight: normal; letter-spacing: -.5px; }
.design-scene h1, .design-scene .h1 { letter-spacing: -1.5px; }
.design-scene .typo { font-family: var(--scene-serif); }
.design-scene h1.typo, .design-scene h2.typo { font-style: normal; }
.design-scene .bold, .design-scene b, .design-scene strong { font-weight: bold; }

/* couleurs de l'ancienne charte ramenées à la nouvelle */
.design-scene .text-rouge, .design-scene .orange { color: var(--scene-rouge) !important; }
.design-scene .text-jaune { color: var(--scene-ocre) !important; }
.design-scene .bg-rouge { background-color: var(--scene-rouge) !important; }
.design-scene .bg-jaune { background-color: #d9b75d !important; }
.design-scene .bg-jaune-light { background-color: var(--scene-sauge) !important; }
.design-scene .border-rouge { border-color: var(--scene-rouge) !important; }
.design-scene .border-jaune { border-color: var(--scene-ocre) !important; }
.design-scene .text-muted { color: var(--scene-gris) !important; }

/* boutons : à plat, angles droits */
.design-scene .btn { border-radius: 0 !important; }
.design-scene .btn-orange {
    --bs-btn-bg: var(--scene-rouge); --bs-btn-border-color: var(--scene-rouge);
    --bs-btn-hover-bg: var(--scene-encre); --bs-btn-hover-border-color: var(--scene-encre); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--scene-encre); --bs-btn-active-border-color: var(--scene-encre);
    --bs-btn-disabled-bg: var(--scene-rouge); --bs-btn-disabled-border-color: var(--scene-rouge);
}
.design-scene .btn-jaune { background-color: var(--scene-encre) !important; border-color: var(--scene-encre) !important; color: var(--scene-papier) !important; }
.design-scene .btn-jaune:hover { background-color: var(--scene-rouge) !important; border-color: var(--scene-rouge) !important; color: #fff !important; }
.design-scene .btn-outline-primary { --bs-btn-bg: transparent; --bs-btn-color: var(--scene-encre); --bs-btn-border-color: var(--scene-encre); --bs-btn-hover-bg: var(--scene-encre); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--scene-rouge); --bs-btn-active-border-color: var(--scene-rouge); }
/* étiquettes (axes d'exercices, thèmes de textes…) : pastilles fines comme les filtres de la maquette */
.design-scene .btn-tag { background: transparent !important; color: var(--scene-encre) !important; border: 1px solid var(--scene-trait) !important; border-radius: 20px !important; font-size: 13px; letter-spacing: .5px; text-transform: uppercase; }
.design-scene .btn-tag:hover { background: var(--scene-encre) !important; color: #fff !important; border-color: var(--scene-encre) !important; }

/* cartes : filet, sans ombre ni arrondi, légère élévation au survol */
.design-scene .card { background: transparent; border: 1px solid var(--scene-trait); border-radius: 0 !important; box-shadow: none; transition: transform .2s, background .2s; }
.design-scene .card.cursor-pointer:hover { transform: translateY(-4px); background: var(--scene-papier-clair); }
.design-scene .card-header, .design-scene .card-footer { background: transparent; border-color: var(--scene-trait); border-radius: 0 !important; box-shadow: none !important; }
.design-scene .card-header h3, .design-scene .card-header h3 a { font-family: var(--scene-serif); }
.design-scene .card-header h3 { font-size: 1.55rem; }
.design-scene .troupe-gestion .card-header h3, .design-scene .compte .card-header h3, .design-scene .card-header h3.fs1-2, .design-scene .card-header h2 { font-size: 1.25rem; }
.design-scene .card-footer { font-size: 13px; }
.design-scene .card.bg-white, .design-scene .bg-white.card { background: var(--scene-papier-clair) !important; }
/* cartes de formulaire (compte, gestion de troupe, ajout de troupe ou de salle…) : fond blanc, pour bien détacher la zone de saisie du fond papier */
.design-scene .card:has(.form-control, .form-select, .form-check-input, .troupe-editor, .ProseMirror, [contenteditable="true"]) { background: #fff !important; }
.design-scene .card:has(.form-control, .form-select, .form-check-input, .troupe-editor, .ProseMirror, [contenteditable="true"]) > .card-header,
.design-scene .card:has(.form-control, .form-select, .form-check-input, .troupe-editor, .ProseMirror, [contenteditable="true"]) > .card-footer { background: #fff; }
.design-scene .shadow, .design-scene .shadow-sm { box-shadow: none !important; }
.design-scene .rounded-4, .design-scene .rounded-3 { border-radius: 0 !important; }
.design-scene .rounded-full.btn-comment { border-radius: 50% !important; }
/* bouton du compte (avatar + pseudo) : pastille sans bordure, fond léger au survol et menu ouvert */
.design-scene .scene-outils .dropdown-toggle.btn-comment { border: 0 !important; border-radius: 30px !important; box-shadow: none !important; padding: 4px 12px 4px 4px; }
.design-scene .scene-outils .dropdown-toggle.btn-comment:hover, .design-scene .scene-outils .dropdown-toggle.btn-comment.show { background: rgba(37, 37, 31, .06); opacity: 1; }
/* menu du compte : calé sur le bord droit du contenu, sous l'en-tête */
.design-scene .scene-outils .user-menu { right: 48px !important; left: auto !important; top: calc(100% - 10px) !important; margin-top: 0; min-width: 240px; }
@media (max-width: 900px) { .design-scene .scene-outils .user-menu { right: 25px !important; } }
/* les rubriques passent sous le logo : le menu s'ouvre sous la première ligne (celle du bouton), pas sous les rubriques */
@media (max-width: 899px) { .design-scene .scene-outils .user-menu { top: 70px !important; } }
@media (max-width: 620px) { .design-scene .scene-outils .user-menu { right: 16px !important; top: 64px !important; } }


/* formulaires */
.design-scene .form-control, .design-scene .form-select, .design-scene .input-group-text { border-radius: 0 !important; border-color: var(--scene-trait-champ); background-color: #fff !important; }
.design-scene .form-check-input { border-color: var(--scene-trait-champ); background-color: #fff; }
.design-scene .form-check-input:focus { border-color: var(--scene-encre); box-shadow: 0 0 0 3px rgba(195, 55, 37, .2); }
.design-scene .form-check-input:checked { background-color: var(--scene-rouge); border-color: var(--scene-rouge); }

/* listes, onglets, pagination, menus, fenêtres */
.design-scene .list-group-item { background: transparent; border-color: var(--scene-trait); }
.design-scene .list-group-item.active { background: var(--scene-encre); border-color: var(--scene-encre); color: var(--scene-papier); }
.design-scene .nav-tabs .nav-link, .design-scene .nav-pills .nav-link { border-radius: 0; }
.design-scene .nav-pills .nav-link.active { background: var(--scene-encre); color: var(--scene-papier) !important; }
.design-scene .pagination { --bs-pagination-bg: transparent; --bs-pagination-border-color: var(--scene-trait); --bs-pagination-color: var(--scene-encre); --bs-pagination-hover-color: var(--scene-rouge); --bs-pagination-hover-bg: var(--scene-papier-clair); --bs-pagination-active-bg: var(--scene-encre); --bs-pagination-active-border-color: var(--scene-encre); --bs-pagination-border-radius: 0; --bs-pagination-focus-box-shadow: none; }
.design-scene .dropdown-menu { background: var(--scene-papier-clair); border: 1px solid var(--scene-trait); border-radius: 0; }
.design-scene .dropdown-item.active, .design-scene .dropdown-item:active { background: var(--scene-encre); }
.design-scene .modal-content { background: var(--scene-papier); border-radius: 0; border: 1px solid var(--scene-trait); }
.design-scene .badge.bg-rouge { background: var(--scene-rouge) !important; }

/* bandeau d'incitation à l'inscription : bande sauge de la maquette */
.design-scene .bandeau-inscription { background: var(--scene-sauge); border: 0; padding: 18px 24px !important; }
.design-scene .bandeau-inscription b { font: normal 17px var(--scene-serif); }

.design-scene hr { border-color: var(--scene-trait); opacity: 1; }

/* ---------- Écrans moyens et petits ---------- */
@media (max-width: 900px) {
    .scene-wrap, .design-scene .container, .design-scene .container-xxl.troupe-gestion, .design-scene .container-fluid.footer .container { padding-left: 25px; padding-right: 25px; }
    .scene-hero { gap: 25px; }
    .design-scene .scene-hero-titre { font-size: 62px; }
    .scene-affiche { min-height: 370px; }
    .scene-bibliotheque { grid-template-columns: 220px 1fr; }
    .scene-pied-haut { grid-template-columns: 1fr; gap: 25px; }
}
@media (max-width: 620px) {
    .scene-wrap, .design-scene .container, .design-scene .container-xxl.troupe-gestion, .design-scene .container-fluid.footer .container { padding-left: 16px; padding-right: 16px; }
    .scene-entete { padding: 14px 0; }
    .scene-marque { font-size: 24px; }
    .scene-marque small { font-size: 9px !important; letter-spacing: 2px; }
    .scene-outils .btn-orange { padding: 7px 11px; }
    .scene-hero { grid-template-columns: 1fr; padding: 25px 0 35px; gap: 30px; }
    .design-scene .scene-hero-titre { font-size: 46px; letter-spacing: -1.5px; }
    .scene-affiche { min-height: 330px; width: 92%; margin: auto; }
    .scene-affiche-mot { font-size: clamp(48px, 17vw, 70px); padding: 26px 0 36px; }
    .scene-recherche { display: block; }
    .scene-recherche label { font-size: 21px; white-space: normal; }
    .scene-pagehero-titre { overflow-wrap: anywhere; }
    .scene-recherche-champ { margin-top: 10px; }
    .scene-acces { grid-template-columns: 1fr 1fr; gap: 25px; }
    .scene-acces a:nth-child(3) { border: 0; padding-left: 0; }
    .scene-acces a { padding: 0 0 0 16px; }
    .scene-acces strong { font-size: 20px; }
    .scene-cartes { grid-template-columns: 1fr; }
    .scene-section { padding: 38px 0; }
    .scene-section-tete h2 { font-size: 30px; }
    .scene-lien { white-space: nowrap; font-size: 13px; }
    .scene-impro, .scene-bibliotheque, .scene-communaute { grid-template-columns: 1fr; gap: 20px; }
    .scene-impro { padding: 25px; }
    .scene-impro-demo { border-left: 0; border-top: 1px solid #c0c6b5; padding: 20px 0 0; }
    .scene-livre { gap: 15px; }
    .scene-pied-colonnes { grid-template-columns: 1fr; gap: 0; }
    .scene-pied-presentations { grid-template-columns: 1fr; gap: 22px; }
    .design-scene h1 { font-size: 2.1rem; }
}
@media (prefers-reduced-motion: reduce) {
    .scene-carte, .design-scene .card { transition: none; }
}

/* hauteur de l'en-tête fixé, pour ce qui se colle dessous (outils du lecteur, lettres du lexique, personnages) */
@media (max-width: 899px) { .design-scene { --scene-haut-entete: 130px; } }
@media (max-width: 620px) { .design-scene { --scene-haut-entete: 0px; } }

/* fil d'Ariane (design « scene ») : discret, au-dessus du bandeau de page */
.design-scene .breadcrumb { font-size: 13px; letter-spacing: .3px; text-transform: none; padding-top: 18px; margin: 0; --bs-breadcrumb-divider-color: var(--scene-trait); }
.design-scene .breadcrumb-item a { color: var(--scene-gris); }
.design-scene .breadcrumb-item a:hover { color: var(--scene-rouge); }
.design-scene .breadcrumb-item + .breadcrumb-item::before { content: "/"; color: var(--scene-trait); }
.design-scene .breadcrumb + * { margin-top: 0; }
.design-scene .scene-pagehero, .design-scene .scene-fiche-tete { padding-top: 22px; }

/* bouton de retour en haut de page ; sur la fiche texte en mobile, il se place au-dessus du bouton des personnages */
.scene-haut-de-page { position: fixed; right: 22px; bottom: 22px; z-index: 1019; width: 46px; height: 46px; border: 0; border-radius: 50%; background: #3a3a33; color: var(--scene-papier); font-size: 20px; line-height: 1; box-shadow: 4px 5px 0 #e6e1d6; }
.scene-haut-de-page:hover { background: var(--scene-rouge); }
.scene-haut-de-page { opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s, background .2s; }
.scene-haut-de-page-visible { opacity: 1; visibility: visible; }
@media (max-width: 991px) {
    body:has(.scene-bouton-flottant) .scene-haut-de-page { bottom: 86px; right: 22px; }
}

/* menu du compte (design « scene ») : sobre, sans icônes, rubriques titrées comme les pages */
.design-scene .scene-menu-compte { width: 290px; padding: 0; background: var(--scene-papier-clair); border: 1px solid var(--scene-trait); border-radius: 0; box-shadow: 8px 10px 0 #e6e1d6 !important; font-size: 15px; }
.scene-menu-compte .dropdown-item { padding: 0; background: none; white-space: normal; color: var(--scene-encre); }
.scene-menu-compte .dropdown-item:hover, .scene-menu-compte .dropdown-item:focus { background: none; color: var(--scene-rouge); }
.scene-menu-compte-tete { display: flex; align-items: center; gap: 12px; padding: 18px 20px 16px; border-bottom: 1px solid var(--scene-trait); }
.scene-menu-compte-tete img, .scene-menu-compte-tete .avatar-defaut { flex-shrink: 0; border-radius: 50%; }
.scene-menu-compte-tete strong { font: normal 19px/1.2 var(--scene-serif); }
.scene-menu-compte-tete .dropdown-item { font-size: 13px; color: var(--scene-gris); display: inline; }
.scene-menu-compte-bloc { padding: 16px 20px 12px; border-bottom: 1px solid var(--scene-trait); }
.scene-menu-compte-bloc .scene-eyebrow { margin-bottom: 8px; }
.scene-menu-compte-bloc nav { display: flex; flex-direction: column; }
.scene-menu-compte-bloc nav .dropdown-item { padding: 6px 0; }
.scene-menu-compte-bloc nav .dropdown-item.active { color: var(--scene-rouge); background: none; }
.scene-menu-compte-troupe { display: flex !important; align-items: center; gap: 10px; min-width: 0; }
.scene-menu-compte-troupe img, .scene-menu-compte-troupe > span[aria-hidden] { flex-shrink: 0; width: 26px; height: 26px; object-fit: cover; border: 1px solid var(--scene-trait); }
.scene-menu-compte-troupe > span[aria-hidden] { display: grid; place-items: center; background: var(--scene-sauge); font: italic 14px var(--scene-serif); color: var(--scene-encre); }
.scene-menu-compte .scene-menu-compte-toutes { font-size: 13px; color: var(--scene-gris); }
.scene-menu-compte-pied { padding: 12px 20px 14px; }
.scene-menu-compte-pied .dropdown-item { font-size: 13px; color: var(--scene-gris); }
/* avatar par défaut (membre sans photo) : aux couleurs du design « scene » */
.design-scene .avatar-defaut { background: var(--scene-sauge); color: #5f6558; border-color: var(--scene-trait) !important; }

/* ---------- carrousel d'ouverture de l'accueil ---------- */
.scene-carrousel { position: relative; }
.scene-carrousel-diapos { display: grid; }
/* diapositives empilées dans la même case : la hauteur est celle de la plus haute, rien ne saute en changeant */
.scene-diapo { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility .7s; }
.scene-diapo.active { opacity: 1; visibility: visible; }
.scene-diapo .scene-affiche { transition: transform .9s ease; }
.scene-diapo:not(.active) .scene-affiche { transform: rotate(5deg) translateY(12px); }
.design-scene .scene-diapo-long .scene-hero-titre { font-size: clamp(36px, 3.6vw, 54px); letter-spacing: -1.5px; line-height: 1.08; }

/* variantes d'affiche */
.scene-affiche-sauge { background: var(--scene-sauge); color: var(--scene-encre); transform: rotate(-2deg); }
.scene-affiche-sauge::before { border-color: #b3bba1; }
.scene-affiche-sauge .scene-affiche-mot { color: #3d4a35; }
.scene-affiche-encre { background: #3a3a33; color: var(--scene-papier); transform: rotate(1.5deg); }
.scene-affiche-encre::before { border-color: #6b6b60; }
.scene-affiche-encre .scene-asterisque { color: var(--scene-rouge-clair); }
.scene-affiche-photo .scene-affiche-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.25) contrast(1.05); }
.scene-affiche-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(37, 37, 31, .55) 0%, rgba(37, 37, 31, .15) 40%, rgba(37, 37, 31, .75) 100%); }
.scene-affiche-photo::before { z-index: 1; border-color: rgba(246, 243, 235, .45); }
.scene-affiche-photo > *:not(.scene-affiche-image) { position: relative; z-index: 2; }

/* commandes : onglets numérotés avec barre de progression, flèches, pause */
.scene-carrousel-controles { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: -18px 0 26px; }
.scene-carrousel-onglets { display: flex; gap: 26px; }
.scene-carrousel-onglet { position: relative; background: none; border: 0; padding: 6px 0 10px; font-size: 13px; color: var(--scene-gris); letter-spacing: .5px; }
.scene-carrousel-onglet > span:first-child { color: var(--scene-rouge); margin-right: 4px; }
.scene-carrousel-onglet.active { color: var(--scene-encre); }
.scene-carrousel-onglet:hover { color: var(--scene-rouge); }
.scene-carrousel-barre { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--scene-trait); overflow: hidden; }
.scene-carrousel-barre::after { content: ""; position: absolute; inset: 0; background: var(--scene-rouge); transform: scaleX(0); transform-origin: left; }
/* la barre de l'onglet actif se remplit en 7 s ; à la fin de son animation, la diapositive suivante s'affiche */
.scene-carrousel-onglet.active .scene-carrousel-barre::after { animation: scene-carrousel-remplir 7s linear forwards; }
/* pause (survol, clavier, bouton) : la barre s'arrête et reprend là où elle en était */
.scene-carrousel.en-pause .scene-carrousel-onglet.active .scene-carrousel-barre::after { animation-play-state: paused; }
@keyframes scene-carrousel-remplir { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.scene-carrousel-fleches { display: flex; gap: 8px; }
.scene-carrousel-fleches button { width: 40px; height: 40px; border: 1px solid var(--scene-trait-champ); background: transparent; color: var(--scene-encre); font-size: 16px; line-height: 1; }
.scene-carrousel-fleches button:hover { background: var(--scene-encre); color: #fff; border-color: var(--scene-encre); }

@media (max-width: 620px) {
    /* mobile : onglets et flèches au-dessus des diapositives (sinon ils tombent sous l'écran), affiche plus basse */
    .scene-carrousel { display: flex; flex-direction: column-reverse; }
    .scene-carrousel-controles { margin: 18px 0 0; flex-wrap: nowrap; gap: 10px; }
    .scene-carrousel-fleches button { width: 34px; height: 34px; }
    .scene-diapo .scene-affiche { min-height: 280px; }
    .scene-diapo .scene-affiche-mot { font-size: clamp(44px, 14vw, 60px); padding: 18px 0 26px; }
    .scene-carrousel-onglets { gap: 16px; overflow-x: auto; scrollbar-width: none; }
    .scene-carrousel-onglet { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
    .scene-diapo, .scene-diapo .scene-affiche { transition: none; }
    .scene-carrousel-barre::after { animation: none !important; }
    .scene-carrousel-onglet.active .scene-carrousel-barre::after { transform: scaleX(1); }
}

/* générateur d'improvisation : le tirage à gauche (lu de haut en bas), les commandes à droite */
.scene-generateur { grid-template-columns: minmax(0, 1fr) 300px; gap: 50px; align-items: start; }
.scene-tirage-situation { background: var(--scene-sauge); padding: 30px 34px; }
.scene-tirage-situation > p { font: 30px/1.3 var(--scene-serif); margin: 12px 0 18px; }
.scene-tirage-lieu { font: italic 20px var(--scene-serif); border-top: 1px solid #c0c6b5; padding-top: 14px; }
.scene-tirage-lieu span { font: normal 13px var(--scene-sans); letter-spacing: 1.3px; text-transform: uppercase; color: #5f6558; margin-right: 12px; }
.scene-tirage-groupe { margin-top: 30px; }
.scene-tirage-groupe .scene-eyebrow { margin-bottom: 14px; }
.scene-tirage-personnages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.scene-tirage-personnage { position: relative; border: 1px solid var(--scene-trait); background: var(--scene-papier-clair); padding: 20px 20px 18px; }
.scene-tirage-num { position: absolute; top: 12px; right: 16px; font: italic 22px var(--scene-serif); color: var(--scene-rouge); }
.scene-tirage-personnage strong { display: block; font: normal 22px/1.2 var(--scene-serif); padding-right: 24px; }
.scene-tirage-personnage em { display: block; margin-top: 6px; font-size: 15px; color: var(--scene-gris); }
.scene-tirage-objets { display: flex; flex-wrap: wrap; gap: 10px; }
.scene-tirage-objets span { border: 1px solid var(--scene-encre); padding: 9px 16px; font: normal 18px var(--scene-serif); }
.scene-tirage-commandes { position: sticky; top: calc(var(--scene-haut-entete) + 20px); border: 1px solid var(--scene-trait); background: var(--scene-papier-clair); padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.scene-tirage-commandes .scene-timer { margin: 0; font-size: 56px; line-height: 1; }
.scene-tirage-duree { font-size: 13px; }
.scene-tirage-duree select { display: block; width: 100%; margin-top: 6px; padding: 10px; border: 1px solid var(--scene-trait-champ); background: #fff; color: var(--scene-encre); }
.scene-tirage-boutons { display: flex; flex-wrap: wrap; gap: 8px; }
.scene-tirage-commandes hr { margin: 4px 0; }
.scene-tirage-commandes .scene-btn { justify-content: space-between; }
@media (max-width: 900px) {
    .scene-generateur { grid-template-columns: 1fr; gap: 30px; }
    .scene-tirage-commandes { position: static; }
}
@media (max-width: 620px) {
    .scene-tirage-situation { padding: 22px; }
    .scene-tirage-situation > p { font-size: 24px; }
    .scene-tirage-personnages { grid-template-columns: 1fr; gap: 10px; }
}
.scene-tirage-contrainte { margin-top: 16px; border-left: 3px solid var(--scene-rouge); background: var(--scene-papier-clair); padding: 16px 22px; border-top: 1px solid var(--scene-trait); border-right: 1px solid var(--scene-trait); border-bottom: 1px solid var(--scene-trait); }
.scene-tirage-contrainte p { margin: 8px 0 0; font: italic 21px/1.35 var(--scene-serif); }
.scene-tirage-contrainte p { font-style: normal; font-size: 24px; }
.scene-tirage-contrainte small { display: block; margin-top: 4px; font: italic 17px/1.45 var(--scene-serif); color: var(--scene-gris); }

/* fenêtres (connexion…) : papier, angles droits, ombre décalée de l'affiche */
.design-scene .modal-backdrop.show { opacity: .55; background: #25251f; }
.scene-modal .modal-content { background: var(--scene-papier); border: 1px solid var(--scene-trait); border-radius: 0; box-shadow: 10px 12px 0 rgba(37, 37, 31, .25); overflow: hidden; }
.scene-modal-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 26px 30px 0; }
.scene-modal-tete h2 { font: normal 32px/1.1 var(--scene-serif); letter-spacing: -1px; margin: 10px 0 0; }
.scene-modal-corps { padding: 22px 30px 26px; }
.scene-modal-corps .form-label { font-size: 14px; font-weight: bold; margin-bottom: 6px; }
.scene-modal-corps .form-control { padding: 11px 14px; }
.scene-modal-corps .form-check-label { font-size: 14px; }
.scene-modal-actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; margin-top: 22px; }
.scene-modal-note { background: var(--scene-sauge); border-left: 3px solid var(--scene-rouge); padding: 12px 16px; font-size: 14px; margin-bottom: 18px; }
.scene-modal-erreur { color: var(--scene-rouge); font-size: 14px; font-weight: bold; margin: 0 0 10px; }
.scene-modal-encart { background: var(--scene-sauge); padding: 22px 30px 26px; border-top: 1px solid #c0c6b5; }
.scene-modal-encart h3 { font: normal 22px var(--scene-serif); margin: 0 0 6px; }
.scene-modal-encart p { font-size: 14px; color: #4f5548; margin-bottom: 14px; }
@media (max-width: 620px) {
    .scene-modal-tete, .scene-modal-corps, .scene-modal-encart { padding-left: 20px; padding-right: 20px; }
    .scene-modal-tete h2 { font-size: 27px; }
}

/* boutons et alertes Bootstrap restés aux couleurs de l'ancien site */
.design-scene .btn-primary { --bs-btn-bg: var(--scene-rouge); --bs-btn-border-color: var(--scene-rouge); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--scene-encre); --bs-btn-hover-border-color: var(--scene-encre); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--scene-encre); --bs-btn-active-border-color: var(--scene-encre); --bs-btn-disabled-bg: var(--scene-rouge); --bs-btn-disabled-border-color: var(--scene-rouge); }
.design-scene .btn-danger { --bs-btn-bg: transparent; --bs-btn-color: var(--scene-rouge); --bs-btn-border-color: var(--scene-rouge); --bs-btn-hover-bg: var(--scene-rouge); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: var(--scene-rouge); }
.design-scene .btn-light { --bs-btn-bg: transparent; --bs-btn-border-color: var(--scene-trait-champ); --bs-btn-hover-bg: var(--scene-encre); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: var(--scene-encre); }
.design-scene .alert { border-radius: 0 !important; border: 0; border-left: 3px solid; font-size: 14px; }
.design-scene .alert-info, .design-scene .alert-success { --bs-alert-bg: var(--scene-sauge); --bs-alert-color: var(--scene-encre); border-left-color: #879478; }
.design-scene .alert-warning { --bs-alert-bg: #f3ead3; --bs-alert-color: var(--scene-encre); border-left-color: var(--scene-ocre); }
.design-scene .alert-danger { --bs-alert-bg: #f6e4df; --bs-alert-color: #7a2418; border-left-color: var(--scene-rouge); }

/* pages courtes centrées (mot de passe, invitation, désinscription…) */
.scene-page-etroite { max-width: 560px; margin: 0 auto; padding: 40px 0 20px; }
.design-scene .scene-page-etroite-titre { font: normal 46px/1.08 var(--scene-serif); letter-spacing: -1.6px; margin: 16px 0 24px; }
.scene-page-etroite > p { color: var(--scene-gris); }
.design-scene .scene-carte-formulaire { background: #fff !important; margin-top: 6px; }
.scene-carte-formulaire .card-body { padding: 26px 28px; }
.scene-carte-formulaire .form-label { font-size: 14px; font-weight: bold; }
.scene-regles-mdp { list-style: none; padding: 0; margin: 10px 0 0; font-size: 13px; color: var(--scene-gris); }
.scene-regles-mdp li.ok { color: #3d6b35; }
@media (max-width: 620px) { .design-scene .scene-page-etroite-titre { font-size: 36px; } .scene-page-etroite { padding-top: 24px; } }
.scene-invitation-logo { max-height: 110px; margin-bottom: 24px; }
.scene-page-etroite-titre em { color: var(--scene-rouge); }
.scene-invitation-texte { font-size: 17px; }
/* demande de disponibilités publique : alignée sur la largeur du site (la vue fixe 1100 px en ligne) */
.design-scene .troupe-gestion-fond > .container[style] { max-width: 1280px !important; }

/* pages légales (CGU, confidentialité, mentions) : colonne de lecture, titre à gauche, intertitres mesurés */
.design-scene .container.max-width-tl, .design-scene .container:has(> h1.couleur) { max-width: 860px; font-size: 16px; line-height: 1.75; padding-bottom: 20px; }
.design-scene .container.max-width-tl > h1.titre, .design-scene .container > h1.couleur { text-align: left !important; font: normal 46px/1.1 var(--scene-serif); letter-spacing: -1.6px; margin: 34px 0 12px; color: var(--scene-encre); }
.design-scene .container.max-width-tl > h2, .design-scene .container:has(> h1.couleur) > h2 { font-size: 26px; margin-top: 2.4rem !important; }
.design-scene .container.max-width-tl > h3 { font-size: 20px; }
.design-scene .container.max-width-tl a, .design-scene .container:has(> h1.couleur) a { color: var(--scene-rouge); }
@media (max-width: 620px) { .design-scene .container.max-width-tl > h1.titre, .design-scene .container > h1.couleur { font-size: 34px; } }
.scene-accueil-pastilles { margin: -8px 0 22px; }

/* accueil, colonne des troupes : chiffres, villes, ajout ; fixe pendant le défilement de la liste */
.scene-communaute > div:first-child { align-self: start; position: sticky; top: calc(var(--scene-haut-entete) + 24px); }
.scene-chiffres { display: flex; gap: 34px; margin: 22px 0 26px; padding: 16px 0; border-top: 1px solid var(--scene-trait); border-bottom: 1px solid var(--scene-trait); }
.scene-chiffres strong { display: block; font: italic 44px/1 var(--scene-serif); color: var(--scene-rouge); }
.scene-chiffres span { font-size: 13px; letter-spacing: 1.3px; text-transform: uppercase; }
.scene-communaute .scene-filtres { margin: 12px 0 26px; }
.scene-communaute-ajout { margin-top: 18px; font-size: 14px; }
@media (max-width: 620px) { .scene-communaute > div:first-child { position: static; } }

/* page « Gérer sa troupe » */
.scene-avantages-hero { padding-top: 30px; }
.scene-avantages { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.scene-avantage { position: relative; border: 1px solid var(--scene-trait); background: var(--scene-papier-clair); padding: 28px 30px 24px; scroll-margin-top: calc(var(--scene-haut-entete) + 20px); }
.scene-avantage h3 { font: normal 28px/1.15 var(--scene-serif); margin: 0 50px 10px 0; }
.scene-avantage > p { color: var(--scene-gris); margin-bottom: 14px; }
.scene-avantage ul { list-style: none; padding: 0; margin: 0; font-size: 15px; }
.scene-avantage li { padding: 7px 0 7px 22px; border-top: 1px solid var(--scene-trait); position: relative; }
.scene-avantage li::before { content: "—"; position: absolute; left: 0; color: var(--scene-rouge); }
.scene-avantage:last-child:nth-child(odd) { grid-column: 1 / -1; }
.scene-avantages-membre { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 30px; }
.scene-avantages-membre > div { border-top: 1px solid var(--scene-trait); padding: 18px 0 22px; }
.scene-avantages-membre h3 { font: normal 21px/1.2 var(--scene-serif); margin: 0 0 8px; }
.scene-avantages-membre p { font-size: 14px; color: var(--scene-gris); margin: 0; }
.scene-faq details { border-top: 1px solid var(--scene-trait); padding: 16px 0; max-width: 820px; }
.scene-faq details:last-of-type { border-bottom: 1px solid var(--scene-trait); }
.scene-faq summary { font: normal 21px var(--scene-serif); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 20px; }
.scene-faq summary::-webkit-details-marker { display: none; }
.scene-faq summary::after { content: "+"; color: var(--scene-rouge); font-family: var(--scene-sans); }
.scene-faq details[open] summary::after { content: "−"; }
.scene-faq details p { margin: 10px 0 0; color: var(--scene-gris); max-width: 680px; }
.scene-avantages-fin { background: var(--scene-encre); color: var(--scene-papier); }
.scene-avantages-fin p { color: #c9c6bb; }
.scene-avantages-fin .scene-btn:hover { background: var(--scene-papier); color: var(--scene-encre) !important; }
@media (max-width: 900px) { .scene-avantages-membre { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
    .scene-avantages, .scene-avantages-membre { grid-template-columns: 1fr; }
    .scene-avantage { padding: 22px 20px; }
    .scene-avantage h3 { font-size: 24px; }
}

/* rangées de boutons (bouton principal + bouton à contour) : même hauteur, alignés en haut */
.scene-fiche-actions { align-items: stretch; }
.design-scene .scene-fiche-actions .scene-btn { margin-top: 0; }
.scene-fiche-actions .scene-outline { display: inline-flex; align-items: center; padding: 14px 20px; font-size: 13px; }