/* ==========================================================================
   ISLAM PAS A PAS — SYSTEME DE DESIGN
   --------------------------------------------------------------------------
   Toutes les valeurs de ce fichier viennent du cahier des charges, section 3.
   Elles ne sont pas negociables et ne doivent pas etre "ajustees a l'oeil" :
   si une valeur doit changer, elle change d'abord dans le cahier des charges.

   Dessine pour 390 px de large, une seule main, un pouce. Le bureau est une
   adaptation (section 12), jamais le point de depart.
   ========================================================================== */

:root {
  /* --- Fonds ------------------------------------------------------------ */
  --fond-app:        #FAF7F0;   /* toutes les pages sauf le QCM */
  --fond-qcm:        #EFEADF;   /* mode QCM : un ton plus chaud, plus concentre */
  --papier:          #FFFDF8;   /* cartes, blocs, champs */
  --papier-arriere:  #FAF5EA;   /* la carte suivante, derriere la carte active */

  /* --- Vert ------------------------------------------------------------- */
  --vert:            #0F5132;
  --vert-fonce:      #0B3D26;
  --vert-juste:      #2F7A52;
  --vert-voile:      #EAF1EC;
  --vert-voile-2:    #EFF5F1;
  --vert-voile-3:    #EAF3ED;

  /* --- Or ---------------------------------------------------------------- */
  --or:              #C9A227;
  --or-clair:        #E3C97A;
  --or-texte:        #7E6A22;
  --or-texte-2:      #9A7A12;
  --or-voile:        #FBF2D8;
  --or-bordure:      #E8D9A6;
  --sur-or:          #3A2E06;
  --sur-or-2:        #26200A;

  /* --- Rouge ------------------------------------------------------------- */
  --rouge:           #A63D40;
  --rouge-texte:     #7A2A2C;
  --rouge-voile:     #FBEDED;
  --rouge-bordure:   #E7C4C5;

  /* --- Texte ------------------------------------------------------------- */
  --encre:           #1C2620;
  --encre-titre:     #12211A;
  --texte-2:         #55635B;
  --texte-3:         #5F6D66;   /* la limite basse. JAMAIS plus clair sur ivoire. */

  /* --- Traits ------------------------------------------------------------ */
  --trait:           #E6DFD1;
  --trait-2:         #E0D8C7;
  --trait-3:         #DDD6C6;
  --trait-4:         #D6CEBC;
  --trait-5:         #DFD7C7;

  /* --- Sur fond vert fonce ----------------------------------------------- */
  --sur-vert:        #FFFDF8;
  --sur-vert-2:      #B9D2C4;
  --sur-vert-3:      #A9C7B6;
  --sur-vert-4:      #7FA893;
  --sur-vert-5:      #D8E5DD;

  /* --- Polices ----------------------------------------------------------- */
  --titre:  'Marcellus', Georgia, serif;
  --corps:  'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --arabe:  'Amiri', 'Scheherazade New', serif;

  /* --- Geometrie (section 3.3) ------------------------------------------- */
  --marge:        20px;   /* marge laterale de l'ecran */
  --r-carte:      26px;   /* carte de QCM */
  --r-bloc:       14px;   /* bloc / champ : 14 a 18 */
  --r-bloc-2:     18px;
  --r-pastille:   22px;   /* pastille : 15 a 22 */
  --r-lettre:     10px;   /* badge de lettre : 8 a 12 */
  --h-bouton:     56px;
  --r-bouton:     15px;
  --h-bouton-2:   52px;
  --r-bouton-2:   14px;
  --cible:        44px;   /* toute cible tactile, section 2.6 */

  --ombre-carte:  0 14px 34px rgba(28, 38, 32, 0.12);
  --ombre-vert:   0 4px 14px rgba(15, 81, 50, 0.22);
  --ombre-or:     0 4px 14px rgba(201, 162, 39, 0.35);

  /* --- V2, annexe D : la couche visuelle ---------------------------------
     Ces valeurs ne se discutent pas et ne s'arrondissent pas. Les opacites
     surtout : au-dessus, le motif gene la lecture ; en dessous, il
     disparait et on a paye le poids pour rien. */
  --papier-enlumine:  #FCF8EC;   /* bandeau enlumine et cadre de calligraphie */
  --photo-fond:       #123D2B;   /* fond des emplacements photo */
  --photo-voile:      linear-gradient(180deg, rgba(11,61,38,0.15) 0%, rgba(11,61,38,0.78) 100%);
  --or-sur-photo:     #E3C97A;
  --ivoire-sur-photo: #F2E7C8;
  --or-arabe:         #C7B173;   /* arabe sur fond vert fonce */

  --op-fond-qcm:      0.055;
  --op-fond-bandeau:  0.13;
  --op-fond-photo:    0.20;
  --op-rosace-carte:  0.09;
  --op-rosace-tuile:  0.10;
  --op-rosace-cadre:  0.16;
  --op-rosace-score:  0.30;

  /* L'echelle de la carte de QCM vaut 1 partout ailleurs : le corrige et le
     resultat reutilisent `.carte-arabe`, et une variable absente rendrait
     invalide tout `calc()` qui s'en sert. */
  --echelle: 1;
}

/* ==========================================================================
   REMISE A ZERO
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond-app);
  color: var(--encre);
  font-family: var(--corps);
  font-size: 15px;
  line-height: 1.55;
  /* Le QCM se joue au doigt : le navigateur ne doit pas interpreter le geste
     comme un defilement ou un zoom pendant qu'on fait glisser une carte. */
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

/* Le fond passe au ton chaud quand on est dans un QCM. */
body[data-mode="qcm"] { background: var(--fond-qcm); }

h1, h2, h3, p, figure, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }

button, input, select {
  font: inherit;
  color: inherit;
  margin: 0;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
  /* Une cible tactile ne descend jamais sous 44 px (section 2.6). Le controle
     automatique de la recette le verifie sur CHAQUE bouton de CHAQUE ecran. */
  min-height: var(--cible);
  min-width: var(--cible);
}

a { color: var(--vert); text-decoration: none; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--vert);
  outline-offset: 2px;
}

svg { display: block; flex-shrink: 0; }

/* ==========================================================================
   TYPOGRAPHIE (section 3.2)
   ========================================================================== */

.t-page   { font-family: var(--titre); font-size: 29px;   line-height: 1.15; color: var(--encre-titre); }
.t-bandeau{ font-family: var(--titre); font-size: 24px;   line-height: 1.2;  }
.t-question{font-family: var(--titre); font-size: 21px;   line-height: 1.35; color: var(--encre-titre); text-wrap: pretty; }
.t-bloc   { font-family: var(--titre); font-size: 17px;   line-height: 1.25; color: var(--vert-fonce); }
.t-chiffre{ font-family: var(--titre); font-size: 22px;   line-height: 1;    color: var(--vert); }

.c-reponse{ font-size: 14.5px; line-height: 1.3; }
.c-meta   { font-size: 12.5px; color: var(--texte-2); }
.c-sur    { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; }

/* L'arabe : direction droite-a-gauche, jamais deforme, jamais en italique,
   jamais tronque (section 2.10). */
.arabe {
  font-family: var(--arabe);
  font-size: 26px;
  line-height: 1.6;
  direction: rtl;
  font-style: normal;
  font-stretch: normal;
  white-space: normal;
  overflow-wrap: break-word;
}
.arabe-grand { font-size: 28px; }

/* ==========================================================================
   MISE EN PAGE
   --------------------------------------------------------------------------
   Section 3.3 : tout groupe d'elements freres se pose en flex ou grid avec
   gap. Jamais de marges au coup par coup.
   ========================================================================== */

.ecran {
  position: relative;   /* le fond carrele se pose dessus, en absolu */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* Rien ne doit jamais elargir la page : une seule main, un pouce, et un
     ecran qui ne retrecit pas tout seul. */
  overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   LE FOND CARRELE (cahier V2, section 3.4)

   Pose en absolu SOUS le contenu, qui passe donc en `position: relative`.
   Ni le doigt ni les lecteurs d'ecran ne le rencontrent : c'est un decor,
   il n'a rien a dire et rien a recevoir.

   L'opacite n'est pas fixee ici : elle depend de l'emplacement (§3.3) et
   arrive par l'attribut `data-op` de la marque.
   -------------------------------------------------------------------------- */

.fond-motif {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.calque-motif {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* Le contenu de tout ecran qui porte un fond passe devant lui.
   PAS DE `z-index` ICI. J'en avais mis un, et il a fait passer le corps
   AU-DESSUS du pied fixe : le bouton « Commencer les 20 questions » etait
   visible, et un bouton d'option invisible recevait le clic a sa place.
   `position: relative` suffit — a niveau egal, l'ordre du document tranche,
   et le fond est declare avant. */
.ecran > .corps { position: relative; }

/* --------------------------------------------------------------------------
   LES EMPLACEMENTS PHOTO (cahier V2, section 6)

   Le VOILE DEGRADE n'est pas une coquetterie : c'est lui qui garantit que le
   texte pose dessus reste lisible, quelle que soit la photo qu'on finira par
   mettre. Il s'applique a toutes, sans exception (6.3).

   Tant qu'aucune image sous licence verifiee n'est fournie, l'emplacement
   reste un cadre pointille qui dit ce qu'on cherche. C'est honnete, et ca
   indique au proprietaire du site ce qu'il reste a faire.
   -------------------------------------------------------------------------- */

.photo {
  position: relative;
  overflow: hidden;
  background: var(--photo-fond);
}
.photo img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.photo-voile {
  position: absolute;
  inset: 0;
  background: var(--photo-voile);
  pointer-events: none;
}
.photo-dessus { position: absolute; inset: 0; }

.photo-manque {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  border: 1px dashed rgba(227, 201, 122, 0.7);
  border-radius: 10px;
  padding: 8px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 80%;
}
.photo-manque-t {
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--or-sur-photo);
}
.photo-manque-l { font-size: 12.5px; color: var(--ivoire-sur-photo); }

/* Quand du texte est pose sur l'emplacement — le verset de la session, le
   titre d'une couverture — le cadre pointille remonte pour ne pas se mettre
   dessus. Deux textes superposes, c'est deux textes illisibles.
   L'attribut est pose par photo.js, pas par `:has()` : ce selecteur manque
   encore sur les telephones un peu anciens, et c'est justement eux qu'on
   sert. */
.photo[data-dessus] .photo-manque {
  top: 12px;
  transform: translateX(-50%);
  padding: 6px 12px;
}

.corps {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 26px var(--marge) 0 var(--marge);
}

.pile      { display: flex; flex-direction: column; }
.pile-9    { display: flex; flex-direction: column; gap: 9px; }
.pile-11   { display: flex; flex-direction: column; gap: 11px; }
.pile-13   { display: flex; flex-direction: column; gap: 13px; }
.pile-18   { display: flex; flex-direction: column; gap: 18px; }
.pile-22   { display: flex; flex-direction: column; gap: 22px; }
.rang      { display: flex; align-items: center; gap: 10px; }
.rang-entre{ display: flex; align-items: center; justify-content: space-between; }
.pousse    { flex-grow: 1; }

/* ==========================================================================
   BLOCS ET BOUTONS
   ========================================================================== */

.bloc {
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: var(--r-bloc);
}

.bouton {
  height: var(--h-bouton);
  border-radius: var(--r-bouton);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  width: 100%;
}
.bouton-vert { background: var(--vert); color: var(--sur-vert); box-shadow: var(--ombre-vert); }
.bouton-or   { background: var(--or);   color: var(--sur-or);   box-shadow: 0 4px 14px rgba(201,162,39,0.28); }
.bouton-2 {
  height: var(--h-bouton-2);
  border-radius: var(--r-bouton-2);
  background: var(--papier);
  border: 1px solid var(--trait-2);
  color: var(--encre);
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.bouton[disabled] { opacity: 0.5; }

/* Pastille ronde d'en-tete : profil, sortie. Toujours 44 px. */
.pastille {
  width: var(--cible);
  height: var(--cible);
  border-radius: var(--r-pastille);
  border: 1px solid var(--trait);
  background: var(--papier);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   ACCESSIBILITE
   ========================================================================== */

.invisible {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--vert);
  color: var(--sur-vert);
  padding: 12px 16px;
  border-radius: 0 0 var(--r-bloc) 0;
  z-index: 100;
}
.saut-contenu:focus { left: 0; }

/* Section 7.9 : si la personne a demande moins d'animation, plus de rotation
   ni d'envol. Un simple fondu de 120 ms. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.12s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.12s !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   BUREAU (section 12)
   --------------------------------------------------------------------------
   AUCUN element nouveau n'apparait sur grand ecran. On centre, on elargit
   un peu, c'est tout.
   ========================================================================== */

@media (min-width: 900px) {
  .ecran { max-width: 480px; margin: 0 auto; }
}