/* ==========================================================================
   Page Solutions IA (/agent/), reprise d'odratta.com le 09/11/2026.
   Ce qui n'appartient qu'à elle. Préfixe : .plo-ag-
   Le motif de la page reste le journal : un cadre à filets d'un pixel, l'heure en chiffres tabulaires, l'outil en
   clair, l'état en icône. Trois états, trois teintes partout : fait (vert), attend votre accord (encre), transmis
   (bleu). Depuis le 11/11/2026, toute la page est sur le noir d'Odratta Studio (§0) ; seuls les écrans montrés en
   exemple (le journal, le point du matin) restent clairs, comme la fenêtre de l'illustration du héros. Le bleu reste
   l'accent et l'appel final.
   Seul mouvement propre à la page : les lignes du journal arrivent une à une, une fois, quand le visiteur change de
   réglage ; jamais avec « moins de mouvement ». Les onglets sont ceux du studio ([data-onglets], studio.js).
   ========================================================================== */

/* ---------- 0. Fond noir (Joseph, 11/11/2026 : « mette le fond noir ») ----------
   Toute la page passe au noir du studio (#0a0b0e, celui de l'en-tête et du héros), pas seulement le héros. Les rôles
   de site.css sont redéfinis sur :root, pour que les jetons qui en dérivent (--c-texte, --trait, --secondaire-pale…)
   suivent d'eux-mêmes. Teintes communes aux pages noires du Studio (/studio/ et /site/, 11/11/2026). Ce fichier n'est chargé que par /agent/ (la page
   /hebergez-votre-agent-ia/, qui porte aussi .page-agent, ne le charge pas). À l'impression, la palette claire de
   site.css reprend la main (@media screen).
   Contrastes sur #0a0b0e : texte 18,1 ; secondaire 11,4 ; légendes 7,1 ; bleu clair 9,1 ; petit texte bleu 11,8 ;
   vert 10,5. Sur les surfaces #15151d : secondaire 10,6. */
@media screen {
  :root {
    color-scheme: dark;
    /* Mêmes valeurs que /studio/ (studio.css § 20) et /site/ (p-site.css) : les pages noires du Studio se suivent sans écart. */
    --papier: #0a0b0e;
    --encre: #f4f5f8;
    --ardoise: #c4c5cd;
    --ardoise-2: #9a9aa3;
    --filet: rgb(255 255 255 / 0.13);
    --filet-fort: rgb(255 255 255 / 0.3);
    --filet-encre: rgb(255 255 255 / 0.55);
    --gris-fond: #121319;
    --surface: #15151d;
    --surface-2: #1d1d27;
    --survol: rgb(255 255 255 / 0.07);
    --bord-controle: rgb(255 255 255 / 0.5);
    --bord-champ-sombre: #767a86;
    --bleu-clair: #8dafff;
    --calque: rgb(46 87 231 / 0.2);
    --calque-2: rgb(46 87 231 / 0.3);
    --bord-bleu: rgb(141 175 255 / 0.5);
    --bleu-texte: #b3c8ff;
    --focus: #fff;
    --ombre-1: 0 1px 2px rgb(0 0 0 / 0.5);
    --ombre-2: 0 12px 32px -12px rgb(0 0 0 / 0.7), 0 2px 6px -2px rgb(0 0 0 / 0.4);
    --ombre-3: 0 24px 64px -24px rgb(0 0 0 / 0.85);
    --ombre-douce: 0 1px 2px rgb(0 0 0 / 0.4), 0 22px 44px -26px rgb(0 0 0 / 0.8);
    /* Propres à cette page : coches vertes et croix rouges du journal et des limites. */
    --vert: #5fd394;
    --vert-pale: #0f2a1e;
    --rouge: #ff7d73;
    scrollbar-color: var(--filet-fort) var(--papier);
  }
  /* Les sections teintées gardent leur rythme : sur le noir, un écart de teinte aussi faible se lit par ses filets. */
  .page-agent main .section-grise { border-block: 1px solid var(--filet); }
  /* Le bouton blanc de l'en-tête (« Contact ») écrit en --encre, devenue claire : il garde le noir du studio,
     comme les boutons blancs de studio.css (.st-offre). */
  .page-agent .btn-blanc { --texte: #0a0b0e; --fond-survol: #e8e8ee; --fond-appui: #d6d6de; }
}

.plo-ag-ic { width: 16px; height: 16px; }
.plo-ag-nw { white-space: nowrap; }
.plo-ag-ancre { display: block; height: 0; }
.plo-ag-k { margin: 0 0 8px; font-size: 0.8125rem; font-weight: 600; line-height: 1.3; color: var(--ardoise-2); }

/* ---------- Héros : texte à gauche ; à droite, l'illustration des solutions IA ----------
   .heros-illustration (site.css §3.5 ; Joseph, 11/11/2026 : « pas les mêmes illustrations, même style mais adapté ») :
   le plan coté Odratta posé sur le filet des faits, où sont branchés la messagerie, l'agenda et le fichier clients ;
   devant, le « Point du matin » (ce qui est fait, ce qui attend « Valider » ou « Corriger »), deux pastilles tirées
   de la page. Le journal, lui, se lit plus bas, dans les réglages. Sous 900 px, l'illustration passe sous le texte. */
.plo-ag-heros { padding-bottom: 0; }
.plo-ag-heros-grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 4vw, 64px); align-items: end; }
.plo-ag-heros-texte { align-self: start; min-width: 0; padding-bottom: clamp(48px, 5vw, 80px); }
.plo-ag-heros h1 { max-width: none; font-size: var(--t-0); }
.plo-ag-t1, .plo-ag-t2 { display: block; text-wrap: balance; }
.plo-ag-heros .heros-texte { max-width: 34em; }

.plo-ag-faits { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0; margin: 0; padding: 16px 0 20px; list-style: none; border-top: 1px solid rgba(255, 255, 255, .34); font-size: var(--t-6); font-weight: 600; line-height: 1.35; color: #fff; }
.plo-ag-faits li { display: block; text-wrap: pretty; }
.plo-ag-faits li + li { margin-left: 20px; padding-left: 20px; border-left: 1px solid rgba(255, 255, 255, .34); }
/* Le délai se lit comme une phrase, l'icône en tête (même écriture que /logiciel/ et /site/) : pas de pastille encadrée,
   et « par une personne » suit le délai au lieu de tomber seul sous un cadre. */
.plo-ag-puce { font-variant-numeric: tabular-nums; }
.plo-ag-puce .ic { display: inline-block; width: 15px; height: 15px; margin-right: 7px; vertical-align: -2px; }
.plo-ag-puce-suite { font-weight: 500; color: #eaf0ff; }

@media (max-width: 899px) {
  .plo-ag-heros-grille { grid-template-columns: minmax(0, 1fr); }
  .plo-ag-heros-texte { padding-bottom: 36px; }
}
@media (max-width: 599px) {
  .plo-ag-faits { flex-direction: column; align-items: flex-start; gap: 8px; }
  .plo-ag-faits li + li { margin-left: 0; padding-left: 0; border-left: 0; }
}

/* ---------- Le journal : carte blanche, palette claire ----------
   Un écran montré en exemple, clair sur la page noire : toute la palette claire de site.css y est rétablie, états
   compris (vert, calque, gris), pour que « Fait », « À valider » et « Transmis » gardent leurs teintes d'origine. */
.plo-ag-log, .plo-ag-rapport {
  color-scheme: light;
  --encre: #121a33; --ardoise: #4b5470; --ardoise-2: #5c6480; --filet: #e2e6ef; --filet-fort: #c6ccdb;
  --bleu-clair: #2e57e7; --bleu-texte: #294288; --calque: #eff4ff; --gris-fond: #f5f7fb; --surface: #fff;
  --vert: #0f7a55; --vert-pale: #e2f4ec; --focus: #2e57e7;
  margin: 0; border: 1px solid var(--filet-fort); border-radius: var(--r-bloc); background: #fff; color: var(--encre);
}
.plo-ag-log-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 13px 18px; border-bottom: 1px solid var(--filet); }
.plo-ag-log-k { font-size: 0.8125rem; font-weight: 600; color: var(--ardoise-2); }
.plo-ag-log-m { font-size: var(--t-6); font-weight: 700; }
.plo-ag-log-etat { margin-left: auto; }
.plo-ag-log-liste { margin: 0; padding: 4px 18px 6px; list-style: none; }
.plo-ag-ligne {
  display: grid; grid-template-columns: 22px auto minmax(0, 1fr); grid-template-areas: 'ico h o' '. t t';
  align-items: center; gap: 3px 10px; padding: 11px 0; border-top: 1px solid var(--filet);
}
.plo-ag-ligne:first-child { border-top: 0; }
.plo-ag-etat { grid-area: ico; display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--r-petit); }
.plo-ag-etat .ic { width: 14px; height: 14px; stroke-width: 2; }
.plo-ag-heure { grid-area: h; font-size: 0.8125rem; font-weight: 500; line-height: 1.3; font-variant-numeric: tabular-nums; color: var(--ardoise-2); }
.plo-ag-outil { grid-area: o; font-size: 0.8125rem; font-weight: 600; line-height: 1.3; color: var(--ardoise); }
.plo-ag-texte { grid-area: t; font-size: var(--t-6); line-height: 1.45; text-wrap: pretty; }
.plo-ag-ligne--fait .plo-ag-etat { background: var(--vert-pale); color: var(--vert); }
.plo-ag-ligne--attente .plo-ag-etat { background: var(--gris-fond); color: var(--encre); box-shadow: inset 0 0 0 1px var(--filet-fort); }
.plo-ag-ligne--attente .plo-ag-outil { color: var(--bleu-clair); }
.plo-ag-ligne--transmis .plo-ag-etat { background: var(--calque); color: var(--bleu-clair); }
.plo-ag-legende { padding: 11px 18px 13px; border-top: 1px solid var(--filet); font-size: 0.8125rem; line-height: 1.4; color: var(--ardoise-2); }
@media (min-width: 600px) {
  .plo-ag-ligne { grid-template-columns: 22px 2.9rem 7.4rem minmax(0, 1fr); grid-template-areas: 'ico h o t'; align-items: baseline; column-gap: 12px; }
  .plo-ag-etat { align-self: start; }
  .plo-ag-heure, .plo-ag-outil { line-height: 1.45rem; }
}
@media (max-width: 419px) {
  .plo-ag-log-k { display: none; }
  .plo-ag-log-tete, .plo-ag-log-liste, .plo-ag-legende { padding-inline: 14px; }
}
/* Les lignes arrivent une à une, une seule fois, dans un réglage que le visiteur vient d'ouvrir
   (le panneau « Elle demande », ouvert au chargement, reste immobile). */
@media (prefers-reduced-motion: no-preference) {
  .plo-ag-pan:not(#ag-pan-demande) .plo-ag-ligne { animation: plo-ag-ligne .5s var(--facile) both; animation-delay: calc(.35s + var(--i) * .5s); }
  .plo-ag-pan:not(#ag-pan-demande) .plo-ag-ligne--attente .plo-ag-etat .ic { animation: plo-ag-sablier .7s var(--facile) both; animation-delay: calc(.6s + var(--i) * .5s); }
}
@keyframes plo-ag-ligne { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes plo-ag-sablier { from { transform: rotate(-180deg); } to { transform: none; } }

/* ---------- Les solutions : une liste à filets ---------- */
.plo-ag-missions { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--filet); }
.plo-ag-mi { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: 'ico main' '. do' '. vous'; gap: 16px; padding: clamp(20px, 2.4vw, 28px) 0; border-top: 1px solid var(--filet); }
.plo-ag-mi:first-child { border-top: var(--trait); }
.plo-ag-mi-ico { grid-area: ico; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--filet-fort); border-radius: var(--r-petit); color: var(--bleu-clair); }
.plo-ag-mi-ico .ic { width: 20px; height: 20px; }
.plo-ag-mi-main { grid-area: main; }
.plo-ag-mi-do { grid-area: do; }
.plo-ag-mi-vous { grid-area: vous; }
.plo-ag-mi h3 { margin: 0; font-size: var(--t-3); line-height: 1.2; text-wrap: balance; }
.plo-ag-mi-main p { max-width: 34em; margin: 8px 0 0; color: var(--ardoise); text-wrap: pretty; }
.plo-ag-gestes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.plo-ag-gestes li { display: inline-flex; align-items: center; gap: 6px; }
.plo-ag-geste { padding: 4px 9px; border: 1px solid var(--filet-fort); border-radius: var(--r-petit); background: var(--surface); font-size: 0.875rem; line-height: 1.3; }
.plo-ag-sep { font-size: 0.875rem; line-height: 1; color: var(--bleu-clair); }
.plo-ag-mi-v { margin: 0; line-height: 1.45; }
@media (min-width: 768px) {
  .plo-ag-mi { grid-template-columns: 40px minmax(0, 1.15fr) minmax(0, 1fr); grid-template-areas: 'ico main do' 'ico main vous'; column-gap: clamp(16px, 2.4vw, 40px); row-gap: 18px; align-items: start; }
}
@media (min-width: 1100px) {
  .plo-ag-mi { grid-template-columns: 40px minmax(0, 5fr) minmax(0, 4.6fr) minmax(0, 2.4fr); grid-template-areas: 'ico main do vous'; }
}

/* ---------- Ce qui la met au travail : déclencheurs, la solution, ce qui vous revient ---------- */
.plo-ag-carte { display: grid; margin-top: clamp(32px, 3.4vw, 56px); }
.plo-ag-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.plo-ag-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border: 1px solid var(--filet-fort); border-radius: var(--r-petit); background: var(--surface); font-size: var(--t-6); font-weight: 600; line-height: 1.2; }
.plo-ag-chips .ic { color: var(--bleu-clair); }
.plo-ag-noeud { padding: 18px 20px 20px; border: 1px solid var(--bleu); border-radius: var(--r-bouton); background: var(--surface); }
.plo-ag-noeud p { margin: 0; line-height: 1.45; text-wrap: pretty; }
.plo-ag-outils { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 14px 0 0; list-style: none; border-top: 1px solid var(--filet); }
.plo-ag-outils li { padding: 4px 9px; border-radius: var(--r-petit); background: var(--calque); font-size: 0.8125rem; font-weight: 600; line-height: 1.3; color: var(--bleu-texte); }
.plo-ag-issues { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.plo-ag-issue { display: flex; align-items: flex-start; gap: 12px; padding: 15px 0; border-top: 1px solid var(--filet-fort); font-size: var(--t-6); line-height: 1.4; color: var(--ardoise); }
.plo-ag-issue b { display: block; font-size: var(--t-5); font-weight: 700; color: var(--encre); }
.plo-ag-issue-i { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--r-petit); }
.plo-ag-issue--fait .plo-ag-issue-i { background: var(--vert-pale); color: var(--vert); }
.plo-ag-issue--attente .plo-ag-issue-i { background: var(--surface); color: var(--encre); box-shadow: inset 0 0 0 1px var(--filet-fort); }
.plo-ag-issue--transmis .plo-ag-issue-i { background: var(--calque); color: var(--bleu-clair); }
/* Les liaisons : un fil d'un pixel et un nœud carré à l'arrivée ; verticales sur téléphone, horizontales sur ordinateur */
.plo-ag-fil { position: relative; justify-self: start; width: 1px; height: 36px; margin: 10px 0 10px 18px; background: var(--bord-bleu); }
.plo-ag-fil::after { content: ''; position: absolute; left: -2px; bottom: -2px; width: 5px; height: 5px; background: var(--bleu); }
@media (min-width: 1100px) {
  .plo-ag-carte { grid-template-columns: minmax(0, .9fr) 56px minmax(0, 1.05fr) 56px minmax(0, 1.05fr); align-items: start; }
  .plo-ag-carte .plo-ag-k { min-height: 20px; line-height: 20px; }
  .plo-ag-fil { justify-self: stretch; width: auto; height: 1px; margin: 54px 8px 0; }
  .plo-ag-fil::after { left: auto; right: -2px; }
}

/* ---------- Le réglage de l'autonomie : onglets et piste ---------- */
.plo-ag-reglage { margin-top: clamp(32px, 3.4vw, 56px); }
.plo-ag-ctl { display: grid; width: fit-content; max-width: 100%; }
.plo-ag-onglets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.plo-ag-onglet {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 9px 20px;
  border: 1px solid var(--filet-fort); border-radius: var(--r-petit); background: var(--surface);
  font: inherit; font-size: var(--t-6); font-weight: 600; color: var(--ardoise); white-space: nowrap; cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.plo-ag-onglet:hover { color: var(--encre); border-color: var(--bord-controle); }
.plo-ag-onglet[aria-selected="true"] { border-color: var(--bleu); background: var(--calque); color: var(--encre); }
.plo-ag-piste { --n: 1; position: relative; height: 1px; margin: 14px 0 4px; background: var(--filet-fort); }
.plo-ag-reglage:has(.plo-ag-onglet:nth-child(1)[aria-selected="true"]) .plo-ag-piste { --n: 0; }
.plo-ag-reglage:has(.plo-ag-onglet:nth-child(3)[aria-selected="true"]) .plo-ag-piste { --n: 2; }
.plo-ag-piste i { position: absolute; inset: 0; background: var(--bleu); transform: scaleX(calc((var(--n) * 2 + 1) / 6)); transform-origin: left; transition: transform 300ms var(--facile); }
.plo-ag-piste b { position: absolute; top: -3px; width: 7px; height: 7px; margin-left: -3px; border: 1px solid var(--filet-fort); background: var(--papier); }
.plo-ag-piste b:nth-of-type(1) { left: calc(100% / 6); }
.plo-ag-piste b:nth-of-type(2) { left: 50%; }
.plo-ag-piste b:nth-of-type(3) { left: calc(500% / 6); }
.plo-ag-piste b:nth-of-type(1),
.plo-ag-reglage:not(:has(.plo-ag-onglet:nth-child(1)[aria-selected="true"])) .plo-ag-piste b:nth-of-type(2),
.plo-ag-reglage:has(.plo-ag-onglet:nth-child(3)[aria-selected="true"]) .plo-ag-piste b:nth-of-type(3) { border-color: var(--bleu); background: var(--bleu); }
@media (max-width: 479px) {
  .plo-ag-ctl { width: 100%; }
  .plo-ag-onglet { padding-inline: 8px; font-size: 0.875rem; }
}
.plo-ag-pan { display: grid; gap: var(--e-3); margin-top: 20px; }
.plo-ag-pan[hidden] { display: none; }
/* L'écran clair posé à même le noir : pas de cadre autour d'un cadre. */
.plo-ag-pan-ecran { display: grid; place-items: center start; }
.plo-ag-pan-ecran .plo-ag-log { width: 100%; max-width: 680px; }
.plo-ag-pan-cote { display: flex; flex-direction: column; gap: 14px; padding: clamp(20px, 2.6vw, 36px); border: 1px solid var(--filet-fort); border-radius: var(--r-bloc); }
.plo-ag-pan-cote h3 { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); line-height: 1.1; text-wrap: balance; }
.plo-ag-pan-p { max-width: 30em; margin: 0; color: var(--ardoise); text-wrap: pretty; }
.plo-ag-pan-vous { display: grid; gap: 2px; margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--filet); font-weight: 600; line-height: 1.4; }
.plo-ag-pan-vous .plo-ag-k { margin: 0; }
@media (min-width: 900px) { .plo-ag-pan { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.plo-ag-fin { display: flex; align-items: flex-start; gap: 10px; max-width: 46em; margin: 20px 0 0; line-height: 1.5; }
.plo-ag-fin .ic { flex: none; margin-top: 3px; color: var(--bleu-clair); }

/* ---------- Le point du matin ---------- */
.plo-ag-point { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: clamp(28px, 3vw, 40px); }
.plo-ag-point-texte p { max-width: 30em; margin: 16px 0 0; color: var(--ardoise); line-height: 1.7; }
@media (min-width: 1100px) {
  .plo-ag-point { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-3); align-items: start; }
  .plo-ag-point-texte { grid-column: 1 / span 5; }
  .plo-ag-rapport { grid-column: 7 / -1; }
}
.plo-ag-rapport-barre { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-bottom: 1px solid var(--filet); font-size: 0.875rem; font-weight: 700; }
.plo-ag-rapport-barre .ic { color: var(--ardoise-2); }
.plo-ag-rapport-h { margin-left: auto; font-size: 0.8125rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ardoise-2); }
.plo-ag-rapport-corps { display: grid; gap: 20px; padding: 18px 20px 20px; }
.plo-ag-rapport-g { display: grid; gap: 10px; }
.plo-ag-rapport-g ul { margin: 0; padding: 0; list-style: none; }
.plo-ag-rapport-g li { padding: 8px 0; border-top: 1px solid var(--filet); line-height: 1.45; text-wrap: pretty; }
.plo-ag-tag { display: inline-flex; align-items: center; justify-self: start; gap: 7px; margin: 0; padding: 6px 12px; border-radius: var(--r-petit); font-size: 0.875rem; font-weight: 700; line-height: 1.2; }
.plo-ag-rapport-g--fait .plo-ag-tag { background: var(--vert-pale); color: var(--vert); }
.plo-ag-rapport-g--attente .plo-ag-tag { background: var(--gris-fond); color: var(--encre); box-shadow: inset 0 0 0 1px var(--filet-fort); }
.plo-ag-rapport-g--transmis .plo-ag-tag { background: var(--calque); color: var(--bleu-texte); }

/* ---------- La mise en place : une ligne de temps à nœuds (verticale, puis côte à côte dès 1100 px) ---------- */
.plo-ag-etapes { display: grid; gap: 0; margin: 0; padding: 0 0 0 20px; list-style: none; }
.plo-ag-etape { position: relative; display: grid; gap: 6px; align-content: start; padding-bottom: 28px; }
.plo-ag-etape:last-child { padding-bottom: 0; }
.plo-ag-etape::before { content: ''; position: absolute; left: -23px; top: 9px; width: 5px; height: 5px; border: 1px solid var(--bleu); background: var(--papier); }
.plo-ag-etape:first-child::before { background: var(--bleu); }
.plo-ag-etape::after { content: ''; position: absolute; left: -21px; top: 16px; bottom: 0; width: 1px; background: var(--filet-fort); }
.plo-ag-etape:last-child::after { display: none; }
.plo-ag-etape-tete { display: flex; align-items: center; gap: 9px; }
.plo-ag-etape-ico { display: inline-flex; flex: none; color: var(--bleu-clair); }
.plo-ag-etape-ico .ic { width: 20px; height: 20px; }
.plo-ag-etape h3 { margin: 0; font-size: var(--t-4); line-height: 1.2; }
.plo-ag-etape p { max-width: 30em; margin: 0; color: var(--ardoise); text-wrap: pretty; }
@media (min-width: 1100px) {
  .plo-ag-etapes { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--e-3); padding-left: 0; }
  /* Titres sur une ou deux lignes : les paragraphes des quatre étapes partent de la même hauteur. */
  .plo-ag-etapes { grid-template-rows: auto auto; }
  .plo-ag-etape { grid-row: span 2; grid-template-rows: subgrid; row-gap: 6px; padding: 18px 24px 0 0; border-top: 1px solid var(--filet-fort); }
  .plo-ag-etape-tete { align-self: start; }
  .plo-ag-etape::before { left: 0; top: -3px; }
  .plo-ag-etape::after { display: none; }
  .plo-ag-etape:first-child { border-top-color: var(--bleu); }
}
.plo-ag-mp-fin { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px; margin-top: clamp(28px, 3vw, 48px); padding-top: 20px; border-top: 1px solid var(--filet); }
.plo-ag-delai { margin: 0; font-family: var(--police-titre); font-size: var(--t-4); font-weight: 600; line-height: 1.25; }
/* Le seul appel du milieu de page : après le déroulé et le délai, quand le visiteur sait à quoi il s'engage. */
.plo-ag-mp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
@media (max-width: 599px) { .plo-ag-mp-actions .btn { width: 100%; } }

/* ---------- Les limites : deux colonnes ---------- */
.plo-ag-lim { display: grid; gap: var(--e-3); }
@media (min-width: 768px) { .plo-ag-lim { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plo-ag-lim-col { padding: clamp(20px, 2.6vw, 36px); border: 1px solid var(--filet-fort); border-radius: var(--r-bloc); background: var(--surface); }
.plo-ag-lim-col h3 { margin: 0; font-size: var(--t-3); line-height: 1.15; }
.plo-ag-lim-col ul { display: grid; margin: 16px 0 0; padding: 0; list-style: none; }
.plo-ag-lim-col li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--filet); line-height: 1.4; }
.plo-ag-lim-col li .ic { flex: none; width: 18px; height: 18px; }
.plo-ag-lim-col--non li .ic { color: var(--rouge); }
.plo-ag-lim-col--oui li .ic { color: var(--bleu-clair); }
.plo-ag-lim-fin { max-width: 44em; margin: 20px 0 0; color: var(--ardoise); line-height: 1.6; }

/* ---------- Contraste élevé ---------- */
@media (forced-colors: active) {
  .plo-ag-etape::after, .plo-ag-fil, .plo-ag-fil::after, .plo-ag-piste, .plo-ag-piste i { background: CanvasText; forced-color-adjust: none; }
  .plo-ag-etape::before, .plo-ag-piste b { forced-color-adjust: none; border-color: CanvasText; background: Canvas; }
  .plo-ag-onglet[aria-selected="true"] { outline: 2px solid Highlight; }
}
@media (prefers-reduced-motion: reduce) {
  .plo-ag-piste i, .plo-ag-onglet { transition: none; }
}