/* ═══════════════════════════════════════════════════════════════════
   LE HERO : le journal d'un agent, une nuit de semaine

   Cinq lignes s'écrivent l'une après l'autre (boucle de 12 s), puis la
   comparaison « sans agent / avec l'agent » s'allume à droite.

   Même règle que la scène Google Ads : L'ÉTAT AU REPOS EST L'ÉTAT FINAL.
   Le CSS de base montre le journal complet ; les images-clés partent d'un
   état antérieur. Sous prefers-reduced-motion la charte coupe toute
   animation, et l'on voit donc une scène entière, pas une boîte vide.
   ═══════════════════════════════════════════════════════════════════ */
.scene{margin-top:clamp(28px,3.4vw,44px)}

.journal{background:var(--deep);color:var(--on-deep);border:1px solid var(--deep-line);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);
  grid-template-rows:auto 1fr}
.j-tete{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;
  gap:16px;flex-wrap:wrap;padding:15px 22px;border-bottom:1px solid var(--deep-line)}
.j-qui{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--deep-mut)}

.j-lignes{list-style:none;margin:0;padding:clamp(18px,2.4vw,28px) 22px;display:grid;gap:4px;
  border-right:1px solid var(--deep-line)}
.j-lignes li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;
  padding:10px 12px;font-size:14.5px;line-height:1.5;color:var(--deep-mut);
  border-left:2px solid transparent;
  animation:iaLigne 12s cubic-bezier(.3,0,.2,1) infinite}
.j-lignes .h{font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:12.5px;color:var(--accent-2);padding-top:2px}
.j-lignes b{color:var(--on-deep);font-weight:600}
.j-lignes em{font-style:normal;color:var(--accent-2);font-weight:600}
.j-lignes .l2{animation-delay:.9s}
.j-lignes .l3{animation-delay:1.8s}
.j-lignes .l4{animation-delay:2.7s}
.j-lignes .l5{animation-delay:3.6s}
/* chaque ligne entre, se surligne un instant, puis reste posée */
@keyframes iaLigne{
  0%,4%{opacity:0;transform:translateY(8px);border-left-color:transparent;background:transparent}
  9%{opacity:1;transform:none;border-left-color:var(--accent-2);background:rgba(62,206,164,.08)}
  16%,88%{opacity:1;transform:none;border-left-color:transparent;background:transparent}
  96%,100%{opacity:0;transform:none}}

.j-cote{display:grid;grid-template-rows:1fr 1fr}
.j-cote > div{padding:clamp(18px,2.2vw,26px) 22px;display:flex;flex-direction:column;gap:6px;
  justify-content:center}
.j-cote .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--deep-mut)}
.j-cote strong{font-size:clamp(17px,1.8vw,21px);font-weight:700;letter-spacing:-.02em;line-height:1.2}
.j-cote .s{font-size:13px;color:var(--deep-mut)}
.j-avant{border-bottom:1px solid var(--deep-line)}
.j-avant strong{color:var(--deep-mut);text-decoration:line-through;
  text-decoration-color:rgba(234,240,236,.35)}
.j-apres{background:rgba(62,206,164,.09);animation:iaApres 12s linear infinite}
.j-apres .k,.j-apres strong{color:var(--accent-2)}
@keyframes iaApres{0%,38%{opacity:.25}46%,88%{opacity:1}96%,100%{opacity:.25}}

@media (max-width:820px){
  .journal{grid-template-columns:minmax(0,1fr)}
  .j-lignes{border-right:0;border-bottom:1px solid var(--deep-line);padding:14px 10px}
  .j-lignes li{grid-template-columns:44px minmax(0,1fr);gap:10px;font-size:13.5px}
  .j-cote{grid-template-rows:none;grid-template-columns:1fr 1fr}
  .j-avant{border-bottom:0;border-right:1px solid var(--deep-line)}
}
@media (max-width:460px){
  .j-cote{grid-template-columns:minmax(0,1fr)}
  .j-avant{border-right:0;border-bottom:1px solid var(--deep-line)}
}

/* ---------- les quatre services de l'entreprise ---------- */
.usages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.u{background:var(--surface);padding:clamp(24px,3vw,36px)}
.u .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent-txt);font-weight:700}
.u h3{margin:10px 0 18px;font-size:clamp(19px,2.1vw,23px);font-weight:700;
  letter-spacing:-.025em;line-height:1.2}
.u ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.u li{position:relative;padding-left:19px;font-size:14.5px;color:var(--muted);line-height:1.55}
.u li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;
  background:var(--accent)}
@media (max-width:760px){.usages{grid-template-columns:minmax(0,1fr)}}

/* ---------- la chaîne publicité → agent → rendez-vous ---------- */
.pont{align-items:center}
.pont .lede{max-width:none;margin:16px 0 0}
.chaine{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:c}
.chaine li{position:relative;background:var(--surface);border:1px solid var(--line);
  padding:16px 20px 16px 58px;display:grid;gap:2px}
.chaine li + li{margin-top:22px}
/* la flèche entre deux maillons : un trait, pas une icône */
.chaine li + li::after{content:"";position:absolute;left:33px;top:-23px;width:1.5px;height:22px;
  background:var(--line)}
.chaine li::before{counter-increment:c;content:counter(c);position:absolute;left:18px;top:17px;
  width:26px;height:26px;display:grid;place-items:center;
  font-family:var(--mono);font-size:12px;font-weight:700;
  border:1.5px solid var(--line);color:var(--muted)}
.chaine .k{font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted)}
.chaine b{font-size:16px;font-weight:700;letter-spacing:-.015em}
.chaine .s{font-size:13.5px;color:var(--muted)}
.chaine li.on{background:var(--deep);border-color:var(--deep);color:var(--on-deep)}
.chaine li.on::before{background:var(--accent-2);border-color:var(--accent-2);color:var(--deep)}
.chaine li.on .k{color:var(--accent-2)}
.chaine li.on .s{color:var(--deep-mut)}

/* ---------- déjà construit ---------- */
/* cinq références : trois en haut, deux plus larges en bas. Une grille de
   six pistes évite la case vide qu'une grille de trois laisserait. */
.refs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;
  background:var(--deep-line);border:1px solid var(--deep-line)}
.ref{grid-column:span 2}
.ref:nth-child(n+4){grid-column:span 3}
.ref{background:var(--deep);padding:clamp(22px,2.6vw,30px);display:flex;flex-direction:column}
.ref .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-2);font-weight:700}
.ref strong{display:block;margin:12px 0 12px;font-size:clamp(17px,1.8vw,19.5px);
  font-weight:700;letter-spacing:-.022em;line-height:1.22}
.ref p{font-size:14px;color:var(--deep-mut);line-height:1.62;margin:0 0 18px}
.ref p b{color:var(--on-deep)}
.ref .tags{margin-top:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  color:rgba(234,240,236,.42)}
@media (max-width:1020px){
  .refs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ref,.ref:nth-child(n+4){grid-column:auto}
  .ref:last-child{grid-column:1 / -1}
}
@media (max-width:640px){.refs{grid-template-columns:minmax(0,1fr)}}


/* ---------- les trois conditions, puis les trois limites ----------
   Même composant que la cartographie : trois faces sur le bandeau graphite.
   Ici deux sections l'emploient, l'une avec titre de face, l'autre sans. */
.duo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--deep-line);border:1px solid var(--deep-line)}
.duo--trois{grid-template-columns:repeat(3,minmax(0,1fr))}
.face{background:var(--deep);padding:clamp(24px,3vw,34px)}
.face .k{font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent-2);font-weight:700}
.face strong{display:block;margin:12px 0 14px;font-size:clamp(18px,2.1vw,22px);
  font-weight:700;letter-spacing:-.026em;line-height:1.18}
.face .quoi{font-size:14.5px;color:var(--deep-mut);line-height:1.66}
.face .quoi b{color:var(--on-deep)}
/* sur graphite, le vert d'accent du corps de texte n'a pas assez de contraste :
   c'est l'accent clair qui sert de couleur de lien, ici et dans le paragraphe
   de bascule. */
.face .quoi a,.apres a{color:var(--accent-2);text-decoration:underline;
  text-underline-offset:2px}

.apres{margin-top:clamp(24px,3vw,34px);font-size:clamp(15.5px,1.5vw,17px);
  color:var(--deep-mut);max-width:74ch;line-height:1.66}
.apres b{color:var(--on-deep)}

/* ---------- ce que contient la gestion ---------- */
.prose-liste{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:11px}
.prose-liste li{position:relative;padding-left:19px;
  font-size:15px;color:var(--muted);line-height:1.6}
.prose-liste li::before{content:"";position:absolute;left:0;top:9px;
  width:6px;height:6px;background:var(--accent)}
.prose-liste li b{color:var(--ink);font-weight:700}
/* deux colonnes, pas trois : les entrées commencent par un intitulé en gras
   suivi d'une phrase entière, et à trois colonnes chaque ligne ne tient plus
   que quatre ou cinq mots. */
.prose-liste--deux{grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px clamp(24px,4vw,56px)}
@media (max-width:760px){
  .prose-liste--deux{grid-template-columns:minmax(0,1fr)}
}

/* ---------- les quatre premières semaines ---------- */
.jours{margin:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.jours .j{background:var(--surface);padding:18px 22px;
  display:grid;grid-template-columns:minmax(0,92px) minmax(0,1fr);gap:22px;align-items:start}
.jours .d{font-family:var(--mono);font-size:11.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent-txt);padding-top:3px}
.jours div{font-size:14.5px;color:var(--muted);line-height:1.66}
.jours b{color:var(--ink);font-weight:700}

/* ---------- les trois lignes de tarif ----------
   Une seule carte est sombre : celle qui engage. Les deux autres restent
   parfaitement lisibles : on met en avant, on ne dévalorise pas. */
.offres{margin-top:clamp(28px,3.6vw,44px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.8vw,20px);align-items:start}

.of{background:var(--surface);border:1px solid var(--line);
  padding:clamp(24px,2.8vw,32px);display:flex;flex-direction:column;height:100%}
/* deux lignes réservées : sinon un intitulé qui passe à la ligne décale son
   prix et les trois montants ne s'alignent plus */
.of .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-txt);display:block;line-height:1.5;
  min-height:calc(2 * 1.5em)}
.of .k em{font-style:normal;color:var(--muted)}
.of .montant{margin:14px 0 8px;font-family:var(--mono);
  font-variant-numeric:tabular-nums;letter-spacing:-.04em;line-height:1}
.of .montant .n{font-size:clamp(34px,4.4vw,48px);font-weight:600}
.of .montant .u{font-size:15px;font-weight:600;color:var(--muted);letter-spacing:0}
.of .cond{font-size:13.5px;color:var(--muted);line-height:1.55}
.of ul{list-style:none;margin:22px 0 24px;padding:22px 0 0;display:grid;gap:11px;
  border-top:1px solid var(--line-soft)}
/* puce en position absolue, jamais en flexbox : un <b> dans un li en
   display:flex devient un élément de flex et part en colonne */
.of li{position:relative;padding-left:19px;
  font-size:13.8px;color:var(--muted);line-height:1.55}
.of li::before{content:"";position:absolute;left:0;top:7px;
  width:6px;height:6px;background:var(--accent)}
.of li b{color:var(--ink);font-weight:700}
/* ce que la ligne ne contient pas : dit, pas caché */
.of li.non::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line)}
.of li.non{color:var(--muted);opacity:.82}
.of .btn-row{margin-top:auto}
.of .btn{width:100%}
.of .fin{margin-top:16px;font-size:12.5px;color:var(--muted);line-height:1.55}

.of--phare{background:var(--deep);color:var(--on-deep);border-color:var(--deep)}
.of--phare .k{color:var(--accent-2)}
.of--phare .k em{color:var(--deep-mut)}
.of--phare .cond,.of--phare li{color:var(--deep-mut)}
.of--phare .montant .u{color:var(--deep-mut)}
.of--phare ul{border-top-color:var(--deep-line)}
.of--phare li b{color:var(--on-deep)}
.of--phare .fin{color:var(--accent-2)}

.offres-note{margin-top:clamp(20px,2.4vw,28px);font-size:14px;color:var(--muted);
  line-height:1.65;max-width:74ch}
.offres-note b{color:var(--ink);font-weight:700}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .duo,.duo--trois{grid-template-columns:minmax(0,1fr)}
  .offres{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .jours .j{grid-template-columns:minmax(0,1fr);gap:8px}
}

/* « Offert », « Sur devis » : un mot à la place du montant, donc plus petit
   que les chiffres de la page Google Ads pour tenir sur une ligne. */
.of .montant .n--mot{font-family:var(--sans);font-weight:700;font-size:clamp(28px,3.2vw,38px);letter-spacing:-.035em}