/* Charte graphique de l'affiche "15e centenaire — Séminaire sur le Prophète ﷺ"
   (valeurs reprises de flyers/.../v11_affiche_seminaire/generer.py) :
   DM Serif Display (titres), Kaushan Script (manuscrit), DM Sans (texte), Amiri (ﷺ) ;
   zellige d'étoiles à 8 branches dans img/ (voir outils/generer_motifs.py). */

:root {
  --fond: #f4f0e8;
  --fond-2: #ece6da;
  --carte: #ffffff;
  --texte: #0d3f46;
  --fort: #094042;
  --main: #22696d;
  --sub: #4f6566;
  --sep: #a9c4c0;
  --or: #c29b52;
  --surligne: #e3cd9a;
  --petale: #b9cfc6;
  --ombre: rgba(13, 63, 70, 0.10);
  --ok: #2f7a55;
  --ok-texte: #22573d;
  --ok-fond: #e3efe6;
  --ko: #b0503a;
  --ko-texte: #86392a;
  --ko-fond: #f6e4dc;

  --f-titre: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --f-script: 'Kaushan Script', 'Segoe Script', cursive;
  --f-texte: 'DM Sans', 'Segoe UI', sans-serif;

  --radius: 14px;
  --shadow-carte: 0 3px 10px var(--ombre);
  --papier: url(../img/grain.svg) var(--fond);
  /* étoile à 8 branches des puces de l'affiche (chemin ETOILE8) */
  --etoile8: polygon(50% 0%, 64.5% 15%, 85.5% 14.5%, 85% 35.5%, 100% 50%, 85% 64.5%, 85.5% 85.5%, 64.5% 85%, 50% 100%, 35.5% 85%, 14.5% 85.5%, 15% 64.5%, 0% 50%, 15% 35.5%, 14.5% 14.5%, 35.5% 15%);
}

* { box-sizing: border-box; }
button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--papier);
  color: var(--texte);
  font-family: var(--f-texte);
  overflow: hidden;
  overscroll-behavior: none;   /* un balayage ne déclenche ni « page précédente » ni rechargement */
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--f-titre);
  font-weight: 400;
  font-variant-numeric: lining-nums;
  text-wrap: balance;
}

#app {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
}

.view {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  overflow: hidden;
}
.view.active { opacity: 1; pointer-events: auto; }

/* ===================== ELEMENTS DE CHARTE ===================== */

/* Formule ﷺ calligraphiée en or */
.saw {
  font-family: 'Amiri', 'Traditional Arabic', serif;
  font-weight: 400;
  font-style: normal;
  font-size: 0.66em;
  vertical-align: 0.14em;
  margin-left: 0.12em;
  line-height: 0;
  color: var(--or);
  white-space: nowrap;
}

/* Surlignage or au pinceau ("beauté", "actualité") */
mark {
  background: none;
  color: inherit;
  position: relative;
  z-index: 0;
  padding: 0 0.13em;
  white-space: nowrap;
}
mark::before {
  content: '';
  position: absolute;
  left: -0.07em;
  right: -0.13em;
  bottom: 0.13em;
  height: 0.47em;
  background: var(--surligne);
  opacity: 0.85;
  border-radius: 0.33em 0.13em 0.4em 0.17em;
  rotate: -1.5deg;
  z-index: -1;
}

/* Accroche manuscrite (Kaushan Script, comme "Inscription"), précédée d'une étoile or */
.slide-kicker, .script-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--f-script);
  font-size: clamp(1.2rem, 1.9vw, 1.6rem);
  line-height: 1.3;
  color: var(--main);
  margin: 0 0 0.5rem;
}
.slide-kicker::before, .script-kicker::before {
  content: '';
  width: 0.5em;
  height: 0.5em;
  background: var(--or);
  clip-path: var(--etoile8);
  flex-shrink: 0;
}
.kicker-count {
  font-family: var(--f-texte);
  font-weight: 500;
  font-size: 0.6em;
  color: var(--sub);
  letter-spacing: 0.04em;
}

/* Bandeau pétrole à ombre or décalée ("Samedi 10 octobre 2026") */
.date-band, .timeline-date {
  display: inline-block;
  background: var(--fort);
  color: #fff;
  font-family: var(--f-titre);
  font-weight: 400;
  font-variant-numeric: lining-nums;
  white-space: nowrap;
  border-radius: 6px;
  padding: 0.21em 0.71em 0.29em;
  rotate: -1.2deg;
  box-shadow: 0.125em 0.125em 0 var(--or);
}
.date-band {
  font-size: clamp(1.3rem, min(2.6vw, 4.4vh), 2.4rem);
  margin: clamp(1rem, 3vh, 2rem) 0 0;
}
.timeline-date {
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  margin: 0.3rem 0 1.1rem;
  rotate: -2deg;
}

/* Chiffres remplis de zellige et cernés de pétrole (score du quizz) */
.pattern-num {
  font-family: var(--f-titre);
  font-weight: 400;
  font-variant-numeric: lining-nums;
  background: url(../img/motif-chiffres.svg) 0 0 / 0.256em 0.256em;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.03em var(--fort);
}

/* Coins de zellige (pseudo-éléments des slides et des vues). --deco = taille du coin
   haut gauche ; le coin bas droit a son propre dessin, plus petit, comme sur l'affiche. */
.slide::before, .slide::after,
#view-quiz::before, #view-quiz::after,
#view-parole::before, #view-parole::after,
#view-coloriage::before, #view-coloriage::after {
  position: absolute;
  width: var(--deco);
  height: var(--deco);
  background: url(../img/motif-angle.svg) no-repeat 0 0 / contain;
  pointer-events: none;
  z-index: 0;
}
.slide-hero::before, .slide-cta::before, .layout-medallion.slide::before,
#view-quiz::before, #view-parole::before, #view-coloriage::before { content: ''; top: 0; left: 0; }
.slide-hero::after, .slide-cta::after, .layout-medallion.slide::after,
#view-quiz::after, #view-parole::after, #view-coloriage::after {
  content: '';
  bottom: 0;
  right: 0;
  width: calc(var(--deco) * 320 / 380);
  height: calc(var(--deco) * 320 / 380);
  background-image: url(../img/motif-angle-bas.svg);
}
.layout-split-left.slide::after, .layout-watermark.slide::before { content: ''; top: 0; right: 0; transform: scaleX(-1); }
.layout-split-right.slide::after, .layout-watermark.slide::after { content: ''; bottom: 0; left: 0; transform: scaleY(-1); }

/* ===================== BOUTONS ===================== */
.btn-primary {
  font-family: var(--f-titre);
  font-weight: 400;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.btn-primary {
  border: none;
  background: var(--fort);
  color: #fff;
  font-size: 1.25rem;
  padding: 0.55em 1.4em 0.65em;
  box-shadow: 0.25em 0.25em 0 var(--or);
}
.btn-primary:hover { transform: translate(-1px, -1px); box-shadow: calc(0.25em + 1px) calc(0.25em + 1px) 0 var(--or); }
.btn-primary:active { transform: translate(3px, 3px); box-shadow: 0.1em 0.1em 0 var(--or); }

/* variante pastille or */
.btn-gold { background: var(--or); color: var(--fort); box-shadow: 0.25em 0.25em 0 var(--fort); }
.btn-gold:hover { box-shadow: calc(0.25em + 1px) calc(0.25em + 1px) 0 var(--fort); }
.btn-gold:active { box-shadow: 0.1em 0.1em 0 var(--fort); }

/* ===================== VUE "DECOUVRIR" ===================== */
.slide-content { position: absolute; inset: 0; }
#view-scroll { touch-action: pan-y; }   /* les balayages horizontaux sont pour le diaporama */

.slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-content: safe center;
  text-align: center;
  padding: 6vh 12vw 16vh;
  transition: opacity 0.35s ease, transform 0.35s ease;
  background: var(--papier);
  overflow-x: hidden;
  overflow-y: auto;
}
.slide-content.fade .slide { opacity: 0; transform: scale(0.98); }

.slide > * {
  position: relative;
  z-index: 1;
  animation: fadeUp 0.6s cubic-bezier(.22,.8,.32,1) both;
}
.slide > *:nth-child(1) { animation-delay: 0.05s; }
.slide > *:nth-child(2) { animation-delay: 0.15s; }
.slide > *:nth-child(3) { animation-delay: 0.25s; }
.slide > *:nth-child(4) { animation-delay: 0.35s; }
.slide > *:nth-child(5) { animation-delay: 0.45s; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ----- Accueil : bloc-titre de l'affiche (SVG, mêmes positions que son script de mise en page) ----- */
.lockup {
  display: block;
  width: calc(2.66 * clamp(60px, min(21vh, 22vw), 230px));
  height: auto;
  overflow: visible;
  margin-bottom: 0.4rem;
}
.lockup text { font-family: var(--f-titre); font-variant-numeric: lining-nums; }
.lockup-num { font-size: 100px; }
.lockup-contour { fill: var(--fort); stroke: var(--fort); stroke-width: 3; stroke-linejoin: round; }
.lockup-e { font-size: 34px; fill: var(--or); }
.lockup .lockup-script { font-family: var(--f-script); font-size: 37px; fill: var(--main); }
.lockup-sub { font-size: 10px; font-style: italic; fill: var(--texte); }
.lockup .lockup-saw { font-family: 'Amiri', serif; font-style: normal; font-size: 13px; fill: var(--or); }

.slide-hero h1 {
  font-size: clamp(2.2rem, min(5vw, 8vh), 4.6rem);
  line-height: 1;
  color: var(--texte);
  margin: 0.3em 0 0.35em;
  max-width: 1000px;
}
.slide-tagline {
  font-family: var(--f-titre);
  font-style: italic;
  font-size: clamp(1.15rem, min(2.1vw, 3.5vh), 1.8rem);
  line-height: 1.3;
  color: var(--texte);
  max-width: 820px;
  margin: 0;
  text-wrap: balance;
}
.slide-tagline mark { font-weight: 700; }
.slide-signature {
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  font-weight: 500;
  color: var(--sub);
  margin: clamp(1rem, 2.6vh, 1.8rem) 0 0;
}

.slide-hero, .slide-cta { --deco: min(50vh, 30vw, 540px); }

.slide-cta h2 { font-size: clamp(2.4rem, 4.8vw, 4.2rem); }
.cta-actions { display: flex; gap: 1.6rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }
.slide-cta .btn-primary { font-size: 1.35rem; }

/* ----- Slides de contenu ----- */
.slide-shamail, .slide-nom, .slide-quality, .slide-diplomatie, .slide-sira { --deco: min(38vh, 24vw, 420px); }

/* Ses noms : calligraphie arabe en or */
.nom-arabe {
  font-family: 'Amiri', 'Traditional Arabic', serif;
  font-weight: 700;
  font-size: clamp(3.5rem, min(17vh, 24vw), 10.5rem);
  line-height: 1.6;
  color: var(--or);
  margin: 0;
}
.slide-nom h2 { margin: 0 0 0.3rem; }
.nom-sens {
  font-family: var(--f-titre);
  font-style: italic;
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  color: var(--main);
  margin: 0 0 1.2rem;
}
.slide-diplomatie { background: url(../img/grain.svg) var(--fond-2); }

.slide h2 {
  font-size: clamp(2.2rem, 4.2vw, 3.6rem);
  line-height: 1.05;
  color: var(--texte);
  margin: 0.2rem 0 1rem;
  max-width: 900px;
}
.slide-text {
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  line-height: 1.6;
  max-width: 760px;
  color: var(--sub);
  margin: 0;
}

/* ----- Médaillons d'illustration : cercles pétrole de l'affiche ----- */
.icon { width: 100%; height: 100%; display: block; }

.slide-icon-badge {
  position: relative;
  width: 124px;
  height: 124px;
  margin: 0 auto 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  background: var(--fort);
  color: var(--fond);
}
/* Diplomatie : pastille or à anneau pointillé ("Places limitées") */
.slide-diplomatie .slide-icon-badge { background: var(--or); color: var(--fort); }
.slide-diplomatie .slide-icon-badge::after {
  content: '';
  position: absolute;
  inset: 14.7%;
  border: 2.4px dashed var(--fort);
  border-radius: 50%;
  opacity: 0.8;
}
.slide-sira .slide-icon-badge { background: var(--main); }
/* Shamaïl (sa beauté) : médaillon pétrole, dessin or */
.slide-shamail .slide-icon-badge { color: var(--or); }

.layout-split-left, .layout-split-right {
  flex-direction: row;
  gap: 5rem;
  text-align: left;
}
.layout-split-right { flex-direction: row-reverse; }
.layout-split-left .slide-copy, .layout-split-right .slide-copy { max-width: 640px; }
.layout-split-left .slide-icon-badge, .layout-split-right .slide-icon-badge {
  width: 176px;
  height: 176px;
  padding: 42px;
  margin: 0;
  flex-shrink: 0;
}

.layout-watermark .slide-icon-wrap {
  /* le filigrane occupe toute la slide : il apparaît en fondu, sans glisser (sinon il déborde
     le temps de l'animation et fait apparaître puis disparaître une barre de défilement) */
  animation-name: fadeIn;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
  pointer-events: none;
}
.layout-watermark .slide-icon-badge,
.slide-shamail.layout-watermark .slide-icon-badge,
.slide-diplomatie.layout-watermark .slide-icon-badge,
.slide-sira.layout-watermark .slide-icon-badge {
  width: min(56vh, 520px);
  height: min(56vh, 520px);
  padding: 0;
  margin: 0;
  background: none;
  color: var(--petale);
  opacity: 0.45;
}
.layout-watermark .slide-icon-badge::after { content: none; }

@media (max-width: 780px) {
  .layout-split-left, .layout-split-right {
    flex-direction: column;
    text-align: center;
    gap: 1.6rem;
  }
  .layout-split-left .slide-copy, .layout-split-right .slide-copy { max-width: 100%; }
  .layout-split-left .slide-icon-badge, .layout-split-right .slide-icon-badge {
    width: 112px;
    height: 112px;
    padding: 27px;
  }
}

/* ----- Navigation du diaporama ----- */
.nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--fort);
  color: var(--fond);
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 3px 3px 0 var(--or);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.nav-arrow svg { width: 22px; height: 22px; }
.nav-arrow:hover { transform: translateY(-50%) translate(-1px, -1px); box-shadow: 4px 4px 0 var(--or); }
.nav-arrow-left { left: 2.2vw; }
.nav-arrow-right { right: 2.2vw; }

.scroll-footer {
  position: absolute;
  bottom: calc(92px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: var(--carte);
  color: var(--texte);
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  z-index: 5;
  font-size: 0.8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: var(--shadow-carte);
}
.scroll-progress {
  width: 130px;
  height: 5px;
  background: var(--fond-2);
  border-radius: 3px;
  overflow: hidden;
}
#scroll-progress-bar { height: 100%; width: 0%; background: var(--or); }

/* Pause (barre d'espace) : icône ❚❚ + libellé, barre de progression figée */
.scroll-pause { display: none; align-items: center; gap: 0.45rem; color: var(--main); }
.scroll-pause::before {
  content: '';
  width: 8px;
  height: 10px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
  box-sizing: border-box;
}
.scroll-footer.is-paused .scroll-pause { display: inline-flex; }
.scroll-footer.is-paused #scroll-progress-bar { background: var(--sep); }

/* ===================== VUE QUIZ ===================== */
#view-quiz {
  --deco: min(40vh, 24vw, 420px);
  display: flex;
  align-items: center;
  align-items: safe center;
  justify-content: center;
  overflow-y: auto;
  background: var(--papier);
  padding: 4vh 0 calc(110px + env(safe-area-inset-bottom));
}
#quiz-next, #quiz-feedback { scroll-margin-bottom: calc(120px + env(safe-area-inset-bottom)); }

.quiz-wrap { position: relative; z-index: 1; width: min(920px, 92vw); }
.quiz-panel { text-align: center; }
.quiz-panel h2 {
  color: var(--texte);
  font-size: clamp(2.4rem, 4.4vw, 3.8rem);
  line-height: 1.05;
  margin: 0.2rem 0 0.8rem;
}
.quiz-sub { color: var(--sub); font-size: 1.15rem; margin: 0 0 2.4rem; }
.quiz-level-buttons { display: flex; gap: 1.6rem; justify-content: center; flex-wrap: wrap; }

.quiz-progress {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--main);
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 1.4rem;
  font-variant-numeric: tabular-nums;
}
#quiz-score-label {
  font-family: var(--f-titre);
  font-weight: 400;
  font-size: 1.1rem;
  background: var(--fort);
  color: #fff;
  padding: 0.15em 0.7em 0.25em;
  border-radius: 5px;
  box-shadow: 3px 3px 0 var(--or);
  rotate: -1.2deg;
}

.quiz-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  animation: fadeUp 0.5s cubic-bezier(.22,.8,.32,1) both;
}
.quiz-icon-wrap { flex-shrink: 0; }
.quiz-icon-badge {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  color: var(--fond);
  background: var(--fort);
}
.quiz-content { width: 100%; text-align: center; }

.layout-icon-left, .layout-icon-right {
  flex-direction: row;
  align-items: flex-start;
  text-align: left;
  gap: 2.2rem;
}
.layout-icon-right { flex-direction: row-reverse; }
.layout-icon-left .quiz-icon-badge, .layout-icon-right .quiz-icon-badge { width: 116px; height: 116px; padding: 28px; }
.layout-icon-left .quiz-content, .layout-icon-right .quiz-content,
.layout-icon-left #quiz-question-text, .layout-icon-right #quiz-question-text { text-align: left; }

@media (max-width: 780px) {
  .layout-icon-left, .layout-icon-right { flex-direction: column; align-items: center; text-align: center; }
  .layout-icon-left .quiz-content, .layout-icon-right .quiz-content,
  .layout-icon-left #quiz-question-text, .layout-icon-right #quiz-question-text { text-align: center; }
}

#quiz-question-text {
  font-size: clamp(1.6rem, 2.8vw, 2.3rem);
  color: var(--texte);
  margin: 0 0 2rem;
  line-height: 1.15;
}
.quiz-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.quiz-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--f-texte);
  background: var(--carte);
  border: 2px solid transparent;
  color: var(--texte);
  border-radius: var(--radius);
  padding: 0.95rem 1.1rem;
  font-size: 1.05rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--shadow-carte);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.quiz-option:hover:not(:disabled) { border-color: var(--or); transform: translateY(-2px); }
.quiz-option:active:not(:disabled) { transform: translateY(1px); }
.quiz-option:disabled { cursor: default; }
.quiz-option .opt-label { flex: 1; text-align: left; }
.quiz-option .opt-badge {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fort);
  color: var(--fond);
  font-family: var(--f-titre);
  font-size: 1.15rem;
  flex-shrink: 0;
}

.quiz-option.correct { background: var(--ok-fond); border-color: var(--ok); }
.quiz-option.correct .opt-badge { background: var(--ok); }
.quiz-option.correct .opt-label { color: var(--ok-texte); }
.quiz-option.wrong { background: var(--ko-fond); border-color: var(--ko); }
.quiz-option.wrong .opt-badge { background: var(--ko); }
.quiz-option.wrong .opt-label { color: var(--ko-texte); }
.quiz-option .opt-icon { width: 22px; height: 22px; flex-shrink: 0; }
.quiz-option.correct .opt-icon { color: var(--ok-texte); }
.quiz-option.wrong .opt-icon { color: var(--ko-texte); }

.quiz-feedback {
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--sub);
  background: var(--carte);
  border-left: 4px solid var(--or);
  border-radius: 4px var(--radius) var(--radius) 4px;
  padding: 1rem 1.3rem;
  margin: 0 0 1.8rem;
  text-align: left;
  box-shadow: var(--shadow-carte);
}
.quiz-end-score {
  font-size: clamp(5rem, 15vh, 10rem);
  line-height: 1;
  margin: 0.2rem 0 0.5rem;
}
.quiz-end-message {
  font-family: var(--f-titre);
  font-style: italic;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  color: var(--texte);
  margin: 0 0 2rem;
}

/* ===================== VUES "UNE PAROLE" ET "COLORIAGE" ===================== */
#view-parole, #view-coloriage {
  --deco: min(40vh, 24vw, 420px);
  display: flex;
  align-items: center;
  align-items: safe center;
  justify-content: center;
  overflow-y: auto;
  background: var(--papier);
  padding: 4vh 6vw calc(110px + env(safe-area-inset-bottom));
}
.parole-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 5vw, 5.5rem);
  width: min(1250px, 100%);
}
.parole-entete, .coloriage-entete, .coloriage-outils { max-width: 420px; }
.parole-entete h2, .coloriage-entete h2 {
  font-size: clamp(2.4rem, 4.2vw, 3.8rem);
  line-height: 1.05;
  margin: 0.2rem 0 1rem;
}
.parole-aide, .coloriage-aide { color: var(--sub); font-size: 1.15rem; line-height: 1.55; margin: 0 0 1.4rem; }
.parole-zone { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.parole-partager { font-size: 1.05rem; white-space: nowrap; }

/* ----- La carte : dos en zellige, face comme une petite affiche à photographier ----- */
.parole-carte {
  flex-shrink: 0;
  height: min(68vh, 640px);
  aspect-ratio: 4 / 5;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  perspective: 1600px;
}
.carte-inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(.3,.7,.3,1);
}
.parole-carte.is-front .carte-inner { transform: rotateY(180deg); }
.carte-dos, .carte-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 12px 30px rgba(13, 63, 70, 0.18);
}
.carte-dos { background: var(--fort) url(../img/motif-chiffres.svg) 0 0 / 72px 72px; }
/* pastille or à anneau pointillé, comme « Places limitées » */
.carte-pastille {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--or);
  color: var(--fort);
  font-family: var(--f-script);
  font-size: clamp(1.2rem, 3.2vh, 1.9rem);
  line-height: 1.15;
  text-align: center;
  rotate: 12deg;
  box-shadow: 0 0 0 10px var(--fort);
}
.carte-pastille::after {
  content: '';
  position: absolute;
  inset: 7%;
  border: 2.4px dashed var(--fort);
  border-radius: 50%;
  opacity: 0.8;
}
.carte-face {
  transform: rotateY(180deg);
  container-type: inline-size;
  background: var(--papier);
  padding: 13% 11% 10%;
  gap: 4cqi;
  text-align: center;
}
.carte-face::before, .carte-face::after {
  content: '';
  position: absolute;
  width: 44%;
  aspect-ratio: 1;
  background: url(../img/motif-angle.svg) no-repeat 0 0 / contain;
  pointer-events: none;
}
.carte-face::before { top: 0; left: 0; }
.carte-face::after { bottom: 0; right: 0; width: calc(44% * 320 / 380); background-image: url(../img/motif-angle-bas.svg); }
.carte-kicker, .carte-texte, .carte-source, .carte-signature { position: relative; }
.carte-kicker { font-family: var(--f-script); font-size: 7cqi; color: var(--main); }
.carte-texte {
  font-family: var(--f-titre);
  font-size: 8.4cqi;
  line-height: 1.2;
  color: var(--texte);
  text-wrap: balance;
}
.carte-texte.longue { font-size: 6.8cqi; }
.carte-source { font-size: 4.2cqi; font-weight: 500; color: var(--sub); }
.carte-signature {
  margin-top: 2cqi;
  font-family: var(--f-titre);
  font-size: 4.2cqi;
  color: #fff;
  background: var(--fort);
  padding: 0.25em 0.8em 0.35em;
  border-radius: 5px;
  rotate: -1.2deg;
  box-shadow: 0.15em 0.15em 0 var(--or);
}
.carte-signature sup { font-size: 0.6em; }

/* ----- Coloriage : en-tête et outils à gauche, rosace à droite (grand écran) ----- */
.coloriage-wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 420px) auto;
  grid-template-areas: "entete svg" "outils svg";
  column-gap: clamp(2rem, 5vw, 5.5rem);
  align-items: center;
  justify-content: center;
}
.coloriage-entete { grid-area: entete; align-self: end; }
.coloriage-svg { grid-area: svg; }
.coloriage-outils { grid-area: outils; align-self: start; }
.coloriage-palette {
  display: grid;
  grid-template-columns: repeat(5, 52px);
  gap: 12px;
  margin-bottom: 1.8rem;
}
.pastille-couleur {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--c);
  border: 3px solid var(--carte);
  box-shadow: 0 2px 6px var(--ombre);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pastille-couleur:hover { transform: scale(1.08); }
.pastille-couleur[aria-pressed="true"] { transform: scale(1.1); box-shadow: 0 0 0 3px var(--fort), 0 0 0 6px var(--or); }
.pastille-couleur.gomme { border: 2px dashed var(--sep); }
.coloriage-actions { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.coloriage-actions .btn-primary { font-size: 1.1rem; }
.coloriage-svg {
  width: min(78vh, 52vw, 760px);
  height: auto;
  aspect-ratio: 1;
  touch-action: none;
}
.coloriage-fond { fill: var(--fort); }
.coloriage-anneau { fill: none; stroke: var(--or); stroke-width: 6; }
.piece { fill: #fff; cursor: pointer; transition: fill 0.15s ease; }

/* Écran en hauteur (tablette en portrait) ou étroit : tout en une colonne, dimensionné pour tenir
   dans l'écran sans passer sous la barre ni sous le QR code */
@media (orientation: portrait), (max-width: 780px) {
  .parole-wrap { flex-direction: column; text-align: center; gap: 1.4rem; }
  .parole-carte { height: auto; width: min(86vw, 420px, calc((100dvh - 440px) * 0.8)); }
  #view-coloriage { align-items: stretch; }
  .coloriage-wrap {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "entete" "svg" "outils";
    justify-items: center;
    align-items: center;
    row-gap: 1.2rem;
    width: 100%;
    height: 100%;
    text-align: center;
  }
  .coloriage-entete, .coloriage-outils { align-self: auto; }
  /* la rosace prend exactement la hauteur laissée par l'en-tête et les outils : jamais de débordement */
  .coloriage-svg { width: auto; height: 100%; max-width: min(92vw, 600px); max-height: 600px; }
  .coloriage-palette { grid-template-columns: repeat(7, 44px); gap: 10px; justify-content: center; margin-bottom: 1.2rem; }
  .pastille-couleur { width: 44px; height: 44px; }
  .coloriage-actions { justify-content: center; }
}

/* ===================== QR CODE (toutes les vues) ===================== */
/* comme la carte « Inscription » de l'affiche, posée sur le coin de zellige */
.qr-site {
  position: fixed;
  right: 2.2vw;
  bottom: calc(22px + env(safe-area-inset-bottom));
  z-index: 900;
  display: flex;
  flex-direction: column;       /* libellé au-dessus, carte blanche ajustée au QR */
  align-items: center;
  pointer-events: none;
}
.qr-titre {
  display: inline-block;
  font-family: var(--f-script);
  font-size: clamp(1.05rem, 2.4vh, 1.45rem);
  line-height: 1;
  color: var(--main);
  background: var(--fond);          /* reste lisible posé sur le zellige */
  padding: 0.15em 0.6em 0.25em;
  border-radius: 999px;
  margin: 0 0 6px;
}
.qr-carte { background: #fff; border-radius: 14px; padding: 8px; box-shadow: 0 3px 10px var(--ombre); }
.qr-carte img { display: block; width: clamp(110px, 15vh, 170px); height: auto; }

/* ===================== BARRE DE CONTROLE ===================== */
.control-bar {
  position: fixed;
  bottom: calc(22px + env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  z-index: 1000;
  pointer-events: none;
}
.control-bar-inner {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem;
  background: var(--carte);
  border-radius: 999px;
  box-shadow: 0 4px 16px var(--ombre);
  pointer-events: auto;
}
.control-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--f-texte);
  background: transparent;
  border: none;
  color: var(--sub);
  border-radius: 999px;
  padding: 0.6rem 1.2rem;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.control-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.control-btn:hover { color: var(--texte); background: var(--fond); }
.control-btn.active { color: #fff; background: var(--fort); box-shadow: 3px 3px 0 var(--or); }

/* Écrans étroits (téléphone, tablette en portrait) : barre d'onglets, libellé sous l'icône,
   assez compacte pour laisser la place au QR code */
@media (max-width: 1000px) {
  .control-bar-inner { gap: 0.15rem; padding: 0.35rem; border-radius: 20px; }
  .control-btn {
    flex-direction: column;
    gap: 4px;
    padding: 0.5rem 0.75rem 0.45rem;
    font-size: 0.7rem;
    line-height: 1;
    border-radius: 14px;
  }
  .control-btn svg { width: 20px; height: 20px; }
}

@media (max-width: 640px) {
  .slide { padding: 6vh 7vw 16vh; }
}

/* Tablette en portrait : l'écran est haut, on agrandit les textes et les médaillons */
@media (orientation: portrait) and (min-width: 600px) and (min-height: 800px) {
  .slide h2 { font-size: clamp(2.4rem, 6vw, 3.6rem); }
  .slide-text { font-size: clamp(1.15rem, 2.7vw, 1.5rem); max-width: 640px; }
  .slide-hero h1 { font-size: clamp(2.4rem, 7vw, 4.4rem); }
  .slide-tagline { font-size: clamp(1.2rem, 3.2vw, 1.8rem); }
  .slide-kicker, .script-kicker { font-size: clamp(1.3rem, 3vw, 1.7rem); }
  .slide-icon-badge,
  .layout-split-left .slide-icon-badge, .layout-split-right .slide-icon-badge { width: 150px; height: 150px; padding: 36px; }
  #quiz-question-text { font-size: clamp(1.7rem, 4.2vw, 2.4rem); }
  .quiz-option { font-size: 1.15rem; padding: 1.1rem 1.2rem; }
  /* QR plus compact : la carte « parole » et la palette du coloriage restent dégagées */
  .qr-carte img { width: clamp(96px, 13vw, 130px); }
  .qr-titre { font-size: 1rem; }
}

/* Téléphone (écran tactile ET petit, en portrait ou en paysage) : le visiteur est déjà
   sur le site, le QR code est inutile ; tout est dimensionné pour tenir sans passer
   sous la barre du bas. Sur l'écran du stand (grand écran, tablette, ordinateur), le QR
   reste toujours visible. */
@media (pointer: coarse) and (max-width: 640px), (pointer: coarse) and (max-height: 500px) {
  .qr-site { display: none; }
  .slide { padding: 5vh 6vw calc(150px + env(safe-area-inset-bottom)); }
  .nav-arrow { width: 44px; height: 44px; top: auto; bottom: calc(87px + env(safe-area-inset-bottom)); transform: none; }
  .nav-arrow:hover { transform: translate(-1px, -1px); }
  .scroll-footer { bottom: calc(92px + env(safe-area-inset-bottom)); }

  .quiz-icon-badge,
  .layout-icon-left .quiz-icon-badge, .layout-icon-right .quiz-icon-badge { width: 64px; height: 64px; padding: 15px; }
  .quiz-body { gap: 1rem; }
  #quiz-question-text { font-size: clamp(1.3rem, 5.6vw, 1.7rem); margin-bottom: 1.2rem; }
  .quiz-option { padding: 0.8rem 1rem; font-size: 1rem; }
  .quiz-options { gap: 0.7rem; }

  .parole-aide, .coloriage-aide { display: none; }
  .parole-entete h2, .coloriage-entete h2 { font-size: clamp(1.9rem, 8vw, 2.4rem); margin-bottom: 0.2rem; }
}

/* Téléphone en portrait : la carte et la rosace se dimensionnent sur la hauteur restante */
@media (pointer: coarse) and (max-width: 640px) {
  .parole-wrap { gap: 1rem; }
  .parole-carte { width: min(86vw, 420px, calc((100dvh - 330px) * 0.8)); }
  .coloriage-wrap { row-gap: 0.8rem; }
  .coloriage-palette { grid-template-columns: repeat(7, 40px); gap: 8px; margin-bottom: 0.9rem; }
  .pastille-couleur { width: 40px; height: 40px; }
  .coloriage-actions { gap: 0.8rem; }
  .coloriage-actions .btn-primary { font-size: 1rem; padding: 0.5em 1.1em 0.6em; }
}

/* Téléphone en paysage : écran très bas, la carte et la rosace prennent toute la hauteur
   disponible, le bouton « Partager » passe à gauche de la carte */
@media (pointer: coarse) and (max-height: 500px) {
  .parole-entete h2, .coloriage-entete h2 { font-size: 1.9rem; }
  .parole-zone { flex-direction: row-reverse; align-items: flex-end; }
  .parole-carte { height: calc(100dvh - 135px); }
  .coloriage-svg { width: calc(100dvh - 135px); }
  .coloriage-palette { grid-template-columns: repeat(7, 34px); gap: 7px; margin-bottom: 0.7rem; }
  .pastille-couleur { width: 34px; height: 34px; }
  .coloriage-actions .btn-primary { font-size: 0.95rem; padding: 0.45em 1em 0.55em; }
}