/* Correcteur de mots fléchés — feuille de style unique, sans ressource externe. */

:root {
  --fond: #faf9f5;
  --fond-barre: #f3f1ea;
  --surface: #ffffff;
  --texte: #1f1e1b;
  --texte-doux: #6b6960;
  --bord: #e5e1d6;
  --bord-fort: #d6d1c3;
  --accent: #c96442;
  --accent-fort: #b0532f;
  --accent-texte: #ffffff;
  --bulle: #efece3;
  --ombre: 0 1px 2px rgba(31, 30, 27, .05), 0 6px 24px rgba(31, 30, 27, .06);
  --erreur: #c62828;
  --erreur-fond: #fbe3e1;
  --verifier: #c77700;
  --verifier-fond: #fdefd3;
  --suggestion: #2f6fd6;
  --suggestion-fond: #e2ecfc;
  --case-def: #ece9df;
  --case-lettre: #ffffff;
  --trait: #3a3833;
  --ok-fond: #e5f2e6;
  --ok-texte: #255b2b;
  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Charter, Georgia, "DejaVu Serif", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "DejaVu Sans", Arial, sans-serif;
  --rayon: 14px;
  --largeur-colonne: 46rem;
  --largeur-barre: 17rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #262624;
    --fond-barre: #1f1e1d;
    --surface: #30302e;
    --texte: #f3f1ea;
    --texte-doux: #a9a69c;
    --bord: #3d3c38;
    --bord-fort: #55534d;
    --accent: #d97757;
    --accent-fort: #e48b6c;
    --accent-texte: #1f1e1d;
    --bulle: #3a3936;
    --ombre: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 24px rgba(0, 0, 0, .25);
    --erreur: #f07167;
    --erreur-fond: #4a2522;
    --verifier: #f0a742;
    --verifier-fond: #4a3618;
    --suggestion: #7aa7f5;
    --suggestion-fond: #22324d;
    --case-def: #3b3a36;
    --case-lettre: #2b2b29;
    --trait: #c9c5b9;
    --ok-fond: #1f3a22;
    --ok-texte: #a7d8ab;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font-family: var(--sans); font-size: 16px; line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
code { font-size: .9em; background: var(--bulle); padding: .05em .35em; border-radius: 5px; }
[hidden] { display: none !important; }

svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* --- structure générale --- */
.appli { display: flex; height: 100vh; height: 100dvh; overflow: hidden; }
.principal { flex: 1; display: flex; flex-direction: column; min-width: 0; height: 100%; }

.barre {
  width: var(--largeur-barre); flex-shrink: 0; background: var(--fond-barre); border-right: 1px solid var(--bord);
  display: flex; flex-direction: column; padding: .75rem; overflow: hidden;
  transition: margin-left .2s ease;
}
.barre-ferme .barre { margin-left: calc(-1 * var(--largeur-barre)); }
.barre-entete { display: flex; align-items: center; gap: .25rem; }
.nouvelle {
  flex: 1; display: flex; align-items: center; gap: .5rem; text-decoration: none; padding: .55rem .7rem;
  border-radius: 10px; font-weight: 600; color: var(--accent);
}
.nouvelle svg { width: 1.2rem; height: 1.2rem; }
.nouvelle:hover { background: var(--bulle); }
.barre-titre { margin: 1rem .5rem .35rem; font-size: .78rem; color: var(--texte-doux); text-transform: uppercase; letter-spacing: .04em; }
.historique { flex: 1; overflow-y: auto; }
.entree { display: flex; align-items: center; border-radius: 10px; }
.entree:hover, .entree.active { background: var(--bulle); }
.entree a { flex: 1; min-width: 0; display: block; padding: .45rem .6rem; text-decoration: none; }
.entree .nom { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .93rem; }
.entree .date { display: block; font-size: .75rem; color: var(--texte-doux); }
.entree .suppr { opacity: 0; }
.entree:hover .suppr, .entree:focus-within .suppr { opacity: 1; }
.barre .vide { color: var(--texte-doux); font-size: .9rem; padding: .5rem; }
.barre-pied { font-size: .72rem; color: var(--texte-doux); margin: .5rem; }

.icone {
  display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem;
  border: 0; background: transparent; border-radius: 9px; cursor: pointer; color: var(--texte-doux); text-decoration: none;
}
.icone svg { width: 1.2rem; height: 1.2rem; }
.icone:hover { background: var(--bulle); color: var(--texte); }

.entete { display: flex; align-items: center; gap: .5rem; padding: .6rem .9rem; }
.titre-appli { font-family: var(--serif); font-size: 1.05rem; text-decoration: none; color: var(--texte); }
.liens-entete { margin-left: auto; display: flex; align-items: center; gap: .4rem; }
.liens-entete > a:not(.icone) { font-size: .9rem; color: var(--texte-doux); text-decoration: none; padding: .3rem .6rem; border-radius: 8px; }
.liens-entete > a:not(.icone):hover { background: var(--bulle); color: var(--texte); }

.colonne { flex: 1; overflow-y: auto; padding: 1rem 1rem 2rem; scroll-behavior: smooth; }
.colonne > * { max-width: var(--largeur-colonne); margin-left: auto; margin-right: auto; }

/* --- guide d'export --- */
.guide.grand { margin-top: 8vh; margin-bottom: 2rem; }
.guide.grand h1 { font-family: var(--serif); font-weight: 400; font-size: 2.1rem; margin: 0 0 .5rem; text-align: center; }
.chapeau { color: var(--texte-doux); text-align: center; }
.guide.grand .etapes { counter-reset: e; list-style: none; padding: 0; display: grid; gap: .75rem; margin: 1.5rem 0; }
.guide.grand .etapes li {
  counter-increment: e; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: .9rem 1rem .9rem 3.2rem; position: relative; box-shadow: var(--ombre);
}
.guide.grand .etapes li::before {
  content: counter(e); position: absolute; left: 1rem; top: .85rem; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--accent); color: var(--accent-texte); font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: .9rem;
}
.rassurant { text-align: center; color: var(--texte-doux); font-size: .9rem; }
.guide.replie { margin: .25rem auto 1rem; }
.guide.replie summary { cursor: pointer; color: var(--texte-doux); font-size: .92rem; width: fit-content; }
.guide.replie summary:hover { color: var(--texte); }
.guide.replie .etapes { font-size: .93rem; }

/* --- fil de la conversation --- */
.fil { display: flex; flex-direction: column; gap: 1.75rem; }
.echange { display: flex; flex-direction: column; gap: 1rem; }
.message-utilisateur { display: flex; justify-content: flex-end; }
.bulle {
  background: var(--bulle); border-radius: 18px; padding: .6rem 1rem; max-width: 85%;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
}
.icone-fichier { width: 1.2rem; height: 1.2rem; color: var(--texte-doux); }
.nom-fichier { font-weight: 600; word-break: break-all; }
.etiquette { font-size: .75rem; background: var(--surface); border: 1px solid var(--bord); border-radius: 6px; padding: 0 .4rem; }
.date-envoi { font-size: .75rem; color: var(--texte-doux); }

.reponse { display: flex; gap: .8rem; align-items: flex-start; }
.reponse .avatar { flex-shrink: 0; width: 1.9rem; height: 1.9rem; display: flex; align-items: center; justify-content: center; margin-top: .1rem; }
.reponse .corps { flex: 1; min-width: 0; font-family: var(--serif); font-size: 1.04rem; }
.reponse .corps p { margin: .35rem 0; }
.resume { font-size: 1.12rem; margin-top: .1rem !important; }
.sous-titre { color: var(--texte-doux); font-family: var(--sans); font-size: .85rem; }
.note { font-family: var(--sans); font-size: .88rem; color: var(--texte-doux); border-left: 3px solid var(--bord-fort); padding-left: .6rem; }

/* indicateur « en train d'écrire » : une étoile qui tourne et pulse */
svg.etincelle { width: 1.45rem; height: 1.45rem; color: var(--accent); stroke-width: 2.6; }
svg.etincelle.anime { animation: tourne 2.4s linear infinite, pulse 1.2s ease-in-out infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .45; } }
.logo svg.etincelle { width: 2.4rem; height: 2.4rem; }

.attente .etape { font-family: var(--serif); color: var(--texte-doux); margin: .15rem 0 .5rem; }
.attente.discret .etape { font-size: .92rem; }
progress {
  width: min(100%, 22rem); height: .4rem; border: 0; border-radius: 99px; background: var(--bord); overflow: hidden;
  appearance: none; -webkit-appearance: none;
}
progress::-webkit-progress-bar { background: var(--bord); border-radius: 99px; }
progress::-webkit-progress-value { background: var(--accent); border-radius: 99px; transition: width .4s; }
progress::-moz-progress-bar { background: var(--accent); border-radius: 99px; }

/* --- grille --- */
.cadre-grille {
  margin: .75rem 0; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: .6rem; box-shadow: var(--ombre); overflow-x: auto;
}
svg.grille { width: 100%; height: auto; display: block; stroke: none; max-height: 78vh; }
svg.grille .case rect { stroke: var(--trait); stroke-width: 1; }
svg.grille .lettre rect { fill: var(--case-lettre); }
svg.grille .definition rect { fill: var(--case-def); }
svg.grille .bloc rect { fill: var(--bord-fort); }
svg.grille .lettre text { fill: var(--texte); font-family: var(--sans); font-weight: 700; font-size: 30px; text-anchor: middle; }
svg.grille text.def { fill: var(--texte); font-family: var(--sans); text-anchor: middle; }
svg.grille .separateur { stroke: var(--trait); stroke-width: .8; }
svg.grille .fleche { fill: var(--trait); stroke: var(--trait); stroke-width: 1.4; }
svg.grille .barre { stroke: var(--texte); stroke-width: 5; }
svg.grille .case { cursor: pointer; outline: none; }
svg.grille .case.sev-erreur rect { fill: var(--erreur-fond); stroke: var(--erreur); stroke-width: 2.5; }
svg.grille .case.sev-a_verifier rect { fill: var(--verifier-fond); stroke: var(--verifier); stroke-width: 2.5; }
svg.grille .case.sev-suggestion rect { fill: var(--suggestion-fond); stroke: var(--suggestion); stroke-width: 2.5; }
svg.grille .case.choisie rect { stroke: var(--accent); stroke-width: 4; }
svg.grille .case:focus-visible rect { stroke: var(--accent); stroke-width: 4; }

.legende { font-family: var(--sans); font-size: .82rem; color: var(--texte-doux); display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; }
.legende .aide-clic { margin-left: auto; }
.puce { display: inline-block; width: .75rem; height: .75rem; border-radius: 3px; vertical-align: -1px; margin-right: .1rem; }
.puce.sev-erreur { background: var(--erreur); }
.puce.sev-a_verifier { background: var(--verifier); }
.puce.sev-suggestion { background: var(--suggestion); }

.detail-case {
  font-family: var(--sans); background: var(--surface); border: 1px solid var(--bord-fort); border-radius: var(--rayon);
  padding: .7rem .9rem; margin: .5rem 0 1rem; box-shadow: var(--ombre);
}
.detail-case h4 { margin: 0 0 .4rem; font-size: .95rem; display: flex; align-items: center; gap: .5rem; }
.detail-case h4 button { margin-left: auto; }
.detail-case ul { margin: 0; padding-left: 1.1rem; }
.detail-case li { margin: .2rem 0; font-size: .93rem; }

/* --- alertes --- */
.alertes h3 { font-family: var(--sans); font-size: .95rem; margin: 1.4rem 0 .5rem; display: flex; align-items: center; gap: .5rem; }
.alertes h3 .nb { font-size: .75rem; background: var(--bulle); border-radius: 99px; padding: 0 .5rem; color: var(--texte-doux); }
.alertes ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.alerte {
  display: grid; grid-template-columns: auto 1fr; gap: .2rem .7rem; padding: .6rem .8rem; border-radius: 12px;
  border: 1px solid var(--bord); background: var(--surface);
}
.alerte.surlignee { outline: 2px solid var(--accent); }
.alerte .pastille { width: .65rem; height: .65rem; border-radius: 50%; margin-top: .5rem; }
.alerte.sev-erreur .pastille { background: var(--erreur); }
.alerte.sev-a_verifier .pastille { background: var(--verifier); }
.alerte.sev-suggestion .pastille { background: var(--suggestion); }
.alerte .texte p { margin: 0; }
.alerte .proposition { font-family: var(--sans); font-size: .88rem; color: var(--texte-doux); margin-top: .15rem !important; }
.alerte .actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .3rem; }
.alerte .actions form { margin: 0; }

button.petit {
  font-family: var(--sans); font-size: .78rem; border: 1px solid var(--bord-fort); background: transparent;
  border-radius: 8px; padding: .2rem .55rem; cursor: pointer; color: var(--texte);
}
button.petit:hover { background: var(--bulle); }
button.petit.discret { color: var(--texte-doux); border-color: var(--bord); }

.conclusion { margin-top: 1.2rem !important; }
.lien-discret { font-size: .85rem; color: var(--texte-doux); }
.lien-discret:hover { color: var(--texte); }
.pied-reponse { margin-top: 1.2rem; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; font-family: var(--sans); }
.bouton {
  display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; cursor: pointer;
  border: 1px solid var(--bord-fort); background: var(--surface); border-radius: 10px; padding: .45rem .85rem;
  font-family: var(--sans); font-size: .92rem; color: var(--texte);
}
.bouton svg { width: 1.05rem; height: 1.05rem; }
.bouton:hover { background: var(--bulle); }
.bouton.plein { background: var(--accent); border-color: var(--accent); color: var(--accent-texte); font-weight: 600; justify-content: center; }
.bouton.plein:hover { background: var(--accent-fort); border-color: var(--accent-fort); }
button.lien { border: 0; background: none; padding: 0; color: var(--accent); cursor: pointer; text-decoration: underline; font-size: .9rem; }
.discret { color: var(--texte-doux); font-size: .88rem; }
.en-ligne { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* --- zone d'envoi façon boîte de message --- */
.saisie { padding: .4rem 1rem calc(.9rem + env(safe-area-inset-bottom)); }
.boite-envoi {
  max-width: var(--largeur-colonne); margin: 0 auto; display: flex; align-items: center; gap: .6rem;
  background: var(--surface); border: 1px solid var(--bord-fort); border-radius: 20px; box-shadow: var(--ombre);
  padding: .55rem .55rem .55rem .9rem; transition: border-color .15s, box-shadow .15s;
}
.boite-envoi.survol { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(201, 100, 66, .15); }
.zone-depot { flex: 1; min-width: 0; cursor: pointer; display: flex; flex-direction: column; padding: .35rem 0; }
.zone-depot input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.invite { color: var(--texte); }
.precision { font-size: .78rem; color: var(--texte-doux); }
.envoyer {
  flex-shrink: 0; width: 2.4rem; height: 2.4rem; border-radius: 12px; border: 0; cursor: pointer;
  background: var(--accent); color: var(--accent-texte); display: flex; align-items: center; justify-content: center;
}
.envoyer svg { width: 1.25rem; height: 1.25rem; stroke-width: 2.2; }
.envoyer:hover { background: var(--accent-fort); }
.boite-envoi.htmx-request .envoyer { opacity: .5; }

/* --- pages simples (connexion, mot de passe) --- */
.page-seule { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1rem; }
.carte-seule {
  width: min(100%, 24rem); background: var(--surface); border: 1px solid var(--bord); border-radius: 18px;
  box-shadow: var(--ombre); padding: 2rem 1.6rem; text-align: center;
}
.carte-seule h1 { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; margin: .6rem 0 1rem; }
.carte-seule .logo { display: flex; justify-content: center; }
.formulaire { display: flex; flex-direction: column; gap: .45rem; text-align: left; }
.formulaire label { font-size: .9rem; }
.formulaire input[type=password], .formulaire input[type=text], .formulaire input[type=number], input[type=text] {
  border: 1px solid var(--bord-fort); border-radius: 10px; padding: .6rem .7rem; background: var(--fond);
}
input:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.case-a-cocher { display: flex; align-items: flex-start; gap: .55rem; margin: .4rem 0; cursor: pointer; }
.case-a-cocher input { margin-top: .3rem; accent-color: var(--accent); }
.case-a-cocher.bloc { margin: .7rem 0; }
.erreur-formulaire { color: var(--erreur); font-size: .9rem; margin: .2rem 0; }
.formulaire .bouton.plein { margin-top: .6rem; padding: .7rem; }
.retour { text-align: center; font-size: .9rem; }

/* --- pages texte (réglages, aide) --- */
.page-texte h1 { font-family: var(--serif); font-weight: 400; font-size: 1.9rem; margin: .5rem auto 1rem; }
.page-texte section { margin: 0 auto 1.6rem; }
.page-texte h2 { font-size: 1.05rem; margin: 1.4rem 0 .5rem; }
.formulaire.large { max-width: var(--largeur-colonne); }
.formulaire.large section { margin-left: 0; margin-right: 0; width: 100%; }
.formulaire.large section { border-bottom: 1px solid var(--bord); padding-bottom: 1rem; }
.bandeau-ok { background: var(--ok-fond); color: var(--ok-texte); border-radius: 10px; padding: .6rem .9rem; margin-bottom: 1rem; font-size: .93rem; }
.mots { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.mots li { display: inline-flex; align-items: center; gap: .1rem; background: var(--bulle); border-radius: 8px; padding: .1rem .2rem .1rem .6rem; font-weight: 600; letter-spacing: .03em; }
.mots .icone { width: 1.6rem; height: 1.6rem; font-size: 1.1rem; }
.actions-liste { margin: .6rem 0; }
.legende-aide { list-style: none; padding: 0; }
.legende-aide li { margin: .5rem 0; }
.remarques .corps p { font-family: var(--sans); font-size: .93rem; }

/* --- téléphone --- */
@media (max-width: 760px) {
  .barre { position: fixed; z-index: 20; top: 0; bottom: 0; left: 0; box-shadow: var(--ombre); margin-left: calc(-1 * var(--largeur-barre) - 1rem); }
  .barre-ouverte .barre { margin-left: 0; }
  .barre-ferme .barre { margin-left: calc(-1 * var(--largeur-barre) - 1rem); }
  .entree .suppr { opacity: 1; }
  .colonne { padding: .6rem .75rem 1.5rem; }
  .guide.grand { margin-top: 3vh; }
  .guide.grand h1 { font-size: 1.7rem; }
  .reponse .avatar { display: none; }
  .legende .aide-clic { margin-left: 0; width: 100%; }
  .saisie { padding-left: .6rem; padding-right: .6rem; }
  .precision { display: none; }
}
@media (min-width: 761px) {
  .barre-ouverte .barre { margin-left: 0; }
}

/* --- impression écran → PDF navigateur (au cas où) --- */
@media print {
  .barre, .entete, .saisie, .actions, .pied-reponse, .guide { display: none !important; }
  .appli, .principal, .colonne { display: block; height: auto; overflow: visible; }
}