/* © 2026 DRAK Infinity (NEQ 2281240509), Montréal (Québec), Canada. Tous droits réservés.
   Feuille PROPRE à la page Automatisation (mission 32, lot B, fait B2, 6 novembre 2026). Chargée EN PLUS de
   site/commun/v4.css : ce fichier n'y redéfinit rien de partagé (.v4-tete, .v4-sec, .v4-deux, .v4-cinq, .v4-carte,
   .v4-note, .v4-btns, .v4-tabl, .v4-num, .v4-mascotte-cadre, .v4-video*, .cle restent la propriété de v4.css) — il
   ajoute seulement les gabarits propres à cette page, fidèles à maquettes/v4/automatisation-v4.html (onglet « auto »),
   jetons du site (var(--or), var(--trait), var(--texte2), var(--fond2), var(--surface)) à la place des noms de la
   maquette (var(--or), var(--fg2) etc. - seuls les deux premiers coïncident déjà). */

/* 1. Avant/après : deux cartes (.v4-deux les pose déjà en grille) — la seconde porte une bordure dorée distincte. */
html[data-theme] .v4-avant-apres .v4-carte ul{margin:0;padding-left:18px;color:var(--texte2);display:grid;gap:6px;font-size:15px}
html[data-theme] .v4-avant-apres .v4-carte h3{font-family:var(--serif-titres);font-size:20px;margin:0 0 4px}
html[data-theme] .v4-avant-apres .v4-apres{border-color:var(--or);box-shadow:0 0 0 3px rgba(201,150,43,.12)}

/* 2. Le parcours : cinq étapes reliées par un fil doré horizontal (une seule colonne, fil vertical implicite, sous 900px). */
html[data-theme] .v4-parcours{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;position:relative;margin-top:24px}
html[data-theme] .v4-parcours::before{content:"";position:absolute;left:8%;right:8%;top:38px;height:2px;background:linear-gradient(90deg,transparent,var(--or) 10%,var(--or) 90%,transparent);z-index:0}
html[data-theme] .v4-etape{position:relative;z-index:1;display:grid;gap:8px;justify-items:center;text-align:center}
html[data-theme] .v4-etape-ico{width:76px;height:76px;border-radius:50%;background:var(--surface);border:2px solid var(--or);display:grid;place-items:center;font-family:var(--serif-titres);font-size:30px;font-weight:600;color:var(--or-texte)}
html[data-theme] .v4-etape b{font-family:var(--serif-titres);font-size:20px;font-weight:600}
html[data-theme] .v4-etape p{font-size:14px;color:var(--texte2);max-width:22ch;margin:0}
html[data-theme] .v4-etape .v4-note{margin-top:0}

/* 3. Les trois packs : même hauteur, le pack B marqué « Recommandé ». */
html[data-theme] .v4-packs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch;margin-top:20px}
html[data-theme] .v4-pack{background:var(--surface);border:1px solid var(--trait);border-radius:16px;padding:22px;display:grid;grid-template-rows:auto auto auto 1fr auto auto;gap:12px;min-width:0}
html[data-theme] .v4-pack-reco{border-color:var(--or);box-shadow:0 14px 40px rgba(0,0,0,.10)}
html[data-theme] .v4-pack h3{font-family:var(--serif-titres);font-size:30px;margin:0}
html[data-theme] .v4-pack-pour{font-size:14px;color:var(--texte2);margin:0}
html[data-theme] .v4-pack ul{margin:0;padding-left:18px;display:grid;gap:6px;font-size:15px;color:var(--texte2);align-content:start}
html[data-theme] .v4-pack-lignes{display:grid;gap:6px;border-top:1px solid var(--trait);padding-top:12px}
html[data-theme] .v4-pack-lignes>div{display:grid;grid-template-columns:auto 1fr;gap:10px;font-size:15px;align-items:baseline}
html[data-theme] .v4-pack-lab{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--or-texte);font-weight:700;min-width:64px}
html[data-theme] .v4-pack-montant{font-family:var(--serif-titres);font-size:26px;font-weight:700;color:var(--texte)}
html[data-theme] .v4-pack-outil{color:var(--texte2)}

/* 4. Tableau « Pourquoi DRAK Infinity? » : colonne DRAK Infinity en doré (.v4-tabl prend déjà toute la largeur et le mécanisme
   de carte empilée à 390px, fait A8 de la mission 32, lot A — rien à redéfinir ici, seulement la couleur de l'en-tête). */
html[data-theme] .v4-tabl-nous{background:var(--or);color:#1b2236}

/* 5. Pastilles « Pour qui » et liste à puces (phrase-clé en gras, fait A6) : nouvelles classes, pas encore ailleurs sur le site. */
html[data-theme] .v4-puces{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
html[data-theme] .v4-puces span{border:1px solid var(--trait);background:var(--surface);border-radius:999px;padding:6px 12px;font-size:14px;color:var(--texte2)}
html[data-theme] .v4-liste{display:grid;gap:8px;color:var(--texte2);padding-left:18px;margin:0;font-size:15px}

@media (max-width:900px){
  html[data-theme] .v4-parcours{grid-template-columns:1fr}
  html[data-theme] .v4-parcours::before{display:none}
  html[data-theme] .v4-etape{justify-items:start;text-align:left;grid-template-columns:76px 1fr;column-gap:14px}
  html[data-theme] .v4-etape-ico{grid-row:1/4}
  html[data-theme] .v4-packs{grid-template-columns:1fr}
}