/* Vérifie mon idée — direction « Décollage » (page d'accueil uniquement).
   Univers commun au tableau des départs : des idées qui fusent, trois contrôles avant le départ,
   une fusée qui décolle. Remplace l'ancien hero (texte et deux cartes), les trois cartes « écueils »
   et leur exemple fictif (exemple-filtres.css, supprimé), les deux sections d'offre et l'illustration
   du labyrinthe. Maquette d'origine : docs/maquettes/evolution-decollage.html.
   Fichier séparé de styles.css pour ne charger ces règles que sur l'accueil (même logique que
   tableau-departs.css). /assets/* est immutable (1 an) : toute modification ici impose
   d'incrémenter ?v=N dans index.html.
   v=1 (15/10/2026) : création.
   v=2 (15/10/2026) : exemple fictif « drone et immobilier » avec photo de couverture (.cd-cover) à la
   place du calculateur pour photographes de mariage.
   v=3 (16/10/2026) : idées qui fusent du hero remplacées par six activités du tableau des départs,
   numériques et manuelles (micro-SaaS en tête, en aplat orange), pastilles agrandies, points
   d'arrivée revus pour le mouvement réduit.
   v=4 (16/10/2026) : les éléments partagés avec /methode/ et /exemples/ (tokens, .section-tag, .ciel,
   .btn-ghost, .actions, .reperes, fusée, plan de vol, cas réel, appel final) passent dans
   styles.css (v=20). Restent ici : hero animé, compte à rebours, cartes d'embarquement.
   Mouvement : toutes les animations sont en CSS, donc coupées par la règle prefers-reduced-motion de
   styles.css ; les idées qui fusent restent alors affichées à leur position d'arrivée (fin de
   fichier). */

/* ---------- Hero ---------- */
.hero-decollage { padding: var(--space-4) 0; }
.hero-decollage .grille { display: grid; gap: var(--space-3); align-items: center; }
@media (min-width: 960px) { .hero-decollage .grille { grid-template-columns: 1.05fr .95fr; } }
.hero-decollage h1 { font-size: clamp(2.3rem, 1.4rem + 3vw, 4rem); line-height: .98; max-width: 19ch; }
.hero-decollage h1 .hl { color: var(--color-accent); }
.hero-decollage .hero-lead { max-width: 36rem; }
@media (max-width: 400px) { .hero-decollage h1 { font-size: 2.1rem; } }

.lancement { width: 100%; max-width: 600px; justify-self: center; }
@media (max-width: 959px) { .lancement { max-width: 420px; } }
.lancement svg { width: 100%; height: auto; display: block; overflow: visible; }

/* Illustration du hero : traits et textes */
.art-mono { font-family: var(--font-mono); font-weight: 600; letter-spacing: .06em; }
.art-trail { fill: none; stroke: var(--color-accent); stroke-width: 2.5; stroke-dasharray: 2 9; stroke-linecap: round; animation: trail-run 1.6s linear infinite; }
.art-trail-dim { fill: none; stroke: var(--color-trail); stroke-width: 1.5; stroke-dasharray: 1 7; stroke-linecap: round; }
.art-brain { fill: rgba(255, 255, 255, .05); stroke: var(--color-text-inverse); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.art-fold { fill: none; stroke: var(--color-inverse-muted); stroke-width: 1.8; stroke-linecap: round; }
.art-node { fill: var(--color-accent); animation: node-pulse 2.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.art-node.n2 { animation-delay: .5s; }
.art-node.n3 { animation-delay: 1s; }
.art-node.n4 { animation-delay: 1.5s; }
@keyframes node-pulse { 0%, 100% { transform: scale(.7); opacity: .55; } 50% { transform: scale(1.25); opacity: 1; } }
.art-gate { fill: var(--color-night); stroke: var(--color-text-inverse); stroke-width: 2.5; }
.art-gate-num { fill: var(--color-text-inverse); font-size: 13px; }
.art-gate-label { fill: var(--color-inverse-muted); font-size: 10.5px; }
.art-star { fill: var(--color-text-inverse); opacity: .5; }
.art-pill rect { fill: var(--color-positive); }
.art-pill text { fill: var(--color-text-inverse); font-size: 11px; }

/* Idées qui fusent depuis le cerveau (destination dans --dx / --dy, posées dans le HTML) */
.spark { animation: spark-fly 5.2s cubic-bezier(.2, .7, .3, 1) infinite; opacity: 0; transform-box: fill-box; }
.spark rect { fill: var(--color-ink); stroke: var(--color-accent); stroke-width: 1.5; }
.spark text { fill: var(--color-text-inverse); font-size: 12px; }
/* Points d'arrivée choisis pour que les six pastilles ne se chevauchent pas une fois figées
   (mouvement réduit), à gauche de la trajectoire principale. */
.spark.s1 { --dx: 0px; --dy: -310px; }
.spark.s2 { --dx: -65px; --dy: -250px; animation-delay: .87s; }
.spark.s3 { --dx: 90px; --dy: -220px; animation-delay: 1.73s; }
.spark.s4 { --dx: -60px; --dy: -165px; animation-delay: 2.6s; }
.spark.s5 { --dx: 100px; --dy: -145px; animation-delay: 3.47s; }
.spark.s6 { --dx: -65px; --dy: -95px; animation-delay: 4.33s; }
/* Micro-SaaS en aplat orange : la piste mise en avant. */
.spark.hot rect { fill: var(--color-accent); stroke: var(--color-accent); }
.spark.hot text { fill: var(--color-ink); }
@keyframes spark-fly {
  0%   { transform: translate(0, 0) scale(.3); opacity: 0; }
  12%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 0; }
}
.ember { fill: var(--color-accent); animation: ember 2.6s ease-out infinite; opacity: 0; }
.ember.e1 { --dx: -40px; --dy: -70px; }
.ember.e2 { --dx: 30px; --dy: -90px; animation-delay: .7s; }
.ember.e3 { --dx: -70px; --dy: -30px; animation-delay: 1.4s; }
.ember.e4 { --dx: 60px; --dy: -50px; animation-delay: 2s; }
@keyframes ember { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)); opacity: 0; } }

/* Fusée du hero : léger balancement */
.rocket-bob { animation: rocket-bob 2.8s ease-in-out infinite; }
@keyframes rocket-bob { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(5px, -6px); } }
/* Couleurs de la fusée, flammes et fumée : styles.css (éléments partagés « Décollage »). */

/* ---------- Compte à rebours : les trois contrôles puis la décision ---------- */
/* Couverture de l'exemple fictif : texte sur fond « ciel » à gauche, photo à droite (empilés sur
   mobile). Photo : public/images/exemple-drone-immobilier.webp, recadrée depuis le visuel réseaux
   sociaux « Drone. Immobilier. » (sans ses textes incrustés). */
.cd-cover {
  display: grid;
  margin-top: var(--space-4);
  background: var(--color-night);
  color: var(--color-text-inverse);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-pass) var(--radius-pass) 0 0;
  overflow: hidden;
}
@media (min-width: 860px) { .cd-cover { grid-template-columns: 1fr 1.1fr; } }
.cd-cover-texte { padding: var(--space-4) var(--space-3); align-self: center; }
.cd-cover img { width: 100%; height: 100%; min-height: 260px; max-height: 380px; object-fit: cover; object-position: 60% 40%; }
@media (min-width: 860px) { .cd-cover img { max-height: none; min-height: 340px; } }
.cd-cover-label { font-family: var(--font-mono); font-weight: 600; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent); margin: 0 0 var(--space-2); }
.cd-cover-titre { font-family: var(--font-display); font-weight: 800; font-stretch: 75%; font-size: clamp(2.6rem, 1.8rem + 3vw, 4.2rem); line-height: .95; text-transform: uppercase; margin: 0 0 var(--space-2); }
.cd-cover-titre span { color: var(--color-accent); }
.cd-cover-question { font-size: var(--step-1); color: var(--color-inverse-muted); margin-bottom: var(--space-3); }
.cd-cover-idee { border-left: 3px solid var(--color-accent); padding-left: var(--space-2); font-weight: 600; margin: 0; max-width: 30rem; }
/* La couverture et le compte à rebours forment un seul bloc : pas d'écart, bord commun. */
.cd-cover + .countdown { margin-top: 0; }
.cd-cover + .countdown .cd-step { border-top: 0; }
@media (max-width: 959px) { .cd-cover + .countdown { margin-top: var(--space-2); } .cd-cover + .countdown .cd-step { border-top: 2px solid var(--color-ink); } }
.countdown { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-2); }
@media (min-width: 960px) { .countdown { grid-template-columns: repeat(4, 1fr); gap: 0; } }
/* Colonne flex : l'étiquette « Preuve » se cale en bas de chaque carte, alignée d'une carte à l'autre. */
.cd-step { position: relative; display: flex; flex-direction: column; background: var(--color-bg); border: 2px solid var(--color-ink); padding: var(--space-3); }
.cd-step > .status-pill { align-self: flex-start; }
/* Sur une ligne : bords communs fusionnés et chevron de passage d'une étape à la suivante. */
@media (min-width: 960px) {
  .cd-step + .cd-step { border-left: 0; }
  .cd-step::after {
    content: "";
    position: absolute;
    top: 38px;
    right: -11px;
    width: 20px;
    height: 20px;
    background: var(--color-bg);
    border-top: 2px solid var(--color-ink);
    border-right: 2px solid var(--color-ink);
    transform: rotate(45deg);
    z-index: 1;
  }
  .cd-step:last-child::after { display: none; }
}
.cd-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.cd-num { font-family: var(--font-mono); font-weight: 600; font-size: 2.6rem; line-height: 1; color: var(--color-ink); }
.cd-num small { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent-text); vertical-align: top; margin-left: .2rem; }
.cd-icon { width: 46px; height: 46px; flex: none; }
.cd-icon * { fill: none; stroke: var(--color-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cd-icon .acc { stroke: var(--color-accent); }
.cd-step h3 { font-size: 1.35rem; }
.cd-step p { font-size: .95rem; }
.cd-tag {
  display: inline-block;
  align-self: flex-start;
  margin-top: auto;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1.5px solid var(--color-ink);
  padding: .2rem .5rem;
}
.cd-go { background: var(--color-ink); color: var(--color-text-inverse); }
.cd-go .cd-num { color: var(--color-accent); }
.cd-go .cd-num small { color: var(--color-inverse-muted); }
.cd-go h3 { color: var(--color-text-inverse); margin-top: var(--space-2); }
.cd-go .cd-icon * { stroke: var(--color-text-inverse); }
.cd-go .cd-icon .acc { stroke: var(--color-accent); fill: var(--color-accent); }
.cd-go .lien-volet-texte { color: var(--color-text-inverse); }
.cd-note { margin-top: var(--space-3); font-size: .88rem; color: var(--color-muted); }

/* ---------- Offres : cartes d'embarquement ---------- */
.passes { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
@media (min-width: 900px) { .passes { grid-template-columns: 1fr 1fr; } }
.pass {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-pass);
  background: var(--color-bg);
  border: 2px solid var(--color-ink);
  overflow: hidden;
}
.pass-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .7rem var(--space-3);
  background: var(--color-ink);
  color: var(--color-text-inverse);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pass-head span:last-child { color: var(--color-accent); }
.pass-body { padding: var(--space-3); }
.pass h3 { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem); margin-bottom: .3rem; }
.pass-price { font-family: var(--font-display); font-weight: 800; font-stretch: 75%; font-size: 3.4rem; line-height: 1; margin: var(--space-2) 0; }
.pass-price small { font-family: var(--font-mono); font-size: .8rem; font-weight: 600; letter-spacing: .06em; margin-left: .3rem; }
.pass-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: var(--space-2) 0 var(--space-3); }
.pass-meta div { border-top: 1.5px solid var(--color-border); padding-top: .4rem; }
.pass-meta dt { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); }
.pass-meta dd { margin: 0; font-weight: 600; }
.pass-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem .9rem; font-size: .93rem; }
@media (min-width: 560px) { .pass-list { grid-template-columns: 1fr 1fr; } }
.pass-list li { padding-left: 1.2rem; position: relative; }
.pass-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; background: var(--color-accent); transform: rotate(45deg); }
/* Ligne de découpe : pointillés et deux encoches demi-cercle sur les bords de la carte. */
.pass-tear { position: relative; height: 0; border-top: 2px dashed var(--color-border); margin: auto var(--space-3) 0; }
.pass-tear::before, .pass-tear::after { content: ""; position: absolute; top: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--color-bg); border: 2px solid var(--color-ink); }
.pass-tear::before { left: calc(-1 * var(--space-3) - 14px); }
.pass-tear::after { right: calc(-1 * var(--space-3) - 14px); }
.pass-foot { padding: var(--space-3); display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between; }
.pass-foot small { color: var(--color-muted); font-size: .82rem; max-width: 22rem; }
.pass-dark { background: var(--color-ink); color: var(--color-text-inverse); }
.pass-dark .pass-head { background: var(--color-accent); color: var(--color-ink); }
.pass-dark .pass-head span:last-child { color: var(--color-ink); }
.pass-dark h3 { color: var(--color-text-inverse); }
.pass-dark .pass-price { color: var(--color-accent); }
.pass-dark .pass-meta div { border-color: rgba(255, 255, 255, .2); }
.pass-dark .pass-meta dt,
.pass-dark .pass-foot small { color: var(--color-inverse-muted); }
.pass-dark .pass-tear { border-color: rgba(255, 255, 255, .25); }
.passes-note { margin-top: var(--space-3); font-size: .9rem; color: var(--color-muted); max-width: 46rem; }

/* ---------- Mouvement réduit ---------- */
/* styles.css ramène toute animation à une seule itération quasi instantanée : les idées finiraient
   invisibles (opacité 0 en fin d'animation). On les fige donc à leur point d'arrivée. */
@media (prefers-reduced-motion: reduce) {
  .spark { animation: none; opacity: 1; transform: translate(var(--dx), var(--dy)); }
  .ember { animation: none; opacity: 0; }
}