/* =========================================================
   /ddc2/ — Le Déclic du Contenu 2.0
   Traduction de la maquette Claude Design, édition novembre 2026.

   Comme /storytelling/, cette page vit HORS du design system :
   angles arrondis, boutons en pilule, ombres portées, et Velvet
   réveillé comme couleur d'action sur fond clair. C'est voulu.
   ds.css n'est chargé que pour ses fontes et ses canaux RVB.

   Les 32 couleurs de la maquette venaient toutes de la palette
   d'Antoine : aucune n'a été inventée ici, elles ont seulement
   retrouvé leur canal. Seul le blanc manquait.
   ========================================================= */

:root { --rgb-blanc: 255 255 255; }

/* ---------- Les trois portées ---------- */
/* Un composant ne lit que ces variables : c'est la portée qui
   décide, exactement comme dans ds.css. */

.dc-sl {                                   /* clair — Parchment */
  --bg: rgb(var(--rgb-parchment));
  --ink: rgb(var(--rgb-bordeaux-medium));
  --text: rgb(var(--rgb-cacao));
  --muted: rgb(var(--rgb-chocolat));
  --rule: rgb(var(--rgb-stone));
  --surface: rgb(var(--rgb-blanc));
  --action: rgb(var(--rgb-bordeaux-velvet));
  --on-action: rgb(var(--rgb-parchment));
  --accent: rgb(var(--rgb-bordeaux-deep-rose));
  --on-accent: rgb(var(--rgb-parchment));
  --soft: rgb(var(--rgb-bordeaux-deep-rose) / .07);
}

.dc-sd {                                   /* sombre — Abyss */
  --bg: rgb(var(--rgb-bordeaux-abyss));
  --ink: rgb(var(--rgb-parchment));
  --text: rgb(var(--rgb-parchment) / .8);
  --muted: rgb(var(--rgb-parchment) / .62);
  --rule: rgb(var(--rgb-parchment) / .14);
  --surface: rgb(var(--rgb-bordeaux-dark));
  --action: rgb(var(--rgb-porcelaine));
  --on-action: rgb(var(--rgb-bordeaux-abyss));
  --accent: rgb(var(--rgb-faience));
  --on-accent: rgb(var(--rgb-bordeaux-abyss));
  --soft: rgb(var(--rgb-faience) / .1);
}

.dc-sm {                                   /* bordeaux — Medium */
  --bg: rgb(var(--rgb-bordeaux-medium));
  --ink: rgb(var(--rgb-parchment));
  --text: rgb(var(--rgb-parchment) / .82);
  --muted: rgb(var(--rgb-parchment) / .64);
  --rule: rgb(var(--rgb-parchment) / .16);
  --surface: rgb(var(--rgb-bordeaux-abyss) / .4);
  --action: rgb(var(--rgb-porcelaine));
  --on-action: rgb(var(--rgb-bordeaux-abyss));
  --accent: rgb(var(--rgb-faience));
  --on-accent: rgb(var(--rgb-bordeaux-abyss));
  --soft: rgb(var(--rgb-faience) / .12);
}

/* ---------- Fondations ---------- */

body { margin: 0; background: rgb(var(--rgb-bordeaux-abyss)); }
a { color: inherit; }
a:hover { color: inherit; }

.dc-sec {
  background: var(--bg);
  color: var(--text);
  padding: 76px 20px;
  font-family: var(--font-functional);
}
.dc-wrap { max-width: 1080px; margin: 0 auto; }
.dc-col { display: flex; flex-direction: column; }

/* ---------- Typographie ---------- */

.dc-h1, .dc-h2 {
  margin: 0;
  font-family: var(--font-impact);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: .9;
  color: var(--ink);
  text-wrap: balance;
}
.dc-h1 { font-size: clamp(46px, 12vw, 104px); }
.dc-h2 { font-size: clamp(38px, 9vw, 72px); line-height: .92; }

.dc-h3 {
  margin: 0;
  font-family: var(--font-core);
  font-weight: 400;
  letter-spacing: -.03em;
  font-size: 26px;
  line-height: 1.15;
  color: var(--ink);
}
.dc-voice {
  margin: 0;
  font-family: var(--font-core);
  font-weight: 400;
  letter-spacing: -.03em;
  font-size: clamp(23px, 5.8vw, 30px);
  line-height: 1.22;
  color: var(--ink);
}
/* L'emphase est l'italique de Perfectly Nineties, jamais le gras. */
.dc-voice em, .dc-h3 em { font-style: italic; color: var(--accent); }

.dc-body { margin: 0; font-size: 17px; line-height: 1.6; color: var(--text); }
.dc-body strong { color: var(--ink); font-weight: 600; }
.dc-small { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.dc-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent);
}
.dc-big {
  font-family: var(--font-impact);
  font-weight: 400; line-height: 1; color: var(--ink); letter-spacing: .01em;
}

/* ---------- Composants ---------- */

.dc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 28px; box-sizing: border-box;
  border-radius: 100px;
  background: var(--action); color: var(--on-action);
  font: 600 17px/1.2 var(--font-functional);
  text-decoration: none; text-align: center; border: 0; cursor: pointer;
}
.dc-btn:hover { color: var(--on-action); filter: brightness(1.06); }
.dc-btn:focus-visible, .dc-opt:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.dc-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 24px;
  box-sizing: border-box;
}
.dc-tk {
  flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; margin-top: 1px;
}
.dc-no {
  flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--rule); color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; margin-top: 1px; box-sizing: border-box;
}
.dc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.dc-list li { display: flex; gap: 12px; font-size: 16px; line-height: 1.5; }

.dc-g2, .dc-g3, .dc-g4 { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.dc-split { display: grid; gap: 44px; grid-template-columns: minmax(0, 1fr); align-items: center; }

.dc-ph {
  border: 1.5px dashed var(--rule); border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 16px; box-sizing: border-box;
  font-size: 13px; color: var(--muted); background: var(--soft);
}

.dc-opt {
  display: block; width: 100%; text-align: left;
  padding: 15px 18px; border-radius: 12px;
  border: 1.5px solid rgb(var(--rgb-stone));
  background: rgb(var(--rgb-blanc));
  font: 400 16px/1.4 var(--font-functional);
  color: rgb(var(--rgb-bordeaux-medium));
  cursor: pointer;
}
.dc-opt:hover { border-color: rgb(var(--rgb-bordeaux-medium)); }
/* L'option choisie. Le JS ne pose qu'une classe : les couleurs
   restent ici, pas dans le script. */
.dc-opt[aria-pressed="true"] {
  border-color: rgb(var(--rgb-bordeaux-deep-rose));
  background: rgb(var(--rgb-bordeaux-deep-rose) / .08);
}
.dc-opt--autre { color: rgb(var(--rgb-chocolat)); }

.dc-cal { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.dc-cal span { aspect-ratio: 1 / 1; border-radius: 7px; }

/* ---------- Le quiz ---------- */
/* Les cartes sont construites par js/quiz-declic.js. Il ne pose
   que des classes : tout ce qui se voit est décrit ici. */

[data-quiz] > .dc-card {
  box-shadow: 0 20px 50px -36px rgb(var(--rgb-bordeaux-medium) / .45);
}
.dc-quiz__num {
  flex: 0 0 28px; height: 28px; border-radius: 8px;
  background: rgb(var(--rgb-parchment));
  color: rgb(var(--rgb-bordeaux-medium));
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.dc-quiz__q { font-size: 22px; }
.dc-quiz__res { border-color: rgb(var(--rgb-bordeaux-deep-rose) / .45); }
.dc-quiz__pied {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 20px; margin-top: 6px;
}
.dc-quiz__reprise {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: 400 15px/1.4 var(--font-functional);
  color: var(--muted);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.dc-quiz__reprise:hover { color: var(--ink); }

/* ---------- Le mur des pages ---------- */
/* La planche des 54 pages floutées du Méga Template Storytelling :
   1350 × 1272 px découpés en 9 × 6 par background-size: 900% 600%,
   soit une vignette de 150 × 212 par page. Le chemin est relatif à CE
   fichier, donc ../assets/.

   Les vignettes ne portent AUCUN flou CSS : elles sont illisibles
   parce qu'elles font 150 px de large. Ne pas « réparer » en ajoutant
   un filter: blur(). */

.dc-wall {
  position: relative;
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid var(--rule);
  overflow: hidden;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
/* Les deux rangées défilent en sens inverse. Chacune contient deux
   fois les mêmes pages : la translation de -50 % reboucle donc sans
   saut visible. */
.dc-wall__rang { display: flex; gap: 12px; width: max-content; }
.dc-wall__rang--g { animation: dc-wall-g 80s linear infinite; }
.dc-wall__rang--d { animation: dc-wall-d 80s linear infinite; }
@keyframes dc-wall-g { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes dc-wall-d { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .dc-wall__rang--g, .dc-wall__rang--d { animation: none; }
}

.dc-pg {
  flex: 0 0 auto;
  width: 112px; height: 158px;
  border-radius: 4px;
  background-image: url('../assets/storytelling-pages.jpg');
  background-size: 900% 600%;
  box-shadow: 0 12px 24px -12px rgb(var(--rgb-bordeaux-abyss) / .9);
  pointer-events: none;
}

/* Le dégradé qui éteint les bords : seule exception à l'interdiction
   des dégradés, parce qu'il masque la coupe des vignettes. */
.dc-wall::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(to right, var(--surface), transparent 12%, transparent 88%, var(--surface));
}

/* ---------- Les offres à ticket signé ---------- */
/* Seules sample.php et complete.php s'en servent. La page statique
   /ddc2/ n'a ni compte à rebours ni panier intégré. */

.dc-rebours {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 10px 16px;
  border-radius: 100px;
  border: 1px solid var(--rule);
  background: var(--soft);
  margin-bottom: 4px;
}
.dc-rebours__mention {
  font-size: 12px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent);
}
.dc-rebours__temps {
  font-family: var(--font-impact);
  font-size: 22px; line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* La bannière persistante, sur ordinateur seulement. En dessous de
   900 px c'est la barre basse qui porte le prix, le temps restant et
   le bouton : deux barres collées aux deux bords mangeraient la
   moitié d'un écran de téléphone. */
.dc-bandeau {
  display: none;
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgb(var(--rgb-bordeaux-abyss) / .94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgb(var(--rgb-parchment) / .14);
}
.dc-bandeau__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 10px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.dc-bandeau__nom {
  font-family: var(--font-impact);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 18px;
  color: rgb(var(--rgb-parchment));
}
.dc-bandeau .dc-rebours { margin: 0; padding: 6px 14px; }
.dc-bandeau .dc-rebours__temps { font-size: 18px; }
.dc-bandeau__btn { min-height: 44px; padding: 0 22px; font-size: 15px; }
@media (min-width: 900px) { .dc-bandeau { display: block; } }

/* Le prix barré, au-dessus du prix réel. Pas une promo : le montant
   que la personne paierait si elle n'avait rien pris avant. */
.dc-prix-barre {
  font-family: var(--font-impact);
  font-size: 32px;
  line-height: 1;
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

/* Le temps restant sans sa pilule : il tient sous le prix dans la
   barre basse, où chaque pixel compte. */
.dc-rebours--nu {
  display: block;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
}
.dc-rebours--nu .dc-rebours__temps {
  font-family: var(--font-functional);
  font-size: 13px;
  font-weight: 600;
  color: rgb(var(--rgb-faience));
}
.dc-mobilebar__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* Le panier ThriveCart prend toute la largeur : encadré, il ressemble
   à une pièce rapportée. Sa hauteur minimale évite que le pied de
   page remonte pendant que l'iframe se charge. */
.dc-panier { width: 100%; min-height: 420px; }
.dc-panier iframe { width: 100% !important; border: 0; display: block; }

.dc-lien {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ---------- Les deux barres d'achat ---------- */
/* Le bouton se répartit : la barre du haut le porte au-dessus de
   900 px, la barre basse en dessous. Deux boutons collés aux deux
   bords mangeraient la hauteur d'un écran de téléphone. */

.dc-mobilebar { display: flex; }

/* ---------- Mouvement ---------- */

@keyframes dc-tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.dc-tick { animation: dc-tick 50s linear infinite; }

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .dc-faq-ico { transform: rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
  .dc-tick { animation: none; }
}

@media (min-width: 900px) {
  .dc-sec { padding: 120px 40px; }
  .dc-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .dc-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .dc-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .dc-split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px; }
  .dc-mobilebar { display: none; }
}