/* L'atelier, deux sens (fondations du moteur de chat) :
   - par défaut, la conversation occupe la page et le site vit dans la fenêtre « Mon site », celle de
     l'interface de modification (banc-connecteur/service : fenêtre déplaçable et réductible sur
     ordinateur, feuille du bas sur téléphone) ;
   - « plein écran » (body.plein) échange les rôles : le site en grand, la conversation en fenêtre.
     Échap revient. Le sens, la position et l'état réduit sont gardés d'une visite à l'autre (app.js). */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--police); font-size: var(--t-courant); color: var(--texte); background: var(--fond); overflow: hidden; -webkit-font-smoothing: antialiased; }
button, input, textarea { font: inherit; color: inherit; }

/* ---------- La conversation, en page ---------- */
.assistant { position: fixed; z-index: 1; inset: 0; right: var(--place, 0px); left: var(--place-g, 0px); display: flex; flex-direction: column; background: var(--fond); transition: right 360ms var(--courbe), left 360ms var(--courbe), opacity 320ms var(--courbe); }
.assistant--hors { opacity: 0; }
.assistant__poignee, .assistant__barre { display: none; }
.assistant__fil, .assistant__ecran { width: 100%; max-width: var(--col); margin: 0 auto; }
.assistant__fil { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 32px 24px 8px; display: flex; flex-direction: column; gap: 10px; }
.assistant__fil::before { content: ""; flex: 1; }
.assistant__ecran { flex: none; padding: 12px 24px 24px; display: grid; gap: 10px; align-content: start; }
.assistant__ecran:empty { display: none; }
/* En page, toute la conversation défile d'un bloc, comme un chat : le fil puis ce qu'on peut répondre
   (miniatures, offres…). Avant, seul le fil défilait : au téléphone, l'écran du dessous le réduisait à
   rien et la conversation ne défilait plus (iPhone de Loïc, 10/11). */
/* En fenêtre aussi (site en plein écran) : UN SEUL modèle de défilement, partout. Avant, la fenêtre faisait défiler
   le fil seul, alors que le script (glisserEnBas, bas) fait défiler la conversation entière : à une étape à grand
   écran (les miniatures du style), le fil était réduit à 20 px, rien ne défilait, et le script poussait la barre
   hors de la fenêtre, qu'on ne pouvait donc plus déplacer (Loïc, 14/11 : « au moins la troisième fois »). La barre
   est collée en haut de la fenêtre : elle ne peut plus sortir. Contrôle : atelier/essais/fenetre-conversation.mjs. */
.assistant { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.assistant__fil { flex: 0 0 auto; min-height: auto; overflow: visible; }
body.plein .assistant__barre { position: sticky; top: 0; z-index: 4; background: var(--fond); }
/* Tant que la conversation est courte, elle se tient au milieu de la place libre (marges automatiques) ;
   quand elle grandit, les marges fondent et elle devient un fil classique, collé en bas (Loïc, 10/11). */
body:not(.plein) .assistant__fil::before { display: none; }
body:not(.plein) .assistant__fil { margin-top: var(--haut, 0px); transition: margin-top 350ms var(--courbe); }
body:not(.plein) .assistant__ecran { margin-bottom: 0; }
.assistant__ecran > * { animation: entre 300ms var(--courbe) both; }
.assistant .bulle { font-size: var(--t-texte); }

/* ---------- « Mon site » : la fenêtre ---------- */
.site { position: fixed; z-index: 8; top: 24px; right: 24px; bottom: 24px; width: clamp(420px, 46vw, 820px); display: flex; flex-direction: column; overflow: hidden; background: var(--fond); border: 1px solid var(--trait-fort); border-radius: 20px; box-shadow: var(--ombre-3), 0 30px 70px -24px rgba(20, 17, 15, .28); transition: opacity 320ms var(--courbe), transform 320ms var(--courbe); }
.site--hors { opacity: 0; transform: translateY(12px) scale(.98); }
.site--tire { transition: none; user-select: none; }
.site--tire .scene { pointer-events: none; }
.site__poignee { display: none; }
.site__barre { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--trait); cursor: grab; touch-action: none; user-select: none; }
.site--tire .site__barre { cursor: grabbing; }
.site__titre { min-width: 0; flex: 1; display: flex; align-items: baseline; gap: 10px; }
.site__titre b { font-family: var(--police-titre); font-weight: 700; font-size: 18px; white-space: nowrap; }
.site__note { font-size: 12px; font-weight: 600; color: var(--texte-3); padding: 3px 9px; border-radius: 999px; background: var(--retrait); white-space: nowrap; }
.site__bouton { flex: none; width: 36px; height: 36px; display: grid; place-items: center; color: var(--texte-2); background: none; border: 0; border-radius: var(--r-controle); cursor: pointer; }
.site__bouton:hover { color: var(--texte); background: var(--retrait); }
.site__bouton:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
/* Les huit poignées (.bord, moteur-chat/navigateur/fenetres.css) : sur ordinateur seulement, fenêtre ouverte. */
@media (min-width: 700px) {
  .site { transition: opacity 320ms var(--courbe), transform 320ms var(--courbe), height 320ms var(--courbe); }
  .site--reduit { top: auto !important; bottom: 24px !important; height: auto !important; }
}
.site--tire { transition: none !important; }
body.plein .site > .bord, .site--reduit > .bord { display: none; }
.assistant--tire { transition: none !important; user-select: none; }
body.plein .assistant__barre { cursor: grab; touch-action: none; user-select: none; }
.site--reduit { top: auto !important; height: auto; }
.site--reduit .scene { display: none; }
.site--reduit .site__barre { border-bottom: 0; }

/* Le site dans la fenêtre : rendu à la largeur d'un ordinateur puis réduit (app.js > ajuster : --rendu,
   --echelle), pour qu'on voie le vrai site et pas sa version téléphone ; en plein écran, à sa taille. */
.scene { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--retrait); }
.cadre { position: absolute; top: 0; left: 0; z-index: 0; width: var(--rendu, 100%); height: max(calc(100% / var(--echelle, 1)), var(--haut-min, 0px)); transform: scale(var(--echelle, 1)); transform-origin: 0 0; border: 0; background: #fff; opacity: 0; pointer-events: none; transition: opacity 380ms var(--courbe); }
/* Le cadre visible au-dessus ; l'ancien est retiré après le fondu (sur iPhone, un cadre transparent
   resté au-dessus prenait le doigt : le site ne défilait qu'une fois sur deux, Loïc 10/11). */
.cadre.visible { z-index: 1; opacity: 1; pointer-events: auto; }
.scene__attente { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--texte-3); font-size: var(--t-petit); transition: opacity 300ms; }
.scene__attente.fini { opacity: 0; pointer-events: none; }
/* La vue (les cadres y sont) : toute la scène ; en mode téléphone (app.js > ajuster : --vue-*), un cadre
   de 390 px centré, coins arrondis, trait fin, sur le fond de l'assistant ; ni coque, ni encoche, ni ombre.
   Le passage d'un mode à l'autre glisse (largeur, position), seulement pendant la bascule. */
.vue { position: absolute; left: var(--vue-x, 0px); top: var(--vue-y, 0px); width: var(--vue-l, 100%); height: var(--vue-h, 100%); overflow: hidden; border-radius: 0; isolation: isolate; }
.vue::after { content: ""; position: absolute; inset: 0; z-index: 2; border: 1px solid transparent; border-radius: inherit; pointer-events: none; }
.scene--tel { background: var(--fond); }
.scene--tel .vue { border-radius: 18px; clip-path: inset(0 round 18px); }
.scene--tel .vue::after { border-color: var(--trait-fort); }
.scene--bascule, .scene--bascule .vue, .scene--bascule .vue::after { transition: background-color 300ms var(--courbe), left 300ms var(--courbe), top 300ms var(--courbe), width 300ms var(--courbe), height 300ms var(--courbe), border-radius 300ms var(--courbe), border-color 300ms var(--courbe); }
/* Le bouton téléphone / ordinateur : ordinateur seulement (au téléphone, le site est déjà à sa taille). */
@media (max-width: 699px) { .site__mobile { display: none; } }

/* ---------- Plein écran : le site en grand, la conversation en fenêtre ---------- */
body.plein .site { top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: auto !important; border-radius: 0; border-width: 0; box-shadow: none; }
body.plein .site__barre { cursor: default; }
/* En plein écran, le site remplit la page même pendant le style (sa hauteur fixe de 800 px ne sert qu'à la fenêtre). */
body.plein .scene:not(.scene--tel) .cadre { height: 100% !important; }
body.plein .assistant { inset: auto 24px 24px auto; width: 384px; max-height: min(640px, calc(100dvh - 96px)); z-index: 9; border: 1px solid var(--trait-fort); border-radius: 20px; box-shadow: var(--ombre-3), 0 30px 70px -24px rgba(20, 17, 15, .28); }
body.plein .assistant__barre { display: flex; flex: none; align-items: center; gap: 10px; padding: 8px 8px 8px 18px; border-bottom: 1px solid var(--trait); }
body.plein .assistant__barre b { flex: 1; font-family: var(--police-titre); font-weight: 700; font-size: 18px; }
body.plein .assistant__fil { padding: 16px 16px 4px; }
body.plein .assistant__fil::before { display: none; }
body.plein .assistant__ecran { padding: 10px 16px 16px; }
body.plein .assistant .bulle { font-size: var(--t-courant); }
body.plein .assistant--reduit .assistant__fil, body.plein .assistant--reduit .assistant__ecran { display: none; }
.assistant__reduire { flex: none; width: 36px; height: 36px; display: grid; place-items: center; color: var(--texte-2); background: none; border: 0; border-radius: var(--r-controle); cursor: pointer; }
.assistant__reduire:hover { color: var(--texte); background: var(--retrait); }

/* Les premiers écrans en miniatures, côte à côte : le vrai rendu réduit de chaque variante, chargé une
   fois ; au téléphone, une rangée qu'on fait défiler au doigt (jamais toute seule). */
.vignettes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.vignette { position: relative; display: grid; gap: 6px; padding: 6px 6px 8px; text-align: left; background: var(--surface); border: 1px solid var(--trait); border-radius: 14px; cursor: pointer; transition: border-color .15s; }
.vignette:hover { border-color: var(--trait-fort); }
.vignette[aria-pressed="true"] { border-color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); }
.vignette:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.vignette__cadre { position: relative; aspect-ratio: 16 / 11; overflow: hidden; border-radius: 9px; background: var(--retrait); isolation: isolate; clip-path: inset(0 round 9px); }
.vignette__cadre iframe { position: absolute; top: 0; left: 0; width: 1280px; height: 880px; border: 0; transform-origin: 0 0; pointer-events: none; }
.vignette__nom { padding: 0 4px; font-size: 13px; font-weight: 650; line-height: 1.3; }
.vignette__choisie { position: absolute; top: 12px; right: 12px; display: none; padding: 3px 9px; font-size: 12px; font-weight: 700; color: #fff; background: var(--orange); border-radius: 999px; }
.vignette[aria-pressed="true"] .vignette__choisie { display: block; }

/* Le fil */
.bulle { max-width: 92%; margin: 0; font-size: var(--t-courant); line-height: 1.45; animation: entre 300ms var(--courbe) both; }
.bulle--lui { align-self: flex-start; color: var(--texte); }
.bulle--lui + .bulle--toi, .bulle--toi + .bulle--lui { margin-top: 6px; }
.bulle--toi { align-self: flex-end; padding: 8px 14px; color: var(--texte); background: var(--orange-doux); border-radius: var(--r-bulle) var(--r-bulle) 6px var(--r-bulle); }
.ecrit { display: inline-flex; gap: 4px; padding: 8px 0; }
.ecrit i { width: 6px; height: 6px; border-radius: 50%; background: var(--texte-3); animation: point 1s infinite ease-in-out; }
.ecrit i:nth-child(2) { animation-delay: .15s; } .ecrit i:nth-child(3) { animation-delay: .3s; }
@keyframes entre { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes point { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* Ce qu'on peut répondre */
.boutons { display: flex; flex-wrap: wrap; gap: 8px; }
.boutons--grille { display: grid; grid-template-columns: 1fr 1fr; }
.bouton { min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; text-align: center; font-size: 15px; font-weight: 650; line-height: 1.2; color: var(--texte); background: var(--surface); border: 1px solid var(--trait-fort); border-radius: var(--r-controle); cursor: pointer; transition: background-color .15s, border-color .15s, transform .15s var(--courbe); }
.bouton:hover { border-color: var(--texte); }
.bouton:active { transform: translateY(1px); }
.bouton--principal { color: #fff; background: var(--orange); border-color: var(--orange); }
.bouton--principal:hover { background: var(--orange-fonce); border-color: var(--orange-fonce); }
.boutons--grille .bouton { font-size: 14px; padding: 6px 10px; }
.bouton:focus-visible, .champ:focus-visible, .palette:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.champ { width: 100%; min-height: 44px; padding: 0 12px; font-size: 16px; background: var(--surface); border: 1px solid var(--trait-fort); border-radius: var(--r-controle); }
.champ:focus { border-color: var(--texte); outline: none; }
.champ::placeholder { color: var(--texte-3); }
.saisie { display: grid; gap: 6px; }
.saisie__ligne { display: flex; gap: 8px; }
.saisie .champ { flex: 1; min-width: 0; }

/* Les palettes : deux pastilles et le nom */
.palettes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
/* Les couleurs sous les premiers écrans (13/11) : la phrase, les tuiles, la pipette ; à l'arrivée, la place gardée
   (rien ne saute) puis un fondu */
.couleurs { display: grid; gap: 8px; transition: opacity .3s ease; }
.couleurs__intro { margin: 4px 0 0; font-size: 15px; line-height: 1.45; color: var(--texte); }
.couleurs--attente { visibility: hidden; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .couleurs { transition: none; } }
/* Les tuiles à champ (l'étape « Tes réseaux », 14/11) : les tuiles des palettes, un logo à la place des pastilles ;
   le champ s'ouvre dessous */
.tuile-saisie__logo { display: grid; place-items: center; width: 26px; height: 26px; font-weight: 700; font-size: 15px; line-height: 1; color: var(--texte); }
.tuile-saisie__logo svg { width: 22px; height: 22px; }
.tuiles-saisie__champ { display: grid; gap: 6px; }
.tuiles-saisie__champ[hidden] { display: none; }
.tuiles-saisie__retirer { justify-self: start; }
.palette { display: grid; justify-items: center; gap: 6px; padding: 10px 4px 8px; font-size: 13px; font-weight: 600; color: var(--texte-2); background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r-controle); cursor: pointer; transition: border-color .15s; }
.palette:hover { border-color: var(--trait-fort); }
.palette[aria-pressed="true"] { color: var(--texte); border-color: var(--texte); box-shadow: inset 0 0 0 1px var(--texte); }
.palette__pastilles { display: flex; }
.palette__pastilles span { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--surface); }
.palette__pastilles span + span { margin-left: -8px; }

/* Les offres */
.offres { display: grid; gap: 8px; max-height: 38dvh; overflow-y: auto; overscroll-behavior: contain; padding: 2px; }
.offre { display: grid; grid-template-columns: 1fr 6.5rem 36px; gap: 6px; padding: 8px; background: var(--retrait); border-radius: var(--r-controle); animation: entre 260ms var(--courbe) both; }
.offre .champ { min-height: 40px; font-size: 15px; }
.offre .champ--phrase { grid-column: 1 / 3; }
.offre__retirer { grid-row: 1; grid-column: 3; width: 36px; height: 40px; display: grid; place-items: center; color: var(--texte-3); background: none; border: 0; border-radius: 8px; cursor: pointer; }
.offre__retirer:hover { color: var(--texte); background: var(--surface); }
.ajouter { justify-self: start; min-height: 40px; padding: 0 4px; font-size: 14px; font-weight: 650; color: var(--orange-fonce); background: none; border: 0; cursor: pointer; }
.ajouter:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Une section à lui */
.perso { display: grid; gap: 8px; }
.champ--long { min-height: 96px; padding: 10px 12px; resize: vertical; line-height: 1.45; font-family: inherit; }
.perso .bouton { justify-self: start; }

/* Réordonner : une ligne par section, une poignée ; la ligne tenue passe au-dessus */
.ordre { list-style: none; margin: 0; padding: 2px; display: grid; gap: 6px; max-height: 40dvh; overflow-y: auto; overscroll-behavior: contain; }
.ordre__ligne { position: relative; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 4px 0 10px; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r-controle); touch-action: none; user-select: none; animation: entre 260ms var(--courbe) backwards; }
.ordre__poignee { flex: none; display: grid; place-items: center; width: 24px; height: 36px; color: var(--texte-3); cursor: grab; }
.ordre__titre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; cursor: grab; }
.ordre__retirer { flex: none; width: 36px; height: 36px; display: grid; place-items: center; font-size: 18px; color: var(--texte-3); background: none; border: 0; border-radius: 8px; cursor: pointer; }
.ordre__retirer:hover { color: var(--rouge); background: var(--retrait); }
.ordre__ligne--nouvelle { border-color: var(--orange); background: var(--orange-doux); }
.ordre__ligne--tenue { z-index: 2; border-color: var(--texte); box-shadow: var(--ombre-2); cursor: grabbing; }
.ordre__ligne--tenue .ordre__poignee, .ordre__ligne--tenue .ordre__titre { cursor: grabbing; }

/* ---------- Au téléphone ---------- */
@media (max-width: 699px) {
  /* La conversation au-dessus, « Mon site » en feuille en bas (hauteur fixe ; réduite, sa barre seule). */
  .assistant { bottom: var(--bas-site, 46dvh); right: 0; transition: bottom 320ms var(--courbe); }
  .assistant__fil { padding: 16px 16px 6px; }
  .assistant__ecran { padding: 8px 16px 12px; }
  .assistant .bulle { font-size: var(--t-courant); }
  .site { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 46dvh; border-width: 1px 0 0; border-radius: 20px 20px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .site--hors { transform: translateY(100%); opacity: 1; }
  .site--reduit { height: auto; }
  /* La poignée et la barre se tirent au doigt (app.js > tirerFeuille) : une prise assez grande. */
  .site__poignee { display: block; flex: none; height: 26px; touch-action: none; cursor: ns-resize; }
  .site__poignee::before { content: ""; display: block; width: 40px; height: 5px; margin: 8px auto 0; border-radius: 999px; background: var(--trait-fort); }
  .site__barre { padding: 0 8px 6px 16px; border-bottom: 0; cursor: ns-resize; touch-action: none; }
  .site { transition: opacity 320ms var(--courbe), transform 320ms var(--courbe), height 300ms var(--courbe); }
  .site.site--tire { transition: none; }
  /* Plein écran au téléphone : le site en grand, la conversation en feuille en bas. */
  body.plein .site { bottom: calc(52dvh - 20px) !important; height: auto !important; padding-bottom: 0; }
  .site > .bord { display: none; }
  body.plein .assistant { inset: auto 0 0 0; width: auto; height: 52dvh; max-height: none; border-width: 1px 0 0; border-radius: 20px 20px 0 0; }
  body.plein .assistant__barre { padding: 0 8px 4px 16px; border-bottom: 0; }
  /* L'espacement par des marges (pas gap) et un retrait aux deux bouts : robuste dans Safari. Le geste
     vertical part aussi d'une miniature (touch-action par défaut) : la conversation défile. */
  .vignettes { display: flex; gap: 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: 16px; margin: 0 -16px; padding: 2px 6px 6px 16px; scrollbar-width: none; }
  .vignettes > .vignette { margin-right: 12px; }
  .vignettes::after { content: ""; flex: 0 0 4px; }
  .vignettes::-webkit-scrollbar { display: none; }
  /* Une taille fixe, et l'échelle écrite ici : WebKit ne rogne pas toujours un cadre réduit dans une
     boîte arrondie, les miniatures débordaient l'une sur l'autre (iPhone de Loïc). 168 / 390 = 0,4308. */
  .vignette { flex: 0 0 180px; scroll-snap-align: start; }
  .vignette__cadre { aspect-ratio: 9 / 13; }
  .vignette__cadre { width: 168px; height: 243px; aspect-ratio: auto; }
  .vignette__cadre iframe { width: 390px; height: 564px; transform: scale(.4308) !important; }
  .offres { max-height: 22dvh; }
  .ordre { max-height: 22dvh; }
  .ordre__ligne { min-height: 44px; }
  .offre { grid-template-columns: 1fr 5.5rem 36px; }
  /* deux par ligne, en longueur : quatre lignes basses pour huit tuiles */
  .palettes { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .palette { display: flex; align-items: center; justify-content: flex-start; gap: 8px; min-height: 40px; padding: 0 10px; font-size: 13px; }
  .palette__pastilles span { width: 20px; height: 20px; }
  .palette__pastilles--icone { width: 32px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- Ordinateur : l'écran en deux (Loïc, 11/11/2026) ----------
   « Mon site » occupe la partie droite sur toute la hauteur, sans cadre de fenêtre ; une barre verticale
   la sépare de la conversation et se tire. */
@media (min-width: 700px) {
  /* L'ouverture du site (Loïc, 11/11) : une seule animation, le site entre par la droite pendant que la
     conversation se range à gauche ; même durée, même courbe, même image de départ (app.js > laisserPlace
     mesure la place finale, pas la position en cours de glissement). */
  /* en écran partagé, le volet ne coupe pas ce qui le dépasse : la languette de la barre déborde côté conversation */
  body:not(.plein) .site { overflow: visible; border-width: 0 0 0 1px; border-radius: 0; box-shadow: none; transition: opacity 300ms var(--courbe), transform var(--ouverture) var(--courbe); }
  body:not(.plein) .assistant { transition: right var(--ouverture) var(--courbe), left var(--ouverture) var(--courbe), opacity 320ms var(--courbe); }
  :root { --ouverture: 420ms; }
  body:not(.plein) .site__barre { cursor: default; }
  body:not(.plein) .site > .bord, [data-site-reduire] { display: none; }
  /* Une zone d'accroche de 28 px (12 à gauche, 16 à droite du trait), une pilule au milieu qui
     s'épaissit et se colore au survol et pendant le geste ; le trait reste fin. La conversation s'arrête
     12 px avant : sa barre de défilement n'est jamais sous la zone. */
  .site__separateur { position: absolute; z-index: 7; top: 0; bottom: 0; left: -12px; width: 28px; cursor: col-resize; touch-action: none; }
  /* la pilule d'origine, en gris foncé, côté conversation (Loïc, 11/11) ; la zone de prise des deux côtés */
  .site__separateur::after { content: ""; position: absolute; z-index: 1; top: 50%; left: 1px; width: 6px; height: 48px; margin-top: -24px; border-radius: 999px; background: var(--texte-2); transform-origin: 50% 50%; transition: background-color .18s, transform .18s var(--courbe); }
  /* au survol de toute la zone, au tirage et au clavier : orange, un peu plus grosse (depuis son centre) ; au toucher, pas de survol qui reste */
  .site__separateur:focus-visible::after, body.separe .site__separateur::after { background: var(--orange); transform: scale(1.25); }
  @media (hover: hover) { .site__separateur:hover::after { background: var(--orange); transform: scale(1.25); } }
  .site__separateur:focus-visible { outline: none; }
  body:not(.plein) .assistant { right: calc(var(--place, 0px) + 12px); }
  body.separe { cursor: col-resize; user-select: none; }
  body.separe .scene { pointer-events: none; }
  body.separe .assistant { transition: none; }
  body.plein .site__separateur { display: none; }
}
@media (max-width: 699px) { .site__separateur { display: none; } }

/* Le badge des étapes : l'étape en cours nommée, des points (faites en orange plein, en cours entourée,
   à venir en gris), « 3 sur 9 ». Au téléphone, il tient dans la barre de la feuille. */
.etapes { min-width: 0; display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 10px; font-size: 12px; font-weight: 600; color: #3f3f46; background: #fff; border: 1px solid #e4e4e7; border-radius: 999px; white-space: nowrap; overflow: hidden; }
.etapes:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.etapes__nom { color: var(--texte); overflow: hidden; text-overflow: ellipsis; }
.etapes__compte { flex: none; color: var(--texte-3); font-weight: 600; }
/* Les miniatures : le nom (qui dit le style) et une ligne d'avantage ; dessous, le conseil du premier
   écran touché, ses atouts numérotés comme dans l'aperçu. */
.vignette__nom { display: grid; gap: 2px; }
.vignette__nom b { font-size: 14px; font-weight: 700; }
.vignette__nom span { font-size: 12.5px; font-weight: 400; color: var(--texte-2); line-height: 1.4; }
.conseil { display: grid; gap: 6px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r-carte); font-size: 14px; line-height: 1.45; }
.conseil:empty { display: none; }
.conseil__nom { font-family: var(--police-titre); font-size: 19px; }
.conseil__pour { margin: 2px 0 4px; padding: 10px 12px; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--texte); background: var(--orange-doux); border-left: 3px solid var(--orange); border-radius: 8px; }
.conseil__atouts { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.conseil__point { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 12px; font-size: 13px; font-weight: 600; color: var(--texte-2); background: var(--surface); border: 1px solid var(--trait); border-radius: 999px; cursor: pointer; }
.conseil__point:hover { color: var(--texte); border-color: var(--trait-fort); }
@media (max-width: 699px) { .conseil__atouts { display: none; } }
.conseil__pour:empty { display: none; }

/* Un même langage pour les pastilles de l'aperçu, les pilules de l'encart et les points des étapes : un point
   de verre clair, liseré 1 px, chiffre orange ; plein d'orange quand c'est actif ou fait. */
/* L'interrupteur « Conseils » : une pilule discrète ; appuyée quand les conseils sont affichés. */

/* Le badge d'étapes (Badge et Progress de shadcn) : le nom de l'étape, une fine barre, « 5/13 ». */
.etapes__nom { color: #09090b; overflow: hidden; text-overflow: ellipsis; }
.etapes__barre { flex: none; position: relative; width: 52px; height: 5px; border-radius: 999px; background: #e4e4e7; overflow: hidden; }
.etapes__barre i { position: absolute; inset: 0 auto 0 0; background: #18181b; border-radius: 999px; transition: width .4s var(--courbe); }
.etapes__compte { flex: none; color: #71717a; font-weight: 500; font-variant-numeric: tabular-nums; }
@media (max-width: 699px) { .etapes__barre { display: none; } .etapes { overflow: visible; } }
/* L'encart : les points en étiquettes neutres (Badge « outline »), sans numéro. */
.conseil__point { color: #3f3f46; background: #fff; border-color: #e4e4e7; font-weight: 500; }
.conseil__point:hover { color: #09090b; border-color: #a1a1aa; }
/* L'interrupteur « Conseils » (Switch de shadcn) */

/* « Recommencer » : discret, en haut de la conversation (le rechargement ne repart plus de zéro). */
/* L'en-tête : collé en haut de la colonne, fond plein de l'assistant, la conversation défile dessous ; un filet
   fin seulement quand elle a défilé (assistant__tete--defile). Le mot « SYNAPS » est la marque du design system
   (synaps-design-system, css/base.css > .marque : 800, capitales, espacement 0,2 em, Archivo), aligné sur le
   bord gauche du texte. */
.assistant__tete { position: sticky; top: 0; z-index: 3; flex: none; width: 100%; height: var(--hauteur-entete); background: var(--fond); border-bottom: 1px solid var(--trait); }
.assistant__tete-ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; max-width: var(--col); height: 100%; margin: 0 auto; padding: 0 24px; }
.assistant__marque { font-family: var(--police); font-size: 15px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; line-height: 1; color: var(--texte); }
body.plein .assistant__tete { display: none; }
.recommencer { margin-right: -10px; min-height: 28px; padding: 0 10px; font-size: 12px; font-weight: 600; color: var(--texte-3); background: none; border: 1px solid transparent; border-radius: 8px; cursor: pointer; }
.recommencer:hover { color: var(--texte); border-color: var(--trait); background: var(--surface); }


/* Le site caché tant qu'il n'y a rien à montrer : la conversation a toute la place. */
.site.site--cache { transform: translateX(100%); opacity: 0; pointer-events: none; }
@media (max-width: 699px) { .site.site--cache { transform: translateY(105%); opacity: 1; } }
/* au chargement (reprise d'une séance), rien ne glisse */
body.sans-anim .site, body.sans-anim .assistant { transition: none !important; }
.assistant__ecran > .cale { animation: none; }

/* Une fois longue, la conversation est ancrée en bas : plus de marge automatique sous ce qu'on peut répondre. */
body:not(.plein) .assistant--long .assistant__ecran { margin-bottom: 0; }

/* La signature des conseils (Loïc, 11/11) : le même point orange que les bulles de l'aperçu, devant le nom du
   premier écran, pour relier l'encart et les bulles. */
.conseil__nom { display: flex; align-items: center; gap: 9px; }
.conseil__nom::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #f97316; box-shadow: 0 0 0 3px rgba(249, 115, 22, .22); }

/* Le texte au fil de l'eau : la suite est déjà là, invisible (sa place est prise), chaque groupe paraît en
   fondu ; l'écran qui attend la fin du texte tient sa place, invisible (Loïc, 11/11). */
.bulle .reste { visibility: hidden; }
/* chaque groupe arrive en orange Synaps et passe à la couleur du texte (Loïc, 13/11), plus lentement que son fondu */
.bulle .groupe { animation: groupe 260ms ease-out both, groupe-couleur 600ms ease-out both; }
@keyframes groupe-couleur { from { color: var(--orange); } }
@keyframes groupe { from { opacity: 0; filter: blur(1.5px); } to { opacity: 1; filter: none; } }
.bulle--ecrit { animation: none; }
.assistant__ecran.ecran--attente > * { visibility: hidden; animation: none; }
@media (prefers-reduced-motion: reduce) { .bulle .groupe { animation: none; } }

/* Le défilement de la conversation est réglé par app.js (placer, garderPlancher) : pas d'ancrage automatique du navigateur, qui le déplaçait d'un coup quand l'écran du bas changeait. */
body:not(.plein) .assistant { overflow-anchor: none; }

/* Le compteur discret d'un champ : la longueur que le style choisi tient ; orange au-delà (étape C, 11/11). */
.avec-compte { position: relative; display: block; min-width: 0; }
.avec-compte > .champ { width: 100%; padding-right: 64px; }
.compte { position: absolute; right: 10px; bottom: 6px; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--texte-3); pointer-events: none; opacity: 0; transition: opacity .2s; }
.compte--vu { opacity: 1; }
.compte--trop { color: var(--orange); }

.saisie__ligne > .avec-compte { flex: 1 1 auto; }
.perso > .avec-compte > .champ--long, .perso > .avec-compte > textarea { width: 100%; }


/* une phrase mise en avant par le serveur (« ** … ** ») */
.bulle--gras { font-weight: 650; }

/* la colonne garde la largeur qu'elle aura à côté du site (app.js > laisserPlace : --col-max) */
body:not(.plein) .assistant__fil, body:not(.plein) .assistant__ecran, body:not(.plein) .assistant__tete-ligne { max-width: min(var(--col), var(--col-max, var(--col))); }

/* La rangée des premiers écrans (Loïc, 11/11) : une rangée qu'on parcourt avec des flèches, trois à la fois sur
   ordinateur, du plus au moins adapté à l'activité ; au téléphone, glissement au doigt (la suivante dépasse). */
.rangee { position: relative; min-width: 0; }
@media (min-width: 700px) {
  .vignettes { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px; margin: -2px; }
  .vignettes::-webkit-scrollbar { display: none; }
  .vignettes > .vignette { flex: 0 0 calc((100% - 20px) / 3); scroll-snap-align: start; }
}
.vignettes:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 14px; }
.rangee__fleche { position: absolute; z-index: 2; top: 34%; width: 38px; height: 38px; display: grid; place-items: center; padding: 0; color: var(--texte); background: var(--surface); border: 1px solid var(--trait-fort); border-radius: 50%; cursor: pointer; transition: opacity .2s, background-color .15s, border-color .15s; }
.rangee__fleche--prec { left: -14px; }
.rangee__fleche--suiv { right: -14px; }
.rangee__fleche:hover:not(:disabled) { border-color: var(--texte-2); }
.rangee__fleche:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.rangee__fleche:disabled { opacity: .35; cursor: default; }
@media (max-width: 699px) { .rangee__fleche { top: 30%; } .rangee__fleche--prec { left: -6px; } .rangee__fleche--suiv { right: -6px; } }
@media (min-width: 700px) {
  .vignettes { cursor: grab; }
  .vignettes--tire { cursor: grabbing; scroll-snap-type: none; user-select: none; }
  .vignettes--tire .vignette { pointer-events: none; }
}
/* au doigt : la rangée défile à l'horizontale sans bloquer le défilement vertical de la conversation */
.vignettes { touch-action: pan-x pan-y; }
.vignette img { -webkit-user-drag: none; }

/* L'indicateur d'attente : celui du moteur (moteur-chat/navigateur/attente.css). */

/* Le bouton téléphone, une bascule (Loïc, 11/11) : actif, l'icône est dans un carré en surbrillance ; un second
   clic l'enlève. La taille du bouton ne change pas. */
/* la famille des contrôles de la barre (téléphone, plein écran ; « Mode édition » suit le même état actif) */
.site__mobile, .site__plein { transition: background-color .15s, color .15s; }
.site__mobile[aria-pressed="true"], .site__plein[aria-pressed="true"] { color: var(--orange); background: var(--orange-doux); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--orange) 35%, transparent); }
.site__mobile[aria-pressed="true"]:hover, .site__plein[aria-pressed="true"]:hover { background: color-mix(in srgb, var(--orange) 18%, var(--orange-doux)); }
/* Tout ce qui se clique : un focus clavier visible ; ce qui est désactivé est atténué, sans main. */
button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
button:disabled { cursor: not-allowed; opacity: .45; }
button.rangee__fleche:disabled { cursor: default; }

/* ---------- La rangée des premiers écrans, façon Carousel de shadcn/ui (Loïc, 11/11) ----------
   fenêtre qui coupe net, piste en flex, gouttière de 16 px, cartes à bordure fine ; la ligne du bas porte le
   repère et les flèches rondes « outline » : rien ne recouvre une miniature. */
.rangee__fenetre { overflow: hidden; margin: -3px; padding: 3px; border-radius: 14px; cursor: grab; touch-action: pan-y pinch-zoom; }
.rangee__fenetre--tire { cursor: grabbing; }
.rangee__fenetre:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.rangee .vignettes { display: flex; gap: 0; overflow: visible; scroll-snap-type: none; margin: 0; padding: 0; touch-action: pan-y pinch-zoom; }
.rangee .vignettes::after { content: none; }
.rangee .vignettes > .vignette { flex: 0 0 calc((100% - 32px) / 3); min-width: 0; margin: 0 16px 0 0; scroll-snap-align: none; }
.rangee .vignette { border-radius: 12px; border: 1px solid var(--trait); padding: 6px 6px 10px; user-select: none; -webkit-user-select: none;
  transition: border-color .15s, box-shadow .18s, transform .18s var(--courbe); animation: vignette-entre .38s var(--courbe) both; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes vignette-entre { from { opacity: 0; transform: translateX(14px); } }
@media (hover: hover) { .rangee .vignette:hover { border-color: var(--trait-fort); transform: translateY(-1px) scale(1.01); } }
.rangee .vignette:active { transform: scale(.99); }
.rangee .vignette[aria-pressed="true"] { border-color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); }
.rangee .vignette__cadre { border-radius: 8px; clip-path: inset(0 round 8px); }
.rangee .vignette__choisie { top: 12px; right: 12px; width: 22px; height: 22px; padding: 0; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--orange); opacity: 0; transform: scale(.6); transition: opacity .18s, transform .18s var(--courbe); }
.rangee .vignette[aria-pressed="true"] .vignette__choisie { display: grid; opacity: 1; transform: none; }
.rangee .vignette__nom b { font-size: 13.5px; }
.rangee .vignette__nom span { font-size: 12.5px; }
.rangee__bas { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.rangee__repere { font-size: 13px; color: var(--texte-3); font-variant-numeric: tabular-nums; }
.rangee__fleches { display: flex; gap: 8px; }
.rangee .rangee__fleche { position: static; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; color: var(--texte); background: var(--fond); border: 1px solid var(--trait-fort); border-radius: 50%; cursor: pointer; transition: background-color .15s, opacity .2s; }
.rangee .rangee__fleche:hover:not(:disabled) { background: var(--retrait); }
.rangee .rangee__fleche:disabled { opacity: .5; cursor: default; }
@media (max-width: 699px) {
  .rangee .vignettes { margin: 0; padding: 0; }
  /* deux cartes et demie à l'écran : la rangée, le conseil et le bouton tiennent au-dessus de la feuille */
  .rangee .vignettes > .vignette { flex: 0 0 44%; margin-right: 10px; }
  /* le conseil de la variante aussi au téléphone (13/11), un peu plus petit */
  .rangee .vignette__nom span { font-size: 12px; }
  .conseil .conseil__nom { display: none; }
  .rangee .vignette__cadre { width: 100%; height: auto; aspect-ratio: 9 / 13; }
  .rangee .vignette__cadre iframe { transform: scale(var(--k-vignette, .4308)) !important; }
}
@media (prefers-reduced-motion: reduce) { .rangee .vignette { animation: none; transition: none; } }

/* ---------- Joindre un document, un site, un résumé (atelier/analyse) ----------
   Le lien discret sous la première question, le trombone ensuite, et le panneau posé dans la conversation :
   fond surface, filet fin, rayon des cartes, pas d'ombre. Icônes Lucide. */
.joindre-lien, .joindre-trombone { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 2px; font-size: 14px; font-weight: 600; color: var(--texte-2); background: none; border: 0; cursor: pointer; }
.joindre-lien { text-decoration: underline; text-decoration-color: var(--trait-fort); text-underline-offset: 3px; }
.joindre-lien:hover, .joindre-trombone:hover { color: var(--texte); text-decoration-color: currentColor; }
.joindre-lien:focus-visible, .joindre-trombone:focus-visible, .joindre button:focus-visible, .joindre__depot:focus-within { outline: 2px solid var(--orange); outline-offset: 2px; }
.joindre { display: grid; gap: 12px; padding: 14px; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r-carte); animation: entre 220ms var(--courbe) both; }
.joindre__tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 15px; }
.joindre__fermer { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; color: var(--texte-2); background: none; border: 0; border-radius: var(--r-controle); cursor: pointer; }
.joindre__fermer:hover { color: var(--texte); background: var(--retrait); }
.joindre__depot { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px; font-size: 14px; line-height: 1.4; color: var(--texte-2); border: 1px dashed var(--trait-fort); border-radius: var(--r-controle); cursor: pointer; transition: border-color .15s, background-color .15s; }
.joindre__depot b { color: var(--texte); }
.joindre__depot svg { flex: none; color: var(--texte-2); }
.joindre__depot:hover, .joindre__depot--survol { border-color: var(--texte); background: var(--retrait); }
.joindre__erreur { margin: 0; font-size: 14px; color: var(--orange-fonce); }

/* « On passe à la suite » : la flèche vers le bas dans le bouton, qui descend un peu au survol */
.bouton--suite { gap: 7px; }
.bouton--suite .bouton__icone { flex: none; transition: transform .18s var(--courbe); }
@media (hover: hover) { .bouton--suite:hover .bouton__icone { transform: translateY(2px); } }
.joindre__site, .joindre__resume { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--trait); }
.joindre__phrase { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 14px; line-height: 1.4; color: var(--texte-2); }
.joindre__phrase svg { flex: none; margin-top: 1px; }
.joindre__copier { justify-self: start; gap: 8px; min-height: 40px; font-size: 14px; }
.joindre__resume .champ--long { min-height: 88px; font-size: 15px; }
.joindre .boutons .bouton { min-height: 40px; font-size: 14px; }

/* L'étape « Documents » : quatre boutons de même niveau, chacun avec son icône Lucide ; deux par ligne sur
   ordinateur, un par ligne au téléphone. */
.boutons--sources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: start; }
.bouton--icone { display: inline-flex; align-items: center; justify-content: flex-start; gap: 10px; text-align: left; }
.bouton--icone svg { flex: none; }
/* les boutons empilés : tous de la même largeur, celle du plus long libellé (sans dépasser la colonne) */
/* la grille des boutons de l'étape Documents est réglée par app.js (rangerBoutons) : colonnes de même largeur, celle
   du plus long libellé, autant par ligne que la conversation en tient (Loïc, 13/11 : « optimise un peu l'espace ») */
.boutons--sources .bouton { white-space: nowrap; }
@media (max-width: 699px) { .boutons--sources { grid-template-columns: minmax(0, max-content); } }
/* L'en-tête au téléphone : 44 px, sur la marge du texte de la conversation. */
@media (max-width: 699px) { .assistant__tete { height: var(--hauteur-entete-tel); } .assistant__tete-ligne { padding: 0 16px; } }

/* Le nom de l'étape en cours se lit toujours en entier (Loïc, 12/11 : « Style » coupé en « S » à 360 px) : il
   ne rétrécit jamais ; au téléphone, ce sont les autres qui cèdent : l'interrupteur des conseils sans son
   libellé (le nom reste pour les lecteurs d'écran), puis, sous 360 px, le compte « 3/7 » et le libellé « Mon site ». */
.etapes__nom { flex: none; }

@media (max-width: 359px) { .etapes__compte { display: none; } .site__titre b { display: none; } }

/* Les cartes des premiers écrans (Loïc, 12/11) : l'image en haut, de même hauteur partout, le titre juste dessous
   au même endroit dans toutes, le paragraphe à partir du haut ; le vide éventuel va en bas de la carte (un
   bouton centre son contenu verticalement par défaut, d'où des titres à des hauteurs différentes). */
.vignette { align-content: start; align-items: start; }
.vignette__nom { align-content: start; }

/* Les deux barres du haut (Loïc, 12/11) : l'en-tête de la conversation et la barre « Mon site » ont la même
   hauteur (une seule variable, filet compris) et le même filet, toujours visible : un trait continu sur toute
   la largeur, interrompu seulement par la séparation verticale. Pas de barre de défilement visible : le
   défilement (molette, doigt, clavier) reste. */
:root { --hauteur-entete: 48px; --hauteur-entete-tel: 44px; }
@media (min-width: 700px) { body:not(.plein) .site__barre { box-sizing: border-box; height: var(--hauteur-entete); padding-top: 0; padding-bottom: 0; border-bottom: 1px solid var(--trait); } }
.assistant, .assistant__fil { scrollbar-width: none; }
.assistant::-webkit-scrollbar, .assistant__fil::-webkit-scrollbar { display: none; }

/* Le filet sous les deux barres, d'un seul trait d'un bord à l'autre (Loïc, 12/11 : « il y a toujours un gap ») :
   tracé une fois pour tout l'écran, il traverse la zone de séparation et rejoint la ligne verticale en T ; les
   bordures propres des deux barres tombent dessous, au même pixel. */
/* une seule couleur, opaque, pour le trait horizontal et la ligne verticale (le trait fort de l'assistant posé sur
   son fond) : la même teinte partout, sur la conversation comme sur la barre du site */
:root { --filet: color-mix(in srgb, #14110F 22%, var(--fond)); }
@media (min-width: 700px) {
  body:not(.plein)::after { content: ''; position: fixed; z-index: 30; left: 0; right: 0; top: calc(var(--hauteur-entete) - 1px); height: 1px; background: var(--filet); pointer-events: none; }
  body:not(.plein) .site { border-left-color: var(--filet); }
  body:not(.plein) .assistant__tete, body:not(.plein) .site__barre { border-bottom-color: transparent; }
}

/* la première question : icône à gauche, 8 px d'écart, libellé sur une ligne (Loïc, 13/11) */
.boutons:not(.boutons--sources) > .bouton--icone { gap: 8px; justify-content: center; white-space: nowrap; }

/* La saisie (Loïc, 13/11) : le rappel « Entrée », la ligne d'aide et le halo viennent du moteur (saisie.css) ;
   ici, les coins du design system sur le bouton de validation et « On passe à la suite », et la mise en ligne. */
.bouton--valider, .bouton--suite { border-radius: var(--r-bouton, 4px); }
.saisie__ligne { align-items: center; }

/* les points du conseil ouvraient les bulles de l'aperçu, retirées (13/11) : seul « Fait pour toi si… » reste */
.conseil__atouts { display: none; }

/* L'interrupteur « Mode édition » (Loïc, 13/11 : « un toggle », « couleur active : orange ») : le libellé à gauche,
   un interrupteur façon Switch de shadcn à droite (piste arrondie, pastille blanche qui glisse) ; éteint, piste gris
   clair ; allumé, piste orange Synaps. Pas d'ombre. Sans glissement avec « moins d'animations ». */
.site__edition { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px 0 10px; font: 650 12px/1 var(--police); color: var(--texte-2); background: none; border: 0; border-radius: var(--r-controle); cursor: pointer; white-space: nowrap; transition: background-color .15s, color .15s; }
.site__edition-piste { position: relative; flex: none; width: 30px; height: 18px; border-radius: 999px; background: #e4e4e7; transition: background-color .18s; }
.site__edition-piste::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .18s var(--courbe); }
/* actif : exactement le style actif du bouton téléphone (Loïc, 13/11 : « comme le mode mobile ») */
.site__edition[aria-checked="true"] { color: var(--orange); background: var(--orange-doux); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--orange) 35%, transparent); }
.site__edition[aria-checked="true"]:hover { background: color-mix(in srgb, var(--orange) 18%, var(--orange-doux)); }
.site__edition[aria-checked="true"] .site__edition-piste { background: var(--orange); }
.site__edition[aria-checked="true"] .site__edition-piste::after { transform: translateX(12px); }
.site__edition:hover { background: var(--retrait); }
.site__edition:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.site__edition[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .site__edition-piste, .site__edition-piste::after { transition: none; } }
@media (max-width: 359px) { .site__edition span { display: none; } }

/* la rangée des variantes d'une section, au-dessus des boutons de l'étape (13/11) */
.rangee--section { margin-bottom: 12px; }

/* au téléphone, la place de « Mode édition » : le libellé « Mon site » cède (la feuille est le site), le nom de l'étape
   et l'interrupteur restent entiers (13/11) */
@media (max-width: 699px) { .site__titre b { display: none; } }

/* « Sauter » à côté de « Recommencer » (13/11) */
.assistant__actions { display: inline-flex; align-items: center; gap: 2px; }
.recommencer--icone { display: inline-flex; align-items: center; gap: 5px; }

/* L'historique des modifications (Loïc, 13/11) : petit panneau sous le bouton, la plus récente en haut */
.site__historique[hidden] { display: none; }
.site__historique[aria-expanded="true"] { color: var(--texte); background: var(--retrait); }
.historique { position: fixed; z-index: 30; width: min(360px, calc(100vw - 32px)); max-height: min(420px, calc(100dvh - 120px)); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--trait-fort); border-radius: var(--r-carte); box-shadow: var(--ombre-3); font: 14px/1.4 var(--police); color: var(--texte); animation: entre 160ms var(--courbe) both; }
.historique__tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--trait); }
.historique__tete b { font-weight: 650; font-size: 13px; }
.historique__annuler, .historique__revenir { flex: none; height: 28px; padding: 0 10px; font: 600 12px/1 var(--police); color: var(--texte); background: var(--retrait); border: 0; border-radius: var(--r-controle); cursor: pointer; }
.historique__annuler:hover, .historique__revenir:hover { color: var(--orange); background: var(--orange-doux); }
.historique__annuler:disabled, .historique__revenir:disabled { opacity: .45; cursor: default; color: var(--texte); background: var(--retrait); }
.historique__annuler:focus-visible, .historique__revenir:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.historique__liste { margin: 0; padding: 6px; list-style: none; overflow-y: auto; }
.historique__ligne { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--r-controle); }
.historique__ligne:hover { background: var(--retrait); }
.historique__texte { flex: 1; min-width: 0; display: grid; gap: 2px; }
.historique__texte b { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.historique__texte span { font-size: 12px; color: var(--texte-2); }
.historique__vide { margin: 0; padding: 12px 8px; color: var(--texte-2); }
/* Aucun état ne se perd (Loïc, 13/11) : la ligne où l'on est (« Tu es ici », teinte orange comme le mode édition), les
   lignes gardées de côté (pâlies, toujours cliquables), Annuler et Rétablir côte à côte */
.historique__pas { display: inline-flex; gap: 6px; }
.historique__ligne { transition: background-color .2s, opacity .2s; }
.historique__ligne--actuelle, .historique__ligne--actuelle:hover { background: none; }
.historique__ici { flex: none; padding: 0 4px; font: 650 12px/1 var(--police); color: var(--orange); white-space: nowrap; }
.historique__ligne--cote .historique__texte { opacity: .55; }
/* la ligne dit ce qui a changé, en entier (deux lignes au plus), puis sur quoi et la demande */
.historique__texte b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.historique__texte span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* « Ta couleur » (13/11) : la tuile de la pipette, puis la pipette et les accords sous les tuiles */
.palette__pastilles--icone { width: 44px; height: 26px; align-items: center; justify-content: center; color: var(--texte-2); }
.palette__pastilles--icone svg { width: 20px; height: 20px; }
.perso { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; padding: 12px; border: 1px solid var(--trait); border-radius: var(--r-controle); background: var(--surface); }
.perso[hidden] { display: none; }
.perso__cote { display: grid; align-content: start; gap: 8px; }
.perso__titre { margin: 0; font-size: 13px; font-weight: 650; color: var(--texte-2); }
.perso__accords { display: grid; gap: 6px; }
.perso__accord { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; font: inherit; font-size: 14px; font-weight: 600; color: var(--texte-2); text-align: left; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r-controle); cursor: pointer; transition: border-color .15s; }
.perso__accord:hover { border-color: var(--trait-fort); }
.perso__accord[aria-checked="true"] { color: var(--texte); border-color: var(--texte); box-shadow: inset 0 0 0 1px var(--texte); }
.perso__accord:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.perso__accord .palette__pastilles span { width: 20px; height: 20px; }
.perso__hasard { min-height: 40px; font-size: 14px; }
@media (max-width: 560px) {
  .perso { grid-template-columns: 1fr; gap: 10px; padding: 10px; }
  .perso .pipette__carre { height: 110px; }
  .perso .pipette__teinte { height: 20px; }
  .perso .pipette__teinte .pipette__repere { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
  .perso__hasard { min-height: 44px; }
  .perso__accords { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .perso__accord { flex-direction: column; justify-content: center; gap: 4px; min-height: 56px; padding: 6px 4px; font-size: 11px; text-align: center; }
}
/* ---------- Couleurs et police depuis la barre du site (Loïc, 14/11) ----------
   Les deux boutons de la barre (ordinateur seulement : au téléphone la barre n'a pas la place) et leur fenêtre, une
   palette flottante déplacée par sa barre (composant partagé, mode libre). */
.site__reglage[aria-pressed="true"] { color: var(--orange); background: var(--orange-doux); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--orange) 35%, transparent); }
.site__reglage[hidden] { display: none; }
@media (max-width: 699px) { .site__reglage { display: none; } }
.reglage { position: fixed; z-index: 31; width: min(380px, calc(100vw - 24px)); max-height: min(620px, calc(100dvh - 24px)); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--trait-fort); border-radius: var(--r-carte); box-shadow: var(--ombre-3); font: 14px/1.4 var(--police); color: var(--texte); animation: entre 160ms var(--courbe) both; }
.reglage.fenetre-flottante--tire { user-select: none; }
.reglage__barre { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--trait); cursor: grab; touch-action: none; user-select: none; }
.fenetre-flottante--tire .reglage__barre { cursor: grabbing; }
.reglage__barre b { font-family: var(--police-titre); font-weight: 700; font-size: 17px; }
.reglage__fermer { flex: none; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; color: var(--texte-2); background: none; border: 0; border-radius: var(--r-controle); cursor: pointer; }
.reglage__fermer:hover { color: var(--texte); background: var(--retrait); }
.reglage__fermer:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.reglage__corps { min-height: 0; display: grid; gap: 10px; padding: 14px; overflow-y: auto; overscroll-behavior: contain; }
/* « Ta couleur » dans la fenêtre : une colonne (la pipette, puis les trois accords côte à côte), comme au téléphone */
.reglage .perso { grid-template-columns: 1fr; gap: 10px; padding: 10px; }
.reglage .perso .pipette__carre { height: 120px; }
.reglage .perso__accords { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.reglage .perso__accord { flex-direction: column; justify-content: center; gap: 4px; min-height: 56px; padding: 6px 4px; font-size: 11.5px; text-align: center; }
.reglage .perso__hasard { justify-self: stretch; white-space: nowrap; }
/* le fond du site, clair ou sombre : une ligne au-dessus des tuiles */
.fond-site { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--trait); }
.fond-site__nom { font-size: 13px; font-weight: 650; color: var(--texte-2); }
.fond-site__groupe { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--retrait); border-radius: var(--r-controle); }
.fond-site__choix { min-width: 76px; height: 30px; padding: 0 12px; font: 600 13px/1 var(--police); color: var(--texte-2); background: none; border: 0; border-radius: calc(var(--r-controle) - 3px); cursor: pointer; }
.fond-site__choix[aria-checked="true"] { color: var(--texte); background: var(--surface); box-shadow: 0 0 0 1px var(--trait-fort); }
.fond-site__choix:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.reglage--polices .reglage__corps { grid-template-rows: auto auto auto minmax(0, 1fr) auto; overflow: hidden; }
/* pour quels textes : deux onglets, chacun dit la police en place */
.polices__roles { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--retrait); border-radius: var(--r-controle); }
.polices__role { min-width: 0; display: grid; gap: 1px; padding: 6px 10px; text-align: left; font: inherit; color: var(--texte-2); background: none; border: 0; border-radius: calc(var(--r-controle) - 3px); cursor: pointer; }
.polices__role b { font-weight: 650; font-size: 13px; color: var(--texte); }
.polices__role span { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.polices__role[aria-selected="true"] { background: var(--surface); box-shadow: 0 0 0 1px var(--trait-fort); }
.polices__role:focus-visible, .polices__genre:focus-visible, .police:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.polices__cherche { min-height: 40px; font-size: 15px; }
.polices__genres { display: flex; flex-wrap: wrap; gap: 6px; }
.polices__genre { height: 30px; padding: 0 11px; font: 600 12.5px/1 var(--police); color: var(--texte-2); background: var(--surface); border: 1px solid var(--trait); border-radius: 999px; cursor: pointer; transition: border-color .15s, color .15s, background-color .15s; }
.polices__genre:hover { border-color: var(--trait-fort); }
.polices__genre[aria-checked="true"] { color: var(--texte); border-color: var(--texte); box-shadow: inset 0 0 0 1px var(--texte); }
.polices__liste { min-height: 160px; display: grid; align-content: start; gap: 2px; margin: 0 -6px; padding: 0 6px; overflow-y: auto; overscroll-behavior: contain; }
.police { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 46px; padding: 6px 10px; text-align: left; font: inherit; color: var(--texte); background: none; border: 1px solid transparent; border-radius: var(--r-controle); cursor: pointer; }
.police:hover { background: var(--retrait); }
.police[aria-selected="true"] { background: var(--orange-doux); border-color: color-mix(in srgb, var(--orange) 45%, transparent); }
.police__nom { min-width: 0; font-size: 20px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.police__genre { flex: none; font-size: 12px; color: var(--texte-3); }
.police--style { align-items: center; }
.police--style .police__nom { font-size: 15px; font-weight: 650; }
.police--style .police__genre { flex: 0 1 auto; text-align: right; }
.polices__vide { margin: 12px 4px; color: var(--texte-2); }
.polices__source { margin: 0; padding-top: 10px; border-top: 1px solid var(--trait); font-size: 12px; color: var(--texte-3); }
/* ---------- Le zoom de l'aperçu, dans la barre du site (Loïc, 14/11) ----------
   Moins, le pourcentage, plus : un seul groupe, discret ; le pourcentage s'allume quand il n'est pas à 100 %. */
.site__zoom { flex: none; display: inline-flex; align-items: center; gap: 0; height: 36px; padding: 0 2px; border: 1px solid var(--trait); border-radius: var(--r-controle); }
.site__zoom[hidden] { display: none; }
.site__zoom-pas { width: 28px; height: 30px; }
.site__zoom-pas:disabled, .site__zoom-taux:disabled { cursor: default; }
.site__zoom-pas:disabled { opacity: .35; background: none; color: var(--texte-2); }
.site__zoom-taux { min-width: 50px; height: 30px; padding: 0 4px; font: 650 12px/1 var(--police); font-variant-numeric: tabular-nums; color: var(--texte-2); background: none; border: 0; border-radius: calc(var(--r-controle) - 2px); cursor: pointer; white-space: nowrap; }
.site__zoom-taux:not(:disabled):hover { color: var(--texte); background: var(--retrait); }
.site__zoom-taux--change { color: var(--orange); }
.site__zoom-taux:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
@media (max-width: 699px) { .site__zoom { display: none; } }
/* Historique : le point de chaque ligne (Loïc, 14/11) : orange et lumineux là où l'on est, gris ailleurs ; toucher la
   ligne ou son point ramène le site à cet état ; l'indication (« Tu es ici », « Revenir ici ») vient au survol. */
.historique__ligne { gap: 12px; }
.historique__ligne--allable { cursor: pointer; }
.historique__point { position: relative; flex: none; width: 22px; height: 22px; padding: 0; background: none; border: 0; border-radius: 50%; cursor: pointer; }
.historique__point::before { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--trait-fort); transition: background-color .15s, transform .15s; }
.historique__ligne--allable:hover .historique__point::before { background: var(--texte-2); transform: scale(1.2); }
.historique__point:disabled { cursor: default; opacity: .5; }
.historique__point:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
.historique__point--ici { cursor: default; }
.historique__point--ici::before { background: var(--orange); box-shadow: 0 0 0 4px color-mix(in srgb, var(--orange) 22%, transparent), 0 0 12px 2px color-mix(in srgb, var(--orange) 55%, transparent); }
/* (l'indication au survol, « Tu es ici » ou « Revenir ici », est l'infobulle partagée : le title de la ligne) */