/* La grille de la page « Douas », par-dessus socle.css : une carte = une doua — l'image dans la première ligne, puis le titre et la
   catégorie. 4 colonnes sur ordinateur, 3 sur tablette, 2 sur téléphone ; la carte entière est un lien. Aucune ombre portée. */
/* l'intro, la légende et le texte replié du bas : la largeur de la grille des 4 colonnes (Myriam, 04/10), pas celle des pages de texte.
   Le texte du bas est HORS de <main id="douas"> (comme sur /blog/) : on le prend par « main#douas ~ », pour ne toucher qu'à cette page */
#douas .corps.intro { max-width:1100px; padding-bottom:6px; }
main#douas ~ .blog-texte { max-width:1100px; box-sizing:border-box; }   /* les marges comptées DANS la largeur, comme la grille */
#douas .corps.intro p { margin:0; }
/* centrés au milieu de l'écran : la phrase d'intro, la ligne des étiquettes, « Que veulent dire ces étiquettes ? » ; le texte qui se
   déplie dessous reste à gauche (Myriam, 04/10) */
#douas .intro > p { text-align:center; text-wrap:balance; }
/* la légende des étiquettes (Myriam, 04/10) : les 4 couleurs des fiches, en version claire pour le papier, et leur sens replié dessous */
/* la même colonne et la même taille que la phrase d'intro (18 px, 17 px sur téléphone : socle.css) */
#douas .legende { margin:16px 0 0; font-size:18px; line-height:1.8; }
#douas .legende-tags { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
#douas .etiq { display:inline-block; padding:3px 12px; border:1px solid; border-radius:999px; font:500 13px/1.45 'Jost',sans-serif; white-space:nowrap; }
#douas .etiq.tag-sahih { color:#2f6b3c; border-color:#9cc9a6; background:#ecf5ee; }
#douas .etiq.tag-daif { color:#9b2f25; border-color:#e3a59d; background:#fbecea; }
#douas .etiq.tag-coran { color:#2c5a8f; border-color:#a3bfe0; background:#ebf1f9; }
#douas .etiq.tag-divergence { color:#94500f; border-color:#e5b88c; background:#fbf0e4; }
#douas .legende details { margin:6px 0 0; }
#douas .legende summary { display:flex; width:fit-content; margin:0 auto; align-items:center; gap:9px; min-height:44px; cursor:pointer; list-style:none; color:var(--titre); font-weight:500; line-height:1.4; }
#douas .legende summary::-webkit-details-marker { display:none; }
#douas .legende summary::after { content:''; width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); margin-bottom:3px; transition:transform .2s; }
#douas .legende details[open] summary::after { transform:rotate(225deg); margin-bottom:-2px; }
#douas .legende summary:focus-visible { outline:3px solid var(--focus); outline-offset:3px; border-radius:6px; }
#douas .legende ul { list-style:none; margin:10px 0 0; padding:0; display:grid; gap:10px; }
#douas .legende li .etiq { margin-right:6px; }
#douas .legende .etiq { padding:2px 14px; font-size:1em; }   /* la taille du texte de la légende (18 px, 17 px sur téléphone) */
@media (max-width:700px) { #douas .legende { font-size:17px; } }   /* comme la phrase d'intro sur téléphone */
#douas .douas-zone { max-width:1100px; margin:0 auto; padding:26px 20px 64px; }
#douas .douas-grille { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
#douas .douas-grille > li { padding:0; min-width:0; font-size:inherit; line-height:inherit; }

#douas .carte { display:flex; flex-direction:column; height:100%; background:var(--carte); border:1px solid #ece1d0; border-radius:16px; overflow:hidden;
  color:inherit; text-decoration:none; transition:border-color .2s, transform .2s; }
#douas .carte:hover { border-color:#d6a868; transform:translateY(-3px); }
#douas .carte:focus-visible { outline:3px solid var(--focus); outline-offset:4px; }
#douas .carte-image { position:relative; display:block; aspect-ratio:1; overflow:hidden; background:#efe4d2; }
#douas .carte-image img, #douas .fiche-image img { display:block; width:100%; height:100%; object-fit:cover; }
#douas .carte-texte { display:flex; flex-direction:column; gap:6px; flex:1; padding:14px 14px 16px; }
#douas .carte-titre { margin:0; color:var(--titre); font:600 18px/1.3 'Fredoka','Jost',sans-serif; letter-spacing:0; }
#douas .carte-cat { margin-top:auto; color:var(--sourd); font:500 11.5px/1.4 'Jost',sans-serif; letter-spacing:.12em; text-transform:uppercase; }
#douas .carte:hover .carte-titre { color:#5e3f22; }

/* l'image absente (carte et fiche) : l'aplat nuit et l'arche de rendu/base.css, et son étiquette — jamais une image inventée */
#douas .vide { background:radial-gradient(ellipse 60% 70% at 72% 45%, rgba(233,172,82,.20), transparent 62%), linear-gradient(160deg,#3a2d20 0%,#221c17 55%,#181410 100%); }
#douas .vide::before { content:''; position:absolute; left:50%; top:16%; height:58%; aspect-ratio:.62; transform:translateX(-50%); border:1px solid rgba(233,172,82,.45);
  border-radius:999px 999px 6px 6px; box-shadow:inset 0 0 0 8px rgba(233,172,82,.08); }
#douas .vide .etiquette { position:absolute; left:50%; bottom:8%; transform:translateX(-50%); white-space:nowrap; padding:4px 8px; border:1px dashed rgba(241,231,216,.55);
  border-radius:6px; color:#f1e7d8; font:500 10px/1.4 'Jost',sans-serif; letter-spacing:.14em; text-transform:uppercase; }
#douas .douas-sans-js { text-align:center; color:var(--sourd); }

/* le texte replié du bas (rendu/base.css, .blog-texte) : celui de Myriam a des intertitres, des mots en gras et un mot arabe.
   Il est HORS de <main id="douas"> (comme sur /blog/), d'où « main#douas ~ » */
main#douas ~ .blog-texte h3 { margin:30px 0 12px; color:#765433; font:600 20px/1.35 'Fredoka','Jost',sans-serif; text-wrap:balance; }
main#douas ~ .blog-texte strong { font-weight:600; color:#362b24; }
main#douas ~ .blog-texte .ar-inline { font-family:'Noto Naskh Arabic',serif; font-size:1.3em; line-height:1; padding:0 .1em; }

@media (max-width:999px) { #douas .douas-grille { grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; } }
@media (max-width:699px) {
  #douas .douas-zone { padding:20px 16px 52px; }
  #douas .corps.intro, main#douas ~ .blog-texte { padding-left:16px; padding-right:16px; }   /* le bord des cartes sur téléphone */
  #douas .douas-grille { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  #douas .carte-texte { padding:11px 11px 13px; gap:5px; }
  #douas .carte-titre { font-size:15.5px; }
  #douas .carte-cat { font-size:10.5px; letter-spacing:.1em; }
  #douas .vide .etiquette { font-size:9px; letter-spacing:.1em; padding:3px 6px; }
  main#douas ~ .blog-texte h3 { font-size:18px; }
}
@media (prefers-reduced-motion:reduce) { #douas .carte, #douas .carte:hover { transition:none; transform:none; } #douas .legende summary::after { transition:none; } }