/* -----------------------------------------------------------------------------
   style.css – site de l'association Îlot 3                   (14 NOV 2026)
   -----------------------------------------------------------------------------
   Rôle   : mise en forme commune des pages du site (arabe, RTL).

   Parties :
     1. Couleurs et base (police Noto Sans Arabic, tailles, interligne).
     2. (bandeau supprimé le 14 NOV 2026 : la page est le document imprimé).
     3. En-tête du document : titre, bloc auteur, encadrés colorés.
     4. Titres de sections, listes, tableaux.
     5. Plan de l'étude et barre d'outils (sélecteur de police provisoire).
     6. Pied de page, impression (A4, « صفحة X من N » en marge basse), petit écran.
   ----------------------------------------------------------------------------- */

/* 1. Couleurs et base */
:root {
  --bleu: #1F4E79;   --bleu-clair: #DCE6F1;  --bleu-fond: #EAF1F8;
  --orange: #E08A00; --orange-fond: #FFF4E5;
  --rouge: #C00000;  --rouge-fond: #FDECEC;
  --vert: #2E7D32;   --vert-fond: #EAF6EA;
  --gris: #595959;   --gris-table: #9AA3AD; --lien: #0563C1;
  --fond: #F3F5F8;   --papier: #FFFFFF;     --texte: #1A1A1A;
}
* { box-sizing: border-box; }
html { background: var(--fond); scroll-behavior: smooth; }
body {
  font-family: var(--police, "Noto Sans Arabic"), "Segoe UI", Tahoma, Arial, sans-serif;
  font-size: 17px; line-height: 1.8; color: var(--texte);
  margin: 0; direction: rtl;
}
a { color: var(--lien); text-decoration: underline; text-underline-offset: 3px; }
/* Adresse en lettres latines : police latine plus massive que l'arabe, d'où .85em */
a[dir="ltr"] { white-space: nowrap; unicode-bidi: embed; font-size: .85em; }
p { margin: 0 0 .6em; text-align: justify; }
b, strong { font-weight: 700; }
main { max-width: 860px; margin: 0 auto; padding: 3.2rem 1.25rem 3rem; }
.feuille { background: var(--papier); border-radius: 10px; padding: 2rem 2.2rem; box-shadow: 0 1px 6px rgba(0,0,0,.08); }

/* 3. En-tête du document */
.titre { text-align: center; color: var(--bleu); font-size: 1.7rem; font-weight: 700; margin: 0 0 .4em; line-height: 1.4; }
.avis { text-align: center; color: #9A5B00; background: var(--orange-fond); border-radius: 6px; font-size: 1.1rem; font-weight: 700; padding: .5em 1em; margin: 0 auto 1.1em; max-width: 40em; line-height: 1.6; }
.auteur { text-align: center; margin: 0 0 1.4em; line-height: 1.6; }
.auteur .nom { font-weight: 700; font-size: 1.05rem; }
.auteur .info { color: var(--gris); font-size: .9rem; }
.auteur .date { color: var(--gris); font-size: .9rem; font-style: italic; }
.encadre { padding: .7em 1.1em; margin: .6em 0 1em; border-right: 5px solid; border-radius: 6px; text-align: justify; }
.encadre.bleu { background: var(--bleu-fond); border-color: var(--bleu); }
.encadre p { margin: 0 0 .5em; }
.encadre p:last-child { margin-bottom: 0; }
.encadre.orange { background: var(--orange-fond); border-color: var(--orange); text-align: start; }
.encadre.rouge { background: var(--rouge-fond); border-color: var(--rouge); }
.encadre.vert { background: var(--vert-fond); border-color: var(--vert); }

/* 4. Titres, listes, tableaux */
h1.section, h2 { color: var(--bleu); font-size: 1.35rem; font-weight: 700; border-bottom: 2px solid var(--bleu); padding-bottom: .2em; margin: 1.4em 0 .6em; text-align: start; line-height: 1.4; }
h1.section { margin-top: 0; font-size: 1.5rem; }
h3 { font-size: 1.15rem; font-weight: 700; margin: 1.2em 0 .5em; text-align: start; color: #222; }
ol.etapes, ul.puces { margin: 0 0 .6em; padding: 0 1.6em 0 0; }
ol.etapes li, ul.puces li { margin: 0 0 .4em; padding-right: .25em; text-align: justify; }
ol.etapes li::marker { font-weight: 700; color: var(--bleu); }
ul.puces { list-style: "•  "; padding-right: 1.3em; }
table { border-collapse: collapse; width: 100%; margin: .5em 0 1em; font-size: .95rem; table-layout: fixed; }
th, td { border: 1px solid var(--gris-table); padding: .4em .6em; vertical-align: top; text-align: start; }
th { background: var(--bleu-clair); text-align: center; font-weight: 700; }
th .fr { display: block; color: var(--gris); font-style: italic; font-size: .78rem; font-weight: 600; }
tbody tr:nth-child(even) { background: #FAFBFD; }
table.comparatif col:nth-child(1) { width: 26%; }
table.comparatif col:nth-child(2) { width: 30%; }
table.budget col:nth-child(1) { width: 68%; }
table.budget td:last-child { font-weight: 700; white-space: nowrap; }
table.budget tr.solde-moins td { color: var(--rouge); font-weight: 700; }
table.budget tr.solde-plus td { color: var(--vert); font-weight: 700; }
table.budget tr:nth-last-child(2) td { font-weight: 700; }
table.procedure { font-weight: 400; }
table.procedure col:nth-child(1) { width: 24%; }
table.procedure col:nth-child(3) { width: 30%; }
table.procedure td:first-child { font-weight: 700; }
table.planning col:nth-child(1) { width: 18%; }
table.planning col:nth-child(6) { width: 20%; }
table.planning td { text-align: center; }
table.planning td:first-child { text-align: start; font-weight: 700; }
.note { font-size: .95rem; }
.petit { color: var(--gris); font-size: .9rem; }

/* 5. Sommaire et barre d'outils */
.outils { margin: 0 0 .9rem; display: flex; justify-content: flex-start; }
.choix-police { font-size: .85rem; color: var(--gris);
  display: inline-flex; align-items: center; gap: .4rem; background: var(--papier); border: 1px solid #DDE3EA;
  border-radius: 6px; padding: .25rem .6rem; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.choix-police select { font: inherit; font-size: .85rem; border-radius: 5px; border: 1px solid #C5CCD6; padding: .2rem .4rem; background: #fff; color: var(--bleu); }
.bouton { display: inline-block; background: var(--bleu); color: #fff; border: 0; border-radius: 6px; padding: .45em 1.1em; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; }
.bouton:hover { background: #163A5B; }

/* 6. Pied de page, impression, petit écran */
footer.pied { text-align: center; color: var(--gris); font-size: .85rem; padding: 1.2rem 1rem 2rem; border-top: 1px solid #DDE3EA; }
footer.pied p { margin: 0 0 .4em; text-align: center; }
footer.pied .citation { color: #333; font-size: .9rem; }
.sommaire { background: var(--bleu-fond); border: 1px solid var(--bleu-clair); border-radius: 8px; padding: .8rem 1.2rem; margin: 0 0 1.4rem; }
.sommaire .titre-sommaire { font-weight: 700; color: var(--bleu); margin: 0 0 .3em; text-align: start; }
.sommaire ol { margin: 0; padding: 0 .4em 0 0; list-style: none; }
.sommaire li { margin: .15em 0; }
.sommaire a { text-decoration: none; font-weight: 600; }
.sommaire a:hover { text-decoration: underline; }
h2 { scroll-margin-top: 1rem; position: relative; }
h2 .retour { float: left; font-size: .8rem; font-weight: 400; color: var(--gris); text-decoration: none; margin-top: .5em; border: 1px solid #DDE3EA; border-radius: 5px; padding: .05em .5em; }
h2 .retour:hover { color: var(--bleu); border-color: var(--bleu); }
@page {
  size: A4; margin: 2cm 2cm 2.2cm;
  @bottom-center {
    content: "خطة عمل غير نهائية، وكل الاقتراحات قابلة للنقاش — © 2026 M. L. FOUGHALI — صفحة " counter(page) " من " counter(pages);
    direction: rtl; font-family: var(--police, "Noto Sans Arabic"), "Segoe UI", Tahoma, sans-serif;
    font-size: 9pt; color: #595959; border-top: .5pt solid #A6A6A6; padding-top: 3pt; margin-top: 6pt;
  }
}
@media print {
  html, body { background: #fff; font-size: 11.5pt; line-height: 1.55; }
  .outils, .choix-police, h2 .retour { display: none !important; }
  footer.pied { border-top: 1px solid #DDE3EA; margin-top: 1.5em; padding: .8em 0 0; font-size: 9.5pt; }
  .sommaire { break-inside: avoid; }
    main { max-width: none; padding: 0; }
  .feuille { box-shadow: none; padding: 0; border-radius: 0; }
  h1.section, h2, h3 { break-after: avoid; }
  .encadre, table, tr, .insecable { break-inside: avoid; }
  a { color: var(--lien); }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  main { padding: 1rem .75rem 2rem; }
  .feuille { padding: 1.2rem 1rem; border-radius: 6px; }
  .titre { font-size: 1.35rem; }
    table { font-size: .85rem; }
  ol.etapes { padding-right: 1.3em; }
}