/* Page /plan-de-ciblage — le Plan de ciblage Boom Maker.
 * Toutes les classes sont préfixées dg- pour ne pas entrer en collision avec
 * les classes globales du site (.card, .form, .seg... existent déjà).
 * Les couleurs passent TOUJOURS par les tokens var(--x) de style.css, donc les
 * 4 thèmes (violet/cyber/mono/light) suivent nativement. Les seuls overrides
 * .theme-light ci-dessous concernent les surfaces en rgba(255,255,255,x) et les
 * dégradés sombres codés en dur, qui seraient invisibles ou faux sur fond clair. */

/* Le hero réutilise .audit-hero (forms.css) : il gère déjà le dégagement sous la
 * nav fixe, le halo de fond et le style du h1, thème clair compris. */

/* La colonne centrale se cale sur la nav en pillule. Le .container global monte
   à 1480px alors que la nav plafonne à 1100px (style.css) : la carte blanche
   dépassait donc visiblement de part et d'autre de la barre. On ajoute les deux
   gouttières pour que les BORDS de la carte tombent pile sur ceux de la nav. */
.expertises-content > .container { max-width: calc(1100px + var(--gutter) * 2); }

/* Cette page ne charge PAS expertises.css : la règle .expertises-content
   { padding: 40px 0 80px } de ce fichier n'existe donc pas ici, et le footer
   venait se coller au dernier bloc. On repose l'espacement bas nous-mêmes. */
.expertises-content { padding-bottom: 80px; }

/* === Carte générique === */
.dg-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* === Formulaire === */
.dg-form { margin-top: 36px; padding: 32px; }
.dg-form-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding-bottom: 20px; margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.dg-form-head h2 { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; }
.dg-form-head .dg-step {
  font-family: var(--mono); font-size: 11px; color: var(--mute); letter-spacing: 0.12em;
}

.dg-site-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.dg-site-row input { flex: 1; min-width: 240px; }
.dg-fnote {
  font-family: var(--mono); font-size: 11px; color: var(--cyan);
  letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 7px;
}

.dg-after { animation: dg-rise 0.45s ease-out; }
@keyframes dg-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.dg-prefill {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--cyan);
  border: 1px solid rgba(var(--cyan-rgb), 0.35); background: rgba(var(--cyan-rgb), 0.07);
  border-radius: 999px; padding: 6px 13px; margin: 24px 0 18px;
}

/* Phrase à trous : le prospect corrige, il ne rédige pas */
.dg-madlib {
  font-size: clamp(17px, 1.8vw, 21px); line-height: 1.95;
  font-weight: 500; letter-spacing: -0.01em;
}
.dg-inline {
  display: inline-block; min-width: 64px; padding: 2px 9px;
  background: rgba(var(--violet-rgb), 0.07);
  border-bottom: 2px solid var(--violet); color: var(--violet-2);
  font-weight: 600; outline: none; border-radius: 6px 6px 2px 2px;
  transition: background 0.15s, border-color 0.15s;
}
.dg-inline:hover { background: rgba(var(--violet-rgb), 0.12); }
.dg-inline:focus { background: rgba(var(--violet-rgb), 0.16); border-color: var(--violet-deep); }
.theme-light .dg-inline { color: var(--violet-deep); }

/* Champs de saisie de la page. Le site ne style que .contact-form/.audit-form :
   sans ces règles, les champs de la page tombent sur le rendu brut du navigateur
   (texte rogné, police par défaut). On reprend le style des champs du site. */
.dg-form input, .dg-q input, .dg-q textarea {
  width: 100%; padding: 12px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.5;
  transition: border-color 0.18s, background 0.18s;
  -webkit-appearance: none; appearance: none;
}
.dg-q textarea { resize: vertical; min-height: 78px; display: block; }
.dg-form input::placeholder, .dg-q input::placeholder, .dg-q textarea::placeholder {
  color: var(--mute); opacity: 1;
}
.dg-form input:focus, .dg-q input:focus, .dg-q textarea:focus {
  outline: none; border-color: var(--violet-2);
}
.theme-light .dg-form input, .theme-light .dg-q input, .theme-light .dg-q textarea {
  background: rgba(255, 255, 255, 0.95); border-color: rgba(0, 0, 0, 0.1);
}

/* Questions */
.dg-q { border-top: 1px solid var(--line); padding-top: 26px; margin-top: 26px; }
.dg-q-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.dg-q-emoji {
  width: 40px; height: 40px; flex: none; border-radius: 11px;
  background: rgba(var(--violet-rgb), 0.14); border: 1px solid rgba(var(--violet-rgb), 0.3);
  display: grid; place-items: center; font-size: 19px;
}
.dg-q-head h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 3px; }
.dg-q-head p { font-size: 14px; color: var(--mute); }

/* Pastilles à choix unique */
.dg-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 13px; }
.dg-mini {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--mute);
}
.dg-chip {
  font-family: var(--mono); font-size: 12px; color: var(--mute);
  background: var(--bg); border: 1px solid var(--line-strong);
  border-radius: 999px; padding: 8px 14px; cursor: pointer; transition: all 0.15s;
}
.dg-chip:hover { border-color: var(--violet-2); color: var(--ink); }
.dg-chip.on {
  background: linear-gradient(135deg, var(--violet), var(--violet-deep));
  color: var(--ink-on-accent); border-color: transparent;
}
/* Les décideurs à viser, dans le plan livré. Ce sont des informations à lire,
   pas des boutons : le violet plein du formulaire leur donnait l'air cliquable
   et écrasait le texte autour. Même traitement que les badges d'ICP. */
.dg-role {
  font-family: var(--mono); font-size: 12px; color: var(--violet-2);
  background: rgba(var(--violet-rgb), 0.09);
  border: 1px solid rgba(var(--violet-rgb), 0.3);
  border-radius: 999px; padding: 7px 13px;
}
.theme-light .dg-role { color: var(--violet-deep); }

/* « Partir de cet exemple » : discret, sous le champ, à la même marge que lui.
   C'est une aide, pas une action principale : elle ne doit pas concurrencer le
   bouton qui lance l'analyse. */
.dg-ex {
  margin-top: 8px; background: none; border: none; cursor: pointer; padding: 2px 0;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em;
  color: var(--violet-2); display: inline-flex; align-items: center; gap: 7px;
  transition: color 0.15s;
}
.dg-ex:hover { color: var(--ink); text-decoration: underline; }
.theme-light .dg-ex { color: var(--violet-deep); }

.dg-drop {
  border: 1px dashed var(--line-strong); border-radius: 12px; padding: 16px;
  display: flex; align-items: center; gap: 13px; color: var(--mute);
  font-size: 14px; cursor: pointer; margin-top: 26px;
  transition: border-color 0.15s, background 0.15s;
}
.dg-drop:hover { border-color: var(--violet-2); background: rgba(var(--violet-rgb), 0.06); }
.dg-drop-clip {
  width: 36px; height: 36px; flex: none; border-radius: 9px; background: var(--bg);
  display: grid; place-items: center; color: var(--violet-2); font-size: 16px;
  border: 1px solid var(--line);
}
.dg-go { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 26px; }
.dg-go .dg-note {
  font-family: var(--mono); font-size: 11px; color: var(--mute); letter-spacing: 0.05em;
}

/* === Scan === */
.dg-scan { margin-top: 36px; padding: 52px 32px; text-align: center; }
.dg-radar {
  width: 120px; height: 120px; margin: 0 auto 26px; border-radius: 50%; position: relative;
  border: 1px solid var(--line-strong);
  background: radial-gradient(circle, rgba(var(--violet-rgb), 0.14), transparent 70%);
}
.dg-radar::before, .dg-radar::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid var(--violet); opacity: 0; animation: dg-ping 1.8s ease-out infinite;
}
.dg-radar::after { border-color: var(--cyan); animation-delay: 0.9s; }
@keyframes dg-ping { 0% { transform: scale(0.35); opacity: 0.7; } 100% { transform: scale(1); opacity: 0; } }
.dg-radar-dot {
  position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; margin: -4.5px;
  border-radius: 50%; background: var(--violet); box-shadow: 0 0 14px 2px var(--violet);
}
.dg-status {
  font-family: var(--mono); font-size: 13px; color: var(--violet-2);
  letter-spacing: 0.05em; min-height: 20px;
}
.theme-light .dg-status { color: var(--violet-deep); }

/* ===================================================================
   SYSTÈME DE MISE EN PAGE DES RÉSULTATS

   Le plan mélangeait trois échelles de texte et deux polices sans règle :
   des paragraphes entiers en Geist Mono à 11px, des titres de section en
   deux styles différents, des largeurs de lecture qui changeaient d'un
   bloc à l'autre. Résultat : une page qui se lit mal alors que c'est le
   livrable vendu.

   Trois rôles, et rien d'autre :
   - ÉTIQUETTE (.dg-depth-k) : mono, majuscules, cyan. Titre de section et
     clés de tableau. Toujours suivie d'un espacement identique.
   - TEXTE (.dg-para, .dg-depth-p) : Geist, 15 à 16px, largeur de lecture
     commune. Le mono ne sert JAMAIS à un paragraphe : il est fait pour
     des étiquettes et des chiffres, pas pour du raisonnement suivi.
   - CHIFFRE (.dg-bignum, .dg-seg-vol) : mono, chasse fixe.

   --dg-lecture borne la longueur de ligne partout pareil : au-delà de
   ~75 caractères l'œil se perd en revenant à la ligne.
   =================================================================== */
.dg-results { --dg-lecture: 76ch; --dg-sec: 30px; margin-top: 36px; }
.dg-teaser { padding: 32px; margin-bottom: 14px; }
.dg-depth-k {
  display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--cyan); margin-bottom: 10px;
}
/* Paragraphe de raisonnement : le pourquoi de la taille, la règle des
   cercles, les notes de section. Même police et même largeur que le reste. */
.dg-para {
  font-family: var(--sans); font-size: 15px; line-height: 1.55;
  color: var(--ink-2); max-width: var(--dg-lecture); margin-bottom: 14px;
  letter-spacing: 0;
}
.dg-bignum {
  font-family: var(--mono); font-weight: 600; font-size: clamp(46px, 7vw, 76px);
  line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  margin: 0;
}
/* Le libellé était inline à côté du chiffre : sur une ligne longue il
   s'enroulait sous un nombre à line-height 0.95, avec des interlignes
   absurdes et un alignement au hasard. Il devient un bloc à part entière,
   sous le chiffre, à une taille fixe. */
.dg-bignum small {
  display: block; font-family: var(--sans); font-size: 16px; line-height: 1.5;
  color: var(--ink-2); letter-spacing: 0; font-weight: 400;
  margin-top: 12px; max-width: var(--dg-lecture);
}
.dg-depth-p {
  color: var(--ink-2); max-width: var(--dg-lecture); margin-bottom: var(--dg-sec);
}

.dg-teasers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 26px; }
.dg-tz {
  background: var(--bg); border: 1px solid var(--line); border-radius: 13px;
  padding: 17px; display: flex; flex-direction: column; gap: 7px;
}
.dg-tzk {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--mute); display: flex; align-items: center; gap: 7px;
}
.dg-tzv { font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.dg-tzs { font-size: 13px; color: var(--mute); line-height: 1.45; }

.dg-peek {
  text-align: center; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--mute); margin: 20px 0 2px;
}

/* Bloc socle de l'aperçu : les critères comptables que le cerveau a produits.
 * Le nombre viendra du comptage Basile, pas du modèle (règle des deux couches). */
.dg-socle { margin-top: var(--dg-sec); }
/* « plus de » quand Basile a plafonné son total : on n'affiche jamais un
 * plafond comme s'il s'agissait d'un compte exact. */
.dg-plus { font-family: var(--sans); font-size: 0.3em; color: var(--mute); font-weight: 400; margin-right: 6px; }
.dg-socle .dg-madlib { margin-top: 16px; font-size: clamp(15px, 1.4vw, 17px); line-height: 1.9; }
.dg-socle .dg-depth-p { margin-top: 12px; }
.dg-pending {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 16px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--boom);
  border: 1px solid rgba(var(--boom-rgb), 0.4); background: rgba(var(--boom-rgb), 0.08);
  border-radius: 999px; padding: 6px 13px;
}
.theme-light .dg-pending { color: #8A6D00; border-color: rgba(138, 109, 0, 0.4); background: rgba(138, 109, 0, 0.06); }
/* Cadrage « trois cercles prioritaires » : présent mais en retrait, c'est une
   précision honnête, pas un avertissement qui affaiblirait le plan. */
.dg-cadrage { margin-bottom: 18px; color: var(--mute); font-style: italic; }
.dg-seg p { margin-top: 8px; }
.dg-scan .dg-note { display: block; margin-top: 14px; }

/* === Diagnostic verrouillé === */
.dg-locked {
  position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); background: var(--surface);
}
.dg-locked-body {
  padding: 32px; filter: blur(9px); transform: scale(1.01);
  transition: filter 0.5s, transform 0.5s; user-select: none;
}
.dg-locked.unlocked .dg-locked-body { filter: none; transform: none; user-select: auto; }

/* Les trois grilles de cartes de la page (teasers, cercles, ICP) partagent
   exactement la même gouttière et le même rayon : sans ça, trois rangées
   voisines paraissent appartenir à trois pages différentes. */
.dg-segs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
/* Colonne : le titre d'un cercle tient sur une ou deux lignes selon le nom, et
   sans ça la barre de chaleur flottait à une hauteur différente dans chaque
   carte. Elle est poussée en pied, les trois barres s'alignent. */
.dg-seg {
  background: var(--bg); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px; display: flex; flex-direction: column;
}
.dg-seg-rank { font-family: var(--mono); font-size: 11px; color: var(--mute); letter-spacing: 0.1em; }
.dg-seg h4 { margin: 9px 0 6px; font-size: 16px; font-weight: 600; line-height: 1.3; }
/* La logique du cercle est une phrase, pas une donnée : elle était en mono,
   comme du code. Elle garde sa couleur pour rester repérable, pas sa police. */
.dg-seg-cnt { font-size: 13.5px; line-height: 1.5; color: var(--cyan); }
.theme-light .dg-seg-cnt { color: var(--violet-deep); }
.dg-heat {
  height: 4px; border-radius: 3px; margin-top: auto; padding-top: 0;
  background: var(--line); overflow: hidden;
}
.dg-seg .dg-heat { margin-top: auto; }
.dg-seg p:last-of-type { margin-bottom: 14px; }
.dg-heat i { display: block; height: 100%; background: linear-gradient(90deg, var(--violet), var(--cyan)); }

/* Un seul espacement entre sections, porté par le trait de séparation :
   avant, chaque bloc ajoutait sa propre marge et le rythme sautait. */
.dg-divider { height: 1px; background: var(--line); margin: var(--dg-sec) 0 22px; }
/* L'en-tête de section était en flex avec la note rejetée à l'autre bout de
   la carte : sur 1000px de large, le titre et sa note n'avaient plus rien à
   voir ensemble. Elles s'empilent maintenant comme partout ailleurs. */
.dg-icp-head { display: block; margin-bottom: 16px; }
.dg-icp-note { font-family: var(--mono); font-size: 11px; color: var(--mute); }
.dg-icps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dg-icp {
  background: var(--bg); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px; display: flex; flex-direction: column; gap: 10px;
}
.dg-badge {
  align-self: flex-start; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; border: 1px solid var(--line-strong);
  border-radius: 999px; padding: 4px 10px;
}
.dg-b-p1 { color: var(--violet-2); border-color: rgba(var(--violet-rgb), 0.45); }
.dg-b-new { color: var(--cyan); border-color: rgba(var(--cyan-rgb), 0.45); }
.dg-b-win { color: var(--boom); border-color: rgba(var(--boom-rgb), 0.4); }
.theme-light .dg-b-p1 { color: var(--violet-deep); }
.theme-light .dg-b-win { color: #8A6D00; border-color: rgba(138, 109, 0, 0.4); }
.dg-icp h5 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.dg-icp p { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
/* La ligne taille + décideur est le pied de la fiche : elle se cale en bas pour
   que les trois fiches se lisent sur la même grille, quelle que soit la
   longueur de l'argument au-dessus. */
.dg-icp .dg-tzs { margin-top: auto; padding-top: 4px; }

.dg-rowset { display: grid; gap: 16px; }
.dg-prow {
  display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 24px; align-items: start;
  padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.dg-prow:last-child { border-bottom: none; padding-bottom: 0; }
.dg-pk {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--mute); padding-top: 3px;
}
/* Même largeur de lecture que les paragraphes : ces valeurs sont des phrases
   entières, elles ne doivent pas courir sur toute la carte. */
.dg-pv { color: var(--ink); font-size: 15px; line-height: 1.55; max-width: var(--dg-lecture); }
.dg-pv > div + div { margin-top: 8px; }
.dg-pv .dg-muted { color: var(--mute); }

/* Squelette du bloc verrouillé : le contenu payant n'est pas dans le navigateur,
 * on dessine donc des formes. Ce ne sont pas de fausses données, ce sont des
 * emplacements : on montre qu'il y a de la matière sans en livrer une ligne. */
.dg-barre {
  height: 9px; border-radius: 5px; margin: 9px 0;
  background: linear-gradient(90deg, var(--line-strong), var(--line));
}
.dg-barre-titre { height: 13px; width: 62%; margin-top: 12px; }
.dg-barre-courte { width: 45%; }
.dg-barre-large { height: 11px; width: 80%; margin-bottom: 18px; }

/* === Paywall === */
.dg-veil {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 24px;
  background: linear-gradient(180deg, rgba(var(--bg-rgb), 0.3), rgba(var(--bg-rgb), 0.82) 60%);
}
.dg-locked.unlocked .dg-veil { display: none; }
.dg-paycard {
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: 30px; max-width: 430px; text-align: center;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.95);
}
.theme-light .dg-paycard { box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.25); }
.dg-ready {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cyan); display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px;
}
.dg-paycard h3 {
  font-size: 22px; font-weight: 600; letter-spacing: -0.01em;
  margin-bottom: 10px; text-wrap: balance;
}
.dg-paycard h3 em { font-family: var(--serif); font-style: italic; color: var(--violet-2); }
.theme-light .dg-paycard h3 em { color: var(--violet-deep); }
.dg-paycard p { color: var(--ink-2); font-size: 14px; margin-bottom: 22px; }
.dg-price {
  font-family: var(--mono); font-variant-numeric: tabular-nums; display: flex;
  align-items: baseline; justify-content: center; gap: 9px; margin-bottom: 20px;
}
.dg-price b { font-size: 46px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.dg-price span { font-size: 13px; color: var(--mute); }
.dg-paynote {
  font-family: var(--mono); font-size: 10.5px; color: var(--mute);
  margin-top: 14px; letter-spacing: 0.05em;
}

/* === Accompagnement : deux niveaux, sobre === */
.dg-offre { margin-top: var(--dg-sec); }
.dg-offre .dg-para { margin-bottom: 18px; }
.dg-tiers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.dg-tier {
  background: var(--bg); border: 1px solid var(--line); border-radius: 14px;
  padding: 22px; display: flex; flex-direction: column;
}
/* Niveau 2 mis en avant discretement : c'est l'engagement recurrent, celui qu'on
   veut voir choisi, sans crier. */
.dg-tier-phare { border-color: rgba(var(--violet-rgb), 0.4); background: rgba(var(--violet-rgb), 0.05); }
.dg-tier-rang {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--mute);
}
.dg-tier h4 { margin: 8px 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.dg-tier p { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
/* Le prix se cale en pied de carte pour que les deux niveaux s'alignent quelle
   que soit la longueur du descriptif. */
.dg-tier-prix { margin-top: auto; padding-top: 18px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dg-tier-ap {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--mute);
}
.dg-tier-prix b {
  font-family: var(--mono); font-size: 30px; font-weight: 600; letter-spacing: -0.02em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.dg-tier-u { font-size: 13px; color: var(--mute); }
.dg-tiers-note { font-size: 12.5px; color: var(--mute); font-style: italic; margin-top: 14px; }

/* === CTA final === */
.dg-cta {
  margin: 16px 0 0; padding: 40px 32px; text-align: center; border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(var(--violet-rgb), 0.14), rgba(var(--cyan-rgb), 0.08));
  border: 1px solid var(--line-strong);
}
.dg-cta h3 {
  font-size: clamp(23px, 3.4vw, 32px); font-weight: 600; letter-spacing: -0.02em;
  margin-bottom: 10px; text-wrap: balance;
}
.dg-cta h3 em { font-family: var(--serif); font-style: italic; color: var(--violet-2); }
.theme-light .dg-cta h3 em { color: var(--violet-deep); }
.dg-cta p { color: var(--ink-2); max-width: 50ch; margin: 0 auto 24px; }

/* === Erreur === */
.dg-error {
  margin-top: 14px; font-size: 14px; color: var(--pink);
  border: 1px solid rgba(var(--pink-rgb), 0.4); background: rgba(var(--pink-rgb), 0.08);
  border-radius: 12px; padding: 12px 15px;
}

@media (max-width: 860px) {
  .dg-segs, .dg-icps, .dg-teasers, .dg-tiers { grid-template-columns: 1fr; }
  .dg-prow { grid-template-columns: 1fr; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .dg-after, .dg-radar::before, .dg-radar::after { animation: none; }
  .dg-locked-body { transition: none; }
}

/* Pièces jointes : plaquette, présentation. Lues nativement par le modèle. */
.dg-drop-note {
  display: block; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.04em; color: var(--mute); margin-top: 3px;
}
.dg-fichiers { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.dg-fichiers li {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px;
  background: var(--surface); font-size: 14px;
}
.dg-f-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-f-poids { font-family: var(--mono); font-size: 11px; color: var(--mute); flex: none; }
.dg-fichiers button {
  flex: none; background: none; border: none; cursor: pointer; padding: 2px 4px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--mute); transition: color 0.15s;
}
.dg-fichiers button:hover { color: var(--violet-2); text-decoration: underline; }

/* Mention quand le cerveau a élargi la fourchette de taille, ou n'a pas pu
   trancher : la méthode se voit, elle ne se devine pas. */
.dg-elargi {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--violet-2); background: rgba(var(--violet-rgb), 0.09);
  border: 1px solid rgba(var(--violet-rgb), 0.3);
  border-radius: 999px; padding: 6px 13px;
}
.theme-light .dg-elargi { color: var(--violet-deep); }

/* Volume compté par cercle : c'est ce qui prouve la règle des cercles. */
.dg-seg-vol {
  font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--violet-2); margin: 4px 0 2px;
}
.theme-light .dg-seg-vol { color: var(--violet-deep); }
.dg-vol-plus, .dg-vol-u {
  font-size: 12px; font-weight: 500; color: var(--mute); letter-spacing: 0;
}

/* Méthode d'écriture Boom Maker : signal détecté vers angle.
   Écran uniquement : ce bloc est volontairement absent du PDF. */
.dg-methode { display: grid; gap: 10px; margin-top: 16px; }
.dg-sig {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center;
  border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
  background: rgba(var(--violet-rgb), 0.04);
}
.dg-sig-col { min-width: 0; }
.dg-sig-col p { margin: 3px 0 0; font-size: 14px; line-height: 1.45; }
.dg-sig-k {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--mute);
}
.dg-sig-fleche { color: var(--violet-2); font-size: 18px; flex: none; }
@media (max-width: 620px) {
  .dg-sig { grid-template-columns: 1fr; gap: 8px; }
  .dg-sig-fleche { transform: rotate(90deg); justify-self: start; }
}

/* ===================================================================
   Version imprimable / PDF — à envoyer au client.
   Le bloc .dg-print est caché à l'écran et devient la SEULE chose
   visible à l'impression. Fond blanc et couleurs de marque figées,
   pour un rendu net quel que soit le thème actif du site.
   =================================================================== */
.dg-print { display: none; }

/* Barre de téléchargement (visible à l'écran une fois le plan ouvert). */
.dg-printbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 0 0 20px;
}
.dg-printbar strong { display: block; }
.dg-printbar span { color: var(--muted, #6B6880); font-size: .92rem; }

/* Capture du mail avant le téléchargement. Reste dans la barre, à la place du
   bouton, pour ne pas déplacer la page. */
.dg-pdfmail { display: flex; flex-direction: column; gap: 8px; min-width: min(340px, 100%); }
.dg-pdfmail-l { font-size: 13px; color: var(--ink-2); }
.dg-pdfmail-row { display: flex; gap: 8px; flex-wrap: wrap; }
.dg-pdfmail-row input {
  flex: 1; min-width: 180px; padding: 11px 14px; font-size: 15px;
  color: var(--ink); background: var(--bg); border: 1px solid var(--line-strong);
  border-radius: 12px; font-family: inherit;
}
.dg-pdfmail-row input:focus { outline: none; border-color: var(--violet-2); }
.dg-pdfmail-row .btn { flex: none; }
.dg-pdfmail .dg-error { margin-top: 0; }

@media print {
  /* On efface tout le site, on ne garde que le document. */
  .nav, .nav-mobile, main, .footer, footer, .dg-printbar { display: none !important; }
  .dg-print { display: block !important; }
  html, body { background: #fff !important; }
  @page { margin: 14mm; }
}

.dg-print {
  color: #14121F; background: #fff; line-height: 1.5; max-width: 100%;
}
.dg-print .dgp-head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 2px solid #14121F; padding-bottom: 8px; margin-bottom: 22px;
}
.dgp-brand { font-weight: 800; font-size: 18px; letter-spacing: -.02em; color: #14121F; }
.dgp-meta { font-size: 12px; color: #6B6880; }
.dgp-title { font-size: 30px; margin: 0 0 4px; letter-spacing: -.03em; color: #14121F; }
.dgp-sub { color: #6B6880; margin: 0 0 26px; font-size: 14px; }
.dgp-sec { margin-bottom: 24px; break-inside: avoid; }
.dgp-sec h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  color: #5B2DE6; margin: 0 0 10px; border-bottom: 1px solid #E7E4F0; padding-bottom: 6px;
}
.dgp-big { font-size: 34px; font-weight: 800; margin: 0; letter-spacing: -.02em; color: #14121F; }
.dgp-libelle { color: #6B6880; margin: 2px 0 8px; font-size: 13px; }
.dgp-crit { font-size: 13px; font-weight: 600; }
.dgp-note { color: #6B6880; font-style: italic; margin: 0 0 12px; font-size: 13px; }
.dgp-card {
  border: 1px solid #E7E4F0; border-radius: 10px; padding: 12px 14px;
  margin-bottom: 10px; break-inside: avoid;
}
.dgp-card h3 { margin: 2px 0 4px; font-size: 15px; color: #14121F; }
.dgp-card p { margin: 0; font-size: 13px; }
.dgp-rank {
  display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: #5B2DE6; margin-bottom: 2px;
}
.dgp-badge {
  display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: #4A22B8; background: #F1ECFF;
  padding: 2px 8px; border-radius: 999px; margin-bottom: 4px;
}
.dgp-logique { font-weight: 600; margin: 0 0 4px !important; font-size: 13px; }
.dgp-vol { font-size: 17px !important; font-weight: 800; color: #5B2DE6; margin: 2px 0 4px !important; }
.dgp-meta2 { color: #6B6880; margin-top: 6px !important; font-size: 12px; }
.dgp-row {
  display: grid; grid-template-columns: 160px 1fr; gap: 12px;
  margin-bottom: 8px; break-inside: avoid;
}
.dgp-row > span { font-weight: 700; font-size: 12px; color: #14121F; }
.dgp-row p { margin: 0; font-size: 13px; }
/* Bloc accompagnement dans le PDF : mêmes ordres de prix qu'à l'écran, pour que
   le prospect les retrouve en rouvrant le document. Couleurs de marque figées
   (le PDF est toujours sur fond blanc, quel que soit le thème du site). */
.dgp-lead { color: #6B6880; margin: 0 0 12px; font-size: 13px; }
.dgp-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dgp-tier {
  border: 1px solid #E7E4F0; border-radius: 10px; padding: 12px 14px;
  break-inside: avoid; display: flex; flex-direction: column;
}
.dgp-tier-rang {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: #5B2DE6; margin-bottom: 2px;
}
.dgp-tier h3 { margin: 2px 0 4px; font-size: 15px; color: #14121F; }
.dgp-tier p { margin: 0 0 10px; font-size: 12.5px; color: #14121F; }
.dgp-tier-prix { margin-top: auto; font-size: 13px; color: #6B6880; }
.dgp-tier-prix b { font-size: 22px; color: #14121F; letter-spacing: -.02em; }
.dgp-tiers-note { color: #6B6880; font-style: italic; font-size: 12px; margin: 10px 0 0; }
.dgp-foot {
  border-top: 1px solid #E7E4F0; margin-top: 26px; padding-top: 10px;
  font-size: 11px; color: #6B6880; display: flex; flex-direction: column; gap: 2px;
}