/* Dalil — feuille de styles.
   Structure « Conversation », lecture « Carnet » dans la réponse,
   texte arabe d'origine séparé de sa traduction. */

:root{
  --fond:#F2F7F3;
  --carte:#FFFFFF;
  --encre:#14241B;
  --doux:#5E7166;
  --filet:#E1EAE3;
  --vert:#1E7A55;
  --vert-fonce:#155C3F;
  --menthe:#DDEEE3;
  --sur-vert:#FFFFFF;
  --voile:rgba(12,34,23,.38);
  --erreur:#A33A2B;
  --erreur-fond:#FBEDEA;

  --f-ui:"Figtree","Helvetica Neue",Arial,sans-serif;
  --f-lecture:"Literata","Iowan Old Style",Georgia,serif;
  --f-repere:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --f-arabe:"Amiri","Geeza Pro","Noto Naskh Arabic",serif;

  --largeur:720px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --fond:#0F1914;
    --carte:#16231C;
    --encre:#E3EDE6;
    --doux:#9AB0A2;
    --filet:#26362C;
    --vert:#3FA877;
    --vert-fonce:#86D3AA;
    --menthe:#1C3326;
    --sur-vert:#0B1510;
    --voile:rgba(0,0,0,.55);
    --erreur:#F09A8C;
    --erreur-fond:#3A1F1A;
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--fond);color:var(--encre);font-family:var(--f-ui);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
button:focus-visible,textarea:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--vert);outline-offset:2px}
[hidden]{display:none!important}
.ar,[lang="ar"]{font-family:var(--f-arabe)}
.visuellement-cache{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Logo ---------- */
.logo,.logo-grand{display:grid;place-items:center;background:var(--vert);color:var(--sur-vert);flex:none}
.logo{width:34px;height:34px;border-radius:11px}
.logo svg{width:24px;height:24px}
.logo-grand{width:58px;height:58px;border-radius:18px}
.logo-grand svg{width:40px;height:40px}

/* ---------- Boutons génériques ---------- */
.bouton-plein{background:var(--vert);color:var(--sur-vert);font-weight:700;font-size:15px;padding:14px 18px;border-radius:14px;text-align:center}
.bouton-plein:disabled{opacity:.55;cursor:default}
.bouton-contour{border:1px solid var(--filet);font-weight:600;font-size:15px;padding:13px 18px;border-radius:14px;color:var(--vert-fonce)}

/* ---------- Écran du code ---------- */
.ecran-code{min-height:100%;display:grid;place-items:center;padding:32px 22px}
.code-boite{width:min(100%,380px);display:grid;gap:14px}
.code-boite h1{margin:6px 0 0;font-size:30px;line-height:1.1;font-weight:700;letter-spacing:-.01em}
.code-boite h1 .ar{font-weight:400;color:var(--vert);margin-left:6px}
.slogan{margin:0;color:var(--doux)}
.form-code{display:grid;gap:10px;margin-top:12px}
.form-code label{font-size:14px;font-weight:600}
.form-code input{font:inherit;font-size:17px;padding:13px 15px;border-radius:14px;border:1px solid var(--filet);background:var(--carte);color:var(--encre)}
.erreur{margin:0;color:var(--erreur);font-size:14px}
.lien-langue{justify-self:start;color:var(--vert-fonce);font-weight:600;font-size:14px;padding:6px 0}

/* ---------- Application ---------- */
.app{height:100%;display:flex;flex-direction:column}
.barre{flex:none;display:flex;align-items:center;gap:10px;padding:max(10px,env(safe-area-inset-top)) 16px 10px;border-bottom:1px solid var(--filet);background:var(--fond)}
.barre > *{}
.marque{display:flex;align-items:center;gap:10px;flex:1;text-align:left;min-width:0}
.nom{font-weight:700;font-size:17px;line-height:1.15;min-width:0}
.nom small{display:block;font-weight:500;font-size:12px;color:var(--doux);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pastille-langue{font-weight:700;font-size:12px;background:var(--carte);border:1px solid var(--filet);padding:6px 10px;border-radius:999px}
.menu{width:40px;height:40px;display:grid;place-items:center;border-radius:12px}
.menu span,.menu span::before,.menu span::after{display:block;width:18px;height:2px;background:var(--encre);border-radius:1px;position:relative}
.menu span::before,.menu span::after{content:"";position:absolute;left:0}
.menu span::before{top:-6px}
.menu span::after{top:6px}

.fil{flex:1;overflow-y:auto;overscroll-behavior:contain}
.accueil,.conversation{width:min(100%,var(--largeur));margin:0 auto}
.accueil{padding:44px 22px 20px;display:grid;gap:14px}
.accueil h1{margin:6px 0 0;font-size:clamp(24px,5.5vw,30px);line-height:1.18;font-weight:700;letter-spacing:-.01em;text-wrap:balance}
.accueil p{margin:0;color:var(--doux);max-width:46ch}
.suggestions{display:grid;gap:8px;margin-top:14px}
.suggestions-titre{font-size:12px;font-weight:600;color:var(--doux);letter-spacing:.04em}
#suggestions{display:grid;gap:8px}
.suggestion{text-align:left;background:var(--carte);border:1px solid var(--filet);padding:12px 14px;border-radius:14px;font-size:15px;line-height:1.35}
.suggestion:hover{border-color:var(--vert)}

.conversation{padding:16px 12px 20px;display:grid;gap:14px}
.moi{justify-self:end;max-width:min(82%,520px);background:var(--vert);color:var(--sur-vert);padding:11px 15px;border-radius:19px 19px 5px 19px;font-size:15.5px;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere}
.dans{justify-self:end;font-size:12px;color:var(--doux);margin-top:-8px}

/* ---------- Carte de réponse ---------- */
.carte{background:var(--carte);border-radius:19px 19px 19px 5px;padding:16px;display:grid;gap:16px;box-shadow:0 1px 2px rgba(20,50,35,.07)}
.carte-tete{font-size:13px;color:var(--doux);font-weight:500}
.pastilles{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:-4px -16px 0;padding:0 16px}
.pastilles::-webkit-scrollbar{display:none}
.pastille{flex:none;font-size:13px;font-weight:600;padding:7px 12px;border-radius:999px;background:var(--menthe);color:var(--vert-fonce)}
.pastille[aria-pressed="true"]{background:var(--vert-fonce);color:var(--carte)}

.section{display:grid;gap:10px;font-family:var(--f-lecture)}
.section[hidden]{display:none}
.section + .section{border-top:1px solid var(--filet);padding-top:14px}
.section h3{margin:0;font:700 11.5px/1.25 var(--f-repere);letter-spacing:.09em;text-transform:uppercase;color:var(--vert-fonce)}
.element{display:grid;gap:8px}
.element + .element{margin-top:4px}
.etiquette{font:700 10.5px/1.35 var(--f-repere);letter-spacing:.08em;text-transform:uppercase;color:var(--doux)}
.etiquette.nature{justify-self:start;background:var(--menthe);color:var(--vert-fonce);padding:4px 8px;border-radius:6px}
.original{direction:rtl;text-align:right;font-family:var(--f-arabe);font-size:19px;line-height:1.85;color:var(--vert-fonce);background:var(--fond);border-radius:12px;padding:9px 13px;margin:0}
.citation{margin:0;font-style:italic;font-size:16px;line-height:1.6}
.element p{margin:0;font-size:15.5px;line-height:1.62}
.francais{font-size:13.5px;color:var(--doux)}
.francais summary{cursor:pointer;font-family:var(--f-repere);font-weight:600;font-size:12px}
.francais blockquote{margin:6px 0 0;font-style:italic;line-height:1.55}
.ref{font:500 12.5px/1.4 var(--f-repere);color:var(--doux)}

.resume{background:var(--menthe);border-radius:14px;padding:14px 15px;display:grid;gap:6px;font-family:var(--f-lecture)}
.resume h3{margin:0;font:700 11.5px/1.25 var(--f-repere);letter-spacing:.09em;text-transform:uppercase;color:var(--vert-fonce)}
.resume p{margin:0;font-size:16px;line-height:1.6}
.mention{margin:0;font-size:12.5px;color:var(--doux);line-height:1.45}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.actions button{font-size:13px;font-weight:600;padding:8px 12px;border-radius:11px;border:1px solid var(--filet);color:var(--vert-fonce)}

/* Attente */
.attente{display:grid;gap:10px}
.etapes{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14.5px}
.etapes li{display:flex;align-items:center;gap:10px;color:var(--doux)}
.etapes li::before{content:"";width:9px;height:9px;border-radius:50%;border:2px solid var(--filet);flex:none}
.etapes li.faite{color:var(--encre)}
.etapes li.faite::before{background:var(--vert);border-color:var(--vert)}
.etapes li.encours{color:var(--encre);font-weight:600}
.etapes li.encours::before{border-color:var(--vert);animation:pouls 1.1s ease-in-out infinite}
.attente .ref{margin:0}
@keyframes pouls{50%{background:var(--vert)}}

/* Refus, erreurs */
.carte.alerte{border:1px solid var(--filet)}
.carte.alerte h3{margin:0;font-size:16px;font-weight:700}
.carte.alerte p{margin:0;font-size:15px;line-height:1.55}
.carte.panne{background:var(--erreur-fond)}
.carte.panne h3{color:var(--erreur)}

/* ---------- Pied : portée + saisie ---------- */
.pied{flex:none;background:var(--fond);border-top:1px solid var(--filet);padding:8px 12px max(12px,env(safe-area-inset-bottom))}
.portee,.saisie{width:min(100%,var(--largeur));margin:0 auto}
.portee{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--doux);padding:0 2px 8px}
.bouton-portee{display:inline-flex;align-items:center;gap:6px;background:var(--carte);border:1px solid var(--filet);border-radius:999px;padding:5px 11px;font-weight:600;color:var(--vert-fonce);font-size:13px;max-width:70%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bouton-portee::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:2px;flex:none}
.saisie{display:flex;gap:8px;align-items:flex-end}
.saisie textarea{flex:1;resize:none;font:inherit;font-size:16px;line-height:1.4;padding:11px 16px;border-radius:22px;border:1px solid var(--filet);background:var(--carte);color:var(--encre);max-height:140px}
.saisie textarea::placeholder{color:var(--doux)}
.envoyer{width:44px;height:44px;border-radius:50%;background:var(--vert);color:var(--sur-vert);display:grid;place-items:center;flex:none}
.envoyer svg{width:22px;height:22px}
.envoyer:disabled{opacity:.45;cursor:default}

/* ---------- Feuilles (choix d'ouvrage, menu) ---------- */
.feuille{border:0;padding:0;margin:auto auto 0;width:min(100%,560px);max-width:100%;max-height:88vh;border-radius:24px 24px 0 0;background:var(--carte);color:var(--encre)}
.feuille::backdrop{background:var(--voile)}
@media (min-width:700px){.feuille{margin:auto;border-radius:24px}}
.feuille-corps{display:grid;gap:12px;padding:10px 18px max(22px,env(safe-area-inset-bottom))}
.poignee{width:40px;height:4px;border-radius:2px;background:var(--filet);justify-self:center}
.feuille h2{margin:0;font-size:19px;font-weight:700}
.feuille-corps > p{margin:-6px 0 0;font-size:14px;color:var(--doux)}
.grille{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tuile{display:grid;gap:2px;text-align:left;padding:10px 12px;border-radius:13px;background:var(--fond);border:1px solid var(--filet);min-height:58px;align-content:start}
.tuile b{font-size:14px;line-height:1.22;font-weight:700}
.tuile span{font-size:12px;color:var(--doux);font-weight:500}
.tuile[aria-checked="true"]{background:var(--vert-fonce);border-color:var(--vert-fonce);color:var(--carte)}
.tuile[aria-checked="true"] span{color:inherit;opacity:.78}
.ligne-menu{text-align:left;padding:13px 2px;border-bottom:1px solid var(--filet);font-weight:600;font-size:15.5px}
.apropos{display:grid;gap:8px;padding-top:6px}
.apropos h3{margin:0;font-size:15px}
.apropos p{margin:0;font-size:14px;line-height:1.55;color:var(--doux)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}